/* ==========================================================================
   Handel Development Group
   Black-tie monochrome: black, white, and a short grey scale. Every
   text/background pair below was checked against WCAG AA (4.5:1 text,
   3:1 for focus indicators and form-field borders).
   ========================================================================== */

:root {
  /* Surfaces — dark */
  --black:      #0B0B0B;
  --black-2:    #161616;
  --black-3:    #101010;
  --line-dark:  #2B2B2B;
  --field-dark: #666666;

  /* Surfaces — light */
  --paper:      #F5F5F3;
  --paper-2:    #EBEBE8;
  --white:      #FFFFFF;
  --line-light: #D6D6D2;
  --field-light:#8C8C88;

  /* Text */
  --on-dark:        #E8E8E6;
  --on-dark-muted:  #A6A6A2;
  --on-light:       #161616;
  --on-light-muted: #5A5A57;

  /* Feedback */
  --err-light: #B42318;
  --err-dark:  #FF8A80;
  --ok-light:  #1E6B3A;

  /* Spacing — kept deliberately tight so sections read as full, not sparse */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 2.75rem; --sp-6: 3.5rem; --sp-7: 5rem;

  /* Type — Libre Baskerville echoes the bold transitional serif in the logo */
  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shell: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--black);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
/* Elements waiting to slide in sit translated past the right edge, and a transform
   still counts toward scrollable width — so clip sideways overflow here or phones
   can be scrolled horizontally. `clip` (unlike `hidden`) creates no scroll
   container; `hidden` is the fallback for older browsers. */
main { overflow-x: hidden; overflow-x: clip; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 400; }
p { margin: 0 0 var(--sp-2); }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }

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

/* ---------- Shared ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--sp-3); }

.skip-link {
  position: absolute; left: var(--sp-2); top: -100px; z-index: 100;
  background: var(--white); color: var(--black);
  padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.section-light :where(a, button, input, select, textarea, summary, details):focus-visible,
.form-panel-light :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--black);
}

/* Eyebrow: small caps label led by a short rule, like the rule in the logo. */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-dark-muted);
  margin: 0 0 var(--sp-2);
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; flex: none; }
.section-light .eyebrow { color: var(--on-light-muted); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.55rem);
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: var(--sp-2);
}
.section-light .section-title { color: var(--black); }
.section-lede {
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  color: var(--on-dark-muted);
  max-width: 62ch;
}
.section-light .section-lede { color: var(--on-light-muted); }

.section { padding-block: clamp(var(--sp-6), 6.5vw, var(--sp-7)); }
.section-dark  { background: var(--black); color: var(--on-dark); }
.section-light { background: var(--paper); color: var(--on-light); }
.section-head { max-width: 68ch; margin-bottom: var(--sp-5); }

.link-line { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }
.link-line:hover { border-bottom-color: currentColor; }
.section-light .link-line { color: var(--black); border-bottom-color: rgba(0,0,0,.4); }

.ico { width: 1.15rem; height: 1.15rem; flex: none; }
.ico-lg { width: 1.75rem; height: 1.75rem; color: var(--white); }
.section-light .ico-lg { color: var(--black); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .85rem 1.75rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 44px; padding: .5rem 1rem; font-size: .76rem; letter-spacing: .08em; }
.btn-lg { min-height: 54px; padding: 1rem 2.1rem; }
.btn-block { width: 100%; }

/* On dark: solid white. */
.btn-primary { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-primary:hover { background: transparent; color: var(--white); }

/* On dark: white outline. */
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* On light: solid black. */
.btn-dark { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-dark:hover { background: transparent; color: var(--black); }

.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,11,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
  transition: background-color .3s var(--ease);
}
.site-header.is-stuck { background: rgba(11,11,11,.98); }
.header-inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 76px; }

