/* =====================================================================
   PBS / DBIC Shared Resources — Design System
   Theme: "Refined Neural" — Dartmouth green + emerald, slate, warm paper.
   Used by index.html and all detail pages. Keep class vocabulary stable.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --green:        #00693e;   /* Dartmouth green */
  --green-deep:   #024c2e;
  --green-700:    #0a5c3a;
  --emerald:      #10b981;
  --emerald-lite: #34d399;
  --mint:         #d1fae5;

  /* Neutrals */
  --ink:          #0f1a17;   /* near-black w/ green undertone */
  --ink-2:        #14201c;
  --slate-900:    #0f172a;
  --slate-700:    #334155;
  --slate-600:    #475569;
  --slate-500:    #64748b;
  --slate-400:    #94a3b8;
  --slate-200:    #e2e8f0;
  --slate-100:    #f1f5f9;
  --paper:        #f7f9f8;
  --paper-warm:   #fbfaf7;
  --white:        #ffffff;

  /* Semantic — light palette: white bg, Dartmouth-green headers, dark-gray body */
  --bg:           #ffffff;
  --text:         #333a37;   /* dark gray body */
  --text-soft:    #566058;   /* muted gray */
  --heading:      var(--green);
  --border:       #e6ece9;
  --card:         #ffffff;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --maxw:         1180px;
  --maxw-narrow:  860px;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow-sm:    0 1px 2px rgba(15,26,23,.06), 0 2px 8px rgba(15,26,23,.05);
  --shadow-md:    0 6px 24px rgba(15,26,23,.09), 0 2px 8px rgba(15,26,23,.05);
  --shadow-lg:    0 24px 60px rgba(15,26,23,.16);
  --ease:         cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--emerald); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--heading); letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { margin: 0 0 1.1em; }
::selection { background: var(--mint); color: var(--green-deep); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
.center { text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin-bottom: 1rem;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--text-soft); max-width: 62ch; }
.section > .container > .lede.center, .center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: .82em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 20px rgba(0,105,62,.28); }
.btn-primary:hover { background: var(--green-700); color: #fff; box-shadow: 0 10px 28px rgba(0,105,62,.36); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
/* On pages with a dark hero, header starts transparent-on-dark. */
.site-header[data-theme="on-dark"] { background: transparent; }
.site-header[data-theme="on-dark"] .nav-link,
.site-header[data-theme="on-dark"] .brand-text { color: rgba(255,255,255,.92); }
.site-header[data-theme="on-dark"] .nav-toggle span { background: #fff; }
.site-header.is-scrolled {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--border);
}
.site-header.is-scrolled .nav-link,
.site-header.is-scrolled .brand-text { color: var(--text); }
.site-header.is-scrolled .nav-toggle span { background: var(--text); }
/* Solid header variant (detail pages without dark hero use this) */
.site-header[data-theme="solid"] {
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 38px; width: auto; transition: filter .3s var(--ease); }
.brand-dpine { height: 34px !important; }
/* On a transparent-over-dark header, render the green brand mark as white.
   Once the header condenses to solid white on scroll, show it in green. */
.site-header[data-theme="on-dark"]:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav-link {
  font-weight: 500; font-size: .95rem; color: var(--text); padding: .5rem .8rem; border-radius: 8px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover, .nav-link.active { background: rgba(0,105,62,.1); color: var(--green); }
.site-header[data-theme="on-dark"]:not(.is-scrolled) .nav-link:hover { background: rgba(255,255,255,.14); color:#fff; }
.nav-cta { margin-left: .4rem; }
.nav-toggle { display: none; background: none; border: 0; width: 42px; height: 42px; cursor: pointer; padding: 9px; }
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--text); margin: 5px 0; border-radius: 2px; transition: .25s var(--ease); }

/* ---------- HERO (landing, light) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7f5 100%);
  border-bottom: 1px solid var(--border);
}
#constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-inner { position: relative; z-index: 3; }
.hero-grid {
  display: grid; grid-template-columns: auto minmax(0,1fr) clamp(140px, 15vw, 188px);
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center;
  padding-block: clamp(2.6rem, 6vw, 5rem);
  min-height: calc(100svh - 73px);
}
/* left logo column */
.hero-brandcol { display: flex; flex-direction: column; align-items: flex-start; gap: 1.7rem; width: clamp(140px, 15vw, 195px); }
.hero-brandcol .dbic-logo { width: 100%; height: auto; }
.hero-brandcol .nc-logo { width: 90%; height: auto; }
/* middle copy (a bit wider) */
.hero-copy { max-width: 52ch; }
.hero-copy h1 { max-width: 17ch; }
.hero-lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--text-soft); max-width: 50ch; margin-bottom: 1.8rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
/* right montage — smaller, flush to the right edge, subtler */
.hero-montage { position: relative; align-self: stretch; height: min(78vh, 640px); overflow: hidden; opacity: .82;
  margin-right: calc(-1 * clamp(1.1rem, 4vw, 2.5rem));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent); }
