/* Archivo and JetBrains Mono, served from this domain rather than from
   Google. Both are SIL Open Font License, so hosting them here is allowed,
   and it stops every visitor's IP being handed to Google on page load —
   the thing EU courts have taken exception to. latin + latin-ext only:
   latin-ext is what carries ď ť ľ ĺ ŕ ô. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════
   MODULAR STUDIO — Technical Blueprint
   ═══════════════════════════════════════════════════ */

:root{
  --paper:      #F4F3EF;
  --paper-2:    #FBFAF7;
  --white:      #FFFFFF;

  --ink:        #141816;
  --ink-2:      #565E59;
  --ink-3:      #8A918C;

  --green:      #2C6A4A;
  --green-2:    #3E8560;
  --green-3:    #6BA98A;

  --line:       #DEDCD4;
  --line-2:     #EBE9E2;

  --grid-fine:  rgba(20,24,22,.045);
  --grid-major: rgba(20,24,22,.055);

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1280px;
  --pad:  40px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --hdr: 82px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, not hidden: overflow-x:hidden turns the body into a scroll container,
     and a sticky header inside one sticks to that container rather than to the
     window — which is why the bar scrolled away. clip contains the same
     overflow without creating the container. */
  overflow-x:clip;
}

img,svg{ display:block; max-width:100%; height:auto; }

/* The photographs come from five shoots — bright sky, night blue, green
   aerial — and read as stock next to each other. One grade over all of them
   settles the colour so they read as a single commission. Line drawings and
   emblems are exempt: they are artwork, not photography. */
.wf img,
.card__art img,
.hero-shot img,
.gal__i img,
.seg__art img,
.pcard__art img,
.ps__f img,
.sg__i img,
.wk__frames img{
  filter:saturate(.84) contrast(1.06) brightness(1.01);
}
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

/* ─────────── grid paper ─────────── */
.grid-bg{
  position:fixed; inset:-10vh -10vw;
  pointer-events:none; z-index:0;
  /* The 24px lines made the paper read as graph paper and fought the
     photographs. Only the 120px module is drawn now: the sheet is still a
     sheet, and the margin furniture still has something to be measured
     against, but the texture is gone. */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px;
  will-change:transform;
  /* it used to fade out by the bottom of the viewport, which left most of every
     screen as bare paper. It now holds across the sheet and only softens at the
     outer edges, the way a printed sheet does. */
  -webkit-mask-image:radial-gradient(150% 130% at 50% 40%, #000 62%, rgba(0,0,0,.35) 100%);
          mask-image:radial-gradient(150% 130% at 50% 40%, #000 62%, rgba(0,0,0,.35) 100%);
}

/* the cursor lights the paper — drawn in canvas, sitting on the grid */
.grid-lit{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
  position:relative; z-index:1;
}

/* ─────────── sheet furniture: the margins do the talking ─────────── */
/* The rule stands in the margin outside the 1280 container, ticked on the same
   24 / 120 module as the paper. Below 1180 there is no margin to stand in. */
.rule{
  position:fixed; z-index:2; pointer-events:none;
  top:0; bottom:0;
  left:max(16px, calc((100vw - var(--wrap)) / 2 - 34px));
  width:26px;
  display:none;
}
/* One continuous line, ticked only on the major module. A tick every 24px
   filled the margin with dashes and read as decoration; at 120px it reads as
   a rule. */
.rule__line{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--line);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12% 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12% 88%, transparent);
}
.rule__line::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 120px);
}
/* the marker rides the rule as the page scrolls */
.rule__mark{
  position:absolute; left:0; width:13px; height:1px;
  background:var(--green);
  transform:translateY(var(--y, 50vh));
  transition:transform .45s var(--ease);
}
/* the section names itself down the margin, reading bottom to top */
.rule__t{
  position:absolute; left:-1px; bottom:14%;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
  transition:opacity .4s var(--ease);
}
/* and the sheet states whose it is down the other margin, reading top to bottom */
.edge{
  position:fixed; z-index:2; pointer-events:none;
  right:max(16px, calc((100vw - var(--wrap)) / 2 - 30px));
  top:26%;
  writing-mode:vertical-rl;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
  display:none;
}
@media (min-width:1180px){ .rule,.edge{ display:block; } }
/* the dark sections carry their own ground, so the furniture inverts over them */
.rule.is-dark .rule__line{ background:rgba(244,243,239,.2); }
.rule.is-dark .rule__line::after{ background:repeating-linear-gradient(180deg, rgba(244,243,239,.36) 0 1px, transparent 1px 120px); }
.rule.is-dark .rule__t{ color:rgba(244,243,239,.5); }
/* over the plate the right margin is photograph, not ground — the line steps
   aside rather than fighting for contrast it cannot win */
.edge{ transition:opacity .5s var(--ease); }
.edge.is-dark{ opacity:0; }
.rule.is-dark .rule__mark{ background:var(--green-3); }

/* ─────────── title block: the sheet signs itself off ─────────── */
.tblock{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  border:1px solid var(--line);
  margin-bottom:44px;
}
.tblock__c{ padding:12px 16px; border-left:1px solid var(--line); min-width:0; }
.tblock__c:first-child{ border-left:0; }
.tblock__c span{
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.tblock__c b{
  display:block; margin-top:5px; font-family:var(--mono);
  font-size:11px; font-weight:500; color:var(--ink-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.tblock__c--n b{ color:var(--green); }
@media (max-width:760px){
  .tblock{ grid-template-columns:1fr 1fr; }
  .tblock__c{ border-left:1px solid var(--line); border-top:1px solid var(--line); }
  .tblock__c:nth-child(odd){ border-left:0; }
  .tblock__c:nth-child(-n+2){ border-top:0; }
}

/* ═══════════ HEADER ═══════════ */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(251,250,247,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line); background:rgba(251,250,247,.9); }

.hdr__in{
  display:flex; align-items:center; gap:32px;
  height:82px; min-width:0;
}

.logo{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.logo__mark{ width:auto; height:33px; flex:0 0 auto; }
/* the wordmark is the one word, set the way the logo sets it: lowercase,
   heavy, tight, in the dark green of the mark */
.logo__txt{
  font-size:23px; font-weight:700; letter-spacing:-.022em; line-height:1;
  color:var(--green); text-transform:lowercase;
}

.nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav a{
  position:relative;
  font-size:11px; font-weight:500;
  letter-spacing:.115em; text-transform:uppercase;
  color:var(--ink-2);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--green);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{ color:var(--green); }
.nav a:hover::after{ transform:scaleX(1); }

/* ─────────── buttons ─────────── */
.btn{
  --bg:transparent;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:13px 24px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg{ width:22px; height:9px; position:relative; z-index:1; transition:transform .35s var(--ease); }
.btn > *{ position:relative; z-index:1; }
.btn--out{ border:1px solid var(--green); color:var(--green); }
.btn--out::before{
  content:""; position:absolute; inset:0; background:var(--green);
  transform:scaleX(0); transform-origin:right; z-index:0;
  transition:transform .42s var(--ease);
}
.btn--out:hover{ color:var(--white); }
.btn--out:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn--out:hover svg{ transform:translateX(4px); }
.btn--sm{ padding:11px 18px; font-size:10px; }
.btn--solid{ background:var(--green); color:var(--white); border:1px solid var(--green); }

.hdr__cta{ flex:0 0 auto; }

/* ─────────── burger ─────────── */
.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; margin-left:auto;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{
  display:block; height:1.5px; width:24px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:82px 0 auto 0; z-index:55;
  background:var(--paper-2); border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden;
  visibility:hidden;
  transition:max-height .45s var(--ease), visibility 0s linear .45s;
}
.drawer.is-open{ max-height:70vh; visibility:visible; transition-delay:0s,0s; }
.drawer__nav{ display:flex; flex-direction:column; padding:8px var(--pad) 28px; }
.drawer__nav a{
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:15px 0; border-bottom:1px solid var(--line-2); color:var(--ink-2);
}
.drawer__nav .btn{ margin-top:20px; border-bottom:0; }

/* ═══════════ HERO ═══════════ */
/* The drawing running into the photograph is the thing that is ours, so it
   runs the full width of the screen rather than sitting in half a column. The
   photograph only covers the right half of the band, so a 1386px source is
   still displayed at its own size or smaller. */
.hero{ position:relative; }
/* The band is a fixed share of the screen, not whatever height the drawing
   happens to work out to at that width. Otherwise every window size frames it
   differently — which is why the header sat at a different place on every
   machine. svh keeps it honest on phones, where the toolbars move. */
.stage{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(520px, calc(100vh - var(--hdr)), 940px);
  height:clamp(520px, calc(100svh - var(--hdr)), 940px);
  overflow:hidden;
}
.stage .scene{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.stage .scene svg{ width:100%; height:100%; }
/* the paper is washed back under the copy so the linework does not read through it */
.stage__wash{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    var(--paper) 0%, rgba(244,243,239,.97) 27%, rgba(244,243,239,.74) 41%, transparent 58%);
}
.stage__over{ position:absolute; inset:0; display:flex; align-items:center; }

.stage__copy{ position:relative; padding-top:8px; }

.crosshair{
  position:absolute; top:-56px; left:-28px;
  width:76px; height:76px; color:var(--green-2);
  pointer-events:none;
  opacity:0; transform:translate(10px,10px);
  animation:xh .8s var(--ease) .1s forwards;
}
.phead .crosshair{ top:-46px; left:-24px; width:60px; height:60px; }
@media (max-width:1180px){ .crosshair,.phead .crosshair{ left:-18px; } }
@media (max-width:1000px){
  /* the hero copy becomes display:contents here, so the mark is placed
     against .wrap instead of the copy column */
  .hero .crosshair{ top:2px; left:calc(var(--pad) - 14px); width:46px; height:46px; }
  .phead .crosshair{ top:-34px; left:-12px; width:46px; height:46px; }
}
@keyframes xh{ to{ opacity:1; transform:none; } }

.stage__copy{ max-width:min(50%, 700px); }
.h1{
  font-size:clamp(40px, 5.2vw, 78px);
  line-height:1.0;
  font-weight:600;
  letter-spacing:-.032em;
}
.h1 .ln{
  display:block; overflow:hidden;
}
.ln{ clip-path:inset(0 0 101% 0); animation:lnIn .9s var(--ease) var(--d,0s) forwards; }
@keyframes lnIn{ to{ clip-path:inset(0 0 -12% 0); } }
.ln--g{ color:var(--green); }

.lede{
  margin-top:30px;
  font-size:clamp(15px,1.28vw,18.5px);
  line-height:1.6;
  color:var(--ink-2);
  max-width:36ch;
}

/* ─────────── process row ─────────── */
.proc{
  display:flex; align-items:flex-start; gap:14px;
  margin-top:52px; flex-wrap:wrap;
}
.proc__i{
  display:flex; flex-direction:column; align-items:center; gap:13px;
  width:68px;
}
.proc__ico{
  color:var(--ink); width:44px; height:44px;
  display:block;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.proc__ico svg{ width:100%; height:100%; }
.proc__lbl{
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); text-align:center; white-space:nowrap;
  transition:color .4s var(--ease);
}
.proc__i.is-on .proc__ico{ color:var(--green); transform:translateY(-3px); }
.proc__i.is-on .proc__lbl{ color:var(--green); }

.proc__ar{
  color:var(--ink-3); width:32px; height:44px;
  display:flex; align-items:center;
}
.proc__ar svg{ width:32px; height:10px; }
.proc__ar path{
  stroke-dasharray:1 0;
}
.proc__ar.is-on{ color:var(--green-2); }

/* ─────────── hero scene ─────────── */

.scene{ width:100%; }
.scene svg{ width:100%; height:auto; overflow:visible; }

/* ═══════════ SECTIONS ═══════════ */
.sect{ position:relative; }
.sect--sol{ padding-block:8px 0; }
.sect--feat{ padding-block:26px 0; }
.sect--about{
  padding-block:clamp(68px, 5.6vw, 96px) clamp(84px, 7vw, 120px);
  /* flat tone under this one: the drawing sheet and the stats rules are doing
     the ruling here, and the paper grid behind them only added noise */
  background:var(--paper);
}

/* ─────────── cards ─────────── */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease);
}
.card__art{ border-bottom:1px solid var(--line); }
.card__body{ padding:28px 32px 32px; }
.card__n{
  display:block; margin-bottom:18px;
  font-size:10.5px; letter-spacing:.14em; color:var(--green);
}
.card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(44,106,74,.05) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform 1.1s var(--ease);
  pointer-events:none;
}
.card:hover{ border-color:var(--green-3); transform:translateY(-3px); }
.card:hover::after{ transform:translateX(130%); }

.card__art{ position:relative; }
.card__t{
  font-size:clamp(16px,1.4vw,20px); font-weight:600;
  letter-spacing:.035em; text-transform:uppercase; color:var(--green);
}
.card__p{
  margin-top:12px; font-size:14px; line-height:1.6; color:var(--ink-2);
  max-width:32ch;
}
.card__body .btn{ margin-top:24px; }

/* ─────────── features ─────────── */
.feats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--paper-2);
  border:1px solid var(--line);
  margin-top:26px;
}
.feat{
  display:flex; align-items:flex-start; gap:14px; min-width:0;
  padding:26px 26px;
  border-left:1px solid var(--line-2);
}
.feat:first-child{ border-left:0; }
.feat__ico{
  width:28px; height:28px; flex:0 0 auto; color:var(--green);
  margin-top:1px;
  transition:transform .45s var(--ease);
}
.feat:hover .feat__ico{ transform:translateY(-2px) scale(1.06); }
.feat h3{
  min-width:0;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
}
.feat p{ margin-top:7px; font-size:12.5px; line-height:1.55; color:var(--ink-2); }

