/* ============================================================
   CHIXERION — video hero + brain.space-style horizontal panels
   ============================================================ */

@font-face { font-family:'Standerd'; src:url('../fonts/Standerd-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Standerd'; src:url('../fonts/Standerd-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Standerd'; src:url('../fonts/Standerd-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Standerd'; src:url('../fonts/Standerd-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Collier'; src:url('../fonts/Collier-Book.ttf') format('truetype'); font-weight:400; font-display:swap; }

:root{
  --navy:#041728;
  --blue:#005EAB;
  --blue2:#0A74C9;
  --sky:#71BAE2;
  --ice:#F4F6F8;
  --paper:#FFFFFF;
  --dirty:#FFFFFF;          /* was a cream #E7E3D9 — now pure white, matching --paper, so hero/brands/capabilities read as one continuous background instead of visibly banded sections */
  --slate:#5A6572;
  --rule:#E1E6EB;
  --display:'Standerd',sans-serif;
  --sans:'Inter',sans-serif;
  --logo:'Collier',serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--sans);
  color:var(--navy);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- header (no scroll effect) ---------- */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4.5vw,72px);
}
.hd-logo{display:flex;align-items:center;gap:12px}
.hd-logo img{height:30px;width:auto}
.hd-logo .wm{font:400 20px/1 var(--logo);letter-spacing:.16em;color:var(--navy);transform:translateY(1px)}

/* ---------- header nav (placeholder links) ---------- */
/* position:relative here is what the mega-menu below anchors to — its
   left:0/right:0 need to resolve against THIS box (which spans exactly
   from Services' left edge to Contact's right edge, since those are its
   only edge children) rather than the small .hd-nav-services wrapper. */
.hd-nav{display:flex;align-items:center;gap:36px;position:relative}
.hd-nav a{
  position:relative;
  font:500 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);opacity:.8;
  padding:4px 0;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.hd-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.hd-nav a:hover{opacity:1;color:var(--blue)}
.hd-nav a:hover::after{transform:scaleX(1)}

/* ---------- services mega-menu ---------- */
/* deliberately NOT position:relative — an absolutely positioned
   descendant skips right past a non-positioned ancestor to the next
   positioned one up the chain (.hd-nav), so the menu below inherits
   .hd-nav's full width instead of just this link's. (display:contents
   was tempting here to remove the wrapper box entirely, but it has
   patchy :hover-matching behavior across browsers — a plain block that
   shrinks to its link's content width is just as invisible visually
   and works everywhere.) */
.hd-nav-services{display:inline-flex}
/* the menu box now starts flush at 100% (no dead gap to cross) and carries
   its own top padding as an invisible hover bridge; the visible glass card
   lives in .services-menu-panel, offset down by that same padding so it
   still reads as "floating" below the nav without breaking :hover. */
.services-menu{
  position:absolute;right:0;top:100%;
  padding-top:22px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease), visibility .28s;
  z-index:60;
}
.hd-nav-services:hover .services-menu,
.services-menu:hover,
.hd-nav-services.is-open .services-menu{
  opacity:1;visibility:visible;pointer-events:auto;
}
.services-menu-panel{
  display:grid;grid-template-columns:repeat(3,148px);gap:8px;
  /* background/backdrop-filter/box-shadow now come from .depth-glass
     (the same real-refraction liquid-glass material as the "Start a
     Conversation" button, via the #liquid-glass-filter SVG) — this rule
     only owns layout. isolation:isolate scopes .depth-glass's own
     ::before/::after sheen so it doesn't stack above the tiles; see the
     explicit z-index on .services-menu-item below. */
  isolation:isolate;
  border-radius:24px;
  padding:14px;
  transform:translateY(-8px);
  transition:transform .28s var(--ease);
}
/* a bit whiter than the button's default glass tint — this panel is much
   bigger and sits over highly variable backgrounds (hero video, cards),
   so it needs more of its own body to keep the grid legible. Also
   force plain blur() instead of the @supports upgrade to the real
   url(#liquid-glass-filter) refraction: that SVG-displacement filter is
   the one thing this component has that .eco-card.depth-glass (same
   shared class, no reported issue) deliberately doesn't use — it was
   reading through the opaque tiles as translucency at rest, fixable
   only by hover's incidental layer promotion. Matching eco-card's
   already-proven plain-blur override removes the mechanism instead of
   working around its side effect. */
.services-menu-panel.depth-glass{
  background:linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.62) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(1.5) brightness(1.05) !important;
  backdrop-filter:blur(20px) saturate(1.5) brightness(1.05) !important;
}
/* .depth-glass::after is a soft diagonal sheen that covers nearly the
   whole box (inset:2px), not just a border ring — over a grid of already
   colourful tiles that reads as a light wash over everything. Dropping it
   here keeps the glass look confined to the border ring (::before) and
   the backdrop/background showing only through the gaps and padding,
   never over the opaque tiles themselves. */
.services-menu-panel.depth-glass::after{content:none}
.services-menu:hover .services-menu-panel,
.hd-nav-services:hover .services-menu-panel,
.hd-nav-services.is-open .services-menu-panel{
  transform:translateY(0);
}
.services-menu-item{
  position:relative;z-index:2;isolation:isolate;display:flex;align-items:flex-start;
  height:118px;border-radius:15px;
  background:#0a0f14;
  /* explicit opaque + no backdrop-filter of its own — .services-menu-panel
     above is .depth-glass (real backdrop-filter refraction via the
     feDisplacementMap SVG filter). backdrop-filter:none alone didn't
     stop the panel's refraction reading through the tile at rest —
     only :hover's transform (which promotes the tile to its own GPU
     compositing layer) actually stopped it, which pointed at a
     compositing/paint-order quirk with this SVG-filter backdrop-filter
     specifically, not a CSS specificity issue. translateZ(0) forces
     that same layer promotion permanently instead of only on hover. */
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transform:translateZ(0);backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* the photo lives on its own layer, separate from the tile's own
   lift/shadow, so it can scale+brighten independently on hover instead
   of just riding along with the tile's transform */
.services-menu-photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  transform:scale(1);filter:brightness(1) saturate(1);
  transition:transform .5s var(--ease), filter .5s var(--ease);
  will-change:transform;
}
.services-menu-item::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(4,23,40,.55) 0%, rgba(4,23,40,0) 45%);
}
.services-menu-item:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -14px rgba(4,23,40,.5), inset 0 0 0 1px rgba(255,255,255,.14);
}
.services-menu-item:hover .services-menu-photo{
  transform:scale(1.1);filter:brightness(1.15) saturate(1.15);
}
.services-menu-title{
  position:relative;z-index:1;
  font:600 15px/1.28 var(--sans);letter-spacing:0;text-transform:none;color:#fff;
  padding:14px;
}
.services-menu-title em{
  display:block;font:italic 400 15px/1.28 var(--logo);color:rgba(255,255,255,.75);
  margin-top:1px;
}

