/* ==========================================================================
   SOUTH AFRICAN AIRCRAFT DETAILING (SAAD) — v2
   Light-dominant, hairline-weight typography, Gulfstream-style structure.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink & paper — v2 leads with white, not navy */
  --ink:        #0E1A24;   /* near-black navy — headlines */
  --navy:       #0A2540;   /* dark sections */
  --navy-deep:  #061827;   /* photo scrims, dark section fallbacks */
  --black:      #000000;   /* footer */
  --paper:      #FFFFFF;
  --paper-soft: #F6F7F8;   /* alternating light section */
  --muted:      #55616C;   /* body copy */
  --muted-soft: #8D969E;   /* labels, captions */

  --line:       #E3E6E8;
  --line-dark:  rgba(255,255,255,0.16);

  /* One family throughout, as Gulfstream does */
  --font: 'Urbanist', 'Gill Sans', 'Futura', 'Avenir Next', Helvetica, sans-serif;

  --gutter:    clamp(1.5rem, 4.6vw, 5rem);
  --section-y: clamp(5rem, 10vw, 9.5rem);
  --maxw:      1440px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --header-h:  84px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--muted);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* Hairline weight is the signature of this design — do not bolden these. */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 200;
  color: var(--ink);
  margin: 0;
  line-height: 1.06;
  letter-spacing: 0.005em;
}

::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 1080px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
/* Opens a page directly under the header — keeps the real content on the first
   screen instead of pushing it down behind a tall band of air. */
