:root{
  --cobalt:#2B3FE8; --ink:#101010; --paper:#F5F2E8; --white:#FFFFFF;
  --lemon:#FFE234; --coral:#FF5E3A; --mint:#6FE3A1;
  --b:4px solid var(--ink);
  --sh:8px 8px 0 var(--ink);
  --sh-sm:5px 5px 0 var(--ink);
  --display:"Syne","Archivo Black",Impact,sans-serif;
  --body:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1240px;
  --r-photo:12px;   /* photography only. Every structural block stays at radius 0. */
}
*,*::before,*::after{box-sizing:border-box}
/* .card sets display:flex, and a class selector beats the browser's built-in
   [hidden]{display:none}, so the filter marked cards hidden while every one of
   them kept rendering. The existing rule was scoped to .tool__out only. */
[hidden]{display:none !important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:0.94;letter-spacing:-0.03em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.3vw,3.8rem)}
h2{font-size:clamp(2.2rem,5vw,4.2rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.02}
h4{font-size:1.06rem;line-height:1.15}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;display:inline-block;
  background:var(--ink);color:var(--lemon);padding:7px 13px;margin:0 0 20px}
.btn{display:inline-block;font-family:var(--display);font-weight:800;font-size:1.05rem;
  padding:16px 28px;border:var(--b);background:var(--lemon);color:var(--ink);
  box-shadow:var(--sh);text-decoration:none;cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:hover,.btn:focus-visible{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
.btn--white{background:var(--white)}
:focus-visible{outline:4px solid var(--coral);outline-offset:3px}
/* Joined input-and-button rows sit flush against each other with no gap, so the 3px
   positive offset above paints the ring ON TOP of the neighbouring button and the
   note underneath. Draw it inside the element instead on those rows only. */
.tool__form input:focus-visible,.tool__form button:focus-visible,
.pop__form input:focus-visible,.pop__form button:focus-visible{outline-offset:-4px}

/* ---------- nav: five items, no dropdowns anywhere ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--b)}
.nav__in{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px}
.nav__logo{flex:0 0 auto;width:206px}
.nav__logo img{width:100%;height:auto}
.nav__links{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav__links a{font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;
  padding:9px 14px;border:3px solid transparent}
.nav__links a:hover,.nav__links a:focus-visible{border:3px solid var(--ink);background:var(--white)}
.nav__cta{font-family:var(--display);font-weight:800;text-decoration:none;padding:11px 18px;
  border:var(--b);background:var(--cobalt);color:var(--white);box-shadow:var(--sh-sm);
  transition:transform .08s,box-shadow .08s}
.nav__cta:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.nav__burger{display:none;margin-left:auto;font-family:var(--display);font-weight:800;font-size:1rem;
  padding:11px 16px;border:var(--b);background:var(--lemon);box-shadow:var(--sh-sm);cursor:pointer}
@media (max-width:940px){
  .nav__burger{display:block}
  .nav__links{display:none;position:fixed;inset:78px 0 0;background:var(--cobalt);
    flex-direction:column;gap:0;padding:26px;overflow:auto;align-items:stretch}
  .nav__links.is-open{display:flex}
  .nav__links a{color:var(--white);font-size:2rem;padding:18px 8px;border:0;border-bottom:3px solid rgba(255,255,255,.28)}
  .nav__links a:hover{background:transparent;border:0;border-bottom:3px solid var(--white)}
  .nav__cta{margin-top:22px;text-align:center;font-size:1.3rem}
  .nav__logo{width:168px}
}

/* ---------- hero: editorial masthead, then the loud tool band ---------- */
.hero{background:var(--cobalt);color:var(--white);border-bottom:var(--b);padding:26px 0 0;position:relative;overflow:hidden}
/* work strip: the hero has to carry imagery, not just type */
/* Work rail: tiles big enough to actually see the site, scrolling slowly like the
   ticker, pausing on hover so they can be clicked. Four slim static tiles meant
   nobody could tell what they were looking at. */
.rail{margin-top:18px;border-top:var(--b);border-bottom:var(--b);
  background:rgba(16,16,16,.18);overflow:hidden;position:relative}
.rail__in{display:flex;gap:18px;padding:18px;will-change:transform}
.rail a{flex:0 0 auto;width:clamp(230px,25vw,340px);display:block;text-decoration:none;
  border:var(--b);border-radius:var(--r-photo);overflow:hidden;background:var(--white);
  box-shadow:var(--sh);transition:transform .12s,box-shadow .12s}
.rail a:nth-child(3n+1){transform:rotate(-1.1deg)}
.rail a:nth-child(3n){transform:rotate(1deg)}
.rail a:hover,.rail a:focus-visible{transform:translate(5px,5px) rotate(0deg) scale(1.015);
  box-shadow:2px 2px 0 var(--ink);z-index:2}
/* height:auto is load-bearing. Without it the img's height="773" attribute wins
   and aspect-ratio never applies, which made every tile 779px tall. */
.rail img{width:100%;height:auto;aspect-ratio:1100/700;object-fit:cover;object-position:top center;display:block}
.rail b{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:.82rem;color:var(--ink);
  padding:10px 12px;border-top:var(--b);background:var(--lemon)}
.rail b i{font-style:normal;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--ink);padding:2px 6px;background:var(--white);white-space:nowrap}
.rail a:nth-child(4n+2) b{background:var(--mint)}
.rail a:nth-child(4n+3) b{background:var(--coral);color:var(--white)}
.rail a:nth-child(4n+3) b i{color:var(--ink)}
.rail a:nth-child(4n) b{background:var(--white)}
/* a hint that it is scrollable and pausable, in the same blunt language */
.rail__hint{position:absolute;right:10px;bottom:10px;z-index:3;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;background:var(--ink);color:var(--lemon);
  border:3px solid var(--lemon);padding:5px 9px}
/* Touch keeps the motion AND gets a real swipe. The two share one mechanism: the
   script drives scrollLeft here rather than a transform, so a finger and the animation
   are moving the same thing and cannot fight.
   scroll-snap is deliberately NOT set: mandatory snapping yanks a programmatic
   scrollLeft back to the nearest card every frame, which stops the rail dead. */
@media (hover:none){
  .rail{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail__in{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  .rail{overflow-x:auto}
  .rail__in{transform:none !important}
}
/* ticker: more painted blocks, more colour, and it says something true */
.ticker{border-top:var(--b);border-bottom:var(--b);background:var(--ink);overflow:hidden;margin-top:20px}
.ticker__in{display:flex;gap:0;white-space:nowrap;will-change:transform}
.ticker span{font-family:var(--display);font-weight:800;font-size:1rem;padding:11px 20px;
  border-right:3px solid var(--ink);color:var(--ink);flex:0 0 auto}
.ticker span:nth-child(4n+1){background:var(--lemon)}
.ticker span:nth-child(4n+2){background:var(--mint)}
.ticker span:nth-child(4n+3){background:var(--coral);color:var(--white)}
.ticker span:nth-child(4n+4){background:var(--white)}

/* the Feastables touch: a slow wobble on the stickers, nothing else */
@keyframes riWobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(4deg)}}
@keyframes riWobbleB{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2.5deg)}}
.sticker--star{animation:riWobble 3.2s ease-in-out infinite}
.sticker--own{animation:riWobbleB 3.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sticker--star,.sticker--own{animation:none}}
.hero h1{color:var(--white)}
.hero__lead{font-size:clamp(1rem,1.4vw,1.14rem);max-width:52ch;margin-top:16px}
.hero__rule{height:4px;background:var(--ink);margin:26px 0 0}
.masthead{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
@media (max-width:880px){.masthead{grid-template-columns:1fr}}
.stamp{font-family:var(--display);font-weight:800;background:var(--lemon);color:var(--ink);
  border:var(--b);box-shadow:var(--sh);padding:14px 18px;transform:rotate(-2.5deg);text-align:center;line-height:1.05}
.stamp b{display:block;font-size:2.6rem}
.stamp span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}

