/* ============================================================
   NAUTILUS — v5 inner-page system (Aug 5, 2026)
   v5 palette: white + dark blue (#123B61) + medium blue (#60B2E1).
   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:#123B61;
  --sand:#dce8f2;
  --sand-dim:#8aabc5;
  --brass:#60B2E1;
  --paper:#ffffff;
  --paper-2:#f0f5fa;
  --ink-dim:rgba(18,59,97,.55);
  --hairline:rgba(220,232,242,.16);
  --hairline-dark:rgba(18,59,97,.10);
  --wash-blue:#d0e4f0;
  --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)}
.nav-links{display:flex;gap:clamp(20px,2.6vw,40px);align-items:center;list-style:none}
.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:1080px){.nav-links li:not(.keep){display:none}}

/* ---------- 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(18,59,97,.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(18,59,97,.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(18,59,97,.30) 0%,rgba(18,59,97,.12) 38%,rgba(18,59,97,.04) 62%,rgba(96,178,225,.06) 100%),
    linear-gradient(to bottom,rgba(255,255,255,.22) 0%,rgba(18,59,97,0) 30%,rgba(18,59,97,.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}
@media(max-width:860px){
  .story-row{grid-template-columns:1fr}
  .story-row.flip .copy{order:1}
  .story-row.flip .media{order:2}
  .story-row .media{aspect-ratio:16/11}
}

/* ---------- 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(96,178,225,.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(18,59,97,.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:16/10;order:-1}
  .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(96,178,225,.12), transparent 68%),
    radial-gradient(60% 80% at 84% 78%, rgba(96,178,225,.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(18,59,97,.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{
  background:var(--ink);color:var(--sand);
  border-top:1px solid var(--hairline);
  padding:56px clamp(24px,5vw,64px) 40px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
footer .nav-logo{font-size:15px;color:var(--sand)}
footer p{font-size:12px;color:rgba(220,232,242,.4);letter-spacing:.06em}
footer ul{display:flex;gap:28px;list-style:none;flex-wrap:wrap}
footer ul a{color:var(--sand-dim);text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
footer ul a:hover{color:var(--brass)}

/* ---------- 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}
}