/* ==========================================================================
   IRCON LTD. — version 2
   Direction: light, architectural, precise. Daylight rather than darkness.
   Ground is a pale architectural white; the accent is the logo's teal, used
   sparingly; depth comes from real project photography, not from black.
   Signature element: the span line, a truss profile drawn down the page.
   Motif: CAD leader annotations, from Ircon's own BIM viewport captures.
   ========================================================================== */

:root{
  /* Ground and surfaces */
  --canvas:#F5F7F8;          /* never pure white */
  --canvas-2:#FFFFFF;        /* cards and raised surfaces */
  --canvas-deep:#E9EDEF;     /* the alternating band */
  --wash:#E4F1F2;            /* faint teal wash for feature grounds */

  /* Ink. Contrast measured against --canvas. */
  --ink:#151A1E;             /* 16:1  */
  --ink-2:#59656D;           /* 5.5:1 */
  --ink-3:#8A959B;           /* decorative only, never body copy */

  /* Accent: the logo teal */
  --accent:#1C6E73;          /* 5.6:1, safe for text and links */
  --accent-bright:#2E8B90;   /* the logo value, for fills and large marks */
  --accent-hi:#7FC9CE;       /* light blue, highlights and glows */
  --accent-muted:rgba(46,139,144,.16);

  --line:rgba(21,26,30,.12);
  --line-strong:rgba(21,26,30,.26);

  /* Type */
  --display:"Unbounded",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Dark type over bright footage needs a light halo, not a drop shadow. */
  --thalo:0 1px 0 rgba(255,255,255,.72),0 2px 14px rgba(255,255,255,.88),
          0 8px 40px rgba(255,255,255,.72);

  --gutter:clamp(20px,5vw,64px);
  --maxw:1280px;
  --shadow-1:0 1px 2px rgba(21,26,30,.05),0 6px 20px rgba(21,26,30,.06);
  --shadow-2:0 2px 6px rgba(21,26,30,.07),0 18px 48px rgba(21,26,30,.10);
}

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.68;-webkit-font-smoothing:antialiased;
}

/* One fixed environment layer, so scrolling feels like one place. */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 760px at 18% 6%,rgba(127,201,206,.16),transparent 64%),
    radial-gradient(900px 620px at 86% 74%,rgba(46,139,144,.09),transparent 66%);
  animation:envdrift 90s var(--ease) -20s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-1.4%,-1%,0) scale(1.02)}
  to  {transform:translate3d(1.4%,1.2%,0) scale(1.06)}
}
.page{position:relative;z-index:1}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:#fff;padding:12px 18px;font-family:var(--mono);font-size:13px}
.skip:focus{left:12px;top:12px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Type ---------- */

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.07;
  letter-spacing:-.018em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.45rem);font-weight:600}
p{margin:0 0 1.1em}

/* The CAD leader annotation, from Ircon's own viewport captures. */
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin:0 0 18px}
.kicker::before{content:"";width:clamp(24px,4vw,56px);height:1px;flex:none;
  background:linear-gradient(90deg,var(--accent-bright),transparent)}
.kicker.mid{justify-content:center}

.lede{font-size:clamp(1.02rem,1.15vw,1.2rem);color:var(--ink-2);max-width:62ch}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative;padding-block:clamp(66px,9vw,136px)}

/* ---------- Header ---------- */

.hdr{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:24px;padding:12px var(--gutter);
  background:rgba(245,247,248,0);border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),
             backdrop-filter .5s var(--ease),padding .5s var(--ease)}
.hdr.stuck{background:rgba(250,251,251,.92);border-bottom-color:var(--line);
  backdrop-filter:blur(14px) saturate(1.05);padding-block:9px}
.brand{display:flex;align-items:center;flex:none}
/* Dark-on-white artwork needs no plate on a light ground, and it can be larger. */
.brand img{height:54px;width:auto;display:block;transition:height .5s var(--ease),transform .4s var(--ease)}
.hdr.stuck .brand img{height:46px}
.brand:hover img{transform:translateY(-1px)}
@media (max-width:900px){.brand img,.hdr.stuck .brand img{height:42px}}

.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);margin-left:auto}
.nav a{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);padding:8px 2px;position:relative;
  transition:color .35s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--accent-bright);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.lang{display:flex;gap:2px;margin-left:10px;flex:none;
  border:1px solid var(--line-strong);border-radius:999px;padding:3px;
  background:rgba(255,255,255,.7)}
.lang a,.lang span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  line-height:1;padding:6px 11px;border-radius:999px;color:var(--ink-2);
  transition:background .35s var(--ease),color .35s var(--ease)}
.lang [aria-current="true"]{background:var(--accent);color:#fff}
.lang a:hover{color:var(--ink)}

.burger{display:none;margin-left:auto;background:rgba(255,255,255,.75);
  border:1px solid var(--line-strong);color:var(--ink);
  width:44px;height:38px;border-radius:6px;cursor:pointer;
  align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:18px;height:1px;background:currentColor}
.burger span::before{top:-5px}
.burger span::after{top:5px}

@media (max-width:900px){
  .nav{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;padding:8px var(--gutter) 22px;background:rgba(250,251,251,.98);
    backdrop-filter:blur(16px);border-bottom:1px solid var(--line);margin-left:0}
  .nav[hidden]{display:none}
  .nav a{padding:13px 0;width:100%;font-size:.84rem}
  .burger{display:inline-flex}
  .lang{position:fixed;top:16px;right:74px;margin:0}
}

/* ==========================================================================
   THE HERO — bright footage, dark type, light scrims
   ========================================================================== */

.hero{position:relative;height:620vh;padding:0}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-deep)}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .9s var(--ease)}
.stage.video-ready .poster{opacity:0}
.stage.video-failed video{display:none}

/* Layer 1: the always-on base scrim. Light, because the type is dark. */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(245,247,248,.60) 0%,rgba(245,247,248,0) 24%),
    radial-gradient(ellipse 130% 86% at 50% 94%,rgba(245,247,248,.82) 0%,rgba(245,247,248,0) 62%)}

.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;left:0;right:0;padding-inline:var(--gutter);opacity:0;
  text-shadow:var(--thalo);color:var(--ink)}
/* Layer 2: the per-band scrim, riding the band's own progress. */
.band::before{content:"";position:absolute;inset:-7% -4%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 78% 66% at 50% 50%,
             rgba(248,250,250,.92) 0%,rgba(248,250,250,.68) 46%,rgba(248,250,250,0) 78%)}
.band-inner{max-width:var(--maxw);margin-inline:auto}
.band-1,.band-2,.band-3{bottom:15vh}
.band-4{top:50%;transform:translateY(-50%);text-align:center}

.beat{font-family:var(--display);font-weight:600;
  font-size:clamp(1.55rem,3.6vw,3rem);line-height:1.14;letter-spacing:-.022em;
  max-width:21ch;margin:0}
