/* ===================================================================
   Structures Initiate (Pty) Ltd
   Brand Guidelines v1.0 supply the palette and the two typefaces. The
   guide's document treatments are written for paper; on screen this
   runs dark, with the greens used as light rather than as ink. Where
   that departs from the guide it says so at the rule.
   =================================================================== */

:root{
  --si-deep:#006837;
  --si-forest:#35963e;
  --si-moss:#47844d;
  --si-leaf:#39b54a;
  --si-lime:#00c853;
  --si-grad:linear-gradient(90deg,#007a33,#00c853);
  --si-black:#000;
  --si-white:#fff;
  --si-doc-green:#1B7A35;
  --si-mint:#D8F0DC;
  --si-text:#333;
  --si-muted:#666;
  --si-rule:#B3E5A1;
  --si-hair:#E2E6E3;
  --si-well:#F5F7F5;

  /* Dark grounds. Black is the brand's anchor colour, so the whole dark
     range is mixed from it rather than from a blue-grey. */
  --nx-0:#050806;
  --nx-1:#0A0F0C;
  --nx-2:#111714;
  --nx-line:#1E2A23;
  --nx-line-2:#2C3C33;
  --nx-text:#E9EEEB;
  --nx-soft:#8FA096;
  --nx-glow:rgba(57,181,74,.55);

  --si-head:Bahnschrift,'Barlow','DIN Alternate','Segoe UI',system-ui,sans-serif;
  --si-body:Tahoma,Verdana,'DejaVu Sans',system-ui,sans-serif;

  --head-h:80px;
  --gut:clamp(16px,5vw,64px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--si-white);color:var(--si-text);font:400 16px/1.6 var(--si-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
p{margin:0}
a{color:var(--si-deep);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--si-leaf);outline-offset:2px}
::selection{background:var(--si-leaf);color:#04140A}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

h1,h2,h3,h4{font-family:var(--si-head);font-weight:700;line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.4rem);text-transform:uppercase;letter-spacing:-.005em}
h2{font-size:clamp(1.9rem,4.2vw,3rem);text-transform:uppercase;color:var(--si-deep)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);color:var(--si-deep)}

.label{font-family:var(--si-head);font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--si-forest)}
.skip{position:absolute;left:-9999px;top:0;background:var(--si-deep);color:#fff;padding:10px 16px;z-index:300}
.skip:focus{left:0}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .scan,.sweep,.pulse{display:none!important}
}

/* ---- header --------------------------------------------------------
   Page 3 sets a 160px minimum for the lockup with its tagline, which at
   the artwork's 495x152 means no less than 49px tall. */
.util{background:var(--si-black);color:#9FB0A6;font-size:.82rem;position:relative;z-index:110}
.util-in{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-block:8px}
.util-badge{font-family:var(--si-head);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--si-leaf)}
.util-right{display:flex;gap:20px;flex-wrap:wrap}
.util a{color:#9FB0A6;text-decoration:none}
.util a:hover,.util a:focus-visible{color:#fff;text-decoration:underline}

.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:#fff;border-bottom:2px solid var(--si-deep)}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,2.6vw,38px);flex-wrap:wrap;padding-block:14px}
.hdr-logo{display:block;flex:0 0 auto}
.hdr-logo img{height:50px;width:auto}
.nav{display:flex;gap:clamp(13px,1.7vw,22px);align-items:center;flex-wrap:wrap}
.nav a{font-family:var(--si-head);font-weight:600;font-size:.9rem;letter-spacing:.07em;text-transform:uppercase;color:var(--si-text);text-decoration:none;position:relative;padding-block:3px}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--si-leaf);transition:right .35s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="true"]::after{right:0}
.hdr-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.hdr-actions .btn svg{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
/* Between the phone layout and a roomy desktop the header has just enough
   to fit on one line if it is asked to. Left to wrap it drops the buttons
   onto a second row on their own, which reads as a mistake. */
@media (min-width:921px) and (max-width:1340px){
  .hdr-in{flex-wrap:nowrap;gap:18px}
  .nav{flex-wrap:nowrap;gap:clamp(10px,1.2vw,16px);min-width:0}
  .nav a{font-size:.82rem}
  .hdr-logo img{height:44px}
  .hdr-actions{gap:7px}
  .hdr-actions .btn{padding:11px 14px;font-size:.86rem}
}
.progress{position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--si-leaf);box-shadow:0 0 10px var(--nx-glow);z-index:2}

