/* ==========================================================================
   RTEX SOLUTIONS — Theme stylesheet
   Palette + structure derived from the company brochure.
   Sections in order: tokens, base, layout, header, hero, capability strip,
   about, services, workflow, products, audience, why, cta, quote form,
   footer, floating WhatsApp, utilities, responsive.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Brand — sampled from the brochure */
  --navy: #12284c;
  --navy-deep: #0b1d3a;
  --navy-mid: #1b3b6f;
  --gold: #c9a227;
  --gold-soft: #e3c46a;
  --teal: #1b9aaa;

  /* Neutrals */
  --ink: #14203a;
  --body: #40506d;
  /* Secondary text. Measured, not eyeballed: #6b7b98 only reached 4.02:1 on
     the cream/soft backgrounds and failed WCAG AA. This clears 5.08:1 at
     worst across white, --bg-soft and --cream. */
  --muted: #5a6b87;
  --line: #e2e7ef;
  --line-soft: #eef2f7;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --cream: #fbf9f4;

  /* Per-service accents — the brochure gives each service its own colour */
  --c-sourcing: #e5397f;
  --c-fashion: #1ca3a3;
  --c-textile: #f08a24;
  --c-embroidery: #2b6cb0;
  --c-embellish: #7b4fa8;
  --c-cutting: #d6455d;
  --c-stitching: #0f9d76;
  --c-qc: #e07b00;
  --c-bulk: #4c51bf;
  --c-label: #4fa855;

  /* Type */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Space + shape */
  --wrap: 1180px;
  --gutter: 24px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 29, 58, 0.06),
    0 4px 12px rgba(11, 29, 58, 0.05);
  --shadow-md: 0 2px 6px rgba(11, 29, 58, 0.07),
    0 14px 34px rgba(11, 29, 58, 0.09);
  --shadow-lg: 0 30px 70px rgba(11, 29, 58, 0.16);
  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Deliberately NO overflow-x here. Both `hidden` and `clip` on the root turn
   it into a scroll container and break `position: sticky` on the header —
   measured, not assumed. The off-canvas drawer is kept out of the scrollable
   area with `visibility: hidden` instead (see the mobile nav block). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--navy-mid);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--gold);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.35rem, 5.2vw, 4rem);
}
h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
}
h3 {
  font-size: 1.2rem;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — keyboard users land here first */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --------------------------------------------------------------- layout -- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(64px, 8vw, 108px) 0;
  position: relative;
}

.section--soft {
  background: var(--bg-soft);
}

.section--cream {
  background: var(--cream);
}

.section--navy {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.82);
}

.section--navy h2,
.section--navy h3 {
  color: #fff;
}

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(38px, 5vw, 60px);
  text-align: center;
}

