/* ==========================================================================
   Great House Move — marketing site design system
   --------------------------------------------------------------------------
   ONE stylesheet for the whole site: the homepage, the standalone pages, the
   booking page, the callback form, the tips index, every guide article, every
   town page, and the legal pages. Since 17 Aug 2026 there is no page left
   carrying its own copy of the header, the footer or the type scale — they are
   all built by tools/build-marketing-site.py and they all load this file.

   book.html loads assets/book.css AFTER this one. That file styles the booking
   wizard's own furniture and nothing else; it may lean on the tokens below but
   must never redefine a shared component.

   The brief the design follows: keep the warmth in the ILLUSTRATIONS and the
   WORDS, and take it out of the typography and the backgrounds. So there are
   exactly two typefaces, no outlines or handwriting anywhere, and the doodle
   pattern is confined to the hero and the footer at a quarter of its old
   strength. Everything else earns its warmth from the artwork and the copy.
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------ */
  --cream:#FFF6EB;          /* page ground */
  --white:#FFFFFF;          /* alternating band */
  --ink:#38220E;            /* body text — brown, never black */
  --ink-2:#6E5138;          /* secondary text */
  --ink-3:#8A6B50;          /* muted / captions */
  --orange:#F1751B;         /* the band, accents, illustration key colour */
  --orange-deep:#C2590C;
  --orange-dark:#A8480A;    /* the only orange that carries white text at AA */
  --orange-tint:#FDEDDD;    /* soft fills */
  --green:#0F7A40;          /* WhatsApp — the shade that carries white text at AA */

  /* --- surface ---------------------------------------------------------- */
  --line:rgba(56,34,14,.13);
  --line-2:rgba(56,34,14,.22);
  --line-on-orange:rgba(56,34,14,.24);
  --shadow-sm:0 1px 2px rgba(56,34,14,.05),0 3px 10px rgba(56,34,14,.05);
  --shadow-md:0 2px 4px rgba(56,34,14,.04),0 14px 34px rgba(56,34,14,.09);
  --shadow-lg:0 4px 8px rgba(56,34,14,.05),0 26px 60px rgba(56,34,14,.12);

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --maxw:1160px;
  --gutter:22px;
  --band:clamp(64px,7.5vw,108px);   /* vertical rhythm — every band uses this */
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
img{height:auto}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);font-weight:700;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(2.35rem,1.4rem + 3.4vw,3.85rem);line-height:1.05;letter-spacing:-.022em}
h2{font-size:clamp(1.8rem,1.25rem + 1.9vw,2.65rem)}
h3{font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem);letter-spacing:-.01em}
h4{font-size:1.02rem;letter-spacing:0}
p{text-wrap:pretty}
h1,h2{text-wrap:balance}
a{color:var(--orange-dark)}
b,strong{font-weight:800}

.lead{font-size:clamp(1.06rem,1.01rem + .3vw,1.2rem);color:var(--ink-2);line-height:1.6}
.sub{color:var(--ink-3);max-width:44rem;font-size:1.05rem}
.eyebrow{
  display:inline-block;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange-dark);margin-bottom:14px;
}
.eyebrow.on-orange{color:var(--ink)}
.eyebrow.on-ink{color:#F6C79B}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)}
.center{text-align:center}
.center .sub,.center .lead{margin-left:auto;margin-right:auto}
.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}
.hp{position:absolute;left:-9999px;opacity:0}

/* ---------- bands: the page rhythm -----------------------------------------
   Nothing else may set a section background. Alternating these three is the
   whole reason the page reads as considered rather than endless. */
.band{padding:var(--band) 0;position:relative}
.band-cream{background:var(--cream)}
.band-white{background:var(--white)}
.band-orange{background:var(--orange);color:var(--ink)}
.band-ink{background:#2B1A0B;color:#EADCCB}
.band-cream + .band-cream{padding-top:0}
section[id]{scroll-margin-top:110px}

/* Doodles: the top of a page only, at a quarter of their old strength, and
   faded out at the bottom edge. Without the mask the pattern stops on a hard
   horizontal line halfway down a cream page, which reads as a rendering fault. */
.doodled{position:relative;isolation:isolate}
.doodled::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(bg-doodles.webp) repeat;background-size:520px auto;opacity:.2;
  -webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,0) 100%);
}

