/* ==========================================================================
   GT MOTORS CENTRE - v6  ·  "Workshop Precision"
   Every colour sampled from the logo. Every angle derived from its slashes.
   --------------------------------------------------------------------------
   carbon #05090A   edge #1E2726   steel #A9B4B9   chrome #ECF1F1
   signal #FE0F26 (graphics/display)   signal-deep #BC0916 (fills, AA-safe)
   slash  21deg from vertical - measured off the mark, bar:gap 94:53
   ========================================================================== */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:where(h1,h2,h3,h4,h5){font-weight:inherit;font-size:inherit}

/* ---------- 2. TOKENS ---------- */
:root{
  --carbon:#05090A;  --carbon-2:#0B1112; --carbon-3:#141B1B; --carbon-4:#192121;
  --edge:#1E2726;    --edge-hi:#2C3735;
  --steel:#A9B4B9;   --steel-dim:#7C888C; --steel-hi:#ECF1F1;
  --signal:#FE0F26;  --signal-deep:#BC0916; --signal-glow:rgba(254,15,38,.42);

  --f-display:"Archivo",Impact,"Arial Black",sans-serif;
  --f-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-data:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --slash:21deg;                 /* THE constant */
  --slash-grad:69deg;           /* same angle as a gradient axis (90 - 21) */

  --wrap:1360px;
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --pad-y:clamp(4.5rem,8.5vw,8.5rem);

  --t-fast:.18s; --t-mid:.34s; --t-slow:.72s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-snap:cubic-bezier(.16,1,.3,1);
}

/* ---------- 3. BASE ---------- */
body{
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--steel);
  background:var(--carbon);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--signal);color:#fff}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--signal-deep);color:#fff;
  padding:.9rem 1.4rem;font:600 .8rem/1 var(--f-body);
  letter-spacing:.1em;text-transform:uppercase;
}
.skip-link:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad-y);position:relative}
.section--tight{padding-block:clamp(3rem,5.5vw,5rem)}
.section--raise{background:var(--carbon-2)}

/* ---------- 4. TYPE ---------- */
.d1,.d2,.d3{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:125%;
  line-height:.9;
  letter-spacing:-.022em;
  text-transform:uppercase;
  color:var(--steel-hi);
  text-wrap:balance;
}
.d1{font-size:clamp(2.75rem,6.6vw,6.25rem)}
.d2{font-size:clamp(2.1rem,5.1vw,4.5rem);line-height:.94}
.d3{font-size:clamp(1.4rem,2.4vw,2.05rem);line-height:1.02;letter-spacing:-.015em}

/* Chrome - the logo's own material, reserved for the largest type */
.chrome{color:var(--steel-hi)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .chrome{
    background-image:linear-gradient(177deg,
      #FFFFFF 0%, #F2F6F6 15%, #B4C0C3 37%, #6E7B78 49%,
      #8E9B98 52.5%, #DCE4E4 68%, #FFFFFF 84%, #A6B2B5 100%);
    /* One full chrome ramp per line rather than one across the whole block,
       so a four-line heading does not fade out at the bottom. */
    background-size:100% .9em;   /* == line-height, so every line samples the same ramp */
    background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
.signal{color:var(--signal)}

.lede{
  font-size:clamp(1.0625rem,.98rem + .42vw,1.25rem);
  line-height:1.62;color:var(--steel);max-width:56ch;
}
.prose p+p{margin-top:1.1em}

/* Data type - job cards, postcodes, turnarounds, paint codes */
.data{
  font-family:var(--f-data);font-size:.6875rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel-dim);line-height:1.5;
}
.data--signal{color:var(--signal)}
.data--hi{color:var(--steel-hi)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--f-data);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:22px;height:11px;flex:none;
  background:repeating-linear-gradient(var(--slash-grad),
    var(--signal) 0 4px,transparent 4px 6.3px);
}

/* ---------- 5. THE SLASH SYSTEM ---------- */
.slash-rule{
  height:9px;
  background:repeating-linear-gradient(var(--slash-grad),
    var(--signal) 0 13px,transparent 13px 20.3px);
}
.slash-rule--dim{
  background:repeating-linear-gradient(var(--slash-grad),
    var(--edge-hi) 0 13px,transparent 13px 20.3px);
}
/* Carbon weave - the logo's texture at 1/50th strength */
.weave::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("../assets/weave.png");
  background-size:16px 16px;
}
.weave>*{position:relative;z-index:1}

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg:var(--signal-deep); --btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--f-body);font-size:.8125rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;line-height:1;
  border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             border-color var(--t-fast),color var(--t-fast);
  overflow:hidden;
}
.btn>*{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(var(--slash-grad),transparent 45%,rgba(255,255,255,.24) 50%,transparent 55%);
  transform:translateX(-140%);
  transition:transform var(--t-slow) var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(140%)}
