/* ==========================================================================
   Kent.design 2.3.0 — the energy pass.
   Loaded last (after surf.css). Everything new for 2.3 lives here so the
   whole pass can be read, and reverted, in one file.
   ========================================================================== */

/* ==========================================================================
   STEP 1 — NAV: a floating ink panel.
   The old bar was a flat cream strip under the most energetic thing on the
   site. It is now a dark comic panel floating 14px off the top, carrying the
   only orange on screen: the free-preview button. It compacts after the first
   scroll, hides while you read down, and comes back the moment you scroll up.
   ========================================================================== */
:root{--nav-gap:14px;--nav-h:66px;--nav-clear:calc(var(--nav-gap) + var(--nav-h) + 14px)}
@media (max-width:880px){:root{--nav-gap:10px;--nav-h:58px}}

body.kd-light .nav,
body.kd-light.menu-open .nav{
  position:fixed;top:var(--nav-gap);left:0;right:0;margin:0 auto;z-index:100;
  width:min(1240px,calc(100% - 2 * var(--nav-gap)));
  background:var(--ink);border:3px solid var(--ink);border-radius:14px;
  box-shadow:6px 7px 0 rgba(3,17,20,.32);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
body.kd-light .nav.is-hidden{transform:translateY(calc(-100% - var(--nav-gap) - 12px))}
body.kd-light .nav-inner{width:auto;height:var(--nav-h);padding:0 13px 0 20px;gap:1.4rem;transition:height .3s cubic-bezier(.2,.8,.2,1)}
body.kd-light .nav.is-compact .nav-inner{height:calc(var(--nav-h) - 8px)}

/* logo — foam word, sky ".design", mark recoloured for the dark ground */
body.kd-light .nav .logo,
body.kd-light .nav .logo-word{color:var(--foam)}
body.kd-light .nav .logo-ai{color:var(--sky)}
body.kd-light .nav .logo-mark path{fill:var(--sky);stroke:var(--foam)}
body.kd-light .nav .logo{font-size:1.62rem}
body.kd-light .nav .logo-mark{width:38px;height:38px}

/* links */
body.kd-light .nav-links>a,
body.kd-light .nav-links .has-sub>a{color:var(--foam);font-weight:600}
body.kd-light .nav-links>a:hover,
body.kd-light .nav-links .has-sub>a:hover{color:var(--signal)}
body.kd-light .nav-links>a::after,
body.kd-light .nav-links .has-sub>a::after{
  display:block;content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)
}
body.kd-light .nav-links>a:hover::after,
body.kd-light .nav-links .has-sub>a:hover::after{transform:scaleX(1)}
body.kd-light .nav-links a[aria-current="page"]{color:var(--signal)}
body.kd-light .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* the dropdown keeps its foam comic card; its links must stay ink */
body.kd-light .nav-links .sub a{color:var(--ink)}
body.kd-light .nav-links .sub a::after{display:none}

/* the button — the one orange thing in the bar */
/* 2.4.1 — flat. The bar is already the comic panel; a ringed, shadowed button
   inside it read as a button in a button in a button. */
body.kd-light .nav-cta{
  flex:0 0 auto;padding:.7em 1.2em;font-size:.98rem;white-space:nowrap;
  border:0;border-radius:9px;box-shadow:none;
}
body.kd-light .nav-cta:hover{background:#d8955c;transform:none;box-shadow:none}
body.kd-light .nav-cta .nav-cta-short{display:none}
body.kd-light .burger i{background:var(--foam)}

@media (max-width:1080px){
  body.kd-light .nav-cta .nav-cta-long{display:none}
  body.kd-light .nav-cta .nav-cta-short{display:inline}
}
@media (max-width:880px){
  body.kd-light .nav-inner{padding:0 4px 0 14px;gap:.6rem}
  body.kd-light .nav .logo{font-size:1.38rem}
  body.kd-light .nav .logo-mark{width:32px;height:32px}
  body.kd-light .nav-cta{margin-left:auto;padding:.55em .9em;font-size:.88rem}
  body.kd-light .nav-cta .arrow{display:none}
  body.kd-light .mobile-menu{padding-top:calc(var(--nav-clear) + 1rem)}
}
@media (max-width:359px){ body.kd-light .nav-cta{display:none} }

/* Clearance. The nav is out of flow now, so <main> gives every template the
   room it used to take — and the two picture-tops (the surf hero and the
   sea heroes) pull back up under it, so the bar floats over artwork. */
body.kd-light #main{padding-top:var(--nav-clear)}
body.kd-light #main>.hero-surf:first-child,
body.kd-light #main>.hero-sea:first-child{margin-top:calc(-1 * var(--nav-clear))}
body.kd-light .hero-surf{height:100svh;min-height:600px}
body.kd-light .hero-sea{padding-top:calc(var(--nav-clear) + clamp(1.6rem,3.5vw,2.8rem))}
@media (max-width:760px){
  body.kd-light .hero-surf{height:min(92svh,100svh - 60px)}
}

/* Hero buttons: the free preview leads, how-it-works follows */
body.kd-light .caption .hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
body.kd-light .caption .btn-ghost{box-shadow:4px 5px 0 rgba(7,30,35,.35)}
@media (max-width:760px){
  body.kd-light .caption .hero-ctas{gap:.55rem .6rem}
  /* on a phone the second button becomes a plain link so the caption stays one row of action */
  body.kd-light .caption .btn-ghost{background:none;border:none;box-shadow:none;padding:.4em .2em;font-size:.95rem;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
  body.kd-light .caption .btn-ghost:hover{transform:none;box-shadow:none;background:none}
}
@media (prefers-reduced-motion:reduce){
  body.kd-light .nav,body.kd-light .nav-inner{transition:none}
}

/* ==========================================================================
   STEP 2 — SHOW THE WORK, NOT THE ROBOT.
   The surfbot now appears in the hero, the how-it-works film and the 404.
   Everywhere else the art is real output: demo homepages in a comic browser
   frame, the intake form drawn in HTML, the price set in type.
   ========================================================================== */

/* ---- browser frame ---- */
body.kd-light .mock{position:relative;display:block}
body.kd-light .mock-br{
  background:var(--ink);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);
}
body.kd-light .mb-bar{
  display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:var(--ink);
}
body.kd-light .mb-bar i{width:9px;height:9px;border-radius:50%;background:var(--steel);opacity:.7;flex:0 0 auto}
body.kd-light .mb-bar i:first-child{background:var(--signal);opacity:1}
body.kd-light .mb-bar em{
  flex:1 1 auto;margin-left:8px;font-style:normal;font-family:var(--font-body);font-size:.72rem;
  color:var(--sky);background:rgba(231,232,216,.08);border-radius:999px;padding:.18em .9em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;
}
body.kd-light .mb-live{
  margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:#7fd3b0;border-radius:999px;padding:.24em .75em .2em;display:inline-flex;align-items:center;gap:.4em
}
body.kd-light .mb-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);animation:kdPulse 1.6s ease-in-out infinite}
@keyframes kdPulse{50%{opacity:.25}}
body.kd-light .mock-br img{display:block;width:100%;height:auto;aspect-ratio:1400/734;object-fit:cover;object-position:top left}
body.kd-light .mb-stamp{
  position:absolute;right:6%;bottom:12%;z-index:2;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(.78rem,1.2vw,1rem);line-height:1;color:var(--signal);
  border:3px solid var(--signal);border-radius:6px;padding:.5em .75em .45em;background:rgba(238,236,221,.94);
  transform:rotate(-8deg);box-shadow:3px 4px 0 rgba(7,30,35,.6);
}
body.kd-light .mock-tilt{transform:rotate(-1.4deg)}

/* in a step card the frame IS the art, so the card loses its own chrome */
body.kd-light .steps-mock .step-art{background:none;border:none;box-shadow:none;overflow:visible;border-radius:0}
body.kd-light .steps-mock .step:hover .step-art{transform:translate(-2px,-4px) rotate(-.6deg);box-shadow:none}
body.kd-light .steps-mock .step-art .mock{height:100%}
body.kd-light .steps-mock .step:nth-child(2) .step-art .mock{transform:rotate(.8deg)}
body.kd-light .steps-mock .step:nth-child(3) .step-art .mock{transform:rotate(-.8deg)}
body.kd-light .steps-mock .step-art{aspect-ratio:auto}
body.kd-light .steps-mock .step h3{margin-top:1.3rem}

