/* ==========================================================================
   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);
  /* A frosted bar from the start, so the menu reads over any footage. */
  background:rgba(250,251,251,.74);border-bottom:1px solid rgba(21,26,30,.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);backdrop-filter:blur(14px) saturate(1.05);
  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);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);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:62px;width:auto;display:block;transition:height .5s var(--ease),transform .4s var(--ease)}
.hdr.stuck .brand img{height:52px}
.brand:hover img{transform:translateY(-1px)}
@media (max-width:900px){.brand img,.hdr.stuck .brand img{height:46px}}

.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);font-weight:500;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:440vh;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(1.05rem,1.35vw,1.3rem);color:var(--ink);font-weight:500;
  margin:20px auto 0;max-width:52ch;opacity:var(--ks,0)}
/* The closing words sit over the busiest part of the footage: a wider,
   denser light halo behind them than behind the captions before. */
.band-4::before{inset:-20% -14%;
  background:radial-gradient(ellipse 68% 72% at 50% 50%,
             rgba(248,250,250,.96) 0%,rgba(248,250,250,.84) 48%,rgba(248,250,250,0) 80%)}
.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:380vh}
  .band-1,.band-2,.band-3{bottom:17vh}
  .beat{font-size:clamp(1.6rem,7.4vw,2.1rem)}
  .settle-sub{font-size:1.06rem;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:260vh}
.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:220vh}
  .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 ----
   The office drawn from OpenStreetMap streets (build/make_office_map.py);
   the Google map replaces it only when asked for. */
.cdetails{display:flex;flex-direction:column;gap:22px}
.gmap{position:relative;aspect-ratio:1000/720;border:1px solid var(--line-strong);border-radius:2px;
  overflow:hidden;background:#EDF1F2}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#EDF1F2;
  opacity:0;transition:opacity .6s var(--ease)}
