/* ==========================================================================
   Tree of Knowledge — ABA (tokaba.org)
   Desktop values are taken verbatim from the approved Claude Design artboard.
   Everything responsive, and the a11y affordances, are additions on top.
   ========================================================================== */

:root {
  --green:        #4a8c6a;
  --green-dark:   #376652;
  --green-light:  #5fa882;
  --green-pale:   #dff0e8;
  --green-pale-2: #c4e0d0;
  --green-tint:   #f2faf5;

  --ink:    #2c2416;
  --text:   #5a4e3c;
  --muted:  #a89e8e;

  --border:   #e4ddd2;
  --border-2: #d4c9b8;

  --bg:     #fdfaf6;
  --bg-alt: #f7f2eb;
  --white:  #fff;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --col: 920px;
  --gutter: 52px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

h1, h2, h3 { margin: 0; font-weight: 500; }

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

.wrap { max-width: var(--col); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green-dark);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  border-radius: 28px;
  padding: 13px 26px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); color: var(--white); }
.btn-hint { opacity: .75; font-weight: 400; font-size: 12px; }

.btn-outline {
  color: var(--green-dark);
  font-weight: 600;
  padding: 13px 22px;
  border: 1.5px solid var(--green-pale-2);
}
.btn-outline:hover { border-color: var(--green-light); background: var(--white); }

.btn-nav { font-size: 13px; padding: 9px 20px; border-radius: 24px; }
.btn-compact { font-size: 13px; padding: 12px 22px; border-radius: 24px; white-space: nowrap; }

.btn-white { background: var(--white); color: var(--green-dark); }
.btn-white:hover { background: var(--green-pale); color: var(--green-dark); }

.btn-bordered {
  color: var(--green-dark);
  padding: 12px 24px;
  border: 2px solid var(--green);
  white-space: nowrap;
}
.btn-bordered:hover { background: var(--green); color: var(--white); }

/* ── Section furniture ───────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-light);
}

.section-title {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ink);
  line-height: 1.25;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  height: 64px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand img { height: 38px; width: auto; }

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links > li > a,
.loc-trigger {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.nav-links a.is-current { font-weight: 700; color: var(--green-dark); }

.loc-dd { position: relative; }
.loc-trigger {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.loc-trigger:hover { color: var(--green-dark); }

.loc-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  display: none;
  z-index: 10;
}
/* The menu sits 10px below the trigger, and that strip belongs to neither: a
   cursor travelling from "Locations" down to a state left .loc-dd on the way,
   :hover dropped, and the menu closed under the pointer. This bridges the gap
   with an invisible extension of the menu itself, so the hover target is
   continuous. It only exists while the menu is open, so it never blocks clicks
   on whatever is underneath. */
.loc-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
}

/* opens on hover for pointers, on focus-within for keyboard and touch */
.loc-dd:hover .loc-menu,
.loc-dd:focus-within .loc-menu { display: block; }

.loc-menu a { display: block; padding: 8px 12px; border-radius: 12px; }
.loc-menu a:hover { background: var(--green-tint); }
.loc-name { display: block; font-size: 13px; font-weight: 600; color: var(--green-dark); }
.loc-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-2);
  padding: 80px var(--gutter) 72px;
}
.hero-blob {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--green-pale);
  opacity: .45;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  background: var(--white);
  border: 1px solid var(--green-pale-2);
  border-radius: 26px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}
.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-light);
}

.founder-note {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hero h1 {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 20px;
}
.hero h1 em { color: var(--green); font-style: italic; }

.lead {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  max-width: 460px;
}

.help-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  margin-bottom: 26px;
  padding: 16px 20px;
  background: var(--green-dark);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(55, 102, 82, .25);
}
.pulse-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.help-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
}
.help-note {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-chips li { font-size: 12px; font-weight: 600; color: var(--text); }

.hero-figure {
  position: relative;
  margin: 0;
  height: 100%;
  min-height: 320px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(74, 140, 106, .12);
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 30%;
}
.hero-figure figcaption {
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ── Stats ───────────────────────────────────────────────────────────── */

.stats-wrap { padding-inline: var(--gutter); margin-top: 40px; }

.stats {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 26px;
  padding: 28px 24px;
  box-shadow: 0 6px 28px rgba(74, 140, 106, .08);
}
.stats-label {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats dl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; }
.stats dt {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--green);
  line-height: 1;
  margin-bottom: 4px;
}
.stats dd { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text); }

