/* ═══════════════════════════════════════════════════════════
   PAINTS & PAINTS — light editorial system
   Warm paper ground, serif display, photography-led.
   No build step, no framework.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────── */
:root{
  --paper:#FAF8F4;      /* page ground, warm off-white   */
  --paper-2:#F2EEE6;    /* recessed panel                */
  --paper-3:#EAE4D9;    /* deeper panel                  */
  --card:#FFFFFF;

  --ink:#14120F;        /* near-black, warm              */
  --ink-2:#57524A;      /* body text                     */
  --ink-3:#8D8677;      /* labels, captions              */
  --line:#E4DED2;
  --line-2:#D3CBBC;

  --red:#D8241C;        /* P&P red — the accent          */
  --red-deep:#A81B15;
  --yellow:#FFB81C;     /* P&P yellow — used sparingly   */

  --shell:1200px;
  --gut:22px;
  --r-lg:26px;          /* image + big card radius       */
  --r-md:18px;
  --r-sm:12px;
  --pill:999px;

  --ease:cubic-bezier(.22,.68,.28,1);
  --swan:cubic-bezier(.16,1,.3,1);   /* long, slow settle */

  /* Wide industrial grotesque — the premium-automotive register.
     Contrasts the script wordmark rather than competing with it. */
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-script:"Yellowtail",cursive;

  --shadow-sm:0 1px 2px #14120F0A, 0 4px 14px #14120F0F;
  --shadow-md:0 2px 6px #14120F0F, 0 18px 44px #14120F14;

  /* ── the intro's clock ──────────────────────────────────────────
     Every delay in the hero is derived from these, so the whole
     sequence retimes from one place. The car rolls in, the colours
     cascade down over it, the words arrive, and the same cascade
     carries on into the drips at the top of the next section.

     --fall-step is deliberately far shorter than --fall-dur: that
     overlap is what makes the colours read as one falling curtain
     rather than six separate drops waiting their turn. ──────────── */
  --roll-delay:.12s;  --roll-dur:1.7s;                   /* car settles at 1.82s */
  /* the entry distance is not free: it sets the wheel rotation below */
  --roll-ease:cubic-bezier(.33,.66,.6,1);

  --fall-delay:1.35s; --fall-dur:.58s; --fall-step:.18s; /* last drop lands at 2.83s */
  --fall-ease:cubic-bezier(.22,.86,.3,1.12);

  --coat-delay:1.62s; --coat-dur:.34s;                   /* car is painted by 2.86s */

  --text-in:3.05s;                                       /* words follow the paint */
}

/* ── 2. Base ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block }
a{ color:inherit }
button,input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px }
::selection{ background:var(--yellow); color:var(--ink) }

.wrap{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut) }
.wrap--tight{ max-width:900px }

/* ── 3. Typography ─────────────────────────────────────── */
h1,h2,h3,h4{
  margin:0; font-family:var(--f-display); font-weight:400;
  font-variation-settings:"wdth" 118,"wght" 700; line-height:1.02;
  letter-spacing:-.02em; text-wrap:balance;
}
/* Each hero line is nowrap inside its reveal mask, so the type must
   shrink faster than the viewport or it gets silently clipped. */
.d1{ font-size:clamp(1.7rem,6.4vw,4.4rem); line-height:.98; letter-spacing:-.03em;
     font-variation-settings:"wdth" 124,"wght" 800; text-transform:uppercase }
.d2{ font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.026em;
     font-variation-settings:"wdth" 122,"wght" 800; text-transform:uppercase }
.d3{ font-size:clamp(1.35rem,2.3vw,1.85rem); letter-spacing:-.02em;
     font-variation-settings:"wdth" 116,"wght" 700 }
.d4{ font-size:1.15rem; letter-spacing:-.014em; font-variation-settings:"wdth" 110,"wght" 700 }

/* small caps label — the editorial voice, not a mono spec label */
.label{
  font-family:var(--f-body); font-size:.6875rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--red);
  display:inline-flex; align-items:center; gap:10px;
}
.label--dim{ color:var(--ink-3) }

.lede{ font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.62; color:var(--ink-2); max-width:58ch }
.lede strong{ color:var(--ink); font-weight:600 }
p{ margin:0 0 1.1em } p:last-child{ margin-bottom:0 }

/* the tag pill above the hero headline */
.tag{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--paper-3); border:1px solid var(--line-2);
  border-radius:var(--pill); padding:8px 16px 8px 10px;
  font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
}
.tag i{ width:7px; height:7px; border-radius:50%; background:var(--red); flex:none }