/* Wordmark lockup mirroring the logo interior: name, rule, descriptor. */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--white); }
.brand-text { display: flex; flex-direction: column; align-items: stretch; line-height: 1; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.4rem; letter-spacing: .07em; text-transform: uppercase;
  text-align: center;
}
.brand-rule { display: block; height: 1px; background: currentColor; margin: .32rem 0 .3rem; }
.brand-sub {
  font-family: var(--font-display);
  font-size: .5rem; letter-spacing: .26em; text-transform: uppercase;
  text-align: center; white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.nav-list { display: flex; align-items: center; gap: var(--sp-3); list-style: none; }
.nav-list a {
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark); text-decoration: none;
  padding: .5rem 0; position: relative;
  transition: color .2s var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px;
  background: var(--white); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-list a:hover { color: var(--white); }
.nav-list a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 12px;
  background: transparent; border: 1px solid var(--line-dark);
  cursor: pointer;
}
.nav-toggle-bar { display: block; height: 1.5px; background: var(--white); margin: 4px 0; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 76px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black-2); border-top: 1px solid var(--line-dark);
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
    max-height: calc(100dvh - 76px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line-dark); font-size: .9rem; }
  .nav-list a::after { display: none; }
  .nav-cta { margin-top: var(--sp-3); }
}

/* ---------- Hero ---------- */
/* The bottom padding is the horizon's own band; --scape-h sizes both so the
   silhouette can never rise into the copy or the buttons. */
.hero {
  --scape-h: clamp(6.5rem, 12vw, 10rem);
  position: relative; overflow: hidden; background: var(--black);
  padding-block: clamp(var(--sp-5), 6vw, 5rem) calc(var(--scape-h) + var(--sp-2));
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-5); align-items: center;
  grid-template-columns: 1fr;
}
.hero-inner > * { min-width: 0; }
@media (min-width: 960px) { .hero-inner { grid-template-columns: 1.35fr 1fr; } }

.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.85rem);
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--white); margin-bottom: var(--sp-3);
}
.hero-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--on-dark); max-width: 48ch; margin-bottom: var(--sp-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hero-note { font-size: .84rem; color: var(--on-dark-muted); letter-spacing: .03em; margin: 0; }

.hero-seal { display: none; justify-self: center; width: min(360px, 100%); color: var(--white); margin: 0; }
.hero-seal svg { display: block; width: 100%; height: auto; }
@media (min-width: 960px) { .hero-seal { display: block; } }

/* ---------- Trust strip ---------- */
/* Double top rule: the thick-and-thin pairing of the logo's two rings. */
.trust {
  background: var(--black-2);
  border-top: 3px solid var(--white);
  box-shadow: inset 0 3px 0 var(--black-2), inset 0 4px 0 rgba(255,255,255,.35);
}
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.trust-item {
  padding: var(--sp-4) var(--sp-3);
  border-left: 1px solid var(--line-dark);
}
.trust-item:first-child { border-left: 0; }
@media (max-width: 519px) {
  .trust-item { border-left: 0; border-top: 1px solid var(--line-dark); }
  .trust-item:first-child { border-top: 0; }
}
.trust-item h2 {
  font-family: var(--font-display); font-size: 1rem;
  color: var(--white); margin: var(--sp-2) 0 .4rem;
}
.trust-item p { font-size: .88rem; color: var(--on-dark-muted); margin: 0; }

/* ---------- What we do ---------- */
.split { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-bottom: var(--sp-5); }
.split-card { background: var(--white); border: 1px solid var(--line-light); padding: var(--sp-4); }
.split-num {
  font-family: var(--font-display); font-size: .9rem; color: var(--on-light-muted);
  letter-spacing: .14em; margin: 0 0 var(--sp-2);
  padding-bottom: .6rem; border-bottom: 1px solid var(--line-light);
}
.split-card h3 {
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  margin-bottom: var(--sp-1); color: var(--black);
}
.split-card p { color: var(--on-light-muted); margin: 0; }

/* Four-step process row. */
.process { margin-bottom: var(--sp-4); }
.process-title {
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--on-light-muted);
  margin-bottom: var(--sp-2);
}
.process-steps {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  border: 1px solid var(--black); background: var(--white);
}
.process-steps li { padding: var(--sp-3); border-left: 1px solid var(--line-light); }
.process-steps li:first-child { border-left: 0; }
@media (max-width: 519px) {
  .process-steps li { border-left: 0; border-top: 1px solid var(--line-light); }
  .process-steps li:first-child { border-top: 0; }
}
.process-num {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--black); font-family: var(--font-display); font-size: .85rem;
  color: var(--black); margin-bottom: var(--sp-1);
}
.process-steps h4 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--black); }
.process-steps p { margin: 0; font-size: .88rem; color: var(--on-light-muted); }

