/* core.css */
:root{
  /* Colour — graphite / charcoal / steel / off-white + gold sampled from the Champion trophy */
  --graphite:#101214;
  --charcoal:#181B1F;
  --steel:#343A40;
  --steel-soft:#4A525A;
  --off:#F4F4F1;
  --off-dim:#B9BDC0;
  --gold:#DFA43A;
  --gold-bright:#F3CE72;
  --gold-deep:#8F6415;
  --line:rgba(244,244,241,.13);
  --line-strong:rgba(244,244,241,.26);

  /* Type */
  /* One superfamily across the whole site. Archivo carries a width axis,
     so headings, body and labels are the same face at different widths —
     consistent by construction, not by coincidence. */
  --display:'Archivo','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --body:'Archivo','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --mono:'Archivo','Helvetica Neue','Segoe UI',Arial,sans-serif;
  --wide:118%;   /* headings */
  --label:106%;  /* eyebrows, buttons, small caps labels */

  --pad:clamp(20px,5vw,64px);
  --sect:clamp(64px,9vw,132px);
  --maxw:1360px;
  --logo-paper:#0B0D0E;   /* banner interior in the logo — matches the dark UI */
  --r:2px;      /* panels, cards, image frames — stays architectural */
  --btn-r:7px;  /* all CTAs and interactive controls */
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--graphite);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--graphite);color:var(--off);
  font-family:var(--body);font-size:16px;line-height:1.66;font-stretch:100%;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

