/*
Theme Name: TerraOrganic
Author: Pixel Studio
Version: 0.7.0
Text Domain: terraorganic
*/

/*
 * Kierunek „app UI” (Szef 22.09): panele, pasek boczny z ikonami, pastylki, kafle, karty z obrazem, dolne zakładki mobile.
 * Kolory ZOSTAJĄ jasne Terra (Szef: „kolory terra, nie zmieniaj na ciemne”): len · piasek · espresso · terakota · glina.
 * Zmienna --to-camel = akcent terakota (nazwa z iteracji, wartość jasnej palety).
 * Poprzednia jasna wersja: backups/style-0.4.1-jasny.css
 */
:root {
  --to-bg: #ebe3d8;
  --to-panel: #f7f3ee;
  --to-panel-2: #f0e9e0;
  --to-panel-3: #e6dccf;
  --to-line: rgba(35, 29, 25, .08);
  --to-line-2: rgba(35, 29, 25, .15);
  --to-ink: #231d19;
  --to-muted: #6e645b;
  --to-dim: #8f8479;
  --to-camel: #9c5a3c;
  --to-camel-2: #b8704d;
  --to-terra: #7d452c;
  --to-clay: #c9a78d;
  --to-on-accent: #fbf6f0;
  --to-glow: rgba(156, 90, 60, .16);
  --to-warm: #efe2d4;
  --to-shadow: rgba(35, 29, 25, .22);
  --to-serif: "Cormorant Garamond", "Times New Roman", serif;
  --to-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --gap: clamp(10px, 1.2vw, 16px);
  --pad: clamp(22px, 4vw, 64px);
  --rail: 104px;
  --to-ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--to-bg); color: var(--to-ink); font: 400 1rem/1.65 var(--to-sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--to-serif); font-weight: 500; line-height: 1.06; letter-spacing: -.01em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); }
h1 em, h2 em { font-style: italic; color: var(--to-camel); }
p { margin: 0 0 1.1em; }
.to-ico { width: 22px; height: 22px; flex: none; }

.to-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .72rem/1 var(--to-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--to-camel); margin-bottom: 1.4em; }
.to-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--to-camel); box-shadow: 0 0 0 4px var(--to-glow); }
.to-lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--to-muted); max-width: 38em; }
.to-todo { outline: 1px dashed var(--to-camel); outline-offset: 4px; }

/* ---------- Przyciski / pastylki ---------- */
.to-btn, .to-pill { display: inline-flex; align-items: center; gap: .6em; border-radius: 999px; text-decoration: none; transition: background .35s var(--to-ease), color .35s var(--to-ease), border-color .35s var(--to-ease), transform .35s var(--to-ease), box-shadow .35s var(--to-ease); }
.to-btn { padding: 1.05em 1.7em; font: 500 .8rem/1 var(--to-sans); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--to-line-2); color: var(--to-ink); background: var(--to-panel-2); }
.to-btn::after { content: "→"; transition: transform .35s var(--to-ease); }
.to-btn:hover { border-color: var(--to-camel); transform: translateY(-2px); }
.to-btn:hover::after { transform: translateX(4px); }
.to-btn--solid { background: linear-gradient(135deg, var(--to-camel-2), var(--to-camel)); color: var(--to-on-accent); border-color: transparent; box-shadow: 0 10px 30px -10px var(--to-glow); }
.to-btn--solid:hover { box-shadow: 0 16px 40px -10px rgba(156, 90, 60, .35); }
.to-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.to-pill { padding: 10px 16px; font: 500 .82rem/1 var(--to-sans); border: 1px solid var(--to-line-2); background: var(--to-panel-2); }
.to-pill .to-ico { width: 18px; height: 18px; }
.to-pill--accent { background: var(--to-camel); color: var(--to-on-accent); border-color: transparent; }
.to-pill--accent:hover { background: var(--to-camel-2); }

.to-skip { position: absolute; left: -9999px; }
.to-skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--to-camel); color: var(--to-on-accent); padding: 8px 12px; border-radius: 8px; }

/* ---------- Szkielet aplikacji ---------- */
.to-app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gap); padding: var(--gap); min-height: 100vh; }
.to-rail { position: sticky; top: var(--gap); height: calc(100vh - 2 * var(--gap)); display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 22px 10px; background: var(--to-panel); border: 1px solid var(--to-line); border-radius: var(--r-xl); }
.to-rail__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--to-camel-2), var(--to-terra)); color: var(--to-on-accent); font: 600 1.15rem/1 var(--to-serif); letter-spacing: .04em; text-decoration: none; }
.to-rail__nav { flex: 1; width: 100%; }
.to-menu--primary { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.to-menu--primary a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; border-radius: var(--r-md); text-decoration: none; color: var(--to-muted); transition: color .3s, background .3s; }
.to-menu--primary a .to-ico { width: 42px; height: 42px; padding: 10px; border-radius: 50%; border: 1px solid var(--to-line-2); transition: all .35s var(--to-ease); }
.to-menu__label { font-size: .68rem; line-height: 1.25; text-align: center; letter-spacing: .02em; }
.to-menu--primary a:hover { color: var(--to-ink); }
.to-menu--primary a:hover .to-ico { border-color: var(--to-camel); }
.to-menu--primary .current-menu-item > a { color: var(--to-ink); }
.to-menu--primary .current-menu-item > a .to-ico { background: var(--to-camel); color: var(--to-on-accent); border-color: transparent; box-shadow: 0 0 0 5px var(--to-glow); }

