/* ==========================================================================
   Shaahi Creations - Corporate Events and Experiences
   Global stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Header & navigation
   7.  Wave graphic
   8.  Home hero
   9.  Inner page hero
   10. What we do
   11. Featured work carousel
   12. Impact & clients
   13. Who we are
   14. Testimonials
   15. Destination cards
   16. CTA band
   17. Footer
   18. Gallery & lightbox
   19. Case studies
   20. Blog
   21. Destinations page
   22. Contact page
   23. About page
   24. FAQ
   25. Motion & utilities
   ========================================================================== */

/* ==========================================================================
   0. Typefaces  (self-hosted, subset to Latin - see assets/fonts/OFL.txt)
   --------------------------------------------------------------------------
   Poppins  - sub-headings and body copy, per the brand type sheet.
   Reross Quadratic - headings. Its @font-face is injected by the build only
   when assets/fonts/reross-quadratic.woff2 is present, so there is never a
   request for a missing file; until then headings fall back to Poppins.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Handwritten accent for the "Events that move businesses forward." note.
   Nothing You Could Do, OFL, self-hosted (Latin subset, 16 KB). */
@font-face {
  font-family: 'Nothing You Could Do';
  src: url('../fonts/nothing-you-could-do-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* brand — exact values from the Shaahi Creations Brand Guidelines PDF
     (Navy Blue, Coral Red, Saffron Yellow, Royal Purple, Teal + their gradient) */
  --ink:        #152f49; /* Navy Blue */
  --ink-700:    #1b3a57;
  --ink-600:    #204568;
  --ink-500:    #2a5379;
  --coral:      #f04a2f; /* Coral Red */
  --coral-600:  #d43d24;
  /* Coral for small text. #f04a2f is 3.67:1 on white, which is fine for the
     big hero accents but under AA at label and link sizes. */
  --coral-text: #c5351d;
  --gold:       #ffbf18; /* Saffron Yellow */
  --purple:     #7654a8; /* Royal Purple */
  /* Royal Purple lifted for dark grounds: #7654a8 on the navy section
     background is only 2.35:1, far too dim to read as an icon. */
  --purple-300: #ad98cb;
  --teal:       #20afa6; /* Teal */

  /* surfaces */
  --paper:      #ffffff;
  --paper-2:    #f6f7f9;
  --paper-3:    #eef1f5;
  --line:       #e4e8ee;
  --line-2:     #d8dee7;

  /* text */
  --fg:         #152f49;
  --body:       #56637a;
  /* #8b96a8 measured 2.99:1 on white - under the 4.5:1 AA floor, and every
     use of this token is small text (0.7-0.78rem), where it showed most.
     #626f86 clears AA on white and on --paper-2 while staying a visible
     step lighter than --body. */
  --muted:      #626f86;
  --on-dark:    #ffffff;
  --on-dark-2:  rgba(255, 255, 255, 0.74);
  --on-dark-3:  rgba(255, 255, 255, 0.5);

  /* type */
  --font-display: 'Reross Quadratic', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.45rem, 4.9vw, 4rem);
  --fs-h1:    clamp(2.1rem, 3.9vw, 3.15rem);
  --fs-h2:    clamp(1.8rem, 2.95vw, 2.65rem);
  --fs-h3:    clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-h4:    clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-lede:  clamp(0.98rem, 1.15vw, 1.075rem);
  --fs-body:  0.975rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.78rem;
  --fs-eyebrow: 0.688rem;

  /* layout */
  --container: 1240px;
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:    clamp(2.5rem, 4vw, 3.5rem);
  --radius:   14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* effects */
  --shadow-sm: 0 2px 8px rgba(16, 35, 58, 0.06);
  --shadow:    0 10px 30px rgba(16, 35, 58, 0.09);
  --shadow-lg: 0 24px 60px rgba(16, 35, 58, 0.16);
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* the brand gradient reads left-to-right exactly as the logo does:
     Saffron Yellow -> Coral Red -> Royal Purple -> Teal */
  --grad-brand: linear-gradient(90deg, #ffbf18 0%, #f04a2f 33%, #7654a8 66%, #20afa6 100%);
  --grad-cta: linear-gradient(96deg, #ffbf18 0%, #f04a2f 100%);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

/* Author rules such as .vmodal{display:grid} would otherwise beat the UA
   [hidden]{display:none} rule, so enforce it once, globally. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, figcaption, dl, dd { margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-radius: 0 0 10px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--coral); color: #fff; }

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 0.6em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.22; }
h4 { font-size: var(--fs-h4); line-height: 1.32; letter-spacing: -0.012em; }

.accent { color: var(--coral); }
/* Inline links carrying .accent are body-sized, so they take the darker coral. */
a.accent { color: var(--coral-text); }
/* Per the brand guidelines, headline emphasis on a navy hero uses Saffron
   Yellow (as every section-divider slide in the deck does), not Coral Red -
   coral stays the .accent default for on-paper use (links, small copy). */
.hero-title .accent,
.phero-title .accent { color: var(--gold); }

/* Per-page hero accent color. */
body[data-page="home"] .hero-title .accent { color: var(--gold); }
body[data-page="about"] .phero-title .accent { color: var(--coral); }
body[data-page="gallery"] .phero-title .accent { color: var(--teal); }
body[data-page="destinations"] .phero-title .accent { color: var(--coral); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--purple);
  line-height: 1;
}
.eyebrow-rule {
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
  border-radius: 2px;
}
.eyebrow-trail .eyebrow-rule { order: 1; }
.eyebrow-light { color: rgba(255, 255, 255, 0.82); }
.eyebrow-ink { color: var(--ink); }

.sec-lede {
  font-size: var(--fs-lede);
  color: var(--body);
  max-width: 46ch;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.75;
  color: var(--body);
}

.on-dark { color: var(--on-dark-2); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.ico { width: 24px; height: 24px; flex: 0 0 auto; }

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 840px; }

.section { padding-block: var(--sec-y); position: relative; }
/* Every top-level section on every page shares this one spacing token, so
   the gap between any two adjacent sections is identical and minimal. */
.section-tight { padding-block: var(--sec-y); }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--ink); color: var(--on-dark-2); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .sec-lede { color: var(--on-dark-2); }
/* Purple on white backgrounds, white on dark backgrounds - purple only hits
   ~2.3:1 contrast on this navy, so any .eyebrow here goes white instead. */
.section-dark .eyebrow { color: var(--on-dark-2); }
.section-line { border-top: 1px solid var(--line); }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.sec-head.is-single { grid-template-columns: 1fr; max-width: 780px; }
.sec-title { font-size: var(--fs-h2); margin: 0; }
/* Top-aligned with the eyebrow on the left, regardless of how many lines
   the lede runs to or whether a link/nav sits below it - so every section
   header starts at the same height instead of drifting with content length. */
.sec-head-right { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

@media (max-width: 860px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 1.15rem; }
}

/* generic grids */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .g-2, .g-3, .g-4, .g-6 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. Buttons & links
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn .ico { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(239, 75, 60, 0.32);
}
.btn-primary:hover { box-shadow: 0 12px 30px rgba(239, 75, 60, 0.42); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #061529; box-shadow: 0 10px 24px rgba(14, 32, 54, 0.28); }

.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); }
.btn-light:hover { background: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.34);
}
.btn-ghost-light:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75); }