.gmap.live iframe{opacity:1}
.ctmap{background:none;aspect-ratio:auto}
.ctmap .gmap{border-color:rgba(255,255,255,.14)}
.omap{display:block;width:100%;height:100%}
.omap-st{font-family:var(--mono);font-size:21px;letter-spacing:.18em;fill:#76848A}
.omap-bld{fill:var(--accent-bright);fill-opacity:.32;stroke:var(--accent);stroke-width:1.6}
.omap-ring{fill:var(--accent-bright);fill-opacity:.28;transform-box:fill-box;transform-origin:center;
  animation:omapPulse 2.6s var(--ease) infinite}
@keyframes omapPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.omap-tag rect{fill:#fff;stroke:rgba(21,26,30,.14)}
.omap-t1{font-family:var(--display);font-size:25px;font-weight:700;fill:var(--ink)}
.omap-t2{font-family:var(--mono);font-size:19px;letter-spacing:.03em;fill:var(--ink-2)}
.omap-attr{font-family:var(--mono);font-size:15px;fill:#93A0A6}
.cmap-open{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  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}
}
@media (prefers-reduced-motion:reduce){.omap-ring{animation:none;opacity:.5}}

/* ---- 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;width:100%;max-width:100%;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}

/* ==========================================================================
   THE HOME PAGE — a short introduction that leads to every section
   ========================================================================== */
/* key numbers, under the 30 years mark */
.knums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(40px,5vw,64px) auto 0;
  max-width:980px;border-top:1px solid var(--line);text-align:left}
.knum{display:flex;flex-direction:column;gap:6px;padding:22px 20px 6px;border-left:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:background .4s var(--ease)}
.knum:first-child{border-left:0}
.knum:hover{background:rgba(46,139,144,.06)}
.knum .v{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;
  letter-spacing:-.02em;color:var(--accent)}
.knum .l{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){
  .knums{grid-template-columns:1fr 1fr}
  .knum:nth-child(3){border-left:0}
  .knum:nth-child(n+3){border-top:1px solid var(--line)}
}
/* the seven disciplines as picture tiles */
/* six tiles, two or three to a row; the seventh discipline, Façade
   Engineering, follows as its own panel and story */
.dgrid{display:grid;gap:clamp(10px,1.6vw,20px);margin-top:40px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.dgrid{grid-template-columns:repeat(3,1fr)}}


.dtile{display:flex;flex-direction:column;background:var(--canvas-2);border:1px solid var(--line);
  border-radius:2px;overflow:hidden;color:var(--ink);text-decoration:none;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.dtile:hover{border-color:var(--accent-hi);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.dtile .tshot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--canvas-deep)}
.dtile .tshot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dtile:hover .tshot img{transform:scale(1.05)}
.dtile .tcap{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:16px 18px 18px}
.dtile .tn{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.1em}
.dtile .tt{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.25}
.dtile .arw{color:var(--accent);transition:transform .4s var(--ease)}
.dtile:hover .arw{transform:translateX(3px)}
/* two to a row on a phone: the number above the title, the title the full width */
@media (max-width:599px){
  .dtile .tcap{grid-template-columns:1fr;gap:4px;padding:11px 12px 13px}
  .dtile .tt{font-size:min(.78rem,3.2vw);line-height:1.3;overflow-wrap:break-word}   /* the longest Bulgarian word fits down to 320px */
  .dtile .arw{display:none}
}
#svc-1,#svc-2,#svc-3,#svc-4,#svc-5,#svc-6,#svc-7{scroll-margin-top:96px}
/* three projects, larger */
@media (min-width:900px){.pgrid.big3{grid-template-columns:repeat(3,1fr)}}
/* the client strip: moves slowly, stops under the pointer */
.clhome{overflow:hidden;padding-bottom:clamp(30px,4vw,56px)}
.clhome + .recnews{padding-top:clamp(56px,6vw,96px)}
.cstrip{margin-top:40px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ctrack{display:flex;width:max-content;animation:cmove 60s linear infinite}
.cstrip:hover .ctrack{animation-play-state:paused}
.cset{display:flex;align-items:center;gap:clamp(36px,5vw,72px);padding-right:clamp(36px,5vw,72px)}
.cset a{display:block;flex:none}
.cset img{height:clamp(34px,4vw,48px);width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1);opacity:.7;mix-blend-mode:multiply;   /* a mark's white ground disappears into the page */
  transition:filter .4s var(--ease),opacity .4s var(--ease)}
.cset a:hover img{filter:none;opacity:1}
@keyframes cmove{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ctrack{animation:none;width:auto}
  .cset{flex-wrap:wrap;justify-content:center;padding-inline:var(--gutter)}
  .cset[aria-hidden]{display:none}
}
/* the latest award beside the latest news */
.rnsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);margin-top:40px;align-items:start}
.rnnews h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 6px;font-weight:500}
.nrows{border-top:1px solid var(--line)}
.nrow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:18px 0;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.nrow time{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-3);white-space:nowrap;text-transform:uppercase}
.nrow .nt{font-weight:500;line-height:1.4}
.nrow .arw{color:var(--accent);transition:transform .4s var(--ease)}
.nrow:hover .nt{color:var(--accent)}
.nrow:hover .arw{transform:translateX(3px)}
@media (max-width:860px){
  .rnsplit{grid-template-columns:1fr}
  .nrow{grid-template-columns:1fr auto;gap:4px 14px}
  .nrow time{grid-column:1 / -1}
}
/* the closing contact band */
.ctband{background:var(--ink);color:#F4F7F7;padding-block:clamp(56px,7vw,96px)}
.ctb{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.ctb .kicker{color:var(--accent-hi)}
.ctb .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.ctb h2{color:#fff;margin:0;max-width:18ch}
.ctlinks{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.ctlinks a:not(.btn){color:#D9E1E3;text-decoration:none;border-bottom:1px solid rgba(217,225,227,.35);padding-bottom:3px;font-size:1.05rem}
.ctlinks a:not(.btn):hover{color:#fff;border-color:#fff}

/* ---- Row 07: Façade Engineering, told without shouting ----
   On the home page it is the seventh tile: as wide as the grid of six above
   it, the same white card, border and title type, its picture on the left.
   Only the card's text cell is white, so the frame beneath shows through the
   picture cell; card and border fade as the frame grows into the story.
   On Services it is an ordinary service row, like the others. */
.fsbeat.row h3,.fsbeat.row p{text-shadow:none}            /* the dark halo is for words over footage */
.fstory .fsbeat.row.tile7{top:clamp(10px,1.6vw,20px);display:grid;
  grid-template-columns:minmax(240px,40%) 1fr;grid-template-areas:"thumb txt";gap:0;padding:0;
  align-items:stretch;border:1px solid rgba(21,26,30,calc(.12*(1 - var(--grow,0))));border-radius:2px}
.fsbeat.row.tile7 .thumb{grid-area:thumb;aspect-ratio:16/10;align-self:stretch}
.fsbeat.row.tile7 .txt{grid-area:txt;align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(18px,2.2vw,30px) clamp(18px,2.6vw,38px);background:rgba(255,255,255,calc(1 - var(--grow,0)))}
.fsbeat.row.tile7 h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.4vw,1.32rem);
  line-height:1.25;margin:0 0 10px;display:flex;align-items:baseline;gap:12px}
.fsbeat.row.tile7 .n{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--accent);letter-spacing:.1em;padding:0}
.fsbeat.row.tile7 p{font-size:.93rem;line-height:1.6;max-width:62ch}
.fsbeat .fsnote{margin-top:12px;font-size:.86rem;color:var(--accent);max-width:60ch}
.fsbeat .fskick{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent);margin:0 0 8px}
.fstory.svcstory{margin-block:clamp(26px,3vw,40px)}
@media (max-width:900px){
  .fstory .fsbeat.row.tile7{grid-template-columns:1fr;grid-template-areas:"thumb" "txt"}
  .fsbeat.row.tile7 .thumb{width:100%;margin:0}
}

/* ---- Clients by sector, still ---- */
/* one row per sector: its name on the left, its clients' marks beside it */
.csecs{margin-top:40px;border-top:1px solid var(--line)}
.csec{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:14px 32px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.csec h3{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:0;font-weight:500}
@media (max-width:640px){.csec{grid-template-columns:1fr}}
.csec h3 a{color:var(--ink);text-decoration:none}
.csec h3 a:hover{color:var(--accent)}
.clogos{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.clogos img,.cgrid img{height:38px;width:auto;max-width:140px;object-fit:contain;
  filter:grayscale(1);opacity:.75;mix-blend-mode:multiply;transition:filter .4s var(--ease),opacity .4s var(--ease)}
.clogos a:hover img,.cgrid a:hover img{filter:none;opacity:1}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:28px 24px;margin-top:40px;align-items:center;justify-items:center}

/* ---- News with pictures, the awards as certificates ---- */
.nlead-grid{grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto}
.nlead-grid .ncard:first-child{grid-row:span 2}
.nlead-grid .ncard:first-child .shot{aspect-ratio:auto;flex:1;min-height:260px}
@media (max-width:860px){.nlead-grid{grid-template-columns:1fr}.nlead-grid .ncard:first-child{grid-row:auto}
  .nlead-grid .ncard:first-child .shot{aspect-ratio:3/2;min-height:0}}
.certs{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:22px}
.certs-h{margin:0 0 16px;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.certs-h a{color:var(--ink);text-decoration:none}
.certs-h a:hover{color:var(--accent)}
.certrow{display:grid;grid-template-columns:repeat(10,1fr);gap:12px}
.cert{display:block;background:var(--canvas-2);border:1px solid var(--line);padding:6px;border-radius:2px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.cert img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.cert:hover{transform:translateY(-3px);border-color:var(--accent-hi);box-shadow:var(--shadow-1)}
@media (max-width:860px){.certrow{grid-template-columns:repeat(5,1fr)}}

/* ---- The contact band with a photograph ---- */
.ctband.has-pic .ctb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,64px)}
.ctband .cttext .ctlinks{margin-top:26px}
.ctpic{border-radius:2px;overflow:hidden;aspect-ratio:4/3;background:#222}
.ctpic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.ctband.has-pic .ctb{grid-template-columns:1fr}.ctpic{aspect-ratio:16/10}}

/* ---- Company overview with a picture beside it ---- */
.covw{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:start}
.covtext .pbody{max-width:62ch}
.covpic{position:sticky;top:110px}
.covpic.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcell{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--canvas-deep)}
.mcell:nth-child(2),.mcell:nth-child(3){aspect-ratio:4/4.4}
.mcell img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mcell:hover img{transform:scale(1.05)}
.mcell span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:.82rem;line-height:1.3;
  background:linear-gradient(0deg,rgba(8,12,14,.78),rgba(8,12,14,0))}
.mcell b{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--accent-hi);font-weight:500}
.covpic.single{margin:0}
.covpic.single img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;display:block}
.covpic.single figcaption{margin-top:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.covpic.plate{background:var(--canvas-2);border:1px solid var(--line);padding:clamp(14px,2vw,26px);box-shadow:var(--shadow-2)}
.covpic.plate img{width:100%;height:auto;display:block}
@media (max-width:860px){.covw{grid-template-columns:1fr}.covpic{position:static}}

/* ---- Prototype labels (local page only) ---- */
.protolabel{background:#151A1E;color:#7FC9CE;padding:14px 0;position:relative;z-index:2}
.protolabel p{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em}

/* ---- Clients and partners, two moving rows on the home page ----
   White tiles, so a mark's own white ground is simply part of the tile:
   no blending, nothing repainted while the rows move (site.js moves them). */
.mq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.mq-toggle{flex:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;cursor:pointer}
.mq-toggle:hover{color:var(--accent);border-color:var(--accent)}
.mq-label{margin:34px auto 12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.mq{position:relative;overflow:hidden;padding:6px 0 10px}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:clamp(28px,7vw,120px);z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--canvas),rgba(245,247,248,0))}
.mq::after{right:0;background:linear-gradient(270deg,var(--canvas),rgba(245,247,248,0))}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-set{display:flex;gap:14px;padding-right:14px}
.mchip{flex:none;display:flex;align-items:center;justify-content:center;touch-action:manipulation;
  width:clamp(124px,11.5vw,172px);height:clamp(66px,6vw,88px);
  padding:14px 22px;background:var(--canvas-2);border:1px solid var(--line);border-radius:2px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
/* the mark fills the tile's inner box and is contained in it, whatever its
   own proportions: nothing ever spills over the tile's edge */
.mchip img{display:block;width:100%;height:100%;min-width:0;object-fit:contain;
  filter:grayscale(1);opacity:.8;transition:filter .35s var(--ease),opacity .35s var(--ease)}
.mchip:hover,.mchip:focus-visible{border-color:var(--accent);box-shadow:0 8px 24px rgba(21,26,30,.08);transform:translateY(-2px)}
.mchip:hover img,.mchip:focus-visible img{filter:none;opacity:1}
/* still: no motion wanted, or no script */
.mq.still .mq-track{width:auto}
.mq.still .mq-set{flex-wrap:wrap;justify-content:center;padding-inline:var(--gutter,16px)}
.mq.still::before,.mq.still::after{display:none}
@media (prefers-reduced-motion:reduce){.mq-toggle{display:none}}

/* ---- Recognition and news on the home page (5 October 2026) ----
   Three equal news cards; then three awards shown large, each over the
   building it was won for, the certificate pinned in the corner. On a phone
   both rows become a sideways swipe, so the page stays short. */
.ngrid.n3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px}
.ngrid.n3 .ncard .shot{aspect-ratio:16/10}
.ngrid.n3 .ncard .meta p{display:none}
.ngrid.n3 .ncard h3{font-size:1rem;line-height:1.35;margin:0}
.awfeat{margin-top:clamp(56px,7vw,96px)}
.awf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:18px}
.awf{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;color:#fff;
  text-decoration:none;background:#11181C;isolation:isolate}
.awf-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.awf::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,16,.05) 30%,rgba(10,14,16,.55) 58%,rgba(10,14,16,.9) 100%)}
.awf:hover .awf-photo{transform:scale(1.05)}
.awf-cert{position:absolute;top:clamp(12px,1.4vw,18px);right:clamp(12px,1.4vw,18px);z-index:2;
  width:clamp(64px,6.2vw,92px);aspect-ratio:3/4;background:#fff;padding:5px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);transform:rotate(2.5deg);transition:transform .6s var(--ease)}
.awf:hover .awf-cert{transform:rotate(0) scale(1.04)}
.awf-cert img{display:block;width:100%;height:100%;object-fit:contain}
.awf-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:8px;
  padding:clamp(18px,2.2vw,30px)}