.to-stage { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.to-top { position: sticky; top: var(--gap); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 28px; background: rgba(247, 243, 238, .86); backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--to-line); border-radius: var(--r-lg); }
.to-logo { font: 500 1.55rem/1 var(--to-serif); text-decoration: none; letter-spacing: .01em; }
.to-top__right { display: flex; align-items: center; gap: 10px; }
.to-lang ul { display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: 999px; }
.to-lang a { display: block; padding: 7px 12px; border-radius: 999px; font: 500 .74rem/1 var(--to-sans); letter-spacing: .12em; text-decoration: none; color: var(--to-muted); }
.to-lang a[aria-current] { background: var(--to-ink); color: var(--to-bg); }

.to-main { display: flex; flex-direction: column; gap: var(--gap); }
.to-main > article { display: flex; flex-direction: column; gap: var(--gap); }
.to-main:not(.to-main--flush) > article { padding: var(--pad); background: var(--to-panel); border: 1px solid var(--to-line); border-radius: var(--r-xl); }

/* Każda sekcja = panel */
.to-hero, .to-intro, .to-points, .to-models, .to-brands, .to-showroom, .to-cta, .to-page-hero, .to-prose, .to-person, .to-contact, .to-legal {
  position: relative; background: var(--to-panel); border: 1px solid var(--to-line); border-radius: var(--r-xl); padding: var(--pad); overflow: hidden;
}
.to-wrap { width: 100%; }

/* ---------- HERO ---------- */
.to-hero { padding-block: clamp(32px, 5vw, 72px); background: radial-gradient(120% 90% at 78% 40%, var(--to-warm) 0%, var(--to-panel) 55%); }
.to-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.to-hero__text h1 { margin-bottom: .3em; }
.to-hero__text .to-btns { margin-top: 28px; }
.to-hero__media { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; justify-self: end; width: min(100%, 520px); margin: 0; }
.to-hero__frame { position: relative; }
.to-hero__frame::before { content: ""; position: absolute; inset: 12% -18% -6%; background: radial-gradient(closest-side, var(--to-glow), transparent 70%); z-index: 0; }
.to-hero__frame::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 44px; border-radius: 50%; border: 1px solid rgba(156, 90, 60, .4); background: radial-gradient(closest-side, rgba(156, 90, 60, .14), transparent); z-index: 0; }
.to-hero__media video { position: relative; z-index: 1; width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--to-line-2); box-shadow: 0 40px 80px -34px var(--to-shadow); }
.to-thumbs { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.to-thumbs img { width: 64px; height: 84px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--to-line-2); opacity: .8; transition: opacity .3s, border-color .3s, transform .3s var(--to-ease); }
.to-thumbs button { display: block; padding: 0; background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.to-thumbs button:focus-visible { outline: 2px solid var(--to-camel); outline-offset: 3px; }
.to-thumbs .is-active img, .to-thumbs button:hover img { opacity: 1; border-color: var(--to-camel); transform: translateX(-3px); box-shadow: 0 0 0 3px var(--to-glow); }
.to-hero__caption { grid-column: 1 / -1; margin-top: 34px; display: inline-flex; align-items: center; gap: 8px; font: 500 .78rem/1 var(--to-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--to-muted); }
.to-hero__caption .to-ico { width: 16px; height: 16px; color: var(--to-camel); }

/* ---------- Statystyki ---------- */
.to-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.to-stat { padding: 26px 28px; background: var(--to-panel); border: 1px solid var(--to-line); border-radius: var(--r-lg); }
.to-stat b { display: block; font: 500 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--to-serif); color: var(--to-camel); margin-bottom: 10px; }
.to-stat span { font-size: .86rem; color: var(--to-muted); line-height: 1.45; display: block; }

/* ---------- Intro ---------- */
.to-intro { text-align: center; padding-block: clamp(48px, 7vw, 104px); background: radial-gradient(80% 120% at 50% 0%, var(--to-warm), var(--to-panel) 70%); }
.to-intro p:first-child { font: 500 clamp(1.6rem, 3vw, 2.6rem)/1.25 var(--to-serif); max-width: 24em; margin: 0 auto; }
.to-intro .to-lead { margin: 1.4em auto 0; max-width: 42em; }

