/* =============================================================
   1. Tokens
   ============================================================= */
@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mesh-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --mesh-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

:root {
  --bg: #04201F;
  --bg-2: #072B2A;
  --bg-3: #0B3837;
  --ice: #E8F1EF;
  --ice-2: #C9DAD7;
  --mute: #9DB5B2;
  --accent: #3DDBC4;
  --accent-2: #2BB3A3;
  --silver: #C0C0C0;
  --sand: #A79C8C;
  --line: rgba(232, 241, 239, .14);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
  --gutter: clamp(20px, 5vw, 56px);
  --nav-h: 72px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  background: var(--bg); color: var(--ice);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.1; letter-spacing: -.01em; font-weight: 500; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--ice); color: var(--bg); z-index: 9999; border-radius: 8px; font-weight: 500; }
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities & type
   ============================================================= */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 128px); position: relative; }
.eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 18px; }
.h2 { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--ice); margin-bottom: 20px; }
.lead { color: var(--ice-2); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 56ch; }
.caption { margin-top: 14px; font-size: 14px; color: var(--mute); }
.center { text-align: center; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; min-height: 52px; font-size: 16px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }
.btn-accent { background: var(--accent); color: #032321; box-shadow: 0 10px 30px rgba(61, 219, 196, .22); }
.btn-accent:hover { box-shadow: 0 18px 44px rgba(61, 219, 196, .38); }
.btn-ghost { border-color: rgba(232, 241, 239, .4); color: var(--ice); }
.btn-ghost:hover { background: rgba(232, 241, 239, .08); border-color: var(--ice); }
.btn-sm { padding: 10px 20px; min-height: 44px; font-size: 15px; }
.btn-block { width: 100%; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color .4s var(--ease-out), backdrop-filter .4s, box-shadow .4s; }
.nav.is-scrolled { background: rgba(4, 32, 31, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-inner { max-width: 1180px; margin: 0 auto; height: var(--nav-h); padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; }
.brand-name { font-family: var(--serif); font-size: 26px; letter-spacing: .3em; color: #fff; }
.brand-sub { font-size: 12px; letter-spacing: .22em; color: var(--silver); }
.nav-links { display: none; gap: 30px; }
.nav-link { position: relative; font-size: 15px; color: var(--ice-2); padding: 4px 0; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-soft); }
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 960px) { .nav-links { display: flex; } }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--silver)); transform-origin: 0 0; transform: scaleX(0); }

/* =============================================================
   6. Hero
   ============================================================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + 40px) 0 72px; }
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); animation: ambientZoom 32s ease-in-out infinite; }
.hero-tint { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4, 32, 31, .94) 0%, rgba(4, 32, 31, .74) 50%, rgba(4, 32, 31, .32) 100%); }
.hero-mesh { position: absolute; inset: -10%; z-index: -2; background:
  radial-gradient(60% 50% at var(--mesh-x) var(--mesh-y), rgba(61, 219, 196, .34), transparent 62%),
  conic-gradient(from var(--mesh-angle), rgba(61, 219, 196, .16), rgba(192, 192, 192, .1), rgba(43, 179, 163, .2), rgba(61, 219, 196, .16));
  filter: blur(80px) saturate(120%); opacity: .75; mix-blend-mode: screen; animation: meshShift 24s linear infinite; }
.hero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.hero-meta { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ice-2); margin-bottom: 28px; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(61, 219, 196, .6); animation: pulse 2.6s ease-out infinite; }
.hero-title { font-family: var(--serif); font-size: clamp(2.5rem, 7.4vw, 6rem); line-height: 1.02; max-width: 16ch; color: #fff; margin-bottom: 28px; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub { max-width: 52ch; color: var(--ice-2); font-size: clamp(1.02rem, 1.5vw, 1.25rem); margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }
.hero-facts { list-style: none; padding: 0; display: grid; gap: 18px; max-width: 760px; }
.hero-facts li { padding-left: 16px; border-left: 2px solid var(--accent); display: flex; flex-direction: column; }
.hero-facts strong { font-size: 15px; font-weight: 600; color: #fff; }
.hero-facts span { font-size: 14px; color: var(--mute); }
@media (min-width: 720px) { .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

@keyframes meshShift {
  0% { --mesh-angle: 0deg; --mesh-x: 28%; --mesh-y: 40%; }
  50% { --mesh-angle: 180deg; --mesh-x: 72%; --mesh-y: 62%; }
  100% { --mesh-angle: 360deg; --mesh-x: 28%; --mesh-y: 40%; }
}
@keyframes ambientZoom { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(1.12) translate3d(-1%, -1%, 0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 219, 196, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(61, 219, 196, 0); } }

.has-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 220px 220px; }

/* =============================================================
   7. Marquee
   ============================================================= */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-2); padding: 18px 0; position: relative; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-2), transparent); }
