/* site.css — Dependable Precision Mfg. Inc. Layout and components built FROM
   tokens (house-tech-spec §3). Archetype: sidebar-anchor. Family:
   editorial-modern. Source: runs/dependable-precision-mfg-inc-lodi-ca/brief.md. */

/* --- Layout primitives ---------------------------------------------------- */

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

/* --section-gap is the only inter-section spacing value (design-rules §7.1). */
.section {
  padding-block: var(--section-gap);
}

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

/* --- Header & nav (brief §3 item 3). <1024px: wordmark, tel, hamburger
   (opens the anchor nav + CTA). >=1024px: wordmark, tel, CTA — the anchor
   nav moves into the rail (§3.4) instead. JS off: <noscript> restores the
   plain link list at every width (house mechanism). --- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  padding-block: var(--space-2xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-none);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* Brief §2.5: --shadow-sm only once the page has scrolled past the hero — a
   functional affordance (js/main.js toggles this via a hero-foot sentinel). */
[data-scrolled] .site-header {
  box-shadow: var(--shadow-sm);
}

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

/* --text-small by default: the full legal name is long enough that --text-h3
   forced "Menu" onto a second header row at 375px (~121px vs. the brief's
   ~56px). --text-h3 resumes >=64em, where there's far more width. */
.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--font-weight-display);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 64em) {
  .site-header__brand {
    font-size: var(--text-h3);
  }
}

.site-header__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-tap-min);
  min-width: var(--layout-tap-min);
  color: var(--color-ink);
  text-decoration: none;
  margin-inline-start: auto;
}

.site-header__tel-icon {
  inline-size: var(--space-md);
  block-size: var(--space-md);
  flex: 0 0 auto;
}

.site-header__tel-label {
  display: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

@media (min-width: 30em) {
  .site-header__tel {
    min-width: 0;
  }
  .site-header__tel-label {
    display: inline;
  }
}

/* Desktop-only persistent CTA (brief §3 item 3); <1024px it lives in the nav
   panel instead. `.btn.site-header__cta` (0,2,0): `.btn`'s own `display:
   inline-flex` sits later at equal (0,1,0) and would win on source order. */
.btn.site-header__cta {
  display: none;
}

@media (min-width: 64em) {
  .btn.site-header__cta {
    display: inline-flex;
  }
}

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

.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);
}

/* Closed by default below 64em (the sidebar-rail threshold, §3/§3.4 — not
   the house 48em), no JS gate (no post-paint collapse, CLS). At >=64em the
   anchor nav never shows in the header — the rail carries it instead. JS-off
   visitors get the plain list back via the <noscript> override (harmless
   redundancy with the rail, not a defect). */
.site-nav {
  display: none;
}

[data-nav-ready] .site-nav[data-nav-open='true'] {
  display: block;
  flex-basis: 100%;
}