@media (max-width:1100px){.nav{gap:13px}.nav a{font-size:.84rem}.hdr-actions .btn--out{display:none}}
@media (max-width:900px){
  .util{font-size:.78rem}.util-badge{font-size:.68rem}
  .hdr-in{padding-block:12px;gap:12px}
  .hdr-logo img{height:49px}
  .nav{order:3;width:100%;gap:15px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .nav a{white-space:nowrap;font-size:.78rem}
}
@media (max-width:470px){
  .util-right a:first-child{display:none}
  .util-badge{font-size:.6rem;letter-spacing:.12em}
  .hdr-actions .btn{padding:9px 12px;font-size:.82rem}
  .hdr-actions .btn svg{margin-right:5px}
}

/* ---- buttons, page 7 ---- */
.btn{display:inline-block;font-family:var(--si-head);font-weight:600;font-size:1rem;letter-spacing:.07em;text-transform:uppercase;padding:14px 26px;text-decoration:none;border:2px solid var(--si-deep);background:var(--si-deep);color:#fff;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover,.btn:focus-visible{background:#007a33;border-color:#007a33}
.btn--sm{padding:10px 16px;font-size:.88rem}
.btn--out{background:transparent;color:var(--si-deep)}
.btn--out:hover,.btn--out:focus-visible{background:var(--si-deep);color:#fff}
/* On the dark grounds the fill becomes light, because a deep green button
   on a near-black field is invisible. */
.on-dark .btn{background:var(--si-leaf);border-color:var(--si-leaf);color:#04140A;box-shadow:0 0 0 rgba(57,181,74,0)}
.on-dark .btn:hover,.on-dark .btn:focus-visible{background:#54d166;border-color:#54d166;box-shadow:0 0 28px var(--nx-glow)}
.on-dark .btn--out{background:transparent;color:var(--nx-text);border-color:#33463B}
.on-dark .btn--out:hover,.on-dark .btn--out:focus-visible{background:var(--nx-text);color:var(--nx-0);border-color:var(--nx-text)}

/* ---- shared dark-ground furniture ---- */
.dark{position:relative;background:var(--nx-0);color:var(--nx-text);isolation:isolate}
.dark h2{color:var(--nx-text)}
.dark .label{color:var(--si-leaf)}
.dark .sec-head p{color:var(--nx-soft)}
/* A drafting grid, barely there, so the dark is a surface and not a void. */
.grid-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(57,181,74,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(57,181,74,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
}
.scan{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.scan::after{content:"";position:absolute;left:0;right:0;height:38vh;
  background:linear-gradient(180deg,transparent,rgba(57,181,74,.055) 45%,rgba(0,200,83,.10) 50%,rgba(57,181,74,.055) 55%,transparent);
  animation:sweep 9s linear infinite}
@keyframes sweep{0%{transform:translateY(-45vh)}100%{transform:translateY(115vh)}}

/* HUD framing: four corner brackets. Square, as the guide requires. */
.bracket{position:relative}
.bracket::before,.bracket::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none}
.bracket::before{top:-1px;left:-1px;border-top:2px solid var(--si-leaf);border-left:2px solid var(--si-leaf)}
.bracket::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--si-leaf);border-right:2px solid var(--si-leaf)}

/* ---- hero ----------------------------------------------------------
   Page 7 offers a deep green or a black hero ground. Black is the one
   that carries a lit wireframe, so the greens read as light against it. */
.hero{position:relative;background:var(--nx-0);color:var(--nx-text);overflow:hidden;isolation:isolate}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1;opacity:.95}
.hero-in{position:relative;padding-block:clamp(52px,9vw,124px);max-width:62rem}
.hero .label{display:inline-block;margin-bottom:20px;padding:7px 12px;border:1px solid #27382E;background:rgba(5,8,6,.5);color:var(--si-leaf)}
.hero h1{color:#fff;text-shadow:0 0 62px rgba(0,0,0,.65)}
.hero h1 em{font-style:normal;color:var(--si-leaf);text-shadow:0 0 34px var(--nx-glow)}
.hero .lead{color:#C4D2CA;font-size:clamp(1.02rem,1.7vw,1.22rem);max-width:54ch;margin-top:22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.trust{display:flex;gap:clamp(16px,3vw,38px);flex-wrap:wrap;align-items:center;margin-top:38px;padding-top:24px;border-top:1px solid var(--nx-line)}
.trust-i{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--nx-soft)}
.trust-i b{font-family:var(--si-head);font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:.01em}
.stars{display:inline-flex;gap:2px;color:var(--si-leaf)}
.stars svg{width:15px;height:15px;display:block}
.hero-grad{height:5px;background:var(--si-grad);position:relative;z-index:1}

/* ---- sections ---- */
.sec{padding-block:clamp(56px,7.5vw,108px);border-bottom:1px solid var(--si-hair)}
.sec--well{background:var(--si-well)}
.dark.sec{border-bottom:none}
.sec-head{margin-bottom:clamp(32px,4vw,56px);max-width:64ch}
.sec-head .label{display:block;margin-bottom:14px}
.sec-head p{margin-top:16px;font-size:1.06rem;color:var(--si-muted)}

/* ---- services, as a build sequence ---------------------------------
   The one part of the page that is not a list. A pinned stage, and the
   structure assembles through it: ground, walls, trusses, covering, then
   the plant that arrives afterwards. Each stage is the service that
   concerns it. Without JavaScript, or under reduced motion, the whole
   thing unpins and reads as five stacked cards. */
.build{position:relative;background:var(--nx-0);color:var(--nx-text)}
.build-track{position:relative;height:620vh}
.build-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--nx-0)}

/* The model is the whole frame. Copy sits over it behind a scrim, which is
   what stops a 3D panel reading as a widget parked in a column. */
.build-stage{position:absolute;inset:0;z-index:0}
.build-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.build-stage .grid-bg{z-index:0;background-size:52px 52px;-webkit-mask-image:none;mask-image:none;opacity:.35}
.build-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,8,6,0) 26%,rgba(4,8,6,.55) 48%,rgba(4,8,6,.93) 68%,rgba(4,8,6,.97) 100%)}
.build-over{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto 1fr auto;
  pointer-events:none}
.build-over .wrap{pointer-events:none}
.build-over a,.build-over button{pointer-events:auto}
.build-row{min-height:0}
.build-top{padding-top:calc(var(--head-h,74px) + 16px)}
.build-topin{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.build-mid{display:grid;align-items:center;min-height:0}
/* .wrap carries auto margins, which would size it to its content inside a
   grid rather than to the row. */
.build-row>.wrap{width:100%}
.build-grid{display:grid;grid-template-columns:1fr minmax(0,min(47%,560px));gap:clamp(20px,3vw,48px)}
.build-copy{grid-column:2;min-width:0}
.build-copy>.label{display:block;margin-bottom:10px}
.build-copy h2{margin-bottom:clamp(16px,2.2vw,26px);font-size:clamp(1.8rem,2.7vw,2.5rem);
  line-height:1.04;color:#fff}
/* All five slides share one grid cell, so the block is as tall as the
   tallest of them and nothing can run into the stage bar below. */
.bslides{display:grid;align-items:start}
.bslide{grid-area:1/1;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bslide.is-on{opacity:1;transform:none;pointer-events:auto}
.bnum{font-family:var(--si-head);font-weight:700;font-size:.72rem;letter-spacing:.2em;color:var(--nx-soft)}
.btag{display:block;margin-top:10px;font-family:var(--si-head);font-weight:600;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--si-lime)}
.bslide h3{color:#fff;font-size:clamp(1.3rem,2.2vw,1.75rem);margin:8px 0 12px}
.bslide p{color:var(--nx-soft);font-size:.99rem;max-width:44ch}
.bslide .svc-for{margin-top:14px;font-size:.88rem;color:var(--nx-soft)}
.bslide .svc-for b{color:var(--si-lime);font-weight:700}

/* The stage bar: five chapters, filling as the structure goes up. */
.build-bot{padding-bottom:clamp(20px,3.4vh,34px)}
.brail{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.4vw,18px);
  margin:0;padding:0;border-top:1px solid var(--nx-line);padding-top:0}
.brail li{min-width:0}
.brail button{display:block;width:100%;text-align:left;padding:11px 0 0;border:0;background:none;
  cursor:pointer;position:relative;color:var(--nx-soft)}
.brail button::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:#1d2a23}
.brail button i{position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--si-lime);
  box-shadow:0 0 12px var(--nx-glow)}
.brail em{display:block;font-family:var(--si-head);font-weight:700;font-style:normal;font-size:.7rem;
  letter-spacing:.2em;color:var(--nx-soft)}
.brail span{display:block;margin-top:3px;font-size:.83rem;line-height:1.25;color:var(--nx-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brail .is-on em,.brail .is-on span{color:#fff}
.brail button:focus-visible{outline:2px solid var(--si-lime);outline-offset:4px}

@media (max-width:920px){
  :root{--head-h:115px}
  .build-track{height:560vh}
  .build-scrim{background:linear-gradient(180deg,rgba(4,8,6,.6) 0%,rgba(4,8,6,.08) 18%,rgba(4,8,6,.5) 30%,rgba(4,8,6,.9) 42%,rgba(4,8,6,.97) 54%)}
  .build-grid{grid-template-columns:1fr}
  .build-copy{grid-column:1}
  .build-mid{align-items:end;padding-bottom:6px}
  .build-copy h2{font-size:clamp(1.65rem,7vw,2.2rem);margin-bottom:14px}
  .bslide p{font-size:.95rem;max-width:none}
  .brail{grid-template-columns:repeat(5,1fr);gap:6px}
  .brail em{font-size:.62rem}
  .brail span{display:none}
  .brail button{padding-top:8px}
}
@media (max-width:520px){
  .build-top{padding-top:calc(var(--head-h,115px) + 8px)}
  .build-topin .vp-live{display:none}
}

/* Unpinned: no script, or the reader asked for less motion. */
.build.is-static .build-track{height:auto}
.build.is-static .build-pin{position:static;height:auto;overflow:visible;
  max-width:var(--maxw);margin-inline:auto;padding:clamp(56px,8vw,96px) var(--gut)}
.build.is-static .build-stage{display:none}
.bshot{position:relative;height:clamp(210px,26vw,300px);border:1px solid var(--nx-line);
  background:var(--nx-1);margin-bottom:20px}
.build.is-static .build-scrim{display:none}
.build.is-static .build-over{position:static;display:block}
.build.is-static .build-top{display:none}
.build.is-static .build-over .wrap{max-width:none;padding-inline:0}
.build.is-static .build-grid{grid-template-columns:1fr}
.build.is-static .build-copy{grid-column:1}
.build.is-static .bslides{display:grid;gap:26px}
.build.is-static .bslide{grid-area:auto;opacity:1;transform:none;pointer-events:auto;
  border-top:1px solid var(--nx-line);padding-top:20px}
.build.is-static .brail{display:none}

@media (prefers-reduced-motion:reduce){
  .build-track{height:auto}
  .build-pin{position:static;height:auto;overflow:visible;
    max-width:var(--maxw);margin-inline:auto;padding:clamp(56px,8vw,96px) var(--gut)}
  .build-stage{display:none}
  .build-scrim{display:none}
  .build-over{position:static;display:block}
  .build-top{display:none}
  .build-over .wrap{max-width:none;padding-inline:0}
  .build-grid{grid-template-columns:1fr}
  .build-copy{grid-column:1}
  .bslides{display:grid;gap:26px}
  .bslide{grid-area:auto;opacity:1;transform:none;pointer-events:auto;border-top:1px solid var(--nx-line);padding-top:20px}
  .brail{display:none}
}
}

/* ---- capability strip ---- */
.cap-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,44px);align-items:center}
.stage{position:relative;background:var(--nx-1);border:1px solid var(--nx-line);height:clamp(320px,44vh,470px);overflow:hidden}
.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1}
.stage .grid-bg{z-index:0;background-size:40px 40px;-webkit-mask-image:none;mask-image:none;opacity:.55}
.hud{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--nx-line);border:1px solid var(--nx-line);margin-top:24px}
.hud .cell{background:var(--nx-1);padding:14px 15px}
.hud .k{display:block;font-family:var(--si-head);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nx-soft);margin-bottom:6px}
.hud .v{font-family:var(--si-head);font-weight:700;font-size:1.5rem;color:var(--si-leaf);font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 22px var(--nx-glow)}
.hud .v small{font-size:.58em;font-weight:600;color:var(--nx-soft);margin-left:4px;text-shadow:none}
.cap-note{margin-top:18px;font-size:.84rem;color:var(--nx-soft);line-height:1.6}
@media (max-width:920px){.cap-grid{grid-template-columns:1fr}.stage{height:clamp(260px,52vw,340px)}}

