/* ==========================================================================
   Bodhelios — site.css
   One stylesheet. No build step. Edit the tokens in :root and the site follows.
   ========================================================================== */

/* ---------- 0. Fonts — self-hosted. See README for how these were made. -- */
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Bodhelios palette — warm paper, warm ink, one gold accent (from the mark) */
  --paper:#F9F8F3;
  --paper-warm:#F3F0E7;
  --paper-deep:#EDE8DC;
  --card:#FFFFFF;

  --ink:#1C1814;
  --ink-soft:#3A342C;
  --muted:#6E675C;
  --muted-2:#8D8578;

  --hair:#E5DFD2;
  --hair-2:#EFEAE0;

  --gold:#E0A126;
  --gold-bright:#F5C043;
  --gold-deep:#A05B17;   /* the accent at body size — clears 4.6:1 on every ground used here */

  --shadow-sm:0 1px 2px rgba(28,24,20,.04), 0 6px 20px rgba(28,24,20,.05);
  --shadow-md:0 2px 6px rgba(28,24,20,.06), 0 18px 44px rgba(28,24,20,.09);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;

  --sans:"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:"Erode", ui-serif, Georgia, "Times New Roman", serif;

  --wrap:1180px;
  --section-y:clamp(76px, 9.5vw, 138px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Klyphe's own palette — scoped, so it never leaks into the parent brand */
.klyphe-scope{
  --k-blue:#3F58A8;
  --k-purple:#B564B3;
  --k-salmon:#F59492;
  --k-blush:#F3DADF;
  --k-teal:#45B89B;
}

/* ---------- 2. Reset & base --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.02em; line-height:1.12}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}

::selection{background:var(--gold-bright); color:var(--ink)}

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

.skip{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:16px}

/* ---------- 3. Layout helpers ------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap--narrow{max-width:880px}
section{padding:var(--section-y) 0}
.prose{max-width:68ch}

/* Section eyebrow: 01 / THE NAME */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  margin:0 0 26px;
}
.eyebrow b{color:var(--gold-deep); font-weight:700}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px; min-width:24px;
  background:linear-gradient(90deg, var(--hair), transparent);
}

/* The recurring "ray" rule — a divider that behaves like light */
.ray{
  border:0; height:1px; margin:0;
  background:linear-gradient(90deg, transparent, rgba(224,161,38,.55) 18%, rgba(224,161,38,.55) 52%, transparent);
}

/* ---------- 4. Typography ------------------------------------------------ */
.display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.55rem, 6.1vw, 4.5rem);
  line-height:1.03;
  letter-spacing:-.032em;
  max-width:17ch;
  margin-bottom:26px;
}
.h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.85rem, 3.5vw, 2.85rem);
  line-height:1.1;
  letter-spacing:-.028em;
  max-width:20ch;
}
.h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.14rem;
  letter-spacing:-.012em;
  line-height:1.3;
}
.lede{
  font-size:clamp(1.08rem, 1.55vw, 1.3rem);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:56ch;
}
.muted{color:var(--muted)}
.gold{color:var(--gold-deep)}
.serif-em{font-family:var(--serif); font-style:italic; font-weight:400}