.section-head--left {
  margin-left: 0;
  text-align: left;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.735rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.section-head--left .eyebrow::before {
  display: none;
}

.lead {
  font-size: 1.075rem;
  color: var(--muted);
  margin-bottom: 0;
}

.section--navy .lead {
  color: rgba(255, 255, 255, 0.66);
}

/* -------------------------------------------------------------- buttons -- */
/* Buttons are 3D stages. JS writes --rx/--ry from pointer position; the
   hover/active states drive --lift and --tz. All vars default to rest, so
   with JS off (or reduced motion) the button is simply flat and static. */
.btn {
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  --lift: 0px;
  --sheen: 150%;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transform-style: preserve-3d;
  transform: perspective(720px) translateY(var(--lift)) rotateX(var(--rx))
    rotateY(var(--ry)) translateZ(var(--tz));
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease),
    background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

/* Specular sweep — a light band that crosses the face on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 34%,
    rgba(255, 255, 255, 0.5) 47%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: var(--sheen) 0;
  opacity: 0;
  transition: background-position 0.65s var(--ease), opacity 0.25s var(--ease);
}

.btn:hover {
  --lift: -3px;
  --tz: 12px;
  --sheen: -60%;
}

.btn:hover::before {
  opacity: 1;
}

/* Press pushes the face back into the page rather than just shrinking it */
.btn:active {
  --lift: 0px;
  --tz: -5px;
  transition-duration: 0.09s;
}

.btn svg {
  flex: none;
  transform: translateZ(8px);
}

.btn--gold {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 8px 22px rgba(201, 162, 39, 0.32);
}

.btn--gold:hover {
  background: var(--gold-soft);
  color: var(--navy-deep);
  box-shadow: 0 14px 30px rgba(201, 162, 39, 0.4);
}

.btn--navy {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 22px rgba(18, 40, 76, 0.22);
}

.btn--navy:hover {
  background: var(--navy-mid);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}

.btn--outline:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.btn--wa {
  background: #25d366;
  color: #06331a;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.32);
}

.btn--wa:hover {
  background: #1fbe5a;
  color: #06331a;
}

.btn--lg {
  padding: 17px 34px;
  font-size: 0.98rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------- topbar -- */
.topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.81rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  flex-wrap: wrap;
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.topbar a {
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar a:hover {
  color: var(--gold-soft);
}

.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-soft);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- header -- */
/* The frosted background lives on a pseudo-element, NOT on .site-header
   itself. backdrop-filter turns an element into the containing block for its
   position:fixed descendants — with it on the header, the mobile nav drawer
   was being sized against the 77px header instead of the viewport, so only
   one or two links were reachable. Moving the filter to ::before keeps the
   effect and frees the drawer to size against the viewport. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.25s var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.site-header.is-stuck {
  box-shadow: 0 6px 26px rgba(11, 29, 58, 0.09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

/* Logo — RTEX wordmark, navy "RT" into teal "EX", as on the brochure */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand__mark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__word {
  font-family: var(--font-display);
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.brand__word em {
  font-style: normal;
  background: linear-gradient(100deg, var(--teal), #2b6cb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__sub {
  font-family: var(--font-body);
  font-size: 0.575rem;
  font-weight: 600;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.site-header .brand__sub {
  margin-left: 2px;
}

/* Primary nav */
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s var(--ease);
}

.nav a:hover::after,
.nav a.is-active::after {
  width: 100%;
}

.nav a.is-active {
  color: var(--navy);
  font-weight: 600;
}

/* The nav carries its own CTA so the mobile drawer has one. On desktop the
   standalone .header__cta is used instead — show only one of the two. */
@media (min-width: 901px) {
  .nav .btn {
    display: none;
  }
}

.header__cta {
  flex: none;
}

/* Close button lives inside the drawer. Hidden on desktop, where the nav is
   an ordinary inline list. */
.nav-close {
  display: none;
}

/* Mobile toggle */
.nav-toggle {
  /* Positioned so it stays above the fixed drawer. Without this the drawer
     paints over it (positioned beats static) and there is no way to close. */
  position: relative;
  z-index: 2;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: var(--navy);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  isolation: isolate;
}

/* Optional looping background video (config: hero_video). Sits at the very
   back; the scrim above it guarantees headline contrast over any footage. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(
    105deg,
    rgba(11, 29, 58, 0.95) 0%,
    rgba(11, 29, 58, 0.86) 42%,
    rgba(11, 29, 58, 0.66) 100%
  );
}

/* Woven-thread texture — stands in for photography */
.hero__weave {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 9px
    );
}

.hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hero__glow--gold {
  width: 560px;
  height: 560px;
  right: -140px;
  top: -180px;
  background: rgba(201, 162, 39, 0.28);
}

.hero__glow--teal {
  width: 480px;
  height: 480px;
  left: -180px;
  bottom: -220px;
  background: rgba(27, 154, 170, 0.24);
}

/* With footage behind it, the pattern and glows step back so they read as
   depth rather than competing with the video. */
.hero--video .hero__weave {
  opacity: 0.2;
}

.hero--video .hero__glow {
  opacity: 0.55;
}

.hero__inner {
  padding: clamp(70px, 10vw, 128px) 0 clamp(56px, 7vw, 92px);
  max-width: 860px;
}

.hero h1 {
  color: #fff;
  margin-bottom: 22px;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-soft);
}

.hero__strap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}

.hero__strap span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.hero__strap span:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.6);
}

