/* ==========================================================================
   Sandlot + Co. — McDonald's Owner/Operator landing page
   Built from "MCD Landing v13" (Claude Design handoff).
   ========================================================================== */

/* ---- Self-hosted fonts (latin subsets, WOFF2) ----------------------------- */
@font-face {
  font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bebas-neue-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/nunito-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto-slab-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --red: #ed1c24;
  --red-dark: #d0141b;
  --navy: #074560;
  --navy-deep: #0b3b52;
  --navy-hero: #183a4e;
  --yellow: #fec259;
  --yellow-bg: #f4be64;
  --teal: #96d0d1;
  --cream: #f9f2e6;
  --ink: #2b2e31;
  --white: #fff;

  --navy-88: rgba(7, 69, 96, 0.88);
  --navy-84: rgba(7, 69, 96, 0.84);
  --navy-82: rgba(7, 69, 96, 0.82);
  --navy-70: rgba(7, 69, 96, 0.7);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-86: rgba(255, 255, 255, 0.86);

  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;
  --font-slab: 'Roboto Slab', Georgia, serif;

  --wrap: 1108px;
  --gutter: clamp(12px, 3vw, 58px);
  --grid: repeating-linear-gradient(90deg, rgba(7, 69, 96, 0.055) 0 1px, transparent 1px 27px),
          repeating-linear-gradient(rgba(7, 69, 96, 0.055) 0 1px, transparent 1px 27px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--navy); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
img { display: block; }
h1, h2, h3, h4, p, figure, blockquote, fieldset { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--navy); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---- Type helpers -------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 400; }
.kicker {
  font-family: var(--font-slab); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.tag {
  display: inline-block; background: var(--teal); color: var(--navy);
  font-family: var(--font-slab); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 13px;
}
.tag--yellow { background: var(--yellow); }
.eyebrow {
  font-family: var(--font-slab); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
}
.rule { display: block; width: 104px; height: auto; margin: 16px 0 20px; }
.rule--center { margin-left: auto; margin-right: auto; }
.bar { width: 84px; height: 8px; background: var(--navy); margin: 18px auto 0; }

/* Layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.center { text-align: center; }

/* Torn-edge divider between sections.
   The jagged edge is cut from the bottom of the section ABOVE (.torn), so it carries that section's
   real background: colour, grid and paper texture. The .tear divs at the top of each section are now
   plain transparent spacers that reserve the 26px the torn edge overlaps. */
.tear { position: relative; height: 26px; background: none !important; }
.tear--sm { height: 24px; }
.torn {
  position: relative;
  margin-bottom: -26px;
  /* Flat top edge 2px outside the box so no anti-aliased clip edge shows at the top seam.
     Three irregular edges (long flats, sudden jags) so the tears read as paper, not a pattern. */
  clip-path: polygon(0 -2px, 100% -2px, 100% calc(100% - 13.0px), 95% calc(100% - 9.36px), 90% calc(100% - 11.96px), 83% calc(100% - 15.08px), 79% calc(100% - 8.32px), 71% calc(100% - 12.48px), 66% calc(100% - 10.4px), 58% calc(100% - 14.04px), 52% calc(100% - 16.12px), 47% calc(100% - 10.92px), 38% calc(100% - 8.84px), 33% calc(100% - 7.28px), 29% calc(100% - 13.0px), 21% calc(100% - 14.56px), 17% calc(100% - 9.88px), 9% calc(100% - 7.8px), 6% calc(100% - 12.48px), 0% calc(100% - 10.92px));
}
.torn--b { clip-path: polygon(0 -2px, 100% -2px, 100% calc(100% - 9.88px), 93% calc(100% - 15.6px), 86% calc(100% - 11.44px), 81% calc(100% - 14.04px), 73% calc(100% - 6.76px), 68% calc(100% - 10.92px), 60% calc(100% - 13.0px), 55% calc(100% - 9.36px), 45% calc(100% - 10.4px), 40% calc(100% - 16.64px), 34% calc(100% - 11.96px), 23% calc(100% - 13.52px), 18% calc(100% - 7.8px), 12% calc(100% - 11.44px), 4% calc(100% - 9.88px), 0% calc(100% - 14.56px)); }
.torn--c { clip-path: polygon(0 -2px, 100% -2px, 100% calc(100% - 11.44px), 96% calc(100% - 7.8px), 91% calc(100% - 13.0px), 84% calc(100% - 9.88px), 77% calc(100% - 16.64px), 70% calc(100% - 11.96px), 63% calc(100% - 10.4px), 56% calc(100% - 15.08px), 48% calc(100% - 8.32px), 42% calc(100% - 11.44px), 31% calc(100% - 14.56px), 26% calc(100% - 7.28px), 20% calc(100% - 12.48px), 11% calc(100% - 10.92px), 7% calc(100% - 13.52px), 0% calc(100% - 8.84px)); }
/* Each torn section must paint above the one that follows it. */
.proof.torn { z-index: 8; } #why.torn { z-index: 7; } .work.torn { z-index: 6; } .proofs.torn { z-index: 5; }
.how.torn { z-index: 4; } .faq.torn { z-index: 3; } .contact.torn { z-index: 2; }
/* Extra bottom padding equal to the overlap so content spacing is unchanged. */
.proof.torn { padding-bottom: calc(clamp(44px, 4.8vw, 63px) + 26px); }
#why.torn { padding-bottom: 0; }
.work.torn { padding-bottom: calc(clamp(46px, 5vw, 68px) + 26px); }
.proofs.torn { padding-bottom: calc(clamp(46px, 5vw, 70px) + 26px); }
.how.torn { padding-bottom: calc(clamp(46px, 5vw, 68px) + 26px); }
.faq.torn { padding-bottom: calc(clamp(52px, 6vw, 79px) + 26px); }
.contact.torn { padding-bottom: calc(clamp(46px, 5vw, 68px) + 26px); }

/* Textured paper backgrounds */
.paper { position: relative; background-color: var(--cream); background-image: var(--grid); overflow: hidden; }
.paper--teal { background-color: var(--teal); }
.paper--yellow { background-color: var(--yellow-bg); background-image: none; }
.paper__tex {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42; mix-blend-mode: multiply; pointer-events: none;
}
.paper--yellow .paper__tex { opacity: 0.8; }
.paper > .tear, .paper > .wrap { position: relative; }

/* ---- Hand-drawn doodles from the original design ---------------------------
   Decorative only. Absolutely positioned in the section margins, a little tilted, some half off the
   edge. Content wrappers sit above them. Hidden on narrow screens where there is no margin to live in. */
section > .wrap, .paper > .why__quote { position: relative; z-index: 1; }
.doodle { position: absolute; z-index: 0; pointer-events: none; user-select: none; height: auto; }
.doodle--star-scribble { left: -28px; top: 4px; width: clamp(90px, 8vw, 128px); transform: rotate(-8deg); }
.doodle--arrow { right: 2.5%; top: clamp(56px, 5.6vw, 84px); width: clamp(104px, 9.4vw, 150px); transform: rotate(6deg); }
.doodle--loops { left: -190px; top: 38%; width: clamp(380px, 36vw, 560px); opacity: 0.85; }
.doodle--cluster { right: 5%; top: 44px; width: clamp(120px, 11vw, 170px); transform: rotate(4deg); }
.doodle--star-teal { left: -26px; top: 34%; width: clamp(80px, 7.5vw, 116px); transform: rotate(-14deg); }
.doodle--chevrons { right: 6%; top: 52%; width: clamp(90px, 8vw, 128px); }
.doodle--exclaim { right: 12%; top: 36px; width: clamp(40px, 3.6vw, 58px); transform: rotate(10deg); }
.doodle--asterisk { left: -22px; top: 46%; width: clamp(80px, 7.6vw, 118px); transform: rotate(12deg); }
@media (max-width: 1180px) { .doodle--arrow, .doodle--loops, .doodle--chevrons, .doodle--exclaim, .doodle--asterisk { display: none; } }
@media (max-width: 759px) { .doodle { display: none; } }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: none; text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; line-height: 1;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms, color 120ms;
}
.btn__ring {
  flex: none; width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 800; line-height: 1;
}
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--yellow); color: var(--red); }
.btn--yellow { background: var(--yellow); color: var(--red); }
.btn--yellow:hover { background: var(--white); color: var(--red); }
.btn--ghost { background: none; border: 2px solid var(--cream); color: var(--cream); }
.btn--ghost:hover { background: var(--cream); color: var(--red); }
.btn--outline {
  background: none; border: 2px solid rgba(255, 255, 255, 0.5); color: var(--white);
  font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.btn--outline:hover { border-color: var(--yellow); color: var(--yellow); }

/* ---- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 60; background: var(--cream); border-bottom: 3px solid var(--navy);
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px clamp(14px, 2vw, 26px);
}
.nav__logo { flex: none; display: block; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { flex: 0 1 auto; display: flex; align-items: center; white-space: nowrap; gap: clamp(12px, 1.8vw, 25px); }
.nav__links a { color: var(--navy); }
.nav__links a:hover { color: var(--red); }
.nav__cta {
  flex: none; display: flex; align-items: center; gap: 12px;
  background: var(--red); color: var(--cream); padding: 11px 16px 8px;
  box-shadow: 4px 4px 0 var(--navy);
  font: 700 15px/1 var(--font-slab); letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms;
}
.nav__cta:hover { background: var(--red-dark); color: var(--white); box-shadow: 2px 2px 0 var(--navy); transform: translate(2px, 2px); }
.nav__cta .btn__ring { width: 22px; height: 22px; border-color: var(--cream); }
@media (max-width: 759px) { .nav__links { display: none; } }

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; background: var(--navy-hero); overflow: hidden; isolation: isolate;
  min-height: clamp(560px, 62vw, 980px); display: flex; flex-direction: column;
}
.hero__plate {
  position: absolute; bottom: clamp(-40px, -2.1vw, -14px); left: 50%; transform: translateX(-50%);
  width: 108%; max-width: none; height: auto; z-index: 0;
  animation: sl-mask 680ms var(--ease) both;
}
.hero__plate img { width: 100%; height: auto; }
.hero__head {
  position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(26px, 3.4vw, 47px) var(--gutter) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__tag { margin-bottom: clamp(20px, 2.6vw, 29px); padding: 7px 14px; animation: sl-rise 520ms var(--ease) both; }
.hero__title { line-height: 0.82; text-wrap: balance; animation: sl-rise 560ms var(--ease) 80ms both; }
.hero__title-a { display: block; margin: 0 auto; font-size: clamp(34px, 4.9vw, 66px); color: var(--cream); letter-spacing: 0.01em; }
.hero__title-a em { font-style: normal; color: var(--yellow); }
.hero__title-b { display: block; position: relative; z-index: 1; margin-top: 0.02em; font-size: clamp(66px, 12.4vw, 172px); color: var(--cream); }
.hero__crew {
  position: absolute; bottom: clamp(-40px, -2.1vw, -14px); left: 50%; transform: translateX(-50%);
  /* Must stay at exactly the same width as .hero__plate: the plate is a duotone of this
     same photo and the colour cutout registers on top of it. Do not cap this width. */
  width: 108%; max-width: none; height: auto; z-index: 2; pointer-events: none;
}
.hero__crew img { width: 100%; height: auto; }
.hero__foot {
  position: relative; z-index: 3; margin-top: auto; width: 100%; max-width: var(--wrap);
  margin-left: auto; margin-right: auto;
  padding: clamp(24px, 3vw, 36px) var(--gutter) clamp(24px, 2.8vw, 34px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__panel {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 25px); align-items: center; justify-content: center;
  text-align: center; max-width: 790px; background: var(--red);
  padding: clamp(16px, 1.8vw, 21px) clamp(18px, 2.2vw, 25px);
  box-shadow: 6px 6px 0 rgba(7, 69, 96, 0.55);
  animation: sl-rise 560ms var(--ease) 160ms both;
}
.hero__panel p {
  flex: 1 1 360px; min-width: min(100%, 280px); color: var(--white);
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; line-height: 1.5; text-wrap: pretty;
}
.hero__ctas { flex: none; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__sms {
  min-height: 56px; padding: 13px 24px 10px; font-size: clamp(26px, 2.4vw, 29px);
  box-shadow: 5px 5px 0 rgba(7, 69, 96, 0.45);
}
.hero__sms:hover { box-shadow: 2px 2px 0 rgba(7, 69, 96, 0.45); transform: translate(3px, 3px); }
.hero__work { min-height: 56px; padding: 13px 22px 10px; font-size: clamp(24px, 2.2vw, 27px); }
@media (max-width: 759px) {
  .hero__plate { display: none; }
  /* The cutout's top third is transparent; pull it up so the crew sits just under the headline.
     The duotone plate rides along as the picture's background at the same width, bottom-aligned so it
     registers with the cutout exactly as on desktop; inset shadows fade its top and bottom edges into
     the hero navy so it reads as a background rather than a pasted rectangle. */
  .hero__crew {
    /* Heads start 37.5% down the cutout (19.58% of its width); pull the crew up so they rise 0.18em into the headline. */
    position: relative; bottom: auto; z-index: auto; width: 100%; margin-top: calc(-0.18 * clamp(66px, 12.4vw, 172px) - 19.58%);
    background: url('../photos/hero-plate-duotone-640.webp') center bottom / 100% auto no-repeat;
    box-shadow: inset 0 90px 60px -40px var(--navy-hero), inset 0 -34px 30px -22px var(--navy-hero);
  }
  /* The picture itself has no z-index, so its plate background paints under the headline (z 1) while the cutout,
     lifted to z 2, paints over it: the heads sit in front of the letters, as on desktop. */
  .hero__crew img { position: relative; z-index: 2; }
}
/* From 760px up the hero's height is the headline plus a spacer sized from the crew photo, so the tallest heads
   under "national ad." always rise the same small distance into the letters, whatever the screen width.
   Spacer = crew height below the heads (heads start 37.5% down the cutout; the cutout is 108% of the hero wide and
   731/1400 as tall as it is wide, so 62.5% x 56.39% = 35.245% of the hero width) minus the overlap into the glyphs
   (0.18em of the headline) minus how far the cutout hangs below the hero's bottom edge. Percentages resolve against
   width, the same way the crew's own width does. The red panel is pinned to the bottom edge, over the crew. */
@media (min-width: 760px) {
  .hero { min-height: 0; padding-bottom: calc(35.245% - 0.18 * clamp(66px, 12.4vw, 172px) - clamp(14px, 2.1vw, 40px)); }
  .hero__foot { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; }
}
/* Tablet widths: the crew and panel are both anchored to the hero's bottom edge, so the only way to keep
   the panel off the crew's faces is a slightly larger crew and a tighter panel. Plate and crew scale together.
   At 116% wide the crew is 60.57% of the hero tall, so the spacer is 62.5% of that: 37.855%. */
@media (min-width: 760px) and (max-width: 1180px) {
  .hero__plate, .hero__crew { width: 116%; }
  .hero { padding-bottom: calc(37.855% - 0.18 * clamp(66px, 12.4vw, 172px) - clamp(14px, 2.1vw, 40px)); }
  .hero__panel { padding: 12px 18px; gap: 12px; }
  .hero__panel p { font-size: 14px; line-height: 1.45; }
  .hero__sms, .hero__work { min-height: 46px; padding: 10px 18px 8px; font-size: 22px; }
}

/* ---- Proof strip ---------------------------------------------------------- */
.proof {
  position: relative; background: var(--navy);
  padding: clamp(40px, 4.4vw, 58px) var(--gutter) clamp(44px, 4.8vw, 63px);
}
.proof__tear { position: absolute; top: -1px; left: 0; right: 0; height: 25px; background: #0b4761 !important; clip-path: polygon(0 -2px,100% -2px,100% 56%, 96% 70%, 91% 50%, 84% 62%, 77% 36%, 70% 54%, 63% 60%, 56% 42%, 48% 68%, 42% 56%, 31% 44%, 26% 72%, 20% 52%, 11% 58%, 7% 48%, 0% 66%); }
.proof__grid {
  max-width: var(--wrap); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(26px, 3vw, 40px);
}
.stat { display: flex; gap: 14px; align-items: flex-start; }
/* The middle stat carries the widest headline (40+ organizations), so it gets a wider column; otherwise
   that headline runs flush to its column edge and reads as if the middle block leans right. */
@media (min-width: 820px) { .proof__grid { grid-template-columns: 1fr 1.2fr 1fr; } }
.stat img { flex: none; width: 36px; height: auto; margin-top: 7px; }
.stat__n { font: 400 clamp(44px, 4.4vw, 48px)/0.84 var(--font-display); color: var(--white); margin-bottom: 8px; }
.stat__l { font-size: 15px; line-height: 1.5; color: var(--white-86); }

/* ---- Why ------------------------------------------------------------------ */
.why__inner {
  padding-top: clamp(46px, 5.2vw, 76px); padding-bottom: 0;
  display: flex; flex-wrap: wrap-reverse; gap: clamp(28px, 4vw, 58px); align-items: center;
}
.why__fig { flex: 1 1 340px; min-width: min(100%, 280px); }
.why__fig img {
  width: 100%; height: clamp(250px, 29vw, 370px); object-fit: cover; object-position: center 38%;
  border: none; border-radius: 22px; box-shadow: none;
}
.why__copy { flex: 1 1 430px; min-width: min(100%, 280px); }
.why__copy .tag { margin-bottom: clamp(16px, 2vw, 22px); }
.why__sub {
  font-family: var(--font-slab); font-weight: 700; font-size: clamp(15px, 1.7vw, 18px);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin-bottom: 10px;
}
.why__title { max-width: 20ch; font: 400 clamp(40px, 5.6vw, 64px)/0.82 var(--font-display); color: var(--navy); }
.why__p { margin-bottom: clamp(18px, 2.2vw, 24px); max-width: 56ch; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.why__quote { padding-bottom: 0; }
/* Full-bleed testimonial band: teal runs edge to edge, content stays on the page grid. */
.why__quote .quote--full { padding-left: 0; padding-right: 0; padding-bottom: calc(clamp(22px, 2.8vw, 34px) + 26px); box-shadow: none; }
.why__quote .quote--full figure { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.why__lead { max-width: 48ch; font-size: clamp(19px, 2.1vw, 25px); font-weight: 700; line-height: 1.44; text-wrap: pretty; }

/* ---- Section headings ----------------------------------------------------- */
.section-title { font: 400 clamp(44px, 7vw, 85px)/0.8 var(--font-display); color: var(--navy); }
/* Thick offset bar under big section titles (from the original design), replacing the repeated squiggle. */
.title-bar { display: block; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; position: relative; }
.title-bar::after {
  content: ''; display: block; height: clamp(9px, 1.1vw, 15px); margin: 0.06em auto 0; width: 100%;
  background: var(--red);
}
.title-bar--navy::after { background: var(--navy); }
/* Two-line titles: cap the box near the longest line so the bar matches the text, not the container. */
.faq__head .title-bar { max-width: 23.9ch; }
.proofs__head .title-bar { max-width: 15.1ch; }
.contact__head .title-bar { max-width: 18.2ch; }
.section-title--cream { color: var(--cream); }

/* ---- What we do ----------------------------------------------------------- */
.work { padding-bottom: clamp(46px, 5vw, 68px); }
.work__inner { padding-top: clamp(44px, 5vw, 68px); }
.work__head { text-align: center; margin-bottom: clamp(30px, 3.6vw, 45px); }
.services { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(34px, 4vw, 52px); }
.service__h { font-size: inherit; font-weight: inherit; }
.service__btn {
  width: 100%; min-height: 60px; background: var(--red); border: none; box-shadow: 6px 6px 0 var(--navy);
  text-align: left; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 2.2vw, 25px);
  font-family: var(--font-slab); font-weight: 700; font-size: clamp(16px, 1.9vw, 24px);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--white);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms;
  cursor: default;
}
.service__sign { flex: none; font-family: var(--font-body); font-size: 30px; font-weight: 800; line-height: 0.8; color: var(--yellow); display: none; }
.service__btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.service__panel { background: var(--navy); padding: clamp(24px, 2.8vw, 34px) clamp(18px, 2.4vw, 30px); }
.service__top { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 34px); align-items: flex-start; margin-bottom: clamp(22px, 2.6vw, 30px); }
.service__desc { flex: 1 1 340px; min-width: min(100%, 255px); max-width: 56ch; font-size: 16px; line-height: 1.62; color: var(--white-90); text-wrap: pretty; }
.service__incl { flex: 0 1 300px; min-width: min(100%, 240px); }
.service__incl-h { display: block; font-family: var(--font-slab); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.service__incl ul { margin-top: 9px; display: grid; gap: 6px; }
.service__incl li { display: flex; gap: 9px; font-size: 15px; line-height: 1.42; color: var(--white-86); }
.chev { flex: none; font-weight: 800; }
.chev--yellow { color: var(--yellow); }
.chev--red { color: var(--red); }
@media (max-width: 759px) {
  .service__btn { cursor: pointer; }
  .service__btn:hover { background: var(--red-dark); box-shadow: 3px 3px 0 var(--navy); transform: translate(3px, 3px); }
  .service__sign { display: block; }
  .service__panel[hidden] { display: none; }
}

/* Rails */
.rail-head { display: flex; gap: 14px 20px; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.rail-head h4 { font-family: var(--font-slab); font-weight: 700; font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--teal); }
.rail-ctl { display: flex; gap: 10px; align-items: center; flex: none; }
.rail-ctl button {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: none; background: var(--yellow);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy); font: 800 26px/1 var(--font-body); padding: 0 3px 3px 0;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms;
}
.rail-ctl button + button { padding: 0 0 3px 3px; }
.rail-ctl button:hover { background: var(--white); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); transform: translate(2px, 2px); }
.rail-ctl button:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 16px; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 3px 3px 14px; scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__end { flex: 0 0 2px; }
.rail-fade {
  position: absolute; top: 0; right: 0; width: 26px; height: calc(100% - 16px);
  background: linear-gradient(90deg, rgba(7, 69, 96, 0) 0%, rgba(7, 69, 96, 0.75) 90%); pointer-events: none;
}
.dots { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 2px; }
.dots button { height: 10px; width: 10px; border: none; border-radius: 5px; background: rgba(255, 255, 255, 0.34); padding: 0; transition: width 160ms var(--ease), background 160ms; }
.dots button[aria-current="true"] { width: 30px; background: var(--yellow); }
.dots button:hover { background: var(--white); }
.dots button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 759px) { .rail-ctl { display: none; } }
.rail-ctl.is-static, .dots.is-static { display: none; }

