/* ==========================================================================
   site.css — Aqua Man Pools (McAllen, TX), "The Reply Line".
   Layout archetype: reply-stack (brief section 3). Editorial single-column
   stack below 60em, two-column split hero at and above it. Tokens only —
   no raw hex, px-size or font-name literal. Escape hatches: the house
   breakpoints (48em/64em) and an explicit @allow-literal: reason comment.
   ========================================================================== */

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

.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 ----------------------------------------------------
   Brief section 3.1: "the header's own internal content — wordmark left,
   tel: CTA right — is a single row at every width from 320px up; nav anchor
   links live behind a hamburger below 768px and appear inline above it."
   That means the phone CTA sits OUTSIDE the collapsible nav, in its own
   .site-header__actions wrapper — it must never hide behind the hamburger on
   a call-first trade site — while the two text links (Services / Start
   Weekly Service) are what collapses, using the house .site-nav toggle
   mechanism unchanged. ------------------------------------------------------ */

.site-header {
  position: relative;
  z-index: var(--z-header);
  /* Tighter than the house default (--space-sm) so the header's own measured
     height matches the brief's section 3.1 fold arithmetic (109px chrome =
     44px expiry bar + 65px header-with-border). */
  padding-block: var(--space-xs);
  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);
}

.site-header__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2xs);
}

/* The header's own persistent phone CTA — slimmer than .btn on purpose: at
   320px the wordmark, this link and the nav-toggle all sit on one row (brief
   section 3.1), and .btn's own padding does not leave room for all three
   even with the label alone. Still a real control: --layout-tap-min applies
   via [data-tap] (base.css), so the touch target stays 44px throughout.
   The label text collapses to icon-only below the measured crowding point
   (aria-label on the link carries the accessible name at every width, so
   nothing goes unnamed) and returns at and above it. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: var(--layout-tap-min);
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__cta-icon {
  flex: 0 0 auto;
}

.site-header__cta-text {
  display: none;
}

/* @allow-literal: 29em (464px) is the measured point above which the
   wordmark, the full phone label and the nav-toggle fit one row (brief
   section 3.1) — checked against the render, not assumed from the tokens. */
@media (min-width: 29em) {
  .site-header__cta-text {
    display: inline;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--layout-tap-min);
  padding: var(--space-2xs);
  /* 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);
  color: var(--color-ink);
}

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

/* House pattern (skeleton QA r3 FIX perf/cls): closed is the plain CSS
   default below 48em, with no JS gate, so there is nothing to collapse
   post-paint. The <noscript> stylesheet override in @shared:head-boilerplate
   restores it for JS-off visitors. */
.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;
  }
}

/* --- Buttons ---------------------------------------------------------------- */

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

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

/* --- Form -------------------------------------------------------------------- */

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

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

/* --- Repeated ornament: the section-rule bar --------------------------------
   Brief section 2.3: "the only repeated ornaments are the section-rule bar
   (fixed 48px x 2px, not fluid, no minimum-width scenario) and the
   reply-index numerals." One mark, reused at the top of the hero and before
   every h2. Fixed size on purpose — this ornament never needs a minimum-
   width fallback because it never shrinks. */
.rule-mark {
  /* @allow-literal: the brief's own fixed, non-fluid ornament width (section 2.3) — never scales, so not a token step */
  width: 48px;
  /* @allow-literal: the brief's own fixed, non-fluid ornament height (section 2.3) — never scales, so not a token step */
  height: 2px;
  background-color: var(--color-accent);
  margin-block-end: var(--space-sm);
}

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

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

.section-head h2 {
  margin-block-start: var(--space-2xs);
}

.section-head p {
  margin-block-start: var(--space-xs);
  color: var(--color-ink-muted);
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block-start: var(--space-lg);
  padding-block-end: var(--section-gap);
  background: linear-gradient(
    180deg,
    var(--color-atmosphere-light) 0%,
    var(--color-bg) 40%,
    var(--color-atmosphere-deep) 100%
  );
}

@media (min-width: 60em) {
  .hero {
    padding-block-start: var(--space-2xl);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'rule'
    'eyebrow'
    'h1'
    'cta'
    'field'
    'lead'
    'facts';
  row-gap: var(--space-sm);
}

/* @allow-literal: 60em is the brief's own declared two-column split
   (section 3, "becoming a two-column split hero at >=960px"), distinct
   from the house's two structural breakpoints (base.css), which govern
   chrome, not this archetype's hero grid.

   The area map is REDECLARED here, not merely re-columned: a single-token
   row name only ever occupies the implicit column, so widening
   grid-template-columns alone (an earlier version of this rule) left every
   area in column 1 and the field stacking BELOW the text instead of beside
   it — caught by rendering the page at 1440px and measuring the field's own
   bounding box, which is exactly what section 3.1 asks the Builder to do
   rather than assume. 'field' repeats down every row of column 2, so the
   named-area syntax spans it the full column height on its own — no
   grid-row override needed. */
@media (min-width: 60em) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'rule    field'
      'eyebrow field'
      'h1      field'
      'cta     field'
      'lead    field'
      'facts   field';
    column-gap: var(--space-xl);
    row-gap: var(--space-md);
    align-items: start;
  }
}

.hero .rule-mark { grid-area: rule; }
.hero__eyebrow { grid-area: eyebrow; }
.hero__title { grid-area: h1; margin-block: 0; }
.hero__cta { grid-area: cta; margin: 0; }
.hero__field { grid-area: field; }
.hero__lead { grid-area: lead; margin: 0; color: var(--color-ink); }
.hero__facts { grid-area: facts; }

.hero__title {
  font-size: var(--text-hero);
}

/* The italic accent word — Petrona's own italic cut, not a synthetic slant
   (brief section 1, ref-001's "huge display face with italic colour-accent
   word" convention). */