.section-foot {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--on-light); max-width: 64ch; margin: 0;
}

/* ---------- Two-column layouts ---------- */
.sell-layout, .contact-layout, .careers-layout, .about-layout, .builder-layout {
  display: grid; gap: clamp(var(--sp-4), 5vw, var(--sp-6));
  grid-template-columns: 1fr;
}
/* Grid items default to min-width:auto and refuse to shrink below their content.
   Zeroing it lets long words wrap instead of widening the whole page. */
.sell-layout > *, .contact-layout > *, .careers-layout > *,
.about-layout > *, .builder-layout > *, .area-head > * { min-width: 0; }
@media (min-width: 940px) {
  .sell-layout, .contact-layout, .careers-layout { grid-template-columns: 1fr 1fr; align-items: start; }
  .about-layout { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .builder-layout { grid-template-columns: .9fr 1.1fr; align-items: start; }
}

.check-list { list-style: none; margin: var(--sp-3) 0; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 1.8rem; font-size: .95rem; color: var(--on-dark-muted); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .9rem; height: .45rem;
  border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--white); font-weight: 600; }
.section-light .check-list li { color: var(--on-light-muted); }
.section-light .check-list li::before { border-color: var(--black); }
.section-light .check-list strong { color: var(--black); }
.sell-alt { margin-top: var(--sp-3); font-size: .95rem; color: var(--on-dark-muted); }

/* ---------- Form panels ---------- */
.form-panel {
  background: var(--black-2); border: 1px solid var(--line-dark);
  border-top: 3px solid var(--white);
  padding: clamp(var(--sp-3), 3vw, var(--sp-4));
}
.form-panel-light { background: var(--white); border-color: var(--line-light); border-top-color: var(--black); color: var(--on-light); }
.form-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: .35rem; }
.form-panel .form-title { color: var(--white); }
.form-panel-light .form-title { color: var(--black); }
.form-sub { font-size: .88rem; color: var(--on-dark-muted); margin-bottom: var(--sp-3); }
.form-panel-light .form-sub { color: var(--on-light-muted); }

.field { margin-bottom: var(--sp-2); }
.field-row { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; gap: var(--sp-2); } }

.lead-form label {
  display: block; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark); margin-bottom: .45rem;
}
.form-panel-light .lead-form label { color: var(--on-light); }
.req { color: inherit; }
.opt { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--on-dark-muted); font-size: .76rem; }
.form-panel-light .opt { color: var(--on-light-muted); }

.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--on-dark);
  /* background-color, not the shorthand: the shorthand would reset the
     background-size/position that draws the select chevron below. */
  background-color: var(--black-3); border: 1px solid var(--field-dark);
  border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lead-form textarea { min-height: auto; resize: vertical; line-height: 1.6; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--on-dark-muted); opacity: 1; }
