/* ==========================================================================
   Proteros Foundation
   Direction: Steward — Forest & Brass
   Single stylesheet. Order: fonts, reset, tokens, base, layout, components,
   utilities, motion. Components use single-class selectors; section spacing
   is owned by .section alone so nothing silently cancels it out.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted; no third-party requests) ---------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/newsreader-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/publicsans-var.woff2') format('woff2');
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 3. Tokens ---------- */

:root {
  /* colour — brass is a rules-and-marks accent, never text on paper (2.94:1) */
  --paper:  #FAFAF8;
  --card:   #FFFFFF;
  --band:   #F2F5F2;
  --ink:    #14181A;
  --ink-2:  #5C6560;
  --line:   #DDE5E1;
  --forest: #133A2E;
  --brass:  #B98B3E;
  --action: #1F6B54;

  /* type */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1:    clamp(2.15rem, 1.35rem + 3.4vw, 3.6rem);
  --fs-h2:    clamp(1.6rem,  1.25rem + 1.5vw, 2.35rem);
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-lead:  clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  /* spacing — 8px scale */
  --s1: 0.5rem;  --s2: 1rem;    --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;

  --container: 1120px;
  --measure: 65ch;
  --tap: 44px;

  --dur: 0.45s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 4. Base ---------- */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--forest);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; }

p { text-wrap: pretty; }

a { color: var(--action); text-underline-offset: 0.18em; }
a:hover { color: var(--forest); }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--forest); color: var(--paper); }

.skip-link {
  position: absolute;
  left: var(--s2);
  top: -4rem;
  z-index: 200;
  background: var(--forest);
  color: var(--paper);
  padding: var(--s1) var(--s3);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--s2); color: var(--paper); }

/* ---------- 5. Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* the single owner of vertical section rhythm */
.section { padding-block: clamp(3rem, 1.6rem + 6vw, 6rem); }
.section--band { background: var(--band); }

.measure { max-width: var(--measure); }

.section-head { margin-bottom: var(--s5); }
.section-head .measure { margin-top: var(--s2); }

.label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s2);
}


.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.6; }
.note { font-size: var(--fs-small); color: var(--ink-2); }

/* vertical stacking utilities — used where a single element needs to clear
   what precedes it, so .section keeps sole ownership of section rhythm */
.stack-top     { margin-top: var(--s4); }
.stack-lg      { margin-top: var(--s5); }
.section-lead  { margin-top: var(--s4); }
.ledger-intro  { margin-top: var(--s4); }

/* ---------- 6. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.7rem 1.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.btn--primary { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.btn--primary:hover { background: var(--action); border-color: var(--action); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--forest); color: var(--forest); background: var(--card); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------- 7. Header & navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: 0 6px 20px rgba(19, 58, 46, 0.07); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--forest);
}
.brand svg { width: 30px; height: auto; flex: none; }
.brand-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.nav { display: none; }
.nav-list { display: flex; align-items: center; gap: var(--s4); }
.nav-list a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--forest); border-bottom-color: var(--brass); }
.nav-list a[aria-current="true"] { color: var(--forest); border-bottom-color: var(--forest); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--tap);
  padding: 0 0.5rem;
  background: none;
  border: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--forest);
}
.nav-toggle-bars { position: relative; width: 20px; height: 2px; background: currentColor; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s var(--ease);
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.nav-panel.is-open { display: block; }
.nav-panel ul { padding-block: var(--s2); }
.nav-panel a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-panel li:last-child a { border-bottom: 0; }
.nav-panel a:hover { color: var(--forest); }

@media (min-width: 900px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
}

/* Below ~420px the wordmark (which must not break) plus the "Menu" label
   overflow the viewport, so trim the header rather than let the page scroll
   sideways. The label stays in the accessibility tree. */
@media (max-width: 420px) {
  .container { padding-inline: var(--s2); }
  .brand svg { width: 26px; }
  .brand-name { font-size: 1.05rem; }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------- 8. Hero ---------- */

.hero { padding-block: clamp(2.5rem, 1.4rem + 5vw, 5rem); }
.hero-grid { display: grid; gap: var(--s5); align-items: center; }
.hero h1 { margin-bottom: var(--s3); }
.hero .lead { max-width: 46ch; }

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s6); }
}

/* ---------- 9. Cards ---------- */

