/* ============================================================
   House of Verity — Website styles (built on the design tokens)
   Light, old-money, classical. Stone canvas · espresso & forest-green
   bands · bronze highlights · serif display.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--hv-green-700); color: var(--hv-cream); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0; }
p { margin: 0; }

/* —— Layout helpers —— */
.hv-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hv-narrow { max-width: var(--container-narrow); }
.hv-section { padding-block: var(--section-y); position: relative; }
.hv-section--alt    { background: var(--surface-alt); }
.hv-section--raised { background: var(--surface-raised); }
.hv-section--warm   { background: linear-gradient(168deg, var(--hv-espresso-700), var(--hv-espresso-900)); color: var(--text-on-dark); }
.hv-section--feature{ background: linear-gradient(165deg, var(--hv-green-800), var(--hv-green-900) 75%); color: var(--text-on-dark); }
/* On dark bands, headings & strong text go cream */
.hv-section--warm h1, .hv-section--warm h2, .hv-section--warm h3, .hv-section--warm h4,
.hv-section--feature h1, .hv-section--feature h2, .hv-section--feature h3, .hv-section--feature h4 { color: var(--text-on-dark); }
.hv-divider { height:1px; background: var(--border-hair); border:0; margin:0; }

/* —— Eyebrow / labels —— */
.hv-eyebrow {
  display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--font-ui); font-weight: var(--fw-med);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--accent-2);
}
.hv-eyebrow::before { content:""; width: 26px; height:1px; background: var(--hv-bronze-line); display:inline-block; }
.hv-section--warm .hv-eyebrow, .hv-section--feature .hv-eyebrow { color: var(--accent-2-soft); }

/* —— Headings —— */
.hv-h1 { font-size: var(--fs-h1); }
.hv-h2 { font-size: var(--fs-h2); }
.hv-h3 { font-size: var(--fs-h3); }
.hv-accent { color: var(--accent); }
.hv-accent-italic { font-style: italic; color: var(--accent); font-weight: var(--fw-semi); }
.hv-section--warm .hv-accent-italic, .hv-section--feature .hv-accent-italic { color: var(--accent-2-soft); }
.hv-lead { font-size: var(--fs-lead); color: var(--text-soft); line-height: 1.6; max-width: 60ch; text-wrap: pretty; }
.hv-section--warm .hv-lead, .hv-section--feature .hv-lead { color: var(--text-on-dark-soft); }
.hv-body-soft { color: var(--text-soft); text-wrap: pretty; }
.hv-section--warm .hv-body-soft, .hv-section--feature .hv-body-soft { color: var(--text-on-dark-soft); }

/* ============================================================
   Buttons
   ============================================================ */
.hv-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--font-ui); font-weight: var(--fw-med);
  font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 1em 2em; border-radius: var(--r-pill);
  border: 1px solid transparent; background: var(--accent); color: var(--on-accent);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), color var(--dur);
  box-shadow: var(--shadow-accent); white-space: nowrap;
}
.hv-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.hv-btn:active { transform: translateY(0) scale(.985); }
.hv-btn--ghost {
  background: transparent; color: var(--text-body);
  border-color: var(--border-card); box-shadow: none;
}
.hv-btn--ghost:hover { background: rgba(61,85,68,0.07); border-color: var(--hv-green-line); color: var(--accent); }
.hv-btn--lg { font-size: 1rem; padding: 1.1em 2.4em; }
.hv-btn--sm { font-size: .82rem; padding: .75em 1.5em; }
.hv-btn-row { display:flex; flex-wrap:wrap; gap: var(--sp-4); align-items:center; }
/* Buttons on dark bands */
.hv-section--warm .hv-btn--ghost, .hv-section--feature .hv-btn--ghost { color: var(--text-on-dark); border-color: var(--hv-line-cream); }
.hv-section--warm .hv-btn--ghost:hover, .hv-section--feature .hv-btn--ghost:hover { background: rgba(245,241,232,0.08); color: var(--text-on-dark); border-color: var(--accent-2-soft); }

/* ============================================================
   Header (sticky)
   ============================================================ */
.hv-header {
  position: sticky; top: 0; z-index: 80;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-5);
  padding: .85rem var(--gutter);
  background: color-mix(in srgb, var(--hv-stone-100) 82%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-bottom: 1px solid var(--border-hair);
}
.hv-brand { display:inline-flex; align-items:center; gap:.7rem; }
.hv-brand__mark {
  width: 40px; height: 40px; flex:none;
  object-fit: contain;
}
.hv-brand__name { font-family: var(--font-serif); font-weight: 600;
  font-size: 1.28rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-body); padding-left:.15em; }