/* ---------- Karty punktów / funkcje ---------- */
.to-points__head { max-width: 860px; margin-bottom: clamp(24px, 3.5vw, 44px); }
.to-points__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap); }
.to-points__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.to-point { padding: clamp(22px, 2.6vw, 34px); background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: var(--r-lg); transition: border-color .35s, transform .35s var(--to-ease); }
.to-point:hover { border-color: rgba(156, 90, 60, .35); transform: translateY(-3px); }
.to-point__no, .to-point__ico { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 50%; border: 1px solid var(--to-line-2); font: italic 500 1.05rem/1 var(--to-serif); color: var(--to-camel); }
.to-point__ico { background: rgba(156, 90, 60, .08); border-color: rgba(156, 90, 60, .3); }
.to-point h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.to-point p, .to-point li { color: var(--to-muted); font-size: .95rem; }
.to-point ul { margin: 0; padding: 0; list-style: none; }
.to-point li { position: relative; padding-left: 1.3em; margin-bottom: .8em; }
.to-point li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--to-camel); }
.to-point li:first-child { padding-left: 0; color: var(--to-ink); }
.to-point li:first-child::before { display: none; }
.to-points--sand { background: var(--to-panel-2); }
.to-points--sand .to-point { background: var(--to-panel-3); }

/* Pas funkcji (home) */
.to-points--strip .to-points__grid { gap: 0; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: var(--r-lg); }
.to-points--strip .to-point { background: none; border: 0; border-radius: 0; border-left: 1px solid var(--to-line); }
.to-points--strip .to-point:first-child { border-left: 0; }
.to-points--strip .to-point:hover { transform: none; background: rgba(156, 90, 60, .04); }

/* ---------- Modele (karty z obrazem) ---------- */
.to-models__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(24px, 3.5vw, 44px); }
.to-models__head .to-lead { margin: 0; max-width: 30em; }
.to-models__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.to-model { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 380px; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: var(--r-lg); text-decoration: none; overflow: hidden; transition: border-color .35s, transform .5s var(--to-ease); }
.to-model:hover { border-color: rgba(156, 90, 60, .4); transform: translateY(-4px); }
.to-model__img { position: relative; overflow: hidden; }
.to-model__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--to-ease); }
.to-model:hover .to-model__img img { transform: scale(1.05); }
.to-model__body { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); }
.to-model__no { font: italic 500 1rem/1 var(--to-serif); color: var(--to-camel); margin-bottom: auto; padding-bottom: 32px; }
.to-model h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.to-model p { color: var(--to-muted); font-size: .95rem; }
.to-model__more { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-top: 10px; border-radius: 50%; background: var(--to-camel); color: var(--to-on-accent); transition: transform .4s var(--to-ease); }
.to-model__more .to-ico { width: 20px; height: 20px; }
.to-model:hover .to-model__more { transform: translateX(6px); }

/* ---------- Marki (karty produktowe) ---------- */
.to-brands__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.to-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 5px; list-style: none; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: 999px; }
.to-filter button { font: 500 .74rem/1 var(--to-sans); letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; background: none; border: 0; border-radius: 999px; color: var(--to-muted); cursor: pointer; transition: all .3s var(--to-ease); }
.to-filter button:hover { color: var(--to-ink); }
.to-filter button[aria-pressed="true"] { background: var(--to-camel); color: var(--to-on-accent); }
.to-brands__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--gap); }
.to-brand { position: relative; display: flex; flex-direction: column; padding: 10px; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: var(--r-lg); text-align: left; transition: border-color .35s, transform .35s var(--to-ease); }
.to-brand:hover { border-color: rgba(156, 90, 60, .35); transform: translateY(-3px); }
.to-brand img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: calc(var(--r-lg) - 8px); }
.to-brand__ph { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: calc(var(--r-lg) - 8px); background: linear-gradient(145deg, var(--to-panel-3), var(--to-panel)); font: 500 1.6rem/1 var(--to-serif); letter-spacing: .08em; color: var(--to-camel); }
.to-brand__meta { padding: 14px 8px 6px; }
.to-brand__name { display: block; font: 500 1.2rem/1.2 var(--to-serif); }
.to-brand__cat { display: block; margin-top: 4px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--to-dim); }
.to-brand[hidden] { display: none; }

/* ---------- Showroom ---------- */
.to-showroom { background: radial-gradient(90% 120% at 15% 50%, var(--to-warm), var(--to-panel) 60%); }
.to-showroom__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 6vw, 96px); align-items: center; }
.to-showroom__film { position: relative; width: min(100%, 380px); }
.to-showroom__film video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--to-ink); border-radius: var(--r-lg); border: 1px solid var(--to-line-2); box-shadow: 0 40px 80px -34px var(--to-shadow); }
.to-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap); margin: 30px 0; padding: 0; }
.to-facts > div { padding: 18px 20px; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: var(--r-md); }
.to-facts dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--to-camel); margin-bottom: 8px; }
.to-facts dd { margin: 0; font: 500 1.15rem/1.4 var(--to-serif); }
.to-facts a { text-decoration: none; }
.to-facts a:hover { color: var(--to-camel); }

