:root{
  --shadow:#17181B;--ivory:#F2EBE1;--amber:#C98A3B;--rose:#8A5A6B;--orange:#EE8020;
  --ink:rgba(242,235,225,.92);--dim:rgba(242,235,225,.72);--hair:rgba(201,138,59,.45);--lift:rgba(242,235,225,.045);
  --head:56px;--ease:cubic-bezier(.2,.6,.2,1);
}
@media (min-width:960px){:root{--head:64px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--shadow)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--shadow);color:var(--ink);font:400 18px/1.6 'Source Serif 4',Georgia,serif;text-rendering:optimizeLegibility}
a{color:var(--ivory);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--head) + 16px)}
p{margin:0 0 1em;max-width:64ch}
h1,h2,h3,h4{font-family:Archivo,'Arial Narrow',Arial,sans-serif;font-weight:700;font-stretch:82%;font-variation-settings:'wdth' 82;letter-spacing:-.02em;line-height:1;margin:0;color:var(--ivory);text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,76px);letter-spacing:-.03em;line-height:.94}
h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.025em;margin-bottom:.45em}
h3{font-size:clamp(26px,3.2vw,40px);margin-bottom:.4em}
h4{font-size:21px;letter-spacing:-.01em;line-height:1.15;font-stretch:90%;font-variation-settings:'wdth' 90;margin-bottom:.3em}
.ui{font-family:Archivo,Arial,sans-serif;font-stretch:100%;font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums}
.small{font-size:15px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width:600px){.wrap{padding:0 24px}}
@media (min-width:960px){.wrap{padding:0 48px}}
.skip{position:absolute;left:-9999px;top:8px;z-index:70;background:var(--shadow);color:var(--ivory);padding:10px 14px;font:600 16px Archivo,sans-serif;border:2px solid var(--ivory)}
.skip:focus{left:16px}
.section{padding:88px 0}
@media (min-width:960px){.section{padding:128px 0}}
.lede{font-size:20px;color:var(--ivory)}
.ph{overflow-wrap:anywhere}
.note{border-left:2px solid var(--amber);padding:6px 0 6px 16px;font-size:15px;color:var(--dim);max-width:64ch}
.chapter{display:flex;align-items:baseline;gap:16px;margin-bottom:28px;font:600 14px/1 Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--amber);letter-spacing:.02em}
.chapter::after{content:"";flex:1;height:1px;background:var(--hair)}
[hidden]{display:none !important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:2px solid var(--orange);border-radius:2px;background:var(--orange);color:var(--shadow);font:600 17px/1.1 Archivo,Arial,sans-serif;font-stretch:100%;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--ivory)}
.btn.sm{min-height:44px;padding:0 16px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* header */
.bar{position:sticky;top:0;z-index:50;background:var(--shadow);border-bottom:1px solid var(--hair)}
.bar::before{content:"";position:absolute;inset:0;background:var(--lift);pointer-events:none}
.bar > .in{display:flex;align-items:center;gap:20px;height:var(--head);position:relative}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;font:700 19px/1 Archivo,Arial,sans-serif;font-stretch:82%;font-variation-settings:'wdth' 82;letter-spacing:-.02em;color:var(--ivory)}
.logo img{width:40px;height:40px;display:block}
.logo small{display:block;font:500 12px/1.2 Archivo,Arial,sans-serif;font-stretch:100%;font-variation-settings:'wdth' 100;letter-spacing:0;margin-top:3px;color:var(--dim)}
.nav{display:none;gap:22px}
.nav a{font:500 16px Archivo,Arial,sans-serif;text-decoration:none;padding:10px 0;color:var(--ivory)}
.nav a:hover{text-decoration:underline}
.tel{font:600 16px Archivo,Arial,sans-serif;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar .btn{display:none}
@media (min-width:960px){.nav{display:flex}.bar .btn{display:inline-flex}}

/* mobile action bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1.8fr;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--shadow);border-top:1px solid var(--hair)}
.actionbar .btn{min-height:50px;padding:0 12px;font-size:16px}
.page{padding-bottom:86px}
@media (min-width:960px){.actionbar{display:none}.page{padding-bottom:0}}

/* photographs */
.photo{position:relative;overflow:hidden;background-color:#26272B;background-size:cover;background-position:center}
.photo img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.photo img.ld{opacity:1}
.photo.natural{display:grid;place-items:center;background-size:auto}
.photo.natural img{width:auto;height:auto;max-width:100%}
figure{margin:0}
figcaption{font:500 14px/1.4 Archivo,Arial,sans-serif;color:var(--dim);margin-top:8px}
.cap-wash{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font:500 14px/1.4 Archivo,Arial,sans-serif;color:var(--ivory);background:linear-gradient(to top,rgba(23,24,27,.85),rgba(23,24,27,0))}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.late{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.photo img{transition:none}.rv.late{transition-delay:0s}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--ivory);isolation:isolate}
.hero .photo{position:absolute;inset:0;z-index:-1}
.hero .photo img{object-position:center 38%}
.hero .scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(23,24,27,.97) 0%,rgba(23,24,27,.86) 30%,rgba(23,24,27,.42) 58%,rgba(23,24,27,.08) 80%,rgba(23,24,27,.35) 100%)}
.hero > .in{position:relative;z-index:1;width:100%;padding-top:100px;padding-bottom:48px}
@media (min-width:960px){.hero > .in{padding-bottom:80px}}
.hero h1{max-width:18ch;margin-bottom:22px}
.hero .lede{max-width:56ch}
.hero .credit{position:absolute;top:calc(var(--head) + 14px);right:16px;z-index:1;font:500 13px/1.4 Archivo,Arial,sans-serif;color:var(--dim);text-align:right;max-width:46ch;background:rgba(23,24,27,.55);padding:6px 10px}
@media (min-width:960px){.hero .credit{right:48px}}
.hint{font:500 15px Archivo,Arial,sans-serif;color:var(--dim);margin-top:26px}

/* services */
.svc-grid{display:grid;gap:36px 24px;grid-template-columns:1fr}
@media (min-width:600px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:56px 32px}}
.svc{display:flex;flex-direction:column;gap:12px}
.svc .photo{aspect-ratio:4/3}
.svc p{font-size:17px;color:var(--ink)}
.svc .btn{align-self:flex-start;margin-top:auto}

/* case studies */
.case{border-top:1px solid var(--hair)}
.case > .in{display:block}
@media (min-width:960px){.case > .in{display:grid;grid-template-columns:6fr 6fr;gap:64px}}
.visual{position:sticky;top:var(--head);height:46svh;min-height:260px;z-index:1;margin:0 -16px}
@media (min-width:600px){.visual{margin:0 -24px}}
@media (min-width:960px){.visual{height:calc(100vh - var(--head));min-height:0;margin:0}}
.visual .photo{position:absolute;inset:0;transition:opacity 1.4s var(--ease)}
.visual .photo:not(.on){opacity:0}
.visual .photo .cap-wash{opacity:1}
@media (prefers-reduced-motion:reduce){.visual .photo{transition:none}}
.story{padding:36px 0 72px;position:relative;background:var(--shadow);min-width:0;max-width:100%}
.case{overflow-x:clip}
@media (min-width:960px){.story{padding:120px 0 140px}}
.story h3{margin-top:0}
.meta{font:500 16px Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--amber);margin:0 0 20px}
.beat{padding:28px 0;border-top:1px solid var(--hair)}
.beat:first-of-type{border-top:0;padding-top:0}
.beat h4{color:var(--amber);font-size:15px;font-stretch:100%;font-variation-settings:'wdth' 100;letter-spacing:.02em;margin-bottom:10px}
.mark{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:500 16px Archivo,Arial,sans-serif}
.ring{width:40px;height:40px;border-radius:50%;border:3px solid var(--orange);display:grid;place-items:center;font:700 16px Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums;flex:none;color:var(--ivory)}
.tl{display:block;width:100%;max-width:600px;min-width:0;height:auto;margin:6px 0 4px;font-family:Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums}

/* process */
.steps{display:grid;gap:36px 24px;grid-template-columns:1fr;list-style:none;margin:0;padding:0;counter-reset:step}
@media (min-width:600px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.steps{grid-template-columns:repeat(4,1fr);gap:48px 28px}}
.steps li{counter-increment:step}
.steps .photo{aspect-ratio:3/2;margin-bottom:14px}
.steps .num{font:600 14px/1 Archivo,Arial,sans-serif;color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-bottom:8px}
.steps h4{margin-bottom:6px}
.steps p{font-size:16px;margin:0 0 6px}
.dur{font:500 14px Archivo,Arial,sans-serif;color:var(--dim)}

/* facts */
.factgrid{display:grid;gap:0;grid-template-columns:1fr;list-style:none;margin:28px 0 0;padding:0}
@media (min-width:600px){.factgrid{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:960px){.factgrid{grid-template-columns:repeat(3,1fr)}}
.factgrid li{border-top:1px solid var(--hair);padding:18px 0 22px}
.factgrid .big{display:block;font:700 clamp(30px,8.5vw,40px)/1 Archivo,Arial,sans-serif;font-stretch:82%;font-variation-settings:'wdth' 82;letter-spacing:-.02em;margin-bottom:8px;font-variant-numeric:tabular-nums;color:var(--ivory)}
.factgrid p{margin:0;font-size:16px;color:var(--ink)}

/* enquiry */
.enq{display:grid;gap:44px}
@media (min-width:960px){.enq{grid-template-columns:7fr 5fr;gap:80px}}
form{display:grid;gap:22px;max-width:560px}
.f{display:grid;gap:6px}
label,legend{font:600 16px Archivo,Arial,sans-serif;padding:0;color:var(--ivory)}
.help{font-size:15px;margin:0;color:var(--dim)}
input[type=text],input[type=tel],select{width:100%;min-height:52px;border:2px solid rgba(242,235,225,.5);border-radius:2px;background:transparent;color:var(--ivory);font:400 18px 'Source Serif 4',Georgia,serif;padding:0 14px}
input::placeholder{color:rgba(242,235,225,.45)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23F2EBE1' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
select option{background:var(--shadow);color:var(--ivory)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.opts{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:10px;border:2px solid rgba(242,235,225,.5);border-radius:2px;padding:10px 12px;min-height:48px;cursor:pointer;font:500 15px Archivo,Arial,sans-serif;color:var(--ivory)}
.opt input{width:20px;height:20px;margin:0;accent-color:var(--orange)}
.err{display:flex;gap:10px;align-items:flex-start;margin:2px 0 0;font:500 15px/1.4 Archivo,Arial,sans-serif;color:var(--ivory)}
.err::before{content:"";flex:none;width:4px;align-self:stretch;background:var(--orange);margin-top:2px}
.is-err input[type=text],.is-err input[type=tel],.is-err select,.is-err .opts{outline:3px solid var(--orange);outline-offset:1px}
.done{border:2px solid var(--ivory);padding:22px 24px;max-width:560px}
.done h3{display:flex;gap:10px;align-items:center}
.done h3 svg{width:30px;height:30px;stroke:var(--orange);stroke-width:2.5;fill:none;flex:none}
.office{margin:0 0 22px}
.office dt{font:600 16px Archivo,Arial,sans-serif;color:var(--ivory)}
.office dd{margin:4px 0 0}
.office a{font-variant-numeric:tabular-nums}
address{font-style:normal}
.hp{position:absolute;left:-9999px}

/* divider and footer */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--rose) 20%,var(--rose) 80%,transparent)}
footer{padding:40px 0 48px;font-size:15px;color:var(--dim)}
footer .cols{display:grid;gap:20px}
@media (min-width:760px){footer .cols{grid-template-columns:1fr 1fr 1fr}}
footer p{margin:0 0 .5em}
footer strong{color:var(--ivory)}


