/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Garden
 * enrichment: real photography (16-plate library) · nav: N9 Edge-aligned minimal · footer: Ft1 Mast-headed
 * tone: utilitarian · anchor hue: 110 (leaf-neutral) · accent hue: 148 (leaf green)
 * pre-emit critique: P5 H4 E5 S5 R5 V4
 */

@import url("tokens.css");

/* ---------- Reset / root ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-2); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.tnum { font-variant-numeric: tabular-nums; }

/* the outlier face carries exactly one role: the phone number */
.phone {
  font-family: var(--font-outlier);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  z-index: var(--z-sticky);
}
.skip-link:focus-visible { left: var(--space-md); }

.wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }

.btn[aria-disabled="true"] {
  background: var(--color-paper-3);
  border-color: var(--color-rule);
  color: var(--color-neutral);
  pointer-events: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-2);
}
.btn--ghost:hover { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1.5px); }
  .btn:active { transform: translateY(1px); }
}

/* ---------- N9 · Edge-aligned minimal nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}

.nav__mark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__mark:hover { color: var(--color-accent); }

.nav__call { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.nav__call-label { color: var(--color-neutral); }
.nav__call:hover .nav__call-label { color: inherit; }

@media (max-width: 26rem) {
  .nav__call-label { display: none; }
}

/* ---------- Hero · asymmetric diptych, figure left (5fr / 7fr) ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-xl) var(--space-3xl);
}

/* square crop so the narrow column carries the same optical weight as the text */
.hero__figure img {
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

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

.hero__display {
  font-size: var(--text-display);
  max-width: 14ch;
}

.hero__lede {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: var(--measure);
  line-height: 1.5;
}

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

.hero__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 48ch;
}

@media (max-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block: var(--space-md) var(--space-3xl);
  }
  .hero__display { max-width: none; }
  .hero__figure img { aspect-ratio: 3 / 2; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--space-3xl); }
.section:last-of-type { padding-block-end: var(--space-4xl); }

.section--tint { background: var(--color-paper-2); }

/* S2 · Hanging section head — single column, stacked, no eyebrow */
.head { padding-block-end: var(--space-xl); }
.head h2 {
  font-size: var(--text-2xl);
  max-width: 20ch;
}

/* ---------- Split Studio rows ---------- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.row:first-of-type { border-block-start: 0; padding-block-start: 0; }

/* the alternation — proof moves to the other half */
.row--flip .row__text { order: 2; }
.row--flip .row__figure { order: 1; }

.row--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-block-start: 0; padding-block-start: 0; }

.row__text { display: grid; gap: var(--space-sm); align-content: start; }
.row__text h3 { font-size: var(--text-lg); max-width: 22ch; }
.row__text p { color: var(--color-ink-2); max-width: var(--measure); }
.row__text .lede { font-size: var(--text-md); color: var(--color-ink); line-height: 1.5; }

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

@media (max-width: 56rem) {
  .row, .row--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  /* on one column the image always follows its text */
  .row--flip .row__text { order: 0; }
  .row--flip .row__figure { order: 0; }
}

/* ---------- F3 · Tabular spec sheet ---------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec th, .spec td {
  text-align: start;
  vertical-align: baseline;
  padding-block: var(--space-sm);
  padding-inline-end: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.spec th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-muted);
  white-space: nowrap;
  width: 1%;
}
.spec td { color: var(--color-ink); }
.spec__note { color: var(--color-neutral); }
.spec td.spec__todo { color: var(--color-error); }

@media (max-width: 44rem) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec tr { padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
  .spec th, .spec td { border: 0; padding-block: 0; padding-inline-end: 0; }
  .spec th { margin-block-end: var(--space-3xs); }
  .spec__note { font-size: var(--text-xs); }
}

/* ---------- Conversational FAQ ---------- */

.faq {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  max-width: 48rem;   /* keep the +/− marker beside the question, not stranded at the page edge */
}

.faq__item { border-block-end: var(--rule-hair) solid var(--color-rule); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary h3 {
  font-size: var(--text-md);
  font-weight: 400;
  flex: 1 1 auto;
  min-width: 0;
}

.faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.faq__item[open] summary::after { content: "−"; }

.faq__item summary:hover h3 { color: var(--color-accent); }

.faq__answer {
  padding-block-end: var(--space-lg);
  max-width: var(--measure);
  color: var(--color-ink-2);
}

/* progressive enhancement — animates where ::details-content is supported */
@supports selector(::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-short) var(--ease-in-out), content-visibility var(--dur-short) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* ---------- Contact ---------- */

.contact { display: grid; gap: var(--space-md); justify-items: start; }

.contact__title { font-size: var(--text-2xl); }

.contact__phone { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1; }
.contact__phone a {
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.contact__phone a:hover { color: var(--color-accent); }

.contact__meta { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Ft1 · Mast-headed footer ---------- */

.foot { padding-block-end: var(--space-2xl); }

/* the rule aligns to the content column, not the padding box */
.foot__inner {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  padding-block-start: var(--space-xl);
  display: grid;
  gap: var(--space-2xs);
}

.foot__mark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.foot__tag { color: var(--color-ink-2); max-width: var(--measure); }
.foot__meta { color: var(--color-muted); font-size: var(--text-sm); margin-block-start: var(--space-sm); }
.foot__meta a { white-space: nowrap; }

/* ---------- Motion · one orchestrated load reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes reveal {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- Safe areas ---------- */

@supports (padding: max(0px)) {
  .wrap {
    padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left));
    padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right));
  }
}