/* ─────────── o nás ─────────── */
.about{
  display:grid;
  /* the drawing is vector, so size costs nothing here and the tail of the page
     stops being three screens with nothing on them */
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  column-gap:56px; row-gap:44px;
  align-items:start;
}
.about__fig{ margin:0; }

/* the drawing sits on its own sheet, corner ticks and all */
.dsheet{
  position:relative;
  border:1px solid var(--line); background:var(--paper-2);
  padding:44px 44px 26px;
}
.dsheet figcaption{
  margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.dsheet__c{ position:absolute; width:13px; height:13px; pointer-events:none; }
.dsheet__c::before,.dsheet__c::after{ content:""; position:absolute; background:var(--green-3); }
.dsheet__c::before{ width:100%; height:1px; top:0; }
.dsheet__c::after{ height:100%; width:1px; left:0; }
.dsheet__c--tl{ top:9px; left:9px; }
.dsheet__c--tr{ top:9px; right:9px; transform:scaleX(-1); }
.dsheet__c--bl{ bottom:9px; left:9px; transform:scaleY(-1); }
.dsheet__c--br{ bottom:9px; right:9px; transform:scale(-1); }

/* the ask, kept on the same sheet as the drawing */
.about__act{ margin-top:28px; display:grid; justify-items:start; gap:9px; }
.about__ct{
  font-size:clamp(19px,1.9vw,26px); font-weight:600; letter-spacing:-.022em; line-height:1.15;
}
.about__act p{ font-size:14px; line-height:1.6; color:var(--ink-2); max-width:36ch; }
.lbl{
  display:block; margin-bottom:22px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green);
}
.about__t{
  font-size:clamp(27px,3.1vw,44px); line-height:1.12;
  font-weight:600; letter-spacing:-.022em;
}
.about__body p{
  margin-top:24px;
  font-size:15px; line-height:1.68; color:var(--ink-2); max-width:46ch;
}
.about__body p + p{ margin-top:16px; }
.about__body .lbl + .about__t{ margin-bottom:0; }
.about__body .btn{ margin-top:26px; }
/* the stats now sit inside the copy column, so they carry less weight than before */
.about__body .specs{ margin-top:40px; }
.about__body .specs li{ padding:22px 14px 0 0; }
.about__body .specs li + li{ padding-left:22px; }
.about__body .specs__n{ font-size:clamp(23px,2.4vw,33px); }
.about__body .specs__l{ margin-top:10px; font-size:9.5px; letter-spacing:.09em; }

/* the ask sits under the drawing, with the number beside the button */
.about__row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:8px; }
.about__tel{
  font-size:11px; letter-spacing:.12em; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.about__tel:hover{ color:var(--green); }

.specs{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.specs li{
  padding:26px 26px 0 0;
  border-left:1px solid var(--line-2);
  padding-left:26px;
}
.specs li:first-child{ border-left:0; padding-left:0; }
.specs__n{
  display:block; font-family:var(--mono);
  font-size:clamp(28px,3.2vw,42px); line-height:1;
  color:var(--green); letter-spacing:-.02em;
}
.specs__n em{ font-style:normal; font-size:.55em; vertical-align:top; margin-left:1px; }
.specs__l{
  display:block; margin-top:12px;
  font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2);
}

/* ═══════════ FOOTER ═══════════ */
.ftr{
  border-top:1px solid var(--line);
  background:var(--paper-2);
  padding-top:56px;
  position:relative; z-index:1;
}
.ftr__in{ display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; }
.ftr__brand{ display:flex; align-items:center; gap:11px; }
/* five columns now, so they are laid on a grid rather than left to flex:
   wrapping a flex row left the last column stranded under a tall gap. */
.ftr__cols{ flex:1 1 640px; min-width:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:34px 40px; }
.ftr__cols div{ display:flex; flex-direction:column; gap:8px; }
.ftr__lbl{
  font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:4px;
}
.ftr__cols a,.ftr__cols p{ font-size:13.5px; color:var(--ink-2); transition:color .25s var(--ease); }
.ftr__cols a:hover{ color:var(--green); }
.ftr__bar{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:48px; padding-block:20px; border-top:1px solid var(--line-2);
  font-size:11px; color:var(--ink-3); letter-spacing:.06em;
}
.mono{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; }
/* every figure on the sheet is set in tabular numerals, so columns of numbers
   align down the page the way a schedule does */
.mono,.specs__n,.wk__r dd,.ps__r dd,.sp__r dd,.chips b,.tblock__c b{
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,.h1,.phead__t,.about__t,.wk__t,.card__t,.about__ct{ text-wrap:balance; }
.lede,.phead__p,.band__p,.rail__hd p{ text-wrap:pretty; }

/* ─────────── focus ─────────── */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

/* ═══════════ reveal ═══════════ */
.rv{ opacity:0; transform:translateY(18px); }
.rv.is-in{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);
}
/* the photograph settles out of a slight overscale as its block arrives —
   the only motion an image makes, and it is over before you look at it */
.card__art,.plt,.anno{ overflow:hidden; }
.rv .card__art img,.rv.hero-shot img,.rv.gal__i img,.rv .seg__art img{
  transform:scale(1.045);
  transition:transform 1.4s var(--ease) var(--d,0s);
}
.rv.is-in .card__art img,.rv.is-in.hero-shot img,.rv.is-in.gal__i img,.rv.is-in .seg__art img{
  transform:none;
}
.hero .rv{ opacity:0; animation:rvIn .9s var(--ease) var(--d,0s) forwards; transform:translateY(14px); }
@keyframes rvIn{ to{ opacity:1; transform:none; } }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1180px){
  :root{ --pad:32px; }
  .nav{ gap:18px; }
  .nav a{ font-size:10px; letter-spacing:.09em; }
}