/* ---------- motion additions ---------- */
.hero .cycle .fr{position:absolute;inset:0;opacity:0;transition:opacity 2.4s var(--ease)}
.hero .cycle .fr.on{opacity:1}
.hero .cycle .fr img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

.chapter-3d .intro{padding:96px 0 36px}
@media (min-width:960px){.chapter-3d .intro{padding:128px 0 48px}}
.track{position:relative}
#dome-track{height:780vh}
#mould-track{height:360vh}
.stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));overflow:hidden}
.scene{position:absolute;inset:0;outline-offset:-4px}
.scene .gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s var(--ease)}
.scene .still.on{opacity:1}
.scene.live .still{opacity:0 !important;transition:opacity .6s}
.scene .gl{opacity:0;transition:opacity 1.2s var(--ease)}
.scene.live .gl{opacity:1}
.card{position:absolute;left:48px;bottom:40px;width:392px;background:rgba(23,24,27,.84);border-top:2px solid var(--amber);padding:18px 20px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card h3{font-size:30px;margin-bottom:.35em}
.card p{font-size:16px;line-height:1.5;margin:0 0 .6em}
.card .step-num{font:600 13px/1.3 Archivo,Arial,sans-serif;color:var(--amber);margin:0 0 10px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.card-photo{margin:12px 0 0;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.card-photo .photo{aspect-ratio:4/3}
.card-photo figcaption{margin:0;font-size:13px}
.card.flash .fade{animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card.flash .fade{animation:none}}
.controls{position:absolute;right:48px;bottom:40px;display:flex;gap:14px;align-items:center}
.stepbtns{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.stepbtns button,.zoom button,.toggle{min-width:44px;min-height:44px;border:1.5px solid rgba(242,235,225,.55);background:rgba(23,24,27,.65);color:var(--ivory);font:600 15px Archivo,Arial,sans-serif;font-variant-numeric:tabular-nums;border-radius:2px;cursor:pointer;padding:0 12px}
.stepbtns button[aria-current="step"],.toggle[aria-pressed="true"]{background:var(--ivory);color:var(--shadow);border-color:var(--ivory)}
.stepbtns .t{display:none}
@media (min-width:1180px){.stepbtns .t{display:inline;margin-left:6px;font-weight:500}}
.zoom{display:flex;gap:6px}
html.stills .zoom{display:none}
.label .short{display:none}
@media (max-width:759px){.label .short{display:inline}}
.label{position:absolute;top:16px;right:48px;max-width:50ch;text-align:right;font:500 12.5px/1.45 Archivo,Arial,sans-serif;color:var(--dim);margin:0;pointer-events:none}
@media (max-width:759px){
  .stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;height:calc(100svh - var(--head) - 86px)}
  .zoom{display:none}
  .label .long{display:none}
  .scene{position:relative;inset:auto;min-height:0}
  .card{position:relative;left:auto;bottom:auto;width:auto;margin:0 16px;background:none;padding:12px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .card h3{font-size:24px}
  .card p{font-size:15px}
  .card-photo{display:none}
  .controls{position:relative;right:auto;bottom:auto;padding:8px 16px 10px;justify-content:space-between}
  .label{top:8px;right:16px;left:16px;text-align:left;font-size:11px;max-width:none}
}
.strip{display:none}
.strip ol{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:600px){.strip ol{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.strip ol.five{grid-template-columns:repeat(5,1fr)}.strip ol.three{grid-template-columns:repeat(3,1fr)}}
.strip img{display:block;width:100%;aspect-ratio:7/5;object-fit:contain;background:var(--shadow);border:1px solid var(--hair)}
.strip .num{font:600 14px Archivo,Arial,sans-serif;color:var(--amber);margin:12px 0 6px}
.strip p{font-size:16px}
.strip .label{position:static;text-align:left;max-width:64ch;margin-top:20px}
@media (prefers-reduced-motion:reduce){.track{display:none}.strip{display:block;padding-bottom:72px}}

.lamp-grid{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.lamp-grid{grid-template-columns:5fr 6fr;gap:72px}}
.lamp-scene{position:relative;inset:auto;aspect-ratio:640/1053;width:100%;max-width:calc(80svh * 640 / 1053);margin:0 auto;border:1px solid var(--hair);cursor:crosshair;background:#1f2023}
.lamp-scene .still{object-fit:cover}
.lamp-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lamp-copy .label{position:static;text-align:left;max-width:64ch;margin-top:22px}
html.stills .lamp-tools{display:none}

.ms{list-style:none;margin:10px 0 0;padding:0;position:relative}
.ms::before{content:"";position:absolute;left:5px;top:9px;bottom:30px;width:1px;background:var(--amber);transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--ease)}
.ms li{position:relative;padding:0 0 18px 28px;opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ms li::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--shadow);border:2px solid var(--amber)}
.ms li.end::before{background:var(--orange);border-color:var(--orange)}
.ms .d{display:block;font:600 14px/1.3 Archivo,Arial,sans-serif;color:var(--amber);font-variant-numeric:tabular-nums}
.ms .w{display:block;font-size:16px;line-height:1.45}
.ms.lit::before{transform:none}
.ms.lit li{opacity:1;transform:none}
.ms.lit li:nth-child(2){transition-delay:.25s}.ms.lit li:nth-child(3){transition-delay:.5s}.ms.lit li:nth-child(4){transition-delay:.75s}.ms.lit li:nth-child(5){transition-delay:1s}
@media (prefers-reduced-motion:reduce){.ms::before{transform:none;transition:none}.ms li{opacity:1;transform:none;transition:none}}
.tl.draw .bar{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;transition:transform 1.1s var(--ease)}
.tl.draw .b2{transition-delay:.55s}
.tl.draw .b3{transition-delay:1.45s}
.tl.draw text{opacity:0;transition:opacity .7s var(--ease) .2s}
.tl.draw.lit .bar{transform:none}
.tl.draw.lit text{opacity:1}
@media (prefers-reduced-motion:reduce){.tl.draw .bar{transform:none;transition:none}.tl.draw text{opacity:1;transition:none}}

.aerial .pan{position:absolute;left:0;top:0;will-change:transform}
.aerial .pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.aerial .pan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.aerial polygon{fill:rgba(201,138,59,.12);stroke:#C98A3B;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s var(--ease) .5s,fill .8s}
.case.drawn .aerial polygon{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.aerial polygon{stroke-dashoffset:0;transition:none}}

/* ---------- lightbox ---------- */
.zoomable{cursor:zoom-in}
.zoomable img{transition:opacity 1.2s var(--ease),transform 1.1s var(--ease)}
@media (hover:hover){.zoomable:hover img.ld{transform:scale(1.035)}}
.zoomable::after{content:"";position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:rgba(23,24,27,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F2EBE1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center/18px no-repeat;opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;z-index:2}
.zoomable:hover::after,.zoomable:focus-visible::after{opacity:1;transform:none}
@media (pointer:coarse){.zoomable::after{opacity:.9;transform:none}}
.visual .photo:not(.on){pointer-events:none}
.visual.zoomable::after{top:16px;right:16px}
.card-photo .zoomable::after{width:30px;height:30px;top:6px;right:6px;background-size:14px}

.lb{position:fixed;inset:0;z-index:200}
.lb[hidden]{display:none}
.lb-back{position:absolute;inset:0;background:rgba(17,18,20,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-media{position:fixed;overflow:hidden;background:#222326;box-shadow:0 30px 80px rgba(0,0,0,.55);will-change:left,top,width,height}
.lb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lb-media .hi{opacity:0;transition:opacity .5s var(--ease)}
.lb-media .hi.ld{opacity:1}
.lb-media svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease)}
.lb-media svg.on{opacity:1}
.lb-media polygon{fill:rgba(201,138,59,.12);stroke:#C98A3B;stroke-width:1.6;stroke-linejoin:round}
.lb-cap{position:fixed;margin:0;font:500 15px/1.45 Archivo,Arial,sans-serif;color:var(--ivory);max-width:64ch}
.lb-count{position:fixed;left:24px;top:22px;margin:0;font:600 14px Archivo,Arial,sans-serif;color:var(--amber);font-variant-numeric:tabular-nums}
.lb-btn{position:fixed;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(242,235,225,.5);background:rgba(23,24,27,.6);color:var(--ivory);cursor:pointer;display:grid;place-items:center;padding:0}
.lb-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-btn:hover{background:var(--ivory);color:var(--shadow)}
.lb-close{top:14px;right:16px}
.lb-prev{left:18px;top:50%;margin-top:-24px}
.lb-next{right:18px;top:50%;margin-top:-24px}
.lb-ui{opacity:0;transition:opacity .35s var(--ease)}
.lb.open .lb-ui{opacity:1}
@media (max-width:759px){.lb-prev,.lb-next{top:auto;bottom:22px;margin-top:0}.lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}.lb-count{left:16px;top:26px}}

/* =====================================================================
   Multi-page additions
   ===================================================================== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:.5em}
.h4{font-size:21px;letter-spacing:-.01em;line-height:1.15;font-stretch:90%;font-variation-settings:'wdth' 90;margin-bottom:.3em}
.section.tight{padding:56px 0}
@media (min-width:960px){.section.tight{padding:80px 0}}
.arr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;transition:transform .3s var(--ease)}
.more{display:inline-flex;align-items:center;gap:8px;font:600 15px Archivo,Arial,sans-serif;color:var(--amber)}
a:hover .more .arr,.more:hover .arr,.chip:hover .arr{transform:translateX(4px)}

/* page transitions between pages */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .28s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .5s var(--ease) both}
  .bar{view-transition-name:bar}
  @keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
}

/* body padding replaces main padding so the footer clears the phone action bar */
.page{padding-bottom:0}
body{padding-bottom:86px}
@media (min-width:960px){body{padding-bottom:0}}

/* header */
.bar{transition:background .3s var(--ease)}
.bar.scrolled{background:rgba(23,24,27,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav a{position:relative}
.nav a[aria-current="page"]{color:var(--ivory)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover{text-decoration:none}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:none}
@media (min-width:960px) and (max-width:1199px){.bar .tel{display:none}}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(242,235,225,.4);border-radius:50%;background:transparent;color:var(--ivory);cursor:pointer;padding:0;margin-left:4px}
.menu-btn .bars{display:grid;gap:5px;width:18px}
.menu-btn i{display:block;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:960px){.menu-btn{display:none}}
@media (max-width:420px){.bar .logo small{display:none}.bar .tel{font-size:15px}}
.menu{position:fixed;inset:var(--head) 0 0 0;z-index:49;background:var(--shadow);padding:28px 16px calc(110px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.menu.open{clip-path:inset(0 0 0 0)}
.menu-links{display:flex;flex-direction:column}
.menu-links a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);font:700 clamp(34px,10vw,48px)/1 Archivo,Arial,sans-serif;font-stretch:82%;font-variation-settings:'wdth' 82;letter-spacing:-.02em;color:var(--ivory);text-decoration:none;opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.menu-links a .n{font-size:13px;font-weight:600;color:var(--amber);letter-spacing:.04em}
.menu-links a[aria-current="page"]{color:var(--orange)}
.menu.open .menu-links a{opacity:1;transform:none}
.menu.open .menu-links a:nth-child(2){transition-delay:.05s}.menu.open .menu-links a:nth-child(3){transition-delay:.1s}.menu.open .menu-links a:nth-child(4){transition-delay:.15s}.menu.open .menu-links a:nth-child(5){transition-delay:.2s}
.menu-foot{display:flex;flex-direction:column;gap:8px;font:600 17px Archivo,Arial,sans-serif}
.menu-foot a{color:var(--ivory);text-decoration:none}
html.menu-open{overflow:hidden}
@media (min-width:960px){.menu{display:none}}
@media (prefers-reduced-motion:reduce){.menu,.menu-links a{transition:none}}

/* inner page heads */
.phead{padding:88px 0 24px}
@media (min-width:960px){.phead{padding:128px 0 40px}}
.phead h1{max-width:20ch;margin-bottom:22px}
.phead .lede{max-width:60ch}
.phero{position:relative;min-height:78svh;display:flex;align-items:flex-end;isolation:isolate}
.phero .bg{position:absolute;inset:0;z-index:-1}
.phero .bg img{animation:heroIn 2.4s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.06)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.phero .bg img{animation:none}}
.phero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,24,27,.97) 0%,rgba(23,24,27,.8) 32%,rgba(23,24,27,.25) 62%,rgba(23,24,27,.35) 100%)}
.phero > .in{position:relative;width:100%;padding-top:120px;padding-bottom:48px}
@media (min-width:960px){.phero > .in{padding-bottom:72px}}
.phero h1{max-width:22ch;margin-bottom:18px;font-size:clamp(36px,5vw,68px)}
.phero .lede{max-width:58ch}
.crumb{margin:0 0 18px;font:600 14px Archivo,Arial,sans-serif}
.crumb a{color:var(--amber);text-decoration:none}
.crumb a::before{content:"← "}
.meta-row{display:flex;flex-wrap:wrap;gap:14px 40px;margin:26px 0 0}
.meta-row dt{font:600 13px Archivo,Arial,sans-serif;color:var(--amber);letter-spacing:.02em}
.meta-row dd{margin:4px 0 0;font:500 16px Archivo,Arial,sans-serif;color:var(--ivory)}

/* cards */
.pgrid{display:grid;gap:44px 24px;grid-template-columns:1fr;margin-top:12px}
@media (min-width:600px){.pgrid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.pgrid{grid-template-columns:repeat(3,1fr);gap:56px 32px}}
.pcard,.svc.tile{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.pcard .photo,.svc.tile .photo{aspect-ratio:4/3}
.pcard .photo img,.svc.tile .photo img,.feature .photo img,.srow .photo img{transition:opacity 1.2s var(--ease),transform 1.1s var(--ease)}
.pcard:hover .photo img.ld,.svc.tile:hover .photo img.ld,.feature:hover .photo img.ld,.srow:hover .photo img.ld{transform:scale(1.04)}
.pcard .meta{font:600 13px Archivo,Arial,sans-serif;color:var(--amber);margin-top:6px;letter-spacing:.02em}
.pcard h3{font-size:clamp(24px,2.4vw,30px);margin:0}
.pcard p,.svc.tile p{font-size:16px;margin:0;color:var(--dim)}
.pcard .more,.svc.tile .more{margin-top:auto;padding-top:6px}
.svc.tile h3{margin:6px 0 0}
.mini-grid{display:grid;gap:28px 20px;grid-template-columns:1fr 1fr}
.mini-grid .pcard:nth-child(3){display:none}
@media (min-width:960px){.mini-grid{grid-template-columns:1fr 1fr 1fr}.mini-grid .pcard:nth-child(3){display:flex}}
.mini-grid .pcard h3{font-size:22px}
.mini-grid .pcard p{display:none}

/* featured projects on the home page */
.feature-list{display:grid;gap:64px;margin-top:48px}
.feature{display:grid;gap:22px;text-decoration:none;color:var(--ink);align-items:center}
.feature .photo{aspect-ratio:3/2}
@media (min-width:960px){.feature{grid-template-columns:7fr 5fr;gap:56px}.feature.flip{grid-template-columns:5fr 7fr}.feature.flip .photo{order:2}}
.feature .meta{font:600 14px Archivo,Arial,sans-serif;color:var(--amber)}
.feature h3{margin:10px 0 12px}
.feature p{color:var(--ink)}

/* project list */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.filters button{min-height:44px;padding:0 16px;border:1.5px solid rgba(242,235,225,.35);border-radius:22px;background:transparent;color:var(--ivory);font:600 15px Archivo,Arial,sans-serif;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.filters button:hover{border-color:var(--ivory)}
.filters button[aria-pressed="true"]{background:var(--ivory);color:var(--shadow);border-color:var(--ivory)}
.status{font-size:14px;color:var(--dim);min-height:1.5em;margin:14px 0 8px}
.plist{padding-bottom:40px}
.record{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--hair)}
.record li{display:grid;gap:4px 24px;grid-template-columns:80px 1fr;padding:16px 0;border-bottom:1px solid var(--hair)}
.record .y{font:600 15px Archivo,Arial,sans-serif;color:var(--amber);font-variant-numeric:tabular-nums}
.record .t{font:700 20px/1.2 Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;color:var(--ivory)}
.record .t small{display:block;font-size:14px;font-weight:500;color:var(--dim);margin-top:4px}
.record .s{grid-column:2;font-size:15px;color:var(--dim)}
@media (min-width:760px){.record li{grid-template-columns:100px 1fr 1fr;align-items:baseline}.record .s{grid-column:auto}}
.record.current .y{font-size:14px}

/* project page */
.case.single{border-top:0}
.case.single .story .lede{margin-bottom:28px}
@media (min-width:960px){.case.single .story{padding-top:96px}}
.gallery{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:28px}
@media (min-width:960px){.gallery{grid-template-columns:repeat(3,1fr);gap:16px}}
.gallery .photo{aspect-ratio:4/3}
.gallery .cap-wash{opacity:0;transition:opacity .35s var(--ease)}
.gallery .photo:hover .cap-wash,.gallery .photo:focus-visible .cap-wash{opacity:1}
@media (pointer:coarse){.gallery .cap-wash{display:none}}
.gallery.two-up{grid-template-columns:1fr 1fr;margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1.5px solid var(--hair);border-radius:24px;font:600 15px Archivo,Arial,sans-serif;color:var(--ivory);text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease)}
.chip:hover{border-color:var(--amber);background:rgba(201,138,59,.08)}
.pnav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding-top:32px;padding-bottom:32px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.pnav a{text-decoration:none;color:var(--ivory);font:700 clamp(18px,2vw,24px)/1.15 Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90}
.pnav a span{display:block;font:600 13px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:6px}
.pnav .next{text-align:right}
.pnav .all{font:600 15px Archivo,Arial,sans-serif;color:var(--dim);text-decoration:underline}
@media (max-width:599px){.pnav{grid-template-columns:1fr 1fr}.pnav .all{grid-column:1/-1;grid-row:2;text-align:center}}

/* cta band */
.cta-band{padding:88px 0;background:radial-gradient(120% 140% at 0% 100%,rgba(138,90,107,.22),transparent 60%),radial-gradient(90% 120% at 100% 0%,rgba(201,138,59,.12),transparent 60%);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
@media (min-width:960px){.cta-band{padding:120px 0}}
.cta-band h2{max-width:18ch}

/* services */
.frame{display:grid;gap:40px}
@media (min-width:960px){.frame{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.srow{display:grid;gap:24px;text-decoration:none;color:var(--ink);padding:40px 0;border-bottom:1px solid var(--hair);align-items:center}
.srow:first-child{padding-top:0}
.srow .photo{aspect-ratio:16/10}
@media (min-width:960px){.srow{grid-template-columns:1fr 1fr;gap:64px;padding:56px 0}.srow.flip .photo{order:2}}
.srow .n{font:600 14px Archivo,Arial,sans-serif;color:var(--amber)}
.srow h2{font-size:clamp(28px,3.4vw,44px);margin:10px 0 14px}
.two{display:grid;gap:44px}
@media (min-width:960px){.two{grid-template-columns:6fr 5fr;gap:80px;align-items:start}}
.prose p{font-size:18px}
.narrow{max-width:760px}
.makes{margin:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.makes div{padding:18px 0;border-bottom:1px solid var(--hair)}
.makes dt{font:700 21px/1.2 Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;color:var(--ivory);margin-bottom:6px}
.makes dd{margin:0;font-size:16px;color:var(--dim)}
.inline-fig{margin-top:24px}
.photo.tall{aspect-ratio:3/4}

/* about */
.ms.big{margin-top:36px;max-width:820px}
.ms.big .d{font-size:16px}
.ms.big .w{font-size:18px;line-height:1.5}
.ms.big .w b{font-family:Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;color:var(--ivory)}
.ms.big li{padding-bottom:26px}
.people{display:grid;gap:40px;margin-top:28px}
@media (min-width:960px){.people{grid-template-columns:repeat(3,1fr);gap:40px}}
.person{border-top:2px solid var(--amber);padding-top:24px}
.person .mono{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--hair);font:700 20px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:18px}
.person h3{font-size:clamp(24px,2.4vw,30px);margin-bottom:6px}
.person .role{font:600 15px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:14px}
.person p{font-size:16px}
.person .since{font:500 14px Archivo,Arial,sans-serif;color:var(--dim)}
.deps{display:grid;gap:28px;margin-top:28px}
@media (min-width:760px){.deps{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.deps{grid-template-columns:repeat(4,1fr)}}
.deps .n,.next-steps .n{display:block;font:600 14px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:10px}
.deps p{font-size:16px;color:var(--dim)}
.next-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:32px}
@media (min-width:960px){.next-steps{grid-template-columns:repeat(3,1fr)}}
.next-steps li{border-top:1px solid var(--hair);padding-top:20px}
.next-steps p{font-size:16px;color:var(--dim)}

/* footer */
footer.foot{padding:72px 0 40px;border-top:1px solid var(--hair);font-size:15px;color:var(--dim);background:linear-gradient(to bottom,rgba(242,235,225,.02),transparent)}
.foot-top{display:grid;gap:36px;grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
@media (min-width:960px){.foot-top{grid-template-columns:2fr 1fr 1fr 1fr}.foot-brand{grid-column:auto}}
.foot-brand p{max-width:40ch;margin-top:16px}
.foot .logo{margin:0}
.fh{font:600 13px Archivo,Arial,sans-serif;color:var(--amber);margin:0 0 12px;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--ivory);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-offices{display:grid;gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid var(--hair)}
@media (min-width:760px){.foot-offices{grid-template-columns:1fr 1fr 1fr}}
.foot-offices address{font-style:normal;max-width:34ch}
.foot-offices p{margin:6px 0 0}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:40px;font:500 13px Archivo,Arial,sans-serif;color:var(--dim)}
.phero .crumb a{display:inline-block;padding:6px 12px;border-radius:16px;background:rgba(23,24,27,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ivory)}
.enq h1{font-size:clamp(38px,5vw,64px);margin-bottom:.4em}
.phead + .section,.phead + section.plist{padding-top:32px}
@media (max-width:759px){.phero{min-height:64svh}}

/* =====================================================================
   Site-wide effects (fx.js)
   ===================================================================== */
/* a photograph carried from one page into the next */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(ph){animation-duration:.72s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-old(ph),::view-transition-new(ph){width:100%;height:100%;object-fit:cover;overflow:clip;animation-duration:.72s}
  ::view-transition-group(bar){animation:none}
}
.vt-in .phero .bg img{opacity:1;transition:none;animation:none}
.vt-in .phero .bg{background-image:none !important}
/* the drawing becomes the building */
.photo.sketching{background-image:none !important;background-color:var(--shadow)}
.photo.sketching img{opacity:0}
.photo .lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:block}
.phero .bg.sketching img,.phero .bg.drawn img{animation:none}
/* the lattice dissolve */
.swap-top{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.visual .photo.top{z-index:2;transition:none}

/* =====================================================================
   Projects index: the map
   ===================================================================== */
.pmap{padding:8px 0 40px}
.map-stage{position:relative;margin:0 -8px}
.map{display:block;width:100%;height:auto;overflow:visible}
.map .coast{fill:rgba(242,235,225,.035);stroke:rgba(242,235,225,.62);stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map .lens-coast{fill:rgba(242,235,225,.05)}
.map .lens circle,.map .lens line{fill:none;stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
.map .lens .lens-big{stroke:rgba(201,138,59,.6);stroke-dasharray:3 4}
.map text{font:600 11px Archivo,Arial,sans-serif;fill:var(--dim);letter-spacing:.02em}
.map .inset rect{fill:none;stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
.map .ghost{fill:var(--amber);opacity:0;transition:opacity .4s}
.map .ghost.on{opacity:.8}
.map .pt{cursor:pointer;opacity:0;transition:opacity .35s var(--ease)}
.map .pt.on{opacity:1}
.map .pt:not(.on){pointer-events:none}
.map .pt .hit{fill:transparent}
.map .pt .dot{fill:var(--amber);stroke:var(--shadow);stroke-width:1.2;transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease),fill .25s}
.map .pt .ring{fill:none;stroke:var(--amber);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.map .pt.land .ring{animation:ptRing 1.1s cubic-bezier(.2,.7,.2,1) both}
.map .pt.land .dot{animation:ptDot .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ptRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5.5)}}
@keyframes ptDot{0%{transform:scale(0)}100%{transform:scale(1)}}
.map .pt.hot .dot,.map .pt:focus-visible .dot{fill:var(--ivory);transform:scale(1.5)}
.map .pt:focus{outline:none}
.map .pt:focus-visible .hit{stroke:var(--orange);stroke-width:2.5;vector-effect:non-scaling-stroke}
.map .pt.dim{opacity:.32}
.map .pt.dim .dot{fill:#8c8a86}
.map-label{position:absolute;z-index:3;min-width:220px;max-width:320px;background:rgba(23,24,27,.94);border:1px solid var(--hair);border-top:2px solid var(--amber);padding:12px 14px 10px;font:500 14px/1.35 Archivo,Arial,sans-serif;color:var(--ivory);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lblIn .25s var(--ease) both}
@keyframes lblIn{from{opacity:0;transform:translateY(4px)}}
.map-label .town{margin:0 0 8px;font:600 12px Archivo,Arial,sans-serif;color:var(--amber);letter-spacing:.04em;text-transform:uppercase}
.map-label ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.map-label li{display:grid;grid-template-columns:40px 1fr;gap:8px}
.map-label li.off{opacity:.4}
.map-label .y{color:var(--dim);font-variant-numeric:tabular-nums}
.map-label a{color:var(--ivory)}
.map-label .close{position:absolute;top:4px;right:6px;width:32px;height:32px;border:0;background:none;color:var(--dim);font:400 22px/1 Archivo,sans-serif;cursor:pointer}
.map-label::before{content:"";position:absolute;left:0;top:100%;width:25px;height:1px;background:var(--amber);transform-origin:0 0;transform:rotate(135deg)}
.map-label.flip-x::before{left:100%;transform:rotate(45deg)}
.map-label.flip-y::before{top:0;transform:rotate(-135deg)}
.map-label.flip-x.flip-y::before{transform:rotate(-45deg)}
.map-label.sheet::before{display:none}
.map .ghost.dim{opacity:.2;fill:#8c8a86}
.map-label.sheet{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));top:auto;max-width:none;z-index:60}
@media (min-width:960px){.map-label.sheet{bottom:16px}}
.yr{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:center;margin-top:18px}
.yr-num{font:700 clamp(40px,6vw,72px)/1 Archivo,Arial,sans-serif;font-stretch:100%;color:var(--ivory);min-width:3.1ch;letter-spacing:-.02em}
.yr-rule{position:relative;padding-bottom:26px}
.yr input{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:ew-resize;--p:100%}
.yr input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--amber) var(--p),rgba(201,138,59,.25) var(--p))}
.yr input::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--amber) var(--p),rgba(201,138,59,.25) var(--p))}
.yr input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--shadow);border:2px solid var(--amber);transition:transform .2s}
.yr input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--shadow);border:2px solid var(--amber)}
.yr input:active::-webkit-slider-thumb{transform:scale(1.2);background:var(--amber)}
.yr input:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.yr-ticks{position:absolute;left:11px;right:11px;bottom:0;height:18px;font-size:12px;color:var(--dim)}
.yr-ticks span{position:absolute;transform:translateX(-50%)}
.yr-ticks span::before{content:"";position:absolute;left:50%;top:-10px;width:1px;height:6px;background:var(--hair)}
@media (max-width:599px){.yr{grid-template-columns:1fr}.yr-ticks span:nth-child(even){display:none}.map-stage{margin:0 -12px}}

