/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Studio
 * enrichment: none — real photography · nav: N12 banner+retract · footer: Ft1 mast-headed
 * tone: utilitarian · audience: yksityisasiakkaat + isännöitsijät · anchor hue: forest green (145°)
 * theme axes — light / high-contrast-serif / chromatic-green
 * pre-emit critique: P5 H5 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)
 * ────────────────────────────────────────────────────────────── */

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

html, body {
  overflow-x: clip;               /* clip, never hidden — gate 34 */
  margin: 0;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  font-weight: 400;
  padding-top: calc(var(--banner-h) + var(--bar-h));
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;                     /* roman only — no italic headers */
  font-weight: var(--display-weight);
  font-variation-settings: "opsz" var(--display-optical), "wght" var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;                /* gate 51 */
  min-width: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
.muted { color: var(--color-muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Focus — instant, never transitioned ── */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: var(--space-md); top: var(--space-md);
  transform: translateY(-200%);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-top); text-decoration: none;
  border-radius: var(--radius-input);
}
.skip:focus-visible { transform: translateY(0); }

/* ══ N12 · status banner + retracting bar ══════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  transform: translateY(0);
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav.is-compact   { transform: translateY(calc(var(--banner-h) * -1)); }
.nav.is-dismissed { transform: none; }
.nav.is-dismissed .nav__banner { display: none; }

.nav__banner {
  height: var(--banner-h);
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
  padding-inline: var(--page-gutter);
}
.nav__banner-text {
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav__banner-short { display: none; }
.nav__banner-link {
  color: inherit; font-weight: 600;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.nav__banner-x {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--color-accent-ink);
  border-radius: var(--radius-input);
}
.nav__banner-x svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.nav__banner-x:hover  { background: oklch(from var(--color-accent-ink) l c h / 0.10); }
.nav__banner-x:active { background: oklch(from var(--color-accent-ink) l c h / 0.18); }
.nav__banner-x:disabled { opacity: 0.55; cursor: not-allowed; }

.nav__bar {
  height: var(--bar-h);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.nav__inner {
  max-width: var(--page-max); margin: 0 auto; height: 100%;
  padding-inline: var(--page-gutter);
  display: flex; align-items: center; gap: var(--space-lg);
}
.nav__brand {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "wght" 500;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink); text-decoration: none;
  white-space: nowrap;                     /* gate 49 */
  margin-right: auto;
}
.nav__links { display: flex; gap: var(--space-lg); }
.nav__links a {
  font-size: var(--text-sm);
  color: var(--color-neutral); text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 4px;
  transition: color var(--dur-short) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; }

/* ══ C1 · outlined chip ════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;                        /* AA hit target */
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-ink); text-decoration: none;
  white-space: nowrap;                     /* gate 49 */
  background: transparent;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.chip--accent { border-color: var(--color-accent); color: var(--color-accent-ink); }
.chip--accent:hover { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.chip--accent:active { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.nav__cta { min-height: 40px; padding: var(--space-xs) var(--space-sm); }

/* ── C3 · typographic link ── */
.tlink {
  color: var(--color-ink); font-size: var(--text-sm); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; white-space: nowrap;
  transition: text-decoration-thickness var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.tlink:hover { color: var(--color-accent-ink); text-decoration-thickness: 2px; }
.tlink--strong { font-size: var(--text-2xl); font-family: var(--font-display); font-variation-settings: "opsz" 72, "wght" 500; }

/* ══ Layout shell ══════════════════════════════════════════════ */
main { display: block; }
.hero, .svc, .strip, .who, .facts, .contact {
  max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ══ H2 · Split diptych ════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-3xl);
  align-items: center;
  padding-block: var(--space-3xl) var(--space-4xl);
}
.hero h1 { font-size: var(--text-display); margin-bottom: var(--space-lg); }
.lede {
  font-size: var(--text-lg); color: var(--color-neutral);
  max-width: 46ch; margin-bottom: var(--space-xl);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.hero__fig img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-card);
}

/* ══ Diptych service blocks ════════════════════════════════════ */
.svc {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-3xl); align-items: center;
  padding-block: var(--section-gap);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.svc--flip .svc__text { order: 2; }
.svc--flip .svc__fig  { order: 1; }
.svc h2 { font-size: var(--text-display-s); margin-bottom: var(--section-head-gap); }
.svc__text p { max-width: var(--measure); font-size: var(--text-lg); }
.svc__text p + p { margin-top: var(--space-md); font-size: var(--text-md); }
.svc__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card);
}

