/* ==========================================================================
   KB Details LLC — Mobile Detailing & Ceramic Coatings, Edmond & OKC
   Flat, centred, banded layout. No gradients anywhere — solid surfaces only.
   Palette sampled from the brand logo (red + chrome on black).
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/ArchivoBlack-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-600-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Alternating section bands */
  --ink: #040404;
  --ink-2: #0a0809;
  --ink-3: #120d0f;
  --crimson: #1a0206;
  --card: #161113;
  --card-2: #1d1719;

  --red: #ff3340;
  --red-core: #e01020;
  --red-deep: #c00512;
  --brand-red: #2a0308;

  --text: #f3f2f2;
  --muted: #aaa6a7;
  --dim: #827c7e;
  --line: rgba(206, 202, 203, 0.14);
  --line-2: rgba(206, 202, 203, 0.28);

  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 6rem;
  --s9: 8rem;

  --wrap: 1240px;
  --narrow: 900px;
  /* Hard edges throughout — no rounding anywhere. */
  --r: 0px;
  --r-lg: 0px;

  /* Rules do the work that soft shadows used to. */
  --rule: rgba(206, 202, 203, 0.16);
  --rule-2: rgba(206, 202, 203, 0.3);

  --sh-1: none;
  --sh-2: 0 2px 0 rgba(0, 0, 0, 0.5);
  --sh-3: 0 4px 0 rgba(0, 0, 0, 0.55);
  --glow: inset 0 0 0 1px var(--red);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 96px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

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

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--red-deep);
  color: #fff;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow {
  width: min(100% - 2.5rem, var(--narrow));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red-deep);
  color: #fff;
  padding: var(--s2) var(--s4);
}
.skip:focus {
  left: 0;
}

/* ---------- Section bands ---------- */
/* Blueprint grid — workshop-drawing texture rather than empty flat color. */
.section,
.trust,
.footer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23cecacb' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  background-position: center top;
}

.section {
  position: relative;
  z-index: 2;
  /* Tighter than before — there was too much dead air between bands. */
  padding-block: clamp(var(--s5), 5vw, var(--s7));
  border-top: 1px solid var(--rule);
}


/* Section headings get a rule + label rather than floating in space. */
.head {
  padding-top: var(--s3);
}
.head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.head .eyebrow::before,
.head .eyebrow::after {
  content: '';
  width: clamp(18px, 4vw, 42px);
  height: 1px;
  background: var(--rule-2);
}
.section--ink {
  background: var(--ink);
}
.section--deep {
  background: var(--ink-2);
}
.section--raise {
  background: var(--ink-3);
}
.section--crimson {
  background: var(--crimson);
}

/* ---------- Centred section heads ---------- */
.head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
  max-width: 70ch;
  margin: 0 auto clamp(var(--s4), 3.5vw, var(--s5));
}

.eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--red);
  text-transform: none;
}

.head h1,
.head h2 {
  font-size: clamp(2.2rem, 5.6vw, 4rem);
}

.head p {
  color: var(--muted);
  font-size: 1.06rem;
}

.accent {
  color: var(--red);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 1.05rem 2.3rem 1.05rem 1.9rem;
  border-radius: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--red-deep);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--red-deep);
  /* Slanted trailing edge, same direction as the split diagonals. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 100%, 0 100%);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s var(--ease);
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px);
  background: var(--red-core);
  box-shadow: inset 0 0 0 1px var(--red-core), 0 3px 0 rgba(0, 0, 0, 0.5);
}
.btn:active {
  transform: translateY(0) scale(0.985);
}

/* The clip crops an outline, so the focus ring is drawn inside the shape.
   Two rings so one of them always contrasts, on light or dark grounds. */
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #0d0a0b;
}

/* Wherever two CTAs sit side by side, the second one mirrors the first: the
   slants face each other and the pair's outer edges stay square. Structural,
   so any new button pair picks it up automatically. */
.hero__cta .btn + .btn,
.btn--cut-left {
  clip-path: polygon(0.85rem 0, 100% 0, 100% 100%, 0 100%);
  padding: 1.05rem 1.9rem 1.05rem 2.3rem;
}

/* ...unless it has opted out of the angle entirely. */
.hero__cta .btn + .btn--square {
  clip-path: none;
  padding: 1.05rem 1.9rem;
}

/* Plain rectangle — no angled cut. */
.btn--square {
  clip-path: none;
  padding: 1.05rem 1.9rem;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover {
  background: rgba(255, 51, 64, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.5), var(--sh-2);
}
.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ==========================================================================
   Header — links split either side of a centred logo, quote button far right
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  /* Nothing behind the nav at the top of the page — the backdrop is added
     only once the user scrolls (see .is-stuck). */
  background: transparent;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.header.is-stuck {
  background: rgba(6, 9, 15, 0.92);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}

.header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
}

