/* =========================================================================
   alantouz — CASE STUDIES (Referenzen-Archiv + Detailseiten)
   Loaded after style.css + pages.css. Same tokens, same language.
   Each case carries its own accent via --mk on .case__mock / .cs-stage.
   ========================================================================= */

/* ---- per-case accent on the browser mock ---- */
.case__mock .mock__hero,
.cs-mock .mock__hero {
  background: linear-gradient(120deg, var(--mk, var(--emerald)), color-mix(in oklab, var(--mk, var(--emerald-glow)), white 32%));
}

/* tiny top-nav inside mock */
.mock__nav { display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.mock__nav .logo { width:34px; height:9px; border-radius:100px; background: var(--mk, var(--emerald)); opacity:.85; }
.mock__nav i { width:18px; height:6px; border-radius:100px; background: var(--line); }
.mock__nav .cta { margin-left:auto; width:30px; height:10px; border-radius:100px; background: var(--mk, var(--emerald)); opacity:.55; }

/* variant: split hero (text + image block) */
.mock__duo { display:grid; grid-template-columns: 1.15fr .85fr; gap:10px; margin-bottom:12px; align-items:stretch; }
.mock__duo .txt { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.mock__duo .txt i { display:block; height:9px; border-radius:100px; background: var(--line); }
.mock__duo .txt i.t { height:12px; width:88%; background: color-mix(in oklab, var(--mk, var(--emerald)), white 55%); }
.mock__duo .txt i.w60 { width:60%; }
.mock__duo .txt .mbtn { width:46px; height:12px; border-radius:100px; background: var(--mk, var(--emerald)); opacity:.85; margin-top:2px; }
.mock__duo .img { border-radius:8px; min-height:64px; background: linear-gradient(135deg, color-mix(in oklab, var(--mk, var(--emerald)), white 60%), color-mix(in oklab, var(--mk, var(--emerald)), white 82%)); }

/* variant: menu / centered (gastro) */
.mock__menu { text-align:center; display:grid; gap:8px; justify-items:center; margin-bottom:12px; }
.mock__menu .mock__hero { width:100%; margin-bottom:4px; }
.mock__menu i { display:block; height:8px; border-radius:100px; background: var(--line); }
.mock__menu i.w40 { width:40%; } .mock__menu i.w60 { width:60%; } .mock__menu i.w30 { width:30%; }

/* variant: shop grid */
.mock__grid6 { display:grid; grid-template-columns: repeat(3,1fr); gap:9px; margin-top:12px; }
.mock__grid6 span { height:42px; border-radius:8px; border:1px solid var(--line); background:
  linear-gradient(180deg, color-mix(in oklab, var(--mk, var(--emerald)), white 70%) 60%, #fff 60%); }

/* variant: listing rows (immobilien) */
.mock__rows2 { display:grid; gap:9px; margin-top:12px; }
.mock__rows2 span { height:30px; border-radius:8px; border:1px solid var(--line); background:
  linear-gradient(90deg, color-mix(in oklab, var(--mk, var(--emerald)), white 68%) 32%, var(--line-soft) 32%); }

/* archive: whole card is a link */
a.case { display:block; color:inherit; }
a.case:focus-visible { outline: 2px solid var(--emerald-deep); outline-offset: 3px; }
.case__more { margin-top:18px; display:inline-flex; gap:8px; align-items:center; font-weight:600; color: var(--emerald-deep); font-size:.95rem; }

/* archive filter */
.casefilter { display:flex; flex-wrap:wrap; gap:10px; margin: 34px 0 44px; }
.casefilter button { font: inherit; font-size:.88rem; font-weight:600; color: var(--fir-soft); background: var(--surface); border:1px solid var(--line); padding:9px 17px; border-radius:100px; cursor:pointer; transition: all .25s var(--ease); }
.casefilter button:hover { border-color: var(--emerald-deep); color: var(--emerald-deep); }
.casefilter button.on { background: var(--fir); color:#fff; border-color: var(--fir); }
.case.is-hidden { display:none; }

/* honest footnote */
.case-note { margin-top: 40px; font-size:.88rem; color: var(--fir-dim); max-width: 70ch; }

/* =========================================================================
   CONTACT CARDS (Kontakt.html)
   ========================================================================= */
.contactcards { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ccard { display:flex; flex-direction:column; gap: 6px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,32px); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.ccard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -32px rgba(23,48,41,.4); }
.ccard__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--mist); color: var(--emerald-deep); display:grid; place-items:center; margin-bottom: 12px; }
.ccard b { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--fir); }
.ccard > span:not(.ccard__ic) { color: var(--emerald-deep); font-weight: 600; font-size: 1rem; }
.ccard small { color: var(--fir-dim); font-size: .88rem; line-height: 1.45; margin-top: 4px; }
@media (max-width: 820px){ .contactcards { grid-template-columns: 1fr; } }

/* =========================================================================
   CASE DETAIL ("cstudy")
   ========================================================================= */
.cs-head { max-width: 880px; }
.cs-head h1 { font-family: var(--display); font-weight:800; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height:1.05; letter-spacing:-0.03em; margin-top:18px; }
.cs-head .lead { margin-top: 20px; max-width: 58ch; }

/* fact bar */
.cs-facts { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top: clamp(34px,4vw,52px); padding: clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px); background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); }
.cs-facts div small { display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color: var(--fir-dim); margin-bottom:6px; }
.cs-facts div b { font-family: var(--display); font-weight:700; font-size:1.02rem; color: var(--fir); }
@media (max-width: 760px){ .cs-facts { grid-template-columns: 1fr 1fr; } }

