/* Business Factory base layer. Every colour, font, radius and motion value comes from the direction tokens the
   generator writes into :root (--c-*, --f-*, --t-*, --r-*, --m-*). No hard-coded brand values below. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--c-bg);scroll-padding-top:84px;scroll-padding-bottom:12px}
/* R8 N42: the browser's own focus and anchor scrolling keeps targets clear of the sticky header (73px + 11px air) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--c-ink);color:var(--c-bg);border-radius:var(--r-sm);text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:var(--t-display-weight);letter-spacing:var(--t-display-tracking);line-height:var(--t-display-leading);text-wrap:balance}
p{margin:0;text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.kicker::before{content:'';width:22px;height:2px;background:var(--c-accent)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--c-muted);max-width:38ch}
.h2{font-size:var(--t-h2);text-transform:var(--t-display-transform)}

/* demo disclosure: always visible, never dismissible */
.demo-bar{position:relative;z-index:60;background:var(--c-ink);color:var(--c-bg);font:600 .78rem/1.3 var(--f-mono);letter-spacing:.04em;text-align:center;padding:8px 16px}
.demo-bar b{color:inherit;text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:2px;text-underline-offset:3px}
.demo-bar .db-long{display:inline}
/* short string below 900px so the bar stays on one line at tablet widths too (referee R2 N12) */
@media (max-width:900px){.demo-bar .db-long{display:none}}
@media (max-width:600px){.demo-bar{font:600 .74rem/1.3 var(--f-body);letter-spacing:0;padding:7px 12px}}

/* buttons */
.btn{--tx:0px;--ty:0px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-md);border:2px solid transparent;
  font:700 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;transform:translate(var(--tx),var(--ty));
  transition:transform var(--m-dur-s) var(--m-ease-out),background-color var(--m-dur-s) ease,color var(--m-dur-s) ease,box-shadow var(--m-dur-m) var(--m-ease-out)}
