/* ==========================================================================
   JManage marketing: "Hi-Vis Workshop" (brandkit-v2/SITE-BRIEF-R1.md).

   One stylesheet for both copies of the landing and the onboard guide:
   web/app/page.tsx and web/app/onboard/page.tsx import it, and
   site/marketing.css is a symlink to it. The only url()s are data: URIs,
   so the two copies resolve identically.

   Scoped under .mk because globals.css (the client app) already owns
   .btn .card .tile .pill .dot .field .plan .nav and friends.

   Tone. The page commits to one look (no prefers-color-scheme switching).
   Sections carry .tone-dark or .tone-light, which set color-scheme and the
   --ink / --mute / --hair / --focus tokens every component reads. Dark cards
   inside light sections (.plan-col--rec, .result-card.is-rec, .cell--dark)
   re-declare the dark set. Hi-vis is a FILL: text on it is bitumen, and it
   is never text on chalk or paper.

   Shape. Buttons, chips and labels are full pills. Cards 28px, inner
   surfaces 20px, inputs and icon tiles 12px.

   Motion. One easing, 200 / 400 / 700ms. Only transform (incl. translate),
   opacity, clip-path and filter animate; the one exception is the approval
   demo's list collapse, a grid-row height transition the brief asks for.
   Every keyframe runs inside prefers-reduced-motion: no-preference, and
   scroll-driven work also sits inside @supports (animation-timeline: view()).
   Without either, the page is simply in its final state.

   Layers: nav 50, hero approval card 4, tape band 3.
   ========================================================================== */

.mk{
  --bitumen:#121311;
  --tarmac:#1D1F1B;
  --tarmac-2:#272924;
  --chalk:#F2F0E9;
  --paper:#FBFAF6;
  --graphite:#5B5D57;
  --steel:#A3A69E;
  --hivis:#D8FF3D;
  --hivis-press:#C4EE22;
  --line:rgba(18,19,17,.12);
  --line-dark:rgba(242,240,233,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-sm:12px;
  --r-md:20px;
  --r-lg:28px;
  --t1:200ms;
  --t2:400ms;
  --t3:700ms;

  /* next/font sets --font-* on this element; the static page sets them on :root. */
  --f-display:var(--font-display,"Bricolage Grotesque"),ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:var(--font-body,"Geist"),ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:var(--font-mono,"Geist Mono"),ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --glass:rgba(18,19,17,.62);
  --glass-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --stripes:linear-gradient(180deg,
    transparent calc(30% - 1px), rgba(18,19,17,.2) calc(30% - 1px) calc(30% + 1px),
    transparent calc(30% + 1px) calc(70% - 1px), rgba(18,19,17,.2) calc(70% - 1px) calc(70% + 1px),
    transparent calc(70% + 1px));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme:dark;
  min-height:100dvh;
  overflow-x:clip;
  background:var(--bitumen);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* tone tokens ------------------------------------------------------------- */
.mk,
.mk .tone-dark,
.mk .mk-nav,
.mk .cell--dark,
.mk .plan-col--rec,
.mk .result-card.is-rec{
  --ink:var(--chalk);
  --mute:var(--steel);
  --hair:var(--line-dark);
  --focus:var(--hivis);
  --tick:var(--hivis);
  --fld-bg:var(--tarmac);
  --fld-line:var(--tarmac-2);
  --fld-hover:rgba(242,240,233,.28);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ok-bg:rgba(216,255,61,.12);
  --ok-ink:var(--chalk);
  --err-bg:rgba(255,138,122,.14);
  --err-ink:#FFB4A8;
  --invalid:#FF8A7A;
}
.mk .tone-light{
  --ink:var(--bitumen);
  --mute:var(--graphite);
  --hair:var(--line);
  --focus:var(--bitumen);
  --tick:var(--bitumen);
  --fld-bg:var(--paper);
  --fld-line:rgba(18,19,17,.18);
  --fld-hover:rgba(18,19,17,.42);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121311' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ok-bg:rgba(216,255,61,.55);
  --ok-ink:var(--bitumen);
  --err-bg:#FBE3DE;
  --err-ink:#8F2416;
  --invalid:#C2412F;
}
.mk .tone-dark{color-scheme:dark;background-color:var(--bitumen);color:var(--ink)}
.mk .tone-light{color-scheme:light;background-color:var(--chalk);color:var(--ink)}

/* base -------------------------------------------------------------------- */
.mk img,.mk video{display:block;max-width:100%}
.mk img{height:auto}
.mk h1,.mk h2,.mk h3{margin:0;font-family:var(--f-display);font-weight:700;color:var(--ink);text-wrap:balance}
.mk p{text-wrap:pretty}
.mk ul,.mk ol{list-style:none}
.mk a{color:inherit;text-decoration:none}
.mk button{font:inherit;color:inherit}
.mk :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mk ::selection{background:var(--hivis);color:var(--bitumen)}
.mk [id]{scroll-margin-top:88px}
.mk .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.mk .wrap{width:min(1240px,100% - 48px);margin-inline:auto}
@media (max-width:519px){.mk .wrap{width:calc(100% - 32px)}}
.mk .section{position:relative;padding-block:clamp(5rem,10vw,9rem)}

/* Grain: 4% feTurbulence on dark sections, under content, never on the hero video. */
.mk .grain{position:relative;isolation:isolate}
.mk .grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.04}

/* type -------------------------------------------------------------------- */
.mk .eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 1.25rem;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mk .eyebrow--pill{display:inline-flex;padding:9px 14px;border:1px solid rgba(216,255,61,.22);border-radius:999px;background:var(--bitumen);color:var(--hivis)}
.mk h2{font-size:clamp(2.2rem,1rem + 3.6vw,4.25rem);line-height:.98;font-weight:700;letter-spacing:-.035em}

.mk .section-head{display:grid;gap:1.25rem 3rem;margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.mk .section-head h2{max-width:18ch}
.mk .section-head > p{max-width:40ch;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.5;color:var(--mute)}
@media (min-width:1024px){
  .mk .section-head{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .mk .section-head > p{max-width:34ch;padding-bottom:.35rem}
  .mk .pricing .section-head > p{max-width:44ch}
}

.mk .text-link,
.mk .case a,
.mk .enquire-head a{font-weight:600;color:var(--chalk);text-decoration:underline;text-decoration-color:var(--hivis);text-decoration-thickness:2px;text-underline-offset:4px}
.mk .text-link:hover,
.mk .case a:hover,
.mk .enquire-head a:hover{text-decoration-thickness:3px}

.mk .live-dot{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--hivis)}
.mk .live-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--hivis);opacity:0}