/* big mock stage (clickable → showcase) */
.cs-stage { position:relative; display:block; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background: radial-gradient(120% 130% at 25% 0%, color-mix(in oklab, var(--mk, var(--emerald)), white 82%), #f6f8f5 70%);
  padding: clamp(28px, 5vw, 72px) clamp(22px, 7vw, 110px) 0; margin-top: clamp(36px,5vw,60px); transition: box-shadow .45s var(--ease); }
a.cs-stage:hover { box-shadow: 0 34px 70px -40px rgba(23,48,41,.45); }
a.cs-stage:hover .cs-mock { transform: translateY(-6px); }
.cs-stage__open { position:absolute; z-index:3; top:18px; right:18px; display:inline-flex; gap:7px; align-items:center; background:#fff; border:1px solid var(--line); color: var(--emerald-deep); font-size:.82rem; font-weight:700; padding:8px 15px; border-radius:100px; box-shadow: 0 12px 30px -18px rgba(23,48,41,.4); }
.cs-visit { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top: 26px; }
.cs-visit small { color: var(--fir-dim); font-size:.9rem; max-width: 42ch; line-height:1.45; }
.cs-mock { background:#fff; border:1px solid var(--line); border-bottom:none; border-radius: 14px 14px 0 0; box-shadow: 0 -14px 60px -28px rgba(23,48,41,.45); overflow:hidden; transition: transform .5s var(--ease); }
.cs-mock .mock__body { padding: clamp(18px,3vw,34px) clamp(18px,3.4vw,40px) clamp(10px,2vw,22px); }
.cs-mock .mock__hero { height: clamp(56px, 8vw, 96px); }
.cs-mock .mock__url { font-size:.74rem; }
.cs-stage .case__demo { top:18px; left:18px; }

/* two-col narrative */
.cs-narrative { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,80px); align-items:start; }
.cs-narrative h2 { font-size: clamp(1.5rem,2.6vw,2rem); letter-spacing:-0.02em; margin-bottom:18px; }
.cs-narrative p { color: var(--fir-soft); font-size:1.05rem; line-height:1.65; }
.cs-measures { list-style:none; display:grid; gap:16px; margin-top: 4px; }
.cs-measures li { display:flex; gap:14px; align-items:flex-start; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.cs-measures li svg { flex:none; margin-top:3px; color: var(--emerald-deep); }
.cs-measures li b { display:block; font-family: var(--display); font-weight:700; font-size:1.02rem; margin-bottom:3px; }
.cs-measures li span { color: var(--fir-soft); font-size:.95rem; line-height:1.5; }
@media (max-width: 820px){ .cs-narrative { grid-template-columns: 1fr; } }
/* Versprechen-/Maßnahmen-Karten auf dem Handy einspaltig — überschreibt den Inline-Style
   grid-template-columns:repeat(2,1fr) (sonst 2 gequetschte, ungleich breite Spalten = „verzogen"). */
@media (max-width: 640px){ .cs-measures { grid-template-columns: 1fr !important; } }

/* results */
.cs-kpis { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.cs-kpi { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,34px); position:relative; overflow:hidden; }
.cs-kpi::after { content:""; position:absolute; inset:auto -20% -45% auto; width:60%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--mk, var(--emerald)), white 70%), transparent 70%); }
.cs-kpi b { font-family: var(--display); font-weight:800; font-size: clamp(2rem,3.6vw,2.9rem); letter-spacing:-0.02em; color: var(--emerald-deep); display:block; }
.cs-kpi span { display:block; margin-top:8px; color: var(--fir-soft); font-size:.97rem; line-height:1.45; position:relative; z-index:2; }
@media (max-width: 700px){ .cs-kpis { grid-template-columns:1fr; } }

