/* Residential template (Bradd, Oct 2 2026): every For Home page in the cinematic style first built for Home Theater.
   Gamma blue on black with the logo's silver; Poppins in light display weights. Motion comes from home-theater.js,
   which adds .ht-motion; without it (no script or reduced motion) every element is visible and still. */
@font-face{font-family:Poppins;src:url(assets/Poppins-ExtraLight.woff2) format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/Poppins-Light.woff2) format('woff2');font-weight:300;font-display:swap}

.ht{--ht-black:#06080a;--ht-ink:#0b0f13;--ht-panel:#11171d;--ht-line:rgba(178,178,178,.18);--ht-blue:#017ed7;--ht-sky:#74c7ff;--ht-silver:#b2b2b2;--ht-white:#f4f6f8;--ht-muted:rgba(244,246,248,.66);--ht-ease:cubic-bezier(.2,.75,.2,1);background:var(--ht-black);color:var(--ht-muted);overflow-x:clip}
.ht h1,.ht h2,.ht h3{color:var(--ht-white);letter-spacing:-.02em}
.ht h2{font-weight:300;font-size:clamp(36px,4.6vw,68px);line-height:1.04;margin:0 0 24px}
.ht h3{font-weight:600}
.ht p{line-height:1.75}
.ht a{color:var(--ht-sky)}
.ht .wrap{position:relative}
.ht-eyebrow{display:inline-flex;align-items:center;gap:14px;margin:0 0 22px;color:var(--ht-silver);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.ht .ht-eyebrow{font-size:11px;line-height:1.4}
.ht-eyebrow:before{content:"";width:40px;height:1px;background:linear-gradient(90deg,var(--ht-blue),var(--ht-sky))}
.ht-accent{background:linear-gradient(100deg,var(--ht-sky) 0%,var(--ht-blue) 45%,var(--ht-silver) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-section-head{max-width:820px;margin-bottom:64px}

/* Buttons */
.ht-button{position:relative;display:inline-flex;align-items:center;gap:22px;padding:19px 30px;border-radius:4px;background:var(--ht-blue);color:#fff!important;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 0 rgba(1,126,215,.5),0 18px 50px -18px rgba(1,126,215,.9);transition:box-shadow .4s var(--ht-ease),background .3s;will-change:transform}
.ht-button:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1px rgba(116,199,255,.6);opacity:0;transition:opacity .4s,transform .6s var(--ht-ease)}
.ht-button:hover{background:#0b8ef0;box-shadow:0 18px 40px -20px rgba(1,126,215,.9)}
.ht-button:hover:after{opacity:1;transform:scale(1.08)}
.ht-link{color:var(--ht-white)!important;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(116,199,255,.5)}

/* 1. Hero */
.ht-hero{position:relative;min-height:max(640px,min(calc(100svh - 128px),900px));display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#000;--dim:0}
.ht-hero-media{position:absolute;inset:-4%;z-index:-4}
.ht-hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%);filter:brightness(calc(.86 - var(--dim)*.55)) saturate(1.05);transform:scale(calc(1.06 + var(--dim)*.06))}
.ht-hero-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(6,8,10,.86) 0%,rgba(6,8,10,.62) 38%,rgba(6,8,10,.08) 72%),linear-gradient(180deg,rgba(6,8,10,.35) 0%,rgba(6,8,10,0) 30%,rgba(6,8,10,.7) 82%,var(--ht-black) 100%),radial-gradient(120% 90% at 85% 30%,transparent 30%,rgba(6,8,10,.75) 100%)}
.ht-beam{position:absolute;z-index:-2;top:-30%;left:58%;width:70vw;height:160%;background:conic-gradient(from 200deg at 50% 0%,transparent 0deg,rgba(116,199,255,.0) 8deg,rgba(116,199,255,.16) 16deg,rgba(255,255,255,.08) 20deg,rgba(116,199,255,.0) 30deg,transparent 40deg);transform-origin:50% 0;mix-blend-mode:screen;opacity:calc(.9 - var(--dim)*.6);pointer-events:none}
.ht-grain{position:absolute;inset:0;z-index:-1;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.ht-curtain{position:absolute;top:0;bottom:0;width:50.5%;z-index:3;background:linear-gradient(90deg,#030405,#0a0d10);display:none;pointer-events:none}
.ht-curtain-l{left:0}.ht-curtain-r{right:0;background:linear-gradient(270deg,#030405,#0a0d10)}
.ht-hero-inner{padding:88px 0 80px;max-width:1240px}
.ht-hero .breadcrumbs,.ht-hero .breadcrumbs a{color:rgba(244,246,248,.6)}
.ht-title{font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ht-sky)!important;margin:22px 0 18px}
.ht-display{margin:0 0 28px;font-size:clamp(54px,8.6vw,132px);line-height:.95;font-weight:200;letter-spacing:-.045em;color:var(--ht-white)}
.ht-line{display:block;overflow:hidden;line-height:1;padding-bottom:.1em;margin-bottom:-.06em}
.ht-line>span{display:block}
.ht-display em{font-style:normal;font-weight:600;background:linear-gradient(100deg,#fff 0%,var(--ht-sky) 40%,var(--ht-blue) 70%,var(--ht-silver) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-lead{max-width:560px;font-size:18px;color:rgba(244,246,248,.84);margin:0 0 34px}
.ht-actions{display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.ht-scroll{position:absolute;right:max(40px,calc((100vw - 1240px)/2));bottom:46px;display:flex;align-items:center;gap:14px;color:var(--ht-silver)!important;font-size:11px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;writing-mode:vertical-rl}
.ht-scroll-line{width:1px;height:70px;background:linear-gradient(var(--ht-sky),transparent);display:block}

/* 2. Marquee */
.ht-marquee{position:relative;border-top:1px solid var(--ht-line);border-bottom:1px solid var(--ht-line);background:var(--ht-black);overflow:hidden;padding:28px 0}
/* One style for every word; they brighten toward the center and fade at the edges (overlay fades, Safari-safe). */
.ht-marquee:before,.ht-marquee:after{content:"";position:absolute;top:0;bottom:0;width:38%;z-index:1;pointer-events:none}
.ht-marquee:before{left:0;background:linear-gradient(90deg,var(--ht-black) 8%,rgba(6,8,10,0))}
.ht-marquee:after{right:0;background:linear-gradient(270deg,var(--ht-black) 8%,rgba(6,8,10,0))}
.ht-marquee-track{display:flex;width:max-content}
.ht-marquee-row{display:flex;gap:0;margin:0;padding:0;list-style:none}
.ht-marquee-row li{display:flex;align-items:center;gap:48px;padding-right:48px;font-size:clamp(28px,3.4vw,52px);font-weight:200;letter-spacing:-.02em;color:var(--ht-white);white-space:nowrap}
/* A thin blue rule separates the words (Bradd: no dots unless they show a real status). */
.ht-marquee-row li:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--ht-blue),var(--ht-sky),transparent)}

/* 3. Statement */
.ht-statement{padding:170px 0 150px;background:radial-gradient(60% 80% at 15% 0%,rgba(1,126,215,.12),transparent 70%),var(--ht-black)}
.ht-statement-text{max-width:1120px;margin:0;font-size:clamp(30px,4.2vw,62px);line-height:1.18;font-weight:300;letter-spacing:-.025em;color:var(--ht-white)}
.ht-statement-text .w{transition:color .5s ease,opacity .5s ease}

/* 4. Experiences */
.ht-experiences{padding:140px 0;background:var(--ht-ink)}
.ht-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.ht-card{position:relative;border-radius:8px;overflow:hidden;background:var(--ht-panel);border:1px solid var(--ht-line);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ht-ease),border-color .4s,box-shadow .5s}
.ht-card:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(116,199,255,.16),transparent 60%);opacity:0;transition:opacity .4s}
.ht-card:hover{border-color:rgba(116,199,255,.45);box-shadow:0 40px 90px -40px rgba(1,126,215,.55)}
.ht-card:hover:before{opacity:1}
.ht-card-media{aspect-ratio:16/10;overflow:hidden}
.ht-card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ht-ease),filter .6s}
.ht-card:hover .ht-card-media img{transform:scale(1.08);filter:brightness(1.08)}
.ht-card-body{padding:30px 34px 38px}
.ht-card h3{font-size:clamp(24px,2vw,30px);font-weight:300;margin:0 0 12px}
.ht-card p{margin:0;font-size:16px}

/* 6. Rooms (horizontal tour) */
.ht-rooms{position:relative;background:var(--ht-black);padding:130px 0}
.ht-rooms-head{margin-bottom:56px}
.ht-rooms-track{display:flex;gap:28px;padding:0 max(40px,calc((100vw - 1240px)/2));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ht-rooms-track::-webkit-scrollbar{display:none}
.ht-room{position:relative;flex:0 0 min(68vw,760px);margin:0;border-radius:8px;overflow:hidden;scroll-snap-align:start;aspect-ratio:4/3;background:var(--ht-panel)}
.ht-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ht-ease)}
.ht-room:hover img{transform:scale(1.05)}
.ht-room:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,8,10,.92))}
.ht-room figcaption{position:absolute;z-index:1;left:34px;right:34px;bottom:30px;color:var(--ht-muted);font-size:15px;line-height:1.6}
.ht-room figcaption span{display:block;font-size:11px;letter-spacing:.3em;color:var(--ht-sky);margin-bottom:10px}
.ht-room figcaption strong{display:block;color:var(--ht-white);font-size:clamp(24px,2.4vw,34px);font-weight:300;margin-bottom:6px}

