/* Work index and case studies: page hero, discipline index, project features, dimensional figures, case-study sections. */

/* ================= Work + case study pages: same system as the homepage ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px}
.sec.tight{padding-top:0}
.sec.ruled{border-top:1px solid var(--line)}
.rl .sec.tight,.rl #index,.rl #projects{scroll-margin-top:72px}
.dash{display:block;width:40px;height:1px;background:var(--gold)}

/* current page in the header and menu */
.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]::after{transform:scaleX(1)}
.menu-links a[aria-current] .mono{color:var(--gold)}

/* ---------- page hero (Work, case study) ---------- */
.pg-hero{position:relative;padding-top:clamp(120px,12vw,176px);padding-bottom:clamp(40px,5vw,80px)}
.pg-hero .sec-head{margin-bottom:clamp(36px,4.4vw,72px)}
.rl .pg-kick{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,2.4vw,40px);line-height:1.1;letter-spacing:-.01em;color:var(--mute);margin-bottom:clamp(14px,1.6vw,24px)}
.pg-title{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.9vw,112px);line-height:.94;letter-spacing:-.025em;color:var(--ink)}
.pg-title.xl{font-size:clamp(52px,8.4vw,156px);line-height:.9}
.pg-title .ln{display:block;text-wrap:balance}
.pg-title em{color:var(--gold)}
.pg-sub{display:block;font-style:italic;font-size:.44em;line-height:1.1;letter-spacing:-.01em;color:var(--mute);margin-top:.34em}
.pg-row{margin-top:clamp(32px,4vw,64px);align-items:end}
.pg-lede{grid-column:1 / span 6;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--ink2);max-width:640px}
.pg-aside{grid-column:8 / span 5;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pg-note{font-size:14px;line-height:1.65;color:var(--mute);max-width:460px}
@media (max-width:900px){.pg-lede,.pg-aside{grid-column:1 / -1}.pg-title{font-size:clamp(44px,8vw,72px)}}
.anim .pg-in{animation:heroLineQ .8s var(--e-settle) both}
.anim .pg-in.d1{animation-delay:.08s}
.anim .pg-in.d2{animation-delay:.16s}
.anim .pg-in.d3{animation-delay:.26s}
.anim .pg-in.d4{animation-delay:.36s}

/* breadcrumb back to the index */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:clamp(28px,3.4vw,52px)}
.crumbs a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);transition:color .4s}
.crumbs a svg{flex:none;transition:transform .5s var(--ease)}
.crumbs a:hover{color:var(--gold)}
.crumbs a:hover svg{transform:translateX(-4px)}
.crumbs .rule{flex:1 1 40px;height:1px;background:var(--line)}
@media (max-width:640px){.crumbs .rule,.crumbs .sh-r{display:none}.crumbs{flex-direction:column;align-items:flex-start;gap:2px}}

/* attribution label */
.src{display:inline-flex;align-items:center;gap:10px;max-width:100%;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}
.pg-hero .src{margin-bottom:clamp(18px,2vw,28px)}
@media (max-width:420px){.src{letter-spacing:.12em}}