.hv-nav { display:flex; align-items:center; gap: clamp(.5rem, 1.6vw, 1.7rem); }
.hv-nav a, .hv-nav button {
  font-family: var(--font-ui); font-weight: var(--fw-reg); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-soft); background:none; border:0; padding:.4em 0; position:relative;
  transition: color var(--dur-fast) var(--ease-soft);
}
.hv-nav a::after, .hv-nav button::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur) var(--ease-out);
}
.hv-nav a:hover, .hv-nav button:hover { color: var(--text-body); }
.hv-nav a:hover::after, .hv-nav button:hover::after,
.hv-nav a[aria-current="page"]::after { transform: scaleX(1); }
.hv-nav a[aria-current="page"] { color: var(--text-body); }
.hv-nav .hv-nav__cta { color: var(--accent); font-weight: var(--fw-med); }
.hv-burger { display:none; background:none; border:0; color: var(--text-body); padding:.3rem; cursor:pointer; }
.hv-burger svg { width: 28px; height: 28px; }
/* Mobile menu: lives at <body> root so nothing can stack over it */
.hv-menu { display:none; }

@media (max-width: 900px) {
  .hv-nav { display:none; }              /* hide desktop link row */
  .hv-burger { display:block; }
  .hv-menu {
    display:block; position:fixed; inset:0; z-index:1000;
    visibility:hidden; opacity:0; pointer-events:none;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
  }
  .hv-menu.is-open { visibility:visible; opacity:1; pointer-events:auto; }
  .hv-menu__scrim { position:absolute; inset:0; background: rgba(26,18,12,.5); }
  .hv-menu__panel {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1.5rem;
    padding:4.5rem var(--gutter) 2.5rem; background: var(--hv-stone-50);
    overflow-y:auto; transform: scale(.985);
    transition: transform var(--dur) var(--ease-out);
  }
  .hv-menu.is-open .hv-menu__panel { transform: scale(1); }
  .hv-menu__close {
    position:absolute; top:1.3rem; right:1.3rem; width:44px; height:44px;
    display:grid; place-items:center; background:none; border:0;
    color: var(--text-body); cursor:pointer; padding:0;
  }
  .hv-menu__close svg { width:26px; height:26px; }
  .hv-menu__home { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; margin-bottom:.4rem; }
  .hv-menu__home img { width:46px; height:46px; object-fit:contain; }
  .hv-menu__home span { font-family: var(--font-serif); font-weight:600; font-size:1.05rem;
    letter-spacing:.2em; text-transform:uppercase; color: var(--text-body); }
  .hv-menu__links { display:flex; flex-direction:column; align-items:center; gap:1.3rem; }
  .hv-menu__links a {
    font-family: var(--font-ui); font-size:1.2rem; letter-spacing:.1em;
    text-transform:uppercase; color: var(--text-soft); text-decoration:none;
  }
  .hv-menu__links a[aria-current="page"] { color: var(--text-body); }
  .hv-menu .hv-btn { margin-top:.4rem; }
  .hv-brand__name { font-size: 1rem; letter-spacing:.16em; }
}

/* ============================================================
   Footer (espresso band)
   ============================================================ */
.hv-footer { background: linear-gradient(180deg, var(--hv-espresso-800), var(--hv-espresso-900)); color: var(--text-on-dark);
  border-top:1px solid var(--hv-bronze-line);
  padding-block: var(--sp-9) var(--sp-6); text-align:center; }
.hv-footer__mark {
  width: auto; max-width: 170px; max-height: 190px; margin: 0 auto var(--sp-4);
  object-fit: contain; border-radius: 10px;
}
.hv-footer__name { font-family: var(--font-serif); font-size: 1.6rem; letter-spacing:.32em;
  text-transform:uppercase; color: var(--text-on-dark); margin-bottom:.5rem; }
.hv-footer__tag { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem;
  color: var(--accent-2-soft); margin-bottom: var(--sp-6); }
.hv-social { display:flex; justify-content:center; gap: var(--sp-5); flex-wrap:wrap; margin-bottom: var(--sp-6); }
.hv-social a { display:inline-flex; align-items:center; gap:.5rem; color: var(--text-on-dark-soft);
  font-family: var(--font-ui); font-size: var(--fs-small); letter-spacing:.04em; transition: color var(--dur-fast); }
.hv-social a:hover { color: var(--accent-2-soft); }
.hv-social svg { width: 20px; height:20px; }
.hv-footer__copy { color: var(--hv-cream-mute); font-size: .82rem; letter-spacing:.04em; font-family: var(--font-ui); }
.hv-footer__nav { display:flex; justify-content:center; flex-wrap:wrap; gap: var(--sp-5);
  margin-bottom: var(--sp-6); }
.hv-footer__nav a { color: var(--text-on-dark-soft); font-family: var(--font-ui); font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; }
.hv-footer__nav a:hover { color: var(--accent-2-soft); }