/* Inline link in prose */
.tlink{
  color:var(--gold-deep);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px;
  transition:background-size .25s var(--ease);
}
.tlink:hover{background-size:100% 2px}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--ink); color:var(--paper); box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:#000; box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent; border-color:var(--hair); color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold); background:rgba(224,161,38,.07)}
.btn--gold{background:var(--gold); color:#231703; box-shadow:0 1px 2px rgba(168,96,24,.2), 0 10px 26px rgba(224,161,38,.28)}
.btn--gold:hover{background:var(--gold-bright)}
.btn--onink{background:var(--paper); color:var(--ink)}
.btn--onink:hover{background:#fff}
.btn--onink-ghost{background:transparent; border-color:rgba(249,248,243,.3); color:var(--paper)}
.btn--onink-ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright)}
.btn__arrow{transition:transform .18s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* ---------- 6. Header ---------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(249,248,243,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--hair); background:rgba(249,248,243,.94)}
.nav__in{display:flex; align-items:center; gap:20px; min-height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand__mark{width:32px; height:32px; flex:none}
.brand__name{font-weight:700; font-size:18px; letter-spacing:-.025em}
.nav__menu{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav__menu a:not(.btn){
  padding:9px 14px; border-radius:var(--r-sm);
  font-size:15px; font-weight:500; color:var(--ink-soft);
  text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav__menu a:not(.btn):hover{background:var(--hair-2); color:var(--ink)}
.nav__menu a[aria-current="page"]{color:var(--ink); font-weight:600}
.nav__menu .btn{margin-left:10px; padding:10px 18px; font-size:14px}
.nav__toggle{
  display:none; margin-left:auto;
  width:42px; height:42px; border:1px solid var(--hair); border-radius:var(--r-sm);
  background:var(--card); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__toggle span{
  display:block; position:relative; width:17px; height:1.5px; background:var(--ink);
  transition:background .18s var(--ease);
}
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink);
  transition:transform .22s var(--ease), top .22s var(--ease);
}
.nav__toggle span::before{top:-5.5px}
.nav__toggle span::after{top:5.5px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

@media (max-width:820px){
  .nav__toggle{display:flex}
  .nav__menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--hair);
    padding:12px 24px 22px; margin-left:0;
    display:none;
  }
  .nav__menu.is-open{display:flex}
  .nav__menu a:not(.btn){padding:13px 12px; font-size:16px}
  .nav__menu .btn{margin:10px 0 0; justify-content:center; padding:14px 18px}
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero{position:relative; padding:clamp(70px,10vw,132px) 0 clamp(64px,8vw,110px); overflow:hidden}
.hero__light{
  position:absolute; pointer-events:none; z-index:0;
  top:-38%; left:50%; width:min(1180px,138vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:conic-gradient(from 0deg,
    rgba(224,161,38,0) 0deg,
    rgba(245,192,67,.34) 42deg,
    rgba(224,161,38,.10) 96deg,
    rgba(245,192,67,.30) 150deg,
    rgba(168,96,24,.12) 210deg,
    rgba(245,192,67,.32) 268deg,
    rgba(224,161,38,.08) 320deg,
    rgba(224,161,38,0) 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.75) 34%, transparent 66%);
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.75) 34%, transparent 66%);
  filter:blur(34px);
  opacity:.72;
  animation:sunspin 150s linear infinite;
}
@keyframes sunspin{to{transform:translateX(-50%) rotate(360deg)}}
.hero .wrap{position:relative; z-index:1}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.72);
  border:1px solid var(--hair); border-radius:999px; padding:6px 15px 6px 8px;
  margin-bottom:26px;
}
.hero__eyebrow img{width:18px; height:18px}
.hero .lede{max-width:60ch}

/* ---------- 8. Cards, grids, bands -------------------------------------- */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:1fr}}
@media (max-width:760px){.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:30px 28px;
  box-shadow:var(--shadow-sm);
}

.band-warm{background:var(--paper-warm); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.band-ink{background:var(--ink); color:var(--paper)}
.band-ink .h2,.band-ink .display{color:var(--paper)}
.band-ink .lede{color:#CFC8BC}
.band-ink .muted{color:#A79E90}
.band-ink .eyebrow{color:#9A9285}
.band-ink .eyebrow::after{background:linear-gradient(90deg, rgba(249,248,243,.2), transparent)}
.band-ink .eyebrow b,.band-ink .gold{color:var(--gold-bright)}

/* ---------- 9. The name (etymology) ------------------------------------- */
.name{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(24px,4vw,60px); align-items:center}
.name__part{max-width:34ch}
.name__part--right{text-align:right; justify-self:end}
.name__gloss{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px}
.name__root{
  font-family:var(--serif); font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:500; letter-spacing:-.03em; line-height:1;
  margin-bottom:14px;
}
:where(.name__part) p{font-size:15.5px; color:var(--muted); margin:0}
/* Keep <picture> as the grid item — display:contents would promote its
   <source> child to a grid item too and add a phantom column. */
.name picture{display:block; width:clamp(88px,11vw,144px); flex:none}
.name__mark{width:100%; height:auto; opacity:.97}
.name__sum{
  margin:clamp(40px,5vw,66px) auto 0;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.35; letter-spacing:-.022em;
  color:var(--ink);
  max-width:32ch;
}
@media (max-width:820px){
  .name{grid-template-columns:1fr; gap:32px; justify-items:start}
  .name__part--right{text-align:left; justify-self:start}
  .name picture{order:-1}
}

/* ---------- 10. Product card (Klyphe on the home page) ------------------ */
.product{position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(36px,5vw,64px)}
.product::after{
  content:""; position:absolute; inset:auto -10% -60% auto;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(63,88,168,.5), rgba(181,100,179,.22) 45%, transparent 70%);
  filter:blur(46px); pointer-events:none;
}
.product > *{position:relative; z-index:1}
.product__name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:-.035em; line-height:1;
  margin-bottom:10px;
}
.product__tag{font-size:15px; color:var(--gold-bright); font-weight:600; margin-bottom:22px}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:0 24px; margin-top:38px; border-top:1px solid rgba(249,248,243,.16)}
.pillars li{padding:22px 0 0}
.pillars .h3{color:var(--paper); margin-bottom:6px}
:where(.pillars) p{font-size:14.5px; color:#A79E90; margin:0}
@media (max-width:820px){.pillars{grid-template-columns:1fr; gap:0}}

/* ---------- 11. Principles ---------------------------------------------- */
.principles{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,5vw,72px)}
.principles li{padding:28px 0; border-top:1px solid var(--hair)}
.principles .h3{margin-bottom:8px}
.principles .h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold-deep)}
:where(.principles) p{font-size:15.5px; color:var(--muted); margin:0}
@media (max-width:760px){.principles{grid-template-columns:1fr}}