/* quote */
.cs-quote { max-width: 860px; margin-inline:auto; text-align:center; }
.cs-quote blockquote { font-family: var(--display); font-weight:600; font-size: clamp(1.4rem,2.6vw,2.1rem); line-height:1.3; letter-spacing:-0.02em; color: var(--fir); }
.cs-quote blockquote span { color: var(--emerald-deep); }
.cs-quote figcaption { margin-top: 22px; color: var(--fir-dim); font-size:.95rem; }
.cs-quote figcaption b { color: var(--fir); display:block; font-size:1rem; }

/* seo prose */
.cs-seo { max-width: 780px; }
.cs-seo h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin-bottom: 16px; }
.cs-seo p { color: var(--fir-soft); font-size:1.04rem; line-height:1.7; }
.cs-seo p + p { margin-top: 16px; }
.cs-seo p a { color: var(--emerald-deep); text-decoration: underline; text-underline-offset:3px; }

/* prev / next pager */
.cs-pager { display:grid; grid-template-columns: 1fr 1fr; gap:18px; border-top:1px solid var(--line); padding-top: 34px; }
.cs-pager a { display:flex; flex-direction:column; gap:6px; padding: 20px 22px; border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cs-pager a:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -30px rgba(23,48,41,.4); }
.cs-pager a small { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color: var(--fir-dim); }
.cs-pager a b { font-family: var(--display); font-weight:700; font-size:1.08rem; color: var(--fir); }
.cs-pager a.next { text-align:right; align-items:flex-end; }
@media (max-width: 620px){ .cs-pager { grid-template-columns:1fr; } .cs-pager a.next { text-align:left; align-items:flex-start; } }

/* founder photo (home) */
.founder__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }

/* =========================================================================
   3D ORNAMENT (CSS only — rotating wireframe cube + rings)
   ========================================================================= */
.seosplit { display:grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px,5vw,72px); align-items:center; }
@media (max-width: 880px){ .seosplit { grid-template-columns: 1fr; } .seo3d { display:none; } }

.seo3d { position:relative; display:grid; place-items:center; min-height: 380px; perspective: 900px; }
.seo3d__ring { position:absolute; width: 78%; aspect-ratio:1; border-radius:50%; border:1px dashed color-mix(in oklab, var(--emerald), white 30%); animation: seo3d-spin 36s linear infinite; }
.seo3d__ring.r2 { width: 58%; border-style: solid; border-color: var(--line); animation-duration: 26s; animation-direction: reverse; }
.seo3d__ring::after { content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%; background: var(--emerald); box-shadow: 0 0 14px rgba(52,167,123,.8); }
@keyframes seo3d-spin { to { transform: rotate(360deg); } }

.cube3d { position:relative; width: 150px; height: 150px; transform-style: preserve-3d; animation: cube3d-rot 16s linear infinite; }
.cube3d i { position:absolute; inset:0; border: 2px solid var(--emerald-deep); background: color-mix(in oklab, var(--emerald), transparent 88%); border-radius: 6px; }
.cube3d i:nth-child(1){ transform: translateZ(75px); }
.cube3d i:nth-child(2){ transform: rotateY(180deg) translateZ(75px); }
.cube3d i:nth-child(3){ transform: rotateY(90deg) translateZ(75px); }
.cube3d i:nth-child(4){ transform: rotateY(-90deg) translateZ(75px); }
.cube3d i:nth-child(5){ transform: rotateX(90deg) translateZ(75px); border-color: var(--emerald); }
.cube3d i:nth-child(6){ transform: rotateX(-90deg) translateZ(75px); border-color: var(--emerald); }
@keyframes cube3d-rot { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } }

/* =========================================================================
   3D-WAHRZEICHEN (land3d) — Stadt-Landmarken als rotierende CSS-3D-Modelle
   Aufbau: .land3d > .bx (Quader, 6 Flächen) / .pyr (Pyramide, 4 Flächen)
   Vars je Element: --w --h --d (Maße) · --x (seitlich) · --y (Höhe ab Boden)
   ========================================================================= */