/* the grid */
.pcard.hot .photo img{transform:scale(1.04)}
.pcard.hot h3{color:var(--amber)}
.pcard .swap-top.alt{transition:transform 1.1s var(--ease)}
.pcard:hover .swap-top.alt{transform:scale(1.04)}
@media (min-width:960px){
  .lead-grid .pcard.lead{grid-column:span 2;grid-row:span 2}
  .lead-grid .pcard.lead .photo{aspect-ratio:auto;flex:1;min-height:420px}
  .lead-grid .pcard.lead h3{font-size:clamp(30px,3vw,44px)}
}
@media (min-width:600px) and (max-width:959px){.lead-grid .pcard.lead{grid-column:span 2}.lead-grid .pcard.lead .photo{aspect-ratio:16/9}}
.pcard.lead .photo img:not(.swap-top){transition:opacity 1.2s var(--ease),transform 1.1s var(--ease)}
/* the register rules itself */
.record.ruled{border-top:0}
.record.ruled li{border-bottom:0;position:relative}
.record.ruled li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);transform-origin:0 50%}
.record.ruled li:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
.record.ruled li.rule-wait::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.5,0,.2,1);transition-delay:inherit}
.record.ruled li.rule-wait.ruled-in::after{transform:none}
@media (max-width:599px){.map .pt .hit{r:calc(var(--hr) * 2.3px)}.map .pt .dot,.map .pt .ring{r:7px}.map text{font-size:18px}}

