/* ExtraHands ASAP. See DIRECTION.md for the reference lock.
   Primary reference Groq (canvas, accent discipline, layout), type and photography
   treatment from Andercore, card and form system from Orderful.
   Every colour pairing below was measured, not eyeballed. */

:root{
  /* ground: warm off-white, never cream. Depth comes from these three steps. */
  --canvas:#ffffff;
  --canvas-2:#f4f3ef;
  --canvas-3:#e9e7e0;
  --dark:#1e2125;          /* the two punctuation bands only: booking strip + footer */

  --ink:#23262a;           /* 15.19:1 on white */
  --ink-70:#55595f;        /* 7.05:1 on white */
  --ink-45:#6e737a;        /* 4.78:1 on white */
  --on-dark:#ffffff;
  --on-dark-70:#c9ccd1;    /* 10.04:1 on --dark */

  --hair:#d7d5ce;
  --hair-dark:#3a3e44;

  /* THE accent. Fill and signal only. Never body text, never a wash, never a gradient. */
  --orange:#fc7e2f;
  --orange-hi:#e06a1d;
  /* the only orange allowed on small text: brand orange is 2.57:1 on white and fails */
  --ember:#b8500a;         /* 5.01:1 on white */

  /* 8px rhythm */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  /* shape: informational cards square, inputs soft, primary actions pill */
  --r-card:0px; --r-input:8px; --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,68px); line-height:1.03; letter-spacing:-.028em}
h2{font-size:clamp(28px,3.6vw,42px); line-height:1.1}
h3{font-size:clamp(19px,1.7vw,23px); line-height:1.25; letter-spacing:-.015em}
p{margin:0}
p+p{margin-top:var(--s2)}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.sec{padding:var(--s12) 0}
.sec-sm{padding:var(--s10) 0}
.sec-2{background:var(--canvas-2)}
.sec-3{background:var(--canvas-3)}
.sec-dark{background:var(--dark); color:var(--on-dark)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--on-dark)}
.sec-dark .lede,.sec-dark .muted{color:var(--on-dark-70)}

/* eyebrow: the one place the accent appears as a rule */
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ember); margin:0 0 var(--s2);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--orange); flex:none}
.sec-dark .eyebrow{color:var(--orange)}

.lede{font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--ink-70); max-width:62ch; text-wrap:pretty}
.muted{color:var(--ink-45); font-size:15px}
.hint{color:var(--ink-45); font-size:14px; line-height:1.55}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:16px; font-weight:600; letter-spacing:-.01em;
  padding:13px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  background:var(--orange); color:var(--dark);   /* 6.28:1. white on orange is 2.57 and fails */
  text-decoration:none; cursor:pointer;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{background:var(--orange-hi)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px 32px; font-size:17px}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--canvas)}
.sec-dark .btn-ghost{color:var(--on-dark); border-color:rgba(255,255,255,.45)}
.sec-dark .btn-ghost:hover{background:var(--on-dark); color:var(--dark)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--ember); outline-offset:2px; border-radius:2px;
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:var(--dark); color:#fff; padding:10px 16px; border-radius:var(--r-input)}

/* ---------- header: the dark bar, carrying the white knockout logo ---------- */
.bar{position:sticky; top:0; z-index:50; background:var(--dark); color:var(--on-dark)}
.bar-in{display:flex; align-items:center; gap:var(--s4); min-height:76px}
.bar img{height:26px; width:auto}
.nav{display:flex; gap:var(--s3); margin-left:auto; align-items:center}
.nav a{
  font-size:15px; font-weight:500; text-decoration:none; color:var(--on-dark);
  padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .22s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.bar-cta{display:flex; align-items:center; gap:var(--s2); margin-left:var(--s3)}
.bar-tel{font-size:16px; font-weight:600; text-decoration:none; white-space:nowrap}
.bar-tel:hover{color:var(--orange)}
.burger{display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:var(--r-input); padding:9px 13px; font:inherit; font-size:14px; cursor:pointer}

/* ---------- hero: split, photo contained and framed, never behind the type ---------- */
.hero{padding:var(--s12) 0 var(--s10)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s10); align-items:center}
.hero h1{margin-bottom:var(--s3)}
.hero .lede{margin-bottom:var(--s5)}
.hero-fig{position:relative}
.hero-fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--hair); border-radius:var(--r-card);
}
.hero-tag{
  position:absolute; left:0; bottom:0; background:var(--dark); color:var(--on-dark);
  font-size:13px; font-weight:500; letter-spacing:.02em; padding:10px 16px;
}