.land3d { position:relative; width: 250px; height: 310px; transform-style: preserve-3d; animation: land3d-rot 20s linear infinite; }
@keyframes land3d-rot { from { transform: rotateX(-13deg) rotateY(-18deg); } to { transform: rotateX(-13deg) rotateY(342deg); } }
.land3d .grnd { position:absolute; left:50%; bottom: 34px; width: 215px; height: 215px; margin-left:-107px; transform: translateY(50%) rotateX(90deg); border-radius:50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--emerald), transparent 72%), transparent 68%); border:1px dashed color-mix(in oklab, var(--emerald), white 35%); }
.land3d .bx, .land3d .pyr { position:absolute; left:50%; bottom: 34px; width: var(--w); transform-style: preserve-3d;
  margin-left: calc(var(--w) / -2); transform: translate3d(var(--x, 0px), calc(0px - var(--y, 0px)), 0px); }
.land3d .bx { height: var(--h); }
.land3d .pyr { height: var(--s); }
.land3d .bx b, .land3d .pyr b { position:absolute; backface-visibility: hidden; border: 1.5px solid var(--emerald-deep);
  background: color-mix(in oklab, var(--emerald), transparent 84%); }
.land3d .bx .ff, .land3d .bx .fb { left:50%; top:50%; width:var(--w); height:var(--h); margin: calc(var(--h)/-2) 0 0 calc(var(--w)/-2); }
.land3d .bx .ff { transform: translateZ(calc(var(--d)/2)); }
.land3d .bx .fb { transform: rotateY(180deg) translateZ(calc(var(--d)/2)); }
.land3d .bx .fl, .land3d .bx .fr { left:50%; top:50%; width:var(--d); height:var(--h); margin: calc(var(--h)/-2) 0 0 calc(var(--d)/-2);
  background: color-mix(in oklab, var(--emerald), transparent 76%); }
.land3d .bx .fl { transform: rotateY(-90deg) translateZ(calc(var(--w)/2)); }
.land3d .bx .fr { transform: rotateY(90deg) translateZ(calc(var(--w)/2)); }
.land3d .bx .ft { left:50%; top:50%; width:var(--w); height:var(--d); margin: calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
  transform: rotateX(90deg) translateZ(calc(var(--h)/2)); background: color-mix(in oklab, var(--emerald), transparent 68%); }
.land3d .pyr b { left:0; bottom:0; width:100%; height:100%; transform-origin: 50% 100%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); background: color-mix(in oklab, var(--emerald), transparent 74%); border:none;
  outline: 1.5px solid var(--emerald-deep); outline-offset: -1.5px; }
.land3d .pyr b:nth-child(1){ transform: rotateY(0deg)   translateZ(calc(var(--w)/2)) rotateX(var(--pa)); }
.land3d .pyr b:nth-child(2){ transform: rotateY(90deg)  translateZ(calc(var(--w)/2)) rotateX(var(--pa)); }
.land3d .pyr b:nth-child(3){ transform: rotateY(180deg) translateZ(calc(var(--w)/2)) rotateX(var(--pa)); }
.land3d .pyr b:nth-child(4){ transform: rotateY(270deg) translateZ(calc(var(--w)/2)) rotateX(var(--pa)); }

