/* 1.1: responsive refinement, independent of legacy page-builder defaults. */
:root{--header-offset:var(--header-height,104px)}
html{scroll-padding-top:calc(var(--header-offset) + 20px)}
.hero-scroll-track .hero{padding-block:clamp(20px,3vh,36px) 28px}
.hero-scroll-track.is-framed .hero{padding-block:18px}
.hero-scroll-track .hero h1{margin:0 auto;font-size:clamp(36px,4.5vw,64px);line-height:1.12;gap:8px}
.hero-scroll-track .hero .hero-offer{margin:14px auto 0;max-width:58ch;line-height:1.6}
.hero-scroll-track .hero .hero-story{margin-top:20px}
.hero-scroll-track .hero .hero-stage{width:100%;max-width:920px;border-radius:12px}
.hero-scroll-track .hero .stage-caption{padding-inline:16px;max-width:100%;text-align:center}
.hero-scroll-track .hero .hero-bottom{margin-top:0;padding-top:14px;row-gap:12px}
.hero-scroll-track .hero .scene-controls button{min-height:44px;min-width:70px;font-size:12px}
.hero-scroll-track .hero .hero-story-sticky{padding:0}
.playground-scroll{display:none}
.case-note p,.editorial-band p{overflow-wrap:break-word}
.page-faq{padding:clamp(48px,6vw,80px) var(--page-edge,var(--pad))}
.page-faq summary{min-height:44px;display:list-item;line-height:1.55;padding:6px 28px 6px 0}
.page-faq details p{font-size:16px;line-height:1.75;margin:12px 0 4px}
#brief-receipt,#contact-receipt{overflow-wrap:anywhere;font-size:14px;line-height:1.7}
@media(max-width:1100px){
 :root{--gutter:clamp(20px,4vw,40px);--panel-pad:28px;--section-space:72px;--heading-gap:32px}
 .site-header{padding-block:16px;gap:20px}
 .site-header .brand{gap:7px}
 .brand-wordmark{width:150px}
 .site-header .menu-toggle{font-size:14px;padding:8px 12px;min-width:80px}
 .meet-heading,.possibilities-heading,.work-heading{gap:28px}
 .meet-heading p,.possibilities-heading p,.work-heading p,.founder-section p,.project-context p{font-size:16px;line-height:1.7}
 .mind-panel{padding:28px;min-height:240px}
 .mind-detail{font-size:16px;line-height:1.7}
 .section-tag{align-items:flex-start;gap:20px;font-size:11px;line-height:1.6}
 .section-tag span:last-child{max-width:38%;text-align:right}
 .possibilities-heading h2{font-size:clamp(34px,5.8vw,52px);line-height:1.16;letter-spacing:-.045em}
 .possibilities-heading p{margin-top:20px}
}
@media(max-width:1024px){
 /* All three stories are in document order. Native scrolling controls discovery. */
 .possibilities-section>.possibility-tabs,.possibilities-section>.possibility-panel{display:none!important}
 .playground-scroll{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:32px}
 .playground-card{min-width:0;padding:clamp(24px,4vw,36px);background:#e8edff;border:1px solid #cbd3f2;border-radius:12px;scroll-margin-top:calc(var(--header-offset) + 20px);opacity:1;transform:none}
 .playground-card:nth-child(2){background:#efedf6;border-color:#d8d3e6}
 .playground-card:nth-child(3){background:#f1f3f8;border-color:#d5dae5}
 .playground-card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
 .playground-card-top .mono{font-size:11px;line-height:1.65;letter-spacing:.04em;max-width:48%}
 .playground-card-top>.mono:last-child{text-align:right;color:#555964}
 .playground-card h3{font-size:clamp(28px,4.6vw,40px);line-height:1.16;letter-spacing:-.04em;margin:26px 0 24px;max-width:22ch}
 .playground-example{padding:24px;background:#ffffff9c;border-radius:8px}
 .playground-example .mono{font-size:11px;margin:0 0 18px;color:#555964}
 .playground-before{font-size:18px;line-height:1.45;color:#555964;margin:0}
 .playground-arrow{display:block;color:#2445f2;font-size:24px;margin:12px 0}
 .playground-after{font-size:clamp(23px,3.8vw,32px);line-height:1.3;color:#2445f2;letter-spacing:-.025em;margin:0;font-weight:550}
 .playground-copy{font-size:16px;line-height:1.7;margin:24px 0 16px;max-width:62ch}
 .playground-tags{font-size:12px;line-height:1.8;color:#555964;margin:0 0 20px}
 .playground-card .text-link{min-height:44px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;font-size:14px;border-bottom:1px solid currentColor;color:#09090b}
 .playground-card .text-link:hover{color:#2445f2}
 .playground-scroll.is-enhanced .playground-card{transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1);will-change:auto}
 .playground-scroll.is-enhanced .playground-card.is-entering{opacity:.85;transform:translateY(18px) scale(.99)}
 .playground-scroll.is-enhanced .playground-card.is-current{opacity:1;transform:translateY(0) scale(1)}
 .project-meta{min-height:0!important}
 .work-grid .project-context{margin-top:20px;padding-top:20px}
 .project-context-link{font-size:14px;min-height:44px}
 .page-intro{padding-block:40px}
 .page-intro h1{font-size:clamp(34px,5.8vw,54px);line-height:1.13}
 .page-deck{font-size:16px;line-height:1.75;margin-top:20px}
 .case-scope dl{grid-template-columns:1fr;gap:16px}
 .service-chapter p:not(.mono),.editorial-band p:not(.mono),.belief-grid p:not(.mono),.case-note p:not(.mono){font-size:16px;line-height:1.75}
}
@media(max-width:700px){
 :root{--gutter:20px;--section-space:56px;--heading-gap:28px;--card-gap:20px;--panel-pad:24px}
 .site-header{padding-block:14px;gap:12px}
 .brand-wordmark{width:130px}
 .site-header .brand{gap:6px}
 .brand-descriptor{font-size:10px;line-height:1.5}
 .hero-scroll-track .hero{padding-top:24px;padding-bottom:24px}
 .hero-scroll-track.is-framed .hero{padding-block:14px}
 .hero-scroll-track .hero h1{font-size:clamp(32px,8.2vw,44px);line-height:1.12;gap:7px}
 .hero-scroll-track .hero .hero-offer{font-size:15px;line-height:1.6;margin-top:12px;max-width:36ch}
 .hero-scroll-track .hero .hero-actions{margin-top:16px;gap:10px}
 .hero-actions a{font-size:13px;min-height:44px;padding:10px 14px}
 .hero-scroll-track .hero .hero-story{margin-top:18px}
 .hero-scroll-track .hero .stage-caption{font-size:12px;line-height:1.5;padding-inline:10px}
 .hero-scroll-track .hero .caption-layer{gap:4px}
 .hero-scroll-track .hero .caption-layer .mono{font-size:10px}
 .hero-scroll-track .hero .hero-bottom{padding-top:12px;gap:12px}
 .hero-bottom .discover-link{font-size:12px}
 .section-tag{gap:16px;margin-bottom:28px;padding-top:14px}
 .section-tag>span:first-child{flex:1;min-width:0;max-width:65%}
 .section-tag>span:last-child{max-width:34%;font-size:10px}
 .possibilities-heading h2,.meet-heading h2,.work-heading h2{font-size:clamp(32px,8vw,42px);line-height:1.17}
 .possibilities-heading p,.work-heading p{margin-top:18px}
 .mind-panel{padding:24px;min-height:220px;gap:24px}
 .mind-text strong{font-size:27px;line-height:1.2}
 .mind-invite{font-size:14px;min-height:44px;align-items:center}
 .playground-scroll{margin-top:26px;gap:24px}
 .playground-card{padding:24px 20px}
 .playground-card h3{margin-block:24px 20px;font-size:29px}
 .playground-example{padding:20px}
 .playground-card-top .mono{font-size:10px}
 .work-grid{grid-template-columns:minmax(0,1fr);gap:36px}
 .project-meta strong{font-size:25px}
 .project-meta small,.project-context small,.work-disclosure{font-size:13px;line-height:1.7}
 .art-label{max-width:calc(100% - 40px);font-size:9px;line-height:1.6}
 .project-art{aspect-ratio:1.2}
 .approach-rows summary{font-size:24px;min-height:44px}
 .approach-rows p{font-size:16px;line-height:1.75;margin-left:0}
 .contact-section h2{font-size:clamp(34px,8vw,46px);line-height:1.16}
 .contact-bottom{margin-top:28px}
 .contact-bottom>div{min-width:0;width:100%;margin-top:24px}
 footer{padding-block:36px;gap:24px}
 footer p{font-size:12px;max-width:100%}
 footer>div a,footer>div button{font-size:13px;min-height:44px}
 .page-faq{padding-block:48px}
 .page-faq>h2{font-size:30px;line-height:1.2;margin-bottom:24px}
 .page-faq summary{font-size:16px}
 .page-faq details{padding-block:14px}
 dialog:not(.entry-intro){width:calc(100% - 32px);max-width:560px;padding:28px 22px;max-height:calc(100dvh - 32px);overflow-y:auto}
 dialog:not(.entry-intro) h2{font-size:32px;line-height:1.18;margin:20px 0 26px}
 #brief-form :is(input,select,textarea),.contact-form-wrap :is(input,select,textarea){font-size:16px}
 .contact-form-wrap{padding:24px 20px}
 .service-chapter,.editorial-band{padding-block:48px;gap:20px}
}
@media(prefers-reduced-motion:reduce){
 .playground-scroll.is-enhanced .playground-card{opacity:1!important;transform:none!important;transition:none!important}
}

/* 1.1.2: override the pinned-hero width as well as the natural-flow layout. */
@media(min-width:1101px){
 .hero-scroll-track .hero .hero-offer,
 .hero-scroll-track.is-framed .hero .hero-offer{width:100%;max-width:960px;text-wrap:wrap}
}