.btn-sm { padding: 0.65rem 1.15rem; font-size: 0.72rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--purple);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link-arrow .ico { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.link-arrow:hover { border-bottom-color: var(--purple); }
.link-arrow:hover .ico { transform: translateX(4px); }
.link-arrow-light { color: #fff; }
.link-arrow-light:hover { border-bottom-color: rgba(255, 255, 255, 0.7); }

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.play-btn .play-ring {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.play-btn .play-ring .ico { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.play-btn:hover .play-ring { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.play-btn-ink { color: var(--ink); }
.play-btn-ink .play-ring { background: rgba(14, 32, 54, 0.06); box-shadow: inset 0 0 0 1.5px rgba(14, 32, 54, 0.22); }
.play-btn-ink:hover .play-ring { background: rgba(14, 32, 54, 0.12); }

/* circular carousel controls */
.cbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
.cbtn .ico { width: 18px; height: 18px; }
.cbtn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cbtn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.cbtn-light { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.cbtn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ==========================================================================
   6. Header & navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 6px 24px rgba(16, 35, 58, 0.08);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* Desktop: brand left, nav centred on the page, call to action right. */
@media (min-width: 1025px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
  }
  .brand { justify-self: start; }
  .site-nav { margin-left: 0; justify-self: center; }
  .header-actions { justify-self: end; }
}

.brand { flex: 0 0 auto; display: block; line-height: 0; }
.logo-img { width: clamp(110px, 10vw, 150px); height: auto; }

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-list { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 2rem); }

.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav-link:hover { color: var(--coral); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.nav-caret .ico { width: 18px; height: 18px; }
.nav-sub-toggle { display: none; }

.nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-sub::before {
  content: '';
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}
.nav-sub a {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: 9px;
  font-size: 0.95rem;
  color: var(--ink);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-sub a:hover, .nav-sub a[aria-current] { background: var(--paper-2); color: var(--coral); }
.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.nav-cta-mobile, .nav-mobile-meta { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle-bars span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(9, 20, 34, 0.45);
  backdrop-filter: blur(3px);
  z-index: 140;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.nav-scrim.is-visible { opacity: 1; }

@media (max-width: 1024px) {
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  /* .site-nav leaves the flow here, so the actions carry the push right. */
  /* .site-nav is a fixed-position sibling with z-index:150 inside this same
     stacking context, so without its own stacking context + higher z-index
     the toggle button would render but sit UNDER the open drawer - visible
     in the DOM, but never the topmost hit-tested element, so it could never
     be tapped closed on a real touchscreen. */
  .header-actions { margin-left: auto; position: relative; z-index: 151; }
  .header-inner { position: relative; z-index: 2; }

  /*
    backdrop-filter on .site-header makes it the containing block for
    position:fixed descendants, so the drawer was only as tall as the bar.
    Drop the filter on small screens so the panel can pin to the viewport.
  */
  .site-header {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 160;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(22.5rem, calc(100vw - 3.25rem));
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background: #fff;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 0.75rem) 1.35rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    transform: translate3d(110%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.36s var(--ease), visibility 0.36s var(--ease);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: -20px 0 50px rgba(16, 35, 58, 0.16);
  }
  .site-nav.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
  }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link {
    padding: 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    justify-content: flex-start;
  }
  .nav-link::after { display: none; }
  .nav-caret { display: none; }

  .has-sub { position: relative; }
  .nav-sub-toggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0.45rem; right: 0;
    width: 40px; height: 40px;
    background: var(--paper-2);
    border: 0; border-radius: 10px;
    cursor: pointer;
    transition: transform 0.25s var(--ease);
  }
  .nav-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }

  .nav-sub {
    position: static;
    left: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0.75rem 0.35rem;
    display: none;
    min-width: 0;
  }
  .nav-sub::before { display: none; }
  .has-sub:hover .nav-sub { display: none; }
  .nav-sub.is-open, .has-sub:hover .nav-sub.is-open { display: block; }
  .nav-sub a { padding: 0.55rem 0.5rem; color: var(--body); }

  /* The desktop dropdown rule above (.has-sub:hover/:focus-within .nav-sub)
     re-applies translateX(-50%) here once the toggle button gains focus,
     shoving the stacked mobile submenu off-screen. Neutralise it. */
  .has-sub:hover .nav-sub,
  .has-sub:focus-within .nav-sub { transform: none; }

  .nav-cta-mobile { display: inline-flex; margin-top: 1.75rem; justify-content: center; }
  .nav-mobile-meta {
    display: flex; flex-direction: column; gap: 0.35rem;
    margin-top: 1.75rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--body);
  }
  .nav-mobile-meta a:hover { color: var(--coral); }
}

/* ==========================================================================
   7. Wave graphic
   ========================================================================== */
.wave {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
}
.wave svg { width: 100%; height: 100%; display: block; }
.wave-glow { opacity: 0.28; filter: blur(14px); }
.wave-line { opacity: 0.95; }

.wave-hero { top: 34%; height: clamp(200px, 34vw, 340px); }
.wave-cta { top: 0; bottom: 0; height: 100%; opacity: 0.95; }
.wave-hero-page { top: 48%; height: clamp(170px, 28vw, 280px); }
.wave-strip { position: relative; height: 96px; overflow: hidden; }

.rule-brand { height: 4px; background: var(--grad-brand); border: 0; margin: 0; }

/* ==========================================================================
   8. Home hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(97deg, rgba(9, 21, 37, 0.95) 0%, rgba(9, 21, 37, 0.84) 34%, rgba(9, 21, 37, 0.42) 62%, rgba(9, 21, 37, 0.66) 100%),
    linear-gradient(180deg, rgba(9, 21, 37, 0.6) 0%, rgba(9, 21, 37, 0.1) 38%, rgba(9, 21, 37, 0.82) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  min-height: min(86vh, 760px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.hero-copy { max-width: 620px; }
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: #fff;
  line-height: 1.03;
  letter-spacing: -0.032em;
  margin: 0 0 1.35rem;
  text-shadow: 0 2px 18px rgba(6, 16, 29, 0.45);
}
.hero-title span { display: block; }
.hero-lede {
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  color: var(--on-dark-2);
  max-width: 44ch;
  margin-bottom: 2rem;
  text-shadow: 0 1px 14px rgba(6, 16, 29, 0.65);
}
.hero-actions { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }

.hero-words {
  display: grid;
  gap: 0.6rem;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding-right: 0.25rem;
}
.hero-words span { position: relative; }

.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 1.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hero-scroll .ico { width: 22px; height: 22px; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-block: clamp(3rem, 12vw, 5rem); }
  .hero-words {
    text-align: left;
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: start;
    gap: 1.1rem;
    margin-top: 2.25rem;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    flex-wrap: wrap;
  }
  .hero-scroll { display: none; }
}
@media (max-width: 560px) {
  .hero-words { grid-auto-flow: row; grid-template-columns: repeat(2, auto); gap: 0.6rem 1.5rem; }
  .hero-actions { gap: 1rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   9. Inner page hero
   ========================================================================== */
.phero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.phero-media { position: absolute; inset: 0; z-index: 0; }
.phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(97deg, rgba(9, 21, 37, 0.94) 0%, rgba(9, 21, 37, 0.8) 40%, rgba(9, 21, 37, 0.5) 72%, rgba(9, 21, 37, 0.72) 100%),
    linear-gradient(180deg, rgba(9, 21, 37, 0.5) 0%, rgba(9, 21, 37, 0.15) 45%, rgba(9, 21, 37, 0.7) 100%);
}
.phero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  min-height: clamp(340px, 46vw, 480px);
  padding-block: clamp(3rem, 6vw, 4.75rem);
}
.phero-copy { max-width: 640px; }
.phero-title {
  font-size: var(--fs-h1);
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 18px rgba(6, 16, 29, 0.45);
}
.phero-lede { color: var(--on-dark-2); max-width: 52ch; font-size: var(--fs-lede); text-shadow: 0 1px 14px rgba(6, 16, 29, 0.65); }
.phero-actions { margin-top: 1.75rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .phero-inner { grid-template-columns: 1fr; }
}

/* breadcrumbs */
.crumbs { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 0.85rem; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--line-2); }
.crumbs a { color: var(--body); }
.crumbs a:hover { color: var(--coral); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   10. What we do
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-item {
  padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(0.9rem, 1.6vw, 1.4rem);
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  position: relative;
  transition: background-color 0.3s var(--ease);
}
.svc-item:last-child { border-right: 0; }
.svc-item::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}
.svc-item:hover { background: var(--paper-2); }
.svc-item:hover::after { transform: scaleX(1); }

.svc-icon { width: 34px; height: 34px; }
.svc-icon .ico { width: 34px; height: 34px; stroke-width: 1.3; }
.svc-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.svc-blurb { font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); margin: 0; }

/* The four official brand hues. Saffron is darkened slightly because #FFBF18
   as a hairline glyph on a light panel is close to invisible. */
.tone-coral { color: var(--coral); }
.tone-gold { color: #e0a30f; }
.tone-teal { color: var(--teal); }
.tone-purple { color: var(--purple); }

@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-item:nth-child(3n) { border-right: 0; }
  .svc-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .svc-item:nth-child(2n) { border-right: 0; }
  .svc-item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ==========================================================================
   11. Featured work carousel
   ========================================================================== */
.carousel { position: relative; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(1rem, 1.6vw, 1.5rem)) / 3);
  gap: clamp(1rem, 1.6vw, 1.5rem);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
