:root{--ink:#061C25;--ink2:#0A2A36;--ink3:#0F3A48;--pp:#F7F6F3;--pp2:#ECEAE4;--tl:#0F7F83;--tl2:#33C2C5;--or:#F0521A;--or2:#F6AA2B;--ln:rgba(6,28,37,.15);--ln2:rgba(6,28,37,.08);--mu:rgba(6,28,37,.6);--lnD:rgba(247,246,243,.15);--muD:rgba(247,246,243,.55);--ez:cubic-bezier(.16,.84,.3,1)}
/* scrollbar. Uses the brand orange rather than a second near-identical hex.
   Firefox ignores ::-webkit-scrollbar entirely, so it gets the standard
   properties instead - without them it keeps the default grey bar. */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{box-shadow:inset 0 0 10px var(--ink);border-radius:25px}
::-webkit-scrollbar-thumb{background:var(--or);border-radius:25px}
::-webkit-scrollbar-thumb:hover{background:var(--or2)}
html{scrollbar-width:thin;scrollbar-color:var(--or) var(--pp2)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--pp);color:var(--ink);font-family:'Karla',system-ui,sans-serif;font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--or)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.045em;line-height:.98}
/* Was the mono eyebrow: 10.5px, uppercase, tracked out to .12em. That pattern,
   more than the typeface, is what read as machine-made. Sentence case now, and
   weight rather than letterspacing gives it its job back. */
.mo{font-family:'Karla',system-ui,sans-serif;font-size:13.5px;letter-spacing:.01em;font-weight:600}
.w{max-width:1500px;margin:0 auto;padding:0 clamp(16px,2.6vw,44px)}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* ── buttons ──────────────────────────────────────────────────────────────
   Two styles and two modifiers, nothing else.
     .btn        primary, solid
     .btn2       secondary, outline
     .btn-sm     smaller, for the header and other tight spots
     .btn-block  full width, opt in - forms only

   align-self and justify-self are the important part: most of these sit in
   flex columns or grids, where the default stretch was blowing an
   inline-block button out to the full width of its container. */
/* Both carry a 1px border and identical padding so a solid and an outline
   button sitting side by side line up exactly. line-height is explicit
   because a <button> and an <a> disagree about it otherwise. */
.btn,.btn2{display:inline-block;white-space:nowrap;font-size:15.5px;font-weight:600;
 font-family:inherit;line-height:1.45;padding:13px 23px;border:1px solid transparent;
 text-align:center;cursor:pointer;align-self:flex-start;justify-self:start;width:auto}
.btn{background:var(--or);color:#fff!important;border-color:var(--or);
 transition:background .16s,border-color .16s,transform .16s var(--ez)}
.btn:hover{background:#cf4413;border-color:#cf4413;color:#fff!important;transform:translateY(-1px)}
.btn2{border-color:currentColor;background:none;
 transition:background .16s,color .16s,border-color .16s}
.btn2:hover{background:var(--ink);color:var(--pp)!important;border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:14.5px}
.btn-block{display:block;width:100%;align-self:stretch;justify-self:stretch}
/* header */
header{position:sticky;top:0;z-index:80;background:var(--pp);border-bottom:1px solid var(--ink)}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);height:74px}
.lg{display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:700;font-size:19px;letter-spacing:-.05em;line-height:1}
.lg img{height:54px;width:auto}
.lg s{text-decoration:none;color:var(--tl)}
.nv{display:flex;gap:clamp(14px,2vw,30px);font-size:15px;font-weight:500}
.nv a{color:var(--mu)}.nv a:hover,.nv a[aria-current]{color:var(--ink)}
.nv a[aria-current]{box-shadow:inset 0 -2px 0 var(--or)}
.hr{display:flex;align-items:center;gap:16px}
/* The one definition of the menu trigger. Bars are 2px on a 7px pitch, which is
   what the close-mark transform in cre8-nav.css is built around. */
.bg{display:none;background:none;border:0;cursor:pointer;padding:8px;
 flex-direction:column;align-items:center;justify-content:center;gap:5px}
.bg span{width:22px;height:2px;background:var(--ink);display:block;border-radius:1px}
/* The drawer itself lives in cre8-nav.css, which loads after this file. All
   that belongs here is showing the trigger and getting the desktop-only bits
   out of the header. */
@media(max-width:1024px){.bg{display:flex}.hr .mo{display:none}}
/* page head */
.ph{border-bottom:1px solid var(--ink);padding:clamp(38px,5vw,74px) 0 clamp(28px,3.4vw,46px)}
.ph>.w>.top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end}
.ph h1{font-size:clamp(38px,6.4vw,96px)}
.ph h1 i{font-style:normal;color:var(--tl)}
.ph .sub{color:var(--mu);font-size:clamp(16.5px,1.35vw,19px);max-width:46ch;padding-top:16px;border-top:1px solid var(--ln)}
.ph .eyebrow{color:var(--mu);display:block;margin-bottom:clamp(14px,1.8vw,24px)}
/* sections */
.sec{padding:clamp(48px,5.5vw,92px) 0}
.dk{background:var(--ink);color:var(--pp)}
.dk .shd{border-color:var(--lnD)}
.dk .shd p{color:var(--muD)}
.dk .shd h2 i{color:var(--tl2)}
.dk .btn2{color:var(--pp)}
.dk .btn2:hover{background:var(--pp);color:var(--ink)!important;border-color:var(--pp)}
.dk a:not(.btn):not(.btn2){color:var(--pp)}
.shd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,66px);align-items:end;padding-bottom:clamp(22px,2.6vw,36px);border-bottom:1px solid var(--ink);margin-bottom:clamp(22px,2.6vw,38px)}
.shd h2{font-size:clamp(28px,3.8vw,56px)}
.shd h2 i{font-style:normal;color:var(--tl)}
.shd p{color:var(--mu);max-width:52ch}
/* faq/details */
details{border-bottom:1px solid var(--ln)}
summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:18px;letter-spacing:-.035em;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--tl);font-family:'Karla',sans-serif;font-weight:600;font-size:17px;flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{color:var(--mu);padding:0 0 19px;max-width:72ch;font-size:16.5px}
/* cta */
.cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,70px);align-items:center}
.cta h2{font-size:clamp(30px,4.2vw,62px)}
.cta h2 i{font-style:normal;color:var(--tl2)}
.cta p{color:var(--muD);font-size:clamp(17px,1.4vw,20px);margin-top:16px;max-width:44ch}
.cta .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.cta .num{font-family:'Karla',sans-serif;font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.05em;border-top:1px solid var(--lnD);padding-top:18px}
.cta .num span{display:block;color:var(--muD);font-size:13px;font-family:'Karla',sans-serif;letter-spacing:0;margin-top:6px}
/* forms */
.dk label .mo{display:block;color:var(--muD);margin-bottom:5px}
input,select,textarea{width:100%;font-family:'Karla',sans-serif;font-size:16px;padding:12px 13px;border:1px solid var(--lnD);background:rgba(247,246,243,.05);color:var(--pp)}
input::placeholder,textarea::placeholder{color:rgba(247,246,243,.32)}
input:focus,select:focus,textarea:focus{border-color:var(--tl2);outline:none}
select option{color:var(--ink)}
form button{border:0;cursor:pointer;font-family:'Karla',sans-serif;padding:15px 20px;text-align:center;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fine{color:var(--muD);font-size:13px}
/* footer */
body>footer .lg img{height:66px}
body>footer{background:var(--ink);color:var(--pp);border-top:1px solid var(--lnD);padding:clamp(40px,4.6vw,66px) 0 24px}
.fg{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,52px);padding-bottom:38px;border-bottom:1px solid var(--lnD)}
.fg h4{font-family:'Karla',sans-serif;font-size:12.5px;letter-spacing:.01em;color:rgba(247,246,243,.42);font-weight:400;margin-bottom:14px}
.fg a,.fg p{color:var(--muD);font-size:14.5px;display:block;margin-bottom:8px}
/* Tagline sits between the logo and the descriptive line: brighter and heavier
   than the copy under it, so it reads as identity rather than explanation. */
