/* ============================================================
   NAUTILUS — v5 inner-page system (Aug 5, 2026)
   v5 palette: white + dark blue (#253D93) + medium blue (#5F81C1).
   Yellow/beige/sand/brass removed per Abby — brand sheet colors only.
   Same mechanisms as v4; only tokens + accent colors changed.
   Load order: this file → nautilus-v5.js (end of body) → page script.
   ============================================================ */

:root{
  --ink:#253D93;
  --sand:#C0CBE7;
  --sand-dim:#96A7D4;
  --brass:#5F81C1;
  --paper:#ffffff;
  --paper-2:#EFF2F9;
  --ink-dim:rgba(37,61,147,.55);
  --hairline:rgba(192,203,231,.16);
  --hairline-dark:rgba(37,61,147,.10);
  --wash-blue:#CDD6EC;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--brass);color:#fff}
.serif{font-family:'Fraunces',serif;font-weight:300}
img{max-width:100%}
a:not(.btn):not(.nav-logo):not(.nav-cta):not(.svc-row):not(.psgc-lockup),
a:not(.btn):not(.nav-logo):not(.nav-cta):not(.svc-row):not(.psgc-lockup) strong{color:var(--brass);text-underline-offset:3px}
a:not(.btn):not(.nav-logo):not(.nav-cta):not(.svc-row):not(.psgc-lockup):visited,
a:not(.btn):not(.nav-logo):not(.nav-cta):not(.svc-row):not(.psgc-lockup):visited strong{color:var(--brass)}
a:not(.btn):not(.nav-logo):not(.nav-cta):not(.svc-row):not(.psgc-lockup):hover,
a:not(.btn):not(.nav-logo):not(.nav-cta):not(.svc-row):not(.psgc-lockup):hover strong{color:var(--ink)}

/* ---------- nav (verbatim from index-v4; no loader on inner pages) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px clamp(24px,5vw,64px);
  transition:background .5s,backdrop-filter .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:16px clamp(24px,5vw,64px);
  border-bottom-color:var(--hairline-dark);
}
/* blue ombre header band — inner pages only */
body.blue-header nav::after{
  content:'';position:absolute;left:0;right:0;top:0;
  height:300px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(70,110,155,.16) 0%,rgba(70,110,155,.07) 55%,transparent 100%);
}
body.blue-header nav.scrolled::after{opacity:0;transition:opacity .5s}
.nav-logo{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:19px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;line-height:1.2;
}
.nav-logo em{font-style:normal;color:var(--brass)}
.nav-logo .sub{display:block;font-family:'Archivo',sans-serif;font-size:8px;letter-spacing:.46em;color:var(--ink-dim)}
/* Nov 11 (client): single-file lockup replaces the icon + typed text in the header, and the
   typed lockup in the footer. nautilusweblogo-white.svg is DERIVED from the supplied file —
   its four fills set to #fff — because the footer band is navy and the supplied artwork is
   dark ink only. Swap in an official reversed master if one arrives. The old nhm-mark.svg
   was also showing its construction guide lines, which is what the client reported. */
.nav-logo .brandlogo{display:block;width:auto;height:34px;transition:height .4s}
nav.scrolled .nav-logo .brandlogo{height:30px}
.foot-logo-link .foot-brandlogo{height:40px;margin-bottom:4px}
@media(max-width:860px){ .nav-logo .brandlogo{height:29px} nav.scrolled .nav-logo .brandlogo{height:27px} }
.nav-links{display:flex;gap:clamp(16px,2.2vw,38px);align-items:center;list-style:none;white-space:nowrap}
.nav-links a{
  color:var(--ink-dim);text-decoration:none;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:color .3s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--brass);transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{
  border:1px solid var(--hairline-dark);padding:11px 24px;border-radius:100px;
  color:var(--ink)!important;transition:background .4s,border-color .4s,color .4s!important;
}
.nav-cta:hover{background:var(--brass);border-color:var(--brass);color:#fff!important}
.nav-cta::after{display:none}
@media(max-width:1340px){.nav-links li:not(.keep){display:none}}

/* ---------- nav logo mark + About Us dropdown (Sep 15, 2026 feedback round) ---------- */
nav .nav-logo{display:inline-flex;align-items:center;gap:12px}
nav .nav-logo .mark{width:40px;height:auto;display:block;flex:none}
nav .nav-logo .lockup{display:block}
.nav-drop{position:relative}
.nav-drop>a .caret{margin-left:7px;vertical-align:1px;transition:transform .3s var(--ease)}
.nav-drop:hover>a .caret,.nav-drop:focus-within>a .caret{transform:rotate(180deg)}
.nav-drop .drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,12px);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hairline-dark);border-radius:10px;
  padding:8px 0;min-width:170px;
  box-shadow:0 18px 44px rgba(37,61,147,.14);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav-drop .drop::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,6px)}
