/* Maes Sanitair & Verwarming — demo
   Direction: "The well-kept board" (taste-skill seed 583261697)
   Idea: the tiled bathroom wall becomes the board. Palette: rose grey, green · Type: Switzer (self-hosted) */

@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #ebe5e3;
  --surface: #e1dad7;
  --surface-2: #d6cdc9;
  --pale: #f4f0ee;
  --ink: #2b2622;
  --ink-2: #36302b;
  --muted: #5f5652;
  --accent: #0f7d45;
  --accent-hover: #0b6a3a;
  --accent-ink: #ffffff;
  --on-dark: #f4f0ee;
  --on-dark-soft: #cfc6c2;
  --s1: #0f7d45; --s2: #2b2622; --s3: #5f5652; --s4: #8a3b2e;

  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  --step-giant: clamp(3.5rem, 1rem + 9vw, 8.25rem);

  --gap: 8px;
  --margin: clamp(10px, 1vw, 12px);
  --edge: calc(var(--margin) + 12px);
  --pad: clamp(20px, 2vw, 28px);
  --section: clamp(96px, 12vw, 180px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; letter-spacing: -0.005em; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; text-wrap: balance; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tile--accent :focus-visible, .faq__head :focus-visible, .mt.c5 :focus-visible, .is-main :focus-visible { outline-color: var(--ink); }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--on-dark); padding: 12px 16px; }
.skip:focus { top: 12px; }
.head { font-size: var(--step-head); }

/* buttons: square, flat */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font: 600 1rem/1 var(--font); letter-spacing: -0.01em; text-decoration: none; border: 0; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover { background: #000; }
.btn--wide { width: 100%; }
.btn--small { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }

/* bar (appears after the hero) */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 var(--margin) 0 var(--edge); background: var(--ink); color: var(--on-dark); transform: translateY(-100%); transition: transform 320ms var(--ease-out); }
.bar.is-on { transform: none; }
.bar__mark { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.04em; text-decoration: none; }
.bar__nav { display: flex; gap: 24px; margin-left: auto; font-size: 1rem; }
.bar__nav a { text-decoration: none; padding: 12px 0; }
.bar__nav a:hover { text-decoration: underline; }
.bar__cta { min-height: 44px; }
.bar--static { transform: none; }

/* hero: sheet of photographs */
.sheet { position: relative; height: 100svh; min-height: 640px; overflow: hidden; padding: 0 16px; }
.sheet__cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 100%; }
.sheet__col { display: flex; flex-direction: column; gap: 12px; }
.sheet__col:nth-child(2) { margin-top: -90px; }
.sheet__col:nth-child(3) { margin-top: -40px; }
.sheet__col:nth-child(4) { margin-top: -130px; }
.sheet__col:nth-child(5) { margin-top: -20px; }
.sheet__col:nth-child(6) { margin-top: -70px; }
.frame { position: relative; background: var(--surface); }
.frame img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 600ms var(--ease-out); }
.frame:hover img { filter: none; }
.strip { height: 28px; display: flex; align-items: center; padding: 0 10px; font-size: 0.8125rem; color: #fff; white-space: nowrap; overflow: hidden; }
.s1 { background: var(--s1); } .s2 { background: var(--s2); } .s3 { background: var(--s3); } .s4 { background: var(--s4); }
.sheet__panel { position: absolute; z-index: 2; top: 24%; left: calc(12px + 2 * (100% - 84px) / 6 + 24px); width: calc(3 * (100% - 84px) / 6 + 24px); min-height: 440px; display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--ink); color: var(--on-dark); }
.sheet__title { font-size: clamp(2.5rem, 0.6rem + 4vw, 4.5rem); }
.sheet__lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.4; max-width: 34ch; }
.sheet__panel .btn { align-self: flex-start; min-width: 280px; }
.sheet__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 1rem; }
.sheet__links a { padding: 6px 0; }

