/* ==========================================================================
   VT Regional Management — design tokens & components
   Art direction: deep navy + warm sand/cream + brick terracotta accent.
   Display: Zodiak (editorial serif). Body: Satoshi.
   ========================================================================== */

:root{
  /* Type scale */
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.0625rem);
  --text-lg:clamp(1.125rem,1rem + .6vw,1.4rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.4rem);
  --text-3xl:clamp(2.5rem,1.2rem + 3.6vw,4.4rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Radius / motion */
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1.125rem;--radius-full:9999px;
  --transition-interactive:200ms cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.16,1,.3,1);

  /* Widths */
  --content-narrow:660px;--content-default:960px;--content-wide:1220px;

  /* Fonts */
  --font-display:'Zodiak','Iowan Old Style',Georgia,serif;
  --font-body:'Satoshi','Helvetica Neue',system-ui,sans-serif;
}

:root,[data-theme='light']{
  --color-bg:#faf7f1;
  --color-surface:#fffdf9;
  --color-surface-2:#fffefc;
  --color-surface-offset:#f2ece1;
  --color-surface-offset-2:#eae2d4;
  --color-divider:#e5ddd0;
  --color-border:#dbd1c1;

  --color-ink:#101a2b;             /* deep navy — dark sections */
  --color-ink-2:#182640;
  --color-text:#182031;
  --color-text-muted:#5c6577;
  --color-text-faint:#98a0ad;
  --color-text-inverse:#f7f3ec;

  --color-primary:#a84526;         /* brick terracotta */
  --color-primary-hover:#8c3719;
  --color-primary-soft:#f4e6df;
  --color-brass:#9a7420;

  --shadow-sm:0 1px 2px oklch(.25 .02 60 / .07);
  --shadow-md:0 6px 20px oklch(.25 .02 60 / .09);
  --shadow-lg:0 18px 48px oklch(.25 .02 60 / .14);
}

[data-theme='dark']{
  --color-bg:#0f141d;
  --color-surface:#151b26;
  --color-surface-2:#19202c;
  --color-surface-offset:#1b2330;
  --color-surface-offset-2:#212a39;
  --color-divider:#242d3b;
  --color-border:#313b4b;

  --color-ink:#0b1017;
  --color-ink-2:#141c28;
  --color-text:#dfe4ec;
  --color-text-muted:#98a2b3;
  --color-text-faint:#6b7484;
  --color-text-inverse:#f4f1ea;

  --color-primary:#dd8158;
  --color-primary-hover:#eb9772;
  --color-primary-soft:#2b2119;
  --color-brass:#d3ab55;

  --shadow-sm:0 1px 2px oklch(0 0 0 / .3);
  --shadow-md:0 6px 20px oklch(0 0 0 / .38);
  --shadow-lg:0 18px 48px oklch(0 0 0 / .5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#0f141d;--color-surface:#151b26;--color-surface-2:#19202c;
    --color-surface-offset:#1b2330;--color-surface-offset-2:#212a39;
    --color-divider:#242d3b;--color-border:#313b4b;
    --color-ink:#0b1017;--color-ink-2:#141c28;
    --color-text:#dfe4ec;--color-text-muted:#98a2b3;--color-text-faint:#6b7484;
    --color-primary:#dd8158;--color-primary-hover:#eb9772;--color-primary-soft:#2b2119;--color-brass:#d3ab55;
  }
}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-5)}
@media (min-width:768px){.wrap{padding-inline:var(--space-8)}}
.wrap--narrow{max-width:var(--content-narrow)}
.wrap--default{max-width:var(--content-default)}
section{padding-block:clamp(var(--space-16),7vw,var(--space-32))}
section.tight{padding-block:clamp(var(--space-12),5vw,var(--space-20))}
.stack>*+*{margin-top:var(--space-4)}

.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--color-primary);display:flex;align-items:center;gap:var(--space-3)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.eyebrow--center{justify-content:center}

