@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Porchlight Hiring Group
   1. Tokens   2. Reset   3. Type   4. Layout   5. Components
   6. Sections 7. Form    8. Motion 9. Responsive

   Quiet on purpose. One reading column down the middle, generous space, no
   texture overlay anywhere, dot-leader rules instead of hairlines, and every
   corner fully rounded. The page should feel like an evening, not a pitch.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("_lqip.css");

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* An earthy triad, used in that order of priority. Each has a light-ground
     twin dark enough to carry small text on sage. */
  --clay:      #e8977a;  /* 6.3:1 on evening */
  --clay-deep: #a04a2c;  /* 5.1:1 on sage    */
  --moss:      #a8c48f;
  --moss-deep: #3f6b3d;  /* 5.2:1 on sage    */
  --gold:      #e8c06a;
  --gold-deep: #7d5a0d;  /* 5.4:1 on sage    */

  /* Humanist display, set large and loose. */
  --t-display: clamp(2.6rem, 1.2rem + 5.2vw, 5.2rem);
  --t-h2:      clamp(1.95rem, 1.2rem + 2.6vw, 3.3rem);
  --t-h3:      clamp(1.22rem, 1.06rem + 0.6vw, 1.6rem);
  --t-lede:    clamp(1.12rem, 1rem + 0.52vw, 1.4rem);
  --t-body:    clamp(1.02rem, 0.98rem + 0.22vw, 1.12rem);
  --t-small:   0.82rem;

  --shell: 76rem;
  --read:  40rem;          /* the reading column — the spine of the whole page */
  /* One wide measure for anything that cannot fit the reading column. Three
     different maxima meant section headings started 64-112px right of the
     content they headed, which reads as a misalignment bug, not as design. */
  --read-wide: 52rem;
  --gut:   clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  --sec-y: clamp(4.5rem, 3rem + 7vw, 10rem);

  --r-soft: 2.25rem;       /* large panels */
  --r-pill: 999px;         /* buttons, chips, portraits */

  --ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}

[data-ground="evening"] {
  --bg:     #1e2b26;
  --raise:  #263630;
  --line:   #41544b;
  --ink:    #f1f4ef;
  --mute:   #a8b5ab;   /* 6.9:1 */
  --acc:    var(--clay);
  --on-acc: #17211d;
  --acc-2:  var(--moss);
  --acc-3:  var(--gold);
  --err:    #ffb3a0;
  --ok:     var(--moss);
}
[data-ground="sage"] {
  --bg:     #e9efe7;
  --raise:  #ffffff;
  --line:   #c2d0c3;
  --ink:    #1b2420;
  --mute:   #55645a;   /* 5.4:1 */
  --acc:    var(--clay-deep);
  --on-acc: #fdfaf7;
  --acc-2:  var(--moss-deep);
  --acc-3:  var(--gold-deep);
  --err:    #96331a;
  --ok:     var(--moss-deep);
}

/* ── 2. Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Alegreya Sans is a static family: one file per weight. Naming them all
   alegreya-sans.woff2 would silently overwrite until only one survived. */
@font-face {
  font-family: "Alegreya Sans"; src: url("/assets/fonts/alegreya-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans"; src: url("/assets/fonts/alegreya-sans-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* scroll-padding-top, not scroll-margin on each target: the nav is fixed, so
   without it every in-page link scrolls its heading to y=0 and straight under
   an opaque bar. Measured at 69-75px across this family. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: #1e2b26;
  color: #f1f4ef;
  font-family: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.68;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--clay); color: #17211d; }

[hidden] { display: none !important; }

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

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: .6rem; left: 50%; translate: -50% -180%;
  z-index: 200; padding: .8rem 1.5rem; border-radius: var(--r-pill);
  background: var(--clay); color: #17211d; font-weight: 600;
  transition: translate .25s var(--ease);
}
.skip:focus { translate: -50% 0; }

/* ── 3. Type ───────────────────────────────────────────────────────────── */
.h1, .h2, .h3, h1, h2, h3 {
  font-family: "Alegreya Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; line-height: 1.04; letter-spacing: -.016em;
  text-wrap: balance;
}
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }

