/* EUD Design & Engineering — site styles.
   Colours: cream #F4F3EC and navy #124471 (see :root). Map colours live in js/app.js (3D MAP section). */
:root{
  color-scheme: light;
  --navy:#124471; --cream:#F4F3EC; --cream-2:#ECEAE1;
  --ink:#124471; --muted:rgba(18,68,113,.66);
  --line:rgba(18,68,113,.16); --line-strong:rgba(18,68,113,.34);
  --on-navy:#F4F3EC; --on-navy-muted:rgba(244,243,236,.72); --line-navy:rgba(244,243,236,.22);
  --font:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --navh:76px;
}
*{box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.navy :focus-visible,[data-dark] :focus-visible{outline-color:var(--cream)}
.wrap{padding-inline:var(--gutter);max-width:1480px;margin-inline:auto}
.label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--muted)}
/* headlines: capitals, medium weight */
h1,h2,h3{margin:0;text-wrap:balance;font-weight:500;letter-spacing:-.005em;text-transform:uppercase}
.d1{font-size:clamp(2.5rem,6.6vw,6.2rem);line-height:1;font-weight:500;letter-spacing:-.02em}
.d2{font-size:clamp(1.9rem,4.2vw,3.7rem);line-height:1.04;letter-spacing:-.015em}
.d3{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.18;letter-spacing:-.005em}
.lead{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.4;font-weight:400;letter-spacing:-.01em;max-width:32ch}
.statement{font-size:clamp(1.5rem,3.2vw,2.8rem);line-height:1.22;font-weight:400;letter-spacing:-.02em;max-width:26ch;margin:0}
p{margin:0}
.prose{max-width:62ch}
.prose p+p{margin-top:1em}
.num{font-variant-numeric:tabular-nums}

/* split text */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block}
.fw{white-space:nowrap}

/* icons (logo glyphs, tinted with currentColor) */
.icm{display:inline-block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}

/* ---------- LOADER ---------- */
#loader{position:fixed;inset:0;z-index:9800;background:var(--cream);color:var(--navy);display:grid;place-items:center;transition:clip-path 1s var(--ease);clip-path:inset(0 0 0 0);animation:ldSafety .6s 15s forwards}
#loader.done{clip-path:inset(0 0 100% 0)}
@keyframes ldSafety{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.ld{display:grid;justify-items:center;gap:26px}
.ld-icons{display:flex;gap:clamp(10px,2vw,18px)}
.ld-icons i:not([class*=" ic"]){visibility:hidden}
.ld-icons i{flex:none;width:clamp(48px,7vw,72px);height:clamp(48px,7vw,72px);transition:opacity .12s linear}
.ld-icons i.flick{opacity:.55}
.ld-icons i.set{animation:settle .45s linear}
@keyframes settle{0%{opacity:.4}100%{opacity:1}}
.ld-bar{width:140px;height:1px;background:var(--line)}
.ld-bar b{display:block;height:100%;background:var(--navy);transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease)}

/* ---------- NAV ---------- */
#nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background .35s,color .35s,box-shadow .35s;background:var(--cream);color:var(--navy);box-shadow:0 1px 0 var(--line)}
#nav.dark{background:transparent;color:var(--on-navy);box-shadow:none}
#nav.hide{transform:translateY(-110%)}
#nav .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--navh)}
#nav .logo{display:block;width:150px;height:32px;position:relative;flex:none}
#nav .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .3s}
#nav .logo .lw{opacity:0} #nav.dark .logo .lw{opacity:1} #nav.dark .logo .lb{opacity:0}
#nav nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
#nav nav a{text-decoration:none;font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;position:relative;padding-block:6px}
#nav nav a:not(.talk)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
#nav nav a:hover::after,#nav nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
#nav .talk{padding:10px 18px!important;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;transition:background .25s,color .25s}
#nav .talk:hover{background:var(--navy);color:var(--cream)}
#nav.dark .talk:hover{background:var(--cream);color:var(--navy)}
#burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
#burger span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .3s}
#burger span:nth-child(1){top:17px}#burger span:nth-child(2){top:25px}
body.menu #burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu #burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:900px){
  #burger{display:block}
  #nav nav{position:fixed;inset:0;background:var(--cream);color:var(--navy);flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--gutter);gap:12px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);z-index:-1}
  #nav nav a{font-size:1.8rem;font-weight:500;letter-spacing:0}
  #nav nav .talk{font-size:1rem;margin-top:16px;letter-spacing:.1em}
  body.menu #nav nav{clip-path:inset(0 0 0 0)}
  body.menu #nav{color:var(--navy);background:transparent;box-shadow:none}
  body.menu #nav .lw{opacity:0!important} body.menu #nav .lb{opacity:1!important}
}

/* ---------- VIEW / PAGE TRANSITION ---------- */
#view{position:relative;z-index:1;background:var(--cream);min-height:60vh;transition:opacity .3s}
#view.out{opacity:0}
.page-top{padding-top:calc(var(--navh) + env(safe-area-inset-top,0px))}
#wipe{position:fixed;inset:0;z-index:9000;background:var(--cream);display:grid;place-items:center;transform:translateY(101%);pointer-events:none}
#wipe img{width:130px}

/* ---------- RULER (scroll distance) ---------- */
#ruler{position:fixed;left:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:12px;padding:5px 14px 5px 5px;background:rgba(244,243,236,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--line);border-radius:3px;color:var(--navy);pointer-events:none}
#ruler canvas{width:180px;height:30px;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#ruler .rt{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
#ruler .rt b{font-weight:600;display:inline-block;min-width:2ch;text-align:right}
@media (max-width:620px){#ruler canvas{width:110px}#ruler .rt{font-size:.6rem}}

/* ---------- CURSOR (dot + small text) ---------- */
#cursor{position:fixed;left:0;top:0;z-index:9990;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
html.cur #cursor.live{opacity:1}
html.cur #cursor.s-hide{opacity:0}
html.cur,html.cur *{cursor:none!important}
html.cur input,html.cur textarea{cursor:text!important}
html.cur select{cursor:pointer!important}
.c-dot{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--navy);transition:transform .35s var(--ease),background .25s}
.c-label{position:absolute;left:14px;top:0;transform:translateY(-50%);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--navy);clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease),color .25s}
#cursor.flip .c-label{left:auto;right:14px;clip-path:inset(0 0 0 100%)}
#cursor.has-label .c-label{clip-path:inset(0 0 0 0)}
#cursor.s-link .c-dot{transform:scale(1.9)}
#cursor.press .c-dot{transform:scale(.6)}
#cursor.dark .c-dot{background:var(--cream)}
#cursor.dark .c-label{color:var(--cream)}
/* over photos, films and the photo viewer the cursor turns negative, so it shows on light and dark parts alike */
#cursor.neg{mix-blend-mode:difference}
#cursor.neg .c-dot{background:#fff}
#cursor.neg .c-label{color:#fff;text-shadow:none}

/* ---------- HERO (video) ---------- */
.hero{position:relative;height:min(100svh,1000px);min-height:560px;color:var(--on-navy);background:var(--navy);overflow:hidden;isolation:isolate;clip-path:inset(0)}
/* the video layer is fixed to the screen and clipped by the hero, so it never moves while the page scrolls */
.hero .media{position:fixed;left:0;top:0;width:100%;height:min(100svh,1000px);min-height:560px;z-index:-2;overflow:hidden;contain:paint}
.hero .media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(18,68,113,.35) 0%,rgba(18,68,113,0) 30%,rgba(18,68,113,0) 50%,rgba(18,68,113,.72) 100%)}
.hero .pz{position:absolute;inset:0}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .poster{z-index:1;transition:opacity .8s}
.hero .shade{position:absolute;inset:0;z-index:1;background:var(--navy);opacity:0}
.hero .inner{position:absolute;left:0;right:0;bottom:0;padding-block:140px 44px;display:grid;gap:26px}
.hero .eyebrow{display:flex;gap:14px;align-items:center}
.hero .eyebrow i{width:40px;height:1px;background:currentColor}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line-navy);padding-top:22px}
.hero-foot p{max-width:44ch;color:var(--on-navy-muted);font-size:1rem}
.cue{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-navy)}
.cue .chev{width:40px;height:40px;border:1px solid var(--line-navy);border-radius:50%;display:grid;place-items:center;overflow:hidden}
.cue .chev svg{animation:drop 1.8s var(--ease) infinite}
@media (max-width:620px){.hero .inner{padding-bottom:84px}}
@keyframes drop{0%{transform:translateY(-140%)}55%,100%{transform:translateY(140%)}}