.hero__title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero__cta .btn { margin-block-start: var(--space-2xs); }

.hero__lead {
  font-size: var(--text-lead);
  max-width: var(--layout-measure);
}

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

/* Brief section 2.2: the facts row sits on an opaque --color-surface pill,
   never bare on the gradient — ink-muted measures only 3.91:1 against the
   gradient's deepest stop, below the 4.5:1 body floor for this size/weight.
   The pill gives it a computed 5.24:1 against --color-surface instead. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-sm);
  background-color: var(--color-surface);
  color: var(--color-ink-muted);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
}

/* --- The living-hero field ---------------------------------------------- */

.hero__field {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-atmosphere-deep);
  /* @allow-literal: the brief's own computed field aspect ratio at the 375px fold (section 3.1), reproducible on the render */
  aspect-ratio: 343 / 240;
}

@media (min-width: 60em) {
  .hero__field {
    aspect-ratio: auto;
    height: 100%;
    /* @allow-literal: the brief's own computed field height at the 1440px fold (section 3.1), matched so the right column reaches it */
    min-height: 480px;
  }
}

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

/* Annotation chips — HTML/CSS overlays, never baked into the generated
   image (brief section 4.1). Opaque white fill so --color-vessel-ink text
   reads at 7.58:1 regardless of what sits behind them in the frame. */
.hero__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--color-chip-bg);
  color: var(--color-vessel-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  box-shadow: var(--shadow-sm);
}

.hero__chip--coping {
  /* Clear of .hero__trident's own 12%-26% footprint (below), so the pole
     never crosses the label — measured on the render at 375 and 1440. */
  inset-inline-start: 34%;
  inset-block-start: 33%;
}

.hero__chip--waterline {
  inset-inline-end: 6%;
  inset-block-start: 44%;
}

/* Satellite ornaments — three independently-timed, non-synchronised ambient
   loops (brief section 4.1/5), adapting ref-001's satellite-float physics
   to Carlo's own review-reply sign-off (dossier section 4.4: the trident/
   wave sign-off). Decorative, aria-hidden. */
.hero__ornaments {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__trident {
  position: absolute;
  inset-inline-start: 12%;
  inset-block-start: 18%;
  /* @allow-literal: a decorative ornament's own drawing size, scaled to the field's coordinate space — not a reading measure */
  width: 14%;
  height: auto;
  transform-origin: top center;
  animation: trident-sway var(--duration-ambient-trident) var(--ease-in-out) infinite;
}

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

.hero__marker {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 44%;
  /* @allow-literal: ornament diameter as a percentage of the field's own coordinate space, matching .hero__trident above */
  width: 3%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  border: var(--border-thick) var(--border-style) var(--color-accent);
  animation: marker-pulse var(--duration-ambient-marker) var(--ease-in-out) infinite;
}

@keyframes marker-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.hero__glint {
  position: absolute;
  inset-inline-start: -15%;
  inset-block-start: 52%;
  width: 26%;
  height: 6%;
  background-color: var(--color-bg);
  opacity: 0.5;
  /* @allow-literal: a soft ornament blur radius, not a reading measure. */
  filter: blur(6px);
  border-radius: var(--radius-pill);
  animation: glint-drift var(--duration-ambient-glint) var(--ease-in-out) infinite;
}

@keyframes glint-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__trident {
    animation: none;
    transform: rotate(0deg);
  }

  .hero__marker {
    animation: none;
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }

  .hero__glint {
    animation: none;
    transform: translateX(140%);
  }
}

/* --- Section 2: The Weekly Reply ----------------------------------------- */

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

.reply-index__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}

/* Reply-index numerals — the brief's other repeated ornament (section 2.3):
   fixed-width display numerals inside a list that never truncates. Distinct
   face and colour role from body text, matching the house's two-axis
   nested-counter convention. */
.reply-index__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-accent);
}

.reply-index__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
}

.reply-index__desc {
  display: block;
  margin-block-start: var(--space-3xs);
  color: var(--color-ink-muted);
}

.price-chip {
  display: inline-flex;
  padding: var(--space-2xs) var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-lead);
  margin-block-end: var(--space-lg);
}

/* Pull-quote band — flush left-border block, per ref-006, radius-none. The
   verbatim-review treatment (brief section 1). Petrona Italic extended to
   the pull-quote body, unifying the registry's emphasis_font role (C3
   decision, "a minor, cited craft decision"). */
.pull-quote {
  margin: 0;
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  border-radius: var(--radius-none);
}

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

.pull-quote__attribution {
  display: block;
  margin-block-start: var(--space-xs);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* --- Section 3: What Aqua Man Handles ------------------------------------ */

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

@media (min-width: 48em) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* @allow-literal: 64em is the house's own second structural breakpoint
   (base.css) — reused here, not redeclared, for the grid's widest step.
   Four columns, never three (design-rules section 4 bans three-across). */
@media (min-width: 64em) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__media {
  display: block;
  width: 100%;
  height: auto;
}

.card__body {
  padding: var(--space-md);
}

.card__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-h3);
}

.card__desc {
  margin: 0;
  color: var(--color-ink-muted);
}

/* --- Section 4: Trust & Service Area -------------------------------------- */

.trust-band {
  position: relative;
  overflow: hidden;
}

.trust-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
}

.trust-band__content {
  position: relative;
  display: grid;
  gap: var(--space-md);
}

.trust-band__content > .pull-quote {
  margin-block: var(--space-sm);
}

.trust-band__rating {
  font-weight: var(--font-weight-body-strong);
}

/* --- Form section ---------------------------------------------------------
   House form shell (above), plus the brief's call-first repeat. ---------- */

.contact__cta {
  margin-block-start: var(--space-sm);
}