@media (min-width: 64em) {
  .site-nav,
  [data-nav-ready] .site-nav[data-nav-open='true'] {
    display: none;
  }

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

/* --- Buttons — two roles, no more. --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  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);
  color: var(--color-accent-ink);
}

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

/* --- Section head: rule + block-title. --- */

.section-head {
  margin-block-end: var(--space-lg);
}

.section-head__rule {
  display: block;
  inline-size: var(--space-xl);
  block-size: 0;
  border-top: var(--border-thick) var(--border-style) var(--color-accent);
  margin-block-end: var(--space-sm);
}

.section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

/* --- Hero (brief §3 item 4, §6). Full-width, no rail — the rail would crowd
   the living-hero moment. Soft radial atmosphere behind the field; no text
   ever sits over the gradient or the image (brief §2.2). --- */

.hero {
  padding-block-start: var(--space-lg);
  padding-block-end: var(--section-gap);
  /* Banned-default exception: hue 207° — same as --color-accent,
     tokens.css, brief §2.1 / playbook §6.1. */
  background:
    radial-gradient(90% 70% at 78% 18%, var(--color-atmo-accent), transparent 65%),
    var(--color-bg);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.hero__title {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  max-inline-size: var(--hero-title-measure);
}

/* The H1's italic accent word (brief §2.3 emphasis role): Spectral italic,
   accent colour — the one emphasis device alongside the index numerals. */
.hero__accent {
  font-style: italic;
  color: var(--color-accent);
}

.hero__lead {
  margin: var(--space-md) 0 0;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
  max-inline-size: var(--hero-text-measure);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
}

/* Hero field: the hero image plus the dimension-tick overlay. Ratio-locked to
   the shipped raster (tokens.css note) so object-fit: cover crops nothing and
   the overlay's measured tick positions stay exact at every width. */
.hero__field {
  position: relative;
  overflow: hidden;
  margin: var(--space-lg) 0 0;
  aspect-ratio: var(--hero-field-ratio);
  background-color: var(--color-surface);
}

.hero__field img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

/* Signature (brief §6): two dimension-tick satellites drift on non-synced
   loops (4.4s/5.6s, 0.6s offset) over the atmosphere, a static dashed line
   between them — ref-001's satellite-float physics, this subject. */

.hero__dim-line {
  stroke-dasharray: 2.2 1.6;
}

.hero__tick {
  transform-box: fill-box;
  transform-origin: center;
}

.hero__tick-a {
  animation: tick-drift var(--loop-tick-a) var(--ease-in-out) infinite;
}

.hero__tick-b {
  animation: tick-drift var(--loop-tick-b) var(--ease-in-out) infinite;
  animation-delay: var(--delay-tick-b);
}

@keyframes tick-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  50%      { transform: translate(0.9%, -0.7%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__tick-a,
  .hero__tick-b {
    animation: none;
    opacity: 1;
  }
}

.hero__facts {
  margin: var(--space-md) 0 0;
  padding-block-start: var(--space-sm);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Sidebar-anchor layout (brief §3/§3.4). The rail carries the anchor nav,
   the repeated CTA and phone beside the scrolling content; stacked <1024px,
   sticky rail >=1024px. --- */

.layout-sidebar {
  display: block;
}

@media (min-width: 64em) {
  .layout-sidebar {
    display: grid;
    grid-template-columns: var(--rail-column) 1fr;
    align-items: start;
    gap: var(--space-xl);
  }
}

.layout-sidebar__rail {
  display: none;
}

@media (min-width: 64em) {
  .layout-sidebar__rail {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--sticky-chrome) + var(--space-lg));
    padding-block-start: var(--section-gap);
  }
}

.rail-nav__list {
  margin: 0 0 var(--space-lg);
  padding: 0;
  padding-block-end: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  list-style: none;
}

.rail-nav__link {
  display: block;
  padding-block: var(--space-2xs);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
  text-decoration: none;
}

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

.rail-nav__cta {
  display: flex;
  width: 100%;
}

.rail-nav__tel {
  display: block;
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  text-decoration: none;
}

.layout-sidebar__content {
  min-width: 0;
}

.layout-sidebar__content > .section:first-child {
  padding-block-start: 0;
}

@media (min-width: 64em) {
  .layout-sidebar__content > .section:first-child {
    padding-block-start: var(--section-gap);
  }
}

/* --- Process (brief §3 item 5a). Numbered rows, leading-zero italic counter,
   fixed 2.2rem column that never shrinks (brief §2.3). --- */

.process-rows {
  counter-reset: process-step;
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.process-row {
  counter-increment: process-step;
  display: flex;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.process-row:first-child {
  padding-block-start: 0;
}

.process-row__num {
  flex: 0 0 var(--index-num-width);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-accent);
}

.process-row__num::before {
  content: counter(process-step, decimal-leading-zero);
}

.process-row__heading {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-h3);
}

.process-row__body p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  max-inline-size: var(--layout-measure);
}

.divider-image {
  display: block;
  margin-block: var(--space-lg);
  max-inline-size: 100%;
}

.divider-image--secondary {
  max-inline-size: var(--divider-image-secondary-max-width);
}

/* --- Capabilities (brief §3 item 5b). Plain ruled index, never a card grid.
   Distinct from the process counter: plain sans numeral, ink-muted, SUFFIX,
   right-aligned, tabular ("two counters in one costume", brief §2.3). A long
   label may wrap to two lines at the 320px floor, numeral stays flex-start.
   Single column at every width — the optional two-sub-column split (§4) is
   not taken: 9 items reads cleanly as one column. --- */

.capability-list {
  counter-reset: cap-row;
  margin: var(--space-lg) 0 0;
  padding: 0;
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
  list-style: none;
}

.capability-list__row {
  counter-increment: cap-row;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-body);
}

.capability-list__label {
  max-inline-size: var(--layout-measure);
}

.capability-list__num {
  flex: 0 0 var(--capability-num-width);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-ink-muted);
}

.capability-list__num::before {
  content: counter(cap-row);
}

/* --- About / tenure (brief §3 item 5c). A quiet panel on --color-surface;
   the material-texture image sits behind it at low opacity, text always on
   the flat, opaque surface token (brief §4 — never under running text at a
   failing ratio). Pattern carried from the house's own Critic-passed reviews-
   section device (triple-c-repair-texarkana-ar). --- */

.about {
  position: relative;
  isolation: isolate;
}

.about__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.16;
}

.about__panel {
  padding: var(--space-lg);
  background-color: var(--color-surface);
}

.about__panel p {
  margin: 0;
  max-inline-size: var(--layout-measure);
}

/* --- Proof (brief §3 item 5d). One verbatim pull-quote, ref-006's rail
   device adapted; no star rating or review count anywhere on the page. --- */

.pull-quote {
  margin: var(--space-lg) 0 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  max-inline-size: var(--pull-quote-measure);
}

.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.pull-quote cite {
  display: block;
  margin-block-start: var(--space-sm);
  font-style: normal;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

/* --- Contact / Request a Quote (brief §3 item 6). Two channels: the form,
   and a separate mailto: link OUTSIDE the <form> for the drawing/photo path.
   --- */

.contact-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 64em) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.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-strong);
  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);
}

.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);
}

/* The "send a drawing" mailto path — a plain link, outside the form element
   entirely (brief §3 item 6(B)). */
.drawing-path {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.drawing-path p:first-child {
  margin-block-start: 0;
}

.contact-card {
  padding: var(--space-lg);
  background-color: var(--color-surface);
}

.contact-card address {
  font-style: normal;
}

.contact-card p {
  margin: var(--space-sm) 0 0;
}

.contact-card p:first-child {
  margin-block-start: 0;
}

/* --- Footer --- */

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

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

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

.site-footer__nap {
  font-style: normal;
}

.site-footer__payments {
  color: var(--color-ink-muted);
}

/* --- Desktop composition addendum (brief §4), >=64em. --- */

@media (min-width: 64em) {
  .hero__inner {
    display: grid;
    grid-template-columns: 42fr 58fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .hero__text {
    max-inline-size: var(--hero-text-measure);
  }

  .hero__field {
    margin-block-start: 0;
  }

  /* Capabilities divider image (1200x1200) ran 821px tall at 1440px —
     capped so it never dominates the index list beneath it. */
  .divider-image {
    max-block-size: var(--divider-image-max-height);
    inline-size: 100%;
    object-fit: cover;
  }
}