/* `contents` dissolves the wrapper so both groups become grid items —
   that is what keeps the logo optically centred in the viewport. */
.nav-wrap {
  display: contents;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 2.4vw, var(--s5));
}
.nav--left {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-end;
  padding-left: 210px; /* clears the review credentials */
}
.nav--right {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-start;
  padding-right: 290px; /* clears the socials + quote button */
}

.nav a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding-block: var(--s1);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover,
.nav a.is-current,
.nav__item.is-current > .nav__link {
  color: var(--text);
}
.nav a:hover::after,
.nav a.is-current::after,
.nav__item.is-current > .nav__link::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Nav dropdowns ---------- */
/* The header is a 3-column grid with the logo dead centre, so the panels are
   positioned off each nav item rather than the header — otherwise they would
   be measured against a grid track and drift as the nav width changes.
   The label is a real link to the section hub and the chevron is a separate
   button that opens the panel: one control cannot both navigate on click and
   toggle on click, and screen-reader users need the toggle to be a button. */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.nav__chev svg {
  width: 11px;
  height: 11px;
  transition: transform 0.35s var(--ease);
}
.nav__item.is-open .nav__chev svg {
  transform: rotate(180deg);
}
.nav__item:hover .nav__chev,
.nav__item.is-open .nav__chev,
.nav__item.is-current .nav__chev {
  color: var(--text);
}

.sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  z-index: 70;
  min-width: 236px;
  padding: var(--s2);
  background: rgba(8, 6, 7, 0.985);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-3);
  /* No backdrop-filter here on purpose: Chromium still paints the filtered
     backdrop of a `visibility: hidden` element, which left a ghost panel
     hanging under the other menu. The fill is opaque enough not to need it. */
  pointer-events: none;
  /* Only transform + opacity animate; visibility flips at the end so the
     panel is not a keyboard trap while it is hidden. */
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s linear 0.28s;
}
.nav__item.is-open > .sub {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s;
}
/* A hover bridge — without it the pointer crosses dead space on the way down
   and the panel closes before it can be reached. */
.sub::before {
  content: '';
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}

.sub a {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.6rem var(--s3);
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.sub a::after {
  display: none;
}
.sub a:hover,
.sub a.is-current {
  color: var(--text);
  background: rgba(255, 51, 64, 0.14);
}
.sub a.is-current {
  box-shadow: inset 2px 0 0 var(--red);
}

/* 15 areas in one column would run off the bottom of the viewport. */
.sub--wide {
  min-width: 470px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s1);
}
.sub__head {
  grid-column: 1 / -1;
  padding: var(--s2) var(--s3) var(--s1);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.sub__all {
  grid-column: 1 / -1;
  margin-top: var(--s1);
  border-top: 1px solid var(--line);
  color: var(--red) !important;
}

.brand {
  grid-column: 2;
  grid-row: 1;
  display: block;
  transition: transform 0.4s var(--ease);
}
.brand:hover {
  transform: scale(1.05);
}
.brand:active {
  transform: scale(0.98);
}
.brand img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  box-shadow: var(--sh-1);
}

.header__cta {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.72rem 1.35rem;
  font-size: 0.82rem;
}
.header__cta:hover {
  transform: translateY(-50%) scale(1.03);
}
.header__cta:active {
  transform: translateY(-50%) scale(0.98);
}

/* Tap-to-call in the header. Desktop has the quote button instead. */
.header__phone {
  display: none;
  align-items: center;
  gap: 7px;
  /* padding, not height — keeps a 44px tap target without a visible box */
  padding: 0.7rem 0.4rem;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.header__phone svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--red);
}
.header__phone:hover {
  color: var(--red);
}

.burger {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -22px;
  width: 44px;
  height: 44px;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.burger:hover {
  background: rgba(255, 51, 64, 0.1);
}
.burger:active {
  transform: scale(0.94);
}
.burger span {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.4s var(--ease);
}
.burger span::before {
  transform: translateY(-6px);
}
.burger span::after {
  transform: translateY(6px);
}
.burger[aria-expanded='true'] span {
  transform: rotate(45deg);
}
.burger[aria-expanded='true'] span::before {
  transform: rotate(-90deg);
}
.burger[aria-expanded='true'] span::after {
  opacity: 0;
}

/* ==========================================================================
   Hero (home) — fully centred
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(var(--header-h) + var(--s6));
  padding-bottom: var(--s7);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Flat scrim, paired with a soft text shadow so the darker shots keep
   their detail instead of being washed out by a heavier wash. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(4, 6, 10, 0.62);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  max-width: 1000px;
  margin-inline: auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.hero h1 {
  /* "JOHANNESBURG" is one unbreakable word ~8.9x the font-size in width, so the
     clamp minimum has to fit the narrowest phone or it overflows the viewport. */
  font-size: clamp(1.95rem, 8.6vw, 6.6rem);
  letter-spacing: -0.04em;
}
.hero h1 span {
  display: block;
  color: var(--red);
}