.nav-drop .drop a{display:block;padding:10px 20px;white-space:nowrap}
.nav-drop .drop a::after{display:none}
.nav-drop .drop a:hover{background:var(--paper-2)}

/* ---------- grain (v4 language) ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;z-index:90;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}20%{transform:translate(2%,3%)}
  30%{transform:translate(-2%,1%)}40%{transform:translate(3%,-1%)}50%{transform:translate(-1%,2%)}
  60%{transform:translate(2%,-3%)}70%{transform:translate(-3%,3%)}80%{transform:translate(1%,-2%)}90%{transform:translate(-2%,-3%)}
}

/* ---------- shared section chrome (verbatim) ---------- */
section{position:relative;padding:clamp(90px,14vh,160px) clamp(24px,5vw,64px)}
.label{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
}
.label::before{content:'';width:36px;height:1px;background:var(--brass)}
.wrap{max-width:1280px;margin:0 auto}
h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.015em;
}
h2 em{font-style:italic;color:var(--brass)}

/* ---------- buttons (verbatim) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:#fff;background:var(--brass);text-decoration:none;
  padding:16px 30px;border-radius:100px;
  transition:background .4s,color .4s,border-color .4s,transform .4s var(--ease);
}
.btn:hover{background:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:0 4px 20px rgba(37,61,147,.12)}
.btn svg{transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-dark)}
.btn.ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass)}
.band-ink .btn{background:#fff;color:var(--ink)}
.band-ink .btn:hover{background:var(--brass);color:#fff}
.band-ink .btn.ghost{background:transparent;color:var(--sand);border-color:var(--hairline)}
.band-ink .btn.ghost:hover{border-color:var(--brass);color:var(--brass)}
/* v5: CTA band buttons */
.cta .btn{background:var(--brass);color:#fff}
.cta .btn:hover{background:#fff;color:var(--ink);box-shadow:0 4px 20px rgba(37,61,147,.12)}
.cta .btn.ghost{background:transparent;color:var(--ink);border-color:var(--hairline-dark)}
.cta .btn.ghost:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- reveal engine (v4 .rv IO) ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ---------- wipe develop (PSGC mechanism, Safari-safe: observe the
   wrapper .rv.wipe-box, clip the inner .wipe) ---------- */
.rv.wipe-box{opacity:1;transform:none}
.wipe-box{overflow:hidden}
.wipe-box .wipe{height:100%;clip-path:inset(0 100% 0 0);transform:scale(1.12);transition:clip-path 1.15s var(--ease),transform 1.45s var(--ease)}
.wipe-box.wipe-r .wipe{clip-path:inset(0 0 0 100%)}
.wipe-box.in .wipe{clip-path:inset(0 0 0 0);transform:none}
.wipe-box.rv-d1 .wipe{transition-delay:.08s}.wipe-box.rv-d2 .wipe{transition-delay:.16s}

/* ---------- page hero: paper band (kicker → line-reveal h1 → lede) ---------- */
.page-hero{
  padding:clamp(140px,22vh,200px) clamp(24px,5vw,64px) clamp(48px,7vh,72px);
}
.ph-kicker{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);
  margin-bottom:26px;display:flex;align-items:center;gap:16px;
  opacity:0;animation:phFade 1s .05s var(--ease) forwards;
}
.ph-kicker::before{content:'';width:48px;height:1px;background:var(--brass);display:inline-block}
.page-hero h1{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(52px,8vw,112px);
  line-height:1.02;letter-spacing:-0.015em;color:var(--ink);max-width:14em;
}
.page-hero h1 .line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
.page-hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:phLine 1.3s var(--ease) forwards}
.page-hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.page-hero h1 em{font-style:italic;color:var(--brass);font-weight:300;padding-right:.08em}
.lede{
  color:var(--ink-dim);font-size:clamp(15.5px,1.6vw,18px);line-height:1.65;
  max-width:34em;margin-top:24px;
  opacity:0;animation:phFade 1s .45s var(--ease) forwards;
}
.lede+.lede{margin-top:14px;animation-delay:.6s}
.lede strong{color:var(--ink);font-weight:600}
@keyframes phLine{to{transform:translateY(0)}}
@keyframes phFade{to{opacity:1}}

