/* Shared route language: generous editorial type, deliberate colour and useful motion. */
:root{--action-blue:#2445f2;--title-size:clamp(36px,4.5vw,64px)}
.site-header a[aria-current="page"]{color:var(--action-blue);text-decoration:underline;text-underline-offset:7px}
footer>div{flex-wrap:wrap}
.route-link{display:inline-flex;align-items:center;gap:20px;border:0;border-bottom:1px solid currentColor;padding:12px 0;background:none;color:var(--action-blue);font-size:13px;font-weight:550;transition:gap .2s,color .2s}
.route-link:hover{gap:28px;color:var(--ink)}
.possibilities-section>.route-link{margin-top:32px}
.contact-section{background:var(--action-blue)}
.contact-section .contact-button{background:#fff;color:var(--action-blue);border:1px solid #fff}
.contact-section .contact-button:hover{background:#eef1ff;color:#1734c6;box-shadow:0 8px 24px #0002}
.contact-section .contact-button:focus-visible{outline:3px solid #fff;outline-offset:6px;box-shadow:0 0 0 3px var(--action-blue)}
.welcome{background:#fff;--blue:#2445f2}
.welcome-skip{min-height:44px;padding:12px 8px;color:#25262a}
.inner-page{background:#fff;--blue:#2445f2}
.inner-page .site-header{background:#fff}
.inner-page main>section:not(.contact-section):not(.work-section){padding-inline:var(--page-edge,var(--pad))}
.page-intro{padding-block:clamp(48px,5vw,72px) 48px;max-width:none;width:100%;margin:0}
.page-intro>.mono{margin:0 0 24px;color:var(--muted)}
.page-intro h1{font-size:var(--title-size);font-weight:600;line-height:1.08;letter-spacing:-.05em;margin:0;max-width:1100px;text-wrap:pretty}
.page-intro h1 span{color:var(--action-blue)}
.page-deck{font-size:16px;line-height:1.75;max-width:720px;margin:24px 0 0;color:var(--muted)}
.page-jump{display:flex;gap:30px;flex-wrap:wrap;padding:20px var(--page-edge,var(--pad));border-block:1px solid #dedfe4;background:#f8f9fa}
.page-jump a{font-size:12px;padding:8px 0;transition:color .2s}
.page-jump a:hover{color:var(--action-blue)}
.service-chapter{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,8vw,120px);padding-block:clamp(56px,7vw,100px);scroll-margin-top:120px}
.service-chapter:nth-of-type(3){background:#e8edff}
.service-chapter:nth-of-type(4){background:#f2effa}
.service-chapter h2,.editorial-band h2,.belief-grid h2,.principles h2,.contact-layout h2{font-size:clamp(30px,3.6vw,54px);font-weight:550;line-height:1.15;letter-spacing:-.04em;margin:20px 0}
.service-chapter p:not(.mono),.editorial-band p:not(.mono),.belief-grid p:not(.mono),.case-note p:not(.mono){font-size:15px;line-height:1.85;max-width:590px;color:#555964}
.service-scope{padding-top:18px}.service-scope ul{list-style:none;padding:0;margin:24px 0 32px}
.service-scope li{padding:14px 0;border-bottom:1px solid #09090b24;font-size:15px;transition:padding-left .2s,color .2s}
.service-scope li:hover{padding-left:8px;color:var(--action-blue)}
.scope-result b{display:block;color:var(--ink);margin-bottom:8px;font-weight:550}
.editorial-band{padding-block:clamp(50px,7vw,96px);display:grid;grid-template-columns:1fr 2fr;gap:36px;border-top:1px solid #dedfe4}
.editorial-band h2{margin-top:0}
.page-faq{background:#f8f9fa;padding-block:64px 80px}
.page-faq>h2{font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;font-weight:550;margin:0 0 32px}
.page-faq details{border-top:1px solid #cccfd8;padding:20px 0;max-width:900px}
.page-faq summary{cursor:pointer;font-weight:550;font-size:17px;min-height:32px}
.page-faq summary:hover{color:var(--action-blue)}
.page-faq details p{line-height:1.85;max-width:720px;color:#555964}
.belief-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding-block:0!important;background:#fff}
.belief-grid article{padding:clamp(28px,4vw,60px);background:#e8edff}
.belief-grid article+article{background:#f2effa}
.principles{padding-block:64px 88px;background:#09090b;color:#fff}
.principles ol{padding:0;list-style:none;counter-reset:principle;margin:40px 0 0}
.principles li{counter-increment:principle;display:grid;grid-template-columns:40px 1fr 1fr;gap:24px;border-top:1px solid #ffffff30;padding:24px 0;line-height:1.8}
.principles li:before{content:'0' counter(principle);font-size:12px;color:#9eaeff}
.principles li b{font-weight:500;font-size:18px}.principles li span{color:#ccc;font-size:14px}
.inner-page .work-section{padding-top:64px}.inner-page .work-section .project-building{padding-top:0}
.case-visual{background:#09090b;padding-block:32px}
.case-visual .project-art{max-width:900px;margin:auto;aspect-ratio:1.8;min-height:280px}
.case-visual .project-arrow{display:none}
.case-note{background:#f8f9fa;padding-block:48px 64px}
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,8vw,120px);padding-block:0 100px}
.contact-layout aside>p{color:#62636b;font-size:14px;line-height:1.8;margin-top:28px}
.contact-layout .direct-contact{display:block;font-size:clamp(18px,2vw,26px);letter-spacing:-.03em;color:var(--action-blue);padding-top:14px;overflow-wrap:anywhere}
.contact-layout .contact-note{font-size:12px;max-width:320px}
.contact-form-wrap{padding:clamp(24px,4vw,52px);background:#f2effa;border-radius:4px}
.contact-form-wrap label{display:block;font-size:13px;font-weight:500;margin-bottom:22px}
.contact-form-wrap :is(input,select,textarea){display:block;width:100%;border:1px solid #b8bdc7;background:#fff;padding:13px 14px;margin-top:8px;border-radius:3px;min-height:46px;color:#09090b;outline-offset:3px;font-size:15px}
.contact-form-wrap :is(input,select,textarea):focus-visible{outline:2px solid var(--action-blue)}
.contact-form-wrap textarea{resize:vertical}.contact-form-wrap .brief-submit{display:inline-flex;justify-content:space-between;gap:16px;min-height:48px;background:var(--action-blue);color:#fff;padding:14px 20px;border:0;font-size:14px}
.contact-form-wrap .brief-submit:hover{background:#1734c6}
.contact-form-wrap .form-note{font-size:12px;color:#555964;line-height:1.8;margin:18px 0 0}
#contact-summary{font:14px/1.85 Inter,Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;padding-block:20px}
#contact-edit{display:block;margin-top:16px}
@media(max-width:850px){
 .page-intro{padding-top:48px;padding-bottom:40px}.page-intro h1{font-size:var(--title-size)}
 .service-chapter,.editorial-band,.contact-layout{grid-template-columns:1fr;gap:28px}
 .service-scope{padding-top:0}.page-jump{gap:12px 22px}
 .belief-grid{grid-template-columns:1fr}.principles li{grid-template-columns:24px 1fr;gap:12px 20px}.principles li span{grid-column:2}
 .contact-layout{padding-bottom:56px}.case-visual .project-art{aspect-ratio:1.2}
 footer>div{gap:16px 22px}
}
@media(prefers-reduced-motion:reduce){.route-link,.service-scope li{transition:none}}

.hero-scroll-track .hero h1{font-size:var(--title-size);font-weight:600;letter-spacing:-.05em;line-height:1.08;gap:8px}
.hero-scroll-track.is-framed .hero h1{gap:8px;font-weight:600}
.hero-scroll-track .hero h1 .emphasis{font-weight:600;line-height:1.08}

/* Consistent card baselines and equal split-panel gutters. */
.work-grid{align-items:stretch}
.work-grid>.project{display:flex;flex-direction:column;min-width:0;height:100%}
.work-grid .project-art{flex:none;width:100%}
.work-grid .project-meta{flex:none;min-height:110px}
.work-grid .project-context{flex:1;display:flex;flex-direction:column}
.work-grid .project-context small{margin-bottom:24px}
.work-grid .project-context-link{margin-top:auto;padding-top:8px;min-height:44px}
.possibility-panel{align-items:stretch}
.possibility-panel .experiment-stage,.possibility-panel .experiment-description{padding:var(--panel-pad)}
.experiment-description{display:flex;flex-direction:column;align-items:flex-start}
.experiment-description .text-link{margin-top:auto;min-height:44px;display:inline-flex;align-items:center;gap:20px}
.experiment-description .service-tags{margin-bottom:24px}
/* Pointer coordinates stay in the artwork's own coordinate system. */
.project-art:after{left:0;top:0;pointer-events:none;transform:translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0) translate(-50%,-50%) scale(.9);transition:opacity .18s;will-change:transform}
@media(hover:hover){.project:hover .project-art:after{transform:translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0) translate(-50%,-50%) scale(1)}}
.possibility-tabs{position:relative}
.possibility-tabs button,.possibility-tabs button[aria-selected="true"]{border-bottom:2px solid transparent}
.topic-indicator{position:absolute;left:0;top:0;height:2px;background:var(--action-blue);pointer-events:none;transition:transform .28s cubic-bezier(.22,1,.36,1),width .28s cubic-bezier(.22,1,.36,1)}
/* Contact actions share a clear size, baseline and focus treatment. */
.contact-bottom>div{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:280px}
.contact-bottom>div>a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid #ffffff80;border-radius:28px;color:#fff;line-height:1.65;font-size:14px;text-align:center;transition:background .2s,color .2s,border-color .2s}
.contact-bottom>div>a:hover{background:#fff;color:var(--action-blue);border-color:#fff}
.contact-bottom>div>a:focus-visible{outline:2px solid #fff;outline-offset:4px}
footer{padding-block:48px;row-gap:28px}
footer p{color:#666973;font-size:11px;line-height:1.9;margin:0}
footer>div{line-height:1.9;gap:14px 22px}
footer>div :is(a,button){color:#25262a;display:inline-flex;align-items:center;min-height:36px}
footer>div :is(a,button):hover{color:var(--action-blue)}
/* Shared form affordances, including the modal and the dedicated contact page. */
#brief-form :is(input,select,textarea),.contact-form-wrap :is(input,select,textarea){border:1px solid #9ba3af;background:#fff;border-radius:3px;min-height:46px;color:#09090b}
#brief-form :is(input,select,textarea):focus-visible,.contact-form-wrap :is(input,select,textarea):focus-visible{border-color:var(--action-blue);outline:2px solid var(--action-blue);outline-offset:2px;box-shadow:0 0 0 4px #2445f21a}
#contact-form,#contact-ready{scroll-margin-top:calc(var(--header-height,104px) + 24px)}
@media(max-width:1100px){
 .site-header .desktop-nav,.site-header .talk-link{display:none}
 .site-header .menu-toggle{display:flex;align-items:center;gap:16px;background:none;border:0;padding:8px 12px;font-size:12px;min-height:44px;margin-left:auto}
 .site-header .menu-toggle:is(:hover,:focus-visible),.site-header .menu-toggle[aria-expanded="true"]{background:var(--action-blue);color:#fff}
}
@media(max-width:700px){
 .contact-bottom>div{min-width:0;width:100%;align-items:stretch}
 footer{padding-block:48px;gap:24px}
 footer p{max-width:none;font-size:11px}
 footer>div{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.topic-indicator,.contact-bottom>div>a{transition:none}.project-art:after{will-change:auto}}
.contact-bottom>div>a{justify-content:space-between;gap:16px}
.contact-bottom>div>a>span[aria-hidden]{font-size:18px;line-height:1;flex:none}

/* Card actions stay readable and in normal flow after pointer exit. */
.meet-section .mind-panel .mind-text{flex:0 0 auto;min-height:0}
.meet-section .mind-panel .mind-invite{position:relative;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:32px;color:#09090b;opacity:1;visibility:visible}
.meet-section .mind-panel .mind-invite-label,
.meet-section .mind-panel .mind-invite i{color:#09090b;opacity:1;visibility:visible}
.meet-section .mind-panel .mind-invite i{display:inline-block;flex:none}
.meet-section .mind-panel[aria-expanded="true"] .mind-invite{color:#09090b;opacity:1;visibility:visible}
/* Keep the disclosure stationary; background and border provide hover feedback. */
.meet-section .mind-panel,
.motion-ready .meet-section .mind-panel.is-visible,
.motion-ready .meet-section .mind-panel.is-visible:hover,
.meet-section .mind-panel[aria-expanded="true"]{transform:none;will-change:auto}

/* Each disclosure owns its height and hover/focus reaction. */
.meet-section .duo-grid>.mind-panel{align-self:start;height:auto}
.meet-section .mind-v:focus-visible{background:#fff;box-shadow:inset 0 0 0 1px #09090b55,0 16px 30px #30255712}
.meet-section .mind-h:focus-visible{background:#e5ebff;box-shadow:inset 0 0 0 1px #2445f285,0 16px 30px #2445f215}

/* Content keeps its natural size while the card gently reveals or clips it. */
.meet-section .mind-panel .mind-detail{flex:none}