.label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Alegreya Sans", sans-serif; font-weight: 700;
  font-size: var(--t-small); letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute);
}
.label::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px;
  background: var(--acc); flex: none;
}
.lede { font-size: var(--t-lede); color: var(--mute); }
.sep { opacity: .45; padding-inline: .3em; }
.nowrap { white-space: nowrap; }

/* ── 4. Layout ─────────────────────────────────────────────────────────── */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gut);
  position: relative; z-index: 2;
}
/* The reading column. Almost everything on this page sits in it, which is the
   whole layout idea: one calm measure down the middle rather than a grid. */
.flow { max-width: var(--read); margin-inline: auto; }
.flow--wide { max-width: var(--read-wide); margin-inline: auto; }
.flow > * + * { margin-top: 1.15rem; }
.flow .h2 + p, .flow .h3 + p { margin-top: 1rem; }

section[data-ground], .foot { position: relative; background: var(--bg); color: var(--ink); }
/* Where two sections share a ground, only one of them pays for the join. */
section[data-ground="sage"] + section[data-ground="sage"],
section[data-ground="evening"] + section[data-ground="evening"] { padding-top: 0; }
/* flow-root, not just padding: several sections set padding-top: 0 and open
   with a .dots rule, and without a block formatting context that rule's top
   margin collapses straight out of the section — leaving a strip of the body
   background showing between two sections that are supposed to be continuous. */
section[data-ground] { padding-block: var(--sec-y); display: flow-root; }

/* Dot leader. Round dots rather than a dashed line, which is a different
   texture entirely at reading distance. */
.dots {
  height: 3px; margin-block: clamp(2.6rem, 2rem + 2.4vw, 4.5rem);
  background-image: radial-gradient(circle, var(--line) 1.6px, transparent 1.7px);
  background-size: 13px 3px; background-repeat: repeat-x;
}
.dots--tight { margin-block: 1.9rem; }

.sec-head { margin-bottom: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.sec-head.flow { max-width: var(--read-wide); }
.sec-head .h2 { margin-top: 1rem; }
.sec-head .lede { margin-top: 1.1rem; }

/* ── 5. Components ─────────────────────────────────────────────────────── */

/* Photography — one warm evening grade across every frame, which is what stops
   a set of stock photographs looking like a set of stock photographs. */
.ph {
  position: relative; display: block; overflow: hidden;
  background-image: var(--lqip);
  background-size: cover; background-position: center;
  border-radius: var(--r-soft);
  isolation: isolate;
}
.ph picture { display: block; width: 100%; height: 100%; }
.ph img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.02) brightness(1.01) sepia(.07);
  opacity: 0; transition: opacity .8s var(--ease), scale 1.4s var(--ease);
}
.ph img.is-loaded { opacity: 1; }
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(200deg, rgba(232,192,106,.20) 0%, rgba(232,192,106,0) 52%),
    linear-gradient(0deg,   rgba(30,43,38,.34)   0%, rgba(30,43,38,0)   54%);
  mix-blend-mode: soft-light;
}
.ph--lozenge { aspect-ratio: 4 / 5; border-radius: var(--r-pill); }
.ph--round   { aspect-ratio: 1; border-radius: var(--r-pill); }
.ph--wide    { aspect-ratio: 16 / 9; }
.ph--door    { aspect-ratio: 16 / 10; }
.ph--classic { aspect-ratio: 4 / 3; }

