/* ============================================================
   Halizona hyper-local one-pagers
   This copy belongs to seo-agency-leeds.co.uk. Each site carries its own
   local.css; they share a structure, not a file.

   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, SEO: 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;
}
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 ----------
   Scrolls itself, David's call on 21 Aug 2026. An earlier note here argued for
   a manual scroller because a marquee has to duplicate every card in the DOM;
   the clone set carries aria-hidden so a screen reader still hears each review
   exactly once, which was the only real cost.

   Two things the loop depends on, both easy to break:
   1. The cards use margin-right, NOT the parent's gap. With gap, 20 cards are
      20w + 19g wide and half of that is not 10w + 10g, so the restart jumps by
      one gap. margin-right makes every card exactly w+m and the halves match.
   2. .quote needs an explicit width as well as the flex basis. Inside a
      width:max-content track a basis-only card sizes to its unwrapped text,
      which stretches the track and scrolls it to blank for half the cycle. */
.quotes-marquee{
  overflow:hidden;width:100%;margin-top:2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.quotes{
  display:flex;gap:0;width:max-content;
  padding:4px 0 18px;
  animation:quotes-marquee var(--mq,80s) linear infinite;
}
@keyframes quotes-marquee{to{transform:translateX(-50%)}}
/* pause only for a real pointer: on touch, :hover sticks after a tap and freezes it */
@media (hover:hover){.quotes-marquee:hover .quotes{animation-play-state:paused}}
/* no motion preference: fall back to the old hand-scroller so it is still readable */
@media (prefers-reduced-motion:reduce){
  .quotes-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .quotes{animation:none}
}
.quote{
  flex:0 0 clamp(280px,29vw,360px);width:clamp(280px,29vw,360px);
  margin-right:clamp(16px,2vw,24px);
  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){
  /* width:auto matters. The wrapper is width:100% by default, and a negative
     margin on a fixed-width block shifts it without widening it, so the strip
     stayed inside the wrap. -24px is .wrap's real padding; the old rule here
     used var(--wrap-pad,20px), and --wrap-pad is never defined anywhere, so it
     had always been 4px short on each side. */
  .quotes-marquee{width:auto;margin-inline:-24px}
  .quote{flex:0 0 82vw;width:82vw;margin-right:16px}
}

/* The AI demo is the flagship section of this site, so it gets the dark band
   rather than another lilac one. It also breaks up a run of three light
   sections, and the white answer panel reads far better on deep purple. */
.aiband{background:var(--band-bg);color:var(--band-ink)}
.aiband .eyebrow{color:var(--band-accent)}
.aiband h2.title{color:var(--band-ink)}
.aiband p.lead{color:rgba(255,255,255,.82)}
.aiband .ai-note{color:rgba(255,255,255,.72)}
.aiband .ai-note b,.aiband .ai-note strong{color:var(--band-accent)}

/* The hero photo is deliberately 114% wide with a -14% right margin so it
   bleeds off the right edge instead of stealing column width. Nothing was
   clipping that bleed, so the whole PAGE scrolled sideways: measured 24px of
   horizontal overflow at 390px, 29px at 430px, 12px at 1280px, with the image's
   right edge exactly equal to scrollWidth in every case.
   overflow-x:clip rather than hidden on purpose: hidden would force the Y axis
   to auto and clip the hero photo where it overlaps the enquiry form, which is
   the bit the legs-on-the-form layout depends on. clip leaves Y alone. */
html{overflow-x:clip}

/* ---------- AI search demo ----------
   A stylised answer panel, deliberately NOT dressed up as a screenshot of any
   real product: no logos, no borrowed chrome. The words in it are what an AI
   search actually returned on 8 Aug 2026, so the panel is an illustration of a
   real result rather than a pretend one. */
.ai-demo{
  max-width:720px;margin:2.2rem auto 0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:0 0 26px;overflow:hidden;
}
.ai-bar{display:flex;gap:7px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg-alt)}
.ai-bar span{width:11px;height:11px;border-radius:50%;background:#d9d3e6}
.ai-turn{padding:22px 26px 0}
.ai-who{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6b5b85;margin-bottom:.5rem;
}
.ai-user .ai-typed{
  margin:0;font-size:1.02rem;font-weight:700;color:var(--purple);
  min-height:3.2em;line-height:1.45;
}
.ai-caret{
  display:inline-block;width:2px;height:1.05em;vertical-align:-.15em;
  background:var(--purple);margin-left:2px;animation:aiBlink 1s steps(1) infinite;
}
@keyframes aiBlink{50%{opacity:0}}
.ai-bot{border-top:1px solid var(--line);margin-top:20px}
.ai-thinking{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:.92rem;color:#6b5b85;font-weight:600;
}
.ai-thinking span{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:aiPulse 1.2s ease-in-out infinite;
}
.ai-thinking span:nth-child(2){animation-delay:.18s}
.ai-thinking span:nth-child(3){animation-delay:.36s}
@keyframes aiPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.ai-answer p{margin:0 0 .8rem;font-size:1rem;line-height:1.6;color:#3d2a58}
.ai-answer[data-shown] p{opacity:0;transform:translateY(8px);animation:aiIn .5s var(--ease) forwards}
.ai-answer[data-shown] p:nth-child(2){animation-delay:.5s}
.ai-answer[data-shown] p:nth-child(3){animation-delay:1s}
@keyframes aiIn{to{opacity:1;transform:none}}
.ai-hit{
  color:var(--purple);background:rgba(32,206,136,.28);
  padding:.06em .3em;border-radius:5px;font-weight:800;
}
.ai-cite{font-size:.82rem;color:#6b5b85;font-style:italic}
.ai-note{max-width:640px;margin:1.8rem auto 0;text-align:center;color:#3d2a58;line-height:1.6}
@media (max-width:720px){
  .ai-demo{margin-top:1.6rem}
  .ai-turn{padding:18px 18px 0}
  .ai-user .ai-typed{font-size:.96rem}
}
/* no motion for anyone who has asked not to have it: show the whole thing */
@media (prefers-reduced-motion:reduce){
  .ai-caret,.ai-thinking{display:none}
  .ai-answer p{opacity:1;transform:none;animation:none}
}

/* ---- AI proof card in the enquiry panel. Sits where the Craven Expo card
   sits on the Skipton build: one piece of hard evidence, not an event. ---- */
.aiproof{margin:26px 0 0;padding:0}
.aiproof figcaption{display:block;padding:20px 22px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.aiproof-label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.62;margin-bottom:10px}
.aiproof-q{margin:0 0 12px;font-size:.98rem;line-height:1.5;font-style:italic;opacity:.9}
.aiproof-a{margin:0;font-size:.95rem;line-height:1.6;opacity:.92}
.aiproof-a b{color:var(--green);font-weight:700;font-style:normal}
@media (max-width:760px){.aiproof figcaption{padding:17px 18px}}