/* ---------- CTA ---------- */
.to-cta { color: var(--to-on-accent); text-align: center; padding-block: clamp(48px, 7vw, 104px); background: radial-gradient(70% 140% at 50% 120%, rgba(201, 167, 141, .45), transparent 60%), linear-gradient(135deg, var(--to-camel), var(--to-terra)); border-color: transparent; }
.to-cta h2 em { color: var(--to-clay); }
.to-cta .to-lead { color: rgba(251, 246, 240, .82); }
.to-cta .to-btn--solid { background: var(--to-on-accent); color: var(--to-ink); }
.to-cta h2 { max-width: 18em; margin-inline: auto; }
.to-cta .to-lead { margin: 0 auto 1.8em; }
.to-cta .to-btns { justify-content: center; }

/* ---------- Podstrony ---------- */
.to-page-hero { padding-block: clamp(40px, 6vw, 88px); background: radial-gradient(90% 140% at 100% 0%, var(--to-warm), var(--to-panel) 60%); }
.to-page-hero h1 { max-width: 15em; }
.to-page-hero .to-lead { max-width: 46em; }
.to-prose__in { max-width: 900px; }
.to-prose__in > p:only-child, .to-prose__in h2 + p { font: 500 clamp(1.3rem, 2.1vw, 1.8rem)/1.4 var(--to-serif); color: var(--to-ink); }
.to-prose__in p { color: var(--to-muted); }
.to-prose--sand { background: var(--to-panel-2); }