/* ---- the questionnaire, drawn ---- */
body.kd-light .mock-q{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;box-shadow:6px 7px 0 rgba(7,30,35,.85);
  padding:1.05rem 1.1rem 1.1rem;transform:rotate(-.8deg);font-family:var(--font-body);
  aspect-ratio:1.6;display:flex;flex-direction:column;justify-content:space-between;gap:.35rem;
}
body.kd-light .mq-top{display:flex;align-items:center;gap:.7rem;padding-left:1.6rem}
body.kd-light .mq-step{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sea);white-space:nowrap}
body.kd-light .mq-bar{flex:1;height:7px;border-radius:99px;background:rgba(7,30,35,.12);overflow:hidden}
body.kd-light .mq-bar i{display:block;height:100%;background:var(--signal);border-radius:inherit}
body.kd-light .mq-label{margin:.15rem 0 0;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.2}
body.kd-light .mq-chips{display:flex;flex-wrap:wrap;gap:.3rem}
body.kd-light .mq-chips span{font-size:.68rem;font-weight:600;padding:.28em .7em;border-radius:99px;border:2px solid rgba(7,30,35,.25);color:var(--muted)}
body.kd-light .mq-chips span.on{background:var(--ink);border-color:var(--ink);color:var(--foam)}
body.kd-light .mq-field{position:relative;font-size:.74rem;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:.45em .7em}
body.kd-light .mq-field i{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:kdPulse 1s steps(1) infinite}
body.kd-light .mq-next{align-self:flex-end;font-family:var(--font-display);font-weight:700;font-size:.78rem;background:var(--signal);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:.35em .9em;box-shadow:2px 3px 0 var(--ink)}

/* ---- before / after, overlapped ---- */
body.kd-light .mock-pair{position:relative;padding:0 0 14% 0}
body.kd-light .mock-pair .mock-br{position:relative}
body.kd-light .mp-before{width:78%;transform:rotate(-2.4deg);filter:saturate(.9)}
body.kd-light .mp-after{position:absolute!important;right:0;bottom:0;width:80%;transform:rotate(1.6deg);box-shadow:8px 10px 0 rgba(7,30,35,.85)}
body.kd-light .mp-tag{
  position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--foam);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:.3em .65em
}
body.kd-light .mp-tag-after{left:auto;right:10px;background:var(--signal)}

/* trade heroes: a real photo, cropped landscape */
body.kd-light .ph-panel.ph-photo img{aspect-ratio:4/3;object-fit:cover;object-position:80% 40%}
/* area rail: the frame sits inside the rail card */
body.kd-light .rail-art.rail-art-mock{border:none;box-shadow:none;background:none;overflow:visible;margin-bottom:1.3rem}
body.kd-light .rail-art.rail-art-mock .mock-br{box-shadow:4px 5px 0 rgba(7,30,35,.6)}
body.kd-light .rail-art.rail-art-mock .mb-stamp{font-size:.8rem;right:5%;bottom:10%}
/* pricing: "things we won't do" now runs on its own */
body.kd-light .pr-split.pr-split-solo{grid-template-columns:minmax(0,1fr);max-width:760px}

/* ---- the price ticket ---- */
body.kd-light .price-ticket{
  position:relative;background:var(--foam);border:3px solid var(--ink);border-radius:14px;
  box-shadow:10px 12px 0 rgba(7,30,35,.85);transform:rotate(-1.6deg);overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center;
}
body.kd-light .pt-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,94,109,.32) 1.6px,transparent 1.8px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 0,transparent 70%);
}
body.kd-light .pt-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem}
body.kd-light .pt-kicker{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
body.kd-light .pt-num{
  font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.06em;line-height:.82;
  font-size:clamp(6.5rem,13vw,10.5rem);margin:.35rem 0 .1rem;text-shadow:5px 6px 0 var(--signal);
}
body.kd-light .pt-num sup{font-size:.42em;vertical-align:.95em;margin-right:.04em;letter-spacing:0}
body.kd-light .pt-per{font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2vw,1.55rem);color:var(--ink)}
body.kd-light .pt-per small{font-size:.62em;color:var(--muted);font-weight:600}
body.kd-light .pt-rule{width:70%;border-top:3px dashed rgba(7,30,35,.35);margin:1rem 0 .8rem}
body.kd-light .pt-foot{font-size:.86rem;color:var(--muted)}
body.kd-light .pt-foot b{color:var(--ink)}
body.kd-light .pt-notch{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
body.kd-light .pt-notch-l{left:-18px}
body.kd-light .pt-notch-r{right:-18px}
body.kd-light .band-foam .pt-notch{background:var(--foam)}

/* ---- homepage FAQ lead: the punchline is the art now ---- */
body.kd-light .faq-lead.faq-lead-v23{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.kd-light .ai-callout.ai-callout-xl{padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.4rem);transform:rotate(-1.2deg);box-shadow:10px 12px 0 rgba(7,30,35,.85);margin:0}
body.kd-light .ai-callout.ai-callout-xl p{font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.12;letter-spacing:-.015em}
body.kd-light .ai-callout.ai-callout-xl p span{display:block;margin-top:.5rem;color:var(--signal)}
@media (max-width:900px){
  body.kd-light .faq-lead.faq-lead-v23{grid-template-columns:1fr}
}

/* ==========================================================================
   STEP 3 — DARK BANDS AND BIG NUMBERS.
   The page used to be 6,000px of paper and foam. Now the ticker, the numbers
   and how-it-works run as one dark block under the hero, the promises are two
   crossed tapes, and long inner pages get a night band in the middle.
   ========================================================================== */

/* ---- night band: sea-deep with a faint halftone ---- */
body.kd-light .band-night{
  position:relative;background-color:var(--sea-deep);color:var(--foam);
  background-image:radial-gradient(rgba(168,199,200,.10) 1.3px,transparent 1.5px);background-size:10px 10px;
}
body.kd-light .band-night h2,
body.kd-light .band-night h3,
body.kd-light .band-night .sec-head h2{color:var(--foam)}
body.kd-light .band-night h2 .accent,
body.kd-light .band-night h2 .grad,
body.kd-light .band-night h2 .grad-text{color:var(--signal);background:none;-webkit-text-fill-color:currentColor}
body.kd-light .band-night p,
body.kd-light .band-night .sec-head p{color:#c3d5d3}
body.kd-light .band-night .sec-tag{color:var(--sky)}
/* comic cards keep their foam faces on the dark ground and keep dark text */
body.kd-light .band-night .stat-card h3,body.kd-light .band-night .feat h3,body.kd-light .band-night .pain-card p,
body.kd-light .band-night .stat-card p,body.kd-light .band-night .feat p{color:var(--ink)}
body.kd-light .band-night .feat p,body.kd-light .band-night .stat-card p{color:#3f5c66}
body.kd-light .band-night .step-num{border-color:var(--foam)}
body.kd-light .band-night .mock-br{border-color:var(--foam);box-shadow:7px 8px 0 rgba(0,0,0,.45)}
body.kd-light .band-night .mock-q{box-shadow:7px 8px 0 rgba(0,0,0,.45)}
body.kd-light .band-night .mock-q p,body.kd-light .band-night .mock-q .mq-label{color:var(--ink)}

/* ---- stat band: numbers as a poster, on ink, continuous with the ticker ---- */
body.kd-light .stat-band.stat-band-v23{background:var(--ink);padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2rem,4vw,3rem);color:var(--foam)}
body.kd-light .stat-band-v23 .stat-row{gap:0}
body.kd-light .stat-band-v23 .stat{
  background:none;border:none;box-shadow:none;border-radius:0;padding:.4rem clamp(.8rem,2vw,1.6rem);text-align:left;
  border-left:2px dashed rgba(168,199,200,.28);
}
body.kd-light .stat-band-v23 .stat:first-child{border-left:none;padding-left:0}
body.kd-light .stat-band-v23 .stat:hover{transform:none;box-shadow:none}
body.kd-light .stat-band-v23 .stat-n{
  display:block;font-size:clamp(3.4rem,7.4vw,6.6rem);line-height:.86;letter-spacing:-.055em;color:var(--foam);
  text-shadow:4px 5px 0 var(--signal);font-variant-numeric:tabular-nums;
}
body.kd-light .stat-band-v23 .stat-n i{font-style:normal;font-size:.55em;vertical-align:.62em;margin-right:.03em;letter-spacing:0;text-shadow:none;color:var(--sky)}
body.kd-light .stat-band-v23 .stat-u{display:inline-block;margin-top:.7rem;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--signal)}
body.kd-light .stat-band-v23 .stat-l{margin-top:.15rem;color:var(--sky);font-size:.86rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){
  body.kd-light .stat-band-v23 .stat-row{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}
  body.kd-light .stat-band-v23 .stat:nth-child(3){border-left:none;padding-left:0}
}

/* ---- how-it-works on the night band ---- */
body.kd-light #how.band-night{padding-top:clamp(3rem,6vw,4.8rem);padding-bottom:clamp(3.6rem,7vw,5.6rem)}
body.kd-light #how.band-night .step>p{color:#c3d5d3}

/* ---- promises: two crossed tapes ---- */
body.kd-light .promises-tapes{padding:clamp(3.5rem,7vw,5.5rem) 0;overflow:hidden}
body.kd-light .tapes{position:relative;height:clamp(150px,18vw,230px)}
body.kd-light .tape{
  position:absolute;left:-4%;right:-4%;top:50%;overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
body.kd-light .tape-track{display:inline-flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);animation:surfTicker 40s linear infinite}
body.kd-light .tape-front{
  background:var(--signal);transform:translateY(-50%) rotate(-3.4deg);z-index:2;
  padding:clamp(.7rem,1.4vw,1.1rem) 0;box-shadow:0 8px 0 rgba(7,30,35,.85);
}
body.kd-light .tape-front span{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.6vw,3.1rem);letter-spacing:-.025em;color:var(--ink);text-transform:uppercase}
body.kd-light .tape-front b{font-size:clamp(1.2rem,2.4vw,2rem);color:var(--foam)}
body.kd-light .tape-back{
  background:var(--ink);transform:translateY(-50%) rotate(4.2deg);z-index:1;padding:.55rem 0;
}
body.kd-light .tape-back .tape-track{animation-direction:reverse;animation-duration:52s}
body.kd-light .tape-back span{font-family:var(--font-display);font-weight:700;font-size:clamp(.82rem,1.3vw,1.02rem);letter-spacing:.18em;text-transform:uppercase;color:var(--foam)}
body.kd-light .tape-back b{color:var(--signal);font-size:.9rem}
@media (prefers-reduced-motion:reduce){ body.kd-light .tape-track{animation:none} }
/* coverage map on the night band (About) */
body.kd-light .band-night .mp-land{stroke:rgba(168,199,200,.45)}
body.kd-light .band-night .mp-fill{fill:rgba(168,199,200,.14)}
body.kd-light .band-night .mp-kent{stroke:var(--foam)}
body.kd-light .band-night .mp-dot{fill:var(--sky)}
body.kd-light .band-night .mp-cdot{fill:var(--sky)}
body.kd-light .band-night .mp-core{stroke:var(--foam)}
body.kd-light .band-night .mp-label,body.kd-light .band-night .mp-clabel{fill:var(--foam)}
body.kd-light #how .mock-q .mq-label{color:var(--ink)}