/* The design shows four featured cards across on desktop. */
.carousel-work .carousel-track {
  grid-auto-columns: calc((100% - 3 * clamp(0.75rem, 1.2vw, 1.15rem)) / 4);
  gap: clamp(0.75rem, 1.2vw, 1.15rem);
}
@media (max-width: 1180px) { .carousel-work .carousel-track { grid-auto-columns: calc((100% - 2 * clamp(0.75rem, 1.2vw, 1.15rem)) / 3); } }
@media (max-width: 900px)  { .carousel-work .carousel-track { grid-auto-columns: calc((100% - clamp(0.75rem, 1.2vw, 1.15rem)) / 2); } }
@media (max-width: 640px)  { .carousel-work .carousel-track { grid-auto-columns: 84%; } }

.carousel-work .work-overlay { font-size: 0.62rem; letter-spacing: 0.12em; right: 3rem; }
.carousel-work .work-title { font-size: 0.9rem; }
.carousel-work .work-meta { font-size: 0.68rem; }
.carousel-work .work-body { left: 0.95rem; right: 3.25rem; bottom: 0.9rem; }
.carousel-work .work-go { width: 32px; height: 32px; right: 0.9rem; bottom: 0.9rem; }
.carousel-work .work-go .ico { width: 14px; height: 14px; }
.carousel-work .work-card::after {
  background: linear-gradient(180deg, rgba(6, 16, 29, 0.34) 0%, rgba(6, 16, 29, 0.05) 40%, rgba(6, 16, 29, 0.9) 100%);
}

.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

.carousel-nav {
  display: flex;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  justify-content: flex-end;
}

.carousel-side .cbtn {
  position: absolute;
  top: 38%;
  z-index: 5;
  box-shadow: var(--shadow);
}
.carousel-side .cbtn[data-prev] { left: calc(var(--gutter) * -1 + 4px); }
.carousel-side .cbtn[data-next] { right: calc(var(--gutter) * -1 + 4px); }

@media (max-width: 1100px) {
  .carousel-track { grid-auto-columns: calc((100% - clamp(1rem, 1.6vw, 1.5rem)) / 2); }
}
@media (max-width: 720px) {
  .carousel-track { grid-auto-columns: 84%; }
  .carousel-side .cbtn { display: none; }
}

/* work card */
.work-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
  isolation: isolate;
}
.work-card .ph-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.work-card:hover .ph-img { transform: scale(1.05); }
.work-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 29, 0.15) 0%, rgba(6, 16, 29, 0.05) 34%, rgba(6, 16, 29, 0.86) 100%);
  z-index: 1;
}
.work-overlay {
  position: absolute;
  top: 1.15rem; left: 1.15rem;
  right: 3.5rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.work-body {
  position: absolute;
  left: 1.15rem; right: 3.75rem; bottom: 1.05rem;
  z-index: 2;
  color: #fff;
}
.work-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.15rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.work-meta { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.68); margin: 0; }
.work-go {
  position: absolute;
  right: 1.05rem; bottom: 1.05rem;
  z-index: 3;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.work-go .ico { width: 16px; height: 16px; }
.work-card:hover .work-go { background: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); transform: translateX(3px); }

/* Plain gallery grid: no caption overlay, so drop the darkening scrim that
   existed only to keep that text readable - just the zoom-in icon on hover. */
.gal-item-plain::after { display: none; }
.gal-item-plain .work-go { opacity: 0; transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease); }
.gal-item-plain:hover .work-go { opacity: 1; }

/* ==========================================================================
   12. Impact & clients
   ========================================================================== */
.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  /* Top-aligned, like every other section head on the site: the eyebrow and
     the first row of figures share one top edge. Centering drifted them out
     of line because the 2x2 stat block is taller than the heading. */
  align-items: start;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
/* Only while the row sits beside the heading: there it gets ~112px per cell,
   too narrow for a word value ("PAN India") or a thousands separator
   ("4,000+"). Two by two doubles the cell width. Once .impact-grid stacks at
   960px the row spans the full container and goes back to four across. */
@media (min-width: 961px) {
  .impact-grid .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  }
}
.stat { text-align: left; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.1vw, 2.6rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: var(--fs-xs);
  /* A figure is only as useful as the label under it, so these get the full
     body tone rather than the muted one. */
  color: var(--body);
  font-weight: 500;
  line-height: 1.4;
  display: block;
}
.section-dark .stat-value { color: #fff; }
.section-dark .stat-label { color: var(--on-dark-3); }

@media (max-width: 960px) {
  .impact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

.clients-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.clients-head .eyebrow { margin: 0; }
.clients-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Continuous single-line logo slider. Two identical tracks sit side by side
   inside the clipped viewport; animating each -100% of its own width makes
   the second pick up exactly where the first left off, so the loop is
   seamless regardless of how many logos there are or the viewport width. */
.client-marquee {
  --logo-scale: 0.88;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.client-track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(2rem, 4vw, 3.75rem);
  padding-inline-end: clamp(2rem, 4vw, 3.75rem);
  animation: client-scroll 36s linear infinite;
}
.client-marquee:hover .client-track { animation-play-state: paused; }

@keyframes client-scroll {
  to { transform: translateX(-100%); }
}

.client-cell { display: grid; place-items: center; height: 46px; flex: 0 0 auto; }

.client-cell img {
  width: calc(var(--lw) * 1px * var(--logo-scale));
  max-width: none;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.client-cell:hover img { opacity: 1; transform: scale(1.05); }

@media (max-width: 560px) { .client-marquee { --logo-scale: 0.72; } }

@media (prefers-reduced-motion: reduce) {
  .client-track { animation: none; }
  .client-track[aria-hidden] { display: none; }
}


/* ==========================================================================
   13. Who we are
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.split-wide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.split-flip .split-media { order: 2; }

.split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.split-media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.split-media-tall img { aspect-ratio: 3 / 3.6; }
.split-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 29, 0.05) 40%, rgba(6, 16, 29, 0.75) 100%);
}
.split-words {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 2;
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Who we are band: photo | copy | handwritten note */
.who-band {
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  padding-block: var(--sec-y);
}
.who-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 0.56fr);
  align-items: center;
}
.who-media { position: relative; overflow: hidden; align-self: stretch; min-height: 400px; }
.who-media img { width: 100%; height: 100%; object-fit: cover; }
.who-body {
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.75rem, 3.4vw, 3.25rem);
}
.who-body .sec-title { margin-bottom: 0; }
.who-rule {
  display: block;
  width: 44px; height: 3px;
  margin: 1.1rem 0 1.2rem;
  border-radius: 2px;
  background: var(--coral);
}
.who-body .split-actions { margin-top: 1.6rem; }
.who-note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(2rem, 4vw, 3rem) max(var(--gutter), calc((100vw - var(--container)) / 2)) clamp(2rem, 4vw, 3rem) clamp(0.5rem, 1.5vw, 1.25rem);
}
/* Soft grey brush shape behind the handwritten note. */
.who-brush {
  position: absolute;
  left: -14%; top: 50%;
  width: 135%; height: auto;
  transform: translateY(-48%) rotate(-14deg);
  fill: #e4e7ec;
  stroke: #e4e7ec;
  z-index: 0;
  pointer-events: none;
}
.who-note .script-note {
  position: relative; z-index: 1;
  margin: 0; padding: 0; border: 0;
  font-family: 'Nothing You Could Do', var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink);
  /* The face is a fine-pen hand; a hairline stroke gives it the marker weight
     of the reference without swapping to a heavier, less legible script. */
  -webkit-text-stroke: 0.5px currentColor;
  transform: rotate(-8deg);
  transform-origin: left center;
}
.script-wave { width: clamp(120px, 12vw, 190px); height: auto; }
.who-note .script-wave {
  position: relative; z-index: 1;
  width: clamp(170px, 17vw, 270px);
  margin-left: 12%;
}

@media (max-width: 1080px) {
  .who-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  /* The note drops to its own row; shrink its box to the content so the brush
     (sized as a % of the box) stays the same size it is on desktop. */
  .who-note {
    grid-column: 1 / -1;
    justify-self: center;
    width: max-content;
    padding: clamp(2.75rem, 6vw, 3.75rem) clamp(2rem, 6vw, 3.5rem) clamp(2.5rem, 5vw, 3.5rem);
  }
}
@media (max-width: 820px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-media { min-height: 0; aspect-ratio: 16 / 10; }
  .who-body { padding-inline: var(--gutter); }
}

