/* =========================================================================
   EverHome + Live, by EverHome — Brand Book
   The stylesheet IS the system: tokens, depth, gradient/glow, spring motion.
   ========================================================================= */

:root {
  /* Brand colorways */
  --eh-green: #2C6E47;
  --eh-green-deep: #1F5237;
  --eh-green-bright: #348458;
  --eh-green-darkest: #235C3C;

  --eh-navy: #1B3A5C;
  --eh-navy-deep: #15314C;
  --eh-navy-mid: #34527A;
  --eh-navy-bright: #3C5C82;
  --eh-navy-darkest: #16304B;

  /* Shared neutrals */
  --eh-cool-gray: #C4CDD6;
  --eh-cool-gray-2: #A4B1BF;
  --eh-cream: #FFFCF8;
  --eh-white: #FFFFFF;
  --eh-gold: #C5A55A;       /* Live accent only */

  /* Heritage homage */
  --eh-heritage-green: #3C9361;
  --eh-heritage-sage: #9EC9AF;

  /* Ink */
  --ink: var(--eh-navy);
  --ink-soft: #3a5573;
  --ink-mute: var(--eh-cool-gray-2);
  --hairline: rgba(27, 58, 92, 0.10);
  --hairline-soft: rgba(27, 58, 92, 0.06);

  /* Type */
  --font-display: "Mulish", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  /* Radii */
  --r-sm: 4px; --r-md: 8px; --r-card: 12px; --r-lg: 16px; --r-card-lg: 20px; --r-pill: 999px;

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Depth (navy-tinted, layered) */
  --shadow-sm: 0 2px 8px -2px rgba(27,58,92,.10), 0 1px 3px rgba(27,58,92,.06);
  --shadow-md: 0 12px 28px -8px rgba(27,58,92,.16), 0 4px 10px -2px rgba(27,58,92,.08);
  --shadow-lg: 0 28px 60px -16px rgba(27,58,92,.22), 0 8px 20px -6px rgba(27,58,92,.10);
  --glow-green: 0 6px 16px -6px rgba(44,110,71,.55);

  /* Motion */
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --spring: cubic-bezier(0.34,1.28,0.64,1);

  --maxw: 1200px;
  --nav-w: 264px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--eh-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--s4); max-width: 68ch; }
a { color: var(--eh-green); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em; }
:focus-visible { outline: 2px solid var(--eh-green); outline-offset: 3px; border-radius: 3px; }

/* ----------------------------------------------------------------- layout */
.layout { display: grid; grid-template-columns: var(--nav-w) 1fr; }

/* sidebar nav */
.sidenav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(27,58,92,0.025), transparent 220px), var(--eh-cream);
  padding: var(--s6) var(--s4) var(--s7) var(--s6);
}
.sidenav .brandmark { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); }
.sidenav .brandmark img { height: 34px; width: auto; }
.sidenav .kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: var(--s6); }
.nav-group { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--eh-green); font-weight: 700; margin: var(--s5) 0 var(--s2); }
.sidenav a { display: block; color: var(--ink-soft); font-size: 0.95rem; padding: 5px 10px; border-radius: var(--r-md); border-left: 2px solid transparent; transition: background .18s var(--ease), color .18s var(--ease); }
.sidenav a:hover { background: rgba(27,58,92,0.05); text-decoration: none; color: var(--ink); }
.sidenav a.active { color: var(--eh-green-deep); background: rgba(44,110,71,0.09); border-left-color: var(--eh-green); font-weight: 600; }

/* main */
main { min-width: 0; }
.section { max-width: var(--maxw); margin: 0 auto; padding: var(--s9) var(--s7); border-top: 1px solid var(--hairline-soft); }
.section:first-child { border-top: none; }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidenav { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--hairline); }
  .section { padding: var(--s7) var(--s5); }
}

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eh-green); margin-bottom: var(--s3); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--eh-green); border-radius: 2px; }
.lead { font-size: 1.22rem; color: var(--ink-soft); max-width: 64ch; }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  color: var(--eh-cream);
  background: var(--eh-navy-deep);
  padding: clamp(72px, 11vw, 150px) var(--s7) clamp(64px, 9vw, 120px);
}
.hero::before { /* gradient mesh */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 12% 8%, rgba(44,110,71,0.55), transparent 60%),
    radial-gradient(55% 70% at 92% 18%, rgba(60,92,130,0.65), transparent 62%),
    radial-gradient(45% 60% at 78% 96%, rgba(197,165,90,0.22), transparent 60%),
    radial-gradient(70% 90% at 50% 110%, rgba(31,82,55,0.6), transparent 70%);
}
.hero::after { /* subtle grain */
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.4; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.hero h1 { color: var(--eh-white); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; max-width: 16ch; }
.hero .lead { color: rgba(255,252,248,0.82); font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: var(--s5); max-width: 56ch; }
.hero .eyebrow { color: var(--eh-cool-gray); }
.hero .eyebrow::before { background: var(--eh-gold); }
.hero-marks { display: flex; align-items: center; gap: var(--s6); margin-bottom: var(--s7); flex-wrap: wrap; }
.hero-marks img { height: 56px; width: auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.35)); }
.hero-marks .divider { width: 1px; height: 44px; background: rgba(255,255,255,0.2); }
.hero-meta { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,0.14); }
.hero-meta div { font-size: 0.92rem; color: rgba(255,252,248,0.7); }
.hero-meta strong { display: block; font-family: var(--font-display); color: var(--eh-white); font-size: 1.05rem; font-weight: 700; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; padding: 12px 22px; border-radius: var(--r-md); border: none; cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s var(--ease); text-decoration: none; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--eh-green-bright), var(--eh-green), var(--eh-green-deep)); box-shadow: var(--glow-green); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(44,110,71,.7); text-decoration: none; }
.btn-ghost { color: var(--eh-navy); background: transparent; border: 1.5px solid rgba(27,58,92,0.25); }
.btn-ghost:hover { border-color: var(--eh-navy); background: rgba(27,58,92,0.04); text-decoration: none; }
.btn-onnavy { color: var(--eh-navy-deep); background: var(--eh-cream); }
.btn-onnavy:hover { transform: translateY(-2px); text-decoration: none; }
.btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s5); }

