/* ==========================================================================
   ARNOS CUSTOMZZ - Croydon
   Graphite, chrome and wrap-red. Dark, precise, showroom-lit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --ink:        #0B0A0D;
  --ink-deep:   #050407;
  --surface:    #131217;
  --surface-2:  #1A1920;
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  /* Chrome - sampled from the logo */
  --chrome-hi:  #F6F6F4;
  --chrome:     #B0B0AE;
  --chrome-mid: #8A8A8C;
  --chrome-lo:  #6A6A6E;

  /* Ink on dark */
  --text:   #F2F2F0;
  --muted:  #A9A9AD;
  --faint:  #75757A;

  /* Wrap red - sampled from the logo mark and the final wrap frame */
  --red-bright: #D92A21;
  --red:        #C21419;
  --red-deep:   #A01213;
  --red-ox:     #5A0102;
  --red-glow:   rgba(217,42,33,.42);
  --red-soft:   rgba(194,20,25,.16);

  /* Type */
  --f-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-eyebrow: clamp(.66rem, .6rem + .28vw, .78rem);
  --fs-body:    clamp(1rem, .96rem + .18vw, 1.09rem);
  --fs-lead:    clamp(1.08rem, .98rem + .5vw, 1.34rem);
  --fs-h3:      clamp(1.25rem, 1.08rem + .8vw, 1.72rem);
  --fs-h2:      clamp(2.1rem, 1.28rem + 3.5vw, 4.5rem);
  --fs-h1:      clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem);

  /* Space */
  --pad-x:     clamp(1.15rem, 4.4vw, 4.5rem);
  --container: 1360px;
  --sec-y:     clamp(4.5rem, 10vh, 9.5rem);

  /* Motion */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.7,0,.2,1);
  --t-fast: .26s;
  --t-med:  .5s;
  --t-slow: .9s;

  --r:    12px;
  --r-lg: 20px;

  --hdr-h: 74px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  color-scheme: dark;
  scroll-padding-top: calc(var(--hdr-h) + 12px);
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }

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

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

.skip {
  position: fixed;
  top: -100px; left: 12px;
  z-index: 400;
  padding: .7rem 1.1rem;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  transition: top var(--t-fast) var(--e-out);
}
.skip:focus { top: 12px; }

/* Global film grain - 3% opacity, keeps the dark surfaces from banding.
   inset:0 not -50%: an oversized fixed layer is four times the compositing
   area for no visual gain. Dropped entirely on phones, where it costs more
   than it is worth on a small dense screen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 768px), (pointer: coarse) {
  body::after { display: none; }
}

/* --------------------------------------------------------------------------
   3. Type utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 2em;
  height: 1px;
  background: var(--red);
  flex: none;
}
.eyebrow--light { color: rgba(255,255,255,.86); }
.eyebrow--light::before { background: rgba(255,255,255,.7); }

.h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: .95;
  letter-spacing: -.018em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2--light { color: #fff; }

/* Chrome fill - the logo's brushed-silver gradient, applied to display type */
.chrome {
  display: inline-block;
  background: linear-gradient(178deg,
      #FFFFFF 0%, #EDEDEB 16%, #A6A6AA 38%,
      #FBFBF9 52%, #C6C6C4 68%, #85858A 86%, #DCDCDA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
@supports not (background-clip: text) { .chrome { color: var(--chrome-hi); -webkit-text-fill-color: currentColor; } }

.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 30px -14px var(--red-glow);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .62s var(--e-out);
}
/* Touch fires :hover on tap and keeps it until you tap elsewhere, so anything
   that moves is gated to real pointers. Colour-only shifts are left alone. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 40px -16px var(--red-glow); }
  .btn:hover::before { transform: translateX(110%); }
}
.btn:active { transform: translateY(0); }

.btn--sm { padding: .68rem 1.15rem; font-size: .88rem; }

.btn--ghost {
  background: rgba(255,255,255,.03);
  border-color: var(--line-2);
  color: var(--text);
  box-shadow: none;
}
@media (hover: hover) { .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.34); box-shadow: none; } }

.btn--light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.8);
}
@media (hover: hover) { .btn--light:hover { background: #fff; color: var(--red-deep); } }

.btn--wa { --btn-bg: #1FA855; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 32px -16px rgba(31,168,85,.7); }
@media (hover: hover) { .btn--wa:hover { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 18px 40px -16px rgba(31,168,85,.8); } }

/* --------------------------------------------------------------------------
   5. Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .82s var(--e-out), transform .82s var(--e-out);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; will-change: auto; }

/* --------------------------------------------------------------------------
   6. Intro - Video 1
   -------------------------------------------------------------------------- */
body.intro-lock { overflow: hidden; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: #000;
  overflow: hidden;
  transition: opacity .8s var(--e-out), visibility .8s;
}
.intro[hidden] { display: none; }
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.intro__video,
.intro__bridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro__bridge {
  background: url("/assets/img/wrap-poster.webp?v=b666d702") center bottom / cover no-repeat;
  opacity: 0;
  transition: opacity .7s linear;
}
.intro__bridge.is-visible { opacity: 1; }

.intro__brand::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * clamp(4.5rem, 12vh, 8rem) - 2rem);
  transform: translateX(-50%);
  width: 100vw;
  height: 320%;
  min-height: 48vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(3,2,4,0) 0%, rgba(3,2,4,.38) 34%, rgba(3,2,4,.72) 66%, rgba(3,2,4,.9) 100%);
}
.intro__brand {
  position: absolute;
  isolation: isolate;
  left: 50%;
  bottom: clamp(4.5rem, 12vh, 8rem);
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  width: min(90vw, 460px);
  opacity: 0;
  animation: introBrand 1.5s var(--e-out) .45s forwards;
}
.intro__logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.75));
}
.intro__tag {
  margin-top: .9rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  padding-left: .46em;
}
@keyframes introBrand {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    filter: blur(0); }
}