.split-body h2 { margin-bottom: 1.1rem; }
.split-body .lede + .lede { margin-top: 1rem; }
.split-actions { margin-top: 1.9rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.script-note {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.85vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  line-height: 1.34;
  letter-spacing: -0.012em;
}

@media (max-width: 860px) {
  .split, .split-wide { grid-template-columns: 1fr; }
  .split-flip .split-media { order: 0; }
}

/* ==========================================================================
   14. Testimonials
   ========================================================================== */
/* Open columns divided by hairlines, with a dark quote badge at the left. */
.quote-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 1.5vw, 1.3rem);
  align-items: start;
  height: 100%;
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line);
}
.quote-card:first-child { border-left: 0; padding-left: 0; }

.quote-badge {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  flex: 0 0 auto;
}
.quote-badge .ico { width: 19px; height: 19px; }

.quote-main { display: flex; flex-direction: column; gap: 1.1rem; height: 100%; }
.quote-text { font-size: 0.92rem; line-height: 1.74; color: var(--fg); margin: 0; flex: 1; }
.quote-rule { display: block; width: 30px; height: 2px; border-radius: 2px; background: var(--coral); }
.quote-by { margin: 0; }
.quote-name { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.quote-org { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* Controls live in the section header, so the track needs no bottom row. */
.sec-head-quotes .sec-head-right {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
}
.sec-head-quotes .carousel-nav { margin-top: 0; flex: 0 0 auto; }
/* overflow-x:auto makes the browser compute overflow-y as auto too, which left
   these cards a few pixels vertically scrollable - enough for the wheel to
   nudge the quotes out of view instead of scrolling the page. Quote cards have
   no hover lift or shadow to clip, so pin the vertical axis. */
.carousel-quotes .carousel-track { padding-bottom: 0; overflow-y: hidden; }

@media (max-width: 860px) {
  .sec-head-quotes .sec-head-right { flex-wrap: wrap; }
}

/* --- Testimonials on the dark band --------------------------------------- */
.section-quotes { background: var(--ink); }
/* .eyebrow already goes white here via the shared .section-dark rule. */
.section-quotes .sec-lede { color: var(--on-dark-2); }

.section-dark .quote-card,
.section-quotes .quote-card { border-left-color: rgba(255, 255, 255, 0.13); }

.section-dark .quote-badge,
.section-quotes .quote-badge {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
}
.section-dark .quote-text,
.section-quotes .quote-text { color: rgba(255, 255, 255, 0.88); }
.section-dark .quote-name,
.section-quotes .quote-name { color: #fff; }
.section-dark .quote-org,
.section-quotes .quote-org { color: var(--on-dark-3); }

/* ==========================================================================
   15. Destination / place cards
   ========================================================================== */
.place-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.3vw, 1.15rem);
}
@media (max-width: 1080px) { .place-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.place-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.place-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.place-plate {
  display: grid;
  place-items: center;
  /* lift the mark clear of the label block at the foot of the card */
  padding-bottom: 26%;
  aspect-ratio: 4 / 3.1;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
}
.place-plate::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(0, 0, 0, 0.3), transparent 52%);
}
.place-plate::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 29, 0) 26%, rgba(6, 16, 29, 0.55) 62%, rgba(6, 16, 29, 0.92) 100%);
}
.place-mark { width: 62%; max-width: 158px; position: relative; z-index: 1; }
.place-photo { background: var(--ink); padding-bottom: 0; }
.place-photo::before { display: none; }
.place-photo .place-mark { display: none; }
.place-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.7s var(--ease);
}
.place-card:hover .place-photo img { transform: scale(1.05); }
.place-card:hover .place-plate { transform: none; }

.place-body {
  position: absolute;
  left: 1.05rem; right: 3.25rem; bottom: 0.95rem;
  z-index: 2;
  display: block;
  color: #fff;
}
.place-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.place-tag { display: block; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.78); line-height: 1.4; }
@media (max-width: 560px) {
  .place-body { right: 3rem; }
  .place-name { font-size: 0.95rem; }
  .place-tag { font-size: 0.7rem; }
}
.place-go {
  position: absolute;
  right: 0.95rem; bottom: 0.95rem;
  z-index: 3;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.place-go .ico { width: 15px; height: 15px; }
.place-card:hover .place-go { background: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); transform: translateX(2px); }

