/* ============================================================
   BRANDit — Design System (Luxury pass v5: true black & white)
   Page: #FAFAFA (near-white)   Text: #0A0A0A (near-black)
   Chrome (header/footer/hero/buttons): #000000 (true black)
   Strictly neutral — no warm/beige undertone, no hue-accent anywhere.
   Display font: Clash Display (Medium)   Body font: Clash Display (Regular)
   ------------------------------------------------------------
   Same architecture as the black+beige pass before it (every colour is
   still a CSS variable, header/footer/hero/buttons stay the fixed
   --dark chrome tone) -- this pass just strips the warm beige/espresso
   undertone out of every value so the whole site reads as pure
   black/white/grey instead of black+cream.
   ============================================================ */

:root {
  /* Brand colours */
  --sand:        #FFFFFF;   /* page background — true white */
  --sand-2:      #F0F0F0;   /* slightly deeper panels */
  --surface:     #FFFFFF;   /* elevated card surfaces — pure white, pops slightly off the page */
  --logo-chip:   #FFFFFF;   /* pure-white backdrop reserved for THIRD-PARTY logos (client
                                portfolio, jury panel, testimonial partners) */
  --ink:         #0A0A0A;   /* near-black — headings/text on the white base */
  --ink-rgb:     10,10,10;  /* same colour as --ink, as r,g,b for rgba() shadows/lines */
  --ink-soft:    #666666;   /* neutral grey secondary text */
  /* "Accent" is black, not colour — same true black as --dark, plus two
     dimmer greys for hover/subtle states. Named --copper still for
     minimal diff churn across the file. */
  --copper:      #000000;
  --copper-deep: #1A1A1A;   /* lighter black — hover/active states on dark (black) surfaces */
  --copper-light:#4D4D4D;   /* mid grey — subtle hover borders only */
  --teal:        #333333;   /* unused decorative variable, kept neutral */
  --dark:        #000000;   /* fixed black chrome — header/footer/hero/buttons */
  --dark-2:      #141414;
  --line:        rgba(var(--ink-rgb),.12);
  --white:       #ffffff;

  --gradient-brand: var(--copper);
  --glow-copper: rgba(0,0,0,.22);

  /* Typography — one typeface (Clash Display), used at two weights:
     Medium (500) for headings/labels/emphasis, Regular (400) for body copy. */
  --font-display: "Clash Display", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Clash Display", "Segoe UI", system-ui, sans-serif;

  /* Layout — slightly less rounded than before: sharper, more
     editorial corners read more "boutique hotel" than "app UI". */
  --container: 1200px;
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 67px;
}

/* ---------- reset-ish ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 48px)); margin-inline: auto; }
.center { text-align: center; }
.section { padding: clamp(18px, 2.6vw, 36px) 0; }
.section--soft { background: var(--sand-2); }
.section--dark { background: var(--dark); color: #F2F2F2; }
.section--dark .section-lead,
.section--dark p { color: #B3B3B3; }

.eyebrow {
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--copper); font-weight: 500; margin-bottom: .8rem;
}
.section-title { font-size: clamp(1.5rem, 2.6vw, 2.35rem); max-width: 22ch; font-weight: 500; letter-spacing: -.015em; }
.section-title.center { margin-inline: auto; }
.section-title.right { margin-left: auto; text-align: right; }
.section-title.small { font-size: clamp(.95rem,1.5vw,1.2rem); }
/* Word-mask reveal (see main.js splitIntoWordSpans): each word sits in
   an overflow-hidden wrapper so it can slide up from fully hidden below
   the mask into view, instead of just fading in place. */
/* padding-bottom/negative margin-bottom give the mask extra room below
   the baseline so descenders (g, y, p, j, q) don't get sliced off by
   overflow:hidden under the parent heading's tight line-height, while
   the negative margin cancels the padding back out of the layout flow
   so it doesn't add visible extra gap under the heading. */
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .32em; margin-bottom: -.32em; }
.word-reveal { display: inline-block; will-change: transform; }
.section-lead { font-size: clamp(.98rem,1.1vw,1.1rem); color: var(--ink-soft); font-weight: 400; max-width: 62ch; }
.center .section-lead { margin-inline: auto; }

/* ---------- buttons ---------- */
/* ONE consistent button language site-wide: light (off-white) fill,
   dark text, sharp 2px corners, uppercase tracked label. Every variant
   below (.btn, .btn--light, .btn--ghost, nav-cta, footer submit) ends
   up at this same look — .btn--ghost is just its outlined resting
   state, filling to match on hover. No colour accent, monochrome only. */
/* Every CTA button site-wide: one consistent red, small size, smooth
   (rounded) corners -- all variants below (.btn--light/--ghost/--red)
   now just inherit this same look instead of their old distinct
   colours/shapes, so every button reads as the same style everywhere. */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  background: #C0272D;
  color: var(--surface);
  font-family: var(--font-body); font-weight: 500; font-size: .74rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .65em 1.25em; border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn span { transition: transform .3s var(--ease); }