.band-4 .beat{max-width:23ch;margin-inline:auto;font-weight:700}
.settle-sub{font-size:clamp(.98rem,1.15vw,1.14rem);color:var(--ink-2);
  margin:20px auto 0;max-width:56ch;opacity:var(--ks,0)}
.settle-cta{margin-top:28px;opacity:var(--kb,0)}
/* .bands turns pointer events off so the captions never intercept the
   footage. Anything clickable inside a band must turn them back on. */
.band a,.band button{pointer-events:auto}

.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* Positioning lives on the line, never on the band: .e-blur sits on the band and
   would otherwise cancel .band{position:absolute} at equal specificity. */
.e-blur .beat{position:relative;display:block}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp{opacity:var(--k,0)}
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*26px))}
/* Approach from depth: echoes the camera pushing through the hangar. */
.e-depth .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);
  opacity:var(--kc);transform:scale(calc(.88 + .12*var(--kc)))}

.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2);transition:opacity .6s var(--ease)}
.scroll-cue .rail{width:1px;height:34px;background:var(--line-strong);
  position:relative;overflow:hidden}
.scroll-cue .rail::after{content:"";position:absolute;left:0;top:-34px;width:1px;height:34px;
  background:linear-gradient(180deg,transparent,var(--accent));
  animation:railrun 2.6s var(--ease) infinite}
@keyframes railrun{to{transform:translateY(68px)}}

.ring{position:absolute;right:var(--gutter);bottom:28px;width:34px;height:34px;
  color:var(--accent);opacity:.9;transform:rotate(-90deg)}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease)}
@media (max-height:560px){.scroll-cue{display:none}}

/* The static hero. A designed layout, not an apology. */
.static-hero{display:none;position:relative;min-height:88vh;padding:0;
  align-items:flex-end;overflow:hidden}
.static-hero .shot{position:absolute;inset:0}
.static-hero .shot img{width:100%;height:100%;object-fit:cover}
.static-hero .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(245,247,248,.28) 0%,rgba(245,247,248,.74) 54%,var(--canvas) 100%)}
.static-hero .sh-inner{position:relative;padding-block:0 clamp(48px,9vw,96px)}
.static-hero h1{max-width:17ch;text-shadow:var(--thalo)}
.static-hero .lede{margin-top:18px;max-width:46ch;color:var(--ink-2)}
.static-hero .btn{margin-top:26px}

/* Phones run the scrub too, on the portrait cut of the footage; only reduced
   motion keeps the still hero. (site.js has the same query.) */
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}
/* A phone's scroll is shorter, and its browser bar covers the bottom of the
   screen until the page is scrolled: the lines sit above it (svh is the screen
   with the bar showing, lvh without it). */
@media (max-width:860px){
  .hero{height:500vh}
  .band-1,.band-2,.band-3{bottom:17vh}
  .beat{font-size:clamp(1.6rem,7.4vw,2.1rem)}
  .settle-sub{font-size:1rem;max-width:34ch}
}
@supports (height:100svh){
  @media (max-width:860px){
    .band-1,.band-2,.band-3{bottom:calc(100lvh - 100svh + 13svh)}
    .scroll-cue{bottom:calc(100lvh - 100svh + 20px)}
    .ring{bottom:calc(100lvh - 100svh + 24px)}
  }
}

/* ==========================================================================
   THE SPAN LINE
   ========================================================================== */

.spine{position:absolute;left:calc(var(--gutter) / 2);top:0;bottom:0;width:34px;
  pointer-events:none;z-index:0;opacity:.8}
.spine svg{height:100%;width:100%}
.spine path,.spine line{stroke:var(--accent-bright);stroke-width:1;fill:none;opacity:.5;
  stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000)}
.spine.drawn path,.spine.drawn line{transition:stroke-dashoffset 2.4s var(--ease-out);
  stroke-dashoffset:0}
.spine circle{fill:var(--accent-bright);opacity:0;transition:opacity .7s var(--ease) .5s}
.spine.drawn circle{opacity:.8}
@media (max-width:1100px){.spine{display:none}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:.77rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border-radius:2px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff;text-shadow:none;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{background:#175A5E;border-color:#175A5E;transform:translateY(-2px);box-shadow:var(--shadow-1)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent);box-shadow:none}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ==========================================================================
   SECTIONS. No two neighbours share a skeleton.
   ========================================================================== */

/* --- 30 Years: centred, one focal object, teal wash ground --- */
.anniversary{text-align:center;overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(180deg,var(--canvas) 0%,var(--wash) 50%,var(--canvas) 100%)}
.anniversary .years{font-family:var(--mono);font-size:.8rem;letter-spacing:.42em;
  color:var(--accent);margin-bottom:20px}
.anniversary .plate{display:inline-block;max-width:min(560px,84vw);margin:0 auto 32px;
  padding:10px;background:var(--canvas-2);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.anniversary .mark{width:100%;height:auto;display:block}
.anniversary p{max-width:48ch;margin-inline:auto;color:var(--ink-2);
  font-size:clamp(1rem,1.2vw,1.16rem)}

/* --- Capabilities: numbered rows, each with a real project photograph --- */
.caps{display:grid;gap:0;margin-top:44px;border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:auto 1fr 250px;gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);
  align-items:center;transition:background .5s var(--ease)}
.cap:hover{background:rgba(46,139,144,.05)}
.cap .n{font-family:var(--mono);font-size:.75rem;color:var(--accent);
  letter-spacing:.1em;align-self:start;padding-top:6px}
.cap h3{margin-bottom:8px}
.cap p{color:var(--ink-2);margin:0;max-width:64ch;font-size:.96rem}
/* the list a service paragraph introduces ("… including:") */
.svc-list{list-style:none;margin:12px 0 0;padding:0;max-width:64ch;color:var(--ink-2);font-size:.94rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:6px 24px}
.svc-list li{position:relative;padding-left:16px;line-height:1.45}
.svc-list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--accent)}
/* the text column may shrink to the screen; the list must never widen it */
.caps{grid-template-columns:minmax(0,1fr)}
.cap > div,.svc .row .txt{min-width:0}
.cap .shot{aspect-ratio:16/10;overflow:hidden;border-radius:2px;
  background:var(--canvas-deep);box-shadow:var(--shadow-1)}
.cap .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cap:hover .shot img{transform:scale(1.06)}
@media (max-width:900px){
  .cap{grid-template-columns:auto 1fr}
  .cap .shot{display:none}
}