/* Cards */
.card {
  flex: 0 0 clamp(252px, calc((100% - 78px) / 3), 300px); scroll-snap-align: start;
  display: flex; flex-direction: column; background: var(--cream); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}
.card__media {
  position: relative; display: block; width: 100%; height: clamp(178px, 18.5vw, 214px);
  border: none; padding: 0; overflow: hidden; background: var(--navy-deep); transition: opacity 120ms;
}
.card__media:hover { opacity: 0.94; }
.card__media:focus-visible { outline: 4px solid var(--yellow); outline-offset: -4px; }
.card__media img, .card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__split { position: absolute; inset: 0; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 3px; background: var(--navy); }
.card__split source { display: none; }
.card__split img { position: static; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.card__shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, rgba(7, 69, 96, 0) 0%, rgba(7, 69, 96, 0.88) 82%); pointer-events: none;
}
.card__shade--tall { height: 56%; }
.card__shade--mid { height: 46%; }
.card__shade--half { height: 50%; }
.card__label {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--font-slab); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px 4px;
}
.card__label--yellow { background: var(--yellow); color: var(--red); }
.card__label--cream { background: var(--cream); color: var(--red); }
.card__label--red { background: var(--red); color: var(--white); }
.card__label--navy { background: var(--navy); color: var(--yellow); }
.card__label--teal { background: var(--teal); color: var(--navy); }
.card__caption {
  position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 2;
  font-family: var(--font-slab); font-weight: 700; font-size: 11px; line-height: 1.35; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--white-90); text-align: left;
}
.card__caption--play { right: 66px; }
.play {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  background: var(--yellow); display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.32);
}
.play::after { content: ""; display: block; width: 0; height: 0; border-left: 14px solid var(--navy); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 5px; }
.play--lg { position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 76px; height: 76px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34); }
.play--lg::after { border-left-width: 24px; border-top-width: 15px; border-bottom-width: 15px; margin-left: 7px; }
.card__body { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 14px 15px 15px; }
.card__org { font-family: var(--font-slab); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-70); }
.card__title { font: 400 clamp(20px, 2.1vw, 24px)/0.92 var(--font-display); color: var(--navy); }
.card__desc { font-size: 14px; line-height: 1.5; color: var(--navy-84); text-wrap: pretty; }
.card__metrics { display: flex; flex-wrap: wrap; gap: 11px 18px; padding-top: 8px; }
.card__metric-n { font: 400 clamp(25px, 2.6vw, 30px)/0.82 var(--font-display); color: var(--red); }
.card__metric-n--navy { color: var(--navy); }
.card__metric-l { margin-top: 4px; font-family: var(--font-slab); font-weight: 700; font-size: 10px; line-height: 1.3; letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy-70); }
.card__cta {
  min-height: 44px; align-self: flex-start; margin-top: auto; padding: 12px 18px 9px;
  font-size: clamp(18px, 1.9vw, 21px); box-shadow: 4px 4px 0 rgba(7, 69, 96, 0.3);
}
.card__cta:hover { box-shadow: 2px 2px 0 rgba(7, 69, 96, 0.3); transform: translate(2px, 2px); }
.card__cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Additional support */
.support__head { max-width: 900px; margin: 0 auto clamp(20px, 2.4vw, 28px); text-align: center; }
.support__head h3 { margin-bottom: 8px; font: 400 clamp(30px, 3.6vw, 44px)/0.86 var(--font-display); color: var(--navy); }
.support__head p { font-size: 16px; line-height: 1.55; color: var(--navy-82); }
.support { background: var(--cream); }
.support__h { font-size: inherit; font-weight: inherit; }
.support__btn {
  width: 100%; min-height: 56px; background: var(--cream); border: none; border-bottom: 3px solid rgba(7, 69, 96, 0.16);
  text-align: left; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 2.2vw, 24px);
  font-family: var(--font-slab); font-weight: 700; font-size: clamp(14px, 1.6vw, 17px); letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy);
}
.support__btn:hover { background: var(--white); }
.support__btn:focus-visible { outline: 4px solid var(--yellow); outline-offset: -4px; }
.support__sign { flex: none; font-family: var(--font-body); font-size: 26px; font-weight: 800; line-height: 0.8; color: var(--red); min-width: 16px; }
.support__panel { background: var(--white); padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2.2vw, 24px); }
.support__panel p { max-width: 66ch; font-size: 16px; line-height: 1.6; color: rgba(7, 69, 96, 0.9); text-wrap: pretty; }
.support__panel ul { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; align-items: start; }
@media (max-width: 560px) { .support__panel ul { grid-template-columns: 1fr; } }
.support__panel li { display: flex; gap: 9px; font-size: 15px; line-height: 1.45; color: var(--navy); }
.hire { margin-top: clamp(16px, 2vw, 22px); }
.hire__h { display: block; font-family: var(--font-slab); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.hire__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-top: 10px; max-width: 560px; }
.hire__btn { position: relative; display: block; width: 100%; height: 132px; border: none; padding: 0; overflow: hidden; background: var(--navy); transition: opacity 120ms; }
.hire__btn:hover { opacity: 0.9; }
.hire__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.hire__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hire__btn img.is-contain { object-fit: contain; padding: 7px; }