.fg .ftag{color:var(--pp);font-size:16px;font-weight:700;letter-spacing:-.02em;margin:14px 0 10px}
/* ── checkmark ────────────────────────────────────────────────────────────
   Karla carries no U+2713, so the glyph was being substituted out of a
   fallback font and rendering as a chevron. The CSS-drawn version on plans
   used border-left + border-bottom at -45deg, which draws a mirrored check.
   Both are replaced by the real mark, carried as a mask so it takes its
   colour from whatever section it lands in. */
.ckm{display:block;flex:0 0 auto;width:14px;height:14px;background-color:var(--tl);
 -webkit-mask:url(uploads/check.svg) no-repeat center/contain;
 mask:url(uploads/check.svg) no-repeat center/contain}
.dk .ckm,.sec.dk .ckm,.sv.dk .ckm,.card.feat .ckm{background-color:var(--tl2)}
/* for screen readers where the mark alone carries the meaning */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fg a:hover{color:var(--tl2)}
.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-family:'Karla',sans-serif;font-weight:600;font-size:13px;letter-spacing:.01em;color:rgba(247,246,243,.42)}
/* ── site preview: full-page screenshot in a browser frame, scrolls on hover ── */
.sitepv{border:1px solid var(--ln);background:var(--pp2);display:block}
.sitepv .pv-bar{height:29px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--ln);background:var(--pp)}
.sitepv .pv-bar i{width:7px;height:7px;border-radius:50%;background:rgba(6,28,37,.18);display:block;flex:0 0 auto}
.sitepv .pv-url{margin-left:10px;font-family:'Karla',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.01em;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitepv .pv-view{position:relative;overflow:hidden;height:var(--pv-h,320px);background:var(--pp2)}
.sitepv .pv-view img{width:100%;height:auto;display:block;transform:translateY(0);transition:transform 7s cubic-bezier(.33,0,.35,1)}
.sitepv:hover .pv-view img,.sitepv:focus-within .pv-view img{transform:translateY(calc(-100% + var(--pv-h,320px)))}
.sitepv .pv-hint{position:absolute;right:9px;bottom:9px;font-family:'Karla',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.01em;color:var(--pp);background:rgba(6,28,37,.72);padding:5px 8px;opacity:0;transition:opacity .25s;pointer-events:none}
.sitepv:hover .pv-hint{opacity:0}
.sitepv .pv-view:not(:hover) .pv-hint{opacity:1}
/* live preview: loads the real site on demand, at desktop width, scaled to fit */
.sitepv .pv-cap{padding:12px 14px;border-top:1px solid var(--ln);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sitepv .pv-cap strong{font-size:16px;font-weight:600;letter-spacing:-.03em}
.sitepv .pv-cap span{color:var(--mu);font-size:13px;white-space:nowrap}
/* no screenshot yet — stays tidy instead of showing a broken image */
.sitepv.empty .pv-view{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.sitepv.empty .pv-view::after{content:attr(data-empty);font-family:'Karla',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.01em;color:var(--mu)}
.sitepv.empty .pv-hint{display:none}
/* on dark sections */
.dk .sitepv,.sec.dk .sitepv{border-color:var(--lnD);background:var(--ink2)}
.dk .sitepv .pv-bar,.sec.dk .sitepv .pv-bar{background:var(--ink2);border-bottom-color:var(--lnD)}
.dk .sitepv .pv-bar i,.sec.dk .sitepv .pv-bar i{background:rgba(247,246,243,.22)}
.dk .sitepv .pv-url,.sec.dk .sitepv .pv-url{color:var(--muD)}
.dk .sitepv .pv-view,.sec.dk .sitepv .pv-view{background:var(--ink2)}
.dk .sitepv .pv-cap,.sec.dk .sitepv .pv-cap{border-top-color:var(--lnD)}
.dk .sitepv .pv-cap span,.sec.dk .sitepv .pv-cap span{color:var(--muD)}
.dk .sitepv.empty .pv-view::after,.sec.dk .sitepv.empty .pv-view::after{color:var(--muD)}
@media(hover:none){.sitepv .pv-hint{display:none}}
@media(prefers-reduced-motion:reduce){.sitepv .pv-view img{transition:none}.sitepv:hover .pv-view img,.sitepv:focus-within .pv-view img{transform:none}}
/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .66s var(--ez),transform .66s var(--ez)}
.rv.in,.in>.rv{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:900px){.ph>.w>.top{grid-template-columns:1fr;align-items:start}.shd{grid-template-columns:1fr}.cta{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.two{grid-template-columns:1fr}}
/* article layout. cre8.js wraps .art in .artwrap and drops the contents in as its
   first child, so the contents can hold a sticky column of its own on wide screens
   and sit above the text on narrow ones. */
.artwrap{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){
  .artwrap{grid-template-columns:238px minmax(0,1fr);gap:clamp(34px,4.4vw,80px);align-items:start}
  .artwrap .toc{position:sticky;top:96px;border:0;border-left:1px solid var(--ln);
                padding:2px 0 2px 20px;margin:0;max-height:calc(100vh - 132px);overflow-y:auto}
  .artwrap .toc a{font-size:14px;padding:7px 0}
}
/* article table of contents. Built by cre8.js from the h2s, so a post only has
   to write its headings - there is no list to keep in sync by hand. */
.toc{border:1px solid var(--ink);padding:clamp(16px,1.8vw,24px);margin:0 0 clamp(28px,3.2vw,44px)}
.toc>span{display:block;color:var(--mu);margin-bottom:12px}
.toc ol{list-style:none;counter-reset:toc;margin:0}
.toc li{counter-increment:toc;border-top:1px solid var(--ln2)}
.toc li:first-child{border-top:0}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;padding:8px 0;color:var(--mu);font-size:15.5px;line-height:1.35;transition:color .15s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:'Karla',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.01em;color:var(--tl)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600}
.toc a[aria-current="true"]::before{color:var(--or)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* offset for the sticky header, so a jumped-to heading isn't hidden behind it */
.art h2[id]{scroll-margin-top:92px}

/* ── shared page components ──────────────────────────────────────────────
   Lifted out of the inline <style> blocks, where each appeared on two or more
   pages with identical rules. Anything whose selector meant different things on
   different pages stayed inline. */
label .mo{display:block;color:var(--muD);margin-bottom:5px}
.policy{max-width:900px;padding-bottom:clamp(30px,4vw,60px)}
.policy-embed{border:1px solid var(--ln);padding:clamp(20px,2.6vw,38px);background:#fff;min-height:280px}
.policy-embed iframe{width:100%;min-height:820px;border:0;display:block}
.policy-embed h1,.policy-embed h2,.policy-embed h3{letter-spacing:-.03em;margin:1.3em 0 .5em}
.policy-embed h1:first-child,.policy-embed h2:first-child{margin-top:0}
.policy-embed p,.policy-embed li{color:var(--mu);font-size:16px;margin-bottom:.9em}
.policy-embed ul,.policy-embed ol{padding-left:1.3em}
.policy-embed a{color:var(--tl);text-decoration:underline;text-underline-offset:2px}
.slot{border:1px dashed var(--tl);background:rgba(15,127,131,.05);padding:clamp(18px,2.2vw,28px);text-align:center}
.slot b{display:block;font-family:'Karla',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.01em;color:var(--tl);margin-bottom:8px}
.slot span{color:var(--mu);font-size:15px;display:block;max-width:52ch;margin:0 auto}
.legalnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln2);margin-top:clamp(26px,3vw,42px)}
.legalnav a{padding:13px 10px 13px 0;font-size:14.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s}
.legalnav a:hover{color:var(--or)}
.legalnav a[aria-current]{color:var(--ink);font-weight:600}
@media(max-width:420px){.legalnav{grid-template-columns:1fr}}
.lg img{height:54px;width:auto;display:block}
.nv{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);justify-self:start}
.nv a{font-size:14px;font-weight:500;color:var(--mu)}
.nv a:hover{color:var(--ink)}
.hr .mo{color:var(--mu)}
/* The duplicate .bg and .bg span that sat here are gone. They came from the
   shared-CSS extraction and landed after the mobile media query, so they were
   layering a second padding and margin onto the trigger and beating
   @media .bg{display:flex} on source order. The definition above is the only one. */
.hero{border-bottom:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hl{padding:clamp(34px,4vw,64px) clamp(16px,2.6vw,44px) clamp(26px,3vw,40px) max(clamp(16px,2.6vw,44px),calc(50vw - 750px + clamp(16px,2.6vw,44px)));display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--ink)}
h1 i{font-style:normal;color:var(--tl)}
.mrow:last-child{border-bottom:0}
.mrow strong{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.sec.dk{background:var(--ink);color:var(--pp);border-bottom:0}
.sec h2{font-size:clamp(27px,3.5vw,54px);max-width:22ch}
.sec h2 i{font-style:normal;color:var(--tl)}
.sec.dk h2 i{color:var(--tl2)}
.shd p{color:var(--mu);font-size:16.5px;max-width:46ch}
.sec.dk .shd p{color:var(--muD)}
details{border-bottom:1px solid var(--ln2)}
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(26px,4.5vw,74px);align-items:start}
.cta h2{font-size:clamp(32px,4.4vw,68px);max-width:16ch;margin-bottom:18px}
.cta .ld{color:var(--muD);font-size:18px;max-width:42ch;margin-bottom:24px}
.chk{border-top:1px solid var(--lnD)}
.chk div{padding:12px 0;border-bottom:1px solid var(--lnD);color:var(--muD);font-size:15.5px;display:grid;grid-template-columns:22px 1fr;gap:8px}
.chk div::before{content:"→";color:var(--tl2)}
form .fh strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.035em}
input,select{width:100%;font-family:'Karla',sans-serif;font-size:16px;padding:12px 13px;border:1px solid var(--lnD);background:rgba(247,246,243,.05);color:var(--pp)}
input::placeholder{color:rgba(247,246,243,.32)}
input:focus,select:focus{border-color:var(--tl2);outline:none}
form button{border:0;cursor:pointer;font-family:'Karla',sans-serif;padding:15px 20px;text-align:center}
.fwm{font-size:clamp(46px,9vw,140px);font-weight:700;letter-spacing:-.06em;line-height:.8;color:rgba(247,246,243,.07);padding-top:26px;user-select:none}
.mrow.hit{background:rgba(15,127,131,.09);box-shadow:inset 3px 0 0 var(--tl)}
.mrow.hit .pos,.mrow.hit .tag{color:var(--tl)}
/* start, not end. The headline column is much taller than the card beside it,
   so bottom-aligning left the card floating at the foot of the hero with a
   screen of empty space above it. */