.hero__lead {
  font-size: clamp(1.05rem, 2vw, 1.26rem);
  color: #e9e6e7;
  max-width: 58ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
}

/* Source logo is only 150px (Instagram's logged-out cap), so the displayed
   size is capped at what still reads sharp rather than scaled up further. */
.hero__logo {
  width: clamp(104px, 14vw, 164px);
  height: auto;
  border-radius: 50%;
  box-shadow: var(--sh-2);
}

.hero__services {
  font-weight: 700;
  font-size: clamp(0.78rem, 1.5vw, 0.98rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e6e3e4;
}

/* ---------- Scroll cue ---------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s5);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e6e3e4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  transition: opacity 0.5s var(--ease), color 0.3s var(--ease);
}
.hero__scroll svg {
  width: 22px;
  height: 22px;
  color: var(--red);
  animation: nudge 2.1s var(--ease) infinite;
}
.hero__scroll:hover {
  color: #fff;
}
.hero__scroll:active svg {
  transform: translateY(4px);
}

/* Fades out once they have started scrolling — it has done its job by then. */
.hero__scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* On short viewports it would collide with the CTAs. */
@media (max-height: 700px) {
  .hero__scroll {
    display: none;
  }
}

/* ---------- Inner-page header ---------- */
.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s6));
  padding-bottom: var(--s6);
  text-align: center;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  max-width: 74ch;
  margin-inline: auto;
}
.page-head h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
}
.page-head p {
  color: var(--muted);
  font-size: 1.08rem;
}

/* The page header already carries generous padding, so the first band after
   it doesn't need a full section's worth again. */
.page-head + .section,
.page-head + .stats + .section {
  padding-top: clamp(var(--s5), 5vw, var(--s7));
}

.crumbs {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}
.crumbs a:hover {
  color: var(--red);
}

/* ---------- Stats ---------- */
.stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stats > div {
  background: var(--ink-2);
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: background 0.4s var(--ease);
}
.stats > div:hover {
  background: var(--ink-3);
}
.stats dt {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  letter-spacing: -0.03em;
  color: var(--red);
  line-height: 1;
}
.stats dd {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 700;
}

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--s4);
}

.svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
  padding: var(--s5);
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease);
  will-change: transform;
}
.svc:hover {
  transform: translateY(-6px);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--red);
}

.svc__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(255, 51, 64, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.3);
  color: var(--red);
}
.svc__ico svg {
  width: 25px;
  height: 25px;
}

.svc h3 {
  font-size: 1.3rem;
}
.svc p {
  color: var(--muted);
  font-size: 0.95rem;
}

.svc ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px var(--s4);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  width: 100%;
}
.svc li {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b3aeaf;
  white-space: nowrap;
}

.svc__link {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  transition: transform 0.3s var(--ease);
  display: inline-block;
}
.svc__link:hover {
  transform: translateX(3px);
}

/* ---------- Detailed service rows (services page) ---------- */
.srow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
  padding-block: clamp(var(--s5), 5vw, var(--s7));
  border-bottom: 1px solid var(--line);
}
.srow:last-child {
  border-bottom: 0;
}
.srow--flip .srow__media {
  order: 2;
}
.srow__media {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--sh-2);
  aspect-ratio: 4 / 3;
  position: relative;
}
.srow__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.srow__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
}
.srow__body h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.srow__body p {
  color: var(--muted);
}
.srow__body ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px var(--s4);
  padding-top: var(--s2);
}
.srow__body li {
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b3aeaf;
}

/* ==========================================================================
   Finishes
   ========================================================================== */
.fin {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
}
.fin__tabs {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.fin__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: 0;
  text-align: left;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease);
}
.fin__tab:hover {
  transform: translateX(5px);
  background: var(--card-2);
}
.fin__tab:active {
  transform: translateX(5px) scale(0.99);
}
.fin__tab[aria-selected='true'] {
  background: var(--brand-red);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.5), var(--sh-2);
}
.fin__swatch {
  width: 44px;
  height: 44px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), var(--sh-1);
}
.fin__swatch--gloss {
  background: #e6e3e4;
}
.fin__swatch--satin {
  background: #8d8788;
}
.fin__swatch--matte {
  background: #3a3436;
}
.fin__tab strong {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.fin__tab small {
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.55;
  display: block;
}
.fin__panel {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  aspect-ratio: 4 / 3;
  background: var(--card);
}
.fin__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  inset: 0;
  transform: scale(1.04);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
.fin__panel img.is-on {
  opacity: 1;
  transform: scale(1);
}
.fin__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s3) var(--s4);
  background: rgba(4, 6, 10, 0.82);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #e6e3e4;
  text-align: center;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s1);
  margin-bottom: var(--s6);
}
.filter {
  padding: 0.62rem 1.25rem;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease),
    background 0.35s var(--ease);
}
.filter:hover {
  color: var(--text);
  background: rgba(255, 51, 64, 0.08);
  transform: translateY(-1px);
}
.filter:active {
  transform: translateY(0) scale(0.97);
}
.filter[aria-pressed='true'] {
  color: #fff;
  background: var(--red-deep);
  box-shadow: var(--sh-2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--s3);
}

