/* Homepage: hero, practice, particle membrane, capabilities and plate, problems, selected work, approach, experience, project brief, intro sequence. */

/* hero */
.hero{position:relative;min-height:max(740px,100vh);display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}

/* WebGL systems scene: full bleed behind the type, never takes pointer events */
.hero-gl{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s ease}
.hero-gl canvas{display:block;width:100%;height:100%}
.hero.is-gl .hero-gl{opacity:1}

/* projected-canvas fallback (v1.1 renderer) */
.hero-canvas{position:absolute;top:0;right:0;width:70%;height:100%;z-index:0;pointer-events:none;display:none}
.hero.is-2d .hero-canvas{display:block}
.hero-canvas canvas{display:block;width:100%;height:100%}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0A0A09 0%,rgba(10,10,9,.9) 26%,rgba(10,10,9,0) 58%),linear-gradient(0deg,#0A0A09 0%,rgba(10,10,9,0) 22%)}
.hero.is-gl .hero-shade{background:radial-gradient(ellipse 50% 44% at 31% 52%,rgba(10,10,9,.68),rgba(10,10,9,.35) 55%,rgba(10,10,9,0) 78%),linear-gradient(0deg,#0A0A09 0%,rgba(10,10,9,.72) 13%,rgba(10,10,9,0) 30%),linear-gradient(180deg,rgba(10,10,9,.6) 0%,rgba(10,10,9,0) 15%)}
.hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-top:116px;padding-bottom:40px;gap:48px;pointer-events:none}
.hero-inner a,.hero-inner button{pointer-events:auto}
.hero-meta{display:grid;grid-template-columns:auto 1fr auto auto;gap:32px;align-items:center}
.hero-meta .rule{height:1px;background:var(--line)}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(60px,10.4vw,196px);line-height:.86;letter-spacing:-.025em;color:var(--ink)}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.14em}
.hero-title .ln>span{display:block}
.hero-title .l2{padding-left:1.35em}
.hero-title .l3{padding-left:.5em}
.hero-title em{color:var(--gold)}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,.9fr);gap:48px;align-items:end;border-top:1px solid var(--line);padding-top:28px}
.lede{font-size:17px;line-height:1.65;color:var(--ink2);max-width:430px;font-weight:400}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-legend{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.hero-legend .mono{white-space:nowrap}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue .bar{width:1px;height:34px;background:var(--line2);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{to{top:110%}}
@media (max-width:1100px){.hero-foot{grid-template-columns:1fr auto}.hero-legend{display:none}.hero-title .l2{padding-left:.9em}}
@media (min-width:768px) and (max-aspect-ratio:1/1){.hero{min-height:max(740px,min(100vh,1080px))}}
@media (max-width:767px){
 .hero{min-height:auto}
 .hero-canvas{width:100%;height:58%;top:48px;opacity:.75}
 .hero-shade{background:linear-gradient(0deg,#0A0A09 36%,rgba(10,10,9,.5) 62%,rgba(10,10,9,.15) 100%)}
 .hero.is-gl .hero-shade{background:linear-gradient(0deg,#0A0A09 30%,rgba(10,10,9,.62) 50%,rgba(10,10,9,0) 68%),linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,0) 12%)}
 .hero-inner{padding-top:92px;gap:36px}
 .hero-meta{grid-template-columns:auto 1fr;gap:16px}
 .hero-meta .hm-3,.hero-meta .hm-4{display:none}
 .rl .hero-title{font-size:clamp(54px,15.5vw,96px);margin-top:32vh}
 .hero-title .l2,.hero-title .l3{padding-left:0}
 .hero-foot{grid-template-columns:1fr;gap:28px}
 .ctas .btn{flex:1 1 220px;justify-content:space-between}
}

/* hero entrance: the intro hands off here. Order: headline, then system, then copy.
   hero-hold = under the intro, hero-go = after the intro, hero-quick = no intro this visit */
.rl.hero-hold .hero-title .ln>span,.rl.hero-hold .hero-meta,.rl.hero-hold .hero-foot,.rl.hero-hold .hero-canvas{opacity:0;animation:rlShow .3s linear 4.4s forwards !important}
.anim.hero-go .hero-title .ln>span{animation:heroLine .9s var(--e-settle) both}
.anim.hero-go .hero-title .l2>span{animation-delay:.11s}
.anim.hero-go .hero-title .l3>span{animation-delay:.22s}
.anim.hero-go .hero-meta{animation:fade .6s var(--e-enter) .5s both}
.anim.hero-go .hero-foot{animation:heroFoot .7s var(--e-enter) .56s both}
.anim.hero-go .is-2d .hero-canvas{animation:fade 1.6s ease .2s both}
.anim.hero-quick .hero-title .ln>span{animation:heroLineQ .6s var(--e-settle) both}
.anim.hero-quick .hero-title .l2>span{animation-delay:.07s}
.anim.hero-quick .hero-title .l3>span{animation-delay:.14s}
.anim.hero-quick .hero-meta,.anim.hero-quick .hero-foot{animation:fade .5s var(--e-enter) .2s both}
.anim.hero-quick .is-2d .hero-canvas{animation:fade 1.2s ease both}
@keyframes heroLine{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroLineM{from{opacity:0;transform:translateY(14px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroFoot{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rlShow{to{opacity:1}}
@media (max-width:767px){.anim.hero-go .hero-title .ln>span{animation-name:heroLineM}}

/* 02 practice */
.practice-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px}
.practice-grid .h-xl{grid-column:1 / span 10}
.practice-body{grid-column:7 / span 5;display:flex;flex-direction:column;gap:28px}
.practice-body .dash{width:40px;height:1px;background:var(--gold)}
.axes{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:16px}
.axes div{padding:22px 0 0;display:flex;gap:14px;align-items:baseline}
.axes div+div{padding-left:24px;border-left:1px solid var(--line)}
.axes .v{font-family:var(--serif);font-size:clamp(24px,2.2vw,34px);color:var(--ink)}
@media (max-width:900px){.practice-grid .h-xl,.practice-body{grid-column:1 / -1}.axes{grid-template-columns:repeat(2,minmax(0,1fr))}.axes div:nth-child(3){padding-left:0;border-left:0}.axes div{padding-bottom:18px}}

/* 03 structure: particle membrane. A decorative point field (WebGL2, static 2D fallback) under minimal copy.
   Desktop: the stage pins while the field resolves on scroll. 900 px and under, with motion off, or without WebGL2
   (is-flat, decided before first paint so the page height never changes later): one static stage. */
.membrane{position:relative;height:160vh;border-top:1px solid var(--line);background:var(--bg)}
.mb-stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden}
.mb-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s var(--e-enter)}
.membrane.is-gl .mb-field,.membrane.is-2d .mb-field{opacity:1}
.mb-field canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.mb-field .mb-2d,.membrane.is-2d .mb-gl{display:none}
.membrane.is-2d .mb-2d{display:block}
.mb-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0A0A09 0%,rgba(10,10,9,.82) 22%,rgba(10,10,9,0) 50%),linear-gradient(180deg,#0A0A09 0%,rgba(10,10,9,0) 18%,rgba(10,10,9,0) 78%,#0A0A09 100%)}
.mb-top{position:absolute;top:clamp(92px,12vh,124px);left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.mb-top>.mono{color:#D8D4CC;white-space:nowrap}
.mb-key{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.mb-key>.mono{color:#D8D4CC;text-align:right}
.mb-states{display:flex;gap:18px}
.mb-states li{display:flex;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color var(--m-std) var(--e-enter)}
.mb-states li span{transition:color var(--m-std) var(--e-enter)}
.mb-states li.is-on{color:var(--ink)}
.mb-states li.is-on span{color:var(--gold)}
.mb-meter{position:relative;width:100%;min-width:250px;height:1px;background:var(--line2)}
.mb-meter i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.mb-copy{position:absolute;left:0;right:0;bottom:clamp(56px,9vh,104px);z-index:3;display:flex;flex-direction:column;gap:22px}
.mb-title{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.6vw,100px);line-height:.95;letter-spacing:-.02em;color:var(--ink)}
.mb-title .ln{display:block}
.mb-sub{max-width:400px;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink2)}
.membrane.is-flat{height:auto}
.membrane.is-flat .mb-stage{position:relative;height:clamp(560px,86vh,820px)}
@media (max-width:900px){
 .membrane,.membrane.is-flat{height:auto}
 .mb-stage,.membrane.is-flat .mb-stage{position:relative;height:auto;min-height:0;display:flex;flex-direction:column;padding-top:clamp(36px,8vw,56px);padding-bottom:clamp(64px,14vw,96px)}
 .mb-top{position:relative;top:auto;order:1;flex-direction:column;gap:14px}
 .mb-key{align-items:flex-start;width:100%}
 .mb-key>.mono{text-align:left}
 .mb-meter{min-width:0}
 .mb-field{position:relative;inset:auto;order:2;height:clamp(300px,82vw,560px);margin:clamp(12px,4vw,28px) 0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
 .mb-shade{display:none}
 .mb-copy{position:relative;bottom:auto;order:3}
}
@media (max-width:420px){.mb-states{gap:12px}.mb-states li{letter-spacing:.1em}}

/* 04 capabilities */
.caps-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:clamp(48px,6vw,96px)}
.caps-intro .h-xl{grid-column:1 / span 8}
.caps-intro .body-l{grid-column:9 / span 4;align-self:end}
.caps-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:start}
.caps-list{border-top:1px solid var(--line)}
.cap{border-bottom:1px solid var(--line);position:relative}
.cap::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold);transition:width .9s var(--ease)}
.cap.is-hot::before,.cap.is-open::before{width:64px}
.cap-h{font:inherit}
.cap-btn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:56px 150px minmax(0,1fr) 28px;gap:16px;align-items:baseline;padding:28px 0 26px;min-height:44px}
.cap-btn:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.cap-num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);transition:color .5s}
.cap-cat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cap-title{font-family:var(--serif);font-size:clamp(30px,3.2vw,54px);line-height:1.02;letter-spacing:-.015em;color:var(--mute);transition:color .6s var(--ease),transform .8s var(--ease)}
.cap.is-hot .cap-title,.cap.is-open .cap-title{color:var(--ink)}
.cap.is-hot .cap-title{transform:translateX(8px)}
.cap.is-hot .cap-num,.cap.is-open .cap-num{color:var(--gold)}
.cap-plus{position:relative;width:14px;height:14px;align-self:center;justify-self:end}
.cap-plus::before,.cap-plus::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--ink2);transition:transform .6s var(--ease)}
.cap-plus::after{transform:rotate(90deg)}
.cap.is-open .cap-plus::after{transform:rotate(0)}
.cap-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.cap-panel-in{overflow:hidden;visibility:hidden;transition:visibility 0s .8s}
.cap.is-open .cap-panel{grid-template-rows:1fr}
.cap.is-open .cap-panel-in{visibility:visible;transition:visibility 0s 0s}
.cap-body{display:grid;grid-template-columns:222px minmax(0,1fr);gap:16px;padding:0 0 32px}
.cap-desc{grid-column:2;font-size:18px;color:var(--ink2);max-width:520px;line-height:1.6}
.cap-pts{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin-top:10px}
.cap-pts li{font-size:14px;color:var(--mute);padding-left:18px;position:relative;line-height:1.55}
.cap-pts li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--gold)}
.caps-foot{margin-top:24px}
.plate-wrap{position:sticky;top:104px}
.dia{position:relative;border:1px solid var(--line);background:var(--bg2);aspect-ratio:480 / 560;width:100%}
.dia svg{display:block;width:100%;height:100%}
.dia .frm{stroke:rgba(241,238,231,.14);fill:none}
.dia-cap{display:flex;justify-content:space-between;gap:16px;margin-top:16px}