.hero2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:start}
/* A proof card holding a plain image rather than a site preview. Direct child
   only: the preview images nest deeper and size themselves for the hover scroll. */
.proof .shot>img{display:block;width:100%;height:auto}
/* ── lead form states ── */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{padding:clamp(20px,2.4vw,30px);border:1px solid var(--lnD);background:var(--ink2)}
.fmsg-h{font-size:24px;font-weight:700;letter-spacing:-.04em;color:var(--pp);margin-bottom:8px}
.fmsg-p{color:var(--muD);font-size:15px}
.fmsg-p a,.fmsg-err a{color:var(--tl2);text-decoration:underline}
.fmsg-err{color:#FFB4A2;font-size:14.5px;margin-top:4px}
/* ── parallax hero band ───────────────────────────────────────────────────
   A .ph carrying .pxh gets a photograph behind it. The image sits in its own
   absolutely positioned layer rather than as a background, because
   background-attachment:fixed is the usual way to do this and it is broken on
   iOS and janky on Android.

   The layer is taller than the section and gets translated on scroll, so the
   photograph drifts against the type. transform only, so it composites on the
   GPU and never triggers layout.

   Type over photograph needs the contrast guaranteed rather than hoped for, so
   the ink scrim is heavy and the section is treated as a dark band throughout. */
.pxh{position:relative;overflow:hidden;background:var(--ink);color:var(--pp);border-bottom:0;isolation:isolate}
.pxh>.pxb{position:absolute;inset:-18% 0;z-index:-2;will-change:transform}
.pxh>.pxb img{width:100%;height:100%;object-fit:cover;display:block}
/* scrim: heavier at the foot, where the subheading and the buttons sit */
/* The photographs are pre-darkened at export, so the scrim only has to even
   them out rather than carry the whole contrast burden. Measured against the
   brightest pixel in each image, not against an average. */
.pxh::before{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(6,28,37,.55) 0%,rgba(6,28,37,.66) 45%,rgba(6,28,37,.80) 100%)}
.pxh a:not(.btn):not(.btn2){color:var(--pp)}
.pxh .eyebrow,.pxh .sub{color:var(--muD)}
.pxh .sub{border-top-color:var(--lnD)}
.pxh h1 i{color:var(--tl2)}
.pxh .lfacts,.dk .lfacts{border-top-color:var(--lnD)}
.pxh .lfacts b,.dk .lfacts b{color:var(--tl2)}
.pxh .lfacts span,.dk .lfacts span{color:var(--muD)}
.pxh .btn2{color:var(--pp);border-color:var(--pp)}
.pxh .btn2:hover{background:var(--pp);color:var(--ink)!important}
.pxh .mp{border-color:var(--lnD);background:rgba(6,28,37,.55);backdrop-filter:blur(2px)}
.pxh .reach{border-color:var(--lnD)}
.pxh .reach a,.pxh .reach div{border-right-color:var(--lnD);border-bottom-color:var(--lnD)}
.pxh .reach .k,.pxh .reach span.s{color:var(--muD)}
.pxh .reach a:hover{background:rgba(247,246,243,.08);color:var(--pp)}
.pxh .mpl,.pxh .srch q,.pxh .mrow strong{color:var(--pp)}
.pxh .mpl .mo,.pxh .mrow em,.pxh .mrow .pos,.pxh .mrow .tag{color:var(--muD)}
.pxh .mpl,.pxh .srch,.pxh .mrow{border-color:var(--lnD)}
.pxh .srch .ic{border-color:var(--muD)}
.pxh .srch .ic::after{background:var(--muD)}
.pxh .mrow.hit{background:rgba(51,194,197,.12);box-shadow:inset 3px 0 0 var(--tl2)}
.pxh .mrow.hit .pos,.pxh .mrow.hit .tag{color:var(--tl2)}
@media(prefers-reduced-motion:reduce){.pxh>.pxb{transform:none!important}}
/* ── clickable site previews ──────────────────────────────────────────────
   The preview links through to the live site it is showing. It has to read as
   clickable before the click, or nobody discovers it: the chrome lifts, the
   domain turns teal, and the hint changes from describing the scroll to naming
   the destination. */