/* boards */
.board { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: 0 var(--margin); }
.tile { position: relative; padding: var(--pad); background: var(--surface); overflow: hidden; }
.tile--dark { background: var(--ink); color: var(--on-dark); }
.tile--pale { background: var(--pale); }
.tile--accent { background: var(--accent); color: var(--accent-ink); }
.tile--photo { padding: 0; }
.tile--photo img, .tile--photo video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

.intro { margin-top: var(--gap); grid-template-rows: 38svh 38svh auto; }
.slogan { font-size: var(--step-giant); font-weight: 600; letter-spacing: -0.045em; line-height: 0.86; }
.intro__a { grid-column: 1 / 9; grid-row: 1 / 3; display: flex; align-items: flex-end; }
.intro__b { grid-column: 9 / 13; grid-row: 1; display: flex; align-items: flex-end; }
.intro__c { grid-column: 9 / 13; grid-row: 2; }
.intro__text { grid-column: 1 / 13; background: var(--bg); display: grid; grid-template-columns: repeat(12, 1fr); padding: 40px 0; }
.intro__text p { grid-column: 7 / 13; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.35; padding-right: 40px; }

/* the live thing */
.hulp { margin-top: calc(var(--section) * 0.6); }
.hulp__head { grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 340px; }
.hulp__head p { font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; }
.hulp__choices { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.choice { display: flex; align-items: flex-end; min-height: 166px; border: 0; font: 600 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1.1 var(--font); letter-spacing: -0.03em; color: var(--ink); text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.choice:hover { background: var(--surface-2); }
.choice:active { transform: scale(0.985); }
.choice[aria-checked="true"] { background: var(--ink); color: var(--on-dark); }
.hulp__out { grid-column: 1 / 13; min-height: 360px; }
.answer { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gap); }
.answer + .answer { margin-top: 64px; }
.js .answer + .answer { margin-top: 0; }
.answer h3 { grid-column: 1 / 6; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.answer ol { grid-column: 7 / 13; grid-row: 1 / 4; counter-reset: s; display: grid; gap: 16px; }
.answer li { counter-increment: s; display: grid; grid-template-columns: 2.2em 1fr; }
.answer li::before { content: counter(s); font-weight: 600; color: var(--on-dark-soft); }
.answer__meta { grid-column: 1 / 6; color: var(--on-dark-soft); }
.answer .btn { grid-column: 1 / 6; justify-self: start; align-self: end; }
.answer[hidden] { display: none; }

/* features: split */
.split { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--section); }
.split__light { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 90svh; padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px); background: var(--pale); }
.zig { display: flex; flex-direction: column; font-size: clamp(2.25rem, 1rem + 3.6vw, 4.25rem); }
.zig__r { align-self: flex-end; }
.split__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.split__foot p { max-width: 30ch; }
.split__rows { display: grid; grid-auto-rows: 1fr; background: var(--ink); color: var(--on-dark); }
.row { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 20px; padding: 28px; }
.row:nth-child(even) { background: var(--ink-2); }
.row h3 { font-size: 1.75rem; }
.row p { font-size: 1rem; }
.row .row__terms { color: var(--on-dark-soft); font-size: 0.9375rem; }

