/* Responsive composition: phone <=809, tablet810-999, desktop1000+, wide1800+. */
html{scroll-padding-top:100px}body{min-width:320px}img,video{max-width:100%}main,section,.case-identity>div{min-width:0}
.navigation{width:100%;max-width:1800px}.navigation>nav{position:static;display:flex;gap:28px;margin-left:clamp(24px,10vw,160px);margin-right:auto}.navigation{justify-content:flex-start}.location{margin-left:auto;flex:none}.brand{flex:none}
.menu-toggle{display:none}.hero{height:100svh;min-height:640px}.hero-content{max-width:calc(100% - var(--edge)*2)}#hero-heading{max-width:650px}.hero-content{width:650px}.glass-button{min-height:44px}
.clients,.selected-work{width:100%;max-width:1800px}.introduction,.connected-system{padding-left:var(--edge);padding-right:var(--edge)}.intro-layout,.system-inner{width:100%;max-width:1070px;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,8vw,160px)}.intro-layout{align-items:start}.system-inner{align-items:stretch}.client-film{min-height:0}
.case-identity h3,.case-identity p{overflow-wrap:anywhere}.case-identity{left:24px;right:24px;bottom:24px}.case-cover{display:block}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid-secondary,.additional-work .more-work-first{grid-template-columns:repeat(3,minmax(0,1fr))}.more-work-last{grid-template-columns:repeat(2,minmax(0,1fr))}.work-section-heading{gap:24px}
.service-list a{display:inline-block;min-height:40px;padding:0 0 2px}.service-list{gap:8px}.testimonial-review summary{min-height:44px}.review-person{overflow-wrap:anywhere}#film-dialog{max-height:calc(100svh - 80px);margin:auto}#film-dialog>video{max-height:calc(100svh - 80px)}
.service-nav,.service-footer{max-width:1800px;margin:auto}.service-nav{padding-inline:var(--edge);flex-wrap:wrap}.service-nav a:not(:first-child){min-height:44px;display:inline-flex;align-items:center}.service-page{width:100%;padding-inline:var(--edge)}.service-footer{padding-inline:var(--edge)}
@media(min-width:1800px){.intro-layout,.system-inner{max-width:1200px;gap:160px}.introduction{padding-block:140px}.connected-system{padding-block:100px 140px}.case-identity{left:32px;right:32px;bottom:32px}.selected-work{padding-bottom:140px}}
@media(min-width:810px) and (max-width:999px){:root{--edge:20px}.navigation{gap:20px}.navigation>nav{margin-left:24px;gap:20px}.location{gap:10px}.hero{min-height:640px}.hero-content{width:560px}.intro-layout,.system-inner{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1070px;gap:48px}.introduction{padding-block:80px}.connected-system{padding-block:48px 80px}.case-identity{left:16px;right:16px;bottom:16px;gap:10px}.testimonials{padding-block:90px}}
@media(max-width:809px){:root{--edge:16px}.navigation{padding:16px;gap:16px;align-items:center;z-index:35}.location{gap:8px;margin-left:auto}.location time{display:none}.menu-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid #ffffff40;border-radius:8px;background:#ffffff20;backdrop-filter:blur(10px);color:white;cursor:pointer}.navigation>nav{display:none;position:absolute;left:16px;right:16px;top:76px;margin:0;padding:12px;background:#f2f2f0f5;color:#111;backdrop-filter:blur(16px);border-radius:12px;box-shadow:0 12px 30px #0002;gap:0;flex-direction:column}.navigation>nav[data-open]{display:flex}.navigation>nav a{display:flex;align-items:center;min-height:48px;padding:12px;}.notifications{width:320px;max-width:calc(100% - 32px);top:var(--notification-top,80px)}.notice{height:64px;padding:12px;grid-template-columns:36px minmax(0,1fr) auto;gap:10px}.notice img{width:36px;height:36px}.notice-tag{padding:5px}.notifications[data-scrolled] .notice:not(.case-notice){height:56px}.notifications[data-scrolled] .notice:not(.case-notice) .notice-copy>span{display:none}
.hero{min-height:680px;max-height:none}.hero-content{left:16px;bottom:32px;width:600px;max-width:calc(100% - 32px);padding-right:0;gap:24px}#hero-heading{max-width:580px}.hero-cover{object-position:52% center}.hero-actions{flex-wrap:wrap}
.clients{padding:28px 16px}.logo-window{margin-top:20px}.marquee-track .client-row,.marquee-track .client-row li{min-height:96px}.marquee-track .client-row li{width:150px}
.introduction{padding:64px 16px 80px}.intro-layout{grid-template-columns:1fr;max-width:560px;gap:48px}.intro-copy,.intro-media-column{gap:20px}.studio-film{aspect-ratio:1.42857}.connected-system{padding:16px 16px 80px}.system-inner{grid-template-columns:1fr;max-width:560px;gap:40px}.client-film{height:auto;aspect-ratio:1.42857;min-height:0}.system-copy{gap:20px}.service-list a{min-height:44px}.service-list{gap:4px}
.selected-work{padding:24px 16px 80px}.work-section-heading{margin-bottom:24px;gap:16px}.request-work{max-width:124px}.request-work>span+span{display:flex;align-items:center;justify-content:flex-end;min-height:32px}.work-grid,.work-grid-secondary,.additional-work .more-work-first,.more-work-last{grid-template-columns:1fr;gap:12px}.work-grid-secondary,.more-work-last{margin-top:12px}.case-cover{aspect-ratio:120 / 143}.work-grid-secondary .case-cover,.additional-work .more-work-first .case-cover,.additional-work .work-grid-secondary .case-cover{aspect-ratio:105 / 143}.case-identity,.work-grid-secondary .case-identity{left:16px;right:16px;bottom:16px;gap:12px}.case-logo-tile{width:40px;height:40px}.additional-work{padding-top:0}.testimonials{padding:60px 16px}.testimonial-inner{max-width:555px}.testimonial-review{padding:16px}.review-logo{width:48px}.testimonial-review blockquote{margin-top:40px;}.review-avatar{width:40px;height:40px}
.service-nav{gap:8px 20px;padding:16px}.service-nav>a:first-child{width:100%;margin-bottom:4px}.service-page{padding:64px 16px}.service-hero{margin-bottom:64px}.service-page section{padding-block:32px}.related-services{flex-direction:column;gap:16px}.related-services a{min-height:32px}.service-footer{padding:24px 16px;flex-direction:column;gap:16px}
}
@media(max-width:374px){.location{display:none}.menu-toggle{margin-left:auto}.notifications{width:288px}.request-work{max-width:115px}.review-logo{display:none}}
@media(max-height:600px) and (min-width:810px){.hero{min-height:600px}.notifications{width:340px}.hero-content{width:560px}}
@media(prefers-reduced-motion:reduce){.marquee-track.marquee-ready{animation:none}.case-cover>.case-hover-image{transition:none}}
@media(prefers-reduced-motion:reduce){.marquee-track .client-row{width:100%;gap:16px;grid-template-columns:repeat(6,minmax(0,1fr))}.marquee-track .client-row li{width:auto;min-width:0}.marquee-track .client-row[aria-hidden="true"]{display:none}}
@media(prefers-reduced-motion:reduce) and (max-width:999px){.marquee-track .client-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce) and (max-width:809px){.marquee-track .client-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Homepage header scale and a restrained opening entrance. */
.navigation .brand{align-items:flex-start}.navigation .brand-label{margin-top:0}
@keyframes hero-content-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.hero-content{animation:hero-content-enter .75s cubic-bezier(.22,1,.36,1) .2s both}.hero-content:focus-within{animation:none}}
@media(prefers-reduced-motion:reduce){.hero-content{animation:none;opacity:1;transform:none}}