/* ── How it works ────────────────────────────────────────────────────── */

.steps-section { background: var(--white); padding: 64px var(--gutter); }
.steps-section .section-title { margin-bottom: 44px; }

.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* dashed connector running behind the numbered markers */
.steps::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--green-pale-2) 0 10px, transparent 10px 18px);
  z-index: 0;
}
.steps li { position: relative; padding-right: 22px; }
.steps li + li { padding-left: 22px; }
.steps li:last-child { padding-right: 0; }

.step-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--white);
}
.steps h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--green-dark); margin-bottom: 7px; }
.steps p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }

/* ── About ABA ───────────────────────────────────────────────────────── */

.about-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 72px var(--gutter);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start;
  margin-bottom: 56px;
}
.about-section .section-title { margin-bottom: 32px; }
.about-grid p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}
.about-grid p.last { margin-bottom: 0; }

/* The artwork is a transparent cut-out, not a rectangular photo: a fixed height
   with object-fit: cover would slice its edges off, and a border-radius would
   frame a shape that has no corners to round. It sizes to its own ratio instead. */
.about-figure {
  margin: 0;
  width: 100%;
}
.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.areas-label {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.areas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.areas li {
  background: var(--bg-alt);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  padding: 18px 16px;
}
.areas strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.areas p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text); }

/* ── Services ────────────────────────────────────────────────────────── */

.services-section { background: var(--bg-alt); padding: 72px var(--gutter); }
.services-section .section-title { margin-bottom: 32px; }

.service-primary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 8px;
  padding: 24px;
  background: var(--white);
  border: 1.5px solid var(--green);
  border-radius: 22px;
}
.service-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 26px;
}
.service-primary h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.service-primary > div > p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); }

.service-rows article {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border-2);
}
.service-rows article:last-child { border-bottom: 0; }
.service-num {
  flex-shrink: 0;
  width: 28px;
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
}
.service-rows h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.service-rows p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); }

/* ── CTA band ────────────────────────────────────────────────────────── */

.cta-band { background: var(--green); padding: 52px var(--gutter); }
.cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cta-band h2 {
  font-family: var(--serif);
  font-size: 27px;
  color: var(--white);
  margin: 0 0 6px;
}
.cta-band p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}

/* ── Intake ──────────────────────────────────────────────────────────── */

.intake-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 80px var(--gutter);
}
.intake-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
}
.intake-section .section-title { margin-bottom: 14px; }
.intake-lead {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.checks li::before {
  content: "✓";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-pale);
  border: 1.5px solid var(--green-light);
  font-size: 11px;
  color: var(--green-dark);
}

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(74, 140, 106, .07);
}
.form-card-head { background: var(--green); padding: 22px 26px; }
.form-step {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.form-card-head h3 { font-family: var(--serif); font-size: 18px; color: var(--white); }
.form-card-body { padding: 24px 26px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset[disabled] { opacity: .6; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { margin-bottom: 15px; }
.field-row .field { margin-bottom: 0; }
.field-row { margin-bottom: 15px; }

.field label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.field input,
.field select {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px var(--green-pale);
}
.field input::placeholder { color: var(--muted); }
fieldset[disabled] .field input,
fieldset[disabled] .field select { cursor: not-allowed; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-submit {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 16px;
  background: var(--green);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease;
}
.btn-submit:hover:enabled { background: var(--green-dark); }
fieldset[disabled] .btn-submit { cursor: not-allowed; }

.stage-note {
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--green-tint);
  border: 1px solid var(--green-pale-2);
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--green-dark);
}

.form-offline {
  margin: 14px 0 0;
  padding: 11px 14px;
  background: var(--green-tint);
  border: 1px solid var(--green-pale-2);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--green-dark);
}
.form-offline a { color: inherit; text-decoration: underline; }

.form-status { margin: 10px 0 0; font-size: 13px; font-weight: 700; text-align: center; }
.form-status:empty { margin: 0; }
.form-status[data-state="error"]   { color: #a4402f; }
.form-status[data-state="success"] { color: var(--green-dark); }
.form-status[data-state="pending"] { color: var(--muted); }

.field-error {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #a4402f;
}

.form-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}

/* ── Locations ───────────────────────────────────────────────────────── */

.locations-section {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-2);
  padding: 64px var(--gutter);
}
.locations-section .section-title { margin-bottom: 28px; }