h1,.h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em}
h2,.h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);letter-spacing:-.01em}
h3{font-size:var(--text-lg);font-weight:600;letter-spacing:-.005em}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.55;max-width:60ch}
.muted{color:var(--color-text-muted)}
.section-head{max-width:64ch}
.section-head h2{margin-top:var(--space-4)}
.section-head p{margin-top:var(--space-4);color:var(--color-text-muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:600;padding:.8rem 1.4rem;border-radius:var(--radius-full);
  text-decoration:none;border:1px solid transparent;min-height:44px}
.btn--primary{background:var(--color-primary);color:#fff}
[data-theme='dark'] .btn--primary{color:#1a120c}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.btn--ghost{border-color:var(--color-border);color:var(--color-text);background:transparent}
.btn--ghost:hover{border-color:var(--color-text);background:var(--color-surface)}
.btn--onink{border-color:color-mix(in oklab,#fff 32%,transparent);color:#fff}
.btn--onink:hover{background:color-mix(in oklab,#fff 12%,transparent)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;padding-block:var(--space-3);font-size:var(--text-sm);font-weight:600;
  color:var(--color-primary);text-decoration:none}
.link-arrow svg{transition:transform var(--transition-interactive)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--color-bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.header--scrolled{border-bottom-color:var(--color-divider);box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;gap:var(--space-4);min-height:76px;min-width:0}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);min-width:0;padding-block:var(--space-2)}
.brand>span{min-width:0}
.brand svg{color:var(--color-primary);flex:none}
.brand__name{font-family:var(--font-display);font-size:1.0625rem;line-height:1.15;letter-spacing:.01em;display:block}
.brand__sub{display:block;font-family:var(--font-body);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--color-text-faint)}
@media (max-width:600px){.header .brand__sub{display:none}.header .brand__name{font-size:.9375rem}}
@media (max-width:380px){.header .brand__name{font-size:.875rem}}
.nav{margin-left:auto;display:none;align-items:center;gap:var(--space-6)}
@media (min-width:1020px){.nav{display:flex}}
.nav a{font-size:var(--text-sm);text-decoration:none;color:var(--color-text-muted);position:relative;padding-block:var(--space-2)}
.nav a:hover{color:var(--color-text)}
.nav a[aria-current='page']{color:var(--color-text);font-weight:600}
.nav a[aria-current='page']::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary);border-radius:2px}
.header__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
@media (min-width:1020px){.header__actions{margin-left:0}}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-full);
  color:var(--color-text-muted);border:1px solid transparent}
.icon-btn:hover{color:var(--color-text);background:var(--color-surface-offset)}
.header__cta{display:none}
@media (min-width:1020px){.header__cta{display:inline-flex}}
.burger{display:grid}
@media (min-width:1020px){.burger{display:none}}

.mobile-nav{position:fixed;inset:76px 0 auto;z-index:55;background:var(--color-bg);
  border-bottom:1px solid var(--color-divider);padding:var(--space-4) 0 var(--space-8);
  display:none;box-shadow:var(--shadow-lg)}
.mobile-nav[data-open='true']{display:block}
.mobile-nav a{display:block;padding:var(--space-4) 0;text-decoration:none;color:var(--color-text);
  border-bottom:1px solid var(--color-divider);font-size:var(--text-base)}