.to-person__grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.to-person__photo { aspect-ratio: 4 / 5; border-radius: var(--r-lg); border: 1px dashed var(--to-line-2); background: linear-gradient(145deg, var(--to-panel-3), var(--to-panel-2)); }
.to-person__list { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.to-person__list li { padding: 16px 20px; background: var(--to-panel-2); border: 1px solid var(--to-line); border-radius: var(--r-md); color: var(--to-muted); font-size: .95rem; }
.to-person__list strong { display: block; font-weight: 500; color: var(--to-ink); margin-bottom: 4px; }

.to-contact h2 { margin-bottom: .2em; }
.to-legal__in { max-width: 900px; color: var(--to-muted); font-size: .95rem; }
.to-legal__in h2, .to-legal__in h3 { font-size: 1.45rem; margin-top: 1.6em; color: var(--to-ink); }

/* ---------- Stopka ---------- */
.to-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; background: var(--to-panel); border: 1px solid var(--to-line); border-radius: var(--r-lg); color: var(--to-dim); font-size: .86rem; }
.to-menu--footer { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.to-menu--footer a { text-decoration: none; }
.to-menu--footer a:hover { color: var(--to-ink); }
.to-footer__copy { margin: 0; }

/* ---------- Wejście sekcji ---------- */
.to-io { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--to-ease), transform .9s var(--to-ease); }
.to-io.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .to-io { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsywność ---------- */
@media (max-width: 1180px) {
  .to-points__grid:has(> :nth-child(4):last-child), .to-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .to-points--strip .to-point:nth-child(3) { border-left: 0; }
  .to-points--strip .to-point:nth-child(n+3) { border-top: 1px solid var(--to-line); }
  .to-model { grid-template-columns: 1fr; }
  .to-model__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 960px) {
  .to-hero__grid, .to-showroom__grid, .to-person__grid { grid-template-columns: 1fr; }
  .to-hero__media { justify-self: center; order: -1; }
  .to-showroom__film { margin-inline: auto; }
  .to-person__photo { max-width: 280px; }
}
/* Mobile: dolne zakładki jak w aplikacji */
@media (max-width: 860px) {
  :root { --rail: 0px; }
  .to-app { grid-template-columns: 1fr; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .to-rail { position: fixed; z-index: 60; top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: auto; flex-direction: row; padding: 6px; border-radius: 24px; background: rgba(247, 243, 238, .92); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 20px 50px -14px var(--to-shadow); }
  .to-rail__mark { display: none; }
  .to-menu--primary { flex-direction: row; justify-content: space-between; gap: 0; }
  .to-menu--primary li { flex: 1; min-width: 0; }
  .to-menu--primary a { padding: 6px 2px; gap: 4px; }
  .to-menu--primary a .to-ico { width: 36px; height: 36px; padding: 8px; border: 0; }
  .to-menu__label { font-size: .6rem; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .to-top { padding: 10px 10px 10px 18px; }
  .to-logo { font-size: 1.3rem; }
  .to-pill--accent span { display: none; }
  .to-pill--accent { padding: 10px; }
  .to-models__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .to-points__grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  .to-points--strip .to-point { border-left: 0; border-top: 1px solid var(--to-line); }
  .to-points--strip .to-point:first-child { border-top: 0; }
  .to-stats__grid { grid-template-columns: 1fr 1fr; }
  .to-stat { padding: 20px; }
  .to-hero__media { grid-template-columns: 1fr; }
  .to-thumbs { flex-direction: row; justify-content: center; }
  .to-thumbs img { width: 56px; height: 72px; }
  .to-hero { padding-top: 14px; }
  .to-hero__media { width: 100%; }
  .to-hero__media video { aspect-ratio: 4 / 5; max-height: 46vh; }
  .to-hero__frame::after { display: none; }
  .to-thumbs { margin-top: 2px; }
  .to-hero__caption { margin-top: 6px; justify-content: center; }
  .to-hero__grid { gap: 22px; }
}

/* =====================================================================
   GLASS · PRZEJŚCIA · INTERAKCJE (0.6.0)
   Szkło potrzebuje czegoś pod spodem: tło aplikacji = wolno dryfujące
   plamy terakoty/gliny/piasku. Panele półprzezroczyste + blur + połysk.
   ===================================================================== */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
body::before { width: 52vw; height: 52vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(201, 167, 141, .9), transparent 65%); animation: to-drift-a 38s ease-in-out infinite alternate; }
body::after { width: 46vw; height: 46vw; right: -14vw; bottom: -16vw; background: radial-gradient(circle, rgba(156, 90, 60, .45), transparent 65%); animation: to-drift-b 44s ease-in-out infinite alternate; }
@keyframes to-drift-a { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes to-drift-b { to { transform: translate(-20vw, -26vh) scale(.9); } }

/* Panele i paski = szkło */
.to-rail, .to-top, .to-footer,
.to-hero, .to-intro, .to-points, .to-models, .to-brands, .to-showroom, .to-page-hero, .to-prose, .to-person, .to-contact, .to-legal, .to-stat,
.to-main:not(.to-main--flush) > article {
  background-color: rgba(247, 243, 238, .66);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(35, 29, 25, .04), 0 24px 60px -36px rgba(35, 29, 25, .28);
}
.to-hero, .to-intro, .to-showroom, .to-page-hero { background-blend-mode: normal; }
.to-top { background-color: rgba(247, 243, 238, .72); }

/* Karty wewnątrz paneli = jaśniejsze szkło */
.to-point, .to-model, .to-brand, .to-facts > div, .to-person__list li, .to-filter, .to-lang ul, .to-btn:not(.to-btn--solid), .to-pill:not(.to-pill--accent) {
  background-color: rgba(255, 255, 255, .42);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 30px -22px rgba(35, 29, 25, .35);
}
.to-points--strip .to-points__grid { background: rgba(255, 255, 255, .38); border-color: rgba(255, 255, 255, .7); }
.to-points--strip .to-point { background: none; box-shadow: none; border-color: rgba(35, 29, 25, .07); }

/* Reflektor za kursorem na panelach i kartach (zmienne --mx/--my z JS) */
.to-fx-spot { --mx: 50%; --my: 50%; }
.to-fx-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--to-ease);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(201, 167, 141, .12) 40%, transparent 65%); mix-blend-mode: soft-light; }
.to-fx-spot:hover::after { opacity: 1; }
.to-point, .to-brand, .to-stat, .to-facts > div { position: relative; }

/* Połysk przelatujący po karcie przy najechaniu */
.to-model::before, .to-brand::before, .to-stat::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 250% 100%; background-position: 130% 0; transition: background-position 1.1s var(--to-ease); }
.to-model:hover::before, .to-brand:hover::before, .to-stat:hover::before { background-position: -30% 0; }

/* Tilt 3D (JS ustawia --rx/--ry) */
.to-fx-tilt, .to-fx-tilt.is-in, .to-fx-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .6s var(--to-ease), opacity .9s var(--to-ease), filter .9s var(--to-ease), border-color .35s, box-shadow .5s var(--to-ease); transform-style: preserve-3d; }
.to-fx-tilt.to-io:not(.is-in) { transform: translateY(18px); }
.to-fx-tilt:hover { --ty: -4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 60px -30px rgba(35, 29, 25, .45); }
.to-hero__frame.to-fx-tilt video { transform: translateZ(30px); }

/* Przyciski magnetyczne + wciśnięcie jak w apce */
.to-fx-mag, .to-fx-mag:hover { transform: translate(var(--bx, 0), var(--by, 0)); transition: transform .45s var(--to-ease), background .35s, box-shadow .35s; }
.to-btn:active, .to-pill:active, .to-menu--primary a:active, .to-filter button:active, .to-thumbs button:active { transform: scale(.95); transition-duration: .12s; }