/* layer stack: the website is the visible layer; the system sits behind it. The open (or hovered) discipline brings
   its layer forward: sheets in front of it turn to glass. Architecture shows the whole structure; Reporting the output. */
.stk text{font-family:var(--mono);letter-spacing:.14em}
.stk .ly{transition:transform .7s var(--ease)}
.stk .ly-bg{fill:#0E0E0C;transition:fill-opacity .6s var(--ease)}
.stk .ly-frm{fill:none;stroke:rgba(241,238,231,.2);transition:stroke .6s var(--ease)}
.stk .ly-lb{font-size:9.5px;letter-spacing:.16em;fill:rgba(241,238,231,.46);transition:fill .6s var(--ease),fill-opacity .6s var(--ease)}
.stk .ly-c{opacity:.34;transition:opacity .6s var(--ease)}
.stk .ly.on{transform:translate(-3px,4px)}
.stk .ly.on .ly-frm{stroke:rgba(241,238,231,.5)}
.stk .ly.on .ly-lb{fill:var(--gold)}
.stk .ly.on .ly-c{opacity:1}
.stk .ly.on~.ly .ly-bg{fill-opacity:0}
.stk .ly.on~.ly .ly-frm{stroke:rgba(241,238,231,.13)}
.stk .ly.on~.ly .ly-c{opacity:.035}
.stk .ly.on~.ly .ly-lb{fill-opacity:0}
.stk-edge,.stk-agg{fill:none;stroke:rgba(241,238,231,.13);stroke-dasharray:2 4;transition:stroke .6s var(--ease)}
.stk-out{opacity:.4;transition:opacity .6s var(--ease)}
.stk-thru{opacity:0;transition:opacity .6s var(--ease)}
.stk.m-architecture .ly-bg{fill-opacity:0}
.stk.m-architecture .ly-frm{stroke:rgba(241,238,231,.42)}
.stk.m-architecture .ly-c{opacity:.08}
.stk.m-architecture .ly-lb{fill:var(--ink2)}
.stk.m-architecture .stk-edge{stroke:var(--gold)}
.stk.m-architecture .stk-thru{opacity:1}
.stk.m-reporting .stk-agg{stroke:var(--gold);stroke-dasharray:none}
.stk.m-reporting .stk-out{opacity:1}
.stk.m-reporting .ly-c{opacity:.22}
.stk .s-box{fill:none;stroke:rgba(241,238,231,.46)}
.stk .s-ln{fill:none;stroke:rgba(241,238,231,.36)}
.stk .s-card{fill:none;stroke:rgba(241,238,231,.26)}
.stk .s-dim{fill:none;stroke:rgba(241,238,231,.16)}
.stk .s-dash{stroke-dasharray:3 4}
.stk .s-dot{fill:rgba(241,238,231,.32)}
.stk .s-fill{fill:rgba(241,238,231,.24)}
.stk .s-fill2{fill:rgba(241,238,231,.05)}
.stk .s-bar{fill:none;stroke:rgba(241,238,231,.3);stroke-width:2}
.stk .s-thin{fill:none;stroke:rgba(241,238,231,.32)}
.stk .s-h{fill:none;stroke:rgba(241,238,231,.74);stroke-width:5}
.stk .s-h2{fill:none;stroke:rgba(241,238,231,.55);stroke-width:3.5}
.stk .s-h3{fill:none;stroke:rgba(241,238,231,.74);stroke-width:3.5}
.stk .s-gold,.stk .s-gold-l{fill:none;stroke:var(--gold)}
.stk .s-gold2{fill:none;stroke:var(--gold);stroke-width:2}
.stk .s-goldf,.stk .s-knob,.stk .s-pt-g{fill:var(--gold)}
.stk .s-arr{fill:rgba(241,238,231,.5)}
.stk .s-phone{fill:#0C0C0B;stroke:rgba(241,238,231,.46)}
.stk .s-sw1{fill:rgba(241,238,231,.8)}
.stk .s-sw2{fill:rgba(241,238,231,.5)}
.stk .s-sw3{fill:rgba(241,238,231,.28)}
.stk .s-sw4{fill:rgba(241,238,231,.12)}
.stk .s-dia{fill:#121210;stroke:var(--gold);stroke-width:1.3}
.stk .s-note{fill:rgba(201,164,93,.07);stroke:rgba(201,164,93,.6);stroke-dasharray:3 3}
.stk .s-bound{fill:rgba(241,238,231,.015);stroke:rgba(241,238,231,.34);stroke-dasharray:5 5}
.stk .s-map{fill:#111110;stroke:rgba(241,238,231,.22)}
.stk .s-pt{fill:#0C0C0B;stroke:rgba(241,238,231,.55)}
.stk .s-t{font-size:7.5px;letter-spacing:.08em;fill:rgba(241,238,231,.62)}
.stk .s-tg{fill:var(--gold)}
.stk .s-mid{text-anchor:middle}
.stk .o-box{fill:#0E0E0C;stroke:rgba(241,238,231,.4)}
.stk .o-t{font-size:7.5px;letter-spacing:.14em;fill:rgba(241,238,231,.6)}
.stk .o-dim{fill:none;stroke:rgba(241,238,231,.16)}
.stk .o-bar{fill:rgba(241,238,231,.3)}
.stk .o-goldf{fill:var(--gold)}
.stk .o-ln{fill:none;stroke:rgba(241,238,231,.32);stroke-width:2}
.stk .o-gold{fill:none;stroke:var(--gold);stroke-width:1.3}
.stk .o-dot{fill:rgba(241,238,231,.4)}
.stk.m-reporting .o-t{fill:var(--gold)}
.stk.m-reporting .o-dot{fill:var(--gold)}
.stk .t-ln{fill:none;stroke:var(--gold);stroke-dasharray:3 4}
.stk .t-pt{fill:var(--gold)}
@media (max-width:1100px){.cap-btn{grid-template-columns:44px 120px minmax(0,1fr) 20px}.cap-body{grid-template-columns:180px minmax(0,1fr)}.cap-pts{grid-template-columns:1fr}.caps-intro .h-xl{grid-column:1 / span 12}.caps-intro .body-l{grid-column:1 / span 8;margin-top:24px}}
@media (max-width:860px){.caps-grid{grid-template-columns:1fr}.plate-wrap{display:none}}
@media (max-width:640px){.cap-btn{grid-template-columns:40px minmax(0,1fr) 20px;row-gap:6px;padding:22px 0}.cap-cat{grid-column:2}.cap-title{grid-column:2}.cap-plus{grid-column:3;grid-row:1 / span 2}.cap-body{grid-template-columns:1fr;padding-left:56px}.cap-desc,.cap-pts{grid-column:1}.cap.is-hot .cap-title{transform:none}.caps-intro .body-l{grid-column:1 / -1}}

/* 05 problems: rendered from RL_ENGAGEMENTS; each tag is the matching intake option */
.probs{border-top:1px solid var(--line)}
.prob{display:grid;grid-template-columns:72px minmax(0,1fr) 248px;gap:24px;align-items:baseline;padding:clamp(24px,2.6vw,40px) 0;border-bottom:1px solid var(--line);position:relative;cursor:pointer}
.prob::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width 1s var(--ease)}
.prob:hover::before,.prob:focus-visible::before{width:100%}
.prob-t{font-family:var(--serif);font-size:clamp(28px,3.4vw,56px);line-height:1.05;letter-spacing:-.015em;color:var(--mute);transition:color .6s var(--ease)}
.prob-t em{color:var(--ink)}
.prob:hover .prob-t,.prob:focus-visible .prob-t{color:var(--ink)}
.prob-tag{display:grid;justify-items:end;text-align:right}
.prob-tag>span{grid-area:1 / 1;transition:opacity .5s,transform .6s var(--ease)}
.prob-tag .go{opacity:0;transform:translateX(-8px);color:var(--gold);white-space:nowrap}
.prob:hover .prob-tag .go,.prob:focus-visible .prob-tag .go{opacity:1;transform:none}
.prob:hover .prob-tag .tg,.prob:focus-visible .prob-tag .tg{opacity:0}
@media (max-width:1100px){.prob{grid-template-columns:56px minmax(0,1fr) 200px}}
@media (max-width:760px){.prob{grid-template-columns:40px minmax(0,1fr);row-gap:10px}.prob-tag{grid-column:2;justify-items:start;text-align:left}.prob-tag .go{display:none}}

/* 06 work */
.work-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.work-note{white-space:normal}
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:clamp(36px,4.4vw,64px) 0;border-top:1px solid var(--line)}
.case-media{grid-column:1 / span 7;height:clamp(400px,62vh,640px)}
.case.rev .case-media{grid-column:6 / span 7;grid-row:1}
.case-body{grid-column:9 / span 4;display:flex;flex-direction:column;gap:22px}
.case.rev .case-body{grid-column:1 / span 4;grid-row:1}
.case-meta{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.case-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.2vw,72px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.case-title em{color:var(--mute)}
.stamp{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);border:1px dashed rgba(241,238,231,.32);padding:6px 10px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.fields div{border-top:1px solid var(--line);padding-top:12px}
.fields dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.fields dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}

/* project 01: professional experience (client anonymized); concept studies keep the dashed stamp */
.case-id,.case-facts{display:flex;flex-direction:column;gap:22px;min-width:0}
.case-id{gap:12px}
.rl .case-org{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.9vw,30px);line-height:1.1;letter-spacing:-.01em;color:var(--mute)}
.src{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;max-width:100%;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--gold);border:1px solid rgba(201,164,93,.45);border-color:color-mix(in srgb,var(--gold) 45%,transparent);padding:8px 12px}
.fields.f1{grid-template-columns:minmax(0,1fr)}
.case-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:0}
.case-proof div{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.case-proof dt{order:2;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;color:var(--dim)}
.case-proof dd{order:1;margin:0;font-family:var(--serif);font-size:clamp(32px,2.8vw,44px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.case-link{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line2);transition:color .4s,border-color .4s}
.case-link svg{flex:none;transition:transform .5s var(--ease)}
.case-link:hover{color:var(--gold);border-color:var(--gold)}
.case-link:hover svg{transform:translateX(4px)}
.recon{position:absolute;left:50px;bottom:24px;z-index:3;font-size:10px;color:var(--ink2)}
@media (min-width:1101px){.case.c-web .case-body{grid-column:8 / span 5}}
@media (max-width:1100px){.case-body .case-id{grid-column:1}.case-body .case-facts{grid-column:2}}
@media (max-width:700px){.recon{left:44px;bottom:20px;font-size:9px;letter-spacing:.12em}}
@media (max-width:1100px){.case-media,.case.rev .case-media{grid-column:1 / span 12;grid-row:1}.case-body,.case.rev .case-body{grid-column:1 / span 12;grid-row:2;margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 48px;align-items:start}.case-meta{grid-column:1 / -1}.case-body .stamp{grid-column:1}.case-body .fields{grid-column:2;grid-row:2 / span 2}}
@media (max-width:700px){.case{padding-top:0;border-top:0;padding-bottom:56px}.case-media,.case.rev .case-media{height:clamp(300px,82vw,460px);margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}.case-body,.case.rev .case-body{display:flex}.fields{grid-template-columns:1fr}.work-head{grid-template-columns:1fr}}

/* 07 approach. Steps on --bg, all WCAG AA: upcoming #827D73 (4.84:1); reached var(--dim) (5.54:1), its period in gold at
   reduced intensity; active var(--ink) (17.1:1) with the full gold period, the shift and its description. */
.approach{position:relative;height:300vh;border-top:1px solid var(--line);background:var(--bg)}
.ap-sticky{position:sticky;top:0;height:100vh;min-height:600px;display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,3.6vh,44px);padding-top:88px;padding-bottom:44px}
.ap-step{display:block}
.ap-word{display:block;font-family:var(--serif);font-size:clamp(46px,min(8vw,12.4vh),138px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;color:#827D73;transition:color .8s var(--ease),transform .9s var(--ease)}
.ap-step.is-past .ap-word{color:var(--dim)}
.ap-step.is-on .ap-word{color:var(--ink);transform:translateX(clamp(12px,2vw,36px))}
.ap-word .dot{color:var(--gold);opacity:0;transition:opacity .6s}
.ap-step.is-past .ap-word .dot{opacity:.72}
.ap-step.is-on .ap-word .dot{opacity:1}
.ap-desc{position:absolute;right:96px;top:50%;width:min(340px,26vw);transform:translateY(-20%);opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none}
.ap-step.is-on .ap-desc{opacity:1;transform:translateY(-50%)}
.ap-desc p{font-size:17px;line-height:1.65;color:var(--ink2);margin-top:14px}
.ap-bar{height:1px;background:var(--line);position:relative;max-width:560px}
.ap-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.ap-static .approach,.ap-static .ap-sticky{height:auto;min-height:0;position:relative}
.ap-static .ap-sticky{padding-top:var(--sec);padding-bottom:var(--sec)}
.ap-static .ap-step{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ap-static .ap-word{color:var(--ink);font-size:clamp(40px,6.4vw,104px);transform:none !important}
.ap-static .ap-word .dot{opacity:1}
.ap-static .ap-desc{position:static;width:auto;opacity:1;transform:none}
.ap-static .ap-bar{display:none}
@media (max-width:900px){
 .approach,.ap-sticky{height:auto;min-height:0;position:relative}
 .ap-sticky{padding-top:var(--sec);padding-bottom:var(--sec);gap:28px}
 .ap-step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:0;padding:20px 0;border-bottom:1px solid var(--line)}
 .ap-word{grid-column:1 / -1;color:var(--ink);font-size:clamp(40px,10.5vw,80px);transform:none !important}
 .ap-word .dot{opacity:1}
 .ap-desc{grid-column:1 / -1;position:static;width:auto;opacity:1;transform:none;margin-top:8px;max-width:520px}
 .ap-step.is-on .ap-desc{transform:none}
 .ap-bar{display:none}
 .ap-static .ap-step{grid-template-columns:40px minmax(0,1fr);gap:0}
}

/* 08 experience */
.exp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
.exp-copy{grid-column:1 / span 7}
.exp-media{grid-column:9 / span 4;aspect-ratio:4 / 5}
.proof-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;margin-top:32px;max-width:36em}
.proof-intro,.proof-desc{font-size:16px;line-height:1.65;color:var(--ink2)}
.proof-intro{max-width:24em}
.proof-list{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.proof-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.proof-label{font-family:var(--serif);font-size:clamp(25px,2vw,32px);font-weight:400;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.proof-link{margin-top:24px}
.proof-v{font-family:var(--serif);font-size:clamp(44px,5.2vw,88px);line-height:.95;letter-spacing:-.025em}
.proof-v .g{font-style:italic}
@media (max-width:960px){.exp-copy{grid-column:1 / -1}.exp-media{grid-column:1 / span 8;grid-row:2;margin-top:48px;aspect-ratio:16 / 10}}
@media (max-width:767px){.proof-intro,.proof-desc{font-size:17.28px}}
@media (max-width:640px){.exp-media{grid-column:1 / -1;aspect-ratio:4 / 5}.proof-summary{gap:18px}.proof-list li{grid-template-columns:1fr;gap:10px}}

/* 09 contact */
.contact{border-top:1px solid var(--line);background:var(--bg2)}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px;align-items:start}
.contact-copy{grid-column:1 / span 6;display:flex;flex-direction:column;gap:36px}
.cta-title{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.2vw,116px);line-height:.93;letter-spacing:-.025em;text-wrap:balance}
.cta-title em{color:var(--gold)}
.direct{border-top:1px solid var(--line)}
.direct li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.direct a{border-bottom:1px solid var(--line2);transition:border-color .4s,color .4s}
.direct a:hover{border-color:var(--gold)}
.brief{grid-column:8 / span 5;border:1px solid var(--line2);background:#0B0B0A;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:22px}
.brief-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fld input,.fld textarea,.fld select{all:unset;display:block;box-sizing:border-box;width:100%;min-height:46px;border-bottom:1px solid var(--line2);font-family:var(--sans);font-size:16px;color:var(--ink);padding:8px 0;transition:border-color .4s}
.fld textarea{min-height:104px;resize:vertical;line-height:1.55;white-space:pre-wrap}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-bottom-color:var(--gold)}
.fld select{cursor:pointer;padding-right:28px}
.fld select option{background:#0E0E0C;color:#F1EEE7}
.sel{position:relative}
.sel::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:1px solid var(--ink2);border-bottom:1px solid var(--ink2);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* intake: options come from RL_ENGAGEMENTS (the same list as the Problems section). Real radios; the row is the label. */
.fld label .stp,.eng-lg .stp{color:var(--gold);margin-right:10px}
.fld label .opt{text-transform:none;letter-spacing:.06em}
.eng{border:0;margin:0;padding:0;min-width:0}
.eng-lg{display:block;padding:0;margin:0 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.eng-list{border-top:1px solid var(--line)}
.eng-opt{position:relative;display:block;cursor:pointer}
.eng-in{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.eng-row{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:10px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--line)}
.eng-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .6s var(--ease)}
.eng-dot{position:relative;width:11px;height:11px;border:1px solid var(--line2);border-radius:50%;transition:border-color .3s}
.eng-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .3s var(--e-settle)}
.eng-t{font-size:15px;line-height:1.35;color:var(--ink2);transition:color .3s}
.eng-opt:hover .eng-t{color:var(--ink)}
.eng-opt:hover .eng-dot{border-color:rgba(241,238,231,.45)}
.eng-in:checked+.eng-row .eng-t{color:var(--ink)}
.eng-in:checked+.eng-row .eng-dot{border-color:var(--gold)}
.eng-in:checked+.eng-row .eng-dot::after{transform:scale(1)}
.eng-in:checked+.eng-row::after{width:100%}
.eng-in:focus-visible+.eng-row{outline:1px solid var(--gold);outline-offset:2px}
.brief-foot{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.brief-foot .btn{justify-content:space-between}
.brief-foot .note{letter-spacing:.08em;text-transform:none;font-size:11px}
@media (max-width:1100px){.contact-copy{grid-column:1 / span 12}.brief{grid-column:1 / span 8}}
@media (max-width:760px){.brief{grid-column:1 / -1}.row2{grid-template-columns:1fr}}

/* IntroSequence: the official lockup, cut along its own letter columns, assembles once per visit.
   Without the script class the overlay never displays; with it, a CSS timeout clears it even if JS stalls. */
[data-ri]{display:none}
.rl-intro[data-ri]{display:block;position:fixed;inset:0;z-index:100;overflow:hidden}
.rl .rl-intro[data-ri]{animation:rlFailsafe .5s linear 4s forwards !important}
.rl .rl-intro.is-off[data-ri]{display:none}
.rl-intro.ri-land{pointer-events:none}
.ri-bg{position:absolute;inset:0;background:#0A0A09}
.ri-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ri-lock{position:relative;width:clamp(230px,27vw,380px);aspect-ratio:726 / 503;margin-top:-5vh;visibility:hidden}
.ri-lock.ri-go{visibility:visible}
.ri-grp{position:absolute;inset:0}
.ri-p{position:absolute;display:block;background-image:url(../img/rice-logic-lockup-intro.png);background-repeat:no-repeat}
.rp-m{left:0.9642%;top:0%;width:93.2507%;height:70.5765%;background-size:107.2378% 141.6901%;background-position:14.2857% 0%}
.rp-r{left:0%;top:70.5765%;width:12.6722%;height:16.8986%;background-size:789.1304% 591.7647%;background-position:0% 84.9282%}
.rp-i1{left:12.6722%;top:70.5765%;width:6.4738%;height:16.8986%;background-size:1544.6809% 591.7647%;background-position:13.5493% 84.9282%}
.rp-c1{left:19.146%;top:70.5765%;width:11.4325%;height:16.8986%;background-size:874.6988% 591.7647%;background-position:21.6174% 84.9282%}
.rp-e{left:30.5785%;top:70.5765%;width:13.0854%;height:16.8986%;background-size:764.2105% 591.7647%;background-position:35.1823% 84.9282%}
.rp-l{left:43.6639%;top:70.5765%;width:12.5344%;height:16.8986%;background-size:797.8022% 591.7647%;background-position:49.9213% 84.9282%}
.rp-o{left:56.1983%;top:70.5765%;width:12.1212%;height:16.8986%;background-size:825% 591.7647%;background-position:63.9498% 84.9282%}
.rp-gl{left:68.3196%;top:70.5765%;width:11.8457%;height:16.8986%;background-size:844.186% 591.7647%;background-position:77.5% 84.9282%}
.rp-i2{left:80.1653%;top:70.5765%;width:6.6116%;height:16.8986%;background-size:1512.5% 591.7647%;background-position:85.8407% 84.9282%}
.rp-c2{left:86.7769%;top:70.5765%;width:13.2231%;height:16.8986%;background-size:756.25% 591.7647%;background-position:100% 84.9282%}
.rp-s{left:0%;top:87.4751%;width:100%;height:12.5249%;background-size:100% 798.4127%;background-position:0% 100%}

/* drawing-sheet furniture: registration frame, baseline guide, two nodes, one gold route into the mark's own terminal */
.ri-reg,.ri-idx,.ri-guide,.ri-node,.ri-rise,.ri-stub,.ri-glow{position:absolute;display:block;opacity:0;pointer-events:none}
.ri-reg{width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) no-repeat,linear-gradient(var(--ink),var(--ink)) no-repeat;background-size:14px 1px,1px 14px}
.ri-tl{left:-9%;top:-13%;background-position:0 0,0 0}
.ri-tr{right:-9%;top:-13%;background-position:100% 0,100% 0}
.ri-bl{left:-9%;bottom:-13%;background-position:0 100%,0 100%}
.ri-br{right:-9%;bottom:-13%;background-position:100% 100%,100% 100%}
.ri-idx{left:-9%;top:calc(113% + 12px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;line-height:1;color:var(--dim);white-space:nowrap}
.ri-guide{left:-9%;right:-9%;top:85.885%;height:1px;background:rgba(241,238,231,.26)}
.ri-node{top:85.885%;width:7px;height:7px;margin:-3px 0 0 -3px;border:1px solid rgba(241,238,231,.6);border-radius:50%;background:#0A0A09}
.ri-na{left:-9%}
.ri-nb{left:109%;border-color:var(--gold)}
.ri-rise{left:109%;top:26.24%;width:1px;height:59.645%;background:var(--gold);transform-origin:50% 100%}
.ri-stub{left:92.7%;top:26.24%;width:16.3%;height:1px;background:var(--gold);transform-origin:100% 50%}
.ri-glow{left:91.46%;top:26.24%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:radial-gradient(circle,rgba(201,164,93,.5) 0%,rgba(201,164,93,0) 68%);background:radial-gradient(circle,color-mix(in srgb,var(--gold) 50%,transparent) 0%,transparent 68%)}
@media (max-width:767px){.ri-reg,.ri-idx{display:none}}

/* persistent shell: header and section index stay put; content changes underneath */
.rl.intro-on .nav,.rl.intro-on .rail{opacity:0}

/* the small wordmark beside the header mark returns only after the monogram has docked */
.brand-sub{transition:opacity .44s var(--e-enter)}
.rl.intro-on .brand-sub,.rl.intro-land .brand-sub{opacity:0}

/* anchor arrivals: sections without top padding clear the fixed header; programmatic focus draws no ring */
.rl #work,.rl #problems{scroll-margin-top:72px}

/* project media: shared */
.frame img.slot-img{transform:none;will-change:auto;object-position:top center}
.case-media .mx-svg{position:absolute;left:5%;top:6%;width:90%;height:84%;z-index:1;display:block}

/* project 01: responsive device frames; each screen is its own slot */
.media-web .web-stage{position:absolute;inset:9% 7% 17%;z-index:1;container-type:size}
.media-web .web-canvas{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}
@supports (width:1cqw){.media-web .web-canvas{width:min(100cqw,125cqh);height:min(100cqh,80cqw)}}
.dev-desk{left:0;top:7%;width:84%;border-radius:6px;overflow:hidden;background:#141412;box-shadow:0 0 0 1px rgba(241,238,231,.18),0 34px 60px -24px rgba(0,0,0,.8)}
.dev-chrome text{font-family:var(--mono);font-size:17px;letter-spacing:.06em;fill:rgba(241,238,231,.55);text-anchor:middle}
.dev-screen{position:relative;overflow:hidden;background:#F4F1EA}
.dev-phone{right:0;bottom:0;width:24%;aspect-ratio:410 / 864;border-radius:15% / 7.1%;background:#0B0B0A;box-shadow:0 0 0 1px rgba(241,238,231,.3),0 30px 50px -18px rgba(0,0,0,.85)}

/* breakpoint ruler over the desktop frame */
.bp{position:absolute;left:0;top:0;width:84%;height:4.2%;border-bottom:1px solid rgba(241,238,231,.34);font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--dim)}
.bp span{position:absolute;bottom:0;height:7px;border-left:1px solid rgba(241,238,231,.45)}
.bp span::after{content:attr(data-w);position:absolute;bottom:10px;left:0;transform:translateX(-50%);white-space:nowrap}
.bp span:first-child::after{transform:none}
.bp span:last-child::after{transform:translateX(-100%)}
.bp span.is-mob{border-left-color:var(--gold);height:10px}
.bp span.is-mob::after{color:var(--gold)}
@media (max-width:700px){
 .media-web .web-stage{inset:7% 5% 19%}
 .dev-desk{left:-24%;top:12%;width:96%;opacity:.55}
 .dev-phone{right:8%;top:0;bottom:auto;width:auto;height:100%}
 .bp{display:none}
 .mx-svg .d-s,.mx-svg .d-xs,.mx-svg .d-sub,.mx-svg .d-mh{display:none}
}
.no-motion .scroll-cue .bar::after{animation:none}

/* layout values that were inline style attributes in the design file (kept out of the markup for a strict CSP) */
#problems.sec,#work.sec{padding-top:0}
#problems .h-l{max-width:15em;margin-bottom:56px}
#approach .sec-head{margin-bottom:0}
#proof.sec{border-top:1px solid rgba(241,238,231,.10)}
.bp span[data-w="390"]{left:27.08%}.bp span[data-w="768"]{left:53.33%}.bp span[data-w="1024"]{left:71.11%}.bp span[data-w="1440"]{left:100%}

/* ---------- first paint before home.js (classes set by the boot script) ---------- */
.rl.boot-intro .rl-intro.is-off[data-ri]{display:block}
@media (min-width:901px){
 .rl.boot-pin .membrane.is-flat{height:160vh}
 .rl.boot-pin .membrane.is-flat .mb-stage{position:sticky;height:100vh}
}
/* without JavaScript every capability is open: expanding and collapsing needs the script */
html:not(.rl-js) .cap .cap-panel{grid-template-rows:1fr}
html:not(.rl-js) .cap .cap-panel-in{visibility:visible}
html:not(.rl-js) .cap .cap-plus::after{transform:rotate(0)}

/* ---------- project brief: validation and delivery states ---------- */
/* the fields sit in one wrapper (so the confirmation can replace them); it keeps the brief's own 22 px rhythm */
.brief-body{display:flex;flex-direction:column;gap:22px}
.brief-body[hidden]{display:none}
.fld-err,.eng-err{margin:6px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.5;color:#E8A27A}
.fld-err[hidden],.eng-err[hidden]{display:none}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"],.fld select[aria-invalid="true"]{border-bottom-color:#E8A27A}
.eng[aria-invalid="true"] .eng-list{border-top-color:#E8A27A}
.brief .btn[disabled],.brief .btn[aria-busy="true"]{opacity:.55;cursor:not-allowed}
.brief .btn[disabled]:hover{background:var(--ink)}
.brief button.btn{border:0;cursor:pointer;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.brief-status{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink2);min-height:0}
.brief-status:empty{display:none}
.brief-status.is-error{color:#E8A27A}
.brief-status.is-ok{color:var(--ink)}
.brief-status a{border-bottom:1px solid var(--line2)}
.brief-note a{color:var(--ink2);border-bottom:1px solid var(--line2)}
.brief-note a:hover{color:var(--gold);border-color:var(--gold)}
.brief-done{display:flex;flex-direction:column;gap:18px;padding:8px 0}
.brief-done[hidden]{display:none}
.brief-done .done-t{font-family:var(--serif);font-size:clamp(30px,2.6vw,42px);line-height:1.05;letter-spacing:-.015em;color:var(--ink)}
.brief-done .done-t em{color:var(--gold)}
.brief-done p{font-size:16px;line-height:1.6;color:var(--ink2);max-width:30em}
.hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Pause motion (WCAG 2.2.2): the hero control that stops the scene and the scroll cue ---------- */
/* it joins the hero's meta row only while shown (has-motion), so the approved row is unchanged without it */
.hero-meta.has-motion{grid-template-columns:auto 1fr auto auto auto}
.hm-motion{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;margin:-6px 0;padding:6px 0;min-height:24px;cursor:pointer;white-space:nowrap;transition:color .3s}
.hm-motion[hidden]{display:none}
.hero-meta .hm-motion{color:var(--dim)}
.hero-meta .hm-motion:hover,.hero-meta .hm-motion:focus-visible{color:var(--ink)}
.rl.is-still .scroll-cue .bar::after{animation:none}
@media (min-width:768px) and (max-width:899px){
 .hero-meta.has-motion{grid-template-columns:auto 1fr auto auto}
 .hero-meta.has-motion .hm-3{display:none}
}
@media (max-width:767px){
 .hero-meta.has-motion{grid-template-columns:auto 1fr auto}
}

/* WCAG 1.4.11: a field's underline and an option's circle are what identify them, so they reach 3:1 (3.4:1 here).
   Focus (gold), error and hover colours are unchanged and still take precedence. */
.fld input,.fld textarea,.fld select{border-bottom-color:rgba(241,238,231,.4)}
.eng-dot{border-color:rgba(241,238,231,.4)}
/* each option's (invisible) radio covers its whole row, so moving focus to it scrolls the whole option into view */
.eng-in{width:100%;height:100%}

/* ---------- photography: supplied photographs, resized only (never recoloured, filtered or overlaid), each used once.
   The human layer between the technical sections. Contained photographs take the shared image frame and inner rule
   (.frame); all of them use the existing masked reveal (.mask.rv) plus a short settle. No drift and no zoom loop.
   Phones get their own crop through <picture> art direction; the CSS crops below match those files. ---------- */
.rl .ph-frame{position:relative;overflow:hidden;background:#0C0C0B}
.rl .ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:none;will-change:auto}
.anim .ph-frame img{transform:scale(1.04);transition:transform 1.8s var(--e-settle)}
.anim .ph-frame.in img{transform:none}
.ph-cap{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;gap:20px;align-items:center;margin-top:16px}
.ph-cap .rule{height:1px;background:var(--line)}
@media (max-width:640px){.ph-cap{grid-template-columns:minmax(0,1fr);gap:6px}.ph-cap .rule{display:none}}

/* execution, after Capabilities: an offset figure on the capability list's own column (the 7fr / 5fr grid above it),
   16:9 on desktop and 3:2 from 861 to 1100 px; full width at 16:9 where that grid is one column.
   Phones: square crop around the hands and laptop, inside the margins */
.ph-exec{padding-bottom:var(--sec)}
.ph-exec .ph-frame{aspect-ratio:16 / 9}
.ph-exec .ph-frame img{object-position:50% 10%}
@media (min-width:861px){
 .ph-exec .ph-fig{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,96px)}
 .ph-exec .ph-frame,.ph-exec .ph-cap{grid-column:1}
}
@media (min-width:861px) and (max-width:1100px){.ph-exec .ph-frame{aspect-ratio:3 / 2}.ph-exec .ph-frame img{object-position:50% 15%}}
@media (max-width:700px){.ph-exec .ph-frame{aspect-ratio:1 / 1}.ph-exec .ph-frame img{object-position:69% 50%}}

/* process, before the Approach: the signature photograph at full content width (16:9 on desktop, capped to the
   window's height; its own 3:2 on tablets). Phones: full bleed, square crop around the notebook and both hands */
.ph-process{padding-bottom:var(--sec)}
.ph-process .ph-frame{aspect-ratio:3 / 2}
@media (min-width:1101px){.ph-process .ph-frame{aspect-ratio:16 / 9;max-height:82vh}.ph-process .ph-frame img{object-position:50% 60%}}
@media (max-width:700px){.ph-process .ph-frame{aspect-ratio:1 / 1;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}.ph-process .ph-frame img{object-position:38% 50%}}

/* place, after the Approach: full-bleed transition (21:9 on desktop, capped to the window's height; its own 16:9 on
   tablets). Phones: a 4:5 crop centred on the Capitol. One mono caption line under it, nothing over the photograph */
.ph-place .ph-frame{aspect-ratio:16 / 9}
.ph-place .ph-cap{margin-top:0;padding-top:18px;padding-bottom:clamp(28px,3.4vw,48px)}
@media (min-width:1101px){.ph-place .ph-frame{aspect-ratio:21 / 9;max-height:80vh}.ph-place .ph-frame img{object-position:50% 48%}}
@media (max-width:600px){.ph-place .ph-frame{aspect-ratio:4 / 5;max-height:86vh}}

/* copy trim (20 Oct 2026): real project screens in the homepage device frames (no editorial zoom on screens) */
.rl .frame .dev-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;transform:none;will-change:auto;max-width:none}
.media-shot .dev-desk .dev-screen{background:#0B0D0E}
.media-shot .dev-phone{aspect-ratio:422.3 / 864}
/* Keep the complete mobile screen centered, with enough space to inspect the work. */
@media (max-width:700px){
 .rl .case-media.media-shot{height:clamp(420px,120vw,540px);margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
 .media-shot .web-stage{inset:6% 7% 10%}
 .media-shot .web-canvas{display:flex;justify-content:center;align-items:center;width:100%;height:100%}
 .media-shot .dev-desk{display:none}
 .media-shot .dev-phone{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:100%}
}
#ap-h{margin:0;font-weight:400}
/* the direct-contact list only shows when configure.py writes an email, booking or LinkedIn line into it */
.direct:not(:has(li)){display:none}
@media (min-width:1101px){.case.c-web.rev .case-body{grid-column:1 / span 5}}

/* Mobile reading scale: body, field text and labels × 1.08. */
@media (max-width:767px){
 .lede,.ap-desc p{font-size:18.36px}
 .mb-sub,.fld input,.fld textarea,.fld select,.brief-done p{font-size:17.28px}
 .cap-desc{font-size:19.44px}
 .direct li,.eng-t{font-size:16.2px}
 .cap-pts li,.fields dd,.brief-status{font-size:15.12px}
 .cap-cat,.case-link,.brief-foot .note,.fld-err,.eng-err{font-size:11.88px}
 .cap-num,.brief button.btn{font-size:12.96px}
 .mb-states li,.stamp,.fields dt,.src,.case-proof dt,.fld label,.eng-lg{font-size:10.8px}
 .rl .hero-title{line-height:.94}
 .mb-title{line-height:1.04;text-wrap:balance}
 .cap-title,.prob-t{line-height:1.1;text-wrap:balance}
 .case-title{line-height:1.04}
 .rl .case-org{line-height:1.2;text-wrap:balance}
 .cta-title{line-height:1.02}
 .brief-done .done-t{line-height:1.12}
 .direct li{grid-template-columns:minmax(0,1fr);gap:4px}
 .direct a{overflow-wrap:anywhere}
}