/* =========================================================
   Everstone UPVC: site styles (v2, photo-led and animated)
   Brand: teal + sash pink from the Everstone logo
   ========================================================= */

:root {
  --ink: #0B2425;
  --ink-2: #103335;
  --teal: #0D4F52;
  --teal-2: #13696D;
  --teal-soft: #E6F1F0;
  --pink: #E85D8A;
  --pink-light: #F7A1BF;
  --pink-deep: #C93A6E;
  --pink-deeper: #AE2E5C;
  --wa: #0F8A45;
  --wa-deep: #0B7039;
  --gold: #F5B301;

  --text: #1B2B2C;
  --muted: #5A6B6C;
  --line: #E1E9E8;
  --bg: #FFFFFF;
  --bg-soft: #F3F7F6;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo-font: Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 36px);
  --section: clamp(76px, 9vw, 124px);
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-sm: 0 2px 8px rgba(11, 36, 37, 0.06);
  --shadow: 0 18px 50px -20px rgba(11, 36, 37, 0.28);
  --shadow-lg: 0 30px 80px -30px rgba(11, 36, 37, 0.45);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--teal); text-underline-offset: 3px; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; position: relative; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.2rem); color: var(--text); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 2000; background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.ico { width: 1.2em; height: 1.2em; flex: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.95rem; font-weight: 700; color: var(--pink-deep); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow-light { color: var(--pink-light); }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p:last-child { color: var(--muted); font-size: 1.1rem; margin: 0; }
.section-head.light h2 { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 50px; padding: 0.8em 1.5em; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn::after { /* shine sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { min-height: 58px; padding: 0.9em 1.8em; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-pink { background: var(--pink-deep); color: #fff; box-shadow: 0 12px 28px -12px rgba(201, 58, 110, 0.7); }
.btn-pink:hover { background: var(--pink-deeper); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; box-shadow: 0 12px 28px -14px rgba(13, 79, 82, 0.8); }
.btn-teal:hover { background: var(--ink-2); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 12px 28px -14px rgba(15, 138, 69, 0.8); }
.btn-wa:hover { background: var(--wa-deep); color: #fff; }
.btn-glass { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-glass:hover { background: #fff; color: var(--ink); }
.btn-glass .ico { transition: transform 0.25s var(--ease); }
.btn-glass:hover .ico { transform: translateX(4px); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: #fff; }

/* ---------- Page entrance: the header logo pops in (the full-screen intro was removed for a fast first paint) ---------- */
.is-ready .brand-mark { animation: markIn 0.9s var(--ease) both; }
@keyframes markIn { from { transform: scale(0.45) rotate(-14deg); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: background-color 0.35s, box-shadow 0.35s, transform 0.35s; }
/* Scrolled header: dark frosted glass, so the white text and icons never need to switch colour */
.site-header.scrolled, .site-header.nav-open {
  background: var(--g-noise), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)), rgba(6, 20, 21, 0.56);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.site-header.nav-open { background-color: rgba(6, 20, 21, 0.8); }
.scroll-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); transform-origin: left; transform: scaleX(0); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 84px; transition: min-height 0.35s; }
.scrolled .header-inner { min-height: 70px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand-mark { width: 46px; height: 40px; color: var(--pink); transition: transform 0.4s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand-text { display: grid; line-height: 1.12; font-family: var(--logo-font); }
.brand-name { font-size: 1.25rem; font-weight: 700; color: #fff; transition: color 0.35s; }
.brand-sub { font-size: 0.98rem; color: rgba(255, 255, 255, 0.78); transition: color 0.35s; }

.site-nav { display: flex; gap: 30px; margin-left: auto; }
.site-nav a { position: relative; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 8px 0; transition: color 0.3s; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); }
.site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-cta-mobile { display: none; }
/* One small "Login / Sign up" pill in the header; the portal page handles partners, sign-up and the head admin */
.header-login { display: inline-block; line-height: 36px; padding: 0 16px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem; white-space: nowrap; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 0.3s; }
.header-login:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
@media (max-width: 1200px) { .header-login .hl-extra { display: none; } }
@media (max-width: 760px) { .header-login { line-height: 34px; padding: 0 14px; font-size: 0.85rem; } .header-actions .header-phone { display: none; } }
/* The phone shows as an icon (it still calls), so the header has room for the login pill */
.header-actions .header-phone .header-phone-text { display: none; }
.header-inner .site-nav { gap: 22px; }
.site-header .header-inner { gap: 22px; }
@media (max-width: 1100px) { .header-inner .site-nav { gap: 12px; } .header-inner .site-nav a { font-size: 0.9rem; } .site-header .header-inner { gap: 18px; } }
@media (max-width: 400px) { .site-header .brand-sub { display: none; } .site-header .brand-name { font-size: 1rem; } .site-header .header-inner { gap: 8px; } .site-header .brand { gap: 8px; } }
@media (max-width: 340px) { .site-header .brand-mark { width: 30px; height: 26px; } .site-header .brand-name { font-size: 0.92rem; } .site-header .header-login { padding: 0 10px; } .site-header .menu-toggle { width: 40px; height: 40px; } }
@media (max-width: 1060px) { .header-inner .site-nav { gap: 10px; } .header-inner .site-nav a { font-size: 0.86rem; } .site-header .header-inner { gap: 14px; } }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; transition: color 0.3s; }
.header-phone-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); transition: background-color 0.3s, border-color 0.3s; }
.header-phone-icon svg { width: 18px; height: 18px; }
.header-phone-text { display: grid; line-height: 1.15; font-size: 1rem; }
.header-phone-text small { font-size: 0.75rem; font-weight: 500; opacity: 0.8; }
.btn-header { min-height: 46px; padding: 0.6em 1.3em; }

