/* ============================================================
   APEX STRATEGIES — design system v3

   Paper first. The mark is a black woodcut mountain drawn for
   white, and the work is documentation: technical files, as-built
   drawings, reports. So the page is a document, and the navy is
   used where the subject is an instrument (the twin) or where the
   page needs to close (mastheads, the call to action, the footer).

   Colour is expressed as roles, not values. A dark region carries
   .dark, which re-points the same role names, so every component
   below works on either ground without being written twice.
   ============================================================ */

:root{
  /* brand constants, same in both contexts */
  --navy:     #16233A;
  --navy-2:   #1E3153;
  --navy-3:   #0E1828;
  --steel:    #9DB4D2;
  --alarm:    #B23C22;

  --disp:'Archivo',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --rail:66px;
  --pad:2rem;
  --band:4.5rem;

  /* --- roles, paper context --- */
  --ground:   #F3F2EE;   /* warm off-white: the woodcut's own paper */
  --panel:    #E2DFD3;   /* Darkened slightly for clearer section boundaries */
  --deep:     #D4CFBF;   /* Deepened to maintain visual hierarchy */
  --text:     #17223A;
  --dim:      #48566A;
  --dim-2:    #6B7484;   /* small mono text has to survive on paper */
  --gold:     #9A6B18;   /* darkened so it holds contrast on paper */
  --gold-2:   #6F4C10;
  --hair:     rgba(23,34,58,.16);
  --hair-2:   rgba(23,34,58,.30);
  --hair-gold:rgba(154,107,24,.45);
}

/* --- roles, ink context ---
   Listed rather than applied by hand in the markup, so the regions that
   are ink by definition (the instrument, the closing call, the footer)
   cannot drift out of sync with the palette. */
.dark,
#twin-slot,
.twin,          /* carries its own ink: the intro lifts it out of the slot */
.band.deep,
.ticker,
footer.site{
  --ground:   var(--navy);
  --panel:    var(--navy-2);
  --deep:     var(--navy-3);
  --text:     #EDF1F7;
  --dim:      #A7B7CE;
  --dim-2:    #8395AE;
  --gold:     #D19E45;
  --gold-2:   #EBC98D;
  --hair:     rgba(157,180,210,.20);
  --hair-2:   rgba(157,180,210,.34);
  --hair-gold:rgba(209,158,69,.45);
  --alarm:    #E06A45;
  background:var(--ground);
  color:var(--text);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
/* Almost everything is sized in rem, so the whole page scales with the
   root instead of sitting small in the middle of a wide monitor. */
@media (min-width:1500px){html{font-size:17.5px}}
@media (min-width:1750px){html{font-size:19px}}
@media (min-width:2100px){html{font-size:20.5px}}
body{
  background:var(--ground);color:var(--text);
  font-family:var(--serif);font-size:1rem;line-height:1.55;
  overflow-x:hidden;
  transition:background-color .9s ease;   /* the hand-off out of the intro */
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- type roles ---------- */
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.xs{font-size:.62rem;letter-spacing:.18em}
.dim{color:var(--dim)}
.dim2{color:var(--dim-2)}
.au{color:var(--gold)}

.disp{font-family:var(--disp);font-stretch:118%;font-weight:800;text-transform:uppercase;letter-spacing:-.012em;line-height:.94}
h1,h2,h3,h4,h5{font-weight:inherit}

.h-xl{font-family:var(--disp);font-stretch:122%;font-weight:850;text-transform:uppercase;
      font-size:clamp(2.6rem,6.6vw,6rem);line-height:.88;letter-spacing:-.02em}
.h-lg{font-family:var(--disp);font-stretch:120%;font-weight:850;text-transform:uppercase;
      font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:.94;letter-spacing:-.015em}
.h-md{font-family:var(--disp);font-stretch:116%;font-weight:800;text-transform:uppercase;
      font-size:1.32rem;line-height:1.06;letter-spacing:.005em}
.h-sm{font-family:var(--disp);font-stretch:114%;font-weight:800;text-transform:uppercase;
      font-size:1rem;letter-spacing:.02em;line-height:1.15}
.lede{font-family:var(--serif);font-weight:340;font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.32;letter-spacing:-.005em}
.lede em{font-style:italic;color:var(--gold-2)}
p.body{color:var(--dim);font-size:.97rem;line-height:1.6}

/* ---------- page frame ---------- */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:60;
  background:var(--panel);border-right:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1rem 0;
}
.rail-mark{width:12px;height:12px;border:1.5px solid var(--gold);transform:rotate(45deg)}
.rail-est{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);
          font-size:.58rem;letter-spacing:.18em;color:var(--dim-2);white-space:nowrap}

