/* Hallmark · macrostructure: Split Studio · H2 hero knobs: ratio=7/5, right=photo, divider=negative-space
 * nav: N1b (links=3, dropdowns=none, frost-on-scroll) · footer: Ft1 mast-headed
 * theme: studied-DNA (source: https://putsinki.fi/) · paper oklch(98.2% 0.013 71.3) · accent oklch(34.7% 0.118 257) navy · accent-2 green
 * display: Poppins 600/700 (client brand — BRAND.md wins) · body: Poppins 400 · tone: soft-professional
 * enrichment: none (real client photography) · studied: yes · DNA-source: url (client's own site, order e3b915c5)
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · gate-1 note: Poppins = client-specified brand font (BRAND.md wins)
 */

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); font-weight: 700; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); }
p { margin: 0 0 var(--space-md); max-width: 65ch; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: inherit; }
.muted { color: var(--color-ink-2); }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
main { display: block; }

.skip-link {
  position: absolute; left: var(--space-md); top: -100%;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill);
  z-index: var(--z-toast); transition: none;
}
.skip-link:focus-visible { top: var(--space-md); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 44px; padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-base);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn--fill { background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); }
.btn--fill:hover { background: var(--color-accent-deep); transform: translateY(-1.5px); }
.btn--fill:active { transform: translateY(1px); }
.btn--line { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.btn--line:hover { background: var(--color-paper-2); transform: translateY(-1.5px); }
.btn--line:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none;
}
.btn--ghost { background: transparent; color: var(--color-accent-ink); border: 1px solid var(--color-accent-ink); }
.btn--ghost:hover { background: color-mix(in oklch, var(--color-accent-ink) 12%, var(--color-accent)); transform: translateY(-1.5px); }
.btn--ghost:active { transform: translateY(1px); }

/* ── Nav · N1b ────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled {
  background: color-mix(in oklch, var(--color-paper) 80%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--color-rule);
  box-shadow: var(--shadow-soft);
}
.nav__inner {
  max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter);
  height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
}
.nav__brand { justify-self: start; display: inline-flex; align-items: center; }
.nav__brand img { height: 38px; width: auto; }
.nav__center { justify-self: center; display: flex; gap: var(--space-xs); }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill);
  color: var(--color-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { background: var(--color-paper-3); }
.nav__link[aria-current="page"] { color: var(--color-accent); }
.nav__right { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-sm); }
.nav__toggle {
  display: none; border: 1px solid var(--color-rule-2); background: var(--color-paper-2);
  border-radius: var(--radius-input); min-width: 44px; min-height: 44px;
  font: inherit; cursor: pointer; color: var(--color-ink);
}
.nav__sheet { display: none; }
@media (max-width: 56rem) {
  .nav__center { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__sheet {
    position: fixed; inset: 68px 0 auto; z-index: var(--z-dropdown);
    background: var(--color-paper); border-bottom: 1px solid var(--color-rule);
    padding: var(--space-sm) var(--page-gutter) var(--space-lg);
    flex-direction: column; gap: var(--space-2xs);
  }
  .nav--open .nav__sheet { display: flex; }
  .nav--open { background: var(--color-paper); }
  .nav__sheet .nav__link { min-height: 48px; }
}

/* ── Hero · H2 split diptych ──────────────────────────────────────── */
.hero { padding-block: calc(68px + var(--space-3xl)) var(--space-4xl); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl); align-items: center;
}
.hero__lede { font-size: var(--text-md); color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.hero__figure { margin: 0; }
.hero__figure img {
  border-radius: var(--radius-card); width: 100%; object-fit: cover;
  aspect-ratio: 3 / 4; max-height: 560px;
}
@media (max-width: 56rem) {
  .hero { padding-block: calc(68px + var(--space-xl)) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero__figure img { aspect-ratio: 4 / 3; }
}

/* One orchestrated entrance — hero halves cross-fade, slightly staggered. */
.reveal { opacity: 0; transform: translateY(8px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ── Split rows (Split Studio body) ───────────────────────────────── */
.split { padding-block: var(--space-2xl); }
.split__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl); align-items: center;
}
.split--flip .split__grid > figure { order: -1; }
.split__grid figure { margin: 0; }
.split__grid img { border-radius: var(--radius-card); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split h2 { max-width: 22ch; }
@media (max-width: 56rem) {
  .split__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .split--flip .split__grid > figure { order: 0; }
}

/* ── Steps · F4 ───────────────────────────────────────────────────── */
.steps-band { background: var(--color-paper-3); padding-block: var(--space-3xl); }
.steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); counter-reset: step; }
.steps li { counter-increment: step; }
.steps .stage {
  font-weight: 700; font-size: var(--text-lg); color: var(--color-accent-2-ink);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--space-xs);
}
.steps .stage::before { content: counter(step) "."; }
.steps h3 { margin-bottom: var(--space-xs); }
.steps p { margin: 0; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 72rem) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .steps, .steps--4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* ── Proof · T1 pull quotes ───────────────────────────────────────── */
.proof { padding-block: var(--space-3xl); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); margin-top: var(--space-xl); }
.proof blockquote {
  margin: 0; font-size: var(--text-md); line-height: 1.5; font-weight: 500;
  border-inline-start: 3px solid var(--color-accent-2); padding-inline-start: var(--space-lg);
}
.proof .attribution { margin: var(--space-sm) 0 0; padding-inline-start: calc(var(--space-lg) + 3px); }
@media (max-width: 56rem) { .proof__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* ── Guarantee band (navy surface) ────────────────────────────────── */
.band {
  background: var(--color-accent); color: var(--color-accent-ink);
  padding-block: var(--space-2xl);
}
.band h2 { color: var(--color-accent-ink); }
.band p { color: color-mix(in oklch, var(--color-accent-ink) 88%, var(--color-accent)); }
.band .small { font-size: var(--text-sm); }

/* ── CTA strip ────────────────────────────────────────────────────── */
.cta-strip { padding-block: var(--space-3xl); text-align: left; }
.cta-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.cta-strip p { margin: 0; font-size: var(--text-md); max-width: 40ch; }

/* ── Content pages ────────────────────────────────────────────────── */
.page-head { padding-block: calc(68px + var(--space-2xl)) var(--space-xl); }
.page-head p { font-size: var(--text-md); color: var(--color-ink-2); }
.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }

/* Included-list */
.inc-list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.inc-list li { padding: var(--space-sm) 0 var(--space-sm) var(--space-xl); position: relative; border-bottom: 1px solid var(--color-rule); }
.inc-list li:last-child { border-bottom: 0; }
.inc-list li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--space-sm) + 0.45em);
  width: 0.6em; height: 0.3em; border-left: 2px solid var(--color-accent-2-ink);
  border-bottom: 2px solid var(--color-accent-2-ink); transform: rotate(-45deg);
}
.inc-list--cols { max-width: none; columns: 2; column-gap: var(--space-2xl); }
.inc-list--cols li { break-inside: avoid; }
@media (max-width: 56rem) { .inc-list--cols { columns: 1; } }

/* Pricing rows */
.price-table { width: 100%; max-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.price-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.price-table caption { text-align: left; margin-bottom: var(--space-sm); color: var(--color-ink-2); caption-side: top; }

/* FAQ */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary {
  cursor: pointer; padding: var(--space-md) 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--color-accent-2-ink); }
.faq details[open] summary::after { content: "−"; }
.faq details > p { margin: 0 0 var(--space-md); }

/* Muuttis tier cards */
.tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg); margin-top: var(--space-xl); align-items: start;
}
@media (max-width: 64rem) { .tiers { grid-template-columns: minmax(0, 1fr); max-width: 34rem; } }
.tier {
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.tier--featured { border: 2px solid var(--color-accent); }
.tier__badge {
  align-self: flex-start; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-accent-ink); background: var(--color-accent);
  border-radius: var(--radius-pill); padding: 0.1rem 0.7rem;
}
.tier h3 { margin: 0; }
.tier__price { font-size: var(--text-lg); font-weight: 700; color: var(--color-accent); margin: 0; }
.tier__price .muted { font-size: var(--text-sm); font-weight: 400; }
.tier__sizes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tier__sizes td { padding: var(--space-2xs) 0; border-bottom: 1px solid var(--color-rule); }
.tier__sizes tr:last-child td { border-bottom: 0; }
.tier__sizes td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.tier__more { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.tier__more summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; min-height: 44px;
}
.tier__more summary::-webkit-details-marker { display: none; }
.tier__more summary::after { content: "+"; color: var(--color-accent-2-ink); font-weight: 400; }
.tier__more[open] summary::after { content: "−"; }
.tier__more ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.tier__more li { padding: var(--space-2xs) 0 var(--space-2xs) var(--space-lg); position: relative; }
.tier__more li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.5em; height: 0.25em; border-left: 2px solid var(--color-accent-2-ink);
  border-bottom: 2px solid var(--color-accent-2-ink); transform: rotate(-45deg);
}
.tier .btn { width: 100%; margin-top: auto; }

/* Contact layout */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
@media (max-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.contact-card dl { margin: 0; }
.contact-card dt { font-weight: 600; margin-top: var(--space-md); }
.contact-card dt:first-child { margin-top: 0; }
.contact-card dd { margin: 0; color: var(--color-ink-2); }

/* ── Form ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--space-lg); max-width: 34rem; }
.field label { display: block; font-weight: 500; margin-bottom: var(--space-2xs); }
.field input, .field textarea {
  width: 100%; min-height: 44px; padding: var(--space-xs) var(--space-md);
  font: inherit; color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-input);
  outline: 2px solid transparent; outline-offset: 1px;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field textarea:hover { background: var(--color-paper-3); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field .helper { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); margin: var(--space-2xs) 0 0; }
.field.is-error input, .field.is-error textarea { border-color: var(--color-error); }
.field.is-error .helper { color: var(--color-error); }
.form__status { min-height: 1lh; margin: 0; }
.form__status.is-error { color: var(--color-error); }
.form__status.is-success { color: var(--color-accent-2-ink); font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer · Ft1 mast-headed ─────────────────────────────────────── */
.foot { border-top: 1px solid var(--color-rule); padding-block: var(--space-2xl); margin-top: var(--space-2xl); }
.foot__mast img { height: 44px; width: auto; }
.foot__tagline { margin: var(--space-sm) 0 var(--space-lg); color: var(--color-ink-2); max-width: 52ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.foot__links a { color: var(--color-ink); text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.foot__links a:hover { color: var(--color-accent); text-decoration: underline; }
.foot__legal { font-size: var(--text-sm); color: var(--color-ink-2); max-width: none; }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .btn--fill:hover, .btn--line:hover { transform: none; }
}