/* 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:#fbf9f7;
 --surface:#ded4ce;
 --ink:#100e0d;
 --body:#332c28;
 --muted:#5e5550;
 --line:#d8cfc9;
 --accent:#100e0d;
 --accent-hover:#3a322d;
 --on-accent:#ffffff;
 --on-dark:#ede8e4;
 --muted-dark:#b6ada7;
 --track-display:-.045em;
 --track-heading:-.035em;
 --track-sub:-.025em;
 --track-lead:-.018em;
 --track-numeral:-.055em;
 --track-mark:-.085em;
 --track-label:.1em;
 --track-label-wide:.13em;
 --ease:cubic-bezier(.16,1,.3,1);
 --dur:.18s;
 --dur-slow:.34s;
 --display:'Archivo','Roboto','Helvetica Neue',Arial,'Noto Sans',sans-serif;
 --sans:'Geist','Helvetica Neue',Arial,sans-serif;
 --label:var(--sans);
 --beat-tight:56px;
 --beat:96px;
 --beat-wide:152px;
 --ink-2:#5e5550;
 /* secondary text (Apple's #86868b, warm) */
 --field:clamp(104px,11vw,184px);
 /* the only vertical rhythm that matters now */
 --lede:clamp(21px,2.1vw,30px);
 --page-inset:96px;
 --ease-out:cubic-bezier(.16,1,.3,1);
 --motion-fast:180ms;
 --motion-settle:560ms;
 --motion-photo:800ms;
 --motion-step:45ms;
 --motion-travel:16px;
 --motion-micro:130ms;
 /* press, arrows */
 --motion-hover:180ms;
 /* colour and lift on hover */
 --motion-settle:260ms;
 /* scroll entrance, 16px travel */
 --motion-photo:380ms;
 /* portrait settle - largest element on the page */
 --ease-hover:ease;
}
@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:116px}
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}[hidden]{display:none!important}
.wrap{width:min(1280px,calc(100% - 96px));margin:auto}
.micro{font:10px/1.6 var(--label);letter-spacing:var(--track-label);text-transform:uppercase;display:block}
.mark{background:linear-gradient(transparent 62%,var(--surface) 62%,var(--surface) 94%,transparent 94%);padding:0 3px}

h1{font-size:clamp(56px,6vw,82px);font-weight:500;line-height:1.02;letter-spacing:var(--track-display)}
h2{font-size:clamp(38px,4.2vw,60px);line-height:1.1;font-weight:500;letter-spacing:var(--track-heading)}h2 em{letter-spacing:var(--track-heading)}
h3{font-size:24px;line-height:1.3;letter-spacing:var(--track-sub);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:var(--track-sub)}.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:var(--track-mark)}
.header nav{display:flex;gap:28px;font-size:13px}.header nav a{position:relative}.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease)}.header nav a:hover:after{transform:scaleX(1)}
.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 var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.button:hover{background:var(--accent-hover)}
.button.compact{padding:11px 16px;font-size:12px;gap:12px}
.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:var(--track-label);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 var(--dur) var(--ease)}.hero-copy.switching{opacity:0}
.hero h1{margin-bottom:26px}
.hero-lead{font-size:22px;line-height:1.45;letter-spacing:var(--track-lead);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)}
/* 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:var(--track-heading);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}
/* 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(--on-dark)}
.principle .micro{color:#b6ada7}.principle h2{margin:20px 0;color:var(--ground)}.principle em{color:var(--on-dark)}
.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(--on-dark);background:none;color:var(--on-dark);padding:12px 18px;font-size:12px;line-height:1.4;margin-top:23px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.card-button:hover{background:var(--on-dark);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:var(--track-heading)}
.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:var(--track-label)}
.days h4{font-size:16px;font-weight:600;letter-spacing:var(--track-sub);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:var(--track-numeral);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}
/* 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:var(--track-display);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:var(--track-label);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}
.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:var(--track-display)}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:var(--track-display)}.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}
.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}.section-heading{gap:40px}.onsite{grid-template-columns:.2fr .8fr 1.2fr;gap:20px}}
@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 .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:var(--track-display)}h1 em{letter-spacing:var(--track-display)}.hero-lead{font-size:19px}.hero-detail{font-size:15px}
.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:var(--track-heading)}h2 em{letter-spacing:var(--track-heading)}.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}
.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:var(--track-numeral)}.payment{gap:20px}.inclusions{border-top:1px solid #c6bbb4;padding-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:var(--track-display)}.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}}
@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,.brief-card h3,.offer h4,.phase-head strong,.brand-mark,.footer>span,.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,.contact-baseline,.days .d
{font-family:var(--label);font-weight:500;letter-spacing:var(--track-label-wide);
 text-transform:uppercase;font-feature-settings:'case' on}
.micro{font-size:11px;line-height:1.5}
.section-label{font-size:11px}.contact-baseline{font-size:11px}.days .d{font-size:11px;letter-spacing:.1em}
.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)}
.footer>span{font-style:normal;font-weight:400;font-size:15px}
.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 var(--dur) var(--ease),background var(--dur) var(--ease)}
.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)}
.principle em{color:var(--on-dark)}
.principle :focus-visible,.contact :focus-visible,.people-close :focus-visible{outline-color:var(--on-dark)}
.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:var(--track-label-wide);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:var(--track-lead)}
.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:var(--track-numeral)}.origin-stat strong span{font-weight:400;font-size:56px;vertical-align:top;letter-spacing:var(--track-display)}
.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}
.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}
.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)}
.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-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:var(--track-heading)}.profile-identity .underlink{font-size:12px;margin-top:22px}
.profile-story h3{font-size:32px;line-height:1.2;letter-spacing:var(--track-heading);margin-bottom:23px}
.profile-story>p{font-size:15px;color:var(--body);margin-bottom:20px}
.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}.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}}
@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:var(--track-numeral)}.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-hero{padding-block:25px 40px}.back-link{margin-bottom:35px}.people-hero h1{font-size:clamp(36px,8.9vw,58px);letter-spacing:var(--track-display)}.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-identity h2{font-size:32px}.profile-story h3{font-size:28px}.profile-story>p{font-size:14px}.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}}

/* 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-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:var(--track-sub);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}}
@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}}
@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-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-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){
 .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 var(--dur) var(--ease)}
.capture button:hover{background:#fff}
.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}}

/* ============================================================
   D2 — editorial pass. Three changes, no palette change.
   Reference measurements from inspo (real shipped sites):
     Pentagram      spacing 6/12/16/24/32/48/64/96
     Basic-Dept     spacing 7/20/60/80/90/128/180/225
     Works Studio   spacing 12/14/56/60/110/140/224
   None of them repeat one gap down the page. We were running
   padding-block:88px eight times in a row.
   ============================================================ */

