/* =============================================
   Fluid Typography
   ============================================= */
@media screen and (max-width: 90rem) and (min-width: 62rem) {
  html { font-size: calc(-0.00222717149220486rem + 1.1135857461024499vw); }
}
@media screen and (max-width: 61.9375rem) and (min-width: 48rem) {
  html { font-size: calc(0.0045758928571431046rem + 1.6071428571428568vw); }
}
@media screen and (max-width: 47.9375rem) and (min-width: 30rem) {
  html { font-size: calc(0.0013020833333332593rem + 2.0833333333333335vw); }
}
@media screen and (max-width: 29.9375rem) {
  html { font-size: calc(-0.0023470188284518824rem + 3.755230125523012vw); }
}

body {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   Reset & Base
   ============================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
picture { display: contents; }

:root {
  --bg:          #15121b;
  --purple:      #8758f2;
  --purple-glow: rgba(135,88,242,0.6);
  --purple-mid:  #b89bff;
  --lavender:    #e9ddff;
  --lav-btn:     #d0bcff;
  --lav-card:    #e9e0ff;
  --deep:        #23005c;
  --white:       #ffffff;
  --muted:       rgba(255,255,255,0.8);
  --faded:       rgba(255,255,255,0.5);

  --f-display: 'Instrument Sans', sans-serif;
  --f-serif:   'Instrument Serif', serif;
  --f-body:    'Inter', sans-serif;

  /* layout */
  --max-w: 81rem;      /* 1296px */
  --px:    4.5rem;     /* 72px  */
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--f-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* =============================================
   Shared helpers
   ============================================= */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}
.container.narrow { max-width: 47.5rem; } /* 760px */

.sec-hdr { text-align: center; margin-bottom: 3.5rem; }

.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.diamond {
  width: 0.55rem; height: 0.5rem;
  background: var(--purple-mid);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: inline-block; flex-shrink: 0;
}
.diamond-sm {
  width: 0.42rem; height: 0.375rem;
  background: var(--purple-mid);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: inline-block; flex-shrink: 0;
}
.sec-hdr h2 {
  font-family: var(--f-display);
  font-size: 3rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.094rem;
  color: var(--white); margin-bottom: 0.75rem;
}
.sec-hdr p {
  font-size: 1rem; color: var(--muted);
  max-width: 42.5rem; margin: 0 auto; line-height: 1.5rem;
}
.black { color: #000 !important; }
.faded { color: var(--faded); }

/* =============================================
   Navigation
   ============================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 2.25rem var(--px);
}
/* One container — transparent + full-width at top, centered pill on scroll */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding-left: 1.25rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid transparent;
  background: transparent;
  box-shadow: 0 0.25rem 0.25rem rgba(135,88,242,0);
  transition: background 0.45s ease,
              border-color 0.45s ease,
              box-shadow 0.45s ease,
              width 0.5s cubic-bezier(0.4,0,0.2,1),
              margin-left 0.5s cubic-bezier(0.4,0,0.2,1);
}
.nav-scrolled .nav-inner {
  width: fit-content;
  margin: 0 auto;
  background: rgba(0,0,0,0.2);
  border-color: var(--lavender);
  backdrop-filter: blur(0.375rem);
  box-shadow: 0 0.25rem 0.25rem rgba(135,88,242,0.1);
}
/* Recalculating a backdrop blur every frame while width/margin-left are animating
   (layout-triggering, not compositor-only) is what causes the pill to flicker —
   so drop the blur just for the animated phase and restore it once settled. */
.nav-inner.nav-animating { backdrop-filter: none; }
.nav-brand-logo {
  height: 2.5rem; width: auto;
  display: block; flex-shrink: 0;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 0.5rem;
}
.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.nav-links a {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.125rem;
  width: 100%; height: 0.09375rem;
  background: var(--purple-mid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:hover { color: #ffffff !important; }
.nav-links a:hover::after { transform: scaleX(1); }
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lav-btn);
  color: #000;
  font-family: var(--f-body);
  font-size: 1rem; font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-nav:hover { opacity: 0.85; }
button.btn-nav { border: none; cursor: pointer; font: inherit; }

/* Hamburger — three lines that morph into an X */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 1.375rem; height: 0.125rem;
  background: var(--white);
  border-radius: 0.125rem;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}
.nav-open .nav-burger span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* Mobile menu drawer */
.nav-mobile-menu {
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  background: rgba(21,18,27,0.97);
  backdrop-filter: blur(0.5rem);
  border-bottom: 0.0625rem solid rgba(233,221,255,0.12);
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nav-mobile-menu a {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 0.875rem 1.25rem;
  border-top: 0.0625rem solid rgba(233,221,255,0.1);
}
.nav-mobile-menu a:hover { color: var(--white); }
.nav-mobile-cta {
  margin: 1rem 1.25rem 1.25rem;
  border-top: none !important;
}
.nav-mobile-menu a.nav-mobile-cta { color: #000; }

/* =============================================
   Hero
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem var(--px) 0;
  overflow: hidden;
}
.hero .hero-pattern {
  background-image: url('images/hero-tentacle.png');
  background-image: image-set(url('images/hero-tentacle.avif') type('image/avif'), url('images/hero-tentacle.png') type('image/png'));
  background-size: cover;
  transform: none;
  opacity: 0.07;
}
.hero-pattern {
  position: absolute; inset: 0;
  background-image: url('images/hex-pattern.png');
  background-image: image-set(url('images/hex-pattern.avif') type('image/avif'), url('images/hex-pattern.png') type('image/png'));
  background-size: 142% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.04;
  transform: scaleY(-1) rotate(180deg);
  pointer-events: none;
}
.hero-content {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 75rem;
  width: 100%;
}
.hero-tag {
  font-size: 0.75rem;
  color: var(--lavender);
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  overflow: hidden;
  display: inline-block;
}
@keyframes tagOutF {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(-110%); opacity: 0; }
}
@keyframes tagInF {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes tagOutS {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(-110%); opacity: 0; }
}
@keyframes tagInS {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.hero-tag.tag-out-f { animation: tagOutF 0.055s ease        forwards; }
.hero-tag.tag-in-f  { animation: tagInF  0.055s ease        forwards; }
.hero-tag.tag-out-s { animation: tagOutS 0.18s  ease-in     forwards; }
.hero-tag.tag-in-s  { animation: tagInS  0.32s  cubic-bezier(0.34,1.4,0.64,1) forwards; }
.hero-h1 {
  font-family: var(--f-display);
  font-size: 4rem; font-weight: 400;
  line-height: 4.375rem; letter-spacing: -0.156rem;
  color: var(--white);
  max-width: 68.75rem;
  margin-bottom: 2rem;
}
.hero-h1 em {
  font-family: var(--f-serif);
  font-style: italic; font-weight: 400;
}
.hero-underline {
  position: relative;
  display: inline-block;
}
.hero-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.125rem;
  width: 100%;
  height: 0.1875rem;
  background: linear-gradient(to right, rgba(184,155,255,0), #b89bff);
  border-radius: 0 6.25rem 6.25rem 0;
  pointer-events: none;
}
.hero-sub {
  font-size: 1rem; color: var(--white);
  max-width: 43rem; text-align: center;
  margin-bottom: 3rem; line-height: 1.5rem;
}

/* CTA button */
.btn-cta-outer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 5rem;
  text-decoration: none;
  cursor: pointer;
}
.btn-cta-outer--inset { margin-bottom: 0; }

.btn-cta-main-wrap {
  position: relative;
  display: inline-flex;
  /* The left polygon wing sticks out past this box via position:absolute,
     so it's invisible to flex centering — nudge the wrap right by half
     the wing's width so the whole shape (wing included) lands centered. */
  margin-left: 1.5rem;
}

.btn-cta-poly {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.btn-cta-poly--left {
  left: -1.1rem;
  width: 1.1rem;
  background: var(--lav-btn);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
.btn-cta-poly--right {
  right: -0.0125rem;
  width: 1.1rem;
  background: var(--bg);
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  z-index: 2;
}
.btn-cta-poly--left-lav  { background: var(--lav-card); }
.btn-cta-poly--right-lav { background: var(--lav-card); }
.btn-cta-poly svg { width: 100%; height: 100%; display: block; }

/* CTA wing outline: a single black "V" band traced as one clip-path
   polygon, instead of stacking a border shape + an opaque fill shape.
   The outer points (0% 50%, 100% 0%, 100% 100%) are the button's own
   corners and never move, so the ends stay pinned to the exact same
   seam as the pill's CSS border. The path cuts inward right at that
   seam (the short vertical hops at x:100%) and back out to a sharp
   inner apex, leaving the right/base side fully open and the middle
   genuinely transparent (nothing is painted there) rather than an
   opaque color standing in for it. */
/* Both wings reuse the hex badge's own tip/corner coordinates (just the
   two diagonal lines, no flat top/bottom edge — see the path in
   index.html) — same proven border/stroke setup as the hex, so they're
   guaranteed to line up rather than needing a hand-tuned shape.
   Neutralize the base filled-triangle look so only the SVG shows. Each
   SVG is rendered at its natural, undistorted 77:66 aspect ratio
   (matching the real hex badge's proportions) instead of squeezing the
   viewBox into the wing's narrow container (that distortion made the
   tip angle look soft/blunted). Both wings show the identical left-tip
   crop; the right one is just the left wing's wrapper mirrored via its
   own position (see index.html/right path variant). */
.cta-main-btn .btn-cta-poly--left,
.cta-main-btn .btn-cta-poly--right {
  background: transparent;
  clip-path: none;
  overflow: hidden;
  width: 2rem;
}
.cta-main-btn .btn-cta-poly--left { left: -1.5rem; }
.cta-main-btn .btn-cta-poly--right { right: -0.45rem; scale: 0.95; }
.cta-main-btn .btn-cta-poly--left svg,
.cta-main-btn .btn-cta-poly--right svg {
  position: absolute;
  left: 0;
  /* The hex path's real top/bottom points sit at y=2.001/64.68 within its
     own 0-66 viewBox, not exactly at 0/66 — stretch slightly so those
     points land exactly on this wrapper's edges (matching the pill's
     border position) instead of a few percent short of it. */
  top: -3.19%;
  height: 105.29%;
  width: auto;
  aspect-ratio: 77 / 66;
}
/* CTA section main button: lavender fill with a black outline (border,
   hexagon stroke, arrow, wings) instead of the default purple accent.
   The wings paint their own black ring shape directly (see .cta-wing
   above); this wrapper just needs to stay transparent so nothing shows
   through behind them. */
.cta-main-btn .btn-cta-main-wrap {
  background: transparent;
}
/* Text sits 18px left of the pill's true center (asymmetric padding,
   not margin — margin would drag the whole bordered box left with it,
   past the wing's tip). Padding-left/right offset by the same 18px in
   opposite directions so the pill's total width — and its alignment
   with the wing/hex either side — doesn't change. */
.cta-main-btn .btn-cta {
  padding-left: calc(3rem - 18px);
  padding-right: calc(3rem + 18px);
  background: rgba(233, 222, 255, 0);
  border-top: 0.25rem solid #000;
  border-bottom: 0.25rem solid #000;
}
/* The hex-arrow badge is a fixed height (var(--f-...) unaffected), so it
   has to be set explicitly to match the text pill's actual rendered
   height (padding + border + line box) at each size, or the two visibly
   don't line up. Width keeps the same ~1.95:1 ratio as the original hex
   so the arrow circle still reads as round once the SVG letterboxes in. */
.cta-main-btn .btn-cta-hex { width: 8.98rem; height: 4.6rem; margin-left: -2.375rem; }

.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lav-btn);
  color: #000;
  font-family: var(--f-body);
  font-size: 1rem; font-weight: 600;
  padding: 1.25rem calc(3rem + 1rem) 1.25rem calc(3rem - 1rem);
  border-radius: 0;
  text-decoration: none;
  border: none;
  transition: opacity 0.2s;
  white-space: nowrap;
  z-index: 1;
}
.dark-cta-btn { background: var(--lav-card); color: #000; }

.btn-cta-hex {
  width: 8rem;
  height: 4.1rem;
  flex-shrink: 0;
  margin-left: -2.125rem;
  z-index: 5;
  position: relative;
  overflow: hidden;
}
.btn-cta-hex svg { width: 100%; height: 100%; display: block; }
.btn-cta-hex-fill {
  fill: var(--purple);
  width: 0;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The fill rect is drawn before the border path in the SVG now (see
   index.html), with the border's own fill set to transparent, so the
   border stroke always paints on top of the fill and masks any of it
   that would otherwise cross the border — no inset math needed. */
.btn-cta-outer:hover .btn-cta-hex-fill { width: 100%; }
/* Hero hex hover-fill: lavender instead of the default purple accent,
   chosen from the 30-color comparison. Scoped off the CTA-section
   button, which keeps its own black-outline look. */
.main-btn:not(.cta-main-btn) .btn-cta-hex-fill { fill: var(--lav-btn); fill-opacity: 0.7; }
.cta-main-btn .btn-cta-hex-fill { fill: #000; fill-opacity: 0.05; }
.btn-cta-hex-arrow { filter: drop-shadow(0 0.0625rem 0.0625rem rgba(0,0,0,0.7)); }



/* =============================================
   Trusted-by carousel
   ============================================= */
.trusted {
  position: relative;
  text-align: center;
  padding: 5rem 0 5rem;
  width: 100%;
}
.trusted-label {
  font-size: 1rem; color: var(--white);
  margin-bottom: 1.5rem;
}
.carousel {
  overflow: hidden;
  width: 60%;
  margin: 0 auto;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.carousel-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: scroll-logos 55s linear infinite;
}
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.carousel-logo {
  height: 2.25rem; width: auto; max-width: 9.5rem; object-fit: contain; flex-shrink: 0;
  filter: grayscale(100%) brightness(1.5);
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
/* logos whose source art is dark/black (drawn for light backgrounds) need inverting to read on our dark bg */
.carousel-logo--invert { filter: grayscale(100%) invert(1) brightness(1.3); }
.carousel-logo:hover { opacity: 1; }

/* Per-logo tweaks — source art varies too much in contrast/scale for one
   shared treatment to read evenly across all of them. */
.carousel-logo[alt="Proal"] { filter: grayscale(100%) brightness(1.9); }
.carousel-logo[alt="Jovana"] { height: 3.5rem; max-width: 12.5rem; }
.carousel-logo[alt="Edenhauser"] { height: 4rem; max-width: 14rem; }
.carousel-logo[alt="Ready Set Startup"] { height: 5rem; max-width: 17rem; }
.carousel-logo[alt="Qazverse"] { height: 2.75rem; max-width: 10.5rem; }
.carousel-logo[alt="Webtonic"] { height: 1.75rem; max-width: 8rem; }

/* =============================================
   Outcomes — Figma staggered layout
   ============================================= */
.outcomes { padding: 6.25rem 0; }

/* Outcomes header inherits the outcomes container width */
.outcomes > .container { max-width: 61.5rem; } /* 984px */

.outcomes-body {
  position: relative;
  max-width: 61.5rem; /* 984px */
  margin: 0 auto;
  padding: 0 var(--px);
  display: grid;
  grid-template-columns: 23.125rem 23.125rem; /* 370px each */
  justify-content: space-between;
}

.o-col {
  display: flex;
  flex-direction: column;
  gap: 15.625rem; /* 250px between cards – same as Figma */
  position: relative;
  z-index: 1;
}
.o-col-right { padding-top: 14.625rem; } /* 234px stagger down */

.o-card {
  position: relative;
  border-radius: 0.75rem;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.o-trace {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.o-trace path { fill: none; stroke-width: 0.25rem; }
.o-trace-base { stroke: var(--white); }
.o-trace-draw { stroke: var(--purple); filter: drop-shadow(0 0 0.75rem var(--purple-glow)); }

.o-icon {
  width: 3rem; height: 3rem;
  border-radius: 62.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 1rem;
}
.o-icon.purple { background: var(--purple); }
.o-icon.deep   { background: var(--deep); }
.o-icon img { width: 1.25rem; height: 1.25rem; object-fit: contain; }

.o-card h3 {
  font-family: var(--f-display);
  font-size: 1.25rem; font-weight: 500;
  line-height: 1.75rem; color: var(--white);
}
.o-card p { font-size: 1rem; color: var(--white); line-height: 1.25rem; }

/* Connecting lines (fully built + positioned by JS). Lines are always fully
   drawn (no length reveal) — the white bar is the static base, and the
   purple .o-line-fill overlay reveals over it via a scroll-scrubbed scale,
   same "white base + colored draw" language as the card borders (.o-trace) */
.o-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.o-line {
  position: absolute;
  background: var(--white);
}
.o-line-fill {
  position: absolute;
  inset: 0;
  background: var(--purple);
  box-shadow: 0 0 2rem 0 var(--purple-glow);
}
.o-line-h { height: 0.25rem; }
.o-line-v { width: 0.25rem; }
.o-line-h .o-line-fill { transform: scaleX(0); }
.o-line-v .o-line-fill { transform: scaleY(0); }

/* =============================================
   Services
   ============================================= */
.services { padding: 6.25rem 0; }

.srv-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  width: fit-content;
  margin: 0 auto;
}

.srv-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;         /* 10px between cards */
  width: 26rem;          /* 416px */
  flex-shrink: 0;
}

.srv-card {
  border: 0.0625rem solid var(--lavender);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.38s ease-in-out, border-color 0.38s ease-in-out;
}

.srv-card.active {
  background: var(--lav-card);
  border-color: var(--lav-card);
}

.srv-card-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.srv-card h3 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
  color: var(--white);
  transition: color 0.38s ease-in-out;
}
.srv-card.active h3 { color: #000; }

/* Description slides open/close with ease-in-out so both animate at the same rate */
.srv-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  font-size: 1rem;
  color: #000;
  line-height: 1.25rem;
  transition: max-height 0.38s ease-in-out, opacity 0.28s ease-in-out, margin-top 0.38s ease-in-out;
}
.srv-card.active .srv-desc {
  max-height: var(--srv-desc-h, 12rem); /* exact height set by JS */
  opacity: 1;
  margin-top: 1.5rem;
}

.srv-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--lav-card);
  transition: background 0.38s ease-in-out;
}
.srv-card.active .srv-icon { background: var(--purple); }
.srv-icon img {
  width: 1.25rem; height: 1.25rem; display: block;
  transition: filter 0.38s ease-in-out;
}
.srv-card.active .srv-icon img { filter: brightness(0) invert(1); }

.srv-img {
  position: relative;
  width: 26rem;
  flex-shrink: 0;
  border-radius: 1rem;
  overflow: hidden;
}
.srv-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  max-width: none;
  display: block;
  transition: opacity 0.25s ease-in-out;
}

/* =============================================
   Why Octo
   ============================================= */
.why { padding: 6.25rem 0 0; }
.why .container { margin-bottom: 3rem; }

/* 3D rotating carousel scene */
.why-scene {
  position: relative;
  height: 32rem;
  overflow: hidden;
  perspective: 1400px;
  /* anchor perspective at top so scaling only pushes cards down, never above the scene */
  perspective-origin: 50% 0%;
}
#whyRing {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
}

.why-card {
  border-radius: 0.75rem; padding: 2.0625rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.wc-card {
  position: absolute;
  width: 22rem;
  left: calc(50% - 11rem);
  top: 0;
  background: rgba(233,221,255,0.06);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.25);
  border: 0.0625rem solid rgba(233,221,255,0.4);
  opacity: 0.35;
  filter: blur(0.1875rem);
  transition: opacity 0.35s ease-in-out, border-color 0.35s ease-in-out, filter 0.35s ease-in-out;
  will-change: transform, opacity, filter;
  user-select: none;
  -webkit-user-select: none;
}
.wc-card.wc-active { opacity: 1; border-color: var(--purple); filter: blur(0); }

.why-num {
  width: 3rem; height: 3rem; border-radius: 62.5rem;
  background: var(--purple); display: flex; align-items: center;
  justify-content: center; margin-bottom: 1rem; flex-shrink: 0;
}
.why-num span { font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; color: var(--white); }
.why-card h3 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 500; line-height: 1.75rem; color: var(--white); margin-bottom: 0.25rem; }
.why-card p  { font-size: 1rem; color: var(--white); line-height: 1.25rem; }

/* =============================================
   Strategy
   ============================================= */
/* Strategy — 400 vh scroll-scrubbed section */
.strategy { position: relative; height: 400vh; }
.strategy-sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 9rem 0;
}
.strategy-inner {
  max-width: calc(var(--max-w) + 9rem);
  margin: 0 auto; padding: 0 var(--px);
  display: flex; align-items: center; gap: 3.75rem;
  width: 100%;
}
.strategy-text { flex: 1; max-width: 33.875rem; }
.strategy-text h2 {
  font-family: var(--f-display);
  font-size: 3rem; font-weight: 500;
  line-height: 3.6875rem; letter-spacing: -0.094rem;
  color: rgb(72, 72, 88); /* starts dim gray, JS animates to white */
}