@media (max-width:1000px){
  .nav,.hdr__cta{ display:none; }
  .burger{ display:flex; }
  .hdr__in{ height:72px; }
  :root{ --hdr:72px; }
  .drawer{ top:72px; }

  /* no room for an overlay at this width: the band becomes drawing then copy,
     so it takes its height from them rather than from the screen */
  .stage{ display:flex; flex-direction:column; height:auto; }
  .stage .scene{ position:relative; inset:auto; height:auto; }
  .stage .scene svg{ height:auto; }
  .stage__wash{ display:none; }
  .stage__over{ position:relative; inset:auto; padding-block:26px 0; }
  .stage__copy{ max-width:none; }
  .stage .scene{ width:140%; max-width:none; margin-left:-20%; }

  .card__body{ padding:24px 24px 28px; }
  .lede{ max-width:46ch; }
  .proc{ margin-top:22px; gap:8px; min-width:0; }
  .proc__i{ width:58px; min-width:0; }
  .proc__ar{ width:24px; }
  .proc__ar svg{ width:24px; }

  .cards{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .sect--about{ padding-block:72px 76px; }
  .about{ grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:30px; }

  .feats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feat{ padding:22px 20px; }
  .feat:nth-child(odd){ border-left:0; }
  .feat:nth-child(n+3){ border-top:1px solid var(--line-2); }
}

@media (max-width:620px){
  :root{ --pad:20px; }
  .h1{ font-size:34px; }
  .card__p{ font-size:13px; }
  .card__body{ padding:20px 22px 24px; }
  .proc{ justify-content:space-between; width:100%; }
  .proc__i{ width:auto; flex:1; }
  .proc__lbl{ font-size:8.5px; letter-spacing:.08em; white-space:normal; }
  .proc__ar{ display:none; }
  .feats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .feat{ flex-direction:column; align-items:center; text-align:center; gap:9px; padding:18px 8px; }
  .feat:nth-child(n+3){ border-top:0; }
  .feat:nth-child(odd){ border-left:1px solid var(--line-2); }
  .feat:first-child{ border-left:0; }
  .feat p{ display:none; }
  .feat h3{ font-size:8px; letter-spacing:.04em; line-height:1.4; }
  .specs{ grid-template-columns:minmax(0,1fr); }
  .specs li{ border-left:0; padding:20px 0; border-top:1px solid var(--line-2); }
  .specs li:first-child{ border-top:0; }
  .specs__l{ margin-top:8px; }
  .ftr__cols{ gap:26px 24px; }
  .ftr__bar{ flex-direction:column; gap:8px; align-items:flex-start; }
}

/* ═══════════ reduced motion ═══════════ */
@media (prefers-reduced-motion:reduce){
  .rl{ overflow-x:auto; }
  .rl__t{ animation:none !important; }
  .rl__d{ display:none; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ═══════════ SCENE (blueprint drawing) ═══════════ */
.sc{ overflow:visible; }

/* line draw-in */
.sc__ln{
  stroke-dasharray:var(--dl) var(--dl);
  stroke-dashoffset:var(--dl);
}
.sc.is-drawn .sc__ln{
  animation:scDraw 1.5s var(--ease) forwards;
}
.sc.is-drawn .sc__ln--n{ animation-duration:2s; animation-delay:.1s; }
.sc.is-drawn .sc__ln--g{ animation-duration:1.8s; animation-delay:.22s; }
.sc.is-drawn .sc__ln--t{ animation-delay:.14s; }
.sc.is-drawn .sc__ln--f{ animation-duration:1.7s; animation-delay:.2s; }
@keyframes scDraw{ to{ stroke-dashoffset:0; } }

/* ghost / notation lines keep their dash pattern once drawn */
.sc.is-drawn .sc__ln--g{ animation-name:scDrawG; }
.sc.is-drawn .sc__ln--n{ animation-name:scDrawN; }
@keyframes scDrawG{ to{ stroke-dashoffset:0; stroke-dasharray:5 4; } }
@keyframes scDrawN{ to{ stroke-dashoffset:0; stroke-dasharray:2 5; } }

/* the split wipe: drawing → built */
.sc .split{
  transform:rotate(var(--ang,-12deg)) translateX(var(--wipe, 880px));
  transition:transform 1.5s var(--ease);
}
.sc.is-split .split{ transform:rotate(var(--ang,-12deg)) translateX(0); }

.sc .split.sc__seam{
  opacity:0;
  transition:transform 1.5s cubic-bezier(.62,.02,.24,1), opacity .9s var(--ease) .35s;
}
.sc.is-split .split.sc__seam{ opacity:.3; }

/* the linework carries on over the photograph — --wo lets a scene dial it back
   when the building it crosses is pale rather than dark */
.sc__wireover{ opacity:0; }
.sc.is-split .sc__wireover{ opacity:var(--wo,.62); transition:opacity 1.3s var(--ease) .55s; }
.sc__wireover path{ stroke:var(--wc,#5CC493); }

/* travelling lights */
.sc__pulse{ opacity:0; }
.sc.is-split .sc__pulse,
.sc.has-notes .sc__pulse{ opacity:1; transition:opacity 1.2s var(--ease) .8s; }
@keyframes scPulse{
  from{ stroke-dashoffset:var(--l); }
  to  { stroke-dashoffset:0; }
}

/* dimensions */
.sc__dims{ opacity:0; }
/* a drawing paired with a photograph, or one that asks for its notation */
.sc.is-split .sc__dims,
.sc.has-notes .sc__dims{ opacity:1; transition:opacity .9s var(--ease) 1.1s; }
.sc__dimtxt{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.07em;
}

@media (prefers-reduced-motion:reduce){
  .sc__ln{ stroke-dashoffset:0 !important; stroke-dasharray:none !important; }
  .sc__ln--g{ stroke-dasharray:5 4 !important; }
  .sc__ln--n{ stroke-dasharray:2 5 !important; }
  .sc .split{ transform:rotate(var(--ang,-12deg)) !important; }
  .sc__dims,.sc__seam{ opacity:1 !important; }
  .sc__wireover{ opacity:var(--wo,.62) !important; }
  .sc__pulse{ opacity:0 !important; }
}

/* ═══════════════════════════════════════════════════
   SUBPAGES
   ═══════════════════════════════════════════════════ */

/* ─────────── nav dropdown ─────────── */
.nav__drop{ position:relative; }
.nav__btn{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:11px; font-weight:500;
  letter-spacing:.115em; text-transform:uppercase; color:var(--ink-2);
  background:none; border:0; padding:6px 0; cursor:pointer;
  transition:color .25s var(--ease);
}
.nav__btn svg{ width:9px; height:6px; transition:transform .3s var(--ease); }
.nav__drop:hover .nav__btn,
.nav__btn[aria-expanded="true"]{ color:var(--green); }
.nav__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav a.is-here,.nav__btn.is-here{ color:var(--green); }
.nav a.is-here::after{ transform:scaleX(1); }

.nav__menu{
  position:absolute; top:calc(100% + 18px); left:-20px; width:308px; z-index:70;
  background:var(--paper-2); border:1px solid var(--line);
  padding:6px; opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow:0 18px 40px -24px rgba(20,24,22,.3);
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu,
.nav__menu.is-open{ opacity:1; visibility:visible; transform:none; }
.nav__menu a{
  display:block; padding:11px 14px; letter-spacing:0; text-transform:none;
  border-bottom:1px solid var(--line-2);
}
.nav__menu a:last-child{ border-bottom:0; }
.nav__menu a::after{ display:none; }
.nav__menu a:hover{ background:var(--paper); }
.nav__menu strong{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  letter-spacing:.02em;
}
.nav__menu a:hover strong,.nav__menu a.is-here strong{ color:var(--green); }
.nav__menu em{
  display:block; font-style:normal; font-size:11px; color:var(--ink-3); margin-top:3px;
}
.drawer__lbl{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding:18px 0 6px;
}

/* ─────────── page header ─────────── */
.eyebrow{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green); margin-bottom:20px;
}
/* a page header that opens on the band, the way the landing does */
/* two classes, so this beats the base .phead padding that follows it — the
   band has to start under the header with nothing above it, like the hero */
.phead.phead--band{ padding-block:0; }
.phead--band .phead__t{ margin-top:4px; }
.phead--band .phead__p{ max-width:46ch; }
.phead__chips{ padding-block:26px 4px; }
.phead--band .crosshair{ top:-46px; left:-24px; }
/* the hero's copy rides above centre because the process chain hangs under it;
   these headers have nothing below the lede, so they are lifted to match */
.phead--band .stage__over{ padding-bottom:7%; }

.phead{ padding-block:clamp(48px, 4.4vw, 76px) 8px; }
.phead__in{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:40px; align-items:center;
}
.phead__copy{ position:relative; }
.phead__t{
  font-size:clamp(32px,4.4vw,58px); line-height:1.04; font-weight:600;
  letter-spacing:-.03em; text-wrap:balance;
}
.phead__p{
  margin-top:22px; font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.65;
  color:var(--ink-2); max-width:52ch;
}
.phead__art{ margin-right:calc((100vw - var(--wrap)) / -2 - var(--pad)); }
@media (max-width:1360px){ .phead__art{ margin-right:calc(var(--pad) * -1); } }
.phead__art img{ width:100%; height:auto; border:1px solid var(--line); }

.chips{ display:flex; flex-wrap:wrap; gap:0; margin-top:32px; border-top:1px solid var(--line); }
.chips li{
  padding:14px 24px 0 0; margin-right:24px; border-right:1px solid var(--line-2);
}
.chips li:last-child{ border-right:0; margin-right:0; }
.chips span{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.chips b{ display:block; margin-top:5px; font-size:13.5px; font-weight:500; }

.phead--proj{ padding-block:52px 0; }
.crumb{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:22px; }
.crumb a{ color:var(--green); }
.crumb span{ margin:0 8px; color:var(--line); }
.phead--proj .phead__t{ max-width:20ch; }
.phead--proj .phead__p{ max-width:60ch; }

/* ─────────── band ─────────── */
.band{ padding-block:clamp(72px, 6.4vw, 108px); }
/* a band that carries a ruled panel draws its own lines — the paper module
   behind it only competes, exactly as it did under O nás */
.band:has(.advs),.band:has(.flow),.band:has(.ps),.band:has(.kb),.band:has(.mg){ background:var(--paper); }
.band--tight{ padding-block:clamp(48px, 4vw, 68px); }
.band--tint{ background:var(--paper-2); border-block:1px solid var(--line); }
.band--flat{ background:var(--paper); }
.band__h{ display:flex; align-items:baseline; gap:18px; }
.band__h::after{ content:""; flex:1; height:1px; background:var(--line); }
.band__h h2{
  font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:-.015em;
}
.band__p{
  margin-top:20px; max-width:62ch; color:var(--ink-2);
  font-size:15px; line-height:1.68;
}
.band__h + .band__p{ margin-bottom:8px; }

/* ─────────── segments ─────────── */
.segs{ display:grid; gap:44px 34px; margin-top:44px; }
.segs--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.segs--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.seg{ display:flex; flex-direction:column; gap:20px; }
.seg__art{ overflow:hidden; border:1px solid var(--line); background:var(--paper-2); }
.seg__art img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.seg:hover .seg__art img{ transform:scale(1.03); }
.seg__n{
  display:block; font-family:var(--mono); font-size:11px; color:var(--green);
  letter-spacing:.1em; margin-bottom:12px;
}
.seg__body h3{ font-size:clamp(16px,1.4vw,19px); font-weight:600; letter-spacing:-.012em; }
.seg__body p{ margin-top:11px; color:var(--ink-2); font-size:14px; line-height:1.65; }
.seg__list{ display:grid; margin-top:20px; }
.seg__list li{
  position:relative; padding:10px 0 10px 20px;
  border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ink-2);
}
.seg__list li::before{
  content:""; position:absolute; left:0; top:17px;
  width:8px; height:1px; background:var(--green);
}

/* ─────────── advantages ─────────── */
/* A schedule, not a run of paragraphs: the block is one ruled panel on the
   sheet and every claim is a cell in it, numbered in its own gutter. Loose
   text on the grid read as a document that had not been designed. */
.advs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin-top:40px;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.advs--2{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0; }
.advs li{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:20px;
  padding:28px 30px 32px;
  /* a short claim must not have its rows stretched apart to fill the cell —
     every description starts the same distance under its title */
  align-content:start;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  transition:background .5s var(--ease);
}
/* the panel's own frame already draws the outer edges */
.advs li:nth-child(3n+1){ border-left:0; }
.advs li:nth-child(-n+3){ border-top:0; }
.advs--2 li:nth-child(3n+1){ border-left:1px solid var(--line); }
.advs--2 li:nth-child(-n+3){ border-top:1px solid var(--line); }
.advs--2 li:nth-child(2n+1){ border-left:0; }
.advs--2 li:nth-child(-n+2){ border-top:0; }

.advs__n{
  grid-row:1 / span 2; padding-top:3px;
  font-family:var(--mono); font-size:10.5px; color:var(--green); letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.advs h3{ font-size:14px; font-weight:600; letter-spacing:.01em; align-self:start; }
.advs p{ grid-column:2; margin-top:9px; font-size:13.5px; line-height:1.62; color:var(--ink-2); }
/* the cell lifts off the panel as you read it, and the rule runs green */
.advs li::after{
  content:""; position:absolute; left:-1px; top:-1px; width:0; height:1px;
  background:var(--green); transition:width .55s var(--ease);
}
.advs li:hover{ background:var(--paper); }
.advs li:hover::after{ width:44px; }

/* ─────────── the works orbit ─────────── */
.dgo{ margin-top:44px; }
.dgo__plate{ position:relative; }
.dgo__net{ display:block; width:100%; height:auto; }

.dgo__ring circle{ stroke:var(--green-3); stroke-width:1; stroke-dasharray:3 5; opacity:.85; }
.dgo__div path{ stroke:var(--line); stroke-width:1; }
.dgo__spoke path{ stroke:var(--green-3); stroke-width:1.1; }
.dgo__mod path{ stroke:var(--green); stroke-width:1.3; }
.dgo__mark path{ fill:var(--paper); stroke:var(--green); stroke-width:1.4; }
.dgo__node circle{ fill:var(--paper); stroke:var(--green); stroke-width:1.5; }

/* what the orbit is around */
.dgo__c{
  position:absolute; left:50%; top:50%; transform:translate(-50%, 46px);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}

/* The labels ride the drawing at the angles their nodes sit on, and carry the
   band's own tone so a spoke passing behind one is masked rather than running
   through the words — the way a drawing breaks a line under its annotation. */
.dgo__lb,.dgo__s{
  position:absolute; width:min(17%, 200px);
  background:var(--paper-2); padding:4px 8px; margin:-4px -8px;
}
.dgo__lb--r,.dgo__s--r{ transform:translateY(-50%); }
.dgo__lb--l,.dgo__s--l{ transform:translate(-100%, -50%); text-align:right; }

.dgo__ln{
  display:block; font-size:9.5px; letter-spacing:.14em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.dgo__lt{
  margin-top:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  line-height:1.35;
}
.dgo__lp{ margin-top:7px; font-size:11.5px; line-height:1.55; color:var(--ink-2); }

/* the steps sit in the band between the two orbits */
.dgo__s{ width:min(13%, 150px); }
.dgo__ico{ display:block; width:26px; height:26px; color:var(--green); }
.dgo__s--l .dgo__ico{ margin-left:auto; }
.dgo__sn{
  display:block; margin:8px 0 5px;
  font-size:9.5px; letter-spacing:.14em; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.dgo__sh{ font-size:11.5px; font-weight:600; line-height:1.3; }

/* the reading-order version, for the widths the orbit cannot serve */
.dgf{ display:none; }
.dgf__i{ padding:22px 0; border-top:1px solid var(--line); }
.dgf__i:first-child{ border-top:0; }
.dgf__i--n{ padding-left:16px; border-left:1px solid var(--green-3); }
.dgf__n{
  display:block; font-size:9.5px; letter-spacing:.14em; color:var(--green);
  margin-bottom:7px; font-variant-numeric:tabular-nums;
}
.dgf__i h3{ font-size:12.5px; font-weight:600; letter-spacing:.06em; }
.dgf__i p{ margin-top:7px; font-size:12.5px; line-height:1.6; color:var(--ink-2); }

@media (max-width:1000px){ .dgo__lp{ display:none; } }
/* Below this the orbit is smaller than the words hung on it, so it is put
   away and the same content reads straight down the page. */
@media (max-width:860px){
  .dgo__plate{ display:none; }
  .dgf{ display:block; }
}

/* ─────────── a sector opens on its own photographs ─────────── */
.seg__open{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; position:relative; text-align:left;
}
.seg__open img{ display:block; }
.seg__cue{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:9px;
  padding:11px 13px;
  background:linear-gradient(0deg, rgba(20,24,22,.82), rgba(20,24,22,0));
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,243,239,.9);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.seg__cue b{ color:var(--green-3); font-weight:500; font-variant-numeric:tabular-nums; }
.seg__cue svg{ width:20px; height:8px; margin-left:auto; }
.seg__open:hover .seg__cue,.seg__open:focus-visible .seg__cue{ opacity:1; transform:none; }
.seg__open:hover img{ transform:scale(1.03); }

.segov{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 54px);
  background:rgba(12,15,13,.94);
  opacity:0; transition:opacity .35s var(--ease);
}
.segov[hidden]{ display:none; }
.segov.is-open{ opacity:1; }
.segov__in{ width:min(1180px, 100%); }
.segov__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px;
}
.segov__t{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-3);
}
.segov__x{
  appearance:none; cursor:pointer; padding:0;
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:1px solid rgba(244,243,239,.26); color:rgba(244,243,239,.8);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.segov__x svg{ width:18px; height:18px; }
.segov__x:hover{ border-color:var(--green-3); color:var(--green-3); }
/* the slider keeps its own frame; the overlay only holds it */
.segov .ps{ margin-top:0; }

/* ─────────── contact sheet: photographs filed on a grid ─────────── */
.sg{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border:1px solid var(--line); background:var(--paper-2);
  margin-top:38px;
}
.sg--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sg__i{
  position:relative; margin:0;
  padding:16px 16px 14px;
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  transition:background .45s var(--ease);
}
/* the panel's own frame draws the outer edges */
.sg--3 .sg__i:nth-child(3n+1){ border-left:0; }
.sg--3 .sg__i:nth-child(-n+3){ border-top:0; }
.sg__art{
  display:block; overflow:hidden; background:var(--line-2);
  border:1px solid var(--line);
}
.sg__i img{
  width:100%; height:100%; display:block;
  aspect-ratio:4 / 3; object-fit:cover;
  transition:transform .9s var(--ease);
}
.sg__i:hover{ background:var(--paper); }
.sg__i:hover img{ transform:scale(1.035); }
.sg__n{
  position:absolute; left:16px; top:-8px; z-index:1;
  padding:0 5px; background:var(--paper-2);
  font-size:9.5px; letter-spacing:.12em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.sg__i:hover .sg__n{ background:var(--paper); }
.sg__i figcaption{
  margin-top:11px;
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.5;
}
@media (max-width:900px){
  .sg,.sg--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sg--3 .sg__i:nth-child(n){ border-left:1px solid var(--line); border-top:1px solid var(--line); }
  .sg--3 .sg__i:nth-child(2n+1){ border-left:0; }
  .sg--3 .sg__i:nth-child(-n+2){ border-top:0; }
}
@media (max-width:600px){
  .sg,.sg--3{ grid-template-columns:minmax(0,1fr); }
  .sg--3 .sg__i:nth-child(n){ border-left:0; border-top:1px solid var(--line); }
  .sg--3 .sg__i:first-child{ border-top:0; }
}

/* ─────────── the battery container, in section ─────────── */
.kb{ margin-top:44px; }
.kb__plate{ position:relative; }
.kb__net{ display:block; width:100%; height:auto; }
.kb__k{ stroke:var(--green); stroke-width:1.7; }
.kb__t{ stroke:var(--green-2); stroke-width:1.05; opacity:.85; }
.kb__f{ stroke:var(--green-2); stroke-width:.7; opacity:.6; }
.kb__n{ stroke:var(--green-3); stroke-width:.8; stroke-dasharray:3 4; opacity:.75; }
/* the air path is the one moving idea on the sheet, so it reads brighter */
.kb__air{ stroke:#4FC48F; stroke-width:1.3; stroke-dasharray:6 5; color:#4FC48F; }
.kb__ld path{ stroke:var(--green-3); stroke-width:1; }
/* centrelines, cable run, ground, axis bubbles, elevation marks */
.kb__cl path{ stroke:var(--green-3); stroke-width:.6; stroke-dasharray:14 5 2 5; opacity:.45; }
.kb__cb{ stroke:var(--green-2); stroke-width:.9; stroke-dasharray:2 4; opacity:.8; }
.kb__gr path{ stroke:var(--ink-3); stroke-width:.8; opacity:.5; }
.kb__ax circle{ stroke:var(--green-2); stroke-width:1; fill:var(--paper); }
.kb__ax text{
  font-family:var(--mono); font-size:11px; fill:var(--green);
  letter-spacing:0;
}
.kb__dim--s{ font-size:10.5px; fill:var(--ink-3); }
.kb__dm{ stroke:var(--green-2); stroke-width:.9; opacity:.8; }
.kb__dim,.kb__ttl{
  font-family:var(--mono); font-size:13px; fill:var(--ink-2);
  letter-spacing:.08em;
}
.kb__ttl{ font-size:11px; letter-spacing:.2em; fill:var(--ink-3); }

.kb__lb{
  position:absolute; width:min(15%, 175px);
  background:var(--paper); padding:4px 8px; margin:-4px -8px;
}
.kb__lb--r{ transform:translate(-100%, -50%); text-align:right; }
.kb__lb:not(.kb__lb--r){ transform:translateY(-50%); }
.kb__lb > span{
  font-size:9.5px; letter-spacing:.14em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
.kb__lb h3{
  margin-top:6px;
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.35;
}
.kb__lb p{ margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--ink-2); }
.kb__cr{
  position:absolute; left:16.7%; bottom:0;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:860px){
  .kb__plate{ display:none; }
  .kb .dgf{ display:block; }
}

/* ─────────── the origin, drawn: two firms converging ─────────── */
.mg{ margin-top:44px; }
.mg__plate{ position:relative; }
.mg__net{ display:block; width:100%; height:auto; }
.mg__ln{ stroke:var(--green-3); stroke-width:1.2; }
/* the merged line is the company itself, so it carries the full weight */
.mg__ln--k{ stroke:var(--green); stroke-width:1.6; }
.mg__dot{ fill:var(--paper); stroke:var(--green); stroke-width:1.5; }
.mg__st{ fill:var(--paper); stroke:var(--green); stroke-width:1.4; }
.mg__tk{ stroke:var(--green); stroke-width:1.2; }

.mg__lb{
  position:absolute; width:min(24%, 270px);
  background:var(--paper); padding:4px 8px; margin:-4px -8px;
}
.mg__lb--u{ transform:translateY(-100%); }
.mg__lb--r{ transform:translate(-100%, -100%); text-align:right; }
.mg__ln1{
  display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); font-variant-numeric:tabular-nums;
}
.mg__lb h3{
  margin-top:7px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.35;
}
.mg__lb p{ margin-top:7px; font-size:12px; line-height:1.55; color:var(--ink-2); }

@media (max-width:860px){
  .mg__plate{ display:none; }
  .mg .dgf{ display:block; }
}

/* ─────────── process flow ─────────── */
.flow{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; margin-top:40px;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.flow__i{
  padding:30px 30px 34px;
  border-left:1px solid var(--line);
  transition:background .5s var(--ease);
}
.flow__i:first-child{ border-left:0; }
.flow__i:hover{ background:var(--paper); }
.flow__ico{ display:block; width:38px; height:38px; color:var(--green); }
.flow__ico svg{ width:100%; height:100%; }
.flow__n{
  display:block; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  letter-spacing:.14em; margin:18px 0 8px;
}
.flow h3{ font-size:14px; font-weight:600; }
.flow p{ margin-top:9px; font-size:13px; line-height:1.6; color:var(--ink-2); }

/* ─────────── project grid ─────────── */
.pgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:32px; }
.pc{ display:block; border:1px solid var(--line); background:var(--paper-2); transition:border-color .4s var(--ease), transform .5s var(--ease); }
.pc:hover{ border-color:var(--green-3); transform:translateY(-3px); }
.pc__art{ display:block; overflow:hidden; background:var(--line-2); }
.pc__art img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.pc:hover .pc__art img{ transform:scale(1.045); }
.pc__b{ display:block; padding:18px 20px 20px; }
.pc__tag{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); margin-bottom:11px;
}
.pc__t{ display:block; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-.01em; }
.pc__m{ display:block; margin-top:9px; font-size:10.5px; color:var(--ink-3); letter-spacing:.03em; }
.pc.is-hidden{ display:none; }
.empty{ margin-top:32px; color:var(--ink-3); font-size:12px; }

.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{
  font:inherit; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line); padding:8px 13px; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.fchip:hover{ color:var(--green); border-color:var(--green-3); }
.fchip.is-on{ color:var(--white); background:var(--green); border-color:var(--green); }

/* ─────────── project slider: one at a time, under a frame ─────────── */
.ps{ position:relative; margin-top:36px; }
.ps__stage{
  position:relative; overflow:hidden;
  aspect-ratio:16 / 7.6;
  background:var(--ink);
}
.ps__f{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility 0s linear .7s;
}
.ps__f.is-on{ opacity:1; visibility:visible; transition-delay:0s,0s; }
.ps__f img{ width:100%; height:100%; object-fit:cover; }
/* the caption sits on the photograph, so the photograph is darkened under it */
.ps__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,24,22,.8) 0%, rgba(20,24,22,.46) 34%, rgba(20,24,22,.1) 62%, transparent 78%),
    linear-gradient(0deg, rgba(20,24,22,.66) 0%, rgba(20,24,22,.12) 40%, transparent 62%);
}
/* the registration frame the drawings are set in, laid over the plate */
.ps__frame{
  position:absolute; inset:26px; pointer-events:none; z-index:2;
  border:1px solid rgba(255,255,255,.4);
}
.ps__frame::after{
  content:""; position:absolute; top:-26px; bottom:-26px; left:38%; width:1px;
  background:rgba(255,255,255,.22);
}

.ps__caps{ position:absolute; left:56px; bottom:52px; right:56px; z-index:3; }
.ps__c{
  position:absolute; left:0; bottom:0; max-width:34ch;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .7s var(--ease), visibility 0s linear .55s;
}
.ps__c.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:.12s,.12s,0s; }
.ps__tag{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-3); }
.ps__t{
  margin-top:12px;
  font-size:clamp(21px,2.1vw,31px); font-weight:600; letter-spacing:-.024em; line-height:1.1;
  color:var(--white);
}
.ps__m{ display:block; margin-top:12px; font-size:10.5px; letter-spacing:.1em; color:rgba(244,243,239,.62); }
.ps__lnk{
  display:inline-flex; align-items:center; gap:11px; margin-top:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-3); transition:color .3s var(--ease);
}
.ps__lnk svg{ width:22px; height:9px; transition:transform .35s var(--ease); }
.ps__lnk:hover{ color:var(--paper); }
.ps__lnk:hover svg{ transform:translateX(5px); }