/* ---------- HOME JOURNEY (scroll story after the film; motion in js/app.js → journeyMotion) ---------- */
.journey{position:relative;height:700svh;background:var(--cream)}
.jstage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--cream);color:var(--navy);isolation:isolate}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jh1{position:absolute;inset:0;display:flex;align-items:center;z-index:1;pointer-events:none;visibility:hidden}
.jh1 span{display:block;white-space:nowrap;font-size:clamp(70px,13vw,250px);font-weight:600;line-height:1;letter-spacing:-.025em;text-transform:uppercase;color:var(--cream);opacity:.95;will-change:transform}
.jrow{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;width:max-content;z-index:2;will-change:transform}
.jr1{gap:clamp(16px,2.6vw,44px)}
.jr2{gap:clamp(24px,4.4vw,80px);color:var(--navy)}
.jc{display:block;flex:none;width:clamp(210px,22vw,400px);text-decoration:none;color:var(--cream)}
.jr1 .jc:nth-child(odd){margin-top:13vh}
.jr1 .jc:nth-child(even){margin-bottom:13vh}
.jc .jim{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:rgba(244,243,236,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.jc img,.jA img{width:100%;height:100%;object-fit:cover;display:block}
.jc.slot{visibility:hidden}
.jt{display:block;margin-top:16px;font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.35}
.js{display:block;margin-top:4px;font-size:.74rem;opacity:.7}
.jc.wide{width:clamp(260px,30vw,560px);color:var(--navy)}
.jc.wide .jim{aspect-ratio:4/3;box-shadow:0 30px 60px -34px rgba(18,68,113,.45);background:rgba(18,68,113,.08)}
.jr2 .jc.wide:nth-child(odd){margin-top:18vh}
.jr2 .jc.wide:nth-child(even){margin-bottom:18vh}
.jA{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;display:block;color:var(--cream);text-decoration:none;will-change:left,top,width,height}
.jA .jim{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--navy)}
.jA .jim img{transform-origin:50% 50%}
.jA .jt{position:absolute;left:0;top:100%;white-space:nowrap}
.jA .js{position:absolute;left:0;top:calc(100% + 38px);white-space:nowrap}
.jmask{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.jend{position:absolute;inset:0;z-index:6;pointer-events:none;visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.04em;color:var(--cream);font-size:90px;font-weight:600;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;text-align:center;will-change:transform,opacity}
.jl{white-space:nowrap;will-change:transform,opacity}
.jend.jsvg{display:block;width:100%;height:100%;fill:var(--cream)}
.jwipe{position:absolute;inset:0;z-index:7;background:var(--cream);clip-path:inset(100% 0% 0% 0%);pointer-events:none}
.jk{position:absolute;left:0;right:0;top:calc(var(--navh) + 4vh);text-align:center;z-index:5;color:var(--navy)}
.jcue{position:absolute;left:0;right:0;bottom:calc(5vh + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--navy)}
.jcue i{display:block;width:1px;height:46px;background:currentColor;transform-origin:top;animation:jcue 2.2s var(--ease) infinite}
@keyframes jcue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.jnum{position:absolute;right:var(--gutter);bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:7;display:flex;align-items:baseline;gap:8px;color:var(--navy);transition:color .4s;pointer-events:none}
.jnum b{font-weight:600;font-size:.9rem;letter-spacing:.06em}
.jnum span{opacity:.55}
.jnum em{font-style:normal;margin-left:10px;padding-left:12px;border-left:1px solid currentColor}
.jstage.on-dark .jnum{color:var(--cream)}
@media (max-width:700px){
  .jc{width:58vw}.jc.wide{width:72vw}
  .jr1 .jc:nth-child(odd){margin-top:9vh}.jr1 .jc:nth-child(even){margin-bottom:9vh}
  .jr2 .jc.wide:nth-child(odd){margin-top:12vh}.jr2 .jc.wide:nth-child(even){margin-bottom:12vh}
  .jh1 span{font-size:24vw}
  .jnum{display:none}
  .jA .js{top:calc(100% + 34px)}
}

/* ---------- HOME: FIVE DISCIPLINES (pinned; motion in js/app.js → disciplinesMotion) ---------- */
.dsc{position:relative;background:var(--cream-2);height:500svh}
.dst{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);row-gap:clamp(14px,2.4vh,30px);padding:calc(var(--navh) + 2.5vh) var(--gutter) calc(72px + env(safe-area-inset-bottom,0px))}
.dhead{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:clamp(12px,1.8vh,20px)}
.dhead .label{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.dhead .label i{display:block;width:26px;height:1px;background:currentColor}
.dhead h2{font-size:clamp(1.6rem,2.8vw,2.7rem);margin:0;line-height:1.05;font-weight:500}
.dmedia{grid-column:2;grid-row:2;position:relative;border-radius:4px;overflow:hidden;background:var(--navy);min-height:0}
.dshot{position:absolute;inset:0;display:block;color:var(--cream);text-decoration:none}
.dimg{position:absolute;inset:0;will-change:transform}
.dimg img{width:100%;height:100%;object-fit:cover;display:block}
.dshade{position:absolute;inset:0;background:#0b2a47;opacity:0;pointer-events:none}
.dcap{position:absolute;left:clamp(14px,1.8vw,26px);bottom:clamp(14px,1.8vw,26px);display:grid;gap:4px;padding:14px 18px;background:rgba(18,68,113,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:3px;max-width:min(80%,440px)}
.dcap .label{font-size:.6rem;opacity:.75}
.dcap b{font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.3}
.dcap span:last-child{font-size:.78rem;opacity:.8}
.dtext{grid-column:1;grid-row:2;position:relative;min-height:0;color:var(--navy)}
.dnum{display:flex;align-items:flex-start;font-size:clamp(3.2rem,6.4vw,6.6rem);font-weight:500;line-height:1;letter-spacing:-.03em}
.dcolw{display:inline-block;height:1em;overflow:hidden}
.dcol{display:flex;flex-direction:column;will-change:transform}
.dcol i{font-style:normal;display:block;height:1em;line-height:1}
.dnum em{font-style:normal;font-size:.8rem;font-weight:600;letter-spacing:.14em;margin:.5em 0 0 14px;color:var(--muted)}
.dti{position:absolute;left:0;right:0;top:clamp(84px,14vh,150px);bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2vh,22px)}
.dti h3{font-size:clamp(2rem,3.9vw,4.1rem);font-weight:500;line-height:1.02;text-transform:uppercase;letter-spacing:-.015em;margin:0;position:relative;z-index:1}
.dw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.dwi{display:inline-block;will-change:transform}
.dti p{max-width:44ch;color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0;position:relative;z-index:1}
.dti ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.dti li{font-size:.74rem;font-weight:500;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.dti .more{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;position:relative;z-index:1}
.dti .dbig{position:absolute;right:0;bottom:4%;width:min(20vw,250px);height:min(20vw,250px);opacity:0;pointer-events:none;z-index:0}
.drail{grid-column:1/-1;grid-row:3;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;padding-top:16px}
.drail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s;min-width:0}
.drail button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drail button .icm{flex:none;width:22px;height:22px;opacity:.55;transition:opacity .3s}
.drail button.on{color:var(--navy)}
.drail button.on .icm{opacity:1}
.drail button:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.dprog{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.dprog i{display:block;height:100%;background:var(--navy);transform-origin:left;transform:scaleX(0)}
@media (max-width:700px){
  .dst{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 38svh minmax(0,1fr) auto;padding-top:calc(var(--navh) + 8px);row-gap:12px}
  .dhead{padding-bottom:10px}.dhead .label{margin-bottom:6px}.dhead h2{font-size:1.3rem}.dhead .link{display:none}
  .dmedia{grid-column:1;grid-row:2}
  .dtext{grid-column:1;grid-row:3}
  .dnum{font-size:2.5rem}
  .dti{top:52px;gap:10px}
  .dti h3{font-size:clamp(1.55rem,7.4vw,2.2rem)}
  .dti p{font-size:.9rem;line-height:1.5}
  .dti ul{display:none}
  .dti .dbig{width:110px;height:110px;bottom:0}
  .drail{grid-row:4;gap:4px;padding-top:12px}.drail button{justify-content:center}.drail button span{display:none}
  .dcap{left:10px;bottom:10px;padding:9px 12px}.dcap b{font-size:.8rem}
}
@media (max-height:700px) and (min-width:701px){.dti ul{display:none}.dti{top:clamp(70px,12vh,110px)}}
/* without animation: a plain list */
.dsc.static{height:auto}
.dstat{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,4vw,60px);align-items:center;margin-top:clamp(36px,5vw,70px);color:var(--navy)}
.dsc.static .dshot{position:relative;display:block;aspect-ratio:16/10;border-radius:4px;overflow:hidden}
.dsc.static .dti{position:relative;top:auto}
.dsc.static .dbig{display:none}
@media (max-width:700px){.dstat{grid-template-columns:1fr}}

/* ---------- SECTIONS ---------- */
section{position:relative}
.pad{padding-block:clamp(72px,11vw,150px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .label{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sec-head .label::before{content:"";width:18px;height:1px;background:currentColor}
.navy{background:var(--navy);color:var(--on-navy)}
.navy .muted{color:var(--on-navy-muted)}
.cream2{background:var(--cream-2)}

.intro{display:grid;gap:56px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong)}
.stats div{padding:22px 20px 0 0;display:grid;gap:6px}
.stats b{font-size:clamp(2rem,4vw,3.3rem);font-weight:400;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stats b sup{font-size:.4em;vertical-align:top;margin-left:3px;letter-spacing:0}
.stats div>span{font-size:.86rem;color:var(--muted);max-width:22ch}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);row-gap:26px}}

/* disciplines accordion */
.disc{display:flex;gap:8px;height:clamp(420px,52vw,540px)}
.disc .d{flex:1 1 0;min-width:0;position:relative;border-radius:3px;background:var(--navy);color:var(--on-navy);overflow:hidden;cursor:pointer;transition:flex-grow .8s var(--ease)}
.disc .d.open{flex-grow:2.8}
.disc .d .icm{position:absolute;top:26px;left:26px;width:52px;height:52px;opacity:.9;transition:transform .8s var(--ease)}
.disc .d .big{position:absolute;right:-30px;bottom:-30px;width:260px;height:260px;opacity:0;transition:opacity .8s,transform 1s var(--ease);transform:translateY(20px)}
.disc .d.open .big{opacity:.07;transform:none}
.disc .d .vert{position:absolute;left:26px;bottom:26px;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:500;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:opacity .3s}
.disc .d .body{position:absolute;left:26px;bottom:26px;display:grid;gap:14px;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .6s var(--ease);width:min(420px,calc(100% - 52px))}
.disc .d .body p{color:var(--on-navy-muted);font-size:.98rem}
.disc .d .body h3{font-size:1.5rem}
.disc .d.open .body{opacity:1;transform:none;transition-delay:.3s}
.disc .d.open .vert{opacity:0}
.disc .d .more{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;justify-self:start}
@media (max-width:900px){
  .disc{flex-direction:column;height:auto}
  .disc .d{min-height:84px}
  .disc .d .vert{writing-mode:horizontal-tb;transform:none;left:86px;right:18px;bottom:auto;top:32px;white-space:normal;line-height:1.2}
  .disc .d .icm{top:18px;left:22px;width:44px;height:44px}
  .disc .d.open{min-height:330px}
  .disc .d .body{left:22px;bottom:22px;width:calc(100% - 44px)}
}

/* stacked featured projects */
.stack{position:relative;height:calc(var(--n) * 100svh);background:var(--navy)}
.stack .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.stack .it{position:absolute;inset:0;display:block;color:var(--on-navy);text-decoration:none;clip-path:inset(0% 0% 0% 0%)}
.stack .bg{position:absolute;inset:0;overflow:hidden;background:var(--navy)}
.stack .bgi{position:absolute;inset:-12% 0}
.stack .bgi img,.stack .bgi svg{width:100%;height:100%;object-fit:cover;display:block}
.stack .it::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,68,113,.45) 0%,rgba(18,68,113,0) 30%,rgba(18,68,113,0) 45%,rgba(18,68,113,.85) 100%)}
.stack .info{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-bottom:clamp(36px,6vh,70px);display:grid;gap:16px;justify-items:start}
.stack .info>*{opacity:0;transform:translateY(34px);transition:opacity .6s,transform .9s var(--ease)}
.stack .it.on .info>*{opacity:1;transform:none}
.stack .it.on .info>*:nth-child(2){transition-delay:.08s}.stack .it.on .info>*:nth-child(3){transition-delay:.16s}.stack .it.on .info>*:nth-child(4){transition-delay:.24s}
.stack .info h3{max-width:18ch}
.stack .info p{color:var(--on-navy-muted)}
.stack .vp{font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.stack .top{position:absolute;left:0;right:0;top:calc(var(--navh) + 22px);z-index:2;display:flex;align-items:center;gap:22px;color:var(--on-navy)}
.stack .segs{flex:1;display:flex;gap:6px}
.stack .segs i{flex:1;height:1px;background:rgba(244,243,236,.3);position:relative;overflow:hidden}
.stack .segs b{position:absolute;inset:0;background:var(--cream);transform-origin:left;transform:scaleX(0)}
.stack .cnt{font-weight:500;font-variant-numeric:tabular-nums;font-size:.9rem;letter-spacing:.06em}
.stack.static{height:auto}
.stack.static .stage{position:relative;height:auto;display:grid;gap:2px}
.stack.static .it{position:relative;height:80svh;clip-path:none}
.stack.static .info>*{opacity:1;transform:none}
.stack.static .top{position:relative;top:auto;padding-block:90px 20px}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;white-space:nowrap}
.tag.solid{background:var(--navy);color:var(--cream);box-shadow:none}
[data-dark] .tag.solid,.navy .tag.solid{background:var(--cream);color:var(--navy)}

