/* ==========================================================================
   Science Inquiry Based Agenda
   Palette sampled from the brand logo and the approved site design.
   ========================================================================== */

:root{
  --cream:        #F5F1E8;
  --cream-light:  #FAF8F1;
  --surface:      #FBFAF5;
  --white:        #FFFFFF;

  --ink:          #24505A;   /* deep teal - headings, body */
  --ink-deep:     #1C3F48;
  --band:         #2A525C;   /* dark teal band */
  --teal:         #3F6D71;
  --sage:         #7E9A8E;
  --sage-soft:    #9DB3A4;

  --gold:         #DBB76A;
  --gold-deep:    #C79F4F;
  --gold-soft:    #EBD5A4;

  --muted:        #6D7F82;
  --line:         rgba(36,80,90,.14);
  --line-soft:    rgba(36,80,90,.08);

  --shadow-sm:    0 1px 2px rgba(28,63,72,.06), 0 2px 8px rgba(28,63,72,.05);
  --shadow-md:    0 4px 14px rgba(28,63,72,.09), 0 1px 3px rgba(28,63,72,.06);
  --shadow-lg:    0 18px 48px rgba(28,63,72,.18);

  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius:       10px;
  --radius-lg:    16px;
  --wrap:         1120px;
}

/* --------------------------------------------------------------- base --- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--teal); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.2;
  margin:0 0 .6em;
  font-weight:500;
}

p{ margin:0 0 1.1em; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.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;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--band); color:var(--cream);
  padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

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

/* honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------------------------ buttons --- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display);
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:14px 28px; border-radius:7px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-gold{ background:var(--gold); color:#23434C; box-shadow:var(--shadow-sm); }
.btn-gold:hover{ background:var(--gold-deep); }

.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream-light); }

.btn-teal{ background:var(--band); color:var(--cream-light); }
.btn-teal:hover{ background:var(--ink-deep); }

.btn-ghost{ background:var(--white); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:var(--sage); }

.btn-sm{ padding:10px 18px; font-size:.7rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ------------------------------------------------------------- header --- */

.site-header{ position:sticky; top:0; z-index:60; padding:18px 0 0; background:linear-gradient(180deg,var(--cream) 62%,rgba(245,241,232,0)); }

.nav-shell{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.nav{
  display:flex; align-items:center; gap:20px;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:12px;
  box-shadow:var(--shadow-md);
  padding:10px 14px 10px 18px;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.brand-mark{ width:46px; height:auto; }
.brand-text{ display:flex; flex-direction:column; font-family:var(--font-display); line-height:1.15; }
.brand-line-1{ font-size:.74rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase; color:var(--ink); }
.brand-line-2{ font-size:.62rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--sage); }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }

.nav-link{
  position:relative;
  font-family:var(--font-display);
  font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding:10px 13px 12px;
  border-radius:6px;
}
.nav-link::after{
  content:''; position:absolute; left:13px; right:13px; bottom:5px; height:3px;
  border-radius:2px; background:var(--sage); opacity:0;
  transition:opacity .15s ease;
}
.nav-link:hover::after{ opacity:.55; }
.nav-link.is-active{ color:var(--ink-deep); }
.nav-link.is-active::after{ background:var(--gold); opacity:1; }

.nav-cta{ margin-left:10px; }

.nav-toggle{
  display:none; margin-left:auto;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; cursor:pointer;
}
.nav-toggle-bars{ display:block; width:18px; }
.nav-toggle-bars span{ display:block; height:2px; background:var(--ink); border-radius:2px; }
.nav-toggle-bars span+span{ margin-top:4px; }

/* --------------------------------------------------------------- hero --- */

.hero{
  position:relative; overflow:hidden;
  padding:72px 0 86px;
  background:
    radial-gradient(760px 460px at 74% 46%, rgba(126,154,142,.30), transparent 64%),
    radial-gradient(620px 420px at 26% 34%, rgba(219,183,106,.22), transparent 62%),
    linear-gradient(180deg,var(--cream-light),var(--cream));
}

.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px;
}

.hero h1{
  font-weight:300;
  font-size:clamp(2.2rem,4.6vw,3.5rem);
  letter-spacing:-.015em;
  margin-bottom:.35em;
}
.hero h1 strong{ font-weight:600; }

