/* ============================================================================
   HNI NETWORK  ·  BRAND LAYER
   Positioning: a private, invitation-only peer network for high-net-worth
   individuals. The product is discretion — a room with no vendors in it.
   Design language: near-black ground, off-white type, one bronze accent.
   Luxury here is space, not ornament. Nothing is oversold. Nothing is priced.
   Dark-dominant: the page ground IS the dark posture; light sections are the
   deliberate exception (the charter, and the application form — "the paper").

   CONTRAST NOTE: this palette is low-contrast by intent, so every text token
   below has been measured against its own ground. Ratios in comments are
   WCAG 2.1 relative-luminance calculations.
   ========================================================================== */

:root{
  /* ---- Palette ---- */
  --ink:#0c0c0a;            /* page ground */
  --ink-2:#16150f;          /* raised dark surface */
  --paper:#f4f2ec;          /* off-white type / light ground */
  --paper-2:#e9e6dd;
  --line:#2a2823;           /* hairline on dark */
  --accent:#9a7b45;         /* heritage bronze — structural, not text */
  --accent-soft:#c3a068;    /* bronze for text on dark — 7.98:1 on --ink */
  --accent-ink:#7a5f2f;     /* bronze for text on paper — 5.42:1 on --paper */
  --muted:#5f5a4e;          /* muted text on PAPER — 6.26:1 (was too light) */
  --muted-dark:#a8a396;     /* muted text on INK — 7.69:1 */

  /* ---- Type ---- */
  --font-display:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- Default posture is DARK ---- */
  --bg:var(--ink);
  --fg:var(--paper);
  --fg-muted:var(--muted-dark);
  --surface:var(--ink-2);
  --hairline:var(--line);

  /* The bronze that is safe to set type in, on whatever ground is current */
  --accent-legible:var(--accent-soft);

  --header-h:84px;
}
@media (max-width:800px){:root{--header-h:66px}}

/* ---------- SURFACES ---------------------------------------------------- */
/* core's .on-dark already flips the tokens; we only correct the muted tone
   and declare the legible bronze. */
.on-dark{--fg-muted:var(--muted-dark);--accent-legible:var(--accent-soft)}

/* The light exception. Used twice only: the charter and the application. */
.paper{
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --surface:var(--paper-2);
  --hairline:#d7d2c4;
  --accent-legible:var(--accent-ink);
  background:var(--bg);color:var(--fg);
}

/* ---------- TYPE CORRECTIONS -------------------------------------------- */
h1,h2,h3,h4,.display{font-weight:300}
.display-xl,.display-lg,h1{letter-spacing:-.03em}
body{font-weight:300}
strong,b{font-weight:500}
p{line-height:1.72}

/* Jost needs air in its uppercase. This site leans on tracking heavily. */
.eyebrow{letter-spacing:.32em;font-weight:400;margin-bottom:var(--s-lg)}
.eyebrow::before,.eyebrow--center::after{width:clamp(28px,5vw,56px);opacity:.7}
.caps{letter-spacing:.2em;font-weight:400}

/* Every bronze that carries type routes through --accent-legible so it stays
   readable on both grounds. Structural bronze (rules, bars) keeps --accent. */
.eyebrow,.accent,.script,.link--accent,.stat__n,.card__num,.card__icon,.badge,
.acc__btn:hover,.acc__btn[aria-expanded="true"]{color:var(--accent-legible)}
:focus-visible{outline-color:var(--accent-legible)}

/* ---------- BUTTONS — square, quiet, one only per view ------------------ */
.btn{
  --btn-bg:var(--accent-soft);
  --btn-fg:#0c0c0a;                 /* 7.23:1 — white on bronze would fail */
  border-radius:2px;
  font-weight:500;letter-spacing:.18em;
  box-shadow:none;
  padding:1.25em 2.4em;
}
.btn:hover{box-shadow:0 10px 30px rgba(195,160,104,.16)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);border-color:color-mix(in srgb,var(--fg) 34%,transparent)}
.btn--ghost:hover{box-shadow:none;border-color:var(--accent-soft);background:transparent}
.skip{background:var(--accent-soft);color:#0c0c0a}

/* ---------- HEADER ------------------------------------------------------ */
.header{background:transparent}
.header.is-stuck{
  background:color-mix(in srgb,var(--ink) 90%,transparent);
  box-shadow:none;border-bottom-color:var(--line);
}
.brand{font-weight:300;letter-spacing:.02em;gap:.8rem}
.brand__mark{width:30px;height:30px;color:var(--accent-soft)}
.brand b{font-weight:300;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body);font-size:var(--step--1)}
.brand small{letter-spacing:.3em;font-size:8.5px;color:var(--muted-dark);margin-top:5px}
.nav a{letter-spacing:.14em;text-transform:uppercase;font-size:var(--step--2);font-weight:400}
.nav a::after{background:var(--accent-soft)}
/* One quiet CTA in the header, never two. The in-nav button exists only for
   the mobile drawer, where core hides the header CTA. */
