/* ============================================================
   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: Mulish (Medium)   Body font: Mulish (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);
  /* The one orange gradient used everywhere orange appears (icons, bars,
     buttons, headline numbers, accent text) -- same 3 stops as the KPI
     numbers' hover gradient (.impact-item:hover .impact-number), just
     re-angled per element where a fill needs to flow a specific direction.
     --orange-mid is the solid stand-in for spots a gradient can't render
     cleanly (borders, outlines). */
  --gradient-orange: linear-gradient(135deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  --orange-mid: #F0602A;

  /* Typography — one typeface (Mulish), used at two weights:
     Medium (500) for headings/labels/emphasis, Regular (400) for body copy. */
  --font-display: "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Mulish", "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; }
/* overflow-x: hidden on BOTH html and body -- mobile Safari scrolls the
   html/document element, not body, so body's overflow-x alone doesn't
   reliably stop the rubber-band swipe from revealing extra width past
   the intended content (the "white column on scroll right" symptom).
   Kept alongside the section-level overflow fixes above (root causes),
   not instead of them -- this is the safety net once those are true. */
html { scroll-behavior: smooth; overflow-x: hidden; }
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; }
.about-story-section { padding-top: clamp(28px, 3.6vw, 48px); background: var(--sand-2); }
.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 (with a matching negative margin to cancel it back out of
   the layout flow) on both top and bottom gives the mask extra room
   so tall ascenders/cap-height at the top and descenders (g, y, p, j,
   q) at the bottom don't get sliced off by overflow:hidden under the
   parent heading's tight line-height. */
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .15em 0 .55em; margin: -.15em 0 -.55em; }
.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); }
/* "Begin a Conversation" / "Request a Proposal" CTAs -- orange gradient
   (same as the KPI numbers' gradient) instead of the site-wide red,
   everywhere those labels appear. */
.btn--orange { background: var(--gradient-orange); }
.btn--orange:hover { background: linear-gradient(135deg, #F0602A 0%, #D14E1B 55%, #A8390F 100%); box-shadow: 0 16px 32px -6px rgba(240,96,42,.4); }
/* "Discover the India Opportunity" CTA -- dark grey gradient instead of
   the site-wide red, scoped to just this one button. */
.btn--dark-grey { background: linear-gradient(135deg, #4a4a4a 0%, #2b2b2b 55%, #0a0a0a 100%); }
.btn--dark-grey:hover { background: linear-gradient(135deg, #333 0%, #1a1a1a 55%, #000 100%); box-shadow: 0 16px 32px -6px rgba(0,0,0,.5); }
.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); }
/* Desktop button box is 50x36px (16px content + 10px padding top/bottom)
   -- height is under the 44px minimum tap target, mobile only per spec
   (desktop left untouched: same .nav-toggle is used at every screen
   size, so this is scoped to a max-width query rather than changing
   the shared rule above). */
@media (max-width: 768px) {
  .nav-toggle { padding: 14px 12px; }
}

/* 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: .85rem; 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-content { position: relative; z-index: 1; max-width: 820px; transform: translateY(-18vh); }
.hero-destination-logo { display: block; height: clamp(101px, 14vw, 146px); width: auto; margin-bottom: 18px; }
.hero-destination-eyebrow {
  display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: clamp(1.088rem, 2.048vw, 1.536rem); margin-bottom: .6em;
  color: #fff;
}
.hero-destination-content h1 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.12rem, 2.24vw, 1.76rem); line-height: 1.18; margin: 1.4em 0 1em;
}
.hero-destination-line { display: block; }
.hero-destination-line:first-child { white-space: nowrap; }
.hero-destination-line:last-child { font-style: italic; }
/* Mobile: the first line is 55 characters and forced onto one row
   (white-space: nowrap above) -- at the font-size clamp's own 0.95rem
   floor that needs ~420px, wider than a 375-414px viewport has to
   give it, so it was running off the right edge. Left as nowrap on
   tablet/desktop (that's the point of the rule there); only reverted
   to normal wrapping below 480px, where a single line genuinely can't
   fit without the text overflowing. */
@media (max-width: 480px) {
  .hero-destination-line:first-child { white-space: normal; }
}

/* ============================================================
   HERO VIDEO (placeholder) — sits right below the destination
   hero; swap the placeholder box for a real <video>/embed later.
   ============================================================ */
.hero-video-placeholder {
  min-height: 95vh; 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;
}
/* Photo variant -- once an image is dropped into
   static/images/home/hero-video/. Black fade over the left side (same
   gradient as the page-hero banners' .hero-watermark-banner::before) so
   the "Video coming soon" label reads clearly there, fading to fully
   transparent by the right edge so the photo itself stays clean and
   unobscured. */
.hero-video-placeholder--photo {
  position: relative; background-size: cover; background-position: center;
  justify-content: flex-start; text-align: left;
}
.hero-video-placeholder-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,0) 75%);
}
.hero-video-placeholder--photo .hero-video-placeholder-inner {
  position: relative; z-index: 2; align-items: flex-start;
  align-self: flex-start; margin: clamp(28px,5vw,64px) 0 0 clamp(24px,5vw,64px);
}


/* ============================================================
   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(32px,4.2vw,56px) 0; background: var(--dark); }
.impact-head { text-align: center; margin-bottom: clamp(12px,1.6vw,18px); }
.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,
.impact-title .mru-word-mask:last-child .mru-word {
  background: linear-gradient(135deg, #F8F8F8 0%, #D4D4D8 42%, #8C8C94 78%, #C0C0C8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
/* One flowing paragraph, block centred on the page, text justified
   within it (flush both edges) -- text-align-last: center so the final,
   shorter line centres instead of sitting left-aligned like a normal
   justified paragraph's last line would. */
.impact-intro {
  max-width: 78ch; margin: clamp(18px,2.4vw,26px) auto 0;
  text-align: justify; text-align-last: center;
}
/* Justified text reads badly on a narrow phone screen -- short lines
   have only a few words to stretch across, so the gaps between them
   balloon. Plain centred text instead below 640px. */
@media (max-width: 640px) {
  .impact-intro { text-align: center; }
}
.impact-intro p {
  color: rgba(255,255,255,.62); font-size: clamp(.96rem,1.1vw,1.05rem); line-height: 1.6;
  margin: 0;
}
.impact-box { padding: 0; }

/* ============================================================
   MASKED SLIDE-UP SCROLL REVEAL -- "Our Impact" + "Built Around Your
   Journey" sections only (see initMaskedSlideUpReveal() in main.js).
   Self-contained vanilla JS + CSS, independent of the GSAP-based
   .split-reveal/.reveal systems used everywhere else on the site.
   Words/cards start translateY(110%) inside a clipped mask and slide
   up with cubic-bezier(0.22,1,0.36,1) over 0.8s, staggered ~65ms
   apart, triggered once via IntersectionObserver. Only paint-time
   properties (clip-path/transform) are added to .mru-item -- no
   layout-defining CSS on .impact-item/.growth-pillar is touched, so
   their existing flex layout, padding and divider pseudo-elements are
   completely unaffected. */
.mru-word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mru-word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mru-word-mask.in .mru-word { transform: translateY(0); }

.mru-item {
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px);
  transition: clip-path .8s cubic-bezier(0.22, 1, 0.36, 1), transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mru-item.in { clip-path: inset(0% 0 0 0); transform: translateY(0); }

/* Variant for elements with content that intentionally overflows their own
   box (e.g. the services cards' hover popup, positioned via top:100%) --
   clip-path would clip that overflowing content permanently, even once
   fully "open" at inset(0), since the clip region always matches the
   element's own box regardless of inset values. Opacity + the shared
   transform give the same slide-up reveal without that side effect. */
.mru-item--no-clip {
  clip-path: none !important; opacity: 0;
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mru-item--no-clip.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mru-word { transform: none !important; transition: none !important; }
  .mru-item { clip-path: none !important; transform: none !important; transition: none !important; opacity: 1 !important; }
}
.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, #F8F8F8 0%, #D4D4D8 42%, #8C8C94 78%, #C0C0C8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  transition: background .35s var(--ease);
}
.impact-item:hover .impact-number {
  background: linear-gradient(135deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  -webkit-background-clip: text; background-clip: text;
}
.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: 0; }
.growth-head { max-width: 720px; margin: 0 auto clamp(16px,2vw,24px); }
.growth-title-link { display: inline-block; }
/* max-width: none -- the shared .section-title's 22ch cap is narrower
   than "Expertise That Drives Growth", wrapping it into 2 lines.
   nowrap only above 600px -- on a phone screen the full heading can't
   fit on one line without the text becoming illegibly small, so it
   wraps normally there instead. */
.growth-title-link h2 { max-width: none; }
@media (min-width: 600px) {
  .growth-title-link h2 { white-space: nowrap; }
}
.growth-title-link .arrow { color: var(--copper); }
/* "Your Growth, Our Expertise" heading -- black chrome gradient text-clip.
   Targets the .mru-word spans (see main.js initMaskedSlideUpReveal), since
   that split replaces the heading's direct text at runtime; the arrow span
   is untouched by the split and keeps its own copper color above. */