/* ---------- rail index ----------
   The page's own table of contents, built from the sections themselves.
   A long scroll with a strong signature needs somewhere to look up and
   see where you are; a decorative strip does not do that, a list does. */
.rail-idx{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.rail-idx a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;padding:.45rem 0;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  color:var(--dim-2);transition:color .2s;
}
.rail-idx a::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:1px;background:var(--hair-2);transition:width .25s,background .25s;
}
.rail-idx a:hover{color:var(--text)}
.rail-idx a.on{color:var(--gold)}
.rail-idx a.on::before{width:13px;background:var(--gold)}
/* the name flies out on hover rather than living in the strip */
.rail-idx a .lbl{
  position:absolute;left:calc(100% + 10px);white-space:nowrap;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ground);color:var(--text);
  border:1px solid var(--hair-2);padding:.28rem .5rem;
  opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;pointer-events:none;
}
.rail-idx a:hover .lbl{opacity:1;transform:none}

header.site{
  position:fixed;top:0;left:var(--rail);right:0;z-index:55;
  display:flex;justify-content:space-between;align-items:center;
  height:66px;padding:0 var(--pad);
  background:rgba(243,242,238,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
/* The mark is the original woodcut, cropped to the mountain and set
   beside the name. The full lockup is stacked and would be illegible at
   header size, so the wordmark is set in the same serif instead. */
.wordmark{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.wordmark img{height:34px;width:auto}
.wordmark .nm{display:flex;flex-direction:column;line-height:1}
.wordmark b{font-family:var(--serif);font-weight:600;font-size:1.16rem;letter-spacing:.06em;color:var(--text)}
.wordmark span{font-family:var(--serif);font-size:.58rem;letter-spacing:.34em;color:var(--dim);margin-top:.18rem}
/* The mark is drawn for white: its lit face is transparent, so on ink it
   has to be inverted or the mountain reads inside out. */
.dark .wordmark img,footer.site .wordmark img{filter:invert(1)}
.wordmark.foot img{height:40px}
nav.top{display:flex;align-items:center;gap:1.6rem}
nav.top a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
          color:var(--dim);text-decoration:none;position:relative;padding:.2rem 0}
nav.top a:hover{color:var(--text)}
nav.top a.here{color:var(--gold)}
nav.top a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .26s}
nav.top a:hover::after,nav.top a.here::after{width:100%}
.lang{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--dim-2);
      border:1px solid var(--hair-2);padding:.25rem .5rem}
.lang b{color:var(--gold)}

main{margin-left:var(--rail);padding-top:66px}
footer.site{margin-left:var(--rail);background:var(--navy-3);border-top:1px solid var(--hair);
       padding:2.2rem var(--pad) 1.6rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding-bottom:1.8rem;border-bottom:1px solid var(--hair)}
.foot-grid h6{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);margin-bottom:.8rem}
.foot-grid a{display:block;font-size:.9rem;color:var(--dim);text-decoration:none;padding:.22rem 0}
.foot-grid a:hover{color:var(--gold)}
.foot-base{display:flex;justify-content:space-between;padding-top:1.1rem;flex-wrap:wrap;gap:.6rem}

/* ---------- grid + bands ---------- */
.band{padding:var(--band) var(--pad);position:relative}
.band.tight{padding-top:2.6rem;padding-bottom:2.6rem}
.band.paper{background:var(--ground)}   /* paper is the default now */
.band.panel{background:var(--panel)}
.band.deep{background:var(--deep)}
.hr{height:1px;background:var(--hair);border:0}


.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c12{grid-column:span 12}

/* section label: number + rule + name, encodes the page's own order */
.slab{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.slab .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--gold)}
.slab .ln{flex:1;height:1px;background:var(--hair)}

.slab .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}


/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
     text-decoration:none;padding:.85rem 1.4rem;background:var(--gold);color:var(--ground);
     border:1px solid var(--gold);transition:background .22s,color .22s}
.btn:hover{background:transparent;color:var(--gold)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--hair-2)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.lnk{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
     text-decoration:none;border-bottom:1px solid var(--hair-gold);padding-bottom:.25rem;transition:border-color .2s}