/* ---------- 12. Roadmap -------------------------------------------------- */
.roadmap li{
  display:grid; grid-template-columns:64px 1fr 168px; gap:clamp(14px,3vw,34px);
  align-items:start; padding:30px 0; border-top:1px solid var(--hair);
}
.roadmap li:last-child{border-bottom:1px solid var(--hair)}
.roadmap__n{
  font-family:var(--serif); font-size:1.55rem; font-weight:500;
  color:var(--gold-deep); letter-spacing:-.02em; line-height:1.2;
}
.roadmap .h3{margin-bottom:7px}
:where(.roadmap) p{font-size:15.5px; color:var(--muted); margin:0; max-width:58ch}
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--hair); border-radius:999px; padding:6px 13px;
  background:var(--card); color:var(--muted); white-space:nowrap;
}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--muted-2)}
.status--now{color:var(--gold-deep); border-color:rgba(224,161,38,.5); background:rgba(224,161,38,.09)}
.status--now::before{background:var(--gold)}
@media (max-width:820px){
  .roadmap li{grid-template-columns:44px 1fr; gap:8px 16px}
  .roadmap__meta{grid-column:2; margin-top:14px}
}

/* ---------- 13. Contact -------------------------------------------------- */
.contact-card{
  display:block; text-decoration:none;
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:28px 26px;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-card:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.contact-card .h3{margin-bottom:6px}
:where(.contact-card) p{font-size:15px; color:var(--muted); margin:0}
.contact-card__addr{
  display:block; margin-top:16px;
  font-size:16px; font-weight:600; color:var(--gold-deep);
  overflow-wrap:anywhere;
}

.cta-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:24px; justify-content:space-between;
  border-radius:var(--r-xl); background:var(--paper-warm); border:1px solid var(--hair);
  padding:clamp(30px,4vw,52px);
}
.cta-strip .h2{max-width:24ch; margin:0}
.cta-strip .btn-row{margin-top:0}

/* ---------- 14. Team & company facts ------------------------------------ */
.team li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(12px,3vw,40px); padding:26px 0; border-top:1px solid var(--hair);
}
.team li:last-child{border-bottom:1px solid var(--hair)}
.team__name{font-family:var(--serif); font-size:1.5rem; font-weight:500; letter-spacing:-.025em; line-height:1.15}
.team__role{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep); margin-top:8px}
:where(.team) p{font-size:15.5px; color:var(--muted); margin:0}
@media (max-width:700px){.team li{grid-template-columns:1fr; gap:12px}}