/* ---- Case studies (See our work) ------------------------------------------ */
.proofs { position: relative; background: var(--red); padding-bottom: clamp(46px, 5vw, 70px); }
.proofs__inner { padding-top: clamp(40px, 4.6vw, 65px); }
.proofs__head { max-width: 820px; margin: 0 auto clamp(30px, 3.6vw, 46px); text-align: center; }
.proofs__head h2 { font: 400 clamp(40px, 6.2vw, 78px)/0.82 var(--font-display); color: var(--cream); text-wrap: balance; }
.proofs__head .title-bar { margin-bottom: clamp(18px, 2.2vw, 24px); }
.proofs__head p { font-size: 17px; line-height: 1.6; color: var(--white); text-wrap: pretty; }
.cases { display: flex; flex-wrap: wrap; gap: clamp(22px, 2.8vw, 34px); align-items: stretch; margin-bottom: clamp(22px, 2.8vw, 34px); }
.case { flex: 1 1 300px; min-width: min(100%, 270px); max-width: 520px; font-size: inherit; font-weight: inherit; }
.case__btn {
  width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; padding: 0; border: none;
  background: var(--cream); box-shadow: 9px 9px 0 rgba(7, 69, 96, 0.6); font-family: inherit; overflow: hidden;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.case__btn:hover { box-shadow: 4px 4px 0 rgba(7, 69, 96, 0.6); transform: translate(4px, 4px); }
.case__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--navy); padding: clamp(8px, 1.2vw, 14px); }
.case__body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: clamp(18px, 2.2vw, 26px); }
.case__org { display: block; font-family: var(--font-slab); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: rgba(7, 69, 96, 0.8); }
.case__title { display: block; font: 400 clamp(26px, 2.8vw, 34px)/0.9 var(--font-display); color: var(--navy); }
.case__desc { display: block; font-size: 15px; line-height: 1.55; color: var(--navy); text-wrap: pretty; }
.case__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: auto; padding-top: 8px; border-top: 3px solid rgba(7, 69, 96, 0.18); }
.case__metrics--auto { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; padding-top: 10px; margin-top: 0; }
.metric__n { display: block; font: 400 clamp(30px, 3.4vw, 40px)/0.84 var(--font-display); color: var(--red); }
.metric__n--sm { font-size: clamp(22px, 2.4vw, 28px); }
.metric__l { display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; color: rgba(7, 69, 96, 0.85); }
.case__note { display: block; font-size: 12px; line-height: 1.5; color: var(--navy-70); }
.case__cta {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: var(--yellow); color: var(--red);
  font: 400 clamp(20px, 2.1vw, 24px)/1 var(--font-display); letter-spacing: 0.02em; padding: 11px 18px 8px;
  box-shadow: 4px 4px 0 rgba(7, 69, 96, 0.35); border: none;
}
.feature { background: var(--cream); box-shadow: 9px 9px 0 rgba(7, 69, 96, 0.6); display: flex; flex-wrap: wrap; align-items: stretch; }
.feature__media {
  flex: 1 1 380px; min-width: min(100%, 300px); position: relative; min-height: clamp(300px, 32vw, 420px);
  border: none; padding: 0; margin: 0; overflow: hidden; background: var(--navy); transition: opacity 120ms;
}
.feature__media:hover { opacity: 0.95; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.feature__media .card__shade { height: 42%; background: linear-gradient(180deg, rgba(7, 69, 96, 0) 0%, rgba(7, 69, 96, 0.85) 82%); }
.feature__body { flex: 1 1 420px; min-width: min(100%, 300px); display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.6vw, 34px); }
.feature__title { font: 400 clamp(30px, 3.4vw, 42px)/0.9 var(--font-display); color: var(--navy); }
.feature__desc { max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--navy); text-wrap: pretty; }
.feature__cta { align-self: flex-start; margin-top: 6px; min-height: 52px; gap: 10px; padding: 14px 20px 11px; font-size: clamp(20px, 2.1vw, 24px); box-shadow: 4px 4px 0 rgba(7, 69, 96, 0.35); }
.feature__cta:hover { box-shadow: 2px 2px 0 rgba(7, 69, 96, 0.35); transform: translate(2px, 2px); }