.intro__skip,
.intro__sound {
  position: absolute;
  z-index: 4;
  bottom: clamp(1.1rem, 3vh, 2rem);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(10,10,12,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  opacity: 0;
  animation: fadeIn .7s var(--e-out) 1.5s forwards;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.intro__skip  { right: clamp(1.1rem, 3vw, 2.2rem); }
.intro__sound { left:  clamp(1.1rem, 3vw, 2.2rem); }
@media (hover: hover) { .intro__skip:hover, .intro__sound:hover { background: rgba(194,20,25,.7); border-color: transparent; color: #fff; } }

.intro__soundIcon {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  box-shadow: 0 0 0 0 rgba(217,42,33,.6);
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.intro__sound[aria-pressed="true"] .intro__soundIcon {
  background: var(--red-bright);
  box-shadow: 0 0 0 4px rgba(217,42,33,.22);
}

@keyframes fadeIn { to { opacity: 1; } }

.intro__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.1);
  z-index: 4;
}
.intro__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  box-shadow: 0 0 14px var(--red-glow);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .7s var(--e-out), transform .7s var(--e-out),
              background-color var(--t-med), border-color var(--t-med), backdrop-filter var(--t-med);
  border-bottom: 1px solid transparent;
}
body.revealed .hdr { opacity: 1; transform: none; }
.hdr.is-scrolled {
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* The opening frame has a bright hex ceiling right where the nav sits, so the
   unscrolled header carries its own gradient well past its own height. */
.hdr::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: auto;
  height: 220%;
  z-index: -1;          /* behind the nav, above the page */
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,3,5,.94) 0%, rgba(4,3,5,.82) 30%, rgba(4,3,5,.5) 58%, rgba(4,3,5,.18) 82%, transparent 100%);
  opacity: 1;
  transition: opacity var(--t-med);
}
.hdr.is-scrolled::after { opacity: 0; }

.hdr__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
}

.hdr__brand { flex: none; }
.hdr__brand img {
  width: clamp(122px, 12vw, 158px);
  height: auto;
  transition: opacity var(--t-fast);
}
.hdr__brand:hover img { opacity: .82; }

.hdr__nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  margin-inline: auto;
}
.hdr__nav a {
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .35rem 0;
  transition: color var(--t-fast);
}
.hdr__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--e-out);
}
.hdr__nav a:hover { color: #fff; }
.hdr__nav a:hover::after,
.hdr__nav a.is-active::after { transform: scaleX(1); }
.hdr__nav a.is-active { color: #fff; }

.hdr__act { display: flex; align-items: center; gap: .8rem; flex: none; }
.hdr__tel {
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted);
  transition: color var(--t-fast);
}
.hdr__tel:hover { color: #fff; }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform .35s var(--e-out), opacity .2s;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* Mobile nav */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(6,6,8,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  padding: var(--hdr-h) var(--pad-x) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s var(--e-out), visibility .42s;
}
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav { overscroll-behavior: contain; overflow-y: auto; }
.mnav nav { display: flex; flex-direction: column; gap: .2rem; }
.mnav nav a {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 11vw, 3.2rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--chrome);
  transform: translateY(14px);
  opacity: 0;
  transition: color var(--t-fast), transform .5s var(--e-out), opacity .5s var(--e-out);
}
.mnav.is-open nav a { transform: none; opacity: 1; }
.mnav.is-open nav a:nth-child(1) { transition-delay: .06s; }
.mnav.is-open nav a:nth-child(2) { transition-delay: .11s; }
.mnav.is-open nav a:nth-child(3) { transition-delay: .16s; }
.mnav.is-open nav a:nth-child(4) { transition-delay: .21s; }
.mnav.is-open nav a:nth-child(5) { transition-delay: .26s; }
.mnav nav a:hover, .mnav nav a:active { color: #fff; }
.mnav__foot { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.mnav__tel { font-family: var(--f-mono); font-size: .9rem; letter-spacing: .1em; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Stage - scroll-scrubbed wrap sequence (Video 2)
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  height: 330vh;
  background: #000;
}
.stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.stage__poster,
.stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.stage__canvas {
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s linear;
  z-index: 1;
  transform: translateZ(0);   /* its own compositor layer, so scrolling the
                                 sticky never repaints what is behind it */
}
.stage__poster { z-index: 0; }
/* .stage__poster is a <picture>; object-fit belongs on the <img> inside it */
.stage__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* Scrim that ramps in as the sequence lands on the final red frame, so the
   stage title reads over the bright top of the wrap. It falls to ZERO at the
   bottom edge: that edge is the seam into #services, and the frame has to meet
   the synthesised continuation raw-pixel to raw-pixel. */
.stage__vig {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: opacity;       /* driven by --p on every scrubbed frame */
  opacity: calc(var(--p, 0) * var(--p, 0));
  background:
    linear-gradient(180deg,
      rgba(6,4,5,.66) 0%,
      rgba(6,4,5,.34) 28%,
      rgba(6,4,5,.20) 55%,
      rgba(6,4,5,.09) 80%,
      rgba(6,4,5,0)   100%);
}

.stage__lede {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(4.6rem, 10.5vh, 7.5rem);
  transform: translateX(-50%) translateY(calc(var(--p, 0) * -60px));
  width: 100%;
  max-width: var(--container);
  padding-inline: var(--pad-x);
  text-align: center;
  opacity: var(--ledeO, 1);
  pointer-events: var(--ledePE, auto);
}
/* Cinematic lower third. Anchored to the viewport bottom rather than the copy,
   so it reads as a graded frame instead of a box behind the words - and it
   fades out with the copy, so it never touches the seam at the other end. */
.stage__lede::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * clamp(4.6rem, 10.5vh, 7.5rem));
  transform: translateX(-50%);
  width: 100vw;
  height: 190%;
  min-height: 62vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(4,3,5,0) 0%, rgba(4,3,5,.34) 26%, rgba(4,3,5,.68) 54%,
      rgba(4,3,5,.86) 78%, rgba(4,3,5,.92) 100%);
}
.stage__h1 {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: .88;
  letter-spacing: -.024em;
  text-transform: uppercase;
  margin: 0;
}
.stage__h1 span { display: block; }
.stage__sub {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.8);
  text-wrap: balance;
}
.stage__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.7rem; }