.locations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.locations li {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
}
.locations h3 {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.locations p {
  flex: 1;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.locations address {
  font-style: normal;
  font-size: 12px;
  color: var(--text);
}
.tel { font-size: 13px; font-weight: 600; color: var(--green); margin-top: 4px; }
.tel:hover { text-decoration: underline; }
.loc-link {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
}
.loc-link:hover { text-decoration: underline; }

/* ── Location pages ──────────────────────────────────────────────────── */

.loc-copy {
  margin: 0 0 16px;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}
.loc-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
/* The areas list reuses the .areas cards, which expect a <strong> plus a blurb;
   here each card is just a place name. */
.areas-plain { margin-bottom: 20px; }
.areas-plain strong { margin-bottom: 0; }

/* ── Careers ─────────────────────────────────────────────────────────── */

.careers-section {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 52px var(--gutter);
}
.careers-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.careers-section h2 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 8px;
}
.careers-section p {
  margin: 0;
  max-width: 480px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-2);
  padding: 36px var(--gutter);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-logo { height: 32px; width: auto; margin-bottom: 6px; }
.footer-tag { margin: 0; font-size: 12px; color: var(--muted); }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { font-size: 13px; font-weight: 600; color: var(--text); }
.footer-nav a:hover { color: var(--green-dark); }

/* ==========================================================================
   Responsive — the artboard is fixed-width, so every rule below is ours.
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --gutter: 32px; }

  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-figure { order: -1; min-height: 260px; max-height: 340px; }
  .lead, .help-card { max-width: none; }

  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  /* One column now, so cap the artwork at its native width rather than letting
     the wrap stretch it past 684px and upscale it. */
  .about-figure { max-width: 684px; margin-inline: auto; }

  .areas { grid-template-columns: repeat(3, 1fr); }
  .locations { grid-template-columns: repeat(2, 1fr); }

  .intake-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-card { max-width: 460px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }

  .nav-inner { height: auto; padding-block: 12px; flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; gap: 20px; }

  /* anchor the dropdown to the nav instead of the trigger so it cannot
     overhang the viewport on narrow screens */
  .loc-dd { position: static; }
  .loc-menu { top: 100%; left: var(--gutter); right: var(--gutter); min-width: 0; }
  .brand img { height: 32px; }

  .hero { padding-block: 48px 44px; }
  .hero h1 { font-size: 34px; }

  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before { display: none; }
  .steps li,
  .steps li + li { padding: 0; }
  .step-num { margin-bottom: 12px; }

  .steps-section,
  .about-section,
  .services-section,
  .locations-section { padding-block: 48px; }
  .intake-section { padding-block: 52px; }

  .service-primary { grid-template-columns: 1fr; align-items: start; }
  .service-rows article { flex-direction: column; gap: 4px; }
  .service-num { width: auto; }

  .cta-inner,
  .careers-inner { grid-template-columns: 1fr; gap: 20px; justify-items: start; }

  .areas { grid-template-columns: repeat(2, 1fr); }
  .locations { grid-template-columns: 1fr; }

  .section-title { font-size: 26px; }
}

@media (max-width: 460px) {
  .areas { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row .field { margin-bottom: 15px; }
  .hero-actions .btn { width: 100%; text-align: center; }
}

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