/* brand lockup: the Level mark + the wordmark ----------------------------- */
/* Nav and footer are dark everywhere, so both use the reverse art. The mark is
   a file: never recoloured here, never stretched. A fixed height with
   width:auto keeps the 2.644 ratio whatever the width attribute rounds to. */
.mk .brand{display:inline-flex;align-items:center;gap:10px;flex:none;font-family:var(--f-display);font-size:1.375rem;font-weight:800;font-stretch:85%;font-variation-settings:"wdth" 85;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
/* The vial's optical centre reads a touch low against the cap height: lift 1px. */
.mk .brand-mark{display:block;flex:none;width:auto;height:20px;transform:translateY(-1px);transform-origin:50% 50%}

/* buttons ----------------------------------------------------------------- */
.mk .button{
  --btn-h:52px;--btn-bg:transparent;--btn-ink:var(--ink);--btn-hover:rgba(242,240,233,.08);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);padding:0 24px;border:1px solid transparent;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-ink);
  font-family:var(--f-body);font-size:1rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t1) var(--ease);
}
/* Hover is a layer that fades, so no colour property ever animates. */
.mk .button::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--btn-hover);opacity:0;transition:opacity var(--t1) var(--ease)}
.mk .button:active{transform:scale(.97)}
.mk .button[disabled]{opacity:.55;cursor:progress}
.mk .button svg{flex:none}
.mk .button .arrow{transition:transform var(--t1) var(--ease)}
@media (hover:hover){
  .mk .button:hover::before{opacity:1}
  .mk .button:hover .arrow{transform:translateX(3px)}
}
.mk .button--primary{--btn-bg:var(--hivis);--btn-ink:var(--bitumen);--btn-hover:var(--hivis-press)}
.mk .button--quiet{--btn-hover:color-mix(in srgb,var(--ink) 8%,transparent);border-color:color-mix(in srgb,var(--ink) 28%,transparent)}
.mk .button--dark{--btn-bg:var(--bitumen);--btn-ink:var(--chalk);--btn-hover:#30322D}

/* globals.css styles a dashboard .chip (glass, uppercase); reset all of it here. */
.mk .chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--mute);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap}
.mk .chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(242,240,233,.08);opacity:0;transition:opacity var(--t1) var(--ease)}
@media (hover:hover){.mk .chip:hover{color:var(--ink)}.mk .chip:hover::before{opacity:1}}

/* nav: floating pill ------------------------------------------------------ */
.mk .mk-nav{
  position:sticky;top:12px;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  width:min(1120px,100% - 24px);height:60px;
  margin:12px auto -72px; /* float over the hero: no gap above it */
  padding:0 8px 0 22px;
  border:1px solid var(--line-dark);border-radius:999px;
  background:rgba(18,19,17,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  color:var(--ink);color-scheme:dark;isolation:isolate;
}
.mk .mk-nav::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:rgba(18,19,17,.9);box-shadow:0 18px 50px -24px rgba(0,0,0,.75);opacity:0;transition:opacity var(--t2) var(--ease)}
.mk .mk-nav.is-stuck::before{opacity:1}
/* Pages with no dark hero under the nav (onboard) start in the stuck state, so
   steel links never sit on a see-through pill over chalk. */
.mk:has(> main.tone-light) .mk-nav::before{opacity:1}
.mk .mk-nav .brand{justify-self:start}
.mk .navlinks{display:none;align-items:center;gap:28px}
.mk .navlinks a{display:block;padding:10px 0;font-size:14px;font-weight:500;color:var(--steel)}
.mk .navlinks a:hover{color:var(--chalk)}
.mk .nav-cta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:4px}
.mk .nav-cta .chip{display:none}
.mk .nav-cta .button{--btn-h:44px;padding:0 18px;font-size:15px}
@media (min-width:900px){
  .mk .navlinks{display:flex}
  .mk .nav-cta .chip{display:inline-flex}
}

/* hero -------------------------------------------------------------------- */
.mk .hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding-bottom:28px;overflow:clip;background:var(--bitumen)}
.mk .hero-media{position:absolute;inset:0 0 auto;height:100%;z-index:-1;overflow:hidden;background:var(--bitumen)}
.mk .hero-poster,
.mk .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 40%}
.mk .hero-video{opacity:0;transition:opacity .6s var(--ease)}
.mk .hero-video.is-playing{opacity:1}
.mk .hero-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,19,17,0) 70%,var(--bitumen) 100%),
  linear-gradient(90deg,#121311 0%,rgba(18,19,17,.88) 30%,rgba(18,19,17,.35) 58%,rgba(18,19,17,0) 75%)}

.mk .hero-inner{padding-top:max(112px,40svh)}
.mk .hero-copy{max-width:780px;padding-bottom:2.75rem}
.mk .hero h1{font-size:clamp(3rem,1rem + 7.2vw,7rem);line-height:.9;font-weight:800;letter-spacing:-.03em;color:var(--chalk)}
.mk .h1-line{display:block}
.mk .tape{
  display:inline-block;padding:0 .12em;border-radius:.08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:
    linear-gradient(180deg,transparent calc(50% - .5px),rgba(18,19,17,.18) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
    var(--hivis);
  color:var(--bitumen);
  transform:rotate(-1.5deg);
}
.mk .lede{max-width:40ch;margin-top:1.75rem;font-size:clamp(1.125rem,1rem + .45vw,1.3rem);line-height:1.5;color:rgba(242,240,233,.78)}
.mk .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.25rem}
/* Dots sit in the gap before each item; overflow clips the one that would
   start a wrapped line. */
.mk .proof{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin-top:1.75rem;overflow:hidden;font-family:var(--f-mono);font-size:12px;line-height:1.4;letter-spacing:.01em;color:var(--steel)}
.mk .proof li{position:relative;margin-right:26px}
.mk .proof li:last-child{margin-right:0}
.mk .proof li::before{content:"";position:absolute;top:50%;left:-14px;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--steel)}