.btn:hover { background: #9E1F24; color: var(--surface); transform: translateY(-2px); box-shadow: 0 16px 32px -6px rgba(192,39,45,.4); }
.btn:hover span { transform: translateX(4px); }
.btn--light, .btn--ghost, .btn--red { background: #C0272D; color: var(--surface); border: 0; }
.btn--light:hover, .btn--ghost:hover, .btn--red:hover { background: #9E1F24; color: var(--surface); box-shadow: 0 16px 32px -6px rgba(192,39,45,.4); }
.btn--sm { padding: .65em 1.25em; font-size: .74rem; }
.btn--block { width: 100%; justify-content: center; }

.arrow { display: inline-block; transition: transform .3s var(--ease); }
a:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
/* No header bar/box any more -- just the hamburger toggle, floating
   directly over the page (position:fixed still needed so it stays put
   while scrolling; background/box-shadow removed so there's no visible
   strip behind it). */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
/* Only the toggle itself is clickable -- the rest of the (now invisible)
   header strip must NOT block clicks/hover on whatever page content
   happens to sit underneath it. */
.nav-toggle { pointer-events: auto; }
.header-inner { display: flex; align-items: center; gap: 24px; width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
/* Header now shows only the hamburger toggle -- logo hidden here (still
   used elsewhere, e.g. the footer). */
.brand { display: none; }
.brand:hover { transform: scale(1.16); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.brand-logo--dark { display: none; }
.brand-logo--light {
  display: block; height: 104px; width: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
  transition: filter .4s var(--ease);
}
.brand:hover .brand-logo--light {
  filter:
    drop-shadow(0 2px 10px rgba(0,0,0,.25))
    drop-shadow(0 0 16px rgba(220,220,220,.95))
    drop-shadow(0 0 32px rgba(190,190,190,.65));
}

/* Full link row + separate "Let's Talk" button are replaced by the
   hamburger toggle at every screen size now (not just mobile) -- both
   still live in the DOM (the hamburger's own drawer reuses them), just
   never shown inline in the header bar itself. */
.main-nav, .nav-cta { display: none; }
.main-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.main-nav a { font-size: .9rem; font-weight: 400; letter-spacing: .01em; color: rgba(255,255,255,.85); position: relative; padding: 6px 0; transition: color .25s; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: #fff; transition: width .3s var(--ease); }
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; }
.main-nav a.is-active { color: #fff; font-weight: 500; }

.nav-cta { margin-left: 4px; background: rgba(255,255,255,.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.5); }
.nav-cta:hover { background: #fff !important; color: var(--dark) !important; }

/* A solid black chip behind the toggle now (not just floating bars) --
   guarantees the white lines stay legible over any page background
   without needing a drop-shadow. */
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--dark); border: 0; border-radius: 6px;
  cursor: pointer; padding: 10px 12px; margin-left: auto;
}
.nav-toggle span { width: 26px; height: 2px; background: #fff; transition: .3s var(--ease); }

/* Off-canvas panel from the right, 25% of the viewport width (with a
   floor so it doesn't get unusably narrow on small screens). Starts
   BELOW the header/toggle (not full height top:0) for two reasons: a
   shorter panel that just fits its content instead of stretching the
   full viewport height, and -- since the toggle button sits fixed on
   top with its own higher z-index -- starting at top:0 meant it visually
   overlapped and ate clicks meant for the first link(s) in the list. */
.mobile-drawer {
  position: fixed; top: calc(var(--header-h) + 10px); right: 0; bottom: auto; left: auto; z-index: 99;
  width: 25%; min-width: 280px;
  max-height: calc(100vh - var(--header-h) - 20px);
  background: var(--dark); border-left: 1px solid rgba(255,255,255,.12);
  border-radius: 10px 0 0 10px;
  box-shadow: -24px 12px 48px -20px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .4s var(--ease);
  overflow-y: auto;
  /* .site-header (this panel's parent) sets pointer-events:none so the
     invisible header strip never blocks clicks on page content behind
     it -- pointer-events is inherited, so without this override every
     link inside the drawer would silently be unclickable too, even
     while open. */
  pointer-events: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer ul { list-style: none; margin: 0; padding: 18px 24px 28px; display: grid; gap: 6px; }
.mobile-drawer a { display: block; padding: 12px 4px; font-size: .575rem; font-family: var(--font-display); color: #fff; border-bottom: 1px solid rgba(255,255,255,.15); }
.mobile-drawer a:hover { color: #C0272D; }
.mobile-drawer .btn { margin-top: 12px; background: #fff; color: var(--dark); }
.mobile-drawer .btn:hover { background: var(--sand-2); color: var(--dark); }

/* ============================================================
   HERO — destination photo
   ============================================================ */
.hero-destination { position: relative; min-height: 100vh; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero-destination-media { position: absolute; inset: 0; z-index: 0; }
.hero-destination-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-destination-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(40,40,40,.5) 0%, rgba(90,90,90,.28) 45%, rgba(20,20,20,.72) 100%);
}
.hero-destination-content { position: relative; z-index: 1; max-width: 640px; }
.hero-destination-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; font-size: .8rem; color: #d4af37; margin-bottom: 1.4em;
}
.hero-destination-content h1 {
  font-family: var(--font-display); font-weight: 500; color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 0 0 1em;
}
.hero-destination-content p {
  font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.6;
  color: rgba(255,255,255,.85); max-width: 58ch; margin: 0;
}

/* ============================================================
   HERO VIDEO (placeholder) — sits right below the destination
   hero; swap the placeholder box for a real <video>/embed later.
   ============================================================ */
.hero-video-placeholder {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  background: #111; color: #fff; text-align: center;
}
.hero-video-placeholder-inner { display: flex; flex-direction: column; align-items: center; }
.hero-video-icon {
  display: flex; align-items: center; justify-content: center;
  width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
  font-size: 1.2rem; margin-bottom: 16px;
}
.hero-video-placeholder-inner p {
  color: rgba(255,255,255,.6); font-family: var(--font-display); font-weight: 500;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0;
}

/* ============================================================
   OUR IMPACT
   ============================================================ */
/* Solid black band, inline stats separated by thin vertical dividers --
   no boxed/textured cards. Heading uses the same word-mask split as
   every other section title; the first word is dimmed/regular-weight
   so the second reads bolder, echoing a two-tone heading without
   introducing any colour (see .impact-title below). */
.impact { padding: clamp(56px,7vw,92px) 0; background: var(--dark); }
.impact-head { text-align: center; margin-bottom: clamp(18px,2.4vw,28px); }
.impact-title { color: #fff; }
.impact-title .word-mask:first-child .word-reveal { font-weight: 400; opacity: .55; }
/* "Impact" (2nd word) gets the same gold gradient as the KPI numbers
   below -- the same gradient used on the gold testimonial cards
   (.testi-stack-card.is-gold), for a consistent gold accent sitewide. */
.impact-title .word-mask:last-child .word-reveal {
  background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.impact-box { padding: 0; }
.impact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.impact-item {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 14px clamp(8px,1.4vw,20px);
  min-width: 0;
}
/* Divider "line" instead of a boxed card: a thin vertical bar that's
   most visible in the middle and fades away at the top/bottom edges,
   rather than a flat uniform border. */
.impact-item:not(:last-child)::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
}
.impact-item:hover { z-index: 2; }
.impact-number, .impact-label { transition: transform .35s var(--ease); }
.impact-item:hover .impact-number,
.impact-item:hover .impact-label {
  transform: scale(1.14);
}
/* Gold gradient-text effect on the KPI numbers -- same gradient as the
   gold testimonial cards (.testi-stack-card.is-gold), an intentional
   one-off colour accent, the rest of the site stays black & white. */
.impact-number {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.71rem, 2.7vw, 2.34rem);
  line-height: 1; white-space: nowrap;
  background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.impact-label { font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.4; max-width: 16ch; }

/* ============================================================
   HOW WE DRIVE GROWTH — all 4 cards visible in one row
   ============================================================ */
.growth { padding-top: clamp(20px,3vw,36px); padding-bottom: 20px; }
.growth-head { max-width: 720px; margin: 0 auto clamp(16px,2vw,24px); }
.growth-title-link { display: inline-block; }
.growth-title-link .arrow { color: var(--copper); }

/* Plain icon + text pillar row, no card chrome, no animation -- a thin
   divider line under the whole row instead of individual card borders. */
.growth-cine-stage {
  display: flex; flex-wrap: wrap; gap: 28px 24px;
  margin-top: clamp(28px,3.5vw,44px);
  padding-bottom: clamp(24px,3vw,36px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.growth-pillar {
  display: flex; align-items: center; gap: 14px;
  flex: 1 1 220px; min-width: 220px;
  color: inherit; text-decoration: none;
}
.growth-pillar-icon {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--copper);
}
.growth-pillar-icon svg { width: 100%; height: 100%; }
.growth-pillar-text h3 { font-size: 1rem; margin: 0; color: var(--ink); }

/* ============================================================
   SERVICES — text on the left, all 11 services as a plain list on the
   right. No sticky/bounded/peek-stack mechanic any more, no manual or
   auto scrolling of a separate box -- each card just reveals itself
   with the same fade-up-on-scroll animation used everywhere else on
   the site (.reveal, toggled to .reveal.in by the generic
   IntersectionObserver already in main.js), staggered per card via
   --i. One section, one scroll, nothing nested inside it.
   ============================================================ */
.services-layout {
  display: grid; grid-template-columns: minmax(380px, 560px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.services-head { padding-left: clamp(20px,4vw,64px); margin-top: 38px; }
.services-head .section-title { max-width: none; font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.services-head .section-lead { max-width: 54ch; }
.services-head .btn { margin-top: 18px; }

/* Each service is its own card; cards overlap by half their height
   (negative margin-top on every card but the first) so the deck reads
   as a stack -- the newer card covers the bottom half of the one
   before it while that card's headline (its top half) keeps peeking
   out above. Later cards sit later in the DOM, so they paint over the
   earlier ones automatically -- no z-index juggling needed. */
.services-stack { display: flex; flex-direction: column; margin-top: clamp(17px, 1.85vw, 22px); padding-bottom: 8px; }
.services-pair-text {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 34px -22px rgba(var(--ink-rgb),.3);
  padding: 13px 31px 31px;
}
.services-pair-text:not(:first-child) { margin-top: -23px; }
.services-pair-text h3 { font-size: 1.17rem; margin: 0; }

/* Cascade-in: when the section scrolls into view, each row rises up
   and settles into place one after another (delayed by --i), so the
   list visually builds itself row by row -- see the group-level
   IntersectionObserver in main.js (.services-stack.in-view triggers
   every .stack-item at once, each on its own --i delay, rather than
   each row waiting to individually cross the viewport edge). */
.stack-item { opacity: 0; transform: translateY(46px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.services-stack.in-view .stack-item { opacity: 1; transform: none; }

/* ============================================================
   PROVEN IMPACT — case teasers
   ============================================================ */
.proven { background: #060606; }
.proven-head { max-width: 780px; margin-inline: auto; margin-bottom: 4px; }
.proven-head .section-title { color: #fff; }
.proven-head .section-lead { color: rgba(255,255,255,.62); }
/* Grid capped at 800px (down from 1000px) -- shrinks all 3 cards
   proportionally since each one is sized by its grid column. */
.proven-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: start; gap: 32px; max-width: 860px; margin-inline: auto; padding-top: 34px; padding-bottom: 12px; }
/* Floating layout: left & right cards sit noticeably higher, the middle
   one noticeably lower, and all 3 gently bob up and down forever — like
   they're floating, not just statically offset. Each card has its own
   animation delay so they drift out of phase with each other rather than
   moving in lockstep. A soft warm glow (always on, not just on hover)
   reinforces the "floating" read. */
.proven-card {
  --float-y: 0px;
  border-radius: var(--radius); overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,.12);
  transform: translateY(var(--float-y));
  animation: cardFloat 5s ease-in-out infinite;
  box-shadow: 0 20px 45px -18px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.35);
  transition: box-shadow .4s var(--ease);
  will-change: transform;
}
.proven-card:nth-child(1) { --float-y: -32px; animation-delay: 0s; }
.proven-card:nth-child(2) { --float-y: 32px; animation-delay: -1.7s; }
.proven-card:nth-child(3) { --float-y: -32px; animation-delay: -3.3s; }
@keyframes cardFloat {
  0%, 100% { transform: translateY(var(--float-y)); }
  50% { transform: translateY(calc(var(--float-y) + 12px)); }
}
.proven-card:hover {
  animation-play-state: paused;
  transform: translateY(calc(var(--float-y) - 8px));
  box-shadow: 0 30px 60px -16px rgba(0,0,0,.55), 0 20px 40px -16px rgba(0,0,0,.4);
}
.proven-card-img { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.proven-card-img img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); }
.proven-card:hover .proven-card-img img { transform: scale(1.07); }
.proven-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap:.5em;
  background: linear-gradient(135deg, rgba(246,231,180,.9) 0%, rgba(212,175,55,.9) 42%, rgba(156,122,36,.9) 78%, rgba(201,162,39,.9) 100%);
  color: #1a1300; font-family: var(--font-display); font-weight: 500;
  opacity: 0; transition: opacity .35s var(--ease);
}
.proven-card:hover .proven-hover { opacity: 1; }
.proven-card-body { padding: 14px 16px 18px; }
.proven-card-body h3 { font-size: 1rem; margin-bottom: .3em; color: #fff; }
.proven-card-body p { color: rgba(255,255,255,.6); font-size: .8rem; margin: 0; }
.proven-cta { margin-top: clamp(36px,5vw,60px); text-align: center; }

/* ============================================================
   TESTIMONIALS — bordered grid (matches the brief's reference layout)
   ============================================================ */
.testi-heading { position: relative; padding-bottom: 12px; margin-bottom: clamp(8px,1vw,14px); }
.testi-underline { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--gradient-brand); margin: 9px auto 0; }

/* Stacked pile -> 4-over-4 grid, purely scroll-triggered (no click/arrow
   interaction). Every card starts piled dead-centre with a slight
   per-card rotation (--i sets stagger delay + a touch of tilt so the
   pile reads as a messy stack, not identical rectangles). Once the
   section crosses the vertical middle of the viewport, main.js
   (initTestiStack) sets each card's --tx/--ty (its target slot in the
   grid, computed responsively) and adds .is-arranged, which is the only
   thing that actually moves them -- see the .is-arranged rule. Card
   shape keeps the cut-corner silhouette + diagonal "torn" accent line
   from the reference component. Sized 20% down from the original pass
   (300px -> 240px). */
.testi-stack {
  /* Only 1 row of 4 now (not 2 rows of 4/8) -- much shorter than before. */
  position: relative; width: 100%; height: 260px; margin-top: clamp(4px,1vw,10px);
  /* The whole pile itself now also rises up from below and fades in
     right as the section reaches the middle of the viewport (the same
     moment .is-arranged switches on, driven by testiIO in main.js) --
     cards still arrive piled together first, they just enter from
     below instead of already sitting there statically. Reverses the
     same way when scrolling back up. */
  opacity: 0; transform: translateY(70px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.testi-stack.is-arranged { opacity: 1; transform: translateY(0); }
.testi-stack-card {
  /* 20% smaller than before (300x224 -> 240x180). */
  position: absolute; left: 50%; top: 50%;
  width: 240px; height: 180px; padding: 16px 20px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  clip-path: polygon(34px 0%, calc(100% - 34px) 0%, 100% 34px, 100% 100%, calc(100% - 34px) 100%, 34px 100%, 0 100%, 0 0);
  transform: translate(-50%, -50%) rotate(calc(((var(--i, 0) % 2) * 2 - 1) * 4deg));
  z-index: var(--i, 0);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.3);
  transition: transform .7s var(--ease), box-shadow .5s var(--ease);
  transition-delay: calc(var(--i, 0) * .06s);
}
.testi-stack.is-arranged .testi-stack-card {
  transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px));
}
/* Same diagonal glossy-sheen treatment on all three variants now,
   instead of gold being the only one with a gradient. */
.testi-stack-card.is-white {
  background: linear-gradient(135deg, #FFFFFF 0%, #F2F2F2 45%, #E2E2E2 78%, #EFEFEF 100%);
  color: var(--ink);
}
.testi-stack-card.is-black {
  background: linear-gradient(135deg, #2B2B2B 0%, #121212 45%, #000000 78%, #1A1A1A 100%);
  color: #fff; border-color: var(--dark);
}
.testi-stack-card.is-gold {
  background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
  color: #2B2205; border-color: #9C7A24;
}
.testi-stack-tear {
  position: absolute; right: -1px; top: 32px; width: 72px; height: 1px;
  background: var(--line); transform-origin: top right; transform: rotate(45deg);
}
.testi-stack-card.is-black .testi-stack-tear { background: rgba(255,255,255,.3); }
.testi-stack-card.is-gold .testi-stack-tear { background: rgba(43,34,5,.3); }
.testi-stack-card blockquote { margin: 0 0 14px; font-size: .84rem; line-height: 1.45; font-weight: 500; flex: 1; overflow: hidden; }
/* Avatar + name/role sit side by side in one row at the bottom of the
   card, instead of the logo up top and the byline pinned separately. */
.testi-stack-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.testi-stack-avatar {
  flex: 0 0 auto; width: 50px; height: 50px; background: var(--logo-chip);
  border: 1px solid var(--line); overflow: hidden;
}
.testi-stack-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-stack-info { display: flex; flex-direction: column; min-width: 0; font-style: italic; opacity: .85; }
.testi-stack-info strong { font-size: .72rem; font-style: normal; font-weight: 500; }
.testi-stack-info span { font-size: .68rem; }

.testi-more-wrap { text-align: center; margin-top: clamp(10px,2vw,22px); }
/* Hidden until "More Testimonials" is clicked (main.js toggles
   .is-expanded), so the page doesn't open with two layouts stacked. */
.testi-marquee-wrap { display: none; margin-top: clamp(28px,4vw,44px); }
.testi-marquee-wrap.is-expanded { display: block; }

/* Continuous right-to-left flow, ~3 cards visible at a time, boxed like a
   filmstrip of table cells. Content is tripled in the template so the loop
   (translateX -33.333%) repeats seamlessly. */
.testi-marquee {
  overflow: hidden; width: 100%;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Second row sits right below the first, opposite scroll direction. */
.testi-marquee--reverse { margin-top: 14px; }
.testi-track { display: flex; width: max-content; animation: testiFlow 38s linear infinite; }
.testi-marquee:hover .testi-track { animation-play-state: paused; }
@keyframes testiFlow { to { transform: translateX(-33.3333%); } }
/* Same keyframes, reversed -- flows the opposite way (left to right). */
.testi-track--reverse { animation-direction: reverse; }
.testi-card {
  flex: 0 0 min(316px, 86vw); margin: 0; padding: 10px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
}
/* Company logo — centered, boxed placeholder until real logos are added
   (drop a file into static/images/testimonials/, see its _READ-ME-FIRST.txt).
   Clicking it triggers a brief glow (main.js toggles .is-glowing). */
.testi-logo-wrap {
  width: 57px; height: 57px; margin-bottom: 3px;
  display: flex; align-items: center; justify-content: center;
  /* Partner logos are dark artwork made for light backgrounds -- kept on
     a light chip regardless of the page's own dark theme, or they'd be
     unreadable. */
  background: var(--logo-chip); border: 1px solid var(--line); border-radius: 50%;
  overflow: hidden; cursor: pointer;
  transition: box-shadow .35s ease, transform .3s var(--ease), border-color .35s ease;
}
.testi-logo-wrap.is-glowing {
  transform: scale(1.06);
  border-color: var(--copper-light);
  box-shadow:
    0 0 0 6px rgba(240,96,34,.14),
    0 0 26px 6px rgba(240,96,34,.55),
    0 0 50px 16px rgba(247,166,90,.35);
}
.testi-logo { max-width: 62%; max-height: 62%; width: auto; height: auto; object-fit: contain; }
.testi-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-family: var(--font-display); font-weight: 500; font-size: .92rem; color: var(--ink); }
.testi-role { font-size: .74rem; color: var(--ink-soft); }
.testi-card blockquote { margin: 10px 0 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.55; max-width: 100%; }

/* ============================================================
   CLIENTS — logo grid
   ============================================================ */
.clients .section-title { margin-bottom: clamp(16px,2vw,24px); }
/* Current Portfolio <-> Past Clients: two full slides sliding horizontally,
   toggled by the arrow buttons. JS (main.js) measures each slide's real
   height and animates the wrapper to match, since the two slides are very
   different lengths. */
.clients-slider { position: relative; overflow: hidden; transition: height .45s var(--ease); }
.clients-track { display: flex; width: 200%; transition: transform .5s var(--ease); align-items: flex-start; }
.clients-slide { width: 50%; flex-shrink: 0; min-width: 0; }
.clients-arrow {
  position: absolute; top: 6px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 10px 22px -14px rgba(var(--ink-rgb),.3);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.clients-arrow:hover { border-color: var(--copper); transform: scale(1.08); }
.clients-arrow--prev { left: 0; }
.clients-arrow--next { right: 0; }
.clients-arrow[hidden] { display: none; }
/* flat grid for Past Clients (no category rows) -- same bordered-cell look
   as the Current Portfolio grid above it */
.past-clients-grid { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: clamp(20px,3vw,32px); }
/* One continuous marquee row, logos flowing left -> right (reverse of
   the testimonials marquee's default direction) -- same technique as
   .testi-marquee/.testi-track: content tripled in the template, track
   animates by exactly -33.3333% so the loop is seamless. */
.portfolio-marquee {
  overflow: hidden; width: 100%;
  margin: 0 0 clamp(32px,4vw,52px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.portfolio-track {
  display: flex; width: max-content;
  animation: testiFlow 38s linear infinite reverse;
}
.portfolio-marquee:hover .portfolio-track { animation-play-state: paused; }
/* Client/partner logos are third-party artwork made for light
   backgrounds -- kept on a light chip at rest (not just on hover), or
   they'd disappear against the page's own dark background. Grey/muted
   by default, full colour only on hover. Used both in the marquee above
   (flex item, fixed width) and the Past Clients grid below (grid item,
   stretches to its cell) -- the fixed width is scoped to the marquee
   only so it doesn't fight the grid's own column sizing. */
.client-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3/2;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px; background: var(--logo-chip);
  transition: background .3s var(--ease), transform .3s var(--ease); position: relative;
}
.portfolio-track .client-cell { flex: 0 0 auto; width: clamp(140px, 14vw, 190px); border-bottom: 0; }
.client-cell img {
  max-height: 50px; max-width: 100%; width: auto;
  filter: grayscale(1) opacity(.55);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.client-cell:hover { z-index: 2; transform: scale(1.05); box-shadow: 0 16px 34px -18px rgba(var(--ink-rgb),.28); }
.client-cell:hover img { filter: grayscale(0) opacity(1); }

/* ============================================================
   TGTF
   ============================================================ */
.tgtf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
.tgtf-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 24px 48px -24px rgba(var(--ink-rgb),.3); }
.tgtf-media img { width:100%; height:100%; object-fit: cover; }
.tgtf-logo { height: 173px; width: auto; margin-bottom: 16px; }
.tgtf-abbr { color: var(--copper); font-weight: 500; }
.tgtf-body p { color: var(--ink-soft); }

/* ============================================================
   INDIA TRAVEL INTELLIGENCE -- text constant on the left, one
   image+caption at a time on the right (prev/next arrows cycle
   through the cards, same slide-track technique as .clients-track).
   ============================================================ */
.intel { background: #060606; }
.intel-layout {
  display: grid; grid-template-columns: minmax(340px, 500px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.intel-head { max-width: 52ch; }
/* .section-title has .split-reveal, which (when GSAP is available)
   moves its actual text into nested .word-reveal spans (see main.js
   splitIntoWordSpans) -- the gradient then has to target those spans
   directly, not the now-textless parent heading, same as
   .impact-title's gold word further up. The rule on .section-title
   itself is the fallback for when that split never happens (GSAP
   missing, prefers-reduced-motion). */
.intel-head .section-title,
.intel-head .section-title .word-reveal {
  background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.intel-head .section-lead { color: rgba(255,255,255,.62); }
.intel-head .btn { margin-top: 22px; }

/* Since the viewport is only 50% wide now, the group (arrows + card)
   no longer fills the column -- push it to the right instead of
   leaving it stuck on the left with empty space after it. */
.intel-slider { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.intel-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.intel-arrow:hover { border-color: var(--copper); transform: scale(1.06); }
.intel-arrow[hidden] { visibility: hidden; }

/* Holder width: 50% -> 60% -> bumped up another 20% from there (72%). */
.intel-viewport { flex: 0 1 auto; width: 72%; max-width: 72%; min-width: 0; overflow: hidden; }
/* Track is N x 100% wide (N = --count, set inline per card count), each
   slide 100/N of that -- translateX by index * (100/N)% in main.js. */
.intel-track { display: flex; width: calc(var(--count, 1) * 100%); transition: transform .5s var(--ease); }
.intel-slide {
  width: calc(100% / var(--count, 1)); flex-shrink: 0; min-width: 0;
  background: var(--sand-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
/* contain, not cover -- these are data charts, not decorative photos, so
   nothing should ever get cropped off. White backdrop matches each
   chart's own white background so the letterboxing is seamless. */
.intel-slide-media { aspect-ratio: 16/10; overflow: hidden; background: #fff; }
.intel-slide-media img { width: 100%; height: 100%; object-fit: contain; }
.intel-slide-text { padding: clamp(7px,1vw,10px) clamp(9px,1.2vw,13px); }
.intel-stat { font-family: var(--font-display); font-weight: 500; font-size: clamp(.8rem,1.1vw,1rem); color: var(--copper); display: block; margin-bottom: .25em; }
.intel-slide-text h3 { font-size: .78rem; margin-bottom: .25em; }
.intel-slide-text p {
  color: var(--ink-soft); font-size: .7rem; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.intel-foot { margin-top: 54px; }
.intel-foot small { color: rgba(255,255,255,.55); }

/* ============================================================
   AFFILIATIONS + SOCIAL LIVE
   ============================================================ */
.affil-grid { list-style: none; margin: 0 auto clamp(40px,5vw,64px); padding: 0; display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; }
.affil-grid img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .6; transition: .3s; }
.affil-grid img:hover { filter: none; opacity: 1; }
.social-live { text-align: center; max-width: 780px; margin-inline: auto; }
.social-live h3 { font-size: clamp(1.2rem,2vw,1.6rem); }
.social-live p { color: var(--ink-soft); margin-bottom: 0; }

/* latest-3 Instagram / LinkedIn post rows */
.social-row { margin-top: clamp(28px,3.6vw,40px); text-align: left; }
.social-row-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--ink); margin-bottom: 14px; }
.social-row-label:hover { color: var(--copper); }
/* Cards sized to 80% of the row's width (20% smaller) -- left-aligned,
   matching the label above (not centred, which would drift out from
   under it). */
.social-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 80%; margin-inline: auto; }
.social-post { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); position: relative; }
.social-post img, .social-post video { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.social-post:hover img, .social-post:hover video { transform: scale(1.06); }

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.page-hero { padding: calc(var(--header-h) + 48px) 0 44px; background: var(--sand-2); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 18ch; }
.page-hero-sub { font-size: clamp(.98rem,1.2vw,1.1rem); color: var(--ink-soft); max-width: 60ch; }
.page-hero.center .page-hero-sub, .page-hero.center h1 { margin-inline: auto; }

/* About page hero: an oversized "About Us" watermark bleeds off the
   left edge behind the page content, with the real (much smaller,
   bold) heading sitting on top of it in normal flow. */
.about-hero { position: relative; overflow: hidden; padding-top: calc(var(--header-h) + 72px); padding-bottom: 64px; }
.about-hero-watermark {
  position: absolute; left: -3vw; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(5.5rem, 17vw, 13.5rem); line-height: 1; letter-spacing: -.02em;
  color: rgba(10,10,10,.06);
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}
.about-hero .container { position: relative; z-index: 1; }
.about-hero-title {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.01em; color: var(--ink);
  max-width: none; margin: 0 0 .5em;
}
.error-hero { min-height: 70vh; display: flex; align-items: center; }

/* expertise pillars */
.pillars { display: grid; gap: 18px; }
.pillar { display: grid; grid-template-columns: 70px 1fr; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px,2.4vw,28px); align-items: start; }
.pillar-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem,2.4vw,1.9rem); color: var(--copper); line-height: 1; }
.pillar-body h2 { font-size: clamp(1.05rem,1.5vw,1.25rem); }
.pillar-body p { color: var(--ink-soft); font-size: .92rem; }
.pillar-points { margin: .85rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pillar-points li { font-size: .8rem; background: var(--sand-2); border: 1px solid var(--line); border-radius: 100px; padding: .4em 1em; }

/* case study grids */
.cs-segment-head { max-width: 760px; margin-bottom: 16px; }
.cs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.cs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .35s var(--ease); }
.cs-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -22px rgba(var(--ink-rgb),.32); }
.cs-card-img { aspect-ratio: 4/3; overflow: hidden; }
.cs-card-img img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); }
.cs-card:hover .cs-card-img img { transform: scale(1.06); }
.cs-card-body { padding: 18px 20px 22px; }
.cs-card-body h3 { font-size: 1.08rem; }
.cs-card-body p { color: var(--ink-soft); font-size: .88rem; margin: 0; }

/* news (home-page section + standalone News page share the cs-grid/cs-card look,
   but scaled down -- the shared cs-grid sizing reads too large for 3 plain
   placeholder cards) */
.news .section-title { margin-bottom: clamp(16px,2vw,24px); }
.news-cta { margin-top: clamp(28px,4vw,44px); }
/* 3 cards per row on the home page: photo on top, small destination tag,
   then the headline as the prominent line (style borrowed from the
   reference), sized down to fit 3 across instead of 2 */
.news-grid { grid-template-columns: repeat(3,1fr); max-width: 900px; margin-inline: auto; gap: 20px 16px; }
.news-grid .cs-card-img { aspect-ratio: 16/10; }
.news-grid .cs-card-body { padding: 12px 16px 16px; }
.news-tag { display: block; font-family: var(--font-display); font-weight: 500; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--copper); margin-bottom: .4em; }
.news-grid .cs-card-body p { font-size: .88rem; line-height: 1.35; color: var(--ink); font-weight: 500; margin: 0; }

/* about */
.lead-para { font-size: 1.02rem; color: var(--ink-soft); }
.values-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 20px; }
.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.value-card h3 { color: var(--copper); font-size: 1.15rem; }
.value-card p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.team-head { max-width: 720px; margin-bottom: 16px; }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.team-card { text-align: center; }
.team-photo { aspect-ratio: 8/7; max-width: 80%; border-radius: var(--radius); overflow: hidden; margin: 0 auto 10px; background: var(--sand-2); }
.team-photo img { width:100%; height:100%; object-fit: cover; }
.team-card strong { font-family: var(--font-display); display: block; font-size: .92rem; }
.team-card span { color: var(--ink-soft); font-size: .82rem; }

/* Founders slider -- one founder at a time. Unlike the other sliders
   on this site (Clients, India Travel Intelligence), this one doesn't
   physically slide a track sideways -- all slides are stacked in the
   same grid cell (grid-column/row:1 on every one) and crossfade via
   opacity, so clicking an arrow swaps the photo+text content in place
   instead of visibly moving the whole block. Black section background
   throughout. */
.founders { background: #060606; }
.founders .section-title { text-align: center; margin-inline: auto; color: #fff; }
.founder-slider-viewport { margin-top: 24px; }
.founder-slider-track { display: grid; }
.founder-slide {
  grid-column: 1; grid-row: 1; width: 100%;
  display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(28px,4vw,56px); align-items: start;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
.founder-slide.is-active { opacity: 1; pointer-events: auto; }

.founder-slide-left { display: flex; flex-direction: column; gap: 12px; }
/* -20% width / -30% height from the original 3/4 box. */
.founder-slide-photo { aspect-ratio: 6/7; max-width: 80%; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.founder-slide-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Arrows + thumbnail rail share one row now (nav on the left, thumbs
   pushed to the right), sitting right under the (smaller) photo. */
.founder-slide-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Same fixed box size on every thumb (independent of each photo's own
   dimensions, cropped to fit via object-fit:cover) -- guarantees all
   3 thumbnail cards are identically sized. */
.founder-slider-thumbs { display: flex; flex-direction: row; gap: 10px; }
.founder-thumb {
  width: 51px; height: 64px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
  padding: 0; border: 3px solid transparent; cursor: pointer; opacity: .55;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.founder-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-thumb:hover { opacity: .85; }
.founder-thumb.is-active { opacity: 1; border-color: #d4af37; }

.founder-slide-role { display: block; color: #d4af37; font-size: .84rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .6em; }
.founder-slide-text h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; margin: 0 0 .7em;
  background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.founder-slide-bio p { color: rgba(255,255,255,.65); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1em; }
.founder-slide-bio p:last-child { margin-bottom: 0; }

.founder-slider-nav { display: flex; gap: 12px; }
.founder-slider-arrow {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
  transition: border-color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
.founder-slider-arrow:hover { border-color: #d4af37; transform: scale(1.06); }
.founder-slider-arrow:disabled { opacity: .35; cursor: default; transform: none; }
/* Next button: solid white fill with a dark arrow, matching the reference. */
.founder-slider-arrow--solid { background: #fff; border-color: #fff; color: #0a0a0a; }
.founder-slider-arrow--solid:hover { background: #d4af37; border-color: #d4af37; color: #0a0a0a; }

.leadership .section-title { text-align: center; margin-inline: auto; }
/* Leadership -- card has a fixed overall shape (aspect-ratio), split
   exactly 50/50 by height between the photo and the black text panel
   via equal flex-grow -- a direct % of the card's actual height, not
   an aspect-ratio-relative-to-width guess (which is what made the
   last several tweaks so hard to land precisely). object-fit:cover
   fills the photo half with no gaps regardless of the source photo's
   own proportions. */
.leader-grid { list-style: none; margin: 20px auto 0; padding: 0; max-width: 80%; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.leader-card { display: flex; flex-direction: column; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; }
.leader-photo { flex: 1 1 0; min-height: 0; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; }
.leader-card-body {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 13px 20px; background: #000; text-align: center; overflow: hidden;
}
.leader-card-body strong { font-family: var(--font-display); font-weight: 500; display: block; font-size: 1rem; color: #fff; }
.leader-card-body span {
  display: block; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .5em;
  background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.leader-card-body p { color: rgba(255,255,255,.75); font-size: .86rem; line-height: 1.5; margin: 0; }

/* Where We Are -- city cards, address only where we have one. */
.office-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.office-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; }
.office-card strong { font-family: var(--font-display); font-weight: 500; display: block; font-size: .98rem; }
.office-tag { display: inline-block; color: var(--copper); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.office-card address { font-style: normal; display: block; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; margin-top: 10px; }

/* india market metrics */
.metric-grid { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; transition: transform .3s var(--ease), border-color .3s; }
.metric-card:hover { transform: translateY(-4px); border-color: var(--copper); }
.metric-number { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem,2vw,1.75rem); color: var(--ink); display: block; }
.metric-label { color: var(--ink-soft); font-size: .82rem; }
.source-note { color: var(--ink-soft); font-size: .8rem; }
.insight-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.insight-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.insight-card h3 { color: var(--copper); font-size: 1.05rem; }
.insight-card p { color: var(--ink-soft); font-size: .88rem; margin: 0; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(28px,5vw,60px); }
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea { font-family: var(--font-body); font-size: .92rem; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); transition: border-color .25s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--copper); }
.flash { background: #17261B; border: 1px solid #3B6B4A; color: #A9E0B8; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .9rem; }
.contact-info { background: var(--sand-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; height: max-content; }
.contact-info h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--copper); margin-bottom: .4em; }
.contact-email { font-family: var(--font-display); font-size: 1.05rem; display: inline-block; margin-bottom: 20px; }
.contact-office { padding-top: 18px; border-top: 1px solid var(--line); margin-top: 18px; }
.contact-office address { font-style: normal; color: var(--ink-soft); margin-bottom: 8px; }
.contact-phone { display: block; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--sand); color: var(--ink); padding: clamp(44px,6vw,72px) 0; text-align: center; }
.cta-band h2 { font-size: clamp(1.5rem,2.4vw,2.1rem); color: var(--ink); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--ink-soft); margin-bottom: 1.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
/* The page bookends in black: footer at the bottom, header at the top,
   both the same fixed near-black chrome tone -- deliberately not the
   page's own near-white, for the black+white duotone look. */
.site-footer {
  position: relative; background: var(--dark);
  color: rgba(255,255,255,.82); padding: clamp(26px,2.8vw,34px) 0 14px;
}
.footer-logo { height: 72px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
.footer-top { margin-bottom: clamp(10px,1.2vw,14px); }

/* newsletter subscribe box, with Enquiries & Communications stacked below it
   in the same (last) column of the link grid */
.footer-newsletter h4 { color: #fff; font-size: 1.02rem; margin: 0 0 .7em; font-family: var(--font-display); }
.footer-newsletter h4.footer-second-heading { margin-top: 1.8em; }
.footer-newsletter-form { display: flex; border: 1px solid rgba(255,255,255,.5); border-radius: 100px; padding: 4px; gap: 4px; transition: border-color .3s var(--ease); }
.footer-newsletter-form:focus-within { border-color: #fff; }
.footer-newsletter-form input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff;
  font-family: var(--font-body); font-size: .96rem; padding: 7px 6px 7px 12px;
}
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,.65); }
.footer-newsletter-form button {
  flex-shrink: 0; border: 0; border-radius: 100px; padding: 8px 18px; cursor: pointer;
  background: #fff; color: var(--dark); font-family: var(--font-display); font-weight: 500;
  font-size: .86rem; letter-spacing: .02em; text-transform: uppercase; transition: transform .25s var(--ease);
}
.footer-newsletter-form button:hover { transform: scale(1.04); }
.footer-newsletter-msg { margin: 8px 0 0; font-size: .86rem; color: #fff; }

/* Brand | Explore+Company (stacked) | Newsletter -- every column hugs its
   own content width; space-between spreads them out to use the full row
   width evenly (with a 24px floor so they never crowd on narrower rows). */
.footer-grid { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: start; column-gap: 24px; row-gap: 16px; }
/* Company sits to the right of Explore, side by side. */
.footer-nav-cols { display: flex; flex-direction: row; gap: 48px; margin-top: 19px; }
.footer-newsletter { width: min(280px, 100%); margin-top: 19px; }
.footer-col h4 { color: #fff; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .7em; font-family: var(--font-display); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { font-size: .96rem; opacity: .82; transition: opacity .25s; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-col a[href^="tel"], .footer-col a[href^="mailto"] { display: block; color: #fff !important; font-family: var(--font-display); font-size: .98rem; margin-bottom: 8px; opacity: .92; }
.footer-col a[href^="tel"]:hover, .footer-col a[href^="mailto"]:hover { opacity: 1; text-decoration: underline; }
.footer-office-label { display: block; font-size: .78rem; letter-spacing: .03em; color: rgba(255,255,255,.9); font-family: var(--font-display); font-weight: 500; margin: 14px 0 .3em; }
.footer-office { font-style: normal; display: block; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.7); margin: 0 0 22px; max-width: 34ch; }
.footer-social-icons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 30px; }
.footer-social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  color: #fff; opacity: .82; transition: opacity .25s, border-color .25s, transform .25s;
}
.footer-social-icons a svg { width: 26px; height: 26px; }
.footer-social-icons a:hover { opacity: 1; border-color: #fff; transform: translateY(-2px); }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; font-size: .86rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .03em; }
.footer-legal a { opacity: .85; color: inherit; }
.footer-legal a:hover { opacity: 1; }
.footer-legal i { margin: 0 6px; opacity: .4; font-style: normal; }

/* Accolades/Jury Panel used to be their own home-page sections/grids;
   now 3 images each (a small taster row), in the footer-brand column
   (replacing the old blurb text) instead. Light chip behind each
   logo/photo, same reasoning as .jury-box/.client-cell elsewhere --
   third-party artwork made for light backgrounds. Badges sized up 50%
   (52px -> 78px) from their original taster-row size. */
.footer-recognition { display: flex; flex-direction: column; gap: 14px; }
.footer-badge-label {
  display: block; font-family: var(--font-display); font-size: .86rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; margin-bottom: 8px;
}
.footer-badge-row { display: flex; gap: 8px; }
.footer-badge-row img {
  width: 157px; height: 103px; object-fit: contain;
  background: var(--logo-chip); border-radius: var(--radius);
  padding: 15px;
}

/* centred presence strip, sits between the link grid and the bottom bar */
.footer-cities {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding-top: 14px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: .84rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.65);
}
.footer-cities i { opacity: .4; font-style: normal; }
.footer-cities strong { color: #fff; font-family: var(--font-display); font-weight: 500; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
#to-top { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: var(--sand); font-size: 1.1rem; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .3s var(--ease); }
#to-top.show { opacity: 1; pointer-events: auto; transform: none; }
#to-top:hover { background: var(--copper-deep); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stack-item { opacity: 1; transform: none; transition: none; }
  .testi-track { animation: none !important; }
  .portfolio-track { animation: none !important; }
  .proven-card { animation: none !important; transform: translateY(var(--float-y)) !important; }
  .testi-stack { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .impact-grid { grid-template-columns: repeat(3, 1fr); }
  .impact-item { padding: 18px 12px; }
  /* 3-per-row here: rightmost column (3rd, 6th) doesn't need its own
     vertical divider, and the two rows need a horizontal one between
     them instead -- same middle-bold, edge-slim fade, just rotated. */
  .impact-item:nth-child(3n)::after { display: none; }
  .impact-item:nth-child(-n+3)::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-newsletter { justify-self: stretch; width: 100%; }
  .cs-grid { grid-template-columns: repeat(2,1fr); }
  .past-clients-grid { grid-template-columns: repeat(6,1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 72px; }
  /* JS (initTestiStack) switches to a 2-column x 2-row grid at this
     same breakpoint (4 cards total now, not 8) -- card size + container
     height here just need to match what it computes. 20% smaller than
     before (190x144 -> 152x115). */
  .testi-stack { height: 280px; }
  .testi-stack-card { width: 152px; height: 115px; padding: 11px; }
  .testi-stack-card blockquote { font-size: .68rem; line-height: 1.3; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 8px; }
  .testi-stack-foot { gap: 7px; }
  .testi-stack-avatar { width: 38px; height: 38px; }
  .testi-stack-info strong { font-size: .6rem; }
  .testi-stack-info span { font-size: .56rem; }
  .services-layout { grid-template-columns: 1fr; }
  .services-head { margin-bottom: clamp(20px,4vw,32px); }
  .services-stack { margin-top: 0; }
  .services-pair-text { padding: 11px 20px 23px; }
  .services-pair-text h3 { font-size: 1.17rem; }
  .services-pair-text:not(:first-child) { margin-top: -15px; }
  .intel-layout { grid-template-columns: 1fr; }
  .intel-head { max-width: none; margin-bottom: 20px; }
  .proven-grid { grid-template-columns: 1fr; padding-top: 0; }
  .proven-card { --float-y: 0px; animation: none; }
  .past-clients-grid { grid-template-columns: repeat(4,1fr); }
  .clients-jump { position: static; transform: none; margin: 10px auto 0; justify-content: center; }
  .tgtf-grid { grid-template-columns: 1fr; }
  .tgtf-media { aspect-ratio: 16/10; }
  .cs-grid { grid-template-columns: 1fr; }
  .values-grid, .insight-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .founder-slide { grid-template-columns: 1fr; }
  .founder-slide-photo { max-width: 220px; }
  .leader-grid { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: repeat(2,1fr); }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .pillar { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-item::after { display: none; }
  .impact-item:nth-child(odd)::after { display: block; }
  .impact-item::before { display: none; }
  .impact-item:nth-child(-n+4)::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  }
  .past-clients-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-newsletter { justify-self: start; width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
}