/* ===== block 7 id="tactile-v34" ===== */
/* V3.4 "Quiet" home. New markup under .q; legacy .v4-* home rules no longer apply above the closing section. */
html #v-home{background:#F6F3EE}
html #v-home .q{--ink:#1B1A18;--mute:#77726A;--rule:#DCD6CC;color:var(--ink);font:400 16px/1.65 Inter,Arial,sans-serif;padding:0 clamp(22px,6.5vw,112px)}
html #v-home .q *{box-sizing:border-box}
html #v-home .q p{margin:0 0 1em;max-width:34em}
html #v-home .q img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transform:none}
html #v-home .q figure{margin:0}
html #v-home .q figcaption,html #v-home .q .q-label,html #v-home .q .q-note{font-size:12.5px;line-height:1.5;color:var(--mute);letter-spacing:0;text-transform:none;font-weight:400}
html #v-home .q figcaption{margin-top:10px}
html #v-home .q .q-label{margin:0 0 18px}
html #v-home .q .q-note{max-width:46em}
html #v-home .q h1,html #v-home .q h2{margin:0;font-family:Inter,Arial,sans-serif;font-weight:400;color:var(--ink);letter-spacing:-.03em;text-wrap:balance}
html #v-home .q h1{font-size:clamp(34px,3.7vw,56px);line-height:1.07;max-width:11em}
html #v-home .q h2{font-size:clamp(26px,2.5vw,38px);line-height:1.15;max-width:16em;margin-bottom:clamp(24px,2.6vw,40px)}
html #v-home .q .q-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;font-size:14px}
html #v-home .q .q-link:hover{border-color:#FF5A36}
html #v-home .q .q-btn{display:inline-block;background:var(--ink);color:#F6F3EE;text-decoration:none;font-size:14px;padding:15px 26px;transition:background .2s}
html #v-home .q .q-btn:hover{background:#FF5A36;color:#111}
html #v-home .q a:focus-visible{outline:2px solid #FF5A36;outline-offset:4px}
html #v-home .q-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,120px);align-items:end;padding:clamp(120px,10vw,156px) 0 clamp(56px,6vw,96px);min-height:0;background:none}
html #v-home .q-hero .q-lede{margin:28px 0 0;color:#3B3935;max-width:30em}
html #v-home .q-hero .q-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin:36px 0 0}
html #v-home .q-hero-img{justify-self:end;width:100%;max-width:calc((100svh - 200px)*.8);min-width:min(100%,360px);aspect-ratio:4/5;overflow:hidden;background:#111}
html #v-home .q-sec{padding:clamp(64px,7.5vw,128px) 0;border-top:1px solid var(--rule);background:none;min-height:0}
html #v-home .q-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,88px);max-width:1040px}
html #v-home .q-work{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:start}
html #v-home .q-work-img img{aspect-ratio:16/10}
html #v-home .q-lists{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:36px 0 28px}
html #v-home .q-lists dl{margin:0}
html #v-home .q-lists dl>div{padding:12px 0;border-top:1px solid var(--rule)}
html #v-home .q-lists dt{font-weight:500;font-size:14.5px}
html #v-home .q-lists dd{margin:2px 0 0;font-size:14px;line-height:1.5;color:#4A4742}
html #v-home .q-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,104px);align-items:end;margin-bottom:clamp(40px,5vw,80px)}
html #v-home .q-head h2{margin-bottom:0}
html #v-home .q-head>p{margin:0;color:#3B3935}
html #v-home .q-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(48px,6vw,104px) clamp(14px,1.8vw,28px);align-items:start;margin-bottom:clamp(40px,4vw,64px)}
html #v-home .q-grid .g1{grid-column:1/8}.q-grid .g1 img{aspect-ratio:4/3}
html #v-home .q-grid .g2{grid-column:9/13;margin-top:clamp(40px,7vw,120px)}.q-grid .g2 img{aspect-ratio:4/5}
html #v-home .q-grid .g3{grid-column:1/4}.q-grid .g3 img{aspect-ratio:1/2}
html #v-home .q-grid .g4{grid-column:5/13;align-self:end}.q-grid .g4 img{aspect-ratio:25/16}
html #v-home .q-grid .g5{grid-column:2/6}.q-grid .g5 img{aspect-ratio:4/5}
html #v-home .q-grid .g6{grid-column:7/13;align-self:end}.q-grid .g6 img{aspect-ratio:3/2}
html #v-home .q-fit,html #v-home .q-steps,html #v-home .q-notes ul{list-style:none;margin:0 0 28px;padding:0;max-width:1040px}
html #v-home .q-fit li,html #v-home .q-notes li{padding:16px 0;border-top:1px solid var(--rule);font-size:clamp(16px,1.35vw,19px);line-height:1.45}
html #v-home .q-fit li:last-child,html #v-home .q-notes li:last-child{border-bottom:1px solid var(--rule)}
html #v-home .q-notes a{color:var(--ink);text-decoration:none;display:block}
html #v-home .q-notes a:hover{color:#FF5A36}
html #v-home .q-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);max-width:none;counter-reset:s}
html #v-home .q-steps li{border-top:1px solid var(--ink);padding-top:14px;font-size:14px;line-height:1.55;color:#4A4742;counter-increment:s}
html #v-home .q-steps li::before{content:counter(s);display:block;font-size:12.5px;color:var(--mute);margin-bottom:22px}
html #v-home .q-steps strong{display:block;font-weight:500;font-size:16px;color:var(--ink);margin-bottom:6px}
@media(max-width:860px){
 html #v-home .q-hero,html #v-home .q-work,html #v-home .q-head,html #v-home .q-cols{grid-template-columns:minmax(0,1fr)}
 html #v-home .q-hero{padding-top:108px;gap:36px}
 html #v-home .q-hero-img{justify-self:stretch;max-width:none}
 html #v-home .q-steps{grid-template-columns:1fr 1fr}
 html #v-home .q-grid{gap:36px 14px}
 html #v-home .q-grid .g1,html #v-home .q-grid .g4,html #v-home .q-grid .g6{grid-column:1/-1}
 html #v-home .q-grid .g2{grid-column:5/13;margin-top:0}
 html #v-home .q-grid .g3{grid-column:1/6}
 html #v-home .q-grid .g5{grid-column:1/9}
}
@media(max-width:480px){html #v-home .q-lists,html #v-home .q-steps{grid-template-columns:1fr}html #v-home .q-btn{flex:1 1 100%;text-align:center}}
/* quiet the remaining legacy chrome on home */
body:has(#v-home.on) .vf.side{display:none!important}
html #v-home .v4-final h2{font-size:clamp(32px,3.8vw,56px)!important;font-weight:400!important;letter-spacing:-.03em!important;line-height:1.1!important}
html #v-home .v4-final h2 em{font-weight:inherit!important}

/* ---------- V3.5: site-wide quiet theme ---------- */
:root{--bg:#F6F3EE;--ink:#1B1A18;--dim:#77726A;--soft:#4A4742;--line:#DCD6CC;color-scheme:light}
html,body{background:#F6F3EE;color:#1B1A18}
footer,.menu{--bg:#141312;--ink:#F2F0EB;--dim:#8E8C87;--soft:#BDBAB4;--line:#2E2C29}
footer{background:#141312;color:#F2F0EB}
html #v-home .q-final .q-sec{padding-bottom:clamp(88px,9vw,150px)}
html #v-home .q-final h2{font-size:clamp(30px,3.2vw,48px)}
html #v-home .q .q-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin:32px 0 28px}
/* inner pages: one type voice */
.view:not(#v-home) .mega{font-weight:400!important;letter-spacing:-.03em!important;font-size:clamp(34px,3.7vw,56px)!important;line-height:1.08!important;text-transform:none!important;max-width:15em}
.view:not(#v-home) :is(h2,h3,.h3){font-weight:400!important;letter-spacing:-.02em!important;text-transform:none!important}
.view:not(#v-home) .cap,.view:not(#v-home) .secno{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:400!important;color:var(--dim)!important}
.view:not(#v-home) img{filter:none!important}
/* gentle reveal for home figures */
@media(prefers-reduced-motion:no-preference){
 .js #v-home .q figure{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
 .js #v-home .q figure.q-in{opacity:1;transform:none}
}

/* V3.5 inner pages, second pass */
.vf.side{display:none!important}
.view:not(#v-home){--hot:#1B1A18}
.view:not(#v-home) :is(p,li,dd,td,label,blockquote,.body,.lead){color:#3B3935!important}
.view:not(#v-home) :is(h1,h2,h3,h4,.mega,.h3,strong,b,dt,summary){color:#1B1A18!important}
.view:not(#v-home) :is(.mega,h2,h3) em{color:inherit!important;font-weight:inherit!important;font-style:normal}
.view:not(#v-home) :is(.cta,.q,.t,summary,.h3){font-weight:400!important;letter-spacing:-.015em!important}
.view:not(#v-home) .cta{font-size:17px!important}
.view:not(#v-home) .glist .t,.view:not(#v-home) .q{font-size:clamp(18px,1.6vw,23px)!important;line-height:1.3!important}
.view:not(#v-home) .cols p:first-child::first-letter,.view:not(#v-home) .article article>p:first-child::first-letter{float:none;font-weight:inherit;font-size:inherit;line-height:inherit;padding:0;color:inherit}
.view:not(#v-home) .stages li::before{font-size:12.5px!important;font-weight:400!important;letter-spacing:0!important;line-height:1.5!important;color:#77726A!important;-webkit-text-stroke:0!important}
.view:not(#v-home) .nums .mega{font-size:15px!important;color:#77726A!important;max-width:none}
.view:not(#v-home) :is(input,select,textarea){color:#1B1A18!important}
.view:not(#v-home) .contact-grid :is(a,.v,strong,b){font-weight:400!important}
html body .vf.side,html body .vf.side.r{display:none!important;visibility:hidden!important}
.view:not(#v-home) .experience-photos :is(figure,div,picture){aspect-ratio:auto!important;height:auto!important;max-height:none!important}
.view:not(#v-home) .experience-photos img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;width:100%!important}
/* V3.6 */
.view:not(#v-home) .thin{font-weight:inherit!important;letter-spacing:inherit!important;color:inherit!important}
.q-inner-fig{margin:0 var(--pad,clamp(22px,6.5vw,112px)) clamp(48px,6vw,96px);max-width:min(760px,60%)}
.q-inner-fig{max-width:min(520px,60%)}
.q-inner-fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:none!important}
.q-inner-fig figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:#77726A}
@media(max-width:860px){.q-inner-fig{max-width:none}}
.app-grid>*{min-width:0}.panel{min-width:0;overflow-x:auto}
#inq .f{min-width:0}#inq :is(input,select,textarea){max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:380px){#inq{grid-template-columns:minmax(0,1fr)!important}#inq .f{grid-column:1/-1!important}}
/* ---------- menu ---------- */
/* Opening the menu hides the page scrollbar; --sbw (set in site.js) keeps the Menu/Close button where it was. */
.vf.tr{right:calc(var(--rail) + var(--sbw,0px))}
/* The overlay is dark: its text uses the light ink defined for .menu above. */
.menu{color:var(--ink);justify-content:flex-start;overflow-y:auto;padding:clamp(84px,11vh,120px) clamp(22px,6.5vw,112px) clamp(36px,6vh,72px)}
.menu ol{margin:auto 0;width:100%}
.menu a{align-items:baseline;gap:clamp(18px,3vw,56px);padding:clamp(5px,.9vh,12px) 0}
.menu a::before{font:400 12.5px/1 Inter,Arial,sans-serif;letter-spacing:0;color:var(--dim);min-width:2em;font-variant-numeric:tabular-nums}
/* Same light voice as the page headings, at display size. Sized by height as well as width so all nine items fit. */
.menu a span{display:inline-block;font-size:clamp(36px,min(6vw,6.6vh),84px);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--ink);opacity:.4;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.menu a span i{font-weight:inherit}
/* Light and dark do the work: the page you are on is at full brightness, the rest sit back. */
.menu a[aria-current="page"] span{color:var(--ink);opacity:1}
.menu a[aria-current="page"]::before{color:var(--ink)}
/* Hover and keyboard focus: the item lights up and steps forward. */
.menu a:hover span,.menu a:focus-visible span{color:var(--ink);opacity:1;transform:translateX(clamp(8px,1vw,18px))}
.menu a:focus-visible{outline:none}
/* Items rise in one after another when the menu opens. */
@media(prefers-reduced-motion:no-preference){
 /* Closing mirrors opening: the items leave first, last one first, then the panel draws back up.
    (The panel used to disappear the instant Close was pressed because visibility switched off at once.) */
 .menu{transition:clip-path .7s cubic-bezier(.7,0,.2,1) .3s,visibility 0s linear 1s}
 .menu.open{transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s}
 .menu li{opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .32s ease;transition-delay:calc((8 - var(--i,0))*.022s)}
 .menu.open li{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(.22s + var(--i,0)*.045s)}
 .menu li:nth-child(2){--i:1}.menu li:nth-child(3){--i:2}.menu li:nth-child(4){--i:3}.menu li:nth-child(5){--i:4}
 .menu li:nth-child(6){--i:5}.menu li:nth-child(7){--i:6}.menu li:nth-child(8){--i:7}.menu li:nth-child(9){--i:8}
}/* ---------- header strip ----------
   The logo and Menu are fixed. Without something behind them, page text scrolls straight through them.
   A strip in the page colour sits behind them; a hairline appears once the page has been scrolled. */
:root{--bar:72px}
.topbar{position:fixed;top:0;left:0;right:0;height:calc(env(safe-area-inset-top,0px) + var(--bar));z-index:39;pointer-events:none;background:#F6F3EE;border-bottom:1px solid transparent;transition:border-color .3s ease}
html.scrolled .topbar{border-bottom-color:#DCD6CC}
@media(max-width:860px){:root{--bar:62px}}
/* The logo and the Menu button each fill the height of the strip and centre themselves in it. */
.vf.tl,.vf.tr{top:env(safe-area-inset-top,0px)!important;height:var(--bar);display:flex;align-items:center}
.vf.tl a{display:flex;align-items:center}
/* Menu / Close: reserve the width of the longer label so nothing beside it moves when the label changes. */
#menuBtn{display:inline-grid;justify-items:end}
#menuBtn::after{content:"Close";height:0;visibility:hidden;overflow:hidden}
/* The custom cursor dot is invisible until the pointer first moves (it used to sit in the top-left corner). */
.cur{opacity:0}
.cur.on{opacity:1}
/* Capabilities: centre the "Across both workstreams" label between its two rules. */
.v14-cap-across{align-items:center}
.v14-cap-across p{margin:0}
/* Footer: the Index column sits at the right-hand side, opposite the logo, instead of floating in the middle. */
@media(min-width:701px){footer .grid>div:last-child{grid-column:3}}
/* Header strip, translucent variant (for the owner to compare with the solid one). */
.topbar{background:rgba(246,243,238,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Menu overlay, translucent to match the header strip: the page shows through, darkened and blurred. */
.menu{background:rgba(20,19,18,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}