.btn:hover{background:var(--signal);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--steel-hi);border-color:var(--edge-hi)}
.btn--ghost:hover{background:transparent;border-color:var(--signal);color:var(--signal)}
.btn--chrome{--btn-bg:var(--steel-hi);--btn-fg:var(--carbon)}
.btn--chrome:hover{background:#fff;color:var(--carbon)}
.btn--lg{padding:1.15rem 2rem;font-size:.875rem}
.btn--block{width:100%;justify-content:center}
.btn__arrow{transition:transform var(--t-fast) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.9375rem;color:var(--steel-hi);
  border-bottom:1px solid var(--edge-hi);padding-bottom:2px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.link-arrow:hover{color:var(--signal);border-color:var(--signal)}

/* ---------- 7. HEADER ---------- */
.topbar{
  background:var(--signal-deep);color:#fff;
  font-family:var(--f-data);font-size:.625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
}
.topbar__in{
  max-width:var(--wrap);margin-inline:auto;padding:.25rem var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.topbar a{display:inline-block;padding-block:.35rem;border-bottom:1px solid rgba(255,255,255,.45)}
.topbar a:hover{border-color:#fff}
.topbar__hide{display:none}
@media (min-width:840px){.topbar__hide{display:inline}}

.head{
  position:sticky;top:0;z-index:100;
  /* Deliberately opaque rather than backdrop-blurred: on a near-black
     ground the blur is imperceptible and costs a full-screen capture
     every frame. */
  background:rgba(5,9,10,.94);
  border-bottom:1px solid var(--edge);
  transition:background var(--t-mid),border-color var(--t-mid);
}
.head.is-stuck{background:var(--carbon);border-bottom-color:var(--edge-hi)}
.head__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter);
  height:74px;display:flex;align-items:center;gap:clamp(.75rem,3vw,2.5rem);
}
.brand{display:flex;align-items:center;gap:.85rem;flex:none;z-index:101}
.brand img{height:40px;width:auto}
.brand__tag{
  font-family:var(--f-data);font-size:.5625rem;letter-spacing:.19em;
  color:var(--steel-dim);text-transform:uppercase;border-left:1px solid var(--edge-hi);
  padding-left:.85rem;line-height:1.4;
}
@media (max-width:560px){.brand__tag{display:none}}

.nav{margin-left:auto;display:none}
@media (min-width:1024px){.nav{display:block}}
.nav ul{display:flex;gap:.2rem}
.nav a{
  position:relative;display:block;padding:.65rem .9rem;
  font-size:.875rem;font-weight:600;color:var(--steel);
  transition:color var(--t-fast);
}
.nav a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.28rem;height:6px;
  background:repeating-linear-gradient(var(--slash-grad),
    var(--signal) 0 4px,transparent 4px 6.3px);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--t-fast),transform var(--t-fast) var(--ease);
}
.nav a:hover{color:var(--steel-hi)}
.nav a:hover::after,.nav a[aria-current="page"]::after{opacity:1;transform:none}
.nav a[aria-current="page"]{color:var(--steel-hi)}