/* sectors */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-navy)}
.sectors a{text-decoration:none;padding:34px 28px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--line-navy);transition:background .35s}
.sectors a:first-child{padding-left:0}
.sectors a:last-child{border-right:0}
.sectors a:hover{background:rgba(244,243,236,.05)}
.sectors .icm{width:40px;height:40px;opacity:.85}
.sectors b{font-size:clamp(3rem,6.4vw,5.4rem);line-height:.9;letter-spacing:-.04em;font-weight:400;font-variant-numeric:tabular-nums}
.sectors h3{font-size:1.2rem}
.sectors p{color:var(--on-navy-muted);font-size:.95rem;max-width:32ch}
.sectors .go{font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:760px){.sectors{grid-template-columns:1fr}.sectors a{border-right:0;border-bottom:1px solid var(--line-navy);padding-left:0}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:30px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .mt{display:flex;width:max-content}
.marquee .mt.css{animation:mq 48s linear infinite}
.marquee:hover .mt.css{animation-play-state:paused}
.marquee .mi{display:flex;align-items:center;gap:34px;padding-inline:17px;font-size:clamp(1.2rem,2.4vw,1.8rem);font-weight:500;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.marquee .mi .icm{width:22px;height:22px;opacity:.55}
@keyframes mq{to{transform:translateX(-50%)}}

/* CTA band */
.cta{position:relative;color:var(--on-navy);overflow:hidden;isolation:isolate;background:var(--navy)}
.cta .ci{position:absolute;inset:-12% 0;z-index:-2}
.cta .ci img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.cta::after{content:"";position:absolute;inset:0;background:rgba(18,68,113,.88);z-index:-1}
.cta .inner{padding-block:clamp(90px,13vw,180px);display:grid;gap:40px;justify-items:start}
.cta h2{max-width:20ch}
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border-radius:999px;background:var(--navy);color:var(--cream);text-decoration:none;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:#0E3659}
.cta .btn,.navy .btn{background:var(--cream);color:var(--navy)}
.cta .btn:hover,.navy .btn:hover{background:#fff}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.link{font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
img.stock{filter:grayscale(1) contrast(1.04)}

/* footer (curtain reveal on desktop) */
footer{background:var(--navy);color:var(--on-navy);padding-block:80px calc(90px + env(safe-area-inset-bottom,0px))}
@media (min-width:901px) and (min-height:720px){footer{position:sticky;bottom:0;z-index:0}}
footer .top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
footer .flogo{width:160px}
footer h4{margin:0 0 14px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-muted)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--on-navy)}
footer a:hover{opacity:.7}
footer .sm{color:var(--on-navy-muted);font-size:.92rem}
footer .icons{display:flex;gap:14px;margin-top:6px}
footer .icons .icm{width:22px;height:22px;opacity:.5}
footer .legal{margin-top:70px;padding-top:24px;border-top:1px solid var(--line-navy);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.78rem;color:var(--on-navy-muted)}
footer .legal nav{display:flex;gap:20px;flex-wrap:wrap}
.tbc{display:inline-block;font-size:.58rem;font-weight:600;letter-spacing:.12em;padding:2px 6px;border-radius:3px;box-shadow:inset 0 0 0 1px currentColor;vertical-align:middle;margin-left:8px;opacity:.8}
@media (max-width:900px){footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .top{grid-template-columns:1fr}}

/* page header with icon watermark */
.ph{position:relative;padding-block:clamp(70px,10vw,140px) clamp(40px,6vw,80px);display:grid;gap:30px}
.ph .label{display:flex;gap:10px;align-items:center}
.ph .label::before{content:"";width:18px;height:1px;background:currentColor}
.ph .sub{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.ph h1{position:relative;z-index:1;max-width:16ch}
.ph-ic{position:absolute;right:var(--gutter);bottom:10px;width:clamp(150px,22vw,300px);height:clamp(150px,22vw,300px);opacity:.1;pointer-events:none}
@media (max-width:700px){.ph-ic{width:110px;height:110px;top:40px;bottom:auto}}

/* projects timeline */
.filters{position:sticky;top:calc(var(--navh) + env(safe-area-inset-top,0px));z-index:10;background:var(--cream);border-block:1px solid var(--line);transition:top .5s var(--ease)}
body.navhidden .filters{top:env(safe-area-inset-top,0px)}
.filters .in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px;overflow-x:auto;scrollbar-width:none}
.filters .in::-webkit-scrollbar{display:none}
.tabs,.decades{display:flex;gap:6px;flex:none}
.tab{border:0;background:transparent;padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:500;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
.tab sup{font-size:.8em;margin-left:4px;opacity:.6;font-variant-numeric:tabular-nums;letter-spacing:0}
.tab:hover{background:var(--cream-2)}
.tab[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.decades button{border:0;background:none;cursor:pointer;font-weight:500;font-size:.78rem;color:var(--muted);padding:8px 8px;font-variant-numeric:tabular-nums}
.decades button:hover{color:var(--navy)}
.tl{position:relative;padding-block:40px 120px}
.tl .rail,.tl .prog{position:absolute;left:calc(var(--gutter) + 58px);top:0;bottom:0;width:1px;background:var(--line-strong)}
.tl .prog{width:2px;margin-left:-.5px;background:var(--navy);transform-origin:top;transform:scaleY(0)}
.yr{display:grid;grid-template-columns:118px 1fr;gap:0 26px;padding-top:34px}
.yr .y{align-self:start;position:sticky;top:calc(160px + env(safe-area-inset-top,0px));z-index:1}
.yr .y span{display:inline-block;background:var(--navy);color:var(--cream);font-weight:500;font-size:.85rem;letter-spacing:.06em;padding:6px 14px;border-radius:999px;font-variant-numeric:tabular-nums}
.entries{display:grid;position:relative;z-index:0}
.en{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto;gap:10px 28px;align-items:center;padding-block:20px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.en::before{content:"";position:absolute;inset:0 -14px;background:var(--cream-2);border-radius:4px;opacity:0;transform:scaleY(.6);transition:opacity .35s,transform .45s var(--ease);z-index:-1}
.en:hover::before{opacity:1;transform:none}
.en:first-child{padding-top:14px}
.en h3{font-size:clamp(.98rem,1.4vw,1.15rem);letter-spacing:.02em;line-height:1.3;font-weight:500;transition:transform .5s var(--ease)}
.en:hover h3{transform:translateX(8px)}
.en .cat{margin-bottom:10px;display:flex;gap:8px;flex-wrap:wrap}
.en .sc{font-size:.92rem}
.en .eloc{font-size:.85rem;color:var(--muted);margin-top:4px;display:flex;gap:6px;align-items:center}
.en .see{white-space:nowrap;text-decoration:none;font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .25s,color .25s,box-shadow .25s}
.en:hover .see{background:var(--navy);color:var(--cream);box-shadow:none}
@media (max-width:820px){
  .tl .rail,.tl .prog{left:var(--gutter)}
  .yr{grid-template-columns:1fr;padding-top:26px}
  .yr .y{position:relative;top:auto;margin-left:-8px;margin-bottom:8px}
  .en{grid-template-columns:1fr;padding-left:22px}
  .en::before{inset:0 -8px 0 8px}
  .en .see{justify-self:start}
}
.empty{padding:60px 0;color:var(--muted)}

/* project detail */
.pd-head{text-align:center;display:grid;gap:22px;justify-items:center;padding-block:clamp(56px,8vw,110px) clamp(34px,4vw,60px)}
.pd-head h1{max-width:18ch}
.pd-frame{margin-inline:clamp(8px,1.2vw,16px);border-radius:4px;overflow:hidden;position:relative;aspect-ratio:1408/792;max-height:88svh;background:var(--navy);max-width:100%}
.pd-frame .pz{position:absolute;inset:-10% 0}
.pd-frame svg,.pd-frame img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:700px){.pd-frame{aspect-ratio:377/361}}
.pd-info{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);padding-block:clamp(50px,7vw,100px)}
.facts{display:grid;border-top:1px solid var(--line-strong);align-self:start;margin:0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-block:14px;border-bottom:1px solid var(--line);font-size:.95rem}
.facts dt{color:var(--muted);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.facts dd{margin:0}
.land{margin:0 clamp(8px,1.2vw,16px);border-radius:4px;overflow:hidden;position:relative;aspect-ratio:1408/792;background:var(--navy);max-width:100%}
.land .pz{position:absolute;inset:-10% 0}
.land img,.land svg{width:100%;height:100%;object-fit:cover;display:block}
.cap{position:absolute;left:14px;bottom:14px;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--cream);color:var(--navy);padding:4px 8px;border-radius:2px;z-index:1}
.ptext{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);padding-block:clamp(50px,7vw,110px)}
.ptext h2{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.side{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);margin:clamp(8px,1.2vw,16px)}
.side .land{margin:0;aspect-ratio:696/936}
@media (max-width:820px){.pd-info,.ptext{grid-template-columns:1fr}.side{grid-template-columns:1fr}.side .land{aspect-ratio:4/5}}
.note{padding:18px 20px;border-radius:3px;background:var(--cream-2);font-size:.9rem;color:var(--muted);max-width:62ch}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-strong)}
.pn a{text-decoration:none;padding:28px 0;display:grid;gap:6px}
.pn a:last-child{text-align:right;border-left:1px solid var(--line);padding-left:20px}
.pn a:first-child{padding-right:20px}
.pn b{font-size:clamp(1rem,1.8vw,1.35rem);font-weight:500;text-transform:uppercase;line-height:1.25}
.back{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.strip{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;padding-inline:var(--gutter);padding-bottom:20px;scrollbar-width:none;align-items:flex-start;user-select:none;-webkit-user-select:none}
.strip::-webkit-scrollbar{display:none}
.strip .card{flex:none;width:clamp(240px,26vw,380px);text-decoration:none;display:grid;gap:14px}
.strip .card .im{border-radius:3px;overflow:hidden;background:var(--navy);max-width:100%}
.strip .card:nth-child(3n+1) .im{aspect-ratio:1/1}
.strip .card:nth-child(3n+2) .im{aspect-ratio:4/5.6}
.strip .card:nth-child(3n) .im{aspect-ratio:4/4.8}
.strip .card .im svg{width:100%;height:100%;display:block;transition:transform 1.2s var(--ease)}
.strip .card:hover .im svg{transform:scale(1.05)}
.strip .card h3{font-size:1rem;letter-spacing:.02em;line-height:1.3}
.strip .card span{font-size:.85rem;color:var(--muted)}
.strip img,.strip svg{pointer-events:none}

/* services */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);padding-block:clamp(60px,9vw,120px);border-top:1px solid var(--line-strong);align-items:start}
.svc .media{aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--navy);position:sticky;top:110px;max-width:100%}
.svc .media .pz{position:absolute;inset:-10% 0}
.svc .media img,.svc .media svg{width:100%;height:100%;object-fit:cover;display:block}
.svc .txt{display:grid;gap:26px}
.svc .txt>.icm{width:56px;height:56px}
.svc ul{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--line)}
.svc li{padding-block:12px;border-bottom:1px solid var(--line);display:flex;gap:12px;font-size:.98rem}
.svc li::before{content:"";width:10px;height:1px;background:currentColor;margin-top:.8em;flex:none}
.rel{display:grid;gap:10px}
.rel .chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.8rem;font-weight:500;text-decoration:none;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .25s,color .25s,box-shadow .25s}
.chip:hover{background:var(--navy);color:var(--cream);box-shadow:none}
.chip i{font-style:normal;opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums}
.svc-index{display:flex;flex-wrap:wrap;gap:8px}
.svc-index .chip{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:600}
.svc-index .chip .icm{width:16px;height:16px}
@media (max-width:860px){.svc{grid-template-columns:1fr}.svc .media{position:relative;top:0}}

