/* =UNISON — compiled stylesheet.
 * 1. Design tokens (spec 14) — the only place a colour literal appears.
 * 2. Runtime states (drawer, sticky bar, reveals, form messages).
 * 3. Pseudo-state rules generated at build time from the source
 *    style-hover / style-focus / style-active attributes.
 */

/* =UNISON — design tokens (§14) and base resets. The only place a hex literal appears. */
:root{
  --ink:#14110E; --bone:#F4F1EA; --acid:#D4E600; --charcoal:#22201C;
  --acid-deep:#9AA000; --stone:#C2B8A3; --muted:#6B6860;
  --line-on-ink:rgba(244,241,234,0.14); --line-on-bone:rgba(20,17,14,0.14);
  --line-on-ink-24:rgba(244,241,234,0.24); --line-on-bone-24:rgba(20,17,14,0.24);
  --charcoal-hover:#2A2724; --bone-hover:#EBE7DE; --acid-text:#6E7300; --error:#C4442E;
  --field-on-bone:#FFFFFF;
  --bone-80:rgba(244,241,234,0.80); --bone-78:rgba(244,241,234,0.78);
  --bone-70:rgba(244,241,234,0.70); --bone-60:rgba(244,241,234,0.60);
  /* --bone-45 and --bone-30 fail WCAG AA on Ink (4.16:1 / 2.6:1) — decorative, aria-hidden marks only.
     Smallest permitted value for readable text on Ink is --bone-60 (6.61:1). */
  --bone-55:rgba(244,241,234,0.55); --bone-45:rgba(244,241,234,0.45);
  --bone-30:rgba(244,241,234,0.30); --bone-08:rgba(244,241,234,0.08);
  --font-display:'Unbounded',sans-serif; --font-working:'Inter',system-ui,sans-serif;
  --radius:3px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-25:100px;
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:240ms;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --z-sticky-bar:40; --z-nav:50; --z-dropdown:60; --z-drawer:70; --z-skiplink:100;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--font-working);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:var(--acid);text-decoration:none}
a:hover{color:var(--bone)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
[data-on-bone] :focus-visible{outline-color:var(--ink)}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
table{border-collapse:collapse;width:100%}
[data-reveal]{opacity:0;transform:translateY(12px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
details[open] [data-plus]{display:none}
details:not([open]) [data-minus]{display:none}
svg a:focus-visible rect,svg a:hover rect{fill:var(--charcoal-hover);stroke:var(--acid)}
@keyframes slashpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:1023px){[data-desktop-only]{display:none!important}}
@media (min-width:1024px){[data-mobile-only]{display:none!important}}
@media (min-width:1024px){
  [data-split="7-5"]{grid-template-columns:7fr 5fr!important}
  [data-split="5-7"]{grid-template-columns:5fr 7fr!important}
  [data-split="6-6"]{grid-template-columns:1fr 1fr!important}
}
[data-grid="quarters"]{grid-template-columns:1fr}
@media (min-width:480px){[data-grid="quarters"]{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){[data-grid="quarters"]{grid-template-columns:repeat(4,1fr)}}
/* Chip/pill rows: flex items must not shrink below their intrinsic text width.
   Primary fix is inline on the chips; this is a safety net for new chip rows. */
[data-chips]>li,ul[style*="flex-wrap: wrap"]>li{flex:0 0 auto;white-space:nowrap}
[data-grid="two"]{grid-template-columns:1fr}
@media (min-width:820px){[data-grid="two"]{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}


/* ---------- runtime states ---------- */
/* =UNISON — runtime CSS. Appended after the token layer.
   Handles states that were previously conditional rendering.
   Everything degrades safely with JavaScript disabled. */

/* ---------------------------------------------------------------
   Mobile drawer (spec 4.10)

   The drawer markup ships in every page so the toggle has something
   to reveal, but it must be invisible until opened AND must never
   appear at desktop width, open or closed.

   These rules use !important deliberately: the drawer element carries
   an inline `display:flex` from the source component, and an inline
   style beats a normal stylesheet rule. Without !important the drawer
   paints over the whole page on load. Do not remove.
   --------------------------------------------------------------- */
#mobile-drawer { display: none !important; }

@media (max-width: 1023px) {
  #mobile-drawer.is-open { display: flex !important; }
}

/* Desktop: the drawer is not part of the pattern at all. */
@media (min-width: 1024px) {
  #mobile-drawer { display: none !important; }
}

html.drawer-open { overflow: hidden; }

/* Nav dropdown panels (when present) start closed. */
[data-menu-panel][hidden] { display: none; }

/* ---------------------------------------------------------------
   Mobile sticky contact bar — same inline-style problem as the drawer.
   Scroll-triggered, mobile-only.
   --------------------------------------------------------------- */
[data-sticky-bar] { display: none !important; }

@media (max-width: 1023px) {
  [data-sticky-bar].is-visible { display: flex !important; }
}

/* Entrance animations are opt-in and gated on the .js class, which only
   exists once site.js has run. Without JS the content is simply visible. */
[data-reveal] { opacity: 1; transform: none; }
html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(12px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* Form validation messages, injected by script. */
.field-error { font-size: 12px; line-height: 1.5; margin-top: var(--space-2); color: var(--bone); }
[data-on-bone] .field-error { color: var(--ink); }
.field-error::before { content: "="; color: var(--error); font-family: var(--font-display); font-weight: 800; margin-right: 6px; }
.field-error[hidden] { display: none; }
.is-invalid { border-color: var(--error) !important; }

[data-form-summary] {
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: var(--space-6);
}
[data-form-summary][hidden] { display: none; }

/* Success panel, injected by script after a successful submit. */
.form-success { border: 1px solid var(--line-on-ink); border-radius: var(--radius); padding: 38px; background: var(--charcoal); }
.form-success.on-bone { border-color: var(--line-on-bone); background: transparent; color: var(--ink); }
.form-success .fs-mark { display: block; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--acid); }
.form-success.on-bone .fs-mark { color: var(--acid-deep); }
.form-success h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1.05; letter-spacing: -0.01em; margin-top: var(--space-6); outline: none; }
.form-success p { font-size: 16px; line-height: 1.6; color: var(--bone-70); margin-top: var(--space-4); max-width: 46ch; }
.form-success.on-bone p { color: var(--muted); }
.form-success .fs-call {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--space-6);
  padding: 16px 28px; border-radius: var(--radius); background: var(--acid); color: var(--ink);
  font-weight: 600; font-size: 13px; letter-spacing: .04em;
}
.form-success.on-bone .fs-call { background: var(--ink); color: var(--bone); }


/* ---------- generated pseudo-state rules ---------- */
.u0:focus{left:16px;top:16px}
.u1:hover{color:var(--bone);box-shadow:0 6px 0 -5px var(--acid)}
.u2:hover{color:var(--acid)}
.u3:hover{background:var(--acid-deep);color:var(--ink)}
.u4:hover{background:var(--acid-deep);color:var(--ink)}
.u4:active{transform:translateY(1px)}
.u5:hover{border-color:var(--bone-60);background:var(--bone-08);color:var(--bone)}
.u6:hover{color:var(--ink);border-bottom-color:var(--ink)}
.u7:hover{background:var(--bone-hover);border-color:var(--line-on-bone-24)}
.u8:hover{color:var(--ink)}
.u9:hover{background:var(--charcoal);color:var(--bone)}
.u10:hover{background:var(--charcoal-hover);border-color:var(--line-on-ink-24)}
.u11:hover{color:var(--bone)}
.u12:hover{color:var(--acid-text)}
.u13:focus{border-color:var(--acid-deep)}
.u14:hover{background:var(--charcoal)}
.u14:active{transform:translateY(1px)}
.u15:hover{background:var(--bone-hover);border-color:var(--line-on-bone-24);color:var(--ink)}
.u16:hover{background:var(--charcoal);border-color:var(--line-on-ink-24);color:var(--bone)}
.u17:hover{background:var(--bone-hover);color:var(--ink)}
.u18:active{transform:translateY(1px)}
.u19:hover{background:var(--charcoal)}
.u20:focus{border-color:var(--acid)}