/* The line that lands on the red */
.stage__title {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--pad-x);
  gap: 1.5rem;
  opacity: var(--titleO, 0);
  transform: translateY(calc((1 - var(--titleO, 0)) * 34px));
  pointer-events: none;
}
.stage__titleH {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 6rem);
  line-height: .9;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 10px 60px rgba(0,0,0,.55);
}

.stage__cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
  opacity: var(--cueO, 1);
  transition: opacity .3s linear;
  pointer-events: none;
  padding-left: .38em;
}
.stage__cue i {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  position: relative;
  overflow: hidden;
}
.stage__cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--red-bright), transparent);
  animation: cueRun 2.1s var(--e-io) infinite;
}
@keyframes cueRun { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

.stage__rail {
  position: absolute;
  z-index: 4;
  left: clamp(.9rem, 2.4vw, 2.1rem);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: min(240px, 30vh);
  background: rgba(255,255,255,.13);
  border-radius: 2px;
  overflow: hidden;
  opacity: var(--railO, 0);
  transition: opacity .4s linear;
}
.stage__rail i {
  display: block;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 0 12px var(--red-glow);
}

/* --------------------------------------------------------------------------
   9. Services - printed on the wrap
   -------------------------------------------------------------------------- */
.svcs {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vh, 7rem) var(--sec-y);
  overflow: hidden;
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #190105 0%, #190105 62%, #120108 84%, var(--ink-deep) 100%);
}
/* resolves the wrap into the dark before the studio section */
.svcs::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 22vh, 260px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,4,7,0), var(--ink-deep));
}

/* The wrap keeps going.
   `red-continue.webp` is synthesised by extrapolating the final frame's own
   per-column gradient past its last row, so this strip's first pixel row IS
   the frame's last pixel row. --sw/--sh are the live sticky-canvas box (set in
   script.js); reproducing its cover-fit width here makes the join exact at any
   viewport, and the vw/vh fallback keeps it close without JS. */
.svcs__cont {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(100%, 2200px);
  z-index: -2;
  background-image: url("/assets/img/red-continue.webp?v=e990ffec");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: max(100vw, calc(100vh * 1.787709)) 100%;
  background-size: max(var(--sw, 100vw), calc(var(--sh, 100vh) * 1.787709)) 100%;
}
.svcs__cont::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,4,5,0) 0%, rgba(6,4,5,.08) 22%, rgba(6,4,5,.14) 60%, rgba(6,4,5,.20) 100%);
}

.svcs__in { position: relative; }

.svcs__head { max-width: 62ch; }
.svcs__head .h2 { margin-top: 1.15rem; }
.svcs__lede {
  margin-top: 1.3rem;
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.76);
  max-width: 52ch;
}

.svcs__grid {
  display: grid;
  grid-template-columns: 1fr;   /* 9 items - 3 x 3 at desktop, never an orphan */
  gap: 1px;
  margin-top: clamp(2.6rem, 6vh, 4.5rem);
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.svc {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  /* no backdrop-filter here: these sit on a smooth gradient, so a blur of it
     is visually identical to the gradient - and nine live blur layers is one
     of the most expensive things you can hand Safari on a scrolling page */
  background: rgba(9,3,5,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background-color .45s var(--e-out);
  isolation: isolate;
  min-height: 250px;
}
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, rgba(217,42,33,.24), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--e-out);
}
@media (hover: hover) {
  .svc:hover { background: rgba(9,3,5,.22); }
  .svc:hover::before { opacity: 1; }
}