a.pvlink{display:block;color:inherit;transition:box-shadow .18s,transform .18s var(--ez)}
a.pvlink:hover,a.pvlink:focus-visible{box-shadow:0 10px 26px -14px rgba(6,28,37,.45)}
a.pvlink:hover .pv-bar{background:var(--pp2)}
a.pvlink:hover .pv-url{color:var(--tl)}
a.pvlink .pv-hint::after{content:" · click to visit";opacity:.75}
a.pvlink:hover .pv-hint::after{content:" · opens the live site"}
/* a cited rating that cannot be checked is just a claim, so the number itself
   links to the profile showing it */
a.gbp{display:block;color:inherit;text-decoration:none}
a.gbp:hover b{color:var(--tl)}
a.gbp:hover span{text-decoration:underline}
.dk a.gbp:hover b,.pxh a.gbp:hover b{color:var(--tl2)}
/* keyboard users otherwise tab the whole nav on every page before reaching
   anything. Off screen until focused, then it lands in the corner. */
/* fixed, not absolute, so it is pinned to the viewport rather than the top of
   the document and cannot be revealed somewhere off screen */
.skip{position:fixed;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--pp);
 padding:12px 18px;font-weight:600;font-size:15px}
.skip:focus{left:8px;top:8px;color:var(--pp)}
/* ── agency testimonial slider ────────────────────────────────────────────
   Crossfade rather than a horizontal track, so the block never changes height
   mid-transition and nothing below it jumps. All slides stay in the DOM and
   are hidden from assistive tech, except the visible one. */
.ag-slider{border-top:1px solid var(--ink);padding-top:clamp(22px,2.6vw,34px)}
.ag-track{position:relative;display:grid;overflow:hidden;transition:height .4s var(--ez)}@media(prefers-reduced-motion:reduce){.ag-track{transition:none}}
.ag-slide{grid-area:1/1;align-self:start;opacity:0;visibility:hidden;transform:translateY(6px);
 transition:opacity .42s var(--ez),transform .42s var(--ez),visibility .42s}
.ag-slide.on{opacity:1;visibility:visible;transform:none}
.ag-slide p{font-size:clamp(20px,2.4vw,31px);font-weight:600;letter-spacing:-.035em;
 line-height:1.24;max-width:50ch}
.ag-nav{display:flex;justify-content:space-between;align-items:center;gap:18px;
 flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px);padding-top:16px;border-top:1px solid var(--ln2)}
.ag-dots{display:flex;gap:8px}
.ag-dot{width:26px;height:4px;border:0;padding:0;cursor:pointer;background:var(--ln);
 transition:background .2s}
.ag-dot.on{background:var(--tl)}
.ag-dot:hover{background:var(--mu)}
.ag-by{color:var(--mu);font-size:14.5px}
.ag-by b{color:var(--ink);font-weight:600}
/* the revisions block, deliberately heavier than the rest of the page */
.ag-rev{border:1px solid var(--ink);padding:clamp(24px,3vw,44px);max-width:78ch}
.ag-rev h3{font-size:clamp(21px,2.2vw,30px);margin-bottom:16px}
.ag-rev p{color:var(--mu);font-size:16.5px;margin-bottom:14px}
.ag-rev p:last-child{margin-bottom:0}
.ag-rev b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.ag-slide{transition:none}}


/* ── Process timeline ──────────────────────────────────────────────────────
   One continuous rail whose bright half is driven by scroll position, so the
   steps read as a process being walked rather than a numbered list. Every
   lit-state style is the DEFAULT here: .tl-js is added by script, and only
   then does anything dim. No script, script error, or blocked JS all end at
   the same place - a fully lit timeline - instead of an invisible section. */
.tl{--nd:56px;--tlg:clamp(28px,3.4vw,46px);
 list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;position:relative;counter-reset:none}
.tl-rail{position:absolute;left:calc(var(--nd)/2 - 1px);top:calc(var(--nd)/2);
 height:var(--tl-h,calc(100% - var(--nd)));width:2px;background:var(--lnD);border-radius:2px}
.tl-rail i{position:absolute;inset:0;display:block;border-radius:2px;
 background:linear-gradient(180deg,var(--tl) 0%,var(--tl2) 100%);
 transform:scaleY(1);transform-origin:top}