.growth-title-link h2.mru-words,
.growth-title-link h2.mru-words .mru-word {
  background: linear-gradient(135deg, #4a4a4a 0%, #050505 42%, #2b2b2b 78%, #000000 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}


/* 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 — bento grid (see index.html). The section's own container/
   width/padding/vertical spacing (.section, .container -- defined
   elsewhere) are UNCHANGED; only what sits inside that container is
   new, replacing the old two-column text+stack layout. All .bento-*
   selectors below are scoped to this section only.
   ============================================================ */
.services { background: var(--sand); position: relative; }
.bento-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; gap: 12px;
}
.bento-tile {
  position: relative; display: block;
  background: #141414; border: 1px solid #262624; border-radius: 14px;
  padding: clamp(18px,2vw,26px);
  transition: border-color .3s var(--ease), border-width .3s var(--ease), box-shadow .3s var(--ease);
}
.bento-intro { grid-column: span 2; grid-row: span 5; display: flex; flex-direction: column; }
.bento-intro:hover { border-color: var(--orange-mid); border-width: 2px; }
.bento-eyebrow {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.3px; margin: 0 0 16px;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.bento-headline {
  color: #fff; font-weight: 500; font-size: clamp(26px,2.6vw,42px);
  line-height: 1.2; letter-spacing: -.5px; margin: 0 0 16px;
}
.bento-lead { flex: 1; color: #8a8a86; line-height: 1.75; font-size: .95rem; margin: 0 0 24px; }
.bento-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient-orange); color: #1a0d02; border-radius: 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 12px 20px; transition: opacity .3s var(--ease);
}
.bento-cta:hover { opacity: .85; }

.bento-service {
  color: #fff; font-weight: 500; text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(12px,1.4vw,18px);
  min-height: clamp(80px,9.1vw,95px);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.bento-service h3 { margin: auto 0 0; font-size: .88rem; line-height: 1.3; transition: color .3s var(--ease); }
.bento-service:hover, .bento-service:focus-visible { border-color: var(--orange-mid); background: var(--gradient-orange); }
.bento-service:hover h3, .bento-service:focus-visible h3 { color: #1a0d02; }
.bento-service:hover .bento-icon, .bento-service:focus-visible .bento-icon { background-color: #1a0d02; background-image: none; }
.bento-service:hover .bento-arrow, .bento-service:focus-visible .bento-arrow {
  background: none; -webkit-text-fill-color: #1a0d02; color: #1a0d02;
}
.bento-service:focus-visible { outline: 2px solid var(--orange-mid); outline-offset: 2px; }
.bento-arrow {
  position: absolute; top: 14px; right: 14px; font-size: 1.15rem; line-height: 1;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  transition: -webkit-text-fill-color .3s var(--ease);
}
/* Icon SVGs are pre-coloured (a muted rust tone) -- masked instead of
   shown as <img>, so every icon renders in the exact same brand orange
   gradient regardless of its own original stroke colour. */
.bento-icon {
  display: block; width: 20px; height: 20px; margin-bottom: 8px; flex-shrink: 0;
  background: var(--gradient-orange);
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: background-color .3s var(--ease);
}
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }

/* Event Management + Creative Design & Production + Ad-hoc Projects,
   sharing one normal tile's 2-column footprint: top row is the first
   two side by side at half height each (their own nested grid row, not
   the outer grid's row track, so the outer grid's sizing is untouched),
   bottom row is Ad-hoc Projects spanning the full width underneath. */
.bento-split {
  grid-column: span 2;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px;
}
.bento-split .bento-tile { padding: clamp(12px,1.4vw,18px); }
.bento-split .bento-icon { width: 20px; height: 20px; margin-bottom: 8px; }
.bento-split .bento-service h3 { font-size: .88rem; }
.bento-split-full { grid-column: span 2; }

@media (prefers-reduced-motion: reduce) {
  .bento-service, .bento-cta, .bento-intro { transition: none; }
}
@media (max-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-intro { grid-column: span 2; grid-row: auto; }
  .bento-span-2, .bento-span-3 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-intro, .bento-span-2, .bento-span-3, .bento-service { grid-column: span 1; grid-row: auto; min-height: 78px; }
  .bento-split { grid-column: span 1; grid-template-columns: 1fr; }
  .bento-split .bento-tile { min-height: 78px; padding: clamp(18px,2vw,26px); }
  .bento-split .bento-icon { width: 26px; height: 26px; margin-bottom: 14px; }
  .bento-split .bento-service h3 { font-size: 1rem; }
}


/* ============================================================
   PROVEN IMPACT — case teasers
   ============================================================ */
.proven { background: #060606; }
.proven-head { max-width: 780px; margin-inline: auto; margin-top: -14px; margin-bottom: 4px; }
.proven-head .section-title { color: #fff; font-size: clamp(1.68rem, 3.12vw, 2.76rem); }
.proven-head .section-lead { color: rgba(255,255,255,.62); }

/* "Case Studies" heading. Must target the word-reveal spans (not the h2
   itself), since .split-reveal replaces the heading's direct text with
   nested .word-mask > .word-reveal spans at runtime. */
.pi-headline-glow .word-mask .word-reveal {
  font-family: var(--font-display); font-weight: 500; color: #fff;
}
/* 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: 56px; max-width: 860px; margin-inline: auto; padding-top: 64px; 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(253,186,140,.9) 0%, rgba(240,96,42,.9) 55%, rgba(209,78,27,.9) 100%);
  color: #fff; 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 — continuous right-to-left flow, white bg
   ============================================================ */
.testimonials { padding-top: clamp(32px,4vw,48px); padding-bottom: clamp(32px,4vw,48px); background: #fff; }
.testi-heading { position: relative; padding-bottom: 4px; margin-bottom: clamp(20px,3vw,32px); color: var(--ink); }
.testi-underline { display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--gradient-brand); margin: 9px auto 0; }

/* Continuous right-to-left flow (content tripled in the template so the
   loop -- translateX -33.333% -- repeats seamlessly), same testiFlow
   technique as the Current Portfolio row further down the page. */
.testi-marquee {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.testi-track { display: flex; width: max-content; animation: testiFlow 42s linear infinite; }
.testi-marquee:hover .testi-track { animation-play-state: paused; }
@keyframes testiFlow { to { transform: translateX(-33.3333%); } }

/* Card keeps its cut-corner silhouette + diagonal "torn" accent line, now
   as a flex item in the flowing row instead of an absolute-positioned
   pile piece. All cards share one uniform black-gradient/white-text look. */
/* Curved-corner card, widened 20% horizontally (364px -> 437px), height
   unchanged -- no longer a perfect square, now a rounded rectangle. */
.testi-stack-card {
  position: relative;
  flex: 0 0 auto; width: 437px; height: 364px; margin: 0 8px;
  padding: 26px 31px; display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2B2B2B 0%, #121212 45%, #000000 78%, #1A1A1A 100%);
  color: #fff;
}
/* Full multi-paragraph testimonials no longer fit in the card's fixed
   footprint -- scroll internally (own scrollbar) instead of clipping or
   growing the card. white-space: pre-line keeps the \n\n paragraph
   breaks in the content instead of collapsing them like normal HTML. */
.testi-stack-card blockquote {
  margin: 0 0 21px; font-size: .74rem; line-height: 1.55; font-weight: 500;
  flex: 1; overflow-y: auto; white-space: pre-line; padding-right: 6px;
}
.testi-stack-card blockquote::-webkit-scrollbar { width: 5px; }
.testi-stack-card blockquote::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
/* Avatar + name/role sit side by side in one row at the bottom of the card. */
.testi-stack-foot { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.testi-stack-avatar {
  flex: 0 0 auto; width: 73px; height: 73px; background: var(--dark);
  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: .78rem; font-style: normal; font-weight: 500; }
.testi-stack-info span { font-size: .74rem; }

/* ============================================================
   CLIENTS — logo grid
   ============================================================ */
.clients .section-title { margin-top: 14px; 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 { padding-top: 0; background: #fff; }
.clients-slider { position: relative; overflow: hidden; }
.clients-track { display: flex; width: 100%; align-items: flex-start; }
.clients-slide { width: 100%; flex-shrink: 0; min-width: 0; }
.clients-arrow {
  position: absolute; top: 6px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--dark); color: #fff; 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), background-color .25s var(--ease);
}
.clients-arrow:hover { background: var(--copper-deep); transform: scale(1.08); }
.clients-arrow--next { right: 0; }
/* Current Portfolio -- one bordered-cell grid per category row (Destination,
   Hospitality, DMCs/Cruise/Attraction, etc), same look as the Past Clients
   flat grid below it. The category label spans the full grid width as its
   own row above that category's logos. */
.portfolio { display: flex; flex-direction: column; gap: clamp(24px,3vw,36px); margin-bottom: clamp(32px,4vw,52px); }
.portfolio-row { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.portfolio-label {
  grid-column: 1 / -1; display: block; font-family: var(--font-display); font-weight: 500;
  font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--copper);
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  text-align: center;
  /* .portfolio-row supplies the top/left border for the whole row (the
     logo cells below rely on it for their own top-left edge), but that
     also visually touches the label above them. Pulling the label
     over that border by 1px, with a matching background, paints over
     it right where the label sits -- so the label reads borderless on
     top/sides while the cell grid below keeps its edges intact. */
  margin: -1px -1px 0;
  background: var(--sand);
}
/* 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(14px,2vw,22px);
  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 45.6s 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;
  transition: transform .35s var(--ease);
}
.client-cell:hover { z-index: 2; transform: scale(1.05); box-shadow: 0 16px 34px -18px rgba(var(--ink-rgb),.28); }

/* ============================================================
   TGTF
   ============================================================ */
.tgtf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
/* The whole block is a link out to gypsytravelfestival.com -- subtle
   feedback on hover so it reads as clickable, not just decorative. */
.tgtf-link { transition: opacity .3s var(--ease); }
.tgtf-link:hover { opacity: .85; }
.tgtf-link:hover .tgtf-media img { transform: scale(1.03); }
.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; transition: transform .4s var(--ease); }
.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; min-height: 95vh; display: flex; align-items: center; justify-content: center; }
/* Text dedicated to the left column, vertically centred against the
   card slider on the right -- not stacked above it anymore. */
.intel-row {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.intel-text { text-align: left; transform: translateY(-30px); }
.intel-top-heading {
  text-align: left; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.68rem, 3.12vw, 2.76rem); letter-spacing: -.01em; line-height: 1.15;
  margin: 0 0 14px; color: #fff;
}
.intel-top-lead {
  text-align: left; margin: 0;
  color: rgba(255,255,255,.62); font-size: clamp(.98rem,1.1vw,1.1rem); line-height: 1.6;
}
.intel-layout {
  display: grid; grid-template-columns: 1fr;
  align-items: start;
}
@media (max-width: 900px) {
  .intel-row { grid-template-columns: 1fr; }
  .intel-text { transform: none; margin-bottom: 24px; }
}
/* Mobile: cards must be full-width, one visible at a time (per spec).
   Previously the two 44px arrow buttons sat beside the card as flex
   siblings, so .intel-viewport could only ever be
   "100% minus the arrows' own width" -- never truly full-width, and on
   a 375px phone that left barely 220px for the actual chart. Arrows
   now float ON TOP of the card instead (absolutely positioned, same
   44px tap target the spec requires), so the card itself can be 100%.
   The slider's position math (main.js, updateIntelSlider) is pure
   CSS-percentage transforms, not pixel-based, so it already
   recalculates correctly on resize/orientation change without any JS
   changes needed here -- verified by reading it, not assumed.
   Threshold matches .intel-row's own 900px breakpoint (where the
   layout stacks to 1 column) -- was 640px, leaving a 641-899px gap
   where the old flex-end + 80.65% + inline-arrows layout still ran,
   tight enough at some widths in that range to nearly (or actually)
   overflow its column. */
@media (max-width: 900px) {
  .intel-slider { position: relative; justify-content: center; gap: 0; transform: translateY(-12px); }
  .intel-viewport { width: 100%; max-width: 100%; }
  .intel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.94); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35);
  }
  .intel-arrow--prev { left: 4px; }
  .intel-arrow--next { right: 4px; }
}

/* 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. */
/* Pulled back from -350px -- pushed that far left, the slider was
   moving far enough off its column that card 2's bars stopped
   triggering their reveal-in animation (never became visible). */
/* Capped at -300px -- -350px is where card 2's bars stopped showing
   earlier, so staying comfortably under that instead of the full 4cm
   (~-361px) that was asked for. */
/* Horizontal shift removed -- it was a fixed -120px transform that
   doesn't scale with window width. At wide viewports there was enough
   slack to absorb it, but at ~1280px it pushed the card's right edge
   (e.g. .gbar-card) past window.innerWidth, clipping real content
   (verified via getBoundingClientRect). Vertical -28px kept (unrelated
   "bring card up" adjustment, not part of this bug) -- only the
   horizontal component is gone. */
/* min-width: 0 -- .intel-slider is the direct grid item in .intel-layout's
   1fr column. Grid items default to min-width: auto, which means the
   item won't shrink below its content's intrinsic minimum width. Since
   .intel-track holds all 3 slides side by side (3x viewport width), that
   huge intrinsic width was bubbling up through .intel-slider and
   blowing out the 1fr track to ~1151px instead of the ~845px the
   layout actually calls for -- classic CSS grid blowout. min-width: 0
   overrides the default so the track respects 1fr again. */
.intel-slider { display: flex; align-items: center; gap: 14px; justify-content: flex-end; transform: translateY(-32px); min-width: 0; }
.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% -> 72% -> 79.2% -> 63.4% -> 69.7% -> 55.8% ->
   67% -> 73.7% -> 81.07% -> widened further to 94% so card 1's
   headline text (previously truncated) has enough room to show in
   full without needing as many wrapped lines. All 3 cards sit inside
   equal slides here (see .intel-slide), so this resizes all three
   together. */
.intel-viewport { flex: 0 1 auto; width: 80.65%; max-width: 80.65%; 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.
   align-items: flex-start -- WITHOUT this, flexbox's default
   align-items: stretch silently forces every .intel-slide to match
   whichever card's content is tallest, no matter how isolated each
   card's own CSS is (this was the actual cause of one card's content
   changing another's rendered size). With flex-start, each slide keeps
   its own natural height, decoupled from its siblings. */
/* min-width: 0 -- safety net so this flex item's own intrinsic content
   width (3x the viewport, holding all slides side by side) can't
   cascade its min-width upward through its ancestors either. */
.intel-track { display: flex; align-items: flex-start; width: calc(var(--count, 1) * 100%); transition: transform .5s var(--ease); min-width: 0; }
.intel-slide {
  width: calc(100% / var(--count, 1)); flex-shrink: 0; min-width: 0;
  overflow: hidden;
}
/* ============================================================
   CARD 3 -- PURPOSE-OF-VISIT PIE CHART (see templates/partials/
   card3_pie.html). ALL selectors below are prefixed .card3- and used
   ONLY by card 3 -- none of them are shared with, extend, or inherit
   from card 1's .gbar-* or card 2's .dest-* rules. Container sizing
   (padding/border/radius/background/margin-top on .card3-slide/
   .card3-card) is copied verbatim from .gbar-slide/.gbar-card so all
   three cards render at the exact same size -- as independent,
   duplicated values, not a shared rule, so a future edit to one will
   never resize another. No chart image -- drawn with a CSS
   conic-gradient using the same colours as the source chart image
   (orange/teal/gold/grey), plus a glossy radial-highlight layer on top
   for the same gradient/3D sheen the original chart image has.
   ============================================================ */
.card3-slide { overflow: hidden; display: flex; flex-direction: column; margin-top: 20px; }
.card3-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #121110 0%, #0a0908 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px) clamp(16px,1.8vw,20px);
}
.card3-title {
  position: relative; z-index: 1; font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: .95rem; color: #f4f0ea; text-align: center; margin: 0 0 clamp(20px,2.6vw,30px); letter-spacing: -.005em;
}
.card3-body { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(14px,2vw,22px); }
/* width/height match .dest-track's clamp exactly (Card 2's bar-track
   size) so card 3's chart area occupies the same vertical space as
   card 2's, making the two cards' total rendered height match too. */
/* Light centre -> dark edge, the SAME radial shading over every slice
   regardless of its own colour: lightens toward the middle, true
   colour at mid-radius, darkens toward the rim. Layered on top of the
   flat per-slice conic-gradient (--card3-gradient, one solid colour
   per wedge -- the radial layer is what actually creates the
   gradient). */
.card3-chart {
  flex: 0 0 auto; width: clamp(110px,15vw,170px); height: clamp(110px,15vw,170px); border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%),
    var(--card3-gradient);
  position: relative;
  box-shadow: 0 0 18px rgba(0,0,0,.4);
  transform: scale(0); opacity: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .5s var(--ease);
}
.card3-card.in .card3-chart { transform: scale(1); opacity: 1; }
/* Each slice's own % printed on the wedge, at its angular midpoint --
   position (left/top) is precomputed per-slice in content/site_content.py
   (_pie_label_pos) and passed in inline via style="". */
.card3-slice-label {
  position: absolute; transform: translate(-50%,-50%);
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: clamp(.62rem,.9vw,.78rem);
  color: #17140f; text-shadow: 0 1px 1px rgba(255,255,255,.3);
  pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--d, 0ms) + 550ms);
}
.card3-card.in .card3-slice-label { opacity: 1; }
.card3-legend { list-style: none; margin: 0 0 0 clamp(40px,7vw,84px); padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.card3-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-family: "DM Sans", var(--font-body); font-size: .74rem; color: rgba(255,255,255,.72);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 380ms);
}
.card3-card.in .card3-legend-item { opacity: 1; transform: none; }
.card3-swatch { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; }
.card3-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card3-foot {
  position: relative; z-index: 1; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; gap: 12px;
  font-family: "DM Sans", var(--font-body); font-size: .68rem; color: rgba(255,255,255,.42);
}
.card3-foot .card3-source { max-width: 60%; }
.card3-headline { margin-top: clamp(8px,1.2vw,12px); }
.card3-headline-number {
  display: block; font-family: "Manrope", var(--font-display); font-weight: 800;
  font-size: clamp(1rem,1.8vw,1.4rem); line-height: 1; margin-bottom: .2em;
  background: linear-gradient(135deg, #F2921C 0%, #3B9CB0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.card3-headline-title { font-family: "Manrope", var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.3; color: #f4f0ea; margin-bottom: .35em; }
/* max-width: none -- same fix as .gbar-headline-desc (card 1): the old
   52ch cap was narrower than the card's actual width, wrapping this
   into more lines than the available space needed. */
.card3-headline-desc { font-family: "DM Sans", var(--font-body); font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.6); max-width: none; margin: 0; }
.card3-headline-desc strong {
  font-weight: 700;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .card3-chart { transition: none; transform: scale(1); opacity: 1; }
  .card3-legend-item { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .card3-body { gap: 12px; }
  .card3-legend-item { font-size: .68rem; }
}
/* contain, not cover -- kept as the fallback look for any card 3-style
   entry that doesn't provide "card3_chart". */
.card3-media { aspect-ratio: 16/9.6; overflow: hidden; background: #000; border-radius: 12px; }
.card3-media img { width: 100%; height: 100%; object-fit: contain; }
.card3-text { position: relative; z-index: 1; margin-top: clamp(16px,2vw,22px); }
.card3-stat {
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: clamp(1.05rem,1.5vw,1.3rem);
  display: block; margin-bottom: .25em;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.card3-heading { font-family: "Manrope", var(--font-display); font-weight: 700; font-size: 1.05rem; color: #f4f0ea; margin: 0 0 .25em; }
.card3-detail {
  font-family: "DM Sans", var(--font-body); font-size: .92rem; line-height: 1.4; color: rgba(255,255,255,.6); 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); }

/* ============================================================
   CARD 1 -- GRADIENT BAR STAT CARD (see templates/partials/
   gradient_bar_card.html). ALL selectors below are prefixed .gbar- and
   used ONLY by card 1. Card 2 (below, .dest-*) does not reference a
   single one of these rules -- the two cards are fully independent, so
   editing one can never move or resize the other.
   ============================================================ */
.gbar-slide { overflow: hidden; display: flex; flex-direction: column; margin-top: 20px; }
.gbar-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #121110 0%, #0a0908 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px) clamp(16px,1.8vw,20px);
}
.gbar-title {
  position: relative; z-index: 1; font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: .95rem; color: #f4f0ea; text-align: center; letter-spacing: -.005em;
  margin: -8px 0 clamp(20px,2.6vw,30px);
}
.gbar-chart { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(8px,1.4vw,16px); }
.gbar-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
/* Positioned relative to the TRACK (not stacked above it), bottom:
   calc(var(--pct) + 1cm) -- so it follows each bar's own actual top
   edge and sits a fixed ~1cm above it, instead of every label sitting
   in one flat row at the top of the (fixed-height) track regardless of
   how tall that particular bar actually is. */
.gbar-value {
  position: absolute; left: 50%; bottom: calc(var(--pct) + 4px);
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: clamp(.7rem,1vw,.82rem);
  white-space: nowrap;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateX(-50%) translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 480ms);
}
.gbar-card.in .gbar-value { transform: translateX(-50%) translateY(0); }
.gbar-track { position: relative; width: 100%; max-width: 34px; height: clamp(110px,15vw,170px); display: flex; align-items: flex-end; }
.gbar-bar {
  position: relative; width: 100%; height: 0;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  box-shadow: 0 0 10px rgba(242,121,43,.28);
  transition: height .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}
.gbar-bar::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 100%);
  border-radius: 9px 9px 0 0;
}
.gbar-year { margin-top: 10px; font-family: "DM Sans", var(--font-body); font-size: .72rem; color: rgba(255,255,255,.48); letter-spacing: .02em; }
.gbar-card.in .gbar-bar { height: var(--pct); }
.gbar-card.in .gbar-value { opacity: 1; }
.gbar-foot {
  position: relative; z-index: 1; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; gap: 12px;
  font-family: "DM Sans", var(--font-body); font-size: .68rem; color: rgba(255,255,255,.42);
}
.gbar-foot .gbar-source { max-width: 60%; }
.gbar-headline { margin-top: clamp(8px,1.2vw,12px); }
.gbar-headline-number {
  display: block; font-family: "Manrope", var(--font-display); font-weight: 800;
  font-size: clamp(1rem,1.8vw,1.4rem); line-height: 1; margin-bottom: .2em;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
/* Truncation removed -- it was hiding real data (e.g. the "4.5x rise"
   figure). Full text now, wrapping naturally -- .intel-viewport was
   widened below to give it more room to do that without needing as
   many lines. */
.gbar-headline-title {
  font-family: "Manrope", var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.3;
  color: #f4f0ea; margin-bottom: .35em;
}
/* max-width: none -- the old 52ch cap was narrower than the card's
   actual width, wrapping this into more lines than the available space
   needed. Now it uses the full card width, same as .gbar-card above. */
.gbar-headline-desc {
  font-family: "DM Sans", var(--font-body); font-size: .8rem; line-height: 1.5;
  color: rgba(255,255,255,.6); max-width: none; margin: 0;
}
.gbar-headline-desc strong {
  font-weight: 700;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .gbar-bar { transition: none; height: var(--pct); }
  .gbar-value { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .gbar-chart { gap: 6px; }
  .gbar-track { height: 100px; max-width: 26px; }
  .gbar-value { font-size: .62rem; }
}

/* ============================================================
   CARD 2 -- DESTINATIONS CARD (see templates/partials/dest_card.html).
   ALL selectors below are prefixed .dest- and used ONLY by card 2 --
   none of them are shared with, extend, or inherit from card 1's
   .gbar-* rules above. Container sizing (padding/border/radius/
   background/margin-top on .dest-slide and .dest-card) is copied
   verbatim from .gbar-slide/.gbar-card so both cards render at the
   exact same size -- as independent, duplicated values, not a shared
   rule, so a future edit to one will never resize the other.
   ============================================================ */
.dest-slide { overflow: hidden; display: flex; flex-direction: column; margin-top: 20px; }
.dest-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #121110 0%, #0a0908 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px) clamp(16px,1.8vw,20px);
}
.dest-title {
  position: relative; z-index: 1; font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: .95rem; color: #f4f0ea; margin: 0 0 clamp(20px,2.6vw,30px); letter-spacing: -.005em;
}
.dest-chart { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(1.2px,.3vw,3px); }
.dest-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
/* Positioned relative to the orange TRACK (not stacked above the whole
   pair), bottom: calc(var(--pct) + 4px) -- so it follows the orange
   bar's own actual top edge and sits close above it, instead of every
   label sitting in one flat row at the top of the fixed-height track. */
.dest-value {
  position: absolute; left: 50%; bottom: calc(var(--pct) + 4px);
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: clamp(.5rem,.8vw,.6rem);
  white-space: nowrap;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateX(-50%) translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 480ms);
}
/* Left-aligned above its own bar (not centred like the orange one) --
   left: 0, no translateX. */