/* --- Projects --- */
.pgrid{display:grid;gap:clamp(16px,2vw,26px);margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.pcard{position:relative;display:block;background:var(--canvas-2);
  border:1px solid var(--line);overflow:hidden;border-radius:2px;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
/* The browser's [hidden]{display:none} loses to any author display rule, so the
   filter needs this or cards stay on screen while the count says otherwise. */
.pcard[hidden]{display:none}
.pcard:hover{border-color:var(--accent-hi);transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pcard .shot{aspect-ratio:4/3;overflow:hidden;background:var(--canvas-deep)}
.pcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcard:hover .shot img{transform:scale(1.05)}
.pcard .meta{padding:20px 22px 24px}
.pcard h3{font-size:1rem;line-height:1.3;margin-bottom:9px}
.pcard .facts{font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;
  color:var(--ink-3);text-transform:uppercase;display:flex;flex-wrap:wrap;gap:5px 14px}
.pcard .facts .yr{color:var(--accent)}
.pcard .shot.empty{display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,rgba(21,26,30,.04) 0 12px,transparent 12px 24px),
             var(--canvas-deep)}
.pcard .shot.empty span{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

/* --- Awards --- */
.arail{display:grid;gap:clamp(14px,1.8vw,22px);margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.acard{border:1px solid var(--line);background:var(--canvas-2);overflow:hidden;
  display:flex;flex-direction:column;border-radius:2px;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.acard:hover{border-color:var(--accent-hi);box-shadow:var(--shadow-1)}
.acard .shot{aspect-ratio:3/2;background:var(--canvas-deep);overflow:hidden}
.acard .shot img{width:100%;height:100%;object-fit:cover}
.acard .meta{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.acard h3{font-size:.96rem;line-height:1.32;margin-bottom:10px}
.acard p{font-size:.87rem;color:var(--ink-2);margin:0}

/* --- Clients and partners --- */
.logowall{display:grid;gap:12px;margin-top:34px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr))}
.logowall .chip{background:var(--canvas-2);border:1px solid var(--line);border-radius:3px;
  display:grid;place-items:center;padding:20px 18px;min-height:96px;
  filter:grayscale(1);opacity:.78;
  transition:filter .5s var(--ease),opacity .5s var(--ease),
             transform .5s var(--ease),box-shadow .5s var(--ease)}
.logowall .chip:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px);box-shadow:var(--shadow-1)}
.logowall .chip img{max-height:52px;width:auto;object-fit:contain}

/* --- Contact --- */
.csplit{display:grid;gap:clamp(30px,5vw,72px);margin-top:44px;grid-template-columns:1.15fr .85fr}
@media (max-width:860px){.csplit{grid-template-columns:1fr}}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:.69rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:9px}
.field input,.field textarea{width:100%;background:var(--canvas-2);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:2px;padding:13px 15px;
  font-family:var(--body);font-size:.97rem;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.formnote{font-size:.85rem;color:var(--ink-3);margin-top:14px;max-width:52ch}
.cdetails dl{margin:0;display:grid;gap:22px}
.cdetails dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.cdetails dd{margin:0;font-size:1rem;line-height:1.6}
.cdetails a:hover{color:var(--accent)}

/* ---------- Footer ---------- */

.ftr{border-top:1px solid var(--line);padding-block:clamp(44px,6vw,68px) 34px;
  background:var(--canvas-deep)}
.ftr .cols{display:grid;gap:clamp(26px,4vw,54px);grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:820px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr .cols{grid-template-columns:1fr}}
.ftr img.mark{height:58px;width:auto;margin-bottom:18px;display:block}
.ftr h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:400;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:var(--ink-2);transition:color .35s var(--ease)}
.ftr a:hover{color:var(--ink)}
.ftr .base{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;
  font-family:var(--mono);font-size:.67rem;letter-spacing:.08em;color:var(--ink-3)}

/* ==========================================================================
   DETAIL PAGES
   ========================================================================== */

.phead{padding-top:clamp(126px,15vh,184px)}
.phead h1{max-width:20ch}
.pfacts{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.pfacts div{min-width:130px}
.pfacts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.pfacts dd{margin:0;font-size:.98rem}
.pbody{max-width:66ch;margin-top:34px;font-size:1.02rem}
.pbody p{color:var(--ink-2)}
.pbody p:first-child{color:var(--ink);font-size:1.12rem;line-height:1.6}
.bullets{color:var(--ink-2);padding-left:1.1em}
.bullets li{margin-bottom:.4em}

.gallery{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(38px,5vw,64px)}
.gallery img{width:100%;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow-1)}
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery img:first-child{grid-column:1 / -1}
}

.pnav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(44px,6vw,86px);padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase}
.pnav a{color:var(--ink-2);transition:color .35s var(--ease)}
.pnav a:hover{color:var(--accent)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.filters button{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;
  text-transform:uppercase;background:var(--canvas-2);border:1px solid var(--line);
  color:var(--ink-2);padding:9px 16px;border-radius:2px;cursor:pointer;min-height:38px;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.filters button:hover{border-color:var(--accent-hi);color:var(--ink)}
.filters button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
@media (pointer:coarse){.filters button{min-height:44px}}

/* ---------- Timeline, with imagery ---------- */

.tl{margin-top:44px;position:relative;padding-left:clamp(26px,4vw,62px)}
.tl::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-strong) 10%,var(--line-strong) 90%,transparent)}
.tl .ev{position:relative;padding-bottom:clamp(30px,4vw,54px)}
.tl .ev::before{content:"";position:absolute;left:calc(-1 * clamp(26px,4vw,62px));top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--canvas);
  border:1px solid var(--accent-bright);transform:translateX(-4px)}
.tl .ev.key::before{background:var(--accent-bright);box-shadow:0 0 0 5px var(--accent-muted)}
.tl .yr{font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;
  color:var(--accent);margin-bottom:8px}
.tl h3{margin-bottom:8px}
.tl p{color:var(--ink-2);max-width:62ch;margin:0}
.tl .ev.has-shot{display:grid;grid-template-columns:1fr 330px;
  gap:clamp(20px,3vw,44px);align-items:start}
.tl .ev .shot{border-radius:2px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-1);aspect-ratio:4/3}
.tl .ev .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tl .ev:hover .shot img{transform:scale(1.05)}
@media (max-width:860px){
  .tl .ev.has-shot{grid-template-columns:1fr}
  .tl .ev .shot{max-width:420px;margin-top:16px}
}

/* ---------- Services, with imagery ---------- */

.svc{display:grid;gap:clamp(44px,6vw,92px);margin-top:48px}
.svc .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.svc .row.flip .txt{order:2}
.svc .shot{border-radius:2px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-2);aspect-ratio:4/3}
.svc .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.svc .row:hover .shot img{transform:scale(1.05)}
.svc h3{font-size:clamp(1.3rem,2vw,1.9rem);margin-bottom:14px}
.svc p{color:var(--ink-2);margin:0;max-width:56ch}
@media (max-width:860px){
  .svc .row{grid-template-columns:1fr}
  .svc .row.flip .txt{order:0}
}

/* A photographic band that breaks up long stretches of text */
.strip{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:0}
.strip .track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr)}
.strip .track img{width:100%;height:clamp(180px,26vh,300px);object-fit:cover;filter:saturate(.94)}