.lnk:hover{border-color:var(--gold)}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;padding:.75rem 0}
.ticker-in{display:flex;gap:2.4rem;width:max-content;animation:slide 46s linear infinite}
.ticker span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);white-space:nowrap}
.ticker span b{color:var(--gold);font-weight:500}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- index table (the routing device) ---------- */
.idx{width:100%;border-collapse:collapse}
.idx th{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
        color:var(--dim-2);text-align:left;font-weight:500;padding:.5rem .8rem;border-bottom:1px solid var(--hair-2)}
.idx td{padding:.9rem .8rem;border-bottom:1px solid var(--hair);vertical-align:middle}
.idx tbody tr{transition:background .2s;position:relative}
.idx tbody tr:hover,.idx tbody tr:focus-within{background:rgba(209,158,69,.07)}
/* the title link owns the whole row: one focusable target, full hit area */
.idx a.ttl{text-decoration:none;display:inline-block}
.idx a.ttl::after{content:'';position:absolute;inset:0}
.idx .num{font-family:var(--mono);font-size:.68rem;color:var(--gold);width:1%;white-space:nowrap}
.idx .ttl{font-family:var(--disp);font-stretch:114%;font-weight:800;text-transform:uppercase;
          font-size:.98rem;letter-spacing:.01em;color:inherit}
.idx .meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2);white-space:nowrap}
.idx .res{font-family:var(--mono);font-size:.72rem;color:var(--gold-2);white-space:nowrap}
.idx .go{width:1%;text-align:right;color:var(--dim-2)}
.idx tbody tr:hover .go{color:var(--gold)}
.idx a.row{text-decoration:none;display:contents}
.idx .thumb{width:64px;height:44px;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.9);border:1px solid var(--hair)}
.idx tbody tr:hover .thumb{filter:none}






/* ---------- capability nodes ---------- */
.nodes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair)}
.node{padding:1.5rem 1.4rem 1.7rem;position:relative;
      transition:background .45s ease,border-color .45s ease}
.node+.node{border-left:1px solid var(--hair)}
.node .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.node h3{margin:.6rem 0 .9rem}
.node ul{list-style:none}
.node li{font-size:.9rem;color:var(--dim);padding:.42rem 0;border-top:1px solid var(--hair)}
.node li:first-child{border-top:none}
.node .arrow{position:absolute;top:1.5rem;right:-9px;color:var(--gold);font-family:var(--mono);
             font-size:.85rem;background:var(--panel);padding:0 2px;z-index:2}
.band:not(.panel) .node .arrow{background:var(--ground)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair)}
.stat{padding:1.1rem 1.2rem;border-left:1px solid var(--hair)}
.stat:first-child{border-left:none}
.stat .v{font-family:var(--disp);font-stretch:118%;font-weight:850;font-size:1.7rem;line-height:1;letter-spacing:-.01em}
.stat .v small{font-size:.9rem;font-weight:500;color:var(--gold)}
.stat .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-top:.45rem}

/* ---------- figures ---------- */
.fig{border:1px solid var(--hair)}
.fig img{width:100%;object-fit:cover}
.fig .cap{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .7rem;border-top:1px solid var(--hair)}
.fig .cap span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
/* duotone: brighten the grayscale base so the gold multiply lands on midtones,
   not on black. Without the lift the image reads as mud. */
.duotone{filter:grayscale(1) contrast(1.02) brightness(1.22)}
.tint{position:relative}
.tint::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(209,158,69,.42),rgba(30,49,83,.62));
  mix-blend-mode:multiply}

/* ---------- trace (signature) ---------- */
.trace-box svg{width:100%;height:auto;display:block;overflow:visible}
.trace{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trace-grid line{stroke:var(--hair);stroke-width:1}
.trace-dot{fill:var(--gold);opacity:0}
.trace-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:var(--dim-2);text-transform:uppercase;opacity:0}
.trace-lbl.hot{fill:var(--gold)}
.drawn .trace-dot,.drawn .trace-lbl{opacity:1;transition:opacity .45s;transition-delay:var(--d,0s)}






/* ---------- sector cards ---------- */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair)}
.sector{
  border-left:1px solid var(--hair);text-decoration:none;transition:background .22s;
  display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.2rem 1rem;min-height:190px;
}
.sector:first-child{border-left:none}
.sector:hover{background:rgba(209,158,69,.08)}
.sector .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--gold)}
.sector p{font-size:.86rem;color:var(--dim-2);line-height:1.45}
.sector .f{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--hair);
           display:flex;justify-content:space-between;align-items:center}
.sector .go{color:var(--dim-2);font-family:var(--mono);transition:color .22s}
.sector:hover .go{color:var(--gold)}