/* ---------- Work: discipline index ---------- */
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.cat{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:12px;min-height:44px;padding:20px 20px 24px 0;cursor:pointer}
.cat:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.cat::before{content:"";position:absolute;left:0;right:20px;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--e-settle)}
.cat.is-on::before{transform:none}
.cat .mono{color:var(--dim);transition:color .4s}
.cat.is-on .mono{color:var(--gold)}
.cat-name{font-family:var(--serif);font-size:clamp(22px,1.9vw,32px);line-height:1.05;letter-spacing:-.01em;color:var(--mute);transition:color .4s}
.cat.is-on .cat-name,.cat:hover .cat-name{color:var(--ink)}
.cat-state{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cat.has-work .cat-state{color:var(--ink2)}
@media (max-width:900px){
 .cats{grid-template-columns:1fr}
 .cat{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
 .cat::before{right:0}
 .cat-name{font-size:24px}
}

/* one panel per discipline; only the selected one shows */
.panel{display:none}
.panel.is-on{display:block}
.anim .panel.is-on{animation:fade .44s var(--e-enter) both}
.projects{padding-top:clamp(56px,6vw,96px)}

/* ---------- Work: featured project ---------- */
.feat-head{align-items:end;margin-bottom:clamp(28px,3.2vw,48px)}
.feat-lead{grid-column:1 / span 8;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.feat-num{color:var(--gold)}
.feat-title{font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.6vw,124px);line-height:.9;letter-spacing:-.025em}
.feat-title a{display:block;transition:color .5s}
.feat-title a:hover{color:var(--gold)}
.rl .feat-org{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,46px);line-height:1.05;letter-spacing:-.01em;color:var(--mute);margin-bottom:8px}
.feat-facts{grid-column:9 / span 4;border-top:1px solid var(--line)}
.feat-facts div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.feat-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.feat-facts dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.feat-link{display:block}
.feat-foot{margin-top:clamp(28px,3vw,48px);align-items:start}
.feat-desc{grid-column:1 / span 6;font-family:var(--serif);font-size:clamp(26px,2.4vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.feat-meta{grid-column:8 / span 5;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;width:100%;border-top:1px solid var(--line)}
.tags li{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--ink2);padding:12px 0;border-bottom:1px solid var(--line)}
@media (max-width:1100px){.feat-lead,.feat-facts,.feat-desc,.feat-meta{grid-column:1 / -1}}

/* ---------- Work: disciplines in preparation ---------- */
.prep-panel{align-items:start}
.prep-name{grid-column:1 / span 6;font-family:var(--serif);font-size:clamp(44px,5.4vw,96px);line-height:.95;letter-spacing:-.02em;color:var(--ink2);text-wrap:balance}
.prep-body{grid-column:8 / span 5;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.prep-state{color:var(--gold)}
@media (max-width:1000px){.prep-name,.prep-body{grid-column:1 / -1}}

/* ---------- closing band ---------- */
.band{border-top:1px solid var(--line);background:var(--bg2)}
.band-title{grid-column:1 / span 8;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,88px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.band-title em{color:var(--gold)}
.band-side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:24px;align-items:flex-start;align-self:end}
@media (max-width:1100px){.band-title,.band-side{grid-column:1 / -1}}

/* ---------- project visual: desktop view plus a phone state, inside the drawing-sheet frame ---------- */
.pv{position:relative;display:block;height:clamp(420px,52vw,780px)}
.pv-stage{position:absolute;inset:7% 5% 9%;z-index:1;container-type:size}
.pv-canvas{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}
@supports (width:1cqw){.pv-canvas{width:min(100cqw,160cqh);height:min(100cqh,62.5cqw)}}
.pv .dev-desk{left:0;top:0;width:82%}
.pv .dev-phone{right:1%;bottom:0;width:20%}
.pv.pv-tall{height:clamp(460px,58vw,860px)}
.pv.has-legend .pv-stage{inset:7% 5% 16%}
.pv.desk-only .dev-desk{left:5%;top:2.4%;width:90%}
@media (max-width:700px){
 .rl .pv,.rl .pv.pv-tall{height:clamp(420px,118vw,560px);margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
 .pv .pv-stage{inset:6% 5% 8%}
 .pv.has-legend .pv-stage{inset:6% 5% 17%}
 /* phone first; the desktop view becomes a cropped layer behind it */
 .pv:not(.desk-only) .pv-canvas{width:100%;height:100%}
 .pv .dev-desk{left:-30%;top:14%;width:112%;opacity:.42}
 .pv .dev-phone{right:6%;top:0;bottom:auto;width:auto;height:100%}
 .pv.desk-only{height:clamp(300px,82vw,420px)}
 .pv.desk-only .pv-stage{inset:8% 5% 10%}
 .pv.desk-only.has-legend .pv-stage{inset:8% 5% 21%}
 .pv.desk-only .dev-desk{left:3%;top:0;width:94%;opacity:1}
}
.dev-desk{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-screen{position:relative;overflow:hidden;background:#F4F5F3}
.dev-phone{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)}
.fig-cap{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-top:14px}
.fig-cap .mono{white-space:normal}

/* resolve from darkness; the two views settle slightly as they enter */
.anim .resolve{opacity:0;filter:brightness(.25);transition:opacity 1.3s var(--e-enter),filter 1.7s var(--e-enter)}
.anim .resolve.in{opacity:1;filter:none}
.anim .resolve .dev-desk{transform:translateX(-14px);transition:transform 1.6s var(--e-settle) .1s}
.anim .resolve .dev-phone{transform:translate(14px,10px);transition:transform 1.6s var(--e-settle) .22s}
.anim .resolve.in .dev-desk,.anim .resolve.in .dev-phone{transform:none}

/* architecture lines draw once */
.anim .resolve .d-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--e-settle) .35s}
.anim .resolve.in .d-draw{stroke-dashoffset:0}

/* site architecture: layers resolve back to front, about 0.9 s (the mobile drawing simply fades in) */
.anim .fig-ia.resolve{filter:none;transition:opacity .4s var(--e-enter)}
.anim .fig-ia .ia-auds,.anim .fig-ia .ia-pws,.anim .fig-ia .ia-note,.anim .fig-ia .ia-pg{opacity:0;transform:translateY(6px);transition:opacity .45s var(--e-enter),transform .55s var(--e-settle)}
.anim .fig-ia .ia-pws{transition-delay:.16s}
.anim .fig-ia .ia-pg{transition-delay:.3s}
.anim .fig-ia .ia-note{transition-delay:.46s}
.anim .fig-ia.in .ia-auds,.anim .fig-ia.in .ia-pws,.anim .fig-ia.in .ia-note,.anim .fig-ia.in .ia-pg{opacity:1;transform:none}
.anim .fig-ia.resolve .ia-lk{transition:stroke-dashoffset .6s var(--e-settle) .1s,opacity .44s var(--e-enter)}
.anim .fig-ia.resolve .ia-cn{transition:stroke-dashoffset .4s var(--e-settle) .34s}
.anim .fig-ia .ia-shd,.anim .fig-ia .ia-lift{transition:transform .5s var(--e-settle)}
.anim .fig-ia .ia-a,.anim .fig-ia .ia-pw,.anim .fig-ia .ia-lkh{transition:opacity .44s var(--e-enter)}

/* delivery: the progression line draws, then the launch end resolves; the proof text is there from the start */
.anim .track.resolve{filter:none;transition:opacity .5s var(--e-enter)}
.anim .track.resolve .d-draw{transition:stroke-dashoffset .9s var(--e-weight) .25s}
.anim .track .d-end{opacity:0;transition:opacity .4s var(--e-enter) 1.05s}
.anim .track.in .d-end{opacity:1}

/* numbered annotations appear after the figure */
.mk{position:absolute;z-index:4;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--gold);color:#0A0A09;font:500 9px/15px var(--mono);text-align:center;box-shadow:0 0 0 3px rgba(10,10,9,.5)}
.mk-legend{position:absolute;left:64px;bottom:24px;z-index:3;display:flex;flex-wrap:wrap;gap:6px 16px;max-width:calc(100% - 250px);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.mk-legend li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.mk-legend b{width:15px;height:15px;border-radius:50%;background:var(--gold);color:#0A0A09;font:500 9px/15px var(--mono);text-align:center;letter-spacing:0}
.mk-legend .lg-s{display:none}
.anim .resolve .mk,.anim .resolve .mk-legend{opacity:0;transition:opacity .6s var(--e-enter) 1.1s}
.anim .resolve.in .mk,.anim .resolve.in .mk-legend{opacity:1}
@media (max-width:700px){
 .mk{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;font-size:8px;line-height:13px}
 .mk-legend{left:44px;bottom:20px;max-width:calc(100% - 88px);gap:5px 12px;font-size:8.5px;letter-spacing:.1em}
 .mk-legend li{gap:5px}
 .mk-legend .lg-l{display:none}
 .mk-legend .lg-s{display:inline}
 .mk-legend b{width:13px;height:13px;font-size:8px;line-height:13px}
}

/* directory figure: markers 1 to 4 sit on the desktop view, 5 beside the phone list. All live on the annotation plane in
   canvas coordinates: the phone is 20% wide at 79% and starts 32.57% down (67.43% tall). Under 701 px all five move to the
   phone, which then fills the canvas height 6% from the right, 47.454% of the height wide. */
.mk-cont{left:1.6%;top:24.1%}
.mk-front{left:1.6%;top:36.4%}
.mk-az{left:1.6%;top:42.6%}
.mk-list{left:1.6%;top:52.1%}
.mk-ph{left:77.6%}
.mk-p5{top:81.39%}
.mk-m{display:none}

/* homepage figure markers (desktop view only) */
.mk-snav{left:33.6%;top:15.7%}
.mk-hier{left:7.9%;top:32.6%}
.mk-paths{left:7.9%;top:65.4%}
.mk-news{left:7.9%;top:77.8%}
@media (max-width:700px){
 .fig-dir .mk-d{display:none}
 .mk-m{display:block}
 .mk-ph{left:calc(94cqw - 50.776cqh)}
 .mk-p1{top:17.9%}.mk-p2{top:31.7%}.mk-p3{top:44.6%}.mk-p4{top:55.4%}.mk-p5{top:72.4%}
 .mk-snav{left:34.3%;top:13.9%}.mk-hier{left:6%;top:31.5%}.mk-paths{left:6%;top:65.8%}.mk-news{left:6%;top:78.8%}
}

/* ---------- dimensional presentation (case study artifacts only; the flat editorial sections stay flat) ----------
   dim     device material: matte graphite, soft black, a muted champagne edge where light from the upper right
           catches it, soft directional shadows falling down and to the left.
   dim-3d  a perspective stage, 701 px and wider: the desktop on the base plane, the phone on a plane in front,
           shadows on a floor plane behind, annotations on a top plane. At rest (and during the reveal) the figure is
           plain 2D, so the artwork renders 1:1 and sharp and depth reads through light and shadow. Only while the
           pointer leans the stage (core.js RL_TILT: at most 1.6 degrees, damped, level again once the pointer rests)
           does the figure carry is-deep: the stage gets its perspective and the planes separate in Z, each pre-scaled
           by (P - Z) / P (P = 160cqw) so nothing shifts as they part. */
.pl{position:absolute;inset:0;pointer-events:none}
.dim .dev-desk{z-index:0;border-radius:8px;background:#171715;box-shadow:0 0 0 1px rgba(241,238,231,.09),0 2px 0 0 #1c1b18,0 3px 0 0 rgba(0,0,0,.55),-10px 18px 30px -14px rgba(0,0,0,.75)}
.dim .dev-desk::before,.dim .dev-desk::after{content:"";position:absolute;z-index:2;pointer-events:none}
.dim .dev-desk::before{left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(214,190,140,0) 14%,rgba(214,190,140,.18) 56%,rgba(228,206,160,.58) 93%,rgba(214,190,140,.24))}
.dim .dev-desk::after{top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(228,206,160,.46),rgba(214,190,140,0) 36%)}
.dim .dev-phone{z-index:0;background:linear-gradient(215deg,#2b2a26 0%,#181816 30%,#0d0d0c 100%);box-shadow:0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(241,238,231,.07),-14px 24px 36px -14px rgba(0,0,0,.85),-3px 5px 10px -4px rgba(0,0,0,.6)}
.dim .dev-phone::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(215deg,rgba(228,206,160,.6),rgba(214,190,140,.1) 24%,rgba(214,190,140,0) 58%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* a trace of glass on the phone only */
.dim .dev-phone .dev-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(215deg,rgba(255,255,255,.07),rgba(255,255,255,0) 30%)}

/* annotations float: a small contact shadow under each marker */
.dim .mk{box-shadow:0 0 0 3px rgba(10,10,9,.5),-2px 4px 8px rgba(0,0,0,.55)}

/* floor: a faint pool of light on matte graphite, and the desktop's soft shadow (box-shadow on a dark box, no filter) */
.sh{display:none;position:absolute;border-radius:24px;background:rgba(0,0,0,.4);box-shadow:0 0 44px 26px rgba(0,0,0,.4)}

/* hero annotations: a leader from each view's edge (anchor dot on the edge) to its label. The desktop view's label
   sits under its lower edge (clear of the phone), the phone's label above its top edge (clear of the desktop view). */
.ann{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;color:var(--mute);white-space:nowrap}
.ann-t{display:block;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.ann-ln{display:block;position:relative;width:1px;height:18px;background:rgba(241,238,231,.34)}
.ann-ln::before{content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:-1px 2px 4px rgba(0,0,0,.6)}
.ann-w{left:6%;top:86.74%}
.ann-w .ann-ln{margin-bottom:8px}
.ann-w .ann-ln::before{top:-2px}
.ann-p{left:79%;width:20%;bottom:67.43%}
.ann-p .ann-t{text-align:right}
.ann-p .ann-ln{left:75%;margin-top:8px}
.ann-p .ann-ln::before{bottom:-2px}
@media (max-width:700px){.ann{display:none}}

/* the phone screen's artwork runs 1 px past its rounded clip, so no screen background shows at the edge under 3D sampling */
.dim .dev-phone .dev-page{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
@media (min-width:701px){
 .dim-3d .pl-floor{background:radial-gradient(ellipse 62% 64% at 54% 48%,rgba(241,238,231,.06),rgba(241,238,231,0) 74%)}
 .dim-3d .sh-desk{display:block;left:calc(-1.8% + 26px);top:calc(4% + 26px);width:calc(82% - 52px);height:calc(86.74% - 52px);background:rgba(0,0,0,.55);box-shadow:0 0 48px 28px rgba(0,0,0,.55)}
 .dim-3d .sh-phone{display:block;left:calc(76.4% + 26px);top:calc(37.4% + 26px);width:calc(20% - 52px);height:calc(67.43% - 52px);background:rgba(0,0,0,.3);box-shadow:0 0 40px 22px rgba(0,0,0,.3)}
}
@supports (width:1cqw){
 @media (min-width:701px){
  .dim-3d.is-deep .pv-canvas{transform-style:preserve-3d;transform:translate(-50%,-50%) perspective(160cqw)}
  .dim-3d.is-deep .pl{transform-style:preserve-3d}
  .dim-3d.is-deep .pl-floor{transform:translateZ(-14cqw) scale(1.0875)}
  .dim-3d.is-deep .pl-phone{transform:translateZ(12cqw) scale(.925)}
  .dim-3d.is-deep .pl-ann{transform:translateZ(16cqw) scale(.9)}
 }
}

/* reveal, about 0.86 s in all: the desktop resolves first, the phone comes forward (rises and grows to size),
   annotations resolve last.
   Only the hidden (not yet .in) state is set here, so each element resolves to its own resting style
   (under 701 px the desktop view rests as a dimmed layer behind the phone). */
.anim .dim.resolve{filter:none;transition:opacity .36s var(--e-enter)}
.anim .dim.resolve .dev-desk{transition:opacity .5s var(--e-enter),transform .56s var(--e-settle)}
.anim .dim.resolve .dev-phone{transition:opacity .48s var(--e-enter) .18s,transform .56s var(--e-settle) .18s}
.anim .dim.resolve .sh{transition:opacity .6s var(--e-enter) .12s}
.anim .dim.resolve .mk,.anim .dim.resolve .mk-legend,.anim .dim.resolve .ann{transition:opacity .3s var(--e-enter) .56s}
.anim .dim.resolve .ann-ln{transition:transform .3s var(--e-settle) .54s}
.anim .dim.resolve .ann-w .ann-ln{transform-origin:50% 0}
.anim .dim.resolve .ann-p .ann-ln{transform-origin:50% 100%}
.anim .dim.resolve:not(.in) .dev-desk{opacity:0;transform:translateY(10px)}
.anim .dim.resolve:not(.in) .dev-phone{opacity:0;transform:translateY(14px) scale(.965)}
.anim .dim.resolve:not(.in) .sh,.anim .dim.resolve:not(.in) .ann{opacity:0}
.anim .dim.resolve:not(.in) .ann-ln{transform:scaleY(0)}

/* ---------- case study ---------- */
.cs-cover{margin-top:clamp(40px,4.4vw,72px)}
.rl .meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--line);margin-top:clamp(40px,4.4vw,72px)}
.meta div{padding:14px 0 16px;border-bottom:1px solid var(--line)}
.meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.meta dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
@media (max-width:900px){.rl .meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rl .meta{grid-template-columns:1fr}}
.cs-h{grid-column:1 / span 6;font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,64px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.cs-body{grid-column:8 / span 5;display:flex;flex-direction:column;gap:22px}
.cs-body p{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--ink2)}
.cs-body p.pg-note{font-size:14px;line-height:1.65;color:var(--mute)}
@media (max-width:1000px){.cs-h,.cs-body{grid-column:1 / -1}}
.rl .idx-list{border-top:1px solid var(--line);margin-top:6px}
.idx-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.idx-list .mono{color:var(--gold)}

/* my role: the prominent block */
.role{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.role-cols{row-gap:28px}
.role-title{grid-column:1 / span 6;font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.6vw,120px);line-height:.9;letter-spacing:-.025em}
.role-title em{color:var(--gold)}
.role-copy{grid-column:1 / span 6;font-size:clamp(17px,1.45vw,22px);line-height:1.6;color:var(--ink2)}
.role-grid{grid-column:8 / span 5;grid-row:1 / span 2;align-self:start;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.role-grid li{min-height:112px;padding:14px 14px 16px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.role-grid li>b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.16em;color:var(--gold)}
.role-grid li>span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--ink)}
@media (max-width:1100px){.role-title,.role-copy,.role-grid{grid-column:1 / -1}.role-grid{grid-row:auto}}
@media (max-width:520px){.role-grid li{min-height:92px;padding:12px 10px 14px}.role-grid li>span{font-size:10px;letter-spacing:.08em}}
@media (max-width:400px){.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-grid li>span{letter-spacing:.03em}}

/* solution: what the site is built from */
.rl .sys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--line);margin-top:clamp(40px,4vw,64px)}
.sys li{padding:16px 0 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sys li .mono{color:var(--gold)}
.sys li>span:last-child{font-size:16px;line-height:1.4;color:var(--ink)}
@media (max-width:900px){.rl .sys{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* information architecture drawing */
.rl .fig-ia{height:clamp(440px,50vw,720px);margin-top:clamp(40px,4vw,64px)}
.fig-ia .mx-svg{position:absolute;left:5%;top:7%;width:90%;height:84%;z-index:1;display:block}
.fig-ia .ia-mob{display:none}
@media (max-width:700px){
 .rl .fig-ia{height:auto;padding:34px 16px 30px}
 .fig-ia .ia-desk{display:none}
 .fig-ia .ia-mob{display:block;position:relative;left:auto;top:auto;width:100%;height:auto}
}

/* depth by layer (desktop drawing): audiences behind, pathways in the middle, pages forward, Public Directory closest.
   Plates are lighter the closer they sit; connections brighten as they travel forward (gradient strokes). */
.ia-desk .ia-st{stop-color:#F1EEE7}
.ia-desk .ia-st-g{stop-color:var(--gold)}
.ia-desk .ia-sh1{fill:rgba(0,0,0,.2)}
.ia-desk .ia-sh2{fill:rgba(0,0,0,.12)}
.ia-desk .ia-sh3{fill:rgba(0,0,0,.08)}
.ia-desk .ia-sh4{fill:rgba(0,0,0,.05)}
.ia-desk .ia-edge{fill:#080807;stroke:rgba(241,238,231,.08);stroke-width:1}
.ia-desk .ia-face{stroke-width:1.2}
.ia-desk .ia-face-a{fill:#10100f;stroke:rgba(241,238,231,.24)}
.ia-desk .ia-face-p{fill:#151513;stroke:rgba(241,238,231,.34)}
.ia-desk .ia-face-on{fill:#1b1914;stroke:rgba(201,164,93,.9);stroke:color-mix(in srgb,var(--gold) 90%,transparent)}
.ia-desk .ia-face-g{fill:#191917;stroke:rgba(241,238,231,.2)}
.ia-desk .ia-face-gon{stroke:rgba(201,164,93,.5);stroke:color-mix(in srgb,var(--gold) 50%,transparent)}
.ia-desk .ia-hi{fill:none;stroke:rgba(241,238,231,.18);stroke-width:1}
.ia-desk .ia-hi-g{stroke:rgba(228,206,160,.75)}
.ia-desk .ia-lbl-a{fill:rgba(237,233,225,.82)}
.ia-desk .ia-pgt{fill:#E6E2DA}
.ia-desk .ia-lk{fill:none;stroke:url(#ia-g-lk);stroke-width:1.4}
.ia-desk .ia-lk-g{stroke:url(#ia-g-lkg);stroke-width:1.7}
.ia-desk .ia-lkh{fill:none;stroke:url(#ia-g-lkh);stroke-width:1.6;opacity:0}
.ia-desk .ia-lkh.ia-lk-g{stroke:var(--gold);stroke-width:1.9}
.ia-desk .ia-cn{fill:none;stroke:url(#ia-g-cn);stroke-width:1.5}
.ia-desk .ia-cn-g{stroke:var(--gold);stroke-width:2}
.ia-desk .ia-hit{fill:transparent}

/* hover (desktop pointers): the pathway's row lifts toward the viewer, its connections brighten, other routes recede */
@media (hover:hover) and (pointer:fine){
 .ia-desk .ia-pw:hover .ia-lift{transform:translateY(-2px)}
 .ia-desk .ia-pw:hover .ia-shd{transform:translate(-1px,3px)}
 .ia-desk:has(.ia-pw:hover) :is(.ia-a,.ia-lk){opacity:.3}
 .ia-desk:has(.ia-pw:hover) .ia-pw:not(:hover){opacity:.5}
 .ia-desk:has(.pw-0:hover) .to-0,.ia-desk:has(.pw-1:hover) .to-1,.ia-desk:has(.pw-2:hover) .to-2,
 .ia-desk:has(.pw-3:hover) .to-3,.ia-desk:has(.pw-4:hover) .to-4,.ia-desk:has(.pw-5:hover) .to-5{opacity:1}
}

/* accelerated delivery: one proof point, no counters */
.dlv-num{grid-column:1 / span 6;display:flex;flex-direction:column;gap:12px}
.dlv-big{font-family:var(--serif);font-weight:400;font-size:clamp(88px,12vw,220px);line-height:.82;letter-spacing:-.04em;color:var(--ink)}
.dlv-big em{color:var(--gold)}
.dlv-copy{grid-column:8 / span 5;align-self:end}
.dlv-copy p{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--ink2)}
@media (max-width:1000px){.dlv-num,.dlv-copy{grid-column:1 / -1}}
.rl .track{margin:clamp(48px,5vw,80px) 0 0}
.track .mx-svg{display:block;width:100%;height:auto}
.track .dlv-mob{display:none;max-width:440px}
@media (max-width:900px){.track .dlv-desk{display:none}.track .dlv-mob{display:block}}

/* directory: dependency, requirement, response, result */
.dir-h{grid-column:1 / span 7}
.dir-h em{color:var(--gold)}
.dir-body{grid-column:8 / span 5;align-self:end}
@media (max-width:1100px){.dir-h,.dir-body{grid-column:1 / -1}}
.rl .flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(40px,4.6vw,72px) 0;border-top:1px solid var(--line)}
.flow li{position:relative;padding:20px 32px 24px 0;display:flex;flex-direction:column;gap:12px}
.flow li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line2);transform-origin:0 50%}
.flow li.is-key::before{background:var(--gold)}
.flow li::after{content:"";position:absolute;right:14px;top:27px;width:8px;height:8px;border-top:1px solid var(--ink2);border-right:1px solid var(--ink2);transform:rotate(45deg)}
.flow li:last-child::after{display:none}
.flow .mono{color:var(--dim)}
.flow li.is-key .mono{color:var(--gold)}
.flow p{font-family:var(--serif);font-size:clamp(22px,2vw,32px);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.anim .flow li::before{transform:scaleX(0);transition:transform 1s var(--e-settle)}
.anim .flow.in li::before{transform:none}
.anim .flow.in li:nth-child(2)::before{transition-delay:.25s}
.anim .flow.in li:nth-child(3)::before{transition-delay:.5s}
.anim .flow.in li:nth-child(4)::before{transition-delay:.75s}
@media (max-width:900px){
 .rl .flow{grid-template-columns:1fr;border-top:0}
 .flow li{padding:16px 40px 18px 0}
 .flow li::after{right:10px;top:auto;bottom:22px;transform:rotate(135deg)}
}
.rl .spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--line);margin-top:clamp(32px,3.4vw,56px)}
.spec div{padding:14px 0 16px;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.spec dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
@media (max-width:1000px){.rl .spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rl .spec{grid-template-columns:1fr}}

/* design: desktop view plus two mobile states */
.rl .fig-design{margin-top:clamp(40px,4.4vw,72px)}
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(28px,3vw,44px)}
.rl .ph-fig{display:flex;justify-content:center;padding:clamp(36px,4vw,64px) 0}
.ph-fig .dev-phone{position:relative;width:min(300px,56%)}
.ph-caps .mono:last-child{text-align:right}
@media (max-width:700px){.phones{gap:12px}.rl .ph-fig{padding:26px 0}.ph-fig .dev-phone{width:74%}}

/* outcome */
.outcome-stmt{grid-column:1 / span 10;font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,84px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.outcome-stmt em{color:var(--gold)}
.outcome-notes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(8px,1.6vw,24px)}
.outcome-notes p{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--ink2);padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:900px){.outcome-stmt{grid-column:1 / -1}.outcome-notes{grid-template-columns:1fr}}

/* capabilities + technology */
.cap-rows{grid-column:1 / span 7;border-top:1px solid var(--line)}
.cap-rows li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.cap-rows .mono{color:var(--gold)}
.cap-rows li>span:last-child{font-family:var(--serif);font-size:clamp(26px,2.4vw,40px);line-height:1.05;letter-spacing:-.01em}
.tech{grid-column:9 / span 4;display:flex;flex-direction:column;gap:16px;align-self:start}
.tech ul{border-top:1px solid var(--line)}
.tech li{padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
@media (max-width:1000px){.cap-rows,.tech{grid-column:1 / -1}}

/* next: the closing decision point. More work (quiet, with the way back to all work), then the conversation (strongest) */
.next{border-top:1px solid var(--line)}
.next-cols{align-items:stretch;row-gap:56px}
.next-more{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.rl .next-prep{font-family:var(--serif);font-size:clamp(26px,2.4vw,40px);line-height:1.08;letter-spacing:-.01em;color:var(--mute)}
.rl .next-proj{display:flex;flex-direction:column;gap:6px;width:100%}
.next-t{font-family:var(--serif);font-size:clamp(26px,2.4vw,40px);line-height:1.05;color:var(--ink)}
a.next-proj:hover .next-t{color:var(--gold)}
.next-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);transition:color .4s}
.next-all svg{flex:none;transition:transform .5s var(--ease)}
.next-all:hover{color:var(--gold)}
.next-all:hover svg{transform:translateX(4px)}
.next-cta{grid-column:7 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-top:18px;border-top:1px solid var(--gold)}
.next-cta>.mono{color:var(--gold)}
.next-cta-t{display:block;font-family:var(--serif);font-size:clamp(44px,4.8vw,88px);line-height:.92;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;transition:color .5s}
.next-cta-t .nw{white-space:nowrap}
.next-cta-t svg{display:inline-block;width:.34em;height:.34em;margin-left:.2em;vertical-align:.06em;color:var(--gold);transition:transform .5s var(--ease)}
.next-cta:hover .next-cta-t{color:var(--gold)}
.next-cta:hover .next-cta-t svg{transform:translateX(8px)}
.next-cta:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
@media (max-width:1000px){.next-more,.next-cta{grid-column:1 / -1}}
.dev-page text{font-family:var(--sans);letter-spacing:0}

/* Mobile reading scale: body, facts and interface labels × 1.08. */
@media (max-width:767px){
 .pg-lede,.role-copy{font-size:18.36px}
 .cs-body p,.idx-list li,.sys li>span:last-child,.dlv-copy p,.outcome-notes p{font-size:17.28px}
 .meta dd,.spec dd{font-size:16.2px}
 .pg-note,.cs-body p.pg-note,.feat-facts dd{font-size:15.12px}
 .crumbs a,.role-grid li>span,.tech li,.next-all{font-size:11.88px}
 .src,.cat-state,.feat-facts dt,.tags li,.meta dt,.role-grid li>b,.spec dt{font-size:10.8px}
 .pg-title,.pg-title.xl{line-height:1.02;text-wrap:balance}
 .pg-sub{line-height:1.2}
 .feat-title,.role-title{line-height:1.02;text-wrap:balance}
 .rl .feat-org{line-height:1.15;text-wrap:balance}
 .cs-h{line-height:1.1}
 .prep-name,.band-title,.outcome-stmt,.next-cta-t{line-height:1.05}
 .cap-rows li>span:last-child,.next-t,.rl .next-prep{line-height:1.12}
 .role-grid li>span{overflow-wrap:anywhere}
}
@media (max-width:520px){.role-grid li>span{font-size:10.8px}}