:root{ --paper:#FBFAF8; --sand:#F4EEE9; --ink:#1B1D24; --inksoft:#5A5D68;
  --navy:#22252F; --navy2:#171A22; --navysoft:#33373F; --pink:#E4278F; --pink2:#F06CB0; --pinkdeep:#C21C78; --pinksoft:#FCE3F1; }
*{}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:Figtree,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:Poppins,sans-serif;font-weight:800;line-height:1.03;letter-spacing:-.02em}
.u-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}
.tagline{font-family:Poppins;font-style:italic;font-weight:700}
.wordmark{font-family:Poppins;font-weight:800;letter-spacing:-.03em;line-height:1}
.wordmark .p{font-weight:600;color:var(--pink2)}

/* ---------- decorative pink line-art window motif (brand echo) ---------- */
/* subtle watermark of the REAL Windows Plus brand icon (window + open door) */
.winmotif{position:relative}
.winmotif::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:0;
  background-image:url("wp-icon.webp");
  background-size:150px 150px;background-repeat:repeat;background-position:26px 18px}
.winmotif>*{position:relative;z-index:1}

.grille-rule{height:14px;display:flex;align-items:center;gap:0;color:currentColor}
.grille-rule::before,.grille-rule::after{content:"";height:2px;background:currentColor;flex:1;opacity:.3}
.grille-rule span{width:44px;height:14px;position:relative;flex:none;opacity:.6}
.grille-rule span::before{content:"";position:absolute;inset:0;border:2px solid currentColor;border-radius:1px}
.grille-rule span::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:currentColor;transform:translateX(-50%)}

.frame-card{position:relative;background:#fff;border:1px solid #eadfe6;border-radius:14px;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.frame-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -30px rgba(196,28,120,.45);border-color:#f4c7e0}

/* window-frame image wrapper (clean vinyl frame) */
.win{position:relative;background:linear-gradient(180deg,#ffffff,#eef0f2);padding:10px;border-radius:12px;
  box-shadow:0 30px 60px -34px rgba(20,22,31,.6),inset 0 0 0 1px #e6e8ec}
.win-glass{position:relative;overflow:hidden;border-radius:6px}
.win-glass img{display:block;width:100%;height:100%;object-fit:cover}
.win-glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.28),rgba(255,255,255,0) 32%)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;border-radius:10px;transition:transform .16s,background .18s,box-shadow .18s;will-change:transform}
.btn:active{transform:translateY(1px)}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 12px 26px -12px rgba(228,39,143,.9)}
.btn-pink:hover{background:var(--pinkdeep)}
.btn-dark{background:var(--navy2);color:#fff}
.btn-dark:hover{background:#0c0e15}
.btn-ghost{border:1.6px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

.link-underline{background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s}
.link-underline:hover{background-size:100% 2px}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;padding:.35rem .7rem;border-radius:999px}

/* ---------- NAV (white, matches brand) ---------- */
.site-nav{background:#fff;transition:box-shadow .3s,background .3s}
.site-nav.nav-scrolled{box-shadow:0 10px 30px -18px rgba(20,22,31,.35)}

/* =====================================================================
   HERO - a real white casement window that SWINGS OPEN to reveal the site
   Two grilled sashes hinged at the outer edges rotate outward in 3D, then
   the whole window fades to the crisp Georgetown home + financing card.
   ===================================================================== */
.hero{position:relative;height:100svh;min-height:660px;max-height:960px;background:#e9edf1;overflow:hidden}
/* the home behind the glass starts BLURRED (frosted view), then sharpens as the window opens */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);filter:blur(12px) brightness(.97);transition:transform 11s ease-out,filter 1.5s ease .1s;will-change:transform,filter}
.hero.is-open .hero-photo{transform:scale(1);filter:blur(0) brightness(1)}
/* scrim only appears once the window is open, so the closed glass stays bright */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1s ease .55s;
  background:linear-gradient(90deg,rgba(8,10,15,.72),rgba(8,10,15,.3) 46%,rgba(8,10,15,.1) 70%),linear-gradient(180deg,rgba(8,10,15,.28),rgba(8,10,15,0) 30%,rgba(8,10,15,.58))}
.hero.is-open .hero-scrim{opacity:1}

/* the casement window: 3D stage + two hinged sashes ------------------ */
.winhero{position:absolute;inset:0;z-index:3;pointer-events:none;perspective:2100px;perspective-origin:50% 46%;
  transition:opacity .9s ease .3s}
.hero.frame-gone .winhero{opacity:0}
.casements{position:absolute;inset:0;transform-style:preserve-3d}
/* fine photographic grain over the window so it reads as a real photo, not a flat render */
.winhero::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.csash{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;
  transition:transform 2.1s cubic-bezier(.58,.02,.24,1);will-change:transform;background:transparent;border-radius:5px;
  box-shadow:
    inset 0 0 0 7px #f7f8fa,
    inset 0 0 0 8px rgba(120,132,146,.32),
    inset 0 0 0 15px #fcfdfe,
    inset 0 0 0 16px rgba(84,98,114,.58),
    inset 7px 7px 13px rgba(255,255,255,.9),
    inset -7px -8px 15px rgba(40,52,66,.2),
    inset 0 0 22px rgba(40,52,66,.12),
    0 0 0 1px rgba(70,82,96,.34)}
.csash.left{left:0;transform-origin:left center}
.csash.right{right:0;transform-origin:right center}
.hero.is-open .csash.left{transform:rotateY(-104deg)}
.hero.is-open .csash.right{transform:rotateY(104deg)}
/* translucent frosted glass - you SEE the blurred home through it, with a glassy sheen on top */
.csash .glass{position:absolute;inset:16px;overflow:hidden;border-radius:3px;
  background:linear-gradient(152deg,rgba(220,234,246,.05),rgba(190,212,230,.03) 42%,rgba(218,234,246,.05));
  box-shadow:inset 0 0 26px rgba(70,88,108,.24),inset 0 2px 5px rgba(40,56,74,.16)}
/* real glass reflection: a soft sky glow + a diagonal specular sweep */
.csash .glass::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(119deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 13%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 62%,rgba(255,255,255,.16) 85%,rgba(255,255,255,.38) 100%),
    radial-gradient(150% 78% at 22% 6%,rgba(216,231,244,.42),transparent 54%),
    linear-gradient(180deg,rgba(198,216,232,.14),transparent 22%,transparent 82%,rgba(70,88,108,.14))}