/* ---- reviews band ---- */
.rev{background:var(--si-well);border-bottom:1px solid var(--si-hair);padding-block:clamp(26px,3.4vw,44px)}
.rev-in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:center}
.rev-score{display:flex;align-items:center;gap:12px}
.rev-score .n{font-family:var(--si-head);font-weight:700;font-size:2.1rem;color:var(--si-deep);line-height:1}
.rev-score .stars{color:var(--si-forest)}
.rev-score .c{font-size:.86rem;color:var(--si-muted);max-width:11ch;line-height:1.35}
.hr-track{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;min-width:0}
.hr-track::-webkit-scrollbar{display:none}
.hr-track:focus-visible{outline:3px solid var(--si-leaf);outline-offset:4px}
.hr-quote{flex:0 0 100%;min-width:0;scroll-snap-align:start;margin:0;padding:0 4px}
.hr-quote p{font-size:.97rem;line-height:1.55;color:var(--si-text)}
.hr-quote cite{display:block;margin-top:7px;font-style:normal;font-family:var(--si-head);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--si-forest)}
.rev-side{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.hr-dots{display:flex;gap:6px}
.hr-dot{width:8px;height:8px;padding:0;cursor:pointer;background:transparent;border:1px solid var(--si-forest);border-radius:0}
.hr-dot[aria-current="true"]{background:var(--si-forest)}
.hr-dot:focus-visible{outline:2px solid var(--si-leaf);outline-offset:2px}
.hr-more{font-family:var(--si-head);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--si-deep);text-decoration:none;white-space:nowrap}
.hr-more:hover,.hr-more:focus-visible{text-decoration:underline}
@media (max-width:880px){.rev-in{grid-template-columns:1fr;gap:16px}.rev-side{align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%}}