/* ── 4. Buttons ────────────────────────────────────────── */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:1px solid var(--bd); border-radius:var(--pill);
  background:var(--bg); color:var(--fg);
  font-size:.875rem; font-weight:600; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .28s var(--ease), background .28s var(--ease),
             color .28s var(--ease), border-color .28s var(--ease);
}
.btn:hover{ transform:translateY(-2px); --bg:var(--red); --bd:var(--red); --fg:#fff }
.btn:active{ transform:translateY(0) }
.btn svg{ width:16px; height:16px; flex:none }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-2) }
.btn--ghost:hover{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink) }
.btn--light{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper) }
.btn--light:hover{ --bg:var(--red); --fg:#fff; --bd:var(--red) }
.btn--wa{ --bg:#25D366; --fg:#0A2E17; --bd:#25D366 }
.btn--wa:hover{ --bg:#1FB855; --bd:#1FB855; --fg:#062011 }
.btn--lg{ padding:18px 32px; font-size:.9375rem }
.btn--block{ width:100% }

/* ── 5. Nav ────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:80;
  background:#FAF8F400; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
}
.nav.is-stuck{
  background:#14120FF2; border-bottom-color:#FFFFFF1F;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.nav__in{ display:flex; align-items:center; gap:18px; height:82px;
  transition:height .4s var(--ease) }
.nav.is-stuck .nav__in{ height:68px }
.nav__brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none }
.badge{ transition:transform .4s var(--swan) }
.nav__brand:hover .badge{ transform:rotate(-3deg) scale(1.05) }
.nav__word{ display:none; flex-direction:column; gap:1px }
.nav__word b{ font-family:var(--f-script); font-weight:400; font-size:1.35rem;
  letter-spacing:0; line-height:1; color:var(--ink) }
.nav__word span{ font-size:.56rem; font-weight:700; line-height:1.15;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
@media (min-width:400px){ .nav__word{ display:flex } }

.nav__links{ display:none; margin-left:auto; gap:2px; align-items:center }
@media (min-width:960px){ .nav__links{ display:flex } }
.nav__links a{
  position:relative; font-size:.9375rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; padding:9px 15px; border-radius:var(--pill);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:var(--paper-2) }
.nav__links a[aria-current="page"]{ color:var(--ink); font-weight:600 }
.nav__cta{ margin-left:auto; display:flex; gap:10px; align-items:center }
@media (min-width:960px){ .nav__cta{ margin-left:18px } }
.nav__phone{ display:none }
@media (min-width:720px){ .nav__phone{ display:inline-flex } }

/* The resting nav becomes a black brand rail once the page moves. */
.nav.is-stuck .nav__word b{ color:#fff }
.nav.is-stuck .nav__word span{ color:#FFFFFF8F }
.nav.is-stuck .nav__links a{ color:#FFFFFFC9 }
.nav.is-stuck .nav__links a:hover{ color:#fff; background:#FFFFFF14 }
.nav.is-stuck .nav__links a[aria-current="page"]{ color:#fff }
.nav.is-stuck .nav__cta .btn{ --bg:var(--red); --fg:#fff; --bd:var(--red) }
.nav.is-stuck .nav__cta .btn:hover{ --bg:var(--yellow); --fg:var(--ink); --bd:var(--yellow) }
.nav.is-stuck .nav__burger{ border-color:#FFFFFF38 }
.nav.is-stuck .nav__burger i,
.nav.is-stuck .nav__burger i::before,
.nav.is-stuck .nav__burger i::after{ background:#fff }

.nav__burger{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  background:transparent; border:1px solid var(--line-2); border-radius:50%; cursor:pointer;
}
@media (min-width:960px){ .nav__burger{ display:none } }
.nav__burger i{ display:block; width:16px; height:1.6px; background:var(--ink);
  position:relative; transition:background .2s var(--ease) }
.nav__burger i::before,.nav__burger i::after{ content:""; position:absolute; left:0;
  width:16px; height:1.6px; background:var(--ink); transition:transform .3s var(--ease) }
.nav__burger i::before{ top:-5.5px } .nav__burger i::after{ top:5.5px }
.nav__burger[aria-expanded="true"] i{ background:transparent }
.nav__burger[aria-expanded="true"] i::before{ transform:translateY(5.5px) rotate(45deg) }
.nav__burger[aria-expanded="true"] i::after{ transform:translateY(-5.5px) rotate(-45deg) }

.drawer{
  position:fixed; inset:82px 12px auto; z-index:79;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); display:grid; gap:0; padding:12px 20px 20px;
  transform:translateY(-10px) scale(.985); opacity:0; pointer-events:none;
  transition:transform .35s var(--swan), opacity .3s var(--ease);
}
.drawer.is-open{ transform:none; opacity:1; pointer-events:auto }
@media (min-width:960px){ .drawer{ display:none } }
.drawer a{ font-family:var(--f-display); font-variation-settings:"wdth" 116,"wght" 700;
  font-size:1.3rem; letter-spacing:-.01em; text-transform:uppercase;
  text-decoration:none; padding:13px 0;
  border-bottom:1px solid var(--line) }
.drawer a[aria-current="page"]{ color:var(--red) }
.drawer .btn{ margin-top:18px }

/* ── 6. Hero — drifting Porsche + falling paint ────────── */
.hero{
  position:relative; min-height:100svh; overflow:hidden; color:#fff;
  background:var(--ink); isolation:isolate;
}
.hero-art{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(70% 72% at 92% 40%,#3D1919 0%,#14120F00 65%),
    linear-gradient(135deg,#171511 0%,#0E0D0B 100%) }
.hero-art::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,#14120FFF 0%,#14120FF0 27%,#14120FA8 42%,#14120F00 66%);
}
.hero-art__glow{ position:absolute; inset:0; opacity:.22;
  background:repeating-linear-gradient(90deg,#FFFFFF05 0 1px,transparent 1px 90px) }
.hero-scene{ position:absolute; inset:0 0 0 auto; width:min(72vw,960px) }

.paint-falls{
  position:absolute; inset:0 8% 0 12%; display:grid; grid-template-columns:repeat(6,1fr);
  z-index:0; filter:drop-shadow(0 18px 24px #00000038);
}
.paint-fall{
  position:relative; height:100%; display:block; background:var(--paint);
  transform:scaleY(0); transform-origin:50% 0; will-change:transform;
  box-shadow:inset -12px 0 24px #00000018, inset 10px 0 18px #FFFFFF12;
}
.hero.is-lit .paint-fall{
  animation:paint-waterfall var(--fall-dur) var(--fall-ease)
    calc(var(--fall-delay) + var(--i) * var(--fall-step)) forwards;
}

.hero-car{
  position:absolute; z-index:2; left:0; bottom:9%; width:100%;
  transform:translate3d(106%,4%,0) rotate(2.4deg); transform-origin:58% 86%;
  will-change:transform;
  filter:drop-shadow(0 15px 19px #0000006B);
  /* --roll-* comes from .hero, so the body and the wheels cannot drift
     apart: the wheels turn in exact proportion to the ground covered. */
}
.hero-car > img{ width:100%; height:auto; display:block }
.hero-car__ground{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(8.4% 3.0% at 20.4% 83.1%, #000000C4 0%, #00000000 74%),
    radial-gradient(8.4% 3.0% at 74.1% 83.3%, #000000C4 0%, #00000000 74%),
    radial-gradient(33% 4.2% at 47% 83.4%,    #0000005E 0%, #00000000 78%);
}
.hero.is-lit .hero-car{
  animation:porsche-drift var(--roll-dur) var(--roll-ease) var(--roll-delay) forwards;
}

/* Each wheel is the photo's own wheel, cut at r=136 where the disc is
   still fully opaque and the surrounding tyre is flat black — so the
   cut never shows, turning or at rest. Placed with left/top rather
   than a centring translate, so it sits right even if `rotate` is
   unsupported: then it is simply a pixel copy of what is beneath it. */
.hero-car__wheel{
  position:absolute; z-index:3; width:15.3326%; aspect-ratio:1;
  background:center/100% 100% no-repeat;
  will-change:rotate; pointer-events:none;
}
.hero-car__wheel--front{
  left:12.7621%; top:51.0034%;
  background-image:url("../img/hero-porsche-wheel-front.webp?v=2");
}
.hero-car__wheel--rear{
  left:66.4600%; top:51.3754%;
  background-image:url("../img/hero-porsche-wheel-rear.webp?v=2");
}
.hero.is-lit .hero-car__wheel{
  animation:wheel-roll var(--roll-dur) var(--roll-ease) var(--roll-delay) forwards;
}

.hero-car__paint{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* band edges, as percentages across the car. Only these move at
     breakpoints — the six bands read their own edges from them. */
  --e1:25.333%; --e2:38.666%; --e3:51.999%; --e4:65.332%; --e5:78.665%;
  -webkit-mask:url("../img/hero-porsche-body.webp") center/100% 100% no-repeat;
          mask:url("../img/hero-porsche-body.webp") center/100% 100% no-repeat;
}
/* Each band is a full-size layer clipped to its column, so the two
   shading maps stay pinned to the car no matter how wide the band is.
   Bottom to top: flat colour → the photo's own shading, multiplied in
   → the photo's own speculars, screened back on. That is a coat of
   paint rather than a colour sitting on top of one. */
.hero-car__paint span{
  position:absolute; inset:0; display:block;
  background-image:
    url("../img/hero-porsche-gloss.webp"),
    url("../img/hero-porsche-shade.webp"),
    linear-gradient(var(--paint),var(--paint));
  background-size:100% 100%; background-repeat:no-repeat;
  background-blend-mode:screen,multiply,normal;
  clip-path:inset(0 var(--r) 100% var(--l));
  will-change:clip-path;
}
.hero-car__paint span:nth-child(1){ --l:0%;        --r:calc(100% - var(--e1)) }
.hero-car__paint span:nth-child(2){ --l:var(--e1); --r:calc(100% - var(--e2)) }
.hero-car__paint span:nth-child(3){ --l:var(--e2); --r:calc(100% - var(--e3)) }
.hero-car__paint span:nth-child(4){ --l:var(--e3); --r:calc(100% - var(--e4)) }
.hero-car__paint span:nth-child(5){ --l:var(--e4); --r:calc(100% - var(--e5)) }
.hero-car__paint span:nth-child(6){ --l:var(--e5); --r:0% }

.hero.is-lit .hero-car__paint span{
  animation:paint-the-car var(--coat-dur) var(--fall-ease)
    calc(var(--coat-delay) + var(--i) * var(--fall-step)) forwards;
}

.drift-smoke{ position:absolute; z-index:1; right:-5%; bottom:7%; width:48%; height:35%;
  opacity:0; transform:translateX(18%) scale(.65); filter:blur(2px) }
.drift-smoke i{ position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 45% 45%,#FFFFFFB8 0%,#D8D4CB66 43%,#B9B3A700 72%) }
.drift-smoke i:nth-child(1){ width:46%; aspect-ratio:1; right:2%; bottom:5% }
.drift-smoke i:nth-child(2){ width:35%; aspect-ratio:1; right:27%; bottom:0 }
.drift-smoke i:nth-child(3){ width:28%; aspect-ratio:1; right:48%; bottom:13% }
.drift-smoke i:nth-child(4){ width:20%; aspect-ratio:1; right:67%; bottom:4% }
.hero.is-lit .drift-smoke{ animation:drift-smoke 1.8s ease-out .18s both }

@keyframes porsche-drift{
  from{ transform:translate3d(106%,4%,0) rotate(2.4deg) }
  to  { transform:translate3d(0,0,0) rotate(0) }
}
/* Negative: the car drives to the left, so the wheels turn anti-clockwise.
   106% of the car's length over a 150px-radius tyre is 2.009 revolutions,
   so -720deg is true rolling to within half a percent — and a whole number
   of turns leaves the wheel resting exactly where the photograph had it. */
@keyframes wheel-roll{
  from{ rotate:0deg }
  to  { rotate:-720deg }
}
@keyframes drift-smoke{
  0%{ opacity:0; transform:translateX(30%) scale(.5) }
  28%{ opacity:.42 }
  100%{ opacity:0; transform:translateX(-18%) scale(1.45) }
}
@keyframes paint-waterfall{
  from{ transform:scaleY(0) }
  to  { transform:scaleY(1) }
}
@keyframes paint-the-car{
  0%{ clip-path:inset(0 var(--r) 100% var(--l)) }
  100%{ clip-path:inset(0 var(--r) 0 var(--l)) }
}

.hero__in{
  position:relative; z-index:5; min-height:100svh; padding:128px var(--gut) 100px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left; pointer-events:none;
}
.hero__in > *{ pointer-events:auto }

.hero__sub,
.hero__cta{ opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--swan), transform .9s var(--swan) }
.hero.is-lit .hero__sub{ opacity:1; transform:none; transition-delay:calc(var(--text-in) + .30s) }
.hero.is-lit .hero__cta{ opacity:1; transform:none; transition-delay:calc(var(--text-in) + .44s) }

.hero h1{ margin:24px 0 0; max-width:9.8ch; color:#fff;
  text-shadow:0 3px 36px #0000007A }
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
.hero h1 .ln > i{ display:block; font-style:normal; transform:translateY(110%);
  transition:transform 1.05s var(--swan) }
.hero.is-lit h1 .ln > i{ transform:none }
.hero.is-lit h1 .ln:nth-child(1) > i{ transition-delay:var(--text-in) }
.hero.is-lit h1 .ln:nth-child(2) > i{ transition-delay:calc(var(--text-in) + .12s) }
.hero.is-lit h1 .ln:nth-child(3) > i{ transition-delay:calc(var(--text-in) + .24s) }
.hero h1 em{ color:var(--yellow) }

.hero__sub{ margin:24px 0 0; max-width:54ch; color:#FFFFFFD6;
  font-size:clamp(1rem,1.35vw,1.15rem); line-height:1.6 }
.hero__cta{ display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap; margin:32px 0 0 }
.hero__cta .btn{ --bg:#fff; --fg:var(--ink); --bd:#fff }
.hero__cta .btn:hover{ --bg:var(--yellow); --bd:var(--yellow); --fg:var(--ink) }
.hero__cta .btn--ghost{ --bg:#FFFFFF14; --fg:#fff; --bd:#FFFFFF52;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.hero__cta .btn--ghost:hover{ --bg:#fff; --fg:var(--ink); --bd:#fff }

/* scroll hint */
.hero__more{
  position:absolute; left:50%; bottom:24px; z-index:6; translate:-50% 0;
  display:grid; place-items:center; gap:9px; color:#FFFFFF9E;
  font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; opacity:0; transition:opacity .9s var(--swan) calc(var(--text-in) + .62s), color .3s var(--ease);
}
.hero.is-lit .hero__more{ opacity:1 }
.hero__more:hover{ color:#fff }
.hero__more span{ display:block; width:1px; height:34px;
  background:linear-gradient(#FFFFFF00,#FFFFFFA8) }
@media (max-width:939px){
  .hero-art::after{ background:linear-gradient(180deg,#14120FFF 0%,#14120FEA 29%,#14120F5E 53%,#14120F00 76%) }
  .hero-scene{ inset:0 -2vw 0 auto; width:104vw }
  .paint-falls{ inset:0 8% 0 9% }
  .hero-car{ bottom:-4%; width:100%; left:0 }
  .hero-car__paint{ --e1:22.833%; --e2:36.666%; --e3:50.499%; --e4:64.332%; --e5:78.165% }
  .hero__in{ justify-content:flex-start; align-items:center; text-align:center; padding-top:112px }
  .hero h1{ margin-inline:auto; max-width:12ch }
  .hero__sub{ margin-inline:auto; max-width:42ch }
  .hero__cta{ justify-content:center }
}
@media (max-width:700px){
  .hero{ min-height:880px }
  .hero__in{ min-height:880px; padding:104px var(--gut) 86px }
  .hero-scene{ width:126vw; right:-13vw }
  .paint-falls{ inset:0 12% 0 13% }
  .hero-car{ bottom:1%; width:100%; left:0 }
  .hero-car__paint{ --e1:25.5%; --e2:38%; --e3:50.5%; --e4:63%; --e5:75.5% }
  .hero__sub{ max-width:34ch }
  .hero__cta{ display:grid }
  .hero__cta .btn{ width:100% }
  .hero__more{ display:none }
}

/* nav reads light while it floats over the hero image */
.nav:not(.is-stuck) .nav__word b{ color:#fff }
.nav:not(.is-stuck) .nav__word span{ color:#FFFFFFA8 }
.nav:not(.is-stuck) .nav__links{ padding:4px; border:1px solid #FFFFFF1F;
  border-radius:var(--pill); background:#14120F73;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
.nav:not(.is-stuck) .nav__links a{ color:#FFFFFFC4 }
.nav:not(.is-stuck) .nav__links a:hover{ color:#fff; background:#FFFFFF1F }
.nav:not(.is-stuck) .nav__cta .btn{ --bg:#fff; --fg:var(--ink); --bd:#fff }
.nav:not(.is-stuck) .nav__burger{ border-color:#FFFFFF52 }
.nav:not(.is-stuck) .nav__burger i,
.nav:not(.is-stuck) .nav__burger i::before,
.nav:not(.is-stuck) .nav__burger i::after{ background:#fff }

/* ── 7. Sections ───────────────────────────────────────── */
.sec{ padding:104px 0 }
.sec--tight{ padding:76px 0 }
.sec--paper2{ background:var(--paper-2) }
#supply{ position:relative; border-top:0 }
.paint-drip-edge{
  position:absolute; top:-1px; right:min(5.76vw,76.8px); z-index:3;
  width:min(57.6vw,768px); height:74px; display:grid;
  grid-template-columns:repeat(6,1fr); pointer-events:none;
  filter:drop-shadow(0 8px 8px #14120F1F);
}
.paint-drip-edge span{ position:relative; display:block; height:20px; background:var(--paint);
  transform:scaleY(0); transform-origin:50% 0; will-change:transform }
/* Each droplet carries its own position, width and run length inline —
   see the markup. Many small ones read as paint that has run; two big
   ones read as a shape someone drew. */
.paint-drip-edge span i{
  position:absolute; top:14px; left:var(--x); width:var(--w); height:var(--d);
  display:block; background:var(--paint); border-radius:0 0 999px 999px;
}
/* .in comes from the scroll observer, .paint-done from site.js once the
   last colour has landed on the car. Both are required: scroll past the
   hero early and the drips wait rather than running ahead of the paint
   they are supposed to be continuing. */
html.paint-done .paint-drip-edge.in span{
  animation:section-paint-leak var(--fall-dur) var(--fall-ease)
    calc(var(--i,0) * var(--fall-step)) forwards;
}
.paint-drip-edge span:nth-child(1){ --i:0 }
.paint-drip-edge span:nth-child(2){ --i:1 }
.paint-drip-edge span:nth-child(3){ --i:2 }
.paint-drip-edge span:nth-child(4){ --i:3 }
.paint-drip-edge span:nth-child(5){ --i:4 }
.paint-drip-edge span:nth-child(6){ --i:5 }
@keyframes section-paint-leak{
  from{ transform:scaleY(0) }
  to  { transform:scaleY(1) }
}
@media (max-width:939px){
  .paint-drip-edge{ width:86.32vw; right:6.32vw }
}
@media (max-width:700px){
  .paint-drip-edge{ width:94.5vw; right:2.1vw; height:68px }
}
.sec__head{ max-width:60ch; margin-bottom:52px }
.sec__head--center{ margin-inline:auto; text-align:center }
.sec__head--center .label{ justify-content:center }
.band__head .label{ justify-content:center }
.sec__head .d2{ margin:20px 0 0 }
.sec__head .lede{ margin-top:20px }
.sec__head--center .lede{ margin-inline:auto }

.split{ display:grid; gap:44px; align-items:center }
@media (min-width:940px){ .split{ grid-template-columns:1fr 1fr; gap:70px } }
@media (min-width:940px){ .split--60{ grid-template-columns:1.12fr .88fr } }

/* ── 8. Media ──────────────────────────────────────────── */
.shot{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-3) }
.shot img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--swan) }
.shot--4x3{ aspect-ratio:4/3 } .shot--1x1{ aspect-ratio:1/1 }
.shot--3x4{ aspect-ratio:3/4 } .shot--16x9{ aspect-ratio:16/9 }
.shot--shop{ aspect-ratio:1280/591 }
.shot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 1px #14120F14 }

/* Keep photography visible even when an observer misses a fast scroll. */
.mask{ clip-path:none }
.mask img{ transform:scale(1.02); transition:transform 1.2s var(--swan) }
.mask.in img{ transform:scale(1) }

/* ── 9. What we sell cards ─────────────────────────────── */
.supply-grid{ display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:680px){ .supply-grid{ grid-template-columns:repeat(2,1fr); gap:18px } }
@media (min-width:1040px){ .supply-grid{ grid-template-columns:repeat(3,1fr); gap:20px } }

.svc{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  min-height:330px; border-radius:var(--r-lg); background:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--swan), box-shadow .5s var(--swan);
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md) }
.svc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--swan); opacity:.68 }
.svc:hover img{ transform:scale(1.06) }
.svc::before{
  content:""; position:absolute; inset:0 0 auto; z-index:2; height:5px;
  background:var(--red);
}
.svc:nth-child(3n+2)::before{ background:var(--yellow) }
.svc::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#14120F14 0%,#14120F66 34%,#14120FF2 100%);
}
.svc__body{ position:absolute; inset:auto 0 0 0; z-index:1; padding:28px 26px 24px;
  color:var(--paper); text-align:left }
.svc__n{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow) }
.svc h3{ color:#fff; font-size:clamp(1.12rem,2vw,1.34rem); margin:9px 0 8px;
  font-variation-settings:"wdth" 116,"wght" 700; text-transform:uppercase;
  letter-spacing:-.012em; line-height:1.08 }
.svc p{ color:#FFFFFFD1; font-size:.9rem; line-height:1.48; max-width:40ch; margin:0 }
.svc__go{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:.8125rem; font-weight:600; color:#fff }
.svc__go i{ font-style:normal; transition:transform .4s var(--swan) }
.svc:hover .svc__go i{ transform:translate(4px,-4px) }
@media (max-width:679px){
  .svc{ min-height:300px }
  .svc__body{ padding:26px 22px 22px }
}

/* ── 10. Dark stats band ───────────────────────────────── */
.band{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper);
  border:1px solid #D8241C66; border-radius:var(--r-lg); padding:56px 44px 58px }
.band::before{ content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--red) 0 72%,var(--yellow) 72% 100%) }
@media (max-width:640px){ .band{ padding:40px 24px 42px; border-radius:var(--r-md) } }
.band__head{ text-align:center; max-width:46ch; margin:0 auto 44px }
.band__head .label{ color:var(--yellow) }
.band__head h2{ color:#fff; margin-top:18px }
.band__head p{ color:#FFFFFFA6; margin-top:16px }
.stats{ display:grid; gap:34px 20px; grid-template-columns:repeat(2,1fr); text-align:center }
@media (min-width:800px){ .stats{ grid-template-columns:repeat(4,1fr) } }
.stat b{ display:block; font-family:var(--f-display);
  font-variation-settings:"wdth" 120,"wght" 800;
  font-size:clamp(2.1rem,4.2vw,3rem); line-height:1; color:#FF4A40;
  font-variant-numeric:tabular-nums }
.stat span{ display:block; margin-top:10px; font-size:.8125rem; font-weight:500;
  color:#FFFFFF9E; line-height:1.45 }

/* ── 10b. Clients supplied ─────────────────────────────── */
.clients-sec{
  position:relative; overflow:hidden; padding:94px 0 88px;
  background:var(--ink); color:#fff; isolation:isolate;
}
.clients-sec::before{
  content:""; position:absolute; width:430px; height:430px; border-radius:50%;
  right:-210px; top:-235px; background:var(--red); opacity:.88; z-index:-1;
}
.clients-sec::after{
  content:""; position:absolute; width:210px; height:210px; border-radius:50%;
  left:-110px; bottom:-135px; background:var(--yellow); z-index:-1;
}
.clients-sec__accent{
  position:absolute; inset:0 0 auto; height:5px;
  background:linear-gradient(90deg,var(--red) 0 72%,var(--yellow) 72%);
}
.clients-sec__head{ margin-bottom:46px; text-align:center }
.client-grid{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:12px;
}
.client-logo{
  flex:0 1 calc((100% - 12px)/2); min-width:0; min-height:150px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:24px 16px;
  background:#fff; color:var(--ink); border:1px solid #FFFFFF2B;
  border-radius:22px; box-shadow:0 12px 34px #0003;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.client-logo:hover{ transform:translateY(-5px); box-shadow:0 20px 44px #0005 }
.client-logo img{ width:54px; height:54px; object-fit:contain }
.client-logo:nth-child(5) img,.client-logo:nth-child(7) img{ transform:scale(1.42) }
.client-logo span{
  font-family:var(--f-display); font-size:1rem; line-height:1;
  font-variation-settings:"wdth" 114,"wght" 750; text-align:center;
}
@media (min-width:640px){
  .client-logo{ flex-basis:calc((100% - 36px)/4) }
}
@media (max-width:639px){
  .clients-sec{ padding:74px 0 70px }
  .clients-sec__head{ margin-bottom:32px }
  .client-logo{ min-height:126px; padding:20px 10px; gap:14px; border-radius:18px }
  .client-logo img{ width:45px; height:45px }
  .client-logo span{ font-size:.9rem }
}

/* ── 11. Feature list (about) ──────────────────────────── */
.ticks{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:14px }
.ticks li{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start }
.ticks svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--red) }
.ticks b{ font-weight:600; display:block; font-size:.9875rem }
.ticks span{ color:var(--ink-2); font-size:.9375rem; line-height:1.5 }

/* ── 12. Gallery strip ─────────────────────────────────── */
.gallery{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr) }
@media (min-width:820px){ .gallery{ grid-template-columns:repeat(4,1fr); gap:16px } }
.gallery .shot{ aspect-ratio:3/4 }
.gallery .shot:hover img{ transform:scale(1.05) }
@media (min-width:820px){
  .gallery .shot:nth-child(odd){ transform:translateY(22px) }
}

/* ── 12a. Workshop video reel ──────────────────────────── */
.work-videos{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,310px);
  justify-content:start; gap:16px; padding:8px 2px 24px; margin:0 auto 6px;
  overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:inline mandatory; scrollbar-width:thin;
}
.work-video{
  position:relative; margin:0; aspect-ratio:478/850; overflow:hidden;
  scroll-snap-align:center; background:#000; border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.work-video video{ display:block; width:100%; height:100%; object-fit:cover; background:#000 }
@media (min-width:760px){
  .work-videos{
    grid-auto-flow:row; grid-auto-columns:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:center; max-width:1040px; overflow:visible;
  }
}

/* ── 13. Brands ────────────────────────────────────────── */
.brands-sec{ padding:72px 0 82px; background:var(--paper); overflow:hidden }
.brands-sec .sec__head{ margin:0 auto 24px }
.brands{
  position:relative; width:100%;
  padding:18px 0; overflow:hidden; background:var(--ink);
  border-block:1px solid #D8241C52; box-shadow:var(--shadow-md);
}
.brands::before,.brands::after{
  content:""; position:absolute; inset:0 auto 0 0; z-index:2; width:min(8vw,90px);
  pointer-events:none; background:linear-gradient(90deg,var(--ink),transparent);
}
.brands::after{ inset:0 0 0 auto; transform:scaleX(-1) }
.brands__track{
  --brand-gap:12px; display:flex; gap:var(--brand-gap); width:max-content;
  animation:brand-marquee 34s linear infinite; will-change:transform;
}
.brands__group{ display:flex; flex:none; gap:var(--brand-gap) }
.brands__item{
  position:relative; flex:0 0 clamp(184px,18vw,238px); display:grid; place-items:center;
  text-align:center; min-height:112px; padding:10px 14px; overflow:hidden;
  background:#fff; border:1px solid #FFFFFF24; border-radius:var(--r-sm);
  font-family:var(--f-display); font-variation-settings:"wdth" 112,"wght" 700;
  font-size:.9375rem; color:var(--ink);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.brands__item img{
  display:block; width:92%; height:88px; object-fit:contain;
  transform:scale(var(--logo-scale,1)); transform-origin:center;
}
.brands__item:hover{ border-color:#FF4A40; transform:translateY(-3px) }
.brands__item.is-house{ border:2px solid var(--red); background:#FFDF00 }
@keyframes brand-marquee{
  to{ transform:translateX(calc(-50% - var(--brand-gap) / 2)) }
}

/* ── 14. Contact ───────────────────────────────────────── */
.contact__panel{
  background:var(--red); color:#fff; padding:28px; border-radius:var(--r-lg);
  box-shadow:0 18px 50px #A81B152B;
}
.contact__rows{ display:grid; gap:10px; margin-bottom:16px }
.crow{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; color:var(--ink); text-decoration:none;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
a.crow:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.crow__ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:var(--paper-2); color:var(--red); flex:none }
.crow__ico svg{ width:17px; height:17px }
.crow .label{ font-size:.625rem; margin-bottom:6px }
.crow b{ display:block; font-family:var(--f-display);
  font-variation-settings:"wdth" 110,"wght" 700; font-size:1.02rem;
  line-height:1.35; color:var(--ink) }
.crow > span > span{ display:block; color:var(--ink-2); font-size:.875rem; margin-top:3px }

.hours{ list-style:none; margin:8px 0 0; padding:0; color:var(--ink) }
.hours li{ display:flex; justify-content:space-between; gap:16px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:.875rem }
.hours li:last-child{ border-bottom:0 }
.hours .k{ color:var(--ink-2) }
.hours .v{ font-weight:600; font-variant-numeric:tabular-nums }

.map{ position:relative; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--paper-2); aspect-ratio:16/10 }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.02) }
.map__ph{ position:absolute; inset:0; display:grid; place-content:center; gap:9px;
  text-align:center; padding:26px; color:var(--ink-3); font-size:.875rem }

/* ── 15. Form ──────────────────────────────────────────── */
.formcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 32px 36px; box-shadow:var(--shadow-sm) }
@media (max-width:560px){ .formcard{ padding:24px 20px 26px } }
.form{ display:grid; gap:16px; margin-top:24px }
.field{ display:grid; gap:8px }
.field label{ font-size:.75rem; font-weight:600; letter-spacing:.06em; color:var(--ink-2) }
.field input,.field select,.field textarea{
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:14px 16px; font-size:.9375rem; width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; font-family:var(--f-body) }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red); background:var(--card); outline:none }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3) }
.field--row{ display:grid; gap:16px }
@media (min-width:560px){ .field--row{ grid-template-columns:1fr 1fr } }
.form__note{ color:var(--ink-3); font-size:.8125rem; line-height:1.55 }
.form__note a{ color:var(--red); font-weight:600 }
.form__ok{ display:none; align-items:center; gap:10px; padding:14px 16px;
  border:1px solid #2E9E6B55; background:#2E9E6B12; border-radius:var(--r-sm);
  color:#1F7A50; font-size:.875rem; font-weight:600 }
.form__ok.is-on{ display:flex }

/* ── 16. WhatsApp float ────────────────────────────────── */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#06301A; text-decoration:none;
  padding:14px 19px; border-radius:var(--pill);
  box-shadow:0 6px 26px #14120F2E, 0 0 0 1px #0000000F;
  font-size:.8125rem; font-weight:700; letter-spacing:.01em;
  transform:translateY(90px); opacity:0;
  transition:transform .55s var(--swan), opacity .5s var(--ease), filter .25s var(--ease);
}
.paint-done .wa{ transform:none; opacity:1 }
.wa:hover{ filter:brightness(1.06) }
.wa svg{ width:20px; height:20px; flex:none }
.wa span{ display:inline }

/* ── 17. Footer ────────────────────────────────────────── */
.foot{ background:var(--ink); color:var(--paper); padding:66px 0 100px }
.foot__grid{ display:grid; gap:34px; margin-bottom:44px }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1.5fr 1fr 1fr } }
.foot h4{ font-family:var(--f-body); font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#FFFFFF6B; margin-bottom:16px }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.foot a{ color:#FFFFFFC4; text-decoration:none; font-size:.9375rem;
  transition:color .25s var(--ease) }
.foot a:hover{ color:var(--yellow) }
.foot__blurb{ color:#FFFFFF9E; font-size:.9375rem; max-width:36ch; margin-top:18px }
.foot__bar{ border-top:1px solid #FFFFFF1F; padding-top:24px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:#FFFFFF75; font-size:.8125rem }

/* ── 18. Reveal ────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--swan), transform .95s var(--swan) }
.rv.in{ opacity:1; transform:none }

/* ── 19. Motion preferences ────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv,.mask{ opacity:1; transform:none; clip-path:none }
  .hero__sub,.hero__cta,.hero__more{ opacity:1; transform:none }
  .hero h1 .ln > i{ transform:none }
  .paint-fall{ transform:scaleY(1) }
  .hero-car{ transform:none; filter:drop-shadow(0 15px 19px #0000006B) }
  .hero-car__wheel{ rotate:0deg }
  .hero-car__paint span{ clip-path:inset(0 var(--r) 0 var(--l)) }
  .paint-drip-edge span{ transform:scaleY(1) }
  .drift-smoke{ display:none }
  .mask img,.shot img{ transform:none }
  .wa{ opacity:1; transform:none }
  .brands{ overflow-x:auto }
  .brands::before,.brands::after{ display:none }
  .brands__track{ animation:none !important; transform:none }
  .brands__group[aria-hidden="true"]{ display:none }
}

/* ── 20. No-JS safety net ──────────────────────────────────
   Animation is an enhancement. Nothing may stay invisible
   just because a script failed to load. ─────────────────── */
html:not(.js) .rv,
html:not(.js) .hero__sub,
html:not(.js) .hero__cta,
html:not(.js) .hero__more,
html:not(.js) .wa{ opacity:1; transform:none }
html:not(.js) .hero h1 .ln > i{ transform:none }
html:not(.js) .mask{ clip-path:none }
html:not(.js) .paint-fall{ transform:scaleY(1) }
html:not(.js) .hero-car{ transform:none }
html:not(.js) .hero-car__paint span{ clip-path:inset(0 var(--r) 0 var(--l)) }
html:not(.js) .paint-drip-edge span{ transform:scaleY(1) }
html:not(.js) .drift-smoke{ display:none }
html:not(.js) .mask img{ transform:scale(1.02) }

@media print{
  .nav,.wa,.drawer,.hero__glow{ display:none }
  body{ background:#fff }
}

/* ── 21. Script emphasis ───────────────────────────────────
   The brush script is the brand's warmth. It appears exactly
   twice: the wordmark, and one word in a heading. ───────── */
.script,
h1 em, h2 em, h3 em{
  font-family:var(--f-script); font-style:normal; font-weight:400;
  color:var(--red); text-transform:none; letter-spacing:0;
  font-size:1.15em; line-height:.92; display:inline-block;
  padding-right:.06em; font-variation-settings:normal;
}

/* ── 22. Social links ──────────────────────────────────── */
.socials{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 20px }
.socials a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:var(--card);
  color:var(--ink-2); text-decoration:none;
  font-size:.875rem; font-weight:600;
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover{ color:var(--red); border-color:#D8241C55;
  background:#D8241C08; transform:translateY(-2px) }
.socials a[hidden]{ display:none }
.socials svg{ width:17px; height:17px; flex:none }

.socials--dark{ margin:20px 0 0 }
.socials--dark a{ background:#FFFFFF0F; border-color:#FFFFFF24; color:#FFFFFFC4 }
.socials--dark a:hover{ background:#FFFFFF1A; border-color:var(--yellow); color:var(--yellow) }

/* ── 23. Footer wordmark ───────────────────────────────── */
.foot__word{
  display:block; font-family:var(--f-script); font-size:2.4rem;
  line-height:1; color:var(--yellow);
}

/* ── 24. Feature tiles (replaces the tick bullets) ─────────
   Three proper cards with icon badges, spanning full width
   under the About split so they have room to read. ─────── */
.colour-tech{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  min-height:440px; margin-top:64px; overflow:hidden;
  border-radius:var(--r-lg); background:var(--ink); color:#fff;
  box-shadow:var(--shadow-md);
}
.colour-tech__visual{ position:relative; min-height:100%; margin:0; overflow:hidden }
.colour-tech__visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 64%,var(--ink) 100%);
  pointer-events:none;
}
.colour-tech__visual img{
  display:block; width:100%; height:100%; min-height:440px; object-fit:cover;
  transition:transform .8s var(--swan);
}
.colour-tech:hover .colour-tech__visual img{ transform:scale(1.025) }
.colour-tech__copy{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:54px 50px 50px;
}
.colour-tech__copy::before{
  content:""; position:absolute; inset:0 0 auto; height:5px;
  background:linear-gradient(90deg,var(--red) 0 72%,var(--yellow) 72%);
}
.colour-tech__copy .label{ color:var(--yellow) }
.colour-tech__copy h3{ margin:17px 0 18px; color:#fff; line-height:1.02 }
.colour-tech__copy p{ margin:0; color:#FFFFFFC9; font-size:.975rem; line-height:1.65 }
.colour-tech__steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
  list-style:none; margin:30px 0 0; padding:0;
}
.colour-tech__steps li{
  display:flex; flex-direction:column; gap:7px; min-width:0;
  padding:14px 12px; border:1px solid #FFFFFF1F; border-radius:13px;
  background:#FFFFFF0A;
}
.colour-tech__steps b{ color:var(--red-bright,#ff443a); font-size:.78rem; letter-spacing:.08em }
.colour-tech__steps span{ color:#fff; font-size:.79rem; font-weight:650; line-height:1.2 }
@media (max-width:900px){
  .colour-tech{ grid-template-columns:1fr; min-height:0 }
  .colour-tech__visual{ min-height:330px }
  .colour-tech__visual::after{ background:linear-gradient(180deg,transparent 72%,var(--ink) 100%) }
  .colour-tech__visual img{ min-height:330px }
  .colour-tech__copy{ padding:42px 34px 38px }
}
@media (max-width:520px){
  .colour-tech{ margin-top:46px; border-radius:20px }
  .colour-tech__visual,.colour-tech__visual img{ min-height:250px }
  .colour-tech__copy{ padding:37px 22px 26px }
  .colour-tech__copy h3{ font-size:2rem }
  .colour-tech__copy p{ font-size:.92rem }
  .colour-tech__steps{ gap:7px; margin-top:24px }
  .colour-tech__steps li{ padding:12px 8px }
  .colour-tech__steps span{ font-size:.7rem }
}

.features{
  display:grid; gap:14px; margin-top:56px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .features{ grid-template-columns:repeat(3,1fr); gap:18px } }

.feat{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 26px 30px; overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.feat:hover{ border-color:var(--line-2); transform:translateY(-4px);
  box-shadow:var(--shadow-md) }
/* a thin colour edge along the top, the way a paint chip is banded */
.feat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--fc,var(--red)); opacity:.9;
}
.feat__ico{
  width:52px; height:52px; display:grid; place-items:center; border-radius:16px;
  background:var(--fc-soft,#D8241C0F); color:var(--fc,var(--red));
  margin-bottom:20px;
}
.feat__ico svg{ width:24px; height:24px }
.feat h3{
  font-size:1.08rem; font-variation-settings:"wdth" 112,"wght" 700;
  letter-spacing:-.01em; margin-bottom:8px;
}
.feat p{ color:var(--ink-2); font-size:.9375rem; line-height:1.55; margin:0 }

.feat--red,.feat--dark,.feat--light{
  --fc:var(--red); --fc-soft:#fff;
  background:var(--red); color:#fff; border-color:var(--red-deep);
}
.feat--red::before,.feat--dark::before,.feat--light::before{ background:#fff }
.feat--red .feat__ico,.feat--dark .feat__ico,.feat--light .feat__ico{
  background:#fff; color:var(--red);
}
.feat--red p,.feat--dark p,.feat--light p{ color:#FFFFFFD6 }
.feat--red:hover,.feat--dark:hover,.feat--light:hover{
  border-color:var(--red-deep); box-shadow:0 18px 44px #A81B153D;
}

/* ── 25. Contact icons, one consistent set ────────────────
   Every row uses the same outline weight and the same red,
   so no single row reads as a foreign logo drop-in. ────── */
.crow__ico{ background:#D8241C0D; color:var(--red) }
.crow__ico svg{ width:19px; height:19px; stroke-width:1.7 }

/* ── 26. Map ───────────────────────────────────────────── */
.map{ aspect-ratio:4/3; margin-top:14px }
.map iframe{ filter:none }
.map__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:16px 18px; background:var(--card);
  border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md); margin-top:-1px;
}
.map__foot b{ display:block; font-family:var(--f-display);
  font-variation-settings:"wdth" 110,"wght" 700; font-size:1rem }
.map__foot span{ display:block; color:var(--ink-2); font-size:.875rem; margin-top:2px }
.map{ border-radius:var(--r-md) var(--r-md) 0 0 }
.contact__panel .socials a{ color:#fff; background:#FFFFFF12; border-color:#FFFFFF47 }
.contact__panel .socials a:hover{ color:var(--yellow); background:#14120F2B;
  border-color:var(--yellow) }