/* values */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px)}
.vm > div{display:grid;gap:18px;align-content:start}
.vm .d3{text-transform:none;font-weight:400;letter-spacing:-.015em}
@media (max-width:820px){.vm{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-navy)}
.pillars div{padding:34px 26px 10px;display:grid;gap:14px;align-content:start;border-right:1px solid var(--line-navy)}
.pillars div:first-child{padding-left:0}
.pillars div:last-child{border-right:0}
.pillars .icm{width:44px;height:44px}
.pillars h3{font-size:1.2rem;letter-spacing:.04em}
.pillars p{color:var(--on-navy-muted);font-size:.96rem}
@media (max-width:900px){.pillars{grid-template-columns:1fr 1fr}.pillars div{border-right:0;padding-left:0;border-bottom:1px solid var(--line-navy);padding-bottom:30px}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}
.decs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.decs article{display:grid;gap:14px;align-content:start;padding-top:22px;position:relative}
.decs article>i{position:absolute;left:0;right:0;top:0;height:1px;background:var(--navy);transform-origin:left}
.decs b{font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1;font-weight:400;font-variant-numeric:tabular-nums}
.decs .cnt{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.decs p{font-size:.97rem}
@media (max-width:900px){.decs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.decs{grid-template-columns:1fr}}

/* company */
.quote em{font-style:normal;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,40px) clamp(12px,1.6vw,22px);align-items:start}
.tm{margin:0;display:grid;gap:16px}
.tm .tmph{position:relative;overflow:hidden;border-radius:3px;background:#fff}
.tm .tmph img{display:block;width:100%;height:auto}
.tm .tmph-ph{display:grid;place-items:center;aspect-ratio:4/5;background:var(--navy);color:var(--on-navy)}
.tm .tmph-ph .icm{width:48px;height:48px}
.tm figcaption{display:grid;gap:5px}
.tm h3{font-size:.95rem;letter-spacing:.06em}
.tm .role{font-size:.85rem;color:var(--muted)}
.tm .bio{margin:6px 0 0;font-size:.88rem;color:var(--muted)}
@media (max-width:820px){.team{grid-template-columns:1fr 1fr}.tm{gap:12px}.tm h3{font-size:.85rem}.tm .role{font-size:.78rem}}
.returns{display:grid;border-top:1px solid var(--line-strong)}
.ret{display:grid;grid-template-columns:1fr minmax(120px,1.1fr) 1fr;gap:20px;align-items:center;padding-block:20px;border-bottom:1px solid var(--line)}
.ret .a,.ret .b{display:grid;gap:2px;text-decoration:none}
.ret .b{text-align:right}
.ret small{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;font-size:.78rem;letter-spacing:.08em}
.ret strong{font-size:.98rem;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.ret .gapline{position:relative;height:30px;display:grid;place-items:center}
.ret .gapline i{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--navy);transform-origin:left}
.ret .gapline i::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--navy)}
.ret .gap{position:relative;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--cream);box-shadow:inset 0 0 0 1px var(--navy);padding:6px 12px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:600px){.ret{grid-template-columns:1fr;gap:8px}.ret .b{text-align:left}.ret .gapline{justify-items:start}}
.places{display:flex;flex-wrap:wrap;gap:10px}
.place{display:inline-flex;gap:10px;align-items:baseline;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);font-weight:500;font-size:.9rem}
.place i{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.82rem}