.head__cta{display:none;flex:none}
@media (min-width:1024px){.head__cta{display:inline-flex}}

.burger{
  margin-left:auto;width:46px;height:46px;flex:none;z-index:101;
  display:grid;place-content:center;gap:5px;
  border:1px solid var(--edge-hi);
}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:var(--steel-hi);
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;
  background:var(--carbon);
  padding:calc(74px + 2.5rem) var(--gutter) 2rem;
  display:flex;flex-direction:column;
  transform:translateY(-101%);
  transition:transform var(--t-slow) var(--ease-snap);
  overflow-y:auto;
}
.drawer[data-open="true"]{transform:none}
@media (min-width:1024px){.drawer{display:none}}
.drawer a.drawer__link{
  font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:clamp(1.9rem,8.5vw,2.75rem);line-height:1.14;text-transform:uppercase;
  color:var(--steel-hi);letter-spacing:-.02em;
  padding:.4rem 0;border-bottom:1px solid var(--edge);
}
.drawer a.drawer__link:last-of-type{border-bottom:0}
.drawer .btn{margin-top:1.75rem;justify-content:center}
.drawer__meta{margin-top:auto;padding-top:2.5rem}
.drawer__meta a{display:inline-block;padding-block:.35rem}

/* ---------- 8. SECTION HEADS ---------- */
.head-block{max-width:62ch;margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.head-block .lede{margin-top:1.35rem}
.head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,4.5vw,4rem);
}
.head-row .head-block{margin-bottom:0}

/* ---------- 9. REVEAL ---------- */
.rv{opacity:0;transform:translate(-14px,22px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}.rv-d6{transition-delay:.42s}

/* ---------- 10. FOOTER ---------- */
.foot{background:var(--carbon-2);border-top:1px solid var(--edge);
      padding-block:clamp(3.5rem,6vw,5.5rem) 0}
.foot__grid{display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.foot__h{
  font-family:var(--f-data);font-size:.625rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--steel-hi);margin-bottom:1.1rem;
}
.foot p,.foot li{font-size:.9375rem;line-height:1.7}
.foot li+li{margin-top:.3rem}
.foot a{display:inline-block;padding-block:.15rem;transition:color var(--t-fast)}
.foot a:hover{color:var(--signal)}
.foot__brand img{height:66px;width:auto;margin-bottom:1.35rem}
.foot__bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.5rem;
  border-top:1px solid var(--edge);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}

/* ---------- 11. WHATSAPP DOCK ---------- */
.wa{
  position:fixed;right:clamp(.85rem,2.5vw,1.6rem);bottom:clamp(.85rem,2.5vw,1.6rem);
  z-index:90;display:flex;align-items:center;gap:.8rem;
  background:#1EBE5D;color:#04120A;padding:.8rem 1.1rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid);
}
.wa:hover{transform:translateY(-3px);box-shadow:0 20px 52px rgba(0,0,0,.65)}
.wa svg{width:24px;height:24px;flex:none;fill:currentColor}
.wa b{display:block;font-size:.8125rem;font-weight:700;line-height:1.25}
.wa small{display:block;font-family:var(--f-data);font-size:.5625rem;
  letter-spacing:.1em;text-transform:uppercase;opacity:.75}
@media (max-width:680px){.wa__text{display:none}.wa{padding:.95rem}}

/* Skip rendering sections that are nowhere near the viewport. The page is
   long and image-heavy; without this the browser rasterises the whole
   document. Never apply to a section containing position:sticky. */
.cv{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* ---------- 12. UTILITIES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.mt-l{margin-top:clamp(2rem,4vw,3rem)}
.mt-m{margin-top:1.5rem}

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

/* Trade pages call the landline instead - fleet enquiries are not routed
   through WhatsApp, so the dock must not offer it. */
.wa--phone{background:var(--steel-hi);color:var(--carbon)}
.wa--phone:hover{background:#fff}