/* the arrows stand in the frame's margin, the way they do on the plate */
.ps__a{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  appearance:none; cursor:pointer;
  width:42px; height:42px; padding:0; display:grid; place-items:center;
  background:rgba(20,24,22,.35); border:1px solid rgba(255,255,255,.32);
  color:rgba(255,255,255,.85);
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.ps__a svg{ width:22px; height:9px; }
.ps__a--p{ left:52px; }
.ps__a--n{ right:52px; }
.ps__a:hover{ background:rgba(20,24,22,.6); border-color:var(--green-3); color:var(--green-3); }

.ps__dots{ position:absolute; right:56px; bottom:52px; z-index:3; display:flex; gap:2px; }
/* the same rule on the smaller slider, which runs out of room sooner */
.ps__dots--tick{ gap:0; align-items:flex-end; }
.ps__dots--tick .ps__d{ padding:0 3px; border-top:0; }
.ps__dots--tick .ps__d i{
  display:block; width:2px; height:13px; background:rgba(244,243,239,.4);
  transition:height .35s var(--ease), background .35s var(--ease);
}
.ps__dots--tick .ps__d:hover i{ background:rgba(244,243,239,.8); }
.ps__dots--tick .ps__d.is-on i{ height:22px; background:var(--green-3); }
.ps__d{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:6px 8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:rgba(244,243,239,.4);
  border-top:1px solid rgba(244,243,239,.22);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.ps__d:hover{ color:rgba(244,243,239,.75); }
.ps__d.is-on{ color:var(--green-3); border-top-color:var(--green-3); }

@media (max-width:900px){
  .ps__stage{ aspect-ratio:4 / 3.4; }
  .ps__frame{ inset:16px; }
  .ps__frame::after{ display:none; }
  .ps__caps{ left:34px; right:34px; bottom:34px; }
  .ps__a{ width:38px; height:38px; }
  .ps__a--p{ left:30px; } .ps__a--n{ right:30px; }
  .ps__dots{ display:none; }
}
@media (max-width:620px){
  /* A phone frame this tall cropped a landscape photograph to a strip of its
     middle, and the caption then sat on what was left. So on a phone the
     photograph takes the top of the plate at roughly its own shape, and the
     caption drops onto the dark below it instead of onto the building. */
  .ps__stage{ aspect-ratio:4 / 4.4; }
  .ps__f, .ps__stage::after{ bottom:30%; }
  .ps__frame{ inset:14px 14px calc(30% + 14px); }
  .ps__stage::after{
    background:linear-gradient(0deg, rgba(20,24,22,.5) 0%, transparent 46%);
  }
  .ps__caps{ left:26px; right:26px; bottom:24px; }
  .ps__c{ max-width:none; padding-right:96px; }
  .ps__t{ font-size:19px; }
  .ps__a{ top:auto; bottom:22px; transform:none; }
  .ps__a--p{ left:auto; right:74px; } .ps__a--n{ right:26px; }
}

/* ─────────── showcase: the projects at full size ─────────── */
.sw{
  position:relative; z-index:1;
  width:100vw; margin-left:calc(50% - 50vw);
  background:var(--ink);
}
.sw__stage{
  position:relative; overflow:hidden;
  height:clamp(560px, calc(100vh - var(--hdr)), 940px);
  height:clamp(560px, calc(100svh - var(--hdr)), 940px);
}
.sw__frames{ position:absolute; inset:0; }
.sw__f{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
}
.sw__f.is-on{ opacity:1; visibility:visible; }
.sw__f img{ width:100%; height:100%; object-fit:cover; }

/* the copy sits on the photograph, so the photograph is drawn back under it */
.sw__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(20,24,22,.82) 0%, rgba(20,24,22,.46) 30%, rgba(20,24,22,.08) 58%, transparent 74%),
    linear-gradient(0deg, rgba(20,24,22,.72) 0%, rgba(20,24,22,.12) 34%, transparent 56%),
    linear-gradient(270deg, rgba(20,24,22,.5) 0%, transparent 18%);
}