/* 1. Pacing. Three beats, assigned by what each section is doing,
      so the page reads as an argument with pauses in it. */

.section{padding-block:var(--beat)}
#why{padding-block:var(--beat-wide) var(--beat)}      /* opens the argument */
#familiar{padding-block:var(--beat-tight) 112px}      /* same argument, continued */
.principle{padding-block:120px 104px}                 /* the dark band is the pause */
#path{padding-block:112px}                            /* the centrepiece */
#pricing{padding-block:var(--beat)}                   /* its surface already separates it */
#people{padding-block:112px 64px}                     /* runs straight into the questions */
.faq{padding-block:64px var(--beat-wide)}             /* air before the close */

/* 2. Headings wrap on their own now that the hand-placed <br> and the
      drop-a-weight second line are gone from everything but the two
      bookends (hero, closing CTA). Balance keeps the rag even. */
h1,h2{text-wrap:balance}
h3,h4,.hero-lead,.origin-lead,.section-heading>p,.alts-turn p{text-wrap:pretty}

/* 3. The ten-cell caption row. Three flex children with space-between
      wrapped as soon as the labels outgrew the grid (521px at 1440),
      dropping "Handover" onto its own line and out of alignment.
      Fixed columns, no wrap, labels in the numeric voice the cells
      already speak in: Define / 3 · Build / 7 · Handover. */
.week-foot{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
 gap:0;white-space:nowrap;font-size:clamp(9px,.72vw,11px);letter-spacing:.12em}
.week-foot span{min-width:0}
.week-foot span:nth-child(2){text-align:center}
.week-foot span:last-child{text-align:right}

@media(max-width:760px){
 :root{--beat-tight:28px;--beat:60px;--beat-wide:88px}
 #why{padding-block:var(--beat-wide) var(--beat)}
 #familiar{padding-block:var(--beat-tight) 64px}
 .principle{padding-block:66px}
 #path{padding-block:76px 64px}
 #pricing{padding-block:var(--beat)}
 #people{padding-block:64px 40px}
 .faq{padding-block:40px var(--beat-wide)}
 .week-foot{font-size:9px;letter-spacing:.1em}
}

/* Figures. Every number here sits in a column with another number: the ten day
   cells, the two ₹25,000 instalments, the day ranges. These must be tabular.
   Declared last because the `font:` shorthand elsewhere resets the property. */
.week-cell .n,.price,.payment strong,.payment p,.days .d,.origin-stat strong,
.phase-head strong,.section-label,.micro,.contact-baseline,.eyebrow,.hero-note
{font-variant-numeric:tabular-nums lining-nums}

/* One arrow. It was sized three times in fixed px (22 / 18 / 16) and the label
   spans then had to be patched back down to 12px to escape it. Scoped to the
   trailing glyph and sized in em, it just tracks whatever button it sits in. */
.button>span:last-child{font-size:1.5em;line-height:1}

/* ============================================================
   D3 — Apple structure, Yeezy restraint.

   Sections are full-bleed fields of flat colour, stacked in sequence.
   Separation is colour and space, never a line. Everything below that
   removes a border is removing chrome this page used to lean on:
   the ruled 4-column grid, the boxed path, the boxed onsite note,
   the ruled payment split, the ruled FAQ, the ruled baselines.

   Measured from the references:
     apple.com   body #1d1d1f on #f5f5f7 fields, nav 44px, body lh 1.47,
                 spacing relative to type (--sk-paragraph-plus-headline-
                 margin: 1.6em), radius 0/8/11/50
     teenageengineering.com   #0f0e12 on #f5f5f5, 12 col / 980px page
   Palette is unchanged: the fields are the existing ground / surface / ink.
   ============================================================ */



/* ---- fields ------------------------------------------------ */
.field{padding-block:var(--field)}
.field--paper{background:var(--ground)}
.field--bone{background:var(--surface)}
.principle,.contact{background:var(--ink);color:var(--on-dark)}
.pricing{background:var(--surface)}
.hero{padding-top:clamp(72px,8vw,132px);padding-bottom:clamp(72px,8vw,120px)}
.section{padding-block:var(--field)}
#why,#familiar,#path,#pricing,#people,.faq{padding-block:var(--field)}
.principle{padding-block:var(--field)}
body{background:var(--surface)}

/* ---- no chrome --------------------------------------------- */
.header,.alts,.alts article,.path,.phase+.phase,.onsite,.payment,.payment p,
.origin-stat,.contact-baseline,.path-foot,.brief-card,.brief-card:before,
details,summary,.capture,.alt-route,.week,.week-cell,.week-foot,
.section-heading,.equal-team,.team-person,.inclusions li,.offer,.after
{border:0!important;box-shadow:none}
.header{background:transparent;position:static;height:auto;padding:34px 0 0}
.header>*{position:relative}

/* ---- type: one ramp, display-led --------------------------- */
h1{font-size:clamp(52px,8.4vw,116px);font-weight:600;line-height:.96;
   letter-spacing:var(--track-display)}
h2{font-size:clamp(36px,5.2vw,72px);font-weight:600;line-height:1.02;
   letter-spacing:var(--track-display)}
h3{font-size:clamp(21px,2vw,30px);font-weight:600;line-height:1.14;
   letter-spacing:var(--track-heading)}
h4{font-size:19px;font-weight:600;letter-spacing:var(--track-sub)}
body{font-size:17px;line-height:1.47;color:var(--ink)}
p{color:var(--ink-2)}
h1+p,h2+p,h3+p,h2+div,h3+div{margin-top:1.6em}      /* Apple's own ratio */
.hero-lead,.origin-lead,.section-heading>p,.alts-turn p:first-child
{font-size:var(--lede);line-height:1.26;letter-spacing:var(--track-lead);color:var(--ink)}