.svc__no {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.46);
}
.svc__h {
  margin-top: .85rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: #fff;
}
.svc__p {
  margin-top: .75rem;
  font-size: .96rem;
  line-height: 1.62;
  color: rgba(255,255,255,.76);
}
.svc__tags {
  margin-top: 1.05rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* The whole card is the control. The button stays inside the <h3> so the
   heading survives, and a stretched pseudo gives it the card's hit area. */
.svc__btn {
  font: inherit;
  color: inherit;
  /* form controls get text-transform: none from the UA sheet, so the heading's
     uppercase has to be handed back explicitly */
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  padding: 0;
}
.svc__btn::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.svc__btn:focus-visible { outline: none; }
.svc:has(.svc__btn:focus-visible) { outline: 2px solid var(--red-bright); outline-offset: 2px; }

.svc__more {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 1.15rem;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  transition: color var(--t-fast), gap var(--t-fast);
}
.svc__more::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .4s var(--e-out);
}
@media (hover: hover) { .svc:hover .svc__more { color: #fff; gap: .8em; } }
.svc.is-open .svc__more { color: var(--red-bright); }
.svc.is-open .svc__more::after { transform: rotate(-135deg) translate(-2px, -2px); }
.svc.is-open { background: rgba(9,3,5,.16); }
.svc.is-open::before { opacity: 1; }

/* The detail lives in the card until JS moves it into the drawer, so it is in
   the DOM for search engines and readable with no JS at all.
   Below 640px the grid is a single column, so the shared drawer would sit under
   all nine cards - there the detail stays put and the card expands instead. */
.svcd {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
html.js .svc .svcd { display: none; }
html.js .svc.is-open > .svcd {
  display: grid;
  overflow: hidden;
  height: 0;
  transition: height .5s var(--e-out);
}

/* ---------------- the shared drawer ---------------- */
.svcDrawer {
  position: relative;
  margin-top: 1px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  background: rgba(9,3,5,.66);
  overflow: hidden;
  height: 0;
  transition: height .5s var(--e-out);
}
.svcDrawer[hidden] { display: none; }
.svcDrawer__in { padding: clamp(1.6rem, 3.4vw, 2.8rem); }

.svcDrawer__close {
  position: absolute;
  top: clamp(.9rem, 2vw, 1.4rem);
  right: clamp(.9rem, 2vw, 1.4rem);
  z-index: 3;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.svcDrawer__close::before,
.svcDrawer__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 1.5px;
  margin: -.75px 0 0 -7px;
  background: #fff;
}
.svcDrawer__close::before { transform: rotate(45deg); }
.svcDrawer__close::after  { transform: rotate(-45deg); }
@media (hover: hover) { .svcDrawer__close:hover { background: var(--red); border-color: transparent; transform: rotate(90deg); } }

.svcd__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.6rem;
  padding-right: 3.4rem;
}

.svcDrawer .svcd { margin-top: 0; }
@media (min-width: 860px) {
  .svcDrawer .svcd { grid-template-columns: 1.35fr 1fr; }
  .svcDrawer .svcd__shots { grid-column: 1 / -1; }
}

.svcd__copy p { color: rgba(255,255,255,.82); }
.svcd__copy p + p { margin-top: .9rem; }
.svcd__note {
  margin-top: 1.4rem;
  padding: .95rem 1.15rem;
  border-left: 2px solid var(--red);
  background: rgba(255,255,255,.035);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .95rem;
  color: rgba(255,255,255,.72) !important;
}

.svcd__side h4 {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.svcd__list { display: flex; flex-direction: column; }
.svcd__list li {
  position: relative;
  padding: .6rem 0 .6rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .95rem;
  color: rgba(255,255,255,.8);
}
.svcd__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.svcd__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.svcd__shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(.6rem, 1.2vw, .9rem);
}
.svcd__shot {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.svcd__shot .tile__ph,
.svcd__shot img {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.svcd__shot span {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

@media (min-width: 640px)  { .svcs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svcs__grid { grid-template-columns: repeat(3, 1fr); } }

.svcs__foot {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  background: rgba(10,5,7,.4);
}
.svcs__foot p { font-size: var(--fs-lead); color: #fff; max-width: 44ch; text-wrap: balance; }

/* --------------------------------------------------------------------------
   10. Studio - Image Main
   -------------------------------------------------------------------------- */
/* ------------------------------------------------------------- wrap preview
   Embedded Tint Wrap Tester (see /twt.js).
   The iframe reports its own height by postMessage and the loader animates it,
   so NOTHING here may constrain height - only the chrome around it. `.svcs`
   above fades out to --ink-deep, so this section starts on the same colour and
   the join stays invisible. */
.viz {
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
  position: relative;
  isolation: isolate;
  padding-block: var(--sec-y);
  background: var(--ink-deep);
  overflow: hidden;
}
.viz__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.viz__lede {
  max-width: 62ch;
  color: rgba(242,242,240,.72);
  font-size: 1.02rem;
  line-height: 1.68;
}
.viz__frame {
  margin-top: clamp(2.2rem, 5vh, 3.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;              /* clips the iframe to the radius */
  background: var(--ink);
  box-shadow: 0 30px 90px -40px rgba(0,0,0,.9);
}
.viz__frame tint-wrap-tester { display: block; }
.viz__fallback {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  margin: 0;
  color: rgba(242,242,240,.8);
}
.viz__fallback a { color: var(--chrome-hi); border-bottom: 1px solid var(--red); }

.show {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
  position: relative;
  isolation: isolate;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 12vh, 9rem);
  overflow: hidden;
}
.show__bg { position: absolute; inset: 0; z-index: -3; }
.show__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 46%; }
.show__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5,4,7,.10) 0%, rgba(5,4,7,.24) 30%, rgba(5,4,7,.74) 52%, rgba(5,4,7,.92) 72%, rgba(5,4,7,.95) 100%),
    linear-gradient(180deg, rgba(5,4,7,.78) 0%, rgba(5,4,7,.15) 22%, transparent 55%, rgba(5,4,7,.9) 100%);
}
.show__spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--e-out);
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 50%), rgba(217,42,33,.13), transparent 70%);
  mix-blend-mode: screen;
}
@media (hover: hover) { .show:hover .show__spot { opacity: 1; } }