.montage-track { display: flex; flex-direction: column; gap: 1rem; animation: montageScroll 46s linear infinite; will-change: transform; }
.hero-montage:hover .montage-track { animation-play-state: paused; }
.montage-track figure { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.montage-track img { width: 100%; height: auto; display: block; }
.montage-track figcaption { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--green); font-weight: 600; padding: .5rem .7rem; background: #fff; border-top: 1px solid var(--border); }
@keyframes montageScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.scroll-hint { position: absolute; bottom: 1.3rem; left: 50%; transform: translateX(-50%); z-index: 3;
  color: var(--slate-500); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-hint::after { content: ""; width: 1px; height: 32px; background: linear-gradient(var(--slate-400), transparent); animation: scrollpulse 2s var(--ease) infinite; }
@keyframes scrollpulse { 0%{transform:scaleY(.3);opacity:0;transform-origin:top} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0;transform-origin:top} }

/* ---------- Detail-page banner hero ---------- */
.page-hero {
  position: relative; color: #fff; overflow: hidden;
  padding-block: clamp(6.5rem, 12vw, 9.5rem) clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(155deg, #071410 0%, #0b1f18 55%, #0a1a22 100%);
}
.page-hero.has-photo { background: #0b1f18; }
.page-hero .photo-bg { position:absolute; inset:0; z-index:0; object-fit: cover; width:100%; height:100%; opacity:.5; filter: saturate(.98); }
.page-hero .photo-bg-overlay { position:absolute; inset:0; z-index:1;
  background: linear-gradient(155deg, rgba(7,20,16,.66), rgba(10,26,34,.5)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; }
.page-hero .kicker { color: var(--emerald-lite); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; }
.page-hero .lede { color: rgba(233,242,238,.88); }
.page-hero .maintainer { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:.4rem .9rem; border-radius:999px; font-size:.86rem; color:#eafaf3; }
/* Lab links inside the maintainer pill must be legible on the dark banner */
.page-hero .maintainer a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.5); }
.page-hero .maintainer a:hover { color: var(--emerald-lite); text-decoration-color: var(--emerald-lite); }

/* Breadcrumb */
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }

/* ---------- Resource cards grid (landing) ---------- */
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.res-card {
  position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.res-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(0,105,62,.25); }
.res-card .thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg,#0b1f18,#0a1a22); }
.res-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.res-card:hover .thumb img { transform: scale(1.06); }
.res-card .thumb::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(7,20,16,.35)); }
.res-card .tag { position: absolute; top: .8rem; left: .8rem; z-index:2; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  background: rgba(255,255,255,.92); color: var(--green-deep); padding: .3rem .7rem; border-radius: 999px; text-transform: uppercase; }
.res-card .body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.res-card h3 { margin-bottom: .4rem; }
.res-card p { color: var(--text-soft); font-size: .96rem; margin-bottom: 1.1rem; }
.res-card .more { margin-top: auto; font-weight: 600; color: var(--green); font-size: .92rem; display:inline-flex; align-items:center; gap:.4rem; }
.res-card .more::after { content:"→"; transition: transform .2s var(--ease); }
.res-card:hover .more::after { transform: translateX(4px); }
.res-card a.stretched { position:absolute; inset:0; z-index:3; text-indent:-9999px; }

/* ---------- Feature / split rows ---------- */
.split { display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr 1fr; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.split-media figure { margin: 0; }
.split-media figcaption { font-size: .82rem; color: var(--slate-500); margin-top: .6rem; text-align:center; }

/* ---------- Spec list / feature bullets ---------- */
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.spec-list li { position: relative; padding-left: 1.9rem; color: var(--text-soft); }
.spec-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px;
  background: var(--green); box-shadow: 0 0 0 4px rgba(0,105,62,.12); }
.spec-list li strong { color: var(--text); font-weight: 600; }

/* Feature pill grid */
.feature-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.4rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature .icon { width: 44px; height: 44px; border-radius: 12px; display:grid; place-items:center; margin-bottom: .9rem;
  background: linear-gradient(135deg, rgba(0,105,62,.12), rgba(16,185,129,.14)); color: var(--green); }
