/* ==========================================================================
   site.css — Full Circle Land Design, Chattanooga TN.
   Built from runs/full-circle-land-design-chattanooga-tn/brief.md (C3
   approved). Tokens only — no raw hex, px/rem literal or font name outside
   tokens.css. The two escape hatches are the house breakpoints (48em/64em)
   and an explicit `@allow-literal: reason` comment on the preceding line.
   ========================================================================== */

/* base.css's skip-link uses --color-accent, which this brief reserves for
   large-text/graphic use only (3.38:1, brief §2a two-tier rule) — swapped
   for the small-text-safe accent-deep, as everywhere else on this site. */
.skip-link {
  background-color: var(--color-accent-deep);
  color: var(--color-accent-ink);
}

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

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

/* Vertical rhythm hook — brief §2c: --section-gap is the ONLY inter-section
   spacing value on this site. Two call sites: here, and the hero's
   padding-block-end below. */
.section {
  padding-block: var(--section-gap);
}

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

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

/* brief §2b: --text-h2 is the ONE clamp step governing every in-page section
   heading (Services, Process & Proof, Reviews, Service Area, FAQ, Contact).
   base.css sets the display face and weight for every h1-h4 but not a size,
   so each site states its own heading sizes here. */
.section h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-h2);
}

/* The one repeating ornament every section carries (brief §3): a static 2px
   accent-deep headrule, literalising "the resolved vector line is thereafter
   the static rail-head rule of every section below." Never animates outside
   the hero. Sits above the section's own top padding, so its total offset
   from the previous section's content is still exactly --section-gap. */
.section__headrule {
  border-top: var(--border-thick) var(--border-style) var(--color-accent-deep);
  /* @allow-literal: headrule stroke is 2px per brief §2c, distinct from --border-thick's 3px */
  border-top-width: 2px;
  margin-block-end: var(--space-md);
}

/* --- Header ---------------------------------------------------------------
   Brief §3b.1: wordmark + phone, no nav links (one-pager, scroll-only nav).
   Both the header and the expiry bar above it are STICKY, per the brief's
   own persistent-stack figure (css/preview.css carries the bar's half). */

.site-header {
  position: sticky;
  inset-block-start: var(--expiry-height);
  z-index: var(--z-header);
  /* --space-3xs, not --space-sm: both the wordmark and the phone carry
     data-tap, so each is already a 44px-tall flex item (base.css's touch-
     target rule blockifies as a flex child) before any padding is added.
     A larger padding step would compound on top of that floor rather than
     replace it. */
  padding-block: var(--space-3xs);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-line);
  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-medium);
  font-weight: var(--font-weight-display-medium);
  font-size: var(--text-lead);
  color: var(--color-accent-deep);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.site-header__tel {
  font-size: var(--text-body);
  color: var(--color-ink-muted);
  text-decoration: none;
}

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

/* --header-height is the MEASURED height of .site-header — 53px, verified
   at 320-1600px, all identical (design-rules §7.2 rule 3); corrects the
   brief's carried-forward "56+1" tile-stage estimate, taken before the 44px
   touch-target rule landed on the wordmark and phone link. See build report. */
:root {
  /* @allow-literal: measured rendered height of .site-header (design-rules §7.2 rule 3) */
  --header-height: 53px;
}

section[id] {
  scroll-margin-block-start: calc(var(--expiry-height) + var(--header-height));
}

/* --- Buttons ----------------------------------------------------------------
   Two roles, no more. --radius-sm, not --radius-none (brief §2c: CTA is one
   of the --radius-sm call sites). */

.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-family: var(--font-body-strong);
  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-deep);
  color: var(--color-accent-ink);
}

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

/* --- Hero -------------------------------------------------------------------
   Brief §3b.2, §3c: single column, house DOM order (eyebrow -> h1 -> primary
   CTA -> field -> lead), design-rules §7.2 rule 1. The field is the LCP
   element and never reveal-gated. */

.hero {
  padding-block-start: var(--space-xl);
  padding-block-end: var(--section-gap);
}

.hero__eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.hero__title {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-display);
  /* text-wrap: balance and leading-tight are base.css defaults, kept. */
}

.hero__title .accent {
  color: var(--color-accent-deep);
}

.hero__cta {
  margin: 0 0 var(--space-md);
}

.hero__lead {
  margin-block-start: var(--space-lg);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

/* thanks.html reuses .hero for its shell but carries no field; the extra
   bottom padding still applies via .section-adjacent rhythm below. */
.hero--thanks {
  padding-block-end: var(--section-gap);
}

.thanks__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--color-ink);
}

.thanks__title + .lead {
  margin-block-start: 0;
}

/* --- The living-hero field: sketch-to-vector-plan device (brief §5a, §6) ---
   A bounded inset plate; aspect-ratio taken directly from the brief's own
   clarity-slot numbers (335 x 280 @375, design-rules §7.2 rule 4), so the
   field keeps its specified size at every width and the fold arithmetic
   holds without inventing a new figure. */

.field {
  position: relative;
  aspect-ratio: 335 / 280;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--color-atmo-1) 0%, var(--color-atmo-2) 100%);
}