/* ==========================================================================
   STEP 5 — INNER SECTIONS.
   ========================================================================== */

/* ---- how-it-works: the six steps as a sideways reel.
   No JS / reduced motion: a horizontal scroll-snap strip you can swipe.
   Desktop with JS: .is-pinned — the section gets scroll height and the
   track slides sideways as you scroll down. ---- */
body.kd-light .hiw-reel-sec{position:relative;padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,4.5rem)}
body.kd-light .reel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
body.kd-light .reel-head h2{margin:0;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.95;letter-spacing:-.03em}
body.kd-light .reel-progress{flex:0 0 min(320px,30vw);height:8px;border-radius:99px;background:rgba(7,30,35,.12);overflow:hidden;border:2px solid var(--ink)}
body.kd-light .reel-progress i{display:block;height:100%;width:var(--reel-p,0%);background:var(--signal)}
body.kd-light .reel-track{
  list-style:none;margin:0;display:flex;gap:clamp(1.4rem,2.6vw,2.4rem);
  padding:1.4rem max(4vw,calc((100vw - 1180px) / 2)) 2rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
body.kd-light .reel-track::-webkit-scrollbar{display:none}
body.kd-light .reel-card{flex:0 0 clamp(290px,36vw,540px);scroll-snap-align:start;position:relative}
body.kd-light .reel-art{position:relative}
body.kd-light .reel-art .step-num{position:absolute;top:-16px;left:-14px;z-index:3;width:50px;height:50px;font-size:1.4rem}
body.kd-light .reel-card:nth-child(odd) .reel-art .mock{transform:rotate(-1deg)}
body.kd-light .reel-card:nth-child(even) .reel-art .mock{transform:rotate(1deg)}
body.kd-light .reel-card .mock-q{transform:rotate(-1deg)}
body.kd-light .reel-card h3{margin:1.4rem 0 .35rem;font-size:clamp(1.25rem,1.8vw,1.5rem);color:var(--ink)}
body.kd-light .reel-card p{margin:0;color:var(--muted);font-size:1rem;max-width:32ch}
body.kd-light .reel-end{flex-basis:clamp(220px,22vw,300px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem}
body.kd-light .reel-card .reel-end-k{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--ink)!important;letter-spacing:-.03em}

body.kd-light .hiw-reel-sec.is-pinned{height:var(--reel-h,300vh);padding:0}
body.kd-light .hiw-reel-sec.is-pinned .reel-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--nav-clear)}
body.kd-light .hiw-reel-sec.is-pinned .reel-track{overflow:visible;scroll-snap-type:none;will-change:transform;transform:translateX(var(--reel-x,0px))}

/* new mock kinds */
body.kd-light .mock-hello{gap:.45rem}
body.kd-light .mock-hello .mq-field{font-size:.8rem}
body.kd-light .mock-reply{
  background:var(--foam);border:3px solid var(--ink);border-radius:10px;box-shadow:6px 7px 0 rgba(7,30,35,.85);
  aspect-ratio:1.6;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;position:relative;font-family:var(--font-body)
}
body.kd-light .mr-head{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);border-bottom:2px dashed rgba(7,30,35,.2);padding-bottom:.45rem;padding-left:1.4rem}
body.kd-light .mr-head b{color:var(--ink)}
body.kd-light .mr-bubble{max-width:78%;font-size:.86rem;line-height:1.35;padding:.55em .85em;border-radius:12px;border:2px solid var(--ink)}
body.kd-light .mr-them{background:var(--paper);color:var(--ink);border-bottom-left-radius:3px}
body.kd-light .mr-you{align-self:flex-end;background:var(--sea);color:var(--foam);border-bottom-right-radius:3px;font-weight:600}
body.kd-light .mr-stamp{position:absolute;left:1.2rem;bottom:.9rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#2e8a64;border:3px solid #2e8a64;border-radius:6px;padding:.25em .6em;transform:rotate(-10deg);font-size:1.05rem}
@media (max-width:760px){
  body.kd-light .reel-head{flex-direction:column;align-items:flex-start;gap:.8rem}
  body.kd-light .reel-progress{display:none}
  body.kd-light .reel-card{flex-basis:78vw}
  body.kd-light .reel-track{padding-left:28px;padding-right:28px;scroll-padding-left:28px}
}

/* ---- trade pages: three pains, set big on the night band ---- */
body.kd-light .pain-big{list-style:none;margin:clamp(1.6rem,3vw,2.6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.8rem)}
body.kd-light .pain-big li{border-top:3px solid rgba(168,199,200,.35);padding-top:1.1rem}
body.kd-light .pb-n{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(3.4rem,6vw,5.2rem);line-height:.9;color:var(--signal);letter-spacing:-.05em;text-shadow:4px 5px 0 rgba(0,0,0,.35)}
body.kd-light .band-night .pain-big p{margin:.8rem 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,1.6vw,1.36rem);line-height:1.3;color:var(--foam)}
body.kd-light .pains-sec{padding-top:clamp(3rem,6vw,4.6rem);padding-bottom:clamp(3.4rem,6vw,5rem)}
@media (max-width:820px){ body.kd-light .pain-big{grid-template-columns:1fr} }