/* ---------- photographic plate ----------
   A duotone, not a photograph dropped on the page. The image is
   flattened to luminance and screened over navy, so shadows land on the
   brand's own ink and highlights stay near the paper. That is how a
   plate is printed into a report, and it is the only treatment that
   lets a stock image sit inside this palette without fighting it. */
.plate{position:relative;background:var(--navy);overflow:hidden;border:1px solid var(--hair)}
.plate img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.92);mix-blend-mode:screen}
.plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(154,107,24,.20),rgba(22,35,58,0) 55%);mix-blend-mode:multiply}
.plate-cap{display:flex;justify-content:space-between;gap:1rem;
  border:1px solid var(--hair);border-top:none;padding:.5rem .75rem}
.plate-cap span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2)}

/* ---------- what changes hands at handover ---------- */
.give{list-style:none}
.give li{display:flex;gap:.85rem;padding:.62rem 0;border-bottom:1px solid var(--hair);
         font-family:var(--mono);font-size:.78rem;letter-spacing:.03em}
.give li span{color:var(--gold)}

/* ---------- sector facets under the case index ---------- */
.facets{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.7rem;
        margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--hair)}
.facets a{text-decoration:none;display:inline-flex;gap:.5rem;align-items:baseline;
          font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.facets a b{color:var(--text);font-weight:500;transition:color .2s}
.facets a i{font-style:normal;color:var(--dim-2)}
.facets a:hover b{color:var(--gold)}

/* ---------- cross-reference to a case file ---------- */
.seen{margin-top:1.6rem;border-top:1px solid var(--hair);padding-top:.8rem}
.seen a{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;padding:.6rem 0;transition:color .2s}
.seen a:hover .h-sm{color:var(--gold)}
.seen .go{margin-left:auto;color:var(--dim-2);font-family:var(--mono)}
.seen a:hover .go{color:var(--gold)}

/* ---------- team ---------- */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.person{display:flex;gap:1.1rem;align-items:center;border:1px solid var(--hair);padding:.9rem}
.person .ph{flex:0 0 76px;width:76px;height:76px;overflow:hidden;border:1px solid var(--hair)}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.person .r{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:.3rem}
.person .tags{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.3rem}
.person .tags i{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
                text-transform:uppercase;color:var(--dim-2);border:1px solid var(--hair);padding:.15rem .4rem}

/* ---------- page header (subpages) ---------- */
.phead{padding:3.4rem var(--pad) 2.4rem;border-bottom:1px solid var(--hair-2)}
.phead .crumb{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);margin-bottom:1rem}
.phead .crumb a{text-decoration:none;color:var(--dim-2)}
.phead .crumb a:hover{color:var(--gold)}
.phead .sub{margin-top:1rem;max-width:56ch;color:var(--dim);font-size:1.02rem}

/* ---------- PASR ---------- */
.pasr{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair-2)}
.pasr .cell{padding:1.3rem 1.5rem 1.5rem;border-top:1px solid var(--hair-2)}
.pasr .cell:nth-child(-n+2){border-top:none}
.pasr .cell:nth-child(odd){border-right:1px solid var(--hair-2)}
.pasr .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.pasr h4{margin:.5rem 0 .6rem}
.pasr p{font-size:.94rem;color:var(--dim);max-width:48ch}

/* ---------- mobile menu ---------- */
.burger{display:none;background:none;border:1px solid var(--hair-2);width:40px;height:34px;cursor:pointer;position:relative;padding:0}
.burger span{position:absolute;left:11px;width:18px;height:1.5px;background:var(--gold);transition:transform .28s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:20px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:50;background:var(--ground);padding:5rem 1.2rem 2rem;
       display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
       opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet a{display:flex;gap:.9rem;align-items:baseline;text-decoration:none;
         font-family:var(--disp);font-stretch:116%;font-weight:800;text-transform:uppercase;
         font-size:1.7rem;padding:.7rem 0;border-bottom:1px solid var(--hair)}

/* ============================================================
   MOTION LAYER
   The page behaves like an instrument: scrolling is a physical
   input with inertia, and disturbing it disturbs the signal.
   ============================================================ */

/* Scrolling stays native. Hijacking it buys a glide and costs
   fragment links, find-in-page and keyboard focus scrolling, which
   is a bad trade on a site whose whole argument is reliability.
   The liveliness comes from what the scroll drives instead
   (see scroll-behavior on html at the top of this file). */

/* line reveal: type rises out of a mask, like a plotter laying it down.
   The mask clips at its padding edge, so a sliver of padding keeps wide
   display glyphs from being shaved off at the column boundary. */
/* Line reveal by clip-path rather than an overflow mask. Display type at
   line-height .88 spills outside its line box, and an overflow mask
   shaves those glyphs off at the box edge; negative insets here give the
   clip region room on every side while still hiding the line as it
   rises. It also costs no wrapper margins, so the heading's height in
   the layout is exactly its height on screen. */
.line-in{
  display:block;
  clip-path:inset(-.18em -.18em 100% -.18em);
  transform:translateY(22%);
  transition:clip-path .95s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1);
}
.on .line-in{clip-path:inset(-.18em);transform:none}
.line-in.s1{transition-delay:.07s}.line-in.s2{transition-delay:.14s}
.line-in.s3{transition-delay:.21s}.line-in.s4{transition-delay:.28s}