/* Remote support download, top right of the hero. Sits above the price stamp in
   its own column so it does not fight the diagnosed-first sticker, which is
   positioned against .hero rather than against .stamp. */
.masthead__aside{display:flex;flex-direction:column;align-items:flex-end;gap:30px;
  align-self:stretch;justify-content:space-between}
.remote{display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;text-decoration:none;
  background:var(--coral);color:var(--white);border:var(--b);box-shadow:var(--sh);
  padding:18px 30px;line-height:1;text-align:center;
  animation:riNudge 2.6s ease-in-out infinite;transition:transform .08s,box-shadow .08s}
.remote b{display:block;font-size:clamp(1.45rem,3vw,2.15rem)}
.remote span{font-size:.76rem;letter-spacing:.12em;font-weight:700}
.remote:hover,.remote:focus-visible{animation:none;
  transform:rotate(-2deg) translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
@keyframes riNudge{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-5px)}}
@media (max-width:880px){
  .masthead__aside{align-items:flex-start;gap:22px;align-self:auto}
}

/* the one loud moment on the page */
.tool{background:var(--lemon);border-top:var(--b);border-bottom:var(--b);padding:34px 0;display:block}
.tool__grid{display:grid;grid-template-columns:1fr;gap:20px}
.tool__head{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between}
.tool h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.tool__form{display:flex;gap:0;flex-wrap:wrap}
.tool__form input{flex:1 1 320px;min-width:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.7rem);padding:20px 22px;border:var(--b);border-right:0;
  background:var(--white);color:var(--ink)}