/* ---- work ---- */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--si-rule);border:1px solid var(--si-rule)}
.work-item{background:#fff;display:flex;flex-direction:column;overflow:hidden;position:relative}
.work-item .shot{position:relative;overflow:hidden;flex:0 0 auto}
.work-item img{width:100%;height:clamp(190px,21vw,250px);object-fit:cover;display:block;transition:transform .9s var(--ease),filter .9s var(--ease)}
.work-item:hover img{transform:scale(1.04)}
.work-item .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,104,55,.14),transparent 55%);pointer-events:none}
.work-body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--si-rule)}
.work-item--lead{grid-column:1/-1;border-left:6px solid var(--si-deep)}
.work-item--lead .work-body{border-top:none}
.work-tag{font-family:var(--si-head);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--si-forest)}
.work-item h3{font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.18;text-wrap:normal}
.work-loc{font-size:.85rem;color:var(--si-muted);margin-top:-5px}
.work-body p:last-child{font-size:.95rem}
.work-note{margin-top:24px;font-size:.93rem;color:var(--si-muted);max-width:76ch}
@media (max-width:760px){.work{grid-template-columns:1fr}.work-item--lead{border-left-width:4px}}

/* ---- process ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--nx-line);border:1px solid var(--nx-line)}
.step{background:var(--nx-1);padding:clamp(24px,3vw,34px);position:relative}
.step .n{display:block;font-family:var(--si-head);font-weight:700;font-size:.72rem;letter-spacing:.2em;color:var(--si-leaf);margin-bottom:18px}
.step h4{font-size:1.18rem;color:#fff;margin-bottom:10px;font-family:var(--si-head);font-weight:700}
.step p{font-size:.96rem;color:var(--nx-soft)}
.step-line{height:2px;background:var(--nx-line);margin-top:0;position:relative;overflow:hidden}
.step-line i{position:absolute;inset:0;width:0;background:var(--si-grad);transition:width 1.4s var(--ease)}
.in .step-line i{width:100%}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ---- about ---- */
.about-in{display:grid;grid-template-columns:1fr .8fr;gap:clamp(26px,5vw,56px);align-items:start}
.about-in p+p{margin-top:15px}
.about-in>div>p{max-width:60ch}
.note{background:var(--si-mint);border-left:6px solid var(--si-deep);padding:26px 28px}
.note .label{display:block;margin-bottom:10px;color:var(--si-deep)}
.note p{color:#14321f}
.sig{margin-top:18px;padding-top:16px;border-top:1px solid var(--si-rule);font-size:.92rem;color:var(--si-muted)}
.sig b{font-family:var(--si-head);font-size:1.05rem;color:var(--si-deep);display:block;font-weight:700}
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--si-rule);border:1px solid var(--si-rule);margin-top:clamp(30px,3.6vw,48px)}
.fig{background:#fff;padding:clamp(18px,2.2vw,28px)}
.fig .v{font-family:var(--si-head);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--si-deep);line-height:1;font-variant-numeric:tabular-nums}
.fig .k{display:block;margin-top:9px;font-size:.85rem;color:var(--si-muted)}
@media (max-width:820px){.about-in{grid-template-columns:1fr}}
@media (max-width:760px){.figures{grid-template-columns:repeat(2,1fr)}}