/* figure reveal: a wipe, not a fade */
.wipe img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.19,1,.22,1),transform 1.15s cubic-bezier(.19,1,.22,1);transform:scale(1.06)}
.wipe.on img{clip-path:inset(0 0 0 0);transform:none}

/* rail: a chart recorder. The pen tracks how far the page has run. */
/* The pen runs down the rail's right edge: ticks on the left, section
   numbers in the middle, overall progress on the right. Stacked on top
   of each other they were unreadable. */
.rail-track{position:absolute;right:7px;top:74px;bottom:74px;width:1px;background:var(--hair)}
.rail-pen{position:absolute;left:0;top:0;width:7px;height:7px;margin-left:-3px;margin-top:-3.5px;
  background:var(--gold);border-radius:50%;box-shadow:0 0 0 3px rgba(154,107,24,.16);will-change:transform}
.rail-ink{position:absolute;left:0;top:0;width:1px;background:var(--gold);transform-origin:top}

/* pinned control loop: you stay in the loop while the signal goes round.
   Native sticky, so no transformed ancestor and nothing to break. */
.pin-outer{position:relative}
.pin-inner{position:sticky;top:90px}
@media (max-width:900px){.pin-inner{position:static;top:auto}}
.node.live{background:rgba(209,158,69,.10)}
.node.live .k{color:var(--gold-2)}
.loop-wire{position:relative;height:52px;margin-top:-1px;border:1px solid var(--hair);border-top:none}
.loop-wire svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire{fill:none;stroke:var(--hair-2);stroke-width:1.5}
.wire-live{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round}
.wire-dot{fill:var(--gold)}
.loop-cap{position:absolute;left:1.4rem;top:50%;transform:translateY(-50%);z-index:2;background:var(--panel);padding:0 .5rem}
.loop-own{position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);z-index:2;background:var(--panel);padding:0 .5rem}

/* counters settle like a digital scale finding its value */
.count{font-variant-numeric:tabular-nums}




/* ============================================================
   DIGITAL TWIN
   Rides full screen, then shrinks onto its slot in the hero.
   ============================================================ */
#twin-slot{margin-top:2.6rem;display:flex;flex-direction:column}
/* The projector's focal length is bound by the shorter side, so a taller
   box is what actually makes the model bigger on a wide screen. */
#twin-box{height:clamp(300px,52vh,660px);flex:0 0 auto}
.twin{
  position:relative;width:100%;height:100%;
  border:1px solid var(--hair);background:var(--deep);
  overflow:hidden;cursor:grab;touch-action:pan-y;
}

/* ---- control panel: the trade-off made playable ---- */
.twin-panel{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;
  border:1px solid var(--hair);border-top:none;background:var(--panel);
}
/* Three short controls side by side. Stacked full-width rows made the
   sliders long enough to look like the point of the panel. */
.twin-controls{padding:.7rem 1rem .8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem 1rem}
.ctl{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ctl .hd{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.ctl .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.ctl output{font-family:var(--mono);font-size:.66rem;color:var(--gold)}
.ctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;background:none;cursor:pointer;
}
.ctl input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--hair-2)}
.ctl input[type=range]::-moz-range-track{height:1px;background:var(--hair-2)}
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-5px;
  background:var(--gold);border:0;border-radius:0;transform:rotate(45deg);
}
.ctl input[type=range]::-moz-range-thumb{
  width:11px;height:11px;background:var(--gold);border:0;border-radius:0;
}
.ctl input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.twin-kpi{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--hair)}
.kpi{padding:.9rem .9rem 1rem;border-left:1px solid var(--hair)}
.kpi:first-child{border-left:none}
.kpi b{display:block;font-family:var(--disp);font-stretch:118%;font-weight:850;
  font-size:1.5rem;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim-2);margin-top:.4rem}