/* destination plate palettes */
.place-goa        { background: linear-gradient(150deg, #f6b41e, #f07e2c 46%, #ee4b3c); }
.place-udaipur    { background: linear-gradient(150deg, #6c4fa3, #a8459e 48%, #e5326e); }
.place-jaipur     { background: linear-gradient(150deg, #ee4b3c, #e5326e 50%, #a8459e); }
.place-rishikesh  { background: linear-gradient(150deg, #14a79c, #1ba0d6 52%, #3b72c4); }
.place-coorg      { background: linear-gradient(150deg, #6fbe44, #14a79c 55%, #1ba0d6); }
.place-dehradun   { background: linear-gradient(150deg, #3b72c4, #6c4fa3 55%, #a8459e); }
.place-corbett    { background: linear-gradient(150deg, #6fbe44, #f6b41e 58%, #f07e2c); }
.place-kabini     { background: linear-gradient(150deg, #1ba0d6, #14a79c 50%, #6fbe44); }
.place-kerala     { background: linear-gradient(150deg, #14a79c, #6fbe44 52%, #f6b41e); }
.place-kathmandu  { background: linear-gradient(150deg, #a8459e, #6c4fa3 50%, #3b72c4); }
/* The three office plates carry the full brand gradient - the same four logo
   hues, in the same order, as --grad-brand uses everywhere else on the site. */
.place-hyderabad,
.place-pune,
.place-mumbai     { background: var(--grad-brand); }
.place-delhi      { background: linear-gradient(150deg, #e5326e, #ee4b3c 52%, #f07e2c); }
.place-bangalore  { background: linear-gradient(150deg, #14a79c, #3b72c4 55%, #6c4fa3); }
.place-kolkata    { background: linear-gradient(150deg, #f07e2c, #e5326e 54%, #a8459e); }
.place-chennai    { background: linear-gradient(150deg, #1ba0d6, #6c4fa3 55%, #e5326e); }
.place-ahmedabad  { background: linear-gradient(150deg, #f6b41e, #ee4b3c 55%, #a8459e); }
.place-indore     { background: linear-gradient(150deg, #6fbe44, #1ba0d6 52%, #6c4fa3); }
.place-chandigarh { background: linear-gradient(150deg, #a8459e, #e5326e 50%, #f07e2c); }
.place-ludhiana   { background: linear-gradient(150deg, #3b72c4, #14a79c 52%, #6fbe44); }

/* ==========================================================================
   16. CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 82% 20%, rgba(59, 114, 196, 0.22), transparent 60%);
}
.cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: var(--sec-y);
}
.cta-title {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  color: #fff;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
}
.cta-right { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); justify-content: space-between; flex-wrap: wrap; }
.cta-lede { color: var(--on-dark-2); max-width: 30ch; margin: 0; font-size: var(--fs-lede); }

@media (max-width: 900px) {
  .cta-inner { grid-template-columns: 1fr; }
  .cta-right { justify-content: flex-start; }
}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.site-footer { background: #fff; border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.footer-nav ul { display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 2.2vw, 2rem); }
.footer-nav a { font-size: var(--fs-sm); color: var(--body); transition: color 0.2s var(--ease); }
.footer-nav a:hover { color: var(--coral); }

.footer-social { display: flex; gap: 0.6rem; }
.social-link {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.social-link .ico { width: 18px; height: 18px; }
.social-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.footer-bottom p { margin: 0; }

@media (max-width: 720px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
}

/* ==========================================================================
   18. Gallery, filters & lightbox
   ========================================================================== */
.tabs {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 620px) { .tabs { justify-content: flex-start; } }
.tab {
  position: relative;
  padding: 1.1rem 0.15rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.22s var(--ease);
}
.tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { transform: scaleX(1); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.chip {
  padding: 0.52rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
}
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gal-grid { grid-template-columns: 1fr; } }

.gal-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.gal-item[hidden] { display: none; }

.load-more-wrap { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.gal-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(6, 14, 25, 0.94);
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox-fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 0.9rem; }
.lightbox-fig img {
  max-height: min(76vh, 820px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 10px;
  object-fit: contain;
}
.lightbox-cap { color: rgba(255, 255, 255, 0.86); text-align: center; font-size: var(--fs-sm); }
.lightbox-cap strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: #fff; font-weight: 600; }
.lightbox-cap span { color: rgba(255, 255, 255, 0.55); font-size: var(--fs-xs); }
.lb-btn {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.26); }
.lb-close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lb-prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

/* video modal */
.vmodal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.vmodal-scrim { position: absolute; inset: 0; background: rgba(6, 14, 25, 0.92); }
.vmodal-box { position: relative; width: min(1080px, 100%); }
.vmodal-box video { width: 100%; border-radius: 12px; background: #000; max-height: 82vh; }
.vmodal-close {
  position: absolute; top: -52px; right: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; cursor: pointer;
}
.vmodal-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ==========================================================================
   19. Case studies
   ========================================================================== */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
@media (max-width: 980px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-grid { grid-template-columns: 1fr; } }

.cs-card { display: flex; flex-direction: column; gap: 0; }
.cs-card[hidden] { display: none; }
.cs-thumb { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); margin-bottom: 1.15rem; }
.cs-thumb .ph-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.7s var(--ease); }
.cs-card:hover .cs-thumb .ph-img { transform: scale(1.05); }
.cs-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 29, 0.1) 45%, rgba(6, 16, 29, 0.68) 100%);
}
.cs-badge {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  background: rgba(6, 16, 29, 0.6);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.34rem 0.72rem;
  border-radius: var(--radius-pill);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.cs-thumb-overlay {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.85rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.cs-kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.45rem;
}
.cs-title { font-size: 1.15rem; margin: 0 0 0.3rem; letter-spacing: -0.018em; }
.cs-card:hover .cs-title { color: var(--purple); }
.cs-strap { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); margin: 0 0 0.55rem; }
.cs-summary { font-size: var(--fs-sm); line-height: 1.65; color: var(--body); margin: 0 0 1rem; flex: 1; }
.cs-link { margin-top: auto; }

/* case study detail */
.cs-hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.cs-fact { background: rgba(9, 21, 37, 0.88); backdrop-filter: blur(8px); padding: 1.1rem 1.15rem; }
.cs-fact dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.35rem; }
.cs-fact dd { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: #fff; line-height: 1.35; }
@media (max-width: 860px) { .cs-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.9rem; }
.prose p { margin-bottom: 1.15rem; line-height: 1.8; }
.prose ul { margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.prose ul li { position: relative; padding-left: 1.6rem; line-height: 1.7; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.68em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
}
.prose ol { counter-reset: n; margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.prose ol li { counter-increment: n; position: relative; padding-left: 2rem; line-height: 1.7; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 700; color: var(--coral);
}
.prose blockquote {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--coral);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
}
.prose blockquote cite { display: block; margin-top: 0.7rem; font-size: var(--fs-xs); font-style: normal; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 960px) { .cs-layout { grid-template-columns: 1fr; } }

.side-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--paper-2);
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.side-card h3 { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); margin-bottom: 1rem; }
.side-list { display: grid; gap: 0.7rem; font-size: var(--fs-sm); }
.side-list li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.55; }
.side-list li::before { content: ''; margin-top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; }
.side-logo { max-height: 34px; width: auto; margin-bottom: 1.15rem; filter: grayscale(1); opacity: 0.75; }

.cs-strip { display: grid; grid-template-columns: 1fr; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.cs-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 560px) { .cs-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  /* Fixed three-per-row: a 6-column track with every photo spanning two, so a
     partial last row can be re-centred (via --cs-col, set inline per photo on
     the build side) instead of trailing off with empty tracks. */
  .cs-strip { grid-template-columns: repeat(6, 1fr); }
  .cs-strip img { grid-column: var(--cs-col, auto) / span 2; }
}
.cs-strip-fit { display: flex; flex-wrap: wrap; justify-content: center; }
.cs-strip-fit figure { margin: 0; min-width: 0; }
.cs-strip-fit img { aspect-ratio: auto; height: auto; }

.next-nav { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.next-nav a { display: grid; gap: 0.2rem; max-width: 46%; }
.next-nav .nn-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.next-nav .nn-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--fs-lede); line-height: 1.3; }
.next-nav a:hover .nn-title { color: var(--coral); }
.next-nav .nn-next { text-align: right; margin-left: auto; }
@media (max-width: 640px) { .next-nav a { max-width: 100%; } .next-nav .nn-next { text-align: left; margin-left: 0; } }

/* more stories band */
.more-band {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.more-band-icon { color: var(--coral); }
.more-band-icon .ico { width: 30px; height: 30px; }
.more-band h3 { margin: 0; font-size: var(--fs-h4); }
.more-band p { margin: 0; font-size: var(--fs-sm); flex: 1; min-width: 220px; }

/* ==========================================================================
   20. Blog
   ========================================================================== */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; }
.post-thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.15rem; background: var(--ink); }
.post-thumb .ph-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.7s var(--ease); }
.post-card:hover .post-thumb .ph-img { transform: scale(1.05); }
.post-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; font-weight: 600; }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.post-cat { color: var(--coral-text); }
.post-title { font-size: 1.15rem; margin: 0 0 0.5rem; letter-spacing: -0.018em; line-height: 1.28; }
.post-card:hover .post-title { color: var(--purple); }
.post-excerpt { font-size: var(--fs-sm); line-height: 1.65; margin: 0 0 1rem; flex: 1; }

.post-hero-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; font-size: var(--fs-xs); color: var(--on-dark-3); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.25rem; }
.post-hero-meta .post-cat { color: #fff; background: rgba(255, 255, 255, 0.14); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); }

.post-body { max-width: 70ch; margin-inline: auto; }
.post-figure { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.post-figure img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; }

.share-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.share-row span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   21. Destinations page
   ========================================================================== */
.map-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
}
.map-copy .sec-title { margin-bottom: 1rem; }
.map-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.map-stats .stat-value { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

.map-figure { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.map-caption {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.9;
  margin: 0;
}
@media (max-width: 1060px) {
  .map-panel { grid-template-columns: 1fr; }
  .map-figure { justify-content: center; }
}

.india-map { width: 100%; max-width: 360px; margin-inline: auto; color: var(--line-2); }
.india-map .map-outline { fill: #eef1f5; stroke: #d8dee7; stroke-width: 1.2; }
.india-map .map-dot { fill: var(--coral); }
.india-map .map-dot-soft { fill: var(--coral); opacity: 0.42; }

.map-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  background: #fff;
  display: grid;
  gap: 0.65rem;
}
.map-note .ico { color: var(--coral); width: 22px; height: 22px; }
.map-note strong { font-family: var(--font-display); color: var(--ink); font-size: var(--fs-lede); line-height: 1.35; display: block; }
.map-note p { font-size: var(--fs-sm); margin: 0; }

.stat-stack { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.stat-stack .stat-value { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

/* --- Destinations: venue partners by city -------------------------------- */
.venue-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.vtab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--body);
  font: 600 var(--fs-xs) / 1 var(--font-body);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.vtab:hover { border-color: var(--ink); color: var(--ink); }
.vtab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.vtab-count {
  min-width: 1.5em;
  padding: 0.2em 0.45em;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.68rem;
  text-align: center;
}
.vtab.is-active .vtab-count { background: rgba(255, 255, 255, 0.16); color: #fff; }
@media (max-width: 640px) {
  /* one scrollable row instead of four wrapped rows of pills */
  .venue-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .venue-tabs::-webkit-scrollbar { display: none; }
  .vtab { flex: 0 0 auto; }
}

.venue-panel + .venue-panel { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.venue-panel:focus-visible { outline: 2px solid var(--coral); outline-offset: 6px; border-radius: var(--radius-lg); }

.venue-hero {
  position: relative;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.venue-hero img { width: 100%; aspect-ratio: 16 / 5.4; object-fit: cover; display: block; }
.venue-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9, 21, 37, 0.88) 0%, rgba(9, 21, 37, 0.55) 45%, rgba(9, 21, 37, 0.05) 80%);
}
.venue-hero-copy {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1.1rem, 2.6vw, 2rem); right: 1.25rem;
  z-index: 1;
  color: #fff;
  max-width: 34rem;
}
.venue-hero-copy .eyebrow { margin: 0 0 0.45rem; }
.venue-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: #fff;
}
.venue-hero-tag { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); }
.venue-hero-count {
  position: absolute;
  right: clamp(1rem, 2.4vw, 1.75rem); top: clamp(1rem, 2.4vw, 1.5rem);
  z-index: 1;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  /* A white-on-white pill vanished over bright skies, which several of these
     hero photos have. Tint it with the brand navy instead of the photo. */
  background: rgba(21, 47, 73, 0.55);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.photo-credit {
  position: absolute;
  right: 0.75rem; bottom: 0.5rem;
  z-index: 1;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .venue-hero img { aspect-ratio: 4 / 3; }
  .venue-hero::after { background: linear-gradient(180deg, rgba(9, 21, 37, 0.1) 25%, rgba(9, 21, 37, 0.9) 100%); }
  .venue-hero-copy { bottom: 1.75rem; }
  .photo-credit { left: 1.25rem; right: 1.25rem; text-align: left; bottom: 0.45rem; }
}

.venue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); }
@media (max-width: 1000px) { .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .venue-grid { grid-template-columns: 1fr; } }

.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.vcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-3px); }

/* Venue plate. Ships as a generated crest; drop a licensed photograph in at
   assets/img/venues/<slug>.webp (plus -t.webp) and it takes over untouched. */
.vcard-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink);
}
.vcard-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.vcard:hover .vcard-media img { transform: scale(1.06); }
.vcard-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 21, 37, 0.42) 0%, rgba(9, 21, 37, 0) 34%, rgba(9, 21, 37, 0.72) 100%);
  pointer-events: none;
}
.vcard-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 1.4rem);
}
.vcard-rank { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); color: var(--purple); }
.vcard-media .vcard-rank {
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(255, 191, 24, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(9, 21, 37, 0.45);
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.vcard-type {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.vcard-media .vcard-type {
  position: absolute;
  right: 0.95rem;
  bottom: 0.7rem;
  left: 0.95rem;
  z-index: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(9, 21, 37, 0.55);
}
/* Attribution for the CC-licensed venue photographs. Kept quiet but legible -
   the BY licences require the author and licence to stay visible. */
.vcard-credit {
  position: absolute;
  top: 0.8rem;
  right: 0.85rem;
  z-index: 1;
  max-width: 62%;
  font-size: 0.58rem;
  line-height: 1.35;
  text-align: right;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 4px rgba(9, 21, 37, 0.7);
}
.vcard-credit a { color: inherit; text-decoration: none; }
.vcard:hover .vcard-credit { color: rgba(255, 255, 255, 0.85); }
.vcard-credit a:hover { text-decoration: underline; text-underline-offset: 2px; }
.vcard-name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; color: var(--ink); margin: 0 0 0.3rem; }
.vcard-area { display: flex; align-items: center; gap: 0.3rem; margin: 0 0 0.75rem; font-size: var(--fs-xs); color: var(--muted); }
.vcard-area .ico { width: 13px; height: 13px; color: var(--coral); flex: none; }
.vcard-desc { font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 0.75rem; }
.vcard-facts {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.vcard-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.vcard-tags li {
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(118, 84, 168, 0.09);
  color: var(--purple);
  font-size: 0.68rem;
  font-weight: 600;
}
.vcard .venue-links { margin-top: auto; }

.venue-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.venue-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--body);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.venue-links a:hover { border-color: var(--ink); color: var(--ink); }
.venue-links .ico { width: 13px; height: 13px; }

.venue-note { margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; font-size: var(--fs-xs); color: var(--muted); }

.photo-credits { padding-block: 1.25rem; border-top: 1px solid var(--line); }
.photo-credits p { margin: 0; font-size: 0.7rem; line-height: 1.7; color: var(--muted); }
.photo-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Destinations: why choose us band ------------------------------------ */
.approach-band { background: var(--paper-2); padding-block: var(--sec-y); }
.approach-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  /* start, not center: item labels wrap to one or two lines, and centering
     each cell independently pushed the shorter ones' icons off the row. */
  align-items: start;
}
.approach-label .sec-title { font-size: clamp(1.15rem, 1.7vw, 1.5rem); margin: 0; }
.approach-item {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  text-align: center;
  align-content: start;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--line-2);
}
.approach-item h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
@media (max-width: 1000px) {
  .approach-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach-label { grid-column: 1 / -1; }
  .approach-item { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   22. Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-form-wrap { padding: 0; }
.contact-direct {
  padding: 0 0 0 clamp(2rem, 5vw, 5rem);
  border-left: 1px solid var(--line);
}
.contact-h { font-size: clamp(1.45rem, 2.3vw, 2rem); margin-bottom: 0.5rem; }
.contact-intro { font-size: var(--fs-sm); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.contact-h3 { font-size: var(--fs-h4); margin: 0 0 0.9rem; }
.contact-social { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--line); }
.contact-social .quote-rule { margin: 1.1rem 0 0.8rem; }
.contact-social-note { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-direct { padding: clamp(1.75rem, 5vw, 2.5rem) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.35rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.field .req { color: var(--coral); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356637a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 17px; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(239, 75, 60, 0.13);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--coral); }
.field-error { font-size: var(--fs-xs); color: var(--coral); min-height: 0; }

.consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--body); line-height: 1.6; }
.consent input { width: 17px; height: 17px; margin-top: 0.15rem; accent-color: var(--coral); flex: 0 0 auto; }

.form-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.85rem; }
.form-status { margin-top: 1rem; font-size: var(--fs-sm); padding: 0.85rem 1rem; border-radius: 10px; display: none; }
.form-status.is-ok { display: block; background: rgba(20, 167, 156, 0.1); color: #0d7c74; border: 1px solid rgba(20, 167, 156, 0.3); }
.form-status.is-err { display: block; background: rgba(239, 75, 60, 0.08); color: #c23325; border: 1px solid rgba(239, 75, 60, 0.28); }

.contact-list { display: grid; gap: 1.35rem; }
.contact-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 1rem; align-items: start; }
.contact-row-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-600) 100%);
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 191, 24, 0.35), 0 8px 20px rgba(21, 47, 73, 0.18);
}
.contact-row-icon .ico { width: 19px; height: 19px; }
.contact-row a { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 0.96rem; line-height: 1.5; }
.contact-row a:hover { color: var(--purple); text-decoration: underline; }
.contact-row .contact-sub { font-size: var(--fs-xs); color: var(--muted); display: block; margin-top: 0.2rem; }
.contact-row .contact-sub a { display: inline; font-family: var(--font-body); font-size: inherit; font-weight: 600; color: var(--ink); }
.contact-row .contact-sub a:hover { color: var(--purple); }
.contact-row address { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; color: var(--body); }

.offices-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.offices-map .sec-lede { font-size: var(--fs-sm); }
.office-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.office-card .quote-rule { margin-bottom: 0.7rem; background: var(--grad-brand); width: 38px; }
@media (max-width: 1040px) { .offices-panel { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .office-grid { grid-template-columns: 1fr; } }
.office-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.office-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.office-plate { height: 118px; position: relative; display: grid; place-items: center; color: rgba(255, 255, 255, 0.45); }
.office-plate .place-mark { width: 44%; max-width: 120px; }
.office-body { padding: 1.15rem 1.25rem 1.35rem; }
.office-city { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 0.15rem; }
.office-role { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.6rem; }
.office-addr { font-style: normal; font-size: var(--fs-sm); color: var(--body); line-height: 1.6; margin-bottom: 0.85rem; }

/* ==========================================================================
   23. About page
   ========================================================================== */
.belief-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
@media (max-width: 900px) { .belief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .belief-grid { grid-template-columns: 1fr; } }
.belief { display: grid; gap: 0.75rem; align-content: start; }
/* One brand hue per belief. The tone is carried on the article as a custom
   property so it colours only the icon, not the heading and body under it. */
.belief .ico { width: 30px; height: 30px; color: var(--belief-ico, var(--coral)); stroke-width: 1.3; }
.belief-gold   { --belief-ico: var(--gold); }
.belief-coral  { --belief-ico: var(--coral); }
.belief-purple { --belief-ico: var(--purple-300); }
.belief-teal   { --belief-ico: var(--teal); }
.belief h3 { font-size: var(--fs-h4); margin: 0; }
.belief p { font-size: var(--fs-sm); margin: 0; }

.carousel-team .carousel-track {
  grid-auto-columns: calc((100% - 4 * clamp(1rem, 1.8vw, 1.6rem)) / 5);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
@media (max-width: 1100px) { .carousel-team .carousel-track { grid-auto-columns: calc((100% - 2 * clamp(1rem, 1.8vw, 1.6rem)) / 3); } }
@media (max-width: 700px)  { .carousel-team .carousel-track { grid-auto-columns: calc((100% - clamp(1rem, 1.8vw, 1.6rem)) / 2); } }
@media (max-width: 460px)  { .carousel-team .carousel-track { grid-auto-columns: 86%; } }
.team-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--line-2); }

.team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--ink-500), var(--ink));
  overflow: hidden;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.team-initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}
.team-initials::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16), transparent 55%);
}

.team-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(0.9rem, 1.5vw, 1.15rem);
  flex: 1;
}
.team-name { font-size: 0.98rem; margin: 0; letter-spacing: -0.016em; line-height: 1.3; }
.team-role {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--purple);
  line-height: 1.5;
  margin: 0;
}
.team-bio { font-size: 0.74rem; line-height: 1.7; margin: 0; flex: 1; }

.team-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
}
.team-social .li-badge {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: #0a66c2;
  color: #fff;
  flex: 0 0 auto;
  transition: background-color 0.22s var(--ease);
}
.team-social .li-badge .ico { width: 16px; height: 16px; }
.team-social > .ico { width: 14px; height: 14px; color: var(--body); transition: transform 0.22s var(--ease); }
.team-social:hover { color: var(--purple); }
.team-social:hover .li-badge { background: #004182; }
.team-social:hover > .ico { transform: translateX(3px); }

/* --- About: how we think ------------------------------------------------- */
.think-band { background: var(--paper-2); overflow: hidden; padding-block: var(--sec-y); }
.think-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.28fr);
  align-items: stretch;
}
.think-panel {
  background: var(--ink);
  color: var(--on-dark-2);
  /* Roomier text column and tighter block padding than before: the steps beside
     it are now one line each, so a 500px-tall panel left the right half empty. */
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.8vw, 2.5rem) clamp(2.5rem, 4vw, 3.5rem)
           max(var(--gutter), calc((100vw - var(--container)) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.think-panel .sec-title { color: #fff; margin-bottom: 1rem; }
.think-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.5rem);
  align-content: center;
  padding: clamp(2.5rem, 4vw, 3.5rem) max(var(--gutter), calc((100vw - var(--container)) / 2))
           clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.8vw, 2.5rem);
}
.think-step {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  align-content: start;
  padding-inline: clamp(0.5rem, 1.4vw, 1.25rem);
}
/* Hairline between steps, as in the reference layout. Each breakpoint owns its
   own rule rather than overriding a base one: a `border-left: 0` reset would be
   less specific than the :not(:nth-child()) selector and lose to it. */
@media (min-width: 1081px) {
  .think-step:not(:nth-child(6n + 1)) { border-left: 1px solid var(--line-2); }
}
@media (min-width: 561px) and (max-width: 1080px) {
  .think-step:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line-2); }
}
@media (max-width: 560px) {
  .think-step:not(:nth-child(2n + 1)) { border-left: 1px solid var(--line-2); }
}
.think-num {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
}
.think-step h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
}