/* ---- trade pages: the spec-sheet receipt ---- */
body.kd-light .needs-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
body.kd-light .needs-copy h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02}
body.kd-light .needs-copy p{color:var(--muted);margin:1rem 0 1.6rem;font-size:1.08rem}
body.kd-light .receipt{
  position:relative;background:var(--foam);border:3px solid var(--ink);border-radius:6px;
  box-shadow:10px 12px 0 rgba(7,30,35,.85);transform:rotate(1.4deg);padding:1.6rem 1.7rem 1.4rem;
  font-family:var(--font-body);
}
body.kd-light .rc-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double var(--ink);padding-bottom:.7rem;margin-bottom:.4rem}
body.kd-light .rc-k{font-family:var(--font-display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--sea)}
body.kd-light .rc-t{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
body.kd-light .rc-list{list-style:none;margin:0;padding:0}
body.kd-light .rc-list li{display:grid;grid-template-columns:28px 1fr auto;gap:.75rem;align-items:center;padding:.66rem 0;border-bottom:2px dashed rgba(7,30,35,.18)}
body.kd-light .rc-ico{width:26px;height:26px;color:var(--sea)}
body.kd-light .rc-ico svg{width:100%;height:100%}
body.kd-light .rc-txt{font-size:.95rem;line-height:1.35;color:var(--ink)}
body.kd-light .rc-inc{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#2e7a5a;white-space:nowrap}
body.kd-light .rc-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:.9rem;font-family:var(--font-display);font-weight:700;color:var(--ink)}
body.kd-light .rc-total span{letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
body.kd-light .rc-total b{font-size:2.4rem;letter-spacing:-.04em;text-shadow:3px 4px 0 var(--signal)}
body.kd-light .rc-total small{font-size:.45em;letter-spacing:0;text-shadow:none;color:var(--muted)}
body.kd-light .rc-foot{margin:.2rem 0 0;text-align:right;font-size:.82rem;color:var(--muted)}
@media (max-width:900px){ body.kd-light .needs-split{grid-template-columns:1fr} body.kd-light .receipt{transform:rotate(.6deg)} }

/* ---- page tops: every page gets the card-over-art top, and the scene
   changes by page instead of one cliff everywhere ---- */
body.kd-light .hero-sea-areashub{background-image:url(../surf/sea-band-day.webp);background-position:center 60%;background-size:cover}
body.kd-light .hero-sea-faq{background-image:url(../surf/sea-band-day.webp);background-position:30% 70%;background-size:cover}
body.kd-light .hero-sea-contact,
body.kd-light .hero-sea-blog{background-image:url(../surf/sea-band.webp);background-color:#0b2a31;background-position:center 55%;background-size:cover}
body.kd-light .hero-sea-tradeshub{background-position:85% 35%;background-size:135%}
body.kd-light .hero-sea-contact .ph-grid,body.kd-light .hero-sea-tradeshub .ph-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,4vw,3.4rem)}
@media (max-width:820px){ body.kd-light .hero-sea-contact .ph-grid,body.kd-light .hero-sea-tradeshub .ph-grid{grid-template-columns:1fr} }

/* ---- hubs: no orphan rows, real work on the trade tiles ---- */
body.kd-light .hub-sec{padding-top:clamp(2.4rem,5vw,3.6rem);padding-bottom:clamp(3.4rem,6vw,5rem)}
body.kd-light .hub-grid-v23{display:grid;gap:clamp(1rem,2vw,1.6rem)}
body.kd-light .hub-trades{grid-template-columns:repeat(4,minmax(0,1fr))}
body.kd-light .hv-card{
  position:relative;display:flex;flex-direction:column;background:var(--foam);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(7,30,35,.85);color:var(--ink);text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1)
}
body.kd-light .hv-card:nth-child(odd){transform:rotate(-.6deg)}
body.kd-light .hv-card:nth-child(even){transform:rotate(.6deg)}
body.kd-light .hv-card:hover{transform:translate(-3px,-5px) rotate(0);box-shadow:10px 12px 0 rgba(7,30,35,.85)}
body.kd-light .hv-shot{display:block;background:var(--ink)}
body.kd-light .hv-shot .mb-bar{height:24px}
body.kd-light .hv-shot img{display:block;width:100%;height:auto!important;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body.kd-light .hv-card:hover .hv-shot img{transform:scale(1.05)}
body.kd-light .hv-body{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 3rem 1.1rem 1rem}
body.kd-light .hv-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem}
body.kd-light .hv-note{font-size:.84rem;color:var(--muted);line-height:1.35}
body.kd-light .hv-go{position:absolute;right:.8rem;bottom:.8rem;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--foam);display:grid;place-items:center;font-size:.9rem}
body.kd-light .hv-cta{background:var(--signal);justify-content:center;padding:1.4rem 1.3rem;gap:.5rem}
body.kd-light .hv-cta-k{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.02em}
body.kd-light .hv-cta-t{font-size:.95rem;font-weight:600;line-height:1.35}
body.kd-light .hv-cta-go{margin-top:.6rem;font-family:var(--font-display);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
body.kd-light .hub-towns{grid-template-columns:repeat(7,minmax(0,1fr))}
body.kd-light .hv-town{
  display:flex;flex-direction:column;background:var(--foam);border:3px solid var(--ink);border-radius:8px;overflow:hidden;
  box-shadow:4px 5px 0 rgba(7,30,35,.85);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s
}
body.kd-light .hv-town:nth-child(3n){transform:rotate(.8deg)}
body.kd-light .hv-town:nth-child(3n+1){transform:rotate(-.7deg)}
body.kd-light .hv-town:hover{transform:translate(-2px,-4px) rotate(0);box-shadow:7px 9px 0 rgba(7,30,35,.85)}
body.kd-light .hv-town img{display:block;width:100%;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--ink)}
body.kd-light .hv-town span{padding:.55rem .6rem .65rem;font-family:var(--font-display);font-weight:700;font-size:.92rem;text-align:center}
body.kd-light .hv-town-cta{background:var(--signal);justify-content:center;align-items:center;text-align:center;padding:1rem .6rem;gap:.3rem}
body.kd-light .hv-town-cta b{font-family:var(--font-display);font-size:1.05rem;line-height:1.15}
body.kd-light .hv-town-cta span{padding:0;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){ body.kd-light .hub-trades{grid-template-columns:repeat(2,minmax(0,1fr))} body.kd-light .hub-towns{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:620px){ body.kd-light .hub-towns{grid-template-columns:repeat(2,minmax(0,1fr))} }
body.kd-light .hub-night{padding:clamp(3.4rem,7vw,5.4rem) 0}
body.kd-light .hub-night-in{text-align:center}
body.kd-light .hub-night h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.03em;margin-bottom:1.2rem}
body.kd-light .hub-night p{font-size:1.1rem}
body.kd-light .hub-night a{color:var(--signal);font-weight:700}

/* ---- area pages: the long copy as an article ---- */
body.kd-light .area-body .kd-editor{counter-reset:kdsec;font-size:1.06rem}
body.kd-light .area-body-sec .area-body .kd-editor > h2:first-child + p{font-size:clamp(1.2rem,1.7vw,1.38rem);line-height:1.55;color:var(--ink);font-weight:500}
body.kd-light .area-body-sec .area-body .kd-editor > h2:first-child + p::first-letter{float:left;font-family:var(--font-display);font-weight:700;font-size:4.2em;line-height:.8;margin:.06em .1em 0 0;color:var(--sea);text-shadow:3px 4px 0 var(--signal)}
body.kd-light .area-body .kd-editor h2{
  counter-increment:kdsec;position:relative;margin-top:2.8rem;padding-top:1.1rem;border-top:3px solid var(--ink);
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1
}
body.kd-light .area-body .kd-editor h2::before{content:counter(kdsec,decimal-leading-zero);display:block;font-size:.8rem;letter-spacing:.16em;color:var(--signal);margin-bottom:.45rem}
body.kd-light .area-body-sec .area-body .kd-editor p,body.kd-light .area-body-sec .area-body .kd-editor li{font-size:1.06rem;line-height:1.72;max-width:68ch;color:#33525b}
body.kd-light .area-body-sec .area-body .kd-editor h2 + p{font-size:1.16rem;color:var(--ink)}
body.kd-light .area-body-sec .area-body .kd-editor > h2:first-child{border-top:none;padding-top:0;margin-top:0}

/* ---- gaps: the homepage FAQ no longer carries a 170px tail ---- */
body.kd-light #faq.sec-break{padding-bottom:clamp(3.4rem,6vw,5rem)}
body.kd-light .hero-sea-smallbiz{background-position:30% 40%;background-size:140%}
body.kd-light .hero-sea-smallbiz .ph-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,4vw,3.4rem)}
@media (max-width:820px){ body.kd-light .hero-sea-smallbiz .ph-grid{grid-template-columns:1fr} }
body.kd-light .sb-options{padding:clamp(3rem,6vw,4.6rem) 0 clamp(3.4rem,6vw,5rem)}
body.kd-light .band-night .pain-big a{color:var(--signal)}

