/* ============================================================
   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;

  /* --- Leeds: 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;
}

/* button, input, select and textarea do NOT inherit font-family. Without this
   the enquiry form's submit button renders in Arial while everything around it
   is brother-1816. Family only, so any size or weight set later still wins. */
button,input,select,textarea{font-family:inherit}
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{
  /* A gradient BAND, not a padded background, and that is deliberate. Section
     titles wrap over two lines, and a real background with vertical padding
     makes each line's box taller than its line-height, so line two overlaps
     line one. A background-image paints the band without touching layout, so
     wrapped headings stay clean. The offset is centred on the line box so the
     band sits evenly above and below the text.
     The hero blocks override this with a solid fill further down: they are
     short standalone phrases that never wrap, so the padding is safe there. */
  /* 0.87em is MEASURED, not guessed. background-position on an inline box is
     relative to its content box, whose height is the font's ascent + descent
     (68px at a 46.4px font-size in brother-1816), not the font-size. Reading
     the metrics off a canvas: glyphs run 34.1px above the baseline to 10.9px
     below, and the font ascent is 52px, so the optical centre of the text sits
     0.87em down from the content-box top. Centre the band on THAT and it sits
     evenly on the text. Anything derived from 0.5em assumes the box is one em
     tall, which is why every value I tried around 0.5 sat the band too high. */
  background:linear-gradient(var(--accent),var(--accent)) no-repeat
    0 calc(0.87em - (1.02em + 8px) / 2) / 100% calc(1.02em + 8px);
  color:var(--accent-ink);
  padding:0 8px;
  -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 */
}
/* A single-person cutout is PORTRAIT (1400x1711) where the pair shot is
   landscape (1000x667). Bleeding a portrait at 114% would make it tower over
   the headline and push the hero off the screen, so it is capped and pushed to
   the bottom right instead, standing on the baseline the same way. */
.hero-photo.is-portrait img{
  width:auto;height:auto;max-width:min(300px,100%);
  margin-right:0;margin-left:auto;display:block;
}

/* ---------- 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-photo.is-portrait img{max-width:min(260px,68%);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}
}

/* ---------- reviews strip ------------------------------------------------
   Real Google reviews, scrolling. Same marquee mechanic as halizona.com: the
   track holds two copies of the list and animates to translateX(-50%), so the
   second copy is exactly where the first was when it restarts and the loop has
   no visible seam. Width MUST be set as well as the flex basis, or a
   width:max-content track sizes itself to the unwrapped text and the strip
   scrolls to blank for half its cycle. */
