/* =========================================================
   Tiger Digital — design tokens & shared styles
   ========================================================= */

:root {
  /* --- color tokens (black / white / tiger-orange) --- */
  --jungle-ink: #0F0A0A;
  --jungle-ink-2: #1A1414;
  --jungle-ink-3: #241C1A;
  --ember: #FE5A19;
  --ember-dark: #D6430A;
  --ember-light: #FF8347;
  --bone: #F7F5F2;
  --bone-dim: #E7E6E1;
  --moss: #17110F;
  --gold: #FFB13D;
  --charcoal: #14100E;
  --charcoal-soft: #55504A;
  --line-on-dark: rgba(247, 245, 242, 0.14);
  --line-on-light: rgba(20, 16, 14, 0.12);

  /* --- type tokens --- */
  --font-display: "Big Shoulders Display", "Archivo Black", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- scale --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --radius: 4px;
  --max-width: 1180px;
}

/* Mobile is a different density decision, not a scaled-down desktop.
   --space-5/6 drive the big inter-section rhythm (section padding, hero
   padding, footer padding...) — at desktop sizes that generous air reads
   as premium; on a phone the exact same numbers just mean more thumb
   fatigue scrolling past whitespace to reach content. Every section that
   references these tokens tightens automatically, site-wide, from here. */
@media (max-width: 640px) {
  :root {
    --space-5: 3rem;
    --space-6: 4rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
h4 { font-size: 1.1rem; letter-spacing: 0.04em; }

p { margin: 0 0 var(--space-2); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-2);
  color: var(--ember);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--ember);
  display: inline-block;
}

/* On light backgrounds, plain --ember fails WCAG AA for text this small
   (2.88:1). --ember-dark clears 4.5:1 and keeps the same hue. */
.section-light .eyebrow,
.form-panel .eyebrow {
  color: var(--ember-dark);
}
.section-light .eyebrow::before,
.form-panel .eyebrow::before {
  background: var(--ember-dark);
}

/* focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* =========================================================
   Header / Nav
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--jungle-ink);
  border-bottom: 1px solid var(--line-on-dark);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 0.55em;
}

.brand .mark {
  display: inline-flex;
  gap: 3px;
}

.brand .mark span {
  width: 4px;
  height: 22px;
  background: var(--ember);
  transform: skewX(-16deg);
}
.brand .mark span:nth-child(2) { background: var(--gold); height: 16px; align-self: flex-end; }
.brand .mark span:nth-child(3) { background: var(--ember-dark); height: 26px; align-self: flex-start; }

.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  opacity: 0.7;
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--bone);
  border-color: var(--ember);
}

.nav-cta {
  font-family: var(--font-mono) !important;
  background: var(--ember);
  color: var(--jungle-ink) !important;
  padding: 0.55em 1.1em;
  border: none !important;
  font-weight: 600;
}
.nav-cta:hover { background: var(--ember-light); border-color: transparent !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-on-dark);
  color: var(--bone);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--jungle-ink);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--line-on-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-links.open { max-height: 400px; }
  .nav-links a {
    width: 100%;
    padding: 1.1em var(--space-3);
    border-bottom: 1px solid var(--line-on-dark);
    border-left: 3px solid transparent;
  }
  .nav-links a:hover, .nav-links a[aria-current="page"] {
    border-color: transparent;
    border-left-color: var(--ember);
    background: var(--jungle-ink-2);
  }
  .nav-cta { border-bottom: 1px solid var(--line-on-dark) !important; }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1em 1.6em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  font-weight: 600;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--jungle-ink);
}
.btn-primary:hover { background: var(--ember-light); border-color: var(--ember-light); }

.btn-ghost-dark {
  color: var(--bone);
  border-color: var(--line-on-dark);
}
.btn-ghost-dark:hover { border-color: var(--bone); }

.btn-ghost-light {
  color: var(--charcoal);
  border-color: var(--line-on-light);
}
.btn-ghost-light:hover { border-color: var(--charcoal); }

.btn-arrow::after { content: "→"; }

/* =========================================================
   Section rhythm
   ========================================================= */

section { padding: var(--space-6) 0; }

.section-dark {
  background: var(--jungle-ink);
  color: var(--bone);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--bone); }
.section-dark p { color: var(--bone-dim); }

.section-light { background: var(--bone); }

.section-moss {
  background: var(--moss);
  color: var(--bone);
}
.section-moss h2, .section-moss h3 { color: var(--bone); }
.section-moss p { color: var(--bone-dim); }

/* =========================================================
   Stripe signature motif
   ========================================================= */

.stripes {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
}

.stripes span {
  width: 9px;
  background: var(--ember);
  transform: skewX(-16deg);
  display: block;
}
.stripes span:nth-child(1) { height: 60%; background: var(--gold); }
.stripes span:nth-child(2) { height: 100%; }
.stripes span:nth-child(3) { height: 42%; background: var(--ember-dark); }
.stripes span:nth-child(4) { height: 78%; }