.tile {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  cursor: pointer;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  will-change: transform;
  text-align: center;
  width: 100%;
  display: block;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.85s var(--ease);
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 6, 10, 0.44);
  transition: opacity 0.5s var(--ease);
}
.tile:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--red);
}
.tile:hover img {
  transform: scale(1.07);
}
.tile:hover::before {
  opacity: 0.55;
}
.tile:active {
  transform: translateY(-2px) scale(0.995);
}
.tile.is-hidden {
  display: none;
}

/* The flat scrim alone leaves the red tag washed out over bright white panels
   — most of this gallery is white trucks — so the caption gets its own footing
   instead of darkening the whole photo further. */
.tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  z-index: 1;
  background: linear-gradient(to top, rgba(3, 3, 3, 0.88), rgba(3, 3, 3, 0));
  pointer-events: none;
}

.tile__meta {
  position: absolute;
  z-index: 2;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.tile__title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.tile__tag {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.tile__play {
  position: absolute;
  z-index: 2;
  top: var(--s3);
  right: var(--s3);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(6, 12, 22, 0.6);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.4);
  color: var(--red);
  transition: transform 0.45s var(--ease), background 0.4s var(--ease);
}
.tile:hover .tile__play {
  transform: scale(1.12);
  background: var(--red-deep);
  color: #fff;
}
.tile__play svg {
  width: 15px;
  height: 15px;
}

/* Horizontal gallery strip (home) */
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(228px, 1fr);
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s3);
  scroll-snap-type: x mandatory;
}
.strip .tile {
  scroll-snap-align: start;
}