/* Aktywna zakładka: miękki „puls” podświetlenia */
.to-menu--primary .current-menu-item > a .to-ico { animation: to-halo 3.2s ease-in-out infinite; }
@keyframes to-halo { 50% { box-shadow: 0 0 0 9px rgba(156, 90, 60, .08); } }

/* Pasek postępu przewijania w górnym pasku */
.to-top::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--to-camel), var(--to-clay)); transform-origin: left; transform: scaleX(var(--progress, 0)); }

/* Wejście sekcji: kaskada dzieci (JS nadaje --i) */
.to-io { transition-delay: calc(var(--i, 0) * 70ms); }
.to-io { filter: blur(6px); }
.to-io.is-in { filter: none; }
.to-io { transition-property: opacity, transform, filter; }

/* Hero: nagłówek wjeżdża słowami przy starcie (do czasu podziału przez JS — ukryty, bez mignięcia) */
.js .to-hero h1:not(.is-split) { opacity: 0; }
.to-hero h1 .to-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.to-hero h1 .to-w > span { display: inline-block; transform: translateY(110%); animation: to-rise 1.1s var(--to-ease) forwards; animation-delay: calc(.12s + var(--l, 0) * .07s); }
@keyframes to-rise { to { transform: none; } }
.to-hero .to-eyebrow, .to-hero .to-lead, .to-hero .to-btns { opacity: 0; animation: to-fade .9s var(--to-ease) forwards; }
.to-hero .to-eyebrow { animation-delay: .05s; }
.to-hero .to-lead { animation-delay: .55s; }
.to-hero .to-btns { animation-delay: .7s; }
.to-hero__media { opacity: 0; animation: to-pop 1.2s var(--to-ease) .25s forwards; }
@keyframes to-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes to-pop { from { opacity: 0; transform: scale(.94) translateY(20px); } to { opacity: 1; transform: none; } }

/* Przejścia między stronami (View Transitions API, MPA) — pasek boczny i górny zostają na miejscu */
@view-transition { navigation: auto; }
.to-rail { view-transition-name: to-rail; }
.to-top { view-transition-name: to-top; }
.to-main { view-transition-name: to-main; }
::view-transition-old(to-main) { animation: to-vt-out .28s var(--to-ease) both; }
::view-transition-new(to-main) { animation: to-vt-in .55s var(--to-ease) both; }
@keyframes to-vt-out { to { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(4px); } }
@keyframes to-vt-in { from { opacity: 0; transform: translateY(16px) scale(.995); filter: blur(6px); } }

/* Fallback bez backdrop-filter: pełne kolory */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .to-rail, .to-top, .to-hero, .to-intro, .to-points, .to-models, .to-brands, .to-showroom, .to-page-hero, .to-prose, .to-person, .to-contact, .to-legal, .to-stat, .to-footer { background-color: var(--to-panel); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .to-menu--primary .current-menu-item > a .to-ico { animation: none; }
  .to-hero h1 .to-w > span, .to-hero .to-eyebrow, .to-hero .to-lead, .to-hero .to-btns, .to-hero__media { animation: none; opacity: 1; transform: none; }
  .to-io { filter: none; }
  .to-fx-tilt, .to-fx-mag { transform: none !important; }
  @view-transition { navigation: none; }
}
@media (max-width: 860px) {
  body::before, body::after { filter: blur(60px); opacity: .45; }
}

/* =====================================================================
   GLASS KIT (0.6.1) — wg wzorca Szefa (szklany zestaw UI): świetliste
   krawędzie z gradientu, poświata przycisków, szklane zakładki/pastylki.
   Kolory Terra: światło = biel + glina, poświata = terakota.
   ===================================================================== */
:root {
  --to-rim: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(201, 167, 141, .35) 45%, rgba(255, 255, 255, .7) 100%);
  --to-rim-hot: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(184, 112, 77, .75) 50%, rgba(255, 255, 255, .85));
  --to-glass: rgba(255, 255, 255, .38);
}

/* Świetlista krawędź: warstwa padding-box (szkło) + border-box (gradient) */
.to-point, .to-model, .to-brand, .to-stat, .to-facts > div, .to-person__list li,
.to-btn:not(.to-btn--solid), .to-pill:not(.to-pill--accent), .to-filter, .to-lang ul, .to-thumbs img {
  border: 1px solid transparent !important;
  background: linear-gradient(var(--to-glass), var(--to-glass)) padding-box, var(--to-rim) border-box;
}
.to-model:hover, .to-brand:hover, .to-point:hover, .to-stat:hover { background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) padding-box, var(--to-rim-hot) border-box; }
.to-points--strip .to-point { background: none; border: 0 !important; border-left: 1px solid rgba(35, 29, 25, .07) !important; }
.to-points--strip .to-point:first-child { border-left: 0 !important; }