/* ==========================================================================
   ENTRANCES
   ========================================================================== */

/* Entrances are opt-in. Without the root class the content is simply visible,
   so a JS failure, an old browser, or a throttled observer can never leave the
   page blank. */
.js .rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in:nth-child(2){transition-delay:.07s}
.rv.in:nth-child(3){transition-delay:.14s}
.rv.in:nth-child(4){transition-delay:.21s}
.rv.in:nth-child(5){transition-delay:.28s}
.rv.in:nth-child(6){transition-delay:.35s}
.rv.in.settled:nth-child(n){transition-delay:0s!important}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .env{animation:none}
  .spine path,.spine line{stroke-dashoffset:0}
  .spine circle{opacity:.8}
  .scroll-cue .rail::after{animation:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ==========================================================================
   FEATURE PROJECT — a pinned, scroll-scrubbed moment for one flagship project,
   followed by the real photographs that prove it.
   ========================================================================== */

.feature{padding:0;border-block:1px solid var(--line);background:var(--canvas-deep)}
.fpin{position:relative;height:340vh}
.fsticky{position:sticky;top:0;height:100vh;overflow:hidden}
.fstage{position:absolute;inset:0;background:#0E1417}
.fstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.fstage.video-ready video{opacity:1}
.fposter{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--ease)}
.fstage.video-ready .fposter{opacity:0}
.fstage.video-failed video{display:none}
.fscrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,12,14,.82) 0%,rgba(8,12,14,.55) 38%,rgba(8,12,14,0) 68%),
             linear-gradient(0deg,rgba(8,12,14,.6) 0%,rgba(8,12,14,0) 40%)}
.fcopy{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,96px);
  padding-inline:var(--gutter);color:#F4F7F7}
.fcopy .inner{max-width:var(--maxw);margin-inline:auto}
.fcopy .kicker{color:var(--accent-hi)}
.fcopy .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.fcopy h2{color:#fff;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fcopy p{margin:16px 0 0;max-width:52ch;color:#D9E1E3;font-size:clamp(.95rem,1.05vw,1.08rem);
  text-shadow:0 1px 12px rgba(0,0,0,.6)}
.fcopy .facts{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-hi)}
.fcopy .btn{margin-top:24px}
.fcue{position:absolute;right:var(--gutter);bottom:clamp(40px,8vh,96px);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,247,247,.7)}

/* The evidence row: the real photographs of the same project. */
.fshots{display:grid;gap:clamp(14px,1.8vw,22px);padding-block:clamp(44px,6vw,80px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.fshots figure{margin:0}
.fshots .shot{aspect-ratio:4/3;overflow:hidden;border-radius:2px;border:1px solid var(--line);
  background:var(--canvas-2);box-shadow:var(--shadow-1)}
.fshots .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fshots figure:hover .shot img{transform:scale(1.05)}
.fshots figcaption{margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}

/* Phones keep the pinned scrub, on the portrait cut of the footage. The
   words sit low on a dark ground, clear of the browser bar, and arrive line
   by line as the reader scrolls (site.js, popify). */
@media (max-width:860px){
  .fpin{height:260vh}
  .fscrim{background:linear-gradient(0deg,rgba(8,12,14,.92) 0%,rgba(8,12,14,.78) 34%,rgba(8,12,14,.2) 62%,rgba(8,12,14,0) 78%)}
  .fcopy{bottom:max(36px,9vh)}
  .fcopy h2{font-size:clamp(1.9rem,9vw,2.6rem)}
  .fcopy p{font-size:.98rem}
  .fcue{display:none}
}
@supports (height:100svh){
  @media (max-width:860px){.fcopy{bottom:calc(100lvh - 100svh + 36px)}}
}
@media (max-height:620px){.fcopy p{display:none}}

/* ==========================================================================
   AWARD DETAIL — the certificate shown whole, beside its approved text.
   These are mostly portrait certificates of differing shapes, so the image is
   never cropped to a fixed ratio; it is matted on a white plate instead.
   ========================================================================== */

/* The certificate gets the larger share: the approved text is short, and the
   award itself is what the reader came to look at. */
.adetail{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(28px,5vw,72px);
  align-items:start;margin-top:clamp(30px,4vw,46px)}
.adetail .plate{background:var(--canvas-2);border:1px solid var(--line);
  padding:clamp(12px,1.8vw,24px);border-radius:2px;box-shadow:var(--shadow-2);
  position:sticky;top:clamp(88px,12vh,120px)}
/* Several of these are 1200x1600 portrait certificates. Capping by viewport
   height keeps a tall one fully on screen instead of running past the fold,
   while a wide one still fills the column. */
.adetail .plate img{display:block;margin-inline:auto;
  width:auto;height:auto;max-width:100%;max-height:calc(100vh - 210px)}
.adetail .txt p{color:var(--ink-2);font-size:1.05rem;line-height:1.72}
.adetail .txt p:first-child{color:var(--ink)}
@media (max-width:860px){
  .adetail{grid-template-columns:1fr}
  .adetail .plate{position:static;max-width:520px}
}

/* The award cards become links, so they need the same affordance as projects. */
a.acard{transition:border-color .5s var(--ease),transform .5s var(--ease),
  box-shadow .5s var(--ease)}
a.acard:hover{border-color:var(--accent-hi);transform:translateY(-4px);box-shadow:var(--shadow-2)}
.acard .shot img{transition:transform 1.1s var(--ease)}
a.acard:hover .shot img{transform:scale(1.05)}
.acard .more{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* A captioned photograph inside a project gallery. */
.gallery .shot-cap{margin:0}
.gallery .shot-cap img{width:100%}
.gallery .shot-cap figcaption{margin-top:10px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
@media (min-width:760px){.gallery .shot-cap:first-child{grid-column:1 / -1}}

/* ==========================================================================
   THE FAÇADE STORY — a pinned, scroll-driven journey told entirely with real
   photographs. Same format, scrim and copy placement as the Arena feature; the
   motion is a settling pull-back through the layers rather than a video scrub.
   ========================================================================== */

/* Row 07 of the disciplines. It is not a section: it sits in the flow of the
   list, pins when it reaches the top, and its photograph opens to the full
   screen. Scrolling back closes it again and returns it to its row. */
.fstory{position:relative}
/* The pin container is tall and positioned, and the content after the story is
   pulled up into its lower part; it must not intercept clicks meant for that
   content. Only the story's own button opts back in. */
.fspin{position:relative;height:340vh;pointer-events:none}
/* Pinned just below the fixed header, so row 07 and the opened frame are
   always fully in view. --hdr is measured from the real header at runtime. */
/* The sticky box is as tall as the screen but, once the story has closed, only
   the row is left in it. It must not catch clicks meant for what sits beneath. */
.fssticky{position:sticky;top:var(--hdr,65px);height:calc(100vh - var(--hdr,65px));overflow:hidden;
  pointer-events:none}
/* Transparent until the frame grows: before that, what shows around row 07 is
   simply the page, exactly as it shows around rows 01 to 06. */
.fsstage{position:absolute;inset:0;background:transparent;pointer-events:none}
.fsstage .fsbeat.on .btn{pointer-events:auto}
.fsstage .fsveil{display:none}
.fsstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.fsstage.video-ready video{opacity:1}
.fsstage .fposter{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--ease)}
.fsstage.video-ready .fposter{opacity:0}
.fsstage.video-failed video{display:none}
.fsscrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,12,14,.84) 0%,rgba(8,12,14,.58) 38%,rgba(8,12,14,0) 68%),
             linear-gradient(0deg,rgba(8,12,14,.62) 0%,rgba(8,12,14,0) 42%)}

