/* The bright palette: white, Nardo grey and red, with a little black. Loaded last, so each section keeps its layout and only changes color. */
body{background:#fff}
.lede,.intro-copy{color:var(--muted)}

/* Header and footer stay light. Red on Nardo is 1.01:1, so the logo and the red button only read true on white. */
.header{background:#fff;color:var(--ink);border-bottom-color:var(--hair)}
.header nav a:not(.button){color:var(--ink)}
.header nav a:not(.button):hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:6px}
.header nav a[aria-current=page]{color:var(--ink)}
.menu-toggle{color:var(--ink)}
.footer{background:var(--mist);color:var(--ink)}
.footer *{color:var(--ink)}
.footer-grid p,.footer-grid address,.footer-bottom,.footer-bottom *,.footer-grid a{color:var(--graphite)}
.footer-grid .eyebrow{color:var(--muted)}
.footer-grid h2{color:var(--ink)}
.footer-top,.footer-grid,.footer-bottom,.footer-grid>div:last-child{border-color:#11131333}
.footer .eyebrow{opacity:1}

/* Hero: bright film, dark type on the white wall at left. */
.hero{background:#fff;color:var(--ink)}
.hero-media{opacity:1}
.hero-shade{background:linear-gradient(90deg,#fffffff2 0,#ffffffd6 30%,#ffffff73 46%,#fff0 60%),linear-gradient(0deg,#ffffffd9,#fff0 15%)}
@media(min-width:1600px){.hero-content{padding-top:42px}.hero-content h1{max-width:none}.hero-media{object-position:center top}}
@media(min-width:901px){.hero-content{padding-bottom:116px}.hero-bottom button{background:#ffffffd9}}
.hero h1 em{color:var(--red)}
.hero .button.secondary{color:var(--ink);border-color:var(--ink);background:#ffffffa6}
.hero .button.secondary:hover{background:var(--ink);color:#fff}
.hero-bottom{color:var(--muted);border-top-color:#11131533}
.hero-bottom strong,.hero-bottom a{color:var(--ink)}
.hero-bottom button{color:var(--ink);border-color:#11131566}
.hero-bottom button:hover{background:var(--ink);color:#fff}
.concept-label{color:var(--muted)}
.first-move-label{color:var(--ink)}
.first-move-option{border-color:#11131540;background:#ffffffbf;color:var(--ink)}
.first-move-option:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.first-move-option[aria-pressed=true]{border-color:var(--red);background:var(--red);color:#fff}
.first-move-answer{color:var(--muted)}
.first-move-kicker{color:var(--red-dark)}
.has-choice .first-move-copy{color:var(--ink)}
/* The band is the film's own 16:9, so nothing is cropped on a phone. */
@media(max-width:900px){
 .hero-content{padding-bottom:calc(56.25vw + 76px)}
 .hero-media{height:56.25vw;object-position:center}
 .hero-shade{background:linear-gradient(180deg,#fff calc(100% - 56.25vw),#fff0 calc(100% - 56.25vw))}
 .hero-bottom{bottom:calc(56.25vw + 14px);padding-top:12px}
 .header nav{background:#fff;border-top-color:var(--hair);box-shadow:0 20px 35px #11131326}
 .header nav>a:not(.button){border-bottom-color:var(--hair)}
}

/* Receipts: the panel turns white on the Nardo band. */
.receipt-ledger{background:#fff;color:var(--ink);box-shadow:0 40px 80px -44px #11131566}
.receipt-kicker,.receipt-key,.receipt-label,.receipt-tiles small{color:var(--muted)}
.receipt-line,.receipt-ledger .text-link,.receipt-tiles a,.receipt-tiles a:hover{color:var(--ink)}
.receipt-foot{border-top-color:var(--hair)}
.receipts.is-live .receipt-tiles a{border-color:var(--hair);background:#1113150a}
.receipts.is-live .receipt-tiles a::after{background:#11131526}

.image-chip{background:#ffffffeb;color:var(--ink);border-color:#fff}

/* Calls: a white stage on a cool mist band. */
.calls-section{background:var(--mist);color:var(--ink)}
.calls-section::before{display:none}
.calls-section .section-head h2,.calls-section .eyebrow,.call-can{color:var(--ink)}
.calls-section .lede{color:var(--muted)}
.call-can li::before{background:var(--red)}
.call-tabs{background:var(--line);border-color:var(--line)}
.call-tabs button{background:#fff;color:var(--muted)}
.call-tabs button small{color:var(--muted)}
.call-tabs button:hover{background:var(--paper);color:var(--ink)}
.call-tabs button[aria-pressed=true],.call-tabs button[aria-pressed=true]:hover{background:var(--red);color:#fff}
.call-tabs button[aria-pressed=true] small{color:#fff}
.call-stage{background:#fff;border-color:var(--line);box-shadow:0 40px 80px -44px #11131359}
.call-status,.call-note{color:var(--muted)}
.call-clock b{color:var(--ink)}
.calls.is-live .call-transcript{scrollbar-color:#11131533 transparent;border-top-color:var(--hair)}
.call-say button{color:var(--nardo)}
.calls:not(.is-live) .call-say button{color:var(--ink)}
.call-say.is-said button{color:var(--muted)}
.call-say.is-now button,.call-say button:hover{color:var(--ink)}
.call-say.is-ai.is-now button span,.call-say.is-ai.is-said button span{color:var(--red-dark)}
.call-summary{background:var(--paper);border-left-color:var(--hair)}
.call-summary-head,.call-fields span,.call-sms span{color:var(--muted)}
.call-fields li{border-top-color:var(--hair)}
.call-fields strong,.call-sms p{color:var(--ink)}
.calls.is-live .call-fields li::after{background:#11131514}
.call-sms{background:#fff;box-shadow:0 0 0 1px var(--hair)}
.calls.is-live .call-sms:not(.is-on),.calls.is-live .call-result:not(.is-on){background:#1113150a;box-shadow:none}

/* After every call */
.after-funnel i,.after-guards li{background:var(--nardo)}
.after-queue button{background:var(--nardo)}

/* Growth loop */
.loop-section{background:var(--paper);color:var(--ink)}
.loop-section::before{display:none}
.loop-section .eyebrow,.loop-section .lede{color:var(--muted)}
.loop-track{stroke:#1113152e}
.loop-dash{stroke:#11131533}
.loop-core span{color:var(--muted)}
.loop-node{border-color:#11131533;background:#fff;color:var(--ink)}
.loop-node span{color:var(--red-dark)}
.loop-node:hover{border-color:var(--ink)}
.loop-node:focus-visible{outline-color:var(--ink)}
.loop-films{background:var(--mist);box-shadow:0 30px 70px -30px #11131559}
.loop-films::after{border-color:var(--hair)}
.loop-detail{border-top-color:var(--hair)}
.loop-detail-meta,.loop-signal span{color:var(--muted)}
.loop-tool{color:var(--red-dark);border-color:#e0161e66}
.loop-detail p{color:var(--muted)}
.loop-detail .loop-signal{color:var(--ink)}
.loop-guardrail{background:#fff;color:var(--ink)}
.leak{background:#fff;border-color:var(--hair)}
.leak-head .sample-label{color:var(--muted)}
.leak-label{color:var(--ink)}
.leak-track{background:#11131514}
.leak-fill{background:var(--nardo)}
.is-leak .leak-fill{background:var(--red);box-shadow:none}
.leak-flag{color:var(--red-dark);border-color:#e0161e80}
.leak-fix::before{background:var(--hair)}
.leak-step{background:#fff;border-color:#11131533;color:var(--ink)}
.leak-fix p{color:var(--muted)}
.loop-product{background:#fff;border-color:var(--hair);color:var(--ink)}
.loop-product:hover{color:var(--ink);border-color:var(--ink)}
.loop-product p{color:var(--muted)}

/* Film band */
.film-section{background:var(--nardo) var(--nardo-paint);color:#fff}
.film-section .section-head h2,.film-section .section-head em,.film-section .eyebrow,.film-section .lede{color:#fff}
.film-section .text-link,.film-section .text-link:hover{color:#fff}
.film-controlbar{background:#fff}
.film-controlbar button,.film-controlbar a{color:var(--ink)}
.film-controlbar>span{color:var(--muted)}
.film-types{color:#fff}

/* Closing: the one red band on the page. */
.closing{background:var(--red);color:#fff;border-top:0}
.closing h2,.closing h2 em,.closing .eyebrow,.closing p,.closing .founder-mini,.closing .founder-mini span,.closing .founder-mini strong{color:#fff}
.closing .button{background:#fff;border-color:#fff;color:var(--ink)}
.closing .button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.closing .button.secondary{background:transparent;border-color:#fff;color:#fff}
.closing .button.secondary:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Inner pages */
.process-dark,.values-band{background:var(--nardo) var(--nardo-paint);color:#fff}
.process-dark .section-head h2,.process-dark .section-head em,.process-dark .eyebrow{color:#fff}
.values-band p,.values-band span,.values-band h3{color:#fff}
.motion-film{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--hair)}
.motion-caption{background:#fff;color:var(--muted)}
.motion-caption button{color:var(--ink)}
.motion-badge{background:#ffffffeb;color:var(--ink);border-color:#fff}

/* /work */
.work-index{background:#fff;color:var(--ink)}
.work-index h1{color:var(--ink)}
.wi-kicker,.wi-lede,.wi-what,.wi-kind,.wi-go{color:var(--muted)}
.wi-filters button{border-color:#11131533;color:var(--ink)}
.wi-filters button span{color:var(--muted)}
.wi-filters button:hover{border-color:var(--ink);color:var(--ink)}
.wi-filters button[aria-pressed="true"]{background:var(--nardo);border-color:var(--nardo);color:#fff}
.wi-filters button[aria-pressed="true"] span{color:#fff}
.wi-list,.wi-row{border-color:var(--hair)}
.wi-name{color:var(--ink)}
.wi-domain{color:var(--ink)}
.wi-domain b{color:var(--live)}
.wi-row:hover .wi-go,.wi-row:focus-visible .wi-go{color:var(--ink)}
@media(hover:hover){.wi-list:hover .wi-row:not(:hover) .wi-name{color:var(--nardo-soft)}}
.wi-preview{box-shadow:0 40px 80px -30px #11131580,0 0 0 1px var(--hair)}
.wi-thumb{background:var(--mist);box-shadow:0 0 0 1px var(--hair)}

/* Next-move dock */
.next-move-bar{background:#ffffffeb;box-shadow:0 22px 60px #1113154d,0 0 0 1px var(--hair)}
.next-move-track{stroke:#11131526}
.next-move-count,.next-move-title{color:var(--ink)}
.next-move-kicker,.next-move-option small{color:var(--red-dark)}
.next-move-change{border-color:#11131540;color:var(--ink)}
.next-move-change:hover,.is-open .next-move-change{border-color:var(--ink);background:#11131514}
.next-move-close{color:var(--muted)}
.next-move-close:hover{color:var(--ink)}
.next-move :focus-visible{outline-color:var(--ink)}
.next-move-menu{background:#fff;border-color:var(--hair);box-shadow:0 22px 60px #1113154d}
.next-move-menu-label{color:var(--ink)}
.next-move-option{border-color:#11131533;color:var(--ink)}
.next-move-option:hover{border-color:var(--ink);background:#1113150f;color:var(--ink)}
.next-move-option[aria-pressed=true]{border-color:var(--red);background:var(--red);color:#fff}
.next-move-option[aria-pressed=true] small{color:#fff}
.next-move-change:before{border-color:var(--ink)}

/* Second pass, from the page screenshots. */
.receipt-figure,.receipt-figure *{color:var(--ink)}
.receipt-arrow{color:var(--red)}
.xray-section{background:#fff}
.calls.is-live .call-say button{color:var(--nardo)}
.calls.is-live .call-say.is-said button{color:var(--muted)}
.calls.is-live .call-say.is-now button,.calls.is-live .call-say button:hover{color:var(--ink)}
.header nav>a[aria-current]{border-color:var(--red)}
.footer.footer a:hover{color:var(--red-dark);text-decoration:underline;text-underline-offset:4px}
.closing-grid>div>p:not(.eyebrow){color:#fff}
.loop-role{color:var(--red-dark)}
.receipt-bar b{color:var(--live)}
.process-dark .journey .eyebrow{color:var(--ink)}
.brief-steps button{color:var(--muted)}
.first-move-answer{max-width:520px}
@media(max-width:900px){
 .hero-content{padding-bottom:calc(56.25vw + 150px)}
 .hero-bottom{bottom:calc(56.25vw + 16px)}
 .first-move-answer{max-width:none}
}

/* One voice for the second line: the serif turns the logo's red on light bands and white on Nardo and red. */
h1 em,h2 em,h3 em{color:var(--red)}
.film-section em,.process-dark em,.closing h2 em,.values-band em,.receipts-section h2 em,.contact-next em{color:#fff}
.process-dark .journey em{color:var(--red)}
.receipts-section,.contact-next{background:var(--nardo) var(--nardo-paint);color:#fff}

/* The email x-ray runs in daylight too: paper console, red rule, no black panel. */
.xray-console{background:var(--paper);color:var(--ink);border-top:3px solid var(--red);box-shadow:0 0 0 1px var(--hair),0 40px 80px -40px #11131340}
.xray-console-head{border-bottom-color:var(--hair);color:var(--muted)}
.xray-console-head>span:first-child{color:var(--ink)}
.xray-clock{color:var(--red-dark)}
.xray-step{border-bottom-color:var(--hair)}
.xray-no,.xray-step h3 small,.xray-pairs dt{color:var(--muted)}
.is-on .xray-no{color:var(--red-dark)}
.xray-step h3,.xray-pairs dd{color:var(--ink)}
.xray-pairs .is-flag dd{color:var(--red-dark)}
.xray-empty{color:var(--muted)}
.xray-tasks li{border-color:#11131326;color:var(--ink)}
.xray-tasks li::before{color:var(--red-dark)}
.xray-draft{background:#fff;box-shadow:0 0 0 1px var(--hair)}
.xray-edit{border-color:#1113134d;color:var(--ink)}
.xray-edit:hover:not(:disabled){border-color:var(--ink)}
.xray-done{background:var(--blush);border-color:#e0161e66}
.xray-done p{color:var(--graphite)}
.xray-done strong,.xray-done .text-link{color:var(--ink)}
.xray-picks button[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.xray-avatar{background:var(--nardo)}

/* Privacy choice: a thin bar along the bottom edge, both answers equal weight, nothing covered but the edge. */
.privacy-choice{left:0;right:0;bottom:0;width:auto;display:flex;align-items:center;justify-content:center;gap:8px 18px;padding:8px var(--gutter) max(8px,env(safe-area-inset-bottom));background:#fff;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:0 -4px 18px #1113151a}
.privacy-choice p{margin:0;font-size:13px;line-height:1.4}
.privacy-choice>div{flex:none;gap:8px}
.privacy-choice button{min-height:36px;padding:6px 14px}
@media(max-width:600px){
 .privacy-choice{flex-wrap:wrap;left:0;width:auto;bottom:0;padding:7px 12px max(7px,env(safe-area-inset-bottom))}
 .privacy-choice p{flex:1 1 100%;font-size:12.5px;text-align:center}
 .privacy-choice>div{flex:1 1 100%}
 .privacy-choice button{min-height:38px}
}

/* Hero: the two ways in sit side by side; the live work is one quiet link under the answer. */
.first-move-more{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.first-move-more:hover{color:var(--red-dark)}

/* Short laptop screens: tighten the hero so both buttons clear the privacy bar. */
@media(min-width:901px) and (max-height:820px){
 .hero-content h1{font-size:64px}
 .first-move{margin-top:20px}
 .first-move-label{margin-bottom:10px}
 .first-move-answer{min-height:calc(20px + 3.2em);margin:12px 0 14px}
}
@media(min-width:901px) and (max-height:740px){.hero-content h1{font-size:54px}}

/* Phones open on film: a tall shot edge to edge, dissolving to white under the headline. */
.calls-film{display:none}
@media(max-width:600px){
 .hero{height:auto;min-height:0;display:block}
 .hero-media{position:absolute;top:0;bottom:auto;left:0;width:100%;height:133.34vw;object-fit:cover;object-position:center top}
 .hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#fff0 0,#fff0 64vw,#ffffffd9 80vw,#fff 90vw,#fff 100%)}
 .hero-content{position:relative;padding-top:83vw;padding-bottom:20px}
 .hero-content>.eyebrow{display:none}
 .hero-content h1{font-size:clamp(30px,9.8vw,42px);line-height:1.03}
 .first-move{margin-top:12px}
 .first-move-label{margin-bottom:8px}
 .first-move-options{display:flex;flex-wrap:nowrap;gap:8px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
 .first-move-options::-webkit-scrollbar{display:none}
 .first-move-option{flex:none;scroll-snap-align:start}
 .first-move-answer{margin:10px 0 12px;font-size:14px}
 .first-move-kicker{display:inline;margin:0}
 .first-move-more{display:none}
 .first-move .button-row{gap:6px}
 .hero-bottom{position:absolute;top:calc(83vw + 3px);right:12px;bottom:auto;left:auto;width:auto;padding:0;border:0;z-index:3}
 .hero-bottom>span,.hero-bottom .concept-label,.hero-bottom a{display:none}
 .hero-bottom button{min-height:34px;padding:5px 10px;font-size:11px;background:#fff}
 .calls-section{padding-top:0}
 .calls-film{position:relative;display:block;aspect-ratio:3/4;margin-bottom:40px;overflow:hidden;background:var(--mist)}
 .calls-film img,.calls-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .calls-film video{opacity:0;transition:opacity .4s ease}
 .calls-film.is-playing video{opacity:1}
}

/* The illustrative dashboard builds itself as it scrolls in. */
.after-board.is-set .after-funnel i{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.after-board.is-set .after-funnel.is-in i{transform:none}
.after-board.is-set .after-funnel li:nth-child(2) i{transition-delay:.12s}
.after-board.is-set .after-funnel li:nth-child(3) i{transition-delay:.24s}
.after-board.is-set .after-funnel li:nth-child(4) i{transition-delay:.36s}
.after-board.is-set .after-funnel li:nth-child(5) i{transition-delay:.48s}
.after-board.is-set .after-tiles>div,.after-board.is-set .after-queue li{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.after-board.is-set .after-tiles.is-in>div,.after-board.is-set .after-queue.is-in li{opacity:1;transform:none}
.after-board.is-set .after-tiles>div:nth-child(2),.after-board.is-set .after-queue li:nth-child(2){transition-delay:.15s}
.after-board.is-set .after-queue li:nth-child(3){transition-delay:.3s}

/* Growth loop: each film sits on top of its still, inside the frame. Without this the playing film was clipped out of sight below the still. */
.loop-films .ambient-film{position:absolute;inset:0;display:block}
.loop-films .ambient-film img{position:absolute}
.loop-films .ambient-film:not(.is-screen) img,.loop-films .ambient-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loop-films .ambient-film video{opacity:0;transition:opacity .5s ease}
.loop-films .ambient-film.is-playing video{opacity:1}