/* ---- contact ---- */
.contact-in{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(26px,5vw,56px);align-items:start}
.details{display:grid;gap:1px;background:var(--si-rule);border:1px solid var(--si-rule)}
.detail{background:#fff;padding:20px 22px}
.detail .label{display:block;margin-bottom:7px}
.detail a{font-size:1.1rem;color:var(--si-deep);font-weight:700;text-decoration:none;font-family:var(--si-head)}
.detail a:hover{text-decoration:underline}
.detail address{font-style:normal;line-height:1.55}
form{display:grid;gap:15px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{display:block;margin-bottom:6px;font-family:var(--si-head);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--si-text)}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;font:400 16px/1.5 var(--si-body);color:var(--si-text);background:#fff;border:1px solid #BFCFC2;padding:12px 13px;border-radius:0}
input[type=text]:focus,input[type=tel]:focus,input[type=email]:focus,select:focus,textarea:focus{outline:none;border-color:var(--si-deep);box-shadow:0 0 0 3px rgba(0,104,55,.18)}
textarea{resize:vertical;min-height:118px}
.form-note{font-size:.86rem;color:var(--si-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:820px){.contact-in{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* ------------------------------------------------------------ on black
   Option 2 runs dark the whole way down. These are the light components
   restated on the dark ground, rather than a separate set of components. */
.dark h3,.dark h4{color:#fff}
.dark .btn{background:var(--si-leaf);border-color:var(--si-leaf);color:#04140A}
.dark .btn:hover,.dark .btn:focus-visible{background:#54d166;border-color:#54d166;
  box-shadow:0 0 28px var(--nx-glow)}
.dark .btn--out{background:transparent;border-color:var(--nx-line-2);color:var(--nx-text)}
.dark .btn--out:hover,.dark .btn--out:focus-visible{background:transparent;
  border-color:var(--si-leaf);color:var(--si-leaf);box-shadow:none}

/* reviews */
.rev.dark{background:var(--nx-1);border-bottom:1px solid var(--nx-line);border-top:1px solid var(--nx-line)}
.rev.dark .rev-score .n{color:#fff}
.rev.dark .rev-score .stars{color:var(--si-lime)}
.rev.dark .rev-score .c,.rev.dark .hr-quote p{color:var(--nx-soft)}
.rev.dark .hr-quote cite{color:var(--si-lime)}
.rev.dark .hr-more{color:var(--si-lime)}
.rev.dark .hr-dot{border-color:#2C3C33}
.rev.dark .hr-dot[aria-current="true"]{background:var(--si-lime);border-color:var(--si-lime);
  box-shadow:0 0 10px var(--nx-glow)}

/* work */
.dark .work{background:var(--nx-line);border-color:var(--nx-line)}
.dark .work-item{background:var(--nx-1)}
.dark .work-item:hover{background:var(--nx-2)}
.dark .work-body{border-top-color:var(--nx-line)}
.dark .work-tag{color:var(--si-lime)}
.dark .work-loc,.dark .work-body p,.dark .work-note{color:var(--nx-soft)}
.dark .work-item--lead{border-left-color:var(--si-lime)}
.dark .work-item .shot::after{background:linear-gradient(180deg,rgba(0,200,83,.12),transparent 60%)}
.dark .work-item img{filter:saturate(.92) contrast(1.04)}
/* The two line drawings are black on white. Inverted they sit on the dark
   ground as white line work, which is how they are read on a screen anyway. */
.dark .shot--doc img{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(1.12)}
.dark .shot--doc::after{background:linear-gradient(180deg,rgba(0,200,83,.16),transparent 60%)}

/* about */
.dark .note{background:var(--nx-2);border-left-color:var(--si-lime)}
.dark .note .label{color:var(--si-lime)}
.dark .note p{color:var(--nx-soft)}
.dark .sig{border-top-color:var(--nx-line);color:var(--nx-soft)}
.dark .sig b{color:#fff}
.dark .figures{background:var(--nx-line);border-color:var(--nx-line)}
.dark .fig{background:var(--nx-1)}
.dark .fig .v{color:#fff}
.dark .fig .k{color:var(--nx-soft)}

/* contact */
.dark .details{background:var(--nx-line);border-color:var(--nx-line)}
.dark .detail{background:var(--nx-1)}
.dark .detail a{color:var(--si-lime)}
.dark .detail address{color:var(--nx-soft)}
.dark label{color:var(--nx-soft)}
.dark input[type=text],.dark input[type=tel],.dark input[type=email],
.dark select,.dark textarea{background:var(--nx-1);border-color:var(--nx-line-2);color:var(--nx-text)}
.dark input::placeholder,.dark textarea::placeholder{color:#6E7D74}
.dark input[type=text]:focus,.dark input[type=tel]:focus,.dark input[type=email]:focus,
.dark select:focus,.dark textarea:focus{border-color:var(--si-leaf);
  box-shadow:0 0 0 3px rgba(57,181,74,.22)}
.dark .form-note{color:var(--nx-soft)}

/* ---- the structure gallery ---- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--nx-line);
  border:1px solid var(--nx-line)}
.gal-item{margin:0;background:var(--nx-1);display:flex;flex-direction:column}
.gal-shot{position:relative;height:clamp(170px,15vw,210px);overflow:hidden;
  border-bottom:1px solid var(--nx-line)}
.gal-shot canvas{display:block}
.gal-item figcaption{padding:clamp(16px,1.6vw,22px);display:grid;gap:7px}
.gal-item b{font-family:var(--si-head);font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:.01em}
.gal-item span{font-size:.9rem;color:var(--nx-soft);line-height:1.45}
@media (max-width:1000px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .gal-grid{grid-template-columns:1fr}
  .gal-shot{height:clamp(160px,42vw,200px)}
}

/* ---- footer ---- */
.ftr{background:var(--si-black);color:#9FB0A6;padding-block:48px;font-size:.93rem}
.ftr-in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:32px;align-items:start}
.ftr img{height:58px;width:auto}
.ftr h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:13px;font-weight:600;font-family:var(--si-head)}
.ftr a{color:#9FB0A6;text-decoration:none}
.ftr a:hover{color:var(--si-leaf);text-decoration:underline}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr address{font-style:normal;line-height:1.6}
.ftr-base{margin-top:36px;padding-top:20px;border-top:1px solid #16211B;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:.83rem;color:#6E7D74}
@media (max-width:820px){.ftr-in{grid-template-columns:1fr;gap:28px}}

[id]{scroll-margin-top:124px}