.stripe-divider {
  width: 100%;
  height: 64px;
  overflow: hidden;
  position: relative;
}
.stripe-divider svg { width: 100%; height: 100%; display: block; }

/* vertical stripe divider used between the two offer cards */
.stripe-rule-v {
  width: 3px;
  align-self: stretch;
  background: repeating-linear-gradient(
    170deg,
    var(--ember) 0 14px,
    transparent 14px 22px,
    var(--gold) 22px 30px,
    transparent 30px 40px
  );
  min-height: 260px;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.7fr;
  gap: var(--space-5);
  align-items: center;
}

.hero-copy p.lede {
  font-size: 1.2rem;
  max-width: 46ch;
}

.hero-ctas {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
}

.hero-stripes-big {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 220px;
}
.hero-stripes-big span {
  width: 26px;
  transform: skewX(-14deg);
  display: block;
  border-radius: 2px 2px 0 0;
}
.hero-stripes-big span:nth-child(1) { height: 55%; background: var(--jungle-ink-3); }
.hero-stripes-big span:nth-child(2) { height: 88%; background: var(--ember-dark); }
.hero-stripes-big span:nth-child(3) { height: 68%; background: var(--gold); }
.hero-stripes-big span:nth-child(4) { height: 100%; background: var(--ember); }
.hero-stripes-big span:nth-child(5) { height: 40%; background: var(--jungle-ink-3); }

/* --- animated tiger-stripe orb (hero signature) --- */
.orb-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.orb-wrap::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(254, 90, 25, 0.32), transparent 68%);
  filter: blur(36px);
  z-index: 0;
  pointer-events: none;
}
.orb-wrap canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 900px) {
  .orb-wrap { max-width: 300px; }
}

.hero-stat-card {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--bone-dim);
  border: 1px solid var(--line-on-dark);
  padding: var(--space-2);
  max-width: 260px;
  text-align: right;
}

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-side { align-items: flex-start; }
  .hero-stat-card { text-align: left; }
}

/* =========================================================
   Value / problem strip
   ========================================================= */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.value-item {
  border-top: 2px solid var(--charcoal);
  padding-top: var(--space-2);
}

.value-item .index {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ember-dark);
  display: block;
  margin-bottom: var(--space-1);
}

@media (max-width: 760px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Two-path offer section
   ========================================================= */

.paths-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-5); }
.paths-head p { color: var(--bone-dim); }

.paths-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .paths-wrap { grid-template-columns: 1fr; }
  .stripe-rule-v { display: none; }
}

.path-card {
  background: var(--jungle-ink-2);
  border: 1px solid var(--line-on-dark);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.path-card .tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--space-2);
}

.path-card h3 { margin-bottom: var(--space-1); }

.path-card .price {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--gold);
  margin: var(--space-2) 0;
}
.path-card .price span {
  font-size: 0.7rem;
  color: var(--bone-dim);
  display: block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.path-card ul {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  flex-grow: 1;
}

.path-card li {
  padding: 0.7em 0;
  border-top: 1px solid var(--line-on-dark);
  color: var(--bone-dim);
  display: flex;
  gap: 0.7em;
}
.path-card li:last-child { border-bottom: 1px solid var(--line-on-dark); }
.path-card li::before {
  content: "";
  min-width: 8px;
  height: 8px;
  margin-top: 0.5em;
  background: var(--ember);
  transform: skewX(-16deg);
}

.path-card.advisor { background: var(--jungle-ink-3); }
.path-card.advisor .price { color: var(--ember); }

/* =========================================================
   How it works
   ========================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: var(--space-3);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ember-dark);
  display: block;
  margin-bottom: var(--space-1);
}
.step h4 { text-transform: none; font-size: 1.25rem; margin-bottom: var(--space-1); }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
}

/* =========================================================
   Testimonials
   ========================================================= */

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.testi-card {
  background: var(--bone);
  color: var(--charcoal);
  padding: var(--space-3);
  position: relative;
  border-left: 3px solid var(--ember);
}

.testi-card p.quote {
  font-style: italic;
  font-size: 1.05rem;
}

.testi-card .who {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .testi-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   CTA band
   ========================================================= */

.cta-band {
  background: var(--ember);
  color: var(--jungle-ink);
  text-align: center;
}
.cta-band h2 { color: var(--jungle-ink); }
.cta-band .btn-ghost-light { color: var(--jungle-ink); border-color: rgba(22,35,28,0.4); }
.cta-band .btn-ghost-light:hover { border-color: var(--jungle-ink); }

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: var(--jungle-ink);
  color: var(--bone-dim);
  padding: var(--space-5) 0 var(--space-3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line-on-dark);
  padding-bottom: var(--space-4);
}

.footer-grid h4 {
  color: var(--bone);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.6em; }
.footer-grid a:hover { color: var(--ember); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: var(--space-1);
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* =========================================================
   Page header (interior pages)
   ========================================================= */

.page-header {
  background: var(--jungle-ink);
  color: var(--bone);
  padding: var(--space-5) 0 var(--space-4);
}
.page-header p { color: var(--bone-dim); max-width: 60ch; font-size: 1.1rem; }

/* Page headers with generated brand-art accents. The image sits right,
   a solid-ink gradient guards the left (text) side so contrast never
   depends on where the art happens to crop at a given viewport width.
   The actual background-image (gradient + url(...)) is set inline per
   page, not here — a url() inside a CSS custom property resolves
   relative to the stylesheet that reads it, not the HTML page that
   sets it, which silently breaks the path. Inline keeps it resolving
   against the page's own location. */
.page-header.has-accent {
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 320px;
  display: flex;
  align-items: center;
}
/* Cap the text column so it always sits inside the gradient's guaranteed-
   opaque zone, regardless of how long a given page's headline is — safer
   than tuning the gradient stops per image brightness. */
.page-header.has-accent h1,
.page-header.has-accent p,
.page-header.has-accent .eyebrow {
  max-width: 460px;
}
@media (max-width: 760px) {
  /* on narrow screens the art has no room to breathe next to the text —
     drop back to a flat background rather than crushing both together.
     !important because the image itself is set inline per page (see
     note above), which normal specificity can't override. In its place:
     a thin tiger-stripe gradient edge, a small deliberate mobile-only
     touch rather than just letting the brand moment disappear. */
  .page-header.has-accent {
    background-image: none !important;
    min-height: 0;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--ember-dark), var(--ember), var(--gold)) 1;
  }
}

