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

  /* --- Yorkshire: 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}
/* Cut-out portrait heroes size the photo column to the photo, not to a share of
   the row. A grid item defaults to min-width:auto, so the copy column refuses to
   shrink below its widest unbreakable line and eats the photo's space: measured
   19 Aug 2026, "Web Design Yorkshire" at display size squeezed David to 308px
   against his 430px cap, while "Marketing Leeds" left him the full 430.
   Splitting by fr instead just moves the problem, because a 1fr copy column is
   493px and neither title fits that. Sizing the photo column to content gives
   the copy ~660px: short titles hold one line, long ones wrap, and the photo is
   430px on every page either way. */
/* NOT `auto` for that second column. The cutout is width:114% of its
   wrapper, and a percentage width inside an auto-sized grid column has
   nothing to resolve against, so Chrome sized the column 600px and the
   copy column stayed at 510. 430px is the portrait cap the image already
   carries, so stating it leaves the copy ~660px and both titles behave. */
.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 ---------- */
/* Green footer with purple ink, as on halizona.com, rather than the dark purple
   panel these sites used to end on. The strapline is three solid purple blocks
   in white, and the legal line sits in its own full-width dark bar underneath.
   Green is fixed here on purpose: it is the brand's footer on every property,
   so it does NOT follow --hero-bg. */
.site-footer{background:var(--purple-deep);color:rgba(255,255,255,.76);padding:52px 0 30px;font-size:.95rem}
/* BASE dark-footer rules. These are not decoration: without the block display
   the three contact links run together as one line, "info@halizona.comSend us
   a messagehalizona.com". They existed unscoped until the green footer was
   built, at which point they were REWRITTEN as .foot-green rules rather than
   added alongside, so every site still on the dark footer lost them. The live
   sites only look right because they are serving the stylesheet from before
   that change; the next deploy would have broken them. Restored verbatim from
   the live marketingleeds stylesheet. Keep these ABOVE the .foot-green block,
   which legitimately overrides them. */
.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}
/* halizona.com treatment, opt-in per site via footGreen. */
.site-footer.foot-green{background:var(--green);color:var(--purple);padding:56px 0 0}
.foot-green .foot-lead{font-weight:700;color:var(--purple);margin-bottom:14px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.site-footer .logo{width:200px;height:auto;margin-bottom:16px}
.foot-green h4{color:var(--purple);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.foot-green p{color:var(--purple);opacity:.88}
/* :not() the strapline. The blanket span rule was dimming the three blocks to
   88%, which is what made them read as faded white on purple instead of white. */
.foot-green span:not(.foot-tagline span){color:var(--purple);opacity:.88}
.foot-green a{display:block;margin-bottom:8px;color:var(--purple)}
.foot-green a:hover{color:var(--purple-deep);text-decoration:underline}
.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;
}
.foot-green .foot-bottom{
  margin-top:44px;padding-top:0;border-top:0;display:block;
  background:var(--purple-deep);color:rgba(255,255,255,.8);padding:18px 0;
}
.foot-green .foot-bottom .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.85rem}
/* The legal bar is white text on the deep purple, and it has to out-specify the
   purple span rule above. That rule is (0,2,2) because :not() takes the
   specificity of its argument, `.foot-tagline span`, so the obvious
   `.foot-green .foot-bottom span` at (0,2,1) LOSES to it and the line renders
   purple on purple: measured at 1.3:1 contrast, effectively invisible.
   Going through .wrap makes this (0,3,1), which wins. */