/* ---------- focus: one visible ring everywhere ---------- */
:focus-visible{outline:3px solid var(--orange-dark);outline-offset:3px}
.band-orange :focus-visible,.band-ink :focus-visible{outline-color:var(--ink)}
.band-ink :focus-visible,.topstrip :focus-visible,footer.site :focus-visible{outline-color:#FFD9B4}
.skiplink{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:800;text-decoration:none}
.skiplink:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  min-height:50px;padding:13px 26px;border:2px solid transparent;border-radius:999px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;line-height:1.2;
  text-decoration:none;cursor:pointer;
  background:var(--orange-dark);color:#fff;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease,color .16s ease;
}
.btn:hover{background:#8E3C07;transform:translateY(-2px);box-shadow:0 10px 24px rgba(168,72,10,.28)}
.btn:active{transform:translateY(0)}
.btn-lg{min-height:58px;padding:16px 32px;font-size:1.06rem}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.94rem}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{background:rgba(56,34,14,.05);border-color:var(--ink);box-shadow:none;color:var(--ink)}
.band-orange .btn.ghost,.ctapanel .btn.ghost{border-color:rgba(56,34,14,.42);color:var(--ink)}
.band-orange .btn.ghost:hover,.ctapanel .btn.ghost:hover{background:rgba(56,34,14,.09);border-color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--cream)}
.btn.ink:hover{background:#1F1206;box-shadow:0 10px 24px rgba(43,26,11,.3)}
.btn.cream{background:var(--cream);color:var(--ink)}
.btn.cream:hover{background:#fff;box-shadow:0 10px 24px rgba(43,26,11,.22)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.center .cta-row{justify-content:center}

/* A plain text link that still reads as an action. */
.tlink{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-weight:800;color:var(--orange-dark);text-decoration:none;
}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
.band-orange .tlink{color:var(--ink)}

/* ---------- shared icon sizing ---------- */
.ic{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.16em}
.ic.solid{fill:currentColor;stroke:none}
.ic.lg{width:1.6em;height:1.6em}

/* ==========================================================================
   TOP BAR — one strip, not three
   The family switcher and the auto-scrolling ticker that used to sit here are
   gone; the family links live in the footer now.
   ========================================================================== */
/* Same plank timber as the footer and the Book-now card, so the top strip reads
   as part of the same surface. The scrim is deliberately a touch heavier here
   than on the card (α .50→.60) — the bar is thin and the text small, so the
   grain should whisper under the words, not fight them. Even so the cream text
   clears ~6:1 and pure white ~8:1 (AA is 4.5:1). background-color (--ink) is the
   floor if the tile 404s. The green WhatsApp pill sits ON TOP with its own solid
   fill, so the wood never touches its legibility. */
.topstrip{
  background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(94,50,18,.50) 0%,rgba(70,38,16,.60) 100%),
    url(../img/wood-footer.webp?v=20260821);   /* ?v= must track ASSET_VER */
  background-repeat:no-repeat,repeat;
  background-size:cover,900px auto;
  background-position:center center,center center;
  color:#F3E4D3;text-shadow:0 1px 1px rgba(24,12,3,.45);
  font-size:.84rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:8px 16px;text-align:center;flex-wrap:wrap;
}
.topstrip .short{display:none}
.wa-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--green);color:#fff;text-decoration:none;text-shadow:none;
  font-weight:800;font-size:.8rem;border-radius:999px;padding:6px 14px;min-height:32px;
}
.wa-pill:hover{background:#0C6836}

/* ==========================================================================
   HEADER
   ========================================================================== */
.headwrap{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.headwrap.scrolled{box-shadow:0 2px 20px rgba(56,34,14,.09)}
.headwrap nav{display:flex;align-items:center;gap:18px;padding:10px 0;min-height:70px}
.brand{display:inline-flex;align-items:center;flex:none;min-height:44px}
.brand img{height:52px;width:auto;display:block}
.mainnav{display:flex;align-items:center;gap:4px;margin:0 auto}
.mainnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;border-radius:10px;
}
.mainnav a:hover{background:var(--orange-tint);color:var(--orange-dark)}
.mainnav a[aria-current="page"]{color:var(--orange-dark);box-shadow:inset 0 -2px 0 var(--orange)}
.headtools{display:flex;align-items:center;gap:8px;margin-left:auto}
.iconlink{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--orange-tint);color:var(--orange-dark);text-decoration:none;
}
.iconlink:hover{background:#FBDCBF}
.iconlink.wa{background:#E6F8EE;color:#0F7A40}
.iconlink.wa:hover{background:#D2F2E0}
.iconlink svg{width:20px;height:20px}
.menubtn{
  display:none;width:44px;height:44px;flex:none;border:0;background:none;cursor:pointer;
  border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.menubtn i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.menubtn:hover{background:var(--orange-tint)}

/* ---------- drawer ---------- */
#drawerScrim{position:fixed;inset:0;background:rgba(43,26,11,.45);z-index:180;opacity:0;pointer-events:none;transition:opacity .22s ease}
#drawerScrim.open{opacity:1;pointer-events:auto}
#drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:190;
  background:var(--white);transform:translateX(-102%);
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s ease;
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:none;
}
#drawer.open{transform:none;box-shadow:0 0 50px rgba(43,26,11,.28)}
#drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
#drawer .dhead img{height:46px;width:auto}
.dclose{width:44px;height:44px;border:0;background:var(--orange-tint);color:var(--orange-dark);border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer}
#drawer nav{display:flex;flex-direction:column;padding:12px 12px 20px}
#drawer nav a{
  display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 12px;
  color:var(--ink);text-decoration:none;font-weight:700;border-radius:12px;
}
#drawer nav a:hover{background:var(--orange-tint)}
#drawer .em{display:inline-flex;width:32px;height:32px;border-radius:9px;background:var(--orange-tint);color:var(--orange-dark);align-items:center;justify-content:center;flex:none}
#drawer .sep{height:1px;background:var(--line);margin:12px 12px}
#drawer .lbl{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:4px 12px 6px}
#drawer .dfoot{margin-top:auto;border-top:1px solid var(--line);padding:14px 18px;display:flex;flex-direction:column;gap:4px}
#drawer .dfoot a{display:flex;align-items:center;gap:9px;min-height:44px;color:var(--orange-dark);font-weight:800;text-decoration:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:clamp(44px,5vw,76px) 0 clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{margin-bottom:18px}
.hero .lead{max-width:34rem;margin-bottom:24px}
.hero-phone{margin-top:14px;color:var(--ink-2);font-size:.97rem;font-weight:600}
.hero-phone a{font-weight:800;color:var(--orange-dark);text-decoration:none;white-space:nowrap}
.hero-phone a:hover{text-decoration:underline;text-underline-offset:3px}

/* The tick + the claim that cycles beside it. It replaces the old kicker pill,
   so the hero opens with one element instead of two. */
.tickline{display:flex;align-items:center;gap:14px;margin-bottom:20px;min-height:52px}
.tickbadge{
  width:50px;height:50px;flex:none;border-radius:50%;
  background:var(--orange);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(241,117,27,.34);
}
.tickbadge svg{width:26px;height:26px;stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tickwords{position:relative;display:block;flex:1 1 auto;min-width:0;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.tickword{position:absolute;left:0;top:0;width:100%;white-space:normal}
.tickword.is-in{animation:tickIn .42s cubic-bezier(.22,1,.36,1) both}
.tickword.is-out{animation:tickOut .34s ease both;animation-delay:.26s}
@keyframes tickIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes tickOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-9px)}}

/* The illustration is the best asset the brand owns, so it gets real room and a
   frame that lets it sit on cream without a visible edge. */
.hero-art{position:relative}
.hero-art img{
  display:block;width:100%;border-radius:var(--r-xl);
  background:var(--cream);box-shadow:var(--shadow-lg);
}

/* ---------- proof bar under the hero ---------- */
.proofbar{
  list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin-top:clamp(32px,4vw,52px);
}
.proofbar li{display:block}
/* Direct children only. Matching every span in here also matched the little
   icon tile inside each item, whose 16px padding then left the icon 2px of
   content box to live in — so all four icons rendered at zero width. */
.proofbar > li > a,.proofbar > li > span{
  display:flex;align-items:center;gap:11px;min-height:60px;height:100%;
  padding:12px 16px;background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:var(--r-md);text-decoration:none;color:var(--ink);
  font-weight:700;font-size:.92rem;line-height:1.3;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.proofbar > li > a:hover{background:#fff;border-color:var(--orange);transform:translateY(-2px)}
.proofbar .pl{display:block;min-width:0}
/* Booking page: the chips carry a second line of detail. Without this the
   sub-line runs straight on from the label as one sentence. */
.proofbar .pl small{display:block;font-weight:600;font-size:.82rem;color:var(--ink-3);line-height:1.4;margin-top:3px}
.proofbar .pi{
  width:34px;height:34px;flex:none;border-radius:10px;background:var(--orange-tint);
  color:var(--orange-dark);display:grid;place-items:center;
}
.proofbar .pi svg{width:18px;height:18px}

/* ==========================================================================
   ORANGE Q&A BAND
   ========================================================================== */
.qa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(30px,4.5vw,64px);align-items:center}
/* The Q&A sits on a cream card, not straight on the orange.
   Ink on orange measures 5.2:1 — it passes AA on paper — but the two colours
   share a hue, so the only separation is lightness. Large saturated orange
   behind small warm-brown text is genuinely tiring to read, which is exactly
   what the owner reported. On cream the same text is 12.6:1 with real
   chromatic separation, and the card partners the artwork panel opposite. */
.qa-card{
  background:var(--cream);border-radius:var(--r-xl);
  padding:clamp(18px,2.2vw,30px) clamp(18px,2.4vw,32px) clamp(10px,1.4vw,18px);
  box-shadow:var(--shadow-lg);margin:26px 0 28px;
}
.qa-list{border-top:0}
.qa-list details{border-bottom:1px solid var(--line)}
.qa-list details:last-child{border-bottom:0}
.qa-list summary{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  list-style:none;cursor:pointer;padding:17px 2px;min-height:56px;
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:clamp(1.02rem,.99rem + .2vw,1.13rem);
  color:var(--ink);letter-spacing:-.005em;
}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary:hover{color:#1F1206}
.qa-list .plus{
  width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;position:relative;transition:transform .22s ease,background .22s ease;
}
.qa-list .plus::before,.qa-list .plus::after{content:"";position:absolute;background:var(--ink);border-radius:2px}
.qa-list .plus::before{width:12px;height:2px}
.qa-list .plus::after{width:2px;height:12px;transition:opacity .2s ease}
.qa-list details[open] .plus{background:var(--orange-tint)}
.qa-list details[open] .plus::after{opacity:0}
.qa-list .ans{padding:0 22px 20px 2px;color:var(--ink-2);font-size:1rem;line-height:1.62}
.qa-list .ans p + p{margin-top:10px}
.qa-list .ans a{color:var(--ink);font-weight:800}

/* Artwork plus the nudge card, as one column. The slot is aspect-agnostic on
   purpose: a 4:3 piece centres, a 4:5 portrait fills. */
.qa-side{display:flex;flex-direction:column;gap:18px}
.qa-art{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--cream)}
.qa-art img{display:block;width:100%}
.qa-nudge{
  display:flex;align-items:center;gap:15px;min-height:44px;
  background:var(--cream);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--shadow-md);text-decoration:none;color:var(--ink);
  transition:transform .15s ease,box-shadow .15s ease;
}
.qa-nudge:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.qa-nudge .ci{width:44px;height:44px;flex:none;border-radius:13px;background:#E6F8EE;color:#0F7A40;display:grid;place-items:center}
.qa-nudge .ci svg{width:22px;height:22px}
.qa-nudge b{display:block;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.06rem;line-height:1.25;margin-bottom:2px}
.qa-nudge small{display:block;color:var(--ink-2);font-size:.88rem;line-height:1.45}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rev-head{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;margin-bottom:clamp(30px,4vw,46px)}
.rev-score{display:flex;align-items:center;gap:14px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:10px 22px 10px 16px}
.rev-score .glogo{width:30px;height:30px;flex:none}
.rev-score .num{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.7rem;line-height:1;letter-spacing:-.02em}
.rev-score .meta{font-size:.85rem;color:var(--ink-3);font-weight:700;line-height:1.25}
.stars{color:var(--orange-dark);letter-spacing:.09em;font-size:1rem;line-height:1}
.rev-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.rev{
  flex:1 1 300px;max-width:360px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px 24px;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:14px;text-align:left;position:relative;
}
.rev .quote{
  font-size:1.11rem;line-height:1.58;color:var(--ink);flex:1;
}
.rev .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.rev .avatar{
  width:38px;height:38px;flex:none;border-radius:50%;background:var(--orange-tint);
  color:var(--orange-dark);display:grid;place-items:center;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;
}
.rev .name{font-weight:800;font-size:.96rem;line-height:1.25}
.rev .src{font-size:.8rem;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:5px}
.rev .src .glogo{width:13px;height:13px}

/* the accreditation marks sit with the reviews, where a trust mark belongs */
.accred{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap;
  margin-top:clamp(30px,4vw,46px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);
}
.accred .lbl{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.accred .tbadge{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink-3);font-weight:700;font-size:.84rem}
.accred .tbadge img{height:30px;width:auto;display:block}
.accred .tbadge.round img{height:38px}
.accred .tbadge:hover{color:var(--ink)}

/* ==========================================================================
   PRICE CARDS  (teaser on the homepage, full tables on /prices)
   ========================================================================== */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.pcard .pi{width:40px;height:40px;border-radius:12px;background:var(--orange-tint);color:var(--orange-dark);display:grid;place-items:center;margin-bottom:14px}
.pcard .pi svg{width:21px;height:21px}
.pcard h3{margin-bottom:4px}
.pcard .from{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.9rem;color:var(--orange-dark);line-height:1.1;letter-spacing:-.02em;margin-bottom:12px}
.pcard .from small{display:block;font-family:'Nunito',sans-serif;font-weight:700;font-size:.78rem;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.pcard li{display:flex;justify-content:space-between;gap:14px;font-size:.95rem;border-bottom:1px dashed var(--line);padding-bottom:8px}
.pcard li:last-child{border-bottom:0}
.pcard li b{font-weight:800;white-space:nowrap}
.pcard .foot{margin-top:auto;font-size:.86rem;color:var(--ink-3);line-height:1.5}

/* full price tables — /prices */
.ptables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ptable{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.ptable h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ptable h3 .pi{width:34px;height:34px;border-radius:10px;background:var(--orange-tint);color:var(--orange-dark);display:grid;place-items:center;flex:none}
.ptable h3 .pi svg{width:18px;height:18px}
.ptable .phint{font-size:.85rem;color:var(--ink-3);line-height:1.5;margin-bottom:16px;min-height:2.6em}
.prow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.98rem}
.prow:last-of-type{border-bottom:0}
.prow b{font-weight:800;white-space:nowrap;font-size:1.02rem}
.pricefoot{margin-top:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;font-size:.92rem;color:var(--ink-2);line-height:1.6}

/* ==========================================================================
   CTA PANEL — the orange bookend before the footer
   ========================================================================== */
.ctapanel{
  background:var(--orange);border-radius:var(--r-xl);
  padding:clamp(36px,5vw,60px) clamp(24px,4vw,56px);text-align:center;color:var(--ink);
  box-shadow:var(--shadow-md);
}
.ctapanel h2{margin-bottom:12px}
.ctapanel p{max-width:38rem;margin:0 auto 26px;color:var(--ink);font-size:1.06rem}
.ctapanel .note{margin:20px auto 0;font-size:.92rem;font-weight:700;color:var(--ink)}
.ctapanel .note a{color:var(--ink);text-decoration:none;font-weight:800;white-space:nowrap}
.ctapanel .note a:hover{text-decoration:underline;text-underline-offset:3px}

/* The four reasons to book online rather than ring, added 24 Aug 2026. Brown on
   orange, never white — white on #F1751B is 2.9:1 and this panel is the last
   thing a lot of visitors read. The chips are white at 62% so they lift off the
   fill without introducing a second colour. */
.ctawhy{
  list-style:none;margin:0 auto 26px;padding:0;max-width:52rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
}
.ctawhy li{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.62);border-radius:999px;padding:9px 16px 9px 11px;
  font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.35;text-align:left;
}
.ctawhy li b{font-weight:800}
.ctawhy .cw-i{
  display:grid;place-items:center;flex:none;width:26px;height:26px;
  background:var(--white);border-radius:50%;
}
.ctawhy .cw-i .ic,.ctawhy .cw-i svg{width:14px;height:14px;color:var(--orange-dark)}
@media (max-width:640px){
  .ctawhy{flex-direction:column;align-items:stretch;gap:7px;max-width:23rem}
  .ctawhy li{font-size:.85rem;padding:9px 14px 9px 10px}
}

/* ==========================================================================
   GENERIC CONTENT PIECES used by the standalone pages
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,60px);align-items:center}
.split img{display:block;width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);background:var(--cream)}
.prose p{margin-bottom:14px;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose h3{margin:26px 0 8px;color:var(--ink)}

.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stepc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow-sm)}
.stepc .n{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--orange-dark);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.25rem;margin-bottom:14px;
}
.stepc h3{margin-bottom:6px}
.stepc p{color:var(--ink-2);font-size:.97rem}

.towns{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
/* Footer town directory. Added 22 Sep 2026: every town page is linked from every page,
   because each one previously had exactly ONE inbound internal link (its row on /areas)
   against 47 for the nav/footer pages, and Google had indexed none of them. Deliberately
   quiet — this is a directory, not a call to action, so it must not compete with the
   footer's real links. */
.ftowns{border-top:1px solid var(--line);margin-top:clamp(28px,4vw,40px);padding-top:clamp(20px,3vw,26px)}
.ftowns h4{margin:0 0 10px}
.ftlist{display:flex;flex-wrap:wrap;gap:7px 16px}
.ftlist a{
  font-size:.88rem;font-weight:600;text-decoration:none;opacity:.78;
  padding:3px 0;min-height:0;transition:opacity .14s ease,color .14s ease;
}
.ftlist a:hover,.ftlist a:focus-visible{opacity:1;text-decoration:underline}
@media (max-width:640px){
  /* two readable columns beat a ragged 23-item wrap on a phone */
  .ftlist{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
  .ftlist a{padding:6px 0}
}

.townlink{
  display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;
  transition:border-color .14s ease,transform .14s ease,color .14s ease;
}
.townlink:hover{border-color:var(--orange);color:var(--orange-dark);transform:translateY(-2px)}
.townlink.home{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.townlink.home:hover{background:#1F1206;color:#fff}

.faqfull details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.faqfull summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;
  padding:18px 22px;min-height:60px;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:1.1rem;
}
.faqfull summary::-webkit-details-marker{display:none}
.faqfull .plus{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;position:relative}
.faqfull .plus::before,.faqfull .plus::after{content:"";position:absolute;background:var(--ink);border-radius:2px}
.faqfull .plus::before{width:12px;height:2px}
.faqfull .plus::after{width:2px;height:12px;transition:opacity .2s ease}
.faqfull details[open] .plus{background:var(--orange-tint)}
.faqfull details[open] .plus::after{opacity:0}
.faqfull .ans{padding:0 22px 20px;color:var(--ink-2);line-height:1.62}
.faqfull .ans p + p{margin-top:10px}

.contactlist{list-style:none;display:flex;flex-direction:column;gap:6px}
.contactlist li{display:flex;align-items:flex-start;gap:14px;padding:10px 0;min-height:44px}
.contactlist .ci{width:40px;height:40px;flex:none;border-radius:12px;background:var(--orange-tint);color:var(--orange-dark);display:grid;place-items:center}
.contactlist .ci svg{width:20px;height:20px}
.contactlist a{color:var(--ink);font-weight:800;text-decoration:none;font-size:1.05rem}
.contactlist a:hover{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}
.contactlist small{display:block;color:var(--ink-3);font-weight:600}

.cform{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--shadow-md)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:800;font-size:.86rem;margin-bottom:6px;color:var(--ink)}
.field input,.field textarea{
  width:100%;padding:13px 15px;min-height:50px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  font-family:'Nunito',sans-serif;font-size:1rem;background:#fff;color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:3px solid var(--orange-dark);outline-offset:1px;border-color:var(--orange-dark)}
.formnote{font-weight:700;color:#0F7A40;min-height:22px;margin-top:10px}

.coupon{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 20px;box-shadow:var(--shadow-sm);text-align:left;
}
.coupon .ci{width:36px;height:36px;flex:none;border-radius:10px;background:var(--orange-tint);color:var(--orange-dark);display:grid;place-items:center}
.coupon b{font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:.06em;color:var(--orange-dark);font-size:1.05rem;display:block;line-height:1.2}
.coupon small{display:block;color:var(--ink-3);font-size:.86rem;font-weight:600}
.band-orange .coupon{background:rgba(255,255,255,.9);border-color:transparent}

/* page header used by the standalone pages */
.pagehead{padding:clamp(40px,5vw,72px) 0 clamp(28px,3.5vw,44px)}
.pagehead h1{font-size:clamp(2.05rem,1.4rem + 2.4vw,3.1rem);margin-bottom:14px}
.crumbs{font-size:.86rem;color:var(--ink-3);font-weight:700;margin-bottom:16px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* The footer is the one large dark surface on the site — 93% of all of it — so
   it is the one place a real material earns its keep. Sapele-toned timber, laid
   as horizontal planks because they read calmest across a wide band.

   Three layers, top to bottom: a vignette that stops the timber meeting the cream
   band on a hard edge, a warm scrim that buys contrast headroom for the text, and
   the wood itself. `background-size` is FIXED rather than cover so the plank pitch
   is identical at every viewport — a wide footer and a tall phone footer show the
   same timber, not the same crop. The tile is cut between two plank seams, so the
   vertical repeat lands on a seam line and cannot be seen.

   NOTHING here textures type. The wood is a surface; the words stay solid ink. */
footer.site{
  color:#E8D9C6;padding:clamp(48px,6vw,76px) 0 26px;
  background-color:#4A2C13;                       /* the floor if the image 404s */
  /* One soft top fade so the footer meets the cream band without a hard line —
     nothing else. The tile is already toned to sit under every text colour
     below (p95 L .094), so a scrim over it would only mute the grain. */
  background-image:
    linear-gradient(180deg,rgba(22,12,4,.50) 0,rgba(22,12,4,.14) 84px,rgba(22,12,4,0) 180px),
    url(../img/wood-footer.webp?v=20260821);   /* ?v= busts the 4h edge/browser cache when the tile is re-toned — bump on every image change */
  background-repeat:no-repeat,repeat;
  background-size:100% 180px,2200px auto;   /* 1:1 — the tile is authored at 2200px */
  background-position:top center,center top;
}
footer.site .cols{display:grid;grid-template-columns:1.5fr .85fr .85fr 1fr;gap:34px;margin-bottom:40px}
footer.site h4{color:#fff;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-family:'Nunito',sans-serif;font-weight:800;margin-bottom:14px}
footer.site a{color:#E8D9C6;text-decoration:none;font-size:.94rem}
footer.site .col a{display:flex;align-items:center;gap:9px;min-height:44px}
footer.site a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.flogo{display:inline-block;background:#fff;border-radius:14px;padding:10px 14px;margin-bottom:14px}
.flogo img{height:44px;width:auto;display:block}
.ftag{font-size:.94rem;color:#E8D9C6;max-width:26rem;margin-bottom:16px;line-height:1.6}
.fam-links{display:flex;flex-direction:column;gap:10px}
.fam-link{
  display:flex !important;align-items:center;gap:12px;min-height:56px;padding:9px 14px;
  background:rgba(24,14,5,.56);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);
  backdrop-filter:saturate(.9);
}
.fam-link:hover{background:rgba(24,14,5,.68);border-color:rgba(255,255,255,.24);text-decoration:none !important}
.fam-link img{width:34px;height:34px;flex:none;border-radius:8px;background:#fff;object-fit:contain}
.fam-link span{display:block;font-weight:800;color:#fff;font-size:.92rem;line-height:1.25}
.fam-link small{display:block;color:#E8D9C6;font-weight:600;font-size:.79rem}
.copyline{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:.84rem;color:#E8D9C6;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;text-align:center}
.copyline a{color:#E8D9C6;font-size:.84rem;min-height:44px;display:inline-flex;align-items:center}

/* ==========================================================================
   COOKIE DIALOG
   ========================================================================== */
#cookieOverlay{position:fixed;inset:0;background:rgba(43,26,11,.42);z-index:900;display:none;align-items:flex-end;justify-content:center;padding:18px}
#cookieOverlay.show{display:flex}
#cookieCard{background:#fff;border-radius:var(--r-lg);padding:28px 26px;max-width:520px;width:100%;box-shadow:var(--shadow-lg)}
#cookieCard h3{margin-bottom:10px}
#cookieCard p{color:var(--ink-2);font-size:.96rem;margin-bottom:20px}
#cookieCard .btnrow{display:flex;gap:10px;flex-wrap:wrap}
#cookieCard .btn{flex:1 1 150px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .mainnav a{padding:0 10px;font-size:.9rem}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:30px}
}
/* 44px tap targets wherever a finger is doing the tapping. A fine pointer
   keeps the compact pill, which keeps the top strip slim on desktop. */
@media (max-width:900px),(pointer:coarse){
  .wa-pill{min-height:44px;padding:8px 16px;font-size:.82rem}
}

@media (max-width:900px){
  .menubtn{display:flex}
  .mainnav{display:none}
  .headwrap nav{gap:12px}
  .brand{margin-right:auto}
  .hero-grid,.qa-grid,.split{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:560px;margin:0 auto 4px}
  .qa-side{max-width:520px;margin:0 auto;width:100%}
  .proofbar{grid-template-columns:1fr 1fr}
  .pcards,.steps3{grid-template-columns:1fr}
  .ptables{grid-template-columns:1fr}
  .split img{max-width:560px;margin:0 auto}
}
@media (max-width:640px){
  :root{--gutter:18px}
  .topstrip{gap:10px;padding:7px 14px;font-size:.79rem}
  .topstrip .long{display:none}
  .topstrip .short{display:inline}
  /* The header row is logo + WhatsApp + Book button on one line at 375px, and
     it only just fits — every value below is load-bearing. The call icon goes
     first (the drawer carries the number), then the WhatsApp icon under 400px,
     where the strip directly above already has a WhatsApp pill. */
  .brand img{height:40px}
  .headwrap nav{min-height:62px;gap:10px}
  .headtools{gap:6px}
  .headtools .iconlink.callicon{display:none}
  .btn-sm{padding:9px 14px;font-size:.88rem;min-height:44px}
  .hero{padding-top:30px}
  .proofbar{grid-template-columns:1fr}
  .rev{flex:1 1 100%;max-width:none}
  .cta-row .btn{width:100%}
  .ptable .phint{min-height:0}
  footer.site .cols{grid-template-columns:1fr;gap:26px}
  .qa-list .ans{padding-right:8px}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (max-width:480px){
  .promo-line{width:100%;justify-content:flex-start}
  .promo-text .pt-long{display:none}
}

@media (max-width:400px){
  .headtools .iconlink{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .btn:hover,.townlink:hover,.proofbar > li > a:hover{transform:none}
}

/* ==========================================================================
   SIGNATURE MOTION & DETAIL SYSTEM  ·  17 Aug 2026
   --------------------------------------------------------------------------
   One idea, applied consistently: "the move arrives". Everything settles into
   place the way a well-run move does — calm, in order, and only once. Nothing
   bounces, nothing spins, nothing re-animates when you scroll back up.

   That means ONE easing curve, ONE travel distance and ONE duration family for
   the whole site. A page where six things move six different ways reads as
   effects bolted on; a page where everything shares a curve reads as craft.

   Everything here is additive and inert without JavaScript: the reveal styles
   are scoped to .js, which an inline script in <head> sets before first paint.
   If that script never runs, every element is simply visible.
   ========================================================================== */
:root{
  --ease-settle:cubic-bezier(.22,1,.36,1);   /* decisive, no overshoot */
  --dur-reveal:.62s;
  --dur-ui:.22s;
  --rise:18px;                                /* the only travel distance */
}

/* ---------- the reveal ---------- */
/* The reveal moves things with the INDIVIDUAL `translate` / `scale` properties,
   not `transform`. `.js [data-reveal].is-in` is specificity 0,3,0 and used to set
   `transform:none`; every hover lift on this site is 0,2,0 — `.acard:hover`,
   `.rev:hover`, `.pcard:hover`, `.stepc:hover`. So the moment an element finished
   revealing, the reveal rule out-specified its own hover and the lift silently
   stopped working. translate and transform are separate, composable properties:
   the reveal owns one, interaction owns the other, and neither can cancel the
   other out. */
/* The reveal runs as an ANIMATION, never a transition. It used to own
   `transition`, and `.reveal-done` then stamped `transition:none !important` —
   which, because every revealed card is also a hover component, left
   `transition-property: none` computed on .acard, .rev, .pcard and .stepc for
   the life of the page. Every hover on the site snapped instead of settling.
   `transition` belongs to interaction; the reveal takes `animation` and the two
   can no longer reach each other. (Guarded in tools/site-check.js.) */
.js [data-reveal]{opacity:0;translate:0 var(--rise)}
.js [data-reveal].is-in{
  opacity:1;translate:none;
  animation:ghmReveal var(--dur-reveal) var(--ease-settle) var(--reveal-delay,0ms) both;
}
@keyframes ghmReveal{
  from{opacity:0;translate:0 var(--rise)}
  to  {opacity:1;translate:none}
}
.js [data-reveal].reveal-done{opacity:1 !important;translate:none !important;scale:none !important;animation:none !important}
/* Artwork gets a fraction longer and a whisper of scale — it is the thing the
   eye lands on, and it should feel like it settles rather than snaps. */
.js [data-reveal="art"]{translate:0 var(--rise);scale:.985}
.js [data-reveal="art"].is-in{translate:none;scale:none;animation-name:ghmRevealArt;animation-duration:.8s}
@keyframes ghmRevealArt{
  from{opacity:0;translate:0 var(--rise);scale:.985}
  to  {opacity:1;translate:none;scale:none}
}
/* The hero illustration arrives from the left, like the van pulling up. Once. */
.js [data-reveal="van"]{opacity:0;translate:-26px 10px;scale:.99}
.js [data-reveal="van"].is-in{opacity:1;translate:none;scale:none;animation-name:ghmRevealVan;animation-duration:.78s}
@keyframes ghmRevealVan{
  from{opacity:0;translate:-26px 10px;scale:.99}
  to  {opacity:1;translate:none;scale:none}
}

/* ---------- the tick draws itself, once ---------- */
.js .tickbadge svg path{stroke-dasharray:34;stroke-dashoffset:34}
.js .tickbadge.is-in svg path{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-settle) .25s}
.js .tickbadge.tick-done svg path{stroke-dashoffset:0;transition:none}
.js .tickbadge{transform:scale(.6);opacity:0}
.js .tickbadge.is-in{transform:none;opacity:1;transition:transform .5s var(--ease-settle),opacity .35s ease}

/* ---------- shared interaction feel ---------- */
.btn,.townlink,.proofbar > li > a,.rev,.pcard,.stepc,.qa-nudge,.fam-link,.iconlink,.tbadge{
  transition:transform var(--dur-ui) var(--ease-settle),
             box-shadow var(--dur-ui) var(--ease-settle),
             background var(--dur-ui) ease,
             border-color var(--dur-ui) ease,
             color var(--dur-ui) ease;
}
.rev:hover,.pcard:hover,.stepc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.iconlink:hover{transform:translateY(-2px)}

/* ---------- cream paper grain ----------
   A single inline SVG turbulence, so it costs no request and no image decode.
   At 3.5% over cream it is not visible as texture; it is visible as the page
   not being flat, which is the difference between "screen" and "paper". */
.band-cream::after,footer.site::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band-cream > *,footer.site > *{position:relative;z-index:1}
footer.site{position:relative;overflow:hidden}
footer.site::after{display:none}   /* the timber IS the texture here */

/* ---------- parallax: the artwork drifts a few px slower than the page ----------
   Capped at ±14px total. Any more and it stops reading as depth and starts
   reading as a bug. Applied by JS on fine pointers only. */
.para{will-change:transform}

/* ==========================================================================
   SUMMER26 — the promo moment
   A code chip you can click to copy, sat under the hero CTAs. No dashed
   borders, no scissors, no ticket notch: the offer is a small confident line,
   not a coupon clipped out of a newspaper.
   ========================================================================== */
/* The radius is --r-xl (34px), NOT 999px, and that is load-bearing. This box wraps:
   below roughly 1100px the hero column is too narrow for chip + text on one line, and
   the text drops to a second row. A 999px radius on a box that is ~126px tall is not a
   pill any more, it is a stadium with 63px caps curving in at both ends — so the code
   chip's top-left corner and the tail of "30 September" both ended up sitting OUTSIDE
   the dashed border. At the single-line height (66px) a 999px radius clamps to 33px, so
   34px draws the identical shape there and simply stops curving away underneath the
   content once it wraps. Don't put 999px back. */
.promo-line{
  display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:16px;padding:9px 18px 9px 11px;
  background:var(--orange-tint);border:2px dashed rgba(241,117,27,.6);
  border-radius:var(--r-xl);box-shadow:var(--shadow-sm);
}
.promo-code{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:8px 17px;border:0;cursor:pointer;
  background:var(--orange);color:var(--ink);border-radius:999px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.05em;
  box-shadow:0 2px 0 rgba(56,34,14,.16);
  transition:background var(--dur-ui) ease,transform var(--dur-ui) var(--ease-settle);
}
.promo-code:hover{background:#E86A10;transform:translateY(-1px)}
.promo-code .ic{width:14px;height:14px;opacity:.72}
.promo-code.copied{background:var(--green);color:#fff}
.promo-text{font-size:.92rem;font-weight:700;color:var(--ink-2)}
.promo-text b{color:var(--orange-dark)}
.band-orange .promo-line,.ctapanel .promo-line{background:var(--white);border-color:rgba(56,34,14,.2)}

/* ---------- counters hold their width so nothing reflows while they run ---------- */
.tally{font-variant-numeric:tabular-nums}

/* ==========================================================================
   FOOTER — the sign-off
   The firm's actual promise, set once at heading scale. It is the last thing
   on the page and the only sentence the owner has never changed, so it earns
   the room.
   ========================================================================== */
.fsign{
  /* No hairline. On the timber it landed a few px off a plank groove and the
     two read as one muddy double rule; 80px of space separates the sign-off
     from the columns perfectly well on its own. */
  padding-bottom:clamp(28px,3.5vw,40px);margin-bottom:clamp(30px,4vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.fsign p{
  font-family:'Baloo 2',sans-serif;font-weight:700;color:#FFF1E0;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2.1rem);line-height:1.2;letter-spacing:-.015em;
  max-width:22ch;margin:0;
}
.fsign p em{font-style:normal;color:#F79A4E}   /* brand orange, lifted for the dark timber */
.fstats{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.fstat .v{
  font-family:'Baloo 2',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1;letter-spacing:-.02em;
}
.fstat .l{font-size:.8rem;color:#E8D9C6;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}

/* ==========================================================================
   REDUCED MOTION — everything above stands down completely.
   Not "shorter", not "smaller": nothing moves, and every revealed element is
   simply present. The counters print their final value.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],
  .js [data-reveal="art"],
  .js [data-reveal="van"],
  .js .tickbadge{opacity:1 !important;transform:none !important;translate:none !important;scale:none !important;transition:none !important;animation:none !important}
  .js .tickbadge svg path{stroke-dashoffset:0 !important;transition:none !important}
  .rev:hover,.pcard:hover,.stepc:hover,.iconlink:hover,.promo-code:hover,.qa-nudge:hover,.tipcard:hover{transform:none}
  .para{transform:none !important}
}

/* ==========================================================================
   LONG-FORM PAGES  ·  17 Aug 2026
   --------------------------------------------------------------------------
   The guides (/tips/*) and the town pages (/house-removals-*) are where the
   search traffic lands, and until now they wore a different site: a minimal
   header, a different type scale, four typefaces and their own colour names.
   Everything below brings them onto the same bands, the same rhythm and the
   same two typefaces as the homepage, without touching a word of the copy.

   The reading column is capped at 68 characters. That is the whole reason a
   2,400-word guide reads as a considered piece rather than a wall.
   ========================================================================== */
.artgrid{
  display:grid;grid-template-columns:minmax(0,1fr) 260px;
  gap:clamp(30px,4vw,64px);align-items:start;
}
.artgrid > .longform{min-width:0}

/* ---------- the reading column ----------
   Scoped to .longform, NOT to .prose. The six pages carved out of the homepage
   use .prose for a two-paragraph column and were signed off as they are; an
   unscoped rule here put a horizontal rule above /areas' "Out of the North
   East" heading and re-spaced /about's copy. Long-form pages opt in. */
.longform{max-width:68ch;font-size:clamp(1.02rem,.99rem + .2vw,1.1rem);line-height:1.72}
.longform > p{margin-bottom:1.15em;color:var(--ink-2)}
.longform > p:last-child{margin-bottom:0}
.longform b,.longform strong{color:var(--ink)}
/* Links in the reading column are underlined — but a .btn or a .tlink inside
   the column is a button, and a descendant selector outranks .btn. Left
   unscoped it painted the primary button's label in the same brown as its
   background: an orange pill with no text on it. */
.longform a:not(.btn):not(.tlink){color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:700}
.longform a:not(.btn):not(.tlink):hover{color:#8E3C07}
/* A hairline above every h2 does the work a divider would, without the line
   ever being the loudest thing in the column. */
.longform h2{
  margin:clamp(38px,4vw,56px) 0 14px;padding-top:22px;
  border-top:1px solid var(--line);
  font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);
}
.longform h2:first-child{border-top:0;padding-top:0;margin-top:0}
.longform h3{margin:30px 0 8px;color:var(--ink)}
.longform h2[id],.longform h3[id]{scroll-margin-top:120px}
.longform ul,.longform ol{margin:0 0 1.15em;padding-left:0;list-style:none}
.longform ol{counter-reset:pl}
.longform li{position:relative;padding-left:30px;margin-bottom:9px;color:var(--ink-2)}
.longform ul > li::before{
  content:"";position:absolute;left:8px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--orange);
}
.longform ol > li{counter-increment:pl}
.longform ol > li::before{
  content:counter(pl);position:absolute;left:0;top:.06em;
  width:21px;height:21px;border-radius:7px;background:var(--orange-tint);color:var(--orange-dark);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.76rem;display:grid;place-items:center;
}
.longform li b{color:var(--ink)}
.longform img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);display:block;margin:26px 0}
.longform .hero-img{width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);background:var(--cream);margin:4px 0 30px}
.longform hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* the standfirst under an article h1 */
.dek,.lede{
  font-family:'Nunito',sans-serif;font-size:clamp(1.1rem,1.04rem + .35vw,1.28rem);
  line-height:1.55;color:var(--ink-2);max-width:40rem;margin-bottom:6px;
}
.dek b,.lede b{font-weight:700;color:var(--ink-2)}
.artmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:.86rem;font-weight:700;color:var(--ink-3);margin-top:18px;
}
.artmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none}
.artmeta .ic{color:var(--orange-dark)}

/* ---------- pull-quote / trade tip ---------- */
.callout{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;margin:26px 0;
  color:var(--ink-2);box-shadow:var(--shadow-sm);
}
.callout b{color:var(--ink)}
.callout p{margin:0}
.band-white .callout{background:var(--cream)}

/* ---------- tables ---------- */
.tablescroll{
  margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-sm);
}
.band-white .tablescroll{background:var(--cream)}
.tablescroll:focus-visible{outline:3px solid var(--orange-dark);outline-offset:2px}
.tablescroll table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
.tablescroll th,.tablescroll td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tablescroll th{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-dark);background:var(--orange-tint);white-space:nowrap;
}
.tablescroll tr:last-child td{border-bottom:0}
.tablescroll td b{font-weight:800;white-space:nowrap}

/* ---------- on this page ----------
   A sticky rail on desktop, a plain card on phones. It is the one piece of
   furniture a 9,000-pixel page genuinely needs. */
.toc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:var(--shadow-sm);
}
.band-white .toc{background:var(--cream)}
.toc h2{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;border:0;padding:0;
}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.toc li{counter-increment:toc;margin:0;padding:0}
.toc li::before{display:none}
.toc a{
  display:block;padding:7px 0 7px 26px;position:relative;
  color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.92rem;line-height:1.4;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:8px;
  font-size:.72rem;font-weight:800;color:var(--orange-dark);letter-spacing:.02em;
}
.toc a:hover{color:var(--orange-dark)}
.tocrail{position:sticky;top:104px}

/* ---------- FAQ list inside an article ---------- */
.faqlist{margin:8px 0 0}
.faqlist details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:10px;box-shadow:var(--shadow-sm);
}
.band-white .faqlist details{background:var(--cream)}
.faqlist summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;
  padding:16px 20px;min-height:56px;font-family:'Baloo 2',sans-serif;font-weight:600;
  font-size:1.05rem;color:var(--ink);
}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{
  content:"";flex:none;width:11px;height:11px;margin-right:4px;
  border-right:2.5px solid var(--orange-dark);border-bottom:2.5px solid var(--orange-dark);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--dur-ui) var(--ease-settle);
}
.faqlist details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faqlist p{padding:0 20px 18px;margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.65}

/* ---------- the mid-article offer ---------- */
.midcta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  background:var(--orange-tint);border:1px solid rgba(241,117,27,.28);
  border-radius:var(--r-lg);padding:20px 24px;margin:34px 0;
}
.midcta p{margin:0;flex:1 1 240px;font-weight:800;color:var(--ink);line-height:1.35}
.midcta small{display:block;font-weight:600;color:var(--ink-2);font-size:.88rem;margin-top:4px;line-height:1.5}
.midcta .btn{margin:0;white-space:nowrap}

/* ---------- town-page furniture ---------- */
.access{list-style:none;padding:0;margin:18px 0}
.access li{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:15px 20px;margin-bottom:10px;
  color:var(--ink-2);box-shadow:var(--shadow-sm);
}
.band-white .access li{background:var(--cream)}
.access li::before{display:none}
.access b{display:block;color:var(--ink);margin-bottom:3px;font-weight:800}
.nearby{display:flex;flex-wrap:wrap;gap:9px;padding:0;list-style:none;margin:16px 0 0}
.nearby li{
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:9px 17px;font-weight:700;font-size:.92rem;color:var(--ink);margin:0;
}
.nearby li::before{display:none}
.straight{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;margin:34px 0;box-shadow:var(--shadow-sm);
}
.band-white .straight{background:var(--cream)}
.straight h2{margin:0 0 8px;border:0;padding:0;font-size:1.2rem}
.straight p{margin:0;color:var(--ink-2)}

/* ---------- sources ---------- */
.sources{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.sources h2{border:0;padding:0;margin:0 0 12px;font-size:1.15rem}
.sources ul{margin:0;padding:0;list-style:none}
.sources li{font-size:.88rem;color:var(--ink-3);margin:0 0 9px;padding-left:20px;line-height:1.55}
.sources li::before{width:5px;height:5px;top:.6em;background:var(--line-2)}
.sources a{font-weight:800}

/* ---------- more guides ---------- */
.morelinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.morelinks a{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;text-decoration:none;color:var(--ink);font-weight:800;line-height:1.35;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-ui) var(--ease-settle),box-shadow var(--dur-ui) var(--ease-settle),border-color var(--dur-ui) ease;
}
.morelinks a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--orange)}
.morelinks small{display:block;font-weight:700;color:var(--orange-dark);font-size:.84rem;margin-top:8px}

/* ---------- back to top + the thumb bar ---------- */
#toTop{
  position:fixed;right:18px;bottom:18px;z-index:80;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--ink);color:var(--cream);font-size:1.15rem;line-height:1;cursor:pointer;
  opacity:0;pointer-events:none;box-shadow:var(--shadow-md);
  transition:opacity var(--dur-ui) ease,bottom var(--dur-ui) ease,background var(--dur-ui) ease;
}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{background:#1F1206}
#stickyCta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(56,34,14,.10);
  transform:translateY(110%);transition:transform .24s var(--ease-settle);visibility:hidden;
}
#stickyCta.show{transform:none;visibility:visible}
#stickyCta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  border-radius:999px;font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;
  text-decoration:none;padding:0 14px;
}
#stickyCta .s-book{flex:2;background:var(--orange-dark);color:#fff;box-shadow:0 4px 14px rgba(168,72,10,.3)}
#stickyCta .s-call{background:var(--white);color:var(--ink);border:2px solid var(--line-2)}
@media (min-width:901px){#stickyCta{display:none}}
body.has-sticky #toTop{bottom:80px}
@media print{#toTop,.toc,#stickyCta,.midcta,.headwrap,.topstrip,footer.site{display:none}}

/* ==========================================================================
   TIPS INDEX
   ========================================================================== */
.tipgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tipcard{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  text-decoration:none;color:var(--ink);
}
.tipcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--orange)}
.tipcard .tart{aspect-ratio:3/2;background:var(--orange-tint);overflow:hidden}
.tipcard .tart img{width:100%;height:100%;object-fit:contain;display:block;background:var(--cream)}
.tipcard .tbody{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.tcat{
  display:inline-block;align-self:flex-start;background:var(--orange-tint);color:var(--orange-dark);
  font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:11px;
}
.tipcard h3{margin-bottom:8px;line-height:1.25}
.tipcard p{color:var(--ink-3);font-size:.95rem;margin-bottom:16px;line-height:1.6}
.tipcard .more{margin-top:auto;font-weight:800;color:var(--orange-dark);font-size:.94rem}
.tipcard .tmeta{font-size:.8rem;font-weight:700;color:var(--ink-3);margin-bottom:10px}

/* the lead guide, given the room it earns */
.tipcard.feature{grid-column:span 2;flex-direction:row}
.tipcard.feature .tart{aspect-ratio:auto;flex:1 1 46%;min-height:100%}
.tipcard.feature .tbody{flex:1 1 54%;justify-content:center;padding:30px 32px}
.tipcard.feature h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}

/* ==========================================================================
   CALLBACK
   ========================================================================== */
.cbgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,3vw,40px);align-items:start}
.railcol{display:flex;flex-direction:column;gap:16px}
.railcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:var(--shadow-sm);
}
.rlabel{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;
}
.rphone{
  display:block;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.7rem;
  color:var(--orange-dark);text-decoration:none;line-height:1.1;letter-spacing:-.02em;
}
.rphone:hover{text-decoration:underline;text-underline-offset:4px}
.rnote{display:block;font-size:.84rem;color:var(--ink-3);margin-top:8px;line-height:1.5;font-weight:600}
.railcard.warm{background:var(--orange-tint);border-color:rgba(241,117,27,.28)}
.ticklist{list-style:none;display:flex;flex-direction:column;gap:12px}
.ticklist li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--ink-2);font-weight:600;line-height:1.5}
.ticklist li::before{display:none}
.ticklist .ic{color:var(--green);flex:none;margin-top:.28em}
.railrev .rstars{color:var(--orange-dark);letter-spacing:.09em;margin-bottom:8px}
.railrev p{font-size:.95rem;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
.rwho{display:flex;align-items:center;gap:11px;font-weight:800;font-size:.9rem}
.rwho small{display:block;font-weight:600;color:var(--ink-3);font-size:.79rem}
.ravatar{
  width:36px;height:36px;border-radius:50%;background:var(--orange-tint);color:var(--orange-dark);
  display:inline-flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;
  font-weight:700;font-size:.95rem;flex:none;
}
.formcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-md);
}
.formcard h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.6rem);margin-bottom:6px}
.formcard .fnote{color:var(--ink-3);font-size:.97rem;margin-bottom:22px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field select{
  width:100%;padding:13px 15px;min-height:50px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  font-family:'Nunito',sans-serif;font-size:1rem;background:#fff;color:var(--ink);
}
.field select:focus{outline:3px solid var(--orange-dark);outline-offset:1px;border-color:var(--orange-dark)}
/* the "what do you need" multi-select */
.ms{position:relative}
.ms-toggle{
  width:100%;padding:13px 15px;min-height:50px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;font-family:'Nunito',sans-serif;font-size:1rem;text-align:left;cursor:pointer;color:var(--ink-3);
}
.ms-toggle.filled{color:var(--ink);font-weight:700}
.ms-panel{
  display:none;position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:10px;
}
.ms.open .ms-panel{display:block}
.ms-panel label{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;cursor:pointer;font-weight:700;min-height:44px}
.ms-panel label:hover{background:var(--orange-tint)}
.ms-panel input{width:19px;height:19px;accent-color:var(--orange-dark);flex:none}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal{max-width:64ch}
.legal h2{
  margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--line);
  font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{margin:24px 0 6px}
.legal p,.legal li{color:var(--ink-2)}
.legal p{margin-bottom:1.05em}
.legal ul,.legal ol{margin:0 0 1.1em;padding-left:0;list-style:none}
.legal li{position:relative;padding-left:28px;margin-bottom:8px}
.legal ul > li::before{content:"";position:absolute;left:8px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.legal ol{counter-reset:lg}
.legal ol > li{counter-increment:lg}
.legal ol > li::before{content:counter(lg) ".";position:absolute;left:0;top:0;font-weight:800;color:var(--orange-dark)}
.legal .updated{font-size:.88rem;font-weight:700;color:var(--ink-3);margin-bottom:26px}

/* ==========================================================================
   RESPONSIVE — long-form
   ========================================================================== */
@media (max-width:1040px){
  .artgrid{grid-template-columns:1fr}
  .tocrail{position:static}
  /* The contents card earns its place at the top of a phone; the booking card
     next to it does not — it would put two cards and eight links between the
     headline and the first sentence, and the thumb bar carries the same offer
     all the way down. */
  .tocrail .railcard{display:none}
  .toc{margin-bottom:8px}
  .cbgrid{grid-template-columns:1fr}
  .tipgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tipcard.feature{grid-column:span 2}
}
@media (max-width:760px){
  .tipgrid{grid-template-columns:1fr}
  .tipcard.feature{grid-column:span 1;flex-direction:column}
  /* min-height:100% is what makes the feature art fill the row on desktop; left
     in place when the card stacks it made a 950px-tall illustration on a phone */
  .tipcard.feature .tart,.tipcard.feature .tart.noart{aspect-ratio:3/2;flex:none;min-height:0}
  .tipcard.feature .tbody{padding:24px 24px 26px}
  .midcta .btn{width:100%}
  .row2{grid-template-columns:1fr}
  .longform h2{margin-top:34px}
}

/* A guide with no illustration yet gets a tinted icon panel rather than a gap —
   see the IMAGE BRIEFS note in the builder for the pieces worth commissioning. */
.tipcard .tart.noart{
  display:grid;place-items:center;position:relative;isolation:isolate;
  background:var(--orange-tint);
}
.tipcard .tart.noart::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url(bg-doodles.webp) repeat;background-size:300px auto;opacity:.28;
}
.tipcard .tart.noart .ic{width:44px;height:44px;color:var(--orange-dark);stroke-width:1.6;opacity:.9}
.tipcard.feature .tart.noart{aspect-ratio:auto}
.tipcard.feature .tart.noart .ic{width:74px;height:74px}
/* the TOC rail sits to the RIGHT on desktop but comes FIRST in the document, so
   a phone gets the contents before the 2,400 words rather than after them */
@media (min-width:1041px){
  .artgrid > .tocrail{grid-column:2;grid-row:1}
  .artgrid > .longform{grid-column:1;grid-row:1}
}
.tocrail{display:flex;flex-direction:column;gap:16px}
/* The reading band sits directly under a page head that has already given the
   eye room, so it opens tighter than a standalone band would. */
.band-white.artband{padding-top:clamp(38px,4vw,62px)}

/* ==========================================================================
   HERO ACTION CARDS  ·  18 Aug 2026
   --------------------------------------------------------------------------
   The three ways into the business — book, ring us, see the prices — as the
   thing the eye lands on. They replaced the hero's two buttons and the
   paragraph above them: the paragraph said what the buttons already implied.

   Each card owns an illustration that MOVES when the card is hovered or
   focused. One idea per card, matched to the action: the van pulls forward,
   the phone rings, the price tag swings. Same easing curve as everything else
   on the site, and all of it stands down under prefers-reduced-motion.
   ========================================================================== */
.actioncards{
  display:grid;grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr);
  gap:clamp(12px,1.2vw,16px);
  align-items:stretch;
  margin-top:clamp(22px,2.4vw,30px);
}
.acard{
  /* A LOW HORIZONTAL CONTROL, not a block. The illustration is a small motif
     beside the label rather than a panel above it, so the row supports the hero
     instead of competing with it and the booking path stays above the fold. */
  display:flex;flex-direction:row;align-items:center;overflow:hidden;min-height:92px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);
  transition:transform var(--dur-ui) var(--ease-settle),
             box-shadow var(--dur-ui) var(--ease-settle),
             border-color var(--dur-ui) ease;
}
.acard:hover,.acard:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--orange);
}
.acard:focus-visible{outline:3px solid var(--orange-dark);outline-offset:3px}
.acard:active{transform:translateY(-1px)}

