/* v7: mobile experience — hamburger menu, full-screen portrait cover, restrained scroll motion.
   Everything here is scoped to small screens; the desktop layout is untouched. */
@view-transition{navigation:auto}
.scroll-cue,.menu-button,.mobile-menu,.scroll-progress{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:760px){
:root{--bar:64px;--gutter:18px;--ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-padding-top:calc(var(--bar) + 1rem)}
body{overflow-x:clip}.js-menu body{padding-top:var(--bar)}
.wrap{width:calc(100% - var(--gutter)*2)}

/* ---------- Header: wordmark + hamburger ---------- */
.js-menu .topbar{position:fixed;inset:0 0 auto;z-index:60;width:100%;height:var(--bar);min-height:0;margin:0;padding:0 var(--gutter);display:flex;flex-direction:row;align-items:center;justify-content:space-between;border:0;transition:color .3s}
.js-menu .topbar::before{content:"";position:absolute;inset:0 0 auto;height:calc(var(--bar) + 56px);z-index:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);background:linear-gradient(to bottom,var(--ink) 0,color-mix(in srgb,var(--ink) 92%,transparent) 38%,color-mix(in srgb,var(--ink) 55%,transparent) 68%,transparent 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%)}
.js-menu .topbar.is-solid::before{opacity:1}
.menu-open .topbar::before{opacity:0!important}
.js-menu .topbar>.nav,.js-menu .topbar>.preferences{display:none}
.js-menu .wordmark{font-size:1.25rem;position:relative;z-index:2}
/* over the dark portrait the bar always uses the light-on-dark palette */
.has-cover .topbar:not(.is-solid),.menu-open .topbar{--paper:#f5f5f5;color:#f5f5f5}.has-cover .topbar:not(.is-solid){--accent:linear-gradient(110deg,#ff5f6d,#ffc371)}
:root[data-theme="light"].menu-open .topbar{--paper:#201e1c;color:#201e1c}

.js-menu .menu-button{display:inline-flex;align-items:center;gap:12px;height:44px;margin-right:-8px;padding:0 8px;background:none;border:0;color:inherit;font:500 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;position:relative;z-index:2}
.menu-button i{position:relative;display:block;width:26px;height:12px}
.menu-button i::before,.menu-button i::after{content:"";position:absolute;left:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),width .45s var(--ease),top .45s var(--ease)}
.menu-button i::before{top:0;width:100%}
.menu-button i::after{top:10.5px;width:62%;left:auto;right:0}
.menu-button[aria-expanded="true"] i::before{top:5px;transform:rotate(45deg)}
.menu-button[aria-expanded="true"] i::after{top:5px;width:100%;transform:rotate(-45deg)}

.js-menu .scroll-progress{display:block;position:fixed;top:0;left:0;z-index:70;width:100%;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- Full-screen menu ---------- */
.js-menu .mobile-menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:50;padding:calc(var(--bar) + 28px) var(--gutter) max(24px,env(safe-area-inset-bottom));background:var(--ink);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease),visibility 0s .6s}
.menu-open .mobile-menu{visibility:visible;clip-path:inset(0);transition:clip-path .6s var(--ease),visibility 0s}
.menu-open{overflow:hidden}
.mobile-menu ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mobile-menu li{border-bottom:1px solid var(--line);overflow:hidden}
.mobile-menu li a{display:flex;align-items:baseline;gap:18px;padding:20px 0;font:400 clamp(1.9rem,8.6vw,2.5rem)/1.1 var(--serif);letter-spacing:-.02em;color:var(--paper)}
.mobile-menu li a::before{content:attr(data-index);font:500 .75rem/1 var(--sans);letter-spacing:.15em;color:var(--gold);transform:translateY(-.5em)}
.mobile-menu li a:active{color:var(--gold)}
.mobile-menu li a,.mobile-menu .menu-foot>*{opacity:0;transform:translateY(28px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.menu-open .mobile-menu li a,.menu-open .mobile-menu .menu-foot>*{opacity:1;transform:none;transition-delay:calc(.16s + var(--i,0)*.06s)}
.menu-foot{margin-top:auto;padding-top:32px;display:grid;gap:22px}
.menu-prefs{display:flex;align-items:center;justify-content:space-between;gap:16px}
.menu-prefs .theme-toggle{font-size:.8125rem;padding:6px 14px}
.menu-prefs .language-toggle a{font-size:.8125rem;min-width:48px}
.menu-contact{display:flex;gap:24px;font-size:.9375rem;color:var(--muted)}
.menu-contact a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--coral);color:var(--paper)}

