/* ============================================================
   Halizona hyper-local one-pagers
   Shared stylesheet for marketinghalifax.co.uk and
   marketingskipton.co.uk.

   Palette is driven entirely by the custom properties below, which
   build-local-sites.js rewrites per site:
     Halifax  purple-led, green accent
     Skipton  green-led,  purple ink (as halizona.com)

   Tokens and type match assets/css/site.css so both sites read as
   Halizona, not as someone else's template.
   ============================================================ */
:root{
  --purple:#300061;
  --purple-deep:#1c0040;
  --purple-soft:#5a2ca0;
  --green:#20ce88;
  --green-deep:#13a86a;
  --yellow:#f0e94b;
  --ink:#300061;
  --line:#e9e6ef;
  --bg:#ffffff;
  --bg-alt:#f6f4fb;
  --white:#ffffff;
  --radius:18px;
  --radius-lg:28px;
  --shadow-sm:0 6px 20px rgba(48,0,96,.07);
  --shadow-md:0 18px 50px rgba(48,0,96,.13);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Static, NOT part of the generated palette below. The dark bands are always
     purple, so anything sitting on one needs an accent that does not follow
     --accent: on Skipton --accent IS purple, which rendered the proof eyebrow,
     stat figures, quote credit and CTA ticks invisible. Never use --accent on
     a band, and never move this inside the generated block, which is replaced
     wholesale per site. */
  --band-accent:#20ce88;

  /* --- Skipton: generated, do not hand-edit --- */
  --hero-bg:var(--green);
  --hero-ink:var(--purple);
  --hero-eyebrow:var(--purple);
  --accent:var(--purple);
  --accent-ink:#ffffff;
  --town-ink:#ffffff;
  --band-bg:var(--purple);
  --band-ink:#ffffff;
  --pattern:url("../images/website-flat.jpg");
}

/* metric-matched fallback so the async brand-font swap does not reflow.
   NOTE: the Adobe Fonts kit must have this domain added, or the fallback
   is all the visitor ever sees. */
@font-face{
  font-family:"brother-fb";
  src:local("Arial"),local("Roboto"),local("Helvetica Neue");
  size-adjust:101.16%;
  ascent-override:109.13%;
  descent-override:30.25%;
  line-gap-override:0%;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"brother-1816","brother-fb",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);
  line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* The hero photo is deliberately width:114% with margin-right:-14% so it bleeds
   off the right edge instead of stealing column width. body{overflow-x:hidden}
   further up does NOT stop that bleed scrolling the page: measured on the live
   Skipton build, scrollTo(500,0) landed at 24px on a 390px viewport and 13px at
   1280px. Clipping on the ROOT element is what actually holds it.
   clip, not hidden: hidden forces the Y axis to auto and would clip the hero
   photo where it overlaps the enquiry form, which is the whole legs-on-the-form
   layout. clip leaves Y alone. */
html{overflow-x:clip}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(64px,9vh,104px) 0}
.section.alt{background:var(--bg-alt)}

.eyebrow{
  display:inline-block;
  font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:14px;
}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.02em;font-weight:800}
h2.title{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.7rem}
p.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:#3d2a58;max-width:60ch}
.section-head{max-width:720px;margin-bottom:clamp(34px,5vh,52px)}
/* Sized gradient rather than a plain background, exactly as site.css does it.
   A normal background fills the whole line box, which on a tight heading
   line-height paints over the descenders of the line above. This paints a
   band just under one em tall instead. */
.hl-mark{
  background:linear-gradient(var(--accent),var(--accent)) no-repeat
    0 calc(0.395em - 5px) / 100% calc(0.97em + 10px);
  color:var(--accent-ink);
  padding:0 6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;
  padding:1rem 1.7rem;border-radius:999px;border:2px solid transparent;
  transition:transform .25s var(--ease),background .25s,border-color .25s;
}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-3px)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75)}
.btn-dark{background:var(--purple);color:#fff}
.btn-dark:hover{background:var(--purple-deep)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--pattern) center/1100px auto repeat, var(--hero-bg);
  padding:12px 0;
}
.site-header .wrap{display:flex;align-items:center;gap:clamp(14px,2.5vw,34px)}
/* height:auto is load-bearing: the width/height attributes are the image's
   real pixels, so a CSS width without it squashes the lockup. */