.hero__lead {
  font-size: clamp(1.03rem, 1.6vw, 1.18rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 640px;
  margin-bottom: 34px;
}

/* Three trust badges under the hero */
.hero__badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 4px;
  background: var(--navy-deep);
}

.hero__badge svg {
  flex: none;
  color: var(--gold);
}

.hero__badge strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.hero__badge span {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.58);
}

/* ------------------------------------------------- capability strip (5) -- */
.capstrip {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  padding: 46px 0;
}

.capstrip__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.cap {
  text-align: center;
  padding: 0 6px;
}

.cap__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--navy);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease);
}

.cap:hover .cap__icon {
  transform: translateY(-4px);
  background: var(--navy);
  color: var(--gold);
}

.cap p {
  font-size: 0.865rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.42;
  margin: 0;
}

/* ---------------------------------------------------------------- about -- */
.about__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.about__body p {
  font-size: 1.03rem;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.stat span {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Mission / Vision / Values card */
.mvv {
  background: var(--navy-deep);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 40px);
  color: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.mvv::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.16);
  filter: blur(40px);
}

.mvv__block + .mvv__block {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mvv h3 {
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.mvv p {
  font-size: 0.945rem;
  margin: 0;
}

.mvv__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvv__values li {
  font-size: 0.815rem;
  font-weight: 500;
  color: #fff;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

/* ------------------------------------------------------------- services -- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.svc {
  --accent: var(--navy);
  --rx: 0deg;
  --ry: 0deg;
  --srx: 0deg; /* scroll-driven — works on touch, where hover never fires */
  --pop: 0px;
  --erY: 0deg; /* entrance rotation, set by the .reveal rules */
  --etY: 0px; /* entrance offset, set by the .reveal rules */
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  transform-style: preserve-3d;
  /* Single source of truth for this element's transform. The entrance
     animation feeds it through --erY/--etY rather than declaring its own
     `transform`, which would override the tilt entirely. */
  transform: perspective(900px) rotateX(calc(var(--rx) + var(--srx)))
    rotateY(calc(var(--ry) + var(--erY))) translateY(var(--etY))
    translateZ(var(--pop));
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.28s var(--ease);
}

/* Accent bar is clipped to the card's rounded top edge without overflow:hidden,
   which would flatten the 3D context. */
.svc::before {
  border-radius: var(--radius) var(--radius) 0 0;
}

.svc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}

.svc:hover {
  --pop: 16px;
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.svc:hover::before {
  transform: scaleX(1);
}

/* Inner layers sit at different depths so the tilt produces real parallax */
.svc__icon {
  transform: translateZ(28px);
  transition: transform 0.4s var(--ease);
}

.svc h3 {
  transform: translateZ(18px);
}

.svc p {
  transform: translateZ(10px);
}

.svc:hover .svc__icon {
  transform: translateZ(46px) rotate(-5deg);
}

.svc__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 11%, #fff);
  color: var(--accent);
  margin-bottom: 16px;
}

.svc h3 {
  font-size: 1.03rem;
  margin-bottom: 8px;
}

.svc p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Accent assignment, mirroring the brochure's colour order */
.svc--sourcing {
  --accent: var(--c-sourcing);
}
.svc--fashion {
  --accent: var(--c-fashion);
}
.svc--textile {
  --accent: var(--c-textile);
}
.svc--embroidery {
  --accent: var(--c-embroidery);
}
.svc--embellish {
  --accent: var(--c-embellish);
}
.svc--cutting {
  --accent: var(--c-cutting);
}
.svc--stitching {
  --accent: var(--c-stitching);
}
.svc--qc {
  --accent: var(--c-qc);
}
.svc--bulk {
  --accent: var(--c-bulk);
}
.svc--label {
  --accent: var(--c-label);
}

/* ------------------------------------------------------- workflow (x8) -- */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

/* Connector line behind the numbered nodes */
.flow::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 7px,
    transparent 7px 14px
  );
}