.marquee-track { display: inline-flex; gap: 2.2rem; white-space: nowrap; width: max-content; font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--ice-2); animation: marquee 48s linear infinite; }
.marquee-track i { color: var(--accent); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =============================================================
   8. Before / after
   ============================================================= */
.transform { background: var(--bg); }
.transform-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .transform-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.ticks { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ice-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-50%); }
.ba-wrap { max-width: 520px; width: 100%; margin-inline: auto; }
.ba { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--bg-3); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(61, 219, 196, .8); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--accent); color: #032321; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.ba-tag { position: absolute; top: 14px; padding: 6px 11px; font-size: 11px; letter-spacing: .2em; font-weight: 600; background: rgba(4, 32, 31, .82); color: #fff; border-radius: 3px; pointer-events: none; }
.ba-tag-l { left: 14px; } .ba-tag-r { right: 14px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }

/* =============================================================
   9. Mesh sections + glass card
   ============================================================= */
.section-mesh { overflow: hidden; isolation: isolate; background: var(--bg-2); }
.section-mesh::before { content: ""; position: absolute; inset: -10%; z-index: -1; background:
  radial-gradient(55% 45% at var(--mesh-x) var(--mesh-y), rgba(61, 219, 196, .22), transparent 62%),
  conic-gradient(from var(--mesh-angle), rgba(61, 219, 196, .1), rgba(192, 192, 192, .06), rgba(43, 179, 163, .14), rgba(61, 219, 196, .1));
  filter: blur(90px); animation: meshShift 28s linear infinite; }
.card-glass { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: clamp(22px, 3.2vw, 36px); }
@supports (backdrop-filter: blur(16px)) { .card-glass { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } }

/* =============================================================
   10. Calculator
   ============================================================= */