.tl-js .tl-rail i{transform:scaleY(var(--p,0));transition:transform .2s linear}

.tl-s{position:relative;display:grid;grid-template-columns:var(--nd) 1fr;
 gap:0 clamp(18px,2.2vw,30px);padding-bottom:var(--tlg)}
.tl-s:last-child{padding-bottom:0}

.tl-node{width:var(--nd);height:var(--nd);border-radius:50%;display:grid;place-items:center;
 position:relative;z-index:1;font-weight:700;font-size:15px;letter-spacing:.02em;
 font-variant-numeric:tabular-nums;
 background:var(--tl);border:2px solid var(--tl2);color:var(--pp);
 box-shadow:0 0 0 6px rgba(51,194,197,.11);
 transition:background .45s var(--ez),border-color .45s var(--ez),
  color .45s var(--ez),box-shadow .45s var(--ez),transform .45s var(--ez)}
.tl-js .tl-s:not(.lit) .tl-node{background:var(--ink);border-color:var(--lnD);
 color:var(--muD);box-shadow:none;transform:scale(.86)}

.tl-c{padding-top:clamp(9px,1vw,13px);min-width:0}
.tl-c h3{margin:0 0 9px;font-size:clamp(19px,1.6vw,23px);line-height:1.28;color:var(--pp)}
.tl-c p{margin:0;color:var(--muD);font-size:16.5px;line-height:1.62;max-width:64ch}

/* The optional step hangs off the rail on a dashed spur, because it is an
   offer rather than a stage - it should not look like work you have to do. */
.tl-s.tl-opt{margin-top:calc(var(--tlg) * .35)}
.tl-opt .tl-node{border-style:dashed;box-shadow:none;background:var(--ink2);
 border-color:var(--tl2);color:var(--tl2)}
.tl-js .tl-s.tl-opt:not(.lit) .tl-node{background:var(--ink);border-color:var(--lnD);color:var(--muD)}
.tl-opt::before{content:"";position:absolute;left:calc(var(--nd)/2 - 1px);width:2px;
 top:calc(-1 * (var(--tlg) + var(--tlg) * .35));height:calc(var(--tlg) + var(--tlg) * .35 + var(--nd)/2);
 background:repeating-linear-gradient(180deg,var(--lnD) 0 5px,transparent 5px 11px)}
.tl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:var(--tl2);border:1px solid var(--lnD);
 border-radius:999px;padding:4px 11px;margin-bottom:11px}

@media(max-width:640px){
.tl{--nd:44px}
.tl-node{font-size:13.5px}
.tl-c{padding-top:7px}
.tl-c p{font-size:16px}
}

/* Reduced motion keeps the whole rail lit and still. The information is the
   order of the steps, and that survives without any of the movement. */
@media(prefers-reduced-motion:reduce){
.tl-js .tl-rail i{transform:scaleY(1)!important;transition:none}
.tl-js .tl-s:not(.lit) .tl-node{background:var(--tl);border-color:var(--tl2);
 color:var(--pp);transform:none;box-shadow:0 0 0 6px rgba(51,194,197,.11)}
.tl-js .tl-s.tl-opt:not(.lit) .tl-node{background:var(--ink2);border-color:var(--tl2);color:var(--tl2)}
.tl-node{transition:none}
}


/* Fact strip. Moved out of cre8-city.css so any page can use it - it was
   living in a sheet only the city pages load, which meant it silently had no
   layout anywhere else. */
.lfacts{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(16px,2.6vw,44px);justify-content:start;border-top:1px solid var(--ln);padding-top:16px;margin-top:clamp(20px,2.6vw,32px)}
.lfacts b{display:block;font-family:'Karla',sans-serif;font-size:clamp(17px,1.8vw,24px);font-weight:500;letter-spacing:-.04em;color:var(--tl)}
.lfacts span{display:block;color:var(--mu);font-size:13px;margin-top:3px}
@media(max-width:900px){.lfacts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.lfacts{grid-template-columns:1fr}}

/* A lit head rides the top of the fill, so the eye has something to follow
   rather than just a bar that gets longer. Positioned off the same --p the
   fill uses, so it can never drift away from the fill edge. */
.tl-rail b{position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;
 background:var(--tl2);box-shadow:0 0 0 4px rgba(51,194,197,.18),0 0 14px 2px rgba(51,194,197,.55);
 transform:translate(-50%,-50%);opacity:0}
.tl-js .tl-rail b{opacity:1;top:calc(var(--p,0) * 100%);transition:top .2s linear,opacity .3s var(--ez)}

/* Steps you have not reached yet sit back a little. Never below .55, so a
   step that somehow never lights is still perfectly readable. */
.tl-js .tl-s .tl-c{transition:opacity .45s var(--ez),transform .45s var(--ez)}
.tl-js .tl-s:not(.lit) .tl-c{opacity:.55;transform:translateX(6px)}

@media(prefers-reduced-motion:reduce){
.tl-js .tl-rail b{display:none}
.tl-js .tl-s:not(.lit) .tl-c{opacity:1;transform:none;transition:none}
}

/* Two dark sections in a row read as one long slab with no edge. A hairline
   is enough to separate them without breaking the dark run. */
.dk + .dk{border-top:1px solid var(--lnD)}

/* ── Timeline stage ───────────────────────────────────────────────────────
   The steps sat in a single narrow column with half the section empty beside
   them. This fills it with the process itself rather than a stock photo: a
   panel that sticks alongside the timeline and shows what is happening at
   whichever step you have scrolled to. Drawn entirely in CSS, so it needs no
   photography and weighs nothing. */
.tl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
 gap:clamp(28px,4vw,68px);align-items:start}
/* align-self:stretch is what makes the sticky work at all. The wrap aligns
   its children to the start, which collapsed this column to the height of the
   panel itself - and a sticky element can only travel inside its own parent,
   so with nothing to travel through it scrolled away immediately. Stretching
   this to the full row gives it the whole timeline to move down. */
.tl-stage{position:relative;align-self:stretch}
.tl-sticky{position:sticky;top:clamp(86px,9vw,104px)}

.frame{border:1px solid var(--lnD);background:var(--ink2);overflow:hidden;
 box-shadow:0 24px 60px -30px rgba(0,0,0,.85)}
.fbar{display:flex;align-items:center;gap:6px;padding:9px 13px;
 background:rgba(247,246,243,.05);border-bottom:1px solid var(--lnD)}