/* ==========================================================================
   Feature project
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
}
.feature__media {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 5;
}
.feature__media img,
.feature__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
}
.feature__body h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
}
.feature__body p {
  color: var(--muted);
}

.badge {
  position: absolute;
  z-index: 2;
  left: var(--s4);
  bottom: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: 0;
  background: rgba(6, 12, 22, 0.85);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.34);
  text-align: center;
}
.badge strong {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--red);
  letter-spacing: -0.03em;
}
.badge span {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

/* ==========================================================================
   Why / checklist
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s4);
}
.why-card {
  padding: var(--s5) var(--s4);
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease);
}
.why-card:hover {
  transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--red);
}
.why-card svg {
  width: 26px;
  height: 26px;
  color: var(--red);
}
.why-card h3 {
  font-size: 1.1rem;
}
.why-card p {
  color: var(--muted);
  font-size: 0.93rem;
}

/* ---------- Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s4);
  counter-reset: step;
}
.step {
  position: relative;
  padding: var(--s6) var(--s4) var(--s5);
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  counter-increment: step;
  text-align: center;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease);
}
.step::before {
  content: '0' counter(step);
  position: absolute;
  top: var(--s3);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Archivo Black', sans-serif;
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 51, 64, 0.45);
}
.step:hover {
  transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--red);
}
.step h3 {
  font-size: 1.14rem;
  margin: var(--s4) 0 var(--s2);
}
.step p {
  color: var(--muted);
  font-size: 0.93rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.faq__item {
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.faq__item:hover {
  background: var(--card-2);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  text-align: left;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.faq__q svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--red);
  transition: transform 0.4s var(--ease);
}
.faq__item.is-open .faq__q svg {
  transform: rotate(45deg);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding: 0 var(--s4) var(--s4);
  color: var(--muted);
  font-size: 0.96rem;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: start;
}
.contact__cards {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.ccard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: center;
  padding: var(--s4);
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  text-align: left;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease);
}
a.ccard:hover {
  transform: translateY(-3px);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.36), var(--sh-2);
}
a.ccard:active {
  transform: translateY(-1px) scale(0.99);
}
.ccard__ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(255, 51, 64, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.28);
  color: var(--red);
  flex: none;
}
.ccard__ico svg {
  width: 20px;
  height: 20px;
}
.ccard b {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.ccard span {
  color: var(--muted);
  font-size: 0.9rem;
}

.form {
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-align: left;
}
.form h2,
.form h3 {
  font-size: 1.45rem;
}
.form > p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: var(--s1);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(4, 6, 10, 0.55);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 0;
  padding: 0.8rem 0.95rem;
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease);
  width: 100%;
}
.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--dim);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  box-shadow: inset 0 0 0 1px rgba(206, 202, 203, 0.4);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(4, 6, 10, 0.8);
  box-shadow: inset 0 0 0 1px var(--red), 0 0 0 3px rgba(255, 51, 64, 0.16);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a9be' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 17px;
  padding-right: 2.6rem;
}
.field select option {
  background: var(--card);
  color: var(--text);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.form__note {
  font-size: 0.78rem;
  color: var(--dim);
  text-align: center;
}

/* ---------- CTA band ---------- */
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s4);
  max-width: 780px;
  margin-inline: auto;
}
.cta-band h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.cta-band p {
  color: var(--muted);
  font-size: 1.06rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  z-index: 2;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: var(--s6) var(--s4);
  text-align: center;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.footer .brand {
  display: inline-block;
  margin-inline: auto;
  grid-column: auto;
}
.footer .brand img {
  width: 70px;
  height: 70px;
}
.footer p {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 40ch;
  margin: var(--s3) auto 0;
}
.footer h4 {
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-bottom: var(--s3);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
}
.footer li + li {
  margin-top: var(--s2);
}
.footer li a,
.footer address a {
  color: var(--muted);
  font-size: 0.93rem;
  font-style: normal;
  transition: color 0.3s var(--ease);
  display: inline-block;
}
.footer li a:hover,
.footer address a:hover {
  color: var(--red);
}
.footer address {
  font-style: normal;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.8;
}
/* Every service area linked from every page — the dropdown is a convenience,
   this is what actually makes the 15 area pages crawlable. */
.footer__areas {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  text-align: center;
}
.footer__areas h4 {
  margin-bottom: var(--s3);
}
.footer__areas p {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 0.86rem;
  line-height: 2.1;
  color: var(--muted);
}
.footer__areas a {
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.footer__areas a:hover {
  color: var(--red);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  align-items: center;
  padding-top: var(--s4);
  font-size: 0.82rem;
  color: var(--dim);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: rgba(2, 4, 8, 0.9);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lb.is-open {
  opacity: 1;
  visibility: visible;
}
.lb__stage {
  position: relative;
  max-width: min(96vw, 560px);
  max-height: 88vh;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--sh-3);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.5s var(--ease);
}
.lb.is-open .lb__stage {
  transform: scale(1) translateY(0);
}
.lb__stage img,
.lb__stage video {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  background: #000;
}
.lb__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s3) var(--s4);
  background: rgba(4, 6, 10, 0.86);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.84rem;
  text-align: center;
  pointer-events: none;
}
.lb__btn {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(10, 16, 26, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  transition: transform 0.4s var(--ease), background 0.35s var(--ease);
}
.lb__btn:hover {
  background: var(--red-deep);
  transform: scale(1.08);
}
.lb__btn:active {
  transform: scale(0.96);
}
.lb__btn svg {
  width: 19px;
  height: 19px;
}
.lb__close {
  top: var(--s4);
  right: var(--s4);
}
.lb__prev {
  left: var(--s4);
  top: 50%;
  margin-top: -23px;
}
.lb__next {
  right: var(--s4);
  top: 50%;
  margin-top: -23px;
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav {
    gap: var(--s3);
  }
  .nav a {
    font-size: 0.85rem;
  }
  .nav--right {
    padding-right: 172px;
  }
  .header__cta {
    padding: 0.62rem 1.05rem;
    font-size: 0.74rem;
  }
}

@media (max-width: 1040px) {
  .fin,
  .contact-grid,
  .feature,
  .srow,
  .srow--flip {
    grid-template-columns: 1fr;
  }
  .feature__media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
  .srow__media,
  .srow--flip .srow__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 76px;
  }
  .burger {
    display: flex;
  }
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
  }
  .brand {
    order: 1;
    margin-right: auto;
  }
  .header__phone {
    display: inline-flex;
    order: 2;
  }
  .burger {
    order: 3;
    position: static;
    margin-top: 0;
  }
  /* Quote button and socials give up their space to the phone number. */
  .socials,
  .creds {
    display: none;
  }

  /* No angled cuts at this size — they just eat the label. */
  .btn,
  .btn--cut-left,
  .hero__cta .btn + .btn {
    clip-path: none;
    padding: 1.05rem 1.6rem;
  }
  .nav-wrap {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 auto;
    padding: calc(var(--header-h) + var(--s4)) var(--s4) var(--s5);
    background: rgba(6, 9, 15, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: var(--sh-3);
    transform: translateY(-100%);
    transition: transform 0.55s var(--ease);
    visibility: hidden;
  }
  .nav-wrap.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav--left,
  .nav--right {
    grid-column: auto;
    padding-right: 0;
  }
  .nav a {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text);
    padding-block: var(--s3);
    border-bottom: 1px solid var(--line);
    text-align: center;
  }
  .nav a::after {
    display: none;
  }

  /* Dropdowns become in-flow accordions once the nav is a full-screen sheet. */
  .nav-wrap {
    overflow-y: auto;
    max-height: 100svh;
  }
  .nav__item {
    display: block;
    position: static;
  }
  /* Label and chevron share one row; the chevron keeps a 44px tap target. */
  .nav__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__item > .nav__link {
    border-bottom: 0;
    text-align: right;
    padding-right: var(--s3);
  }
  .nav__chev {
    width: 44px;
    height: 44px;
    color: var(--red);
  }
  .nav__chev svg {
    width: 15px;
    height: 15px;
  }
  .sub {
    grid-column: 1 / -1;
    position: static;
    translate: none;
    min-width: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    pointer-events: auto;
    /* Collapsed height rather than display:none, so it can animate. */
    display: block;
    opacity: 1;
    transform: none;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease);
  }
  .nav__item.is-open > .sub {
    /* Generous ceiling on purpose — max-height only has to clear the content
       for the transition to run, and 15 area links in two columns overshot the
       old 760px, which silently cut off the last five towns. */
    max-height: 1200px;
    transition: max-height 0.55s var(--ease);
  }
  .sub::before {
    display: none;
  }
  .sub--wide {
    /* The base mobile .sub is display:block, so the wide menu has to re-assert
       the grid — two columns halves how far the areas list scrolls. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .sub a {
    font-size: 0.95rem;
    text-align: center;
    padding: 0.8rem var(--s2);
    border-bottom: 1px solid var(--line);
  }
  .sub__head {
    display: none;
  }
  .sub__all {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .brand {
    grid-column: auto;
  }
  .brand img {
    width: 56px;
    height: 56px;
  }
  .header__cta {
    display: none;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + var(--s6));
    /* room for the scroll cue below the buttons */
    padding-bottom: calc(var(--s8) + var(--s4));
  }
}

