/* ==========================================================================
   JKonsult UK Waste-Removal Marketing  -  v5
   Message-first system: full-viewport WE-DO-X-FOR-Y hero with typewriter,
   trades ticker, editorial service rows, count-up proof band, team marquee.
   4 distinct styles on html[data-style] + live switch. Orange = brand.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Montserrat";font-weight:400;src:url("fonts/Montserrat-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:500;src:url("fonts/Montserrat-Medium.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:600;src:url("fonts/Montserrat-SemiBold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:700;src:url("fonts/Montserrat-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:800;src:url("fonts/Montserrat-ExtraBold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Montserrat";font-weight:900;src:url("fonts/Montserrat-Black.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Oswald";font-weight:200 700;src:url("fonts/Oswald.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Fraunces";font-weight:100 900;src:url("fonts/Fraunces.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;src:url("fonts/Fraunces-Italic.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Space Grotesk";font-weight:300 700;src:url("fonts/SpaceGrotesk.ttf") format("truetype");font-display:swap}

/* ---- Token defaults -------------------------------------------------------- */
:root{
  --brand:#D85D3F;
  --brand-hover:#c14e33;
  --bg:#ffffff;
  --band-bg:#FAF6F0;
  --surface:#ffffff;
  --ink:#141519;
  --text:#45464f;
  --muted:#8b8c96;
  --line:#ECE7DE;
  --accent:#D85D3F;
  --accent-soft:#FBEEE9;
  --accent-ink:#8f3d28;
  --on-accent:#ffffff;

  --hero-bg:#ffffff;
  --hero-ink:#141519;
  --hero-muted:#55565f;
  --rot-color:#D85D3F;
  --ticker-bg:#141519;
  --ticker-ink:#ffffff;
  --proof-bg:#141519;
  --proof-ink:#ffffff;
  --proof-muted:rgba(255,255,255,.62);
  --proof-stroke:rgba(255,255,255,.08);
  --logo-top-filter:none;

  --container:1180px;
  --pad:120px;
  --card-radius:16px;
  --btn-radius:999px;
  --card-border:1px solid var(--line);
  --shadow:0 2px 8px rgba(20,20,40,.05), 0 20px 44px rgba(20,20,40,.08);
  --shadow-sm:0 1px 2px rgba(20,20,40,.04), 0 6px 18px rgba(20,20,40,.05);

  --hero-size:clamp(22px,8.5vw,86px);
  --h2-size:clamp(32px,4.6vw,56px);
  --h2-weight:900;
  --h2-ls:-.028em;
  --heading-transform:none;
  --font:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:var(--font);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  font-synthesis:none;
}

/* ---- Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .3s ease,color .3s ease}
img{max-width:100%;display:block}
svg{display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;text-decoration:none}
.skip:focus{left:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wrap{max-width:var(--container);margin:0 auto;padding:0 36px}
.section{padding:var(--pad) 0;background:var(--bg)}
.section--band{background:var(--band-bg)}
.h2{font-family:var(--display);font-size:var(--h2-size);line-height:1.04;letter-spacing:var(--h2-ls);font-weight:var(--h2-weight);color:var(--ink);text-transform:var(--heading-transform)}
.h2 em{font-style:normal;color:var(--accent)}
.head{margin-bottom:56px;max-width:900px}
.oneliner{font-size:17.5px;line-height:1.6;font-weight:500;color:var(--text);max-width:600px;margin-top:20px}
.note{font-size:12.5px;color:var(--muted);font-weight:600}
.ph{color:var(--accent);font-weight:700}

/* ---- Buttons ----------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;border-radius:var(--btn-radius);line-height:1;cursor:pointer;border:1.5px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s var(--ease),box-shadow .18s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--accent);color:var(--on-accent);font-size:15.5px;padding:15px 26px}
.btn--primary:hover{background:var(--brand-hover)}
.btn--lg{font-size:16.5px;padding:18px 34px}
.btn--sm{font-size:14px;padding:11px 18px}
.btn--hero{background:transparent;color:var(--hero-ink);border-color:color-mix(in srgb,var(--hero-ink) 35%,transparent);font-size:16px;padding:16px 28px}
.btn--hero:hover{border-color:var(--hero-ink)}

/* ---- Nav ----------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:background .3s ease,border-color .3s ease}
.nav--top{background:var(--hero-bg);border-bottom-color:transparent;backdrop-filter:none}
.nav__inner{max-width:var(--container);margin:0 auto;padding:16px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__logo{height:28px;width:auto;transition:filter .3s ease}
.nav--top .nav__logo{filter:var(--logo-top-filter)}
.nav__label{font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--ink);line-height:1.25;text-transform:uppercase}
.nav--top .nav__label{color:var(--hero-ink)}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__link{font-size:14.5px;font-weight:600;color:var(--text);text-decoration:none;transition:color .18s ease}
.nav--top .nav__link{color:color-mix(in srgb,var(--hero-ink) 78%,transparent)}
.nav__link:hover{color:var(--ink)}
.nav--top .nav__link:hover{color:var(--hero-ink)}
.nav__link.is-current{color:var(--ink);box-shadow:0 2px 0 var(--accent)}
.nav--top .nav__link.is-current{color:var(--hero-ink)}
.nav__right{display:flex;align-items:center;gap:18px}
.nav__phone{font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav--top .nav__phone{color:var(--hero-ink)}

/* ---- Hero ------------------------------------------------------------------------- */
.hero{position:relative;min-height:calc(100svh - 76px);display:flex;align-items:center;justify-content:center;text-align:center;background:var(--hero-bg);overflow:hidden;padding:64px 24px 96px}
.hero__inner{position:relative;z-index:2;max-width:1080px}
.hero__eyebrow{font-size:clamp(12px,1.2vw,14.5px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--hero-muted);margin-bottom:28px}
.hero__title{font-family:var(--display);font-size:var(--hero-size);line-height:1.02;letter-spacing:var(--hero-ls,-.035em);font-weight:var(--hero-weight,900);color:var(--hero-ink);text-transform:var(--heading-transform)}
.hero__l1,.hero__l2{display:block}
.rotator__word{color:var(--rot-color)}
.rotator__caret{display:inline-block;width:.075em;height:.82em;background:var(--rot-color);vertical-align:-.06em;margin-left:.05em;animation:blink 1.05s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.hero__sub{font-size:clamp(16px,1.7vw,20px);line-height:1.55;font-weight:600;color:var(--hero-muted);margin:30px auto 40px;max-width:640px}
.hero__cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--hero-muted);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero__scroll i{width:1.5px;height:34px;background:currentColor;display:block;animation:drop 1.8s var(--ease) infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.shape{position:absolute;z-index:1;pointer-events:none;display:block}

/* ---- Ticker ------------------------------------------------------------------------ */
.ticker{overflow:hidden;background:var(--ticker-bg);color:var(--ticker-ink);padding:15px 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;align-items:center;gap:38px;width:max-content;animation:tick 30s linear infinite;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker__track i{font-style:normal;color:var(--accent);font-size:12px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- Tiles (who) ---------------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;border-radius:var(--card-radius);overflow:hidden;height:460px;background:var(--ink)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .3s ease;opacity:.92}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,16,.82) 0%,rgba(10,10,16,.18) 46%,rgba(10,10,16,0) 70%)}
.tile__ovl{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 28px}
.tile__ovl h3{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);font-weight:var(--hero-weight,900);color:#fff;letter-spacing:-.02em;text-transform:var(--heading-transform)}
.tile__ovl p{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);margin-top:6px}

/* ---- Rows (how) --------------------------------------------------------------------------- */
.rows{border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:96px 1.25fr 1fr 48px;gap:28px;align-items:center;padding:38px 22px;border-bottom:1px solid var(--line);transition:background .25s ease,padding .25s var(--ease);cursor:default}
.row__n{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.row__t{font-family:var(--display);font-size:clamp(23px,3vw,40px);font-weight:var(--hero-weight,900);letter-spacing:-.025em;color:var(--ink);text-transform:var(--heading-transform);transition:color .25s ease}
.row__d{font-size:15.5px;line-height:1.5;font-weight:600;color:var(--muted);transition:color .25s ease}
.row__go{color:var(--accent);opacity:0;transform:translateX(-10px);transition:opacity .25s ease,transform .25s var(--ease)}
.row:hover{background:var(--ink);padding-left:34px}
.row:hover .row__t{color:var(--on-accent)}
.row:hover .row__d{color:color-mix(in srgb,var(--on-accent) 65%,transparent)}
.row:hover .row__go{opacity:1;transform:none}
.rows__foot{margin-top:26px;font-size:15px;font-weight:600;color:var(--muted)}
.rows__foot a{color:var(--accent);font-weight:700;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ---- Interactive tools ----------------------------------------------------------------------- */
.tools{background:var(--surface);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--shadow);overflow:hidden}
.tools__tabs{display:flex;background:color-mix(in srgb,var(--band-bg) 55%,var(--surface));border-bottom:1px solid var(--line)}
.tools__tab{flex:1;appearance:none;border:none;background:transparent;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--muted);padding:18px 14px;cursor:pointer;border-bottom:2.5px solid transparent;transition:color .18s ease,border-color .18s ease,background .18s ease}
.tools__tab:hover{color:var(--ink)}
.tools__tab.is-active{color:var(--ink);background:var(--surface);border-bottom-color:var(--accent)}
.tools__stage{padding:34px}
.tool__controls{display:grid;grid-template-columns:1fr 210px;gap:26px;align-items:start;margin-bottom:24px}
.tool__controls--mover{grid-template-columns:1fr 1fr 1fr}
.tool__field{display:flex;flex-direction:column;gap:9px}
.tool__label{font-size:12.5px;font-weight:700;color:var(--ink)}
.tool__pc{font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:calc(var(--card-radius) * .55);padding:12px 14px;text-transform:uppercase}
.tool__pc::placeholder{color:var(--muted);text-transform:none;font-weight:500}
.tool__pc:focus{outline:none;border-color:var(--accent)}
.skipsizes,.loads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.skipsize{appearance:none;font-family:inherit;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:calc(var(--card-radius) * .55);padding:15px 8px 12px;display:flex;flex-direction:column;align-items:center;font-size:24px;font-weight:800;color:var(--ink);line-height:1;transition:border-color .16s ease,background .16s ease,transform .16s var(--ease)}
.skipsize:hover{transform:translateY(-2px)}
.skipsize small{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.skipsize span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.skipsize.is-active{border-color:var(--accent);background:var(--accent-soft)}
.skipsize.is-active span{color:var(--accent)}
.load{appearance:none;font-family:inherit;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:calc(var(--card-radius) * .55);padding:13px 8px;font-size:13px;font-weight:700;color:var(--ink);transition:border-color .16s ease,background .16s ease}
.load.is-active{border-color:var(--accent);background:var(--accent-soft)}
.loadbar{grid-column:1;margin-top:12px;height:9px;background:color-mix(in srgb,var(--line) 55%,transparent);border-radius:999px;overflow:hidden}
.loadbar__fill{display:block;height:100%;background:var(--accent);transition:width .45s var(--ease)}
.tool__out{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:calc(var(--card-radius) * .55);padding:20px 24px}
.tool__out-line{margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--ink)}
.tool__out-line strong{color:var(--accent-ink)}
.tool__out-sub{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--text);max-width:520px}
.tool__book{flex:none}
.tools__note{margin:20px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}