@media (max-width:899px){
  .mk .hero-media{height:100svh}
  .mk .hero-poster,.mk .hero-video{object-position:72% center}
  .mk .hero-scrim{background:linear-gradient(180deg,rgba(18,19,17,.4) 0%,rgba(18,19,17,.06) 20%,rgba(18,19,17,.5) 44%,rgba(18,19,17,.92) 68%,var(--bitumen) 100%)}
}
/* Small phones: one sentence per line. "We do the admin." plus the tape
   measures ~7.43em at -.03em at every size (the display subset pins opsz at
   96, so small text no longer widens). The size stays the wrap width / 8.2,
   which also fits the fallback face (system-ui ~7.7em, Arial ~8em) before the
   swap.
   cqw (the hero is the container) keeps a desktop scrollbar out of the sum;
   the vw line is the fallback. */
@media (max-width:560px){
  .mk .hero{container-type:inline-size}
  .mk .hero h1{font-size:max(2.1rem,(100vw - 48px) / 8.2);font-size:max(2.1rem,(100cqw - 48px) / 8.2)}
  .mk .h1-line{display:block;white-space:nowrap}
}
@media (max-width:519px){
  .mk .hero h1{font-size:max(2.1rem,(100vw - 32px) / 8.2);font-size:max(2.1rem,(100cqw - 32px) / 8.2)}
  .mk .actions .button{flex:1 1 100%}
  .mk .proof{flex-direction:column;align-items:flex-start}
  .mk .proof li{margin-right:0;padding-left:14px}
  .mk .proof li::before{left:0}
}
@media (min-width:900px){
  .mk .hero-inner{padding-top:120px}
  .mk .hero-copy{padding-bottom:clamp(3rem,8vh,6rem)}
  .mk .h1-line{white-space:nowrap}
}

/* approval demo card */
.mk .approve{
  position:relative;z-index:4;width:100%;max-width:420px;margin-bottom:clamp(3rem,8vh,6rem);padding:18px;
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:var(--glass-shadow);color:var(--chalk);
}
@media (min-width:1100px){
  .mk .hero{container-type:inline-size}
  .mk .hero-inner{position:static}
  .mk .approve{position:absolute;right:clamp(24px,4cqw,64px);bottom:12vh;width:340px;margin:0}
  /* The copy never runs under the card: its width (and, only between
     1100 and ~1260px, the h1 size) is capped to the space left of the card. */
  .mk .hero-copy{--avail:calc(100cqw - clamp(24px,4cqw,64px) - 340px - 48px - (100cqw - min(1240px,100cqw - 48px)) / 2);max-width:min(780px,var(--avail))}
  .mk .hero h1{font-size:min(clamp(3rem,1rem + 7.2vw,7rem),var(--avail) / 7.6)}
}
.mk .approve-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 14px}
.mk .approve-title{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.mk .approve-count{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 8px;overflow:hidden;border-radius:999px;background:var(--hivis);color:var(--bitumen);font-family:var(--f-mono);font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.mk .approve-num{display:block}
.mk .approve-list-wrap,
.mk .approve-done-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--t2) var(--ease),opacity var(--t2) var(--ease)}
.mk .approve-list-wrap > *,
.mk .approve-done-wrap > *{min-height:0;overflow:hidden}
.mk .approve-done-wrap{grid-template-rows:0fr;opacity:0}
.mk .approve.is-complete .approve-list-wrap{grid-template-rows:0fr;opacity:0}
.mk .approve.is-complete .approve-done-wrap{grid-template-rows:1fr;opacity:1}
.mk .approve-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 6px 10px 4px;border-top:1px solid var(--line-dark)}
.mk .approve-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--tarmac-2);color:var(--chalk)}
.mk .approve-text{display:grid;gap:1px;min-width:0}
.mk .approve-name{font-size:15px;font-weight:600;line-height:1.25;color:var(--chalk);transition:opacity var(--t2) var(--ease)}
.mk .approve-sub{overflow:hidden;font-size:13px;line-height:1.35;color:var(--steel);white-space:nowrap;text-overflow:ellipsis}
.mk .approve-row.is-done .approve-name{color:var(--steel)}
.mk .approve-btn{position:relative;display:block;height:32px;padding:0;border:0;border-radius:999px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--t1) var(--ease)}
.mk .approve-btn:active{transform:scale(.95)}
.mk .approve-btn:focus-visible{outline:none}
.mk .approve-btn:focus-visible::after{content:"";position:absolute;inset:-4px;border:2px solid var(--hivis);border-radius:999px}
.mk .approve-row.is-done .approve-btn{cursor:default}
.mk .approve-row.is-done .approve-btn:active{transform:none}
.mk .approve-row.is-done .approve-btn:focus-visible::after{left:calc(100% - 36px)}
/* The morph is a clip-path, so the pill shrinks to a 32px circle without reflowing the row. */
.mk .approve-pill{position:relative;display:flex;align-items:center;justify-content:center;height:32px;min-width:84px;padding:0 14px;border-radius:999px;background:var(--hivis);color:var(--bitumen);font-size:13px;font-weight:600;line-height:1;clip-path:inset(0 0 0 0 round 16px);transition:clip-path 350ms var(--ease)}
.mk .approve-label{transition:opacity var(--t1) var(--ease)}
.mk .approve-tick{position:absolute;top:7px;right:7px;width:18px;height:18px;opacity:0;transform:scale(.5);transition:opacity var(--t1) var(--ease) 120ms,transform 350ms var(--ease)}
.mk .approve-row.is-done .approve-pill{clip-path:inset(0 0 0 calc(100% - 32px) round 16px)}
.mk .approve-row.is-done .approve-label{opacity:0}
.mk .approve-row.is-done .approve-tick{opacity:1;transform:none}
.mk .approve-done{display:flex;align-items:center;gap:12px;padding:14px 4px 6px;border-top:1px solid var(--line-dark);font-size:14px;font-weight:600;line-height:1.35;color:var(--chalk)}
.mk .approve-done > span:not(.live-dot){flex:1}
.mk .approve-reset{flex:none;min-height:32px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--steel);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mk .approve-reset:hover{color:var(--chalk)}
.mk .approve-foot{margin-top:6px;padding:12px 4px 0;border-top:1px solid var(--line-dark);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* hi-vis tape marquee ----------------------------------------------------- */
.mk .tape-band{
  position:relative;z-index:3;display:flex;align-items:center;height:56px;
  margin:-28px -4vw 0;overflow:hidden;
  background:var(--stripes),var(--hivis);color:var(--bitumen);
  transform:rotate(-2deg);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.7);
}
.mk .tape-track{display:flex;flex:none;width:max-content}
.mk .tape-group{display:flex;flex:none;align-items:center}
.mk .tape-group li{display:flex;align-items:center;font-family:var(--f-mono);font-size:14px;font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mk .tape-group li::after{content:"";flex:none;width:6px;height:6px;margin:0 28px;border-radius:50%;background:var(--bitumen)}

/* who it's for ------------------------------------------------------------ */
.mk .who{padding-top:clamp(6.5rem,12vw,10rem)}
.mk .trades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:16px}
.mk .trade{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:3/4;border-radius:var(--r-lg);background:var(--tarmac)}
.mk .trade:nth-child(even){margin-top:48px}
.mk .trade img,
.mk .trade-video{width:100%;height:100%;object-fit:cover;transition:transform var(--t3) var(--ease)}
/* The loop sits over the still and stays invisible until frames are actually
   playing, so a missing or failed file just leaves the photo. */