/* ---- FAQ page: sticky contents rail + grouped answers ---- */
body.kd-light .faq-page-sec{padding:clamp(2.6rem,5vw,4rem) 0 clamp(3.6rem,7vw,5.6rem)}
body.kd-light .faq-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
body.kd-light .faq-rail{position:sticky;top:calc(var(--nav-clear) + 1rem);display:grid;gap:1.4rem}
body.kd-light .faq-toc{display:grid;background:var(--ink);border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:6px 7px 0 rgba(7,30,35,.35)}
body.kd-light .faq-toc a{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.9rem 1rem;color:var(--foam);text-decoration:none;border-top:1px solid rgba(168,199,200,.18);font-family:var(--font-display);font-weight:600}
body.kd-light .faq-toc a:first-child{border-top:none}
body.kd-light .faq-toc a:hover{background:rgba(196,126,69,.16)}
body.kd-light .ft-n{color:var(--signal);font-weight:700}
body.kd-light .ft-c{font-size:.75rem;background:rgba(168,199,200,.16);color:var(--sky);border-radius:99px;padding:.15em .6em}
body.kd-light .faq-ask{background:var(--foam);border:3px solid var(--ink);border-radius:10px;padding:1.2rem;box-shadow:6px 7px 0 rgba(7,30,35,.85);transform:rotate(-1deg)}
body.kd-light .faq-ask p{margin:0 0 .9rem;color:var(--muted)}
body.kd-light .faq-ask strong{color:var(--ink)}
body.kd-light .faq-group{scroll-margin-top:calc(var(--nav-clear) + 1rem)}
body.kd-light .faq-group + .faq-group{margin-top:clamp(2.4rem,5vw,3.6rem)}
body.kd-light .faq-group-t{display:flex;align-items:baseline;gap:.8rem;font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 1.1rem;color:var(--ink)}
body.kd-light .faq-group-t span{font-size:.55em;color:var(--signal);letter-spacing:.06em}
@media (max-width:900px){
  body.kd-light .faq-layout{grid-template-columns:1fr}
  body.kd-light .faq-rail{position:static}
  body.kd-light .faq-ask{display:none}
}

/* ==========================================================================
   2.4.0 — HOW IT WORKS: the film is the hero.
   Card left, film right on desktop; stacked below 1000px. The film carries
   burned-in captions, so it autoplays muted when it's on screen (not with
   reduced motion or Save-Data) and sound is one tap. No JS = a plain player.
   2.4.5: the inline player is gone. The film opens from a splash; see the
   2.4.5 block at the end of this file.
   ========================================================================== */
body.kd-light .hiw2 [hidden]{display:none!important}
body.kd-light .hiw2{padding-bottom:clamp(5.6rem,8vw,7.4rem)}
body.kd-light .hiw2 .hiw2-grid{width:min(1320px,94vw);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(1.6rem,3vw,2.8rem);align-items:center}
body.kd-light .hiw2 .hiw2-card{max-width:none}
body.kd-light .hiw2 .hiw2-card h1{font-size:clamp(2.1rem,3.4vw,3.2rem)}
body.kd-light .hiw2 .hiw2-ctas{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap}
body.kd-light .hiw2 .hiw2-ctas .btn{white-space:nowrap}
body.kd-light .hiw2 .hiw2-watch{display:none;align-items:center;gap:.5rem;cursor:pointer;font:inherit;font-family:var(--font-display);font-weight:600}
body.kd-light .hiw2.js-on .hiw2-watch{display:inline-flex}
body.kd-light .hiw2-watch svg{width:15px;height:15px;fill:currentColor;flex:none}
body.kd-light .hiw2-film{margin:0;min-width:0}
body.kd-light .hiw2-script summary:focus-visible{outline:4px solid var(--sea);outline-offset:3px}
/* the script, for reading and for search */
body.kd-light .hiw2-cap{margin-top:1.1rem;text-align:right}
body.kd-light .hiw2-script summary{display:inline-flex;align-items:center;gap:.5rem;list-style:none;cursor:pointer;background:var(--foam);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;padding:.45rem 1.05rem;font-family:var(--font-display);font-weight:700;font-size:.9rem;
  box-shadow:4px 5px 0 rgba(3,17,20,.75)}
body.kd-light .hiw2-script summary::-webkit-details-marker{display:none}
body.kd-light .hiw2-script summary::after{content:"+";font-size:1.1em;line-height:1}
body.kd-light .hiw2-script[open] summary::after{content:"\2212"}
body.kd-light .hiw2-script-body{margin-top:.9rem;text-align:left;background:var(--foam);border:3px solid var(--ink);border-radius:12px;
  box-shadow:8px 9px 0 rgba(3,17,20,.75);padding:1.2rem 1.4rem;font-size:1rem;line-height:1.6;color:var(--ink)}
body.kd-light .hiw2-script-body p+p{margin-top:.45rem}
@media (max-width:1000px){
  body.kd-light .hiw2 .hiw2-grid{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:640px){
  /* on phones the splash sits right under the card; a second watch button would only push it below the fold */
  body.kd-light .hiw2.js-on .hiw2-watch{display:none}
  body.kd-light .hiw2-cap{text-align:left}
  body.kd-light .hiw2 .hiw2-ctas .btn{flex:1 1 100%;justify-content:center}
}

/* ==========================================================================
   2.4.1 — /bigger-projects/ (the catch-net for work the £79 doesn't cover)
   ========================================================================== */
body.kd-light .hero-sea-big{background-position:30% 58%;background-size:135%}
body.kd-light .bp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ body.kd-light .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ body.kd-light .bp-grid{grid-template-columns:1fr} }
body.kd-light .bp-how{padding:clamp(3.4rem,7vw,5rem) 0}
body.kd-light .bp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem);counter-reset:none}
body.kd-light .bp-step{position:relative;background:var(--foam);color:var(--ink);border:3px solid var(--ink);border-radius:14px;
  box-shadow:8px 9px 0 rgba(3,17,20,.6);padding:2.6rem 1.5rem 1.6rem}
body.kd-light .bp-step .step-num{position:absolute;top:-24px;left:18px;transform:rotate(-6deg)}
body.kd-light .bp-step h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--ink)}
body.kd-light .bp-step p{color:var(--muted);margin:0;line-height:1.55}
@media (max-width:820px){ body.kd-light .bp-steps{grid-template-columns:1fr;gap:2.2rem;max-width:520px;margin:0 auto} }
body.kd-light .bp-extras{list-style:none;margin:0 auto clamp(2.6rem,5vw,3.6rem);padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;max-width:980px}
body.kd-light .bp-extras li{background:var(--foam);border:2.5px solid var(--ink);border-radius:999px;padding:.6rem 1.15rem;
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);box-shadow:4px 5px 0 rgba(7,30,35,.35)}
body.kd-light .bp-extras a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
body.kd-light .bp-faq{max-width:1080px;margin:0 auto}
body.kd-light .ph-panel img{display:block;width:100%;height:auto}

/* ==========================================================================
   2.4.3 — "For your trade" dropdown: ONE panel. Cut-out trade art, a bold name
   and one line; no tiles, no inner borders, no icon roundels.
   ========================================================================== */
body.kd-light .nav-links .sub.sub-trades{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1.2rem;
  width:680px;min-width:0;padding:1rem 1.3rem 1.1rem;
  background:var(--foam);border:3px solid var(--ink);border-radius:14px;box-shadow:8px 9px 0 rgba(7,30,35,.85);
}
body.kd-light .nav-links .sub-trades a.st{
  display:flex;align-items:center;gap:.9rem;padding:.45rem .3rem;border-radius:0;background:none;white-space:normal;color:var(--ink)
}
body.kd-light .nav-links .sub-trades a.st:hover{background:none;color:var(--ink)}
body.kd-light .sub-trades .st-art{width:72px;height:60px;flex:none;display:grid;place-items:center}
body.kd-light .sub-trades .st-art img{max-width:72px;max-height:60px;width:auto;height:auto;display:block;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
body.kd-light .sub-trades a.st:hover .st-art img{transform:translateY(-3px) rotate(-3deg)}
body.kd-light .sub-trades .st-txt b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
body.kd-light .sub-trades a.st:hover .st-txt b{color:var(--sea)}
body.kd-light .sub-trades .st-txt i{display:block;font-style:normal;font-family:var(--font-body);font-weight:500;font-size:.82rem;line-height:1.35;color:var(--muted);margin-top:.12rem}
body.kd-light .nav-links .sub-trades a.st-all{
  display:flex;align-items:center;gap:.45rem;padding:.45rem .3rem .45rem 1rem;background:none;border:0;border-radius:0;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--sea);white-space:nowrap
}
body.kd-light .nav-links .sub-trades a.st-all span{color:var(--signal);transition:transform .2s}
body.kd-light .nav-links .sub-trades a.st-all:hover{background:none;color:var(--ink)}
body.kd-light .nav-links .sub-trades a.st-all:hover span{transform:translateX(4px)}
body.kd-light .nav-links .sub-trades a::after{display:none}