.kpi .bar{display:block;height:2px;background:var(--hair);margin-top:.5rem}
.kpi .bar em{display:block;height:100%;width:0;background:var(--gold);transition:width .25s ease,background .25s ease}
.kpi.hot b{color:var(--alarm)}
.kpi.hot .bar em{background:var(--alarm)}

.twin-note{margin-top:.7rem;max-width:78ch;line-height:1.6;text-transform:none;letter-spacing:.02em;font-size:.72rem}

/* the panel belongs to the page, not to the full-screen ride */
html.twin-intro .twin-panel,html.twin-intro .twin-note{visibility:hidden}

@media (max-width:900px){
  .twin-panel{grid-template-columns:1fr}
  .twin-kpi{border-left:none;border-top:1px solid var(--hair)}
  .twin-controls{grid-template-columns:1fr 1fr}
  .ctl:last-child{grid-column:1 / -1}
}
@media (max-width:560px){
  .twin-kpi{grid-template-columns:1fr 1fr}
  .kpi:nth-child(3){border-left:none}
  .kpi:nth-child(n+3){border-top:1px solid var(--hair)}
}
.twin.grabbing{cursor:grabbing}
.twin canvas{display:block;width:100%;height:100%}
.twin.intro{position:fixed;inset:0;width:auto;height:auto;z-index:300;border:0}
html.twin-intro,html.twin-landing{overflow:hidden}
/* The ride happens inside the instrument, so the whole viewport is ink
   for its duration and eases to paper as the page arrives. Without this
   the edges around the canvas flash the document colour first. */
html.twin-intro body{background-color:var(--navy-3)}
/* the page waits behind the ride, then rises into place */
html.twin-intro body>*:not(.twin-stage):not(.twin){opacity:0}
html.twin-landing body>*:not(.twin-stage):not(.twin),
html.twin-reveal body>*{transition:opacity 1s ease .1s}

.twin-frame{position:absolute;inset:0;pointer-events:none}
.twin-frame span{position:absolute;width:13px;height:13px;border:1px solid var(--hair-gold)}
.twin-frame span:nth-child(1){top:8px;left:8px;border-right:0;border-bottom:0}
.twin-frame span:nth-child(2){top:8px;right:8px;border-left:0;border-bottom:0}
.twin-frame span:nth-child(3){bottom:8px;left:8px;border-right:0;border-top:0}
.twin-frame span:nth-child(4){bottom:8px;right:8px;border-left:0;border-top:0}

.twin-cap{position:absolute;left:12px;bottom:10px;z-index:3;pointer-events:none}
.twin-hint{position:absolute;right:12px;bottom:8px;z-index:3;
  display:flex;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.twin-hint>span{pointer-events:none}
.twin-replay{font:inherit;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  color:var(--gold);background:none;border:1px solid var(--hair-gold);padding:.4rem .7rem;
  transition:background .2s,color .2s}
.twin-replay:hover{background:var(--gold);color:var(--navy-3)}
.twin.intro .twin-hint{display:none}
.twin-skip{position:absolute;right:18px;top:18px;z-index:4;display:none;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);background:none;border:1px solid var(--hair-2);padding:.5rem .9rem;cursor:pointer}
.twin.intro .twin-skip{display:block}
.twin-skip:hover{color:var(--gold);border-color:var(--gold)}

/* readouts pinned to the station that produces them */
.twin-labels{position:absolute;inset:0;pointer-events:none;list-style:none;margin:0;padding:0}
.twin-labels .stn{
  position:absolute;top:0;left:0;will-change:transform,opacity;opacity:0;
  transform:translate3d(-9999px,-9999px,0);
  margin:-14px 0 0 -1px;padding-left:14px;
  border-left:1px solid var(--hair-gold);
}
.twin-labels .stn .k{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);white-space:nowrap}
.twin-labels .stn .v{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--gold-2);white-space:nowrap;margin-top:.15rem}
.twin-labels .stn.proven .v{color:var(--gold);font-weight:500}
.twin-labels .stn.proven .k::after{content:' · measured';color:var(--gold)}