/* the artwork panel — overflow:hidden, so the motion is contained */
.acard-art{
  /* the motif: a fixed slot at the head of the row, full card height */
  /* The motif is inset rather than bled: at this size a full-bleed subject gets
     bitten by the card's corner radius. Padding + object-fit:contain also means
     nothing can ever be cropped, whatever the slot ends up measuring. */
  display:block;flex:0 0 100px;align-self:stretch;overflow:hidden;background:var(--white);
  padding:11px 4px 11px 14px;
  position:relative;isolation:isolate;
}
.acard-art img{
  display:block;width:100%;height:100%;object-fit:contain;
  transform-origin:50% 50%;
  transition:transform .55s var(--ease-settle);
}
/* no artwork yet: the doodle-textured icon panel, same device as the guide cards */
.acard-art.noart{display:grid;place-items:center;background:var(--orange-tint)}
.acard-art.noart::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url(bg-doodles.webp) repeat;background-size:300px auto;opacity:.3;
}
.acard-art.noart .ic{
  width:34px;height:34px;
  color:var(--orange-dark);stroke-width:1.6;
  transition:transform .55s var(--ease-settle);
}

.acard-body{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex:1;min-width:0;padding:12px 14px 12px 16px;
}
.acard-text{min-width:0}
.acard-title{
  font-family:'Baloo 2',sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.15;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:var(--ink);
}
.acard-go{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--orange-tint);color:var(--orange-dark);font-size:1.05rem;font-weight:800;
  transition:background var(--dur-ui) ease,transform var(--dur-ui) var(--ease-settle);
}
.acard:hover .acard-go,.acard:focus-visible .acard-go{
  background:var(--orange-dark);color:#fff;transform:translateX(3px);
}