.cards { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card { border-top: 2px solid var(--forest); padding-top: var(--s3); }
.card h3 { margin-bottom: var(--s1); }
/* Reserve two lines for the title so the body copy sits on one line across all
   four cards — only while they are side by side. */
@media (min-width: 620px) { .card h3 { min-height: 2.5em; } }
.card p { color: var(--ink-2); font-size: var(--fs-small); }
.card a { font-weight: 600; font-size: var(--fs-small); display: inline-block; margin-top: var(--s2); }

/* ---------- 10. Ledger (the signature) ---------- */

.ledger-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .ledger-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s6); } }

.ledger caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: var(--s2);
}
.ledger th, .ledger td {
  padding: 0.9rem 0;
  text-align: right;
  border-bottom: 1px solid var(--line);
}
.ledger th:first-child, .ledger td:first-child { text-align: left; }
.ledger thead th {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 2px solid var(--forest);
}
.ledger td {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ledger tbody th {
  font-weight: 400;
  color: var(--ink);
  font-size: var(--fs-body);
}
.ledger tbody tr:last-child th,
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger .figure { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--forest); }

/* ---------- 11. Split (image beside text) ---------- */

.split { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .split--flip .split-media { order: 2; }
}
.split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split-body > * + * { margin-top: var(--s3); }

/* ---------- 12. Steps (a real sequence: a litter's first eight weeks) ---------- */

.steps { display: grid; gap: var(--s4); counter-reset: none; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s3); } }

.step { border-top: 1px solid var(--line); padding-top: var(--s2); }
.step-when {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brass);
  letter-spacing: 0.02em;
}
.step h3 { font-size: 1.05rem; margin: 0.15rem 0 0.35rem; }
.step p { font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- 13. Lists ---------- */

.checklist { display: grid; gap: 0.7rem; margin-top: var(--s3); }
.checklist li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--fs-small);
}
.checklist li::before {
  content: '';
  width: 9px;
  height: 9px;
  margin-top: 0.5rem;
  background: var(--brass);
}

.stops { margin-top: var(--s3); border-top: 1px solid var(--line); }
.stop {
  display: grid;
  gap: 0.15rem var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .stop { grid-template-columns: 1.2fr 1.4fr 1fr; align-items: baseline; } }
.stop-name { font-weight: 600; color: var(--forest); }
.stop-name a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
}
.stop-name a:hover { color: var(--action); border-bottom-color: var(--action); }
.stop-where, .stop-when { font-size: var(--fs-small); color: var(--ink-2); }
.stop-when { font-variant-numeric: tabular-nums; }

/* ---------- 14. Contact ---------- */

.contact-grid { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.contact-item p { margin-top: 0.2rem; }
/* an address block reads as one unit, so tighten it from the body leading */
.contact-address { line-height: 1.45; }
.contact-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.contact-value { font-size: 1.1rem; }

/* Email obfuscation — ported from ExcelaCapitalWebsite/public/css/style.css.
   The compound selectors are load-bearing: there is no generic .hidden rule,
   so the hex stays invisible until main.js decodes it. */
span.email.hidden { display: none; }
span.email b { font-weight: normal; }
span.email b:nth-child(2) { display: none; }
a.email-link.hidden { display: none; }

noscript { color: var(--ink-2); font-size: var(--fs-small); }

/* ---------- 15. Footer ---------- */

.site-footer {
  background: var(--forest);
  color: var(--paper);
  padding-block: var(--s5);
}
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--brass); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--s4);
  border-bottom: 1px solid rgba(250, 250, 248, 0.18);
}
.footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--paper); text-decoration: none; }
.footer-brand svg { width: 28px; height: auto; }
.footer-brand span { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.footer-nav a { font-size: var(--fs-small); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  padding-top: var(--s3);
  font-size: var(--fs-small);
  color: rgba(250, 250, 248, 0.72);
}

/* ---------- 16. 404 ---------- */

.error-page {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s3);
}
.error-code {
  font-family: var(--display);
  font-size: clamp(4rem, 2rem + 12vw, 8rem);
  line-height: 1;
  color: var(--brass);
}

/* ---------- 17. Motion ---------- */

/* .js is set by an inline script in <head>, so content is never hidden
   from anyone whose JavaScript did not run. */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* anchored sections must clear the sticky header */
[id] { scroll-margin-top: 84px; }