/* =========================================================
   Advocate Travel Marketing — Redesign
   style.css  ·  core tokens, base, components
   Design direction: "Longitude" — midnight marine canvas,
   editorial serif display, mono utility labels, magenta signal dot.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour */
  --ink:        #070D18;
  --navy:       #0E1A2E;
  --navy-2:     #16253D;
  --navy-3:     #1E3149;
  --marine:     #2F7D96;
  --marine-dk:  #235F73;
  --marine-lt:  #6FB6CB;
  --signal:     #E8336A;
  --signal-dk:  #B92552;
  --paper:      #F2F5F7;
  --paper-2:    #E3EAEE;
  --line:       #D3DDE3;
  --line-dark:  rgba(255,255,255,.14);
  --white:      #FFFFFF;
  --body-text:  #384B5C;
  --muted:      #7C93A5;
  --muted-dark: #9FB4C4;

  /* Type */
  --f-display: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Ubuntu Mono", "SFMono-Regular", Consolas, monospace;

  --t-hero:   clamp(2.75rem, 7vw, 6rem);
  --t-h1:     clamp(2.25rem, 5.2vw, 4.25rem);
  --t-h2:     clamp(1.85rem, 3.6vw, 3rem);
  --t-h3:     clamp(1.25rem, 2vw, 1.6rem);
  --t-lead:   clamp(1.05rem, 1.5vw, 1.375rem);
  --t-body:   1rem;
  --t-small:  .875rem;
  --t-nav:    1.0625rem;  /* header menu links — client asked to match old site */
  --brand-w:  222px;      /* header logo width */
  --brand-w-sm: 168px;    /* header logo width on small screens */
  --t-micro:  .6875rem;

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 900px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(2.75rem, 5vw, 4.75rem);
  --radius: 4px;
  --radius-lg: 10px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .55s;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--body-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--signal); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--f-mono); font-size: var(--t-small);
}
.skip-link:focus { left: 0; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 0 0 .5em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Signature: every display heading closes with the brand's magenta dot */
.dot { color: var(--signal); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--marine-dk);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--marine);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.eyebrow { align-items: flex-start; }
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  flex: none; margin-top: .5em;
}
.eyebrow--light { color: var(--marine-lt); }
/* Over photography the teal eyebrow loses contrast against bright areas */
.hero .eyebrow--light,
.page-hero .eyebrow,
.cta .eyebrow--light {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(7,13,24,.7);
}

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(2rem, 3.5vw, 3.25rem); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--muted-dark); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.sec-head { max-width: 720px; margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--navy .rule { background: var(--line-dark); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .25s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--signal { background: var(--signal); color: #fff; }
.btn--signal:hover { background: var(--signal-dk); }

.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn--outline { border-color: var(--marine); color: var(--marine-dk); }
.btn--outline:hover { background: var(--marine); color: #fff; }

.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.txt-link {
  font-family: var(--f-mono); font-size: var(--t-small);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal); display: inline-flex; gap: .5rem; align-items: center;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.txt-link:hover { border-color: var(--signal); }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.35rem;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-stuck {
  background: rgba(9,17,30,.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block: .7rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.brand { display: block; flex: none; }
.brand img { width: var(--brand-w); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a {
  /* Old site set the menu in the brand sans at a heavier weight, sentence
     case, with normal tracking — not the mono/uppercase treatment. */
  font-family: var(--f-body);
  font-size: var(--t-nav);
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.86);
  position: relative;
  padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--signal); }

.header-cta {
  flex: none;
  /* Matches the nav treatment the client asked for: brand sans, semibold,
     sentence case, normal tracking — not the mono/uppercase default. */
  font-family: var(--f-body);
  font-size: var(--t-nav);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  padding: .8rem 1.7rem;
  box-shadow: 0 2px 10px rgba(232, 51, 106, .28);
}

/* A more definite hover: deeper colour, a lift, and a glow that reads on both
   the transparent and the stuck (solid) header. */
.header-cta:hover,
.header-cta:focus-visible {
  background: var(--signal-dk);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 22px rgba(232, 51, 106, .45);
}
.header-cta:active { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .header-cta:hover, .header-cta:focus-visible { transform: none; }
}

.nav-toggle {
  display: none; width: 44px; height: 44px; position: relative;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
}
.nav-toggle span {
  position: absolute; left: 12px; width: 20px; height: 1.5px; background: #fff;
  transition: transform .35s var(--ease), opacity .2s linear;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: 7.5rem 0;
  background: var(--ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.14) saturate(1.06);
}
.hero__media video { display: block; }
/* Scrims are anchored where the type sits (top bar + lower left) so the
   middle of the photograph stays clear. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,13,24,.55) 0%, rgba(7,13,24,.08) 22%, rgba(7,13,24,0) 42%, rgba(7,13,24,.34) 72%, rgba(7,13,24,.8) 100%),
    linear-gradient(90deg, rgba(7,13,24,.6) 0%, rgba(7,13,24,.18) 42%, rgba(7,13,24,0) 68%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2rem, 4vw, 3.25rem); }

.hero__title {
  font-size: var(--t-hero);
  color: #fff;
  text-shadow: 0 2px 26px rgba(7,13,24,.5);
  max-width: 15ch;
  margin-bottom: 1.5rem;
  letter-spacing: -.03em;
}
.hero__title em {
  font-style: italic;
  color: var(--marine-lt);
}
.hero__copy {
  color: rgba(255,255,255,.94); max-width: 52ch;
  font-size: var(--t-lead); line-height: 1.55;
  text-shadow: 0 1px 18px rgba(7,13,24,.65);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(2rem, 4vw, 3.25rem); z-index: 3;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  writing-mode: vertical-rl;
}
/* The cue is clickable (main.js scrolls to the next section); it should look
   it, and the text inside a native Text Editor widget must not pick up link
   styling of its own. */
.hero__scroll.is-linked { cursor: pointer; }
.hero__scroll a { color: inherit; text-decoration: none; }
.hero__scroll.is-linked:hover, .hero__scroll.is-linked:focus-visible { color: #fff; outline: none; }
.hero__scroll.is-linked:hover::after { animation-duration: 1.2s; }
/* Anchored sections stop clear of the fixed header, for in-page links and
   the hero cue alike. */
[id] > .wrap, section[id], .e-con[id] { scroll-margin-top: 5.5rem; }
.hero__scroll::after {
  content: ""; width: 1px; height: 52px;
  background: linear-gradient(180deg, var(--signal), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip { 0%,100% { opacity:.35; transform: scaleY(.6); transform-origin: top; } 50% { opacity:1; transform: scaleY(1); } }

/* Page hero (inner pages) */
.page-hero {
  position: relative; min-height: 44vh; display: flex; align-items: center;
  padding-block: 8rem 3.25rem; background: var(--ink); overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.12) saturate(1.05);
}
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,13,24,.6) 0%, rgba(7,13,24,.12) 32%, rgba(7,13,24,.4) 78%, rgba(7,13,24,.78) 100%),
    linear-gradient(90deg, rgba(7,13,24,.58) 0%, rgba(7,13,24,.12) 48%, rgba(7,13,24,0) 72%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 {
  color: #fff; font-size: var(--t-h1); max-width: 16ch;
  text-shadow: 0 2px 24px rgba(7,13,24,.5);
}
.page-hero .lead {
  color: rgba(255,255,255,.94); max-width: 54ch;
  text-shadow: 0 1px 18px rgba(7,13,24,.65);
}
.page-hero .eyebrow { color: var(--marine-lt); }

/* ---------- 9. Capabilities ---------- */
.caps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.cap {
  padding: 1.85rem 1.5rem 2rem;
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column;
  transition: background .4s var(--ease);
  position: relative;
}
.cap:last-child { border-right: 0; }
.cap::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.cap:hover { background: rgba(255,255,255,.035); }
.cap:hover::before { transform: scaleX(1); }
.cap__icon { height: 40px; margin-bottom: 1.1rem; }
.cap__icon img { height: 100%; width: auto; }
.cap h3 { color: #fff; font-size: 1.3rem; margin-bottom: .6rem; }
.cap p { color: var(--muted-dark); font-size: .9375rem; line-height: 1.6; flex: 1; }
.cap .txt-link { margin-top: 1.15rem; }

/* ---------- 10. Service blocks (What We Do) ---------- */
.svc { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.svc + .svc { margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.svc--flip .svc__media { order: 2; }

.svc__media { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.svc__media img:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.svc__media img:not(:first-child) { aspect-ratio: 4/3; }

.svc__icon { height: 38px; margin-bottom: .9rem; }
.svc__icon img { height: 100%; width: auto; }
.svc h2 { margin-bottom: .1em; }
.svc__sub {
  font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: .16em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 1.15rem;
}
.svc__list li {
  padding: .65rem 0 .65rem 1.6rem;
  border-bottom: 1px solid var(--line);
  position: relative; font-size: .9375rem; line-height: 1.55;
}
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--marine);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.svc__list li:hover::before { background: var(--signal); border-color: var(--signal); }
.svc__list li:first-child { border-top: 1px solid var(--line); }

/* ---------- 11. Case study + carousel ---------- */
.case {
  display: grid; grid-template-columns: 1fr 1.5fr; align-items: stretch;
  --case-accent: var(--navy);
}
/* min-width:0 stops the grid item's automatic minimum size from blowing out
   the fr columns. The media column is the wider of the two so the photograph
   keeps close to its native proportions instead of being cropped to a square. */
.case > * { min-width: 0; }
/* The media box is a fixed 4:3 frame. The photograph fills it edge to edge,
   and a photograph supplied AT 4:3 is shown whole — nothing is cropped because
   there is nothing outside the frame. That is the arrangement the client asked
   for: full-bleed like the old site, full picture like the old site, and it
   only works if the frame and the file agree on a shape. Supply case-study
   images at 1600 × 1200 (see the widget's Image display control).

   The frame's own proportions size the grid row, so the copy panel stretches
   to match the photo when the photo is the taller of the two, and the photo
   stretches (a slight crop) in the rarer case where the copy is taller — never
   a coloured band either way. The <img> is absolute so it fills whatever the
   stretched box ends up as.

   The 4:3 is NOT done with `aspect-ratio`. iOS Safari (WebKit) mishandles an
   aspect-ratio box that has no in-flow content and is block-stretched as a
   grid item: it derives the WIDTH from the stretched height instead of the
   height from the column width, and the frame collapsed to a thumbnail on
   iPhones while Android/Chrome were fine. An in-flow ::after spacer carrying
   75% padding gives the box its height the old-fashioned way — percentage
   padding resolves against the box's own width, which is definite in every
   engine, including iOS versions that have no aspect-ratio at all. */
.case__media {
  position: relative; min-height: 0;
  width: 100%;
  background: var(--navy-3);
  overflow: hidden;
}
.case__media::after {
  content: ""; display: block; width: 100%; padding-top: 75%;
}
/* Blurred-fill backdrop. The frame is filled by a blurred, enlarged copy of
   the same photograph; the photograph itself sits on top at its own
   proportions, uncropped. A 4:3 file covers the backdrop completely and looks
   identical to a plain fill; any other shape shows whole, with the letterbox
   reading as a soft continuation of the picture rather than a coloured band.
   `--case-backdrop` is set inline by the carousel widget and, for native
   Image widgets, by main.js from the <img> src. */
.case__media::before {
  content: ""; position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--case-backdrop, none) center / cover no-repeat;
  filter: blur(22px) saturate(1.15) brightness(.78);
  /* Scaled past the edges so the blur's transparent fringe stays clipped. */
  transform: scale(1.14);
}
.case__media img {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; z-index: 1;
  object-fit: contain; object-position: center;
}

/* Opt-in per widget: the photograph at its own proportions, centred on a band
   of the slide's accent. Rejected by the client for the carousel because of
   the band, but kept for any slide where cropping would be worse. */
.case--media-natural .case__media {
  background: var(--case-accent);
  display: grid; align-content: center;
}
.case--media-natural .case__media::after { content: none; }
.case--media-natural .case__media img {
  position: relative; z-index: 1; height: auto; object-fit: fill;
}
.case__body {
  background: var(--case-accent); color: rgba(255,255,255,.88);
  /* Padding is a variable so the stats band can bleed out to the panel edge
     with matching negative margins — that reproduces the old site's layout
     (dark copy panel above, light grey stats band below) without changing
     the markup. */
  --case-pad: clamp(1.35rem, 2vw, 1.9rem);
  padding: var(--case-pad);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1rem;
  /* Query container: the stat labels size themselves against this panel's
     width, which is what decides whether three of them fit on one line. */
  container-type: inline-size;
}
.case__body h3 { color: #fff; font-size: clamp(1.3rem, 1.9vw, 1.8rem); margin-bottom: .7rem; }
.case__body p { font-size: .8125rem; line-height: 1.6; }
.case__body .eyebrow { color: rgba(255,255,255,.75); margin-bottom: .85rem; }
.case__body .eyebrow::before { background: #fff; }

/* "Impact at a glance" sits on the light surface, edge to edge across the
   bottom of the copy panel — matching the previous site. */
.case .stats {
  display: grid;
  /* Content-width columns, spread across the band. Equal thirds forced the
     widest label to claim a third of the panel, which is what pushed it over
     the edge and made it wrap. Sized to content, the three labels together
     need less room than the band has. */
  grid-template-columns: repeat(3, auto);
  /* Grouped from the left with a measured gap, not spread edge to edge.
     `space-between` pushed the three stats as far apart as the band allowed,
     which is the "too much space" the client is comparing against — the old
     site sets them close together. */
  justify-content: start;
  align-items: start;
  gap: .35rem clamp(1rem, 2.4vw, 1.9rem);
  background: var(--paper);
  border-top: 0;
  margin: 1.35rem calc(var(--case-pad) * -1) calc(var(--case-pad) * -1);
  padding: 1.15rem var(--case-pad) 1.25rem;
}
.stats__label {
  grid-column: 1 / -1; margin: 0 0 .35rem;
  font-family: var(--f-body); font-weight: 600;
  font-size: .8125rem; letter-spacing: .01em;
  text-transform: none; color: var(--navy);
}
/* Figures pick up the slide's own accent colour, as on the old site. */
.stat__num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  color: var(--case-accent); line-height: 1; letter-spacing: -.02em; display: block;
  white-space: nowrap;
}
/* Single line, always — client requirement. Wrapping is no longer allowed as
   a fallback; instead the type sizes itself to the copy panel so three labels
   genuinely fit, and below 640px the band stacks (see responsive.css) so the
   constraint never bites. */
.stat__label {
  font-family: var(--f-body);
  /* Stepped up from .56–.72rem: the old site's labels are noticeably larger
     than ours were. Grouping the stats from the left (above) freed the width
     this costs. */
  font-size: clamp(.6875rem, .5vw + .38rem, .78rem);
  letter-spacing: .01em;
  /* The old site sets these in the same near-black as the "Impact at a glance"
     heading; ours were a pale muted grey and read as much fainter. */
  text-transform: none; color: var(--navy); margin-top: .35rem; display: block;
  white-space: nowrap;
  line-height: 1.35;
}
/* Where container queries are supported the label sizes against the copy
   panel rather than the viewport — exact, and unaffected by how wide the
   window happens to be. */
@supports (container-type: inline-size) {
  .stat__label { font-size: clamp(.6875rem, 2.5cqi, .78rem); }
  .case .stats { column-gap: clamp(1rem, 3.6cqi, 1.9rem); }
}

/* Carousel shell */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex; align-items: stretch;
  transition: transform .65s var(--ease);
}
.carousel__slide { flex: 0 0 100%; min-width: 0; display: flex; }
/* every slide fills the tallest slide's height, so the media box — and the
   crop applied to each photograph — stays identical from slide to slide */
.carousel__slide > .case { flex: 1; }

/* Arrows sit in the top corner of the photograph, clear of the copy */
.carousel__nav {
  position: absolute; top: clamp(.85rem, 1.6vw, 1.25rem); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(7,13,24,.5); border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.carousel__nav:hover { background: var(--signal); border-color: var(--signal); }
.carousel__nav svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; }
.carousel__nav--prev { right: calc(clamp(.85rem, 1.6vw, 1.25rem) + 54px); }
.carousel__nav--next { right: clamp(.85rem, 1.6vw, 1.25rem); }

.carousel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.4rem;
}
.carousel__dots { display: flex; gap: .6rem; }
.carousel__dots button {
  width: 34px; height: 3px; border-radius: 2px; background: var(--line);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.carousel__dots button:hover { background: var(--muted); }
.carousel__dots button[aria-selected="true"] { background: var(--signal); transform: scaleY(1.8); }

.carousel__count {
  font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: .1em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Stacked list on the dedicated Our Work page */
.case-list .case + .case { margin-top: clamp(1rem, 1.8vw, 1.5rem); }
.case-list .case--flip { grid-template-columns: 1.5fr 1fr; }
.case-list .case--flip .case__media { order: -1; }

/* ---------- 12. Statement band ---------- */
.statement { text-align: center; }
.statement blockquote {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.24; letter-spacing: -.02em;
  color: var(--navy); max-width: 24ch; margin-inline: auto;
}
.statement--light blockquote { color: #fff; }
.statement cite {
  display: block; font-style: normal; margin-top: 1.75rem;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- 13. Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.2vw, 1.75rem); }
.member {
  background: var(--navy); border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.member:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -22px rgba(7,13,24,.45); }
.member__photo { aspect-ratio: 4/3.1; overflow: hidden; background: var(--navy-3); }
.member__photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Anchored above centre so there is space above the head — the old site's
     framing. Individual portraits can still be nudged per image in Elementor
     via Style > Object Position. */
  object-position: center 22%;
  transition: transform .8s var(--ease);
}
.member:hover .member__photo img { transform: scale(1.05); }
.member__body { padding: 1.3rem 1.3rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.member h3 { color: #fff; font-size: 1.2rem; margin-bottom: .15rem; }
.member__role {
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--marine-lt); margin-bottom: 1rem; display: block;
}
.member__bio { font-size: .875rem; line-height: 1.62; color: var(--muted-dark); flex: 1; }
.member__years {
  margin-top: 1.05rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.12);
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: .55rem;
  display: flex; align-items: center; gap: .45rem;
}

/* Globe icon from the old site's bios. Inline SVG as a background image so it
   needs no asset file and inherits nothing that could break. */
.member__years::before {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .85;
}
.member__years b { color: #fff; font-weight: 500; }
.member--alt { background: var(--signal-dk); }
.member--alt .member__role { color: rgba(255,255,255,.85); }
.member--alt .member__bio { color: rgba(255,255,255,.9); }
.member--alt .member__years { color: rgba(255,255,255,.75); border-top-color: rgba(255,255,255,.25); }

/* ---------- 14. Clients ---------- */
.client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.client-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--navy);
  aspect-ratio: 4/3;
}
.client-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .5s var(--ease); }
.client-card:hover img { transform: scale(1.06); opacity: .88; }
.client-card__label {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 2.5rem 1.25rem 1.15rem;
  background: linear-gradient(180deg, rgba(7,13,24,0) 0%, rgba(7,13,24,.55) 45%, rgba(7,13,24,.9) 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.client-card__label span { color: #fff; font-size: .9375rem; font-weight: 500; }
.client-card__go {
  width: 30px; height: 30px; border-radius: 50%; background: var(--signal);
  display: grid; place-items: center; flex: none;
  transition: transform .35s var(--ease);
}
.client-card:hover .client-card__go { transform: rotate(45deg) scale(1.08); }
.client-card__go svg { width: 13px; height: 13px; stroke: #fff; }
.client-card.is-hidden { display: none; }

/* Marquee of destinations */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.15rem; }
.marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3.5rem;
}
.marquee__track span::after { content: "·"; color: var(--signal); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 15. Partners ---------- */
/* Old-site arrangement: image left, copy right, on the dark panel with the
   logo sitting above the heading. */
.partner {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg);
}
/* Shown whole, at its own proportions — the fixed 4/3 box was cropping the
   partner artwork. */
.partner__media img {
  border-radius: var(--radius);
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.partner__body { color: rgba(255,255,255,.82); }
.partner__body h2, .partner__body h3 { color: #fff; }
.partner__body p { margin-bottom: .9rem; }
.partner__body p:last-of-type { margin-bottom: 0; }

/* The logo is its own lockup — never stretched, never overlapping the heading
   that follows it. */
.partner__logo {
  display: block;
  height: 54px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  margin: 0 0 1.25rem;
}

/* ---------- Industry partners: logo column + copy, light panel ---------- */
.industry {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) 1.2fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--radius-lg);
}
.industry__logos {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  align-items: flex-start;
}
/* :where() default — the widget's own Width/Height in the sidebar wins;
   max-height at real specificity was clamping a sidebar Width. */
:where(.industry__logos img) {
  max-width: 100%;
  height: auto;
  max-height: 62px;
  object-fit: contain;
}
.industry__body h2 { margin-bottom: .9rem; }
.industry__body p { margin-bottom: .9rem; }
.industry__body p:last-child { margin-bottom: 0; }

/* Pangaea sits beneath, full width of the panel */
.pangaea {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) 1.2fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
.pangaea img { max-width: 240px; height: auto; object-fit: contain; }

/* Old site stacks the industry logos in a single column beside the copy,
   at a readable size. The previous 4-across grid squeezed each into a narrow
   cell and rendered them almost too small to identify. */
.logo-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  background: none;
  border: 0;
}
.logo-wall > * {
  background: none;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.logo-wall img {
  max-width: 230px;
  width: 100%;
  height: auto;
  max-height: 70px;
  object-fit: contain;
  object-position: left center;
}
.logo-wall div { background: var(--white); display: grid; place-items: center; padding: 1.6rem 1.25rem; min-height: 120px; }
.logo-wall img { max-height: 60px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.logo-wall div:hover img { filter: none; opacity: 1; }

.fact-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem,2.5vw,2rem); }
.fact { border-top: 2px solid var(--signal); padding-top: 1.35rem; }
.fact__num {
  font-family: var(--f-display); font-size: clamp(1.85rem, 3vw, 2.6rem); color: var(--navy);
  line-height: 1; display: block; letter-spacing: -.02em;
}
.fact p { font-size: .9375rem; margin-top: .75rem; color: var(--body-text); }

/* ---------- 16. Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: .9375rem; color: var(--navy);
  background: var(--paper); border: 1px solid transparent;
  padding: .95rem 1.1rem; border-radius: var(--radius);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--marine); background: #fff;
}
.form-note { font-size: .8125rem; color: var(--muted); margin-top: 1rem; }
.form-status {
  margin-top: 1rem; font-family: var(--f-mono); font-size: var(--t-small);
  color: var(--marine-dk); display: none;
}
.form-status.is-visible { display: block; }

.contact-card { background: var(--navy); color: var(--muted-dark); border-radius: var(--radius-lg); padding: clamp(2rem, 3.5vw, 2.75rem); }
.contact-card h3 { color: #fff; }
.contact-card__person { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.35rem; border-bottom: 1px solid rgba(255,255,255,.14); }
/* Legacy round-headshot default from when a person's photo sat here. The
   card now shows the office instead (native.css §27), so this is :where()
   so it can't resurface as a 62px ellipse under the landscape rule. */
:where(.contact-card__person img) { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.contact-card__person b { color: #fff; display: block; font-weight: 600; }
.contact-card__person span { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--marine-lt); }
.contact-list li { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 1rem; align-items: flex-start; }
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list svg { width: 18px; height: 18px; stroke: var(--signal); flex: none; margin-top: 3px; }
.contact-list a { color: #fff; }
.contact-list a:hover { color: var(--marine-lt); }
.contact-list small { display: block; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }

/* ---------- 17. CTA band ---------- */
.cta { position: relative; overflow: hidden; background: var(--ink); }
.cta__media { position: absolute; inset: 0; }
.cta__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.1) saturate(1.05);
}
.cta__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,13,24,.9) 0%, rgba(7,13,24,.72) 42%, rgba(7,13,24,.34) 74%, rgba(7,13,24,.1) 100%),
    linear-gradient(180deg, rgba(7,13,24,.3) 0%, rgba(7,13,24,0) 40%, rgba(7,13,24,.3) 100%);
}
.cta__inner { position: relative; z-index: 2; max-width: 620px; padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.cta h2 { color: #fff; text-shadow: 0 2px 22px rgba(7,13,24,.55); }
.cta p {
  color: rgba(255,255,255,.94); font-size: var(--t-lead); margin-bottom: 1.5rem;
  text-shadow: 0 1px 16px rgba(7,13,24,.6);
}

/* ---------- 18. Footer ---------- */
.site-footer { background: var(--ink); color: var(--muted); padding-block: clamp(2.5rem, 4vw, 3.5rem) 1.5rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.5rem, 3vw, 2.75rem); padding-bottom: 2.1rem; }
.footer-brand img { width: 165px; margin-bottom: 1.1rem; }
.footer-brand p { font-size: .875rem; line-height: 1.65; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .18em;
  text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; font-weight: 500;
}
.footer-col li { margin-bottom: .7rem; font-size: .9rem; }
.footer-col a { transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--signal); }
.socials { display: flex; gap: .65rem; margin-top: 1.5rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover { background: var(--signal); border-color: var(--signal); }
.socials svg { width: 16px; height: 16px; fill: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- 19. Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-d="1"] { transition-delay: .09s; }
.js .reveal[data-d="2"] { transition-delay: .18s; }
.js .reveal[data-d="3"] { transition-delay: .27s; }
.js .reveal[data-d="4"] { transition-delay: .36s; }

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