/* ============================================================
   Balanced On Time Books — site stylesheet
   ============================================================ */

/* ---- Fonts ----
   Loaded from a <link> tag in includes/header.php instead of @import
   here — @import blocks until this stylesheet itself has already
   downloaded before the browser even discovers there's a font
   stylesheet to fetch, serializing two round-trips that a <link> tag
   (paired with the preconnect hints in header.php) can do in parallel.
   Faster text-visible time on first load, same fonts either way. */

/* ---- Tokens ---- */
:root{
  --ink:#202619;
  --ink-soft:#4b5240;
  --paper:#F8F5E9;
  --paper-raised:#FFFFFB;
  --rule:#E4DEC8;
  /* Exactly one green in this entire stylesheet — #2F7A1E, the "Get a Callback"
     button color — used for every green pixel on the site: the logo, every
     button, the topbar/CTA-bar fill, icons, checkmarks, borders. Same hex in
     light mode and dark mode, no exceptions. --green-900/700/600 all hold
     this one value under different names only so the rules below still read
     by role. The pale green badge/pill washes that used to exist here
     (--green-100) were replaced with a neutral --wash tint below, specifically
     so no second, lighter "green" is left anywhere for a color picker to find. */
  --green-900:#2F7A1E;
  --green-700:#2F7A1E;
  --green-600:#2F7A1E;
  /* --green-text: the ONE deliberate exception to "same hex everywhere"
     above — used only where this green is the actual color of small body-
     sized text (nav links, "See more"-style links, footer links, and
     similar — see the accessibility audit note in README.txt), never for a
     background, border, or icon. #2F7A1E on this page's cream background
     reads at a comfortable 4.9:1 contrast, but that same fixed hex on the
     dark-mode page's near-black background only reaches about 3.5:1 — clear
     enough for an icon or a large heading, but under the 4.5:1 a small
     paragraph-sized link needs to stay easily readable. So --green-text
     keeps the identical brand green in light mode, and switches to a
     slightly brighter, still obviously "the same green" shade in dark mode
     (below) — small text gets full contrast in both themes, while every
     background/border/icon green pixel on the site stays the one exact
     brand hex, unchanged. */
  --green-text:#2F7A1E;
  /* Second accent: a cool muted steel-blue — a different tone entirely from
     the two warm attempts before it (gold, then terracotta). No background
     tint token: the credential pills and note-card icon badges sit on the
     neutral --wash chip (below), same as green's icons, so there's no pale
     blue tint left for a picker to find as a fourth color. Unlike green
     above, this one IS allowed a light/dark difference (see the dark-mode
     block below) — it's used for small text (job-listing meta, the "*"
     required-field marker) as well as icons, and needed a small nudge in
     both themes to actually clear 4.5:1 against the page background rather
     than landing just under it. */
  --steel:#3D6FA0;
  --shadow: 0 1px 2px rgba(32,38,25,.06), 0 8px 24px -12px rgba(32,38,25,.18);
  --focus: #2F7A1E;
  /* Always-light text/border for the solid dark-green accent bars (topbar, .band) —
     intentionally constant across themes, since those bars stay dark green in both. */
  --on-accent:#F8F5E9;
  /* Neutral badge/pill background — off-white, no accent color in it, so icon
     badges, nav hover/active pills, credential pills, and the callback/note
     cards all read as neutral chips, never a colored tint. */
  --wash:#EFEBDC;
  /* Error/warning banner + field-error text. Kept as their own tokens
     (rather than literal hex where they're used) specifically so dark
     mode can redefine them below — a hardcoded color here was exactly
     what made the "something went wrong" banner unreadable in dark
     mode: the box stayed pale pink while its text turned white. */
  --error-bg:#F7E7E2;
  --error-border:#E3B7A6;
  --error-text:#B3452F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#ECECEC;
    --ink-soft:#A3A3A3;
    --paper:#121212;
    --paper-raised:#1C1C1C;
    --rule:#333333;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 28px -12px rgba(0,0,0,.65);
    --wash:#232323;
    --error-bg:#3A211C;
    --error-border:#6B3A2C;
    --error-text:#F0A08C;
    --steel:#4F85BC;
    --green-text:#399424;
  }
}
:root[data-theme="dark"]{
  --ink:#ECECEC;
  --ink-soft:#A3A3A3;
  --paper:#121212;
  --paper-raised:#1C1C1C;
  --rule:#333333;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 28px -12px rgba(0,0,0,.65);
  --wash:#232323;
  --error-bg:#3A211C;
  --error-border:#6B3A2C;
  --error-text:#F0A08C;
  --steel:#4F85BC;
  --green-text:#399424;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,.wordmark{
  font-family:'Baloo 2', 'Segoe UI', ui-sans-serif, sans-serif;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.mono{font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums;}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px;}

