/* ============================================================
   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.
   ============================================================ */

/* Size-matched stand-ins shown for the split second before the Google fonts
   arrive: Arial/Georgia scaled to Mulish/Playfair's width and line metrics,
   so text wraps the same before and after and the page doesn't jump
   (measured 20 Oct 2026). Never seen once the real fonts have loaded. Latin
   letters only (same set as the Google fonts), so symbols like → render as before. */
@font-face { font-family: "Mulish Fallback"; font-weight: 100 500; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 104.25%; ascent-override: 96.4%; descent-override: 24%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mulish Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold");
  size-adjust: 98.6%; ascent-override: 101.9%; descent-override: 25.4%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 93.9%; ascent-override: 115.2%; descent-override: 26.7%; line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }


: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:    #555555;   /* neutral grey secondary text (was #666; #555 passes WCAG AA 4.5:1 on the light-blue sections too) */
  /* "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", "Mulish Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Mulish", "Mulish Fallback", "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;
}

/* Home page only: warm sand background instead of white, and a flat
   copper tone instead of the orange gradient everywhere it's used
   (icons, bars, buttons, headline numbers, accent text). Scoped to
   body.page-home so every other page keeps the original white/gradient. */
.page-home {
  --sand: #F6EEE2;
  --gradient-orange: #C65A2E;
  --orange-mid: #C65A2E;
  --logo-chip: #F0E1CD;
}

/* ---------- 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); }
/* Home page: "Request a Proposal" in the Case Studies section -- black
   instead of the site-wide orange CTA gradient. */
.page-home .proven-cta .btn--orange { background: var(--dark); }
.page-home .proven-cta .btn--orange:hover { background: var(--copper-deep); box-shadow: 0 16px 32px -6px rgba(0,0,0,.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;
  transition: opacity .35s var(--ease);
}
/* Home page only (see main.js): faded out once the hero has scrolled
   out of view, so it doesn't float over every section below it. */
.site-header.header-hidden { opacity: 0; }
.site-header.header-hidden .nav-toggle,
.site-header.header-hidden .header-collab { 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-collab {
  pointer-events: auto; margin-left: auto;
  font-family: var(--font-display); font-size: .9rem; font-weight: 500;
  letter-spacing: .01em; color: #fff; text-decoration: none;
}
.header-collab:hover { color: #C0272D; }
.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; }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; padding: 10px 12px;
}
.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; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero-destination-media { position: absolute; inset: 0; z-index: 0; }
.hero-destination-media img, .hero-destination-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-destination-poster { position: absolute; inset: 0; }
.hero-destination-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hero-destination-media video.is-ready { opacity: 1; }
.hero-destination-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.4); pointer-events: none; }
.hero-destination-content { position: relative; z-index: 1; max-width: 820px; transform: translateY(-18vh); }
.hero-top-block {
  position: absolute; top: -5px; left: max(24px, calc((100% - var(--container)) / 2));
  z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.hero-destination-logo-top { display: block; height: clamp(81px, 11.2vw, 117px); width: auto; }
.hero-center-block {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-eyebrow-center { margin-bottom: 0 !important; }
.hero-destination-eyebrow {
  display: block; font-family: "Bodoni Moda", serif; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: clamp(1.088rem, 2.048vw, 1.536rem); margin-bottom: .6em;
  color: #fff;
}
.hero-subheadline {
  margin: 12px 0 0; font-family: "Bodoni Moda", serif; font-weight: 500; color: #fff;
  font-size: clamp(.888rem, 1.2vw, 1.104rem); line-height: 1.45; max-width: 46ch;
}
.hero-subheadline .hero-destination-line { display: block; }
.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: 800px; margin: clamp(28px,3.4vw,40px) auto 0;
}
.impact-intro p {
  color: rgba(255,255,255,.62); font-size: clamp(.96rem,1.1vw,1.05rem); line-height: 1.6;
  margin: 0; text-align: justify; text-align-last: center;
}
.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: #C65A2E;
  -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; }
}
/* "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: var(--ink);
  -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: #F0E1CD; border: 1px solid transparent; border-radius: 14px;
  padding: clamp(18px,2vw,26px);
  transition: transform .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 {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -14px rgba(var(--ink-rgb),.28);
}
.bento-eyebrow {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.3px; margin: 0 0 16px;
  color: var(--ink);
}
.bento-headline {
  color: var(--ink); 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: var(--ink-soft); 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(--dark); color: #fff; 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: var(--ink); 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: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento-service h3 { margin: auto 0 0; font-size: .88rem; line-height: 1.3; }
.bento-service:hover, .bento-service:focus-visible {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 34px -14px rgba(var(--ink-rgb),.28);
}
.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(--ink);
  -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: #F6EEE2; }
.proven-head { max-width: 780px; margin-inline: auto; margin-top: -14px; margin-bottom: 4px; }
.proven-head .section-title { color: var(--ink); font-size: clamp(1.68rem, 3.12vw, 2.76rem); }
.proven-head .section-lead { color: rgba(10,10,10,.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: var(--ink);
}
/* 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 84px; max-width: 940px; 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: #F0E1CD; border: 1px solid transparent;
  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: rgba(198,90,46,.9);
  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: var(--ink); }
.proven-card-body p { color: rgba(10,10,10,.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: #F6EEE2; }
.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: #C65A2E; 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 transparent; border-radius: var(--radius-lg);
  background: #F0E1CD;
  color: var(--ink);
}
/* 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(10,10,10,.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; }
/* Company-logo avatars (on the card colour): no dark box, so no hairline shows around the edges. */
.testi-stack-avatar--logo { background: transparent; }
/* Placeholder until a testimonial's logo/photo is added: the company's initials. */
.testi-avatar-ph {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: #fff; font-family: "Playfair Display", "Playfair Fallback", Georgia, serif; font-style: italic;
  font-size: 1.35rem; letter-spacing: .04em;
}
.testi-modal-avatar .testi-avatar-ph { background: var(--dark); }
.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: #F6EEE2; }
.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: #000000; padding: clamp(20.41px,2.84vw,36.29px) 0; 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(-40px); }
.intel-top-heading {
  text-align: left; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.344rem, 2.496vw, 2.208rem); letter-spacing: -.01em; line-height: 1.15;
  margin: 0 0 14px; color: #F6EEE2;
}
.intel-top-lead {
  text-align: left; margin: 0;
  color: #F6EEE2; 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: #000000;
  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: #F6EEE2; 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: #F6EEE2; 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: #000000;
  border: 1px solid rgba(255,255,255,.08);
  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: #F6EEE2; 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: #C65A2E;
  -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(121px,16.5vw,187px); display: flex; align-items: flex-end; }
.gbar-bar {
  position: relative; width: 100%; height: 0;
  border-radius: 9px 9px 4px 4px;
  background: #C65A2E;
  box-shadow: 0 0 10px rgba(198,90,46,.35);
  transition: height .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}
.gbar-year { margin-top: 10px; font-family: "DM Sans", var(--font-body); font-size: .72rem; color: #F6EEE2; 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: #F6EEE2;
}
.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: #C65A2E;
  -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: #F6EEE2; 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: #F6EEE2; max-width: none; margin: 0;
}
.gbar-headline-desc strong {
  font-weight: 700;
  background: #C65A2E;
  -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: #000000;
  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(121px,16.5vw,187px); display: flex; align-items: flex-end; }
.dest-bar {
  position: relative; width: 100%; height: 0;
  border-radius: 9px 9px 4px 4px;
  background: #C65A2E;
  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-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: #F6EEE2; 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: #F6EEE2; 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: 80%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.75rem, 5.46vw, 4.34rem); 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.33rem, 5.46vw, 4.34rem); }
}
.hero-watermark-banner .container { position: relative; z-index: 2; }
.hero-watermark-banner .page-hero-sub { margin-top: clamp(77px, 8.8vw, 121px); color: #f2f2f2; }
/* News only: lighter darkening over the banner photo. */
.page-news .hero-watermark-banner::before {
  background:
    linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.05) 100%);
}
.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: none; }
.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 itself only ever has one child (.container), so gap here
   was a no-op -- the actual card-to-card spacing has to live on
   .cs-study (the real repeated items, one level further in). */
.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);
  margin-bottom: clamp(32px,4.5vw,64px);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cs-study:last-child { margin-bottom: 0; }
.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.
   position: absolute = the photo fills the box but never sizes it, so a tall
   (portrait) photo can't make its card taller than the others. */
.cs-study-media img { position: absolute; inset: 0; 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; }
/* Home page only -- .cs-card is shared with the standalone /news page,
   which keeps its plain white card. */