/* ---------- hero split (Jul 27): serif statement left, photo right ----------
   Replaces the full-bleed .hero-photo band on approach-v4 only; parallax JS
   (#heroMedia + parentElement) works unchanged inside .hs-media. */
.hero-split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,6vw,96px);align-items:center;
  max-width:1280px;margin:0 auto;
  padding:clamp(8px,2vh,24px) clamp(24px,5vw,64px) clamp(72px,10vh,120px);
}
.hero-split .hs-copy::before{
  content:'';display:block;width:48px;height:1px;background:var(--brass);margin-bottom:28px;
}
.hero-split .hs-copy p{
  font-size:clamp(21px,2.2vw,28px);line-height:1.5;
  color:var(--ink-dim);letter-spacing:-0.005em;max-width:20em;
}
.hero-split .hs-copy p strong{color:var(--ink);font-weight:600}
.hero-split .hs-media{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/10}
.hero-split .hs-media .media{position:absolute;inset:-10% 0;will-change:transform}
.hero-split .hs-media .media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){
  .hero-split{grid-template-columns:1fr;gap:36px}
  .hero-split .hs-media{aspect-ratio:4/3}
}

/* full-bleed photo band under the paper band — PSGC hero-deck treatment
   (scrim recolored ink/brass, media parallax via js translate3d) */
.hero-photo{
  position:relative;height:clamp(380px,56vh,600px);overflow:hidden;
}
.hero-photo.short{height:clamp(340px,46vh,480px)}
.hero-photo .media{position:absolute;inset:-8% 0;will-change:transform}
.hero-photo .media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(37,61,147,.30) 0%,rgba(37,61,147,.12) 38%,rgba(37,61,147,.04) 62%,rgba(95,129,193,.06) 100%),
    linear-gradient(to bottom,rgba(255,255,255,.22) 0%,rgba(37,61,147,0) 30%,rgba(37,61,147,.16) 100%);
}

/* ---------- story rows (PSGC about.html mechanism, v4 dress) ---------- */
.story-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,7vw,110px);
  align-items:center;max-width:1280px;margin:0 auto;
}
.story-row+.story-row{margin-top:clamp(90px,12vw,150px)}
.story-row.flip .copy{order:2}
.story-row.flip .media{order:1}
.ghost-num{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(64px,8vw,120px);line-height:1;
  color:var(--brass);opacity:.28;margin-bottom:10px;
}
.story-row h2{font-size:clamp(28px,3.4vw,46px)}
.story-row .copy p{color:var(--ink-dim);font-size:16px;margin-top:20px;max-width:34em}
.story-row .copy p strong{color:var(--ink);font-weight:600}
.story-row .media{aspect-ratio:4/5;overflow:hidden;border-radius:6px}
.story-row .media .wipe img{width:100%;height:100%;object-fit:cover;display:block}

/* closing statement row (Oct 12): a story row with no step number — set apart by a
   hairline and scaled up one notch so it reads as the page's closing trust strip. */