.foot-green .foot-bottom .wrap span{color:#fff;opacity:1}

/* ---------- 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}
  /* Mobile only: a long target string cannot hold one line at 390px, and
     .hero{overflow:hidden} would clip it rather than wrap it. Desktop keeps the
     inherited nowrap, because the live marketingleeds layout depends on the copy
     column claiming the headline's natural width to size the photo column. */
  .hero-stack .hero-title{font-size:clamp(1.9rem,8.4vw,2.4rem);white-space:normal}
  .hero-stack .hero-marks{font-size:.42em;gap:.26em .24em}
  /* Raised to .hero-stack .hero-under so it actually applies: the base
     .hero-under rule sits later in the file at equal specificity and was
     silently winning, so this mobile size never took effect. max-width:none
     lets the hero column do the constraining, which keeps the line single
     at 390px and lets it wrap on genuinely narrow phones instead of
     clipping. */
  .hero-stack .hero-under{font-size:.95rem;line-height:1.35;max-width:none}
  .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 is the WRAPPER now, not the <h1>: the heading holds the target
   phrase on its own so the page has one clean H1 instead of three messages run
   together. That move costs the em basis, because gap and .hero-marks are both
   sized in em and used to resolve against .hero h1's display clamp. So the
   wrapper carries that font-size and the heading inherits it. Same pixels, one
   heading. */
.hero-stack{
  display:flex;flex-direction:column;align-items:flex-start;gap:.45em;
  font-size:clamp(2.4rem,5.6vw,4.15rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.97;
}
/* No font-size here on purpose. .hero h1 already sizes it at the display clamp,
   and the ≤900px block above shrinks it. An explicit font-size:inherit sits
   later in the file at equal specificity and silently beat that mobile rule,
   putting the title back to the desktop 38.4px on a phone. */
.hero-stack .hero-title{display:block;line-height:1.02;margin:0}
/* A long target string wraps to two lines at the full display size, which grows
   the hero and drops the bottom-anchored cutout well below where it sits on a
   short title. Measured 19 Aug 2026 at 1440px: "Marketing Leeds" gave a 673px
   hero with David's head crowning just above the headline, while "Web Design
   Yorkshire" gave 762px and put his head level with the second line. Titles over
   16 characters take a step down so they hold one line in the 680px copy column
   and the hero keeps its proportions. */
.hero-stack .hero-title.is-long{font-size:clamp(1.9rem,4.4vw,3.25rem)}
.hero-stack .hero-marks{
  display:flex;flex-wrap:wrap;gap:.34em .3em;margin:0;   /* it is a <p> now */
  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;
}
/* It used to sit inside the <h1> and silently inherit .hero h1's
   white-space:nowrap, which is what held it on one line: its own max-width:30ch
   lands within a pixel of the text width, so once it became a sibling <p> it
   wrapped and pushed the marks and CTA down. Measured 19 Aug 2026: 335px of
   text in a 335px box. Restored on desktop only. Below 900px it is allowed to
   wrap, because nowrap there ran the line to 359px inside a 390px viewport and
   would have clipped on anything narrower. */
@media (min-width:901px){ .hero-under{white-space:nowrap} }

/* 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. */
/* BASE tagline for the dark footer. Same story as the rules above: losing
   `.foot-tagline span{display:block}` collapsed the three lines onto one and it
   rendered as "Find you.Trust you.Choose you." with no spaces. The .t2/.t3
   fade is the dark footer's intended treatment; the green footer drops it on
   purpose, which is why it lives here and not in the shared rule. */
.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}

.foot-green .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;
}
/* Three solid purple blocks in white, sitting in a row on the green, the same
   treatment as halizona.com's footer. NOT .hl-mark: that paints a gradient band
   sized to the line box, which is right inside a wrapping heading and wrong for
   three standalone blocks that need real padding. */
.foot-green .foot-tagline{display:flex;flex-wrap:wrap;gap:10px}
.foot-green .foot-tagline span{
  display:inline-block;background:var(--purple);color:#fff;opacity:1;
  padding:.16em .42em;border-radius:4px;
}
@media (max-width:720px){ .foot-tagline{font-size:2.1rem;margin-bottom:22px;gap:8px} }

/* 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}

/* Tiered pricing with an itemised list per tier. The three-up grid was built for
   short cards, so a detailed set needs the tiers to sit top-aligned and the list
   to read as a spec rather than as body copy. */
.pricing.pricing-detail{align-items:start}
.pricing-detail .plan{display:flex;flex-direction:column}
.plan-list{margin:14px 0 0;display:grid;gap:7px}
.plan-list li{
  position:relative;padding-left:18px;font-size:.9rem;line-height:1.45;
}
.plan-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.plan-best{margin-top:auto;padding-top:14px;font-size:.88rem;line-height:1.5;opacity:.85}
@media (max-width:900px){ .plan-list li{font-size:.92rem} }

