/* TechPhobe mock-up v3, 4th Nov 2026. Style: Hard Shadow (style 15), site-kit palette.
   Palette: Hazard Orange #FF5C00, Graphite #141619, Hi-vis #FFD21F, Blueprint #0E2F57, Concrete #DEDBD3, White.
   Type: Rubik 800/900 (display + live wordmark, OFL 1.1), Barlow 500-700 (body, OFL 1.1). Self-hosted.
   produced_by: Nell Ashby */

@font-face{font-family:"Rubik";src:url("fonts/rubik-var.woff") format("woff");font-weight:600 900;font-display:swap;}
@font-face{font-family:"Barlow";src:url("fonts/barlow-medium.woff") format("woff");font-weight:500;font-display:swap;}
@font-face{font-family:"Barlow";src:url("fonts/barlow-semibold.woff") format("woff");font-weight:600;font-display:swap;}
@font-face{font-family:"Barlow";src:url("fonts/barlow-bold.woff") format("woff");font-weight:700;font-display:swap;}

:root{
  --orange:#FF5C00; --orange-deep:#D24E06; --graphite:#141619; --graphite-2:#22252A;
  --hivis:#FFD21F; --blueprint:#0E2F57; --concrete:#DEDBD3; --white:#FFFFFF;
  --ink:#141619; --mute:#4A4E55; --link:#B23A00;
  --rust:#D4531F; --cream:#FBF1D6; --brown:#1A0E07;
  --display:"Rubik",system-ui,sans-serif; --text:"Barlow",system-ui,sans-serif;
  --r:14px; --shadow:6px 6px 0 var(--graphite);
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;font-family:var(--text);font-weight:500;font-size:17px;line-height:1.55;color:var(--ink);background:var(--white);}
img{max-width:100%;height:auto;display:block;}
a{color:var(--link);text-underline-offset:3px;}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;letter-spacing:-.01em;}
h2{font-size:clamp(30px,4.2vw,48px);}
h3{font-size:21px;line-height:1.2;}
p{margin:0;}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--hivis);color:var(--ink);padding:10px 16px;font-weight:700;border:2px solid var(--ink);}
.skip:focus{left:12px;}
:focus-visible{outline:3px solid var(--hivis);outline-offset:3px;box-shadow:0 0 0 6px var(--graphite);border-radius:6px;}
.ph{background:#FFF3B0;color:var(--ink);border:2px dashed var(--ink);border-radius:6px;padding:0 6px;font-weight:700;font-size:.92em;white-space:normal;}

/* ---------- Logo: bracket symbol is an image; the wordmark is live, selectable text ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;}
.brand-sym{height:48px;width:48px;flex:none;}
.wordmark{font-family:var(--display);font-weight:900;font-size:31px;line-height:1;letter-spacing:-.012em;white-space:nowrap;display:inline-block;padding:2px 2px 6px;}
.wm-tech,.wm-phobe{display:inline-block;}
.wm-tech{color:transparent;background:url("tech-grit.svg") 0 0/100% 100%;-webkit-background-clip:text;background-clip:text;padding-right:.02em;
  filter:drop-shadow(.05em 0 0 var(--brown)) drop-shadow(-.05em 0 0 var(--brown)) drop-shadow(0 .05em 0 var(--brown)) drop-shadow(0 -.05em 0 var(--brown)) drop-shadow(0 .06em 0 var(--brown));}
.wm-phobe{color:var(--cream);
  filter:drop-shadow(0 .05em 0 #C9AE7E) drop-shadow(.05em 0 0 var(--brown)) drop-shadow(-.05em 0 0 var(--brown)) drop-shadow(0 .05em 0 var(--brown)) drop-shadow(0 -.05em 0 var(--brown)) drop-shadow(0 .05em 0 var(--brown));}
.wm-tech::selection{color:#fff;background:#7A2A00;}
.wm-phobe::selection{color:#fff;background:#7A2A00;}

/* ---------- Header: graphite with a hazard-tape edge, so it stands off the orange hero ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--graphite);color:#fff;}
.site-head::after{content:"";display:block;height:7px;background:repeating-linear-gradient(-45deg,var(--hivis) 0 12px,var(--graphite) 12px 24px);}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px;}
.nav{display:flex;align-items:center;gap:4px;}
.nav a{font-family:var(--display);font-weight:700;font-size:15.5px;color:#F3F1EC;text-decoration:none;padding:11px 13px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;}
.nav a[aria-current="page"]{background:#fff;color:var(--ink);}
.nav .nav-cta{background:var(--orange);color:var(--ink);border:2px solid #000;box-shadow:3px 3px 0 var(--hivis);margin-left:8px;padding:10px 18px;}
.menu-btn{display:none;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:12px;border:2.5px solid var(--graphite);
  font-family:var(--display);font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;background:var(--orange);color:var(--ink);box-shadow:var(--shadow);
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease);}
.btn.dark{background:var(--graphite);color:#fff;box-shadow:6px 6px 0 #fff;}
.btn.on-orange{background:var(--graphite);color:#fff;box-shadow:6px 6px 0 #8A2C00;}
.btn.light{background:#fff;color:var(--ink);}
.btn.hivis{background:var(--hivis);color:var(--ink);}
.btn.is-pressed{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--graphite);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}
.go{font-family:var(--display);font-weight:800;color:var(--link);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;}
.label{display:inline-block;font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--graphite);color:var(--hivis);padding:7px 13px;border-radius:999px;}
.label.y{background:var(--hivis);color:var(--ink);}
.label.w{background:#fff;color:var(--ink);border:2px solid var(--graphite);}

/* ---------- Sections with texture ---------- */
.sec{padding:84px 0;position:relative;}
.sec-head{max-width:760px;margin-bottom:38px;}
.sec-head>p:not(.label){margin-top:14px;font-size:19px;color:var(--mute);}
.sec.graphite{background:var(--graphite);color:#F3F1EC;}
.sec.graphite .sec-head>p:not(.label){color:#C9CBCF;}
.sec.concrete{background:var(--concrete) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 -1.6 .95'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");}
.sec.blueprint{background:var(--blueprint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='%23305C8F' stroke-width='1.5'/%3E%3Cpath d='M0 30.5H120M0 60.5H120M0 90.5H120M30.5 0V120M60.5 0V120M90.5 0V120' stroke='%231C4372' stroke-width='1'/%3E%3C/svg%3E");color:#fff;}
.sec.blueprint .sec-head>p:not(.label){color:#C8D6EA;}
.sec.hivis{background:var(--hivis);}
.sec.hivis::before,.tape-top::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(-45deg,var(--graphite) 0 16px,var(--hivis) 16px 32px);}
.ruler-top::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='18'%3E%3Cpath d='M.5 0V18M10.5 0V6M20.5 0V6M25.5 0V11M30.5 0V6M40.5 0V6' stroke='%23141619' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/50px 18px;border-bottom:2px solid var(--graphite);}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--orange) url("hero-art.svg") 0 0/760px auto;border-bottom:3px solid var(--graphite);overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,92,0,.92) 0%,rgba(255,92,0,.8) 38%,rgba(255,92,0,0) 62%);pointer-events:none;}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:72px;}
.hero h1{font-size:clamp(40px,5.6vw,64px);font-weight:900;line-height:1;max-width:13ch;color:var(--ink);}
.hero h1 .hl{display:inline-block;background:var(--graphite);color:#fff;padding:0 .18em .06em;border-radius:10px;transform:rotate(-1.5deg);box-shadow:5px 5px 0 var(--hivis);margin:.06em 0;}
.hero .sub{font-size:20px;line-height:1.5;max-width:36ch;margin-top:22px;font-weight:600;color:#1C1006;}
.hero .btn-row{margin-top:28px;}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;padding:0;}
.trades li{font-family:var(--display);font-weight:700;font-size:14.5px;background:#fff;border:2px solid var(--graphite);border-radius:999px;padding:5px 12px;}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-weight:700;font-size:15.5px;color:#1C1006;}
.hero-proof span{display:inline-flex;align-items:center;gap:8px;}
.hero-proof svg{flex:none;}
.hero-proof .tick{background:#fff;}

/* Job card visual */
.stage{position:relative;min-height:540px;padding-top:92px;}
.jobcard{position:relative;z-index:2;width:min(100%,400px);margin-left:auto;margin-right:196px;background:#fff;border:3px solid var(--graphite);border-radius:18px;box-shadow:10px 10px 0 var(--graphite);overflow:hidden;transform:rotate(1.5deg);}
.jobcard .top{background:var(--graphite);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.jobcard .top b{font-family:var(--display);font-weight:800;font-size:17px;}
.jobcard .top small{font-weight:700;color:var(--hivis);font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
.jobcard .addr{padding:14px 18px 4px;font-weight:700;color:var(--mute);font-size:15px;}
.jobcard ol{list-style:none;margin:0;padding:8px 18px 18px;}
.jobcard li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:2px dashed #E3E0D8;font-weight:600;font-size:15.5px;}
.jobcard li:last-child{border-bottom:0;}
.jobcard li time{font-weight:700;font-size:13.5px;color:var(--mute);}
.tick{width:26px;height:26px;border-radius:50%;background:var(--orange);border:2px solid var(--graphite);display:grid;place-items:center;}
.toast{position:absolute;z-index:3;left:-6px;top:0;width:270px;background:var(--hivis);border:3px solid var(--graphite);border-radius:14px;box-shadow:6px 6px 0 var(--graphite);padding:12px 14px;transform:rotate(-4deg);font-weight:600;font-size:15px;line-height:1.35;}
.toast b{display:block;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px;}
.stage .sam{position:absolute;z-index:4;right:-6px;bottom:-40px;width:184px;filter:drop-shadow(6px 6px 0 rgba(20,22,25,.35));}
.stage .example{position:absolute;z-index:3;left:auto;right:84px;top:30px;font-weight:700;font-size:13.5px;background:#fff;border:2px solid var(--graphite);border-radius:999px;padding:4px 12px;}

/* Inner-page hero */
.hero.inner .wrap{grid-template-columns:1.3fr .7fr;padding-top:56px;padding-bottom:56px;}
.hero.inner h1{font-size:clamp(38px,5vw,58px);max-width:16ch;}
.hero.inner .cartoon{justify-self:end;}
.crumb{font-weight:700;margin-bottom:14px;}
.crumb a{color:var(--ink);}

/* ---------- Trades strip ---------- */
.strip{background:var(--graphite);color:#fff;border-bottom:3px solid var(--graphite);}
.strip ul{list-style:none;margin:0 auto;padding:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;}
.strip li{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.7vw,21px);display:inline-flex;align-items:center;gap:16px;}
.strip li+li::before{content:"";width:14px;height:22px;background:var(--hivis);clip-path:polygon(60% 0,0 58%,45% 58%,30% 100%,100% 38%,55% 38%);}

/* ---------- Cards and grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.card{background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:var(--r);box-shadow:var(--shadow);padding:24px;}
.card h3{margin-bottom:8px;}
.card p{color:var(--mute);}
.card.y{background:var(--hivis);}
.card.y p{color:#2B2205;}
.card.dk{background:var(--graphite-2);color:#fff;border-color:#000;box-shadow:6px 6px 0 var(--orange);}
.card.dk p{color:#C9CBCF;}
.on-blue .card{box-shadow:8px 8px 0 #061A33;}

/* Services panels */
.svc{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:stretch;}
.panel{border:3px solid var(--graphite);border-radius:20px;padding:30px;box-shadow:10px 10px 0 #061A33;color:var(--ink);display:flex;flex-direction:column;}
.panel.web{background:#fff;}
.panel.tools{background:var(--hivis);}
.panel h3{font-size:clamp(26px,2.8vw,34px);margin:14px 0 10px;}
.panel>p{font-size:18px;color:#2E3036;}
.panel .shot{margin:20px 0 0;border:2.5px dashed var(--graphite);border-radius:12px;background:#FFF3B0;min-height:150px;display:grid;place-items:center;padding:16px;text-align:center;}
.panel ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;}
.panel li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-weight:600;}
.panel li b{display:block;font-family:var(--display);font-weight:800;}
.panel .foot-link{margin-top:auto;padding-top:18px;}
.jobsw{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;margin-top:20px;background:#fff;border:2.5px solid var(--graphite);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);box-shadow:5px 5px 0 var(--graphite);}
.jobsw img{width:64px;height:64px;}
.jobsw b{font-family:var(--display);font-weight:800;font-size:19px;display:block;line-height:1.2;}
.jobsw span{font-weight:600;color:var(--mute);display:block;margin-top:4px;}
.jobsw .go{grid-column:2;min-height:auto;margin-top:4px;}
.mini-sw{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.mini-sw i{font-style:normal;font-weight:700;font-size:13px;border:1.5px solid var(--graphite);border-radius:999px;padding:1px 9px;background:#F4F2EE;}
.mini-sw i.main{background:var(--orange);}

/* Day timeline */
.day{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:3px solid var(--graphite);border-radius:18px;overflow:hidden;background:#fff;box-shadow:10px 10px 0 var(--graphite);}
.day li{list-style:none;padding:22px 20px;border-right:2.5px dashed #CFCBC2;}
.day li:last-child{border-right:0;}
.day{padding:0;margin:0;}
.day time{font-family:var(--display);font-weight:900;font-size:30px;display:block;color:var(--orange-deep);}
.day b{font-family:var(--display);font-weight:800;display:block;margin:6px 0 6px;font-size:18px;line-height:1.2;}
.day p{color:var(--mute);font-size:15.5px;}
.day .you{font-weight:700;color:var(--ink);font-size:14px;margin-top:10px;display:inline-block;background:var(--concrete);border-radius:999px;padding:2px 10px;}

/* Proof */
.proof .card{display:flex;flex-direction:column;gap:10px;}
.proof .who{font-family:var(--display);font-weight:800;font-size:20px;}
.proof .tagline{font-weight:700;color:var(--orange);font-size:14px;text-transform:uppercase;letter-spacing:.05em;}

/* Promise list */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:0;}
.promise li{display:grid;grid-template-columns:30px 1fr;gap:12px;font-weight:600;font-size:16.5px;}

/* Learn band */
.learn-band .wrap{display:grid;grid-template-columns:1.4fr .8fr;gap:30px;align-items:center;}
.learn-band h2{max-width:16ch;}
.learn-band p{font-size:19px;margin-top:14px;max-width:46ch;}
.learn-band .chat{background:#fff;border:3px solid var(--graphite);border-radius:16px;box-shadow:8px 8px 0 var(--graphite);padding:18px;display:grid;gap:10px;transform:rotate(1.5deg);}
.bubble{border:2px solid var(--graphite);border-radius:12px;padding:10px 12px;font-weight:600;font-size:15px;line-height:1.4;}
.bubble.me{background:var(--concrete);margin-right:30px;}
.bubble.ai{background:var(--orange);margin-left:30px;}
.bubble small{display:block;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px;}

/* Refer band */
.refer{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border:3px dashed var(--graphite);border-radius:20px;padding:24px 28px;background:#fff;}
.refer img{width:110px;}
.refer h2{font-size:clamp(26px,3vw,36px);}
.refer p{margin-top:6px;font-size:18px;color:var(--mute);}

/* Steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.steps li{counter-increment:s;background:var(--graphite-2);border:2px solid #000;border-radius:14px;padding:22px;color:#C9CBCF;box-shadow:6px 6px 0 var(--orange);}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hivis);color:var(--ink);font-family:var(--display);font-weight:900;font-size:19px;margin-bottom:12px;border:2px solid #000;}
.steps b{display:block;font-family:var(--display);font-weight:800;color:#fff;font-size:19px;margin-bottom:6px;}

/* Ticks list */
.ticks{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:10px;font-weight:600;}
.ticks li::before{content:"";width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23141619' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%;border:2px solid var(--graphite);}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px;}
.faq details{background:#fff;border:2.5px solid var(--graphite);border-radius:14px;box-shadow:5px 5px 0 var(--graphite);}
.faq summary{font-family:var(--display);font-weight:800;font-size:19px;padding:16px 20px;cursor:pointer;min-height:44px;list-style:none;display:flex;justify-content:space-between;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:24px;line-height:1;}
.faq details[open] summary::after{content:"\2212";}
.faq details p{padding:0 20px 18px;color:var(--mute);}

/* Resources */
.res .meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px;}
.res .meta span{font-weight:700;font-size:13px;background:var(--concrete);border-radius:999px;padding:2px 10px;}
.res .links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px;}
.res .thumb{border-radius:10px;border:2px solid var(--graphite);margin-bottom:12px;}
.res-group+.res-group{margin-top:64px;}
.price{font-family:var(--display);font-weight:900;font-size:22px;background:var(--hivis);border:2.5px solid var(--graphite);border-radius:10px;padding:8px 14px;}

/* Forms */
.talk .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.talk .lead{font-size:19px;margin-top:14px;color:var(--mute);}
.form{display:grid;gap:16px;background:#fff;border:3px solid var(--graphite);border-radius:18px;padding:26px;box-shadow:10px 10px 0 var(--graphite);}
.form label{display:block;font-weight:700;margin-bottom:6px;}
.form input,.form textarea{width:100%;font:inherit;font-weight:500;padding:12px 14px;min-height:50px;border:2.5px solid var(--graphite);border-radius:10px;background:#FAFAF8;color:var(--ink);}
.form textarea{min-height:110px;resize:vertical;}
.form .hint{font-size:14px;color:var(--mute);margin-top:4px;}
.form-msg{font-weight:700;}

/* Legal */
.legal{max-width:780px;}
.legal dl{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin:0 0 40px;}
.legal dt{font-weight:700;}
.legal dd{margin:0;}
.legal h2{margin:20px 0 14px;font-size:34px;}
.legal ul{display:grid;gap:10px;padding-left:20px;}
.legal p{margin:12px 0;}

/* Footer */
.foot{background:var(--graphite);color:#C9CBCF;padding:60px 0 30px;border-top:7px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--hivis) 0 12px,var(--graphite) 12px 24px) 7;}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px;}
.foot p{margin-top:12px;max-width:32ch;}
.foot h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--hivis);margin-bottom:10px;}
.foot ul{list-style:none;padding:0;margin:0;}
.foot li a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px;}
.foot .base{grid-column:1/-1;display:flex;gap:18px;align-items:center;border-top:1px solid #34373D;padding-top:16px;font-size:14px;}
.foot .base a{color:#fff;min-height:44px;display:inline-flex;align-items:center;}

/* ---------- Motion: one entrance, once. Reduced motion keeps a fade only. ---------- */
@keyframes settle{from{opacity:0;translate:0 12px;}to{opacity:1;translate:0 0;}}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.settle{animation:settle 460ms var(--ease) both;}
.d1{animation-delay:70ms;}.d2{animation-delay:140ms;}.d3{animation-delay:210ms;}.d4{animation-delay:280ms;}
.jobcard li{animation:settle 380ms var(--ease) both;}
.jobcard li:nth-child(1){animation-delay:320ms;}.jobcard li:nth-child(2){animation-delay:400ms;}.jobcard li:nth-child(3){animation-delay:480ms;}.jobcard li:nth-child(4){animation-delay:560ms;}.jobcard li:nth-child(5){animation-delay:640ms;}
@media (prefers-reduced-motion:reduce){
  .settle,.jobcard li{animation:fadein 200ms linear both;animation-delay:0ms;}
  .btn{transition:none;}
}

/* Hover only where there is a real pointer */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{background:#2E3238;}
  .nav a[aria-current="page"]:hover{background:#fff;}
  .nav .nav-cta:hover{background:var(--orange);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hivis);}
  .btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--graphite);}
  .btn.dark:hover{box-shadow:8px 8px 0 #fff;}
  .btn.on-orange:hover{box-shadow:8px 8px 0 #8A2C00;}
  .go:hover{text-decoration:underline;}
  .jobsw:hover b{text-decoration:underline;}
}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero::before{background:linear-gradient(180deg,rgba(255,92,0,.9) 0%,rgba(255,92,0,.75) 45%,rgba(255,92,0,.15) 100%);}
  .stage{max-width:560px;}
  .svc,.learn-band .wrap,.talk .wrap{grid-template-columns:1fr;}
  .day{grid-template-columns:1fr 1fr;}
  .day li{border-bottom:2.5px dashed #CFCBC2;}
  .promise,.steps,.g4{grid-template-columns:1fr 1fr;}
}
@media (max-width:980px){
  .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border-radius:12px;background:var(--orange);color:var(--ink);border:2px solid #000;font-family:var(--display);font-weight:800;font-size:16px;cursor:pointer;}
  .menu-btn .bars,.menu-btn .bars span,.menu-btn .bars::before,.menu-btn .bars::after{display:block;width:20px;height:2.5px;background:currentColor;border-radius:2px;position:relative;}
  .menu-btn .bars{background:transparent;}
  .menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;}
  .menu-btn .bars::before{top:-6px;}.menu-btn .bars::after{top:6px;}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:8px;padding:16px 22px 22px;background:var(--graphite);border-bottom:3px solid #000;
    opacity:0;visibility:hidden;pointer-events:none;translate:0 -8px;transition:opacity 180ms var(--ease),translate 180ms var(--ease),visibility 0s linear 180ms;}
  .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;translate:0 0;transition:opacity 200ms var(--ease),translate 200ms var(--ease),visibility 0s;}
  .nav a{background:var(--graphite-2);border-radius:12px;padding:14px 16px;min-height:52px;font-size:17px;}
  .nav .nav-cta{margin:6px 0 0;justify-content:center;}
  @media (prefers-reduced-motion:reduce){.nav,.nav.is-open{transition:none;translate:0 0;}}
}
@media (max-width:760px){
  body{font-size:16.5px;}
  .sec{padding:60px 0;}
  .site-head .wrap{min-height:66px;}
  .brand-sym{height:40px;width:40px;}
  .wordmark{font-size:25px;}
  .hero .wrap{padding-top:36px;padding-bottom:48px;gap:26px;}
  .hero .sub{font-size:18px;}
  .hero .btn-row .btn{flex:1 1 100%;}
  .stage{min-height:0;padding-top:100px;padding-bottom:150px;}
  .jobcard{margin:0;transform:none;width:100%;}
  .stage .example{top:auto;right:auto;left:0;bottom:30px;}
  .jobcard li{grid-template-columns:28px 1fr auto;font-size:15px;gap:8px;}
  .toast{top:0;left:8px;width:auto;right:60px;}
  .stage .sam{width:130px;bottom:-20px;right:-8px;}
  .stage .example{left:0;bottom:24px;}
  .hero.inner .wrap{grid-template-columns:1fr;}
  .g2,.g3,.g4,.promise,.steps,.day{grid-template-columns:1fr;}
  .day li{border-right:0;}
  .panel{padding:22px;}
  .refer{grid-template-columns:1fr;text-align:left;}
  .refer img{width:90px;}
  .foot .wrap{grid-template-columns:1fr;}
  .legal dl{grid-template-columns:1fr;gap:2px;}
  .legal dd{margin-bottom:10px;}
}
/* Grid children may shrink below their content on a phone */
.svc>*,.jobsw>div,.g2>*,.g3>*,.g4>*,.talk .wrap>*{min-width:0;}
@media (max-width:760px){ .jobsw{grid-template-columns:48px 1fr;padding:14px;} .jobsw img{width:48px;height:48px;} }
.jobsw .mini-sw{display:flex;margin-top:10px;} .jobsw .go{display:inline-flex;color:var(--link);font-weight:800;}

/* ---------- Medallion logo (4th Nov 2026, Sam's logo decision) ----------
   The medallion is orange, so it never sits bare on the orange hero: option A puts it on a graphite disc with a
   hi-vis ring and a hard shadow; option B keeps it inside the graphite bar. Disc geometry from the cleaned asset:
   centre 48.9% across, 49.9% down, disc height = image height. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.site-head .wrap{position:relative;}
.site-name{margin:0;}

/* Option A: badge hangs off the graphite bar into the hero, tucks up into the bar on scroll */
.logo-a .wrap{justify-content:flex-end;}
.badge{--bw:176px;position:absolute;z-index:60;left:22px;top:10px;width:var(--bw);display:block;border-radius:50%;
  transform-origin:24% 0;transition:transform 220ms var(--ease);}
.badge::before{content:"";position:absolute;z-index:-1;width:calc(var(--bw) * .84);aspect-ratio:1;left:calc(var(--bw) * .4886);top:49.85%;
  translate:-50% -50%;border-radius:50%;background:var(--graphite);border:4px solid var(--hivis);box-shadow:6px 6px 0 #000;}
.badge img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 1.5px var(--brown));}
.badge:focus-visible{outline-offset:6px;}
.site-head.is-stuck .badge{transform:scale(.52);}
.logo-a + main .hero .wrap{padding-top:112px;}
.logo-a + main .hero.inner .wrap{padding-top:104px;}

/* Option B: deeper graphite bar, medallion large inside it */
.logo-b .wrap{min-height:118px;}
.bar-med{display:block;width:136px;flex:none;}
.bar-med img{display:block;width:100%;height:auto;}

/* ---------- Hero figure: ONE rule for the cartoon on every page hero ----------
   Same height everywhere (set by height, so a wide pose is not shrunk), right-hand side, full rounded sticker
   outline visible with a 22px gap above the hero's bottom edge, same hard shadow. Never over card text. */
.hero .wrap{padding-bottom:72px;}
.hero-figure{--fig-h:440px;--fig-gap:-50px;height:var(--fig-h);width:auto;max-width:none;
  filter:drop-shadow(8px 8px 0 rgba(20,22,25,.45));}
.hero.inner .wrap{grid-template-columns:1.15fr .85fr;padding-bottom:72px;}
.hero.inner .hero-figure{align-self:end;justify-self:end;margin-bottom:var(--fig-gap);margin-right:-60px;}
/* home: the figure stands BESIDE the job card, touching only its outer edge */
.hero:not(.inner) .stage{align-self:end;min-height:600px;padding-top:96px;padding-bottom:40px;}
.hero:not(.inner) .jobcard{width:min(100%,330px);margin:0 auto 0 0;}
.hero:not(.inner) .stage .hero-figure{position:absolute;right:-60px;bottom:var(--fig-gap);z-index:4;width:auto;height:var(--fig-h);
  filter:drop-shadow(8px 8px 0 rgba(20,22,25,.45));}
.hero:not(.inner) .stage .example{right:auto;left:282px;top:22px;}
@media (max-width:1180px){
  .hero-figure{--fig-h:340px;}
  .hero:not(.inner) .jobcard{width:min(100%,290px);}
  .hero:not(.inner) .stage .hero-figure{right:-10px;}
  .hero:not(.inner) .stage .example{left:236px;}
  .hero.inner .hero-figure{margin-right:0;}
}
@media (max-width:1060px){
  .hero-figure{--fig-h:260px;}
  /* card above, figure below it on the right */
  .hero:not(.inner) .stage{min-height:0;padding-top:100px;padding-bottom:262px;}
  .hero:not(.inner) .jobcard{width:100%;}
  .hero:not(.inner) .stage .hero-figure{right:0;}
  .hero:not(.inner) .stage .example{left:auto;right:0;top:62px;bottom:auto;}
}
@media (max-width:760px){
  .hero .wrap,.hero.inner .wrap{padding-bottom:48px;}
  .hero-figure{--fig-gap:-26px;}
  .hero.inner .wrap{grid-template-columns:1fr;}
  .hero:not(.inner) .stage{padding-bottom:240px;}
}
@media (max-width:980px){
  .badge{--bw:132px;}
  .logo-a + main .hero .wrap,.logo-a + main .hero.inner .wrap{padding-top:96px;}
  .logo-b .wrap{min-height:96px;} .bar-med{width:112px;}
}
@media (max-width:760px){
  .badge{--bw:112px;left:16px;top:6px;}
  .site-head.is-stuck .badge{transform:scale(.6);}
  .logo-a + main .hero .wrap,.logo-a + main .hero.inner .wrap{padding-top:64px;}
  .logo-b .wrap{min-height:84px;} .bar-med{width:96px;}
}
@media (prefers-reduced-motion:reduce){ .badge{transition:none;} }

/* one proof card, full width (other slots removed until real proof exists) */
.proof-one .card{max-width:760px;}
.panel .foot-link{margin-top:auto;padding-top:18px;}

/* =====================================================================
   v4 additions (Marlow page review, 4th Nov 2026). produced_by: Nell Ashby
   ===================================================================== */
/* Header: Home in the phone menu only; phone + WhatsApp in the bar */
.nav-home{display:none !important;}
.m-only{display:none;}
.nav-contact{display:contents;}
.nav .hc{gap:8px;padding:10px 12px;background:var(--graphite-2);border:2px solid #3A3E45;}
.nav .hc svg{color:var(--hivis);flex:none;}
.nav .hc .hc-t{display:none;}
@media (min-width:1240px){ .nav .hc .hc-t{display:inline;} }
.head-quick{display:none;}
.hq{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--graphite-2);border:2px solid #3A3E45;color:var(--hivis);text-decoration:none;}
.hq .hc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
@media (max-width:980px){
  .nav-home{display:flex !important;}
  .head-quick{display:flex;gap:8px;margin-left:auto;margin-right:8px;}
  .nav .hc .hc-t{display:inline;} .nav .hc .m-only{display:inline;}
  .nav .hc{border-color:#3A3E45;}
}
@media (max-width:360px){ .head-quick .wa{display:none;} }

/* Footer: four columns, headings are h2 for order */
.foot .wrap{grid-template-columns:1.4fr 1fr 1fr 1fr;}
.foot .fh{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--hivis);margin-bottom:10px;line-height:1.2;}
@media (max-width:1060px){ .foot .wrap{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){ .foot .wrap{grid-template-columns:1fr;} }

/* Job card: automatic vs needs your OK */
figure.stage{margin:0;}
.tag{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:2px solid var(--graphite);line-height:1.2;}
.tag.auto{background:var(--graphite);color:#fff;}
.tag.ok{background:var(--hivis);color:var(--ink);}
.tag.cust{background:#fff;color:var(--ink);}
.tick.you-ic{background:var(--hivis);}
.jobcard .top b{font-size:16px;}
.jobcard li{font-size:14.5px;line-height:1.3;}
.jc-note{padding:0 18px 16px;font-size:13.5px;font-weight:600;color:var(--mute);}
.hero:not(.inner) .jobcard{width:min(100%,380px);}
@media (max-width:1180px){ .hero:not(.inner) .jobcard{width:min(100%,330px);} }
@media (max-width:1060px){ .hero:not(.inner) .jobcard{width:100%;} }
@media (max-width:760px){ .jobcard li{grid-template-columns:28px 1fr;} .jobcard li .tag{grid-column:2;justify-self:start;margin-top:-4px;} }

/* Three ways to buy */
.buy-h{color:#fff;font-size:clamp(24px,2.6vw,30px);margin:56px 0 18px;}
.buy{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.buy-card{display:flex;flex-direction:column;gap:10px;background:#fff;color:var(--ink);text-decoration:none;border:3px solid var(--graphite);border-radius:18px;padding:22px;box-shadow:8px 8px 0 #061A33;}
.buy-card.both{background:var(--orange);}
.buy-card .label{align-self:flex-start;}
.buy-card h3,.buy-card h4{font-size:22px;line-height:1.2;}
.buy-card p{color:#2E3036;font-weight:600;}
.buy-card .buy-p{margin-top:auto;}
.buy-card .go{color:var(--ink);text-decoration:underline;}
.amt{font-family:var(--display);font-weight:900;font-size:24px;color:var(--ink);white-space:nowrap;}
.amt.off{font-size:18px;}

/* Example frames */
.ex-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ex-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink);}
.ex-meta{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.ex-meta b{font-family:var(--display);font-weight:800;font-size:20px;}
.ex-meta>span:last-child{color:var(--mute);font-weight:600;}
.ex-more{margin-top:26px;}
.frame{background:#fff;border:3px solid var(--graphite);border-radius:14px;overflow:hidden;box-shadow:8px 8px 0 var(--graphite);}
.frame-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--graphite);}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#5A5E66;}
.frame-bar i:first-child{background:var(--orange);} .frame-bar i:nth-child(2){background:var(--hivis);}
.frame-bar span{margin-left:10px;font-size:12.5px;font-weight:600;color:#C9CBCF;background:#2E3238;border-radius:999px;padding:1px 12px;}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.phone-frame{width:min(36%,190px);background:var(--graphite);border-radius:28px;padding:8px;box-shadow:8px 8px 0 rgba(20,22,25,.35);}
.phone-frame img{border-radius:20px;width:100%;aspect-ratio:1/2;object-fit:cover;object-position:top;}
.sample .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;}
.sample.flip .sample-txt{order:2;}
.sample-shots{position:relative;padding-bottom:60px;}
.sample-shots .phone-frame{position:absolute;right:-10px;bottom:0;}
.sample.flip .sample-shots .phone-frame{right:auto;left:-10px;}
.sample-trade{font-weight:700;margin-top:10px;}
.inc-h{font-size:19px;margin:22px 0 4px;}
.lead2{font-size:18.5px;margin-top:14px;color:var(--mute);}
.graphite .lead2,.blueprint .lead2{color:#C9CBCF;}

/* Admin sequence */
.seq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;counter-reset:q;}
.seq li{counter-increment:q;display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:start;background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;padding:16px;box-shadow:6px 6px 0 #061A33;}
.seq li b{display:block;font-family:var(--display);font-weight:800;font-size:18px;}
.seq li b::before{content:counter(q) ". ";color:var(--orange-deep);}
.seq li span:not(.tag):not(.tick){font-weight:600;color:var(--mute);}
.seq-note{margin-top:22px;font-weight:700;color:#fff;}
.seq-mini{grid-template-columns:1fr;}
.seq-mini li{box-shadow:6px 6px 0 var(--graphite);align-items:center;}
.seq-mini li span:not(.tag):not(.tick){color:var(--ink);}
.demo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}

/* Price guide band and price cards */
.pg{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;}
.pg-lead{font-size:19px;margin-top:14px;}
.pg-list{list-style:none;margin:0;padding:0;background:#fff;border:3px solid var(--graphite);border-radius:18px;box-shadow:10px 10px 0 var(--graphite);}
.pg-list li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 22px;border-bottom:2px dashed #CFCBC2;font-weight:700;}
.pg-list li:last-child{border-bottom:0;}
.pg-list .pg-go{justify-content:flex-end;}
.pcard{display:flex;flex-direction:column;gap:6px;}
.pc-price{margin:6px 0 4px;}
.pcard .ticks{margin-top:8px;}
.small{font-size:15px;font-weight:600;color:var(--mute);margin-top:12px;}
.card.y .small{color:#2B2205;}
.on-dark{color:#C8D6EA;margin-top:20px;}
.costs{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.costs li{display:grid;grid-template-columns:170px 1fr;gap:14px;background:#fff;border:2.5px solid var(--graphite);border-radius:12px;padding:14px 18px;box-shadow:5px 5px 0 var(--graphite);}
.costs b{font-family:var(--display);font-weight:800;}
.costs span{font-weight:600;color:var(--mute);}
.rc{align-items:center;}
.steps.s3{grid-template-columns:repeat(3,1fr);}
.concrete .steps li{color:#C9CBCF;}

/* AI line */
.ai-line{margin-top:36px;background:var(--graphite);color:#C9CBCF;border-radius:18px;padding:26px 28px;box-shadow:8px 8px 0 var(--orange);max-width:900px;}
.ai-line .ai-big{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,26px);line-height:1.25;color:#fff;margin-bottom:12px;}
.ai-line a{color:var(--hivis);}
.card.ex .tag{margin-bottom:12px;}

/* Contact bits */
.alt-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.ac{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border-radius:12px;border:2.5px solid var(--graphite);background:#fff;color:var(--ink);font-weight:700;text-decoration:none;box-shadow:4px 4px 0 var(--graphite);}
.ac .m-only{display:inline;}
.btn svg{flex:none;}
.choice{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.choice legend{font-weight:700;margin-bottom:6px;padding:0;}
.choice label{display:flex;align-items:center;gap:10px;min-height:48px;border:2.5px solid var(--graphite);border-radius:10px;padding:8px 12px;background:#FAFAF8;font-weight:600;margin:0;cursor:pointer;}
.choice input{width:22px;height:22px;accent-color:#FF5C00;min-height:0;margin:0;flex:none;}
.next{margin:6px 0 0;padding-left:22px;display:grid;gap:8px;font-weight:600;}
.reach{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);}
.reach-ic{width:46px;height:46px;border-radius:12px;background:var(--graphite);color:var(--hivis);display:grid;place-items:center;margin-bottom:6px;}
.reach p{font-weight:700;color:var(--ink);}

/* About */
.about-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;}
.photo-slot{aspect-ratio:4/5;border:3px dashed var(--graphite);border-radius:20px;background:#FFF3B0 url("sam.png") center 85%/55% auto no-repeat;display:grid;place-items:start center;padding:22px;box-shadow:10px 10px 0 var(--graphite);}
.me-band{grid-template-columns:auto 1fr auto;}

/* Learn AI */
.learn-ex{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.chat{background:#fff;border:3px solid var(--graphite);border-radius:16px;box-shadow:8px 8px 0 var(--graphite);padding:18px;display:grid;gap:10px;}
.use-rule{margin-top:12px;font-weight:700;color:var(--ink) !important;}
.avail{margin-top:12px;font-weight:700;color:var(--hivis) !important;}

/* Hover only for a real pointer */
@media (hover:hover) and (pointer:fine){
  .buy-card,.ex-card .frame,.reach{transition:transform 160ms var(--ease),box-shadow 160ms var(--ease);}
  .buy-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #061A33;}
  .ex-card:hover .frame{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--graphite);}
  .reach:hover{transform:translate(-2px,-2px);}
  .nav .hc:hover{background:#2E3238;}
}
@media (prefers-reduced-motion:reduce){ .buy-card,.ex-card .frame,.reach{transition:none;} }

/* Responsive for the new blocks */
@media (max-width:1060px){
  .buy,.ex-row{grid-template-columns:1fr 1fr;}
  .sample .wrap,.demo,.pg,.learn-ex,.about-intro{grid-template-columns:1fr;}
  .sample.flip .sample-txt{order:0;}
  .seq{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .buy,.ex-row,.steps.s3{grid-template-columns:1fr;}
  .costs li{grid-template-columns:1fr;gap:2px;}
  .seq li{grid-template-columns:28px 1fr;}
  .seq li .tag{grid-column:2;justify-self:start;}
  .pg-list li{flex-wrap:wrap;}
  .choice{grid-template-columns:1fr;}
  .me-band{grid-template-columns:1fr;}
  .sample-shots .phone-frame{right:-4px;}
  .sample.flip .sample-shots .phone-frame{left:auto;right:-4px;}
  .photo-slot{max-width:320px;}
}
.sample-shots,.buy>*,.ex-row>*,.seq>*,.pg>*,.demo>*,.about-intro>*,.learn-ex>*{min-width:0;}
/* job card: tag sits under the step text at every width, so the card stays narrow beside the figure */
.jobcard li{grid-template-columns:28px 1fr;row-gap:6px;}
.jobcard li .tag{grid-column:2;justify-self:start;}
.hero:not(.inner) .jobcard{width:min(100%,320px);}
@media (max-width:1180px){ .hero:not(.inner) .jobcard{width:min(100%,290px);} }
@media (max-width:1060px){ .hero:not(.inner) .jobcard{width:100%;} }
.glance .ticks{margin-top:14px;}

/* =====================================================================
   v5 (4th Nov 2026): Marlow visual review + contrast audit + Sam's hero notes. produced_by: Nell Ashby
   One border weight (2px), one card shadow (4px), one featured shadow (6px, the job sheet).
   ===================================================================== */
:root{--link:#8A2C00;--shadow:4px 4px 0 var(--graphite);}
/* contrast: labels keep their own colours wherever they sit */
p.label,span.label,.card p.label,.card.y p.label,.card.dk p.label,.panel p.label{color:var(--hivis);}
p.label.y,span.label.y,.card p.label.y,.card.dk p.label.y,.card.y p.label.y{color:var(--ink);}
p.label.w,span.label.w,.card p.label.w,.card.y p.label.w,.card.dk p.label.w{color:var(--ink);}
.card.y p,.card.y .small,.card.y li,.sec.hivis p,.sec.hivis .small,.sec.hivis li,.pg-lead{color:var(--ink);font-weight:500;}
.buy-card p,.buy-card.both p,.panel>p{color:var(--ink);}
.buy-card.both .label{background:var(--graphite);color:var(--hivis);}
.mini-sw i,.mini-sw i.main{color:var(--ink);}
.jobsw span{color:#33363C;}
.go,a.go{color:var(--link);}
.sec.graphite .go,.sec.blueprint .go,.card.dk .go{color:var(--hivis);}
.buy-card .go{color:var(--ink);}

/* decoration diet: no ruler, no hazard tape mid-page, plain concrete, no dotted orange */
.ruler-top::before,.sec.hivis::before,.tape-top::before{content:none;display:none;}
.sec.concrete{background:var(--concrete);}

/* one border, one shadow */
.card,.panel,.buy-card,.frame,.pg-list,.seq li,.faq details,.form,.costs li,.chat,.ac,.choice label,.jobsw,.refer,.photo-slot,.ai-line{border-width:2px;box-shadow:4px 4px 0 var(--graphite);}
.on-blue .card,.on-blue .panel,.buy-card,.seq li{box-shadow:4px 4px 0 #061A33;}
.card.dk,.steps li{box-shadow:4px 4px 0 var(--orange);}
.btn{border-width:2px;box-shadow:4px 4px 0 var(--graphite);}
.btn.on-orange{box-shadow:4px 4px 0 #8A2C00;}
.btn.dark{box-shadow:4px 4px 0 #fff;}
.btn.is-pressed{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--graphite);}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--graphite);}
  .btn.on-orange:hover{box-shadow:5px 5px 0 #8A2C00;}.btn.dark:hover{box-shadow:5px 5px 0 #fff;}
  .buy-card:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #061A33;}
  .ex-card:hover .frame{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--graphite);}
}
.card,.panel{padding:24px;}

/* ---------- Header: medallion fits the bar (overlaps the hazard edge by under 16px) ---------- */
.site-head .wrap{min-height:80px;}
.badge{--bw:100px;top:2px;left:22px;}
.badge::before{border-width:3px;box-shadow:3px 3px 0 #000;}
.site-head.is-stuck .badge{transform:scale(.8);}
.logo-a + main .hero .wrap,.logo-a + main .hero.inner .wrap{padding-top:48px;}
.nav .hc .hc-t{display:none;}
@media (min-width:1240px){ .nav .hc .hc-t{display:inline;} }
@media (max-width:980px){ .badge{--bw:90px;} .logo-a + main .hero .wrap,.logo-a + main .hero.inner .wrap{padding-top:36px;} }
@media (max-width:760px){
  .site-head .wrap{min-height:64px;padding:0 16px;}
  .badge{--bw:80px;left:12px;top:0;}
  .site-head.is-stuck .badge{transform:scale(.85);}
  .head-quick{gap:8px;margin-right:8px;}
  .hq{width:44px;height:44px;}
  .menu-btn{min-height:44px;width:110px;justify-content:center;padding:0 12px;}
  .logo-a + main .hero .wrap,.logo-a + main .hero.inner .wrap{padding-top:32px;}
}

/* ---------- Hero pattern: about 5%, clear behind the text ---------- */
.hero{background:var(--orange);}
.hero::before{background:url("hero-art-v5.svg") 0 0/620px auto;opacity:.06;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 46%,#000 60%);mask-image:linear-gradient(90deg,transparent 0 46%,#000 60%);}
.hero .wrap{z-index:1;}
@media (max-width:1060px){ .hero::before{-webkit-mask-image:linear-gradient(180deg,transparent 0 40%,#000 60%);mask-image:linear-gradient(180deg,transparent 0 40%,#000 60%);background-size:480px auto;} }

/* ---------- Home hero: copy | job sheet | character, each in its own space ---------- */
.hero:not(.inner) .wrap{max-width:1300px;grid-template-columns:minmax(0,540px) 430px 300px;justify-content:space-between;gap:36px;align-items:end;padding-bottom:0;}
.hero:not(.inner) .wrap>div:first-child{align-self:center;padding-bottom:48px;}
.hero:not(.inner) h1{font-size:60px;line-height:1.02;max-width:none;letter-spacing:-.015em;}
.hero h1 .hl{padding:0 12px .04em;border-radius:10px;transform:rotate(-1deg);box-shadow:4px 4px 0 var(--hivis);margin:.08em 0 0;}
.hero .sub{color:var(--ink);}
.hero:not(.inner) .stage{min-height:0;padding:76px 0 40px;align-self:center;max-width:none;}
.hero:not(.inner) .jobcard{width:430px;max-width:100%;margin:0;transform:none;border-width:2px;box-shadow:6px 6px 0 var(--graphite);}
.hero:not(.inner) .jobcard::before,.hero:not(.inner) .jobcard::after,.stage::before,.stage::after{content:none;display:none;}
.hero:not(.inner) .toast{left:12px;right:12px;width:auto;top:0;transform:rotate(-1.5deg);border-width:2px;box-shadow:4px 4px 0 var(--graphite);}
.jobcard li{padding:9px 0;}
.hero-figure.fig-home{position:static;align-self:end;justify-self:end;height:var(--fig-h);width:auto;margin:0;}
/* the character stands on the hero's bottom edge, whole, on every page */
.hero-figure{--fig-h:440px;}
.hero.inner .wrap{padding-bottom:0;align-items:end;}
.hero.inner .wrap>div:first-child{align-self:center;padding-bottom:56px;}
.hero.inner .hero-figure{margin:0;align-self:end;justify-self:end;}
@media (max-width:1300px){
  .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 400px 260px;gap:28px;}
  .hero:not(.inner) .jobcard{width:400px;}
  .hero:not(.inner) h1{font-size:54px;}
}
@media (max-width:1180px){
  .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"copy sheet" "fig sheet";}
  .hero:not(.inner) .wrap>div:first-child{grid-area:copy;padding-bottom:0;}
  .hero:not(.inner) .stage{grid-area:sheet;}
  .hero-figure.fig-home{grid-area:fig;justify-self:start;--fig-h:300px;}
}
@media (max-width:1060px){
  .hero-figure{--fig-h:300px;}
  .hero:not(.inner) .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "sheet" "fig";gap:24px;}
  .hero:not(.inner) .stage{padding:72px 0 0;}
  .hero:not(.inner) .jobcard{width:100%;}
  .hero-figure.fig-home{justify-self:end;}
  .hero.inner .wrap{grid-template-columns:1fr;}
  .hero.inner .hero-figure{justify-self:end;}
}
@media (max-width:760px){
  .hero .wrap{padding-left:20px;padding-right:20px;}
  .hero:not(.inner) h1,.hero.inner h1{font-size:38px;line-height:1.05;}
  .hero h1 .lb{display:none;}
  .hero .sub{font-size:17.5px;margin-top:16px;}
  .hero .btn-row{gap:12px;margin-top:22px;}
  .hero .btn-row .btn{flex:1 1 100%;min-height:54px;}
  .hero-proof{margin-top:24px;gap:8px 18px;}
  .hero-proof .tick{width:24px;height:24px;}
  .hero-figure,.hero-figure.fig-home{--fig-h:220px;}
  .hero.inner .hero-figure{margin-top:-8px;}
  .hero:not(.inner) .stage{padding-top:76px;}
  .hero.inner .wrap>div:first-child{padding-bottom:0;}
}
@media (min-width:761px){ .hero h1 .lb{display:inline;} }

/* ---------- Services: two panels, same structure; ServiceM8 strip below ---------- */
@media (min-width:1061px){ .svc{grid-template-columns:1fr 1fr;} }  /* v11: was unscoped and kept two columns on phones */
.strip-sw{margin-top:26px;grid-template-columns:56px 1fr;}
.strip-sw img{width:56px;height:56px;}
.strip-sw>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;}
.strip-sw .mini-sw{margin-top:0;}
.strip-sw span:not(.mini-sw){margin-top:0;}

/* ---------- Me band: thin solid border, bigger figure ---------- */
.refer{border:2px solid var(--graphite);border-style:solid;}
.me-band img{width:140px;}
.me-band .btn{min-height:52px;}

/* ---------- Grids: two columns where four cards would squeeze ---------- */
.g4{grid-template-columns:repeat(2,1fr);gap:22px;}
.buy-card{padding:24px;}
.pcard{padding:24px;}

/* ---------- Examples: one desktop-to-phone ratio, one overlap ---------- */
.sample-shots{padding-bottom:48px;padding-right:56px;}
.sample.flip .sample-shots{padding-right:0;padding-left:56px;}
.sample-shots .phone-frame,.sample.flip .sample-shots .phone-frame{width:30%;right:0;left:auto;bottom:0;}
.sample.flip .sample-shots .phone-frame{right:auto;left:0;}
@media (max-width:760px){ .sample-shots{padding-right:40px;} .sample.flip .sample-shots{padding-left:0;padding-right:40px;} .sample.flip .sample-shots .phone-frame{left:auto;right:0;} }

/* ---------- FAQ: one 760px column ---------- */
.faq-wrap{max-width:804px;}
.faq{max-width:none;}

/* ---------- Contact sections: 40:60, top aligned ---------- */
.talk .wrap{grid-template-columns:2fr 3fr;gap:48px;align-items:start;}
.form{padding:24px;}
.form input,.form textarea{min-height:48px;border-width:2px;}
.form .btn{min-height:52px;}
@media (max-width:1060px){ .talk .wrap{grid-template-columns:1fr;} }

/* ---------- Footer: bigger, calmer ---------- */
.foot{padding:64px 0 28px;}
.foot .wrap{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;}
.foot p{font-size:17px;max-width:36ch;color:#D3D5D9;}
.foot li a{font-size:17px;min-height:44px;}
.foot ul{display:grid;gap:4px;}
.foot .fh{font-size:14px;}
.foot .base{font-size:14px;color:#A9ADB4;margin-top:16px;}
.foot .base a{color:#C9CBCF;font-weight:500;}
@media (max-width:1060px){ .foot .wrap{grid-template-columns:1fr 1fr;} .foot .wrap>div:first-child{grid-column:1/-1;} }
@media (max-width:560px){ .foot .wrap{grid-template-columns:1fr;} }

/* ---------- Scroll reveal (tp.js adds .rv, .in). Transform + opacity only. ---------- */
.js .rv{opacity:0;transition:opacity 360ms var(--ease) var(--d,0ms);}
.js .rv.rise{translate:0 12px;transition:opacity 420ms var(--ease) var(--d,0ms),translate 420ms var(--ease) var(--d,0ms);}
.js .rv.in{opacity:1;translate:0 0;}

@media (prefers-reduced-motion:reduce){ .js .rv,.js .rv.rise{translate:none;transition:opacity 200ms linear;} }
/* v5.1: column maths so the whole home hero fits one 1440x900 screen */
.hero:not(.inner) .wrap{max-width:1300px;grid-template-columns:520px 400px 272px;justify-content:space-between;gap:32px;}
.hero:not(.inner) h1{font-size:58px;}
.hero:not(.inner) .jobcard{width:400px;}
.hero-figure.fig-home{--fig-h:400px;}
.hero:not(.inner) .stage{padding:72px 0 32px;}
@media (min-width:761px){
  .jobcard li{grid-template-columns:28px 1fr auto;row-gap:0;}
  .jobcard li .tag{grid-column:auto;justify-self:end;}
}
@media (max-width:1300px){ .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 380px 240px;gap:24px;} .hero:not(.inner) .jobcard{width:380px;} .hero-figure.fig-home{--fig-h:354px;} .hero:not(.inner) h1{font-size:52px;} }
@media (max-width:1180px){ .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 400px;} .hero:not(.inner) .jobcard{width:400px;} .hero-figure.fig-home{--fig-h:300px;} }
@media (max-width:1060px){ .hero:not(.inner) .wrap{grid-template-columns:1fr;} .hero:not(.inner) .jobcard{width:100%;} }
@media (max-width:760px){ .hero-figure.fig-home{--fig-h:220px;} .hero:not(.inner) h1{font-size:38px;} }
/* enquiry card sits above the job sheet, overlapping its edge by 12px, never its title */
.hero:not(.inner) .stage{padding-top:0;}
.hero:not(.inner) .toast{position:relative;left:auto;right:auto;top:auto;margin:0 12px -12px;width:auto;z-index:3;}
.hero:not(.inner) .jobcard .top{padding-top:22px;}
/* labels win over any section or card paragraph colour */
.label{color:var(--hivis) !important;}
.label.y,.label.w{color:var(--ink) !important;}
.sec .panel .go,.sec .buy-card .go,.sec.blueprint .card:not(.dk) .go,.sec.graphite .card:not(.dk) .go{color:var(--ink);}
.buy-card.both .go{color:var(--ink);}
/* v5.2: pattern back on the hero itself (one layer, ~7%), solid orange behind the text */
.hero::before{content:none;display:none;}
.hero{background:linear-gradient(90deg,var(--orange) 0 44%,rgba(255,92,0,0) 60%),url("hero-art-v5-faint.svg") 0 0/620px auto,var(--orange);}
@media (max-width:1060px){ .hero{background:linear-gradient(180deg,var(--orange) 0 38%,rgba(255,92,0,0) 58%),url("hero-art-v5-faint.svg") 0 0/480px auto,var(--orange);} }
footer .base a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;}

/* ================= v6 (Marlow v5 review + contrast check). produced_by: Nell Ashby ================= */
/* 7. calmer finish: smaller offsets, thinner stripe, fainter pattern */
:root{--shadow:3px 3px 0 var(--graphite);}
.site-head::after{height:5px;background:repeating-linear-gradient(-45deg,var(--hivis) 0 10px,var(--graphite) 10px 20px);}
.card,.panel,.buy-card,.frame,.pg-list,.seq li,.faq details,.form,.costs li,.chat,.ac,.choice label,.jobsw,.refer,.photo-slot,.ai-line{box-shadow:3px 3px 0 var(--graphite);}
.on-blue .card,.on-blue .panel,.buy-card,.seq li{box-shadow:3px 3px 0 #061A33;}
.card.dk,.steps li{box-shadow:3px 3px 0 var(--orange);}
.btn{box-shadow:3px 3px 0 var(--graphite);}
.btn.on-orange{box-shadow:3px 3px 0 #8A2C00;}
.btn.dark{box-shadow:3px 3px 0 #fff;}
.nav .nav-cta{box-shadow:2px 2px 0 var(--hivis);}
.btn.is-pressed{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--graphite);}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--graphite);}
  .btn.on-orange:hover{box-shadow:4px 4px 0 #8A2C00;}.btn.dark:hover{box-shadow:4px 4px 0 #fff;}
  .buy-card:hover{box-shadow:4px 4px 0 #061A33;}.ex-card:hover .frame{box-shadow:4px 4px 0 var(--graphite);}
  .nav .nav-cta:hover{box-shadow:3px 3px 0 var(--hivis);}
}
.hero:not(.inner) .jobcard{box-shadow:4px 4px 0 var(--graphite);}
.hero:not(.inner) .toast{box-shadow:3px 3px 0 var(--graphite);}
.hero{background:linear-gradient(90deg,var(--orange) 0 44%,rgba(255,92,0,0) 60%),url("hero-art-v6.svg") 0 0/620px auto,var(--orange);}
@media (max-width:1060px){ .hero{background:linear-gradient(180deg,var(--orange) 0 38%,rgba(255,92,0,0) 58%),url("hero-art-v6.svg") 0 0/480px auto,var(--orange);} }

/* 1. badge sits whole inside the bar, clear space above and below */
.site-head .wrap{min-height:84px;}
.badge{--bw:84px;top:8px;}
.badge::before{border-width:3px;box-shadow:2px 2px 0 #000;}
.site-head.is-stuck .badge{transform:none;}
@media (max-width:980px){ .badge{--bw:80px;top:9px;} }
@media (max-width:760px){
  .site-head .wrap{min-height:64px;}
  .badge{--bw:60px;top:7px;left:16px;}
  .site-head.is-stuck .badge{transform:none;}
}

/* 5. highlight line: more side padding, shadow offset matches the buttons */
.hero h1 .hl{padding:0 20px .04em;box-shadow:3px 3px 0 var(--hivis);}

/* 3. one character size on every desktop hero, standing on the bottom edge */
.hero-figure,.hero-figure.fig-home{--fig-h:380px;}
.hero:not(.inner) .wrap{grid-template-columns:520px 380px 280px;gap:40px;justify-content:space-between;}
.hero:not(.inner) .jobcard{width:380px;}
.hero-figure.fig-home{justify-self:center;align-self:end;}
.hero.inner .hero-figure{align-self:end;justify-self:end;margin:0 40px 0 0;}
@media (max-width:1300px){ .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 360px 260px;gap:28px;} .hero:not(.inner) .jobcard{width:360px;} .hero-figure,.hero-figure.fig-home{--fig-h:340px;} }
@media (max-width:1180px){ .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 380px;} .hero:not(.inner) .jobcard{width:380px;} .hero-figure,.hero-figure.fig-home{--fig-h:300px;} }
@media (max-width:1060px){ .hero:not(.inner) .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "sheet" "fig";} .hero:not(.inner) .jobcard{width:100%;} .hero.inner .hero-figure{margin-right:0;} }

/* 6. page label pill above the heading, even rhythm through the text block */
.hero .hero-pill{margin:0 0 14px;}
.hero.inner h1{margin:0;}
.hero .sub{margin-top:18px;}
.hero .btn-row{margin-top:26px;}

/* 2, 3, 4. phone: one character size and spacing on every hero, its own space, centred */
@media (max-width:760px){
  .logo-a + main .hero .wrap,.logo-a + main .hero.inner .wrap{padding-top:24px;}
  .hero:not(.inner) h1,.hero.inner h1{font-size:34px;line-height:1.06;}
  .hero .sub{font-size:16.5px;line-height:1.5;margin-top:12px;}
  .hero .hero-pill{margin-bottom:10px;}
  .hero .btn-row{gap:10px;margin-top:18px;}
  .hero .btn-row .btn{min-height:50px;}
  .hero-proof{margin-top:16px;}
  .hero .wrap,.hero.inner .wrap{gap:16px;}
  .hero-figure,.hero-figure.fig-home{--fig-h:170px;justify-self:center;align-self:end;margin:0;}
  .hero.inner .hero-figure{justify-self:center;margin:0;}
  .hero:not(.inner) .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "fig" "sheet";padding-bottom:32px;}
  .hero:not(.inner) .stage{padding-top:0;}
}

/* ================= v7: Sam's mascot size (589px on the home hero at desktop), clean re-cut edge ================= */
.hero-figure{filter:drop-shadow(4px 5px 0 rgba(20,22,25,.22));}
.hero-figure,.hero-figure.fig-home{--fig-h:589px;}
.hero:not(.inner) .wrap{max-width:1380px;grid-template-columns:minmax(0,500px) 360px auto;gap:32px;justify-content:space-between;}
.hero:not(.inner) .jobcard{width:360px;}
@media (min-width:1301px){ .hero:not(.inner) h1{font-size:56px;} }
.hero-figure{display:block;}
.hero.inner .wrap{max-width:1380px;grid-template-columns:minmax(0,1fr) auto;gap:32px;}
.hero.inner .hero-figure{margin:0;}
@media (max-width:1300px){ .hero-figure,.hero-figure.fig-home{--fig-h:480px;} .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 340px auto;gap:24px;} .hero:not(.inner) .jobcard{width:340px;} }
@media (min-width:1181px) and (max-width:1300px){ .hero:not(.inner) h1{font-size:50px;} }
@media (max-width:1180px){ .hero-figure,.hero-figure.fig-home{--fig-h:380px;} .hero:not(.inner) .wrap{grid-template-columns:minmax(0,1fr) 360px;} .hero:not(.inner) .jobcard{width:360px;} }
@media (max-width:1060px){ .hero-figure,.hero-figure.fig-home{--fig-h:300px;} .hero.inner .wrap{grid-template-columns:1fr;} .hero:not(.inner) .wrap{grid-template-columns:1fr;} .hero:not(.inner) .jobcard{width:100%;} }
@media (max-width:760px){ .hero-figure,.hero-figure.fig-home{--fig-h:170px;} .hero-figure{filter:drop-shadow(2px 3px 0 rgba(20,22,25,.22));} }

/* v7: phone menu call rows lost their words (a later v5 rule hid .hc-t below 1240px) */
@media (max-width:980px){ .nav .hc .hc-t{display:inline;} }

/* v9 (4th Nov 2026): hosting routes on websites, hosting and care card on pricing. produced_by: Nell Ashby */
.routes{margin-bottom:34px;}
.routes .pcard>p:not(.label):not(.pc-price){color:var(--mute);}
.routes .card.y.pcard>p:not(.label):not(.pc-price){color:var(--ink);}
.who-h{margin:0 0 16px;}
.pcard.care{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start;margin-top:26px;}
.pcard.care .ticks{margin-top:0;}
@media (max-width:760px){.pcard.care{grid-template-columns:1fr;gap:12px;}}
.costs span a{color:var(--ink);font-weight:700;}
.routes .pcard>.label{align-self:flex-start;}

/* ================= v10 (4th Nov 2026): hero tagline + sample-site peek. produced_by: Nell Ashby ================= */
.hero .tagline{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.25;max-width:30ch;text-wrap:balance;margin-top:20px;color:var(--ink);}
.hero .tagline + .sub{margin-top:10px;font-size:18px;}
.hero-proof{margin-top:22px;}
.peek{display:inline-flex;align-items:center;gap:14px;margin-top:18px;padding:10px 18px 10px 10px;min-height:44px;background:#fff;color:var(--ink);text-decoration:none;
  border:3px solid var(--graphite);border-radius:14px;box-shadow:3px 3px 0 var(--graphite);transition:transform 160ms var(--ease),box-shadow 160ms var(--ease);}
.peek-ph{flex:none;width:48px;height:80px;border:2px solid var(--graphite);border-radius:9px;overflow:hidden;background:var(--graphite);}
.peek-ph img{display:block;width:100%;height:auto;}
.peek-t{display:flex;flex-direction:column;gap:2px;line-height:1.25;}
.peek-lab{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--hivis);align-self:flex-start;padding:1px 8px;border-radius:999px;border:2px solid var(--graphite);}
.peek-t b{font-family:var(--display);font-weight:800;font-size:16.5px;margin-top:4px;text-decoration:underline;text-underline-offset:3px;}
.peek-t span:last-child{font-size:14px;font-weight:600;color:var(--mute);}
.peek.is-pressed{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--graphite);}
@media (hover:hover) and (pointer:fine){ .peek:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--graphite);} }
@media (prefers-reduced-motion:reduce){ .peek{transition:none;} }
@media (max-width:760px){
  .hero .tagline{font-size:19px;margin-top:14px;}
  .hero .tagline + .sub{font-size:16.5px;margin-top:8px;}
  .peek{display:flex;margin-top:14px;}
  .hero-proof{margin-top:16px;}
}

/* v11 (5 Nov): words add-on and pay in three, beside the website prices */
.buy-terms{margin:22px 0 0;max-width:68ch;font-weight:600;font-size:17px;color:var(--ink);}

/* r2, 5th Nov 2026: Learn AI formats, accountants section, Who sent you?, email reveal. produced_by: build worker */
.formats .card.dk p+p{margin-top:10px;}
.acc{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;}
.acc .lead2+.lead2{margin-top:14px;}
.acc-steps{margin:18px 0;font-weight:400;font-size:18px;}
.acc-steps b{font-weight:700;}
.acc-box p{margin-top:10px;}
.copy-box{margin-top:12px;background:#fff;border:2px solid var(--graphite);border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.5;color:var(--ink);}
.copy-box p{margin:0;color:var(--ink);}
.copy-box p+p{margin-top:8px;}
.copy-msg{font-weight:700;margin-left:8px;}
.form .opt{font-weight:400;color:var(--mute);}
.email-out a{font-weight:700;color:var(--link);word-break:break-all;}
.email-btn{min-height:44px;}
@media (max-width:980px){ .acc{grid-template-columns:1fr;gap:28px;} }
[hidden]{display:none !important;}

/* ---------- r3 (5th Nov): one tick, sitewide. 28px ink circle, bold hi-vis check, centred on the first text line ---------- */
.tick{--tk:28px;width:var(--tk);height:var(--tk);flex:none;box-sizing:border-box;border-radius:50%;background:var(--graphite);color:var(--hivis);
  border:2px solid var(--graphite);display:inline-grid;place-items:center;box-shadow:2px 2px 0 rgba(20,22,25,.22);}
.tick svg{display:block;width:17px;height:17px;}
.tick.you-ic{background:var(--hivis);color:var(--ink);}
.hero-proof .tick{background:var(--graphite);color:var(--hivis);box-shadow:2px 2px 0 rgba(20,22,25,.3);}
.on-blue .tick:not(.you-ic),.graphite .tick:not(.you-ic),.dk .tick:not(.you-ic){background:var(--hivis);color:var(--ink);border-color:var(--ink);box-shadow:none;}
/* rows: tick column fixed, text beside it; the circle sits on the middle of the FIRST line, single or multi-line */
.hero-proof{gap:12px 26px;font-size:16.5px;line-height:1.3;}
.hero-proof span{display:inline-flex;align-items:center;gap:11px;}
.ticks li{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:start;}
.ticks li::before{content:none;display:none;}
.ticks li>.tick,.panel li>.tick,.seq li>.tick,.jobcard li>.tick{margin-top:calc((1lh - 28px) / 2);}
.panel li{grid-template-columns:28px 1fr;column-gap:12px;align-items:start;}
.jobcard li{grid-template-columns:28px 1fr auto;column-gap:12px;}
.jobcard li>.tick{align-self:center;margin-top:0;}
@supports not (height:1lh){ .ticks li>.tick,.panel li>.tick,.seq li>.tick{margin-top:0;} }
@media (max-width:760px){
  .hero-proof .tick{--tk:28px;}
  .jobcard li{grid-template-columns:28px 1fr;}
  .jobcard li>.tick{align-self:start;margin-top:calc((1lh - 28px) / 2);}
}
.jobcard li{align-items:start;}
.jobcard li>.tick{align-self:start;margin-top:calc((1lh - 28px) / 2);}
.jobcard li>.tag{align-self:start;margin-top:calc((1lh - 22px) / 2);}
.seq li,.seq-mini li{align-items:start;}
.seq li>.tag{align-self:start;}
@media (max-width:760px){ .hero-proof .tick,.tick{width:28px;height:28px;} }
.tick svg{width:22px;height:22px;}
.tick.you-ic svg{width:20px;height:20px;}

/* ===================================================================================================================
   r4 HEROES + LOGO, 5th Nov 2026 (Sam's voice feedback on round 3). produced_by: build worker
   One hero family on every page: same grid, headline scale, label pill, sub, button row and tick row.
   Split = words left, scene right. Wide = words on top, scene full width (Learn AI, Websites).
   Motion: transform and opacity only; every scene loops forever with no pause control (Sam); the restart fades only
   the moving parts (.lp) while frames and outlines stay, so there is no jump and no empty box.
   Reduced motion = finished frame, still. Scene markup: mockup-src/heroes.py. Loop engine: tp.js (r4 block).
   =================================================================================================================== */
:root{--hx-out:cubic-bezier(.23,1,.32,1);--hx-io:cubic-bezier(.77,0,.175,1);--hx-sh:6px 6px 0 var(--graphite);}

/* ---------- E. Logo: starts big, hangs over the bar a little, shrinks on scroll ---------- */
.site-head .wrap{max-width:1320px;}
.badge{--bw:140px;top:4px;transform-origin:22% 0;transition:transform 260ms var(--hx-out);will-change:transform;}
/* the medallion is 300x238, so a 140px badge is 111px tall: it hangs about 26px below the 89px bar, and once scrolled
   it settles to about 101px wide, still dipping about 6px over the hazard stripe */
.site-head.is-stuck .badge{transform:translateY(11px) scale(.72);}
@media (max-width:980px){ .badge{--bw:124px;} .site-head.is-stuck .badge{transform:translateY(12px) scale(.74);} }
@media (max-width:760px){ .badge{--bw:100px;top:4px;left:16px;} .site-head.is-stuck .badge{transform:translateY(12px) scale(.72);} }
@media (prefers-reduced-motion:reduce){ .badge,.site-head.is-stuck .badge{transform:translateY(11px) scale(.72);transition:none;} }
@media (prefers-reduced-motion:reduce) and (max-width:760px){ .badge,.site-head.is-stuck .badge{transform:translateY(12px) scale(.72);} }

/* ---------- F. The hero grid every page shares ---------- */
.hero.hx{--sw:580px;}
.hero.hx.w-lg{--sw:640px;} .hero.hx.w-xl{--sw:760px;}
.hero.hx .wrap{max-width:1320px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--sw));grid-template-areas:none;gap:56px;
  align-items:center;justify-content:space-between;padding-top:76px;padding-bottom:72px;}
.logo-a + main .hero.hx .wrap{padding-top:76px;}
.hero.hx .wrap>div.hx-copy{align-self:center;padding:0;grid-area:auto;max-width:560px;}
.hero.hx h1{font-size:clamp(38px,3.9vw,56px);line-height:1.02;letter-spacing:-.012em;max-width:15ch;margin:0;}
.hero.hx.home h1{max-width:none;font-size:clamp(38px,3.75vw,54px);}
.hero.hx.home.w-xl{--sw:700px;}
.hero.hx.home .wrap{gap:48px;}
.hero.hx .hero-pill{margin:0 0 16px;}
.hero.hx .tagline{margin-top:20px;font-size:22px;}
.hero.hx .sub{max-width:42ch;margin-top:18px;font-size:19px;line-height:1.5;}
.hero.hx .tagline + .sub{margin-top:10px;font-size:18px;}
.hero.hx .btn-row{margin-top:26px;}
.hero.hx .hero-proof{margin-top:22px;}
.hx-scene{position:relative;width:100%;justify-self:end;container-type:inline-size;}
/* wide */
.hero.hx.wide .wrap{grid-template-columns:minmax(0,1fr);gap:40px;}
.hero.hx.wide .wrap>div.hx-copy{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px 56px;align-items:end;}
.hero.hx.wide h1{max-width:18ch;}
.hero.hx.wide .hx-scene{justify-self:stretch;}
@media (max-width:1240px){ .hero.hx.w-xl,.hero.hx.home.w-xl{--sw:620px;} .hero.hx.home h1{font-size:46px;} .hero.hx.w-lg{--sw:580px;} .hero.hx{--sw:540px;} .hero.hx .wrap{gap:40px;} }
@media (max-width:1060px){
  .hero.hx .wrap{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:56px;padding-bottom:56px;}
  .logo-a + main .hero.hx .wrap{padding-top:64px;}
  .hero.hx .hx-scene{justify-self:center;max-width:680px;}
  .hero.hx.wide .wrap>div.hx-copy{grid-template-columns:1fr;}
  .hero.hx.wide .hx-scene{max-width:none;}
}
@media (max-width:760px){
  .hero.hx .wrap,.logo-a + main .hero.hx .wrap{padding-top:40px;padding-bottom:40px;gap:28px;}
  .hero.hx h1{font-size:34px;line-height:1.06;}
  .hero.hx .tagline{font-size:19px;margin-top:14px;}
  .hero.hx .sub,.hero.hx .tagline + .sub{font-size:16.5px;margin-top:12px;}
  .hero.hx .hero-pill{margin-bottom:10px;}
  .hero.hx .btn-row{margin-top:18px;gap:10px;}
  .hero.hx .btn-row .btn{flex:1 1 100%;min-height:50px;}
  .hero.hx .hero-proof{margin-top:16px;}
}

/* ---------- shared scene pieces ---------- */
.hx-lab{display:block;font:800 11px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);}
.hx-card{position:absolute;background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;box-shadow:var(--hx-sh);padding:12px 14px;font:600 14px/1.35 var(--text);}
.hx-card b{font-family:var(--display);font-weight:800;}
.hx-pill{position:absolute;display:inline-flex;align-items:center;gap:.5em;border:2.5px solid var(--graphite);border-radius:999px;padding:.45em .95em;font:800 13px/1.1 var(--display);
  background:var(--hivis);color:var(--ink);box-shadow:3px 3px 0 var(--graphite);white-space:nowrap;}
.hx-pill.k{background:var(--graphite);color:#fff;}
.hx-pill.w{background:#fff;}
.hx-pill svg{width:1.25em;height:1.25em;flex:none;}
.hx-stk{box-shadow:0 0 0 5px var(--cream),7px 8px 0 5px rgba(20,22,25,.25);}
.hx-phone{position:absolute;display:block;background:var(--graphite);border:3px solid var(--graphite);border-radius:26px;padding:6px;box-shadow:6px 6px 0 rgba(20,22,25,.85);}
.hx-phone .scr{display:block;position:relative;overflow:hidden;border-radius:20px;aspect-ratio:390/780;background:#fff;}
.hx-phone .scr img{display:block;width:100%;height:auto;}
.hx-browser{position:absolute;display:block;background:#fff;border:3px solid var(--graphite);border-radius:12px;overflow:hidden;box-shadow:7px 7px 0 rgba(20,22,25,.85);}
.hx-browser .bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 9px;background:var(--concrete);border-bottom:2.5px solid var(--graphite);}
.hx-browser .bar i{width:9px;height:9px;border-radius:50%;border:2px solid var(--graphite);background:#fff;}
.hx-browser .bar>span{margin-left:auto;font:800 10px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;}
.hx-browser img{display:block;width:100%;height:auto;}
a.hx-phone,a.hx-browser{text-decoration:none;color:inherit;}
a.hx-phone:focus-visible,a.hx-browser:focus-visible{outline:3px solid #fff;outline-offset:4px;}
.hx-fig{display:block;height:auto;max-width:100%;filter:drop-shadow(4px 5px 0 rgba(20,22,25,.24));}
.hx-tick{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--graphite);color:var(--hivis);}
.hx-tick svg{width:72%;height:72%;}
.figbox{position:relative;display:grid;place-items:center;align-self:center;min-width:0;width:100%;}
.figbox>.hx-fig{width:100%;}

/* ---------- the loop restart: moving parts fade out, snap back unseen, fade in. Frames stay. ---------- */
.hx-rs .lp{opacity:0 !important;transition:opacity 300ms var(--hx-out) !important;}
.hx-nt .lp,.hx-nt .lp *{transition:none !important;animation:none !important;}
.hx-back .lp{transition:opacity 340ms var(--hx-out) !important;}

/* ---------- cartoon-only pages ---------- */
.hx-scene.cf{display:grid;place-items:center;}
.cf .hx-fig{height:440px;width:auto;}
.hero.hx .cf{justify-self:center;}
.cf .hx-fig.wide{height:360px;}  /* the head-scratch pose is wider: same visual size as arms folded */
@media (max-width:1240px){ .cf .hx-fig{height:380px;} .cf .hx-fig.wide{height:320px;} }
@media (max-width:1060px){ .cf .hx-fig,.cf .hx-fig.wide{height:260px;} }
@media (max-width:760px){ .cf .hx-fig,.cf .hx-fig.wide{height:190px;} }

/* ===================== HOME A: sticker board (loops: stickers slap on, hold, peel, again) ===================== */
.hx-scene.oa{aspect-ratio:1/.96;}
.oa .base{left:24%;top:3%;width:32%;--r:-4deg;transform:rotate(var(--r));}
.oa .form{left:0;top:46%;width:39%;--r:-6deg;}
.oa .form .ph{display:flex;gap:8px;margin-top:8px;}
.oa .form .ph i{flex:1;aspect-ratio:1;border:2.5px solid var(--graphite);border-radius:10px;background:var(--concrete) center/cover;}
.oa .ticket{left:46%;bottom:2%;width:38%;--r:4deg;background:var(--hivis);}
.oa .ticket .hx-lab{color:var(--ink);}
.oa .ticket b{display:block;font-size:17px;}
.oa .call{position:absolute;left:62%;top:2%;width:17%;aspect-ratio:1;border-radius:50%;background:var(--graphite);color:#fff;display:grid;place-items:center;text-align:center;font:800 14px/1 var(--display);--r:8deg;}
.oa .call svg{width:42%;height:auto;display:block;margin:0 auto 4px;}
.oa .pin{position:absolute;left:3%;top:4%;width:16%;--r:-8deg;}
.oa .pin svg{display:block;width:100%;height:auto;}
.oa .key{left:4%;bottom:4%;--r:-3deg;}
.oa .hx-fig{position:absolute;right:0;top:19%;width:27%;}
.oa .lp{opacity:0;transform:translateY(-12px) scale(1.06) rotate(calc(var(--r,0deg) + 5deg));transition:opacity 260ms var(--hx-out),transform 440ms var(--hx-out);}
.oa.s1 .form,.oa.s2 .ticket,.oa.s3 .call,.oa.s4 .pin,.oa.s5 .key{opacity:1;transform:rotate(var(--r,0deg));}

/* ===================== HOME E: everything arrives at once, handled one at a time ===================== */
.hx-scene.oe{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1.12fr);align-items:stretch;}
.oe .inb{grid-column:1;grid-row:1;} .oe .don{grid-column:3;grid-row:1;}
.oe .arw{grid-column:2;grid-row:1;align-self:center;justify-self:center;width:24px;height:24px;background:var(--graphite);
  clip-path:polygon(0 15%,60% 15%,60% 0,100% 50%,60% 100%,60% 85%,0 85%);}
.oe .pan{border:3px solid var(--graphite);border-radius:16px;box-shadow:var(--hx-sh);padding:14px;}
.oe .inb{background:var(--graphite);color:#fff;}
.oe .don{background:#fff;}
.oe .phd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;min-height:26px;}
.oe .phd>b{font:800 17px/1.1 var(--display);}
.oe .cnt{display:grid;font:800 12px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;}
.oe .cnt>span{grid-area:1/1;justify-self:end;padding:5px 9px;border-radius:999px;transition:opacity 260ms var(--hx-out);}
.oe .c4{background:#FF5C5C;color:var(--ink);} .oe .c0{background:var(--hivis);color:var(--ink);opacity:0;}
.oe.s5 .c4{opacity:0;} .oe.s5 .c0{opacity:1;}
.oe ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.oe .it{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;background:#262A30;border:2px solid #474C55;border-radius:12px;padding:10px;
  opacity:0;transform:translateX(-14px);transition:opacity 260ms var(--hx-out),transform 380ms var(--hx-out),background-color 260ms var(--hx-out),border-color 260ms var(--hx-out);}
.oe.s1 .it{opacity:1;transform:none;}
.oe .i2{transition-delay:70ms;} .oe .i3{transition-delay:140ms;} .oe .i4{transition-delay:210ms;}
.oe .it .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--hivis);color:var(--ink);}
.oe .it .ic svg{width:18px;height:18px;}
.oe .tx{display:grid;gap:2px;min-width:0;}
.oe .it .tx b{font:800 14px/1.15 var(--display);}
.oe .it .tx span{font:600 13px/1.3 var(--text);color:#DADDE2;}
.oe .it time{font:700 12px/1 var(--text);color:#DADDE2;}
.oe .it .dn{position:absolute;right:-9px;top:-9px;width:24px;height:24px;border-radius:50%;background:var(--hivis);color:var(--ink);border:2px solid var(--graphite);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity 200ms var(--hx-out),transform 260ms var(--hx-out);}
.oe .it .dn svg{width:70%;height:70%;}
.oe .it .tx,.oe .it time,.oe .it .ic{transition:opacity 260ms var(--hx-out);}
.oe.s2 .i1,.oe.s3 .i2,.oe.s4 .i3,.oe.s5 .i4{background:transparent;border-color:#5A606A;border-style:dashed;}
.oe.s2 .i1 :is(.tx,time,.ic),.oe.s3 .i2 :is(.tx,time,.ic),.oe.s4 .i3 :is(.tx,time,.ic),.oe.s5 .i4 :is(.tx,time,.ic){opacity:.42;}
.oe.s2 .i1 .dn,.oe.s3 .i2 .dn,.oe.s4 .i3 .dn,.oe.s5 .i4 .dn{opacity:1;transform:none;}
.oe .ring .ic{animation:hxring 900ms var(--hx-io) infinite alternate;}
.oe:not(.s1) .ring .ic,.oe.s4 .ring .ic{animation:none;}
@keyframes hxring{from{transform:scale(1);}to{transform:scale(1.12);}}
.oe .ot{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 10px;align-items:center;border:2px dashed #D3CCBF;border-radius:12px;padding:9px 10px;min-height:66px;}
.oe .ot>*{opacity:0;transform:translateY(6px);transition:opacity 260ms var(--hx-out),transform 340ms var(--hx-out);}
.oe .ot .tx b{font:800 14px/1.15 var(--display);}
.oe .ot .tx span{font:600 13px/1.3 var(--text);color:var(--mute);}
.oe .ot .tag{grid-column:2;justify-self:start;font-size:11px;}
.oe.s2 .o1,.oe.s3 .o2,.oe.s4 .o3,.oe.s5 .o4{border-style:solid;border-color:var(--graphite);}
.oe.s2 .o1>*,.oe.s3 .o2>*,.oe.s4 .o3>*,.oe.s5 .o4>*{opacity:1;transform:none;}
.oe .ot{transition:border-color 200ms var(--hx-out);}
.oe .slots{display:none;}
@media (max-width:760px){
  .hx-scene.oe{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 26px auto;}
  .oe .inb{grid-column:1;grid-row:1;} .oe .arw{grid-column:1;grid-row:2;transform:rotate(90deg);} .oe .don{grid-column:1;grid-row:3;}
}

/* ===================== HOME F: incoming tray drops into a job board that fills up ===================== */
.hx-scene.of2{display:grid;gap:16px;}
.of2 .tray{display:flex;align-items:center;gap:12px;background:var(--graphite);border:3px solid var(--graphite);border-radius:14px;padding:10px 12px;min-height:64px;box-shadow:var(--hx-sh);}
.of2 .tray .hx-lab{color:var(--hivis);flex:none;}
.of2 .tray{position:relative;}
.of2 .none{position:absolute;left:110px;top:50%;transform:translateY(-50%);font:700 14px/1 var(--text);color:#DADDE2;opacity:0;transition:opacity 260ms var(--hx-out);}
.of2.s6 .none{opacity:1;}
.of2 .chips{display:flex;flex-wrap:wrap;gap:8px;}
.of2 .chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border-radius:999px;padding:6px 10px;font:800 13px/1 var(--display);
  opacity:0;transform:translateY(-8px);transition:opacity 240ms var(--hx-out),transform 360ms var(--hx-out);}
.of2 .chip svg{width:16px;height:16px;}
.of2 .chip time{font:700 11px/1 var(--text);color:var(--mute);}
.of2.s1 .chip{opacity:1;transform:none;}
.of2 .t2{transition-delay:60ms;} .of2 .t3{transition-delay:120ms;} .of2 .t4{transition-delay:180ms;} .of2 .t5{transition-delay:240ms;}
.of2.s2 .t1,.of2.s3 .t2,.of2.s4 .t3,.of2.s5 .t4,.of2.s6 .t5{opacity:0;transform:translateY(14px) scale(.9);transition-delay:0ms;}
.of2 .bd{background:#fff;border:3px solid var(--graphite);border-radius:18px;box-shadow:var(--hx-sh);overflow:hidden;}
.of2 .bh{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--graphite);color:#fff;}
.of2 .bh b{font:800 16px/1.1 var(--display);}
.of2 .bh small{font:800 11px/1 var(--display);color:var(--hivis);letter-spacing:.06em;text-transform:uppercase;}
.of2 .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.of2 .col{border-left:2px dashed #DCD6CA;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:238px;}
.of2 .col:first-child{border-left:0;}
.of2 .col h4{font:800 12px/1.15 var(--display);text-transform:uppercase;letter-spacing:.04em;padding-bottom:7px;border-bottom:2.5px solid var(--graphite);min-height:36px;display:flex;align-items:flex-end;}
.of2 .fc{background:var(--hivis);border:2px solid var(--graphite);border-radius:10px;padding:8px;box-shadow:3px 3px 0 var(--graphite);font:600 12.5px/1.3 var(--text);display:grid;gap:2px;
  opacity:0;transform:translateY(-16px) rotate(-2deg);transition:opacity 240ms var(--hx-out),transform 420ms var(--hx-out);}
.of2 .fc b{font:800 13px/1.15 var(--display);}
.of2.s2 .f1,.of2.s3 .f2,.of2.s4 .f3,.of2.s5 .f4,.of2.s6 .f5{opacity:1;transform:rotate(-1deg);}
.of2 .hole{flex:1;min-height:40px;border:2px dashed #E3DDD2;border-radius:10px;}
@media (max-width:760px){
  .of2 .cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .of2 .col{min-height:0;}
  .of2 .col:nth-child(3){border-left:0;}
  .of2 .col:nth-child(n+3){border-top:2px dashed #DCD6CA;}
  .of2 .hole{min-height:30px;}
}

/* ===================== HOME G: proof stage with room (a grid: nothing on top of anything) ===================== */
.hx-scene.og{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.36fr) minmax(0,.62fr);grid-template-areas:"br br fig" "job phn fig";gap:24px 22px;align-items:center;}
.og .br{grid-area:br;position:relative;}
.og .phn{grid-area:phn;position:relative;width:100%;}
.og .phn .scr img{transition:transform 2400ms var(--hx-io);}
.og.s1 .phn .scr img{transform:translateY(-22%);}
.og .job{grid-area:job;position:relative;align-self:center;}
.og .job .row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.og .job p{margin-top:6px;}
.og .job .tag{display:inline-block;margin-top:10px;}
.og .job{opacity:0;transform:translateY(12px);transition:opacity 280ms var(--hx-out),transform 420ms var(--hx-out);}
.og.s2 .job{opacity:1;transform:none;}
.og .figbox{grid-area:fig;}
.og .figbox .hx-fig{max-width:260px;}
.og .smp{position:relative;margin-top:14px;transform:rotate(3deg);white-space:normal;text-align:center;}
@media (max-width:760px){
  .hx-scene.og{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);grid-template-areas:"br br" "phn fig" "job job";}
  .og .phn{width:78%;justify-self:center;}
}

/* ===================== HOME H (pick): A's stickers on B's storyboard, cartoon whole beside ===================== */
.hx-scene.oh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:30px;align-items:center;}
.oh .sb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px;}
.oh .sl{position:relative;min-height:200px;border:3px dashed rgba(20,22,25,.42);border-radius:16px;display:grid;}
.oh .sl .n{position:absolute;z-index:3;left:-12px;top:-12px;width:32px;height:32px;border-radius:50%;background:var(--graphite);color:#fff;border:2.5px solid var(--graphite);
  display:grid;place-items:center;font:900 15px/1 var(--display);transition:background-color 240ms var(--hx-out),color 240ms var(--hx-out);}
.oh[data-step="1"] .s-1 .n,.oh[data-step="2"] .s-2 .n,.oh[data-step="3"] .s-3 .n,.oh[data-step="4"] .s-4 .n{background:var(--hivis);color:var(--ink);}
.oh .st{position:relative;margin:0;display:flex;flex-direction:column;gap:8px;font:600 14px/1.35 var(--text);padding:14px;}
.oh .st p{margin:0;}
.oh .s-1 .st{--r:-2.5deg;} .oh .s-2 .st{--r:2deg;} .oh .s-3 .st{--r:1.5deg;} .oh .s-4 .st{--r:-2deg;}
.oh .st{opacity:0;transform:translateY(-12px) scale(1.06) rotate(calc(var(--r) + 5deg));transition:opacity 260ms var(--hx-out),transform 460ms var(--hx-out);}
.oh.s1 .s-1 .st,.oh.s2 .s-2 .st,.oh.s3 .s-3 .st,.oh.s4 .s-4 .st{opacity:1;transform:rotate(var(--r));}
.oh .mini{display:flex;align-items:center;gap:12px;}
.oh .mp{flex:none;width:52px;height:88px;border:2.5px solid var(--graphite);border-radius:10px;overflow:hidden;background:var(--graphite);}
.oh .mp img{display:block;width:100%;height:auto;}
.oh .cb{display:inline-flex;align-items:center;gap:6px;background:var(--graphite);color:#fff;border-radius:999px;padding:8px 14px;font:800 14px/1 var(--display);}
.oh .cb svg{width:18px;height:18px;}
.oh .pp{display:flex;gap:8px;}
.oh .pp i{flex:1;aspect-ratio:4/3;border:2.5px solid var(--graphite);border-radius:10px;background:var(--concrete) center/cover;}
.oh .tk{background:var(--hivis);}
.oh .tk .hx-lab{color:var(--ink);}
.oh .st>b{font-size:17px;line-height:1.15;}
.oh .tk .tag{align-self:flex-start;}
.oh .amt{color:#1F7A3A;}
.oh .stamp{position:absolute;right:12px;top:12px;border:3px solid #1F7A3A;color:#1F7A3A;border-radius:8px;padding:.2em .45em;font:900 16px/1 var(--display);letter-spacing:.06em;transform:rotate(-10deg);background:#fff;}
.oh .figbox .hx-fig{width:100%;max-width:270px;}
@media (max-width:1240px){ .oh .sl{min-height:186px;} .oh .st{font-size:13.5px;padding:12px;} }
@media (max-width:760px){
  .hx-scene.oh{grid-template-columns:minmax(0,1fr);gap:22px;}
  .oh .figbox{order:-1;}
  .oh .figbox .hx-fig{max-width:130px;}
  .oh .sb{gap:20px 16px;}
  .oh .sl{min-height:172px;}
  .oh .st{font-size:13px;padding:10px;gap:6px;}
  .oh .st>b{font-size:15px;}
  .oh .mp{width:40px;height:68px;}
  .oh .cb{padding:7px 10px;font-size:13px;}
  .oh .stamp{font-size:13px;right:8px;top:8px;}
}

/* ===================== WEBSITES: the same sample on a computer and a phone, phone overlapping ===================== */
.hx-scene.ow2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:48px;align-items:center;}
.ow2 .dev{position:relative;padding-bottom:56px;}
.ow2 .dk{position:relative;width:78%;transform:rotate(-1deg);}
.ow2 .mb{left:auto;right:0;top:9%;width:25%;transform:rotate(2deg);z-index:2;}
.ow2 .smp{left:2%;bottom:6px;transform:rotate(-2deg);z-index:3;}
.ow2 .pts{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.ow2 .pts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;background:#fff;border:2.5px solid var(--graphite);border-radius:14px;box-shadow:4px 4px 0 var(--graphite);padding:12px 14px;
  font:600 14.5px/1.4 var(--text);opacity:.5;transform:translateX(8px);transition:opacity 280ms var(--hx-out),transform 380ms var(--hx-out);}
.ow2 .pts li b{display:block;font:800 16px/1.2 var(--display);margin-bottom:2px;}
.ow2 .pts .hx-tick{width:28px;height:28px;}
.ow2.s1 .p1,.ow2.s2 .p2,.ow2.s3 .p3{opacity:1;transform:none;}
@media (max-width:1060px){ .hx-scene.ow2{grid-template-columns:minmax(0,1fr);gap:28px;} .ow2 .pts{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .ow2 .pts{grid-template-columns:minmax(0,1fr);gap:10px;} .ow2 .dk{width:84%;} .ow2 .mb{width:32%;top:14%;} .ow2 .dev{padding-bottom:40px;} }

/* ===================== START-UP: one tradesperson, the back office around him ===================== */
.hx-scene.su{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:18px 30px;align-items:center;padding-top:22px;}
.su .ring{display:contents;list-style:none;margin:0;padding:0;}
.su .sf.l{grid-column:1;} .su .sf.r{grid-column:3;}
.su .k1,.su .k4{grid-row:1;} .su .k2,.su .k5{grid-row:2;} .su .k3,.su .k6{grid-row:3;}
.su .me{grid-column:2;grid-row:1/4;display:grid;justify-items:center;gap:12px;}
.su .me .hx-fig{width:100%;max-width:220px;}
.su .me .hx-pill{position:relative;}
.su .smp{left:50%;top:-14px;transform:translateX(-50%) rotate(-2deg);z-index:3;}
.su .sf{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;align-items:center;background:#fff;border:2.5px solid var(--graphite);border-radius:12px;padding:10px 12px;
  box-shadow:4px 4px 0 var(--graphite);transition:transform 260ms var(--hx-out);}
.su .sf::after{content:"";position:absolute;top:50%;width:30px;height:3px;background:var(--graphite);opacity:.35;transition:opacity 240ms var(--hx-out),background-color 240ms var(--hx-out);}
.su .sf.l::after{right:-32px;} .su .sf.r::after{left:-32px;}
.su .sf .ic{width:30px;height:30px;border-radius:50%;background:var(--concrete);display:grid;place-items:center;border:2px solid var(--graphite);}
.su .sf .ic svg{width:16px;height:16px;}
.su .sf .tx b{display:block;font:800 15px/1.15 var(--display);}
.su .st{display:grid;font:600 13px/1.3 var(--text);}
.su .st>span{grid-area:1/1;transition:opacity 240ms var(--hx-out);}
.su .st .w{color:var(--mute);}
.su .st .d{opacity:0;}
.su .sf .okc{position:absolute;right:-9px;top:-9px;width:24px;height:24px;border-radius:50%;background:var(--hivis);color:var(--ink);border:2px solid var(--graphite);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity 200ms var(--hx-out),transform 260ms var(--hx-out);}
.su .sf .okc svg{width:70%;height:70%;}
.su .sf .tag{grid-column:2;justify-self:start;font-size:10.5px;opacity:0;transition:opacity 240ms var(--hx-out);}
.su.s1 .k1 .w,.su.s2 .k2 .w,.su.s3 .k3 .w,.su.s4 .k4 .w,.su.s5 .k5 .w,.su.s6 .k6 .w{opacity:0;}
.su.s1 .k1 :is(.d,.tag),.su.s2 .k2 :is(.d,.tag),.su.s3 .k3 :is(.d,.tag),.su.s4 .k4 :is(.d,.tag),.su.s5 .k5 :is(.d,.tag),.su.s6 .k6 :is(.d,.tag){opacity:1;}
.su.s1 .k1 .okc,.su.s2 .k2 .okc,.su.s3 .k3 .okc,.su.s4 .k4 .okc,.su.s5 .k5 .okc,.su.s6 .k6 .okc{opacity:1;transform:none;}
.su.s1 .k1::after,.su.s2 .k2::after,.su.s3 .k3::after,.su.s4 .k4::after,.su.s5 .k5::after,.su.s6 .k6::after{opacity:1;background:var(--graphite);}
.su[data-step="1"] .k1,.su[data-step="2"] .k2,.su[data-step="3"] .k3,.su[data-step="4"] .k4,.su[data-step="5"] .k5,.su[data-step="6"] .k6{transform:translateY(-3px);}
.su.s1 .k1 .ic,.su.s2 .k2 .ic,.su.s3 .k3 .ic,.su.s4 .k4 .ic,.su.s5 .k5 .ic,.su.s6 .k6 .ic{background:var(--hivis);}
@media (max-width:760px){
  .hx-scene.su{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:14px 14px;padding-top:26px;}
  .su .me{grid-column:1/-1;grid-row:1;}
  .su .me .hx-fig{max-width:140px;}
  .su .sf.l,.su .sf.r{grid-column:auto;grid-row:auto;}
  .su .sf::after{display:none;}
  .su .sf{grid-template-columns:minmax(0,1fr);padding:10px;}
  .su .sf .ic{display:none;}
  .su .sf .tag{grid-column:1;}
}

/* ===================== ABOUT: the character beside how a job runs ===================== */
.hx-scene.ab{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:20px 26px;align-items:center;}
.ab .figbox .hx-fig{width:100%;max-width:240px;}
.ab .tl{background:#fff;border:3px solid var(--graphite);border-radius:16px;box-shadow:var(--hx-sh);padding:18px;}
.ab .tl h4{font:800 18px/1.15 var(--display);margin-bottom:14px;}
.ab .tl ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:14px;}
.ab .tl ol::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:4px;background:var(--orange);border-radius:2px;transform-origin:top;transform:scaleY(0);transition:transform 1400ms var(--hx-io) 400ms;}
.ab.is-in .tl ol::before{transform:scaleY(1);}
.ab .tl li{position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font:600 14.5px/1.35 var(--text);
  transition:opacity 300ms var(--hx-out),transform 340ms var(--hx-out);transition-delay:calc(var(--i) * 260ms + 400ms);}
.js .ab .tl li{opacity:0;transform:translateX(10px);}
.ab.is-in .tl li{opacity:1;transform:none;}
.ab .tl li b{display:block;font:800 15.5px/1.2 var(--display);}
.ab .tl li .d{width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--graphite);display:grid;place-items:center;z-index:1;font:900 13px/1 var(--display);}
.ab .base{position:relative;grid-column:2;justify-self:start;transform:rotate(-2deg);white-space:normal;}
@media (max-width:760px){ .hx-scene.ab{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);} .ab .tl{grid-column:1/-1;} .ab .figbox{grid-row:1;} .ab .base{grid-column:2;grid-row:1;align-self:center;} }

/* sizes for the ported scenes */
.hx-scene.ob,.hx-scene.ex{aspect-ratio:1/.96;}
@media (max-width:760px){ .hx-scene.ob{aspect-ratio:1/1.45;} }


/* B storyboard (round 3, ported) */
.ob .board{position:absolute;inset:0 0 4% 0;background:#fff;border:3px solid var(--graphite);border-radius:18px;box-shadow:10px 10px 0 var(--graphite);padding:max(12px,2.6cqw);
  display:grid;grid-template-rows:auto 1fr;gap:max(8px,1.8cqw);}
.ob .bh{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ob .bh b{font:800 max(15px,3cqw)/1.15 var(--display);}
.ob .grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:max(8px,1.8cqw);min-height:0;}
.ob .pn{position:relative;border:2.5px solid var(--graphite);border-radius:12px;background:var(--cream);padding:max(10px,2cqw);overflow:hidden;display:flex;flex-direction:column;gap:max(6px,1.2cqw);
  transition:transform 300ms var(--hx-out),background-color 300ms var(--hx-out);}
.ob .pn::after{content:"";position:absolute;inset:-1px;border-radius:12px;box-shadow:inset 0 0 0 3px var(--orange);opacity:0;transition:opacity 240ms var(--hx-out);pointer-events:none;}
.ob[data-step="1"] .pn:nth-child(1)::after,.ob[data-step="2"] .pn:nth-child(2)::after,.ob[data-step="3"] .pn:nth-child(3)::after,.ob[data-step="4"] .pn:nth-child(4)::after{opacity:1;}
.ob .pn .n{display:inline-grid;place-items:center;width:max(24px,4.2cqw);height:max(24px,4.2cqw);border-radius:50%;background:var(--graphite);color:#fff;font:900 max(12px,2.2cqw)/1 var(--display);flex:none;}
.ob .pn h4{display:flex;align-items:center;gap:max(6px,1.2cqw);font:800 max(13px,2.4cqw)/1.15 var(--display);}
.ob .pn p{font:600 max(12px,2.1cqw)/1.35 var(--text);}
.ob[data-step="1"] .pn:nth-child(1),.ob[data-step="2"] .pn:nth-child(2),.ob[data-step="3"] .pn:nth-child(3),.ob[data-step="4"] .pn:nth-child(4){background:#fff;transform:translateY(-2px);}
.ob[data-step="1"] .pn:nth-child(1) .n,.ob[data-step="2"] .pn:nth-child(2) .n,.ob[data-step="3"] .pn:nth-child(3) .n,.ob[data-step="4"] .pn:nth-child(4) .n{background:var(--orange);color:var(--ink);}
/* richer panels (r3b) */
.ob .thumb{position:relative;flex:1;min-height:0;border:2px solid var(--graphite);border-radius:10px;overflow:hidden;background:#fff;}
.ob .thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.ob .thumb .btnm{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);}
.ob.s1:not(.s2) .thumb .btnm{transform:translateX(-50%) scale(.94);}
.ob .tk b{display:block;font:800 max(12px,2.2cqw)/1.2 var(--display);margin-bottom:.2em;}
.ob .pp{display:flex;gap:6px;margin-top:.5em;}
.ob .pp i{width:28%;aspect-ratio:1;border:2px solid var(--graphite);border-radius:8px;background:var(--concrete) center/cover;}
.ob .li{list-style:none;margin:0;padding:0;display:grid;gap:.3em;font:600 max(12px,2.1cqw)/1.3 var(--text);}
.ob .li li{display:flex;gap:.5em;align-items:center;}
.ob .li li::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--orange);flex:none;}
.ob .pay{align-self:flex-start;}
/* panel 1: a mini phone with a Book button that gets tapped */
.ob .mini{margin-top:auto;display:flex;gap:max(6px,1.2cqw);align-items:center;}
.ob .btnm{display:inline-block;background:#B5542C;color:#fff;border-radius:999px;padding:.45em .9em;font:800 max(11px,1.9cqw)/1 var(--display);transition:transform 160ms var(--hx-out);}
.ob .tap{position:absolute;width:max(22px,4cqw);height:max(22px,4cqw);border-radius:50%;background:rgba(20,22,25,.25);border:2px solid #fff;left:18%;bottom:12%;opacity:0;transform:scale(1.5);transition:opacity 200ms var(--hx-out),transform 200ms var(--hx-out);}
.ob.s1 .tap{opacity:1;transform:scale(1);}
.ob.s2 .tap{opacity:0;}
.ob.s1 .btnm{transform:scale(.94);}
.ob.s2 .btnm{transform:none;}
/* panel 2: ticket slides in */
.ob .tk{margin-top:auto;background:var(--hivis);border:2px solid var(--graphite);border-radius:10px;padding:.5em .7em;font:700 max(11px,2cqw)/1.3 var(--text);transform:translateY(0);}
.ob.s0 .tk,.ob.s1 .tk{transform:translateY(8px);opacity:.45;}
.ob .tk{transition:transform 420ms var(--hx-out),opacity 300ms var(--hx-out);}
/* panel 3: price line + Needs your OK */
.ob .ql{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px;border-top:2px dashed #CFC6B5;padding-top:.5em;font:800 max(12px,2.2cqw)/1 var(--display);}
.ob .okk{transition:transform 300ms var(--hx-out),opacity 300ms var(--hx-out);}
.ob:not(.s3) .okk{opacity:.45;transform:scale(.92);}
/* panel 4: paid stamp */
.ob .stamp{position:absolute;right:8%;bottom:10%;border:3px solid #1F7A3A;color:#1F7A3A;border-radius:8px;padding:.2em .5em;font:900 max(14px,3cqw)/1 var(--display);letter-spacing:.06em;
  transform:rotate(-10deg) scale(1);opacity:1;transition:transform 260ms var(--hx-out),opacity 200ms var(--hx-out);background:#fff;}
.ob:not(.s4) .stamp{opacity:0;transform:rotate(-10deg) scale(1.4);}
.ob .sms{margin-top:auto;background:#fff;border:2px solid var(--graphite);border-radius:12px 12px 12px 4px;padding:.5em .7em;font:600 max(11px,2cqw)/1.3 var(--text);max-width:78%;}

/* Job software board (round 3 F, ported) */
.of .bd{position:absolute;inset:4% 0 10% 0;background:#fff;border:3px solid var(--graphite);border-radius:18px;box-shadow:10px 10px 0 var(--graphite);overflow:hidden;display:grid;grid-template-rows:auto 1fr;}
.of .bh{display:flex;justify-content:space-between;align-items:center;padding:max(10px,2cqw) max(12px,2.4cqw);background:var(--graphite);color:#fff;}
.of .bh b{font:800 max(14px,2.8cqw)/1.1 var(--display);}
.of .bh small{font:800 max(11px,1.8cqw)/1 var(--display);color:var(--hivis);letter-spacing:.06em;text-transform:uppercase;}
.of .cols{position:relative;display:grid;grid-template-columns:repeat(4,1fr);min-height:0;}
.of .col{border-left:2px dashed #DCD6CA;padding:max(8px,1.4cqw);display:flex;flex-direction:column;gap:max(6px,1.2cqw);}
.of .col:first-child{border-left:0;}
.of .col h4{font:800 max(12px,2.1cqw)/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding-bottom:max(6px,1cqw);border-bottom:2.5px solid var(--graphite);}
.of .slot{height:max(84px,17cqw);flex:none;}
.of .ghost{border:2px solid #D8D2C6;border-radius:10px;padding:max(6px,1.2cqw);font:600 max(11px,1.9cqw)/1.3 var(--text);color:var(--mute);background:#FBFAF7;}
.of .mover{position:absolute;left:0;top:max(44px,8.4cqw);width:25%;padding:0 max(6px,1.2cqw);z-index:3;transform:translateX(calc(var(--c,0) * 100%));transition:transform 640ms var(--hx-io);}
.of .job{background:var(--hivis);border:2.5px solid var(--graphite);border-radius:12px;box-shadow:4px 4px 0 var(--graphite);padding:max(8px,1.4cqw);font:600 max(11px,1.9cqw)/1.3 var(--text);transform:rotate(-2deg);}
.of .job b{display:block;font:800 max(12px,2.2cqw)/1.15 var(--display);}
.of .job .ev{display:block;margin-top:.5em;font-weight:700;}
.of .job .ev em{font-style:normal;display:none;}
.of[data-step="0"] .ev .e0,.of[data-step="1"] .ev .e1,.of[data-step="2"] .ev .e2,.of[data-step="3"] .ev .e3{display:inline;}
.of.s1 .mover{--c:1;} .of.s2 .mover{--c:2;} .of.s3 .mover{--c:3;}
.of .paid{position:absolute;right:4%;bottom:8%;z-index:4;border:3px solid #1F7A3A;color:#1F7A3A;background:#fff;border-radius:8px;padding:.25em .55em;font:900 max(14px,3cqw)/1 var(--display);letter-spacing:.06em;
  transform:rotate(-8deg);opacity:1;transition:transform 260ms var(--hx-out),opacity 200ms var(--hx-out);}
.of:not(.s3) .paid{opacity:0;transform:rotate(-8deg) scale(1.4);}
.of .who{position:absolute;left:3%;bottom:0;z-index:4;}
.of .who2{position:absolute;left:36%;bottom:0;z-index:4;}
@container (max-width:400px){
  .of .bd{inset:0 0 9% 0;}
  .of .cols{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);}
  .of .col{border-left:0;border-top:2px dashed #DCD6CA;flex-direction:row;align-items:center;}
  .of .col:first-child{border-top:0;}
  .of .col h4{border-bottom:0;width:30%;flex:none;}
  .of .ghost,.of .slot{display:none;}
  .of .mover{left:30%;top:0;width:70%;height:25%;padding:max(6px,1.2cqw);transform:translateY(calc(var(--c,0) * 100%));display:flex;align-items:center;}
  .of .job{width:100%;}
  .of .paid{bottom:12%;}
}
.hx-scene.of{aspect-ratio:1/.72;}
.of .bd{inset:0 0 9% 0;}
.of .paid{right:5%;bottom:auto;top:56%;}
@container (max-width:400px){.of .paid{top:auto;bottom:14%;}}
@media (max-width:520px){.hx-scene.of{aspect-ratio:1/1.05;}}
.of .paid{top:74%;}

/* LEARN AI: LOCKED 5th Nov 2026 (round 3, ported unchanged apart from names and no pause) */
.hx-scene.la{aspect-ratio:auto;}
.la .seq4{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-bottom:28px;}
.la .st4{position:relative;background:#fff;border:3px solid var(--graphite);border-radius:16px;box-shadow:7px 7px 0 var(--graphite);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:300px;
  transition:transform 300ms var(--hx-out);}
.la .st4 header{display:flex;align-items:center;gap:10px;}
.la .st4 .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--graphite);color:#fff;font:900 15px/1 var(--display);flex:none;transition:background-color 300ms var(--hx-out),color 300ms var(--hx-out);}
.la .st4 h3{font:800 18px/1.15 var(--display);}
.la .st4 .body{flex:1;display:flex;flex-direction:column;gap:8px;font:600 15px/1.4 var(--text);}
/* arrows between steps */
.la .st4:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:20px;height:20px;background:var(--graphite);clip-path:polygon(0 15%,60% 15%,60% 0,100% 50%,60% 100%,60% 85%,0 85%);transform:translateY(-50%);}
/* the active step lifts; finished steps keep their content */
.la[data-step="1"] .st4:nth-child(1),.la[data-step="2"] .st4:nth-child(2),.la[data-step="3"] .st4:nth-child(3),.la[data-step="4"] .st4:nth-child(4){transform:translateY(-6px);}
.la .s1 .st4:nth-child(1) .n,.la.s1 .st4:nth-child(1) .n,.la.s2 .st4:nth-child(2) .n,.la.s3 .st4:nth-child(3) .n,.la.s4 .st4:nth-child(4) .n{background:var(--orange);color:var(--ink);}
.la .fill{transition:opacity 360ms var(--hx-out),transform 360ms var(--hx-out);}
.la .sk{position:absolute;inset:auto 16px 16px 16px;display:grid;gap:8px;transition:opacity 240ms var(--hx-out);}
.la .sk i{display:block;height:12px;border-radius:6px;background:#ECE7DC;}
.la .sk i:nth-child(2){width:80%;} .la .sk i:nth-child(3){width:60%;}
/* not reached yet: outline only (never blank: number, title and a placeholder show) */
.la:not(.s1) .st4:nth-child(1) .fill,.la:not(.s2) .st4:nth-child(2) .fill,.la:not(.s3) .st4:nth-child(3) .fill,.la:not(.s4) .st4:nth-child(4) .fill{opacity:0;transform:translateY(8px);}
.la.s1 .st4:nth-child(1) .sk,.la.s2 .st4:nth-child(2) .sk,.la.s3 .st4:nth-child(3) .sk,.la.s4 .st4:nth-child(4) .sk{opacity:0;}
/* 1 van voice note */
.la .vn{background:var(--graphite);color:#fff;border-radius:14px 14px 14px 4px;padding:12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;}
.la .vn .play{width:34px;height:34px;border-radius:50%;background:var(--hivis);display:grid;place-items:center;color:var(--ink);}
.la .vn .play svg{width:14px;height:14px;}
.la .vn time{font:700 13px/1 var(--text);color:#D9DCE1;}
.la .wave{display:flex;align-items:center;gap:3px;height:30px;}
.la .wave i{flex:1;max-width:4px;height:26px;border-radius:2px;background:var(--hivis);transform:scaleY(var(--h));transform-origin:center;}
.la.s1:not(.s2) .wave i{animation:hxwv 620ms var(--hx-io) infinite alternate;animation-delay:calc(var(--k) * -90ms);}
@keyframes hxwv{from{transform:scaleY(.2);}to{transform:scaleY(var(--h));}}
.la .van{display:flex;align-items:center;gap:8px;font:700 13px/1.3 var(--text);color:var(--mute);margin-top:auto;}
.la .van svg{width:34px;height:auto;flex:none;}
/* 2 the words */
.la .tx{background:var(--cream);border:2px solid var(--graphite);border-radius:10px;padding:10px 12px;font:600 15px/1.45 var(--text);}
.la .tx w{display:inline;opacity:1;transition:opacity 160ms linear;transition-delay:calc(var(--w) * 70ms);}
.la:not(.s2) .tx w{opacity:0;transition-delay:0ms;}
.la .rule{font:700 13px/1.35 var(--text);color:var(--mute);margin-top:auto;}
/* 3 the quote */
.la .qt{border:2px solid var(--graphite);border-radius:10px;overflow:hidden;font:600 14px/1.4 var(--text);}
.la .qt .qh{display:flex;justify-content:space-between;align-items:center;background:var(--graphite);color:#fff;padding:7px 10px;font:800 13px/1 var(--display);}
.la .qt .qh small{color:var(--hivis);font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;}
.la .qt ul{list-style:none;margin:0;padding:8px 10px;display:grid;gap:4px;}
.la .qt li{display:grid;grid-template-columns:auto 1fr;gap:6px;}
.la .qt li b{font-family:var(--display);}
.la .qt .tot{display:flex;justify-content:space-between;align-items:center;border-top:2px dashed #CFC6B5;padding:8px 10px;font:800 16px/1 var(--display);}
.la .qt .tot span{font:700 12px/1.2 var(--text);color:var(--mute);}
.la .okrow{display:flex;align-items:center;gap:8px;margin-top:auto;font:700 13px/1.3 var(--text);}
/* 4 what the customer gets */
.la .ph4{border:3px solid var(--graphite);border-radius:22px;background:var(--graphite);padding:6px;}
.la .ph4 .in{background:#F3F1EC;border-radius:16px;padding:12px 10px;display:grid;gap:8px;}
.la .ph4 .from{font:800 12px/1.2 var(--display);color:var(--mute);text-align:center;}
.la .msg{background:#fff;border:2px solid #D6D0C4;border-radius:14px 14px 14px 4px;padding:9px 10px;font:600 14px/1.4 var(--text);}
.la .acc{display:block;text-align:center;background:#B5542C;color:#fff;border-radius:999px;padding:9px;font:800 14px/1 var(--display);transform:scale(1);transition:transform 160ms var(--hx-out);}
.la.s4 .acc{animation:hxpop 420ms var(--hx-out) 900ms both;}
@keyframes hxpop{0%{transform:scale(1);}40%{transform:scale(.95);}100%{transform:scale(1);}}
.la .smpl{margin-top:auto;font:700 12px/1.3 var(--text);color:var(--mute);}

@media (max-width:1180px){.la .seq4{grid-template-columns:repeat(2,minmax(0,1fr));}.la .st4:nth-child(2)::after{display:none;}}
@media (max-width:640px){
  .la .seq4{grid-template-columns:1fr;gap:26px;}
  .la .st4{min-height:0;}
  .la .st4:not(:last-child)::after{display:block;right:auto;left:50%;top:auto;bottom:-24px;transform:translateX(-50%) rotate(90deg);}
  .la .st4:nth-child(2)::after{display:block;}
  .la .sk{position:static;}
  .la:not(.s1) .st4:nth-child(1) .fill,.la:not(.s2) .st4:nth-child(2) .fill,.la:not(.s3) .st4:nth-child(3) .fill,.la:not(.s4) .st4:nth-child(4) .fill{display:none;}
  .la.s1 .st4:nth-child(1) .sk,.la.s2 .st4:nth-child(2) .sk,.la.s3 .st4:nth-child(3) .sk,.la.s4 .st4:nth-child(4) .sk{display:none;}
}
.la .shots{display:flex;gap:8px;}
.la .shots i{flex:1;aspect-ratio:4/3;border:2px solid var(--graphite);border-radius:10px;background:var(--concrete) center/cover;}
.la .cap{font:700 13px/1.3 var(--text);color:var(--mute);}
.la .ins{border:2px dashed var(--graphite);border-radius:10px;padding:8px 10px;font:600 14px/1.4 var(--text);display:grid;gap:4px;}
.la .hx-lab{font-size:11px;}

/* Examples deck (round 3, ported) */
.ex .dk{position:absolute;width:62%;text-decoration:none;color:var(--ink);transform-origin:50% 120%;transition:transform 560ms var(--hx-out),opacity 300ms var(--hx-out);}
.ex .dk .hx-browser{position:relative;box-shadow:7px 7px 0 rgba(20,22,25,.85);}
.ex .dk .hx-phone{left:auto;right:-9%;bottom:-10%;width:30%;}
.ex .dk .hx-pill{left:6%;bottom:-14px;}
.ex .d1{left:0;top:4%;--rt:-9deg;--tx:30%;}
.ex .d2{left:19%;top:16%;--rt:0deg;--tx:0%;z-index:2;}
.ex .d3{right:-2%;top:30%;--rt:8deg;--tx:-30%;z-index:3;}
.js .ex .dk{transform:translateX(var(--tx)) rotate(0deg);opacity:0;}
.ex.is-in .dk{transform:translateX(0) rotate(var(--rt));opacity:1;}
.ex .d2{transition-delay:80ms;} .ex .d3{transition-delay:160ms;}
@media (hover:hover) and (pointer:fine){.ex.is-in .dk:hover{transform:translateY(-10px) rotate(var(--rt));z-index:5;transition-duration:220ms;transition-delay:0ms;}}
.ex .dk:focus-visible{outline:3px solid #fff;outline-offset:6px;border-radius:14px;}
.ex .dk{width:56%;}
.ex .d1{left:0;top:2%;} .ex .d2{left:22%;top:20%;} .ex .d3{left:44%;right:auto;top:38%;}
@media (max-width:760px){ .hx-scene.ex{aspect-ratio:1/1.55;} }
@container (max-width:480px){
  .ex .dk{width:80%;}
  .ex .d1{left:0;top:0;} .ex .d2{left:18%;top:33%;} .ex .d3{left:2%;top:66%;}
  .ex .dk .hx-pill{min-height:36px;}
}
/* ?still (screenshots) and reduced motion: the finished frame, nothing moves */
.hx-still .hx-scene *,.hx-still .hx-scene *::before,.hx-still .hx-scene *::after{transition:none !important;animation:none !important;}
@media (prefers-reduced-motion:reduce){
  .hx-scene *,.hx-scene *::before,.hx-scene *::after{transition:none !important;animation:none !important;}
  .la .wave i{transform:scaleY(var(--h));}
}
/* ================= end r4 ================= */

/* ===================== r4b, 5th Nov 2026: sample flows to the books, start-up page, poses ===================== */
/* Poses: the same scale as the arms-folded cartoon (1x = natural/2), so every head matches. --pw/--ph are the 1x size. */
.cf .hx-fig.pose{width:auto;height:calc(var(--ph) * .776px);}
@media (max-width:1240px){ .cf .hx-fig.pose{height:calc(var(--ph) * .67px);} }
@media (max-width:1060px){ .cf .hx-fig.pose{height:calc(var(--ph) * .459px);} }
@media (max-width:760px){ .cf .hx-fig.pose{height:calc(var(--ph) * .335px);} }
.ab .figbox .hx-fig.pose{width:100%;max-width:calc(var(--pw) * .642px);}
.hx-fig.sec-pose{width:auto;max-width:100%;}
.pose-head{max-width:none;display:grid;grid-template-columns:minmax(0,760px) auto;justify-content:space-between;gap:24px 40px;align-items:end;}
.pose-head>div>p:not(.label){margin-top:14px;font-size:19px;color:var(--mute);}
.sec.graphite .pose-head>div>p:not(.label){color:#C9CBCF;}
.pose-head .sec-pose{height:calc(var(--ph) * .42px);margin-bottom:-6px;}
@media (max-width:760px){ .pose-head{grid-template-columns:minmax(0,1fr);} .pose-head .sec-pose{order:-1;height:calc(var(--ph) * .27px);} }

/* Sample flows: one job, step by step, ending in the accounts. Same loop engine as the heroes (s1..sN). */
.flows{display:grid;gap:34px;}
.hx-scene.fl{justify-self:stretch;color:inherit;}
.fl .fh{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px;}
.fl .fn b{display:block;font:800 20px/1.2 var(--display);}
.fl .fn>span{display:block;font:600 15px/1.35 var(--text);margin-top:2px;}
.fl .fh .tag{font-size:11px;}
.fl .tgt{position:relative;margin-left:auto;transform:rotate(-2deg);}
.fl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:16px;}
.fl .fs{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;background:#F4F1EA;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;
  padding:12px 12px 14px;box-shadow:4px 4px 0 rgba(0,0,0,.45);transition:background-color 260ms var(--hx-out),transform 320ms var(--hx-out);}
.fl .fs::after{content:"";position:absolute;top:24px;right:-15px;width:14px;height:3px;border-radius:2px;background:var(--orange);}
.fl .fs:last-child::after{display:none;}
.fl .fs .n{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--graphite);background:#fff;display:grid;place-items:center;font:900 13px/1 var(--display);transition:background-color 240ms var(--hx-out);}
.fl .fs .tx b{display:block;font:800 15.5px/1.2 var(--display);margin-bottom:4px;}
.fl .fs .tx>span{display:block;font:600 13.5px/1.4 var(--text);color:var(--mute);}
.fl .fs .tag{justify-self:start;font-size:10.5px;}
.tag.bk{background:var(--blueprint);color:#fff;}
.fl .fs .eic{position:absolute;right:10px;top:10px;width:26px;height:26px;color:var(--ink);}
.fl .fs .eic svg{width:100%;height:100%;}
.fl .fok{position:absolute;left:-9px;top:-9px;width:24px;height:24px;border-radius:50%;background:var(--hivis);color:var(--ink);border:2px solid var(--graphite);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity 200ms var(--hx-out),transform 260ms var(--hx-out);}
.fl .fok svg{width:70%;height:70%;}
.fl.s1 .k1,.fl.s2 .k2,.fl.s3 .k3,.fl.s4 .k4,.fl.s5 .k5,.fl.s6 .k6{background:#fff;transform:translateY(-3px);}
.fl.s1 .k1 .n,.fl.s2 .k2 .n,.fl.s3 .k3 .n,.fl.s4 .k4 .n,.fl.s5 .k5 .n,.fl.s6 .k6 .n{background:var(--hivis);}
.fl.s1 .k1 .fok,.fl.s2 .k2 .fok,.fl.s3 .k3 .fok,.fl.s4 .k4 .fok,.fl.s5 .k5 .fok,.fl.s6 .k6 .fok{opacity:1;transform:none;}
.fl.s5 .k5.end,.fl.s6 .k6.end{background:var(--hivis);}
.fl.s5 .k5.end .n,.fl.s6 .k6.end .n{background:#fff;}
@media (max-width:1060px){ .fl ol{grid-template-columns:repeat(3,minmax(0,1fr));} .fl .fs::after{display:none;} }
@media (max-width:760px){
  .fl ol{grid-template-columns:minmax(0,1fr);gap:12px;}
  .fl .fs{grid-template-columns:28px minmax(0,1fr);column-gap:12px;}
  .fl .fs .tx,.fl .fs .tag{grid-column:2;}
  .fl .fs .n{grid-row:1/3;}
  .fl .tgt{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){ .fl .fs,.fl .fs .n,.fl .fok{transition:none;} }

/* Admin page: the accounts link, general */
.acc-any{margin-top:24px;}
.x-acc{margin-top:24px;font-weight:600;}

/* Learn AI: done for you */
.dfy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 48px;align-items:center;}
.dfy .sec-pose{height:calc(var(--ph) * .62px);justify-self:center;}
.dfy .vnq{margin-top:20px;}
.dfy .hire-line{margin-top:20px;}
@media (max-width:1060px){ .dfy .sec-pose{height:calc(var(--ph) * .46px);} }
@media (max-width:760px){ .dfy{grid-template-columns:minmax(0,1fr);} .dfy .sec-pose{height:calc(var(--ph) * .335px);} }

/* Start-up page */
.card.staff{display:grid;grid-template-columns:46px minmax(0,1fr);gap:4px 14px;align-content:start;}
.staff .sic{grid-row:1/4;width:46px;height:46px;border-radius:50%;background:var(--hivis);border:2.5px solid var(--graphite);display:grid;place-items:center;color:var(--ink);}
.staff .sic svg{width:22px;height:22px;}
.staff h3,.staff p,.staff .tag{grid-column:2;}
.staff .tag{justify-self:start;margin-top:8px;}
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);font:600 15.5px/1.45 var(--text);}
.cmp th,.cmp td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1.5px solid var(--concrete);}
.cmp thead th{background:var(--graphite);color:#fff;font:800 13px/1.2 var(--display);text-transform:uppercase;letter-spacing:.05em;}
.cmp tbody th{font:800 16px/1.25 var(--display);width:24%;}
.cmp tbody td{color:var(--mute);}
.cmp tbody td:last-child{background:#FFF6CC;color:var(--ink);}
.cmp tbody tr:last-child>*{border-bottom:0;}
.cost-line{margin-top:24px;}
.cost-line p{font-size:18px;}
.cost-line p.small{font-size:14px;margin-top:8px;}
.start-diy{margin-top:24px;font-weight:600;}
@media (max-width:760px){
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto;}
  .cmp tr{padding:12px 14px;border-bottom:2px solid var(--graphite);}
  .cmp tbody tr:last-child{border-bottom:0;}
  .cmp th,.cmp td{padding:3px 0;border:0;}
  .cmp tbody td:last-child{padding:8px 10px;border-radius:8px;margin-top:6px;}
  .cmp td::before{content:attr(data-l);display:block;font:800 11px/1.3 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);}
}

/* ===================== r4b HOME T: the character tours the scenes (Sam, 5th Nov 2026) ===================== */
.hero.hx.home.w-xl:has(.tr){--sw:730px;}
.hx-scene.tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-items:end;}
.tr-fig{display:grid;align-self:end;justify-items:center;align-items:end;position:relative;z-index:3;margin-right:-26px;}
.tr-fig .tz{grid-area:1/1;width:auto;max-width:none;height:calc(var(--ph) * .4px);opacity:0;transform:translateY(10px) scale(.96);transform-origin:50% 100%;
  transition:opacity 300ms var(--hx-out),transform 420ms var(--hx-out);}
.tr-st{display:grid;min-width:0;}
.tr .tsc{grid-area:1/1;display:grid;grid-template-rows:auto 1fr;align-content:start;min-width:0;opacity:0;visibility:hidden;transform:translateX(14px);
  transition:opacity 380ms var(--hx-out),transform 460ms var(--hx-out),visibility 0s linear 380ms;}
.tr .cap{position:relative;justify-self:start;margin:0 0 14px 30px;transform:rotate(-2deg);}
/* step k shows scene k (step 0, before the first tick, shows scene 1) */
/* 5th Nov 2026 hero rebuild: tp.js sets data-k on the tour (scene on show); no data-k (no JS) shows scene 1 */
.tr:not([data-k]) .c1,.tr[data-k="1"] .c1,.tr[data-k="2"] .c2,.tr[data-k="3"] .c3,.tr[data-k="4"] .c4,.tr[data-k="5"] .c5,.tr[data-k="6"] .c6,.tr[data-k="7"] .c7{opacity:1;visibility:visible;transform:none;transition:opacity 380ms var(--hx-out),transform 460ms var(--hx-out),visibility 0s;}
.tr .tsc>.hx-scene{justify-self:stretch;}
/* website scenes */
.tw{position:relative;padding:0 0 26px 30px;}
.tw .dk{position:relative;width:82%;transform:rotate(-1deg);}
.tw .mb{left:auto;right:0;top:14%;width:25%;transform:rotate(2deg);z-index:2;}
/* into the accounts */
.hx-scene.tb{padding-left:30px;}
.tb ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.tb li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;background:#F4F1EA;border:2.5px solid var(--graphite);border-radius:14px;
  box-shadow:4px 4px 0 var(--graphite);padding:12px 14px;transition:background-color 260ms var(--hx-out),transform 320ms var(--hx-out);}
.tb li .ic{width:40px;height:40px;border-radius:50%;background:#fff;border:2.5px solid var(--graphite);display:grid;place-items:center;}
.tb li .ic svg{width:20px;height:20px;}
.tb li b{display:block;font:800 16px/1.2 var(--display);}
.tb li .tx>span{display:block;font:600 14px/1.35 var(--text);color:var(--mute);}
.tb .fok{position:absolute;right:-9px;top:-9px;width:24px;height:24px;border-radius:50%;background:var(--hivis);border:2px solid var(--graphite);display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:opacity 200ms var(--hx-out),transform 260ms var(--hx-out);}
.tb .fok svg{width:70%;height:70%;}
.tb.s1 .r1,.tb.s2 .r2,.tb.s3 .r3,.tb.s4 .r4{background:#fff;transform:translateX(-4px);}
.tb.s4 .r4.bk{background:var(--hivis);}
.tb.s1 .r1 .fok,.tb.s2 .r2 .fok,.tb.s3 .r3 .fok,.tb.s4 .r4 .fok{opacity:1;transform:none;}
.tb .nt{margin-top:14px;font:700 14.5px/1.4 var(--text);color:var(--ink);}
@media (max-width:1240px){ .tr-fig .tz{height:calc(var(--ph) * .38px);} }
@media (max-width:760px){
  .hx-scene.tr{grid-template-columns:minmax(0,1fr);}
  .tr-fig{justify-self:start;margin:0;order:2;}
  .tr-fig .tz{height:calc(var(--ph) * .26px);}
  .tr .cap,.tw,.hx-scene.tb{margin-left:0;padding-left:0;}
  .tr-st{order:1;}
}
@media (prefers-reduced-motion:reduce){ .tr .tsc,.tr-fig .tz,.tb li,.tb .fok{transition:none;} }

/* poses in bands and beside sections */
.refer img.pose{width:calc(var(--pw) * .32px);height:auto;}
.me-band img.pose{width:calc(var(--pw) * .374px);height:auto;}
@media (max-width:760px){ .refer img.pose,.me-band img.pose{width:calc(var(--pw) * .26px);} }
.side-pose{margin-top:22px;height:calc(var(--ph) * .4px);}
@media (max-width:760px){ .side-pose{height:calc(var(--ph) * .27px);} }
.tr-st,.tr .tsc{grid-template-columns:minmax(0,1fr);}
.tr .tsc>.hx-scene{min-width:0;max-width:100%;}
@media (max-width:760px){ .tr-fig{order:0;margin:0 0 -6px;} .tr-st{order:1;} .tr .cap{margin-bottom:10px;} }
/* The pointing pose points to the viewer's left, so the character stands to the RIGHT of the scene he presents. */
.hx-scene.tr{grid-template-columns:minmax(0,1fr) auto;}
.tr-fig{order:2;margin:0 0 0 -26px;}
.tr-st{order:1;}
.tr .cap{margin-left:0;}
.tw{padding:0 30px 26px 0;}
.hx-scene.tb{padding-left:0;padding-right:30px;}
@media (max-width:760px){ .hx-scene.tr{grid-template-columns:minmax(0,1fr);} .tr-fig{order:0;justify-self:end;margin:0 0 -6px;} .tw,.hx-scene.tb{padding-right:0;} }
/* iOS fix, 5th Nov 2026 (Nell Ashby). On a phone the seven tour scenes stack into one column and the tallest
   (scene 6, ~800px) set the height for all of them, so a 230px scene sat on top of ~570px of empty orange.
   Phone only: the scene on show is the only one in flow, so the stage is always as tall as what it shows.
   The others sit on top of it out of flow while they fade, and the hero's overflow:hidden clips them.
   Works with no JS too (scene 1 is the one on show before the first step). */
@media (max-width:760px){
  .tr-st{position:relative;align-items:start;}
  .tr .tsc{position:absolute;top:0;left:0;right:0;align-self:start;grid-template-rows:auto auto;}
  .tr:not([data-k]) .c1,.tr[data-k="1"] .c1,.tr[data-k="2"] .c2,.tr[data-k="3"] .c3,.tr[data-k="4"] .c4,.tr[data-k="5"] .c5,.tr[data-k="6"] .c6,.tr[data-k="7"] .c7{position:relative;}
}
.sec.blueprint .pose-head>div>p:not(.label){color:#C8D6EA;}

/* ===================== chips, 5th Nov 2026: "Works with the tools you already use" (Home, under the two services).
   Plain text name chips only: no logos, no brand colours, not links (trade mark rules). Replaces the .jobsw.strip-sw card. */
.connect{margin-top:26px;background:#fff;color:var(--ink);border:2px solid var(--graphite);border-radius:var(--r);box-shadow:4px 4px 0 #061A33;
  padding:24px 26px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px 36px;align-items:start;}
.connect>*{min-width:0;}
.cn-head h3{font-size:23px;line-height:1.15;}
.cn-head p{margin-top:10px;font-weight:600;color:#33363C;}
.cn-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px;}
.cn-l{font:800 12.5px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--blueprint);margin-bottom:9px;}
.cn-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;}
.cn-chips li{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--cream);color:var(--ink);
  border:2px solid var(--graphite);border-radius:999px;box-shadow:2px 2px 0 var(--graphite);font:800 15.5px/1.15 var(--display);white-space:nowrap;}
.cn-tm{grid-column:1/-1;font-size:13.5px;line-height:1.45;font-weight:500;color:var(--mute);border-top:2px dashed var(--concrete);padding-top:14px;}
@media (max-width:900px){ .connect{grid-template-columns:1fr;} }
@media (max-width:760px){ .connect{padding:18px 16px;gap:16px;margin-top:22px;} .cn-groups{grid-template-columns:1fr;gap:14px;} .cn-head h3{font-size:21px;} .cn-chips li{font-size:15px;padding:0 14px;} }

/* ===================== hero rebuild, 5th Nov 2026 (Nell Ashby, from Sam's annotated screenshot) =====================
   1. The character stands in his own column, right of everything, about as tall as the hero (Sam drew ~335x660 at
      1652 wide). --cw is the column width, --ch the height cap; each figure keeps its pose's own proportions.
   2. Example websites fill the stage: browser across the stage, phone over its lower-right corner.
   3. One job, start to finish: a left-to-right journey (top to bottom on a phone), a real picture per step.
   Phones: copy first (headline and buttons inside the first screen), then the character peeking out from behind
   the stage on the right, his waist hidden by the stage so nothing of the stage is covered. */
/* ONE character size for every hero (Sam, 5th Nov 2026). --char-w is the character column (22vw: 363px at 1652 wide,
   Sam drew ~335 there); --char-h = 1.25 x that is the HEIGHT of every pose, so his head is the same size on every page
   and every scene. Poses keep their proportions and stand on the right edge; the widest (pointing) reaches at most
   the column gap, never into the stage. Phones and tablets set one --char-w each, below. */
:root{--col-w:clamp(240px,22vw,460px);--char-w:clamp(324px,29.7vw,621px);--char-h:calc(var(--char-w) * 1.25);--hero-max:1840px;--hero-gut:clamp(20px,2.5vw,48px);}
.hero.hx.has-char,.r5t-intro,.r5y-hero,.r5d,.r5c{--cw:var(--col-w);--ch:var(--char-h);}
/* Sam, 5th Nov 16:46: the character 1.35x taller on desktop. --col-w (the layout column, unchanged) and --char-w (the
   figure) are separate, so the text, stage and cards do not move: the column keeps its old height and the taller figure
   grows upward from the same foot line and right edge, over the hero's top space. */
.hx-char{height:calc(var(--cw) * 1.25);grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
/* the hero uses more of the page: up to 1840px, small side gutters. Text keeps 38% of it, on the left, as before;
   the stage takes everything between the text and the character. */
.hero.hx.has-char .wrap{max-width:var(--hero-max);padding-inline:var(--hero-gut);grid-template-columns:38% minmax(0,1fr) var(--cw);column-gap:28px;row-gap:40px;}
.hero.hx.has-char .wrap>div.hx-copy{max-width:none;}
.hero.hx.has-char h1{font-size:clamp(36px,3vw,58px);max-width:none;}
.hero.hx.has-char h1 .lb{display:none;}
.hero.hx.has-char.char-only .wrap{grid-template-columns:minmax(0,1fr) var(--cw);}
.hero.hx.has-char.char-only .wrap>div.hx-copy{max-width:760px;}
.hero.hx.has-char.wide .wrap{grid-template-columns:minmax(0,1fr) var(--cw);}
.hero.hx.has-char.wide .wrap>div.hx-copy{grid-column:1;grid-row:1;}
.hero.hx.has-char.wide .wrap>.hx-scene{grid-column:1;grid-row:2;}
.hero.hx.has-char.wide .hx-char{grid-column:2;grid-row:1/3;}
.hero.hx.has-char.wide h1{font-size:clamp(38px,3.4vw,62px);}
.hx-char{position:relative;z-index:0;display:grid;align-self:end;justify-self:stretch;min-width:0;margin-bottom:-72px;}
.hc-f{grid-area:1/1;align-self:unsafe end;justify-self:unsafe end;position:relative;display:block;
  height:var(--ch);width:calc(var(--ch) * var(--pw) / var(--ph));max-width:none;aspect-ratio:var(--pw) / var(--ph);}
.hc-f>img{position:absolute;inset:0;z-index:1;width:100%;height:100%;filter:drop-shadow(5px 6px 0 rgba(20,22,25,.24));}
/* the tablet pose: the screen is a hole in the image; the live screen sits behind it, hands in front */
.hc-scr{position:absolute;z-index:0;container-type:inline-size;left:27.76%;top:63.06%;width:40.99%;height:20.51%;overflow:hidden;background:#F4F1EA;}
/* tour: one figure per scene, crossfading with the scene (tp.js sets data-k on both) */
.hx-char.tour .tz{opacity:0;transform:translateY(12px) scale(.97);transform-origin:50% 100%;transition:opacity 300ms var(--hx-out),transform 420ms var(--hx-out);}
.hx-char.tour:not([data-k]) .z1,.hx-char.tour[data-k="1"] .z1,.hx-char.tour[data-k="2"] .z2,.hx-char.tour[data-k="3"] .z3,.hx-char.tour[data-k="4"] .z4,
.hx-char.tour[data-k="5"] .z5,.hx-char.tour[data-k="6"] .z6,.hx-char.tour[data-k="7"] .z7{opacity:1;transform:none;}
.hero.hx.home.w-xl:has(.tr){--sw:auto;}
.hx-scene.tr{grid-template-columns:minmax(0,1fr);}
/* scenes that used to hold the figure */
.hx-scene.ab{grid-template-columns:minmax(0,1fr);}
.ab .base{grid-column:1;}
.su .me{align-self:center;}
.su .hub{width:min(150px,70%);aspect-ratio:1;border-radius:50%;background:var(--hivis);border:3px solid var(--graphite);box-shadow:5px 5px 0 var(--graphite);display:grid;place-items:center;color:var(--ink);}
.su .hub svg{width:42%;height:42%;}
@media (max-width:1060px){
  :root{--col-w:min(46vw,300px);--char-w:min(46vw,300px);}
  .hero.hx.has-char .wrap,.hero.hx.has-char.char-only .wrap,.hero.hx.has-char.wide .wrap{grid-template-columns:minmax(0,1fr);gap:28px;}
  .hero.hx.has-char.wide .wrap>div.hx-copy,.hero.hx.has-char.wide .wrap>.hx-scene,.hero.hx.has-char.wide .hx-char{grid-column:1;grid-row:auto;}
  .hero.hx.has-char .hx-copy{order:1;} .hero.hx.has-char .hx-char{order:2;} .hero.hx.has-char .wrap>.hx-scene{order:3;}
  .hero.hx.has-char:not(.char-only) .hx-char{justify-self:end;width:var(--cw);margin:0 -6px -84px 0;}
  .hero.hx.has-char:not(.char-only) .wrap>.hx-scene{z-index:1;}
  .hero.hx.has-char.char-only .hx-char{justify-self:center;width:var(--cw);margin-bottom:-56px;}
}
@media (max-width:760px){
  :root{--col-w:min(46vw,190px);--char-w:min(46vw,190px);}
  .hero.hx.has-char:not(.char-only) .hx-char{margin:-8px -10px -64px 0;}
  .hero.hx.has-char.char-only .hx-char{margin-bottom:-40px;}
  .hero.hx.has-char h1,.hero.hx.has-char.wide h1{font-size:34px;}
}

/* 2. example websites: the browser fills the stage, the phone overlaps its lower-right corner */
.tw{position:relative;padding:0 0 15% 0;}
.tw .dk{position:relative;width:88%;transform:rotate(-.8deg);}
.tw .mb{left:auto;top:auto;right:0;bottom:0;width:27%;transform:rotate(2deg);z-index:2;}
.ow2 .dev{padding-bottom:15%;}
.ow2 .dk{width:88%;}
.ow2 .mb{top:auto;bottom:0;right:0;width:27%;}
.ow2 .smp{bottom:auto;top:-16px;left:14px;}
.hero.hx.has-char .hx-scene.ow2{grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:32px;}
@media (max-width:1240px){ .hero.hx.has-char .hx-scene.ow2{grid-template-columns:minmax(0,1fr);} .hero.hx.has-char .ow2 .pts{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .tw{padding-bottom:20%;} .tw .dk{width:86%;} .tw .mb{width:31%;} .hero.hx.has-char .ow2 .pts{grid-template-columns:minmax(0,1fr);} .ow2 .mb{width:31%;} }

/* 3. one job, start to finish (Home tour scene 5) */
.hx-scene.oj{padding-top:4px;}
.oj ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:max(16px,3.4cqw);}
.oj-s{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:10px;justify-items:start;min-width:0;}
.oj-s:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(100% + 3px);width:calc(max(16px,3.4cqw) - 6px);height:3px;border-radius:2px;background:var(--graphite);opacity:.35;transition:opacity 240ms var(--hx-out),background-color 240ms var(--hx-out);}
.oj-n{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ink);border:2.5px solid var(--graphite);display:grid;place-items:center;font:900 13px/1 var(--display);transition:background-color 240ms var(--hx-out);}
.oj-v{position:relative;display:block;width:100%;min-height:max(150px,30cqw);background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;box-shadow:4px 4px 0 var(--graphite);
  padding:10px;overflow:hidden;font:600 max(11px,1.95cqw)/1.3 var(--text);transition:transform 320ms var(--hx-out),box-shadow 320ms var(--hx-out);}
.oj-c{font:800 max(13px,2.35cqw)/1.25 var(--display);color:var(--ink);}
.oj-s.k1 .oj-c,.oj-s.k2 .oj-c,.oj-s.k3 .oj-c,.oj-s.k4 .oj-c{max-width:16ch;}
.oj.s1 .k1,.oj.s2 .k2,.oj.s3 .k3,.oj.s4 .k4{--on:1;}
.oj.s1 .k1 .oj-n,.oj.s2 .k2 .oj-n,.oj.s3 .k3 .oj-n,.oj.s4 .k4 .oj-n{background:var(--hivis);}
.oj.s1 .k1 .oj-v,.oj.s2 .k2 .oj-v,.oj.s3 .k3 .oj-v,.oj.s4 .k4 .oj-v{transform:translateY(-4px);box-shadow:6px 7px 0 var(--graphite);}
.oj.s2 .k1::after,.oj.s3 .k2::after,.oj.s4 .k3::after{background:var(--hivis);opacity:1;}
.oj-lh{display:block;font:800 max(10px,1.7cqw)/1 var(--display);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:6px;}
.oj-form{display:grid;gap:5px;}
.oj-bar{display:flex;align-items:center;gap:5px;font:800 max(11px,1.9cqw)/1.1 var(--display);margin-bottom:2px;}
.oj-bar i{width:9px;height:9px;border-radius:50%;background:#B5542C;flex:none;}
.oj-f{display:grid;border:1.5px solid #D6D0C4;border-radius:7px;padding:3px 6px;}
.oj-f em{font:700 max(9px,1.5cqw)/1.2 var(--text);font-style:normal;color:var(--mute);}
.oj-f b{font:800 max(11px,1.9cqw)/1.2 var(--display);}
.oj-btn{justify-self:start;background:#B5542C;color:#fff;border-radius:999px;padding:4px 12px;font:800 max(11px,1.8cqw)/1.2 var(--display);transition:transform 160ms var(--hx-out);}
.oj-tap{position:absolute;left:24px;bottom:12px;width:22px;height:22px;border-radius:50%;background:rgba(20,22,25,.28);border:2px solid #fff;opacity:0;transform:scale(1.6);transition:opacity 220ms var(--hx-out),transform 260ms var(--hx-out);}
.oj.s1 .oj-tap{opacity:1;transform:scale(1);}
.oj.s1 .oj-btn{transform:scale(.94);}
.oj-list{display:grid;gap:6px;}
.oj-row{display:grid;gap:1px;border:1.5px solid #D6D0C4;border-radius:8px;padding:5px 7px;background:#FBFAF7;}
.oj-row b{font:800 max(11px,1.9cqw)/1.2 var(--display);}
.oj-row.new{background:var(--hivis);border:2px solid var(--graphite);transform:translateX(0);opacity:1;transition:transform 420ms var(--hx-out),opacity 300ms var(--hx-out);}
.oj:not(.s2) .oj-row.new{transform:translateX(-12px);opacity:0;}
.oj-ph{display:flex;gap:4px;margin-top:3px;}
.oj-ph i{width:34%;aspect-ratio:4/3;border:1.5px solid var(--graphite);border-radius:5px;background:var(--concrete) center/cover;}
.oj-row.old{color:var(--mute);}
.oj-l{display:flex;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1.5px dashed #D6D0C4;}
.oj-l b{font:800 max(11px,1.9cqw)/1.2 var(--display);white-space:nowrap;}
.oj-l.tot{border-bottom:0;font-weight:800;}
.oj-ok{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--hivis);border:2px solid var(--graphite);font:900 max(12px,2cqw)/1 var(--display);
  transform:scale(1);opacity:1;transition:transform 260ms var(--hx-out),opacity 200ms var(--hx-out);}
.oj:not(.s3) .oj-ok{opacity:0;transform:scale(.7);}
.oj-tk{width:20px;height:20px;border-radius:50%;background:var(--graphite);color:var(--hivis);display:grid;place-items:center;}
.oj-tk svg{width:70%;height:70%;}
.oj-stamp{position:absolute;right:8px;bottom:10px;border:3px solid #1F7A3A;color:#1F7A3A;background:#fff;border-radius:8px;padding:.15em .5em;font:900 max(15px,2.8cqw)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  transform:rotate(-9deg);opacity:1;transition:transform 260ms var(--hx-out),opacity 200ms var(--hx-out);}
.oj:not(.s4) .oj-stamp{opacity:0;transform:rotate(-9deg) scale(1.4);}
@container (max-width:520px){
  .oj ol{grid-template-columns:minmax(0,1fr);gap:14px;}
  .oj-s{grid-template-columns:28px minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto;gap:10px;align-items:center;}
  .oj-s:not(:last-child)::after{top:calc(100% + 1px);left:12px;width:3px;height:12px;}
  .oj-v{min-height:0;font-size:12px;}
  .oj-c{font-size:14.5px;}
}

/* tablet screen: a tiny live job board (new job slides in, price ticked, then paid). The hands cover the lower sides
   of the screen (14% in from each edge below 40% down), so the card keeps 13% in from both sides. */
.tab-scr{position:absolute;inset:0;display:flex;flex-direction:column;gap:3cqw;padding:4.5cqw 13cqw 4cqw;color:var(--ink);font-family:var(--display);}
.ts-top{display:flex;justify-content:space-between;align-items:center;margin:0 -8cqw;font:800 7.5cqw/1 var(--display);}
.ts-top em{font-style:normal;font-size:6.5cqw;color:var(--mute);}
.ts-card{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:1.6cqw;background:#fff;border:1.5px solid var(--graphite);border-radius:6px;padding:3cqw 3.5cqw;
  transform:none;opacity:1;transition:transform 420ms var(--hx-out),opacity 300ms var(--hx-out),background-color 300ms var(--hx-out);}
.tab-scr:not(.s1) .ts-card{transform:translateX(30%);opacity:0;}
.tab-scr.s3 .ts-card{background:#E6F4EA;}
.ts-h{display:flex;justify-content:space-between;align-items:center;gap:2cqw;}
.ts-h b{font:800 6.5cqw/1 var(--display);color:#B5542C;text-transform:uppercase;letter-spacing:.03em;}
.ts-w{font:800 8.6cqw/1.05 var(--display);}
.ts-a{font:800 7.5cqw/1 var(--display);color:var(--mute);}
.ts-row{display:flex;align-items:center;justify-content:space-between;gap:2cqw;margin-top:auto;}
.ts-ph{display:flex;gap:2cqw;}
.ts-ph i{width:13cqw;height:10cqw;border:1.5px solid var(--graphite);border-radius:3px;background:var(--concrete) center/cover;}
.ts-pr{display:flex;align-items:center;gap:1.5cqw;font:800 7cqw/1 var(--display);}
.ts-ok{width:8.5cqw;height:8.5cqw;border-radius:50%;background:var(--graphite);color:var(--hivis);display:grid;place-items:center;transform:scale(1);opacity:1;transition:transform 260ms var(--hx-out),opacity 200ms var(--hx-out);}
.ts-ok svg{width:72%;height:72%;}
.tab-scr:not(.s2) .ts-ok{transform:scale(.4);opacity:0;}
.ts-paid{border:1.5px solid #1F7A3A;color:#1F7A3A;background:#fff;border-radius:3px;padding:.5cqw 1.5cqw;font:900 6.8cqw/1 var(--display);text-transform:uppercase;letter-spacing:.04em;
  transform:rotate(-8deg);opacity:1;transition:transform 260ms var(--hx-out),opacity 200ms var(--hx-out);}
.tab-scr:not(.s3) .ts-paid{opacity:0;transform:rotate(-8deg) scale(1.5);}
/* sizes are in cqw of the screen (.hc-scr is the container). Mid-size screens (a 1440 desktop): no top bar or area
   line, bigger type, photos and tick on one row. Phone-size screens: the job and the stamp only. */
@container (max-width:150px){
  .tab-scr{padding:5cqw 12cqw 5cqw;gap:0;}
  .ts-top,.ts-a,.ts-pr b{display:none;}
  .ts-card{gap:3cqw;padding:4cqw 4.5cqw;}
  .ts-h b{font-size:8.5cqw;}
  .ts-w{font-size:11cqw;}
  .ts-paid{font-size:8.5cqw;}
  .ts-ph i{width:16cqw;height:12cqw;}
  .ts-ok{width:12cqw;height:12cqw;}
}
@container (max-width:100px){
  .ts-row{display:none;}
  .ts-card{justify-content:center;}
  .ts-w{font-size:13cqw;}
  .ts-h b,.ts-paid{font-size:10cqw;}
}

/* F, the Home job board (fuller, 5th Nov): jobs already on the board, arrivals as even chips across the tray */
.of2 .fo{background:#fff;border:2px solid #D8D2C6;border-radius:10px;padding:max(7px,1.3cqw);font:600 max(12px,2cqw)/1.3 var(--text);color:var(--mute);display:grid;gap:2px;}
.of2 .fo b{font:800 max(12.5px,2.1cqw)/1.15 var(--display);color:var(--ink);}
.of2 .col{min-height:0;padding:max(8px,1.5cqw);}
.of2 .fc{font-size:max(12.5px,2cqw);}
.of2 .fc b{font-size:max(13px,2.2cqw);}
.of2 .col h4{font-size:max(12px,1.95cqw);min-height:0;}
.of2 .chips{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:max(6px,1.2cqw);}
.of2 .chip{justify-content:center;padding:max(7px,1.3cqw) 6px;font-size:max(13px,2cqw);flex-wrap:wrap;row-gap:3px;}
.of2 .chip time{font-size:max(11px,1.7cqw);}
.of2 .tray{min-height:max(64px,12cqw);}
.of2 .none{left:50%;transform:translate(-50%,-50%);font:800 max(14px,2.3cqw)/1.2 var(--display);color:#fff;white-space:nowrap;}
@container (max-width:520px){ .of2 .chips{grid-template-columns:repeat(3,minmax(0,1fr));} .of2 .none{white-space:normal;text-align:center;width:70%;} }

/* JOBS, the job software board (fuller, 5th Nov): bigger type, three jobs a column, less empty board */
.hx-scene.of{aspect-ratio:1/.75;}
@media (max-width:1700px) and (min-width:1061px){ .hx-scene.of{aspect-ratio:1/.86;} }
.of .col h4{font-size:max(12.5px,2.3cqw);}
.of .ghost{font-size:max(12.5px,2.3cqw);padding:max(7px,1.4cqw);}
.of .job{font-size:max(12.5px,2.3cqw);padding:max(9px,1.7cqw);}
.of .job b{font-size:max(13.5px,2.6cqw);}
.of .slot{height:max(130px,20cqw);position:relative;}
.of .was{position:absolute;inset:4px 2px auto;display:grid;gap:2px;border:2px dashed #CFC6B5;border-radius:10px;padding:max(7px,1.3cqw);font:700 max(12px,2.1cqw)/1.25 var(--text);color:var(--mute);
  opacity:0;transition:opacity 300ms var(--hx-out) 300ms;}
.of .was b{font:800 max(11.5px,2cqw)/1.1 var(--display);color:#1F7A3A;}
.of.s1 .w0,.of.s2 .w1,.of.s3 .w2{opacity:1;}
/* the PAID stamp rides on the job card's bottom-right corner, so it never covers the job text at any width */
.of .job{position:relative;}
.of .job .paid{top:auto;left:auto;right:-.5em;bottom:-.7em;font-size:max(13px,2.4cqw);}
.of .mover{top:max(46px,8.6cqw);}
.of .bh b{font-size:max(15px,3cqw);}
@container (max-width:400px){ .of .mover{top:0;} }
@media (prefers-reduced-motion:reduce){ .tw .dk,.tw .mb{transition:none;} .hx-char.tour .tz{transition:none;} }
.hx-still .hx-char *{transition:none !important;}

/* agreed demo badges (5th Nov 2026): long black "Automatic once you set your price / after your tap" may wrap */
.tag.auto.q{white-space:normal;text-align:center;max-width:15em;}
.demo .demo-small{grid-column:2;margin-top:-22px;color:var(--mute);}
@media (max-width:860px){ .demo .demo-small{grid-column:1;margin-top:0;} }
/* job software board on a phone (rows): the moving card stays inside its row, stamp in its top-right corner */
@container (max-width:400px){
  .of .job{font-size:12px;line-height:1.25;padding:7px 10px;}
  .of .job b{font-size:13px;}
  .of .job .paid{top:6px;bottom:auto;right:8px;font-size:13px;}
}
.of .jd{display:block;}
@container (max-width:400px){ .of .jd{display:none;} }
/* the character's hand may reach the page edge on a phone; never a sideways scroll */
.hero.hx.has-char,.r5y-hero,.r5t-intro,.r5d,.r5c{overflow-x:clip;}
/* the tablet screen sizes against the screen hole (.hc-scr), not its own padded box */
.hc-scr .tab-scr.hx-scene{container-type:normal;}

/* ===================== bigger stages, 5th Nov 2026 (Sam: "mockups still too tiny") =====================
   Desktop: the stage runs on under the character column; the character stands over its right edge (above it,
   z-index 2, and never takes taps). --stage-tuck is how far into the character column the stage reaches. */
.hx-char{pointer-events:none;}
@media (min-width:1061px){
  .hero.hx.has-char{--stage-tuck:.3;}
  .hero.hx.has-char:not(.wide):not(.char-only) .wrap{grid-template-columns:36% minmax(0,1fr) var(--cw);}
  .hero.hx.has-char:not(.wide):not(.char-only) .wrap>div.hx-copy{grid-column:1;grid-row:1;}
  .hero.hx.has-char:not(.wide):not(.char-only) .wrap>.hx-scene{grid-column:2/4;grid-row:1;width:auto;min-width:0;justify-self:stretch;margin-right:calc(var(--cw) * (1 - var(--stage-tuck)));position:relative;z-index:1;}
  .hero.hx.has-char:not(.wide):not(.char-only) .wrap>.hx-char{grid-column:3;grid-row:1;z-index:2;margin-right:calc(-1 * var(--hero-gut));}
}
/* journey cards ("One job, start to finish"): bigger cards and type, still one row; text 15px+ at 1440 */
.oj ol{gap:max(12px,2.2cqw);}
.oj-s:not(:last-child)::after{top:16px;width:calc(max(12px,2.2cqw) - 6px);}
.oj-n{width:34px;height:34px;font-size:15px;}
.oj-v{min-height:max(220px,40cqw);padding:max(12px,2cqw);font:600 max(14px,2.3cqw)/1.3 var(--text);border-radius:16px;}
.oj-c{font-size:max(16px,2.9cqw);}
.oj-s.k1 .oj-c,.oj-s.k2 .oj-c,.oj-s.k3 .oj-c,.oj-s.k4 .oj-c{max-width:18ch;}
.oj-lh{font-size:max(12px,2cqw);margin-bottom:8px;}
.oj-form{gap:max(6px,1cqw);}
.oj-bar{font-size:max(15px,2.6cqw);}
.oj-bar i{width:11px;height:11px;}
.oj-f{padding:max(4px,.7cqw) max(7px,1.2cqw);}
.oj-f em{font-size:max(12px,1.9cqw);}
.oj-f b,.oj-row b,.oj-l b{font-size:max(15px,2.5cqw);}
.oj-l{font-size:max(14px,2.3cqw);}
.oj-btn{font-size:max(14px,2.3cqw);padding:5px 14px;}
.oj-ok{font-size:max(15px,2.5cqw);}
.oj-tk{width:24px;height:24px;}
.oj-stamp{font-size:max(18px,3.4cqw);}
.oj-ph i{width:38%;}
@container (max-width:520px){ .oj-v{min-height:0;font-size:14px;} .oj-c{font-size:15px;} .oj-f b,.oj-row b,.oj-l b{font-size:14px;} }

/* ===================== enquiry demo (reusable: heroes.enquiry_form / enquiry_board, steps EQD_LOOP) =====================
   s1-s3 type the name, postcode and job; s4 taps Send; s5 the tick pops; s6 the enquiry lands on the board as a job. */
.eqd-form{position:absolute;left:5%;bottom:7%;width:44%;z-index:2;container-type:inline-size;display:grid;gap:7px;
  background:#fff;color:var(--ink);text-align:left;border:2px solid var(--graphite);border-radius:12px;box-shadow:4px 4px 0 var(--graphite);padding:3% 3.2%;}
.eqd-h{font:800 max(14px,6.6cqw)/1.1 var(--display);}
.eqd-f{display:grid;gap:1px;border:1.5px solid #D6D0C4;border-radius:8px;padding:max(4px,2cqw) max(7px,3.2cqw);transition:border-color 200ms var(--hx-out);}
.eqd-f em{font:700 max(11px,4.4cqw)/1.2 var(--text);font-style:normal;color:var(--mute);}
.eqd-f b{display:block;min-height:1.25em;font:800 max(13px,5.8cqw)/1.25 var(--display);white-space:nowrap;}
.eqd-f .ty{display:inline-block;clip-path:inset(0 100% 0 0);}
.eqd-on.s1 .f1 .ty,.eqd-on.s2 .f2 .ty,.eqd-on.s3 .f3 .ty{clip-path:inset(0 0 0 0);animation:eqd-type calc(var(--n) * 60ms) steps(var(--n)) both;}
@keyframes eqd-type{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.eqd-on.s1:not(.s2) .f1,.eqd-on.s2:not(.s3) .f2,.eqd-on.s3:not(.s4) .f3{border-color:var(--graphite);}
.eqd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.eqd-send{position:relative;background:#B5542C;color:#fff;border-radius:999px;padding:max(5px,2cqw) max(14px,6cqw);font:800 max(13px,5.4cqw)/1.1 var(--display);transition:transform 160ms var(--hx-out),opacity 200ms var(--hx-out);}
.eqd-tap{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(20,22,25,.3);border:2px solid #fff;opacity:0;transform:scale(1.6);transition:opacity 200ms var(--hx-out),transform 240ms var(--hx-out);}
.eqd-on.s4:not(.s5) .eqd-tap{opacity:1;transform:scale(1);}
.eqd-on.s4:not(.s5) .eqd-send{transform:scale(.94);}
.eqd-on.s5 .eqd-send{opacity:.45;}
.eqd-sent{display:inline-flex;align-items:center;gap:6px;font:900 max(13px,5.4cqw)/1 var(--display);color:#1F7A3A;opacity:0;transform:scale(.6);transition:opacity 200ms var(--hx-out),transform 280ms var(--hx-out);}
.eqd-on.s5 .eqd-sent{opacity:1;transform:none;}
.eqd-tk{width:max(20px,8cqw);height:max(20px,8cqw);border-radius:50%;background:#1F7A3A;color:#fff;display:grid;place-items:center;}
.eqd-tk svg{width:70%;height:70%;}
.eqd-side{display:grid;gap:14px;align-content:center;}
.eqd-board{background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;box-shadow:4px 4px 0 var(--graphite);overflow:hidden;}
.eqd-bh{margin:0;background:var(--graphite);color:#fff;font:800 16px/1 var(--display);padding:10px 14px;}
.eqd-board>span{margin:10px 12px;}
.eqd-card{display:grid;gap:3px;background:var(--hivis);border:2.5px solid var(--graphite);border-radius:10px;padding:10px 12px;font:600 14px/1.3 var(--text);
  transform:translateX(-46%);opacity:0;transition:transform 520ms var(--hx-out),opacity 320ms var(--hx-out);}
.eqd-on.s6 .eqd-card{transform:none;opacity:1;}
.eqd-card b{font:800 17px/1.15 var(--display);}
.eqd-new{font:800 12px/1 var(--display);text-transform:uppercase;letter-spacing:.05em;color:#8A3A16;}
.eqd-auto{display:flex;align-items:center;gap:6px;font:800 13px/1.2 var(--display);margin-top:3px;}
.eqd-auto svg{width:16px;height:16px;flex:none;}
.eqd-old{display:block;border:1.5px solid #D6D0C4;border-radius:8px;padding:7px 10px;font:700 14px/1.2 var(--text);color:var(--mute);background:#FBFAF7;}
.eqd-old+.eqd-old{margin-top:-4px;}
@media (max-width:760px){ .eqd-form{left:3%;bottom:4%;width:64%;} }
@media (prefers-reduced-motion:reduce){ .eqd-on *{animation:none !important;transition:none !important;} }
.hx-still .eqd-on *{animation:none !important;transition:none !important;}

/* journey card 4: the PAID stamp sits on the left so the character's arm never covers it */
.oj-s.k4 .oj-stamp{right:auto;left:10px;}
/* headline stays at three lines or fewer with the 36% text column */
@media (min-width:1061px){ .hero.hx.has-char:not(.wide) h1{font-size:clamp(36px,2.6vw,50px);} }

/* journey cards, round 2 (5th Nov): one shared height (subgrid rows), fuller quote and invoice, cursor only while tapping */
.oj ol{grid-template-rows:auto auto auto;}
.oj-s{grid-row:span 3;grid-template-rows:subgrid;}
.oj-v{min-height:0;display:flex;flex-direction:column;}
.oj-form,.oj-list,.oj-q,.oj-inv{display:flex;flex-direction:column;gap:max(6px,1cqw);flex:1;}
.oj-who{font:700 max(13px,2.1cqw)/1.2 var(--text);color:var(--mute);margin-top:-4px;}
.oj-big{display:flex;justify-content:space-between;align-items:baseline;gap:6px;border-top:2.5px solid var(--graphite);padding-top:max(6px,1cqw);margin-top:auto;font:800 max(15px,2.5cqw)/1 var(--display);}
.oj-big b{font:900 max(24px,4.4cqw)/1 var(--display);}
.oj-ok{align-self:flex-start;}
.oj-ev{display:flex;align-items:center;gap:8px;font:800 max(14px,2.3cqw)/1.2 var(--display);}
.oj-ev .oj-tk{background:#1F7A3A;color:#fff;flex:none;}
.oj:not(.s4) .oj-ev.pd{opacity:0;}
.oj-ev.pd{transition:opacity 260ms var(--hx-out);}
.oj-s.k4 .oj-stamp{position:relative;left:auto;right:auto;bottom:auto;align-self:flex-start;margin-top:4px;}
.oj-l{flex-wrap:wrap;}
.oj.s2 .oj-tap{opacity:0;transform:scale(1.6);}
.oj.s2 .oj-btn{transform:none;}
.oj-tap{left:auto;right:16%;bottom:6px;}
@container (max-width:520px){ .oj ol{grid-template-rows:none;} .oj-s{grid-row:auto;grid-template-rows:auto;} }
/* the headline never leaves a word on its own line */
.hero.hx h1{text-wrap:balance;}
.oj-btn{align-self:flex-start;}
.oj-l{flex-wrap:nowrap;}
.oj-l>span{min-width:0;}

/* ===== ONE hero height (Sam, 5th Nov 16:55): every hero band is the same height at each width. It holds the tall
   character (anchored to the hero bottom) plus headroom; text and stage are centred inside; stages scale to fit. ===== */
:root{--hero-h:max(640px,calc(var(--char-h) + 120px));}
@media (min-width:1061px){
  .hero.hx.has-char .wrap{min-height:var(--hero-h);padding-top:44px;padding-bottom:44px;align-items:center;}
  .logo-a + main .hero.hx.has-char .wrap{padding-top:44px;}
  .hero.hx.has-char .hx-char{align-self:end;margin-bottom:-44px;}
  .hero.hx.has-char .wrap>div.hx-copy,.hero.hx.has-char .wrap>.hx-scene{align-self:center;}
}
/* the taller figure must never cover text (Sam, 5th Nov 16:54): on desktop the character column follows the figure
   (80% of its width, the rest is his outstretched hand or elbow) and the stage tucks under it by less. */
@media (min-width:1061px){
  :root{--col-w:calc(var(--char-w) * .8);}
  .hero.hx.has-char{--stage-tuck:.12;}
}

/* journey cards, round 3 (Sam, 5th Nov 16:5x "squashed and weird"): three intentional layouts by stage width.
   >=760px: four in a row. 400-759px: two by two, number and caption above each card. <400px: one column (phones).
   Every card in a row is the same height (subgrid), content sized for that layout, no word broken over two lines. */
.oj ol{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 1fr auto;gap:12px 14px;}
.oj-s{grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);gap:10px;}
.oj-v{min-height:0;padding:12px;font:600 14px/1.3 var(--text);}
.oj-c{font-size:16px;max-width:none !important;}
.oj-lh{font-size:12px;margin-bottom:2px;}
.oj-bar{font-size:15px;}
.oj-f em{font-size:12px;}
.oj-f b,.oj-row b,.oj-l b{font-size:15px;}
.oj-l{flex-wrap:wrap;column-gap:8px;font-size:14px;}
.oj-l>span{white-space:nowrap;}
.oj-l>b{margin-left:auto;}
.oj-big b{font-size:26px;}
.oj-ev{font-size:14px;}
.oj-who{font-size:13px;margin-top:0;}
.oj-inv .oj-stamp{font-size:18px;}
@container (min-width:760px){
  .oj-v{padding:14px;}
  .oj-big b{font-size:clamp(26px,3.6cqw,34px);}
}
@container (min-width:400px) and (max-width:759.98px){
  .oj ol{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr auto 1fr;gap:10px 18px;}
  .oj-s{grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:8px;align-items:center;}
  .oj-n{grid-column:1;grid-row:1;}
  .oj-c{grid-column:2;grid-row:1;font-size:clamp(14px,2.7cqw,18px);line-height:1.15;}
  .oj-v{grid-column:1/-1;grid-row:2;align-self:stretch;padding:12px 14px;}
  .oj-s:not(:last-child)::after{display:none;}
  .oj-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px;align-content:start;}
  .oj-bar,.oj-form .oj-f:first-of-type{grid-column:1/-1;}
  .oj-btn{grid-column:1;justify-self:start;}
  .oj-list .oj-row.old:nth-last-child(-n+2){display:none;}
  .oj-q .oj-l:nth-of-type(3){display:none;}
  .oj-q,.oj-inv{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-content:start;}
  .oj-q>.oj-lh,.oj-q>.oj-who,.oj-q>.oj-l,.oj-q>.oj-big,.oj-inv>.oj-lh,.oj-inv>.oj-who,.oj-inv>.oj-l,.oj-inv>.oj-big{grid-column:1/-1;}
  .oj-big{margin-top:6px;}
  .oj-q .oj-ok{grid-column:1;margin-top:8px;}
  .oj-inv .oj-ev{grid-column:1;}
  .oj-inv .oj-stamp{grid-column:2;grid-row:span 2;align-self:center;margin:0;}
}
@container (max-width:399.98px){
  .oj ol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:14px;}
  .oj-s{grid-row:auto;grid-template-rows:auto;grid-template-columns:34px minmax(0,1fr);align-items:start;}
  .oj-n{grid-row:1;} .oj-c{grid-column:2;grid-row:1;font-size:15px;align-self:center;} .oj-v{grid-column:2;grid-row:2;}
  .oj-s:not(:last-child)::after{display:none;}
  .oj-list .oj-row.old:nth-last-child(-n+2){display:none;}
}
@container (min-width:400px) and (max-width:759.98px){
  .oj-q .oj-l:nth-of-type(3){display:flex;}
  .oj-q .oj-l.x{display:none;}
  .oj-q .oj-ok{justify-self:start;}
}
@media (min-width:1061px){
  .hero.hx.has-char:not(.wide):not(.char-only) .wrap>.hx-scene{margin-right:calc(var(--char-w) * .84 - var(--hero-gut));}
}
/* the phone pose holds his arm out further left than any other: the journey keeps clear of it */
@media (min-width:1061px){ .hero.hx.has-char .hx-scene.oj{padding-right:calc(var(--char-w) * .12);} }
@container (min-width:400px) and (max-width:759.98px){
  .oj-form .oj-f:first-of-type{grid-column:auto;}
  .oj-form>.oj-f:nth-child(2){grid-column:1/-1;}
  .oj-f b{white-space:nowrap;overflow:hidden;text-overflow:clip;}
}

/* Everything at once, handled (Sam, 5th Nov): row N coming in lines up with card N handled, one shared row height
   (subgrid), the tick sits inside its row on the right, a connector per row, both panels the same height. */
@media (min-width:761px){
  .hx-scene.oe.oe2{grid-template-columns:minmax(0,1fr) 44px minmax(0,1.12fr);grid-template-rows:auto repeat(4,auto);row-gap:10px;column-gap:0;align-items:stretch;}
  .oe2 .pan{grid-row:1/-1;display:grid;grid-template-rows:subgrid;row-gap:10px;}
  .oe2 .inb{grid-column:1;} .oe2 .don{grid-column:3;}
  .oe2 .pan ul{display:contents;}
  .oe2 .phd{margin-bottom:2px;}
  .oe2 .arw{display:none;}
  .oe2 .it{grid-template-columns:34px minmax(0,1fr) auto 26px;align-self:stretch;}
  .oe2 .ot{min-height:0;align-self:stretch;align-content:center;}
  .oe2 .cn{grid-column:2;align-self:center;position:relative;z-index:3;height:4px;margin:0 -15px 0 -15px;border-radius:2px;background:var(--graphite);opacity:.28;transition:opacity 240ms var(--hx-out),background-color 240ms var(--hx-out);}
  .oe2 .cn::after{content:"";position:absolute;right:-2px;top:50%;width:12px;height:12px;background:inherit;transform:translateY(-50%);clip-path:polygon(0 0,100% 50%,0 100%);}
  .oe2 .cn.k1{grid-row:2;} .oe2 .cn.k2{grid-row:3;} .oe2 .cn.k3{grid-row:4;} .oe2 .cn.k4{grid-row:5;}
  .oe.s2 .cn.k1,.oe.s3 .cn.k2,.oe.s4 .cn.k3,.oe.s5 .cn.k4{opacity:1;}
}
.oe2 .it .dn{position:static;width:26px;height:26px;justify-self:end;}
.oe2 .it{grid-template-columns:34px minmax(0,1fr) auto 26px;}
@media (max-width:760px){ .oe2 .cn{display:none;} }
@container (max-width:680px){
  .oe2 .it time{display:none;}
  .oe2 .it{grid-template-columns:30px minmax(0,1fr) 26px;gap:8px;padding:9px;}
  .oe2 .it .ic{width:30px;height:30px;}
  .oe2 .phd{flex-wrap:wrap;row-gap:6px;}
  .oe2 .phd>b{white-space:nowrap;}
}
@media (min-width:1061px){ .hero.hx.has-char .hx-scene.oe{padding-right:calc(var(--char-w) * .12);} }

/* Websites hero, composed (Sam, 5th Nov): one stage. Browser large with the enquiry form on its lower left, the phone
   over its lower right, the "Your jobs" board over its top right (form left, job right: the story reads across),
   three feature chips in a row under it, clear of the character. */
.hx-scene.ow2.web3{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;}
.web3 .dev{position:relative;padding:0 0 9% 0;}
.web3 .dk{width:82%;transform:rotate(-.8deg);}
.web3 .mb{top:auto;bottom:0;right:7%;width:22%;transform:rotate(2deg);z-index:3;}
.web3 .smp{top:-16px;left:14px;bottom:auto;}
.web3 .eqd-board{position:absolute;right:0;top:6%;width:34%;z-index:4;transform:rotate(1.2deg);}
.web3 .eqd-board .eqd-old:last-child{display:none;}
.web3 .pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.web3 .pts li{grid-template-columns:24px minmax(0,1fr);gap:8px;padding:10px 12px;align-items:center;}
.web3 .pts .hx-tick{width:24px;height:24px;}
.web3 .pts li b{font-size:15px;margin:0;}
.web3 .pts li span{font-size:13px;line-height:1.3;}
@container (max-width:620px){ .web3 .pts li span{font-size:0;} .web3 .pts li span b{font-size:14px;} }
@media (max-width:760px){
  .web3 .dev{padding-bottom:16%;} .web3 .dk{width:86%;} .web3 .mb{right:0;width:30%;}
  .web3 .eqd-board{position:relative;right:auto;top:auto;width:auto;transform:none;margin-top:14px;}
  .web3 .pts{grid-template-columns:minmax(0,1fr);}
  .web3 .pts li span{font-size:13px;}
}
.hero.hx .hx-scene.ow2.web3,.hero.hx.has-char .hx-scene.ow2.web3{grid-template-columns:minmax(0,1fr);gap:22px;}
.hero.hx.has-char .ow2.web3 .pts{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:760px){ .hero.hx.has-char .ow2.web3 .pts{grid-template-columns:minmax(0,1fr);} }
/* the pointing pose reaches furthest left: the websites stage and its chips stop short of his hand */
@media (min-width:1061px){
  .hero.hx.has-char .hx-scene.web3{padding-right:calc(var(--char-w) * .12);}
  .hero.hx.has-char .web3 .pts{margin-right:calc(var(--char-w) * .1);}
}

/* sample-site slides 10-15% bigger (Sam, 5th Nov): the browser takes the whole stage and the phone (bigger) sits over
   its lower-right corner inside the stage, so neither hides behind the character. No light seam: the frame behind
   the screenshot is the frame colour, and the phone screenshot covers its screen. */
.hx-browser{background:var(--graphite);}
.hx-browser .bar{background:var(--concrete);}
.hx-phone .scr{background:var(--graphite);}
.hx-phone .scr img{height:100%;object-fit:cover;object-position:top center;}
@media (min-width:1061px){
  .hero.hx.has-char .tw{padding:0 0 19% 0;}
  .hero.hx.has-char .tw .dk{width:100%;}
  .hero.hx.has-char .tw .mb{right:5%;bottom:0;width:31%;}
}

/* Examples hero, "Pick your trade" (Sam, 5th Nov). Hazard-yellow active chip, hard-shadow browser with the phone over
   its corner, the same slight tilt as the other stages, a caption naming the job the set-up takes off you. */
.hx-scene.xs{display:grid;gap:20px;align-content:center;}
.xs-chips{display:flex;flex-wrap:wrap;gap:10px;}
.xs-chip{min-height:44px;padding:0 18px;border:2.5px solid var(--graphite);border-radius:999px;background:#fff;color:var(--ink);font:800 16px/1 var(--display);
  cursor:pointer;box-shadow:3px 3px 0 var(--graphite);transition:background-color 180ms var(--hx-out),transform 160ms var(--hx-out),box-shadow 160ms var(--hx-out);white-space:nowrap;}
.xs-chip[aria-selected="true"]{background:var(--hivis);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--graphite);}
.xs-chip.is-down{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--graphite);}
@media (hover:hover) and (pointer:fine){ .xs-chip[aria-selected="false"]:hover{background:#FFF1A8;} }
.xs-chip:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.xs-stage{display:grid;}
.xs-p{grid-area:1/1;display:grid;gap:16px;min-width:0;}
.xs-dev{position:relative;padding:0 0 13% 0;}
.xs-dev .xs-br{position:relative;width:68%;transform:rotate(-1deg);}
.xs-dev .xs-ph{left:58%;right:auto;top:auto;bottom:0;width:23%;transform:rotate(2deg);z-index:2;}
.xs-cap{display:flex;align-items:center;gap:10px;margin:0;align-self:start;justify-self:start;background:#fff;border:2.5px solid var(--graphite);border-radius:12px;box-shadow:4px 4px 0 var(--graphite);
  padding:9px 14px 9px 10px;font:800 16px/1.25 var(--display);color:var(--ink);max-width:min(100%,46ch);transform:rotate(-.6deg);}
.xs-cap .hx-tick{flex:none;width:26px;height:26px;}
/* the swap: incoming slides in from the right with a slight turn, outgoing leaves to the left */
.xs-js .xs-p{transition:opacity 260ms var(--hx-out),visibility 0s linear 520ms;opacity:0;visibility:hidden;pointer-events:none;}
.xs-js .xs-p.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 260ms var(--hx-out) 90ms,visibility 0s;}
.xs-js .xs-p .xs-br,.xs-js .xs-p .xs-ph,.xs-js .xs-p .xs-cap{transition:transform 520ms var(--hx-out);}
.xs-js .xs-p:not(.on) .xs-br{transform:translateX(9%) rotate(1.5deg);}
.xs-js .xs-p:not(.on) .xs-ph{transform:translateX(14%) rotate(5deg);}
.xs-js .xs-p:not(.on) .xs-cap{transform:translateY(8px) rotate(-.6deg);}
.xs-js .xs-p.out .xs-br{transform:translateX(-7%) rotate(-3deg);}
.xs-js .xs-p.out .xs-ph{transform:translateX(-10%) rotate(-2deg);}
.xs-js .xs-p.on .xs-ph{transition-delay:70ms;}
.hx-still .xs-p,.hx-still .xs-p *{transition:none !important;}
@media (prefers-reduced-motion:reduce){ .xs-p,.xs-p *,.xs-chip{transition:none !important;} }
@media (min-width:1061px){ .hero.hx.has-char .hx-scene.xs{padding-right:calc(var(--char-w) * .12);} }
@media (max-width:760px){
  .xs-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 10px;margin:0 -4px;scrollbar-width:none;}
  .xs-chips::-webkit-scrollbar{display:none;}
  .xs-chip{scroll-snap-align:start;flex:none;font-size:15px;}
  .xs-dev{padding-bottom:22%;} .xs-dev .xs-br{width:88%;} .xs-dev .xs-ph{left:auto;right:0;width:30%;}
  .xs-cap{font-size:15px;}
}
.xs-chips{gap:8px;} .xs-chip{padding:0 16px;font-size:15.5px;}

/* About hero (Sam, 5th Nov 16:50): the card sized to what it holds, its contents scaled up so it reads full, not
   stretched. Copy unchanged. Pill kept. */
.hero.hx.has-char .hx-scene.ab{justify-items:start;}
.hero.hx.has-char .ab .tl{width:100%;max-width:600px;padding:clamp(22px,2.2vw,34px) clamp(24px,2.4vw,38px);border-radius:20px;}
.hero.hx.has-char .ab .tl h4{font-size:clamp(20px,1.7vw,28px);margin-bottom:clamp(18px,1.6vw,26px);}
.hero.hx.has-char .ab .tl ol{gap:clamp(16px,1.5vw,26px);}
.hero.hx.has-char .ab .tl ol::before{left:17px;}
.hero.hx.has-char .ab .tl li{grid-template-columns:38px 1fr;gap:16px;font-size:clamp(15px,1.15vw,19px);}
.hero.hx.has-char .ab .tl li b{font-size:clamp(17px,1.4vw,23px);margin-bottom:3px;}
.hero.hx.has-char .ab .tl li .d{width:38px;height:38px;font-size:16px;}
.hero.hx.has-char .ab .base{margin-top:6px;}
/* hero height floor raised so the tallest Home scene (the journey, two by two) fits at 1280-1440 without growing it */
:root{--hero-h:max(680px,calc(var(--char-h) + 120px));}
@media (min-width:1061px){ .hero.hx.has-char .wrap,.logo-a + main .hero.hx.has-char .wrap{padding-top:32px;padding-bottom:32px;} .hero.hx.has-char .hx-char{margin-bottom:-32px;} }
/* copy-only heroes (Price guide, Resources, Refer, Legal): copy and character as one centred group, no dead middle */
@media (min-width:1061px){
  .hero.hx.has-char.char-only .wrap{grid-template-columns:minmax(0,800px) var(--cw);justify-content:center;column-gap:clamp(48px,6vw,120px);}
  .hero.hx.has-char.char-only .wrap>div.hx-copy{max-width:800px;}
  .hero.hx.has-char.char-only h1{font-size:clamp(44px,3.6vw,68px);}
  .hero.hx.has-char.char-only .sub{font-size:clamp(19px,1.3vw,23px);max-width:46ch;}
}
@media (min-width:1061px){ .hero.hx.has-char.wide .wrap{row-gap:20px;} }
@media (min-width:1061px) and (max-width:1400px){
  .la .st4{padding:12px;gap:8px;min-height:0;} .la .st4 h3{font-size:16px;} .la .st4 .body,.la .tx{font-size:13.5px;line-height:1.35;} .la .seq4{gap:18px;padding-bottom:18px;}
}

/* ===== Header, trades strip and footer on the hero's container (Sam, 5th Nov 17:27: "logo and menu need stretching
   out"). Same --hero-max and --hero-gut as the hero, so the logo's disc lines up with the hero text's left edge and
   the Get a quote button with the hero's right gutter. Nav items get more room between them, a small type bump only.
   Tablet and phone (<=980px, the menu button) keep their own rules. ===== */
@media (min-width:981px){
  .site-head .wrap,.strip .wrap,.foot .wrap{max-width:var(--hero-max);padding-inline:var(--hero-gut);}
  .badge{left:calc(var(--hero-gut) - var(--bw) * .0686);}
  .nav{gap:clamp(4px,.9vw,22px);}
  .nav a{padding-inline:clamp(11px,.85vw,16px);}
}
@media (min-width:1600px){ .nav a{font-size:16.5px;} .nav .nav-cta{margin-left:clamp(8px,1vw,20px);} }

/* ===== Whitespace pass (Sam, 5th Nov 17:28). The hero is the figure plus 64px head room (20px is the minimum);
   the stage is scaled by tp.js to fill the inner height; the text sits level with the stage top, a size up. ===== */
:root{--hero-h:max(640px,calc(var(--char-h) + 64px));}
@media (min-width:1061px){
  .hero.hx.has-char .wrap,.logo-a + main .hero.hx.has-char .wrap{padding-top:28px;padding-bottom:28px;}
  .hero.hx.has-char .hx-char{margin-bottom:-28px;}
  .hero.hx.has-char:not(.char-only) .wrap>div.hx-copy{align-self:start;padding-top:clamp(28px,4vh,64px);}
  .hero.hx.has-char:not(.char-only) .wrap>.hx-scene{align-self:center;margin-right:calc(var(--char-w) * .7 - var(--hero-gut));}
  .hero.hx.has-char h1{font-size:clamp(40px,3.3vw,76px);}
  .hero.hx.has-char .sub{font-size:clamp(19px,1.15vw,24px);max-width:44ch;}
  .hero.hx.has-char .tagline{font-size:clamp(22px,1.35vw,28px);}
  .hero.hx.home .tr-st>*{align-self:start;}
  /* browser scenes composed taller so they fill the height, not just the width */
  .hero.hx.has-char .tw{padding-bottom:36%;}
  .hero.hx.has-char .tw .mb{width:35%;right:3%;}
  .web3 .dev{padding-bottom:26%;} .web3 .dk{width:86%;} .web3 .mb{width:27%;right:2%;}
  .xs-dev{padding-bottom:20%;} .xs-dev .xs-br{width:86%;} .xs-dev .xs-ph{left:auto;right:0;width:28%;}
}
.hx-scene.of,.hx-scene.of2{--fit-minw:640px;} .hx-scene.oj,.hx-scene.oe{--fit-minw:600px;} .hx-scene.su{--fit-minw:560px;}

/* "On this site" card (from each sample's own includes list): sits under the browser on the left, the phone stands
   over the browser's lower right corner. Turns the empty strip under every website slide into content. */
.inc{background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:14px;box-shadow:5px 5px 0 var(--graphite);padding:14px 16px 16px;}
.inc-h{font:800 12.5px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:0 0 10px;}
.inc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.inc li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font:700 15.5px/1.3 var(--display);}
.inc .hx-tick{width:24px;height:24px;}
@media (min-width:1061px){
  .hero.hx.has-char .tw{padding:0;}
  .hero.hx.has-char .tw .dk{width:100%;}
  .hero.hx.has-char .tw .mb{top:auto;bottom:0;right:3%;width:33%;}
  .tw-inc{position:relative;z-index:3;width:60%;margin-top:-14px;transform:rotate(-.6deg);}
  .web3 .dev{padding:0;}
  .web3 .dk{width:88%;}
  .web3 .mb{top:auto;bottom:0;right:2%;width:27%;}
  .hero.hx.has-char .web3 .pts,.hero.hx .hx-scene.ow2.web3 .pts{position:relative;z-index:3;width:60%;margin:-12px 0 0;grid-template-columns:minmax(0,1fr);gap:10px;}
  .hero.hx .web3 .pts li span{font-size:14px;}
  .xs-dev{padding:0;}
  .xs-dev .xs-br{width:88%;}
  .xs-dev .xs-ph{top:auto;bottom:0;left:auto;right:0;width:28%;}
  .xs-inc{position:relative;z-index:3;width:62%;margin-top:-14px;transform:rotate(-.5deg);}
  .xs-inc .xs-cap{border:0;box-shadow:none;padding:0;margin:0 0 14px;transform:none;background:none;font-size:19px;max-width:none;}
  .xs-p{gap:0;}
}
@media (max-width:1060px){ .tw-inc,.xs-inc{margin-top:14px;} .xs-inc .xs-cap{border:0;box-shadow:none;padding:0;margin-bottom:10px;transform:none;} }
.hx-scene.tb{--fit-minw:360px;} .hx-scene.su{--fit-minw:430px;} .hx-scene.r5bc{--fit-minw:420px;} .hx-scene.ab{--fit-minw:400px;}
@media (min-width:1061px){ .hero.hx.has-char .ab .base{margin-top:-20px;margin-left:18px;position:relative;z-index:2;} }

/* Examples: the chosen site's feature card sits under the buttons, full text-column width (Sam, 17:39). Cards share
   one grid cell so the column never jumps height when the chip changes. */
.hero-proof:has(.xs-feats){display:block;}
.xs-feats{display:grid;margin-top:clamp(28px,2.4vw,46px);}
.xs-feat{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 240ms var(--hx-out),visibility 0s 240ms;}
.xs-feat.on{opacity:1;visibility:visible;transition:opacity 240ms var(--hx-out);}
.xs-feats .xs-inc{width:auto;margin:0;transform:none;padding:clamp(16px,1.2vw,24px) clamp(18px,1.4vw,28px);}
.xs-feats .xs-cap{font:800 clamp(19px,1.25vw,25px)/1.2 var(--display);margin:0 0 16px;border:0;box-shadow:none;padding:0;background:none;transform:none;max-width:none;}
.xs-trade{display:block;font:800 12.5px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:8px;}
.xs-feats .inc ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;}
.xs-feats .inc li{font-size:clamp(15px,.95vw,18px);}
@media (max-width:760px){ .xs-feats .inc ul{grid-template-columns:minmax(0,1fr);} .xs-feats{margin-top:22px;} }
@media (min-width:1061px){
  .xs-dev .xs-br{width:84%;}
  .xs-dev .xs-ph{width:30%;}
}
@media (prefers-reduced-motion:reduce){ .xs-feat,.xs-feat.on{transition:none;} }

/* Starting out diagram, round 2 (Sam, 17:38 "sort the connectors"; 17:41 empty cards). Desktop: cards keep their
   natural height and sit centred in three equal rows, so the rows are symmetrical about the hub; everything inside a
   card is sized in the same layout px, so the stage fitter's zoom scales icon, title, line and badge together.
   Connectors are one SVG layer drawn from the real boxes (tp.js), replacing the 30px stubs. */
@media (min-width:761px){ .su .sf::after{display:none;} }
.su-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;}
.su-wires path{fill:none;stroke:var(--graphite);stroke-width:3;stroke-linecap:round;opacity:.35;transition:opacity 240ms var(--hx-out);}
.su-wires circle{fill:var(--graphite);opacity:.35;transition:opacity 240ms var(--hx-out);}
.su.s1 .su-wires .k1,.su.s2 .su-wires .k2,.su.s3 .su-wires .k3,.su.s4 .su-wires .k4,.su.s5 .su-wires .k5,.su.s6 .su-wires .k6{opacity:1;}
.su .sf,.su .me{position:relative;z-index:1;}
@media (min-width:1061px){
  .hero.hx.has-char .hx-scene.su{--fit-minw:700px;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);column-gap:50px;row-gap:26px;
    grid-template-rows:repeat(3,auto);align-content:center;align-items:center;padding-top:0;}
  .hero.hx.has-char .hx-scene.su[data-fill]{grid-template-rows:repeat(3,minmax(0,1fr));}
  .su .sf{align-self:center;grid-template-columns:40px minmax(0,1fr);gap:6px 14px;padding:16px 18px;border-radius:14px;box-shadow:5px 5px 0 var(--graphite);}
  .su .sf .ic{width:40px;height:40px;}
  .su .sf .ic svg{width:20px;height:20px;}
  .su .sf .tx b{font-size:19px;}
  .su .st{font-size:15px;}
  .su .sf .tag{font-size:11.5px;}
  .su .me{align-self:center;justify-self:center;width:110px;}
  .su .hub{width:110px;}
  .su .me .hx-pill{white-space:nowrap;justify-self:center;}
}
@media (min-width:1061px){
  .hero.hx.home .tsc>.cap{margin-bottom:0;}
  .hero.hx.home .tsc>.cap + .hx-scene.tb{margin-top:-10px;}
  .hero.hx.has-char .hx-scene.su{--fit-minw:580px;}
  .hero.hx .hx-scene.oj{--fit-minw:540px;}
  /* Examples: a narrower text column and a stage that runs under the pointing hand, so the browser is ~900px at 1920;
     the phone stands on the browser's lower LEFT corner, clear of the figure */
  .hero.hx.has-char .wrap:has(>.hx-scene.xs){grid-template-columns:31% minmax(0,1fr) var(--cw);}
  .hero.hx.has-char:not(.char-only) .wrap>.hx-scene.xs{margin-right:calc(var(--char-w) * .38 - var(--hero-gut));}
  .xs-dev .xs-br{width:86%;margin-left:auto;}
  .xs-dev .xs-ph{left:0;right:auto;width:26%;}
  .xs-chips{justify-content:flex-end;}
  /* Learn AI (wide): headline and lead a size up so the copy and the four steps fill the hero together */
  .hero.hx.wide.has-char h1{font-size:clamp(44px,4.4vw,104px);max-width:14ch;}
  .hero.hx.wide.has-char .sub{font-size:clamp(19px,1.3vw,26px);}
}
@media (min-width:1061px){
  /* ring, not a ladder: top and bottom cards lean in over the hub column, the middle pair stand off it */
  .hero.hx.has-char .su .k1,.hero.hx.has-char .su .k3{margin-right:-64px;}
  .hero.hx.has-char .su .k4,.hero.hx.has-char .su .k6{margin-left:-64px;}
  .su .sf .tx b{font-size:18px;}
  .hero.hx.home .tsc .tb + .nt,.hero.hx.home .tsc .nt{max-width:none;white-space:nowrap;}
  .xs-chips{justify-content:flex-start;}
  .hero.hx.has-char:not(.char-only) .wrap>.hx-scene.xs{margin-right:calc(var(--char-w) * .5 - var(--hero-gut));}
}
@media (min-width:1061px){
  .hero.hx.has-char .su .sf{padding:20px 20px 20px 18px;gap:8px 14px;}
  .hero.hx.has-char .su .sf .tx b{font-size:20px;margin-bottom:2px;}
  .hero.hx.has-char .su .st{font-size:16px;line-height:1.35;}
  .hero.hx.has-char .su .sf .tag{font-size:12px;margin-top:4px;}
  .hero.hx.has-char .su .sf .ic{width:44px;height:44px;}
}
/* big screens: the hero container grows past 1840 so the stage is not squeezed to 600px at 2560 */
@media (min-width:2200px){ :root{--hero-max:2280px;} }
@media (min-width:1061px) and (max-width:1599px){ .xs-dev{padding-bottom:12%;} .xs-dev .xs-ph{width:31%;} }
@media (min-width:1061px){
  .hero.hx.has-char .hx-scene.ab[data-fill]{display:flex;flex-direction:column;}
  .hero.hx.has-char .hx-scene.ab[data-fill]>:first-child{flex:1;display:flex;flex-direction:column;justify-content:space-around;}
}
@media (min-width:1061px) and (max-width:1599px){ .xs-dev{padding-bottom:22%;} .xs-dev .xs-ph{width:34%;} }
@media (min-width:2200px){ .xs-chip{font-size:20px;padding:14px 24px;} .xs-chips{gap:12px;margin-bottom:22px;} }
@media (min-width:1061px) and (max-width:1599px){
  .xs-dev{padding-bottom:0;} .xs-dev .xs-ph{width:30%;}
  .hero.hx.has-char .wrap:has(>.hx-scene.xs){grid-template-columns:29% minmax(0,1fr) var(--cw);}
  .hero.hx.has-char:not(.char-only) .wrap>.hx-scene.xs{margin-right:calc(var(--char-w) * .3 - var(--hero-gut));}
}
@media (min-width:2200px){ .hero.hx.has-char:not(.char-only) .wrap>.hx-scene.xs{align-self:start;} }
@media (min-width:2200px){ .xs-chips{margin-bottom:12px;} }
@media (min-width:1061px) and (max-width:1599px){ .xs-dev{padding-bottom:13%;} .xs-dev .xs-ph{width:34%;} }
/* under the browser, right: a plain link to the full sample (fills the strip the phone leaves) */
.xs-open{display:flex;align-items:center;gap:10px;width:fit-content;margin:clamp(14px,1.4vw,26px) 6% 0 auto;padding:12px 20px;min-height:48px;background:#fff;color:var(--ink);
  border:2.5px solid var(--graphite);border-radius:999px;box-shadow:4px 4px 0 var(--graphite);font:800 clamp(15px,.95vw,19px)/1.1 var(--display);text-decoration:none;}
.xs-open .hx-tick{width:22px;height:22px;}
@media (hover:hover) and (pointer:fine){ .xs-open:hover{background:var(--hivis);} }
.xs-open:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
@media (min-width:1061px){ .xs-chips{display:flex;flex-wrap:wrap;} .xs-chip{flex:1 1 auto;text-align:center;} }
@media (min-width:1061px) and (max-width:1599px){ .xs-dev{padding-bottom:0;} }
@media (max-width:1060px){ .xs-open{margin:14px 0 0;} }
@media (min-width:1061px){ .xs-open{margin-left:36%;margin-right:auto;} }
@media (min-width:1061px) and (max-width:1599px){ .xs-dev .xs-ph{width:38%;left:-2%;} .xs-open{margin-left:40%;} }
/* 1061-1599: keep the Examples copy column inside the shared hero height (buttons on one row, compact card) */
@media (min-width:1061px) and (max-width:1599px){
  .hero.hx.has-char .wrap:has(>.hx-scene.xs){grid-template-columns:33% minmax(0,1fr) var(--cw);}
  .hero.hx.has-char:not(.char-only) .wrap>.hx-scene.xs{margin-right:calc(var(--char-w) * .2 - var(--hero-gut));}
  .hero.hx.has-char .wrap:has(>.hx-scene.xs) .btn-row{flex-wrap:nowrap;gap:10px;}
  .hero.hx.has-char .wrap:has(>.hx-scene.xs) .btn{padding-inline:18px;}
  .hero.hx.has-char .wrap:has(>.hx-scene.xs) div.hx-copy{padding-top:12px;}
  .xs-feats{margin-top:22px;}
  .xs-feats .xs-cap{font-size:17px;margin-bottom:10px;}
  .xs-feats .inc li{font-size:14px;}
  .xs-feats .inc ul{gap:8px 16px;}
  .xs-dev .xs-ph{width:30%;left:0;}
  .xs-open{margin-left:34%;}
}
@media (min-width:1061px) and (max-width:1599px){ .xs-dev .xs-ph{width:32%;} }

/* Header, round 3 (Sam, 17:33): the medallion sits wholly inside the hero gutter (ring and arc visible), bigger at the
   top of the page on wide screens and back to the compact size when scrolled; served at 1x/2x/3x so it stays crisp.
   The nav spreads across the whole width between the medallion and the right gutter. */
@media (min-width:981px){
  .badge{left:var(--hero-gut);}
  .site-head .wrap{justify-content:flex-end;}
  .nav{flex:1;justify-content:space-between;margin-left:calc(var(--bw) + clamp(28px,2.6vw,64px));white-space:nowrap;}
  .nav .nav-cta{margin-left:0;}
}
@media (min-width:1600px){
  .badge{--bw:176px;}
  .site-head.is-stuck .badge{transform:translateY(11px) scale(.575);}
}
@media (min-width:1600px) and (prefers-reduced-motion:reduce){ .badge,.site-head.is-stuck .badge{transform:translateY(11px) scale(.575);} }
@media (min-width:981px){ .site-head{--bw-n:140px;} .nav{margin-left:calc(var(--bw-n) + clamp(28px,2.6vw,64px));} }
@media (min-width:1600px){ .site-head{--bw-n:176px;} }
@media (min-width:1061px){ .hero.hx.home .tsc .tb + .nt,.hero.hx.home .tsc .nt{white-space:normal;max-width:none;font-size:15px;} }
@media (min-width:1061px) and (max-width:1599px){ .xs-open{margin-left:33%;} }
@media (min-width:1061px){ .hero.hx.home .tsc .nt{background:#fff;color:var(--ink);border:2.5px solid var(--graphite);border-radius:12px;box-shadow:4px 4px 0 var(--graphite);padding:12px 16px;margin-top:14px;font-weight:700;} }
@media (min-width:1061px){ .hero.hx.wide.has-char h1{font-size:clamp(42px,3.6vw,82px);} }
/* text-only heroes (Legal, Resources, Pricing, Refer): no invented piece; the copy steps up and sits as one centred
   group with the figure, so the hero reads as text plus character rather than a small block in an empty field */
@media (min-width:1061px){
  .hero.hx.has-char.char-only .wrap>div.hx-copy{max-width:900px;}
  .hero.hx.has-char.char-only h1{font-size:clamp(46px,3.9vw,84px);max-width:16ch;}
  .hero.hx.has-char.char-only .sub{font-size:clamp(19px,1.3vw,26px);max-width:38ch;}
  .hero.hx.has-char.char-only .btn{font-size:clamp(16px,.95vw,19px);padding:14px 24px;}
}
@media (min-width:1061px){ .hero.hx.has-char.char-only .wrap{grid-template-columns:minmax(0,max-content) var(--cw);justify-content:center;column-gap:clamp(24px,3vw,72px);} }

/* Home scene 7 (job board): the fitter's extra height goes to the board, never the arrivals tray, so the tray stays a
   slim bar and the four columns fill their card (coordinator, 5th Nov) */
.hx-scene.of2[data-fill]{grid-template-rows:auto minmax(0,1fr);align-content:stretch;}
.hx-scene.of2[data-fill] .bd{display:flex;flex-direction:column;min-height:0;}
.hx-scene.of2[data-fill] .cols{flex:1;}
.hx-scene.of2[data-fill] .tray{min-height:0;}

/* Examples hero: twelve chips sit in two tidy rows */
@media (min-width:1061px){ .xs-chip{font-size:14.5px;padding:9px 14px;min-height:44px;} .xs-chips{gap:8px;} }
@media (min-width:2200px){ .xs-chip{font-size:17px;padding:11px 18px;} }

/* Examples grid: every example website, large, two to a row (Sam: "example sites are far too small") */
.xg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,56px) clamp(24px,2.6vw,48px);margin-top:clamp(24px,2.4vw,40px);}
.xg-card{display:grid;grid-template-rows:auto 1fr;gap:clamp(16px,1.4vw,24px);background:#fff;color:var(--ink);border:3px solid var(--graphite);border-radius:20px;box-shadow:8px 8px 0 var(--graphite);padding:clamp(16px,1.4vw,26px);scroll-margin-top:110px;}
.xg-shot{position:relative;display:block;padding:0 10% 7% 0;text-decoration:none;}
.xg-br{display:block;border:3px solid var(--graphite);border-radius:14px;overflow:hidden;background:#F3EFE6;transition:transform 220ms var(--hx-out);}
.xg-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#E9E3D6;border-bottom:2.5px solid var(--graphite);font:800 11.5px/1 var(--display);color:var(--ink);}
.xg-bar i{width:9px;height:9px;border-radius:50%;border:2px solid var(--graphite);}
.xg-bar span{margin-left:auto;letter-spacing:.05em;text-transform:uppercase;}
.xg-br img{display:block;width:100%;height:auto;}
.xg-ph{position:absolute;right:0;bottom:0;width:21%;border:3px solid var(--graphite);border-radius:16px;overflow:hidden;background:var(--graphite);box-shadow:5px 5px 0 var(--graphite);transition:transform 220ms var(--hx-out);}
.xg-ph img{display:block;width:100%;height:auto;}
.xg-tx{display:flex;flex-direction:column;gap:10px;}
.xg-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 15px/1.3 var(--text);color:var(--mute);margin:0;}
.xg-who b{background:var(--hivis);color:var(--ink);border:2px solid var(--graphite);border-radius:999px;padding:5px 12px;font:800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;}
.xg-tx h3{font:800 clamp(22px,1.6vw,30px)/1.1 var(--display);margin:0;}
.xg-head{font:700 clamp(17px,1.1vw,20px)/1.35 var(--display);margin:0;}
.xg-tx ul{margin:2px 0 6px;}
.xg-tx .btn{align-self:flex-start;margin-top:auto;}
@media (hover:hover) and (pointer:fine){ .xg-card:hover .xg-br{transform:translateY(-4px);} .xg-card:hover .xg-ph{transform:translateY(-6px) rotate(-1deg);} }
@media (max-width:980px){ .xg-grid{grid-template-columns:minmax(0,1fr);} }
@media (prefers-reduced-motion:reduce){ .xg-br,.xg-ph{transition:none;} }

/* text-only heroes read as heroes: bigger, heavier copy */
@media (min-width:1061px){
  .hero.hx.has-char.char-only h1{font-size:clamp(52px,4.4vw,96px);line-height:1.02;}
  .hero.hx.has-char.char-only .sub{font-size:clamp(20px,1.45vw,29px);font-weight:600;line-height:1.4;max-width:34ch;}
  .hero.hx.has-char.char-only .btn{font-size:clamp(17px,1.05vw,21px);padding:16px 28px;}
  .hero.hx.has-char.char-only .label{font-size:clamp(13px,.8vw,16px);}
}
[data-fill] .hx-scene.of2{grid-template-rows:auto minmax(0,1fr);align-content:stretch;}
[data-fill] .hx-scene.of2 .bd{display:flex;flex-direction:column;min-height:0;}
[data-fill] .hx-scene.of2 .cols{flex:1;}
[data-fill] .hx-scene.of2 .tray{min-height:0;}
@media (min-width:1061px){ .xs-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;} .xs-chip{font-size:13.5px;padding:8px 10px;white-space:nowrap;} }
@media (min-width:2200px){ .xs-chips{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));} .xs-chip{font-size:16px;} }
.hx-scene.of2{--fit-minw:520px;}
@media (min-width:1061px){ .xs-chips{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));} .xs-chip{font-size:13px;padding:8px;} }
@media (min-width:2200px){ .xs-chips{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));} .xs-chip{font-size:16px;} }
@media (min-width:1061px){
  .hero.hx .hx-scene.of2 .tray{min-height:0;padding:8px 12px;}
  [data-fill] .hx-scene.of2 .col{justify-content:flex-start;}
  [data-fill] .hx-scene.of2 .hole{flex:1 1 auto;min-height:40px;}
}
.hx-scene.of2{--fit-minw:440px;}
/* end state: the arrivals tray reads as a confirmation, not an empty dark block */
.of2.s6 .tray{background:#fff;transition:background-color 260ms var(--hx-out);}
.of2.s6 .tray .hx-lab{color:var(--ink);}
.of2.s6 .none{color:var(--ink);}
@media (min-width:1061px){ .hero.hx.has-char.char-only h1{font-size:clamp(48px,3.9vw,84px);} }
@media (min-width:981px){ .sec.xg .wrap{max-width:var(--hero-max);padding-inline:var(--hero-gut);} }
/* chips never truncate (coordinator, 5th Nov): labels may wrap, cells grow; clear gap to the browser below */
.xs-chip{white-space:normal;overflow:visible;text-overflow:clip;min-width:0;line-height:1.15;text-align:center;}
@media (min-width:1061px){ .xs-chips{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));margin-bottom:clamp(18px,1.6vw,30px);} .xs-chip{padding:8px 10px;} }
@media (min-width:2200px){ .xs-chips{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} }
/* 6th Nov 2026 (char gate fix): the head-scratch pose (tools-automation) is wider than the column, so on desktop it
   overhung the headline and buttons. Same height as every other pose (one character size); the column widens to the
   figure's own width instead, so the copy column narrows and nothing sits under him. */
@media (min-width:1061px){ .hero.hx.has-char.char-only:has(.hc-f.wide) .wrap{grid-template-columns:minmax(0,1fr) calc(var(--ch) * var(--wide-r, 1.0862));} }

/* go-live 7th Nov 2026 */
.tag.test{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.vat-line{margin-top:12px;}
.pg-list + .vat-line,.pg .vat-line{grid-column:1/-1;}
/* 7th Nov 2026: pricing fact tiles, full width under the website cards (Sam: the terms paragraph sat to one side) */
.pfacts{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.pfacts li.card{padding:18px 20px;display:flex;flex-direction:column;gap:6px;}
.pfacts b{font:800 18px/1.2 var(--display);color:var(--ink);}
.pfacts span{font-size:15.5px;line-height:1.45;color:var(--mute);}
@media (max-width:1060px){ .pfacts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .pfacts{grid-template-columns:1fr;gap:12px;} .pfacts li.card{padding:16px 18px;} }
/* ===== Starting out diagram, round 3 (Sam, 7th Nov 2026: "These are squashed"). Between the copy and the character
   the stage is only ~460-660px wide from 1061 to 2199, too narrow for a three-column ring: Quotes and Reviews went one
   word per line. There the hub sits on top and the six cards stand in two equal columns, every card the same size.
   The lean-in margins are gone at every width, so no card is narrower than its neighbour. ===== */
.hero.hx.has-char .su .sf{margin:0 !important;}
.su .sf{align-self:stretch;}
/* the "Waiting" line hides at once and the done line fades in, so the two never sit on top of each other */
.su .st>span{transition:none;}
.su .st .w,.su.s1 .k1 .d,.su.s2 .k2 .d,.su.s3 .k3 .d,.su.s4 .k4 .d,.su.s5 .k5 .d,.su.s6 .k6 .d{transition:opacity 240ms var(--hx-out);}
.su.s1 .k1 .w,.su.s2 .k2 .w,.su.s3 .k3 .w,.su.s4 .k4 .w,.su.s5 .k5 .w,.su.s6 .k6 .w{transition:none;}
@media (min-width:1061px) and (max-width:2199px){
  .hero.hx.has-char .hx-scene.su,.hero.hx.has-char .hx-scene.su[data-fill]{--fit-minw:440px;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto repeat(3,minmax(0,1fr));column-gap:56px;row-gap:18px;align-content:stretch;}
  .hero.hx.has-char .su .me{grid-column:1/-1;grid-row:1;width:auto;display:flex;align-items:center;justify-content:center;gap:14px;padding-bottom:6px;}
  .hero.hx.has-char .su .hub{width:84px;}
  .hero.hx.has-char .su .sf.l{grid-column:1;} .hero.hx.has-char .su .sf.r{grid-column:2;}
  .hero.hx.has-char .su .k1,.hero.hx.has-char .su .k4{grid-row:2;}
  .hero.hx.has-char .su .k2,.hero.hx.has-char .su .k5{grid-row:3;}
  .hero.hx.has-char .su .k3,.hero.hx.has-char .su .k6{grid-row:4;}
  .hero.hx.has-char .su .sf{padding:16px 16px 16px 14px;grid-template-columns:38px minmax(0,1fr);gap:6px 12px;align-content:center;}
  .hero.hx.has-char .su .sf .ic{width:38px;height:38px;}
  .hero.hx.has-char .su .sf .tx b{font-size:18px;}
  .hero.hx.has-char .su .st{font-size:15px;}
}
@media (min-width:2200px){
  .hero.hx.has-char .hx-scene.su,.hero.hx.has-char .hx-scene.su[data-fill]{grid-template-rows:repeat(3,minmax(0,1fr));}
}
.su-wires .trunk{opacity:.6;}
@media (min-width:1061px) and (max-width:2199px){
  /* hub centred over the gap between the columns; its label sits to the right without pushing it off centre */
  .hero.hx.has-char .su .me{display:grid;justify-items:center;position:relative;}
  .hero.hx.has-char .su .me .hx-pill{position:absolute;left:calc(50% + 56px);top:50%;transform:translateY(-50%);margin:0;}
}
/* ===== Tablet heroes (Sam, 7th Nov 2026 audit): at 761-1060 the copy and the character share the first row, so the
   character no longer stands alone over an empty orange band; the stage runs full width below and his feet tuck behind it. ===== */
@media (min-width:761px) and (max-width:1060px){
  .hero.hx.has-char .wrap,.hero.hx.has-char.char-only .wrap,.hero.hx.has-char.wide .wrap{grid-template-columns:minmax(0,1fr) var(--cw);column-gap:20px;row-gap:28px;}
  .hero.hx.has-char .wrap>div.hx-copy,.hero.hx.has-char.wide .wrap>div.hx-copy{grid-column:1;grid-row:1;align-self:center;}
  .hero.hx.has-char .wrap>.hx-char,.hero.hx.has-char.wide .wrap>.hx-char{grid-column:2;grid-row:1;align-self:end;justify-self:end;}
  .hero.hx.has-char .wrap>.hx-scene,.hero.hx.has-char.wide .wrap>.hx-scene{grid-column:1/-1;grid-row:2;}
  .hero.hx.has-char.char-only .wrap>.hx-char{margin-bottom:-56px;}
  .hero.hx.has-char.char-only .hc-f{height:min(var(--ch), calc(var(--cw) * var(--ph) / var(--pw)));width:auto;}
}
/* Trustpilot review line on Contact (Sam, 7th Nov 2026): plain link, no widget, no stars. */
.tp-review{margin-top:24px;font-weight:600;}
.tp-review a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;}
/* Reviews: readable cards, centred incomplete rows, all entries visible. */
.crvs .sec-head{text-align:center;margin-inline:auto;}
.crvs .sec-head .label{margin-inline:auto;}
.crv-list{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;align-items:stretch;}
.crv-list>.crv{box-sizing:border-box;flex:0 1 calc((100% - 48px)/3);min-width:0;display:flex;flex-direction:column;padding:30px;gap:22px;border-top:6px solid var(--hivis);text-align:left;}
.crv-list.n1>.crv{flex-basis:720px;}
.crv-list.n2>.crv,.crv-list.n4>.crv{flex-basis:calc((100% - 24px)/2);max-width:560px;}
.crv-q{margin:0;position:relative;padding-top:34px;}
.crv-q::before{content:"“";position:absolute;top:-14px;left:-3px;font:800 72px/1 var(--display);color:var(--graphite);}
.crv-q p{margin:0;font:500 20px/1.55 var(--text);color:var(--ink);}
.crv-who{margin:auto 0 0;padding-top:18px;border-top:1px solid #ccc;display:flex;flex-direction:column;gap:5px;color:var(--ink);}
.crv-who strong{font:800 18px/1.35 var(--display);}
.crv-detail{font:500 16px/1.5 var(--text);}
.crv-when{font:500 14px/1.4 var(--text);color:var(--mute);}
.crv-go{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:underline;text-underline-offset:4px;}
.crv-more{margin:26px 0 0;text-align:center;}
.crv-more a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;}
@media(max-width:1060px){.crv-list>.crv{flex-basis:calc((100% - 24px)/2);}.crv-list.n3>.crv:last-child{flex-basis:calc((100% - 24px)/2);}}
@media(max-width:760px){.crv-list{gap:20px;margin-top:26px;}.crv-list>.crv,.crv-list.n1>.crv,.crv-list.n2>.crv,.crv-list.n3>.crv:last-child,.crv-list.n4>.crv{flex-basis:100%;max-width:none;padding:26px 24px;gap:20px;}.crv-q p{font-size:19px;line-height:1.6;}}
/* ===== Layout audit fixes (Sam, 7th Nov 2026: "Have you checked the website throughout?") ===== */
/* Three example sites at tablet width: three across instead of two plus one stranded under them. */
@media (min-width:761px) and (max-width:1060px){
  .ex-row:not(.two){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .buy>:nth-child(3):last-child{grid-column:1/-1;}
}
/* Learn AI "Session formats" (Sam, 7th Nov 2026: "Small group course pricing makes no sense"): four equal cards,
   cheapest first, each with its price, one line on what you get and who it suits. Group booking detail sits in a
   details box under them. */
.formats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;}
.formats4 .fmt{display:flex;flex-direction:column;gap:12px;}
.formats4 .fmt h3{margin:0;}
.formats4 .fmt .avail{order:-0;margin:0;font:800 26px/1.1 var(--display);color:var(--hivis);}
.formats4 .fmt p{margin:0;}
.formats4 .fmt .fmt-who{margin-top:auto;padding-top:12px;border-top:1.5px solid rgba(255,255,255,.18);font-size:15px;color:#C9CBCF;}
.formats4 .fmt .fmt-who b{color:#fff;}
.fmt-how{margin-top:22px;border:2px solid rgba(255,255,255,.28);border-radius:14px;max-width:900px;}
.fmt-how summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 18px;font:800 17px/1.2 var(--display);color:#fff;}
.fmt-how summary::-webkit-details-marker{display:none;}
.fmt-how summary::after{content:"+";font-size:22px;}
.fmt-how[open] summary::after{content:"\2212";}
.fmt-how p{padding:0 18px 16px;margin:0;color:#C9CBCF;}
.fmt-vat{margin-top:14px;color:#C9CBCF;}
.fmt-go{margin-top:18px;}
@media (max-width:1240px){ .formats4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .formats4{grid-template-columns:minmax(0,1fr);gap:14px;} }
/* Referrals (7th Nov 2026): label no longer touches the heading in the yellow "Your own link" box; the referral link maker. */
.acc-box>.label{margin-top:0;}
.acc-box>.label+h3{margin-top:14px;}
.refj{align-items:start;}
.refj-alt{margin-top:18px;}
.ref-out{border:2px dashed var(--graphite);border-radius:12px;background:var(--cream);padding:14px 16px;}
.ref-out-h{font:800 13px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0;}
.ref-url{margin:6px 0 0;font:700 17px/1.4 var(--text);color:var(--ink);overflow-wrap:anywhere;}
.ref-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:12px 0 0;}
.ref-acts .btn{min-height:44px;}
.refj-alt .go{display:inline;}

/* 7th Nov, flag review: at tablet width (761-1060) the hero job board is too short for three cards in the Booked column, so the
   last one ("Roof leak, BN16") was cut off at the board's edge. The scene is decorative; drop that card there. */
@media (min-width:761px) and (max-width:1060px){ .of .col:nth-child(3)>.ghost:nth-child(5){display:none;} }
/* 7th Nov, screen-crop review: option-card labels ("Website only", "Connected") stretched to the full card width; size them to their text. */
.pcard>p.label{width:fit-content;}
/* "What happens next" sat directly under the contact lead paragraph with no gap. */
.lead+.inc-h{margin-top:22px;}


/* Call answering scenes use the existing card and label family. */
.call-scene{display:grid;gap:18px;max-width:580px;margin:auto;padding:24px;}
.call-scene>.label{margin:0;justify-self:start;}
.call-scene .card{padding:24px;}
.call-scene .card .label{margin:0 0 14px;}
.call-scene .card h3{margin:0 0 10px;}
.call-scene .small{margin:0;}
.call-steps{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
.call-steps>.card{flex:0 1 calc((100% - 40px)/3);box-sizing:border-box;}
.pfacts>li:last-child:nth-child(5){grid-column:1/-1;}
@media(max-width:1060px){.call-steps>.card{flex-basis:calc((100% - 20px)/2);}}
@media(max-width:760px){.call-scene{padding:12px 0;}.call-scene .card{padding:22px;}.call-steps>.card{flex-basis:100%;}}

.hero.hx.has-char .hx-scene.call-scene{box-sizing:border-box;min-width:0;transform:none;width:100%;max-width:580px;}
@media(min-width:761px) and (max-width:1060px){.hero.hx.has-char .hx-scene.call-scene{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));}.call-scene>.label,.call-scene>.small{grid-column:1/-1;}}
/* These text cards lay out naturally; the illustrated-scene zoom fitter must not shrink their text. */
.hero.hx.has-char .wrap>.hx-scene.call-scene{grid-column:2;grid-row:1;zoom:1!important;width:100%!important;height:auto!important;margin:0!important;justify-self:stretch;align-self:center;padding:0;}
@media(max-width:1060px){.hero.hx.has-char .wrap>.hx-scene.call-scene{grid-column:1/-1;grid-row:2;}}
@media(min-width:1061px){.hero.hx.has-char .wrap>.hx-scene.call-scene{grid-column:2/3!important;}}
@media(max-width:760px){.hero.hx.has-char .wrap>.hx-scene.call-scene{grid-column:1/-1!important;grid-row:auto!important;max-width:none;}}

/* Reserve logo space while keeping the added service link readable on compact desktops. */
@media(min-width:981px) and (max-width:1400px){.nav{gap:3px;}.nav a{padding-inline:10px;}.nav .hc .hc-t{display:none;}}

@media(min-width:761px){.buy:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));}}

/* live forms */
.tp-ts{margin:4px 0 8px;}
.form-msg.is-err{color:#9b1c1c;font-weight:700;}
.form.is-sent .form-msg{font-weight:700;}