.btn-audit{
  display:inline-flex;align-items:center;gap:10px;
  font:500 13px/1 var(--sans);letter-spacing:.01em;color:#fff;
  background:var(--blue);border-radius:999px;
  padding:12px 22px;
  box-shadow:0 8px 24px -8px rgba(0,94,171,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  will-change:transform;
}
.btn-audit:hover{background:var(--blue2);box-shadow:0 12px 32px -8px rgba(10,116,201,.6), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-audit svg{transition:transform .3s var(--ease)}
.btn-audit:hover svg{transform:translateX(3px)}
.btn-audit.btn-lg{padding:16px 30px;font-size:14px}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100svh;min-height:620px;
  overflow:hidden;
  background:var(--dirty);          /* reveal colour — bridges into Capabilities */
}
/* the whole hero visual, scaled + rounded on scroll (brain.space minimise) */
.hero-inner{
  position:absolute;inset:0;overflow:hidden;
  transform-origin:50% 42%;
  border-radius:0;
  will-change:transform,border-radius;
  backface-visibility:hidden;
}

/* full-bleed background video, coloured to a white→blue gradient */
.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform-origin:center;will-change:filter}
.bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* strip the warm peach to luminance so the blue tint reads true */
  filter:grayscale(1) brightness(1.16) contrast(1.02);
}
/* white → blue gradient multiplied over the silk */
.bg-tint{
  position:absolute;inset:0;
  background:linear-gradient(122deg,#ffffff 0%,#e4eff9 24%,#8dbbe4 58%,#0A74C9 100%);
  mix-blend-mode:multiply;
}
.bg-tint::after{
  content:"";position:absolute;right:-14vw;bottom:-20vw;
  width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(113,186,226,.5), transparent 62%);
  mix-blend-mode:screen;filter:blur(30px);
}
/* faint light veil to lift the navy copy off the busiest silk */
.bg-veil{
  position:absolute;inset:0;
  background:radial-gradient(90% 70% at 30% 42%, rgba(255,255,255,.5), transparent 60%);
}
.mesh-grain{
  position:absolute;inset:0;width:100%;height:100%;filter:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- hero copy ---------- */
.hero-copy{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 clamp(20px,5vw,80px);
  pointer-events:none;
}
.headline{
  font:400 clamp(40px,6.4vw,96px)/1.05 var(--display);
  letter-spacing:-.03em;color:var(--navy);
  text-shadow:0 1px 40px rgba(255,255,255,.35);
}
.headline .hl-line{display:block}
.headline .w{display:inline-block;will-change:transform}
.headline .wi{display:inline-block;will-change:transform}

/* last line — bold, blue, animated gradient sweep. Its words get the
   same reveal/exit treatment as every other word (.w/.wi) — the gradient
   stays one continuous sweep instead of tearing into a separate sweep per
   word because background-attachment:fixed ties the gradient to the
   viewport, not to each word's own box. */
.hl-line-accent{padding-bottom:.1em}
.wi.accent{
  font-weight:700;
  /* background-size's "100%" height is relative to THIS element's own
     padding box. .headline's inherited line-height (1.05) is tighter than
     this font's true descender depth, so without the padding the gradient
     ran out before reaching the bottom of g/y's descenders — they rendered
     as transparent (no background behind them to clip to), i.e. visually
     "cut off". Padding grows the box so the gradient covers the full glyph. */
  padding-bottom:.34em;
  background-image:linear-gradient(to right, #0050c8 0%, #5aa8f0 50%, #0050c8 100%);
  background-size:250% 100%;
  background-attachment:fixed;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:text-shine 9s ease-in-out infinite alternate;
}
@keyframes text-shine{
  0%{background-position:0% 0}
  100%{background-position:-250% 0}
}

/* ---------- hero CTA ---------- */
.hero-tagline-body{
  margin-top:10px;max-width:110ch;
  font:400 clamp(15px,1.2vw,18px)/1.6 var(--sans);color:rgba(4,23,40,.68);
}
.hero-cta{margin-top:28px;pointer-events:auto}
/* purely a transform target for the entrance tween — no visual styling
   of its own, just has to not disrupt the button's own inline sizing */
#heroCtaInner{display:inline-block}

/* ============================================================
   ECOSYSTEM — pinned horizontal panels (dirty white)
   ============================================================ */
.eco{
  position:relative;z-index:3;
  background:var(--dirty);
  color:var(--navy);
}
.eco-viewport{
  position:relative;
  height:100svh;min-height:620px;
  display:flex;align-items:center;
  overflow:hidden;
}
.eco-track{
  display:flex;align-items:center;gap:clamp(22px,2.6vw,52px);
  padding-left:clamp(20px,6vw,120px);
  padding-right:clamp(20px,6vw,120px);
  will-change:transform;
}

/* progress bar for the pinned horizontal scroll — fixed to the bottom of
   the viewport (not the track, which translates horizontally) so it
   stays put while the cards pan underneath it. */
.eco-progress{
  position:absolute;left:50%;bottom:36px;
  width:calc((100% - 2 * clamp(20px,6vw,120px)) * .4);
  transform:translateX(-50%);
  height:4px;border-radius:999px;
  background:rgba(4,23,40,.1);
  overflow:hidden;
}
.eco-progress-bar{
  width:0%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#8dbbe4 0%,#0A74C9 100%);
  background-size:200% 100%;background-position:0% 0%;
}

/* left intro column — slides away with the track (first item) */
.eco-intro{
  flex:0 0 clamp(280px,32vw,440px);
  align-self:center;
  padding-right:clamp(20px,2.5vw,48px);
}
.eco-intro-title{
  font:500 clamp(30px,3.6vw,54px)/1.06 var(--display);letter-spacing:-.03em;color:var(--navy);
  margin-bottom:14px;
}
/* padding-bottom gives descenders (the 'g' in "Growth"/"Everything") room
   inside the clipped line box — at line-height:1.06 the box is barely
   taller than cap-height, so without this they get sheared off flat. */
.eco-intro-title .hl-line{display:block;overflow:hidden;padding-bottom:.16em}
.eco-intro-title .w{display:inline-block}
.eco-intro-title .wi{display:inline-block;will-change:transform}
.eco-intro-sub{
  font:400 clamp(15px,1.05vw,17px)/1.65 var(--sans);color:var(--slate);
  max-width:42ch;
}
/* .depth-glass (shared with the CTA buttons, defined further down this
   file) supplies the card's background/border/box-shadow/backdrop-filter
   and its ::before/::after sheen layers — .eco-card only owns layout.
   overflow:hidden clips the full-bleed photo to the card's rounded
   corners; position:relative gives the photo something to sit inset:0
   inside. */
.eco-card{
  --acc:var(--blue2);
  position:relative;overflow:hidden;isolation:isolate;
  flex:0 0 clamp(320px,48vw,720px);
  height:min(74vh,760px);
  display:flex;flex-direction:column;
  padding:clamp(20px,1.9vw,32px);
  border-radius:30px;
}
/* card-scale glass needs a proper frosted blur — the shared .depth-glass
   default (blur(2px)) is tuned for a small pill sitting over whatever's
   behind the whole button; here the "whatever" is this card's own photo,
   which needs much more blur to read as glass rather than a sharp image
   with a tint over it. */
.eco-card.depth-glass{
  -webkit-backdrop-filter:blur(20px) saturate(1.5) brightness(1.05);
  backdrop-filter:blur(20px) saturate(1.5) brightness(1.05);
}
/* the artwork itself — sits behind the glass face (z-index:0, below the
   glass's own ::before/::after sheen at z-index:1) so it reads as color
   and depth through the frost rather than a sharp photo. */
.eco-card-photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  transform:scale(1.06);will-change:transform;
}
.eco-card-photo .eco-svg{display:block;width:100%;height:100%}

/* ---------- capability card artwork — hover animations ----------
   Each SVG is now inlined (not a CSS background-image) specifically so
   these rules can reach inside it. Every animation is gated on
   .eco-card:hover so the cards sit still until the visitor's actually
   on one. */

/* growth-marketing / strategy-consulting: the hero line "draws" itself
   in behind two quieter supporting series (so it reads as a graph, not
   a lone arrow), dots light up in sequence along it, and the arrowhead
   — invisible at rest, not just sitting there pre-loaded — pops in only
   once the line has actually finished drawing to its tip. */
.chart-line-main{transition:stroke-dashoffset 1.1s var(--ease)}
.eco-card:hover .chart-line-main{stroke-dashoffset:0}
.chart-line-soft{transition:stroke-dashoffset 1.3s var(--ease)}
.eco-card:hover .chart-line-soft{stroke-dashoffset:0}
.eco-card:hover .chart-line-soft:nth-of-type(1){transition-delay:.1s}
.eco-card:hover .chart-line-soft:nth-of-type(2){transition-delay:.22s}
.chart-dot{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(.4);opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.eco-card:hover .chart-dot{transform:scale(1);opacity:1}
.eco-card:hover .chart-dot:nth-of-type(1){transition-delay:.35s}
.eco-card:hover .chart-dot:nth-of-type(2){transition-delay:.55s}
.eco-card:hover .chart-dot:nth-of-type(3){transition-delay:.75s}
.eco-card:hover .chart-dot:nth-of-type(4){transition-delay:.95s}
.chart-arrow{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(.3);opacity:0;
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  transition:transform .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease);
}
.eco-card:hover .chart-arrow{
  transform:scale(1);opacity:1;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.65));
  transition-delay:1.05s;
}

