@font-face{font-family:Cabinet;src:url('assets/cabinet-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Cabinet;src:url('assets/cabinet-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Cabinet;src:url('assets/cabinet-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cabinet;src:url('assets/cabinet-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Cabinet;src:url('assets/cabinet-900.woff2') format('woff2');font-weight:900;font-display:swap}
:root{--paper:#fff;--ink:#111;--muted:#676767;--accent:#e5332a;--shell:#f0f0f1;--header-height:88px;color-scheme:light;font-family:Cabinet,Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0;background:none}body{overflow-x:hidden}button,a{touch-action:manipulation}
/* Layers: stage content 0, brand morph 1, service reveal 2, controls 3, header 10. */
.site-header{height:var(--header-height);position:fixed;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 6.2%;background:rgb(255 255 255 / .96)}
.brand{font-size:34px;letter-spacing:-1.5px;font-weight:900;line-height:1}.brand span{color:var(--accent)}
.nav-services{justify-self:start;font-size:16px;font-weight:700;padding:10px 0;display:flex;align-items:center;gap:12px}.nav-services span{font-size:23px;font-weight:500}
.contact{justify-self:end;border:1px solid #d4d4d4;padding:6px 7px 6px 20px;border-radius:30px;font-size:15px;font-weight:700;display:flex;gap:18px;align-items:center}.contact span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;font-size:23px;font-weight:400;transition:background .2s,transform .2s}.contact:hover span{background:var(--accent);transform:rotate(45deg)}
.opening{position:relative}.stage{height:100svh;min-height:540px;width:100%;position:relative;display:flow-root;overflow:hidden;overflow:clip;background:white}
.intro{position:absolute;top:50%;left:0;width:100%;transform:translateY(-45%);text-align:center}.wordmark{display:flex;justify-content:center;font-size:clamp(110px,16.4vw,260px);font-weight:900;line-height:.9;letter-spacing:-.065em;white-space:nowrap;padding-right:.08em;position:relative}.wordmark>span{display:inline-block;transform-origin:50% 75%}.wordmark .brand-dot{color:var(--accent);margin-left:.025em}
.intro-copy h1{font-size:clamp(28px,3.15vw,48px);line-height:1.07;letter-spacing:-.035em;font-weight:500;margin:38px 0 22px}.intro-copy p{font-size:clamp(16px,1.5vw,21px);color:#6a6a6a;line-height:1.45;margin:0 20px}.explore-link{font-size:15px;font-weight:700;margin-top:27px;padding:8px 10px}.explore-link span{margin-left:12px;color:var(--accent)}
.services-shell{position:absolute;left:7%;width:86%;height:calc(100svh - 140px);max-height:780px;top:calc(var(--header-height) + 14px);padding:20px;border-radius:40px;background:var(--shell);z-index:2;transform-origin:0 0;visibility:hidden;will-change:transform;display:flex;flex-direction:column;gap:14px}
.service-tabs{display:flex;justify-content:space-between;gap:12px;flex:none}.service-tabs button{flex:1;border:1px solid transparent;background:#f8f8f8;border-radius:30px;padding:13px 18px;font-size:16px;line-height:1;white-space:nowrap;font-weight:500;transition:color .2s,background .2s,border-color .2s}.service-tabs button[aria-selected=true]{background:#fff;border-color:#1a1a1a;color:var(--accent);font-weight:700}.service-tabs button:hover{background:#fff}
.service-card{background:#fff;border-radius:30px;padding:16px;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 42px;gap:0 32px;min-height:0;flex:1;overflow:hidden}
.service-visual{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:22px;background:#e9e9e8;isolation:isolate}
.service-copy{min-width:0;align-self:center;padding:10px 18px 14px 0}.service-kicker{font-size:13px;color:#737373;font-weight:700;line-height:1.3;margin:0 0 20px}.service-copy h2{font-weight:700;letter-spacing:-.045em;font-size:clamp(30px,3vw,48px);line-height:1.03;margin:0 0 22px}.service-description{font-size:clamp(16px,1.35vw,20px);color:#6b6b6b;line-height:1.45;margin:0 0 24px}.service-details{list-style:none;padding:0;margin:0 0 26px;font-size:clamp(13px,1.05vw,16px);line-height:1.65;color:#333}.service-details li::before{content:'+';color:var(--accent);margin-right:10px}.service-contact{font-size:14px;font-weight:700;display:inline-flex;gap:15px;align-items:center;border-bottom:1px solid #aaa;padding-bottom:7px}.service-contact span{color:var(--accent);font-size:20px}.service-caption{grid-column:1/-1;margin:0;align-self:end;justify-self:center;font-weight:700;font-size:18px;letter-spacing:-.025em}.service-caption span{font-weight:400}
.motion-controls{position:absolute;bottom:11px;right:7.5%;display:flex;gap:24px;z-index:3}.motion-controls button{font-size:12px;color:#737373;padding:7px 0}.motion-controls span{display:inline-block;margin-left:5px}.motion-controls button:hover{color:#111}#replay{visibility:hidden}
.skip-link{position:fixed;left:12px;top:-60px;z-index:20;background:#fff;border:1px solid #111;padding:12px}.skip-link:focus{top:12px}.no-script{position:relative;z-index:20;margin:100px 30px;background:white}
@media(min-width:1800px){.services-shell{max-width:1640px;left:calc((100% - 1640px)/2)}.intro{transform:translateY(-44%)}}
@media(max-height:740px) and (min-width:768px){:root{--header-height:70px}.intro-copy h1{font-size:32px;margin:25px 0 16px}.intro-copy p{font-size:17px}.wordmark{font-size:21vh}.services-shell{height:calc(100svh - 116px);padding:16px;gap:10px}.service-tabs button{padding:11px}.service-kicker{margin-bottom:12px}.service-copy h2{font-size:32px;margin-bottom:14px}.service-description{font-size:16px;margin-bottom:13px}.service-details{margin-bottom:15px}.service-card{grid-template-rows:minmax(0,1fr) 32px;gap:0 24px}.service-caption{font-size:16px}}
@media(max-width:767px){:root{--header-height:72px}.site-header{padding:0 6%;grid-template-columns:1fr auto 1fr}.brand{font-size:27px}.nav-services{font-size:13px;gap:4px}.nav-services span{font-size:17px}.contact{font-size:0;padding:0;border:0;gap:0}.contact span{width:37px;height:37px;font-size:23px}.intro{transform:translateY(-42%)}.wordmark{font-size:20.5vw;letter-spacing:-.07em}.intro-copy h1{font-size:32px;margin:30px 16px 18px}.intro-copy p{font-size:16px;max-width:340px;margin:0 auto;padding:0 15px}.explore-link{margin-top:20px}.services-shell{left:4%;width:92%;top:80px;height:calc(100svh - 120px);max-height:none;padding:11px;border-radius:24px;gap:10px}.service-tabs{gap:6px}.service-tabs button{font-size:10px;padding:11px 5px;border-radius:22px}.service-card{grid-template-columns:1fr;grid-template-rows:minmax(170px,43%) 1fr 24px;padding:10px;border-radius:18px;gap:0}.service-visual{border-radius:12px}.service-copy{padding:18px 8px 6px;align-self:start}.service-kicker{font-size:10px;margin:0 0 8px}.service-copy h2{font-size:29px;margin:0 0 10px}.service-copy h2 br{display:none}.service-description{font-size:14px;line-height:1.35;margin:0 0 11px}.service-details{font-size:11px;line-height:1.5;margin-bottom:11px}.service-contact{font-size:12px;padding-bottom:3px}.service-contact span{font-size:16px}.service-caption{font-size:13px}.motion-controls{right:5%;bottom:8px;gap:22px}.motion-controls button{font-size:11px}}
@media(max-width:767px) and (max-height:740px){.service-card{grid-template-rows:minmax(130px,40%) 1fr 20px}.service-copy{padding:12px 5px 5px}.service-kicker{display:none}.service-copy h2{font-size:25px;margin-bottom:8px}.service-description{font-size:12px;margin-bottom:9px}.service-details{font-size:10px;margin-bottom:8px}.service-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) *,html:not(.motion-enabled) *::before,html:not(.motion-enabled) *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}html:not(.motion-enabled) .opening .stage{min-height:100svh;height:auto;overflow:visible;padding-top:100px}html:not(.motion-enabled) .intro{position:relative;top:auto;transform:none;padding:80px 0}html:not(.motion-enabled) .sphere{display:none}html:not(.motion-enabled) .services-shell{position:relative;top:auto;height:720px;visibility:visible;transform:none!important;margin:0 0 60px}html:not(.motion-enabled) .motion-controls{display:none}}


/* Expanded service catalogue: the approved hero and panel silhouette stay intact. */
.service-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 10px}
.service-tabs button{font-size:14px;white-space:normal;line-height:1.15;padding:11px 10px;min-height:40px}
.service-picker{display:none}
.service-copy{max-height:100%;overflow-y:auto;scrollbar-width:thin;padding-top:6px;padding-bottom:6px;overscroll-behavior-y:auto}
.service-kicker{font-size:12px;margin-bottom:14px}
.service-copy h2{font-size:clamp(27px,2.65vw,42px);margin-bottom:17px}
.service-description{font-size:clamp(15px,1.25vw,19px);line-height:1.42;margin-bottom:18px}
.deliverables-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;color:#777}
.service-details{font-size:clamp(12px,1vw,15px);line-height:1.6;margin-bottom:20px}
.service-footer{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:15px;padding:10px 4px 0}
.service-caption{align-self:center;font-size:16px}
.service-navigation{display:flex;align-items:center;gap:12px;flex-shrink:0}
.service-navigation button{border:1px solid #dedede;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1;display:grid;place-items:center;transition:border-color .2s,color .2s}
.service-navigation button:hover{border-color:#111;color:var(--accent)}
.service-count{font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#666}
@media(min-width:768px) and (max-width:1100px){.service-card{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:22px}.service-tabs button{font-size:12px}.service-copy{padding-right:7px}}
@media(min-width:768px) and (max-height:740px){.service-tabs{gap:6px 8px}.service-tabs button{padding:8px;min-height:33px}.service-copy h2{font-size:29px;margin-bottom:12px}.service-kicker{margin-bottom:9px}.service-description{font-size:15px;margin-bottom:13px}.service-details{font-size:12px;line-height:1.5;margin-bottom:12px}.deliverables-label{margin-bottom:5px}.service-footer{padding-top:5px}.service-caption{font-size:14px}}
@media(max-width:767px){
 .service-tabs{display:none}
 .service-picker{display:grid;gap:6px;flex:none;padding:0 2px}
 .service-picker label{font-size:10px;font-weight:700;color:#666;margin-left:8px}
 .service-picker select{width:100%;min-width:0;background:white;color:#111;border:1px solid #222;border-radius:24px;padding:10px 30px 10px 14px;font:700 13px Cabinet,Arial,sans-serif;cursor:pointer}
 .service-card{display:flex;flex-direction:column;gap:0;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:#ccc transparent}
 .service-visual{height:clamp(160px,28svh,235px);min-height:160px;flex:none}
 .service-copy{flex:none;max-height:none;overflow:visible;padding:17px 8px 14px}
 .service-kicker{display:block;font-size:10px;margin-bottom:8px}
 .service-copy h2{font-size:28px;margin-bottom:12px}
 .service-description{font-size:14px;line-height:1.42;margin-bottom:15px}
 .deliverables-label{font-size:10px;margin-bottom:7px}
 .service-details{font-size:12px;line-height:1.6;margin-bottom:15px}
 .service-footer{flex:none;margin-top:auto;padding:10px 8px 3px;border-top:1px solid #eee;align-items:center}
 .service-caption{font-size:13px}
 .service-navigation{gap:7px}.service-count{font-size:10px}.service-navigation button{width:25px;height:25px}
}
.service-description strong{font-weight:700;color:#282828}

/* One typographic lockup, with a power symbol that closes into the actual O. */
.brand{display:flex;flex-direction:row;align-items:baseline;gap:7px}
.brand .brand-name,.brand .brand-studio{color:var(--ink)}
.brand .brand-dot{color:var(--accent)}
.brand-dot{position:relative;color:transparent!important;display:inline-block;flex:none;align-self:center;width:.13em;height:.13em;top:.24em;line-height:0}
.brand-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent)}
.brand .brand-dot{width:.15em;height:.15em;top:.25em}
.brand .brand-studio{font-size:.65em;letter-spacing:-.055em;font-weight:900}
.hero-brand{display:flex;align-items:baseline;justify-content:center;gap:.1em;font-size:clamp(74px,13.4vw,210px);font-weight:900;line-height:.9;white-space:nowrap}
.hero-brand .wordmark{font-size:1em;line-height:inherit;padding:0;letter-spacing:-.065em}
.studio-name{display:flex;align-items:baseline;font-size:.57em;font-weight:900;line-height:inherit;letter-spacing:-.055em;margin:0;padding:0;text-transform:none}
.studio-name>span{display:inline-block;transform-origin:50% 85%}
.studio-name .brand-dot{color:var(--accent);margin-left:.025em}
.glyph-baseline{display:inline-block;width:0;height:0;padding:0;margin:0;vertical-align:baseline}
.intro-copy h1{margin-top:42px;margin-bottom:18px}
.intro-copy p{font-size:clamp(16px,1.4vw,20px);line-height:1.45}
.intro-signoff{color:#292929}
.power-symbol{position:absolute;left:0;top:0;width:90px;height:90px;z-index:1;opacity:0;visibility:hidden;pointer-events:none;color:var(--ink);transform-origin:50% 50%;overflow:visible}
.power-stem{color:var(--accent)}
.wordmark>span,.studio-name>span,.hero-brand>.brand-dot{backface-visibility:hidden}
body[data-phase="hero"] .wordmark>span,body[data-phase="hero"] .studio-name>span,body[data-phase="hero"] .hero-brand>.brand-dot{will-change:transform}
.services-shell{transform-origin:50% 50%}
html:not([data-ready=true]) .wordmark>span,html:not([data-ready=true]) .studio-name,html:not([data-ready=true]) .hero-brand>.brand-dot,html:not([data-ready=true]) .intro-copy{visibility:hidden}
@media(max-width:767px){.brand{gap:5px;font-size:25px}.hero-brand{font-size:15.2vw;gap:.1em}.studio-name{font-size:.57em}.intro-copy h1{font-size:29px;margin:32px 16px 16px}.intro-copy p{font-size:14px;max-width:380px}}
@media(max-height:740px) and (min-width:768px){.hero-brand{font-size:min(13.4vw,21vh)}.intro-copy h1{margin-top:32px;margin-bottom:15px}.intro-copy p{font-size:16px}.explore-link{margin-top:19px}}

/* Small controls stay easy to use without changing the approved panel design. */
.service-navigation button{min-width:44px;min-height:44px;height:44px}
.service-card{grid-template-rows:minmax(0,1fr) 56px}
.service-footer{flex-wrap:wrap;align-items:center}
.service-caption{min-width:0;flex:1 1 90px}
.service-navigation{margin-left:auto}
.service-learn-more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:20px;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}
.service-learn-more:hover{color:#c42b23}
.service-learn-more:focus-visible{outline-offset:3px}
.motion-controls button{min-height:44px}
.site-header .contact{min-width:44px;min-height:44px;justify-content:center}
@media(max-width:767px){
 .stage{height:auto;min-height:100svh;padding-bottom:56px}
 .intro{top:50svh}
 .services-shell{position:relative;top:auto;left:auto;margin:80px auto 0;height:auto;min-height:calc(100svh - 120px);max-height:none}
 .service-card{flex:none;overflow:visible}
 .service-picker select{min-height:44px;font-size:16px}
 .service-footer{gap:8px 10px;padding-bottom:7px}
 .service-caption{flex-basis:100%}
 .service-navigation{justify-content:flex-end;width:100%}
 .service-learn-more{margin-left:0;margin-right:20px;font-size:13px}
 .motion-controls{bottom:max(0px,env(safe-area-inset-bottom))}
}
/* A short landscape window must not compress the artwork into a thin strip.
   Let the panel contribute its full height to the pinned stage, then let the
   page scroll normally to its remaining copy and actions. */
@media(max-height:550px){
 :root{--header-height:60px}
 .stage{height:auto;min-height:100svh;padding-bottom:56px}
 .intro{top:calc(50svh + 28px);transform:translateY(-50%)}
 .hero-brand{font-size:min(13.4vw,17svh)}
 .intro-copy h1{font-size:24px;margin:16px 16px 12px}
 .intro-copy p{font-size:14px;line-height:1.35}
 .explore-link{margin-top:9px;min-height:44px}
 .services-shell{position:relative;top:auto;left:auto;margin:calc(var(--header-height) + 14px) auto 0;height:auto;min-height:440px;max-height:none;padding:14px;gap:12px}
 .service-tabs{display:none}
 .service-picker{display:grid;gap:6px;flex:none;padding:0 2px}
 .service-picker label{font-size:10px;font-weight:700;color:#666;margin-left:8px}
 .service-picker select{width:100%;min-width:0;min-height:44px;background:#fff;color:#111;border:1px solid #222;border-radius:24px;padding:10px 30px 10px 14px;font:700 16px Cabinet,Arial,sans-serif}
 .service-card{flex:none;overflow:visible;grid-template-rows:minmax(260px,auto) auto;gap:0 22px}
 .service-visual{min-height:260px;align-self:stretch}
 .service-copy{max-height:none;overflow:visible;align-self:start;padding:12px 6px}
 .service-copy h2{font-size:28px}
 .service-description{font-size:15px}
 .service-details{font-size:13px}
 .service-footer{padding-top:12px}
}