.lead-form input:hover, .lead-form select:hover, .lead-form textarea:hover { border-color: var(--on-dark-muted); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); outline-offset: 2px;
}
.form-panel-light .lead-form input,
.form-panel-light .lead-form select,
.form-panel-light .lead-form textarea {
  background-color: var(--white); color: var(--on-light); border-color: var(--field-light);
}
.form-panel-light .lead-form input:hover,
.form-panel-light .lead-form select:hover,
.form-panel-light .lead-form textarea:hover { border-color: var(--on-light-muted); }
.form-panel-light .lead-form input::placeholder,
.form-panel-light .lead-form textarea::placeholder { color: var(--on-light-muted); }
.form-panel-light .lead-form input:focus,
.form-panel-light .lead-form select:focus,
.form-panel-light .lead-form textarea:focus {
  border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black);
}
.lead-form select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-dark) 50%), linear-gradient(135deg, var(--on-dark) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.form-panel-light .lead-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--on-light) 50%), linear-gradient(135deg, var(--on-light) 50%, transparent 50%);
}

.field-hint { font-size: .78rem; color: var(--on-dark-muted); margin: .4rem 0 0; }
.form-panel-light .field-hint { color: var(--on-light-muted); }

.field-err { font-size: .84rem; color: var(--err-dark); margin: .4rem 0 0; font-weight: 500; }
.form-panel-light .field-err { color: var(--err-light); }
.lead-form [aria-invalid="true"] { border-color: var(--err-dark); }
.form-panel-light .lead-form [aria-invalid="true"] { border-color: var(--err-light); }

.form-alert {
  border: 1px solid var(--err-dark); border-left-width: 3px;
  background: rgba(255,138,128,.07);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  font-size: .9rem;
}
.form-panel-light .form-alert { border-color: var(--err-light); background: rgba(180,35,24,.05); }
.form-alert h4 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; color: var(--err-dark); }
.form-panel-light .form-alert h4 { color: var(--err-light); }
.form-alert ul { list-style: none; display: grid; gap: .3rem; }
.form-alert a { color: inherit; }
.form-alert.is-ok { border-color: var(--white); background: rgba(255,255,255,.06); }
.form-alert.is-ok h4 { color: var(--white); }
.form-panel-light .form-alert.is-ok { border-color: var(--ok-light); background: rgba(30,107,58,.06); }
.form-panel-light .form-alert.is-ok h4 { color: var(--ok-light); }

.form-privacy { font-size: .76rem; color: var(--on-dark-muted); margin: var(--sp-2) 0 0; }
.form-panel-light .form-privacy { color: var(--on-light-muted); }

/* Honeypot — hidden from people, reachable by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Builders ---------- */
.builder-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr));
  border: 1px solid var(--line-light); background: var(--white);
  margin-bottom: var(--sp-5);
}
.builder-card { padding: var(--sp-3); border-left: 1px solid var(--line-light); }
.builder-card:first-child { border-left: 0; }
@media (max-width: 519px) {
  .builder-card { border-left: 0; border-top: 1px solid var(--line-light); }
  .builder-card:first-child { border-top: 0; }
}
.builder-card h3 {
  font-family: var(--font-display); font-size: 1rem;
  margin: var(--sp-2) 0 .4rem; color: var(--black);
}
.builder-card p { font-size: .88rem; color: var(--on-light-muted); margin: 0; }

.builder-aside h3 {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--black); margin-bottom: var(--sp-1);
}
.builder-aside > p { color: var(--on-light-muted); }
.builder-figure {
  margin: var(--sp-3) 0 0; background: var(--white);
  border: 1px solid var(--line-light); padding: var(--sp-2);
}
.builder-figure img { width: 100%; height: auto; display: block; }
.builder-figure figcaption {
  font-family: var(--font-display); font-style: italic; font-size: .95rem;
  color: var(--on-light-muted); text-align: center;
  padding-top: var(--sp-1); border-top: 1px solid var(--line-light);
}

/* ---------- About ---------- */
.about-copy p { color: var(--on-dark-muted); max-width: 62ch; }
.about-sub {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--white); margin: var(--sp-4) 0 var(--sp-1);
}
/* Inset second frame echoes the logo's double ring. */
.mission-card {
  background: var(--black-2); border: 1px solid rgba(255,255,255,.6);
  outline: 1px solid var(--line-dark); outline-offset: -10px;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.mission-mark {
  font-family: var(--font-display); font-size: 3.5rem; line-height: .6;
  color: var(--white); margin: 0 0 var(--sp-2);
}
.mission-text {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.12rem, 1.9vw, 1.35rem);
  line-height: 1.55; color: var(--white); margin-bottom: var(--sp-3);
}
.mission-attr {
  display: inline-block; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-dark-muted); margin: 0;
  padding-top: .6rem; border-top: 1px solid var(--line-dark);
}