/* =====================================================================
   Project moments
   ===================================================================== */
/* prev / next carry their photographs */
.pnav a .photo{width:100%;max-width:220px;aspect-ratio:16/10;margin-bottom:12px}
.pnav .next .photo{margin-left:auto}
@media (max-width:599px){.pnav a .photo{max-width:none}}
/* a video in the hero: a tall frame on desktop, the whole screen on a phone */
.phero .vid-frame{position:absolute;z-index:0;inset:0;overflow:hidden;background:#111}
.phero .vid-frame video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.phero .vid-frame video.on{opacity:1}
@media (min-width:960px){.phero.has-vid .vid-frame{inset:calc(var(--head) + 28px) 48px 48px auto;aspect-ratio:9/16;height:auto;border:1px solid var(--hair);box-shadow:0 30px 80px rgba(0,0,0,.5)}.phero.has-vid .scrim{z-index:0}.phero.has-vid .vid-frame{z-index:1}}
/* setting-out */
.setout-fig{aspect-ratio:3/4;margin:0}
.setout-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--ivory);stroke-width:3;opacity:0;transition:opacity 1s var(--ease)}
.setout-lines .dots circle{fill:var(--amber);stroke:none;opacity:0}
.setout-fig.armed{background:var(--shadow) !important}
.setout-fig.armed img{opacity:0 !important;transition:opacity 1.4s var(--ease) 3.6s}
.setout-fig.armed .setout-lines{opacity:1}
.setout-fig.armed .setout-lines [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.setout-fig.go img{opacity:1 !important}
.setout-fig.go .setout-lines{opacity:.0;transition:opacity 1.6s var(--ease) 4.4s}
.setout-fig.go .c1{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.3,1)}
.setout-fig.go .c2{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.3,1) .3s}
.setout-fig.go .dia{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease-out 1.2s}
.setout-fig.go .rad line{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out calc(1.5s + var(--k) * 45ms)}
.setout-fig.go .dots circle{opacity:1;transition:opacity .2s calc(2.9s + var(--k) * 6ms)}
/* the site diary */
.diary{padding-top:88px}
.diary-intro{padding-bottom:24px}
.diary-track,.diary .drule{display:none}
.diary.live .diary-track{display:block;height:calc(100svh + 250vh);position:relative}
.diary.live .dstrips{display:none}
.diary-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:grid;grid-template-rows:1fr auto;overflow:hidden}
.diary.live .drule{display:block}
.prints{position:relative;margin:12px 16px 0}
.print{position:absolute;left:50%;top:50%;margin:0;height:min(88%, calc((100vw - 64px) / var(--ar)));aspect-ratio:var(--ar);max-width:calc(100% - 16px);transform:translate(-50%,-50%) rotate(var(--r));background:#ECE5DA;padding:10px 10px 10px;box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .16s ease-out,transform .5s cubic-bezier(.2,.8,.2,1)}
.print img,.print video{display:block;width:100%;height:100%;object-fit:cover;background:#2a2b2e}
.print.small{height:min(58%, calc((100vw - 64px) / var(--ar)))}
.print figcaption{position:absolute;left:0;right:0;top:100%;margin-top:10px;text-align:center;font-size:13px;color:var(--ivory)}
.print.on{opacity:1;visibility:visible;z-index:3}
.print.under{opacity:1;visibility:visible;z-index:2;transform:translate(calc(-50% - 10px),calc(-50% + 6px)) rotate(calc(var(--r) * -1.6));filter:brightness(.55)}
.print.under + .print.under{z-index:1}
.print.on:not(.back){animation:printIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes printIn{from{opacity:0;transform:translate(-50%,calc(-50% - 18px)) rotate(calc(var(--r) + 2deg))}}
.drule{padding:14px 16px 22px}
@media (min-width:960px){.drule{padding:18px 48px 28px}}
.dmonth{margin:0 0 12px;font:700 clamp(24px,3vw,36px)/1 Archivo,Arial,sans-serif;color:var(--ivory)}
.dline{position:relative;height:2px;background:rgba(201,138,59,.3);margin:0 6px 46px}
.dline b{position:absolute;top:-4px;width:1px;height:10px;background:var(--hair)}
.dmark{position:absolute;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--amber);transition:left .35s cubic-bezier(.2,.8,.2,1)}
.dms{list-style:none;margin:0;padding:0}
.dms li{position:absolute;top:14px;width:1px;height:10px;background:var(--amber)}
.dms li span{position:absolute;top:14px;left:0;transform:translateX(-50%);white-space:nowrap;font:500 12px Archivo,Arial,sans-serif;color:var(--dim);opacity:.45;transition:opacity .4s,color .4s}
.dms li:first-child span{transform:none;left:-4px}
.dms li:last-child span{transform:translateX(-100%)}
.dms li.lit span{opacity:1;color:var(--ivory)}
@media (max-width:759px){.dms li span{display:none}.dms li.lit:last-of-type span{display:none}}
.dstrips{display:grid;gap:22px;padding-bottom:40px}
.dstrip p{margin:0 0 8px;font:600 14px Archivo,Arial,sans-serif;color:var(--amber)}
.dstrip div{display:flex;gap:8px;overflow-x:auto}
.dstrip img{height:150px;width:auto;flex:none}
/* the matched cut */
.mcut{padding-top:88px}
.mcut-track{display:none}
.mcut.live .mcut-track{display:block;height:calc(100svh + 170vh)}
.mcut:not(.live) .mcut-track{display:block}
.mcut:not(.live) .mcut-stage{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 16px 40px}
.mcut:not(.live) .mc{position:relative}
.mcut:not(.live) .mc img{width:100%;height:auto}
.mcut-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));overflow:hidden}
.mcut.live .mc{position:absolute;left:0;top:0;margin:0;will-change:transform}
.mc img{display:block;width:100%;height:100%;object-fit:cover}
.mc figcaption{position:absolute;left:12px;top:12px;margin:0;padding:6px 10px;background:rgba(23,24,27,.75);font:600 14px Archivo,Arial,sans-serif;color:var(--ivory)}
.mcut.live .mc.old{z-index:2}
.mcut.live .mc.old figcaption{opacity:var(--cap-old,1)}
.mcut.live .mc.new figcaption{left:auto;right:12px;top:auto;bottom:12px}
/* Kota Kinabalu light dial */
.dial{--glow:rgb(60,40,50);background:radial-gradient(60% 70% at 30% 50%,color-mix(in srgb,var(--glow) 38%,transparent),transparent 70%);transition:background .3s}
.dial-in{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.dial-in{grid-template-columns:7fr 5fr;gap:64px}}
.dial-view{position:relative;aspect-ratio:3/2;overflow:hidden;background:#111;box-shadow:0 0 120px color-mix(in srgb,var(--glow) 55%,transparent)}
.dfr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.dfr.on{opacity:1}
.knob-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:10px}
.knob{width:156px;height:156px;border-radius:50%;cursor:grab;touch-action:none;flex:none}
.knob:active{cursor:grabbing}
.knob svg{width:100%;height:100%;overflow:visible}
.knob .track{fill:none;stroke:var(--hair);stroke-width:1.5;stroke-dasharray:3 5}
.knob .ticks line{stroke:var(--amber);stroke-width:2}
.knob .cap{transform-origin:100px 100px;transform:rotate(-135deg)}
.knob .cap circle{fill:#232428;stroke:rgba(242,235,225,.5);stroke-width:1.5}
.knob .cap line{stroke:var(--amber);stroke-width:4;stroke-linecap:round}
.knob:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:52px;height:52px;padding:0;border:1.5px solid rgba(242,235,225,.35);border-radius:50%;overflow:hidden;cursor:pointer;background:none}
.swatches button img{width:100%;height:100%;object-fit:cover;display:block}
.swatches button[aria-pressed="true"]{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
/* Puncak Alam: day into night */
.dusk-track{position:relative}
.dusk.live .dusk-track{height:calc(100svh + 160vh)}
.dusk-stage{position:relative;padding:88px 0 60px;background:#26231f;transition:background-color .2s linear}
.dusk.live .dusk-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:grid;grid-template-rows:auto 1fr;padding:32px 0 24px;overflow:hidden}
.dusk-copy h2{margin-bottom:.2em}
.dusk-cap{margin:0 0 16px;font-size:15px;color:var(--dim);min-height:1.5em}
.dusk-frame{position:relative;margin:0 16px;min-height:0}
@media (min-width:960px){.dusk-frame{margin:0 48px}}
.dusk:not(.live) .dusk-frame{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.dusk:not(.live) .dusk-frame .photo{aspect-ratio:3/2}
.dusk.live .dusk-frame .photo{position:absolute;inset:0;opacity:0}
.dusk.live .dusk-frame .photo.on{opacity:1}
.dusk.live .dusk-frame .photo.top{z-index:2}
/* Kota Bharu: through the screen */
.opener{padding:88px 0 0}
.opener-frame{display:grid;gap:12px;grid-template-columns:1fr;margin-top:24px}
@media (min-width:760px){.opener-frame{grid-template-columns:1fr 1fr;padding:0 48px}}
.opener-frame .photo{aspect-ratio:4/3}
.opener-frame.stacked{display:block;position:relative;height:88svh;padding:0}
.opener-frame.stacked .photo{position:absolute;inset:0;aspect-ratio:auto}
.opener-frame.stacked .o-over{z-index:2}
.opener-frame.stacked .cap-wash{opacity:0;transition:opacity .6s}
.opener-frame.stacked.open .o-over .cap-wash{opacity:1}
/* Sabah House: raking light across the frieze */
.rake-fig{aspect-ratio:4/3;margin:0}
.rake-fig .sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,214,150,.55) 46%,rgba(255,236,200,.75) 50%,rgba(255,214,150,.55) 54%,transparent 70%);background-size:300% 100%;background-position:120% 0;mix-blend-mode:soft-light;opacity:0}
.rake-fig.go .sweep{animation:rake 3.2s cubic-bezier(.45,0,.3,1) .3s both}
@keyframes rake{0%{opacity:0;background-position:120% 0}12%{opacity:1}88%{opacity:1}100%{opacity:0;background-position:-20% 0}}
/* Madinah Mawaddah: outside Phase 1 dims once the line has closed */
.aerial .outside{fill:rgba(23,24,27,.62);opacity:0;transition:opacity 1.4s var(--ease) 3.3s}
.case.drawn .aerial .outside{opacity:1}
.lb-media .outside{fill:rgba(23,24,27,.55)}
.ground-row{display:grid;gap:16px}
@media (min-width:760px){.ground-row{grid-template-columns:1fr 1fr}}
.ground-row .photo{aspect-ratio:4/3}
.rise.rv{transform:translateY(40px)}
.rise.rv.in{transform:none}
.ground-row .rise:nth-child(2){transition-delay:.25s}
@media (prefers-reduced-motion:reduce){.aerial .outside{opacity:1;transition:none}}
.dms li:nth-child(even){height:30px}
.dms li:nth-child(even) span{top:34px}
.dline{margin-bottom:70px}
@media (max-width:759px){.dline{margin-bottom:24px}}
.dusk-copy{width:100%}
@media (min-width:960px){.phero.has-vid > .in{padding-right:calc((78svh - var(--head) - 76px) * .5625 + 96px)}.phero.has-vid{min-height:max(78svh,640px)}}