/* Przycisk główny: szklana terakota z poświatą i jasnym obrzeżem u góry */
.to-btn--solid, .to-pill--accent {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--to-camel-2), var(--to-camel) 55%, var(--to-terra));
  border: 1px solid rgba(255, 255, 255, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -8px 16px -8px rgba(125, 69, 44, .6), 0 0 0 4px rgba(156, 90, 60, .10), 0 10px 28px -8px rgba(156, 90, 60, .55);
  text-shadow: 0 1px 0 rgba(125, 69, 44, .35);
}
.to-btn--solid:hover, .to-pill--accent:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -8px 16px -8px rgba(125, 69, 44, .6), 0 0 0 6px rgba(156, 90, 60, .14), 0 14px 40px -8px rgba(156, 90, 60, .7); }
.to-cta .to-btn--solid { background: linear-gradient(180deg, #fff, var(--to-on-accent)); color: var(--to-ink); text-shadow: none; box-shadow: inset 0 1px 0 #fff, 0 0 0 5px rgba(255, 255, 255, .16), 0 12px 34px -8px rgba(35, 29, 25, .45); }

/* Przycisk drugorzędny: szkło z delikatnym światłem */
.to-btn:not(.to-btn--solid) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 22px -14px rgba(35, 29, 25, .4); backdrop-filter: blur(10px); }
.to-btn:not(.to-btn--solid):hover { background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) padding-box, var(--to-rim-hot) border-box; box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(156, 90, 60, .08), 0 12px 30px -14px rgba(156, 90, 60, .45); }

/* Zakładki / segmenty (PL-DE, filtr marek): aktywny element świeci */
.to-lang ul, .to-filter { box-shadow: inset 0 2px 6px rgba(35, 29, 25, .08), inset 0 1px 0 rgba(255, 255, 255, .8); }
.to-lang a[aria-current], .to-filter button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(135deg, var(--to-camel-2), var(--to-camel));
  color: var(--to-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 14px rgba(156, 90, 60, .45), 0 4px 12px -4px rgba(156, 90, 60, .6);
}
.to-filter button, .to-lang a { transition: background .35s var(--to-ease), color .35s, box-shadow .35s; }

/* Pasek boczny / dolne zakładki: aktywna ikona jak podświetlony przycisk-ikona */
.to-menu--primary a .to-ico { background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) padding-box, var(--to-rim) border-box; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(35, 29, 25, .4); }
.to-menu--primary .current-menu-item > a .to-ico {
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 60%) padding-box, linear-gradient(135deg, var(--to-camel-2), var(--to-camel)) padding-box, var(--to-rim-hot) border-box;
  color: var(--to-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 18px rgba(156, 90, 60, .5), 0 0 0 5px var(--to-glow);
}
@media (max-width: 860px) { .to-menu--primary a .to-ico { background: none; box-shadow: none; } }

/* Ikony w kartach i numeracja: szklane kulki */
.to-point__ico, .to-point__no { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2)) padding-box, var(--to-rim-hot) border-box; border: 1px solid transparent; box-shadow: inset 0 1px 0 #fff, 0 0 16px rgba(156, 90, 60, .18); }
.to-model__more { background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(135deg, var(--to-camel-2), var(--to-terra)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 16px rgba(156, 90, 60, .45); }

/* Kafle statystyk: liczba z miękką poświatą */
.to-stat b { text-shadow: 0 0 22px rgba(156, 90, 60, .25); }

/* Panele: jaśniejsze obrzeże u góry (odbicie światła jak w szkle) */
.to-hero, .to-intro, .to-points, .to-models, .to-brands, .to-showroom, .to-page-hero, .to-prose, .to-person, .to-contact, .to-legal, .to-top, .to-rail, .to-footer {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 60px -36px rgba(35, 29, 25, .3);
}

/* Przygotowane pod formularz kontaktowy (etap 2): szklane pola */
.to-field { width: 100%; padding: 14px 18px; font: inherit; color: var(--to-ink); border-radius: var(--r-md); border: 1px solid transparent; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) padding-box, var(--to-rim) border-box; box-shadow: inset 0 2px 6px rgba(35, 29, 25, .06); transition: box-shadow .3s, background .3s; }
.to-field:focus { outline: none; background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) padding-box, var(--to-rim-hot) border-box; box-shadow: 0 0 0 4px rgba(156, 90, 60, .12), 0 0 18px rgba(156, 90, 60, .2); }

/* ---------- 0.6.2: sekcje z dokumentu klienta (home PL) ---------- */
.to-about { position: relative; padding: var(--pad); border-radius: var(--r-xl); overflow: hidden;
  background-color: rgba(247, 243, 238, .66); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 24px 60px -36px rgba(35, 29, 25, .3); }