/* Lets a keyboard or screen-reader visitor jump straight past the topbar
   and full nav menu (repeated at the top of every page) to the actual
   page content — invisible until it receives keyboard focus, at which
   point it's the very first thing Tab lands on. See includes/header.php
   for the link itself and the "main-content" id it points to. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--green-900); color:var(--on-accent);
  padding:14px 22px; font-weight:700; text-decoration:none; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---- Topbar ---- */
.topbar{ background:var(--green-900); }
.topbar-row{
  display:flex; align-items:center; justify-content:flex-end; gap:10px 24px;
  /* padding-top/-bottom only (not the "9px 0" shorthand) — a shorthand
     here would zero out the left/right padding this div already gets
     from the .wrap class it's combined with, leaving its content flush
     against the screen edge on any viewport narrower than .wrap's
     1120px max-width (i.e. basically every phone). Same reasoning below
     for .nav-row, .footer-grid, and .footer-bottom. */
  padding-top:9px; padding-bottom:9px; font-size:.86rem; font-weight:700; flex-wrap:wrap;
}
.topbar-row a{
  display:inline-flex; align-items:center; gap:7px; color:var(--on-accent); text-decoration:none; opacity:.94;
  white-space:nowrap;
}
.topbar-row a:hover{ opacity:1; text-decoration:underline; }
.topbar-row svg{ width:15px; height:15px; flex:none; }

/* ---- Nav ---- */
header.site{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-top:14px; padding-bottom:14px;
}
.wordmark-link{display:flex; align-items:center; text-decoration:none;}
.site-logo{ display:block; height:38px; width:auto; }
.footer-logo{ height:34px; }
nav.primary{display:flex; align-items:center; gap:4px;}
nav.primary a{
  font:inherit; font-family:'Public Sans', sans-serif; font-weight:600; font-size:.92rem;
  background:none; border:none; color:var(--ink-soft); cursor:pointer; text-decoration:none;
  padding:8px 12px; border-radius:8px; transition:background .15s, color .15s;
}
nav.primary a:hover{ color:var(--ink); background:var(--wash); }
nav.primary a[aria-current="page"]{ color:var(--green-text); background:var(--wash); }
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-toggle{
  display:none; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; padding:0; border-radius:10px;
  border:1.5px solid var(--rule); background:var(--paper); color:var(--ink);
  cursor:pointer;
}
.nav-toggle:hover{ background:var(--wash); }
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Public Sans', sans-serif; font-weight:700; font-size:.94rem;
  padding:11px 20px; border-radius:999px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
  /* Without this, a <button> that gets JS-disabled (e.g. "Sending —
     please wait…") falls back to the browser's native disabled-control
     look in some browsers' dark mode instead of just dimming our own
     colors — which is where a stray orange/brown tint was coming from. */
  appearance:none; -webkit-appearance:none;
}
.btn:active{transform:translateY(1px);}
.btn-primary{ background:var(--green-700); color:var(--on-accent); box-shadow:var(--shadow); }
.btn-primary:hover{ filter:brightness(.92); }
.btn:disabled{ cursor:default; opacity:.75; }
.btn-ghost{ background:transparent; color:var(--green-text); border-color:var(--green-700); }
.btn-ghost:hover{ background:var(--wash); }
.btn-sm{ padding:8px 14px; font-size:.82rem; }
.btn svg{width:16px; height:16px; flex:none;}

/* Keeps an in-page anchor link (e.g. /about#industries in the footer),
   a browser's own "jump to text" match, or just landing mid-scroll from
   scrolling to a specific spot on the page (e.g. Safari restoring scroll
   position) from tucking a heading half behind the sticky header. Set
   globally (not just on section[id]) so it covers every heading, not
   only the ones with an anchor id. Matches the header's real height
   plus a little breathing room. */
