/* ==========================================================================
   site.css — Team One Tile (Endwell, NY).
   Source: runs/team-one-tile-endwell-ny/brief.md.
   Family: editorial-modern. Archetype: editorial-stack — single content
   column at every width, no split-hero switch (brief §2).

   Tokens only, per house-tech-spec §3. Breakpoints (48em/64em) and the
   two-hatch @allow-literal comment are the only literal escape hatches.
   ========================================================================== */

/* Skip link — house base.css defaults it to --color-accent/--color-accent-ink,
   which on this site's palette measures 1.75:1 (accent is decorative/
   large-display only, brief §4's contrast table). Reused the site's one
   safe button pairing instead: ink fill, bg-coloured text, 13.02:1. */
.skip-link {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

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

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

/* --- Header & navigation ---------------------------------------------------
   Static flow, house default (no sticky stack — brief §6.1 computes its
   arithmetic against the plain flow header, matching the convention
   yellow-duck-pool-repair-fort-myers-fl/brief.md §6.1 used). */

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

/* Compact outline call button in the header — transcribed from tile-b.html's
   own ".callbtn" device (bordered, ink-on-bg, not the filled primary role),
   sized down from the house .btn--quiet default via existing tokens only. */
.site-header__cta {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-small);
}

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

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  /* The nav-toggle's only shape is this hairline, so it is a CONTROL boundary
     (WCAG 1.4.11, >= 3:1), not a decorative one — use --color-border-strong. */
  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);
}

/* QA r3 FIX perf/cls (house pattern, carried from the skeleton): the
   collapsed nav state is the plain CSS default below 48em, un-gated by
   [data-nav-ready], so there is no post-paint collapse to shift the layout.
   JS-off visitors get the nav back via the <noscript> stylesheet override in
   @shared:head-boilerplate, which ships last in source order. */
.site-nav {
  display: none;
}

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

@media (min-width: 48em) {
  .site-nav {
    display: block;
  }

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

/* --- Eyebrow ---------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin: 0 0 var(--space-2xs);
}

/* The settled grout-line becomes every section's own head-rule below the
   hero (brief §8: "the settled line, flattened to a static terracotta
   hairline, becomes the head-rule reused atop every section below... the
   hero and the page read as one continuous material index"). Transcribed
   from tile-b.html's own grout-draw stroke colour, accent-ink. */
.section-head {
  border-top: var(--border-thick) var(--border-style) var(--color-accent-ink);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.section-head h2 {
  margin: 0;
}

h2.section-title {
  font-family: var(--font-display);
  font-size: var(--text-index-num);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

/* --- Hero — brief §6.1's own stated order: site header -> living-hero
   field -> eyebrow -> H1 -> lead -> primary CTA. The field is DOM-first,
   full-bleed, fixed-height via the token (not aspect-ratio — brief §5
   already gives the field its own clamp). --- */

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

/* Padding/margins tightened from an initial pass against brief §6.1's own
   ~22px/~10px/~8px/~22px planning figures — the Builder re-measured the live
   DOM per the brief's own instruction and found the actual H1 wraps to two
   lines at 375px (42-character headline against the fluid --text-display
   floor), consuming ~38px more than the brief's one-line estimate. Tightened
   here to keep the primary CTA comfortably above the fold at 375px, as
   house-tech-spec's hero requirement itself asks ("reachable without
   scrolling") — flagged to the Art Director as a brief-arithmetic gap
   rather than silently absorbed. */
.hero__copy {
  padding-block-start: var(--space-sm);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2xs);
}

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

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

/* Living-hero field — full-bleed, the one moment of motion on the page
   (brief §8). Never carries text at any breakpoint (brief §4). Height is
   the brief's own fluid token, not an aspect-ratio, so the field's height
   is identical regardless of the served image's own proportions. */
.hero__field {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--hero-field-height);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.hero__field picture,
.hero__field img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Raking-light sweep — a continuous ambient loop travelling across the full
   hex-to-stone plate (brief §8: --duration-ambient-a, linear, never
   synchronised with the hex-chip float). */
.hero__sweep {
  fill: var(--color-bg);
  opacity: 0.14;
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-sweep var(--duration-ambient-a) var(--ease-linear) infinite;
}

/* Grout-line draw — once on load along the seam between the two patterns,
   settling permanently (brief §8). */
.hero__seam-draw {
  fill: none;
  stroke: var(--color-accent-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: hero-draw var(--duration-draw) var(--ease-out) var(--delay-draw) 1 forwards;
}

/* Stray hex-chip float — a second, separately-timed ambient loop (brief §8:
   --duration-ambient-b, ease-in-out). */
.hero__chip {
  fill: var(--color-accent);
  opacity: 0.65;
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-chip-float var(--duration-ambient-b) var(--ease-in-out) infinite;
}

@keyframes hero-sweep {
  0%   { transform: translateX(-40%) rotate(-9deg); opacity: 0.08; }
  50%  { transform: translateX(340%) rotate(-9deg); opacity: 0.22; }
  100% { transform: translateX(-40%) rotate(-9deg); opacity: 0.08; }
}

@keyframes hero-draw {
  from { stroke-dashoffset: 720; }
  to   { stroke-dashoffset: 0; }
}

/* @allow-literal: decorative micro-rotation on the signature-move chip,
   matching tile-b.html's own satellite keyframe shape; `deg` carries no
   design-token meaning here, only the tile's motion shape. */
@keyframes hero-chip-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(calc(var(--space-3xs) * -1)) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sweep,
  .hero__chip,
  .hero__seam-draw {
    animation: none;
  }

  /* Settled state (brief §8): the grout line pre-drawn to its full length,
     the raking sweep and hex-chip simply present at rest. */
  .hero__seam-draw {
    stroke-dashoffset: 0;
  }

  .hero__sweep {
    opacity: 0;
  }
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact-chip {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: var(--border-hairline) var(--border-style) var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
}

/* --- Figures — shared by services/trust/divider images. Isolated on the
   page's own ground per the brief's style recipe ("no surrounding room
   context"); no card chrome. --- */

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

.services__figure img {
  border-radius: var(--radius-sm);
}

/* --- Services (#services) — brief §6.2: plain rule-separated rows, small
   terracotta dot marker, NOT a numeral counter (brief §6.3's two-counters
   rule). --- */

.services__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.services__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
}

.services__row::before {
  content: '';
  flex: none;
  inline-size: var(--space-3xs);
  block-size: var(--space-3xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  align-self: center;
}

/* --- Install-day process (#process) — the page's ONLY counter role
   (brief §6.3): decimal-leading-zero numerals, Petrona 600,
   --color-accent-ink. Surface band transcribed from tile-b.html's own
   ".rep-section" treatment (background: surface; hairline top/bottom) —
   the tile applies this band to the representative section, which is this
   one (brief §6.2/§10: the install-day process is what won this tile its
   C2 tie-break). --- */

.process-panel {
  background-color: var(--color-surface);
  border-block: var(--border-hairline) var(--border-style) var(--color-border);
}

.process__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) var(--border-style) var(--color-border);
}

.process__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
}