.to-about__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.to-about__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 30px 60px -34px var(--to-shadow); }
.to-about__big { font: 500 clamp(1.5rem, 2.6vw, 2.2rem)/1.3 var(--to-serif); margin-bottom: .8em; }
.to-about .to-btn { margin-top: 10px; }

/* Karty obszarów z listą */
.to-model--list .to-model__no { padding-bottom: 20px; font-style: normal; font: 500 .72rem/1 var(--to-sans); letter-spacing: .16em; text-transform: uppercase; }
.to-model--list ul { margin: 0 0 8px; padding: 0; list-style: none; }
.to-model--list li { position: relative; padding: 7px 0 7px 22px; font-size: .9rem; color: var(--to-muted); border-top: 1px solid rgba(35, 29, 25, .07); }
.to-model--list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--to-camel); box-shadow: 0 0 10px rgba(156, 90, 60, .5); }
.to-model--list { min-height: 460px; }

/* Kroki „Jak działamy?” — linia łącząca numery */
.to-points--steps .to-points__grid { counter-reset: none; position: relative; }
.to-points--steps .to-points__grid::before { content: ""; position: absolute; left: 8%; right: 8%; top: calc(clamp(22px, 2.6vw, 34px) + 23px); height: 1px; background: linear-gradient(90deg, transparent, var(--to-clay), var(--to-camel), var(--to-clay), transparent); opacity: .7; }
.to-points--steps .to-point { text-align: left; }
.to-points--steps .to-point__no { position: relative; z-index: 1; width: 48px; height: 48px; font: 500 1.05rem/1 var(--to-serif); font-style: normal; }
@media (max-width: 960px) {
  .to-about__grid { grid-template-columns: 1fr; }
  .to-about__img { max-width: 360px; }
  .to-points--steps .to-points__grid::before { display: none; }
}

/* ---------- 0.7.0: formularz kontaktowy (szkło) ---------- */
.to-form { display: grid; gap: 22px; margin-top: 8px; }
.to-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.to-form__roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.to-form__roles legend { width: 100%; margin-bottom: 10px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--to-camel); }
.to-chip { position: relative; cursor: pointer; }
.to-chip input { position: absolute; opacity: 0; pointer-events: none; }
.to-chip span { display: inline-block; padding: 11px 18px; border-radius: 999px; font-size: .88rem; color: var(--to-muted); border: 1px solid transparent; background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) padding-box, var(--to-rim) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); transition: all .3s var(--to-ease); }
.to-chip:hover span { color: var(--to-ink); }
.to-chip input:checked + span { color: var(--to-on-accent); background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 60%) padding-box, linear-gradient(135deg, var(--to-camel-2), var(--to-camel)) padding-box, var(--to-rim-hot) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 14px rgba(156, 90, 60, .4); }
.to-chip input:focus-visible + span { outline: 2px solid var(--to-camel); outline-offset: 3px; }
.to-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.to-form__f { display: grid; gap: 8px; }
.to-form__f > span { font-size: .8rem; color: var(--to-muted); letter-spacing: .02em; }
.to-form__f--wide { grid-column: 1 / -1; }
.to-form textarea.to-field { resize: vertical; min-height: 140px; }
.to-field:user-invalid { background: linear-gradient(rgba(255, 245, 240, .7), rgba(255, 245, 240, .7)) padding-box, linear-gradient(135deg, #d9826a, #b8643f) border-box; }
.to-check { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--to-muted); cursor: pointer; }
.to-check input { appearance: none; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1px solid transparent; background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) padding-box, var(--to-rim) border-box; cursor: pointer; transition: all .25s; }
.to-check input:checked { background: linear-gradient(135deg, var(--to-camel-2), var(--to-camel)) padding-box, var(--to-rim-hot) border-box; box-shadow: 0 0 12px rgba(156, 90, 60, .45); }
.to-check input:checked::after { content: ""; display: block; width: 6px; height: 11px; margin: 3px auto 0; border: solid var(--to-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.to-check a { color: var(--to-camel); }
.to-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.to-form__status { margin: 0; font-size: .92rem; }
.to-form__status[data-state="ok"] { color: #4f6b3a; }
.to-form__status[data-state="err"] { color: #a2412a; }
.to-form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }
.to-form.is-sent .to-form__grid, .to-form.is-sent .to-form__roles, .to-form.is-sent .to-check, .to-form.is-sent button[type="submit"] { display: none; }
.to-form.is-sent .to-form__status { font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.35 var(--to-serif); color: var(--to-ink); padding: 26px 28px; border-radius: var(--r-lg); background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) padding-box, var(--to-rim-hot) border-box; border: 1px solid transparent; animation: to-pop .8s var(--to-ease); }
@media (max-width: 640px) { .to-form__grid { grid-template-columns: 1fr; } }