html{scroll-padding-top:96px;}
section[id]{scroll-margin-top:96px;}

/* ---- Sections ----
   Type scale and section spacing bumped up a notch from the original
   (h1 3.35rem->3.75rem ceiling, h2 2rem->2.35rem, more room above/below
   each section) for a more confident, editorial feel — presentation
   only, no copy, layout, color, or font-family changes. */
main{display:block;}
section{padding:80px 0;}
.eyebrow{
  font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.1rem;
  letter-spacing:.03em; text-transform:uppercase; color:var(--steel);
  margin:0;
}
.eyebrow::after{
  content:""; display:block; width:44px; height:3px; background:var(--steel);
  border-radius:2px; margin:10px 0 20px;
}
/* For the rare centered section (currently just the 404 page) — the
   underline is a block-level element, so text-align:center on its
   container centers the "404" text above it but not this bar, which
   otherwise stays pinned to the left edge. */
.eyebrow-center::after{margin-left:auto; margin-right:auto;}
h1{font-size:clamp(2.25rem, 5vw, 3.75rem); line-height:1.04; font-weight:800; letter-spacing:-.015em;}
h2{font-size:clamp(1.65rem, 3.1vw, 2.35rem); font-weight:700; letter-spacing:-.01em;}
h3{font-size:1.18rem; font-weight:700;}
.lede{font-size:1.14rem; color:var(--ink-soft); max-width:52ch; margin-top:18px;}
.accent{color:var(--green-700);}

/* ---- Hero ---- */
.hero{padding-top:64px; padding-bottom:52px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;}
.hero-actions{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.hero-figure{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:20px;
  padding:26px; box-shadow:var(--shadow);
}
.ledger-row{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px dashed var(--rule); font-size:.92rem;}
.ledger-row:last-child{border-bottom:none;}
.ledger-row .label{color:var(--ink-soft);}
.ledger-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; margin-top:6px; border-top:2px solid var(--green-700); font-weight:700;}
.ledger-total .amt{color:var(--green-700); font-size:1.2rem;}
.ledger-caption{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;}

/* Screen-reader/SEO-only text: keeps heading order (h1 -> h2 -> h3 ...)
   correct for accessibility and search engines without changing what's
   visually on the page. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.badge-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:52px;}
.badge-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px;
  padding:20px 18px; text-align:left;
}
.badge-card .icon{
  width:38px; height:38px; border-radius:10px; background:var(--wash);
  display:flex; align-items:center; justify-content:center; color:var(--green-700); margin-bottom:14px;
}
.badge-card .icon svg{width:20px; height:20px;}
.badge-card h3{font-size:.98rem; margin-bottom:4px;}
.badge-card p{margin:0; font-size:.86rem; color:var(--ink-soft);}

/* ---- Cards / grids ---- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.card .icon{
  width:42px; height:42px; border-radius:11px; background:var(--wash);
  display:flex; align-items:center; justify-content:center; color:var(--green-700);
}
.card .icon svg{width:22px; height:22px;}
.card p{margin:0; color:var(--ink-soft); font-size:.92rem;}
/* When a whole card is itself a link (the industries grid on about.php),
   give it a hover state so it reads as clickable. */
a.card{transition:border-color .15s, box-shadow .15s;}
a.card:hover{border-color:var(--green-700); box-shadow:var(--shadow);}
a.card h3{color:var(--ink);}

.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap;}
.link-more{font-weight:700; font-size:.9rem; color:var(--green-text); text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.link-more svg{width:15px;height:15px;}
.link-more:hover{text-decoration:underline;}

.trait-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
.trait-row span{
  font-size:.78rem; font-weight:700; letter-spacing:.03em; color:var(--ink-soft);
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:999px;
  padding:6px 13px;
}

.trait-list{display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; list-style:none; padding:0; margin:30px 0 0;}
.trait-list li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--ink-soft);}
.trait-list li svg{flex:none; width:18px; height:18px; color:var(--green-700); margin-top:2px;}
.trait-list strong{color:var(--ink); display:block; font-family:'Baloo 2', sans-serif; font-size:.98rem; margin-bottom:2px;}

