/* ══════════════════════════════════════════════════
   ZILLIONCOSMOS DESIGN SYSTEM
   Shared spine across all properties.
   Light = institutional. Dark = place.
   ══════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}

/* ── TOKENS ── */
:root{
  /* Light surface */
  --paper:#F7F5F0;
  --paper-2:#EFECE4;
  --paper-3:#E6E2D8;
  --white:#FFFFFF;

  /* Dark surface */
  --ink:#0B0B10;
  --ink-2:#14141B;
  --ink-3:#1E1E27;

  /* Type */
  --fg:#0B0B10;
  --fg-2:#5C5C6B;
  --fg-3:#8B8B99;
  --fg-inv:#F7F5F0;
  --fg-inv-2:rgba(247,245,240,0.58);
  --fg-inv-3:rgba(247,245,240,0.34);

  /* Accent — project overridable */
  --accent:#A8850B;
  --accent-2:#C9A227;
  --accent-soft:rgba(168,133,11,0.10);

  /* Semantic */
  --ok:#3E7C55;
  --warn:#C98F2E;
  --stop:#C25048;

  /* Lines */
  --line:rgba(11,11,16,0.10);
  --line-2:rgba(11,11,16,0.06);
  --line-inv:rgba(247,245,240,0.12);
  --line-inv-2:rgba(247,245,240,0.06);

  /* Type scale */
  --step--1:clamp(0.78rem,0.76rem + 0.1vw,0.84rem);
  --step-0:clamp(0.92rem,0.89rem + 0.14vw,1rem);
  --step-1:clamp(1.1rem,1.02rem + 0.4vw,1.35rem);
  --step-2:clamp(1.4rem,1.22rem + 0.9vw,2rem);
  --step-3:clamp(1.9rem,1.5rem + 1.9vw,3rem);
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.4rem);
  --step-5:clamp(3rem,1.9rem + 5.4vw,6.6rem);

  /* Space */
  --sp-1:0.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;  --sp-8:9rem;

  --shell:1340px;
  --gutter:clamp(1.25rem,4vw,4rem);

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
}

/* ── BASE ── */
body{
  background:var(--paper);
  color:var(--fg);
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:300;
  font-size:var(--step-0);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
::selection{background:var(--accent-2);color:#000}

/* Dark-surface scope */
.on-dark{background:var(--ink);color:var(--fg-inv)}
.on-dark .t-h,.on-dark h1,.on-dark h2,.on-dark h3{color:var(--fg-inv)}
.on-dark .t-lede,.on-dark .t-body{color:var(--fg-inv-2)}
.on-dark .rule{background:var(--line-inv)}

/* ── TYPE ── */
.t-h{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-0.022em;
  color:var(--fg);
}
.t-h em{font-style:italic;color:var(--accent)}
.on-dark .t-h em{color:var(--accent-2)}

h1{font-size:var(--step-5)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}

.t-eyebrow{
  font-size:0.66rem;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
}
.on-dark .t-eyebrow{color:var(--accent-2)}

.t-lede{
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:var(--step-1);
  line-height:1.6;
  color:var(--fg-2);
  font-weight:400;
}
.t-body{color:var(--fg-2);line-height:1.75}
.t-small{font-size:var(--step--1);color:var(--fg-3)}
.t-num{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  line-height:1;
}
.t-mono{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:0.78rem;
  letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
}

/* ── LAYOUT ── */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell-narrow{max-width:900px;margin-inline:auto;padding-inline:var(--gutter)}
.shell-text{max-width:660px;margin-inline:auto;padding-inline:var(--gutter)}
.sect{padding-block:clamp(4.5rem,9vw,9rem)}
.sect-sm{padding-block:clamp(3.5rem,6vw,6rem)}
.rule{height:1px;background:var(--line);border:0}
.stack>*+*{margin-top:var(--sp-3)}

/* Section head */
.shead{max-width:640px;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.shead.center{margin-inline:auto;text-align:center}
.shead .t-eyebrow{margin-bottom:var(--sp-2)}
.shead h2{margin-bottom:var(--sp-3)}
.shead p{color:var(--fg-2);font-size:var(--step-0);line-height:1.75}
.on-dark .shead p{color:var(--fg-inv-2)}

/* ── GRID FRAME (hairline card grid) ── */
.frame{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.on-dark .frame{background:var(--line-inv-2);border-color:var(--line-inv-2)}
.frame > *{background:var(--paper);padding:clamp(1.75rem,3.2vw,3rem)}
.on-dark .frame > *{background:var(--ink)}
.frame.on-white > *{background:var(--white)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr}
}

/* Card hover: top hairline sweep */
.card-sweep{position:relative;overflow:hidden;transition:background .4s var(--ease)}
.card-sweep::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--accent-2);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.card-sweep:hover{background:var(--paper-2)}
.on-dark .card-sweep:hover{background:var(--ink-2)}
.card-sweep:hover::before{transform:none}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.6em;
  font-size:0.72rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:1.05em 2.2em;
  position:relative;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease);
  text-align:center;
}
.btn > *{position:relative;z-index:1}
.btn::after{
  content:'';position:absolute;inset:0;z-index:0;
  transform:translateX(-101%);
  transition:transform .45s var(--ease);
}
.btn:hover::after{transform:none}