.show__in { display: flex; justify-content: flex-end; }
.show__copy { width: min(100%, 620px); }
.show__copy .h2 { margin-top: 1.15rem; }
.show__lede {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 52ch;
}
.show__lede--sm { font-size: 1rem; color: var(--muted); }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin-top: 2.3rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.stats li { display: flex; flex-direction: column; gap: .2rem; }
.stats b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--chrome-hi);
  font-variant-numeric: tabular-nums;
}
.stats span {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}
.show__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.3rem; }

/* --------------------------------------------------------------------------
   11. Work - Smoke 1
   -------------------------------------------------------------------------- */
.work {
  content-visibility: auto;
  contain-intrinsic-size: auto 1300px;
  position: relative;
  isolation: isolate;
  padding-block: var(--sec-y);
  background: var(--ink);
  overflow: hidden;
}
.work__bg { position: absolute; inset: 0; z-index: -2; }
.work__bg img {
  width: 100%;
  height: min(96vh, 1000px);
  object-fit: cover;
  object-position: center top;
  opacity: .92;
}
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(11,10,13,.35) 34%, var(--ink) 62%);
}

.work__head { max-width: 60ch; }
.work__head .h2 { margin-top: 1.1rem; }
.work__lede { margin-top: 1.25rem; font-size: var(--fs-lead); color: var(--muted); max-width: 48ch; }
.work__lede a { color: var(--chrome-hi); border-bottom: 1px solid var(--red); padding-bottom: 1px; transition: color var(--t-fast); }
.work__lede a:hover { color: var(--red-bright); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
}
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; grid-auto-flow: row dense; }
  .tile--tall { grid-row: span 2; }
  .tile--wide { grid-column: span 2; }
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 250px;
  isolation: isolate;
  transition: border-color .45s var(--e-out), transform .55s var(--e-out);
}
@media (hover: hover) { .tile:hover { border-color: rgba(255,255,255,.26); transform: translateY(-4px); } }

.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Placeholder state - deliberate, not broken. Swap the div for an <img>. */
.tile__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    linear-gradient(150deg, #191820 0%, #121118 52%, #0D0C11 100%);
}
.tile__ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.05) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: shimmer 4.6s var(--e-io) infinite;
}
.tile__ph::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}
.tile__ph span {
  position: relative;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding-left: .32em;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

.tile__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.35rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  background: linear-gradient(180deg, transparent, rgba(5,4,7,.9));
}
.tile__meta b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #fff;
}
.tile__meta span {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.work__foot { margin-top: clamp(2rem, 5vh, 3rem); display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   12. Reviews - Smoke 2
   -------------------------------------------------------------------------- */
.revs {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
  position: relative;
  isolation: isolate;
  padding-block: var(--sec-y);
  background: var(--ink-deep);
  overflow: hidden;
}
.revs__bg { position: absolute; inset: 0; z-index: -2; }
.revs__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.revs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(76% 66% at 50% 46%, transparent 26%, rgba(5,4,7,.62) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 74%, var(--ink) 100%);
}

.revs__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }

.revs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.3rem);
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
}

.rev {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(26,25,32,.9), rgba(10,9,13,.92));
  isolation: isolate;   /* so the quote watermark can sit under the text */
  transition: border-color .45s var(--e-out), transform .55s var(--e-out);
}
@media (hover: hover) { .rev:hover { border-color: rgba(255,255,255,.2); transform: translateY(-4px); } }

.rev__stars { color: var(--red-bright); letter-spacing: .18em; font-size: 1.02rem; }
.rev blockquote p {
  font-size: 1.02rem;
  line-height: 1.68;
  color: rgba(242,242,240,.9);
}
.rev blockquote { position: relative; }
/* The decorative opening quote was REMOVED. It was absolutely positioned behind
   the first lines of the blockquote at 4.4rem, and at that size it showed through
   the text as a smudge over a word - visible on both testimonials. No placement is
   safe here: the cards are a fluid grid, the quotes are different lengths, and any
   position that is clear at one breakpoint collides at another. The stars, the rule
   and the attribution already read as a testimonial without it. */
.rev footer { margin-top: auto; display: flex; flex-direction: column; gap: .12rem; padding-top: .5rem; }
.rev footer b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
}
.rev footer span {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}

.rev--score {
  background: linear-gradient(165deg, rgba(160,18,19,.34), rgba(10,9,13,.9));
  border-color: rgba(217,42,33,.34);
  align-items: flex-start;
}
.rev__score {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 8vw, 5rem);
  line-height: .86;
  letter-spacing: -.03em;
  color: var(--chrome-hi);
  font-variant-numeric: tabular-nums;
}
.rev__scoreP { color: rgba(255,255,255,.8); font-size: 1rem; }
.rev__scoreP b { color: #fff; }
.rev__link {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.rev__link:hover { color: var(--red-bright); border-color: var(--red-bright); }

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding-block: var(--sec-y);
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(160,18,19,.2), transparent 62%),
    var(--ink);
  border-top: 1px solid var(--line);
}
.cta__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) { .cta__in { grid-template-columns: 1fr 1fr; } }