/* The curtain: a skewed panel that sweeps the frame, with a green edge riding
   its leading side. The photograph is swapped while it is covered, so the only
   thing animating is one transform — no image is scaled or re-rastered. */
/* The panel has to cover the whole frame for long enough that the photograph
   can be swapped behind it without any part of the new one showing early. At
   132% wide it covered the frame for only a quarter of its travel and the swap
   landed on the edge of that window — which is why a sliver of the next
   picture appeared before the sweep reached it. At 190% the window is wide
   enough to swap in the middle of it with room either side. Widened again to
   260% when the sweep was shortened: a faster sweep crosses the same window in
   less time, and at 190% the swap had eight milliseconds of margin. */
.sw__curtain{
  position:absolute; top:-8%; bottom:-8%; left:0; width:260%;
  transform:translateX(-108%) skewX(-11deg);
  background:var(--ink);
  pointer-events:none; z-index:3;
}
.sw__curtain i{
  position:absolute; top:0; bottom:0; right:0; width:2px; background:var(--green-3);
}
.sw.is-wiping .sw__curtain{
  transform:translateX(46%) skewX(-11deg);
  transition:transform .9s cubic-bezier(.62,0,.24,1);
}

.sw__over{ position:absolute; inset:0; z-index:4; padding-block:44px 40px; }