/* Buttons — stadium, always. */
.btn {
  --pad: .85rem 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: var(--pad); border-radius: var(--r-pill);
  font-weight: 600; font-size: .98rem;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), translate .3s var(--ease);
}
.btn--lg   { --pad: 1.02rem 2rem; font-size: 1.04rem; }
.btn--full { width: 100%; }
.btn--solid { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--line { border-color: var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--acc); color: var(--acc); }
.btn:active { translate: 0 1px; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in oklab, #1e2b26 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav__in { display: flex; align-items: center; gap: clamp(.8rem, 2.4vw, 2.2rem); min-height: 74px; }
.nav__links { display: flex; gap: clamp(.9rem, 1.9vw, 1.8rem); margin-inline: auto; }
.nav__links a {
  position: relative; padding: .4rem .1rem;
  font-size: .95rem; color: var(--mute); transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px;
  border-radius: 2px; background: var(--acc);
  scale: 0 1; transform-origin: right; transition: scale .35s var(--ease);
}
.nav__links a:hover, .nav__links a.is-here { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-here::after { scale: 1 1; transform-origin: left; }
.nav__cta { display: flex; align-items: center; gap: .5rem; }
.nav .btn { --pad: .62rem 1.15rem; font-size: .88rem; }

.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; }
.brand__mark { width: 28px; height: 28px; color: var(--acc-3); flex: none; }
.brand__word {
  display: flex; flex-direction: column; line-height: 1;
  font-family: "Alegreya Sans", sans-serif; font-weight: 800;
  font-size: 1.28rem; letter-spacing: -.02em;
}
.brand__sub {
  font-family: "Source Sans 3", sans-serif; font-size: .58rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-top: .34rem;
}

.nav__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.nav__bar {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink);
  margin-inline: auto; transition: translate .25s var(--ease), rotate .25s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__bar:first-child { translate: 0 3.5px; rotate: 45deg; }
.nav__toggle[aria-expanded="true"] .nav__bar:last-child  { translate: 0 -3.5px; rotate: -45deg; }

.menu {
  display: flex; flex-direction: column;
  padding: .4rem var(--gut) 1.8rem;
  background: #1e2b26; border-top: 1px solid var(--line);
}
.menu a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1.06rem; }
.menu__cta { color: var(--clay); font-weight: 600; }

/* ── 6. Sections ───────────────────────────────────────────────────────── */

/* Hero — the one split on the page. */
.hero { padding-block: 8.5rem clamp(3rem, 2rem + 3vw, 5rem); overflow: hidden; }

/* The porch light. A warm pool behind the photograph that site.js switches on
   with a flicker, the way a bulb catches. Visible and steady without JS or
   under reduced motion — the light is simply on. */