.reviews-strip{padding-bottom:8px}
.reviews-strip .section-head{margin-bottom:22px}
.marquee{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee-track{display:flex;align-items:stretch;width:max-content;animation:marquee var(--mq,60s) linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
/* pause only on a real pointer: on touch, :hover sticks after a tap and freezes it */
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.reviews-marquee .rev{
  flex:0 0 360px;width:360px;margin:0 20px 0 0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;display:flex;flex-direction:column;gap:10px;
}
.reviews-marquee .stars{color:#f5a623;letter-spacing:2px;font-size:.9rem}
.reviews-marquee blockquote{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink)}
.reviews-marquee figcaption{
  margin-top:auto;padding-top:6px;font-weight:800;font-size:.88rem;color:var(--purple);
}
.reviews-marquee figcaption span{display:block;font-weight:500;font-size:.8rem;color:var(--muted)}

/* ---------- services grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.svc h3{margin:0 0 8px;font-size:1.05rem;color:var(--purple)}
.svc p{margin:0;font-size:.93rem;line-height:1.6;color:var(--muted)}

/* ---------- who we work with ---------- */
.who-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
.who-copy p{margin:0 0 14px;line-height:1.7}
.who-copy p:last-child{margin-bottom:0}
.who-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.who-list li{
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:12px 16px;font-weight:600;font-size:.94rem;color:var(--purple);
}
.who-close{margin:28px 0 0;font-weight:700;font-size:1.05rem;color:var(--purple)}

/* ---------- why us ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0;overflow:hidden;display:flex;flex-direction:column}
.why-card h3{margin:0 0 8px;font-size:1rem;color:var(--purple)}
.why-card p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}

@media (max-width:860px){
  .who-grid{grid-template-columns:1fr;gap:24px}
  .reviews-marquee .rev{flex-basis:300px;width:300px}
}

/* ---------- hero that the enquiry form laps onto ------------------------
   Only on sites where the form sits directly under the hero (formFirst).

   The PURPLE panel no longer overlaps: it starts exactly where the green ends,
   so the join reads as one clean line across the page. Only the WHITE enquiry
   card rises above that line and onto the green, and David stands on the card,
   centred over it.

   --lift is the single number: the hero reserves that much extra green, the
   white card is pulled up by the same amount, and David's box bottom therefore
   lands exactly on the card's top edge with no per-element fiddling.

   --ov is kept because the scroll-margin rule below still reads it. */
:root{--ov:170px;--lift:96px;--cta-pad:34px}
.hero.is-overlap{padding-bottom:var(--lift)}
.hero.is-overlap .hero-photo{align-self:end}
.hero.is-overlap .hero-photo.is-portrait img{
  max-width:min(430px,100%);
  margin:0 auto;          /* centred over the card, not shoved to the right */
  margin-bottom:0;        /* box bottom == card top, straight out of the maths */
  position:relative;z-index:1;
}
/* The purple panel simply butts up under the green. No negative margin. */
.cta.has-form.is-overlap{
  margin-top:0;
  position:relative;z-index:2;
  padding-top:0;
}
.cta.has-form.is-overlap .cta-grid{
  background:var(--band-bg);color:var(--band-ink);
  border-radius:var(--r);padding:var(--cta-pad) 38px;
}
/* ...and only the white card climbs into the green. */
.cta.has-form.is-overlap .eform{
  /* the panel's own top padding sits between the panel edge and the card, so it
     has to come off too or the card rises --lift MINUS that padding (measured:
     96 asked for, 62 delivered) and David lands 34px short of it */
  margin-top:calc((var(--lift) + var(--cta-pad)) * -1);
  position:relative;z-index:3;
}
@media (max-width:900px){
  /* Same idea on a phone, smaller numbers. This used to switch the overlap OFF,
     which put David on the green and the form 800px further down the page,
     because the panel stacks blurb-first at this width. The form is moved to
     the top of the stack so he is standing on the thing he is standing on
     everywhere else. */
  :root{--lift:52px}

  /* Tighten the hero so more of David is above the fold. Measured on a 390x844
     screen he was only 35% visible, with ~260px of chrome and copy stacked
     above the title. Every value here is trimmed rather than removed, so the
     hierarchy still reads. "Marketing Leeds" is held on ONE line: it is the
     page's whole identity and breaking it in half cost 39px for nothing. */
  .hero.is-overlap{padding-top:18px}
  .hero-stack{gap:.3em}
  .hero-stack .hero-title{font-size:clamp(1.9rem,8.4vw,2.4rem);white-space:nowrap}
  .hero-stack .hero-marks{font-size:.42em;gap:.26em .24em}
  .hero-under{font-size:.95rem;line-height:1.35}
  .hero-sub{font-size:1rem;line-height:1.5;margin-top:.7rem}
  .hero-cta{margin-top:.9rem}
  .hero.is-overlap{padding-bottom:var(--lift)}
  .hero.is-overlap .hero-photo.is-portrait img{max-width:min(300px,70%)}
  .cta.has-form.is-overlap .cta-grid{padding:26px 22px;display:flex;flex-direction:column}
  .cta.has-form.is-overlap .eform{order:-1;margin-top:calc((var(--lift) + 26px) * -1)}
}

/* Drone shot under the enquiry blurb, sitting opposite the form. */
.cta-shot{margin:24px 0 0}
.cta-shot img{width:100%;height:auto;display:block;border-radius:var(--r)}
.cta-shot figcaption{
  margin-top:9px;font-size:.8rem;opacity:.75;
}
@media (max-width:900px){ .cta-shot{margin-top:20px} }

/* ---------- Skipton-style stacked hero title ---------------------------
   Eyebrow, then the big two-line title, then the three phrases as blocks
   underneath. .hl-mark already paints the accent behind the text, so on a
   green hero with --accent purple these come out white on purple. */
.hero-stack{display:flex;flex-direction:column;align-items:flex-start;gap:.45em}
.hero-stack .hero-title{display:block;line-height:1.02}
.hero-stack .hero-marks{
  display:flex;flex-wrap:wrap;gap:.34em .3em;
  font-size:.46em;line-height:1.5;   /* a step down from the title, still display weight */
}

/* the line under the big hero title */
/* Sits INSIDE the stack now, between the big title and the blocks, so it is a
   flex child of the <h1>. That means it inherits the display type: the tight
   negative letter-spacing and the heading line-height squashed it into an
   unreadable run of caps. Everything the heading imposes has to be reset here. */
.hero-under{
  display:block;margin:0;max-width:30ch;
  font-size:1.06rem;font-weight:700;
  letter-spacing:normal;text-transform:none;
  line-height:1.45;
  color:var(--hero-ink);opacity:.85;
}

/* Why Halizona cards carry a picture: the padding moves to .why-body so the
   image can go edge to edge. */
.why-card img{width:100%;height:170px;object-fit:cover;display:block}
.why-card .why-body{padding:20px 22px}

/* ---------- footer, in the halizona.com shape --------------------------
   A big Find you / Trust you / Choose you tagline over the columns, the way
   the main site closes. */
.foot-tagline{
  margin:0 0 30px;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.06;color:#fff;
}
.foot-tagline span{display:block}
.foot-tagline .t2{opacity:.72}
.foot-tagline .t3{opacity:.5}
@media (max-width:720px){ .foot-tagline{font-size:2.1rem;margin-bottom:22px} }

/* Bands on a wrapped title need the lines further apart than a plain heading
   would, or the band on line two sits hard against the one on line one. */
/* measured: the band is ~1.55x the font size once its 8px is added, so the
   lines have to be at least that far apart or two bands touch */
.title:has(.hl-mark){line-height:1.62}
.hero-marks .hl-mark{
  /* short, standalone, never wraps: a real padded block reads better here */
  background:var(--accent);
  padding:.2em .42em;
  border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Where an in-page jump lands.
   The header is sticky, so any #anchor put the target's top behind it: clicking
   Results in the nav landed the proof section at y=0, under the bar. Measured
   at 71px here, so 92 clears it with room. Same fix halizona.com needed. */
html{scroll-padding-top:92px}
@media (max-width:720px){ html{scroll-padding-top:78px} }

/* ---------- white result cards ----------------------------------------
   Opt-in per site (proofCards:'white'). The shared treatment is a translucent
   white panel on the purple band; this is solid white with the brand purple and
   green doing the talking, which lifts the numbers off the background far more.
   Scoped rather than applied globally so the other four sites, and the live
   Skipton page, keep the look they already have. */
.proof-white .stat{
  background:#fff;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.proof-white .stat .big{
  /* The brand green, as asked. It measures 3.07:1 on white, which meets AA for
     LARGE text only, and these headings are 24-32px bold so they qualify. Do
     not reuse this pairing at body size. */
  color:var(--green);
}
.proof-white .stat .who{color:var(--purple)}
.proof-white .stat p{color:var(--ink)}
.proof-white .pquote{
  background:#fff;border-color:transparent;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}
.proof-white .pquote p{color:var(--purple)}
.proof-white .pquote cite{color:var(--green)}
.proof-white .pquote cite span{color:var(--ink);opacity:.75}