/* ==========================================================================
   site.css — per-site layout & components, built FROM tokens.

   3-dogs-and-a-girl-lincoln-ne. Archetype `split-hero` (brief §5.1), family
   `editorial-modern`, signature device "the specimen plate" (brief §7.3).
   HARD RULE (house-tech-spec §3): tokens only, no raw hex/px/font literals.
   The two escape hatches are the house breakpoints and an explicit
   `@allow-literal: reason` comment on the preceding line.
   ========================================================================== */

/* --- Layout primitives (house, unchanged) --------------------------------- */

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

.section {
  padding-block: var(--section-gap);
}

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

/* base.css's skip-link default pairs --color-accent/--color-accent-ink —
   the house pattern, but wrong on this site specifically: goldenrod is
   decorative/fill only and fails the 3:1 non-text floor on its own ground
   (brief §3.4 rows 5-6), so it cannot carry a text control either. Repointed
   at the site's own body-text pair (row 1, 15.39:1). */
.skip-link {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

/* --- Header & navigation (house, +phone rule, round-2 CLS fix) ------------- */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-header__phone {
  flex-shrink: 0;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

[data-nav-ready] .site-nav[data-nav-open='false'] {
  display: none;
}

[data-nav-ready] .site-nav {
  flex-basis: 100%;
}

@media (min-width: 48em) {
  [data-nav-ready] .site-nav[data-nav-open='false'] {
    display: block;
  }

  [data-nav-ready] .site-nav {
    flex-basis: auto;
  }

  [data-nav-ready] .nav-toggle {
    display: none;
  }
}

/* --- Buttons (house, unchanged) --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent-ink);
  color: var(--color-bg);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-ink);
}

.btn--quiet {
  border-color: var(--color-border);
  color: var(--color-ink);
}

/* --- Eyebrows & the recurring section pin-mark (brief §7.3) ---------------
   The pin-mark is a static graphic, never a numeral, so it never collides
   with the Services Index's digit index (§5.3) or the Design Process roman
   index (§5.4) — distinct in kind, not merely in costume. It sits at the
   head of every section below the hero. */

.eyebrow {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-body-strong);
}

.section-mark {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
}

.pin-mark {
  flex-shrink: 0;
  width: var(--pinmark-width);
  height: var(--pinmark-height);
  color: var(--color-accent-2);
}

.pin-mark__line {
  stroke: currentColor;
  /* @allow-literal: SVG stroke-width is a drawing-unit attribute inside a
     12x14 local viewBox, not a page size — no token in the space/border
     scales describes a viewBox unit. */
  stroke-width: 1.5;
}

.pin-mark__head {
  fill: currentColor;
}

.section h2 {
  font-size: var(--text-h2);
  margin-block-end: var(--space-md);
}

/* --- Hero — "the specimen plate" (brief §5.1, §5.3, §7.3) ------------------
   Below 768px: single column, house DOM order (design-rules §7.2 rule 1).
   At and above 768px: two-region split — text block left (~55%), specimen-
   plate field right (~45%), vertically centred against the text block. DOM
   order never changes; the grid re-maps it visually only. Never scroll-
   revealed — visible on load (brief §7.2). */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}

.hero__atmos {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 90% -20%, var(--color-atmo-1) 0%, transparent 55%),
    radial-gradient(140% 90% at -20% 120%, var(--color-atmo-2) 0%, transparent 60%);
}

/* Below 768px: plain block flow, house DOM order, no grid. grid-area names
   are assigned only inside the 48em query, scoped to where a
   grid-template-areas value names them — assigning them unconditionally
   made Chromium synthesise implicit named tracks with no matching areas,
   collapsing every child into one cell. */
.hero__grid > * + * {
  margin-block-start: var(--hero-item-gap);
}

.hero__cta { margin: 0; }

.hero h1 {
  font-size: var(--text-h1);
  color: var(--color-ink);
}

.hero__lead {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  max-width: var(--measure-narrow);
}

.rule-draw {
  width: 100%;
  height: var(--rule-draw-height);
  background-color: var(--color-ink);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .rule-draw {
    animation: rule-draw var(--duration-rule-draw) var(--ease-signature) forwards;
  }
}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (min-width: 48em) {
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: var(--space-lg);
    align-items: start;
    grid-template-areas:
      "eyebrow plate"
      "rule    plate"
      "h1      plate"
      "cta     plate"
      "lead    plate";
  }

  /* mobile-only spacing; row-gap takes over rhythm at this width. */
  .hero__grid > * + * {
    margin-block-start: 0;
  }

  .hero__grid {
    row-gap: var(--hero-item-gap);
  }

  .hero__eyebrow      { grid-area: eyebrow; }
  .rule-draw          { grid-area: rule; }
  .hero__h1           { grid-area: h1; }
  .hero__cta          { grid-area: cta; }
  .hero__plate-field  { grid-area: plate; align-self: center; }
  .hero__lead         { grid-area: lead; }
}

/* The specimen plate: a mounted card, fixed size at every breakpoint (brief
   §6 slot 1), centred in a 190px atmosphere field. */

.hero__plate-field {
  position: relative;
  height: var(--plate-field-height);
  min-height: var(--plate-field-height);
}

.plate {
  position: absolute;
  left: 50%;
  top: var(--plate-top);
  width: var(--plate-width);
  height: var(--plate-height);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-ink-muted);
  overflow: visible;
  transform: translateX(-50%);
}