.calc-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .calc-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.lbl { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ice-2); margin-bottom: 8px; padding: 0; }
.input { width: 100%; padding: 15px 16px; min-height: 52px; font-size: 18px; background: rgba(4, 32, 31, .6); border: 1px solid var(--line); border-radius: 10px; color: #fff; }
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(61, 219, 196, .25); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
select.input option { color: #032321; background: #fff; }
.fs { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 12px 16px; min-height: 44px; font-size: 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ice-2); background: transparent; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-soft); }
.pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.pill.is-on { background: var(--accent); color: #032321; border-color: var(--accent); font-weight: 600; }
.result { margin: 26px 0 22px; padding: 22px; border-radius: 12px; background: rgba(4, 32, 31, .55); border-left: 3px solid var(--accent); }
.result .eyebrow { margin-bottom: 8px; color: var(--silver); }
.result-num { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; color: #fff; margin-bottom: 10px; }
.result-note { font-size: 14px; color: var(--ice-2); margin-top: 6px; }
.result-fine { font-size: 13px; color: var(--mute); margin-top: 10px; }

/* =============================================================
   11. Services showcase (pinned horizontal on desktop)
   ============================================================= */
.showcase { background: var(--bg); position: relative; }
.showcase-sticky { padding-block: clamp(64px, 8vw, 96px); }
.showcase-head { margin-bottom: 36px; }
.showcase-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 28px; -webkit-overflow-scrolling: touch; }
.svc { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; background: var(--bg-3); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; isolation: isolate; }
.svc h3 { font-family: var(--serif); font-size: 1.55rem; color: #fff; margin: 10px 0 12px; }
.svc p { color: var(--ice-2); font-size: 15.5px; flex: 1; }
.svc-n { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.svc-cta { margin-top: 22px; font-weight: 600; color: var(--accent); transition: letter-spacing .3s var(--ease-soft); }
.svc-cta:hover { letter-spacing: .04em; }
.svc-main, .svc-photo { padding: 0; }
.svc-main img, .svc-photo img { width: 100%; height: 220px; object-fit: cover; }
.svc-main .svc-body, .svc-photo .svc-body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.svc-main { flex-basis: min(88vw, 420px); background: linear-gradient(160deg, #0B3F3C, var(--bg-3)); border-color: rgba(61, 219, 196, .4); }
.tilt { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .55s var(--ease-soft), box-shadow .4s; }
.tilt:hover { transition-duration: .15s; box-shadow: 0 30px 60px -20px rgba(61, 219, 196, .25); }
.tilt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 219, 196, .2), transparent 62%); opacity: 0; transition: opacity .35s; mix-blend-mode: screen; pointer-events: none; }
.tilt:hover::before { opacity: 1; }
@media (min-width: 960px) {
  .showcase.is-pinned .showcase-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: calc(var(--nav-h) + 12px) 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
  .showcase.is-pinned .showcase-track { overflow: visible; scroll-snap-type: none; width: max-content; padding-bottom: 0; will-change: transform; }
  .svc { flex-basis: 360px; min-height: 400px; }
  .svc-main { flex-basis: 520px; }
  .svc-main img, .svc-photo img { height: 240px; }
}

/* =============================================================
   12. Glass section
   ============================================================= */
.glass-sec { background: var(--bg-2); }
.glass-head { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
.glass-head .lead { margin-bottom: 0; }
.trio { display: grid; gap: 18px; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio-col { display: flex; flex-direction: column; gap: 14px; }
.trio-label { font-size: 12px; letter-spacing: .26em; color: var(--accent); font-weight: 600; }
.trio-col img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.trio-col img.tall { height: 574px; }
@media (max-width: 759px) { .trio-col img.tall { height: 360px; } }

/* =============================================================
   13. Process
   ============================================================= */
.process { background: var(--bg); }
.steps { list-style: none; padding: 0; margin-top: 56px; display: grid; gap: 36px; position: relative; --p: 0; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: var(--line); }
  .steps::after { content: ""; position: absolute; left: 24px; top: 24px; height: 2px; width: calc((100% - 48px) * var(--p)); background: var(--accent); box-shadow: 0 0 14px rgba(61, 219, 196, .7); }
}
.steps li { position: relative; z-index: 1; }
.step-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--accent); color: var(--accent); font-family: var(--serif); font-size: 1.3rem; margin-bottom: 18px; }
.steps h3 { font-size: 1.2rem; font-family: var(--sans); font-weight: 600; color: #fff; margin-bottom: 8px; }
.steps p { color: var(--ice-2); font-size: 15px; }

/* =============================================================
   14. Zones + FAQ
   ============================================================= */
.faq-sec { background: var(--bg-2); }
.faq-grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chips span { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--ice-2); }
.guarantee { padding: 24px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .05); border-radius: 0 12px 12px 0; }
.guarantee strong { display: block; font-size: 18px; color: #fff; margin-bottom: 6px; }
.guarantee p { color: var(--ice-2); font-size: 15px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-size: 18px; font-weight: 600; color: #fff; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 26px; line-height: 1; transition: transform .35s var(--ease-soft); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--ice-2); }

/* =============================================================
   15. CTA + form
   ============================================================= */
.cta { background: var(--bg); text-align: center; }
.cta-inner { max-width: 760px; }
.cta-title { max-width: 18ch; margin-inline: auto; }
.cta .lead { margin: 0 auto 36px; }
.cta-form { text-align: left; display: grid; gap: 18px; margin-bottom: 16px; position: relative; }
.btn-send { position: relative; overflow: hidden; }
.send-spin, .send-check { position: absolute; inset: 0; margin: auto; opacity: 0; pointer-events: none; }
.send-spin { width: 22px; height: 22px; border: 2px solid rgba(3, 35, 33, .3); border-top-color: #032321; border-radius: 50%; }
.send-check { width: 26px; height: 26px; }
.send-check path { stroke: #032321; stroke-width: 2.4; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset .55s var(--ease-out); }
.cta-form.is-sending .send-label { opacity: 0; }
.cta-form.is-sending .send-spin { opacity: 1; animation: spin .9s linear infinite; }
.cta-form.is-sent .send-label { opacity: 0; }
.cta-form.is-sent .send-check { opacity: 1; }
.cta-form.is-sent .send-check path { stroke-dashoffset: 0; }
.form-ok { text-align: center; color: var(--ice-2); font-size: 15px; }
.form-ok a { color: var(--accent); text-decoration: underline; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================
   16. Footer + FAB
   ============================================================= */
.footer { border-top: 1px solid var(--line); background: var(--bg); padding: 48px 0 96px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; color: var(--ice-2); font-size: 15px; }
.footer-inner a { color: var(--accent); font-weight: 600; }
.footer-inner p { margin-top: 8px; color: var(--mute); font-size: 14px; max-width: 42ch; }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 999px; background: #25D366; color: #052E16; font-weight: 700; font-size: 15px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); transition: transform .3s var(--ease-soft); }
.fab:hover { transform: scale(1.06); }

/* =============================================================
   17. Reveals (content visible without JS)
   ============================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
.split-word { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.is-split.is-revealed .split-word { opacity: 1; transform: none; }

/* Reduced motion: only the intrusive loops */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-bg img { animation: none; }
  .dot { animation: none; }
}

.svc[data-n]::after { content: attr(data-n); position: absolute; right: 18px; bottom: 4px; z-index: -1; font-family: var(--serif); font-size: 150px; line-height: 1; color: rgba(61, 219, 196, .08); pointer-events: none; }

@media (max-width: 539px) { .fab span { display: none; } .fab { padding: 12px 14px; width: 52px; height: 52px; justify-content: center; } }

.hero-label { position: absolute; right: var(--gutter); bottom: 18px; z-index: 2; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice-2); background: rgba(4, 32, 31, .7); padding: 6px 10px; border-radius: 3px; }

.svc-imgwrap { position: relative; }
.svc-imgwrap img { display: block; }
.svc-tag { position: absolute; left: 12px; bottom: 12px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); background: rgba(4, 32, 31, .78); padding: 5px 9px; border-radius: 3px; }

.svc-slides { position: relative; height: 220px; overflow: hidden; }
.svc-main .svc-slides img, .svc-photo .svc-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.svc-slides img.is-on { opacity: 1; }
.svc-dots { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.svc-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: rgba(232,241,239,.45); cursor: pointer; }
.svc-dots button.is-on { background: var(--accent); }
@media (max-width: 959px) { .svc-slides { height: 240px; } }

.vcat { display: grid; gap: 18px; margin-bottom: 72px; }
@media (min-width: 860px) { .vcat { grid-template-columns: repeat(3, 1fr); } }
.vcat-card { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.vcat-card .svc-slides { height: 260px; }
.vcat-card .svc-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.vcat-card .svc-slides img.is-on { opacity: 1; }
.vcat-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vcat-body h3 { font-family: "Playfair Display", serif; font-weight: 500; font-size: 22px; line-height: 1.2; }
.vcat-body p { color: var(--muted, rgba(232,241,239,.72)); font-size: 15px; line-height: 1.55; flex: 1; }
.glass-sub { margin-bottom: 28px; }
.glass-sub .h3 { font-family: "Playfair Display", serif; font-weight: 500; font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.glass-sub .lead { margin: 0; }

.svc-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.svc-video-glass video { object-position: 50% 58%; }

.vids-sec { background: var(--bg); }
.vids { display: grid; gap: 28px; justify-content: center; grid-template-columns: minmax(0, 340px); }
@media (min-width: 760px) { .vids { grid-template-columns: repeat(2, minmax(0, 340px)); gap: 40px; } }
.vid-card { margin: 0; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vid-card video { display: block; width: 100%; aspect-ratio: 704 / 1280; object-fit: cover; background: #000; }
.vid-card figcaption { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 18px; }
.vid-card figcaption strong { font-family: "Playfair Display", serif; font-weight: 500; font-size: 18px; }
.vid-card figcaption span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

.trio-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .trio-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .trio-4 { grid-template-columns: repeat(4, 1fr); } }
.trio-col video { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #000; }
.trio-col video.tall { height: 574px; }
@media (max-width: 759px) { .trio-col video.tall { height: 420px; } }

.trio-col .dur-img { height: 280px; }

/* Móvil / táctil: sin animaciones de malla ni blur pesado en el primer pantallazo */
@media (max-width: 900px), (hover: none) {
  .hero-mesh { animation: none; filter: none; mix-blend-mode: normal; opacity: .55; inset: 0;
    background: radial-gradient(70% 55% at 35% 40%, rgba(61, 219, 196, .30), transparent 65%), radial-gradient(60% 50% at 75% 65%, rgba(43, 179, 163, .18), transparent 65%); }
  .section-mesh::before { animation: none; filter: none; inset: 0;
    background: radial-gradient(60% 45% at 40% 40%, rgba(61, 219, 196, .16), transparent 65%); }
  .hero-grain, .has-grain::after { display: none; }
  .card-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8, 52, 50, .82); }
  .nav.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 32, 31, .94); }
}

.svc-stone { background: #1c2b2a; }
.svc-stone svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stone-steps { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.stone-steps li { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 9px; font-size: 12px; color: #fff; background: rgba(4, 32, 31, .78); border: 1px solid var(--line); border-radius: 8px; }
.stone-steps b { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--accent); line-height: 1; }

.svc-video-stone video { object-position: 50% 30%; }

.calc-id { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 560px) { .calc-id { grid-template-columns: 1fr 1fr; } }
.calc-hint { margin-top: 12px; font-size: 14px; color: var(--accent); }

/* Hero: video del proceso como fondo */
.hero-bg { background: #04201f; }
.hero-bg video { width: 100%; height: 100%; object-fit: contain; object-position: 60% 50%; display: block; }
@media (max-width: 900px) { .hero-bg video { object-fit: cover; object-position: 30% 50%; transform: scale(.92); } }
.hero-tint { background: linear-gradient(100deg, rgba(4, 32, 31, .88) 0%, rgba(4, 32, 31, .58) 50%, rgba(4, 32, 31, .3) 100%); }
@media (max-width: 900px) { .hero-tint { background: linear-gradient(180deg, rgba(4, 32, 31, .8) 0%, rgba(4, 32, 31, .62) 100%); } }
@media (prefers-reduced-motion: reduce) { .hero-bg video { display: none; } .hero-bg { background: url("assets/piso-proceso-poster.webp") 0% 50% / cover; } }

/* Calculadora paso a paso */
.wiz-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-bottom: 10px; font-size: 13px; letter-spacing: .08em; color: var(--mute); }
.wiz-back { padding: 6px 4px; font-size: 14px; color: var(--ice-2); }
.wiz-back:hover { color: var(--accent); }
.wiz-progress { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); margin-bottom: 26px; overflow: hidden; }
.wiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--silver)); transform-origin: 0 0; transform: scaleX(.1667); transition: transform .5s var(--ease-out); }
.wiz-step { animation: wizIn .45s var(--ease-out) both; }
.wiz-step[hidden] { display: none; }
.wiz-q { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 3.2vw, 1.8rem); line-height: 1.2; color: #fff; margin-bottom: 18px; }
.wiz-ack { margin: 14px 0 20px; font-size: 14px; color: var(--ice-2); }
.wiz-step .btn-block { margin-top: 6px; }
.wiz-step .result { margin-top: 4px; }
.wiz-restart { display: block; margin: 14px auto 0; font-size: 14px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.wiz-restart:hover { color: var(--accent); }
.calc-trust { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.calc-trust li { padding-left: 16px; border-left: 2px solid var(--accent); font-size: 15px; color: var(--ice-2); }
@keyframes wizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wiz-step { animation: none; } .wiz-progress span { transition: none; } }

/* Pasa la máquina */
.wipe { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--bg-3); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none; }
.wipe-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.wipe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; transition: opacity .9s var(--ease-out); }
.wipe-canvas:active { cursor: grabbing; }
.wipe.is-clean .wipe-canvas { opacity: 0; pointer-events: none; }
.wipe-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: #fff; background: rgba(4, 32, 31, .82); border: 1px solid var(--line); pointer-events: none; transition: opacity .4s; animation: wipeNudge 2.4s ease-in-out infinite; }
.wipe.is-started .wipe-hint, .wipe.is-clean .wipe-hint { opacity: 0; animation: none; }
.wipe-result { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 10px); padding: 11px 18px; border-radius: 999px; font-family: var(--serif); font-size: 18px; color: #032321; background: var(--accent); opacity: 0; pointer-events: none; transition: opacity .6s .5s, transform .6s .5s var(--ease-out); }
.wipe.is-clean .wipe-result { opacity: 1; transform: translate(-50%, 0); }
.wipe-skip { position: absolute; top: 12px; right: 12px; padding: 7px 12px; font-size: 12px; letter-spacing: .06em; color: var(--ice-2); background: rgba(4, 32, 31, .78); border: 1px solid var(--line); border-radius: 999px; transition: opacity .3s, color .2s; }
.wipe-skip:hover { color: var(--accent); }
.wipe.is-clean .wipe-skip { opacity: 0; pointer-events: none; }
@keyframes wipeNudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% + 6px)); } }
@media (prefers-reduced-motion: reduce) { .wipe-hint { animation: none; } .wipe-canvas { transition: none; } }