/* ==========================================================================
   2.4.4 — trade dropdown, take two.
   One box only: the inherited .sub::before already paints the bordered card
   (and the 14px transparent strip above it is the hover bridge to the caret),
   so the panel itself goes back to transparent. Robot cut-outs swapped for
   simple inline icons on a soft paper disc: no border, so no box-in-box.
   ========================================================================== */
body.kd-light .nav-links .sub.sub-trades{
  background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:calc(14px + 1rem) 1.3rem 1.1rem;gap:.35rem 1.2rem;width:640px;
}
body.kd-light .nav-links .sub.sub-trades::before{border-radius:14px;box-shadow:8px 9px 0 rgba(7,30,35,.85)}
body.kd-light .sub-trades .st-art{width:56px;height:56px;border-radius:50%;background:var(--paper);display:grid;place-items:center;flex:none;transition:background .2s}
body.kd-light .sub-trades .st-ico{width:34px;height:34px;display:block;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
body.kd-light .sub-trades .st-ico .a{fill:var(--signal)}
body.kd-light .sub-trades .st-ico .s{fill:none;stroke:var(--signal)}
body.kd-light .sub-trades .st-ico .d{stroke-width:3.4}
body.kd-light .sub-trades a.st:hover .st-art{background:#fff}
body.kd-light .sub-trades a.st:hover .st-ico{transform:translateY(-2px) rotate(-6deg)}
@media (prefers-reduced-motion:reduce){body.kd-light .sub-trades a.st:hover .st-ico{transform:none}}

/* ==========================================================================
   2.4.5 — HOW IT WORKS: the film opens from a splash.
   No more inline autoplay. The right column is a designed splash: an ink
   title panel with a wave edge over the poster, and one big orange play disc
   sitting on the wave. Clicking it opens the film full screen in a <dialog>
   with sound; it ends on a "your turn" card. No JS = the splash links to the MP4.
   ========================================================================== */
body.kd-light .hiw2-splash{--seam:44%;--disc:clamp(76px,8.4vw,112px);position:relative;display:block;aspect-ratio:16/9;
  border:3px solid var(--ink);border-radius:14px;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--foam);
  text-decoration:none;box-shadow:12px 14px 0 rgba(3,17,20,.75);cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
body.kd-light .hiw2-splash:hover{transform:translate(-3px,-3px);box-shadow:15px 17px 0 rgba(3,17,20,.75)}
body.kd-light .hiw2-splash:focus-visible{outline:4px solid var(--sea);outline-offset:5px}
body.kd-light .hiw2-splash-art{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--seam));overflow:hidden;background:var(--paper)}
body.kd-light .hiw2-splash-art img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 50%;
  transform-origin:65% 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
body.kd-light .hiw2-splash:hover .hiw2-splash-art img{transform:scale(1.04)}
/* the title panel: ink, faint halftone, a wave down its right edge */
body.kd-light .hiw2-splash-copy{position:absolute;left:0;top:0;bottom:0;width:var(--seam);z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(1.1rem,2.4vw,2.1rem) clamp(1.6rem,3.4vw,2.8rem) clamp(1.1rem,2.2vw,1.8rem) clamp(1.1rem,2.4vw,2.1rem);background:var(--ink)}
/* halftone fades out before the wave, so the wave never has to match the dots */
body.kd-light .hiw2-splash-copy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(168,199,200,.17) 1px,transparent 1.5px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(100deg,#000 30%,transparent 88%);mask:linear-gradient(100deg,#000 30%,transparent 88%)}
body.kd-light .hiw2-splash-copy::after{content:"";position:absolute;top:0;bottom:0;left:calc(100% - 1px);width:27px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0H13C26 18 26 37 13 55C0 73 0 92 13 110H0Z'/%3E%3C/svg%3E") 0 0/26px 110px repeat-y;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 110' preserveAspectRatio='none'%3E%3Cpath d='M0 0H13C26 18 26 37 13 55C0 73 0 92 13 110H0Z'/%3E%3C/svg%3E") 0 0/26px 110px repeat-y}
body.kd-light .hiw2-splash-tag{display:inline-block;background:var(--signal);color:var(--ink);font-family:var(--font-display);font-weight:700;
  font-size:clamp(.68rem,.85vw,.8rem);letter-spacing:.09em;text-transform:uppercase;line-height:1;padding:.42rem .65rem .38rem;border-radius:4px;
  transform:rotate(-2.5deg);box-shadow:3px 4px 0 rgba(0,0,0,.4)}
body.kd-light .hiw2-splash-title{display:block;margin-top:auto;font-family:var(--font-display);font-weight:700;color:var(--foam);
  font-size:clamp(1.35rem,2.35vw,2.3rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
body.kd-light .hiw2-splash-title em{font-style:normal;color:var(--signal)}
body.kd-light .hiw2-splash-sub{display:block;margin-top:.7rem;color:var(--sky);font-size:clamp(.85rem,1.05vw,1rem);line-height:1.4;max-width:24ch}
body.kd-light .hiw2-splash-meta{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;color:var(--sky);font-family:var(--font-display);
  font-weight:600;font-size:clamp(.7rem,.85vw,.8rem);letter-spacing:.08em;text-transform:uppercase;line-height:1}
body.kd-light .hiw2-splash-meta svg{width:17px;height:17px;fill:currentColor;flex:none}
/* the play disc, centred on the wave */
body.kd-light .hiw2-play{position:absolute;z-index:2;left:calc(var(--seam) + 12px);top:50%;width:var(--disc);height:var(--disc);
  transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:var(--signal);border:3px solid var(--ink);
  box-shadow:0 0 0 5px var(--foam),0 0 0 8px var(--ink),9px 11px 0 8px rgba(3,17,20,.6);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s}
body.kd-light .hiw2-play svg{width:42%;height:42%;fill:var(--ink);margin-left:7%}
body.kd-light .hiw2-play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--foam);opacity:0;
  animation:hiwPing 2.6s cubic-bezier(.2,.7,.3,1) 1.2s infinite;pointer-events:none}
@keyframes hiwPing{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.55);opacity:0}}
body.kd-light .hiw2-splash:hover .hiw2-play,body.kd-light .hiw2-splash:focus-visible .hiw2-play{transform:translate(-50%,-50%) scale(1.07);background-color:#d08a52}
@media (max-width:640px){
  body.kd-light .hiw2-splash{--disc:68px;aspect-ratio:auto;display:grid;grid-template-areas:"art" "copy";border-radius:10px;box-shadow:7px 8px 0 rgba(3,17,20,.75)}
  body.kd-light .hiw2-splash:hover{transform:none;box-shadow:7px 8px 0 rgba(3,17,20,.75)}
  body.kd-light .hiw2-splash-art{grid-area:art;position:relative;width:100%;aspect-ratio:16/9}
  body.kd-light .hiw2-splash-art img{object-position:50% 50%}
  body.kd-light .hiw2-splash-copy{grid-area:copy;position:relative;width:auto;padding:1.15rem 1.1rem 1.1rem}
  body.kd-light .hiw2-splash-copy::after{top:auto;bottom:calc(100% - 1px);left:0;right:0;width:auto;height:14px;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9C18 0 37 0 55 9C73 18 92 18 110 9V18Z'/%3E%3C/svg%3E") 0 0/110px 14px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9C18 0 37 0 55 9C73 18 92 18 110 9V18Z'/%3E%3C/svg%3E") 0 0/110px 14px repeat-x}
  body.kd-light .hiw2-splash-title{margin-top:.85rem;font-size:1.5rem;max-width:15ch}
  body.kd-light .hiw2-splash-sub{display:none}
  body.kd-light .hiw2-splash-meta{margin-top:.8rem}
  body.kd-light .hiw2-play{grid-area:art;position:relative;left:auto;top:auto;align-self:end;justify-self:end;
    margin:0 18px calc(var(--disc) / -2 - 4px) 0;transform:none}
  body.kd-light .hiw2-splash:hover .hiw2-play,body.kd-light .hiw2-splash:focus-visible .hiw2-play{transform:scale(1.05)}
}

/* the film, full screen */
html.hiw-lock{overflow:hidden}
body.kd-light .hiw-modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:clamp(.75rem,3vw,2.4rem);background:transparent;color:var(--foam);overflow:auto}
body.kd-light .hiw-modal[open]{display:grid;place-items:center}
body.kd-light .hiw-modal::backdrop{background:rgba(4,22,26,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body.kd-light .hiw-modal-in{width:min(1240px,100%,calc((100svh - 8.5rem) * 16 / 9))}
body.kd-light .hiw-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
body.kd-light .hiw-modal-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--foam);
  display:flex;align-items:center;gap:.6rem;line-height:1.2}
body.kd-light .hiw-modal-title span{border:2px solid var(--sky);color:var(--sky);border-radius:999px;padding:.12rem .55rem;font-size:.8em}
body.kd-light .hiw-modal-x{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;background:var(--foam);color:var(--ink);
  border:3px solid var(--ink);border-radius:999px;padding:.5rem 1.05rem .5rem .8rem;font-family:var(--font-display);font-weight:700;
  font-size:.95rem;line-height:1;box-shadow:4px 5px 0 var(--sea);transition:transform .2s,box-shadow .2s}
body.kd-light .hiw-modal-x svg{width:16px;height:16px;flex:none}
body.kd-light .hiw-modal-x:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--sea)}
body.kd-light .hiw-modal-x:focus-visible,body.kd-light .hiw-modal-end .btn:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
body.kd-light .hiw-modal-frame{position:relative;aspect-ratio:16/9;border:3px solid var(--foam);border-radius:14px;overflow:hidden;
  background:var(--ink);box-shadow:12px 14px 0 var(--sea);line-height:0}