/* ----------------------------------------------------------------- chips */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; padding: 4px 11px; border-radius: var(--r-pill); }
.badge-locked { color: var(--eh-green-deep); background: rgba(44,110,71,0.12); }
.badge-locked::before { content: "🔒"; font-size: 0.7em; }
.badge-draft { color: #8a6d1f; background: rgba(197,165,90,0.18); }
.badge-green { color: #fff; background: var(--eh-green); }
.badge-navy { color: #fff; background: var(--eh-navy); }
.badge-gold { color: #6b531a; background: var(--eh-gold); }

/* ------------------------------------------------------------------ grid */
.grid { display: grid; gap: var(--s5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ card */
.card { background: var(--eh-white); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--s5); box-shadow: var(--shadow-sm); transition: transform .25s var(--spring), box-shadow .25s var(--ease); }
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h4 { margin-bottom: var(--s2); }
.card p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 0; }
.card .num { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--eh-green); line-height: 1; }
.pillar-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(44,110,71,0.1); color: var(--eh-green-deep); margin-bottom: var(--s3); }
.pillar-icon svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ logo plates */
.logo-stage { display: grid; gap: var(--s5); }
.plate { border-radius: var(--r-card); padding: var(--s7) var(--s5); display: grid; place-items: center; min-height: 180px; border: 1px solid var(--hairline); position: relative; overflow: hidden; }
.plate img { max-width: 78%; max-height: 96px; width: auto; height: auto; }
.plate-light { background: var(--eh-cream); }
.plate-white { background: var(--eh-white); }
.plate-navy { background: var(--eh-navy-deep); border-color: transparent; }
.plate-green { background: var(--eh-green-deep); border-color: transparent; }
.plate-cap { font-size: 0.82rem; color: var(--ink-mute); margin-top: var(--s3); text-align: center; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; }
.plate-mesh::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 20% 10%, rgba(44,110,71,.5), transparent 60%), radial-gradient(55% 70% at 90% 90%, rgba(60,92,130,.55), transparent 62%); }
.plate-mesh img { position: relative; z-index: 1; }

