/* Isolated local prototype. No shared selectors or production dependencies. */
.living-concept { background:#061517; }
.living-stage { --shot:url('../images/work/humboldt-moving/after-home-desktop.webp'); position:relative; isolation:isolate; overflow:hidden; min-height:900px; min-height:calc(100svh - 80px); padding:100px max(5vw,24px) 36px; display:grid; grid-template-columns:.85fr 1.3fr; align-items:center; gap:30px; background:radial-gradient(ellipse at 77% 32%,#15464270,transparent 52%),#061517; }
.living-atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.living-grid { position:absolute; inset:40% -30% -75%; background-image:linear-gradient(#a5ffe219 1px,transparent 1px),linear-gradient(90deg,#a5ffe219 1px,transparent 1px); background-size:80px 80px; transform:perspective(600px) rotateX(62deg) rotateZ(-20deg); mask-image:radial-gradient(ellipse,#000,transparent 66%); }
.living-orbit { position:absolute; width:1000px; height:1000px; top:-250px; left:30%; border:1px solid #abffe318; border-radius:50%; transform:rotateX(60deg) rotate(-30deg); box-shadow:0 0 90px #a5ffe207,inset 0 0 60px #a5ffe205; }
.orbit-two { width:1200px;height:1200px;top:-340px;left:25%;border-style:dashed;opacity:.5; }
.living-beam { position:absolute; top:-400px;left:62%;width:200px;height:1200px;transform:rotate(35deg);background:linear-gradient(90deg,transparent,#adffe214,transparent);filter:blur(35px); }
.living-heading { z-index:4; position:relative; padding-bottom:45px; }
.living-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:#a6d4c9; display:flex;gap:12px;align-items:center;margin:0 0 30px; }
.living-kicker span { width:6px;height:6px;border-radius:50%;background:#a6ffe1;box-shadow:0 0 18px #a6ffe1; }
.living-heading h1 { font-size:clamp(54px,5.6vw,88px); line-height:1.01; letter-spacing:-.065em; font-weight:600; margin:0 0 28px; }
.living-heading em { font-style:normal; color:#adffe3; background:var(--hero-title-gradient,linear-gradient(120deg,#edfff9,#a0ffe0 45%,#26c2bb));background-clip:text;-webkit-text-fill-color:transparent; }
.living-intro { font-size:clamp(18px,1.6vw,23px);line-height:1.6;color:#aec3c4;margin:0 0 32px; }
.living-location { font-size:12px;color:#7f9a9c;margin-top:22px;letter-spacing:.03em; }
.living-art { height:570px; position:relative; min-width:0; perspective:1400px; }
.living-scene { position:absolute;width:620px;height:450px;left:50%;top:45%;transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(calc(10deg + var(--ry,0deg))) rotateY(calc(-18deg + var(--rx,0deg))) rotateZ(-5deg); transition:transform 1.7s cubic-bezier(.2,.75,.2,1); }
.living-foundation { position:absolute;inset:-18px -18px -10px;border:1px solid #a9ffe33b;border-radius:14px;background:linear-gradient(140deg,#1d4d4f6b,#0b252740);transform:translate3d(-35px,45px,-110px);box-shadow:0 65px 80px #0007; transition:all 2s cubic-bezier(.2,.75,.2,1);padding:20px; }
.living-foundation span { font-size:9px;letter-spacing:.18em;color:#b7ffe0; }
.living-foundation div { border:1px solid #a9ffe325;margin-top:24px;height:72px;border-radius:4px; }
.living-browser {position:absolute;inset:-30px 0 auto; height:30px;border:1px solid #b4ffe136;border-radius:9px 9px 0 0;display:flex;justify-content:space-between;align-items:center;padding:0 14px;font-size:9px;color:#a1c4bf;background:#163332;transform:translate3d(0,-68px,65px);transition:transform 2s cubic-bezier(.2,.75,.2,1);}
.living-slice { position:absolute;left:0;width:620px;height:144px;background-image:var(--shot);background-size:620px 432px; border:1px solid #adffe34a; box-shadow:0 28px 40px #0008,0 1px 0 #d4fff76b; transition:transform 2s cubic-bezier(.2,.75,.2,1),box-shadow 2s,border-color 2s; }
.slice-one { top:0;background-position:center top;transform:translate3d(0,-68px,65px);border-radius:0 0 5px 5px; }
.slice-two {top:144px;background-position:center center;transform:translate3d(18px,0,125px); }
.slice-three {top:288px;background-position:center bottom;transform:translate3d(38px,68px,185px);border-radius:0 0 9px 9px; }
.living-layer-label { position:absolute;right:14px;bottom:10px;padding:5px 10px;border-radius:20px;background:#081c1df2;color:#c5ffed;border:1px solid #aaffdc4d;font-size:9px;letter-spacing:.09em;text-transform:uppercase;transition:opacity .6s; }
.living-phone {position:absolute;right:-20px;top:210px;width:128px;height:270px;background:#071113;border:5px solid #17282b;border-radius:24px;overflow:hidden;transform:translate3d(36px,0,245px) rotateZ(8deg);box-shadow:0 25px 40px #0009,0 0 0 1px #94b0aa60;transition:transform 2s cubic-bezier(.2,.75,.2,1); }
.living-phone img {width:100%;height:100%;object-fit:cover;object-position:top; }
.living-phone-speaker {position:absolute;z-index:1;width:42px;height:10px;left:50%;transform:translateX(-50%);top:0;background:#17282b;border-radius:0 0 8px 8px; }
.living-signal { position:absolute;left:0;top:480px;display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid #aaffe33b;background:linear-gradient(115deg,#153c3dea,#0a1f22ed);border-radius:12px;box-shadow:0 24px 50px #0005;transform:translateZ(120px);font-size:13px;color:#e3fff6;transition:transform 2s; }
.living-signal small {display:block;font-size:10px;color:#9dbab7;margin-top:4px; }
.living-signal-icon {font-size:25px;color:#adffe3; }
.living-art-caption {position:absolute;bottom:-35px;left:20px;right:0;display:flex;align-items:center;gap:12px;font-size:11px;color:#b8d0cb; }
.living-caption-line {width:32px;height:1px;background:#aaffe3; }
.living-caption-type {margin-left:auto;color:#718f90; }
.living-controls {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #b0ffe21c;padding-top:25px;margin-top:40px;z-index:5;gap:20px; }
.living-controls button {font:inherit;font-size:12px;cursor:pointer;color:#a0b7b6;background:transparent;border:1px solid transparent;border-radius:100px;padding:10px 17px;transition:background .2s,color .2s; }
.living-controls button:hover {color:#fff;background:#aaffe312; }
.living-controls button:focus-visible {outline:2px solid #aaffe3;outline-offset:4px; }
.living-project-picker {padding:4px;border:1px solid #aaffe326;border-radius:100px;display:flex; }
.living-project-picker button[aria-pressed=true] {background:#aaffe3;color:#062422; }
.living-motion-controls {display:flex;align-items:center;gap:10px; }
.living-motion-controls button:first-child {border-color:#aaffe33b;color:#d7fff0; }
.living-hint {grid-column:1/-1;color:#769995;font-size:11px;letter-spacing:.04em;text-align:center;margin:0; }
.living-hint span {margin-left:12px;color:#aaffe3; }
.living-stage.is-assembled .living-scene {transform:translate(-50%,-50%) rotateX(calc(3deg + var(--ry,0deg))) rotateY(calc(-10deg + var(--rx,0deg))) rotateZ(-2deg); }
.is-assembled .living-slice,.is-assembled .living-browser {transform:translate3d(0,0,0);box-shadow:none;border-color:transparent; }
.is-assembled .living-foundation {transform:translate3d(0,0,-20px); }
.is-assembled .living-layer-label {opacity:0; }
.is-assembled .living-phone {transform:translate3d(0,0,110px) rotateZ(4deg); }
.is-assembled .living-signal {transform:translate3d(-20px,-15px,40px); }
.living-after {padding:110px 24px 100px;text-align:center;max-width:880px;margin:auto; }
.living-after .living-kicker {justify-content:center; }
.living-after h2 {font-size:clamp(32px,4vw,54px);letter-spacing:-.04em;line-height:1.1; }
.living-after>p:not(.living-kicker) {color:#acc1c0;font-size:20px;line-height:1.65;margin:24px 0; }
.living-review-note {padding:20px;text-align:center;font-size:10px;letter-spacing:.1em;color:#789390;border-top:1px solid #b0ffe21c; }
@keyframes living-light {0%,100%{opacity:.4;transform:rotate(35deg) translateX(-50px)}50%{opacity:1;transform:rotate(35deg) translateX(80px)}}
.living-beam {animation:living-light 12s ease-in-out infinite; }
.is-paused *, .is-paused *::before {animation-play-state:paused!important; }
@media(min-width:1500px){.living-stage{padding-left:max(6vw,calc((100vw - 1500px)/2));padding-right:max(6vw,calc((100vw - 1500px)/2));}.living-art{height:660px}.living-scene{zoom:1.13}}
@media(max-width:1150px) and (min-width:801px){.living-scene{zoom:.78}.living-art{height:500px}.living-stage{gap:10px;padding-top:70px}.living-heading h1{font-size:60px}.living-caption-type{display:none}}
@media(max-width:800px){.living-stage{display:block;padding:50px 24px 28px;min-height:0}.living-heading{text-align:center;padding:0}.living-heading h1{font-size:clamp(52px,10vw,76px)}.living-kicker{justify-content:center;font-size:9px}.living-intro{font-size:19px}.living-art{height:510px;margin-top:50px}.living-scene{zoom:.72;left:47%;top:45%}.living-art-caption{bottom:0;left:0;justify-content:center}.living-caption-type{display:none}.living-controls{margin-top:30px;flex-direction:column;gap:15px}.living-hint{margin-top:24px}.living-after{padding:75px 25px}.living-after>p:not(.living-kicker){font-size:18px}}
@media(max-width:480px){.living-art{height:350px;margin-top:45px}.living-scene{zoom:.45;left:47%;top:44%}.living-art-caption{font-size:10px}.living-controls button{font-size:11px;padding:10px 12px}.living-heading h1{font-size:57px}.living-kicker{letter-spacing:.12em}.living-location{font-size:11px}}
@media(prefers-reduced-motion:reduce){.living-stage *{animation:none!important;transition:none!important}.living-scene{--rx:0deg!important;--ry:0deg!important}.living-hint{display:none}}
@media(min-width:1151px) and (max-width:1499px){.living-scene{zoom:.85;top:50%}.living-art{height:590px}}
/* Shared navigation is fixed; reserve its space in this standalone concept. */
.living-concept #main-content { padding-top:80px; }
@media(max-width:800px){.living-concept #main-content{padding-top:74px}}
/* Concept 02: original project assets and real type, independently choreographed. */
@font-face{font-family:LivingOswald;src:url('../concepts/living-website/oswald.woff2') format('woff2');font-display:swap;font-weight:200 700}
@font-face{font-family:LivingSerif;src:url('../concepts/living-website/serif.woff2') format('woff2');font-display:swap;font-weight:200 900}
@font-face{font-family:LivingBarlow;src:url('../concepts/living-website/barlow.woff2') format('woff2');font-display:swap;font-weight:800}
.living-components {position:absolute;inset:0;transform-style:preserve-3d;background:#14232b}
.living-piece{position:absolute;box-sizing:border-box;transform:translate3d(var(--dx),var(--dy),var(--z)) rotateZ(var(--roll)) rotateY(-4deg);transition:transform 2.6s cubic-bezier(.18,.8,.2,1),opacity .7s;transition-delay:var(--delay);font-family:LivingOswald,sans-serif;color:#fff;text-shadow:0 5px 8px #0008;animation:piece-drift 7s ease-in-out infinite;animation-delay:var(--float-delay);backface-visibility:hidden}
.living-piece img{width:100%;height:100%;object-fit:contain;display:block}
.piece-photo{overflow:hidden;box-shadow:0 35px 60px #0008;border:1px solid #adffe329}
.piece-photo img{object-fit:cover;filter:brightness(.48)}
.piece-nav-bg{background:linear-gradient(100deg,#283239,#091d28);box-shadow:0 15px 30px #0007}
.piece-nav{font-size:8px;white-space:nowrap;font-weight:600}
.piece-nav-button,.piece-primary,.piece-secondary{display:flex;align-items:center;justify-content:center;background:#286394;font-size:10px;font-weight:600;box-shadow:0 15px 25px #0006;border:1px solid #adc9dc66;text-shadow:none}
.piece-secondary{background:#12202a90;border:1px solid white}
.piece-headline{font-size:34px;font-weight:700;line-height:1.1;white-space:nowrap;letter-spacing:-.025em;filter:drop-shadow(0 8px 10px #0005)}
.piece-eyeline{font-size:7px;letter-spacing:.08em;color:#d1efff;white-space:nowrap}
.piece-body{font-family:LivingSerif,serif;font-size:10px;text-align:center;line-height:1.55}
.piece-reassurance{font-family:LivingSerif,serif;font-size:8px;white-space:nowrap}
.piece-proof{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:linear-gradient(110deg,#1d3039,#0b1c22);border-top:1px solid #8ed9ce30;letter-spacing:.02em;box-shadow:0 30px 45px #0007}
[data-project=sierra] .living-components{background:#202c2e}
[data-project=sierra] .piece-photo img{filter:brightness(.85)}
[data-project=sierra] .piece-headline{font-family:LivingBarlow,sans-serif;font-size:40px;font-weight:800;line-height:1}
[data-project=sierra] .piece-headline.red{color:#c8352b}
[data-project=sierra] .piece-primary,[data-project=sierra] .piece-nav-button{background:#c62d22;font-family:Arial,sans-serif;font-size:7px}
[data-project=sierra] .piece-secondary{font-family:Arial,sans-serif;font-size:7px}
[data-project=sierra] .piece-body{font-family:Arial,sans-serif;text-align:left;font-size:8px;line-height:1.65}
[data-project=sierra] .piece-eyeline{font-family:LivingBarlow,sans-serif;font-size:12px;color:white;letter-spacing:0}
[data-project=sierra] .piece-nav{font-family:Arial,sans-serif;font-size:6px}
[data-project=sierra] .piece-proof{background:#dce5e6;color:#233338;font-family:LivingBarlow,sans-serif;font-size:11px;text-shadow:none}
.living-resolved{position:absolute;inset:0 auto auto 0;width:620px;height:432px;background-image:var(--shot);background-size:100% 100%;opacity:0;pointer-events:none;transform:translateZ(2px);transition:opacity .45s;box-shadow:0 45px 80px #0008}
.is-assembled .living-piece{transform:translate3d(0,0,0) rotateZ(0) rotateY(0);animation:none}
.is-assembled .living-resolved{opacity:1;transition-delay:3.3s}
.living-stage:not(.is-assembled) .living-resolved{transition-delay:0s}
.living-stage:not(.is-assembled) .living-scene{transform:translate(-50%,-50%) rotateX(calc(15deg + var(--ry,0deg))) rotateY(calc(-24deg + var(--rx,0deg))) rotateZ(-6deg)}
.living-phone{transform:translate3d(70px,30px,290px) rotateZ(12deg)}
.living-browser{transform:translate3d(0,-70px,0)}
.living-signal{top:535px;transform:translate3d(-20px,0,150px)}
.living-art{height:650px}
.living-art-caption{bottom:-15px}
.living-scene{top:44%;transition:transform .75s cubic-bezier(.2,.75,.2,1)}
@keyframes piece-drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(min-width:1151px) and (max-width:1499px){.living-scene{zoom:.76;top:43%}.living-art{height:640px}}
@media(min-width:801px) and (max-width:1150px){.living-scene{zoom:.62}.living-art{height:560px}}
@media(max-width:800px){.living-art{height:550px}.living-scene{zoom:.62;top:40%}}
@media(max-width:480px){.living-art{height:380px}.living-scene{zoom:.38;top:39%}}
@media(prefers-reduced-motion:reduce){.living-piece{animation:none!important}.living-resolved{transition:none!important}}
/* Keep the scene transparent so its rear image plane remains visible. */
.living-components,[data-project=sierra] .living-components{background:transparent}
.living-foundation{background:#13272bd9}
.living-piece.piece-photo{--z:25px!important}

/* Concept 03: the actual HTML composition is the finished state. No image swap. */
.living-feature-label{font-size:12px;color:#9fbbb7;margin:0}
.living-components{height:402px;transform-style:preserve-3d}
.living-piece,.is-assembled .living-piece{animation:none;transition:none;transform:translate3d(0,0,0);text-shadow:none;filter:none}
.piece-photo{border:0;box-shadow:none}
.piece-photo img{filter:brightness(.5);object-fit:cover;object-position:center}
.piece-headline{font-size:34px;line-height:1.1;text-align:center;font-weight:700;letter-spacing:-.025em}
.piece-body{font-size:10px;line-height:1.55}
.piece-proof{flex-direction:column;gap:4px;border:0;border-right:1px solid #8ed9ce20;box-shadow:none;font-weight:600;font-size:12px;line-height:1.2}
.piece-proof b{font-weight:600}.piece-proof small{font-size:7px;letter-spacing:.06em}
.piece-topline{background:#081923;color:#afc4ca;font-size:7px;letter-spacing:.02em;text-align:right;padding:1px 8px}
.piece-nav-bg{box-shadow:none}
.piece-nav-button,.piece-primary,.piece-secondary{box-shadow:none;border:0}
.piece-secondary{border:1px solid white;background:transparent}
.living-foundation{inset:-20px -5px 44px;background:#10242b;border-radius:10px}
.living-foundation>span,.living-foundation>div{visibility:hidden}
.living-browser{inset:-42px 0 auto}
.living-stage.is-assembled .living-scene{transform:translate(-50%,-50%) rotateX(calc(8deg + var(--ry,0deg))) rotateY(calc(-16deg + var(--rx,0deg))) rotateZ(-4deg)}
.living-signal{top:465px}
.living-stage.is-assembled .living-phone{transform:translate3d(12px,-10px,110px) rotateZ(4deg)}
@media(max-width:800px){.living-feature-label{text-align:center;font-size:11px}}

.piece-reassurance{text-align:center}

.living-stage:not(.is-ready) .living-piece{visibility:hidden}

/* Concept 04: clearer spacing, coordinated mobile assembly, and deeper light. */
.piece-body{font-size:10px;line-height:1.45;text-wrap:pretty}
.living-controls{justify-content:center}
.living-stage.is-assembled .living-signal{top:368px;left:-28px;transform:translate3d(0,0,150px);box-shadow:0 28px 45px #0009,0 1px 0 #d4fff75c;border-color:#aaffe362}
.living-signal{padding:18px 24px;background:linear-gradient(125deg,#245654f5,#092429f5);backdrop-filter:blur(14px)}
.living-stage{background:radial-gradient(ellipse at 81% 18%,#417f705c,transparent 48%),radial-gradient(ellipse at 72% 75%,#11656a3d,transparent 48%),linear-gradient(135deg,#061517 30%,#081e22 70%,#061416)}
.living-atmosphere::before{content:"";position:absolute;width:900px;height:180px;left:37%;top:70%;border-radius:50%;background:radial-gradient(ellipse,#9effd94d,#2b938630 35%,transparent 70%);filter:blur(24px);transform:perspective(700px) rotateX(50deg) rotate(-12deg)}
.living-atmosphere::after{content:"";position:absolute;inset:-20% -20% 0 25%;background:conic-gradient(from 190deg at 70% 0%,transparent 0deg,#b3ffe41c 10deg,transparent 24deg,#63e6cb0c 35deg,transparent 48deg);filter:blur(12px);pointer-events:none}
.living-beam{width:320px;background:linear-gradient(90deg,transparent,#c5ffe92b,transparent);filter:blur(25px)}
.living-orbit{border-color:#aaffdf24;box-shadow:0 0 100px #a5ffe20c,inset 0 0 80px #a5ffe208}
.living-mobile-screen{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:#10212c}
.living-mobile-content{position:absolute;left:0;top:0;width:375px;height:812px;transform:scale(.3146667);transform-origin:top left}
.living-mobile-piece{position:absolute;box-sizing:border-box;color:white;text-align:center;font-family:LivingOswald,sans-serif;line-height:1.2}
.living-mobile-piece img{width:100%;height:100%;object-fit:contain}
.m-photo img{object-fit:cover;filter:brightness(.42)}
.m-menu{font-size:16px;border:1px solid #c1e0e752}
.m-region{font-size:13px;letter-spacing:.11em;color:#d1e9f3;line-height:1.5}
.m-title{font-size:39px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.m-copy{font-family:LivingSerif,serif;font-size:18px;line-height:1.5}
.m-primary,.m-secondary{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;background:#286394}
.m-secondary{background:#0a192870;border:2px solid white}
.m-note{font-family:LivingSerif,serif;font-size:16px;line-height:1.45}
.living-stage:not(.is-ready) .living-mobile-piece{visibility:hidden}
.living-phone-speaker{z-index:2}
@media(max-width:800px){.living-stage{background:radial-gradient(ellipse at 75% 57%,#265e605e,transparent 55%),#061517}.living-atmosphere::before{left:-20%;top:65%;width:140%;opacity:.7}}

@media(hover:none){.living-hint{display:none}}

/* Concept 05: full-bleed underwater light, drifting dust, larger project. */
.living-stage{background:#031013;grid-template-columns:.8fr 1.35fr;gap:15px;padding-top:75px}
.living-atmosphere{inset:0;mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%)}
.living-atmosphere::before,.living-atmosphere::after{display:none}
.living-waterlight{position:absolute;inset:-35%;pointer-events:none;will-change:transform,opacity;filter:blur(35px);mix-blend-mode:screen}
.waterlight-near{background:radial-gradient(ellipse 13% 48% at 68% 25%,#c0ffe258 0%,#64dabc30 28%,#197b7920 51%,transparent 77%);transform:rotate(27deg);animation:water-near 19s ease-in-out infinite alternate}
.waterlight-far{background:radial-gradient(ellipse 24% 16% at 73% 40%,#86f5d85c 0%,#257c8040 30%,transparent 75%),radial-gradient(ellipse 9% 42% at 49% 30%,#82ecdc28 0%,transparent 75%);animation:water-far 26s ease-in-out infinite alternate;filter:blur(48px)}
.waterlight-floor{background:radial-gradient(ellipse 26% 10% at 65% 69%,#66f2d556 0%,#0c7b8733 35%,transparent 76%);animation:water-floor 22s ease-in-out infinite alternate;filter:blur(30px)}
.living-dust{position:absolute;inset:0;mask-image:radial-gradient(ellipse at 70% 45%,#000 15%,#0008 55%,transparent 85%)}
.living-dust i{position:absolute;left:var(--px);top:var(--py);width:var(--size);height:var(--size);border-radius:50%;background:#d1fff0;box-shadow:0 0 7px 2px #7cf7d329;opacity:.3;animation:dust-drift var(--duration) ease-in-out infinite;animation-delay:var(--delay);will-change:transform,opacity}
.living-dust i:nth-child(4n){filter:blur(1px);box-shadow:0 0 12px 4px #9dffe226}
@keyframes water-near{0%{transform:translate(-4%,0) rotate(21deg) scale(.95);opacity:.6}100%{transform:translate(4%,3%) rotate(32deg) scale(1.13);opacity:1}}
@keyframes water-far{0%{transform:translate(3%,-3%) rotate(-7deg);opacity:.55}100%{transform:translate(-4%,4%) rotate(8deg);opacity:1}}
@keyframes water-floor{0%{transform:translate(-3%,2%) scale(.9);opacity:.55}100%{transform:translate(3%,-1%) scale(1.1);opacity:.9}}
@keyframes dust-drift{0%,100%{transform:translate3d(-12px,16px,0);opacity:.12}45%{opacity:.65}50%{transform:translate3d(24px,-34px,0);opacity:.45}}
.living-stage.is-assembled .living-phone{transform:translate3d(8px,-2px,120px) rotateZ(4deg) scale(1.08);transform-origin:bottom center}
.living-scene{zoom:1.05;top:47%;left:49%}
.living-art{height:620px}
.living-controls{margin-top:15px}
@media(min-width:1500px){.living-scene{zoom:1.24;top:47%}.living-art{height:690px}}
@media(min-width:1151px) and (max-width:1499px){.living-scene{zoom:.96;top:47%;left:48%}.living-art{height:590px}}
@media(min-width:801px) and (max-width:1150px){.living-scene{zoom:.77;top:48%;left:48%}.living-art{height:520px}.living-heading h1{font-size:54px}}
@media(max-width:800px){.living-stage{padding-top:45px}.living-scene{zoom:.78;top:48%;left:47%}.living-art{height:480px;margin-top:35px}.living-controls{margin-top:10px}.living-waterlight{inset:-25% -60%}.waterlight-near{opacity:.65}}
@media(max-width:480px){.living-scene{zoom:.47;left:47%;top:49%}.living-art{height:300px;margin-top:30px}.living-dust i:nth-child(2n){display:none}}
@media(prefers-reduced-motion:reduce){.living-waterlight,.living-dust i{animation:none!important;will-change:auto}.living-dust i{opacity:.25}}
/* Match the canvas beyond the masked light so the hero has no hard lower edge. */
.living-concept,.living-concept #main-content{background-color:#031013}

/* Concept 06: directional shafts from upper right to lower left. */
.living-source-glow{position:absolute;inset:-30%;background:radial-gradient(ellipse 23% 13% at 79% 19%,#d2fff5a8, #6be7d853 27%,#217b8430 52%,transparent 80%);filter:blur(22px);animation:source-breathe 16s ease-in-out infinite alternate}
.living-ray-field{position:absolute;inset:0;mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);opacity:.95}
.living-ray{position:absolute;left:92%;top:-120px;width:var(--ray-width);height:1450px;transform-origin:50% 0;transform:rotate(var(--angle));background:linear-gradient(to bottom,#d4fff6c2 0%,#8deedb80 14%,#43b9b54d 42%,#1e747729 65%,transparent 94%);mask-image:linear-gradient(to right,transparent,#000 42%,#000 58%,transparent);filter:blur(7px);opacity:var(--ray-alpha);animation:ray-sway var(--ray-duration) ease-in-out infinite alternate;animation-delay:var(--ray-delay);will-change:transform,opacity}
.living-ray:nth-child(3n){filter:blur(3px)}
.living-ray:nth-child(4n){filter:blur(14px);width:100px}
.living-light-haze{position:absolute;inset:-20%;background:radial-gradient(ellipse 40% 45% at 70% 36%,#35aea534,transparent 75%),radial-gradient(ellipse 35% 35% at 37% 66%,#1a919123,transparent 80%);filter:blur(45px);animation:haze-drift 23s ease-in-out infinite alternate}
.living-dust{mask-image:radial-gradient(ellipse at 65% 42%,#000 15%,#000b 62%,transparent 95%)}
.living-dust i{background:#d6fff7;box-shadow:0 0 6px 1px #93ffe54d;animation-name:light-dust;opacity:.5}
.living-dust i:nth-child(5n){width:3px;height:3px;filter:blur(.6px);box-shadow:0 0 13px 3px #b0ffe83b}
@keyframes ray-sway{0%{transform:rotate(calc(var(--angle) - 3deg)) scaleX(.7);opacity:calc(var(--ray-alpha) * .65)}50%{opacity:var(--ray-alpha)}100%{transform:rotate(calc(var(--angle) + 3deg)) scaleX(1.35);opacity:calc(var(--ray-alpha) * .85)}}
@keyframes source-breathe{from{transform:translate(1%,-1%);opacity:.7}to{transform:translate(-2%,2%);opacity:1}}
@keyframes haze-drift{from{transform:translate(3%,-2%);opacity:.6}to{transform:translate(-3%,2%);opacity:1}}
@keyframes light-dust{0%,100%{transform:translate3d(16px,-18px,0);opacity:.18}40%{opacity:.75}50%{transform:translate3d(-32px,35px,0);opacity:.4}}
@media(max-width:800px){.living-ray{left:115%;height:1450px;top:15%;opacity:calc(var(--ray-alpha) * .8)}.living-source-glow{background:radial-gradient(ellipse 30% 25% at 85% 45%,#a0ffe06b,#267a7933 40%,transparent 80%)}}
@media(prefers-reduced-motion:reduce){.living-ray,.living-source-glow,.living-light-haze,.living-dust i{animation:none!important;will-change:auto}}
@media(max-width:480px){.living-stage.is-assembled .living-signal{left:24px}}

/* Concept 07: service clarity, local relevance, and softer phone-image contrast. */
.living-heading .living-kicker{font-size:10px;letter-spacing:.1em;line-height:1.7;max-width:100%}
.living-heading h1{font-size:clamp(54px,5.6vw,88px)}
.living-intro{font-size:clamp(18px,1.5vw,22px);line-height:1.65;max-width:35ch}
.living-location{font-size:13px;line-height:1.7;max-width:44ch;color:#99b4b1}
.living-cta-group{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.living-work-link{font-size:14px;font-weight:500;color:#b9f8e3;text-underline-offset:5px;text-decoration:underline}
.living-work-link:hover{color:#fff}
.living-work-link:focus-visible{outline:2px solid #aaffe3;outline-offset:5px}
.living-mobile-screen{background:linear-gradient(160deg,#233d48,#172e37)}
.m-photo img{filter:brightness(.8);opacity:.42;object-position:44% center}
.m-photo{background:linear-gradient(180deg,#16313a,#142b34)}
@media(max-width:800px){.living-intro,.living-location{margin-left:auto;margin-right:auto}.living-cta-group{justify-content:center}.living-heading .living-kicker{font-size:9px;letter-spacing:.07em}.living-heading h1{font-size:clamp(48px,9vw,72px)}}
@media(max-width:480px){.living-heading h1{font-size:55px}.living-cta-group{flex-direction:column;gap:18px}.living-intro{font-size:18px}.living-location{font-size:12px}}

/* Carry the light a little farther down while retaining a soft exit. */
.living-ray-field{mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}
.living-ray{height:1600px;background:linear-gradient(to bottom,#d4fff6c2 0%,#8deedb80 14%,#43b9b54d 45%,#1e747733 73%,transparent 100%)}
@media(max-width:800px){.living-ray{height:1600px}}

/* Finishing interactions: edge light, a single glint, particle depth, scroll recession. */
.living-art{transform:translateY(var(--scroll-y,0px)) scale(var(--scroll-scale,1));transform-origin:50% 45%}
.living-edge-light{position:absolute;left:-2px;top:-43px;width:624px;height:449px;border-radius:11px;padding:1.5px;background:radial-gradient(ellipse at var(--light-x,75%) var(--light-y,15%),#d4fff6d9 0%,#a0ffe36b 20%,#76cab51c 48%,transparent 75%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;transform:translateZ(4px)}
.living-phone::after{content:"";position:absolute;inset:0;border-radius:19px;padding:1.5px;background:radial-gradient(ellipse at var(--light-x,75%) var(--light-y,15%),#e1fff5c9,#b0ffe54d 30%,transparent 70%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:4}
.living-glint{position:absolute;left:0;top:-13px;width:620px;height:415px;overflow:hidden;pointer-events:none;transform:translateZ(5px);border-radius:5px;}
.living-glint span{position:absolute;inset:-30% auto -30% 0;width:30%;background:linear-gradient(90deg,transparent,#d5fff318 35%,#e5fff74a 50%,#d5fff318 65%,transparent);opacity:0}
.living-dust-layer{position:absolute;inset:-20px;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:transform}
.dust-far{opacity:.45}.dust-middle{opacity:.7}.dust-near{opacity:1}
@media(prefers-reduced-motion:reduce){.living-art{transform:none!important}.living-glint{display:none}.living-dust-layer{transform:none!important;transition:none!important;will-change:auto}}

/* Decorative project preview: keep pointer tracking, prevent text/image selection. */
.living-scene,.living-scene *{-webkit-user-select:none;user-select:none}
.living-scene img{-webkit-user-drag:none}

/* A quiet floating caption with one light pass per desktop hover. */
.living-signal{overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.living-signal::before{content:"";position:absolute;inset:-40% auto -40% -50%;width:35%;background:linear-gradient(90deg,transparent,#d5fff32b,transparent);transform:skewX(-20deg);opacity:0;pointer-events:none;z-index:-1}
@media(hover:hover) and (pointer:fine){
  .living-stage.is-assembled:not(.is-paused) .living-signal:hover{transform:translate3d(0,-5px,170px);border-color:#bdffe6b3;box-shadow:0 34px 54px #0009,0 0 24px #aaffe318}
  .living-stage:not(.is-paused) .living-signal:hover::before{animation:signal-light-pass .9s ease-out both}
}
@keyframes signal-light-pass{0%{left:-50%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:120%;opacity:0}}
.living-dust i.living-dust-desktop{width:var(--size);height:var(--size);filter:none;box-shadow:0 0 5px #93ffe533}
@media(max-width:800px){.living-dust i.living-dust-desktop{display:none}}
@media(prefers-reduced-motion:reduce){.living-signal::before{display:none}.living-stage.is-assembled .living-signal:hover{transform:translate3d(0,0,150px)}}

/* Let the atmosphere begin behind the fixed navigation; retain copy clearance. */
.living-concept #main-content{padding-top:0}
.living-stage{padding-top:155px;min-height:100svh}
@media(min-width:801px) and (max-width:1150px){.living-stage{padding-top:150px}}
@media(max-width:800px){.living-stage{padding-top:119px;min-height:0}.living-ray{top:-120px}.living-source-glow{background:radial-gradient(ellipse 30% 25% at 85% 19%,#a0ffe06b,#267a7933 40%,transparent 80%)}}

/* One raster surface replaces hundreds of filtered and masked animation layers. */
.living-atmosphere{mask-image:none;contain:strict}
.living-atmosphere-canvas{display:block;width:100%;height:100%;pointer-events:none}

/* The floating caption is now a real contact link. */
.living-signal{text-decoration:none;cursor:pointer;min-height:48px}
.living-signal small{color:#b3f7df}
.living-signal:focus-visible{outline:3px solid #c9ffec;outline-offset:6px;border-color:#c9ffec}
@media(max-width:480px){
  .living-stage.is-assembled .living-signal{top:390px}
  .living-signal{font-size:25px;padding:23px 26px;width:max-content;min-height:110px}
  .living-signal > span{white-space:nowrap}
  .living-signal small{font-size:21px;margin-top:8px}
  .living-signal-icon{font-size:32px}
  .living-controls{margin-top:40px}
}

.living-signal-icon{width:1em;height:1em;flex:0 0 1em}

/* Homepage integration: retain readable content over a continuous, fading atmosphere. */
.living-home #main-content{padding-top:0;background:#111718}
.living-home .living-stage{overflow:visible;clip-path:inset(0 0 -240px);min-height:0;padding-bottom:58px;background:transparent}
.living-home .living-atmosphere{bottom:-240px}
.living-home .living-work-transition{z-index:1;background:linear-gradient(to bottom,transparent,#111718 260px);padding-top:64px}
.living-home .living-work-transition .work-card{background-color:#111b1d}
.living-home .living-heading{padding-bottom:0}
.living-motion-toggle{position:absolute;right:max(5vw,24px);bottom:12px;z-index:5;color:#abc4bf;background:#0a232780;border:1px solid #b0ffe22e;border-radius:24px;padding:8px 14px;font:inherit;font-size:12px;min-height:44px;cursor:pointer}
.living-motion-toggle:hover{color:#e1fff3;background:#153b3d}
.living-motion-toggle:focus-visible{outline:2px solid #aaffe3;outline-offset:4px}
.living-fallback{width:min(100%,720px);height:auto;border-radius:12px}
@media(max-width:800px){.living-home .living-stage{padding-bottom:70px}.living-home .living-work-transition{padding-top:50px}}
@media(max-width:480px){.living-home .living-art{height:350px}.living-home .living-scene{top:45%}}
@media(prefers-reduced-motion:reduce){.living-home .living-motion-toggle{display:none}}

.living-home .living-stage::after{content:"";position:absolute;inset:0 0 -240px;z-index:-2;pointer-events:none;background:linear-gradient(to bottom,#031013 0%,#031013 calc(100% - 320px),#111718 100%)}

@media(max-width:480px){.living-home .living-heading h1{font-size:clamp(44px,14vw,55px)}}