/* ---------- Service area ---------- */
.area-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  border: 1px solid var(--line-light); background: var(--white);
}
.area-block { padding: var(--sp-4) var(--sp-3); border-left: 1px solid var(--line-light); }
.area-block:first-child { border-left: 0; }
@media (max-width: 559px) {
  .area-block { border-left: 0; border-top: 1px solid var(--line-light); }
  .area-block:first-child { border-top: 0; }
}
.area-block h3 {
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--black);
  margin-bottom: var(--sp-2);
}
.area-text { font-size: .94rem; color: var(--on-light-muted); margin: 0; }
.area-note-block { background: var(--paper-2); }
.area-note-block p { font-size: .92rem; color: var(--on-light-muted); margin-bottom: var(--sp-2); }

/* ---------- FAQ ---------- */
.faq-columns { display: grid; gap: clamp(var(--sp-4), 4vw, var(--sp-5)); grid-template-columns: 1fr; }
@media (min-width: 940px) { .faq-columns { grid-template-columns: 1fr 1fr; } }
.faq-group-title {
  font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--white); padding-bottom: var(--sp-1);
  border-bottom: 2px solid var(--white);
}
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--on-dark); transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: .55rem; height: .55rem;
  border-right: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq-item summary:hover { color: var(--white); }
.faq-body { padding-bottom: 1.1rem; }
.faq-body p { color: var(--on-dark-muted); font-size: .94rem; max-width: 60ch; }
.faq-body p:last-child { margin-bottom: 0; }
.numbered { list-style: none; counter-reset: step; display: grid; gap: .55rem; margin-top: var(--sp-1); }
.numbered li {
  counter-increment: step; position: relative; padding-left: 2.1rem;
  font-size: .94rem; color: var(--on-dark-muted);
}
.numbered li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border: 1px solid var(--white); color: var(--white);
  font-size: .72rem; font-weight: 600;
}

/* ---------- Contact ---------- */
.contact-list { list-style: none; display: grid; margin-top: var(--sp-4); border-top: 1px solid var(--line-dark); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-dark); }
/* A flex item defaults to min-width:auto, so an unbreakable string like the email
   address would push the whole column past the viewport on a narrow phone. */
.contact-list li > span { min-width: 0; }
.contact-list .ico { color: var(--white); margin-top: .28rem; }
.contact-label {
  display: block; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-muted); margin-bottom: .2rem;
}
.contact-value {
  font-family: var(--font-display); font-size: clamp(1rem, 3.8vw, 1.15rem);
  color: var(--white); overflow-wrap: anywhere;
  text-decoration: none; transition: opacity .2s var(--ease);
}
a.contact-value:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black-3); border-top: 3px solid var(--white); padding-top: var(--sp-5); }
.footer-inner { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; padding-bottom: var(--sp-4); }
@media (min-width: 780px) { .footer-inner { grid-template-columns: 1.2fr 2fr; } }
.footer-brand { display: flex; gap: var(--sp-3); align-items: center; }
.footer-seal { width: 108px; flex: none; color: var(--white); display: block; }
.footer-seal svg { display: block; width: 100%; height: auto; }
.footer-blurb { font-size: .88rem; color: var(--on-dark-muted); max-width: 36ch; margin: 0; }
.footer-nav { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.footer-col h2 {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--white);
  margin-bottom: var(--sp-2); padding-bottom: .5rem; border-bottom: 1px solid var(--line-dark);
}
.footer-col { min-width: 0; }
.footer-col ul { list-style: none; display: grid; gap: .5rem; }
.footer-col a {
  font-size: .88rem; color: var(--on-dark-muted); text-decoration: none;
  overflow-wrap: anywhere; /* the email address is one long unbreakable token */
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--white); }

