/* ============================================================
   Next-Gen Studio
   Dark cinematic. Archivo display over Space Grotesk body.
   Accent tones are injected as CSS variables from the customizer.
   ============================================================ */

:root{
  --bg:#0A0A0B;
  --bg-2:#121214;
  --bg-3:#191919;
  --line:#2A2A2E;
  --line-soft:#1C1C1F;
  --fg:#F5F3F0;
  --fg-dim:#9A9AA2;
  --fg-faint:#808089;

  /* Overridden inline by the customizer. Kept here so the theme still
     renders correctly if that filter is ever removed. */
  --gold:#D4AF37;
  --gold-hi:#F4E3AC;
  --gold-lo:#9C7A22;
  --gold-grad:linear-gradient(128deg,#F4E3AC 0%,#D4AF37 30%,#9C7A22 54%,#F4E3AC 76%,#D4AF37 100%);

  --on-gold:#14100A;
  --ok:#4ADE80;
  --err:#FF6B6B;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px;
  --sp-5:64px; --sp-6:96px;
  --blk:clamp(72px,9vw,124px);

  --r-sm:4px; --r-md:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:76px;
  --gut:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
/* color-scheme tells the engine to draw scrollbars, form controls, the canvas
   behind the page and the address bar in their dark variants. Without it a
   dark site still gets a white scrollbar and a white flash before the first
   paint. The matching <meta name="color-scheme" content="dark"> in inc/meta.php
   is what covers the window before this stylesheet has arrived. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--on-gold)}

h1,h2,h3,h4{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;letter-spacing:-.035em;line-height:.94;margin:0;text-wrap:balance;
}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;width:auto;height:auto;clip:auto;
  z-index:9999;background:var(--gold);color:var(--on-gold);padding:12px 20px;
  border-radius:100px;font-size:14px;
}

.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-faint);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--gold);flex:none}
.eyebrow.is-centre{justify-content:center}

.ico{width:1em;height:1em;flex:none}

/* ---------- gold text helper -------------------------------- */
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ============================================================
   NAV
   ============================================================ */
#prog{
  position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;background:var(--gold-grad);z-index:700;pointer-events:none;
}
/* The WordPress admin bar is fixed too, so a fixed header has to step down for
   logged-in users or it hides underneath it. */
body.admin-bar .nav{top:32px}
body.admin-bar .links.open{top:calc(32px + var(--nav-h))}
@media screen and (max-width:782px){
  body.admin-bar .nav{top:46px}
  body.admin-bar .links.open{top:calc(46px + var(--nav-h))}
}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  padding:0 var(--gut);border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s;
}
.nav.solid{
  background:rgba(10,10,11,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.brand{display:flex;align-items:center;gap:11px;font-family:'Archivo';font-weight:800;
  font-size:15px;letter-spacing:-.02em;text-transform:uppercase;flex:none}
.brand .mark{
  width:26px;height:26px;border:1.5px solid var(--gold);border-radius:3px;
  display:grid;place-items:center;font-size:12px;color:var(--gold);
  transform:rotate(45deg);flex:none;
}
.brand .mark span{transform:rotate(-45deg)}
.brand-text em{
  font-style:normal;color:var(--fg-faint);font-weight:400;
  letter-spacing:.2em;font-size:9px;display:block;text-transform:uppercase;
}
.brand .custom-logo{max-height:40px;width:auto}

.links .menu{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.links a{
  position:relative;display:block;padding:9px 15px;font-size:13px;letter-spacing:.03em;
  color:var(--fg-dim);transition:color .3s;border-radius:var(--r-sm);
}
.links a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.links a:hover,.links .current-menu-item>a{color:var(--fg)}
.links a:hover::after,.links .current-menu-item>a::after{transform:scaleX(1)}

.nav-cta{
  border:1px solid var(--line);border-radius:100px;padding:9px 20px;flex:none;
  font-size:12.5px;letter-spacing:.04em;display:flex;align-items:center;gap:8px;
  transition:.35s var(--ease);
}
.nav-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:ngd-pulse 2.4s infinite}
@keyframes ngd-pulse{0%,100%{opacity:1}50%{opacity:.25}}

.burger{display:none;width:44px;height:44px;position:relative}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:var(--fg);transition:.35s var(--ease)}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:25px}
.burger.open i:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open i:nth-child(2){top:21px;transform:rotate(-45deg)}

@media(max-width:900px){
  .links,.nav-cta{display:none}
  .burger{display:block}
  .links.open{
    display:block;position:fixed;top:var(--nav-h);left:0;right:0;bottom:auto;z-index:601;
    background:var(--bg);padding:var(--sp-4) var(--gut) var(--sp-5);
    border-bottom:1px solid var(--line);
  }
  .links.open .menu{flex-direction:column;align-items:stretch;gap:0}
  .links.open a{
    font-size:26px;font-family:'Archivo';font-weight:700;padding:14px 0;
    color:var(--fg);border-bottom:1px solid var(--line-soft);
  }
  .links.open a::after{display:none}
  body.menu-open::after{
    content:'';position:fixed;inset:0;z-index:500;
    background:rgba(10,10,11,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  body.menu-open{overflow:hidden}
}

/* ---------- mobile burger, folded from Additional CSS -------
   Was `ngd:nav-burger-mobile` in the Additional CSS panel, 26 Aug 2026, written
   there because there was no live theme source on disk to edit.

   The header is a flex row with justify-content:space-between. .brand was
   flex:none and its intrinsic width is 396px, driven by the 9px tagline, while
   a 390px phone gives the nav a 350px content box. So the brand overflowed and
   .burger, which carried no flex:none of its own, was shrunk from 44px to 12px
   and pushed to x=432, right edge 444, entirely off the screen. Measured on the
   live markup at 320, 360, 390, 412 and 430px. 520px and up were never
   affected.

   The third rule that shipped in that block, the burger bars on the beige hero
   band, is NOT here: it belongs with the rest of body.ngd-hero-lightnav and is
   folded under the HOME HERO banner below. */
@media (max-width:900px){
  .nav .brand{flex:0 1 auto;min-width:0}
  .nav .brand-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav .burger{flex:0 0 auto}
}
@media (max-width:600px){
  .nav .brand-text em{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero-pin{height:100svh;min-height:560px;position:relative;overflow:hidden}
.hero-media{
  position:absolute;inset:0;background:var(--bg-2);
  --iy:14; --ix:9; --ir:18;
  clip-path:inset(calc(var(--iy) * 1%) calc(var(--ix) * 1%) calc(var(--iy) * 1%) calc(var(--ix) * 1%) round calc(var(--ir) * 1px));
  will-change:clip-path;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  transform:scale(1.1);will-change:transform;
  filter:brightness(.54) saturate(.8) contrast(1.14);
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(10,10,11,.5) 0%,rgba(10,10,11,.18) 30%,rgba(10,10,11,.68) 72%,rgba(10,10,11,.95) 100%);
}
.hero-copy{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--gut) clamp(40px,8vh,88px);
}
.hero-copy h1{
  font-size:clamp(44px,11.5vw,190px);font-weight:900;letter-spacing:-.05em;
  line-height:.86;text-transform:uppercase;
}
.hero-copy h1 .ln{display:block;overflow:hidden}
.hero-copy h1 .ln>span{display:block}
.hero-copy h1 .out{
  -webkit-text-stroke:1.5px var(--gold);color:transparent;
}
.hero-meta{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sp-4);margin-top:var(--sp-4);flex-wrap:wrap;
}
.hero-meta p{max-width:46ch;color:var(--fg-dim);font-size:15px;margin:0}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap}
/* 12px, not 11px. These chips sit under a 190px headline in uppercase with
   .14em of tracking, which is where 11px stops being small and starts being
   hard to read; every other 11px label on the site is either a single word or
   sits on its own line. One value, nothing else about them changes. */
.tag{
  border:1px solid var(--line);border-radius:100px;padding:6px 14px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
}
.scroll-hint{
  position:absolute;bottom:26px;right:var(--gut);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);
}
.scroll-hint .rail{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint .rail::after{
  content:'';position:absolute;top:-46px;left:0;width:1px;height:46px;
  background:var(--gold);animation:ngd-rail 2s infinite var(--ease);
}
@keyframes ngd-rail{to{top:46px}}
@media(max-width:760px){
  .hero-media{--iy:9;--ix:5}
  .scroll-hint{display:none}
}

/* === ngd:hero-feature:start ===
   ============================================================
   HOME HERO, THE CAMERA BAND
   Folded whole from ngd-hero-camera 2.0.0's hero-camera.css, 6,733 B, which
   existed only inside the shipped plugin zip. Pairs with
   template-parts/hero-camera.php and assets/js/hero-camera.js.

   THE SECTION IS A LIGHT BAND, and that is arithmetic rather than taste. The
   Canon model's diffuse texture is near-black: its median pixel is RGB(8,8,8),
   which measures 1.01:1 against the site's #0A0A0B and is the definition of
   invisible. On this beige it measures 10.42:1.

   Every supporting colour is chosen against this ground and they all had to
   darken with it. Measured against #C2BAAE: heading 10.3:1, body 7.03:1,
   labels 4.57:1, accent 5.06:1. The site gold #D4AF37 is unusable here at
   1.53:1, and even #9A7B1F only reaches 2.09:1, so the accent is #544209.

   No headline lives in this section. front-page.php renders the site's only h1
   in .hero-pin above, and the phrase this section used to carry is already the
   teaser h2 below it.
   ============================================================ */

.ngd-hero {
  --sec-bg: #C2BAAE;
  --sec-fg: #0A0A0B;
  --sec-dim: #2E2E33;
  --sec-faint: #4A4A52;
  --sec-rule: #9C9081;
  --sec-accent: #544209;
  --sec-frame: 68, 54, 12;

  position: relative;
  height: 100svh;
  min-height: 600px;
  background: var(--sec-bg);
  color: var(--sec-fg);
}

/* The WebGL stage sits behind everything and never takes pointer events.
   overflow:hidden is load bearing: it clips the off-frame entry positions. */
.ngd-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.ngd-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* is-ready is set once the scene has booted and drawn its first frame. */
.ngd-hero.is-ready .ngd-hero__poster {
  display: none;
}

/* Copy block, left edge and vertically centred, above the canvas.
   It sits opposite the settled composition, which lands right of centre, so the
   two do not fight. No h1 here: front-page.php renders the page's only h1 in
   .hero-pin above this section. */
.ngd-hero__note {
  position: absolute;
  z-index: 3;
  left: var(--gut, clamp(20px, 5vw, 72px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  width: min(38ch, 38vw);
  margin: 0;
}

.ngd-hero__note-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sec-faint);
}

.ngd-hero__note-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--sec-accent);
}