/* ---- Careers: open positions ---- */
.role-count{
  font-family:'Public Sans', sans-serif; font-weight:600; font-size:1rem; color:var(--ink-soft);
  margin-left:12px; white-space:nowrap;
}
.role-list{display:flex; flex-direction:column; gap:14px; margin-top:26px;}
.role-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px;
  padding:26px 28px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.role-card:hover{ border-color:var(--green-700); box-shadow:var(--shadow); transform:translateY(-2px); }
.role-card-main{flex:1 1 320px; min-width:240px;}
.role-card-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.role-card-top h3{margin:0;}
.role-title-link{color:inherit; text-decoration:none;}
.role-title-link:hover{color:var(--green-text); text-decoration:underline;}
.role-meta{
  font-size:.76rem; font-weight:700; letter-spacing:.02em; color:var(--steel);
  background:var(--wash); padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.role-card p{margin:0; color:var(--ink-soft); font-size:.92rem; max-width:60ch;}
.role-apply{flex:none;}
.role-comp{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 10px;}
.role-salary{font-weight:700; font-size:.88rem; color:var(--green-text);}
.role-comp-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--wash); padding:3px 10px; border-radius:999px;
}

.note-card{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px;
  padding:26px 28px; margin-top:24px;
}
.note-card .icon{
  width:38px; height:38px; border-radius:10px; background:var(--wash); color:var(--steel);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.note-card .icon svg{width:20px; height:20px;}
/* Lets the text column shrink below its content's natural one-line width
   so a long heading (e.g. the full legal entity name) wraps onto
   multiple lines on narrow screens instead of overflowing the card. */
.note-card > div:last-child{min-width:0;}
.note-card h3{margin-bottom:8px;}
.note-card p{margin:0 0 8px; color:var(--ink-soft); font-size:.92rem; max-width:68ch; overflow-wrap:anywhere;}
.note-card p:last-child{margin-bottom:0;}

/* A note-card with a call-to-action button (e.g. careers page "Don't see
   the right fit?") — same right-aligned button placement as .role-card's
   "Apply for this role" button, instead of the button sitting under the
   paragraph text. */
.note-card-with-action{align-items:center; justify-content:space-between; flex-wrap:wrap;}
.note-card-with-action > div:last-of-type{flex:1 1 320px; min-width:240px;}
.note-card-action{flex:none;}

/* ---- FAQ ---- */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:74ch;}
.faq-item{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:14px;
  padding:4px 24px;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0; margin:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary svg{width:18px; height:18px; flex:none; color:var(--steel); transition:transform .15s ease;}
.faq-item[open] summary svg{transform:rotate(180deg);}
.faq-item p{margin:0 0 20px; color:var(--ink-soft); font-size:.94rem; max-width:64ch; line-height:1.6;}

/* ---- Form ---- */
.form-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:20px;
  padding:36px; box-shadow:var(--shadow); margin-top:8px;
}
.callback-note{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--wash); border-left:4px solid var(--green-700); border-radius:10px;
  padding:22px 24px; margin-bottom:30px; font-size:1.15rem; color:var(--ink);
  box-shadow:var(--shadow);
}
.callback-note svg{flex:none; width:30px; height:30px; color:var(--green-700); margin-top:1px;}
.callback-note strong{color:var(--green-700); font-family:'Baloo 2', sans-serif; font-size:1.4rem; display:block; margin-bottom:4px;}
.callback-note-detail{font-size:.92rem; color:var(--ink-soft);}

/* ---- Contact form: collapsed "help us prepare" section ---- keeps the
   handful of fields actually needed to place a callback (name, phone,
   email, company, preferred time) visible up front, without losing the
   optional scoping questions — they're one click away instead of adding
   to what first reads as a long intake form. */