@media (max-width: 620px) {
  .wrap,
  .wrap--narrow {
    width: min(100% - 1.75rem, var(--wrap));
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s2);
  }
  .form__row {
    grid-template-columns: 1fr;
  }
  .footer__inner {
    grid-template-columns: 1fr;
  }
  .hero__cta .btn {
    flex: 1 1 100%;
  }
  .lb__prev {
    left: var(--s2);
  }
  .lb__next {
    right: var(--s2);
  }
}

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

/* ==========================================================================
   Header extras — review credentials (far left), socials (far right)
   ========================================================================== */
.creds {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.cred {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease);
}
.cred:hover {
  color: var(--text);
}
.cred svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.cred__stars {
  color: #ffc233;
  letter-spacing: -1px;
  font-size: 0.78rem;
}
.cred b {
  color: var(--text);
  font-weight: 800;
}

.socials {
  position: absolute;
  right: 200px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.social {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: transform 0.35s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.social:hover {
  color: #fff;
  background: var(--red-deep);
  transform: translateY(-2px);
}
.social:active {
  transform: translateY(0) scale(0.94);
}
.social svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Trust row — quiet band of verifiable facts, no logo soup
   ========================================================================== */
.trust {
  position: relative;
  z-index: 2;
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

.trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s4), 4vw, var(--s8));
  padding-block: var(--s5);
}

.trust__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.trust__item b {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}
a.trust__item {
  align-items: center;
  font-weight: 700;
  color: var(--text);
}
a.trust__item:hover {
  color: var(--red);
}
.trust__item svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ==========================================================================
   Light bands — white ground, dark type. Shared by the pain and services
   sections so they stay in step.
   ========================================================================== */
.section--light,
.pain {
  background: #fff;
  --on-light: #0d0a0b;
  --on-light-muted: #575152;
}

/* The blueprint grid is drawn in pale silver for dark bands; on white it needs
   a dark stroke or the texture disappears entirely. */
.section--light,
.pain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%230b1220' stroke-opacity='0.055' stroke-width='1'/%3E%3C/svg%3E");
}

.section--light .head h2,
.section--light .head h3 {
  color: var(--on-light);
}
.section--light .head p {
  color: var(--on-light-muted);
}
.section--light .eyebrow,
.section--light .accent,
.pain .accent,
.pain .eyebrow {
  color: var(--red-deep);
}
.section--light .eyebrow::before,
.section--light .eyebrow::after,
.pain .eyebrow::before,
.pain .eyebrow::after {
  background: rgba(11, 18, 32, 0.25);
}

/* Card and step type inside a light band. */
.section--light .fstep h3,
.section--light .why-card h3,
.section--light .step h3,
.section--light .rev__name {
  color: var(--on-light);
}
.section--light .fstep p,
.section--light .why-card p,
.section--light .step p,
.section--light .rev p {
  color: var(--on-light-muted);
}

/* Outlines tuned for dark grounds vanish on white. */
.section--light .vcard,
.section--light .rev,
.section--light .step,
.section--light .why-card {
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.18);
}