.fbar>i{width:8px;height:8px;border-radius:50%;background:var(--lnD);flex:0 0 auto}
.flabel{margin-left:9px;font-size:12px;color:var(--muD);letter-spacing:.01em;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbody{position:relative;display:grid;padding:clamp(16px,1.8vw,24px);min-height:290px}

/* Every scene shares one grid cell so the frame never changes height as they
   swap - a panel that jumps while you scroll past it reads as broken. */
.scene{grid-area:1/1;position:relative;opacity:0;visibility:hidden;
 transform:translateY(8px);transition:opacity .45s var(--ez),transform .45s var(--ez),visibility .45s}
.scene.on{opacity:1;visibility:visible;transform:none}

.wf{display:grid;gap:9px;align-content:start}
.blk{background:rgba(247,246,243,.1);border-radius:2px}
.blk.h{height:16px}
.blk.hero{height:74px}
.blk.c{height:46px}
.blk.t{height:9px}
.blk.t.sh{width:58%}
.wf .row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}

.cursor{position:absolute;right:14%;top:38%;font-size:11px;font-weight:700;
 color:var(--ink);background:var(--tl2);padding:3px 8px;border-radius:3px 12px 12px 12px}
.pin{position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 2px;
 background:var(--or);color:#fff;font-size:11.5px;font-weight:700;
 display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.pin.p1{left:8%;top:16%}.pin.p2{right:26%;top:44%}.pin.p3{left:18%;bottom:14%}

.chrome{display:flex;align-items:center;gap:6px;margin-bottom:13px}
.chrome>i{width:7px;height:7px;border-radius:50%;background:var(--lnD)}
.chrome>span{margin-left:8px;flex:1;font-size:11.5px;color:var(--muD);
 background:rgba(247,246,243,.07);border-radius:999px;padding:4px 11px}

.hand{display:grid;justify-items:center;align-content:center;gap:9px;min-height:250px;text-align:center}
.hand .ckm{width:34px;height:34px;background-color:var(--tl2)}
.hand b{font-size:19px;color:var(--pp)}
.hand em{font-style:normal;font-size:14px;color:var(--muD)}

.mail{display:grid;gap:11px;align-content:start}
.mrow{display:flex;gap:10px;font-size:13.5px;padding-bottom:9px;border-bottom:1px solid var(--lnD)}
.mrow span{color:var(--muD);width:42px;flex:0 0 auto}
.mrow b{color:var(--tl2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbody{display:grid;gap:8px;margin-top:5px}
.mbody i{height:9px;background:rgba(247,246,243,.1);border-radius:2px;display:block}
.mbody i.sh{width:52%}
.msig{margin-top:9px;font-size:13px;color:var(--pp);border-left:2px solid var(--tl);padding-left:10px}

.tl-cap{margin:14px 2px 0;font-size:14px;color:var(--muD);line-height:1.5}

/* Below the split the timeline goes full width. The panel is narration, and
   narration is the first thing that should go when space is short. */
@media(max-width:980px){
.tl-wrap{grid-template-columns:1fr}
.tl-stage{display:none}
}
@media(prefers-reduced-motion:reduce){
.scene{transition:none}
}

/* ── Artboard finishes ─────────────────────────────────────────────────────
   Same elements in both states. Wireframe is flat grey with the detail hidden;
   the design turns the paint on. Keeping one structure is what makes the swap
   read as a board being designed rather than two unrelated pictures. */
.blk{position:relative;overflow:hidden}
.blk.h{height:22px;display:flex;align-items:center;gap:5px;padding:0 8px}
.blk.hero{height:88px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 12px}
.blk.c{height:58px;display:flex;flex-direction:column;gap:5px;padding:8px}
.blk .dot{width:9px;height:9px;border-radius:50%;background:rgba(247,246,243,.25);flex:0 0 auto}
.blk .nvd{width:15px;height:4px;border-radius:2px;background:rgba(247,246,243,.16)}
.blk .nvd:first-of-type{margin-left:auto}
.blk .ln{height:7px;border-radius:2px;background:rgba(247,246,243,.2);display:block;width:78%}
.blk .ln.sh{width:46%}
.blk .cta{width:52px;height:14px;border-radius:3px;background:rgba(247,246,243,.22);display:block;margin-top:3px}
.blk .strip{height:5px;border-radius:2px;background:rgba(247,246,243,.2);width:34%;display:block}
.blk.c .ln{width:88%;height:5px}
.blk.c .ln.sh{width:56%}

/* Designed: brand colour, real hierarchy, a button that looks like a button. */
.wf.dsn .blk{background:rgba(247,246,243,.07)}
.wf.dsn .blk.h{background:var(--tl)}
.wf.dsn .blk.h .dot{background:var(--pp)}
.wf.dsn .blk.h .nvd{background:rgba(247,246,243,.6)}
.wf.dsn .blk.hero{background:linear-gradient(135deg,rgba(15,127,131,.6),rgba(6,28,37,.25))}
.wf.dsn .blk.hero .ln{background:var(--pp);height:9px}
.wf.dsn .blk.hero .ln.sh{background:rgba(247,246,243,.6);height:7px}
.wf.dsn .blk.hero .cta{background:var(--or)}
.wf.dsn .blk.c .strip{background:var(--tl2)}
.wf.dsn .blk.t{background:rgba(247,246,243,.13)}

/* The transition is on the paint, so a crossfade between the two boards looks
   like colour arriving rather than one picture replacing another. */
.blk,.blk .dot,.blk .nvd,.blk .ln,.blk .cta,.blk .strip{
 transition:background .5s var(--ez),background-color .5s var(--ez),height .5s var(--ez)}
@media(prefers-reduced-motion:reduce){
.blk,.blk .dot,.blk .nvd,.blk .ln,.blk .cta,.blk .strip{transition:none}
}

/* ── Revisions ────────────────────────────────────────────────────────────
   Was one narrow column with the rest of the row empty. The rules are
   countable, so they belong in a card that can be scanned; the reasoning
   needs sentences, so it stays prose. Splitting them fills the width without
   padding either side out, and stops the same thing being said twice.

   Deliberately not an accordion: this is the section a partner most needs to
   have read before they start, and anything behind a click is the thing
   nobody opens. */
.revx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
 gap:clamp(24px,3.4vw,56px);align-items:start}
.revx .ag-rev{max-width:none;height:100%}

/* Dark card on the light section, so the firm part is the part that stands
   out rather than the part in the smaller box. */
.revc{background:var(--ink);color:var(--pp);padding:clamp(24px,2.8vw,38px)}
.revc .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;
 text-transform:uppercase;color:var(--tl2);margin-bottom:clamp(16px,2vw,22px)}

.rnds{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,22px)}
.rnds li{display:flex;gap:14px;align-items:flex-start}
.chips{display:flex;gap:6px;flex:0 0 auto}
.chips span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
 font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
 background:var(--tl);border:1px solid var(--tl2);color:var(--pp)}
.rnds b{display:block;font-size:16.5px;color:var(--pp);margin-bottom:4px}
.rnds em{font-style:normal;display:block;font-size:14.5px;color:var(--muD);line-height:1.55}