.menu-toggle { display: none; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.15); cursor: pointer; place-items: center; }
.scrolled .menu-toggle, .nav-open .menu-toggle { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; content: ""; transition: transform 0.25s, background-color 0.25s; }
.menu-bars { position: relative; }
.menu-bars::before { position: absolute; top: -6px; }
.menu-bars::after { position: absolute; top: 6px; }
.nav-open .menu-bars { background: transparent !important; }
.nav-open .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero slider ---------- */
.hero { position: relative; min-height: max(640px, 100svh); display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--ink); }
.hero-slides, .hero-slide, .hero-shade { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.hero.cycled .hero-slide.is-active img { animation: kenburns 8s ease-out forwards; }
.hero-slide-real img { object-position: center 52%; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.0); } }
.hero-shade {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(6, 22, 23, 0.9) 0%, rgba(6, 22, 23, 0.66) 38%, rgba(6, 22, 23, 0.18) 72%, rgba(6, 22, 23, 0.08) 100%),
    linear-gradient(0deg, rgba(6, 22, 23, 0.65) 0%, rgba(6, 22, 23, 0) 35%),
    linear-gradient(180deg, rgba(6, 22, 23, 0.5) 0%, rgba(6, 22, 23, 0) 22%);
}
.hero-content { position: relative; z-index: 3; padding-top: 120px; padding-bottom: 150px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; font-size: 0.95rem; margin-bottom: 24px; }
.hero-kicker svg { width: 16px; height: 16px; color: var(--pink-light); }
.hero-title { color: #fff; font-size: clamp(2.6rem, 6.6vw, 5.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 26px; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line > span { display: inline-block; }
.hero-title .accent { background: linear-gradient(90deg, var(--pink-light), var(--pink) 60%, #FFC27A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { max-width: 600px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255, 255, 255, 0.9); margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero-rating { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 16px; border-radius: 16px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color 0.3s, transform 0.3s var(--ease); }
.hero-rating:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); color: #fff; }
.hero-rating-score { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.hero-rating-text { display: block; font-weight: 600; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); }
.stars { display: flex; gap: 3px; color: var(--gold); }
.stars svg { width: 17px; height: 17px; }

/* Hero entrance (starts as soon as the page is ready) */
.js .hero-title .line > span { transform: translateY(110%); }
.js [data-anim] { opacity: 0; transform: translateY(24px); }
.is-ready .hero-title .line > span { animation: lineUp 0.7s var(--ease) forwards; }
.is-ready .hero-title .line:nth-child(2) > span { animation-delay: 0.08s; }
.is-ready .hero-title .line:nth-child(3) > span { animation-delay: 0.16s; }
@keyframes lineUp { to { transform: translateY(0); } }
.is-ready [data-anim] { animation: fadeUp 0.6s var(--ease) forwards; }
.is-ready [data-anim="1"] { animation-delay: 0s; }
.is-ready [data-anim="2"] { animation-delay: 0.2s; }
.is-ready [data-anim="3"] { animation-delay: 0.3s; }
.is-ready [data-anim="4"] { animation-delay: 0.4s; }

.hero-nav { position: absolute; z-index: 4; right: var(--gutter); bottom: 40px; display: flex; gap: 22px; }
.hero-nav button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; width: 150px; padding: 0; background: none; border: 0; color: rgba(255, 255, 255, 0.6); text-align: left; cursor: pointer; transition: color 0.3s; }
.hero-nav button[aria-selected="true"], .hero-nav button:hover { color: #fff; }
.hero-nav .num { font-weight: 800; font-size: 0.9rem; }
.hero-nav .lbl { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.hero-nav .bar { grid-column: 1 / -1; height: 3px; margin-top: 10px; background: rgba(255, 255, 255, 0.25); border-radius: 3px; overflow: hidden; }
.hero-nav .bar span { display: block; height: 100%; width: 100%; background: var(--pink); transform-origin: left; transform: scaleX(0); }
.hero-nav button[aria-selected="true"] .bar span { animation: progress var(--slide-ms, 6500ms) linear forwards; }
.hero-nav.paused button[aria-selected="true"] .bar span { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

.scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 34px; width: 28px; height: 46px; margin-left: -14px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 16px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee { background: var(--ink); color: #fff; overflow: hidden; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; }
.marquee svg { width: 30px; height: 26px; color: var(--pink); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats { background: var(--bg); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(32px, 4vw, 52px) 20px; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px; background: var(--line); }
.stat-num { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--teal); margin: 0 0 8px; letter-spacing: -0.03em; }
.stat-num small { font-size: 0.45em; margin-left: 4px; color: var(--pink-deep); }
.stat-num { font-variant-numeric: tabular-nums; }
.stat-num::after { content: ""; }
.stat-label { margin: 0; color: var(--muted); font-weight: 600; }

/* ---------- About ---------- */
.about { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-media { position: relative; padding: 0 8% 70px 0; }
.about-img-main { margin: 0; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 4.4; }
.about-img-main img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.about-img-small { position: absolute; margin: 0; right: 0; bottom: 0; width: 52%; border-radius: 20px; overflow: hidden; border: 8px solid #fff; box-shadow: var(--shadow-lg); aspect-ratio: 5 / 4; }
.about-img-small img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.about-img-small:hover img { transform: scale(1.08); }
.about-badge { position: absolute; left: -18px; top: 36px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); font-size: 0.95rem; line-height: 1.3; animation: floaty 5s ease-in-out infinite; }
.about-badge-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--pink-deep); color: #fff; }
.about-badge-icon svg { width: 22px; height: 22px; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.about-copy h2 { margin-bottom: 22px; }
.about-copy > p { color: var(--muted); }
.about-copy .lead { color: var(--text); }
.checks { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.checks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.checks svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); }
.checks strong { display: block; color: var(--ink); }
.checks span { color: var(--muted); font-size: 0.95rem; }
.about-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Products ---------- */
.products { background: var(--bg); }
.filters { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(32px, 4vw, 48px); padding: 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { position: relative; z-index: 1; padding: 11px 22px; border: 0; background: none; border-radius: 999px; font-weight: 700; font-size: 0.98rem; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color 0.3s; }
.filters button:hover { color: var(--ink); }
.filters button[aria-selected="true"] { color: #fff; }
.filter-pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: 60px; border-radius: 999px; background: var(--teal); box-shadow: 0 8px 20px -8px rgba(13, 79, 82, 0.8); transition: left 0.45s var(--ease), width 0.45s var(--ease); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s; }
.product:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.product.is-hidden { display: none; }
.product.pop { animation: pop 0.55s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.product-media { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-soft); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.product:hover .product-media img { transform: scale(1.09); }
.product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 36, 37, 0.45), transparent 50%); opacity: 0; transition: opacity 0.4s; }
.product:hover .product-media::after { opacity: 1; }
.product-chip { position: absolute; z-index: 1; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--teal); font-size: 0.8rem; font-weight: 700; backdrop-filter: blur(6px); }
.product-zoom { position: absolute; z-index: 1; right: 14px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); opacity: 0; transform: scale(0.6); transition: opacity 0.35s, transform 0.35s var(--ease); }
.product-zoom svg { width: 20px; height: 20px; }
.product:hover .product-zoom, .product-media:focus-visible .product-zoom { opacity: 1; transform: none; }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.product-body h3 { margin-bottom: 8px; }
.product-body p { color: var(--muted); font-size: 0.97rem; margin-bottom: 14px; }
.tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 0.8rem; font-weight: 600; color: var(--teal); background: var(--teal-soft); padding: 5px 10px; border-radius: 999px; }
.product-quote { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--pink-deep); font-weight: 700; cursor: pointer; }
.product-quote svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.product-quote:hover svg { transform: translateX(5px); }
.products-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 44px; padding: 26px 30px; border-radius: var(--radius); background: var(--teal-soft); }
.products-cta p { margin: 0; font-size: 1.08rem; }

/* Products showroom styles (green glass, cutouts on plinths) are at the end of this file */