.ngd-hero__note h2 {
  margin: 0;
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(24px, min(3.2vw, 5vh), 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--sec-fg);
}

.ngd-hero__note p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--sec-dim);
}

/* ---------- VIEWFINDER FRAMING, rebuilt as boxes at 1.21.0 ----------
   2.0.0 drew this as one 1000x600 SVG with preserveAspectRatio="none". Stretching
   that to a 16:9 band scales x and y by different factors, so a 1px horizontal
   came out visibly thinner than a 1px vertical and every corner bracket came out
   wider than it was tall. The /work/ hero already draws its finder out of
   absolutely positioned boxes with 1px borders for exactly this reason. This
   mirrors it.

   Colour and every alpha are unchanged: --sec-frame is still 68,54,12, brackets
   .55, thirds .11, ticks .30, crosshair .40. The geometry is unchanged too, and
   deliberately so: .ngd-hero__fin reproduces the old viewBox's 40px padding as
   6.667% x 4%, and every percentage below is an old viewBox coordinate
   re-expressed against that inner box, so nothing moves. Only the strokes change,
   and they change to 1 device-independent pixel in both directions.

   The box still stops above the spec strip, so the strip reads as a camera's
   info bar rather than as something sitting inside the finder. */
.ngd-hero__frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(clamp(22px, 3.4vh, 42px) + clamp(74px, 9vh, 104px));
  z-index: 2;
  pointer-events: none;
}

.ngd-hero__fin {
  position: absolute;
  inset: 6.667% 4%;   /* the old viewBox's 40px margin, in both axes */
}

.ngd-hero__fin > i { position: absolute; display: block; }

/* corner brackets: 58 x 42 of the old 1000 x 600 box */
.ngd-hero__fin .c {
  width: 6.3%;
  height: 8.08%;
  border: 0 solid rgba(var(--sec-frame), .55);
}
.ngd-hero__fin .c-tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.ngd-hero__fin .c-tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.ngd-hero__fin .c-bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.ngd-hero__fin .c-br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* thirds, full height and inset at the ends exactly as the old lines were */
.ngd-hero__fin .v { top: 0; bottom: 0; width: 1px; background: rgba(var(--sec-frame), .11); }
.ngd-hero__fin .h { left: 2.17%; right: 2.17%; height: 1px; background: rgba(var(--sec-frame), .11); }

/* edge ticks, 12 of the old 600 tall */
.ngd-hero__fin .t { width: 1px; height: 2.31%; background: rgba(var(--sec-frame), .30); }
.ngd-hero__fin .t-t { top: 0; }
.ngd-hero__fin .t-b { bottom: 0; }

/* centre crosshair, 28 x 28 of the old box */
.ngd-hero__fin .x {
  left: 50%; top: 50%;
  width: 3.04%; height: 5.38%;
  transform: translate(-50%, -50%);
}
.ngd-hero__fin .x::before,
.ngd-hero__fin .x::after {
  content: "";
  position: absolute;
  background: rgba(var(--sec-frame), .40);
}
.ngd-hero__fin .x::before { left: 0; right: 0; top: 50%; height: 1px; }
.ngd-hero__fin .x::after { top: 0; bottom: 0; left: 50%; width: 1px; }

/* Spec strip along the bottom. Every value is already true of the studio. */
.ngd-hero__spec {
  position: absolute;
  z-index: 3;
  left: var(--gut, clamp(20px, 5vw, 72px));
  right: var(--gut, clamp(20px, 5vw, 72px));
  bottom: clamp(22px, 3.4vh, 42px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--sec-rule);
  padding-top: 14px;
  margin: 0;
}

.ngd-hero__spec > div {
  padding: 0 18px;
  border-left: 1px solid var(--sec-rule);
  min-width: 0;
}

.ngd-hero__spec > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.ngd-hero__spec dt {
  margin: 0 0 6px;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sec-faint);
}

.ngd-hero__spec dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--sec-fg);
}

.ngd-hero__spec dd b {
  font-weight: 500;
  color: var(--sec-accent);
}

@media (max-width: 900px) {
  .ngd-hero__spec { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .ngd-hero__spec > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ngd-hero__spec > div:last-child { grid-column: 1 / -1; }
}

/* The fixed nav is rgba(10,10,11,.74) once it goes solid, which reads as an
   unintentional grey slab over a light band. hero-camera.js adds this class
   while the section is behind the nav and removes it after. */
body.ngd-hero-lightnav .nav,
body.ngd-hero-lightnav .nav.solid {
  background: rgba(194, 186, 174, .88);
  border-bottom-color: #A79C8B;
  color: #0A0A0B;
}

body.ngd-hero-lightnav .nav .links a { color: #3A3A40; }
body.ngd-hero-lightnav .nav .links a:hover,
body.ngd-hero-lightnav .nav .links .current-menu-item > a { color: #0A0A0B; }
body.ngd-hero-lightnav .nav .brand,
body.ngd-hero-lightnav .nav .brand-text { color: #0A0A0B; }
body.ngd-hero-lightnav .nav .brand-text em { color: #4A4A52; }
body.ngd-hero-lightnav .nav .nav-cta { border-color: #8F8474; color: #0A0A0B; }

/* The third rule from Additional CSS block 1's sibling, `ngd:nav-burger-mobile`,
   26 Aug 2026. The first pass at the light nav restyled the links, the brand and
   the CTA and never touched the burger bars, so #F5F3F0 sat on #C2BAAE at 1.73:1
   and the button disappeared for a second time while this band was behind the
   nav. 10.3:1 after. It lives here rather than with the other two rules from that
   block because it belongs to this section, and a desktop review cannot catch it:
   the element it misses is display:none at desktop widths. */
body.ngd-hero-lightnav .nav .burger i { background: #0A0A0B; }

@media (max-width: 760px) {
  /* Flow layout: copy, then the poster, then nothing else. Neither the framing
     nor the spec strip earns its place on a phone, so both are dropped. */
  .ngd-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vh, 30px);
    padding: calc(var(--nav-h, 76px) + 6vh) var(--gut, 20px) clamp(34px, 6vh, 56px);
  }

  .ngd-hero__note {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    order: 1;
  }

  .ngd-hero__stage {
    position: static;
    inset: auto;
    order: 2;
    height: 42svh;
    min-height: 240px;
  }

  .ngd-hero__poster {
    position: static;
    width: 100%;
    height: 100%;
  }

  .ngd-hero__frame,
  .ngd-hero__spec { display: none; }
}
/* === ngd:hero-feature:end === */

/* ============================================================
   SECTIONS
   ============================================================ */
.blk{padding:var(--blk) var(--gut);position:relative}
.blk.pad-top{padding-top:calc(var(--nav-h) + var(--blk) * .7)}
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap;
}
/* /services/ and /photography/ now put their page title in an h1 where it used
   to be an h2, because neither page had a top-level heading at all. h1 and h2
   are listed together here so the two pages look exactly as they did. */
.sec-head h1,.sec-head h2{font-size:clamp(34px,6vw,86px);text-transform:uppercase;letter-spacing:-.045em;margin-top:20px}
.sec-note{max-width:40ch;color:var(--fg-dim);font-size:14.5px}
.idx{font-size:11px;letter-spacing:.2em;color:var(--fg-faint);text-transform:uppercase}

.empty{
  border:1px dashed var(--line);border-radius:var(--r-md);
  padding:clamp(40px,7vw,88px);text-align:center;
}
.empty h3{font-size:26px;text-transform:uppercase;margin-bottom:10px}
.empty p{color:var(--fg-dim);margin:0 auto var(--sp-3);max-width:44ch}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:12px;border-radius:100px;
  padding:15px 28px;font-size:13.5px;letter-spacing:.05em;font-weight:500;
  text-transform:uppercase;border:1px solid transparent;
  transition:.4s var(--ease);min-height:44px;
}
.btn .ico{width:15px;height:15px}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{background:var(--gold);color:var(--on-gold)}
.btn.ghost{border-color:var(--line);color:var(--fg)}
.btn.ghost:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.btn.acc{background:var(--gold-grad);color:var(--on-gold);font-weight:600}
.btn.acc:hover{filter:brightness(1.1)}
.btn.sm{padding:11px 20px;font-size:12px}
.btn.back{margin-top:28px}

/* ============================================================
   WORK RAIL
   ============================================================ */
.hwrap{position:relative;overflow:hidden;padding-left:var(--gut)}
.htrack{display:flex;height:100svh;align-items:center;will-change:transform}
.hpanel{flex:none;width:min(74vw,880px);margin-right:clamp(20px,4vw,64px);position:relative}
.hpanel a{display:block}
.hpanel .shot{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-md);background:var(--bg-2);
}
.hpanel .shot img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  transition:transform 1s var(--ease),filter .7s;filter:grayscale(.4) contrast(1.06);
}
.hpanel:hover .shot img{transform:scale(1);filter:grayscale(0)}
.hpanel .cap{display:flex;justify-content:space-between;gap:20px;margin-top:20px;align-items:flex-start}
.hpanel h3{font-size:clamp(22px,2.6vw,38px);text-transform:uppercase}
.hpanel .role{display:block;margin-top:6px;color:var(--fg-dim);font-size:14px}
.hpanel .yr{font-size:12px;color:var(--fg-faint);letter-spacing:.14em;flex:none}
.hpanel .num{
  position:absolute;top:18px;left:18px;z-index:2;
  background:rgba(10,10,11,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:100px;padding:5px 13px;font-size:11px;letter-spacing:.16em;
}
.h-intro{flex:none;width:min(46vw,520px);margin-right:clamp(20px,4vw,64px)}
.h-intro h2{font-size:clamp(38px,6vw,88px);text-transform:uppercase;margin-top:20px}
.h-intro p{color:var(--fg-dim);margin:var(--sp-3) 0;max-width:38ch}

@media(max-width:900px){
  .hwrap{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px;
  }
  .hwrap::-webkit-scrollbar{display:none}
  .htrack{height:auto;padding:var(--blk) 0;align-items:stretch}
  .hpanel{width:80vw;scroll-snap-align:center;margin-right:16px}
  .h-intro{width:76vw;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center}
  .hpanel:last-child{margin-right:var(--gut)}
}

/* ============================================================
   ARCHIVE TEASER
   ============================================================ */
.teaser{position:relative;padding:var(--blk) 0 clamp(56px,7vw,96px);overflow:hidden}
.bigtype{
  font-family:'Archivo';font-weight:900;font-size:clamp(70px,20vw,300px);
  line-height:.8;letter-spacing:-.055em;text-transform:uppercase;text-align:center;
  color:transparent;-webkit-text-stroke:1px var(--line);
  pointer-events:none;user-select:none;
}
.teaser-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,26px);
  padding:0 var(--gut);margin-top:-6vw;position:relative;z-index:2;
}
.tcell{position:relative;display:block;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-2)}
.tcell img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform}
.tcell-label{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:.45s var(--ease);
}
.tcell::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,11,.9));
  opacity:0;transition:opacity .45s var(--ease);
}
.tcell:hover::after,.tcell:focus-visible::after{opacity:1}
.tcell:hover .tcell-label,.tcell:focus-visible .tcell-label{opacity:1;transform:none}
.tcell:nth-child(1){grid-column:1/5;aspect-ratio:3/4}
.tcell:nth-child(2){grid-column:5/9;aspect-ratio:3/4;margin-top:clamp(30px,7vw,90px)}
.tcell:nth-child(3){grid-column:9/13;aspect-ratio:3/4}
@media(max-width:760px){
  .tcell:nth-child(1){grid-column:1/7}
  .tcell:nth-child(2){grid-column:7/13;margin-top:32px}
  .tcell:nth-child(3){grid-column:1/13;aspect-ratio:16/10}
}
.teaser-foot{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--sp-4);padding:var(--sp-5) var(--gut) 0;flex-wrap:wrap;
}
.teaser-foot>div{flex:1 1 340px}
.teaser-h{font-size:clamp(30px,5vw,64px);text-transform:uppercase;margin-top:18px}
.teaser-foot p{max-width:46ch;color:var(--fg-dim);margin:0 0 26px}