.rmeter{margin-top:clamp(20px,2.4vw,26px);padding-top:clamp(18px,2.2vw,24px);
 border-top:1px solid var(--lnD);display:grid;gap:5px}
.rmeter b{font-size:11.5px;font-weight:700;letter-spacing:.11em;
 text-transform:uppercase;color:var(--or2)}
.rmeter strong{font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.03em;
 color:var(--pp);font-weight:700}
.rmeter strong span{font-size:16px;font-weight:500;letter-spacing:0;color:var(--muD)}
.rmeter em{font-style:normal;font-size:14.5px;color:var(--muD);line-height:1.55;margin-top:3px}

@media(max-width:900px){
.revx{grid-template-columns:1fr}
.revx .ag-rev{height:auto}
}

/* ── 404 ───────────────────────────────────────────────
   The page not being found is the demonstration: a business nobody can find
   in search has the same problem, and one of the two is fixable in a click.

   Built on the same .ph/.top hero every other page uses rather than a set
   piece of its own - the joke carries the page, the layout should not have
   to. The numeral sits in the right column, which is empty on most heroes
   and was empty here. */
.bignum{font-size:clamp(52px,6.6vw,104px);line-height:.86;font-weight:700;
 letter-spacing:-.055em;color:var(--ink);margin:0 0 clamp(12px,1.6vw,18px);
 font-variant-numeric:tabular-nums}
.bignum span{color:var(--tl)}

/* ── search ─────────────────────────────────────────── */
.findr{max-width:620px;margin:clamp(26px,3.4vw,44px) 0 0}
.fbox{display:flex;align-items:center;gap:13px;border:1px solid var(--ink);
 background:var(--pp);padding:0 6px 0 17px;transition:box-shadow .18s var(--ez)}
.fbox:focus-within{box-shadow:0 0 0 2px var(--tl)}
/* magnifier drawn rather than loaded - one more request for 15 pixels is not
   worth it on the page people reach by accident. */
.fic{width:15px;height:15px;flex:0 0 auto;border:2px solid var(--tl);
 border-radius:50%;position:relative}
.fic::after{content:"";position:absolute;right:-5px;bottom:-3px;width:8px;height:2px;
 background:var(--tl);transform:rotate(45deg);border-radius:2px}
.findr input{background:none;border:0;color:var(--ink);font-family:inherit;
 font-size:16px;padding:14px 12px 14px 0;width:100%}
.findr input::placeholder{color:var(--mu)}
.findr input:focus{outline:none}

.fnil{margin:14px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:var(--or);min-height:1.2em}
.fres{list-style:none;margin:14px 0 0;padding:0;border:1px solid var(--ln);
 display:grid;gap:1px;background:var(--ln)}
.fres:empty{display:none;border:0}
.fres a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
 padding:12px 16px;background:var(--pp);color:var(--ink);text-decoration:none;
 font-size:15.5px;transition:background .18s var(--ez),color .18s var(--ez)}
.fres a:hover,.fres a:focus-visible{background:var(--pp2);color:var(--tl)}
.fres a span{color:var(--mu);font-size:12.5px;flex:0 0 auto}

.fcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,32px)}
@media(max-width:520px){.fcta .btn,.fcta .btn2{flex:1 1 100%}}
/* ── ticker ─────────────────────────────────────────────────────────────────
   index.html carries its own inline copy of this from before the shared sheet
   existed; that one still wins there. This is the definition every other page
   uses. Own keyframe name so the two can never be confused for each other. */
.tick{background:var(--pp2);border-bottom:1px solid var(--ink);overflow:hidden;
 padding:11px 0;display:flex;white-space:nowrap}
.tick ul{list-style:none;display:flex;flex:0 0 auto;margin:0;padding:0;animation:tkmv var(--tk-t,40s) linear infinite}
.tick li{font-family:'Karla',sans-serif;font-weight:600;font-size:14px;
 letter-spacing:.01em;color:var(--mu);padding:0 22px;border-right:1px solid var(--ln)}
@keyframes tkmv{to{transform:translateX(calc(-1 * var(--tk-w,100%)))}}


@media(max-width:520px){
.fcta .btn,.fcta .btn2{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
.tick ul{animation:none}
}

/* ── Link grid ──────────────────────────────────────────
   Moved out of cre8-city.css. The 404 is the only page that uses this now,
   and it does not load that sheet - so the links were rendering as plain
   inline anchors with nothing between them. */
.cities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lnD)}
.cities a{padding:15px 6px;border-bottom:1px solid var(--lnD);border-right:1px solid var(--lnD);color:var(--muD);font-size:15px;display:block;transition:background .18s,color .18s}
.cities a:hover{background:rgba(247,246,243,.05);color:var(--pp)}
.cities a:nth-child(4n){border-right:0}
.sec:not(.dk) .cities{border-top-color:var(--ln)}
.sec:not(.dk) .cities a{border-color:var(--ln);color:var(--mu)}
.sec:not(.dk) .cities a:hover{background:var(--pp2);color:var(--ink)}
@media(max-width:900px){.cities{grid-template-columns:1fr 1fr}.cities a:nth-child(2n){border-right:0}}
@media(max-width:520px){.cities{grid-template-columns:1fr}.cities a{border-right:0}}

/* ── Mobile action bar ──────────────────────────────────────────────────────
   The header CTA and the phone number are both hidden under 1025px, and the
   drawer copy only exists once you open the menu. So on a phone, past the
   hero, there was nothing on screen asking for the business. This puts the
   two things a local customer actually does - text, or ask for the audit -
   within thumb reach the whole way down.

   Desktop already has them pinned in the sticky header, so it stays off. */