.mk .trade-video{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--t2) var(--ease),transform var(--t3) var(--ease)}
.mk .trade-video.is-playing{opacity:1}
.mk .trade::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(180deg,rgba(18,19,17,0),rgba(18,19,17,.85));pointer-events:none}
.mk .trade:focus-visible{outline:2px solid var(--hivis);outline-offset:3px}
.mk .trade-label{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk)}
.mk .trade-label span{display:inline-block}
.mk .trade-label span::after{content:"";display:block;height:3px;margin-top:10px;background:var(--hivis);transform:scaleX(0);transform-origin:left center;transition:transform var(--t2) var(--ease)}
.mk .trade:focus-visible .trade-label span::after{transform:scaleX(1)}
@media (hover:hover){
  .mk .trade:hover img,
  .mk .trade:hover .trade-video{transform:scale(1.05)}
  .mk .trade:hover .trade-label span::after{transform:scaleX(1)}
}
@media (max-width:899px){
  /* A snap row that bleeds to the screen edge and lines up with the copy.
     The block padding keeps a card's focus ring clear of the scroller's clip. */
  .mk .trades{display:flex;gap:12px;margin-inline:-24px;padding-inline:24px;margin-block:-6px;padding-block:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none}
  .mk .trades::-webkit-scrollbar{display:none}
  .mk .trade{flex:0 0 72vw;max-width:360px;scroll-snap-align:start}
  .mk .trade:nth-child(even){margin-top:0}
}
@media (max-width:519px){
  .mk .trades{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
}

/* what you get: bento ----------------------------------------------------- */
.mk .bento{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.mk .cell{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:260px;padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);transition:transform var(--t2) var(--ease)}
.mk .cell::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 24px 60px -30px rgba(18,19,17,.35);opacity:0;transition:opacity var(--t2) var(--ease);pointer-events:none}
@media (hover:hover){
  .mk .cell:hover{transform:translateY(-4px)}
  .mk .cell:hover::after{opacity:1}
}
.mk .cell-copy{display:grid;align-content:start;gap:10px}
.mk .cell h3{font-size:clamp(1.4rem,1.1rem + .7vw,1.75rem);line-height:1.05;font-weight:700;letter-spacing:-.015em}
.mk .cell p{max-width:42ch;font-size:15px;line-height:1.5;color:var(--mute)}

.mk .cell--dark{border-color:transparent;background:var(--bitumen)}
.mk .cell--dark::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(216,255,61,.08),transparent 60%);opacity:0;transition:opacity var(--t2) var(--ease);pointer-events:none}
.mk .cell--dark:hover::before{opacity:1}

/* 1. website */
.mk .cell--site{min-height:0;padding-bottom:0}
.mk .cell--site .cell-copy{max-width:23rem}
.mk .cell--site h3{font-size:clamp(1.9rem,1.2rem + 1.6vw,2.75rem);line-height:1;letter-spacing:-.03em}
.mk .cell--site p{font-size:16px}
.mk .site-visual{position:relative;align-self:center;width:min(250px,76%);margin-top:32px}
.mk .handset{height:340px;padding:8px 8px 0;overflow:hidden;border-radius:36px 36px 0 0;background:#0B0B0A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 -20px 60px -30px rgba(0,0,0,.9)}
.mk .handset img{width:100%;border-radius:28px 28px 0 0}
.mk .tap-call{position:absolute;left:-14%;bottom:26%;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--hivis);color:var(--bitumen);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -12px rgba(0,0,0,.6)}
.mk .tap-call::after{content:"";position:absolute;inset:0;border:2px solid var(--hivis);border-radius:inherit;opacity:0;pointer-events:none}
@media (min-width:720px){
  .mk .cell--site{min-height:500px}
  .mk .site-visual{position:absolute;right:clamp(28px,8%,72px);bottom:0;width:260px;margin:0}
  .mk .handset{height:auto;aspect-ratio:260/370}
  .mk .tap-call{left:-26%}
}