.awf-yr{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,3.8vw,3.4rem);line-height:.95;letter-spacing:-.01em}
.awf-t{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi)}
.awf-d{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.88);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.awf-p{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-top:4px}
.awf-p .arw{display:inline-block;transition:transform .4s var(--ease)}
.awf:hover .awf-p .arw{transform:translateX(3px)}
@media (max-width:760px){
  .hscroll{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter)}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll > *{scroll-snap-align:start}
  /* the desktop grids set three columns more specifically than .hscroll;
     on a phone the swipe row's own column size must win */
  .ngrid.n3.hscroll,.awf-grid.hscroll{grid-template-columns:none}
  .awf{aspect-ratio:4/5}
}

/* ---- Company: the overview beside six facts (5 October 2026) ----
   A slim column, no picture: hairline rows that stay in view while the
   overview is read, and the way to the brochures. */
.covw{grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr)}
.glance{position:sticky;top:calc(var(--hdr,88px) + 28px);margin-top:clamp(70px,9vw,128px);
  border-top:2px solid var(--accent);padding-top:18px}
.glance .kicker{margin-bottom:6px}
.glance dl{margin:0}
.glance dl > div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.glance dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.glance dd{margin:0;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink)}
.glance-go{margin:18px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.glance-go a{color:var(--accent);text-decoration:none}
.glance-go a:hover{text-decoration:underline}
@media (max-width:860px){
  .covw{grid-template-columns:1fr}
  .glance{position:static;margin-top:8px}
  .glance dl{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
}

/* Home page: the pin is longer by the stretch in which row 07 is held still
   to be read before its picture opens (site.js, HOLD and GROW). */
.fstory:not(.svcstory) .fspin{height:420vh}
@media (max-width:900px){.fstory:not(.svcstory) .fspin{height:370vh}}

/* ---- Row 07 as a large feature: prototypes A to D (5 October 2026) ----
   The picture cell (.thumb) is what the frame grows from, so each look only
   has to place it; the words fade as the picture opens (site.js). */
.fstory .fsbeat.row.feat{top:clamp(10px,1.6vw,20px);gap:0;padding:0;border-radius:2px;align-items:stretch}
.fsbeat.row.feat .txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fsbeat.row.feat .fk{display:flex;gap:14px;align-items:baseline;margin:0 0 14px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.fsbeat.row.feat .fk .n{font-size:inherit;padding:0;color:inherit}
.fsbeat.row.feat h3{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.3vw,3.1rem);
  line-height:1.04;letter-spacing:-.01em;margin:0 0 18px;color:var(--ink)}
.fsbeat.row.feat .fb{font-size:1rem;line-height:1.65;max-width:54ch;color:var(--ink-2)}
.fsbeat.row.feat .fsnote{font-size:.9rem;color:var(--accent)}
.fsbeat.row.feat .fsgo{margin-top:24px;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.fsbeat.row.feat .fsgo .arw{display:inline-block;animation:fsgoBob 1.8s var(--ease) infinite}
@keyframes fsgoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.fsbeat.row.feat .thumb{aspect-ratio:auto;margin:0;width:auto}

/* A: the big box */
.fstory .fsbeat.row.v-a,.fstory .fsbeat.row.v-d{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"txt thumb";height:min(64vh,640px)}
.fstory .fsbeat.row.v-a{border:1px solid rgba(21,26,30,calc(.12*(1 - var(--grow,0))))}
.fstory .fsbeat.row.v-a .txt,.fstory .fsbeat.row.v-d .txt{grid-area:txt;padding:clamp(28px,3.6vw,56px)}
.fstory .fsbeat.row.v-a .txt{background:rgba(255,255,255,calc(1 - var(--grow,0)))}
.fstory .fsbeat.row.v-a .thumb,.fstory .fsbeat.row.v-d .thumb{grid-area:thumb;height:100%}

/* D: the dark panel */
.fstory .fsbeat.row.v-d .txt{background:rgba(21,26,30,calc(1 - var(--grow,0)))}
.fsbeat.row.v-d h3{color:#fff}
.fsbeat.row.v-d .fb{color:rgba(244,247,247,.78)}
.fsbeat.row.v-d .fsnote,.fsbeat.row.v-d .fk{color:var(--accent-hi)}
.fsbeat.row.v-d .fsgo{color:rgba(244,247,247,.5)}

/* B: the cinematic card */
.fstory .fsbeat.row.v-b{display:grid;grid-template-columns:1fr;grid-template-areas:"x";height:min(70vh,700px)}
.fstory .fsbeat.row.v-b .thumb{grid-area:x;height:100%}
.fstory .fsbeat.row.v-b .txt{grid-area:x;justify-content:flex-end;padding:clamp(28px,3.8vw,60px);
  background:linear-gradient(0deg,rgba(10,14,16,calc(.82*(1 - var(--grow,0)))) 0%,rgba(10,14,16,calc(.35*(1 - var(--grow,0)))) 45%,rgba(10,14,16,0) 75%);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:clamp(20px,4vw,64px)}
.fsbeat.row.v-b h3{color:#fff;font-size:clamp(2.2rem,4.4vw,4rem);margin:0}
.fsbeat.row.v-b .fb{color:rgba(255,255,255,.86)}
.fsbeat.row.v-b .fsnote,.fsbeat.row.v-b .fk{color:var(--accent-hi)}
.fsbeat.row.v-b .fsgo{color:rgba(255,255,255,.62)}

/* C: the framed photograph */
.fstory .fsbeat.row.v-c{display:grid;grid-template-columns:1fr;grid-template-areas:"thumb" "txt"}
.fstory .fsbeat.row.v-c .thumb{grid-area:thumb;height:min(54vh,560px);border-radius:2px}
.fstory .fsbeat.row.v-c .txt{grid-area:txt;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,4vw,64px);align-items:start;padding-top:clamp(20px,2.4vw,30px)}

@media (max-width:900px){
  /* exactly the room under the header: the words keep their size and the
     picture takes what is left, so nothing is cut on a small phone */
  .fstory .fsbeat.row.v-a,.fstory .fsbeat.row.v-d{grid-template-columns:1fr;grid-template-areas:"txt" "thumb";
    grid-template-rows:auto minmax(110px,1fr);height:calc(100vh - var(--hdr,65px) - 30px)}
  .fstory .fsbeat.row.v-a .thumb,.fstory .fsbeat.row.v-d .thumb{height:auto;min-height:0}
  .fstory .fsbeat.row.v-a .txt,.fstory .fsbeat.row.v-d .txt{padding:22px 20px}
  .fstory .fsbeat.row.v-b{height:min(74vh,640px)}
  .fstory .fsbeat.row.v-b .txt{grid-template-columns:1fr;padding:22px 20px;gap:12px;
    background:linear-gradient(0deg,rgba(10,14,16,calc(.88*(1 - var(--grow,0)))) 0%,rgba(10,14,16,calc(.66*(1 - var(--grow,0)))) 60%,rgba(10,14,16,calc(.22*(1 - var(--grow,0)))) 100%)}
  .fstory .fsbeat.row.v-c .thumb{height:34vh}
  .fstory .fsbeat.row.v-c .txt{grid-template-columns:1fr;gap:8px}
  .fsbeat.row.feat h3{font-size:clamp(1.7rem,7.4vw,2.3rem);margin-bottom:12px}
  .fsbeat.row.v-b h3{font-size:clamp(1.9rem,8vw,2.6rem)}
  .fsbeat.row.feat .fb{font-size:.92rem;line-height:1.55}
  .fsbeat.row.feat .fsgo{display:none}
}

/* ---- Phones: headings scale with the screen (6 October 2026) ----
   The longest Bulgarian words ("строителство", "инженеринг") set in the
   display face are wider than a narrow phone at the desktop minimum size;
   the size now follows the width, and a word that still cannot fit wraps
   rather than leaving the screen. */
@media (max-width:480px){
  h1{font-size:clamp(1.6rem,8.2vw,2.1rem)}
  h1,h2,h3{overflow-wrap:break-word}
}
/* Short phones (360x640 and smaller): the dark panel's words take less room,
   so words and picture fit the space under the header; the description shows
   its first lines (the whole text is on Services). */
@media (max-width:900px) and (max-height:700px){
  .fsbeat.row.feat .txt{padding:16px 18px}
  .fsbeat.row.feat .fk{margin-bottom:8px}
  .fsbeat.row.feat h3{font-size:1.45rem;margin-bottom:8px}
  .fsbeat.row.feat .fb{font-size:.84rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:5;
    -webkit-box-orient:vertical;overflow:hidden}
  .fsbeat.row.feat .fsnote{font-size:.8rem;line-height:1.4;margin-top:8px}
}

/* ---- Project page: the living-photograph opening (prototype, 6 Oct 2026) ----
   Full screen while the footage moves with the scroll (site.js [data-vscrub]),
   then the picture draws back into a framed photograph (--s, 0 to 1) and the
   page's own heading follows beneath. */
.phero{padding:0;margin:0}
.phero-pin{height:230vh}
.phero .fstage{background:transparent;
  clip-path:inset(calc(var(--s,0) * 11vh) calc(var(--s,0) * var(--gutter)) calc(var(--s,0) * 11vh) calc(var(--s,0) * var(--gutter)) round calc(var(--s,0) * 3px))}
/* At the very top of a page the player is never hidden (a player that starts
   invisible there may never be drawn); the still photograph lies over it
   and fades away once the footage is ready. */
.phero .fposter{z-index:1;transition:opacity .8s var(--ease)}
.phero .fstage video{opacity:1;transition:none}
.phero .fscrim{z-index:2}
.phero-copy{z-index:3}
.phero .fscrim{background:linear-gradient(0deg,rgba(8,12,14,.78) 0%,rgba(8,12,14,.35) 30%,rgba(8,12,14,0) 55%);opacity:calc(1 - var(--s,0))}
.phero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,100px);color:#fff;opacity:calc(1 - var(--s,0) * 1.6)}
.phero-copy .kicker{color:var(--accent-hi)}
.phero-copy .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.phero-t{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,6rem);line-height:1;letter-spacing:-.015em;margin:10px 0 0;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.phero-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:14px}
.has-phero .phead{padding-top:clamp(28px,4vw,56px)}
@media (max-width:860px){
  .phero-pin{height:190vh}
  .phero-t{font-size:clamp(2.2rem,11vw,3.4rem)}
  .phero .fstage{clip-path:inset(calc(var(--s,0) * 16vh) calc(var(--s,0) * var(--gutter)) calc(var(--s,0) * 16vh) calc(var(--s,0) * var(--gutter)) round calc(var(--s,0) * 3px))}
}
@media (prefers-reduced-motion:reduce){.phero-pin{height:100vh}}

/* ---- Back button on every page but the home page (10 October 2026) ---- */
.backbtn{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:150;
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px 11px 13px;border-radius:999px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  background:rgba(245,247,248,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-strong);box-shadow:0 8px 24px rgba(21,26,30,.12);
  transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.backbtn .arw{font-size:1rem;line-height:1;transition:transform .3s var(--ease)}
.backbtn:hover{border-color:var(--accent);color:var(--accent)}
.backbtn:hover .arw{transform:translateX(-3px)}
.backbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.lb-open .backbtn{display:none}
@media print{.backbtn{display:none}}

/* ---- Brochures on the home page: a compact row of five covers ---- */
.brhome .brhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,64px);align-items:end}
.brhome .brhead .lede{margin:0;max-width:54ch}
.brgrid.br5{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:34px}
.br5 .brcard .meta{padding:12px 14px 14px}
.br5 .brcard h3{font-size:.86rem;margin-bottom:8px}
.br5 .brcard .facts{font-size:.6rem;margin-bottom:10px}
@media (max-width:1000px) and (min-width:761px){.brgrid.br5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .brhome .brhead{grid-template-columns:1fr;gap:12px}
  .brgrid.br5.hscroll{grid-template-columns:none;grid-auto-columns:62%}
}

/* ---- Project page openings: prototypes (10 October 2026) ---- */
.op{padding-top:clamp(100px,13vh,150px);padding-bottom:0;border:0}
.op-panel .phead,.op-cover .phead,.op-coversplit .phead{padding-top:clamp(30px,4vw,60px)}
/* 1 · dark panel, as the home page's façade row */
.opp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);height:min(66vh,640px);border-radius:2px;overflow:hidden}
.opp-txt{background:var(--ink);color:#F4F7F7;padding:clamp(28px,3.6vw,56px);display:flex;flex-direction:column;justify-content:flex-end}
.opp-txt .kicker{color:var(--accent-hi)}
.opp-txt .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.opp-txt h1{color:#fff;font-size:clamp(2.2rem,4vw,3.6rem);margin:12px 0 4px}
.opp-txt .pfacts{border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
.opp-txt .pfacts dt{color:var(--accent-hi)}
.opp-txt .pfacts dd,.opp-txt .pfacts dd a{color:#fff}
.opp-pic{display:block;overflow:hidden}
.opp-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.opp-pic:hover img{transform:scale(1.03)}
/* 2 · cover */
.opc-pic{position:relative;display:block;height:min(68vh,660px);overflow:hidden;border-radius:2px;color:#fff;text-decoration:none}
.opc-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.opc-pic:hover img{transform:scale(1.03)}
.opc-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,16,.82) 0%,rgba(10,14,16,.3) 40%,rgba(10,14,16,0) 65%)}
.opc-txt{position:absolute;left:clamp(22px,3vw,48px);right:clamp(22px,3vw,48px);bottom:clamp(22px,3vw,44px);z-index:2;display:flex;flex-direction:column;gap:10px}
.opc-txt .kicker{color:#9EDCE0;margin:0;font-size:.74rem}
.opc-txt .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.opc-t{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1;letter-spacing:-.015em}
.pfacts.opc-facts{margin-top:0;padding:22px 0 0;border-top:0;gap:14px 48px}
.opc-facts dd{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.3vw,1.2rem)}
/* 3 · split: the words stay, the photographs pass */
.ops{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:start}
.ops-l{align-self:stretch}
.ops-stick{position:sticky;top:110px}
.ops-r .gallery{grid-template-columns:1fr!important;margin-top:0}
.ops-r .gallery img{width:100%}
/* 4 · reveal: the lead photograph widens as it comes into view (site.js, --r) */
.opr{display:block;margin-top:clamp(34px,5vw,64px);overflow:hidden;
  clip-path:inset(0 calc((1 - var(--r,1)) * 10%) round 2px)}
.opr img{width:100%;height:min(76vh,780px);object-fit:cover;display:block;
  transform:scale(calc(1.08 - var(--r,1) * .08));transform-origin:center}
@media (max-width:860px){
  .opp{grid-template-columns:1fr;height:auto}
  .opp-pic{aspect-ratio:4/3;order:-1}
  .opc-pic{height:62vh}
  .ops{grid-template-columns:1fr}
  .ops-stick{position:static}
  .opr img{height:52vh}
}
/* it steps aside while the reader scrolls down and returns on the way up */
.backbtn.away{transform:translateY(calc(100% + 30px));opacity:0;pointer-events:none}
.backbtn{transition:transform .35s var(--ease),opacity .35s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}

/* ---- Expertise pages, careers and articles (10 October 2026) ---- */
.op-xp .xpbody{padding-top:clamp(40px,5vw,76px)}
.xp-intro{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start}
.xp-lede > p{font-size:clamp(1.08rem,1.35vw,1.32rem);line-height:1.6;color:var(--ink);max-width:58ch;margin:0}
.xp-lede > p + p{margin-top:1.1em;color:var(--ink-2);font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.7}
.xp-lede .svc-list{font-size:1rem;margin-top:20px}
.xp-nav{position:sticky;top:110px;border-left:1px solid var(--line);padding-left:clamp(18px,2vw,30px)}
.xp-nav ol{list-style:none;margin:16px 0 0;padding:0;display:grid}
.xp-nav li a{display:grid;grid-template-columns:2.4em 1fr;gap:6px;padding:9px 0;color:var(--ink-2);text-decoration:none;font-size:.96rem;line-height:1.35;border-bottom:1px solid var(--line);transition:color .3s var(--ease)}
.xp-nav li:last-child a{border-bottom:0}
.xp-nav li a .n{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);padding-top:.28em}
.xp-nav li a:hover{color:var(--accent)}
.xp-nav li a[aria-current]{color:var(--ink);font-weight:600}
.xp-nav li a[aria-current] .n{color:var(--accent)}
.xp-sec{padding-top:clamp(64px,8vw,120px)}
.xp-sec .lede{margin-top:14px}
.xp-sec .dgrid{margin-top:34px}
.op-xp .ctband{margin-top:clamp(64px,8vw,120px)}
.xp-logos{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.xp-go{margin:16px 0 0}
.xp-go a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.xp-go a .arw{display:inline-block;transition:transform .3s var(--ease)}
.xp-go a:hover .arw{transform:translateX(3px)}
.xp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.xp-chips .lbl{width:100%;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.xp-chips a{font-size:.92rem;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--canvas-2);transition:border-color .3s var(--ease),color .3s var(--ease)}
.xp-chips a:hover{border-color:var(--accent);color:var(--accent)}
.ftr .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:980px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr .cols{grid-template-columns:1fr}}
@media (max-width:900px){
  .xp-intro{grid-template-columns:1fr}
  .xp-nav{position:static;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
  .op-xp .xp-intro > .xp-nav:not(.car-fields){display:none}
}
/* careers */
.car-h{font-size:clamp(1.3rem,2vw,1.7rem);margin:clamp(40px,5vw,60px) 0 0}
.car-steps{list-style:none;counter-reset:st;margin:18px 0 0;padding:0;max-width:60ch}
.car-steps li{counter-increment:st;display:grid;grid-template-columns:3rem 1fr;gap:10px;padding:18px 0;border-top:1px solid var(--line);font-size:1.02rem;line-height:1.55}
.car-steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--mono);font-size:.78rem;color:var(--accent);padding-top:.25em}
.car-steps a{color:var(--accent)}
/* articles */
.artgrid{display:grid;gap:clamp(16px,2vw,26px);margin-top:44px;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.artcard{display:flex;flex-direction:column;background:var(--canvas-2);border:1px solid var(--line);border-radius:2px;overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.artcard:hover{border-color:var(--accent-hi);transform:translateY(-4px);box-shadow:var(--shadow-2)}
.artcard .shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--canvas-deep)}
.artcard .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.artcard:hover .shot img{transform:scale(1.05)}
.artcard .meta{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.artcard .kicker{margin:0}
.artcard h3{font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.2;margin:0}
.artcard p{color:var(--ink-2);font-size:.98rem;margin:0}
.artcard .facts{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.art{max-width:70ch}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.art-meta a{color:var(--accent);text-decoration:none}
.art .dek{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5;color:var(--ink);margin:22px 0 1.4em}
.art h2{font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.2;margin:2.1em 0 .7em}
.art > p{margin:0 0 1.1em;font-size:1.06rem;line-height:1.75}
.art ol.steps{list-style:none;counter-reset:st;padding:0;margin:1.4em 0 2em}
.art ol.steps li{counter-increment:st;display:grid;grid-template-columns:2.8rem 1fr;gap:8px;padding:18px 0;border-top:1px solid var(--line);line-height:1.65}
.art ol.steps li:last-child{border-bottom:1px solid var(--line)}
.art ol.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--mono);font-size:.78rem;color:var(--accent);padding-top:.3em}
.art ol.steps b{display:block;font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.3;margin-bottom:6px;color:var(--ink)}
.art-fig{margin:2.2em 0}
.art-fig img{width:100%;display:block;border-radius:2px}
.art-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2em 0}
.art-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px;background:#fff;border:1px solid var(--line)}
.art-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:24px 34px;margin:1.4em 0 2em}
.art-groups h3{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.art-groups ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.art-groups a{color:var(--ink);text-decoration:none;font-size:.98rem;line-height:1.35;border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease)}
.art-groups a:hover{color:var(--accent);border-color:var(--accent)}
.art-rel{margin-top:3em;border-top:1px solid var(--line-strong);padding-top:22px}
.art-rel a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.3;transition:color .3s var(--ease)}
.art-rel a:hover{color:var(--accent)}
.art-rel .arw{color:var(--accent);flex:none}
@media (max-width:600px){.art-strip{grid-template-columns:1fr 1fr}.art-strip a:nth-child(3){display:none}}
.xp-awf{margin-top:34px}
@media (max-width:760px){.xp-awf{grid-template-columns:1fr}}
.art-side .kicker + .art-facts{margin-top:16px}
.art-facts{margin:0 0 34px;display:grid;gap:14px}
.art-facts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.art-facts dd{margin:4px 0 0;font-family:var(--display);font-weight:600;font-size:1rem}
.art-facts dd a{color:var(--accent);text-decoration:none}
.art-side li a .n{color:var(--accent);font-family:var(--body);font-size:.95rem;padding-top:0}
@media (min-width:901px){.art-wrap .art-meta{display:none}.art .dek{margin-top:0}}
@media (max-width:900px){.op-xp .xp-intro > .xp-nav.art-side:not(.car-fields){display:block;margin-top:20px}.art-side .art-facts{display:none}}
/* the longer expertise texts (11 October 2026) */
.xp-lede h2{font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.2;margin:clamp(40px,4.5vw,60px) 0 14px;max-width:30ch}
.xp-lede > p.xp-p{font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.75;color:var(--ink);max-width:64ch;margin:0}
.xp-lede > p.xp-p + p.xp-p{margin-top:1em}
.xp-p a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(28,110,115,.35);text-underline-offset:3px;transition:text-decoration-color .3s var(--ease)}
.xp-p a:hover{text-decoration-color:var(--accent)}