.section--lead { padding-top: clamp(2.25rem, 3vw, 3rem); }
.section--soft  { background: var(--paper-soft); }
.section--navy  { background: var(--navy); color: rgba(255,255,255,0.74); }
.section--navy h1, .section--navy h2,
.section--navy h3, .section--navy h4 { color: #fff; }

/* v1 compatibility aliases, so interior pages keep working */
.section--mist { background: var(--paper-soft); }
.section--ink  { background: var(--navy); color: rgba(255,255,255,0.74); }
.section--ink h1, .section--ink h2,
.section--ink h3, .section--ink h4 { color: #fff; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .9rem 1.4rem; z-index: 999; }
.skip-link:focus { left: 1rem; top: 1rem; }

.center { text-align: center; }
.obj-bottom { object-position: center bottom !important; }
.obj-top    { object-position: center top !important; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

/* Display headlines — uppercase, hairline, near-normal tracking.
   The wide letter-spacing used in v1 is deliberately gone: it is what made
   the type read as generic rather than considered. */
.display {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.008em;
  line-height: 1.05;
  color: var(--ink);
}
.display--hero { font-size: clamp(2.4rem, 6.6vw, 6.1rem); line-height: 1.0; }
.display--xl   { font-size: clamp(2rem, 4.4vw, 3.9rem); }
.display--lg   { font-size: clamp(1.7rem, 3.1vw, 2.8rem); }
.display--md   { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.display--sm   { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.section--navy .display, .section--ink .display { color: #fff; }

/* Small uppercase label */
.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 0 0 1.4rem;
}
.eyebrow--center { text-align: center; }
.section--navy .eyebrow, .section--ink .eyebrow { color: rgba(255,255,255,0.55); }

/* Centred sentence-case intro line, as Gulfstream uses above its fleet row */
.lead-line {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}
.lead-line--wide { max-width: 52ch; }
.section--navy .lead-line { color: #fff; }

.lede {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.68;
  color: var(--muted);
  max-width: 58ch;
}
.section--navy .lede, .section--ink .lede { color: rgba(255,255,255,0.74); }
.center .lede { margin-inline: auto; }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.3rem; }
.prose h3 { margin: 2.6rem 0 1rem; }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .02em;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .45s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn:hover { color: #fff; }
.btn:hover::after { transform: scaleX(1); transform-origin: left center; }

.btn--solid { background: var(--ink); color: #fff; }
.btn--solid::after { background: #fff; }
.btn--solid:hover { color: var(--ink); }

/* Light-on-dark button (v1 called this btn--ghost) */
.btn--light, .btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn--light::after, .btn--ghost::after { background: #fff; }
.btn--light:hover, .btn--ghost:hover { color: var(--ink); border-color: #fff; }

.btn--outline { background: transparent; color: var(--ink); }

.link-more {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 400; letter-spacing: .03em;
  color: var(--ink); padding-bottom: .4rem; position: relative;
}
.link-more::before { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--line); }
.link-more::after  { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right center; transition: transform .55s var(--ease); }
.link-more:hover::after { transform: scaleX(1); transform-origin: left center; }
.link-more .arw { transition: transform .45s var(--ease); }
.link-more:hover .arw { transform: translateX(5px); }
.section--navy .link-more, .section--ink .link-more { color:#fff; }
.section--navy .link-more::before, .section--ink .link-more::before { background: var(--line-dark); }
.section--navy .link-more::after, .section--ink .link-more::after { background:#fff; }

/* --------------------------------------------------------------------------
   6. Header — split navigation with centred wordmark
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .4s var(--ease-soft);
}
.header--stuck { box-shadow: 0 1px 16px rgba(14,26,36,0.07); }

/* --------------------------------------------------------------------------
   6a. Overlay header (homepage only)
   --------------------------------------------------------------------------
   The hero photograph runs the full height of the screen, so the header floats
   on top of it rather than sitting above it. It reverts to the normal white bar
   once you scroll past the hero, and whenever the mobile drawer is open.
   -------------------------------------------------------------------------- */
.header--overlay {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.header--overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,24,39,.42), transparent);
  pointer-events: none;
  transition: opacity .4s var(--ease-soft);
}
.header--overlay .brand,
.header--overlay .nav__link { color: #fff; }
.header--overlay .brand__sub { color: rgba(255,255,255,.72); }
.header--overlay .nav__link { opacity: .9; }
.header--overlay .nav__link::after { background: #fff; }
.header--overlay .nav__cta { color: #fff; border-color: rgba(255,255,255,.55); }
.header--overlay .nav__cta::after { background: #fff; }
.header--overlay .nav__cta:hover { color: var(--ink); border-color: #fff; }
.header--overlay .burger span { background: #fff; }
.header--overlay .header__inner,
.header--overlay .brand { position: relative; z-index: 1; }

/* Solid state — scrolled past the hero, or drawer open */
.header--overlay.header--stuck {
  background: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 16px rgba(14,26,36,0.07);
}
.header--overlay.header--stuck::before { opacity: 0; }
.header--overlay.header--stuck .brand,
.header--overlay.header--stuck .nav__link { color: var(--ink); }
.header--overlay.header--stuck .brand__sub { color: var(--muted-soft); }
.header--overlay.header--stuck .nav__link::after { background: var(--ink); }
.header--overlay.header--stuck .nav__cta { color: var(--ink); border-color: var(--ink); }
.header--overlay.header--stuck .nav__cta::after { background: var(--ink); }
.header--overlay.header--stuck .nav__cta:hover { color: #fff; }
.header--overlay.header--stuck .burger span { background: var(--ink); }

.header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  transition: height .4s var(--ease-soft);
}
.header--stuck .header__inner { height: 68px; }

.nav-side { display: flex; align-items: center; gap: clamp(1.1rem, 2.3vw, 2.4rem); }
.nav-side--right { justify-content: flex-end; }

.nav__link {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .4rem 0;
  position: relative;
  white-space: nowrap;
  opacity: .78;
  transition: opacity .3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Centred wordmark */
.brand {
  display: block;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
}
.brand__mark {
  display: block;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 300;
  letter-spacing: .42em;
  text-indent: .42em;   /* optical centring against the tracking */
  line-height: 1;
}
.brand__sub {
  display: block;
  margin-top: .46rem;
  font-size: clamp(.62rem, .78vw, .72rem);
  font-weight: 400;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--muted-soft);
  line-height: 1;
}
.header--stuck .brand__sub { opacity: 0; height: 0; margin-top: 0; overflow: hidden; }

.nav__cta {
  font-size: .8125rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: .72rem 1.5rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color .45s var(--ease);
}
.nav__cta::after {
  content:""; position:absolute; inset:0; background: var(--ink);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease);
}
.nav__cta span { position: relative; z-index: 1; }
.nav__cta:hover { color: #fff; }
.nav__cta:hover::after { transform: scaleX(1); transform-origin: left center; }

.burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 42px; height: 42px; background: none; border: 0; cursor: pointer;
  position: relative; z-index: 101;
}
.burger span { display: block; width: 25px; height: 1px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; background: var(--paper); z-index: 99;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  display: flex; flex-direction: column;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .65s var(--ease), visibility .65s;
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
.drawer__link {
  font-size: 1.5rem; font-weight: 200; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.drawer__foot { margin-top: auto; padding-top: 2.4rem; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; color: var(--muted); }
.drawer__foot a { color: var(--ink); }
body[data-lock] { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero — sits below the header, as Gulfstream's does
   -------------------------------------------------------------------------- */
/* Full-screen photograph, content centred in the middle of it. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: drift 30s var(--ease-soft) forwards;
}
@keyframes drift { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Pitched between the two extremes we tried: heavier than the near-clear pass,
   but well short of the near-opaque one that buried the mountain. The centred
   vignette carries the headline; the text-shadows on .hero__title / .hero__sub
   / .hero__eyebrow still do the fine legibility work, so the tint only has to
   settle the picture down rather than wash it out. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 84% 67% at 50% 48%,
      rgba(6,24,39,.56) 0%,
      rgba(6,24,39,.45) 42%,
      rgba(6,24,39,.23) 70%,
      rgba(6,24,39,.05) 88%,
      transparent 100%),
    linear-gradient(to bottom,
      rgba(6,24,39,.44) 0%,
      rgba(6,24,39,.12) 35%,
      rgba(6,24,39,.15) 63%,
      rgba(6,24,39,.48) 100%);
}
.hero__body {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* The generous bottom padding biases the centred block upward, so the copy
     sits over sky and mountain rather than across the sunlit fuselage. */
  padding: var(--header-h) var(--gutter) clamp(6rem, 20vh, 16rem);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}

/* Wide-tracked locator line above the headline */
.hero__eyebrow {
  font-size: clamp(.625rem, .78vw, .75rem);
  font-weight: 400;
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: clamp(1.4rem, 2.6vh, 2.2rem);
  text-shadow: 0 0 3px rgba(6,24,39,.85), 0 1px 10px rgba(6,24,39,.9), 0 1px 28px rgba(6,24,39,.7);
}
.hero__title {
  color: #fff; max-width: 20ch;
  text-shadow: 0 1px 14px rgba(6,24,39,.55), 0 2px 44px rgba(6,24,39,.45);
}
.hero__sub {
  color: #fff;
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  font-weight: 300;
  max-width: 48ch;
  margin-top: 1.5rem;
  /* A tight zero-offset halo hugs the letterforms and survives a busy, bright
     background far better than a single wide blur. */
  text-shadow:
    0 0 3px rgba(6,24,39,.88),
    0 1px 9px rgba(6,24,39,.9),
    0 2px 32px rgba(6,24,39,.65);
}
/* Scroll cue, pinned to the base of the hero */
.hero__cue {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: clamp(1.75rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  font-size: .625rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 14px rgba(6,24,39,.6);
  pointer-events: none;
}
.hero__cue svg { animation: cueNudge 2.6s var(--ease-soft) infinite; }
@keyframes cueNudge {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* Line-by-line hero reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(104%); animation: lineUp 1.15s var(--ease) forwards; }
.reveal-line:nth-child(1) > span { animation-delay: .25s; }
.reveal-line:nth-child(2) > span { animation-delay: .37s; }
@keyframes lineUp { to { transform: translateY(0); } }

.fade-up { opacity: 0; animation: fadeUp 1.1s var(--ease) forwards; }
.fade-up--a { animation-delay: .7s; }
.fade-up--b { animation-delay: .88s; }
@keyframes fadeUp { from { opacity:0; transform: translateY(22px);} to { opacity:1; transform:none; } }

/* Interior page banner */
.banner {
  position: relative;
  height: clamp(340px, 48vh, 520px);
  overflow: hidden;
  background: var(--navy-deep);
  display: flex; align-items: center;
}
.banner__media { position: absolute; inset: 0; }
.banner__media img { width:100%; height:100%; object-fit: cover; animation: drift 30s var(--ease-soft) forwards; }
/* Several banner photographs are high-key (white fuselage in full sun), so this
   carries real weight — centred text has to stay legible over all of them. */
.banner__scrim {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(6,24,39,.70), rgba(6,24,39,.64)),
    radial-gradient(ellipse 70% 60% at center, rgba(6,24,39,.45) 0%, transparent 75%);
}
.banner__body {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  text-align: center;
}
.banner__title { color:#fff; margin-inline:auto; text-shadow: 0 2px 30px rgba(6,24,39,.5); }
.banner__sub {
  color: #fff; max-width: 54ch; margin: 1.3rem auto 0;
  font-size: clamp(1rem,1.2vw,1.125rem);
  text-shadow: 0 1px 18px rgba(6,24,39,.7);
}

.crumb {
  display:flex; justify-content:center; gap:.5rem;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 1.2rem;
}
.crumb a:hover { color:#fff; }

/* --------------------------------------------------------------------------
   8. Scroll reveal (JS-gated so content never hides without JS)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .09s; }
.js [data-reveal][data-delay="2"] { transition-delay: .18s; }
.js [data-reveal][data-delay="3"] { transition-delay: .27s; }
.js [data-reveal][data-delay="4"] { transition-delay: .36s; }
.js [data-reveal][data-delay="5"] { transition-delay: .45s; }

[data-reveal-img] { overflow: hidden; position: relative; }
.js [data-reveal-img] img { transform: scale(1.14); transition: transform 1.5s var(--ease); }
.js [data-reveal-img].is-in img { transform: scale(1); }
.js [data-reveal-img]::after {
  content:""; position:absolute; inset:0; background: var(--paper-soft);
  transform-origin: bottom center; transition: transform 1.15s var(--ease); z-index:1;
}
.js [data-reveal-img].is-in::after { transform: scaleY(0); }

/* --------------------------------------------------------------------------
   9. Collage — the staggered, overlapping parallax image group
   --------------------------------------------------------------------------
   Three images at different depths. Each drifts at its own rate on scroll,
   which is what produces the layered, unfolding effect.
   -------------------------------------------------------------------------- */
.collage-row {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 950px) {
  .collage-row { grid-template-columns: 1.15fr .85fr; }
  /* When flipped the collage moves to column 2, so the wider share moves with it */
  .collage-row--flip { grid-template-columns: .85fr 1.15fr; }
  .collage-row--flip .collage { order: 2; }
}

.collage {
  position: relative;
  /* Reserve the height the absolutely-positioned layers need */
  padding-bottom: 94%;
  /* clip (not hidden) stops a layer escaping sideways and adding a horizontal
     scrollbar, while still allowing the vertical parallax to show. */
  overflow-x: clip;
}
.collage__item { position: absolute; overflow: hidden; background: var(--paper-soft); }
.collage__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Back layer — tall portrait, anchored top-left */
.collage__item--a { left: 0;   top: 0;   width: 48%; padding-bottom: 68%; z-index: 1; }
/* Front layer — wide, overlapping, running out to the right edge */
.collage__item--b { left: 30%; top: 27%; width: 70%; padding-bottom: 47%; z-index: 3; }
/* Lower accent — tucked under the tall layer, bottom-left */
.collage__item--c { left: 2%;  top: 61%; width: 42%; padding-bottom: 32%; z-index: 2; }

.collage__body { max-width: 46ch; }
.collage__body .display { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   10. Carousel — wide landscape cards
   -------------------------------------------------------------------------- */
.carousel__head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom: clamp(2rem,4vw,3.25rem);
}
.carousel__nav { display:flex; gap:.6rem; }
.cbtn {
  width:48px; height:48px; border:1px solid var(--line); background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.cbtn:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); }
.cbtn:disabled{ opacity:.25; cursor:not-allowed; }
.section--navy .cbtn, .section--ink .cbtn { border-color: var(--line-dark); color:#fff; }
.section--navy .cbtn:hover:not(:disabled), .section--ink .cbtn:hover:not(:disabled){ background:#fff; color:var(--ink); }

.carousel__track {
  display:flex; gap: clamp(1rem,1.8vw,1.6rem);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-bottom:.4rem;
}
.carousel__track::-webkit-scrollbar{ display:none; }

.ccard { flex: 0 0 clamp(290px, 38vw, 560px); scroll-snap-align: start; display:block; }
.ccard__media { position:relative; aspect-ratio: 4 / 3; overflow:hidden; background: var(--paper-soft); }
.ccard__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.ccard:hover .ccard__media img { transform: scale(1.05); }
.ccard__title {
  margin-top: 1.5rem; font-size: clamp(1.15rem,1.7vw,1.45rem); font-weight:200;
  text-transform:uppercase; letter-spacing:.02em; color: var(--ink);
}
.section--navy .ccard__title, .section--ink .ccard__title { color:#fff; }
.ccard__text { margin-top:.75rem; font-size:.9375rem; line-height:1.62; max-width: 46ch; }
.ccard__more {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-size:.8125rem; letter-spacing:.03em; color: var(--ink);
}
.section--navy .ccard__more, .section--ink .ccard__more { color:#fff; }
.ccard__more::after { content:""; width:22px; height:1px; background: currentColor; transition: width .45s var(--ease); }
.ccard:hover .ccard__more::after { width:40px; }

/* --------------------------------------------------------------------------
   11. Ruled feature row (vertical dividers, as Gulfstream)
   -------------------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem);
}
.features--ruled { gap: 0; }
.features--ruled .feature { padding: 0 clamp(1rem, 2.2vw, 2.4rem); text-align: center; }
.features--ruled .feature + .feature { border-left: 1px solid var(--line); }
.section--navy .features--ruled .feature + .feature,
.section--ink  .features--ruled .feature + .feature { border-left-color: var(--line-dark); }

.feature__icon {
  width: 92px; height: 92px; margin: 0 auto 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #EDEAE4;          /* warm stone disc, as Gulfstream uses */
  color: var(--ink);
}
.section--navy .feature__icon, .section--ink .feature__icon { background: rgba(255,255,255,.08); color:#fff; }
.feature__icon svg { width: 46px; height: 46px; }

.feature__title {
  font-size: 1.0625rem; font-weight: 300; color: var(--ink);
  margin-bottom: .75rem; line-height: 1.35;
}
.section--navy .feature__title, .section--ink .feature__title { color:#fff; }
.feature__text { font-size: .9375rem; line-height: 1.62; }

/* --------------------------------------------------------------------------
   12. Values — landscape image, centred small title, centred body
   -------------------------------------------------------------------------- */
.values { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(1.75rem,3vw,3rem); }
.value { text-align: center; }
.value__media { aspect-ratio: 16 / 10; overflow:hidden; background: var(--paper-soft); margin-bottom:1.6rem; }
.value__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.3s var(--ease); }
.value:hover .value__media img { transform: scale(1.05); }
.value__title { font-size:1.125rem; font-weight:400; color:var(--ink); margin-bottom:.8rem; }
.section--navy .value__title, .section--ink .value__title { color:#fff; }
.value__text { font-size:.9375rem; line-height:1.65; max-width:40ch; margin-inline:auto; }

/* --------------------------------------------------------------------------
   13. Split (image + copy) — used by interior pages
   -------------------------------------------------------------------------- */
.split { display:grid; gap: clamp(2.5rem,5vw,4.5rem); align-items:center; }
@media (min-width: 920px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}
.split__media { aspect-ratio: 4/3; overflow:hidden; background: var(--paper-soft); }
.split__media img { width:100%; height:100%; object-fit:cover; }
.split__body { max-width: 52ch; }

.ticks { list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.9rem; }
.ticks li { display:flex; align-items:flex-start; gap:.85rem; font-size:.9375rem; line-height:1.62; }
.ticks svg { flex:none; margin-top:6px; color: var(--ink); opacity:.5; }

/* --------------------------------------------------------------------------
   14. Statement / stats
   -------------------------------------------------------------------------- */
.statement { display:grid; gap: clamp(2.5rem,5vw,4.5rem); }
@media (min-width: 900px) { .statement { grid-template-columns: .95fr 1.05fr; align-items:start; } }
.statement__title { max-width: 16ch; }

.stats {
  display:grid; grid-template-columns: repeat(auto-fit,minmax(165px,1fr));
  gap: clamp(1.75rem,3.2vw,3rem);
  margin-top: clamp(3rem,5vw,4.5rem); padding-top: clamp(2.25rem,3.5vw,3.25rem);
  border-top:1px solid var(--line);
}
.section--navy .stats, .section--ink .stats { border-top-color: var(--line-dark); }
.stat__num { font-size: clamp(2.2rem,3.4vw,3rem); font-weight:200; color:var(--ink); line-height:1; }
.section--navy .stat__num, .section--ink .stat__num { color:#fff; }
.stat__label { margin-top:.85rem; font-size:.8125rem; color:var(--muted-soft); line-height:1.6; }

/* --------------------------------------------------------------------------
   15. Full-bleed photo band
   -------------------------------------------------------------------------- */
.bleed {
  position:relative; min-height: clamp(460px,66vh,720px);
  display:grid; place-items:center; overflow:hidden; text-align:center;
  background: var(--navy-deep);
}
.bleed__media { position:absolute; inset:-10% 0; }
.bleed__media img { width:100%; height:100%; object-fit:cover; will-change:transform; }
/* Bleed copy is centred, so — like the hero — it needs a centred vignette to
   stay legible over bright photographs rather than a flat wash. */
.bleed__scrim {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 76% 62% at 50% 50%,
      rgba(6,24,39,.74) 0%, rgba(6,24,39,.52) 50%, rgba(6,24,39,.16) 80%, transparent 100%),
    linear-gradient(to bottom, rgba(6,24,39,.50), rgba(6,24,39,.44));
}
.bleed__body { position:relative; z-index:2; padding: clamp(3.5rem,8vw,6rem) var(--gutter); max-width: 920px; }
/* Eyebrows default to grey for light sections; over a photograph they need to
   read as white, with the same halo the rest of the bleed copy carries. */
.bleed .eyebrow { color: rgba(255,255,255,.72); text-shadow: 0 1px 12px rgba(6,24,39,.6); }
.bleed__title { color:#fff; margin-bottom:1.5rem; }
.bleed__text { color: rgba(255,255,255,.85); font-size: clamp(1rem,1.2vw,1.1875rem); line-height:1.65; max-width:58ch; margin:0 auto 2.4rem; }

/* --------------------------------------------------------------------------
   16. Numbered reasons
   -------------------------------------------------------------------------- */
.reasons { display:grid; border-top:1px solid var(--line); }
.section--navy .reasons, .section--ink .reasons { border-top-color: var(--line-dark); }
.reason { display:grid; gap:1rem clamp(2rem,4.5vw,4rem); padding-block: clamp(2.25rem,3.6vw,3.2rem); border-bottom:1px solid var(--line); align-items:start; }
.section--navy .reason, .section--ink .reason { border-bottom-color: var(--line-dark); }
@media (min-width: 860px) { .reason { grid-template-columns: 90px .9fr 1.1fr; } }
.reason__num { font-size:.875rem; color:var(--muted-soft); padding-top:.3rem; }
.reason__title { font-size: clamp(1.2rem,1.8vw,1.5rem); font-weight:200; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); line-height:1.25; }
.section--navy .reason__title, .section--ink .reason__title { color:#fff; }
.reason__text { font-size:.9375rem; line-height:1.68; }
.reason__note { display:block; margin-top:1rem; font-size:.8125rem; color:var(--muted-soft); }

/* Grid variant — four reasons visible at once instead of a long scrolling list */
.reasons--grid { border-top: 0; gap: 0; }
@media (min-width: 820px) { .reasons--grid { grid-template-columns: 1fr 1fr; } }
.reasons--grid .reason {
  grid-template-columns: 1fr;
  gap: .75rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-top-width: 1px;
}
/* Collapse the shared borders so the grid reads as one ruled block */
@media (min-width: 820px) {
  .reasons--grid .reason:nth-child(2n) { border-left: 0; }
  .reasons--grid .reason:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 819px) {
  .reasons--grid .reason + .reason { border-top: 0; }
}
.reasons--grid .reason__num { padding-top: 0; }
.reasons--grid .reason__title { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

/* --------------------------------------------------------------------------
   16b. Reveal pairs — four illustrated cards, 2 x 2, detail opens on hover
   --------------------------------------------------------------------------
   All four headings stay on screen at once; the body copy and the photograph
   open together when a card is hovered, focused or tapped.

   The head is a <button> so it works from the keyboard and on a touch screen
   without any pointer sniffing: CSS opens it on :hover and :focus-within, and
   main.js adds .is-open on tap. The detail animates on grid-template-rows
   (0fr → 1fr) and the photograph on an explicit height — both give a real
   height transition without measuring anything in JS.

   align-items:start keeps each card its own height, so an open card grows its
   own row rather than stretching the one beside it.
   -------------------------------------------------------------------------- */
.reasons--reveal {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 3rem);
  border-top: 0;
}
@media (min-width: 760px) { .reasons--reveal { grid-template-columns: repeat(2, 1fr); } }

.reason--reveal {
  display: block;
  padding-block: 0;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.section--navy .reason--reveal, .section--ink .reason--reveal { border-bottom-color: var(--line-dark); }

/* Hairline that fills in under the open card, so the active one is obvious */
.reason--reveal::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--ink);
  transition: width .6s var(--ease);
}
.reason--reveal:hover::after,
.reason--reveal:focus-within::after,
.reason--reveal.is-open::after { width: 100%; }
.section--navy .reason--reveal::after, .section--ink .reason--reveal::after { background: #fff; }

/* Photograph — a letterbox strip when closed that opens up with the copy.
   Height rather than aspect-ratio: two clamp() values both resolve to px at a
   given viewport, so the transition is reliable everywhere. */
.reason__media {
  height: clamp(118px, 13vw, 165px);
  overflow: hidden;
  background: var(--paper-soft);
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  transition: height .65s var(--ease);
}
.reason__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  filter: grayscale(.32) brightness(.97);
  transition: transform 1.2s var(--ease), filter .65s var(--ease);
}
.reason--reveal:hover .reason__media,
.reason--reveal:focus-within .reason__media,
.reason--reveal.is-open .reason__media { height: clamp(200px, 23vw, 300px); }
.reason--reveal:hover .reason__media img,
.reason--reveal:focus-within .reason__media img,
.reason--reveal.is-open .reason__media img { transform: none; filter: none; }

.reason__head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .55rem 1rem;
  padding: 0 0 clamp(1rem, 1.8vw, 1.3rem);
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.reason__head:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Number rides above the heading; the cue sits top-right beside it */
.reason--reveal .reason__num  { grid-column: 1; grid-row: 1; padding-top: 0; }
.reason--reveal .reason__cue  { grid-column: 2; grid-row: 1; align-self: center; }
.reason--reveal .reason__title {
  grid-column: 1 / -1; grid-row: 2;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.28;
  transition: opacity .45s var(--ease);
}

/* Plus sign that becomes a minus when the row is open */
.reason__cue { position: relative; width: 14px; height: 14px; flex: none; opacity: .55; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.reason__cue::before,
.reason__cue::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: currentColor;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
}
.reason__cue::after { transform: rotate(90deg); }
.reason--reveal:hover .reason__cue,
.reason--reveal:focus-within .reason__cue,
.reason--reveal.is-open .reason__cue { opacity: 1; transform: rotate(180deg); }
.reason--reveal:hover .reason__cue::after,
.reason--reveal:focus-within .reason__cue::after,
.reason--reveal.is-open .reason__cue::after { opacity: 0; transform: rotate(90deg) scaleX(0); }

.reason__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease);
}
.reason__detail > div { overflow: hidden; }
.reason--reveal:hover .reason__detail,
.reason--reveal:focus-within .reason__detail,
.reason--reveal.is-open .reason__detail { grid-template-rows: 1fr; }

/* The card is already a column, so the body lines up with the heading on its
   own — no number-column indent to compensate for any more. */
.reason__detail-inner {
  padding-bottom: clamp(1.3rem, 2.2vw, 1.8rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease) .06s, transform .5s var(--ease) .06s;
}
.reason--reveal:hover .reason__detail-inner,
.reason--reveal:focus-within .reason__detail-inner,
.reason--reveal.is-open .reason__detail-inner { opacity: 1; transform: none; }

.reasons__hint {
  margin-top: 1.4rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  text-align: right;
}
/* A touch screen taps rather than hovers, so say so. Done in CSS rather than
   JS so the right word is there on first paint, with no swap afterwards. */
.reasons__hint-tap { display: none; }
@media (hover: none) {
  .reasons__hint { text-align: center; }
  .reasons__hint-hover { display: none; }
  .reasons__hint-tap { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .reason__head,
  .reason__detail,
  .reason__detail-inner,
  .reason__media,
  .reason__media img,
  .reason__cue,
  .reason__cue::before,
  .reason__cue::after,
  .reason--reveal::after { transition: none; }
}

/* --------------------------------------------------------------------------
   16a. Service stage — panels fill the first screen
   -------------------------------------------------------------------------- */
.svc-stage {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 4vh, 3.5rem);
}
.svc-stage__head { flex: none; }
.svc-stage .panels { flex: 1 1 auto; max-height: 620px; }
@media (max-width: 860px) {
  .svc-stage { min-height: 0; }
  .svc-stage .panels { flex: none; max-height: none; }
}

/* --------------------------------------------------------------------------
   17. Testimonials
   -------------------------------------------------------------------------- */
.quote-lead { max-width: 54rem; margin-inline:auto; text-align:center; }
.quote-lead__mark { font-size:3rem; line-height:1; color:var(--muted-soft); opacity:.45; margin-bottom:1rem; }
.quote-lead__text { font-size: clamp(1.3rem,2.3vw,2rem); font-weight:200; line-height:1.42; color:var(--ink); margin:0; }
.section--navy .quote-lead__text, .section--ink .quote-lead__text { color:#fff; }
.quote-lead__by { margin-top:2.2rem; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-soft); line-height:1.9; }
.quote-lead__by strong { display:block; color:var(--ink); font-weight:500; }
.section--navy .quote-lead__by strong, .section--ink .quote-lead__by strong { color:#fff; }

.tgrid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(1.5rem,2.4vw,2.2rem); }
/* One genuine review rather than a wall of them — auto-fit would stretch a lone
   card the full width of the shell, so pin it to a readable column and centre it. */
.tgrid--single { grid-template-columns: minmax(0,34rem); justify-content:center; }
.tcard { border:1px solid var(--line); padding: clamp(1.9rem,2.8vw,2.6rem); display:flex; flex-direction:column; background: var(--paper); }
.section--navy .tcard, .section--ink .tcard { border-color: var(--line-dark); background: rgba(255,255,255,.04); }
.tcard__stars { display:flex; gap:3px; color:var(--muted-soft); margin-bottom:1.3rem; }
.tcard__text { font-size:.9375rem; line-height:1.72; margin-bottom:1.8rem; flex:1; }
.tcard__by { border-top:1px solid var(--line); padding-top:1.3rem; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-soft); line-height:1.9; }
.section--navy .tcard__by, .section--ink .tcard__by { border-top-color: var(--line-dark); }
.tcard__by strong { display:block; color:var(--ink); font-weight:500; }
/* The operator's own site, so the review can be checked rather than taken on trust. */
.tcard__by a { border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .3s var(--ease); }
.tcard__by a:hover { border-bottom-color: var(--ink); }
.section--navy .tcard__by strong, .section--ink .tcard__by strong { color:#fff; }

/* --------------------------------------------------------------------------
   18. Credentials bar — quiet and typographic
   --------------------------------------------------------------------------
   Replaces v1's icon strip under the hero, which read as decoration rather
   than information. Sits lower in the page as a plain statement of fact.
   -------------------------------------------------------------------------- */
.credbar { border-block: 1px solid var(--line); }
.credbar__inner {
  max-width: var(--maxw); margin-inline:auto; padding: clamp(1.8rem,2.8vw,2.6rem) var(--gutter);
  display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: clamp(1.5rem,2.4vw,2.5rem); text-align:center;
}
.credbar__item { font-size:.75rem; letter-spacing:.11em; text-transform:uppercase; color: var(--muted-soft); line-height:1.75; }
.credbar__item strong { display:block; font-size:.8125rem; font-weight:500; letter-spacing:.1em; color: var(--ink); margin-bottom:.3rem; }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.form { display:grid; gap: clamp(1.4rem,2.2vw,1.8rem); }
.form__row { display:grid; gap:inherit; }
@media (min-width:720px){ .form__row--2{ grid-template-columns:1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:.6rem; }
.field__label { font-size:.75rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); }
.field__label .opt { color:var(--muted-soft); font-weight:400; letter-spacing:.04em; text-transform:none; }
.field__req { color: var(--muted-soft); }

.input,.select,.textarea {
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.8rem 0; font-size:1rem; font-weight:300; color:var(--ink); border-radius:0;
  transition:border-color .35s var(--ease); appearance:none;
}
.input::placeholder,.textarea::placeholder{ color:var(--muted-soft); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.textarea{ resize:vertical; min-height:118px; line-height:1.62; }
.select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355616C' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; padding-right:2rem; cursor:pointer;
}

.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; }
.check{ display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); padding:.95rem 1.15rem; cursor:pointer; font-size:.9375rem; transition:border-color .3s var(--ease), background .3s var(--ease); }
.check:hover{ border-color:var(--ink); }
.check input{ accent-color:var(--ink); width:15px; height:15px; flex:none; cursor:pointer; }
.check:has(input:checked){ border-color:var(--ink); background:var(--paper-soft); }

/* Grouped picker — the quote form splits the services into Exterior, Paint,
   Interior and Programmes so a long single list does not have to be read
   top to bottom to find one item. */
.checkgroup + .checkgroup{ margin-top:clamp(1.6rem,2.6vw,2.1rem); }
.checkgroup__title{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-soft);
  margin-bottom:.9rem; padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
}
.checkgroup__hint{ letter-spacing:.04em; text-transform:none; font-size:.75rem; }

.form__consent{ display:flex; gap:.85rem; align-items:flex-start; font-size:.875rem; line-height:1.62; }
.form__consent input{ accent-color:var(--ink); margin-top:4px; width:15px; height:15px; flex:none; }
.form__consent a{ text-decoration:underline; text-underline-offset:3px; }
.form__note{ font-size:.8125rem; color:var(--muted-soft); line-height:1.62; }
.form__status{ padding:1rem 1.3rem; border-left:2px solid var(--ink); background:var(--paper-soft); font-size:.9375rem; line-height:1.62; display:none; }
.form__status[data-state="ok"]{ display:block; border-left-color:#2E7D5B; }
.form__status[data-state="err"]{ display:block; border-left-color:#B3261E; }
.form__status[data-state="busy"]{ display:block; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* --------------------------------------------------------------------------
   19a. Contact stage — full-bleed photograph, one side graded for the copy
   --------------------------------------------------------------------------
   The photograph fills the screen. A gradient veil darkens only the side the
   writing sits on and fades to nothing across the middle, so the far half of
   the picture reads as a normal photograph.
   -------------------------------------------------------------------------- */
.contact-stage {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
}
.contact-stage__media { position: absolute; inset: 0; z-index: 0; }
.contact-stage__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 68% center;   /* keeps the aircraft on the uncovered side */
  animation: drift 34s var(--ease-soft) forwards;
}

.contact-stage__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(8,22,34,.93) 0%,
      rgba(8,22,34,.90) 30%,
      rgba(8,22,34,.74) 46%,
      rgba(8,22,34,.34) 60%,
      rgba(8,22,34,.06) 74%,
      transparent 86%);
}

.contact-stage__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3rem, 7vh, 5.5rem) var(--gutter);
}
/* Capped at 46% so the copy never strays onto the clear half of the
   photograph. The headline is two short words, so it can run large. */
.contact-stage__panel { max-width: min(56ch, 46%); }
.contact-stage h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }

/* Reverse the type out of the photograph */
.contact-stage h1,
.contact-stage .cdetail__value { color: #fff; }
.contact-stage .eyebrow { color: rgba(255,255,255,.62); }
.contact-stage .lede { color: rgba(255,255,255,.84); }
.contact-stage .cdetail__label { color: rgba(255,255,255,.58); }
/* Capped so the longer supporting lines stay on the graded side */
.contact-stage .cdetail__meta { color: rgba(255,255,255,.7); max-width: 38ch; }
.contact-stage .cdetail__value a:hover { opacity: .72; }
.contact-stage .cdetail__meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact-stage .contact-list { gap: clamp(1.35rem, 2.4vh, 2rem); }

/* Short laptops — tighten so every detail stays above the fold. The panel
   carries both partners' numbers, so this has to start higher up than the
   840px it needed with one: at 980px the untightened layout has only a few
   pixels to spare. */
@media (min-width: 901px) and (max-height: 980px) {
  .contact-stage__inner { padding-block: clamp(1.75rem, 3.5vh, 2.75rem); }
  .contact-stage h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
  .contact-stage .lede { font-size: 1rem; margin-top: 1.1rem !important; }
  .contact-stage .contact-list { gap: 1.05rem; margin-top: 1.9rem !important; }
  .contact-stage .cdetail__label { margin-bottom: .35rem; }
  .contact-stage .cdetail__value { font-size: 1.15rem; }
  .contact-stage .cdetail__value--next { margin-top: .55rem; }
  .contact-stage .cdetail__meta { margin-top: .3rem; font-size: .8125rem; }
}

/* Very short viewports — drop the supporting line and tighten further.
   Starts at 820px: below that the extra number no longer fits alongside it. */
@media (min-width: 901px) and (max-height: 820px) {
  .contact-stage .lede { display: none; }
  .contact-stage .contact-list { margin-top: 1.4rem !important; gap: .85rem; }
  .contact-stage h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
  .contact-stage .cdetail__value--next { margin-top: .4rem; }
}

/* A 1366x768 laptop leaves roughly 660px once browser chrome is accounted
   for — common enough to be worth holding the layout together. */
@media (min-width: 901px) and (max-height: 700px) {
  .contact-stage .contact-list { gap: .62rem; margin-top: .95rem !important; }
  .contact-stage h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
  .contact-stage .cdetail__value { font-size: 1.08rem; }
  .contact-stage .cdetail__meta { font-size: .78125rem; }
}

/* Stacked layout.
   On a narrow portrait screen the photo is scaled to fit the stage height, so
   object-position has no vertical effect — the whole frame is already visible
   and the top of it is sky. Instead the photo becomes a band across the top
   that fades into the copy, with the gradient applied to the media itself so
   it lines up exactly with where the picture ends. */
@media (max-width: 900px) {
  .contact-stage { min-height: 0; align-items: flex-start; }

  .contact-stage__media { inset: 0 0 auto 0; height: 56vh; }
  .contact-stage__media img { object-position: center 42%; }
  .contact-stage__media::after {
    content: ""; position: absolute; inset: 0;
    /* Reaches solid navy at 88%, so the last stripe of the band is already the
       same colour as the section behind it and the join is invisible. */
    background: linear-gradient(to bottom,
      rgba(6,24,39,.20) 0%,
      rgba(6,24,39,.32) 40%,
      rgba(6,24,39,.78) 72%,
      var(--navy-deep) 88%,
      var(--navy-deep) 100%);
  }

  .contact-stage__veil { display: none; }
  .contact-stage .cdetail__meta { max-width: none; }
  .contact-stage__inner { padding-top: clamp(16rem, 42vh, 23rem); }
  .contact-stage__panel { max-width: none; }
}

/* --------------------------------------------------------------------------
   20. Contact details
   -------------------------------------------------------------------------- */
.contact-list{ display:grid; gap:2.2rem; }
.cdetail__label{ font-size:.6875rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-soft); margin-bottom:.6rem; }
.cdetail__value{ font-size: clamp(1.15rem,1.7vw,1.4rem); font-weight:200; color:var(--ink); line-height:1.45; }
.section--navy .cdetail__value, .section--ink .cdetail__value{ color:#fff; }
.cdetail__value a:hover{ opacity:.65; }
.cdetail__meta{ font-size:.875rem; margin-top:.45rem; }
/* Second partner's number inside the same block */
.cdetail__value--next{ margin-top:1rem; }

/* --------------------------------------------------------------------------
   21. CTA band
   -------------------------------------------------------------------------- */
.cta-band{ background:var(--navy); color:#fff; text-align:center; padding-block: clamp(4rem,8vw,7rem); }
.cta-band h2{ color:#fff; margin-bottom:1.3rem; }
.cta-band p{ color:rgba(255,255,255,.76); max-width:52ch; margin:0 auto 2.5rem; font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.65; }
.cta-band .eyebrow{ color:rgba(255,255,255,.55); }
.cta-band__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.footer{ background:var(--black); color:rgba(255,255,255,.6); padding-block: clamp(3.5rem,6vw,5rem) 2rem; font-size:.9375rem; }
.footer__grid{ display:grid; gap: clamp(2.5rem,4.5vw,3.5rem); padding-bottom: clamp(2.75rem,4.5vw,3.5rem); border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:880px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; } }
.footer .brand{ text-align:left; color:#fff; margin-bottom:1.4rem; }
.footer .brand__mark{ font-size:1.2rem; text-indent:.42em; }
.footer__blurb{ line-height:1.72; max-width:34ch; }
.footer__badge{ display:inline-block; margin-top:1.5rem; border:1px solid rgba(255,255,255,.22); padding:.6rem 1.05rem; font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.footer__title{ font-size:.75rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:#fff; margin-bottom:1.4rem; }
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.footer__list a{ font-size:.9375rem; transition:color .3s var(--ease); }
.footer__list a:hover{ color:#fff; }
.footer__bottom{ padding-top:2rem; display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; font-size:.8125rem; color:rgba(255,255,255,.45); }
.footer__legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer__legal a:hover{ color:#fff; }

.wa{
  position:fixed; right:clamp(1rem,2.2vw,1.9rem); bottom:clamp(1rem,2.2vw,1.9rem); z-index:90;
  width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 24px rgba(0,0,0,.22);
  transform:translateY(80px); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.wa.is-vis{ transform:none; opacity:1; }
.wa:hover{ transform:scale(1.06); }

/* --------------------------------------------------------------------------
   23. Legal pages
   -------------------------------------------------------------------------- */
.legal{ max-width:76ch; }
.legal h2{ font-size:clamp(1.2rem,1.9vw,1.5rem); text-transform:uppercase; letter-spacing:.02em; margin:3rem 0 1.1rem; padding-top:2.3rem; border-top:1px solid var(--line); }
.legal h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.legal h3{ font-size:1.0625rem; font-weight:400; margin:1.9rem 0 .8rem; color:var(--ink); }
.legal p,.legal li{ font-size:1rem; line-height:1.72; }
.legal p + p{ margin-top:1rem; }
.legal ul,.legal ol{ padding-left:1.25rem; margin:1rem 0; display:grid; gap:.55rem; }
.legal strong{ color:var(--ink); font-weight:500; }
.legal__meta{ font-size:.875rem; color:var(--muted-soft); padding-bottom:2.2rem; margin-bottom:2.2rem; border-bottom:1px solid var(--line); }

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
/* Below the nav breakpoint the side navs are removed from the grid entirely,
   which would shunt the wordmark into column 1. Placing the burger and brand
   explicitly keeps SAAD optically centred, as on Gulfstream. */
@media (max-width: 1100px) {
  .nav-side { display: none; }
  .burger { display: flex; grid-column: 1; justify-self: start; }
  .brand { grid-column: 2; }
}

@media (max-width: 860px) {
  .collage { padding-bottom: 104%; }
  .features--ruled { gap: 2.75rem; }
  .features--ruled .feature + .feature { border-left: 0; }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .brand__sub { display: none; }
  .brand__mark { font-size: 1.1rem; letter-spacing: .34em; text-indent: .34em; }
  .hero { height: clamp(500px, 76vh, 700px); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .ccard { flex: 0 0 82vw; }
  .footer__bottom { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   25. Method — photograph + numbered list
   --------------------------------------------------------------------------
   Replaces the icon-in-a-circle row. Line icons at that size carry no real
   information and read as decoration; a photograph of the actual work plus
   plainly numbered points does the same job with more credibility.
   -------------------------------------------------------------------------- */
.method { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 950px) { .method { grid-template-columns: .82fr 1.18fr; } }

.method__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-soft);
}
@media (min-width: 950px) { .method__media { position: sticky; top: 110px; } }
.method__media img { width: 100%; height: 100%; object-fit: cover; }

.method__list { list-style: none; margin: 0; padding: 0; }
.method__item {
  display: grid;
  gap: .4rem clamp(1.25rem, 2.6vw, 2.5rem);
  padding-block: clamp(1.6rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.method__item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 620px) { .method__item { grid-template-columns: 52px 1fr; } }

.method__num {
  font-size: .8125rem; font-weight: 400; color: var(--muted-soft);
  padding-top: .3rem; letter-spacing: .04em;
}
.method__name {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 300;
  color: var(--ink); margin-bottom: .5rem; line-height: 1.3;
}
.method__text { font-size: .9375rem; line-height: 1.68; max-width: 54ch; }

/* --------------------------------------------------------------------------
   26. Spec rows — plain typographic list (aircraft types)
   -------------------------------------------------------------------------- */
/* Explicit column counts rather than auto-fit: the vertical rules have to line
   up with the actual wrap points, which auto-fit cannot guarantee. */
.specs { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .specs { grid-template-columns: repeat(4, 1fr); } }

/* Six-item variant (Why SAAD) sits better as 3 across */
@media (min-width: 1000px) { .specs--three { grid-template-columns: repeat(3, 1fr); } }

.spec {
  padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.1rem, 2vw, 1.9rem);
  border-top: 1px solid var(--line);
  border-left: 0;                      /* one column — nothing to divide */
}
/* Add the vertical rule per breakpoint, then strip it from the first cell of
   each row. The plain `.spec` rule has to be repeated inside each query: a
   `:nth-child()` selector outranks it, so a single base declaration would be
   beaten for every cell and the rules would only appear on odd ones. */
@media (min-width: 620px) {
  .spec { border-left: 1px solid var(--line); }
  .spec:nth-child(2n+1) { border-left: 0; }
}
@media (min-width: 1000px) {
  .spec { border-left: 1px solid var(--line); }
  .spec:nth-child(2n+1) { border-left: 1px solid var(--line); }
  .spec:nth-child(4n+1) { border-left: 0; }
  .specs--three .spec:nth-child(4n+1) { border-left: 1px solid var(--line); }
  .specs--three .spec:nth-child(3n+1) { border-left: 0; }
}
.section--navy .spec, .section--ink .spec { border-top-color: var(--line-dark); }
.section--navy .spec + .spec, .section--ink .spec + .spec { border-left-color: var(--line-dark); }
.spec__name {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); margin-bottom: .85rem;
}
.section--navy .spec__name, .section--ink .spec__name { color: #fff; }
.spec__text { font-size: .9375rem; line-height: 1.65; }
/* Single column below 620px, so there is no gap to rule. Matched to the 620px
   breakpoint above — at 700px it used to cancel the rules the two-column
   layout had just drawn. */
@media (max-width: 619px) {
  .spec + .spec { border-left: 0; }
}

/* --------------------------------------------------------------------------
   27. Service panels — expanding chooser
   --------------------------------------------------------------------------
   Side-by-side panels; the one under the pointer grows and brightens. On
   touch and at narrow widths they stack and all stay open.
   -------------------------------------------------------------------------- */
.panels {
  display: flex;
  gap: clamp(.75rem, 1.2vw, 1.1rem);
  min-height: clamp(380px, 56vh, 560px);
}
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: block;
  color: #fff;
  isolation: isolate;
  transition: flex-grow .85s cubic-bezier(.68,0,.18,1);
}
.panel:hover, .panel:focus-visible { flex-grow: 1.7; }

.panel__img { position: absolute; inset: 0; z-index: 1; }
.panel__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  filter: brightness(.74) saturate(.95);
  transition: transform 1.1s cubic-bezier(.68,0,.18,1), filter .65s ease;
}
.panel:hover .panel__img img,
.panel:focus-visible .panel__img img { transform: scale(1); filter: brightness(.9) saturate(1); }

.panel__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(6,24,39,.94) 0%, rgba(6,24,39,.82) 26%,
    rgba(6,24,39,.42) 58%, rgba(6,24,39,.18) 100%);
}
.panel__num {
  position: absolute; top: clamp(1rem,1.8vw,1.5rem); left: clamp(1rem,1.8vw,1.5rem);
  z-index: 4;
  font-size: .75rem; letter-spacing: .18em;
  color: rgba(255,255,255,.75);
}
.panel__body {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: clamp(1.4rem,2.2vw,2rem);
  display: flex; flex-direction: column;
}
.panel__title {
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 200;
  text-transform: uppercase; letter-spacing: .02em; color: #fff;
  line-height: 1.15; margin-bottom: .6rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.panel__desc {
  font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.88);
  max-width: 32ch; text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
/* Extra detail, revealed as the panel opens */
.panel__more {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease);
}
.panel__more > div { overflow: hidden; }
.panel:hover .panel__more,
.panel:focus-visible .panel__more { grid-template-rows: 1fr; opacity: 1; }
.panel__more p {
  font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.8);
  max-width: 38ch; padding-top: .9rem;
}
.panel__go {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem; font-size: .8125rem; letter-spacing: .05em; color: #fff;
}
.panel__go::after { content:""; width:20px; height:1px; background: currentColor; transition: width .45s var(--ease); }
.panel:hover .panel__go::after { width: 36px; }

@media (max-width: 860px) {
  .panels { flex-direction: column; min-height: 0; }
  /* Stacked: let the copy set the height so nothing can be clipped, and pad
     the top so the photograph still reads above the text. */
  .panel { flex: none; height: auto; min-height: 260px; }
  .panel:hover { flex-grow: 0; }
  .panel__body { position: relative; padding-top: clamp(5.5rem, 24vw, 9rem); }
  .panel__more { grid-template-rows: 1fr; opacity: 1; }
  .panel__img img { transform: none; }
}

/* --------------------------------------------------------------------------
   28. About — portrait + text, stats, place band
   -------------------------------------------------------------------------- */
/* This block sits outside .shell (see about.html) and supplies its own
   gutters, so on phones it still lines up with everything else. The desktop
   two-column arrangement is further down, after the base rules it overrides. */
.about-body {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  padding-inline: var(--gutter);
}

.about-photo { position: relative; background: transparent; }
/* The frame is what gets sized; the image fills it. Stacked, that is simply a
   4:3 box. Side by side, the frame is handed a height by the grid and the
   image crops to it — see the 1100px block below. */
.about-photo__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.about-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--paper-soft);
}
/* Caption sits under the photograph rather than over it */
.about-photo__caption { margin-top: 1rem; text-align: center; }
.about-photo__caption strong { display: block; font-weight: 400; font-size: 1rem; color: var(--ink); }
.about-photo__caption span {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft);
}

.about-text { max-width: 62ch; }
.about-text h2 em { font-style: italic; }

/* 140px, not 160px: the photograph column grew, so the text column is down to
   its 62ch measure (~530px) and three 160px tracks no longer fit — the third
   stat dropped to a row of its own. */
.about-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: clamp(1.5rem,2.6vw,2.4rem);
  margin-top: clamp(2.5rem,4vw,3.25rem); padding-top: clamp(1.9rem,3vw,2.4rem);
  border-top: 1px solid var(--line);
}
.about-stat__label { font-size: .6875rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: .5rem; }
.about-stat__value { font-size: 1.0625rem; font-weight: 300; color: var(--ink); line-height: 1.4; }

.about-contact {
  margin-top: clamp(2rem,3.2vw,2.75rem); padding-top: clamp(1.6rem,2.6vw,2rem);
  border-top: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.7;
}
.about-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* From 1100px up: photograph left, text right. Not 860px — the text column is
   a fixed 580px, so between 860 and 1100 the picture got squeezed to a stamp;
   better to stay stacked there and let it run full width.
   This has to sit after the base rules above, not before: a media query adds
   no specificity, so earlier declarations would simply lose on source order.

   Horizontally:
   - padding-left is a slim inset rather than the full gutter, so the picture
     reaches well into the margin without quite touching the window edge.
   - padding-right reproduces where .shell's right edge falls — half of
     whatever the window has over --maxw, plus the usual gutter — which keeps
     the text aligned with every other section. The 100% is the document
     width, not 100vw, so a scrollbar cannot push the content sideways.
   - the photo column is 1fr, so pixels gained on a wide screen go to the
     picture rather than to empty margin.

   Vertically: three items in two rows. The photograph has row 1 to itself and
   is stretched to fill it, so its top lands on the eyebrow and its bottom on
   the rule above the contact details. Row 1's height comes from .about-text,
   which ends at the stats — hence the frame/absolute-image arrangement above:
   an image in normal flow would contribute its own 4:3 height to the row and
   drive the layout instead of being driven by it. For the same reason the
   breathing space above the rule is padding inside row 1 rather than a margin
   or a row-gap, either of which would leave the photograph short of the line. */
@media (min-width: 1100px) {
  .about-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
    padding-left: clamp(1.25rem, 2.2vw, 2.75rem);
    padding-right: calc(max(0px, 100% - var(--maxw)) / 2 + var(--gutter));
    row-gap: 0;
  }
  .about-photo {
    grid-column: 1; grid-row: 1; align-self: stretch;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  .about-photo__frame { aspect-ratio: auto; height: 100%; }
  .about-text    { grid-column: 2; grid-row: 1; padding-bottom: clamp(2rem, 3.2vw, 2.75rem); }
  .about-contact { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* Place band — wide photograph with a caption block */
.place { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 950px) { .place { grid-template-columns: 1.25fr .75fr; } }
.place__figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16/10; background: var(--paper-soft); }
.place__figure img { width: 100%; height: 100%; object-fit: cover; }
.place__cap {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.4rem,2.4vw,2.2rem);
  background: linear-gradient(to top, rgba(6,24,39,.88), transparent);
  color: #fff;
}
.place__k { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .5rem; }
.place__n { font-size: clamp(1.3rem,2.2vw,1.9rem); font-weight: 200; }
.place__n em { font-style: italic; }
.place__copy { font-size: 1rem; line-height: 1.72; }

/* --------------------------------------------------------------------------
   29. Footer credit
   -------------------------------------------------------------------------- */
.foot-credit { color: rgba(255,255,255,.45); }
.foot-credit a { color: rgba(255,255,255,.72); transition: color .3s var(--ease); }
.foot-credit a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   30. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js [data-reveal-img]::after{ display:none; }
  .js [data-reveal-img] img{ transform:none; }
  .hero__media img,.banner__media img{ animation:none; }
  .reveal-line > span{ transform:none; }
  .fade-up{ opacity:1; }
}

@media print {
  .header,.drawer,.wa,.cta-band,.hero__actions{ display:none !important; }
  body{ color:#000; }
}