.btn-primary{background:var(--c-accent);color:var(--c-accent-ink)}
.btn-primary:hover{box-shadow:0 10px 28px -10px var(--c-accent)}
.btn-primary:active{transform:translate(var(--tx),var(--ty)) scale(.98)}
.btn-secondary{background:transparent;color:inherit;border-color:currentColor}
.btn-secondary:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn .arr{transition:transform var(--m-dur-s) var(--m-ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn-link{min-height:44px;padding:0 6px;border:0;background:none;color:inherit;font:600 .95rem var(--f-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.btn.is-loading{opacity:.75;pointer-events:none}
.btn.is-loading::after{content:'';width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--c-bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--m-dur-m) ease,box-shadow var(--m-dur-m) ease}
.hdr.is-scrolled{border-bottom-color:var(--c-line);box-shadow:0 8px 24px -18px rgba(0,0,0,.4)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 1.06rem/1.1 var(--f-display);letter-spacing:var(--t-display-tracking);text-transform:var(--t-display-transform)}
.brand svg{width:38px;height:38px;flex:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;font-weight:600;font-size:.95rem;color:var(--c-muted);transition:color var(--m-dur-s) ease}
.nav a:hover{color:var(--c-ink)}
.nav .btn{margin-left:8px;min-height:44px;padding:0 18px;font-size:.95rem}
.nav .btn-primary,.nav .btn-primary:hover{color:var(--c-accent-ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.nav-toggle{display:none;margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:none;color:inherit;cursor:pointer}
@media (max-width:820px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:var(--c-bg);border-bottom:1px solid var(--c-line);display:none}
  .nav.is-open{display:flex}
  .nav a{padding:14px 8px;border-bottom:1px solid var(--c-line)}
  .nav .btn{margin:12px 0 0}
}

/* sections */
.sec{padding:clamp(72px,10vw,136px) 0;position:relative}
.sec--short{padding:clamp(56px,7vw,96px) 0}
.nw{white-space:nowrap}
.hero-call{margin-top:14px;font-size:.98rem;color:var(--c-muted)}
.hero-call a{color:var(--c-ink);font-weight:700}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:60ch}
.tone-dark{background:var(--c-bg);color:var(--c-ink)}
.tone-paper{background:var(--c-paper);color:var(--c-paper-ink)}
.tone-paper .lead,.tone-paper .muted{color:var(--c-paper-muted)}
.tone-paper .kicker{color:var(--c-paper-muted)}
.tone-light{background:var(--c-bg)}

/* reveals (only when motion is allowed and JS runs) */
.js-motion [data-reveal]{opacity:0;transform:translateY(var(--m-distance)) scale(var(--m-scale-in));transition:opacity var(--m-dur-l) var(--m-ease-out),transform var(--m-dur-l) var(--m-ease-out);transition-delay:calc(var(--ri,0) * var(--m-stagger))}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
.js-motion [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.js-motion [data-split] .wi{display:inline-block;transform:translateY(105%);animation:wordUp var(--m-dur-l) var(--m-ease-out) forwards;animation-delay:calc(120ms + var(--i) * var(--m-stagger))}
@keyframes wordUp{to{transform:none}}

/* art (line drawing) */
.art{width:100%;height:auto;overflow:visible}
.art--path{overflow:hidden}
.art .draw{fill:none;stroke:var(--art-ink,currentColor);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art .thin{stroke-width:1}
.art .accent{stroke:var(--c-accent);stroke-width:2.6}
.art .dash{stroke-dasharray:4 7;opacity:.55}
.art .grid{stroke:var(--art-grid,var(--c-line));stroke-width:1}
.art .grid-bg{opacity:.55}
.art .drill circle{fill:var(--art-ink,currentColor);opacity:.75}
.art .node{fill:var(--c-accent)}
.art .node.ink{fill:var(--art-ink,currentColor)}
.art .node.accent-ring{fill:none;stroke:var(--c-accent);stroke-width:2}
.art .node.faint,.art .faint{opacity:.38}
/* text inside a drawing renders at a fixed pixel size: --u (viewBox units per px) is set by motion.js; the fallback
   suits a ~460px-wide drawing when JS is off */
.art .art-label{fill:var(--art-ink,currentColor);font-family:var(--f-mono);font-weight:600;font-size:calc(var(--u,1.4) * 13px);letter-spacing:.04em}
.art .art-num circle{fill:var(--art-badge,var(--c-ink));r:calc(var(--u,1.4) * 13px)}
.art .art-num text{fill:var(--art-badge-ink,var(--c-bg));font-family:var(--f-mono);font-weight:700;font-size:calc(var(--u,1.4) * 13px)}
.art .art-num.is-accent circle{fill:var(--c-accent)}
.art .art-num.is-accent text{fill:var(--c-accent-ink)}
.js-motion .art .art-num{opacity:0;transition:opacity var(--m-dur-m) ease;transition-delay:calc(700ms + var(--d,0) * 180ms)}
.js-motion .art.is-drawn .art-num{opacity:1}
/* the legend that names the numbered points (body-size text, never inside the SVG) */
.art-legend{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;font:600 .9rem/1.35 var(--f-mono);letter-spacing:.02em}
.art-legend li{display:flex;gap:10px;align-items:baseline}
.art-legend .n{flex:none;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:999px;background:var(--art-badge,var(--c-ink));color:var(--art-badge-ink,var(--c-bg));font-size:.78rem}
.art-legend-title{font:600 .78rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin:0}
h1 .sent{display:block}
[tabindex="-1"]:focus{outline:none}
.art .call{stroke-width:1.1}
.art .contour{stroke:var(--art-ink,currentColor);stroke-width:1;opacity:.16}
.art .route{stroke:var(--c-accent2);stroke-width:2;stroke-dasharray:2 7}
/* the cleaning route must read at a glance (referee R2 N8: a thin pale line) */
.art--plan .route{stroke:var(--c-accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.art--plan .route-start circle{fill:#FFFFFF;stroke:var(--c-accent);stroke-width:4}
.art--plan .route-end path{fill:var(--c-accent)}
.js-motion .art--plan .route-start,.js-motion .art--plan .route-end{opacity:0;transition:opacity var(--m-dur-m) ease}
.js-motion .art--plan .route-start{transition-delay:600ms}
.js-motion .art--plan .route-end{transition-delay:2200ms}
.js-motion .art--plan.is-drawn .route-start,.js-motion .art--plan.is-drawn .route-end{opacity:1}
.art .room-fill{fill:var(--c-surface2);opacity:0}
.art .tick circle{fill:var(--c-accent)}
.art .tick path{stroke:var(--c-accent-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.art .tick{opacity:0}
.art.is-drawn .room-fill,.art.is-in .room-fill{opacity:1}
.art.is-drawn .tick,.art.is-in .tick{opacity:1}
html:not(.js-motion) .art .room-fill,html:not(.js-motion) .art .tick{opacity:1}
.js-motion .art .draw{stroke-dasharray:1;stroke-dashoffset:1}
.js-motion .art.is-drawn .draw{animation:draw var(--dur,1600ms) var(--m-ease) forwards;animation-delay:calc(var(--di,0) * var(--stag,60ms))}
@keyframes draw{to{stroke-dashoffset:0}}
.js-motion .art .art-label,.js-motion .art .node{opacity:0;transition:opacity var(--m-dur-m) ease;transition-delay:calc(700ms + var(--d,0) * 180ms)}
.js-motion .art.is-drawn .art-label,.js-motion .art.is-drawn .node{opacity:1}
.js-motion .art .room-fill{transition:opacity var(--m-dur-l) var(--m-ease-out);transition-delay:calc(900ms + var(--d,0) * 260ms)}
/* the scale lives on .tick-in: a CSS transform on .tick itself would replace its SVG translate (ticks flew in from the corner) */
.js-motion .art .tick{transition:opacity var(--m-dur-s) ease;transition-delay:calc(1000ms + var(--d,0) * 260ms)}
.art .tick-in{transform-box:fill-box;transform-origin:center;transition:transform var(--m-dur-m) var(--m-ease-out)}
.js-motion .art .tick-in{transition-delay:calc(1000ms + var(--d,0) * 260ms)}
.js-motion .art .room.is-hl .tick-in{transition-delay:0ms}
.js-motion .art:not(.is-drawn) .tick-in{transform:scale(.4)}
.js-motion .art .room{--d:0}

/* heroes never push the primary action below the first screen: display size is also capped by the viewport height */
.hero-h1{font-size:min(var(--t-display),var(--hero-max,6.2rem),var(--hero-vh,11vh))}

/* cards with tilt (pointer only; only emitted where the direction asks for it) */
[data-tilt]{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--m-dur-m) var(--m-ease-out),box-shadow var(--m-dur-m) var(--m-ease-out),border-color var(--m-dur-s) ease;will-change:transform}
[data-tilt]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--c-accent) 14%,transparent),transparent 60%);opacity:0;transition:opacity var(--m-dur-m) ease}
[data-tilt]:hover::after{opacity:1}

/* FAQ shared */
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;font:600 1.08rem/1.35 var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform var(--m-dur-m) var(--m-ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 0 22px;color:var(--c-muted);max-width:62ch}
.tone-paper .faq details p{color:var(--c-paper-muted)}
.tone-paper .faq details{border-color:color-mix(in srgb,var(--c-paper-ink) 18%,transparent)}

/* footer */
.ftr{padding:56px 0 40px;border-top:1px solid var(--c-line);background:var(--c-bg)}
.ftr-in{display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1fr}
.ftr h3{font-size:1rem;letter-spacing:.02em;margin-bottom:10px}
.ftr p,.ftr li{color:var(--c-muted);font-size:.95rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ftr-base{margin-top:36px;padding-top:20px;border-top:1px solid var(--c-line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font:500 .82rem var(--f-mono);color:var(--c-muted)}
@media (max-width:820px){.ftr-in{grid-template-columns:1fr}}

/* page change: the leaving page fades out (JS, links marked data-transition) and every page fades in (CSS, no JS needed).
   Cross-document View Transitions were dropped: a skipped transition rejects promises the page cannot reach before the new
   document runs, which surfaced as uncaught "Transition was skipped" errors (referee R3 N22) and stalled headless QA. */
.is-leaving body{opacity:0;transition:opacity var(--m-dur-s) ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){body{animation:pageIn var(--m-dur-m) var(--m-ease-out) both}}
/* R4 N32: the page fade-in kept the body at full opacity, so the leave fade never showed; stop it while leaving */
.is-leaving body{animation:none}
/* R4 N36: demo bar text at least 12px on phones */
@media (max-width:600px){.demo-bar{font-size:.75rem}}
/* R5 N32: a real fade-out while leaving (the transition cut to the page colour on the first frame) */
@keyframes pageOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:no-preference){.is-leaving body{animation:pageOut var(--m-dur-s) ease forwards}}