/* Marleya Studio — the board.
   One 12-column grid, 8px gaps, flat filled tiles, square corners, one typeface. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

:root {
  /* Colour — kept from the brand */
  --ground:      #0c0a0a;
  --tile:        #161210;
  --tile-2:      #1f1816;
  --wine:        #722f37;
  --wine-deep:   #34151a;
  --wine-2:      #5a242b;
  --ink:         #efe6de;
  --muted:       #bcb0a7;
  --accent:      #c9577a;
  --accent-ink:  #0c0a0a;
  --paper:       #efe6de;
  --paper-ink:   #0c0a0a;

  /* Type — Hanken Grotesk, five steps */
  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead:  clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head:  clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-name:  clamp(5rem, 12.5vw, 12rem);

  /* Board */
  --gap: 8px;
  --edge: 8px;
  --pad: clamp(16px, 1.6vw, 24px);
  --bar: 60px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--edge); top: var(--edge); z-index: 40;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.9rem 1.2rem; font-weight: 500; text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-ui) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Display type */
.display {
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-wrap: balance;
}
.head {
  font-size: var(--step-head);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-wrap: balance;
}
.lead { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.small { font-size: var(--step-small); }
.muted { color: var(--muted); }
p { text-wrap: pretty; }

/* Buttons: square, flat, one fill */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.75rem 1.25rem;
  border: 0; border-radius: 0;
  background: var(--ink); color: var(--paper-ink);
  font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent); color: var(--accent-ink); }
  .btn--accent:hover { background: var(--ink); color: var(--paper-ink); }
}
.link {
  text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ── Top row (tiles) ─────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: var(--bar) 1fr auto; gap: var(--gap);
  padding: var(--edge) var(--edge) 0;
  background: var(--ground);
}
.topbar > * { min-height: var(--bar); }
.mark-tile {
  display: grid; place-items: center;
  background: var(--paper); text-decoration: none;
  transition: background-color var(--t-hover) ease;
}
.mark-tile img { width: 34px; height: 34px; filter: invert(1); }
@media (hover: hover) and (pointer: fine) { .mark-tile:hover { background: var(--accent); } }
.nav-tile {
  display: flex; align-items: center;
  background: var(--tile);
  padding-left: max(var(--pad), calc(50vw - var(--bar) - var(--edge) - var(--gap)));
}
.nav-tile ul { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; }
.nav-tile a {
  text-decoration: none; color: var(--muted);
  transition: color var(--t-hover) ease;
}
.nav-tile a:hover, .nav-tile a[aria-current="page"] { color: var(--ink); }
.nav-toggle { display: none; }
.only-phone { display: none; }
.plan-blocks-title { padding: 0 var(--pad) var(--pad); }
.action-tile {
  display: flex; align-items: center; padding: 0 var(--pad);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 500; text-decoration: none;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.action-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .action-tile:hover { background: var(--ink); } }