/* =====================================================================
   Services overview: six materials under one lamp
   ===================================================================== */
.lede.big{font-size:clamp(21px,2vw,26px);line-height:1.45;max-width:46ch}
.bench{padding:8px 0 24px}
.bench-strip{position:relative;display:grid;grid-template-columns:repeat(6,1fr);height:clamp(380px,64vh,660px);margin:0 -5px}
@media (max-width:699px){.bench-strip{grid-template-columns:repeat(3,1fr);height:min(150vw,640px)}}
.bench-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.panel{position:relative;z-index:1;display:block;text-decoration:none;color:var(--ivory)}
.panel img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:cover;filter:brightness(.62) contrast(1.05)}
.panel::after{content:"";position:absolute;inset:5px;background:linear-gradient(115deg,rgba(255,210,150,.18),transparent 45%,rgba(23,24,27,.55));pointer-events:none}
.bench.live .panel img{opacity:0}
.bench.live .panel::after{background:linear-gradient(to top,rgba(23,24,27,.7),transparent 32%)}
.panel img.vt-show{opacity:1 !important;filter:none}
.panel .name{position:absolute;left:5px;right:5px;bottom:5px;padding:12px 14px;font:700 clamp(17px,1.7vw,22px)/1.1 Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;z-index:2}
.panel:hover .name,.panel:focus-visible .name{color:var(--amber)}
.panel:focus-visible{outline-offset:-3px}