/* 2. bookings */
.mk .book-viz{display:grid;gap:14px;margin-bottom:auto;padding-bottom:28px}
.mk .book-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mk .book-days li{display:grid;place-items:center;height:30px;border-radius:999px;font-family:var(--f-mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.mk .book-days li.is-on{background:var(--bitumen);color:var(--chalk)}
.mk .book-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk .slot{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:10px}
.mk .slot:nth-child(2){justify-items:center}
.mk .slot:nth-child(3){justify-items:end}
.mk .slot-chip{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:44px;border:1px solid var(--line);border-radius:999px;background:var(--chalk);color:var(--bitumen);font-size:15px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.mk .slot-chip::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--hivis);opacity:0;transform:scale(.9);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.mk .slot.is-on .slot-chip::before{opacity:1;transform:none}
.mk .slot-note{font-family:var(--f-mono);font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--graphite);opacity:0;transform:translateY(-4px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.mk .slot.is-on .slot-note{opacity:1;transform:none}

/* 3. domain (hi-vis cell) */
.mk .cell--domain{--ink:var(--bitumen);--mute:rgba(18,19,17,.76);--focus:var(--bitumen);container-type:inline-size;border-color:transparent;background:var(--hivis)}
.mk .cell--domain .domain-type{margin-bottom:auto;padding-bottom:28px;font-family:var(--f-display);font-size:clamp(1.5rem,10.4cqi,3.25rem);font-weight:700;line-height:1;letter-spacing:-.035em;white-space:nowrap;color:var(--bitumen)}
.mk .domain-type .ch.is-hidden{visibility:hidden}
.mk .caret{position:relative;display:inline-block;width:0;height:.84em;vertical-align:-.07em}
.mk .caret::after{content:"";position:absolute;top:0;bottom:0;left:.05em;width:.075em;border-radius:1px;background:currentColor}

/* 4. logo and cards */
.mk .cell--cards{padding:8px}
.mk .cell--cards img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md)}
.mk .cell--cards .cell-copy{padding:20px 20px 16px}

/* 5. branded email */
/* A dark card, so the hi-vis bar across its top reads (on chalk it was 1:1). */
.mk .sig{position:relative;display:grid;gap:3px;margin-bottom:auto;padding:22px 20px 18px;border:0;border-radius:var(--r-md);background:var(--bitumen)}
.mk .sig::before{content:"";position:absolute;top:0;left:20px;width:40%;height:3px;border-radius:0 0 3px 3px;background:var(--hivis)}
.mk .sig-name{font-size:15px;font-weight:600;line-height:1.3;color:var(--chalk)}
.mk .sig-biz{font-size:14px;line-height:1.3;color:var(--steel)}
.mk .sig-mail{margin-top:10px;font-family:var(--f-mono);font-size:12px;line-height:1.3;color:var(--chalk);overflow-wrap:anywhere}
.mk .cell--mail .cell-copy,
.mk .cell--gbp .cell-copy,
.mk .cell--book .cell-copy,
.mk .cell--domain .cell-copy{margin-top:auto}
.mk .cell--mail .sig{margin-bottom:28px}

/* 6. google business profile (dark tarmac) */
/* Stars, proof line and copy sit together at the foot of the cell. */
.mk .cell--gbp{justify-content:flex-end;background:var(--tarmac)}
.mk .gbp-viz{display:grid;justify-items:start;gap:12px;margin-top:auto;padding-bottom:22px}
.mk .cell--gbp .cell-copy{margin-top:0}
.mk .stars{display:flex;gap:6px}
.mk .star{display:block;width:24px;height:24px}
/* In the narrow 1024px cell the line breaks after "Verified ·", never mid-pair. */
.mk .cell--gbp .gbp-meta{max-width:none;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.01em;color:var(--steel)}
.mk .gbp-meta span{white-space:nowrap}
.mk .star-line{fill:none;stroke:var(--steel);stroke-width:1.5;stroke-linejoin:round}
.mk .star-fill{fill:var(--hivis);stroke:var(--hivis);stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.mk .stars.is-armed .star-fill{opacity:0;transform:scale(.4)}
.mk .stars.is-armed.is-in .star-fill{opacity:1;transform:none;transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.mk .stars.is-armed.is-in .star:nth-child(2) .star-fill{transition-delay:120ms}
.mk .stars.is-armed.is-in .star:nth-child(3) .star-fill{transition-delay:240ms}
.mk .stars.is-armed.is-in .star:nth-child(4) .star-fill{transition-delay:360ms}
.mk .stars.is-armed.is-in .star:nth-child(5) .star-fill{transition-delay:480ms}

@media (min-width:720px){
  .mk .cell{min-height:300px}
  .mk .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk .cell--site,.mk .cell--cards{grid-column:1 / -1}
}
@media (min-width:720px) and (max-width:1023px){
  .mk .cell--cards{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end}
  .mk .cell--cards img{height:100%;aspect-ratio:auto;min-height:260px}
}
@media (min-width:1024px){
  .mk .bento{grid-template-columns:repeat(12,minmax(0,1fr))}
  .mk .cell--site{grid-column:1 / span 7;grid-row:1 / span 2;min-height:620px}
  .mk .cell--book{grid-column:8 / span 5;grid-row:1}
  .mk .cell--domain{grid-column:8 / span 5;grid-row:2}
  .mk .cell--cards{grid-column:1 / span 5;grid-row:3}
  .mk .cell--mail{grid-column:6 / span 4;grid-row:3}
  .mk .cell--gbp{grid-column:10 / span 3;grid-row:3}
  .mk .cell--cards img{flex:1 1 250px;min-height:0;height:auto;aspect-ratio:auto}
  .mk .cell--cards .cell-copy{flex:none}
  .mk .site-visual{right:clamp(40px,11%,96px);width:clamp(250px,21vw,280px)}
}

/* how it works: sticky story ---------------------------------------------- */
.mk .how-grid{display:grid;gap:clamp(2rem,4vw,3rem)}
/* Desktop only: one photo per step stacked in the sticky panel, crossfading
   with the status card. Below 1024px each step carries its own photo. */
.mk .how-media{display:none}
.mk .how-panel{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--tarmac)}
.mk .how-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
.mk .how-shot.is-on{opacity:1;transform:scale(1)}
.mk .step-img{width:100%;height:auto;aspect-ratio:4/3;margin-bottom:18px;border-radius:var(--r-md);object-fit:cover;background:var(--tarmac)}
.mk .step:nth-child(1) .step-img{object-position:50% 42%}
.mk .step:nth-child(2) .step-img{object-position:50% 62%}
.mk .step:nth-child(3) .step-img{object-position:50% 58%}
.mk .step:nth-child(4) .step-img{object-position:50% 48%}
.mk .status-card{
  position:absolute;left:16px;bottom:16px;display:grid;width:min(280px,100% - 32px);padding:16px 18px;
  border:1px solid var(--line-dark);border-radius:var(--r-md);
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:var(--glass-shadow);color:var(--chalk);
}
.mk .status-state{grid-area:1 / 1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;opacity:0;transform:translateY(8px);transition:opacity 250ms var(--ease),transform 250ms var(--ease)}
.mk .status-state.is-on{opacity:1;transform:none}
.mk .status-dot{width:8px;height:8px;border-radius:50%;background:var(--steel)}
.mk .status-dot.is-live{background:var(--hivis);box-shadow:0 0 0 4px rgba(216,255,61,.16)}
.mk .status-tag{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.mk .status-title{grid-column:1 / -1;margin-top:4px;font-size:16px;font-weight:600;line-height:1.25;color:var(--chalk)}
.mk .status-sub{grid-column:1 / -1;font-size:13px;line-height:1.35;color:var(--steel)}

.mk .steps{position:relative;display:grid;padding-left:clamp(1.5rem,3vw,2.75rem)}
.mk .steps::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--line-dark)}
.mk .steps::after{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:2px;background:var(--hivis);transform:scaleY(var(--p,1));transform-origin:top center;transition:transform var(--t2) var(--ease)}
.mk .step{display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:24px;transition:opacity var(--t2) var(--ease)}
.mk .step-num{font-family:var(--f-mono);font-size:14px;font-weight:500;line-height:1;letter-spacing:.08em;color:var(--steel)}
.mk .step h3{font-size:clamp(1.8rem,1rem + 2vw,2.75rem);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--chalk)}
/* Phones: the title sits at its 1.8rem floor, so it gets the small-heading tracking. */
@media (max-width:639px){.mk .step h3{letter-spacing:-.02em}}
.mk .step p{max-width:40ch;font-size:1.1rem;line-height:1.55;color:var(--steel)}
.mk .steps.is-tracking .step{opacity:.35}
.mk .steps.is-tracking .step.is-active{opacity:1}
@media (min-width:1024px){
  .mk .how-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(3rem,6vw,6rem)}
  .mk .how-media{display:block;position:sticky;top:96px}
  .mk .how-panel{width:100%;max-height:calc(100svh - 128px)}
  .mk .step{min-height:62vh;padding-block:40px}
  .mk .step-img{display:none}
  .mk .step h3{font-size:clamp(2rem,1rem + 2.4vw,3.25rem)}
  .mk .step p{font-size:1.125rem}
}