/* The copy lives bottom-left like the Arena feature, but changes in beats as
   the layers change. Every beat occupies the same box, so nothing jumps. */
/* The ground: the page's own surface, under everything. Row 07 sits on it
   exactly like rows 01 to 06 above. */
.fsveil{position:absolute;inset:0;background:var(--canvas);pointer-events:none}

/* The frame holds the poster and the video. On arrival it is clipped down to
   the exact rectangle the row's thumbnail would occupy; as the reader scrolls
   it grows until the clip is gone and the footage is the whole screen. */
/* The frame is a real box: on arrival it is the thumbnail's size and position,
   showing the whole picture small; as the reader scrolls it grows to the full
   screen. The footage inside is object-fit:cover, so it always fills the box
   whatever its proportions along the way. */
.fsframe{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;
  background:var(--canvas-deep);border-radius:var(--fr,0);
  box-shadow:0 1px 2px rgba(21,26,30,calc(.05*(1 - var(--grow,0)))),
  0 6px 20px rgba(21,26,30,calc(.06*(1 - var(--grow,0))));will-change:left,top,width,height}
.fsframe .fposter{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .8s var(--ease)}
.fsframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.fsstage.video-ready .fsframe video{opacity:1}
.fsstage.video-ready .fsframe .fposter{opacity:0}
.fsstage.video-failed .fsframe video{display:none}

.fscopy{position:absolute;inset:0;padding-inline:var(--gutter);color:#F4F7F7;pointer-events:none}
.fscopy .inner{max-width:var(--maxw);margin-inline:auto;position:relative;height:100%}
/* Beat 07 is a discipline row: the same grid, gaps and padding as .cap, so at
   rest it is indistinguishable from the six above it. Its photograph cell is
   empty; the frame is sized to that cell. */
/* The copy layer carries no padding of its own; .inner.wrap is the same box
   as every other .wrap on the page. An absolutely positioned row measures from
   that box's padding edge, so it is inset by the gutter explicitly. */
.fscopy{padding-inline:0}
.fsbeat.row{top:0;bottom:auto;left:var(--gutter);right:var(--gutter);max-width:none;
  display:grid;grid-template-columns:auto 1fr 250px;gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);
  align-items:center;color:var(--ink);transform:none}
.fsbeat.row .n{font-family:var(--mono);font-size:.75rem;color:var(--accent);letter-spacing:.1em;
  align-self:start;padding-top:6px}
/* A touch larger than the six titles above it: the discipline that gets told. */
.fsbeat.row h3{color:inherit;margin-bottom:8px;font-size:clamp(1.3rem,1.8vw,1.75rem);font-weight:700}
.fsbeat.row p{color:var(--ink-2);max-width:64ch;margin:0;font-size:.96rem}
.fsbeat.row .thumb{aspect-ratio:16/10;background:transparent}
/* The row's border must not cut across the footage once the frame has grown. */
.fsbeat.row{border-bottom-color:rgba(21,26,30,calc(.12*(1 - var(--grow,0))))}
/* The scrim, progress ticks and cue arrive with the footage, not before. */
.fsscrim,.fsprog,.fscue{opacity:var(--grow,0)}
/* Opacity and lift are written by the scroll handler, straight from progress.
   No transitions here: anything on its own clock trails the scroll and reads
   as lag. */
/* Lifted clear of the bottom edge, so the 1998 and IKEA text never sits on
   the floor of the frame. (Row 07 overrides this with top:0.) */
.fsbeat{position:absolute;left:0;bottom:clamp(72px,13vh,150px);max-width:60ch;opacity:0;
  transform:translateY(var(--lift,14px));visibility:hidden}
.fsbeat.on{visibility:visible;pointer-events:auto}
.fsbeat .kicker{color:var(--accent-hi)}
.fsbeat .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.fsbeat .yr{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,8.4vw,7.4rem);
  line-height:1;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fsbeat h2,.fsbeat h3{color:#fff;max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fsbeat h3{font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:700}
.fsbeat p{margin:14px 0 0;max-width:54ch;color:#D9E1E3;font-size:clamp(.95rem,1.05vw,1.08rem);
  text-shadow:0 1px 12px rgba(0,0,0,.6)}
.fsbeat .note{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-hi);margin-top:16px}
.fsbeat .btn{margin-top:24px;pointer-events:auto}
.fscue{position:absolute;right:var(--gutter);bottom:clamp(40px,8vh,96px);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,247,247,.7);pointer-events:none}
.fsprog{position:absolute;left:var(--gutter);top:clamp(80px,10vh,110px);
  display:flex;gap:6px;pointer-events:none}
.fsprog i{width:26px;height:2px;background:rgba(255,255,255,.28);border-radius:2px;
  transition:background .4s var(--ease)}
.fsprog i.on{background:var(--accent-hi)}