.form-optional-section summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--wash); border:1px solid var(--rule); border-radius:12px; padding:14px 18px;
  font-family:'Public Sans', sans-serif; font-weight:700; font-size:.94rem; color:var(--ink);
}
.form-optional-section summary::-webkit-details-marker{display:none;}
.form-optional-section summary svg{width:16px; height:16px; flex:none; color:var(--steel); transition:transform .15s ease;}
.form-optional-section[open] summary svg{transform:rotate(180deg);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 22px;}
.field{display:flex; flex-direction:column; gap:6px;}
/* .field sets its own "display", which (per normal CSS cascade rules) beats
   the browser's built-in "[hidden]{display:none}" rule even though the two
   look unrelated — so a hidden .field would still show without this. */
.field[hidden]{display:none;}
.field.full{grid-column:1 / -1;}
.field label{font-size:.82rem; font-weight:700; color:var(--ink-soft);}
.field label .req{color:var(--steel); margin-left:2px;}
.field-hint{margin:0; font-size:.82rem; font-weight:400; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  font:inherit; font-family:'Public Sans', sans-serif; font-size:.95rem;
  padding:11px 13px; border-radius:10px; border:1.5px solid var(--rule);
  background:var(--paper); color:var(--ink); width:100%;
}
.field select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5240' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px;
}
.field textarea{resize:vertical; min-height:90px;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--green-700); outline:none;
}
.file-field{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
/* Selector is ".field .file-field-input" (not just ".file-field-input") so
   it wins specificity over the generic ".field input" rule above, which
   would otherwise override this width/position and leave the native file
   input visible and full-width instead of properly hidden behind the
   styled "Choose File" button. */
.field .file-field-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.file-field-btn{
  display:inline-flex; align-items:center; font:inherit; font-family:'Public Sans', sans-serif;
  font-weight:700; font-size:.85rem; padding:10px 18px; border-radius:8px;
  background:var(--wash); color:var(--ink); border:1.5px solid var(--rule); cursor:pointer; white-space:nowrap;
}
.file-field-btn:hover{ background:var(--rule); }
.file-field-input:focus-visible + .file-field-btn{ outline:3px solid var(--focus); outline-offset:2px; }
.file-field-name{ font-size:.88rem; color:var(--ink-soft); }
.field.has-error .file-field-btn{ border-color:var(--error-text); color:var(--error-text); }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--error-text); }
.radio-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px;}
.radio-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:600; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:999px; padding:9px 16px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.radio-chip input{ margin:0; width:15px; height:15px; accent-color:var(--green-700); }
.radio-chip:has(input:checked){ border-color:var(--green-700); color:var(--green-text); background:var(--wash); }
.field.has-error .radio-chip{ border-color:var(--error-text); }

.job-description-box{
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:14px 16px; font-size:.9rem; color:var(--ink-soft); white-space:pre-line; line-height:1.6;
}
.job-description-box p{margin:0 0 12px;}
.job-description-box ul{margin:0 0 12px; padding-left:20px;}
.job-description-box li{margin-bottom:4px;}
.job-description-box p:last-child, .job-description-box ul:last-child{margin-bottom:0;}
/* Collapsed by default (job.php's own page still shows the description
   in full — this toggle is specifically for the Apply form, where the
   same text repeated in full above the fields pushed the first input
   over a thousand pixels down the page on mobile). */
.job-description-details summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-family:'Public Sans', sans-serif; font-weight:700; font-size:.88rem; color:var(--green-text);
}
.job-description-details summary::-webkit-details-marker{display:none;}
.job-description-details summary svg{width:14px; height:14px; flex:none; transition:transform .15s ease;}
.job-description-details[open] summary svg{transform:rotate(180deg);}
.job-description-details .job-description-box{margin-top:10px;}
.disclosure-box{
  background:var(--wash); border:1px solid var(--rule); border-radius:12px;
  padding:16px 20px; font-size:.86rem; color:var(--ink-soft); line-height:1.6;
}
.disclosure-box strong{color:var(--ink);}
.background-note-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.background-note-row input[type="text"]{flex:1 1 260px; width:auto;}
.na-checkbox{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.86rem;
  color:var(--ink-soft); white-space:nowrap; cursor:pointer;
}
.na-checkbox input{margin:0; width:16px; height:16px; accent-color:var(--green-700);}
.field-error{color:var(--error-text); font-size:.8rem; margin:0;}
.form-submit{margin-top:28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}

/* ---- Sending popup ---- shown the moment either form is submitted, so
   the "don't close the tab" warning is impossible to miss (rather than
   relying on the small print below the button, which is easy to scroll
   past without reading). */