/* =====================================================================
   Service demonstrations
   ===================================================================== */
/* FRP: the film strip */
.reel{padding-top:72px}
.reel-track{display:none}
.reel.live .reel-track{display:block;height:calc(100svh + 300vh)}
.reel.live .reel-still{display:none}
.reel-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:grid;grid-template-rows:1fr auto;overflow:hidden}
.film{position:relative;align-self:center;padding:26px 0;background:#0f1012;--hole:rgba(242,235,225,.14)}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 14px,var(--hole) 14px 26px);border-radius:2px}
.film::before{top:8px}.film::after{bottom:8px}
.film-row{display:flex;gap:18px;align-items:center;height:min(56svh,520px);will-change:transform}
.rf{flex:none;height:100%;aspect-ratio:var(--ar);margin:0;background:#1d1e21;overflow:hidden;opacity:.38;filter:saturate(.4);transition:opacity .4s,filter .4s}
.rf.gate{opacity:1;filter:none}
.rf video,.rf img{width:100%;height:100%;object-fit:cover;display:block}
.rf.pair .duo{display:flex;gap:4%;height:100%}
.rf.pair video.small{height:62%;align-self:center;aspect-ratio:9/16;width:auto;border:6px solid #ECE5DA}
.rf.pair img{width:auto;flex:1;min-width:0}
.reel-cap p{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin:16px 0 28px;font-size:16px}
.reel-cap .rm{color:var(--amber);font-weight:600}
.reel-cap .rt{color:var(--ivory)}
.reel-still{list-style:none;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding-top:24px;padding-bottom:56px}
.reel-still img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.reel-still p{font-size:14px;margin:8px 0 0}.reel-still b{color:var(--amber);font-weight:600}
/* GRG: stand under the dome */
.lookup{padding-top:72px}
.look-stage{position:relative;height:min(78svh,760px);margin:8px 16px 0;overflow:hidden;background:var(--shadow);cursor:grab;touch-action:pan-y}
@media (min-width:960px){.look-stage{margin:8px 48px 0}}
.look-stage.live{cursor:grab}
.look-stage:active{cursor:grabbing}
.look-still{position:absolute;inset:0;display:grid;place-items:center}
.look-still img{height:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;max-width:100%}
.look-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.look-stage.live .look-still{opacity:0;transition:opacity .8s}
.look-cap{margin-top:14px;font-size:15px;color:var(--dim)}
/* GRC: the sun through the lattice */
.sun{padding-top:72px}
.sun-stage{margin-top:8px}
.sun-scene{position:relative;height:min(70svh,680px);margin:0 16px;background:#1d1e21;overflow:hidden}
@media (min-width:960px){.sun-scene{margin:0 48px}}
.sun-scene .gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s}
.sun-scene.live .gl{opacity:1}
.sun-stills{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sun-stills figure{margin:0;position:relative}
.sun-stills img{width:100%;height:100%;object-fit:cover;display:block}
.sun-stills figcaption{position:absolute;left:10px;bottom:10px;margin:0;padding:4px 8px;background:rgba(23,24,27,.75);font-size:13px;color:var(--ivory)}
.sun-scene.live .sun-stills{opacity:0;transition:opacity .9s}
.sun-scene.still{height:auto}.sun-scene.still .sun-stills{position:static}
@media (max-width:699px){.sun-scene.still .sun-stills{grid-template-columns:1fr}}
.sun-rule{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:center;margin-top:18px;margin-bottom:56px}
.sun-time{font:700 clamp(30px,4vw,52px)/1 Archivo,Arial,sans-serif;color:var(--ivory);min-width:6ch}
.sun-track{position:relative;padding-bottom:24px}
.sun-track input{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:ew-resize;--p:50%}
.sun-track input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--amber) var(--p),rgba(201,138,59,.25) var(--p))}
.sun-track input::-moz-range-track{height:2px;background:rgba(201,138,59,.3)}
.sun-track input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-12px;border-radius:50%;background:radial-gradient(circle,#ffe2a8 0 30%,var(--amber) 32% 100%);border:2px solid var(--shadow);box-shadow:0 0 18px rgba(255,200,120,.6)}
.sun-track input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber);border:2px solid var(--shadow)}
.sun-track input:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.sun-ticks{position:absolute;left:13px;right:13px;bottom:0;height:16px;font-size:12px;color:var(--dim)}
.sun-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
@media (max-width:599px){.sun-rule{grid-template-columns:1fr}.sun-ticks span:nth-child(even){display:none}}
/* Civil: the road in section */
.road{padding-top:72px}
.road-track{position:relative}
.road.live .road-track{height:calc(100svh + 110vh)}
.road-stage{padding:24px 0 56px}
.road.live .road-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:flex;align-items:center;padding:0}
.road-in{position:relative;width:100%}
.road-svg{display:block;width:100%;height:auto;max-height:70svh;overflow:visible}
.road-svg .ln{fill:none;stroke:var(--ivory);stroke-width:1.5}
.road-svg .ln.dash{stroke-dasharray:6 6;stroke:rgba(242,235,225,.55)}
.road-svg .water{fill:rgba(120,160,190,.45)}
.road-svg .labels text{font:500 13px Archivo,Arial,sans-serif;fill:var(--dim)}
.road.live .ly .ln:not(.dash){stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t,0))}
.road.live .ly .ln.dash{opacity:var(--t,0)}
.road.live .ly .fillp{opacity:calc(var(--t,0) * var(--t,0))}
.road.live .lb{opacity:0;transition:opacity .4s}
.road.live .lb.in{opacity:1;fill:var(--ivory)}
.road-photo{margin:24px 0 0;max-width:420px}
.road.live .road-photo{position:absolute;right:0;top:0;margin:0;opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.road.live .road-photo.up{opacity:1;transform:none}
@media (max-width:759px){.road.live .road-photo{position:static;margin-top:12px}}
.record.glyphs li{grid-template-columns:80px 1fr 64px}
@media (min-width:760px){.record.glyphs li{grid-template-columns:100px 1fr 80px}}
.record .glyph{width:60px;height:50px;fill:none;stroke:var(--amber);stroke-width:1.4;stroke-linejoin:round}
.record .glyph path{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.record li.ruled-in .glyph path,.record:not(.ruled) .glyph path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.record .glyph path{stroke-dashoffset:0}}
/* Steel: the frame goes up */
.steelf{padding-top:72px}
.frame-track{position:relative}
.steelf.live .frame-track{height:calc(100svh + 140vh)}
.frame-stage{padding:16px 0 32px}
.steelf.live .frame-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:flex;align-items:center;padding:0}
.frame-stage .wrap{width:100%}
.frame-fig{position:relative;margin:0;aspect-ratio:900/506;max-height:74svh;background:var(--shadow)}
.frame-fig img{width:100%;height:100%;object-fit:cover;display:block}
.frame-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.frame-fig .m{fill:none;stroke:var(--ivory);stroke-width:1.4;stroke-linecap:round}
.frame-fig .m.col{stroke-width:2.2}
.frame-fig .m.br{stroke:rgba(242,235,225,.8);stroke-width:1}
.frame-fig .jt{fill:var(--amber);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.frame-fig .jt.on{opacity:1;transform:none}
.frame-fig figcaption{position:absolute;left:12px;bottom:12px;margin:0;padding:4px 8px;background:rgba(23,24,27,.75);font-size:13px;color:var(--ivory);opacity:var(--photo,1)}
.steelf.live .frame-fig .m{stroke-dasharray:1;stroke-dashoffset:1}
.steelf.live .frame-fig img{opacity:var(--photo,0)}
.steelf.live .frame-fig svg{opacity:var(--lines,1)}
.cnc-row{display:grid;gap:28px;align-items:center;padding-top:40px;padding-bottom:40px}
@media (min-width:760px){.cnc-row{grid-template-columns:minmax(0,360px) 1fr;gap:56px}}
.cnc{width:100%;max-width:360px;overflow:visible}
.cnc .sheet{fill:#3a3b3f;stroke:rgba(242,235,225,.25)}
.cnc .offcut{fill:#3a3b3f}
.cnc .plate{fill:#4a4b50}
.cnc .hole{fill:var(--shadow);stroke:rgba(242,235,225,.3)}
.cnc .kerf{fill:none;stroke:#ffb35a;stroke-width:2.5;filter:drop-shadow(0 0 4px #ff9a2e)}
.cnc.armed .kerf{stroke-dasharray:1;stroke-dashoffset:1}
.cnc.armed .sheet{fill:#3a3b3f}
.cnc.go .kerf{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s linear}
.cnc.go .kerf{animation:kerfOut .5s ease-out 1.6s forwards}
@keyframes kerfOut{to{stroke:rgba(242,235,225,.35);filter:none;stroke-width:1}}
.cnc.go .offcut{animation:drop .7s cubic-bezier(.5,0,.8,.4) 1.8s forwards}
.cnc.go .sheet{animation:gone .01s 1.8s forwards}
@keyframes drop{to{transform:translateY(60px);opacity:0}}
@keyframes gone{to{fill:transparent;stroke:transparent}}
/* Interiors: walk in */
.walk{padding-top:72px}
.walk-track{position:relative}
.walk.live .walk-track{height:calc(100svh + 240vh)}
.walk-stage{position:relative;display:grid;gap:12px;grid-template-columns:1fr 1fr;padding:16px}
.walk.live .walk-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:block;padding:0;overflow:hidden}
.wk{margin:0;overflow:hidden}
.wk img{width:100%;height:100%;object-fit:cover;display:block}
.walk:not(.live) .wk img{aspect-ratio:4/3}
.walk.live .wk{position:absolute;inset:0;opacity:0}
.walk.live .wk img{transform:scale(var(--push,1));transform-origin:50% 55%}
.walk.live .wk.on{opacity:1}
.walk.live .wk.top{z-index:2}
.walk-cap{margin:0}
.walk.live .walk-cap{position:absolute;left:16px;bottom:16px;z-index:3;padding:6px 10px;background:rgba(23,24,27,.75);font-size:14px}
@media (min-width:960px){.walk.live .walk-cap{left:48px;bottom:28px}}
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:48px;padding-bottom:24px}
.split figure{margin:0;position:relative}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.split figure:first-child{border-right:1px solid var(--amber)}
.split figcaption{position:absolute;left:10px;top:10px;margin:0;padding:4px 8px;background:rgba(23,24,27,.75);font-size:13px;color:var(--ivory)}
.split-note{grid-column:1/-1;text-align:center;margin:18px auto 0;font:700 clamp(22px,2.4vw,30px)/1.1 Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;color:var(--ivory)}
.split img{height:auto}

/* =====================================================================
   How we work: eight steps, one take
   ===================================================================== */
.seq{list-style:none;margin:32px 16px 0;padding:0 0 0 18px;display:grid;gap:56px;border-left:1px solid var(--amber)}
@media (min-width:600px){.seq{margin:32px 24px 0}}
.st{display:grid;gap:14px}
.st-ph{margin:0;position:relative;overflow:hidden;aspect-ratio:var(--ar);background:#1d1e21;width:min(100%,calc(70svh * var(--ar)))}
.st-ph img{width:100%;height:100%;object-fit:cover;display:block}
.st-tx .num{font:600 14px/1 Archivo,Arial,sans-serif;color:var(--amber);letter-spacing:.04em;margin-bottom:8px}
.st-tx p:last-child{font-size:16px;max-width:46ch}
.st.hold .st-ph img{transform:translateY(calc(3% - var(--rise,0) * 6%)) scale(1.08)}
.seq-stage{position:relative}
.thread{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;display:none}
.thread path{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(201,138,59,.55))}
.seq-track.live{height:calc(100svh + 460vh)}
.seq-track.live .seq-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));overflow:hidden}
.seq-track.live .seq{display:flex;gap:10vw;align-items:flex-start;margin:0;padding:7svh 0 0;border:0;width:max-content;will-change:transform}
.seq-track.live .st{display:flex;flex-direction:column;gap:18px;opacity:.4;transition:opacity .6s var(--ease)}
.seq-track.live .st.now{opacity:1}
.seq-track.live .st-ph{height:56svh;width:auto}
.seq-track.live .st-tx{max-width:min(46ch,calc(56svh * var(--ar)));min-width:300px}
.seq-track.live .st-tx .num{font-size:40px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.seq-track.live .thread{display:block;will-change:transform}
.seq-btns{margin-top:22px;flex-wrap:wrap}
.seq-track:not(.live) + .wrap .seq-btns{display:none}
.scene.pourable{cursor:pointer}
.scene.pourable::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1.5px solid var(--amber);opacity:.7;pointer-events:none;animation:pourRing 2.4s ease-out infinite}
.scene.pouring::after{animation:none;opacity:0}
@keyframes pourRing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.scene.pourable::after{display:none}}