/* ============================================================
   SERVICES
   ============================================================ */
.svc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;
}
.svc-card{background:var(--bg);padding:clamp(28px,3.4vw,48px);position:relative;transition:background .5s var(--ease)}
.svc-card:hover{background:var(--bg-2)}
.svc-card.is-feat{background:var(--bg-2)}
.svc-card .badge{
  position:absolute;top:20px;right:20px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);
  border-radius:100px;padding:4px 11px;
}
.svc-card h3{font-size:26px;text-transform:uppercase;margin-bottom:8px}
.svc-card .lede{color:var(--fg-dim);font-size:14.5px;margin:0}
.svc-card .price{
  font-family:'Archivo';font-weight:800;font-size:clamp(34px,4.4vw,56px);
  letter-spacing:-.04em;margin:var(--sp-3) 0 0;line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-card .price small{
  font-size:13px;font-weight:400;color:var(--fg-faint);letter-spacing:0;
  display:block;margin-top:10px;-webkit-text-fill-color:var(--fg-faint);
}
/* A worded price is not a price. "Contact sales for specific pricing" was set
   in the same metallic gold as a figure at up to 23px, so the two cards that
   carry it read as though they cost more than the one that says $1,400. It now
   takes the site's small utility voice, the same 12px uppercase the eyebrows
   and the fact rows use, and drops the gradient fill. The MOST BOOKED badge is
   left exactly as it is: that is the differentiator between these cards, and it
   only works while nothing else is competing with it. */
.svc-card .price.is-text{
  font-size:12px;line-height:1.5;letter-spacing:.14em;
  font-weight:500;text-transform:uppercase;max-width:26ch;
  margin-top:var(--sp-3);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--fg-faint);-webkit-text-fill-color:var(--fg-faint);
}
/* The Enquire button is the only action on the card and its border was --line,
   #2A2A2E, which is 1.35 : 1 against the card and effectively invisible until
   you hover it. A ghost button that cannot be seen is not a ghost button. */
.svc-card .btn.ghost{border-color:var(--fg-faint)}
.svc-card ul{
  list-style:none;padding:var(--sp-3) 0 0;margin:var(--sp-3) 0 var(--sp-4);
  border-top:1px solid var(--line-soft);
}
.svc-card li{display:flex;gap:12px;padding:8px 0;font-size:14px;color:var(--fg-dim);align-items:flex-start}
.svc-card li .ico{width:14px;height:14px;margin-top:5px;color:var(--gold)}
@media(max-width:520px){
  .svc-card .badge{position:static;display:inline-block;margin-bottom:14px}
}

/* ============================================================
   ALBUM GRID
   ============================================================ */
.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,2.4vw,32px)}
.alb{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft)}
.alb-link{display:block;position:relative}
.alb .cover{display:block;aspect-ratio:4/5;overflow:hidden;position:relative}
.alb .cover img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.04);
  transition:transform 1.1s var(--ease),filter .6s;filter:brightness(.76);
}
.alb:hover .cover img{transform:scale(1.12);filter:brightness(1)}
.alb .cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(10,10,11,.93) 100%);
}
.alb .info{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2;display:block}
.alb h3{font-size:24px;text-transform:uppercase;letter-spacing:-.03em}
.alb .sub{display:flex;gap:6px 14px;margin-top:8px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-dim);flex-wrap:wrap;line-height:1.4}
.alb .lock{
  position:absolute;top:16px;right:16px;z-index:3;
  background:rgba(10,10,11,.68);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:100px;padding:6px 12px;
  display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-dim);
}
.alb .lock .ico{width:12px;height:12px;color:var(--gold)}
.alb.is-open .lock{border-color:rgba(74,222,128,.45);color:var(--ok)}
.alb.is-open .lock .ico{color:var(--ok)}
.alb .go{
  position:absolute;top:16px;left:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:var(--gold-grad);display:grid;place-items:center;color:var(--on-gold);
  opacity:0;transform:scale(.6);transition:.45s var(--ease);
}
.alb:hover .go,.alb:focus-within .go{opacity:1;transform:scale(1)}
.alb .go .ico{width:15px;height:15px}

/* ---------- cover curtain reveal, folded from Additional CSS -
   Was the second, unbannered block in the Additional CSS panel, 22 Aug 2026.
   Album covers unveil top to bottom as they scroll in, on the home teaser and
   on the /photography/ grid.

   .tcell and .teaser are overflow:hidden scroll containers, so the view
   timeline subject has to be .teaser on the home page and .alb on the archive,
   never the img itself. Progressive enhancement throughout: no
   animation-timeline support means no animation and no missing picture. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .teaser, .alb-grid .alb { view-timeline: --ngd-cover-reveal; }
    .teaser-grid .tcell img.wp-post-image,
    .alb-grid .alb img.wp-post-image {
      animation: ngd-curtain auto linear both;
      animation-timeline: --ngd-cover-reveal;
      animation-range: entry 15% entry 85%;
    }
  }
}
@keyframes ngd-curtain {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ============================================================
   PIN GATE
   ============================================================ */
.gate{
  min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + var(--sp-5)) var(--gut) var(--sp-5);
}
.gate-bg{position:absolute;inset:0;z-index:0}
.gate-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:blur(26px) brightness(.26) saturate(.7)}
.gate-inner{position:relative;z-index:2;width:100%;max-width:520px;text-align:center}
.gate-inner .glyph{
  width:62px;height:62px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto var(--sp-3);
  background:rgba(18,18,20,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.gate-inner .glyph .ico{width:22px;height:22px;color:var(--gold)}
.gate-inner h1{font-size:clamp(30px,5vw,52px);text-transform:uppercase;margin-top:18px}
.gsub{color:var(--fg-dim);margin:14px auto var(--sp-4);max-width:42ch;font-size:15px}

.pin-row{display:flex;gap:clamp(6px,1.6vw,12px);justify-content:center;margin-bottom:var(--sp-3)}
.pin-cell{
  width:clamp(44px,11vw,62px);height:clamp(56px,13vw,74px);text-align:center;
  font-family:'Archivo';font-weight:700;font-size:clamp(22px,5vw,30px);
  background:rgba(18,18,20,.82);border:1px solid var(--line);border-radius:var(--r-sm);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .3s var(--ease),box-shadow .3s,transform .3s var(--ease);
}
.pin-cell:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(212,175,55,.2);transform:translateY(-2px)}
.pin-cell.filled{border-color:var(--fg-faint)}
.pin-row.bad{animation:ngd-shake .42s}
@keyframes ngd-shake{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}
}
.pin-msg{min-height:22px;font-size:13.5px;margin:0 0 var(--sp-3)}
.pin-msg.err{color:var(--err)}
.pin-msg.ok{color:var(--ok)}
.pin-plain{
  background:rgba(18,18,20,.82);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 16px;letter-spacing:.4em;text-align:center;min-height:44px;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gal-head{
  padding:calc(var(--nav-h) + var(--sp-4)) var(--gut) var(--sp-4);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sp-4);flex-wrap:wrap;border-bottom:1px solid var(--line-soft);
}
.gal-head h1{font-size:clamp(36px,7vw,96px);text-transform:uppercase;margin-top:18px}
.gal-head .meta{
  display:flex;gap:22px;margin-top:14px;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-dim);flex-wrap:wrap;
}
.album-note{color:var(--fg-dim);max-width:52ch;margin-top:var(--sp-3)}
.gal-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Reading order matters: CSS `columns` fills each column top to bottom, so
   photo 2 lands under photo 1 instead of beside it. A grid flows left to right
   in upload order; JS then sets each row span so the heights still stagger. */
.gal{
  padding:var(--sp-4) var(--gut) var(--blk);
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(12px,2vw,22px);row-gap:0;
  grid-auto-rows:1px;align-items:start;
}
/* Four columns on a very wide window rather than three enormous ones. It keeps
   each frame near the 540px file the endpoint serves, so nothing is upscaled and
   nothing heavier has to be fetched. */