.footer-base {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between; align-items: baseline;
}
.footer-base p { font-size: .76rem; color: var(--on-dark-muted); margin: 0; }
.footer-fine { max-width: 56ch; }

/* ==========================================================================
   Scroll animation
   Every rule is scoped to .js, so with scripting off nothing is ever hidden —
   the page renders fully in its final state. Only opacity and transform are
   animated, both of which the compositor handles without relayout.
   ========================================================================== */
.js [data-anim] {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-anim="fade-up"]     { transform: translate3d(0, 24px, 0); }
.js [data-anim="slide-right"] { transform: translate3d(-28px, 0, 0); }
.js [data-anim="slide-left"]  { transform: translate3d(28px, 0, 0); }
.js [data-anim="zoom"]        { transform: scale(.955); }
.js [data-anim="fade"]        { transform: none; }

.js [data-anim].is-in { opacity: 1; transform: none; }

/* Stagger: JS stamps --anim-delay on each animated child of a stagger group. */
.js [data-anim] { transition-delay: calc(var(--anim-delay, 0) * 90ms); }

/* Parallax layers. JS writes --parallax-y; the element is correctly placed at 0. */
.js [data-parallax] { transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1; transform: none; transition: none; }
  .js [data-parallax] { transform: none; will-change: auto; }
}

/* ==========================================================================
   Property silhouettes
   ========================================================================== */

/* Hero: three horizon layers stacked at the base of the section. */
/* Kept low and faint: it should read as a horizon beneath the copy, never as
   texture behind the buttons. */
.hero-scape { position: absolute; inset: auto 0 0; height: var(--scape-h); pointer-events: none; overflow: hidden; opacity: .32; }
/* Softens the horizon into the section boundary instead of cutting it off. */
.hero-scape::after {
  content: ""; position: absolute; inset: auto 0 0; height: 80px;
  background: linear-gradient(to bottom, rgba(11,11,11,0), var(--black));
}
/* Hero layers only ever drift downward (they are anchored to page top), so they
   sit flush at the base and need no negative offset. */
.scape-layer {
  position: absolute; left: 50%; bottom: 0;
  width: 130%; min-width: 720px; max-width: none;
  transform: translateX(-50%);
  height: auto;
}
/* The parallax transform must keep the centring translate, so it composes here. */
.js .scape-layer[data-parallax] { transform: translate3d(-50%, var(--parallax-y, 0px), 0); }

/* Full-bleed divider band. */
/* The frame is a fixed slice of the artwork's own aspect ratio, so the treeline
   lands in view at every width. The art (1440x340) overhangs the 1440x200 frame
   top and bottom, which is the headroom the parallax drift moves within. */
.scape-band {
  position: relative; background: var(--black); overflow: hidden; line-height: 0;
  border-block: 1px solid var(--line-dark);
  aspect-ratio: 1440 / 160;
}
.scape-band img { position: absolute; left: 0; top: -60%; width: 100%; height: auto; display: block; opacity: .55; }

/* Panorama sitting behind a dark section's content. */
.section-scape { position: relative; overflow: hidden; }
.section-scape-bg {
  position: absolute; inset: auto 0 -40px; pointer-events: none; line-height: 0; opacity: .4;
}
.section-scape-bg img { width: 100%; height: auto; display: block; }
.section-scape > .shell { position: relative; z-index: 1; }

/* Heading-adjacent figures (What We Do, Service Area). */
.area-head { display: grid; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-5); }
@media (min-width: 900px) { .area-head { grid-template-columns: 1.3fr .8fr; } }
.area-head .section-head { margin-bottom: 0; }
.area-figure { margin: 0; background: var(--white); border: 1px solid var(--line-light); padding: var(--sp-2); }
.area-figure img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Join the Team
   ========================================================================== */