/* Plain outline glyphs on the About page rows - the tinted disc belongs only
   to the destinations "why choose" row, which is scoped separately below. */
.think-icon, .exp-icon { display: grid; place-items: center; }
.think-icon .ico, .exp-icon .ico { width: 30px; height: 30px; stroke-width: 1.4; }
.think-icon .ico { width: 40px; height: 40px; stroke-width: 1.35; }

.approach-item .exp-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  position: relative;
}
.approach-item .exp-icon::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
}
/* Hairline ring in the same hue, so the four discs read as a deliberate set
   rather than as four soft blurs. */
.approach-item .exp-icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.28;
}
.approach-item .exp-icon .ico { width: 24px; height: 24px; position: relative; z-index: 1; stroke-width: 1.6; }

@media (max-width: 1080px) {
  .think-grid { grid-template-columns: 1fr; }
  .think-panel { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .think-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.75rem, 3.5vw, 2.5rem); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}
@media (max-width: 560px) {
  .think-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.75rem, 3.5vw, 2.5rem); }
}
.step { display: grid; gap: 0.6rem; text-align: center; justify-items: center; }
.step-num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--coral);
  position: relative;
}
.step-num .ico { width: 21px; height: 21px; stroke-width: 1.4; }
.step-num::after {
  content: attr(data-n);
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
}
.step h3 { font-size: 0.8rem; margin: 0; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); }
.step p { font-size: var(--fs-xs); margin: 0; line-height: 1.6; }