.feature .icon svg { width: 24px; height: 24px; }
.feature h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; margin: 0 0 .35rem; color: var(--text); }
.feature p { font-size: .92rem; color: var(--text-soft); margin: 0; }

/* ---------- Spec table ---------- */
.spec-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.spec-table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 420px; }
.spec-table th, .spec-table td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
.spec-table thead th { background: #f0f5f2; color: var(--green-deep); font-weight: 600; letter-spacing:.02em; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th[scope="row"] { font-weight: 600; color: var(--text); width: 38%; }
.spec-table tbody tr:hover { background: #f6faf8; }

/* ---------- Stats band ---------- */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,4vw,3.2rem); color: var(--green); line-height: 1; }
.stat .num .unit { font-size: .5em; color: var(--emerald); }
.stat .label { font-size: .9rem; color: var(--text-soft); margin-top: .4rem; }

/* Dark section (for stats/CTA on dark) */
.section-dark { background: linear-gradient(160deg,#071410,#0b1f18 60%,#0a1a22); color: #eaf3ef; }
.section-dark h2 { color: #fff; }
.section-dark .lede { color: rgba(233,242,238,.82); }
.section-dark .stat .num { color: var(--emerald-lite); }
.section-dark .stat .num .unit { color: var(--emerald); }
.section-dark .stat .label { color: rgba(233,242,238,.7); }
.section-dark .eyebrow { color: var(--emerald-lite); }

/* Alt background */
.section-alt { background: var(--paper-warm); }

/* Callout / note */
.callout { border-left: 4px solid var(--green); background: #f0f6f3; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.2rem 1.4rem; color: var(--text-soft); }
.callout strong { color: var(--green-deep); }

/* Prose blocks */
.prose h3 { margin-top: 2rem; }
.prose p { color: var(--text-soft); }
.prose ul { color: var(--text-soft); padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

/* Gallery */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.gallery figure { margin:0; border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-sm); background:#fff; border:1px solid var(--border); }
.gallery img { width:100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery figcaption { padding:.7rem .9rem; font-size:.82rem; color: var(--slate-500); }
.gallery figure.contain img { object-fit: contain; background:#fff; padding: .6rem; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: .8rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: rgba(233,242,238,.78); padding-block: 3.5rem 2rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr; margin-bottom: 2.5rem; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; letter-spacing:.12em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(233,242,238,.72); }
.site-footer a:hover { color: var(--emerald-lite); }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.92rem; }
.footer-logos { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.footer-logos img { height:40px; width:auto; }
.footer-about { font-size:.92rem; max-width:42ch; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:rgba(233,242,238,.5); }

/* ---------- Parallax reveal ----------
   A .reveal-bg element (a page-hero banner or a dark band) sticks to the top and
   stays stationary while the opaque sections below scroll up and gradually cover it.
   Requires the covering sections to be opaque and stacked above (z-index:1). */
.section, .section-alt, .section-dark, .cta-band, .site-footer { position: relative; z-index: 1; }
/* Covering sections must be opaque so the sticky background can't show through.
   Exclude alt/dark, which carry their own (opaque) backgrounds. */
.section:not(.section-alt):not(.section-dark) { background: var(--bg); }
.reveal-bg { position: sticky !important; top: 0; z-index: 0 !important; }
/* A reveal-bg element is the stationary background — it must sit behind, never in the z:1 layer. */
.section-dark.reveal-bg { z-index: 0 !important; }
@media (prefers-reduced-motion: reduce) { .reveal-bg { position: relative !important; } }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .scroll-hint::after { animation: none; }
  .montage-track { animation: none; }
}

/* ---------- Responsive ---------- */
/* Hero: drop montage, then stack logos, on smaller screens */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: auto minmax(0,1fr); }
  .hero-montage { display: none; }
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; min-height: 0; padding-block: 2.4rem 3rem; }
  .hero-brandcol { flex-direction: row; align-items: center; width: 100%; gap: 1.4rem; }
  .hero-brandcol .dbic-logo { width: auto; height: 82px; }
  .hero-brandcol .nc-logo { width: auto; height: 42px; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.98); backdrop-filter: blur(14px);
    padding: .5rem 1rem 1.2rem; box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .25s var(--ease);
    border-bottom: 1px solid var(--border);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav .nav-link { color: var(--text); padding: .85rem .6rem; border-radius: 8px; }
  .nav-cta { margin: .6rem 0 0; }
  .nav .btn { width: 100%; justify-content: center; }
  .hero-logos img { height: 38px; }
}
@media (max-width: 480px) {
  .brand-text { display: none; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}