:root {
  --ink: #18232D;
  --slate: #34434C;
  --silver: #A7AFB2;
  --stone: #D9D5CD;
  --paper: #F4F3F0;
  --white: #FFFFFF;
  --line: rgba(24, 35, 45, .13);
  --metal: #BFC7CA;
  --metal-deep: #6F7D82;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; font-size: 15px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #667D89; outline-offset: 3px; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 100; padding: 10px 14px; background: var(--white); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 max(5.6vw, 28px); background: var(--paper); border-bottom: 1px solid rgba(24,35,45,.07); position: sticky; top: 0; z-index: 50; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 190px; line-height: 1; }
.brand-mark { font-family: Montserrat, sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -2px; }
.brand-mark span { color: #7A888E; font-size: 19px; margin: 0 1px; }
.brand-name { font-family: Montserrat, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; display: grid; gap: 4px; }
.brand-name i { font-style: normal; font-weight: 500; letter-spacing: 2.7px; color: #6F7A80; }
.brand-seal { width:46px; height:46px; flex:0 0 46px; position:relative; display:block; border:1px solid #A7AFB2; border-radius:50%; color:#34434C; background:rgba(244,243,240,.9); transform:rotate(-7deg); }
.brand-seal::before { content:""; position:absolute; inset:3px; border:1px solid currentColor; border-radius:50%; opacity:.55; }
.brand-seal-top, .brand-seal-bottom, .brand-seal strong { position:absolute; left:0; right:0; text-align:center; line-height:1; }
.brand-seal-top { top:8px; font-family:Montserrat,sans-serif; font-size:5px; font-weight:700; letter-spacing:.17em; }
.brand-seal strong { top:17px; font-family:Montserrat,sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; }
.brand-seal-bottom { bottom:8px; font-family:Inter,sans-serif; font-size:4px; font-weight:600; letter-spacing:.08em; }
.brand-footer .brand-seal { color:#F4F3F0; background:rgba(244,243,240,.04); border-color:#A7AFB2; }
.brand-footer .brand-seal::before { opacity:.72; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); }
.primary-nav a, .language-link { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.primary-nav a { color: #4F5D63; transition: color .2s ease; }
.primary-nav a:hover, .footer-links a:hover { color: #87969B; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.language-link { color: #4F5D63; border-bottom: 1px solid var(--silver); padding: 4px 0; }
.button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid transparent; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--slate); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: var(--white); }
.button-small { min-height: 42px; padding: 0 17px; font-size: 9px; }
.menu-toggle { display: none; }
.hero { background: var(--ink); color: var(--paper); min-height: 585px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: stretch; padding: 64px max(8.5vw, 40px) 60px; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15; background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.07) 25.2%, transparent 25.5% 74%, rgba(255,255,255,.05) 74.2%, transparent 74.5%); }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-bottom: 4px; max-width: 570px; }
.eyebrow { font-size: 9px; line-height: 1.4; font-weight: 600; letter-spacing: .18em; margin: 0 0 20px; }
.eyebrow-light { color: #A7AFB2; }
.eyebrow-dark { color: #77858B; }
.eyebrow-line { display: inline-block; width: 24px; height: 1px; vertical-align: middle; margin: 0 10px 2px 0; background: #A7AFB2; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Montserrat, Arial, sans-serif; }
h1 { margin: 0 0 24px; font-size: clamp(48px, 6.2vw, 82px); line-height: 1.01; letter-spacing: -.055em; font-weight: 600; }
h1 em, .config-copy h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; }
.hero-intro { color: #C0C7C8; font-size: 15px; max-width: 435px; line-height: 1.75; margin-bottom: 31px; }
.hero-actions { display: flex; align-items: center; gap: 29px; flex-wrap: wrap; }
.text-link { display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; border-bottom: 1px solid #94A0A4; padding-bottom: 7px; }
.text-link-light { color: #E7E7E1; border-color: #6F7C82; }
.text-link:hover { opacity: .72; }
.hero-note { margin-top: 45px; color: #A7AFB2; font-size: 10px; letter-spacing: .05em; }
.note-dot { display: inline-block; width: 7px; height: 7px; background: #A7AFB2; border-radius: 100%; margin-right: 9px; vertical-align: 1px; }
.hero-art { min-height: 430px; position: relative; display: grid; place-items: center; perspective: 1000px; }
.art-glow { position: absolute; width: 68%; height: 70%; border-radius: 100%; background: radial-gradient(ellipse, rgba(169,184,187,.21), rgba(52,67,76,.03) 65%, transparent 72%); filter: blur(13px); }
.art-room { width: min(78%, 390px); height: 370px; position: relative; transform: rotateY(-11deg) rotateX(2deg); transform-style: preserve-3d; }
.art-wall { position: absolute; inset: 4% 12% 15% 12%; border: 1px solid rgba(217,213,205,.22); background: linear-gradient(110deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); transform: translateZ(-10px); }
.art-floor { position: absolute; bottom: 8%; left: 5%; right: 1%; height: 20%; background: linear-gradient(167deg, rgba(217,213,205,.16), rgba(24,35,45,.05)); transform: rotateX(57deg); transform-origin: bottom; border-top: 1px solid rgba(217,213,205,.29); }
.art-glass { position: absolute; top: 9%; bottom: 17%; border: 1px solid rgba(212,222,223,.7); background: linear-gradient(115deg, rgba(193,211,214,.18), rgba(203,221,223,.025) 49%, rgba(192,210,214,.12)); box-shadow: inset 0 0 18px rgba(224,238,240,.06), 18px 12px 25px rgba(0,0,0,.08); transform-style: preserve-3d; }
.art-glass-back { left: 15%; width: 58%; transform: translateZ(1px) rotateY(-7deg); }
.art-glass-front { right: 12%; width: 50%; transform: translateZ(20px) rotateY(7deg); }
.art-reflection { position: absolute; width: 13%; height: 85%; left: 23%; top: 7%; background: linear-gradient(90deg, transparent, rgba(244,243,240,.26), transparent); transform: skewY(-14deg); }
.art-hinge { width: 13px; height: 34px; position: absolute; left: -7px; background: linear-gradient(90deg,#8D989B,#D9D5CD 40%,#758287); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.art-hinge-one { top: 23%; }.art-hinge-two { bottom: 22%; }
.art-handle { position: absolute; right: 16%; top: 39%; height: 82px; width: 13px; border: 2px solid #A7AFB2; border-radius: 8px; box-shadow: 4px 1px 5px rgba(0,0,0,.24); }
.art-handle::before, .art-handle::after { content: ""; position: absolute; width: 10px; height: 3px; background: #A7AFB2; right: 10px; }
.art-handle::before { top: 10px; }.art-handle::after { bottom: 10px; }
.art-label { position: absolute; bottom: 0; left: 11%; color: #C5CBCA; font-size: 8px; letter-spacing: .16em; }
.art-label span { color: #89969A; margin-right: 12px; }
.art-caption { position: absolute; right: 3%; bottom: 6%; font-family: var(--serif); font-size: 17px; font-style: italic; color: #C1C9C8; }
.service-strip { min-height: 70px; background: #E8E6E0; display: flex; justify-content: center; align-items: center; gap: clamp(18px, 4vw, 60px); color: #5D6A70; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.service-strip i { width: 4px; height: 4px; display: block; border-radius: 100%; background: #A7AFB2; }
.section { padding: 112px max(8.5vw, 40px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 46px; }
.section-heading .eyebrow { margin-bottom: 18px; }
h2 { font-size: clamp(33px, 4vw, 52px); line-height: 1.12; letter-spacing: -.05em; font-weight: 600; margin: 0; }
.section-lead { max-width: 360px; color: #657178; margin: 0 0 4px; font-size: 13px; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { min-height: 330px; position: relative; padding: 26px 27px 25px; background: #ECEAE5; display: flex; flex-direction: column; }
.service-card-featured { background: #E2E1DB; }
.service-index { font-size: 8px; letter-spacing: .16em; color: #77858B; font-weight: 600; }
.service-icon { width: 45px; height: 52px; position: relative; margin: 32px 0 20px; }
.icon-shower::before { content:""; position:absolute; inset:2px 6px 2px 12px; border:1px solid #87949A; background:linear-gradient(120deg,rgba(255,255,255,.8),rgba(174,188,192,.15)); }
.icon-shower::after { content:""; position:absolute; left:5px; top:13px; bottom:6px; width:1px; background:#87949A; }
.icon-shower span { position:absolute; z-index:1; left:29px; top:21px; width:7px; height:23px; border:1px solid #7B898F; border-radius:6px; }
.icon-railing::before { content:""; position:absolute; left:4px; top:8px; right:2px; height:24px; border:1px solid #87949A; background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(174,188,192,.12)); }
.icon-railing::after { content:""; position:absolute; height:23px; left:9px; right:6px; bottom:4px; border-top:1px solid #87949A; border-bottom:1px solid #87949A; transform:skewY(-21deg); }
.icon-paint::before { content:""; position:absolute; width:18px; height:29px; left:7px; top:4px; border:1px solid #87949A; border-radius:2px 2px 6px 6px; transform:rotate(18deg); }
.icon-paint::after { content:""; position:absolute; width:5px; height:23px; right:9px; top:2px; background:#87949A; transform:rotate(23deg); }
.service-icon span { position:absolute; left:22px; bottom:0; width:22px; height:3px; background:#87949A; transform:rotate(21deg); }
.service-card h3 { font-size: 18px; letter-spacing: -.025em; margin: 0 0 9px; }
.service-card p { color: #6A757A; font-size: 11px; line-height: 1.7; margin-bottom: 20px; max-width: 275px; }
.card-link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.card-link:hover { color: #77858B; }
.portfolio-section { background: var(--ink); color: var(--paper); padding: 100px max(8.5vw, 40px) 26px; }
.portfolio-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.portfolio-top .eyebrow { margin-bottom: 16px; }
.portfolio-top p:last-child { max-width: 360px; color: #A8B0B2; font-size: 12px; line-height: 1.75; margin: 0 0 4px; }
.portfolio-section h2 { font-size: clamp(45px, 5vw, 64px); }
.portfolio-tabs { display: flex; gap: 25px; border-bottom: 1px solid rgba(217,213,205,.2); margin-top: 43px; }
.portfolio-tab { cursor: pointer; padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: #8E999D; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-tab.is-active { color: var(--paper); border-color: #D9D5CD; }
.portfolio-panel { min-height: 300px; padding: 38px 0; }
.portfolio-panel[hidden] { display: none; }
.portfolio-empty { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; max-width: 900px; margin: 0 auto; }
.portfolio-empty .eyebrow { margin-bottom: 13px; }
.portfolio-empty h3 { font-size: 23px; margin: 0 0 12px; }
.portfolio-empty p:not(.eyebrow) { color: #ADB6B7; font-size: 12px; max-width: 440px; margin-bottom: 18px; }
.portfolio-empty .text-link { color: #E3E4DF; }
.portfolio-empty-mark { height: 200px; max-width: 380px; width: 100%; margin: auto; position: relative; border: 1px solid rgba(217,213,205,.2); background: linear-gradient(120deg,rgba(217,213,205,.06),rgba(217,213,205,.005)); }
.portfolio-empty-mark::before, .portfolio-empty-mark::after { content:""; position:absolute; background:rgba(217,213,205,.22); }
.portfolio-empty-mark::before { left:16%; right:16%; top:18%; bottom:18%; border:1px solid rgba(217,213,205,.22); background:transparent; }
.portfolio-empty-mark::after { width:1px; height:65%; left:49%; top:18%; }
.portfolio-empty-mark span { position:absolute; z-index:1; width:9px; height:28px; background:#A7AFB2; top:37%; }
.portfolio-empty-mark span:first-child { left:15%; }.portfolio-empty-mark span:nth-child(2) { left:48%; }.portfolio-empty-mark span:nth-child(3) { right:15%; }
.reference-banner { color:#B7C0C0; font-size:11px; margin-bottom:23px; }
.reference-banner span { color:#F4F3F0; font-weight:600; letter-spacing:.12em; margin-right:8px; }
.reference-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.reference-grid figure { margin:0; }
.reference-grid img { display:block; width:100%; height:184px; object-fit:contain; background:#fff; }
.reference-grid figcaption { color:#BBC2C1; padding:8px 0; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.reference-preview > .text-link { color:var(--paper); }
.project-gallery { padding-top:27px; }
.project-gallery-intro { color:#B7C0C0; font-size:11px; line-height:1.7; max-width:760px; margin:0 0 20px; }
.project-gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.project-card { min-width:0; margin:0; background:#11191F; border:1px solid rgba(217,213,205,.12); }
.project-card img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:#10171C; }
.project-card figcaption { min-height:40px; padding:11px 12px; color:#D5D9D8; font-size:9px; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; }
.project-video-card { grid-column:span 2; display:flex; flex-direction:column; }
.project-video-card video { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:#080B0D; }
.portfolio-footer { border-top:1px solid rgba(217,213,205,.18); display:flex; justify-content:space-between; gap:20px; padding:20px 0 0; color:#849196; font-size:8px; letter-spacing:.16em; font-weight:600; }
.section-side-copy { max-width:360px; }
.section-side-copy p { color:#657178; font-size:12px; line-height:1.8; }
.availability-note { color:#5D6A70; font-size:9px; font-weight:600; }
.availability-note .note-dot { background:#7E8D93; }
.hardware-section { padding-bottom:120px; }
.hardware-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 14px; }
.hardware-card { background:#ECEAE5; }
.hardware-photo { position:relative; height:260px; background:#fff; }
.hardware-photo img { width:100%; height:100%; object-fit:contain; display:block; }
.photo-tag { position:absolute; left:12px; top:12px; padding:5px 8px; background:rgba(24,35,45,.84); color:white; font-size:7px; letter-spacing:.15em; }
.hardware-copy { padding:17px 18px 19px; }
.hardware-copy>span { color:#77858B; font-size:7px; font-weight:600; letter-spacing:.15em; }
.hardware-copy h3 { font-size:14px; margin:5px 0 2px; }
.hardware-copy p { color:#6A757A; font-size:10px; margin:0; }
.config-section { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:1fr 1fr; gap:7vw; padding:105px max(8.5vw,40px) 110px; align-items:center; }
.config-copy { max-width:500px; }
.config-copy .eyebrow { margin-bottom:20px; }
.config-copy h2 { font-size:clamp(34px,4vw,52px); margin-bottom:20px; }
.config-copy h2 em { color:#C4CBC9; }
.config-copy>p:not(.eyebrow):not(.config-disclaimer) { color:#AEB7B7; font-size:12px; line-height:1.85; max-width:420px; }
.config-roadmap { margin-top:32px; padding-top:20px; border-top:1px solid rgba(217,213,205,.2); }
.roadmap-label { color:#A7AFB2; font-size:8px; font-weight:600; letter-spacing:.16em; }
.config-roadmap ol { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:11px; }
.config-roadmap li { color:#CBD0CD; font-size:10px; line-height:1.5; display:flex; gap:13px; }
.config-roadmap li span { color:#89979B; font-size:8px; font-weight:600; letter-spacing:.09em; }
.config-disclaimer { color:#859297; font-size:9px; margin:22px 0 0; line-height:1.6; }
.config-demo { background:#F1F0EC; color:var(--ink); padding:20px 22px 22px; max-width:535px; width:100%; justify-self:end; }
.config-topline { display:flex; justify-content:space-between; color:#6C7A80; font-size:8px; font-weight:600; letter-spacing:.14em; }
.config-stage { height:360px; position:relative; overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 44%,#fff 0%,#E4E5E1 68%,#D5D7D3 100%); perspective:900px; touch-action:pan-y; cursor:grab; }
.config-stage.is-dragging { cursor:grabbing; }
.config-stage::after { content:""; position:absolute; left:0; right:0; bottom:12%; height:1px; background:rgba(52,67,76,.1); }
.model-shadow { position:absolute; width:45%; height:11px; bottom:14%; background:rgba(24,35,45,.13); filter:blur(12px); border-radius:50%; }
.glass-model { width:208px; height:300px; position:relative; transform-style:preserve-3d; transform:rotateY(0deg); transition:transform .22s ease-out; }
.glass-panel { position:absolute; inset:0; border:1px solid rgba(103,125,133,.7); background:linear-gradient(108deg,rgba(255,255,255,.62),rgba(184,203,208,.25) 39%,rgba(255,255,255,.52) 67%,rgba(175,194,199,.27)); box-shadow:inset 0 0 20px rgba(255,255,255,.6), 9px 12px 22px rgba(24,35,45,.09); transform-style:preserve-3d; backface-visibility:hidden; }
.glass-back { transform:translateZ(-3px) rotateY(180deg); }
.glass-front { transform:translateZ(3px); }
.glass-highlight { position:absolute; top:4%; bottom:4%; left:24%; width:13%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent); transform:skewY(-8deg); }
.model-hinge { position:absolute; left:-5px; width:17px; height:32px; border:1px solid #748288; border-radius:3px; background:linear-gradient(90deg,#718087,var(--metal) 48%,#849096); transform:translateZ(5px); box-shadow:0 2px 4px rgba(24,35,45,.15); }
.hinge-top { top:20%; }.hinge-middle { top:47%; height:23px; }.hinge-bottom { bottom:20%; }
.handle-bar { position:absolute; right:21%; top:31%; width:11px; height:108px; border:1px solid var(--metal-deep); border-radius:var(--handle-radius,9px); background:linear-gradient(90deg,var(--metal-deep),var(--metal) 35%,#EFF1F0 52%,var(--metal-deep)); box-shadow:2px 1px 6px rgba(24,35,45,.25); transform:translateZ(9px); }
.handle-bar::before, .handle-bar::after { content:""; position:absolute; right:8px; width:12px; height:4px; border:1px solid var(--metal-deep); background:linear-gradient(180deg,var(--metal),#879399); transform:translateZ(6px); }
.handle-bar::before { top:10px; }.handle-bar::after { bottom:10px; }
.handle-mount { position:absolute; right:calc(21% - 4px); width:18px; height:13px; border:1px solid var(--metal-deep); border-radius:50%; background:radial-gradient(ellipse,var(--metal) 25%,#F8F8F5 55%,var(--metal-deep)); transform:translateZ(10px); }
.mount-top { top:31%; }.mount-bottom { top:64%; }
.config-stage[data-finish="black"] { --metal:#30383C; --metal-deep:#11191D; }
.config-stage[data-finish="gold"] { --metal:#C1A36A; --metal-deep:#75603C; }
.config-stage[data-handle="square"] { --handle-radius:1px; }
.stage-caption { position:absolute; bottom:15px; left:18px; color:#6E7A7F; font-size:7px; font-weight:600; letter-spacing:.16em; }
.config-controls { display:grid; grid-template-columns:1fr 1fr; gap:17px 20px; padding-top:19px; }
.control-label { color:#738087; font-size:7px; font-weight:600; letter-spacing:.14em; display:block; margin-bottom:8px; }
.swatches { display:flex; gap:10px; }
.swatch { border:0; cursor:pointer; background:transparent; padding:0; display:grid; justify-items:center; gap:4px; color:#59666C; font-size:8px; }
.swatch>span { display:block; width:25px; height:25px; border-radius:50%; border:1px solid #C5C8C5; }
.swatch.is-selected>span { outline:2px solid var(--ink); outline-offset:2px; }
.swatch-chrome { background:linear-gradient(130deg,#738087,#f5f6f4 38%,#8d9a9f 68%,#dce0df); }
.swatch-black { background:linear-gradient(130deg,#0F161A,#4C565A 48%,#14191C); }
.swatch-gold { background:linear-gradient(130deg,#7F6B46,#D8C28E 45%,#917949); }
.choice-row { display:flex; flex-wrap:wrap; gap:5px; }
.choice-button { border:1px solid #D3D4CF; padding:5px 8px; cursor:pointer; background:transparent; color:#536168; font-size:8px; }
.choice-button.is-selected { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.spin-row { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #D9DAD5; padding-top:12px; }
.spin-row>span { color:#78858A; font-size:8px; }
.spin-button { background:transparent; color:var(--ink); border:0; padding:0; cursor:pointer; font-size:9px; font-weight:600; letter-spacing:.06em; }
.spin-button>span { font-size:16px; vertical-align:-2px; margin-right:5px; }
.config-demo { max-width:660px; padding:20px 22px 18px; box-shadow:0 18px 50px rgba(6,13,18,.17); }
.config-stage { height:430px; display:block; perspective:none; touch-action:none; background:linear-gradient(145deg,#f5f4f0 0%,#e3e3df 54%,#d3d5d2 100%); cursor:grab; }
.config-stage::after { display:none; }
.config-stage:active { cursor:grabbing; }
#config-canvas { display:block; width:100%; height:100%; outline:none; touch-action:none; }
.config-stage.is-unavailable { display:grid; place-items:center; padding:30px; }
.config-fallback { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); color:#5c696e; max-width:300px; padding:12px 16px; text-align:center; font-size:12px; line-height:1.7; background:rgba(244,243,240,.86); border:1px solid rgba(52,67,76,.14); }
.stage-caption { z-index:1; padding:7px 10px; background:rgba(244,243,240,.78); border:1px solid rgba(52,67,76,.12); border-radius:20px; letter-spacing:.11em; }
.config-controls { display:grid; grid-template-columns:1fr; gap:15px; padding-top:17px; }
.control-label { margin-bottom:8px; }
.hardware-model-picker { min-width:0; }
.hardware-model-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.hardware-model-option { min-width:0; min-height:79px; padding:6px 5px 5px; border:1px solid #D5D6D1; background:#fff; color:#59666C; cursor:pointer; display:grid; align-content:start; justify-items:center; gap:4px; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.hardware-model-option:hover { transform:translateY(-2px); border-color:#879398; }
.hardware-model-option.is-selected { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink),0 3px 9px rgba(24,35,45,.12); color:var(--ink); }
.hardware-model-option img { display:block; width:100%; height:43px; object-fit:contain; background:#f6f5f2; }
.hardware-model-option small { font-size:7px; line-height:1.25; text-align:center; }
.config-controls .control-group { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #deded9; padding-top:12px; }
.config-controls .control-label { margin:0; }
.config-controls .swatches { gap:15px; }
.config-controls .swatch>span { width:22px; height:22px; }
.spin-row { grid-column:1; }
.spin-button:disabled { opacity:.5; cursor:wait; }
.spin-row #active-hardware-label { color:#65737A; font-size:8px; text-align:right; }
.config-note { color:#78858A; font-size:8px; line-height:1.5; margin:12px 0 0; }
.review-section { padding:73px max(8.5vw,40px); display:grid; grid-template-columns:64px 1fr auto; gap:30px; align-items:center; background:#E7E5DF; }
.review-mark { width:54px; height:54px; display:grid; place-items:center; border:1px solid #AEB5B5; color:#65747A; border-radius:50%; font-family:Montserrat,sans-serif; font-size:22px; font-weight:600; }
.review-copy .eyebrow { margin-bottom:9px; }
.review-copy h2 { font-size:clamp(23px,2.5vw,31px); margin-bottom:8px; }
.review-copy p:last-child { color:#68747A; font-size:11px; max-width:500px; margin:0; }
.contact-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; }
.contact-intro { max-width:430px; }
.contact-intro .eyebrow { margin-bottom:18px; }
.contact-intro h2 { margin-bottom:17px; }
.contact-intro>p:not(.eyebrow) { color:#68747A; font-size:12px; line-height:1.8; margin-bottom:25px; }
.contact-method { display:flex; align-items:center; gap:15px; padding:13px 0; border-top:1px solid var(--line); }
.contact-method:last-of-type { border-bottom:1px solid var(--line); }
.contact-symbol { display:grid; place-items:center; width:33px; height:33px; border:1px solid #A8B1B2; color:#4E5D64; font-size:13px; }
.contact-method small { display:block; color:#77858B; font-size:7px; font-weight:600; letter-spacing:.15em; margin-bottom:2px; }
.contact-method strong { font-family:Montserrat,sans-serif; font-size:12px; font-weight:600; }
.service-area { font-size:9px; color:#657178; margin-top:20px; }
.estimate-form { background:#E9E7E2; padding:31px; display:grid; gap:19px; }
.estimate-form label { display:grid; gap:7px; color:#5E6A70; font-size:9px; font-weight:600; letter-spacing:.05em; }
.estimate-form input, .estimate-form select, .estimate-form textarea { width:100%; border:0; border-bottom:1px solid #BCC2C0; background:transparent; color:var(--ink); border-radius:0; padding:10px 0; outline-offset:0; font-size:11px; resize:vertical; }
.estimate-form input::placeholder, .estimate-form textarea::placeholder { color:#889397; opacity:1; }
.estimate-form select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#6D7B81 50%),linear-gradient(135deg,#6D7B81 50%,transparent 50%); background-position:calc(100% - 6px) 16px,calc(100% - 1px) 16px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-submit { justify-self:start; }
.form-note { color:#707D82; font-size:9px; margin:-7px 0 0; }
.faq-section { padding:30px max(8.5vw,40px) 110px; }
.faq-section .section-heading { margin-bottom:32px; }
.faq-section .section-heading h2 { font-size:clamp(30px,3.5vw,44px); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
.faq-grid details { padding:17px 0; border-top:1px solid var(--line); }
.faq-grid summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:15px; font-family:Montserrat,sans-serif; font-size:11px; font-weight:600; }
.faq-grid summary::-webkit-details-marker { display:none; }
.faq-grid summary span { font-size:17px; color:#75838A; font-weight:400; line-height:1; transition:transform .2s; }
.faq-grid details[open] summary span { transform:rotate(45deg); }
.faq-grid details p { color:#68747A; font-size:10px; line-height:1.75; margin:12px 24px 0 0; }
.site-footer { padding:42px max(8.5vw,40px) 20px; background:var(--ink); color:var(--paper); }
.brand-footer { min-width:0; }
.brand-footer .brand-name i { color:#99A4A7; }
.site-footer>p { color:#9BA6A8; font-family:var(--serif); font-style:italic; font-size:13px; margin:15px 0 20px; }
.footer-links { display:flex; flex-wrap:wrap; gap:22px; padding-bottom:25px; border-bottom:1px solid rgba(217,213,205,.16); }
.footer-links a { color:#BEC5C4; font-size:9px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:15px; color:#76858B; font-size:8px; letter-spacing:.11em; }
@media (max-width: 980px) {
  .site-header { padding:0 28px; gap:18px; }
  .primary-nav { gap:16px; }
  .primary-nav a { font-size:9px; }
  .brand { min-width:155px; }
  .brand-seal { width:40px; height:40px; flex-basis:40px; }
  .brand-seal-top { top:7px; font-size:4.5px; }
  .brand-seal strong { top:15px; font-size:10px; }
  .brand-seal-bottom { bottom:7px; font-size:3.5px; }
  .header-actions { gap:11px; }
  .button-small { padding:0 12px; }
  .hero, .section, .portfolio-section, .config-section, .review-section, .contact-section, .faq-section, .site-footer { padding-left:6vw; padding-right:6vw; }
  .config-section { gap:4vw; }
  .hardware-photo { height:220px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top:72px; }
  .site-header { height:68px; padding:0 20px; gap:10px; }
  .brand { min-width:auto; gap:8px; }
  .brand-mark { font-size:22px; }
  .brand-name { font-size:8px; }
  .menu-toggle { display:block; margin-left:auto; padding:8px 10px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
  .primary-nav { display:none; position:absolute; top:68px; left:0; right:0; background:var(--paper); padding:15px 20px 20px; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:16px; }
  .primary-nav.is-open { display:flex; }
  .primary-nav a { font-size:10px; }
  .header-actions { gap:10px; }
  .header-actions .button-small { display:none; }
  .hero { grid-template-columns:1fr; padding:60px 24px 35px; min-height:0; }
  .hero-copy { max-width:none; }
  h1 { font-size:clamp(52px,13vw,76px); }
  .hero-intro { font-size:13px; max-width:380px; }
  .hero-actions { gap:18px; align-items:flex-start; flex-direction:column; }
  .hero-note { margin-top:28px; }
  .hero-art { min-height:350px; margin-top:18px; }
  .art-room { width:76%; height:315px; }
  .art-caption { right:1%; bottom:3%; font-size:14px; }
  .service-strip { min-height:65px; justify-content:flex-start; overflow:auto; padding:0 22px; white-space:nowrap; gap:17px; font-size:8px; }
  .section { padding:77px 24px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:17px; margin-bottom:30px; }
  .section-lead { max-width:440px; }
  .service-grid { grid-template-columns:1fr; gap:10px; }
  .service-card { min-height:270px; padding:22px; }
  .service-icon { margin:25px 0 16px; }
  .portfolio-section { padding:73px 24px 22px; }
  .portfolio-top { align-items:flex-start; flex-direction:column; gap:16px; }
  .portfolio-tabs { gap:18px; margin-top:31px; }
  .portfolio-tab { font-size:8px; letter-spacing:.07em; }
  .portfolio-empty { grid-template-columns:1fr; gap:22px; padding:28px 0; }
  .portfolio-empty-mark { max-width:100%; height:150px; }
  .reference-grid { grid-template-columns:1fr; }
  .reference-grid img { height:210px; }
  .project-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .project-card figcaption { min-height:48px; padding:9px; font-size:8px; }
  .project-video-card { grid-column:span 2; }
  .portfolio-footer { font-size:7px; }
  .hardware-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .hardware-photo { height:180px; }
  .hardware-copy { padding:13px; }
  .hardware-copy h3 { font-size:12px; }
  .hardware-copy p { font-size:9px; }
  .photo-tag { left:8px; top:8px; font-size:6px; }
  .config-section { grid-template-columns:1fr; gap:31px; padding:75px 24px; }
  .config-demo { justify-self:center; padding:16px 13px 18px; }
  .config-stage { height:355px; }
  .hardware-model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .hardware-model-option { min-height:73px; }
  .config-controls { gap:13px; }
  .config-controls .control-group { align-items:flex-start; flex-direction:column; gap:10px; }
  .choice-button { padding:5px 6px; font-size:7px; }
  .review-section { grid-template-columns:48px 1fr; gap:17px; padding:47px 24px; }
  .review-mark { width:43px; height:43px; }
  .review-section .button { grid-column:2; width:fit-content; }
  .contact-section { grid-template-columns:1fr; gap:34px; padding:77px 24px; }
  .estimate-form { padding:22px 17px; }
  .form-row { grid-template-columns:1fr; gap:17px; }
  .faq-section { padding:6px 24px 75px; }
  .faq-grid { grid-template-columns:1fr; }
  .site-footer { padding:35px 24px 18px; }
  .footer-links { gap:14px 20px; }
  .footer-bottom { font-size:7px; }
}
@media (max-width: 380px) {
  .brand-name { letter-spacing:1px; }
  .language-link { font-size:8px; }
  .hardware-photo { height:145px; }
  .hardware-copy { padding:10px; }
  .hardware-copy>span { font-size:6px; }
  .spin-row { grid-column:1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}