.tool__form input::placeholder{color:#8a8578}
.tool__form button{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2vw,1.5rem);
  padding:20px 30px;border:var(--b);background:var(--cobalt);color:var(--white);cursor:pointer;
  box-shadow:var(--sh);transition:transform .08s,box-shadow .08s}
.tool__form button:hover{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
@media (max-width:640px){
  .tool__form input{border-right:var(--b);flex:1 1 100%}
  .tool__form button{width:100%;margin-top:14px}
}
.tool__note{font-size:.95rem;max-width:60ch}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px}
.score{background:var(--white);border:var(--b);box-shadow:var(--sh);padding:20px 22px}
.score b{display:block;font-family:var(--display);font-weight:800;font-size:4.6rem;line-height:.88}
.score span{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.score p{margin:10px 0 0;font-size:.95rem}
.score--ai{background:var(--mint)}
.tool__out[hidden]{display:none !important}

/* the check: loader, findings and the audit pop-up */
.loader{border:var(--b);background:var(--ink);padding:18px 20px}
.loader__bar{height:26px;border:3px solid var(--lemon);background:transparent;overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--lemon);
  transition:width .45s steps(8, end)}
.loader__label{margin:12px 0 0;font-family:var(--display);font-weight:800;
  font-size:1rem;color:var(--lemon);letter-spacing:.02em}