/* ==========================================================================
   Field pages as a chain, and the transition into them (11 October 2026)
   ========================================================================== */
/* the transition: the photograph grows to the screen, then settles */
.xpt{position:fixed;z-index:400;overflow:hidden;background:#0A0E10;border-radius:2px;pointer-events:none}
.xpt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xpt::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,16,.82) 0%,rgba(10,14,16,.3) 40%,rgba(10,14,16,0) 65%)}
.xpt-txt{position:absolute;left:clamp(22px,3vw,48px);right:clamp(22px,3vw,48px);bottom:clamp(22px,3vw,44px);z-index:2;
  display:flex;flex-direction:column;gap:10px;color:#fff;opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease) .12s,transform .6s var(--ease-out) .08s}
.xpt-txt .kicker{color:#9EDCE0;margin:0;font-size:.74rem}
.xpt-txt .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.xpt-t{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1;letter-spacing:-.015em}
.xpt-full{inset:0;border-radius:0}
.xpt-grow{border-radius:0;transition:top .5s var(--ease-out),left .5s var(--ease-out),width .5s var(--ease-out),height .5s var(--ease-out),border-radius .5s}
.xpt-grow .xpt-txt,.xpt-full .xpt-txt,.xpt-settle .xpt-txt{opacity:1;transform:none}
.xpt-settle{transition:top 1.45s var(--xpt-back),left 1.45s var(--xpt-back),width 1.45s var(--xpt-back),height 1.45s var(--xpt-back),border-radius 1.45s}
.xpt-arriving .backbtn{opacity:0}

/* the opening words: the approved paragraph as a statement */
.xp-open{display:grid;gap:clamp(24px,4vw,64px)}
.xp-open.two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
.xp-open .xp-lede > p{font-size:clamp(1.06rem,1.2vw,1.16rem);line-height:1.75;color:var(--ink);max-width:62ch;margin:0}
.xp-open:not(.two) .xp-lede > p{max-width:64ch}
.xp-more{padding-top:6px;border-top:1px solid var(--line)}
.xp-more p{color:var(--ink-2);font-size:1rem;line-height:1.75;margin:16px 0 0;max-width:60ch}
@media (max-width:900px){.xp-open.two{grid-template-columns:1fr}}

/* the chain */
.xchain-sec{padding-top:clamp(70px,9vw,140px)}
.xchain{position:relative;display:grid;gap:clamp(72px,10vw,150px);--axis:104px}
.xc-axis{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--line);pointer-events:none}
.xc-line{position:absolute;inset:0;background:linear-gradient(180deg,var(--accent-bright),var(--accent));transform-origin:top;transform:scaleY(var(--p,0))}
.xc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--axis) minmax(0,1fr);align-items:center}
.xc-txt{grid-column:1;grid-row:1;max-width:520px;justify-self:end;min-width:0}
.xc-pic{grid-column:3;grid-row:1;margin:0;min-width:0}
.xc.flip .xc-txt{grid-column:3;justify-self:start}
.xc.flip .xc-pic{grid-column:1}
.xc-node{grid-column:2;grid-row:1;justify-self:center;z-index:2;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--canvas);border:2px solid var(--line-strong);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-3);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.xc.on .xc-node{background:var(--ink);border-color:var(--accent-bright);color:#fff;box-shadow:0 0 0 7px var(--accent-muted)}
.xc-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--accent);margin:0 0 14px}
.xc-txt h2{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1;margin:0 0 18px}
.xc-txt p{font-size:clamp(1rem,1.08vw,1.06rem);line-height:1.75;color:var(--ink);margin:0 0 1em}
.xc-pic .zoom{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--canvas-deep)}
.xc-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.xc-pic .zoom:hover img{transform:scale(1.04)}
.xc-pic figcaption{margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.xc-pic figcaption a{color:var(--ink-2);text-decoration:none;transition:color .3s var(--ease)}
.xc-pic figcaption a:hover{color:var(--accent)}
.xchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;align-items:center}
.xchips .lbl{width:100%;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.xchip{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:4px 14px 4px 4px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--canvas-2);color:var(--ink);text-decoration:none;font-size:.86rem;line-height:1.2;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.xchip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xchip img,.xchip .xc-ph{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:var(--canvas-deep)}
.xchip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 18px rgba(21,26,30,.08)}
.xc-article{margin:clamp(60px,7vw,100px) 0 0;text-align:center}
.js .xc .xc-txt{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease-out)}
.js .xc .xc-pic{clip-path:inset(9% 9% 9% 9% round 2px);opacity:.35;transition:clip-path 1.15s var(--ease-out),opacity .8s var(--ease)}
.js .xc.seen .xc-txt{opacity:1;transform:none}
.js .xc.seen .xc-pic{clip-path:inset(0 0 0 0 round 2px);opacity:1}
@media (max-width:860px){
  .xchain{--axis:46px;gap:64px}
  .xc-axis{left:23px}
  .xc{grid-template-columns:var(--axis) minmax(0,1fr);align-items:start;row-gap:20px}
  .xc-node{grid-column:1;grid-row:1;width:42px;height:42px;font-size:.66rem;justify-self:start;margin-left:2px}
  .xc-pic,.xc.flip .xc-pic{grid-column:2;grid-row:1}
  .xc-txt,.xc.flip .xc-txt{grid-column:2;grid-row:2;justify-self:stretch;max-width:none}
}