.process__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-index-num);
  line-height: 1;
  color: var(--color-accent-ink);
}

.process__title {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  margin: 0 0 var(--space-2xs);
}

.process__body {
  max-width: var(--layout-measure);
  color: var(--color-ink-muted);
  margin: 0;
}

/* --- Trusted & reviewed (#trust) — text only, no fabricated badge graphics
   (design-rules §8). --- */

.trust__facts {
  display: grid;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.trust__facts li {
  font-size: var(--text-body);
  max-width: var(--layout-measure);
}

.pullquote {
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent-ink);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  margin: var(--space-md) 0 0;
  max-width: var(--layout-measure);
}

.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--color-ink);
  margin: 0;
}

.pullquote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-top: var(--space-2xs);
}

/* --- Service area (#service-area) — named list, no radius claim. --- */

.service-area__list {
  font-size: var(--text-body);
  max-width: var(--layout-measure);
}

/* --- Section-divider figure (brief §7, imagery slot 4). Content-bearing
   alt text per copy.md §5, so it is a plain figure, not aria-hidden. --- */

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

.divider img {
  border-radius: var(--radius-sm);
}

/* --- FAQ (#faq) — native disclosure widget; the chevron is its own
   ornament, ink-muted, no accent colour (brief §6.3's second limit: an
   element that already carries its own disclosure marker does not also
   get a counter). --- */

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

.faq__item {
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  padding-bottom: var(--space-md);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-2xs);
}

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

.faq__q::after {
  content: '';
  flex: none;
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
  border-inline-end: var(--border-hairline) var(--border-style) var(--color-ink-muted);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-ink-muted);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq__item[open] .faq__q::after {
  transform: rotate(225deg);
}

.faq__a {
  max-width: var(--layout-measure);
  padding-top: var(--space-2xs);
}

.faq__a p {
  margin: 0 0 var(--space-2xs);
  color: var(--color-ink-muted);
}

.faq__a cite {
  display: block;
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Buttons -----------------------------------------------------------------
   ONE fill colour on this whole site: ink (brief §4's contrast table —
   "Primary CTA and all solid-ink buttons"). --color-accent is reserved for
   large-display/decorative use only and is never a button fill here. --- */

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

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

/* --- Form -----------------------------------------------------------------
   One form per site (spec §6). --- */

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

/* Honeypot: present in the DOM for bots, unreachable for humans and assistive
   tech. Not display:none — some bots skip those. */
.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;
}