.cta__copy .h2 { margin-top: 1.15rem; }
.cta__lede { margin-top: 1.35rem; font-size: var(--fs-lead); color: var(--muted); max-width: 44ch; }

.cta__list {
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.cta__list li {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) {
  .cta__list { grid-template-columns: repeat(2, 1fr); }
  .cta__list li { padding-inline: clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--line); }
  .cta__list li:first-child { padding-left: 0; border-left: 0; }
  .cta__list li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (min-width: 1040px) {
  .cta__list { grid-template-columns: repeat(4, 1fr); }
  .cta__list li { border-bottom: 0; }
  .cta__list li:nth-child(3) { padding-left: clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--line); }
}
.cta__k {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}
.cta__v { font-size: 1.02rem; line-height: 1.5; color: var(--text); transition: color var(--t-fast); }
a.cta__v:hover { color: var(--red-bright); }

/* Quote form */
.qf {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(26,25,32,.9), rgba(10,9,13,.92));
}
.qf__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .qf__row { grid-template-columns: 1fr 1fr; } }

.fld { display: flex; flex-direction: column; gap: .45rem; }
.fld > span {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}
.fld > span i { font-style: normal; opacity: .6; letter-spacing: .12em; }
.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: .82rem .95rem;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: rgba(5,4,7,.6);
  color: var(--text);
  font-size: .98rem;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.fld textarea { resize: vertical; min-height: 92px; }
.fld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.fld select option { background: #14131a; color: var(--text); }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255,255,255,.28); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(5,4,7,.85);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.fld input.is-bad, .fld select.is-bad { border-color: var(--red-bright); }

.qf__err {
  margin: 0;
  font-size: .88rem;
  color: var(--red-bright);
}
.qf__act { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .3rem; }
.qf__note { font-size: .78rem; color: var(--faint); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.ft {
  position: relative;
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
  padding-top: clamp(3.2rem, 8vh, 5.5rem);
}
.ft::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red) 32%, var(--red-bright) 50%, var(--red) 68%, transparent);
  opacity: .7;
}

.ft__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4vw, 3.4rem);
  padding-bottom: clamp(2.6rem, 6vh, 4rem);
}
@media (min-width: 700px)  { .ft__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ft__top { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.ft__brand img { width: 176px; height: auto; }
.ft__brand p { margin-top: 1.2rem; color: var(--faint); font-size: .95rem; max-width: 42ch; }

.soc { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.soc a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) { .soc a:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); transform: translateY(-2px); } }
.soc svg { width: 17px; height: 17px; }

.ft__col h3 {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.1rem;
}
.ft__col ul { display: flex; flex-direction: column; gap: .55rem; }
.ft__col a, .ft__col address, .ft__hrs { color: var(--muted); font-size: .95rem; }
.ft__col a { transition: color var(--t-fast); }
.ft__col a:hover { color: var(--red-bright); }
.ft__col address { line-height: 1.7; }
.ft__hrs { margin-top: 1.1rem; line-height: 1.7; }
.ft__hrs b { color: var(--text); }
.ft__tel, .ft__mail { display: block; margin-top: 1.1rem; }
.ft__tel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .01em;
  color: var(--chrome-hi) !important;
}
.ft__mail { font-size: .92rem; word-break: break-word; }

.ft__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.4rem;
  padding-bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + 1.4rem));
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) { .ft__bot { padding-bottom: 7rem; } }
.ft__bot p { font-size: .82rem; color: var(--faint); }
.ft__legal { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.ft__legal a, .ft__legal button {
  font-size: .82rem;
  color: var(--faint);
  transition: color var(--t-fast);
}
.ft__legal a:hover, .ft__legal button:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   15. Cookie banner
   -------------------------------------------------------------------------- */
.cc {
  position: fixed;
  left: clamp(.7rem, 2vw, 1.4rem);
  right: clamp(.7rem, 2vw, 1.4rem);
  bottom: clamp(.7rem, 2vw, 1.4rem);
  z-index: 210;
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1.05rem, 2.4vw, 1.4rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: rgba(12,11,15,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.9);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
}
.cc[hidden] { display: none; }
.cc.is-visible { opacity: 1; transform: none; }
.cc__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; }
.cc__h { font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.cc__b { margin-top: .3rem; font-size: .88rem; color: var(--muted); max-width: 56ch; }
.cc__b a { color: var(--text); border-bottom: 1px solid var(--red); }
.cc__act { display: flex; gap: .55rem; flex-wrap: wrap; }
@media (min-width: 900px) {
  /* anchored left so it never lands on the hero buttons, and lifted clear of
     the WhatsApp button now sharing that corner */
  .cc { right: auto; max-width: 460px; margin-inline: 0; left: 6rem; }
  .cc__in { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .cc__act { width: 100%; }
  .cc__act .btn { flex: 1; }
}
@media (max-width: 620px) { .cc { right: clamp(.7rem, 2vw, 1.4rem); bottom: 7rem; } .cc__act { width: 100%; } .cc__act .btn { flex: 1; } }

/* --------------------------------------------------------------------------
   16. Legal pages
   -------------------------------------------------------------------------- */
.legal { padding-top: calc(var(--hdr-h) + clamp(3rem, 9vh, 6rem)); padding-bottom: var(--sec-y); }
.legal__head { max-width: 60ch; }
.legal__head .h2 { margin-top: 1.1rem; }
.legal__date { margin-top: 1rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.legal__body { max-width: 72ch; margin-top: clamp(2.4rem, 6vh, 3.6rem); }
.legal__body h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: -.008em;
  color: var(--chrome-hi);
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.legal__body h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: var(--text); margin-top: 1.7rem; }
.legal__body p, .legal__body li { color: var(--muted); margin-top: .9rem; }
.legal__body ul { list-style: disc; padding-left: 1.3rem; margin-top: .5rem; }
.legal__body li { margin-top: .5rem; }
.legal__body a { color: var(--text); border-bottom: 1px solid var(--red); transition: color var(--t-fast); }
.legal__body a:hover { color: var(--red-bright); }
.legal__body table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .92rem; }
.legal__body th, .legal__body td { text-align: left; padding: .8rem .9rem; border: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.legal__body th { color: var(--text); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; background: rgba(255,255,255,.03); }
.legal__wrap { overflow-x: auto; }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 3rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast);
}
.legal__back:hover { color: var(--red-bright); }