/* ---------- Colour swatches (drawn in CSS; shades are approximate) ---------- */
.wood {
  background-image:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.16) 0 1.5px, transparent 1.5px 6px, rgba(255, 255, 255, 0.07) 6px 7.5px, transparent 7.5px 13px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 17px),
    linear-gradient(100deg, var(--l) 0%, var(--c) 35%, var(--d) 68%, var(--c) 100%);
}
.smooth { background-image: linear-gradient(145deg, var(--l) 0%, var(--c) 48%, var(--d) 100%); }
/* Solid colours */
.sw-milky-white  { --c: #FBF8F5; --l: #FFFFFF; --d: #E4DFDA; }
.sw-blue-white   { --c: #EBF3FC; --l: #FFFFFF; --d: #CFDEF0; }
.sw-ivory-white  { --c: #F9F1E7; --l: #FFFDF8; --d: #E6D8C5; }
.sw-black        { --c: #161814; --l: #30322E; --d: #090A08; }
.sw-grey         { --c: #3C4853; --l: #58656F; --d: #29323A; }
.sw-coffee-brown { --c: #481F14; --l: #66311F; --d: #2E120B; }
/* Wood-finish lamination */
.sw-golden-oak   { --c: #B5651D; --l: #D3893F; --d: #874511; }
.sw-walnut       { --c: #4E2E1E; --l: #6B4430; --d: #321A0F; }
.sw-mahogany     { --c: #6A1E19; --l: #8C2D24; --d: #45100C; }

/* Colour dots on each product card */
.colour-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 18px; }
.colour-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.colour-dots { display: flex; gap: 7px; }
.dot { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.dot:hover { transform: scale(1.15); }
.dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pink-deep); transform: scale(1.12); }
.colour-name { font-size: 0.85rem; font-weight: 700; color: var(--pink-deep); min-height: 1.2em; }

/* Colour options section */
.colours { background: var(--ink); color: #D7E6E5; overflow: hidden; }
.colours::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 93, 138, 0.16), transparent 65%); pointer-events: none; }
.colours .section-head h2 { color: #fff; }
.colours .section-head p:last-child { color: #A9C2C1; }
.colour-group-title { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font-size: 1.3rem; color: #fff; }
.colour-group-title::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.14); }
.shade-grid { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-bottom: 48px; }

/* A colour card: photo of a frame corner in that colour, swatch, name and a short line */
.shade { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #fff; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.8); transition: transform 0.45s var(--ease), box-shadow 0.45s; }
.shade:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -20px rgba(0, 0, 0, 0.9); }
.shade[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--pink), 0 26px 44px -20px rgba(0, 0, 0, 0.9); }
.shade-photo { position: relative; display: block; aspect-ratio: 1.85; overflow: hidden; background: #E9EEED; }
.shade-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.shade:hover .shade-photo img { transform: scale(1.08); }
.shade-photo::after { /* glossy sweep on hover */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 46%, transparent 60%);
  transform: translateX(-110%); transition: transform 0.9s var(--ease);
}
.shade:hover .shade-photo::after { transform: translateX(110%); }
.shade-text { position: relative; display: grid; gap: 2px; padding: 14px 14px 16px 68px; min-height: 74px; align-content: center; }
.shade-dot { position: absolute; left: 12px; top: -20px; width: 46px; height: 46px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.shade-name { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.shade-type { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.shade-check { position: absolute; z-index: 2; right: 10px; top: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pink-deep); color: #fff; opacity: 0; transform: scale(0.5); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.shade-check svg { width: 16px; height: 16px; }
.shade[aria-pressed="true"] .shade-check { opacity: 1; transform: none; }
/* Starting price, on a small glass pill over the photo */
.shade-price {
  position: absolute; z-index: 2; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(11, 36, 37, 0.6); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: #fff; font-size: 0.8rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.35s var(--ease);
}
.shade-price em, .shade-price small { font-style: normal; font-weight: 600; opacity: 0.85; }
.shade-price em { margin-right: 3px; }
.shade-price small { margin-left: 1px; }
.shade:hover .shade-price { transform: translateY(-2px); }
@media (max-width: 640px) {
  /* Two narrow cards per row: keep the pill clear of the selected tick */
  .shade-price { left: 7px; top: 7px; padding: 4px 8px; font-size: 0.7rem; }
}

/* Lamination: benefits panel and three wide wood-finish cards */
.lam-wrap { position: relative; display: grid; grid-template-columns: 0.95fr 1fr 1fr 1fr; gap: 18px; align-items: stretch; }
.lam-info { padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.lam-info h3 { color: #fff; font-size: 1.3rem; margin-bottom: 6px; }
.lam-info > p { color: #A9C2C1; font-size: 0.92rem; margin-bottom: 16px; }
.lam-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.lam-benefits li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 0.88rem; font-weight: 700; line-height: 1.25; }
.lam-benefits svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--pink-light); }
.shade-lam .shade-photo { flex: 1; aspect-ratio: auto; min-height: 170px; }
.shade-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; color: #fff; }
.shade-band .shade-name { font-size: 1.1rem; white-space: nowrap; }
.shade-band .shade-type { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; text-align: right; }
.colours-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding: 20px 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.colours-foot p { margin: 0; color: #C6D9D8; }

/* Toast */
.toast { position: fixed; z-index: 1100; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6); transform: translate(-50%, 140%); opacity: 0; visibility: hidden; transition: transform 0.45s var(--ease), opacity 0.3s, visibility 0s linear 0.45s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 0.45s var(--ease), opacity 0.3s; }
.toast a { color: var(--pink-light); font-weight: 800; text-decoration: none; white-space: nowrap; }

/* ---------- UPVC profile series ---------- */
.series { background: var(--bg); }
.series-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.series-card { grid-column: span 2; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.series-wide { grid-column: span 3; }
.series-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.series-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E9EEED; }
.series-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.series-card:hover .series-media img { transform: scale(1.06); }
.series-size { position: absolute; left: 14px; top: 14px; display: flex; align-items: baseline; padding: 9px 14px; border-radius: 12px; background: rgba(11, 36, 37, 0.85); backdrop-filter: blur(6px); color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.series-size small { margin-left: 3px; font-size: 0.75rem; color: var(--pink-light); }
.series-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.series-type { margin: 0 0 4px; color: var(--pink-deep); font-weight: 700; font-size: 0.85rem; }
.series-body h3 { margin-bottom: 8px; }
.series-body p:not(.series-type) { color: var(--muted); font-size: 0.96rem; }
.series-body .product-quote { margin-top: auto; }

/* ---------- Solar control glass ---------- */
.solar { background: var(--ink); color: #D7E6E5; overflow: hidden; }
.solar-glow { position: absolute; inset: -20%; background: radial-gradient(circle at 22% 40%, rgba(255, 166, 77, 0.28), transparent 38%), radial-gradient(circle at 85% 80%, rgba(232, 93, 138, 0.18), transparent 40%); animation: glow 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(4%, -3%) scale(1.08); } }
.solar-grid { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.phone { position: relative; width: min(100%, 320px); margin: 0 auto; padding: 12px; border-radius: 44px; background: linear-gradient(145deg, #2A3A3B, #0C1515); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; animation: floaty 6s ease-in-out infinite; }
.phone::before { content: ""; position: absolute; z-index: 2; top: 22px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 20px; background: #0C1515; }
.phone-screen { border-radius: 34px; overflow: hidden; background: #000; }
.phone-screen video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.solar-copy h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.solar-copy .lead { color: #C6D9D8; max-width: 56ch; }
.solar-points { list-style: none; margin: 30px 0; padding: 0; display: grid; gap: 16px; }
.solar-points li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.3s, transform 0.3s var(--ease); }
.solar-points li:hover { background: rgba(255, 255, 255, 0.09); transform: translateX(6px); }
.sp-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #FFB25B, var(--pink)); color: #fff; }
.sp-icon svg { width: 28px; height: 28px; }
.solar-points strong { display: block; color: #fff; font-size: 1.05rem; }
.solar-points span span, .solar-points li > span:last-child { color: #A9C2C1; font-size: 0.95rem; }
.solar-uses { color: #A9C2C1; }

/* ---------- Our work (real installations) ---------- */
.work { background: var(--bg-soft); }
.work-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  grid-template-areas:
    "a b c c"
    "a b d e"
    "f f g h";
}
.t-a { grid-area: a; } .t-b { grid-area: b; } .t-c { grid-area: c; } .t-d { grid-area: d; }
.t-e { grid-area: e; } .t-f { grid-area: f; } .t-g { grid-area: g; } .t-h { grid-area: h; }
.work-tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #D6DEDD; cursor: zoom-in; isolation: isolate; box-shadow: var(--shadow-sm); transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease); }
.work-tile:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.work-tile img, .work-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.work-tile:hover img, .work-tile:hover video { transform: scale(1.07); }
.t-f img { object-position: center 58%; }
.work-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(6, 22, 23, 0.82) 0%, rgba(6, 22, 23, 0.25) 38%, rgba(6, 22, 23, 0) 60%); transition: opacity 0.4s; }
.work-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 16px 18px; color: #fff; text-align: left; line-height: 1.35; }
.work-cap strong { display: block; font-size: 1.02rem; }
.work-cap span { display: block; font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s var(--ease), opacity 0.4s; }
.work-tile:hover .work-cap span, .work-tile:focus-visible .work-cap span, .work-video .work-cap span { max-height: 3em; opacity: 1; }

/* ---------- Gallery slideshow ---------- */
.gallery { background: var(--bg); }
.slideshow { max-width: 1100px; margin: 0 auto; }
.ss-stage { position: relative; aspect-ratio: 16 / 8.6; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); isolation: isolate; }
.ss-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.9s ease; }
.ss-slide.is-active { opacity: 1; z-index: 1; }
/* Blurred copy of the photo fills the frame, so tall and small photos never leave empty bars */
.ss-slide::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat; filter: blur(28px) brightness(0.55) saturate(1.15); }
.ss-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; transform: scale(1.05); transition: transform 6s ease-out; }
.ss-slide.is-active img { transform: scale(1); }
.ss-slide figcaption { position: absolute; z-index: 2; left: 20px; bottom: 22px; max-width: calc(100% - 40px); padding: 10px 16px; border-radius: 12px; background: rgba(11, 36, 37, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-weight: 700; opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease 0.3s, transform 0.6s var(--ease) 0.3s; }
.ss-slide.is-active figcaption { opacity: 1; transform: none; }
.ss-arrow { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease); }
.ss-arrow:hover { background: var(--teal); color: #fff; transform: scale(1.08); }
.ss-arrow svg { width: 24px; height: 24px; }
.ss-prev { left: 16px; }
.ss-next { right: 16px; }
.ss-meta { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; }
.ss-count { padding: 8px 14px; border-radius: 999px; background: rgba(11, 36, 37, 0.62); backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ss-count strong { color: #fff; }
.ss-play { position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 36, 37, 0.62); backdrop-filter: blur(8px); cursor: pointer; }
.ss-pause-icon, .ss-pause-icon::after { position: absolute; top: 12px; left: 13px; width: 4px; height: 14px; border-radius: 1px; background: #fff; content: ""; }
.ss-pause-icon::after { top: 0; left: 8px; }
.ss-play[aria-pressed="false"] .ss-pause-icon { left: 15px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.ss-play[aria-pressed="false"] .ss-pause-icon::after { display: none; }
.ss-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.15); }
.ss-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); transform-origin: left; transform: scaleX(0); }
.ss-progress span.run { animation: progress var(--ss-ms, 4500ms) linear forwards; }
.ss-thumbs { display: flex; gap: 10px; margin-top: 14px; padding: 4px 2px 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.ss-thumb { flex: none; width: 96px; height: 66px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--bg-soft); opacity: 0.6; cursor: pointer; transition: opacity 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-thumb:hover { opacity: 1; transform: translateY(-2px); }
.ss-thumb[aria-selected="true"] { opacity: 1; border-color: var(--pink-deep); }

/* ---------- Why us ---------- */
.why { background: var(--bg); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { position: relative; padding: 34px 30px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background-color 0.45s; }
.why-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--teal), var(--pink)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.why-card:hover::before { transform: scaleX(1); }
.why-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; background: var(--teal-soft); color: var(--teal); transition: background-color 0.4s, color 0.4s, transform 0.5s var(--ease); }
.why-icon svg { width: 32px; height: 32px; }
.why-card:hover .why-icon { background: var(--teal); color: #fff; transform: rotate(-8deg) scale(1.05); }
.why-card p { color: var(--muted); margin: 0; }

/* ---------- Warranty band ---------- */
.warranty-band { position: relative; padding: var(--section) 0; overflow: hidden; color: #fff; background: var(--ink); }
.warranty-bg { position: absolute; inset: 0; }
.warranty-bg img { width: 100%; height: 125%; object-fit: cover; opacity: 0.28; will-change: transform; }
.warranty-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(11, 36, 37, 0.92), rgba(13, 79, 82, 0.75)); }
.warranty-band .wrap { position: relative; z-index: 2; }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ring { position: relative; text-align: center; }
.ring svg { width: min(100%, 180px); margin: 0 auto; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: rgba(255, 255, 255, 0.14); }
.ring-fill { stroke: var(--pink); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 2s var(--ease) 0.3s; }
.ring.is-in .ring-fill { stroke-dashoffset: calc(326.7 * (1 - var(--p))); }
.ring-num { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 180px); display: grid; place-content: center; margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1; }
.ring-num small { display: block; font-size: 0.9rem; font-weight: 600; color: #BFD3D2; margin-top: 6px; }
.ring-label { margin: 18px 0 0; font-weight: 700; font-size: 1.05rem; }
.delivery-pill { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 10px; margin: 48px auto 0; padding: 14px 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); }
.delivery-pill svg { width: 22px; height: 22px; color: var(--pink-light); flex: none; }

/* ---------- Process timeline ---------- */
.process { background: var(--bg-soft); }
.timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 3px; border-radius: 3px; background: var(--line); }
.timeline::after { background: linear-gradient(90deg, var(--teal), var(--pink)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); }
.timeline.is-in::after { transform: scaleX(1); }
.timeline li { position: relative; z-index: 1; text-align: center; }
.t-num { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 3px solid var(--teal); color: var(--teal); font-weight: 800; font-size: 1.4rem; box-shadow: 0 0 0 8px var(--bg-soft); transition: transform 0.6s var(--ease), background-color 0.4s, color 0.4s; }
.js .timeline .t-num { transform: scale(0); }
.timeline.is-in .t-num { transform: scale(1); }
.timeline.is-in li:nth-child(2) .t-num { transition-delay: 0.3s; }
.timeline.is-in li:nth-child(3) .t-num { transition-delay: 0.6s; }
.timeline.is-in li:nth-child(4) .t-num { transition-delay: 0.9s; }
.timeline.is-in li:nth-child(5) .t-num { transition-delay: 1.2s; }
.timeline li:hover .t-num { background: var(--teal); color: #fff; }
.timeline h3 { font-size: 1.12rem; margin-bottom: 6px; }
.timeline p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 150px) 0; color: #fff; text-align: center; background: var(--ink); }
.cta-bg { position: absolute; inset: 0; }
.cta-bg img { width: 100%; height: 125%; object-fit: cover; will-change: transform; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(11, 36, 37, 0.9), rgba(13, 79, 82, 0.72) 55%, rgba(201, 58, 110, 0.55)); }
.cta-inner { position: relative; z-index: 2; max-width: 820px; }
.cta-band h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cta-band p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 34px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- Contact ---------- */
.contact { background: var(--bg-soft); }
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.quote-card { padding: clamp(26px, 4vw, 44px); border-radius: 26px; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.quote-card h2, .visit h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.quote-intro { color: var(--muted); }
.field { margin-top: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 7px; color: var(--ink); }
.field .opt { font-weight: 500; color: var(--muted); }
.field input, .field select { width: 100%; min-height: 52px; padding: 12px 14px; font: 500 1rem/1.4 var(--font); color: var(--text); background: var(--bg-soft); border: 2px solid transparent; border-radius: 12px; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.field input::placeholder { color: #8A9A9A; }
.field input:hover, .field select:hover { border-color: var(--line); }
.field input:focus, .field select:focus { outline: none; background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13, 79, 82, 0.12); }
.field [aria-invalid="true"] { border-color: #C0362C; background: #FFF6F5; }
.field-error { color: #B42318; font-size: 0.9rem; font-weight: 600; margin: 6px 0 0; }
.quote-card .btn-block { margin-top: 26px; }
.form-alt { margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; text-align: center; }
.visit .map { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 22px; border: 6px solid #fff; }
.map iframe { display: block; width: 100%; aspect-ratio: 16 / 11; border: 0; }
.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-card { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 0.93rem; line-height: 1.45; transition: transform 0.35s var(--ease), box-shadow 0.35s; }
a.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--muted); }
.info-card strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.info-card em { display: block; margin-top: 6px; font-style: normal; font-weight: 700; color: var(--pink-deep); }
.info-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); }
.info-icon svg { width: 20px; height: 20px; }
.info-card span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Terms ---------- */
.terms { background: var(--bg-soft); padding: 0 0 var(--section); }
.terms details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 26px; }
.terms summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 22px 40px 22px 0; cursor: pointer; list-style: none; }
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 1.4rem; font-weight: 700; transition: transform 0.3s; }
.terms details[open] summary::after { content: "\2212"; }
#terms-title { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.summary-hint { color: var(--muted); font-size: 0.95rem; }
.terms-list { margin: 0 0 26px; padding-left: 1.3em; color: var(--muted); max-width: 80ch; }
.terms-list li { margin-bottom: 0.6em; padding-left: 0.3em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #A9C2C1; padding: 80px 0 30px; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 93, 138, 0.16), transparent 70%); }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; }
.footer-brand p { margin: 20px 0 22px; max-width: 40ch; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: #A9C2C1; }
.site-footer h2 { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 6px 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #D2E2E1; text-decoration: none; transition: color 0.25s, padding-left 0.25s; }
.site-footer nav a:hover { color: #fff; padding-left: 6px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; margin-top: 4px; flex: none; color: var(--pink-light); }
.footer-contact a:hover { color: #fff; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background-color 0.3s, transform 0.3s var(--ease); }
.socials a:hover { background: var(--pink-deep); transform: translateY(-4px); }
.socials svg { width: 20px; height: 20px; }
.footer-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.92rem; }
.footer-base p { margin: 0; }

/* ---------- Floating actions ---------- */
.float-wa { position: fixed; z-index: 800; right: 26px; bottom: 26px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 14px 30px -10px rgba(15, 138, 69, 0.8); transition: transform 0.3s var(--ease); }
.float-wa:hover { transform: scale(1.08); color: #fff; }
.float-wa svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.float-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
.float-wa-tip { position: absolute; right: 74px; white-space: nowrap; padding: 8px 14px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow); opacity: 0; transform: translateX(10px); transition: opacity 0.3s, transform 0.3s var(--ease); pointer-events: none; }
.float-wa:hover .float-wa-tip { opacity: 1; transform: none; }
.to-top { position: fixed; z-index: 800; right: 33px; bottom: 104px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--teal); box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.35s, transform 0.35s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: var(--pink); stroke-width: 3; stroke-dasharray: 138.2; stroke-dashoffset: var(--ring, 138.2); }
.to-top-arrow { position: relative; width: 22px; height: 22px; margin: 0 auto; }
.mobile-bar { display: none; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.lightbox[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(6, 22, 23, 0.82); backdrop-filter: blur(6px); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.lb-panel { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; width: min(1080px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 24px; background: #fff; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7); animation: lbIn 0.45s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: translateY(30px) scale(0.96); } }
.lb-media { position: relative; background: var(--bg-soft); min-height: 320px; }
.lb-media img { width: 100%; height: 100%; object-fit: cover; }
.lb-media video { display: block; width: 100%; height: min(78vh, 720px); object-fit: contain; background: #000; }
.lb-panel.is-work .lb-media { background: var(--ink); }
.lb-panel.is-work .lb-media img { height: min(78vh, 720px); object-fit: contain; }
.lb-body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.lb-cat { color: var(--pink-deep); font-weight: 700; margin-bottom: 6px; }
.lb-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.lb-body > p:not(.lb-cat) { color: var(--muted); }
.lb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lb-close, .lb-prev, .lb-next { position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; transition: transform 0.25s var(--ease), background-color 0.25s; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--teal); color: #fff; transform: scale(1.06); }
.lb-close svg, .lb-prev svg, .lb-next svg { width: 22px; height: 22px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; margin-top: -23px; }
.lb-next { right: 14px; top: 50%; margin-top: -23px; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transition: opacity 0.9s ease, transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="up"] { transform: translateY(46px); }
.js [data-reveal="left"] { transform: translateX(-60px); }
.js [data-reveal="right"] { transform: translateX(60px); }
.js [data-reveal="zoom"] { transform: scale(0.88); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Side-sliding reveals must never widen the page on phones */
main { overflow-x: hidden; overflow-x: clip; }
@media (max-width: 760px) {
  .js [data-reveal="left"]:not(.is-in), .js [data-reveal="right"]:not(.is-in) { transform: translateY(40px); }
}

/* ---------- Responsive ---------- */
.site-nav a, .header-phone-text, .btn-header { white-space: nowrap; }
@media (max-width: 1300px) {
  .site-nav { gap: 22px; }
  .header-phone-text { display: none; }
}
@media (max-width: 1120px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 0.93rem; }
}

@media (max-width: 1024px) {
  .menu-toggle { display: grid; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; gap: 0; margin: 0;
    padding: 8px var(--gutter) 22px; background: rgba(6, 20, 21, 0.94); border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.6);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .nav-open .site-nav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.45s var(--ease); }
  .site-nav a { color: #fff; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 1.08rem; }
  .site-nav a::after { display: none; }
  .site-nav .nav-cta-mobile { display: flex; justify-content: center; margin-top: 16px; padding: 15px; border: 0; border-radius: 999px; background: var(--pink-deep); color: #fff !important; }
  .header-actions { margin-left: auto; }

  .hero-nav { left: var(--gutter); right: auto; gap: 14px; }
  .hero-nav button { width: 70px; }
  .hero-nav .lbl { display: none; }
  .scroll-cue { display: none; }
  .hero-content { padding-bottom: 120px; }

  .about-grid, .solar-grid, .contact-grid { grid-template-columns: 1fr; }
  .shade-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .lam-wrap { grid-template-columns: repeat(3, 1fr); }
  .lam-info { grid-column: 1 / -1; }
  .lam-benefits { grid-template-columns: repeat(4, 1fr); }
  .about-media { max-width: 640px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; grid-template-areas: "a b" "a b" "c c" "d e" "f f" "g h"; }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .series-card, .series-wide { grid-column: auto; }
  .series-card:last-child { grid-column: 1 / -1; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .rings { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .lb-panel { grid-template-columns: 1fr; }
  .lb-media { min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .btn-header { display: none; }
  .header-inner { min-height: 72px; gap: 12px; }
  .brand-mark { width: 40px; height: 34px; }
  .brand-name { font-size: 1.12rem; }
  .brand-sub { font-size: 0.88rem; }
  .hero-content { padding-top: 110px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .checks { grid-template-columns: 1fr; }
  .about-badge { left: 8px; top: 16px; }
  .timeline { grid-template-columns: 1fr; gap: 26px; padding-left: 4px; }
  .timeline::before, .timeline::after { left: 34px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .timeline::after { transform: scaleY(0); transform-origin: top; }
  .timeline.is-in::after { transform: scaleY(1); }
  .timeline li { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; text-align: left; }
  .t-num { grid-row: span 2; margin: 0; }
  .timeline h3 { align-self: end; margin-top: 6px; }
  .field-row { grid-template-columns: 1fr; }
  .info-cards { grid-template-columns: 1fr; }
  .float-wa { display: none; }
  .to-top { right: 16px; bottom: 82px; }
  .toast { bottom: 78px; width: calc(100% - 32px); justify-content: space-between; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; box-shadow: 0 -10px 30px -12px rgba(11, 36, 37, 0.45); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding-bottom: env(safe-area-inset-bottom); font-weight: 800; font-size: 1.05rem; text-decoration: none; color: #fff; background: var(--teal); }
  .mobile-bar a.wa { background: var(--wa); }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .product-grid, .why-grid, .series-grid { grid-template-columns: 1fr; }
  .work-grid { grid-auto-rows: 170px; gap: 12px; }
  .shade-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .shade-text { padding: 12px 10px 14px 56px; min-height: 68px; }
  .shade-dot { left: 10px; top: -18px; width: 40px; height: 40px; border-width: 3px; }
  .shade-name { font-size: 0.92rem; }
  .shade-type { font-size: 0.74rem; }
  .lam-wrap { grid-template-columns: 1fr; }
  .lam-benefits { grid-template-columns: 1fr 1fr; }
  .ss-stage { aspect-ratio: 4 / 4.6; border-radius: 18px; }
  .ss-arrow { width: 42px; height: 42px; margin-top: -21px; }
  .ss-prev { left: 10px; }
  .ss-next { right: 10px; }
  .ss-slide figcaption { left: 12px; bottom: 16px; max-width: calc(100% - 24px); font-size: 0.9rem; }
  .ss-thumb { width: 72px; height: 52px; }
  .work-cap { padding: 12px 14px; }
  .work-cap strong { font-size: 0.92rem; }
  .lb-media video, .lb-panel.is-work .lb-media img { height: 60vh; }
  .filters { justify-content: flex-start; }
  .filters button { padding: 10px 12px; font-size: 0.9rem; }
  .products-cta { padding: 22px; }
  .rings { gap: 32px 16px; }
  .ring svg { width: min(100%, 140px); }
  .ring-num { height: min(100%, 140px); font-size: 2rem; }
  .ring-label { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal], .js [data-anim] { opacity: 1; transform: none; }
  .js .hero-title .line > span { transform: none; }
  .hero-slide.is-active img, .hero-slide img { animation: none; transform: none; }
  .marquee-track { animation: none; }
  .sec-photo img { transform: none; transition: none; }
}

/* =========================================================
   Photo backgrounds with frosted-glass panels
   (the sections that used to be plain white)
   ========================================================= */
.photo-sec { position: relative; isolation: isolate; }
:root {
  /* Fine grain so the glass reads as frosted rather than flat */
  --g-noise: 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.photo-sec.is-dark {
  background: #0A1F20; color: #E1EEED;
  --g-tint: rgba(8, 24, 25, 0.42);
  --g-fill-a: rgba(255, 255, 255, 0.16); --g-fill-b: rgba(255, 255, 255, 0.03);
  --g-edge-a: rgba(255, 255, 255, 0.62); --g-edge-b: rgba(255, 255, 255, 0.07); --g-edge-c: rgba(255, 255, 255, 0.3);
  --g-hi: rgba(255, 255, 255, 0.16); --g-line: rgba(255, 255, 255, 0.14);
  --g-head: #fff; --g-text: #E6F1F0; --g-muted: #BCD2D1; --g-eyebrow: var(--pink-light);
  --g-chip: rgba(255, 255, 255, 0.12); --g-chip-text: #fff;
  --g-glow: rgba(232, 93, 138, 0.3);
}
.photo-sec.is-light {
  background: #E9EFEE;
  --g-tint: rgba(255, 255, 255, 0.4);
  --g-fill-a: rgba(255, 255, 255, 0.62); --g-fill-b: rgba(255, 255, 255, 0.16);
  --g-edge-a: #fff; --g-edge-b: rgba(255, 255, 255, 0.35); --g-edge-c: rgba(255, 255, 255, 0.92);
  --g-hi: rgba(255, 255, 255, 0.8); --g-line: rgba(255, 255, 255, 0.7);
  --g-head: var(--ink); --g-text: var(--text); --g-muted: #34494A; --g-eyebrow: var(--pink-deep);
  --g-chip: rgba(13, 79, 82, 0.1); --g-chip-text: var(--teal);
  --g-glow: rgba(13, 79, 82, 0.25);
}
/* The quote form is dark glass like the rest, with a slightly deeper tint so the fields read clearly */
.photo-sec .quote-card {
  --g-tint: rgba(6, 20, 21, 0.52);
  --g-fill-a: rgba(255, 255, 255, 0.15); --g-fill-b: rgba(255, 255, 255, 0.025);
  color: var(--g-text);
}

/* The photo sticks to the screen while its section scrolls over it, and settles in with one slow zoom the first time it appears.
   Nothing behind the glass keeps moving, so the blur is worked out once and scrolling stays smooth on 120 Hz screens. */
.sec-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; }
.sec-photo img {
  position: sticky; top: 0; width: 100%; height: 100vh; height: 100lvh; max-width: none; object-fit: cover;
  transform: scale(1.08); transition: transform 2.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.photo-sec.seen .sec-photo img { transform: none; }
@supports not (overflow: clip) { .sec-photo img { position: absolute; inset: 0; height: 100%; } }
.sec-photo::after { content: ""; position: absolute; inset: 0; }
.is-dark .sec-photo::after { background: linear-gradient(180deg, rgba(6, 21, 22, 0.6), rgba(6, 21, 22, 0.22) 28%, rgba(6, 21, 22, 0.22) 72%, rgba(6, 21, 22, 0.62)); }
.is-light .sec-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.02) 28%, rgba(255, 255, 255, 0.02) 72%, rgba(255, 255, 255, 0.32)); }
/* Soft coloured light over the photo (kept still: anything moving behind glass is re-blurred every frame) */
.sec-photo::before {
  content: ""; position: absolute; z-index: 1; inset: -20%;
  background: radial-gradient(circle at 18% 28%, rgba(232, 93, 138, 0.2), transparent 34%), radial-gradient(circle at 82% 72%, rgba(64, 170, 172, 0.22), transparent 36%);
}

/* ---- The glass ----
   Layers, top to bottom: cursor light, moving glint, frost grain, sheen, tint, and a gradient edge
   that is bright at the top-left and bottom-right corners like light catching real glass. */
.photo-sec :is(.section-head, .stat, .about-copy, .about-badge, .why-card, .series-card, .timeline, .quote-card, .visit, .terms details, .ss-thumbs, .benefit, .compare-panel, .price-panel, .pay-plan, .materials, .price-cta),
.products :is(.section-head, .filters, .product, .products-cta) {
  --mx: 50%; --my: 50%; --spot: 0;
  border: 1px solid transparent;
  background-color: transparent;
  background-image:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, calc(var(--spot) * 0.2)), transparent 60%),
    linear-gradient(115deg, transparent 32%, var(--g-hi) 48%, transparent 64%),
    var(--g-noise),
    linear-gradient(150deg, var(--g-fill-a) 0%, var(--g-fill-b) 46%, var(--g-fill-b) 70%, var(--g-fill-a) 100%),
    linear-gradient(var(--g-tint), var(--g-tint)),
    linear-gradient(135deg, var(--g-edge-a), var(--g-edge-b) 34%, var(--g-edge-b) 66%, var(--g-edge-c));
  background-origin: border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-size: 100% 100%, 260% 100%, 160px 160px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 160% 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  border-radius: 26px;
  box-shadow:
    0 30px 70px -32px rgba(0, 0, 0, 0.6),
    0 10px 24px -14px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.42),
    inset 0 -18px 36px -24px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}
@media (max-width: 760px) {
  .photo-sec :is(.section-head, .stat, .about-copy, .about-badge, .why-card, .series-card, .timeline, .quote-card, .visit, .terms details, .ss-thumbs, .benefit, .compare-panel, .price-panel, .pay-plan, .materials, .price-cta),
  .products :is(.section-head, .filters, .product, .products-cta) { backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); }
}
.photo-sec.is-dark :is(h2, .stat-num) { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }

/* A light glint sweeps across the big panels every few seconds, and across cards on hover */
@media (hover: hover) and (pointer: fine) {
  .photo-sec.in-view :is(.visit, .timeline, .stat) { animation: glint 9s ease-in-out infinite; }
  .photo-sec.in-view .stat:nth-child(2) { animation-delay: 0.5s; }
  .photo-sec.in-view .stat:nth-child(3) { animation-delay: 1s; }
  .photo-sec.in-view .stat:nth-child(4) { animation-delay: 1.5s; }
  .photo-sec :is(.why-card, .series-card, .quote-card, .ss-thumbs, .terms details):hover { animation: glintOnce 1.1s var(--ease); }
}
@keyframes glint { 0%, 70% { background-position: 0 0, 160% 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 0 0, -60% 0, 0 0, 0 0, 0 0, 0 0; } }
@keyframes glintOnce { from { background-position: 0 0, 160% 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, -60% 0, 0 0, 0 0, 0 0, 0 0; } }

/* Headings panels "frost in" the first time their section comes on screen ("seen" is set in js/main.js) */
.js .photo-sec :is(.section-head, .about-copy) { opacity: 0; transform: translateY(28px) scale(0.98); }
.js .photo-sec.seen :is(.section-head, .about-copy) { animation: frostIn 1.1s var(--ease) forwards; }
@media (hover: hover) and (pointer: fine) {
  .js .photo-sec.seen.in-view :is(.section-head, .about-copy) { animation: frostIn 1.1s var(--ease) forwards, glint 9s ease-in-out 1.4s infinite; }
}
@keyframes frostIn {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Cards lift, tilt towards the cursor (tilt set from js/main.js), brighten their edge and glow */
.photo-sec :is(.why-grid, .series-grid, .stats-grid, .benefit-grid) { perspective: 1100px; }
.photo-sec :is(.why-card, .series-card, .stat, .benefit) {
  transition: opacity 0.9s ease var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms), translate 0.4s var(--ease), rotate 0.4s var(--ease), box-shadow 0.45s var(--ease);
}
.photo-sec :is(.why-card, .series-card, .stat, .benefit):hover {
  translate: 0 -8px; rotate: var(--tilt, 0 0 1 0deg);
  --g-edge-b: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 44px 80px -36px rgba(0, 0, 0, 0.65),
    0 18px 50px -20px var(--g-glow),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -18px 36px -24px rgba(255, 255, 255, 0.22);
}

/* Small tiles inside a glass panel */
.photo-sec .info-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ---- Text on glass ---- */
.photo-sec .eyebrow { color: var(--g-eyebrow); }
.photo-sec h2, .photo-sec h3 { color: var(--g-head); }
.photo-sec .section-head { padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 44px); }
.photo-sec .section-head p:last-child { color: var(--g-muted); }
.photo-sec .lead { color: var(--g-text); }

/* Stats */
.stats.photo-sec { border-bottom: 0; padding: clamp(28px, 4vw, 48px) 0; }
.photo-sec .stats-grid { gap: 16px; }
.photo-sec .stat { border-radius: 22px; padding: clamp(24px, 3vw, 36px) 16px; }
.photo-sec .stat::before { display: none; }
.photo-sec .stat-num { color: var(--g-head); text-shadow: 0 2px 22px rgba(232, 93, 138, 0.35); }
.photo-sec .stat-num small { color: var(--pink-light); }
.photo-sec .stat-label { color: var(--g-muted); }

/* About */
.photo-sec .about-copy { padding: clamp(24px, 3.4vw, 44px); }
.photo-sec .about-copy > p { color: var(--g-muted); }
.photo-sec .about-copy > p.lead { color: var(--g-text); }
.photo-sec .checks strong { color: var(--g-head); }
.photo-sec .checks span { color: var(--g-muted); }
.photo-sec .checks svg { background: var(--g-chip); color: var(--g-chip-text); }
.photo-sec .about-badge { border-radius: 16px; }
.photo-sec .about-img-small { border-color: rgba(255, 255, 255, 0.75); }

/* Our work and gallery */
.photo-sec .work-tile { box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.6); outline: 1px solid rgba(255, 255, 255, 0.45); outline-offset: -1px; }
.photo-sec .ss-stage { box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.85); outline: 1px solid rgba(255, 255, 255, 0.14); }
.photo-sec .ss-thumbs { margin-top: 16px; padding: 10px; border-radius: 18px; }

/* Why us */
.photo-sec .why-card p { color: var(--g-muted); }
.photo-sec .why-icon { background: var(--g-chip); color: var(--g-chip-text); }


/* Profile series */
.photo-sec .series-media { background: rgba(255, 255, 255, 0.3); }
.photo-sec .series-body p:not(.series-type) { color: var(--g-muted); }

/* How it works: the whole timeline sits on one glass panel */
.photo-sec .timeline { --tl-pad: clamp(26px, 3.5vw, 42px); padding: var(--tl-pad) clamp(12px, 2vw, 24px); }
.photo-sec .timeline::before, .photo-sec .timeline::after { top: calc(var(--tl-pad) + 31px); }
.photo-sec .timeline::before { background: rgba(255, 255, 255, 0.16); }
.photo-sec .t-num { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.photo-sec .timeline p { color: var(--g-muted); }

/* Contact and terms */
.photo-sec .quote-card { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 10px 24px -14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -18px 36px -24px rgba(255, 255, 255, 0.16); }
.photo-sec .quote-intro, .photo-sec .form-alt, .photo-sec .field .opt { color: var(--g-muted); }
.photo-sec .form-alt a { color: #fff; font-weight: 700; }
.photo-sec .field label { color: var(--g-head); }

/* Glass form fields */
.photo-sec .field input, .photo-sec .field select {
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -8px 16px -12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.photo-sec .field input::placeholder { color: rgba(255, 255, 255, 0.5); }
.photo-sec .field input:hover, .photo-sec .field select:hover { border-color: rgba(255, 255, 255, 0.32); }
.photo-sec .field input:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); }
.photo-sec .field input:focus, .photo-sec .field select:focus {
  border-color: var(--pink-light);
  box-shadow: 0 0 0 4px rgba(232, 93, 138, 0.22), 0 8px 26px -12px rgba(232, 93, 138, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.photo-sec .field input:focus { background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)); }
/* Our own white arrow, since the browser's default one is dark */
.photo-sec .field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  background-repeat: no-repeat; background-position: right 14px center, 0 0; background-size: 18px 18px, 100% 100%;
}
/* The open list is drawn by the browser on a light background, so keep its text dark */
.photo-sec .field select option, .photo-sec .field select optgroup { color: var(--ink); background: #fff; }
.photo-sec .field [aria-invalid="true"] { border-color: #F87171; background-color: rgba(248, 113, 113, 0.16); }
.photo-sec .field-error { color: #FCA5A5; }
/* Browser autofill would paint the fields pale yellow or blue; keep them glassy */
.photo-sec .field input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: 0 0 0 1000px rgba(22, 46, 47, 0.96) inset; transition: background-color 9999s; }
.photo-sec .visit { padding: clamp(22px, 3vw, 34px); }
.photo-sec .visit .map { border-color: rgba(255, 255, 255, 0.22); }
.photo-sec .info-card { color: var(--g-muted); }
.photo-sec a.info-card:hover { background: rgba(255, 255, 255, 0.13); color: var(--g-muted); }
.photo-sec .info-card strong { color: var(--g-head); }
.photo-sec .info-card em { color: var(--pink-light); }
.photo-sec .info-icon { background: var(--g-chip); color: var(--g-chip-text); }
.contact .terms { background: none; padding: clamp(28px, 4vw, 44px) 0 0; }
.photo-sec .terms details { padding: 0 26px; border-radius: 22px; }
.photo-sec #terms-title { color: var(--g-head); }
.photo-sec .summary-hint, .photo-sec .terms-list { color: var(--g-muted); }
.photo-sec .terms summary::after { background: var(--g-chip); color: var(--g-chip-text); }

@media (max-width: 760px) {
  .photo-sec .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .photo-sec .stat:nth-child(n+3) { border-top: 1px solid var(--g-line); }
  .photo-sec .timeline { --tl-pad: 22px; padding: 22px 16px; }
  .photo-sec .timeline::before, .photo-sec .timeline::after { left: calc(16px + 30.5px); top: 32px; bottom: 32px; }
  .photo-sec .terms details { padding: 0 18px; }
}

/* ---------- Why UPVC: benefit cards, comparison table, care tips (dark photo section, so it uses the glass above) ---------- */
.price-dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; vertical-align: -2px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.benefit { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); }
.benefit-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--pink), var(--pink-deep, #C93A6E)); color: #fff; box-shadow: 0 12px 26px -12px rgba(232, 93, 138, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.benefit-icon svg { width: 28px; height: 28px; }
.benefit h3 { margin: 0 0 8px; font-size: 1.22rem; }
.benefit p { margin: 0 0 16px; color: var(--g-muted); font-size: 0.95rem; line-height: 1.55; }
.benefit .benefit-fact { margin: auto 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--g-muted); font-size: 0.84rem; line-height: 1.4; }
.benefit-fact strong { display: block; color: #fff; font-size: 1.05rem; font-weight: 800; }

.compare-panel { margin-top: 22px; padding: clamp(22px, 2.6vw, 32px); }
.compare-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 14px; }
.compare-head h3 { margin: 0; font-size: 1.35rem; }
.compare-head p { margin: 0; color: var(--g-muted); }
.compare-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.compare-table { width: 100%; min-width: 580px; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.compare-table th, .compare-table td { padding: 13px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.compare-table thead th { color: var(--g-head); font-size: 1rem; font-weight: 800; border-bottom-color: rgba(255, 255, 255, 0.2); }
.compare-table tbody th { width: 22%; color: var(--g-text); font-weight: 700; }
.compare-table td { color: var(--g-muted); line-height: 1.45; }
.compare-table td b { display: block; margin-bottom: 2px; font-weight: 800; }
.compare-table .is-upvc { background: rgba(232, 93, 138, 0.1); }
.compare-table thead .is-upvc { border-radius: 14px 14px 0 0; color: #fff; background: linear-gradient(135deg, rgba(232, 93, 138, 0.55), rgba(201, 58, 110, 0.4)); }
.compare-table tbody tr:last-child td.is-upvc { border-radius: 0 0 14px 14px; }
.r-good { color: #6EE7B7; } .r-ok { color: #FDE68A; } .r-poor { color: #FCA5A5; }
.compare-note { margin: 14px 0 0; color: var(--g-muted); font-size: 0.9rem; }

.care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.price-panel { padding: clamp(22px, 2.4vw, 30px); }
.price-panel h3 { font-size: 1.25rem; margin-bottom: 14px; }
.know-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
.know-list li { display: flex; gap: 14px; }
.know-list svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--g-chip); color: var(--pink-light); }
.know-list strong { display: block; margin-bottom: 2px; color: var(--g-head); }
.know-list p { margin: 0; color: var(--g-muted); font-size: 0.93rem; line-height: 1.5; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 32px; color: var(--g-muted); font-size: 0.95rem; line-height: 1.5; }
.check-list li strong { color: var(--g-head); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306140F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat, #6EE7B7;
}
.check-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.16); color: var(--g-text); font-size: 0.92rem; font-weight: 600; }
/* Payment plan: a bar split 50 / 30 / 20 that fills in when revealed, then the three steps */
.pay-plan { margin-top: 22px; padding: clamp(22px, 2.6vw, 32px); }
.pay-1 { --pc: #34D399; } .pay-2 { --pc: #F5C431; } .pay-3 { --pc: #38BDF8; }
.pay-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.pay-head h3 { margin: 0; font-size: 1.3rem; }
.pay-head p { margin: 0; color: var(--g-muted); font-size: 0.95rem; max-width: 52ch; }
.pay-bar { display: flex; gap: 4px; height: 38px; margin-bottom: 22px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.pay-seg {
  display: grid; place-items: center; flex: 0 0 calc(var(--w) - 3px); border-radius: 999px;
  background: var(--pc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 80%, #fff), var(--pc));
  color: #06140F; font-weight: 800; font-size: 0.88rem;
  box-shadow: 0 6px 18px -8px var(--pc), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform-origin: left; transition: transform 0.9s var(--ease), opacity 0.6s;
}
.js .pay-plan:not(.is-in) .pay-seg { transform: scaleX(0); opacity: 0; }
.pay-plan.is-in .pay-2 { transition-delay: 0.35s; }
.pay-plan.is-in .pay-3 { transition-delay: 0.7s; }
.pay-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pay-steps li { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.pay-pct { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--pc); color: #06140F; font-size: 1.05rem; font-weight: 800; box-shadow: 0 10px 24px -12px var(--pc), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.pay-steps strong { display: block; margin: 2px 0 4px; color: var(--g-head); }
.pay-steps p { margin: 0; color: var(--g-muted); font-size: 0.92rem; line-height: 1.5; }

.materials { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; padding: clamp(6px, 1vw, 12px); }
.mat-item { display: flex; gap: 14px; padding: clamp(16px, 2vw, 22px); }
.mat-item + .mat-item { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.mat-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.mat-icon svg { width: 24px; height: 24px; }
.mat-item h3 { margin: 2px 0 6px; font-size: 1.08rem; }
.mat-item p { margin: 0 0 12px; color: var(--g-muted); font-size: 0.93rem; line-height: 1.5; }
.mat-item p:last-child { margin-bottom: 0; }
/* Brand names as clean wordmark tiles */
.brand-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brand-chips li { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.7), inset 0 -2px 0 rgba(11, 36, 37, 0.08); transition: transform 0.3s var(--ease); }
.brand-chips li:hover { transform: translateY(-3px); }

.price-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 22px 26px; }
.price-cta p { margin: 0; color: var(--g-text); }
.price-cta strong { color: #fff; }
.price-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1000px) {
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .care-grid { grid-template-columns: 1fr; }
  .materials { grid-template-columns: 1fr; }
  .pay-steps { grid-template-columns: 1fr; }
  .mat-item + .mat-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
}
@media (max-width: 640px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .price-cta-actions .btn { flex: 1 1 100%; }
  /* Phones: each comparison row becomes a small card with UPVC / Aluminium / Wood lines */
  .compare-scroll { overflow: visible; margin: 0; padding: 0; }
  .compare-table { min-width: 0; font-size: 0.9rem; }
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table tbody th { display: block; width: auto; }
  .compare-table tr { padding: 14px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .compare-table tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .compare-table tbody th { padding: 0 0 8px; border: 0; color: var(--g-head); font-size: 1rem; }
  .compare-table td { display: grid; grid-template-columns: 86px 1fr; column-gap: 10px; padding: 7px 10px; border: 0; }
  .compare-table td::before { content: attr(data-label); grid-row: span 2; color: var(--g-text); font-weight: 700; }
  .compare-table td.is-upvc, .compare-table tbody tr:last-child td.is-upvc { border-radius: 10px; }
}

/* =========================================================
   Products: green glass showroom (cutouts standing on plinths)
   Uses the shared glass recipe above, tinted green.
   ========================================================= */
.products {
  --mint: #6EE7B7; --mint-2: #34D399; --leaf: #10B981; --leaf-deep: #047857; --on-mint: #04140C;
  --g-tint: rgba(4, 28, 17, 0.46);
  --g-fill-a: rgba(220, 255, 238, 0.14); --g-fill-b: rgba(255, 255, 255, 0.025);
  --g-edge-a: rgba(167, 243, 208, 0.75); --g-edge-b: rgba(167, 243, 208, 0.07); --g-edge-c: rgba(110, 231, 183, 0.4);
  --g-hi: rgba(220, 255, 238, 0.16);
  --g-glow: rgba(52, 211, 153, 0.38);
  position: relative; isolation: isolate; overflow: hidden; color: #CFEFDF;
  background:
    radial-gradient(900px 560px at 8% 0%, rgba(16, 185, 129, 0.34), transparent 60%),
    radial-gradient(760px 520px at 96% 34%, rgba(132, 204, 22, 0.13), transparent 62%),
    radial-gradient(900px 620px at 34% 100%, rgba(5, 150, 105, 0.32), transparent 62%),
    linear-gradient(180deg, #03110A 0%, #062417 52%, #041A10 100%);
}
/* Slow aurora of green light, and a faint dotted floor that fades out at the edges */
.products::before {
  content: ""; position: absolute; z-index: -1; inset: -12%; pointer-events: none; will-change: transform;
  background:
    radial-gradient(closest-side at 24% 28%, rgba(52, 211, 153, 0.24), transparent),
    radial-gradient(closest-side at 76% 62%, rgba(16, 185, 129, 0.2), transparent),
    radial-gradient(closest-side at 58% 12%, rgba(190, 242, 100, 0.1), transparent);
  filter: blur(40px);
  transform: translate3d(0, 0, 0) scale(1.06);
}
@keyframes aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.products::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(167, 243, 208, 0.12) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 42%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 42%, #000 18%, transparent 76%);
}

/* Heading on its own glass panel */
.products .section-head { padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 44px); }
.products .eyebrow { color: var(--mint); }
.products .section-head h2 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.products .section-head p:last-child { color: #A7CDBB; }

/* Filter bar: a glass pill with a mint slider */
.products .filters { border-radius: 999px; padding: 6px; }
.products .filters button { color: #A7CDBB; }
.products .filters button:hover { color: #fff; }
.products .filters button[aria-selected="true"] { color: var(--on-mint); }
.products .filter-pill { background: linear-gradient(135deg, var(--mint), var(--mint-2)); box-shadow: 0 10px 26px -10px rgba(52, 211, 153, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }

/* Cards */
.products .product { position: relative; isolation: isolate; border-radius: 28px; }
.products .product::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 4%; width: 80%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(52, 211, 153, 0.3), transparent 66%);
  transition: transform 0.6s var(--ease), opacity 0.5s; pointer-events: none;
}
.products .product-grid { perspective: 1200px; }
/* Lift and tilt use translate/rotate so they never fight the scroll-reveal transform */
.products .product-grid .product {
  transition: opacity 0.9s ease var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms), translate 0.45s var(--ease), rotate 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.products .product-grid .product:hover {
  translate: 0 -10px; rotate: var(--tilt, 0 0 1 0deg);
  --g-edge-b: rgba(167, 243, 208, 0.24);
  box-shadow:
    0 46px 84px -38px rgba(0, 0, 0, 0.75),
    0 20px 56px -22px var(--g-glow),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -18px 36px -24px rgba(167, 243, 208, 0.22);
  animation: glintOnce 1.1s var(--ease);
}
.products .product:hover::before { transform: translateX(-50%) scale(1.15); }

.products .product-media { background: transparent; aspect-ratio: 10 / 9; overflow: visible; }
.products .product-media::after { display: none; }

/* The plinth: a short green cylinder with a lit top face, a floor shadow and a soft glow */
.products .product-media.is-cutout::before {
  content: ""; position: absolute; left: 50%; bottom: 7%; width: 72%; height: 16%; transform: translateX(-50%);
  border-radius: 50% / 34%;
  background:
    radial-gradient(ellipse 50% 34% at 50% 34%, rgba(236, 253, 245, 0.55), rgba(167, 243, 208, 0.2) 72%, transparent 73%),
    linear-gradient(90deg, #06301E 0%, #0E5A3A 28%, #18895F 50%, #0E5A3A 72%, #06301E 100%);
  box-shadow: 0 24px 34px -12px rgba(0, 0, 0, 0.75), 0 0 44px -8px rgba(52, 211, 153, 0.4), inset 0 -8px 14px rgba(0, 0, 0, 0.35);
}
.products .product-media.is-cutout img {
  position: absolute; left: 50%; bottom: 16.5%; width: auto; height: auto; max-width: 78%; max-height: 64%;
  transform: translateX(-50%); transform-origin: 50% 100%; object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
  transition: transform 0.7s var(--ease);
}
.products .product-media.is-tall img { max-height: 74%; }
.products .product:hover .product-media.is-cutout img { transform: translateX(-50%) translateY(-10px) scale(1.04); }

/* Services and scene photos (no cutout): a rounded photo panel instead of a plinth */
.products .product-media:not(.is-cutout) { padding: 14px 14px 16px; }
.products .product-media:not(.is-cutout) img { border-radius: 18px; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.7); outline: 1px solid rgba(167, 243, 208, 0.18); outline-offset: -1px; }
.products .product:hover .product-media:not(.is-cutout) img { transform: scale(1.03); }

.products .product-chip { left: 18px; top: 18px; background: rgba(4, 28, 17, 0.35); color: #fff; border: 1px solid rgba(167, 243, 208, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.products .product-media:not(.is-cutout) .product-chip { left: 26px; top: 26px; background: rgba(4, 28, 17, 0.6); }
.products .product-zoom { right: 18px; top: 18px; bottom: auto; width: 40px; height: 40px; background: rgba(4, 28, 17, 0.35); color: #fff; border: 1px solid rgba(167, 243, 208, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.products .product-media:not(.is-cutout) .product-zoom { right: 26px; top: 26px; background: rgba(4, 28, 17, 0.6); }

.products .product-body { padding: 6px 24px 24px; }
.products .product-body h3 { color: #fff; font-size: 1.32rem; }
.products .product-body p { color: #A7CDBB; }
.products .tags li { color: #D1FAE5; background: rgba(110, 231, 183, 0.08); border: 1px solid rgba(110, 231, 183, 0.18); }
.products .colour-label { color: #8DBBA5; }
.products .colour-name { color: var(--mint); }
.products .dot { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.products .dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--mint); }

/* Quote: a glass bar with a round mint button on the right */
.products .product-quote {
  align-self: stretch; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 20px; border-radius: 999px; color: #fff;
  background: linear-gradient(145deg, rgba(220, 255, 238, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(167, 243, 208, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.3s, border-color 0.3s;
}
.products .product-quote svg { box-sizing: border-box; width: 42px; height: 42px; padding: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--mint-2)); color: var(--on-mint); box-shadow: 0 8px 20px -8px rgba(52, 211, 153, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.35s var(--ease); }
.products .product-quote:hover { background: linear-gradient(145deg, rgba(220, 255, 238, 0.16), rgba(255, 255, 255, 0.05)); border-color: rgba(167, 243, 208, 0.34); }
.products .product-quote:hover svg { transform: rotate(-45deg); }

/* Bottom call to action */
.products .products-cta { color: #D7F2E6; }
.products .products-cta strong { color: #fff; }
.products .products-cta .btn-pink { background: linear-gradient(135deg, var(--mint), var(--mint-2)); color: var(--on-mint); box-shadow: 0 12px 28px -12px rgba(52, 211, 153, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.products .products-cta .btn-pink:hover { color: var(--on-mint); filter: brightness(1.06); }