/* ================================================================
   ROLFI V2 — DESIGN SYSTEM
   All CSS stays in the single HTML file delivered to the client.
   ================================================================ */
:root {
    --navy: #07192b;
    --deep: #091e32;
    --mid: #142e47;
    --blue: #0b75de;
    --sky: #5bbefb;
    --ink: #102238;
    --muted: #68788b;
    --paper: #f4f7fa;
    --line: #dfe6ed;
    --white: #fff;
    --radius: 16px;
    --shadow: 0 16px 56px rgba(8, 32, 52, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: white; font-family: Inter, "Segoe UI", Arial, sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 50px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.section { padding: 100px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 34px; }
.section-heading > * { max-width: 760px; }
.section-heading h2, .about-section h2, .contact-section h2, .compare-section h2, .assistant-section h2 {
    font-size: clamp(34px, 4.15vw, 58px); font-weight: 800; letter-spacing: -0.055em; line-height: 1.08; margin: 9px 0 17px;
}
.section-intro { color: var(--muted); font-size: 16px; line-height: 1.76; margin: 0; max-width: 615px; }
.section-heading > .section-intro { max-width: 425px; }
.eyebrow { color: #2377ba; text-transform: uppercase; font-weight: 800; font-size: 11px; letter-spacing: .26em; margin: 0; }
.eyebrow-light { color: #6ac6ff; }
.text-blue { color: #62c2ff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 17px 25px; min-height: 52px; border: 1px solid transparent; border-radius: 7px; font-weight: 750; font-size: 14px; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg,#087de6,#0757bd); color: white; box-shadow: 0 9px 22px #056ac72d; }
.btn-primary:hover { box-shadow: 0 14px 28px #056ac747; }
.btn-light { color: #09355a; background: white; }
.btn-small { padding: 12px 16px; min-height: 40px; font-size: 12px; }

/* HEADER */
.site-header { z-index: 100; position: sticky; top: 0; background: rgba(255,255,255,.97); border-bottom: 1px solid #eaf0f6; backdrop-filter: blur(18px); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 84px; }
.brand { min-width: 260px; display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 70px; height: 58px; object-fit: contain; mix-blend-mode: multiply; }
.brand-wordmark { display: flex; flex-direction: column; gap: 2px; }
.brand-wordmark strong { font-size: 13px; font-weight: 900; line-height: 1.3; letter-spacing: .025em; }
.brand-wordmark small { color: var(--blue); font-weight: 900; letter-spacing: .1em; font-size: 11px; }
.main-nav { display: flex; justify-content: center; gap: clamp(13px, 1.7vw, 29px); align-items: center; flex: 1; }
.main-nav a { font-size: 12px; font-weight: 750; white-space: nowrap; color: #354b60; transition: color .2s; }
.main-nav a:hover { color: var(--blue); }
.lang-toggle { display: flex; border-radius: 32px; background: #eaf2fa; border: 1px solid #c9dbea; padding: 4px; }
.lang-toggle button { border: 0; background: transparent; padding: 9px 13px; border-radius: 21px; color: #36536d; font-weight: 800; font-size: 12px; }
.lang-toggle .is-current { color: white; background: #086dd0; }
.mobile-menu { display: none; border: 0; color: #0a2844; background: transparent; font-size: 25px; }

/* PHOTO HERO */
.hero { color: white; min-height: 725px; position: relative; display: flex; align-items: center; overflow: hidden; background: #0b233b; }
.hero-photograph, .hero-scrim { position: absolute; inset: 0; }
.photo-bg { background-size: cover; background-position: center; }
.hero-photograph { background-position: center 35%; filter: saturate(.9) contrast(1.08); transform: scale(1.02); }
.hero-scrim { background: linear-gradient(90deg,rgba(5,19,32,.97) 0%,rgba(8,28,45,.93) 32%,rgba(5,20,33,.36) 72%,rgba(5,20,33,.25) 100%), linear-gradient(0deg,#07192be6,transparent 45%); }
.hero-inner { width: 100%; z-index: 2; position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding-top: 100px; padding-bottom: 100px; }
.hero-copy { max-width: 770px; }
.hero h1 { font-size: clamp(63px,7vw,104px); font-weight: 900; letter-spacing: -.071em; line-height: .99; margin: 25px 0; }
.hero h1 span { display: block; }
.hero-subtitle { font-size: clamp(16px,1.4vw,19px); color: #e4eaf0; line-height: 1.65; max-width: 615px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-highlights { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 55px; font-size: 12px; font-weight: 650; color: #dce8f0; }
.hero-highlights > span { display: flex; gap: 8px; }
.hero-highlights > span::first-letter { color: #62c2ff; }
.hero-side-note { font-size: 10px; letter-spacing: .24em; writing-mode: vertical-rl; opacity: .83; display: flex; gap: 15px; align-items: center; }
.hero-side-note strong { color: #69c8ff; }
.mini-rule { height: 65px; width: 1px; background: #abd9f0; }

/* PRODUCT STUDIO */
.studio-section { background: white; }
.studio-heading .section-index { font-size: 36px; font-weight: 800; color: #0b72cf; letter-spacing: -.07em; }
.section-index span { font-size: 10px; color: #7991a4; letter-spacing: .19em; font-weight: 800; }
.studio-scene { min-height: 650px; position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: #122f48; box-shadow: var(--shadow); }
.house-background { position: absolute; inset: 0; background-position: center center; filter: saturate(.93) contrast(1.09); }
.house-tint { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(5,18,31,.8),rgba(5,22,37,.12) 55%,rgba(5,18,31,.23)),linear-gradient(90deg,transparent 20%,rgba(5,22,35,.12) 64%,rgba(5,16,26,.83)); }
.house-roof-patch { display: none; position: absolute; opacity: .65; background-size: 220px auto; mix-blend-mode: multiply; transition: background-image .3s,background-color .35s; filter: contrast(1.25); }
/* Patches follow the approximate roof regions in the reference scene. */
.patch-left { left: 6%; top: 20%; width: 48%; height: 27%; clip-path: polygon(0 76%, 45% 18%, 67% 6%, 100% 63%, 94% 93%, 2% 100%); transform: rotate(-1deg); }
.patch-right { left: 49%; top: 8%; width: 48%; height: 28%; clip-path: polygon(1% 72%, 42% 0%, 63% 12%, 100% 81%, 94% 96%, 0 100%); }
.studio-vignette { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,16,29,.05) 0%,transparent 42%,rgba(4,18,30,.79) 76%); pointer-events: none; }
.studio-top-tag { position: absolute; top: 25px; left: 30px; color: white; display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 800; letter-spacing: .16em; z-index: 4; }
.live-dot { width: 8px; height: 8px; background: #39d6b0; border-radius: 50%; box-shadow: 0 0 0 4px #39d6b02b; }
.studio-photo-tag { position: absolute; left: 30px; bottom: 23px; font-size: 10px; color: #bed0db; z-index: 4; letter-spacing: .04em; }
.studio-details { position: absolute; right: 27px; top: 90px; width: 294px; padding: 28px; background: rgba(255,255,255,.96); border: 1px solid #fff; box-shadow: 0 16px 44px #020f1b4d; border-radius: 12px; z-index: 7; }
.details-mini { font-size: 10px; color: #1d7bc8; font-weight: 800; letter-spacing: .19em; }
.studio-details h3 { font-size: 26px; line-height: 1.14; letter-spacing: -.04em; margin: 16px 0 9px; }
.studio-details p { color: #62778c; font-size: 13px; line-height: 1.65; }
.detail-rule { height: 1px; background: #d9e1e8; margin: 18px 0; }
.detail-points { display: grid; gap: 12px; margin-bottom: 26px; }
.detail-point { color: #324b60; font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 10px; }
.detail-point:before { content: '✓'; border-radius: 50%; width: 16px; height: 16px; display: grid; place-items: center; font-weight: 900; color: white; background: #0876db; font-size: 10px; flex-shrink: 0; }
.material-display { z-index: 5; position: absolute; width: 520px; height: 500px; bottom: 18px; left: 33%; pointer-events: none; perspective: 930px; }
.material-aura { position: absolute; width: 370px; height: 140px; border-radius: 50%; background: #5dcbff40; filter: blur(35px); bottom: 56px; left: 70px; }
.sample-rotator { position: absolute; width: 356px; height: 248px; top: 30px; left: 82px; transform-style: preserve-3d; transform: rotateX(-9deg) rotateY(0deg); animation: sample-turn 15s linear infinite; filter: drop-shadow(0 34px 22px #0009); }
.sample-slab { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(9deg) rotateZ(-7deg); }
.sample-front,.sample-back { position: absolute; inset: 0; background-position: center; background-size: cover; border-radius: 2px; backface-visibility: hidden; border: 2px solid #9dacb68c; box-shadow: inset 0 0 16px #ffffff55, inset 0 -30px 60px #0008; }
.sample-front { transform: translateZ(12px); }
.sample-back { transform: rotateY(180deg) translateZ(12px); }
.sample-edge { position: absolute; background: linear-gradient(#6d7b88,#1a252c); backface-visibility: hidden; }
.sample-edge-top { width: 100%; height: 24px; top: 0; transform-origin: top; transform: rotateX(-90deg); }
.sample-edge-bottom { width: 100%; height: 24px; bottom: 0; transform-origin: bottom; transform: rotateX(90deg); }
.sample-edge-left { width: 24px; height: 100%; left: 0; transform-origin: left; transform: rotateY(90deg); }
.sample-edge-right { width: 24px; height: 100%; right: 0; transform-origin: right; transform: rotateY(-90deg); }
@keyframes sample-turn { from {transform: rotateX(-8deg) rotateY(0deg)} to {transform: rotateX(-8deg) rotateY(360deg)} }
.pedestal-top { position: absolute; bottom: 90px; left: 43px; height: 93px; width: 436px; border-radius: 50%; background: radial-gradient(ellipse at 38% 28%,#f3f8fb,#93b0c6 63%,#365b73 82%,#15364e); box-shadow: 0 0 0 8px #d4e7f185,0 16px 30px #061422aa; }
.pedestal-body { position: absolute; left: 45px; width: 432px; height: 94px; bottom: 49px; background: linear-gradient(90deg,#274a63,#83a5bb 20%,#c1d8e6 43%,#5c809a 70%,#1a394e); border-radius: 0 0 48% 48% / 0 0 31% 31%; }
.pedestal-base { position: absolute; bottom: 29px; left: 43px; width: 437px; height: 38px; border-radius: 50%; background: linear-gradient(#b9d5e7,#184258); box-shadow: 0 17px 29px #0008; }
.sample-hint { z-index: 6; position: absolute; bottom: 19px; left: 36%; font-size: 11px; color: #d1e1ed; font-weight: 600; }
.material-arrows { position: absolute; bottom: 54px; left: 23px; display: flex; gap: 8px; z-index: 7; }
.material-arrows button { width: 43px; height: 43px; background: #ffffffec; border: 0; border-radius: 50%; font-size: 31px; color: #14517e; display: grid; place-items: center; }
.material-arrows button:hover { background: #0b75de; color: white; }
.material-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin: 17px 0; }
.material-choice { background: white; padding: 6px 6px 13px; border: 1px solid #d9e5ed; border-radius: 11px; text-align: left; min-width: 0; box-shadow: 0 2px 10px #072c4c08; }
.material-choice.is-current { border: 2px solid #167de0; padding: 5px 5px 12px; box-shadow: 0 0 0 4px #167de014; }
.material-thumb { display: block; width: 100%; aspect-ratio: 2.1/1; border-radius: 7px; background-position: center; background-size: cover; margin-bottom: 12px; }
.material-choice strong { margin: 0 8px; font-size: 13px; display: block; color: #16334d; }
.material-choice small { display: block; margin: 5px 8px 0; color: #8290a0; font-size: 11px; }
.material-bottom-bar { border-radius: 13px; background: #eef5fb; padding: 20px 24px; display: flex; gap: 25px; justify-content: space-between; align-items: center; }
.material-bottom-bar strong { display: block; font-size: 14px; }
.material-bottom-bar span { display: block; font-size: 11px; color: #698097; margin-top: 5px; }
.color-swatch-list { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch { width: 33px; height: 33px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 1px #c8d3dd; }
.color-swatch.is-current { box-shadow: 0 0 0 3px #0b75de; }

/* SERVICES */
.light-section { background: #f5f8fb; }
.services-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.service-card { background: white; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 24px #0f3c5f0c; }
.service-image { width: 100%; height: 214px; background-size: cover; background-position: center; }
.service-content { padding: 23px; min-height: 172px; }
.service-content > span { color: #2686ce; font-size: 11px; letter-spacing: .17em; font-weight: 850; }
.service-content h3 { font-size: 20px; margin: 8px 0; letter-spacing: -.03em; }
.service-content p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ANATOMY */
.dark-section { color: white; background: radial-gradient(circle at 18% 50%,#204564,#081c2f 70%); }
.dark-section .section-intro { color: #bdcdd9; }
.anatomy-layout { display: grid; grid-template-columns: 1.25fr .85fr; gap: 50px; align-items: stretch; }
.anatomy-viewport { border-radius: 15px; position: relative; height: 590px; background: radial-gradient(ellipse at 46% 42%,#39637b,#0c263c 70%); overflow: hidden; }
.anatomy-viewport:after { position: absolute; content: ''; bottom: 58px; left: 18%; width: 68%; height: 60px; border-radius: 50%; background: #020d157d; filter: blur(22px); }
.anatomy-glow { position: absolute; background: #50b8f424; width: 450px; height: 250px; left: 12%; top: 19%; filter: blur(65px); }
.anatomy-stack { position: absolute; left: 13%; top: 34%; width: 73%; height: 55%; transform-style: preserve-3d; perspective: 800px; }
.anatomy-layer { --offset: 0px; --rotate: 0deg; position: absolute; left: 4%; width: 89%; height: 125px; top: 145px; transform: translateY(var(--offset)) perspective(760px) rotateX(57deg) rotateZ(-11deg); transform-origin: 50% 50%; border-radius: 3px; background-size: cover; background-position: center; border: 2px solid #c6dbe266; box-shadow: 12px 26px 14px #010d18a8,inset 0 -18px 22px #0006; transition: transform .35s, box-shadow .3s, outline-color .2s; cursor: pointer; }
.anatomy-layer span { position: absolute; top: 8px; left: 10px; background: #092c43cf; color: white; font-size: 12px; font-weight: 850; padding: 5px; }
.anatomy-layer.is-current { outline: 3px solid #6fd0ff; outline-offset: 4px; box-shadow: 12px 26px 14px #010d18a8, 0 0 26px #2fbbff9c; }
.layer-underlayment { background: repeating-linear-gradient(10deg,#253442,#354859 4px,#1e303f 7px); }
.layer-decking { background: repeating-linear-gradient(90deg,#bb8a55 0px,#d7a975 25px,#986d42 34px,#d9b580 46px); }
.layer-ventilation { background: repeating-linear-gradient(0deg,#111c26 0,#243948 9px,#102537 15px); }
.layer-flashing { background: repeating-linear-gradient(80deg,#a5b4ba,#536878 45px,#9eacb7 64px); }
.layer-framing { background: repeating-linear-gradient(90deg,#714b26,#d5aa76 12px,#8e6030 19px,#122437 22px,#122437 67px); }
.anatomy-controls { position: absolute; left: 26px; bottom: 22px; z-index: 3; width: 230px; display: grid; gap: 11px; }
.anatomy-controls label { letter-spacing: .13em; font-size: 10px; color: #c9deea; font-weight: 800; }
.anatomy-controls input { width: 100%; accent-color: #46b8ff; }
.anatomy-layer-list { display: grid; gap: 8px; }
.anatomy-item { text-align: left; background: #ffffff0a; color: white; border: 1px solid #ffffff21; border-radius: 9px; padding: 15px; display: flex; gap: 15px; align-items: center; transition: background .2s; }
.anatomy-item.is-current,.anatomy-item:hover { border-color: #53bdfc; background: #1a5d8a57; }
.anatomy-item .layer-no { font-weight: 850; color: #64c9fd; font-size: 14px; }
.anatomy-item strong { font-size: 14px; }
.anatomy-explanation { margin-top: 20px; padding: 23px; background: #d4e8fa0d; border: 1px solid #ffffff24; border-radius: 12px; }
.anatomy-explanation h3 { font-size: 21px; margin: 10px 0; }
.anatomy-explanation p { color: #c1d1de; line-height: 1.7; font-size: 13px; }

/* WEATHER */
.weather-section { background: #fff; }
.weather-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.weather-tab { border: 1px solid #d9e5ee; background: #f5f9fc; border-radius: 8px; padding: 15px 20px; min-width: 205px; display: flex; gap: 13px; align-items: center; color: #28435e; }
.weather-tab > span { font-size: 23px; color: #087ade; }
.weather-tab strong { font-size: 12px; }
.weather-tab.is-current { background: #0b74cf; color: white; border-color: #0b74cf; }
.weather-tab.is-current > span { color: white; }
.weather-viewport { height: 500px; border-radius: 13px; position: relative; overflow: hidden; isolation: isolate; background: #53728c; }
.weather-house { position: absolute; inset: 0; background-position: center; }
.weather-darken { position: absolute; inset: 0; background: linear-gradient(90deg,#061d35bf,transparent 70%); transition: background .5s; }
.weather-sun { position: absolute; right: 17%; top: 9%; width: 120px; height: 120px; border-radius: 50%; background: #ffedb6a1; filter: blur(22px); box-shadow: 0 0 100px #fff2a5b3; }
.weather-rain { position: absolute; inset: -100%; opacity: 0; pointer-events: none; background: repeating-linear-gradient(105deg,transparent 0,transparent 21px,#e5f7ff92 23px,transparent 25px); background-size: 120px 190px; animation: rainfall .48s linear infinite; }
.weather-flash { position: absolute; inset: 0; opacity: 0; background: #d7f0ff; mix-blend-mode: screen; animation: lightning 6.5s infinite; }
.weather-viewport[data-weather="rain"] .weather-rain,.weather-viewport[data-weather="storm"] .weather-rain { opacity: .47; }
.weather-viewport[data-weather="rain"] .weather-darken { background: linear-gradient(90deg,#081928d9,#0c1c2a8c); }
.weather-viewport[data-weather="storm"] .weather-darken { background: linear-gradient(90deg,#04101eed,#061d32ba); }
.weather-viewport[data-weather="storm"] .weather-rain { opacity: .7; }
.weather-viewport[data-weather="storm"] .weather-flash { opacity: .04; }
.weather-viewport:not([data-weather="sun"]) .weather-sun { display: none; }
.weather-caption { position: absolute; z-index: 2; bottom: 45px; left: 52px; color: white; max-width: 460px; }
.weather-caption span { font-size: 10px; font-weight: 850; letter-spacing: .2em; color: #90d5ff; }
.weather-caption h3 { font-size: 36px; letter-spacing: -.04em; margin: 10px 0; }
.weather-caption p { font-size: 14px; line-height: 1.7; color: #e5eef5; }
@keyframes rainfall { from {transform: translateY(-80px)} to {transform: translateY(120px)} }
@keyframes lightning { 0%,43%,46%,100% {opacity:0} 44%,45% {opacity:.35} }

/* DETAIL EXPLORER */
.detail-section { background: #f2f6fa; }
.detail-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.detail-card { border: 1px solid #e1e8ef; border-radius: 11px; background: white; overflow: hidden; display: flex; flex-direction: column; }
.detail-card:hover { box-shadow: var(--shadow); }
.detail-photo { aspect-ratio: 1.15; background-size: cover; background-position: center; }
.detail-card-body { padding: 17px; display: flex; flex-direction: column; flex: 1; }
.detail-card-body h3 { font-size: 16px; margin: 0 0 7px; }
.detail-card-body p { font-size: 12px; color: #708198; line-height: 1.6; flex: 1; }
.detail-select { margin-top: 15px; background: #eaf3fb; color: #0766bb; border: none; padding: 11px; border-radius: 6px; font-weight: 800; font-size: 12px; }
.detail-select:hover { background: #0b75de; color: white; }

/* BEFORE / AFTER */
.compare-section { background: #eaf4fb; }
.compare-layout { display: grid; grid-template-columns: .78fr 1.55fr; gap: 44px; align-items: center; }
.compare-copy p:not(.eyebrow) { font-size: 15px; color: #62788b; line-height: 1.75; }
.note-tag { display: inline-block; background: #dae8f4; border-radius: 5px; padding: 9px 12px; font-size: 9px; color: #4a687b; font-weight: 800; letter-spacing: .07em; }
.compare-viewport { position: relative; height: 430px; border-radius: 12px; overflow: hidden; background: #1f3f55; box-shadow: 0 20px 45px #08284222; }
.compare-image { position: absolute; inset: 0; }
.compare-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); filter: sepia(.7) grayscale(.55) saturate(.55) brightness(.7) contrast(.9); }
.compare-label { position: absolute; top: 20px; z-index: 3; padding: 9px 13px; border-radius: 6px; font-size: 10px; font-weight: 750; background: #071a2fdc; color: white; }
.compare-left-label { left: 18px; }
.compare-right-label { right: 18px; background: #0876ddeb; }
.compare-handle { position: absolute; width: 3px; top: 0; bottom: 0; left: var(--split); background: white; z-index: 3; pointer-events: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: white; color: #16537f; width: 53px; height: 53px; display: grid; place-items: center; font-weight: 900; box-shadow: 0 3px 18px #0007; }
#compare-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }

/* PHOTOGRAPH GALLERY */
.project-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.gallery-item { position: relative; height: 252px; border-radius: 11px; overflow: hidden; margin: 0; background: #d6e0e8; }
.gallery-wide { grid-column: span 2; }
.gallery-item img { height: 100%; width: 100%; object-fit: cover; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:after { content: ''; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent,#04121edc); }
.gallery-item figcaption { z-index: 1; position: absolute; bottom: 18px; left: 20px; color: white; font-weight: 750; font-size: 14px; }

/* ABOUT */
.about-section { background: #fff; }
.about-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 90px; }
.about-lead { font-size: 19px; line-height: 1.85; color: #536c81; max-width: 550px; }
.about-values { display: grid; gap: 20px; }
.about-values article { background: #f3f7fa; padding: 24px 27px; border-left: 3px solid #147ed6; }
.about-values article span { font-weight: 900; font-size: 11px; color: #187bc2; }
.about-values article h3 { font-size: 20px; margin: 8px 0; }
.about-values article p { font-size: 13px; line-height: 1.8; color: #617789; }

/* AI CHAT DEMO */
.assistant-section { background: #071e32; color: white; }
.assistant-layout { display: grid; grid-template-columns: .9fr 1fr; gap: 110px; align-items: center; }
.assistant-intro h2 { line-height: 1.06; }
.assistant-intro > p:not(.eyebrow) { color: #bbcedb; line-height: 1.8; max-width: 465px; }
.assistant-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.assistant-pills span { border: 1px solid #5395b84a; border-radius: 20px; padding: 10px 13px; font-size: 11px; color: #d0e5f0; }
.chat-box { border-radius: 15px; overflow: hidden; color: #0d293c; background: white; box-shadow: 0 30px 60px #0004; }
.chat-header { display: flex; align-items: center; gap: 13px; padding: 17px 19px; border-bottom: 1px solid #e7ecf0; }
.chat-avatar { width: 43px; height: 43px; color: white; display: grid; place-items: center; background: linear-gradient(135deg,#048aee,#103758); font-size: 22px; font-weight: 900; border-radius: 12px; }
.chat-header strong { display: block; font-size: 14px; }
.chat-header small { color: #8a9eae; font-size: 9px; font-weight: 750; }
.chat-indicator { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #36be89; }
.chat-messages { min-height: 278px; max-height: 350px; overflow-y: auto; padding: 22px; display: flex; align-items: flex-start; flex-direction: column; gap: 12px; background: #f7fafc; }
.message { max-width: 82%; border-radius: 14px; padding: 13px 15px; font-size: 12px; line-height: 1.6; }
.message.bot { background: white; border: 1px solid #e2edf5; border-bottom-left-radius: 4px; }
.message.user { background: #0b73cf; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-questions { padding: 8px 14px; border-top: 1px solid #e8eef2; display: flex; gap: 7px; overflow-x: auto; }
.chat-questions button { flex-shrink: 0; background: #edf5fa; color: #14577f; border: 1px solid #d9e8f2; border-radius: 18px; padding: 8px 11px; font-size: 10px; }
.chat-form { display: flex; padding: 11px 14px; gap: 9px; }
.chat-form input { flex: 1; width: 0; padding: 13px; font-size: 13px; background: #f1f6f9; border: 1px solid #e2eaf0; border-radius: 7px; }
.chat-form button { width: 43px; border: 0; color: white; background: #0c78d9; border-radius: 7px; font-size: 24px; }

/* CONTACT */
.contact-section { background: #f6f9fc; }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.contact-intro > p:not(.eyebrow) { max-width: 435px; font-size: 15px; line-height: 1.8; color: #6a8093; }
.contact-lines { margin-top: 32px; display: flex; gap: 45px; font-size: 13px; }
.contact-lines strong { text-transform: uppercase; font-size: 11px; letter-spacing: .12em; color: #0b76d6; }
.estimate-form { background: white; border: 1px solid #e6edf3; border-radius: 14px; box-shadow: var(--shadow); padding: 30px; display: grid; gap: 16px; }
.form-heading { display: flex; justify-content: space-between; align-items: center; }
.form-heading h3 { margin: 0 0 5px; font-size: 22px; }
.form-heading span { color: #3c8cce; font-size: 9px; letter-spacing: .1em; font-weight: 850; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.estimate-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 700; }
.estimate-form input,.estimate-form select,.estimate-form textarea { width: 100%; background: #f7fafc; color: #1b354a; border: 1px solid #dde7ef; border-radius: 6px; padding: 12px; outline-color: #0e86de; font-size: 13px; }
.form-bottom { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.form-bottom > span { font-size: 10px; color: #7990a0; max-width: 200px; line-height: 1.6; }
.site-footer { background: #06192a; color: white; padding: 38px 0; }
.footer-content { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.footer-company strong { font-size: 15px; }
.footer-content p { color: #adc5d8; font-size: 12px; }
.footer-content small { color: #859eaf; font-size: 10px; }
.toast { position: fixed; right: 22px; bottom: 22px; background: #05253e; color: white; box-shadow: 0 15px 50px #0005; border-radius: 10px; padding: 17px 22px; max-width: 410px; line-height: 1.6; font-size: 13px; z-index: 110; opacity: 0; transform: translateY(20px); transition: opacity .25s,transform .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .container { padding: 0 30px; }
    .brand { min-width: 215px; }
    .brand-wordmark strong { font-size: 11px; }
    .main-nav { gap: 13px; }
    .main-nav a { font-size: 11px; }
    .material-display { left: 25%; }
    .studio-details { right: 15px; width: 272px; }
    .assistant-layout { gap: 50px; }
}
@media (max-width: 950px) {
    .section { padding: 75px 0; }
    .mobile-menu { display: block; margin-left: auto; }
    .main-nav { display: none; position: absolute; top: 83px; left: 0; right: 0; background: white; padding: 22px 30px; box-shadow: 0 20px 35px #0002; flex-direction: column; align-items: flex-start; gap: 19px; }
    .main-nav.open { display: flex; }
    .lang-toggle { margin-left: 3px; }
    .hero { min-height: 650px; }
    .hero h1 { font-size: clamp(56px,8vw,82px); }
    .studio-scene { min-height: 835px; }
    .studio-details { top: auto; bottom: 60px; right: 25px; width: 315px; }
    .material-display { left: 5%; bottom: 75px; }
    .sample-hint { left: 5%; bottom: 20px; }
    .material-picker { grid-template-columns: repeat(3,1fr); }
    .services-grid { grid-template-columns: repeat(2,1fr); }
    .detail-grid { grid-template-columns: repeat(3,1fr); }
    .anatomy-layout, .assistant-layout, .contact-layout, .about-layout, .compare-layout { grid-template-columns: 1fr; gap: 30px; }
    .anatomy-viewport { height: 500px; }
}
@media (max-width: 640px) {
    html { scroll-padding-top: 76px; }
    .container { padding: 0 20px; }
    .nav-inner { height: 74px; gap: 8px; }
    .brand { min-width: 0; flex: 1; }
    .brand-logo { width: 53px; height: 48px; }
    .brand-wordmark strong { font-size: 10px; }
    .brand-wordmark small { font-size: 9px; }
    .main-nav { top: 73px; }
    .lang-toggle button { padding: 7px 10px; }
    .hero { min-height: 690px; align-items: center; }
    .hero-inner { padding-top: 95px; padding-bottom: 75px; }
    .hero h1 { font-size: clamp(54px,11vw,74px); margin: 18px 0; }
    .hero-subtitle { font-size: 15px; }
    .hero-side-note { display: none; }
    .hero-highlights { margin-top: 30px; gap: 12px; }
    .hero-actions { display: grid; }
    .section { padding: 64px 0; }
    .section-heading { display: block; }
    .section-heading h2, .about-section h2, .contact-section h2, .compare-section h2, .assistant-section h2 { font-size: 35px; }
    .section-index { display: none; }
    .studio-scene { min-height: 850px; }
    .house-background { background-position: 48% center; }
    .studio-top-tag { left: 15px; top: 17px; font-size: 9px; }
    .material-display { width: 340px; height: 320px; left: calc(50% - 170px); bottom: 330px; transform: scale(.71); transform-origin: center bottom; }
    .sample-rotator { left: 6px; }
    .pedestal-top { left: 0; width: 350px; }
    .pedestal-body { left: 0; width: 350px; }
    .pedestal-base { left: 0; width: 350px; }
    .material-arrows { left: 15px; bottom: 17px; }
    .studio-details { left: 14px; right: 14px; bottom: 84px; width: auto; padding: 21px; }
    .studio-details h3 { font-size: 21px; }
    .detail-points { gap: 8px; margin-bottom: 15px; }
    .studio-photo-tag { display: none; }
    .sample-hint { left: 20px; bottom: 510px; font-size: 9px; }
    .material-picker { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .material-choice strong { font-size: 12px; }
    .material-bottom-bar { flex-direction: column; align-items: flex-start; }
    .services-grid { grid-template-columns: 1fr; }
    .service-image { height: 215px; }
    .anatomy-viewport { height: 410px; }
    .anatomy-stack { left: 1%; width: 98%; transform: scale(.88); }
    .anatomy-layer { height: 90px; }
    .weather-tabs { flex-wrap: wrap; }
    .weather-tab { flex: 1 1 160px; min-width: 0; padding: 12px; }
    .weather-viewport { height: 420px; }
    .weather-caption { left: 24px; bottom: 26px; max-width: 83%; }
    .weather-caption h3 { font-size: 30px; }
    .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .detail-card-body { padding: 12px; }
    .detail-card-body h3 { font-size: 14px; }
    .compare-viewport { height: 320px; }
    .project-gallery { grid-template-columns: 1fr 1fr; }
    .gallery-wide { grid-column: span 2; }
    .gallery-item { height: 190px; }
    .gallery-item figcaption { font-size: 11px; left: 11px; bottom: 11px; }
    .contact-lines { display: block; }
    .estimate-form { padding: 19px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-bottom { align-items: flex-start; flex-direction: column; }
    .footer-content { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}