.hero-sub{
  font-size:clamp(1rem,1.5vw,1.14rem);
  color:var(--muted);
  max-width:34ch;
  margin-bottom:2em;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero-art{ justify-self:center; }
.hero-art img{ width:min(100%,340px); filter:drop-shadow(0 12px 30px rgba(42,82,92,.14)); }

/* ----------------------------------------------------------- sections --- */

.section{ padding:72px 0; }
.section-cream{ background:var(--cream); }
.section-surface{ background:var(--surface); }

.section-head{ text-align:center; max-width:60ch; margin:0 auto 42px; }
.section-head h2{
  font-size:clamp(1.6rem,3vw,2.25rem);
  font-weight:500;
}
.section-head p{ color:var(--muted); margin-bottom:0; }

.eyebrow{
  font-family:var(--font-display);
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage); margin-bottom:.9em;
}

/* -------------------------------------------------------- module grid --- */

.modules{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

.module{
  position:relative;
  display:block; text-decoration:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px 70px;
  min-height:150px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--sage-soft); }

.module-title{
  font-family:var(--font-display);
  font-size:1.18rem; line-height:1.25; font-weight:600;
  color:var(--ink); margin:0;
}
.module-title span{ display:block; font-weight:500; color:var(--sage); }

.module-icon{ position:absolute; right:18px; bottom:16px; width:54px; height:54px; color:var(--teal); }
.module-count{
  position:absolute; left:20px; bottom:22px;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--font-display); font-weight:500; color:var(--muted);
}

/* ------------------------------------------------------------- phases --- */

.phases{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:phase; }
.phase{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 20px; box-shadow:var(--shadow-sm);
}
.phase-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--gold-soft); color:var(--ink-deep);
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  margin-bottom:14px;
}
.phase h3{ font-size:1.02rem; margin-bottom:.45em; }
.phase p{ font-size:.92rem; color:var(--muted); margin:0; }

/* --------------------------------------------------------- doc library --- */

.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:38px; }
.filter{
  font-family:var(--font-display);
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filter:hover{ border-color:var(--sage); }
.filter.is-active{ background:var(--band); border-color:var(--band); color:var(--cream-light); }

.doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.doc-card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.doc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.doc-thumb{
  position:relative;
  aspect-ratio:17/22;
  background:linear-gradient(170deg,#EEF1EC,#E3E9E4);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.doc-thumb canvas{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.doc-thumb.is-landscape{ padding:10px; }
.doc-thumb.is-landscape canvas{ object-fit:contain; object-position:center; }
.doc-thumb-fallback{ color:var(--sage); width:48px; height:48px; }
.doc-thumb.is-loading::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }

.doc-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-display);
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(42,82,92,.92); color:var(--cream-light);
  padding:5px 10px; border-radius:4px;
}
.doc-tag.is-key{ background:rgba(199,159,79,.95); color:#2A3F46; }

.doc-body{ padding:20px 20px 0; flex:1; }
.doc-body h3{ font-size:1.08rem; margin-bottom:.25em; }
.doc-kicker{
  font-family:var(--font-display);
  font-size:.68rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sage); margin-bottom:.6em;
}
.doc-body p{ font-size:.9rem; color:var(--muted); }

.doc-meta{
  display:flex; gap:14px; align-items:center;
  font-size:.76rem; color:var(--muted);
  padding:0 20px; margin-bottom:14px;
}
.doc-meta span{ display:inline-flex; align-items:center; gap:5px; }

.doc-actions{ display:flex; gap:10px; padding:0 20px 20px; }
.doc-actions .btn{ flex:1; padding:11px 10px; font-size:.68rem; }

/* ------------------------------------------------------------- viewer --- */

.viewer-page{ background:var(--cream); }

.viewer-head{ padding:26px 0 18px; }
.breadcrumb{
  font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--teal); text-decoration:underline; }

.viewer-layout{ display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; padding-bottom:70px; }

.viewer{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}

