/* ==========================================================================
   Rechtsanwalt Felix Fuchs, Insolvenzrecht, Nürnberg
   Haltung: ruhig, direkt, warm. Feste Seitenleiste links, steingrauer Grund,
   weiße runde Flächen, schmale kräftige Überschriften, Fuchsorange als Akzent.
   Schrift lokal (DSGVO): Archivo (schmal für Überschriften, normal für Text).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #efeeea;
  --card: #ffffff;
  --dark: #1d232b;
  --dark-2: #29313b;
  --ink: #171b21;
  --ink-2: #4b525c;
  --ink-3: #6b727c;
  --line: #d9d7d0;
  --orange: #c4511c;
  --orange-deep: #a5421a;
  --orange-soft: #f6e3d8;
  --on-dark: #f3f2ee;
  --on-dark-2: rgba(243, 242, 238, 0.7);
  --on-dark-line: rgba(243, 242, 238, 0.16);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --side: 17.5rem;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --max: 68rem;
  --sec-y: clamp(3.5rem, 7vw, 6rem);
  --r: 18px;
  --r-s: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
i, em { font-style: normal; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 60; background: var(--orange); color: #fff; padding: 0.8rem 1.1rem; font-weight: 600; text-decoration: none; border-radius: 999px; }
.skip:focus { top: 1rem; }

/* ---------- Seitenleiste ---------- */
.side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--side); background: var(--dark); color: var(--on-dark); padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 2.5rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand img { width: 3rem; height: 3rem; }
.brand__text { display: grid; line-height: 1.1; }
.brand__text b { font-weight: 640; font-stretch: 78%; font-size: 1.7rem; letter-spacing: -0.01em; }
.brand__text span { font-size: 0.7188rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-2); margin-top: 0.2rem; }
.nav { display: grid; gap: 0.15rem; }
.nav a { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.7rem 0.9rem; margin-inline: -0.9rem; border-radius: var(--r-s); text-decoration: none; font-weight: 500; color: var(--on-dark-2); transition: background-color 200ms ease, color 200ms ease; }
.nav a i { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--orange); font-variant-numeric: tabular-nums; }
.nav a:hover { color: var(--on-dark); background: rgba(243, 242, 238, 0.06); }
.nav a[aria-current="true"] { color: var(--on-dark); background: rgba(243, 242, 238, 0.1); }
.side__foot { margin-top: auto; display: grid; gap: 0.7rem; padding-top: 1.5rem; border-top: 1px solid var(--on-dark-line); font-size: 0.9063rem; line-height: 1.5; color: var(--on-dark-2); }
.side__phone { font-weight: 640; font-stretch: 78%; font-size: 1.75rem; letter-spacing: 0; color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.side__phone:hover { color: #f0a47f; }
.side__call, .menu { display: none; }
.side :focus-visible { outline-color: #f0a47f; }

.page { margin-left: var(--side); }
main { max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding: 0 var(--pad); }

/* ---------- Auftakt ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 5vw, 4rem) var(--sec-y); }
.hero__text { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); justify-items: start; }
.pill { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--card); border-radius: 999px; padding: 0.45rem 1rem 0.45rem 0.85rem; font-size: 0.8438rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.pill::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--orange); }
h1, h2 { font-weight: 640; font-stretch: 76%; letter-spacing: -0.012em; text-wrap: balance; }
.hero h1 { font-size: clamp(3rem, 6.6vw, 5.75rem); line-height: 0.98; }
.hero h1 em { color: var(--orange); }
.hero__lede { font-size: clamp(1.0625rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 31em; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.3rem; }
.hero__figure { position: relative; }
.hero__figure::before { content: ""; position: absolute; inset: 2.5rem -1rem -1rem 2.5rem; background: var(--orange); border-radius: var(--r); }
.hero__figure img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: var(--r); }
.hero__figure figcaption { position: absolute; left: 1rem; bottom: 1rem; background: var(--card); border-radius: var(--r-s); padding: 0.6rem 0.95rem; font-size: 0.8438rem; color: var(--ink-3); display: grid; line-height: 1.3; box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.5); }
.hero__figure figcaption b { color: var(--ink); font-weight: 640; font-size: 0.9688rem; }
.chips { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: clamp(0.5rem, 2vw, 1.5rem); }
.chips li { background: var(--card); border-radius: var(--r); padding: 1.15rem 1.35rem; font-size: 0.9688rem; color: var(--ink-2); display: grid; gap: 0.15rem; }
.chips b { color: var(--ink); font-weight: 640; font-stretch: 78%; font-size: 1.35rem; }
.hero__text > *, .hero__figure { animation: rise 900ms var(--ease) both; }
.hero__text > :nth-child(2) { animation-delay: 80ms; }
.hero__text > :nth-child(3) { animation-delay: 160ms; }
.hero__text > :nth-child(4) { animation-delay: 240ms; }
.hero__figure { animation-delay: 160ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.7rem 1.6rem; background: var(--orange); color: #fff; border: 1.5px solid var(--orange); border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease; }
.btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn:active { transform: scale(0.98); }
.btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Abschnitte ---------- */
.sec { padding-block: var(--sec-y); }
.sec__head { display: grid; gap: 0.7rem; justify-items: start; max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; }
.sec__head > p:last-child:not(.label) { color: var(--ink-2); max-width: 34em; text-wrap: pretty; margin-top: 0.3rem; }
h3 { font-weight: 640; font-stretch: 80%; font-size: 1.6rem; line-height: 1.1; }
.sec--dark, .sec--panel, .contact { border-radius: var(--r); padding-inline: clamp(1.25rem, 4vw, 3.5rem); }
.sec--dark { background: var(--dark); color: var(--on-dark); }
.sec--dark .label { color: #f0a47f; }
.sec--dark .sec__head > p:last-child:not(.label) { color: var(--on-dark-2); }
.sec--panel { background: var(--card); }

/* ---------- 01 Leistungen ---------- */
.tabs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.tabs__list { display: grid; gap: 0.5rem; }
.tabs__list button { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 1rem 1.1rem; font-weight: 600; font-size: 1.0313rem; line-height: 1.25; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.tabs__list button i { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--card); color: var(--orange); font-size: 0.875rem; font-weight: 640; transition: background-color 200ms ease, color 200ms ease; }
.tabs__list button:hover { border-color: var(--ink-3); }
.tabs__list button[aria-selected="true"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.tabs__list button[aria-selected="true"] i { background: var(--orange); color: #fff; }
.panel { background: var(--card); border-radius: var(--r); overflow: hidden; }
.panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.panel > div { padding: clamp(1.25rem, 2.6vw, 2.25rem); display: grid; gap: 0.8rem; }
.panel p { color: var(--ink-2); max-width: 38em; }
.panel ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.3rem; }
.panel li { background: var(--orange-soft); color: #7d3413; border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.875rem; font-weight: 500; }
.tabs.is-on .panel:not(.is-active) { display: none; }
.tabs.is-on .panel.is-active { animation: rise 500ms var(--ease) both; }

/* ---------- 02 Fristen ---------- */
.bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
.bars li { background: var(--dark-2); border-radius: var(--r); padding: clamp(1.25rem, 2.4vw, 1.9rem); display: grid; gap: 0.7rem; align-content: start; }
.bars__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; align-items: baseline; }
.bars__top b { font-weight: 600; }
.bars__top span { font-size: 0.8438rem; color: #f0a47f; white-space: nowrap; }
.bars__value { font-weight: 640; font-stretch: 76%; font-size: clamp(2.5rem, 3.7vw, 3.5rem); line-height: 0.95; white-space: nowrap; }
.bars li > p:last-child { color: var(--on-dark-2); font-size: 0.9688rem; }
.bar { height: 0.6rem; border-radius: 999px; background: rgba(243, 242, 238, 0.12); overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--orange); transform-origin: left; }
.bar--years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; background: none; overflow: visible; }
.bar--years span { width: auto; }
.reveal .bar span { transform: scaleX(0); }
.reveal.is-in .bar span { transform: scaleX(1); transition: transform 1100ms var(--ease) 250ms; }

.calc { margin-top: clamp(0.9rem, 2vw, 1.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(0.9rem, 2vw, 1.5rem); align-items: stretch; }
.calc__form, .calc__out { background: var(--dark-2); border-radius: var(--r); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.calc__form { display: grid; gap: 1.1rem; align-content: start; }
.calc fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.calc legend, .field { padding: 0; font-size: 0.9063rem; font-weight: 500; color: var(--on-dark-2); }
.field { display: grid; gap: 0.5rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; background: rgba(243, 242, 238, 0.08); border-radius: 999px; padding: 0.3rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0.3rem 0.6rem; border-radius: 999px; font-weight: 500; font-size: 0.9063rem; text-align: center; line-height: 1.15; color: var(--on-dark-2); transition: background-color 200ms ease, color 200ms ease; }
.seg input:checked + span { background: var(--on-dark); color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid #f0a47f; outline-offset: 3px; }
.calc input[type="date"] { width: 100%; min-height: 3rem; padding: 0.4rem 1rem; background: var(--on-dark); color: var(--ink); border: 0; border-radius: 999px; font-weight: 500; font-size: 1.0625rem; font-variant-numeric: tabular-nums; accent-color: var(--orange); }
.calc__out { background: var(--orange); color: #fff; display: grid; align-content: center; gap: 0.3rem; font-size: 0.9688rem; }
.calc__out p { color: rgba(255, 255, 255, 0.92); }
.calc__out strong { display: block; font-weight: 640; font-stretch: 76%; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.02; margin: 0.2rem 0 0.5rem; text-wrap: balance; animation: rise 500ms var(--ease) both; }
.calc__out a { color: #fff; font-weight: 600; white-space: nowrap; text-underline-offset: 0.2em; }
.calc__img { width: 100%; height: 100%; min-height: 12rem; object-fit: cover; border-radius: var(--r); }
.fine { margin-top: 1.5rem; font-size: 0.8438rem; line-height: 1.55; color: var(--on-dark-2); max-width: 56em; }
.sec--dark :focus-visible { outline-color: #f0a47f; }

/* ---------- 03 Ablauf ---------- */
.steps-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(0.9rem, 2vw, 1.5rem); }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
.steps li { counter-increment: s; background: var(--card); border-radius: var(--r); padding: clamp(1.25rem, 2.4vw, 1.9rem); display: grid; gap: 0.5rem; align-content: start; transition: transform 320ms var(--ease); }
.steps li::before { content: "0" counter(s); font-weight: 640; font-stretch: 76%; font-size: 3rem; line-height: 0.9; color: var(--orange); margin-bottom: 0.9rem; }
.steps p { color: var(--ink-2); font-size: 0.9688rem; }
.steps__img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
@media (hover: hover) and (pointer: fine) { .steps li:hover { transform: translateY(-4px); } }

/* ---------- 04 Kanzlei ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.about__text { display: grid; gap: 1rem; }
.about__lead { font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.about__text > p:not(.about__lead) { color: var(--ink-2); max-width: 32em; }
.team { margin-top: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 1rem; }
.team li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.team img { grid-row: 1 / span 2; width: 4.25rem; height: 4.25rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.team b { font-weight: 640; align-self: end; }
.team span { font-size: 0.9063rem; color: var(--ink-3); align-self: start; }
.about__images { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.about__images img { width: 100%; object-fit: cover; border-radius: var(--r); aspect-ratio: 1; }
.about__images img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; object-position: 50% 30%; }

/* ---------- 05 Fragen ---------- */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); counter-reset: q; }
.qa > div { counter-increment: q; background: var(--card); border-radius: var(--r); padding: clamp(1.25rem, 2.4vw, 1.9rem); display: grid; gap: 0.6rem; align-content: start; border: 1.5px solid transparent; transition: border-color 240ms ease; }
.qa > div:hover { border-color: var(--orange); }
.qa dt { font-weight: 640; font-stretch: 80%; font-size: 1.5rem; line-height: 1.12; text-wrap: balance; }
.qa dt::before { content: "Frage " counter(q); display: block; font-stretch: 100%; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.6rem; }
.qa dd { color: var(--ink-2); font-size: 0.9688rem; }

/* ---------- 06 Kontakt ---------- */
.contact { background: var(--orange); color: #fff; padding-block: clamp(1.25rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; margin-bottom: var(--sec-y); }
.contact__card { display: grid; gap: 0.9rem; justify-items: start; align-content: center; padding-block: clamp(0.5rem, 2vw, 1.5rem); }
.contact .label { color: rgba(255, 255, 255, 0.82); }
.contact__phone { font-weight: 640; font-stretch: 76%; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.95; text-decoration: none; white-space: nowrap; margin: 0.3rem 0; background: linear-gradient(#fff, #fff) left bottom / 0 3px no-repeat; transition: background-size 380ms var(--ease); }
.contact__phone:hover { background-size: 100% 3px; }
.contact__card > p:not(.label) { color: rgba(255, 255, 255, 0.92); max-width: 30em; }
.contact dl { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem); margin-top: 1rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.35); width: 100%; }
.contact dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); margin-bottom: 0.3rem; }
.contact dd { font-size: 0.9688rem; line-height: 1.5; }
.contact dd a { text-underline-offset: 0.2em; }
.contact__img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; border-radius: var(--r-s); }
.contact :focus-visible { outline-color: #fff; }

/* ---------- Fuß ---------- */
.foot { max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding: 0 var(--pad) 2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; font-size: 0.875rem; color: var(--ink-3); }
.foot nav { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 1.5rem; align-self: center; font-weight: 500; font-size: 0.9688rem; color: var(--ink); }
.foot nav a { text-underline-offset: 0.25em; text-decoration-color: var(--line); }
.foot nav a:hover { color: var(--orange); text-decoration-color: currentColor; }

/* ---------- Rechtstexte ---------- */
.legal { background: var(--card); border-radius: var(--r); padding: clamp(1.5rem, 5vw, 4rem); margin-block: clamp(1.25rem, 4vw, 3rem); }
.legal__body { max-width: 44em; }
.legal h1 { font-weight: 640; font-stretch: 76%; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); hyphens: auto; }
.legal h2 { font-stretch: 100%; font-weight: 640; font-size: clamp(1.15rem, 1.6vw, 1.3rem); letter-spacing: -0.015em; line-height: 1.25; margin: 2.2rem 0 0.5rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: 0.8rem; }
.legal ul { list-style: disc; padding-left: 1.2rem; margin-top: 0.5rem; display: grid; gap: 0.25rem; }
.legal a { color: var(--orange-deep); text-underline-offset: 0.22em; }
.todo { background: #f0dd8c; color: #171b21; padding: 0.05em 0.35em; }
.legal__back { margin-top: 2.5rem; font-weight: 600; }

/* ---------- Einblenden ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Anpassung ---------- */
@media (max-width: 1180px) {
  html { scroll-padding-top: 5.5rem; }
  .side { position: sticky; inset: 0 auto auto auto; width: auto; flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.7rem var(--pad); }
  .brand { margin-right: auto; }
  .brand img { width: 2.5rem; height: 2.5rem; }
  .brand__text b { font-size: 1.4rem; }
  .side__foot { display: none; }
  .side__call { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1.1rem; background: var(--orange); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
  .menu { display: grid; gap: 6px; place-content: center; width: 2.75rem; height: 2.75rem; background: rgba(243, 242, 238, 0.1); border: 0; border-radius: 50%; cursor: pointer; }
  .menu span:not(.sr) { display: block; width: 1.15rem; height: 1.5px; background: var(--on-dark); transition: transform 300ms var(--ease); }
  .menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--dark); padding: 0.5rem var(--pad) 1.25rem; display: none; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6); }
  .nav.is-open { display: grid; }
  .nav a { margin-inline: 0; }
  .page { margin-left: 0; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__figure { margin: 0 1rem 1rem 0; }
  .hero__figure img { aspect-ratio: 4 / 4.2; }
  .chips, .bars, .steps-wrap, .about, .contact { grid-template-columns: minmax(0, 1fr); }
  .tabs { grid-template-columns: minmax(0, 1fr); }
  .tabs__list { display: none; }
  .tabs.is-on .panel:not(.is-active) { display: block; }
  .tabs__panels { display: grid; gap: 0.9rem; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__img { min-height: 0; aspect-ratio: 16 / 9; }
  .steps__img { aspect-ratio: 16 / 9; order: -1; }
  .contact__img { min-height: 0; aspect-ratio: 16 / 10; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot nav { grid-row: auto; grid-column: auto; margin-top: 0.75rem; }
}

@media (max-width: 560px) {
  .qa, .steps { grid-template-columns: minmax(0, 1fr); }
  .hero__actions { flex-direction: column; align-self: stretch; width: 100%; }
  .contact dl { grid-template-columns: minmax(0, 1fr); }
  .brand__text span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal .bar span { transform: none; }
  .hero__text > *, .hero__figure, .calc__out strong, .tabs.is-on .panel.is-active { animation: none; }
}
@media print { .side, .skip { display: none; } .page { margin-left: 0; } .reveal { opacity: 1; transform: none; } }