body.kd-light .hiw-modal-frame video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
body.kd-light .hiw-modal-end{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1.4rem;padding:1.5rem;
  text-align:center;line-height:1.2;color:var(--ink);background:radial-gradient(rgba(7,30,35,.07) 1px,transparent 1.5px) 0 0/9px 9px,rgba(238,236,221,.96)}
body.kd-light .hiw-modal-end-h{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.9rem);letter-spacing:-.015em;line-height:1.05}
body.kd-light .hiw-modal-end-h span{color:var(--sea)}
body.kd-light .hiw-modal-end-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
body.kd-light .hiw-modal-end-ctas .btn{white-space:nowrap;cursor:pointer;font-family:var(--font-display)}
body.kd-light .hiw-modal[open] .hiw-modal-in{animation:hiwIn .38s cubic-bezier(.2,.8,.2,1)}
body.kd-light .hiw-modal[open]::backdrop{animation:hiwFade .3s ease}
@keyframes hiwIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hiwFade{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  body.kd-light .hiw-modal-frame{border-width:2px;border-radius:10px;box-shadow:6px 7px 0 var(--sea)}
  body.kd-light .hiw-modal-x{padding:.42rem .85rem .42rem .65rem;font-size:.88rem}
  body.kd-light .hiw-modal-end{gap:.9rem;padding:1rem}
  body.kd-light .hiw-modal-end-ctas .btn{padding:.6rem 1rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  body.kd-light .hiw2-play::before{animation:none}
  body.kd-light .hiw2-splash,body.kd-light .hiw2-splash-art img,body.kd-light .hiw2-play{transition:none}
  body.kd-light .hiw2-splash:hover .hiw2-splash-art img{transform:none}
  body.kd-light .hiw-modal[open] .hiw-modal-in,body.kd-light .hiw-modal[open]::backdrop{animation:none}
}

/* ==========================================================================
   2.5.0 — TRADE PAGES: problem → reaction → solution.
   Hero: the trade drawing is the scene, melting into the page (no card, no
   divider). Mirror: the demo holds on the "before" with three pains under it;
   "Show me it fixed" flips it and each pain gets a Sorted stamp. Then three
   outcomes on night, then the price with the payback sum, then the form.
   ========================================================================== */
/* ---- hero ---- */
body.kd-light .td-hero{position:relative;overflow:hidden;background:var(--foam);margin-top:calc(-1 * var(--nav-clear));
  padding:calc(var(--nav-clear) + clamp(2.4rem,7vh,5rem)) 0 clamp(3rem,6vw,5rem);min-height:clamp(560px,74vh,720px)}
body.kd-light .td-hero-scene{position:absolute;top:0;right:0;bottom:0;width:66%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,#000 62%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,#000 62%,transparent 100%);mask-composite:intersect}
body.kd-light .td-hero-scene picture{display:block;width:100%;height:100%}
body.kd-light .td-hero-scene img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
/* a halftone dither where the drawing fades, so it dissolves the way the print does */
body.kd-light .td-hero-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(231,232,216,.9) 1.4px,transparent 2px) 0 0/8px 8px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 34%);mask-image:linear-gradient(90deg,#000 0,transparent 34%)}
body.kd-light .td-hero-in{position:relative;z-index:1;width:min(1240px,92vw);margin:0 auto}
body.kd-light .td-hero-copy{max-width:min(540px,44vw)}
body.kd-light .td-hero .sec-tag{display:block;margin-bottom:1rem}
body.kd-light .td-hero h1{margin:0;font-size:clamp(2.5rem,4.4vw,4.3rem);line-height:1;letter-spacing:-.025em;text-wrap:balance}
body.kd-light .td-hero h1 .grad{color:var(--sea);background:none;-webkit-text-fill-color:currentColor}
body.kd-light .td-hero-lead{margin:1.3rem 0 0;font-size:clamp(1.08rem,1.35vw,1.25rem);line-height:1.55;color:var(--muted);max-width:34ch}
body.kd-light .td-hero-ctas{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}
body.kd-light .td-hero-ctas .btn{white-space:nowrap}
body.kd-light .td-hero-down{font-family:var(--font-display);font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:var(--signal)}
body.kd-light .td-hero-down span{display:inline-block;margin-left:.3rem}
body.kd-light .td-hero-down:focus-visible{outline:3px solid var(--sea);outline-offset:4px}
body.kd-light .td-mirror{padding-top:clamp(1rem,2.5vw,2rem);scroll-margin-top:var(--nav-clear)}
@media (max-width:900px){
  /* 2.5.1 — the scene runs to the top of the screen and the bar floats over it, as on desktop.
     Phones load hero-illus-m.webp (960x749): the same drawing outpainted upward, so the top
     ~25% is sky or ceiling and the bar never sits on a head. Box = that image's own ratio. */
  body.kd-light .td-hero{min-height:0;padding:0 0 clamp(2.6rem,7vw,3.4rem)}
  body.kd-light .td-hero-scene{position:relative;width:100%;height:min(78vw,600px);
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg,#000 68%,transparent 100%);mask-composite:add}
  body.kd-light .td-hero-scene img{object-position:70% 0}
  body.kd-light .td-hero-scene::after{display:none}
  body.kd-light .td-hero-in{margin-top:-2.2rem}
  body.kd-light .td-hero-copy{max-width:none}
  body.kd-light .td-hero-lead{max-width:none}
}

/* ---- the mirror: pains under the "before", stamped Sorted once it's fixed ---- */
body.kd-light .td-mirror .td-cap{justify-content:center}
body.kd-light .td-mirror .td-controls{display:flex;align-items:center;justify-content:center;gap:1rem 1.4rem;flex-wrap:wrap}
body.kd-light .td-fix{white-space:nowrap;cursor:pointer;font-family:var(--font-display)}
body.kd-light .td-fix[hidden]{display:none!important}
body.kd-light .td-notes{width:min(1240px,100%);margin:clamp(1.6rem,3vw,2.4rem) auto 0;padding-bottom:clamp(2.4rem,5vw,3.6rem)}
body.kd-light .td-notes-k{margin:0 0 1rem;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#a2461f;text-align:center}
body.kd-light .td-notes-k .is-a{display:none;color:#2e7a5a}
body.kd-light .td-notes.is-fixed .td-notes-k .is-b{display:none}
body.kd-light .td-notes.is-fixed .td-notes-k .is-a{display:inline}
body.kd-light .td-notes ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
body.kd-light .td-notes li{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:10px;box-shadow:6px 7px 0 rgba(7,30,35,.82);
  padding:1.05rem 1.2rem 1.1rem 3.6rem;min-height:100%}
body.kd-light .td-notes li:nth-child(2){transform:rotate(.6deg)}
body.kd-light .td-notes li:nth-child(3){transform:rotate(-.5deg)}
body.kd-light .td-note-n{position:absolute;left:.95rem;top:1rem;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--signal);border:2.5px solid var(--ink);font:700 .9rem/1 var(--font-display);color:var(--ink);transition:background-color .3s}
body.kd-light .td-notes li p{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.32;color:var(--ink)}
body.kd-light .td-note-ok{position:absolute;right:.7rem;bottom:-.85rem;font:700 .8rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;
  color:#2e7a5a;background:var(--paper);border:2.5px solid #2e7a5a;border-radius:5px;padding:.38rem .55rem .32rem;
  transform:rotate(-7deg) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
/* 2.5.1 — no strikethrough: the text stays readable, the Sorted stamp and a green edge say it's fixed */
body.kd-light .td-notes li{transition:border-color .3s,box-shadow .3s}
body.kd-light .td-notes.is-fixed li{border-color:#2e7a5a;box-shadow:6px 7px 0 rgba(46,122,90,.85)}
body.kd-light .td-notes.is-fixed .td-note-n{background:var(--sky)}
body.kd-light .td-notes.is-fixed .td-note-ok{transform:rotate(-7deg) scale(1)}
body.kd-light .td-notes.is-fixed li:nth-child(2) .td-note-ok{transition-delay:.12s}
body.kd-light .td-notes.is-fixed li:nth-child(3) .td-note-ok{transition-delay:.24s}
@media (max-width:820px){
  body.kd-light .td-notes ol{grid-template-columns:1fr;gap:1.3rem}
  body.kd-light .td-notes li:nth-child(n){transform:none}
}

/* ---- outcomes, on night ---- */
body.kd-light .oc-sec{padding-top:clamp(3rem,6vw,4.6rem);padding-bottom:clamp(3.4rem,6vw,5rem)}
body.kd-light .oc-grid{list-style:none;margin:clamp(1.6rem,3vw,2.6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.8rem)}
body.kd-light .oc{border-top:3px solid rgba(168,199,200,.35);padding-top:1.1rem}
body.kd-light .oc-n{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,4vw,3.2rem);line-height:.9;color:var(--signal);
  letter-spacing:-.05em;text-shadow:4px 5px 0 rgba(0,0,0,.35)}
body.kd-light .band-night .oc h3{margin:.9rem 0 0;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15;letter-spacing:-.01em}
body.kd-light .band-night .oc p{margin:.6rem 0 0;font-size:1rem;line-height:1.5}
body.kd-light .oc ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
body.kd-light .oc ul li{position:relative;padding-left:1.7rem;font-size:.95rem;line-height:1.4;color:var(--foam)}
body.kd-light .oc ul li::before{content:"";position:absolute;left:0;top:.16em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--signal)}
body.kd-light .oc ul li::after{content:"";position:absolute;left:.32rem;top:.42em;width:.45rem;height:.24rem;border-left:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);transform:rotate(-45deg)}
@media (max-width:820px){ body.kd-light .oc-grid{grid-template-columns:1fr} }

/* ---- the price, with the payback sum ---- */
body.kd-light .payback-sec{padding-top:clamp(3rem,6vw,4.6rem);padding-bottom:clamp(3.4rem,6vw,5rem)}
body.kd-light .pb-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
body.kd-light .pb-copy h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;margin:0}
body.kd-light .pb-copy p{margin:1rem 0 1.6rem;font-size:1.08rem;max-width:40ch;color:var(--muted)}
body.kd-light .pb-card{position:relative;background:var(--foam);border:3px solid var(--ink);border-radius:6px;box-shadow:10px 12px 0 rgba(7,30,35,.85);
  transform:rotate(-1.1deg);padding:1.6rem 1.7rem 1.4rem;font-family:var(--font-body);color:var(--ink)}
body.kd-light .pb-label{display:block;margin:1.1rem 0 .5rem;font:700 1.02rem/1.3 var(--font-display);color:var(--ink)}
body.kd-light .pb-input{display:flex;align-items:center;gap:.35rem;background:#fff;border:3px solid var(--ink);border-radius:6px;padding:.25rem .9rem;max-width:15rem}
body.kd-light .pb-input span{font:700 2rem/1 var(--font-display);color:var(--sea)}
body.kd-light .pb-input input{width:100%;min-width:0;border:0;background:transparent;font:700 2rem/1.5 var(--font-display);letter-spacing:-.03em;color:var(--ink);padding:0;outline:none}
body.kd-light .pb-input:focus-within{outline:3px solid var(--signal);outline-offset:2px}
body.kd-light .pb-hint{margin:.5rem 0 0;font-size:.86rem;color:var(--muted)}
body.kd-light .pb-out{margin-top:1.2rem;border-top:3px double var(--ink);padding-top:1rem}
body.kd-light .pb-big{margin:0 0 .6rem;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.25;color:var(--ink)}
body.kd-light .pb-big b{display:block;font-weight:700;font-size:clamp(2.4rem,4.4vw,3.2rem);line-height:1;letter-spacing:-.04em;text-shadow:3px 4px 0 var(--signal);margin-bottom:.15rem}
body.kd-light .pb-lines{list-style:none;margin:0;padding:0}
body.kd-light .pb-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:2px dashed rgba(7,30,35,.18);font-size:.95rem}
body.kd-light .pb-lines b{font-family:var(--font-display);font-weight:700;white-space:nowrap}
body.kd-light .pb-lines .pb-up b{color:#2e7a5a}
body.kd-light .pb-card .rc-foot{margin:.7rem 0 0;text-align:left;font-size:.8rem;color:var(--muted)}
@media (max-width:900px){ body.kd-light .pb-split{grid-template-columns:1fr} body.kd-light .pb-card{transform:rotate(-.5deg)} }
@media (max-width:480px){ body.kd-light .pb-card{padding:1.3rem 1.15rem 1.1rem} body.kd-light .pb-lines li{font-size:.88rem} }
/* 2.5.1 — price = header row + two cards: the spec sheet (what the £79 covers) and the sum (does it pay) */
body.kd-light .pb-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem clamp(2rem,5vw,4.5rem);align-items:end}
body.kd-light .pb-head h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.02;margin:0}
body.kd-light .pb-head-r p{margin:0 0 1.3rem;font-size:1.08rem;max-width:42ch;color:var(--muted)}
body.kd-light .pb-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.4rem);align-items:start;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
body.kd-light .pb-sheet{transform:rotate(.9deg)}
body.kd-light .pb-sheet .rc-total small{margin-left:.15em}
@media (max-width:900px){
  body.kd-light .pb-head,body.kd-light .pb-cards{grid-template-columns:1fr}
  body.kd-light .pb-sheet{transform:rotate(.5deg)}
}
@media (max-width:480px){ body.kd-light .pb-sheet{padding:1.3rem 1.15rem 1.1rem} body.kd-light .pb-sheet .rc-txt{font-size:.9rem} body.kd-light .pb-sheet .rc-list li{gap:.6rem} }
@media (prefers-reduced-motion:reduce){
  body.kd-light .td-notes li,body.kd-light .td-note-n,body.kd-light .td-note-ok{transition:none}
}