/* .step is the outer shell — it owns the scroll entrance.
   .step__card is the 3D stage — it owns the pointer tilt.
   Splitting them keeps the two transforms from fighting each other. */
.step {
  position: relative;
  text-align: center;
}

.step__card {
  --rx: 0deg;
  --ry: 0deg;
  --srx: 0deg; /* scroll-driven — works on touch, where hover never fires */
  --pop: 0px;
  position: relative;
  padding: 6px 4px 10px;
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transform: perspective(820px) rotateX(calc(var(--rx) + var(--srx)))
    rotateY(var(--ry)) translateZ(var(--pop));
  transition: transform 0.4s var(--ease);
}

.step:hover .step__card {
  --pop: 6px;
}

/* The number is an extruded coin: a stack of box-shadows fakes the rim,
   and translateZ floats it above the label so tilting reveals the offset. */
.step__num {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  transform: translateZ(34px);
  box-shadow: 0 3px 0 #e6ebf3, 0 6px 0 #dde4ee,
    0 12px 20px rgba(11, 29, 58, 0.14);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    transform 0.4s var(--ease);
}

.step:hover .step__num {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
  transform: translateZ(58px) rotate(-6deg);
  box-shadow: 0 3px 0 #0a1730, 0 7px 0 #060f21,
    0 20px 34px rgba(11, 29, 58, 0.32);
}

.step p {
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  transform: translateZ(16px);
  transition: transform 0.4s var(--ease);
}

/* -------------------------------------------------------------- products -- */
.products__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.product {
  --rx: 0deg;
  --ry: 0deg;
  --srx: 0deg; /* scroll-driven — works on touch, where hover never fires */
  --pop: 0px;
  --erY: 0deg;
  --etY: 0px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(calc(var(--rx) + var(--srx)))
    rotateY(calc(var(--ry) + var(--erY))) translateY(var(--etY))
    translateZ(var(--pop));
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.26s var(--ease);
}

.product:hover {
  --pop: 14px;
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.product svg {
  margin: 0 auto 14px;
  color: var(--navy);
  transform: translateZ(30px);
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}

.product:hover svg {
  color: var(--gold);
  transform: translateZ(50px) scale(1.08);
}

.product h3 {
  transform: translateZ(16px);
}

.product span {
  transform: translateZ(8px);
  display: block;
}

.product h3 {
  font-size: 0.98rem;
  margin: 0 0 4px;
}

.product span {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ------------------------------------------------------ who we serve (5) -- */
.audience__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.aud {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
}

.aud__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--navy);
}

.aud h3 {
  font-size: 0.95rem;
  margin: 0;
}

/* ------------------------------------------------------- client cards -- */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
  gap: 20px;
  list-style: none;
}

/* Same 3D system as the service cards: pointer tilt, scroll rotation and
   real translateZ depth between the monogram and the name. */
.client {
  --accent: var(--navy);
  --rx: 0deg;
  --ry: 0deg;
  --srx: 0deg;
  --pop: 0px;
  --erY: 0deg;
  --etY: 0px;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(calc(var(--rx) + var(--srx)))
    rotateY(calc(var(--ry) + var(--erY))) translateY(var(--etY))
    translateZ(var(--pop));
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.28s var(--ease);
}

/* Accent rule that draws in along the bottom edge on hover */
.client::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}

.client:hover {
  --pop: 18px;
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.client:hover::after {
  transform: scaleX(1);
}

.client__inner {
  display: grid;
  justify-items: center;
  gap: 15px;
  padding: 34px 20px 32px;
  text-decoration: none;
  transform-style: preserve-3d;
}

/* Monogram tile — the deepest layer, so tilting reveals real parallax */
.client__monogram {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  font-family: var(--font-display);
  font-size: 1.46rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  transform: translateZ(36px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 20%, transparent);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background 0.3s var(--ease), color 0.3s var(--ease);
}

.client:hover .client__monogram {
  transform: translateZ(62px) rotate(-6deg) scale(1.06);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* Logo variant, when a client supplies an image file */
.client__logo {
  max-height: 52px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transform: translateZ(36px);
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease),
    transform 0.4s var(--ease);
}

.client:hover .client__logo {
  filter: grayscale(0);
  opacity: 1;
  transform: translateZ(58px) scale(1.05);
}

.client__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-align: center;
  line-height: 1.32;
  transform: translateZ(18px);
  transition: color 0.25s var(--ease), transform 0.4s var(--ease);
}