.dest-value--alt { left: 0; color: #d4d4d8; transform: translateY(8px); }
.dest-pair { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; }
.dest-track { position: relative; width: 100%; max-width: 22px; height: clamp(110px,15vw,170px); display: flex; align-items: flex-end; }
.dest-bar {
  position: relative; width: 100%; height: 0;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  box-shadow: 0 0 10px rgba(242,121,43,.28);
  transition: height .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}
.dest-bar--alt {
  background: linear-gradient(180deg, #F8F8F8 0%, #D4D4D8 42%, #8C8C94 78%, #C0C0C8 100%);
  box-shadow: 0 0 8px rgba(255,255,255,.22);
  transition-delay: calc(var(--d, 0ms) + 60ms);
}
.dest-bar::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 100%);
  border-radius: 9px 9px 0 0;
}
.dest-year { margin-top: 6px; font-family: "DM Sans", var(--font-body); font-size: .48rem; color: rgba(255,255,255,.48); letter-spacing: 0; }
.dest-card.in .dest-bar { height: var(--pct); }
.dest-card.in .dest-value { opacity: 1; transform: translateX(-50%) translateY(0); }
.dest-card.in .dest-value--alt { transform: translateY(0); }
.dest-foot {
  position: relative; z-index: 1; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; gap: 12px;
  font-family: "DM Sans", var(--font-body); font-size: .68rem; color: rgba(255,255,255,.42);
}
.dest-foot .dest-source { max-width: 60%; }
.dest-headline { margin-top: clamp(8px,1.2vw,12px); }
.dest-headline-number {
  display: block; font-family: "Manrope", var(--font-display); font-weight: 800;
  font-size: clamp(1rem,1.8vw,1.4rem); line-height: 1; margin-bottom: .2em;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.dest-headline-title { font-family: "Manrope", var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.3; color: #f4f0ea; margin-bottom: .35em; }
/* max-width: none -- same fix as .gbar-headline-desc (card 1): the old
   52ch cap was narrower than the card's actual width, wrapping this
   into more lines than the available space needed. */
.dest-headline-desc { font-family: "DM Sans", var(--font-body); font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.6); max-width: none; margin: 0; }
.dest-headline-desc strong {
  font-weight: 700;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .dest-bar { transition: none; height: var(--pct); }
  .dest-value { transition: none; opacity: 1; transform: translateX(-50%); }
  .dest-value--alt { transform: none; }
}
@media (max-width: 720px) {
  .dest-chart { gap: 1px; }
  .dest-track { max-width: 14px; }
}

/* ============================================================
   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-heading-link { transition: color .2s var(--ease); }
.social-heading-link:hover { color: var(--copper); }
.social-live p { color: var(--ink-soft); margin-bottom: 0; }

/* latest-3 Instagram / LinkedIn post rows */
.social-row { margin-top: clamp(10px,1.4vw,16px); text-align: center; }
.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(4, 1fr); gap: 14px; }
.social-post { display: block; aspect-ratio: 16/17.28; 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); }
/* Instagram Reels-style camera glyph, top-right corner of every tile. */
.social-post-reel {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.page-hero { padding: calc(var(--header-h) + 48px) 0 44px; min-height: 262px; 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; }

/* Fixed-height photo banner variant -- used once a real photo is dropped
   into static/images/case-studies/hero/ (see _load_case_studies_hero_image
   in content/site_content.py). Height is locked at 480px so the photo spec
   handed to a photographer/team never has to be re-guessed. */
/* FAQ — native <details>/<summary> accordion, no JS needed. */
.faq-list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 24px; background: var(--surface); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(.98rem, 1.4vw, 1.1rem); color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--ink); transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item p { margin: 0 0 22px; color: var(--ink-soft); line-height: 1.65; max-width: 62ch; }