/* six projects first */
.js .pgrid.xp-cut > .pcard:nth-child(n+7){display:none}
.xp-all{margin-top:30px;text-align:center}

/* the end of the page: the seven fields as one chain, then the next one */
.xp-end{padding-top:clamp(80px,10vw,150px)}
.xsteps ol{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative}
.xsteps ol::before{content:"";position:absolute;left:calc(100% / 14);right:calc(100% / 14);top:10px;height:2px;background:var(--line-strong)}
.xsteps li a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--ink-2);text-decoration:none;padding:0 6px}
.xsteps .d{width:22px;height:22px;border-radius:50%;background:var(--canvas);border:2px solid var(--line-strong);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.xsteps li.done .d{background:var(--accent);border-color:var(--accent)}
.xsteps li.cur .d{background:var(--ink);border-color:var(--accent-bright);box-shadow:0 0 0 7px var(--accent-muted)}
.xsteps .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--ink-3)}
.xsteps .t{font-size:.86rem;line-height:1.3;font-weight:500;overflow-wrap:anywhere}
.xsteps li.cur .t{color:var(--ink);font-weight:600}
.xsteps li a:hover .d{border-color:var(--accent)}
.xsteps li a:hover .t{color:var(--accent)}
@media (max-width:760px){.xsteps .t{display:none}.xsteps li a{padding:0}}
.xnext{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:clamp(44px,5vw,70px);min-height:min(58vh,500px);
  border-radius:2px;overflow:hidden;text-decoration:none;color:#F4F7F7;background:var(--ink)}
.xn-txt{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(28px,3.6vw,56px);min-width:0}
.xn-txt .kicker{color:var(--accent-hi);margin:0}
.xn-txt .kicker::before{background:linear-gradient(90deg,var(--accent-hi),transparent)}
.xn-t{font-family:var(--display);font-weight:700;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.04;color:#fff;overflow-wrap:normal}
.xn-d{color:rgba(244,247,247,.78);max-width:46ch;line-height:1.6}
.xn-go{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hi);margin-top:8px}
.xn-go .arw{display:inline-block;transition:transform .35s var(--ease)}
.xnext:hover .xn-go .arw{transform:translateX(5px)}
.xn-pic{position:relative;overflow:hidden;min-height:260px}
.xn-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.xnext:hover .xn-pic img{transform:scale(1.05)}
@media (max-width:860px){.xnext{grid-template-columns:1fr}.xn-pic{order:-1;min-height:0;aspect-ratio:16/10}}

/* Services: the photograph opens the field too; two buttons side by side */
.svc a.shot{display:block}
.svc-more{display:flex;flex-wrap:wrap;gap:10px}

/* titles fitted by site.js: whole words, never broken */
.opc-t,.xc-txt h2,.xn-t{overflow-wrap:normal;word-break:normal}
.opc-txt,.xc-txt{min-width:0}
/* the held moment: the photograph breathes in slowly while full screen, and
   comes to rest as it settles (11 October 2026) */
:root{--xpt-back:cubic-bezier(.65,0,.25,1)}
.xpt img{transform:scale(1);transition:transform 2.2s cubic-bezier(.2,.6,.2,1)}
.xpt-grow img{transform:scale(1.05)}
.xpt-in img{transform:scale(1.06)}
.xpt-in.xpt-settle img{transform:scale(1);transition:transform 1.45s var(--xpt-back)}