/* --- About: expertise row ------------------------------------------------ */
.exp-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(0.4rem, 0.9vw, 0.85rem);
}
.exp-item {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  align-content: start;
  padding-inline: clamp(0.25rem, 0.55vw, 0.55rem);
}
/* Hairline partitions, matching the How We Think row. One rule per breakpoint,
   bounded so the first item in each row never picks up a left border. */
@media (min-width: 1181px) {
  .exp-item:not(:nth-child(9n + 1)) { border-left: 1px solid var(--line-2); }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .exp-item:not(:nth-child(5n + 1)) { border-left: 1px solid var(--line-2); }
}
@media (min-width: 421px) and (max-width: 700px) {
  .exp-item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line-2); }
}
@media (max-width: 420px) {
  .exp-item:not(:nth-child(2n + 1)) { border-left: 1px solid var(--line-2); }
}
.exp-item h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 1180px) { .exp-row { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.25rem); } }
@media (max-width: 700px)  { .exp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.25rem); } }
@media (max-width: 420px)  { .exp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tech-list { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.tech-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.6; }
.tech-list li::before {
  content: '';
  margin-top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
  flex: 0 0 auto;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--body);
  background: #fff;
}
.section-dark .pill { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.82); }

/* --- About: our story ---------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.82fr) minmax(0, 0.42fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}
.story-copy .sec-title { margin-bottom: 1.1rem; }
.story-copy .lede + .lede { margin-top: 1rem; }
.story-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Photo only, no gradient or text on top of it. */
/* Square crop off a 2:3 portrait frame, so the crop is vertical. Bias down:
   centred, the top half is mostly empty ceiling and the stage falls low. */
.story-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 62%; }
.story-stats { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-content: center; }
.story-stats .stat-value { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

@media (max-width: 1080px) {
  .story-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .story-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-media img { aspect-ratio: 4 / 3; }
  .story-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

/* ==========================================================================
   24. FAQ
   ========================================================================== */
.faq-list { display: grid; gap: 0.75rem; max-width: 900px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--coral); flex: 0 0 auto; transition: transform 0.28s var(--ease); }
.faq-plus .ico { width: 19px; height: 19px; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-answer { padding: 0 1.35rem 1.3rem; }
.faq-answer p { font-size: var(--fs-sm); line-height: 1.75; margin: 0; max-width: 78ch; }

/* answer-engine "at a glance" block */
.at-glance {
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-2);
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
}
.at-glance h2 { font-size: 0.72rem; font-family: var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.at-glance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.1rem 2rem; margin: 0; }
.at-glance dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.at-glance dd { margin: 0; font-size: var(--fs-sm); color: var(--fg); line-height: 1.6; }

/* ==========================================================================
   25. Motion & utilities
   ========================================================================== */
/* Only hide for the animation when scripting is available. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.mt-4 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.text-center { text-align: center; }
.max-60 { max-width: 60ch; }
.max-70 { max-width: 70ch; }

@media print {
  .site-header, .site-footer, .cta-band, .nav-scrim, .lightbox, .vmodal, .hero-scroll { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* --- About: creativity meets technology ---------------------------------- */
/* Light band; copy left, wide photo right. The photo carries its own wording,
   so nothing is overlaid on it. */
.tech-band { background: var(--paper); }
.tech-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: center;
}
.tech-copy .sec-title { margin-bottom: 1rem; font-size: clamp(1.6rem, 2.1vw, 2rem); }
@media (min-width: 1100px) { .tech-copy .sec-title { white-space: nowrap; } }
.tech-copy .lede { max-width: 48ch; }
.tech-media { border-radius: var(--radius); overflow: hidden; line-height: 0; }
.tech-media img { width: 100%; height: auto; aspect-ratio: 2170 / 725; object-fit: cover; }