/* ---- How we work ---------------------------------------------------------- */
.how { padding-bottom: clamp(46px, 5vw, 68px); }
.how__inner { padding-top: clamp(44px, 5vw, 70px); padding-bottom: clamp(48px, 5.2vw, 74px); }
.how__head { max-width: 820px; margin: 0 auto clamp(30px, 3.6vw, 44px); text-align: center; }
.how__tag { margin-bottom: clamp(14px, 1.8vw, 20px); }
.how__head .title-bar, .work__head .title-bar { margin-bottom: clamp(18px, 2.2vw, 26px); }
.how__lead { margin-bottom: 16px; font: 400 clamp(34px, 4.6vw, 60px)/0.88 var(--font-display); color: var(--red); text-wrap: balance; }
.how__lead span { display: block; }
.how__head p:not(.how__lead) { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.pillars { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 48px); align-items: flex-start; margin-bottom: clamp(30px, 3.6vw, 44px); }
.pillar { flex: 1 1 260px; min-width: min(100%, 240px); }
.pillar__bar { width: 44px; height: 6px; background: var(--red); margin-bottom: 14px; }
.pillar h3 { margin-bottom: 10px; font: 400 clamp(26px, 2.8vw, 32px)/0.9 var(--font-display); color: var(--navy); }
.pillar p { font-size: 16px; line-height: 1.6; color: var(--navy-88); text-wrap: pretty; }
.how__credit { margin-bottom: clamp(34px, 4vw, 52px); text-align: center; font: 400 clamp(34px, 4.6vw, 60px)/0.88 var(--font-display); color: var(--red); text-wrap: balance; }
.quote { margin-top: clamp(38px, 4.4vw, 58px); margin-bottom: 0; background: var(--teal); padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3vw, 44px); box-shadow: 9px 9px 0 rgba(7, 69, 96, 0.28); }
.quote figure { display: flex; flex-wrap: wrap; gap: clamp(16px, 3.4vw, 48px); align-items: flex-end; }
.quote__img { flex: 0 0 auto; width: clamp(160px, 21vw, 270px); height: auto; align-self: flex-end; margin-bottom: -4px; }
.quote__body { flex: 1 1 420px; min-width: 0; padding-bottom: clamp(20px, 3vw, 40px); }
.quote__mark { display: block; font: 400 64px/0.5 var(--font-display); color: var(--red); }
.quote blockquote { margin-bottom: 18px; font: 400 clamp(26px, 3.4vw, 40px)/0.94 var(--font-display); color: var(--navy); text-wrap: pretty; }
.quote figcaption { font-family: var(--font-slab); font-weight: 700; font-size: 13px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.quote figcaption span { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(7, 69, 96, 0.78); }
.start__head { max-width: 820px; margin: 0 auto clamp(26px, 3vw, 38px); text-align: center; }
.start__head .tag { margin-bottom: clamp(14px, 1.8vw, 20px); }
.start__head h3 { margin-bottom: 14px; font: 400 clamp(32px, 3.8vw, 50px)/0.86 var(--font-display); color: var(--navy); }
.start__head p { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
/* Three equal cards side by side; one column on phones (never a 2 + 1 split). Every header is the
   same height (room for a two-line title) so the navy/teal seam lines up across all three. */
/* One full card for step 01 (as in the original design), then 02 and 03 as numbered lines beneath it. */
.steps { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 32px); align-items: center; }
.step--lead { width: min(100%, 820px); }
.step .step__head { min-height: 0; }
.steps__pair { width: min(100%, 820px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
@media (max-width: 640px) { .steps__pair { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; }
.step__head { background: var(--navy); padding: 12px clamp(16px, 2vw, 22px) 10px; display: flex; align-items: center; gap: 14px; min-height: calc(2.2 * clamp(18px, 2.1vw, 24px) + 22px); }
.step__n { flex: none; font: 400 clamp(30px, 3.2vw, 36px)/0.9 var(--font-display); color: rgba(255, 255, 255, 0.5); }
.step__head h3 { font-family: var(--font-body); font-weight: 800; font-size: clamp(18px, 2.1vw, 24px); line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--red); }
.step__body { background: var(--teal); padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 22px); flex: 1; display: flex; gap: clamp(14px, 1.8vw, 22px); align-items: flex-start; }
.step__body img { flex: none; width: clamp(44px, 5vw, 62px); height: auto; }
.step__body p { font-size: 15px; line-height: 1.58; text-wrap: pretty; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { padding-bottom: clamp(52px, 6vw, 79px); }
.faq__inner { max-width: 880px; padding-top: clamp(44px, 5vw, 70px); }
.faq__head { text-align: center; margin-bottom: clamp(28px, 3.2vw, 40px); }
.faq__head h2 { font: 400 clamp(38px, 5.4vw, 69px)/0.8 var(--font-display); color: var(--navy); }
.faq__head .title-bar { margin-bottom: 0; }
.faq__list { display: flex; flex-direction: column; gap: 14px; }
.faq__h { font-size: inherit; font-weight: inherit; }
.faq__btn {
  width: 100%; min-height: 60px; background: var(--red); border: none;
  text-align: left; display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 2vw, 21px);
  font-size: clamp(15px, 1.7vw, 18px); font-weight: 800; line-height: 1.35; color: var(--white);
  transition: background 120ms, box-shadow 120ms var(--ease);
}
.faq__btn:hover { background: var(--red-dark); }
.faq__sign { flex: none; font-family: var(--font-body); font-size: 26px; font-weight: 800; line-height: 1; color: var(--yellow); }
.faq__panel { background: var(--navy); padding: clamp(18px, 2.2vw, 25px) clamp(16px, 2vw, 21px); }
.faq__panel p { max-width: 66ch; font-size: 16px; line-height: 1.62; color: var(--white-90); }
.faq__panel p + p { margin-top: 14px; }

/* ---- Contact -------------------------------------------------------------- */
.contact { position: relative; background: var(--red); padding-bottom: clamp(46px, 5vw, 68px); }
.contact__inner { padding-top: clamp(40px, 4.6vw, 65px); }
.contact__head { text-align: center; margin-bottom: clamp(30px, 3.6vw, 47px); }
.contact__head h2 { font: 400 clamp(44px, 7vw, 88px)/0.8 var(--font-display); color: var(--cream); }
.contact__head .title-bar { margin-bottom: clamp(18px, 2.2vw, 26px); }
.contact__cols { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.2vw, 43px); align-items: flex-start; }
.contact__aside { flex: 1 1 300px; min-width: min(100%, 260px); max-width: 420px; }
.contact__fig { margin-bottom: clamp(22px, 2.6vw, 29px); }
.contact__fig img {
  width: 100%; height: clamp(260px, 30vw, 400px); object-fit: cover; object-position: 8% 30%;
  border: 9px solid var(--cream); box-shadow: 10px 10px 0 var(--navy);
}
.contact__fig figcaption { margin-top: 12px; font-family: var(--font-slab); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.contact__fig figcaption span { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; }
.textbox { background: var(--navy); padding: clamp(20px, 2.4vw, 27px); }
.textbox h3 { margin-bottom: 8px; font: 400 clamp(26px, 3vw, 33px)/0.9 var(--font-display); color: var(--yellow); }
.textbox p { margin-bottom: 20px; font-size: 15px; line-height: 1.55; color: var(--white-86); }
.textbox__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.textbox__sms { min-height: 56px; padding: 14px 26px 11px; font-size: 26px; box-shadow: 5px 5px 0 var(--teal); }
.textbox__sms:hover { box-shadow: 2px 2px 0 var(--teal); transform: translate(3px, 3px); }
.textbox__tel { font-family: var(--font-slab); font-weight: 700; font-size: 16px; color: var(--white); user-select: all; border-bottom: 3px solid var(--teal); padding-bottom: 2px; }
.textbox__tel:hover { color: var(--yellow); }
.contact__form { flex: 1.5 1 460px; min-width: min(100%, 280px); }
.form { padding-top: 6px; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 16px; }
/* Labels grow to fill the row so the Name and Organization inputs sit on the same line even when a label wraps. */
.form__grid .field > span:first-child { flex: 1 0 auto; display: flex; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 7px; }
.form__grid--contact { margin-bottom: 22px; }
.field--note { margin-bottom: 26px; }
.field > span, .form legend { font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.field input, .field textarea {
  border: 3px solid transparent; background: var(--white); padding: 10px 11px; font-size: 16px; font-weight: 700; color: var(--navy); outline: none; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--yellow); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--navy); }
.field textarea { resize: vertical; min-height: 118px; }
.field__err { font-size: 14px; font-weight: 700; color: var(--white); }
.form fieldset { border: none; margin: 0 0 22px; padding: 0; }
.form legend { padding: 0; margin-bottom: 12px; }
.radios { display: flex; flex-direction: column; gap: 10px; }
.radios label { display: flex; gap: 11px; align-items: baseline; font-size: 16px; font-weight: 700; color: var(--white); cursor: pointer; }
.radios input { margin: 0; accent-color: var(--navy); width: 16px; height: 16px; flex: none; position: relative; top: 2px; }
.form__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.form__submit {
  min-height: 60px; display: flex; align-items: center; gap: 14px; background: var(--yellow); border: none;
  box-shadow: 6px 6px 0 var(--navy); padding: 13px 26px 10px;
  font: 400 clamp(26px, 2.6vw, 29px)/0.86 var(--font-display); color: var(--red); text-align: left;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms;
}
.form__submit:hover { background: var(--white); box-shadow: 3px 3px 0 var(--navy); transform: translate(3px, 3px); }
.form__submit:disabled { opacity: 0.7; cursor: progress; transform: none; }
.form__submit span span { display: block; }
.form__submit .btn__ring { width: 26px; height: 26px; border-color: var(--red); font-size: 14px; }
.form__note { font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.form__turnstile { margin: 0 0 20px; min-height: 65px; }
.form__status { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--white); }
.form__status:empty { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sent { background: var(--navy); padding: clamp(26px, 3vw, 36px); }
.sent div { font: 400 clamp(30px, 3.4vw, 38px)/0.9 var(--font-display); color: var(--yellow); max-width: 20ch; }

/* ---- Footer --------------------------------------------------------------- */
.footer { position: relative; background: var(--navy); }
.footer__main {
  padding-top: clamp(24px, 2.8vw, 32px); padding-bottom: clamp(26px, 3vw, 34px);
  display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; justify-content: space-between;
}
.footer__logo { height: 24px; width: auto; }
.footer__tag { flex: 1 1 260px; font-family: var(--font-slab); font-weight: 700; font-size: clamp(14px, 1.6vw, 18px); color: var(--yellow); text-align: center; }
.footer__top {
  flex: none; display: flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--red);
  padding: 8px 14px 6px; font: 400 22px/0.82 var(--font-display);
}
.footer__top:hover { background: var(--white); color: var(--red); }
.footer__top span span { display: block; }
.footer__top .btn__ring { width: 20px; height: 20px; font-size: 12px; }
.footer__sub { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.footer__sub .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.footer__sub a { color: rgba(255, 255, 255, 0.8); }
.footer__sub a:hover { color: var(--yellow); }
.footer__sub a.is-site { color: var(--teal); }

/* ---- Sticky mobile SMS bar ------------------------------------------------ */
.smsbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: 10px 14px; background: var(--navy);
  border-top: 3px solid var(--red); gap: 12px; align-items: center; justify-content: space-between; display: none;
}
.smsbar.is-on { display: flex; }
.smsbar span { font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }
.smsbar a { flex: none; min-height: 48px; padding: 12px 18px 9px; font-size: 22px; box-shadow: 3px 3px 0 var(--teal); }

/* ---- Dialogs -------------------------------------------------------------- */
.dlg {
  position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 36px); display: none;
}
.dlg.is-open { display: flex; }
.dlg--viewer { z-index: 210; padding: clamp(10px, 2.4vw, 32px); }
.dlg__scrim { position: absolute; inset: 0; background: rgba(7, 69, 96, 0.68); border: none; padding: 0; cursor: default; }
.dlg--viewer .dlg__scrim { background: rgba(7, 69, 96, 0.78); }
.dlg--art .dlg__scrim { background: rgba(7, 69, 96, 0.82); }
.dlg__box {
  position: relative; width: min(900px, 100%); max-height: 100%; overflow-y: auto;
  background-color: var(--cream); background-image: var(--grid);
}
.dlg--viewer .dlg__box { width: min(1000px, 100%); }
.dlg__head {
  background: var(--red); padding: 14px clamp(18px, 2.4vw, 29px) 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dlg--viewer .dlg__head { position: sticky; top: 0; z-index: 3; padding: 12px clamp(14px, 2.2vw, 26px) 10px; }
.dlg__kicker { font-family: var(--font-slab); font-weight: 700; font-size: 13px; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.dlg__x {
  flex: none; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 2px solid rgba(255, 255, 255, 0.45); font-family: var(--font-body); font-size: 24px; font-weight: 800; line-height: 1; color: var(--white); padding: 2px 6px;
}
.dlg__x:hover { background: var(--yellow); border-color: var(--yellow); color: var(--red); }
.dlg__x:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.dlg__body { padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(28px, 3.6vw, 46px); }
.dlg--viewer .dlg__body { padding: clamp(18px, 2.6vw, 32px) clamp(18px, 2.6vw, 32px) clamp(26px, 3.6vw, 44px); }
.dlg__title { margin-bottom: 22px; max-width: 24ch; font: 400 clamp(30px, 3.6vw, 42px)/0.86 var(--font-display); color: var(--navy); }
.dlg__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 28px; margin-bottom: 26px; }
.dlg__cols--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dlg__cols h3 { margin-bottom: 8px; font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.dlg__cols p { font-size: 16px; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px, 2.2vw, 28px); padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px); margin-bottom: 14px; }
.stats--teal { background: var(--teal); }
.stats--navy { background: var(--navy); margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(18px, 2.2vw, 29px); padding: clamp(20px, 2.4vw, 29px); }
.stats__n { font: 400 clamp(34px, 4vw, 44px)/0.82 var(--font-display); color: var(--red); }
.stats__n--sm { font-size: clamp(24px, 2.4vw, 29px); line-height: 0.94; }
.stats__n--md { font-size: clamp(26px, 2.8vw, 32px); line-height: 0.9; }
.stats--navy .stats__n { color: var(--yellow); font-size: clamp(38px, 4.4vw, 48px); }
.stats--navy .stats__n--sm { font-size: clamp(24px, 2.4vw, 29px); }
.stats--navy .stats__n--md { font-size: clamp(26px, 2.8vw, 32px); }
.stats__l { margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--navy); }
.stats--navy .stats__l { color: var(--white); font-size: 15px; line-height: 1.4; }
.dlg__source { font-size: 14px; font-style: italic; line-height: 1.55; color: rgba(7, 69, 96, 0.78); }
.dlg__source--gap { margin-bottom: 24px; }
.panel-navy { background: var(--navy); padding: clamp(20px, 2.4vw, 29px); margin-bottom: 24px; }
.panel-navy h3 { margin-bottom: 10px; font: 400 clamp(26px, 2.8vw, 34px)/0.9 var(--font-display); color: var(--yellow); }
.panel-navy p { margin-bottom: clamp(20px, 2.4vw, 26px); max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--white-90); text-wrap: pretty; }
.panel-navy .stats { padding: 0; margin: 0; background: none; }
.panel-navy .stats__n { color: var(--yellow); font-size: clamp(38px, 4.4vw, 48px); }
.panel-navy .stats__l { color: var(--white); font-size: 15px; line-height: 1.4; }
.embeds { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 28px); align-items: flex-start; }
.embed { flex: 1 1 300px; min-width: min(100%, 272px); }
.embed__frame { background: var(--navy-deep); padding: 8px; box-shadow: 9px 9px 0 var(--teal); }
.embed__frame iframe { display: block; width: 100%; height: 640px; border: none; background: var(--navy-deep); }
.embed figcaption, .fig__cap { margin-top: 11px; font-family: var(--font-slab); font-weight: 700; font-size: 13px; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.embed figcaption a { color: var(--red); }
.dlg__after { margin-top: 14px; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--navy-82); text-wrap: pretty; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: clamp(16px, 2vw, 24px); margin-bottom: 24px; }
.figs--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 1.8vw, 21px); margin-bottom: clamp(16px, 2vw, 22px); }
.figs--tall { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(14px, 1.8vw, 21px); }
.fig__frame { background: var(--white); padding: 9px; box-shadow: 7px 7px 0 var(--teal); }
.fig__frame img { width: 100%; height: auto; }
.fig__frame img.is-43 { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.fig__frame img.is-43c { aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
.kansas-reel { margin-bottom: clamp(18px, 2.2vw, 26px); display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 28px); align-items: flex-start; }
.kansas-reel__media { flex: 0 1 340px; min-width: min(100%, 272px); }
.kansas-reel figcaption { flex: 1 1 300px; min-width: min(100%, 270px); }
.kansas-reel figcaption > span:first-child { display: block; font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.kansas-reel figcaption > span + span { display: block; margin-top: 9px; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.link-out { display: inline-block; margin-top: 14px; font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.link-out:hover { color: var(--navy); }
.note-teal { background: var(--teal); padding: 20px 24px; }
.note-teal p { font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--navy); }
.dlg__foot {
  position: sticky; bottom: 0; z-index: 3; background: var(--navy); padding: 10px clamp(14px, 2vw, 22px);
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  border-top: 3px solid var(--red);
}
.dlg__foot > span { font: 400 clamp(18px, 2vw, 22px)/0.9 var(--font-display); color: var(--yellow); }
.dlg__foot-ctas { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-left: auto; }
.dlg__foot .btn--outline { min-height: 40px; padding: 8px 14px; font-size: 12px; border-width: 2px; }
.dlg__foot .btn--red { min-height: 40px; padding: 10px 18px 7px; font-size: 21px; box-shadow: 3px 3px 0 var(--teal); }
.dlg__foot .btn--red:hover { box-shadow: 1px 1px 0 var(--teal); transform: translate(2px, 2px); }
@media (max-width: 519px) {
  .dlg__foot > span { flex: 1 1 100%; }
  .dlg__foot-ctas { margin-left: 0; width: 100%; justify-content: space-between; }
  .dlg__foot .btn--red { flex: 1 1 auto; }
}

/* Social viewer (modal 11) */
.sx__title { margin-bottom: 7px; max-width: 26ch; font: 400 clamp(28px, 3.4vw, 40px)/0.88 var(--font-display); color: var(--navy); }
.sx__client { font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.sx__channel { margin: 5px 0 clamp(18px, 2.2vw, 26px); font-family: var(--font-slab); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(7, 69, 96, 0.62); }
.sx__cols { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.8vw, 32px); align-items: flex-start; }
.sx__media { flex: 0 1 340px; min-width: min(100%, 280px); }
.sx__media iframe { display: block; width: 100%; height: 604px; border: none; background: var(--navy-deep); }
.sxposter { position: relative; display: block; width: 100%; background: var(--navy-deep); overflow: hidden; }
.sxposter img { display: block; width: 100%; height: auto; max-height: 604px; object-fit: contain; object-position: center; }
.sxposter__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--red); font: 400 22px/1 var(--font-display); letter-spacing: 0.02em; padding: 13px 20px 10px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); white-space: nowrap; transition: background 120ms; }
.sxposter:hover .sxposter__cta { background: var(--white); }
.sxposter__cta .play { position: static; width: 26px; height: 26px; box-shadow: none; background: var(--red); }
.sxposter__cta .play::after { border-left: 9px solid var(--yellow); border-top-width: 6px; border-bottom-width: 6px; margin-left: 3px; }
.sxposter:hover .sxposter__cta .play::after { border-left-color: var(--white); }
.sxposter__note { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px; background: rgba(7, 69, 96, 0.85); color: var(--white-90); font-size: 12px; line-height: 1.4; text-align: center; }
.sxposter:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sx__item { display: flex; flex-direction: column; gap: 5px; margin-top: 13px; }
.sx__wave { align-self: flex-start; background: var(--yellow); color: var(--red); font-family: var(--font-slab); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 11px 5px; }
.sx__creator { font-family: var(--font-slab); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; color: var(--navy); }
.sx__blurb { max-width: 44ch; font-size: 14px; line-height: 1.5; color: var(--navy-82); }
.sx__nav { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.sx__nav button {
  min-width: 52px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); border: none;
  box-shadow: 4px 4px 0 var(--teal); font-family: var(--font-body); font-size: 28px; font-weight: 800; line-height: 0.6; color: var(--yellow); padding: 0 0 5px;
}
.sx__nav button:hover { background: var(--red); color: var(--white); }
.sx__nav button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.sx__nav span { font-family: var(--font-slab); font-weight: 700; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy-70); }
.sx__copy { flex: 1 1 320px; min-width: min(100%, 270px); }
.sx__desc { max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.sx__role { margin-top: 16px; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--navy-82); text-wrap: pretty; }
.sx__role .eyebrow { display: block; margin-bottom: 5px; }
.sx__metrics { display: flex; flex-wrap: wrap; gap: 16px 26px; margin-top: 20px; }
.sx__metrics .stats__n { font-size: clamp(34px, 3.6vw, 44px); }
.sx__metrics .stats__l { margin-top: 5px; font-family: var(--font-slab); font-size: 12px; line-height: 1.3; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(7, 69, 96, 0.75); }
.sx__source { margin-top: 18px; font-size: 13px; font-style: italic; line-height: 1.55; color: var(--navy-70); }