.plate picture,
.plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plate__pin {
  position: absolute;
  left: 50%;
  /* Sits astride the plate's top edge — the same 10px the plate itself sits
     down from the field's own top (--plate-top), mirrored negative. */
  top: calc(var(--plate-top) * -1);
  width: var(--pinmark-width);
  height: var(--plate-pin-height);
  transform: translateX(-50%);
  transform-origin: top center;
}

.plate__pin-line {
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.plate__pin-head {
  fill: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .plate {
    animation: plate-bob var(--duration-bob) var(--ease-sway) infinite;
  }

  .plate__pin {
    animation: plate-pin-sway var(--duration-sway) var(--ease-sway) infinite;
  }
}

@keyframes plate-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-0.6deg); }
  50%      { transform: translateX(-50%) translateY(calc(var(--plate-bob-lift) * -1)) rotate(0.6deg); }
}

@keyframes plate-pin-sway {
  0%, 100% { transform: translateX(-50%) rotate(-3deg); }
  50%      { transform: translateX(-50%) rotate(3deg); }
}

/* --- Services Index (brief §5.3) — pure typographic index, image-free.
   Digit numerals (01/02/03), roman-regular weight, --color-accent-ink,
   never italic — a system distinct from the Design Process's roman index
   both in numeral kind and in posture (design-rules §5). */

.index-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-list__row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-sm);
}

.index-mark {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-accent-ink);
  font-size: var(--text-body);
  line-height: var(--leading-tight);
}

.index-list__row h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-body);
  margin: 0 0 var(--space-2xs);
}

.index-list__row p {
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

.services-secondary {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-hairline);
}

.services-secondary__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
  margin-block-end: var(--space-2xs);
}

.services-secondary p {
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

/* --- Design Process (brief §5.4) — roman numerals, Petrona italic,
   --color-accent-2. Distinct from the Services Index on two axes: numeral
   kind (roman vs. digit) and posture (italic vs. roman-regular), plus a
   distinct colour role (design-rules §5's two-axis rule). */

.process-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.process-list__row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-sm);
}

.process-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-accent-2);
  font-size: var(--text-body);
  line-height: var(--leading-tight);
}

.process-list__row h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-body);
  margin: 0 0 var(--space-2xs);
  display: inline;
}

.process-list__row p {
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

.process-closing {
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

.process-image {
  margin-block: var(--space-lg);
}

.process-image img {
  width: 100%;
  height: auto;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

/* --- Owner Credential band + pull-quote (brief §5.5) ----------------------- */

.credential-body {
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

.credential-body + .credential-body {
  margin-block-start: var(--space-sm);
}

.credential-image {
  margin-block: var(--space-lg);
  max-width: var(--credential-image-max);
}

.credential-image img {
  width: 100%;
  height: auto;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

.pull-quote {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.pull-quote .container {
  padding-block: var(--section-gap);
}

.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  max-width: var(--measure-narrow);
}

.pull-quote__accent {
  color: var(--color-pullquote-accent);
}

.pull-quote cite {
  display: block;
  margin-block-start: var(--space-md);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-bg);
  opacity: 0.75;
}

/* --- About (brief §5.6) ----------------------------------------------------- */

.mission-list {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  max-width: var(--layout-measure);
}

.mission-list dt {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-body);
}

.mission-list dd {
  margin: 0;
  color: var(--color-ink-muted);
}

.community-line {
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
}

/* --- Service Area (brief §5.7) ---------------------------------------------- */

.service-area-body {
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
  margin-block-end: var(--space-lg);
}

.service-area-image img {
  width: 100%;
  height: auto;
  border: var(--border-hairline) var(--border-style) var(--color-border);
}

/* --- FAQ (brief §5.8) -------------------------------------------------------- */

.faq-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--layout-measure);
}

.faq-list h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-body);
  margin: 0 0 var(--space-2xs);
}

.faq-list p {
  color: var(--color-ink-muted);
}

/* --- Form (house, extended with the interest checkbox group per brief §5.9) */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.field-group {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.field-group legend {
  padding: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

.field-group__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--form-check-col-min), 1fr));
  gap: var(--space-2xs) var(--space-sm);
}

/* Touch-target floor (spec §8: 44×44). A native checkbox can't clear that
   at its intrinsic size, so the input itself is sized to it (appearance:
   none, custom paint) — one element, still natively focusable. */
.field-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.field-check input[type='checkbox'] {
  appearance: none;
  width: var(--layout-tap-min);
  height: var(--layout-tap-min);
  flex: 0 0 auto;
  margin: 0;
  min-height: 0;
  position: relative;
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
}

.field-check input[type='checkbox']:checked {
  background-color: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
}

.field-check input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  inset-inline-start: 32%;
  inset-block-start: 12%;
  width: 22%;
  height: 48%;
  border-inline-end: var(--border-thick) var(--border-style) var(--color-bg);
  border-block-end: var(--border-thick) var(--border-style) var(--color-bg);
  transform: rotate(45deg);
}

.field-check label {
  font-size: var(--text-small);
}

.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

/* --- Footer ------------------------------------------------------------------ */

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
}

.site-footer a {
  text-underline-offset: var(--space-3xs);
}

.site-footer__nap {
  font-style: normal;
  margin-block-end: var(--space-md);
}

.site-footer__license {
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
  margin-block-end: var(--space-md);
}