@media (max-width:900px){
  /* A tall box on a narrow screen only buys empty sky above the line */
  #twin-box{height:clamp(230px,34vh,330px)}
  .twin-labels .stn .k{font-size:.5rem}
  .twin-labels .stn .v{font-size:.62rem}
  .twin-cap{font-size:.52rem;bottom:8px}
  .twin-hint>span{display:none}          /* the caption needs the room */
  .twin-hint{bottom:6px;right:8px}
  .twin-replay{padding:.35rem .55rem;font-size:.55rem}
  .twin-note{font-size:.66rem}
}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .line-in{clip-path:none;transform:none;transition:none}
  .wipe img{clip-path:none;transform:none;transition:none}
  .ticker-in{animation:none}
  .trace{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .trace-dot,.trace-lbl{opacity:1!important}
}
body.static .rv{opacity:1;transform:none;transition:none}
body.static .line-in{clip-path:none;transform:none;transition:none}
body.static .wipe img{clip-path:none;transform:none;transition:none}
body.static .hero{min-height:auto}
body.static .ticker-in{animation:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .c3,.c4,.c5{grid-column:span 6}
  .c7,.c8,.c9{grid-column:span 12}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .sector:nth-child(3){border-left:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
}
@media (max-width:860px){
  :root{--rail:0px;--pad:1.2rem;--band:3.2rem}
  .rail{display:none}
  header.site{left:0}
  nav.top{display:none}
  .burger{display:block}
  main,footer.site{margin-left:0}
  .g12{gap:1.1rem}
  .c6{grid-column:span 12}
  .nodes{grid-template-columns:1fr}
  .node+.node{border-left:none;border-top:1px solid var(--hair)}
  .node .arrow{display:none}
  .people{grid-template-columns:1fr}
  .pasr{grid-template-columns:1fr}
  .pasr .cell{border-top:1px solid var(--hair-2)}
  .pasr .cell:nth-child(2){border-top:1px solid var(--hair-2)}
  .pasr .cell:nth-child(odd){border-right:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .idx .hide-s{display:none}
}

/* ---------- Gantt Chart ---------- */
.interactive-gantt {
  margin-top: 2rem;
  border: 1px solid var(--hair);
  background: var(--panel);
}

.gantt-grid {
  display: grid;
  grid-template-columns: minmax(200px, 2.5fr) repeat(10, 1fr);
  border-bottom: 1px solid var(--hair);
}

.gantt-header {
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--dim-2);
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  text-align: center;
}

.gantt-header.label-header {
  text-align: left;
}

/* display: contents allows the children to snap to the .gantt-grid columns */
.gantt-row {
  display: contents;
}

.gantt-label {
  padding: 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--dim);
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--ground);
}

.gantt-bar-container {
  grid-column: span 10;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  position: relative;
  border-bottom: 1px solid var(--hair);
  padding: 0.5rem 0;
}

.gantt-bar {
  background: var(--gold);
  color: var(--navy-3);
  padding: 0.4rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.gantt-bar:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Map the HTML classes to the 10-week grid */
.bar-1 { grid-column: 1 / 3; }  /* W1 - W2 */
.bar-2 { grid-column: 3 / 5; }  /* W3 - W4 */
.bar-3 { grid-column: 5 / 8; }  /* W5 - W7 */
.bar-4 { grid-column: 7 / 10; } /* W7 - W9 */
.bar-5 { grid-column: 9 / 11; } /* W9 - W10 */

/* Dynamic Info Panel */
.gantt-info-panel {
  padding: 1.5rem;
  background: var(--ground);
  min-height: 120px;
}

.gantt-info-panel h4 {
  font-family: var(--disp);
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.gantt-info-panel p {
  font-family: var(--serif);
  color: var(--dim);
  font-size: 0.95rem;
  max-width: 70ch;
}

/* ============================================================
   GANTT CHART (Phase 1)
   ============================================================ */
   .interactive-gantt {
    border: 1px solid var(--hair);
    background: var(--panel);
  }
  .gantt-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2.5fr) repeat(10, 1fr);
  }
  .gantt-header {
    padding: 1rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--dim-2);
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    text-align: center;
  }
  .gantt-header.label-header {
    text-align: left;
  }
  .gantt-row {
    display: contents; /* Allows children to participate in .gantt-grid */
  }
  .gantt-label {
    padding: 1rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--dim);
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    background: var(--ground);
    line-height: 1.4;
  }
  .gantt-bar-container {
    grid-column: span 10;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    position: relative;
    border-bottom: 1px solid var(--hair);
    padding: 0.75rem 0;
    align-items: center;
  }
  .gantt-bar {
    background: var(--gold);
    color: var(--navy-3);
    padding: 0.4rem 1rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .gantt-bar:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }
  
  /* Timeline Mapping */
  .bar-1 { grid-column: 1 / 3; }  /* W1-W2 */
  .bar-2 { grid-column: 3 / 5; }  /* W3-W4 */
  .bar-3 { grid-column: 5 / 8; }  /* W5-W7 */
  .bar-4 { grid-column: 7 / 10; } /* W7-W9 */
  .bar-5 { grid-column: 9 / 11; } /* W9-W10 */
  
  /* Info Panel */
  .gantt-info-panel {
    padding: 1.5rem;
    background: var(--ground);
    min-height: 130px;
  }
  .gantt-info-panel h4 {
    font-family: var(--disp);
    color: var(--gold);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
  }
  .gantt-info-panel p {
    font-family: var(--serif);
    color: var(--dim);
    font-size: 0.95rem;
    max-width: 80ch;
  }
  /* ============================================================
   CASE STUDY VISUALS (Phase 2)
   ============================================================ */