/* 7. Showroom */
.ht-showroom{position:relative;padding:190px 0;overflow:hidden;isolation:isolate;text-align:center}
.ht-showroom-media{position:absolute;inset:-12% 0;z-index:-2}
.ht-showroom-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(1.1)}
.ht-showroom:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 50%,rgba(1,126,215,.18),rgba(6,8,10,.85) 75%),linear-gradient(180deg,var(--ht-black),transparent 22%,transparent 78%,var(--ht-black))}
.ht-showroom-inner{max-width:820px;margin:0 auto}
.ht-showroom-inner p{font-size:18px;color:rgba(244,246,248,.8);margin:0 auto 40px;max-width:620px}
.ht-showroom .ht-eyebrow{justify-content:center}

/* 8. Process */
.ht-process{padding:150px 0;background:var(--ht-ink)}
.ht-process-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.ht-process-head{position:sticky;top:140px}
.ht-steps-wrap{position:relative;padding-left:44px}
.ht-steps-line{position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--ht-line);overflow:hidden}
.ht-steps-line:after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ht-sky),var(--ht-blue));transform-origin:top;transform:scaleY(var(--line,1))}
.ht-steps{list-style:none;margin:0;padding:0}
.ht-steps li{position:relative;padding:0 0 70px}
.ht-steps li:last-child{padding-bottom:0}
.ht-steps li:before{content:"";position:absolute;left:-44px;top:14px;width:22px;height:2px;background:linear-gradient(90deg,var(--ht-sky),var(--ht-blue))}
.ht-step-num{display:block;font-size:12px;letter-spacing:.3em;color:var(--ht-sky);margin-bottom:10px}
.ht-steps h3{font-size:clamp(26px,2.4vw,36px);font-weight:300;margin:0 0 10px}
.ht-steps p{margin:0;font-size:17px;max-width:520px}