/* ---------- the primary: BOOK ----------
   One obvious action, not three. The fill is the deep brand orange because it
   is the only one that carries white text at AA. Measured at the gradient's
   LIGHTEST end, not where the text happens to land: white 5.84:1, the cream
   subtitle 4.86:1. The motif keeps its light panel so the van still reads. */
/* Same plank timber as the footer, cropped small (760px tile) so the grain
   actually reads on a 112px card. A warm orange-brown scrim sits OVER it — light
   enough (α .55 at the top-left corner) that the grain stays clearly visible,
   warmed toward the brand orange so it looks intentional, not muddy. The scrim
   is the binding legibility control: even over the single brightest wood pixel
   the white title clears 6:1 and the cream subline 4.98:1 (both AA is 4.5:1),
   with ~7.4:1 / 6.2:1 typical. background-color is the warm floor if the tile
   404s. NOTHING here textures type — the words stay solid ink over the surface. */
.acard.primary{
  background-color:#7A360E;
  background-image:
    linear-gradient(135deg,rgba(168,72,10,.55) 0%,rgba(120,56,18,.66) 52%,rgba(78,42,18,.78) 100%),
    url(../img/wood-footer.webp?v=20260821);   /* ?v= must track ASSET_VER — busts the 4h edge cache */
  background-repeat:no-repeat,repeat;
  background-size:cover,760px auto;
  background-position:center center,center top;
  border-color:transparent;color:#fff;min-height:112px;
  box-shadow:0 3px 8px rgba(122,52,8,.18),0 18px 40px rgba(122,52,8,.26);
}
.acard.primary:hover,.acard.primary:focus-visible{
  border-color:transparent;
  box-shadow:0 6px 14px rgba(122,52,8,.22),0 26px 56px rgba(122,52,8,.32);
}
/* On the orange fill the motif has to be a TILE, not a slab: a full-bleed white
   panel butts the fill with a hard vertical edge and square corners that fight
   the card's own radius. Inset and rounded, it reads as a badge. */