.site-header .logo{width:190px;height:auto;flex:0 0 auto}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px);margin-right:auto}
.nav a{
  font-size:.85rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hero-ink);opacity:.82;white-space:nowrap;
  padding:.4rem 0;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s;
}
.nav a:hover{opacity:1;border-bottom-color:var(--accent)}
.head-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.head-tel{
  font-weight:800;color:var(--hero-ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem;
}
.head-tel svg{width:18px;height:18px;color:var(--accent)}
.head-actions .btn{padding:.7rem 1.25rem;font-size:.82rem}

/* ---------- trust bar (white strip under the nav) ---------- */
.trustbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.trustbar .wrap{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px 18px;
  font-size:.92rem;font-weight:700;color:var(--purple);
  text-align:center;
}
.trustbar .stars{color:#f5b425;letter-spacing:3px;font-size:1rem;line-height:1}
.trustbar .sep{width:5px;height:5px;border-radius:50%;background:var(--green);flex:0 0 auto}
.trustbar .quiet{font-weight:600;color:rgba(48,0,96,.68)}
@media (max-width:560px){
  .trustbar{padding:12px 0}
  .trustbar .wrap{font-size:.82rem;gap:6px 12px}
  .trustbar .sep{display:none}
}

/* ---------- hero ---------- */
/* the HZ pattern tile is a wide, short strip, so it has to REPEAT at a
   fixed size. Stretching it to cover a tall hero just renders flat colour.
   --pattern points at the green tile or the generated purple one. */
.hero{
  background:var(--pattern) center top / 1100px auto repeat, var(--hero-bg);
  color:var(--hero-ink);
  padding:clamp(40px,6vh,72px) 0 0;
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(10px,1.6vw,22px);align-items:end}
.hero .eyebrow{color:var(--hero-eyebrow)}
/* the statement is the hero, as on halizona.com: a small lead-in line, then
   find you / trust you / choose you at display size */
.hero h1{
  font-size:clamp(2.4rem,5.6vw,4.15rem);text-transform:uppercase;
  letter-spacing:-.035em;line-height:.97;white-space:nowrap;
}
.hero h1 .lead-in{
  display:block;
  font-size:clamp(.92rem,1.5vw,1.22rem);
  font-weight:800;letter-spacing:-.005em;line-height:1.25;
  text-transform:none;margin-bottom:.5em;max-width:34ch;white-space:normal;
}
.hero h1 .town{color:var(--town-ink)}
.hero-sub{
  margin-top:22px;font-size:clamp(1.05rem,1.9vw,1.35rem);
  font-weight:600;max-width:34ch;color:var(--hero-ink);opacity:.92;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{
  margin-top:26px;
  font-size:.92rem;font-weight:700;letter-spacing:.04em;
  color:var(--hero-ink);opacity:.75;
}
/* Whatever ends the text column carries the panel's bottom breathing room.
   It used to sit on .hero-trust, so trimming that line left the button almost
   touching the panel edge. Tying it to :last-child survives either variant. */
.hero-grid > div:first-child > *:last-child{padding-bottom:clamp(44px,6vh,72px)}
/* the cutout sits flush to the bottom of the panel and runs wide, as on
   halizona.com, rather than floating in a column */
.hero-photo{align-self:end;margin-bottom:-2px}
.hero-photo img{
  width:114%;height:auto;max-width:none;
  margin-right:-14%;   /* bleeds off the right edge rather than stealing column width */
}

/* ---------- light theme (Leeds: white canvas, blue and green accents) ----------
   Only the pieces that assume a dark panel need overriding. */
.site-header.light{border-bottom:2px solid var(--line)}
.hero.light .btn-ghost{color:var(--purple);border-color:#cfc7de}
.hero.light .btn-ghost:hover{background:var(--bg-alt);border-color:var(--purple)}
.hero.light .hero-sub{opacity:1;color:#3d2a58}
.hero.light .hero-trust{color:var(--purple);opacity:.62}
.hero.light .eyebrow{color:var(--green-deep)}
.site-header.light .nav a{color:var(--purple);opacity:.72}
.site-header.light .nav a:hover{opacity:1}
.site-header.light .head-tel{color:var(--purple)}

/* ---------- local hook ---------- */
.local{background:var(--bg)}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.local-photo img{border-radius:var(--radius-lg);width:100%;height:auto}
.local blockquote{
  margin-top:22px;padding-left:20px;
  border-left:4px solid var(--accent);
  font-size:1.1rem;font-weight:700;color:var(--purple);
}

/* ---------- stages ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stage{
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.stage img{width:100%;height:190px;object-fit:cover}
.stage .body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:.6rem;flex:1}
.stage .no{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:3px solid var(--accent);color:var(--green-deep);
  font-weight:800;font-size:.95rem;margin-bottom:.3rem;
}
.stage h3{font-size:1.35rem}
.stage p{color:#3d2a58;font-size:1rem}
.stage ul{margin-top:auto;padding-top:.9rem;display:flex;flex-wrap:wrap;gap:8px}
.stage li{
  font-size:.86rem;font-weight:700;color:var(--purple);
  background:var(--bg-alt);border-radius:999px;padding:.4rem .8rem;
}

/* ---------- case studies ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case{
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
}
.case.feature{grid-column:1 / -1;flex-direction:row}
.case.feature .shot{flex:0 0 46%}
.case.feature img{height:100%;min-height:300px}
.case.feature .body{justify-content:center}
.case.feature .out{margin-top:.4rem}   /* not pinned to the bottom of a tall card */
.case .shot{position:relative;overflow:hidden}
.case img{width:100%;height:215px;object-fit:cover}
.case .kicker{
  position:absolute;left:0;bottom:0;
  background:var(--accent);color:var(--accent-ink);
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem .9rem;
}
.case .body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.case h3{font-size:1.4rem}
.case p{color:#3d2a58;font-size:1rem}
.case .out{
  margin-top:auto;padding-top:1rem;
  display:flex;gap:.7rem;align-items:flex-start;
  font-weight:700;color:var(--purple);font-size:.98rem;line-height:1.4;
}
.case .out svg{width:20px;height:20px;flex:0 0 auto;color:var(--green-deep);margin-top:.15rem}

/* ---------- proof ---------- */
.proof{background:var(--band-bg);color:var(--band-ink)}
.proof .eyebrow{color:var(--band-accent)}
.proof h2.title{color:var(--band-ink)}
.proof .lead{color:rgba(255,255,255,.84)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:28px}
.stat .big{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--band-accent)}
.stat .who{display:block;margin:.5rem 0 .6rem;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.stat p{font-size:.98rem;color:rgba(255,255,255,.88)}
.pquote{
  margin-top:26px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:28px;
}
.pquote .stars{color:#f5b425;letter-spacing:3px;display:block;margin-bottom:.5rem}
.pquote p{font-size:1.15rem;font-weight:700}
.pquote cite{display:block;margin-top:.7rem;font-style:normal;font-weight:800;color:var(--band-accent);font-size:.9rem}
.pquote cite span{display:block;font-weight:600;color:rgba(255,255,255,.6);margin-top:.1rem}

/* ---------- metrics (expandable) ----------
   Built on <details> so it works with no JS, is keyboard operable and
   announces its own state. The plus is drawn from two bars so the vertical
   one can rotate away into a minus when the panel is open. */
.metrics{display:flex;flex-direction:column;gap:14px;max-width:860px}
.metrics li{
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  transition:border-color .25s var(--ease);
}
.metrics li:has(details[open]){border-color:var(--accent)}
.metrics li:hover{border-color:#d9d3e6}
.metrics li:has(details[open]):hover{border-color:var(--accent)}

.metrics summary{
  display:flex;align-items:center;gap:16px;
  padding:20px 22px;cursor:pointer;
  font-weight:800;font-size:1.05rem;color:var(--purple);line-height:1.3;
  list-style:none;
}
.metrics summary::-webkit-details-marker{display:none}
.metrics summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
.metrics .mt{flex:1}

.metrics .plus{
  position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:11px;
  background:var(--accent);
}
.metrics .plus::before,
.metrics .plus::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--accent-ink);border-radius:2px;
  transform:translate(-50%,-50%);
}
.metrics .plus::before{width:15px;height:3px}
.metrics .plus::after{
  width:3px;height:15px;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.metrics details[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.metrics .mbody{padding:0 22px 22px 76px}
.metrics .mbody p{
  color:#3d2a58;font-size:1rem;font-weight:500;line-height:1.6;margin:0;
  animation:metric-in .25s var(--ease) both;
}
@keyframes metric-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .metrics .mbody p{animation:none}
  .metrics .plus::after{transition:none}
}
@media (max-width:520px){
  .metrics .mbody{padding-left:22px}
}

/* ---------- pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px 32px;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.plan:hover{border-color:var(--accent);transform:translateY(-3px)}
.plan .price{
  font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.03em;
  color:var(--purple);line-height:1;
}
.plan .per{font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.plan h3{font-size:1.2rem;margin-top:.5rem}
.plan p{color:#3d2a58;font-size:1rem}
.plan.rapid{
  grid-column:1 / -1;background:var(--band-bg);border-color:transparent;color:var(--band-ink);
  flex-direction:row;align-items:center;gap:28px;flex-wrap:wrap;
}
.plan.rapid:hover{transform:none}
.plan.rapid .price{color:var(--band-accent);flex:0 0 auto}
.plan.rapid h3{color:var(--band-ink);margin:0}
.plan.rapid .rapid-copy{flex:1 1 320px}
.plan.rapid p{color:rgba(255,255,255,.84);margin-top:.3rem}
.plan.rapid .btn-accent{background:var(--band-accent);color:#fff}
.pricing-note{
  margin-top:24px;padding:22px 26px;border-radius:var(--radius);
  background:var(--bg-alt);border:2px solid var(--line);
  font-size:1rem;color:#3d2a58;max-width:70ch;
}
.pricing-note b{color:var(--purple)}
.pricing-note p + p{margin-top:.85rem}

/* ---------- map / area covered ---------- */
.map-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,52px);align-items:center}
.map-frame{
  border-radius:var(--radius-lg);overflow:hidden;
  border:2px solid var(--line);background:var(--bg-alt);
  line-height:0;   /* kills the inline-frame descender gap */
}
/* explicit height, so the lazy iframe cannot shift the page when it lands */
.map-frame iframe{width:100%;height:400px;border:0;display:block}
.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.2rem}
.areas li{
  font-size:.9rem;font-weight:700;color:var(--purple);
  background:var(--bg-alt);border:2px solid var(--line);
  border-radius:999px;padding:.45rem .9rem;
}

/* ---------- faq (expandable, same <details> pattern as the metrics) ---------- */
.faq-list{display:flex;flex-direction:column;max-width:880px}
.faq-item{border-top:2px solid var(--line)}
.faq-item:last-child{border-bottom:2px solid var(--line)}
.faq-item summary{
  display:flex;align-items:flex-start;gap:16px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-size:clamp(1.05rem,1.9vw,1.28rem);font-weight:800;
  color:var(--purple);line-height:1.35;letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.faq-item summary:hover .fq{color:var(--green-deep)}
.faq-item .fq{flex:1;transition:color .2s}
.faq-item .plus{
  position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:var(--accent);margin-top:.15rem;
}
.faq-item .plus::before,
.faq-item .plus::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--accent-ink);border-radius:2px;transform:translate(-50%,-50%);
}
.faq-item .plus::before{width:13px;height:3px}
.faq-item .plus::after{
  width:3px;height:13px;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.faq-item details[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item .fbody{padding:0 0 26px 46px}
.faq-item .fbody p{color:#3d2a58;animation:metric-in .25s var(--ease) both}
.faq-item .fbody p + p{margin-top:.7rem}
@media (prefers-reduced-motion:reduce){
  .faq-item .fbody p{animation:none}
  .faq-item .plus::after{transition:none}
}
@media (max-width:520px){
  .faq-item .fbody{padding-left:0}
}

/* ---------- cta band ---------- */
.cta{background:var(--band-bg);color:var(--band-ink);text-align:center}
.cta h2{font-size:clamp(1.8rem,4vw,2.8rem);max-width:20ch;margin:0 auto .8rem}
.cta p{color:rgba(255,255,255,.86);max-width:52ch;margin:0 auto 26px;font-size:1.08rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cta-ticks{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:28px;font-weight:700;font-size:.92rem}
.cta-ticks span{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.82)}
.cta-ticks svg{width:17px;height:17px;color:var(--band-accent)}

/* ---------- contact form (the sites with no phone number) ---------- */
.cta.has-form{text-align:left}
.cta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4vw,60px);align-items:start}
.cta.has-form h2{margin:0 0 .8rem;max-width:16ch}
.cta.has-form p{margin:0 0 1rem}
.cta.has-form .cta-ticks{justify-content:flex-start;margin-top:1.4rem}
.cta-mail{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;
  font-weight:800;color:var(--band-accent);
  border-bottom:2px solid transparent;
}
.cta-mail:hover{border-bottom-color:var(--band-accent)}
.cta-mail svg{width:17px;height:17px;flex:0 0 auto}

.eform{
  background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px);
}
.eform h3{color:var(--purple);font-size:1.25rem;margin-bottom:1.1rem}
.ef-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ef-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:14px}
.ef-field label{
  font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--purple);
}
.eform input,.eform select,.eform textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--bg-alt);border:2px solid var(--line);border-radius:12px;
  padding:.75rem .9rem;transition:border-color .2s,background .2s;
}
.eform textarea{resize:vertical;min-height:84px}
.eform input:focus,.eform select:focus,.eform textarea:focus{
  outline:none;border-color:var(--green);background:var(--white);
}
.eform input.bad,.eform select.bad,.eform textarea.bad{border-color:#d8385a}
.eform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.eform button{
  width:100%;justify-content:center;margin-top:.4rem;
  background:var(--accent);color:var(--accent-ink);
  font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;
  border:0;border-radius:999px;padding:1rem 1.6rem;cursor:pointer;
  transition:transform .25s var(--ease),opacity .2s;
}
.eform button:hover{transform:translateY(-2px)}
.eform button[disabled]{opacity:.6;cursor:default;transform:none}
.ef-msg{margin-top:.8rem;font-weight:700;font-size:.95rem;min-height:1.2em;color:#3d2a58}
.ef-msg.ok{color:var(--green-deep)}
.ef-msg.err{color:#d8385a}
.ef-small{margin-top:.7rem;font-size:.82rem;color:rgba(48,0,96,.6);font-weight:500}

/* ---------- footer ---------- */
.site-footer{background:var(--purple-deep);color:rgba(255,255,255,.76);padding:52px 0 30px;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.site-footer .logo{width:200px;height:auto;margin-bottom:16px}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.site-footer a{display:block;margin-bottom:8px}
.site-footer a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.85rem;
}

/* ---------- responsive ---------- */
@media (max-width:1050px){
  .head-tel{display:none}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-photo{max-width:420px;margin-inline:auto}
  .hero-trust{padding-bottom:24px}
  .local-grid{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .map-grid{grid-template-columns:1fr}
  .map-frame iframe{height:320px}
  .case.feature{flex-direction:column}
  .case.feature .shot{flex:0 0 auto}
  .case.feature img{height:215px;min-height:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* nav drops to its own row and scrolls sideways rather than wrapping
     into a tall stack that pushes the hero off screen */
  .site-header .wrap{flex-wrap:wrap;row-gap:8px}
  .site-header .logo{width:160px}
  .nav{
    order:3;width:100%;margin-right:0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:18px;
  }
  .nav::-webkit-scrollbar{display:none}
  .head-actions{margin-left:auto}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
  .ef-row{grid-template-columns:1fr;gap:0}
}

/* ---------- Craven Business Expo credit (Where we work) ----------
   Set as type in the site's own brand rather than a bitmap. The organiser's
   only published artwork is a promotional flyer where the wordmark sits ON
   TOP of a photograph, so it cannot be cut out cleanly at any crop. Swap in
   a real logo file here if the organiser supplies one. */
.expo{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:1.6rem;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);box-shadow:var(--shadow-sm);
  font-size:.95rem;color:#3d2a58;max-width:60ch;line-height:1.5;
}
.expo-mark{
  flex:0 0 auto;display:grid;gap:1px;padding-right:18px;
  border-right:1px solid var(--line);font-style:normal;text-align:left;
}
.expo-mark b{font-size:1.02rem;font-weight:800;letter-spacing:.01em;color:var(--purple);line-height:1}
.expo-mark i{font-size:.72rem;font-weight:700;font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-deep);line-height:1}
.expo-mark em{font-size:1.02rem;font-weight:800;font-style:normal;color:var(--purple-soft);line-height:1}
.expo strong{color:var(--purple);font-weight:700}
@media (max-width:520px){
  .expo{gap:12px}
  .expo-mark{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:10px;width:100%}
}
.expo-copy{flex:1 1 240px;min-width:0}

/* ---------- Hero H1 restructure ----------
   Both reference sites that actually rank (stockport-seo.co.uk, position 1;
   bradfordleakdetection.co.uk, position 1 and 2) put the TARGET PHRASE in the
   H1, not a brand slogan. So the H1 is now "Marketing Agency Skipton, North
   Yorkshire" and the Find/Trust/Choose lockup keeps the big display type
   underneath it without being the H1. */
.hero h1{
  font-size:clamp(.95rem,1.6vw,1.28rem);
  font-weight:800;letter-spacing:-.005em;line-height:1.25;
  text-transform:none;white-space:normal;max-width:34ch;margin-bottom:.55em;
}
.hero .hero-lockup{
  font-size:clamp(2.4rem,5.6vw,4.15rem);text-transform:uppercase;
  letter-spacing:-.035em;line-height:.97;white-space:nowrap;
  font-weight:800;color:var(--hero-ink);margin:0;
}

/* photo of the stand leads the expo credit; the type-set mark stays as the label */
.expo{display:block;padding:0;overflow:hidden}
.expo img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.expo figcaption{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px}

/* High Corn Mill work gallery: spans the cases grid, sits under the feature card.
   Auto-fits 1, 2 or 3 images without a layout change. */
.hcm-gallery{
  grid-column:1 / -1;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
}
.hcm-gallery img{
  width:100%;height:280px;object-fit:cover;display:block;
  border:2px solid var(--line);border-radius:var(--radius-lg);
}
.hcm-gallery figcaption{
  grid-column:1 / -1;margin-top:-6px;
  font-size:.9rem;color:#3d2a58;
}
@media (max-width:720px){ .hcm-gallery img{height:220px} }

/* ---------- expo card, now sitting on the dark CTA panel ---------- */
.cta .expo{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:none;margin-top:26px;max-width:none;
}
.cta .expo img{border-bottom-color:rgba(255,255,255,.20)}
.cta .expo figcaption{color:rgba(255,255,255,.86)}
.cta .expo-mark{border-right-color:rgba(255,255,255,.22)}
.cta .expo-mark b,
.cta .expo-mark em,
.cta .expo strong{color:#fff}
.cta .expo-mark i{color:var(--green)}
@media (max-width:520px){ .cta .expo-mark{border-bottom-color:rgba(255,255,255,.22)} }

/* ---------- mobile nav ----------
   Was overflow-x:auto, which silently clipped FAQs mid-word with no scroll
   affordance, so it just looked broken. Wrap it instead: four short links fit
   on two tidy centred rows and nothing is hidden. */
@media (max-width:820px){
  .site-header .wrap{flex-wrap:wrap;row-gap:10px}
  .nav{
    order:3;width:100%;margin-right:0;
    overflow:visible;flex-wrap:wrap;justify-content:center;
    gap:10px 18px;
  }
  .nav a{font-size:.78rem;letter-spacing:.06em;padding:.2rem 0}
}
@media (max-width:420px){
  .site-header .logo{width:140px}
  .nav a{font-size:.72rem;letter-spacing:.04em}
}

/* ---------- form controls inherit the brand face ----------
   Browsers do NOT inherit font-family into button/input/select/textarea, so the
   submit button was rendering in Arial while everything around it was
   brother-1816. .eform input/select/textarea already had font:inherit; the
   button never did. Element-level so any future control is covered too, and
   family only so the size and weight set on .eform button still win. */
button,input,select,textarea{font-family:inherit}

/* ---------- hero, form card and cut-out overlap ----------
   The white enquiry card rises well up into the green so it sits on the HZ
   pattern, and David and Luke stand ON its top edge. Three things have to
   agree or it breaks: .hero must outrank the panel that follows it in the
   stacking order or the panel paints over the photo; the hero must stop
   clipping; and the photo is RAISED (positive margin-bottom) to land its feet
   near the card's top edge rather than dropped over the fields. */
.hero{overflow:visible;position:relative}
.hero-photo{position:relative;z-index:5;margin-bottom:99px}
.hero-grid > div:first-child > *:last-child{padding-bottom:clamp(30px,4vh,52px)}

.cta.has-form{position:relative;z-index:1}
.cta.has-form .eform{
  margin-top:-180px;position:relative;z-index:1;box-shadow:var(--shadow-md);
}

@media (max-width:960px){
  .hero-photo{margin-bottom:-2px}
  .hero-grid > div:first-child > *:last-child{padding-bottom:clamp(40px,6vh,72px)}
  .cta.has-form .eform{margin-top:0}
}

/* ---------- hero type order ----------
   Both reference sites that rank put the SEARCH TERM at display size as the
   first thing under the nav, with the brand line secondary. Yours had it the
   other way round: the term small, the slogan huge. Swapped, so a visitor and
   a crawler both meet "Marketing Agency Skipton" first. Find you / Trust you /
   Choose you keeps its weight underneath rather than disappearing. */
.hero h1{
  font-size:clamp(2rem,4.6vw,3.4rem);
  font-weight:800;text-transform:none;letter-spacing:-.028em;line-height:1.03;
  white-space:normal;max-width:15ch;margin-bottom:.36em;
}
.hero .hero-lockup{
  font-size:clamp(1.35rem,2.5vw,1.95rem);
  letter-spacing:-.02em;line-height:1.05;opacity:.86;
}
@media (max-width:720px){
  .hero h1{font-size:clamp(1.9rem,8vw,2.5rem);max-width:none}
  .hero .hero-lockup{font-size:clamp(1.2rem,5.4vw,1.6rem)}
}

/* ---------- hero lockup as highlighted blocks ----------
   Matches the treatment in the halizona.com footer (.foot-tagline): each
   phrase sits in a solid purple block with white text, wrapping as a group.
   Smaller here because the search term is the headline now, not this. */
.hero .hero-lockup{
  display:flex;flex-wrap:wrap;gap:.3em .4em;
  font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:800;
  line-height:1.3;letter-spacing:-.02em;opacity:1;margin:0 0 .1em;
}
.hero .hero-lockup span{
  background:var(--purple);color:#fff;padding:.12em .36em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
@media (max-width:720px){
  .hero .hero-lockup{font-size:clamp(1rem,4.4vw,1.3rem)}
}

/* On a phone the CTA copy column (heading, ticks, email link, expo card) is
   ~980px tall and was stacking ABOVE the form, pushing it to 1,985px down the
   page. Put the form first instead; the copy still follows it. */
@media (max-width:960px){
  .cta.has-form .cta-grid{display:flex;flex-direction:column;gap:28px}
  .cta.has-form .cta-grid .eform{order:-1}
}

/* ---------- bigger hero type, less dead green above it ----------
   The left column is bottom-aligned against a taller photo column, so a small
   headline left ~150px of empty pattern above the eyebrow. Larger type fills
   it, and the hero's top padding comes down to close the rest. */
.hero{padding-top:clamp(20px,3vh,36px)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4.05rem);max-width:14ch}
.hero .hero-lockup{font-size:clamp(1.2rem,2.3vw,1.8rem)}

/* ---------- mobile gets the same overlap as desktop ----------
   On a phone the form is the first item in the CTA (order:-1), so it sits
   directly under the hero photo. Same trick as desktop: lift the photo by the
   same amount the card rises, and the feet land on the card's top edge. */
@media (max-width:960px){
  .hero{overflow:visible}
  .hero-photo{position:relative;z-index:5;margin-bottom:96px}
  .cta.has-form{position:relative;z-index:1}
  .cta.has-form .eform{margin-top:-172px;position:relative;z-index:1}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(2rem,8.4vw,2.7rem);max-width:none}
  .hero .hero-lockup{font-size:clamp(1.05rem,4.8vw,1.45rem)}
  .hero-photo{margin-bottom:70px}
  .cta.has-form .eform{margin-top:-146px}
}

/* ---------- overlap made viewport-independent ----------
   .section padding is clamp(64px,9vh,104px), so it changes with WINDOW HEIGHT.
   The photo lift and the card lift were two separate numbers tuned against it,
   which meant the legs touched the card on one screen and floated on another.
   Fix: take that padding out of the equation on this one section, then lift the
   photo and the card by the SAME amount from the same boundary, so they line up
   at every width and height. Change --overlap alone to retune. */
.cta.has-form{--overlap:100px;padding-top:0}
.cta.has-form .cta-grid > div:first-child{padding-top:clamp(64px,9vh,104px)}
.hero-photo{margin-bottom:var(--hero-lift,100px)}
.cta.has-form .eform{margin-top:calc(-1 * var(--overlap))}
.hero{--hero-lift:100px}

@media (max-width:960px){
  .cta.has-form{--overlap:86px}
  .hero{--hero-lift:86px}
  .cta.has-form .cta-grid > div:first-child{padding-top:0}
}
@media (max-width:720px){
  .cta.has-form{--overlap:64px}
  .hero{--hero-lift:64px}
}

/* the closing CTA button was sitting flush against the paragraph above it,
   and was the only CTA on the page without the arrow */
.closing-cta{margin-top:1.6rem}

/* ---------- client reviews ----------
   One row that scrolls sideways, on desktop as well as mobile. Deliberately a
   real scroller rather than the auto-marquee halizona.com uses: that has to
   duplicate every card in the DOM to loop, which would put each review on the
   page twice. This keeps each review once, is swipeable on touch, and gives a
   trackpad or shift-scroll the same behaviour on desktop. */
.quotes{
  display:flex;gap:clamp(16px,2vw,24px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin-top:2rem;padding:4px 4px 18px;
  scrollbar-width:thin;scrollbar-color:var(--purple-soft) transparent;
}
.quotes::-webkit-scrollbar{height:8px}
.quotes::-webkit-scrollbar-track{background:transparent}
.quotes::-webkit-scrollbar-thumb{background:var(--purple-soft);border-radius:99px;opacity:.6}
.quote{
  flex:0 0 clamp(280px,29vw,360px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.quote .stars{color:var(--yellow);letter-spacing:.08em;font-size:1rem;line-height:1}
.quote p{color:#3d2a58;font-size:.98rem;line-height:1.55;flex:1;margin:0}
.quote p b{color:var(--purple)}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .who img,.quote .who .ava{
  width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid rgba(32,206,136,.6);
}
.quote .who .ava{
  display:grid;place-items:center;background:var(--green);color:#fff;
  font-weight:800;font-size:1rem;border:0;letter-spacing:.02em;
}
.quote .who b{display:block;font-size:.96rem;color:var(--purple)}
.quote .who span{font-size:.82rem;color:#6b5b85}
/* the row should run to the edge on a phone rather than stopping at the wrap */
@media (max-width:720px){
  .quotes{
    margin-inline:calc(-1 * var(--wrap-pad,20px));
    padding-inline:var(--wrap-pad,20px);
  }
  .quote{flex:0 0 82vw}
}