/* talk */
.talkgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,6vw,100px);padding-block:20px 120px}
@media (max-width:900px){.talkgrid{grid-template-columns:1fr}}
form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.f{display:grid;gap:8px;position:relative}
.f.full{grid-column:1/-1}
@media (max-width:620px){form{grid-template-columns:1fr}}
.f label,.f .flabel{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.f em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.f input,.f select,.f textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-strong);padding:10px 0;border-radius:0;width:100%}
.f textarea{min-height:130px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none}
.f .uline{position:relative;height:0}
.f .uline::after{content:"";position:absolute;left:0;right:0;top:-9px;height:1.5px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.f:focus-within .uline::after{transform:scaleX(1)}
.f .err{font-size:.82rem;color:#A2361F}
.f.bad input,.f.bad select,.f.bad textarea{border-bottom-color:#A2361F}
.drop{display:flex;align-items:center;gap:14px;padding:18px;border:1px dashed var(--line-strong);border-radius:3px;cursor:pointer;font-size:.95rem;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;transition:border-color .25s,background .25s}
.drop:hover{border-color:var(--navy);background:var(--cream-2)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.ok{display:grid;gap:22px;justify-items:start;padding:30px 0}
.ok svg circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw .8s var(--ease) forwards}
.ok svg path{stroke-dasharray:50;stroke-dashoffset:50;animation:draw .5s .6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.contact{display:grid;gap:30px;align-content:start}
.contact .row{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--line-strong)}
.contact .row b{font-size:1.05rem;font-weight:500}
.copy{border:0;background:none;padding:0;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:start}

/* cookie */
#cookie{position:fixed;right:var(--gutter);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;max-width:400px;background:var(--cream);color:var(--navy);padding:18px 20px;border-radius:3px;display:grid;gap:14px;font-size:.88rem;box-shadow:0 0 0 1px var(--line-strong),0 18px 40px rgba(18,68,113,.12);transform:translateY(160%);transition:transform .6s var(--ease)}
#cookie.show{transform:none}
#cookie .b{display:flex;gap:8px}
#cookie button{border:0;border-radius:999px;padding:9px 16px;font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#cookie .y{background:var(--navy);color:var(--cream)}
#cookie .n{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-strong)}
@media (max-width:620px){#cookie{left:var(--gutter);right:var(--gutter);max-width:none;bottom:calc(66px + env(safe-area-inset-bottom,0px))}}

/* ---------- LOCATIONS (3D map) ---------- */
.loc{position:relative;height:260svh}
.loc.still{height:100svh}
.loc .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--cream)}
.loc canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.loc .stage.dragging canvas{cursor:grabbing}
.loc .veil{position:absolute;inset:0;background:var(--cream);opacity:.92;pointer-events:none}
.loc .title{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:22px;padding-inline:var(--gutter);pointer-events:none;will-change:transform,opacity}
.loc .title h1{font-size:clamp(3.2rem,12vw,10.5rem);line-height:.92;letter-spacing:.04em}
.loc .title p{max-width:40ch;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted)}
.loc .scrollcue{margin-top:14px}
.maplabels,.pins{position:absolute;inset:0;pointer-events:none}
.pins{z-index:2}
.ml{position:absolute;left:0;top:0;font-size:.6rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:rgba(18,68,113,.5);white-space:nowrap;opacity:0}
.ml.inv{color:rgba(244,243,236,.55)}
.pin{position:absolute;left:0;top:0;width:0;height:0;border:0;padding:0;background:none;pointer-events:auto;cursor:pointer;visibility:hidden}
.pin .pd{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--navy);box-shadow:0 0 0 1px var(--navy),0 6px 16px rgba(18,68,113,.22);display:grid;place-items:center;font-size:.68rem;font-weight:600;font-variant-numeric:tabular-nums;transition:transform .35s var(--ease),background .25s,color .25s}
.pin .pl{position:absolute;left:20px;top:-11px;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;background:var(--cream);color:var(--navy);padding:4px 8px;border-radius:2px;box-shadow:0 0 0 1px var(--line-strong);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .45s var(--ease);pointer-events:none}
.loc.labels .pin .pl,.pin:hover .pl,.pin:focus-visible .pl,.pin.sel .pl{opacity:1;transform:none}
.pin:hover .pd,.pin.sel .pd{background:var(--navy);color:var(--cream);transform:scale(1.18)}
.mapui{position:absolute;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;opacity:0;z-index:3}
.regions{display:flex;gap:6px;flex-wrap:wrap}
.regions button{border:0;border-radius:999px;padding:9px 15px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line-strong);font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.regions button:hover{background:var(--cream-2)}
.regions button[aria-pressed="true"]{background:var(--navy);color:var(--cream);box-shadow:none}
.hint{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(244,243,236,.85);padding:6px 10px;border-radius:2px}
.panel{position:absolute;right:var(--gutter);top:calc(var(--navh) + 24px);z-index:4;width:min(370px,calc(100% - 2 * var(--gutter)));max-height:calc(100svh - var(--navh) - 170px);overflow:auto;background:var(--cream);box-shadow:0 0 0 1px var(--line-strong),0 24px 60px rgba(18,68,113,.16);border-radius:3px;padding:22px 22px 10px;display:grid;gap:8px;align-content:start;overscroll-behavior:contain}
.panel[hidden]{display:none}
.panel h3{font-size:1.25rem;letter-spacing:.02em}
.panel .pclose{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:none;box-shadow:inset 0 0 0 1px var(--line-strong);display:grid;place-items:center;cursor:pointer}
.panel .plist{margin-top:10px;display:grid}
.panel .plist a{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;font-size:.9rem;line-height:1.35;transition:padding .3s var(--ease)}
.panel .plist a:hover{padding-left:6px}
.panel .py{color:var(--muted);font-size:.8rem;padding-top:1px}
.maploading{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);z-index:1}
@media (max-width:700px){
  .panel{top:auto;bottom:calc(128px + env(safe-area-inset-bottom,0px));max-height:44svh}
  .mapui{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .regions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .regions::-webkit-scrollbar{display:none}
  .hint{display:none}
}
.lgroup{display:grid;grid-template-columns:220px 1fr;gap:10px 24px;padding-top:26px;border-top:1px solid var(--line-strong);margin-bottom:34px}
.lrows{display:grid}
.lrow{display:grid;grid-template-columns:minmax(0,1.3fr) 110px minmax(0,1.3fr) 100px auto;gap:16px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 0;cursor:pointer;font:inherit;color:inherit;position:relative}
.lrow:first-child{padding-top:0}
.lrow .ln{font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:.98rem;transition:transform .45s var(--ease)}
.lrow:hover .ln{transform:translateX(8px)}
.lrow .lc{font-size:.9rem}.lrow .lc b{font-weight:500}
.lrow .ls,.lrow .ly{font-size:.85rem}
.lrow .lgo{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;opacity:.5;transition:opacity .3s}
.lrow:hover .lgo{opacity:1}
@media (max-width:860px){.lgroup{grid-template-columns:1fr}.lrow{grid-template-columns:1fr auto;gap:4px 16px}.lrow .ls,.lrow .ly{grid-column:1/-1}.lrow .lgo{display:none}}
/* locations v2: clouds, tour card, index */
.clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden;animation:cin 2.4s var(--ease) backwards}
.clouds.front{z-index:3}
.cl{position:absolute;left:var(--x);top:var(--y);width:var(--w);max-width:none;filter:blur(var(--b));opacity:var(--o);animation:drift var(--t) ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{translate:calc(var(--dx) * -1) 0}to{translate:var(--dx) calc(var(--dx) * -.3)}}
@keyframes cin{from{opacity:0}}
.loc .title{z-index:2}
.tour{position:absolute;left:var(--gutter);bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:4;width:min(400px,calc(100% - 2 * var(--gutter)));opacity:0}
.tcount{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;color:var(--navy)}
.tcount b{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:400;letter-spacing:-.03em;line-height:1;background:var(--cream);padding:4px 10px 2px;border-radius:2px}
.tcount span{font-size:.8rem;font-weight:600;letter-spacing:.1em;background:var(--cream);padding:3px 8px;border-radius:2px}
.tcard{background:var(--cream);box-shadow:0 0 0 1px var(--line-strong),0 24px 60px rgba(18,68,113,.16);border-radius:3px;padding:20px 22px;display:grid;gap:10px;justify-items:start}
.tcard.swap>*:not(.tph){animation:tswap .6s var(--ease) both}
.tph{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 6px;overflow:hidden;border-radius:2px;background:var(--cream-2);clip-path:inset(100% 0 0 0);max-width:100%}
.tph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center bottom;will-change:transform}
.tph figcaption{position:absolute;left:8px;bottom:8px;font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--cream);color:var(--navy);padding:3px 6px;border-radius:2px}
.tcard.swap>*:nth-child(2){animation-delay:.04s}.tcard.swap>*:nth-child(3){animation-delay:.08s}.tcard.swap>*:nth-child(4){animation-delay:.12s}.tcard.swap>*:nth-child(5){animation-delay:.16s}.tcard.swap>*:nth-child(6){animation-delay:.2s}
@keyframes tswap{from{opacity:0;transform:translateY(10px)}}
.tcard .tloc{color:var(--muted)}
.tcard .tmeta{display:flex;gap:10px;align-items:center;font-size:.8rem;font-weight:600;letter-spacing:.08em}
.tcard .tt{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2}
.tcard .ts{font-size:.92rem;line-height:1.5}
.tcard .tplace{font-size:.82rem}
.tindex{position:absolute;right:var(--gutter);top:calc(var(--navh) + 28px);z-index:4;display:grid;gap:1px;width:230px;max-height:calc(100svh - var(--navh) - 120px);overflow:auto;background:rgba(244,243,236,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px var(--line);border-radius:3px;padding:8px;opacity:0;scrollbar-width:none}
.tindex::-webkit-scrollbar{display:none}
.tindex button{display:flex;justify-content:space-between;gap:10px;align-items:center;border:0;background:none;text-align:left;padding:6px 10px;border-radius:2px;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--navy);transition:background .25s,color .25s}
.tindex button i{font-style:normal;opacity:.55;font-variant-numeric:tabular-nums}
.tindex button:hover{background:var(--cream-2)}
.tindex button.on{background:var(--navy);color:var(--cream)}
.tindex button.skip{margin-top:6px;box-shadow:inset 0 1px 0 var(--line);border-radius:0}
.tbar{position:absolute;left:0;right:0;top:var(--navh);height:2px;z-index:4;background:rgba(18,68,113,.12)}
.tbar i{display:block;height:100%;background:var(--navy);transform-origin:left;transform:scaleX(0)}
.ml.city{color:rgba(244,243,236,.78);letter-spacing:.2em}
.ml.lm{color:var(--cream);font-size:.56rem;letter-spacing:.16em;padding-bottom:6px;text-shadow:0 1px 3px rgba(18,68,113,.9)}
.ml.lm::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:5px;background:currentColor;opacity:.7}
@media (max-width:900px){.tindex{display:none}}
@media (max-width:700px){.tour{bottom:calc(66px + env(safe-area-inset-bottom,0px))}.tcard{padding:12px 14px;gap:6px}.tcard .ts,.tcard .tplace{display:none}.tcount b{font-size:1.8rem}.tph{aspect-ratio:2/1}}
@media (max-height:760px) and (min-width:701px){.tph{aspect-ratio:2.2/1}.tcard .tplace{display:none}}