/* The façade collection: opened from inside the story, never a separate page. */
.fscoll{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.fscoll.open{max-height:4000px}
.fscoll .inner{padding-block:clamp(44px,6vw,84px)}
.fscoll .pgrid{margin-top:30px}
.fscoll .close{margin-top:28px}

/* Phones keep the whole transition. Rows 01 to 06 hide their photographs
   under 900px, so row 07 shows its own as a full-width strip beneath the text,
   and that strip is what grows to fill the screen. */
@media (max-width:900px){
  .fsbeat.row h3{font-size:clamp(1.35rem,5.2vw,1.7rem)}
  .fsbeat.row{grid-template-columns:auto 1fr;grid-template-areas:"n txt" "thumb thumb"}
  .fsbeat.row .n{grid-area:n}
  .fsbeat.row .txt{grid-area:txt}
  .fsbeat.row .thumb{grid-area:thumb;width:100%;margin-top:14px}
  .fspin{height:300vh}
  .fscue{display:none}
}
@media (max-width:480px){
  .fsbeat.row p{font-size:.92rem}
  .fsbeat h3{font-size:1.3rem}
}
/* On a phone the words cover the whole width, so the dark ground rises from
   the bottom across the whole frame instead of from the left; the beats keep
   the page's side margins and stay clear of the browser bar. */
@media (max-width:860px){
  .fsscrim{background:linear-gradient(0deg,rgba(8,12,14,.92) 0%,rgba(8,12,14,.8) 42%,rgba(8,12,14,.42) 70%,rgba(8,12,14,.22) 100%)}
  .fsbeat:not(.row){left:var(--gutter);right:var(--gutter);max-width:none;bottom:max(40px,8vh)}
  .fsbeat .yr{font-size:clamp(3.8rem,22vw,5.8rem)}
}
@supports (height:100svh){
  @media (max-width:860px){.fsbeat:not(.row){bottom:calc(100lvh - 100svh + 40px)}}
}
/* A phone needs the height for words: the progress ticks move to the top
   edge, and a short screen sets the beats a little tighter. A beat that is
   still too tall is scaled down by site.js (fitBeats), never below 80%. */
@media (max-width:860px){.fsprog{top:14px}}
@media (max-width:860px) and (max-height:760px){
  .fsbeat:not(.row) p{font-size:.88rem;line-height:1.52}
  .fsbeat:not(.row) h2{font-size:1.5rem}
  .fsbeat .yr{font-size:4.2rem}
  .fsbeat .note{margin-top:10px}
  .fsbeat .btn{margin-top:16px}
}
/* A phone held upright keeps its paragraphs; the rule that drops them on a
   short screen is for a phone held sideways. */
@media (max-width:860px) and (orientation:portrait){
  .fscopy .fsbeat p,.feature .fcopy p{display:block}
}
@media (max-height:620px){.fsbeat p{display:none}}

/* ---- 404 page ---- */
.notfound{min-height:calc(100vh - 65px - 200px);display:flex;align-items:center;padding-top:clamp(120px,16vh,190px)}
.notfound h1{font-size:clamp(2rem,4vw,3.6rem);margin:16px 0 20px;max-width:16ch}
.notfound .lede{margin-bottom:34px}
.nflinks{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;gap:8px 28px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.nflinks a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.nflinks a:hover{color:var(--accent);border-color:var(--accent)}

/* ---- Contact map ---- */
.cdetails{display:flex;flex-direction:column;gap:22px}
.cmap iframe{display:block;width:100%;aspect-ratio:4/3;border:1px solid var(--line-strong);
  border-radius:2px;background:var(--canvas-2);filter:saturate(.85)}
.cmap-open{margin:10px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.cmap-open a{color:var(--ink-2);text-decoration:none}
.cmap-open a:hover{color:var(--accent)}
@media (max-width:860px){
  .cdetails .cmap{order:3;margin-top:18px}
  .cmap iframe{aspect-ratio:16/10;min-height:260px}
}

/* ---- Projects: sort, period and client controls ---- */
.orderrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 34px;margin-top:18px}
.orderrow .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
.sorts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sorts button,.periodpick select{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;
  text-transform:uppercase;background:var(--canvas-2);border:1px solid var(--line);
  color:var(--ink-2);padding:9px 16px;border-radius:2px;cursor:pointer;min-height:38px;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.sorts button:hover,.periodpick select:hover{border-color:var(--accent-hi);color:var(--ink)}
.sorts button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.periodpick{display:inline-flex;align-items:center}
.periodpick select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.periodpick select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
@media (pointer:coarse){.sorts button,.periodpick select{min-height:44px}}
.cnotice{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:22px 0 0;
  padding:14px 18px;border:1px solid var(--accent);border-left-width:4px;border-radius:2px;
  background:var(--accent-muted);font-size:.95rem}
.cnotice[hidden]{display:none}
.cnotice strong{font-weight:600}
.cnotice button{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--accent);color:var(--accent);padding:2px 0;cursor:pointer}
.cnotice button:hover{color:var(--ink);border-color:var(--ink)}

/* ---- Cross-links on project and award pages ---- */
.xlinks{margin-top:clamp(56px,7vw,96px)}
.xlinks h2{font-size:1.2rem;margin-bottom:6px}
.xlinks .pgrid,.xlinks .agrid{margin-top:22px}
.agrid{display:grid;gap:clamp(16px,2vw,26px)}
.xlinks .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.xlinks .agrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}

/* ---- Client logos that lead to projects ---- */
.logowall a.chip{text-decoration:none;color:inherit;position:relative;padding-bottom:30px}
.logowall a.chip .go{position:absolute;left:0;right:0;bottom:9px;text-align:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);opacity:.75;transition:opacity .4s var(--ease)}
.logowall a.chip:hover .go{opacity:1}

/* ---- Services: the façade engineering box ---- */
.svc .row.featured{background:var(--canvas-2);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:2px;padding:clamp(22px,3vw,40px);box-shadow:var(--shadow-1)}
.svc .row.featured .shot{box-shadow:none}
.svc-more{margin-top:24px!important}
@media (max-width:860px){.svc .row.featured{padding:20px 18px 24px}}

/* ---- Lightbox: any image wrapped in a.zoom opens full screen ---- */
a.zoom{display:block;cursor:zoom-in}
a.zoom img{display:block}
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,14,16,.97);display:grid;place-items:center;
  animation:lbfade .3s var(--ease)}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(96vw,1700px);display:flex;flex-direction:column;align-items:center;gap:12px}