/* =========================================================
   Services page specifics
   ========================================================= */

.service-detail {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line-on-light);
}

.service-detail:last-of-type { border-bottom: none; }

.service-detail .num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ember-dark);
}

.service-detail .price-tag {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  color: var(--jungle-ink);
  margin: var(--space-2) 0;
}
.service-detail .price-tag span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: grid;
  gap: 0.9em;
}
.feature-list li {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
  border-top: 1px solid var(--line-on-light);
  padding-top: 0.9em;
}
.feature-list li::before {
  content: "";
  min-width: 10px;
  height: 10px;
  margin-top: 0.4em;
  background: var(--ember);
  transform: skewX(-16deg);
}
.feature-list strong { display: block; }
.feature-list .desc { color: var(--charcoal-soft); font-size: 0.96rem; }

@media (max-width: 860px) {
  .service-detail { grid-template-columns: 1fr; }
}

/* =========================================================
   About page
   ========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-5);
  align-items: start;
}

.about-photo {
  aspect-ratio: 4/5;
  background: var(--jungle-ink-2);
  border: 1px solid var(--line-on-light);
  overflow: hidden;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* fallback treatment if the <img> src is ever missing/broken */
.about-photo:not(:has(img[src])) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
  padding: var(--space-2);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
}

.principles {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.principle {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-2);
  border-top: 1px solid var(--line-on-light);
  padding-top: var(--space-2);
}
.principle .tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ember-dark);
  text-transform: uppercase;
}

/* =========================================================
   Contact page
   ========================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-panel {
  background: var(--jungle-ink-2);
  border: 1px solid var(--line-on-dark);
  padding: var(--space-4);
}

.calendly-frame {
  min-width: 280px;
  height: 700px;
  border: 1px solid var(--line-on-dark);
  background: var(--jungle-ink-3);
}

.calendly-placeholder {
  height: 700px;
  border: 1px dashed var(--line-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  /* 700px was sized for a real Calendly embed on desktop. On a phone,
     that's an empty box taller than the viewport itself before you've
     scrolled to a single line of content — a textbook "shrunk, not
     designed" moment. Once a real Calendly link is in, the live embed
     will size to its own content and this won't matter; until then,
     the placeholder shouldn't cost anyone a five-thumb-swipe scroll. */
  .calendly-frame,
  .calendly-placeholder {
    height: 420px;
  }
}

.form-panel {
  background: var(--bone);
  padding: var(--space-4);
  border: 1px solid var(--line-on-light);
}

.field {
  margin-bottom: var(--space-2);
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
  color: var(--charcoal-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 0.9em;
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius);
  background: #fff;
  color: var(--charcoal);
}

.field textarea { resize: vertical; min-height: 120px; }

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.contact-info-list li {
  padding: 0.8em 0;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--bone-dim);
}
.contact-info-list li strong { color: var(--bone); font-family: var(--font-body); font-size: 1rem; }

/* form success/error banner */
.form-note {
  display: none;
  padding: 0.9em 1em;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--line-on-light);
}
.form-note.show { display: block; }
.form-note.success { border-color: var(--moss); color: var(--moss); }
.form-note.error { border-color: var(--ember-dark); color: var(--ember-dark); }