.lamp {
  position: absolute; z-index: 1; pointer-events: none;
  width: 78vmax; height: 78vmax; right: -24vmax; top: -30vmax; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(232,192,106,.26) 0%, rgba(232,192,106,.11) 42%, rgba(232,192,106,.03) 62%, rgba(232,192,106,0) 72%);
}
.lamp.is-night {
  background: radial-gradient(closest-side,
    rgba(240,196,108,.40) 0%, rgba(232,192,106,.16) 42%, rgba(232,192,106,.05) 62%, rgba(232,192,106,0) 72%);
}
.is-lit .brand__mark { filter: drop-shadow(0 0 5px rgba(232,192,106,.75)); transition: filter 1.2s var(--ease); }
.porch-clock {
  display: flex; width: fit-content; align-items: center; gap: .55rem;
  margin-top: .9rem; padding: .34rem .9rem .34rem .7rem; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--gold) 14%, transparent);
  font-size: .9rem; color: var(--ink);
}
.porch-clock::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex: none;
  background: var(--gold); box-shadow: 0 0 10px 2px rgba(232,192,106,.7);
}
.porch-clock b { font-weight: 600; color: var(--gold); }
.hero__grid {
  display: grid; gap: clamp(2.4rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
}
.hero__h { font-size: var(--t-display); margin: 1.1rem 0 0; }
.hero__h em { font-style: normal; color: var(--acc-3); }
.hero__lede { margin-top: 1.5rem; max-width: 32rem; font-size: var(--t-lede); color: var(--mute); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.hero__roles {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem;
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--mute);
}
.hero__roles b { font-weight: 600; color: var(--ink); }
.hero__fig { position: relative; }

/* Long-form body */
.essay p + p { margin-top: 1.15rem; }
.essay p { color: var(--mute); }
.essay strong { color: var(--ink); }
.pull {
  margin: 2.2rem 0; padding-left: 1.5rem;
  border-left: 3px solid var(--acc); border-radius: 2px;
  font-family: "Alegreya Sans", sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.28;
  color: var(--ink); letter-spacing: -.012em;
}
.figure-wide { margin-block: clamp(2.6rem, 2rem + 2.6vw, 4.5rem); }
.figure-wide figcaption {
  margin-top: .85rem; font-size: .86rem; color: var(--mute); text-align: center;
}

/* Roles — a stack of rows, not a grid of cards. */
.roles { max-width: var(--read-wide); margin-inline: auto; }
.role {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: clamp(1.2rem, 1rem + 1.6vw, 2.4rem); align-items: start;
  padding-block: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.role:last-child { border-bottom: 1px solid var(--line); }
.role:hover .ph img { scale: 1.05; }
.role h3 { margin-bottom: .55rem; }
.role p { color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.chips li {
  padding: .26rem .78rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: .82rem; color: var(--mute);
}

/* Two doors, stacked rather than side by side */
.door { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.door--flip .door__fig { order: -1; }
.door__body .h2 { margin: 1rem 0 1.2rem; }
.door__body > p { color: var(--mute); }
.ticks { display: grid; gap: .7rem; margin: 1.5rem 0 2rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--mute); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6rem; height: .6rem; border-radius: var(--r-pill);
  background: var(--acc-2);
}
.ticks strong { color: var(--ink); font-weight: 600; }

/* Steps — no numerals anywhere on this site, deliberately. */
.steps { max-width: var(--read-wide); margin-inline: auto; }
.step { padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--mute); }
.step__when {
  display: inline-block; margin-bottom: .6rem; padding: .18rem .7rem;
  border-radius: var(--r-pill); background: var(--raise);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc);
}

/* Standards */
.standards__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.promises { display: grid; gap: 0; }
.promises li { padding-block: 1.15rem; border-top: 1px solid var(--line); }
.promises li:last-child { border-bottom: 1px solid var(--line); }
.promises h3 { font-size: 1.04rem; margin-bottom: .3rem; }
.promises p { font-size: .93rem; color: var(--mute); line-height: 1.6; }

/* Quotes */
.quotes__list { max-width: var(--read-wide); margin-inline: auto; display: grid; gap: 0; }
.quote { padding-block: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); border-top: 1px solid var(--line); }
.quote:last-child { border-bottom: 1px solid var(--line); }
.quote blockquote p {
  font-family: "Alegreya Sans", sans-serif; font-weight: 700;
  font-size: clamp(1.18rem, 1.05rem + .7vw, 1.5rem); line-height: 1.34;
  letter-spacing: -.012em;
}
.quote figcaption { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin-top: 1rem; }
.quote__who { font-weight: 600; font-size: .94rem; }
.quote__where { font-size: .94rem; color: var(--mute); }

/* FAQ */
.faq__list { max-width: var(--read-wide); margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: "Alegreya Sans", sans-serif; font-weight: 700; font-size: 1.14rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.7rem; height: 1.7rem; border-radius: var(--r-pill);
  border: 2px solid var(--acc); position: relative;
  background:
    linear-gradient(var(--acc), var(--acc)) center/.72rem 2px no-repeat,
    linear-gradient(var(--acc), var(--acc)) center/2px .72rem no-repeat;
  transition: rotate .3s var(--ease), background-size .3s var(--ease);
}
.faq details[open] summary::after { rotate: 135deg; }
.faq summary:hover { color: var(--acc); }
.faq__a { padding-bottom: 1.5rem; }
.faq__a p { color: var(--mute); }
.faq__a p + p { margin-top: .9rem; }
.faq__a a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 1rem + 4vw, 4rem); }
.contact__head .h2 { margin: 1rem 0 1.2rem; }
.contact__es { margin-top: 1rem; color: var(--mute); }
.contact__direct {
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .4rem;
}
.contact__direct a {
  font-weight: 600; color: var(--acc);
  text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere;
}