/* ---------- Cover: full-screen portrait ---------- */
.js-menu.has-cover body{padding-top:0}
.has-cover .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:100svh auto;gap:0;padding:0;width:100vw;margin-inline:calc(50% - 50vw);align-items:stretch}
.has-cover .hero-text{display:contents;animation:none}
.has-cover .portrait{grid-area:1/1;position:relative;height:100svh;overflow:hidden;animation:none;background:#0a0a0a}
.has-cover .portrait img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 0;transform-origin:50% 30%;transform:scale(calc(1.02 + var(--p,0)*.1)) translateY(calc(var(--p,0)*4%));filter:none;animation:cover-in 1.7s var(--ease) both;will-change:transform}
.has-cover .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0a0a0acc 0,#0a0a0a00 18%,#0a0a0a00 52%,#0a0a0ab8 72%,#0a0a0af2 90%,#0a0a0a 100%);pointer-events:none}
.has-cover .portrait figcaption{display:none}
.has-cover .hero-body{grid-area:2/1;padding:44px var(--gutter) 56px}
.has-cover .hero-body .intro{font-size:1.125rem;line-height:1.65}
@keyframes cover-in{from{transform:scale(1.08);opacity:.35}}

.has-cover .scroll-cue{display:flex;align-items:center;gap:12px;position:absolute;z-index:3;left:var(--gutter);bottom:max(26px,env(safe-area-inset-bottom));font:500 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#f5f5f5;opacity:calc(.8 - var(--p,0)*4)}
.scroll-cue::before{content:"";width:1px;height:30px;background:linear-gradient(#ffc371,#ff5f6d);transform-origin:50% 0;animation:cue 2.2s var(--ease) 3 forwards}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* line-by-line headline reveal (spans are injected by mobile.js) */
.line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.line>span{display:block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(.35s + var(--i,0)*.12s)}
.is-ready .line>span{transform:none}
.fade-up{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(.3s + var(--i,0)*.12s)}
.is-ready .fade-up{opacity:1;transform:none}

/* Cover: the headline sits on the portrait */
.has-cover .hero-head{grid-area:1/1;align-self:end;position:relative;z-index:2;padding:0 var(--gutter) calc(max(26px,env(safe-area-inset-bottom)) + 62px);--gold:#ffc371;--coral:#ff5f6d;--accent:linear-gradient(110deg,#ff5f6d,#ffc371);color:#f5f5f5;opacity:calc(1 - var(--p,0)*1.6);transform:translateY(calc(var(--p,0)*-40px))}
.has-cover .hero-head .eyebrow{font-size:.75rem;letter-spacing:.12em;line-height:1.8}.hero-head .eyebrow .t{display:block}.hero-head .eyebrow .sep{display:none}
.has-cover .hero-head h1{font-size:clamp(2.5rem,11.6vw,3.6rem);margin:.9rem 0 0}
.has-cover .hero-head .gradient{background:var(--accent);-webkit-background-clip:text;background-clip:text}

/* ---------- Scroll motion ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*.08s)}
.reveal.in{opacity:1;transform:none}
/* the desktop hover accents become "in focus" accents while scrolling */
.approach article .method-icon,.ai-card,.expertise-grid article,.career-list h3{transition:color .5s,border-color .5s,transform .5s var(--ease)}
.approach article.focus .method-icon{color:var(--coral);border-color:var(--coral);transform:translateY(-3px)}
.ai-card.focus{border-color:var(--coral)}
.expertise-grid article.focus{border-color:var(--coral)}
.career-list article.focus h3{color:var(--gold)}
.career-feature{position:relative;border-top-color:transparent}
.career-feature::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .15s}
.career-feature.in::before{transform:scaleX(1)}
@media(max-height:500px){.has-cover .hero{grid-template-rows:150svh auto}.has-cover .portrait{height:150svh}}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
.reveal,.fade-up,.line>span{opacity:1!important;transform:none!important;filter:none!important}
.has-cover .portrait img{transform:none!important}
.has-cover .hero-head,.has-cover .scroll-cue{opacity:1!important;transform:none!important}
.scroll-cue::before{transform:none}
}