.story-row.closing-row{
  border-top:1px solid var(--hairline-dark);
  padding-top:clamp(52px,6.5vw,88px);
}
.story-row.closing-row h2{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.015em}
.story-row.closing-row .copy p{font-size:17px;margin-top:22px;max-width:36em}
.story-row.closing-row .copy p:first-of-type{
  font-size:clamp(19px,2vw,24px);line-height:1.45;margin-top:24px;
}
@media(max-width:860px){
  .story-row{grid-template-columns:1fr}
  .story-row.flip .copy{order:1}
  .story-row.flip .media{order:2}
  /* Nov 9 (client, mobile): "heads are being cut off in images". These boxes flip to a WIDE
     ratio on phones while the photographs behind them are portrait (0.67-0.80) or square.
     With object-fit:cover that threw away 30-45% of every picture, top and bottom. Squared
     up so the crop tracks the source instead of fighting it. */
  .story-row .media{aspect-ratio:1/1}
}

/* ---------- tan band (Jul 27): light variant of band-ink, matches tan CTA ---------- */
.band-tan{
  background:var(--paper-2);
  border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark);
}

/* ---------- dark ink band (PSGC dark story band pattern, v4 palette) ---------- */
.band-ink{
  background:
    radial-gradient(70% 90% at 50% 120%,rgba(95,129,193,.15),transparent 70%),
    var(--ink);
  color:var(--sand);
}
.band-ink .label{color:var(--brass)}
.band-ink .label::before{background:var(--brass)}
.band-ink h2{color:var(--sand)}
.band-ink h2 em{color:var(--brass)}
.band-ink .copy p,.band-ink p{color:var(--sand-dim)}
.band-ink .copy p strong{color:var(--sand);font-weight:600}
.band-ink .statement{color:var(--sand);font-weight:500}

/* ---------- stacking cards (PSGC .scard sticky stack, v4 dress:
   paper cards, hairline-dark borders, brass ghost numerals) ---------- */
.stack-zone{background:var(--paper-2);border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark)}
.stack{padding-top:clamp(10px,2vw,24px)}
.scard{
  position:sticky;top:96px;margin:0 auto clamp(56px,8vh,96px);max-width:1200px;
  background:var(--paper);border:1px solid var(--hairline-dark);
  box-shadow:0 24px 70px rgba(37,61,147,.08);
  display:grid;grid-template-columns:1fr 1fr;min-height:min(560px,74vh);
  overflow:hidden;border-radius:6px;
  will-change:transform;transform-origin:top center;backface-visibility:hidden;
}
.scard::after{content:'';position:absolute;inset:0;background:var(--ink);opacity:var(--dim,0);pointer-events:none;z-index:3}
.scard:last-child{margin-bottom:0}
.scard .txt{padding:clamp(34px,4.5vw,70px);display:flex;flex-direction:column;justify-content:center}
.scard .rnum{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(52px,6vw,84px);color:var(--brass);opacity:.28;line-height:1;
}
.scard h2{font-size:clamp(26px,2.8vw,38px);margin-top:12px}
.scard .tagline{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:clamp(17px,1.8vw,21px);color:var(--brass);margin-top:10px;
}
.scard .txt p{font-size:15.5px;color:var(--ink-dim);margin-top:16px;max-width:30em}
.scard .txt ul{
  list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;
  gap:8px 24px;max-width:30em;
}
.scard .txt li{
  font-size:13px;letter-spacing:.08em;color:var(--ink-dim);
  padding-left:18px;position:relative;
}
.scard .txt li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--brass)}
.scard .pic{position:relative;min-height:320px}
.scard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .scard{position:static;grid-template-columns:1fr;min-height:0;transform:none!important}
  .scard::after{display:none}
  .scard .pic{min-height:0;aspect-ratio:1/1;order:-1}   /* was 16/10 — square sources were losing 38% (client, Nov 9) */
  .scard .pic img{position:static}
}