.acard.primary .acard-art{
  background:#fff;flex:0 0 104px;align-self:center;
  margin:0 0 0 12px;border-radius:16px;padding:9px 6px;
  height:calc(100% - 24px);
}
.acard.primary .acard-body{padding:12px 16px 12px 18px}
.acard.primary .acard-title{
  color:#fff;font-size:clamp(1.12rem,1rem + .42vw,1.38rem);
}
.acard-sub{
  display:block;margin-top:3px;color:#FFE6CE;
  font-size:clamp(.8rem,.77rem + .1vw,.87rem);font-weight:600;line-height:1.35;
}
.acard.primary .acard-go{background:rgba(255,255,255,.92);color:#9A400A;width:36px;height:36px}
.acard.primary:hover .acard-go,.acard.primary:focus-visible .acard-go{
  background:#fff;color:#8A3A08;
}
.acard.primary:focus-visible{outline-color:var(--ink)}

/* the two alternatives stay deliberately quiet */
.acard:not(.primary) .acard-art{flex:0 0 88px;padding:10px 3px 10px 12px}
.acard:not(.primary) .acard-title{
  font-weight:700;color:var(--ink-2);
  font-size:clamp(.98rem,.93rem + .24vw,1.08rem);
}
.acard:not(.primary) .acard-go{width:30px;height:30px}
.acard:not(.primary):hover .acard-title,
.acard:not(.primary):focus-visible .acard-title{color:var(--ink)}


/* ---------- the three motions ----------
   Hover AND :focus-visible fire the same thing, so a keyboard gets the page a
   mouse gets. Each runs once and settles; nothing loops. */

/* 1. the van pulls away */
.acard.nudge:hover .acard-art img,
.acard.nudge:focus-visible .acard-art img,
.acard.nudge:hover .acard-art.noart .ic,
.acard.nudge:focus-visible .acard-art.noart .ic{
  /* 1.06, not 1.03: the slide is 9px and a 3% scale only over-fills by ~5.4px a
     side, so the panel showed a ~4px strip of its own background down the left
     edge for the length of the hover. 6% covers the full travel. */
  transform:translateX(5px) scale(1.07);
}

/* 2. the phone rings — two small swings, damped, then still */
@keyframes acardRing{
  0%{transform:rotate(0)}
  18%{transform:rotate(-10deg)}
  38%{transform:rotate(8deg)}
  58%{transform:rotate(-5deg)}
  78%{transform:rotate(2.5deg)}
  100%{transform:rotate(0)}
}
.acard.ring:hover .acard-art img,
.acard.ring:focus-visible .acard-art img,
.acard.ring:hover .acard-art.noart .ic,
.acard.ring:focus-visible .acard-art.noart .ic{
  animation:acardRing .72s var(--ease-settle) 1;
}

/* Rotation inside a clipped panel exposes the panel's corners: an 11-degree swing
   on a full-bleed 4:3 image leaves a bare wedge at each corner for the length of
   the animation. A 6% scale-up over-fills the box so the corners stay covered.
   It rides on the `scale` property, which composes with the `transform` rotation
   in the keyframes instead of overwriting it — the same separation the reveal
   system uses. The icon fallback is a small centred glyph, so it needs none. */
.acard.ring .acard-art img,.acard.swing .acard-art img{
  transition:transform .55s var(--ease-settle),scale .55s var(--ease-settle);
}
.acard.ring:hover .acard-art img,.acard.ring:focus-visible .acard-art img,
.acard.swing:hover .acard-art img,.acard.swing:focus-visible .acard-art img{scale:1.07}

/* 3. the price tag swings from its top edge, like it is hanging there */
@keyframes acardSwing{
  0%{transform:rotate(0)}
  25%{transform:rotate(4.5deg)}
  55%{transform:rotate(-2.8deg)}
  80%{transform:rotate(1.2deg)}
  100%{transform:rotate(0)}
}
.acard.swing .acard-art img,.acard.swing .acard-art.noart .ic{transform-origin:50% 8%}
.acard.swing:hover .acard-art img,
.acard.swing:focus-visible .acard-art img,
.acard.swing:hover .acard-art.noart .ic,
.acard.swing:focus-visible .acard-art.noart .ic{
  animation:acardSwing .9s var(--ease-settle) 1;
}

/* ---------- responsive ----------
   A horizontal control needs WIDTH. Three of them side by side stop working well
   below about 1000px — at 768 the label column fell to 133px and every title
   wrapped, "Request a callback" onto three lines. So the row becomes one column
   of full-width controls instead of three cramped ones, which is the same shape,
   just stacked. The motif keeps a fixed pixel slot at every size; a percentage
   slot ballooned to 155px on a phone and took the card with it. */
/* Between 1000 and 1200 the three-up cards are ~318px, which leaves "Request a
   callback" 20px short of a single line. Trimming the motif and the label buys
   it back rather than letting the longest CTA wrap on one breakpoint. */
/* 1001-1200 is the tightest three-up: the primary takes its width out of two
   columns that still have to hold "Request a callback" on one line. The primary
   gives some back here and the alternatives trim motif, arrow and label — the
   same trade as before the primary existed, just recalculated for it.
   These selectors deliberately MATCH the specificity of the base
   `.acard:not(.primary) .acard-title` rule and sit after it, so they win. */
@media (min-width:1001px) and (max-width:1200px){
  .actioncards{grid-template-columns:1.2fr minmax(0,1fr) minmax(0,1fr)}
  .acard-body{padding:11px 11px 11px 13px}
  .acard:not(.primary) .acard-art{flex:0 0 78px;padding:10px 3px 10px 11px}
  .acard:not(.primary) .acard-title{font-size:.97rem}
  .acard:not(.primary) .acard-go{width:28px;height:28px}
  .acard.primary .acard-art{flex:0 0 96px}
  .acard.primary .acard-title{font-size:1.16rem}
  .acard.primary .acard-sub{font-size:.79rem}
}
/* Stacked, the primary can no longer be wider — so it has to be TALLER and its
   motif has to be the biggest. These use :not(.primary) to match the specificity
   of the base rules above; plain `.acard-art` here would lose to them. */
@media (max-width:1000px){
  .actioncards{grid-template-columns:1fr;gap:10px;margin-top:clamp(20px,2.2vw,26px)}
  .acard{min-height:84px}
  .acard:not(.primary) .acard-art{flex:0 0 84px;padding:10px 4px 10px 12px}
  .acard:not(.primary) .acard-title{font-size:1.06rem}
  .acard-body{padding:10px 12px 10px 14px}
  .acard.primary{min-height:118px}
  .acard.primary .acard-art{flex:0 0 90px;margin-left:8px;padding:9px 5px}
  .acard.primary .acard-body{padding:10px 12px 10px 14px}
}
@media (max-width:640px){
  .acard{min-height:78px}
  .acard:not(.primary) .acard-art{flex:0 0 74px;padding:9px 2px 9px 10px}
  .acard:not(.primary) .acard-title{font-size:1.02rem}
  .acard:not(.primary) .acard-go{width:30px;height:30px}
  .acard.primary{min-height:116px}
  .acard.primary .acard-art{flex:0 0 84px;margin-left:6px;padding:8px 4px}
  .acard.primary .acard-body{padding:10px 12px 10px 14px}
  .acard.primary .acard-go{width:34px;height:34px}
}

@media (prefers-reduced-motion:reduce){
  .acard:hover,.acard:focus-visible,.acard:active{transform:none}
  .acard:hover .acard-go,.acard:focus-visible .acard-go{transform:none}
  .acard .acard-art img,.acard .acard-art .ic{transition:none !important}
  .acard:hover .acard-art img,.acard:focus-visible .acard-art img,
  .acard:hover .acard-art.noart .ic,.acard:focus-visible .acard-art.noart .ic{
    animation:none !important;transform:none !important;scale:none !important;
  }
}