/* how it works */
.steps { margin-top: var(--section); padding: 0 var(--edge); display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px var(--gap); }
.steps__intro { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.steps__intro h2 { grid-column: 1 / 6; }
.steps__intro p { grid-column: 7 / 12; font-size: 1.0625rem; }
.steps__fig { grid-column: 1 / 13; }
.sq { width: 100%; height: auto; }
.steps__list { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.steps__list h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.steps__list p { font-size: 1rem; max-width: 34ch; }

/* showcase mosaic: one picture cut across tiles */
.mosaic { margin-top: var(--section); padding: 0 12px; }
.mosaic__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.mt { aspect-ratio: 1; overflow: hidden; }
.mt--img { position: relative; }
.mt--img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 500ms var(--ease-out); }
.mt--img:hover img { transform: scale(1.08); }
.mt.c1, .mt.c2, .mt.c3, .mt.c4, .mt.c5 { padding: 16px; display: flex; }
.mt.c1 { background: var(--ink); color: var(--on-dark); }
.mt.c1 h2 { font-size: clamp(1.5rem, 0.6rem + 2.6vw, 2.75rem); }
.mt.c2, .mt.c3, .mt.c4 { background: var(--pale); align-items: flex-end; font-size: 1.125rem; line-height: 1.3; }
.mt.c5 { background: var(--accent); align-items: flex-end; }
.mt.c5 .btn { background: var(--ink); color: var(--on-dark); }

/* pricing table */
.prices { margin-top: var(--section); padding: 0 var(--edge); }
.ptable { font-variant-numeric: tabular-nums; width: 100%; border-collapse: collapse; font-size: 1.375rem; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 20px; font-weight: 400; }
.ptable thead th { padding-top: 28px; padding-bottom: 28px; }
.ptable thead .ptable__corner { width: 33%; vertical-align: bottom; padding-left: 0; }
.plan, .price { display: block; font-size: clamp(1.375rem, 0.9rem + 1.3vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.05; }
.plan { font-weight: 600; }
.per { display: block; margin-top: 8px; font-size: 1rem; color: var(--muted); }
.ptable tbody tr:nth-child(odd) { background: var(--surface); }
.ptable tbody th { font-weight: 400; }
.ptable .is-main { background: var(--accent); color: var(--accent-ink); }
.ptable .is-main .per { color: #e3f4ea; }
.ptable .ptable__act { background: transparent; }
.ptable__act .is-main .btn { background: var(--ink); }
.prices__note { margin-top: 24px; max-width: 70ch; font-size: 1rem; }

/* about */
.about { margin-top: var(--section); padding: 0 var(--edge); }
.about__lead { margin-top: 24px; max-width: 46ch; font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.4; }
.about__grid { margin-top: 72px; display: grid; grid-template-columns: 8fr 4fr; gap: 16px; align-items: start; }
.about__photo { position: relative; overflow: hidden; }
.about__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(1); }
.about__note { position: absolute; top: 0; right: 0; width: 320px; padding: 20px; background: var(--pale); font-size: 1rem; }
.about__map { background: var(--accent); padding: 24px; }
.about__map svg { width: 100%; height: auto; font-family: var(--font); }
.facts { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.facts dt { font-size: 0.875rem; color: var(--muted); }
.facts dd { font-size: 1rem; font-weight: 600; }

/* faq bands */
.faq { margin-top: var(--section); }
.faq__head { display: flex; align-items: flex-end; min-height: 26svh; padding: 32px var(--edge); background: var(--accent); color: var(--accent-ink); }
.faq__head h2 { font-size: clamp(3rem, 1rem + 6.5vw, 7rem); }
.band { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: 56px var(--edge); background: var(--bg); }
.band:nth-child(odd) { background: var(--surface); }
.band h3 { grid-column: 1 / 6; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
.band p { grid-column: 7 / 13; font-size: 1.125rem; max-width: 60ch; }

/* contact */
.contact { background: var(--ink); color: var(--on-dark); padding: 48px var(--edge) 120px; }
.contact__strip { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--edge)); }
.contact__strip.is-paused .contact__track { animation-play-state: paused; }
.pause { position: absolute; z-index: 2; right: 8px; bottom: 8px; min-height: 44px; padding: 0 14px; border: 0; background: var(--ink); color: var(--on-dark); font: 600 0.875rem/1 var(--font); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.pause:hover { background: #000; }
.pause:active { transform: scale(0.96); }
.pause--strip { right: var(--edge); }
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }
.contact__track { display: flex; gap: 8px; width: max-content; animation: drift 60s linear infinite; }
.contact__track img { height: 150px; width: auto; object-fit: cover; filter: grayscale(1); }
.contact__track img:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.contact__track img:nth-child(3n+2) { aspect-ratio: 1; }
.contact__track img:nth-child(3n) { aspect-ratio: 3 / 2; }
@keyframes drift { to { transform: translateX(-50%); } }
.contact__top { margin-top: 72px; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
.contact__top > div { grid-column: 1 / 7; }
.contact__phone { grid-column: 7 / 13; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.contact__phone a { font-size: clamp(2.5rem, 0.8rem + 4.6vw, 5.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; text-decoration: none; white-space: nowrap; transition: color var(--t-fast) var(--ease-out); }
.contact__phone a:hover { color: #8fd8ae; }
.contact__phone span { color: var(--on-dark-soft); font-size: 1rem; }
.contact__lead { margin-top: 20px; max-width: 52ch; }
.callbar { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cell { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 12px 20px; background: var(--ink-2); transition: background-color var(--t-fast) var(--ease-out); }
.cell:focus-within { background: #4a423c; }
.cell label { font-size: 0.875rem; color: var(--on-dark-soft); }
.cell input { margin-top: 6px; width: 100%; border: 0; background: transparent; color: var(--on-dark); font: 400 1.25rem/1.3 var(--font); padding: 4px 0; }
.cell input:focus { outline: none; }
.cell:has(input[aria-invalid="true"]) { background: #5a3530; }
.cell--submit { border: 0; background: var(--accent); color: var(--accent-ink); font: 600 1.375rem/1 var(--font); letter-spacing: -0.02em; cursor: pointer; align-items: center; }
.cell--submit:hover { background: var(--accent-hover); }
.cell--submit:active { transform: scale(0.985); }
.callbar__hint { grid-column: 1 / 3; font-size: 0.875rem; color: var(--on-dark-soft); }
.callbar__msg { grid-column: 3; font-size: 0.9375rem; }

/* footer */
.foot { padding: 32px var(--edge); background: var(--bg); }
.foot__mark { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 200px; }
.foot__mark span { flex: 1; display: flex; align-items: flex-end; padding: 0 0.04em; color: var(--bg); font-weight: 600; font-size: clamp(5rem, 2rem + 12vw, 13rem); line-height: 0.78; letter-spacing: -0.06em; overflow: hidden; }
.foot__mark span:nth-child(1) { height: 100%; background: var(--ink); }
.foot__mark span:nth-child(2) { height: 72%; background: var(--accent); }
.foot__mark span:nth-child(3) { height: 86%; background: var(--muted); }
.foot__mark span:nth-child(4) { height: 62%; background: var(--s4); }
.foot__cols { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; font-size: 0.9375rem; }
.foot__cols h2 { font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 10px; }
.foot__cols nav { display: flex; flex-direction: column; align-items: flex-start; }
.foot__cols nav a { padding: 5px 0; }
.foot__credits { margin-top: 40px; max-width: 80ch; font-size: 0.875rem; color: var(--muted); }
.foot__last { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.875rem; }

.callfab { display: none; }

/* subpages */
.page { padding: 120px var(--edge) var(--section); display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gap); }
.page__head { grid-column: 1 / 13; }
.page__head h1 { font-size: clamp(2.5rem, 1.2rem + 4vw, 5rem); }
.page__head p { margin-top: 20px; max-width: 52ch; font-size: var(--step-lead); line-height: 1.35; }
.prose { grid-column: 4 / 11; max-width: 68ch; }
.prose h2 { font-size: 1.75rem; letter-spacing: -0.03em; margin: 48px 0 12px; line-height: 1.1; }
.prose p, .prose ul { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; margin-bottom: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; vertical-align: top; }
.prose tr:nth-child(odd) { background: var(--surface); }
.prose .note { background: var(--pale); padding: 16px 20px; }

/* appointment form */
.form { grid-column: 1 / 9; display: grid; gap: var(--gap); }
.form__steps { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.form__steps li { padding: 14px 16px; background: var(--surface); font-weight: 600; font-size: 1rem; }
.form__steps li[aria-current="step"] { background: var(--ink); color: var(--on-dark); }
.form fieldset { border: 0; margin: 0; padding: var(--pad); background: var(--surface); display: grid; gap: 20px; min-width: 0; }
.form legend { float: left; width: 100%; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 4px; padding: 0; }
.form__aside { grid-column: 9 / 13; grid-row: 2 / span 2; padding: var(--pad); background: var(--ink); color: var(--on-dark); align-self: start; }
.form__aside h2 { font-size: 1.5rem; margin-bottom: 12px; letter-spacing: -0.03em; }
.form__aside p + p { margin-top: 12px; }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font-weight: 600; font-size: 1rem; }
.field select { appearance: auto; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 1.0625rem/1.4 var(--font); color: var(--ink); background: var(--pale); border: 2px solid var(--pale); border-radius: 0; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #a3201a; }
.field .hint { font-size: 0.9375rem; color: var(--muted); }
.field .err { font-size: 0.9375rem; color: #a3201a; font-weight: 600; }
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); border: 0; padding: 0; margin: 0; }
.radios label { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 12px 14px; background: var(--pale); font-weight: 400; cursor: pointer; }
.radios input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.form__nav { display: flex; gap: var(--gap); justify-content: space-between; flex-wrap: wrap; }
.btn--ghost { background: var(--pale); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.form__done { grid-column: 1 / 9; padding: var(--pad); background: var(--accent); color: var(--accent-ink); }
.form__done h2 { font-size: 2rem; margin-bottom: 12px; }

/* tablet */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .split__light { min-height: 60svh; }
  .row { grid-template-columns: 1fr 1fr; }
  .row .row__terms { grid-column: 1 / -1; }
  .ptable { font-size: 1.125rem; }
  .ptable th, .ptable td { padding: 16px 12px; }
  .sheet__cols { grid-template-columns: repeat(4, 1fr); }
  .sheet__col:nth-child(n+5) { display: none; }
  .sheet__panel { left: calc(16px + (100% - 68px) / 4 + 12px); width: calc(3 * (100% - 68px) / 4 + 24px); }
  .prose { grid-column: 1 / 13; }
  .form, .form__steps, .form__done, .form__aside { grid-column: 1 / 13; grid-row: auto; }
}

/* phone */
@media (max-width: 720px) {
  :root { --gap: 6px; --edge: 20px; }
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
  .sheet { height: auto; min-height: 0; padding: 8px 8px 0; display: flex; flex-direction: column; gap: 8px; }
  .sheet__panel { position: static; width: auto; min-height: 40svh; padding: 20px; }
  .sheet__title { font-size: 10vw; }
  .sheet__panel .btn { align-self: stretch; min-width: 0; }
  .sheet__lead { font-size: 1.0625rem; }
  .sheet__cols { grid-template-columns: 1fr 1fr; gap: 8px; height: 62svh; }
  .sheet__col { gap: 8px; }
  .sheet__col:nth-child(2) { margin-top: -60px; }
  .sheet__col:nth-child(n+3) { display: none; }

  .board { grid-template-columns: 1fr 1fr; }
  .intro { grid-template-rows: 46svh auto auto; }
  .intro__a { grid-column: 1 / 3; grid-row: 1; }
  .intro .slogan { font-size: 17vw; }
  .intro__b, .intro__c { grid-row: 2; aspect-ratio: 1; }
  .intro__b { grid-column: 1; }
  .intro__b .slogan { font-size: 13vw; }
  .intro__c { grid-column: 2; }
  .intro__text { grid-column: 1 / 3; grid-row: 3; display: block; padding: 24px 12px; }
  .intro__text p { font-size: 1.125rem; padding: 0; }

  .hulp__head, .hulp__choices, .hulp__out { grid-column: 1 / 3; }
  .hulp__head { min-height: 0; gap: 16px; }
  .choice { min-height: 104px; font-size: 1.125rem; padding: 16px; }
  .answer { display: flex; flex-direction: column; gap: 18px; }
  .answer li { grid-template-columns: 1.6em 1fr; }

  .split__light { min-height: 70svh; padding: 28px 20px; }
  .zig { font-size: 10vw; }
  .split__foot { flex-direction: column; align-items: flex-start; }
  .row { display: block; padding: 24px 20px; }
  .row h3 { font-size: 1.5rem; margin-bottom: 8px; }
  .row .row__terms { margin-top: 8px; }

  .steps { display: block; }
  .steps__intro { display: block; }
  .steps__intro p { margin-top: 16px; }
  .steps__fig { margin: 32px 0; }
  .steps__list { grid-template-columns: 1fr; gap: 24px; }

  .mosaic { padding: 0 8px; }
  .mosaic__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mt.c1 h2 { font-size: 6vw; }
  .mt.c2, .mt.c3, .mt.c4 { font-size: 0.875rem; padding: 10px; }
  .mt.c5 { padding: 8px; }
  .mt.c5 .btn { padding: 0 8px; font-size: 0.875rem; width: 100%; min-height: 44px; }

  .prices { padding: 0 8px; }
  .ptable thead tr > :not(.ptable__corner) { display: none; }
  .ptable thead .ptable__corner { padding: 0 12px 16px; width: auto; }
  .ptable, .ptable thead, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; }
  .ptable tbody tr { padding: 12px 12px 16px; }
  .ptable tbody th { padding: 0 0 6px; color: var(--muted); font-size: 1rem; }
  .ptable tbody td { padding: 4px 0; font-size: 1.0625rem; }
  .ptable tbody td.is-main { background: none; color: var(--ink); font-weight: 600; }
  .ptable tbody td::before { content: attr(data-plan) ": "; color: var(--muted); font-weight: 400; }
  .ptable .ptable__act { display: none; }
  .prices__note { padding: 0 12px; }

  .about__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .about__photo img { aspect-ratio: 4 / 3; }
  .about__note { position: static; width: auto; padding: 16px 0 0; background: none; }

  .faq__head { min-height: 30svh; padding: 24px 20px; }
  .faq__head h2 { font-size: 13vw; }
  .band { display: block; padding: 32px 20px; }
  .band h3 { font-size: 1.375rem; margin-bottom: 12px; }
  .band p { font-size: 1.0625rem; }

  .contact { padding: 32px 20px 120px; }
  .contact__track img { height: 110px; }
  .contact__top { display: block; margin-top: 48px; }
  .contact h2 { font-size: 9vw; }
  .contact__phone { align-items: flex-start; text-align: left; margin-top: 24px; }
  .contact__phone a { font-size: 12vw; }
  .callbar { grid-template-columns: 1fr; }
  .cell { min-height: 64px; }
  .callbar__hint, .callbar__msg { grid-column: 1; }

  .foot { padding: 24px 20px 96px; }
  .foot__mark { height: 22svh; min-height: 140px; }
  .foot__mark span { font-size: 26vw; }
  .foot__cols { grid-template-columns: 1fr 1fr; }

  .callfab { position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: transform var(--t-fast) var(--ease-out); }
  .callfab:active { transform: scale(0.98); }

  .page { padding-top: 88px; display: block; }
  .page > * + * { margin-top: 24px; }
  .form { display: block; }
  .form > * + * { margin-top: 8px; }
  .form__steps li { padding: 10px; font-size: 0.875rem; }
  .radios { grid-template-columns: 1fr; }
}

/* motion */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js .sheet__panel > * { opacity: 0; transform: translateY(16px); animation: rise 700ms var(--ease-out) forwards; }
.js .sheet__panel > *:nth-child(2) { animation-delay: 80ms; }
.js .sheet__panel > *:nth-child(3) { animation-delay: 160ms; }
.js .sheet__panel > *:nth-child(4) { animation-delay: 240ms; }
.js .frame { opacity: 0; transform: translateY(20px); animation: rise 900ms var(--ease-out) forwards; animation-delay: var(--fd, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js [data-shutter] img { clip-path: inset(0 100% 0 0); transform: scale(1.12); transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1), transform 1.4s var(--ease-out); }
.js [data-shutter].is-in img { clip-path: inset(0 0 0 0); transform: none; }
.js .sq rect { transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out); transition-delay: var(--rd, 0ms); }
.js .steps__fig:not(.is-in) .sq rect { opacity: 0; transform: translateY(14px); }
.answer:not([hidden]) { animation: rise 420ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise], .js .sheet__panel > *, .js .frame, .js .sq rect { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js [data-shutter] img { clip-path: none; transform: none; transition: none; }
  .contact__track, .answer:not([hidden]) { animation: none; }
  .frame img, .mt--img img { transition: none; }
}