.hero-actions .glass-button{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:rgba(255,255,255,.22)}
.case-cover .case-open{position:absolute;top:16px;right:16px;z-index:3;min-height:0;height:34px;padding:0 12px;color:#fff;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .2s,transform .2s}
.case-cover:hover .case-open,.case-cover:focus-visible .case-open{opacity:1;transform:translateY(0)}
@media(hover:none){.case-cover .case-open{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.case-cover .case-open{transition:none;transform:none}}
/* The Open label replaces the pointer, rather than occupying a card corner. */
.case-cover .case-open,.case-cover:hover .case-open{opacity:0;transform:none;transition:opacity .12s;will-change:auto}
.case-cover:focus-visible .case-open{opacity:1;left:auto;top:16px;right:16px;transform:none}
@media(hover:hover) and (pointer:fine){
 .case-cover.is-pointer-over{cursor:none}
 .case-cover.is-pointer-over .case-open{opacity:1;right:auto;transform:translate(-50%,-50%)}
}
@media(hover:none),(pointer:coarse){.case-cover .case-open{display:none}}
@media(prefers-reduced-motion:reduce){.case-cover .case-open{transition:none}}

#case-whitestones .case-cover>img{object-position:left center}.case-logo-placeholder{background:#111}.case-identity>div{min-width:0}.case-identity p{white-space:normal;text-wrap:pretty}

/* Quiet client-proof panels preserve the former media geometry. */
.quote-panel{margin:0;background:#f0f0ed;color:#111;border-radius:12px;position:relative;min-width:0;overflow:hidden}
.quote-panel blockquote{position:absolute;inset:clamp(20px,2.5vw,36px);bottom:112px;display:flex;align-items:center;margin:0}
.quote-panel blockquote p{margin:0;}
.quote-panel figcaption{position:absolute;left:clamp(20px,2.5vw,36px);right:20px;bottom:28px;display:flex;align-items:center;gap:12px}
.quote-panel figcaption img{width:48px;height:48px;object-fit:cover;border-radius:50%;flex:none}
.quote-panel figcaption>div{display:flex;flex-direction:column;gap:3px}.quote-role{color:#72726e}
@media(min-width:810px) and (max-width:999px){.quote-panel blockquote{inset:20px;bottom:92px}.quote-panel figcaption{left:20px;bottom:20px}.quote-panel figcaption img{width:40px;height:40px}}
@media(max-width:809px){.quote-panel blockquote{inset:24px;bottom:100px}.quote-panel figcaption{left:24px;bottom:24px}.quote-panel figcaption img{width:40px;height:40px}}
@media(max-width:374px){.quote-panel blockquote{inset:18px;bottom:82px}.quote-panel figcaption{left:18px;bottom:18px;gap:10px}}

/* Reference-inspired quote cards: paired identities, simple case-study arrow. */
.quote-panel-reference{display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:24px;background:#f0f0ed;box-sizing:border-box;overflow:visible}
.quote-panel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none}.quote-panel-portraits{display:flex;align-items:center}.quote-company-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#111;border-radius:12px;overflow:hidden}.quote-company-icon img{width:100%;height:100%;object-fit:cover}.studio-film .quote-company-icon img{width:23px;height:34px;object-fit:contain}.quote-panel-top .quote-avatar{width:48px;height:48px;object-fit:cover;border-radius:50%;margin-left:-7px;border:3px solid #f0f0ed;box-sizing:content-box}
.quote-case-link{display:flex;width:44px;height:44px;align-items:center;justify-content:center;background:#282828;color:white;border-radius:50%;flex:none;transition:background .2s,transform .2s}.quote-case-link svg{width:24px;height:24px}.quote-case-link:hover{background:#444;transform:translateX(2px)}.quote-case-link:focus-visible{outline:2px solid #111;outline-offset:4px}
.quote-panel-reference blockquote{position:static;inset:auto;display:flex;align-items:center;flex:1;margin:0}.quote-panel-reference figcaption{position:static;inset:auto;display:block;margin:0}.quote-panel-reference .quote-person{color:#555}.quote-panel-reference .quote-role{color:#777}
@media(min-width:810px) and (max-width:999px){.quote-panel-reference{padding:22px;gap:16px}.quote-company-icon{width:40px;height:40px}.quote-panel-top .quote-avatar{width:40px;height:40px}.quote-case-link{width:40px;height:40px}}
@media(max-width:809px){.quote-panel-reference{padding:24px;min-height:280px;height:auto;gap:20px}}
@media(max-width:374px){.quote-panel-reference{padding:20px;gap:16px;min-height:280px}.quote-company-icon{width:40px;height:40px}.quote-panel-top .quote-avatar{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.quote-case-link{transition:none}.quote-case-link:hover{transform:none}}
/* Centre HOWSR's interface rather than the full photograph. Preserve image scale. */
#case-hauser .case-cover{background:#111}

#testimonials-label{color:var(--text-label)}
/* Softer service labels with a medium Geist weight. */
.selected-work .case-identity p{color:inherit;opacity:.7;}

.testimonial-review{overflow:hidden}.review-toggle{width:25px;height:25px;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}.review-toggle svg{width:25px;height:25px;display:block}.testimonial-review[data-expanded="false"] .review-toggle{transform:rotate(0)}.testimonial-review[data-expanded="true"] .review-toggle{transform:rotate(45deg)}@media(prefers-reduced-motion:reduce){.review-toggle{transition:none}}
/* Frame the phone interface centrally, with enough overscan to fill every edge. */


/* Keep the Arcway tablet cover anchored to the right at every breakpoint. */
#case-arcway .case-cover > img{object-position:right center}

/* Mobile opening: one borderless glass header over the project photograph. */
.mobile-booking{display:none}
@media(max-width:809px){
 .navigation{position:fixed;inset:calc(16px + env(safe-area-inset-top)) 16px auto;width:auto;max-width:none;margin:0;min-height:68px;padding:10px 12px 10px 16px;gap:12px;border:0;border-radius:18px;background:rgba(35,37,36,.34);-webkit-backdrop-filter:blur(24px) saturate(1.15);backdrop-filter:blur(24px) saturate(1.15);box-shadow:none;isolation:isolate}
 .navigation .brand{margin-right:auto;gap:3px;align-items:flex-start}
 .navigation .location,.notifications{display:none}
 .mobile-booking{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 16px;border-radius:999px;background:#f7f5ef;color:#171817;white-space:nowrap;flex:none;transition:background .2s}
 .mobile-booking:hover{background:#fff}
 .menu-toggle{position:relative;display:flex;flex-direction:column;gap:6px;width:44px;height:44px;min-width:44px;flex:none;padding:10px;border:0;border-radius:10px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
 .menu-line{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .2s}
 .menu-toggle[aria-expanded="true"] .menu-line:first-child{transform:translateY(3.75px) rotate(45deg)}
 .menu-toggle[aria-expanded="true"] .menu-line:last-child{transform:translateY(-3.75px) rotate(-45deg)}
 .navigation>nav{left:0;right:0;top:calc(100% + 8px);padding:12px;border:0;border-radius:18px;background:rgba(32,34,33,.94);color:#fff;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:none}
 .navigation>nav a{padding:12px 16px;min-height:52px;border-radius:10px}
 .navigation>nav a:hover,.navigation>nav a:focus-visible{background:#ffffff14;opacity:1}
 .navigation a:focus-visible,.menu-toggle:focus-visible{outline:2px solid white;outline-offset:4px}
 .hero{height:100svh;min-height:600px}
 .hero-content{left:24px;bottom:calc(48px + env(safe-area-inset-bottom));width:620px;max-width:calc(100% - 48px);gap:28px;padding:0}
 .hero-actions .glass-button{min-height:52px;padding:14px 20px;border-radius:999px;gap:8px}
 .hero-cover{object-position:55% center}
}
@media(max-width:374px){.navigation{inset-inline:12px;padding-left:12px;gap:6px}.mobile-booking{padding-inline:12px}.hero-content{left:20px;max-width:calc(100% - 40px);bottom:36px}}
@media(max-height:500px) and (max-width:809px){.hero{min-height:500px}.hero-content{bottom:28px;gap:20px}}
@media(prefers-reduced-motion:reduce){.menu-line,.mobile-booking{transition:none}}