/* Process flow: connector rule and numbered markers. */
.section--light .flow::before {
  background: rgba(11, 18, 32, 0.2);
}
.section--light .fstep__dot {
  background: #fff;
  color: var(--red-deep);
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.28);
}
.section--light .fstep:hover .fstep__dot {
  background: var(--red-deep);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--red-deep);
}

/* Ghost buttons are built for dark grounds — invert them here. */
.section--light .btn--ghost,
.pain .btn--ghost {
  background: transparent;
  color: var(--on-light);
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.3);
}
.section--light .btn--ghost:hover,
.pain .btn--ghost:hover {
  background: var(--on-light);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--on-light);
}

/* Light bands run straight into each other — no seam. */
.section--light + .section--light,
.pain + .section--light {
  border-top: 0;
}

/* ==========================================================================
   Pain — full-bleed diagonal splits on white
   ========================================================================== */
.pain {
  /* Runs edge to edge; the splits supply their own rhythm. */
  padding: 0;
  margin: 0;
  border-top: 0;          /* butts straight against the band above */
  --skew: clamp(2rem, 5vw, 6rem);
  --on-light: #0d0a0b;
  --on-light-muted: #575152;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(380px, 42vw, 580px);
}

.split__media {
  position: relative;
  overflow: hidden;
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Row 1: photo bleeds off the left, inner edge cut inwards. */
.split--left .split__media {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
}

/* Row 2: mirrored — photo bleeds off the right, cut the other way. */
.split--right .split__media {
  grid-column: 2;
  grid-row: 1;
  clip-path: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%);
}
.split--right .split__body {
  grid-column: 1;
  grid-row: 1;
}

.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s3);
  text-align: left;
  /* Inner edge clears the diagonal; outer edge lines up with the page gutter. */
  padding: clamp(var(--s5), 6vw, var(--s8)) max(1.25rem, calc(50vw - var(--wrap) / 2))
    clamp(var(--s5), 6vw, var(--s8)) var(--skew);
}
.split--right .split__body {
  padding-left: max(1.25rem, calc(50vw - var(--wrap) / 2));
  padding-right: var(--skew);
}

.split__body h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  color: var(--on-light);
}
.split__body p {
  color: var(--on-light-muted);
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  max-width: 44ch;
}
@media (max-width: 900px) {
  /* Stacked: photo full width on top, no diagonal to fight with. */
  .split,
  .split--right {
    grid-template-columns: 1fr;
  }
  .split__media,
  .split--left .split__media,
  .split--right .split__media {
    grid-column: 1;
    grid-row: 1;
    clip-path: none;
    aspect-ratio: 16 / 10;
    position: relative;
  }
  .split--right .split__body,
  .split__body {
    grid-column: 1;
    grid-row: 2;
    padding: var(--s5) 1.25rem;
  }
}

/* ==========================================================================
   Services — image-led, minimal surrounding copy
   ========================================================================== */
.svc-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.scard {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  min-height: 340px;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
  will-change: transform;
}
.scard--wide {
  grid-column: span 2;
  min-height: 420px;
}

.scard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.scard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 6, 10, 0.55);
  transition: opacity 0.5s var(--ease);
}
.scard:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--red);
}
.scard:hover img {
  transform: scale(1.06);
}
.scard:hover::before {
  opacity: 0.72;
}
.scard:active {
  transform: translateY(-2px) scale(0.995);
}

.scard__body {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  text-align: left;
}
.scard__body h3 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.scard__body p {
  color: #e6e3e4;
  font-size: 0.95rem;
  max-width: 46ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.scard__more {
  margin-top: var(--s1);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.35s var(--ease);
}
.scard:hover .scard__more {
  transform: translateX(4px);
}

/* ==========================================================================
   Owners / story
   ========================================================================== */
.story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--s5), 5vw, var(--s8));
  align-items: center;
}

.story__media {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 3 / 4;
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.story__body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-align: left;
  align-items: flex-start;
}
.story__body h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.story__body p {
  color: var(--muted);
}

.signoff {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  width: 100%;
}
.signoff div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.signoff .sig {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--red);
}
.signoff .who {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 700;
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.rev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s3);
}

.rev {
  padding: var(--s5);
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-align: left;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.rev:hover {
  transform: translateY(-4px);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--red);
}
.rev__stars {
  color: #ffc233;
  font-size: 1rem;
  letter-spacing: 1px;
}
.rev p {
  color: #dad6d7;
  font-size: 0.97rem;
}
.rev__who {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.rev__av {
  width: 38px;
  height: 38px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--red-deep);
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex: none;
}
.rev__name {
  font-weight: 800;
  font-size: 0.9rem;
}
.rev__src {
  font-size: 0.74rem;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rev__src svg {
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   Showreel — previous work
   ========================================================================== */
.reel {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s3);
}
.reel__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--s3);
}