.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid::after{background:var(--accent)}
.btn-solid:hover{color:#000}

.btn-line{border:1px solid var(--line);color:var(--fg)}
.btn-line::after{background:var(--fg)}
.btn-line:hover{color:var(--paper);border-color:var(--fg)}

.on-dark .btn-solid,.btn-solid-inv{background:var(--paper);color:var(--ink)}
.on-dark .btn-solid::after,.btn-solid-inv::after{background:var(--accent-2)}
.on-dark .btn-solid:hover,.btn-solid-inv:hover{color:#000}

.on-dark .btn-line,.btn-line-inv{border:1px solid var(--line-inv);color:var(--fg-inv-2)}
.on-dark .btn-line::after,.btn-line-inv::after{background:transparent}
.on-dark .btn-line:hover,.btn-line-inv:hover{border-color:var(--accent-2);color:var(--accent-2)}

.btn-wa{background:#25D366;color:#04310F}
.btn-wa::after{background:#1FBE5A}
.btn-wa:hover{color:#04310F}
.btn-block{width:100%}

/* ── NAV ── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;
  padding-block:1.35rem;
  transition:padding .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  padding-block:0.8rem;
  background:rgba(247,245,240,0.9);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom-color:var(--line);
}
.nav-dark.stuck{background:rgba(11,11,16,0.9);border-bottom-color:var(--line-inv-2)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.nav-links{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav-links a{
  font-size:0.78rem;color:var(--fg-2);position:relative;
  transition:color .3s;white-space:nowrap;
}
.nav-dark .nav-links a{color:var(--fg-inv-2)}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover{color:var(--fg)}
.nav-dark .nav-links a:hover{color:var(--fg-inv)}
.nav-links a:hover::after{transform:none}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:6px}
.nav-burger i{display:block;width:20px;height:1px;background:var(--fg);transition:.3s}
.nav-dark .nav-burger i{background:var(--fg-inv)}
@media(max-width:900px){
  .nav-links,.nav .btn{display:none}
  .nav-burger{display:flex}
}

/* Wordmark */
.mark{display:flex;align-items:center;gap:0.55rem;flex-shrink:0}
.mark-gem{
  width:22px;height:22px;flex-shrink:0;
  background:var(--fg);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  position:relative;
}
.nav-dark .mark-gem,.on-dark .mark-gem{background:var(--fg-inv)}
.mark-gem::after{
  content:'';position:absolute;inset:26%;
  background:var(--accent-2);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.mark-text{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.05rem;letter-spacing:0.005em;color:var(--fg);
  white-space:nowrap;
}
.nav-dark .mark-text,.on-dark .mark-text{color:var(--fg-inv)}
.mark-sub{
  font-size:0.56rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--fg-3);margin-left:0.4rem;
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:1000;
  background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--gutter);gap:0.35rem;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  overflow-y:auto;
}
.drawer.open{transform:none}
.drawer a{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.6rem,7vw,2.4rem);
  color:var(--fg-2);line-height:1.5;transition:color .25s;
}
.drawer a:hover{color:var(--fg)}
.drawer-x{
  position:absolute;top:1.5rem;right:var(--gutter);
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3);
}
.drawer-foot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}

/* ── STAT ROW ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line)}
.on-dark .stats{background:var(--line-inv-2)}
.stat{background:var(--paper);padding:clamp(1.5rem,3vw,2.75rem)}
.on-dark .stat{background:var(--ink)}
.stat-v{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;margin-bottom:0.4rem;font-variant-numeric:tabular-nums}
.stat-v sup{font-size:0.45em;vertical-align:super;color:var(--accent)}
.stat-l{font-size:0.7rem;color:var(--fg-3);letter-spacing:0.05em;line-height:1.5}
.on-dark .stat-l{color:var(--fg-inv-3)}

/* ── TICKER ── */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:0.85rem;background:var(--paper-2)}
.on-dark .ticker{border-color:var(--line-inv-2);background:var(--ink-2)}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-i{
  display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.6rem;
  font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-3);
  white-space:nowrap;
}
.on-dark .ticker-i{color:var(--fg-inv-3)}
.ticker-i b{font-weight:500;color:var(--fg-2)}
.on-dark .ticker-i b{color:var(--fg-inv-2)}
.ticker-i::after{content:'';width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:.5}