/* Artwork viewer (modal 12) */
.art__body { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.8vw, 32px); align-items: flex-start; }
.art__media { flex: 1 1 330px; min-width: min(100%, 280px); }
.art__frame { background: var(--navy); padding: 10px; box-shadow: 9px 9px 0 var(--teal); }
.art__frame img { width: 100%; max-height: 62vh; height: auto; object-fit: contain; margin: 0 auto; }
.art__label { margin-top: 11px; font-family: var(--font-slab); font-weight: 700; font-size: 12px; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(7, 69, 96, 0.72); }
.art__thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.art__thumbs button { position: relative; width: 84px; height: 64px; flex: none; border: 3px solid rgba(7, 69, 96, 0.25); background: var(--navy); padding: 0; overflow: hidden; }
.art__thumbs button[aria-current="true"] { border-color: var(--red); }
.art__thumbs button:hover { border-color: var(--red); }
.art__thumbs button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.art__thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art__copy { flex: 1 1 300px; min-width: min(100%, 265px); }
.art__title { margin-bottom: 7px; max-width: 24ch; font: 400 clamp(28px, 3.4vw, 40px)/0.88 var(--font-display); color: var(--navy); }
.art__where { margin: 5px 0 16px; font-family: var(--font-slab); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(7, 69, 96, 0.62); }
.art__desc { max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.art__outcome { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.art__outcome span.row { display: flex; gap: 9px; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--navy); }

/* ---- Motion --------------------------------------------------------------- */
@keyframes sl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sl-mask { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__plate, .hero__tag, .hero__title, .hero__panel { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- Print ---------------------------------------------------------------- */
@media print {
  body { background: var(--white); }
  figure, article, li { break-inside: avoid; }
  .nav { position: static !important; }
  .dlg, .smsbar, .rail-ctl, .dots { display: none !important; }
  .rail { overflow: visible !important; flex-wrap: wrap !important; }
  .card { flex: 0 0 31% !important; }
}

/* ---- Utilities (replace inline styles so the CSP can stay strict) --------- */
picture:not([class]) { display: contents; }
.op-8 { object-position: center 8% !important; }
.op-16 { object-position: center 16% !important; }
.op-18 { object-position: center 18% !important; }
.op-22 { object-position: center 22% !important; }
.op-28 { object-position: center 28% !important; }
.op-30 { object-position: center 30% !important; }
.op-38 { object-position: center 38% !important; }
.op-40 { object-position: center 40% !important; }
.op-42 { object-position: center 42% !important; }
.op-45 { object-position: center 45% !important; }
.op-32-55 { object-position: 32% 55% !important; }
.mt-14 { margin-top: 14px; }

/* ---- Embed façade (case-study pages): poster + button, iframe on demand ---- */
.facade { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 640px; border: none; padding: 0; background: var(--navy-deep); overflow: hidden; }
.facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.facade__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--red); font: 400 22px/1 var(--font-display); letter-spacing: 0.02em; padding: 13px 20px 10px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); white-space: nowrap; }
.facade:hover .facade__cta { background: var(--white); }
.facade__note { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: rgba(7, 69, 96, 0.85); color: var(--white-90); font-size: 12px; line-height: 1.4; text-align: center; }