/* About page hero: a plain grey banner -- the photo is only visible
   INSIDE the big outlined "About Us" watermark letters (background-clip:
   text with the photo as that background, not a full-bleed image
   behind everything), like light shining through a stencil. Real
   heading sits on top in normal flow, back to dark text since the
   banner itself is light grey again, not a photo. */
/* Shared "giant page-name lettering with the banner photo clipped
   through it" hero -- used on every page that has its own hero photo
   (About Us, Case Studies, Our Clients, Our Expertise, News, ...).
   Falls back to the plain eyebrow/h1/subtitle hero (see .page-hero
   above) when a page has no photo yet. */
.hero-watermark-banner {
  position: relative; overflow: hidden; display: flex;
  padding-top: calc(var(--header-h) + 24px); padding-bottom: 20px;
  background-size: cover; background-position: center;
}
.hero-watermark-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.1) 100%);
}
.hero-watermark {
  /* Lives INSIDE .container (see the templates), not as a sibling
     positioned off the section -- that way `left:0` lines its start up
     with the subtitle's own left edge exactly, on every screen size,
     since both are now positioned by the same .container system instead
     of the watermark using a separate fixed-pixel offset that only
     matched the subtitle's position at one particular viewport width.
     Vertically centered in the BANNER (not just its own small container
     box) because .hero-watermark-banner is `display:flex`, which
     stretches .container to the section's full height -- so "top:50%"
     here is 50% of the whole banner, not 50% of the subtitle's own
     content height. */
  position: absolute; left: 0; top: 27%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 7.8vw, 6.2rem); line-height: 1; letter-spacing: -.02em;
  /* Photo shown crisp/undarkened INSIDE the letters -- its own
     background-clip:text fill, painted above the ::before gradient
     (z-index 1), so the gradient never dims what's visible through the
     text even though it still darkens everything around it. */
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 2;
}
/* The clamp's 2.5rem floor is a fixed size, not fluid -- "Our Expertise"
   (the longest watermark word site-wide) at 2.5rem/40px needs ~340px,
   right at the edge of what's left in a 375px viewport once the
   .container's own side padding is subtracted. Lowered further only
   below 480px, where that word is tightest; unaffected at 768px+, where
   there's already enough width regardless of which floor applies. */