@media (max-width: 900px) {
  .tech-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26. Mobile responsive enhancements & fixes
   ========================================================================== */

/* --- Venue partners table (destinations page) ---------------------------- */
.venue-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
}
.venue-table-wrap::-webkit-scrollbar { height: 6px; }
.venue-table-wrap::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 3px;
}
.venue-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.venue-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.venue-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1rem;
  border-bottom: 2px solid var(--line);
  background: var(--paper-2);
  white-space: nowrap;
}
.venue-table thead th:first-child {
  border-top-left-radius: 10px;
  white-space: nowrap;
  width: 56px;
}
.venue-table thead th:last-child { border-top-right-radius: 10px; }
.venue-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.6;
  color: var(--body);
}
.venue-table tbody tr:last-child td { border-bottom: 0; }
.venue-table tbody td:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--coral);
  white-space: nowrap;
  width: 56px;
}
.venue-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.venue-area {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
}
@media (max-width: 760px) {
  .venue-table-wrap {
    overflow: visible;
    scrollbar-width: none;
  }
  .venue-table {
    min-width: 0;
    display: block;
    font-size: var(--fs-sm);
  }
  .venue-table caption {
    display: block;
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }
  .venue-table thead { display: none; }
  .venue-table tbody { display: grid; gap: 0.85rem; }
  .venue-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 35, 58, 0.05);
  }
  .venue-table tbody td {
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .venue-table tbody td:first-child {
    grid-row: 1 / 3;
    width: auto;
    font-size: 0.95rem;
    line-height: 1.2;
    padding-top: 0.15rem;
  }
  .venue-table tbody td:nth-child(3) {
    grid-column: 2;
    color: var(--body);
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .venue-table tbody td:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 0.7rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
  }
  .venue-name {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }
}

/* --- Map stats: collapse to 2 cols on small mobile ----------------------- */
@media (max-width: 560px) {
  .map-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .map-stats { gap: 0.75rem; }
  .map-stats .stat-value { font-size: 1.35rem; }
  .map-stats .stat-label { font-size: 0.72rem; }
}

/* --- Hero actions: wrap play-btn to own row & center --------------------- */
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .play-btn { justify-content: center; order: 2; }
  .phero-actions .btn { width: 100%; justify-content: center; }
}

/* --- CTA band: full-width button on small mobile ------------------------- */
@media (max-width: 640px) {
  .cta-right .btn { width: 100%; justify-content: center; }
  .cta-right { gap: 1.25rem; }
  .cta-title { font-size: 1.7rem; }
  .cta-lede { max-width: 100%; }
}

/* --- Tabs: better horizontal scroll & touch padding ---------------------- */
@media (max-width: 620px) {
  .tabs {
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    gap: 1.5rem;
  }
}

/* --- Client logos: smaller marks on narrow screens ------------------------ */
@media (max-width: 560px) {
  .client-marquee { --logo-scale: 0.7; }
  .client-cell { height: 42px; }
}
@media (max-width: 380px) {
  .client-marquee { --logo-scale: 0.6; }
  .client-track { gap: 1.5rem; }
}

/* --- Page hero (phero): tighter on small screens ------------------------- */
@media (max-width: 560px) {
  .phero-inner {
    min-height: auto;
    padding-block: 2.75rem;
  }
  .phero-title { letter-spacing: -0.026em; }
}

/* --- Hero media crop: keep subject visible on portrait mobile ------------ */
@media (max-width: 720px) {
  .hero-media img { object-position: 58% 50%; }
  .phero-media img { object-position: 50% 40%; }
}

/* --- Nav: touch-friendly sizing ------------------------------------------ */
@media (max-width: 1024px) {
  .nav-link { min-height: 48px; display: flex; align-items: center; width: 100%; }
  .nav-sub-toggle { top: 0.25rem; width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .site-nav {
    width: 100%;
    max-width: none;
    box-shadow: none;
    padding-inline: 1.15rem;
  }
  .nav-toggle { width: 42px; height: 42px; }
}

/* --- Footer: social spacing when stacked --------------------------------- */
@media (max-width: 720px) {
  .footer-nav ul { width: 100%; }
  .footer-social { margin-top: 0.25rem; }
}

/* --- Split actions: stack full-width on very small ----------------------- */
@media (max-width: 480px) {
  .split-actions .btn { width: 100%; justify-content: center; }
  .split-actions { flex-direction: column; align-items: stretch; }
}

/* --- =====================================================================
   Very small screens (compact phones ≤ 420px, e.g. iPhone SE / older)
   ===================================================================== */
@media (max-width: 420px) {
  :root {
    --header-h: 68px;
  }
  .container { padding-inline: 1rem; }

  .logo-img { width: 112px; }

  .hero-title { font-size: 2.15rem; }
  .hero-lede { font-size: 0.94rem; margin-bottom: 1.6rem; }
  .phero-title { font-size: 1.85rem; }

  .sec-title { font-size: 1.55rem; }
  .fs-h3 { font-size: 1.12rem; }
  .sec-head { gap: 0.9rem; margin-bottom: 1.85rem; }
  .sec-head-right { gap: 0.75rem; }

  .btn { padding: 0.78rem 1.25rem; font-size: 0.72rem; }
  .btn .ico { width: 15px; height: 15px; }
  .btn-outline { padding-inline: 1.1rem; }
  .nav-cta-mobile { margin-top: 1.4rem; }

  .eyebrow { font-size: 0.66rem; }
  .eyebrow-rule { width: 22px; }

  .stat-value { font-size: 1.6rem; }
  .stat-label { font-size: 0.75rem; }

  .svc-title { font-size: 0.68rem; letter-spacing: 0.09em; }
  .svc-icon { width: 30px; height: 30px; }
  .svc-icon .ico { width: 30px; height: 30px; }
  .svc-item { padding: 1.4rem 0.8rem; gap: 0.7rem; }

  .place-body { left: 0.85rem; right: 2.75rem; bottom: 0.8rem; }
  .place-name { font-size: 0.88rem; }
  .place-tag { font-size: 0.68rem; }
  .place-go { width: 30px; height: 30px; right: 0.8rem; bottom: 0.8rem; }
  .place-go .ico { width: 14px; height: 14px; }

  .quote-card {
    grid-template-columns: 1fr;
    padding: 0;
    border-left: 0;
  }
  .quote-card:first-child { padding: 0; }
  .quote-badge { width: 40px; height: 40px; }
  .quote-badge .ico { width: 16px; height: 16px; }
  .quote-text { font-size: 0.88rem; }

  .link-arrow { font-size: 0.7rem; }
  .link-arrow .ico { width: 14px; height: 14px; }

  .cbtn { width: 40px; height: 40px; }
  .cbtn .ico { width: 16px; height: 16px; }

  .work-title { font-size: 0.88rem; }
  .work-meta { font-size: 0.66rem; }
  .work-go { width: 30px; height: 30px; right: 0.8rem; bottom: 0.8rem; }
  .work-go .ico { width: 13px; height: 13px; }
  .work-overlay { font-size: 0.58rem; left: 0.9rem; top: 0.9rem; }
  .work-body { left: 0.9rem; right: 2.85rem; bottom: 0.8rem; }

  .who-body { padding-block: 2.25rem; }
  .who-note { padding-block: 1.75rem 2.75rem; }
  .script-note { font-size: 1.1rem; }
  .script-wave { width: 110px; }

  .map-note { padding: 1.1rem; }
  .map-caption { font-size: 0.64rem; line-height: 1.8; }

  .venue-links a { padding: 0.32rem 0.55rem; font-size: 0.7rem; }

  .field input, .field select, .field textarea { padding: 0.72rem 0.85rem; font-size: 0.92rem; }
  .form-grid { gap: 0.85rem; }

  .office-body { padding: 1rem 1.05rem 1.15rem; }
  .office-plate { height: 96px; }

  .social-link { width: 36px; height: 36px; }
  .social-link .ico { width: 16px; height: 16px; }

  .footer-inner { padding-block: 1.5rem; }
  .footer-nav a { font-size: 0.84rem; }
  .footer-bottom { font-size: 0.72rem; padding-block: 0.9rem; }
}

/* --- Extra compact ≤ 360px ----------------------------------------------- */
@media (max-width: 360px) {
  .logo-img { width: 100px; }
  .hero-title { font-size: 1.95rem; }
  .phero-title { font-size: 1.7rem; }
  .sec-title { font-size: 1.45rem; }
  .svc-title { font-size: 0.64rem; line-height: 1.4; }
  .svc-item { padding: 1.2rem 0.65rem; }
  .stat-value { font-size: 1.45rem; }
  .place-name { font-size: 0.82rem; }
  .place-tag { font-size: 0.65rem; }
  .btn { padding: 0.72rem 1.05rem; font-size: 0.7rem; }
}