/* Interruptor de sonidos */
.snd-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ice-2); background: rgba(4, 32, 31, .82); border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.snd-toggle:hover { color: var(--accent); border-color: var(--accent); }
.snd-toggle .snd-off { display: none; }
.snd-toggle.is-off .snd-on { display: none; }
.snd-toggle.is-off .snd-off { display: inline; }
.snd-toggle.is-off { color: var(--mute); }

/* Resultado: fondo con brillo sutil de limpieza */
.transform { overflow: hidden; isolation: isolate; }
.clean-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sheen { position: absolute; top: -20%; bottom: -20%; left: -30%; width: 34%; opacity: 0; background: linear-gradient(100deg, transparent, rgba(232, 241, 239, .16) 42%, rgba(61, 219, 196, .24) 56%, transparent); transform: translateX(0) skewX(-18deg); animation: sheen 12s ease-in-out infinite; will-change: transform, opacity; }
.glint { position: absolute; width: calc(var(--s, 14px) * 1.9); height: calc(var(--s, 14px) * 1.9); opacity: 0; animation: glint 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.glint::before, .glint::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.glint::before { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent); box-shadow: 0 0 10px 2px rgba(190, 255, 245, .55); }
.glint::after { width: 2px; height: 100%; background: linear-gradient(180deg, transparent, rgba(232, 241, 239, .95), transparent); }
@keyframes sheen { 0%, 45% { transform: translateX(0) skewX(-18deg); opacity: 0; } 52% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(560%) skewX(-18deg); opacity: 0; } }
@keyframes glint { 0%, 68%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 92% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@media (max-width: 700px) { .glint:nth-child(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .sheen, .glint { animation: none; opacity: 0; } }

/* Hero: video enmarcado (no distrae la lectura) */
.hero-bg video { display: none; }
.hero-tint { background: linear-gradient(120deg, rgba(4, 32, 31, .96), rgba(6, 48, 45, .9)); }
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-media { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(232, 241, 239, .16); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); background: #04201f; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; display: block; }
.hero-media figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; color: #e8f1ef; background: rgba(4, 32, 31, .7); }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 32px; } .hero-media { aspect-ratio: 16 / 10; max-height: none; } }
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } .hero-media { background: url("assets/piso-proceso-poster.webp") 20% 50% / cover; } }
.hero-inner { grid-template-columns: 1.35fr .65fr; gap: 40px; }
.hero-title { font-size: clamp(38px, 5.2vw, 76px); }
.hero-media { aspect-ratio: 3 / 4; max-height: 440px; }
@media (max-width: 900px) { .hero-media { aspect-ratio: 16 / 10; max-height: none; } }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 28px; } .hero-media { width: 100%; } }