/* pricing ----------------------------------------------------------------- */
.mk .plans{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:14px}
@media (min-width:960px){.mk .plans{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:16px}}
.mk .plan-col{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);transition:transform var(--t2) var(--ease)}
.mk .plan-col::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:0 24px 60px -30px rgba(18,19,17,.35);opacity:0;transition:opacity var(--t2) var(--ease);pointer-events:none}
@media (hover:hover){
  .mk .plan-col:hover{transform:translateY(-4px)}
  .mk .plan-col:hover::after{opacity:1}
}
.mk .plan-col--rec{padding-top:66px;border-color:transparent;background:var(--bitumen);box-shadow:0 40px 80px -40px rgba(18,19,17,.6)}
@media (min-width:960px){
  .mk .plan-col--rec{transform:translateY(-16px)}
  .mk .plan-col--rec:hover{transform:translateY(-20px)}
}
.mk .plan-tape{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;height:34px;padding:0 16px;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--stripes),var(--hivis);color:var(--bitumen);font-family:var(--f-mono);font-size:12px;font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@media (min-width:960px) and (max-width:1179px){.mk .plan-tape{font-size:11px;letter-spacing:.05em}}
.mk .plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:1.5rem;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.mk .badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--hivis);color:var(--bitumen);font-family:var(--f-mono);font-size:11px;font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mk .price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-top:18px;font-family:var(--f-display);font-size:clamp(3.25rem,2rem + 3vw,4.5rem);line-height:.95;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
/* JS counts .price-num up from $0 (aria-hidden); the sr-only twin holds the real value. */
.mk .price-num{flex:none;white-space:nowrap}
.mk .price small{font-family:var(--f-body);font-size:1rem;font-weight:500;line-height:1.2;letter-spacing:0;color:var(--mute)}
.mk .setup{margin-top:14px;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);overflow-wrap:break-word}
.mk .feats{display:grid;gap:12px;margin:26px 0 30px;padding-top:26px;border-top:1px solid var(--hair);font-size:15px;line-height:1.45;color:var(--ink)}
.mk .feats li{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px}
.mk .feats svg{display:block;width:20px;height:20px;color:var(--tick)}
.mk .feats span{overflow-wrap:break-word}
.mk .plan-col--rec .feats svg,
.mk .result-card.is-rec .feats svg{width:18px;height:18px;margin:1px;padding:3px;border-radius:50%;background:var(--hivis);color:var(--bitumen);stroke-width:3.4}
.mk .plan-gap{margin:-12px 0 26px;font-size:14px;line-height:1.45;color:var(--mute)}
.mk .plan-col .button{width:100%;margin-top:auto}

/* founding clients: photo band -------------------------------------------- */
.mk .founder{position:relative;isolation:isolate;display:flex;align-items:center;overflow:clip;background:var(--bitumen)}
@media (min-width:960px){.mk .founder{min-height:88vh}}
.mk .founder-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.mk .founder-media img{position:absolute;top:-10%;left:0;width:100%;height:120%;object-fit:cover;object-position:60% center}
.mk .founder::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,19,17,.94) 0%,rgba(18,19,17,.75) 45%,rgba(18,19,17,.2) 100%)}
@media (max-width:719px){
  .mk .founder::before{background:linear-gradient(180deg,rgba(18,19,17,.72) 0%,rgba(18,19,17,.9) 55%,rgba(18,19,17,.96) 100%)}
}
.mk .founder-inner{display:grid;justify-items:start;gap:clamp(2.5rem,5vw,3.5rem)}
.mk .offer-copy{max-width:620px}
.mk .founder h2{max-width:16ch;color:var(--chalk)}
.mk .offer-terms{max-width:46ch;margin:22px 0 32px;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.55;color:rgba(242,240,233,.78)}
.mk .case{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:16px;max-width:480px;padding:20px;border:1px solid var(--line-dark);border-radius:var(--r-md);background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:var(--glass-shadow)}
.mk .case img{width:64px;height:64px;object-fit:cover;object-position:center top;border-radius:12px}
.mk .case b{display:block;font-weight:600;line-height:1.35;color:var(--chalk)}
.mk .case p{margin:6px 0 12px;font-size:15px;line-height:1.5;color:var(--steel)}

/* enquire ----------------------------------------------------------------- */
.mk .enquire{background-color:var(--tarmac)}
.mk .enquire-grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:960px){.mk .enquire-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(3rem,6vw,6rem)}}
.mk .enquire-head h2{max-width:12ch}
.mk .enquire-head > p:not(.eyebrow){max-width:40ch;margin-top:20px;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.55;color:var(--mute)}
.mk h3.enquire-head{margin-bottom:6px;line-height:1.15;letter-spacing:-.01em}
.mk .lead-panel{padding:clamp(20px,3vw,36px);border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--bitumen)}