.page-home .news-grid .cs-card { background: #F0E1CD; border-color: transparent; }
.news-grid .cs-card-img { aspect-ratio: 16/10; }
/* Home news cards: a publication logo instead of a photo (shown whole on white),
   or as a small white badge in the photo's top-right corner (HOME_NEWS_LINKS). */
.news-grid .cs-card-img { position: relative; }
.news-grid .cs-card-img--logo { background: #fff; display: flex; align-items: center; justify-content: center; }
.news-grid .cs-card-img--logo img { width: auto; height: auto; max-width: 74%; max-height: 74%; object-fit: contain; }
.news-badge {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 32%; max-width: 116px;
  background: #fff; border-radius: 8px; padding: 5px 7px; box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.news-badge img, .cs-card:hover .news-badge img { display: block; width: 100%; height: auto; object-fit: contain; transform: none; }
.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(280px, 400px) 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; }
/* Enlarged to fill the column now that .founder-slide-controls (thumbs +
   prev/next arrows) is hidden and no longer needs room underneath it. */
.founder-slide-photo { aspect-ratio: 6/7; max-width: 100%; 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: none; }

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

/* All leadership cards: Mulish (the site's main font). */
.leader-card .leader-card-body strong,
.leader-card .leader-card-body span,
.leader-card .leader-card-body p { font-family: var(--font-display); }

/* 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; }
.flash--error { background: #FDECEA; border-color: #F3C3BE; color: #8C1D18; }
/* Contact form: required star, the "company email" hint, and fields the
   browser check flagged (main.js). */
.field .req { color: #F0602A; font-style: normal; }
.field-hint { font-size: .78rem; color: var(--ink-soft); }
.field-hint.is-error { color: #B3261E; }
.field input.is-invalid, .field textarea.is-invalid { border-color: #C0392B; }
.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); }
/* Home page only -- same treatment as .chatbot-float, other pages keep
   the WhatsApp-brand green. */
.page-home .whatsapp-float { background: #F0E1CD; }
.page-home .whatsapp-float svg { fill: var(--ink); }
@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; }
/* Home page only -- the chatbot widget is global (base.html), other
   pages keep the orange icon/white glyph. The glyph's stroke/fill are
   set inline as #fff on the SVG itself, so override them here too or
   they'd stay invisible-white against the new light button. */
.page-home .chatbot-float { background: #F0E1CD; }
.page-home .chatbot-float svg { stroke: var(--ink); }
.page-home .chatbot-float svg circle { fill: var(--ink); }
/* 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; }
  .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: 280px; }
  .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; }
}

/* ============================================================
   Homepage navy pass -- everything black on the homepage (stats
   band, Market Intelligence section + chart cards, footer, buttons,
   arrows, headings/text, icons) uses #031130 instead. Scoped to
   body.page-home so other pages stay black. Shadows and photo
   fades are left as-is.
   ============================================================ */
body.page-home {
  --navy:        #031130;
  --ink:         var(--navy);
  --ink-rgb:     3,17,48;
  --dark:        var(--navy);
  --dark-2:      var(--navy);
  --copper:      var(--navy);
  --copper-deep: #0A1F4D;   /* slightly lighter navy -- hover states */
}
body.page-home .intel,
body.page-home .card3-card,
body.page-home .gbar-card,
body.page-home .dest-card,
body.page-home .card3-media { background: var(--navy); }

/* Homepage: light cream (#F6EEE2) -> cool light grey-blue #E8EBF1,
   both as section backgrounds and as light text on the navy cards. */
body.page-home { --sand: #E8EBF1; }
body.page-home .proven,
body.page-home .testimonials,
body.page-home .clients { background: #E8EBF1; }
body.page-home .intel-top-heading,
body.page-home .intel-top-lead,
body.page-home .card3-headline-title,
body.page-home .card3-headline-desc,
body.page-home .gbar-title,
body.page-home .gbar-year,
body.page-home .gbar-foot,
body.page-home .gbar-headline-title,
body.page-home .gbar-headline-desc,
body.page-home .dest-headline-title,
body.page-home .dest-headline-desc { color: #E8EBF1; }

/* Homepage: card cream (#F0E1CD) -> #D9DEEA on every card-type surface
   (service tiles, case study cards, testimonial cards, news cards,
   client logo boxes, WhatsApp/chat bubbles). */
body.page-home { --logo-chip: #D9DEEA; }
body.page-home .bento-tile,
body.page-home .proven-card,
body.page-home .testi-stack-card,
body.page-home .news-grid .cs-card,
body.page-home .whatsapp-float,
body.page-home .chatbot-float { background: #D9DEEA; }

/* ============================================================
   Sticky header bar (every page): logo left, "Contact US" + the
   hamburger right, always visible while scrolling up or down. Solid
   chrome bar so it stays readable over light sections. On the home
   page it starts transparent over the hero (which has its own big
   logo) and turns solid, with the header logo, once scrolled.
   ============================================================ */
.site-header {
  background: var(--dark);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.45);
  pointer-events: auto;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand:hover { transform: none; }
.brand-logo--light { height: 70px; filter: none; }
.brand:hover .brand-logo--light { filter: none; opacity: .85; }
.header-collab:hover { color: #fff; opacity: .75; }

body.page-home .site-header:not(.scrolled) { background: transparent; box-shadow: none; }
body.page-home .site-header .brand { opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
body.page-home .site-header.scrolled .brand { opacity: 1; pointer-events: auto; }

/* Home portfolio: 3 stacked marquee rows (one per category). Rows 1 and
   3 flow left -> right, row 2 right -> left. Rows sit flush, sharing one
   divider line between them. */
.portfolio-marquee { margin-bottom: 0; }
.portfolio-marquee + .portfolio-marquee { border-top: 0; }
.portfolio-marquee:last-of-type { margin-bottom: clamp(14px,2vw,22px); }
.portfolio-track { animation-duration: 32s; }
.portfolio-marquee--rtl .portfolio-track { animation-direction: normal; }

/* Header: no background bar on any page -- logo, "Contact US" and the
   hamburger float over the page (still fixed/sticky). The empty strip
   between them lets clicks through to the content underneath. A soft
   shadow keeps the white items legible over light sections. */
.site-header,
body.page-home .site-header,
body.page-home .site-header.scrolled { background: transparent; box-shadow: none; pointer-events: none; }
.site-header .brand,
.site-header .header-collab,
.site-header .nav-toggle,
.site-header .mobile-drawer { pointer-events: auto; }
body.page-home .site-header:not(.scrolled) .brand { pointer-events: none; }
.brand-logo--light { filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
.header-collab { text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.nav-toggle span { box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* Responsive banners: templates set --bg-sm/--bg-md/--bg-lg (WebP at
   1280 / 1920 / full width, see bg_vars() in app.py) and each screen
   loads only the one it needs. Breakpoints must match _BG_MEDIA in app.py
   so the preloaded file is the one actually used. */
:is(section, span, div, h1)[style*="--bg-md"] { background-image: var(--bg-md); }
@media (max-width: 800px) {
  :is(section, span, div, h1)[style*="--bg-md"] { background-image: var(--bg-sm); }
}
@media (min-width: 1921px), (min-width: 801px) and (min-resolution: 2dppx) {
  :is(section, span, div, h1)[style*="--bg-md"] { background-image: var(--bg-lg); }
}

/* Home portfolio rows: logos 20% taller, rows flow a little slower. */
body.page-home .portfolio-track .client-cell img { max-height: 60px; }
body.page-home .portfolio-track { animation-duration: 40s; }

/* ============================================================
   Site-wide navy pass -- the same navy as the homepage (#031130)
   replaces black on every page: header/footer chrome, buttons,
   arrows, headings/text, dark sections and cards (team/leadership
   cards, founders, case-study impact bars, India Market page, chart
   cards). Shadows and image masks are left as-is.
   ============================================================ */
:root {
  --navy:        #031130;
  --ink:         var(--navy);
  --ink-rgb:     3,17,48;
  --dark:        var(--navy);
  --dark-2:      var(--navy);
  --copper:      var(--navy);
  --copper-deep: #0A1F4D;   /* slightly lighter navy -- hover states */
}
.intel,
.card3-card, .gbar-card, .dest-card, .card3-media,
.rank-card, .diverge-card,
.market-stat-media,
.leader-card, .leader-card-body,
.team-photo,
.founders,
.hero-video-placeholder { background: var(--navy); }
.cs-study-impact { background: linear-gradient(120deg, #0A1F4D 0%, var(--navy) 100%); }
.team-photo::after { background: linear-gradient(to top, var(--navy) 0%, rgba(3,17,48,.6) 30%, transparent 65%); }
.founder-slider-arrow--solid { color: var(--navy); }
.market-stat-number {
  background: var(--navy);
  -webkit-background-clip: text; background-clip: text;
}
body.page-india-market,
body.page-india-market .cta-band { background: var(--navy); }
body.page-india-market .page-hero { background-color: var(--navy); }

/* ============================================================
   Site-wide light-blue pass: white surfaces -> #E8EBF1 (light blue),
   grey surfaces -> #D9DEEA (the blue used on the homepage cards).
   Backgrounds only -- white text/lines on navy stay white, and the
   silver gradient lettering is unchanged.
   ============================================================ */
:root {
  --light-blue:  #E8EBF1;
  --card-blue:   #D9DEEA;
  --sand:        var(--light-blue);   /* page background (was white) */
  --surface:     var(--light-blue);   /* cards, FAQ items, form fields (were white) */
  --logo-chip:   var(--light-blue);   /* logo boxes (were white) */
  --sand-2:      var(--card-blue);    /* panels, page banners' base (were grey) */
}
.mobile-drawer .btn,
.footer-newsletter-form button,
.chatbot-greeting,
.founder-slider-arrow--solid { background: var(--light-blue); border-color: var(--light-blue); }
.nav-cta:hover { background: var(--light-blue) !important; }

/* Home portfolio: each client once per row. Logo boxes widen so one pass
   of a row's logos is always a little wider than the strip itself
   (container = min(1200px, 100vw - 48px)), so the seamless loop never
   shows the same client twice side by side. --n = logos in that row. */
body.page-home .portfolio-track .client-cell {
  width: max(clamp(140px, 14vw, 190px), calc(min(1200px, 100vw - 48px) / (var(--n) - 0.5)));
}

/* Home portfolio, styled like v8: bigger logos, no lines, a small gap
   between the 3 rows. Width keeps the "each client once" rule above. */
body.page-home .portfolio-marquee { border-top: 0; border-bottom: 0; margin: 0; }
body.page-home .portfolio-marquee + .portfolio-marquee { margin-top: clamp(14px, 1.6vw, 20px); }
body.page-home .portfolio-marquee:last-of-type { margin-bottom: clamp(14px, 2vw, 22px); }
body.page-home .portfolio-track .client-cell {
  width: max(clamp(180px, 17vw, 240px), calc(min(1200px, 100vw - 48px) / (var(--n) - 0.5)));
  padding: 20px 24px;
  border: 0;
}
body.page-home .portfolio-track .client-cell img { max-height: 76px; }
body.page-home .portfolio-track .client-cell:hover { box-shadow: none; }
/* Home portfolio: no box colour behind the logos -- they sit directly on
   the section's light-blue background. */
body.page-home .portfolio-track .client-cell { background: transparent; }

/* ============================================================
   Compact footer (about half the old height): logo + social icons in
   the left column (no separate logo row), tighter link spacing, and
   the "We're in" cities + copyright share one bottom row.
   ============================================================ */
.site-footer { padding: clamp(18px, 2vw, 26px) 0 12px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { height: 64px; width: auto; margin: -8px 0 -6px -6px; }
.footer-brand .footer-social-icons { justify-content: flex-start; margin-top: 0; gap: 10px; }
.footer-social-icons a { width: 40px; height: 40px; }
.footer-social-icons a svg { width: 20px; height: 20px; }
.footer-nav-cols { margin-top: 0; }
.footer-col ul { gap: 4px; }
.footer-col h4 { margin-bottom: .5em; }
.footer-newsletter { margin-top: 0; }
.footer-newsletter h4.footer-second-heading { margin-top: 0; }
.footer-col a[href^="tel"], .footer-col a[href^="mailto"] { margin-bottom: 2px; }
.footer-office-label { margin-top: 8px; }
.footer-office { margin-bottom: 8px; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: .8rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .03em;
}
.footer-base .footer-cities { padding: 0; margin: 0; border: 0; justify-content: flex-start; gap: 6px; }
.footer-brand { align-items: flex-start; min-width: 0; }
.footer-brand .footer-logo { max-width: 100%; object-fit: contain; }
.footer-base > * { min-width: 0; max-width: 100%; }
.footer-base .footer-cities { flex-wrap: wrap; }

/* CTA band showing only its button (Our Clients, Our Expertise). */
.cta-band--button-only { padding: clamp(20px, 3vw, 36px) 0; }

/* India Outbound Insights banner: the India map sits at the image's far
   right, so anchor the photo to the right (it shifts left) -- the full
   map stays visible on every screen width instead of being cropped. */
body.page-india-market .page-hero.hero-watermark-banner { background-position: right center; }

/* Our Expertise: service icons with no background box -- just the icon
   (the SVGs themselves no longer have a black background). */
.pillar-media { background: none; border: 0; border-radius: 0; }

/* ============================================================
   Case studies: split card -- the photo fills one side top to bottom,
   and the text + "The Impact" bar stack on the other side (mirrored on
   flipped cards). Phones keep the stacked layout.
   ============================================================ */
@media (min-width: 861px) {
  .cs-study { grid-template-rows: 1fr auto; column-gap: 0; row-gap: 0; }
  .cs-study-media { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; min-height: 360px; }
  .cs-study:not(.cs-study--flip) .cs-study-media { grid-column: 1; }
  .cs-study:not(.cs-study--flip) .cs-study-body { grid-column: 2; padding-left: clamp(24px,3vw,40px); }
  .cs-study:not(.cs-study--flip) .cs-study-impact { grid-column: 2; }
  .cs-study--flip .cs-study-media { grid-column: 2; }
  .cs-study--flip .cs-study-body { grid-column: 1; padding-right: clamp(24px,3vw,40px); }
  .cs-study--flip .cs-study-impact { grid-column: 1; }
  .cs-study-impact { margin-top: 0; }
}
@media (min-width: 861px) {
  /* Photo-on-the-right cards: the gold line sits on the Impact bar's right
     edge, between it and the photo (mirror of the photo-on-the-left cards). */
  .cs-study--flip .cs-study-impact::before { left: auto; right: 0; }
}

/* Case studies: every card the same height as the first (Jumeirah) card.
   main.js measures it and sets --cs-card-h; shorter cards stretch (the
   Impact bar stays at the bottom), longer ones get .cs-study--compact
   (tighter spacing) so they fit the same height without cutting text. */
@media (min-width: 861px) {
  .cs-studies { --cs-card-h: 0px; }
  .cs-study { min-height: var(--cs-card-h); }
  .cs-study--compact .cs-study-body { padding-top: clamp(18px, 2.2vw, 28px); }
  .cs-study--compact .cs-study-meta { margin-bottom: 6px; }
  .cs-study--compact .cs-study-body h3 { margin-bottom: 12px; }
  .cs-study--compact .cs-study-mandate { margin-bottom: 14px; padding-bottom: 14px; }
  .cs-study--compact .cs-study-mandate p { line-height: 1.4; }
  .cs-study--compact .cs-study-block h4 { margin-bottom: 7px; }
  .cs-study--compact .cs-study-block ul { gap: 5px; }
  .cs-study--compact .cs-study-grid { margin-bottom: 16px; }
  .cs-study--compact .cs-study-impact { padding-top: 12px; padding-bottom: 12px; }
  .cs-study--compact .cs-study-impact ul li { line-height: 1.35; }
}
/* second step for the longest cards (after --compact): main.js lowers --cs-fit (0.96 -> 0.80) on that card
   until it fits the reference height -- text a little smaller, every word still shown */
@media (min-width: 861px) {
  .cs-study--tight .cs-study-body h3 { font-size: calc(var(--cs-fit, .96) * 1em); }
  .cs-study--tight .cs-study-subtitle, .cs-study--tight .cs-study-mandate p, .cs-study--tight .cs-study-intro,
  .cs-study--tight .cs-study-block p, .cs-study--tight .cs-study-block li, .cs-study--tight .cs-study-result,
  .cs-study--tight .cs-study-impact ul li { font-size: calc(var(--cs-fit, .96) * 1em); line-height: 1.38; }
}
@media (min-width: 861px) {
  /* "The Impact" label always stays beside its list (never wraps above it). */
  .cs-study-impact { flex-wrap: nowrap; }
  .cs-study-impact ul { min-width: 0; }
}

/* About Us: the "Work With Us" band continues the blue of the section
   above it (no lighter strip), with the button sitting closer to it. */
body.page-about .cta-band { background: var(--sand-2); padding-top: 0; }
/* Our Expertise: "Begin a Conversation" sits a little closer to the list. */
body.page-expertise .cta-band, .expertise-pillars-section + .cta-band { padding-top: 0; }
/* Our Clients: "Begin a Conversation" sits a little closer to the logos. */
body.page-clients .cta-band { padding-top: 0; }
body.page-clients .past-clients-grid { margin-bottom: 0; }

/* Our Clients page (Current + Past Clients): no outlines, bigger logos. */
body.page-clients .portfolio-row,
body.page-clients .past-clients-grid { border: 0; }
body.page-clients .portfolio-label { border-bottom: 0; margin: 0; }
body.page-clients .client-cell { border: 0; padding: 8px 12px; }
body.page-clients .client-cell img { max-height: 76px; }
body.page-clients .client-cell:hover { box-shadow: none; }
body.page-clients .portfolio-label { font-size: clamp(1rem, 1.4vw, 1.2rem); padding: 12px 14px 14px; }

/* ============================================================
   India Outbound Insights: light-blue page (like the homepage) with
   navy text. The chart cards, stat boxes and insight cards stay navy
   with white text so they stand out on the light background.
   ============================================================ */
body.page-india-market { background: var(--light-blue); color: var(--ink); }
body.page-india-market .cta-band { background: var(--light-blue); color: var(--ink); }
body.page-india-market .market-stat-row:not(:last-child) { border-bottom-color: var(--line); }
body.page-india-market .market-stat-media { border-color: transparent; }
body.page-india-market .market-stat-text,
body.page-india-market .market-stat-text h2,
body.page-india-market .market-stat-text h3 { color: var(--ink); }
body.page-india-market .market-stat-text p { color: var(--ink-soft); }
body.page-india-market .market-stat-source,
body.page-india-market .source-note { color: var(--ink-soft); }

/* ============================================================
   Media Kit popup (footer "Media Kit" link)
   ============================================================ */
.mk-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mk-modal[hidden] { display: none; }
.mk-backdrop { position: absolute; inset: 0; background: rgba(3, 17, 48, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mk-panel {
  position: relative; width: min(440px, 100%);
  background: var(--light-blue); color: var(--ink); border-radius: 18px;
  padding: 30px 28px 24px; box-shadow: 0 30px 70px -20px rgba(3, 17, 48, .6);
}
.mk-panel h3 { margin: 0 0 8px; font-size: 1.35rem; color: var(--ink); }
.mk-lead { margin: 0 0 18px; color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.mk-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink); cursor: pointer; opacity: .6; }
.mk-close:hover { opacity: 1; }
.mk-form { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-form input[type="email"] {
  flex: 1 1 200px; min-width: 0; padding: 12px 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
.mk-form input[type="email"]:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.mk-form .btn { flex: 0 0 auto; }
.mk-form .btn[disabled] { opacity: .6; cursor: wait; }
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mk-msg { margin: 12px 0 0; min-height: 1.2em; font-size: .88rem; color: var(--ink-soft); }
.mk-msg.is-ok { color: #1E7A46; }
.mk-msg.is-error { color: #B42318; }
body.mk-open { overflow: hidden; }

/* ============================================================
   Every button site-wide = the homepage "Request a Proposal" look:
   navy (#031130) with light-blue text, slightly lighter navy on hover.
   (The button inside the navy mobile menu stays light so it's visible.)
   ============================================================ */
.btn, .btn--orange, .btn--dark-grey, .svc-cta, .chatbot-popup-cta,
.page-home .proven-cta .btn--orange {
  background: var(--navy); color: var(--light-blue);
}
.btn:hover, .btn--orange:hover, .btn--dark-grey:hover, .svc-cta:hover, .chatbot-popup-cta:hover,
.page-home .proven-cta .btn--orange:hover {
  background: #0A1F4D; color: var(--light-blue); box-shadow: 0 16px 32px -6px rgba(3, 17, 48, .4);
}
.mobile-drawer .btn, .mobile-drawer .btn:hover { background: var(--light-blue); color: var(--navy); }

/* WhatsApp + chat icons on every page = the homepage look: card-blue
   circle with a navy icon. */
.whatsapp-float, .chatbot-float { background: #D9DEEA; }
.whatsapp-float svg { fill: var(--navy); }
.chatbot-float svg { stroke: var(--navy); }
.chatbot-float svg circle { fill: var(--navy); }

/* Back-to-top arrow (bottom-left; WhatsApp + chat sit bottom-right). */
.to-top {
  position: fixed; left: 24px; bottom: 24px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--light-blue);
  box-shadow: 0 10px 24px -6px rgba(3, 17, 48, .45);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #0A1F4D; transform: translateY(-3px); }
@media (max-width: 600px) {
  .to-top { left: 16px; bottom: 16px; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
/* Same card-blue circle + navy icon as WhatsApp/chat, so it stands out on the navy footer. */
.to-top { background: #D9DEEA; color: var(--navy); box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .4); }
.to-top:hover { background: var(--light-blue); }

/* ============================================================
   FOOTER v2 -- brand column (logo, tagline, social squares), Explore,
   Company, Mumbai Office (orange icons), then a bottom bar with
   copyright | We're in ... | legal links.
   ============================================================ */
.site-footer.ft { padding: 0; font-family: "Manrope", var(--font-body); color: rgba(255,255,255,.72); }
.ft-grid {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.2fr; gap: 40px 48px;
  padding: clamp(40px, 4.4vw, 60px) 0 clamp(32px, 3.4vw, 46px);
}
.ft-logo { height: 58px; width: auto; display: block; margin: 0 0 18px -6px; }
.ft-tagline { margin: 0 0 22px; max-width: 32ch; font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.62); }
.ft-social { display: flex; gap: 12px; }
.ft-social a {
  width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.72);
  transition: background .25s, color .25s, transform .25s;
}
.ft-social a:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateY(-2px); }
.ft-social svg { width: 16px; height: 16px; }
.ft-col h2 {
  margin: 4px 0 22px; font-family: "Manrope", var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ft-col a { color: rgba(255,255,255,.72); font-size: 1rem; text-decoration: none; transition: color .2s; }
.ft-col a:hover { color: #fff; }
.ft-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.ft-item svg {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
  fill: none; stroke: #F0602A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ft-item address { font-style: normal; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 30ch; }
.ft-office a.ft-strong { color: #fff; font-weight: 500; font-size: 1rem; }
.ft-office a.ft-strong:hover { color: #fff; opacity: .8; }
.ft-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.ft-bottom-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px;
  padding: 22px 0; font-size: .86rem;
}
.ft-copy { color: rgba(255,255,255,.5); }
.ft-cities { color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .02em; }
.ft-cities strong { color: #fff; font-weight: 700; margin-right: 4px; letter-spacing: .04em; }
.ft-cities i { font-style: normal; margin: 0 4px; opacity: .6; }
.ft-legal { justify-self: end; display: flex; gap: 20px; }
.ft-legal a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .9rem; }
.ft-legal a:hover { color: #fff; }
@media (max-width: 1024px) {
  .ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ft-brand, .ft-office { grid-column: 1 / -1; }
  .ft-bottom-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ft-legal { justify-self: center; }
}
/* Footer spans wider than the page content, 4 equal columns (as designed). */
.site-footer.ft .container { width: min(1430px, calc(100% - 48px)); }
.ft-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
@media (max-width: 1024px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
.ft-tagline { max-width: 36ch; }
.ft-item address { max-width: 34ch; }
/* Keep footer text clear of the floating buttons (up-arrow left, WhatsApp/chat right). */
@media (min-width: 1025px) { .site-footer.ft .container { width: min(1430px, calc(100% - 210px)); } }
.ft-col h2.ft-subhead { margin: 26px 0 16px; }

/* Footer 20% shorter: less empty space above/below, tighter gaps. */
.ft-grid { padding: clamp(26px, 2.6vw, 36px) 0 clamp(18px, 2vw, 26px); }
.ft-logo { height: 52px; margin-bottom: 12px; }
.ft-tagline { margin-bottom: 16px; line-height: 1.5; }
.ft-col h2 { margin: 2px 0 14px; }
.ft-col ul { gap: 8px; }
.ft-item { margin-bottom: 10px; }
.ft-item address { line-height: 1.5; }
.ft-col h2.ft-subhead { margin: 16px 0 10px; }
.ft-bottom-inner { padding: 14px 0; }
/* "Enquiries & Communications" always on one line. */
.ft-col h2.ft-subhead { white-space: nowrap; letter-spacing: .1em; }
@media (max-width: 1360px) { .ft-col h2.ft-subhead { letter-spacing: .06em; font-size: .78rem; } }

/* Logos 50% bigger: header logo (shown while scrolling) 70 -> 105px,
   footer logo 52 -> 78px. The PNG has empty space above/below the mark,
   so the footer one is pulled up to keep the column tidy. */
.brand-logo--light { height: 105px; }
.ft-logo { height: 78px; margin: -14px 0 0 -9px; }
.ft-logo { margin-left: -3px; }
/* Section links land with the title clear of the (taller) sticky header. */
.pillar { scroll-margin-top: 110px !important; }

/* ============================================================
   All round arrow buttons: transparent circle (outline only) with a
   simple chevron (> < ^) instead of a long arrow. Navy on light
   sections, white on the navy sections.
   ============================================================ */
.chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.svc-arrow, .page-home .svc-arrow, .clients-arrow, .news-arrow-link, .intel-arrow,
.founder-slider-arrow, .founder-slider-arrow--solid, .to-top {
  background: transparent !important; box-shadow: none !important;
  border: 1.6px solid currentColor !important; color: var(--navy);
}
.svc-arrow, .page-home .svc-arrow, .clients-arrow, .news-arrow-link { color: var(--navy) !important; }
.intel-arrow, .founder-slider-arrow, .founder-slider-arrow--solid { color: #fff !important; }
.svc-arrow:hover, .page-home .svc-arrow:hover, .clients-arrow:hover, .news-arrow-link:hover { background: rgba(3, 17, 48, .08) !important; }
.intel-arrow:hover, .founder-slider-arrow:hover { background: rgba(255, 255, 255, .12) !important; }
/* The up-arrow floats over light pages AND the navy footer, so it
   inverts against whatever is behind it to stay visible. */
.to-top { color: #fff !important; mix-blend-mode: difference; }
.to-top:hover { background: transparent !important; transform: translateY(-3px); }
/* Impact intro: last line starts from the left like a normal paragraph. */
.impact-intro p { text-align-last: left; }

/* WhatsApp + chat buttons sit a little higher (40px up). */
.whatsapp-float { bottom: 64px; }
.chatbot-wrap { bottom: 128px; }
.chatbot-popup { bottom: 190px; }
@media (max-width: 600px) {
  .whatsapp-float { bottom: 48px; }
  .chatbot-wrap { bottom: 104px; }
  .chatbot-popup { bottom: 160px; }
}
/* Home: header logo appears only once the big hero logo has scrolled away
   (main.js adds .show-brand), never both at once. */
body.page-home .site-header.scrolled .brand,
body.page-home .site-header .brand { opacity: 0; pointer-events: none; }
body.page-home .site-header.show-brand .brand { opacity: 1; pointer-events: auto; }
/* Home page: no small underline dash under section headings. */
body.page-home .testi-underline { display: none; }

/* Legal pages (Privacy Policy): simple readable text column. */
.legal-page { padding: calc(var(--header-h) + 70px) 0 clamp(40px, 5vw, 70px); }
.legal-wrap { max-width: 820px; color: var(--ink); }
.legal-wrap h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 6px; }
.legal-updated { color: var(--ink-soft); font-size: .9rem; margin: 0 0 28px; }
.legal-wrap h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 34px 0 12px; }
.legal-wrap p, .legal-wrap li { font-size: .98rem; line-height: 1.7; color: #2F3A52; }
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul { margin: 0 0 14px; padding-left: 22px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-contact { padding: 16px 20px; background: #D9DEEA; border-radius: 12px; }
/* Dark header items need a backdrop on this light page with no banner. */
body.page-legal .site-header .header-collab,
body.page-legal .nav-toggle span { color: var(--navy); }
body.page-legal .brand-logo--light { display: none; }
body.page-legal .brand-logo--dark { display: block; height: 105px; width: auto; }
body.page-legal .nav-toggle span { background: var(--navy); box-shadow: none; }
body.page-legal .header-collab { text-shadow: none; }
/* dark logo file has no padding, so a smaller height matches the white one */
body.page-legal .brand-logo--dark { height: 52px; margin-top: 6px; }
body.page-legal .brand-logo--dark { height: 66px; margin-top: 4px; }
.legal-wrap a { color: var(--navy); text-decoration: underline; }

/* Legal pages v2: navy title band at the top (so the white homepage logo,
   "Contact Us" and menu show on it), text left-aligned with the logo. */
body.page-legal .brand-logo--light { display: block; }
body.page-legal .brand-logo--dark { display: none; }
body.page-legal .nav-toggle span { background: #fff; }
body.page-legal .site-header .header-collab { color: #fff; }
.legal-hero {
  background: var(--navy); color: #fff;
  padding: calc(var(--header-h) + 64px) 0 clamp(30px, 3.4vw, 44px);
}
.legal-hero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 6px; }
.legal-hero .legal-updated { color: rgba(255, 255, 255, .65); margin: 0; }
.legal-page { padding: clamp(30px, 3.6vw, 48px) 0 clamp(40px, 5vw, 70px); }
.legal-wrap { max-width: none; }
.legal-wrap > * { max-width: 900px; }
.legal-wrap > h2:first-child { margin-top: 0; }

/* ============================================================
   MOBILE OPTIMISATION PASS (phones / small tablets). Desktop is
   untouched: everything is inside max-width queries, except the
   hidden-menu shadow fix and the TGTF top spacing, which are
   correct at every size.
   ============================================================ */
/* Closed menu panel no longer casts a shadow onto the page edge. */
.mobile-drawer { box-shadow: none; }
.mobile-drawer.open { box-shadow: -24px 12px 48px -20px rgba(0,0,0,.5); }
/* TGTF has no banner: keep its collage clear of the header. */
body.page-tgtf .section:first-of-type { padding-top: calc(var(--header-h) + 28px); }

@media (max-width: 760px) {
  /* Home: no forced full-screen sections (caused big empty gaps). */
  .impact, .growth, .proven, .clients { min-height: 0; display: block; padding-top: 44px; padding-bottom: 44px; }
  .section { padding: 44px 0; }
  /* "Our Impact" paragraph: normal left-aligned text (justify left big word gaps). */
  .impact-intro p { text-align: left; }
  /* Instagram posts 2 x 2 instead of 4 huge stacked squares. */
  .social-posts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* About: leadership bios show in full (no fixed card shape cutting text). */
  .leader-card { aspect-ratio: auto; }
  .leader-photo { flex: 0 0 auto; aspect-ratio: 3 / 2; }
  .office-list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  /* Case Studies: photo always on top on phones. */
  .cs-study-media { order: -1; }
  /* India Insights: chart title no longer pulled up behind the chart. */
  .market-stat-text h3 { margin-top: 16px; }
  /* Comfortable tap targets. */
  .ft-col ul { gap: 2px; }
  .ft-col a { display: inline-block; padding: 7px 0; }
  .ft-legal a, .ft-office a.ft-strong { padding: 6px 0; }
  .header-collab { padding: 10px 4px; }
  .legal-wrap a { display: inline-block; padding: 4px 0; }
}
/* India Insights "Top Destinations" chart: on phones it scrolls sideways
   inside its card (swipe), so each country's bars and labels have room. */
@media (max-width: 720px) {
  .dest-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding: 18px 4px 6px; scrollbar-width: thin; }
  .dest-col { flex: 0 0 54px; }
  .dest-track { max-width: 20px; }
  .dest-value { font-size: .62rem; }
  .dest-card::after {
    content: "Swipe to see all countries \2192"; display: block; text-align: right;
    font-size: .7rem; color: rgba(255,255,255,.55); margin-top: 6px;
  }
}
@media (max-width: 760px) {
  /* keep icon + text side by side in the footer office links */
  .ft-col a.ft-item { display: flex; }
}
/* TGTF has no dark banner: use the dark logo / navy header items there. */
/* TGTF: no dark banner, so the header gets a navy bar -- the logo is then the
   same white logo as everywhere else, with white Contact Us + menu. */
body.page-tgtf .site-header { background: var(--navy); box-shadow: 0 6px 20px -12px rgba(0,0,0,.45); }
@media (max-width: 900px) {
  /* India Insights slider (home): arrows sit below the chart, not on top of it. */
  .intel-slider { padding-bottom: 60px; }
  .intel-arrow { top: auto; bottom: 0; transform: none; }
  .intel-arrow--prev { left: calc(50% - 54px); }
  .intel-arrow--next { right: calc(50% - 54px); }
}
@media (max-width: 900px) {
  .intel-viewport { width: 100%; max-width: 100%; }
}

/* ============================================================
   FOUNDERS v2 (About Us): two-column split on navy -- italic role,
   signature-style name, bio and LinkedIn on the left; photo on the
   right; a thin vertical line between them.
   ============================================================ */
.fd2 { background: var(--navy); }
.fd2-heading { color: #fff; margin-bottom: clamp(24px, 3vw, 40px); }
.fd2-row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  column-gap: clamp(32px, 5vw, 80px); position: relative;
  padding: clamp(10px, 1.5vw, 20px) 0;
}
.fd2-row::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: rgba(255, 255, 255, .16);
}
.fd2-text { padding-right: clamp(0px, 2vw, 24px); }
.fd2-role {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, .78); margin: 0 0 clamp(26px, 3.4vw, 46px);
}
.fd2-name {
  font-family: "Mrs Saint Delafield", cursive; font-weight: 400;
  font-size: clamp(3.4rem, 6vw, 5.2rem); line-height: 1; color: #fff; margin: 0 0 clamp(20px, 2.6vw, 34px);
}
.fd2-bio p { color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.7; margin: 0 0 14px; }
.fd2-linkedin {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  color: #fff; font-size: .9rem; text-decoration: none; opacity: .85;
  border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 3px;
}
.fd2-linkedin:hover { opacity: 1; }
.fd2-photo { justify-self: center; width: min(100%, 470px); }
.fd2-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
@media (max-width: 860px) {
  .fd2-row { grid-template-columns: 1fr; row-gap: 28px; }
  .fd2-row::before { display: none; }
  .fd2-photo { order: -1; width: 100%; }
  .fd2-photo img { aspect-ratio: 1 / 1; }
  .fd2-text { padding-right: 0; }
  .fd2-role { margin-bottom: 18px; }
}
/* Founders section ~10% shorter: tighter spacing, slightly smaller photo. */
.fd2.section { padding-top: clamp(32px, 3.4vw, 46px); padding-bottom: clamp(26px, 3vw, 40px); }
.fd2-heading { margin-bottom: clamp(16px, 2vw, 26px); }
.fd2-row { padding: 0; }
.fd2-role { margin-bottom: clamp(16px, 2.2vw, 30px); }
.fd2-name { margin-bottom: clamp(14px, 1.8vw, 24px); }
.fd2-bio p { line-height: 1.6; margin-bottom: 11px; }
.fd2-photo { width: min(100%, 430px); }
@media (max-width: 860px) {
  .fd2-row { row-gap: 20px; }
  .fd2-photo img { aspect-ratio: 5 / 4; }
}
/* Founders section another ~20% shorter: wider text column (fewer lines),
   smaller name + bio text, smaller photo. */
.fd2.section { padding-top: clamp(26px, 2.8vw, 38px); padding-bottom: clamp(22px, 2.4vw, 32px); }
.fd2-heading { margin-bottom: clamp(10px, 1.4vw, 18px); }
.fd2-row { grid-template-columns: 1.45fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
.fd2-row::before { left: 59.2%; }
.fd2-role { font-size: clamp(.98rem, 1.2vw, 1.1rem); margin-bottom: clamp(8px, 1.2vw, 16px); }
.fd2-name { font-size: clamp(2.8rem, 4.6vw, 4rem); margin-bottom: clamp(10px, 1.3vw, 16px); }
.fd2-bio p { font-size: .92rem; line-height: 1.55; margin-bottom: 9px; }
.fd2-linkedin { margin-top: 4px; }
.fd2-photo { width: min(100%, 360px); }
@media (max-width: 860px) {
  .fd2-row { grid-template-columns: 1fr; row-gap: 16px; }
  .fd2-photo img { aspect-ratio: 16 / 11; object-position: center 22%; }
  .fd2-name { font-size: 2.7rem; }
  .fd2-bio p { font-size: .88rem; line-height: 1.5; }
}
@media (max-width: 760px) {
  /* Leadership cards on phones: text panel sizes to its full bio. */
  .leader-card-body { flex: 0 0 auto; overflow: visible; padding-bottom: 18px; }
}

/* ============================================================
   LARGE SCREENS (desktop monitors). Laptops (<=1600px) are unchanged
   apart from the header sitting in the corners.
   ============================================================ */
/* Header: logo top-left, Contact Us + menu top-right on every screen. */
.header-inner { width: auto; max-width: none; margin-inline: 0; padding-inline: clamp(24px, 3.2vw, 80px); }
/* Content area + text grow in steps on big monitors, so pages keep the
   same proportions as on a laptop instead of shrinking to a narrow strip. */
@media (min-width: 1700px) { :root { --container: 1400px; } html { font-size: 17.5px; } }
@media (min-width: 2200px) { :root { --container: 1640px; } html { font-size: 19.5px; } }
/* home portfolio logo boxes used a fixed 1200px reference */
body.page-home .portfolio-track .client-cell {
  width: max(clamp(180px, 17vw, 240px), calc(min(var(--container), 100vw - 48px) / (var(--n) - 0.5)));
}
.header-inner { width: 100%; box-sizing: border-box; flex: 1 1 auto; }
/* Home hero logo: same corner position as the header logo on every screen. */
.hero-top-block { left: clamp(24px, 3.2vw, 80px); }

/* ============================================================
   UNIFORM SECTION WIDTHS (tablets / laptops / monitors): every
   section's content uses the same left + right edges as the main
   content container, instead of some running edge-to-edge and
   others squeezed into narrow columns. Phones keep their own layout.
   ============================================================ */
@media (min-width: 861px) {
  /* footer: same width as the page content */
  .site-footer.ft .container { width: min(var(--container), calc(100% - 48px)); }
  /* testimonials strip: inside the content edges (soft fade at both ends) */
  .testi-marquee { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
  /* news + instagram + FAQ + leadership: full content width */
  .faq-list { max-width: none; }
  .leader-grid { max-width: none; }
  .leader-card { aspect-ratio: auto; }
  .leader-photo { flex: 0 0 auto; aspect-ratio: 3 / 2; }
  .leader-card-body { flex: 1 1 auto; overflow: visible; padding-bottom: 18px; }
}

/* Big screens: content area grows with the screen so the empty space at
   the left/right stays about the same as on a laptop (~80px at 1366px),
   instead of the content stopping at 1200px and leaving wide margins. */
@media (min-width: 1400px) {
  :root { --container: min(calc(100vw - 2 * clamp(80px, 5.5vw, 150px)), 2100px); }
}

/* ============================================================
   Leadership cards (About Us) -- reference shape: soft, very rounded
   card with the photo inset inside it (its own rounded corners and a
   small frame of card colour around it), text centred underneath.
   Same content and navy colour as before.
   ============================================================ */
.leader-grid { gap: clamp(18px, 2vw, 28px); }
.leader-card {
  background: var(--navy); border: 0; border-radius: 30px; padding: 10px;
  box-shadow: 0 22px 46px -26px rgba(3, 17, 48, .55);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.leader-card:hover { transform: translateY(-5px); box-shadow: 0 28px 54px -26px rgba(3, 17, 48, .65); }
.leader-photo { border-radius: 22px; overflow: hidden; }
.leader-photo img { border-radius: 22px; }
.leader-card-body { background: transparent; padding: 18px 16px 16px; }
.leader-card-body strong { font-size: 1.15rem; }
@media (min-width: 861px) {
  .leader-photo { aspect-ratio: 4 / 3; }
}
/* overflow-x: clip (not hidden) on html/body: still stops sideways scroll,
   but doesn't turn body into a scroll box -- so position:sticky works
   (needed for the pinned Case Studies scroll animation). */
html, body { overflow-x: clip; }

/* ============================================================
   BLOG (/blogs and /blogs/<slug>) -- reuses the legal-page navy band.
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ink);
  background: #fff; border-radius: 18px; box-shadow: 0 18px 40px -26px rgba(3, 17, 48, .4);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -24px rgba(3, 17, 48, .5); }
.blog-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-cover--plain {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 25% 20%, #13295C 0%, var(--navy) 60%);
}
.blog-card-mark { font-family: Georgia, serif; font-size: 1.6rem; letter-spacing: .08em; color: rgba(255,255,255,.85); }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.blog-meta { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.blog-card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--navy); }
.blog-card-sub { font-size: .92rem; color: #B34A00; font-weight: 500; }
.blog-card-excerpt { font-size: .92rem; line-height: 1.6; color: #2F3A52; }
.blog-card-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; }
.blog-author { color: var(--ink-soft); }
.blog-read { color: var(--navy); font-weight: 600; }
.blog-back { display: inline-block; margin-bottom: 14px; color: rgba(255,255,255,.75); text-decoration: none; font-size: .9rem; }
.blog-back:hover { color: #fff; }
.blog-hero h1 { max-width: 22ch; }
.blog-subtitle { color: #F2B58A; font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 4px 0 12px; }
.blog-article { max-width: 820px; }
.blog-intro { font-size: 1.12rem !important; line-height: 1.75 !important; color: var(--navy) !important; font-weight: 500; }
.blog-cover { width: 100%; border-radius: 16px; margin-bottom: 24px; }
.blog-end { margin-top: 36px !important; }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* Our Impact: heading word + KPI numbers in plain white (no silver gradient).
   Hover still turns the number orange. */
.impact-title .word-mask:last-child .word-reveal,
.impact-title .mru-word-mask:last-child .mru-word,
.impact-number { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.impact-item:hover .impact-number { -webkit-text-fill-color: #CC5500; color: #CC5500; }
/* "Impact" in the Our Impact heading: burnt orange. */
.impact-title .word-mask:last-child .word-reveal,
.impact-title .mru-word-mask:last-child .mru-word { -webkit-text-fill-color: #CC5500; color: #CC5500; }
/* "Impact": same orange gradient as the What We Do card hover. */
.impact-title .word-mask:last-child .word-reveal,
.impact-title .mru-word-mask:last-child .mru-word {
  background: linear-gradient(135deg, #FF8A4C 0%, #F0602A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* "IMPACT": elegant italic serif, all caps, orange gradient. */
.impact-title .word-mask:last-child .word-reveal,
.impact-title .mru-word-mask:last-child .mru-word {
  font-family: "Playfair Display", "Playfair Fallback", Georgia, serif; font-style: italic; font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em; padding-right: .08em;
}
/* "Impact": capital I, rest lowercase (as written). */
.impact-title .word-mask:last-child .word-reveal,
.impact-title .mru-word-mask:last-child .mru-word { text-transform: none; letter-spacing: 0; }
/* Leadership cards 10% narrower (row shrunk to 90%, centred). */
@media (min-width: 861px) {
  .leader-grid { width: calc(90% - 2px); margin-inline: auto; }
}

/* Accent words in home headings ("Drives Growth", "Full-Spectrum"):
   same style as "Impact" -- Playfair Display italic + orange gradient. */
.hl-accent {
  font-family: "Playfair Display", "Playfair Fallback", Georgia, serif; font-style: italic; font-weight: 400;
  background: linear-gradient(135deg, #FF8A4C 0%, #F0602A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-right: .08em;
}
/* Growth heading: plain navy text (its old text-clip background showed as
   a faint outline around the orange accent words). */
.growth-title-link h2.mru-words,
.growth-title-link h2.mru-words .mru-word { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
.growth-title-link h2.mru-words .hl-accent { -webkit-text-fill-color: transparent; color: transparent; background: linear-gradient(135deg, #FF8A4C 0%, #F0602A 100%); -webkit-background-clip: text; background-clip: text; }
/* Blog post title: one line on laptops/desktops (wraps naturally on phones). */
.blog-hero h1 { max-width: none; font-size: clamp(1.7rem, 2.75vw, 2.8rem); }
@media (min-width: 1024px) { .blog-hero h1 { white-space: nowrap; } }

/* Case study with no photo yet ("image": None) -- branded navy placeholder
   in the same frame as the real photos. */
.cs-study-media--placeholder { background: linear-gradient(135deg, #031130 0%, #0b2a6b 100%); }
.cs-study-media--placeholder::after { display: none; }
.cs-study-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
  color: #fff; border: 1px dashed rgba(255,255,255,.28); margin: 14px; border-radius: 10px;
}
.cs-study-placeholder span { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); }
.cs-study-placeholder small { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }

/* Home "India Outbound Insights": bigger heading + orange "Insights" accent
   (.hl-accent), with extra space before the intro text. */
body.page-home .intel-top-heading { font-size: clamp(1.8rem, 3.3vw, 2.9rem); margin-bottom: 28px; }

/* Home Instagram feed: cards 10% wider (5% + 5%, same height) on desktop -- the row
   grows past the 780px text column, centred. */
@media (min-width: 1025px) {
  .social-posts { width: 110.25%; margin-inline: -5.125%; }
  .social-post { aspect-ratio: 17.64/17.28; }
}

/* Home "India Outbound Insights": "Explore ->" link to the India Outbound
   Insights page -- same look as the testimonials' "Read More", in light
   colours for the navy background. */
.intel-explore {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 80px; padding: 0 0 3px;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: .95rem; letter-spacing: .08em;
  color: #E8EBF1; border-bottom: 2px solid #E8EBF1; text-decoration: none;
}
.intel-explore-ico {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #F0602A;
  display: inline-flex; align-items: center; justify-content: center; transform: translateY(1px);
  transition: transform .3s;
}
.intel-explore-ico svg { width: 15px; height: 15px; fill: none; stroke: #F0602A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intel-explore:hover { color: #fff; border-color: #fff; }
.intel-explore:hover .intel-explore-ico { transform: translate(3px, 1px); }
/* Desktop: the intel text block is vertically centred, so a bigger margin
   would also lift the heading -- nudge only the link down instead. */
@media (min-width: 1025px) {
  .intel-explore { margin-top: 48px; position: relative; top: 10px; }
}

/* ==========================================================================
   ONE LOGO SIZE EVERYWHERE -- header (every page, sticky), homepage and
   footer all show the same BRANDit logo (images/logo/brandit-logo-*-hd.png,
   trimmed artwork) at --logo-h. On the homepage the header logo is shown
   from the start (the separate big hero logo is hidden), so it simply stays
   put as the header sticks while scrolling. Change the size here only.
   ========================================================================== */
:root { --logo-h: clamp(46px, 4.62vw, 66px); }
.site-header .brand-logo--light,
.site-header .brand-logo--dark,
body.page-legal .site-header .brand-logo--dark,
body.page-tgtf .site-header .brand-logo--dark { height: var(--logo-h) !important; width: auto; margin-top: 0 !important; }
.ft-logo { height: var(--logo-h) !important; width: auto; margin: 0 0 18px !important; }
body.page-home .hero-destination-logo-top { display: none; }
body.page-home .site-header .brand,
body.page-home .site-header:not(.scrolled) .brand { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .site-header .brand { padding-top: 12px; } }

/* Founders: LinkedIn icon next to the name (same icon as the leadership
   cards, a touch larger to suit the big name). */
.fd2-name.name-with-social { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.fd2-li img, .fd2-li svg { width: 30px; height: 30px; }
/* Founders: name first (Playfair Display italic, like the "Impact"
   accent, but in the existing white), designation below in capitals. */
.fd2-name, .fd2-name.name-with-social {
  font-family: "Playfair Display", "Playfair Fallback", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 2.7vw, 2.4rem); line-height: 1.1; color: #fff;
  margin: 0 0 clamp(8px, 1vw, 12px);
}
.fd2-role { text-transform: uppercase; letter-spacing: .14em; margin-bottom: clamp(16px, 2vw, 26px); }
@media (max-width: 600px) { .fd2-name, .fd2-name.name-with-social { font-size: 1.7rem; } }

/* Phones: "YOUR INDIA GROWTH PARTNER" on one line, sized to the screen. */
@media (max-width: 600px) {
  .hero-destination-eyebrow.hero-eyebrow-center { white-space: nowrap; font-size: min(4.5vw, 1.088rem); letter-spacing: .1em; }
}

/* Background/reel videos are decoration only: no browser video controls,
   download/settings buttons or tap menus on phones (taps fall through to
   the link around a reel). */
#hero-video, .social-post video { pointer-events: none; }
#hero-video::-webkit-media-controls,
.social-post video::-webkit-media-controls,
#hero-video::-webkit-media-controls-panel,
.social-post video::-webkit-media-controls-panel,
#hero-video::-webkit-media-controls-overlay-play-button,
.social-post video::-webkit-media-controls-overlay-play-button,
#hero-video::-webkit-media-controls-start-playback-button,
.social-post video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* Home hero: video only. The photo stays hidden unless the video can't play
   (index.html adds .is-shown); dark background while the video starts. */
.hero-destination-media { background: #031130; }
.hero-destination-media .hero-destination-poster { opacity: 0; transition: opacity .6s ease; }
.hero-destination-media .hero-destination-poster.is-shown { opacity: 1; }
/* No fade / no navy: the video sits over its own first-frame still and is
   visible from the start. */
.hero-destination-media .hero-first-frame { position: absolute; inset: 0; }
.hero-destination-media .hero-destination-poster { position: absolute; inset: 0; }
.hero-destination-media video { opacity: 1; transition: none; }
/* Hero video is painted onto #hero-canvas (see index.html); the real
   <video> is a near-invisible 2px source so phone browsers never put their
   download/settings buttons on it. */
.hero-destination-media #hero-video { position: absolute; top: 0; left: 0; inset: auto; width: 2px; height: 2px; opacity: .01; }
.hero-destination-media #hero-video.hero-video--plain { inset: 0; width: 100%; height: 100%; opacity: 1; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; }
#hero-canvas.is-ready { opacity: 1; }

/* Phones: "Contact Us" sits close to the hamburger menu. */
@media (max-width: 600px) { .site-header .header-collab { margin-right: -24px; } }

/* ==========================================================================
   ONE SECTION-HEADING STYLE -- every main section heading on the site
   (home: Our Impact, Expertise That Drives Growth, A Full-Spectrum Marketing
   Platform, Case Studies, Testimonials, Our Clients, India Outbound Insights,
   News, Instagram Live; About: What Sets Us Apart, The Founders, Leadership,
   Where We Are; Expertise: Services We Offer; Our Clients: Current/Past
   Clients) uses the same font and size. Change it here only.
   ========================================================================== */
:root { --section-heading-size: clamp(1.5rem, 2.6vw, 2.35rem); }
.section-title,
.svc-title,
.proven-head .section-title,
body.page-home .intel-top-heading,
.social-live h3 {
  font-family: var(--font-display);
  font-size: var(--section-heading-size);
  font-weight: 500; letter-spacing: -.015em; line-height: 1.08;
}

/* ==========================================================================
   ONE SUB-HEADING STYLE -- the intro line under a section heading uses the
   same font and size everywhere (home: Full-Spectrum intro, India Outbound
   Insights text, Instagram Live line; Our Clients: Destination / Hospitality /
   DMC's labels; Blogs page intro). Colours stay per background.
   Change it here only.
   ========================================================================== */
:root { --subheading-size: clamp(1.02rem, 1.3vw, 1.15rem); }
html body.page-home .svc-intro,
html body.page-home .intel-top-lead,
html body .social-live p,
html body .blogs-intro,
html body.page-clients .portfolio-label {
  font-family: var(--font-display);
  font-size: var(--subheading-size);
  font-weight: 400; line-height: 1.55;
}
.ft-logo-link { display: inline-block; }
.ft-logo-link:hover .ft-logo { opacity: .85; }

/* Leadership cards: name styled like the founder's name (Playfair Display
   italic), designation like the founder's designation (Fraunces italic
   capitals). Colours unchanged (white name, orange designation). */
.leader-card .leader-card-body strong {
  font-family: "Playfair Display", "Playfair Fallback", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.2rem; letter-spacing: 0; line-height: 1.15;
}
.leader-card .leader-card-body span {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; font-size: .82rem;
}
/* TGTF navy header bar: tall enough for the whole logo on desktop. */
@media (min-width: 901px) {
  body.page-tgtf .site-header { height: auto; padding: 10px 0; }
  body.page-tgtf .site-header .brand { padding-top: 0; }
  body.page-tgtf .section:first-of-type { padding-top: 126px; }
}

/* ==========================================================================
   ONE HEADING SPACING -- every section heading on the site sits the same
   distance below the start of its section (--sec-top), and its content (or
   its sub-heading line, then content) follows at the same gaps.
   Change the spacing here only.
   ========================================================================== */
:root {
  --sec-top:  clamp(28px, 2.6vw, 36px);   /* section start -> heading       */
  --sub-gap:  clamp(8px, 1vw, 12px);      /* heading -> sub-heading line    */
  --head-gap: clamp(20px, 2.5vw, 36px);   /* heading/sub-heading -> content */
}
body.page-home .impact.section,
body.page-home .growth.section,
body.page-home .services.svc.section,
body.page-home .proven.section,
body.page-home .testimonials.section,
body.page-home .clients.section,
body.page-home .news.section,
body.page-home .affil.section,
.section.founders.fd2 { padding-top: var(--sec-top); }
.section-title, .svc-title, .social-live h3, body.page-home .intel-top-heading,
body.page-home .clients .section-title { margin-top: 0; margin-bottom: var(--head-gap); }
/* Heading followed by a sub-heading line. */
body.page-home .svc-title, .social-live h3, body.page-home .intel-top-heading { margin-bottom: var(--sub-gap); }
html body.page-home .svc-intro, html body .social-live p, html body.page-home .intel-top-lead { margin-top: 0; margin-bottom: var(--head-gap); }
/* Per-section leftovers brought onto the shared spacing above. */
html body.page-home h2.svc-title { margin: 0 0 var(--sub-gap); }
html body.page-home .svc-head { margin-bottom: 0; }
body.page-home .impact-head { margin-bottom: 0; }
body.page-home .impact-intro { margin-top: 0; margin-bottom: clamp(24px, 3vw, 40px); }
body.page-home .growth-head { margin-bottom: 0; }
html body.page-home .growth-cine-stage { margin-top: 0; }
body.page-home .proven-head { margin-top: 0; margin-bottom: 0; }
html body.page-home .cs2-grid { margin-top: 0; }
html body .expertise-pillars-section .section-title { margin-bottom: var(--head-gap); }
html body .pillars { margin-top: 0; }
/* Every section that starts with a section heading: same top space on all
   pages and screen sizes (phones had their own 44px). The element right
   after a heading adds no margin of its own, so the gap is always --head-gap. */
html body .section:has(> .container > .section-title:first-child) { padding-top: var(--sec-top); }
.section-title + *, .svc-head + *, .growth-head + *, .news-head + * { margin-top: 0; }
/* Visual heading -> content gap: subtract the built-in space some card
   strips have above their cards (hover-lift room), so every section *looks*
   the same distance from heading to content. */
html body.page-home .testimonials .section-title { margin-bottom: max(0px, calc(var(--head-gap) - 22px)); }
html body.page-home .svc-intro { margin-bottom: max(0px, calc(var(--head-gap) - 6px)); }
/* Equal space between sections: every section that starts with a heading
   has the same space at its bottom as at its top. */
body.page-home .impact.section,
body.page-home .growth.section,
body.page-home .services.svc.section,
body.page-home .proven.section,
body.page-home .testimonials.section,
body.page-home .clients.section,
body.page-home .news.section,
body.page-home .affil.section,
.section.founders.fd2,
html body .section:has(> .container > .section-title:first-child) { padding-bottom: var(--sec-top); }
/* Leftover bottom spacing removed so the gap between sections is the same. */
html body.page-home .testimonials.section { padding-bottom: max(0px, calc(var(--sec-top) - 22px)); }
html body.page-home .testi-marquee { margin-bottom: -39px; }
html body.page-home .impact.section { padding-bottom: max(0px, calc(var(--sec-top) - 9px)); }
html body.page-home .clients.section { padding-bottom: max(0px, calc(var(--sec-top) - 20px)); }
html body.page-home .intel.section { padding-top: max(0px, calc(var(--sec-top) - 10px)); }
html body.page-home .clients .portfolio-marquee:last-of-type { margin-bottom: 0; }
html body .about-story p:last-child { margin-bottom: 0; }
html body.page-clients .portfolio { margin-bottom: 0; }
html body .news-head { margin-bottom: var(--head-gap); }
html body .fd2-bio p:last-child { margin-bottom: 0; }
html body .about-story-section { padding-bottom: var(--sec-top); }
@media (max-width: 900px) {
  /* (the slider's arrow row already leaves ~32px below it on phones) */
  html body.page-home .intel.section { padding-top: var(--sec-top); padding-bottom: 0; }
  html body.page-home .intel-explore { margin-top: var(--head-gap); }
}
html body.page-clients .past-clients-grid { margin-top: -15px; }

/* Home "Our Clients" logos: sized as a share of the content width (not a
   fixed px box), so every laptop -- small or large -- shows the same number
   of logos per row at the same proportions. */
:root { --content-w: min(var(--container), calc(100vw - 48px)); }
/* Reference = the look on a 1920x1080 laptop at 150% scaling (~1265px
   wide): ~5.5 logos in view. Same share of the screen on every laptop. */
html body.page-home .portfolio-track .client-cell { width: max(140px, calc(var(--content-w) / 5.5)); }
html body.page-home .portfolio-track .client-cell img { max-height: clamp(44px, calc(var(--content-w) * .063), 96px); }
@media (max-width: 600px) {
  html body.page-home .portfolio-track .client-cell { width: 128px; }
  html body.page-home .portfolio-track .client-cell img { max-height: 52px; }
}

/* ==========================================================================
   SECTION RHYTHM (final) -- every section heading sits the same distance
   (--vgap) below whatever is directly above it: a colour change OR the
   previous section's content. So: every section has --vgap at its top, and
   --vgap at its bottom ONLY where the next section has a different
   background (content never touches a colour edge). Same-colour neighbours
   therefore sit exactly --vgap apart, like the colour edges.
   ========================================================================== */
:root { --vgap: clamp(32px, 4vw, 56px); }
/* Home: light run = growth, services, proven, testimonials, clients | navy = impact, intel | light run = news, affil */
html body.page-home .impact.section,
html body.page-home .growth.section,
html body.page-home .services.svc.section,
html body.page-home .proven.section,
html body.page-home .testimonials.section,
html body.page-home .clients.section,
html body.page-home .intel.section,
html body.page-home .news.section,
html body.page-home .affil.section { padding-top: var(--vgap); padding-bottom: 0; }
html body.page-home .impact.section { padding-bottom: calc(var(--vgap) - 9px); }          /* -> growth (colour change) */
html body.page-home .clients.section { padding-bottom: max(0px, calc(var(--vgap) - 20px)); } /* -> India (navy) */
html body.page-home .intel.section { padding-top: calc(var(--vgap) - 10px); padding-bottom: var(--vgap); } /* -> News (light) */
html body.page-home .affil.section { padding-bottom: var(--vgap); }                       /* -> footer (navy) */
html body.page-home .testi-marquee { margin-bottom: -44px; }  /* cancel the strip's hover room below the cards */
@media (max-width: 900px) {
  html body.page-home .intel.section { padding-top: var(--vgap); padding-bottom: max(0px, calc(var(--vgap) - 32px)); }
}
/* About: story, values (soft) | founder (navy) | leadership, offices (soft) */
html body .section:has(> .container > .section-title:first-child),
html body .section.founders.fd2 { padding-top: var(--vgap); padding-bottom: 0; }
html body.page-about .section--soft:has(+ .founders),
html body .section.founders.fd2 { padding-bottom: var(--vgap); }
html body .about-story-section { padding-bottom: 0; }
/* Last headed section before the CTA band / footer keeps its bottom space. */
html body:not(.page-home) .section:has(> .container > .section-title:first-child):not(:has(+ .section)) { padding-bottom: var(--vgap); }
/* Explicit section bottoms (win over the general rules above). */
html body.page-home .testimonials.section { padding-bottom: 0 !important; }
html body.page-home .clients.section { padding-bottom: max(0px, calc(var(--vgap) - 35px)) !important; }
html body.page-home .intel.section { padding-top: calc(var(--vgap) + 12px); }
html body.page-about .section--soft:has(+ .founders),
html body .section.founders.fd2 { padding-bottom: var(--vgap) !important; }

/* Testimonial cards 20% taller (364 -> 437px; tablet 320 -> 384; phone 300 -> 360). */
.testi-stack-card { height: 437px; }
@media (max-width: 1024px) { .testi-stack-card { height: 384px; } }
@media (max-width: 600px)  { .testi-stack-card { height: 360px; } }
html body.page-home .testi-stack-card blockquote { -webkit-line-clamp: 11; }
@media (max-width: 1024px) { html body.page-home .testi-stack-card blockquote { -webkit-line-clamp: 8; } }
@media (max-width: 600px)  { html body.page-home .testi-stack-card blockquote { -webkit-line-clamp: 7; } }
/* Logo cells carry their own inner space, which changes with screen size. */
@media (min-width: 1500px) { html body.page-home .clients.section { padding-bottom: 0 !important; } }
@media (max-width: 600px) {
  html body.page-home .clients.section { padding-bottom: 15px !important; }
  html body.page-home .intel.section { padding-top: calc(var(--vgap) + 4px); }
}

/* Header slides away while scrolling down, back on any scroll up (main.js). */
.site-header { transition: transform .35s var(--ease), opacity .35s var(--ease), background-color .35s var(--ease); }
.site-header.header-away { transform: translateY(-110%); }
.site-header.header-away .brand,
.site-header.header-away .header-collab,
.site-header.header-away .nav-toggle { pointer-events: none; }

/* About "What Sets Us Apart": 6 cards = 3 per row on laptops (2 rows),
   2 per row on tablets, 1 on phones. */
html body .values-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; }  /* every card the same size */
@media (max-width: 1024px) { html body .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { html body .values-grid { grid-template-columns: 1fr; } }
html body .value-card h3 { min-height: 0; margin-bottom: 10px; }
/* FAQ answers: links (emails, Contact form, Case Studies, Our Clients). */
.faq-item p a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: #F0602A; text-underline-offset: 3px; }
.faq-item p a:hover { color: #F0602A; }

/* Phones/tablets: India Insights arrows on the chart's left/right edges,
   centred on the chart (main.js sets --intel-arrow-y), glass style like
   the other homepage arrows. */
@media (max-width: 900px) {
  html body .intel-slider { padding-bottom: 0; }
  html body .intel-arrow {
    top: var(--intel-arrow-y, 180px); bottom: auto; transform: translateY(-50%);
    width: 36px; height: 36px; z-index: 6;
    background: rgba(3, 17, 48, .35) !important; color: #fff !important;
    border: 1.6px solid #fff !important; box-shadow: none !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
  }
  html body .intel-arrow:hover { transform: translateY(-50%); background: rgba(3, 17, 48, .5) !important; }
  html body .intel-arrow--prev { left: -18px; right: auto; }
  html body .intel-arrow--next { right: -18px; left: auto; }
}

/* About "What Sets Us Apart": phone slider -- one card + < > arrows
   (same glass arrows as the homepage). Hidden on tablet/laptop. */
.values-slider { position: relative; }
.values-slider .cs2-arrow { display: none; }
@media (max-width: 600px) {
  html body .values-slider .values-grid {
    display: flex; grid-template-columns: none; grid-auto-rows: auto; gap: 24px;
    margin: 0 -24px; padding: 4px 24px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .values-slider .values-grid::-webkit-scrollbar { display: none; }
  html body .values-slider .value-card { flex: 0 0 100%; scroll-snap-align: center; }
  html body .values-slider .cs2-arrow {
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(3, 17, 48, .35); color: #fff;
    border: 1.6px solid #fff;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
  }
  html body .values-slider .cs2-arrow .chev { width: 18px; height: 18px; }
  html body .values-slider .cs2-arrow--prev { left: -18px; }
  html body .values-slider .cs2-arrow--next { right: -18px; }
}

/* ==========================================================================
   APPLE / iOS / macOS SAFARI SUPPORT
   ========================================================================== */
/* iPhone: no automatic text enlarging in landscape; no grey tap flash. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, .svc-card, .cs2-card { -webkit-tap-highlight-color: transparent; }
/* Mac (Safari/Chrome): crisp, even text rendering. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* iPhone zooms the whole page when a form field under 16px is tapped --
   keep form fields at 16px on phones/tablets. */
@media (max-width: 1024px) {
  input, textarea, select { font-size: 16px !important; }
}
/* iPhone home-indicator / notch: keep floating buttons clear of it. */
@supports (padding: env(safe-area-inset-bottom)) {
  .chatbot-wrap, .whatsapp-float, .to-top { margin-bottom: env(safe-area-inset-bottom); }
}
/* Touch screens have no hover: don't leave cards "stuck" in hover state. */
@media (hover: none) {
  .client-cell:hover, .testi-stack-card:hover, .svc-card:hover, .cs2-card:hover { transform: none; }
}

/* ==========================================================================
   TABLETS (601-1024px: iPad, iPad Air/Pro, Android tablets, portrait and
   landscape) -- layouts sized for the tablet width instead of stretched
   phone layouts.
   ========================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  html body .news-grid { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 14px; }
  html body .social-posts { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  html body .social-live { max-width: none; }
}

/* ==========================================================================
   LANGUAGES (content/i18n.py) -- header switcher + per-language support
   ========================================================================== */
.lang-switch { position: relative; margin-left: auto; pointer-events: auto; }
.lang-switch + .header-collab { margin-left: 18px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; cursor: pointer;
  background: none; border: 0; color: #fff; font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.lang-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
.lang-btn:hover { opacity: .8; }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; list-style: none; margin: 0; padding: 6px;
  min-width: 168px; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(3,17,48,.45);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: block; padding: 9px 12px; border-radius: 8px; color: var(--navy); text-decoration: none;
  font-family: var(--font-display); font-size: .92rem;
}
.lang-menu a:hover { background: #E8EBF1; }
.lang-menu a[aria-current] { color: #F0602A; font-weight: 700; }
.site-header.header-away .lang-switch { pointer-events: none; }
@media (max-width: 600px) {
  /* phones: language button sits close to "Contact Us" (gap ~18px; the header row itself adds 24px) -- 25 Oct 2026 */
  .lang-switch + .header-collab { margin-left: -10px; white-space: nowrap; }   /* one line even on 320px phones */
  .lang-btn { padding: 8px 2px; }
}
.legal-lang-note { color: rgba(255,255,255,.75); font-size: .9rem; margin: 0 0 10px; }

/* Scripts not in our Latin fonts: their own font, Latin parts keep ours. */
html.lang-ar body, html.lang-ar body * { font-family: "Mulish", "Noto Sans Arabic", sans-serif; font-style: normal; }
html.lang-ja body, html.lang-ja body * { font-family: "Mulish", "Noto Sans JP", sans-serif; font-style: normal; }
html.lang-th body, html.lang-th body * { font-family: "Mulish", "Noto Sans Thai", sans-serif; font-style: normal; }
html.lang-ar .testi-sign, html.lang-ja .testi-sign, html.lang-th .testi-sign { font-family: "Mrs Saint Delafield", cursive; }
/* Arabic: text reads right-to-left; the page layout itself stays as is. */
html.dir-rtl :is(p, h1, h2, h3, h4, h5, li, blockquote, summary, label, dd, dt, figcaption, td, th,
  .cs2-headline, .cs2-summary, .cs2-tag, .news-tag, .svc-card-desc, .svc-card-title, .pillar-list-label) {
  direction: rtl; unicode-bidi: plaintext;
}
html.dir-rtl :is(p, li, blockquote, label, dd, .cs2-headline, .cs2-summary, .svc-card-desc, .faq-item p) { text-align: right; }
html.dir-rtl :is(.center, .section-title.center, .impact-intro p, .svc-intro, .social-live p, .page-hero-sub) { text-align: center; }
html.dir-rtl .testi-stack-card blockquote { text-align: right; }
/* Longer words in other languages: let lines wrap instead of overflowing. */
html:not(.lang-en) :is(.hero-eyebrow-center, .hero-destination-line:first-child, .growth-title-link h2, .blog-hero h1, .ft-col h2.ft-subhead) { white-space: normal !important; }
html:not(.lang-en) :is(h1, h2, h3, h4, p, li, a, span, button, summary) { overflow-wrap: break-word; hyphens: auto; }
/* Page banner titles in other languages can be much longer than English:
   allow them to wrap within the screen and size down a little. */
html:not(.lang-en) .hero-watermark {
  white-space: normal; right: 0; overflow-wrap: break-word;
  font-size: clamp(1.3rem, 4.2vw, 3.6rem); line-height: 1.05; top: 72%;
}

/* Case studies written as the client's own paragraphs (approach_text / result in site_content.py). */
.cs-study-block p + p { margin-top: 8px; }
.cs-study-result { margin-top: 4px; }
.cs-study-impact ul li strong { font-weight: 700; }
.cs-study-subtitle { margin: -6px 0 16px; font-size: 1rem; line-height: 1.45; color: var(--ink); }
/* Brand logo/stamp over a case-study photo ("logo" in site_content.py): top-left, never zoomed or cropped. */
.cs-study-media img.cs-study-logo { inset: auto; top: 16px; left: 16px; width: clamp(64px, 17%, 104px); height: auto;
  object-fit: contain; transform: none; z-index: 2; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.cs-study-intro p { font-size: .95rem; line-height: 1.6; }
.cs-study-intro { margin-bottom: 18px; }
/* Long impact headings (e.g. "The Festival in numbers in 2026 - 2nd Edition") wrap instead of running off a phone screen. */
.cs-study-impact h4 { flex: 0 0 auto; max-width: 100%; }
@media (min-width: 861px) { .cs-study-impact h4 { max-width: 36%; } }
/* Case Studies page: group headings between the cards ("section" in site_content.py). */
.cs-group-title { font-family: var(--font-display); font-size: var(--section-heading-size); font-weight: 500;
  letter-spacing: -.015em; line-height: 1.1; text-align: center; margin: clamp(24px,4vw,56px) 0 clamp(20px,2.6vw,32px); }
.cs-group-title--first { margin-top: 0; }
/* Photo credit on a case-study photo (licence requirement), bottom corner, small and unobtrusive. */
.cs-study-credit { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: .62rem; letter-spacing: .02em;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.35); padding: 2px 7px; border-radius: 4px; text-decoration: none; }
.cs-study-credit:hover { color: #fff; background: rgba(0,0,0,.55); }
/* Case-study photos with text on them ("still" in site_content.py): no zoom crop. */
.cs-study-media img[data-still] { transform: none; }
/* SEO (24 Oct 2026): the banner name and the home "YOUR INDIA GROWTH PARTNER" line are now the
   page's H1 -- these keep them looking exactly as the old <span>s did. */
h1.hero-watermark { margin: 0; }
.page-hero h1.hero-watermark { font-size: clamp(1.75rem, 5.46vw, 4.34rem); max-width: none; }
@media (max-width: 480px) { .page-hero h1.hero-watermark { font-size: clamp(1.33rem, 5.46vw, 4.34rem); } }
h1.hero-destination-eyebrow { margin-top: 0; line-height: inherit; }
/* FAQ questions are H2s for Google -- same look as the old plain text. */
.faq-item summary h2.faq-q { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; margin: 0; }
/* Our Expertise: service numbers drawn by CSS (not part of the H2 text Google reads). */
.pillar-body h2[data-num]::before { content: attr(data-num); }
.pillar { position: relative; }
.pillar .anchor-alias { position: absolute; top: 0; left: 0; scroll-margin-top: var(--header-h); }

/* ==========================================================================
   INDIA OUTBOUND INSIGHTS (partials/insights_latest.html, content/india_outbound_latest.py)
   Redesigned 25 Oct 2026 (dataviz method). Light cards on the page's light-blue, navy text,
   values in TEXT colours (never the series colour). Chart colours = roles, validated with the
   dataviz validator on white: stacked bars blue/orange/aqua/yellow/magenta (all checks pass;
   aqua/yellow/magenta < 3:1 -> legend + values always visible), gain orange vs loss blue,
   2025 orange line vs 2024 grey (emphasis: highlight one, grey the rest).
   ========================================================================== */
.ioi {
  --t1: #031130; --t2: #44506b; --t3: #6a748b;
  --surface: #ffffff; --line-ioi: #e3e7ef; --grid: #e9edf3;
  --c-blue: #1E4FA8; --c-orange: #EB6834; --c-aqua: #1BAF7A; --c-yellow: #EDA100; --c-magenta: #E87BA4;
  --c-rest: #c8cdd8; --c-2024: #9aa3b6;
  padding: clamp(28px, 4vw, 56px) 0 0; color: var(--t1);
}
.ioi .container > * + * { margin-top: clamp(16px, 2.2vw, 28px); }
.ioi h2, .ioi h3 { font-family: var(--font-display); color: var(--t1); letter-spacing: -.01em; }

/* Cards */
.ioi-sec { background: var(--surface); border: 1px solid var(--line-ioi); border-radius: 20px;
  padding: clamp(20px, 3vw, 40px); box-shadow: 0 1px 2px rgba(3,17,48,.04), 0 8px 24px -16px rgba(3,17,48,.18);
  scroll-margin-top: calc(var(--header-h, 67px) + 16px); }
.ioi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  margin-bottom: clamp(16px, 2vw, 24px); }
.ioi-head h2 { margin: 0; font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.15; }
.ioi-tag { font-size: .82rem; font-weight: 700; color: var(--c-orange); letter-spacing: .02em; }
.ioi-h3 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.ioi-h3--small { font-size: .85rem; color: var(--t2); text-transform: uppercase; letter-spacing: .06em; margin-top: 18px; }
.ioi-sub { color: var(--t3); font-size: .9rem; margin: -6px 0 12px; }
.ioi-note { color: var(--t2); font-size: .92rem; line-height: 1.5; margin: 14px 0 0; }
.ioi-note b { color: var(--t1); }
.ioi-source { color: var(--t3); font-size: .76rem; line-height: 1.5; margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: 12px; border-top: 1px solid var(--line-ioi); }
.ioi-source span { color: var(--t2); font-weight: 700; }
.ioi-divider { height: 1px; background: var(--line-ioi); margin: clamp(20px, 2.6vw, 30px) 0; }
.ioi-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(22px, 3.6vw, 52px); align-items: start; }

/* Headline + jump links */
.ioi-top > * { min-width: 0; }
.ioi-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
.ioi-top-stat { background: #031130; color: #fff; border-radius: 20px; padding: clamp(20px, 3vw, 36px);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: clamp(16px, 2.4vw, 32px); align-items: end; }
.ioi-kicker { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--t3); }
.ioi-top-stat .ioi-kicker { grid-column: 1 / -1; color: rgba(255,255,255,.62); margin-bottom: 6px; }
.ioi-top-value { margin: 0; grid-row: 2 / span 2; font-weight: 800; letter-spacing: -.035em; line-height: .9;
  font-size: clamp(2.8rem, 6.4vw, 5rem); }
.ioi-top-label { margin: 0; font-size: clamp(.98rem, 1.4vw, 1.12rem); line-height: 1.35; align-self: end; }
.ioi-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ioi-chips li { font-size: .82rem; color: rgba(255,255,255,.78); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; }
.ioi-chips b { color: #fff; font-weight: 700; }
.ioi-jump { background: var(--surface); border: 1px solid var(--line-ioi); border-radius: 20px; padding: clamp(16px, 2vw, 22px); }
.ioi-jump ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ioi-jump a { display: inline-block; font-size: .84rem; font-weight: 600; color: var(--t1); text-decoration: none;
  padding: 7px 12px; border-radius: 999px; background: #f1f4f9; border: 1px solid var(--line-ioi);
  transition: background .2s, border-color .2s, color .2s; }
.ioi-jump a:hover, .ioi-jump a:focus-visible { background: #fff2ec; border-color: var(--c-orange); color: var(--t1); outline: none; }

/* Key numbers: 4 groups side by side */
.ioi-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(14px, 2.2vw, 28px); border-top: 2px solid var(--t1); }
.ioi-keys-group { display: grid; gap: 14px; align-content: start; padding-top: 16px; }
.ioi-keys-label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-orange); }
.ioi-key-value { display: block; font-weight: 800; font-size: clamp(1.45rem, 2.3vw, 2.05rem); line-height: 1.05; letter-spacing: -.02em; color: var(--t1); }
.ioi-key-text { display: block; color: var(--t2); font-size: .86rem; line-height: 1.4; margin-top: 4px; }

/* Line chart */
.ioi-when { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.ioi-fig { margin: 0; min-width: 0; }
.ioi-plot { position: relative; }
.ioi-plot--narrow { display: none; }
.ioi-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ioi-grid { stroke: var(--grid); stroke-width: 1; }
.ioi-axis { fill: var(--t3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ioi-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ioi-line--a { stroke: var(--c-orange); stroke-width: 3; }
.ioi-line--b { stroke: var(--c-2024); }
.ioi-dot { fill: var(--c-orange); stroke: #fff; stroke-width: 2; }
.ioi-point { fill: var(--t1); font-size: 13px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.ioi-cross { stroke: var(--t3); stroke-width: 1; opacity: 0; transition: opacity .15s; }
.ioi-plot.is-hover .ioi-cross { opacity: .55; }
.ioi-hit { fill: transparent; cursor: crosshair; outline: none; }
.ioi-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; color: var(--t2); }
.ioi-legend b { color: var(--t1); font-weight: 700; }
.ioi-legend-line::before { content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 7px; }
.ioi-legend-line--a::before { background: var(--c-orange); }
.ioi-legend-line--b::before { background: var(--c-2024); }
.ioi-legend-sq::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; background: var(--c-rest); }
.ioi-callouts { list-style: none; margin: 0; padding: 0 0 0 clamp(16px, 2vw, 26px); border-left: 3px solid var(--c-orange); display: grid; gap: 18px; }
.ioi-callout-value { display: block; font-weight: 800; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.05; color: var(--t1); }
.ioi-callouts p { margin: 4px 0 0; color: var(--t2); line-height: 1.45; font-size: .92rem; }

/* Data table (every chart's table-view twin) */
.ioi-table { margin-top: 12px; }
.ioi-table summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--t2); width: max-content; list-style: none;
  padding: 5px 10px; border: 1px solid var(--line-ioi); border-radius: 999px; }
.ioi-table summary::-webkit-details-marker { display: none; }
.ioi-table summary::before { content: "▸ "; }
.ioi-table[open] summary::before { content: "▾ "; }
.ioi-table-wrap { overflow-x: auto; margin-top: 10px; }
.ioi-table table { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ioi-table th, .ioi-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-ioi); text-align: right; color: var(--t1); }
.ioi-table th:first-child { text-align: left; font-weight: 600; }
.ioi-table thead th { color: var(--t3); font-weight: 600; }

/* Horizontal bars (single series = one colour) */
.ioi-hbars, .ioi-dbars { list-style: none; margin: 0; padding: 0; }
.ioi-hbars li, .ioi-dbars li { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(76px, max-content); gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line-ioi); outline: none; border-radius: 6px; }
.ioi-hbars li:last-child, .ioi-dbars li:last-child { border-bottom: 0; }
.ioi-hbars li:focus-visible, .ioi-dbars li:focus-visible { box-shadow: 0 0 0 2px var(--c-orange); }
.ioi-hbar-name { font-weight: 600; color: var(--t1); font-size: .93rem; min-width: 0; overflow-wrap: anywhere; }
.ioi-hbar-name i { font-style: normal; color: var(--t3); display: inline-block; width: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ioi-hbar-track { display: block; height: 12px; }
.ioi-hbar { display: block; height: 100%; width: var(--w); background: var(--c-blue); border-radius: 0 4px 4px 0; }
.ioi-hbars--alt .ioi-hbar { background: var(--c-orange); }
.ioi-hbar-val { text-align: right; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; font-size: .93rem; white-space: nowrap; }

/* Diverging bars: loss blue <- 0 -> gain orange, scaled to the real ranges */
.ioi-dbar-track { display: grid; grid-template-columns: var(--cols, 1fr 1fr); }  /* widths in proportion to the biggest fall / rise */
.ioi-dbar-neg { display: flex; justify-content: flex-end; border-right: 1px solid var(--t2); height: 12px; }
.ioi-dbar-pos { display: block; height: 12px; }
.ioi-dbar { display: block; height: 100%; width: var(--w); }
.ioi-dbar--gain { background: var(--c-orange); border-radius: 0 4px 4px 0; }
.ioi-dbar--loss { background: var(--c-blue); border-radius: 4px 0 0 4px; }
.ioi-seg-key--gain::before { background: var(--c-orange); }
.ioi-seg-key--loss::before { background: var(--c-blue); }
.ioi-legend--sq { margin-bottom: 8px; }

/* 100% stacked bars (2px surface gap between segments) */
.ioi-stacks { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.ioi-stack { display: flex; gap: 2px; height: 40px; }
.ioi-seg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0 10px; overflow: hidden; outline: none;
  font-size: .86rem; color: var(--t1); background: var(--c-rest); }
.ioi-seg:first-child { border-radius: 8px 0 0 8px; }
.ioi-seg:last-child { border-radius: 0 8px 8px 0; }
.ioi-seg:focus-visible { box-shadow: inset 0 0 0 2px var(--t1); }
.ioi-seg b { font-weight: 800; white-space: nowrap; }
.ioi-seg--0, .ioi-seg-key--0::before { background: var(--c-blue); }
.ioi-seg--0 { color: #fff; }
.ioi-seg--1, .ioi-seg-key--1::before { background: var(--c-orange); }
.ioi-seg--2, .ioi-seg-key--2::before { background: var(--c-aqua); }
.ioi-seg--3, .ioi-seg-key--3::before { background: var(--c-yellow); }
.ioi-seg--4, .ioi-seg-key--4::before { background: var(--c-magenta); }
.ioi-seg--rest, .ioi-seg-key--rest::before { background: var(--c-rest); }
.ioi-stack-block .ioi-legend { margin: 10px 0 0; }

/* Demand */
.ioi-hero-tile { background: #fff6f1; border: 1px solid #fde1d3; border-radius: 16px; padding: clamp(18px, 2.4vw, 26px); }
.ioi-hero-num { display: block; font-weight: 800; letter-spacing: -.035em; line-height: .95; font-size: clamp(2.8rem, 6vw, 4.4rem); color: var(--t1); }
.ioi-hero-tile p { margin: 8px 0 0; color: var(--t2); line-height: 1.45; font-size: 1rem; }
.ioi-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ioi-pills li { background: #fff; border: 1px solid #f7cdb8; color: var(--t1); font-weight: 600; font-size: .88rem; padding: 5px 12px; border-radius: 999px; }

/* Online India -- the one dark card */
.ioi-sec--dark { background: #031130; border-color: #031130; color: #fff; }
.ioi-sec--dark h2, .ioi-sec--dark h3, .ioi-sec--dark .ioi-hero-num { color: #fff; }
.ioi-sec--dark .ioi-source { color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.14); }
.ioi-sec--dark .ioi-source span { color: rgba(255,255,255,.85); }
.ioi-online-stat p { margin: 8px 0 0; color: rgba(255,255,255,.82); line-height: 1.5; max-width: 42ch; }
.ioi-online-stat b { color: #fff; }
.ioi-meter { display: block; height: 10px; border-radius: 6px; background: rgba(255,255,255,.16); margin-top: 14px; max-width: 420px; overflow: hidden; }
.ioi-meter span { display: block; height: 100%; width: var(--w); background: var(--c-orange); border-radius: 6px; }
.ioi-journey { list-style: none; margin: clamp(20px, 2.6vw, 30px) 0 0; padding: clamp(18px, 2.2vw, 26px) 0 0; border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.ioi-journey h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 800; }
.ioi-journey h3 span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-orange); color: #031130; font-size: .8rem; }
.ioi-journey-sub { margin: 4px 0 12px; color: rgba(255,255,255,.66); font-size: .9rem; }
.ioi-journey-stat { margin-bottom: 10px; }
.ioi-journey-stat b { display: block; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 800; line-height: 1.1; }
.ioi-journey-stat p { margin: 2px 0 0; color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.45; }

/* What to watch */
.ioi-watch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.ioi-watch li { background: #f6f8fb; border: 1px solid var(--line-ioi); border-top: 3px solid var(--c-orange); border-radius: 14px; padding: 18px 16px; }
.ioi-watch-value { display: block; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: var(--t1); }
.ioi-watch p { margin: 8px 0 0; color: var(--t2); line-height: 1.45; font-size: .9rem; }

/* Tooltip (main.js) */
.ioi-tip { position: fixed; z-index: 60; pointer-events: none; background: #031130; color: #fff; border-radius: 10px;
  padding: 8px 11px; font-size: .82rem; line-height: 1.45; box-shadow: 0 10px 24px -10px rgba(3,17,48,.6); max-width: 240px; }
.ioi-tip b { display: block; font-weight: 700; margin-bottom: 2px; }
.ioi-tip span { display: block; color: rgba(255,255,255,.88); }
.ioi-sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.ioi-sw--a { background: var(--c-orange); }
.ioi-sw--b { background: var(--c-2024); }
[data-tip] { cursor: default; }

/* ---------- Responsive ---------- */
@media (min-width: 1700px) { .ioi-axis { font-size: 11px; } }
@media (max-width: 1100px) {
  .ioi-top { grid-template-columns: minmax(0, 1fr); }
  .ioi-keys { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
  .ioi-when { grid-template-columns: 1fr; }
  .ioi-callouts { grid-template-columns: repeat(3, 1fr); border-left: 0; border-top: 3px solid var(--c-orange); padding: 16px 0 0; }
  .ioi-watch { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ioi-cols, .ioi-journey { grid-template-columns: 1fr; }
  .ioi-callouts { grid-template-columns: 1fr; }
  .ioi-top-stat { grid-template-columns: 1fr; }
  .ioi-top-value { grid-row: auto; margin: 2px 0 6px; }
  .ioi-jump ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ioi-jump ul::-webkit-scrollbar { display: none; }
  .ioi-jump li { flex: 0 0 auto; }
  /* phone: a separate taller chart drawn at phone size (every other month labelled) */
  .ioi-plot--wide { display: none; }
  .ioi-plot--narrow { display: block; }
  .ioi-hbars li, .ioi-dbars li { grid-template-columns: minmax(78px, 112px) minmax(0, 1fr) minmax(64px, max-content); gap: 10px; }
  .ioi-hbar-name, .ioi-hbar-val { font-size: .86rem; }
  .ioi-stack { height: 36px; }
  .ioi-seg { padding: 0 6px; font-size: .78rem; }
}
@media (max-width: 420px) {
  .ioi-keys { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .ioi-key-value { font-size: 1.3rem; }
  .ioi-watch { grid-template-columns: 1fr; }
  .ioi-seg b { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .ioi-cross, .ioi-jump a { transition: none; } }
/* Arabic (RTL): bar tracks and charts stay left-to-right so gains/losses and timelines read the same way. */
html.dir-rtl .ioi-dbar-track, html.dir-rtl .ioi-hbar-track, html.dir-rtl .ioi-plot, html.dir-rtl .ioi-meter { direction: ltr; }
/* 32.8M headline: no card background -- sits directly on the page, navy text. */
.ioi-top-stat { background: none; color: var(--t1); padding-left: 0; padding-right: 0; border-radius: 0; }
.ioi-top-stat .ioi-kicker { color: var(--t3); }
.ioi-top-label { color: var(--t1); }
.ioi-chips li { color: var(--t2); background: #fff; border-color: var(--line-ioi); }
.ioi-chips b { color: var(--t1); }
/* "Jump to" sits below the 32.8M headline on every screen. */
.ioi-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ioi-top-stat { padding-top: 0; padding-bottom: 0; }

/* ---- India Outbound Insights hero (user's mockup, 25 Oct 2026): cream -> photo, serif figure, orange accents,
        navy "Jump to" band with icon chips. Photo supplied by the user. ---- */
.ioi-hero2 { --gold: var(--orange-mid, #F0602A); --gold-soft: #FDE3D6; --cream: #F7F2EA; --band: #16213A;
  position: relative; overflow: hidden; border-radius: 22px; background: var(--cream); color: var(--t1);
  box-shadow: 0 18px 40px -28px rgba(3,17,48,.45); isolation: isolate; }
.ioi-hero2-photo { position: absolute; inset: 0 0 auto auto; width: 62%; height: 100%; z-index: -1;
  background-size: cover; background-position: 62% 55%; }
.ioi-hero2-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(247,242,234,.92) 22%, rgba(247,242,234,.55) 46%, rgba(247,242,234,0) 72%); }
.ioi-hero2-body { padding: clamp(28px, 4.4vw, 60px) clamp(24px, 4.4vw, 60px) clamp(28px, 3.6vw, 48px); max-width: 980px; }
.ioi-hero2-eyebrow { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--t1); }
.ioi-hero2-meta { margin: 10px 0 0; display: flex; align-items: center; gap: 14px; font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--t3); }
.ioi-hero2-meta::before { content: ""; width: 40px; height: 1.5px; background: var(--gold); flex: 0 0 auto; }
.ioi-hero2-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 3.4vw, 46px); align-items: center;
  margin-top: clamp(22px, 3vw, 38px); }
.ioi-hero2-fig { padding-right: clamp(22px, 3.4vw, 46px); border-right: 1px solid rgba(240,96,42,.45); }
.ioi-hero2-value { margin: 0; font-family: "Bodoni Moda", "Playfair Fallback", Georgia, serif; font-weight: 500;
  font-size: clamp(3.6rem, 8vw, 6.6rem); line-height: .92; letter-spacing: -.03em; color: var(--t1); }
.ioi-hero2-label { margin: 14px 0 0; font-family: "Bodoni Moda", "Playfair Fallback", Georgia, serif; font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.2; max-width: 11em; color: var(--t1); }
.ioi-hero2-title { display: flex; align-items: center; gap: 14px; margin: 0; font-family: "Bodoni Moda", "Playfair Fallback", Georgia, serif;
  font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--t1); letter-spacing: -.005em; }
.ioi-hero2-badge { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold);
  display: grid; place-items: center; background: rgba(255,255,255,.55); }
.ioi-hero2-badge svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.ioi-hero2-text { margin: 14px 0 0; color: var(--t2); font-size: .98rem; line-height: 1.6; max-width: 46ch; }
.ioi-hero2-pills { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ioi-hero2-pills li { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; min-width: 150px;
  padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,.62); border: 1px solid rgba(240,96,42,.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ioi-hero2-tri { grid-row: 1 / span 2; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid var(--gold); }
.ioi-hero2-pills b { font-size: 1.15rem; font-weight: 700; color: var(--t1); line-height: 1.1; }
.ioi-hero2-pills small { grid-column: 2; font-size: .8rem; color: var(--t3); }

.ioi-hero2-jump { background: var(--band); color: #fff; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 4.4vw, 60px) clamp(20px, 2.6vw, 30px);
  border-radius: 22px 22px 0 0; margin-top: -4px; }
.ioi-hero2-jump-title { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.ioi-hero2-jump-title::after { content: ""; width: 34px; height: 1.5px; background: var(--gold); }
.ioi-hero2-jump ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ioi-hero2-jump a { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 48px; padding: 8px 12px 8px 8px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; font-size: .8rem; line-height: 1.25;
  transition: background .2s, border-color .2s; }
.ioi-hero2-jump a:hover, .ioi-hero2-jump a:focus-visible { background: rgba(255,255,255,.07); border-color: var(--gold); outline: none; }
.ioi-hero2-chip-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-soft); color: #B8461C;
  display: grid; place-items: center; }
.ioi-hero2-chip-icon svg { width: 16px; height: 16px; }
.ioi-hero2-chip-text { flex: 1 1 auto; min-width: 0; }
.ioi-hero2-arrow { flex: 0 0 auto; color: rgba(255,255,255,.75); transition: transform .2s; }
.ioi-hero2-jump a:hover .ioi-hero2-arrow { transform: translateX(3px); }
html.dir-rtl .ioi-hero2-arrow { transform: scaleX(-1); }
html.dir-rtl .ioi-hero2-photo { inset: 0 auto auto 0; transform: scaleX(-1); }
html.dir-rtl .ioi-hero2-pills b, html.dir-rtl .ioi-hero2-value { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 1180px) {
  .ioi-hero2-jump ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ioi-hero2-photo { width: 100%; height: 230px; background-position: 55% 45%; }
  .ioi-hero2-photo::after { background: linear-gradient(180deg, rgba(247,242,234,0) 30%, var(--cream) 100%); }
  .ioi-hero2-body { padding-top: 150px; }
  .ioi-hero2-main { grid-template-columns: 1fr; gap: 22px; }
  .ioi-hero2-fig { padding-right: 0; border-right: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(240,96,42,.45); }
  .ioi-hero2-label { max-width: none; }
  .ioi-hero2-jump ul { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ioi-hero2-jump ul::-webkit-scrollbar { display: none; }
  .ioi-hero2-jump li { flex: 0 0 auto; }
  .ioi-hero2-jump a { white-space: nowrap; }
}
@media (max-width: 480px) {
  .ioi-hero2-body { padding: 128px 20px 26px; }
  .ioi-hero2-photo { height: 190px; }
  .ioi-hero2-pills li { min-width: 0; flex: 1 1 0; padding: 10px 14px; }
  .ioi-hero2-meta { letter-spacing: .12em; }
}
/* hero refinements: serif story title (beats `.ioi h2`), clearer wing, compact 2-line chips on laptops */
.ioi .ioi-hero2-title { font-family: "Bodoni Moda", "Playfair Fallback", Georgia, serif; font-weight: 500; }
@media (min-width: 901px) {
  .ioi-hero2-photo { width: 60%; background-position: 78% 55%; }
  .ioi-hero2-photo::after { background: linear-gradient(90deg, var(--cream) 0%, rgba(247,242,234,.86) 14%, rgba(247,242,234,.35) 36%, rgba(247,242,234,0) 56%); }
  .ioi-hero2-jump { padding-left: clamp(18px, 2.4vw, 36px); padding-right: clamp(18px, 2.4vw, 36px); }
  .ioi-hero2-jump ul { gap: 8px; }
  .ioi-hero2-jump a { gap: 8px; padding: 6px 10px 6px 6px; font-size: .76rem; }
  .ioi-hero2-chip-icon { width: 28px; height: 28px; }
  .ioi-hero2-chip-icon svg { width: 15px; height: 15px; }
}
@media (min-width: 1181px) {
  /* chips share the row by label length, so no label runs past two lines */
  .ioi-hero2-jump ul { display: flex; }
  .ioi-hero2-jump li { flex: 1 1 0; min-width: 0; }
  .ioi-hero2-jump li:nth-child(2) { flex-grow: 1.15; }
  .ioi-hero2-jump li:nth-child(5) { flex-grow: 1.6; }
  .ioi-hero2-jump li:nth-child(7) { flex-grow: 1.3; }
}
/* hero colours (user, 25 Oct 2026): site navy instead of cream, site orange instead of gold; white text */
.ioi-hero2 { --cream: var(--navy, #031130); --band: #0A1F4D; color: #fff; }
.ioi-hero2-photo::after { background: linear-gradient(90deg, var(--cream) 0%, rgba(3,17,48,.92) 22%, rgba(3,17,48,.55) 50%, rgba(3,17,48,.12) 78%, rgba(3,17,48,0) 100%); }
.ioi-hero2-eyebrow, .ioi-hero2-value, .ioi-hero2-label, .ioi .ioi-hero2-title, .ioi-hero2-pills b { color: #fff; }
.ioi-hero2-meta, .ioi-hero2-pills small { color: rgba(255,255,255,.72); }
.ioi-hero2-text { color: rgba(255,255,255,.85); }
.ioi-hero2-badge { background: rgba(255,255,255,.06); }
.ioi-hero2-pills li { background: rgba(3,17,48,.55); border-color: rgba(240,96,42,.55); }
.ioi-hero2-jump { border-top: 1px solid rgba(255,255,255,.08); }
@media (min-width: 901px) {
  .ioi-hero2-photo::after { background: linear-gradient(90deg, var(--cream) 0%, rgba(3,17,48,.9) 20%, rgba(3,17,48,.5) 48%, rgba(3,17,48,.1) 76%, rgba(3,17,48,0) 100%); }
}
@media (max-width: 900px) {
  .ioi-hero2-photo::after { background: linear-gradient(180deg, rgba(3,17,48,.1) 20%, rgba(3,17,48,.55) 62%, var(--cream) 100%); }
}
@media (min-width: 901px) {
  /* Arabic: the photo sits on the left behind the big figure, so keep it darker there */
  html.dir-rtl .ioi-hero2-photo::after { background: linear-gradient(90deg, var(--cream) 0%, rgba(3,17,48,.88) 25%, rgba(3,17,48,.62) 60%, rgba(3,17,48,.45) 100%); }
  html.dir-rtl .ioi-hero2-fig { text-shadow: 0 2px 18px rgba(3,17,48,.6); }
}

/* ---- "What to watch in 2026" (user's mockup, 25 Oct 2026): light-blue panel (= home Testimonials background
        #E8EBF1), letter-spaced eyebrow + orange rule, big navy title, white cards (line icon, orange dash, figure,
        text), SOURCES row. Site font (Mulish) like the other sections. ---- */
.ioi-watch2 { --w-navy: var(--navy, #031130); --w-orange: var(--orange-mid, #F0602A); --w-line: #E4DCD3;
  background: #E8EBF1; border-color: #DCE1EB; padding: clamp(22px, 3vw, 44px) clamp(18px, 3.2vw, 46px) clamp(18px, 2.4vw, 30px);
  color: var(--w-navy); }
.ioi-watch2-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.ioi-watch2-eyebrow p { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--w-navy); }
.ioi-watch2-eyebrow p + p::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; vertical-align: middle; margin-inline: .8em 1.1em; position: relative; top: -1px; }
.ioi .ioi-watch2-title::before { content: ""; display: block; width: 64px; height: 2px; background: var(--w-orange);
  margin-bottom: clamp(14px, 1.6vw, 20px); }
.ioi .ioi-watch2-title { margin: clamp(12px, 1.4vw, 16px) 0 0; font-family: var(--font-display);
  font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; color: var(--w-navy); }
.ioi-watch2-grid { list-style: none; margin: clamp(18px, 2.2vw, 28px) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.ioi-watch2-grid li { border: 0; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -24px rgba(3,17,48,.35);
  padding: clamp(16px, 1.8vw, 26px) clamp(16px, 1.7vw, 24px) clamp(18px, 1.9vw, 28px); }
.ioi-watch2-icon { display: block; width: clamp(36px, 2.6vw, 46px); height: clamp(36px, 2.6vw, 46px); color: var(--w-navy); }
.ioi-watch2-icon svg { width: 100%; height: 100%; stroke-width: 1.3; }
.ioi-watch2-icon::after { content: ""; display: block; width: 34px; height: 2px; background: var(--w-orange); margin-top: 12px; }
.ioi-watch2-value { display: block; margin-top: 22px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 2.9vw, 2.5rem); line-height: 1; letter-spacing: -.03em; color: var(--w-navy);
  direction: ltr; unicode-bidi: isolate; }
.ioi-watch2-grid p { margin: 10px 0 0; font-family: var(--font-body); font-size: clamp(.88rem, .92vw, .96rem);
  line-height: 1.5; color: var(--t2); }
.ioi-watch2-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: clamp(18px, 2.4vw, 30px);
  padding-top: clamp(12px, 1.4vw, 16px); border-top: 1px solid #CDD3DF; }
.ioi-watch2-src p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--t2); }
.ioi-watch2-src p:first-child { font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--w-navy); }
html.dir-rtl .ioi-watch2-value { text-align: right; }
html.dir-rtl .ioi-watch2-eyebrow, html.dir-rtl .ioi-watch2-src { direction: rtl; }
@media (max-width: 1024px) {
  .ioi-watch2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ioi-watch2-grid { grid-template-columns: 1fr; }
  .ioi-watch2-grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .ioi-watch2-icon { width: 34px; height: 34px; grid-row: 1 / span 2; }
  .ioi-watch2-icon::after { width: 32px; margin-top: 14px; }
  .ioi-watch2-value { margin-top: 0; font-size: 1.9rem; }
  .ioi-watch2-grid p { grid-column: 2; margin-top: 6px; font-size: .92rem; }
  .ioi-watch2-eyebrow { flex-direction: column; align-items: flex-start; }
  .ioi-watch2-eyebrow p { letter-spacing: .2em; font-size: .7rem; }
  .ioi-watch2-eyebrow p + p::before { display: none; }
}

/* ---- Home "India Outbound Insights": ONE chart card (user's choice, 25 Oct 2026) -- 32.8M headline + monthly
        departures 2025 vs 2024, on the section's navy. Same chart as /india-outbound-insights ("When they travel",
        partials/ioi_line_chart.html), recoloured for a dark background; tooltip in white so it shows on navy. ---- */
.ioi--home { --t1: #fff; --t2: rgba(255,255,255,.78); --t3: rgba(255,255,255,.58); --grid: rgba(255,255,255,.12);
  --line-ioi: rgba(255,255,255,.14); --c-orange: #F0602A; --c-2024: rgba(255,255,255,.45);
  padding: 0; color: #fff; min-width: 0; }
.home-ioi-card { border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.03);
  padding: clamp(16px, 2vw, 26px) clamp(16px, 2.2vw, 28px) clamp(12px, 1.5vw, 18px); }
.home-ioi-top { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); padding-bottom: clamp(12px, 1.5vw, 16px);
  border-bottom: 1px solid var(--line-ioi); }
.home-ioi-value { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: .95; letter-spacing: -.035em; color: var(--c-orange); flex: 0 0 auto; direction: ltr; unicode-bidi: isolate; }
.home-ioi-top-text { min-width: 0; }
.home-ioi-label { margin: 0; font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 600; line-height: 1.3; color: #fff; }
.home-ioi-pills { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-ioi-pills li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(240,96,42,.55); background: rgba(240,96,42,.08); font-size: .82rem; }
.home-ioi-pills .ioi-hero2-tri { border-left-width: 5px; border-right-width: 5px; border-bottom: 8px solid var(--c-orange); }
.home-ioi-pills b { font-weight: 700; color: #fff; direction: ltr; unicode-bidi: isolate; }
.home-ioi-pills small { font-size: .8rem; color: var(--t2); }
.home-ioi-chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  margin: clamp(10px, 1.3vw, 14px) 0 2px; }
.home-ioi-tag { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--t2); }
.ioi--home .ioi-legend { margin: 0; font-size: .8rem; }
.ioi--home .ioi-dot { stroke: #031130; }
.ioi--home .ioi-point { stroke: #031130; }
.ioi--home .ioi-plot { margin-top: 2px; }
/* the table is kept for screen readers and the tooltip text, but not shown */
.ioi--home .ioi-table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-ioi-note { display: flex; align-items: baseline; gap: 10px; margin-top: clamp(8px, 1vw, 10px); }
.home-ioi-note-value { flex: 0 0 auto; font-weight: 800; color: var(--c-orange); font-size: 1rem; }
.home-ioi-note p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--t2); }
.ioi--home .ioi-source { margin-top: clamp(8px, 1.1vw, 12px); padding-top: 8px; font-size: .72rem; }
.ioi--home .ioi-tip { background: #fff; color: #031130; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
.ioi--home .ioi-tip span { color: #44506b; }
@media (max-width: 600px) {
  .home-ioi-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .home-ioi-value { font-size: 2.3rem; }
  .home-ioi-pills { margin-top: 8px; }
  .home-ioi-note { display: block; }
  .home-ioi-note-value { margin-right: 6px; }
  .home-ioi-note p { display: inline; }
}
/* large screens: a wider, flatter drawing so the home chart doesn't grow tall with oversized labels */
.ioi--home .ioi-plot--xwide { display: none; }
@media (min-width: 1400px) {
  .ioi--home .ioi-plot--wide { display: none; }
  .ioi--home .ioi-plot--xwide { display: block; }
}

/* Hamburger menu (12 items incl. Careers, 25 Oct 2026): tighter rows on short screens (laptops at 150% scaling,
   small phones) so the whole list fits without scrolling. */
@media (max-height: 820px) {
  .mobile-drawer ul { padding: 10px 24px 14px; gap: 0; }
  .mobile-drawer a { padding: 9px 4px; }
}

/* ---- Pro audit, 25 Oct 2026 ----
   1. No text under 11px (news tags were 10.9px).
   2. Touch screens: links at least 24px tall to tap (WCAG 2.2 "target size") -- the extra padding is cancelled by
      a negative margin, so nothing moves visually.
   3. Menu height uses the real visible screen height on phones (100dvh; 100vh is taller than the screen in iOS Safari).
   4. "Skip to content" link for keyboard users (hidden until focused). */
.news-tag { font-size: .72rem; }
@media (pointer: coarse) {
  .site-footer a, .header-collab, .blog-back, .cr-mail-link, .cr-consent a { padding-block: 4px; margin-block: -4px; }
}
@supports (height: 100dvh) {
  .mobile-drawer { max-height: calc(100dvh - var(--header-h) - 20px); }
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px;
  background: #fff; color: var(--navy, #031130); font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(3,17,48,.25); }
.skip-link:focus { top: 12px; outline: 2px solid #F0602A; outline-offset: 2px; }
/* 5. Small orange labels darkened just enough for 4.5:1 contrast (the bright orange stays for big text, lines, icons). */
.ioi-tag { color: #C4501F; }

/* Hero on iPhone/iPad (index.html "plain" mode): the real <video> fills the hero; its first-frame still sits
   on top until the video is actually playing, then fades -- never a black frame (25 Oct 2026). */
.hero-destination-media.hero-media--plain #hero-video { z-index: 1; object-fit: cover; }
.hero-destination-media.hero-media--plain .hero-first-frame { z-index: 2; transition: opacity .35s ease; }
.hero-destination-media.hero-media--plain.is-playing .hero-first-frame { opacity: 0; }
/* Phones/tablets: the hero clip is an animated image (index.html) over the video's first-frame still. */
.hero-destination-media .hero-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.hero-destination-media .hero-anim.is-ready { opacity: 1; }