@media(min-width:1700px){.gal{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gal{grid-template-columns:1fr}}

/* ---------- the Work page grid wrapper ----------------------
   The last surviving rule of Additional CSS block 1, `ngd:library-head`,
   21 Aug 2026. It was written to mirror this .gal-head / .gal pair, which is
   why it is folded in beside them rather than with the library block.

   THE OTHER FIVE RULES IN THAT BLOCK ARE DELIBERATELY GONE, because the markup
   they styled is gone with them. template-parts/work-hero.php replaced
   <section class="lib-head"> whole, so .lib-head, .lib-head h1, .lib-facts and
   .lib-cta no longer match anything on the site, and the two paragraphs moved
   into the editorial band under the hero where they are .wh-note and .wh-intro,
   styled under the WORK HERO banner below, not .lib-notice and .lib-intro.
   Keeping any of them would have been dead CSS shipped as a fold. */
.lib{
  padding:var(--sp-4) var(--gut) var(--blk);
}
.shot-card{
  margin:0;position:relative;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-2);
}
/* Before JS measures, fall back to an even grid so nothing overlaps. */
.gal:not(.is-laid) .shot-card{grid-row:auto;margin-bottom:clamp(12px,2vw,22px)}
.shot-card img{width:100%;height:auto;cursor:zoom-in;transition:transform 1s var(--ease)}
.shot-card:hover img{transform:scale(1.04)}
.shot-card .ovl{
  position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,11,.93));
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:18px;
  pointer-events:none;
}
.shot-card:hover .ovl,.shot-card:focus-within .ovl{opacity:1}
/* The overlay must never swallow the click: the photo underneath opens the
   lightbox, and only the download button itself is interactive. */
.shot-card .ovl .dl-btn{pointer-events:auto}
.shot-card .fname{font-size:11px;letter-spacing:.1em;color:var(--fg-dim);text-transform:uppercase;word-break:break-all}
.shot-card .fname-real{display:block;margin-top:3px;font-size:10px;letter-spacing:.06em;color:var(--gold);text-transform:none;opacity:.85}
.dl-btn{
  width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--bg);
  display:grid;place-items:center;flex:none;transition:.35s var(--ease);
}
.dl-btn:hover{background:var(--gold);color:var(--on-gold);transform:translateY(-3px)}
.dl-btn .ico{width:17px;height:17px}
/* Keep the download control reachable on touch, where there is no hover. */
@media(hover:none){
  .shot-card .ovl{opacity:1;background:linear-gradient(180deg,transparent 62%,rgba(10,10,11,.88))}
}

/* ------------------------------------------------------------
   VIDEO
   Clips sit below the stills so the photography stays the point of
   the page. Phone footage is portrait and event footage is landscape,
   so the grid has to hold both without letterboxing either.
   ------------------------------------------------------------ */
.vids{padding:0 var(--gut) var(--blk);border-top:1px solid var(--line-soft);padding-top:var(--blk)}
.vids-head{max-width:60ch;margin-bottom:var(--sp-4)}
.vids-head h2{
  font-size:clamp(28px,4.6vw,58px);text-transform:uppercase;
  letter-spacing:-.02em;margin-top:14px;
}
.vids-head p{color:var(--fg-dim);margin-top:16px;max-width:52ch}
.vid-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(14px,2vw,24px);align-items:start;
}
.vid-card{
  margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line-soft);
}
.vid-card video{
  display:block;width:100%;height:auto;background:#000;
  aspect-ratio:16/9;object-fit:contain;
}
/* Vertical phone clips get a tall frame instead of two black pillars. */
.vid-card.is-tall video{aspect-ratio:9/16}
.vid-card figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;
}
.vid-card .fname{
  font-size:11px;letter-spacing:.1em;color:var(--fg-dim);
  text-transform:uppercase;word-break:break-all;
}
.vid-card .dl-btn{width:40px;height:40px}

/* ============================================================
   WORK LIST, PROJECT, CONTACT, PROSE
   ============================================================ */
.worklist{border-top:1px solid var(--line-soft)}
.wrow{
  display:grid;grid-template-columns:70px 1fr auto auto;gap:24px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line-soft);position:relative;
  transition:padding-left .45s var(--ease);
}
.wrow:hover{padding-left:14px}
.wnum,.wyear{color:var(--fg-faint);font-size:12px}
.wtitle{
  font-family:'Archivo';font-weight:800;font-size:clamp(22px,3.4vw,44px);
  text-transform:uppercase;letter-spacing:-.04em;display:block;transition:color .35s;
}
.wrow:hover .wtitle{color:var(--gold)}
.wrole{color:var(--fg-dim);font-size:14px}
.wpeek{
  width:120px;height:72px;border-radius:var(--r-sm);overflow:hidden;
  opacity:0;transform:translateX(-12px);transition:.45s var(--ease);display:none;
}
.wpeek img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .wpeek{display:block}
  .wrow:hover .wpeek{opacity:1;transform:none}
}
@media(max-width:640px){
  .wrow{grid-template-columns:44px 1fr auto;gap:14px}
}

.project-title{font-size:clamp(38px,8vw,120px);text-transform:uppercase;margin-top:22px}
.project-meta{
  display:flex;gap:var(--sp-5);flex-wrap:wrap;margin:var(--sp-4) 0;
  padding:var(--sp-3) 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.project-meta .k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.project-meta .v{display:block;margin-top:8px}
.project-meta a{display:inline-flex;align-items:center;gap:8px;color:var(--gold)}
.project-hero{margin:var(--sp-5) 0;border-radius:var(--r-md);overflow:hidden}

.contact-h{font-size:clamp(38px,9vw,130px);text-transform:uppercase;margin-top:24px}
.page-h{font-size:clamp(34px,7vw,96px);text-transform:uppercase}
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);
  margin-top:var(--sp-6);border-top:1px solid var(--line-soft);padding-top:var(--sp-4);
}
.contact-grid .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint)}
.contact-grid p{color:var(--fg-dim);margin-top:14px}
.big-link{display:inline-block;margin-top:14px;font-size:clamp(17px,2vw,22px);border-bottom:1px solid var(--gold)}
.big-link:hover{color:var(--gold)}
.contact-grid .role{
  margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}

.prose{max-width:68ch;color:var(--fg-dim);margin-top:var(--sp-4)}
.prose h2,.prose h3{color:var(--fg);margin:var(--sp-4) 0 var(--sp-2);text-transform:uppercase}
.prose a{color:var(--gold);border-bottom:1px solid rgba(212,175,55,.4)}
.prose img{border-radius:var(--r-sm);margin:var(--sp-3) 0}
.prose blockquote{border-left:2px solid var(--gold);margin:var(--sp-3) 0;padding-left:var(--sp-3);color:var(--fg)}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-blk{
  padding:clamp(80px,10vw,140px) var(--gut);border-top:1px solid var(--line-soft);
  text-align:center;position:relative;overflow:hidden;
}
.cta-blk h2{font-size:clamp(40px,10vw,150px);text-transform:uppercase;letter-spacing:-.05em;margin-top:26px}
.cta-blk h2 a{display:inline-block;transition:color .4s}
.cta-blk h2 a:hover{color:var(--gold)}
.cta-blk p{color:var(--fg-dim);max-width:44ch;margin:var(--sp-3) auto var(--sp-4)}
.cta-blk .cta-who{
  margin:var(--sp-4) auto 0;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.cta-blk .cta-who a{border-bottom:1px solid var(--line-soft);color:var(--fg)}
.cta-blk .cta-who a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.cta-blk .cta-who span{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}

.ft{
  border-top:1px solid var(--line-soft);padding:var(--sp-4) var(--gut);
  display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  font-size:12px;color:var(--fg-faint);letter-spacing:.05em;
}
.ft .grp{display:flex;gap:4px 20px;flex-wrap:wrap;align-items:center}
/* WCAG 2.5.8: keep footer links at a 24px minimum target height. */
.ft .grp a{display:inline-flex;align-items:center;min-height:24px}
.ft .grp .menu{display:flex;gap:4px 20px;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.ft a:hover{color:var(--gold)}

.pagination{margin-top:var(--sp-5);display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:100px;font-size:13px;
}
.pagination .current{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.pagination a:hover{border-color:var(--fg)}

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lbx{
  position:fixed;inset:0;z-index:7000;background:rgba(6,6,7,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:5vh 5vw;
}
#lbx[hidden]{display:none}
#lbx img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:var(--r-sm)}
#lbx .x{
  position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
}
#lbx .x:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
#lbx .x .ico{width:18px;height:18px}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero-media{--iy:0;--ix:0;--ir:0}
  .hero-media img{transform:none}
  .tcell img{transform:none}
  .shot-card .ovl{opacity:1}
}

/* ============================================================
   FOCUS RING
   One treatment, and it has to sit after everything that opts out of the
   default one. .pin-cell:focus sets outline:none so the gold glow can do the
   work, which is fine for a mouse and leaves a keyboard visitor with nothing;
   the pill buttons never carried a ring of their own at all. Same gold, same
   2px, same 3px offset as the global :focus-visible at the top of this file, so
   a keyboard tab through the site draws one shape and not four.
   ============================================================ */
.btn:focus-visible,
.pagination a:focus-visible,
.nav .links a:focus-visible,
.nav .nav-cta:focus-visible,
.nav .brand:focus-visible,
.nav .burger:focus-visible,
.big-link:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
/* Inside the pin row the boxes are 6px apart, so a 3px outset ring on two
   neighbours would touch. 2px, and the gold border and glow stay. */
.pin-cell:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.2);
}

/* === ngd:library:start === */
/* The concept windows.

   Each one is a browser chrome around a 16:10 port holding a poster image and a
   muted looping clip. The clip fades up over the poster once it actually has
   frames to show, so a slow connection degrades to a still rather than a black
   rectangle. */
.lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,42px)}
@media(max-width:900px){.lib-grid{grid-template-columns:1fr}}

.cx{display:flex;flex-direction:column;gap:18px}
.cx-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b0b0c;
  box-shadow:0 26px 60px rgba(0,0,0,.42)}
.cx-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#121214;
  border-bottom:1px solid var(--line)}