/* ══ Photo strip ═══════════════════════════════════════════════ */
.strip { padding-block: var(--space-3xl) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.strip__h { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.strip__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}
.strip__row img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-card);
}
.strip__row figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-muted);
}

/* ══ Kenelle — two columns, no icons ═══════════════════════════ */
.who { padding-block: var(--section-gap) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.who__h { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.who__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
.who h3 {
  font-size: var(--text-xl); margin-bottom: var(--space-sm);
  font-variation-settings: "opsz" 72, "wght" 500;
}
.who p { color: var(--color-neutral); max-width: 48ch; }

/* ══ F3 · tabular spec sheet ═══════════════════════════════════ */
.facts { padding-block: var(--space-3xl) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.facts__h { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.spec { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.spec th, .spec td {
  text-align: left; padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: baseline;
}
.spec th {
  font-weight: 500; color: var(--color-muted);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  width: 12rem;
}
.spec td:last-child { font-size: var(--text-sm); }

/* ══ Yhteydenotto ══════════════════════════════════════════════ */
.contact { padding-block: var(--section-gap) var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.contact__h { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.contact__list { margin: 0 0 var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.contact__list dt {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-xs);
}
.contact__list dd { margin: 0; font-size: var(--text-lg); line-height: var(--lh-snug); }
.contact__cta { margin: 0; }

/* ══ Ft1 · mast-headed footer ══════════════════════════════════ */
.foot {
  border-top: var(--rule-fine) solid var(--color-ink);
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  max-width: var(--page-max); margin-inline: auto;
}
.foot__mark {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-variation-settings: "opsz" 96, "wght" 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.foot__tag { color: var(--color-neutral); margin-top: var(--space-xs); font-size: var(--text-lg); }
.foot__meta { margin-top: var(--space-lg); font-size: var(--text-sm); }
.foot__meta a { color: inherit; text-underline-offset: 3px; }
.foot__meta a:hover { color: var(--color-ink); }

/* ══ Reveal — one orchestrated entrance ════════════════════════ */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* `backwards`, not `both`: the end state equals the element's natural state, so
   holding it forwards only pins a composited layer for the life of the page. */
.reveal { animation: rise var(--dur-long) var(--ease-out) backwards; }
.reveal[data-reveal="2"] { animation-delay: 110ms; }

/* ══ Responsive ════════════════════════════════════════════════ */
@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
  .hero__fig img { aspect-ratio: 3 / 2; }
  .svc  { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .svc--flip .svc__text, .svc--flip .svc__fig { order: initial; }
  .strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .contact__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

@media (max-width: 52rem) {
  .nav__links { display: none; }          /* never let nav links wrap — gate 49 */
}

@media (max-width: 40rem) {
  :root { --section-gap: 3.5rem; }
  .spec th, .spec td { display: block; width: auto; border-bottom: 0; padding: 0; }
  .spec th { margin-top: var(--space-md); }
  .spec td:last-child { padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .spec td:last-child:empty { padding-bottom: 0; }
  .spec tr { display: block; }
  .tlink--strong { font-size: var(--text-xl); }
  .foot__mark { font-size: var(--text-2xl); }
}

@media (max-width: 34rem) {
  .nav__brand { font-size: var(--text-sm); }
  .nav__cta { font-size: var(--text-xs); padding: var(--space-2xs) var(--space-xs); min-height: 38px; }
  .nav__inner { gap: var(--space-sm); }
  .strip__row { gap: var(--space-sm); }
  .nav__banner-long  { display: none; }
  .nav__banner-short { display: inline; }
}

/* ══ Reduced motion ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: none; opacity: 1; transform: none; }
  .nav { transition: none; }
}