/* ============================================================
   Discovery-call modal
   ============================================================ */
.hv-modal { position: fixed; inset:0; z-index:120; display:none; }
.hv-modal.is-open { display:block; }
.hv-modal__scrim { position:absolute; inset:0; background: var(--hv-overlay);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity:0;
  transition: opacity var(--dur) var(--ease-soft); }
.hv-modal.is-open .hv-modal__scrim { opacity:1; }
.hv-modal__dialog {
  position: relative; max-width: 580px; width: calc(100% - 2rem);
  margin: 5vh auto; max-height: 90vh; overflow-y:auto;
  background: var(--surface-card);
  border:1px solid var(--border-card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.6rem, 4vw, 2.6rem);
  transform: translateY(18px) scale(.98); opacity:0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-soft);
}
.hv-modal.is-open .hv-modal__dialog { transform:none; opacity:1; }
.hv-modal__close { position:absolute; top:1rem; right:1rem; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--border-card); background:transparent; color: var(--text-soft);
  display:grid; place-items:center; transition: all var(--dur-fast); }
.hv-modal__close:hover { background: var(--hv-stone-200); color: var(--text-body); }
.hv-modal__close svg { width:18px; height:18px; }
.hv-modal__eyebrow { margin-bottom:.7rem; }
.hv-modal__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom:.4rem; }
.hv-modal__sub { color: var(--text-soft); font-size: var(--fs-small); margin-bottom: var(--sp-5); }

.hv-form { display:grid; gap: var(--sp-4); }
.hv-field { display:grid; gap:.4rem; }
.hv-field--row { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width:480px){ .hv-field--row { grid-template-columns:1fr; } }
.hv-label { font-family: var(--font-ui); font-weight: var(--fw-med); font-size: .72rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--text-soft); }
.hv-input, .hv-select, .hv-textarea {
  width:100%; font-family: var(--font-body); font-size: 1rem; color: var(--text-body);
  background: var(--hv-stone-50); border:1px solid var(--border-card); border-radius: var(--r-sm);
  padding:.8em 1em; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.hv-input::placeholder, .hv-textarea::placeholder { color: var(--text-faint); }
.hv-input:focus, .hv-select:focus, .hv-textarea:focus { outline:none; border-color: var(--accent); box-shadow: var(--ring-accent); }
.hv-select { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233d5544' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-right:2.5em; }
.hv-textarea { resize:vertical; min-height: 110px; }
.hv-form .hv-btn { width:100%; margin-top:.4rem; }
.hv-form__note { font-size:.8rem; color: var(--text-faint); text-align:center; font-family: var(--font-ui); }
.hv-form__success { text-align:center; padding: var(--sp-5) 0; }
.hv-form__success .hv-check { width:64px; height:64px; border-radius:50%; margin:0 auto var(--sp-4);
  display:grid; place-items:center; background: rgba(61,85,68,.12); color: var(--accent); }
.hv-form__success .hv-check svg { width:32px; height:32px; }

body.hv-noscroll { overflow:hidden; }

/* ============================================================
   Reveal-on-scroll  (progressive enhancement: hidden ONLY when
   <html> has .hv-js, so content is never stuck if JS fails)
   ============================================================ */
.hv-js .hv-reveal { opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.hv-js .hv-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .hv-js .hv-reveal { opacity:1; transform:none; transition:none; } }

/* ============================================================
   Mobile sizing — buttons, tap targets, type
   Keeps CTAs from overflowing and gives finger-friendly targets.
   ============================================================ */
@media (max-width: 600px) {
  /* Buttons: tighter padding, lighter tracking so labels fit one line */
  .hv-btn { font-size: .86rem; letter-spacing: .05em; padding: .95em 1.4em; }
  .hv-btn--lg { font-size: .9rem; padding: 1.05em 1.5em; }
  .hv-btn--sm { font-size: .76rem; padding: .7em 1.2em; }
  /* Full-width CTAs on mobile = comfortable ≥48px tap targets */
  .hv-btn-row { width: 100%; }
  .hv-btn-row .hv-btn { flex: 1 1 100%; width: 100%; min-width: 0; }
  /* Hero audience buttons stack full width */
  .hv-hero__paths { width: 100%; flex-direction: column; }
  .hv-hero__paths .hv-btn { min-width: 0 !important; width: 100%; }
  /* Header CTA stays inline-sized (it lives in the drawer on mobile) */
  .hv-nav .hv-nav__cta { width: auto; flex: none; }
  /* Slightly tighter leading on big display type */
  .hv-lead { font-size: 1.05rem; }
}
@media (max-width: 380px) {
  .hv-btn { letter-spacing: .03em; }
  .hv-brand__name { font-size: .9rem; letter-spacing: .12em; }
}