/* Header: Join the Team + phone, side by side on desktop, stacked in the drawer. */
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.nav-join[aria-current="page"] { background: var(--white); color: var(--black); border-color: var(--white); }
@media (max-width: 1180px) {
  .nav-actions { flex-direction: column; align-items: stretch; margin-top: var(--sp-3); }
  .nav-actions .nav-cta { margin-top: 0; }
}

/* Home page careers teaser. */
.join-teaser {
  background: var(--white); border: 1px solid var(--line-light); border-top: 3px solid var(--black);
  padding: var(--sp-4) var(--sp-3);
}
.join-teaser h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--black); }
.join-teaser .check-list { margin: var(--sp-2) 0 var(--sp-3); }
.join-teaser-note { font-size: .84rem; color: var(--on-light-muted); text-align: center; margin: var(--sp-1) 0 0; }

/* Hero side panel. Semi-opaque so the horizon can pass behind it. */
.hero-panel {
  background: rgba(22,22,22,.9); border: 1px solid var(--line-dark); border-top: 3px solid var(--white);
  padding: var(--sp-4) var(--sp-3);
}
.hero-panel h2 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-muted);
  margin-bottom: var(--sp-2);
}
.gain-list { list-style: none; display: grid; }
.gain-list li { padding: .75rem 0; border-top: 1px solid var(--line-dark); }
.gain-list li:first-child { border-top: 0; padding-top: 0; }
.gain-list strong {
  display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--white); margin-bottom: .15rem;
}
.gain-list span { font-size: .88rem; color: var(--on-dark-muted); }

/* Bordered cell grids. The 1px gap shows the grid background as divider lines, so
   borders stay single-weight at every column count. Column counts are fixed per
   breakpoint so a row is never left ragged. */
.cell-grid { display: grid; gap: 1px; grid-template-columns: 1fr; }
.section-light .cell-grid { background: var(--line-light); border: 1px solid var(--line-light); }
.section-dark  .cell-grid { background: var(--line-dark);  border: 1px solid var(--line-dark); }
@media (min-width: 600px) { .cell-grid-4, .cell-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .cell-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .cell-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.cell { padding: var(--sp-3); }
.section-light .cell { background: var(--white); }
.section-dark  .cell { background: var(--black-2); }
.cell .ico-lg { display: block; margin-bottom: var(--sp-2); }
.cell h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 .4rem; }
.section-light .cell h3 { color: var(--black); }
.section-dark  .cell h3 { color: var(--white); }
.cell p { font-size: .9rem; margin: 0; }
.section-light .cell p { color: var(--on-light-muted); }
.section-dark  .cell p { color: var(--on-dark-muted); }
.cell-tag {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-muted); padding-bottom: .6rem; margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-dark);
}
.section-dark .cell-cta { background: var(--black); }
.cell-link { display: inline-block; margin-top: var(--sp-2); font-size: .88rem; font-weight: 600; }

/* Who this is (and isn't) for. */
.fit-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line-light); background: var(--white); }
.fit-col { padding: var(--sp-4) var(--sp-3); min-width: 0; }
.fit-col + .fit-col { border-top: 1px solid var(--line-light); }
@media (min-width: 760px) {
  .fit-grid { grid-template-columns: 1fr 1fr; }
  .fit-col + .fit-col { border-top: 0; border-left: 1px solid var(--line-light); }
}
.fit-col h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--black); }
.fit-col .check-list { margin-bottom: 0; }
.fit-col-no { background: var(--paper-2); }
.x-list li::before {
  width: .8rem; height: .8rem; top: .42em; border: 0; transform: none;
  background:
    linear-gradient(45deg,  transparent 44%, var(--black) 44%, var(--black) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--black) 44%, var(--black) 56%, transparent 56%);
}

/* Join page: process steps use h3 (they sit directly under the section h2). */
.process-steps h3 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--black); }
.apply-alt { color: var(--on-light-muted); }