/* brand-creative: kinetic colour-mixing — each blob orbits a little loop
   (diamond-shaped path via --ox/--oy, close enough to circular at this
   scale) at its own speed/offset (--odur/--odel), and mix-blend-mode:
   screen (set per-circle in the SVG) means the overlaps actually blend
   into new colours as they cross, rather than just sitting stacked. */
@keyframes blobOrbit{
  0%{transform:translate(0,0) scale(1)}
  25%{transform:translate(var(--ox), calc(var(--oy) * -1)) scale(1.08)}
  50%{transform:translate(calc(var(--ox) * 1.6), 0) scale(1.15)}
  75%{transform:translate(var(--ox), var(--oy)) scale(1.08)}
  100%{transform:translate(0,0) scale(1)}
}
.wash-blob{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:blobOrbit var(--odur,5s) ease-in-out infinite;
  animation-delay:var(--odel,0s);
  animation-play-state:paused;
}
.eco-card:hover .wash-blob{animation-play-state:running}
.swatch-disc{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(1) translateY(0);
  transition:transform .45s var(--ease);
}
.eco-card:hover .swatch-disc{transform:scale(1.12) translateY(-6px)}
.eco-card:hover .swatch-disc:nth-of-type(1){transition-delay:0s}
.eco-card:hover .swatch-disc:nth-of-type(2){transition-delay:.08s}
.eco-card:hover .swatch-disc:nth-of-type(3){transition-delay:.16s}