.field__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The signature overlay — "the plan resolves" (brief §6), decorative,
   aria-hidden. Geometry is percentage-based so it scales with the field at
   every width, echoing the generated plate's own sketch-left/resolved-right
   composition rather than tracing it pixel for pixel. */

.field__sketch {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 30%;
  height: 34%;
  /* @allow-literal: signature's one-off sketch stroke width, brief §6 */
  border: 1.5px dashed var(--color-accent);
  opacity: 0.6;
  animation: field-sketch-out 300ms 1400ms var(--ease-standard) both;
}

.field__line {
  position: absolute;
  background: var(--color-accent-deep);
}

.field__line--1 {
  left: 8%;
  top: 12%;
  /* @allow-literal: plan-line stroke width, brief §6 bespoke device */
  height: 2px;
  width: 0;
  animation: field-line-h 260ms 1500ms linear both;
}

.field__line--2 {
  left: 8%;
  top: 12%;
  /* @allow-literal: plan-line stroke width, brief §6 bespoke device */
  width: 2px;
  height: 0;
  animation: field-line-v1 260ms 1650ms linear both;
}

.field__line--3 {
  left: 38%;
  top: 12%;
  /* @allow-literal: plan-line stroke width, brief §6 bespoke device */
  width: 2px;
  height: 0;
  animation: field-line-v2 260ms 1800ms linear both;
}

@keyframes field-line-h { to { width: 30%; } }
@keyframes field-line-v1 { to { height: 34%; } }
@keyframes field-line-v2 { to { height: 34%; } }
@keyframes field-sketch-out { to { opacity: 0; } }

.field__node {
  position: absolute;
  /* @allow-literal: plan-node motif dot size, brief §6 bespoke device */
  width: 6px;
  /* @allow-literal: plan-node motif dot size, brief §6 bespoke device */
  height: 6px;
  border-radius: 50%;
  background: var(--color-ridge);
  opacity: 0;
  animation: field-node-in 200ms 1950ms var(--ease-standard) both;
}

/* @allow-literal: half the node's own 6px size, to centre it on its point */
.field__node--1 { left: calc(8% - 3px); top: calc(12% - 3px); }
/* @allow-literal: half the node's own 6px size, to centre it on its point */
.field__node--2 { left: calc(38% - 3px); top: calc(12% - 3px); }
/* @allow-literal: half the node's own 6px size, to centre it on its point */
.field__node--3 { left: calc(8% - 3px); top: calc(46% - 3px); }

@keyframes field-node-in { to { opacity: 1; } }

.field__mote {
  position: absolute;
  /* @allow-literal: dust-mote size, brief §6 bespoke device */
  width: 3px;
  /* @allow-literal: dust-mote size, brief §6 bespoke device */
  height: 3px;
  border-radius: 50%;
  background: var(--color-ink-muted);
  opacity: 0.35;
}

.field__mote--1 {
  left: 78%;
  top: 18%;
  animation: field-drift-a 16s ease-in-out infinite;
}

.field__mote--2 {
  left: 20%;
  top: 68%;
  animation: field-drift-b 21s ease-in-out infinite;
}

@keyframes field-drift-a {
  0%, 100% { transform: translate(0, 0); }
  /* @allow-literal: mote 1 drift distance, brief §6 exact figure (∓10x8px) */
  50% { transform: translate(-10px, 8px); }
}

@keyframes field-drift-b {
  0%, 100% { transform: translate(0, 0); }
  /* @allow-literal: mote 2 drift distance, brief §6 exact figure (+9x-7px) */
  50% { transform: translate(9px, -7px); }
}

/* Reduced-motion base state (house-tech-spec §8, brief §6): the resolved
   plan at rest, not merely mid-loop. This is the base CSS state under the
   media query, not a special case bolted on. */
@media (prefers-reduced-motion: reduce) {
  .field__sketch { animation: none; opacity: 0; }
  .field__line--1 { animation: none; width: 30%; }
  .field__line--2 { animation: none; height: 34%; }
  .field__line--3 { animation: none; height: 34%; }
  .field__node { animation: none; opacity: 1; }
  .field__mote { animation: none; }
}

/* --- Plate figures (services + service-area image bands, brief §5) --------- */

.plate-figure {
  margin-block-start: var(--space-xl);
  margin: 0;
}

.plate-figure img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
}

#services .plate-figure,
#area .plate-figure {
  margin-block-start: var(--space-xl);
}

/* --- Services ---------------------------------------------------------------
   Brief §3b.3: flat 4px ridge square mark per row, dossier's own order, no
   ranking — a visually distinct mark from the process rail's numerals and
   the section headrule (design-rules §5). */

.service-list {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-xl);
  padding: 0;
}

.service-list__item {
  position: relative;
  padding-inline-start: var(--space-lg);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.service-list__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  /* @allow-literal: vertical centring against the running text's first line */
  top: 0.5em;
  /* @allow-literal: "a flat 4px ridge square mark," brief §3b.3, exact figure */
  width: 4px;
  /* @allow-literal: "a flat 4px ridge square mark," brief §3b.3, exact figure */
  height: 4px;
  background: var(--color-ridge);
}