/* A band carrying a photograph: copy and list in one column, the image in the
   other. Ten prose bands in a row is a wall; this gives the eye somewhere to
   land without changing what the section says. */
.band-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px);align-items:start;
}
.band-photo{margin:0}
.band-photo img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.band-grid .who-list{margin-top:18px}
.band-close{margin-top:18px}
@media (max-width:900px){
  .band-grid{grid-template-columns:1fr;gap:22px}
  .band-photo{order:-1}
}

/* Three grounds for the question sections instead of two, and the photograph
   changes side down the page. Seven of them in white-then-lilac was the flat,
   samey run: halizona.com breaks its middle with a purple band, so these do too. */
.band-dark{
  background:var(--purple);color:#fff;
  --line:rgba(255,255,255,.22);
}
.band-dark .title,.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--green)}
.band-dark p,.band-dark .who-copy p,.band-dark .who-close{color:rgba(255,255,255,.9)}
.band-dark .who-list li{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;
}
.band-dark .band-photo img{box-shadow:0 18px 50px rgba(0,0,0,.28)}

/* photograph on the left for alternate bands, so the eye is not tracking the
   same column edge all the way down */
.band-flip .band-grid{grid-template-columns:.95fr 1.05fr}
.band-flip .band-photo{order:-1}
@media (max-width:900px){ .band-flip .band-grid{grid-template-columns:1fr} }

/* ---------- swipe carousel, ported from halizona.com ----------
   Mobile only. Above 720px the track stays a normal grid and the controls are
   hidden, which is how the main site does it: six case cards stacked vertically
   is a very long scroll on a phone, and a swipe with arrows and dots is the
   pattern the brand already uses. */
@media (max-width:720px){
  .mcar{position:relative;z-index:1}
  .mcar-track{
    display:flex;flex-wrap:nowrap;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    margin-inline:-24px;padding:6px 24px 10px;
    scrollbar-width:none;
  }
  .mcar-track::-webkit-scrollbar{display:none}
  .mcar-track.cases > *{flex:0 0 82%}
  .mcar-track > *{scroll-snap-align:center}

  .mcar-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
  .mcar-arrow{
    width:56px;height:56px;border-radius:50%;border:2px solid var(--purple);
    background:#fff;color:var(--purple);display:grid;place-items:center;
    cursor:pointer;flex:0 0 auto;padding:0;transition:background .2s,color .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .mcar-arrow svg{width:24px;height:24px}
  .mcar-arrow:active{background:var(--purple);color:#fff}
  .mcar-dots{display:flex;gap:2px}
  .mcar-dot{
    width:32px;height:32px;padding:0;border:0;background:transparent;
    display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
    -webkit-tap-highlight-color:transparent;
  }
  .mcar-dot::before{
    content:"";width:9px;height:9px;border-radius:50%;background:var(--line);
    transition:background .2s,transform .2s;
  }
  .mcar-dot.active::before{background:var(--purple);transform:scale(1.35)}
}
@media (min-width:721px){ .mcar-nav{display:none} }

/* A hero CTA longer than the default wraps once the button goes full width on
   a phone, and the result is an 87px-tall button that dominates the hero.
   Measured on web-design-yorkshire at 390px: "Talk to us about your website"
   is 284px of uppercase, 800-weight, letter-spaced text plus the arrow, inside
   a 288px content box, so it broke to two lines. Trimming the type, the
   tracking and the side padding buys enough room for one line down to a 360px
   phone. Scoped to .is-long, which the generator adds only past 22 characters,
   so the short CTAs on the other sites keep the full-size button and no live
   page moves. */
@media (max-width:640px){
  .hero-cta .btn.is-long{font-size:.84rem;letter-spacing:.02em;padding:.9rem .8rem;gap:.35rem}
  .hero-cta .btn.is-long svg{width:14px;height:14px}
}