/* =====================================================================
   About
   ===================================================================== */
.about-head .wrap{display:grid;gap:32px;align-items:end}
@media (min-width:960px){.about-head .wrap{grid-template-columns:1fr auto;gap:64px}}
.yrs{margin:0;display:grid;justify-items:start;gap:10px}
@media (min-width:960px){.yrs{justify-items:end}}
.yrs .count{font:700 clamp(72px,11vw,168px)/.9 Archivo,Arial,sans-serif;font-stretch:100%;letter-spacing:-.04em;color:var(--ivory);font-variant-numeric:tabular-nums}
.yrs .count.tick{animation:tick .12s ease-out}
@keyframes tick{from{transform:translateY(-6px);opacity:.6}}
.yrs-rule{display:block;height:2px;width:100%;background:var(--amber)}
.yrs.armed .yrs-rule{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.yrs.armed .yrs-l{opacity:0;transition:opacity .6s .5s}
.yrs.fin .yrs-rule{transform:none}.yrs.fin .yrs-l{opacity:1}
.yrs-l{font:600 18px Archivo,Arial,sans-serif;color:var(--amber)}
/* timeline: one screen, every year with something to look at */
.tl-sec{padding:88px 0 56px}
@media (min-width:960px){.tl-sec{padding:128px 0 72px}}
.tl-bar{position:relative;height:44px;margin:28px 0 30px}
.tl-line{position:absolute;left:0;right:0;top:12px;height:2px;background:var(--amber);transform-origin:0 50%}
.tl-bar i{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--shadow);border:2px solid var(--amber);transition:transform .3s var(--ease),background .3s}
.tl-bar i.hot{background:var(--amber);transform:scale(1.4)}
.tl-bar .a,.tl-bar .b{position:absolute;top:26px;font-size:13px;color:var(--dim)}
.tl-bar .b{right:0}
.tl-grid{list-style:none;margin:0;padding:0;display:grid;gap:36px 24px;grid-template-columns:1fr}
@media (min-width:600px){.tl-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.tl-grid{grid-template-columns:repeat(5,1fr);gap:44px 24px}}
.tc{display:flex;flex-direction:column;gap:8px}
.tc-vis{aspect-ratio:4/3;margin-bottom:6px;overflow:hidden}
.tc-vis.photo img{width:100%;height:100%;object-fit:cover}
.sheet-vis{display:grid;place-items:center;background:#1d1e21 linear-gradient(rgba(242,235,225,.035) 1px,transparent 1px) 0 0/100% 12px,#1d1e21 linear-gradient(90deg,rgba(242,235,225,.035) 1px,transparent 1px) 0 0/12px 100%;border:1px solid var(--hair)}
.sheet-vis svg{width:84%;height:auto;fill:none;stroke:var(--amber);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
.sheet-vis svg .dash{stroke-dasharray:4 4;stroke:rgba(242,235,225,.45)}
.sheet-vis svg text{fill:var(--amber);stroke:none;font:700 15px Archivo,Arial,sans-serif}
.tc .d{font:700 clamp(26px,2.4vw,34px)/1 Archivo,Arial,sans-serif;color:var(--amber);letter-spacing:-.02em}
.tc .w{font-size:16px;line-height:1.5}
.tc .w b{font-family:Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;color:var(--ivory)}
.tl-sec.armed .tl-line{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.5,0,.2,1)}
.tl-sec.armed .tl-bar i{opacity:0;transform:scale(0);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1),background .3s;transition-delay:calc(var(--i) * 110ms + .3s)}
.tl-sec.armed .tc{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 90ms + .5s)}
.tl-sec.armed .sheet-vis svg *{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.8s var(--ease);transition-delay:calc(var(--i) * 90ms + .8s)}
.tl-sec.armed .sheet-vis svg .dash{stroke-dasharray:4 4;stroke-dashoffset:0;opacity:0;transition:opacity .6s calc(var(--i) * 90ms + 1.8s)}
.tl-sec.armed .sheet-vis svg text{opacity:0;transition:opacity .5s calc(var(--i) * 90ms + 1.6s)}
.tl-sec.armed.in .tl-line{transform:none}
.tl-sec.armed.in .tl-bar i{opacity:1;transform:none}
.tl-sec.armed.in .tl-bar i.hot{transform:scale(1.4)}
.tl-sec.armed.in .tc{opacity:1;transform:none}
.tl-sec.armed.in .sheet-vis svg *{stroke-dashoffset:0}
.tl-sec.armed.in .sheet-vis svg .dash,.tl-sec.armed.in .sheet-vis svg text{opacity:1}
/* leadership bands */
.band{display:grid;gap:28px;padding:48px 0;border-top:1px solid var(--hair);align-items:center}
@media (min-width:960px){.band{grid-template-columns:7fr 4fr;gap:72px;padding:72px 0}}
.band-name{font-size:clamp(40px,6vw,84px);line-height:.95;letter-spacing:-.03em;margin:0 0 14px}
.band .role{font:600 16px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:22px}
.band-text p:not(.role){font-size:18px}
.piece{margin:0;position:relative}
.piece.setout-fig{aspect-ratio:3/4}
.piece figcaption{margin-top:10px;font-size:13px}
.piece.setout-fig figcaption,.aerial-piece figcaption{position:absolute;left:0;right:0;top:100%}
.aerial-piece{aspect-ratio:900/506;overflow:visible}
.aerial-piece img{width:100%;height:100%;object-fit:cover;display:block}
.aerial-piece svg{position:absolute;inset:0;width:100%;height:100%}
.aerial-piece polygon{fill:rgba(201,138,59,.14);stroke:#C98A3B;stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease) .3s}
.aerial-piece.drawn polygon{stroke-dashoffset:0}
.lamp-scene.small{aspect-ratio:640/1053;max-width:min(360px,100%);max-height:none;margin:0}
.band.spd{border-top:0}
/* the globe */
.globe-track.live{height:calc(100svh + 170vh)}
.globe-stage{position:relative}
.globe-track.live .globe-stage{position:sticky;top:var(--head);height:calc(100svh - var(--head));overflow:hidden}
.globe{position:relative;margin:0 auto;width:min(100%,900px);aspect-ratio:1;max-height:100%;transform-origin:50% 50%}
.globe-track.live .globe{height:100%;width:auto;max-width:100%}
.globe .gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s}
.globe.on .gl{opacity:1}
.globe-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.globe.on .globe-still{opacity:0}
.globe-track:not(.live):not(.still) .globe{display:none}
.globe-track.still .globe{max-width:520px;margin:0 auto}
.globe-track.still .glabel{display:none}
.glabel{position:absolute;left:0;top:0;margin:-34px 0 0 14px;padding:4px 10px;background:rgba(23,24,27,.8);border-left:2px solid var(--amber);font-size:14px;color:var(--dim);white-space:nowrap;opacity:0;transition:opacity .5s;pointer-events:none}
.glabel b{color:var(--ivory);font-weight:600;margin-right:6px}
/* departments as a title block */
.tblock{display:grid;grid-template-columns:1fr;margin-top:28px;position:relative}
@media (min-width:760px){.tblock{grid-template-columns:1fr 1fr}}
.tblock>div{padding:24px 24px 20px;position:relative}
.tblock>div::before,.tblock>div::after{content:"";position:absolute;background:var(--hair);transition:transform 1.1s var(--ease)}
.tblock>div::before{left:0;right:0;bottom:0;height:1px}
.tblock>div::after{top:0;bottom:0;right:0;width:1px}
@media (min-width:760px){.tblock>div:nth-child(2n)::after{display:none}.tblock>div:nth-child(n+3)::before{display:none}}
@media (max-width:759px){.tblock>div::after{display:none}.tblock>div:last-child::before{display:none}}
.tblock{border:1px solid var(--hair)}
.tblock .n{display:block;font:600 13px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:10px;letter-spacing:.06em}
.tblock p{font-size:16px;color:var(--dim);margin:0}
.tblock.armed>div::before{transform:scaleX(0);transform-origin:50% 50%}
.tblock.armed>div::after{transform:scaleY(0);transform-origin:50% 50%}
.tblock.armed.in>div::before,.tblock.armed.in>div::after{transform:none}
.ledger .y{font-size:15px}
.glabel{z-index:2}