[hidden]{display:none !important}
::selection{background:var(--gold);color:#0B0C0D}
.head-tel,.hero-tel strong,.urgent a,.enq-urgent a,.cred-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

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

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#0B0C0D;padding:12px 18px;z-index:999;font-weight:600}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;font-stretch:var(--wide);text-transform:uppercase;line-height:1.0;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1+.lead,h2+.lead,h2+p,h3+p{margin-top:18px}
p.lead{text-wrap:pretty}
h1{font-size:clamp(2.05rem,4.3vw,3.65rem);font-weight:800;line-height:1.02;letter-spacing:-.018em}
h2{font-size:clamp(1.6rem,2.9vw,2.55rem)}
h3{font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.14;letter-spacing:-.004em}
p{margin:0 0 1.1em}
figure{margin:0}
blockquote{margin:0}
.lead{font-size:clamp(1.04rem,1.35vw,1.2rem);color:#E2E5E7;max-width:60ch}
.dot{color:var(--gold)}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:600;font-stretch:var(--label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:12px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.eyebrow.plain::before{display:none}

.muted{color:#BFC4C8}
.small{font-size:.86rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:.74rem;font-weight:600;font-stretch:var(--label);letter-spacing:.15em;text-transform:uppercase;
  padding:16px 26px;border:1px solid transparent;border-radius:var(--btn-r);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
  min-height:52px;text-align:center;
}
.btn-gold{background:var(--gold);color:#0B0C0D;font-weight:500}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ghost{border-color:var(--line-strong);color:var(--off);background:transparent}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
.btn-solid{background:var(--off);color:#0B0C0D}
.btn-solid:hover{background:#fff}
.btn:active{transform:translateY(1px)}
.btn .arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(11,13,14,.97);border-bottom:1px solid var(--line);transition:background .3s ease}
.site-head.scrolled{background:#0B0D0E}
.head-inner{position:relative;z-index:2;background:inherit;display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);justify-content:space-between;padding-top:9px;padding-bottom:9px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{height:70px;width:auto;flex:none;color:var(--off);display:block}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-type b{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.03rem;letter-spacing:.03em;text-transform:uppercase;color:var(--off)}
.brand-type i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:.56rem;letter-spacing:.33em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav{display:flex;gap:clamp(16px,1.7vw,26px);align-items:center;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;color:#C9CDD1}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s ease}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.head-actions{display:flex;align-items:center;gap:18px;flex:none}
.head-tel{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.92rem;letter-spacing:.05em;color:var(--off);white-space:nowrap}
.head-tel:hover{color:var(--gold-bright)}
.head-mail{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#B7BDC1}
.head-mail:hover{color:var(--gold-bright)}
.ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
/* ---------- Burger → trophy morph ----------
   The three bars converge and fade, and the actual Champion cup from the logo
   artwork grows out of them. Same paths as the header logo, via <use>. */
.burger{
  display:none;width:52px;height:52px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--btn-r);cursor:pointer;
  transition:border-color .35s ease,background .35s ease;-webkit-tap-highlight-color:transparent;
}
.burger:hover{border-color:var(--gold)}
.burger[aria-expanded="true"]{border-color:var(--gold);background:rgba(223,164,58,.09)}

.cup{position:relative;display:block;width:35px;height:28px}
.cup svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}

/* bars */
.burger-bars rect{
  fill:var(--off);transform-origin:17.5px 14px;
  transition:transform .42s cubic-bezier(.6,0,.3,1),opacity .28s ease;
}
.burger[aria-expanded="true"] .burger-bars rect{opacity:0}
.burger[aria-expanded="true"] .burger-bars .b1{transform:translateY(7px) scaleX(.16)}
.burger[aria-expanded="true"] .burger-bars .b2{transform:scaleX(.12)}
.burger[aria-expanded="true"] .burger-bars .b3{transform:translateY(-7px) scaleX(.16)}

/* the cup itself */
.burger-cup{
  opacity:0;transform:scale(.35) rotate(-10deg);transform-origin:50% 55%;
  transition:opacity .28s ease,transform .5s cubic-bezier(.34,1.45,.5,1);
}
.burger[aria-expanded="true"] .burger-cup{
  opacity:1;transform:scale(1) rotate(0);transition-delay:.14s;
}

@media (prefers-reduced-motion:reduce){
  .burger-bars rect,.burger-cup{transition:none}
}

@media (max-width:1240px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:760px){
  .head-actions .btn-gold{display:none}
  .head-tel{font-size:.86rem}
  .brand-mark{height:62px}
}
@media (max-width:420px){
  .head-tel{font-size:.8rem}
  .head-tel .ico{display:none}
  .brand-mark{height:56px}
}

/* ---------- Mobile menu ----------
   Opening choreography, in order:
   1. panel fades up
   2. rows settle in from the left (fast, so they're in place before the show)
   3. each icon lights and draws itself, ONE AT A TIME, top to bottom
   4. the phone button flashes twice to finish on the call to action
   Timings are driven by --d on each row so the sequence stays in step. */
.mobile-nav{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:55;background:#0B0D0E;
  padding-top:78px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.mobile-nav.open{opacity:1;visibility:visible}

.mn-item{
  display:flex;align-items:center;gap:16px;padding:19px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(-14px);
  transition:opacity .34s ease,transform .38s cubic-bezier(.2,.7,.2,1);
}
.mobile-nav.open .mn-item{opacity:1;transform:none}
/* Timing lives on the row wrappers, not on .mn-item itself. Two of the rows
   are wrapped in .mn-group (the expandable ones), so counting .mn-item with
   nth-child restarts inside those wrappers and the sequence falls apart.
   Custom properties inherit, so the button inside a group picks these up. */
.mobile-nav .wrap > *{--d:0s;--rd:0s}
.mobile-nav .wrap > :nth-child(1){--d:.46s;--rd:.05s}
.mobile-nav .wrap > :nth-child(2){--d:.80s;--rd:.10s}
.mobile-nav .wrap > :nth-child(3){--d:1.14s;--rd:.15s}
.mobile-nav .wrap > :nth-child(4){--d:1.48s;--rd:.20s}
.mobile-nav .wrap > :nth-child(5){--d:1.82s;--rd:.25s}
.mobile-nav .wrap > :nth-child(6){--d:2.16s;--rd:.30s}
.mobile-nav .wrap > :nth-child(7){--d:2.50s;--rd:.35s}
.mn-item{transition-delay:var(--rd)}

.mn-ico{
  width:46px;height:46px;flex:none;border:1px solid var(--line-strong);border-radius:var(--btn-r);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:border-color .3s ease,background .3s ease;
}
.mn-ico svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mn-ico svg [data-draw]{stroke-dasharray:64;stroke-dashoffset:64}

/* the box lights as that row's turn arrives, then settles */
.mobile-nav.open .mn-ico{animation:icoTurn .62s cubic-bezier(.3,.8,.3,1) both;animation-delay:var(--d)}
@keyframes icoTurn{
  0%  {transform:scale(.9);border-color:var(--line-strong);background:transparent}
  45% {transform:scale(1.06);border-color:var(--gold);background:rgba(223,164,58,.16)}
  100%{transform:scale(1);border-color:rgba(223,164,58,.38);background:rgba(223,164,58,.05)}
}
/* the line work draws itself in the same beat */
.mobile-nav.open .mn-ico svg [data-draw]{animation:draw .5s cubic-bezier(.4,0,.25,1) both;animation-delay:var(--d)}
.mobile-nav.open .mn-ico svg [data-draw]:nth-of-type(2){animation-delay:calc(var(--d) + .12s)}
@keyframes draw{ to{stroke-dashoffset:0} }

.mn-txt{flex:1;display:flex;flex-direction:column;gap:5px}
.mn-txt b{
  font-family:var(--display);font-weight:700;font-stretch:112%;text-transform:uppercase;
  font-size:1.12rem;letter-spacing:-.004em;line-height:1;color:var(--off);
}
.mn-txt span{font-size:.82rem;color:#A9B0B5}
.mn-item .arw{color:var(--gold);transition:transform .3s ease;font-size:1.1rem;opacity:0}
.mobile-nav.open .mn-item .arw{animation:arwIn .4s ease both;animation-delay:calc(var(--d) + .18s)}
@keyframes arwIn{from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none}}
.mn-item:hover .mn-ico,.mn-item:active .mn-ico{border-color:var(--gold);background:rgba(223,164,58,.12)}
.mn-item:hover .arw,.mn-item:active .arw{transform:translateX(5px)}

/* expandable groups */
.mn-group{position:relative}
.mn-toggle{width:100%;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;font:inherit}
.chev{width:11px;height:11px;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s ease;flex:none;margin-right:4px}
.mn-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}
.mn-toggle[aria-expanded="true"] .mn-ico{border-color:var(--gold);background:rgba(223,164,58,.12)}
.mn-sub{display:grid;overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.3,.8,.3,1)}
.mn-sub.open{max-height:520px}
.mn-sub a{
  padding:14px 0 14px 62px;border-bottom:1px solid var(--line);font-size:.98rem;color:#CDD1D4;
  position:relative;transition:color .2s ease;
}
.mn-sub a::before{content:"";position:absolute;left:40px;top:50%;width:9px;height:1px;background:var(--gold);opacity:.6}
.mn-sub a:hover,.mn-sub a:active{color:var(--gold-bright)}
.mn-sub .mn-sub-lead{font-weight:600;color:var(--off)}
.mn-sub .mn-sub-all{font-family:var(--mono);font-size:.72rem;font-weight:600;font-stretch:var(--label);
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}

/* live status inside the menu */
.mn-status{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#CDD1D4;margin-bottom:16px}
.dotlive{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 4px rgba(223,164,58,.18)}
.mn-status.closed .dotlive{background:#8D949A;box-shadow:0 0 0 4px rgba(141,148,154,.15)}
.mn-email{display:block;text-align:center;font-size:.92rem;color:#BFC4C8;padding:6px 0;word-break:break-word}
.mn-email:hover{color:var(--gold-bright)}
.mn-closed-note{font-size:.9rem;color:#BFC4C8;margin:10px 0 0;line-height:1.55}

.mn-contact{padding:26px 0 calc(48px + env(safe-area-inset-bottom));display:grid;gap:12px;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease 2.72s,transform .45s ease 2.72s}
.mobile-nav.open .mn-contact{opacity:1;transform:none}
.mn-note{font-size:.82rem;color:#A9B0B5;margin:0 0 6px}

/* the sequence lands on the phone number */
.mn-call{position:relative;overflow:hidden}
.mn-call .ico{transition:transform .2s ease}
.mobile-nav.open .mn-call{animation:telFlash 1s cubic-bezier(.4,0,.3,1) 3.02s 2 both}
.mobile-nav.open .mn-call .ico{animation:telRing .9s ease 3.08s 2 both}
@keyframes telFlash{
  0%,100%{background:transparent;border-color:var(--line-strong);color:var(--off);box-shadow:0 0 0 0 rgba(223,164,58,0)}
  22%    {background:rgba(223,164,58,.2);border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 0 0 rgba(223,164,58,.4)}
  70%    {background:rgba(223,164,58,.05);border-color:rgba(223,164,58,.5);box-shadow:0 0 0 12px rgba(223,164,58,0)}
}
@keyframes telRing{
  0%,60%,100%{transform:rotate(0)}
  10%,30%,50%{transform:rotate(-13deg)}
  20%,40%    {transform:rotate(13deg)}
}

@media (prefers-reduced-motion:reduce){
  .mn-item,.mn-contact{opacity:1;transform:none;transition:none}
  .mobile-nav.open .mn-ico,.mobile-nav.open .mn-ico svg [data-draw],
  .mobile-nav.open .mn-item .arw,.mobile-nav.open .mn-call,.mobile-nav.open .mn-call .ico{animation:none}
  .mn-ico svg [data-draw]{stroke-dashoffset:0}
  .mn-item .arw{opacity:1}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--graphite);padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,96px);min-height:min(88vh,880px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% 32%}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(11,13,14,.9) 0%,rgba(11,13,14,.78) 34%,rgba(16,18,20,.4) 62%,rgba(16,18,20,.2) 100%),
    linear-gradient(to top,rgba(11,13,14,.92) 0%,rgba(11,13,14,0) 46%);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(32px,5vw,72px);align-items:end;width:100%}
.hero h1{margin-bottom:26px;max-width:14ch}
.hero .lead{margin-bottom:32px;color:#DDE0E2}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero-tel{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;color:#C9CDD1}
.hero-tel strong{color:var(--off);font-size:1.06rem;font-weight:500;letter-spacing:.02em}
.hero-tel:hover strong{color:var(--gold-bright)}

/* ---------- Quick enquiry (hero) ---------- */
.quick{
  background:linear-gradient(180deg,rgba(24,27,31,.97),rgba(16,18,20,.99));
  border:1px solid var(--line);border-top:2px solid var(--gold);
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.quick h2{font-size:clamp(1.15rem,1.5vw,1.4rem);margin-bottom:9px}
.quick .qsub{font-size:.95rem;color:#BFC4C8;margin-bottom:20px}
.field{margin-bottom:14px}
.field label,.lbl{
  display:block;font-family:var(--mono);font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:#AEB4B9;margin-bottom:7px;
}
.inp{
  width:100%;background:#0D0F11;border:1px solid var(--line);border-radius:var(--btn-r);
  padding:14px 15px;font-size:1rem;color:var(--off);transition:border-color .2s ease,background .2s ease;min-height:52px;
}
.inp::placeholder{color:#8A9197}
.inp:hover{border-color:var(--line-strong)}
.inp:focus{outline:none;border-color:var(--gold);background:#0F1214}
textarea.inp{min-height:110px;resize:vertical;line-height:1.55}
.inp[aria-invalid="true"]{border-color:#D2604A}
.err{display:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#E08A73;margin-top:6px}
.err.show{display:block}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);background:#0D0F11;border-radius:var(--btn-r);padding:11px 14px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#CDD1D4;
  cursor:pointer;transition:all .2s ease;min-height:44px;
}
.chip:hover{border-color:var(--steel-soft);color:var(--off)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0B0C0D;font-weight:500}
.quick .btn{width:100%;margin-top:6px}
.urgent{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.urgent .u-lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#AEB4B9}
.urgent a{font-family:var(--mono);font-size:1rem;color:var(--gold-bright);letter-spacing:.03em}
.urgent a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:980px){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .hero h1{max-width:none}
  .hero-bg img{object-position:60% 26%}
}

/* ---------- Sections ---------- */
section{padding-top:var(--sect);padding-bottom:var(--sect);background:var(--graphite)}
.tight{padding-top:0}
.break + section,.safety + section,.contact + section,.enquiry + section,.local + section,.cred + section{padding-top:var(--sect)}
.sec-head{margin-bottom:clamp(34px,4.5vw,60px);max-width:62ch;margin-left:0}
.sec-head h2{margin-bottom:16px}

/* ---------- Projects grid ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,18px)}
.proj{position:relative;overflow:hidden;display:block;background:var(--charcoal)}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,14,.92) 0%,rgba(11,13,14,.15) 55%,rgba(11,13,14,0) 100%);transition:opacity .4s ease}
.proj:hover img{transform:scale(1.045)}
.proj-meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.6vw,24px);z-index:2}
.proj-type{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:clamp(.88rem,1.05vw,1.02rem);text-transform:uppercase;letter-spacing:.005em;line-height:1.2;margin-bottom:7px}
.proj-loc{font-family:var(--mono);font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;color:#B7BDC1}
.proj-view{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-bright);
  display:flex;align-items:center;gap:8px;margin-top:12px;opacity:0;transform:translateY(6px);transition:all .35s ease;
}
.proj:hover .proj-view,.proj:focus-visible .proj-view{opacity:1;transform:none}
.p-a{grid-column:span 4;aspect-ratio:16/11}
.p-b{grid-column:span 2;aspect-ratio:3/4}
.p-c{grid-column:span 2;aspect-ratio:1/1}
.p-d{grid-column:span 2;aspect-ratio:1/1}
.p-e{grid-column:span 2;aspect-ratio:1/1}
.p-f{grid-column:span 3;aspect-ratio:16/10}
.p-g{grid-column:span 3;aspect-ratio:16/10}
@media (max-width:860px){
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .p-a{grid-column:span 2;aspect-ratio:16/11}
  .p-b,.p-c,.p-d,.p-e{grid-column:span 1;aspect-ratio:1/1}
  .p-f,.p-g{grid-column:span 2;aspect-ratio:16/10}
}

/* ---------- Safety ---------- */
.safety{position:relative;isolation:isolate;background:var(--graphite)}
.contact{background:var(--graphite)}
.safety-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.safety-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.72)}
.safety-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(16,18,20,.96) 0%,rgba(16,18,20,.88) 45%,rgba(16,18,20,.6) 100%)}
.safety-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.confirm-box{border:1px solid var(--line);background:rgba(11,13,14,.72);padding:clamp(22px,2.4vw,32px)}
.confirm-box h3{font-size:.94rem;margin-bottom:18px;color:var(--off)}
.confirm-list{list-style:none;margin:0;padding:0}
.confirm-list li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:#CDD1D4;
}
.confirm-list li:last-child{border-bottom:0}
.confirm-list .st{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.confirm-list .st.ok{color:var(--off)}
.confirm-list li{padding:11px 0}
.cisrs-note{font-size:.88rem;color:#BFC4C8;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:880px){.safety-grid{grid-template-columns:1fr}}

/* ---------- Text links (in-copy, arrow) ---------- */
.textlink{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:600;font-stretch:var(--label);
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  padding-bottom:5px;border-bottom:1px solid rgba(223,164,58,.35);transition:color .25s ease,border-color .25s ease;
}
.textlink:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
.textlink .arw{transition:transform .25s ease}
.textlink:hover .arw{transform:translateX(4px)}
.svc-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--mono);font-weight:600;
  font-stretch:var(--label);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.svc:hover .svc-link{color:var(--gold-bright)}
.svc-link .arw{transition:transform .3s ease}
.svc:hover .svc-link .arw{transform:translateX(4px)}
.sec-cta{margin-top:clamp(30px,3.5vw,46px);display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Full-bleed photography break ---------- */
section.break{padding-top:0;padding-bottom:0}
.break{position:relative;isolation:isolate;padding:0;min-height:clamp(300px,46vh,520px);display:flex;align-items:flex-end;overflow:hidden}
.break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;z-index:-2}
.break::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(11,13,14,.82) 0%,rgba(11,13,14,.1) 58%,rgba(11,13,14,.24) 100%)}
.break .wrap{padding-bottom:clamp(28px,4vw,52px);width:100%}
.break p{
  margin:0;font-family:var(--display);font-weight:700;font-stretch:var(--wide);text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.008em;color:var(--off);
  text-shadow:0 2px 24px rgba(0,0,0,.65);
}

/* ---------- Final contact ---------- */
.contact{position:relative;isolation:isolate;text-align:center}
.contact-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.contact-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.contact-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(11,13,14,.93),rgba(11,13,14,.86))}
.contact h2{margin-bottom:16px}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4vw,54px);text-align:left}
.route{background:rgba(16,18,20,.86);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:10px;transition:background .3s ease}
.route:hover{background:rgba(24,27,31,.96)}
.route .rl{font-family:var(--mono);font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.route .rv{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:clamp(1rem,1.25vw,1.18rem);text-transform:uppercase;letter-spacing:-.005em;line-height:1.18;word-break:break-word}
.route .rn{font-size:.92rem;color:#AEB4B9;margin:0}
@media (max-width:820px){.routes{grid-template-columns:1fr}}

/* ---------- Opening hours ---------- */
.head-status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;font-weight:600;
  font-stretch:var(--label);letter-spacing:.1em;text-transform:uppercase;color:#CDD1D4;white-space:nowrap}
.head-status.closed{color:#AEB4B9}
.hours-block{margin-top:clamp(34px,4vw,54px);border:1px solid var(--line);background:rgba(16,18,20,.86);
  padding:clamp(24px,2.6vw,34px);text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.hours-h{font-size:.94rem;margin-bottom:18px}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours th{text-align:left;font-weight:400;color:#CDD1D4;padding:9px 0;border-bottom:1px solid var(--line)}
.hours td{text-align:right;color:#BFC4C8;padding:9px 0;border-bottom:1px solid var(--line)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours tr.today th,.hours tr.today td{color:var(--off);font-weight:500}
.hours td.shut{color:#8D949A}
.foot-status{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:.9rem;color:#CDD1D4}
@media (max-width:1520px){ .head-status{display:none} }

/* ---------- Footer ---------- */
.site-foot{background:#0B0D0E;border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px);padding-bottom:120px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(26px,3vw,48px)}
.foot-brand .foot-logo{height:118px;width:auto;margin-bottom:22px;color:var(--off);display:block}
.foot-brand address{font-style:normal;font-size:.95rem;color:#BFC4C8;line-height:1.9}
.foot-brand address a:hover{color:var(--gold-bright)}
.foot-col .foot-h{font-stretch:100%;line-height:1.3;font-family:var(--mono);font-weight:500;font-size:.71rem;letter-spacing:.2em;color:#A2A9AE;margin-bottom:16px;text-transform:uppercase}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{font-size:.95rem;color:#B9BDC0}
.foot-col a:hover{color:var(--gold-bright)}
.foot-bottom{margin-top:clamp(36px,4vw,60px);padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:#8D949A}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Sticky mobile bar ---------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line-strong);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -14px 30px -18px rgba(0,0,0,.9);
}
.sticky-bar a{
  background:#0B0D0E;color:var(--off);display:flex;align-items:center;justify-content:center;gap:9px;
  padding:17px 10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;min-height:58px;
}
.sticky-bar a.gold{background:var(--gold);color:#0B0C0D;font-weight:500}
body.menu-open .sticky-bar{transform:translateY(105%);pointer-events:none}
@media (max-width:900px){.sticky-bar{display:grid}}


/* ---------- Landing choreography ----------
   1. heading in the quick-enquiry card types itself
   2. the hero phone number rings and flashes gold
   3. CTAs sweep once as they scroll into view
   All one-shot, all disabled under reduced motion. */

/* 2 — hero phone number */
.hero-tel .ico{width:15px;height:15px;stroke:var(--gold);flex:none}
.hero-tel.ring .ico{animation:telRing .9s ease 2}
.hero-tel.ring strong{animation:numFlash 1.05s cubic-bezier(.4,0,.3,1) 2}
@keyframes numFlash{
  0%,100%{color:var(--flash-base,#F4F4F1);text-shadow:none}
  25%    {color:var(--gold-bright);text-shadow:0 0 18px rgba(223,164,58,.55)}
  60%    {color:var(--gold);text-shadow:0 0 6px rgba(223,164,58,.2)}
}
.head-tel.ring .ico{animation:telRing .9s ease 2}
.head-tel.ring span{animation:numFlash 1.05s cubic-bezier(.4,0,.3,1) 2}

/* 3 — CTA attention sweep, once per button as it arrives */
.btn,.sticky-bar a.gold{position:relative;overflow:hidden}
.btn::after,.sticky-bar a.gold::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-125%);
  background:linear-gradient(104deg,transparent 26%,rgba(255,255,255,.42) 50%,transparent 74%);
}
.btn-ghost::after{background:linear-gradient(104deg,transparent 26%,rgba(223,164,58,.34) 50%,transparent 74%)}
.btn.cue::after,.sticky-bar a.gold.cue::after{animation:sweep .95s cubic-bezier(.35,0,.2,1)}
@keyframes sweep{
  0%  {opacity:0;transform:translateX(-125%)}
  18% {opacity:1}
  100%{opacity:0;transform:translateX(125%)}
}
.btn-gold.cue,.sticky-bar a.gold.cue{animation:cueLift .85s cubic-bezier(.3,.8,.3,1)}
@keyframes cueLift{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(223,164,58,0)}
  32%    {transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(223,164,58,.75)}
}
.btn-ghost.cue{animation:cueEdge .85s ease}
@keyframes cueEdge{
  0%,100%{border-color:var(--line-strong);color:var(--off)}
  35%    {border-color:var(--gold);color:var(--gold-bright)}
}

@media (prefers-reduced-motion:reduce){
  .caret{display:none}
  .hero-tel.ring .ico,.hero-tel.ring strong,.head-tel.ring .ico,.head-tel.ring span,
  .btn.cue::after,.btn-gold.cue,.btn-ghost.cue,.sticky-bar a.gold.cue{animation:none !important}
}

/* ---------- Reveal ---------- */
/* Scroll reveal — desktop only. On touch devices content is painted at full
   opacity from the start: fast momentum scrolling used to catch sections
   mid-fade, which read as washed-out text. */
.rv{opacity:1;transform:none}
@media (min-width:901px) and (hover:hover){
  .rv{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1 !important;transform:none !important}
}
.page-hero .lead{max-width:62ch}
.page-hero .hero-ctas{margin-top:30px;margin-bottom:0}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
@media (max-width:900px){.deflist{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.deflist{grid-template-columns:1fr}}
.step-row .n{font-family:var(--display);font-weight:800;font-stretch:var(--wide);font-size:1.35rem;color:var(--gold);line-height:1}
@media (max-width:560px){.step-row{grid-template-columns:1fr;gap:8px}}
@media (max-width:900px){.linkgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.linkgrid{grid-template-columns:1fr}}
@media (max-width:700px){.media-band{grid-template-columns:1fr 1fr}}

/* current page in the navigation */
.nav a.current{color:var(--off)}
.nav a.current::after{right:0;background:var(--gold)}
.mn-item.current .mn-txt b{color:var(--gold-bright)}
.mn-item.current .mn-ico{border-color:var(--gold);background:rgba(223,164,58,.1)}

/* header contact reduced to two icons */
.head-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--btn-r);color:var(--off);flex:none;
  transition:border-color .25s ease,color .25s ease,background .25s ease}
.head-ico:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(223,164,58,.08)}
.head-ico .ico{width:18px;height:18px}
@media (max-width:420px){.head-ico{width:40px;height:40px}}
/* home.css */
/* ---------- Structural hairlines (scaffold standards) ---------- */
.ruled{position:relative}
.ruled::before,.ruled::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none;
}
.ruled::before{left:max(calc((100vw - var(--maxw))/2 + var(--pad) - 26px),14px)}
.ruled::after{right:max(calc((100vw - var(--maxw))/2 + var(--pad) - 26px),14px)}
@media (max-width:860px){.ruled::before,.ruled::after{display:none}}

/* ---------- Credibility strip ---------- */
.cred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--charcoal)}
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.cred-item{padding:clamp(26px,3vw,40px) clamp(16px,2vw,32px);border-right:1px solid var(--line)}
.cred-item:last-child{border-right:0}
.cred-num{font-family:var(--display);font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:800;font-stretch:var(--wide);color:var(--gold);line-height:1;margin-bottom:10px}
.cred-num.text{font-size:clamp(1.15rem,1.5vw,1.45rem);letter-spacing:-.008em;line-height:1.1}
.cred-lab{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#BFC4C8}
.cred-item.placeholder .cred-num{color:#9AA1A7}
@media (max-width:820px){
  .cred-grid{grid-template-columns:repeat(2,1fr)}
  .cred-item:nth-child(2n){border-right:0}
  .cred-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

.devnote{
  display:block;font-family:var(--mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);border:1px dashed rgba(223,164,58,.55);padding:6px 9px;margin-top:12px;border-radius:var(--r);
}

/* ---------- Intro split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.split-media{position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line)}
.split-tag{
  position:absolute;left:0;bottom:0;background:var(--graphite);border-top:2px solid var(--gold);
  padding:14px 20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#CDD1D4;
}
@media (max-width:860px){.split{grid-template-columns:1fr}.split-media img{aspect-ratio:16/11}}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.svc{background:var(--graphite);padding:0;position:relative;overflow:hidden}
.svc-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.svc:hover .svc-img img{transform:scale(1.05);filter:grayscale(0) contrast(1.02)}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,18,20,.9),rgba(16,18,20,.15))}
.svc-body{padding:clamp(20px,2vw,28px)}
.svc h3{margin-bottom:10px}
.svc h3 em{font-style:normal;color:var(--gold);font-family:var(--mono);font-size:.69rem;font-weight:600;font-stretch:var(--label);letter-spacing:.2em;display:block;margin-bottom:9px}
.svc p{font-size:.96rem;color:#BFC4C8;margin:0}
@media (max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}

/* ---------- Featured ---------- */
.feature{display:grid;grid-template-columns:1.55fr 1fr;gap:0;border:1px solid var(--line);background:var(--charcoal)}
.feature-img{position:relative;min-height:420px}
.feature-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feature-panel{padding:clamp(26px,3vw,46px);display:flex;flex-direction:column;justify-content:center}
.spec{border-top:1px solid var(--line);padding:15px 0;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline}
.spec:last-of-type{border-bottom:1px solid var(--line);margin-bottom:26px}
.spec dt{font-family:var(--mono);font-size:.71rem;letter-spacing:.18em;text-transform:uppercase;color:#AEB4B9}
.spec dd{margin:0;font-size:.95rem;color:#D7DADC}
.spec dd.tbc{color:#A2A9AE;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em}
@media (max-width:880px){.feature{grid-template-columns:1fr}.feature-img{min-height:0;aspect-ratio:16/10}}

/* ---------- Principles ---------- */
.principles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.principle{background:var(--graphite);padding:clamp(22px,2.2vw,32px);position:relative}
.principle::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--gold)}
.principle h3{font-size:.94rem;letter-spacing:.04em;margin-bottom:12px}
.principle p{font-size:.95rem;color:#BFC4C8;margin:0}
@media (max-width:1000px){.principles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.principles{grid-template-columns:1fr}}

/* ---------- Testimonials (genuine Google reviews) ---------- */
.pullquote{max-width:none;margin:0 0 clamp(40px,5vw,68px);position:relative}
.pullquote .qm{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:.55;color:var(--gold);display:block;margin-bottom:20px}
.pullquote blockquote{
  max-width:22ch;margin:0 0 22px;font-family:var(--display);font-weight:700;font-stretch:var(--wide);
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.012em;
  text-transform:uppercase;color:var(--off);
}
.pullquote .attrib{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.review{background:var(--graphite);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;position:relative}
.review::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--gold)}
.review blockquote{margin:0 0 22px;font-size:.98rem;line-height:1.62;color:#DDE0E2;flex:1}
.stars{display:flex;gap:3px;margin-bottom:18px;color:var(--gold);font-size:.8rem;letter-spacing:.1em}
.attrib{font-family:var(--mono);font-size:.71rem;font-weight:600;font-stretch:var(--label);letter-spacing:.13em;text-transform:uppercase;color:#AEB4B9;display:grid;gap:6px}
.attrib .who-said{color:var(--off)}
.attrib .ctx{color:#8D949A;font-weight:400;letter-spacing:.09em}
.g-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;font-stretch:var(--label);
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:#8D949A;
}
.g-badge b{color:var(--gold);font-weight:600}
.reviews-foot{margin-top:clamp(26px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}

/* ---------- Local ---------- */
.local{border-top:1px solid var(--line);background:var(--charcoal) !important}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.local-img img{width:100%;aspect-ratio:16/11;object-fit:cover}
@media (max-width:860px){.local-grid{grid-template-columns:1fr}}

/* ---------- Who we work with ---------- */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.who-col{background:var(--graphite);padding:clamp(24px,2.6vw,38px) clamp(20px,2vw,30px);position:relative}
.who-col::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--gold);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.who-col:hover::before{width:100%}
.who-col h3{margin-bottom:13px}
.who-col p{font-size:.95rem;color:#BFC4C8;margin:0}
@media (max-width:900px){.who{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.who{grid-template-columns:1fr}}

/* ---------- Areas we cover ---------- */
.area-links{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.area-links a{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--btn-r);
  padding:11px 16px;font-family:var(--mono);font-weight:600;font-stretch:var(--label);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:#CDD1D4;transition:all .25s ease;min-height:44px;
}
.area-links a::before{content:"";width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none}
.area-links a:hover{border-color:var(--gold);color:var(--off);background:rgba(223,164,58,.07)}
.area-links .area-lead{border-color:rgba(223,164,58,.45);color:var(--off);background:rgba(223,164,58,.08)}

/* 1 — typed heading */
.typed-wrap{display:inline-block;max-width:100%}
.caret{
  display:inline-block;width:2px;height:.86em;background:var(--gold);margin-left:3px;
  vertical-align:-.06em;animation:blink 1s steps(1) infinite;
}
.caret.done{animation:fadeCaret .5s ease forwards}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes fadeCaret{to{opacity:0;width:0;margin:0}}


/* enquiry.css */
/* ---------- Enquiry tool ---------- */
.enquiry{background:var(--charcoal) !important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.enq-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,64px);align-items:start}
.enq-shell>*{min-width:0}
.rail{list-style:none;margin:26px 0 0;padding:0}
.rail li{
  display:flex;gap:16px;align-items:flex-start;padding:12px 0;position:relative;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#A2A9AE;transition:color .3s ease;
}
.rail .n{color:#8D949A;transition:color .3s ease}
.rail li::before{content:"";position:absolute;left:11px;top:30px;bottom:-6px;width:1px;background:var(--line)}
.rail li:last-child::before{display:none}
.rail li .bul{width:23px;height:23px;border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:all .3s ease}
.rail li .bul i{width:5px;height:5px;background:var(--steel-soft);border-radius:50%;transition:all .3s ease;font-style:normal}
.rail li.active{color:var(--off)}
.rail li.active .bul{border-color:var(--gold)}
.rail li.active .bul i{background:var(--gold);width:7px;height:7px}
.rail li.done{color:#BFC4C8}
.rail li.done .bul{border-color:var(--gold-deep);background:rgba(223,164,58,.12)}
.rail li.done .bul i{background:var(--gold-deep)}

.enq-card{background:var(--graphite);border:1px solid var(--line);border-top:2px solid var(--gold);padding:clamp(24px,3vw,44px);position:relative;min-height:430px}
.progress{height:2px;background:var(--line);margin-bottom:28px;position:relative;overflow:hidden}
.progress i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:16.6%;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.step{display:none;animation:stepIn .42s cubic-bezier(.2,.7,.2,1)}
.step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step-no{font-family:var(--mono);font-size:.71rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.step h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:10px}
.step .step-sub{font-size:.97rem;color:#BFC4C8;margin-bottom:24px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opt{
  text-align:left;background:#0D0F11;border:1px solid var(--line);border-radius:var(--btn-r);
  padding:18px 18px;cursor:pointer;transition:all .22s ease;display:flex;align-items:center;gap:14px;min-height:64px;
  font-size:.98rem;color:#D7DADC;
}
.opt:hover{border-color:var(--steel-soft);background:#0F1214}
.opt .mk{width:16px;height:16px;border:1px solid var(--steel-soft);flex:none;border-radius:50%;position:relative;transition:all .22s ease}
.opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(223,164,58,.09);color:var(--off)}
.opt[aria-pressed="true"] .mk{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px #0D0F11}
@media (max-width:600px){.opts{grid-template-columns:1fr}}

.drop{
  border:1px dashed var(--line-strong);border-radius:var(--btn-r);padding:clamp(26px,4vw,44px);text-align:center;
  background:#0D0F11;transition:all .25s ease;cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--gold);background:rgba(223,164,58,.06)}
.drop svg{margin:0 auto 14px;stroke:var(--gold);width:30px;height:30px;fill:none;stroke-width:1.4}
.drop .dh{font-family:var(--display);font-weight:700;font-stretch:var(--wide);font-size:1.02rem;letter-spacing:-.005em;text-transform:uppercase;margin-bottom:8px}
.drop .ds{font-size:.95rem;color:#BFC4C8;margin:0}
.drop .dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#A2A9AE;margin-top:14px}
.files{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.files li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0D0F11;border:1px solid var(--line);padding:11px 14px;font-size:.86rem}
.files .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .fs{font-family:var(--mono);font-size:.72rem;color:#A2A9AE;flex:none}
.files button{background:none;border:0;color:#AEB4B9;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;flex:none}
.files button:hover{color:var(--gold-bright)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.grid2{grid-template-columns:1fr}}

.step-nav{display:flex;gap:12px;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.step-nav .btn{flex:1;min-width:150px}
.back{background:none;border:0;color:#AEB4B9;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:16px 4px;min-height:52px}
.back:hover{color:var(--off)}
.reassure{font-size:.89rem;color:#A2A9AE;margin:16px 0 0}

.enq-urgent{margin-top:22px;border:1px solid var(--line);border-left:2px solid var(--gold);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(13,15,17,.6)}
.enq-urgent p{margin:0;font-size:.9rem;color:#CDD1D4}
.enq-urgent a{font-family:var(--mono);font-size:1.02rem;color:var(--gold-bright)}

.done-panel{display:none;text-align:left}
.done-panel.show{display:block;animation:stepIn .5s ease}
.done-panel .tick{width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.summary{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.summary li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem;overflow-wrap:anywhere}
@media (max-width:560px){.summary li{grid-template-columns:1fr;gap:4px}}
.summary .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#AEB4B9}
@media (max-width:1000px){
  .enq-shell{grid-template-columns:1fr}
  /* the card carries its own progress bar and step counter on small screens */
  .rail{display:none}
}


/* custom.css */
/* ============================================================
   CHAMPION SCAFFOLDING — GLOBAL STYLESHEET

   Loads on EVERY page, and LAST, so anything written here applies
   site-wide and overrides the bundled stylesheets:

     core.css      shell: header, mobile menu, footer, buttons, type
     home.css      homepage sections
     page.css      inner-page components
     enquiry.css   the six-step enquiry tool

   This file is intentionally empty. It is the place for small
   site-wide tweaks made after launch, so they are all in one
   findable spot rather than scattered through the bundles.

   Because it loads last it wins on equal specificity. Use it
   deliberately, and prefer fixing the rule at source in the bundle
   above unless the change is genuinely global.
   ============================================================ */
/* style.css */
/*
Theme Name: Champion Scaffolding
Theme URI: https://championscaffolding.co.uk
Author: Trade Tech Digital Solutions
Description: Bespoke one-off theme for Champion Scaffolding, Hastings. Converted from the approved HTML build. Page styles live in assets/css (core, home, page, enquiry), enqueued conditionally from functions.php.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: champion
*/
/* Bundles are enqueued from assets/css. This file loads last and has the final word. */