/* ---------- quote bands (verbatim v4 + watercolor wash) ---------- */
.quote>*{max-width:980px;margin-left:auto;margin-right:auto;text-align:center}
.quote blockquote{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(24px,3.1vw,40px);line-height:1.3;letter-spacing:-.01em;
}
.quote blockquote::before{content:'\201C';color:var(--brass)}
.quote blockquote::after{content:'\201D';color:var(--brass)}
.quote blockquote em{color:var(--brass)}
.quote cite{
  display:block;margin-top:34px;font-style:normal;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);
}
.quote cite b{color:var(--brass);font-weight:500}
.wash{
  background:
    radial-gradient(70% 95% at 16% 22%, rgba(95,129,193,.12), transparent 68%),
    radial-gradient(60% 80% at 84% 78%, rgba(95,129,193,.10), transparent 72%),
    radial-gradient(45% 60% at 55% 45%, rgba(240,246,252,.5), transparent 75%),
    linear-gradient(180deg, #f6fafd 0%, #eaf2f8 100%);
}

/* ---------- manifesto word ink-in (v4 cross-page signature; about NOT/NOT/IS) ---------- */
.manifesto p,.ink-lines .line{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(26px,3.6vw,48px);line-height:1.28;letter-spacing:-.01em;
  max-width:1080px;
}
.ink-lines .line{font-size:clamp(28px,3.6vw,46px);line-height:1.3;max-width:26em}
.ink-lines .line+.line{margin-top:20px}
.ink-lines{padding-block:clamp(64px,9vh,110px)}
/* Jul 27: unlit floor raised .18→.40 — readable on arrival, ink-in becomes a darkening */
.manifesto .w,.ink-lines .w{color:rgba(37,61,147,.3);transition:color .6s ease}
.manifesto .w.lit,.ink-lines .w.lit{color:var(--ink)}
.manifesto .w.accent.lit,.ink-lines .w.accent.lit{color:var(--brass);font-style:italic}

/* ---------- CTA (v5: light blue-white) ---------- */
.cta{
  text-align:center;color:var(--ink);
  background:#fff;
  border-top:1px solid var(--hairline-dark);
}
.cta .label{color:var(--brass)}
.cta .label::before{background:var(--brass)}
.cta h2{color:var(--ink);max-width:820px;margin:0 auto 22px}
.cta h2 em{color:var(--brass)}
.cta p{color:var(--ink-dim);max-width:520px;margin:0 auto 14px}
.cta p.quiet{color:var(--ink);margin-bottom:44px}
.cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cta .cta-label{justify-content:center}

/* ---------- footer (verbatim) ---------- */
/* ---------- footer — PSGC-aligned 4-column grid (Sep 15, 2026 feedback round) ---------- */
footer{
  background:var(--ink);color:var(--sand);
  border-top:1px solid var(--hairline);
  padding:clamp(56px,8vh,88px) clamp(24px,5vw,64px) 36px;
}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1.6fr 1.1fr;
  gap:clamp(28px,4vw,64px);max-width:1280px;margin:0 auto;
}
footer .nav-logo{font-size:15px;color:var(--sand)}
.foot-brand .mark{width:92px;height:auto;display:block;margin-bottom:20px;filter:brightness(0) invert(.92);opacity:.8}
.foot-brand .foot-line{font-size:13px;color:var(--sand-dim);margin-top:14px;letter-spacing:.04em;max-width:24em;line-height:1.7}
.foot-col h4{
  font-family:'Archivo',sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(192,203,231,.45);
  margin-bottom:18px;
}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px;font-size:12px;letter-spacing:.1em;color:var(--sand-dim);line-height:1.7}
.foot-col ul a{color:var(--sand-dim);text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.foot-col ul a:hover{color:var(--brass)}
.foot-col .addr{text-transform:none;letter-spacing:.04em}
/* Explore runs in two columns (Oct 12) now that the Clients column is gone.
   column-fill:balance keeps the two halves even as links are added or removed. */
.foot-explore ul{columns:2;column-gap:clamp(24px,3vw,48px);column-fill:balance}
.foot-explore li{break-inside:avoid}
/* the one outbound link — arrow mirrors PSGC's footer link to Nautilus */
.foot-col ul a.foot-psgc .nw{white-space:nowrap}
.foot-col ul a.foot-psgc span[aria-hidden]{font-size:1.05em;line-height:1;margin-left:.3em}
.foot-col ul a.foot-email{text-transform:none;letter-spacing:.04em}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.foot-social{display:flex;align-items:center;gap:16px}
.foot-social a{display:inline-flex;opacity:.75;transition:opacity .3s var(--ease)}
.foot-social a:hover{opacity:1}
.foot-social svg{width:18px;height:18px;display:block}
.foot-bottom{
  max-width:1280px;margin:clamp(36px,5vh,56px) auto 0;padding-top:26px;
  border-top:1px solid var(--hairline);
}
.foot-bottom p{font-size:12px;color:rgba(192,203,231,.4);letter-spacing:.06em}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-explore ul{columns:1}}

