/* HOME PLUS — Interactive Edition 2.0. Progressive enhancement, no framework. */
:root{--ease-lux:cubic-bezier(.22,1,.36,1);--glow:rgba(183,154,120,.20)}
.scroll-progress{position:fixed;z-index:110;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#b79a78,#173d2d);pointer-events:none;will-change:transform}
.site-header{transition:box-shadow .36s ease,background-color .36s ease}
.site-header.is-scrolled{background:rgba(255,254,250,.96);box-shadow:0 12px 32px rgba(10,40,25,.085)}
.brand img{transition:transform .65s var(--ease-lux)}.brand:hover img{transform:rotate(-7deg) scale(1.06)}
/* Slide-in elements are never hidden until the script opts in. */
.motion-running .motion-reveal,.motion-running .reveal:not(.visible){opacity:0;transform:translate3d(0,34px,0);transition:opacity .82s var(--ease-lux),transform .82s var(--ease-lux)}
.motion-running .motion-reveal.motion-visible,.motion-running .reveal.visible{opacity:1;transform:translate3d(0,0,0)}
.motion-running .service-grid .service-card:nth-child(2),.motion-running .all-services>*:nth-child(2){transition-delay:.08s}
.motion-running .service-grid .service-card:nth-child(3),.motion-running .all-services>*:nth-child(3){transition-delay:.15s}
.motion-running .service-grid .service-card:nth-child(4){transition-delay:.22s}
.motion-running .three-grid .info-card:nth-child(2){transition-delay:.10s}
.motion-running .three-grid .info-card:nth-child(3){transition-delay:.20s}
/* Motion details that preserve click targets and reading order. */
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform .28s var(--ease-lux),background-color .25s,box-shadow .35s}
.button:hover{box-shadow:0 13px 30px rgba(17,61,43,.16)}
.button .arr{display:inline-block;transition:transform .36s var(--ease-lux)}.button:hover .arr{transform:translate(3px,-3px)}
.service-card,.idea-card,.gallery-item,.service-feature,.info-card{will-change:auto;transition:transform .55s var(--ease-lux),box-shadow .55s var(--ease-lux)}
.service-card-img img,.idea-card img,.gallery-item .photo img,.split-img>img{transition:transform .9s var(--ease-lux)}
.service-card:hover .service-card-img img,.idea-card:hover img,.gallery-item:hover .photo img{transform:scale(1.055)}
.service-card:hover,.idea-card:hover,.gallery-item:hover,.service-feature:hover,.info-card:hover{box-shadow:0 27px 54px rgba(15,45,32,.12);transform:translate3d(0,-7px,0)}
.section-head .kicker,.page-hero .kicker{position:relative}
.hero-copy .kicker{animation:fade-rise .85s .07s backwards var(--ease-lux)}
.hero-copy h1{animation:fade-rise 1.05s .15s backwards var(--ease-lux)}
.hero-copy .intro{animation:fade-rise 1.05s .25s backwards var(--ease-lux)}
.hero-actions{animation:fade-rise .95s .4s backwards var(--ease-lux)}
.hero-visual{isolation:isolate;transition:transform .4s ease;--parallax-x:0px;--parallax-y:0px}
.hero-visual>img{transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.025);transition:transform .3s ease-out}
.hero-stamp{animation:float-card 6s ease-in-out infinite}
.hero-float-info{position:absolute;z-index:3;pointer-events:none;box-shadow:0 16px 38px rgba(4,35,24,.17);animation:float-card 7.5s ease-in-out infinite;animation-delay:-2s}
.hero-float-info-a{left:-21px;top:100px;background:#173d2d;color:white;padding:19px 23px 20px;border-radius:2px;min-width:160px}
.hero-float-info-a small{font:700 9px/1.6 'DM Sans',sans-serif;letter-spacing:.17em;color:#d8c4a6;display:block;margin-bottom:6px}
.hero-float-info-a strong{font-size:19px;font-weight:500;line-height:1.45}
.hero-float-info-b{right:-25px;bottom:136px;padding:12px 15px;background:#fffcf6;color:#173d2d;display:flex;align-items:center;gap:9px;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.12em;animation-duration:6.1s}
.float-dot,.live-pulse{display:inline-block;width:8px;height:8px;background:#b79a78;border-radius:50%;box-shadow:0 0 0 5px rgba(183,154,120,.16);animation:pulse 2.6s ease-in-out infinite}
.motion-ticker{position:relative;overflow:hidden;background:#133a2a;color:#f5f2e9;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);padding:21px 0}
.ticker-track{display:flex;width:max-content;animation:ticker 28s linear infinite}
.ticker-track span{display:inline-block;white-space:nowrap;font:600 13px/1.4 'DM Sans',sans-serif;letter-spacing:.22em;padding-left:35px}
.ticker-track b{color:#c7a988;padding:0 35px;font-weight:400}
.motion-ticker:hover .ticker-track{animation-play-state:paused}
/* Interactive idea cards: each card has its own motion, with genuine pointer-driven dragging. */
.interactive-zone{background:#f3f3ed;overflow:hidden;padding-top:95px;padding-bottom:82px}
.interactive-intro{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:30px}
.interactive-intro>div:first-child{max-width:710px}
.interactive-intro h2{margin:0 0 13px}.interactive-intro p:not(.kicker){margin:0;max-width:590px}
.interactive-intro-label{font:700 11px/1.5 'DM Sans',sans-serif;color:#315c41;letter-spacing:.17em;white-space:nowrap;margin-bottom:11px;display:flex;gap:14px;align-items:center}
.motion-playground{height:540px;background:#e8e9de;position:relative;overflow:hidden;border:1px solid #d5d9cd;border-radius:4px;box-shadow:0 18px 48px rgba(16,53,34,.06);touch-action:pan-y}
.motion-playground::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.motion-playground::after{content:'✳';position:absolute;right:36px;top:18px;color:#b2bda9;font-size:46px;font-weight:100;pointer-events:none;transform:rotate(-18deg)}
.board-watermark{position:absolute;top:50%;left:51%;transform:translate(-50%,-50%);font:700 clamp(60px,8.5vw,132px)/.95 'DM Sans','Kanit',sans-serif;letter-spacing:-.067em;color:rgba(18,64,42,.082);white-space:nowrap;pointer-events:none}
.board-watermark em{font-style:normal;color:rgba(183,154,120,.20)}
.board-corner,.board-annotation{position:absolute;font:600 10px/1.3 'DM Sans',sans-serif;letter-spacing:.18em;color:#718478;pointer-events:none;z-index:1}
.board-corner{top:23px;left:26px}.board-annotation{bottom:22px;right:25px}
.board-ring{position:absolute;width:360px;height:360px;border:1px solid rgba(88,114,88,.18);border-radius:50%;pointer-events:none}
.board-ring-a{top:-210px;left:35%}.board-ring-b{bottom:-220px;right:3%}
.drag-card{position:absolute;width:232px;max-width:calc(100% - 30px);z-index:4;transform:translate3d(var(--move-x,0px),var(--move-y,0px),0) rotate(var(--card-rotation,0deg));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:6px;transition:filter .22s ease}
.drag-card:focus-visible{outline:3px solid #ba9674}.drag-card.is-dragging{cursor:grabbing;z-index:17!important;filter:drop-shadow(0 30px 20px rgba(17,52,37,.24))}
.drag-surface{background:#fffefa;box-shadow:0 17px 45px rgba(17,52,37,.19);padding:8px 8px 0;border-radius:3px;border:1px solid rgba(29,66,46,.08);animation:free-drift 6s ease-in-out infinite;animation-delay:var(--card-delay,-1s)}
.drag-card.is-dragging .drag-surface{animation-play-state:paused}
.drag-surface>img{height:182px;width:100%;object-fit:cover;pointer-events:none}
.drag-content{padding:13px 8px 14px;display:flex;flex-direction:column;gap:4px}
.drag-content span,.drag-content small{color:#a58866;font:600 9px/1.5 'DM Sans',sans-serif;letter-spacing:.12em}
.drag-content strong{font-size:15px;font-weight:500;color:#234831;line-height:1.5}
.drag-content small{margin-top:7px;color:#819187;font-size:8px}
.drag-card-one{left:12%;top:113px;--card-rotation:-6deg;--card-delay:-.6s}
.drag-card-two{left:41%;top:69px;--card-rotation:5deg;--card-delay:-2.6s}
.drag-card-three{left:70%;top:147px;--card-rotation:-3deg;--card-delay:-4.3s}
.board-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:17px;font-size:12px;color:#657268}
.board-reset{padding:10px 18px;border:1px solid #9aa899;background:transparent;border-radius:2px;color:#173d2d;font-weight:500;transition:background .25s,transform .25s}
.board-reset:hover{background:#dce5da;transform:translateY(-2px)}
/* Before/after concept comparison slider */
.compare-section{background:#fffefa}
.compare-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:70px;align-items:center}
.compare-copy h2{margin:0 0 23px}.compare-copy .lead{max-width:410px}
.compare-legend{display:flex;justify-content:space-between;border-bottom:1px solid #e1e2da;padding-bottom:15px;margin:27px 0 24px;color:#173d2d;font-size:12px;max-width:390px}
.compare-copy .button{margin-top:25px}
.compare-component{position:relative;isolation:isolate;height:530px;overflow:hidden;border-radius:4px;background:#e4e5df;box-shadow:0 26px 53px rgba(11,46,28,.13)}
.compare-image{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;position:absolute;inset:0}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split,50%)) 0 0);z-index:1}
.compare-split{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;transform:translateX(-50%);background:#f8f7f3;box-shadow:0 0 10px rgba(0,0,0,.15);pointer-events:none;z-index:3}
.compare-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:57px;height:57px;background:#fffefa;border:1px solid #dedfd6;color:#173d2d;display:grid;place-items:center;border-radius:50%;box-shadow:0 8px 28px rgba(15,45,32,.20);font:600 20px/1 'DM Sans',sans-serif;white-space:nowrap}
.compare-label{position:absolute;top:18px;z-index:2;padding:6px 11px;font-size:12px;font-weight:500;border-radius:2px;pointer-events:none}
.compare-label-before{left:17px;background:rgba(255,254,250,.95);color:#173d2d}
.compare-label-after{right:17px;background:rgba(23,61,45,.9);color:white}
.compare-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.compare-component:focus-within{outline:3px solid #b79a78;outline-offset:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Page-wide enhancement */
.page-hero{position:relative;overflow:hidden}
.page-hero::after{content:'+';font:300 360px/1 'DM Sans',sans-serif;color:rgba(183,154,120,.07);position:absolute;right:-20px;top:-135px;pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.price-item{transition:background .25s,transform .3s var(--ease-lux)}.price-item:hover{transform:translateX(5px)}
.motion-running .price-item{animation:fade-rise .46s var(--ease-lux) backwards}
.motion-running .price-item:nth-child(3n+2){animation-delay:.05s}.motion-running .price-item:nth-child(3n+3){animation-delay:.10s}
.form-box,.estimate-result{transition:box-shadow .3s var(--ease-lux)}
.form-box:focus-within{box-shadow:0 22px 52px rgba(15,45,32,.12)}
.estimate-result.is-updated{animation:estimate-flash .5s ease}
/* Small floating control allows user to disable all ambient motion. */
.motion-toggle{position:fixed;z-index:90;right:18px;bottom:18px;background:rgba(255,254,250,.96);backdrop-filter:blur(12px);border:1px solid rgba(25,65,42,.22);border-radius:40px;padding:9px 15px;color:#173d2d;box-shadow:0 10px 30px rgba(17,61,43,.13);font:600 11px/1.3 'DM Sans','Kanit',sans-serif;letter-spacing:.03em;min-height:38px;transition:transform .25s,box-shadow .25s}
.motion-toggle:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,61,43,.18)}
.motion-toggle[aria-pressed=false]{opacity:.76}
.motion-paused .ticker-track,.motion-paused .hero-stamp,.motion-paused .hero-float-info,.motion-paused .drag-surface,.motion-paused .float-dot,.motion-paused .live-pulse,.motion-paused .hero-copy *{animation-play-state:paused!important}
.motion-paused .hero-visual>img{transform:none!important}
.motion-paused .motion-reveal,.motion-paused .reveal{opacity:1!important;transform:none!important;transition:none!important}
@keyframes fade-rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes free-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(183,154,120,.14)}50%{box-shadow:0 0 0 9px rgba(183,154,120,.03)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes estimate-flash{50%{filter:brightness(1.035)}}
@media(max-width:1080px){.drag-card-one{left:8%}.drag-card-two{left:39%}.drag-card-three{left:69%}.compare-grid{gap:35px}.hero-float-info-b{right:0}}
@media(max-width:820px){.hero-float-info-a{left:8px;top:80px}.hero-float-info-b{right:8px;bottom:126px}.interactive-intro{align-items:start}.drag-card{width:188px}.drag-surface>img{height:150px}.drag-card-one{left:5%;top:133px}.drag-card-two{left:36%;top:65px}.drag-card-three{left:66%;top:181px}.motion-playground{height:480px}.compare-grid{grid-template-columns:1fr;gap:30px}.compare-copy .lead{max-width:650px}.compare-component{height:465px}}
@media(max-width:560px){.hero-float-info-a{left:9px;top:50px;min-width:122px;padding:10px 12px}.hero-float-info-a strong{font-size:12px}.hero-float-info-a small{font-size:7px}.hero-float-info-b{right:8px;bottom:119px;font-size:7px;padding:8px}.motion-ticker{padding:15px 0}.ticker-track span{font-size:10px}.interactive-zone{padding:68px 0 54px}.interactive-intro{flex-direction:column;gap:14px}.interactive-intro-label{font-size:10px}.motion-playground{height:480px}.board-watermark{font-size:58px;left:52%;top:54%}.board-corner{font-size:7px;left:12px;top:14px}.board-annotation{font-size:7px;bottom:12px;right:12px}.drag-card{width:148px}.drag-surface{padding:5px 5px 0}.drag-surface>img{height:106px}.drag-content{padding:8px 5px 10px}.drag-content span,.drag-content small{font-size:7px}.drag-content strong{font-size:12px;line-height:1.35}.drag-card-one{left:4%;top:104px}.drag-card-two{left:49%;top:65px}.drag-card-three{left:21%;top:280px}.board-controls{align-items:flex-start;flex-direction:column;font-size:11px}.compare-component{height:405px}.compare-copy h2{font-size:36px}.motion-toggle{bottom:12px;right:12px;padding:8px 12px;font-size:10px}.page-hero::after{font-size:240px;top:-50px;right:-10px}}
@media(prefers-reduced-motion:reduce){.motion-reveal,.reveal{opacity:1!important;transform:none!important}.ticker-track,.hero-float-info,.hero-stamp,.drag-surface,.float-dot,.live-pulse,.hero-copy *{animation:none!important}.hero-visual>img{transform:none!important}.motion-toggle{display:none}}

.explore-play{display:inline-flex;align-items:center;gap:12px;font-size:12px;color:#496c58;border-bottom:1px solid #b79a78;margin-top:24px;padding:6px 0;transition:transform .3s var(--ease-lux),color .3s}.explore-play:hover{transform:translateX(5px);color:#173d2d}