@media (min-width:961px){.nav .btn{display:none}}
@media (max-width:960px){
  .nav{background:var(--ink);border-bottom-color:var(--line)}
  .nav a{font-size:var(--step-0);text-transform:none;letter-spacing:.04em}
  .nav .btn{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.18em}
}

/* ---------- HERO — vast, cinematic, almost empty ------------------------ */
.hero{
  position:relative;overflow:hidden;
  min-height:min(100dvh,1000px);
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + var(--s-3xl));
  padding-bottom:var(--s-3xl);
}
.hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none}
/* A single slow bronze bloom, very low in the frame. No streaks, no drama. */
.hero__veil::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 118%,rgba(154,123,69,.30),transparent 62%),
    radial-gradient(60% 45% at 82% 6%,rgba(244,242,236,.045),transparent 66%),
    linear-gradient(180deg,#0c0c0a 0%,#100f0b 62%,#0a0a08 100%);
}
/* Hairline rule grid — architecture, not texture */
.hero__veil::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(244,242,236,.05) 1px,transparent 1px);
  background-size:clamp(90px,12vw,180px) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero__in{position:relative;z-index:1;width:100%}
.hero h1{
  font-size:clamp(2.9rem,1.6rem + 6.2vw,7rem);
  line-height:.96;letter-spacing:-.035em;
  max-width:16ch;
}
.hero .lede{
  max-width:46ch;margin-top:var(--s-xl);
  font-size:var(--step-1);color:var(--muted-dark);
  font-weight:300;
}
.hero__cta{margin-top:var(--s-2xl)}
.hero__note{
  margin-top:var(--s-xl);padding-top:var(--s-md);
  border-top:1px solid var(--line);
  max-width:52ch;font-size:var(--step--2);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark);
}

/* ---------- THREE NUMBERS — restraint as a status signal ---------------- */
.numbers{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.numbers__grid{display:grid;gap:var(--s-2xl)}
@media (min-width:820px){
  .numbers__grid{grid-template-columns:repeat(3,1fr);gap:0}
  .numbers__grid>*+*{border-left:1px solid var(--line)}
  .numbers__grid>*{padding-inline:clamp(1.5rem,4vw,3.5rem)}
  .numbers__grid>*:first-child{padding-left:0}
  .numbers__grid>*:last-child{padding-right:0}
}
.num__n{
  display:block;font-family:var(--font-display);font-weight:300;
  font-size:clamp(3.4rem,2.2rem + 5vw,6rem);line-height:1;
  letter-spacing:-.04em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.num__l{
  display:block;margin-top:var(--s-md);
  font-size:var(--step--2);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-soft);
}
.num__sub{display:block;margin-top:.7em;font-size:var(--step--1);color:var(--muted-dark);max-width:30ch}

/* ---------- SECTION HEADS ----------------------------------------------- */
.sec-head{max-width:44rem;margin-bottom:var(--s-2xl)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:var(--s-md);font-size:var(--step-5)}
.sec-head .lede{font-size:var(--step-1);font-weight:300}
.sec-head--center .lede{margin-inline:auto}

/* ---------- TENET LIST — the product, stated plainly -------------------- */
.tenets{display:grid;gap:0;border-top:1px solid var(--hairline)}
.tenet{
  display:grid;gap:var(--s-sm) var(--s-2xl);
  padding-block:clamp(1.75rem,4vw,2.75rem);
  border-bottom:1px solid var(--hairline);
}
@media (min-width:820px){.tenet{grid-template-columns:1fr 1.5fr;align-items:start}}
.tenet__k{
  font-family:var(--font-body);font-size:var(--step--2);
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent-legible);
  display:flex;gap:1.2em;align-items:baseline;
}
/* .82 not .5 — at half opacity the bronze numerals drop to 2.8:1 on the ink
   ground. At .82 they measure 5.6:1 and still read as an index, not a label. */
.tenet__k i{font-style:normal;opacity:.82;font-variant-numeric:tabular-nums}
.tenet h3{font-size:var(--step-3);margin-bottom:.45em;font-weight:300}
.tenet p{color:var(--fg-muted);max-width:52ch}