.submit-modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px;
  /* This used to be only 60% opaque with a 1px blur, which was faint
     enough that whatever was on the page underneath — most noticeably
     the orange/red "a few fields need a second look" banner and
     field-error text on this same form after a resubmit — showed
     straight through it. That's what was actually behind the dark-mode
     "orange tint" report on this loading screen: not a themed color
     anywhere in the modal itself (every color here already came from
     the shared --token system and was correct in both themes), but the
     page behind the modal bleeding through a backdrop that wasn't
     opaque enough to fully hide it. */
  background:rgba(15,16,11,.96); backdrop-filter:blur(3px);
}
.submit-modal-overlay[hidden]{display:none;}
.submit-modal{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:18px;
  box-shadow:var(--shadow); padding:32px 30px; max-width:400px; text-align:center;
}
.submit-modal-spinner{
  width:38px; height:38px; margin:0 auto 16px; border-radius:50%;
  border:3.5px solid var(--wash); border-top-color:var(--green-700);
  animation:submit-modal-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .submit-modal-spinner{animation-duration:2.4s;}
}
@keyframes submit-modal-spin{ to{ transform:rotate(360deg); } }
.submit-modal h3{margin:0 0 8px; font-size:1.15rem;}
.submit-modal p{margin:0; font-size:.92rem; color:var(--ink-soft); line-height:1.55;}
.form-banner{
  display:flex; align-items:flex-start; gap:12px; font-size:.92rem; color:var(--ink);
  background:var(--wash); border:1px solid var(--rule); border-radius:14px; padding:16px 18px; margin-bottom:26px;
}
.form-banner.error{ background:var(--error-bg); border-color:var(--error-border); }
.form-banner svg{flex:none; width:20px; height:20px; color:var(--green-700); margin-top:1px;}
.form-banner.error svg{ color:var(--error-text); }
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.small-print{margin-top:36px; text-align:center; color:var(--ink-soft); font-size:.84rem;}
.small-print a{color:var(--green-text); text-decoration:none; font-weight:700;}
.small-print a:hover{text-decoration:underline;}

.contact-methods{
  display:flex; gap:16px 32px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin-top:32px; padding:24px 28px; background:var(--paper-raised); border:1px solid var(--rule); border-radius:16px;
}
.contact-methods p{ width:100%; text-align:center; margin:0 0 4px; font-size:.86rem; color:var(--ink-soft); }
.contact-methods a{
  display:inline-flex; align-items:center; gap:10px; font-family:'Baloo 2', sans-serif;
  font-weight:700; font-size:1.08rem; color:var(--green-text); text-decoration:none;
}
.contact-methods a:hover{text-decoration:underline;}
.contact-methods svg{width:20px; height:20px; flex:none;}

.credential-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.credential{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wash); border:1px solid var(--steel); color:var(--steel);
  padding:8px 14px 8px 10px; border-radius:999px; font-weight:700; font-size:.82rem;
}
.credential svg{width:16px; height:16px;}

.band{
  background:var(--green-900); color:var(--on-accent);
  border-radius:24px; padding:48px 44px; margin-top:8px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.band h2{color:inherit;}
.band p{color:inherit; opacity:.82; margin:8px 0 0; max-width:46ch;}
.band .btn-primary{ background:var(--on-accent); color:var(--green-900); }
.band .btn-primary:hover{ background:var(--wash); }
.band .btn-ghost{ border-color:var(--on-accent); color:var(--on-accent); }
.band .btn-ghost:hover{ background:rgba(255,255,255,.12); }

/* ---- Process list (About) ---- */
.process{display:flex; flex-direction:column; gap:0; margin-top:28px; border-top:1px solid var(--rule);}
.process-step{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--rule);}
.process-step .num{font-family:'IBM Plex Mono', monospace; font-weight:600; color:var(--steel); font-size:1.1rem;}
.process-step h3{margin-bottom:4px;}
.process-step p{margin:0; color:var(--ink-soft); font-size:.92rem; max-width:60ch;}