/* =====================================================================
   Contact: the enquiry as a title block
   ===================================================================== */
.sheet-wrap{position:relative;margin-top:28px}
.sheet form{display:grid;grid-template-columns:1fr;gap:0;max-width:640px;border:1px solid rgba(242,235,225,.55)}
@media (min-width:600px){.sheet form{grid-template-columns:1fr 1fr}}
.sheet .tb-head{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;border-bottom:1px solid rgba(242,235,225,.55);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.sheet .tb-head span{padding:10px 14px}
.sheet .tb-head span+span{border-left:1px solid rgba(242,235,225,.55)}
.sheet .tb-head b{color:var(--ivory);font-weight:600;letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums}
.sheet .tb-t{color:var(--amber) !important}
.sheet .f{padding:12px 14px 14px;gap:4px;position:relative;box-shadow:inset -1px -1px 0 rgba(242,235,225,.3);transition:box-shadow .35s var(--ease)}
.sheet .f.filled{box-shadow:inset -1px -1px 0 rgba(242,235,225,.75),inset 0 0 0 1px rgba(242,235,225,.25)}
.sheet .f>label,.sheet legend{font:600 11px Archivo,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.sheet legend{padding-top:12px}
.sheet fieldset.f{grid-column:1/-1;padding-top:0}
.sheet input[type=text],.sheet input[type=tel],.sheet select{border:0;border-bottom:1px solid rgba(242,235,225,.3);border-radius:0;min-height:44px;padding:0 2px;font-size:18px}
.sheet select{background-position:right 4px center}
.sheet .opt{border-width:1px}
.sheet .help{font-size:13px}
.sheet .err{font-size:14px}
.sheet .is-err input[type=text],.sheet .is-err input[type=tel],.sheet .is-err select,.sheet .is-err .opts{outline:none;border-bottom-color:var(--orange)}
.sheet .is-err{box-shadow:inset 0 0 0 2px var(--orange)}
.sheet form>div:last-child{grid-column:1/-1;padding:16px 14px}
.sheet form.sent{opacity:.55}
.sheet .done{margin-top:24px}
.stamp{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-7deg);display:grid;justify-items:center;gap:2px;padding:12px 22px 10px;border:4px solid var(--orange);border-radius:4px;color:var(--orange);font:600 13px Archivo,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:rgba(23,24,27,.35);pointer-events:none;mix-blend-mode:screen}
.stamp b{font:800 clamp(34px,5vw,52px)/1 Archivo,Arial,sans-serif;letter-spacing:.08em}
.clock{border-top:2px solid var(--amber);padding-top:16px;margin-bottom:28px}
.clock-now{margin:0 0 6px;font-size:14px;color:var(--dim)}
.clock-now b{color:var(--ivory);font-size:28px;font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums}
.clock-line{margin:0;font-size:17px}
.clock-line b{color:var(--ivory)}
.omap{display:block;width:100%;max-width:300px;height:auto;margin:0 0 20px}
.omap .coast{fill:rgba(242,235,225,.035);stroke:rgba(242,235,225,.55);stroke-width:.9}
.omap .link{fill:none;stroke:var(--amber);stroke-width:1.2;stroke-dasharray:4 4}
.omap .dot{fill:var(--amber)}
.omap .ring{fill:transparent;stroke:var(--amber);stroke-width:1;opacity:.5}
.omap a:hover .ring,.omap a:focus-visible .ring{opacity:1}
.omap text{font:600 11px Archivo,Arial,sans-serif;fill:var(--ivory)}
.sheet .f{align-content:start}

/* =====================================================================
   Privacy and the missing page
   ===================================================================== */
.readbar{position:fixed;left:0;right:0;top:var(--head);height:2px;z-index:49;pointer-events:none}
.readbar i{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:0 50%}
.nf{padding:72px 0 96px}
.nf-in{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.nf-in{grid-template-columns:5fr 6fr;gap:64px}}
.nf-draw{display:grid;justify-items:center;gap:16px}
.nf-svg{width:100%;max-width:520px;height:auto;overflow:visible;touch-action:none}
.nf-lines line,.nf-lines circle{fill:none;stroke:rgba(242,235,225,.3);stroke-width:.8}
.nf-ring path,.nf-piece path{fill:rgba(242,235,225,.06);stroke:var(--ivory);stroke-width:1.2}
.nf-ring .d circle,.nf-piece .d circle{fill:var(--amber)}
.nf-gap{fill:none;stroke:rgba(242,235,225,.35);stroke-width:1;stroke-dasharray:3 4}
.nf-piece{cursor:grab}
.dragging .nf-piece{cursor:grabbing}
.dragging .nf-piece path{stroke:var(--amber)}
.whole .nf-piece{cursor:default}
.whole .nf-gap{opacity:0;transition:opacity .3s}
.nf-flash{fill:none;stroke:var(--amber);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.nf-flash.on{animation:nfFlash .7s ease-out both}
@keyframes nfFlash{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.reel-still img{height:auto}
/* the directors, together, on the plain ground */
.pair-sec{padding-top:24px}
.pair{position:relative;margin:0 auto;max-width:720px}
.pair-glow{position:absolute;left:4%;right:4%;top:6%;bottom:-6%;background:radial-gradient(50% 58% at 50% 62%,rgba(201,138,59,.20),rgba(201,138,59,.06) 55%,transparent 75%);pointer-events:none}
.pair img{position:relative;display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);filter:saturate(.9) sepia(.07) contrast(.96) brightness(.97)}
.pair.armed .pair-glow{opacity:0;transition:opacity 1.6s ease-out}
.pair.armed img{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.pair.armed.in .pair-glow{opacity:1}
.pair.armed.in img{opacity:1;transform:none}
.pair-cols{display:grid;gap:48px;max-width:1040px;margin:8px auto 0}
@media (min-width:760px){.pair-cols{grid-template-columns:1fr 1fr;gap:64px}}
.pcol .band-name{font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.03em;margin:0 0 12px}
.pcol .role{font:600 15px Archivo,Arial,sans-serif;color:var(--amber);margin-bottom:18px}
.pcol>p:not(.role):not(.mini-l){font-size:17px}
.mini-l{margin:26px 0 10px;font:600 12px Archivo,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.mini-work{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-work a{display:block;text-decoration:none;color:var(--ivory)}
.mini-work .photo{aspect-ratio:4/3;margin-bottom:6px}
.mini-work span{display:block;font-size:13px;line-height:1.3;color:var(--dim)}
.mini-work a:hover span{color:var(--ivory)}

.map .ghost{cursor:pointer}
.map .ghost:not(.on){pointer-events:none}
.map-label:has(.close){border-color:var(--amber)}
.map-label a[data-rec]{text-decoration-style:dotted}
.record li.flash{animation:recFlash 2.2s ease-out}
@keyframes recFlash{0%,30%{background:rgba(201,138,59,.22)}100%{background:transparent}}
.record li:focus{outline:none}
/* register entries (no page of their own) are hollow; projects with a page are solid */
.map .pt.rec-only .dot{fill:var(--shadow);stroke:var(--amber);stroke-width:1.6}
.map .pt.rec-only.hot .dot,.map .pt.rec-only:focus-visible .dot{fill:var(--amber)}
.map .ghost.rec-only{fill:none;stroke:var(--amber);stroke-width:.8}
.map-key{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;font:500 13px Archivo,Arial,sans-serif;color:var(--dim)}
.map-key span{display:inline-flex;align-items:center;gap:8px}
.map-key i{width:10px;height:10px;border-radius:50%;background:var(--amber)}
.map-key i.h{background:transparent;border:1.6px solid var(--amber)}
.map .pt .ring,.map .pt .dot{pointer-events:none}

/* the globe as Osimkhon's story */
.globe-track{margin-top:72px}
.globe-track.live{height:calc(100svh + 260vh)}
.globe-track.live .globe-stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:32px;padding:0 48px;max-width:1440px;margin:0 auto}
.globe-track.live .globe{height:min(100%,86svh);width:auto;max-width:100%;justify-self:center}
.gstory{max-width:440px}
.gface{width:84px;height:84px;border-radius:50%;border:2px solid var(--amber);background:#232428 url(/public/people/directors.webp) no-repeat;background-size:330px auto;background-position:-38px -12px;margin-bottom:22px}
.gstory .chapter{margin-bottom:22px}
.gsteps{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--hair);display:grid;gap:18px}
.gsteps li{font-size:18px;line-height:1.5;color:var(--dim);opacity:.35;transition:opacity .5s var(--ease),color .5s var(--ease)}
.gsteps li b{font-family:Archivo,Arial,sans-serif;font-stretch:90%;font-variation-settings:'wdth' 90;color:var(--ivory)}
.gsteps li.past{opacity:.6}
.gsteps li.on{opacity:1;color:var(--ivory)}
.globe-track.still .globe-stage,.globe-track:not(.live) .globe-stage{display:grid;gap:28px;padding:0 16px}
.globe-track:not(.live) .gsteps li{opacity:1}
@media (max-width:899px){
  .globe-track.live .globe-stage{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:0 16px 20px;gap:8px}
  .globe-track.live .globe{height:auto;width:min(100%,62svh);order:-1}
  .globe-track.live .gface{display:none}
  .globe-track.live .gstory .chapter{margin-bottom:10px}
  .globe-track.live .gsteps{border:0;padding:0;min-height:5.2em}
  .globe-track.live .gsteps li{grid-area:1/1;opacity:0}
  .globe-track.live .gsteps li.on{opacity:1}
  .globe-track.live .gsteps{display:grid}
}
@media (max-width:899px){
  .globe-track.live .globe-stage{padding-bottom:calc(100px + env(safe-area-inset-bottom));align-content:center}
  .globe-track.live .gsteps li,.globe-track.live .gsteps li.past{opacity:0}
  .globe-track.live .gsteps li.on{opacity:1}
  .globe-track.live .gsteps li{font-size:17px}
}
@media (max-width:899px) and (min-width:960px){.globe-track.live .globe-stage{padding-bottom:20px}}
@media (max-width:899px){.globe-track.live .gsteps li{transition:opacity .18s ease-in}.globe-track.live .gsteps li.on{transition:opacity .4s ease-out .2s}}
/* arriving with a carried photograph: the gradient darkens in over it, then the words rise, as on a fresh load */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(ph-scrim),::view-transition-group(ph-text){animation-duration:.9s}
  ::view-transition-new(ph-scrim){animation:vtScrim .9s cubic-bezier(.3,0,.2,1) both}
  ::view-transition-new(ph-text){animation:vtText .9s cubic-bezier(.2,.7,.2,1) .25s both}
  @keyframes vtScrim{from{opacity:0}}
  @keyframes vtText{from{opacity:0;transform:translateY(14px)}}
}