@media (max-width: 480px) {
  .hero-watermark { font-size: clamp(1.9rem, 7.8vw, 6.2rem); }
}
.hero-watermark-banner .container { position: relative; z-index: 2; }
.hero-watermark-banner .page-hero-sub { margin-top: clamp(77px, 8.8vw, 121px); color: #f2f2f2; }
.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 hero -- split layout: text left, image placeholder right
   (Awwwards-style editorial hero). Falls back to a stacked single column
   on narrow screens, see the responsive block further down. */
.expertise-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,4vw,56px); align-items: center; }
.page-hero-intro { max-width: 68ch; margin-top: .8em; }
.page-hero-intro p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; margin: 0 0 .8em; }
.page-hero-intro p:last-child { margin-bottom: 0; }
.page-hero-tagline {
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  letter-spacing: .02em; color: var(--copper); margin-top: 1em;
}
/* Diagonal-stripe placeholder box -- swap for a real <img> once a photo
   is dropped into static/images/expertise/ (see _READ-ME-FIRST.txt). */
.expertise-hero-visual {
  aspect-ratio: 4/5; border-radius: var(--radius-lg); border: 1px solid var(--line);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(var(--ink-rgb),.06) 0 2px, transparent 2px 14px),
    var(--sand-2);
  display: flex; align-items: center; justify-content: center;
}
.expertise-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expertise-hero-visual span {
  font-family: var(--font-display); font-weight: 500; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: .6em 1.2em;
}

/* expertise pillars -- open editorial rows (no boxed cards): a small
   photo (medium/small, not a big hero image -- one per service) with a
   numbered badge on its corner, a divider between items, title lighting
   up in copper on hover. */
.expertise-pillars-section .section-title { max-width: none; margin-bottom: clamp(8px,1.5vw,16px); }
.pillars { display: flex; flex-direction: column; margin-top: 12px; }
.pillar {
  position: relative; display: grid; grid-template-columns: clamp(120px,14vw,168px) 1fr; gap: clamp(18px,3vw,32px);
  padding: clamp(24px,3.4vw,36px) 0; border-top: 1px solid var(--line); align-items: start;
  transition: padding-left .35s var(--ease);
}
.pillars .pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar:hover { padding-left: 10px; }
/* Medium/small photo slot -- a diagonal-stripe placeholder shows through
   until an image is dropped into its static/images/expertise/<NN-.../
   folder (see _READ-ME-FIRST.txt there), same convention as the hero
   visual above. */
.pillar-media {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(var(--ink-rgb),.06) 0 2px, transparent 2px 14px),
    var(--sand-2);
}
.pillar-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pillar-num {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dark); color: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: .74rem;
}
.pillar-body h2 { font-size: clamp(1.15rem,1.9vw,1.4rem); margin-bottom: .4em; transition: color .35s var(--ease); }
.pillar:hover .pillar-body h2 { color: var(--copper); }
.pillar-body p { color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }
.pillar-list-label {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--copper); margin: 1em 0 .5em;
}
.pillar-points { margin: 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: 28px; }
.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; }

/* detailed case studies (Mandate / Challenge / Approach / Impact) --
   editorial-style cards: media alternates left/right per row for visual
   rhythm across 9 near-identical entries, a faint index number anchors
   each one, gold is used sparingly (index, meta dot, impact accents) to
   match the rest of the site's restrained black/white-plus-gold system. */