/* ── FORMS ── */
.field{margin-bottom:1rem}
.field label{
  display:block;font-size:0.66rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:0.45rem;
}
.on-dark .field label{color:var(--fg-inv-3)}
.field input,.field select,.field textarea{
  width:100%;padding:0.85rem 1rem;
  background:var(--white);
  border:1px solid var(--line);
  font-size:0.9rem;font-weight:300;
  transition:border-color .3s;
  border-radius:0;
  appearance:none;
}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  background:var(--ink-2);border-color:var(--line-inv);color:var(--fg-inv);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.form-note{font-size:0.7rem;color:var(--fg-3);margin-top:0.75rem;line-height:1.6}

/* ── ACCORDION ── */
.acc-i{border-bottom:1px solid var(--line)}
.on-dark .acc-i{border-color:var(--line-inv-2)}
.acc-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;text-align:left;
  font-family:'Playfair Display',Georgia,serif;font-size:1.02rem;color:var(--fg);
  transition:color .3s;
}
.on-dark .acc-q{color:var(--fg-inv)}
.acc-q:hover{color:var(--accent)}
.acc-q i{
  font-style:normal;flex-shrink:0;font-size:1.1rem;color:var(--accent);
  transition:transform .4s var(--ease);
}
.acc-i.open .acc-q i{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc-a p{padding-bottom:1.35rem;color:var(--fg-2);font-size:0.88rem;line-height:1.8;max-width:62ch}
.on-dark .acc-a p{color:var(--fg-inv-2)}

/* ── FOOTER ── */
.foot{background:var(--ink-2);color:var(--fg-inv);padding-block:clamp(3.5rem,6vw,5.5rem) 2.5rem}
.foot-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:clamp(2rem,4vw,4rem);margin-bottom:3.5rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-blurb{font-size:0.82rem;color:var(--fg-inv-3);line-height:1.75;max-width:34ch;margin-top:1rem}
.foot-h{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:1.1rem}
.foot-l{display:flex;flex-direction:column;gap:0.7rem}
.foot-l a{font-size:0.82rem;color:var(--fg-inv-3);transition:color .3s}
.foot-l a:hover{color:var(--fg-inv)}
.foot-btm{
  border-top:1px solid var(--line-inv-2);padding-top:2rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.foot-btm small{font-size:0.7rem;color:rgba(247,245,240,0.22)}

/* ── FLOATING ── */
.wa{
  position:fixed;right:clamp(1rem,3vw,2.25rem);bottom:clamp(1rem,3vw,2.25rem);z-index:800;
  width:52px;height:52px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;
  box-shadow:0 6px 26px rgba(37,211,102,.34);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:24px;height:24px;fill:#fff}
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:790;
  display:none;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.dock a{
  flex:1;background:var(--paper);padding:0.95rem 0.5rem;text-align:center;
  font-size:0.68rem;letter-spacing:0.09em;text-transform:uppercase;
}
.dock a.primary{background:var(--ink);color:var(--paper)}
@media(max-width:760px){
  .dock{display:flex}
  .wa{bottom:4.6rem}
  body{padding-bottom:3.4rem}
}

/* ── REVEAL ── */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv="l"]{transform:translateX(-22px)}
[data-rv="r"]{transform:translateX(22px)}
[data-rv="s"]{transform:scale(.975)}
[data-rv].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.07s}[data-d="2"]{transition-delay:.14s}
[data-d="3"]{transition-delay:.21s}[data-d="4"]{transition-delay:.28s}
[data-d="5"]{transition-delay:.35s}[data-d="6"]{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ── GRAIN ── */
.grain::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* ── UTIL ── */
.u-center{text-align:center}
.u-mt1{margin-top:var(--sp-2)}.u-mt2{margin-top:var(--sp-3)}
.u-mt3{margin-top:var(--sp-4)}.u-mt4{margin-top:var(--sp-5)}
.u-row{display:flex;gap:0.75rem;flex-wrap:wrap}
.u-row-c{display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center}
.u-hide{display:none}
.pill{
  display:inline-flex;align-items:center;gap:0.45rem;
  padding:0.4rem 0.9rem;border:1px solid var(--line);
  font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);
}
.on-dark .pill{border-color:var(--line-inv);color:var(--fg-inv-3)}
.pill-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.pill-ok .pill-dot{background:var(--ok)}
.pill-warn .pill-dot{background:var(--warn)}
.pill-stop .pill-dot{background:var(--stop)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:9999;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}