:root{
        /* Day / light mode only — bright palette matched to the SatinVue
           logo: pale sky-blue backgrounds, white surfaces, and a lighter
           slate-blue (not deep navy) for the hero, footer and bands, so
           the whole site feels light even on devices set to dark mode. */
        --bg:#f3f8fc;
        --bg-soft:#e4eff7;
        --surface:#ffffff;
        --ink:#152a40;
        --ink-soft:#4e657d;
        --line:#c3d5e4;
        --accent:#4a718f;
        --accent-strong:#31526e;
        --accent-soft:#d9e9f5;
        --dark:#33536e;
        --dark-ink:#eef5fb;
        --gold:#5d86a8;
        --gold-bright:#d3e5f4;
        --radius:6px;
        --shadow:0 12px 28px rgba(51,83,110,.12);
        color-scheme:light;
      }
      *{box-sizing:border-box}
      html{scroll-behavior:smooth}
      html,body{overflow-x:clip}
      body{margin:0;font-family:"Manrope",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(74,113,143,.18)}
      img{max-width:100%;display:block}
      a{color:var(--accent-strong)}
      h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;line-height:1.12;margin:0;font-weight:600}
      .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
      section{padding:76px 0}
      .section-head{max-width:660px;margin-bottom:38px}
      .section-head h2{font-size:clamp(2.1rem,4vw,3rem);margin-bottom:10px}
      .section-head p{color:var(--ink-soft);margin:0}
      .tag{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);border:1px solid var(--gold);padding:6px 14px;border-radius:2px;margin-bottom:16px}

      /* Header — clean, luxurious: logo, navigation and one action only.
         Contact details live in the footer. */
      header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--gold);box-shadow:0 1px 0 rgba(127,168,201,.18),0 10px 30px rgba(18,37,57,.06)}
      .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}
      .brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none;line-height:1;min-width:0}
      .brand .vue{color:var(--accent)}
      /* Brand lockup — name on one line, tagline on one line beneath it.
         “SatinVue Blinds” never wraps; “Where Style Meets Shade” sits on a
         single line under the name, in spaced capitals flanked by two
         hairlines that stretch it to exactly the width of the name — a
         quiet, luxury-hotel style lockup, identical in header and footer. */
      .brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
      .brand-name{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.9rem;font-weight:700;letter-spacing:.015em;line-height:1;white-space:nowrap}
      .brand-tagline{display:flex;align-items:center;gap:8px;margin-top:7px;font-family:"Manrope",sans-serif;font-size:.57rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-strong);white-space:nowrap;line-height:1}
      .brand-tagline .tag-text{flex:none;white-space:nowrap}
      .brand-tagline .tag-rule{display:block;height:1px;flex:1 1 10px;min-width:8px;background:var(--accent);opacity:.55}
      footer .brand-tagline{color:#cfe3f2}
      footer .brand-tagline .tag-rule{background:var(--gold-bright);opacity:.7}
      /* Logo — NO outside box: no border, no rounded frame, no shadow.
         Uses the tightly-cropped logo.png (the window mark fills the
         image edge to edge), shown as-is with object-fit:contain. */
      .logo-mark{width:60px;height:60px;flex:none;display:block;object-fit:contain;border:none;border-radius:0;box-shadow:none;background:transparent}
      .brand picture{display:flex;flex:none}
      footer .logo-mark{width:64px;height:64px}
      /* Footer booking action — a proper elegant pill button with room
         around it, matching the header button, instead of a cramped
         underlined text link. */
      .foot-book{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;padding:13px 26px;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.05em;border:1px solid var(--gold-bright);border-radius:999px;transition:background .2s ease,color .2s ease,transform .2s ease}
      .foot-book:hover{background:rgba(211,229,244,.14);color:#fff;text-decoration:none;transform:translateY(-1px)}
      .foot-socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
      .foot-socials a{width:42px;height:42px;border:1px solid rgba(127,168,201,.65);border-radius:50%;display:grid;place-items:center;color:var(--gold-bright);transition:background .2s ease,border-color .2s ease,transform .2s ease}
      .foot-socials a:hover{background:rgba(127,168,201,.18);border-color:var(--gold-bright);text-decoration:none;transform:translateY(-1px)}
      .foot-socials svg{width:16px;height:16px}
      .nav-links{display:flex;gap:28px;align-items:center}
      .nav-links a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
      .nav-links a:hover{color:var(--accent-strong)}
      /* Booking action inside the menu — only shown in the mobile dropdown,
         where the header button is hidden, so booking is one tap away
         from every page at phone width too. */
      .nav-links .nav-cta{display:none}
      /* Page-hero actions — every sub-page (Products, Services, Reviews,
         Warranty, Contact) carries the same booking / call row, so the
         consultation is reachable in one tap from anywhere on the site. */
      .page-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
      .page-ctas .btn.ghost{color:#bcd6ee;border-color:#bcd6ee}
      .page-ctas .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
      /* Buttons — luxury shape: a soft full pill with generous padding,
         refined (not heavy) type and a gentle lift on hover, instead of
         the old sharp-cornered, tightly-packed blocks. Used in the
         header, footer bands and every call-to-action row. */
      .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--dark);color:var(--dark-ink);text-decoration:none;font-weight:700;letter-spacing:.05em;padding:15px 32px;border-radius:999px;border:1px solid var(--dark);cursor:pointer;font-size:.92rem;font-family:inherit;box-shadow:0 6px 16px rgba(51,83,110,.16);transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
      .btn:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px rgba(51,83,110,.22)}
      .btn.ghost{background:transparent;color:var(--accent-strong);border-color:var(--accent);box-shadow:none}
      .btn.ghost:hover{background:var(--accent-soft);color:var(--accent-strong);box-shadow:0 8px 18px rgba(51,83,110,.12)}
      .btn.light{background:var(--gold);color:#0d1f31;border-color:var(--gold)}
      .btn.light:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#0d1f31}
      .menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:50%;padding:9px 11px;cursor:pointer;color:var(--ink);transition:border-color .2s ease,background .2s ease}
      .menu-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
      .menu-btn svg{width:22px;height:22px;display:block}

      /* Mobile page bar — every page, one tap, ALWAYS visible on phones
         and tablets (no need to find or open the hamburger menu first).
         This is the fix for “I can't open any of the pages” on mobile:
         the links wrap onto two tidy rows and the current page is
         underlined. Hidden on desktop, where the full menu shows. */
      .page-bar{display:none}
      /* Sticky mobile action bar — Call and Book a Free Consultation are
         always one tap away at the bottom of the phone screen. */
      .mobile-bar{display:none}
      @media (max-width:900px){
        .page-bar{display:flex;flex-wrap:wrap;gap:6px 4px;padding:0 0 14px}
        .page-bar a{color:var(--ink);text-decoration:none;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:11px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
        .page-bar a:hover{background:var(--accent-soft);color:var(--accent-strong)}
        .page-bar a[aria-current="page"]{background:var(--dark);color:var(--gold-bright)}
        .page-bar a.pb-book{background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--gold)}
      }
      @media (max-width:640px){
        body{padding-bottom:66px}
        .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(18,37,57,.14);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:10px}
        .mobile-bar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.04em}
        .mobile-bar a svg{width:17px;height:17px;flex:none}
        .mobile-bar .mb-call{background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--gold)}
        .mobile-bar .mb-book{background:var(--dark);color:var(--dark-ink);border:1px solid var(--dark)}
        .toast{bottom:86px}
      }

      /* Hero */
      .hero{padding:0;background:var(--dark);color:var(--dark-ink)}
      .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;min-height:500px}
      .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:60px 48px 60px max(20px,calc((100vw - 1180px)/2))}
      .hero-copy .tag{border-color:var(--gold);color:var(--gold-bright);align-self:flex-start}
      .hero-copy h1{font-size:clamp(2.7rem,5.4vw,4.2rem);margin-bottom:16px}
      .hero-copy h1 em{font-style:italic;color:var(--gold-bright)}
      .hero-copy p{color:#e2edf6;max-width:46ch;margin:0 0 30px;font-size:1.06rem}
      .hero-ctas{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:36px}
      .hero-points{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:.9rem;font-weight:700;letter-spacing:.05em;color:#d7e6f2}
      .hero-points span{display:inline-flex;gap:8px;align-items:center}
      .hero-points svg{width:17px;height:17px;color:var(--gold-bright);flex:none}
      /* Hero photo — shown at its natural 3:2 ratio in a framed card, so
         NOTHING is cropped: the smartphone with the Smart Control app in
         the foreground is fully visible, top to bottom and edge to edge,
         at every screen width (the old cover-fill cropped the phone off
         the right side). */
      .hero-media{position:relative;display:flex;align-items:center;padding:34px 34px 34px 4px}
      .hero-media-inner{position:relative;width:100%}
      .hero-photo{position:relative}
      .hero-media img{position:static;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;box-shadow:0 20px 44px rgba(6,20,34,.45);display:block}
      .hero-smart-chip{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(13,31,49,.88);color:#eef5fb;border:1px solid rgba(211,229,244,.6);border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:800;letter-spacing:.05em;backdrop-filter:blur(4px)}
      .hero-smart-chip svg{width:15px;height:15px;color:var(--gold-bright);flex:none}
      .hero-caption{display:flex;gap:10px;align-items:center;margin-top:14px;color:#d7e6f2;font-size:.93rem;font-weight:700;line-height:1.45}
      .hero-caption svg{width:19px;height:19px;color:var(--gold-bright);flex:none}
      .hero-caption strong{color:#fff}
      .hero-badge{position:absolute;left:14px;bottom:14px;background:rgba(14,12,8,.85);color:#f5efe6;border:1px solid rgba(127,168,201,.55);border-radius:4px;padding:13px 17px;font-size:.88rem;backdrop-filter:blur(4px)}
      .hero-badge strong{display:block;font-size:1rem;color:var(--gold-bright)}

      /* Range strip */
      .range-strip{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:20px 0}
      .range-strip .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
      .range-strip .lbl{font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
      .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:2px;padding:9px 17px;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit}
      .chip:hover{border-color:var(--accent);color:var(--accent-strong)}
      .chip[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:var(--dark-ink)}

      /* Product cards */
      .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
      .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
      .card img{width:100%;height:220px;object-fit:cover}
      .card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
      .card h3{font-size:1.55rem}
      .card p{margin:0;color:var(--ink-soft);font-size:.95rem;flex:1}
      .card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
      .card .note{font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--ink-soft)}
      .card .enquire{font-weight:800;text-decoration:none;font-size:.9rem;letter-spacing:.04em;white-space:nowrap}
      .card.hidden{display:none}

      /* Feature split sections */
      .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
      .split img.photo{width:100%;height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
      .split h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:12px}
      .split p{color:var(--ink-soft);margin:0 0 16px}
      .ticks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
      .ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:600}
      .ticks svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:3px}
      .alt-bg{background:var(--bg-soft)}

      /* Light demo — a real window frame with the blind fitted inside it.
         Switch between zebra, roller and honeycomb; roll each one all the
         way up or down; and try every light option for that blind type.
         Zebra positions: open = sheer over sheer · light filtering = the
         sheer position (bands half-shifted, light diffused through sheer)
         · privacy = closed (solid band fully covering the sheer). */
      .demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
      .demo-tabs{display:flex;gap:8px;padding:16px 18px 0;flex-wrap:wrap}
      .demo-tab{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 18px;font-weight:800;font-size:.86rem;letter-spacing:.04em;cursor:pointer;font-family:inherit}
      .demo-tab:hover{border-color:var(--accent);color:var(--accent-strong)}
      .demo-tab[aria-selected="true"]{background:var(--dark);border-color:var(--dark);color:var(--gold-bright)}
      .demo-stage{padding:18px}
      /* The window sits in a wall, so every type is seen fitted in a home:
         blinds live inside the frame, the curtain hangs on the wall. */
      .win-wall{position:relative;background:linear-gradient(180deg,#eef2f6,#e0e7ed);border:1px solid var(--line);border-radius:var(--radius);padding:46px 20px 30px;box-shadow:var(--shadow)}
      .win-baseboard{position:absolute;left:0;right:0;bottom:0;height:14px;background:#fbfcfd;border-top:2px solid #ccd6de;border-radius:0 0 var(--radius) var(--radius)}
      .curtain-track{position:absolute;top:20px;left:10px;right:10px;height:10px;background:linear-gradient(180deg,#5b7287,#2e4358);border-radius:6px;z-index:6;box-shadow:0 2px 6px rgba(0,0,0,.35)}
      .curtain-track::before,.curtain-track::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#22384f}
      .curtain-track::before{left:-4px}
      .curtain-track::after{right:-4px}
      .ct-shade{position:absolute;top:30px;bottom:16px;left:10px;right:10px;z-index:5;pointer-events:none}
      .ct-panel{position:absolute;top:0;bottom:0;width:51%;background:repeating-linear-gradient(90deg,#dbe4ec 0 var(--ct-fold,24px),#8ba2b6 var(--ct-fold,24px) calc(var(--ct-fold,24px)*2));box-shadow:inset -8px 0 14px rgba(46,67,88,.28),inset 8px 0 14px rgba(255,255,255,.35);transition:width .25s ease}
      .ct-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 18%,transparent 82%,rgba(46,67,88,.22));pointer-events:none}
      .ct-left{left:0;border-radius:3px 0 0 3px}
      .ct-right{right:0;border-radius:0 3px 3px 0}
      .demo-explain{margin:14px 0 0;font-size:.92rem;color:var(--ink);background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
      .demo-explain strong{color:var(--accent-strong)}
      .win{position:relative;border:12px solid #33536e;border-bottom-width:16px;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 10px 26px rgba(18,37,57,.22);overflow:hidden;background:#7fa6c9;height:360px}
      .win-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
      .win-mull-v{position:absolute;top:0;bottom:0;left:50%;width:10px;margin-left:-5px;background:#33536e;z-index:2;box-shadow:0 0 6px rgba(0,0,0,.3)}
      .win-mull-h{position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;background:#33536e;z-index:2;box-shadow:0 0 6px rgba(0,0,0,.3)}
      .win-shade{position:absolute;left:0;right:0;top:0;z-index:3;overflow:hidden}
      .win-headrail{position:absolute;left:0;right:0;top:0;height:15px;background:linear-gradient(180deg,#46688a,#22384f);z-index:5;box-shadow:0 3px 8px rgba(0,0,0,.4)}
      .win-bottombar{position:absolute;left:0;right:0;bottom:0;height:9px;background:linear-gradient(180deg,#54687e,#2e4358);box-shadow:0 -2px 5px rgba(0,0,0,.25)}
      /* ZEBRA — high contrast so SHEER vs SOLID is unmistakable:
         SOLID band = opaque slate-blue fabric (blocks the view completely)
         SHEER band = fine mesh, almost transparent (view shows through) */
      .zb-back,.zb-front{position:absolute;left:0;right:0;top:-56px;height:calc(100% + 112px);pointer-events:none}
      .zb-back{background:repeating-linear-gradient(0deg,#8fa9c2 0 26px,rgba(255,255,255,.10) 26px 52px)}
      .zb-front{background:repeating-linear-gradient(0deg,rgba(143,169,194,.98) 0 26px,rgba(255,255,255,.14) 26px 52px);will-change:transform}
      .zb-front::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,transparent 0 25px,rgba(20,40,60,.28) 25px 26px,transparent 26px 51px,rgba(20,40,60,.28) 51px 52px);pointer-events:none}
      .zb-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
      .zb-legend span{display:inline-flex;align-items:center;gap:7px}
      .zb-swatch{width:26px;height:14px;border:1px solid var(--line);border-radius:2px;flex:none}
      .zb-swatch.solid{background:#8fa9c2}
      .zb-swatch.sheer{background:repeating-linear-gradient(90deg,rgba(143,169,194,.5) 0 1px,#fff 1px 5px);opacity:.9}
      .roll-panel{position:absolute;inset:0;background:#edf1f5;transition:background .25s ease}
      .roll-tube{position:absolute;left:0;right:0;top:0;z-index:4;background:linear-gradient(180deg,#c3d2e0,#8499ad);border-radius:0 0 10px 10px;box-shadow:0 3px 7px rgba(0,0,0,.3)}
      /* HONEYCOMB — true cellular look: stacked horizontal cells / tubes,
         each cell bulges with a highlight on top and shadow underneath.
         Nothing like the flat roller panel or the zebra bands. */
      .hc-panel{position:absolute;inset:0;background-color:#e8eef4;transition:background-color .25s ease;overflow:hidden}
      .hc-panel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.95) 0 3px,rgba(226,235,244,.92) 3px 10px,rgba(168,192,214,.75) 18px,rgba(92,120,148,.55) 26px,rgba(38,62,86,.72) 28px);background-size:100% var(--hc-cell,28px);pointer-events:none}
      .hc-panel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 18px,transparent 18px 36px);pointer-events:none;opacity:.5}
      .win-dim{position:absolute;inset:0;background:#0d0b07;opacity:0;pointer-events:none;z-index:4}
      /* VERTICAL — soft FABRIC vanes: a woven fabric look with a
         gentle centre fold, hanging full-height from the headrail. Tilt is
         simulated by narrowing each vane (edge-on = open, flat = closed);
         drawing stacks the vanes at the left side of the window. */
      .vt-vanes{position:absolute;inset:0;overflow:hidden}
      .vt-vane{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 4px),linear-gradient(90deg,#e7edf3 0%,#c4d3df 38%,#9db2c4 50%,#c4d3df 62%,#e7edf3 100%);box-shadow:2px 0 4px rgba(20,40,60,.20);border-right:1px solid rgba(120,145,168,.45);transform-origin:center center}
      .vt-vane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(70,95,120,.35)}
      /* Segmented Sheer / Solid switch — one clear control, big tap targets */
      .seg-row{display:flex;margin-top:10px;border:1px solid var(--gold);border-radius:999px;overflow:hidden;width:max-content;max-width:100%}
      .seg-btn{border:0;background:var(--accent-soft);color:var(--accent-strong);padding:10px 20px;font-weight:800;font-size:.86rem;cursor:pointer;font-family:inherit;min-height:44px;white-space:nowrap}
      .seg-btn + .seg-btn{border-left:1px solid var(--gold)}
      .seg-btn:hover{color:var(--dark)}
      .seg-btn[aria-pressed="true"]{background:var(--dark);color:var(--gold-bright)}
      .win-state{position:absolute;left:12px;bottom:12px;z-index:6;background:rgba(14,12,8,.85);color:#f5efe6;border:1px solid rgba(127,168,201,.5);border-radius:3px;padding:8px 13px;font-size:.84rem;font-weight:700;max-width:calc(100% - 24px)}
      .win-state strong{color:var(--gold-bright)}
      .demo-controls{padding:2px 22px 24px}
      .demo-controls label{font-weight:800;display:flex;justify-content:space-between;gap:12px;font-size:.95rem;margin-bottom:6px}
      .demo-controls output{color:var(--accent-strong);text-align:right}
      input[type="range"]{width:100%;accent-color:var(--accent);height:28px;touch-action:pan-y}
      .demo-scale{display:flex;justify-content:space-between;font-size:.76rem;font-weight:700;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase;margin-top:0}
      .demo-group{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
      .demo-group .glabel{font-weight:800;font-size:.95rem;margin-bottom:8px;display:block}
      .opt-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
      .opt-btn{border:1px solid var(--gold);background:var(--accent-soft);color:var(--accent-strong);border-radius:999px;padding:8px 15px;font-weight:800;font-size:.82rem;cursor:pointer;font-family:inherit}
      .opt-btn:hover{border-color:var(--accent-strong)}
      .opt-btn[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:var(--gold-bright)}
      .demo-note{font-size:.88rem;color:var(--ink-soft);margin:8px 0 0}

      /* Services */
      .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
      .svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
      .svc .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px}
      .svc .ic svg{width:24px;height:24px;color:var(--accent-strong)}
      .svc h3{font-size:1.12rem;margin-bottom:6px;font-family:"Manrope",sans-serif;font-weight:800}
      .svc p{margin:0;color:var(--ink-soft);font-size:.93rem}

      /* Process */
      .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
      .step{border-top:3px solid var(--accent);padding-top:16px}
      .step .n{font-family:"Cormorant Garamond",serif;font-size:2.3rem;color:var(--accent);font-weight:700}
      .step h3{font-size:1.05rem;font-family:"Manrope",sans-serif;font-weight:800;margin:4px 0 6px}
      .step p{margin:0;color:var(--ink-soft);font-size:.92rem}

      /* Reviews — rating summary (individual reviews rotate in the floating card) */
      .rating-block{display:flex;flex-wrap:wrap;gap:26px 44px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 34px}
      .rating-score{font-family:"Cormorant Garamond",serif;font-size:4.2rem;font-weight:700;line-height:1;color:var(--ink)}
      .rating-stars{color:var(--gold);letter-spacing:4px;font-size:1.3rem}
      .rating-block p{margin:4px 0 0;color:var(--ink-soft);max-width:52ch}

      /* Warranty — formal coverage terms */
      .w-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 22px}
      .w-term{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent-strong);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
      .w-term .term{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.9rem;font-weight:700;line-height:1;color:var(--accent-strong)}
      .w-term .term small{font-size:1.35rem;font-weight:600;color:var(--ink)}
      .w-term h3{font-size:1.15rem;font-family:"Manrope",sans-serif;font-weight:800;margin:10px 0 8px;letter-spacing:.01em}
      .w-term p{margin:0;color:var(--ink-soft);font-size:.93rem}
      .w-notice{background:var(--dark);color:var(--dark-ink);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:26px}
      .w-notice h3{font-size:1.3rem;color:#fff;margin-bottom:8px}
      .w-notice h3 em{font-style:italic;color:var(--gold-bright)}
      .w-notice p{margin:0;color:#e2edf6;font-size:.95rem}
      .w-notice .labour-tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);border:1px solid var(--gold);padding:5px 11px;border-radius:2px;margin-bottom:12px}
      .w-contact{display:grid;gap:12px;margin-top:4px}
      .w-contact a{display:flex;gap:14px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;text-decoration:none;color:var(--ink)}
      .w-contact a:hover{border-color:var(--accent)}
      .w-contact .ic{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex:none}
      .w-contact .ic svg{width:20px;height:20px;color:var(--accent-strong)}
      .w-contact small{display:block;color:var(--ink-soft);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
      .w-contact strong{font-size:1rem;overflow-wrap:break-word}
      .formal-note{font-size:.88rem;color:var(--ink-soft);border-left:3px solid var(--accent);padding:2px 0 2px 16px;margin:22px 0 0;max-width:78ch}
      @media (max-width:960px){.w-terms{grid-template-columns:1fr}.w-notice{grid-template-columns:1fr}}

      /* Floating Google Reviews — live SociableKIT widget.
         Real reviews from the SatinVue Blinds & Shades Inc. Google
         profile, shown one at a time in a carousel. The widget itself
         renders the live rating and review count from Google. */
      .g-reviews-float{position:fixed;right:18px;bottom:18px;z-index:80;width:360px;max-width:calc(100vw - 36px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(16,35,58,.32);overflow:hidden}
      .g-reviews-float .gr-head{display:flex;align-items:center;gap:10px;background:var(--dark);color:#fff;padding:11px 14px}
      .g-reviews-float .gr-g{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
      .g-reviews-float .gr-head strong{font-size:.88rem;line-height:1.2;display:block}
      .g-reviews-float .gr-head small{color:#bcd6ee;font-size:.72rem;font-weight:700}
      .g-reviews-float .gr-close{margin-left:auto;background:none;border:none;color:#d7e6f2;font-size:1.2rem;line-height:1;cursor:pointer;padding:2px 2px 2px 6px}
      .g-reviews-float .gr-embed{background:var(--surface)}
      .g-reviews-float.dismissed{display:none}
      @media (max-width:640px){.g-reviews-float{display:none;left:12px;right:12px;bottom:154px;width:auto}.g-reviews-float.ready{display:block}.g-reviews-float.ready.dismissed{display:none}}

      /* FAQ */
      .faq{max-width:820px}
      .faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:4px 22px}
      .faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
      .faq summary::-webkit-details-marker{display:none}
      .faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);font-weight:600}
      .faq details[open ] summary::after{content:"–"}
      .faq details p{margin:0 0 16px;color:var(--ink-soft)}

      /* Contact */
      .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
      .contact-cards{display:grid;gap:14px}
      .ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;gap:16px;align-items:center;text-decoration:none;color:var(--ink)}
      .ccard:hover{border-color:var(--accent)}
      .ccard .ic{width:46px;height:46px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex:none}
      .ccard .ic svg{width:22px;height:22px;color:var(--accent-strong)}
      .ccard small{display:block;color:var(--ink-soft);font-weight:600}
      .ccard strong{font-size:1.06rem;overflow-wrap:break-word}
      form.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
      form.quote h3{font-size:1.3rem;margin-bottom:4px}
      form.quote>p{color:var(--ink-soft);margin:0 0 18px;font-size:.94rem}
      .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
      .field{margin-bottom:14px}
      .field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
      .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 13px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink);min-height:48px}
      .field textarea{min-height:96px;resize:vertical}
      .form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
      .form-status{font-size:.9rem;font-weight:700;color:var(--accent-strong);min-height:1.2em}

      /* Footer */
      footer{background:var(--dark);color:var(--dark-ink);padding:52px 0 30px}
      .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:36px}
      footer h4{margin:0 0 14px;font-size:1rem}
      footer a{color:#d7e6f2;text-decoration:none}
      footer a:hover{text-decoration:underline}
      footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.94rem}
      footer .brand{color:#fff}
      footer p{color:#d3e2ef;font-size:.94rem;max-width:38ch}
      .foot-bottom{border-top:1px solid rgba(255,255,255,.22);padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.87rem;color:#c3d5e6}

      /* Floating Google review widget */
      .g-widget{position:fixed;left:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:11px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 18px 10px 12px;box-shadow:0 14px 34px rgba(20,14,6,.28);text-decoration:none;font-weight:800;font-size:.92rem}
      .g-widget:hover{border-color:var(--accent)}
      .g-widget .g-badge{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e3e0da;display:grid;place-items:center;flex:none}
      .g-widget small{display:block;font-weight:600;color:var(--ink-soft);font-size:.74rem;line-height:1.25}
      .g-pop{position:fixed;left:18px;bottom:86px;z-index:81;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(20,14,6,.28);padding:18px 20px;max-width:320px;display:none}
      .g-pop.open{display:block}
      .g-pop h3{font-size:1.05rem;margin-bottom:6px;font-family:"Manrope",sans-serif;font-weight:800}
      .g-pop p{margin:0 0 12px;font-size:.9rem;color:var(--ink-soft)}
      .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:90;background:var(--dark);color:var(--dark-ink);padding:11px 20px;border-radius:999px;font-weight:700;font-size:.9rem;display:none;box-shadow:var(--shadow)}
      .toast.show{display:block}


      /* Mechanism pills on product cards */
      .mech-row{display:flex;flex-wrap:wrap;gap:6px}
      .mech{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--gold);color:var(--accent-strong);border-radius:999px;padding:4px 10px;background:var(--accent-soft)}
      .mech.smart{border-color:var(--dark);background:var(--dark);color:var(--gold-bright)}
      .card .how{font-size:.88rem;color:var(--ink-soft);margin:0}
      .card .how strong{color:var(--ink)}

      /* Smart automation band */
      .smart-band{background:var(--dark);color:var(--dark-ink);border-radius:var(--radius);padding:40px 42px;box-shadow:var(--shadow)}
      .smart-band h3{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:10px;color:#fff}
      .smart-band h3 em{font-style:italic;color:var(--gold-bright)}
      .smart-band p{color:#e2edf6;margin:0 0 14px;max-width:68ch}
      .smart-band .tag{border-color:var(--gold);color:var(--gold-bright)}
      .platform-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px}
      .platform{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#0d1f31;border-radius:10px;padding:10px 18px 10px 12px;font-weight:800;font-size:.95rem;line-height:1.2}
      .platform small{display:block;font-weight:600;color:#5c5342;font-size:.72rem;letter-spacing:.04em}
      .platform .plogo{width:34px;height:34px;flex:none;display:grid;place-items:center}
      .platform .plogo svg{width:32px;height:32px}
      .smart-points{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px;font-size:.9rem;font-weight:700;color:#d7e6f2}
      .smart-points span{display:inline-flex;gap:8px;align-items:center}
      .smart-points svg{width:16px;height:16px;color:var(--gold-bright);flex:none}
      .smart-note{font-size:.78rem;color:#c3d5e6;margin-top:14px}
      @media (max-width:640px){.smart-band{padding:28px 22px}.platform{flex:1 1 100%}}

      /* ===== Multi-page views (hash routed) ===== */
      .page{display:none}
      .page.active{display:block}
      .page-hero{background:var(--dark);color:var(--dark-ink);padding:64px 0 54px}
      .page-hero h1,.page-hero h2{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:12px}
      .page-hero h1 em,.page-hero h2 em{font-style:italic;color:var(--gold-bright)}
      .page-hero p{color:#e2edf6;max-width:62ch;margin:0;font-size:1.05rem}
      .page-hero .tag{border-color:var(--gold);color:var(--gold-bright)}
      .crumbs{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px}
      .crumbs a{color:var(--accent-strong);text-decoration:none}
      .detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:38px 0;border-bottom:1px solid var(--line)}
      .detail:last-child{border-bottom:none}
      .detail img.photo{width:100%;height:340px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
      .detail h3{font-size:1.9rem;margin-bottom:10px}
      .detail p{color:var(--ink-soft);margin:0 0 14px}
      .spec{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:.93rem}
      .spec th{text-align:left;padding:9px 12px;background:var(--accent-soft);color:var(--ink);font-weight:800;width:38%;border:1px solid var(--line);vertical-align:top}
      .spec td{padding:9px 12px;border:1px solid var(--line);color:var(--ink-soft)}
      .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
      .rev-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
      .rev-card .stars{color:var(--gold);letter-spacing:3px;margin-bottom:10px}
      .rev-card p{margin:0 0 12px;color:var(--ink-soft);font-size:.95rem}
      .rev-card strong{font-size:.95rem}
      .rev-card small{display:block;color:var(--ink-soft);font-weight:600;margin-top:2px}
      .two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
      .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
      .panel h3{font-size:1.35rem;margin-bottom:12px}
      .panel ul{margin:0;padding-left:20px;color:var(--ink-soft);display:grid;gap:8px}
      .social-row{display:flex;flex-wrap:wrap;gap:12px}
      .social-btn{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px 10px 12px;text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem;box-shadow:var(--shadow)}
      .social-btn:hover{border-color:var(--accent);color:var(--accent-strong)}
      .social-btn .sic{width:32px;height:32px;border-radius:50%;background:var(--dark);color:var(--gold-bright);display:grid;place-items:center;flex:none}
      .social-btn .sic svg{width:16px;height:16px}
      .social-btn small{display:block;font-weight:600;color:var(--ink-soft);font-size:.72rem;line-height:1.2}
      .nav-links a[aria-current="page"]{color:var(--accent-strong);border-bottom:2px solid var(--gold);padding-bottom:3px}
      @media (max-width:960px){.detail,.two-col{grid-template-columns:1fr}.rev-grid{grid-template-columns:repeat(2,1fr)}.detail img.photo{height:280px}}
      @media (max-width:640px){.rev-grid{grid-template-columns:1fr}}
      @media (max-width:1100px){
        /* Tablet widths: tighten the header so logo + one-line brand
           lockup + navigation + booking button always sit comfortably
           on a single row without crowding or wrapping. */
        .nav{gap:14px}
        .nav-links{gap:17px}
        .nav-links a{font-size:.74rem;letter-spacing:.1em}
        .brand{gap:11px}
        .brand-name{font-size:1.62rem}
        .brand-tagline{font-size:.5rem;letter-spacing:.21em;gap:6px;margin-top:5px}
        .logo-mark{width:52px;height:52px}
        .nav .btn{padding:12px 22px;font-size:.86rem}
      }
      @media (max-width:900px){
        /* Below 900px the full menu no longer fits beside the brand
           lockup and booking button on one line — switch to the same
           tidy dropdown menu used on phones, so the header stays clean
           and nothing ever squeezes or wraps at tablet widths. */
        .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 20px 20px;gap:14px;box-shadow:0 18px 30px rgba(18,37,57,.12)}
        .nav-links.open{display:flex}
        header.site .wrap{position:relative}
        .menu-btn{display:block}
        .nav-links .nav-cta{display:inline-flex;margin-top:10px;background:var(--dark);color:var(--dark-ink);border:1px solid var(--dark);border-radius:999px;padding:13px 26px;letter-spacing:.05em;text-transform:none;font-size:.9rem;font-weight:700;box-shadow:0 6px 16px rgba(51,83,110,.16)}
      }
      @media (max-width:960px){
        .grid,.svc-grid{grid-template-columns:repeat(2,1fr)}
        .steps{grid-template-columns:repeat(2,1fr)}
        .hero-grid{grid-template-columns:1fr}
        .hero-copy{padding:44px 20px 30px}
        .hero-media{min-height:0;height:auto;padding:2px 20px 34px}
        .split,.contact-grid{grid-template-columns:1fr}
        .split img.photo{height:300px}
        .foot-grid{grid-template-columns:1fr 1fr}
      }
      @media (max-width:640px){
        section{padding:54px 0}
        .grid,.svc-grid{grid-template-columns:1fr}
        .steps{grid-template-columns:1fr}
        .frow{grid-template-columns:1fr}
        /* Mobile-first polish — big tap targets, full-width actions,
           nothing squeezed, nothing sideways. */
        .btn{min-height:48px;justify-content:center}
        .hero-ctas{flex-direction:column;align-items:stretch}
        .hero-ctas .btn{width:100%}
        .hero-copy h1{font-size:2.55rem}
        .hero-points{gap:8px 18px;font-size:.86rem}
        .hero-smart-chip{top:10px;right:10px;font-size:.72rem;padding:7px 12px}
        .hero-badge{left:10px;bottom:10px;padding:10px 13px;font-size:.8rem;max-width:calc(100% - 20px)}
        .hero-caption{font-size:.88rem}
        .page-hero{padding:44px 0 38px}
        .page-hero h1,.page-hero h2{font-size:2.3rem}
        .chip{min-height:44px;padding:10px 16px}
        .nav-links a{padding:10px 4px;width:100%}
        .menu-btn{min-width:48px;min-height:48px;display:grid;place-items:center}
        .win{height:300px}
        .demo-tab{flex:1 1 auto;min-height:44px}
        .opt-btn{min-height:44px}
        .seg-row{width:100%}
        .seg-btn{flex:1 1 0;min-height:44px;padding:10px 8px;white-space:normal}
        .spec th,.spec td{display:block;width:100%}
        .spec th{border-bottom:none;padding-bottom:4px}
        .spec td{border-top:none;padding-top:2px}
        .ccard{padding:18px}
        .social-btn{flex:1 1 100%}
        .foot-grid{grid-template-columns:1fr}
        form.quote{padding:22px 18px}
        .rating-score{font-size:3.4rem}
        .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 20px 20px;gap:14px}
        .nav-links.open{display:flex}
        header.site .wrap{position:relative}
        .menu-btn{display:block}
        .nav .btn{display:none}
        .brand{gap:10px}
        .brand-name{font-size:1.42rem}
        .brand-tagline{font-size:.46rem;letter-spacing:.17em;gap:5px;margin-top:4px}
        footer .brand-name{font-size:1.55rem}
        footer .brand-tagline{font-size:.5rem;letter-spacing:.2em}
        .logo-mark{width:48px;height:48px}
        .nav-links .nav-cta{display:inline-flex;margin-top:10px;background:var(--dark);color:var(--dark-ink);border:1px solid var(--dark);border-radius:999px;padding:13px 26px;letter-spacing:.05em;text-transform:none;font-size:.9rem;font-weight:700;box-shadow:0 6px 16px rgba(51,83,110,.16)}
        .page-ctas .btn{flex:1 1 auto;justify-content:center}
        .nav{padding:14px 0}
        .g-widget{left:12px;bottom:86px;padding:8px 14px 8px 9px;font-size:.85rem}
        .g-pop{left:12px;bottom:150px}
        /* g-reviews-float mobile rules are with its component above */
        .rating-block{padding:24px}
      }
      @media (prefers-reduced-motion: reduce){
        html{scroll-behavior:auto}
        .btn,.foot-book,.foot-socials a,.menu-btn{transition:none}
        .btn:hover,.foot-book:hover,.foot-socials a:hover{transform:none}
      }