/* 9. Stats */
.ht-stats{padding:110px 0;background:var(--ht-black);border-top:1px solid var(--ht-line);border-bottom:1px solid var(--ht-line)}
.ht-stats dl{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:0}
.ht-stats dl>div{border-left:1px solid var(--ht-line);padding-left:28px}
.ht-stats dt{font-size:clamp(44px,5vw,76px);font-weight:200;line-height:1;color:var(--ht-white);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ht-stats dd{margin:14px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ht-silver)}

/* 10. Reviews */
.ht-reviews{padding:140px 0 120px;background:radial-gradient(70% 60% at 85% 10%,rgba(1,126,215,.12),transparent 70%),var(--ht-ink);overflow:hidden}
/* Edge fades are overlays: a mask on this wide animated track blanks it in Safari (layer too large to mask). */
.ht-review-rail{position:relative;overflow:hidden;padding:12px 0}
.ht-review-rail:before,.ht-review-rail:after{content:"";position:absolute;top:0;bottom:0;width:8%;z-index:1;pointer-events:none}
.ht-review-rail:before{left:0;background:linear-gradient(90deg,var(--ht-ink),transparent)}
.ht-review-rail:after{right:0;background:linear-gradient(270deg,var(--ht-ink),transparent)}
.ht-review-track{display:flex;gap:24px;width:max-content}
.ht-reviews{--qw:440px}
.ht-quote{flex:0 0 var(--qw);width:var(--qw);margin:0;padding:34px 36px;border-radius:8px;background:var(--ht-panel);border:1px solid var(--ht-line)}
.ht-quote p{margin:0 0 22px;color:var(--ht-white);font-size:17px;font-weight:300;line-height:1.65}
.ht-quote p:before{content:"“";display:block;font-size:56px;line-height:.6;color:var(--ht-blue);margin-bottom:14px}
.ht-quote cite,.ht-quote .ht-cite{font-style:normal;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ht-sky)}
.ht-review-track>div.ht-quote{display:none}