.loader__sub{margin:4px 0 0;font-size:.84rem;color:#C9C4B6}

.findings{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media (max-width:760px){.findings{grid-template-columns:1fr}}
.findings__col{border:var(--b);background:var(--white);padding:18px 20px}
.findings__col h3{margin:0 0 12px;font-size:1.05rem}
.findings__col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.findings__col li{font-size:.9rem;padding-left:20px;position:relative;line-height:1.4}
.findings__col li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;
  border:2px solid var(--ink);background:var(--lemon)}
.findings__col li.bad::before{background:var(--coral)}
.findings__col li b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem}
.findings__col li span{color:#5d584c}

.pop{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(16,16,16,.74)}
.pop__panel{background:var(--ink);border:var(--b);box-shadow:12px 12px 0 var(--coral);
  padding:32px 30px 26px;max-width:640px;width:100%;color:#EDEAE0;position:relative}
.pop__panel h2{color:var(--lemon);margin:12px 0 12px;font-size:clamp(1.6rem,4.6vw,2.5rem)}
.pop__panel p{margin:0 0 12px;max-width:56ch}
.pop__form{display:flex;flex-wrap:wrap;gap:0;margin-top:20px;align-items:stretch}
.pop__form input{flex:1 1 260px;min-width:0;font-family:var(--display);font-weight:700;
  font-size:1.05rem;padding:14px 16px;border:var(--b);border-right:0;background:var(--white);color:var(--ink)}
.pop__form button{font-family:var(--display);font-weight:800;font-size:1.05rem;padding:14px 22px;
  border:var(--b);background:var(--lemon);color:var(--ink);cursor:pointer}
.pop__form button:hover{background:var(--white)}
@media (max-width:560px){.pop__form input{flex:1 1 100%;border-right:var(--b)}
  .pop__form button{width:100%;margin-top:12px}}
/* .pop__panel p is 0-1-1 and beats a bare .pop__note at 0-1-0, so this has to be
   scoped too or the margin is silently dropped. Second time today: see .tool__ask. */
.pop__panel .pop__note{margin:18px 0 0;font-size:.82rem;color:#C9C4B6;line-height:1.5}
.pop__note a{color:var(--lemon)}
.pop__no{background:none;border:0;color:#C9C4B6;font:inherit;font-size:.84rem;
  text-decoration:underline;cursor:pointer;padding:0;margin-top:14px}
.pop__no:hover{color:var(--lemon)}
.pop__ok{background:var(--mint);border:var(--b);color:var(--ink);padding:16px 18px;margin-top:16px}
.pop__ok b{font-family:var(--display);font-weight:800;display:block}

/* the ask. A second cobalt input row in the same lemon band read as a repeat of
   the check above it, so this sits on an ink panel instead: the free scores and
   the thing you hand an address over for should not look like one control. The
   drop shadow is coral because an ink shadow behind an ink panel is invisible. */
.tool__ask{background:var(--ink);border:var(--b);box-shadow:8px 8px 0 var(--coral);
  padding:26px 24px 20px;margin-top:6px;position:relative}
.tool__ask-head{display:grid;gap:10px;margin-bottom:18px}
.tool__ask h3{color:var(--lemon);font-size:clamp(1.35rem,2.6vw,2rem);margin:0}
.tool__ask-head p{color:#EDEAE0;max-width:62ch;margin:0}
.tool__form--ask input{font-size:clamp(1rem,1.8vw,1.25rem);padding:16px 18px;flex:1 1 300px}
/* no drop shadow on this one. An ink shadow is invisible on the ink panel, and a
   white one overflowed the panel on a phone, where the button goes full width.
   The button inverts on hover instead, which the panel border already frames. */
.tool__form--ask button{background:var(--lemon);color:var(--ink);
  font-size:clamp(1rem,1.7vw,1.25rem);padding:16px 26px;box-shadow:none}
.tool__form--ask button:hover{background:var(--white);transform:none;box-shadow:none}
.tool__ask-note{margin:18px 0 0;font-size:.84rem;color:#C9C4B6;max-width:64ch}
.tool__ask-note a{color:var(--lemon)}
.tool__ask-note--bad{color:var(--coral);font-weight:600}
.tool__ask .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tool__ask-ok{display:flex;gap:14px;align-items:flex-start;background:var(--mint);
  border:var(--b);padding:18px 20px}
.tool__ask-ok b{font-family:var(--display);font-weight:800;display:block;margin-bottom:4px}
.tool__ask-ok p{color:var(--ink);margin:0;font-size:.95rem}
@media (max-width:640px){.tool__ask{box-shadow:5px 5px 0 var(--coral);padding:20px 18px 16px}}

/* who this is for: full bleed photography, the thing screenshots cannot do */
.who{background:var(--ink);border-bottom:var(--b);position:relative}
.who__strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.who__strip figure{margin:0;position:relative;overflow:hidden;border-right:var(--b);background:var(--ink)}
.who__strip img{border-radius:0}
.who__strip figure:last-child{border-right:0}
.who__strip img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  filter:saturate(1.08) contrast(1.04);transition:transform .35s ease}
.who__strip figure:hover img{transform:scale(1.05)}
.who__strip figcaption{position:absolute;left:0;bottom:0;font-family:var(--display);font-weight:800;
  font-size:.78rem;padding:8px 12px;background:var(--lemon);color:var(--ink);border-top:var(--b);border-right:var(--b)}
.who__strip figure:nth-child(2) figcaption{background:var(--mint)}
.who__strip figure:nth-child(3) figcaption{background:var(--coral);color:var(--white)}
.who__strip figure:nth-child(5) figcaption{background:var(--white)}
.who__say{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);
  background:var(--cobalt);color:var(--white);border:var(--b);box-shadow:var(--sh);
  font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2.6vw,2.1rem);
  padding:18px 26px;text-align:center;max-width:min(92%,660px);z-index:3;line-height:1.06}
@media (max-width:900px){.who__strip{grid-template-columns:repeat(3,1fr)}
  .who__strip figure:nth-child(4),.who__strip figure:nth-child(5){display:none}}
@media (max-width:560px){.who__strip{grid-template-columns:repeat(2,1fr)}
  .who__strip figure:nth-child(3){display:none}.who__say{font-size:1rem;padding:12px 16px}}

/* drawn ornament: stickers, arrows and a squiggle. All hand-drawn SVG, nothing lifted. */
.sticker{position:absolute;font-family:var(--display);font-weight:800;border:var(--b);
  box-shadow:var(--sh-sm);padding:9px 13px;font-size:.78rem;line-height:1.1;text-align:center;z-index:5}
.sticker--star{background:var(--mint);transform:rotate(8deg)}
.sticker--own{background:var(--coral);color:var(--white);transform:rotate(-6deg)}
.arrow{position:absolute;z-index:4;pointer-events:none}
.squig{display:block;width:min(320px,60%);height:auto;aspect-ratio:320/16;margin-top:8px;overflow:visible}
.squig path{fill:none;stroke:var(--lemon);stroke-width:7;stroke-linecap:round}
.band--white .squig path{stroke:var(--coral)}
/* the ornament must never land on its own colour: the tool band is lemon, and on
   paper a lemon stroke is too faint to read. */
.tool .squig path{stroke:var(--ink)}
.band--paper .squig path{stroke:var(--coral)}
@media (max-width:900px){.sticker,.arrow{display:none}}

/* ---------- editorial work grid ---------- */
.band{padding:60px 0;border-bottom:var(--b)}
/* The dots were solid --ink at full opacity while every other pattern on the
   site sits at 4 to 10 percent. That is what made body text on this band hard
   to read. Brought into line, and the grid loosened so they read as texture. */
.band--paper{background:var(--paper);
  background-image:radial-gradient(rgba(16,16,16,.13) 1.4px, transparent 1.5px);
  background-size:26px 26px;background-position:0 0}
/* running text gets the paper back under it, so nothing sits on the pattern */
.band--paper p,.band--paper li,.band--paper .smallprint{position:relative}
.band--paper > .wrap > p,.band--paper .band__head p{
  background:var(--paper);box-shadow:0 0 0 6px var(--paper)}
.band--paper > .wrap{position:relative;z-index:1}
.band--white{background:var(--white);
  background-image:repeating-linear-gradient(45deg, rgba(16,16,16,.045) 0 10px, transparent 10px 20px)}
.band--white > .wrap{position:relative;z-index:1}
.band__head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:38px}
@media (max-width:760px){.band__head{grid-template-columns:1fr}}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filters button{font-family:var(--display);font-weight:700;font-size:.95rem;padding:10px 16px;
  border:var(--b);background:var(--white);cursor:pointer;box-shadow:var(--sh-sm);
  transition:transform .08s,box-shadow .08s}
.filters button[aria-pressed="true"]{background:var(--cobalt);color:var(--white)}
.filters button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

/* align-items:start, or a short card stretches to the height of the tall one next to
   it and you get a white void under its text. Ragged bottoms are the point here. */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px;align-items:start}