/* ---------- THE NEGATIVE LIST — what is deliberately absent ------------- */
.absent{
  margin-top:var(--s-2xl);padding:clamp(1.75rem,4vw,2.75rem);
  border:1px solid var(--hairline);
}
.absent h3{font-size:var(--step-2);margin-bottom:var(--s-md);font-weight:300}
.absent ul{list-style:none;padding:0;display:grid;gap:.85rem}
@media (min-width:760px){.absent ul{grid-template-columns:1fr 1fr;column-gap:var(--s-xl)}}
.absent li{
  display:flex;gap:.9rem;align-items:flex-start;
  font-size:var(--step--1);color:var(--fg-muted);line-height:1.55;
}
.absent li svg{width:15px;height:15px;flex:none;margin-top:.42em;color:var(--accent-legible);opacity:.8}

/* ---------- THE CHARTER (light) ----------------------------------------- */
.charter__threshold{
  border:1px solid var(--hairline);
  padding:clamp(1.75rem,4vw,2.75rem);
  margin-bottom:var(--s-2xl);
  display:grid;gap:var(--s-lg);
}
@media (min-width:820px){.charter__threshold{grid-template-columns:1fr 1fr}}
.charter__figure{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.4rem,1.4rem + 3.6vw,4rem);line-height:1;
  letter-spacing:-.03em;
}
.charter__figure small{
  display:block;font-family:var(--font-body);font-size:var(--step--2);
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:.9em;letter-spacing:.24em;
}
.charter__figure span{display:block;font-size:var(--step-1);color:var(--fg-muted);margin-top:.6em;font-family:var(--font-body)}

.cees{display:grid;gap:0;border-top:1px solid var(--hairline)}
.cee{
  display:grid;gap:var(--s-xs) var(--s-2xl);
  padding-block:clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--hairline);
}
@media (min-width:760px){.cee{grid-template-columns:.55fr 1.45fr;align-items:baseline}}
.cee dt{
  font-family:var(--font-display);font-size:var(--step-2);font-weight:300;
  color:var(--fg);
}
.cee dd{margin:0;color:var(--fg-muted);font-size:var(--step--1);max-width:58ch;line-height:1.7}

/* ---------- CONVENINGS --------------------------------------------------- */
.conv{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
@media (min-width:760px){.conv{grid-template-columns:1fr 1fr}}
.conv__item{background:var(--bg);padding:clamp(1.75rem,4vw,2.75rem);display:flex;flex-direction:column;gap:var(--s-sm)}
.conv__item h3{font-size:var(--step-2);font-weight:300}
.conv__item p{color:var(--fg-muted);font-size:var(--step--1);max-width:44ch}
.conv__meta{
  margin-top:auto;padding-top:var(--s-md);
  font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-legible);
}
.conv__img{aspect-ratio:16/7;margin-bottom:var(--s-lg)}

/* ---------- MARKET CONTEXT ---------------------------------------------- */
.figs{display:grid;gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
@media (min-width:680px){.figs{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.figs{grid-template-columns:repeat(4,1fr)}}
.fig{background:var(--bg);padding:clamp(1.5rem,3vw,2.25rem)}
.fig b{
  display:block;font-family:var(--font-display);font-weight:300;
  font-size:var(--step-4);line-height:1;color:var(--accent-soft);
  letter-spacing:-.02em;margin-bottom:.5em;font-variant-numeric:tabular-nums;
}
.fig p{font-size:var(--step--1);color:var(--fg-muted);line-height:1.6}
.fig cite{display:block;margin-top:.9em;font-style:normal;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--muted-dark) 82%,transparent)}

/* ---------- APPLICATION (light — "the paper you are handed") ------------ */
.apply{
  --bg:var(--paper-2);
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --surface:#dedad0;
  --hairline:#cdc7b8;
  --accent-legible:var(--accent-ink);
  background:var(--bg);color:var(--fg);
}
.apply .wizard{
  --bg:#f7f5ef;--surface:#efece4;
  border-radius:2px;border-color:#d9d4c5;
  box-shadow:0 40px 90px rgba(0,0,0,.28);
}
.apply .input,.apply .select,.apply .textarea{background:#fff;border-color:#d5d0c2;border-radius:2px}
.apply .input::placeholder,.apply .textarea::placeholder{color:#6f6a5c}
.apply .wizard__q{font-weight:300;font-size:var(--step-3)}
.apply .btn{--btn-bg:var(--ink);--btn-fg:var(--paper)}
.apply__crown{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem clamp(1.25rem,3vw,2rem);
  background:var(--ink);color:var(--paper);
}
.apply__crown span{font-size:var(--step--2);letter-spacing:.24em;text-transform:uppercase}
.apply__crown b{color:var(--accent-soft);font-weight:400;letter-spacing:.14em;font-size:var(--step--2);text-transform:uppercase}

/* Choice + chip states, rebuilt for a bronze that reads on both grounds */
.choice span,.chip span{border-radius:2px}
.chip span{border-radius:999px}
.choice input:checked+span{
  border-color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent-ink) 10%,var(--bg));
  box-shadow:inset 0 0 0 1px var(--accent-ink);
}
.chip input:checked+span{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;box-shadow:none}
.on-dark .chip input:checked+span,.on-dark .choice input:checked+span{color:var(--ink);background:var(--accent-soft);border-color:var(--accent-soft)}