.client:hover .client__name {
  color: var(--accent);
}

@media (max-width: 600px) {
  .clients__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .client__inner {
    padding: 26px 14px 24px;
    gap: 12px;
  }
  .client__monogram {
    width: 58px;
    height: 58px;
    font-size: 1.24rem;
    border-radius: 16px;
  }
  .client__name {
    font-size: 0.95rem;
  }
}

/* ------------------------------------------------------------ why rtex -- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}

.why__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.why__item svg {
  flex: none;
  margin-top: 2px;
  color: var(--gold);
}

.why__item strong {
  display: block;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.why__item span {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}

/* ---------------------------------------------------- founder message -- */
/* Editorial/magazine treatment: asymmetric grid, drop cap, pull quote and a
   constrained measure. Print conventions do the heavy lifting here, which is
   why this reads as considered without costing any performance. */
.founder {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

/* Faint thread texture ties the section back to the hero */
.founder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      90deg,
      rgba(18, 40, 76, 0.028) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(18, 40, 76, 0.022) 0 1px,
      transparent 1px 10px
    );
}

.founder > .container {
  position: relative;
  z-index: 1;
}

.founder__grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(38px, 5.5vw, 76px);
  /* Top-aligned, not centred — the portrait floating mid-column was the main
     reason the old version looked unresolved. */
  align-items: start;
}

/* Portrait: a solid navy block offset behind the lower-left corner, with a
   thin gold rule at the top right. Composition instead of a plain frame. */
.founder__media {
  position: relative;
  margin: 0;
  padding: 0 0 20px 20px;
}

.founder__media::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68%;
  height: 62%;
  background: var(--navy);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.founder__media::after {
  content: "";
  position: absolute;
  top: 26px;
  right: -12px;
  width: 2px;
  height: 96px;
  background: var(--gold);
  z-index: 2;
}

.founder__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--bg-soft);
}

/* Fallback when no portrait has been uploaded yet */
.founder__photo--initials {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 100%);
}

.founder__photo--initials span {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.founder__heading {
  font-size: clamp(1.62rem, 2.9vw, 2.4rem);
  max-width: 15ch;
  margin: 0 0 22px;
}

.founder__quote {
  margin: 0;
  border: 0;
  padding: 0;
}

.founder__quote p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--body);
  /* 65-75 characters is the readable range; ch units hold it there
     regardless of viewport. */
  max-width: 64ch;
  margin-bottom: 1.05em;
}

.founder__quote p:last-child {
  margin-bottom: 0;
}

/* Drop cap on the opening paragraph.
   Sized to clear exactly two lines: 3.35em x 0.88 line-height plus the top
   margin lands just under 2 x the 28px body line, so the third line returns
   to the full measure instead of half-wrapping around it.
   padding-right is deliberately small — at 12px the cap read as a separate
   word ("A t RTEX") rather than the first letter of "At". */
.founder__quote p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.35em;
  line-height: 0.88;
  font-weight: 600;
  color: var(--gold);
  padding-right: 5px;
  margin-top: 4px;
}

/* Pull quote — the strongest line, lifted out of the flow.
   Selector is qualified with `p` so it outranks `.founder__quote p` above,
   which would otherwise win on specificity and flatten it. */
.founder__quote p.founder__pull {
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.52rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  max-width: 32ch;
}

.founder__sign {
  margin-top: 34px;
  padding-top: 24px;
  position: relative;
}

/* Short gold rule rather than a full-width divider */
.founder__sign::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 3px;
  background: var(--gold);
}