body.legal-page .hdr { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hdr__nav { display: none; }
  .burger { display: flex; }
  .hdr__act { margin-left: auto; }
  .hdr__tel { display: none; }
}

@media (max-width: 768px) {
  :root { --hdr-h: 64px; }
  /* moved out to its own query - see "portrait frame set" below */
  .stage { height: 280vh; }
  .stage__rail { display: none; }
  .stage__lede { bottom: clamp(3rem, 10vh, 5rem); }
  .stage__cta .btn { flex: 1 1 auto; }
  .show__in { justify-content: flex-start; }
  .show__bg img { object-position: 46% 56%; }
  .show__scrim {
    background:
      linear-gradient(180deg, rgba(5,4,7,.74) 0%, rgba(5,4,7,.4) 28%, rgba(5,4,7,.66) 60%, rgba(5,4,7,.95) 100%);
  }
  .svcs__foot { flex-direction: column; align-items: flex-start; }
  .revs__head { text-align: left; align-items: flex-start; }
}

/* iOS zooms the whole page when a focused field is under 16px. Everything
   else about the form is unchanged; this is the one size that is not a
   preference. */
@media (max-width: 768px) {
  .fld input, .fld select, .fld textarea { font-size: 16px; }
}

/* Phone held sideways: the stage is only ~390px tall, so the hero has to give
   up its breathing room or the buttons end up off-screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .stage { height: 240vh; }
  .stage__lede { bottom: 1.1rem; }
  .stage__h1 { font-size: clamp(1.7rem, 5.4vh, 2.6rem); }
  .stage__sub { display: none; }
  .stage__cta { margin-top: .9rem; }
  .stage__cue { display: none; }
  .stage__titleH { font-size: clamp(1.7rem, 6vh, 3rem); }
  .intro__brand { bottom: 2.6rem; width: min(58vw, 320px); }
  .intro__tag { margin-top: .5rem; }
}

@media (max-width: 560px) {
  .btn { padding: .85rem 1.35rem; font-size: .94rem; }
  .stage__sub { font-size: 1rem; }
  .stage__cue { display: none; }            /* the buttons already sit here */
  .stage__lede { bottom: clamp(2.6rem, 7vh, 4rem); }
  .intro__skip, .intro__sound { font-size: .62rem; padding: .5rem .85rem; }
  .stats { gap: 1.2rem 1.8rem; }
  /* the tracked-out eyebrow is wider than a phone - let it breathe and wrap */
  .eyebrow {
    flex-wrap: wrap;
    justify-content: inherit;
    letter-spacing: .2em;
    font-size: .62rem;
    row-gap: .3em;
  }
  .eyebrow::before { width: 1.4em; }
  .intro__tag { letter-spacing: .3em; font-size: .62rem; padding-left: .3em; }
}

/* Portrait frame set. Must stay in step with isNarrow() in script.js: the
   canvas draws a 2:3 crop on these viewports, so the Services continuation
   has to be the matching crop with the matching aspect or the join breaks. */
@media (max-aspect-ratio: 3/4) {
  .svcs__cont {
    background-image: url("/assets/img/red-continue-mobile.webp?v=eb679623");
    background-size: max(100vw, calc(100vh * 0.666667)) 100%;
    background-size: max(var(--sw, 100vw), calc(var(--sh, 100vh) * 0.666667)) 100%;
  }
  .intro__bridge { background-image: url("/assets/img/wrap-poster-mobile.webp?v=c335d00b"); }
}

/* --------------------------------------------------------------------------
   18. Reduced motion / no JS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stage { height: 100vh; }
  .stage__vig { opacity: 1; }
  .stage__cue { display: none; }
  .tile__ph::before { animation: none; }
  .svcDrawer,
  html.js .svc.is-open > .svcd { transition: none; }
}

html.no-js .intro { display: none; }
html.no-js .hdr,
html.no-js .reveal { opacity: 1; transform: none; }
html.no-js .stage { height: 100vh; }
html.no-js .stage__canvas { display: none; }
html.no-js .stage__vig { opacity: 1; }
html.no-js .stage__title,
html.no-js .stage__cue { display: none; }

@media print {
  .intro, .hdr, .mnav, .cc, .stage { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   19. Service pages
   -------------------------------------------------------------------------- */
.svcp {
  padding-top: calc(var(--hdr-h) + clamp(1.6rem, 4vh, 2.6rem));
  padding-bottom: var(--sec-y);
  background:
    radial-gradient(70% 44% at 12% 0%, rgba(160,18,19,.22), transparent 62%),
    var(--ink);
}