.viewer-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.tool{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:36px; height:36px; padding:0 10px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:7px;
  font-family:var(--font-display); font-size:.78rem; font-weight:500;
  cursor:pointer;
}
.tool:hover:not([disabled]){ border-color:var(--sage); background:#fff; }
.tool[disabled]{ opacity:.4; cursor:not-allowed; }
.tool svg{ width:17px; height:17px; }

.page-indicator{
  font-family:var(--font-display); font-size:.82rem; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px;
}
.page-indicator input{
  width:46px; text-align:center;
  border:1px solid var(--line); border-radius:6px;
  padding:6px 4px; font:inherit; color:var(--ink); background:var(--white);
}
.toolbar-spacer{ flex:1; }

.viewer-stage{
  position:relative;
  background:#DEE2DD;
  padding:22px;
  min-height:58vh;
  max-height:80vh;
  overflow:auto;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.viewer-stage canvas{
  background:#fff;
  box-shadow:0 6px 22px rgba(28,63,72,.22);
  border-radius:3px;
  max-width:100%;
  height:auto;
}

.viewer-status{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(222,226,221,.92);
  color:var(--ink);
  font-family:var(--font-display); font-size:.9rem;
  text-align:center; padding:24px;
}
.viewer-status[hidden]{ display:none; }

.spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid rgba(42,82,92,.2); border-top-color:var(--band);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.viewer-note{
  padding:12px 16px; font-size:.8rem; color:var(--muted);
  border-top:1px solid var(--line); background:var(--surface);
}

/* viewer sidebar */
.doc-panel{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:24px; position:sticky; top:104px;
}
.doc-panel h1{ font-size:1.42rem; margin-bottom:.2em; }
.doc-panel .doc-kicker{ margin-bottom:.8em; }
.doc-panel p{ font-size:.92rem; color:var(--muted); }

.panel-facts{ list-style:none; margin:0 0 20px; padding:18px 0 0; border-top:1px solid var(--line-soft); font-size:.86rem; }
.panel-facts li{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; color:var(--muted); }
.panel-facts strong{ font-weight:500; color:var(--ink); }

.panel-actions{ display:grid; gap:10px; }

.panel-rights{ font-size:.73rem; line-height:1.5; color:var(--muted); margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line-soft); }

.related{ margin-top:22px; }
.related h2{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); font-weight:600; }
.related a{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; margin-bottom:8px;
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:.88rem;
  transition:border-color .15s ease;
}
.related a:hover{ border-color:var(--sage); }
.related svg{ width:18px; height:18px; color:var(--sage); flex:0 0 auto; }

/* --------------------------------------------------------------- join --- */

.join{ background:var(--band); color:var(--cream-light); padding:46px 0; }
.join-inner{ display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }

.join-title{
  color:var(--cream-light);
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:500; line-height:1.28; margin:0;
}

.join-form{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:relative; }

.field{
  font-family:var(--font-body); font-size:.95rem;
  background:transparent; color:var(--cream-light);
  border:1px solid rgba(235,213,164,.55);
  border-radius:7px; padding:13px 16px; min-width:170px;
}
.field::placeholder{ color:rgba(245,241,232,.6); }
.field:focus{ border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(219,183,106,.25); }

.form-msg{
  flex-basis:100%; margin:0; font-size:.85rem; min-height:1.2em;
}
.form-msg.is-ok{ color:var(--gold-soft); }
.form-msg.is-error{ color:#F0B9A8; }

/* ------------------------------------------------------------- footer --- */

.site-footer{ background:var(--cream); padding:34px 0 26px; }
.footer-top{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.brand-footer{ margin-right:auto; }

.footer-nav{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-nav a{
  font-family:var(--font-display); font-size:.74rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.footer-nav a:hover{ color:var(--ink); }

.socials{ display:flex; gap:12px; }
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  color:var(--sage); border:1px solid var(--line);
  transition:color .15s ease, border-color .15s ease;
}
.socials a:hover{ color:var(--teal); border-color:var(--sage); }

.footer-legal{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); text-align:center; }
.footer-legal p{ font-size:.72rem; line-height:1.6; color:var(--muted); margin:0 auto; max-width:92ch; }
.footer-contact{ margin-top:8px !important; }
.footer-contact a{ color:var(--teal); text-decoration:none; }

/* -------------------------------------------------------------- modal --- */

.modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(28,63,72,.55); backdrop-filter:blur(2px); }

.modal-panel{
  position:relative; z-index:1;
  width:min(100%,430px);
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:34px 32px 30px;
  text-align:center;
  animation:pop .22s ease-out;
}
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98);} to{ opacity:1; transform:none;} }

.modal-mark{ width:60px; margin:0 auto 14px; }
.modal-title{ font-size:1.32rem; margin-bottom:.4em; }
.modal-copy{ font-size:.92rem; color:var(--muted); margin-bottom:1.5em; }

.modal-close{
  position:absolute; top:10px; right:14px;
  background:none; border:0; font-size:1.7rem; line-height:1;
  color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:6px;
}
.modal-close:hover{ color:var(--ink); }