.lb img{max-width:96vw;max-height:84vh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:lbin .4s var(--ease)}
.lb figcaption{color:rgba(255,255,255,.7);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;max-width:70ch;padding-inline:16px}
.lb button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  font-family:var(--body);font-size:1.6rem;line-height:1;transition:background .3s var(--ease)}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb button:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.lb-x{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.lb-prev{left:max(12px,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
.lb-next{right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}
.lb[data-single] .lb-prev,.lb[data-single] .lb-next,.lb[data-single] .lb-count{display:none}
.lb-count{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;
  color:rgba(255,255,255,.55);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em}
@media (max-width:640px){
  .lb img{max-height:76vh}
  .lb-prev,.lb-next{top:auto;bottom:max(46px,calc(env(safe-area-inset-bottom) + 34px));transform:none}
  .lb-prev{left:18px}.lb-next{right:18px}
}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
@keyframes lbin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lb,.lb img{animation:none}}

/* ---- Brochures ---- */
.brochures{border-top:1px solid var(--line)}
.brgrid{display:grid;gap:clamp(16px,2vw,26px);margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.brcard{display:flex;flex-direction:column;background:var(--canvas-2);border:1px solid var(--line);
  border-radius:2px;overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.brcard:hover{border-color:var(--accent-hi);box-shadow:var(--shadow-1);transform:translateY(-3px)}
.brcard .shot{aspect-ratio:7/6;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
.brcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.brcard:hover .shot img{transform:scale(1.04)}
.brcard .meta{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.brcard h3{font-size:.98rem;line-height:1.32;margin-bottom:10px}
.brcard .facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 14px;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.brcard .more{margin:auto 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* ---- Services: the Façade Engineering row is the story ---- */
.svcstory{margin-top:clamp(44px,6vw,92px)}
/* Until its button is pressed the Services story has no scroll travel: the
   pin is exactly as tall as the sticky box, so nothing pins and nothing opens. */
.svcstory:not(.open) .fspin{height:calc(100vh - var(--hdr,65px))}
.svc-after{margin-top:clamp(44px,6vw,92px)}
.fsbeat.row.svcrow{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding:0;border-bottom:0;align-items:center}
.fsbeat.row.svcrow .txt{order:2}
.fsbeat.row.svcrow h3{font-size:clamp(1.3rem,2vw,1.9rem);margin-bottom:14px}
.fsbeat.row.svcrow p{max-width:56ch}
.fsbeat.row.svcrow .svc-more{margin-top:24px}
.fsbeat.row.svcrow .btn{pointer-events:auto}
.fsbeat.row.svcrow .thumb{aspect-ratio:4/3}
@media (max-width:860px){
  .fsbeat.row.svcrow{grid-template-columns:1fr;grid-template-areas:"txt" "thumb"}
  .fsbeat.row.svcrow .txt{order:0;grid-area:txt}
  .fsbeat.row.svcrow .thumb{grid-area:thumb;margin-top:22px}
}

/* ---- Projects: search ---- */
.psearch{display:inline-flex;align-items:center;flex:1 1 220px;max-width:340px}
.psearch input{flex:1;min-width:0;font-family:var(--body);font-size:.92rem;background:var(--canvas-2);
  border:1px solid var(--line);border-radius:2px;padding:9px 14px;min-height:38px;color:var(--ink);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.psearch input::placeholder{color:var(--ink-3)}
.psearch input:hover{border-color:var(--accent-hi)}
.psearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
@media (pointer:coarse){.psearch input{min-height:44px}}
@media (max-width:640px){.psearch{max-width:none;flex-basis:100%}}


/* ---- Parts of one project ---- */
.parts{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:26px 0 0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.parts .lbl{color:var(--ink-3)}
.parts a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted);padding-bottom:3px}
.parts a:hover{border-color:var(--accent)}
.ppart{margin-top:clamp(56px,7vw,96px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line);scroll-margin-top:90px}
.ppart h2{font-size:clamp(1.4rem,2.4vw,2rem);max-width:24ch}
.ppart .pfacts{margin-top:22px}
.ppart .pbody{margin-top:22px}
.ppart .gallery{margin-top:clamp(26px,3vw,40px)}

/* ---- Projects without a photograph: the façade of panels ---- */
.spec-shot,.spec-band{position:relative;overflow:hidden;background:var(--ink)}
.spec-shot svg.spec,.spec-band svg.spec{position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:transform 1.1s var(--ease)}
.pcard:hover .spec-shot svg.spec{transform:scale(1.04)}
.spec-copy{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;color:#F4F7F7;pointer-events:none}
.spec-copy .yr{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.spec-copy .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-hi);text-align:right;max-width:14ch;line-height:1.5}
.spec-band{grid-column:1/-1;aspect-ratio:21/9;min-height:180px;margin-top:0;border-radius:2px;
  border:1px solid var(--line)}
.spec-band .spec-copy{left:26px;right:26px;bottom:22px}
.spec-band .spec-copy .yr{font-size:clamp(2.4rem,5vw,4.2rem)}
.spec-band.light{background:#E9EDEF}
.gallery .gallery-h{grid-column:1/-1;font-size:1.05rem;margin:18px 0 -4px;padding-top:18px;border-top:1px solid var(--line)}
.gallery .gallery-h:first-child{margin-top:0;padding-top:0;border-top:0}
.pfacts dd a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted)}
.pfacts dd a:hover{border-color:var(--accent)}

/* ==========================================================================
   PRINT — a project page prints as a one- or two-page project sheet:
   title, facts, text, photographs; no header, footer, navigation or video.
   ========================================================================== */
@media print{
  @page{margin:16mm}
  html{scroll-behavior:auto;background:#fff}
  body{background:#fff;color:#000;font-size:11pt}
  .hdr,.ftr,.skip,.env,.pnav,.xlinks,.parts,.fscue,.fsprog,.lb,.burger,.lang,.cmap,.filters,.orderrow,.cnotice,
  .stage video,.fsstage video,.spine{display:none!important}
  .page,.wrap{max-width:none;padding:0}
  .phead{padding:0}
  .kicker{color:#555}
  h1{font-size:22pt;margin:0 0 8pt}
  .pfacts{display:flex;flex-wrap:wrap;gap:6pt 24pt;margin:8pt 0 12pt;border-top:1px solid #999;border-bottom:1px solid #999;padding:8pt 0}
  .pfacts dt{color:#555}
  .pfacts dd a{color:#000;text-decoration:none;border:0}
  .pfacts dd a .arw{display:none}
  .pbody p{orphans:3;widows:3}
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:8pt;margin-top:12pt}
  .gallery a.zoom{display:block;break-inside:avoid}
  .gallery img{border:0;box-shadow:none;width:100%}
  .spec-band{display:none}
  .ppart{break-before:page;margin-top:0;padding-top:0;border:0}
  .rv{opacity:1!important;transform:none!important}
  a[href]::after{content:none}
  .print-only{display:block!important}
}
.print-only{display:none}
.spec-shot.light{background:#E9EDEF}

/* ---- News ---- */
.ngrid{display:grid;gap:clamp(16px,2vw,26px);margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.ncard{display:flex;flex-direction:column;background:var(--canvas-2);border:1px solid var(--line);
  border-radius:2px;overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.ncard:hover{border-color:var(--accent-hi);box-shadow:var(--shadow-1);transform:translateY(-3px)}
.ncard .shot{aspect-ratio:3/2;background:var(--canvas-deep);overflow:hidden}
.ncard .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.ncard:hover .shot img{transform:scale(1.05)}
.ncard .meta{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.ncard time{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ncard h3{font-size:1rem;line-height:1.32;margin-bottom:10px}
.ncard p{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin:0}
.ncard[hidden]{display:none}
.newshome{border-top:1px solid var(--line)}
.post .kicker time{color:var(--ink-3)}
.post .pbody{max-width:70ch}

/* eight items in the menu: keep each on one line, tighten before the burger takes over */
.nav a{white-space:nowrap}
@media (max-width:1260px){.nav{gap:clamp(8px,1.1vw,18px)} .nav a{font-size:.7rem;letter-spacing:.1em}}
@media (max-width:1080px){.nav a{font-size:.66rem;letter-spacing:.08em}}
.post h1{font-size:clamp(1.7rem,3.3vw,2.7rem);max-width:28ch}

/* ==========================================================================
   WHERE WE'VE BUILT — the map flight
   ========================================================================== */
.wflight{position:relative;margin-top:clamp(28px,4vw,48px)}
.wpin{position:relative;height:380vh}
.wsticky{position:sticky;top:var(--hdr,65px);height:calc(100vh - var(--hdr,65px));overflow:hidden;background:var(--ink)}
.wmap{position:absolute;inset:0;width:100%;height:100%;display:block}
.wmap .sea{fill:var(--ink)}
.wmap .land path{fill:#232B30;stroke:#3A454C;stroke-width:.6;vector-effect:non-scaling-stroke}
.wmap .near path{fill:#28323A;stroke:#43505A;stroke-width:.7;vector-effect:non-scaling-stroke}
.wmap .bulgaria{fill:var(--accent);fill-opacity:.32;stroke:var(--accent-hi);stroke-width:1.2;vector-effect:non-scaling-stroke}
.wmap .pins circle{fill:var(--accent-hi);opacity:0;transition:opacity .35s var(--ease)}
.wmap .pins circle.halo{fill:var(--accent-hi);fill-opacity:.18}
.wmap .pins circle.on{opacity:1}
.wmap .labels text{font-family:var(--mono);fill:#F4F7F7;letter-spacing:.12em;text-transform:uppercase;opacity:0;
  transition:opacity .35s var(--ease);paint-order:stroke;stroke:var(--ink);stroke-width:.6em;stroke-linejoin:round}
.wmap .labels text.on{opacity:.92}
.wcopy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(64px,12vh,140px);max-width:44ch;color:#F4F7F7;pointer-events:none}
.wbeat{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);visibility:hidden}
.wbeat.on{opacity:1;transform:none;visibility:visible}
.wbeat .kicker{color:var(--accent-hi)}
.wbeat .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.wbeat h2{color:#fff;font-size:clamp(1.5rem,3vw,2.6rem);max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.wbeat p{margin:12px 0 0;color:#D9E1E3;max-width:46ch;font-size:clamp(.95rem,1.05vw,1.08rem)}
.wcue{position:absolute;right:var(--gutter);bottom:clamp(40px,8vh,96px);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0}
.wlist{border-top:1px solid var(--line)}
.wplaces{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.wplaces button{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;
  background:var(--canvas-2);border:1px solid var(--line);color:var(--ink-2);padding:9px 14px;border-radius:2px;cursor:pointer;min-height:38px;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.wplaces button span{color:var(--accent);margin-left:6px}
.wplaces button:hover{border-color:var(--accent-hi);color:var(--ink)}
.wplaces button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
.wplaces button[aria-pressed="true"] span{color:#fff}
.wprojects{margin-top:26px;display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.wprojects a{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.wprojects a:hover{color:var(--accent)}
.wprojects a .yr{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink-3);flex:none}
.wprojects .hint{grid-column:1/-1;color:var(--ink-3);font-size:.95rem}
@media (max-width:860px){.wpin{height:320vh} .wcue{display:none} .wcopy{max-width:none} .wbeat h2{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.wpin{height:auto} .wsticky{position:relative;height:70vh}}
/* the world beats sit top-right, clear of Africa and the Atlantic pins; the Bulgaria beat bottom-left */
.wcopy{top:clamp(24px,5vh,56px)}
.wbeat[data-i="0"],.wbeat[data-i="1"]{left:auto;right:0;bottom:auto;top:0;text-align:right}
.wbeat[data-i="0"] .kicker,.wbeat[data-i="1"] .kicker{justify-content:flex-end}
.wbeat[data-i="0"] h2,.wbeat[data-i="1"] h2,.wbeat[data-i="1"] p{margin-left:auto}
@media (max-width:860px){.wbeat[data-i="0"],.wbeat[data-i="1"]{text-align:left;left:0;right:auto} .wbeat[data-i="0"] .kicker,.wbeat[data-i="1"] .kicker{justify-content:flex-start}}
.wherelink{margin:14px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.wherelink a{color:var(--accent);text-decoration:none}
.wherelink a:hover{color:var(--ink)}
#where{scroll-margin-top:80px}
/* the flight at the head of Projects and on Home; pins are buttons */
.whead{padding-bottom:0}
.plist{padding-top:clamp(56px,7vw,96px)}
.plist .h1{font-size:clamp(2rem,4vw,3.6rem);margin-top:14px}
.wmap .pins circle,.wmap .labels text{pointer-events:auto;cursor:pointer}
.wmap .pins circle:not(.on),.wmap .labels text:not(.on){pointer-events:none}
.wmap .pins circle.on:hover{filter:brightness(1.25)}
.wcopy{max-width:32ch}
.wherelink{display:none}
/* the copy box spans the frame; each beat is boxed on its own so the world beats
   really sit top-right, over Russia and the steppe where there are no pins */
.wcopy{max-width:none;left:var(--gutter);right:var(--gutter)}
.wbeat{max-width:32ch}
.wbeat[data-i="0"],.wbeat[data-i="1"]{max-width:30ch}
.wbeat[data-i="0"],.wbeat[data-i="1"]{max-width:40ch}
.wbeat[data-i="0"] h2,.wbeat[data-i="1"] h2{font-size:clamp(1.4rem,2.4vw,2.1rem);max-width:none}
.wbeat[data-i="1"] p{max-width:none}

/* The scrubbed videos are pictures, never players: iOS must not draw its
   play button over one, even when Low Power Mode holds the video back. */
.stage video::-webkit-media-controls-start-playback-button,
.fstage video::-webkit-media-controls-start-playback-button,
.fsframe video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.stage video::-webkit-media-controls,.fstage video::-webkit-media-controls,
.fsframe video::-webkit-media-controls{display:none!important}

/* ==========================================================================
   PHONES — words that arrive with the scroll
   site.js (popify) numbers the lines of a block (--i, spaced by --s) and the
   words of its heading (--k, spaced by --sw); the block's level (--pop, 0 to 1)
   comes from scroll. Each line rises in over its own share of the level, and a
   heading's words rise one after the other within that share. Without --pop
   (reduced motion, or before the script runs) everything simply shows.
   ========================================================================== */
@media (max-width:860px){
  .pop > *{--t:clamp(0,(var(--pop,1) - var(--i,0)*var(--s,0))/0.4,1);
    opacity:var(--t);transform:translateY(calc((1 - var(--t))*18px))}
  .pop > .pwords{opacity:1;transform:none}
  .pop .pw{display:inline-block;--tw:clamp(0,(var(--t) - var(--k,0)*var(--sw,0))/0.5,1);
    opacity:var(--tw);transform:translateY(calc((1 - var(--tw))*.5em))}
  /* the map's words follow the scroll rather than a clock */
  .wphone .wbeat{transition:none;transform:none}
  .wphone .wbeat.on{visibility:visible}
  .wcopy{bottom:max(40px,9vh)}
  .wmap .pins circle.hit{fill:transparent;opacity:1}
}
@supports (height:100svh){
  @media (max-width:860px){.wcopy{bottom:calc(100lvh - 100svh + 40px)}}
}
.wmap .pins circle.hit{fill:transparent}