.card{grid-column:span 6;border:var(--b);background:var(--white);box-shadow:var(--sh);
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border-radius:var(--r-photo);transition:transform .1s,box-shadow .1s}
.card:hover,.card:focus-visible{transform:translate(6px,6px);box-shadow:2px 2px 0 var(--ink)}
/* Widths are assigned by layoutPairs() in the page script, never by nth-child, because
   the filters hide cards and nth-child counts hidden ones. Every row is a PAIR summing
   to 12, so there is never a card sitting alone with a hole beside it. The pair cycle
   gives the varied widths. A lone card at the end of an odd set goes full width. */
.card--wide{grid-column:span 8}
.card--hero{grid-column:span 8}
.card--w4{grid-column:span 4}
.card--w5{grid-column:span 5}
.card--w6{grid-column:span 6}
.card--w7{grid-column:span 7}
.card--w8{grid-column:span 8}
.card--w12{grid-column:span 12}
@media (max-width:1000px){.grid > .card{grid-column:span 6}}
@media (max-width:660px){.grid > .card{grid-column:span 12}}
.card__shot{border-bottom:var(--b);background:var(--paper);aspect-ratio:1100/773;overflow:hidden}
.card__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.card__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.card__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.tag{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border:3px solid var(--ink)}
.tag--live{background:var(--mint)}
.tag--concept{background:var(--white)}
.tag--soon{background:var(--lemon)}
.card__body p{margin:0;font-size:.96rem}
.card__url{font-family:var(--display);font-weight:700;font-size:.86rem;margin-top:auto;padding-top:10px}