/* Hero: dos procesos */
.hero-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hero-media video.is-on { opacity: 1; }
.hero-media figcaption { left: 14px; top: 14px; bottom: auto; }
.hm-tabs { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(4, 32, 31, .72); z-index: 2; }
.hm-tabs button { flex: 1; border: 0; padding: 9px 8px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: #e8f1ef; background: transparent; cursor: pointer; }
.hm-tabs button.is-on { background: var(--accent); color: #04201f; }
/* Servicios: carrusel lateral con guía */
.showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sc-ctrl { display: flex; align-items: center; gap: 14px; }
.sc-hint { font-size: 13px; letter-spacing: .06em; color: var(--ice-2); }
.sc-hint b { display: inline-block; color: var(--accent); animation: scNudge 1.4s ease-in-out infinite; }
@keyframes scNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.sc-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232, 241, 239, .28); background: rgba(4, 32, 31, .6); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.sc-btn:hover:not(:disabled) { background: var(--accent); color: #04201f; }
.sc-btn:disabled { opacity: .3; cursor: default; }
.sc-count { font-size: 13px; color: var(--ice-2); min-width: 42px; text-align: center; }
.showcase-track { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; scroll-padding-left: var(--gutter); }
.showcase-track::-webkit-scrollbar { height: 6px; } .showcase-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }
@media (max-width: 560px) { .sc-btn { display: none; } }
.showcase-head { flex-direction: column; align-items: flex-start; gap: 14px; }

/* Recorte que se abre (clip-path) */
.js .rc { clip-path: inset(0 0 100% 0 round 18px); transition: clip-path 1.2s cubic-bezier(.65, 0, .25, 1); }
.js .rc.is-open { clip-path: inset(0 0 0 0 round 18px); }
.js .rc-hero { clip-path: inset(0 0 0 100% round 22px); transition-delay: .35s; }
.js .rc-hero.is-open { clip-path: inset(0 0 0 0 round 22px); }
/* Máscara: el color sube por dentro de la letra */
.js .hero-title em, .js .hero-title em .split-word { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(to top, var(--accent) 50%, rgba(232, 241, 239, .22) 50%) 0 0 / 100% 200% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 1.6s cubic-bezier(.65, 0, .25, 1) .9s, opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .hero-title.is-revealed em, .js .hero-title.is-revealed em .split-word { background-position: 0 100%; }
@media (prefers-reduced-motion: reduce) { .js .rc, .js .rc-hero { clip-path: none; transition: none; } .js .hero-title em, .js .hero-title em .split-word { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); } }

/* Calculadora: recuadro de enfoque */
.calc-device { position: relative; padding: clamp(20px, 4vw, 34px); border-radius: 26px; border: 1px solid rgba(61, 219, 196, .35); background: linear-gradient(165deg, rgba(11, 63, 60, .82), rgba(4, 32, 31, .92)); box-shadow: 0 0 0 6px rgba(61, 219, 196, .06), 0 40px 90px -30px rgba(0, 0, 0, .7), 0 0 80px -20px rgba(61, 219, 196, .28); }
.calc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.calc-head strong { display: block; font-family: var(--serif); font-size: 1.25rem; color: #fff; font-weight: 500; }
.calc-head span:not(.calc-badge) { font-size: 13px; color: var(--ice-2); }
.calc-badge { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: rgba(61, 219, 196, .12); border: 1px solid rgba(61, 219, 196, .35); }
.calc-screen { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 14px 18px; margin-bottom: 20px; border-radius: 14px; background: #04201f; border: 1px solid rgba(61, 219, 196, .28); box-shadow: inset 0 2px 14px rgba(0, 0, 0, .5); font-family: ui-monospace, Menlo, Consolas, monospace; }
.calc-screen small { grid-column: 1 / -1; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.calc-screen output { font-size: clamp(1.5rem, 6vw, 2rem); color: var(--accent); text-shadow: 0 0 14px rgba(61, 219, 196, .45); }
.calc-screen em { font-style: normal; font-size: 12.5px; color: var(--ice-2); }
.calc-art { display: none; max-width: 230px; margin-top: 34px; opacity: .95; filter: drop-shadow(0 20px 40px rgba(61, 219, 196, .18)); }
@media (min-width: 960px) { .calc-art { display: block; } }
@media (max-width: 700px) {
  .calc-grid { gap: 26px; }
  .calc-device { margin-inline: -4px; }
  .calc-device .input, .calc-device .pill { font-size: 17px; }
  .calc-device .input { padding-block: 16px; }
}

/* Aviso de desliz más visible */
.sc-hint { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: #04201f; background: var(--accent); box-shadow: 0 0 0 0 rgba(61, 219, 196, .6); animation: scPulse 2s ease-out infinite; transition: opacity .4s; }
.sc-hint b { color: #04201f; font-size: 17px; animation: scNudgeL 1.1s ease-in-out infinite; }
.sc-hint b.r { animation-name: scNudge; }
.sc-hand { font-style: normal; display: inline-block; animation: scSwipe 1.8s ease-in-out infinite; }
@keyframes scPulse { 0% { box-shadow: 0 0 0 0 rgba(61, 219, 196, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(61, 219, 196, 0); } }
@keyframes scNudgeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes scSwipe { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(8px); } }
.showcase-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
@media (prefers-reduced-motion: reduce) { .sc-hint, .sc-hint b, .sc-hand { animation: none; } }

/* Crossfade entre pasos */
.wiz-step { transition: opacity .17s ease; }
.wiz-step.is-out { opacity: 0; animation: none; pointer-events: none; }
/* Enfoque: lo demás se desenfoca mientras llenas la calculadora */
.calc-copy { transition: opacity .5s ease, filter .5s ease; }
.calc-sec.is-focusing .calc-copy { opacity: .35; filter: blur(4px); }
@media (max-width: 959px), (hover: none) { .calc-sec.is-focusing .calc-copy { filter: none; opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .wiz-step, .calc-copy { transition: none; } .calc-sec.is-focusing .calc-copy { filter: none; opacity: 1; } }