.mobile-nav .btn{margin-top:var(--space-6);width:100%;display:flex;justify-content:center;border-bottom:0;color:#fff}
[data-theme='dark'] .mobile-nav .btn--primary{color:#1a120c}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--color-ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to right,color-mix(in oklab,#0b1220 88%,transparent) 0%,color-mix(in oklab,#0b1220 74%,transparent) 52%,color-mix(in oklab,#0b1220 42%,transparent) 100%)}
.hero__inner{padding-block:clamp(var(--space-20),13vw,var(--space-32));max-width:44rem}
.hero h1{font-size:var(--text-3xl);margin-top:var(--space-5);color:#fff}
.hero .lead{color:color-mix(in oklab,#fff 82%,transparent);margin-top:var(--space-6)}
.hero .eyebrow{color:var(--color-brass)}
@media (max-width:900px){.hero::after{background:linear-gradient(to bottom,color-mix(in oklab,#0b1220 72%,transparent) 0%,color-mix(in oklab,#0b1220 86%,transparent) 60%,color-mix(in oklab,#0b1220 92%,transparent) 100%)}}
.hero--page .hero__inner{padding-block:clamp(var(--space-16),9vw,var(--space-24))}
.hero--page h1{font-size:var(--text-2xl)}
.hero__meta{margin-top:var(--space-10);display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);
  font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,#fff 66%,transparent)}
.hero__meta span{display:flex;align-items:center;gap:var(--space-2)}
.hero__meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-brass)}

/* ---------- stat band ---------- */
.stats{background:var(--color-surface-offset);border-block:1px solid var(--color-divider)}
.stats__grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.stats__grid{grid-template-columns:repeat(4,1fr);gap:var(--space-10)}}
.stat__value{font-family:var(--font-display);font-size:var(--text-xl);line-height:1;font-variant-numeric:tabular-nums}
.stat__label{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}

/* ---------- split / editorial ---------- */
.split{display:grid;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--reverse .split__media{order:2}
  .split--wide-text{grid-template-columns:1.15fr .85fr}}
.split__media img{border-radius:var(--radius-xl);box-shadow:var(--shadow-md);width:100%;max-height:520px;object-fit:cover}
.figure figcaption{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--color-text-faint)}

.checklist{list-style:none;display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.checklist li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);max-width:56ch}
.checklist svg{flex:none;margin-top:.28em;color:var(--color-primary)}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--space-5)}
@media (min-width:700px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:700px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:clamp(var(--space-6),2.4vw,var(--space-8));display:flex;flex-direction:column;gap:var(--space-3)}
.card--link:hover{border-color:color-mix(in oklab,var(--color-primary) 45%,var(--color-border));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card__num{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-primary);line-height:1}
.card p{font-size:var(--text-sm);color:var(--color-text-muted)}
.card__foot{margin-top:auto;padding-top:var(--space-4)}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none}
.tag{font-size:var(--text-xs);padding:.3rem .65rem;border-radius:var(--radius-full);
  background:var(--color-surface-offset);border:1px solid var(--color-divider);color:var(--color-text-muted)}

/* ---------- markets ---------- */
.market-card{overflow:hidden;padding:0;border-radius:var(--radius-xl);border:1px solid var(--color-border);
  background:var(--color-surface);display:flex;flex-direction:column}
.market-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.market-card__body{padding:clamp(var(--space-6),2.4vw,var(--space-8));display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.flagline{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-faint)}
.flagline b{color:var(--color-text);letter-spacing:.14em}
.deflist{display:grid;gap:var(--space-3);margin-top:var(--space-4);font-size:var(--text-sm)}
.deflist>div{display:grid;grid-template-columns:9rem 1fr;gap:var(--space-4);
  padding-block:var(--space-3);border-top:1px solid var(--color-divider)}
.deflist dt{color:var(--color-text-faint);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;padding-top:.15em}
.deflist dd{color:var(--color-text)}
@media (max-width:560px){.deflist>div{grid-template-columns:1fr;gap:var(--space-1)}}

/* ---------- process ---------- */
.process{display:grid;gap:var(--space-6);counter-reset:step}
@media (min-width:900px){.process{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}}
.step{padding-top:var(--space-6);border-top:2px solid var(--color-divider);position:relative}
.step--active{border-top-color:var(--color-primary)}
.step__idx{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-faint)}
.step h3{margin-top:var(--space-3)}
.step p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}