/* tech-data: the network draws itself, nodes pulse on, the two rings breathe */
.net-line{transition:stroke-dashoffset 1s var(--ease)}
.eco-card:hover .net-line{stroke-dashoffset:0}
.net-node{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(.3);opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.eco-card:hover .net-node{transform:scale(1);opacity:1}
.eco-card:hover .net-node:nth-of-type(1){transition-delay:.05s}
.eco-card:hover .net-node:nth-of-type(2){transition-delay:.2s}
.eco-card:hover .net-node:nth-of-type(3){transition-delay:.35s}
.eco-card:hover .net-node:nth-of-type(4){transition-delay:.5s}
.eco-card:hover .net-node:nth-of-type(5){transition-delay:.3s}
.eco-card:hover .net-node:nth-of-type(6){transition-delay:.55s}
.eco-card:hover .net-node:nth-of-type(7){transition-delay:.15s}
.net-ring{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(1);opacity:.5;
  transition:transform 1.6s var(--ease), opacity 1.6s var(--ease);
}
.eco-card:hover .net-ring{transform:scale(1.35);opacity:0}

/* ai-operations: orbits spin up, particles pulse, the core glows brighter */
@keyframes orbitSpin{
  from{transform:rotate(var(--base-rot))}
  to{transform:rotate(calc(var(--base-rot) + 360deg))}
}
.orbit-ring{animation:orbitSpin 14s linear infinite;animation-play-state:paused}
.eco-card:hover .orbit-ring{animation-play-state:running}
.orbit-particle{
  transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(1);transition:transform .6s var(--ease);
}
.eco-card:hover .orbit-particle{transform:scale(1.6)}
.core-glow, .core-solid{transition:transform .6s var(--ease), opacity .6s var(--ease)}
.core-glow{transform-box:fill-box;transform-origin:50% 50%}
.core-solid{transform-box:fill-box;transform-origin:50% 50%}
.eco-card:hover .core-glow{transform:scale(1.4);opacity:1}
.eco-card:hover .core-solid{transform:scale(1.25)}
.eco-card-body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;flex:1 1 auto;
  justify-content:flex-end;
  padding:clamp(16px,1.4vw,24px) clamp(6px,.6vw,12px) clamp(4px,.4vw,8px);
}
.eco-card-title{
  font:500 clamp(24px,2.5vw,40px)/1.1 var(--display);letter-spacing:-.02em;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
  margin-bottom:14px;
}
.eco-card-desc{
  font:400 clamp(15px,1.1vw,18px)/1.6 var(--sans);color:rgba(255,255,255,.82);
  text-shadow:0 1px 10px rgba(0,0,0,.3);
  max-width:40ch;
}
.eco-card-arrow{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);color:#fff;
  font-size:16px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.eco-card:hover .eco-card-arrow{background:#fff;color:var(--navy);border-color:#fff}

/* ============================================================
   AUDIT — growth audit request. Full-bleed two-column section (no
   floating card/panel, no outer margin) — navy fills the entire left
   half, white the entire right half, edge to edge. Styled after the
   21st.dev split-panel reference's rotating-image-carousel mechanic,
   with our own content — no React/Tailwind, plain CSS/JS like
   everything else on this page.
   ============================================================ */
.audit{position:relative;z-index:4}
.audit-shell{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:100svh;
}
.audit-photos{
  position:relative;overflow:hidden;
  /* top-aligned (not centered) on purpose — see .audit-form-wrap for why:
     this is what makes "The Constraint"/etc. line up with "Request a
     growth audit" by construction, not by tuning a vh-based nudge to
     match this particular screen. */
  display:flex;align-items:flex-start;justify-content:center;
  background:var(--navy);color:#fff;
  padding:clamp(40px,6vw,80px) clamp(28px,5vw,64px);
  background-image:radial-gradient(60% 80% at 70% 120%, rgba(10,116,201,.35), transparent 70%),
                   radial-gradient(40% 60% at 10% -10%, rgba(0,94,171,.28), transparent 70%);
}
/* the fine rotating line-work from chixerion-draft-4's Guilloche
   component (there: navy stroke on light sections, flipped to light
   blue on navy — same flip here), redrawn as a static inline SVG since
   this project has no build step to generate it at request time. */
.audit-helix{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  opacity:.9;transform-origin:center;will-change:transform;
  animation:audit-spin-wavy 26s ease-in-out infinite;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 76%);
}
@keyframes audit-spin-wavy{
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(90deg) scale(1.08)}
  50%{transform:rotate(180deg) scale(.96)}
  75%{transform:rotate(270deg) scale(1.04)}
  100%{transform:rotate(360deg) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .audit-helix{animation:none}
}
.audit-carousel{
  position:relative;z-index:1;
  width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;
}
/* swaps per active tile (JS), same as the caption box below it — so the
   "what am I looking at" label now lives at the top, and the caption box
   only has to carry the description. Same font-size clamp() as
   .audit-form-title so the two lines are the same height — combined with
   both columns now being top-aligned with matching padding-top (see
   .audit-photos/.audit-form-wrap), that's what actually lines them up,
   not a per-viewport fudge number. */
.audit-carousel-title{
  font:500 clamp(26px,2.6vw,34px)/1.1 var(--display);letter-spacing:-.02em;color:#fff;
  text-align:center;margin-bottom:clamp(24px,3.5vh,34px);
}

/* ---------- tile grid: one big tile + two stacked ---------- */
.audit-tile-grid{
  position:relative;width:100%;
  display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;gap:10px;
  height:clamp(350px,43vh,460px);
}
.audit-tile{
  position:relative;overflow:visible;border-radius:12px;
  border:none;padding:0;cursor:pointer;
  background-size:cover;background-position:center;
}
.audit-tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:#000;opacity:.6;
  transition:opacity .5s var(--ease);
}
.audit-tile.is-active::after{opacity:0}
.audit-tile-big{grid-row:1 / 3}
.audit-tile:nth-of-type(2){grid-column:2;grid-row:1}
.audit-tile:nth-of-type(3){grid-column:2;grid-row:2}

/* focus corners — mirror the reference's bracket highlight, drawn with
   plain borders on a pseudo-element rather than four separate divs */