.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,5vw,64px)}
.facts > div{padding:20px 0; border-top:1px solid var(--hair)}
.facts dt{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.facts dd{margin:0; font-size:16px; color:var(--ink-soft)}
@media (max-width:700px){.facts{grid-template-columns:1fr}}

/* ---------- 15. Klyphe page ---------------------------------------------- */
.k-hero{position:relative; overflow:hidden; padding:clamp(66px,8vw,104px) 0 clamp(56px,7vw,90px)}
.k-hero::before{
  content:""; position:absolute; top:-40%; right:-14%;
  width:min(820px,110vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(63,88,168,.24), rgba(181,100,179,.16) 45%, transparent 70%);
  filter:blur(50px); pointer-events:none;
}
.k-hero .wrap{position:relative; z-index:1}
.k-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--k-blue); background:rgba(63,88,168,.08);
  border:1px solid rgba(63,88,168,.24); border-radius:999px; padding:6px 15px;
  margin-bottom:24px;
}
.k-dot{width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--k-blue),var(--k-purple))}
.k-card{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:30px 28px;
  border-top:3px solid var(--k-blue);
}
.k-card--2{border-top-color:var(--k-purple)}
.k-card--3{border-top-color:var(--k-salmon)}
.k-card .h3{margin-bottom:8px}
:where(.k-card) p{font-size:15.5px; color:var(--muted); margin:0}

.versus{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:760px){.versus{grid-template-columns:1fr}}
.versus__col{border-radius:var(--r-lg); padding:28px 26px; border:1px solid var(--hair); background:var(--card)}
.versus__col--them{background:var(--paper-deep)}
.versus__col--us{background:linear-gradient(165deg, rgba(63,88,168,.07), rgba(181,100,179,.05)); border-color:rgba(63,88,168,.28)}
.versus__label{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.versus__col--us .versus__label{color:var(--k-blue)}
.versus li{padding:11px 0 11px 26px; position:relative; font-size:15.5px; color:var(--ink-soft); border-top:1px solid var(--hair-2)}
.versus li:first-child{border-top:0}
.versus li::before{content:""; position:absolute; left:2px; top:19px; width:9px; height:9px; border-radius:50%; background:var(--muted-2)}
.versus__col--us li::before{background:linear-gradient(135deg,var(--k-blue),var(--k-purple))}

/* ---------- 16. Legal pages ---------------------------------------------- */
.legal h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,2.4vw,1.85rem); letter-spacing:-.025em;
  margin:46px 0 14px;
}
.legal h2:first-of-type{margin-top:34px}
.legal p,.legal li{color:var(--ink-soft); font-size:16.5px}
.legal ul{margin:0 0 1.1em}
.legal ul li{position:relative; padding:5px 0 5px 22px}
.legal ul li::before{content:""; position:absolute; left:3px; top:15px; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.notice{
  border:1px solid rgba(224,161,38,.45); background:rgba(224,161,38,.09);
  border-radius:var(--r-md); padding:18px 20px; font-size:15px; color:var(--ink-soft);
}

/* ---------- 17. Footer --------------------------------------------------- */
.foot{border-top:1px solid var(--hair); padding:64px 0 44px}
.foot__top{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; align-items:flex-start}
.foot__brand{max-width:34ch}
.foot__brand .brand{margin-bottom:14px}
:where(.foot__brand) p{font-size:14.5px; color:var(--muted); margin:0}
.foot__cols{display:flex; flex-wrap:wrap; gap:clamp(34px,7vw,86px)}
.foot h2{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.foot__cols a{display:block; padding:6px 0; font-size:15px; color:var(--ink-soft); text-decoration:none; transition:color .18s var(--ease)}
.foot__cols a:hover{color:var(--gold-deep)}
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--hair);
  font-size:13.5px; color:var(--muted);
}
.foot__bottom a{color:var(--muted); text-decoration:none}
.foot__bottom a:hover{color:var(--gold-deep)}

/* ---------- 18. 404 ------------------------------------------------------ */
.oops{text-align:center; padding:clamp(80px,12vw,160px) 0}
.oops picture{display:block}
.oops img{width:96px; height:auto; margin:0 auto 30px; opacity:.9}
.oops .display{max-width:none; margin:0 auto 20px}
.oops .lede{margin:0 auto}
.oops .btn-row{justify-content:center}

/* ---------- 19. Scroll reveal ------------------------------------------- */
/* Gated on .js (set by an inline script in <head>) so that if JavaScript is
   unavailable the content is simply visible, never hidden by an effect that
   will never run. */
.js .reveal{opacity:0; transform:translateY(12px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}

/* ---------- 20. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__light{animation:none}
  .js .reveal{opacity:1; transform:none}
}

/* ---------- 21. Print ---------------------------------------------------- */
@media print{
  .nav,.hero__light,.cta-strip,.btn,.skip{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .js .reveal{opacity:1; transform:none}
}