/* lead form (landing, onboard) -------------------------------------------- */
.mk .lead{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px 14px}
@media (min-width:640px){
  .mk .lead{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk .fld--wide,.mk .lead-foot,.mk .lead .form-msg{grid-column:1 / -1}
}
.mk .fld{display:grid;align-content:start;gap:8px}
.mk .fld label{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
.mk .fld label span{font-weight:400;color:var(--mute)}
.mk .fld input,
.mk .fld select{
  width:100%;height:54px;padding:0 16px;
  border:1px solid var(--fld-line);border-radius:var(--r-sm);
  background-color:var(--fld-bg);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.2;
  -webkit-appearance:none;appearance:none;
}
.mk .fld select{padding-right:44px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px;cursor:pointer}
.mk .fld input::placeholder{color:var(--steel);opacity:1}
.mk .fld input:hover,
.mk .fld select:hover{border-color:var(--fld-hover)}
.mk .fld input:focus-visible,
.mk .fld select:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:transparent}
.mk .fld input:user-invalid{border-color:var(--invalid)}
.mk .fld input[readonly]{color:var(--mute);cursor:default}
.mk .fld input:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);box-shadow:0 0 0 60px var(--fld-bg) inset}
.mk .help{font-size:13px;line-height:1.4;color:var(--mute)}
.mk .lead-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.mk .form-note{max-width:44ch;font-size:13px;line-height:1.45;color:var(--mute)}
.mk .form-msg{padding:14px 16px;border-radius:var(--r-sm);font-size:15px;font-weight:600;line-height:1.45}
.mk .form-msg.is-ok{background:var(--ok-bg);color:var(--ok-ink)}
.mk .form-msg.is-err{background:var(--err-bg);color:var(--err-ink)}

/* onboard guide ----------------------------------------------------------- */
.mk .mk-nav + main.section{padding-top:calc(72px + clamp(3rem,7vw,5.5rem))}
.mk .guide{max-width:44rem;padding-bottom:2rem}
.mk .guide-kicker{margin-bottom:14px;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mk .guide-step{display:none}
.mk .guide-step.is-on{display:block}
.mk .guide-step h2{max-width:20ch;font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);line-height:1}
.mk .guide-step > p{max-width:50ch;margin-top:16px;font-size:1.075rem;line-height:1.55;color:var(--mute)}
.mk .choices{display:grid;gap:10px;margin:28px 0 22px}
.mk .choice{
  position:relative;display:block;width:100%;min-height:64px;padding:18px 60px 18px 20px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1.0625rem;font-weight:600;line-height:1.3;text-align:left;
  white-space:normal;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:transform var(--t1) var(--ease);
}
.mk .choice::after{content:"";position:absolute;top:50%;right:20px;width:20px;height:20px;margin-top:-10px;border:1.5px solid rgba(18,19,17,.3);border-radius:50%}
.mk .choice:hover{border-color:rgba(18,19,17,.34)}
.mk .choice:active{transform:scale(.99)}
.mk .choice small{display:block;margin-top:4px;font-size:.9375rem;font-weight:400;line-height:1.4;color:var(--mute);overflow-wrap:break-word}
.mk .choice.is-on{border-color:var(--bitumen);box-shadow:inset 0 0 0 1px var(--bitumen)}
.mk .choice.is-on::after{border-color:var(--bitumen);background:radial-gradient(circle,var(--bitumen) 0 3px,var(--hivis) 3.5px)}
.mk .guide-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mk .result-card{position:relative;margin:28px 0 32px;padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink)}
.mk .result-card.is-rec{border-color:transparent;background:var(--bitumen)}
.mk .result-card .feats{margin-bottom:0}
.mk .result-why{max-width:46ch;margin-top:14px;font-size:1.05rem;line-height:1.5;color:var(--ink);overflow-wrap:break-word}
.mk .onboard-form-wrap{margin-top:32px;padding-top:32px;border-top:1px solid var(--hair)}
.mk .onboard-form-wrap .lead{margin-top:20px}
.mk .onboard-form-wrap > .form-msg{margin-top:16px}
/* Desktop: the guide keeps its column and a sticky photo panel fills the right.
   align-items:start keeps the panel put while guide steps change height; its
   width follows the viewport height so a 4/5 panel never outgrows the screen.
   Below 1024px there is no panel (display:none, so its lazy image never loads). */
.mk .onboard-media{display:none}
@media (min-width:1024px){
  .mk .onboard{display:grid;grid-template-columns:minmax(0,44rem) clamp(20rem,32vw,28rem);justify-content:space-between;align-items:start;column-gap:clamp(3rem,5vw,4.5rem)}
  .mk .onboard-media{display:block;position:sticky;top:96px;align-self:start}
}
.mk .onboard-panel{position:relative;isolation:isolate;overflow:hidden;width:min(100%,(100svh - 128px) * .8);margin-left:auto;aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--tarmac)}
.mk .onboard-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* footer ------------------------------------------------------------------ */
.mk .mk-foot{position:relative;padding:clamp(3.5rem,6vw,5rem) 0 calc(28px + env(safe-area-inset-bottom,0px));overflow:clip;background:var(--bitumen);color:var(--ink)}
.mk .foot-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px}
.mk .foot-top .brand{font-size:1.625rem}
.mk .foot-top .brand-mark{height:24px}
.mk .foot-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.mk .foot-links a{display:block;padding:6px 0;font-size:14px;font-weight:500;color:var(--steel)}
.mk .foot-links a:hover{color:var(--chalk)}
.mk .foot-place{margin-left:auto;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
/* The reverse mark sits directly above the giant wordmark and carries the gap
   that used to sit on top of it. */
.mk .foot-mark-logo{display:block;width:auto;height:34px;margin-top:clamp(2.5rem,6vw,5rem);margin-bottom:16px}
/* The giant wordmark is the one place tracking goes past -.045em (-.05em):
   at 20rem the default spacing reads loose, and it is decoration, not copy.
   Outline only. A variable font's glyphs have overlapping contours, so a bare
   stroke draws lines through the letters; painting the stroke first and a
   ground-coloured fill over it hides those, leaving a 1px outline. Where
   paint-order is unsupported the fill is simply invisible on the ground. */
.mk .foot-mark{padding-bottom:.1em;font-family:var(--f-display);font-size:clamp(5rem,22vw,20rem);font-weight:800;line-height:.8;letter-spacing:-.05em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(242,240,233,.14);user-select:none}
@supports (paint-order:stroke fill){
  .mk .foot-mark{color:var(--bitumen);-webkit-text-stroke-width:2px;paint-order:stroke fill}
}
.mk .foot-legal{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-dark);font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--steel)}
@media (max-width:519px){.mk .foot-place{margin-left:0;width:100%}}