.audit-tile-corners{
  pointer-events:none;position:absolute;inset:-8px;opacity:0;
  transition:opacity .4s var(--ease);
}
.audit-tile.is-active .audit-tile-corners{opacity:1}
.audit-tile-corners::before,
.audit-tile-corners::after{
  content:"";position:absolute;width:16px;height:16px;
  border-color:rgba(255,255,255,.7);
}
.audit-tile-corners::before{top:0;left:0;border-top:1px solid;border-left:1px solid}
.audit-tile-corners::after{bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}

/* ---------- caption box — description only, syncs to the active tile ----------
   Fixed height (not min-height): the three descriptions are different
   lengths ("Your 90-day sequence..." is one line, "Where growth is
   actually leaking..." wraps to two), and a height that flexed with
   content was pushing the whole centered column — title and images
   included — up or down every time the description changed. Sized for
   the longest (two-line) case; shorter ones just sit centered in the
   extra space via align-items:center below. */
.audit-caption-box{
  width:100%;margin-top:22px;padding:16px 20px;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  height:84px;display:flex;align-items:center;justify-content:center;
}
.audit-caption-body{font:400 16px/1.55 var(--sans);color:rgba(255,255,255,.55);text-align:center}
/* simple fade+blur crossfade whenever the title/description swap (JS
   toggles .is-fading off then back on around the text update) */
.audit-carousel-title,
.audit-caption-body{
  transition:opacity .3s var(--ease), filter .3s var(--ease);
  filter:blur(0);
}
.audit-carousel-title.is-fading,
.audit-caption-body.is-fading{opacity:0;filter:blur(6px)}

.audit-headline{
  margin-top:28px;text-align:center;
  /* same size as .audit-form-title — the two headlines sit at either
     end of this section and read as a matched pair */
  font:500 clamp(26px,2.6vw,34px)/1.15 var(--display);letter-spacing:-.02em;color:#fff;
}