#cursor.halo .c-label{text-shadow:0 0 3px var(--cream),0 0 8px var(--cream),0 0 14px var(--cream)}
#cursor.halo .c-dot{box-shadow:0 0 0 1.5px var(--cream)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- PROJECTS: photo grid + text archive (v14) ---------- */
.tag.ghost{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted)}
[data-dark] .tag.ghost{box-shadow:inset 0 0 0 1px var(--line-navy);color:var(--on-navy-muted)}
.pgwrap{padding-block:clamp(50px,7vw,100px) 0}
.pgcount{font-size:.85rem}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,4vw,60px) clamp(14px,2vw,28px)}
.pc{display:grid;gap:12px;align-content:start;text-decoration:none;min-width:0}
.pc.wide{grid-column:1/-1}
.pc .im{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--navy)}
.pc.wide .im{aspect-ratio:21/9}
.pc .im img,.pc .im svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.pc:hover .im img{transform:scale(1.045)}
.pc .pmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pc h3{font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.2;letter-spacing:.01em;max-width:30ch}
.pc.wide h3{font-size:clamp(1.3rem,2.6vw,2.2rem)}
.pc .muted{font-size:.88rem}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}.pc.wide .im{aspect-ratio:4/3}}
.archhead{padding-top:clamp(90px,12vw,170px)}
.archhead .sec-head{margin-bottom:0;padding-bottom:10px;border-bottom:1px solid var(--line-strong)}
.en.txt{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);cursor:default}
.en.txt::before{display:none}
.en.txt:hover h3{transform:none}
.nolink{text-decoration:none;cursor:default}
.chip.nolink:hover{background:none;color:inherit;box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ---------- PROJECT PAGE ---------- */
.collab{display:grid;justify-items:center;gap:12px;margin-top:6px}
.collab img{height:clamp(30px,4vw,46px);width:auto;max-width:220px;object-fit:contain}
.collab b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem}
button.gz{all:unset;display:block;cursor:pointer;width:100%}
button.gz:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pd-frame button.gz.pz{position:absolute;inset:-10% 0;width:auto}
.pd-text{display:grid;align-content:start}
.dtext{max-width:62ch}
.dtext .lead{max-width:none;font-size:clamp(1.15rem,1.7vw,1.45rem);margin-bottom:1em}
.dtext p{color:var(--ink)}
.dtext .mh{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:2.2em 0 .8em;display:flex;align-items:center;gap:10px}
.dtext .mh::before{content:"";width:18px;height:1px;background:currentColor}
.dtext .mh:first-child{margin-top:0}
.pvid{margin:0 clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px)}
.pvid .vf{position:relative;border-radius:4px;overflow:hidden;background:var(--navy);aspect-ratio:16/9;max-height:88svh;margin-inline:auto}
.pvid video{width:100%;height:100%;object-fit:cover;display:block}
.pvid.tall .vf{aspect-ratio:9/16;width:min(100%,calc(88svh * 9 / 16))}
.vbtn{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(244,243,236,.92);color:var(--navy);box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .3s var(--ease)}
.vbtn:hover{transform:scale(1.07)}
.vbtn .i-pause{display:none}.pvid.playing .i-pause{display:block}.pvid.playing .i-play{display:none}
/* gallery split into sections (e.g. one per unit type) */
.units{position:relative}
.gnav{position:sticky;top:calc(var(--navh) + env(safe-area-inset-top,0px));z-index:10;background:var(--cream);border-block:1px solid var(--line);transition:top .5s var(--ease);margin-bottom:clamp(6px,1vw,12px)}
body.navhidden .gnav{top:env(safe-area-inset-top,0px)}
.gnav .in{display:flex;align-items:center;gap:18px;padding:10px var(--gutter)}
.gnav .label{flex:none}
.gchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px}
.gchips::-webkit-scrollbar{display:none}
button.chip{font:inherit;font-size:.78rem;font-weight:500;color:inherit;background:none;border:0;cursor:pointer;white-space:nowrap;flex:none}
.chip.on{background:var(--navy);color:var(--cream);box-shadow:none}
.unit{padding-top:clamp(44px,6.5vw,92px);scroll-margin-top:120px}
.uhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 22px;margin:0 var(--gutter) clamp(18px,2.4vw,30px);padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--line-strong)}
.uhead h2{margin:0;font-size:clamp(1.7rem,4vw,3.4rem);font-weight:500;line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.uhead .unum{font-size:.78rem;font-weight:600;letter-spacing:.14em;color:var(--muted);align-self:flex-start;padding-top:.3em}
.uhead .link{margin-left:auto}
.gal.one{columns:1}
.unit:first-of-type{padding-top:clamp(26px,3.5vw,48px)}
@media (max-width:700px){.gnav .label{display:none}.gnav .in{padding-inline:12px}.uhead .link{margin-left:0;flex-basis:100%}}
.gal{columns:2;column-gap:clamp(8px,1.2vw,16px);padding:0 clamp(8px,1.2vw,16px)}
.gi{break-inside:avoid;margin:0 0 clamp(8px,1.2vw,16px);border-radius:4px;overflow:hidden;background:var(--cream-2)}
.gi img{width:100%;height:auto;display:block;min-height:120px;transition:transform 1.2s var(--ease)}
.gi:hover img{transform:scale(1.025)}
@media (max-width:700px){.gal{columns:1}}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;z-index:9500;background:rgba(10,30,52,.96);color:var(--cream);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;align-items:center;opacity:0;transition:opacity .3s}
.lightbox.on{opacity:1}
.lightbox[hidden]{display:none}
.lbbar{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top,0px))}
.lbt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8}
.lbc{opacity:.8}
.lbx,.lbp,.lbn{border:0;background:none;color:inherit;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;transition:background .25s}
.lbx:hover,.lbp:hover,.lbn:hover{background:rgba(244,243,236,.12)}
.lbp,.lbn{margin:0 clamp(4px,1.5vw,20px)}
.lbf{margin:0;height:100%;max-height:calc(100svh - 80px);display:grid;place-items:center;padding-bottom:clamp(10px,3vh,30px);min-width:0}
.lbf img{max-width:100%;max-height:calc(100svh - 110px);object-fit:contain;border-radius:2px;transition:opacity .25s;user-select:none;-webkit-user-drag:none}
.lbf img.ld{opacity:.35}
body.lbopen{overflow:hidden}
@media (max-width:700px){.lightbox{grid-template-columns:1fr}.lbp,.lbn{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom,0px));background:rgba(244,243,236,.1)}.lbp{left:var(--gutter)}.lbn{right:var(--gutter)}.lbf img{max-height:calc(100svh - 170px)}}
.tph[hidden]{display:none}
.strip .card .im{position:relative}
.strip .card .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.strip .card:hover .im img{transform:scale(1.05)}
.collab a{display:inline-flex;line-height:0}
/* v15: progress line on the page wipe, shown only when a page takes a moment to load */
#wipe .wbar{position:absolute;left:50%;top:calc(50% + 64px);width:120px;margin-left:-60px;height:2px;background:var(--line);overflow:hidden;opacity:0;transition:opacity .3s}
#wipe.slow .wbar{opacity:1}
#wipe .wbar b{display:block;height:100%;background:var(--navy);transform-origin:left;transform:scaleX(0);transition:transform .3s var(--ease)}
/* v16: projects with photos are links in the timeline too */
a.en{text-decoration:none;color:inherit}
a.en:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
/* keep the scope column lined up between linked and text-only rows */
@media (min-width:821px){
  .tl .en,.tl .en.txt{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) 170px}
  .tl .en .see{justify-self:end}
}
/* v18: on phones the disciplines open one by one while scrolling, so keep the block compact enough to stay on screen */
@media (max-width:900px){
  .disc{gap:6px}
  .disc .d{min-height:62px;transition:min-height .7s var(--ease)}
  .disc .d .icm{top:14px;left:18px;width:34px;height:34px}
  .disc .d .vert{left:66px;top:22px;font-size:.85rem}
  .disc .d.open{min-height:min(330px,52svh)}
  .disc .d .body{left:18px;bottom:18px;width:calc(100% - 36px);gap:10px}
  .disc .d .body h3{font-size:1.25rem}
  .disc .d .body p{font-size:.9rem;line-height:1.5}
}
@media (max-width:900px) and (max-height:720px){
  .disc .d{min-height:54px}
  .disc .d .vert{top:18px}
  .disc .d .icm{top:11px;width:32px;height:32px}
  .disc .d.open{min-height:min(320px,46svh)}
}
/* v19: each discipline is a link to Services; they switch only with scroll */
a.d{text-decoration:none}
.disc .d .more{display:inline-block}
.disc .d:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* v20: discipline descriptions are typed letter by letter with the scroll (only once JS has split them) */
.disc.typing .d .body p .ch{opacity:0;transition:opacity .16s linear}
.disc.typing .d .body p .ch.on{opacity:1}
.disc.typing .d .body p .ch.cur{position:relative}
.disc.typing .d .body p .ch.cur::after{content:"";position:absolute;left:100%;top:.14em;bottom:.06em;width:2px;margin-left:2px;background:var(--on-navy);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.disc.typing .d .more{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s var(--ease)}
.disc.typing .d.typed .more{opacity:1;transform:none}

/* ================= v28 · languages, right-to-left Arabic, facts + FAQ, pages without JavaScript ================= */

/* ---------- language switch (EN · DE · AR) in the menu bar and the footer ---------- */
.langs{display:flex;align-items:center;gap:12px}
.langs a{text-decoration:none;color:inherit;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.55;transition:opacity .25s;padding-block:6px}
.langs a:hover,.langs a.on{opacity:1}
.langs a.on{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
#nav nav .langs a{font-size:.7rem;letter-spacing:.12em;padding-block:6px}
#nav nav .langs a::after{display:none}
#nav nav .nlang{padding-inline-start:clamp(4px,1vw,14px);border-inline-start:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent)}
@media (max-width:900px){
  #nav nav .nlang{margin-top:26px;gap:24px;border:0;padding:0}
  #nav nav .langs a{font-size:1rem}
}
footer .legal .flang{gap:16px}
footer .legal .flang a{padding-block:0}

/* ---------- Company page: facts block and questions ---------- */
.facts.glance{max-width:1100px}
.facts.glance div{grid-template-columns:minmax(150px,250px) 1fr;padding-block:18px;font-size:1rem}
.facts.glance dd{max-width:70ch;line-height:1.6}
.faq{border-top:1px solid var(--line-strong);max-width:1100px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-weight:500;font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:14px;height:14px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding:0 0 26px;max-width:74ch}
.faq .a p{margin:0;color:var(--muted);line-height:1.7}
@media (max-width:700px){.facts.glance div{grid-template-columns:1fr;gap:6px}}

/* ---------- Arabic: Almarai, right to left ---------- */
html[lang="ar"]{--font:"Almarai","Montserrat","Segoe UI",Tahoma,system-ui,sans-serif}
html[lang="ar"] body *{letter-spacing:0!important}          /* spacing out letters breaks Arabic joins */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .d1,html[lang="ar"] .d2{line-height:1.22;font-weight:700}
html[lang="ar"] .d3,html[lang="ar"] .statement,html[lang="ar"] .lead{line-height:1.5}
html[lang="ar"] .label,html[lang="ar"] .tag,html[lang="ar"] .link,html[lang="ar"] .btn,html[lang="ar"] .vp,html[lang="ar"] .go,html[lang="ar"] .more{font-size:.86rem;font-weight:700}
html[lang="ar"] #nav nav a:not(.talk):not([lang]){font-size:.9rem;font-weight:700}
html[lang="ar"] .langs a{font-family:"Montserrat",sans-serif;letter-spacing:.12em!important}
html[lang="ar"] .facts dt{font-size:.82rem}
html[lang="ar"] .jt{font-size:.82rem}
html[lang="ar"] bdi,html[lang="ar"] [dir="ltr"]{font-family:"Montserrat","Almarai",sans-serif}
html[lang="ar"] .jend{font-weight:800}
/* moving scenes keep their left-to-right mechanics; their words still read right to left */
[dir="rtl"] .marquee,[dir="rtl"] .jstage,[dir="rtl"] .lightbox,[dir="rtl"] #cursor,[dir="rtl"] #ruler,[dir="rtl"] .strip{direction:ltr}
[dir="rtl"] .jstage .jt,[dir="rtl"] .jstage .js,[dir="rtl"] .jstage .jh1,[dir="rtl"] .jstage .jk,[dir="rtl"] .jstage .jcue,[dir="rtl"] .jstage .jnum,[dir="rtl"] .jstage .jend,[dir="rtl"] .strip .card,[dir="rtl"] .lightbox .lbt{direction:rtl}
[dir="rtl"] #nav .logo img{object-position:right center}
[dir="rtl"] .btn svg,[dir="rtl"] .see svg,[dir="rtl"] .back svg,[dir="rtl"] .link svg{transform:scaleX(-1)}
[dir="rtl"] .lrow{text-align:right}
[dir="rtl"] .lrow:hover .ln{transform:translateX(-8px)}
[dir="rtl"] .facts dd.num,[dir="rtl"] .num{unicode-bidi:plaintext}
[dir="rtl"] .dnum{direction:ltr;justify-content:flex-end}   /* the rolling counter keeps its digits in order: 02 / 05 */
[dir="rtl"] #loader .ld-icons,[dir="rtl"] footer .icons{direction:ltr}   /* the brand icons keep their E · U · D order */

/* ---------- the pre-written page (what search engines and AI crawlers read; replaced by the animated page when JavaScript runs) ---------- */
.ssr{padding:calc(var(--navh) + 56px) var(--gutter) 90px;max-width:1240px;margin:0 auto}
.ssr h1{font-size:clamp(2rem,5vw,3.8rem);line-height:1.05;margin:.35em 0 .45em}
.ssr h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:2.2em 0 .8em}
.ssr h3{font-size:1.02rem;margin:1.2em 0 .35em}
.ssr p,.ssr li,.ssr dd{max-width:74ch}
.ssr a{color:inherit;text-underline-offset:3px}
.ssr img{max-width:100%;height:auto;display:block;border-radius:4px;background:var(--cream-2)}
.ssr ul.ssr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;padding:0;margin:0;list-style:none}
.ssr ul.ssr-grid li{max-width:none}
.ssr figure{margin:0}
.ssr figcaption{font-size:.85rem;color:var(--muted);margin-top:8px;line-height:1.45}
.ssr .ssr-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.ssr table{border-collapse:collapse;width:100%;font-size:.9rem}
.ssr th,.ssr td{text-align:start;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.ssr th{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ssr .crumbs{font-size:.78rem;color:var(--muted)}
.ssr .crumbs ol{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.ssr .crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.6}
.ssr .ssr-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.ssr .faq summary{cursor:default}
.ssr video{max-width:100%;border-radius:4px}
footer .ssr-foot{display:grid;gap:10px;font-size:.85rem}

/* Accessible form trap: outside the visual layout and keyboard order. */
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#brief-status{color:var(--navy);line-height:1.6}