/* ---------- ink (dark) band ---------- */
.band-ink{background:var(--color-ink);color:#fff}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:color-mix(in oklab,#fff 76%,transparent)}
.band-ink .eyebrow{color:var(--color-brass)}
.quote{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.3;max-width:34ch}
.band-ink .deflist>div{border-top-color:color-mix(in oklab,#fff 16%,transparent)}
.band-ink .deflist dt{color:color-mix(in oklab,#fff 55%,transparent)}
.band-ink .deflist dd{color:#fff}

/* ---------- projects framework ---------- */
.empty-state{border:1px dashed var(--color-border);border-radius:var(--radius-xl);
  background:var(--color-surface);padding:clamp(var(--space-8),5vw,var(--space-20));text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.empty-state__icon{width:64px;height:64px;display:grid;place-items:center;border-radius:var(--radius-full);
  background:var(--color-primary-soft);color:var(--color-primary)}
.empty-state p{color:var(--color-text-muted);max-width:52ch}
.example-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);overflow:hidden;display:flex;flex-direction:column}
.example-card__frame{aspect-ratio:16/10;background:
  repeating-linear-gradient(45deg,var(--color-surface-offset) 0 12px,var(--color-surface-offset-2) 12px 24px);
  display:grid;place-items:center;position:relative}
.example-card__frame span{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint)}
.example-card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);flex:1}
.badge{align-self:flex-start;font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary)}
.field-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:baseline;
  padding-block:var(--space-2);border-bottom:1px solid var(--color-divider);font-size:var(--text-sm)}
.field-row:last-child{border-bottom:0}
.field-row dt{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}
.field-row dd{color:var(--color-text-muted);text-align:right}
.placeholder-bar{display:inline-block;height:.6em;width:100%;max-width:120px;border-radius:var(--radius-full);
  background:var(--color-surface-offset-2)}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.field input,.field select,.field textarea{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:.8rem .9rem;font-size:var(--text-sm);min-height:46px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 18%,transparent)}
.field__err{font-size:var(--text-xs);color:var(--color-primary);display:none;text-transform:none;letter-spacing:0}
.field[data-invalid='true'] .field__err{display:block}
.field[data-invalid='true'] input,.field[data-invalid='true'] textarea{border-color:var(--color-primary)}
@media (min-width:620px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint)}
.form-success{display:none;border:1px solid var(--color-border);background:var(--color-surface-offset);
  border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-2)}
.form-success[data-visible='true']{display:grid}
.form-success strong{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400}

/* ---------- footer ---------- */
.footer{background:var(--color-ink);color:color-mix(in oklab,#fff 74%,transparent);padding-block:var(--space-20) }
.footer a{color:color-mix(in oklab,#fff 74%,transparent);text-decoration:none}
.footer a:hover{color:#fff}
.footer__top{display:grid;gap:var(--space-10)}
@media (min-width:900px){.footer__top{grid-template-columns:1.2fr .8fr .8fr 1fr}}
.footer .brand{color:#fff}
.footer .brand svg{color:var(--color-brass)}
.footer h4{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:var(--space-4)}
.footer ul{list-style:none;display:grid;gap:var(--space-3);font-size:var(--text-sm)}
.footer__legal{margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid color-mix(in oklab,#fff 14%,transparent);
  display:grid;gap:var(--space-6)}
@media (min-width:900px){.footer__legal{grid-template-columns:1fr 1fr;gap:var(--space-12)}}
.entity{font-size:var(--text-xs);line-height:1.7}
.entity b{display:block;color:#fff;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.footer__base{margin-top:var(--space-10);font-size:var(--text-xs);display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);
  justify-content:space-between;color:color-mix(in oklab,#fff 55%,transparent)}

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

.skip{position:absolute;left:var(--space-4);top:-60px;z-index:99;background:var(--color-surface);
  border:1px solid var(--color-border);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);text-decoration:none;color:var(--color-text)}
.skip:focus{top:var(--space-3)}
.rule{height:1px;background:var(--color-divider);border:0}