/* FAQ, inquiry and related, restyled for the dark page */
.ht .cyber-faq{background:var(--ht-black);border-color:var(--ht-line);padding:140px 0}
.ht .cyber-faq .kicker{color:var(--ht-silver);letter-spacing:.3em}
.ht .cyber-faq h2{font-size:clamp(34px,3.6vw,52px)}
.ht .service-faq{border-color:var(--ht-line)}
.ht .service-faq summary{color:var(--ht-white);font-weight:300;font-size:clamp(19px,1.5vw,23px)}
.ht .service-faq p{color:var(--ht-muted)}
.ht .cyber-faq .contact-phone{color:var(--ht-sky)}
.ht .business-inquiry{background:linear-gradient(180deg,var(--ht-ink),#0a1621);border:0;padding:140px 0}
.ht .business-inquiry .kicker{color:var(--ht-sky)}
.ht .business-inquiry h2{font-size:clamp(38px,4.4vw,64px)}
.ht .business-inquiry .contact-phone{color:var(--ht-white);font-size:28px;font-weight:300}
.ht .gamma-form{background:rgba(255,255,255,.03);border:1px solid var(--ht-line);border-radius:8px;padding:30px}
.ht .gamma-form label,.ht .gamma-form .form-note{color:var(--ht-muted)}
.ht .gamma-form input,.ht .gamma-form select,.ht .gamma-form textarea{background:rgba(255,255,255,.06);border-color:var(--ht-line);color:var(--ht-white)}
.ht .gamma-form .button{background:var(--ht-blue);border-radius:4px}
.ht .business-related{background:var(--ht-black);border-top:1px solid var(--ht-line)}
.ht .business-related h2{font-size:24px;font-weight:300}
.ht .business-related-links>a{border-color:var(--ht-line)}
.ht .business-related-links h3{color:var(--ht-white);font-weight:300;transition:color .3s}
.ht .business-related-links>a:hover h3{color:var(--ht-sky)}

/* ===== Motion (only with .ht-motion, added by script when reduced motion is not requested) ===== */
.ht-motion .ht-curtain{display:block;transition:transform 1.6s cubic-bezier(.77,0,.18,1) .15s}
.ht-motion.is-open .ht-curtain-l{transform:translateX(-101%)}
.ht-motion.is-open .ht-curtain-r{transform:translateX(101%)}
.ht-motion .ht-hero-media img{animation:ht-drift 22s ease-in-out infinite alternate}
@keyframes ht-drift{from{transform:scale(calc(1.06 + var(--dim)*.06)) translateX(-1.2%)}to{transform:scale(calc(1.06 + var(--dim)*.06)) translateX(1.2%)}}
.ht-motion .ht-beam{animation:ht-sweep 9s ease-in-out infinite alternate}
@keyframes ht-sweep{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
.ht-motion .ht-line>span{transform:translateY(110%);transition:transform 1.3s var(--ht-ease)}
.ht-motion .ht-line+.ht-line>span{transition-delay:.15s}
.ht-motion.is-open .ht-line>span{transform:none}
.ht-motion .ht-hero .ht-title,.ht-motion .ht-lead,.ht-motion .ht-actions,.ht-motion .ht-hero .breadcrumbs,.ht-motion .ht-scroll{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s var(--ht-ease)}
.ht-motion.is-open .ht-hero .breadcrumbs{opacity:1;transform:none;transition-delay:1.1s}
.ht-motion.is-open .ht-hero .ht-title{opacity:1;transform:none;transition-delay:1.2s}
.ht-motion.is-open .ht-lead{opacity:1;transform:none;transition-delay:1.55s}
.ht-motion.is-open .ht-actions{opacity:1;transform:none;transition-delay:1.7s}
.ht-motion.is-open .ht-scroll{opacity:1;transform:none;transition-delay:2s}
.ht-motion .ht-display em{animation:ht-shine 6s ease-in-out infinite}
@keyframes ht-shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.ht-motion .ht-scroll-line{animation:ht-drip 2.2s ease-in-out infinite}
@keyframes ht-drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ht-motion .ht-marquee-track{animation:ht-marquee 46s linear infinite}
.ht-motion .ht-marquee:hover .ht-marquee-track{animation-play-state:paused}
@keyframes ht-marquee{to{transform:translateX(-50%)}}
.ht-motion .ht-statement-text .w{color:rgba(244,246,248,.16)}
.ht-motion .ht-statement-text .w.on{color:var(--ht-white)}
.ht-motion [data-ht-reveal]{opacity:0;transform:translateY(46px);transition:opacity 1.1s ease var(--d,0ms),transform 1.1s var(--ht-ease) var(--d,0ms)}
.ht-motion [data-ht-reveal].is-in{opacity:1;transform:none}
.ht-motion .ht-card[data-ht-reveal].is-in{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ht-motion .ht-showroom-media{transform:translateY(var(--py,0px))}
.ht-motion .ht-steps-line:after{transform:scaleY(var(--line,0))}
.ht-motion .ht-review-track{width:calc(var(--n) * (var(--qw) + 24px) - 24px);animation:ht-rail 70s linear infinite}
.ht-motion .ht-review-rail.is-reverse .ht-review-track{animation-direction:reverse;animation-duration:80s}
.ht-motion .ht-review-rail:hover .ht-review-track,.ht-motion .ht-review-rail:focus-within .ht-review-track{animation-play-state:paused}
.ht-motion .ht-review-track>div.ht-quote{display:block}
@keyframes ht-rail{to{transform:translateX(calc(-50% - 12px))}}
/* Pinned horizontal tour on large screens. */
@media(min-width:901px){
  .ht-motion .ht-rooms.is-pinned{padding:0;height:var(--pin-h,300vh)}
  .ht-motion .ht-rooms.is-pinned .ht-rooms-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .ht-motion .ht-rooms.is-pinned .ht-rooms-track{overflow:visible;scroll-snap-type:none;transform:translate3d(var(--tx,0px),0,0);will-change:transform}
  .ht-motion .ht-rooms.is-pinned .ht-room{flex-basis:min(58vw,820px);aspect-ratio:16/10}
}

@media(max-width:900px){
  .ht-hero-inner{padding:110px 0 110px}
  .ht-scroll{display:none}
  .ht-cards,.ht-process-grid{grid-template-columns:1fr}
  .ht-process-grid{gap:50px}
  .ht-process-head{position:static}
  .ht-stats dl{grid-template-columns:repeat(3,1fr)}
  .ht-experiences,.ht-process,.ht-reviews,.ht .cyber-faq,.ht .business-inquiry{padding:96px 0}
  .ht-statement{padding:110px 0 100px}
  .ht-room{flex-basis:82vw}
  .ht-reviews{--qw:320px}
}
@media(max-width:650px){
  .ht-display{font-size:clamp(56px,17vw,84px)}
  .ht-lead{font-size:16px}
  .ht-card-body{padding:26px 24px 30px}
  .ht-stats dl{grid-template-columns:1fr;gap:34px}
  .ht-showroom{padding:130px 0}
}

/* ===== Shared parts added for the full residential template ===== */
.ht-split{padding:130px 0;background:var(--ht-black)}
.ht-split:nth-of-type(even){background:var(--ht-ink)}
.ht-split-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}
.ht-split.is-reverse .ht-split-media{order:2}
.ht-split-media{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:5/4;background:var(--ht-panel);box-shadow:0 50px 100px -50px rgba(1,126,215,.45)}
.ht-split-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ht-ease)}
.ht-split-media:hover img{transform:scale(1.04)}
.ht-split-copy p{font-size:17px}
.ht-split-copy h2{font-size:clamp(34px,3.8vw,56px)}

.ht-tiles{padding:130px 0;background:var(--ht-ink)}
.ht-tile-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ht-tile-grid li{position:relative;padding:28px 30px 28px 64px;border-radius:8px;border:1px solid var(--ht-line);background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));color:var(--ht-white);font-size:17px;font-weight:300;line-height:1.5;overflow:hidden;transition:border-color .4s,transform .5s var(--ht-ease)}
.ht-tile-grid li:before{content:"";position:absolute;left:30px;top:38px;width:20px;height:2px;background:linear-gradient(90deg,var(--ht-sky),var(--ht-blue))}
.ht-tile-grid li:hover{border-color:rgba(116,199,255,.45);transform:translateY(-4px)}