/* ---- Proof band ----------------------------------------------------------------------------------- */
.section--proof{position:relative;background:var(--proof-bg);color:var(--proof-muted);overflow:hidden}
.section--proof .h2{color:var(--proof-ink)}
.drift{position:absolute;top:6px;left:0;z-index:0;font-size:clamp(110px,20vw,250px);font-weight:900;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--proof-stroke);pointer-events:none;user-select:none;will-change:transform}
.section--proof .wrap{position:relative;z-index:1}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px}
.counter b{display:block;font-family:var(--display);font-size:clamp(58px,8.5vw,116px);font-weight:var(--hero-weight,900);letter-spacing:-.03em;line-height:1;color:var(--proof-ink)}
.counter b span{color:var(--accent)}
.counter > span{display:block;margin-top:10px;font-size:14.5px;font-weight:700;color:var(--proof-muted);letter-spacing:.02em}
.proofrow{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;align-items:stretch}
.quote-card{background:color-mix(in srgb,var(--proof-ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--proof-ink) 14%,transparent);border-radius:var(--card-radius);padding:28px;display:flex;flex-direction:column}
.quote-card__mark{font-size:52px;line-height:.5;color:var(--accent);font-family:Georgia,serif;margin-bottom:16px}
.quote-card blockquote{margin:0;font-size:17px;line-height:1.5;font-weight:600;color:var(--proof-ink)}
.quote-card cite{margin-top:auto;padding-top:18px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--proof-muted)}
.mini{background:var(--surface);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.mini img{width:100%;height:150px;object-fit:cover}
.mini__b{padding:16px 18px}
.mini__b b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.mini__b p{margin:0;font-size:13px;line-height:1.5;color:var(--text)}

/* ---- Team marquee -------------------------------------------------------------------------------------- */
#team{padding-bottom:calc(var(--pad) * .8)}
#team .wrap{margin-bottom:48px}
.tmar{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.tmar__track{display:flex;gap:18px;width:max-content;animation:tmar 46s linear infinite;padding:4px 0}
.tmar:hover .tmar__track{animation-play-state:paused}
@keyframes tmar{to{transform:translateX(-50%)}}
.member{position:relative;flex:none;width:212px;border-radius:var(--card-radius);overflow:hidden;background:var(--band-bg)}
.member img{width:100%;height:264px;object-fit:cover;object-position:50% 20%}
.member__tag{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(to top,rgba(10,10,16,.85),rgba(10,10,16,0));display:flex;flex-direction:column;gap:1px}
.member__tag b{font-size:14px;font-weight:800;color:#fff}
.member__tag i{font-style:normal;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75)}
.member--lead .member__tag b{color:#fff}
.member--lead .member__tag i{color:var(--accent);filter:brightness(1.35)}

/* ---- Steps --------------------------------------------------------------------------------------------- */
.section--start{background:var(--band-bg)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{border-top:2.5px solid var(--ink);padding-top:22px}
.step__n{display:block;font-size:clamp(44px,5vw,68px);font-weight:900;line-height:1;color:var(--accent);margin-bottom:14px}
.step h3{font-family:var(--display);font-size:21px;font-weight:var(--hero-weight,900);color:var(--ink);letter-spacing:-.01em;margin-bottom:8px;text-transform:var(--heading-transform)}
.step p{font-size:15px;line-height:1.55;font-weight:500;color:var(--text)}

/* ---- Contact --------------------------------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(190px,300px) 1fr;grid-template-areas:"man copy" "man form";gap:clamp(22px,3vw,40px) clamp(30px,4vw,58px);align-items:center}
.contact__talk{margin-top:30px;display:flex;flex-direction:column;gap:13px}
.contact__link{display:inline-flex;align-items:center;gap:10px;font-size:16.5px;font-weight:700;color:var(--ink);text-decoration:none;width:max-content}
.contact__link:hover{color:var(--accent)}
.contact__link svg{color:var(--accent)}
.contact__gp{margin-top:30px;display:flex;align-items:center;gap:14px}
.contact__gp img{height:34px;width:auto}
.contact__gp span{font-size:13px;font-weight:600;color:var(--muted)}
.form-card{background:var(--surface);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--shadow);padding:34px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:12.5px;font-weight:700;color:var(--ink)}
.field__opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:calc(var(--card-radius) * .55);padding:12px 14px;transition:border-color .16s ease}
.field textarea{resize:vertical;min-height:78px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form__submit{grid-column:1 / -1;justify-content:center;width:100%;margin-top:2px}
.form__small{grid-column:1 / -1;margin:2px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.form-success{text-align:center;padding:26px 10px}
.form-success__mark{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success h3{font-size:22px;color:var(--ink);margin-bottom:8px}
.form-success p{margin:0;font-size:15px;line-height:1.55;color:var(--text);max-width:340px;margin-inline:auto}

/* ---- Footer -------------------------------------------------------------------------------------------------- */
.footer{background:#1F1F1F;color:rgba(255,255,255,.7)}
.footer__inner{max-width:var(--container);margin:0 auto;padding:clamp(48px,6vw,72px) 36px clamp(26px,3vw,38px)}
.footer__top{display:grid;grid-template-columns:1.5fr auto;gap:40px;align-items:start;padding-bottom:clamp(30px,3.6vw,44px);border-bottom:1px solid rgba(255,255,255,.12)}
.footer__logo{height:28px;width:auto;display:block;margin-bottom:16px}
.footer__blurb{margin:0 0 18px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.72);line-height:1.6;max-width:460px}
.footer__social{display:flex;gap:11px}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .2s ease,transform .2s ease}
.footer__social a:hover{background:var(--accent);transform:translateY(-2px)}
.footer__social svg{width:17px;height:17px}
.footer__reach{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.footer__phone{font-size:20px;font-weight:800;color:#fff;text-decoration:none;margin-bottom:4px}
.footer__email{font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;margin-bottom:6px}
.footer__addr{font-size:13px;color:rgba(255,255,255,.5);margin:0 0 14px}
.footer__gp{display:inline-flex;background:#fff;border-radius:8px;padding:5px 9px}
.footer__gp img{height:40px;width:auto;display:block}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:clamp(30px,3.6vw,46px) 0}
.footer__h{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 16px}
.footer__col a{display:block;font-size:14px;font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;margin-bottom:11px;transition:color .18s ease}
.footer__col a:hover{color:#fff}
.footer__col--contact p{margin:0 0 8px;font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.5}
.footer__col--contact a{margin-bottom:8px}
.footer__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:clamp(20px,2.2vw,26px);border-top:1px solid rgba(255,255,255,.12)}
.footer__copy{margin:0;font-size:12.5px;color:rgba(255,255,255,.45)}
.footer__bar-links{display:flex;gap:18px}
.footer__bar-links a{font-size:12.5px;color:rgba(255,255,255,.5);text-decoration:none}
.footer__bar-links a:hover{color:#fff}
@media (max-width:820px){
  .footer__top{grid-template-columns:1fr;gap:22px}
  .footer__reach{text-align:left;align-items:flex-start}
  .footer__cols{grid-template-columns:1fr 1fr;gap:26px 24px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:420px){.footer__cols{grid-template-columns:1fr 1fr;gap:24px 18px}}
/* legal / policy pages */
.legal{max-width:800px;margin:0 auto}
.legal__meta{font-size:13.5px;color:var(--muted);margin:0 0 30px;font-weight:600}
.legal h2{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:38px 0 12px;line-height:1.2}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{font-size:15.5px;line-height:1.7;color:var(--text);font-weight:500}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.legal strong{color:var(--ink);font-weight:700}
.legal address{font-style:normal;line-height:1.7;font-size:15.5px;color:var(--text)}

/* ---- Style switcher panel ---------------------------------------------------------------------------------------- */
.switch{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:100;display:flex;align-items:center;gap:6px;background:#131318;color:#fff;border-radius:999px;padding:7px 8px 7px 16px;box-shadow:0 10px 34px rgba(0,0,0,.3)}
.switch__label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-right:4px}
.switch__btn{appearance:none;border:none;background:transparent;color:rgba(255,255,255,.72);font-family:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .16s ease,color .16s ease}
.switch__btn:hover{color:#fff}
.switch__btn.is-active{background:var(--brand);color:#fff}

/* ---- Motion ------------------------------------------------------------------------------------------------------ */
.js .hero__eyebrow,.js .hero__title,.js .hero__sub,.js .hero__cta{animation:heroIn .9s var(--ease) both}
.js .hero__title{animation-delay:.12s}
.js .hero__sub{animation-delay:.3s}
.js .hero__cta{animation-delay:.46s}
.js .hero__scroll{animation:heroIn 1s var(--ease) .85s both}
.js .shape{animation:shapeIn 1.5s ease .15s both}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes shapeIn{from{opacity:0}}
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease),clip-path .9s var(--ease);transition-delay:var(--d,0s)}
/* headlines rise out of a mask */
.js .h2[data-reveal]{opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(34px)}
.js .h2[data-reveal].in{clip-path:inset(0 0 0 0)}
/* trade tiles wipe in from the left */
.js .tile[data-reveal]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.js .tile[data-reveal].in{clip-path:inset(0 0 0 0)}
/* slow ambient drift on soft hero shapes (skew-free styles only) */
@keyframes floaty{to{transform:translate(0,30px)}}
html[data-style="bold"] .shape--a{animation:shapeIn 1.5s ease .15s both,floaty 16s ease-in-out 2s infinite alternate}
html[data-style="fresh"] .shape--a{animation:shapeIn 1.5s ease .15s both,floaty 18s ease-in-out 2s infinite alternate}
html[data-style="fresh"] .shape--b{animation:shapeIn 1.5s ease .15s both,floaty 22s ease-in-out 3s infinite alternate}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .ticker__track,.tmar__track,.rotator__caret,.hero__scroll i{animation:none !important}
  .js .hero__eyebrow,.js .hero__title,.js .hero__sub,.js .hero__cta,.js .hero__scroll,.js .shape{animation:none !important}
  .tmar{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .loadbar__fill{transition:none}
}

/* ---- Responsive (structural) --------------------------------------------------------------------------------------- */
@media (max-width:960px){
  :root{--pad:84px}
  .nav__links{display:none}
  .hero{min-height:calc(100svh - 64px);padding-bottom:80px}
  .tiles{grid-template-columns:1fr;gap:14px}
  .tile{height:240px}
  .tile__go{opacity:1;transform:none}
  .row{grid-template-columns:52px 1fr;grid-template-rows:auto auto;padding:26px 12px}
  .row__t{grid-column:2}
  .row__d{grid-column:2;margin-top:4px}
  .row__go{display:none}
  .row:hover{padding-left:12px}
  .counters{gap:14px;margin-bottom:44px}
  .proofrow{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:30px}
  .contact{grid-template-columns:1fr;gap:40px}
}
@media (max-width:620px){
  :root{--pad:64px}
  .wrap{padding:0 20px}
  .nav__inner{padding:12px 20px}
  .nav__phone{display:none}
  .head{margin-bottom:38px}
  .hero__cta{flex-direction:column;width:100%}
  .hero__cta .btn{width:100%;justify-content:center}
  .ticker__track{font-size:12px;gap:26px}
  .counters{grid-template-columns:1fr;gap:26px}
  .form{grid-template-columns:1fr}
  .tools__stage{padding:20px}
  .tool__controls,.tool__controls--mover{grid-template-columns:1fr;gap:18px}
  .loads{grid-template-columns:1fr 1fr}
  .tool__out{flex-direction:column;align-items:flex-start}
  .tool__book{width:100%;justify-content:center}
  .form-card{padding:24px 20px}
  .footer__inner{grid-template-columns:1fr;gap:24px}
  .member{width:168px}
  .member img{height:210px}
  .shape--b,.shape--c{display:none}
  .shape--a{opacity:.5}
  .switch{left:12px;right:12px;transform:none;bottom:12px;justify-content:center;flex-wrap:wrap;padding:8px 10px}
  .switch__label{width:100%;text-align:center;margin:0 0 2px}
}

/* ==========================================================================
   STYLE 1: BOLD  -  white editorial, giant ink type, orange geometry
   ========================================================================== */
html[data-style="bold"]{
  --bg:#ffffff;--band-bg:#FAF6F0;--surface:#ffffff;--ink:#141519;--line:#ECE7DE;
  --accent:#D85D3F;--accent-soft:#FBEEE9;
  --hero-bg:#ffffff;--hero-ink:#141519;--hero-muted:#55565f;--rot-color:#D85D3F;
  --ticker-bg:#141519;--ticker-ink:#ffffff;
  --proof-bg:#141519;--proof-ink:#ffffff;--proof-muted:rgba(255,255,255,.62);
  --card-radius:16px;--btn-radius:999px;
  --display:"Space Grotesk",sans-serif;
  --hero-weight:700;--hero-ls:-.03em;
  --hero-size:clamp(46px,8.2vw,102px);
  --h2-size:clamp(32px,4.6vw,56px);--h2-weight:700;--h2-ls:-.02em;
}
/* bold layout: editorial LEFT-ALIGNED hero, magazine numbering */
html[data-style="bold"] .hero{text-align:left}
html[data-style="bold"] .hero__inner{width:min(100%,1108px)}
html[data-style="bold"] .hero__sub{margin-left:0;margin-right:auto}
html[data-style="bold"] .hero__cta{justify-content:flex-start}
html[data-style="bold"] .shape--a{width:600px;height:600px;border-radius:50%;background:var(--accent);opacity:.1;right:-170px;top:-180px}
html[data-style="bold"] .shape--b{width:230px;height:230px;left:4vw;bottom:8vh;background-image:radial-gradient(circle,#141519 2px,transparent 2.5px);background-size:23px 23px;opacity:.22}
html[data-style="bold"] .shape--c{width:64px;height:64px;border-radius:50%;background:var(--accent);right:24vw;top:14vh;opacity:.85}
html[data-style="bold"] .section--proof .mini{border:none}

/* ==========================================================================
   STYLE 2: INDUSTRIAL  -  charcoal + concrete, hazard stripes, hard edges
   ========================================================================== */
html[data-style="industrial"]{
  --bg:#EFEBE3;--band-bg:#E6E0D2;--surface:#ffffff;--ink:#15171b;--text:#3d3f47;--muted:#71737d;--line:#D6D0C4;
  --accent:#E4602F;--brand:#E4602F;--brand-hover:#c94f22;--accent-soft:#F7E4D8;--accent-ink:#8a3a1c;
  --hero-bg:#16181c;--hero-ink:#ffffff;--hero-muted:rgba(255,255,255,.62);--rot-color:#E4602F;
  --ticker-bg:#E4602F;--ticker-ink:#15171b;
  --proof-bg:#16181c;--proof-ink:#ffffff;--proof-muted:rgba(255,255,255,.6);
  --logo-top-filter:none;
  --card-radius:0px;--btn-radius:2px;
  --card-border:1.5px solid var(--ink);
  --shadow:6px 6px 0 rgba(21,23,27,.85);--shadow-sm:3px 3px 0 rgba(21,23,27,.16);
  --heading-transform:uppercase;
  --h2-ls:0;
  --display:"Oswald","Arial Narrow",sans-serif;
  --hero-weight:600;--hero-ls:.01em;
  --hero-size:clamp(54px,9.4vw,124px);
  --h2-size:clamp(34px,4.8vw,60px);--h2-weight:600;
}
/* industrial layout: condensed poster type, spec-sheet trade bands, workshop details */
html[data-style="industrial"] .row__t{letter-spacing:.01em}
html[data-style="industrial"] .member img{filter:grayscale(1);transition:filter .35s ease}
html[data-style="industrial"] .member:hover img{filter:grayscale(0)}
@media (min-width:961px){
  html[data-style="industrial"] .tiles{grid-template-columns:1fr;gap:0;border:2px solid var(--ink)}
  html[data-style="industrial"] .tile{height:168px;border:none;border-bottom:2px solid var(--ink);border-radius:0}
  html[data-style="industrial"] .tile:last-child{border-bottom:none}
  html[data-style="industrial"] .tile::after{background:linear-gradient(to right,rgba(10,10,16,.88) 26%,rgba(10,10,16,.25) 70%,rgba(10,10,16,.05))}
  html[data-style="industrial"] .tile__ovl{top:0;display:flex;flex-direction:row;align-items:center;gap:26px;padding:0 30px}
  html[data-style="industrial"] .tile__ovl h3{font-size:42px}
  html[data-style="industrial"] .tile__ovl p{margin-top:4px}
}
html[data-style="industrial"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,var(--accent) 0 16px,#0d0e11 16px 32px)}
html[data-style="industrial"] .shape--a{width:46vw;height:130%;right:-16vw;top:-15%;background:linear-gradient(180deg,#E4602F,#c94f22);transform:skewX(-16deg);opacity:.92}
html[data-style="industrial"] .shape--b{width:30vw;height:130%;right:-22vw;top:-15%;background:#22242a;transform:skewX(-16deg)}
html[data-style="industrial"] .shape--c{display:none}
html[data-style="industrial"] .hero__eyebrow{font-family:var(--mono);letter-spacing:.3em}
html[data-style="industrial"] .rotator{display:inline-block;line-height:1.08;background:#0d0e11;padding:0 .12em .02em}
html[data-style="industrial"] .rotator__word{color:var(--accent)}
html[data-style="industrial"] .hero__eyebrow::before{content:"// "}
html[data-style="industrial"] .ticker{border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
html[data-style="industrial"] .ticker__track i{color:#15171b}
html[data-style="industrial"] .rows{border-top:2px solid var(--ink)}
html[data-style="industrial"] .row{border-bottom:2px solid var(--ink)}
html[data-style="industrial"] .row:hover{background:var(--accent)}
html[data-style="industrial"] .row:hover .row__n,html[data-style="industrial"] .row:hover .row__go{color:#15171b}
html[data-style="industrial"] .row:hover .row__t{color:#fff}
html[data-style="industrial"] .row:hover .row__d{color:rgba(255,255,255,.85)}
html[data-style="industrial"] .tile{border:2px solid var(--ink)}
html[data-style="industrial"] .tools,html[data-style="industrial"] .form-card{border:2px solid var(--ink)}
html[data-style="industrial"] .member{border:2px solid var(--ink)}
html[data-style="industrial"] .step{border-top-width:4px}
html[data-style="industrial"] .step__n{font-family:var(--mono)}
html[data-style="industrial"] .row__n{background:var(--ink);color:#fff;padding:4px 8px;width:max-content}
html[data-style="industrial"] .btn--primary{border:2px solid transparent}
html[data-style="industrial"] .drift{-webkit-text-stroke:1.5px rgba(255,255,255,.1);font-family:var(--font)}
html[data-style="industrial"] .section--start{background:#16181c}
html[data-style="industrial"] .section--start .h2{color:#fff}
html[data-style="industrial"] .section--start .step{border-top-color:var(--accent)}
html[data-style="industrial"] .section--start .step h3{color:#fff}
html[data-style="industrial"] .section--start .step p{color:rgba(255,255,255,.65)}

/* ==========================================================================
   STYLE 3: FRESH  -  deep violet hero with rings, cream body, coral + teal
   ========================================================================== */
html[data-style="fresh"]{
  --bg:#FBF7F1;--band-bg:#F3ECE1;--surface:#ffffff;--ink:#2a2340;--text:#5a5470;--muted:#9b93ab;--line:#EBE3D8;
  --accent:#E9633C;--brand:#E9633C;--brand-hover:#d5522d;--accent-soft:#FDEAE0;--accent-ink:#9c4326;
  --hero-bg:#221C4E;--hero-ink:#ffffff;--hero-muted:rgba(255,255,255,.68);--rot-color:#FF8B68;
  --ticker-bg:#E4DEF9;--ticker-ink:#2a2340;
  --proof-bg:#221C4E;--proof-ink:#ffffff;--proof-muted:rgba(255,255,255,.62);
  --logo-top-filter:none;
  --card-radius:26px;--btn-radius:999px;
  --card-border:1px solid transparent;
  --shadow:0 4px 12px rgba(80,60,120,.07), 0 24px 48px rgba(80,60,120,.1);--shadow-sm:0 2px 10px rgba(80,60,120,.08);
  --display:"Fraunces",Georgia,serif;
  --hero-weight:600;--hero-ls:-.01em;
  --hero-size:clamp(44px,7.2vw,92px);
  --h2-size:clamp(30px,4.2vw,52px);--h2-weight:600;--h2-ls:-.01em;
}
/* fresh layout: serif magazine, italic accents, collage tiles, card rows, arch portraits */
html[data-style="fresh"] .hero__title{line-height:1.06}
html[data-style="fresh"] .rotator__word,html[data-style="fresh"] .h2 em{font-style:italic}
html[data-style="fresh"] .counters{text-align:center}
html[data-style="fresh"] .head{margin-inline:auto;text-align:center}
html[data-style="fresh"] .oneliner{margin-inline:auto;text-align:center}
html[data-style="fresh"] #contact .h2,html[data-style="fresh"] #contact .oneliner{text-align:left;margin-inline:0}
html[data-style="fresh"] .member{border-radius:110px 110px 26px 26px}
html[data-style="fresh"] .row__n{background:#E9633C;color:#fff;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:14px}
html[data-style="fresh"] .row:nth-child(2) .row__n{background:#1FA98F}
html[data-style="fresh"] .row:nth-child(3) .row__n{background:#5B76D8}
@media (min-width:961px){
  html[data-style="fresh"] .tiles{grid-template-columns:1.15fr .85fr;grid-auto-rows:252px;gap:22px}
  html[data-style="fresh"] .tile{height:auto}
  html[data-style="fresh"] .tile:first-child{grid-row:span 2}
  html[data-style="fresh"] .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-top:none}
  html[data-style="fresh"] .row{display:block;border:none;background:var(--surface);border-radius:26px;padding:34px 30px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s ease}
  html[data-style="fresh"] .row:hover{background:var(--surface);padding-left:30px;transform:translateY(-5px);box-shadow:var(--shadow)}
  html[data-style="fresh"] .row:hover .row__t{color:var(--ink)}
  html[data-style="fresh"] .row:hover .row__d{color:var(--text)}
  html[data-style="fresh"] .row__t{font-size:27px;margin:18px 0 10px}
  html[data-style="fresh"] .row__d{color:var(--text)}
  html[data-style="fresh"] .row__go{display:none}
}
html[data-style="fresh"] .shape--a{width:640px;height:640px;border-radius:50%;border:46px solid #5F55C8;opacity:.5;left:-240px;top:-220px}
html[data-style="fresh"] .shape--b{width:430px;height:430px;border-radius:50%;border:36px solid #8F86E8;opacity:.35;right:-160px;bottom:-190px}
html[data-style="fresh"] .shape--c{width:110px;height:110px;border-radius:50%;background:#FF8B68;right:14vw;top:16vh;opacity:.9}
html[data-style="fresh"] .ticker__track i{color:#E9633C}
html[data-style="fresh"] .row:hover{background:#2a2340}
html[data-style="fresh"] .row:hover .row__go{color:#FF8B68}
html[data-style="fresh"] .step{border-top:none;background:var(--surface);border-radius:26px;padding:28px;box-shadow:var(--shadow-sm)}
html[data-style="fresh"] .step:nth-child(1) .step__n{color:#E9633C}
html[data-style="fresh"] .step:nth-child(2) .step__n{color:#1FA98F}
html[data-style="fresh"] .step:nth-child(3) .step__n{color:#5B76D8}
html[data-style="fresh"] .section--start{background:#EFEAFB}
html[data-style="fresh"] .quote-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-style="fresh"] .drift{-webkit-text-stroke:1.5px rgba(255,255,255,.09)}
html[data-style="fresh"] .counter b span{color:#FF8B68}

/* ==========================================================================
   v7 components: niche links, pains, trust, offer, CTA band, subpage hero
   ========================================================================== */
a.tile{display:block;text-decoration:none;cursor:pointer}
.tile__go{position:absolute;right:22px;bottom:22px;z-index:2;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s var(--ease)}
.tile:hover .tile__go{opacity:1;transform:none}

.hero--sub{min-height:46svh;padding:56px 24px 72px}

.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pain{background:var(--surface);border:var(--card-border);border-radius:var(--card-radius);padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.pain__mark{font-family:Georgia,serif;font-size:48px;line-height:.6;color:var(--accent);margin-bottom:18px}
.pain p{font-size:15.5px;line-height:1.7;color:var(--text);font-weight:500}
.pains__src{margin-top:22px;font-size:13.5px;color:var(--muted);font-weight:600}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px}
.trust-item{border-top:2.5px solid var(--accent);padding-top:18px}
.trust-item h3{font-family:var(--display);font-size:20px;font-weight:var(--hero-weight,900);color:var(--ink);margin-bottom:8px;letter-spacing:-.01em;text-transform:var(--heading-transform)}
.trust-item p{font-size:14.5px;line-height:1.6;color:var(--text);font-weight:500;margin:0}

.offer-note{margin-top:44px;background:var(--accent-soft);border-radius:var(--card-radius);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.offer-note p{font-size:15.5px;font-weight:600;color:var(--ink);max-width:660px;margin:0;line-height:1.55}

.section--cta{background:var(--proof-bg);color:var(--proof-muted)}
.section--cta .h2{color:var(--proof-ink)}
.section--cta .oneliner{color:var(--proof-muted)}
.section--cta .contact__link{color:var(--proof-ink)}
.section--cta .contact__link:hover{color:var(--accent)}
.section--cta .contact__gp span{color:var(--proof-muted)}
.section--cta .note{color:color-mix(in srgb,var(--proof-muted) 75%,transparent)}

.footer__links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.footer__links a{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);text-decoration:none}
.footer__links a:hover{color:#fff}

@media (max-width:960px){
  .pains,.trust{grid-template-columns:1fr}
}
.pains--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.pains--2{grid-template-columns:1fr}}

/* ==========================================================================
   v8 components: short pains, FAQ accordions, real-work blocks, deliverables
   ========================================================================== */
.pain h3{font-family:var(--display);font-size:19px;font-weight:var(--hero-weight,900);color:var(--ink);margin:0 0 10px;letter-spacing:-.01em;text-transform:var(--heading-transform)}
.pain__mark{font-size:36px;margin-bottom:12px}

.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:var(--hero-weight,900);font-size:18.5px;color:var(--ink);padding:22px 40px 22px 0;list-style:none;position:relative;text-transform:var(--heading-transform)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:26px;font-weight:600;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 22px;margin:0;font-size:15.5px;line-height:1.65;color:var(--text);max-width:720px}

.work{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-bottom:72px}
.work:last-of-type{margin-bottom:0}
.work--flip .work__media{order:2}
.work__media img{border-radius:var(--card-radius);box-shadow:var(--shadow);width:100%}
.work__kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.work__body h3{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);font-weight:var(--hero-weight,900);color:var(--ink);margin:0 0 12px;letter-spacing:-.015em;text-transform:var(--heading-transform)}
.work__body > p{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 18px}
.work__facts{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.work__facts li{font-size:14.5px;font-weight:600;color:var(--ink);padding-left:22px;position:relative;line-height:1.5}
.work__facts li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
/* client-stories cases: smaller image + a block on the business, the
   collaboration and the results (own class to avoid the .work collision) */
.case{display:grid;grid-template-columns:34% 1fr;gap:clamp(28px,4vw,58px);align-items:center;margin-bottom:clamp(44px,5vw,76px)}
.case--flip{grid-template-columns:1fr 34%}
.case--flip .case__media{order:2}
.case__media{aspect-ratio:4/5;border-radius:var(--card-radius);box-shadow:var(--shadow);overflow:hidden;background:#0f1013}
.case__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.case__kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.case__body h3{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:900;color:var(--ink);margin:0 0 14px;letter-spacing:-.015em;text-transform:var(--heading-transform)}
.case__body p{font-size:15.5px;line-height:1.62;color:var(--text);margin:0 0 14px}
.case__body p b{color:var(--ink);font-weight:800}
.case__results{margin:20px 0 20px;padding:22px 0 0;border-top:1px solid var(--line)}
.case__rlabel{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.case__stats{display:flex;gap:clamp(20px,3vw,38px);flex-wrap:wrap}
.case__stat b{display:block;font-family:var(--display);font-size:clamp(22px,2.4vw,29px);font-weight:900;color:var(--accent);letter-spacing:-.01em;line-height:1}
.case__stat span{display:block;margin-top:7px;font-size:13px;font-weight:600;color:var(--muted);line-height:1.4;max-width:158px}
.case__link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--ink);text-decoration:none}
.case__link:hover{color:var(--accent)}
.case__link svg{transition:transform .25s var(--ease)}
.case__link:hover svg{transform:translate(2px,-2px)}
@media (max-width:760px){
  .case{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .case--flip .case__media{order:0}
  .case__media{max-width:340px}
}

.deliv{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.deliv-item{background:var(--surface);border:var(--card-border);border-radius:var(--card-radius);padding:24px 22px;box-shadow:var(--shadow-sm)}
.deliv-item h3{font-family:var(--display);font-size:16.5px;font-weight:var(--hero-weight,900);color:var(--ink);margin:0 0 7px;text-transform:var(--heading-transform)}
.deliv-item p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text)}

.audit-list{counter-reset:aud;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.audit-item{background:var(--surface);border:var(--card-border);border-radius:var(--card-radius);padding:26px 24px;box-shadow:var(--shadow-sm)}
.audit-item::before{counter-increment:aud;content:counter(aud,decimal-leading-zero);font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);display:block;margin-bottom:12px}
.audit-item h3{font-family:var(--display);font-size:18px;font-weight:var(--hero-weight,900);color:var(--ink);margin:0 0 8px;text-transform:var(--heading-transform)}
.audit-item p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}

@media (max-width:960px){
  .work{grid-template-columns:1fr;gap:24px}
  .work--flip .work__media{order:0}
  .deliv{grid-template-columns:1fr 1fr}
  .audit-list{grid-template-columns:1fr}
}
@media (max-width:620px){
  .deliv{grid-template-columns:1fr}
}

/* ---- v8.1: photo story bands + ambient video ---- */
.photoband{position:relative;height:clamp(220px,36vw,400px);overflow:hidden}
.photoband img{width:100%;height:100%;object-fit:cover}
.photoband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:960px){.photoband video{display:none}}
@media (prefers-reduced-motion:reduce){.photoband video{display:none}}
.photoband::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,10,16,.38),rgba(10,10,16,0) 55%)}
.photoband__word{position:absolute;left:0;bottom:-6px;z-index:2;font-family:var(--display);font-size:clamp(60px,10.5vw,148px);font-weight:var(--hero-weight,900);letter-spacing:-.02em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.8);pointer-events:none;user-select:none;text-transform:uppercase;will-change:transform}
.proofvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:0;pointer-events:none}
.proofvid-scrim{position:absolute;inset:0;z-index:0;background:color-mix(in srgb,var(--proof-bg) 84%,transparent);pointer-events:none}
@media (max-width:960px){.proofvid,.proofvid-scrim{display:none}}
@media (prefers-reduced-motion:reduce){.proofvid,.proofvid-scrim{display:none}.photoband__word{transform:none !important}}


/* ==========================================================================
   v11 hero: image-to-video worker, one continuous man, background matched (Bold)
   ========================================================================== */
.hero__grid{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:0 36px}
.hero__art{display:none}

/* stable headline */
html[data-style="bold"] .hero__l2{display:block;min-height:2.02em}
html[data-style="bold"]{--hero-size:clamp(34px,4.9vw,76px)}
html[data-style="bold"] .hero__l1,html[data-style="bold"] .hero__l2{white-space:nowrap}

/* the whole Bold hero takes the clip background colour so the video edges vanish */
html[data-style="bold"] .hero--cine,html[data-style="bold"] .hero{background:#FDF0DF}
html[data-style="bold"] .nav--top{background:#FDF0DF}
html[data-style="bold"] .shape--a,html[data-style="bold"] .shape--c{display:none}

html[data-style="bold"] .hero__art{display:block;position:relative;width:114%;max-width:540px;aspect-ratio:1/1;margin:4px auto 0;-webkit-mask-image:radial-gradient(64% 74% at 50% 46%,#000 50%,transparent 82%);mask-image:radial-gradient(64% 74% at 50% 46%,#000 50%,transparent 82%)}
html[data-style="bold"] .hero__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity .5s ease}
html[data-style="bold"] .hero__clip.is-on{opacity:1}

@media (min-width:900px){
  html[data-style="bold"] .hero__grid{display:flex;align-items:center;position:relative;min-height:74vh}
  html[data-style="bold"] .hero__inner{position:relative;z-index:2;width:min(100%,880px)}
  html[data-style="bold"] .hero__art{position:absolute;z-index:1;right:-26%;top:52%;transform:translateY(-50%);margin:0;width:min(60vw,860px);max-width:none;aspect-ratio:1/1;height:auto;pointer-events:none;-webkit-mask-image:radial-gradient(56% 72% at 52% 46%,#000 54%,transparent 84%);mask-image:radial-gradient(56% 72% at 52% 46%,#000 54%,transparent 84%)}
  html[data-style="bold"]{--hero-size:clamp(40px,5.6vw,86px)}
}
@media (prefers-reduced-motion:reduce){
  html[data-style="bold"] .hero__clip{transition:none}
}


/* ==========================================================================
   Section 2: scroll-driven diorama segments (Bold; dioramas play on scroll-in)
   ========================================================================== */
html[data-style="bold"] .section--segs{background:#F9EBD9;padding:clamp(30px,3.6vw,48px) 0 clamp(44px,5vw,66px)}
.section--segs .head{margin-bottom:clamp(10px,1.6vw,18px)}
.segs{display:flex;flex-direction:column;gap:clamp(6px,1.2vw,18px);margin-top:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,52px);align-items:center}
.seg__copy{max-width:470px}
.seg__trade{font-family:var(--display);font-size:clamp(26px,3.3vw,40px);font-weight:var(--hero-weight,900);line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-transform:var(--heading-transform)}
.seg__lead{font-size:clamp(17px,1.9vw,21px);font-weight:700;line-height:1.3;color:var(--ink);margin:0 0 15px;max-width:420px}
.seg__d{font-size:16px;line-height:1.58;color:var(--text);font-weight:500;margin:0 0 20px;max-width:420px}
.seg__go{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2.5px solid var(--accent);padding-bottom:3px;transition:gap .2s var(--ease),color .2s ease}
.seg__go:hover{gap:14px;color:var(--accent)}
/* bigger panels, aligned to the column edge (same span as the copy in that
   column); strong radial edge-fade so every clip melts into the section and
   any per-clip background difference disappears */
.seg__art{position:relative;width:100%;max-width:600px;aspect-ratio:1/1;justify-self:start;overflow:hidden;-webkit-mask-image:radial-gradient(84% 74% at 50% 49%,#000 54%,transparent 88%);mask-image:radial-gradient(84% 74% at 50% 49%,#000 54%,transparent 88%)}
.seg__vid{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.16);transform-origin:50% 52%}
/* snappier load-in for this section so headlines finish before you scroll past */
.js .section--segs [data-reveal].in{transition-duration:.5s}
@media (min-width:900px){
  .seg--flip .seg__copy{order:2}
  .seg--flip .seg__art{order:1}
  .seg:not(.seg--flip) .seg__art{margin-left:clamp(-90px,-6vw,-150px)}
}
@media (max-width:899px){
  .seg{grid-template-columns:1fr;gap:14px}
  .seg__art{order:-1;max-width:420px;justify-self:center;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){.seg__go{transition:none}}

/* ==========================================================================
   Section 3: animated pain vignette cards ("Sound familiar?", Bold)
   Card bg = the vignette's own cream (--vig) so the looping illustration
   floats with no visible media box.
   ========================================================================== */
html[data-style="bold"] .pain{background:var(--vig,#FCEFDF);border:1px solid rgba(120,80,40,.06)}
.pain__vig{position:relative;width:100%;aspect-ratio:1/1;margin:-6px 0 16px;border-radius:calc(var(--card-radius) - 10px);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform}
.pain__vid{width:100%;height:100%;object-fit:contain;display:block;transform:scale(var(--vs,1.30));transform-origin:50% 50%}
/* the seated 'silent phone' man (card 3) reads smaller than the two standing
   men, so give him ~10 more to match their visual weight */
.pain:nth-child(3) .pain__vid{--vs:1.40}
/* card 1 ("No idea what's working") bumped 10% larger on request */
.pain:nth-child(1) .pain__vid{--vs:1.43}
.pain:hover .pain__vig{transform:translateY(-6px) scale(1.02)}
html[data-style="bold"] .pain{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
html[data-style="bold"] .pain:hover{box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){
  .pain__vig,.pain:hover .pain__vig{transition:none;transform:none}
}
@media (max-width:960px){
  /* stack; tyre card (junk-call, 2nd in source) reads fastest, put it first */
  .section--pains .pains{gap:18px}
  .section--pains .pain:nth-child(2){order:-1}
  .pain__vig{max-width:420px;margin-left:auto;margin-right:auto}
}

/* ==========================================================================
   Section 4: "We fix it with five things" - pinned two-column scroll (Bold)
   Left = sticky list (active item = dark row, others dimmed). Right = sticky
   spot panel that swaps with a drop-in as the active step advances 1..5.
   ========================================================================== */
html[data-style="bold"] .section--five{background:#FCEEDD}
.section--five{padding:0}
.five{position:relative}
.five__h2{margin-bottom:clamp(20px,2.6vw,34px)}
.five__item{padding:14px 18px;border-radius:14px;transition:background .3s var(--ease),padding .3s var(--ease)}
.five__body{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.five__n{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.06em;padding-top:5px}
.five__t{font-family:var(--display);font-size:clamp(19px,2vw,26px);font-weight:var(--hero-weight,900);letter-spacing:-.02em;color:var(--ink);line-height:1.12;margin:0;text-transform:var(--heading-transform);transition:color .3s ease}
.five__d{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--muted);margin:4px 0 0;transition:color .3s ease}
.five__spot img,.five__spot video{width:100%;max-width:420px;height:auto;object-fit:contain;display:block;-webkit-mask-image:radial-gradient(56% 90% at 50% 48%,#000 62%,transparent 97%);mask-image:radial-gradient(56% 90% at 50% 48%,#000 62%,transparent 97%)}
.five__foot{margin-top:22px;font-size:15px;font-weight:600;color:var(--muted)}
.five__foot a{color:var(--accent);font-weight:700;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* active + dimmed states (only meaningful in the pinned desktop mode) */
.five__item.is-active{background:var(--ink);padding-left:22px}
.five__item.is-active .five__t{color:var(--on-accent)}
.five__item.is-active .five__d{color:color-mix(in srgb,var(--on-accent) 62%,transparent)}

@media (min-width:900px){
  .five{height:300vh}
  .five__pin{position:sticky;top:0;height:100vh}
  .five__stage{position:relative;height:100vh;overflow:hidden}
  .five__col{width:60%;padding-top:clamp(88px,13vh,164px)}
  .five__h2{margin-bottom:clamp(42px,5.2vh,66px);white-space:nowrap}
  /* the list is the positioning reference for the figure (below) */
  .five__list{position:relative;display:flex;flex-direction:column;gap:14px}
  .five__item{padding:11px 20px}
  .five__t{font-size:clamp(19px,1.95vw,27px)}
  /* inactive rows dimmed to title only. the blurb's space is RESERVED in every
     row (fixed height) and only its text fades in on the active row, so no row
     ever changes height and nothing shifts as the active step advances */
  .five__item:not(.is-active) .five__t{color:color-mix(in srgb,var(--ink) 36%,transparent)}
  .five__d{height:1.4em;opacity:0;overflow:hidden;margin-top:4px;white-space:nowrap;transition:opacity .3s var(--ease)}
  .five__item.is-active .five__d{opacity:1}
  /* the transparent figure is anchored to the LIST (top:0/bottom:0 = the list's
     own height), so his head sits on row 1 and his boots on row 5, and he never
     depends on the sticky/stage geometry -> no load flash. shown from first
     paint via :where (0 specificity, so is-on/is-out still win) */
  .five__spot{position:absolute;top:0;bottom:0;left:100%;right:-66%;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-24px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
  :where(.five__item:first-child) .five__spot{opacity:1;transform:translateY(0)}
  .five__spot.is-on{opacity:1;transform:translateY(0)}
  .five__spot.is-out{opacity:0;transform:translateY(24px)}
  .five__spot img,.five__spot video{height:120%;width:auto;max-width:none;object-fit:contain;-webkit-mask-image:radial-gradient(56% 90% at 50% 48%,#000 60%,transparent 96%);mask-image:radial-gradient(56% 90% at 50% 48%,#000 60%,transparent 96%)}
  .five__foot{margin-top:28px}
}
@media (prefers-reduced-motion:reduce) and (min-width:900px){
  /* no pin, no swaps: plain stacked list, illustration above each text */
  .five{height:auto}
  .five__pin{position:static;height:auto;display:block}
  .five__stage{display:block;height:auto;overflow:visible}
  .five__col{width:100%;padding-top:0}
  .section--five{padding:clamp(56px,7vw,96px) 0}
  .five__list{position:static;display:flex;flex-direction:column;gap:8px}
  .five__item{display:flex;flex-direction:column;gap:6px;padding:10px 0 22px}
  .five__spot{position:static;opacity:1;transform:none;transition:none;display:block;pointer-events:auto}
  .five__spot img,.five__spot video{height:auto;width:auto;max-width:300px;margin:0 auto;display:block;transform:none}
  .five__d{height:auto;opacity:1;overflow:visible;margin-top:4px;white-space:normal}
  .five__item.is-active{background:transparent;padding-left:0}
  .five__item .five__t{color:var(--ink)}
  .five__item .five__d{color:var(--muted)}
}
@media (max-width:899px){
  /* no pin: stacked blocks, illustration above the text */
  .section--five{padding:clamp(48px,11vw,76px) 0}
  .five__col{width:100%}
  .five__list{display:flex;flex-direction:column;gap:8px}
  .five__item{display:flex;flex-direction:column;gap:6px;padding:10px 0 22px}
  .five__spot img,.five__spot video{max-height:330px;width:auto;max-width:100%;margin:0 auto;display:block}
  .five__item.is-active{background:transparent;padding-left:0}
  .five__item.is-active .five__t{color:var(--ink)}
  .five__item.is-active .five__d{color:var(--muted)}
}

/* ==========================================================================
   Section 5: proof (dark) - UK waste story + craft showcase (Bold)
   ========================================================================== */
.section--proof{padding-top:clamp(72px,10vw,132px);padding-bottom:clamp(72px,10vw,132px)}
/* Beat 1: story */
.proofstory{max-width:760px;margin-bottom:clamp(52px,7vw,92px)}
.proofstory__k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.proofstory .h2{margin-bottom:clamp(28px,3.6vh,44px)}
/* the shared .h2 reveal leaves a residual translateY(34px); reset it here so the
   headline sits at its true position and does not overlap the lead */
.js .proofstory .h2[data-reveal].in{transform:none}
.proofstory__lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;font-weight:500;color:var(--proof-muted);max-width:680px;margin-top:0}
.proofstory__lead{color:color-mix(in srgb,var(--proof-ink) 80%,transparent)}
/* Beat 2: showcase */
.showcase__h{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);font-weight:var(--hero-weight,900);letter-spacing:-.02em;color:var(--proof-ink);margin:0 0 clamp(24px,3vw,40px);text-transform:var(--heading-transform)}
.works{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
.work{display:block;text-decoration:none;color:inherit}
.work__frame{position:relative;border-radius:12px;overflow:hidden;background:#0f1013;border:1px solid color-mix(in srgb,var(--proof-ink) 16%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.work:hover .work__frame{transform:translateY(-6px);box-shadow:0 34px 80px rgba(0,0,0,.5)}
.work__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#1a1c21;border-bottom:1px solid rgba(255,255,255,.06)}
.work__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.work__dot:nth-child(1){background:#ff5f57}.work__dot:nth-child(2){background:#febc2e}.work__dot:nth-child(3){background:#28c840}
.work__addr{margin-left:12px;flex:1;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62);background:#0f1013;border-radius:6px;padding:5px 12px}
.work__view{position:relative;height:clamp(300px,34vw,420px);overflow:hidden}
.work__shot{display:block;width:100%;height:auto;transform:translateY(0);transition:transform .55s cubic-bezier(.22,1,.36,1);will-change:transform}
.work:hover .work__shot{transform:translateY(calc(-100% + clamp(300px,34vw,420px)));transition:transform 9s linear}
.work__meta{margin-top:16px}
.work__meta b{display:block;font-family:var(--display);font-size:18px;font-weight:var(--hero-weight,900);color:var(--proof-ink);letter-spacing:-.01em}
.work__ext{font-size:14px;color:var(--accent)}
.work__meta span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;font-weight:500;color:var(--proof-muted)}
.work__list{display:none;margin:12px 0 0;padding:0;list-style:none}
/* annotation callouts */
.callout{position:absolute;display:flex;align-items:center;z-index:3;opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.work.is-inview .callout{opacity:1;transform:none;transition-delay:var(--d,0s)}
.work:hover .callout{opacity:0;transition:opacity .3s ease;transition-delay:0s}
.callout__d{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 26%,transparent);flex:none}
.callout__l{height:2px;width:22px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent));flex:none}
.callout__t{background:#fff;color:#15171b;font-size:11.5px;font-weight:700;line-height:1.22;padding:5px 9px;border-radius:7px;box-shadow:0 8px 20px rgba(0,0,0,.3);max-width:172px}
.callout--r{flex-direction:row-reverse}
.callout--r .callout__l{background:linear-gradient(270deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
.callout--r .callout__t{text-align:right}
.showcase__foot{margin-top:clamp(28px,4vw,48px);font-size:15.5px;line-height:1.6;font-weight:500;color:var(--proof-muted);max-width:640px}
.showcase__foot a{color:var(--accent);font-weight:700;text-decoration-thickness:1.5px;text-underline-offset:3px}
@media (hover:none){
  .work.is-inview .work__shot{animation:workscroll 18s ease-in-out infinite alternate}
  .work.is-inview .callout{opacity:1}
}
@keyframes workscroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + clamp(300px,34vw,420px)))}}
@media (max-width:820px){
  .works{grid-template-columns:1fr;gap:34px}
  .callout{display:none}
  .work__list{display:block}
  .work__list li{position:relative;padding-left:20px;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--proof-muted);line-height:1.45}
  .work__list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .work__shot,.work:hover .work__shot{transition:none;transform:none;animation:none}
  .work:hover .work__frame{transform:none}
}

/* ==========================================================================
   Section 6: "Pick your trade" demo, exhibited as a product sample (Bold)
   The widget has its OWN mini-brand (blue accent, lighter weights) so the
   demo boundary is obvious. Left = the demo in a browser frame; right = notes.
   ========================================================================== */
html[data-style="bold"] .section--demo{background:#EFE7DC}
.demo__head{max-width:760px;margin-bottom:clamp(34px,4.5vw,56px)}
.section--demo .demo__head .h2{margin-bottom:clamp(16px,2vh,26px)}
.js .section--demo .h2[data-reveal].in{transform:none}
.demo__sub{font-size:clamp(16px,1.5vw,18px);line-height:1.55;font-weight:600;color:var(--text)}
.demo__grid{display:grid;grid-template-columns:1.28fr .82fr;gap:clamp(26px,3.4vw,56px);align-items:center}

/* --- the display case (browser frame on a tilted, elevated card) --- */
.demo__case{position:relative;transition:transform .5s var(--ease),opacity .7s var(--ease)}
.js .demo__case[data-reveal]{opacity:0;transform:rotate(-1.5deg) translateY(22px)}
.js .demo__case[data-reveal].in{opacity:1;transform:rotate(-1.5deg)}
.js .demo__case[data-reveal].in:hover{transform:rotate(0deg)}
.demo__badge{position:absolute;top:-15px;left:22px;z-index:4;display:flex;align-items:baseline;gap:7px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:8px 15px;border-radius:999px;box-shadow:0 10px 26px rgba(233,99,60,.4)}
.demo__badge em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;opacity:.9;font-size:11.5px}
.demo__frame{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(30,22,14,.24),0 8px 22px rgba(30,22,14,.1);border:1px solid rgba(20,20,40,.08)}
.demo__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#f0f1f4;border-bottom:1px solid rgba(20,20,40,.07)}
.demo__d{width:11px;height:11px;border-radius:50%;background:#cfd3da}
.demo__d:nth-child(1){background:#ff5f57}.demo__d:nth-child(2){background:#febc2e}.demo__d:nth-child(3){background:#28c840}
.demo__addr{margin-left:12px;flex:1;font-size:12.5px;font-weight:600;color:#8a8f9a;background:#fff;border-radius:7px;padding:6px 14px}

/* --- the widget mini-brand --- */
.dw{--dw-accent:#2563eb;--dw-ink:#111a2e;--dw-muted:#6b7484;--dw-soft:#eef3fd;--dw-line:#e3e8f1;--dw-radius:13px;background:#fff;color:var(--dw-ink);padding:22px 22px 24px;font-family:var(--font)}
.dw-tabs{display:flex;gap:6px;background:#f3f5f9;padding:5px;border-radius:12px;margin-bottom:20px}
.dw-tab{flex:1;appearance:none;border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--dw-muted);padding:9px 6px;border-radius:9px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.dw-tab:hover{color:var(--dw-ink)}
.dw-tab.is-active{background:#fff;color:var(--dw-accent);box-shadow:0 2px 8px rgba(20,30,60,.1);font-weight:700}
.dw-panel{display:block}
.dw-panel[hidden]{display:none}
.dw-dia-wrap{background:var(--dw-soft);border-radius:var(--dw-radius);padding:8px 10px 4px;margin-bottom:18px}
.dw-dia{display:block;width:100%;height:auto;max-height:150px}
.dw-dia__ground{stroke:#c7d2e6;stroke-width:2;stroke-linecap:round}
.dw-dia__human{fill:#b7c2d6}
.dw-dia__obj{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.72);transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
.dw-dia__obj .o1{fill:#efb15a}.dw-dia__obj .o2{fill:#f8c581}.dw-dia__obj .o3{fill:#dd9d45}
.dw-dia__fill{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.35);fill:#efb15a;transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
.dw-van{fill:none;stroke:#b7c2d6;stroke-width:2.5;stroke-linejoin:round}
.dw-room .rbody{fill:#fff;stroke:#c1cbdb;stroke-width:2}
.dw-room .rroof{fill:#c1cbdb}
.dw-room.is-on .rbody{fill:var(--dw-accent)}
.dw-room.is-on .rroof{fill:#1b4fc0}
.dw-room{transition:opacity .3s ease;transform-box:fill-box;transform-origin:50% 100%}

.dw-ctrl{margin-bottom:16px}
.dw-ctrl__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.dw-ctrl__label{font-size:12px;font-weight:600;color:var(--dw-muted)}
.dw-ctrl__val{font-size:15px;font-weight:700;color:var(--dw-accent)}
.dw-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dw-accent) var(--pct,33%),var(--dw-line) var(--pct,33%));outline:none;cursor:pointer}
.dw-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--dw-accent);box-shadow:0 3px 10px rgba(20,30,60,.22);cursor:pointer;transition:transform .12s ease}
.dw-range::-webkit-slider-thumb:active{transform:scale(1.12)}
.dw-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--dw-accent);box-shadow:0 3px 10px rgba(20,30,60,.22);cursor:pointer}
.dw-ticks{display:flex;justify-content:space-between;margin-top:9px;padding:0 2px}
.dw-ticks span{font-size:11px;font-weight:600;color:var(--dw-muted)}

.dw-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.dw-pc{position:relative;display:inline-flex;align-items:center;flex:1;min-width:120px}
.dw-pc__in{width:100%;font-family:inherit;font-size:14px;font-weight:600;color:var(--dw-ink);background:#fff;border:1.5px solid var(--dw-line);border-radius:10px;padding:11px 74px 11px 13px;text-transform:uppercase;transition:border-color .16s ease}
.dw-pc__in::placeholder{color:var(--dw-muted);text-transform:none;font-weight:500}
.dw-pc__in:focus{outline:none;border-color:var(--dw-accent)}
.dw-pc__chk{position:absolute;right:8px;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#1a9d54;background:#e7f7ee;padding:4px 9px;border-radius:999px;opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.dw-pc__chk::before{content:"\2713";font-size:11px}
.dw-pc.is-covered .dw-pc__chk{opacity:1;transform:scale(1)}
.dw-row--mov .dw-pc{min-width:100px}

.dw-photo{appearance:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--dw-muted);background:#fff;border:1.5px dashed var(--dw-line);border-radius:10px;padding:11px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:border-color .16s ease,color .16s ease}
.dw-photo span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--dw-muted);padding:2px 6px;border-radius:5px}
.dw-photo:hover{border-color:var(--dw-accent);color:var(--dw-accent)}
.dw-photo.is-poke{animation:dwshake .4s ease}
@keyframes dwshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.dw-dates{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dw-dates::-webkit-scrollbar{display:none}
.dw-date{flex:0 0 auto;min-width:46px;appearance:none;font-family:inherit;background:#fff;border:1.5px solid var(--dw-line);border-radius:10px;padding:8px 6px;cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:1px;transition:border-color .16s ease,background .16s ease,color .16s ease}
.dw-date span{font-size:10px;font-weight:600;color:var(--dw-muted)}
.dw-date b{font-size:15px;font-weight:700;color:var(--dw-ink)}
.dw-date:hover{border-color:var(--dw-accent)}
.dw-date.is-on{background:var(--dw-accent);border-color:var(--dw-accent)}
.dw-date.is-on span,.dw-date.is-on b{color:#fff}

.dw-result{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--dw-soft);border:1px solid #dbe6fb;border-radius:var(--dw-radius);padding:15px 16px;flex-wrap:wrap}
.dw-result.is-settle{animation:dwsettle .4s var(--ease)}
@keyframes dwsettle{0%{transform:scale(.985);opacity:.7}100%{transform:scale(1);opacity:1}}
.dw-result__txt{flex:1;min-width:170px}
.dw-result__line{margin:0;font-size:15.5px;font-weight:600;color:var(--dw-ink);line-height:1.35}
.dw-result__line b{font-weight:800;color:var(--dw-accent)}
.dw-result__sub{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--dw-muted);font-weight:500}
.dw-book{appearance:none;border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;background:var(--dw-accent);border-radius:10px;padding:11px 16px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .16s ease,transform .16s var(--ease)}
.dw-book:hover{background:#1b4fc0;transform:translateY(-2px)}
.dw-book span{transition:transform .2s var(--ease)}
.dw-book:hover span{transform:translateX(3px)}

/* --- design notes (the soul) --- */
.notes__h{font-family:var(--display);font-size:clamp(21px,2.2vw,28px);font-weight:var(--hero-weight,900);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-transform:var(--heading-transform)}
.notes__intro{font-size:15px;line-height:1.55;font-weight:500;color:var(--text);margin:0 0 22px;transition:opacity .3s ease}
.notes__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.note{position:relative;padding:14px 16px 14px 18px;border-radius:12px;background:transparent;border:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease),transform .35s var(--ease)}
.note::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent);opacity:0;transition:opacity .3s ease}
.note b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.note span{display:block;font-size:13.5px;line-height:1.5;font-weight:500;color:var(--muted)}
/* engaged state: whichever control was touched highlights, others dim */
.demo__notes.is-engaged .note{opacity:.42}
.demo__notes.is-engaged .note.is-active{opacity:1;background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm);transform:translateX(2px)}
.demo__notes.is-engaged .note.is-active::before{opacity:1}
.demo__notes.is-engaged .note.is-active b{color:var(--accent)}
.demo__notes.is-engaged .notes__intro{opacity:.45}

@media (prefers-reduced-motion:reduce){
  .js .demo__case[data-reveal],.js .demo__case[data-reveal].in,.js .demo__case[data-reveal].in:hover{transform:none}
  .dw-dia__obj,.dw-dia__fill,.dw-pc__chk,.dw-result,.note,.dw-book{transition:none;animation:none}
}
@media (max-width:900px){
  .demo__grid{grid-template-columns:1fr;gap:30px}
  .js .demo__case[data-reveal],.js .demo__case[data-reveal].in{transform:none}
  .demo__badge{left:14px}
  .notes__list{gap:8px}
}
@media (max-width:520px){
  .dw{padding:18px 16px 20px}
  .dw-row{flex-direction:column;align-items:stretch}
  .dw-photo{justify-content:center}
  .dw-result{flex-direction:column;align-items:stretch}
  .dw-book{justify-content:center}
}

/* ==========================================================================
   Section 9: contact polish, waving man + form micro-interactions (Bold)
   ========================================================================== */
/* recolour the dark section to the waving-man image's charcoal so he floats
   with no visible image box (image bg = #1D1D1D; the shared proof dark #141519
   differs visibly, so this section gets its own matched dark) */
html[data-style="bold"] .section--cta{background:#1F1F1F}
.js .section--cta .h2[data-reveal].in{transform:none}
.section--cta .h2{line-height:1.12}
.contact__man{grid-area:man;align-self:center;justify-self:center;width:100%;max-width:300px;height:auto;display:block;-webkit-mask-image:radial-gradient(72% 82% at 50% 46%,#000 46%,transparent 84%);mask-image:radial-gradient(72% 82% at 50% 46%,#000 46%,transparent 84%)}
.contact__copy{grid-area:copy}
.form-card{grid-area:form}

/* floating labels */
.field{position:relative}
.field > label{position:absolute;left:12px;top:13px;font-size:15px;font-weight:500;color:var(--muted);pointer-events:none;transform-origin:left top;transition:transform .16s var(--ease),color .16s ease;background:var(--surface);padding:0 6px;line-height:1;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field > label{top:14px}
.field input,.field textarea,.field select{padding:15px 13px 13px}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field--select > label{transform:translateY(-23px) scale(.82);color:var(--accent);font-weight:700}
.field input::placeholder,.field textarea::placeholder{color:transparent}
.field input:focus::placeholder,.field textarea:focus::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field--select select{cursor:pointer}

/* kind inline validation (no red shouting) */
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#E0A24A;box-shadow:0 0 0 3px rgba(224,162,74,.14)}
.field__msg{margin:7px 0 0;font-size:12.5px;line-height:1.4;font-weight:600;color:#B77E2E}

/* submit button morph: sending -> sent */
.form__submit{position:relative;overflow:hidden;transition:background .2s ease}
.form__submit[disabled]{cursor:default}
.form__submit-label{display:inline-flex;align-items:center;gap:9px}
.form__submit.is-sending .form__submit-label::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dwspin .7s linear infinite}
.form__submit.is-sent{background:#1fa056}
.form__submit.is-sent .form__submit-label::before{content:"\2713";width:auto;height:auto;border:none;font-size:16px;font-weight:800;animation:dwcheck .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes dwspin{to{transform:rotate(360deg)}}
@keyframes dwcheck{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .form__submit.is-sending .form__submit-label::before{animation:none}
  .form__submit.is-sent .form__submit-label::before{animation:none}
  .contact__man{transition:none}
}
@media (max-width:760px){
  .contact{grid-template-columns:40% 1fr;grid-template-areas:"man copy" "form form";align-items:end;gap:16px clamp(14px,3vw,24px)}
  .contact__man{align-self:end;max-width:180px}
  .form-card{margin-top:14px}
}
@media (max-width:460px){
  .contact{grid-template-columns:34% 1fr}
}

/* ==========================================================================
   Section 8: "How we start" - pinned 3-step progression (Bold)
   Reworked to mirror Section 4: sticky list with black active slab, animated
   worker floating on the matching cream, one crossfading spot per step.
   ========================================================================== */
html[data-style="bold"] .section--start{background:#FCEEDD}
.start{position:relative}
.start__h2{margin-bottom:clamp(20px,2.6vw,34px)}
.start__step{padding:14px 18px;border-radius:14px;transition:background .3s var(--ease),padding .3s var(--ease)}
.start__body{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.start__n{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.06em;padding-top:5px}
.start__t{font-family:var(--display);font-size:clamp(19px,2vw,26px);font-weight:var(--hero-weight,900);letter-spacing:-.02em;color:var(--ink);line-height:1.12;margin:0;text-transform:var(--heading-transform);transition:color .3s ease}
.start__d{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--muted);margin:4px 0 0;transition:color .3s ease}
.start__spot img,.start__spot video{width:100%;max-width:420px;height:auto;object-fit:contain;display:block;-webkit-mask-image:radial-gradient(56% 90% at 50% 48%,#000 62%,transparent 97%);mask-image:radial-gradient(56% 90% at 50% 48%,#000 62%,transparent 97%)}
.start__step.is-active{background:var(--ink);padding-left:22px}
.start__step.is-active .start__t{color:var(--on-accent)}
.start__step.is-active .start__d{color:color-mix(in srgb,var(--on-accent) 62%,transparent)}

@media (min-width:900px){
  .start{height:200vh}
  .start__pin{position:sticky;top:0;height:100vh}
  .start__stage{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center}
  .start__col{width:60%}
  .start__h2{margin-bottom:clamp(42px,5.2vh,66px);white-space:nowrap}
  .start__list{position:relative;display:flex;flex-direction:column;gap:16px}
  .start__step{padding:12px 20px}
  .start__t{font-size:clamp(19px,1.95vw,27px)}
  .start__step:not(.is-active) .start__t{color:color-mix(in srgb,var(--ink) 36%,transparent)}
  .start__d{height:1.4em;opacity:0;overflow:hidden;margin-top:4px;white-space:nowrap;transition:opacity .3s var(--ease)}
  .start__step.is-active .start__d{opacity:1}
  .start__spot{position:absolute;top:0;bottom:0;left:100%;right:-66%;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-24px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
  :where(.start__step:first-child) .start__spot{opacity:1;transform:none}
  .start__spot.is-on{opacity:1;transform:none}
  .start__spot.is-out{opacity:0;transform:translateY(24px)}
  .start__spot img,.start__spot video{height:196%;width:auto;max-width:none;object-fit:contain;-webkit-mask-image:radial-gradient(56% 90% at 50% 48%,#000 60%,transparent 96%);mask-image:radial-gradient(56% 90% at 50% 48%,#000 60%,transparent 96%)}
}
.js .section--start .h2[data-reveal].in{transform:none}

@media (prefers-reduced-motion:reduce) and (min-width:900px){
  .section--start{padding:clamp(56px,7vw,96px) 0}
  .start{height:auto}
  .start__pin{position:static;height:auto}
  .start__stage{position:static;height:auto;overflow:visible;display:block}
  .start__col{width:100%}
  .start__list{display:flex;flex-direction:column;gap:8px}
  .start__step{display:flex;flex-direction:column;gap:6px;padding:10px 0 22px}
  .start__spot{position:static;opacity:1;transform:none;transition:none;display:block;pointer-events:auto}
  .start__spot img,.start__spot video{height:auto;width:auto;max-width:300px;margin:0 auto;display:block;transform:none;-webkit-mask-image:none;mask-image:none}
  .start__d{height:auto;opacity:1;overflow:visible;margin-top:4px;white-space:normal}
  .start__step.is-active{background:transparent;padding-left:0}
  .start__step .start__t{color:var(--ink)}
  .start__step .start__d{color:var(--muted)}
}
@media (max-width:899px){
  .section--start{padding:clamp(48px,11vw,76px) 0}
  .start__col{width:100%}
  .start__list{display:flex;flex-direction:column;gap:8px}
  .start__step{display:flex;flex-direction:column;gap:6px;padding:10px 0 22px}
  .start__body{gap:12px}
  .start__spot img,.start__spot video{max-height:330px;width:auto;max-width:100%;margin:0 auto 2px;display:block}
  .start__step.is-active{background:transparent;padding-left:0}
  .start__step.is-active .start__t{color:var(--ink)}
  .start__step.is-active .start__d{color:var(--muted)}
}

/* ---- mobile refinements: hero guy-first + headline fill, section headroom ---- */
@media (max-width:899px){
  html[data-style="bold"] .hero__grid{display:flex;flex-direction:column;align-items:stretch;padding-left:0;padding-right:0}
  html[data-style="bold"] .hero__art{order:-1;position:relative;transform:none;right:auto;left:auto;top:auto;width:min(64vw,272px);max-width:none;height:auto;aspect-ratio:1/1;margin:0 auto 2px}
  html[data-style="bold"] .hero__inner{width:100%}
  .hero__eyebrow{margin-bottom:16px}
  .hero__sub{margin-top:22px}
  /* keep images clear of the section headline on mobile */
  .section--segs .head{margin-bottom:clamp(22px,6vw,32px)}
  .five__h2,.start__h2{margin-bottom:clamp(20px,5vw,30px)}
}

/* mobile: straighten the demo case so its tilt does not overflow the viewport */
@media (max-width:760px){
  .js .demo__case[data-reveal]{transform:translateY(20px)}
  .js .demo__case[data-reveal].in,.js .demo__case[data-reveal].in:hover{transform:none}
  .section--demo{overflow-x:clip}
  .demo__case{max-width:100%}
}

/* ==========================================================================
   ALTERNATE DESIGN THEMES (data-theme axis; layout stays data-style="bold").
   Same copy, structure and DOM as the main design. These are drastically
   different, IMAGE-FREE reskins -- every worker video, illustration and
   screenshot is hidden, and the design language is ported from the earlier
   divergent v6 designs (industrial + marketing). Default (no data-theme) is the
   untouched, media-rich main design.
   ========================================================================== */

/* ---- image-free: hide every video / illustration / screenshot ---- */
html[data-theme] .hero__art,
html[data-theme] .seg__vid,
html[data-theme] .five__spot,
html[data-theme] .start__spot,
html[data-theme] .contact__man,
html[data-theme] .pain__vid,
html[data-theme] .pain__vig,
html[data-theme] .tmar,
html[data-theme] .proofvid,
html[data-theme] .proofvid-scrim{display:none !important}

/* ---- pinned scroll sections collapse to static lists (JS also bails) ---- */
@media (min-width:900px){
  html[data-theme] .five,html[data-theme] .start{height:auto}
  html[data-theme] .five__pin,html[data-theme] .start__pin{position:static;height:auto}
  html[data-theme] .five__stage,html[data-theme] .start__stage{position:static;height:auto;overflow:visible;display:block}
  html[data-theme] .five__col,html[data-theme] .start__col{width:100%;padding-top:0}
  html[data-theme] .five__list,html[data-theme] .start__list{position:static}
  html[data-theme] .five__h2,html[data-theme] .start__h2{white-space:normal}
  html[data-theme] .five__d,html[data-theme] .start__d{height:auto;opacity:1;overflow:visible;white-space:normal}
  html[data-theme] .five__item:not(.is-active) .five__t,
  html[data-theme] .start__step:not(.is-active) .start__t{color:var(--ink)}
  html[data-theme] .five__item.is-active,html[data-theme] .start__step.is-active{background:transparent;padding-left:20px}
  html[data-theme] .five__item.is-active .five__t,html[data-theme] .start__step.is-active .start__t{color:var(--ink)}
  html[data-theme] .five__item.is-active .five__d,html[data-theme] .start__step.is-active .start__d{color:var(--muted)}
}

/* ---- reflow the sections that were two-column around media ---- */
html[data-theme] .seg{grid-template-columns:1fr}
html[data-theme] .seg:not(.seg--flip) .seg__art{margin-left:0}
html[data-theme] .contact{grid-template-columns:1fr;grid-template-areas:"copy" "form"}
/* the alt themes put a hard border/card edge right under the S2 headline, so give
   the headline real clearance (Bold keeps its tight margin because the seg video
   overlaps upward into that space) */
html[data-theme] .section--segs .head{margin-bottom:clamp(30px,3.4vw,50px)}
html[data-theme] .h2{line-height:1.08}

/* ==========================================================================
   THEME 1 -- INDUSTRIAL: dark poster hero, hazard stripe, spec-sheet bands,
   condensed uppercase Oswald, hi-vis orange, hard offset shadows.
   ========================================================================== */
html[data-theme="industrial"]{
  --bg:#EFEBE3;--band-bg:#E6E0D2;--surface:#ffffff;--ink:#15171b;--text:#3d3f47;--muted:#71737d;--line:#D6D0C4;
  --accent:#E4602F;--brand:#E4602F;--brand-hover:#c94f22;--accent-soft:#F7E4D8;--accent-ink:#8a3a1c;--on-accent:#fff;
  --hero-ink:#ffffff;--hero-muted:rgba(255,255,255,.64);--rot-color:#E4602F;
  --ticker-bg:#E4602F;--ticker-ink:#15171b;
  --proof-bg:#16181c;--proof-ink:#ffffff;--proof-muted:rgba(255,255,255,.6);--proof-stroke:rgba(255,255,255,.1);
  --logo-top-filter:none;
  --card-radius:0px;--btn-radius:2px;--card-border:1.5px solid var(--ink);
  --shadow:6px 6px 0 rgba(21,23,27,.85);--shadow-sm:3px 3px 0 rgba(21,23,27,.16);
  --heading-transform:uppercase;--h2-ls:0;
  --display:"Oswald","Arial Narrow",sans-serif;--hero-weight:600;--hero-ls:.01em;
}
/* dark poster hero */
html[data-theme="industrial"] .hero,
html[data-theme="industrial"] .nav--top{background:#16181c}
html[data-theme="industrial"] .hero__title{line-height:1.02}
html[data-theme="industrial"] .hero__eyebrow{font-family:var(--mono);letter-spacing:.3em;color:rgba(255,255,255,.6)}
html[data-theme="industrial"] .hero__eyebrow::before{content:"// "}
html[data-theme="industrial"] .rotator__word{display:inline-block;line-height:1.08;background:#0d0e11;color:var(--accent);padding:0 .14em .04em}
html[data-theme="industrial"] .rotator__caret{background:var(--accent)}
html[data-theme="industrial"] .btn--hero{color:#fff;border-color:rgba(255,255,255,.4)}
html[data-theme="industrial"] .btn--hero:hover{border-color:#fff}
/* hazard stripe + skewed shop shapes */
html[data-theme="industrial"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;z-index:1;background:repeating-linear-gradient(-45deg,var(--accent) 0 16px,#0d0e11 16px 32px)}
html[data-theme="industrial"] .shape{display:block;position:absolute;z-index:0}
html[data-theme="industrial"] .shape--a{width:44vw;height:130%;right:-14vw;top:-15%;background:linear-gradient(180deg,#E4602F,#c94f22);transform:skewX(-16deg);opacity:.9;border-radius:0}
html[data-theme="industrial"] .shape--b{width:28vw;height:130%;right:-20vw;top:-15%;background:#22242a;transform:skewX(-16deg);opacity:1;border-radius:0}
html[data-theme="industrial"] .shape--c{display:none}
/* spec-sheet detailing on the current sections */
html[data-theme="industrial"] .ticker{border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
html[data-theme="industrial"] .ticker__track i{color:#15171b}
html[data-theme="industrial"] .segs{border-top:2px solid var(--ink)}
html[data-theme="industrial"] .seg{border-bottom:2px solid var(--ink);padding:34px 0;align-items:start}
html[data-theme="industrial"] .five__item,html[data-theme="industrial"] .start__step{border-bottom:1.5px solid var(--line)}
html[data-theme="industrial"] .five__n,html[data-theme="industrial"] .start__n{font-family:var(--mono)}
html[data-theme="industrial"] .btn--primary{border:2px solid transparent}
html[data-theme="industrial"] .drift,html[data-theme="industrial"] .photoband__word{-webkit-text-stroke:1.5px rgba(255,255,255,.12)}
/* dark process + cta + footer bands */
html[data-theme="industrial"] .section--start{background:#16181c}
html[data-theme="industrial"] .section--start .h2,html[data-theme="industrial"] .section--start .start__t{color:#fff}
html[data-theme="industrial"] .section--start .start__d,html[data-theme="industrial"] .section--start .start__n{color:rgba(255,255,255,.66)}
html[data-theme="industrial"] .section--start .start__step{border-bottom-color:rgba(255,255,255,.14)}
html[data-theme="industrial"] .section--cta,html[data-theme="industrial"] .footer{background:#16181c}
/* --- industrial imagery: duotone worker panel + skip-lorry proof backdrop --- */
html[data-theme="industrial"] .shape--a,html[data-theme="industrial"] .shape--b{display:none}
html[data-theme="industrial"] .hero{overflow:hidden}
html[data-theme="industrial"] .hero{--hero-img:url(assets/work/ind-movers-hd.webp)}
html[data-theme="industrial"][data-trade="movers"] .hero{--hero-img:url(assets/work/ind-movers-hd.webp)}
html[data-theme="industrial"][data-trade="rubbish"] .hero{--hero-img:url(assets/work/ind-rubbish-hd.webp)}
html[data-theme="industrial"][data-trade="skip"] .hero{--hero-img:url(assets/work/ind-skip-hd.webp)}
html[data-theme="industrial"] .hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:46%;z-index:0;background:linear-gradient(100deg,#16181c 2%,rgba(22,24,28,.58) 40%,transparent 74%),var(--hero-img) right center/cover;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);transition:opacity .28s ease}
html.trade-fade[data-theme="industrial"] .hero::before{opacity:0}
@media (max-width:899px){
  html[data-theme="industrial"] .hero::before{left:0;clip-path:none;background:linear-gradient(180deg,rgba(22,24,28,.82),rgba(22,24,28,.93)),var(--hero-img) center 22%/cover}
  html[data-theme="industrial"] .hero__grid{position:relative;z-index:2}
}
html[data-theme="industrial"] .section--proof{position:relative;overflow:hidden}
html[data-theme="industrial"] .section--proof::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#16181c 6%,rgba(22,24,28,.62) 45%,#16181c),url(assets/work/ind-truck-hd2.webp) center/cover;opacity:.55}
html[data-theme="industrial"] .section--proof>*{position:relative;z-index:1}
html[data-theme="industrial"] .work__frame{border-radius:0;border:2px solid rgba(255,255,255,.18)}
html[data-theme="industrial"] .work__bar{background:#0d0e11}

/* ==========================================================================
   THEME 2 -- MARKETING: deep-violet hero, coral accent, Fraunces serif with
   italic accents, rounded cards, coloured number chips, lavender bands.
   ========================================================================== */
html[data-theme="marketing"]{
  --bg:#FBF7F1;--band-bg:#F3ECE1;--surface:#ffffff;--ink:#2a2340;--text:#5a5470;--muted:#9b93ab;--line:#EBE3D8;
  --accent:#E9633C;--brand:#E9633C;--brand-hover:#d5522d;--accent-soft:#FDEAE0;--accent-ink:#9c4326;--on-accent:#fff;
  --hero-ink:#ffffff;--hero-muted:rgba(255,255,255,.7);--rot-color:#FF8B68;
  --ticker-bg:#E4DEF9;--ticker-ink:#2a2340;
  --proof-bg:#221C4E;--proof-ink:#ffffff;--proof-muted:rgba(255,255,255,.64);--proof-stroke:rgba(255,255,255,.12);
  --logo-top-filter:none;
  --card-radius:26px;--btn-radius:999px;--card-border:1px solid transparent;
  --shadow:0 4px 12px rgba(80,60,120,.07),0 24px 48px rgba(80,60,120,.1);--shadow-sm:0 2px 12px rgba(80,60,120,.08);
  --display:"Fraunces",Georgia,serif;--hero-weight:600;--hero-ls:-.01em;
}
/* violet magazine hero */
html[data-theme="marketing"] .hero,
html[data-theme="marketing"] .nav--top{background:#221C4E}
html[data-theme="marketing"] .hero__title{line-height:1.06}
html[data-theme="marketing"] .rotator__word,html[data-theme="marketing"] .h2 em{font-style:italic}
html[data-theme="marketing"] .rotator__caret{background:var(--rot-color)}
html[data-theme="marketing"] .btn--hero{color:#fff;border-color:rgba(255,255,255,.42)}
html[data-theme="marketing"] .btn--hero:hover{border-color:#fff}
html[data-theme="marketing"] .shape{display:block;position:absolute;z-index:0;border-radius:50%}
html[data-theme="marketing"] .shape--a{width:640px;height:640px;border:46px solid #5F55C8;opacity:.5;left:-240px;top:-220px;background:none}
html[data-theme="marketing"] .shape--b{width:430px;height:430px;border:36px solid #8F86E8;opacity:.35;right:-160px;bottom:-190px;background:none}
html[data-theme="marketing"] .shape--c{width:110px;height:110px;background:#FF8B68;right:12vw;top:16vh;opacity:.9}
@media (max-width:560px){ html[data-theme="marketing"] .shape--c{display:none} }
html[data-theme="marketing"] .ticker__track i{color:#E9633C}
/* coloured number chips on the numbered lists */
html[data-theme="marketing"] .five__n,html[data-theme="marketing"] .start__n{font-family:var(--font);font-weight:800}
html[data-theme="marketing"] .five__item:nth-child(2) .five__n,html[data-theme="marketing"] .start__step:nth-child(2) .start__n{background:#1FA98F;color:#fff}
html[data-theme="marketing"] .five__item:nth-child(3) .five__n,html[data-theme="marketing"] .start__step:nth-child(3) .start__n{background:#5B76D8;color:#fff}
html[data-theme="marketing"] .five__item:nth-child(4) .five__n{background:#E9633C;color:#fff}
html[data-theme="marketing"] .five__item:nth-child(5) .five__n{background:#1FA98F;color:#fff}
/* soft rounded cards on the trade + step blocks */
html[data-theme="marketing"] .seg{background:var(--surface);border-radius:26px;padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-sm)}
html[data-theme="marketing"] .segs{gap:22px}
html[data-theme="marketing"] .section--start{background:#EFEAFB}
html[data-theme="marketing"] .section--cta,html[data-theme="marketing"] .footer{background:#221C4E}
html[data-theme="marketing"] .drift,html[data-theme="marketing"] .photoband__word{-webkit-text-stroke:1.5px rgba(255,255,255,.1)}
/* --- marketing imagery: arch-top editorial hero card + rounded demo frames --- */
html[data-theme="marketing"] .hero{overflow:hidden}
html[data-theme="marketing"] .hero{--hero-img:url(assets/work/mkt-movers-hd.webp)}
html[data-theme="marketing"][data-trade="movers"] .hero{--hero-img:url(assets/work/mkt-movers-hd.webp)}
html[data-theme="marketing"][data-trade="rubbish"] .hero{--hero-img:url(assets/work/mkt-rubbish-hd.webp)}
html[data-theme="marketing"][data-trade="skip"] .hero{--hero-img:url(assets/work/mkt-skip-hd2.webp)}
html[data-theme="marketing"] .hero::before{content:"";position:absolute;right:clamp(24px,5vw,86px);top:50%;transform:translateY(-50%);width:min(36vw,400px);height:min(56vh,540px);z-index:1;background:var(--hero-img) center/cover;border-radius:210px 210px 30px 30px;box-shadow:0 30px 70px rgba(10,6,40,.4);border:1px solid rgba(255,255,255,.14);transition:opacity .28s ease}
html.trade-fade[data-theme="marketing"] .hero::before{opacity:0}
html[data-theme="marketing"] .shape--c{right:31vw;top:12vh}
@media (max-width:899px){
  html[data-theme="marketing"] .hero::before{right:auto;left:0;top:0;bottom:0;transform:none;width:auto;height:auto;border-radius:0;box-shadow:none;border:0;background:linear-gradient(180deg,rgba(34,28,78,.8),rgba(34,28,78,.92)),var(--hero-img) center 30%/cover}
  html[data-theme="marketing"] .hero__grid{position:relative;z-index:2}
}
html[data-theme="marketing"] .work__frame{border-radius:20px;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(20,10,50,.42)}

/* ==========================================================================
   ALT-THEME LAYOUT + MOTION -- give the flattened sections real shape and life
   ========================================================================== */

/* ---------- FIVE THINGS ---------- */
/* Industrial: bold numbered manifest, hi-vis sweep fills each row on hover */
html[data-theme="industrial"] .five__list{border-top:2px solid var(--ink);gap:0}
html[data-theme="industrial"] .five__item{position:relative;border-bottom:2px solid var(--ink);padding:20px 22px 20px 98px;overflow:hidden;transition:color .3s ease}
html[data-theme="industrial"] .five__body{display:block}
html[data-theme="industrial"] .five__tx{position:relative;z-index:1}
html[data-theme="industrial"] .five__n{position:absolute;left:20px;top:16px;z-index:2;font-family:var(--mono);font-size:clamp(30px,3vw,42px);line-height:1;font-weight:700;color:var(--accent);letter-spacing:-.02em}
html[data-theme="industrial"] .five__item::before{content:"";position:absolute;inset:0;z-index:0;background:var(--accent);transform:translateX(-101%);transition:transform .42s var(--ease)}
html[data-theme="industrial"] .five__item:hover::before{transform:translateX(0)}
html[data-theme="industrial"] .five__item:hover .five__t,html[data-theme="industrial"] .five__item:hover .five__d{color:#15171b}
html[data-theme="industrial"] .five__item:hover .five__n{color:rgba(21,23,27,.55)}
/* Marketing: soft card grid (first card wide), coloured chips, lift on hover */
@media (min-width:720px){
  html[data-theme="marketing"] .five__list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  html[data-theme="marketing"] .five__item:first-child{grid-column:1 / -1}
}
html[data-theme="marketing"] .five__item{background:var(--surface);border-radius:22px;padding:26px 28px;box-shadow:var(--shadow-sm);transition:box-shadow .4s ease}
html[data-theme="marketing"] .five__item:hover{box-shadow:var(--shadow)}
html[data-theme="marketing"] .five__body{display:block}
html[data-theme="marketing"] .five__n{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font);font-weight:800;font-size:15px;margin-bottom:14px;padding:0}
html[data-theme="marketing"] .five__item:nth-child(2) .five__n{background:#1FA98F}
html[data-theme="marketing"] .five__item:nth-child(3) .five__n{background:#5B76D8}
html[data-theme="marketing"] .five__item:nth-child(4) .five__n{background:#E9633C}
html[data-theme="marketing"] .five__item:nth-child(5) .five__n{background:#1FA98F}
html[data-theme="marketing"] .five__d{margin-top:6px}

/* ---------- HOW WE START ---------- */
/* Industrial: dark technical stepper with a rule + squared orange nodes */
html[data-theme="industrial"] .start__list{position:relative;gap:0}
html[data-theme="industrial"] .start__list::before{content:"";position:absolute;left:26px;top:24px;bottom:28px;width:2px;background:rgba(255,255,255,.22)}
html[data-theme="industrial"] .start__step{position:relative;padding:8px 20px 32px 78px;border-bottom:none}
html[data-theme="industrial"] .start__body{display:block}
html[data-theme="industrial"] .start__n{position:absolute;left:8px;top:4px;width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;background:#16181c;border:2px solid var(--accent);color:var(--accent);font-family:var(--mono);font-weight:700;transition:background .3s ease,color .3s ease}
html[data-theme="industrial"] .start__step:hover .start__n{background:var(--accent);color:#15171b}
/* title sits on the dark process band -> force white over the static-mode ink rule */
html[data-theme="industrial"] .section--start .start__step .start__t{color:#fff}
html[data-theme="industrial"] .section--start .start__step .start__d{color:rgba(255,255,255,.66)}
/* Marketing: three rounded cards in a row, coloured nodes, lift on hover */
@media (min-width:760px){
  html[data-theme="marketing"] .start__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
}
html[data-theme="marketing"] .start__step{background:var(--surface);border-radius:22px;padding:28px 26px;box-shadow:var(--shadow-sm);transition:box-shadow .4s ease}
html[data-theme="marketing"] .start__step:hover{box-shadow:var(--shadow)}
html[data-theme="marketing"] .start__body{display:block}
html[data-theme="marketing"] .start__n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font);font-weight:800;margin-bottom:12px;padding:0}
html[data-theme="marketing"] .start__step:nth-child(2) .start__n{background:#1FA98F}
html[data-theme="marketing"] .start__step:nth-child(3) .start__n{background:#5B76D8}

/* ---------- TRADES + PAINS hover life ---------- */
html[data-theme="marketing"] .seg{transition:transform .35s var(--ease),box-shadow .35s ease}
html[data-theme="marketing"] .seg:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
html[data-theme="industrial"] .seg .seg__go svg{transition:transform .25s var(--ease)}
html[data-theme="industrial"] .seg:hover .seg__go svg,html[data-theme="marketing"] .seg:hover .seg__go svg{transform:translateX(5px)}
html[data-theme="industrial"] .pain{transition:transform .22s ease,box-shadow .22s ease}
html[data-theme="industrial"] .pain:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(21,23,27,.9)}
html[data-theme="marketing"] .pain{transition:box-shadow .4s ease}
html[data-theme="marketing"] .pain:hover{box-shadow:var(--shadow)}
/* JIGGLE: every marketing card wobbles on hover so it stands out */
@keyframes mktJiggle{
  0%{transform:rotate(0)}
  16%{transform:rotate(-3.6deg)}
  33%{transform:rotate(3deg)}
  50%{transform:rotate(-2.1deg)}
  66%{transform:rotate(1.3deg)}
  83%{transform:rotate(-.6deg)}
  100%{transform:rotate(0)}
}
html[data-theme="marketing"] .five__item:hover,
html[data-theme="marketing"] .start__step:hover,
html[data-theme="marketing"] .pains .pain:hover,
html[data-theme="marketing"] .seg:hover,
html[data-theme="marketing"] .trust-item:hover{animation:mktJiggle .55s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html[data-theme="marketing"] .five__item:hover,html[data-theme="marketing"] .start__step:hover,
  html[data-theme="marketing"] .pains .pain:hover,html[data-theme="marketing"] .seg:hover,
  html[data-theme="marketing"] .trust-item:hover{animation:none}
}

/* the tagged list items reveal with a hair more travel for a livelier stagger */
html[data-theme].js .five__item[data-reveal],
html[data-theme].js .start__step[data-reveal]{transform:translateY(30px)}
html[data-theme].js .five__item[data-reveal].in,
html[data-theme].js .start__step[data-reveal].in{transform:none}
/* marketing cards spin-and-rise in, matching the playful hover tilt */
html[data-theme="marketing"].js .five__item[data-reveal],
html[data-theme="marketing"].js .start__step[data-reveal],
html[data-theme="marketing"].js .pains .pain[data-reveal]{transform:translateY(34px) rotate(-2.6deg)}
html[data-theme="marketing"].js .five__item[data-reveal].in,
html[data-theme="marketing"].js .start__step[data-reveal].in,
html[data-theme="marketing"].js .pains .pain[data-reveal].in{transform:none}

/* ---------- TRADES ("Then this is for you"): per-trade imagery ---------- */
html[data-theme] .seg__art{max-width:none;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}
html[data-theme="industrial"] .segs>.seg:nth-child(1) .seg__art{background-image:url(assets/work/ind-movers-hd.webp)}
html[data-theme="industrial"] .segs>.seg:nth-child(2) .seg__art{background-image:url(assets/work/ind-rubbish-hd.webp)}
html[data-theme="industrial"] .segs>.seg:nth-child(3) .seg__art{background-image:url(assets/work/ind-skip-hd.webp)}
html[data-theme="marketing"] .segs>.seg:nth-child(1) .seg__art{background-image:url(assets/work/mkt-movers-hd.webp)}
html[data-theme="marketing"] .segs>.seg:nth-child(2) .seg__art{background-image:url(assets/work/mkt-rubbish-hd.webp)}
html[data-theme="marketing"] .segs>.seg:nth-child(3) .seg__art{background-image:url(assets/work/mkt-skip-hd2.webp)}
/* Industrial: 2-column spec-sheet row, bordered image, alternating sides */
html[data-theme="industrial"] .seg .seg__art{aspect-ratio:4/3;border:2px solid var(--ink)}
@media (min-width:760px){
  html[data-theme="industrial"] .seg{grid-template-columns:1.02fr .98fr;align-items:center;gap:clamp(30px,4vw,58px)}
  html[data-theme="industrial"] .seg .seg__art{height:100%;min-height:240px;aspect-ratio:auto}
  html[data-theme="industrial"] .seg:not(.seg--flip) .seg__copy{order:0}
  html[data-theme="industrial"] .seg:not(.seg--flip) .seg__art{order:1}
  html[data-theme="industrial"] .seg--flip .seg__copy{order:1}
  html[data-theme="industrial"] .seg--flip .seg__art{order:0}
}
/* Marketing: keep the plain rounded card; a PROPER trade image sits on the right
   of the card at full strength, with only its left edge feathered into the card */
html[data-theme="marketing"] .seg{grid-template-columns:1fr;position:relative;overflow:hidden}
html[data-theme="marketing"] .seg .seg__art{position:absolute;top:0;right:0;bottom:0;left:auto;width:47%;z-index:0;order:0;margin:0;aspect-ratio:auto;max-width:none;opacity:1;
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%);
  transition:transform .6s var(--ease)}
html[data-theme="marketing"] .seg__copy{position:relative;z-index:1;max-width:min(100%,470px)}
html[data-theme="marketing"] .seg:hover .seg__art{transform:scale(1.03)}
@media (max-width:640px){
  html[data-theme="marketing"] .seg .seg__art{width:100%;opacity:.28;-webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 100%);mask-image:linear-gradient(90deg,transparent 34%,#000 100%)}
  html[data-theme="marketing"] .seg__copy{max-width:100%}
}

/* ---------- MARKETING: faded in-card imagery applied across the whole variant ---------- */
html[data-theme="marketing"] .pain,
html[data-theme="marketing"] .five__item,
html[data-theme="marketing"] .start__step{position:relative;overflow:hidden}
html[data-theme="marketing"] .pain::after,
html[data-theme="marketing"] .five__item::after,
html[data-theme="marketing"] .start__step::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--card-img) center/cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 100%);mask-image:linear-gradient(90deg,transparent 40%,#000 100%);
  opacity:.42;transition:opacity .4s var(--ease)}
html[data-theme="marketing"] .pain:hover::after,
html[data-theme="marketing"] .five__item:hover::after,
html[data-theme="marketing"] .start__step:hover::after{opacity:.55}
/* keep card content above the faded image */
html[data-theme="marketing"] .pain>*,
html[data-theme="marketing"] .five__body,html[data-theme="marketing"] .five__n,html[data-theme="marketing"] .five__foot,
html[data-theme="marketing"] .start__body,html[data-theme="marketing"] .start__n{position:relative;z-index:1}
/* per-card image assignment */
html[data-theme="marketing"] .pains .pain:nth-child(1){--card-img:url(assets/work/mkt-pain-1-hd.webp)}
html[data-theme="marketing"] .pains .pain:nth-child(2){--card-img:url(assets/work/mkt-pain-2-hd.webp)}
html[data-theme="marketing"] .pains .pain:nth-child(3){--card-img:url(assets/work/mkt-pain-3-hd.webp)}
html[data-theme="marketing"] .five__item:nth-child(1){--card-img:url(assets/work/mkt-five-1-hd.webp)}
html[data-theme="marketing"] .five__item:nth-child(2){--card-img:url(assets/work/mkt-five-2-hd.webp)}
html[data-theme="marketing"] .five__item:nth-child(3){--card-img:url(assets/work/mkt-five-3-hd.webp)}
html[data-theme="marketing"] .five__item:nth-child(4){--card-img:url(assets/work/mkt-five-4-hd.webp)}
html[data-theme="marketing"] .five__item:nth-child(5){--card-img:url(assets/work/mkt-five-5-hd.webp)}
html[data-theme="marketing"] .start__step:nth-child(1){--card-img:url(assets/work/mkt-start-call-hd.webp)}
html[data-theme="marketing"] .start__step:nth-child(2){--card-img:url(assets/work/mkt-start-plan-hd.webp)}
html[data-theme="marketing"] .start__step:nth-child(3){--card-img:url(assets/work/mkt-start-jobs-hd.webp)}

/* ---------- INDUSTRIAL: framed duotone photo plates (spec-sheet, hard edges) ---------- */
/* pains: a bordered photo plate across the top of each card */
html[data-theme="industrial"] .pain{position:relative;overflow:hidden;padding-top:150px}
html[data-theme="industrial"] .pain::after{content:"";position:absolute;top:0;left:0;right:0;height:128px;z-index:0;pointer-events:none;background:var(--card-img) center/cover;border-bottom:2px solid var(--ink)}
html[data-theme="industrial"] .pain>*{position:relative;z-index:1}
/* how-we-start: a hard-framed duotone plate with an offset shadow on the right of each dark step */
html[data-theme="industrial"] .start__step{position:relative}
html[data-theme="industrial"] .start__step::after{content:"";pointer-events:none;background:var(--card-img) center/cover;border:2px solid var(--accent)}
/* two-column grid: text on the left, framed plate on the right -> can never overlap */
@media (min-width:761px){
  html[data-theme="industrial"] .start__step{display:grid;grid-template-columns:minmax(0,1fr) 38%;column-gap:clamp(28px,4vw,56px);align-items:center;padding:14px 20px 14px 56px}
  html[data-theme="industrial"] .start__step::after{align-self:center;width:100%;height:auto;aspect-ratio:16/7;min-height:140px}
}
@media (max-width:760px){
  html[data-theme="industrial"] .start__step::after{display:none}
}
html[data-theme="industrial"] .start__body{position:relative;z-index:1}
/* the number box stacks above the title -> reset the stray offset and give it a gap so it never overlaps the title */
html[data-theme="industrial"] .start__step .start__n{position:relative;left:0;top:0;z-index:2;margin:0 0 14px}
html[data-theme="industrial"] .pains .pain:nth-child(1){--card-img:url(assets/work/ind-pain-1-hd.webp)}
html[data-theme="industrial"] .pains .pain:nth-child(2){--card-img:url(assets/work/ind-pain-2-hd.webp)}
html[data-theme="industrial"] .pains .pain:nth-child(3){--card-img:url(assets/work/ind-pain-3-hd.webp)}
html[data-theme="industrial"] .start__step:nth-child(1){--card-img:url(assets/work/ind-start-call-hd.webp)}
html[data-theme="industrial"] .start__step:nth-child(2){--card-img:url(assets/work/ind-start-plan-hd.webp)}
html[data-theme="industrial"] .start__step:nth-child(3){--card-img:url(assets/work/ind-start-jobs-hd.webp)}

/* ---------- design switcher chip (fixed, unobtrusive; consistent across themes) ---------- */
.theme-toggle{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);
  border:1px solid rgba(20,20,30,.12);border-radius:999px;padding:4px;
  box-shadow:0 2px 8px rgba(20,20,40,.08),0 12px 30px rgba(20,20,40,.12);
  font-family:"Montserrat",system-ui,sans-serif}
.theme-toggle__lbl{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8b8c96;padding:0 8px 0 10px}
.theme-toggle button{appearance:none;border:0;cursor:pointer;background:transparent;color:#3d4045;
  font:700 12.5px/1 "Montserrat",system-ui,sans-serif;padding:8px 13px;border-radius:999px;transition:background .18s ease,color .18s ease}
.theme-toggle button:hover{background:rgba(20,20,30,.06)}
.theme-toggle button.is-active{background:#191B1E;color:#fff}
@media (max-width:560px){
  .theme-toggle{left:50%;transform:translateX(-50%);bottom:12px}
  .theme-toggle__lbl{display:none}
  .theme-toggle button{padding:8px 12px}
}
@media print{.theme-toggle{display:none}}