:root{
    --navy:#1F2E42;--navy-deep:#131E2E;--navy-mid:#26374D;
    --ivory:#FAF7F1;--ivory-2:#EFE9DE;
    --gold:#C29B5C;--gold-bright:#DDBB7E;
    --slate:#7B8A9E;--ink:#1A1F26;
    --line:rgba(31,46,66,.14);--line-light:rgba(250,247,241,.16);
    --maxw:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Manrope",system-ui,sans-serif;background:var(--ivory);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:600;line-height:1.04}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
  .eyebrow{font-family:"Manrope";font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:30px;height:1px;background:var(--gold)}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .photo{position:relative;overflow:hidden;background:linear-gradient(135deg,#c9d1dc,#94a2b5 60%,#5f7085);isolation:isolate}
  .photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
  .photo .badge{position:absolute;z-index:2;top:12px;left:12px;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:rgba(19,30,46,.62);color:#f4eeda;padding:5px 10px;border-radius:20px;backdrop-filter:blur(4px)}
 
  /* ===== LOGO MARK ===== */
  .logomark{flex-shrink:0}
  .logomark .roof-n{stroke:var(--navy)}
  .logomark .roof-g{stroke:var(--gold)}
  .logomark .t{fill:var(--navy)}
  .logomark .r{fill:var(--gold)}
  .logomark .win{fill:var(--navy)}
  .on-dark .roof-n{stroke:var(--ivory)}
  .on-dark .t{fill:var(--ivory)}
  .on-dark .win{fill:var(--ivory)}
 
  /* ===== HEADER ===== */
  header{position:fixed;inset:0 0 auto;z-index:60;transition:.35s}
  header.solid{background:rgba(250,247,241,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand .bt{font-family:"Cormorant Garamond";font-weight:700;font-size:23px;letter-spacing:.06em;color:#fff;line-height:1.05;transition:color .35s}
  header.solid .brand .bt{color:var(--navy)}
  .brand .bs{display:block;font-family:"Manrope";font-weight:600;font-size:8.5px;letter-spacing:.26em;color:var(--gold-bright)}
  header.solid .brand .bs{color:var(--gold)}
  .brand .tag{display:block;font-family:"Manrope";font-weight:500;font-size:8px;letter-spacing:.14em;color:rgba(255,255,255,.5);margin-top:2px;text-transform:uppercase}
  header.solid .brand .tag{color:var(--slate)}
  .navlinks{display:flex;gap:26px;align-items:center}
  .navlinks a{font-size:14px;font-weight:500;color:rgba(255,255,255,.92);transition:color .2s;white-space:nowrap}
  header.solid .navlinks a{color:var(--navy)}
  .navlinks a:hover{color:var(--gold-bright)}
  header.solid .navlinks a:hover{color:var(--gold)}
  .callbtn{background:var(--gold);color:var(--navy-deep)!important;padding:11px 22px;border-radius:30px;font-weight:600;font-size:13.5px}
  .callbtn:hover{background:var(--gold-bright)}
  .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
  .burger span{width:24px;height:2px;background:#fff;display:block}
  header.solid .burger span{background:var(--navy)}
 
  /* ===== HERO ===== */
  .hero{background:var(--navy);color:var(--ivory);padding:140px 0 92px;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;top:-160px;right:-130px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(194,155,92,.2),transparent 70%)}
  .hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4}
  .hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center;position:relative}
  .hero h1{font-size:clamp(44px,6.4vw,82px);font-weight:500}
  .hero h1 em{font-style:italic;color:var(--gold-bright)}
  .hero .lead{font-size:18.5px;color:rgba(250,247,241,.8);max-width:44ch;margin:26px 0 34px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn-primary{background:var(--gold);color:var(--navy-deep);padding:16px 30px;border-radius:30px;font-weight:600;font-size:15px;transition:.2s;border:1px solid var(--gold);cursor:pointer;display:inline-block}
  .btn-primary:hover{background:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-1px)}
  .btn-ghost{padding:16px 28px;border:1px solid rgba(250,247,241,.4);border-radius:30px;font-weight:600;font-size:15px;color:var(--ivory);transition:.2s;display:inline-block}
  .btn-ghost:hover{background:var(--ivory);color:var(--navy)}
  .hero-trust{display:flex;gap:24px;margin-top:34px;flex-wrap:wrap;font-size:13px;color:rgba(250,247,241,.72);font-weight:500}
  .hero-trust span{display:flex;align-items:center;gap:8px}
  .hero-trust span::before{content:"✦";color:var(--gold-bright);font-size:11px}
 
  /* BEFORE/AFTER */
  .compare{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;cursor:ew-resize;box-shadow:0 40px 80px -34px rgba(0,0,0,.65);border:1px solid rgba(250,247,241,.14);touch-action:none;user-select:none}
  .compare .side{position:absolute;inset:0}
  .compare .side img{width:100%;height:100%;object-fit:cover}
  .c-before{background:linear-gradient(140deg,#8b93a0,#666f7d)}
  .c-after{background:linear-gradient(140deg,#eef1f5,#d5dce4);clip-path:inset(0 0 0 50%)}
  .c-tag{position:absolute;bottom:16px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 13px;border-radius:20px;z-index:5;backdrop-filter:blur(5px)}
  .c-before .c-tag{left:16px;background:rgba(19,30,46,.66);color:#f4eeda}
  .c-after .c-tag{right:16px;background:rgba(250,247,241,.8);color:var(--navy-deep)}
  .c-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ivory);transform:translateX(-50%);z-index:6;pointer-events:none}
  .c-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:var(--ivory);border-radius:50%;z-index:7;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.34);pointer-events:none}
  .c-knob svg{width:22px;height:22px;color:var(--navy)}
  .c-hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(19,30,46,.45);padding:6px 14px;border-radius:20px;backdrop-filter:blur(5px);animation:pulse 2.4s ease-in-out infinite;pointer-events:none}
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
 
  /* ===== VIDEO ===== */
  .video-sec{background:var(--navy-deep);color:var(--ivory);padding:92px 0}
  .video-head{text-align:center;max-width:640px;margin:0 auto 44px}
  .video-head h2{font-size:clamp(32px,4.4vw,52px);color:var(--ivory);margin-top:16px;font-weight:500}
  .video-head h2 em{font-style:italic;color:var(--gold-bright)}
  .video-head p{color:rgba(250,247,241,.7);font-size:17px;margin-top:14px}
  .player{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.8);border:1px solid var(--line-light);background:#000}
  .player video{width:100%;height:100%;object-fit:cover;display:block}
  .player .poster{position:absolute;inset:0;z-index:2;cursor:pointer}
  .player .poster img{width:100%;height:100%;object-fit:cover}
  .player .poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,30,46,.35),rgba(19,30,46,.72))}
  .play-btn{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;box-shadow:0 12px 40px rgba(194,155,92,.5)}
  .play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--gold-bright)}
  .play-btn svg{width:34px;height:34px;color:var(--navy-deep);margin-left:5px}
  .play-ring{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;border:2px solid rgba(221,187,126,.6);animation:ring 2.6s ease-out infinite;pointer-events:none}
  @keyframes ring{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
  .player .cap{position:absolute;z-index:3;left:24px;bottom:22px;color:#fff}
  .player .cap b{font-family:"Cormorant Garamond";font-size:26px;font-weight:600;display:block}
  .player .cap span{font-size:13px;color:rgba(255,255,255,.75)}
  .video-note{text-align:center;margin-top:20px;font-size:13px;color:rgba(250,247,241,.45)}
 
  /* RIBBON */
  .ribbon{background:var(--navy-mid);color:var(--ivory)}
  .ribbon-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .ribbon-grid div{padding:34px 26px;border-left:1px solid var(--line-light);text-align:center}
  .ribbon-grid div:first-child{border-left:0}
  .ribbon .k{font-family:"Cormorant Garamond";font-weight:600;font-size:40px;color:var(--gold-bright);line-height:1}
  .ribbon .v{font-size:12.5px;color:rgba(250,247,241,.7);margin-top:8px}
 
  section.block{padding:104px 0}
  .head{max-width:660px;margin-bottom:56px}
  .head h2{font-size:clamp(34px,4.6vw,56px);margin-top:18px;font-weight:500;color:var(--navy)}
  .head h2 em{font-style:italic;color:var(--gold)}
  .head p{color:#4d5560;font-size:17.5px;margin-top:16px}
 
  /* GALLERY */
  .gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px}
  .gal .photo{border-radius:12px}
  .gal .g-tall{grid-row:span 2}
  .gal .g-wide{grid-column:span 2}
  .gal-note{margin-top:22px;font-size:13.5px;color:var(--slate)}
 
  /* OFFERS */
  .offers{background:var(--ivory-2)}
  .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .offer{background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:30px 28px;position:relative;display:flex;flex-direction:column;transition:.28s;overflow:hidden}
  .offer:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(31,46,66,.5)}
  .offer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
  .offer.hot{background:var(--navy);color:var(--ivory);border-color:transparent}
  .offer.hot h3{color:var(--ivory)}
  .offer.hot p{color:rgba(250,247,241,.78)}
  .offer .tagline{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--navy-deep);padding:6px 12px;border-radius:20px;align-self:flex-start;margin-bottom:16px}
  .offer h3{font-size:28px;margin-bottom:10px;font-weight:600;color:var(--navy)}
  .offer .save{font-family:"Cormorant Garamond";font-size:44px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:10px}
  .offer.hot .save{color:var(--gold-bright)}
  .offer p{font-size:15px;color:#4d5560;flex:1}
  .offer .valid{font-size:12px;color:var(--slate);margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:7px}
  .offer.hot .valid{border-color:var(--line-light);color:rgba(250,247,241,.6)}
  .offer .valid::before{content:"⏱";font-size:13px}
  .offer .cta-link{margin-top:16px;font-weight:600;font-size:14px;color:var(--gold);display:inline-flex;gap:6px;align-items:center}
  .offer.hot .cta-link{color:var(--gold-bright)}
 
  /* SERVICES */
  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .svc{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:34px 30px;transition:.28s}
  .svc:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(31,46,66,.45);border-color:transparent}
  .svc .ic{width:42px;height:42px;color:var(--gold);margin-bottom:18px}
  .svc h3{font-size:26px;margin-bottom:8px;color:var(--navy)}
  .svc p{color:#4d5560;font-size:15px}
  .svc.feature{grid-column:1/-1;background:var(--navy);color:var(--ivory);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;border:0}
  .svc.feature:hover{transform:none}
  .svc.feature h3{font-size:34px;color:var(--ivory)}
  .svc.feature p{color:rgba(250,247,241,.8);max-width:54ch}
  .svc.feature .ic{color:var(--gold-bright)}
 
  /* MAP */
  .maparea{background:var(--navy);color:var(--ivory)}
  .maparea .head h2{color:var(--ivory)}.maparea .head p{color:rgba(250,247,241,.75)}
  .map-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:stretch}
  .town-panel{background:var(--navy-deep);border:1px solid var(--line-light);border-radius:16px;padding:28px;display:flex;flex-direction:column}
  .town-panel h3{font-size:22px;color:var(--ivory);margin-bottom:6px}
  .town-panel .ph{font-size:13px;color:rgba(250,247,241,.6);margin-bottom:18px}
  .towns{display:flex;flex-wrap:wrap;gap:7px}
  .town{background:rgba(250,247,241,.07);border:1px solid var(--line-light);color:var(--ivory);font-family:inherit;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:20px;cursor:pointer;transition:.2s}
  .town:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
  .town.active{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
  .town.hq{border-color:var(--gold);color:var(--gold-bright)}
  .town.hq.active{color:var(--navy-deep)}
  .map-foot{margin-top:auto;padding-top:20px;font-size:13px;color:rgba(250,247,241,.6);line-height:1.6}
  .map-foot b{color:var(--gold-bright);font-weight:600}
  #map{height:520px;border-radius:16px;border:1px solid var(--line-light);z-index:1;background:var(--navy-deep)}
  .leaflet-popup-content-wrapper{border-radius:10px}
  .leaflet-popup-content{font-family:"Manrope";font-size:13.5px;margin:12px 14px}
  .leaflet-popup-content b{font-family:"Cormorant Garamond";font-size:19px;display:block;margin-bottom:3px;color:var(--navy)}
  .map-fallback{display:none;padding:34px;text-align:center;color:rgba(250,247,241,.65);font-size:14px}
 
  /* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .step{padding-top:26px;border-top:1px solid var(--line)}
  .step .n{font-family:"Cormorant Garamond";font-weight:600;font-size:34px;color:var(--gold)}
  .step h3{font-size:22px;margin:8px 0;color:var(--navy)}
  .step p{font-size:14.5px;color:#4d5560}
 
  /* REVIEWS */
  .reviews{background:var(--ivory-2)}
  .rev-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
  .rev-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .rev{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column}
  .stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:14px}
  .rev p{font-family:"Cormorant Garamond";font-size:20px;line-height:1.4;color:var(--navy);flex:1;font-weight:500}
  .rev .who{margin-top:18px;font-family:"Manrope";font-weight:600;font-size:14px;color:var(--slate)}
  .rev.isnew{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
 
  /* Google review card */
  .gcard{grid-column:1/-1;background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
  .gcard .glogo{width:46px;height:46px;flex-shrink:0}
  .gcard h4{font-family:"Cormorant Garamond";font-size:24px;font-weight:600;color:var(--navy)}
  .gcard p{font-size:13.5px;color:var(--slate);margin-top:2px}
  .gbtn{background:#fff;border:1px solid var(--line);color:var(--navy);padding:12px 22px;border-radius:26px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:9px;transition:.2s;white-space:nowrap}
  .gbtn:hover{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
  .gbtn svg{width:17px;height:17px}
 
  .rev-form{background:var(--navy);color:var(--ivory);border-radius:18px;padding:34px;position:sticky;top:100px}
  .rev-form h3{font-size:28px;margin-bottom:4px}
  .rev-form .sub{font-size:14px;color:rgba(250,247,241,.7);margin-bottom:22px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:8px}
  .field input,.field textarea{width:100%;background:rgba(250,247,241,.06);border:1px solid var(--line-light);border-radius:8px;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ivory)}
  .field input::placeholder,.field textarea::placeholder{color:rgba(250,247,241,.4)}
  .field input:focus,.field textarea:focus{outline:0;border-color:var(--gold)}
  .field textarea{resize:vertical;min-height:92px}
  .starpick{display:flex;gap:7px;font-size:32px;line-height:1;cursor:pointer}
  .starpick span{color:rgba(250,247,241,.22);transition:color .12s}
  .starpick span.on{color:var(--gold-bright)}
  .submit{width:100%;background:var(--gold);color:var(--navy-deep);border:0;padding:15px;border-radius:30px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;transition:.2s}
  .submit:hover{background:var(--gold-bright)}
  .formnote{font-size:12px;color:rgba(250,247,241,.55);margin-top:12px;line-height:1.5}
  .toast{margin-top:14px;font-size:14px;color:var(--gold-bright);font-weight:600;display:none}
  .toast.show{display:block}
 
  /* CONTACT */
  .cta{background:var(--ivory)}
  .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .cta h2{font-size:clamp(36px,4.8vw,58px);font-weight:500;color:var(--navy)}
  .cta h2 em{font-style:italic;color:var(--gold)}
  .cta .sub{color:#4d5560;font-size:17.5px;margin:20px 0 30px;max-width:40ch}
  .cta-actions{display:flex;gap:14px;flex-wrap:wrap}
  .cta .btn-ghost{color:var(--navy);border-color:var(--line)}
  .cta .btn-ghost:hover{background:var(--navy);color:var(--ivory)}
  .contact-card{background:var(--navy);color:var(--ivory);border-radius:18px;padding:34px}
  .contact-card .row{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-light);align-items:center}
  .contact-card .row:last-child{border-bottom:0}
  .contact-card .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);min-width:78px;flex-shrink:0}
  .contact-card .val{font-size:16px;font-weight:500}
  .contact-card .val small{display:block;font-size:13px;color:var(--slate);font-weight:400}
  /* social rows */
  .srow{display:flex;align-items:center;gap:11px;transition:.2s;padding:3px 0}
  .srow .si{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s;background:rgba(250,247,241,.08);border:1px solid var(--line-light)}
  .srow .si svg{width:17px;height:17px;color:var(--ivory);transition:.25s}
  .srow .st{font-size:15px;font-weight:500}
  .srow .sh{font-size:12px;color:var(--slate);display:block;font-weight:400}
  .srow:hover .st{color:var(--gold-bright)}
  .srow.fb:hover .si{background:#1877F2;border-color:#1877F2}
  .srow.ig:hover .si{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);border-color:transparent}
  .srow.tt:hover .si{background:#000;border-color:#000}
  .srow.tt:hover .si svg{color:#25F4EE}
 
  /* FOOTER */
  footer{background:var(--navy-deep);color:rgba(250,247,241,.6);padding:60px 0 32px}
  .foot-top{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding-bottom:34px;border-bottom:1px solid var(--line-light)}
  .foot-brand .fb-line{display:flex;align-items:center;gap:14px}
  .foot-brand .bt{font-family:"Cormorant Garamond";font-weight:700;font-size:27px;letter-spacing:.05em;color:var(--ivory);line-height:1.05}
  .foot-brand .bs{display:block;font-family:"Manrope";font-weight:600;font-size:9.5px;letter-spacing:.26em;color:var(--gold)}
  .foot-brand .tag{font-size:12px;color:var(--slate);letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
  .foot-brand p{font-size:14px;color:rgba(250,247,241,.6);margin-top:8px;max-width:46ch}
  .socials{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
  .soc{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-light);display:flex;align-items:center;justify-content:center;transition:.25s;color:var(--ivory);background:rgba(250,247,241,.04)}
  .soc svg{width:22px;height:22px}
  .soc:hover{transform:translateY(-3px)}
  .soc.facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
  .soc.tiktok:hover{background:#000;border-color:#000;color:#25F4EE}
  .soc.instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);border-color:transparent;color:#fff}
  .soc.phone:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
  .soc.email:hover{background:var(--ivory);border-color:var(--ivory);color:var(--navy)}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;padding-top:24px}
  .foot-bot a:hover{color:var(--gold-bright)}
 
  .mobile-menu{display:none;position:fixed;inset:80px 0 0;background:var(--ivory);z-index:55;padding:40px 26px;flex-direction:column;gap:4px;overflow:auto}
  .mobile-menu.open{display:flex}
  .mobile-menu a{font-family:"Cormorant Garamond";font-weight:600;font-size:31px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--navy)}
 
  @media(max-width:900px){
    .navlinks{display:none}.burger{display:flex}
    .hero-grid{grid-template-columns:1fr;gap:44px}.compare{max-width:440px;margin:0 auto}
    .ribbon-grid{grid-template-columns:repeat(2,1fr)}.ribbon-grid div:nth-child(3){border-left:0}
    .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
    .offer-grid{grid-template-columns:1fr}
    .services{grid-template-columns:1fr}.svc.feature{grid-template-columns:1fr;gap:20px}
    .map-grid{grid-template-columns:1fr}#map{height:400px}
    .steps{grid-template-columns:1fr 1fr}
    .rev-layout{grid-template-columns:1fr;gap:30px}.rev-list{grid-template-columns:1fr}.rev-form{position:static}
    .gcard{grid-template-columns:1fr;text-align:center;justify-items:center}
    .cta-grid{grid-template-columns:1fr;gap:36px}
    .foot-top{grid-template-columns:1fr;gap:28px}.socials{justify-content:flex-start}
    section.block,.video-sec{padding:70px 0}
    .play-btn,.play-ring{width:74px;height:74px}.play-btn svg{width:26px;height:26px}
  }
  @media(max-width:480px){
    .ribbon-grid{grid-template-columns:1fr}.ribbon-grid div{border-left:0;border-top:1px solid var(--line-light)}.ribbon-grid div:first-child{border-top:0}
    .steps{grid-template-columns:1fr}.gal{grid-template-columns:1fr;grid-auto-rows:210px}.gal .g-wide,.gal .g-tall{grid-column:auto;grid-row:auto}
    .hero-cta .btn-primary,.hero-cta .btn-ghost{flex:1;text-align:center}
    .contact-card{padding:26px 22px}
    .contact-card .row{flex-direction:column;align-items:flex-start;gap:6px}
  }
  @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
 
/* ================= SHTESA PER VERSIONIN LIVE ================= */
 
/* gjendjet e ngarkimit */
.loading{padding:60px 20px;text-align:center;color:var(--slate);font-size:14px;grid-column:1/-1}
.loading::before{content:"";display:block;width:26px;height:26px;margin:0 auto 14px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{padding:50px 20px;text-align:center;color:var(--slate);font-size:14.5px;grid-column:1/-1;border:1px dashed var(--line);border-radius:14px}
 
/* formulari i oferten */
.quote-form{background:var(--navy);color:var(--ivory);border-radius:18px;padding:34px}
.quote-form h3{font-size:28px;margin-bottom:4px}
.quote-form .sub{font-size:14px;color:rgba(250,247,241,.7);margin-bottom:22px}
.qf2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-form select{width:100%;background:rgba(250,247,241,.06);border:1px solid var(--line-light);border-radius:8px;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--ivory)}
.quote-form select option{background:var(--navy);color:var(--ivory)}
.quote-form select:focus{outline:0;border-color:var(--gold)}
.formmsg{margin-top:14px;font-size:14px;font-weight:600;display:none;padding:12px 14px;border-radius:8px}
.formmsg.show{display:block}
.formmsg.ok{color:#8FD6A6;background:rgba(60,160,100,.14)}
.formmsg.err{color:#F0A9A0;background:rgba(190,70,60,.16)}
.submit:disabled{opacity:.6;cursor:not-allowed}
 
/* lightbox i galerise */
.lightbox{position:fixed;inset:0;background:rgba(10,16,26,.94);z-index:100;display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:8px;object-fit:contain}
.lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;background:rgba(250,247,241,.12);border:0;color:#fff;font-size:22px;cursor:pointer;transition:.2s}
.lb-close:hover{background:var(--gold);color:var(--navy-deep)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(250,247,241,.12);border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb-nav:hover{background:var(--gold);color:var(--navy-deep)}
.lb-nav svg{width:22px;height:22px}
.lb-prev{left:22px}.lb-next{right:22px}
.lb-cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(250,247,241,.8);font-size:13.5px;letter-spacing:.06em}
.gal .photo{cursor:zoom-in}
 
/* fshih socialet qe s'kane link */
.srow.nolink{pointer-events:none;opacity:.45}
.soc.nolink{opacity:.35;pointer-events:none}
.gcard.nolink{display:none}
 
@media(max-width:640px){.qf2{grid-template-columns:1fr}}
 
/* logo images */
.brand-logo{height:52px;width:auto;display:block}
.foot-logo{height:110px;width:auto;display:block}
@media(max-width:900px){.brand-logo{height:44px}.foot-logo{height:90px}}

/* models catalog */
.models{background:var(--ivory-2)}
.model-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.model-card{background:var(--ivory);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.28s}
.model-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -32px rgba(31,46,66,.45)}
.model-img{aspect-ratio:4/3;overflow:hidden;background:#cfd6e0}
.model-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.model-card:hover .model-img img{transform:scale(1.05)}
.model-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.model-type{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.model-body h3{font-size:24px;color:var(--navy);margin-bottom:8px}
.model-body p{font-size:14.5px;color:#4d5560;flex:1}
.model-price{font-family:"Cormorant Garamond";font-size:22px;font-weight:600;color:var(--navy);margin-top:12px}
.model-pick{margin-top:16px;background:var(--navy);color:var(--ivory);border:0;padding:13px;border-radius:30px;font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer;transition:.2s}
.model-pick:hover{background:var(--gold);color:var(--navy-deep)}
@media(max-width:900px){.model-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.model-grid{grid-template-columns:1fr}}

/* Higganum case study */
.casestudy{background:var(--navy);color:var(--ivory)}
.casestudy .head h2{color:var(--ivory)}
.casestudy .head p{color:rgba(250,247,241,.75)}
.cs-ba{position:relative;aspect-ratio:16/9;max-width:820px;margin:0 auto 60px;border-radius:16px;overflow:hidden;cursor:ew-resize;box-shadow:0 40px 80px -34px rgba(0,0,0,.7);border:1px solid var(--line-light);touch-action:none;user-select:none}
.cs-side{position:absolute;inset:0}
.cs-side img{width:100%;height:100%;object-fit:cover}
.cs-after{clip-path:inset(0 0 0 50%)}
.cs-tag{position:absolute;bottom:16px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:20px;z-index:5;backdrop-filter:blur(5px);background:rgba(19,30,46,.6);color:#f4eeda}
.cs-side:not(.cs-after) .cs-tag{left:16px}
.cs-after .cs-tag{right:16px;background:rgba(250,247,241,.82);color:var(--navy-deep)}
.cs-div{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ivory);transform:translateX(-50%);z-index:6;pointer-events:none}
.cs-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:var(--ivory);border-radius:50%;z-index:7;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.34);pointer-events:none}
.cs-knob svg{width:22px;height:22px;color:var(--navy)}
.cs-hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:6;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(19,30,46,.5);padding:6px 14px;border-radius:20px;backdrop-filter:blur(5px);animation:pulse 2.4s ease-in-out infinite;pointer-events:none}
.cs-steps{display:grid;gap:26px}
.cs-step{background:var(--navy-deep);border:1px solid var(--line-light);border-radius:16px;padding:26px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.cs-num{font-family:"Cormorant Garamond";font-weight:700;font-size:52px;color:var(--gold-bright);line-height:1;align-self:start}
.cs-imgs{position:relative;grid-row:span 2;overflow:hidden}
.cs-track{display:flex;gap:10px;transition:transform .4s cubic-bezier(.2,.6,.2,1)}
.cs-track img{flex:0 0 calc(50% - 5px);width:calc(50% - 5px);aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.cs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(250,247,241,.92);color:var(--navy);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:.2s}
.cs-arrow:hover{background:var(--gold);color:var(--navy-deep)}
.cs-arrow:disabled{opacity:.3;cursor:default}
.cs-prev{left:8px}.cs-next{right:8px}
.cs-step h3{font-size:26px;color:var(--ivory)}
.cs-step p{font-size:15px;color:rgba(250,247,241,.75);margin-top:6px}
@media(max-width:760px){
  .cs-step{grid-template-columns:1fr}
  .cs-num{font-size:40px}
  .cs-imgs{grid-row:auto}
  .cs-track img{flex:0 0 100%;width:100%}
}

@media(max-width:640px){
  .cs-ba{aspect-ratio:4/3;max-width:100%}
  .cs-knob{width:44px;height:44px}
}

/* fix hero before/after on mobile */
@media(max-width:900px){
  #compare{
    display:block !important;
    width:100% !important;
    max-width:440px !important;
    margin:0 auto !important;
    aspect-ratio:4/3 !important;
    height:auto !important;
    min-height:320px;
  }
}

/* gallery carousel */
.gal-carousel{position:relative;display:flex;align-items:center;gap:12px}
.gal-viewport{overflow:hidden;flex:1}
.gal-track{display:flex;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.gal-page{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gal-page .photo{margin:0}
.gal-page .photo img{width:100%;height:320px;object-fit:cover;border-radius:14px;display:block}
.gal-arrow{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;background:var(--navy);color:var(--ivory);font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:.2s}
.gal-arrow:hover{background:var(--gold);color:var(--navy-deep)}
.gal-arrow:disabled{opacity:.3;cursor:default}
@media(max-width:760px){
  .gal-page{grid-template-columns:1fr}
  .gal-page .photo img{height:240px}
  .gal-arrow{width:40px;height:40px;font-size:22px}
}


/* models carousel */
.model-carousel{position:relative;display:flex;align-items:center;gap:12px}
.model-carousel .gal-viewport{overflow-x:hidden;overflow-y:visible;flex:1}
.model-grid{display:flex;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.model-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.model-page .model-card{margin:0}
@media(max-width:900px){
  .model-page{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .model-page{grid-template-columns:1fr}
}


/* model filter buttons */
.model-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.gfilter{background:var(--ivory);border:1.5px solid var(--line);color:var(--navy);font-family:inherit;font-size:14px;font-weight:600;padding:9px 22px;border-radius:30px;cursor:pointer;transition:.2s}
.gfilter:hover{border-color:var(--gold);color:var(--gold)}
.gfilter.active{background:var(--navy);color:var(--ivory);border-color:var(--navy)}

/* fix model card getting cut off in carousel */
.model-carousel .gal-viewport{padding:6px 4px 12px}
.model-page{align-items:stretch}
.model-page .model-card{display:flex;flex-direction:column;height:auto}

/* clean model carousel + keep arrows visible */
#modelCarousel{position:relative;overflow:hidden;border-radius:16px}
#modelCarousel .gal-viewport{overflow:visible}
#modelCarousel .gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10}
#modelCarousel .model-prev{left:10px}
#modelCarousel .model-next{right:10px}