.ht-options{padding:130px 0;background:var(--ht-ink)}
.ht-options-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ht-options-body p{margin:0;font-size:16px}
.ht-options-body p:first-child,.ht-options-body p:last-child{grid-column:1/-1;max-width:820px;font-size:17px}
.ht-options-body p:not(:first-child):not(:last-child){padding:34px;border-radius:8px;border:1px solid var(--ht-line);background:var(--ht-panel)}
.ht-options-body strong{display:block;color:var(--ht-white);font-weight:300;font-size:24px;line-height:1.25;margin-bottom:12px}

.ht-guides{padding:110px 0;background:var(--ht-black)}
.ht-guide-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ht-guide-links a{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:34px;border-radius:8px;border:1px solid var(--ht-line);background:var(--ht-panel);text-decoration:none;transition:border-color .4s,transform .5s var(--ht-ease)}
.ht-guide-links a span:first-child{grid-column:1/-1;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ht-sky)}
.ht-guide-links a strong{color:var(--ht-white);font-weight:300;font-size:22px;line-height:1.35}
.ht-guide-links a span:last-child{color:var(--ht-sky);font-size:22px;align-self:end}
.ht-guide-links a:hover{border-color:rgba(116,199,255,.5);transform:translateY(-4px)}

/* Panels and controls shared by the demonstrations */
.ht-scenes-buttons{display:flex;flex-wrap:wrap;gap:10px}
.ht-scene-btn,.ht-fp-zone{padding:12px 20px;border-radius:4px;border:1px solid var(--ht-line);background:rgba(255,255,255,.03);color:var(--ht-white);font:500 14px Poppins,system-ui,sans-serif;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.ht-scene-btn:hover,.ht-fp-zone:hover{border-color:rgba(116,199,255,.55)}
.ht-scene-btn[aria-pressed="true"],.ht-fp-zone[aria-pressed="true"]{background:var(--ht-blue);border-color:var(--ht-blue);color:#fff;box-shadow:0 12px 30px -12px rgba(1,126,215,.9)}
.ht-scene-btn:focus-visible,.ht-fp-zone:focus-visible,.ht-fp-group:focus-visible{outline:2px solid var(--ht-sky);outline-offset:3px}
.ht-scenes-label{margin:0 0 14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ht-silver)}
.ht-scenes-status{margin:28px 0 0;display:grid;gap:0}
.ht-scenes-status>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--ht-line)}
.ht-scenes-status dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ht-silver);padding-top:3px}
.ht-scenes-status dd{margin:0;color:var(--ht-white);font-weight:300;font-size:17px;transition:color .4s}
.ht-scenes-status dd.is-changed{color:var(--ht-sky)}
.ht-scenes-note{margin:24px 0 0;font-size:15px}