/* a faint frosted veil that clears as the pane opens, so the glass "de-frosts" on its way out */
.csash .glass::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(152deg,rgba(230,240,249,.07),rgba(205,223,238,.05));transition:opacity 1.6s ease}
.hero.is-open .csash .glass::before{opacity:0}
/* colonial grille: 1 vertical + 2 horizontal muntins per sash (2x3 lites) */
.csash .grille{position:absolute;inset:16px;pointer-events:none;z-index:3}
/* muntins with a domed (rounded) cross-section: dark edge -> bright crown -> dark edge */
.csash .grille .mv{position:absolute;top:0;bottom:0;left:50%;width:15px;transform:translateX(-50%);border-radius:3px;
  background:linear-gradient(90deg,#c6d0da 0%,#e9eef3 28%,#fdfefe 50%,#e9eef3 72%,#c1ccd6 100%);
  box-shadow:0 1px 2px rgba(20,30,42,.4),0 4px 9px rgba(18,28,40,.3),0 9px 15px rgba(18,28,40,.14)}
.csash .grille .mh{position:absolute;left:0;right:0;height:15px;transform:translateY(-50%);border-radius:3px;
  background:linear-gradient(180deg,#c6d0da 0%,#e9eef3 24%,#fdfefe 46%,#e6ebf1 72%,#c1ccd6 100%);
  box-shadow:0 1px 2px rgba(20,30,42,.34),0 5px 10px rgba(18,28,40,.28),0 10px 16px rgba(18,28,40,.13)}
/* casement lock lever on the inner (meeting) stile */
.csash .handle{position:absolute;top:50%;width:13px;height:58px;transform:translateY(-50%);border-radius:4px;z-index:4;
  background:linear-gradient(180deg,#f2f4f7,#bcc4cd);box-shadow:0 3px 7px rgba(0,0,0,.34),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(90,100,112,.5)}
.csash.left .handle{right:9px}
.csash.right .handle{left:9px}
/* specular reflection sweep across the closed glass on entry */
.glint{position:absolute;top:-25%;left:-50%;width:60%;height:160%;z-index:5;pointer-events:none;
  background:linear-gradient(115deg,transparent 33%,rgba(255,255,255,.6) 48%,rgba(255,255,255,.06) 60%,transparent 67%);
  transform:skewX(-12deg);animation:glint 2.6s ease-in-out .15s 1 both}
@keyframes glint{0%{left:-50%;opacity:0}14%{opacity:1}58%{left:120%;opacity:.5}100%{left:132%;opacity:0}}

/* outer window frame (the wall opening): clean white jambs, head, sill */
.wincasing{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .9s ease .3s}
.hero.frame-gone .wincasing{opacity:0}
.wincasing i{position:absolute;background:linear-gradient(180deg,#ffffff,#e6eaee)}
.wincasing .l{left:0;top:0;bottom:0;width:2.4vw;min-width:26px;box-shadow:inset -6px 0 11px rgba(35,45,58,.16),6px 0 18px rgba(0,0,0,.14)}
.wincasing .r{right:0;top:0;bottom:0;width:2.4vw;min-width:26px;box-shadow:inset 6px 0 11px rgba(35,45,58,.16),-6px 0 18px rgba(0,0,0,.14)}
.wincasing .t{left:0;right:0;top:0;height:2.4vw;min-height:26px;box-shadow:inset 0 -6px 11px rgba(35,45,58,.16),0 6px 18px rgba(0,0,0,.14)}
.wincasing .b{left:0;right:0;bottom:0;height:4.2vw;min-height:46px;background:linear-gradient(180deg,#eef1f4,#ffffff 22%,#e3e8ed);box-shadow:0 -7px 20px rgba(25,32,42,.18),inset 0 6px 0 #fff,inset 0 -2px 7px rgba(60,70,82,.22)}

/* hero content: headline (left) + financing card (right) - floats above the glass */
.hero-inner{position:relative;z-index:7;max-width:1560px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem);height:100%;display:grid;grid-template-columns:1fr;align-content:center;gap:2rem}
@media(min-width:1024px){.hero-inner{grid-template-columns:1.05fr .95fr;align-items:center}}
@media(max-width:1023px){
  .hero{height:auto;min-height:100svh;max-height:none}
  .hero-inner{min-height:100svh;padding-block:2.25rem 3rem;gap:1.4rem}
  .lead-card{transition-delay:.5s}
}
.hero-copy>*{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.hero.is-open .hero-copy .eye{opacity:1;transform:none;transition-delay:.55s}
.hero.is-open .hero-copy .l1{opacity:1;transform:none;transition-delay:.7s}
.hero.is-open .hero-copy .l2{opacity:1;transform:none;transition-delay:.9s}
.hero.is-open .hero-copy .rt{opacity:1;transform:none;transition-delay:1.05s}
/* financing card is front-and-centre: it settles in fast, then the glass clears behind it */
.lead-card{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:.35s;
  background:rgba(20,23,31,.74);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 44px 100px -40px rgba(0,0,0,.85)}
.hero.is-open .lead-card{opacity:1;transform:none}
.skip-hint{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:1rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#ffffffcc;transition:opacity .5s;display:flex;align-items:center;gap:.5rem}
.hero.frame-gone .skip-hint,.hero.is-open .skip-hint{opacity:0}
.skip-hint .dot{width:6px;height:6px;border-radius:99px;background:var(--pink);animation:bob 1.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* replay-intro control - appears once the window has opened, re-plays the reveal */
.replay-intro{position:fixed;z-index:44;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(18,21,29,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.55rem .9rem;cursor:pointer;opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease,background .2s;pointer-events:none;box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.replay-intro.show{opacity:1;transform:none;pointer-events:auto}
.replay-intro:hover{background:rgba(18,21,29,.85)}
.replay-intro svg{width:14px;height:14px}
@media(max-width:768px){.replay-intro{display:none}}

/* countdown - solid magenta pill with translucent digit chips (matches live site) */
.count-pill{display:flex;justify-content:center;gap:.55rem;background:linear-gradient(180deg,var(--pink),var(--pinkdeep));border-radius:14px;padding:.7rem .85rem;box-shadow:0 14px 30px -14px rgba(228,39,143,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.count-pill span{background:rgba(255,255,255,.18);border-radius:10px;padding:.35rem .55rem;min-width:3.1rem;text-align:center}
.count-pill b{display:block;font-family:Poppins;font-weight:800;font-size:1.3rem;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.count-pill small{display:block;font-size:.5rem;letter-spacing:.14em;color:rgba(255,255,255,.85);font-weight:700;margin-top:.15rem}
/* consent checkbox row */
.consent{display:flex;gap:.55rem;align-items:flex-start;color:rgba(255,255,255,.55);font-size:.66rem;line-height:1.45;cursor:pointer}
.consent input{margin-top:.15rem;accent-color:var(--pink);width:14px;height:14px;flex:none}

/* page hero band (subpages) */
.page-hero{position:relative;background:var(--navy2);color:#fff;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;opacity:.6;background:radial-gradient(120% 80% at 85% -10%,rgba(228,39,143,.35),transparent 60%)}
/* footer social icons */
.social-row{display:flex;flex-wrap:wrap;gap:.6rem}
.soc{width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;color:#fff;border:none;background:var(--pink);transition:background .2s,transform .2s;box-shadow:0 8px 18px -10px rgba(228,39,143,.7)}
.soc:hover{background:var(--pinkdeep);transform:translateY(-2px)}
.soc svg{width:18px;height:18px;fill:#fff}

/* page-hero backdrop: a sparse WINDOW-PANE motif (not a tile grid) */
.page-hero .grid-motif{position:absolute;inset:0;opacity:.1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='66' y='50' width='78' height='108' rx='3'/%3E%3Cline x1='105' y1='50' x2='105' y2='158'/%3E%3Cline x1='66' y1='104' x2='144' y2='104'/%3E%3C/g%3E%3C/svg%3E");
  background-size:155px 155px;background-repeat:repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 62%);mask-image:linear-gradient(90deg,transparent,#000 62%)}

/* per-service line motifs (windows / doors / shower / siding) - subtle brand watermark */
.motif{position:relative}
.motif::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;z-index:0;background-repeat:repeat;background-position:26px 22px}
.motif>*{position:relative;z-index:1}
.motif-windows::before{background-size:185px 185px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%23E4278F' stroke-width='2'%3E%3Crect x='66' y='50' width='78' height='108' rx='3'/%3E%3Cline x1='105' y1='50' x2='105' y2='158'/%3E%3Cline x1='66' y1='104' x2='144' y2='104'/%3E%3C/g%3E%3C/svg%3E")}
.motif-doors::before{background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23E4278F' stroke-width='2'%3E%3Crect x='74' y='44' width='56' height='116' rx='3'/%3E%3Cline x1='74' y1='150' x2='130' y2='150'/%3E%3Ccircle cx='121' cy='104' r='2.6' fill='%23E4278F' stroke='none'/%3E%3C/g%3E%3C/svg%3E")}
.motif-bath::before{background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23E4278F' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='100' y1='44' x2='100' y2='58'/%3E%3Cpath d='M76 60 q24 -12 48 0'/%3E%3Cline x1='84' y1='68' x2='84' y2='90'/%3E%3Cline x1='94' y1='70' x2='94' y2='94'/%3E%3Cline x1='104' y1='70' x2='104' y2='94'/%3E%3Cline x1='114' y1='68' x2='114' y2='90'/%3E%3C/g%3E%3C/svg%3E")}
.motif-siding::before{background-size:200px 200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%23E4278F' stroke-width='2'%3E%3Cpath d='M64 92 L105 58 L146 92'/%3E%3Crect x='74' y='92' width='62' height='58'/%3E%3Cline x1='74' y1='110' x2='136' y2='110'/%3E%3Cline x1='74' y1='128' x2='136' y2='128'/%3E%3C/g%3E%3C/svg%3E")}

/* reveal system: visible by default (progressive enhancement) */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* clarity slider */
.clarity{position:relative;overflow:hidden;border-radius:6px;user-select:none;touch-action:none}
.clarity img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.clarity .before{position:absolute;inset:0;filter:blur(3px) brightness(.8) saturate(.6) contrast(.95);clip-path:inset(0 0 0 var(--x,50%))}
.clarity .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(20,22,31,.35);z-index:3}
.clarity .knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:999px;background:#fff;border:3px solid var(--pink);display:grid;place-items:center;z-index:4;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);cursor:ew-resize}
.clarity .tag{position:absolute;top:14px;z-index:5;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;border-radius:5px;background:#14161fcc;color:#fff}

/* reviews rail */
.rail-scroll{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;-webkit-overflow-scrolling:touch}
.rail-scroll>*{scroll-snap-align:start;flex:0 0 86%;max-width:400px}
@media(min-width:768px){.rail-scroll>*{flex-basis:44%}}
@media(min-width:1024px){.rail-scroll>*{flex-basis:31%}}
.rail-scroll::-webkit-scrollbar{height:8px}.rail-scroll::-webkit-scrollbar-thumb{background:#e6d3df;border-radius:99px}

/* sticky mobile CTA bar */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:1fr 1fr;gap:1px;background:#0000001a;box-shadow:0 -10px 30px -18px rgba(0,0,0,.5)}
.mobar a{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.95rem;font-weight:800;font-size:.95rem}
@media (max-width:768px){ .mobar{display:grid} body{padding-bottom:56px} }

/* make an offer */
.offer-pill{position:fixed;right:16px;bottom:16px;z-index:45;background:#fff;color:var(--ink);border:1px solid #eccbdf;border-radius:999px;padding:.7rem 1.05rem;font-weight:700;box-shadow:0 16px 36px -18px rgba(0,0,0,.55);display:inline-flex;gap:.5rem;align-items:center;transition:transform .2s}
.offer-pill:hover{transform:translateY(-2px)}
@media (max-width:768px){ .offer-pill{bottom:70px} }
.modal-wrap{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(15,10,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-wrap.open{display:flex}
.modal{background:var(--paper);border-radius:16px;max-width:460px;width:100%;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);overflow:hidden}
input,select{font-family:inherit}
.field{width:100%;background:#fff;border:1px solid #e5dbe3;border-radius:10px;padding:.8rem .85rem;font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(228,39,143,.18)}
.field-dark{background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.25)}

/* ===================================================================
   Window-motif thread: framed glass "viewport" + focus-in reveal,
   plus the interactive project gallery and financing estimator.
   =================================================================== */
/* framed glass viewport - echoes the hero window on feature images */
.viewport{position:relative;background:linear-gradient(180deg,#fff,#eceef1);padding:11px;border-radius:12px;
  box-shadow:0 34px 66px -36px rgba(20,22,31,.6),inset 0 0 0 1px #e6e8ec}
.viewport .pane{position:relative;overflow:hidden;border-radius:5px;background:#dfe4ea}
.viewport .pane img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter 1.1s ease}
.viewport .pane::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.32) 3%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 76%,rgba(255,255,255,.14) 98%)}
/* focus-in: frosted -> crisp as it enters view (the hero's blur-to-clear idea, threaded through) */
.js .focus-in img{filter:blur(16px);transform:scale(1.08)}
.js .focus-in.in-focus img{filter:blur(0);transform:scale(1)}

/* gallery */
.gal-filters{display:flex;flex-wrap:wrap;gap:.5rem}
.gal-filters button{font-weight:700;font-size:.9rem;padding:.5rem .95rem;border-radius:999px;border:1.5px solid #e6d6e1;color:var(--inksoft);background:#fff;transition:border-color .2s,color .2s,background .2s}
.gal-filters button:hover{border-color:var(--pink);color:var(--pinkdeep)}
.gal-filters button.on{background:var(--pink);border-color:var(--pink);color:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:768px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
.gal-item{position:relative;cursor:pointer}
.gal-item.hide{display:none}
.gal-item .pane{aspect-ratio:4/3}
.gal-item .cap{position:absolute;left:20px;bottom:18px;z-index:4;color:#fff;font-weight:700;font-size:.9rem;text-shadow:0 2px 12px rgba(0,0,0,.7);opacity:0;transform:translateY(6px);transition:.3s}
.gal-item:hover .cap{opacity:1;transform:none}
.gal-item .pane::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 52%,rgba(10,12,17,.55));opacity:0;transition:.3s}
.gal-item:hover .pane::before{opacity:1}
.gal-item:hover .pane img{transform:scale(1.06)}

/* before / after toggle */
.ba .pane{aspect-ratio:16/11}
.ba .pane img{position:absolute;inset:0;transition:opacity .6s ease}
.ba .ba-before{opacity:0}
.ba.show-before .ba-before{opacity:1}
.ba-tag{position:absolute;top:16px;left:16px;z-index:4;background:#14161fd9;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:.32rem .62rem;border-radius:5px}
.ba-toggle{display:inline-flex;background:#fff;border:1.5px solid #e6d6e1;border-radius:999px;padding:.25rem}
.ba-toggle button{font-weight:700;font-size:.85rem;padding:.42rem .95rem;border-radius:999px;color:var(--inksoft);transition:.2s}
.ba-toggle button.on{background:var(--pink);color:#fff}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:1.5rem;background:rgba(10,8,12,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.lightbox .lb-close{position:absolute;top:16px;right:22px;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.6rem;cursor:pointer;padding:.6rem 1rem;user-select:none;opacity:.85}
.lightbox .lb-nav:hover{opacity:1}
.lightbox .lb-prev{left:6px}.lightbox .lb-next{right:6px}

/* financing estimator */
.est-card{background:#fff;border:1px solid #eadfe6;border-radius:18px;box-shadow:0 34px 80px -44px rgba(20,22,31,.5)}
.est-out{font-family:Poppins;font-weight:800;line-height:.95;color:var(--pinkdeep);font-variant-numeric:tabular-nums}
.est-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:#f0dbe8;outline:none}
.est-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--pink);box-shadow:0 6px 16px -6px rgba(0,0,0,.5);cursor:pointer}
.est-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--pink);cursor:pointer}
.term-btn{font-weight:700;font-size:.92rem;padding:.6rem .5rem;border-radius:10px;border:1.5px solid #e6d6e1;color:var(--inksoft);background:#fff;transition:.2s}
.term-btn.on{background:var(--navy2);border-color:var(--navy2);color:#fff}

/* mobile hero: make the casement reveal + offer read as strong as desktop */
@media(max-width:640px){
  .winhero{perspective:1500px;transition:opacity .5s ease .1s}
  .csash{transition-duration:1.15s}
  .csash .glass,.csash .grille{inset:11px}
  .csash .grille .mv{width:12px}.csash .grille .mh{height:12px}
  .hero.is-open .csash.left{transform:rotateY(-112deg)}
  .hero.is-open .csash.right{transform:rotateY(112deg)}
  .hero-photo{filter:blur(9px) brightness(.97);transition:transform 8s ease-out,filter .9s ease .05s}
  /* bring the headline + copy in fast so it's readable almost immediately */
  .hero.is-open .hero-copy .eye{transition-delay:.08s}
  .hero.is-open .hero-copy .l1{transition-delay:.18s}
  .hero.is-open .hero-copy .l2{transition-delay:.3s}
  .hero.is-open .hero-copy .rt{transition-delay:.42s}
  .lead-card{padding:1.15rem 1.1rem;transition-delay:.38s}
  .hero-copy .l1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .count-pill span{min-width:2.7rem;padding:.3rem .4rem}
  .count-pill b{font-size:1.05rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .focus-in img{filter:none!important;transform:none!important}
  .hero-photo{transform:scale(1)!important;filter:none!important;transition:none!important}
  .winhero,.wincasing{opacity:0!important;transition:none!important}
  .hero-scrim{opacity:1!important}
  .hero-copy>*,.lead-card{opacity:1!important;transform:none!important;transition:none!important}
  .glint,.replay-intro{display:none!important}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.frame-card{transition:none!important}
}