.founder__sign-img {
  width: auto;
  max-height: 58px;
  margin-bottom: 12px;
  opacity: 0.9;
}

.founder__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

.founder__role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 5px 0 0;
}

@media (max-width: 900px) {
  .founder__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .founder__media {
    max-width: 320px;
  }
  .founder__heading {
    max-width: none;
  }
  .founder__pull {
    max-width: none;
  }
}

/* ------------------------------------------------------------ cta band -- */
.cta-band {
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-mid) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(56px, 7vw, 88px) 0;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 12px
  );
}

.cta-band .container {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  color: #fff;
  max-width: 800px;
  margin: 0 auto 12px;
}

.cta-band h2 em {
  font-style: italic;
  color: var(--gold-soft);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  margin: 0 auto 30px;
}

.cta-band .btn-row {
  justify-content: center;
}

/* ----------------------------------------------------------- quote form -- */
.quote__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}

.quote__aside .lead {
  margin-bottom: 28px;
}

.contact-list {
  display: grid;
  gap: 14px;
}

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contact-item svg {
  flex: none;
  margin-top: 3px;
  color: var(--gold);
}

.contact-item strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.contact-item a,
.contact-item span {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
}

.contact-item a:hover {
  color: var(--gold);
}

/* Form */
.quote-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.2vw, 38px);
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.field .req {
  color: var(--c-cutting);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--ink);
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 108px;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6b87' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--c-cutting);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.form-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 14px 0 0;
}

/* --------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.footer__pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pillar {
  background: var(--navy-deep);
  padding: 30px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.pillar svg {
  flex: none;
  color: var(--gold);
}

.pillar strong {
  display: block;
  color: #fff;
  font-size: 0.93rem;
  font-weight: 600;
}

.pillar span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(44px, 6vw, 68px) 0;
}

.site-footer .brand__word {
  color: #fff;
}

.site-footer .brand__sub {
  color: rgba(255, 255, 255, 0.5);
}

.footer__about {
  margin-top: 18px;
  max-width: 320px;
  line-height: 1.7;
}

/* h3, not h4 — jumping straight from the page's h2 sections to h4 breaks
   screen-reader heading navigation. */
.footer h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.footer__links li + li {
  margin-top: 9px;
}

.footer__links a,
.footer__contact a {
  color: rgba(255, 255, 255, 0.65);
}

.footer__links a:hover,
.footer__contact a:hover {
  color: var(--gold-soft);
}

.footer__contact li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  line-height: 1.55;
}

.footer__contact li + li {
  margin-top: 13px;
}

.footer__contact svg {
  flex: none;
  margin-top: 4px;
  color: var(--gold);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------- floating WhatsApp CTA -- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 15px;
  background: #25d366;
  color: #06331a;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.02);
  color: #06331a;
  box-shadow: 0 16px 38px rgba(37, 211, 102, 0.5);
}

.wa-float svg {
  flex: none;
}

/* ------------------------------------------------------------ services page -- */
.svc-detail {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.svc-detail:last-child {
  border-bottom: 0;
}

.svc-detail__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent, var(--navy)) 11%, #fff);
  color: var(--accent, var(--navy));
}

.svc-detail h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.tag {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
}

/* Page hero for interior pages */
.page-hero {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(52px, 7vw, 84px) 0;
  position: relative;
  overflow: hidden;
}

.page-hero__weave {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 9px
    );
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-bottom: 12px;
}

.page-hero p {
  max-width: 640px;
  margin: 0;
}

.breadcrumb {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--gold-soft);
}

/* FAQ */
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 12px;
}

.faq summary {
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1;
  flex: none;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  margin: 12px 0 0;
  font-size: 0.94rem;
  color: var(--muted);
}

/* ------------------------------------------------------- scroll reveal -- */
/* Fade is shared by everything. The movement is deliberately NOT set here:
   .svc and .product drive their own transform from custom properties, and a
   `transform` declared at this specificity (0,2,0) would outrank theirs
   (0,1,0) and silently cancel the tilt. Each group opts in below. */