/* google rating, inline under the hero copy */
.rating{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:var(--s4)}
.stars{color:var(--orange); font-size:17px; letter-spacing:2px; line-height:1}
.rating b{font-weight:600}
.rating .muted{font-size:14px}

/* ---------- trust strip ---------- */
.strip{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--canvas-2)}
.strip ul{display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; list-style:none}
.strip li{padding:var(--s4) var(--s3); border-right:1px solid var(--hair)}
.strip li:last-child{border-right:0}
.strip b{display:block; font-size:16px; font-weight:600; letter-spacing:-.01em}
.strip span{display:block; font-size:14px; color:var(--ink-45); margin-top:4px}

/* ---------- hairline card grid ---------- */
.grid{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:var(--s6)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--canvas); padding:var(--s5) var(--s4) var(--s5)}
.sec-2 .cell{background:var(--canvas-2)}
.cell h3{margin-bottom:10px}
.cell p{color:var(--ink-70); font-size:16px}
.cell .n{display:block; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:var(--s2)}

/* ---------- the trailer fill gauge: the signature, built in code ---------- */
.gauge-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s10); align-items:center; margin-top:var(--s6)}
.trailer{width:100%; height:auto; display:block}
.trailer .fill{transition:width .5s var(--ease)}
.levels{list-style:none; margin:var(--s4) 0 0; padding:0; border-top:1px solid var(--hair)}
.levels li{border-bottom:1px solid var(--hair)}
.levels button{
  display:flex; width:100%; gap:var(--s3); align-items:baseline; text-align:left;
  background:none; border:0; font:inherit; padding:var(--s3) 0; cursor:pointer; color:inherit;
}
.levels .amt{flex:none; width:68px; font-weight:600; font-size:16px; letter-spacing:-.01em}
.levels .what{color:var(--ink-70); font-size:16px}
.levels [aria-pressed="true"] .amt{color:var(--ember)}
.levels [aria-pressed="true"] .what{color:var(--ink)}
.levels button:hover .what{color:var(--ink)}

/* ---------- steps ---------- */
.steps{counter-reset:s; list-style:none; margin:var(--s6) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair);
  border:1px solid var(--hair)}
.steps li{counter-increment:s; background:var(--canvas); padding:var(--s5) var(--s4)}
.sec-2 .steps li{background:var(--canvas-2)}
.steps li::before{
  content:counter(s,decimal-leading-zero); display:block;
  font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--ember); margin-bottom:var(--s2)}
.steps h3{margin-bottom:8px}
.steps p{color:var(--ink-70); font-size:15px}

/* ---------- before / after ---------- */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s6)}
.ba figure{margin:0}
.ba img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--hair)}
.ba figcaption{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45); margin-top:10px}
.ba figcaption.after{color:var(--ember)}

/* ---------- reviews: summary panel beside the cards (the repeated reference pattern) --- */
.rev-grid{display:grid; grid-template-columns:300px 1fr; gap:var(--s8); margin-top:var(--s6); align-items:start}
.rev-sum .big{font-size:64px; font-weight:600; line-height:1; letter-spacing:-.03em}
.rev-sum .stars{font-size:20px; margin:10px 0 6px}
.bars{list-style:none; margin:var(--s4) 0 0; padding:0}
.bars li{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-45); margin-bottom:7px}
.bars .track{flex:1; height:7px; background:var(--canvas-3); overflow:hidden}
.bars .fill{display:block; height:100%; background:var(--orange)}
.themes{list-style:none; margin:var(--s4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.themes li{font-size:13px; border:1px solid var(--hair); padding:5px 11px; color:var(--ink-70); background:var(--canvas)}
.themes b{font-weight:600; color:var(--ink)}
.rev-list{display:grid; gap:var(--s2)}
.rev{background:var(--canvas); border:1px solid var(--hair); padding:var(--s4)}
.sec-2 .rev{background:var(--canvas)}
.rev .who{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.rev .who b{font-weight:600; font-size:16px}
.rev .who span{font-size:13px; color:var(--ink-45)}
.rev .stars{font-size:14px}
.rev p{color:var(--ink-70); font-size:16px; text-wrap:pretty}

/* ---------- gallery ---------- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s6)}
.tiles figure{margin:0}
.tiles img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--hair);
  transition:transform .4s var(--ease)}
.tiles figure:hover img{transform:scale(1.02)}
.tiles figcaption{font-size:14px; color:var(--ink-45); margin-top:10px}

/* ---------- towns ---------- */
.towns{list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.towns li{border:1px solid var(--hair); padding:7px 14px; font-size:15px; background:var(--canvas)}

/* ---------- booking form (Orderful card and input system) ---------- */
.book-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:var(--s8); align-items:start; margin-top:var(--s6)}
.card{
  background:var(--canvas); color:var(--ink); border:1px solid var(--hair);
  border-radius:var(--r-input); padding:var(--s5);
  box-shadow:rgba(0,0,0,.08) 0 1px 3px, rgba(0,0,0,.06) 0 1px 2px -1px; /* the one permitted shadow */
}
.field{margin-bottom:var(--s3)}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:7px}
.field .opt{font-weight:400; color:var(--ink-45)}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--canvas);
  border:1px solid var(--hair); border-radius:var(--r-input); padding:13px 14px;
}
textarea{min-height:110px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink); outline-offset:1px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{display:block; border:1px solid var(--hair); border-radius:var(--r-input);
  padding:9px 15px; font-size:15px; background:var(--canvas); transition:all .15s var(--ease)}