/* ---- hero: type, then the ten-day device full width --------- */
.hero-grid{display:block;padding:0}
.hero h1{margin-bottom:.4em}
.hero-lead{max-width:22ch}
.hero-detail{font-size:17px;color:var(--ink-2);max-width:46ch;margin-top:1.1em}
.eyebrow{color:var(--ink-2);margin-bottom:2.4em}
.actions{margin-top:2.4em}
.hero-note{margin-top:1.6em;font-size:14px;color:var(--ink-2)}
.who{margin-top:2.6em;gap:26px}
.who button{font-size:14px;color:var(--ink-2)}
.who button[aria-pressed=true]{color:var(--ink)}

/* the ten cells, as flat blocks rather than a ruled table */
.week{grid-template-columns:repeat(10,1fr);margin-top:clamp(56px,6vw,96px);
 background:none;gap:2px}
.week-cell{aspect-ratio:4/5;padding:14px;background:var(--ground)}
.week-cell--define{background:#cfc3ba}
.week-cell--fri{background:var(--ink)}
.week-cell .n{font-size:12px;color:var(--ink-2)}
.week-cell--fri .n{color:var(--muted-dark)}
.week-cell .w{font-size:10px;color:var(--ink-2)}
.week-foot{margin-top:18px;padding:0;font-size:11px;color:var(--ink-2)}

/* ---- the four alternatives: columns of air, not a ruled grid - */
.alts{gap:clamp(32px,4vw,64px);margin-top:clamp(56px,6vw,96px)}
.alts article{padding:0}
.alts h3{margin:0 0 .6em}
.alts p,.alts .micro{color:var(--ink-2)}
.alts .micro{margin-bottom:1.4em}
.alts-turn{padding-top:clamp(64px,7vw,112px);gap:clamp(40px,5vw,80px)}

/* ---- the ten days: open columns ----------------------------- */
.path{margin-top:clamp(56px,6vw,96px);gap:clamp(40px,5vw,80px);
 grid-template-columns:1fr 1.6fr}
.phase{padding:0}
.phase-head{border:0;padding:0;margin-bottom:2em;display:block}
.phase-head strong{display:block;font-size:clamp(28px,3vw,44px);font-style:normal;margin-top:.2em}
.days{gap:2em}
.days p{color:var(--ink-2)}
.path-foot{padding:clamp(48px,5vw,72px) 0 0;color:var(--ink-2);font-size:14px}
.onsite{margin-top:clamp(64px,7vw,112px);padding:0;gap:clamp(32px,4vw,64px)}
.onsite p,.onsite div>span{color:var(--ink-2)}

/* ---- price ------------------------------------------------- */
.price{font-size:clamp(72px,11vw,172px);line-height:.9;margin:.24em 0 .3em}
.payment{padding:0;gap:clamp(32px,4vw,56px);margin-top:2.4em}
.payment p{padding:0}
.inclusions li{padding:.85em 0}
.upside,.capacity,.inclusions p,.after p{color:var(--ink-2)}
.offer,.after{padding:0;margin-top:2.6em}

/* ---- people: photographs edge to edge ----------------------- */
.people-preview .wrap{width:100%}
.people-preview .section-heading,.people-preview>.wrap>*:not(.equal-team)
{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.equal-team{gap:2px;margin-top:clamp(56px,6vw,96px);width:100%}
.team-photo{width:100%;height:auto;display:block}
.team-person h3{margin-top:1em}
.team-person p{color:var(--ink-2);font-size:14px}

/* ---- questions --------------------------------------------- */
.faq details{padding:0}
.faq summary{padding:1.5em 0;font-size:clamp(18px,1.6vw,22px);font-weight:500}
.faq details p{color:var(--ink-2);padding-bottom:2em;max-width:62ch}

/* ---- buttons: one ink block, hard edges, no lift ------------ */
.button{background:var(--ink);color:var(--ground);border:0;border-radius:0;
 padding:21px 30px;font-size:15px;gap:14px}
.button:hover{background:var(--accent-hover)}
.button.light{background:var(--ground);color:var(--ink)}
.button.light:hover{background:#fff}
.button.compact{padding:14px 20px;font-size:13px;background:var(--ink);color:var(--ground)}
.header .button.compact{background:var(--ink);color:var(--ground);border:0}
.header .button.compact:hover{background:var(--accent-hover);color:var(--ground)}
.card-button{border-radius:0}
.underlink{border-bottom-width:1px;padding-bottom:6px;font-size:15px}

/* ---- dark fields ------------------------------------------- */
.principle p,.contact-grid>div>p{color:#b8afaa}
.principle h2,.contact h2{color:var(--on-dark)}
.brief-card{padding:0;margin-top:0}
.contact h2{font-size:clamp(46px,7.4vw,108px);line-height:.98}
.contact{padding:var(--field) 0 0}
.contact-grid{padding:0 0 var(--field)}
.contact-baseline{padding:2em 0;color:#8d8480}
.footer{padding-block:3em}

/* ---- D3 corrections ---------------------------------------- */
/* Header sits in the content column like everything else. */
.header{width:min(1280px,calc(100% - 96px));margin-inline:auto;padding:34px 0 0;gap:32px}
.header nav{font-size:14px}
.header nav a:after{display:none}
.header nav a:hover{color:var(--ink-2)}

/* The checklist marker needs its gutter back after the rule came off. */
.inclusions ul{margin:1.6em 0 0}
.inclusions li{padding:.85em 0 .85em 30px;font-size:16px;color:var(--ink)}
.inclusions li:before{top:.85em}
.inclusions h3{font-size:clamp(19px,1.7vw,24px)}

/* Two boxes survived the strip: the offer card and the dark corner fold. */
.offer{background:none;padding:0;margin-top:3em}
.offer h4{font-size:clamp(22px,2vw,30px);margin:.5em 0}
.offer p,.after p{font-size:16px}
.after{padding-top:0;margin-top:3em}
.brief-card:before{display:none}

/* Hero measure: 22ch fought the display size. */
.hero-lead{max-width:30ch}
.hero-detail{max-width:52ch}

/* Supporting copy should hang off the headline's baseline, not float above it. */
.section-heading{align-items:end;gap:clamp(40px,5vw,80px)}
.section-heading>p,.section-heading>div{padding-bottom:.35em}
.people-preview .section-heading>div>p{font-size:17px;color:var(--ink-2)}

/* Photographs run the full width; their captions stay in the column. */
.equal-team{gap:2px}
.team-person h3{margin-top:.9em;font-size:clamp(18px,1.6vw,22px)}
.team-person p{margin-top:.5em}
.equal-team .team-person:first-child{padding-left:0}

/* The faq's two columns now live inside the field's wrap, not on the section. */
.faq{display:block}
.faq>.wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px)}
.faq h2{margin:.4em 0 .8em}
.faq .underlink{font-size:15px}
.faq summary{padding-right:44px}
.faq summary:after{top:1.5em}
@media(max-width:900px){.faq>.wrap{grid-template-columns:1fr;gap:32px}}

/* Accordion marker centres on its row rather than hanging from a fixed top. */
.faq summary{position:relative}
.faq summary:after{top:50%;transform:translateY(-50%);font-size:26px;font-weight:300}

/* The people page keeps its original layout: the field system was an
   index-page decision and restructuring this page was not asked for. */

@media(max-width:900px){
 /* Ten across only works when there is width for it. */
 .week{grid-template-columns:repeat(5,1fr)}
 .week-cell{aspect-ratio:1/1;padding:11px}
}
@media(max-width:760px){
 .header{width:calc(100% - 40px);padding-top:22px;gap:14px;flex-wrap:nowrap}
 .header .button.compact{white-space:nowrap;padding:12px 14px;font-size:12px}
 .header .button.compact .long{display:none}
 .header .button.compact .short{display:inline}
 .hero{padding-top:56px;padding-bottom:64px}
 .wrap{width:calc(100% - 40px)}
 .people-preview .section-heading,.people-preview>.wrap>*:not(.equal-team){width:calc(100% - 40px)}
 .path{grid-template-columns:1fr}
 .week-cell .w{display:none}
}

/* One ramp means one ramp. These were per-section size patches from when every
   section had its own header treatment; they now cap the display type. */
.origin h2,.price-grid h2
{font-size:clamp(36px,5.2vw,72px);line-height:1.02;letter-spacing:var(--track-display);max-width:none}
.origin h2{max-width:14ch}
dialog h2{font-size:clamp(28px,3.2vw,44px);line-height:1.05}
h2{font-weight:600}

/* The portraits are colour files greyed by CSS, so the browser's native drag
   ghost renders the original in colour. They are not draggable content. */
.team-photo,.profile-photo,.person-photo,img{-webkit-user-drag:none;user-drag:none}

/* Leftover hairline on the first field, missed by the strip list. */
.origin,.origin-stat{border:0}

/* The day gutter was a fixed 44px column, so "Days 5 and 6" broke onto three
   ragged lines and threw the labels off their headings. Sized to the longest
   label, set on one line, and baseline-aligned with the heading beside it. */
.days li{grid-template-columns:78px 1fr;gap:20px;align-items:baseline}
.days .d{white-space:nowrap;padding-top:0;font-size:11px;line-height:1.3;
 letter-spacing:.11em;color:var(--ink-2)}
.days h4{margin-bottom:.35em}
.days li>div{min-width:0}

@media(max-width:760px){
 /* A 78px gutter leaves 237px of a 335px column. Stack the label instead. */
 .days li{grid-template-columns:1fr;gap:.45em}
 .days .d{font-size:10px}
 .days{gap:2.2em}
 .phase+.phase{margin-top:3em}
 :root{--field:76px}
 .hero{padding-top:44px;padding-bottom:56px}
 h1{font-size:clamp(40px,11vw,52px);line-height:1}
 h2{font-size:clamp(32px,8.6vw,40px);line-height:1.04}
 h3{font-size:20px}
 .hero-lead,.origin-lead,.section-heading>p{font-size:19px;line-height:1.3}
 .hero-detail,body,p{font-size:16px}
 .price{font-size:clamp(56px,17vw,72px)}
 .alts{gap:2.4em}
 .alts-turn{padding-top:2.6em;gap:1.6em}
 .onsite{margin-top:3em;gap:1.6em}
 .equal-team{grid-template-columns:1fr 1fr;gap:2px}
 .contact h2{font-size:clamp(38px,10vw,48px)}
 .faq summary{font-size:17px;padding:1.2em 0}
 .footer{flex-direction:column;align-items:flex-start;gap:1.2em}
}

/* Last hairline: .inclusions picked up a border-top inside the 1100px query. */
.inclusions{border:0!important}

@media(max-width:760px){
 /* Photos stay edge to edge; their captions need a gutter or the trailing
    arrow on the right-hand column hangs past the viewport. */
 .team-person h3,.team-person p{padding-inline:14px}
}

/* The caption h3 is a flex box that was shrink-to-fit at 99px, so its trailing
   arrow landed outside the box and got clipped by .team-person's overflow.
   Fill the track and let it wrap. */
.team-person h3{width:100%;flex-wrap:wrap;gap:.4em;align-items:baseline}
.team-person h3>span[aria-hidden]{flex:0 0 auto}

/* ============================================================
   Team captions.

   The photo strip is deliberately full-bleed while the rest of the page sits
   in a 1280px column, so the first and last captions - Arjun and Varun - ran
   to x:0 and x:100vw with no gutter and .team-person{overflow:hidden} (which
   clips the photo's settle overscale) cut them off.

   A caption belongs to its photo, not to the text column: each one is inset
   from its own cell, with a wider outer inset on the two edge cells so they
   breathe against the viewport. Aligning them to the content column instead
   would squeeze the outer captions to ~46px of usable width, because the
   edge cells sit almost entirely outside that column.
   ============================================================ */
.team-person h3,.team-person p{padding-inline:16px}
.equal-team>:first-child h3,.equal-team>:first-child p{padding-left:24px}
.equal-team>:last-child h3,.equal-team>:last-child p{padding-right:24px}

@media(max-width:900px){
 /* A legacy rule still laid each person out as a 72px thumbnail beside text
    (grid-template-columns:72px minmax(0,1fr)). Under the full-bleed photo
    strip that shrank the photo to 72px and left the caption 99px of a 187px
    cell. Mobile stacks exactly like desktop: photo, then caption. */
 .team-person{display:block;padding:0;border:0}
 .team-photo{width:100%;height:auto;display:block}
 .team-person h3{margin-top:.8em;min-height:0}
}

/* ============================================================
   Split-header ban (taste skill, 4.7).

   Three sections used "big headline left + small explainer paragraph right".
   The skill bans that as a default: a section should carry one focused
   message, and the explainer stacks under the headline at a readable measure.
   The people section keeps its two columns because its right side holds a
   real link, not filler prose.
   ============================================================ */
.section-heading{display:block}
.section-heading>p{max-width:min(62ch,640px);margin-top:1.1em}
/* These paragraphs render at the lede size (~21px), so 62ch alone still
   ran ~95 characters. The px cap holds the measure near 50-55. */
.people-preview .section-heading{display:grid;grid-template-columns:1.25fr 1fr;
 gap:clamp(40px,5vw,80px);align-items:end}
@media(max-width:900px){.people-preview .section-heading{display:block}
 .people-preview .section-heading>div{margin-top:1.4em}}

/* ============================================================
   Team strip returns to the content column.

   It was full-bleed (0 -> 100vw) while every other element sits inside the
   1280px column. That cropped the outer two portraits - Arjun and Varun -
   against the viewport edge, which reads as a bug rather than a decision,
   and it was the real cause behind the "names on the edge" report.

   Inside the column all five portraits are whole, the strip lines up with
   the headline above it, and captions sit flush to their own photo.
   ============================================================ */
.people-preview .wrap{width:min(1280px,calc(100% - var(--page-inset,96px)));margin-inline:auto}
.people-preview .section-heading,.people-preview>.wrap>*{width:auto;margin-inline:0}
.equal-team{width:100%;gap:clamp(12px,1.4vw,20px)}
.team-person h3,.team-person p{padding-inline:0}
.equal-team>:first-child h3,.equal-team>:first-child p{padding-left:0}
.equal-team>:last-child h3,.equal-team>:last-child p{padding-right:0}

@media(max-width:1100px){:root{--page-inset:64px}}
@media(max-width:760px){:root{--page-inset:40px}}
@media(max-width:360px){:root{--page-inset:32px}}

/* The field rhythm is an index-page decision; the people page keeps its own. */
.team-profiles{padding-block:88px}

/* ============================================================
   refinements.css merged in verbatim, in its original load order.
   Two stylesheets meant a selector could be redefined in either file
   and you had to read both to know which value won. One file now.
   ============================================================ */

/* Taste refinement: one content grid, open captions, purposeful motion. */

.wrap,.header,.people-preview .wrap{width:min(1280px,calc(100% - var(--page-inset)));margin-inline:auto}
.header{padding-top:28px;padding-bottom:24px}
.hero{padding-top:clamp(48px,6vw,88px);padding-bottom:64px}
.hero-copy{display:grid;grid-template-columns:1.15fr 1fr;column-gap:clamp(40px,8vw,128px)}
.hero-copy>*{min-width:0}
.hero .eyebrow,.hero h1{grid-column:1/-1}
.hero .eyebrow{margin-bottom:28px}
.hero h1{font-size:clamp(52px,7.6vw,106px);line-height:1.02;margin-bottom:48px;letter-spacing:-.055em}
.hero-lead{grid-column:1;grid-row:3/6;font-size:clamp(23px,2.5vw,34px);line-height:1.3;max-width:29ch;margin:0}
.hero-detail{grid-column:2;margin:0;max-width:43ch;line-height:1.6}
.hero .actions{grid-column:2;margin-top:24px}
.hero-note{grid-column:2;font-size:12px;line-height:1.6;margin-top:16px;max-width:44ch}
.who{grid-column:1/-1;margin-top:32px;gap:8px}
.who button{padding:10px 16px;border:1px solid transparent;border-radius:2px;font-size:13px}
.who button[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.who button:hover:not([aria-pressed=true]){background:#ffffff40}
.week{margin-top:48px;gap:4px}
.week-cell{aspect-ratio:auto;min-height:116px;padding:14px 12px}
.week-cell .n{font-family:var(--display);font-size:clamp(22px,2.5vw,36px);letter-spacing:-.055em;color:var(--ink)}
.week-cell .w{font-size:9px;letter-spacing:.055em}
.week-cell--fri .n{color:var(--muted-dark)}
.week-cell--fri .fri{font-size:32px}
.week-foot{margin-top:12px;font-size:10px}
.origin-stat{align-items:center;gap:24px;margin-top:48px}
.origin-stat strong{font-size:clamp(88px,10vw,144px)}
.origin-stat p{font-size:13px;max-width:18ch}
.origin-copy>p{font-size:16px;line-height:1.7}
.origin-copy .origin-lead{font-size:clamp(23px,2.5vw,34px);line-height:1.3;margin-bottom:28px}
.alts article{padding-top:20px;border-top:1px solid #100e0d30!important}
.alts p{line-height:1.7}
.phase-head{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:32px}
.days p{line-height:1.65}
.path-foot{font-size:12px;line-height:1.65}
.people-preview .section-heading{grid-template-columns:1fr 1fr}
.equal-team{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:56px}
.team-person{display:block;min-width:0;padding:0;overflow:visible}
.portrait-frame{display:block;overflow:hidden;background:var(--surface);aspect-ratio:4/5;width:100%}
.team-photo,.profile-photo{width:100%;height:100%;max-width:none;aspect-ratio:4/5;object-fit:cover;margin:0;filter:grayscale(1) contrast(1.03)}
.team-person h3{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;width:100%;min-height:0;margin:18px 0 8px;gap:8px;font-size:clamp(17px,1.7vw,23px);line-height:1.3}
.team-person h3>span{display:inline-flex;flex-shrink:0;font-size:15px}
.team-person p{margin:0;font-size:13px;line-height:1.6;overflow-wrap:break-word}
.team-person:hover h3{text-decoration:none}
.team-person:focus-visible{outline-offset:7px}
.faq details{border-bottom:1px solid var(--line)!important}
.faq summary{padding-right:44px}
.faq summary:after{content:'+'}
.faq details[open] summary:after{content:'−'}
.profile-identity .portrait-frame{max-width:340px;margin-bottom:26px}
.profile-story{align-self:center}
.profile-story>p{font-size:16px;line-height:1.75;max-width:62ch}
.people-hero{padding-top:64px}
.people-intro{line-height:1.65}
.button,.card-button,.who button{transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-settle) var(--ease-out)}
.link-arrow{transition:transform var(--motion-settle) var(--ease-out)}
.button:active,.card-button:active{transform:scale(.98)}
.underlink:hover .link-arrow,.team-person:hover .link-arrow{transform:translate(2px,-2px)}
.button:hover>span:last-child{transform:translateY(2px)}
.button>span:last-child{transition:transform var(--motion-settle) var(--ease-out)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .team-photo,.profile-photo{transition:transform var(--motion-photo) var(--ease-out)}
 .team-person:hover .team-photo,.team-person:focus-visible .team-photo{transform:scale(1.025)}
 .week-cell{transition:transform var(--motion-settle) var(--ease-out),background var(--motion-fast)}
 .week-cell:hover{transform:translateY(-2px)}
}
@media(min-width:1101px){.profile{grid-template-columns:.8fr 1.2fr;gap:100px}}
@media(max-width:1100px){
 :root{--page-inset:64px}
 .header nav{gap:16px;font-size:12px}
 .header{gap:20px}
 .week-cell{padding:12px 8px}
 .week-cell .w{font-size:8px}
 .equal-team{gap:14px}
 .profile{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px}
}
@media(max-width:900px){
 .equal-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
 .team-person h3{font-size:23px}
 .week{grid-template-columns:repeat(5,minmax(0,1fr))}
 .week-cell{min-height:108px;padding:14px}
 .week-cell .w{font-size:9px}
 .people-preview .section-heading{display:block}
 .hero-copy{column-gap:36px}
 .hero h1{font-size:clamp(52px,8vw,72px)}
}
@media(max-width:760px){
 :root{--page-inset:40px}
 html{scroll-padding-top:24px}
 .header{padding-top:20px;padding-bottom:0;gap:12px;position:relative}
 .header nav.open{position:absolute;top:calc(100% + 16px);left:0;right:0;background:var(--ground);padding:24px;z-index:5;box-shadow:0 16px 32px #100e0d14}
 .hero{padding-top:52px;padding-bottom:48px}
 .hero-copy{display:block}
 .hero .eyebrow{font-size:9px;line-height:1.7;margin-bottom:24px;max-width:36ch}
 .hero h1{font-size:clamp(40px,10.4vw,64px);line-height:1.06;margin-bottom:28px;text-wrap:initial}
 .hero-lead{font-size:22px;line-height:1.4;max-width:32ch}
 .hero-detail{font-size:15px;margin-top:20px}
 .hero .actions{margin-top:24px}
 .hero-note{margin-top:16px;font-size:12px}
 .who{margin-top:24px;gap:4px}
 .who button{padding:10px 11px;font-size:12px}
 .week{margin-top:36px}
 .week-cell{min-height:88px;padding:10px 8px}
 .week-cell .w{display:block;font-size:7px;letter-spacing:0}
 .week-cell .n{font-size:25px}
 .week-cell--fri .fri{font-size:27px}
 .week-foot{font-size:8px;letter-spacing:.08em}
 .origin-stat strong{font-size:96px}
 .origin-copy>p{font-size:15px}
 .origin-copy .origin-lead{font-size:24px}
 .equal-team{margin-top:32px;gap:28px 16px}
 .team-person h3{font-size:20px;margin-top:14px}
 .team-person p{font-size:12px;line-height:1.6}
 .profile{grid-template-columns:1fr;gap:28px}
 .profile-story>p{font-size:15px}
 .people-hero{padding-top:40px}
 .people-preview .section-heading>div>p{font-size:15px;line-height:1.65}
 .contact-baseline{flex-wrap:wrap;row-gap:16px;line-height:1.5}
}
@media(max-width:360px){:root{--page-inset:32px}.team-person h3{font-size:18px}.team-person h3>span{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep the team heading and portraits on the same content grid. */
.people-preview>.wrap>.section-heading:not(.equal-team){width:100%;margin-inline:0}

/* Shared rhythm for supporting copy, controls and section boundaries. */
html{scroll-padding-top:24px}
.principle-grid,.contact-grid{align-items:start}
.principle-grid>div>p,.brief-card p{line-height:1.65}
.brief-card h3{margin-top:0}
.people-preview .section-heading{align-items:start}
.people-preview .section-heading>div{margin-top:0}
.faq{padding-top:clamp(48px,6vw,88px)}
.button,.card-button,.menu-toggle,.who button{min-height:44px}
.underlink{line-height:1.5}
.week-cell .w{font-size:10px;letter-spacing:0}
@media(max-width:1100px) and (min-width:901px){.week-cell .w{font-size:9px}}
@media(max-width:760px){
 .people-preview .section-heading>div{margin-top:24px}
 .week-cell{padding-inline:5px}
 .week-cell .w{font-size:9px;line-height:1.2}
 .week-cell .n{font-size:23px}
 .week-foot{font-size:9px;letter-spacing:.02em}
 .hero .eyebrow{font-size:10px}
 .faq{padding-top:40px}
}

/* ---- portraits: more air, and the real colour on hover -------------------
   Two asks, nothing else touched. The grid was on a flat 20px gutter; it now
   breathes with the viewport. Hover restores the actual photograph - the files
   are colour, greyed by CSS - alongside the existing settle. */
.equal-team{gap:clamp(28px,2.6vw,44px)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .team-photo,.profile-photo{transition:transform var(--motion-photo) var(--ease-out),
   filter var(--motion-settle) var(--ease-out)}
 .team-person:hover .team-photo,.team-person:focus-visible .team-photo,
 .profile:hover .profile-photo,.profile:focus-within .profile-photo
 {filter:grayscale(0) contrast(1)}
}
@media(max-width:900px){.equal-team{gap:40px 24px}}
@media(max-width:760px){.equal-team{gap:34px 18px}}

/* ---- motion timing, per animations.dev / Emil Kowalski ------------------
   Rules applied: UI under 300ms; ease-out for entering the viewport; plain
   `ease` for hover and colour; micro-interactions 100-150ms; larger elements
   slower than small ones; duration matched to distance.

   Everything here was running on one 560ms expo curve, including presses and
   hovers, which is why interactions felt laggy rather than crisp. The expo
   curve stays for entrances only - that is what it is for.

   motion.js reads --motion-settle and --motion-photo directly, so retiming
   the tokens retimes the scroll reveals too. */

.button,.card-button,.who button
{transition:background var(--motion-micro) var(--ease-hover),
            color var(--motion-micro) var(--ease-hover),
            transform var(--motion-micro) var(--ease-hover)}
.link-arrow,.button>span:last-child
{transition:transform var(--motion-micro) var(--ease-hover)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .team-photo,.profile-photo
 {transition:transform var(--motion-photo) var(--ease-out),
             filter var(--motion-hover) var(--ease-hover)}
 .week-cell{transition:transform var(--motion-hover) var(--ease-hover),
                       background var(--motion-micro) var(--ease-hover)}
}

/* ---- framing: close the bottom-left dead zones ---------------------------
   Measured before this block: .hero-copy 508px of dead space, .contact-grid
   362px, .alts-turn 156px. In each case a short left column was top-aligned
   against a long right one, so the ink stopped early and left a hole.
   ------------------------------------------------------------------------- */

/* 1. Hero. Every row now carries both columns, and the audience switch sits
      directly under the headline it rewrites instead of 350px below it. The
      primary CTA moves out of the subordinate right column. */
@media(min-width:761px){
 .hero-copy{grid-template-rows:auto auto auto auto auto;align-items:start}
 .hero .eyebrow{grid-column:1/-1;grid-row:1}
 .hero h1{grid-column:1/-1;grid-row:2;margin-bottom:28px}
 .who{grid-column:1/-1;grid-row:3;margin:0 0 44px;justify-content:flex-start}
 .hero-lead{grid-column:1;grid-row:4;max-width:29ch}
 .hero-detail{grid-column:2;grid-row:4;max-width:43ch;align-self:start}
 .hero .actions{grid-column:1;grid-row:5;margin-top:36px}
 .hero-note{grid-column:2;grid-row:5;margin-top:36px;align-self:center;max-width:42ch}
}

/* 2. Contact: the headline sat pinned to the top of a 483px form column.
      Centring it against that mass removes the void without moving anything. */
@media(min-width:901px){
 .contact-grid{align-items:center}
}

/* 3. Same fault, smaller: a 68px heading against a 197px column. */
@media(min-width:901px){
 .alts-turn{align-items:center}
}

/* 4. The header repeated the hero's primary CTA as an identical ink block,
      so the first viewport carried the same call twice at the same weight.
      The header keeps the action, gives up the emphasis. */
.header .button.compact{background:none;color:var(--ink);
 border:1px solid #100e0d33;transition:border-color var(--motion-micro) var(--ease-hover),
 background var(--motion-micro) var(--ease-hover)}
.header .button.compact:hover{background:none;color:var(--ink);border-color:var(--ink)}

/* 5. The last two short-left/tall-right pairs, same treatment as the contact
      block: 109 vs 171 on the team heading, 202 vs 210 on the dark band.
      Gated above the breakpoints where each one stacks. */
@media(min-width:901px){
 .people-preview .section-heading{align-items:center}
 .principle-grid{align-items:center}
}

/* 6. .onsite declared three grid tracks (150 / 401 / 601px) but only has two
      children. The original markup opened with a "Why Goa?" eyebrow, which I
      removed in the eyebrow pass without re-fitting the grid - so the heading
      was squeezed into the 150px label track and 601px of the block sat empty.
      Two children, two tracks. */
@media(min-width:901px){
 /* Equal tracks, and the paragraph fills its track rather than being capped
    at 62ch - the cap left the body ending 140px short of the content column's
    right edge, breaking the same grid .path-foot above it sits on. The track
    width IS the measure here; alignment to the column wins over an ideal
    character count. */
 .onsite{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px);align-items:start}
 .onsite>div>p{max-width:none}
}

/* 7. The dark band carried a decorative "\u21b3" in its own 83px grid track,
      so above 1100px the headline started at 433 instead of 310 - indented
      123px off the column every other section sits on. Below 1100px the glyph
      is display:none and it lines up, which is why it only shows on wide
      screens. The other decorative markers came out in the eyebrow pass; this
      one is the last of them. */
.principle-grid>.section-number{display:none}
@media(min-width:901px){
}

/* 8. Selection on the dark bands was invisible: ::selection painted
      rgb(16,14,13) on a rgb(16,14,13) background. Invert it wherever the
      field is ink. */
.principle ::selection,.contact ::selection,.people-close ::selection,
.principle::selection,.contact::selection,.people-close::selection,
dialog ::selection{background:var(--on-dark);color:var(--ink)}

/* 9. .onsite: equal 596px tracks left the heading's ink ending at 569 while
      the body started at 994 - a 425px void, so the heading read as stranded
      at one end. The track is now sized to the heading itself, so there is no
      void, and the heading takes the section-level size it should have had
      (it was 22px, smaller than the 30px card headings above it). */
@media(min-width:901px){
 .onsite>h3{font-size:clamp(24px,2.2vw,32px);line-height:1.18;max-width:24ch}
 .onsite>div>p{max-width:none}
}

/* 10. .alts-turn: 494px void between the heading and the body. max-content
       would fix the void but blow the body out to a 120-character measure, so
       the fix is the heading itself - this is the section's pivot line ("build
       directly with our team") and it was set at 30px, the same size as the
       four card headings it is meant to answer. At display size it occupies
       its track and the residual gap is ordinary rag. */
@media(min-width:901px){
 .alts-turn>h3{font-size:clamp(34px,3.4vw,56px);line-height:1.08;
  letter-spacing:var(--track-display,-.045em);max-width:14ch}
}

/* ============================================================
   ONE two-column grid.

   Column 2 was starting at nine different x positions across the page -
   763 / 852 / 880 / 990 / 990 / 1023 / 1054 / 1062 / 1129 - across nine
   different gutters (40 / 65 / 76 / 80 / 80 / 80 / 90 / 96 / 100). Every
   section had invented its own split, so nothing lined up vertically even
   though each section individually sat on the content column.

   This is the segment: equal halves, one 80px gutter. Multi-column grids
   (the ten-day strip, the four alternatives, the five portraits, the day
   label gutter) are their own systems and are left alone.
   ============================================================ */
@media(min-width:901px){
 .origin-grid,.alts-turn,.principle-grid,.path,.onsite,.price-grid,
 .faq > .wrap,.contact-grid,.people-preview .section-heading
 {grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px}
 .onsite>h3{max-width:none}
}

/* .path-foot was a space-between flex, so its second sentence was pushed to
   the right edge instead of starting on the column-2 line that every other
   section's right column begins on. On the shared grid it starts exactly
   where the onsite body below it starts. */
@media(min-width:901px){
 .path-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:80px}
 .path-foot>span:last-child{text-align:left}
}

/* Profile role lines were uppercase tracked eyebrows stacked above each name -
   seven of them across three sections, where the ceiling is one. They carry
   real information, so they move below the name and read as copy. */
.profile-role{font-size:15px;line-height:1.5;color:var(--muted);margin-top:.5em;
 letter-spacing:0;text-transform:none}

/* ---- audit fixes ---------------------------------------------------------
   All four measured against the live page by an independent audit pass.
   ------------------------------------------------------------------------ */

/* 1. Body/label grey failed WCAG AA on the bone sections at 4.47:1. The
      original value was 4.99:1; the lighter one arrived in a later pass and
      was never contrast-checked. */


@media(min-width:901px){
 /* 2. The hero was the one two-column block left off the shared grid: its
       column 2 started at x=818 while the other six started at x=760. */
 .hero-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:80px}

 /* 3. The price overflowed its own grid track - 643px of ink in a 600px
       track, 43px into the gutter. Sized to the track now. */
 .price{font-size:clamp(64px,7.6vw,132px)}

 /* 4. Hero + header measured 1056px against a 900px laptop viewport, so the
       ten-day strip - the best visual on the page - fell below the fold.
       Type and rhythm tightened; no copy removed. */
 .hero{padding-top:clamp(36px,3.4vw,56px);padding-bottom:48px}
 .hero h1{font-size:clamp(46px,6.2vw,84px);margin-bottom:28px}
 .who{margin-bottom:32px}
 .hero .actions{margin-top:28px}
 .hero-note{margin-top:28px}
 .week{margin-top:clamp(32px,3.2vw,52px)}
 /* 5. Nav measured 102px against the skill's 80px cap (64-72 preferred). */
 .header{padding-top:14px;padding-bottom:12px}
 .header .brand-mark{width:42px;height:42px;font-size:21px}
}

/* ============================================================
   LAYOUT FAMILY 2 of 4 - #familiar as an index, not a card row.

   The page used one two-column family for all nine sections, six of them at
   exactly 600/600. This section becomes a numbered index: four full-width
   rows, each reading number / option / what it means. Suits the content -
   it is a directory of the four ways to get a first version built - and it
   breaks the card rhythm without inventing a new visual language.
   ============================================================ */
@media(min-width:901px){
 .alts{display:block;counter-reset:alt;margin-top:clamp(40px,4vw,64px)}
 .alts article{counter-increment:alt;display:grid;
  grid-template-columns:64px minmax(0,0.9fr) minmax(0,1.3fr);
  column-gap:clamp(24px,2.6vw,48px);align-items:baseline;
  padding:1.7em 0;border-top:1px solid var(--line)}
 .alts article:last-child{border-bottom:1px solid var(--line)}
 .alts article::before{content:counter(alt,decimal-leading-zero);
  font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.1em;
  color:var(--muted);font-variant-numeric:tabular-nums lining-nums}
 .alts h3{font-size:clamp(19px,1.6vw,24px);line-height:1.2;margin:0;
  letter-spacing:var(--track-sub)}
 .alts h3 b{display:block;font-weight:600}
 .alts h3 br{display:none}
 .alts p{margin:0;font-size:16px;line-height:1.6;max-width:62ch}
}
@media(max-width:900px){
 .alts article{padding:1.4em 0;border-top:1px solid var(--line)}
 .alts article:last-child{border-bottom:1px solid var(--line)}
}

/* ============================================================
   LAYOUT FAMILY 3 of 4 - #pricing as a stat-led band.

   The price is the single most important number on the page and it was
   sitting in one half of a 600/600 split, competing with a bullet list.
   It now runs full width as its own statement, with the supporting detail
   in a three-column band underneath. Different family, and it matches the
   content: one number, then the terms.
   ============================================================ */
@media(min-width:901px){
 .price-grid{display:block}
 .price-grid>div:first-child{display:contents}
 .price-grid h2{grid-column:auto;max-width:22ch}
 .price{font-size:clamp(96px,15vw,232px);line-height:.82;margin:.18em 0 .3em;
  letter-spacing:-.06em}
 .upside{max-width:54ch;font-size:17px}
 .payment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:80px;margin-top:3em;padding-top:2em;
  border-top:1px solid var(--line)}
 .price-grid .button{margin-top:2.4em}
 .capacity{max-width:46ch}
 .inclusions{margin-top:clamp(56px,6vw,96px);padding-top:clamp(40px,4vw,64px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:80px;align-items:start}
 .inclusions h3{grid-column:1;margin:0}
 .inclusions ul{grid-column:2;margin:0}
 .inclusions>p{grid-column:3;margin:0;font-size:15px}
 .offer,.after{grid-column:span 3;margin-top:2.6em;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:80px}
 .offer h4{grid-column:1;margin:0}
 .offer p,.after p{grid-column:2/4;margin:0}
 .offer .micro,.after .micro{grid-column:1}
}

/* ============================================================
   LAYOUT FAMILY 4 of 4 - #people as a portfolio grid.

   Its heading was the last split-header on the page: a big left headline
   with a small explainer floating right. Stacked, the section reads as one
   statement followed by the five-across portrait strip, which is already
   its own family. Four families across nine sections now.
   ============================================================ */
@media(min-width:901px){
 .people-preview .section-heading{display:block}
 .people-preview .section-heading>div{margin-top:1.4em;max-width:62ch}
 .people-preview .section-heading>div>p{font-size:17px}
 .people-preview .section-heading .underlink{margin-top:1.6em}
}

/* Tap targets under the 44px minimum on touch. The hit area is padded with a
   pseudo-element so the visual size is unchanged. */
@media(max-width:900px){
 #privacy-open,.footer button,.underlink,.alt-route a,.back-link,.brand{position:relative}
 #privacy-open::after,.footer button::after,.underlink::after,
 .alt-route a::after,.back-link::after,.brand::after
 {content:'';position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
}