.crumb { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.crumb li {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.crumb li + li::before { content: "/"; margin-right: .75rem; color: rgba(255,255,255,.22); }
.crumb a { color: var(--muted); transition: color var(--t-fast); }
.crumb a:hover { color: var(--red-bright); }
.crumb [aria-current] { color: var(--text); }

.svcp__head { max-width: 60ch; }
.svcp__head .h2 { margin-top: 1.1rem; }
.svcp__lede {
  margin-top: 1.3rem;
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 52ch;
  text-wrap: balance;
}
.svcp__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.svcp__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(2.8rem, 7vh, 4.6rem);
  padding-top: clamp(2.4rem, 6vh, 3.6rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .svcp__body { grid-template-columns: 1.4fr 1fr; } }
.svcp__copy p { color: var(--muted); font-size: var(--fs-lead); line-height: 1.62; }
.svcp__copy p + p { margin-top: 1.1rem; }
.svcp__side h2 {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}

/* how it works */
.steps { margin-top: clamp(3rem, 8vh, 5rem); }
.steps__h { margin-bottom: clamp(1.8rem, 4vh, 2.6rem); }
.steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 700px)  { .steps__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps__list { grid-template-columns: repeat(4, 1fr); } }
.steps__list li { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--surface); }
.step__n {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--red-bright);
}
.steps__list h3 {
  margin-top: .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: -.008em;
  color: var(--text);
}
.steps__list p { margin-top: .5rem; font-size: .95rem; color: var(--muted); }

.svcp__shots { margin-top: clamp(2.4rem, 6vh, 3.6rem); }

/* FAQ - native disclosure, so it works with no JS and matches the FAQPage schema */
.faq { margin-top: clamp(3rem, 8vh, 5rem); }
.faq .h2 { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.faq__list { border-top: 1px solid var(--line); max-width: 78ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 {
  flex: 1;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.08rem, 1rem + .4vw, 1.32rem);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t-fast);
}
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  margin-top: .45em;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(45deg);
  transition: transform .35s var(--e-out), border-color var(--t-fast);
}
.faq__item[open] summary::after { transform: rotate(-135deg); border-color: var(--red-bright); }
.faq__item[open] summary h3 { color: #fff; }
.faq__a { padding: 0 0 1.35rem; max-width: 68ch; }
.faq__a p { color: var(--muted); }
@media (hover: hover) { .faq__item summary:hover h3 { color: #fff; } }

/* local block */
.svcp__local { margin-top: clamp(3rem, 8vh, 5rem); }
.svcp__local .h2 { margin-bottom: 1.4rem; }
.svcp__local > p { color: var(--muted); max-width: 68ch; font-size: var(--fs-lead); }
.svcp__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 62ch;
}
.svcp__facts li {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.svcp__facts li span {
  flex: none;
  width: 6rem;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: .18em;
}
.svcp__facts a { transition: color var(--t-fast); }
.svcp__facts a:hover { color: var(--red-bright); }

/* related services */
.rel { margin-top: clamp(3rem, 8vh, 5rem); }
.rel .h2 { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.rel__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.8rem, 1.6vw, 1.1rem);
}
@media (min-width: 760px) { .rel__list { grid-template-columns: repeat(3, 1fr); } }
.rel__list a {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.rel__n { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .2em; color: var(--faint); }
.rel__list b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.22rem;
  text-transform: uppercase;
  letter-spacing: -.008em;
  color: #fff;
}
.rel__p { font-size: .93rem; color: var(--muted); line-height: 1.55; }
@media (hover: hover) {
  .rel__list a:hover { border-color: rgba(255,255,255,.26); background: var(--surface-2); transform: translateY(-3px); }
}
.rel .legal__back { margin-top: 2rem; }

/* 404 */
.four04 ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.four04 a {
  display: inline-flex;
  padding: .7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
@media (hover: hover) {
  .four04 a:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }
}

/* the drawer gets a way through to the full page */
.svcd__more {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 1.4rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--red);
  padding-bottom: 3px;
  transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
@media (hover: hover) {
  .svcd__more:hover { color: var(--red-bright); border-color: var(--red-bright); gap: .85em; }
}

/* --------------------------------------------------------------------------
   20. Embedded booking (Motion Bookings)
   -------------------------------------------------------------------------- */
.book { display: flex; flex-direction: column; gap: 1rem; }
.book__frameWrap {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(26,25,32,.9), rgba(10,9,13,.92));
  overflow: hidden;
  /* the form is tall and its height varies with the service list, so it gets a
     generous box and scrolls inside rather than being clipped */
  height: clamp(560px, 78vh, 900px);
}
.book__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: light;   /* html has color-scheme:dark, which paints the iframe black */
}
.book__alt { font-size: .92rem; color: var(--muted); }
.book__alt a {
  color: var(--text);
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
  transition: color var(--t-fast);
}
@media (hover: hover) { .book__alt a:hover { color: var(--red-bright); } }

/* Motion Bookings enquiry widget: `color-scheme: dark` on <html> makes the
   browser paint an opaque canvas inside the iframe, so the floating bubble
   arrives sitting on a white box. The iframe needs its own scheme and an
   explicit transparent background. */
iframe[src*="motionbookings.co.uk/widget"] {
  background: transparent !important;
  background-color: transparent !important;
  color-scheme: light;
}