/* Varianten */
.land3d .bx.stripe b { background: repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 13px, color-mix(in oklab, var(--emerald), white 30%) 13px 26px); }
.land3d .bx.glass b { background: color-mix(in oklab, var(--emerald), transparent 90%); border-color: color-mix(in oklab, var(--emerald), white 18%); }
.land3d .bx.solid b { background: color-mix(in oklab, var(--emerald), transparent 70%); }
.land3d .bx.wave .ft { display:none; }
.land3d .bx.wave .ff, .land3d .bx.wave .fb { clip-path: polygon(0 16%, 9% 28%, 21% 18%, 33% 30%, 46% 14%, 59% 28%, 71% 12%, 84% 26%, 100% 6%, 100% 100%, 0 100%); }
.land3d .bx.wave .fl, .land3d .bx.wave .fr { clip-path: polygon(0 12%, 100% 12%, 100% 100%, 0 100%); }
/* Elbphilharmonie: Glasfassade mit Sprossen + Speicher mit Fensterraster */
.land3d .bx.elphi b { background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--emerald), transparent 90%) 0 9px, color-mix(in oklab, var(--emerald), transparent 76%) 9px 11px); border-color: color-mix(in oklab, var(--emerald), white 5%); }
.land3d .bx.elphi .fl, .land3d .bx.elphi .fr { background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--emerald), transparent 84%) 0 9px, color-mix(in oklab, var(--emerald), transparent 68%) 9px 11px); }
.land3d .bx.brick .ff, .land3d .bx.brick .fb { background: radial-gradient(circle, rgba(255,255,255,.65) 1.6px, transparent 2.2px) 4px 6px / 13px 15px, color-mix(in oklab, var(--emerald), transparent 70%); }
.land3d .bx.brick .fl, .land3d .bx.brick .fr { background: radial-gradient(circle, rgba(255,255,255,.55) 1.6px, transparent 2.2px) 4px 6px / 13px 15px, color-mix(in oklab, var(--emerald), transparent 62%); }
.land3d .bx .deco { left:50%; top:50%; width: calc(var(--w) * .52); height: calc(var(--w) * .52); border-radius:50%;
  margin: calc(var(--w) * -.26) 0 0 calc(var(--w) * -.26); transform: translateZ(calc(var(--d)/2 + 1px)) translateY(calc(var(--h)/-2 + var(--w) * .42));
  background: #fff; border:1.5px solid var(--emerald-deep); }
.land3d .bx .deco::after { content:""; position:absolute; left:50%; top:50%; width:38%; height:38%; margin:-19% 0 0 -19%;
  background: radial-gradient(circle, var(--emerald-deep) 18%, transparent 20%),
    conic-gradient(from 0deg, var(--emerald-deep) 0 8deg, transparent 8deg 120deg, var(--emerald-deep) 120deg 128deg, transparent 128deg); border-radius:50%; }
.land3d .beacon { position:absolute; left:50%; bottom:34px; width: 14px; height:14px; margin-left:-7px; border-radius:50%;
  transform: translateY(calc(0px - var(--y,0px))); background: #fff;
  box-shadow: 0 0 18px 6px color-mix(in oklab, var(--emerald), white 20%); animation: beacon-pulse 2.4s ease-in-out infinite; }
@keyframes beacon-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce){ .land3d, .land3d .beacon { animation: none; } }

.seo3d__chip { position:absolute; background:#fff; border:1px solid var(--line); border-radius: 13px; padding: 10px 15px; font-size:.84rem; font-weight:700; color: var(--fir); box-shadow: 0 18px 40px -22px rgba(23,48,41,.45); display:flex; gap:9px; align-items:center; animation: seo3d-float 5.5s ease-in-out infinite; }
.seo3d__chip svg { color: var(--emerald-deep); flex:none; }
.seo3d__chip small { display:block; font-weight:500; color: var(--fir-dim); font-size:.74rem; }
.seo3d__chip.c1 { top: 10%; left: 0; }
.seo3d__chip.c2 { bottom: 12%; right: 0; animation-delay: -2.8s; }
@keyframes seo3d-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .cube3d, .seo3d__ring, .seo3d__chip { animation: none; } }

/* =========================================================================
   OFFER FORM (Angebot.html)
   ========================================================================= */
.oform { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px,3.4vw,40px); box-shadow: 0 34px 80px -50px rgba(23,48,41,.45); }
.oform h2 { font-family: var(--display); font-weight:800; font-size: 1.4rem; letter-spacing:-0.02em; margin-bottom: 6px; }
.oform > p { color: var(--fir-dim); font-size:.92rem; margin-bottom: 22px; }
.oform label { display:block; font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--fir-dim); margin: 16px 0 7px; }
.oform input, .oform select, .oform textarea { width:100%; font: inherit; font-size:.98rem; color: var(--fir); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .25s; }
.oform input:focus, .oform select:focus, .oform textarea:focus { outline:none; border-color: var(--emerald-deep); }
.oform textarea { min-height: 96px; resize: vertical; }
.oform__row { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px){ .oform__row { grid-template-columns: 1fr; } }
.oform .btn { width:100%; justify-content:center; margin-top: 24px; }
.oform__privacy { margin-top: 14px; font-size:.78rem; color: var(--fir-dim); text-align:center; }
.oform__privacy a { color: var(--emerald-deep); }
.oform__thanks { display:none; text-align:center; padding: 40px 10px; }
.oform__thanks .ok { width: 64px; height:64px; border-radius:50%; background: var(--mist); color: var(--emerald-deep); display:grid; place-items:center; margin: 0 auto 18px; }
.oform__thanks h2 { margin-bottom: 10px; }
.oform__thanks p { color: var(--fir-soft); font-size:.98rem; max-width: 40ch; margin-inline:auto; }
.oform.done form { display:none; }
.oform.done .oform__thanks { display:block; }