/* ---------- services ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.panel{border:var(--b);box-shadow:var(--sh);padding:30px}
.panel--main{background:var(--cobalt);color:var(--white)}
.panel--side{background:var(--white)}
.panel ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.panel li{padding-left:30px;position:relative;font-size:1.02rem}
.panel li::before{content:"";position:absolute;left:0;top:.36em;width:15px;height:15px;
  background:var(--lemon);border:3px solid var(--ink)}
.panel--side li::before{background:var(--coral)}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:24px}
/* For a grid whose card count does not divide by the column count, auto-fit leaves the
   last row hard left with a hole beside it: 6 cards fit 4 across, so two sit stranded,
   and the homepage's 5 strand one. `justify-content` cannot fix it, because 1fr tracks
   already consume the whole row. Flex with a FIXED basis keeps every card the same
   width and centres whatever is left over. */
.prices--fit{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.prices--fit > .price{flex:0 1 calc(33.333% - 16px);min-width:290px}
@media (max-width:900px){.prices--fit > .price{flex:0 1 calc(50% - 12px)}}
@media (max-width:620px){.prices--fit > .price{flex:0 1 100%;min-width:0}}
.price{border:var(--b);background:var(--white);box-shadow:var(--sh);padding:26px;display:flex;flex-direction:column}
.price--flag{background:var(--lemon)}
/* Colour modifiers so the pricing grid carries the brutalist palette rather than
   being a wall of white cards. Cobalt and coral are dark, so everything inside
   them has to flip to paper or it disappears. */
.price--cobalt{background:var(--cobalt);color:var(--white)}
/* Coral is a bright ground: white on it measured 3.04:1, which fails AA for body
   text. Ink on coral measures ~9:1, so coral keeps dark text. */
.price--coral{background:var(--coral)}
.price--mint{background:var(--mint)}
.price--cobalt b,.price--cobalt p,.price--cobalt li{color:var(--white)}
.price--cobalt li::before{background:var(--white)}
/* the tag chip keeps a white background, so it must NOT inherit the card's
   white text or it renders white on white and disappears entirely */
.price--cobalt .tag{color:var(--ink)}
/* Measured at 1440: the card's inner width is 220px while the prices needed
   220 / 226 / 226 / 265, so three of four overflowed and £1,495 hung 45px past
   the border. Sized to the LONGEST value rather than the shortest, and clamped
   so it holds as the grid reflows. */
.price b{font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;display:block;
  margin:6px 0 12px;max-width:100%;overflow-wrap:break-word}
/* The card heading was a hard 1.5rem inline, so it could not react to the CARD getting
   narrower, only the window. At four across the inner width drops to 208px and
   "Neobrutalism" needs 261px, so it bled 41 to 53px straight out of the border.
   clamp() with a vw middle term does not help: vw tracks the WINDOW, and the window is
   at its widest exactly when the cards are at their narrowest. cqi tracks the container,
   which is the thing that actually changed. overflow-wrap above is the belt and braces
   for any future word longer than this one. */
.price{container-type:inline-size}
.price b.price__hd{font-size:clamp(1.05rem,7cqi,1.5rem);line-height:1.08}
/* nowrap ONLY where the content is a single price token. Applied to every b in a
   .price card it forced multi-word headings like "You say what you do" onto one
   line and overflowed by up to 242px. */
.prices .price > b{white-space:normal}
.price b.nowrap{white-space:nowrap}
.price p{font-size:.96rem}
.price .btn{margin-top:auto;text-align:center}
/* a note is still part of the design, so give it a mark rather than leaving it
   as small grey text floating under a wall of hard-edged blocks */
.smallprint{font-size:.95rem;margin-top:28px;max-width:68ch;
  border-left:6px solid var(--lemon);padding:2px 0 2px 16px}
.band--white .smallprint,.cta .smallprint{border-left-color:var(--coral)}
.tool .smallprint{border-left-color:var(--ink)}

/* priced add-ons: these were a sentence with three numbers buried in it */
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin-top:30px}
.extra{border:var(--b);background:var(--white);box-shadow:var(--sh-sm);padding:18px 20px;
  transition:transform .08s,box-shadow .08s}