.js .reveal {
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
}

/* Simple elements: a plain lift. Cards and steps are excluded — they have
   their own 3D entrances further down. */
.js .reveal:not(.svc):not(.product):not(.step):not(.client) {
  transform: translateY(20px);
}

.js .reveal:not(.svc):not(.product):not(.step):not(.client).is-visible {
  transform: none;
}

/* Workflow steps get a 3D hinge-up entrance instead of a flat fade, so the
   eight stages visibly assemble in sequence as the section scrolls in. */
.js .step.reveal {
  opacity: 0;
  transform: perspective(900px) rotateX(-46deg) translateY(26px) scale(0.92);
  transform-origin: 50% 100%;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .step.reveal.is-visible {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
}

/* Service and product cards rise with a slight 3D turn.
   These set only the entrance variables — never `transform` itself, or they
   would win on specificity and cancel the pointer tilt and scroll rotation. */
.js .svc.reveal,
.js .product.reveal,
.js .client.reveal {
  opacity: 0;
  --erY: -14deg;
  --etY: 30px;
}

.js .svc.reveal.is-visible,
.js .product.reveal.is-visible,
.js .client.reveal.is-visible {
  opacity: 1;
  --erY: 0deg;
  --etY: 0px;
}

/* --------------------------------------------------- scroll parallax --- */
/* JS writes --py from scroll progress; elements drift at their own rate. */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* Only hint the compositor while an element is actually mid-animation */
.is-animating {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Everything lands flat and visible — no tilt, no parallax, no hinge-in */
  .js .reveal,
  .js .step.reveal,
  .js .svc.reveal,
  .js .product.reveal,
  .js .reveal.is-visible,
  .js .step.reveal.is-visible,
  .js .svc.reveal.is-visible,
  .js .product.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn:hover,
  .btn:active,
  .client,
  .client:hover,
  .client__monogram,
  .client:hover .client__monogram,
  .client__logo,
  .client__name,
  .step__card,
  .step__num,
  .step:hover .step__num,
  .step p,
  .svc,
  .svc:hover,
  .svc__icon,
  .svc:hover .svc__icon,
  .svc h3,
  .svc p,
  .product,
  .product:hover,
  .product svg,
  .product:hover svg,
  .product h3,
  .product span,
  .btn svg,
  [data-parallax] {
    transform: none !important;
  }

  .btn::before {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .services__grid,
  .products__grid,
  .audience__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .capstrip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
  .flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 12px;
  }
  .flow::before {
    display: none;
  }
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
  .footer__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .about__grid,
  .quote__grid {
    grid-template-columns: 1fr;
  }
  .why__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero__badges {
    grid-template-columns: 1fr;
  }
  .hero__badge {
    padding: 20px 4px;
  }

  /* Mobile navigation */
  .nav-toggle {
    display: flex;
  }
  .header__cta {
    display: none;
  }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Top padding only needs to clear the close button now, not the header. */
    padding: 20px 26px 30px;
    background: #fff;
    box-shadow: -18px 0 50px rgba(11, 29, 58, 0.16);
    transform: translateX(100%);
    /* visibility does two jobs while closed: it keeps the off-canvas panel
       out of the scrollable area, and it stops keyboard users tabbing into
       a drawer they cannot see. The 0s delay holds it visible for the length
       of the slide-out so the animation is not cut short. */
    visibility: hidden;
    transition: transform 0.32s var(--ease), visibility 0s linear 0.32s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.32s var(--ease), visibility 0s;
  }
  /* Close control: 44px tap target, sits at the top-right of the drawer */
  .nav-close {
    display: grid;
    place-items: center;
    align-self: flex-end;
    flex: none;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--navy);
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
  }

  .nav-close:hover,
  .nav-close:focus-visible {
    background: var(--navy);
    color: #fff;
  }

  .nav a {
    padding: 15px 0;
    font-size: 1.03rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a::after {
    display: none;
  }
  .nav .btn {
    margin-top: 22px;
    width: 100%;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 29, 58, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
    z-index: 99;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }
  body.nav-open {
    overflow: hidden;
  }
}