.audit-dots{margin-top:28px;display:flex;gap:8px}
.audit-dot{
  height:4px;width:16px;border-radius:99px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .3s var(--ease), width .3s var(--ease);
}
.audit-dot.is-active{width:40px;background:#fff}

.audit-form-wrap{
  /* top-aligned, matching .audit-photos's own padding-top exactly — two
     blocks starting at the same Y with the same top padding means their
     first lines (the two headings) land level with each other for free,
     no matter how tall either column's content ends up being. */
  display:flex;align-items:flex-start;justify-content:center;
  background:var(--paper);
  padding:clamp(40px,6vw,80px) clamp(28px,5vw,64px);
}
.audit-form{width:100%;max-width:460px}
.audit-form-title{
  font:500 clamp(26px,2.6vw,34px)/1.1 var(--display);letter-spacing:-.02em;color:var(--navy);
  margin-bottom:10px;
}
.audit-form-sub{
  font:400 15px/1.6 var(--sans);color:var(--slate);
  max-width:48ch;margin-bottom:clamp(26px,3vh,36px);
}
.audit-field{margin-bottom:22px}
.audit-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:0}
.audit-field-row .audit-field{margin-bottom:22px}
.audit-field label{
  display:block;
  font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
  margin-bottom:10px;
}
.audit-field input,
.audit-field select{
  width:100%;height:48px;border-radius:10px;
  border:1px solid rgba(4,23,40,.14);background:var(--ice);
  padding:0 16px;font:400 15px/1 var(--sans);color:var(--navy);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.audit-field input::placeholder{color:rgba(4,23,40,.35)}
.audit-field input:focus,
.audit-field select:focus{border-color:var(--blue);background:#fff;outline:none}
.audit-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23041728' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:38px;
}
.audit-field select:invalid,
.audit-field select option[value=""]{color:rgba(4,23,40,.4)}
.audit-mobile-row{display:flex;gap:10px}
.audit-country{flex:0 0 118px;padding:0 12px !important;background-position:right 10px center}
.audit-mobile-row input{flex:1}

/* ---------- custom "Choose One" dropdown (revenue / bottleneck) ----------
   A plain native <select>'s OPEN list is rendered by the OS/browser and
   can't be restyled with CSS in most browsers — the only way to get a
   real white, spaced-out, brand-styled option list (rather than the
   native chrome) is to build the open/closed states ourselves. */
.audit-select{position:relative}
.audit-select-trigger{
  width:100%;height:48px;border-radius:10px;
  border:1px solid rgba(4,23,40,.14);background:var(--ice);
  padding:0 16px;font:400 15px/1 var(--sans);color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;text-align:left;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.audit-select-trigger:hover{background:#fff}
.audit-select.is-open .audit-select-trigger{border-color:var(--blue);background:#fff}
.audit-select-value[data-placeholder-active="true"]{color:rgba(4,23,40,.35)}
.audit-select-chevron{
  flex:0 0 auto;margin-left:12px;color:rgba(4,23,40,.45);
  transition:transform .2s var(--ease);
}
.audit-select.is-open .audit-select-chevron{transform:rotate(180deg);color:var(--blue)}
.audit-select-list{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;
  background:#fff;border-radius:12px;
  border:1px solid rgba(4,23,40,.1);
  box-shadow:0 24px 48px -16px rgba(4,23,40,.28), 0 8px 20px -8px rgba(4,23,40,.12);
  padding:8px;max-height:300px;overflow-y:auto;
  list-style:none;
}
.audit-select-list[hidden]{display:none}
.audit-select-list li{
  padding:14px 16px;border-radius:8px;
  font:400 16px/1.3 var(--sans);color:var(--navy);cursor:pointer;
  transition:background .15s var(--ease);
}
.audit-select-list li:hover,
.audit-select-list li:focus{background:var(--ice);outline:none}
.audit-select-list li + li{margin-top:2px}
/* flex:1 on each pill (below) — four equal-width pills that always share
   one row instead of wrapping the odd one onto its own line once the
   group runs out of horizontal space. Text itself is allowed to wrap
   (not nowrap+ellipsis) so the longest label ("Local / Service") shows
   in full on two lines instead of getting clipped — align-items:stretch
   (the flex row's default) then evens every pill up to match its height. */
.audit-pill-group{display:flex;flex-wrap:nowrap;gap:8px}
.audit-pill{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:8px;border-radius:10px;
  border:1px solid rgba(4,23,40,.16);background:#fff;
  font:500 13px/1.25 var(--sans);color:var(--navy);cursor:pointer;white-space:normal;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.audit-pill:hover{border-color:var(--blue)}
.audit-pill.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:420px){
  .audit-pill-group{flex-wrap:wrap}
  .audit-pill{flex:1 1 calc(50% - 4px)}
}
/* layout-only override — the button's actual material/color/sheen all
   come from .depth-btn.depth-glass (shared with "Start a Conversation"),
   applied directly in the HTML class list */
.audit-submit{margin-top:6px;width:100%}
.audit-submit .depth-label{width:100%;justify-content:center}

@media (max-width:900px){
  .audit-shell{grid-template-columns:1fr;min-height:0}
}
@media (max-width:560px){
  .audit-field-row{grid-template-columns:1fr}
}

/* ---------- audit submit — solid blue, not glass ---------- */
.audit-submit-solid{
  background:var(--blue);color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 12px 28px -10px rgba(0,94,171,.5);
}
.audit-submit-solid .depth-label{color:#fff}
.audit-submit-solid::before,
.audit-submit-solid::after{content:none}
.audit-submit-solid:hover{background:var(--blue2)}

/* ============================================================
   INTRO — "Meaningful Experiences / Start Here." (chixerion-draft-4's
   Intro section) — centered, no CTA button per instruction.
   ============================================================ */
.intro{position:relative;overflow:hidden;background:var(--paper);padding:clamp(90px,14vh,160px) clamp(20px,5vw,80px)}
.intro-helix{
  position:absolute;right:-6%;top:-35%;z-index:0;width:58%;height:170%;
  opacity:.9;transform-origin:center;will-change:transform;
  animation:audit-spin-wavy 26s ease-in-out infinite;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 76%);
}
@media (prefers-reduced-motion: reduce){.intro-helix{animation:none}}
.intro-shell{position:relative;z-index:1;max-width:1440px;margin:0 auto;text-align:center}
.intro-headline{
  font:500 clamp(46px,7.2vw,92px)/1.06 var(--display);letter-spacing:-.02em;color:var(--navy);
}
.intro-accent{
  display:block;font-weight:600;
  padding-bottom:.12em;
  background-image:linear-gradient(to right, #0050c8 0%, #5aa8f0 50%, #0050c8 100%);
  background-size:250% 100%;background-attachment:fixed;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:text-shine 9s ease-in-out infinite alternate;
}
.intro-body{
  margin:32px auto 0;max-width:130ch;
  font:400 clamp(17px,1.5vw,21px)/1.6 var(--sans);color:rgba(4,23,40,.68);
}

/* ============================================================
   WORK — case-study carousel
   ============================================================ */
.work{background:var(--paper)}
.work-carousel{position:relative}
.work-slides{position:relative;aspect-ratio:21/9;min-height:380px;overflow:hidden}
.work-slide{
  position:absolute;inset:0;z-index:0;opacity:0;
  display:flex;align-items:center;
  background-size:cover;background-position:center;
  transition:opacity .7s cubic-bezier(.22,1,.36,1);
}
.work-slide.is-active{z-index:1;opacity:1}
.work-slide-scrim{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(to right, rgba(4,23,40,.82) 0%, rgba(4,23,40,.5) 45%, transparent 78%);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  -webkit-mask-image:linear-gradient(to right, black 0%, black 40%, transparent 78%);
  mask-image:linear-gradient(to right, black 0%, black 40%, transparent 78%);
}
.work-slide-copy{position:relative;z-index:1;max-width:52ch;padding:clamp(28px,5vw,64px)}
.work-slide-labels{
  display:flex;flex-wrap:wrap;gap:12px 24px;
  font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);
  margin-bottom:18px;
}
.work-slide-copy h3{font:500 clamp(22px,2.2vw,32px)/1.15 var(--display);color:#fff;margin-bottom:16px}
.work-slide-copy p{font:400 15px/1.65 var(--sans);color:rgba(255,255,255,.85);max-width:48ch}
.work-next{
  position:absolute;top:50%;right:clamp(14px,2vw,26px);z-index:5;transform:translateY(-50%);
  width:44px;height:44px;border:none;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:rgba(255,255,255,.8);
  transition:color .3s var(--ease);
}
.work-next:hover{color:#fff}
.work-dots{margin-top:28px;display:flex;justify-content:center;gap:10px}
.work-dot{height:2px;width:28px;border:none;padding:0;background:rgba(4,23,40,.15);cursor:pointer;transition:background .3s var(--ease)}
.work-dot:hover{background:rgba(4,23,40,.4)}
.work-dot.is-active{background:rgba(4,23,40,.7)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--paper);padding:clamp(70px,10vh,120px) clamp(20px,5vw,80px)}
.faq-shell{max-width:1200px;margin:0 auto}
.faq-headline{font:500 clamp(30px,3.2vw,44px)/1.1 var(--display);letter-spacing:-.02em;color:var(--blue);margin-bottom:48px}
.faq-grid{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:56px}
/* height:100% (not a fixed aspect-ratio) so it stretches to match
   .faq-list's natural height — grid's default align-items:stretch makes
   both columns the same row height already, this just lets the photo
   actually fill it instead of stopping short at its own aspect ratio */
.faq-photo{position:relative;height:100%;min-height:420px;overflow:hidden;border-radius:16px}
.faq-photo img{width:100%;height:100%;object-fit:cover;display:block}
.faq-list{border-top:1px solid rgba(4,23,40,.1)}
.faq-item{border-bottom:1px solid rgba(4,23,40,.1)}
.faq-question{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
  padding:26px 0;border:none;background:none;cursor:pointer;text-align:left;
}
.faq-question span:first-child{
  max-width:52ch;font:500 17px/1.4 var(--sans);color:var(--navy);
  transition:color .2s var(--ease);
}
.faq-question:hover span:first-child{color:var(--blue)}
.faq-icon{
  position:relative;flex:0 0 auto;margin-top:4px;width:16px;height:16px;color:rgba(4,23,40,.7);
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:currentColor;
}
.faq-icon::before{left:0;top:50%;width:16px;height:1px;transform:translateY(-50%)}
.faq-icon::after{left:50%;top:0;width:1px;height:16px;transform:translateX(-50%);transition:transform .3s var(--ease)}
.faq-item.is-open .faq-icon::after{transform:translateX(-50%) scaleY(0)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-answer p{max-width:72ch;font:400 15px/1.7 var(--sans);color:var(--slate);padding-bottom:32px}
.faq-item.is-open .faq-answer{max-height:400px}
@media (max-width:860px){
  .faq-grid{grid-template-columns:1fr}
  .faq-photo{display:none}
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  position:relative;overflow:hidden;
  background-image:url(../img/cta/sydney-skyline.jpg);
  background-size:cover;background-position:center;
  padding:clamp(80px,12vh,140px) clamp(20px,5vw,80px);text-align:center;
}
/* white frost over the photo — a plain semi-opaque white wash rather
   than backdrop-filter: blur() (backdrop-filter on this pseudo-element
   WOULD blur the photo behind it correctly, but the photo is sharp,
   recognisable Sydney skyline/Opera House — blurring it away entirely
   felt like a waste of a specific, chosen image; the wash still lifts
   the text to full legibility while leaving the photo readable). */
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:0;
  /* ramps from fully opaque (matching the FAQ section's white background
     right above) down to the section's normal .82 wash over the first
     ~160px, so the photo eases into view instead of starting flat right
     at the seam */
  background:linear-gradient(to bottom,
    #fff 0,
    rgba(255,255,255,.82) 160px,
    rgba(255,255,255,.82) 100%);
}
.cta-band-shell{position:relative;z-index:1;max-width:840px;margin:0 auto}
.cta-band-headline{font:500 clamp(28px,3.4vw,44px)/1.15 var(--display);letter-spacing:-.02em;color:var(--navy)}
/* one line on desktop (widened the shell above to fit it) — falls back
   to wrapping below the breakpoint so it doesn't overflow narrow screens */
.cta-band-body{margin:22px auto 0;max-width:none;white-space:nowrap;font:400 15px/1.7 var(--sans);color:var(--slate)}
.cta-band .depth-btn{margin-top:36px}
@media (max-width:900px){
  .cta-band-body{white-space:normal;max-width:56ch}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.footer-shell{max-width:1280px;margin:0 auto;padding:clamp(70px,10vh,120px) clamp(20px,5vw,80px) 0}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px}
.footer-kicker{font:500 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:26px}
.footer-kicker span{color:rgba(255,255,255,.4)}
.footer-headline{font:500 clamp(26px,2.8vw,38px)/1.3 var(--display);letter-spacing:-.02em;max-width:22ch}
.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.footer-columns h3{font:500 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:28px}
.footer-columns ul{display:flex;flex-direction:column;gap:18px}
/* line-height:1 (unset, so equal to font-size) made a two-line wrapped
   link's own lines sit tighter than the gap between separate list
   items — real leading fixes that internal cramping */
.footer-columns a{font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.65);transition:color .2s var(--ease)}
.footer-columns a:hover{color:#fff}
.footer-wordmark{position:relative;margin-top:60px;margin-bottom:-2%;height:clamp(110px,16vw,220px);width:100%}
.footer-wordmark img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.85}
@media (max-width:860px){
  .footer-main{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:520px){
  .footer-columns{grid-template-columns:1fr}
}

/* ============================================================
   BRANDS — scrolling logo marquee (between hero and Capabilities)
   ============================================================ */
.brands{
  position:relative;z-index:3;
  background:var(--paper);
  padding:clamp(36px,6vh,56px) 0 clamp(16px,2.5vh,28px);
}
.brands-label{
  text-align:center;
  font:500 15px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--blue);
  margin-bottom:clamp(24px,4vh,36px);
}
.brands-viewport{
  overflow:hidden;
  /* vertical padding so the hover scale-up has room to grow into instead
     of getting clipped top/bottom by this container's own overflow:hidden
     (which has to stay on — it's what makes the horizontal mask/loop work) */
  padding:10px 0;
  /* fade the logos out at both edges instead of a hard clip */
  -webkit-mask-image:linear-gradient(to right,transparent,black 64px,black calc(100% - 64px),transparent);
  mask-image:linear-gradient(to right,transparent,black 64px,black calc(100% - 64px),transparent);
}
/* translateX(-50%) is only an exact one-set jump if EACH set's own
   occupied width already includes its trailing gap — a `gap` on
   .brands-track instead only inserts space BETWEEN the two sets, not
   after the second one, so total track width was 2×setWidth + 1×gap
   and -50% landed at setWidth + half a gap: a half-gap-wide hitch once
   per loop. Giving each set its own margin-right (not the track a gap)
   makes every set's footprint identical — content + gap — so two of
   them is exactly double, and -50% is an exact, seamless single-set jump. */
/* translate3d + will-change force this onto its own GPU-composited layer
   for the whole animation, not just re-promoted right as it wraps — that
   promotion churn (not the math, which is exact — see above) is what
   read as a stutter right at the loop restart. */
.brands-track{
  display:flex;width:max-content;animation:brands-scroll 14s linear infinite;
  will-change:transform;backface-visibility:hidden;
}
.brands-set{
  display:flex;align-items:center;flex-shrink:0;
  list-style:none;gap:clamp(56px,7vw,96px);
  margin-right:clamp(56px,7vw,96px);
}
.brands-set li{display:flex;align-items:center;flex-shrink:0}
.brands-set img{
  height:32px;width:auto;max-width:160px;object-fit:contain;display:block;
  transition:transform .3s var(--ease);
}
/* the marquee keeps scrolling through all of this — only the hovered
   logo itself reacts, growing slightly and reverting the instant the
   cursor leaves (plain transition, no keyframe, so it's always
   symmetric in and out) */
.brands-set img:hover{transform:scale(1.18)}
/* text-only placeholders for brands that don't have a logo file yet —
   sized/weighted to sit at roughly the same visual height as the image
   logos (32px tall) so the row doesn't look uneven */
.brands-wordmark{
  font:700 22px/1 var(--sans);letter-spacing:-.01em;color:var(--navy);
  white-space:nowrap;transition:transform .3s var(--ease), color .3s var(--ease);
}
.brands-wordmark:hover{transform:scale(1.18);color:var(--blue)}
@media (max-width:768px){
  .brands-wordmark{font-size:17px}
}
@keyframes brands-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion: reduce){
  .brands-track{animation:none}
}
@media (max-width:768px){
  .brands-set img{height:24px;max-width:120px}
  .brands-track{animation-duration:9s}
  .brands-set{gap:clamp(36px,8vw,56px);margin-right:clamp(36px,8vw,56px)}
}

/* ---------- static / reduced-motion fallback ---------- */
body.static .hero{height:auto;min-height:0;padding:150px 0 90px;overflow:visible}
/* hero-inner normally stays position:absolute (it's what scales/blurs on
   scroll) — in static mode nothing drives that animation, so it never
   contributes to .hero's auto height and gets clipped by overflow:hidden.
   Switching it to a normal in-flow block lets its content (hero-copy) size
   .hero the way any other section would. */
body.static .hero-inner{position:relative;overflow:visible}
/* position:relative (not static) — z-index:2 has no effect on statically
   positioned elements, which let the absolutely-positioned .bg video layer
   (z-index:auto) paint over this copy once it dropped out of position:absolute. */
body.static .hero-copy{position:relative;padding:0 clamp(20px,5vw,80px) 40px}
body.static .eco-viewport{height:auto;overflow:visible}
body.static .eco-track{
  flex-wrap:wrap;justify-content:center;padding:150px clamp(20px,4.5vw,72px) 60px;
}
body.static .eco-card{flex:0 0 clamp(260px,28vw,360px);height:auto;min-height:420px}
body.static .eco-intro{flex:0 0 100%;text-align:center;padding:0 clamp(20px,4.5vw,72px) 40px}
body.static .eco-intro-sub{margin:0 auto}

/* ---------- small screens ---------- */
@media (max-width:768px){
  .hd{padding:14px 16px}
  .hd-logo{gap:8px}
  .hd-logo img{height:22px}
  .hd-logo .wm{font-size:15px}
  .btn-audit{padding:10px 16px;font-size:12px;gap:6px}
  .btn-audit span{white-space:nowrap}
  .headline{font-size:clamp(30px,9vw,48px)}
  .hd-nav{gap:20px}
  .hd-nav a{font-size:11px;letter-spacing:.08em}
  /* real mobile browsers resize the address bar, so 100svh (and therefore
     vertical centering) shifts under the fixed label — anchor from the top
     with a fixed clearance instead of relying on flex centering */
  .eco-viewport{align-items:flex-start;padding-top:150px}
  .eco-card{flex:0 0 82vw;height:min(60vh,520px)}
  .eco-track{padding-right:14vw}
}

@media (max-width:380px){
  .hd-logo .wm{display:none}
  .btn-audit span{font-size:11px}
}

/* ============================================================
   LIQUID GLASS BUTTON — depth by technique, not by color.
   Layers stacked on one element: base gradient (body), inset
   shadows (bevel/inner glow), ::before (light turning on over
   hover), ::after (specular sheen). Refracted via the SVG
   displacement filter #liquid-glass-filter in the document body.
   ============================================================ */
.depth-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 22px;
  border:none;border-radius:999px;
  font:500 15px/1 var(--sans);letter-spacing:.01em;
  cursor:pointer;isolation:isolate;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:filter .2s ease, box-shadow .2s ease, transform .3s var(--ease);
  will-change:transform;
}
.depth-label{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:10px;
}
.depth-label svg{transition:transform .3s var(--ease)}
.depth-btn:hover .depth-label svg{transform:translateX(3px)}
.depth-btn-lg{height:52px;padding:0 30px;font-size:16px}

/* .depth-glass is also used standalone on .eco-card (not paired with
   .depth-btn there — a card isn't a button), so this base positioning
   has to be reachable by .depth-glass directly too, not just through
   .depth-btn. Without it the glass ::before/::after sheen layers have
   no `content`, and a pseudo-element with no content never renders. */
.depth-btn::before,
.depth-btn::after,
.depth-glass::before,
.depth-glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  pointer-events:none;
}

/* ---------- glass material ---------- */
.depth-glass{
  /* blue, not white — white on the frosted-but-thin glass tint read as
     low-contrast/hard to spot at a glance; blue holds up over both the
     busy hero video and a plain white panel (the audit form's submit
     button reuses this same class). */
  color:var(--blue);text-shadow:0 1px 2px rgba(255,255,255,.4), 0 1px 6px rgba(0,0,0,.15);
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.12) 100%);
  -webkit-backdrop-filter:blur(2px) saturate(1.5) brightness(1.05);
  backdrop-filter:blur(2px) saturate(1.5) brightness(1.05);
  box-shadow:
    0 8px 32px rgba(31,38,135,.15),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 4px 24px rgba(0,0,0,.06),
    inset 0 1px 1px rgba(255,255,255,.4);
}
@supports (backdrop-filter:url(#liquid-glass-filter)) or (-webkit-backdrop-filter:url(#liquid-glass-filter)){
  .depth-glass{
    -webkit-backdrop-filter:url(#liquid-glass-filter) saturate(1.5) brightness(1.05);
    backdrop-filter:url(#liquid-glass-filter) saturate(1.5) brightness(1.05);
  }
}
.depth-glass::before{
  opacity:1;padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 45%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.depth-glass::after{
  opacity:.8;inset:2px;border-radius:inherit;
  background:
    linear-gradient(to right, transparent 10%, rgba(255,255,255,.6) 50%, transparent 90%) top / 100% 1px no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.3) 0%, transparent 50%, rgba(255,255,255,.05) 100%);
}
.depth-glass:hover{
  box-shadow:
    0 12px 40px rgba(31,38,135,.2),
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 6px 30px rgba(0,0,0,.08),
    inset 0 2px 2px rgba(255,255,255,.5);
}