.chip input:checked+span{border-color:var(--dark); background:var(--dark); color:var(--on-dark)}
.chip input:focus-visible+span{outline:3px solid var(--ember); outline-offset:2px}
.err{color:#9b1c1c; font-size:15px; margin-top:var(--s2)}
.ok{border-left:3px solid var(--orange); padding-left:var(--s3); margin-top:var(--s3)}

/* ---------- footer ---------- */
.ftr{background:var(--dark); color:var(--on-dark-70); padding:var(--s10) 0 var(--s6); font-size:15px}
.ftr img{height:34px; width:auto; margin-bottom:var(--s4)}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s6)}
.ftr h4{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark); margin-bottom:var(--s2)}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:9px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--orange)}
.ftr-end{border-top:1px solid var(--hair-dark); margin-top:var(--s8); padding-top:var(--s4);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:14px}

/* demo ribbon, always above the footer and never over the hero */
.ribbon{background:var(--canvas-3); color:var(--ink-70); font-size:14px; text-align:center; padding:14px 24px}
.ribbon b{color:var(--ink); font-weight:600}

/* ---------- motion: opacity and transform only, and only when frames actually arrive --- */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .js .reveal{opacity:1; transform:none}
}

/* 320px guard. A grid or flex child defaults to min-width:auto, which is its
   CONTENT width, and that beats overflow-wrap: a long address or URL then pushes
   the whole page wider than the phone. Reset it on the text-bearing children. */
.hero-grid>*,.gauge-grid>*,.book-grid>*,.rev-grid>*,.pay>*,
.cell,.steps li,.strip li,.rev,.levels button,.levels .what,
.ftr-grid>*,.ba figure,.tiles figure,.map li,.timeline li>*{min-width:0}
.rev p,.cell p,.map span,.ftr p,.levels .what{overflow-wrap:anywhere}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.gauge-grid,.book-grid,.rev-grid{grid-template-columns:1fr; gap:var(--s6)}
  .grid-3,.steps{grid-template-columns:repeat(2,1fr)}
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .strip li:nth-child(2){border-right:0}
  .strip li:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:var(--s5)}
  .rev-sum{display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:center}
}
@media (max-width:720px){
  body{font-size:16px}
  .sec{padding:var(--s10) 0}
  .sec-sm{padding:var(--s8) 0}
  .nav,.bar-tel{display:none}
  .burger{display:block}
  .bar.open .nav{
    display:flex; position:absolute; left:0; right:0; top:100%; background:var(--dark);
    flex-direction:column; align-items:stretch; gap:0; padding:var(--s2) 24px var(--s4);
    border-top:1px solid var(--hair-dark);
  }
  .bar.open .nav a{padding:13px 0; border-bottom:1px solid var(--hair-dark)}
  .grid-3,.grid-2,.steps,.ba,.tiles,.row2{grid-template-columns:1fr}
  .strip ul{grid-template-columns:1fr}
  .strip li{border-right:0; border-bottom:1px solid var(--hair); padding:var(--s3) 0}
  .strip li:last-child{border-bottom:0}
  .ftr-grid{grid-template-columns:1fr}
  .rev-sum{grid-template-columns:1fr}
  .levels .amt{width:58px}
}
@media (max-width:360px){
  .btns{flex-direction:column; align-items:stretch}
  .btn{width:100%}
}