.gate-form{ display:grid; gap:12px; }
.gate-form .field{
  color:var(--ink);
  border-color:var(--line);
  background:var(--white);
  width:100%;
}
.gate-form .field::placeholder{ color:#9AA7A6; }
.gate-form .form-msg.is-ok{ color:var(--teal); }
.gate-form .form-msg.is-error{ color:#B4523C; }

.modal-fine{ font-size:.73rem; color:var(--muted); margin:2px 0 0; }

/* ------------------------------------------------------------ content --- */

.page-head{
  padding:60px 0 46px;
  background:
    radial-gradient(620px 360px at 78% 30%, rgba(126,154,142,.22), transparent 64%),
    linear-gradient(180deg,var(--cream-light),var(--cream));
}
.page-head h1{ font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:300; margin-bottom:.3em; }
.page-head p{ color:var(--muted); max-width:60ch; font-size:1.05rem; margin:0; }

.prose{ max-width:72ch; }
.prose h2{ font-size:1.45rem; margin-top:1.8em; }
.prose h3{ font-size:1.1rem; margin-top:1.5em; }
.prose ul{ padding-left:1.2em; }
.prose li{ margin-bottom:.5em; }
.prose blockquote{
  margin:1.8em 0; padding:18px 24px;
  border-left:3px solid var(--gold);
  background:var(--white); border-radius:0 8px 8px 0;
  color:var(--ink); font-size:1.02rem;
}
.prose blockquote p:last-child{ margin-bottom:0; }

.two-col{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }

.callout{
  background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--sage);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px; box-shadow:var(--shadow-sm);
}
.callout h3{ font-size:1rem; margin-bottom:.4em; }
.callout p{ font-size:.9rem; color:var(--muted); margin-bottom:0; }

.notice{
  background:#FFF6E2; border:1px solid var(--gold-soft);
  border-radius:var(--radius); padding:16px 20px;
  font-size:.92rem; color:#6B5420;
}

/* ------------------------------------------------------------- tables --- */

.table-wrap{ overflow-x:auto; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
table.data{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th, table.data td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.data th{
  font-family:var(--font-display); font-size:.7rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  background:var(--surface);
}
table.data tr:last-child td{ border-bottom:0; }

/* --------------------------------------------------------- responsive --- */

@media (max-width:1000px){
  .modules{ grid-template-columns:repeat(2,1fr); }
  .phases{ grid-template-columns:repeat(2,1fr); }
  .doc-grid{ grid-template-columns:repeat(2,1fr); }
  .viewer-layout{ grid-template-columns:1fr; }
  .doc-panel{ position:static; }
  .two-col{ grid-template-columns:1fr; gap:30px; }
}

@media (max-width:820px){
  .nav-toggle{ display:block; }
  .nav{ flex-wrap:wrap; position:relative; }
  .nav-links{
    display:none; width:100%; flex-direction:column; align-items:stretch;
    gap:2px; margin:8px 0 4px; padding-top:10px; border-top:1px solid var(--line-soft);
  }
  .nav-links.is-open{ display:flex; }
  .nav-link{ padding:12px 10px; }
  .nav-link::after{ display:none; }
  .nav-link.is-active{ background:var(--surface); }
  .nav-cta{ margin:8px 0 0; }

  .hero{ padding:48px 0 60px; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-art{ order:-1; }
  .hero-art img{ width:min(72%,220px); }

  .section{ padding:54px 0; }
  .join-inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .join-form{ justify-content:center; }
  .field{ flex:1 1 180px; }
  .footer-top{ justify-content:center; text-align:center; }
  .brand-footer{ margin-right:0; width:100%; justify-content:center; }
}

@media (max-width:560px){
  .modules{ grid-template-columns:1fr; }
  .phases{ grid-template-columns:1fr; }
  .doc-grid{ grid-template-columns:1fr; }
  .wrap, .nav-shell{ padding-inline:16px; }
  .viewer-stage{ padding:12px; }
  .modal-panel{ padding:28px 22px 24px; }
}

/* ---------------------------------------------------------- print page --- */

@media print{
  .site-header,.site-footer,.join,.modal,.viewer-toolbar,.doc-panel,.skip-link,.no-print{ display:none !important; }
  body{ background:#fff; }
}

/* ------------------------------------------------- five-pillar grid --- */
/* Placed after the responsive block so it wins over the generic .phases
   column counts at the same specificity. */
.phases-five{ grid-template-columns:repeat(5,1fr); }

@media (max-width:1180px){ .phases-five{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .phases-five{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  .phases-five{ grid-template-columns:1fr; } }