:root {
  --ink: #0b1711;
  --forest: #0d2a1d;
  --forest-2: #123826;
  --green: #267248;
  --green-bright: #4ca66d;
  --lime: #b4e85f;
  --paper: #f2f0e9;
  --paper-2: #e8e5da;
  --white: #fffef9;
  --basalt: #a58b4d;
  --line: rgba(11, 23, 17, 0.16);
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--lime); color: var(--forest); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--green); }
.eyebrow-light { color: rgba(255,255,255,.72); }
.eyebrow-light::before { background: var(--lime); }
.page-index { display: block; color: rgba(11,23,17,.45); font: 600 11px/1 var(--body); letter-spacing: .16em; }

.button { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; border: 1px solid transparent; border-radius: 2px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 18px; font-weight: 400; }
.button-small { min-height: 42px; padding: 0 16px; gap: 14px; font-size: 11px; }
.button-green { background: var(--lime); color: var(--forest); }
.button-green:hover { background: #c5f77a; }
.button-dark { background: var(--forest); color: var(--white); }
.button-light { background: var(--white); color: var(--forest); }
.button-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.button-large { min-height: 62px; padding-inline: 30px; }
.text-link { display: inline-flex; align-items: center; gap: 34px; border-bottom: 1px solid var(--ink); padding: 12px 0; font-size: 13px; font-weight: 700; }
.text-link span { font-size: 18px; font-weight: 400; }
.text-link-light { border-color: rgba(255,255,255,.5); color: white; }

/* Header and logo */
.site-header { position: relative; z-index: 50; height: 78px; background: rgba(242,240,233,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { width: min(100%, 1600px); height: 100%; margin: 0 auto; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { flex: none; display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { position: relative; width: 33px; height: 30px; border: 3px solid var(--ink); border-top: 0; border-radius: 1px 1px 4px 4px; margin-top: 6px; }
.brand-mark::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: -10px; border-left: 4px solid var(--green); border-top: 4px solid var(--green); border-radius: 3px 0 0; transform: rotate(45deg); }
.brand-mark::after { content: ""; position: absolute; width: 4px; height: 10px; right: 3px; top: -8px; background: var(--green); border-radius: 1px; }
.brand-mark span { position: absolute; z-index: 2; width: 15px; height: 21px; left: 6px; bottom: -3px; border-radius: 2px 8px 2px 2px; background: repeating-linear-gradient(0deg, #8c733e 0 2px, #bea25e 2px 4px); box-shadow: inset -3px 0 rgba(63,48,21,.16); }
.brand-name { display: flex; align-items: baseline; gap: 4px; font-family: var(--display); font-size: 17px; line-height: 1; letter-spacing: -.02em; }
.brand-name strong { font-weight: 900; }
.brand-name em { color: var(--green); font-style: normal; font-weight: 800; }
.desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); margin-left: auto; }
.desktop-nav a { position: relative; font-size: 12px; font-weight: 600; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--green); transition: right .2s ease; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.language-switch { display: flex; gap: 10px; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.language-switch span { opacity: .35; }
.language-switch .is-active { opacity: 1; color: var(--green); }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { width: 42px; height: 42px; display: grid; align-content: center; gap: 7px; padding: 11px; background: var(--forest); cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { height: 1px; background: white; }
.mobile-menu nav { position: absolute; top: 50px; right: 0; width: min(340px, calc(100vw - 28px)); padding: 24px; display: grid; gap: 18px; background: var(--forest); color: white; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.mobile-menu nav > a:not(.button) { font: 700 22px/1.1 var(--display); }

/* Cinematic home header */
.site-header-overlay { position: absolute; inset: 0 0 auto; color: white; background: linear-gradient(180deg, rgba(4,18,11,.72), transparent); border-bottom-color: rgba(255,255,255,.13); backdrop-filter: none; }
.site-header-overlay .brand-mark { border-color: white; }
.site-header-overlay .brand-name em { color: var(--lime); }
.site-header-overlay .desktop-nav a::after { background: var(--lime); }
.site-header-overlay .language-switch .is-active { color: var(--lime); }
.site-header-overlay .button-dark { color: var(--forest); background: var(--lime); }

/* Hero: scroll-driven product reveal */
.hero-experience { position: relative; z-index: 1; height: 340vh; background: #06170f; color: white; }
.hero-experience-sticky { position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 65% 43%, #163d29 0, #0a2618 33%, #06170f 72%); }
.hero-experience-sticky::after { content: ""; position: absolute; z-index: 12; inset: auto 0 0; height: 24%; pointer-events: none; background: linear-gradient(transparent, rgba(4,16,10,.76)); }
.hx-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.hx-grid { position: absolute; inset: -15%; opacity: .22; background-image: linear-gradient(rgba(180,232,95,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(180,232,95,.16) 1px, transparent 1px); background-size: 74px 74px; transform: perspective(700px) rotateX(62deg) translateY(39%); transform-origin: center bottom; mask-image: linear-gradient(to bottom, transparent 5%, black 50%, transparent 94%); }
.hx-aura { position: absolute; width: min(76vw, 980px); aspect-ratio: 1; left: 31%; top: 2%; border-radius: 50%; background: radial-gradient(circle, rgba(180,232,95,.16), rgba(54,123,78,.07) 36%, transparent 68%); filter: blur(4px); }
.hx-house-line { position: absolute; width: min(49vw, 720px); height: min(48vw, 700px); left: 41%; top: 7%; opacity: calc(.13 + var(--hx-shield-opacity) * .42); }
.hx-house-line i { position: absolute; display: block; background: linear-gradient(90deg, transparent, rgba(180,232,95,.62), transparent); box-shadow: 0 0 20px rgba(180,232,95,.14); }
.hx-house-line i:nth-child(1), .hx-house-line i:nth-child(2) { top: 20%; width: 58%; height: 1px; }
.hx-house-line i:nth-child(1) { left: 2%; transform: rotate(-39deg); transform-origin: right; }
.hx-house-line i:nth-child(2) { right: 2%; transform: rotate(39deg); transform-origin: left; }
.hx-house-line i:nth-child(3) { left: 18%; right: 18%; bottom: 12%; height: 56%; border: 1px solid rgba(180,232,95,.42); background: none; }
.hx-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); opacity: .35; animation: hxFloat 6s ease-in-out infinite; }
.particle-1 { left: 11%; top: 22%; }.particle-2 { left: 18%; top: 63%; animation-delay: -1s; }.particle-3 { left: 27%; top: 37%; animation-delay: -2.7s; }.particle-4 { left: 34%; top: 81%; animation-delay: -.8s; }.particle-5 { left: 46%; top: 19%; animation-delay: -4s; }.particle-6 { left: 53%; top: 68%; animation-delay: -2s; }.particle-7 { left: 61%; top: 31%; animation-delay: -3.2s; }.particle-8 { left: 70%; top: 76%; animation-delay: -1.8s; }.particle-9 { left: 79%; top: 20%; animation-delay: -4.5s; }.particle-10 { left: 86%; top: 56%; animation-delay: -.4s; }.particle-11 { left: 92%; top: 33%; animation-delay: -3.7s; }.particle-12 { left: 6%; top: 83%; animation-delay: -2.3s; }.particle-13 { left: 40%; top: 52%; animation-delay: -5s; }.particle-14 { left: 74%; top: 44%; animation-delay: -1.3s; }.particle-15 { left: 96%; top: 82%; animation-delay: -4.2s; }
@keyframes hxFloat { 0%,100% { transform: translateY(-5px) scale(.7); opacity: .16; } 50% { transform: translateY(12px) scale(1.2); opacity: .65; } }

.hx-wordmark { position: absolute; z-index: 0; inset: 12% 2.5% auto; display: flex; flex-direction: column; color: rgba(255,255,255,.04); font-family: var(--display); font-weight: 900; line-height: .72; letter-spacing: -.075em; text-transform: uppercase; white-space: nowrap; user-select: none; }
.hx-wordmark span { font-size: clamp(120px, 17vw, 290px); }
.hx-wordmark strong { align-self: flex-end; color: rgba(180,232,95,.055); font-size: clamp(105px, 15vw, 250px); }

.hx-product-stage { position: absolute; z-index: 4; left: var(--hx-stage-x); top: 48%; width: 520px; height: 420px; transform: translate(-50%, -50%); perspective: 1300px; transition: left .1s linear; }
.hx-product-rig { position: absolute; left: 50%; top: 50%; width: 420px; height: 260px; transform-style: preserve-3d; transform: translate(-50%, -50%) translateY(var(--hx-lift)) scale(var(--hx-scale)) rotateX(var(--hx-rotate-x)) rotateY(var(--hx-rotate-y)) rotateZ(var(--hx-rotate-z)); transition: transform .04s linear; }
.hx-block { position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; animation: hxIdle 4.5s ease-in-out infinite; }
@keyframes hxIdle { 0%,100% { translate: 0 -2px; } 50% { translate: 0 5px; } }
.hx-face { position: absolute; overflow: hidden; border: 1px solid rgba(73,53,23,.48); background: repeating-linear-gradient(2deg, #8d733a 0 2px, #bc9b55 2px 4px, #9b7c3e 4px 6px, #c2a45d 6px 7px); box-shadow: inset 0 0 48px rgba(48,35,12,.25); backface-visibility: visible; }
.hx-face::after { content: ""; position: absolute; inset: 0; opacity: .45; background: repeating-linear-gradient(93deg, transparent 0 8px, rgba(61,41,13,.16) 9px 10px); }
.hx-front, .hx-back { width: 420px; height: 260px; }
.hx-front { transform: translateZ(54px); }
.hx-back { transform: rotateY(180deg) translateZ(54px); }
.hx-right, .hx-left { left: 156px; width: 108px; height: 260px; }
.hx-right { transform: rotateY(90deg) translateZ(210px); }
.hx-left { transform: rotateY(-90deg) translateZ(210px); }
.hx-top, .hx-bottom { top: 76px; width: 420px; height: 108px; }
.hx-top { transform: rotateX(90deg) translateZ(130px); }
.hx-bottom { transform: rotateX(-90deg) translateZ(130px); }
.hx-fiber-window { position: absolute; z-index: 2; inset: 44px 46px; border: 2px solid rgba(69,48,18,.38); border-radius: 48% 11% 44% 10%; box-shadow: inset 0 0 36px rgba(42,31,10,.22); }
.hx-package-panel { position: absolute; z-index: 8; inset: 0; width: 420px; height: 260px; padding: 44px 26px 23px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transform: translateZ(56px) translateY(var(--hx-pack-shift)); opacity: var(--hx-pack-opacity); background: #f0f0e9; border: 1px solid rgba(0,0,0,.18); color: #172019; box-shadow: 0 12px 32px rgba(2,12,7,.18); }
.hx-package-panel::before, .hx-package-panel::after { content: ""; position: absolute; left: 0; right: 0; height: 22px; background: var(--green); }
.hx-package-panel::before { top: 17px; }.hx-package-panel::after { bottom: 13px; }
.hx-package-band { position: absolute; left: 0; right: 0; top: 66px; padding: 8px 26px; color: var(--green); border-block: 1px solid rgba(38,114,72,.2); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.hx-package-panel strong { font: 900 47px/.84 var(--display); letter-spacing: -.055em; }
.hx-package-panel strong i { color: #161a17; font-style: normal; }
.hx-package-panel small { margin-top: 12px; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.hx-package-panel b { position: absolute; right: 24px; top: 23px; color: white; font: 800 9px/1 var(--body); letter-spacing: .1em; }
.hx-slice { position: absolute; z-index: 1; top: 10px; left: 10px; width: 400px; height: 240px; border: 2px solid rgba(180,232,95,.55); background: repeating-linear-gradient(2deg, rgba(175,147,78,.6) 0 2px, rgba(195,166,93,.42) 2px 4px), rgba(12,42,26,.7); box-shadow: 0 0 26px rgba(180,232,95,.08), inset 0 0 45px rgba(11,28,17,.34); opacity: var(--hx-layer-opacity); }
.slice-one { transform: translate3d(var(--hx-layer-gap), 0, -75px) rotateY(-3deg); }
.slice-two { transform: translate3d(0, var(--hx-layer-gap), -120px) rotateX(3deg); }
.slice-three { transform: translate3d(calc(0px - var(--hx-layer-gap)), -8px, -165px) rotateY(5deg); }
.hx-object-shadow { position: absolute; z-index: -3; left: 7%; right: 7%; bottom: -45%; height: 34%; border-radius: 50%; background: rgba(0,0,0,.58); filter: blur(28px); transform: rotateX(68deg); }
.hx-thermal-ring { position: absolute; z-index: -2; left: 50%; top: 50%; border: 1px solid rgba(180,232,95,.52); border-radius: 50%; opacity: var(--hx-shield-opacity); }
.ring-one { width: 590px; height: 330px; transform: translate(-50%, -50%) rotateX(72deg); animation: hxRing 6s linear infinite; }
.ring-two { width: 510px; height: 510px; border-style: dashed; transform: translate(-50%, -50%) rotateY(68deg); animation: hxRingTwo 8s linear infinite reverse; }
@keyframes hxRing { to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); } }
@keyframes hxRingTwo { to { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(360deg); } }

.hx-dimension { position: absolute; z-index: 7; color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; opacity: 0; transition: opacity .45s ease; }
.hx-dimension::before, .hx-dimension::after { content: ""; position: absolute; background: rgba(180,232,95,.58); }
.dimension-width { left: 11%; right: 11%; bottom: 5%; height: 1px; background: rgba(180,232,95,.35); }
.dimension-width::before, .dimension-width::after { width: 1px; height: 9px; top: -4px; }.dimension-width::before { left: 0; }.dimension-width::after { right: 0; }.dimension-width span { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); }
.dimension-height { right: 1%; top: 18%; bottom: 18%; width: 1px; background: rgba(180,232,95,.35); }
.dimension-height::before, .dimension-height::after { width: 9px; height: 1px; left: -4px; }.dimension-height::before { top: 0; }.dimension-height::after { bottom: 0; }.dimension-height span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); white-space: nowrap; }
[data-phase="2"] .hx-dimension { opacity: 1; }
.hx-material-tag { position: absolute; z-index: 8; min-width: 128px; padding: 12px 14px; display: grid; grid-template-columns: 22px 1fr; background: rgba(4,21,13,.7); border: 1px solid rgba(180,232,95,.28); backdrop-filter: blur(12px); opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.hx-material-tag > span { grid-row: 1 / 3; color: var(--lime); font: 800 20px/1 var(--display); }.hx-material-tag strong { font: 800 23px/1 var(--display); }.hx-material-tag small { margin-top: 3px; color: rgba(255,255,255,.45); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.tag-density { right: -2%; top: 10%; }.tag-pack { left: -4%; bottom: 10%; }
[data-phase="2"] .hx-material-tag { opacity: 1; transform: translateY(0); }

.hx-copy-layer { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.hx-copy-layer a { pointer-events: auto; }
.hx-beat { position: absolute; opacity: 0; transform: translateY(32px); transition: opacity .5s ease, transform .65s cubic-bezier(.22,.8,.22,1); }
.hx-intro { left: clamp(28px, 6.7vw, 108px); bottom: 8.5%; width: min(43vw, 650px); }
.hx-intro h1 { margin: 24px 0 20px; font: 900 clamp(72px, 9.4vw, 148px)/.76 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.hx-intro h1 em, .hx-beat h2 em { color: var(--lime); font-style: normal; }
.hx-intro > p { max-width: 470px; margin: 0; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.55; }
.hx-actions { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
.hx-ghost-link { display: inline-flex; align-items: center; gap: 28px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.42); font-size: 12px; font-weight: 700; }
.hx-ghost-link span { color: var(--lime); font-size: 18px; font-weight: 400; }
.hx-inside { left: clamp(28px, 7vw, 115px); top: 24%; width: min(38vw, 570px); }
.hx-density { left: clamp(28px, 6.7vw, 108px); bottom: 15%; width: min(46vw, 720px); }
.hx-shield { right: clamp(28px, 7vw, 115px); top: 21%; width: min(40vw, 600px); }
.hx-beat-index { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.hx-beat h2 { margin: 22px 0 18px; font: 850 clamp(55px, 7vw, 106px)/.86 var(--display); letter-spacing: -.065em; text-transform: uppercase; }
.hx-beat > p { max-width: 480px; margin: 0; color: rgba(255,255,255,.52); font-size: 14px; line-height: 1.55; }
.hx-big-number { display: flex; align-items: end; gap: 8px; margin: 17px 0 8px; color: white; font: 900 clamp(98px, 13vw, 205px)/.7 var(--display); letter-spacing: -.09em; }
.hx-big-number small { color: rgba(255,255,255,.34); font-size: .42em; }.hx-big-number b { color: var(--lime); font-size: .33em; }
.hx-density h2 { margin-top: 8px; font-size: clamp(46px, 5.3vw, 82px); }
.hx-temperature { margin: 18px 0 4px; color: var(--lime); font: 900 clamp(120px, 14vw, 220px)/.72 var(--display); letter-spacing: -.1em; }
.hx-temperature span { display: block; margin-left: .8em; color: white; font-size: .17em; letter-spacing: -.02em; }
.hx-shield h2 { font-size: clamp(42px, 5vw, 76px); }
.hx-shield .button { margin-top: 28px; }
[data-phase="0"] .hx-intro, [data-phase="1"] .hx-inside, [data-phase="2"] .hx-density, [data-phase="3"] .hx-shield { opacity: 1; transform: translateY(0); }

.hx-hud { position: absolute; z-index: 15; left: clamp(22px, 3vw, 48px); right: clamp(22px, 3vw, 48px); bottom: 22px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; color: rgba(255,255,255,.35); font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.hx-progress { height: 1px; background: rgba(255,255,255,.13); }.hx-progress i { display: block; height: 1px; background: var(--lime); transform-origin: left; }
.hx-scroll-cue { position: absolute; z-index: 15; right: 3vw; bottom: 48px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.48); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: opacity .35s ease; }
.hx-scroll-cue i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: var(--lime); font-style: normal; animation: nudge 2s ease-in-out infinite; }
[data-phase="1"] .hx-scroll-cue, [data-phase="2"] .hx-scroll-cue, [data-phase="3"] .hx-scroll-cue { opacity: 0; }

/* Hero */
.hero { position: relative; min-height: 850px; height: calc(100svh - 78px); max-height: 1060px; overflow: hidden; background: var(--paper); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.95%, var(--line) 50%, transparent 50.05%), linear-gradient(0deg, transparent 73%, rgba(11,23,17,.08) 73.1%, transparent 73.2%); pointer-events: none; }
.hero-grain { position: absolute; width: 42vw; height: 42vw; right: 2vw; top: 7vh; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(180,232,95,.2), transparent 55%), repeating-radial-gradient(circle at 60% 60%, rgba(13,42,29,.06) 0 1px, transparent 2px 8px); filter: blur(.2px); }
.hero-copy { position: absolute; z-index: 2; left: clamp(28px, 6.7vw, 108px); top: 15%; width: min(53vw, 800px); }
.hero h1 { margin: 30px 0 28px; font: 900 clamp(56px, 7.2vw, 116px)/.82 var(--display)  ; letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { max-width: 470px; margin: 0; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.48; color: rgba(11,23,17,.68); }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 42px; }
.hero-visual { position: absolute; z-index: 3; top: 13%; right: 4.5%; width: 44%; height: 62%; }
.hero-image-frame { position: absolute; inset: 5% 2% 4% 10%; overflow: hidden; background: #b8b5aa; clip-path: polygon(8% 0, 100% 8%, 91% 100%, 0 86%); transform: rotate(-2.5deg); box-shadow: 0 35px 70px rgba(11,23,17,.2); }
.hero-image-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(180,232,95,.09), transparent 40%, rgba(13,42,29,.18)); mix-blend-mode: multiply; }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; transform: rotate(90deg) scale(1.55); filter: saturate(.75) contrast(1.05); }
.hero-stamp { position: absolute; z-index: 2; left: 1%; bottom: 4%; width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--lime); transform: rotate(9deg); box-shadow: 0 15px 30px rgba(11,23,17,.22); }
.hero-stamp span { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.hero-stamp strong { font: 900 48px/.85 var(--display); }
.hero-caption { position: absolute; top: 2%; right: 1%; writing-mode: vertical-rl; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-caption span { color: var(--green); margin-bottom: 10px; }
.hero-bottom { position: absolute; z-index: 4; left: clamp(28px, 6.7vw, 108px); right: clamp(28px, 6.7vw, 108px); bottom: 28px; display: flex; justify-content: space-between; color: rgba(11,23,17,.5); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.hero-scroll i { display: inline-grid; place-items: center; margin-left: 16px; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; font-style: normal; color: var(--ink); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.fact-strip > div { min-height: 150px; padding: 34px clamp(20px, 3.2vw, 52px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.fact-strip > div:last-child { border-right: 0; }
.fact-strip strong { font: 800 clamp(28px, 3vw, 48px)/1 var(--display); letter-spacing: -.045em; }
.fact-strip span { max-width: 160px; color: rgba(11,23,17,.5); font-size: 11px; line-height: 1.4; }

/* Scroll 3D story */
.product-story { position: relative; height: 240vh; background: var(--forest); color: white; }
.product-story-sticky { position: sticky; top: 0; height: 100vh; min-height: 720px; overflow: hidden; display: grid; grid-template-columns: 40% 60%; }
.product-story-sticky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(84,139,92,.24), transparent 36%), linear-gradient(90deg, transparent 39.95%, rgba(255,255,255,.12) 40%, transparent 40.05%); }
.story-copy { position: relative; z-index: 3; padding: clamp(58px, 9vh, 100px) 4vw 48px 6.5vw; display: flex; flex-direction: column; }
.story-copy h2 { margin: 25px 0 auto; font: 800 clamp(48px, 6.2vw, 96px)/.92 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.story-phases { display: grid; gap: 5px; }
.story-phases article { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); opacity: .28; transform: translateX(-10px); transition: opacity .35s ease, transform .35s ease; }
.story-phases article.is-active { opacity: 1; transform: translateX(0); }
.story-phases article > span { color: var(--lime); font: 700 10px/1.4 var(--body); }
.story-phases strong { font-size: 14px; }
.story-phases p { max-width: 330px; margin: 5px 0 0; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.45; }
.scene-stage { position: relative; z-index: 2; min-width: 0; perspective: 1100px; display: grid; place-items: center; }
.scene-stage::after { content: ""; position: absolute; width: 58%; height: 18%; bottom: 16%; border-radius: 50%; background: rgba(0,0,0,.32); filter: blur(28px); transform: scale(calc(.8 + var(--scene-progress) * .2)); }
.scene-orbit { position: absolute; border: 1px solid rgba(180,232,95,.24); border-radius: 50%; transform: rotate(-15deg); }
.orbit-one { width: 62%; aspect-ratio: 1; }
.orbit-two { width: 82%; aspect-ratio: 1; border-style: dashed; transform: rotate(24deg); }
.product-object { position: relative; z-index: 2; width: 350px; height: 220px; transform-style: preserve-3d; transform: translateY(var(--object-lift)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(-2deg); transition: transform .05s linear; }
.basalt-core { position: absolute; inset: 0; transform-style: preserve-3d; }
.core-face { position: absolute; overflow: hidden; backface-visibility: visible; background: repeating-linear-gradient(3deg, #8d7540 0 2px, #b49a5b 2px 4px, #9d8348 4px 5px); border: 1px solid rgba(50,40,18,.3); box-shadow: inset 0 0 40px rgba(65,48,20,.23); }
.core-front, .core-back { width: 350px; height: 220px; }
.core-front { transform: translateZ(43px); padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; color: #102018; background: linear-gradient(90deg, rgba(255,255,255,.74) 0 42%, rgba(255,255,255,.12) 42%), repeating-linear-gradient(3deg, #8d7540 0 2px, #b49a5b 2px 4px, #9d8348 4px 5px); }
.core-front::before { content: ""; position: absolute; left: 0; top: 22px; right: 0; height: 16px; background: var(--green); }
.core-front span { font: 900 32px/1 var(--display); }
.core-front strong { color: var(--green); font: 900 48px/.9 var(--display); letter-spacing: -.06em; }
.core-front small { margin-top: 14px; font: 800 10px/1 var(--body); letter-spacing: .18em; }
.core-back { transform: rotateY(180deg) translateZ(43px); }
.core-right, .core-left { width: 86px; height: 220px; left: 132px; }
.core-right { transform: rotateY(90deg) translateZ(175px); }
.core-left { transform: rotateY(-90deg) translateZ(175px); }
.core-top, .core-bottom { width: 350px; height: 86px; top: 67px; }
.core-top { transform: rotateX(90deg) translateZ(110px); }
.core-bottom { transform: rotateX(-90deg) translateZ(110px); }
.material-slice { position: absolute; top: 10px; width: 350px; height: 200px; border: 2px solid rgba(180,232,95,.7); background: repeating-linear-gradient(2deg, rgba(180,232,95,.15) 0 1px, rgba(180,232,95,.02) 1px 5px); backdrop-filter: blur(2px); opacity: calc(.18 + var(--scene-progress) * .62); }
.slice-a { transform: translate3d(calc(0px - var(--slice-gap)), -8px, -20px) rotateY(-3deg); }
.slice-b { transform: translate3d(calc(0px - var(--slice-gap) - var(--slice-gap)), -16px, -55px) rotateY(-6deg); }
.slice-c { transform: translate3d(calc(0px - var(--slice-gap) - var(--slice-gap) - var(--slice-gap)), -24px, -90px) rotateY(-9deg); }
.scene-note { position: absolute; z-index: 4; min-width: 108px; padding: 10px 12px; border-left: 2px solid var(--lime); background: rgba(7,24,16,.68); backdrop-filter: blur(10px); color: white; font: 800 18px/1 var(--display); opacity: calc(.25 + var(--scene-progress) * .75); }
.scene-note small { display: block; margin-top: 5px; color: rgba(255,255,255,.48); font: 600 9px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.note-density { top: 20%; right: 10%; }
.note-size { bottom: 23%; left: 10%; }
.note-pack { top: 31%; left: 8%; }
.scroll-meter { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 1px; background: rgba(255,255,255,.15); }
.scroll-meter span { display: block; height: 2px; transform-origin: left; background: var(--lime); }

/* Shared sections */
.section { padding: clamp(90px, 11vw, 170px) clamp(28px, 6.7vw, 108px); }
.section-heading { margin-bottom: clamp(54px, 7vw, 100px); }
.section-heading h2 { margin: 24px 0 0; font: 850 clamp(45px, 6.4vw, 96px)/.9 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.heading-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr); align-items: end; gap: 70px; }
.heading-row > p { max-width: 420px; margin: 0; color: rgba(11,23,17,.58); font-size: 15px; line-height: 1.65; }

.product-intro { background: var(--paper); }
.product-intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(42px, 7vw, 110px); align-items: stretch; }
.product-photo-card { position: relative; min-height: 620px; overflow: hidden; background: #b9b8b0; }
.product-photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 45%, rgba(12,38,26,.4)); }
.product-photo-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.photo-index { position: absolute; z-index: 2; left: 22px; bottom: 22px; color: white; font-size: 9px; letter-spacing: .15em; }
.spec-list { display: flex; flex-direction: column; }
.spec-list > div { min-height: 102px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
.spec-list > div:last-of-type { border-bottom: 1px solid var(--line); }
.spec-list span { color: rgba(11,23,17,.5); font-size: 11px; }
.spec-list strong { font: 800 clamp(28px, 3vw, 46px)/1 var(--display); letter-spacing: -.04em; }
.spec-list em { color: var(--green); font-size: 11px; font-style: normal; font-weight: 700; }
.spec-list > p { margin: 20px 0 35px; color: rgba(11,23,17,.48); font-size: 10px; line-height: 1.5; }
.spec-list .button { align-self: flex-start; }

.applications-section { background: var(--white); border-top: 1px solid var(--line); }
.application-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.application-grid article { min-height: 410px; padding: 22px; display: flex; flex-direction: column; border-right: 1px solid var(--line); transition: background .3s ease; }
.application-grid article:last-child { border-right: 0; }
.application-grid article:hover { background: var(--paper); }
.application-grid article > span { color: var(--green); font: 700 10px/1 var(--body); }
.application-shape { position: relative; height: 180px; margin: 38px 0 30px; display: grid; place-items: center; }
.application-shape::before, .application-shape i { content: ""; display: block; border: 2px solid var(--forest); }
.application-shape::before { width: 110px; height: 110px; transform: rotate(45deg); }
.application-shape i { position: absolute; width: 70px; height: 70px; background: repeating-linear-gradient(0deg, #9b824a 0 2px, #c3a965 2px 4px); }
.shape-02::before { border-radius: 50%; }
.shape-02 i { width: 100px; height: 42px; }
.shape-03::before { transform: skew(-12deg); }
.shape-03 i { width: 36px; height: 110px; }
.shape-04::before { width: 130px; height: 60px; transform: none; }
.shape-04 i { width: 100px; height: 30px; }
.application-grid h3 { margin: auto 0 10px; font: 800 30px/1 var(--display); text-transform: uppercase; }
.application-grid p { margin: 0; color: rgba(11,23,17,.52); font-size: 12px; line-height: 1.5; }

.technology-teaser { position: relative; min-height: 760px; padding: clamp(80px, 10vw, 150px) clamp(28px, 6.7vw, 108px); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; background: var(--forest); color: white; }
.technology-teaser > div:nth-child(2) { position: relative; z-index: 2; }
.technology-number { position: relative; z-index: 2; color: var(--lime); font: 900 clamp(130px, 22vw, 350px)/.72 var(--display); letter-spacing: -.1em; }
.technology-number span { display: block; margin-left: 1.4em; color: white; font-size: .15em; letter-spacing: -.03em; }
.technology-teaser h2 { margin: 26px 0 28px; font: 850 clamp(48px, 6vw, 92px)/.91 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.technology-teaser p { max-width: 500px; margin: 0 0 34px; color: rgba(255,255,255,.58); font-size: 16px; line-height: 1.65; }
.technology-lines { position: absolute; inset: 0; opacity: .2; pointer-events: none; }
.technology-lines i { position: absolute; left: 44%; width: 1px; height: 160%; background: linear-gradient(transparent, var(--lime), transparent); transform: rotate(22deg); }
.technology-lines i:nth-child(2) { left: 52%; }.technology-lines i:nth-child(3) { left: 60%; }.technology-lines i:nth-child(4) { left: 68%; }.technology-lines i:nth-child(5) { left: 76%; }

.calculator-section { background: var(--paper-2); }
.calculator { display: grid; grid-template-columns: 1fr .82fr; background: var(--white); border: 1px solid var(--line); }
.calculator-form { padding: clamp(30px, 5vw, 72px); display: grid; align-content: center; gap: 34px; }
.calculator label, .lead-form label { display: grid; gap: 9px; }
.calculator label > span:first-child, .lead-form label > span { color: rgba(11,23,17,.55); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.input-with-unit { display: grid; grid-template-columns: 1fr 60px; border-bottom: 1px solid var(--ink); }
.input-with-unit input { width: 100%; padding: 8px 0; border: 0; outline: none; background: transparent; font: 800 clamp(48px, 7vw, 88px)/1 var(--display); letter-spacing: -.06em; }
.input-with-unit em { display: grid; place-items: end center; padding-bottom: 18px; color: var(--green); font-size: 16px; font-style: normal; font-weight: 700; }
.calculator select, .lead-form select { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); outline-color: var(--green); }
.calculator-result { padding: clamp(34px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; background: var(--forest); color: white; }
.calculator-result > span { color: rgba(255,255,255,.5); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.calculator-result > strong { margin: 24px 0 7px; color: var(--lime); font: 900 clamp(80px, 10vw, 150px)/.75 var(--display); letter-spacing: -.08em; }
.calculator-result > strong small { color: white; font-size: .22em; letter-spacing: 0; }
.calculator-result > p { margin: 16px 0 35px; color: rgba(255,255,255,.52); font-size: 12px; }
.calculator-result .button { align-self: flex-start; }
.result-note { margin-top: 15px; color: rgba(255,255,255,.35); font-size: 9px; }

.project-placeholder::before { width: 1px; height: 150%; transform: rotate(45deg); }.project-placeholder::after { width: 150%; height: 1px; transform: rotate(-30deg); }
.factory-stats span { color: rgba(255,255,255,.48); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.reviews-section { background: var(--paper); }
.reviews-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.final-cta { position: relative; min-height: 720px; padding: clamp(90px, 12vw, 180px) clamp(28px, 6.7vw, 108px); overflow: hidden; background: var(--forest); color: white; }
.final-cta h2 { position: relative; z-index: 2; margin: 35px 0 26px; font: 900 clamp(72px, 11vw, 170px)/.78 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.final-cta h2 em { color: var(--lime); font-style: normal; }
.final-cta p { position: relative; z-index: 2; max-width: 500px; margin: 0 0 36px; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.6; }
.final-cta .button { position: relative; z-index: 2; }
.cta-wordmark { position: absolute; right: -2vw; bottom: -5vw; color: rgba(255,255,255,.025); font: 900 23vw/.75 var(--display); letter-spacing: -.08em; }

/* Footer */
.site-footer { padding: 70px clamp(28px, 6.7vw, 108px) 28px; background: #07150e; color: white; }
.footer-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; padding-bottom: 70px; }
.brand-inverse .brand-mark { border-color: white; }
.brand-inverse .brand-name em { color: var(--lime); }
.footer-top > div:first-child > p { max-width: 300px; margin: 25px 0 0; color: rgba(255,255,255,.4); font-size: 12px; line-height: 1.55; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links > div { display: flex; flex-direction: column; gap: 13px; }
.footer-links a, .footer-links div > span:not(.footer-label) { color: rgba(255,255,255,.63); font-size: 11px; line-height: 1.45; }
.footer-links a:hover { color: var(--lime); }
.footer-label { margin-bottom: 12px; color: rgba(255,255,255,.3); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.28); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }

/* Inner pages */
.inner-hero { position: relative; min-height: 780px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.inner-hero-copy { position: relative; z-index: 3; padding: clamp(70px, 9vw, 140px) 3vw clamp(70px, 8vw, 120px) clamp(28px, 6.7vw, 108px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.inner-hero-copy .page-index { position: absolute; top: 42px; left: clamp(28px, 6.7vw, 108px); }
.inner-hero h1 { margin: 30px 0; font: 900 clamp(64px, 8.3vw, 132px)/.8 var(--display); letter-spacing: -.075em; text-transform: uppercase; }
.inner-hero h1 em { color: var(--green); font-style: normal; }
.inner-hero-copy > p { max-width: 510px; margin: 0 0 36px; color: rgba(11,23,17,.58); font-size: 17px; line-height: 1.55; }
.product-hero-visual { position: relative; overflow: hidden; background: var(--forest); }
.product-hero-visual img { width: 100%; height: 100%; object-fit: cover; transform: rotate(90deg) scale(1.55); filter: saturate(.75) contrast(1.08); }
.product-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,42,29,.08), rgba(13,42,29,.45)); }
.floating-spec { position: absolute; z-index: 2; padding: 20px; display: grid; background: var(--lime); color: var(--forest); }
.floating-spec strong { font: 900 50px/.8 var(--display); letter-spacing: -.05em; }.floating-spec span { margin-top: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.spec-one { left: 6%; bottom: 8%; }.spec-two { right: 6%; top: 9%; background: var(--white); }

.product-details { background: var(--white); }
.spec-table { border-top: 1px solid var(--line); }
.spec-table > div { min-height: 112px; display: grid; grid-template-columns: 70px 1fr 1fr; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.spec-table > div > span { color: var(--green); font-size: 10px; }.spec-table strong { font: 700 25px/1.1 var(--display); text-transform: uppercase; }.spec-table em { justify-self: end; font: 800 clamp(26px, 3vw, 45px)/1 var(--display); font-style: normal; letter-spacing: -.04em; }
.technical-note { max-width: 700px; margin: 24px 0 0 auto; color: rgba(11,23,17,.46); font-size: 10px; line-height: 1.5; }
.product-cutaway { min-height: 690px; padding: clamp(80px, 10vw, 150px) clamp(28px, 6.7vw, 108px); overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 6vw; background: var(--forest); color: white; }
.cutaway-copy h2 { margin: 25px 0; font: 850 clamp(50px, 6vw, 90px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.06em; }.cutaway-copy p { max-width: 460px; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.6; }
.fiber-field { position: relative; height: 500px; border-radius: 50%; filter: drop-shadow(0 0 40px rgba(180,232,95,.12)); }
.fiber-field i { position: absolute; left: 50%; top: 50%; width: 90%; height: 2px; transform-origin: left; background: linear-gradient(90deg, var(--basalt), transparent); }
.fiber-field i:nth-child(1) { transform: rotate(8deg); }.fiber-field i:nth-child(2) { transform: rotate(23deg); }.fiber-field i:nth-child(3) { transform: rotate(38deg); }.fiber-field i:nth-child(4) { transform: rotate(53deg); }.fiber-field i:nth-child(5) { transform: rotate(68deg); }.fiber-field i:nth-child(6) { transform: rotate(83deg); }.fiber-field i:nth-child(7) { transform: rotate(98deg); }.fiber-field i:nth-child(8) { transform: rotate(113deg); }.fiber-field i:nth-child(9) { transform: rotate(128deg); }.fiber-field i:nth-child(10) { transform: rotate(143deg); }.fiber-field i:nth-child(11) { transform: rotate(158deg); }.fiber-field i:nth-child(12) { transform: rotate(173deg); }
.use-cases { background: var(--paper); }
.use-case-list { border-top: 1px solid var(--line); }
.use-case-list > div { min-height: 130px; display: grid; grid-template-columns: 70px 1fr 1fr; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); }
.use-case-list span { color: var(--green); font-size: 10px; }.use-case-list strong { font: 700 clamp(22px, 2.7vw, 40px)/1 var(--display); text-transform: uppercase; }.use-case-list p { max-width: 460px; color: rgba(11,23,17,.5); font-size: 12px; line-height: 1.5; }
.calculator-on-page { border-top: 1px solid var(--line); }

.technology-page-hero { background: var(--forest); color: white; }
.technology-page-hero .page-index { color: rgba(255,255,255,.34); }.technology-page-hero h1 em { color: var(--lime); }.technology-page-hero .inner-hero-copy > p { color: rgba(255,255,255,.55); }
.thermal-disc { position: relative; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(180,232,95,.22), transparent 42%); }
.thermal-disc::before, .thermal-disc::after, .thermal-disc div { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(180,232,95,.3); border-radius: 50%; }.thermal-disc::after { inset: 26%; border-style: dashed; }.thermal-disc div { inset: 36%; background: rgba(180,232,95,.06); }
.thermal-disc span { position: relative; z-index: 2; color: var(--lime); font: 900 clamp(130px, 16vw, 250px)/.75 var(--display); letter-spacing: -.1em; }.thermal-disc > i { position: relative; z-index: 2; font: 700 30px/1 var(--display); font-style: normal; }
.science-section { background: var(--white); }
.science-diagram { min-height: 500px; display: grid; grid-template-columns: .6fr 1.2fr .6fr; border: 1px solid var(--line); }
.science-layer { padding: 35px; display: flex; flex-direction: column; justify-content: space-between; }.science-layer span { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }.science-layer strong { font: 800 38px/1 var(--display); text-transform: uppercase; }
.science-layer.hot { background: #cdd185; }.science-layer.calm { background: #dcece0; }
.science-core { position: relative; overflow: hidden; display: grid; place-items: center; background: var(--forest); }
.science-core > span { position: relative; z-index: 2; color: white; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.science-core i { position: absolute; width: 120%; height: 2px; background: linear-gradient(90deg, transparent, #af9250, transparent); transform: rotate(calc(var(--n) * 10deg)); }
.science-core i:nth-child(2n) { transform: rotate(37deg) translateY(calc(var(--scene-progress, .5) * 20px)); }.science-core i:nth-child(3n) { transform: rotate(-24deg); }.science-core i:nth-child(5n) { transform: rotate(72deg); }
.benefit-stack { background: var(--paper); }
.benefit-stack article { position: relative; min-height: 310px; padding: 65px clamp(28px, 6.7vw, 108px); display: grid; grid-template-columns: 80px 1fr 1fr; align-items: center; gap: 40px; border-top: 1px solid var(--line); overflow: hidden; }
.benefit-stack article > span { color: var(--green); font-size: 10px; }.benefit-stack h2 { position: relative; z-index: 2; margin: 0; font: 850 clamp(44px, 6vw, 90px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.06em; }.benefit-stack p { position: relative; z-index: 2; max-width: 480px; margin: 0; color: rgba(11,23,17,.55); font-size: 14px; line-height: 1.6; }.benefit-stack i { position: absolute; right: 4%; width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 50%; }
.document-callout, .factory-note { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; background: var(--white); }.document-callout p, .factory-note p { margin: 0 0 28px; color: rgba(11,23,17,.58); line-height: 1.65; }

.projects-hero { background: #dfe8d9; }.blueprint { position: relative; min-height: 100%; background: var(--forest); }.blueprint::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(180,232,95,.35); }.blueprint i { position: absolute; background: rgba(180,232,95,.28); }.blueprint i:nth-child(1) { left: 20%; top: 20%; width: 1px; height: 60%; }.blueprint i:nth-child(2) { left: 20%; top: 50%; width: 60%; height: 1px; }.blueprint i:nth-child(3) { left: 34%; top: 30%; width: 40%; height: 40%; border: 1px solid rgba(180,232,95,.3); background: none; }.blueprint span { position: absolute; bottom: 10%; right: 9%; color: var(--lime); font: 900 6vw/1 var(--display); opacity: .14; writing-mode: vertical-rl; }
.case-library { background: var(--white); }.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 24px; }.case-grid article { display: grid; gap: 18px; }.case-placeholder { position: relative; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; background: var(--paper-2); }.case-placeholder::before, .case-placeholder::after { content: ""; position: absolute; background: rgba(11,23,17,.1); }.case-placeholder::before { width: 1px; height: 140%; transform: rotate(58deg); }.case-placeholder::after { width: 140%; height: 1px; transform: rotate(-24deg); }.case-placeholder span { position: absolute; top: 18px; left: 18px; color: var(--green); font-size: 10px; }.case-placeholder b { color: rgba(11,23,17,.28); font: 700 13px/1 var(--body); text-transform: uppercase; letter-spacing: .14em; }.case-grid article > div:last-child { display: grid; gap: 5px; }.case-grid article > div:last-child > span { color: var(--green); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }.case-grid strong { font: 800 30px/1 var(--display); text-transform: uppercase; }.case-grid p { margin: 0; color: rgba(11,23,17,.4); font-size: 10px; }.project-submit { padding: 90px clamp(28px, 6.7vw, 108px); display: flex; justify-content: space-between; align-items: end; gap: 40px; background: var(--green); color: white; }.project-submit h2 { margin: 20px 0; font: 850 clamp(48px, 7vw, 100px)/.87 var(--display); text-transform: uppercase; letter-spacing: -.06em; }.project-submit p { max-width: 600px; color: rgba(255,255,255,.6); line-height: 1.6; }

.factory-hero { background: var(--green); color: white; }.factory-hero .page-index { color: rgba(255,255,255,.3); }.factory-hero h1 em { color: var(--lime); }.factory-hero .inner-hero-copy > p { color: rgba(255,255,255,.58); }.factory-hero-logo { display: grid; place-items: center; overflow: hidden; background: white; }.factory-hero-logo img { width: 100%; height: 100%; object-fit: cover; }.company-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--forest); color: white; }.company-stats div { min-height: 180px; padding: 38px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.14); }.company-stats strong { color: var(--lime); font: 850 60px/1 var(--display); }.company-stats span { color: rgba(255,255,255,.45); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }.company-story { background: var(--white); }.story-columns { width: 67%; margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }.story-columns p { margin: 0; color: rgba(11,23,17,.62); font-size: 20px; line-height: 1.55; }.process-section { padding: clamp(90px, 11vw, 170px) clamp(28px, 6.7vw, 108px); background: var(--forest); color: white; }.process-section .section-heading h2 { color: white; }.process-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.16); }.process-list > div { min-height: 280px; padding: 25px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.16); }.process-list span { color: var(--lime); font-size: 10px; }.process-list strong { margin-top: auto; font: 800 28px/1 var(--display); text-transform: uppercase; }.process-list p { color: rgba(255,255,255,.45); font-size: 11px; line-height: 1.5; }

.contact-hero { min-height: 610px; padding: 62px clamp(28px, 6.7vw, 108px) 80px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--forest); color: white; }.contact-hero .page-index { margin-bottom: auto; color: rgba(255,255,255,.3); }.contact-hero h1 { margin: 30px 0 24px; font: 900 clamp(72px, 10vw, 152px)/.78 var(--display); letter-spacing: -.075em; text-transform: uppercase; }.contact-hero h1 em { color: var(--lime); font-style: normal; }.contact-hero p { max-width: 530px; margin: 0; color: rgba(255,255,255,.55); font-size: 17px; line-height: 1.55; }.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; }.contact-methods, .request-panel { padding: clamp(65px, 8vw, 120px) clamp(28px, 6vw, 90px); }.contact-methods { background: var(--white); }.contact-methods > .eyebrow { margin-bottom: 50px; }.contact-methods > a { min-height: 105px; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 20px; border-top: 1px solid var(--line); }.contact-methods > a:last-of-type { border-bottom: 1px solid var(--line); }.contact-methods a > span { color: rgba(11,23,17,.45); font-size: 10px; }.contact-methods a > strong { font: 700 clamp(16px, 1.8vw, 25px)/1.1 var(--display); }.contact-methods a > i { color: var(--green); font-style: normal; }.location-card { margin-top: 50px; padding: 30px; background: var(--paper-2); }.location-card span { color: rgba(11,23,17,.45); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }.location-card strong { display: block; margin: 10px 0; font: 800 38px/1 var(--display); text-transform: uppercase; }.location-card p { margin: 0; color: rgba(11,23,17,.5); font-size: 11px; line-height: 1.5; }.request-panel { background: var(--paper-2); }.request-panel h2 { margin: 25px 0 60px; font: 850 clamp(48px, 6vw, 88px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.055em; }.form-hint { padding: 14px; background: #dcebd4; color: var(--green); font-size: 11px; line-height: 1.5; }.form-submit { display: flex; align-items: center; gap: 25px; }.form-submit p { max-width: 330px; margin: 0; color: rgba(11,23,17,.4); font-size: 9px; line-height: 1.5; }.form-submit p a { text-decoration: underline; }.form-loading { color: rgba(11,23,17,.5); }

.legal-page { padding: 70px clamp(28px, 6.7vw, 108px) 140px; background: var(--paper); }.legal-heading { padding: 30px 0 90px; border-bottom: 1px solid var(--line); }.legal-heading .eyebrow { margin-top: 70px; }.legal-heading h1 { margin: 30px 0; font: 850 clamp(62px, 9vw, 135px)/.83 var(--display); text-transform: uppercase; letter-spacing: -.07em; }.legal-heading > p { color: rgba(11,23,17,.45); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }.legal-content { width: min(100%, 950px); margin: 80px 0 0 auto; }.legal-content section { padding: 36px 0; display: grid; grid-template-columns: 80px 1fr; border-bottom: 1px solid var(--line); }.legal-content section > span { color: var(--green); font-size: 10px; }.legal-content h2 { margin: 0 0 15px; font: 750 27px/1 var(--display); text-transform: uppercase; }.legal-content p { margin: 0; color: rgba(11,23,17,.6); font-size: 14px; line-height: 1.65; }.legal-content a { color: var(--green); text-decoration: underline; }.legal-note { margin-top: 40px; padding: 24px; border-left: 3px solid var(--green); background: var(--paper-2); color: rgba(11,23,17,.6); font-size: 12px; line-height: 1.6; }

.factory-hero-logo { position: relative; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .header-actions .button { display: none; }
  .site-header-overlay .mobile-menu summary { background: var(--lime); }
  .site-header-overlay .mobile-menu summary span { background: var(--forest); }
  .hx-product-stage { width: 480px; }
  .hx-product-rig { scale: .86; }
  .hx-inside { width: 35vw; }
  .hx-material-tag { scale: .86; }
  .hero { min-height: 780px; }
  .hero-copy { left: 5vw; top: 12%; width: 58vw; }
  .hero-visual { right: 1%; width: 48%; }
  .product-story-sticky { grid-template-columns: 43% 57%; }
  .product-object { transform: scale(.82) translateY(var(--object-lift)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); }
  .application-grid { grid-template-columns: 1fr 1fr; }.application-grid article:nth-child(2) { border-right: 0; }.application-grid article { border-bottom: 1px solid var(--line); }
  .technology-teaser { grid-template-columns: .8fr 1.2fr; }
  .reviews-grid { gap: 40px; }
  .contact-methods > a { grid-template-columns: 110px 1fr auto; }
}

@media (max-width: 820px) {
  .site-header { height: 68px; }.header-inner { padding: 0 18px; }.language-switch { display: none; }.brand-name { font-size: 15px; }
  .hero-experience { height: 315vh; }
  .hero-experience-sticky { min-height: 670px; }
  .hx-grid { background-size: 46px 46px; transform: perspective(600px) rotateX(65deg) translateY(43%); }
  .hx-aura { width: 120vw; left: -10%; top: 16%; }
  .hx-house-line { width: 95vw; height: 95vw; left: 2.5%; top: 29%; }
  .hx-wordmark { inset: 13% 18px auto; line-height: .78; }
  .hx-wordmark span { font-size: 23vw; }
  .hx-wordmark strong { font-size: 18vw; }
  .hx-product-stage { left: 50% !important; top: 61%; width: 430px; height: 360px; }
  .hx-product-rig { scale: .66; }
  .hx-material-tag { scale: .76; }
  .tag-density { right: 5%; top: 2%; }.tag-pack { left: 5%; bottom: 1%; }
  .hx-intro, .hx-inside, .hx-density, .hx-shield { left: 22px; right: 22px; top: 112px; bottom: auto; width: auto; }
  .hx-intro h1 { margin: 18px 0 14px; font-size: clamp(58px, 17.5vw, 86px); line-height: .78; }
  .hx-intro > p { width: 80%; font-size: 12px; }
  .hx-actions { margin-top: 18px; }
  .hx-actions .button { min-height: 46px; padding-inline: 16px; font-size: 11px; }
  .hx-ghost-link { gap: 16px; font-size: 10px; }
  .hx-beat h2 { margin-top: 15px; font-size: 14vw; }
  .hx-inside > p { width: 73%; font-size: 11px; }
  .hx-big-number { margin-top: 14px; font-size: 26vw; }
  .hx-density h2 { font-size: 10vw; }
  .hx-temperature { font-size: 31vw; }
  .hx-shield h2 { font-size: 10vw; }
  .hx-shield > p { width: 76%; font-size: 9px; }
  .hx-shield .button { min-height: 44px; margin-top: 18px; padding-inline: 15px; font-size: 10px; }
  .hx-dimension { display: none; }
  .hx-scroll-cue { right: 22px; bottom: 42px; }
  .hx-scroll-cue span { display: none; }
  .hx-hud { left: 18px; right: 18px; bottom: 18px; }
  .hero { height: auto; min-height: 920px; padding: 80px 22px 30px; display: flex; flex-direction: column; }
  .hero::before { background: linear-gradient(90deg, transparent 49.9%, var(--line) 50%, transparent 50.1%); }
  .hero-copy { position: relative; left: auto; top: auto; width: 100%; }
  .hero h1 { font-size: clamp(67px, 20vw, 104px); margin-block: 25px; }
  .hero-copy > p { font-size: 16px; }.hero-actions { margin-top: 28px; }
  .hero-visual { position: relative; top: auto; right: auto; width: 100%; height: 390px; margin-top: 45px; }.hero-image-frame { inset: 0 0 0 5%; }.hero-stamp { width: 100px; height: 100px; left: 0; }.hero-stamp strong { font-size: 36px; }.hero-caption { display: none; }
  .hero-bottom { position: relative; left: auto; right: auto; bottom: auto; margin-top: 38px; }.hero-bottom > span:first-child { display: none; }
  .fact-strip { grid-template-columns: 1fr 1fr; }.fact-strip > div { min-height: 125px; border-bottom: 1px solid var(--line); }.fact-strip > div:nth-child(2) { border-right: 0; }
  .product-story { height: 210vh; }.product-story-sticky { min-height: 100svh; display: block; }.product-story-sticky::before { background: radial-gradient(circle at 50% 55%, rgba(84,139,92,.24), transparent 40%); }.story-copy { height: 100%; padding: 55px 24px 24px; }.story-copy h2 { font-size: clamp(48px, 14vw, 74px); margin-top: 18px; }.story-phases { margin-top: auto; }.story-phases article { grid-template-columns: 30px 1fr; }.story-phases p { display: none; }
  .scene-stage { position: absolute; inset: 19% 0 24%; }.product-object { transform: scale(.62) translateY(var(--object-lift)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); }.scene-note { transform: scale(.8); }.note-density { top: 8%; right: 4%; }.note-size { bottom: 5%; left: 4%; }.note-pack { display: none; }.scroll-meter { display: none; }
  .section { padding: 85px 22px; }.section-heading { margin-bottom: 48px; }.section-heading h2 { font-size: clamp(45px, 13vw, 70px); }.heading-row { grid-template-columns: 1fr; gap: 26px; }
  .product-intro-grid, .reviews-grid, .calculator, .technology-teaser, .footer-top, .inner-hero, .product-cutaway, .document-callout, .factory-note, .contact-layout { grid-template-columns: 1fr; }
  .product-photo-card { min-height: 460px; }.spec-list > div { min-height: 90px; }.spec-list strong { font-size: 26px; }
  .application-grid { grid-template-columns: 1fr; }.application-grid article { min-height: 330px; border-right: 0; }.application-shape { height: 130px; margin-block: 24px; }
  .technology-teaser { min-height: 760px; padding: 85px 22px; gap: 40px; }.technology-number { font-size: 42vw; }.technology-teaser h2 { font-size: 14vw; }
  .calculator-form, .calculator-result { padding: 35px 24px; }.calculator-result { min-height: 420px; }.calculator-result > strong { font-size: 28vw; }
  .case-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .final-cta { min-height: 650px; padding: 90px 22px; }.final-cta h2 { font-size: 21vw; }
  .site-footer { padding: 65px 22px 24px; }.footer-links { grid-template-columns: 1fr 1fr; }.footer-top { gap: 55px; }.footer-bottom { gap: 20px; }
  .inner-hero { min-height: auto; }.inner-hero-copy { min-height: 690px; padding: 90px 22px 70px; }.inner-hero-copy .page-index { left: 22px; top: 28px; }.inner-hero h1 { font-size: 18vw; }.product-hero-visual, .thermal-disc, .blueprint, .factory-hero-logo { min-height: 520px; }
  .spec-table > div { min-height: 95px; grid-template-columns: 35px 1fr; }.spec-table em { grid-column: 2; justify-self: start; font-size: 25px; padding-bottom: 18px; }.spec-table strong { padding-top: 18px; }
  .product-cutaway { padding: 85px 22px; }.fiber-field { height: 320px; }
  .use-case-list > div { padding: 25px 0; grid-template-columns: 35px 1fr; }.use-case-list p { grid-column: 2; margin: 0; }
  .science-diagram { min-height: 620px; grid-template-columns: 1fr; grid-template-rows: .5fr 1.2fr .5fr; }.science-layer { padding: 22px; flex-direction: row; align-items: end; }
  .benefit-stack article { padding: 55px 22px; grid-template-columns: 40px 1fr; }.benefit-stack p { grid-column: 2; }.benefit-stack i { width: 100px; height: 100px; }
  .project-submit { padding: 70px 22px; align-items: flex-start; flex-direction: column; }.project-submit h2 { font-size: 14vw; }
  .company-stats { grid-template-columns: 1fr 1fr; }.company-stats div { min-height: 135px; padding: 25px; border-bottom: 1px solid rgba(255,255,255,.14); }.company-stats strong { font-size: 43px; }
  .story-columns { width: 100%; grid-template-columns: 1fr; gap: 22px; }.story-columns p { font-size: 17px; }.process-section { padding: 85px 22px; }.process-list { grid-template-columns: 1fr 1fr; }.process-list > div { min-height: 220px; border-bottom: 1px solid rgba(255,255,255,.16); }
  .contact-hero { padding: 45px 22px 70px; min-height: 620px; }.contact-hero h1 { font-size: 20vw; }.contact-methods, .request-panel { padding: 75px 22px; }.contact-methods > a { min-height: 100px; grid-template-columns: 1fr auto; }.contact-methods a > span { grid-column: 1/-1; align-self: end; }.contact-methods a > strong { align-self: start; }.request-panel h2 { font-size: 13vw; }.form-submit { align-items: flex-start; flex-direction: column; }
  .legal-page { padding: 50px 22px 100px; }.legal-heading h1 { font-size: 15vw; }.legal-content { margin-top: 40px; }.legal-content section { grid-template-columns: 40px 1fr; }
}

@media (max-width: 520px) {
  .brand-name { font-size: 13px; }.brand-mark { transform: scale(.88); transform-origin: left center; }.header-inner { gap: 10px; }
  .hx-product-stage { top: 63%; }
  .hx-product-rig { scale: .56; }
  .hx-intro h1 { font-size: 17vw; }
  .hx-intro > p { width: 93%; }
  .hx-actions { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hx-wordmark { top: 15%; }
  .hx-material-tag { scale: .68; }
  .hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }.hero-actions .text-link { align-self: flex-start; }
  .fact-strip strong { font-size: 27px; }
  .application-grid article { padding-inline: 6px; }
  .footer-links { grid-template-columns: 1fr; }.footer-bottom { align-items: flex-start; flex-direction: column; }
  .process-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .product-object { transform: scale(.9) rotateX(-4deg) rotateY(20deg); }
}

/* Premium product direction — real 3D model and editorial product study */
.button { border-radius: 999px; padding-inline: 25px; }
.button-small { padding-inline: 18px; }

.site-header-overlay {
  inset: 16px 24px auto;
  width: auto;
  height: 66px;
  background: rgba(5, 20, 13, .64);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .18);
  backdrop-filter: blur(24px) saturate(1.18);
}
.site-header-overlay .header-inner { padding-inline: 26px 10px; }
.site-header-overlay .brand-mark { opacity: .94; }
.site-header-overlay .desktop-nav a { color: rgba(255, 255, 255, .68); transition: color .2s ease; }
.site-header-overlay .desktop-nav a:hover { color: white; }
.site-header-overlay .button-dark { min-height: 44px; padding-inline: 20px; }

.model-hero { position: relative; z-index: 1; height: 380vh; color: white; background: #06130d; }
.model-hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; background: #06130d; }
.model-hero-sticky::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(circle at 69% 47%, rgba(58, 129, 80, .28), transparent 31%),
    radial-gradient(circle at 38% 88%, rgba(180, 232, 95, .065), transparent 28%),
    linear-gradient(132deg, #071710 0%, #07140e 47%, #030b07 100%);
}
.model-hero-sticky::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: auto 0 0;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(2, 9, 5, .88));
}
.mv-atmosphere { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.mv-aurora {
  position: absolute;
  width: min(74vw, 1080px);
  aspect-ratio: 1;
  left: 43%;
  top: -19%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 190, 106, .15), rgba(43, 102, 65, .08) 37%, transparent 69%);
  filter: blur(18px);
  transform: translate3d(0, 0, 0);
}
.mv-grid {
  position: absolute;
  inset: 25% -10% -35%;
  opacity: .22;
  background-image: linear-gradient(rgba(180,232,95,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(180,232,95,.12) 1px, transparent 1px);
  background-size: 84px 84px;
  transform: perspective(800px) rotateX(64deg) translateY(15%);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent, black 34%, transparent 92%);
}
.mv-house { position: absolute; width: min(58vw, 860px); height: min(56vw, 820px); left: 50%; top: 5%; opacity: calc(.025 + var(--mv-progress) * .16); transform: translateX(-5%); }
.mv-house i { position: absolute; display: block; border-color: rgba(180, 232, 95, .52); }
.mv-house i:nth-child(1), .mv-house i:nth-child(2) { top: 23%; width: 54%; height: 1px; background: linear-gradient(90deg, transparent, rgba(180,232,95,.56), transparent); }
.mv-house i:nth-child(1) { left: 2%; transform: rotate(-40deg); transform-origin: right; }
.mv-house i:nth-child(2) { right: 2%; transform: rotate(40deg); transform-origin: left; }
.mv-house i:nth-child(3) { left: 22%; right: 22%; top: 23%; bottom: 12%; border: 1px solid rgba(180,232,95,.34); }
.mv-dust { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(202, 246, 125, .9); box-shadow: 0 0 13px rgba(180,232,95,.7); animation: mvFloat 7s ease-in-out infinite; }
.mv-dust-1 { left: 8%; top: 22%; }.mv-dust-2 { left: 13%; top: 69%; animation-delay: -1.3s; }.mv-dust-3 { left: 19%; top: 43%; animation-delay: -4.2s; }.mv-dust-4 { left: 27%; top: 82%; animation-delay: -2.4s; }.mv-dust-5 { left: 34%; top: 17%; animation-delay: -5.2s; }.mv-dust-6 { left: 41%; top: 56%; animation-delay: -.8s; }.mv-dust-7 { left: 48%; top: 29%; animation-delay: -3.1s; }.mv-dust-8 { left: 54%; top: 78%; animation-delay: -5.8s; }.mv-dust-9 { left: 61%; top: 13%; animation-delay: -2s; }.mv-dust-10 { left: 68%; top: 61%; animation-delay: -4.8s; }.mv-dust-11 { left: 73%; top: 34%; animation-delay: -1.7s; }.mv-dust-12 { left: 79%; top: 87%; animation-delay: -3.8s; }.mv-dust-13 { left: 84%; top: 18%; animation-delay: -6.3s; }.mv-dust-14 { left: 89%; top: 52%; animation-delay: -.4s; }.mv-dust-15 { left: 94%; top: 73%; animation-delay: -2.7s; }.mv-dust-16 { left: 4%; top: 88%; animation-delay: -5.5s; }.mv-dust-17 { left: 57%; top: 47%; animation-delay: -1s; }.mv-dust-18 { left: 31%; top: 67%; animation-delay: -4s; }
@keyframes mvFloat { 0%, 100% { translate: 0 -7px; opacity: .12; } 50% { translate: 0 13px; opacity: .72; } }

.mv-topline { position: absolute; z-index: 25; top: 105px; left: clamp(28px, 4.5vw, 74px); right: clamp(28px, 4.5vw, 74px); display: flex; justify-content: space-between; color: rgba(255,255,255,.32); font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.mv-topline span:first-child { display: flex; align-items: center; gap: 9px; }
.mv-topline span:first-child i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }

.mv-stage { position: absolute; z-index: 6; left: 74%; top: 51%; width: min(46vw, 840px); height: min(74svh, 770px); transform: translate(-50%, -50%); transition: width .45s ease; }
.mv-model { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: grab; filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .34)); transition: opacity .8s ease; --poster-color: transparent; }
.mv-model:active { cursor: grabbing; }
.mv-stage.is-ready .mv-model { opacity: 1; }
.mv-loader { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; gap: 12px; transform: translate(-50%, -50%); transition: opacity .4s ease; }
.mv-loader span { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(180,232,95,.34); border-radius: 50%; color: var(--lime); font: 800 28px/1 var(--body); animation: loaderPulse 1.6s ease-in-out infinite; }
.mv-loader small { color: rgba(255,255,255,.35); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.mv-stage.is-ready .mv-loader { opacity: 0; }
@keyframes loaderPulse { 50% { transform: scale(.92); border-color: rgba(180,232,95,.75); box-shadow: 0 0 30px rgba(180,232,95,.12); } }
.mv-platform { position: absolute; z-index: 1; left: 17%; right: 17%; bottom: 10%; height: 12%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(0,0,0,.86) 0 18%, rgba(0,0,0,.52) 38%, rgba(3,12,7,.22) 58%, transparent 74%); filter: blur(11px); transform: perspective(520px) rotateX(66deg); }
.mv-platform::before { content: ""; position: absolute; inset: 27% 15%; border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(4px); }
.mv-platform::after { content: ""; position: absolute; left: 48%; top: 34%; width: 57%; height: 32%; border-radius: 50%; background: linear-gradient(90deg, rgba(0,0,0,.47), transparent); filter: blur(9px); transform: rotate(-7deg) skewX(-24deg); transform-origin: left center; }
.mv-halo { position: absolute; z-index: 0; inset: 10%; opacity: 0; transition: opacity .7s ease; }
.mv-halo i { position: absolute; inset: 5%; border: 1px solid rgba(180,232,95,.2); border-radius: 50%; animation: haloSpin 16s linear infinite; }
.mv-halo i:nth-child(2) { inset: 14%; border-style: dashed; animation-direction: reverse; animation-duration: 22s; }
.mv-halo i:nth-child(3) { inset: 24%; border-color: rgba(180,232,95,.38); }
@keyframes haloSpin { to { rotate: 360deg; } }
[data-phase="3"] .mv-halo { opacity: 1; }
.mv-scanline { position: absolute; z-index: 8; left: 12%; right: 12%; top: 34%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(180,232,95,.95), transparent); box-shadow: 0 0 22px rgba(180,232,95,.5); pointer-events: none; }
[data-phase="1"] .mv-scanline { opacity: .85; animation: scanProduct 2.8s ease-in-out infinite; }
@keyframes scanProduct { 0%, 100% { translate: 0 -120px; } 50% { translate: 0 180px; } }
.mv-drag-cue { position: absolute; z-index: 10; right: 3%; top: 24%; width: 98px; height: 98px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; opacity: .84; pointer-events: none; background: rgba(4,18,11,.44); backdrop-filter: blur(12px); transform: none; transition: opacity .35s ease, transform .35s ease; }
.mv-drag-cue span { color: var(--lime); font: 700 22px/1 var(--body); }.mv-drag-cue small { margin-top: 7px; color: rgba(255,255,255,.44); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.mv-spec-tag { position: absolute; z-index: 10; min-width: 170px; padding: 15px 18px; display: grid; grid-template-columns: 25px 1fr; border: 1px solid rgba(180,232,95,.26); border-radius: 14px; opacity: 0; pointer-events: none; background: rgba(5,22,14,.62); box-shadow: 0 18px 50px rgba(0,0,0,.14); backdrop-filter: blur(18px); transform: translateY(12px); transition: opacity .4s ease, transform .45s ease; }
.mv-spec-tag > span { grid-row: 1 / 3; color: var(--lime); font: 700 20px/1 var(--body); }
.mv-spec-tag strong { font: 700 19px/1 var(--body); letter-spacing: -.03em; }.mv-spec-tag small { margin-top: 4px; color: rgba(255,255,255,.42); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.mv-spec-density { left: 4%; top: 20%; }.mv-spec-size { right: 2%; bottom: 18%; transition-delay: .08s; }
[data-phase="2"] .mv-spec-tag { opacity: 1; transform: none; }

.mv-copy { position: absolute; z-index: 14; inset: 0; pointer-events: none; }
.mv-copy a { pointer-events: auto; }
.mv-beat { position: absolute; opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .7s cubic-bezier(.22,.8,.22,1); }
[data-phase="0"] .mv-intro, [data-phase="1"] .mv-perspective, [data-phase="2"] .mv-density-copy, [data-phase="3"] .mv-protection { opacity: 1; transform: none; }
.mv-intro {
  left: clamp(28px, 6.7vw, 108px);
  top: 21%;
  width: min(48vw, 680px);
} 
.mv-kicker, .mv-beat-index { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.58); font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.mv-kicker::before, .mv-beat-index::before { content: ""; width: 30px; height: 1px; background: var(--lime); }
.mv-intro h1 {
  margin: 31px 0 24px;
  font: 750 clamp(48px, 5.6vw, 92px)/.86 var(--body);
  letter-spacing: -.075em;
}
.mv-intro h1 em, .mv-beat h2 em { color: var(--lime); font-style: normal; }
.mv-intro > p, .mv-beat > p { max-width: 490px; margin: 0; color: rgba(255,255,255,.54); font-size: 14px; line-height: 1.65; }
.mv-actions { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.mv-text-link { display: inline-flex; gap: 28px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.34); font-size: 11px; font-weight: 700; }
.mv-text-link span { color: var(--lime); font-size: 18px; }
.mv-perspective { left: clamp(28px, 6.7vw, 108px); top: 25%; width: min(36vw, 540px); }
.mv-density-copy { left: clamp(28px, 6.7vw, 108px); right: auto; top: 22%; width: min(40vw, 540px); }
.mv-protection { left: clamp(28px, 6.7vw, 108px); top: 20%; width: min(39vw, 580px); }
.mv-beat h2 { margin: 23px 0 20px; font: 720 clamp(52px, 6.1vw, 96px)/.88 var(--body); letter-spacing: -.068em; }
.mv-density-numbers { display: flex; align-items: baseline; gap: clamp(20px, 1.7vw, 34px); margin: 22px 0 7px; color: white; font: 760 clamp(88px, 8.2vw, 150px)/.75 var(--body); letter-spacing: -.055em; white-space: nowrap; }
.mv-density-numbers span { color: rgba(255,255,255,.34); font-size: .52em; letter-spacing: -.035em; }.mv-density-numbers em { color: var(--lime); font-size: .52em; font-style: normal; letter-spacing: -.035em; }
.mv-density-copy h2 { font-size: clamp(43px, 4.9vw, 76px); }
.mv-heat-number { margin: 25px 0 5px; color: var(--lime); font: 760 clamp(112px, 13vw, 210px)/.82 var(--body); letter-spacing: -.11em; }
.mv-heat-number span { display: block; margin: 8px 0 0 .18em; color: white; font-size: .2em; line-height: 1; letter-spacing: -.02em; }
.mv-protection h2 { margin-top: 10px; font-size: clamp(45px, 5vw, 78px); }
.mv-protection .button { margin-top: 28px; }

.mv-footer-nav { position: absolute; z-index: 24; left: clamp(28px, 4.5vw, 74px); right: clamp(28px, 4.5vw, 74px); bottom: 28px; display: grid; grid-template-columns: repeat(4, auto) 1fr; align-items: center; gap: clamp(16px, 2.5vw, 42px); color: rgba(255,255,255,.24); font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.mv-footer-nav > span { transition: color .3s ease; }.mv-footer-nav > span.is-active { color: white; }
.mv-footer-nav > div { height: 1px; background: rgba(255,255,255,.12); }.mv-footer-nav > div i { display: block; height: 1px; background: var(--lime); transform-origin: left; }
.mv-scroll-cue { position: absolute; z-index: 24; right: clamp(28px, 4.5vw, 74px); bottom: 49px; display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.38); font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: calc(1 - var(--mv-progress) * 5); }
.mv-scroll-cue i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; color: var(--lime); font-style: normal; animation: nudge 2s ease-in-out infinite; }

.fact-strip { position: relative; z-index: 3; color: white; background: #07170f; border-color: rgba(255,255,255,.1); }
.fact-strip > div { min-height: 138px; border-color: rgba(255,255,255,.1); }
.fact-strip strong { color: var(--lime); font-family: var(--body); font-size: clamp(34px, 4vw, 58px); font-weight: 680; letter-spacing: -.06em; }
.fact-strip span { color: rgba(255,255,255,.39); }

.product-reveal { padding: clamp(100px, 11vw, 170px) clamp(22px, 5vw, 78px); overflow: hidden; background: #f4f2ec; }
.product-reveal-heading { width: min(100%, 1450px); margin: 0 auto clamp(60px, 8vw, 115px); display: grid; grid-template-columns: 1.4fr .6fr; gap: 7vw; align-items: end; }
.product-reveal-heading h2 { margin: 27px 0 0; font: 730 clamp(65px, 8.8vw, 140px)/.79 var(--body); letter-spacing: -.08em; }
.product-reveal-heading h2 em { color: var(--green); font-style: normal; }
.product-reveal-heading > p { max-width: 440px; margin: 0 0 9px; color: rgba(11,23,17,.55); font-size: 15px; line-height: 1.7; }
.product-views-card { position: relative; width: min(100%, 1540px); margin: 0 auto; min-height: clamp(500px, 62vw, 920px); overflow: hidden; border: 1px solid rgba(11,23,17,.09); border-radius: 34px; background:
  radial-gradient(
    ellipse 45% 35% at 50% 65%,
    rgba(169, 237, 77, 0.55) 0%,
    rgba(169, 237, 77, 0.25) 35%,
    rgba(169, 237, 77, 0.08) 55%,
    transparent 75%
  ),
  #fff; box-shadow: 0 45px 110px rgba(20,30,20,.08); }
.product-views-card::before { content: ""; position: absolute; inset: 20px; z-index: 2; pointer-events: none; border: 1px solid rgba(11,23,17,.07); border-radius: 23px; }
.product-views-image { position: absolute; inset: clamp(58px, 6vw, 100px) clamp(28px, 5vw, 80px); }
.product-views-image img {
  object-fit: contain;
  filter: saturate(.92) contrast(1.03);
  mix-blend-mode: multiply;
}
.views-caption { position: absolute; z-index: 3; color: rgba(11,23,17,.42); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.views-caption-top { top: 38px; left: 43px; }.views-caption-bottom { right: 43px; bottom: 37px; }
.product-data-grid { width: min(100%, 1540px); margin: 20px auto 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 1px; overflow: hidden; border-radius: 26px; background: rgba(11,23,17,.12); }
.product-data-grid article { min-height: 220px; padding: clamp(25px, 3.3vw, 50px); display: flex; flex-direction: column; justify-content: space-between; background: white; }
.product-data-grid article > span { color: rgba(11,23,17,.43); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.product-data-grid article > strong { margin-top: auto; font: 680 clamp(34px, 3vw, 51px)/.9 var(--body); letter-spacing: -.065em; white-space: nowrap; }
.product-data-grid article > small { margin-top: 8px; color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
.product-data-grid .product-data-action { gap: 28px; background: var(--forest); color: white; }
.product-data-action p { max-width: 340px; margin: 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.6; }
.product-data-action .button { align-self: flex-start; }

.product-hero .product-hero-visual { background: #fff; }
.product-hero .product-hero-visual img { padding: clamp(28px, 4vw, 66px); object-fit: contain; transform: none; filter: saturate(.92) contrast(1.03); }
.product-hero .product-hero-visual::after { background: linear-gradient(145deg, transparent 55%, rgba(13,42,29,.08)); pointer-events: none; }
.product-hero .floating-spec { border-radius: 18px; box-shadow: 0 18px 55px rgba(11,23,17,.13); }

.application-grid article { transition: color .35s ease, background .35s ease, transform .35s ease; }
.application-grid article:hover { z-index: 2; color: white; background: var(--forest); transform: translateY(-8px); }
.application-grid article:hover > p { color: rgba(255,255,255,.48); }
.application-grid article:hover > span { color: var(--lime); }
.application-grid article:hover .application-shape { border-color: rgba(180,232,95,.42); }
.application-grid article:hover .application-shape::before, .application-grid article:hover .application-shape::after, .application-grid article:hover .application-shape i { border-color: var(--lime); background-color: var(--lime); }

.project-journal { min-height: 760px; display: grid; grid-template-columns: 1.15fr .85fr; background: #07170f; color: white; }
.project-journal-image { position: relative; min-height: 680px; overflow: hidden; background: #111; }
.project-journal-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(4,18,11,.1), rgba(4,18,11,.5)); }
.project-journal-image img { object-fit: cover; transform: rotate(180deg) scale(1.06); filter: saturate(.68) contrast(1.08); }
.project-journal-image > span { position: absolute; z-index: 2; left: 34px; bottom: 30px; color: rgba(255,255,255,.56); font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.project-journal-copy { padding: clamp(70px, 8vw, 130px); display: flex; flex-direction: column; justify-content: center; }
.project-journal-copy h2 { margin: 29px 0; font: 730 clamp(56px, 6.2vw, 98px)/.83 var(--body); letter-spacing: -.075em; }
.project-journal-copy h2 em { color: var(--lime); font-style: normal; }
.project-journal-copy > p { max-width: 540px; margin: 0; color: rgba(255,255,255,.5); font-size: 15px; line-height: 1.7; }
.project-journal-copy > .button { align-self: flex-start; margin-top: 38px; }
.journal-meta { margin-top: 58px; display: flex; flex-wrap: wrap; gap: 8px; }
.journal-meta span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.46); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

@supports (animation-timeline: view()) {
  .product-reveal-heading, .product-views-card, .product-data-grid, .project-journal-copy > * {
    animation: premiumReveal both linear;
    animation-timeline: view();
    animation-range: entry 5% cover 34%;
  }
  @keyframes premiumReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1100px) {
  .mv-stage { left: 75%; width: min(46vw, 600px); }
  .mv-intro { width: 44vw; }
  .mv-density-copy { width: 42vw; }
  .mv-spec-tag { scale: .84; }
  .product-data-grid { grid-template-columns: 1fr 1fr; }
  .product-data-grid article { min-height: 190px; }
  .project-journal { grid-template-columns: 1fr 1fr; }
  .project-journal-copy { padding: 70px 50px; }
}

@media (max-width: 820px) {
  .site-header-overlay { inset: 10px 12px auto; height: 58px; }
  .site-header-overlay .header-inner { padding-inline: 17px 8px; }
  .site-header-overlay .mobile-menu summary { width: 42px; height: 42px; border-radius: 50%; }
  .model-hero { height: 350vh; }
  .model-hero-sticky { min-height: 670px; }
  .mv-topline { top: 90px; left: 20px; right: 20px; }
  .mv-topline span:last-child { display: none; }
  .mv-grid { background-size: 52px 52px; }
  .mv-house { width: 116vw; height: 105vw; left: -12%; top: 28%; }
  .mv-stage { left: 50% !important; top: 62%; width: 110vw; height: 53svh; min-height: 350px; }
  .mv-model { filter: drop-shadow(0 30px 28px rgba(0,0,0,.32)); }
  .mv-platform { bottom: 5%; }
  .mv-drag-cue { right: 7%; top: 13%; scale: .76; }
  .mv-spec-tag { scale: .72; }
  .mv-spec-density { left: 2%; top: 8%; }.mv-spec-size { right: 0; bottom: 4%; }
  .mv-intro, .mv-perspective, .mv-density-copy, .mv-protection { left: 21px; right: 21px; top: 118px; width: auto; }
  .mv-intro h1 { margin: 20px 0 15px; font-size: clamp(58px, 17vw, 86px); }
  .mv-intro > p, .mv-beat > p { max-width: 82%; font-size: 11px; line-height: 1.5; }
  .mv-actions { margin-top: 18px; gap: 18px; }
  .mv-actions .button { min-height: 45px; padding-inline: 16px; font-size: 10px; }
  .mv-text-link { gap: 14px; font-size: 9px; }
  .mv-beat h2 { margin-top: 17px; font-size: 12.5vw; }
  .mv-density-numbers { gap: 12px; margin-top: 15px; font-size: 19vw; }
  .mv-density-copy h2 { font-size: 10vw; }
  .mv-heat-number { margin-top: 17px; font-size: 29vw; }
  .mv-protection h2 { font-size: 11vw; }
  .mv-protection .button { min-height: 43px; margin-top: 18px; font-size: 9px; }
  .mv-footer-nav { left: 20px; right: 20px; bottom: 18px; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .mv-footer-nav > span { overflow: hidden; white-space: nowrap; font-size: 6px; }
  .mv-footer-nav > div { grid-column: 1 / -1; grid-row: 1; }
  .mv-scroll-cue { display: none; }
  .fact-strip > div { min-height: 118px; }
  .product-reveal { padding: 90px 20px; }
  .product-reveal-heading { grid-template-columns: 1fr; gap: 28px; margin-bottom: 55px; }
  .product-reveal-heading h2 { font-size: 15vw; }
  .product-reveal-heading > p { font-size: 13px; }
  .product-views-card { min-height: 69vw; border-radius: 22px; }
  .product-views-card::before { inset: 10px; border-radius: 15px; }
  .product-views-image { inset: 44px 16px; }
  .views-caption { font-size: 6px; }.views-caption-top { top: 23px; left: 24px; }.views-caption-bottom { right: 24px; bottom: 22px; }
  .product-data-grid { grid-template-columns: 1fr 1fr; border-radius: 19px; }
  .product-data-grid article { min-height: 150px; padding: 24px 20px; }
  .product-data-grid article > strong { font-size: 7vw; }
  .product-data-grid .product-data-action { grid-column: 1 / -1; min-height: 210px; }
  .project-journal { grid-template-columns: 1fr; }
  .project-journal-image { min-height: 480px; }
  .project-journal-copy { padding: 80px 22px; }
  .project-journal-copy h2 { font-size: 14vw; }
}

@media (max-width: 520px) {
  .mv-kicker { max-width: 260px; font-size: 7px; line-height: 1.4; }
  .mv-intro > p { max-width: 95%; }
  .mv-actions { align-items: flex-start; flex-direction: column; gap: 2px; }
  .mv-stage { top: 65%; width: 126vw; height: 48svh; }
  .mv-spec-tag { scale: .64; }
  .mv-drag-cue { display: none; }
  .mv-footer-nav > span { font-size: 5px; }
  .product-data-grid { grid-template-columns: 1fr; }
  .product-data-grid .product-data-action { grid-column: auto; }
  .product-data-grid article > strong { font-size: 10vw; }
  .project-journal-image { min-height: 370px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-dust, .mv-halo i, .mv-scanline { animation: none !important; }
}

/* 2026 presentation system */
body { text-rendering: optimizeLegibility; }

/* New MIRKO mark: lightweight web interpretation of the supplied M + basalt bridge */
.brand-mark { width: 45px; height: 35px; margin: 0; overflow: visible; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; }
.brand-mark::before, .brand-mark::after { content: none; }
.brand-mark-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand-mark-left { fill: #0b0b0b; }.brand-mark-right { fill: #12a039; }
.brand-mark-basalt { fill: #c49a42; stroke: #eccf79; stroke-width: 1; }
.brand-mark-fiber { fill: none; stroke: rgba(76,47,7,.66); stroke-width: 1.5; }
.site-header-overlay .brand-mark-left, .brand-inverse .brand-mark-left { fill: #f7f6f1; }
.brand-name { font-size: 16px; letter-spacing: -.035em; }
.language-switch button { padding: 4px 0; border: 0; background: transparent; opacity: .34; color: inherit; font-size: 9px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.language-switch button:hover, .language-switch button:focus-visible { opacity: .75; }
.language-switch button.is-active { opacity: 1; color: var(--green); }
.site-header-overlay .language-switch button.is-active { color: var(--lime); }
.language-switch-mobile { display: none; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.14); }

/* Product facts */
.fact-strip { grid-template-columns: repeat(6, 1fr); }
.fact-strip > div { padding: 28px clamp(15px, 2.2vw, 38px); }
.fact-strip strong { font-size: clamp(26px, 3vw, 48px); }
.product-data-grid { grid-template-columns: repeat(3, 1fr); }
.product-data-grid .product-data-action { grid-column: span 1; }
.factory-hero-logo img { padding: clamp(22px, 3vw, 48px); object-fit: contain; object-position: center; mix-blend-mode: normal; }

/* Desktop 3D and mobile product fallback */
.mv-static-product, .mv-mobile-facts, .mv-mobile-note { display: none; }

/* Technology page */
.technology-page-hero-v2 { min-height: 820px; background: #06180f; }
.technology-page-hero-v2::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 49.95%, rgba(255,255,255,.1) 50%, transparent 50.05%); }
.thermal-lab { position: relative; overflow: hidden; min-height: 820px; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, rgba(180,232,95,.18), transparent 30%), linear-gradient(145deg, #092318, #06140d); }
.thermal-lab::before { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(180,232,95,.12); background-image: linear-gradient(rgba(180,232,95,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(180,232,95,.06) 1px, transparent 1px); background-size: 54px 54px; }
.thermal-lab-ring { position: absolute; width: 55%; aspect-ratio: 1; border: 1px solid rgba(180,232,95,.32); border-radius: 50%; }
.thermal-lab .ring-one { transform: rotateX(68deg); }.thermal-lab .ring-two { width: 72%; border-style: dashed; transform: rotate(24deg); }
.thermal-lab-core { position: relative; z-index: 2; display: grid; place-items: center; color: var(--lime); }
.thermal-lab-core span { font: 780 clamp(140px, 16vw, 260px)/.72 var(--body); letter-spacing: -.1em; }
.thermal-lab-core small { margin-top: 23px; color: white; font: 700 clamp(25px, 3vw, 46px)/1 var(--body); }
.thermal-lab-caption { position: absolute; left: 11%; bottom: 9%; color: rgba(255,255,255,.42); font-size: 9px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
.science-section-v2 { background: #f8f7f2; }
.science-diagram-v2 { min-height: 610px; grid-template-columns: .72fr 1.25fr .72fr; border: 0; gap: 1px; background: rgba(11,23,17,.13); }
.science-step { position: relative; min-width: 0; padding: clamp(28px, 3.2vw, 52px); overflow: hidden; display: flex; flex-direction: column; background: white; }
.science-step-index { position: relative; z-index: 2; color: rgba(11,23,17,.45); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.science-step > strong { position: relative; z-index: 2; margin-top: auto; font: 760 clamp(34px, 3.7vw, 58px)/.9 var(--body); letter-spacing: -.055em; }
.science-step > p { position: relative; z-index: 2; max-width: 360px; margin: 21px 0 0; color: rgba(11,23,17,.55); font-size: 13px; line-height: 1.6; }
.science-outside { color: #12180c; background: linear-gradient(155deg, #dde69a, #c6cd73); }
.temperature-scale { height: 180px; margin-top: 65px; display: flex; align-items: end; gap: 7px; }
.temperature-scale i { flex: 1; background: rgba(11,23,17,.18); }.temperature-scale i:nth-child(1){height:28%}.temperature-scale i:nth-child(2){height:43%}.temperature-scale i:nth-child(3){height:62%}.temperature-scale i:nth-child(4){height:79%}.temperature-scale i:nth-child(5){height:100%;background:var(--green)}
.science-fibers { color: white; background: #0a2a1b; }
.science-fibers .science-step-index, .science-fibers > p { color: rgba(255,255,255,.52); }
.fiber-network { position: absolute; inset: 0; opacity: .44; }
.fiber-network i { position: absolute; left: 41%; top: 43%; width: 90%; height: 1px; background: linear-gradient(90deg, rgba(205,170,88,.95), transparent); transform-origin: left; }
.fiber-network i:nth-child(3n+1){transform:rotate(calc(var(--n, 1) * 13deg))}.fiber-network i:nth-child(3n+2){transform:rotate(31deg) translateY(calc(var(--n, 1) * 2px))}.fiber-network i:nth-child(3n){transform:rotate(-48deg) translateY(calc(var(--n, 1) * -2px))}
.fiber-network i:nth-child(1){transform:rotate(4deg)}.fiber-network i:nth-child(2){transform:rotate(17deg)}.fiber-network i:nth-child(3){transform:rotate(31deg)}.fiber-network i:nth-child(4){transform:rotate(45deg)}.fiber-network i:nth-child(5){transform:rotate(59deg)}.fiber-network i:nth-child(6){transform:rotate(73deg)}.fiber-network i:nth-child(7){transform:rotate(87deg)}.fiber-network i:nth-child(8){transform:rotate(101deg)}.fiber-network i:nth-child(9){transform:rotate(115deg)}.fiber-network i:nth-child(10){transform:rotate(129deg)}.fiber-network i:nth-child(11){transform:rotate(143deg)}.fiber-network i:nth-child(12){transform:rotate(157deg)}
.fiber-network i:nth-child(13){transform:rotate(11deg) translateY(35px)}.fiber-network i:nth-child(14){transform:rotate(26deg) translateY(-29px)}.fiber-network i:nth-child(15){transform:rotate(40deg) translateY(22px)}.fiber-network i:nth-child(16){transform:rotate(55deg) translateY(-18px)}.fiber-network i:nth-child(17){transform:rotate(69deg) translateY(31px)}.fiber-network i:nth-child(18){transform:rotate(83deg) translateY(-27px)}.fiber-network i:nth-child(19){transform:rotate(97deg) translateY(19px)}.fiber-network i:nth-child(20){transform:rotate(111deg) translateY(-33px)}.fiber-network i:nth-child(21){transform:rotate(125deg) translateY(28px)}.fiber-network i:nth-child(22){transform:rotate(139deg) translateY(-21px)}.fiber-network i:nth-child(23){transform:rotate(153deg) translateY(34px)}.fiber-network i:nth-child(24){transform:rotate(167deg) translateY(-25px)}
.science-core-spec { position: absolute; z-index: 3; top: 80px; right: 36px; padding: 18px; display: grid; border: 1px solid rgba(180,232,95,.35); background: rgba(5,18,11,.72); backdrop-filter: blur(12px); }
.science-core-spec span { color: var(--lime); font: 760 42px/.8 var(--body); }.science-core-spec small { margin-top: 8px; color: rgba(255,255,255,.52); font-size: 9px; text-transform: uppercase; }
.science-inside { background: linear-gradient(155deg, #eff6ef, #dcebe1); }
.comfort-pulse { position: relative; width: 180px; height: 180px; margin: 72px auto 0; }
.comfort-pulse i { position: absolute; inset: 0; border: 1px solid rgba(38,114,72,.32); border-radius: 50%; }.comfort-pulse i:nth-child(2){inset:24px}.comfort-pulse i:nth-child(3){inset:51px;background:var(--green);box-shadow:0 0 40px rgba(38,114,72,.2)}
.science-caption { margin: 20px 0 0; color: rgba(11,23,17,.42); font-size: 10px; line-height: 1.5; }
.technology-benefits { padding: clamp(95px, 10vw, 160px) clamp(28px, 6.7vw, 108px); color: white; background: #07170f; }
.technology-benefits-heading { margin-bottom: 80px; display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.technology-benefits-heading h2 { max-width: 950px; margin: 0; text-align: right; font: 740 clamp(54px, 7vw, 106px)/.86 var(--body); letter-spacing: -.07em; }
.technology-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14); }
.technology-benefit-grid article { min-height: 500px; padding: clamp(30px, 4vw, 64px); display: flex; flex-direction: column; background: #0a2116; transition: background .25s ease; }
.technology-benefit-grid article:hover { background: #0e2c1d; }
.benefit-card-top { display: flex; justify-content: space-between; color: var(--lime); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.benefit-card-top small { color: rgba(255,255,255,.36); }
.benefit-metric { margin: 65px 0 8px; color: var(--lime); font: 740 clamp(62px, 7.5vw, 118px)/.8 var(--body); letter-spacing: -.08em; }
.benefit-note { color: rgba(255,255,255,.38); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.benefit-card-copy { margin-top: auto; display: grid; grid-template-columns: .85fr 1fr; gap: 45px; align-items: end; }
.benefit-card-copy h3 { margin: 0; font: 700 clamp(30px, 3.2vw, 50px)/.95 var(--body); letter-spacing: -.05em; }.benefit-card-copy p { margin: 0; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.65; }
.technology-spec-band { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--lime); }
.technology-spec-band > div { min-height: 175px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(11,23,17,.18); }
.technology-spec-band span { color: rgba(11,23,17,.5); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.technology-spec-band strong { font: 760 clamp(31px, 3vw, 48px)/.9 var(--body); letter-spacing: -.055em; }.technology-spec-band small { color: rgba(11,23,17,.5); font-size: 9px; }
.document-callout-v2 { border-top: 1px solid var(--line); }

/* Privacy page */
.legal-hero-v2 { min-height: 720px; display: grid; grid-template-columns: 1.15fr .85fr; color: white; background: #07170f; }
.legal-hero-copy { padding: clamp(75px, 9vw, 140px) clamp(28px, 6.7vw, 108px); display: flex; flex-direction: column; justify-content: center; }
.legal-hero-copy .page-index { margin-bottom: auto; color: rgba(255,255,255,.3); }
.legal-hero-copy h1 { margin: 40px 0 30px; font: 740 clamp(67px, 8.5vw, 132px)/.79 var(--body); letter-spacing: -.075em; }.legal-hero-copy h1 em { color: var(--lime); font-style: normal; }.legal-hero-copy > p { max-width: 570px; margin: 0; color: rgba(255,255,255,.54); font-size: 16px; line-height: 1.65; }
.legal-status-card { margin: clamp(30px, 4vw, 70px); padding: clamp(35px, 4vw, 65px); display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(180,232,95,.22); background: linear-gradient(155deg, rgba(180,232,95,.1), rgba(255,255,255,.025)); }
.legal-status { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .16em; }.legal-status-card > strong { margin: 24px 0; font: 730 clamp(50px, 6vw, 86px)/.9 var(--body); letter-spacing: -.065em; }.legal-status-card > p { color: rgba(255,255,255,.54); font-size: 13px; line-height: 1.65; }
.legal-quick-facts { margin-top: 50px; display: grid; gap: 13px; }.legal-quick-facts span { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.7); font-size: 10px; }.legal-quick-facts i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px rgba(180,232,95,.45); }
.legal-overview { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: white; }
.legal-overview article { min-height: 190px; padding: 30px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }.legal-overview article > span { color: var(--green); font-size: 9px; }.legal-overview strong { margin-top: auto; font: 700 24px/1 var(--body); }.legal-overview p { margin: 10px 0 0; color: rgba(11,23,17,.48); font-size: 11px; line-height: 1.5; }
.legal-document-v2 { padding: clamp(90px, 10vw, 160px) clamp(28px, 6.7vw, 108px); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(55px, 9vw, 150px); background: #f5f3ed; }
.legal-toc { position: sticky; top: 110px; height: fit-content; }.legal-toc nav { margin-top: 35px; display: grid; border-top: 1px solid var(--line); }.legal-toc nav a { min-height: 54px; display: grid; grid-template-columns: 35px 1fr; align-items: center; border-bottom: 1px solid var(--line); color: rgba(11,23,17,.58); font-size: 10px; }.legal-toc nav a:hover { color: var(--green); }.legal-toc nav span { color: var(--green); font-size: 8px; }
.legal-email { margin-top: 34px; padding: 22px; display: grid; gap: 8px; background: var(--forest); color: white; }.legal-email span { color: rgba(255,255,255,.4); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }.legal-email strong { overflow-wrap: anywhere; font-size: 11px; }
.legal-content-v2 { min-width: 0; }.legal-content-v2 article { scroll-margin-top: 100px; padding: 50px 0; display: grid; grid-template-columns: 65px 1fr; border-top: 1px solid var(--line); }.legal-content-v2 article > span { color: var(--green); font-size: 9px; }.legal-content-v2 h2 { max-width: 820px; margin: 0 0 20px; font: 720 clamp(34px, 4vw, 60px)/.95 var(--body); letter-spacing: -.055em; }.legal-content-v2 p { max-width: 760px; margin: 0; color: rgba(11,23,17,.6); font-size: 14px; line-height: 1.75; }.legal-content-v2 p + p { margin-top: 14px; }.legal-content-v2 a { color: var(--green); text-decoration: underline; }
.legal-note-v2 { margin-top: 30px; padding: clamp(27px, 4vw, 48px); display: grid; grid-template-columns: 100px 1fr; gap: 28px; color: white; background: var(--green); }.legal-note-v2 span { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.legal-note-v2 p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; }

@media (max-width: 1100px) {
  .fact-strip { grid-template-columns: repeat(3, 1fr); }
  .fact-strip > div { border-bottom: 1px solid rgba(255,255,255,.1); }
  .technology-benefits-heading { align-items: start; flex-direction: column; }.technology-benefits-heading h2 { text-align: left; }
  .benefit-card-copy { grid-template-columns: 1fr; gap: 20px; }
  .technology-spec-band { grid-template-columns: 1fr 1fr; }
  .legal-document-v2 { grid-template-columns: 240px 1fr; gap: 55px; }
}

@media (max-width: 820px) {
  .header-actions .language-switch { display: none; }
  .language-switch-mobile { display: flex; }
  .mobile-menu nav { border-radius: 18px; }
  .brand-mark { width: 42px; height: 32px; transform: none; }

  .model-hero { height: auto; }
  .model-hero-sticky { position: relative; height: 980px; min-height: 980px; }
  .mv-topline { top: 93px; }
  .mv-topline span:last-child, .mv-perspective, .mv-density-copy, .mv-protection, .mv-model, .mv-loader, .mv-drag-cue, .mv-spec-tag, .mv-scanline, .mv-halo, .mv-footer-nav { display: none !important; }
  .mv-intro { display: block; left: 22px; right: 22px; top: 142px; width: auto; opacity: 1 !important; transform: none !important; }
  .mv-intro h1 { margin: 22px 0 18px; font-size: clamp(61px, 17vw, 88px); line-height: .82; }
  .mv-intro > p { max-width: 570px; font-size: 12px; line-height: 1.55; }
  .mv-actions { margin-top: 22px; flex-direction: row; align-items: center; gap: 18px; }
  .mv-actions .button { min-height: 48px; padding-inline: 18px; }
  .mv-mobile-note { display: block; max-width: 480px; margin-top: 17px; color: rgba(255,255,255,.32); font-size: 8px; line-height: 1.45; letter-spacing: .06em; }
  .mv-stage { left: 50% !important; top: 74%; width: calc(100% - 32px); height: 310px; min-height: 0; }
  .mv-static-product { position: absolute; z-index: 4; inset: 0; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: #fafaf7; box-shadow: 0 34px 80px rgba(0,0,0,.28); }
  .mv-static-product::after { content: "MIRKO IZOBASALT · 50 ММ · 50 ЛЕТ"; position: absolute; left: 18px; bottom: 15px; padding: 8px 11px; border-radius: 999px; color: white; background: rgba(7,23,15,.82); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
  .mv-static-product img { object-fit: cover; object-position: 5% 4%; transform: scale(1.9); transform-origin: 14% 7%; filter: saturate(.92) contrast(1.02); }
  .mv-platform { left: 15%; right: 15%; bottom: -3%; height: 10%; }
  .mv-mobile-facts { position: absolute; z-index: 8; left: 12px; right: 12px; bottom: -62px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.12); }
  .mv-mobile-facts span { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 5px; color: rgba(255,255,255,.48); background: rgba(5,20,12,.92); font-size: 8px; text-transform: uppercase; }.mv-mobile-facts strong { color: var(--lime); font-size: 16px; }
  .mv-house { top: 43%; opacity: .06; }.mv-grid { opacity: .13; }

  .fact-strip { grid-template-columns: 1fr 1fr; }
  .fact-strip > div { min-height: 108px; }
  .product-data-grid { grid-template-columns: 1fr 1fr; }
  .product-data-grid .product-data-action { grid-column: 1 / -1; }
  .factory-hero-logo { min-height: 390px; }

  .technology-page-hero-v2 { min-height: auto; grid-template-columns: 1fr; }
  .thermal-lab { min-height: 540px; }.thermal-lab-core span { font-size: 32vw; }
  .science-diagram-v2 { min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; gap: 1px; }
  .science-step { min-height: 440px; }.science-fibers { min-height: 520px; }.temperature-scale { margin-top: 55px; }
  .technology-benefits { padding: 90px 22px; }.technology-benefits-heading { margin-bottom: 50px; }.technology-benefits-heading h2 { font-size: 13vw; }
  .technology-benefit-grid { grid-template-columns: 1fr; }.technology-benefit-grid article { min-height: 420px; }.benefit-metric { font-size: 19vw; }
  .technology-spec-band { grid-template-columns: 1fr 1fr; }.technology-spec-band > div { min-height: 135px; padding: 22px; }.technology-spec-band strong { font-size: 7vw; }

  .legal-hero-v2 { grid-template-columns: 1fr; }.legal-hero-copy { min-height: 690px; padding: 60px 22px; }.legal-hero-copy h1 { font-size: 16vw; }.legal-status-card { margin: 0; min-height: 430px; border-inline: 0; }
  .legal-overview { grid-template-columns: 1fr 1fr; }.legal-overview article { min-height: 155px; padding: 22px; border-bottom: 1px solid var(--line); }
  .legal-document-v2 { padding: 85px 22px; grid-template-columns: 1fr; gap: 70px; }.legal-toc { position: static; }.legal-content-v2 article { grid-template-columns: 38px 1fr; }.legal-content-v2 h2 { font-size: 9vw; }.legal-note-v2 { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand-name { font-size: 12px; }.brand { gap: 8px; }
  .model-hero-sticky { height: 940px; min-height: 940px; }
  .mv-kicker { max-width: 285px; }
  .mv-intro h1 { font-size: clamp(55px, 16vw, 75px); }
  .mv-actions { gap: 13px; }.mv-actions .button { min-height: 46px; padding-inline: 15px; font-size: 9px; }.mv-text-link { gap: 10px; font-size: 8px; }
  .mv-stage { top: 75%; height: 270px; }
  .mv-static-product img { transform: scale(2.05); }
  .product-data-grid { grid-template-columns: 1fr; }.product-data-grid .product-data-action { grid-column: auto; }
  .technology-spec-band { grid-template-columns: 1fr; }
  .legal-overview { grid-template-columns: 1fr; }
}

/* Real factory logo: image asset replaces the former coded SVG brand mark. */
.brand { display:inline-flex; align-items:center; width:190px; height:54px; flex:0 0 auto; }
.brand-logo-image { display:block; width:190px; height:54px; object-fit:contain; object-position:left center; }
.brand .brand-mark, .brand .brand-name { display:none !important; }
@media (max-width: 760px) {
  .brand { width:155px; height:46px; }
  .brand-logo-image { width:155px; height:46px; }
}
    /* MIRKO — Product intro specification block */
.product-intro-specs {
  max-width: 440px;
  margin-bottom: 9px;
}

.product-intro-label {
  margin-bottom: 22px;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-intro-specs > p {
  max-width: 400px;
  margin: 0;
  color: rgba(11,23,17,.58);
  font-size: 15px;
  line-height: 1.7;
}

.product-intro-line {
  width: 100%;
  height: 1px;
  margin: 30px 0 24px;
  background: rgba(11,23,17,.12);
}

.product-intro-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.product-intro-meta > div {
  display: flex;
  flex-direction: column;
}

.product-intro-meta span {
  margin-bottom: 10px;
  color: rgba(11,23,17,.4);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}

.product-intro-meta strong {
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.05em;
}

.product-intro-meta small {
  margin-top: 7px;
  color: var(--green);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .product-intro-specs {
    max-width: none;
  }

  .product-intro-specs > p {
    font-size: 13px;
  }

  .product-intro-meta {
    gap: 18px;
  }

  .product-intro-meta strong {
    font-size: 22px;
  }
}
/* =========================================
   MIRKO — Premium Product Showcase
   ========================================= */

.product-views-card {
  background:
    radial-gradient(circle at 50% 45%, rgba(190, 239, 88, 0.10), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7f7f3 100%);
  border-color: rgba(11, 23, 17, 0.10);
  box-shadow:
    0 40px 100px rgba(20, 30, 20, 0.09),
    inset 0 0 0 1px rgba(255,255,255,.7);
}

/* Техническая сетка на фоне */
.product-views-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;

  background-image:
    linear-gradient(rgba(11,23,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,23,17,.035) 1px, transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
}

/* Большая зона изображения */
.product-views-image {
  inset: clamp(75px, 7vw, 115px) clamp(40px, 7vw, 110px);
  z-index: 2;
}

/* Сам продукт */
.product-views-image img {
  transform: scale(1.02);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

/* Лёгкое увеличение при наведении */
.product-views-card:hover .product-views-image img {
  transform: scale(1.055);
}

/* Верхняя техническая подпись */
.views-caption-top {
  top: 32px;
  left: 40px;
  color: rgba(11,23,17,.48);
}

/* Нижняя подпись */
.views-caption-bottom {
  right: 40px;
  bottom: 32px;
  color: rgba(11,23,17,.48);
}

/* Небольшой зелёный индикатор */
.product-views-card::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  top: 38px;
  right: 40px;
  border-radius: 50%;
  background: #a9ed4d;
  box-shadow: 0 0 0 5px rgba(169,237,77,.12);
  z-index: 4;
}
/* =========================================
   MIRKO — PRODUCT GREEN GLOW
   ========================================= */

.product-views-card {
  background: #ffffff !important;
  isolation: isolate;
}

/* Само свечение */
.product-views-image::before {
  content: "";
  position: absolute;
  z-index: 0;

  width: 70%;
  height: 70%;

  left: 50%;
  top: 52%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

 background: radial-gradient(
  circle,
  rgba(180, 232, 95, 0.42) 0%,
  rgba(180, 232, 95, 0.24) 25%,
  rgba(180, 232, 95, 0.10) 48%,
  rgba(180, 232, 95, 0.025) 65%,
  transparent 78%
);

  filter: blur(45px); 

  pointer-events: none;
}

/* Картинка поверх свечения */
.product-views-image img {
  position: relative;
  z-index: 1;

  object-fit: contain;

  mix-blend-mode: multiply;

  filter:
    saturate(.92)
    contrast(1.03);
} 
/* =========================================
   MIRKO — PREMIUM PRODUCT DATA
   ========================================= */

.product-data-grid {
  gap: 1px;
  background: rgba(11, 23, 17, 0.12);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(11, 23, 17, 0.07);
}

/* Обычные карточки */
.product-data-grid article {
  position: relative;
  min-height: 245px;
  padding: 38px 40px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfbf7 100%
    );

  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

/* Номер карточки */
.product-data-grid article::before {
  content: "01";
  position: absolute;
  top: 28px;
  right: 32px;

  color: rgba(11, 23, 17, 0.12);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

/* Номера остальных карточек */
.product-data-grid article:nth-child(2)::before {
  content: "02";
}

.product-data-grid article:nth-child(3)::before {
  content: "03";
}

.product-data-grid article:nth-child(4)::before {
  content: "04";
}

/* Зелёная техническая линия */
.product-data-grid article::after {
  content: "";
  position: absolute;

  left: 40px;
  right: 40px;
  bottom: 0;

  height: 2px;

  background: linear-gradient(
    90deg,
    var(--green),
    rgba(169, 237, 77, 0)
  );

  transform: scaleX(.25);
  transform-origin: left;

  transition: transform .35s ease;
}

/* Hover */
.product-data-grid article:hover {
  transform: translateY(-5px);

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f4f8ed 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(169, 237, 77, .18);
}

.product-data-grid article:hover::after {
  transform: scaleX(1);
}

/* Название параметра */
.product-data-grid article > span {
  position: relative;
  z-index: 2;

  color: rgba(11, 23, 17, .42);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

/* Большое значение */
.product-data-grid article > strong {
  position: relative;
  z-index: 2;

  margin-top: auto;

  font-size: clamp(36px, 3.2vw, 54px);
  letter-spacing: -.07em;
}

/* Единицы измерения */
.product-data-grid article > small {
  position: relative;
  z-index: 2;

  margin-top: 12px;

  color: var(--green);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

/* =========================================
   CTA CARD
   ========================================= */

.product-data-grid .product-data-action {
  position: relative;

  overflow: hidden;

  padding: 40px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(169, 237, 77, .18),
      transparent 20%
    ),
    var(--forest);

  color: white;
}

/* Декоративный круг */
.product-data-grid .product-data-action::before {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  right: -80px;
  bottom: -100px;

  border: 1px solid rgba(169, 237, 77, .22);

  border-radius: 50%;
}

/* Второй круг */
.product-data-grid .product-data-action::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -40px;
  bottom: -60px;

  border: 1px solid rgba(169, 237, 77, .12);

  border-radius: 50%;
}

/* Текст CTA */
.product-data-action p {
  position: relative;
  z-index: 2;

  max-width: 330px;

  color: rgba(255,255,255,.55);
}

/* Кнопка */
.product-data-action .button {
  position: relative;
  z-index: 3;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.product-data-action .button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 35px rgba(169, 237, 77, .18);
}
.product-data-grid article:nth-child(5)::before {
  content: "05";
}
/* =========================================
   MIRKO — TECHNICAL CARD DETAILS
   ========================================= */

.product-data-grid article:not(.product-data-action) {
  isolation: isolate;
}

/* Большой технический круг */
.product-data-grid article:not(.product-data-action) {
  background-image:
    radial-gradient(
      circle at 92% 88%,
      rgba(169, 237, 77, .12) 0,
      rgba(169, 237, 77, .05) 70px,
      transparent 150px
    );
}

/* Тонкий инженерный контур */
.product-data-grid article:not(.product-data-action)::after {
  content: "";

  position: absolute;

  width: 55px;
height: 55px;
right: 20px;
bottom: 120px;

  border: 1px solid rgba(11, 23, 17, .08);

  border-radius: 50%;

  transform: rotate(0deg);

  transition:
    transform .6s ease,
    border-color .4s ease;
}

/* Внутренний круг */
.product-data-grid article:not(.product-data-action)::before {
  /* сохраняем номера 01–05 */
  z-index: 1;
}

/* При наведении круг немного поворачивается */
.product-data-grid article:not(.product-data-action):hover::after {
  transform: rotate(25deg) scale(1.08);

  border-color: rgba(169, 237, 77, .32);
} 
/* =========================================
   MIRKO — PRODUCT CTA
   ========================================= */

.product-data-action {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.product-cta-label {
  position: relative;
  z-index: 3;

  color: rgba(255,255,255,.42);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-data-action h3 {
  position: relative;
  z-index: 3;

  max-width: 360px;
  margin: 45px 0 0;

  color: #fff;

  font-size: clamp(30px, 3vw, 46px);
  line-height: .95;
  letter-spacing: -.06em;
}

.product-data-action p {
  position: relative;
  z-index: 3;

  max-width: 340px;
  margin-top: 22px;
}

.product-data-action .button {
  position: relative;
  z-index: 3;

  margin-top: 30px;
  align-self: flex-start;
}
/* CTA stays dark on hover */
.product-data-grid .product-data-action:hover {
  background: var(--forest);
  color: #fff;
  transform: translateY(-5px);

  box-shadow:
    inset 0 0 0 1px rgba(169, 237, 77, .18);
}

.product-data-grid .product-data-action:hover p {
  color: rgba(255, 255, 255, .5);
}
/* =========================================
   MIRKO — PRODUCT DATA REVEAL
   ========================================= */

.product-data-grid {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1);
}

.product-data-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.product-data-grid article {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.8,.2,1);
}

/* Карточки появляются по очереди */
.product-data-grid.is-visible article:nth-child(1) {
  transition-delay: .05s;
}

.product-data-grid.is-visible article:nth-child(2) {
  transition-delay: .12s;
}

.product-data-grid.is-visible article:nth-child(3) {
  transition-delay: .19s;
}

.product-data-grid.is-visible article:nth-child(4) {
  transition-delay: .26s;
}

.product-data-grid.is-visible article:nth-child(5) {
  transition-delay: .33s;
}

.product-data-grid.is-visible article:nth-child(6) {
  transition-delay: .40s;
}

.product-data-grid.is-visible article {
  opacity: 1;
  transform: translateY(0);
}

/* Для пользователей, отключивших анимации */
@media (prefers-reduced-motion: reduce) {
  .product-data-grid,
  .product-data-grid article {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================
   FIX — EQUAL PRODUCT DATA ROWS
   ========================================= */

.product-data-grid {
  grid-auto-rows: 300px;
}

.product-data-grid article {
  min-height: 0;
}

/* Компактнее размещаем содержимое CTA */
.product-data-grid .product-data-action {
  gap: 0;
}

.product-data-action h3 {
  margin-top: 28px;
}

.product-data-action p {
  margin-top: 16px;
}

.product-data-action .button {
  margin-top: 22px;
}
/* =========================================
   MIRKO — SPEC VALUE HOVER
   ========================================= */

.product-data-grid article > strong {
  display: inline-block;
  transform-origin: left center;

  transition:
    color .3s ease,
    transform .35s cubic-bezier(.2,.8,.2,1);
}

.product-data-grid article:not(.product-data-action):hover > strong {
  color: var(--green);
  transform: scale(1.04);
}
/* =========================================
   MIRKO — APPLICATION CARDS
   ========================================= */

.applications-grid article {
  position: relative;
  overflow: hidden;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    background .45s ease;
}

/* Тонкая зелёная линия снизу */
.applications-grid article::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background: var(--green);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform .45s ease;
}

/* Наведение */
.applications-grid article:hover {
  transform: translateY(-8px);

  box-shadow:
    0 25px 60px rgba(11, 23, 17, .10);
}

.applications-grid article:hover::after {
  transform: scaleX(1);
}
.applications-grid article:hover .application-shape {
  transform: scale(1.06);
}

.application-shape {
  transition:
    transform .5s cubic-bezier(.2,.8,.2,1);
}
/* =========================================
   MIRKO — APPLICATION CARD DETAILS
   ========================================= */

.applications-grid article:nth-child(1)::before {
  content: "НАРУЖНЫЕ СИСТЕМЫ";
}

.applications-grid article:nth-child(2)::before {
  content: "СКАТНЫЕ / ПЛОСКИЕ";
}

.applications-grid article:nth-child(3)::before {
  content: "ВНУТРЕННИЕ СИСТЕМЫ";
}

.applications-grid article:nth-child(4)::before {
  content: "МЕЖЭТАЖНЫЕ СИСТЕМЫ";
}

.applications-grid article::before {
  position: absolute;
  left: 0;
  bottom: 18px;

  color: rgba(11, 23, 17, .30);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;

  transition:
    color .3s ease,
    transform .3s ease;
}

.applications-grid article:hover::before {
  color: var(--green);
  transform: translateX(4px);
}
/* =========================================
   MIRKO — APPLICATION SHAPE MOTION
   ========================================= */

.applications-grid article .application-shape {
  transition:
    transform .7s cubic-bezier(.2,.8,.2,1);
  transform-origin: center;
}

.applications-grid article:hover .application-shape {
  transform: scale(1.08) rotate(3deg);
}

/* Внутренний элемент */
.applications-grid article .application-shape i {
  transition:
    transform .7s cubic-bezier(.2,.8,.2,1);
}

.applications-grid article:hover .application-shape i {
  transform: scale(1.06);
}

/* Акцентная карточка "Кровли" */
.applications-grid article:nth-child(2):hover .application-shape {
  transform: scale(1.1) rotate(-3deg);
}
/* =========================================
   MIRKO — APPLICATIONS HEADING
   ========================================= */

.applications-heading-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  padding-bottom: 8px;
}

.applications-heading-side > p {
  max-width: 430px;
  margin: 0;
  padding-left: 20px;

  border-left: 2px solid var(--green);

  color: rgba(11, 23, 17, .58);
  font-size: 15px;
  line-height: 1.65;
}

/* Технические категории */
.applications-heading-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 42px;

  border-top: 1px solid rgba(11, 23, 17, .12);
}

.applications-heading-meta > div {
  min-height: 64px;
  padding: 16px 18px;

  border-right: 1px solid rgba(11, 23, 17, .12);
  border-bottom: 1px solid rgba(11, 23, 17, .12);

  transition:
    background .3s ease,
    color .3s ease;
}

.applications-heading-meta > div:nth-child(2n) {
  border-right: 0;
}

.applications-heading-meta span {
  display: block;
  margin-bottom: 8px;

  color: var(--green);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .14em;
}

.applications-heading-meta strong {
  display: block;

  color: var(--ink);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Hover */
.applications-heading-meta > div:hover {
  background: rgba(169, 237, 77, .08);
}

/* Mobile */
@media (max-width: 820px) {
  .applications-heading-side {
    margin-top: 8px;
  }

  .applications-heading-side > p {
    max-width: 100%;
    font-size: 13px;
  }

  .applications-heading-meta {
    margin-top: 30px;
  }
}

@media (max-width: 520px) {
  .applications-heading-meta > div {
    min-height: 58px;
    padding: 14px;
  }

  .applications-heading-meta strong {
    font-size: 9px;
  }
}
/* Technical application list */
.applications-heading-meta > div {
  position: relative;
  cursor: default;
  transition:
    background .3s ease,
    padding-left .3s ease;
}

.applications-heading-meta > div::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 2px;
  height: 0;

  background: var(--lime);

  transform: translateY(-50%);
  transition: height .3s ease;
}

.applications-heading-meta > div:hover {
  padding-left: 23px;
  background: rgba(169, 237, 77, .06);
}

.applications-heading-meta > div:hover::before {
  height: 24px;
}
/* =========================================
   MIRKO — FIRE TEST SECTION
   ========================================= */

.fire-test-section {
  position: relative;

  min-height: 760px;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: clamp(40px, 6vw, 100px);

  padding: clamp(70px, 8vw, 120px);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(180, 232, 95, .08),
      transparent 34%
    ),
    var(--forest);

  color: white;
}

/* =========================================
   VIDEO
   ========================================= */

.fire-test-video {
  position: relative;

  min-height: 620px;

  overflow: hidden;

  border: 1px solid rgba(180, 232, 95, .22);
  border-radius: 28px;

  background: #020805;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, .30);
}

.fire-test-video::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 11, .04),
      transparent 55%,
      rgba(4, 18, 11, .5)
    );

  pointer-events: none;
}

.fire-test-video video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transform: scale(1.01);

  filter:
    saturate(.88)
    contrast(1.08);
}

/* Верхняя подпись */

.fire-test-video-label {
  position: absolute;

  z-index: 3;

  top: 24px;
  left: 24px;

  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fire-test-video-label span {
  color: var(--lime);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.fire-test-video-label strong {
  color: rgba(255,255,255,.82);

  font-size: 9px;
  letter-spacing: .11em;
}

/* Индикатор */

.fire-test-video-status {
  position: absolute;

  z-index: 3;

  right: 24px;
  bottom: 24px;

  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(255,255,255,.58);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}

.fire-test-video-status i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--lime);

  box-shadow:
    0 0 0 5px rgba(180,232,95,.10);
}

/* =========================================
   CONTENT
   ========================================= */

.fire-test-content {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;

  justify-content: center;

  max-width: 620px;
}

.fire-test-temperature {
  margin: 30px 0 12px;

  color: var(--lime);

  font-family: var(--display);

  font-size: clamp(100px, 13vw, 200px);

  font-weight: 900;

  line-height: .72;

  letter-spacing: -.09em;
}

.fire-test-temperature span {
  margin-left: 8px;

  color: white;

  font-size: .28em;

  letter-spacing: -.02em;
}

.fire-test-content h2 {
  margin: 30px 0 24px;

  font-family: var(--display);

  font-size: clamp(48px, 5.2vw, 84px);

  font-weight: 850;

  line-height: .86;

  letter-spacing: -.065em;

  text-transform: uppercase;
}

.fire-test-content > p {
  max-width: 520px;

  margin: 0;

  color: rgba(255,255,255,.56);

  font-size: 14px;

  line-height: 1.65;
}

/* =========================================
   FIRE TEST POINTS
   ========================================= */

.fire-test-points {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 42px;

  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.fire-test-points > div {
  min-height: 100px;

  padding: 18px 16px;

  border-right: 1px solid rgba(255,255,255,.12);
}

.fire-test-points > div:last-child {
  border-right: 0;
}

.fire-test-points span {
  display: block;

  margin-bottom: 18px;

  color: var(--lime);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

.fire-test-points strong {
  display: block;

  color: rgba(255,255,255,.86);

  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .04em;
}

/* Ссылка */

.fire-test-content .text-link {
  margin-top: 34px;

  align-self: flex-start;
}

/* Линии */

.fire-test-lines {
  opacity: .55;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 900px) {

  .fire-test-section {
    grid-template-columns: 1fr;

    min-height: auto;

    padding: 70px 22px;
  }

  .fire-test-video {
    min-height: 560px;

    max-width: 520px;

    width: 100%;

    margin: 0 auto;
  }

  .fire-test-content {
    max-width: none;
  }

  .fire-test-temperature {
    font-size: clamp(90px, 23vw, 150px);
  }

  .fire-test-content h2 {
    font-size: clamp(44px, 11vw, 72px);
  }
}

@media (max-width: 600px) {

  .fire-test-video {
    min-height: 520px;

    border-radius: 20px;
  }

  .fire-test-points {
    grid-template-columns: 1fr;
  }

  .fire-test-points > div {
    border-right: 0;

    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .fire-test-points > div:last-child {
    border-bottom: 0;
  }
}
/* =========================================
   MIRKO — CALCULATOR RESULT DETAILS
   ========================================= */

.calculator-coverage {
  display: grid;
  gap: 8px;

  margin: 18px 0 35px;

  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.4;
}

.calculator-coverage span {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(255,255,255,.10);
}

.calculator-coverage span:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.calculator-coverage strong {
  color: rgba(255,255,255,.88);
  font-weight: 700;
}
/* =========================================
   MIRKO — PROJECT JOURNAL
   ========================================= */

.project-journal-image {
  position: relative;
  overflow: hidden;
}

.project-journal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform .9s cubic-bezier(.2,.8,.2,1),
    filter .7s ease;
}

.project-journal-image::before {
  content: "";

  position: absolute;
  z-index: 2;
  left: 34px;
  top: 34px;

  width: 42px;
  height: 2px;

  background: var(--lime);

  transition:
    width .45s ease;
}

.project-journal-image::after {
  content: "";

  position: absolute;
  z-index: 2;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(4, 18, 11, .02),
      rgba(4, 18, 11, .28)
    );

  pointer-events: none;

  transition: opacity .5s ease;
}

.project-journal:hover .project-journal-image img {
  transform: scale(1.045);
  filter: saturate(.78) contrast(1.06);
}

.project-journal:hover .project-journal-image::before {
  width: 76px;
}
.journal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 34px;
}

.journal-meta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 0 15px;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;

  color: rgba(255,255,255,.38);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;

  transition:
    color .3s ease,
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;
}

.journal-meta span:hover {
  color: white;
  border-color: rgba(180,232,95,.35);
  background: rgba(180,232,95,.06);
  transform: translateY(-2px);
}
/* =========================================
   MIRKO — FACTORY VISUAL
   ========================================= */

/* =========================================
   MIRKO — REVIEW CARDS
   ========================================= */

.reviews-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(11, 23, 17, .12);
}

.review-card {
  position: relative;

  min-height: 390px;
  padding: 34px;

  display: flex;
  flex-direction: column;

  background: var(--paper);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    color .35s ease;
}

.review-card:hover {
  z-index: 2;
  transform: translateY(-8px);

  background: var(--forest);
  color: white;
}

.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-stars {
  color: var(--green);
  font-size: 13px;
  letter-spacing: .12em;
}

.review-card:hover .review-stars {
  color: var(--lime);
}

.review-number {
  color: rgba(11,23,17,.28);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

.review-card:hover .review-number {
  color: rgba(255,255,255,.35);
}

.review-card blockquote {
  margin: auto 0;

  max-width: 430px;

  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 700;
  line-height: 1.05;

  letter-spacing: -.045em;
}

.review-author {
  display: flex;
  flex-direction: column;
  gap: 6px;

  padding-top: 24px;

  border-top: 1px solid rgba(11,23,17,.13);
}

.review-card:hover .review-author {
  border-color: rgba(255,255,255,.14);
}

.review-author strong {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.review-author span {
  color: rgba(11,23,17,.48);

  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.review-card:hover .review-author span {
  color: rgba(255,255,255,.45);
}

/* Mobile */

@media (max-width: 820px) {
  .reviews-cards {
    grid-template-columns: 1fr;
  }

  .review-card {
    min-height: 330px;
  }
}
/* =========================================
   MIRKO — FINAL CTA
   ========================================= */

.final-cta {
  position: relative;
  overflow: hidden;

  min-height: 680px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(80px, 10vw, 140px) clamp(24px, 6.7vw, 108px);

  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(169, 237, 77, .08),
      transparent 28%
    ),
    var(--forest);

  color: white;
}

.final-cta h2 {
  position: relative;
  z-index: 2;

  max-width: 1050px;

  margin: 28px 0 24px;

  font:
    850 clamp(64px, 9vw, 150px) /.82 var(--display);

  letter-spacing: -.08em;
  text-transform: uppercase;
}

.final-cta h2 em {
  color: var(--lime);
  font-style: normal;
}

.final-cta > p {
  position: relative;
  z-index: 2;

  max-width: 510px;

  margin: 0;

  color: rgba(255,255,255,.55);

  font-size: 15px;
  line-height: 1.65;
}

.final-cta-actions {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 30px;

  margin-top: 38px;
}

.final-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 22px;

  padding: 12px 0;

  border-bottom: 1px solid rgba(255,255,255,.3);

  color: rgba(255,255,255,.8);

  font-size: 12px;
  font-weight: 700;

  transition:
    color .3s ease,
    gap .3s ease,
    border-color .3s ease;
}

.final-cta-secondary span {
  color: var(--lime);
  font-size: 18px;
}

.final-cta-secondary:hover {
  color: white;
  gap: 28px;
  border-color: rgba(169,237,77,.5);
}

/* Большое слово на фоне */

.cta-wordmark {
  position: absolute;
  z-index: 1;

  left: -2vw;
  bottom: -5vw;

  color: rgba(255,255,255,.035);

  font:
    900 clamp(170px, 24vw, 420px) /.75 var(--display);

  letter-spacing: -.1em;

  pointer-events: none;
  user-select: none;
}

/* Mobile */

@media (max-width: 700px) {
  .final-cta {
    min-height: 620px;
  }

  .final-cta-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .cta-wordmark {
    left: -10vw;
    bottom: 2vw;
    font-size: 31vw;
  }
}
.reviews-full {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.reviews-full .review-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 390px !important;
  box-sizing: border-box !important;
  background: var(--paper) !important;
}

@media (max-width: 820px) {
  .reviews-full {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   CERTIFICATES GRID
   ========================================================= */

.certificates-grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;
}


/* Каждая карточка */

.certificates-grid .certificate-card {
  display: grid;
  grid-template-columns: 1fr;

  min-width: 0;

  background: var(--white);

  border: 1px solid rgba(11, 23, 17, .10);

  border-radius: 28px;

  overflow: hidden;

  box-shadow:
    0 25px 70px rgba(11, 23, 17, .08);
}


/* Превью */

.certificates-grid .certificate-preview {
  min-height: 560px;

  padding: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(180, 232, 95, .12),
      transparent 45%
    ),
    #eef0e9;
}


/* Картинка сертификата */

.certificates-grid .certificate-preview img {
  display: block;

  width: 100%;
  max-width: 430px;
  height: auto;

  object-fit: contain;

  background: #fff;

  box-shadow:
    0 25px 60px rgba(11, 23, 17, .15);

  transition:
    transform .45s ease,
    box-shadow .45s ease;
}


/* Hover */

.certificates-grid .certificate-preview a:hover img {
  transform: translateY(-8px);

  box-shadow:
    0 35px 80px rgba(11, 23, 17, .20);
}


/* Информация */

.certificates-grid .certificate-info {
  min-height: 430px;

  padding: 50px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  background: var(--forest);

  color: #fff;
}


/* Тип */

.certificates-grid .certificate-type {
  margin-bottom: 20px;

  color: var(--lime);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;
}


/* Название */

.certificates-grid .certificate-info h3 {
  margin: 0 0 35px;

  font-family: var(--display);

  font-size: clamp(48px, 5vw, 78px);

  font-weight: 850;

  line-height: .85;

  letter-spacing: -.06em;
}


/* Таблица */

.certificates-grid .certificate-info dl {
  display: grid;
  grid-template-columns: 1fr 1fr;

  margin: 0 0 30px;

  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}


.certificates-grid .certificate-info dl > div {
  padding: 20px 15px 20px 0;

  border-bottom: 1px solid rgba(255,255,255,.12);
}


.certificates-grid .certificate-info dl > div:nth-child(odd) {
  margin-right: 15px;

  border-right: 1px solid rgba(255,255,255,.12);
}


.certificates-grid .certificate-info dl > div:nth-last-child(-n+2) {
  border-bottom: 0;
}


/* Заголовки */

.certificates-grid .certificate-info dt {
  margin-bottom: 8px;

  color: rgba(255,255,255,.42);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;
}


/* Значения */

.certificates-grid .certificate-info dd {
  margin: 0;

  color: #fff;

  font-size: 13px;

  line-height: 1.4;
}


/* Описание */

.certificates-grid .certificate-info > p {
  max-width: 480px;

  margin: 0 0 30px;

  color: rgba(255,255,255,.58);

  font-size: 13px;

  line-height: 1.6;
}


/* Кнопка */

.certificates-grid .certificate-info .button {
  align-self: flex-start;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1050px) {

  .certificates-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 640px) {

  .certificates-grid {
    gap: 16px;
  }


  .certificates-grid .certificate-preview {
    min-height: 480px;

    padding: 30px 20px;
  }


  .certificates-grid .certificate-info {
    min-height: auto;

    padding: 35px 25px 40px;
  }


  .certificates-grid .certificate-info h3 {
    font-size: 52px;

    margin-bottom: 28px;
  }


  .certificates-grid .certificate-info dl {
    grid-template-columns: 1fr;
  }


  .certificates-grid .certificate-info dl > div,
  .certificates-grid .certificate-info dl > div:nth-child(odd) {
    margin-right: 0;

    border-right: 0;

    border-bottom: 1px solid rgba(255,255,255,.12);
  }


  .certificates-grid .certificate-info dl > div:last-child {
    border-bottom: 0;
  }


  .certificates-grid .certificate-info .button {
    width: 100%;

    justify-content: space-between;
  }

}
:root {
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --bg-primary: #121814;      /* Тёмный премиальный фон (или смените на #ffffff) */
  --bg-card: #1c241e;         /* Фон карточек */
  --accent: #34d399;          /* Изумрудный акцент */
  --text-main: #f3f4f6;       /* Основной текст */
  --text-muted: #9ca3af;      /* Второстепенный текст */
  --border-color: #2d372e;    /* Границы */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Контейнер секции */
.certificates-section {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-main);
  padding: 80px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Заголовок секции */
.section-heading {
  margin-bottom: 56px;
  max-width: 720px;
}

.section-heading .eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}

.section-heading h2 {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.section-heading h2 em {
  font-style: normal;
  color: var(--accent);
}

.section-heading p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Сетка карточек */
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 32px;
}

/* Карточка сертификата */
.certificate-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  transition: var(--transition);
}

.certificate-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Превью скана */
.certificate-preview a {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000;
}

.certificate-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.certificate-card:hover .certificate-preview img {
  transform: scale(1.05);
}

/* Информация о сертификате */
.certificate-info {
  display: flex;
  flex-direction: column;
}

.certificate-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 6px;
}

.certificate-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Таблица с характеристиками (dl, dt, dd) */
.certificate-info dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.certificate-info dt {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.certificate-info dd {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 2px;
}

.certificate-info p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Кнопка */
.button.button-light {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: var(--transition);
}

.button.button-light:hover {
  background-color: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* Адаптивность для мобильных */
@media (max-width: 640px) {
  .certificates-grid {
    grid-template-columns: 1fr;
  }

  .certificate-card {
    grid-template-columns: 1fr;
  }

  .certificate-preview {
    max-width: 220px;
    margin: 0 auto;
  }

  .section-heading h2 {
    font-size: 2rem;
  }
}
/* =========================================================
   MIRKO — ARCHITECTURAL APPLICATION SYSTEM
   No photography / CSS engineered building diagram
   ========================================================= */

.applications-heading-side {
  position: relative;
  overflow: hidden;
}

/* Main diagram */
.applications-building-diagram {
  position: relative;
  width: 100%;
  height: 500px;
  margin-bottom: 34px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(169,237,77,.055),
      transparent 38%
    );

  isolation: isolate;
}

/* Fine engineering grid */
.applications-building-diagram::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(11,23,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,23,17,.035) 1px, transparent 1px);

  background-size: 32px 32px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 12%,
      black 88%,
      transparent
    );

  pointer-events: none;
  z-index: -2;
}


/* =========================================================
   TECH HEADER
   ========================================================= */

.diagram-tech-top {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;

  color: rgba(11,23,17,.34);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.diagram-tech-top span:last-child {
  color: rgba(11,23,17,.22);
}


/* =========================================================
   CENTER AXIS
   ========================================================= */

.diagram-axis-x,
.diagram-axis-y {
  position: absolute;
  pointer-events: none;
}

.diagram-axis-x {
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: rgba(11,23,17,.06);
}

.diagram-axis-y {
  top: 7%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: rgba(11,23,17,.06);
}


/* =========================================================
   BUILDING
   ========================================================= */

.diagram-building {
  position: absolute;

  left: 50%;
  top: 53%;

  width: 330px;
  height: 330px;

  transform: translate(-50%, -50%);

  filter:
    drop-shadow(
      0 25px 40px rgba(11,23,17,.06)
    );
}


/* =========================================================
   ROOF
   ========================================================= */

.diagram-roof {
  position: absolute;

  left: 24px;
  top: 0;

  width: 282px;
  height: 102px;

  cursor: pointer;

  transition:
    transform .6s cubic-bezier(.2,.8,.2,1),
    filter .5s ease;
}

.roof-plane {
  position: absolute;
  inset: 0;

  clip-path: polygon(
    50% 0%,
    100% 65%,
    91% 74%,
    50% 18%,
    9% 74%,
    0% 65%
  );

  background:
    linear-gradient(
      135deg,
      rgba(11,23,17,.05),
      rgba(11,23,17,.015)
    );

  border: 1px solid rgba(11,23,17,.18);

  box-shadow:
    inset 0 1px rgba(255,255,255,.8);
}

.diagram-roof::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 12px;

  width: 1px;
  height: 72px;

  background: rgba(38,114,72,.28);
}

.diagram-zone-label {
  position: absolute;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .15em;

  color: rgba(11,23,17,.32);

  text-transform: uppercase;
}

.diagram-roof .diagram-zone-label {
  right: 7px;
  top: 38px;
}


/* =========================================================
   MAIN BUILDING BODY
   ========================================================= */

.diagram-body {
  position: absolute;

  left: 38px;
  top: 63px;

  width: 254px;
  height: 240px;

  border: 1px solid rgba(11,23,17,.2);

  background:
    linear-gradient(
      90deg,
      rgba(11,23,17,.025),
      rgba(255,255,255,.42),
      rgba(11,23,17,.025)
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65);
}


/* =========================================================
   FACADE
   ========================================================= */

.diagram-facade {
  position: absolute;

  left: -14px;
  top: 0;

  width: 14px;
  height: 183px;

  border-left: 2px solid #267248;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(38,114,72,.10) 0 2px,
      transparent 2px 8px
    );

  cursor: pointer;

  transition:
    width .45s ease,
    background .45s ease,
    box-shadow .45s ease;
}

.diagram-facade .diagram-zone-label {
  left: -8px;
  top: 5px;

  transform:
    translateX(-100%)
    rotate(-90deg);

  transform-origin: right top;
}


/* =========================================================
   INTERIOR
   ========================================================= */

.diagram-interior {
  position: absolute;

  left: 58px;
  top: 36px;

  width: 140px;
  height: 118px;

  border:
    1px dashed
    rgba(11,23,17,.15);

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(169,237,77,.07),
      transparent 65%
    );

  display: flex;
  align-items: center;
  justify-content: center;
}


/* MIRKO CORE */
.diagram-core {
  width: 86px;
  height: 86px;

  border: 1px solid rgba(38,114,72,.3);

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  transform: rotate(45deg);

  background:
    rgba(255,255,255,.55);

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    background .4s ease,
    border-color .4s ease;
}

.diagram-core span,
.diagram-core small {
  transform: rotate(-45deg);
}

.diagram-core span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.diagram-core small {
  margin-top: 4px;

  font-size: 6px;
  font-weight: 800;
  letter-spacing: .22em;

  color: var(--green);
}


/* =========================================================
   WALL
   ========================================================= */

.diagram-wall {
  position: absolute;

  right: -12px;
  top: 0;

  width: 12px;
  height: 183px;

  border-right: 2px solid #267248;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(169,237,77,.08) 0 2px,
      transparent 2px 8px
    );

  cursor: pointer;

  transition:
    width .45s ease,
    background .45s ease,
    box-shadow .45s ease;
}

.diagram-wall .diagram-zone-label {
  right: -8px;
  top: 5px;

  transform:
    translateX(100%)
    rotate(90deg);

  transform-origin: left top;
}


/* =========================================================
   FLOOR
   ========================================================= */

.diagram-floor {
  position: absolute;

  left: 0;
  right: 0;

  bottom: 28px;

  height: 14px;

  border-top: 2px solid #267248;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(38,114,72,.10) 0 3px,
      transparent 3px 12px
    );

  cursor: pointer;

  transition:
    height .45s ease,
    background .45s ease,
    box-shadow .45s ease;
}

.diagram-floor .diagram-zone-label {
  right: 7px;
  top: -18px;
}


/* =========================================================
   CALLOUTS
   ========================================================= */

.diagram-callout {
  position: absolute;

  display: flex;
  flex-direction: column;

  font-size: 7px;

  letter-spacing: .16em;
  text-transform: uppercase;
}

.diagram-callout span {
  color: rgba(11,23,17,.32);
}

.diagram-callout strong {
  margin-top: 5px;

  color: rgba(11,23,17,.72);

  font-size: 9px;
}

.diagram-callout-top {
  left: 2px;
  top: 88px;
}

.diagram-callout-bottom {
  left: 2px;
  bottom: 48px;
}


/* connecting lines */

.diagram-callout-top::after,
.diagram-callout-bottom::after {
  content: "";

  position: absolute;

  left: 100%;
  top: 50%;

  width: 65px;
  height: 1px;

  margin-left: 12px;

  background: rgba(11,23,17,.14);
}


/* =========================================================
   DIMENSIONS
   ========================================================= */

.diagram-dimension {
  position: absolute;

  display: flex;
  align-items: center;

  color: rgba(11,23,17,.28);

  font-size: 6px;
  font-weight: 800;

  letter-spacing: .15em;
}

.diagram-dimension::before {
  content: "";

  width: 40px;
  height: 1px;

  margin-right: 7px;

  background: rgba(11,23,17,.13);
}

.dimension-left {
  left: 10px;
  top: 50%;

  transform: translateY(-50%);
}

.dimension-right {
  right: 10px;
  top: 50%;

  transform:
    translateY(-50%)
    rotate(180deg);
}


/* =========================================================
   HOVER STATES
   ========================================================= */

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(1):hover
) .diagram-facade {
  width: 25px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(169,237,77,.45) 0 3px,
      rgba(169,237,77,.12) 3px 8px
    );

  box-shadow:
    0 0 0 5px rgba(169,237,77,.06);
}

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(1):hover
) .diagram-core {
  transform:
    rotate(45deg)
    scale(1.05);
}


/* ROOF */

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(2):hover
) .diagram-roof {
  transform:
    translateY(-5px)
    scale(1.035);
}

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(2):hover
) .roof-plane {
  background:
    linear-gradient(
      135deg,
      rgba(169,237,77,.28),
      rgba(169,237,77,.06)
    );

  border-color:
    rgba(38,114,72,.45);
}


/* WALL */

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(3):hover
) .diagram-wall {
  width: 23px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(169,237,77,.42) 0 3px,
      rgba(169,237,77,.10) 3px 8px
    );

  box-shadow:
    0 0 0 5px rgba(169,237,77,.06);
}


/* FLOOR */

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(4):hover
) .diagram-floor {
  height: 22px;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(169,237,77,.40) 0 4px,
      rgba(169,237,77,.10) 4px 12px
    );

  box-shadow:
    0 0 0 5px rgba(169,237,77,.05);
}


/* active metadata card */

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(1):hover
) .applications-heading-meta > div:nth-child(1),

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(2):hover
) .applications-heading-meta > div:nth-child(2),

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(3):hover
) .applications-heading-meta > div:nth-child(3),

.applications-heading-side:has(
  .applications-heading-meta > div:nth-child(4):hover
) .applications-heading-meta > div:nth-child(4) {
  background: rgba(169,237,77,.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

  .applications-building-diagram {
    height: 470px;
    margin-top: 30px;
  }

  .diagram-building {
    transform:
      translate(-50%, -50%)
      scale(.84);

    transform-origin: center;
  }

  .diagram-callout-top {
    left: 0;
    top: 72px;
  }

  .diagram-callout-bottom {
    left: 0;
    bottom: 40px;
  }

  .applications-heading-side:has(
    .applications-heading-meta > div:hover
  ) .diagram-facade,
  .applications-heading-side:has(
    .applications-heading-meta > div:hover
  ) .diagram-wall {
    width: 16px;
  }
}

@media (max-width: 520px) {

  .applications-building-diagram {
    height: 430px;
  }

  .diagram-building {
    transform:
      translate(-50%, -50%)
      scale(.68);
  }

  .diagram-tech-top {
    font-size: 6px;
  }

  .diagram-callout {
    font-size: 6px;
  }

  .diagram-callout strong {
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .diagram-building *,
  .applications-building-diagram * {
    transition: none !important;
  }
}
/* =========================================================
   FOUNDER SECTION
   ========================================================= */

.founder-section {
  position: relative;
  padding: 140px 6vw;
  background: #f3f1eb;
  color: #111;
  overflow: hidden;
}

.founder-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 80px;
}

.founder-top > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.founder-index,
.founder-year {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

.founder-grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
  gap: clamp(50px, 8vw, 140px);
  align-items: start;
}

/* PHOTO */

.founder-photo {
  position: relative;
}

.founder-photo-placeholder {
  aspect-ratio: 4 / 5;
  min-height: 620px;
  background:
    linear-gradient(135deg, #d9d6ce 0%, #c6c3ba 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.founder-photo-placeholder::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  right: -18%;
  top: -12%;
  border: 1px solid rgba(13, 38, 27, .16);
  transform: rotate(45deg);
}

.founder-photo-placeholder::after {
  content: "M";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 700;
  line-height: 1;
  color: rgba(13, 38, 27, .07);
}

.founder-photo-placeholder span,
.founder-photo-placeholder small {
  position: relative;
  z-index: 2;
}

.founder-photo-placeholder span {
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 600;
}

.founder-photo-placeholder small {
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .5;
}

/* CONTENT */

.founder-content {
  padding-top: 10px;
  max-width: 720px;
}

.founder-label {
  display: block;
  margin-bottom: 28px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .55;
}

.founder-content h2 {
  margin: 0;
  font-size: clamp(52px, 6.5vw, 100px);
  line-height: .91;
  letter-spacing: -.055em;
  font-weight: 500;
}

.founder-content h2 em {
  font-style: normal;
  color: #0d261b;
}

.founder-lead {
  max-width: 580px;
  margin: 42px 0 34px;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.founder-line {
  width: 100%;
  height: 1px;
  background: rgba(17, 17, 17, .15);
  margin-bottom: 34px;
}

.founder-content > p:not(.founder-lead) {
  max-width: 650px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17, 17, 17, .72);
}

/* QUOTE */

.founder-quote {
  margin-top: 65px;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 17, 17, .15);
  position: relative;
}

.founder-quote > span {
  display: block;
  font-family: Georgia, serif;
  font-size: 70px;
  line-height: .5;
  color: #0d261b;
}

.founder-quote blockquote {
  max-width: 620px;
  margin: 25px 0 0;
  font-size: clamp(25px, 2.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

/* MOBILE */

@media (max-width: 900px) {

  .founder-section {
    padding: 90px 6vw;
  }

  .founder-top {
    margin-bottom: 55px;
  }

  .founder-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .founder-photo-placeholder {
    min-height: auto;
  }

  .founder-content h2 {
    font-size: clamp(48px, 13vw, 78px);
  }

}

@media (max-width: 600px) {

  .founder-section {
    padding: 75px 5vw;
  }

  .founder-top {
    margin-bottom: 40px;
  }

  .founder-year {
    display: none;
  }

  .founder-photo-placeholder {
    aspect-ratio: 4 / 5;
    padding: 22px;
  }

  .founder-content h2 {
    font-size: 16vw;
  }

  .founder-lead {
    margin-top: 32px;
    font-size: 21px;
  }

  .founder-content > p:not(.founder-lead) {
    font-size: 15px;
    line-height: 1.65;
  }

  .founder-quote {
    margin-top: 45px;
  }

  .founder-quote blockquote {
    font-size: 27px;
  }
}