/* motion ------------------------------------------------------------------ */
@keyframes mk-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mk-line{from{opacity:0;transform:translateY(30%)}to{opacity:1;transform:none}}
@keyframes mk-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mk-float{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
@keyframes mk-pulse{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}
@keyframes mk-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.14,1.6)}}
@keyframes mk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mk-rise{from{opacity:0;translate:0 40px}to{opacity:1;translate:none}}
@keyframes mk-rise-sm{from{opacity:0;translate:0 24px}to{opacity:1;translate:none}}
@keyframes mk-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mk-parallax{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
@keyframes mk-mark{from{opacity:0;translate:0 35%}to{opacity:1;translate:none}}
/* The level metaphor: the vial tips off true, then settles back. The 1px optical
   lift is carried through every frame so it never jumps. */
@keyframes mk-tip{0%,100%{transform:translateY(-1px) rotate(0deg)}40%{transform:translateY(-1px) rotate(-3.5deg)}}
/* The dark website cell never fades: at part opacity on chalk it reads grey.
   It wipes up instead; the end inset is negative so the hover shadow isn't cut. */
@keyframes mk-reveal{from{clip-path:inset(0 0 24% 0 round var(--r-lg));translate:0 24px}to{clip-path:inset(-80px round var(--r-lg));translate:none}}
@keyframes mk-mask{from{clip-path:inset(0 0 100% 0);translate:0 .35em}to{clip-path:inset(0);translate:none}}
@keyframes mk-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:no-preference){
  /* load: copy rises line by line, then the tape is laid left to right */
  .mk .hero-copy > .eyebrow{animation:mk-up var(--t3) var(--ease) both}
  .mk .hero h1 .h1-line{animation:mk-line var(--t3) var(--ease) 90ms both}
  .mk .hero h1 .h1-line + .h1-line{animation-delay:180ms}
  .mk .hero .tape{animation:mk-wipe 600ms var(--ease) 650ms both}
  .mk .hero .lede{animation:mk-up var(--t3) var(--ease) 270ms both}
  .mk .hero .actions{animation:mk-up var(--t3) var(--ease) 360ms both}
  .mk .hero .proof{animation:mk-up var(--t3) var(--ease) 450ms both}
  .mk .approve{animation:mk-float var(--t3) var(--ease) 900ms both}

  /* One tip per hover or keyboard focus — the animation is only declared while
     the lockup is hovered/focused, so it plays once and never loops, and
     will-change goes away with it. The wordmark stays put. */
  .mk .brand:focus-visible .brand-mark{animation:mk-tip var(--t3) var(--ease);will-change:transform}
  @media (hover:hover){
    .mk .brand:hover .brand-mark{animation:mk-tip var(--t3) var(--ease);will-change:transform}
  }

  .mk .live-dot::after{animation:mk-pulse 2.4s var(--ease) infinite}
  .mk .tap-call::after{animation:mk-ring 2.4s var(--ease) infinite}
  .mk .caret::after{animation:mk-blink 1.1s linear infinite}
  .mk .tape-track{animation:mk-marquee 38s linear infinite}
  .mk .tape-band:hover .tape-track{animation-play-state:paused}

  @supports (animation-timeline:view()){
    .mk .trade{animation:mk-rise var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 28%}
    .mk .trade:nth-child(2){animation-range:entry 10% cover 34%}
    .mk .trade:nth-child(3){animation-range:entry 20% cover 40%}
    .mk .trade:nth-child(4){animation-range:entry 30% cover 46%}

    .mk .cell{animation:mk-rise-sm var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .mk .cell--site{animation-name:mk-reveal}
    .mk .cell:nth-child(2){animation-range:entry 8% cover 28%}
    .mk .cell:nth-child(3){animation-range:entry 8% cover 28%}
    .mk .cell:nth-child(5){animation-range:entry 8% cover 28%}
    .mk .cell:nth-child(6){animation-range:entry 16% cover 34%}

    .mk .plan-col{animation:mk-rise-sm var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 20%}
    .mk .plan-col:nth-child(2){animation-range:entry 6% cover 26%}
    .mk .plan-col:nth-child(3){animation-range:entry 12% cover 32%}

    /* how it works: the rail fills as the viewport centre moves through the list */
    .mk .steps{view-timeline:--mk-steps block}
    .mk .steps::after{animation:mk-fill linear both;animation-timeline:--mk-steps;animation-range:cover 50vh cover calc(100% - 50vh);transition:none}

    .mk .founder{view-timeline:--mk-founder block}
    .mk .founder-media img{animation:mk-parallax linear both;animation-timeline:--mk-founder;animation-range:cover 0% cover 100%}

    .mk .foot-mark-logo,
    .mk .foot-mark{animation:mk-mark var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 30%}

    /* section headlines rise through a mask. The .12em padding (given back by
       the margin) keeps ascenders and descenders inside the clip. */
    .mk .section-head h2,
    .mk .offer-copy h2,
    .mk .enquire-head h2{padding-block:.12em;margin-block:-.12em;animation:mk-mask var(--ease) both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }

  /* scroll progress: a hi-vis hairline inside the foot of the nav pill */
  @supports (animation-timeline:scroll()){
    .mk .mk-nav::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;background:var(--hivis);transform:scaleX(0);transform-origin:left center;pointer-events:none;animation:mk-progress linear both;animation-timeline:scroll(root)}
  }
}

@media (prefers-reduced-motion:reduce){
  .mk .hero-video{display:none}
  .mk .button:active,.mk .choice:active,.mk .approve-btn:active{transform:none}
  .mk .trade-video{display:none}
  .mk .cell:hover,.mk .plan-col:hover,.mk .trade:hover img{transform:none}
  .mk .plan-col--rec:hover{transform:translateY(-16px)}
  .mk .approve-pill,.mk .approve-tick,.mk .status-state,.mk .how-shot,.mk .slot-note,.mk .slot-chip::before{transition-duration:1ms;transition-delay:0ms}
  .mk .status-state,.mk .how-shot,.mk .slot-note{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:959px){
  .mk .plan-col--rec:hover{transform:none}
}

@media (prefers-reduced-transparency:reduce){
  .mk .mk-nav,
  .mk .approve,
  .mk .status-card,
  .mk .case{background:var(--tarmac);-webkit-backdrop-filter:none;backdrop-filter:none}
  .mk .mk-nav::before{background:var(--tarmac)}
}