.vcard {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  cursor: pointer;
  min-height: 220px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  display: block;
  width: 100%;
  padding: 0;
}
.vcard--tall {
  min-height: 470px;
}
.vcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.vcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 6, 10, 0.5);
  transition: opacity 0.5s var(--ease);
}
.vcard:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--red);
}
.vcard:hover img {
  transform: scale(1.06);
}
.vcard:hover::before {
  opacity: 0.66;
}
.vcard:active {
  transform: translateY(-1px) scale(0.995);
}

/* Same footing as the gallery tiles — these posters are mostly white trucks. */
.vcard::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  z-index: 1;
  background: linear-gradient(to top, rgba(3, 3, 3, 0.86), rgba(3, 3, 3, 0));
  pointer-events: none;
}

.vcard__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: rgba(6, 12, 22, 0.62);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.5);
  color: #fff;
  transition: transform 0.45s var(--ease), background 0.4s var(--ease);
}
.vcard:hover .vcard__play {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--red-deep);
}
.vcard__play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}
.vcard__cap {
  position: absolute;
  z-index: 2;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  text-align: left;
}
.vcard__cap b {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.vcard__cap span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}

/* ==========================================================================
   Process — horizontal flow
   ========================================================================== */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  counter-reset: flowstep;
  position: relative;
}
.flow::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--line-2);
}

.fstep {
  position: relative;
  z-index: 2;
  counter-increment: flowstep;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s2);
}
.fstep__dot {
  width: 58px;
  height: 58px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.05rem;
  color: var(--red);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.fstep__dot::before {
  content: '0' counter(flowstep);
}
.fstep:hover .fstep__dot {
  background: var(--red-deep);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--red);
  transform: translateY(-3px);
}
.fstep h3 {
  font-size: 1.05rem;
  margin-top: var(--s1);
}
.fstep p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Location
   ========================================================================== */
.loc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
}
.loc__media {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--rule-2);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
}
.loc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live Google map — no tint overlay, it has to stay interactive. */
.loc__map {
  background: var(--card);
}
.loc__map::after {
  display: none;
}
.loc__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Google's map tiles are light; knock them back to sit in a dark page. */
  filter: grayscale(0.35) invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.92);
  transition: filter 0.5s var(--ease);
}
.loc__map:hover iframe {
  filter: none;
}
.loc__pin {
  position: absolute;
  z-index: 2;
  left: var(--s4);
  bottom: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: 0;
  background: rgba(6, 12, 22, 0.85);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 51, 64, 0.34);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.loc__pin svg {
  width: 15px;
  height: 15px;
  color: var(--red);
}
.loc__body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: flex-start;
  text-align: left;
}
.loc__body h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.loc__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: 100%;
  margin-block: var(--s2);
}
.loc__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.loc__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.loc__row svg {
  width: 19px;
  height: 19px;
  color: var(--red);
  margin-top: 5px;
}
.loc__row b {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 800;
}
.loc__row span {
  color: var(--text);
}

/* ==========================================================================
   Footer phone — sits between the footer columns and the credit line
   ========================================================================== */
.fone {
  display: block;
  text-align: center;
  padding-block: clamp(var(--s5), 5vw, var(--s7));
  border-bottom: 1px solid var(--line);
}
.fone small {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 800;
  margin-bottom: var(--s2);
}
.fone strong {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  display: block;
  transition: color 0.35s var(--ease), transform 0.4s var(--ease);
}
.fone:hover strong {
  color: var(--red);
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsive — new sections
   ========================================================================== */
@media (max-width: 1180px) {
  .creds {
    display: none;
  }
  .nav--left {
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  /* Even 2x2 grid, each item stacked, rather than a ragged wrap. */
  .trust__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;   /* items differ in line count; align their tops */
    gap: var(--s4) var(--s3);
    padding-block: var(--s5);
  }
  .trust__item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    text-align: center;
    font-size: 0.76rem;
    white-space: normal;
    line-height: 1.35;
  }
  .trust__item b {
    font-size: 0.95rem;
  }
  a.trust__item {
    flex-direction: row;
    gap: 6px;
  }
}

@media (max-width: 1040px) {
  .story,
  .loc,
  .reel {
    grid-template-columns: 1fr;
  }
  .story__media,
  .loc__media {
    aspect-ratio: 16 / 10;
  }
  .vcard--tall {
    min-height: 300px;
  }
  .flow {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--s5);
  }
  .flow::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .socials {
    right: 62px;
  }
  .social {
    width: 30px;
    height: 30px;
  }
  .social svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 620px) {
  .svc-showcase {
    grid-template-columns: 1fr;
  }
  .scard--wide {
    grid-column: span 1;
    min-height: 320px;
  }
  .scard {
    min-height: 300px;
  }
  .flow {
    grid-template-columns: 1fr;
  }
  .signoff {
    gap: var(--s5);
  }
  .socials {
    display: none;
  }
}