.cx-chrome i{width:9px;height:9px;border-radius:50%;background:#2c2c30;flex:none}
.cx-chrome .u{margin-left:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cx-port{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
.cx-poster,.cx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cx-vid{opacity:0;transition:opacity .5s ease}
.cx.is-on .cx-vid{opacity:1}
.cx.is-on .cx-poster{opacity:0;transition:opacity .5s ease .1s}

.cx-meta{display:flex;gap:16px;align-items:flex-start}
.cx-num{font-size:11px;letter-spacing:.14em;color:var(--gold);padding-top:4px}
.cx-meta h3{margin:0;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.01em}
.cx-meta p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--fg-dim);max-width:52ch}
.cx-sw{display:flex;gap:6px;margin-top:12px}
.cx-sw i{width:16px;height:16px;border-radius:4px;display:block}

@media (prefers-reduced-motion:reduce){
  .cx-vid{display:none}
  .cx.is-on .cx-poster{opacity:1}
}
/* === ngd:library:end === */

/* ============================================================
   WORK HERO, PORTFOLIO WORDMARK
   ngd:work-hero. Folded from the approved package's work-hero.css. Pairs with
   template-parts/work-hero.php and assets/js/work-hero.js.

   It REPLACES the .lib-head rules that lived in Additional CSS block 1
   (`ngd:library-head`, 21 Aug 2026): .lib-head, .lib-notice, .lib-intro,
   .lib-facts and .lib-cta no longer render on /work/. That block's `.lib` rule
   is still needed and is folded in beside .gal above, not duplicated here.

   Every selector is prefixed .wh, so nothing in here can reach the concept
   grid, the board drop-downs, the nav or the footer. The only shared classes
   the hero uses are .eyebrow, .btn, .btn.acc and .ico, which it consumes as-is
   and never restyles.
   ============================================================ */

/* ---------------------------------------------------------------------------
   1. THE SECTION
   No 100svh. With the spec strip gone there is nothing pinned to the foot, so
   holding a viewport height would leave a few hundred pixels of hole under the
   actions. The section takes its own height and keeps a generous bottom pad,
   which at a 900px viewport lands within about 50px of the fold anyway.
   --------------------------------------------------------------------------- */
.wh{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:auto;
  padding:calc(var(--nav-h) + 52px) var(--gut) clamp(70px,11vh,130px);
  background:var(--bg);
  overflow:hidden;          /* the guarantee of zero horizontal overflow */
  isolation:isolate;
  --wh-frame:194,186,174;   /* #C2BAAE, the home band's own beige */
  --wh-frame-op:1;
  --wh-bloom:0;
}

/* ---------------------------------------------------------------------------
   2. THE STAGE
   A block, not an absolute overlay, so the word and the copy underneath cannot
   collide however tall the copy gets. Measured at 1600x900: eyebrow 128 to 146,
   stage 156 to 489, subhead 517.
   --------------------------------------------------------------------------- */
.wh-stage{
  position:relative;
  width:100%;
  height:clamp(200px,37svh,420px);
  margin:0;
  z-index:0;
  pointer-events:none;
}
.wh-stage canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
/* Bloom is locked at 0 and the element is never created, but the rule stays so
   raising CONFIG.bloom in work-hero.js is the only change needed to get it. */
.wh-glow{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:blur(30px) brightness(1.28) contrast(1.5);
  mix-blend-mode:screen;
  opacity:var(--wh-bloom);
  transform:scale(1.05);
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   3. THE POSTER
   Under 760px, and on any WebGL or asset failure, the still replaces the stage
   entirely. work-hero.js sets .is-poster. A browser with JavaScript off never
   runs that, so the partial carries a <noscript><style> that flips the same two
   declarations; the poster <img> itself is always in the markup, hidden.
   --------------------------------------------------------------------------- */
.wh-word{display:none}
.wh.is-poster .wh-stage{display:none}
/* The stage is a sibling ABOVE .wh-copy, so on the live path the gap between
   the word and the subhead comes from .wh-copy's own margin-top. The poster
   <img> sits INSIDE .wh-copy, so it needs that same gap put back underneath it
   or the subhead butts straight up against the wordmark. Measured at 390px
   before the fix: 0px of air. */
.wh.is-poster .wh-word{
  display:block;
  width:100%;
  max-width:1456px;
  height:auto;
  margin:0 auto clamp(16px,3.2vh,42px);
}

/* ---------------------------------------------------------------------------
   4. VIEWFINDER FRAMING
   The finder boxes the wordmark band only, the patch of stage the letters rise
   out of, not the whole hero. Corner brackets, thirds, five edge ticks top and
   bottom, a centre crosshair. Drawn in #C2BAAE because the ground here is
   #0A0A0B; the home page finder is dark gold because its ground is beige.
   Alphas re-derived for the dark ground rather than copied: brackets at .62
   measure 4.46 : 1 against the black.

   Built out of boxes rather than one stretched SVG. The home page used to draw
   its finder as a 1000x600 viewBox with preserveAspectRatio="none", tolerable at
   that box's 2.5 : 1 but not here: this band runs past 4 : 1 and a stretched
   bracket comes out four times wider than it is tall. Boxes keep every corner
   square and every tick the same length at any aspect, and the thirds still
   stretch, which is correct for a grid. The home finder was rebuilt the same
   way at 1.21.0, so both now draw one device pixel in both directions.

   Top edge is the nav height. Bottom edge is measured off the stage at runtime
   into --wh-frame-bot, because the stage height is a clamp on svh and moves
   with the viewport. The fallback 40% is only ever seen for one frame.
   --------------------------------------------------------------------------- */
.wh-frame{
  position:absolute;
  left:4%;right:4%;
  top:var(--nav-h);
  bottom:var(--wh-frame-bot,40%);
  z-index:1;
  pointer-events:none;
  --brk:clamp(30px,3vw,52px);
}
.wh-frame > i{position:absolute;display:block}
/* corner brackets */
.wh-frame .c{
  width:var(--brk);height:var(--brk);
  border:0 solid rgba(var(--wh-frame),calc(.62 * var(--wh-frame-op)));
}
.wh-frame .c-tl{left:0;top:0;border-left-width:1px;border-top-width:1px}
.wh-frame .c-tr{right:0;top:0;border-right-width:1px;border-top-width:1px}
.wh-frame .c-bl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.wh-frame .c-br{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
/* thirds, inset at the ends so they never run into a bracket */
.wh-frame .v{top:9%;bottom:9%;width:1px;
  background:rgba(var(--wh-frame),calc(.15 * var(--wh-frame-op)))}
.wh-frame .h{left:6%;right:6%;height:1px;
  background:rgba(var(--wh-frame),calc(.15 * var(--wh-frame-op)))}
/* edge ticks */
.wh-frame .t{width:1px;height:11px;
  background:rgba(var(--wh-frame),calc(.34 * var(--wh-frame-op)))}
.wh-frame .t-t{top:0}
.wh-frame .t-b{bottom:0}
/* centre crosshair. The mark lands on the metal, where beige on beige-grey has
   no contrast at all, so each bar carries a 1px dark ring behind it. That is
   what a real finder does and it makes the mark read on the letter faces and on
   the black without getting heavier. */
.wh-frame .x{left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%)}
.wh-frame .x::before,.wh-frame .x::after{
  content:"";position:absolute;
  background:rgba(var(--wh-frame),calc(.46 * var(--wh-frame-op)));
  box-shadow:0 0 0 1px rgba(6,6,7,calc(.62 * var(--wh-frame-op)));
}
.wh-frame .x::before{left:0;right:0;top:50%;height:1px}
.wh-frame .x::after{top:0;bottom:0;left:50%;width:1px}
/* a phone gets the picture, not the furniture. Same cut as the home page. */
.wh.is-poster .wh-frame{display:none}

/* ---------------------------------------------------------------------------
   5. THE COPY
   The rendered PORTFOLIO takes the display line's job. The h1 stays in the
   markup for document structure and is hidden with the screen-reader pattern,
   the same thing the About page does with its duplicate heading, so /work/
   still contributes exactly one h1.
   --------------------------------------------------------------------------- */
.wh-eyebrow{position:relative;z-index:2;margin:0 0 10px}

.wh-copy{
  position:relative;
  z-index:2;
  max-width:none;
  margin-top:clamp(16px,3.2vh,42px);
}
.wh-h1{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.wh-sub{
  margin:0;
  max-width:64ch;
  font-size:clamp(16px,1.5vw,22px);
  line-height:1.5;
  color:rgba(245,243,240,.7);
}
.wh-actions{
  display:flex;align-items:center;gap:26px;
  margin-top:34px;
  flex-wrap:wrap;
}
/* the studio rule: pair a filled button with a ghost text link in a matching
   colour, never two filled buttons */
.wh-link{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--gold);
  display:inline-flex;align-items:center;gap:9px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(212,175,55,.32);
  transition:.35s var(--ease);
}
.wh-link:hover{border-bottom-color:var(--gold)}
.wh-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wh-link .ico{width:14px;height:14px}

/* ---------------------------------------------------------------------------
   6. EDITORIAL BAND
   The disclaimer and the long intro that used to sit in .lib-head move here,
   under the hero, which is where a disclaimer belongs anyway. Not one word of
   this copy is new: it is the live .lib-notice and .lib-intro text, re-split.
   --------------------------------------------------------------------------- */
.wh-band{
  padding:var(--blk) var(--gut);
  border-top:1px solid var(--line-soft);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,90px);
  align-items:start;
}
.wh-band h2{font-size:clamp(24px,2.6vw,40px);letter-spacing:-.025em;max-width:20ch}
.wh-band .wh-note{margin:0;color:var(--fg-dim);font-size:14.5px;line-height:1.65;max-width:62ch}
.wh-band .wh-intro{margin:18px 0 0;color:var(--fg-dim);font-size:15px;line-height:1.7;max-width:66ch}

/* ---------------------------------------------------------------------------
   7. BREAKPOINTS
   --------------------------------------------------------------------------- */
@media(max-width:1000px){
  .wh-sub{max-width:none}
}
@media(max-width:900px){
  .wh-band{grid-template-columns:1fr}
}
/* Under 760px the whole 3D stage is replaced by the still and the finder goes.
   work-hero.js reads the same query and never creates a context, never imports
   three.js and never fetches the GLB below this width, so the CSS below is the
   belt to that braces rather than the mechanism. */
@media(max-width:760px){
  .wh{padding:calc(var(--nav-h) + 34px) var(--gut) clamp(56px,9vh,90px)}
  .wh-stage{display:none}
  .wh-word{display:block;width:100%;max-width:1456px;height:auto;margin:0 auto clamp(16px,3.2vh,42px)}
  .wh-frame{display:none}
  .wh-copy{margin-top:clamp(14px,3vh,30px)}
}

@media (prefers-reduced-motion:reduce){
  .wh-glow{opacity:calc(var(--wh-bloom) * .6)}
}


/* ============================================================
   ABOUT HERO
   ngd:about-hero. Folded from ngd-about-hero 1.1.0's about-hero.css, 3,843 B.
   Pairs with template-parts/about-hero.php and assets/js/about-hero.js.

   LOCKED COMPOSITION, solved by silhouette fit 22 Aug 2026: canvas 1180x830,
   background scale(1.03), figure left:390px top:207px width:353.5px.
   Do not convert the pixel values to percentages. The photo-to-cutout
   registration depends on the fixed canvas and about-hero.js scales the whole
   stage with one transform.

   The page-level rules at the bottom hang off body.ngd-about, which the theme's
   own body_class filter adds. The plugin used body.ngd-about-hero-on; the gate
   is theme-owned now and named for the page rather than for a retiring plugin.
   ============================================================ */

.ngd-hero-pinwrap{position:relative}
.ngd-about-hero{position:sticky;top:0;width:100%;overflow:hidden;background:#0A0A0B}
.ngd-about-hero .stage{position:absolute;top:0;left:50%;width:1180px;height:830px;transform-origin:top center;overflow:hidden;perspective:900px}

.ngd-ah-bgwrap,.ngd-ah-wordwrap,.ngd-ah-figwrap,.ngd-ah-vignette,.ngd-ah-particles{position:absolute;inset:0}
.ngd-ah-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transform-origin:center;filter:brightness(.67) saturate(.95)}
.ngd-ah-wordwrap{display:grid;place-items:center;z-index:1}
.ngd-ah-word{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:250px;line-height:1;width:100%;box-sizing:border-box;padding:0 72px;display:flex;justify-content:space-between;align-items:baseline;will-change:transform;user-select:none;background:linear-gradient(128deg,#F4E3AC 0%,#D4AF37 30%,#9C7A22 54%,#F4E3AC 76%,#D4AF37 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.92;animation:ngdAhShimmer 9s linear infinite}
.ngd-ah-figwrap{z-index:2;pointer-events:none}
.ngd-ah-fig{position:absolute;left:390px;top:207px;width:353.5px;height:auto;max-width:none;filter:brightness(.67) saturate(.95)}
.ngd-ah-vignette{z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgba(10,10,11,0) 26%,rgba(10,10,11,.85) 80%)}
.ngd-ah-particles{z-index:4;pointer-events:none}
.ngd-ah-caption{position:absolute;left:0;right:0;bottom:44px;text-align:center;z-index:10}
.ngd-ah-eyebrow{font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#D4AF37;animation:ngdAhFadeUp 1s .3s both}
.ngd-ah-scroll{font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;color:#808089;margin-top:24px;animation:ngdAhFloaty 3s ease-in-out infinite}

@keyframes ngdAhShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes ngdAhDrift{0%{transform:translateY(0);opacity:0}12%{opacity:.9}88%{opacity:.6}100%{transform:translateY(-560px);opacity:0}}
@keyframes ngdAhFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ngdAhFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.ngd-about-hero *{animation:none!important}}

/* ===== About page adjustments, gated on the theme's own body class ===== */

/* The hero already says ABOUT at display size. Keep the h1 for structure
   and assistive tech, hide it visually so the word does not appear twice. */
body.ngd-about .page-h{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reflow the About prose so it uses the full width instead of a single
   68ch column with dead space on the right. Copy is untouched, layout only.
   The intro paragraph spans the full width, the rest flows in two columns. */
body.ngd-about .prose{max-width:none;margin-top:0;column-count:2;column-gap:clamp(40px,6vw,96px)}
body.ngd-about .prose>p:first-child{column-span:all;max-width:85ch;font-size:clamp(19px,2vw,24px);line-height:1.55;margin:0 0 var(--sp-4)}
body.ngd-about .prose>h2:nth-of-type(1){margin-top:0}

/* A heading owns its block.
   `column-count` breaks wherever the column fills, which on this page put a
   subheading on the last line of column one with its paragraph starting at the
   top of column two, and once split a paragraph across the gap mid sentence.
   `avoid-column` is the keyword multicol actually reads; the plain `avoid` that
   shipped in 1.1.0 is defined for pages and is honoured inconsistently between
   engines. Orphans and widows stop a lone first or last line being stranded.
   No grid rebuild, no markup change: five declarations. */
body.ngd-about .prose h2,
body.ngd-about .prose h3,
body.ngd-about .prose h4{
  break-after:avoid-column;break-inside:avoid-column;
  -webkit-column-break-after:avoid;-webkit-column-break-inside:avoid;
}
body.ngd-about .prose p,
body.ngd-about .prose li,
body.ngd-about .prose blockquote,
body.ngd-about .prose figure{
  break-inside:avoid-column;-webkit-column-break-inside:avoid;
}
body.ngd-about .prose{orphans:3;widows:3}

@media (max-width:900px){
  body.ngd-about .prose{column-count:1}
  body.ngd-about .prose>p:first-child{font-size:clamp(17px,4.5vw,20px)}
}


/* ============================================================
   SITE POLISH: THE BOARD RAIL AND THE CONTACT FORM
   ngd:rail-boards and ngd:contact-form. Folded from ngd-site-polish 1.0.0's
   site-polish.css, 3,576 B. Pairs with template-parts/rail-boards.php and
   inc/contact-form.php.

   .ngd-hp IS THE HONEYPOT AND IT MUST STAY HIDDEN. It is a real text input
   named "company" that no person is ever meant to see. A stylesheet change that
   exposes it does not break the form visibly: real visitors fill it in, the
   handler treats a filled honeypot as a bot and returns a FAKE SUCCESS, and
   every one of those messages is silently dropped while the page says it sent.
   ============================================================ */

/* ---------------------------------------------------------------------
   Board rail, front page
--------------------------------------------------------------------- */
.ngd-rail-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:clamp(14px,1.8vw,26px);
	margin-top:var(--sp-4);
}
.ngd-rail-card{
	display:block;
	color:var(--fg);
	text-decoration:none;
}
.ngd-rail-frame{
	display:block;
	overflow:hidden;
	border:1px solid var(--line-soft);
	border-radius:var(--r-sm);
	background:var(--bg-2);
	transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.ngd-rail-frame img{
	display:block;
	width:100%;
	height:auto;
	transition:transform .6s var(--ease);
}
.ngd-rail-card:hover .ngd-rail-frame,
.ngd-rail-card:focus-visible .ngd-rail-frame{
	border-color:var(--gold);
	transform:translateY(-3px);
}
.ngd-rail-card:hover .ngd-rail-frame img{
	transform:scale(1.03);
}
.ngd-rail-card:focus-visible{
	outline:2px solid var(--gold);
	outline-offset:4px;
	border-radius:var(--r-sm);
}
.ngd-rail-meta{
	display:flex;
	align-items:baseline;
	gap:10px;
	margin-top:12px;
}
.ngd-rail-num{
	font-size:11px;
	letter-spacing:.18em;
	color:var(--gold);
}
.ngd-rail-title{
	font-size:14.5px;
	color:var(--fg-dim);
	transition:color .3s var(--ease);
}
.ngd-rail-card:hover .ngd-rail-title{
	color:var(--fg);
}
.ngd-rail-cta{
	margin-top:var(--sp-4);
}
@media (max-width:900px){
	.ngd-rail-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
	.ngd-rail-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.ngd-rail-frame,.ngd-rail-frame img,.ngd-rail-card:hover .ngd-rail-frame{transition:none;transform:none}
}

/* ---------------------------------------------------------------------
   Contact form
--------------------------------------------------------------------- */
.ngd-form-wrap{
	margin-top:var(--sp-5);
	padding-top:var(--sp-5);
	border-top:1px solid var(--line-soft);
	max-width:720px;
}
.ngd-form-h{
	margin:10px 0 var(--sp-3);
}
.ngd-form-status{
	margin:0 0 var(--sp-3);
	font-size:14.5px;
}
.ngd-form-status.ok{color:var(--ok)}
.ngd-form-status.err{color:var(--err)}
/* THE HONEYPOT. Read the banner at the top of this section before changing it. */
.ngd-hp{
	position:absolute !important;
	left:-9999px !important;
	width:1px;height:1px;overflow:hidden;
}
.ngd-form-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--sp-2);
}
.ngd-field{
	margin:0 0 var(--sp-2);
}
.ngd-field label{
	display:block;
	font-size:10.5px;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--fg-faint);
	margin-bottom:8px;
}
.ngd-field input,
.ngd-field textarea{
	width:100%;
	background:rgba(18,18,20,.82);
	border:1px solid var(--line);
	border-radius:var(--r-sm);
	color:var(--fg);
	padding:13px 14px;
	font-size:15px;
	transition:border-color .3s var(--ease),box-shadow .3s;
}
.ngd-field textarea{
	resize:vertical;
	min-height:150px;
}
.ngd-field input::placeholder,
.ngd-field textarea::placeholder{
	color:var(--fg-faint);
}
.ngd-field input:focus-visible,
.ngd-field textarea:focus-visible{
	border-color:var(--gold);
	outline:none;
	box-shadow:0 0 0 3px rgba(212,175,55,.2);
}
.ngd-form-actions{
	display:flex;
	align-items:center;
	gap:var(--sp-2);
	flex-wrap:wrap;
	margin:var(--sp-2) 0 0;
}
.ngd-form-actions .btn{
	cursor:pointer;
	font-family:inherit;
}
.ngd-form-actions .btn:focus-visible{
	outline:2px solid var(--gold);
	outline-offset:3px;
}
.ngd-form-note{
	font-size:13px;
	color:var(--fg-faint);
}
@media (max-width:640px){
	.ngd-form-row{grid-template-columns:1fr}
}


/* ============================================================
   WORK GROUPS, THE FOUR FAMILIES
   ngd:work-groups. Folded from ngd-work-groups 1.0.0's cxg.css, 3,248 B.
   Scoped under .cxg so nothing here can reach the rest of the page. The visual
   language is lifted from the boards sections on purpose: same summary row,
   same chevron, same palette strip, so the Work page reads as one system.

   The card grid inside a group keeps the theme's own .lib-grid class, so the
   sixteen recordings render exactly as they did before the grouping existed.
   ============================================================ */

.cxg{margin:0}

.cxg-note{
  margin:0 0 clamp(22px,2.4vw,32px);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);
}