.work-showcase {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border: 1px solid var(--hair);
  background: var(--ground);
}
.work-list {
  display: flex;
  flex-direction: column;
}
.work-row {
  display: grid;
  grid-template-columns: auto 2.5fr 1.5fr 1.5fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1.2rem;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  transition: background 0.2s;
}
.work-row:last-child {
  border-bottom: none;
}
.work-row:hover, .work-row:focus-within {
  background: rgba(209,158,69,.07);
}
.work-row:hover .go {
  color: var(--gold);
}
.work-visual {
  position: relative;
  border-left: 1px solid var(--hair);
  overflow: hidden;
  background: var(--navy);
  min-height: 280px;
}
.work-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease, transform 0.4s ease;
  /* Retaining your specific duotone aesthetics */
  filter: grayscale(1) contrast(1.12) brightness(0.92);
  mix-blend-mode: screen;
}
.work-visual img.fade {
  opacity: 0;
  transform: scale(1.03);
}
.visual-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(154,107,24,.20), rgba(22,35,58,0) 55%);
  mix-blend-mode: multiply;
}

/* Mobile overrides */
@media (max-width: 900px) {
  .work-showcase { grid-template-columns: 1fr; }
  .work-row { grid-template-columns: auto 1.5fr 1fr auto; }
}
/* ============================================================
   PROGRESSIVE DISCLOSURE (Phase 3)
   ============================================================ */
/* Target only tables with exactly 3 columns to avoid breaking other layouts */
.idx tbody tr td.meta:nth-child(3):nth-last-child(1) {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Reveal the data when the row is hovered */
.idx tbody tr:hover td.meta:nth-child(3):nth-last-child(1),
.idx tbody tr:focus-within td.meta:nth-child(3):nth-last-child(1) {
  opacity: 1;
  transform: translateX(0);
}
/* ============================================================
   WAYFINDING & SCROLLING (Phase 4 )
   ============================================================ */
   .slab {
    position: sticky;
    top: 65px; 
    z-index: 40;
    padding: 1.5rem 0 1rem 0;
    margin-top: -1.5rem; 
    background: var(--ground); /* Forces a solid background so it blocks text */
  }
  
  /* Overrides to match the specific section backgrounds */
  .band.panel .slab {
    background: var(--panel);
  }
  .band.deep .slab {
    background: var(--deep);
  }
  /* ============================================================
   LANGUAGE TOGGLE (Phase 5)
   ============================================================ */
/* Hide the language that is NOT currently set on the html tag */
html[lang="en"] [lang="nl"] { 
  display: none !important; 
}
html[lang="nl"] [lang="en"] { 
  display: none !important; 
}

/* Make the navigation toggle look clickable */
.lang { 
  cursor: pointer; 
  user-select: none; 
}
/* ============================================================
   MOBILE DIGITAL TWIN FIXES (Phase 6)
   ============================================================ */
   @media (max-width: 900px) {
    /* Increase mobile height slightly so the model isn't cramped */
    #twin-box { 
      height: clamp(280px, 45vh, 420px) !important; 
    }
  }
  
  /* Landscape prompt: Only appears on portrait phones during the intro */
  @media (max-width: 900px) and (orientation: portrait) {
    .twin.intro::before {
      content: 'Rotate device to landscape';
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(14, 24, 40, 0.85); /* var(--navy-3) */
      color: #D19E45; /* var(--gold) */
      padding: 0.6rem 1rem;
      border: 1px solid rgba(209, 158, 69, 0.45);
      font-family: var(--mono), monospace;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      z-index: 500;
      pointer-events: none;
      white-space: nowrap;
      animation: pulseFade 3s infinite;
    }
    
    /* Translates instantly when the Dutch toggle is active */
    html[lang="nl"] .twin.intro::before {
      content: 'Draai apparaat naar liggend';
    }
  }
  
  @keyframes pulseFade {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.2; }
  }