/* Build by Friday — visual direction D1.
   Palette sampled from photographs in research/design/refs/ (see directions.md).
   Token names describe the material, not a colour wheel. */
:root{--ground:#ffffff;--surface:#ded4ce;--ink:#100e0d;--body:#332c28;--muted:#5e5550;--line:#cfc5be;--accent:#100e0d;--accent-hover:#3a322d;--on-accent:#ffffff;--on-dark:#ede8e4;--muted-dark:#b6ada7;--hi:#100e0d;--hi-ink:#ffffff;--display:'Archivo','Roboto','Helvetica Neue',Arial,'Noto Sans',sans-serif;--sans:'Inter','Inter Fallback','Roboto','Helvetica Neue',Arial,'Noto Sans',sans-serif;--label:var(--sans)}
@font-face{font-family:'Inter Fallback';src:local('Helvetica Neue'),local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button,input{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:var(--hi);color:var(--ink)}[hidden]{display:none!important}
.wrap{width:min(1280px,calc(100% - 96px));margin:auto}
.micro{font:10px/1.6 var(--label);letter-spacing:1px;text-transform:uppercase;display:block}
.mark{background:linear-gradient(transparent 55%,var(--hi) 55%,var(--hi) 92%,transparent 92%);padding:0 3px}

h1{font-size:clamp(56px,6vw,82px);font-weight:500;line-height:1.02;letter-spacing:-4.5px}
h2{font-size:clamp(38px,4.2vw,60px);line-height:1.1;font-weight:500;letter-spacing:-2.5px}h2 em{letter-spacing:-2px}
h3{font-size:24px;line-height:1.3;letter-spacing:-.7px;font-weight:500}
.muted{color:var(--muted)}
/* header */
.header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 40px;position:sticky;top:0;background:var(--ground);z-index:10}
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;font-size:18px;line-height:1.05;letter-spacing:-.6px}.brand b{font-weight:700}
.brand-mark{width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:var(--ground);font:italic 24px var(--display);letter-spacing:-2px}
.header nav{display:flex;gap:28px;font-size:13px}.header nav a{position:relative}.header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--ink);transition:right .2s}.header nav a:hover:after{right:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);border:1px solid var(--accent);color:#fff;padding:16px 22px;line-height:1.4;font-size:14px;transition:background .2s,transform .2s}
.button:hover{background:var(--accent-hover);transform:translateY(-2px)}.button span{font-size:22px;line-height:1}
.button.compact{padding:11px 16px;font-size:12px;gap:12px}.button.compact span{font-size:18px}
.header .button.compact{background:none;border-color:var(--ink);color:var(--ink)}
.header .button.compact:hover{background:var(--ink);color:var(--ground)}
.button .short{display:none}
.button.ink{background:var(--ink);border-color:var(--ink);color:var(--ground)}.button.ink:hover{background:#3a322d}
.button.light{background:var(--ground);color:var(--accent);border-color:var(--ground)}.button.light:hover{background:#fff}
.underlink{display:inline-flex;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--ink);padding:0 0 4px;background:none;font-size:14px}.underlink:hover{color:var(--accent);border-color:var(--accent)}
.menu-toggle{display:none}
/* Draw link arrows consistently on iOS and other platforms. */
.link-arrow{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em}
.underlink>.link-arrow{width:18px;height:18px}
.underlink>span[aria-hidden=true]{display:inline-flex;flex-shrink:0}
/* hero */
.hero{padding-top:34px}
.section-label{display:flex;justify-content:space-between;gap:24px;font:10px/1.6 var(--label);letter-spacing:1px;text-transform:uppercase}
.section-label>span:first-child{color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;padding:44px 0 40px}
.who{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;font-size:13px}
.who button{border:0;background:none;padding:6px 0;font-size:13px;line-height:1.3;color:var(--muted);border-bottom:1px solid transparent}
.who button:hover{color:var(--ink)}
.who button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.hero-copy{transition:opacity .2s ease}.hero-copy.switching{opacity:0}
.hero h1{margin-bottom:26px}
.hero-lead{font-size:22px;line-height:1.45;letter-spacing:-.4px;margin-bottom:16px;max-width:560px}
.hero-detail{font-size:15px;color:var(--body);max-width:520px;margin-bottom:28px}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-note{font-size:12px;margin:18px 0 0;color:var(--muted)}
.hero-baseline{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid var(--line);font:11px/1.5 var(--label);letter-spacing:1px;text-transform:uppercase}
/* sections */
.section{padding-block:88px}
.section-label{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:42px}.section-label>span:last-child{color:var(--muted)}
.section-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:end}.section-heading>p{font-size:15px;color:var(--body);max-width:440px}
/* familiar: alternatives */
.alts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);margin-top:44px}
.alts article{padding:30px 26px 30px 0;border-left:1px solid var(--line);padding-left:26px}.alts article:first-child{border-left:0;padding-left:0}
.alts .micro{color:var(--muted)}.alts h3{font:26px/1.15 var(--display);margin:14px 0 12px}.alts p{font-size:14px;color:var(--body)}
.alts-turn{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:40px;align-items:start}
.alts-turn h3{font-size:30px;letter-spacing:-1px;max-width:460px}.alts-turn p{font-size:16px;color:var(--body)}
/* explorer / demos */
.explorer{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;align-items:start}
.work-story h2{font-size:43px;letter-spacing:-2px}
#example-story{margin-top:26px}.work-story h3{font-size:25px;margin:12px 0 14px;max-width:380px}.work-story #example-description{color:var(--body);font-size:15px}
.scope-notes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:25px 0 16px;border-top:1px solid var(--line);padding-top:20px}
.scope-notes .micro{font-size:9px;color:var(--muted)}.scope-notes p{font-size:13px;line-height:1.6;margin-top:8px}
.demo-disclaimer{font-size:11px;line-height:1.55;color:var(--muted);max-width:390px}
.demo-shell{border:1px solid #cfc5be;background:var(--surface);box-shadow:0 18px 34px -28px #2b241fa0;position:relative}
.demo-chrome{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #cfc5be;padding:12px 18px;gap:10px;font:10px var(--label);color:#5e5550}
.demo-chrome>span:first-child{display:flex;gap:5px}.demo-chrome b{height:6px;width:6px;border-radius:50%;background:#c4bab4}
.demo-badge{font-size:8px;background:var(--hi);color:var(--ink);padding:3px 7px;letter-spacing:1px}
.demo-app{padding:26px 34px 20px;background:#fff;min-height:505px}
.app-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #eee9e6;padding-bottom:18px}
.app-nav strong{font-size:22px;font-weight:600;letter-spacing:-1px}.app-nav strong span{padding-left:4px;color:var(--ink)}.app-nav>span{font-size:9px;color:var(--muted)}
.app-intro{padding-top:27px}.app-intro .micro{font-size:8px;color:#7c726c}.app-intro h3{font:34px/1.1 var(--display);letter-spacing:-1px;margin:10px 0}.app-intro>p{font-size:11px;color:var(--muted)}
.expert{display:flex;align-items:center;gap:12px;margin-top:25px;padding-block:17px;border-block:1px solid #ece7e3}
.avatar{height:42px;width:42px;background:var(--surface);display:grid;place-items:center;font:italic 18px var(--display)}
.expert strong{display:block;font-size:12px;font-weight:500}.expert>div>span{display:block;font-size:9px;color:var(--muted)}
.pill{font-size:9px;padding:4px 8px;background:var(--surface);border-radius:20px;margin-left:auto;white-space:nowrap}
.field-label{font-size:10px;margin:18px 0 9px}.time-options{display:flex;gap:9px}
.time-options button{background:#fff;border:1px solid #d8cfc9;flex:1;padding:8px 5px;font-size:11px;min-height:36px}.time-options button[aria-pressed=true]{border-color:var(--ink);background:var(--surface)}
.demo-action{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;border:0;width:100%;padding:12px 16px;font-size:12px;margin-top:15px;min-height:44px}.demo-action:hover{background:#3a322d}
.app-foot{font-size:9px;text-align:center;color:var(--muted);margin-top:16px}
.demo-caption{display:flex;justify-content:space-between;gap:20px;font:9px/1.5 var(--label);letter-spacing:.5px;padding:14px 18px;text-transform:uppercase}
.demo-success{background:#f2ede9;padding:20px;margin-top:16px}.success-icon{font-size:18px;margin-right:7px;color:var(--hi-ink)}
.demo-success strong{font-size:14px}.demo-success p{font-size:12px;margin:8px 0 13px}.demo-success button{font-size:11px}
.job-summary{display:flex;align-items:start;gap:12px;padding:20px 0;margin-top:22px;border-block:1px solid #ece7e3}.job-summary .micro{font-size:8px}
.job-summary h4{font-size:17px;font-weight:500;letter-spacing:-.5px;margin:4px 0}.job-summary p{font-size:10px;color:var(--muted)}
.job-steps{display:flex;list-style:none;padding:0;margin:24px 0;gap:6px}.job-steps li{flex:1;border-top:3px solid #ece7e3;padding-top:10px;font-size:10px;color:var(--muted)}
.job-steps li.done,.job-steps li.active{border-color:var(--ink);color:var(--ink)}
.job-note{background:var(--ground);padding:12px;font-size:11px}.job-note .micro{font-size:8px;margin-bottom:5px}
/* dark principle */
.principle{background:var(--ink);color:var(--ground);padding:78px 0}
.principle-grid{display:grid;grid-template-columns:.16fr 1.35fr .8fr;gap:40px}
.section-number{font-size:65px;line-height:1;color:var(--hi)}
.principle .micro{color:#b6ada7}.principle h2{margin:20px 0;color:var(--ground)}.principle em{color:var(--hi)}
.principle-grid>div>p{font-size:15px;color:#d5cec9;max-width:560px}
.brief-card{border:1px solid #4a433f;padding:27px;align-self:center;position:relative}
.brief-card:before{content:'';position:absolute;top:-1px;right:-1px;width:22px;height:22px;background:linear-gradient(45deg,#4a433f 50%,var(--ink) 50%)}
.brief-card h3{font:30px/1.15 var(--display);margin:17px 0;color:var(--ground)}.brief-card p{font-size:13px;color:#d5cec9}
.card-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hi);background:none;color:var(--hi);padding:12px 18px;font-size:12px;line-height:1.4;margin-top:23px;transition:background .2s,color .2s}
.card-button:hover{background:var(--hi);color:var(--ink)}
/* ten-day path */
.path{margin-top:48px;display:grid;grid-template-columns:3fr 7fr;gap:0;border:1px solid var(--line)}
.phase{padding:30px 28px}.phase+.phase{border-left:1px solid var(--line)}
.phase-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.phase-head .micro{color:var(--ink)}.phase-head strong{font:italic 30px var(--display);letter-spacing:-1px}
.days{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.phase:last-child .days{grid-template-columns:repeat(2,1fr);gap:14px 28px}
.days li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.days .d{font:11px/1.4 var(--label);color:var(--muted);padding-top:4px;letter-spacing:.5px}
.days h4{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:3px}.days p{font-size:13px;color:var(--body)}
.days li.friday .d{color:var(--ink)}.days li.friday h4{color:var(--ink)}
.path-foot{grid-column:1/-1;border-top:1px solid var(--line);padding:18px 28px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}
.onsite{border:1px solid var(--line);padding:30px;display:grid;grid-template-columns:.3fr .8fr 1.2fr;gap:30px;margin-top:28px}
.onsite .micro{color:var(--ink)}.onsite h3{font-size:22px}.onsite p{font-size:14px;color:var(--body)}.onsite div>span{font-size:11px;display:block;margin-top:12px;color:var(--muted)}
/* pricing */
.pricing{background:var(--surface)}
.price-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:100px}
.price-grid h2{font-size:44px}
.price{font-size:76px;line-height:1.1;letter-spacing:-5px;margin:32px 0 10px;font-family:var(--display)}
.upside{font-size:14px;max-width:380px;color:var(--body)}
.payment{display:flex;gap:30px;margin:27px 0 30px}.payment p{flex:1;border-top:1px solid #c6bbb4;padding-top:12px}
.payment strong{font-size:16px;font-weight:500}.payment span{font-size:11px;display:block;color:var(--muted);margin-top:5px}
.capacity{font-size:12px;color:var(--muted);margin-top:14px;max-width:340px}
.inclusions h3{font-size:22px}.inclusions ul{list-style:none;padding:0;margin:20px 0}
.inclusions li{font-size:14px;border-bottom:1px solid #c6bbb4;padding:15px 0 15px 27px;position:relative}.inclusions li:before{content:'✓';position:absolute;left:0;color:var(--ink)}
.inclusions>p{font-size:12px;color:var(--muted)}
.offer{margin-top:28px;padding:22px;border:1px solid var(--ink);background:var(--ground)}
.offer .micro{color:var(--ink)}.offer h4{font:26px/1.15 var(--display);margin:10px 0}.offer p{font-size:13px;color:var(--body)}
.after{margin-top:28px;padding-top:23px;border-top:1px solid #c6bbb4}.after p{font-size:13px;color:var(--body);margin-top:10px}
/* team */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:45px}
.team article{border-top:1px solid var(--line);padding-top:15px}.team article>span{font:italic 34px var(--display);color:#7c726c}
.team h3{font-size:18px;margin:18px 0 7px;letter-spacing:-.5px}.team p{font-size:11px;color:var(--muted)}
.cred{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.cred article{border:1px solid var(--line);padding:22px}.cred .micro{color:var(--ink)}.cred h3{font:24px/1.15 var(--display);margin:12px 0 8px}.cred p{font-size:13px;color:var(--body)}
/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;border-top:1px solid var(--line)}
.faq h2{margin:22px 0 25px}.faq .underlink{font-size:12px}
details{border-bottom:1px solid var(--line)}details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 35px 22px 0;position:relative;font-size:15px;line-height:1.45}summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:0;top:17px;font-size:23px;color:var(--ink)}details[open] summary:after{content:'−'}
details p{font-size:14px;color:var(--body);padding-bottom:24px;padding-right:30px}
/* contact */
.contact{background:var(--accent);color:var(--ground);padding:50px 0 0}
.contact .section-label{border-color:#4a433f}.contact .section-label>span{color:var(--ground)}.contact .section-label>span:last-child{color:#c8c0bb}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;padding:10px 0 60px}
.contact h2{font-size:clamp(56px,7vw,104px);letter-spacing:-4px;line-height:1}.contact h2 em{color:var(--ground)}
.contact-grid>div{max-width:400px;align-self:center}
.contact-grid>div>p{font-size:18px;line-height:1.5;margin-bottom:22px}
.contact-note{font-size:12px;margin:14px 0 24px;color:#c8c0bb}
.alt-route{border-top:1px solid #4a433f;padding-top:20px;font-size:13px}
.alt-route a{text-decoration:underline;text-underline-offset:4px;display:inline-block;margin-top:6px}
.contact-baseline{border-top:1px solid #4a433f;display:flex;justify-content:space-between;gap:16px;font:11px var(--label);letter-spacing:1px;padding:22px 0;text-transform:uppercase}
/* footer + dialogs */
.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:30px}
.footer .brand-mark{background:var(--ink)}.footer>span{font:italic 16px var(--display);color:var(--muted)}
.footer>div{display:flex;align-items:center;gap:20px;font-size:11px;color:var(--muted)}
.footer button{background:none;border:0;padding:0;font-size:11px;text-decoration:underline}
.version{border:1px solid var(--line);padding:2px 6px;font:9px var(--label)}
.skip{position:fixed;top:-80px;left:15px;background:var(--ink);color:#fff;padding:12px 20px;z-index:100}.skip:focus{top:10px}
dialog{background:var(--ground);color:var(--ink);border:1px solid var(--ink);padding:42px;width:calc(100% - 36px);max-width:650px;max-height:85vh;overflow:auto}
dialog::backdrop{background:#100e0db8}dialog h2{font-size:38px;margin:22px 0;letter-spacing:-1.5px}dialog p{font-size:14px;margin:15px 0}dialog p a{text-decoration:underline;overflow-wrap:anywhere}
.dialog-close{position:absolute;right:15px;top:7px;font-size:28px;padding:2px 8px;border:0;background:none}
dt{font-size:14px;font-weight:600;margin-top:22px}dd{font-size:13px;color:var(--body);margin:6px 0 0}dialog .button{margin-top:10px}
@media(min-width:1500px){.hero-grid{padding-block:60px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header{padding-inline:28px;gap:20px}.header nav{gap:18px;font-size:12px}.header .button{font-size:12px;padding:10px 12px;gap:10px}
.hero-grid{gap:30px;grid-template-columns:1.3fr 1fr}h1{font-size:64px;letter-spacing:-3.5px}.hero-lead{font-size:19px}
.alts{grid-template-columns:1fr 1fr}.alts article:nth-child(3){border-left:0;padding-left:0}.alts article{border-bottom:1px solid var(--line)}.alts article:nth-child(n+3){border-bottom:0}
.explorer{gap:35px;grid-template-columns:1fr 1.2fr}.work-story h2{font-size:36px}.demo-app{padding:23px;min-height:510px}
.principle-grid{grid-template-columns:1.3fr .8fr;gap:40px}.section-number{display:none}
.path{grid-template-columns:1fr}.phase+.phase{border-left:0;border-top:1px solid var(--line)}
.price-grid{gap:50px}.price-grid h2{font-size:37px}.contact h2{font-size:56px}.team h3{font-size:16px}.section-heading{gap:40px}.onsite{grid-template-columns:.2fr .8fr 1.2fr;gap:20px}.cred{grid-template-columns:1fr}}
@media(max-width:760px){html{scroll-padding-top:82px}.wrap{width:calc(100% - 40px)}.header{height:76px;padding:0 20px;gap:14px}.brand{font-size:15px}.brand-mark{width:38px;height:38px;font-size:20px}
.header .button{margin-left:auto;font-size:12px;padding:10px 12px;gap:8px;min-height:44px;max-width:none}.header .button span{font-size:16px}
.header .button .long{display:none}.header .button .short{display:inline}
.menu-toggle{display:flex;gap:7px;font-size:11px;background:none;border:0;padding:10px 0}.menu-toggle span{font-size:14px}
.header nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--ground);padding:25px;border-bottom:1px solid var(--line)}.header nav.open{display:flex;flex-direction:column;gap:23px}
.section-label>span:last-child{display:none}.hero{padding-top:26px}
.hero-grid{grid-template-columns:1fr;gap:28px;padding:30px 0 26px}.who{gap:16px;margin-top:18px}.who button{font-size:12px}
h1{font-size:clamp(40px,9.3vw,64px);letter-spacing:-2.4px}h1 em{letter-spacing:-1.6px}.hero-lead{font-size:19px}.hero-detail{font-size:15px}
.hero-baseline{font-size:9px;gap:12px;padding:16px 0}
.section{padding-block:56px}.section-label{font-size:9px;margin-bottom:30px;padding-bottom:17px}
.section-heading{grid-template-columns:1fr;gap:20px}h2{font-size:36px;letter-spacing:-1.5px}h2 em{letter-spacing:-1.3px}.section-heading>p{font-size:14px;max-width:100%}
.alts{grid-template-columns:1fr;margin-top:28px}.alts article{border-left:0;padding:24px 0;border-bottom:1px solid var(--line)}.alts article:nth-child(n+3){border-bottom:1px solid var(--line)}.alts article:last-child{border-bottom:0}.alts h3{font-size:24px}
.alts-turn{grid-template-columns:1fr;gap:16px;padding-top:28px}.alts-turn h3{font-size:26px}
.explorer{grid-template-columns:1fr;gap:30px}.work-story h2{font-size:36px}.work-story h3{font-size:23px;max-width:100%}.demo-app{padding:23px 20px;min-height:500px}.demo-chrome{padding:12px;font-size:9px}
.principle{padding:50px 0}.principle-grid{grid-template-columns:1fr;gap:30px}.principle h2{font-size:34px}.brief-card{padding:24px}.brief-card h3{font-size:28px}
.path{margin-top:30px}.phase{padding:24px 20px}.phase-head strong{font-size:26px}.phase:last-child .days{grid-template-columns:1fr}.path-foot{flex-direction:column;gap:8px;padding:16px 20px}
.onsite{grid-template-columns:1fr;padding:24px;gap:14px}.onsite h3 br{display:none}
.price-grid{grid-template-columns:1fr;gap:38px}.price-grid h2{font-size:34px}.price{font-size:64px;letter-spacing:-3px}.payment{gap:20px}.inclusions{border-top:1px solid #c6bbb4;padding-top:28px}
.team{grid-template-columns:1fr 1fr;gap:25px 22px;margin-top:32px}.team h3{font-size:17px}.cred{grid-template-columns:1fr;gap:14px;margin-top:28px}
.faq{grid-template-columns:1fr;gap:30px}.faq h2{margin:15px 0 20px}
.contact{padding-top:34px}.contact-grid{grid-template-columns:1fr;gap:26px;padding:0 0 40px}.contact h2{font-size:52px;letter-spacing:-2.4px}.contact-grid>div>p{font-size:17px}.contact-baseline{font-size:9px;gap:10px;flex-wrap:wrap}
.footer{align-items:start;gap:20px;padding-block:25px}.footer>span{display:none}.footer>div{flex-wrap:wrap;justify-content:end;gap:10px 15px;max-width:190px;font-size:9px}
dialog{padding:30px 24px}dialog h2{font-size:30px}}
@media(max-width:360px){.header{gap:10px;padding-inline:15px}.header .button{font-size:11px;padding:10px 9px}.wrap{width:calc(100% - 32px)}h1{font-size:38px}.demo-app{padding-inline:16px}.app-nav>span{max-width:110px;text-align:right}.demo-caption{font-size:7px}.pill{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ============================================================
   DIRECTION 1 — "Lime wash & laterite dust"
   Monochrome. No chromatic accent anywhere. Hierarchy is carried
   by type scale, weight and white space (Nike/Adidas grammar).
   Ground #fff = Saligao lime wash. Surface #ded4ce = laterite dust.
   Ink #100e0d = bahi-khata iron-gall ink.
   ============================================================ */
/* type: display = Archivo (grotesque, width axis), body = Inter */
h1,h2,h3,h4,.price,.alts h3,.app-intro h3,.brief-card h3,.offer h4,.cred h3,
.phase-head strong,.brand-mark,.avatar,.team article>span,.footer>span,.demo-action,.week-cell .fri
{font-family:var(--display);font-style:normal}
h1{font-weight:800;font-stretch:107%;letter-spacing:-.045em;line-height:.96}
h2{font-weight:700;font-stretch:105%;letter-spacing:-.035em}
h3,h4{font-weight:700;letter-spacing:-.02em}
/* no italic serif anywhere: the second line of a headline drops a weight instead */
em{font-family:inherit;font-style:normal;font-weight:400;color:inherit}
h1 em{font-weight:400;font-stretch:100%;letter-spacing:-.035em;color:var(--ink)}
h2 em,h3 em,h4 em{font-weight:400;letter-spacing:inherit;color:inherit}
.contact h2 em,.principle em{color:inherit;font-weight:400}
/* labels: tracked sans in small caps, never monospace */
.micro,.section-label,.hero-baseline,.demo-caption,.contact-baseline,.version,.days .d,.demo-chrome
{font-family:var(--label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.micro{font-size:11px;line-height:1.5}
.section-label{font-size:11px}.hero-baseline{font-size:11px}.contact-baseline{font-size:11px}
.demo-caption{font-size:10px;letter-spacing:.12em}.demo-chrome{font-size:10px;letter-spacing:.1em}
.version{font-size:10px;letter-spacing:.1em}.days .d{font-size:11px;letter-spacing:.1em}
.scope-notes .micro,.app-intro .micro,.job-summary .micro,.job-note .micro{font-size:10px}
.brand-mark{font-weight:800;font-size:19px;letter-spacing:-.06em}
.price{font-weight:800;font-stretch:100%;letter-spacing:-.05em}
/* the marker is an inverted ink block, not a highlighter */
.mark{padding:0 4px}
::selection{background:var(--ink);color:var(--ground)}
/* one button shape: ink fill, or ink hairline. No colour. */
.button{background:var(--ink);border-color:var(--ink);color:var(--on-accent)}
.button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.light{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.button.light:hover{background:var(--surface);border-color:var(--surface)}
.underlink:hover{color:var(--body);border-color:var(--body)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
/* dark bands: ink, never red */
.principle{background:var(--ink);color:var(--on-dark)}
.principle h2{color:var(--on-dark)}.principle .micro{color:var(--muted-dark)}
.principle-grid>div>p{color:var(--muted-dark)}
.section-number{color:var(--on-dark);font-family:var(--display);font-weight:700}
.card-button{border-color:var(--on-dark);color:var(--on-dark)}
.card-button:hover{background:var(--on-dark);color:var(--ink)}
.contact{background:var(--ink);color:var(--on-dark)}
.contact .section-label>span{color:var(--on-dark)}
.contact .section-label>span:last-child{color:var(--muted-dark)}
.contact-note{color:var(--muted-dark)}
.demo-badge{background:var(--ink);color:var(--ground);letter-spacing:.12em;font-size:10px}
.success-icon{color:var(--ink)}
.footer>span{font-style:normal;font-weight:400;font-size:15px}
.team article>span{font-weight:700;font-style:normal;color:var(--muted)}
.avatar{font-weight:700;font-style:normal;font-size:16px}
.phase-head strong{font-weight:700;font-style:normal;letter-spacing:-.03em}

/* ---------- BRAND DEVICE: the ten-cell week ----------
   Ten cells = the ten working days. Three sit on laterite dust (Define),
   seven on lime wash (Build), and the tenth is a solid ink block reading
   FRI — the handover. It is a link to the ten-day section, so hover and
   keyboard focus both light the whole grid and invert the Friday block. */
.week{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--ink);
 background:var(--ground);width:100%;min-width:0;align-content:start;align-self:center}
.week-cell{position:relative;aspect-ratio:1/1;min-width:0;overflow:hidden;display:flex;flex-direction:column;
 justify-content:space-between;padding:10px 11px;border-right:1px solid var(--line);
 border-bottom:1px solid var(--line);transition:border-color .18s,background .18s}
.week-cell:nth-child(5n),.week-cell:last-child{border-right:0}
.week-cell:nth-child(n+6){border-bottom:0}
.week-cell .n{font:500 11px/1 var(--label);letter-spacing:.12em;color:var(--muted)}
.week-cell .w{font:400 10px/1.3 var(--label);letter-spacing:.1em;color:var(--muted);
 text-transform:uppercase}
.week-cell--define{background:var(--surface)}
.week-cell--fri{background:var(--ink);border-color:var(--ink)}
.week-cell--fri .n{color:var(--muted-dark)}
.week-cell--fri .fri{font-weight:800;font-stretch:112%;font-size:clamp(26px,3.4vw,42px);
 line-height:.86;letter-spacing:-.05em;color:var(--on-dark);margin-top:auto}
.week-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;
 border-top:1px solid var(--ink);padding:13px 12px;font:500 11px/1.4 var(--label);
 letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.week-foot span:last-child{color:var(--ink)}
.week:hover .week-cell,.week:focus-visible .week-cell{border-color:var(--ink)}
.week:hover .week-cell--fri,.week:focus-visible .week-cell--fri
{background:var(--ground);box-shadow:inset 0 0 0 2px var(--ink)}
.week:hover .week-cell--fri .fri,.week:focus-visible .week-cell--fri .fri{color:var(--ink)}
.week:hover .week-cell--fri .n,.week:focus-visible .week-cell--fri .n{color:var(--muted)}
.week:hover .week-foot span:first-child,.week:focus-visible .week-foot span:first-child{color:var(--ink)}
@media(max-width:760px){.week-cell{padding:8px 8px}.week-cell .w{display:none}
 .week-cell--fri .fri{font-size:clamp(20px,6vw,30px)}.week-foot{padding:11px 9px;font-size:10px;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){.week-cell{transition:none}}

/* D1 refinement: readable contrast, founder story, and dedicated people page. */
::selection{background:var(--ink);color:var(--ground)}
.mark{background:linear-gradient(transparent 62%,var(--surface) 62%,var(--surface) 94%,transparent 94%)}
.principle em{color:var(--on-dark)}
.principle :focus-visible,.contact :focus-visible,.people-close :focus-visible{outline-color:var(--on-dark)}
.header .button.compact .long,.header .button.compact .short{font-size:12px;line-height:1.4}
.header nav{gap:22px}.header nav [aria-current=page]{text-decoration:underline;text-underline-offset:7px}
.eyebrow{font:500 10px/1.6 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.hero{padding-bottom:30px}
.origin{border-top:1px solid var(--line)}
.origin-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:90px}
.origin h2{font-size:clamp(36px,3.7vw,52px);max-width:620px}
.origin-copy>p{font-size:15px;color:var(--body);margin-bottom:20px}
.origin-copy .origin-lead{font-size:23px;line-height:1.45;color:var(--ink);letter-spacing:-.5px}
.origin-copy .underlink{margin-top:10px}
.origin-stat{display:flex;gap:28px;align-items:center;margin-top:45px;padding-top:25px;border-top:1px solid var(--line);max-width:420px}
.origin-stat strong{font:700 88px/1 var(--display);letter-spacing:-6px}.origin-stat strong span{font-weight:400;font-size:56px;vertical-align:top;letter-spacing:-2px}
.origin-stat p{font-size:12px;color:var(--muted);line-height:1.6}
#familiar{padding-top:35px}.alts-turn>div>p+p{margin-top:15px}.alts-turn .underlink{margin-top:24px}
.example-switch{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.example-switch button{font-size:12px;min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--ground)}
.example-switch button[aria-pressed=true]{color:var(--ground);background:var(--ink);border-color:var(--ink)}
.example-switch button:hover{border-color:var(--ink)}
.people-preview .section-heading>div>p{font-size:15px;color:var(--body)}
.people-preview .section-heading>div>p+p{margin-top:14px}
.people-preview .section-heading .underlink{margin-top:22px}
.people-highlights{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px}
.person-highlight{display:flex;align-items:center;gap:24px;padding:26px 0;border-block:1px solid var(--line)}
.person-initial{display:grid;place-items:center;background:var(--surface);width:90px;height:106px;flex-shrink:0;font:700 34px var(--display);letter-spacing:-2px}
.person-highlight h3{font-size:25px;margin:8px 0}.person-highlight h3>span{font-size:20px;margin-left:14px}
.person-highlight p{font-size:12px;color:var(--muted)}.person-highlight:hover h3{text-decoration:underline;text-underline-offset:5px}
.builder-strip{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px;padding-top:28px;align-items:start}
.builder-strip>a{font-size:15px;font-weight:600}.builder-strip>a>span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:5px}.builder-strip>a:hover{text-decoration:underline}
.contact-grid>div>p.contact-note{font-size:12px;line-height:1.6}
.people-hero{padding-block:38px 60px}.back-link{display:inline-flex;font-size:12px;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:48px}
.people-hero .eyebrow{margin-bottom:22px}.people-hero h1{font-size:clamp(46px,5.9vw,82px);max-width:1150px}
.people-intro{max-width:710px;font-size:21px;line-height:1.6;color:var(--body);margin-top:28px}
.people-summary{display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.leadership{padding-top:25px}
.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:100px;overflow-wrap:anywhere;padding-block:25px 60px;scroll-margin-top:115px}
.profile+.profile{border-top:1px solid var(--line);padding-top:60px}
.profile-monogram{display:flex;align-items:end;justify-content:space-between;width:100%;max-width:340px;height:190px;background:var(--surface);padding:26px;margin-bottom:26px;font:700 88px/1 var(--display);letter-spacing:-6px}
.profile-monogram>span{font:400 12px var(--sans);letter-spacing:1px;align-self:start}
.profile-photo{display:block;width:100%;height:auto;max-width:340px;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;background:var(--surface);margin-bottom:26px;filter:grayscale(1) contrast(1.03)}

.profile-identity h2{font-size:36px;margin-top:10px;letter-spacing:-1.5px}.profile-identity .underlink{font-size:12px;margin-top:22px}
.profile-story h3{font-size:32px;line-height:1.2;letter-spacing:-1px;margin-bottom:23px}
.profile-story>p{font-size:15px;color:var(--body);margin-bottom:20px}
.credentials{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.credentials li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.credentials strong{font-weight:600}.credentials span{color:var(--muted)}
.builders{border-top:1px solid var(--line)}.builders h2{font-size:46px}
.builder-profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:42px}
.builder-profiles article{display:flex;flex-direction:column;align-items:start;scroll-margin-top:115px}
.builder-profiles h3{font-size:27px;margin:20px 0 18px}.builder-profiles p{font-size:14px;color:var(--body)}
.builder-profiles p.profile-proof{font-size:11px;border-top:1px solid var(--line);margin-top:24px;padding-top:15px;color:var(--muted);width:100%}
.builder-profiles .underlink{font-size:12px;margin-top:24px}
.people-close{background:var(--ink);color:var(--on-dark);padding-block:70px}
.people-close>.wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:center}
.people-close h2{font-size:46px;margin-top:24px}.people-close em{color:var(--on-dark)}
.people-close p{font-size:16px;color:var(--on-dark);margin-bottom:26px}.people-close .micro{color:var(--muted-dark)}
.people-return{display:block;width:fit-content;margin-top:22px;font-size:12px;text-decoration:underline;text-underline-offset:5px}
@media(max-width:1100px){.header nav{gap:14px;font-size:11px}.origin-grid{gap:45px}.origin-stat{gap:22px}.origin-stat strong{font-size:72px}.profile{gap:60px}.builder-strip{gap:18px}.person-highlight{gap:18px}.person-initial{width:65px;height:85px;font-size:26px}.person-highlight h3{font-size:21px}.people-close>.wrap{gap:50px}}
@media(max-width:900px){.header{gap:12px;padding-inline:20px}.header nav{gap:12px}.header .button.compact{padding:10px}.origin-grid{gap:35px}.origin h2{font-size:38px}.profile{gap:40px}.builder-profiles{gap:25px}}
@media(max-width:760px){.header nav{font-size:15px;gap:20px}.hero{padding-bottom:12px}.eyebrow{font-size:9px;margin-bottom:20px}.origin-grid{grid-template-columns:1fr;gap:32px}.origin h2{font-size:36px}.origin-stat{margin-top:26px;padding-top:20px;max-width:none}.origin-stat strong{font-size:68px;letter-spacing:-4px}.origin-stat strong span{font-size:40px}.origin-copy .origin-lead{font-size:21px}.origin-copy>p{font-size:14px}.origin-copy .underlink{font-size:12px;gap:8px}#familiar{padding-top:16px}.people-highlights{grid-template-columns:1fr;gap:0;margin-top:28px}.person-highlight{padding:22px 0;gap:22px}.person-highlight+.person-highlight{border-top:0}.person-initial{width:72px;height:86px}.person-highlight h3{font-size:23px}.person-highlight p{font-size:11px}.builder-strip{grid-template-columns:1fr;gap:21px}.builder-strip>a{padding-bottom:15px;border-bottom:1px solid var(--line)}.people-hero{padding-block:25px 40px}.back-link{margin-bottom:35px}.people-hero h1{font-size:clamp(36px,8.9vw,58px);letter-spacing:-2px}.people-intro{font-size:17px;margin-top:24px}.people-summary{flex-direction:column;gap:7px;margin-top:30px}.profile{grid-template-columns:1fr;gap:28px;padding-bottom:40px}.profile+.profile{padding-top:40px}.profile-monogram{height:150px;max-width:none;font-size:72px;padding:22px;margin-bottom:22px}.profile-identity h2{font-size:32px}.profile-story h3{font-size:28px}.profile-story>p{font-size:14px}.credentials li{font-size:11px;gap:12px}.builders h2{font-size:36px}.builder-profiles{grid-template-columns:1fr;gap:34px;margin-top:30px}.builder-profiles article+article{border-top:1px solid var(--line);padding-top:30px}.builder-profiles h3{margin-block:14px}.builder-profiles p.profile-proof{margin-top:18px}.builder-profiles .underlink{margin-top:18px}.people-close{padding-block:50px}.people-close>.wrap{grid-template-columns:1fr;gap:30px}.people-close h2{font-size:36px}.people-close p{font-size:14px}.header .button.compact .short{font-size:11px}.header .button.compact{padding:9px 10px}.menu-toggle{min-height:44px;align-items:center}}
@media(max-width:360px){.header{padding-inline:14px;gap:10px}.brand{gap:8px;font-size:13px}.brand-mark{width:32px;height:36px}.person-highlight{gap:14px}.person-highlight h3{font-size:21px}.credentials li{flex-direction:column;gap:3px}}

/* Equal team presentation: same treatment and original order on both pages. */
.equal-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:44px}
.team-person{display:flex;flex-direction:column;align-items:start;border-top:1px solid var(--line);padding-top:22px}
.team-initial{display:grid;place-items:center;width:100%;height:140px;background:var(--surface);font:700 40px var(--display);letter-spacing:-2px;margin-bottom:20px}
.team-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;background:var(--surface);margin-bottom:20px;filter:grayscale(1) contrast(1.03)}
.team-person h3{font-size:19px;line-height:1.35;margin-bottom:12px;letter-spacing:-.6px;min-height:52px}
.team-person h3>span{font-size:16px}.team-person p{font-size:12px;line-height:1.65;color:var(--muted)}
.team-person:hover h3{text-decoration:underline;text-underline-offset:5px}
.team-profiles{padding-top:25px}.team-profiles .profile:last-child{padding-bottom:0}
@media(max-width:1100px){.equal-team{gap:18px}.team-person h3{font-size:17px}.team-initial{height:115px;font-size:34px}}
@media(max-width:900px){.equal-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.team-person h3{font-size:22px;min-height:0}.team-initial{height:140px}}
@media(max-width:760px){
 .equal-team{grid-template-columns:1fr;gap:0;margin-top:26px}
 .team-person{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;row-gap:6px;align-content:start;padding:20px 0}
 .team-initial{grid-row:1/3;width:72px;height:72px;margin:0;font-size:28px}
 .team-photo{grid-row:1/3;width:72px;height:72px;margin:0}
 .team-person h3{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:0;font-size:22px;line-height:1.25;margin:0}
 .team-person h3>span{display:inline-flex;flex-shrink:0;font-size:18px}
 .team-person p{font-size:13px;line-height:1.5}
 .team-profiles .profile{padding-top:25px}.team-profiles .profile+.profile{padding-top:40px}
}

/* Fix: collapse people-page profiles to one column below 1100px so the bio is never pushed off-screen */
@media(max-width:1100px){.profile{grid-template-columns:1fr;gap:28px}.profile-monogram{max-width:100%;height:150px}.profile-story h3{font-size:28px}}

/* ============================================================
   QA pass — independent review, 15 Sept 2026.
   Objective layout / touch-target defects only.
   No copy, colour, font-family or team-order change.
   ============================================================ */

/* QA-1  Mobile nav panel was pinned at a hardcoded top:75px while the
   mobile header is 76px tall, hiding the header's bottom rule by 1px.
   Anchor it to the header instead. */
@media(max-width:760px){.header nav{top:100%}}

/* QA-2  Hero primary CTA sat below the fold at 360x640 and 375x667
   (Android phones: the stated primary audience). Tighten the hero's
   vertical rhythm on small screens so it is visible without scrolling. */
@media(max-width:760px){
 .hero{padding-top:18px}
 .eyebrow{margin-bottom:12px}
 .hero-grid{padding:18px 0 22px}
 .hero h1{margin-bottom:18px}
 .hero-lead{margin-bottom:12px}
 .hero-detail{margin-bottom:20px}
}

/* QA-3  Touch targets below 44px (WCAG 2.2 SC 2.5.5).
   Where a control has a real box, it grows. Where the control is an
   underlined text link whose rule must stay against the text, the visible
   box is untouched and the hit area is grown with a transparent
   out-of-flow pseudo-element, so nothing moves on the page. */
@media(max-width:1100px){
 .header nav a{position:relative}
 .header nav a:before{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
 .header .button.compact{min-height:44px}
}
@media(max-width:768px){
 .time-options button{min-height:44px}
 .card-button{min-height:44px}
 .dialog-close{min-width:44px;min-height:44px}
 .who button,.underlink,.back-link,.people-return,.alt-route a,.brand,#privacy-open{position:relative}
 .who button:before,.underlink:before,.back-link:before,.people-return:before,
 .alt-route a:before,.brand:before,#privacy-open:before
  {content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}

/* QA-4  Day labels in the ten-cell week device were clipped between 761px
   and 1100px ("Template" needed 71px in a 56px cell). */
@media(min-width:761px) and (max-width:1100px){
 .week-cell{padding:9px 4px}
 .week-cell .w{font-size:clamp(8px,1.02vw,9px);letter-spacing:.02em}
}

/* Optional email capture in the contact section. Never blocks anything:
   without JavaScript it simply opens the brief with the address prefilled. */
.capture{border-top:1px solid #4a433f;margin-top:22px;padding-top:20px}
.capture label{display:block;font-size:13px;margin-bottom:10px}
.capture-row{display:flex;gap:10px;flex-wrap:wrap}
.capture input{flex:1 1 220px;min-width:0;background:transparent;border:1px solid #4a433f;
color:inherit;padding:13px 14px;font-size:14px;border-radius:0}
.capture input::placeholder{color:#8d8480}
.capture input:focus-visible{outline:2px solid var(--ground);outline-offset:2px;border-color:var(--ground)}
.capture button{display:inline-flex;align-items:center;gap:10px;background:var(--ground);
color:var(--accent);border:1px solid var(--ground);padding:13px 20px;font-size:14px;
transition:background .2s,transform .2s}
.capture button:hover{background:#fff;transform:translateY(-2px)}
.capture .contact-note{margin:12px 0 0}
.capture[data-done] .capture-row{display:none}
@media(max-width:560px){.capture button{width:100%;justify-content:center}}