.strategy-laptop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.strategy-laptop video {
  width: 100%;
  display: block;
  border-radius: 0.75rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  pointer-events: none;
}



/* =============================================
   Featured Work
   ============================================= */
.work { padding: 6.25rem 0; }
.work > .container { max-width: calc(var(--max-w) + 9rem); } /* content area = 1296px */
.work-row { display: flex; gap: 3.75rem; align-items: flex-start; justify-content: space-between; }
.work-info { width: 31.375rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 2rem; }
.work-info > .btn-nav { align-self: flex-start; }
.work-logo { display: flex; align-items: center; gap: 0.375rem; text-decoration: none; }
.logo-crop { height: 2.9375rem; width: 4rem; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; }
.logo-crop img { max-height: 100%; max-width: 100%; width: auto; height: auto; display: block; object-fit: contain; }
.work-logo span { font-family: 'Nunito Sans', sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--white); }
.work-desc { font-size: 1rem; color: var(--white); line-height: 1.5rem; font-weight: 300; }
.work-meta { display: flex; flex-direction: column; }
.meta-row { display: grid; grid-template-columns: 1fr 1fr; }
.meta-col { padding: 0.75rem 1.5rem 0.75rem 0; display: flex; flex-direction: column; gap: 0.625rem; }
.meta-col:nth-child(2) { padding-left: 1.5rem; padding-right: 0; }
.meta-lbl {
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 500;
  color: rgba(255,255,255,0.8); letter-spacing: -0.031rem;
  display: flex; align-items: center; gap: 0.25rem;
}
.meta-val { font-size: 1.25rem; color: var(--white); letter-spacing: -0.0625rem; line-height: 1.3; }
.work-arrows { display: flex; gap: 0.75rem; }
.arr-btn { width: 2.561rem; height: 2.561rem; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.arr-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(233,221,255,0.08);
  /* regular hexagon inscribed in a square box (width:height ratio for the shape itself is 2:sqrt(3), so it's inset 6.7% top/bottom to stay proportional) */
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  transition: background 0.2s ease;
}
.arr-btn:hover::before { background: var(--purple-mid); }
.arr-btn.arr-disabled::before { background: rgba(233,221,255,0.04); }
.arr-btn.arr-disabled { cursor: default; }
.arr-icon {
  width: 1.5rem; height: 1.5rem; object-fit: contain; position: relative;
  color: var(--white);
  transition: color 0.2s ease;
}
.arr-btn:hover .arr-icon { color: #000; }
.arr-btn.arr-disabled .arr-icon { color: rgba(255,255,255,0.25); }
.arr-flip { transform: scaleX(-1); }

.work-mockup { flex: 1; display: flex; flex-direction: column; }
.mac-win {
  background: rgba(255,255,255,0.06);
  border: 0.0625rem solid #393939; border-radius: 0.5rem; overflow: hidden;
  box-shadow: 0 0 0 0.0625rem rgba(0,0,0,0.05), 0 1.5625rem 3.125rem -0.75rem rgba(0,0,0,0.25);
  position: relative;
  display: flex; flex-direction: column;
}
.mac-bar { background: #08080a; border-bottom: 0.0625rem solid #1a1a1a; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.mac-dots { display: flex; gap: 0.375rem; align-items: center; }
.dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; }
.dot.r { background: #f87171; }
.dot.y { background: #fbbf24; }
.dot.g { background: #34d399; }
.mac-addr {
  flex: 1; background: #1a1a1a; border: 0.0625rem solid #393939; border-radius: 0.125rem;
  padding: 0.3125rem; text-align: center; font-size: 0.625rem; font-weight: 500;
  color: var(--white); max-width: 14.4375rem; margin: 0 auto; letter-spacing: -0.016rem;
}
.mac-addr a { color: inherit; text-decoration: none; }
.mac-screen { overflow: hidden; }
.mac-screen img { width: 100%; height: auto; display: block; }
.work-tags {
  position: absolute; bottom: 0.25rem; left: 0.25rem; right: 0.25rem;
  display: flex; gap: 0.625rem; flex-wrap: wrap;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(0.25rem);
  border-radius: 0.25rem; padding: 0.75rem 1rem; justify-content: center;
}
.work-tags span {
  border: 0.0625rem solid var(--white); border-radius: 62.5rem;
  padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 500;
  color: var(--white); letter-spacing: -0.031rem; white-space: nowrap;
}

/* =============================================
   Team
   ============================================= */
.team { padding: 6.25rem 0; }
.team-inner {
  max-width: calc(var(--max-w) + 9rem);
  margin: 0 auto; padding: 0 var(--px);
  display: flex; gap: 3.75rem; align-items: flex-start;
}
.team-text { width: 25.5625rem; flex-shrink: 0; padding-top: 12.5rem; }
.team-text h2 {
  font-family: var(--f-display); font-size: 3rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.094rem; color: var(--white);
  margin: 0.5rem 0 1rem;
}
.team-text > p { font-size: 1rem; color: var(--muted); line-height: 1.5rem; }
.team-cards { flex: 1; display: flex; gap: 1rem; }
.team-card {
  flex: 0 0 17.9375rem; /* 287px */
  border-radius: 1rem; overflow: hidden; position: relative;
  height: 32.0625rem;
  cursor: pointer;
  transition: flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card.tc-active { flex-basis: 27.875rem; /* 446px */ cursor: default; }
.tc-photo { position: absolute; inset: 0; }
.tc-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter 0.45s ease;
}
.team-card:not(.tc-active) .tc-photo img { filter: brightness(0.55); }
.lav-card { background: var(--lav-card); }
.tc-info {
  /* Fixed to the expanded card's own width (not left+right:0) so the text
     never reflows mid-transition — the card's own overflow:hidden clips
     the excess while collapsed, instead of the box narrowing in real time
     and stacking the rewrapped lines on top of each other. */
  position: absolute; bottom: 0; left: 0;
  width: 27.875rem;
  padding: 1.25rem 1.5rem;
  opacity: 0; transform: translateY(0.35rem) scale(0.98);
  transform-origin: bottom left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tc-active .tc-info {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 0.4s ease 0.45s, transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.45s;
}
.lav-info    { background: var(--lav-card); }
.dark-info-tc { background: var(--lav-card); }
.tc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; }
.dark-name  { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: #000; }
.white-name { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: var(--white); }
.tc-role { font-size: 0.75rem; margin-top: 0.125rem; }
.dark-role  { color: rgba(0,0,0,0.7); }
.light-role { color: rgba(255,255,255,0.7); }
.tc-bio { font-size: 1rem; line-height: 1.25rem; }
.dark-bio  { color: #000; }
.white-bio { color: var(--white); }
.tc-li img { width: 1.625rem; height: 1.625rem; }

/* =============================================
   FAQ
   ============================================= */
.faq { padding: 6.25rem 0; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 0.0625rem solid var(--lavender); }
.faq-q {
  width: 100%; background: transparent; border: none;
  padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; color: var(--white);
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 500;
  line-height: 1; letter-spacing: -0.011rem; text-align: left; gap: 1rem;
  transition: color 0.25s ease;
}
.faq-plus { font-size: 2rem; font-weight: 300; color: var(--purple-mid); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; line-height: 1; }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-q:hover { color: var(--purple-mid); }
.faq-item.open .faq-q { color: var(--purple-mid); }
.faq-a {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.faq-a-inner { padding: 0 0 1.5rem; }
.faq-a p { font-size: 1rem; color: var(--muted); line-height: 1.5rem; }

/* =============================================
   CTA Section
   ============================================= */
.cta-sec { padding: 2.5rem var(--px) 5rem; }
.cta-box {
  max-width: var(--max-w); margin: 0 auto;
  background: var(--lav-card); border-radius: 1.5rem;
  padding: 4rem 4.5rem; text-align: center;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.cta-pattern {
  position: absolute; inset: 0;
  background-image: url('images/hex-pattern.png');
  background-image: image-set(url('images/hex-pattern.avif') type('image/avif'), url('images/hex-pattern.png') type('image/png'));
  background-size: 142% auto; background-position: center; background-repeat: no-repeat;
  opacity: 0.12; transform: scaleY(-1); pointer-events: none;
}
.cta-box h2 {
  position: relative; font-family: var(--f-display);
  font-size: 4rem; font-weight: 400; line-height: 4.375rem;
  letter-spacing: -0.156rem; color: #000; max-width: 41.75rem;
}
.cta-box h2 em { font-family: var(--f-serif); font-style: italic; }
.cta-box > p {
  position: relative; font-size: 1rem; color: rgba(0,0,0,0.8);
  max-width: 40.75rem; line-height: 1.5rem;
}
.cta-box .cta-main-btn { margin-top: 2.5rem; }

/* =============================================
   Footer
   ============================================= */
.footer { background: var(--bg); padding: 2.5rem 0 0; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px);
  display: flex; flex-direction: column; gap: 2rem;
}
.footer-top { display: flex; align-items: center; justify-content: space-between; }
.footer-logo { height: 2.5rem; width: auto; display: block; }
.footer-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-nav a {
  font-size: 1rem;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}
.footer-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.125rem;
  width: 100%; height: 0.09375rem;
  background: var(--purple-mid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.footer-nav a:hover { color: #ffffff; }
.footer-nav a:hover::after { transform: scaleX(1); }
.footer-line {
  height: 0.0625rem;
  background: ease-in-out-gradient(to right, rgba(233,221,255,0.2), rgba(233,221,255,0.5) 50%, rgba(233,221,255,0.2));
}
.footer-bottom { display: flex; align-items: center; justify-content: space-between; }
.footer-bottom > p { font-size: 0.75rem; color: var(--white); }
.footer-social { display: flex; align-items: center; gap: 0.75rem; }
.footer-social span { font-size: 0.75rem; color: var(--white); }
.footer-li {
  width: 1.25rem; height: 1.25rem; border-radius: 0.1875rem;
  background: var(--lavender);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity 0.2s;
}
.footer-li:hover { opacity: 0.85; }
/* Giant full-bleed wordmark, cropped and faded toward the bottom edge —
   same treatment as the reference design's oversized logo strip. On
   mobile the text is stretched (via JS scaleX, see script.js) to touch
   the exact right edge, since a fixed vw-based font-size can't
   guarantee an exact fit there; desktop/tablet just center it. */
.footer-logo-strip {
  width: 100%;
  height: 11vw;
  margin-top: -2rem;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}
.footer-logo-strip-text {
  flex: none;
  transform-origin: left top;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 900;
  font-size: 20vw;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* Two stacked gradients, both clipped to the glyph shapes: a dark
     shadow rising from the bottom (listed first, so it paints on top),
     over the purple fill fading toward the crop edge underneath. A
     plain text-shadow can't do this — it just blurs/smears through the
     transparent parts of the letters instead of a clean bottom fade. */
  background:
    linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(to bottom, var(--purple) 0%, rgba(21,18,27,0) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 68.75rem) {
  :root { --px: 2.5rem; }
  .carousel { width: 100%; }
  .srv-row {
  flex-direction: column;
  max-width: 37.5rem;
}
  .srv-list { width: 100%; }
  .srv-img { width: 100%; min-height: 31.25rem; }
  /* The 3D perspective (translateZ pulling the card toward the camera) inflates
     the rendered size by perspective/(perspective-R) = 1400/(1400-340) ≈ 1.32x,
     so the base width must be pre-shrunk to land at ~65vw once rendered */
  .wc-card { width: 49.22vw; left: 25.39vw; }
  .strategy-inner { flex-direction: column; }
  .work-row { flex-direction: column; }
  .work-info { width: 100%; }
  .team-inner { flex-direction: column; align-items: center; text-align: center; }
  .team-text { width: 100%; padding-top: 0; }
  .tc-info { text-align: left; }
  .team-cards { flex-direction: column; width: 100%; }
  .team-card { width: 100%; max-width: 26.25rem; margin: 0 auto; } /* stacking flips flex-basis onto height; without explicit widths here, .team-inner's align-items:center makes both shrink-wrap to 0 since the photo/info children are absolutely positioned */
  /* Cards stack full-width here instead of animating width, so the
     reflow issue the fixed tc-info width solves on desktop doesn't apply
     — revert to auto width so text isn't clipped on a narrow screen. */
  .tc-info { left: 0; right: 0; width: auto; }
  .cta-box h2 { font-size: 3rem; line-height: 3.375rem; }
  .btn-cta-poly--left { left: -0.875rem; width: 0.875rem; }
  .btn-cta-poly--right { width: 0.875rem; }
  .btn-cta-main-wrap { margin-left: 0.875rem; }
  .cta-main-btn .btn-cta {
    padding-top: 1rem; padding-bottom: 1rem;
    padding-left: calc(2rem - 18px); padding-right: calc(2rem + 18px);
    font-size: 0.9375rem;
  }
  .cta-main-btn .btn-cta-hex {
  width: 6.9375rem;
  height: 3.5625rem;
  margin-left: -1.8125rem;
}
  /* The .btn-cta-poly--left/right and .btn-cta-main-wrap rules above are
     tuned for the default hero-style wing (clip-path triangle) and aren't
     scoped away from .cta-main-btn, which uses its own SVG-based wing
     (see the block starting ".cta-main-btn .btn-cta-poly--left" further
     up) — so those values were leaking through and desyncing the wing
     tips from the pill. Override with values scaled by the same ratio
     already used for .cta-main-btn .btn-cta-hex above (~0.773x desktop). */
  .cta-main-btn .btn-cta-main-wrap { margin-left: 1.16rem; }
  .cta-main-btn .btn-cta-poly--left { left: -1.16rem; }
  .cta-main-btn .btn-cta-poly--right { right: -0.35rem; }
  .cta-main-btn .btn-cta-poly--left,
  .cta-main-btn .btn-cta-poly--right { width: 1.55rem; }
  .main-btn:not(.cta-main-btn) .btn-cta {
    padding: 1rem calc(2.25rem + 1rem) 1rem calc(2.25rem - 1rem);
    font-size: 0.9375rem;
  }
  .main-btn:not(.cta-main-btn) .btn-cta-hex {
    width: 6.2rem;
    height: 3.18rem;
    margin-left: -1.625rem;
  }
}
@media (max-width: 48rem) {
  /* Full-width, edge-to-edge bar with a hamburger — replaces the
     floating/pill nav treatment used at desktop widths */
  .nav { padding: 0; }
  .nav-inner {
    border-radius: 0;
    padding: 1rem 1.25rem;
    background: rgba(21,18,27,0.85) !important;
    border: none !important;
    border-bottom: 0.0625rem solid rgba(233,221,255,0.12);
    backdrop-filter: blur(0.5rem);
    box-shadow: none !important;
    width: auto !important;
    margin-left: 0 !important;
  }
  .nav-right { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile-menu { display: flex; }
  .nav-open .nav-mobile-menu { max-height: 30rem; }
  .hero-h1 { font-size: 2.25rem; line-height: 2.75rem; }
  .sec-hdr h2 { font-size: 2.25rem; }
  /* The carousel box is sized for the desktop card; on mobile the card is
     a different shape, so the fixed 32rem height (anchored top via
     perspective-origin) doesn't match. Card width/left are also fixed rem
     values tuned for desktop, leaving the mobile card far short of the
     container edges. */
  .why { padding: 4rem 0 0; }
  .why .container { margin-bottom: 2rem; }
  .why-scene { height: 30rem; padding: 0 var(--px); }
  /* Perspective (translateZ pulling the card toward the camera) inflates the
     rendered size by perspective/(perspective-R) = 1400/(1400-340) ≈ 1.32x,
     so the base width is pre-shrunk to land at ~100% of the padded scene. */
  .wc-card { width: 75%; left: 12.5%; }
  .why-card { padding: 1.5rem; }
  /* Outcomes: collapse the two staggered columns into one stacked column,
     but keep a connector line between each card (JS switches to a single
     straight vertical segment per gap instead of the desktop elbow) */
  .outcomes-body {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 26rem;
    grid-template-columns: none;
  }
  .o-col-left, .o-col-right { display: contents; }
  .o-col-left  .o-card:nth-child(1) { order: 0; }
  .o-col-right .o-card:nth-child(1) { order: 1; }
  .o-col-left  .o-card:nth-child(2) { order: 2; }
  .o-col-right .o-card:nth-child(2) { order: 3; }
  .o-col-left  .o-card:nth-child(3) { order: 4; }
  .o-col-right .o-card:nth-child(3) { order: 5; }
  .footer-top { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
  .footer-bottom {
  gap: 0.75rem;
  align-items: flex-start;
}
  .footer-logo-strip { margin-top: 1rem; justify-content: flex-start; }
  /* Bigger vw-based font-size (rather than a forced scaleX stretch, which
     visibly distorted the letterforms) so the word naturally spans close
     to full width — vw units keep that fill ratio consistent at any
     mobile viewport without any transform. */
  .footer-logo-strip-text { font-size: 34vw; }
  .cta-box { padding: 2.5rem 1.5rem; }
  .cta-box h2 { font-size: 2rem; line-height: 2.5rem; }
  /* background-size is width-driven (142% auto); on mobile the box gets
     proportionally taller (narrower width wraps the heading to more lines),
     so the pattern image no longer stretches enough to cover the full
     height. cover guarantees it always fills both dimensions. */
  .cta-pattern { background-size: cover; }
  .cta-main-btn .btn-cta {
  padding-top: 0.5rem; padding-bottom: 0.5rem;
  padding-left: calc(1.5rem - 0.5rem); padding-right: calc(1.5rem + 0.5rem);
  font-size: 0.875rem;
}
  .cta-main-btn .btn-cta-hex {
  width: 5rem;
  height: 2.5625rem;
  margin-left: -1.3125rem;
}
  /* Same wing/wrap re-scale as the 68.75rem breakpoint, this time matching
     the ~0.557x ratio used for .cta-main-btn .btn-cta-hex above. */
  .cta-main-btn .btn-cta-main-wrap { margin-left: 0.84rem; }
  .cta-main-btn .btn-cta-poly--left { left: -0.84rem; }
  .cta-main-btn .btn-cta-poly--right { right: -0.25rem; }
  .cta-main-btn .btn-cta-poly--left,
  .cta-main-btn .btn-cta-poly--right { width: 1.11rem; }
  .main-btn:not(.cta-main-btn) .btn-cta {
    padding: 0.85rem calc(1.75rem + 0.5rem) 0.85rem calc(1.75rem - 0.5rem);
    font-size: 0.875rem;
  }
  .main-btn:not(.cta-main-btn) .btn-cta-hex {
    width: 5rem;
    height: 2.62rem;
    margin-left: -1.3125rem;
  }
}
@media (max-width: 29.9375rem) {
  .main-btn:not(.cta-main-btn) .btn-cta {
    padding: 0.7rem calc(1.25rem + 0.5rem) 0.7rem calc(1.25rem - 0.5rem);
    font-size: 0.8125rem;
  }
  .main-btn:not(.cta-main-btn) .btn-cta-hex {
    width: 4rem;
    height: 2.2rem;
    margin-left: -1rem;
  }
}


@media (max-width: 68.75rem) {
  .strategy-laptop video {
  max-width: 37.5rem;
}
}

/* =============================================
   Discovery Call page
   ============================================= */
.dc-hero { position: relative; padding: 11rem var(--px) 4rem; overflow: hidden; }
.dc-hero-inner {
  position: relative; z-index: 1;
  max-width: calc(var(--max-w) + 9rem); /* 1440px */
  margin: 0 auto; padding: 0 var(--px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem;
  align-items: center;
}
.dc-tag { font-size: 0.75rem; color: var(--lavender); margin-bottom: 1.5rem; }
.dc-sub { font-size: 1rem; line-height: 1.5rem; color: var(--muted); max-width: 28.75rem; margin-bottom: 3rem; }

.dc-steps { display: flex; flex-direction: column; }
.dc-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 0;
  border-top: 0.0625rem solid rgba(233,221,255,0.1);
}
.dc-steps .dc-step:last-child { border-bottom: 0.0625rem solid rgba(233,221,255,0.1); }
.dc-step-num {
  width: 2rem; height: 2rem; border-radius: 0.25rem; flex-shrink: 0;
  background: rgba(208,188,255,0.1); border: 0.0625rem solid rgba(208,188,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.dc-step-num span { font-family: var(--f-display); font-size: 0.6875rem; font-weight: 600; color: var(--lav-btn); }
.dc-step h3 { font-size: 0.9375rem; font-weight: 500; color: var(--white); margin-bottom: 0.25rem; }
.dc-step p { font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.6; }

.dc-form-card {
  position: relative; overflow: hidden;
  border-radius: 0.75rem; background: rgba(233,221,255,0.03);
  box-shadow: inset 0 0 0 0.0625rem rgba(233,221,255,0.12);
  padding: 3rem;
}
.dc-form-glow {
  position: absolute; top: -5rem; right: -5rem; width: 18.75rem; height: 18.75rem;
  background: radial-gradient(circle, rgba(208,188,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.dc-form-label { position: relative; font-size: 0.75rem; color: var(--lavender); margin-bottom: 1rem; }
.dc-form-h2 {
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.375rem;
  letter-spacing: -0.0625rem;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.dc-form-h2 em { font-family: var(--f-serif); }
.dc-form-sub { position: relative; font-size: 0.875rem; color: rgba(255,255,255,0.4); line-height: 1.5; margin-bottom: 2.25rem; }

.dc-form { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.dc-field > label {
  display: block; font-size: 0.6875rem; color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.375rem;
}
.dc-field input, .dc-field textarea {
  width: 100%; background: rgba(233,221,255,0.04); border: 0.0625rem solid rgba(233,221,255,0.15);
  border-radius: 0.25rem; color: var(--white); font-family: var(--f-body);
  font-size: 0.875rem; font-weight: 400; padding: 0.75rem 1rem; outline: none;
  transition: border-color 0.2s;
}
.dc-field input::placeholder, .dc-field textarea::placeholder { color: rgba(255,255,255,0.3); }
.dc-field input:focus, .dc-field textarea:focus { border-color: rgba(208,188,255,0.6); }
.dc-field textarea { resize: none; }
.dc-form-submit-wrap { margin-top: 1.75rem; }

/* Project type — chip-style radio group */
.dc-radio-group { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.dc-radio { position: relative; cursor: pointer; }
.dc-radio input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
}
.dc-radio span {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 62.5rem;
  border: 0.0625rem solid rgba(233,221,255,0.15);
  background: rgba(233,221,255,0.04);
  color: rgba(255,255,255,0.7);
  font-size: 0.8125rem;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dc-radio:hover span { border-color: rgba(208,188,255,0.4); color: var(--white); }
.dc-radio input:checked + span {
  background: var(--lav-btn);
  border-color: var(--lav-btn);
  color: #000;
  font-weight: 500;
}
.dc-radio input:focus-visible + span { outline: 0.125rem solid var(--lav-btn); outline-offset: 0.125rem; }
.dc-other-input { margin-top: 0.625rem; }

.dc-form-success { text-align: center; padding: 3.5rem 0; }
.dc-form-check { font-size: 2.5rem; color: var(--lav-btn); margin-bottom: 1rem; }
.dc-form-success-title { font-family: var(--f-display); font-style: italic; font-size: 1.75rem; letter-spacing: -0.0625rem; color: var(--white); margin-bottom: 0.5rem; }
.dc-form-success-sub { font-size: 0.875rem; color: rgba(255,255,255,0.4); }

/* Stats */
.dc-stats {
  position: relative;
  border-top: 0.0625rem solid rgba(233,221,255,0.1);
  max-width: calc(var(--max-w) + 9rem); margin: 0 auto;
  padding: 4.5rem var(--px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
}
.dc-stat { text-align: center; }
.dc-stat + .dc-stat { border-left: 0.0625rem solid rgba(233,221,255,0.1); }
.dc-stat-num { font-family: var(--f-serif); font-style: italic; font-size: 3.5rem; line-height: 1; letter-spacing: -0.125rem; color: var(--lav-btn); }
.dc-stat-unit { font-size: 1.75rem; }
.dc-stat-lbl { font-size: 0.8125rem; color: rgba(255,255,255,0.45); margin-top: 0.625rem; line-height: 1.6; }

/* Testimonials — single spotlight card + logo-style switcher
   (adapted from the Klarheit UI testimonial reference: trust-bar row above
   one large quote, restyled to our dark/lavender palette + serif accent) */
.dc-testi { padding: 6.25rem 0; }

.testi-switch { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin-bottom: 2.5rem; }
.testi-switch-btn {
  flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.875rem;
  background: rgba(233,221,255,0.03); border: 0.0625rem solid transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0;
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600;
  color: rgba(255,255,255,0.35); cursor: pointer;
  transition: all 0.25s ease;
}
.testi-switch-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.testi-switch-btn:hover { color: rgba(255,255,255,0.6); }
.testi-switch-btn.is-active {
  width: 4rem; height: 4rem; border-radius: 1.125rem;
  background: rgba(208,188,255,0.1); border-color: var(--lav-btn);
  color: var(--lav-btn); font-size: 0.875rem;
}

.testi-spotlight {
  border-radius: 1.5rem; background: rgba(233,221,255,0.03);
  box-shadow: inset 0 0 0 0.0625rem rgba(233,221,255,0.1);
  padding: 2.5rem; display: flex; flex-direction: column; gap: 2rem;
}
.testi-spotlight-quote {
  font-family: var(--f-serif); font-style: italic; font-size: 1.75rem;
  line-height: 1.4; letter-spacing: -0.02rem; color: var(--white);
}
.testi-spotlight-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.testi-spotlight-name { font-size: 0.9375rem; font-weight: 500; color: var(--white); }
.testi-spotlight-role { font-size: 0.8125rem; color: rgba(255,255,255,0.4); margin-top: 0.1875rem; }
.testi-spotlight-logo {
  flex-shrink: 0; height: 1.75rem; width: auto; max-width: 6rem;
  object-fit: contain;
}

@media (max-width: 68.75rem) {
  .dc-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}
@media (max-width: 48rem) {
  .dc-hero { padding-top: 9rem; }
  .dc-form-card { padding: 1.75rem; }
  .testi-spotlight { padding: 1.75rem; }
  .testi-spotlight-quote { font-size: 1.375rem; }
  .testi-switch { gap: 0.75rem; }
  .testi-switch-btn { width: 2.25rem; height: 2.25rem; }
  .testi-switch-btn.is-active { width: 3.25rem; height: 3.25rem; }
}
/* Stats + testimonials stay in their desktop-style row/2-col grid through
   Tablet; only stack on Mobile Landscape and below */
@media (max-width: 47.9375rem) {
  .dc-stats {
  grid-template-columns: 1fr;
  gap: 2rem;
}
  .dc-stat + .dc-stat { border-left: none; border-top: 0.0625rem solid rgba(233,221,255,0.1); padding-top: 2rem; }
}



@media (max-width: 30rem) {
  .dc-hero-inner {
  padding: 0;
}
}

/* =============================================
   About page
   ============================================= */
.about-hero { position: relative; padding: 11rem var(--px) 5rem; overflow: hidden; text-align: center; }
.about-hero-inner { position: relative; z-index: 1; max-width: 47.5rem; margin: 0 auto; }
.about-tag { font-size: 0.75rem; color: var(--lavender); margin-bottom: 1.5rem; }
.about-hero .hero-h1 { margin: 0 auto 1.5rem; }
.about-hero-sub { font-size: 1rem; line-height: 1.6; color: var(--muted); }

.about-story { padding: 5rem 0; }
.about-story .sec-hdr { text-align: left; margin-bottom: 2rem; }
.about-story .sec-hdr p { margin: 0; max-width: none; }
.about-story-body p { font-size: 1rem; line-height: 1.7; color: var(--muted); margin-bottom: 1.25rem; }
.about-story-body p:last-child { margin-bottom: 0; }

.about-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.about-point {
  border-radius: 0.75rem; background: rgba(233,221,255,0.03);
  box-shadow: inset 0 0 0 0.0625rem rgba(233,221,255,0.1);
  padding: 2rem;
}
.about-point-num { font-family: var(--f-serif); font-style: italic; font-size: 1.75rem; color: var(--lav-btn); margin-bottom: 1rem; }
.about-point h3 { font-size: 1.0625rem; font-weight: 500; color: var(--white); margin-bottom: 0.5rem; }
.about-point p { font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,0.6); }

@media (max-width: 48rem) {
  .about-hero { padding-top: 9rem; }
  .about-points { grid-template-columns: 1fr; }
}

/* =============================================
   Case Studies Index
   ============================================= */
.csi-hero { position: relative; padding: 11rem var(--px) 4rem; overflow: hidden; }
.csi-hero .hero-pattern {
  background-image: url('images/bg_tentacle_v2.png');
  background-image: image-set(url('images/bg_tentacle_v2.avif') type('image/avif'), url('images/bg_tentacle_v2.png') type('image/png'));
  background-size: cover;
  transform: none;
  opacity: 0.15;
}
.csi-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end;
}
.csi-hero-inner .hero-h1 { text-align: left; max-width: 34rem; margin: 0; }
.csi-hero-sub { font-size: 1rem; line-height: 1.6rem; color: var(--muted); max-width: 28rem; }

.csi-grid-sec { padding: 2rem 0 6.25rem; }
.csi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

@media (max-width: 48rem) {
  .csi-hero { padding: 9rem var(--px) 3rem; }
  .csi-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .csi-hero-inner .hero-h1 { max-width: none; }
  .csi-grid { grid-template-columns: 1fr; }
}

/* =============================================
   Case Study Page (generated from Sanity)
   ============================================= */
.cs-header { padding: 9rem 0 0; }
.cs-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--faded); margin-bottom: 1.5rem;
}
.cs-breadcrumbs a { color: rgba(255,255,255,0.8); text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-color: rgba(255,255,255,0.25); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.cs-breadcrumbs a:hover { color: var(--purple-mid); text-decoration-color: var(--purple-mid); }
.cs-breadcrumb-sep { color: rgba(255,255,255,0.25); }
.cs-breadcrumb-current { color: var(--faded); }

.cs-header-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.cs-header-brand { display: flex; align-items: center; gap: 0.75rem; }
.cs-header-brand img { height: 2.25rem; width: auto; }
.cs-header-brand span { font-family: 'Nunito Sans', sans-serif; font-size: 1.125rem; font-weight: 900; color: var(--white); }

.cs-header-h1 { font-family: var(--f-display); font-size: 2.5rem; font-weight: 500; line-height: 1.15; color: var(--white); margin-bottom: 1.25rem; }
.cs-header-h1 em { font-family: var(--f-serif); font-style: italic; color: var(--purple-mid); }
.cs-header-excerpt { font-size: 1.125rem; color: var(--muted); line-height: 1.6; font-weight: 300; margin-bottom: 2rem; }

.cs-header-meta { margin-bottom: 1.5rem; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; }
.cs-tags span {
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--lavender); background: rgba(233,221,255,0.06); border: 0.0625rem solid rgba(233,221,255,0.15);
  border-radius: 62.5rem; padding: 0.375rem 0.875rem;
}

.cs-cover {
  border-radius: 1rem; overflow: hidden; border: 0.0625rem solid #393939;
  box-shadow: 0 1.5625rem 3.125rem -0.75rem rgba(0,0,0,0.35);
  margin-bottom: 5rem;
}
.cs-cover img { width: 100%; display: block; }

/* TOC (left) + article (center) + project details (right) — both rails
   sticky, article scrolls between them. */
.cs-body {
  width: 100%;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 15rem;
  gap: 3rem;
  align-items: start;
  margin-bottom: 5rem;
}

.cs-toc {
  position: sticky; top: 7rem; align-self: start;
  border: 0.0625rem solid rgba(233,221,255,0.12); border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.375rem;
}
.cs-toc-label {
  font-family: var(--f-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faded);
  margin-bottom: 1rem;
}
.cs-toc-inner { display: flex; flex-direction: column; gap: 0.125rem; }
.cs-toc-inner a {
  position: relative;
  font-size: 0.875rem; color: var(--faded); text-decoration: none;
  padding: 0.5rem 0 0.5rem 0.875rem;
  border-left: 0.125rem solid rgba(233,221,255,0.12);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cs-toc-inner a:hover { color: var(--purple-mid); border-left-color: var(--purple-mid); }
.cs-toc-inner a.active { color: var(--white); border-left-color: var(--purple-mid); }

.cs-section { margin-bottom: 4.5rem; }
.cs-section:last-child { margin-bottom: 0; }
.cs-sec-hdr { text-align: left; margin-bottom: 1.5rem; }
.cs-article .cs-sec-hdr .sec-label { font-family: var(--f-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
.cs-article .cs-sec-hdr .sec-label .diamond { width: 0.75rem; height: 0.6875rem; }
.cs-prose p { font-size: 1rem; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 1.25rem; }
.cs-prose p:last-child { margin-bottom: 0; }

.cs-section-image { border-radius: 1rem; overflow: hidden; margin-top: 2rem; }
.cs-section-image img { width: 100%; display: block; }

.cs-bullets { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.5rem; }
.cs-bullets li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; color: var(--white); line-height: 1.5rem; }
.cs-bullets .diamond-sm { margin-top: 0.5rem; }

.cs-details {
  position: sticky; top: 7rem; align-self: start;
  border: 0.0625rem solid rgba(233,221,255,0.12); border-radius: 1rem;
  padding: 1.75rem;
}
.cs-details .cs-sec-hdr .sec-label { white-space: nowrap; }
.cs-details-list { display: flex; flex-direction: column; gap: 1.25rem; }
.cs-details-item .meta-lbl { margin-bottom: 0.5rem; }

/* Key metrics */
.cs-metrics {
  padding: 4.5rem 0;
  border-top: 0.0625rem solid rgba(233,221,255,0.1);
  border-bottom: 0.0625rem solid rgba(233,221,255,0.1);
}
.cs-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.cs-metric { text-align: center; }
.cs-metric + .cs-metric { border-left: 0.0625rem solid rgba(233,221,255,0.1); }
.cs-metric-value { font-family: var(--f-serif); font-style: italic; font-size: 3rem; line-height: 1; letter-spacing: -0.08rem; color: var(--lav-btn); margin-bottom: 0.625rem; }
.cs-metric-label { font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.9; }

@media (max-width: 47.9375rem) {
  .cs-metrics-row { grid-template-columns: 1fr; gap: 2rem; }
  .cs-metric + .cs-metric { border-left: none; border-top: 0.0625rem solid rgba(233,221,255,0.1); padding-top: 2rem; }
}

/* Related case studies */
.cs-related { padding: 5rem 0 6.25rem; }
.cs-related > .container { max-width: calc(var(--max-w) + 9rem); }
.cs-related-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.cs-related-card {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem;
  border-radius: 1rem; border: 0.0625rem solid rgba(233,221,255,0.12);
  text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-related-card:hover { border-color: var(--purple-mid); background: rgba(135,88,242,0.05); }
.cs-related-thumb { border-radius: 0.625rem; overflow: hidden; aspect-ratio: 16/10; }
.cs-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-related-card h3 { font-family: var(--f-display); font-size: 1.125rem; font-weight: 500; color: var(--white); }
.cs-related-card p { font-size: 0.875rem; color: var(--faded); line-height: 1.5; font-weight: 300; }
.cs-related-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cs-related-tags span {
  font-size: 0.6875rem; font-weight: 500; color: var(--lavender);
  background: rgba(233,221,255,0.06); border-radius: 62.5rem; padding: 0.25rem 0.625rem;
}

@media (max-width: 61.9375rem) {
  .cs-metrics-row { grid-template-columns: 1fr 1fr; }
  .cs-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-toc, .cs-details { position: static; }
  .cs-toc-inner { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
}
@media (max-width: 47.9375rem) {
  .cs-header { padding-top: 7.5rem; }
  .cs-header-h1 { font-size: 1.875rem; }
  .cs-header-top { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}