/* ---- Standalone pages (case studies, privacy, 404) ------------------------ */
.page { background: var(--cream); }
.page__hero { background: var(--red); padding: clamp(36px, 4.6vw, 64px) 0 clamp(28px, 3.4vw, 44px); }
.page__hero .eyebrow { color: var(--cream); display: block; margin-bottom: 12px; }
.page__hero h1 { max-width: 22ch; font: 400 clamp(36px, 5.4vw, 66px)/0.84 var(--font-display); color: var(--cream); text-wrap: balance; }
.page__hero .page__org { display: block; margin-top: 14px; font-family: var(--font-slab); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--white); }
.page__body { position: relative; padding-top: clamp(30px, 3.6vw, 48px); padding-bottom: clamp(44px, 5vw, 70px); max-width: 940px; }
.page__body > * + * { margin-top: clamp(20px, 2.6vw, 30px); }
.page__body h2 { font: 400 clamp(28px, 3.2vw, 38px)/0.88 var(--font-display); color: var(--navy); }
.page__body p { max-width: 70ch; font-size: 16px; line-height: 1.62; }
.page__body .dlg__cols { margin: 0; }
.page__body .stats, .page__body .panel-navy, .page__body .figs { margin-bottom: 0; }
.page__nav { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.page__back { font-family: var(--font-slab); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); border-bottom: 3px solid var(--red); padding-bottom: 2px; }
.page__back:hover { color: var(--red); }
.page__cta { background: var(--navy); padding: clamp(20px, 2.4vw, 28px); box-shadow: 8px 8px 0 var(--teal); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.page__cta span { font: 400 clamp(24px, 2.6vw, 30px)/0.9 var(--font-display); color: var(--yellow); }
.page__cta .btn { min-height: 56px; padding: 15px 26px 12px; font-size: 26px; box-shadow: 5px 5px 0 var(--teal); }
.page__cta .btn:hover { box-shadow: 2px 2px 0 var(--teal); transform: translate(2px, 2px); }
.legal h2 { margin-top: clamp(24px, 3vw, 36px); }
.legal ul { list-style: disc; padding-left: 22px; max-width: 70ch; font-size: 16px; line-height: 1.62; }
.legal li + li { margin-top: 6px; }