.service-list__item b {
  font-weight: var(--font-weight-body-strong);
}

@media (min-width: 48em) {
  .service-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
  }
}

/* --- Process & Proof (sidebar-anchor archetype, brief §3, §3b.4) -----------
   Below 64rem: the rail collapses to an in-flow stacked index directly above
   the proof list. At and above 64rem: the rail is a sticky left column
   beside the scrolling proof column. */

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

.process__rail {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-hairline) var(--border-style) var(--color-line);
  background: var(--color-surface);
}

.process__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md);
  border-top: var(--border-hairline) var(--border-style) var(--color-line);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.process__row:first-child {
  border-top: none;
}

.process__num {
  flex: 0 0 auto;
  /* @allow-literal: fixed numeral column width, a layout constant not a type-scale value */
  width: 1.75rem;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-eyebrow);
  color: var(--color-ridge);
  font-variant-numeric: lining-nums;
}

.process__proof {
  display: grid;
  gap: var(--space-md);
}

.process__proof p {
  margin: 0;
  padding-block-end: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-line);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.process__proof p:last-child {
  border-bottom: none;
  padding-block-end: 0;
}

@media (min-width: 64em) {
  .process {
    /* @allow-literal: fixed rail column width, a layout constant not a type-scale value */
    grid-template-columns: minmax(0, 18rem) 1fr;
    align-items: start;
  }

  .process__rail {
    position: sticky;
    /* Clears the sticky header stack (design-rules §7.2 rule 3). */
    top: calc(var(--expiry-height) + var(--header-height) + var(--space-lg));
  }
}

/* --- Reviews ----------------------------------------------------------------
   Brief §3b.5: plain typographic quote blocks, hairline-divided, no star
   icons, no card grid. */

.reviews {
  display: grid;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

.review {
  margin: 0;
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) var(--border-style) var(--color-line);
}

.review:first-child {
  border-top: none;
  padding-block-start: 0;
}

.review p {
  margin: 0 0 var(--space-sm);
  max-width: var(--layout-measure);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.review cite {
  font-style: normal;
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.reviews__kicker {
  margin: 0 0 var(--space-md);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* --- Service area ------------------------------------------------------------ */

.towns {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display-medium);
  font-weight: var(--font-weight-display-medium);
  font-size: var(--text-lead);
  color: var(--color-ink);
}

.area__sentence {
  margin: 0 0 var(--space-xl);
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

/* --- FAQ ----------------------------------------------------------------------
   Brief §3b.7: disclosure-marker accordion, native <details>. The marker is a
   control, not a counter (design-rules §5 rule 2) — a plus that rotates to a
   cross-turned-diagonal on open, drawn with two pseudo-elements rather than
   an icon font or emoji (banned-defaults, design-rules §4). */

.faq {
  display: grid;
}

.faq__item {
  border-top: var(--border-hairline) var(--border-style) var(--color-line);
}

.faq__item:last-child {
  border-bottom: var(--border-hairline) var(--border-style) var(--color-line);
}

.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  padding-inline-end: var(--space-xl);
  font-family: var(--font-body-strong);
  font-weight: var(--font-weight-body-strong);
  font-size: var(--text-body);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--space-xs);
  top: 50%;
  /* @allow-literal: disclosure marker glyph geometry, brief §3b.7 bespoke control */
  width: 12px;
  /* @allow-literal: disclosure marker glyph geometry, brief §3b.7 bespoke control */
  height: 2px;
  background: var(--color-accent);
  transform: translateY(-50%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq__q::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__item[open] .faq__q::before {
  background: var(--color-accent-deep);
}

.faq__item[open] .faq__q::after {
  transform: translateY(-50%) rotate(0deg);
  background: var(--color-accent-deep);
}

.faq__a {
  margin: 0;
  padding-block-end: var(--space-md);
  max-width: var(--layout-measure);
  font-size: var(--text-body);
  color: var(--color-ink);
}

/* --- Form -------------------------------------------------------------------
   One form per site (spec §6). POSTs to the endpoint constant in main.js;
   works as a plain HTML POST with JS off. */

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

/* Named field-row, not field, so it never collides with the hero's
   living-hero plate above (.field) — the same rename this registry has used
   before for the same reason (auto-evolution-north-logan-ut). */
.field-row {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  font-family: var(--font-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);
  font-family: var(--font-body);
  border: var(--border-hairline) var(--border-style) var(--color-line);
  border-radius: var(--radius-sm);
}

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

select.field__control {
  appearance: auto;
}

.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-body);
  color: var(--color-ink-muted);
}

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

.contact__secondary {
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

.contact__secondary a {
  color: var(--color-ink);
}

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

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-thick) var(--border-style) var(--color-accent-deep);
  /* @allow-literal: footer top hairline is 2px per brief §3b.9, echoes the headrule */
  border-top-width: 2px;
  font-size: var(--text-body);
  color: var(--color-ink);
}

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

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

.site-footer__tagline {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-muted);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}