/* where you are in the set */
.sw__no{
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(244,243,239,.5);
}
.sw__no b{ color:var(--green-3); font-weight:500; font-variant-numeric:tabular-nums; }
.sw__no i{ display:block; width:34px; height:1px; background:rgba(244,243,239,.3); }

/* the title block, set on the plate */
.sw__caps{ position:absolute; left:var(--pad); right:var(--pad); bottom:74px; }
.sw__c{
  position:absolute; left:0; bottom:0; max-width:min(46ch, 60%);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .7s var(--ease), visibility 0s linear .5s;
}
.sw__c.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:.34s,.34s,0s; }
.sw__tag{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-3); }
.sw__t{
  margin-top:14px;
  font-size:clamp(28px,3.4vw,52px); font-weight:600; letter-spacing:-.03em; line-height:1.02;
  color:var(--white); text-wrap:balance;
}
.sw__m{
  display:block; margin-top:16px;
  font-size:10.5px; letter-spacing:.1em; color:rgba(244,243,239,.66);
  font-variant-numeric:tabular-nums;
}
.sw__lnk{
  display:inline-flex; align-items:center; gap:11px; margin-top:24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-3); transition:color .3s var(--ease);
}
.sw__lnk svg{ width:22px; height:9px; transition:transform .35s var(--ease); }
.sw__lnk:hover{ color:var(--paper); }
.sw__lnk:hover svg{ transform:translateX(5px); }