/* The referral step deserves visual weight — it is the highest-signal field */
.referral{
  border:1px solid var(--accent-ink);
  padding:clamp(1.1rem,3vw,1.6rem);
  background:color-mix(in srgb,var(--accent-ink) 6%,transparent);
  margin-bottom:var(--s-md);
}
.referral p{font-size:var(--step--1);color:var(--fg-muted);margin-bottom:var(--s-sm)}

/* Friction, stated. Not a warning — a standard. */
.gate{
  margin-top:var(--s-md);padding:1rem 1.15rem;
  border-left:2px solid var(--accent-ink);
  background:color-mix(in srgb,var(--accent-ink) 7%,transparent);
  font-size:var(--step--1);color:var(--fg-muted);line-height:1.6;
}

.apply__steps{
  display:grid;gap:var(--s-lg);margin-top:var(--s-2xl);
  border-top:1px solid var(--hairline);padding-top:var(--s-lg);
}
@media (min-width:760px){.apply__steps{grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}}
.apply__steps h4{font-size:var(--step-1);font-weight:300;margin-bottom:.4em}
.apply__steps p{font-size:var(--step--1);color:var(--fg-muted)}
.apply__steps > div{position:relative;padding-top:var(--s-md);border-top:1px solid var(--hairline)}
.apply__steps i{
  font-style:normal;position:absolute;top:calc(var(--s-md) * -.1);right:0;
  font-size:var(--step--2);letter-spacing:.2em;color:var(--accent-ink);
}

/* ---------- DISCRETION --------------------------------------------------- */
.discretion{position:relative;overflow:hidden}
.discretion__grid{display:grid;gap:var(--s-xl)}
@media (min-width:900px){.discretion__grid{grid-template-columns:repeat(3,1fr)}}
.discretion__grid h3{font-size:var(--step-1);font-weight:400;margin-bottom:.55em}
.discretion__grid p{font-size:var(--step--1);color:var(--fg-muted)}
.discretion__grid > div{padding-top:var(--s-md);border-top:1px solid var(--hairline)}

/* ---------- CONTACT ------------------------------------------------------ */
.contact__grid{display:grid;gap:var(--s-xl)}
@media (min-width:820px){.contact__grid{grid-template-columns:1.2fr 1fr 1fr}}
.contact__grid h3{font-size:var(--step--2);letter-spacing:.24em;text-transform:uppercase;color:var(--accent-soft);font-family:var(--font-body);font-weight:400;margin-bottom:var(--s-sm)}
.contact__grid p,.contact__grid a{font-size:var(--step-0);color:var(--fg-muted);text-decoration:none}
.contact__grid a:hover{color:var(--paper)}

/* ---------- FAQ ---------------------------------------------------------- */
.acc__btn{font-weight:300;font-size:var(--step-2)}
.acc__panel p{font-size:var(--step--1);line-height:1.75}

/* ---------- FOOTER ------------------------------------------------------- */
.footer h5{letter-spacing:.24em;font-weight:400;color:var(--accent-soft)}
.footer a{color:var(--muted-dark)}
.footer a:hover{color:var(--paper)}
.disclaimer{
  margin-top:var(--s-2xl);padding-top:var(--s-lg);
  border-top:1px solid var(--hairline);
}
.disclaimer h5{margin-bottom:var(--s-sm)}
.disclaimer p{
  font-size:var(--step--2);line-height:1.75;
  color:var(--muted-dark);max-width:96ch;
}
.disclaimer p+p{margin-top:.9em}

/* ---------- PWA INSTALLER — extremely understated ----------------------- */
.installer{
  border-radius:2px;background:var(--ink-2);border-color:var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.installer strong{font-weight:400}
.installer .btn{padding:.7em 1.2em;font-size:var(--step--2)}
.installer svg.ico{border-radius:2px}

/* ---------- MOTION / DENSITY -------------------------------------------- */
[data-reveal]{transform:translateY(18px)}

@media (max-width:900px){
  .hero{min-height:auto;padding-top:calc(var(--header-h) + var(--s-2xl))}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(2.4rem,9vw,3.2rem)}
  .eyebrow{letter-spacing:.24em}
}