.cs-studies { display: flex; flex-direction: column; gap: clamp(32px,4.5vw,64px); }
.cs-study {
  display: grid; grid-template-columns: 38% 1fr; gap: clamp(24px,3.4vw,48px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 1px 0 rgba(var(--ink-rgb),.03);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cs-study:hover { box-shadow: 0 30px 60px -30px rgba(var(--ink-rgb),.28); transform: translateY(-3px); }
/* Alternating rows: the media/body divs are swapped in the actual HTML
   for flipped rows (see case_studies.html), not just re-ordered with CSS
   -- so which side the photo lands on is guaranteed by DOM order, not a
   grid `order` property riding on top of it. */
.cs-study--flip { grid-template-columns: 1fr 38%; }
.cs-study--flip .cs-study-body { padding: clamp(24px,3vw,40px) 0 clamp(16px,2vw,22px) clamp(24px,3vw,40px); }

.cs-study-media { position: relative; aspect-ratio: 4/3; overflow: hidden; clip-path: inset(0% 0% 0% 0%); }
/* Base scale + hover/parallax motion are both driven by GSAP (see
   main.js) so they compose into one transform instead of a CSS :hover
   scale fighting a JS-driven parallax translate on the same element. The
   1.15 base scale leaves crop margin for the parallax pan and the hover
   zoom to move within without ever exposing an edge. */
.cs-study-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; transform: scale(1.15); }
.cs-study-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.cs-study-index {
  position: absolute; left: 18px; bottom: 14px; z-index: 1;
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -.02em;
  color: #fff; opacity: .9;
}

.cs-study-body { padding: clamp(24px,3vw,40px) clamp(24px,3vw,40px) clamp(16px,2vw,22px) 0; }
.cs-study-meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 10px;
}
.cs-study-meta-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%); }
.cs-study-body h3 { font-size: clamp(1.3rem,2.1vw,1.65rem); margin: 0 0 20px; }
.cs-study-block h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 10px; font-weight: 600; }
.cs-study-block p { margin: 0; font-size: .93rem; line-height: 1.55; }
.cs-study-mandate { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cs-study-mandate p { font-size: 1rem; line-height: 1.5; }
.cs-study-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,36px); margin-bottom: 24px; position: relative; }
.cs-study-grid::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%; width: 1px; background: var(--line); }
.cs-study-block ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cs-study-block ul li { font-size: .9rem; line-height: 1.4; padding-left: 15px; position: relative; }
.cs-study-block ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
.cs-study-approach li { display: flex; flex-direction: column; gap: 2px; }
.cs-study-approach li strong { font-size: .9rem; font-weight: 600; }
.cs-study-approach li span { font-size: .84rem; color: var(--ink-soft); padding-left: 0; line-height: 1.4; }
/* Full-width black bar across the whole card (not just the text column)
   -- spans both grid tracks and sits flush against the card's own edges,
   picking up its rounded bottom corners for free from .cs-study's own
   overflow:hidden rather than rounding itself. */