/* Touch targets. On a phone these link lists are navigation, not inline prose,
   so they need a 44px tap area — at their natural 17-22px they are easy to
   miss. Handled with min-height so the text position is unchanged. */
@media (hover: none), (max-width: 900px) {
  .footer__links a,
  .footer__contact a,
  .topbar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* min-height now provides the separation, so the old margins would
     double up. */
  .footer__links li + li {
    margin-top: 0;
  }

  .footer__contact li + li {
    margin-top: 4px;
  }
}

@media (max-width: 720px) {
  .topbar__note {
    display: none;
  }
  .topbar__inner {
    justify-content: center;
    gap: 14px;
  }
  .services__grid,
  .products__grid,
  .audience__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .footer__main,
  .footer__pillars {
    grid-template-columns: 1fr;
  }
  .svc-detail {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .wa-float span {
    display: none;
  }
  .wa-float {
    padding: 15px;
    right: 16px;
    bottom: 16px;
  }
  .btn-row .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 460px) {
  .services__grid,
  .products__grid,
  .audience__grid {
    grid-template-columns: 1fr;
  }
  .brand__word {
    font-size: 1.45rem;
  }
  .brand__sub {
    letter-spacing: 0.34em;
  }
}

/* ============================================== WordPress core support == */
/* Styles for content written in the block editor, plus the classes WordPress
   generates itself (alignment, captions, screen-reader text, pagination). */

.entry-content {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.03rem;
}

.entry-content > * + * {
  margin-top: 1.15em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
  list-style: revert;
}

.entry-content li + li {
  margin-top: 0.4em;
}

.entry-content a {
  color: var(--navy-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:hover {
  color: var(--gold);
}

.entry-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--navy);
}

.entry-content code,
.entry-content kbd {
  font-size: 0.9em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.entry-content pre {
  overflow-x: auto;
  background: var(--navy-deep);
  color: #e6ecf5;
  padding: 18px 20px;
  border-radius: var(--radius);
}

.entry-content pre code {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
}

.entry-content th {
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 600;
}

/* Tables and embeds must scroll inside themselves, never the page */
.entry-content > table,
.entry-content .wp-block-table {
  display: block;
  overflow-x: auto;
}

.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
  max-width: 100%;
}

/* WordPress alignment classes */
.alignleft {
  float: left;
  margin: 0.4em 1.6em 1em 0;
}

.alignright {
  float: right;
  margin: 0.4em 0 1em 1.6em;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  max-width: min(1080px, 92vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

.alignfull {
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.wp-caption,
.wp-block-image figcaption,
.wp-caption-text {
  font-size: 0.85rem;
  color: var(--muted);
}

.wp-block-image figcaption {
  margin-top: 8px;
  text-align: center;
}

.wp-block-button__link {
  background: var(--gold);
  color: var(--navy-deep);
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
}

/* Sticky post and gallery defaults */
.sticky {
  border-left: 3px solid var(--gold);
  padding-left: 18px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

/* Required by WordPress accessibility guidelines — visually hidden but
   still announced by screen readers. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
}

.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 14px 22px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 8px 0;
  z-index: 999;
  top: 0;
  left: 0;
}

/* Pagination and multi-page post links */
.pagination,
.page-links,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.pagination .page-numbers,
.page-links > a,
.page-links > span,
.nav-links a {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.pagination .page-numbers:hover,
.nav-links a:hover {
  border-color: var(--navy);
}

.pagination .page-numbers.current,
.page-links > span {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold);
}

/* Comments */
.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.94rem;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
}

.comment-form input[type="submit"] {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  font-weight: 600;
  cursor: pointer;
}

/* WordPress admin bar keeps the sticky header clear of it */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ------------------------------------------------------------- printing -- */
@media print {
  .site-header,
  .topbar,
  .wa-float,
  .nav-toggle,
  .cta-band .btn-row,
  .quote-form {
    display: none !important;
  }
  body {
    color: #000;
  }
}