/* Whole-home audio floor plan */
.ht-floorplan{padding:140px 0;background:radial-gradient(70% 60% at 80% 40%,rgba(1,126,215,.14),transparent 70%),var(--ht-black);overflow:hidden}
.ht-fp-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.ht-fp-copy p{font-size:17px}
.ht-fp-panel{margin-top:30px;padding:26px;border-radius:8px;border:1px solid var(--ht-line);background:var(--ht-panel)}
.ht-fp-now{margin:0 0 18px;color:var(--ht-white);font-weight:300;font-size:17px;min-height:1.6em}
.ht-fp-zones{display:flex;flex-wrap:wrap;gap:8px}
.ht-fp-zone{padding:9px 15px;font-size:13px}
.ht-fp-group{margin-top:18px;display:inline-flex;gap:16px;align-items:center;padding:13px 22px;border-radius:4px;border:1px solid rgba(116,199,255,.5);background:transparent;color:var(--ht-sky);font:600 13px Poppins,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
.ht-fp-group[aria-pressed="true"],.ht-fp-group:hover{background:var(--ht-blue);color:#fff;border-color:var(--ht-blue)}
.ht-fp-stage,.ht-security-stage{perspective:1600px;position:relative}
.ht-fp-tilt{transform:rotateX(50deg) rotateZ(-24deg) scale(.96);transform-style:preserve-3d;transition:transform 1.6s var(--ht-ease)}
.ht-fp-svg,.ht-sec-svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 50px 60px rgba(0,0,0,.6))}
.fp-floor{fill:#10161c;stroke:none;transition:fill .8s}
.fp-room.is-playing .fp-floor{fill:#0f2233}
.fp-room.is-b .fp-floor{fill:#1a1f25}
.fp-label{fill:rgba(244,246,248,.55);font:500 15px Poppins,system-ui,sans-serif;letter-spacing:.06em}
.fp-room.is-playing .fp-label{fill:var(--ht-sky)}
.fp-furn rect,.fp-furn circle{fill:#1b232b;stroke:rgba(178,178,178,.18);stroke-width:1.5}
.fp-furn .fp-pool{fill:rgba(1,126,215,.22);stroke:rgba(116,199,255,.45)}
.fp-walls-top{fill:none;stroke:rgba(244,246,248,.9);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;transform:translate(-5px,-11px)}
.fp-walls-side{fill:none;stroke:rgba(178,178,178,.35);stroke-width:12;stroke-linejoin:round;transform:translate(-2.5px,-5.5px)}
.fp-walls{fill:none;stroke:#c7cdd2;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(-3px -5px 0 rgba(255,255,255,.12))}
.fp-spk-body{fill:#1f2a33;stroke:var(--ht-silver);stroke-width:2}
.fp-spk-grille{fill:none;stroke:rgba(178,178,178,.7);stroke-width:1.6;stroke-linecap:round}
.fp-spk.is-on .fp-spk-body{stroke:var(--ht-sky);fill:#123049}
.fp-spk.is-b.is-on .fp-spk-body{stroke:#d9dee2}
.fp-wave{fill:none;stroke:var(--ht-sky);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.fp-spk.is-b .fp-wave{stroke:#e4e8eb}
.ht-fp-legend{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin:6px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ht-silver)}

/* The Invisible Theater */
.ht-theater{padding:140px 0;background:linear-gradient(180deg,var(--ht-black),#04070a);overflow:hidden}
.ht-theater-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.ht-theater-copy p{font-size:17px}
.ht-theater-facts{list-style:none;margin:26px 0 34px;padding:0}
.ht-theater-facts li{padding:12px 0;border-top:1px solid var(--ht-line);color:var(--ht-white);font-size:17px;font-weight:300}
.ht-theater-photo{margin:0;border-radius:8px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(1,126,215,.5)}
.ht-theater-photo img{display:block;width:100%;height:auto}

/* Smart home scenes, lighting dimmer and shades: a photo stage beside a control panel */
.ht-scenes,.ht-dimmer,.ht-shade,.ht-security{padding:140px 0;background:radial-gradient(70% 60% at 20% 30%,rgba(1,126,215,.12),transparent 70%),var(--ht-black)}
.ht-scenes-grid,.ht-dimmer-grid,.ht-shade-grid,.ht-security-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
.ht-scenes-stage,.ht-dimmer-stage,.ht-shade-stage{position:relative;margin:0;border-radius:8px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(1,126,215,.5)}
.ht-scenes-stage img,.ht-dimmer-stage img,.ht-shade-stage img{display:block;width:100%;height:auto}
.dm-dark,.dm-warm,.dm-cool{position:absolute;inset:0;pointer-events:none;transition:opacity 1.1s ease}
.dm-dark{background:#05080b;opacity:0}
.dm-warm{background:radial-gradient(80% 80% at 40% 40%,rgba(255,170,90,.55),rgba(255,140,60,.25));mix-blend-mode:soft-light;opacity:0}
.dm-cool{background:rgba(160,200,255,.35);mix-blend-mode:soft-light;opacity:0}
/* Scenes: each scene is its own photograph of the room, crossfaded over the Entertain photo. */
.ht-scenes-stage .sc-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s ease;pointer-events:none}
.ht-scenes[data-scene="morning"] .sc-layer[data-sc-img="morning"],.ht-scenes[data-scene="movie"] .sc-layer[data-sc-img="movie"],.ht-scenes[data-scene="goodnight"] .sc-layer[data-sc-img="goodnight"]{opacity:1}
.sc-caption,.dm-caption,.sh-caption{position:absolute;left:18px;top:18px;padding:8px 16px;border-radius:4px;background:rgba(6,8,10,.72);color:#fff;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ht-scenes-panel,.ht-dimmer-panel,.ht-shade-panel,.ht-security-panel{padding:30px;border-radius:8px;border:1px solid var(--ht-line);background:var(--ht-panel)}
.ht-shade-panel p{margin:22px 0 0;font-size:16px}
.dm-control{display:block;margin-top:26px}
.dm-control span{display:flex;justify-content:space-between;margin-bottom:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ht-silver)}
.dm-control output{color:var(--ht-white);letter-spacing:.06em}
.dm-control input{width:100%;accent-color:var(--ht-blue)}
.dm-control input[data-dm-kelvin]{accent-color:#f0a85a}

/* Shades */
/* Shades: the closed-shade photo is revealed inside each pane from the head down (--lvl 0 to 1). Window glass spans 6.25% to 67.4% of the photo height. */
.ht-shade-stage .sh-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;--lvl:0;clip-path:inset(6.25% var(--r) calc(93.75% - 61.15% * var(--lvl)) var(--l));transition:clip-path 2.6s cubic-bezier(.35,.08,.45,.95) calc(var(--i) * 110ms)}
.ht-shade-stage .sh-front{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sh-hem{position:absolute;left:var(--l);right:var(--r);top:calc(6.25% + 61.15% * var(--lvl,0));height:5px;margin-top:-4px;background:linear-gradient(180deg,#4a4d50,#1d1f21);box-shadow:0 3px 6px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:top 2.6s cubic-bezier(.35,.08,.45,.95) calc(var(--i) * 110ms),opacity .4s}
.sh-hem.is-moving{opacity:1}
.ht-shade-stage.is-scrub .sh-layer,.ht-shade-stage.is-scrub .sh-hem{transition-duration:.45s,.4s;transition-delay:0s}

/* Security site plan */
.ht-security-grid{grid-template-columns:1.25fr .75fr}
.sec-lot{fill:#0d1318;stroke:rgba(178,178,178,.16);stroke-width:2}
.sec-pool{fill:rgba(1,126,215,.22);stroke:rgba(116,199,255,.45);stroke-width:2}
.sec-drive{fill:#151c22;stroke:rgba(178,178,178,.12)}
.sec-house{fill:#1a232b;stroke:#c7cdd2;stroke-width:6;stroke-linejoin:round;filter:drop-shadow(-3px -5px 0 rgba(255,255,255,.1))}
.sec-label{fill:rgba(244,246,248,.5);font:500 15px Poppins,system-ui,sans-serif;letter-spacing:.06em}
.sec-cone{fill:rgba(116,199,255,.14);stroke:rgba(116,199,255,.35);stroke-width:1.2;transition:opacity .8s,fill .8s}
.sec-cam-body{fill:#e9edf0;stroke:var(--ht-sky);stroke-width:2}
.ht-security[data-mode="home"] .sec-cam:not([data-cam="drive"]):not([data-cam="entry"]) .sec-cone{opacity:.3}
.ht-security[data-mode="night"] .sec-cone{fill:rgba(116,199,255,.2)}
.sec-path{fill:none;stroke:var(--ht-sky);stroke-width:3;stroke-dasharray:6 10;opacity:0}
.sec-alert{margin-top:22px;padding:18px 20px;border-radius:8px;border:1px solid rgba(116,199,255,.45);background:rgba(1,126,215,.12);display:grid;gap:4px;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.sec-alert strong{color:var(--ht-white);font-weight:600}
.sec-alert span{font-size:14px}
.ht-security.is-alert .sec-alert{opacity:1;transform:none}
.ht-security.is-alert .sec-path{opacity:1}

/* Smart glass inside the dark template */
.ht .sg{background:var(--ht-ink);border-top:1px solid var(--ht-line);padding:140px 0}
.ht .sg h2{font-weight:300;font-size:clamp(34px,3.8vw,56px)}
.ht .sg-copy p,.ht .sg-how p{color:var(--ht-muted)}
.ht .sg-uses li{background:rgba(255,255,255,.04);border-color:var(--ht-line);color:var(--ht-white);font-weight:400}
.ht .sg-how{border-color:var(--ht-line)}
.ht .sg-crystals{background:linear-gradient(135deg,#121a21,#0d1318);border-color:var(--ht-line)}
.ht .sg-crystals span{background:var(--ht-sky)}
.ht .sg-scene{box-shadow:0 50px 100px -50px rgba(1,126,215,.5)}

/* ===== Motion for the demonstrations ===== */
.ht-motion .fp-spk.is-on .fp-wave{animation:ht-wave 2.4s ease-out infinite}
.ht-motion .fp-spk.is-on .fp-wave.w2{animation-delay:.8s}
.ht-motion .fp-spk.is-on .fp-wave.w3{animation-delay:1.6s}
@keyframes ht-wave{0%{opacity:.85;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}
.ht-motion .ht-security.is-alert .sec-path{animation:sec-walk 1.2s linear infinite}
@keyframes sec-walk{to{stroke-dashoffset:-32}}
.ht-motion .ht-fp-stage:hover .ht-fp-tilt{transform:rotateX(44deg) rotateZ(-20deg) scale(.98)}

@media(max-width:900px){
  .ht-split-grid,.ht-fp-grid,.ht-theater-grid,.ht-scenes-grid,.ht-dimmer-grid,.ht-shade-grid,.ht-security-grid{grid-template-columns:1fr;gap:44px}
  .ht-split.is-reverse .ht-split-media{order:0}
  .ht-tile-grid,.ht-options-body,.ht-guide-links{grid-template-columns:1fr}
  .ht-split,.ht-tiles,.ht-options,.ht-floorplan,.ht-theater,.ht-scenes,.ht-dimmer,.ht-shade,.ht-security,.ht .sg{padding:96px 0}
  .ht-fp-tilt{transform:rotateX(38deg) rotateZ(-14deg) scale(1)}
}
@media(max-width:650px){
  .ht-scenes-status>div{grid-template-columns:96px 1fr}
  .ht-scenes-panel,.ht-dimmer-panel,.ht-shade-panel,.ht-security-panel{padding:22px}
}

/* Phone review (Bradd, Oct 2): tighter section rhythm, labels that stay on one line, compact integration tiles. */
@media(max-width:650px){
  .ht .ht-eyebrow{letter-spacing:.2em;gap:10px;font-size:10px}
  .ht-statement{padding:76px 0 64px}
  .ht-split,.ht-tiles,.ht-options,.ht-floorplan,.ht-theater,.ht-scenes,.ht-dimmer,.ht-shade,.ht-security,.ht .sg,.ht-experiences,.ht-process,.ht-reviews,.ht .cyber-faq,.ht .business-inquiry{padding:72px 0}
  .ht-showroom{padding:96px 0}
  .ht-tile-grid{gap:10px}
  .ht-tile-grid li{padding:18px 18px 18px 46px;font-size:15px}
  .ht-tile-grid li:before{left:18px;top:28px;width:16px}
  #integrate .ht-tile-grid{grid-template-columns:1fr 1fr}
}