.cs-study-impact {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  margin-top: -38px;
  background: linear-gradient(120deg, #1e1e1e 0%, #0a0a0a 100%);
  padding: clamp(16px,2vw,20px) clamp(24px,3.4vw,48px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(24px,3vw,40px);
}
.cs-study-impact::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #F6E7B4 0%, #D4AF37 42%, #9C7A24 78%, #C9A227 100%);
}
.cs-study-impact h4 { color: #cfcfcf; margin: 0; flex: 0 0 auto; }
.cs-study-impact ul { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; gap: 10px clamp(20px,2.6vw,32px); }
.cs-study-impact ul li {
  font-weight: 600; font-size: .92rem;
  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;
}
.cs-study-impact ul li::before { background: #D4AF37; }
@media (max-width: 860px) {
  .cs-study, .cs-study--flip { grid-template-columns: 1fr; }
  .cs-study-media { aspect-ratio: 16/9; }
  .cs-study-body, .cs-study--flip .cs-study-body { padding: 22px; }
  .cs-study-grid { grid-template-columns: 1fr; }
  .cs-study-grid::before { display: none; }
}

/* 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-head { position: relative; margin-bottom: clamp(16px,2vw,24px); }
.news-head .section-title { margin-bottom: 0; }
.news-arrow-link {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--dark); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.news-arrow-link:hover { background: var(--copper-deep); transform: translateY(-50%) scale(1.08); }
/* 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 */
/* Wider measure than the old .narrow (760px) column, left-aligned
   instead of centered on the page -- fewer, longer lines per
   paragraph means noticeably less vertical height overall. */
.about-story { max-width: 980px; }
.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; }
/* Reserve room for 2 lines of title (the longest wraps, the shortest
   doesn't), so every card's paragraph starts on the same row -- not
   just whatever's left after a shorter/taller title above it. */
.value-card h3 { color: var(--copper); font-size: 1.15rem; min-height: 2.9em; }
.value-card p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
/* "Our Team" -- dark indigo section, 4 independently auto-scrolling
   columns (odd columns scroll up, even columns scroll down, forever),
   grayscale-to-colour photo cards with a name/role overlay. Modelled on
   melangedigital.co/about's team section per explicit reference.
   Each column's card list is duplicated (see about.html: the `pass`
   loop renders it twice) so translateY(-50%) always lands exactly on an
   identical copy of the start -- a seamless loop, same technique as the
   .testi-track / .portfolio-track horizontal marquees elsewhere, just
   vertical. Direction comes from animation-direction: reverse on the
   same keyframes, not a second set of keyframes. */
.section--team {
  padding: 22px 0 40px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,.1) 0%, transparent 60%),
    linear-gradient(180deg, #1A1A1A 0%, #0A0A0A 100%);
}
.section--team .team-head { max-width: 640px; margin: 0 auto 28px; }
.section--team .section-title { color: #fff; font-size: clamp(2.1rem, 5vw, 3.5rem); }
.section--team .section-lead { color: #C4C4C4; }

.team-grid { display: flex; justify-content: center; align-items: flex-start; gap: 48px; }
.team-col { flex: 0 0 clamp(131px, 14.5vw, 183px); height: clamp(300px, 34vw, 380px); overflow: hidden; position: relative; }
.team-col-track { display: flex; flex-direction: column; gap: 24px; animation: teamColScroll 22s linear infinite; }
.team-col:nth-child(even) .team-col-track { animation-direction: reverse; }
.team-grid:hover .team-col-track { animation-play-state: paused; }
@keyframes teamColScroll { to { transform: translateY(-50%); } }

.team-photo {
  position: relative; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden;
  background: #1a1a1a;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.team-card:hover .team-photo { transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); }
.team-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%);
  transition: filter .4s var(--ease);
}
.team-card:hover .team-photo img { filter: grayscale(0%); }
.team-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 30%, transparent 65%);
}
.team-card-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 9px; }
.team-card-info strong { font-family: var(--font-display); display: block; color: #fff; font-weight: 700; font-size: .68rem; line-height: 1.2; }
.team-card-info span { display: block; color: #D4D4D4; font-size: .58rem; margin-top: 1px; }

/* 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: #F0602A; }

.founder-slide-role {
  display: block; font-size: .84rem; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 .7em;
  background: linear-gradient(135deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.founder-slide-text h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; margin: 0 0 .3em;
  background: linear-gradient(135deg, #F8F8F8 0%, #D4D4D8 42%, #8C8C94 78%, #C0C0C8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
/* Name + LinkedIn icon sit on one line. The icon link needs its own
   real colour (not transparent) since it would otherwise inherit the
   parent heading's text-fill-color: transparent gradient-text trick. */
.name-with-social { display: inline-flex; align-items: center; gap: .45em; }
/* Leadership cards use a smaller font than the founders' names -- .9em
   there works out to a noticeably smaller gap in px, so it still read as
   "too close". Fixed px gap here instead, independent of font-size. */
.leader-card-body .name-with-social { gap: 16px; }
.leader-card-body .social-icon-link { transform: translateY(3px); }
.leader-card-body .social-icon-link:hover { transform: translateY(3px) scale(1.12); }
/* Real LinkedIn brand mark now (blue rounded square + white "in"), so it
   carries its own fixed colours -- just a hover scale, no colour swap. */
.social-icon-link {
  -webkit-text-fill-color: initial;
  display: inline-flex; transition: transform .25s var(--ease);
}
.social-icon-link:hover { transform: scale(1.12); }
.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: #F0602A; 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: linear-gradient(135deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  border-color: #F0602A; color: #fff;
}

.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.84; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; }
.leader-photo { flex: 0.9 1 0; min-height: 0; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Name + title always start at the same fixed offset from the top of
   the body panel (justify-content: flex-start, not centre), so they
   line up in the same row across every card regardless of how long
   each person's bio text runs -- only the bio underneath grows/shrinks. */
.leader-card-body {
  flex: 1.1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start;
  padding: 16px 20px 13px; background: #000; overflow: hidden;
}
.leader-card-body strong { font-family: var(--font-display); font-weight: 500; display: block; font-size: 1rem; color: #fff; text-align: center; }
.leader-card-body span {
  display: block; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .5em;
  text-align: center;
  background: linear-gradient(135deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 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; text-align: left; }

/* TEMPORARY: one Google Font per card (in DOM order) for a side-by-side
   comparison -- see the font <link> in base.html. Delete this block
   (and that link) once a font is picked; .leader-card-body strong/span/p
   above go back to the site's normal font-family on their own. */
.leader-card:nth-child(1) .leader-card-body strong,
.leader-card:nth-child(1) .leader-card-body span,
.leader-card:nth-child(1) .leader-card-body p { font-family: "Cabin", sans-serif; }
.leader-card:nth-child(2) .leader-card-body strong,
.leader-card:nth-child(2) .leader-card-body span,
.leader-card:nth-child(2) .leader-card-body p { font-family: "Quicksand", sans-serif; }
.leader-card:nth-child(3) .leader-card-body strong,
.leader-card:nth-child(3) .leader-card-body span,
.leader-card:nth-child(3) .leader-card-body p { font-family: "Mulish", sans-serif; }

/* Where We Are -- plain list of place names, no photo cards. */
.office-list {
  margin: 20px 0 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--ink);
}
.office-list i { font-style: normal; color: var(--ink-soft); margin: 0 .5em; }

/* India Market page -- image-left / text-right stat rows. As many as
   the "stat_cards" list holds; each gets its own placeholder image slot
   (static/images/india-market/<NN-.../, see _READ-ME-FIRST.txt there)
   until a real photo/chart is dropped in. */
.market-stat-rows { display: flex; flex-direction: column; }
.market-stat-row {
  display: grid; grid-template-columns: minmax(0,1.171fr) minmax(0,1.1fr);
  gap: clamp(24px,4vw,48px); align-items: center;
  padding-block: clamp(28px,4vw,44px);
}
.market-stat-row:first-child { padding-top: 0; }
.market-stat-row:not(:last-child) { border-bottom: 1px solid var(--line); }
/* Width up another 10% from the last pass; aspect-ratio widened to
   2.42/1 (from 2.2/1) so the extra width doesn't also grow the height. */
/* Solid black (not the grey diagonal-stripe placeholder pattern) --
   these chart PNGs have transparent rounded corners baked in (PowerPoint
   export), so whatever sits behind them shows through right at the
   corners. Black matches the chart's own black fill so it's seamless;
   the grey pattern was visible there before. */
.market-stat-media {
  aspect-ratio: 2.42/1.56; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: #000;
}
.market-stat-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Live gbar_card chart (card 1 of home page's India Outbound Insights)
   instead of a static image -- the card supplies its own dark background/
   border/radius, so drop the fixed aspect-ratio box and just center it. */
.market-stat-media--chart {
  aspect-ratio: auto; background: none; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.market-stat-media--chart .gbar-card, .market-stat-media--chart .dest-card, .market-stat-media--chart .card3-card, .market-stat-media--chart .rank-card, .market-stat-media--chart .diverge-card { width: 100%; }

/* ============================================================
   RANKED LIST CARD (see templates/partials/rank_card.html). ALL
   selectors below are prefixed .rank- and used ONLY by this component
   (currently the India Market page's "Top 15 Countries" stat row) --
   fully independent from every other chart card, so editing this one
   can never move or resize any of them.
   ============================================================ */
.rank-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #121110 0%, #0a0908 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px) clamp(16px,1.8vw,20px);
}
.rank-title {
  font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: .95rem; color: #f4f0ea; text-align: center; letter-spacing: -.005em;
  margin: 0 0 clamp(14px,2vw,18px);
}
.rank-list { display: flex; flex-direction: column; gap: 7px; }
.rank-row {
  display: grid; grid-template-columns: minmax(0,96px) 1fr; align-items: center; gap: 10px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 150ms);
}
.rank-card.in .rank-row { opacity: 1; transform: translateX(0); }
.rank-label {
  font-family: "DM Sans", var(--font-body); font-size: .72rem; color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* overflow: visible (not hidden) -- the value label sits just past the
   bar's own end, inside this box but past the filled portion, so it must
   never get clipped by the track. */
.rank-track { position: relative; height: 8px; border-radius: 4px; overflow: visible; }
.rank-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 4px; background: linear-gradient(90deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  transition: width .7s var(--ease); transition-delay: calc(var(--d, 0ms) + 150ms);
}
.rank-card.in .rank-bar { width: var(--pct); }
/* Positioned relative to the TRACK at the bar's own end (left: var(--pct)),
   not in a fixed end column -- so it follows each bar's actual length
   instead of every value sitting in one flat column regardless of how
   short that particular bar is. */
.rank-value {
  position: absolute; left: var(--pct); top: 50%; transform: translate(8px, -50%);
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: .72rem;
  white-space: nowrap;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.rank-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: clamp(14px,2vw,20px); padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
}
.rank-source { font-size: .68rem; color: rgba(255,255,255,.4); max-width: 60%; }
.rank-unit { font-size: .68rem; color: rgba(255,255,255,.4); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .rank-row { transition: none; opacity: 1; transform: none; }
  .rank-bar { transition: none; width: var(--pct); }
}
@media (max-width: 600px) {
  .rank-row { grid-template-columns: minmax(0,72px) 1fr; gap: 6px; }
  .rank-label, .rank-value { font-size: .66rem; }
}

/* ============================================================
   DIVERGING BAR CARD (see templates/partials/diverge_card.html). ALL
   selectors below are prefixed .diverge- and used ONLY by this component
   (currently the India Market page's "Departures by Region" stat row) --
   fully independent from every other chart card, so editing this one
   can never move or resize any of them.
   ============================================================ */
.diverge-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #121110 0%, #0a0908 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: clamp(20px,2.4vw,30px) clamp(18px,2.2vw,26px) clamp(16px,1.8vw,20px);
}
.diverge-title {
  font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: .95rem; color: #f4f0ea; text-align: center; letter-spacing: -.005em;
  margin: 0 0 clamp(14px,2vw,18px);
}
.diverge-list { display: flex; flex-direction: column; gap: 11px; }
.diverge-row {
  display: grid; grid-template-columns: minmax(0,120px) 1fr; align-items: center; gap: 10px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--d, 0ms) + 150ms);
}
.diverge-card.in .diverge-row { opacity: 1; transform: translateX(0); }
.diverge-label {
  font-family: "DM Sans", var(--font-body); font-size: .72rem; color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diverge-track { position: relative; height: 8px; }
.diverge-zero { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: rgba(255,255,255,.2); }
.diverge-bar {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-radius: 4px; background: linear-gradient(90deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%);
  transition: width .7s var(--ease); transition-delay: calc(var(--d, 0ms) + 150ms);
}
.diverge-bar--neg { left: auto; right: 50%; background: linear-gradient(270deg, #FDBA8C 0%, #F0602A 55%, #D14E1B 100%); }
.diverge-card.in .diverge-bar { width: var(--pct); }
/* Positioned relative to the TRACK just past the bar's own outer end --
   right of the bar for positive values, left of it for negative -- not in
   a fixed end column, so it follows each bar's actual length. */
.diverge-value {
  position: absolute; top: 50%; white-space: nowrap;
  font-family: "Manrope", var(--font-display); font-weight: 800; font-size: .72rem;
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.diverge-value--pos { left: calc(50% + var(--pct)); transform: translate(8px, -50%); }
.diverge-value--neg { left: calc(50% - var(--pct)); transform: translate(calc(-100% - 8px), -50%); }
.diverge-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: clamp(14px,2vw,20px); padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
}
.diverge-source { font-size: .68rem; color: rgba(255,255,255,.4); max-width: 60%; }
.diverge-unit { font-size: .68rem; color: rgba(255,255,255,.4); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .diverge-row { transition: none; opacity: 1; transform: none; }
  .diverge-bar { transition: none; width: var(--pct); }
}
@media (max-width: 600px) {
  .diverge-row { grid-template-columns: minmax(0,88px) 1fr; gap: 6px; }
  .diverge-label, .diverge-value { font-size: .66rem; }
}

/* Dark (not silver) gradient here -- this page's background is light,
   and the silver KPI gradient is tuned for dark sections; on white it
   would barely be legible. */
.market-stat-number {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem,3vw,2.3rem); line-height: 1;
  margin-bottom: .3em;
  background: linear-gradient(135deg, #4a4a4a 0%, #050505 42%, #2b2b2b 78%, #000000 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.market-stat-text h3 { font-size: clamp(1.15rem,1.8vw,1.4rem); margin-top: -76px; margin-bottom: .4em; }
.market-stat-text p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; max-width: 52ch; margin-top: 40px; }
.market-stat-caption {
  font-family: var(--font-display); font-weight: 500; font-size: .82rem;
  letter-spacing: .02em; color: var(--copper); margin-bottom: .4em;
}
.market-stat-source { display: block; margin-top: .6em; color: var(--ink-soft); font-size: .76rem; opacity: .75; }

/* 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; }

/* India Market page (/india-market) -- full black background / white text.
   Scoped to body.page-india-market only; every selector below belongs to
   a class shared with other pages (.page-hero, .metric-card, .cta-band,
   ...), so nothing here leaks past this one page. */
body.page-india-market { background: #000; color: #fff; }
body.page-india-market .page-hero { background-color: #000; border-bottom-color: rgba(255,255,255,.12); }
body.page-india-market .page-hero-sub { color: rgba(255,255,255,.7); }
body.page-india-market .eyebrow {
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
body.page-india-market .market-stat-row:not(:last-child) { border-bottom-color: rgba(255,255,255,.12); }
body.page-india-market .market-stat-media { border-color: rgba(255,255,255,.12); }
body.page-india-market .market-stat-number {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: #fff;
}
body.page-india-market .market-stat-text p { color: rgba(255,255,255,.62); }
body.page-india-market .market-stat-caption {
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
body.page-india-market .market-stat-source { color: rgba(255,255,255,.55); }
body.page-india-market .metric-card { background: var(--dark-2); border-color: rgba(255,255,255,.12); }
body.page-india-market .metric-number { color: #fff; }
body.page-india-market .metric-label { color: rgba(255,255,255,.62); }
body.page-india-market .source-note { color: rgba(255,255,255,.55); }
body.page-india-market .insight-card { background: var(--dark-2); border-color: rgba(255,255,255,.12); }
body.page-india-market .insight-card h3 {
  background: var(--gradient-orange);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
body.page-india-market .insight-card p { color: rgba(255,255,255,.62); }
body.page-india-market .cta-band { background: #000; color: #fff; }
body.page-india-market .cta-band h2 { color: #fff; }
body.page-india-market .cta-band p { color: rgba(255,255,255,.62); }

/* 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;
}
/* 3 badges per row at a fixed 157px each (+ 2 gaps) need ~487px --
   more than a 375-414px phone has available, so they were running off
   the right edge of the footer. Desktop's fixed 157x103px is
   untouched. Below 600px: wrap onto 2 rows (2 badges, then the 3rd
   drops below) at an explicit 2-per-row width, rather than shrinking
   all 3 onto one row -- a flex-grow/aspect-ratio version of this was
   tried first and did not actually prevent the 3rd badge overflowing
   in testing, so this uses fixed math instead of relying on flex
   distribution to get it right. */
@media (max-width: 600px) {
  .footer-badge-row { flex-wrap: wrap; row-gap: 8px; }
  .footer-badge-row img {
    width: calc(50% - 4px); height: auto; max-width: 157px;
    aspect-ratio: 157 / 103; flex: 0 0 auto;
  }
}

/* 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; }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
/* Sits above #to-top (below), not beside it, so the two never overlap
   once both are visible (to-top only fades in after scrolling). */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 30px -6px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
}
@media (max-width: 600px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ============================================================
   CHATBOT FLOAT (placeholder -- no chatbot wired up yet, just the
   icon + a small popup letting the visitor know it's coming and
   pointing them to WhatsApp meanwhile)
   ============================================================ */
/* Stacks above .whatsapp-float, 12px rhythm between them, so the two
   never overlap. (The #to-top button that used to sit below both of
   these was removed -- so whatsapp now sits where it did, and this
   one right above it.) .chatbot-wrap is the fixed-positioned anchor;
   .chatbot-float itself is just a flex child of it now, so the
   greeting bubble beside it can vertically centre against the icon
   automatically instead of needing separate position math. */
.chatbot-wrap {
  position: fixed; right: 24px; bottom: 88px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
}
.chatbot-float {
  position: static; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--gradient-orange);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chatbot-float svg { width: 26px; height: 26px; }
/* Small greeting pill, left of the icon -- fades/slides in shortly
   after page load to draw the eye, dismissible via its own close
   button (remembered for the rest of the session) or by opening the
   chat popup itself. */
.chatbot-greeting {
  display: flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 500; font-size: .82rem;
  padding: 10px 10px 10px 16px; border-radius: 100px;
  box-shadow: 0 10px 24px -6px rgba(0,0,0,.3);
  white-space: nowrap;
  opacity: 0; transform: translateX(8px); animation: chatbotGreetingIn .4s var(--ease) .8s forwards;
}
.chatbot-greeting.is-hidden { display: none; }
.chatbot-greeting-close {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.08); color: var(--ink-soft); font-size: .95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.chatbot-greeting-close:hover { background: rgba(0,0,0,.14); color: var(--ink); }
@keyframes chatbotGreetingIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chatbot-greeting { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .chatbot-greeting { display: none; }
}
.chatbot-float:hover { transform: scale(1.08); box-shadow: 0 14px 30px -6px rgba(0,0,0,.5); }
.chatbot-popup {
  position: fixed; right: 24px; bottom: 150px; z-index: 91;
  width: min(280px, calc(100vw - 48px));
  background: var(--dark-2); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 20px 20px 18px; box-shadow: 0 20px 45px -14px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transform: translateY(10px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.chatbot-popup.is-open { opacity: 1; pointer-events: auto; transform: none; }
.chatbot-popup-close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.chatbot-popup-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.chatbot-popup-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff;
  margin: 0 0 .4em; padding-right: 20px;
}
.chatbot-popup-text { font-size: .86rem; line-height: 1.55; color: rgba(255,255,255,.65); margin: 0 0 16px; }
.chatbot-popup-cta {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--gradient-orange); color: #1a0d02;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .02em; border-radius: 8px; padding: .7em 1.1em;
  transition: opacity .25s var(--ease);
}
.chatbot-popup-cta:hover { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .chatbot-float, .chatbot-popup, .chatbot-popup-close, .chatbot-popup-cta { transition: none; }
}
@media (max-width: 600px) {
  .chatbot-wrap { right: 16px; bottom: 72px; }
  .chatbot-float { width: 46px; height: 46px; }
  .chatbot-float svg { width: 22px; height: 22px; }
  .chatbot-popup { right: 16px; bottom: 128px; }
}

/* ============================================================
   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; }
  .testi-track { animation: none !important; }
  .portfolio-track { animation: none !important; }
  .team-col-track { animation: none !important; }
  .proven-card { animation: none !important; transform: translateY(var(--float-y)) !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); }
  .social-posts { grid-template-columns: repeat(2,1fr); }
  .portfolio-row, .past-clients-grid { grid-template-columns: repeat(6,1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 72px; }
  /* Tablet tier (this query covers down to 601px; the ≤600px query
     further below takes over from there with an even larger, closer-
     to-full-width phone size). Previously dropped straight from the
     437x364px desktop card to 152x115px here -- smaller than a
     business card, with barely-readable 0.68rem clamped text, and (a
     real bug) that tiny size was also the ONLY rule in range at a
     768px viewport, since the phone-sized rule below only kicks in at
     600px and under. */
  .testi-stack-card { width: min(58vw, 380px); height: 320px; padding: 20px 22px; }
  .testi-stack-card blockquote { font-size: .8rem; line-height: 1.5; -webkit-line-clamp: 7; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 12px; }
  .testi-stack-foot { gap: 12px; }
  .testi-stack-avatar { width: 48px; height: 48px; }
  .testi-stack-info strong { font-size: .74rem; }
  .testi-stack-info span { font-size: .7rem; }
  .proven-grid { grid-template-columns: 1fr; padding-top: 0; }
  .proven-card { --float-y: 0px; animation: none; }
  .portfolio-row, .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; }
  .social-posts { grid-template-columns: 1fr; }
  .values-grid, .insight-grid { grid-template-columns: 1fr; }
  .market-stat-row { grid-template-columns: 1fr; }
  .team-col:nth-child(3), .team-col:nth-child(4) { display: none; }
  .founder-slide { grid-template-columns: 1fr; }
  .founder-slide-photo { max-width: 220px; }
  .leader-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .pillar { grid-template-columns: 1fr; gap: 12px; }
  .pillar-media { max-width: 180px; }
  .expertise-hero-grid { grid-template-columns: 1fr; }
  .expertise-hero-visual { aspect-ratio: 16/10; order: -1; }
  .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%);
  }
  .portfolio-row, .past-clients-grid { grid-template-columns: repeat(2,1fr); }
  .team-col:nth-child(2) { display: none; }
  .team-col { flex: 0 0 192px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-newsletter { justify-self: start; width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE SECTION PRESENCE -- desktop is untouched by anything
   below; every rule here lives inside a max-width mobile query.
   On a phone, most sections were relying on the generic .section
   padding's mobile floor (18px) or their own very small overrides
   (.growth: 20px top/0 bottom, .clients: 0 top), so scrolling packed
   3-4 sections into one screen and read like a shrunk desktop layout
   instead of a proper mobile page. Each major section below now gets
   real breathing room and, where the content suits it, a near-full-
   screen min-height with its content vertically centred -- so
   scrolling moves through one section "beat" at a time, the way
   Impact/Growth/Services/Case Studies/Clients/India Insights read on
   most large travel & hospitality marketing sites' mobile builds.
   Skipped: .services (bento grid; 10 stacked tiles already exceed a
   phone screen on their own) and .testimonials (a horizontal card
   marquee -- forcing it to fill the screen vertically would just
   leave empty space above/below a strip that isn't meant to be tall;
   its fix below is bigger, more legible cards instead). */
@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .impact, .growth, .proven, .clients {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 56px; padding-bottom: 56px;
  }
  .growth-cine-stage { margin-top: clamp(28px,6vw,44px); }
  .clients .section-title { margin-top: 0; }
}
/* Testimonial cards were shrinking to 152x115px on mobile -- smaller
   than a business card, with 0.68rem clamped text. Sized to fill most
   of the screen width instead, at a size that's actually readable. */
@media (max-width: 600px) {
  .testi-stack-card { width: min(84vw, 340px); height: 300px; padding: 20px 22px; }
  .testi-stack-card blockquote { font-size: .84rem; line-height: 1.5; -webkit-line-clamp: 7; margin-bottom: 14px; }
  .testi-stack-foot { gap: 12px; }
  .testi-stack-avatar { width: 52px; height: 52px; }
  .testi-stack-info strong { font-size: .76rem; }
  .testi-stack-info span { font-size: .72rem; }
}