/* the index runs down the right edge, no plate under it */
.sw__idx{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end;
}
.sw__d{
  appearance:none; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:5px 0; width:74px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:rgba(244,243,239,.42);
  transition:color .35s var(--ease);
}
.sw__d i{
  display:block; width:20px; height:1px; background:var(--green-3);
  transform:scaleX(.25); transform-origin:right; opacity:.4;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.sw__d:hover{ color:rgba(244,243,239,.85); }
.sw__d:hover i{ opacity:.8; }
.sw__d.is-on{ color:var(--white); }
.sw__d.is-on i{ transform:none; opacity:1; background:var(--white); }

/* Past a dozen slides a column of numbers is taller than the band, so the
   index becomes a run of ticks and the counter carries the number. */
.sw__idx--tick{ gap:0; }
.sw__idx--tick .sw__d{ width:26px; padding:3px 0; justify-content:flex-end; }
.sw__idx--tick .sw__d i{
  width:14px; background:rgba(244,243,239,.5);
  transform:none; opacity:1;
  transition:width .35s var(--ease), background .35s var(--ease);
}
.sw__idx--tick .sw__d:hover i{ width:20px; background:rgba(244,243,239,.85); }
.sw__idx--tick .sw__d.is-on i{ width:26px; background:var(--white); }

.sw__arr{ position:absolute; right:var(--pad); bottom:40px; display:flex; gap:8px; }
.sw__a{
  appearance:none; cursor:pointer;
  width:46px; height:38px; padding:0; display:grid; place-items:center;
  background:none; border:1px solid rgba(244,243,239,.26); color:rgba(244,243,239,.75);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.sw__a svg{ width:24px; height:10px; }
.sw__a:hover{ border-color:var(--green-3); color:var(--green-3); background:rgba(20,24,22,.4); }

/* the rule at the foot fills as the slide runs */
.sw__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(244,243,239,.14); z-index:4; }
.sw__bar i{ display:block; height:100%; width:0; background:var(--green-3); }
.sw.is-running .sw__bar i{ animation:swBar var(--dur, 7s) linear forwards; }
@keyframes swBar{ from{ width:0; } to{ width:100%; } }

@media (max-width:900px){
  .sw__stage{ height:clamp(440px, calc(82svh - var(--hdr)), 620px); }
  .sw__caps{ bottom:88px; }
  .sw__c{ max-width:none; }
  .sw__idx{ display:none; }
  .sw__arr{ left:var(--pad); right:auto; bottom:34px; }
}

@media (max-width:620px){
  /* on a phone the showcase was 390 wide by 760 tall — a 0.5 frame showing a
     sliver of a landscape photograph, blown up. Give it the shape of the
     photographs instead; the section keeps the full width, so it still reads
     as the full-bleed band it is. */
  .sw__stage{ height:auto; aspect-ratio:4 / 5.7; }
  .sw__frames, .sw__scrim, .sw__curtain{ bottom:41%; }
  .sw__caps{ bottom:88px; }
  .sw__t{ font-size:clamp(22px,6.4vw,30px); }
}

/* ─────────── kontakt: the dopyt sheet ─────────── */
.csheet{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:0;
  border:1px solid var(--line); background:var(--paper-2);
  margin-top:14px;
}
.csheet__info{
  padding:44px 44px 40px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:0;
}
.csheet .form{ padding:44px 46px 40px; }
.csheet__lbl{
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:22px;
}
/* the three channels, set large — this column IS the contact page */
.csheet__big{
  display:block; padding:18px 0 20px;
  border-top:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.csheet__big span{
  display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}
.csheet__big b{
  display:block; margin-top:8px;
  font-size:clamp(16px,1.5vw,21px); font-weight:600; letter-spacing:-.015em; line-height:1.3;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
a.csheet__big:hover{ border-top-color:var(--green-3); }
a.csheet__big:hover b{ color:var(--green); }
.csheet__fak{ margin-top:auto; padding-top:26px; border-top:1px solid var(--line); }

/* fields numbered the way a printed form numbers them */
.fld--no > span{ display:flex; align-items:baseline; gap:9px; }
.fld--no > span i{
  font-style:normal; font-size:9px; letter-spacing:.1em; color:var(--green);
  font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  .csheet{ grid-template-columns:minmax(0,1fr); }
  .csheet__info{ border-right:0; border-bottom:1px solid var(--line); padding:30px 26px; }
  .csheet .form{ padding:30px 26px; }
  .csheet__fak{ margin-top:26px; }
}

/* ─────────── contact: the two works on a map ─────────── */
/* Each works is a filed card: caption block on the left the way the spec
   tables read, the map itself desaturated so it sits in the paper palette
   rather than shouting Google blue — colour comes back on hover. */
.wmaps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.wmap{
  margin:0; display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); background:var(--paper-2);
}
.wmap__c{ padding:22px 24px 20px; border-bottom:1px solid var(--line); }
.wmap__lbl{
  display:block; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green);
}
.wmap__t{
  display:block; margin-top:8px;
  font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--ink);
}
.wmap__addr{
  display:block; margin-top:5px; font-size:13.5px; color:var(--ink-2);
}
.wmap__a{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  transition:color .25s var(--ease);
}
.wmap__a svg{ width:20px; height:8px; }
.wmap__a:hover{ color:var(--green); }
.wmap__f{ position:relative; aspect-ratio:16/10; background:var(--paper); }
.wmap__f iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(.92); opacity:.92;
  transition:filter .5s var(--ease), opacity .5s var(--ease);
}
/* the plate before the map is asked for: ruled like the rest of the drawings */
.wmap__load{
  position:absolute; inset:0; width:100%; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--line) 27px 28px),
    var(--paper);
  color:var(--ink-2); text-align:center; cursor:pointer;
  transition:color .25s var(--ease);
}
.wmap__load:hover{ color:var(--green); }
.wmap__pin svg{ width:26px; height:26px; }
.wmap__load b{ font-size:13.5px; font-weight:600; }
.wmap__note{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.wmap:hover .wmap__f iframe{ filter:grayscale(0) contrast(1); opacity:1; }

@media (max-width:820px){
  .wmaps{ grid-template-columns:minmax(0,1fr); }
  .wmap__c{ padding:18px 20px 16px; }
  .wmap__f{ aspect-ratio:4/3; }
}

/* ─────────── project detail ─────────── */
.hero-shot{ margin:0; border:1px solid var(--line); overflow:hidden; }
.hero-shot img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:52px; margin-top:44px; align-items:start; }
.split--spec{ align-items:start; }
.sp{ margin:0; border-top:1px solid var(--line); }
.sp__r{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.sp dt{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.sp dd{ margin:0; font-size:13.5px; }
.sp--sm .sp__r{ padding:9px 0; }
.prose p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); max-width:62ch; }
.prose p + p{ margin-top:18px; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose--wide p{ max-width:74ch; }
.prose--legal h3{ font-size:15px; font-weight:600; margin-top:32px; }
.prose--legal h3:first-child{ margin-top:0; }
.prose--legal p{ margin-top:10px; max-width:70ch; }

.gal{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.gal__i{ margin:0; border:1px solid var(--line); overflow:hidden; background:var(--paper-2); }
/* an odd last photograph was leaving half a row empty — it runs the full
   width instead, so the gallery always closes on a straight edge */
.gal__i:last-child:nth-child(odd){ grid-column:1 / -1; }
.gal__i:last-child:nth-child(odd) img{ aspect-ratio:21 / 9; }
.gal__i img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }

.pager{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pager__a{ display:block; max-width:44%; }
.pager__a--n{ text-align:right; margin-left:auto; }
.pager__a span{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pager__a b{ display:block; margin-top:8px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; transition:color .25s var(--ease); }
.pager__a:hover b{ color:var(--green); }

/* ─────────── o nás ─────────── */
.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:36px; border-top:1px solid var(--line); }
.two__c{ padding:28px 34px 8px 0; margin-right:34px; border-right:1px solid var(--line-2); }
.two__c:last-child{ border-right:0; margin-right:0; padding-right:0; }
.two__n{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:14px; }
.two__c h3{ font-size:clamp(17px,1.7vw,21px); font-weight:600; letter-spacing:-.015em; }
.two__c p{ margin-top:12px; font-size:14.5px; line-height:1.68; color:var(--ink-2); }

.rl{
  margin-top:36px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.rl__t{ display:flex; width:max-content; animation:rlScroll 58s linear infinite; }
.rl__d{ display:flex; flex:0 0 auto; }
.rl:hover .rl__t{ animation-play-state:paused; }
.rl__i{
  display:flex; flex-direction:row; align-items:center; gap:15px;
  padding:22px 36px; border-right:1px solid var(--line-2); flex:0 0 auto;
}
.rl__i img{
  height:34px; width:auto; object-fit:contain; flex:0 0 auto;
  filter:grayscale(1) brightness(.62) contrast(1.25); opacity:.92;
  transition:filter .45s var(--ease), opacity .45s var(--ease);
}
/* a full logotype already names itself; a bare emblem gets a label */
.rl__i--lockup img{ height:38px; }
.rl__i--mark img{ width:34px; }
.rl__i:hover img{ filter:none; opacity:1; }
.rl__i span{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
@keyframes rlScroll{ to{ transform:translateX(-50%); } }

.specs--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.fig{ margin:0; }
.fig img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.fig figcaption{ margin-top:10px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

.more{ display:flex; flex-wrap:wrap; align-items:center; gap:26px; margin-top:30px; }
.more .mono{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
.more a{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--green);
}
.more a svg{ width:22px; height:9px; transition:transform .35s var(--ease); }
.more a:hover svg{ transform:translateX(4px); }
.sect--refs{ padding-block:20px 0; }
.sect--refs .band__h{ margin-bottom:0; }

/* ─────────── cta ─────────── */
.cta{ border-top:1px solid var(--line); background:var(--paper-2); }
.cta__in{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-block:52px; }
.cta h2{ font-size:clamp(18px,2vw,25px); font-weight:600; letter-spacing:-.015em; }
.cta p{ margin-top:10px; color:var(--ink-2); font-size:14.5px; }
.cta__act{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.cta__tel{ font-size:12px; letter-spacing:.08em; color:var(--ink-2); }
.cta__tel:hover{ color:var(--green); }

/* ─────────── contact ─────────── */
.split--form{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; margin-top:8px; }
.cinfo{ display:flex; flex-direction:column; gap:30px; }
.cinfo__b p{ font-size:14px; line-height:1.7; color:var(--ink-2); margin-top:10px; }
.cinfo__b strong{ color:var(--ink); font-weight:600; }
.cinfo__b a{ color:var(--ink-2); }
.cinfo__b a:hover{ color:var(--green); }

.form{ display:flex; flex-direction:column; gap:18px; }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.fld{ display:flex; flex-direction:column; gap:8px; }
.fld > span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.fld input,.fld select,.fld textarea{
  font:inherit; font-size:14px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:9px 1px 10px;
  transition:border-color .3s var(--ease);
}
.fld textarea{ resize:vertical; min-height:110px; border:1px solid var(--line); padding:12px; }
.fld textarea:focus{ border-color:var(--green); }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-bottom-color:var(--green);
}
.form .btn{ align-self:flex-start; }
.form__note{ font-size:11.5px; line-height:1.6; color:var(--ink-3); max-width:52ch; }
.form__note a{ color:var(--green); }
.hp{ position:absolute; left:-9999px; }

/* ═══════════ RESPONSIVE — subpages ═══════════ */
@media (max-width:1000px){
  .phead{ padding-block:36px 0; }
  .phead__in{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .phead__art{
    order:2; overflow:hidden;
    width:calc(100% + var(--pad) * 2); margin-inline:calc(var(--pad) * -1);
  }
  .band{ padding-block:52px; }
  .segs--3,.segs--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 26px; }
  /* Two per row: the borders have to be redealt for the new count. These are
     written as :nth-child(n) so they carry the same weight as the three-column
     rules above and actually replace them. */
  .advs,.advs--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .advs li:nth-child(n),.advs--2 li:nth-child(n){
    border-left:1px solid var(--line); border-top:1px solid var(--line);
  }
  .advs li:nth-child(2n+1),.advs--2 li:nth-child(2n+1){ border-left:0; }
  .advs li:nth-child(-n+2),.advs--2 li:nth-child(-n+2){ border-top:0; }
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow__i:nth-child(n){ border-top:1px solid var(--line); }
  .flow__i:nth-child(2n+1){ border-left:0; }
  .flow__i:nth-child(-n+2){ border-top:0; }
  .pgrid,.pgrid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .split,.split--form{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .two{ grid-template-columns:minmax(0,1fr); }
  .two__c{ border-right:0; margin-right:0; padding:24px 0; border-bottom:1px solid var(--line-2); }
  .specs--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .specs--4 li:nth-child(3){ border-left:0; padding-left:0; }
  .cta__in{ padding-block:38px; }
}
@media (max-width:620px){
  /* at this width a card drawing is ~580 px across and the dimension figures
     fall to about six pixels — noise rather than notation */
  .scene--card .sc__dims{ display:none; }
  .phead__t{ font-size:32px; }
  .chips li{ padding-right:16px; margin-right:16px; }
  .chips b{ font-size:12.5px; }
  .advs,.flow,.pgrid,.pgrid--3,.gal,.form__row,
  .segs--3,.segs--2{ grid-template-columns:minmax(0,1fr); }
  /* One per row: every cell is separated by a rule above it, and the first
     one sits straight under the panel's own frame. */
  .advs li:nth-child(n),.advs--2 li:nth-child(n){
    padding:24px 22px 26px; border-left:0; border-top:1px solid var(--line);
  }
  .advs li:first-child,.advs--2 li:first-child{ border-top:0; }
  .flow__i:nth-child(n){ padding:24px 22px 26px; border-left:0; border-top:1px solid var(--line); }
  .flow__i:first-child{ border-top:0; }
  .specs--4{ grid-template-columns:minmax(0,1fr); }
  .pager__a{ max-width:100%; }
  .pager__a--n{ text-align:left; margin-left:0; }
  .rl__i{ padding:18px 24px; gap:12px; }
  .rl__i img{ height:28px; }
  .rl__i--lockup img{ height:32px; }
  .rl__i--mark img{ width:28px; }
  .rl__i span{ font-size:10px; }
}

/* ═══════════════════════════════════════════════════
   THE DRAWING SHEET — verejný sektor + realizácie
   ═══════════════════════════════════════════════════ */

/* ─────────── institutional rail (the page's dark anchor) ─────────── */
.rail{
  position:relative; z-index:1;
  background:var(--ink);
  color:var(--paper);
  margin-top:96px;
  padding-block:clamp(56px, 4.8vw, 78px) clamp(52px, 4.4vw, 70px);
}
/* it follows the work now, on the same dark ground — no paper gap between them */
.wk + .rail{ margin-top:0; padding-top:10px; }
.rail__in{ display:grid; gap:38px; }
.rail__hd{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:end; }
.rail__hd h2{
  font-size:clamp(26px,2.6vw,38px); font-weight:600; letter-spacing:-.028em; line-height:1.08;
}
.rail__hd p{ font-size:14.5px; line-height:1.65; color:rgba(244,243,239,.62); max-width:52ch; }

/* the emblems sit on one connector run, the way components sit on a bus */
.rail__logos{
  position:relative;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(107,169,138,.34);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
/* it travels left to right — the second copy sits ahead of it so the loop closes */
.rail__t{
  display:flex; width:max-content;
  transform:translateX(-50%);
  animation:railRun 64s linear infinite;
}
.rail__dup{ display:flex; flex:0 0 auto; }
.rail__logos:hover .rail__t{ animation-play-state:paused; }
@keyframes railRun{ to{ transform:translateX(0); } }

.rail__i{
  position:relative; flex:0 0 auto;
  display:flex; align-items:center; gap:16px;
  padding:0 40px 0 0; margin-right:40px;
  border-right:1px solid rgba(244,243,239,.13);
}
/* each emblem hangs off the run on its own stem */
.rail__i::before{
  content:""; position:absolute; left:0; top:-24px; width:1px; height:16px;
  background:rgba(107,169,138,.5);
}
.rail__i::after{
  content:""; position:absolute; left:-2.5px; top:-26.5px; width:5px; height:5px;
  background:var(--green-3); border-radius:50%;
}
.rail__i img{
  height:40px; width:auto;
  padding:10px 13px;
  background:var(--paper);
  opacity:.88;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
/* a full logotype states its own name; a bare emblem needs the label */
.rail__i--lockup img{ height:46px; padding:9px 14px; }
.rail__i--lockup{ gap:0; }
.rail__i:hover img{ opacity:1; transform:translateY(-2px); }
.rail__i span{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  line-height:1.5; color:rgba(244,243,239,.58); white-space:nowrap;
}

/* ─────────── realizácie: the photograph as a full plate ─────────── */
.wk{
  position:relative; z-index:1;
  background:var(--ink); color:var(--paper);
  margin-top:96px;
  padding-bottom:54px;
}

.wk__stage{
  position:relative;
  height:clamp(560px, 78vh, 800px);
  /* svh so the plate does not resize as a phone's toolbars come and go */
  height:clamp(560px, 78svh, 800px);
  overflow:hidden;
}
/* the photograph runs off the right edge; the left band stays drawing-board dark */
.wk__frames{ position:absolute; inset:0; }
.wf{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .82s var(--ease), visibility 0s linear .82s;
}
.wf img{ width:100%; height:100%; object-fit:cover; }
.wf.is-on{ opacity:1; visibility:visible; transition-delay:0s,0s; }

/* the copy has to survive whatever the next photograph does behind it */
.wk__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 19%, rgba(20,24,22,.9) 32%, rgba(20,24,22,.36) 58%, rgba(20,24,22,.05) 100%),
    linear-gradient(0deg, rgba(20,24,22,.62) 0%, rgba(20,24,22,0) 38%),
    /* the next-project tag and the arrows sit here, and the photograph is
       sometimes bright underneath them */
    radial-gradient(46% 34% at 84% 94%, rgba(20,24,22,.6), transparent 72%);
}

/* ─────────── the sheet laid over the plate ─────────── */
.wk__over{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:126px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:40px; row-gap:30px;
  padding-block:46px 40px;
}

/* index down the left margin — the whole set is visible, not just the count */
.wk__idx{ grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column; gap:20px; }
.wk__idxl{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,243,239,.38);
}
.wk__dots{ display:flex; flex-direction:column; }
.wk__dot{
  appearance:none; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  padding:6px 0; text-align:left;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em;
  color:rgba(244,243,239,.32);
  transition:color .35s var(--ease);
}
/* the rule reaches out to the number that is on the plate */
.wk__dot i{
  display:block; width:22px; height:1px; flex:0 0 auto; background:var(--green-3);
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.wk__dot:hover{ color:rgba(244,243,239,.7); }
.wk__dot.is-on{ color:var(--green-3); }
.wk__dot.is-on i{ transform:none; opacity:1; }

.wk__metas{ grid-column:2; grid-row:1; position:relative; min-height:0; }
.wm{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .5s;
}
.wm.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:.12s,.12s,0s; }

/* the specification block, read as a drawing's title panel */
.wk__sp{
  position:relative; margin:0; padding-left:18px;
  display:grid; grid-template-columns:repeat(2,minmax(0,178px)); gap:0 34px;
  max-width:400px;
}
.wk__sp::before{
  content:""; position:absolute; left:0; top:6px; bottom:10px; width:1px;
  background:rgba(107,169,138,.5);
}
.wk__r{ padding:9px 0 8px; border-bottom:1px solid rgba(244,243,239,.15); }
.wk__r:nth-child(-n+2){ grid-column:1 / -1; }
.wk__r dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(107,169,138,.88);
}
.wk__r dd{ margin:5px 0 0; font-size:13px; color:rgba(244,243,239,.9); }

.wk__ttl{ max-width:min(26ch, 58%); }
.wk__tag{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-3);
}
.wk__t{
  margin-top:14px;
  font-size:clamp(26px,2.7vw,40px); font-weight:600; letter-spacing:-.028em; line-height:1.08;
  color:var(--white); text-wrap:balance;
}
.wk__lnk{
  display:inline-flex; align-items:center; gap:11px; margin-top:24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-3);
  transition:color .3s var(--ease);
}
.wk__lnk svg{ width:22px; height:9px; transition:transform .35s var(--ease); }
.wk__lnk:hover{ color:var(--paper); }
.wk__lnk:hover svg{ transform:translateX(5px); }

/* ─────────── the foot bar: where you are, and what comes next ─────────── */
.wk__no{
  grid-column:2; grid-row:2; align-self:center; justify-self:start;
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(244,243,239,.42);
}
.wk__no b{ color:var(--green-3); font-weight:500; }
.wk__no i{ display:block; width:30px; height:1px; background:rgba(244,243,239,.22); }

.wk__foot{
  grid-column:2; grid-row:2; align-self:center; justify-self:end;
  display:flex; align-items:center; gap:26px;
}
.wk__next{ display:grid; gap:3px; text-align:right; max-width:230px; }
.wk__next em{
  font-family:var(--mono); font-style:normal;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,243,239,.4);
}
.wk__next b{
  font-size:12px; font-weight:500; line-height:1.4; color:rgba(244,243,239,.78);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wk__arr{ display:flex; gap:8px; }
.wk__a{
  appearance:none; cursor:pointer;
  width:44px; height:36px; padding:0;
  display:grid; place-items:center;
  background:none; border:1px solid rgba(244,243,239,.2); color:rgba(244,243,239,.68);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.wk__a:hover{ border-color:var(--green-3); color:var(--green-3); }
.wk__a svg{ width:24px; height:10px; }

/* ─────────── annotations: the four claims, aligned on one rail ─────────── */
.wk__end{ padding-top:36px; }
.wk__notes{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px;
  padding-top:22px;
  border-top:1px solid rgba(244,243,239,.14);
}
.wk__note{ position:relative; padding-left:34px; }
.wk__note::before{
  content:""; position:absolute; left:0; top:-23px; width:1px; height:16px; background:var(--green-3);
}
.wk__note span{
  position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--green-3);
}
.wk__note b{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
}
.wk__note p{ margin-top:8px; font-size:12.5px; line-height:1.6; color:rgba(244,243,239,.56); }

.wk .more{ margin-top:34px; }
.wk .more a{ color:var(--green-3); }

/* ─────────── plate: responsive ─────────── */
@media (max-width:1000px){
  .rail__hd{ grid-template-columns:1fr; gap:18px; align-items:start; }
  .wk__over{ grid-template-columns:104px minmax(0,1fr); column-gap:28px; }
  .wk__notes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 30px; }
}
@media (max-width:760px){
  .wk{ margin-top:64px; }
  .wk + .rail{ margin-top:0; }
  /* the overlay stops being an overlay — photograph first, then the sheet */
  .wk__stage{ height:auto; }
  .wk__frames{ position:relative; inset:auto; aspect-ratio:3 / 2; }
  .wk__scrim{ display:none; }
  .wk__over{
    position:relative; inset:auto;
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto;
    row-gap:24px; padding-block:26px 4px;
  }
  .wk__idx{ grid-column:1; grid-row:1; flex-direction:row; align-items:center; gap:16px; }
  .wk__dots{ flex-direction:row; gap:6px; }
  .wk__dot{ padding:4px 0; }
  .wk__dot i{ display:none; }
  /* no overlay to fill, so the active project sets the height itself */
  .wk__metas{ grid-column:1; grid-row:2; min-height:0; }
  .wm{ position:relative; inset:auto; display:none; }
  .wm.is-on{ display:flex; opacity:1; visibility:visible; transform:none; }
  .wk__ttl{ max-width:none; }
  .wk__no{ grid-column:1; grid-row:3; }
  .wk__foot{ grid-column:1; grid-row:3; }
  .wk__next{ display:none; }
  .wk__sp{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
  .wk__notes{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .wf,.wm{ transition:none; }
  .rail__t{ animation:none; transform:none; }
  .rail__logos{ overflow-x:auto; }
}