.cxg-list{display:flex;flex-direction:column;gap:14px}

.cxg-b{
  border:1px solid var(--line);border-radius:14px;background:#0b0b0c;overflow:hidden;
}
.cxg-b[open]{background:#0e0e10}

.cxg-b>summary{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:clamp(16px,1.8vw,24px) clamp(16px,2vw,28px);
  cursor:pointer;list-style:none;
  transition:background .35s var(--ease);
}
.cxg-b>summary::-webkit-details-marker{display:none}
.cxg-b>summary:hover{background:#131315}
.cxg-b>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.cxg-no{
  flex:none;font-size:11px;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.cxg-sum{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}

/* The family title is an h2 since 1.21.0, where it was a span.cxg-t. Four
   headings that summarise four sections of the page had no place being spans:
   /work/ went from three h2 elements to seven and the families finally appear
   in a heading outline.

   THE LOOK DOES NOT CHANGE, and that takes more than a font-size. As a span it
   inherited the body voice; as an h2 it would have picked up the theme's
   display rule at the top of this file, which is Archivo 800 at -.035em on a
   .94 line height, plus a browser margin. Every one of those is pinned back
   here. The declarations after font-size are the ones doing that work. */
.cxg-t{
  font-size:clamp(15px,1.4vw,21px);line-height:1.2;letter-spacing:-.015em;color:var(--fg);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-weight:400;
  margin:0;
  text-wrap:wrap;
}
.cxg-k{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.cxg-pal{display:flex;gap:3px;flex:none}
.cxg-pal i{width:16px;height:16px;border-radius:2px;display:block;
  box-shadow:inset 0 0 0 1px rgba(245,243,240,.12)}
.cxg-c{
  flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);font-variant-numeric:tabular-nums;
}
.cxg-x{
  flex:none;position:relative;width:14px;height:14px;
  transition:transform .35s var(--ease);
}
.cxg-x::before,.cxg-x::after{content:"";position:absolute;background:var(--fg-dim)}
.cxg-x::before{left:0;top:6.5px;width:14px;height:1px}
.cxg-x::after{left:6.5px;top:0;width:1px;height:14px}
.cxg-b[open] .cxg-x{transform:rotate(135deg)}
.cxg-b[open] .cxg-x::before,.cxg-b[open] .cxg-x::after{background:var(--gold)}

.cxg-body{
  padding:0 clamp(16px,2vw,28px) clamp(24px,2.6vw,36px);
  border-top:1px solid var(--line-soft);
}
.cxg-lead{
  margin:0;padding:clamp(20px,2.2vw,30px) 0;max-width:70ch;
  font-size:14.5px;line-height:1.6;color:var(--fg-dim);
}

/* The grid keeps the theme's two column rule. This only stops a group body from
   inheriting a stray top margin and keeps the last card clear of the border. */
.cxg-grid{margin:0}

@media(max-width:900px){
  .cxg-pal,.cxg-c{display:none}
}
@media(max-width:560px){
  .cxg-b>summary{gap:12px}
  .cxg-note{margin-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  .cxg-x,.cxg-b>summary{transition-duration:.01ms}
}


/* ============================================================
   DEVELOPMENT BOARDS
   ngd:work-boards. Folded from ngd-work-boards 1.0.1's boards.css, 5,399 B.
   Everything is scoped under .wbx so nothing can reach the rest of the page.
   ============================================================ */

.wbx{
  padding:clamp(80px,10vw,140px) var(--gut);
  border-top:1px solid var(--line-soft);
  background:var(--bg);
}

.wbx-head{max-width:74ch}
.wbx-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0;
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-faint);
}
.wbx-eyebrow span{width:26px;height:1px;background:var(--gold);flex:none}
.wbx h2#wbx-title{
  margin:20px 0 0;font-size:clamp(30px,5vw,62px);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.045em;color:var(--fg);
}
.wbx-intro{
  margin:20px 0 0;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.6;
  color:var(--fg-dim);max-width:62ch;
}
/* No connector rules between these. A pseudo element separator ends up looking
   like a leading bullet as soon as the row wraps on a phone. */
.wbx-facts{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
}

.wbx-list{margin-top:clamp(32px,4vw,54px);display:flex;flex-direction:column;gap:14px}

.wbx-b{
  border:1px solid var(--line);border-radius:14px;background:#0b0b0c;overflow:hidden;
}
.wbx-b[open]{background:#0e0e10}

.wbx-b>summary{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:clamp(16px,1.8vw,24px) clamp(16px,2vw,28px);
  cursor:pointer;list-style:none;
  transition:background .35s var(--ease);
}
.wbx-b>summary::-webkit-details-marker{display:none}
.wbx-b>summary:hover{background:#131315}
.wbx-b>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.wbx-no{
  flex:none;font-size:11px;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.wbx-sum{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.wbx-t{
  font-size:clamp(15px,1.4vw,21px);line-height:1.2;letter-spacing:-.015em;color:var(--fg);
}
.wbx-k{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
}
.wbx-pal{display:flex;gap:3px;flex:none}
.wbx-pal i{width:16px;height:16px;border-radius:2px;display:block;
  box-shadow:inset 0 0 0 1px rgba(245,243,240,.12)}
.wbx-c{
  flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);font-variant-numeric:tabular-nums;
}
.wbx-x{
  flex:none;position:relative;width:14px;height:14px;
  transition:transform .35s var(--ease);
}
.wbx-x::before,.wbx-x::after{
  content:"";position:absolute;background:var(--fg-dim);
}
.wbx-x::before{left:0;top:6.5px;width:14px;height:1px}
.wbx-x::after{left:6.5px;top:0;width:1px;height:14px}
.wbx-b[open] .wbx-x{transform:rotate(135deg)}
.wbx-b[open] .wbx-x::before,.wbx-b[open] .wbx-x::after{background:var(--gold)}

.wbx-body{
  padding:0 clamp(16px,2vw,28px) clamp(24px,2.6vw,36px);
  border-top:1px solid var(--line-soft);
}
.wbx-lead{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;padding:clamp(20px,2.2vw,30px) 0;
}
.wbx-note{margin:0;max-width:58ch;font-size:14.5px;line-height:1.6;color:var(--fg-dim)}
.wbx-words{display:flex;gap:18px;margin:0}
.wbx-words em{
  font-style:italic;font-size:15px;color:var(--fg);opacity:.75;
}
.wbx-dl{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.wbx-dl:hover{border-bottom-color:var(--gold)}

/* Multi column rather than grid, so a portrait shot does not open a hole in a
   row of landscape ones. Reading order runs down each column, which is what a
   contact sheet does anyway. */
.wbx-grid{
  column-count:4;column-gap:clamp(16px,1.6vw,26px);
}
.wbx-grid figure{
  margin:0 0 clamp(22px,2.2vw,34px);display:flex;flex-direction:column;gap:12px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
}
.wbx-fr{
  display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#16161a;line-height:0;
}
.wbx-fr img{width:100%;height:auto;display:block}
.wbx-grid figcaption{display:flex;flex-direction:column;gap:4px}
.wbx-lab{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
  display:flex;gap:9px;
}
.wbx-lab i{font-style:normal;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.wbx-grid figure.is-cut .wbx-lab{color:var(--gold)}
.wbx-cap{font-size:13px;line-height:1.5;color:var(--fg-dim)}

@media(max-width:1200px){
  .wbx-grid{column-count:3}
}
@media(max-width:900px){
  .wbx-grid{column-count:2}
  .wbx-pal,.wbx-c{display:none}
  .wbx-words{display:none}
}
@media(max-width:560px){
  .wbx-grid{column-count:1}
  .wbx-b>summary{gap:12px}
  .wbx-cap{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .wbx-x,.wbx-b>summary,.wbx-dl{transition-duration:.01ms}
}


/* ============================================================
   3D BOARDS
   ngd:3d-boards. Folded from ngd-3d-boards 1.1.0's t3d.css, 6,536 B.
   Everything is scoped under .t3d. The vocabulary is deliberately identical to
   .wbx above, which is where it was lifted from, so the two sections read as
   one system rather than as two plugins.
   ============================================================ */

.t3d{
  padding:clamp(80px,10vw,140px) var(--gut);
  border-top:1px solid var(--line-soft);
  background:var(--bg);
}

.t3d-head{max-width:74ch}
.t3d-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0;
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-faint);
}
.t3d-eyebrow span{width:26px;height:1px;background:var(--gold);flex:none}
.t3d h2#t3d-title{
  margin:20px 0 0;font-size:clamp(30px,5vw,62px);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.045em;color:var(--fg);
}
.t3d-intro{
  margin:20px 0 0;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.6;
  color:var(--fg-dim);max-width:62ch;
}
.t3d-facts{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
}

.t3d-list{margin-top:clamp(32px,4vw,54px);display:flex;flex-direction:column;gap:14px}

.t3d-b{
  border:1px solid var(--line);border-radius:14px;background:#0b0b0c;overflow:hidden;
}
.t3d-b[open]{background:#0e0e10}

.t3d-b>summary{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:clamp(16px,1.8vw,24px) clamp(16px,2vw,28px);
  cursor:pointer;list-style:none;
  transition:background .35s var(--ease);
}
.t3d-b>summary::-webkit-details-marker{display:none}
.t3d-b>summary:hover{background:#131315}
.t3d-b>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.t3d-no{
  flex:none;font-size:11px;letter-spacing:.14em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.t3d-sum{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.t3d-t{
  font-size:clamp(15px,1.4vw,21px);line-height:1.2;letter-spacing:-.015em;color:var(--fg);
}
.t3d-k{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
}
.t3d-pal{display:flex;gap:3px;flex:none}
.t3d-pal i{width:16px;height:16px;border-radius:2px;display:block;
  box-shadow:inset 0 0 0 1px rgba(245,243,240,.12)}
.t3d-c{
  flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);font-variant-numeric:tabular-nums;
}
.t3d-x{
  flex:none;position:relative;width:14px;height:14px;
  transition:transform .35s var(--ease);
}
.t3d-x::before,.t3d-x::after{
  content:"";position:absolute;background:var(--fg-dim);
}
.t3d-x::before{left:0;top:6.5px;width:14px;height:1px}
.t3d-x::after{left:6.5px;top:0;width:1px;height:14px}
.t3d-b[open] .t3d-x{transform:rotate(135deg)}
.t3d-b[open] .t3d-x::before,.t3d-b[open] .t3d-x::after{background:var(--gold)}

.t3d-body{
  padding:0 clamp(16px,2vw,28px) clamp(24px,2.6vw,36px);
  border-top:1px solid var(--line-soft);
}
.t3d-lead{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 32px;padding:clamp(20px,2.2vw,30px) 0;
}
.t3d-note{margin:0;max-width:58ch;font-size:14.5px;line-height:1.6;color:var(--fg-dim)}
.t3d-words{display:flex;gap:18px;margin:0}
.t3d-words em{
  font-style:italic;font-size:15px;color:var(--fg);opacity:.75;
}
.t3d-dl{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.t3d-dl:hover{border-bottom-color:var(--gold)}

.t3d-grid{
  column-count:5;column-gap:clamp(14px,1.4vw,22px);
}
.t3d-grid figure{
  margin:0 0 clamp(22px,2.2vw,34px);display:flex;flex-direction:column;gap:12px;
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
}
.t3d-fr{
  display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#16161a;line-height:0;
}
.t3d-fr img{width:100%;height:auto;display:block}
.t3d-grid figcaption{display:flex;flex-direction:column;gap:4px}
.t3d-lab{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
  display:flex;gap:9px;
}
.t3d-lab i{font-style:normal;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.t3d-grid figure.is-cut .t3d-lab{color:var(--gold)}
.t3d-cap{font-size:13px;line-height:1.5;color:var(--fg-dim)}

@media(max-width:1440px){
  .t3d-grid{column-count:4}
}
@media(max-width:1200px){
  .t3d-grid{column-count:3}
}
@media(max-width:900px){
  .t3d-grid{column-count:2}
  .t3d-pal,.t3d-c{display:none}
  .t3d-words{display:none}
}
@media(max-width:560px){
  .t3d-grid{column-count:1}
  .t3d-b>summary{gap:12px}
  .t3d-cap{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .t3d-x,.t3d-b>summary,.t3d-dl{transition-duration:.01ms}
}

/* Per project block inside a board. The boards themselves are grouped by
   discipline, so each one holds four or five projects and each project gets its
   own heading, its own description and its own row of frames. */
.t3d-p{
  padding:clamp(22px,2.4vw,34px) 0 0;
  border-top:1px solid var(--line-soft);
}
.t3d-p:first-of-type{border-top:0;padding-top:0}
.t3d-p-head{max-width:78ch;margin-bottom:clamp(18px,2vw,26px)}
.t3d-p-head h3{
  margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:clamp(13px,1.1vw,15px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);
}
.t3d-p-no{
  color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.1em;
}
.t3d-p-desc{
  margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--fg-dim);max-width:64ch;
}
.t3d-p-facts{
  margin:8px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);
}
.t3d-grid figure.is-ui .t3d-fr{background:#0f0f12}
.t3d-grid figure.is-ui .t3d-lab{color:var(--gold)}

/* ===========================================================================
   1.22.0, SEO release.

   Two things here. First, three heading-level companions: `archive-ngd_album`
   promoted its card titles from h3 to h2 and `template-services.php` promotes
   the service cards the same way, both to close a skipped level in the document
   outline. The type must not move a pixel, so each existing h3 rule gains an h2
   twin rather than being rewritten.

   Second, `single-ngd_service.php`, a template that did not exist before.
   =========================================================================== */

/* Heading-level twins. Byte-identical to the h3 rules above. */
.svc-card h2{font-size:26px;text-transform:uppercase;margin-bottom:8px}
.alb h2{font-size:24px;text-transform:uppercase;letter-spacing:-.03em}
.empty h2{font-size:26px;text-transform:uppercase;margin-bottom:10px}

/* Service card titles are links now, because the cards are the only internal
   route to the three new service pages. The link must read as type, not as a
   link, until it is hovered or focused. */
.svc-card h2 a,.svc-card h3 a{color:inherit;text-decoration:none;display:inline-block}
.svc-card h2 a:hover,.svc-card h3 a:hover,
.svc-card h2 a:focus-visible,.svc-card h3 a:focus-visible{color:var(--gold)}

/* --- single-ngd_service.php ------------------------------------------------ */

.svcp-lede{margin:0;color:var(--fg-dim);font-size:14.5px}
.svcp-badge{
  display:inline-block;margin-top:14px;padding:5px 10px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-gold);background:var(--gold-grad);border-radius:var(--r-sm);
}

.svcp-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--line-soft);flex-wrap:wrap;
}
.svcp-back{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);text-decoration:none;transition:color .35s var(--ease);
}
.svcp-back:hover,.svcp-back:focus-visible{color:var(--gold)}
.svcp-back .ico{width:14px;height:14px}

.svcp-detail{padding-top:0}
.svcp-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:start}

.svcp-inc h2,.svcp-more h2{
  font-size:clamp(22px,2.6vw,34px);text-transform:uppercase;
  letter-spacing:-.025em;margin:0 0 var(--sp-3);
}
.svcp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.svcp-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
  font-size:15.5px;color:var(--fg);
}
.svcp-list li .ico{width:15px;height:15px;margin-top:4px;color:var(--gold);flex:none}

.svcp-scope{
  background:var(--bg-2);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:clamp(24px,2.6vw,36px);
  position:sticky;top:calc(var(--nav-h) + 24px);
}
.svcp-price{margin:16px 0 0;font-size:19px;line-height:1.35;color:var(--fg)}
.svcp-unit{margin:8px 0 var(--sp-3);font-size:12.5px;color:var(--fg-faint)}

.svcp-more{padding-top:0}
.svcp-sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.svcp-sib{
  background:var(--bg);padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;gap:10px;
  text-decoration:none;transition:background .45s var(--ease);
}
.svcp-sib:hover,.svcp-sib:focus-visible{background:var(--bg-2)}
.svcp-sib-t{font-size:19px;text-transform:uppercase;letter-spacing:-.02em;color:var(--fg)}
.svcp-sib-d{font-size:13.5px;color:var(--fg-dim);line-height:1.55}
.svcp-sib-go{margin-top:auto;color:var(--gold)}
.svcp-sib-go .ico{width:16px;height:16px}

@media (max-width:900px){
  .svcp-cols{grid-template-columns:1fr;gap:var(--sp-4)}
  .svcp-scope{position:static}
}

/* 1.23.0, refined in 1.23.1, laid out properly in 1.24.0. The long-form body on
   a single service page.

   The history matters because the first two attempts were both wrong in the same
   way. 1.23.0 shipped a bare `.prose`, which inherits `max-width:68ch` and
   left-aligns: a ~420px reading column against the left gutter with two thirds of
   the viewport empty beside it. 1.23.1 centred it, which balanced the space but
   put the one block on the site that ignores the grid directly under a full-width
   bar with the h1 hard left.

   Neither problem was the measure. The problem was that nothing occupied the
   other half. 1.24.0 gives that half a job: the prose goes back to the grid's
   left edge at a 68ch measure, and a sticky contents rail sits beside it. A
   1,100-word sales page with seven sections needs the rail anyway, so this is not
   decoration filling a hole.

   Two columns of prose were considered and rejected at 1.23.1 and again here:
   seven h2 sections would make the reader travel down the page and back up.

   Under three headings the rail is not earned and the prose keeps the 1.23.1
   centred treatment, which is why the grid hangs off `.has-rail` rather than
   `.svcp-body-cols`. Below 1100px the rail becomes a jump list above the
   article, which is where a jump list is useful on a phone. The breakpoint is
   1180 rather than 1100 because at 1101 the rail track squeezes to 238px and the
   longer labels wrap to three lines. */
.svcp-body{padding-top:0}
.svcp-prose{margin-top:0;max-width:72ch;margin-left:auto;margin-right:auto}
.svcp-prose > :first-child{margin-top:0}
.svcp-prose h2{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.02em;scroll-margin-top:calc(var(--nav-h) + 28px)}
.svcp-prose h3{font-size:clamp(17px,1.7vw,21px);letter-spacing:-.01em;scroll-margin-top:calc(var(--nav-h) + 28px)}
body.admin-bar .svcp-prose h2,
body.admin-bar .svcp-prose h3{scroll-margin-top:calc(var(--nav-h) + 60px)}

.svcp-body-cols.has-rail{
  display:grid;grid-template-columns:minmax(0,68ch) minmax(210px,1fr);
  gap:clamp(40px,5vw,110px);align-items:start;
}
.svcp-body-cols.has-rail .svcp-prose{
  grid-column:1;grid-row:1;max-width:none;margin-left:0;margin-right:0;
}
/* Right EDGE, not centred in a 900px column. On a 1920 viewport the second grid
   track is far wider than a list of seven links needs, and a 320px rail floating
   in the middle of it is the 1.23.1 mistake again at a smaller scale. The theme
   parks secondary content against the right gutter everywhere else on this
   template, so the rail does the same and the slack falls into the gap. */
.svcp-toc{
  grid-column:2;grid-row:1;position:sticky;top:calc(var(--nav-h) + 34px);
  align-self:start;justify-self:end;width:100%;max-width:320px;
}
body.admin-bar .svcp-toc{top:calc(var(--nav-h) + 66px)}
.svcp-toc .eyebrow{margin-bottom:var(--sp-2)}
.svcp-toc-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:11px;counter-reset:svcptoc;
}
.svcp-toc-list li{counter-increment:svcptoc}
.svcp-toc-list a{
  display:flex;gap:12px;align-items:baseline;
  font-size:13px;line-height:1.45;letter-spacing:.01em;
  color:var(--fg-dim);border-bottom:0;transition:color .18s ease;
}
.svcp-toc-list a::before{
  content:counter(svcptoc,decimal-leading-zero);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:10.5px;
  color:var(--gold);opacity:.75;flex:none;
}
.svcp-toc-list a:hover,.svcp-toc-list a:focus-visible{color:var(--fg)}

@media (max-width:1180px){
  .svcp-body-cols.has-rail{grid-template-columns:1fr;gap:var(--sp-4)}
  .svcp-body-cols.has-rail .svcp-prose{grid-column:1;grid-row:2;max-width:72ch}
  .svcp-toc{
    grid-column:1;grid-row:1;position:static;
    justify-self:start;max-width:none;
    border-left:1px solid var(--line);
    padding-left:var(--sp-3);
  }
  .svcp-toc-list{gap:9px}
}
.svcp-prose ul,.svcp-prose ol{margin:var(--sp-2) 0;padding-left:22px}
.svcp-prose li{margin:6px 0}