/* clear-space / construction overlays */
.spec-wrap { background: var(--eh-white); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: var(--s7); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.clearbox { position: relative; padding: 48px; }
.clearbox::before { content:""; position:absolute; inset:0; border: 1.5px dashed var(--eh-cool-gray-2); border-radius: var(--r-md); }
.clearbox img { display: block; height: 90px; width: auto; position: relative; }
.clear-note { font-size: 0.85rem; color: var(--ink-soft); text-align:center; margin-top: var(--s4); }

/* ------------------------------------------------------------- swatches */
.swatch { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); background: #fff; cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s; }
.swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.swatch .chip { height: 96px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px; }
.swatch .meta { padding: 12px 14px; }
.swatch .name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.swatch .hex { font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; }
.swatch .use { font-size: 0.8rem; color: var(--ink-mute); margin-top: 2px; }
.swatch .copytag { font-size: 0.66rem; color: rgba(255,255,255,0.8); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.swatch:hover .copytag { opacity: 1; }
.swatch.on-dark .copytag { color: rgba(255,255,255,0.85); }
.swatch.on-light .copytag { color: rgba(27,58,92,0.6); }

.ramp { display: flex; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin: var(--s3) 0 var(--s5); }
.ramp span { flex: 1; height: 56px; display: flex; align-items: flex-end; padding: 6px; font-family: ui-monospace, monospace; font-size: 0.62rem; color: rgba(255,255,255,0.85); }

/* ------------------------------------------------------------- type spec */
.type-row { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline-soft); display: grid; grid-template-columns: 88px 1fr; gap: var(--s5); align-items: baseline; }
.type-row .tag { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--ink-mute); }
.type-row .demo { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.font-card { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.glyphs { font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 0.02em; color: var(--ink); }
.glyphs.body { font-family: var(--font-body); }

/* token block */
.tokens { background: var(--eh-navy-deep); color: #dfe7ef; border-radius: var(--r-card); padding: var(--s5) var(--s6); font-family: ui-monospace, Menlo, monospace; font-size: 0.84rem; line-height: 1.85; overflow-x: auto; position: relative; box-shadow: var(--shadow-md); }
.tokens .tk-prop { color: var(--eh-cool-gray); }
.tokens .tk-val { color: #8fd3ab; }
.tokens .tk-com { color: #6f86a0; font-style: italic; }
.copybtn { position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; transition: background .2s; }
.copybtn:hover { background: rgba(255,255,255,0.16); }

/* do / don't */
.dd { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--hairline); background: #fff; box-shadow: var(--shadow-sm); }
.dd .head { padding: 10px 16px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; display: flex; align-items: center; gap: 8px; }
.dd.do .head { background: rgba(44,110,71,0.12); color: var(--eh-green-deep); }
.dd.dont .head { background: rgba(170,60,60,0.1); color: #9c3535; }
.dd ul { margin: 0; padding: var(--s4) var(--s5) var(--s4) 34px; }
.dd li { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 6px; }

/* voice examples */
.vt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 640px){ .vt { grid-template-columns: 1fr; } }
.vt .col { border-radius: var(--r-card); padding: var(--s5); border: 1px solid var(--hairline); }
.vt .say { background: rgba(44,110,71,0.05); }
.vt .avoid { background: rgba(170,60,60,0.05); }
.vt .col h4 { margin-bottom: var(--s3); }
.vt .line { font-size: 0.98rem; padding: 8px 0; border-bottom: 1px dashed var(--hairline); }
.vt .line:last-child { border-bottom: none; }
.vt .say .line::before { content: "“ "; color: var(--eh-green); }
.vt .say .line::after { content: " ”"; color: var(--eh-green); }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: var(--s4) 0; }
.tbl th { text-align: left; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 14px; border-bottom: 2px solid var(--hairline); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink-soft); vertical-align: top; }
.tbl td:first-child { color: var(--ink); font-weight: 600; font-family: var(--font-display); }

/* dark band */
.band { position: relative; overflow: hidden; color: var(--eh-cream); border-radius: var(--r-lg); padding: var(--s8) var(--s7); margin: var(--s5) 0; }
.band-navy { background: var(--eh-navy-deep); }
.band-navy::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 15% 10%, rgba(44,110,71,.45), transparent 60%), radial-gradient(45% 55% at 90% 100%, rgba(197,165,90,.2), transparent 60%); }
.band > * { position: relative; z-index: 1; }
.band h3 { color: #fff; }
.band p { color: rgba(255,252,248,0.8); }

/* spacing / radius demo */
.scale-demo { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.scale-demo .unit { text-align: center; }
.scale-demo .bar { background: linear-gradient(180deg, var(--eh-green), var(--eh-green-deep)); border-radius: var(--r-sm); width: 30px; }
.scale-demo .lab { font-family: ui-monospace, monospace; font-size: 0.7rem; color: var(--ink-mute); margin-top: 6px; }
.radius-demo { display: flex; gap: var(--s4); flex-wrap: wrap; }
.radius-demo .box { width: 78px; height: 78px; background: rgba(27,58,92,0.07); border: 1.5px solid var(--eh-navy); display: grid; place-items: end center; padding-bottom: 6px; font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--ink-soft); }

/* icon grid */
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: var(--s3); }
.icons .ic { aspect-ratio: 1; border: 1px solid var(--hairline); border-radius: var(--r-card); display: grid; place-items: center; background: #fff; color: var(--eh-navy); transition: transform .2s var(--spring), color .2s; box-shadow: var(--shadow-sm); }
.icons .ic:hover { transform: translateY(-3px); color: var(--eh-green); }
.icons .ic svg { width: 26px; height: 26px; }

/* product list */
.prod { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) 0; border-bottom: 1px solid var(--hairline-soft); }
.prod .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; }
.prod h4 { margin-bottom: 2px; }
.prod p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--spring); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* footer */
footer { background: var(--eh-navy-deep); color: rgba(255,252,248,0.7); padding: var(--s8) var(--s7); }
footer .inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; align-items: center; }
footer img { height: 30px; }
footer a { color: var(--eh-cool-gray); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--eh-navy); color: #fff; padding: 10px 20px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--spring); z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.note { font-size: 0.9rem; color: var(--ink-mute); border-left: 3px solid var(--eh-cool-gray); padding-left: var(--s4); margin: var(--s4) 0; }
.flag { background: rgba(197,165,90,0.12); border-left: 3px solid var(--eh-gold); padding: var(--s3) var(--s4); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 0.92rem; color: #6b531a; margin: var(--s4) 0; }
.flag strong { color: #5a4514; }
hr.rule { border: none; border-top: 1px solid var(--hairline); margin: var(--s7) 0; }
.sub { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-display); font-weight: 700; margin: var(--s6) 0 var(--s3); }