/* ---------- static mode (?static — headless screenshots) ----------
   T6 lesson: wipes + line reveals get explicit static selectors. */
html.static .grain{animation:none}
html.static .rv{opacity:1!important;transform:none!important;transition:none}
html.static .page-hero h1 .line>span{animation:none;transform:none}
html.static .ph-kicker,html.static .lede{animation:none;opacity:1}
html.static .wipe-box .wipe{clip-path:inset(0 0 0 0)!important;transform:none!important;transition:none}
html.static .scard{position:static;transform:none!important}
html.static .scard::after{display:none}
html.static .manifesto .w,html.static .ink-lines .w{color:var(--ink)}
html.static .manifesto .w.accent,html.static .ink-lines .w.accent{color:var(--brass)}
html.static .hero-photo .media{transform:none!important}

/* ---------- prefers-reduced-motion kill-switch ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.ph-kicker,.lede{opacity:1!important;transform:none!important}
  .page-hero h1 .line>span{animation:none;transform:none}
  .wipe-box .wipe{clip-path:inset(0 0 0 0)!important;transform:none!important}
  .scard{position:static;transform:none!important}
  .scard::after{display:none}
  .manifesto .w,.ink-lines .w{color:var(--ink)}
  .grain{animation:none}
}

/* ---------- mobile menu (Sep 29, 2026): burger ≤1340px, full-screen paper overlay;
   markup injected by nautilus-v5.js (index.html carries its own inline copy) ---------- */
.nav-burger-li{display:none}
@media(max-width:1340px){.nav-links li.nav-burger-li{display:block}}
.nav-burger{display:block;background:none;border:0;padding:8px 2px;cursor:pointer}
.nav-burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .3s,background .3s}
body.menu-open .nav-burger span{background:var(--ink)}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:96px clamp(24px,8vw,64px) 48px;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu a,.mobile-menu a:visited{
  font-family:'Fraunces',serif;font-weight:300;color:var(--ink)!important;
  font-size:clamp(27px,6vw,36px);line-height:1.5;text-decoration:none;
}
.mobile-menu a.active{color:var(--brass)!important;font-style:italic}
.mobile-menu .mm-cta,.mobile-menu .mm-cta:visited{
  margin-top:24px;font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--brass)!important;
  border:1px solid var(--brass);border-radius:999px;padding:14px 26px;line-height:1;
}
/* small screens: CTA pill leaves the bar (it lives in the overlay menu) so logo + burger fit */
@media(max-width:640px){.nav-links li.keep:not(.nav-burger-li){display:none}}

/* ---------- lightbox (client, Nov 9: "images aren't opening to full size") -------------------
   Nautilus had no lightbox at all — tapping a photograph did nothing, on any page. This mirrors
   the component the PSGC project pages already use: tap to open the full frame, tap/Esc to close,
   arrows or swipe to move through the photographs on that page. Markup is injected by
   nautilus-v5.js so no page template had to change. */
.nlb{position:fixed;inset:0;z-index:300;background:rgba(13,18,24,.94);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .32s}
.nlb.open{opacity:1;pointer-events:auto}
.nlb img{max-width:min(92vw,1400px);max-height:84vh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.nlb-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .25s}
.nlb-btn:hover{background:rgba(255,255,255,.26)}
.nlb-prev{left:max(12px,2vw)}.nlb-next{right:max(12px,2vw)}
.nlb-x{position:absolute;top:max(12px,2vh);right:max(12px,2vw);width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.nlb-count{position:absolute;bottom:max(14px,2.5vh);left:0;right:0;text-align:center;color:rgba(255,255,255,.75);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.nlb-zoom{cursor:zoom-in}
body.nlb-open{overflow:hidden}
@media(max-width:860px){ .nlb-btn{width:40px;height:40px} .nlb img{max-width:94vw;max-height:78vh} }
@media(prefers-reduced-motion:reduce){ .nlb{transition:none} }