/* ── Board basics ────────────────────────────────────── */
.board { padding: var(--gap) var(--edge) 0; display: grid; gap: var(--gap); }
.tile { background: var(--tile); padding: var(--pad); position: relative; overflow: hidden; }
.tile--paper { background: var(--paper); color: var(--paper-ink); }
.tile--wine { background: var(--wine); }
.tile--deep { background: var(--wine-deep); }
.tile--accent { background: var(--accent); color: var(--accent-ink); }
.tile--photo { padding: 0; background: var(--tile-2); }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.grey img { filter: grayscale(1) contrast(1.08); }
.section-gap { margin-top: clamp(96px, 11vw, 176px); }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(100svh - var(--bar) - var(--edge) - var(--gap) * 2);
  min-height: 600px;
}
.hero-name { display: flex; align-items: flex-end; }
.hero-name h1 { font-size: var(--step-name); padding-bottom: 0.08em; }
.hero-photo-a img, .hero-photo-b img { position: absolute; width: calc(200% + var(--gap)); height: calc(200% + var(--gap)); max-width: none; }
.hero-photo-a img { right: 0; top: 0; }
.hero-photo-b img { left: 0; bottom: 0; }
.hero-statements { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.hero-statements .tile { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.hero-statements p { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.02em; max-width: 20ch; }
.hero-statements .btn { align-self: flex-start; }

/* ── Work: one strip per project ─────────────────────── */
.work { display: grid; grid-template-columns: 13% 1fr; gap: var(--gap); align-items: start; }
.work-rail { position: sticky; top: calc(var(--bar) + var(--edge) * 3); padding-right: var(--pad); }
.work-rail h2 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin-bottom: 1rem; }
.filters { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.filters button {
  background: none; border: 0; padding: 0.15rem 0; cursor: pointer; color: var(--muted);
  transition: color var(--t-hover) ease;
}
.filters button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
.filters button:hover { color: var(--ink); }
.rail-note { margin-top: 1.5rem; color: var(--muted); font-size: var(--step-small); max-width: 22ch; }
.strips { display: grid; gap: 45px; min-width: 0; }
.strip { min-width: 0; }
.strip[hidden] { display: none; }
.strip-frames {
  display: flex; gap: var(--gap); overflow: hidden; height: 190px;
}
.strip-frames img { height: 190px; width: auto; flex: 0 0 auto; background: var(--tile); }
.strip-caption {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem;
  margin-top: 10px;
}
.strip-caption .name { font-size: inherit; font-weight: 500; transition: color var(--t-hover) ease; }
.strip-caption .desc { text-align: center; }
.strip-caption a { justify-self: end; }
@media (hover: hover) and (pointer: fine) {
  .strip:hover .strip-caption .name { color: var(--accent); }
  .strip-frames img { transition: transform 280ms var(--ease-out); }
  .strip:hover .strip-frames img { transform: translateX(-12px); }
}

/* ── Builds: rows as a board ─────────────────────────── */
.builds-board { display: grid; gap: 4px; }
.build-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; width: 100%; min-height: 72px; padding: 0 var(--pad) 0 var(--pad);
  background: var(--tile); border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font-size: var(--step-lead); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  transition: background-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .build-row:hover { background: var(--tile-2); } }
.build-row:active { background: var(--tile-2); }
.build-row .b-name { grid-column: 1 / 6; font-weight: 500; }
.build-row .b-f1 { grid-column: 6 / 8; color: var(--muted); }
.build-row .b-f2 { grid-column: 8 / 11; color: var(--muted); }
.build-row .b-status {
  grid-column: 11 / 13; justify-self: end; align-self: center;
  font-size: var(--step-small); font-weight: 500; letter-spacing: 0;
  padding: 0.45rem 0.7rem; min-width: 7.5rem; text-align: center;
}
.st-starter { background: var(--ink); color: var(--paper-ink); }
.st-studio { background: var(--accent); color: var(--accent-ink); }
.st-experience { background: var(--wine); color: var(--ink); }
.st-addon { background: var(--wine-deep); color: var(--ink); }
.st-plan { background: var(--tile-2); color: var(--ink); }
.build-row { list-style: none; }
.build-row::-webkit-details-marker { display: none; }
.build-item[open] .build-row { background: var(--accent); color: var(--accent-ink); }
.build-item[open] .b-f1, .build-item[open] .b-f2 { color: var(--accent-ink); }
.build-item[open] .b-status { background: var(--accent-ink); color: var(--ink); }
.build-item.is-added .b-name::after { content: " · added"; font-weight: 400; font-size: var(--step-small); letter-spacing: 0; }
.build-detail {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  background: var(--accent); color: var(--accent-ink);
  padding: 0 var(--pad) var(--pad); min-height: 144px; align-items: end;
}
.build-detail p { grid-column: 1 / 8; max-width: 60ch; }
.build-detail .add {
  grid-column: 10 / 13; justify-self: end;
  background: var(--accent-ink); color: var(--ink);
}
.build-detail .add[aria-pressed="true"] { background: var(--paper); color: var(--paper-ink); }
@media (hover: hover) and (pointer: fine) {
  .build-detail .add:hover { background: var(--paper); color: var(--paper-ink); }
}
.estimate {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  margin-top: var(--gap); padding: var(--pad);
  background: var(--paper); color: var(--paper-ink);
}
.estimate .est-items { max-width: 60ch; }
.estimate .est-total { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.estimate .btn { background: var(--paper-ink); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .estimate .btn:hover { background: var(--accent); color: var(--accent-ink); } }

/* ── About ──────────────────────────────────────────── */
.about-intro { padding: 0 var(--pad) 0 var(--pad); }
.about-intro h2 { margin-bottom: 24px; }
.about-intro p { max-width: 34ch; }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: 72px; align-items: start; }
.about-photo { grid-column: 1 / 9; aspect-ratio: 16 / 10; position: relative; }
.about-photo .note {
  position: absolute; top: 0; right: 0; width: 320px; padding: 20px;
  background: var(--paper); color: var(--paper-ink);
}
.about-side { grid-column: 9 / 13; display: grid; gap: var(--gap); }
.about-map { aspect-ratio: 16 / 10; background: var(--wine); position: relative; }
.about-map img { filter: grayscale(1) contrast(1.25); mix-blend-mode: screen; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.facts div { background: var(--tile); padding: 14px var(--pad); }
.facts dt { color: var(--muted); font-size: var(--step-small); }
.facts dd { font-weight: 500; }

/* ── Pricing: plans as a large table ─────────────────── */
.plans-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.plans-table col.label { width: 33.33%; }
.plans-table th, .plans-table td { text-align: left; vertical-align: top; padding: 20px var(--pad); font-weight: 400; }
.plans-table thead th { padding-top: 28px; padding-bottom: 28px; }
.plans-table thead th .plan { display: block; font-size: var(--step-head); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; }
.plans-table thead th .price { display: block; margin-top: 0.75rem; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.plans-table thead th .per { display: block; font-size: var(--step-small); margin-top: 0.25rem; }
.plans-table thead th.corner { vertical-align: bottom; }
.plans-table tbody th { font-size: var(--step-lead); letter-spacing: -0.02em; color: var(--ink); }
.plans-table tbody td { font-size: var(--step-lead); letter-spacing: -0.02em; }
.plans-table tbody tr:nth-child(odd) th, .plans-table tbody tr:nth-child(odd) td { background: var(--tile); }
.plans-table .rec { background: var(--accent) !important; color: var(--accent-ink); }
.plans-table tfoot td { padding-top: 24px; }
.plans-table tfoot .btn { width: 100%; }
.plans-table .rec .btn { background: var(--accent-ink); color: var(--ink); }
.plan-blocks { display: none; }
.pricing-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: var(--gap); padding: var(--pad); background: var(--tile); }

/* ── Contact: photo strip, three-cell bar ────────────── */
.contact { background: var(--wine); min-height: 80svh; padding: 48px 0 var(--pad); overflow: hidden; }
.marquee { display: flex; width: max-content; gap: var(--gap); }
.marquee img { height: 150px; width: auto; flex: 0 0 auto; }
.contact-body { padding: 0 var(--pad); }
.contact h2 { margin-top: 72px; }
.contact .lede { margin-top: 1rem; max-width: 46ch; }
.contact form { margin-top: 40px; display: grid; gap: var(--gap); }
.cell {
  width: 100%; border: 0; border-radius: 0;
  background: var(--wine-2); color: var(--ink);
  font-size: var(--step-body); padding: 1rem 1.25rem;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.cell::placeholder { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.cell:focus { background: var(--paper); color: var(--paper-ink); outline: none; }
.cell:focus::placeholder { color: #5a504b; }
textarea.cell { min-height: 140px; resize: vertical; line-height: 1.45; }
select.cell { appearance: none; cursor: pointer; }
.bar3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.bar3 .cell { height: 96px; text-align: center; }
.bar3 .send {
  height: 96px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--paper-ink); font-size: var(--step-body); font-weight: 500;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.bar3 .send:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .bar3 .send:hover { background: var(--accent); } }
.bar3 .send[disabled] { cursor: progress; }
.fine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); font-size: var(--step-small); }
.fine p:last-child { grid-column: 3; }
.hp { position: absolute; left: -9999px; }
.form-done { margin-top: 40px; background: var(--paper); color: var(--paper-ink); padding: var(--pad); max-width: 46rem; }
.form-done h3 { font-size: var(--step-lead); font-weight: 500; }
.form-error { color: var(--paper); font-size: var(--step-small); }

/* ── Footer: the mark, built large ───────────────────── */
.site-footer { padding: clamp(72px, 9vw, 140px) var(--edge) var(--edge); }
.blockmark { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 220px; }
.blockmark span {
  flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  color: var(--ground); font-weight: 500; line-height: 0.78; letter-spacing: -0.04em;
  font-size: min(15vw, 30svh);
}
.blockmark span:nth-child(1) { height: 100%; background: var(--wine); }
.blockmark span:nth-child(2) { height: 72%; background: var(--accent); }
.blockmark span:nth-child(3) { height: 88%; background: var(--paper); }
.blockmark span:nth-child(4) { height: 64%; background: var(--wine-2); }
.blockmark span:nth-child(5) { height: 94%; background: var(--accent); }
.blockmark span:nth-child(6) { height: 78%; background: var(--paper); }
.blockmark span:nth-child(7) { height: 100%; background: var(--wine); }
.footer-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gap); margin-top: 56px; padding: 0 var(--pad); }
.footer-cols nav { grid-column: span 2; }
.footer-cols h3 { font-size: inherit; font-weight: 500; margin-bottom: 0.6rem; }
.footer-cols ul { list-style: none; display: grid; gap: 0.35rem; }
.footer-cols a { color: var(--muted); text-decoration: none; transition: color var(--t-hover) ease; }
.footer-cols a:hover { color: var(--ink); }
.footer-contact { grid-column: 9 / 13; display: grid; gap: 0.35rem; align-content: start; }
.footer-last { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 56px; padding: 0 var(--pad); font-size: var(--step-small); color: var(--muted); }
.credits { margin-top: 2rem; padding: 0 var(--pad); font-size: var(--step-small); color: var(--muted); max-width: 75ch; }
.credits a { color: var(--ink); }