.extra:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.extra:nth-child(2){background:var(--mint)}
.extra:nth-child(3){background:var(--lemon)}
.extra b{display:block;font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;
  letter-spacing:-0.03em}
.extra b i{font-style:normal;font-size:1rem;letter-spacing:0}
.extra em{font-style:normal;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px}
.extra span{display:block;font-size:.9rem;line-height:1.4;margin-top:8px}

/* ---------- cta + footer ---------- */
.cta{background:var(--coral);color:var(--white);border-bottom:var(--b);padding:76px 0;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 14px, transparent 14px 28px)}
.cta > .wrap{position:relative;z-index:1}
.cta h2{color:var(--white)}
.cta__row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.foot{background:var(--ink);color:#EDEAE0;padding:52px 0 34px;font-size:.95rem}
.foot a{color:var(--lemon)}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.foot h4{font-family:var(--display);color:var(--white);margin-bottom:12px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot__bar{margin-top:36px;padding-top:20px;border-top:3px solid #2e2e2e;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.preview-bar{background:var(--ink);color:var(--lemon);font-family:var(--display);font-weight:700;
  text-align:center;padding:11px 16px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* Remote support page: download buttons and numbered steps. */
.dl{display:flex;flex-wrap:wrap;gap:16px}
.dl__btn{display:inline-flex;flex-direction:column;gap:5px;font-family:var(--display);font-weight:800;
  text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--white);
  border:var(--b);box-shadow:var(--sh);padding:16px 22px;line-height:1;
  transition:transform .08s,box-shadow .08s}
.dl__btn--go{background:var(--coral)}
.dl__btn b{font-size:clamp(1.02rem,1.9vw,1.35rem)}
.dl__btn span{font-size:.68rem;letter-spacing:.1em;font-weight:700}
.dl__btn:hover,.dl__btn:focus-visible{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
.step__n{display:inline-block;align-self:flex-start;font-family:var(--display);font-weight:800;background:var(--lemon);
  color:var(--ink);border:var(--b);padding:3px 10px;margin-bottom:12px;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.panel ol{margin:14px 0 14px 22px;padding:0}
.panel ol li{margin-bottom:9px}