/* P0 design-system layer. Loaded last on every page. See ROADMAP.md section 3. */
:root{--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.65,0,.35,1);--dur-ui:600ms;--dur-reveal:900ms;--dur-hero:1400ms;--stagger:90ms}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(min-width:960px){body{font-size:17px}}
.hero-side p{font-size:19px;max-width:36ch}

/* Stakes: the moment the phone rings, and what happens next. */
.stakes{padding:96px 0 104px;border-top:1px solid var(--line)}
.stakes-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:44px}
.stakes-head h2{font-size:clamp(38px,4.6vw,62px)}
.stakes-head p{font-size:19px;color:var(--soft);max-width:34ch}
.moments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.moments li{position:relative;padding:28px 26px 26px;border-radius:18px;background:var(--sheet);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.moments li:before{content:'';position:absolute;left:26px;top:-1px;width:44px;height:3px;border-radius:0 0 3px 3px;background:var(--coral)}
.moment-time{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.02em}
.moments h3{font-size:22px;line-height:1.3;letter-spacing:-.02em;font-weight:750}
.moment-fix{margin-top:auto;padding-top:14px;border-top:1px dashed #d6d4cc;font-size:16px;color:var(--soft)}
.moment-fix b{color:var(--ink)}
.versus{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;margin-top:20px}
.versus>div{border-radius:18px;padding:28px}
.versus-old{border:1.5px dashed #c4c3bb;color:var(--soft)}
.versus-new{background:var(--ink);color:var(--paper)}
.versus-label{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.versus-new .versus-label{color:#f1ab95}
.versus-quote{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#7b8a92;font-style:italic}
.versus-note{margin-top:10px;font-size:16px}
.versus-ticket{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.versus-ticket li{display:grid;grid-template-columns:110px 1fr;gap:14px;font-family:var(--mono);font-size:15px;font-weight:600;padding-bottom:10px;border-bottom:1px solid #ffffff1a}
.versus-ticket li:last-child{border-bottom:0;padding-bottom:0;color:#f1ab95}
.versus-ticket span{font-family:Manrope,sans-serif;font-size:14px;font-weight:600;color:#9db6c8}

/* Scroll reveals where the browser supports view timelines. Static elsewhere. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .moments li,.versus>div,.audience-card,.setup-steps li{animation:sys-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .moments li:nth-child(2),.setup-steps li:nth-child(2){animation-range:entry 8% entry 63%}
    .moments li:nth-child(3),.setup-steps li:nth-child(3){animation-range:entry 16% entry 71%}
    @keyframes sys-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
  }
}

/* Closing call to action, with the socket the site line plugs into. */
.close-cta{display:flex;align-items:center;gap:18px}
.spine-jack{display:none;width:30px;height:38px;border-radius:8px;border:2.5px solid var(--ink);position:relative;flex:none;background:var(--sheet);transition:border-color .35s var(--ease-out),box-shadow .6s var(--ease-out)}
.spine-jack:before,.spine-jack:after{content:'';position:absolute;top:9px;width:3px;height:12px;border-radius:2px;background:var(--ink);transition:background-color .35s var(--ease-out)}
.spine-jack:before{left:7px}.spine-jack:after{right:7px}
.has-spine .spine-jack{display:block}
/* Lights up once the plug seats, a beat after it starts moving. */
.spine-jack.is-plugged{border-color:var(--feather);box-shadow:0 0 0 7px #526f8326;transition-delay:.18s}
.spine-jack.is-plugged:before,.spine-jack.is-plugged:after{background:var(--feather);transition-delay:.18s}

/* The site line. Drawn by spine.js into one SVG that spans the page. */
.spine{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:6;overflow:visible}
.spine-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Coil copies are stroked with a gradient (set by spine.js) that fades ink into coral and back. */
.spine-coil{fill:none;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.spine-stop-ink{stop-color:var(--ink)}
.spine-stop-coral{stop-color:var(--coral)}
.spine-node{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.spine-plug{fill:var(--ink)}
.spine-tip{opacity:0;transition:opacity .35s var(--ease-out)}
.spine-tip.is-here{opacity:1}
.spine-plug-move{transition:transform .5s cubic-bezier(.34,1.45,.64,1)}
.spine-tip.is-plugged .spine-plug-move{transform:translateY(var(--plug))}
@media(prefers-reduced-motion:reduce){.spine-tip,.spine-plug-move,.spine-jack,.spine-jack:before,.spine-jack:after{transition:none!important}}
@media(max-width:1099px){.spine,.spine-jack{display:none!important}}

@media(max-width:900px){
  .stakes{padding:64px 0 72px}
  .stakes-head{grid-template-columns:1fr;gap:16px}
  .moments,.versus{grid-template-columns:1fr}
  .versus-ticket li{grid-template-columns:92px 1fr}
}

/* ===================== P1: global polish (ROADMAP P1.1 to P1.12) ===================== */
:root{--display:'Archivo',Manrope,'Segoe UI',sans-serif;--night:#121c25;--night-2:#1b2733;--section:112px;--r-ctl:10px;--r-card:18px;--r-panel:28px;interpolate-size:allow-keywords}

/* P1.1 Display face: Archivo, a touch wide, firm tracking. The wordmark stays Manrope. */
h1,h2,h3,.price,.hb-page-callmap strong,.hb-page-switchboard-in>strong,.hb-page-datajourney strong{font-family:var(--display)!important;font-stretch:108%;letter-spacing:-.025em!important}
h1{font-weight:800;line-height:1!important}
h2{font-weight:750;line-height:1.04}
h3{font-weight:700;letter-spacing:-.015em!important}
.hero h1{font-stretch:104%;letter-spacing:-.035em!important}
.price{font-weight:800}

/* Paper grain: a whisper of texture so the cream never reads as flat. */
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:multiply;background: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* P1.2 One spacing scale. P1.3 Headings stack with their intro; no lone grey line floating right. */
.page-hero{padding:88px 0 40px!important}
.page-hero:not(.page-hero--scene)>.wrap{display:block!important}
.page-hero h1{font-size:clamp(46px,6.4vw,92px)!important;max-width:16ch!important;margin-bottom:26px!important}
.page-hero .intro{font-size:20px!important;max-width:54ch!important;color:var(--soft)}
.stakes,.audience-section,.home-faq{padding-block:calc(var(--section)/2)}
.stakes{padding-top:var(--section)}
.home-faq{padding-bottom:var(--section)}
.hb-page-section,.content-section{padding-block:40px 64px!important}
.section-heading,.hb-page-section-head,.stakes-head{display:block!important;margin-bottom:36px}
.section-heading h2,.hb-page-section-head h2,.stakes-head h2{max-width:20ch;font-size:clamp(34px,4.2vw,58px)!important}
.section-heading>p,.hb-page-section-head>p,.stakes-head>p{margin-top:16px;font-size:19px!important;max-width:52ch;color:var(--soft)}
.hb-page-below{align-items:center}

/* P1.9 Headings rise into place as they enter. CSS only; static where unsupported. */
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  main h2,.site-close h2{animation:sys-rise-h linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes sys-rise-h{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}}

/* P1.5 One icon set and calmer, richer buttons. */
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.22em;transition:transform .45s var(--ease-out)}
.button,.text-link{--nudge:4px}
.button{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-ctl);font-size:15px;font-weight:700;min-height:52px;padding-inline:24px;gap:12px;transition:color .3s,border-color .3s}
.button:before{content:'';position:absolute;inset:0;z-index:-1;background:currentColor;opacity:.12;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.button:hover{transform:none!important;box-shadow:none!important}
.button:hover:before{transform:scaleX(1)}
.button:hover .i-arrow,.text-link:hover .i-arrow{transform:translateX(var(--nudge))}
.button:hover .i-nearr,.text-link:hover .i-nearr{transform:translate(3px,-3px)}
.button--small{min-height:44px;font-size:14px}
.button--line{border:1.5px solid #1c283340}

/* P1.4 Accordions open and close with height, and a drawn plus that turns. */
details::details-content{block-size:0;overflow:hidden;transition:block-size .55s var(--ease-out),content-visibility .55s allow-discrete}
details[open]::details-content{block-size:auto}
main summary:after,.home-faq summary:after{content:''!important;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5.2 12h13.6M12 5.2v13.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5.2 12h13.6M12 5.2v13.6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .45s var(--ease-out)}
main details[open]>summary:after{transform:rotate(135deg)}
summary{font-size:18px!important;font-weight:700;padding-block:4px}
details{padding:22px 0!important}
details p{font-size:17px!important}

/* P1.7 Authored form controls. */
.field input,.field select,.field textarea{min-height:54px;border:1.5px solid #c9c6bc!important;border-radius:var(--r-ctl)!important;background:var(--sheet)!important;padding:14px 16px!important;font-size:16px!important;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)!important;box-shadow:0 0 0 4px #e5795e33}
.field select{appearance:none;background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2833' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.8 8.7l6.2 6.2 6.2-6.2'/%3E%3C/svg%3E") right 14px center/18px no-repeat!important;padding-right:44px!important}
.field label{font-size:15px!important}
.plan li:before,.tick-list li:before{content:''!important;display:inline-block;flex:none;width:18px;height:18px;margin-right:10px;vertical-align:-3px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.5 9.5 17.2 19.2 6.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.5 9.5 17.2 19.2 6.8'/%3E%3C/svg%3E") center/contain no-repeat}
.plan.focus li:before{background:#f1ab95}

/* P1.10 Flat navigation, plus a sticky action bar on phones. */
.nav{gap:30px}
.nav-link{font-size:15px!important;font-weight:650;position:relative}
.nav-link:after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav-link:hover:after,.nav-link[aria-current=page]:after{transform:scaleX(1)}
.nav-link:hover,.nav-link[aria-current=page]{color:var(--ink)!important}
.mobile-cta{display:none}
.mobile-cta[hidden]{display:none!important}
@media(max-width:959px){
  .nav.is-open{display:flex!important;flex-direction:column;align-items:stretch;gap:0}
  .nav.is-open .nav-link{padding:16px 0;font-size:20px!important;border-bottom:1px solid var(--line)}
  .nav.is-open .nav-link:after{display:none}
  .nav.is-open .button{margin-top:18px}
}
@media(max-width:760px){
  .mobile-cta{display:grid;grid-template-columns:1fr;gap:10px;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:80;padding:8px;border-radius:16px;background:#fffcf6eb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 40px #1c283333;border:1px solid var(--line)}
  .mobile-cta .button{min-height:48px;font-size:15px}
  /* Room for the floating action bar lives inside the dark footer, so nothing pale shows below it. */
  body .site-footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
  /* Keeps keyboard focus clear of the fixed action bar (WCAG 2.4.11). */
  html{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* P1.11 Footer: bigger type, three link columns. */
.site-footer{padding:80px 0 28px!important;background:var(--night)!important}
.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr!important;gap:48px!important}
.footer-brand .wordmark{font-size:32px}
.footer-brand p{font-size:16px!important;max-width:34ch!important;line-height:1.6!important;margin-top:20px!important}
.footer-links h3{font-family:var(--mono)!important;font-size:13px!important;letter-spacing:.12em!important;text-transform:uppercase;font-weight:600!important;margin-bottom:16px!important}
.footer-links a{font-size:16px!important;padding:6px 0!important}
.footer-bottom{font-size:14px!important;margin-top:56px!important}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr!important}.footer-brand{grid-column:1/-1}}

/* P1.6 One deep chapter per page. */
.chapter-night{background:var(--night);color:var(--paper)}
.chapter-night h2,.chapter-night h3{color:var(--paper)}
.chapter-night p{color:#b9c6cd}

/* Closing band */
.site-close{padding-block:96px!important}
.site-close h2{font-size:clamp(36px,4.4vw,60px)!important;max-width:18ch}
.site-close p{font-size:18px!important;max-width:46ch}

/* Spine origin on supporting pages */
.spine-origin{fill:var(--ink)}

@media(max-width:900px){:root{--section:72px}.page-hero{padding:48px 0 24px!important}.page-hero .intro{font-size:18px!important}.site-close{padding-block:64px!important}}

/* ===================== P1: page by page (ROADMAP P1.13 to P1.25) ===================== */

/* Shared: numbered line steps. The number sits on a ruled line that reads as the phone line. */
.steps-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative}
.steps-line:before{content:'';position:absolute;left:0;right:0;top:19px;border-top:2px solid currentColor;opacity:.18}
.steps-line li{position:relative}
.step-n{display:block;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);position:relative;margin:12px 0 26px}
.steps-line h3{font-size:22px!important;margin-bottom:10px}
.steps-line p{font-size:16px!important;line-height:1.65}
.chapter-night .step-n{background:var(--night);border-color:#f1ab95;color:#f1ab95}
.steps-vertical{grid-template-columns:1fr;gap:0}
.steps-vertical:before{left:7px;right:auto;top:20px;bottom:20px;border-top:0;border-left:2px solid currentColor}
.steps-vertical li{padding:0 0 40px 44px}
.steps-vertical li:last-child{padding-bottom:0}
.steps-vertical .step-n{position:absolute;left:0;top:6px;margin:0}

/* Home: the setup band is the page's night chapter. */
.setup-band.chapter-night{background:var(--night)!important;padding-block:var(--section)!important}
.setup-band .setup-row{grid-template-columns:minmax(0,.8fr) minmax(0,2fr)!important;gap:64px!important}
.setup-band h2{font-size:clamp(36px,4vw,54px)!important;max-width:11ch!important}
.setup-sub{margin-top:18px;font-size:17px;max-width:30ch}
.setup-band .setup-steps h3{font-size:22px!important}
.setup-band .setup-steps p{font-size:16px!important;color:#b9c6cd!important}
.faq-aside{display:flex;flex-direction:column;align-items:flex-start}
.faq-bird{width:min(100%,420px);margin-top:36px;filter:drop-shadow(0 26px 22px #1c28331c)}
.faq-layout{grid-template-columns:1fr 1.25fr!important;align-items:start}
.faq-layout h2{font-size:clamp(36px,4vw,54px)!important}

/* How it works */
.hiw-setup{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.hiw-setup-head{position:sticky;top:120px}
.hiw-setup-head p{margin-top:16px;font-size:19px!important;max-width:34ch}
.keep-number{border-radius:var(--r-panel);padding:72px 64px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end}
.big-line{font-family:var(--display);font-stretch:108%;font-weight:800;font-size:clamp(40px,5.6vw,80px)!important;line-height:1!important;letter-spacing:-.03em;color:var(--paper)!important}
.keep-number p:not(.big-line){font-size:18px!important}
.hb-page-callmap{border-radius:var(--r-panel)!important;background:var(--night)!important;padding:56px 48px 28px!important}

/* Features: the real screen in a device frame, and six capability cards. */
.hb-tour-frame{border-radius:16px!important;border:1px solid #1c283326!important;box-shadow:0 40px 80px -30px #1c283359,0 0 0 8px #fffcf6;padding-top:38px!important;background:#e9e6de!important;position:relative}
.hb-tour-frame:before{content:'';position:absolute;top:14px;left:18px;width:10px;height:10px;border-radius:50%;background:#e5795e;box-shadow:16px 0 #d9c37a,32px 0 #9db6c8;z-index:2}
.cap-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cap-cards article{padding:28px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.cap-cards article:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px #1c283340}
.cap-cards article{border-top:3px solid var(--coral)}
.cap-cards h3{font-size:22px!important;margin-bottom:10px}
.cap-cards p{font-size:16px!important}

/* Pricing */
.plans{gap:24px!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))!important}
.plan{border-radius:var(--r-card)!important;padding:34px!important}
.plan.focus{background:var(--night)!important;box-shadow:0 40px 70px -36px #121c2599}
.plan-inclusions.chapter-night{margin-top:28px;border-radius:var(--r-panel);padding:56px 52px!important;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.plan-inclusions.chapter-night h2{font-size:clamp(32px,3.6vw,48px)!important}
.tick-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
.tick-list li{display:flex;align-items:flex-start;font-size:17px;line-height:1.45;color:var(--paper)}
.chapter-night .tick-list li:before{background:#f1ab95}
.price-note{font-size:15px!important;margin-top:22px!important}
.setup-strip{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:56px;align-items:start;padding:48px 0;border-top:1px solid var(--line)}
.strip-label{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.setup-strip h2{font-size:clamp(28px,3vw,40px)!important}
.money-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:56px;align-items:start}
.money-faq h2{font-size:clamp(28px,3vw,40px)!important}

/* Solutions: a chooser, then an honest "not yet". */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fit-card{display:flex;flex-direction:column;gap:18px;padding:44px 40px;border-radius:var(--r-panel);text-decoration:none;min-height:440px;transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.fit-card:hover{transform:translateY(-6px);box-shadow:0 40px 60px -36px #1c283366}
.fit-supplier{background:var(--peach)}
.fit-contractor{background:var(--blue)}
/* Small coral labels on peach and blue tints use a deeper coral for 4.5:1 (WCAG 1.4.3). */
.fit-label{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#a7432f}
.fit-card h2{font-size:clamp(32px,3.4vw,46px)!important;max-width:14ch}
.fit-card p{font-size:17px!important;max-width:42ch}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border-radius:999px;background:#fffcf6b3;border:1px solid #1c28331f;font-size:14px;font-weight:600}
.fit-card .text-link{margin-top:auto}
.not-fit{border:1.5px dashed #c4c3bb;border-radius:var(--r-panel);padding:48px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px 48px}
.not-fit h2{font-size:clamp(28px,3vw,40px)!important}
.not-fit>p{grid-column:2;font-size:17px!important}
.x-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.x-list li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.x-list li:before{content:'';flex:none;width:16px;height:16px;margin-top:4px;background:linear-gradient(45deg,transparent 45%,var(--soft) 45%,var(--soft) 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,var(--soft) 45%,var(--soft) 55%,transparent 55%)}

/* Contractors: a day on the tools. */
.day-line{border-radius:var(--r-panel);padding:64px 56px}
.day-head{max-width:640px;margin-bottom:48px}
.day-head h2{font-size:clamp(32px,3.8vw,52px)!important}
.day-head p{margin-top:14px;font-size:18px!important}
.day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.day:before{content:'';position:absolute;left:0;right:0;top:9px;border-top:2px solid #f1ab9566}
.day li{position:relative;padding-top:38px}
.day li:before{content:'';position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;background:var(--night);border:2.5px solid #f1ab95}
.day time{font-family:var(--mono);font-size:14px;font-weight:600;color:#f1ab95}
.day h3{font-size:19px!important;margin:10px 0 8px;line-height:1.25}
.day p{font-size:15px!important;line-height:1.55}
.tag{display:inline-block;margin-top:14px;padding:5px 10px;border-radius:999px;font-family:var(--mono);font-size:13px;font-weight:600;background:#e5795e26;color:#f6b7a4}
.tag-blue{background:#9db6c82e;color:#bcd2e0}

/* Suppliers: three calls the front desk knows. */
.vignettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vignettes article{padding:32px 30px;border-radius:var(--r-card);background:var(--night);color:var(--paper)}
.v-who{font-family:var(--mono);font-size:13px!important;letter-spacing:.1em;text-transform:uppercase;color:#f1ab95!important;font-weight:600;margin-bottom:16px}
.vignettes h3{font-size:24px!important;line-height:1.2;color:var(--paper);margin-bottom:14px}
.vignettes p:not(.v-who){font-size:16px!important;color:#b9c6cd!important}
.hb-page-switchboard{border-radius:var(--r-panel)!important;padding:56px 48px 28px!important}

/* Guides: reading progress, pull quotes, a checklist you can tick. */
.read-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--coral);transform-origin:left;transform:scaleX(0);z-index:60}
@supports (animation-timeline:scroll()){.read-progress{animation:read-grow linear both;animation-timeline:scroll(root)}@keyframes read-grow{to{transform:scaleX(1)}}}
@supports not (animation-timeline:scroll()){.read-progress{display:none}}
.pull{margin:44px 0;padding:6px 0 6px 28px;border-left:3px solid var(--coral);font-family:var(--display);font-stretch:104%;font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.checklist{list-style:none!important;padding:0!important;margin:24px 0!important;display:grid;gap:10px}
.checklist label{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:var(--sheet);border:1px solid var(--line);cursor:pointer;font-size:17px;color:var(--ink);transition:background .3s,border-color .3s}
.checklist input{appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border-radius:6px;border:2px solid var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s}
.checklist input:checked{background:var(--ink)}
.checklist input:checked:after{content:'';width:12px;height:12px;background:var(--paper);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.5 9.5 17.2 19.2 6.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.5 9.5 17.2 19.2 6.8'/%3E%3C/svg%3E") center/contain no-repeat}
.checklist label:has(input:checked){background:#e4edf0;border-color:#b6cbd4}
.checklist label:has(input:checked) span{text-decoration:line-through;text-decoration-color:#1c283366}
.body-copy{font-size:18px!important;line-height:1.75!important}
.body-copy h2{font-size:clamp(28px,3vw,38px)!important;margin:56px 0 18px!important}
.hb-page-guide-cover{border-radius:var(--r-panel)!important}

/* FAQ: grouped. */
.faq-list{max-width:860px!important}
.faq-group{margin-bottom:56px}
.faq-group h2{font-size:clamp(26px,2.8vw,36px)!important;margin-bottom:12px}
.faq-group details:first-of-type{border-top:1px solid var(--line)}
.faq-search{min-height:56px;font-size:17px!important;border-radius:var(--r-ctl)!important;border:1.5px solid #c9c6bc!important}

/* About: how we work. */
.principles{border-radius:var(--r-panel);padding:64px 56px}
.principles h2{font-size:clamp(32px,3.8vw,52px)!important;margin-bottom:40px}
.principle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.principle-grid h3{font-size:21px!important;margin-bottom:10px}
.principle-grid p{font-size:16px!important}
.hb-page-origin-bird{border-radius:var(--r-panel) var(--r-panel) 12px 12px!important}

/* Contact: two steps. */
.contact-form{border-radius:var(--r-panel)!important;padding:40px!important;box-shadow:0 40px 70px -40px #1c283340}
.form-steps{list-style:none;margin:0 0 28px;padding:0;display:flex;gap:10px;counter-reset:fs}
.form-steps li{counter-increment:fs;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;color:var(--soft)}
.form-steps li:before{content:counter(fs);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #c9c6bc;font-family:var(--mono);font-size:13px}
.form-steps li+li:before{margin-left:8px}
.form-steps li.is-current{color:var(--ink)}
.form-steps li.is-current:before{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.form-step{border:0;margin:0;padding:0;min-width:0}
.form-actions{display:flex;gap:12px;justify-content:space-between}
.form-actions .button{flex:1}
.optional{font-weight:400;color:var(--soft)}

/* Security: the three questions first. */
.owner-qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.owner-qs article{padding:32px 30px;border-radius:var(--r-card);background:var(--night);color:var(--paper)}
.owner-qs h3{font-size:24px!important;color:var(--paper);margin-bottom:14px}
.owner-qs p{font-size:16px!important;color:#b9c6cd!important}
.hb-page-datajourney{border-radius:var(--r-panel)!important;padding:48px 44px 28px!important}

/* Legal drafts: readable type only. */
.legal-copy{max-width:720px!important}
.legal-copy h2{font-size:clamp(24px,2.4vw,30px)!important;margin:44px 0 14px!important}
.legal-copy p{font-size:17px!important;line-height:1.75!important}
.callout{border-radius:14px!important;padding:20px 24px!important;font-size:16px!important}

@media(max-width:1000px){
  .day{grid-template-columns:1fr;gap:0}
  .day:before{left:6px;right:auto;top:8px;bottom:8px;border-top:0;border-left:2px solid #f1ab9566}
  .day li{padding:0 0 28px 36px}
  .day li:before{top:3px}
  .principle-grid{grid-template-columns:1fr 1fr}
  .cap-cards,.vignettes,.owner-qs{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .steps-line,.cap-cards,.vignettes,.owner-qs,.fit-grid,.principle-grid,.tick-list{grid-template-columns:1fr}
  .steps-line:not(.steps-vertical):before{display:none}
  .setup-band .setup-row,.hiw-setup,.keep-number,.plan-inclusions.chapter-night,.setup-strip,.money-faq,.not-fit{grid-template-columns:1fr!important;gap:28px!important}
  .hiw-setup-head{position:static}
  .not-fit>p{grid-column:auto}
  .keep-number,.day-line,.principles,.plan-inclusions.chapter-night,.not-fit{padding:40px 24px!important}
  .fit-card{min-height:0;padding:32px 24px}
  .faq-layout{grid-template-columns:1fr!important;gap:28px}
  .faq-bird{width:70%;margin-top:24px}
  .contact-form{padding:26px 20px!important}
}


/* ===================== B2: supplier router (clay desk, drawn cords, four desks) ===================== */
.router{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:160px;align-items:center;padding-top:8px}
.router-left{display:flex;flex-direction:column;position:relative;z-index:1}
.router-kicker{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.router-quote{display:block;margin-top:14px;text-wrap:balance;max-width:12ch;font-family:var(--display);font-stretch:106%;font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.025em;color:var(--ink)}
.router-left>p{margin-top:16px;font-size:18px;color:var(--soft);max-width:40ch}
.router-desk{position:relative;margin:24px 0 0 -12px;width:min(100%,340px)}
.router-desk img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 22px #1c283326)}

.router-cords{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.router-cord path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cord-body{stroke:#e5795e;stroke-width:11;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) calc(var(--i) * 150ms)}
.cord-ribs{stroke:#b9533b;stroke-width:11;stroke-linecap:butt!important;stroke-dasharray:2 3.6;opacity:0;transition:opacity .6s var(--ease-out) calc(var(--i) * 150ms + 1.1s)}
.cord-shine{stroke:#ffd9cc;stroke-width:2.4;opacity:0;transform:translate(-1px,-1.5px);transition:opacity .6s var(--ease-out) calc(var(--i) * 150ms + 1.1s)}
.router.is-drawn .cord-body{stroke-dashoffset:0}
.router.is-drawn .cord-ribs{opacity:.5}
.router.is-drawn .cord-shine{opacity:.55}
.router-cord--branch .cord-body{transition-delay:calc(700ms + var(--i) * 150ms)}
.router-cord--branch .cord-ribs,.router-cord--branch .cord-shine{transition-delay:calc(1.8s + var(--i) * 150ms)}
.router-hub{fill:#e5795e;stroke:var(--paper);stroke-width:4;opacity:0;transition:opacity .4s .6s;filter:drop-shadow(0 4px 6px #1c283333)}
.router.is-drawn .router-hub{opacity:1}
.router-routes{list-style:none;margin:0;padding:0 0 6px;display:grid;gap:12px;position:relative;z-index:3}
.route{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;padding:8px 20px 8px 8px;border-radius:var(--r-card);background:var(--sheet);border:1px solid var(--line);box-shadow:0 22px 34px -28px #1c283352;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),box-shadow .5s}
.router.js-ready .route{opacity:0;transform:translateX(18px)}
.router.js-ready.is-drawn .route{opacity:1;transform:none;transition-delay:calc(var(--i) * 150ms + 1300ms)}
.route:hover{box-shadow:0 26px 40px -26px #1c283366}
.route-obj{display:block;width:104px;height:104px;border-radius:14px;background:#f3ece1}
.route-obj img{width:100%;height:100%;object-fit:contain;display:block}
.route-why{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.route strong{display:block;margin-top:4px;font-family:var(--display);font-stretch:106%;font-size:24px;font-weight:750;letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.route p{margin-top:4px;font-size:15px!important;line-height:1.5;color:var(--soft)}
.router-caption{grid-column:1/-1;margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px!important;color:var(--soft)}
@media(max-width:900px){
  .router{grid-template-columns:1fr;row-gap:28px}
  .router-desk{margin:16px auto 0;width:min(70%,280px)}
  .router-cords{display:none}
  .router-routes{padding-left:30px}
  .router-routes:before{content:'';position:absolute;left:10px;top:-28px;bottom:40px;border-left:3px solid var(--coral);border-radius:2px}
  .route{position:relative}
  .route:before{content:'';position:absolute;left:-26px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--paper);border:3px solid var(--coral)}
  .router.js-ready .route{transform:translateY(14px)}
  .route{grid-template-columns:80px minmax(0,1fr);gap:12px}
  .route-obj{width:80px;height:80px}
  .route strong{font-size:21px}
}

/* ===================== B3: contractor jobsite in clay ===================== */
.jobsite{position:relative;margin-top:8px}
.jobsite-frame{position:relative;border-radius:var(--r-panel);overflow:hidden;box-shadow:0 50px 80px -50px #1c283373}
.jobsite-frame img{display:block;width:100%;height:auto}
.jobsite-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#fbf3e6f2 0%,#fbf3e6b3 26%,#fbf3e600 48%);pointer-events:none}
.jobsite-copy{position:absolute;z-index:2;left:clamp(24px,4vw,56px);top:clamp(24px,4vw,56px);max-width:min(42%,460px)}
.jobsite-copy h2{font-size:clamp(34px,4.2vw,60px)!important;text-wrap:balance}
.jobsite-copy p{margin-top:14px;font-size:18px!important;color:#3d4b55!important;max-width:30ch}
.jobsite-slip{position:absolute;z-index:3;right:clamp(16px,4vw,48px);bottom:-56px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;width:min(440px,46%);padding:14px 22px 14px 14px;border-radius:12px;background:#f7dcd3;box-shadow:0 1px 0 #e9c3b5,0 30px 50px -30px #1c283366;transform:rotate(-1.2deg)}
.jobsite-gate{display:block;width:120px;height:120px;border-radius:10px;overflow:hidden;background:#f3e3d4}
.jobsite-gate img{width:100%;height:100%;object-fit:cover;display:block}
.jobsite-slip-label{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a7432f}
.jobsite-slip strong{display:block;margin-top:6px;font-family:var(--mono);font-size:16px;line-height:1.4;color:var(--ink)}
.jobsite-slip p{margin-top:6px;font-size:15px!important;line-height:1.45;color:#6d4a3e!important}
.page-solutions-contractors .jobsite+.hb-page-below{margin-top:88px}
@media(max-width:760px){
  .jobsite-copy{position:static;max-width:none;margin-bottom:20px}
  .jobsite-frame:after{display:none}
  .jobsite-slip{position:relative;right:auto;bottom:auto;width:auto;margin:-36px 12px 0;grid-template-columns:88px minmax(0,1fr)}
  .jobsite-gate{width:88px;height:88px}
  .page-solutions-contractors .jobsite+.hb-page-below{margin-top:32px}
}

/* Spine join: a clay cord leaving an image meets the side line */
.spine-join{fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round}
.spine-node--join{stroke:var(--coral)}

/* ===================== B4: Home B-roll ===================== */
/* Stakes: a photo strip on each moment */
.moments li{padding-top:0!important;overflow:hidden}
.moment-photo{margin:0 -26px 6px;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0}
.moment-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
.moments li:hover .moment-img{transform:scale(1.03)}
.moments li:before{z-index:2}
/* Audience cards: the clay vignette fills the top of the card, the copy sits below it. */
.audience-card{position:relative;display:flex!important;flex-direction:column-reverse;justify-content:flex-end;padding:0!important;overflow:hidden;background:var(--sheet)!important;border:1px solid var(--line);box-shadow:0 30px 50px -40px #1c283359}
.audience-card>div{padding:28px 32px 32px}
.audience-img{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.audience-card:hover .audience-img{transform:scale(1.03)}
/* Setup band: the bird plugging in, on navy */
/* The plugging-in bird sits bottom-right, away from the bird beside the FAQ below. */
.setup-band .setup-row>div{grid-row:1/3}
.setup-jack{display:block;grid-column:2;justify-self:end;width:min(100%,420px);height:auto;margin:-48px -24px -40px 0}
@media(max-width:760px){.setup-band .setup-row>div{grid-row:auto}.setup-jack{grid-column:auto;justify-self:end;margin:8px -12px -24px 0}}
@media(max-width:900px){
  .audience-card>div{padding:24px}
  .moment-photo{margin:0 -26px 6px}
}

.setup-jack{width:min(100%,460px)!important}

/* ===================== B5: clay B-roll on supporting pages ===================== */
/* Page heroes with a clay image beside the title */
.page-hero.page-hero--visual:not(.page-hero--scene)>.wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.page-hero--visual h1{max-width:13ch!important}
.page-hero-media{margin:0;border-radius:var(--r-panel);overflow:hidden;box-shadow:0 50px 80px -56px #1c283366}
.page-hero-img{display:block;width:100%;height:auto}
.page-hero.page-hero--small:not(.page-hero--scene)>.wrap{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr)}
.page-hero--small .page-hero-media{border-radius:0;box-shadow:none;overflow:visible;max-width:300px;justify-self:end}
.page-hero--small .page-hero-img{filter:drop-shadow(0 22px 18px #1c283318)}

/* How it works: clay objects at each stop of the call map */
.map-prop{display:block;width:120px;height:120px;margin-bottom:6px}
.map-prop img{width:100%;height:100%;object-fit:contain;display:block}
.hb-page-callmap-middle .map-prop{width:156px;height:156px;margin:-8px 0 0 -10px}
.hb-page-callmap-end .map-prop{width:96px;height:96px;float:right;margin:-6px 0 0 12px}
.hb-page-callmap-start:after{display:none}
.keep-number{position:relative;overflow:visible!important}
.keep-visual{position:absolute;right:48px;top:-84px;width:260px;height:220px;pointer-events:none}
.keep-loop{position:absolute;right:0;top:0;width:240px;height:auto;filter:drop-shadow(0 20px 18px #00000059)}
.keep-handset{position:absolute;right:70px;top:40px;width:190px;height:auto;transform:rotate(-14deg);filter:drop-shadow(0 20px 18px #00000059)}
.keep-number .big-line{max-width:9ch}

/* Features: one band, the bird handing over the slip */
.feature-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.feature-band figure{margin:0;border-radius:var(--r-panel);overflow:hidden;box-shadow:0 50px 80px -56px #1c283366}
.feature-band img{display:block;width:100%;height:auto}
.feature-band h2{font-size:clamp(32px,3.8vw,52px)!important}
.feature-band p{margin-top:16px;font-size:19px!important;max-width:40ch}

/* Solutions: photos on the chooser cards, playbooks written on the clay binder */
.fit-card{padding:0!important;overflow:hidden;gap:0!important}
.fit-photo{display:block;aspect-ratio:16/9;overflow:hidden}
.fit-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
.fit-card:hover .fit-photo img{transform:scale(1.04)}
.fit-card>*:not(.fit-photo){margin-inline:40px}
.fit-card>.fit-label{margin-top:32px}
.fit-card>h2{margin-top:14px}
.fit-card>p{margin-top:14px}
.fit-card>.chips{margin-top:20px}
.fit-card>.text-link{margin-top:auto;padding-top:24px;margin-bottom:36px}
.binder{position:relative;display:block!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important}
.binder:after{display:none!important}
.binder-img{display:block;width:100%;height:auto}
.binder .hb-page-book-leaf{position:absolute;top:12%;bottom:18%;padding:3% 3.2% 0!important;background:none!important;border:0!important;overflow:hidden}
.binder .hb-page-book-leaf:first-of-type{left:14.8%;right:50.4%}
.binder .hb-page-book-leaf:last-of-type{left:54.8%;right:12.5%}
.binder .hb-page-book-leaf h3{font-size:clamp(24px,2.6vw,38px)!important;margin-bottom:clamp(8px,1.2vw,18px)!important;white-space:nowrap}
.binder .hb-page-book-leaf dt{font-size:clamp(14px,1.2vw,17px)!important;margin-top:clamp(8px,1.5vw,24px)!important}
.binder .hb-page-book-leaf dd{font-size:clamp(13px,1.1vw,16px)!important}

/* Guides: clay flat-lay covers, clay headers on the articles */
.cover-clay{position:relative;isolation:isolate;background:#4f7395!important;color:var(--paper)}
.cover-clay--coral{background:#e8694d!important}
.cover-clay .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.cover-clay h2,.cover-clay>span{color:var(--paper)!important}
.article-hero{margin:0 0 40px;border-radius:var(--r-panel);overflow:hidden}
.article-hero img{display:block;width:100%;height:auto}

/* About: the portrait in its cord nest */
.origin-clay{background:#efe6d9!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:24px 24px 28px}
.origin-clay:before{display:none!important}
.origin-clay img{width:min(100%,440px);height:auto;display:block}
.origin-caption{position:static!important;transform:none!important;margin-top:4px;font-family:Caveat,cursive;font-size:30px!important;font-weight:600;color:var(--accent)}

/* Contact: the bird waving, handset held out */
.contact-wave{display:block;width:min(100%,360px);height:auto;margin:24px 0 0 auto}

/* Security: clay objects at the three stops of the data diagram */
.hb-page-datajourney .map-prop{width:96px;height:96px}

/* 404 */
.nf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:64px}
.nf-grid h1{font-size:clamp(44px,6vw,84px)}
.nf-media{margin:0;border-radius:var(--r-panel);overflow:hidden}
.nf-media img{display:block;width:100%;height:auto}

@media(max-width:900px){
  .page-hero.page-hero--visual:not(.page-hero--scene)>.wrap,.feature-band,.nf-grid{grid-template-columns:1fr;gap:28px}
  .page-hero--small .page-hero-media{max-width:200px;justify-self:start}
  .keep-visual{position:relative;right:auto;top:auto;width:200px;height:150px;margin:-10px 0 10px}
  .keep-loop{width:160px}.keep-handset{width:140px;right:40px;top:20px}
  .fit-card>*:not(.fit-photo){margin-inline:24px}
  .binder .hb-page-book-leaf{position:static;padding:24px!important;background:var(--sheet)!important;border:1px solid var(--line)!important;border-radius:var(--r-card);margin-top:16px}
  .hb-page-callmap-end .map-prop{float:none;margin:0 0 6px}
}

/* Phones: the setup bird and the FAQ bird would sit back to back, so the FAQ one steps aside. */
@media(max-width:760px){.faq-bird{display:none}}

/* ===================== Mascot plan: line art for people and places ===================== */
/* Line art always sits on a pale tint, whole (never cropped), so the drawing keeps its air. */
.line-img{object-fit:contain!important;background:#e4edf0;box-sizing:border-box}
.moment-photo:has(.line-img){background:#e4edf0}
.moment-photo .line-img{padding:16px 20px}
.audience-card .line-img{aspect-ratio:16/10;padding:22px 30px}
.audience-card[href*="suppliers"] .line-img,.fit-supplier .line-img{background:#f3ddd0}
.fit-photo .line-img{padding:22px 30px}
.jobsite-gate .line-img{padding:8px}
.article-hero:has(.line-img){background:#e4edf0}
.article-hero .line-img{aspect-ratio:16/7;width:100%;height:auto;padding:20px 40px}
.cover-line{position:relative;isolation:isolate;background:#e4edf0!important;color:var(--ink)}
.cover-line--peach{background:#f3ddd0!important}
.cover-line h2,.cover-line>span{color:var(--ink)!important}
.cover-line .cover-img{position:absolute;left:8%;right:8%;bottom:60px;height:38%;width:84%;background:none!important;z-index:-1}
.page-hero--small .line-img{background:none}

.cover-line{min-height:460px!important}

/* Art that is ordered but not delivered leaves no empty frame. */
.map-prop:empty,.fit-photo:empty,.moment-photo:empty,.jobsite-gate:empty,.article-hero:empty{display:none}

/* Paired cards show their art together or not at all. */
.audiences:not(:has(.audience-card[href*="suppliers"] .audience-img)) .audience-img,
.audiences:not(:has(.audience-card[href*="contractors"] .audience-img)) .audience-img,
.fit-grid:has(.fit-photo:empty) .fit-photo,
.hb-page-library:not(:has(.cover-line--peach .cover-img)) .cover-img,
.hb-page-library:not(:has(.cover-line:not(.cover-line--peach) .cover-img)) .cover-img{display:none}

/* Line-art accents on the paper surface (no tint panel): Home FAQ, How it works setup, Demo follow-up */
.faq-note,.hiw-accent,.demo-handoff{display:block;height:auto;object-fit:contain}
.faq-note{width:min(100%,360px);margin-top:40px}
.hiw-accent{width:min(100%,360px);margin-top:36px}
.demo-handoff{width:min(100%,400px);margin-top:28px}

.page-hero--small .page-hero-media{max-width:360px!important}

/* October 28: clearer sales journey and request review. */
.hero-side .hero-assurance{grid-column:1/-1;max-width:none;margin-top:-16px;font-size:15px;color:var(--soft);line-height:1.6}
.callback-value{padding:var(--section-space,120px) 0;background:var(--paper)}
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:40px 0 32px}
.value-grid article{border-top:1px solid var(--line);padding-top:24px}
.value-grid h3{font-size:clamp(23px,2.2vw,30px);margin-bottom:16px}
.value-grid p{line-height:1.7}
.plan-review,.request-preview-note{padding:20px 24px;border:1px solid var(--line);border-radius:12px;margin:0 0 32px;line-height:1.65;font-size:15px}
.request-preview-note strong{display:block;margin-bottom:4px}
.request-actions,.faq-search-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:20px 0}
.request-summary dd{overflow-wrap:anywhere}
.request-summary{margin:24px 0}.request-summary dt{font-weight:750;font-size:14px;margin-top:18px}.request-summary dd{margin:4px 0 0;font-size:16px}
.faq-group[hidden]{display:none!important}
.mobile-cta .button{padding-inline:12px;white-space:normal;min-width:0}
.hero-top>*{min-width:0}
@media(max-width:900px){.hero-top,.hero-side{grid-template-columns:minmax(0,1fr)}.hero-side>*{min-width:0}.hero-side .actions{flex-wrap:wrap;gap:16px}.hero .eyebrow{max-width:100%;line-height:1.6}}

@media(max-width:359px){.page-solutions .page-hero h1{font-size:40px!important}}
.form-grid>*{min-width:0}.contact-form [hidden],[data-faq-clear][hidden],.contact-form[hidden]{display:none!important}
.form-actions{flex-wrap:wrap}.form-actions .button{white-space:normal}
.page-faq details[id]{scroll-margin-top:110px}
@media(max-width:900px){.hero-side .hero-assurance{margin-top:0}.value-grid{grid-template-columns:1fr;gap:28px}.callback-value{padding:72px 0}}
@media(max-width:450px){.request-actions{align-items:stretch;flex-direction:column}.request-actions .button{white-space:normal}.plan-review,.request-preview-note{padding:18px}.hero-side .hero-assurance{font-size:15px}}

/* Pricing: coherent source order and comfortable single-column cards. */
.page-pricing .plans{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:1000px){.page-pricing .plans{grid-template-columns:minmax(0,1fr)!important;max-width:640px;margin-inline:auto}.page-pricing .plan{padding:28px!important}.page-pricing .plan .for{min-height:0}.page-pricing .plan .plan-line{padding:16px 0;margin-bottom:8px}.page-pricing .plan .button{align-self:stretch}}
@media(max-width:450px){.page-pricing .plan{padding:26px 24px!important}.page-pricing .plan .price{font-size:42px}.page-pricing .plan .price small{font-size:13px}.page-pricing .plan-review{margin-bottom:24px}}

/* Call controls and owner-operated fit, using the existing type and colour system. */
.call-control{padding:32px 0 56px}.call-control .value-grid{margin-top:24px}.call-control-note{margin-top:24px;color:var(--soft);font-size:16px;line-height:1.65}.contractor-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-bottom:56px}.contractor-fit h3{font-size:clamp(23px,2.4vw,30px);margin-bottom:14px}.contractor-fit p{color:var(--soft);font-size:16px;line-height:1.75}@media(max-width:760px){.call-control{padding:24px 0 40px}.contractor-fit{grid-template-columns:1fr;gap:28px;margin-bottom:40px}}

/* Keep page-level next steps in the reading flow. */
.page-hero-actions{grid-column:1/-1;margin-top:24px;gap:20px;align-items:center}
.callback-summary{display:flex;align-items:center;justify-content:space-between;gap:40px}
.callback-summary>div{max-width:700px}
.callback-summary p{font-size:18px;line-height:1.7;color:var(--soft)}
.callback-summary>.button{flex-shrink:0}
@media(max-width:760px){.callback-summary{display:block}.callback-summary>.button{margin-top:24px}.page-hero-actions{gap:20px}.page-hero-actions .text-link{font-size:16px}}

/* No rubber-band past the top or the footer: the page never shows its canvas beyond its ends. */
html{overscroll-behavior-y:none}
/* The site cord over dark sections: the same line in light, so it reads on night as clearly as on paper. */
.spine-night .spine-line{stroke:#f3eee5;stroke-opacity:.8}
.spine-night .spine-node{fill:#10171d;stroke:#f3eee5;stroke-opacity:.9}
.spine-night .spine-origin{fill:#f3eee5}
.spine-stop-paper{stop-color:#f3eee5;stop-opacity:.8}
/* Primary buttons are coral everywhere; outline buttons stay quiet. */
.button:not(.button--line){background:var(--coral);color:var(--ink)}
/* Small line icons lead the "who we call" cards, so the cards read at a glance. */
.vg-icon{display:block;width:32px;height:32px;margin-bottom:14px;fill:none;stroke:var(--coral);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}

/* The three moments share rows on desktop, so photos, headlines and the "HollerBird takes..." lines align across cards. */
@media(min-width:901px){.moments{row-gap:0}.moments li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:14px;align-content:start}.moment-fix{margin-top:0}}

/* Going back to a field keeps it and its label clear of the sticky header (WCAG 2.4.11). */
.contact-form input,.contact-form select,.contact-form textarea{scroll-margin-top:130px}

/* Contact: the form starts on the first screen; the review note sits under it. */
.page-contact .page-hero{padding:48px 0 24px!important}

.form-plan{margin:0 0 16px;font-weight:700}

/* 404: room between the headline, the sentence and the buttons. */
.not-found h1{margin-bottom:20px}
.not-found .actions{margin-top:24px}

/* Just above the phone menu: keep the full header inside the screen. */
@media(min-width:960px) and (max-width:999px){.nav{gap:12px}.nav .button{padding-inline:14px}}