/* ==========================================================================
   2.5.2 — AREA PAGES use the trade hero (.td-hero): the town drawing is the scene.
   Art: assets/surf/area-heroes/{slug}-wide.webp (1200x670) + {slug}-m.webp (960x749).
   ========================================================================== */
body.kd-light .area-hero .td-hero-lead{max-width:40ch}
body.kd-light .area-hero .td-hero-lead + .td-hero-lead{margin-top:.8rem}
@media (min-width:901px){ body.kd-light .area-hero .td-hero-scene img{object-position:100% 40%} }


/* ==========================================================================
   2.5.5 — trade pages: "See it live" card linking the full demo site
   ========================================================================== */
body.kd-light .td-live{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;
  max-width:1100px;margin:clamp(2.5rem,5vw,4rem) auto 0;padding:clamp(1.2rem,2.5vw,2rem);
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:8px 9px 0 rgba(7,30,35,.85);
}
body.kd-light .td-live-shot{display:block;border:3px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:4px 5px 0 rgba(7,30,35,.5);transform:rotate(-1deg);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
body.kd-light .td-live-shot:hover{transform:rotate(0) translateY(-3px)}
body.kd-light .td-live-shot img{display:block;width:100%;height:auto}
body.kd-light .td-live-copy h3{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.1;margin:.5rem 0 .7rem;color:var(--ink)}
body.kd-light .td-live-copy p{color:var(--muted);line-height:1.6;margin-bottom:1.1rem}
body.kd-light .td-live-form{margin-top:1.4rem;padding-top:1.2rem;border-top:2px dashed rgba(7,30,35,.25)}
body.kd-light .td-live-form .td-live-k{font-family:var(--font-display);font-weight:700;color:var(--ink);margin-bottom:.6rem;font-size:.95rem}
body.kd-light .td-live-form .row{display:flex;gap:.5rem;flex-wrap:wrap}
body.kd-light .td-live-form input{flex:1 1 9rem;min-width:0;padding:.75rem .9rem;border:2px solid var(--ink);border-radius:8px;background:#fff;font:inherit;font-size:1rem;color:var(--ink)}
body.kd-light .td-live-form input::placeholder{color:#3f5c66}
body.kd-light .td-live-form .btn{flex:0 0 auto}
@media (max-width:860px){
  body.kd-light .td-live{grid-template-columns:1fr}
  body.kd-light .td-live-shot{transform:none}
  body.kd-light .td-live-form .btn{flex:1 1 100%;justify-content:center}
}