/* ── 7. Form ───────────────────────────────────────────────────────────── */
/* Everything inside derives from the ground tokens. A component that hardcodes
   its own surfaces will fail contrast on whichever ground it did not expect. */
.form {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--r-soft); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
}
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  padding: .3rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); margin-bottom: 1.8rem;
}
.seg__btn {
  padding: .72rem .9rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: none; font-weight: 600; font-size: .95rem; color: var(--mute);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.seg__btn.is-on { background: var(--acc); color: var(--on-acc); }
.seg__btn:not(.is-on):hover { color: var(--ink); }

.form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--mute); }
.field input, .field textarea {
  width: 100%; padding: .78rem 1rem; border-radius: 1.1rem;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--mute) 92%, transparent); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--acc); }
.field textarea { resize: vertical; min-height: 6rem; border-radius: 1.4rem; }
.field__err { font-size: .82rem; color: var(--err); }
.field.is-bad input, .field.is-bad textarea { border-color: var(--err); }

.check { flex-direction: row; align-items: flex-start; gap: .65rem; }
.check input { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .3rem; accent-color: var(--acc); }
.check label { font-weight: 400; color: var(--mute); font-size: .92rem; line-height: 1.5; }

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

.form button[type="submit"] { margin-top: 1.7rem; }
.form__status { margin-top: 1rem; font-size: .95rem; color: var(--ok); }
.form__status:empty { margin: 0; }
.form__status.is-bad { color: var(--err); }
.form__status a { color: inherit; text-decoration: underline; }
.form__fine { margin-top: 1.1rem; font-size: .85rem; color: var(--mute); line-height: 1.55; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { padding-block: clamp(3rem, 2rem + 2.6vw, 4.5rem) 2.4rem; border-top: 1px solid var(--line); }
.foot__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.4rem;
  padding-bottom: 2.1rem; border-bottom: 1px solid var(--line);
}
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-inline: auto; }
.foot__nav a { font-size: .95rem; color: var(--mute); transition: color .3s var(--ease); }
.foot__nav a:hover { color: var(--ink); }
.foot__mail a {
  font-weight: 600; color: var(--acc);
  text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere;
}
.foot__eeo { margin-top: 2.1rem; max-width: 62rem; font-size: .84rem; line-height: 1.65; color: var(--mute); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 2.1rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--mute);
}

/* ── 8. Motion ─────────────────────────────────────────────────────────── */
/* Visible by default, so the page still reads if the script never runs. The
   script adds .js itself as its first statement, which is what opts in. */
.reveal { opacity: 1; translate: none; }
.js .reveal {
  opacity: 0; translate: 0 20px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

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

/* ── 9. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the lozenge goes first, like a portrait, instead of 700px down. */
  .hero__fig { max-width: 15rem; order: -1; }
  .door, .standards__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .door--flip .door__fig { order: 0; }
  .door__fig { max-width: 34rem; }
}

@media (max-width: 880px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav { background: color-mix(in oklab, #1e2b26 92%, transparent); backdrop-filter: blur(12px); }
}

@media (max-width: 680px) {
  .role { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .role .ph { width: 7.5rem; }
  .form__fields { grid-template-columns: minmax(0, 1fr); }
  .field--wide { grid-column: auto; }
  .foot__nav { margin-inline: 0; width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .seg { grid-template-columns: minmax(0, 1fr); border-radius: 1.6rem; }
}

@media print {
  .nav, .form, .skip { display: none !important; }
  body, section[data-ground] { background: #fff !important; color: #000 !important; }
}