.quote{
  font-family:'Baloo 2', sans-serif; font-weight:600; font-size:1.3rem; line-height:1.4;
  color:var(--ink); border-left:3px solid var(--green-700); padding-left:22px; margin:0;
  max-width:56ch;
}

/* ---- Footer ---- */
footer{border-top:1px solid var(--rule); margin-top:24px;}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px;
  padding-top:40px; padding-bottom:28px; flex-wrap:wrap;
}
.footer-nav{display:flex; gap:22px; flex-wrap:wrap;}
.footer-nav a{
  font:inherit; font-family:'Public Sans',sans-serif; font-size:.88rem; font-weight:600;
  background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:0; text-decoration:none;
}
.footer-nav a:hover{color:var(--green-text);}
.footer-contact{font-size:.88rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px;}
.footer-contact a{text-decoration:none;}
.footer-contact a:hover{color:var(--green-text);}
.footer-bottom{
  border-top:1px solid var(--rule); padding-top:18px; padding-bottom:18px; font-size:.78rem; color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

@media (max-width: 860px){
  .topbar-row{justify-content:center; text-align:center; font-size:.78rem;}
  .nav-row{flex-wrap:wrap;}
  .nav-toggle{display:inline-flex;}
  /* Below 860px, .nav-row wraps to two lines (logo alone on the first);
     without this, .nav-cta (the callback button + the hamburger) simply
     packs to the start of its own line — left-aligned, directly under the
     logo — leaving the hamburger stuck right next to "Get a Callback"
     instead of sitting at the right edge of the header like a menu button
     normally does. Making .nav-cta span the full second line and spacing
     its two children apart puts the hamburger on the right, separate from
     the callback button on the left. */
  .nav-cta{width:100%; justify-content:space-between;}
  nav.primary{
    display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:2px;
    padding-top:12px; margin-top:12px; border-top:1px solid var(--rule);
  }
  nav.primary.is-open{display:flex;}
  nav.primary a{padding:12px 14px; border-radius:8px;}
  .hero-grid{grid-template-columns:1fr;}
  .badge-row, .grid-3{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
  .band{padding:36px 26px; flex-direction:column; align-items:flex-start;}
}
@media (max-width: 560px){
  .badge-row, .grid-3{grid-template-columns:1fr;}
  section{padding:52px 0;}
  .process-step{grid-template-columns:40px 1fr;}
}
/* ---- Scroll cue (floating) ---- */
/* A small "there's more below" affordance for a page that opens with a
   big heading and a short lede, followed by a stretch of content below —
   without something here, that first screenful can read as the entire
   page rather than an opener. Fixed to the bottom-right corner so it
   stays put as the visitor scrolls (rather than living inside one
   section), and a small script (see the pages that use it) hides it once
   a sentinel near the footer comes into view — i.e. once they've
   actually reached the bottom. Doubles as a real "jump down" control
   rather than being purely decorative. Respects prefers-reduced-motion. */
.scroll-fab{
  position:fixed; right:20px; bottom:20px; z-index:40;
  display:flex; align-items:center; gap:8px;
  background:var(--green-700); color:var(--on-accent); border:0; border-radius:999px;
  padding:12px 18px; font-family:'Public Sans', sans-serif; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; box-shadow:0 10px 24px rgba(0,0,0,.2);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.scroll-fab.is-visible{
  opacity:.92; visibility:visible; transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s;
}
.scroll-fab:hover{opacity:1;}
.scroll-fab svg{width:16px; height:16px; animation:scroll-cue-bounce 1.8s ease-in-out infinite;}
@keyframes scroll-cue-bounce{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(4px);}
}
@media (prefers-reduced-motion: reduce){
  .scroll-fab svg{animation:none;}
}
@media (max-width: 640px){
  .scroll-fab{right:16px; bottom:16px; padding:10px 14px; font-size:.72rem;}
}

@media (max-width: 700px){
  .trait-list{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .form-card{padding:26px 20px;}
  .role-card{flex-direction:column; align-items:flex-start; padding:22px 22px;}
  .role-card-main{flex:none; width:100%;}
  .role-apply{width:100%; justify-content:center;}
  #share-job-btn{width:100%; justify-content:center;}
  .note-card-with-action{flex-direction:column; align-items:flex-start;}
  .note-card-action{width:100%; justify-content:center;}
}