/* ── Pricing page ───────────────────────────────────── */
.b-hero {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(300px, 46svh) minmax(200px, 26svh);
}
.b-hero-title { grid-column: 1 / 8; display: flex; align-items: flex-end; }
.b-hero-title h1 { font-size: var(--step-name); padding-bottom: 0.08em; }
.b-hero-photo { grid-column: 8 / 13; grid-row: 1 / 3; }
.b-hero .tile--deep { grid-column: 1 / 5; }
.b-hero .tile--accent { grid-column: 5 / 8; }
.b-section-title { padding: 0 var(--pad) 40px; }
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pkg { display: flex; flex-direction: column; gap: 1.25rem; }
.pkg-name { font-size: var(--step-head); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; }
.pkg-price { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pkg-for { max-width: 36ch; }
.pkg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pkg-facts div { background: color-mix(in srgb, currentColor 8%, transparent); padding: 10px 12px; }
.pkg-facts dt { font-size: var(--step-small); }
.pkg-facts dd { font-weight: 500; }
.pkg-list { list-style: none; display: grid; gap: 0.5rem; flex: 1; }
.pkg-list li { padding-left: 1.1rem; position: relative; }
.pkg-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.45rem; height: 0.45rem; background: currentColor; }
.pkg .btn { align-self: stretch; }
.tile--accent.pkg .btn { background: var(--accent-ink); color: var(--ink); }
.care { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.care-text { grid-column: 1 / 8; display: grid; gap: 1.5rem; align-content: start; }
.care-text .lead { max-width: 40ch; }
.care-prices { grid-column: 8 / 13; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: var(--gap); }
.care-photo { grid-column: 1 / -1; min-height: 240px; }
.care-amount { font-size: var(--step-head); font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.build-row.is-static { cursor: default; }
.build-row.is-static:hover { background: var(--tile); }
.builds-board .build-row.is-static .b-f2 { color: var(--ink); }
.process { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gap); background: var(--wine); padding: clamp(32px, 4vw, 64px) var(--pad); }
.process li.tile { background: none; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.process li.tile--accent { color: var(--ink); }
.process li.tile--accent .process-word { color: var(--paper); }
.process-word { font-size: var(--step-head); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; }
.process li p { max-width: 32ch; }
.qa { display: grid; gap: 4px; }
.qa > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 24px var(--pad); background: var(--tile); }
.qa > div:nth-child(even) { background: var(--ground); }
.qa dt { grid-column: 1 / 6; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.2; font-weight: 500; }
.qa dd { grid-column: 6 / 13; max-width: 60ch; }
.b-cta { min-height: 0; padding-bottom: 72px; }
.b-cta-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

@media (max-width: 1080px) {
  .packages { grid-template-columns: 1fr; gap: 72px; }
  .care-text, .care-prices { grid-column: 1 / -1; }
  .process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .b-hero { display: flex; flex-direction: column; }
  .b-hero-title { min-height: 30svh; }
  .b-hero-title h1 { font-size: 21vw; }
  .b-hero-photo { aspect-ratio: 4 / 3; }
  .b-section-title { padding-bottom: 24px; }
  .pkg-facts { grid-template-columns: 1fr; }
  .care-prices { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .process li { gap: 0.75rem; }
  .qa > div { grid-template-columns: 1fr; }
  .qa dt, .qa dd { grid-column: 1; }
  .b-cta { padding-bottom: 48px; }
}

/* ── Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(22px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms + 100ms); }
  .js .shutter { clip-path: inset(0 0 100% 0); animation: shutter 1100ms var(--ease-in-out) 260ms forwards; }
  .js .shutter img { transform: scale(1.12); animation: settle 1500ms var(--ease-soft) 260ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .blockmark[data-reveal] { opacity: 1; transform: none; }
  .js .blockmark[data-reveal] span { transform: translateY(101%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .blockmark[data-reveal].is-in span { transform: none; }
  .drift img { animation: drift 24s var(--ease-in-out) infinite alternate; }
  .js .shutter.drift img { animation: settle 1500ms var(--ease-soft) 260ms forwards, drift 24s var(--ease-in-out) 1760ms infinite alternate; }
  .marquee { animation: marquee 70s linear infinite; }
  .marquee:hover { animation-play-state: paused; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .build-item[open] .build-detail {
    transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
    @starting-style { opacity: 0; transform: translateY(-6px); }
  }
  .nav-tile.open ul {
    transform-origin: top right;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    @starting-style { opacity: 0; transform: translateY(-6px) scale(0.98); }
  }
}
@keyframes shutter { to { clip-path: inset(0); } }
@keyframes settle { to { transform: none; } }
@keyframes drift { from { transform: none; } to { transform: scale(1.06) translate(-1.5%, -1%); } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Tablet ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-tile { padding-left: var(--pad); }
  .hero-statements p { font-size: 1.25rem; }
  .build-row .b-f2 { display: none; }
  .build-row .b-name { grid-column: 1 / 7; }
  .build-row .b-f1 { grid-column: 7 / 10; }
  .build-row .b-status { grid-column: 10 / 13; }
  .about-photo { grid-column: 1 / -1; }
  .about-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .footer-cols nav { grid-column: span 3; }
  .footer-contact { grid-column: 1 / -1; }
}

/* ── Pricing stacks below 960px ─────────────────────── */
@media (max-width: 960px) {
  .plans-table { display: none; }
  .plan-blocks { display: grid; gap: 72px; }
  .plan-block { background: var(--tile); padding: var(--pad); }
  .plan-block.rec { background: var(--accent); color: var(--accent-ink); }
  .plan-block h3 { font-size: min(9vw, 4rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; }
  .plan-block .price { font-size: 1.25rem; margin-top: 0.5rem; }
  .plan-block dl { margin: 1.25rem 0; display: grid; gap: 0.75rem; }
  .plan-block dt { font-size: 1.0625rem; opacity: 0.8; }
  .plan-block.rec dt { opacity: 1; }
  .plan-block dd { font-size: 1.0625rem; font-weight: 500; }
  .plan-block .btn { width: 100%; }
  .plan-block.rec .btn { background: var(--accent-ink); color: var(--ink); }
}

/* ── Phone ──────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --gap: 6px; --edge: 6px; --bar: 56px; }
  .topbar { grid-template-columns: var(--bar) 1fr; }
  .action-tile { display: none; }
  .nav-tile { padding: 0; position: relative; justify-content: flex-end; }
  .nav-toggle {
    display: flex; align-items: center; height: 100%; padding: 0 var(--pad);
    background: none; border: 0; cursor: pointer; font-weight: 500;
  }
  .nav-tile ul {
    display: none; position: absolute; top: calc(100% + var(--gap)); right: 0; left: calc(-1 * (var(--bar) + var(--gap)));
    flex-direction: column; gap: 0; background: var(--tile-2); padding: var(--gap) 0;
  }
  .nav-tile.open ul { display: flex; }
  .only-phone { display: list-item; }
  .nav-tile ul a { display: block; padding: 0.9rem var(--pad); color: var(--ink); font-size: 1.25rem; }
  .nav-tile ul li:last-child a { background: var(--accent); color: var(--accent-ink); margin: var(--gap) var(--gap) 0; }

  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero-name { height: 30svh; min-height: 200px; }
  .hero-name h1 { font-size: 22vw; }
  .hero-photo-a { aspect-ratio: 4 / 3; }
  .hero-photo-a img { position: static; width: 100%; height: 100%; }
  .hero-photo-b { display: none; }
  .hero-statements .tile { aspect-ratio: 1; }
  .hero-statements p { font-size: var(--step-body); line-height: 1.3; }
  .hero-statements .btn { min-height: 44px; padding: 0.6rem 0.9rem; font-size: 0.95rem; }

  .work { grid-template-columns: 1fr; }
  .work-rail { position: static; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; padding: 0 var(--pad); }
  .work-rail h2 { margin: 0; }
  .filters { flex-direction: row; gap: 1rem; }
  .rail-note { flex-basis: 100%; max-width: none; margin-top: 0; }
  .strips { gap: 32px; }
  .strip-frames { height: auto; }
  .strip-frames img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
  .strip-frames img:not(:first-child) { display: none; }
  .strip-caption { grid-template-columns: 1fr auto; padding: 0 2px; }
  .strip-caption .desc { display: none; }

  .build-row { min-height: 64px; font-size: 1.25rem; }
  .build-row .b-name { grid-column: 1 / 9; }
  .build-row .b-f1 { display: none; }
  .build-row .b-status { grid-column: 9 / 13; min-width: 0; padding: 0.4rem 0.5rem; }
  .build-detail { grid-template-columns: 1fr; gap: 1rem; min-height: 136px; }
  .build-detail p, .build-detail .add { grid-column: 1; }
  .build-detail .add { justify-self: start; }
  .estimate { grid-template-columns: 1fr; }

  .about-intro h2 { font-size: 9vw; }
  .about-intro p { font-size: 1.125rem; }
  .about-grid { margin-top: 40px; grid-template-columns: 1fr; }
  .about-photo { grid-column: 1; aspect-ratio: 4 / 3; overflow: visible; }
  .about-photo .note { position: static; width: auto; margin-top: var(--gap); }
  .about-side { grid-column: 1; grid-template-columns: 1fr; }
  .about-map { aspect-ratio: 3 / 2; }


  .contact { padding-top: 24px; }
  .marquee img { height: 110px; }
  .contact h2 { margin-top: 48px; font-size: 9vw; }
  .bar3 { grid-template-columns: 1fr; }
  .bar3 .cell, .bar3 .send { height: 60px; text-align: left; }
  .bar3 .send { text-align: center; }
  .fine { grid-template-columns: 1fr; }
  .fine p:last-child { grid-column: 1; }

  .blockmark { height: 18svh; min-height: 130px; gap: 3px; }
  .blockmark span { font-size: 16vw; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols nav { grid-column: span 1; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-last { flex-wrap: wrap; }
}