.mcta{display:none}
@media(max-width:1024px){
.mcta{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;
 left:0;right:0;bottom:0;z-index:70;background:var(--ink);
 padding-bottom:env(safe-area-inset-bottom);
 box-shadow:0 -10px 30px -18px rgba(6,28,37,.7);
 transform:translateY(110%);transition:transform .28s var(--ez)}
.mcta.on{transform:none}
.mcta a{display:flex;align-items:center;justify-content:center;gap:8px;
 padding:15px 10px;font-family:'Karla',sans-serif;font-weight:700;
 font-size:15px;letter-spacing:.01em;text-decoration:none}
.mcta a.t{background:var(--ink);color:var(--pp)}
.mcta a.a{background:var(--or);color:#fff}
/* the drawer sits above it, and the bar must not cover the footer links */
body.navlock .mcta{transform:translateY(110%)}
body > footer{padding-bottom:calc(clamp(40px,5vw,64px) + 62px)}
}
@media(prefers-reduced-motion:reduce){.mcta{transition:none}}

/* ── Jargon strip ───────────────────────────────────────────────────────────
   Map Pack appeared 79 times across the site without ever being explained.
   The whole pitch rests on a term the buyer does not know, and nobody asks
   to be put somewhere they cannot picture. Quiet on purpose: it teaches on
   the way past rather than interrupting. */
.jrg{border-bottom:1px solid var(--ln);background:var(--pp2)}
.jrg p{max-width:1500px;margin:0 auto;padding:clamp(13px,1.6vw,17px) clamp(16px,2.6vw,44px);
 font-size:15px;line-height:1.55;color:var(--mu)}
.jrg b{color:var(--ink);font-weight:600}
/* on a dark hero the strip would slam into the artwork above it */
.pxh + .jrg,.dk + .jrg{border-top:1px solid var(--ln)}

/* ── Statement section ──────────────────────────────────────────────────────
   Seven of the home page's ten sections opened with the same two-column
   header. Fine one at a time, monotonous in sequence - and it meant the one
   sentence the whole model rests on arrived looking like another row of
   information. This is the break: full width, dark ground, nothing beside it
   to share attention with. */
.stmt{border-bottom:0}
.stmt-h{margin:0 0 clamp(30px,4vw,54px)}
.stmt-h h2{font-size:clamp(34px,5.4vw,76px);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:21ch}
.stmt-h h2 i{font-style:normal;color:var(--tl2)}
.stmt-h p{color:var(--muD);font-size:clamp(16.5px,1.5vw,19px);max-width:46ch;margin:clamp(14px,1.8vw,22px) 0 0}
.stmt .mth{border-top:1px solid var(--lnD);padding-top:clamp(26px,3vw,40px)}
@media(max-width:900px){.stmt-h h2{max-width:none}}

/* ── Problem list ───────────────────────────────────────────────────────────
   Sat directly above the services grid using the same header and the same
   card grid, so the two read as one long repeat. Rules instead of boxes, and
   the reason paired with its explanation across the row. */
.lede-h{margin:0 0 clamp(26px,3.4vw,44px)}
.lede-h h2{font-size:clamp(30px,4.2vw,58px);line-height:1.04;letter-spacing:-.03em;margin:0;max-width:24ch}
.lede-h h2 i{font-style:normal;color:var(--tl)}
.lede-h p{color:var(--mu);font-size:clamp(16.5px,1.4vw,18.5px);max-width:52ch;margin:clamp(12px,1.6vw,18px) 0 0}
.reasons{display:grid;gap:0;border-top:1px solid var(--ln)}
.reasons .it{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
 gap:clamp(16px,3vw,52px);padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--ln)}
.reasons .it h3{font-size:clamp(18px,1.7vw,23px);line-height:1.25;letter-spacing:-.02em;
 margin:0;display:flex;gap:14px}
.reasons .it h3 b{font-family:'Karla',sans-serif;font-size:13px;font-weight:600;
 color:var(--tl);letter-spacing:.02em;flex:0 0 auto;padding-top:5px}
.reasons .it p{margin:0;color:var(--mu);font-size:16.5px;line-height:1.6}
@media(max-width:820px){
.lede-h h2{max-width:none}
.reasons .it{grid-template-columns:1fr;gap:10px}
}

/* ── The recommended plan ───────────────────────────────────────────────────
   Three tabs of equal weight leave the reader to work out which one is meant
   for them. This marks the one most clients need without shouting it. */
.seg button.pick{position:relative}
.seg button.pick::after{content:'THE CRE8 STANDARD';position:absolute;top:6px;left:0;right:0;
 text-align:center;font-family:'Karla',sans-serif;font-size:9.5px;font-weight:700;
 letter-spacing:.14em;color:var(--tl)}
.seg button.pick{padding-top:26px}
.seg button.pick[aria-selected="true"]::after{color:var(--tl2)}

/* ── one named build (for-agencies) ────────────────────── */
.csx{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3.6vw,58px);align-items:center}
.csw{display:block;border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;box-shadow:0 24px 60px -32px rgba(6,28,37,.45);transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.csw:hover{transform:translateY(-5px);box-shadow:0 36px 78px -32px rgba(6,28,37,.5)}
.csw-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--pp2);border-bottom:1px solid var(--ln2)}
.csw-bar i{width:8px;height:8px;border-radius:50%;background:var(--ln);flex:none}
.csw-bar>span{margin-left:8px;min-width:0;font-size:11px;color:var(--mu);background:#fff;border:1px solid var(--ln2);border-radius:20px;padding:3px 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csw-shot{display:block;position:relative;aspect-ratio:1200/713;overflow:hidden;background:var(--pp2)}
.csw-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.csw-ft{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;font-size:11.5px;color:var(--mu);border-top:1px solid var(--ln2)}
.csx-b h3{font-size:clamp(25px,2.7vw,36px);line-height:1.08;letter-spacing:-.025em;margin:11px 0 7px}
.csx-b .wh{color:var(--mu);font-size:14px;margin:0 0 clamp(15px,1.7vw,21px)}
.csx-b p{margin:0 0 clamp(12px,1.4vw,17px)}
.csx-cr{list-style:none;padding:0;margin:clamp(19px,2.3vw,27px) 0 clamp(22px,2.6vw,30px);border-top:1px solid var(--ln2)}
.csx-cr li{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--ln2)}
.csx-cr b{font-size:13.5px;letter-spacing:-.01em}
.csx-cr span{font-size:13.5px;color:var(--mu);line-height:1.5}
@media(max-width:900px){.csx{grid-template-columns:1fr}}
@media(max-width:520px){.csx-cr li{grid-template-columns:1fr;gap:4px}}

/* ── tech stack, for-agencies ───────────────────────── */
.stk{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.stk li{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(18px,3vw,52px);
 align-items:baseline;padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid var(--ln2)}
.stk-l{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--mu)}
.stk-n{display:flex;flex-wrap:wrap;gap:7px 0;align-items:baseline}
.stk-n i{font-style:normal;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.015em;color:var(--ink)}
.stk-n i:not(:last-child):after{content:'\00b7';margin:0 .55em;color:var(--ln);font-weight:400}
.stk-f{margin-top:clamp(20px,2.4vw,30px);color:var(--mu);max-width:66ch}
@media(max-width:760px){.stk li{grid-template-columns:1fr;gap:9px}}

/* ── related reading, on blog posts ──────────────────── */
.rel8{display:block;max-width:1500px;margin:0 auto clamp(48px,5.5vw,92px);padding:clamp(22px,2.6vw,32px) clamp(16px,2.6vw,44px);border-top:1px solid var(--ln)}
.rel8 .mo{display:block;color:var(--mu);margin-bottom:12px}
.rel8 ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rel8 li a{font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.025em;border-bottom:1px solid var(--ln2);display:block;padding-bottom:10px}
.rel8 li a:hover{color:var(--or)}