/* ==========================================================================
   PELLIKAL — STYLESHEET
   ==========================================================================

   One stylesheet for the whole site. Rules are grouped in the order below;
   each group starts with a banner comment, so search for the banner text
   to jump to a section.

   HOW TO CHANGE THE BRAND COLOURS OR FONT
     Everything visual keys off the CSS variables in :root immediately
     below. Change --navy or --cyan there and the entire site follows.

   CONTENTS
     1.  :root ................ colours, fonts, spacing, shadows
     2.  Base ................. resets, typography, links, headings
     3.  Layout ............... .container, .section, .grid helpers
     4.  Buttons .............. .btn and its variants
     5.  Header / nav ......... .site-header, .nav, mobile menu
     6.  Loader ............... the film-install intro animation
     7.  Hero ................. .hero and .page-hero
     8.  Components ........... cards, capsules, stats, tags, quotes
     9.  Before/after ......... the drag-to-compare slider
     10. Forms ................ .field, .form, validation states
     11. Gallery / lightbox ... project tiles and the popup viewer
     12. Footer ............... .footer and the sticky mobile call bar
     13. Admin ................ styles used only by /admin/
     14. Utilities ............ .is-* helpers, reveal animations
     15. Responsive ........... @media rules (narrowest last)
     16. Consent banner ....... the cookie/tracking choice bar
     17. Lead form / thanks ... embedded landing-page form, /thankyou/
     18. Insert image scale .. capped image blocks on /window-inserts/
     19. Consent v2 .......... three-choice banner, dialog, switches, tile button
     20. Quieter rooms ....... noise section on /window-inserts/
     21. Conversion .......... trust strip, short form, steps, 3-button mobile bar

   CONVENTIONS
     • Block__element--modifier naming, e.g. .card__title, .btn--cyan
     • Never use IDs for styling; classes only
     • Colours come from var(--…) — avoid hard-coded hex values
   ========================================================================== */

:root{
  --navy:#0E1B40;--navy-2:#152A57;--navy-3:#0A1430;
  --cyan:#15BCD4;--cyan-2:#3FD0E6;--cyan-ink:#0A6E7E;--cyan-soft:rgba(21,188,212,.12);
  --gray:#A6A7AA;--mist:#F1F3F4;--mist-2:#E7EBEE;--line:#DFE4E9;
  --ink:#0E1B40;--text:#2C3A52;--muted:#5B6B82;--paper:#fff;--on-dark:#EAF0F6;--on-dark-mut:#9FB0C6;
  --f:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:16px;--radius-sm:10px;--cap:999px;--gutter:clamp(1.1rem,4vw,2rem);
  --shadow-sm:0 1px 2px rgba(14,27,64,.06),0 6px 18px rgba(14,27,64,.06);
  --shadow-md:0 18px 44px rgba(14,27,64,.14);--ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;font-family:var(--f);color:var(--text);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}

h1,h2,h3,h4{font-family:var(--f);font-weight:800;line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0 0 .5em}

h1{font-size:clamp(2.1rem,5.4vw,3.7rem);font-weight:900}

h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800}

h3{font-size:1.26rem;font-weight:800}

p{margin:0 0 1rem}

a{color:var(--cyan-ink)}

img{max-width:100%;display:block}

strong{color:var(--ink)}

.container{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}

.skip-link{position:absolute;left:-999px;top:0;background:var(--cyan);color:var(--navy);padding:.7rem 1rem;border-radius:0 0 8px 0;font-weight:800;z-index:2000}

.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px}

.btn{--bg:var(--cyan);--fg:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--bg);color:var(--fg);font-family:var(--f);font-weight:800;font-size:.98rem;letter-spacing:.01em;padding:.85rem 1.5rem;border-radius:var(--cap);border:2px solid transparent;text-decoration:none;cursor:pointer;transition:.2s var(--ease);white-space:nowrap}

.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn--cyan:hover{background:#12A7BD}

.btn--navy{--bg:var(--navy);--fg:#fff}

.btn--navy:hover{background:var(--navy-2)}

.btn--ghost{--bg:transparent;--fg:var(--navy);border-color:var(--line)}

.btn--ghost:hover{border-color:var(--navy);background:var(--paper)}

.btn--outline-light{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.45)}

.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.btn--lg{padding:1.05rem 1.9rem;font-size:1.05rem}

.btn--block{width:100%}

/* A full-width form button may wrap its label. With nowrap, "Request My Free
   Consultation" needs ~350px, which is more than a phone gives the form —
   the grid column stretched to fit the label and the form ran off the
   right edge of the screen on /contact/ (hidden by overflow-x:clip). */
.form .btn--block{white-space:normal;line-height:1.25}

.btn__ic{width:1.15em;height:1.15em}


/* Logo */
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer}

.logo__icon{width:40px;height:38px;flex:none}

.logo__word{font-family:var(--f);font-weight:900;font-size:1.32rem;letter-spacing:.02em;color:var(--navy);line-height:1}

.logo--dark .logo__word{color:#fff}


/* Header (light) */
.site-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}

.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}

.nav{display:flex;align-items:center}

.nav__toggle{display:none;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--line);color:var(--navy);font-family:var(--f);font-weight:700;padding:.5rem .8rem;border-radius:8px;cursor:pointer}

.nav__toggle .bars,.nav__toggle .bars::before,.nav__toggle .bars::after{display:block;width:18px;height:2px;background:var(--navy);position:relative}

.nav__toggle .bars::before,.nav__toggle .bars::after{content:"";position:absolute;left:0}

.nav__toggle .bars::before{top:-6px}

.nav__toggle .bars::after{top:6px}

.nav__menu{list-style:none;display:flex;align-items:center;gap:1.15rem;margin:0;padding:0}

.nav__menu a{color:var(--text);text-decoration:none;font-weight:700;font-size:.94rem;padding:.3rem 0;transition:color .2s;cursor:pointer;white-space:nowrap}

.nav__menu a:hover{color:var(--cyan-ink)}

.nav__menu a[aria-current="page"]{color:var(--cyan-ink);position:relative}

.nav__menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--cyan)}

.header__cta{display:flex;align-items:center;gap:.6rem}

.nav__cta{display:none}


/* Film-install loader (navy + cyan) */













@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}



@keyframes routeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* Sections */
.section{padding-block:clamp(3rem,7vw,5rem);position:relative}

.section--mist{background:var(--mist)}

.section--navy{background:var(--navy);color:var(--on-dark)}

.section--navy h2,.section--navy h3{color:#fff}

.section--cyan{background:var(--cyan);color:#06323b}

.section--cyan h2,.section--cyan h3{color:#04262d}

.section--tight{padding-block:clamp(2rem,4vw,3rem)}

.eyebrow{font-weight:800;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.9rem}

.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--cyan)}

.section--navy .eyebrow,.eyebrow--light{color:var(--cyan-2)}

.section--cyan .eyebrow{color:#04262d}

.section--cyan .eyebrow::before{background:#04262d}

.section-head{max-width:60ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}

.section-head.center{margin-inline:auto;text-align:center}

.lead{font-size:clamp(1.08rem,1.6vw,1.24rem);color:var(--muted);line-height:1.62}

.section--navy .lead{color:var(--on-dark-mut)}

.measure{max-width:64ch}

.center{text-align:center}


/* Decorative: dot grid + blobs */
.dots{position:absolute;width:150px;height:110px;background-image:radial-gradient(var(--gray) 1.6px,transparent 1.6px);background-size:14px 14px;opacity:.5;z-index:0;pointer-events:none}

.blob{position:absolute;border-radius:var(--cap);z-index:0;pointer-events:none}

.blob--cyan{background:var(--cyan)}

.blob--navy{background:var(--navy)}


/* Capsule photo masks (signature) */
.cap-cascade{position:relative;min-height:clamp(320px,42vw,520px)}

.cap{position:absolute;border-radius:var(--cap);overflow:hidden;border:4px solid #fff;box-shadow:0 24px 50px rgba(14,27,64,.22)}

.cap img{width:100%;height:100%;object-fit:cover;display:block}

.capsule{border-radius:var(--cap);overflow:hidden;box-shadow:var(--shadow-md);position:relative}

.capsule img{width:100%;height:100%;object-fit:cover;display:block}


/* Hero (light) */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--mist))}

.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding-block:clamp(2.6rem,6vw,4.5rem)}

.hero h1{color:var(--navy)}

.hero h1 .cy{color:var(--cyan-ink)}

.hero__sub{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--muted);max-width:48ch}

.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

.hero__note{margin-top:1.2rem;font-size:.92rem;color:var(--muted);display:flex;align-items:center;gap:.5rem}

.hero__note svg{width:1.1rem;height:1.1rem;color:var(--cyan);flex:none}

.hero__caps .cap:nth-child(1){width:44%;height:74%;left:2%;top:12%;transform:rotate(30deg)}

.hero__caps .cap:nth-child(2){width:40%;height:66%;left:33%;top:0;transform:rotate(30deg)}

.hero__caps .cap:nth-child(3){width:36%;height:56%;left:62%;top:20%;transform:rotate(30deg)}


/* Trust strip */
.trust{background:var(--navy);border-block:1px solid rgba(255,255,255,.08)}

.trust__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}

.trust__item{background:var(--navy);padding:1.05rem var(--gutter);display:flex;align-items:center;gap:.7rem;color:#fff}

.trust__item svg{width:1.5rem;height:1.5rem;color:var(--cyan);flex:none}

.trust__item b{font-weight:800;font-size:.96rem;display:block;line-height:1.15}

.trust__item span{font-size:.8rem;color:var(--on-dark-mut)}


/* Cards */
.grid{display:grid;gap:clamp(1rem,2.4vw,1.5rem)}

.grid--2{grid-template-columns:repeat(2,1fr)}

.grid--3{grid-template-columns:repeat(3,1fr)}

.grid--4{grid-template-columns:repeat(4,1fr)}

.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;text-decoration:none;color:inherit;overflow:hidden;transition:.25s var(--ease)}

.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cyan);transform:scaleY(0);transform-origin:top;transition:transform .25s var(--ease)}

.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--mist-2)}

.card:hover::before{transform:scaleY(1)}

.section--navy .card{background:var(--navy-2);border-color:rgba(255,255,255,.1);color:var(--on-dark)}

.section--navy .card p{color:var(--on-dark-mut)}

.card__ic{width:46px;height:46px;border-radius:11px;background:var(--cyan-soft);display:grid;place-items:center;margin-bottom:1rem;flex:none}

.card__ic svg{width:24px;height:24px;color:var(--cyan-ink)}

.section--navy .card__ic{background:rgba(21,188,212,.18)}

.section--navy .card__ic svg{color:var(--cyan-2)}

.card h3{margin-bottom:.4rem}

.card p{color:var(--muted);font-size:.97rem;margin-bottom:1rem}

.card__link{margin-top:auto;font-weight:800;color:var(--cyan-ink);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}

.card__link svg{width:1rem;height:1rem;transition:transform .2s var(--ease)}

.card:hover .card__link svg{transform:translateX(3px)}

.checks{list-style:none;display:grid;gap:.7rem;margin:1rem 0 0;padding:0}

.checks li{position:relative;padding-left:2rem;color:var(--text)}

.section--navy .checks li{color:var(--on-dark-mut)}

.checks li::before{content:"";position:absolute;left:0;top:.15em;width:1.35rem;height:1.35rem;border-radius:6px;background:var(--cyan-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E7E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.85rem no-repeat}

.section--navy .checks li::before{background-color:rgba(21,188,212,.22);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FD0E6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

.list-plain{list-style:none;display:grid;gap:.55rem;margin:1rem 0 0;padding:0}

.list-plain li{position:relative;padding-left:1.6rem;color:var(--muted)}

.list-plain li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--cyan)}

.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}

.tag{font-size:.9rem;font-weight:700;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:var(--cap);padding:.45rem .95rem;text-decoration:none}

a.tag{cursor:pointer}

a.tag:hover{border-color:var(--cyan);color:var(--cyan-ink)}

.section--mist .tag{background:#fff}


/* Stats on navy */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.02)}

.stat{padding:clamp(1.4rem,3vw,2rem);border-right:1px solid rgba(255,255,255,.1)}

.stat:last-child{border-right:0}

.stat__k{font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-2);margin-bottom:.6rem}

.stat__n{font-weight:900;font-size:clamp(2.4rem,5vw,3.4rem);color:#fff;line-height:1;letter-spacing:-.02em}

.stat__d{color:var(--on-dark-mut);font-size:.95rem;margin:.7rem 0 0}


/* Split / promo */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}

.split__media{position:relative;min-height:340px;background-size:cover;background-position:center}

.split__body{padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center}

.split--navy .split__body{background:var(--navy);color:#fff}

.split--navy .split__body p{color:var(--on-dark-mut)}

.split--cyan .split__body{background:var(--cyan);color:#04262d}

.split--cyan .split__body h2{color:#04262d}

.rule{width:64px;height:4px;border-radius:2px;background:var(--cyan);margin:.2rem 0 1.2rem}

.split--cyan .rule{background:#04262d}

.promo{background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.8rem);display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;color:#fff}

.promo h2{color:#fff}

.promo p{color:var(--on-dark-mut)}

.promo__tag{display:inline-block;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--cyan);padding:.3rem .6rem;border-radius:4px;margin-bottom:1rem}


/* Steps */
.steps{display:grid;gap:1rem}

.step{display:flex;gap:1rem;align-items:flex-start}

.step__n{flex:none;width:40px;height:40px;border-radius:11px;background:var(--cyan-soft);color:var(--cyan-ink);font-weight:800;display:grid;place-items:center}

.step h3{font-size:1.1rem;margin-bottom:.2rem}

.step p{color:var(--muted);font-size:.95rem;margin:0}


/* Before/after slider */
.ba{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);aspect-ratio:16/10;user-select:none;touch-action:none;background:#0e2233}

.ba__clip{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}

.ba__label{position:absolute;top:12px;z-index:4;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;border-radius:4px;background:rgba(14,27,64,.72);color:#fff}

.ba__label--before{left:12px}

.ba__label--after{right:12px}

.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:5}

.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35)}

.ba__grip svg{width:22px;height:22px}

.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:6}

.ba__hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:4;font-weight:700;font-size:.66rem;letter-spacing:.08em;color:rgba(255,255,255,.85);background:rgba(14,27,64,.5);padding:.25rem .5rem;border-radius:4px}


/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.2rem)}

.tile{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--mist);border:1px solid var(--line)}

.tile img{width:100%;height:100%;object-fit:cover}

.tile__cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem;font-size:.82rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(14,27,64,.85))}

.tile--ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--navy-2),var(--navy))}

.tile--ph span{font-weight:700;font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.6);text-align:center;padding:1rem}


/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.5rem)}

.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;position:relative;box-shadow:var(--shadow-sm)}

.quote__mark{font-family:Georgia,serif;font-size:3rem;line-height:.6;color:var(--cyan);height:1.2rem}

.quote p{color:var(--text);font-style:italic}

.quote__by{font-weight:800;color:var(--navy);font-style:normal;margin:0}


/* CTA + footer */
.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;position:relative;overflow:hidden}

.cta-band__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding-block:clamp(2.6rem,6vw,4rem)}

.cta-band h2{color:#fff}

.cta-band p{color:var(--on-dark-mut)}

.cta-band__actions{display:flex;flex-wrap:wrap;gap:.8rem}

.footer{background:var(--navy);color:var(--on-dark-mut);padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem;border-top:1px solid rgba(255,255,255,.08)}

.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08)}

.footer h4{color:#fff;font-size:.95rem;margin-bottom:.8rem}

.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}

.footer a{color:var(--on-dark-mut);text-decoration:none;cursor:pointer}

.footer a:hover{color:var(--cyan-2)}

.footer__brand p{margin-top:.9rem;font-size:.92rem;max-width:34ch}

.footer__contact svg{width:1rem;height:1rem;vertical-align:-2px;margin-right:.45rem;color:var(--cyan)}

.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding-top:1.2rem;font-size:.85rem}

.footer__legal{font-size:.78rem;color:#7386a0;margin-top:1rem;line-height:1.6}


/* Mobile bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:800;display:none;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.12);padding-bottom:env(safe-area-inset-bottom,0px)}

.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem;font-weight:800;text-decoration:none}

.mobile-bar a svg{width:1.15rem;height:1.15rem}

.mobile-bar__call{background:var(--cyan);color:var(--navy)}

.mobile-bar__text{background:var(--navy);color:#fff}

.mobile-bar__quote{background:#fff;color:var(--navy)}


/* Forms */
.quote-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}

.callbox{background:var(--navy);color:#fff;border-radius:var(--radius);padding:clamp(1.5rem,3vw,2rem);border:1px solid rgba(255,255,255,.1);position:sticky;top:90px}

.callbox h2{color:#fff;font-size:1.5rem}

.callbox p{color:var(--on-dark-mut)}

.callbox__phone{font-weight:900;font-size:clamp(1.6rem,4vw,2.1rem);color:var(--cyan);text-decoration:none;display:inline-block;margin:.3rem 0 1rem}

.callbox__phone:hover{color:#fff}

.callbox__hours{font-weight:600;font-size:.82rem;color:var(--on-dark-mut);border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;margin-top:1rem;line-height:1.7}

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm)}

.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.field{margin-bottom:1.05rem}

.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem;color:var(--ink)}

.field .req{color:var(--cyan-ink)}

.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}

.field textarea{min-height:120px;resize:vertical}

.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}

.field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem;padding-right:2.4rem}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__msg{border-radius:var(--radius-sm);padding:.9rem 1rem;font-weight:600;margin-bottom:1rem;display:none}

.form__msg--ok{background:#e6f7f1;border:1px solid #b5e3cf;color:#136a45}

.form__msg--err{background:#fdecec;border:1px solid #f3bcbc;color:#a1291f}

.disclaimer{background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:var(--radius-sm);padding:1.1rem 1.3rem;color:var(--muted);font-size:.95rem}

.note-inline{color:var(--muted);font-size:.95rem}

[data-content]{white-space:pre-line}


/* FAQ */
.faq__item{border-bottom:1px solid var(--line)}

.faq__q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--f);font-weight:800;font-size:1.08rem;color:var(--ink);padding:1.1rem 2.2rem 1.1rem 0;position:relative}

.faq__q::after{content:"";position:absolute;right:.2rem;top:50%;width:12px;height:12px;border-right:2.4px solid var(--cyan-ink);border-bottom:2.4px solid var(--cyan-ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}

.faq__q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}

.faq__a{overflow:hidden;height:0;transition:height .3s var(--ease)}

.faq__a-inner{padding:0 0 1.1rem}

.faq__a-inner p{color:var(--muted);margin:0}


/* Admin */
.admin-shell{max-width:920px}

.admin-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm)}

.callout{border-radius:var(--radius-sm);padding:1rem 1.2rem;font-size:.92rem;line-height:1.6;margin-bottom:1.2rem}

.callout--info{background:#e9f5fb;border:1px solid #cbe6f2;color:#1c4a5e}

.callout--warn{background:#e9f7fa;border:1px solid #bfe6ee;border-left:4px solid var(--cyan);color:#0a5566}

.callout--ok{background:#e6f7f1;border:1px solid #b5e3cf;color:#136a45}

.callout code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:.05rem .35rem;font-size:.85em}

.admin-tabs{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}

.admin-tab{border:1px solid var(--line);background:#fff;border-radius:var(--cap);padding:.5rem 1rem;font-weight:700;cursor:pointer;color:var(--navy)}

.admin-tab.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}

.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;margin-top:1.2rem}

.admin-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:var(--mist)}

.admin-thumb img{width:100%;height:100%;object-fit:cover}

.admin-thumb .admin-del{position:absolute;top:6px;right:6px;background:rgba(161,41,31,.94);color:#fff;border:none;border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:1rem;line-height:1}

.admin-thumb .admin-edit{position:absolute;top:6px;left:6px;background:rgba(14,27,64,.86);color:#fff;border:none;border-radius:6px;padding:.2rem .5rem;font-size:.72rem;font-weight:800;cursor:pointer}

.admin-thumb .cap2{position:absolute;left:0;right:0;bottom:0;font-size:.7rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:.5rem .4rem .35rem}

pre.sql{background:var(--navy-3);color:#cfe0ef;border-radius:var(--radius-sm);padding:1rem;overflow:auto;font-size:.78rem;line-height:1.55}

.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}

.js [data-reveal].is-in{opacity:1;transform:none}

.page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--mist));padding-block:clamp(2rem,5vw,3.2rem)}

.page-hero .container{position:relative;z-index:2}

.page-hero h1{color:var(--navy)}

.page-hero__sub{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:60ch;margin-bottom:0}

.page-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}

.crumbs{font-weight:700;font-size:.8rem;letter-spacing:.02em;color:var(--muted);margin-bottom:1rem}

.crumbs a{color:var(--muted);text-decoration:none;cursor:pointer}

.crumbs a:hover{color:var(--cyan-ink)}

.crumbs .cur{color:var(--cyan-ink)}

@media (max-width:1024px){.footer__top{grid-template-columns:1fr 1fr}.grid--4{grid-template-columns:repeat(2,1fr)}}

@media (max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav{position:static}
  .nav__menu{position:absolute;left:0;right:0;top:100%;width:auto;flex-direction:column;align-items:stretch;gap:0;background:#fff;box-shadow:0 22px 34px rgba(14,27,64,.16);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.4rem var(--gutter) 1rem;display:none;z-index:950;max-height:calc(100vh - 62px);overflow-y:auto}
  .nav__menu.is-open{display:flex}
  .nav__menu li{width:100%}
  .nav__menu li:not(.nav__cta) a{display:block;width:100%;padding:.95rem .1rem;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--text)}
  .nav__menu li:not(.nav__cta) a[aria-current="page"]{color:var(--cyan-ink)}
  .nav__menu a[aria-current="page"]::after{display:none}
  .header__cta{display:none}
  .nav__cta{display:block;margin-top:.8rem}
  .nav__cta a{width:100%}
  .hero__inner{grid-template-columns:1fr}.cap-cascade{order:-1;max-width:440px;margin-inline:auto;width:100%;min-height:320px}
  .dots{display:none}
  .trust__inner{grid-template-columns:1fr 1fr}
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .split,.stats,.promo,.cta-band__inner,.quote-wrap,.quotes{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.stat:last-child{border-bottom:0}
  .callbox{position:static}.gallery{grid-template-columns:1fr 1fr}.footer__top{grid-template-columns:1fr 1fr}
  .mobile-bar{display:grid}body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .split__media{min-height:240px}
}

@media (max-width:520px){.form__row{grid-template-columns:1fr}.footer__top{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.trust__inner{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none}*{scroll-behavior:auto!important}}


/* ===== Tint before/after slider (real photo, filter-based) ===== */
.tintwrap{position:relative}

.ba{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;user-select:none;touch-action:none;background:#0e2233;box-shadow:var(--shadow-md)}

.ba__img{position:absolute;inset:0;background-size:cover;background-position:center}

.ba__img--tinted{filter:brightness(.82) saturate(1.08) contrast(1.02)}

.ba__img--tinted::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,90,120,.22),rgba(14,27,64,.30))}

.ba__img--untinted{filter:brightness(1.13) saturate(1.03) contrast(.96)}

.ba__img--untinted::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,240,205,.30),transparent 55%)}

.ba__clip{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}

.ba__clip .ba__img--untinted{width:100vw;max-width:1180px}

.ba__label{position:absolute;top:12px;z-index:4;font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .6rem;border-radius:6px;color:#fff}

.ba__label--before{left:12px;background:rgba(224,123,58,.92)}

.ba__label--after{right:12px;background:rgba(21,120,150,.95)}

.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:5;box-shadow:0 0 0 1px rgba(14,27,64,.15)}

.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.4)}

.ba__grip svg{width:22px;height:22px}

.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:6}

.ba__hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:4;font-weight:700;font-size:.66rem;letter-spacing:.08em;color:#fff;background:rgba(14,27,64,.55);padding:.28rem .6rem;border-radius:6px;pointer-events:none;transition:opacity .3s}

.ba.is-touched .ba__hint{opacity:0}


/* ===== Gallery lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:2500;background:rgba(10,20,48,.92);display:none;align-items:center;justify-content:center;padding:4vw;opacity:0;transition:opacity .25s var(--ease)}

.lightbox.is-open{display:flex;opacity:1}

.lightbox img{max-width:min(1100px,92vw);max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}

.lightbox__close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}

.lightbox__close:hover{background:rgba(255,255,255,.22)}

.gallery .tile{cursor:zoom-in}


/* ===== Back to top ===== */
.to-top{position:fixed;right:18px;bottom:74px;z-index:790;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s var(--ease);box-shadow:var(--shadow-md)}

.to-top.is-vis{opacity:1;transform:none;pointer-events:auto}

.to-top:hover{background:var(--cyan);color:var(--navy)}

.to-top svg{width:22px;height:22px}

@media (min-width:861px){.to-top{bottom:22px}}


/* Page fade-in on load */
main{animation:pageIn .5s var(--ease)}

@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){main{animation:none}.ba__hint{transition:none}}


/* QA fix (marketing-readiness pass): decorative full-bleed layers — the
   loader, blobs and sticky call bar — could extend a few pixels past the
   viewport on small screens, causing a sideways scroll. Google Ads scores
   landing-page experience partly on mobile usability, so this is clipped.
   `clip` is used rather than `hidden` because it does not break
   position:sticky on the header. */
html{overflow-x:clip}

body{overflow-x:clip}


/* ==========================================================================
   PAGE LOADER — REMOVED (August 2026)
   A full-screen "Installing film…" overlay used to cover the page on load.
   On a landing page whose job is to convert, that delayed the first
   meaningful paint and hurt Largest Contentful Paint for no functional
   benefit. Content now renders immediately and needs no JavaScript to
   become visible.
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE — premium landing page components (Aug 2026)
   ========================================================================== */
.hero__photo{margin:0;border-radius:clamp(18px,2.2vw,26px);overflow:hidden;box-shadow:0 30px 70px rgba(14,27,64,.20);aspect-ratio:4/3}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.trustbar{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.8rem 0 0;padding:1.15rem 0 0;border-top:1px solid var(--line)}
.trustbar li{display:flex;align-items:center;gap:.5rem;font-size:.83rem;font-weight:800;color:var(--navy)}
.trustbar svg{width:16px;height:16px;color:var(--cyan-ink);flex:none}
.eyebrow--light{color:var(--cyan-2)}
.selectpro__inner{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.selectpro__badge{text-align:center}
.selectpro__badge img{width:100%;max-width:220px;height:auto;display:block;margin:0 auto;border-radius:16px;background:rgba(255,255,255,.06);padding:.6rem}
.selectpro__note{margin:.7rem 0 0;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--on-dark-mut)}
.checks--light li{color:var(--on-dark)}
.microcopy{font-size:.82rem;color:var(--muted);margin:1rem 0 0;line-height:1.55}
.section--navy .microcopy{color:var(--on-dark-mut)}
.section--navy .microcopy a{color:var(--cyan-2)}
.protect{padding:1.5rem 1.35rem;border:1px solid var(--line);border-radius:16px;background:#fff;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.protect:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(14,27,64,.10);border-color:#cfd8e3}
.protect__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--cyan-ink);margin-bottom:1rem}
.protect__ic svg{width:22px;height:22px}
.protect h3{margin:0 0 .4rem;font-size:1.05rem;color:var(--navy)}
.protect p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.grid--4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.coastal__k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--on-dark-mut);margin:0 0 .8rem}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.8rem)}
.proj{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.proj:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(14,27,64,.12)}
.proj__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.proj__media img{width:100%;height:100%;object-fit:cover;display:block}
.proj__flag{position:absolute;top:10px;left:10px;background:rgba(14,27,64,.86);color:#fff;font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.proj__body{padding:1.2rem 1.3rem 1.35rem}
.proj__body h3{margin:0 0 .25rem;font-size:1.04rem;color:var(--navy)}
.proj__meta{margin:0 0 .7rem;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-ink)}
.proj__l{margin:0;font-size:.9rem;color:var(--muted);line-height:1.58}
.proj__note{margin:1.2rem 0 0;font-size:.82rem;color:var(--muted);text-align:center}
.quotes__empty{grid-column:1/-1;text-align:center;max-width:52ch;margin-inline:auto;padding:1.6rem 1rem;border:1px dashed var(--line);border-radius:14px}
.quotes__empty p{margin:0 0 .4rem;color:var(--muted)}
@media (max-width:960px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.selectpro__inner{grid-template-columns:1fr}.selectpro__badge{max-width:190px;margin-inline:auto}.projects{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}
@media (max-width:560px){.grid--4{grid-template-columns:1fr}}

/* ==========================================================================
   ADMIN — WEBSITE MANAGER (used only by /admin/)
   ========================================================================== */
.cms{display:none;min-height:100vh;background:#EEF1F5}
.cms.is-on{display:block}
.cms__top{position:sticky;top:0;z-index:60;background:var(--navy);color:#fff;display:flex;align-items:center;gap:1rem;padding:.85rem clamp(1rem,3vw,1.8rem);flex-wrap:wrap}
.cms__brand{font-weight:900;letter-spacing:.14em;font-size:.95rem}
.cms__brand small{display:block;font-size:.6rem;letter-spacing:.16em;color:var(--cyan-2);font-weight:800}
.cms__spacer{flex:1}
.cms__top .btn{padding:.5rem .9rem;font-size:.84rem}
.cms__who{font-size:.8rem;color:var(--on-dark-mut)}
.cms__nav{display:flex;gap:.3rem;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:0 clamp(1rem,3vw,1.8rem)}
.cms__nav button{font-family:inherit;white-space:nowrap;background:none;border:0;border-bottom:3px solid transparent;padding:.95rem .9rem;font-weight:800;font-size:.9rem;color:var(--muted);cursor:pointer}
.cms__nav button.is-on{color:var(--navy);border-bottom-color:var(--cyan)}
.cms__wrap{display:grid;grid-template-columns:minmax(340px,1fr) 1.2fr;gap:1.2rem;padding:1.2rem clamp(1rem,3vw,1.8rem) 3rem;align-items:start}
.cms__edit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.cms__prevwrap{position:sticky;top:76px}
.cms__prev{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cms__prevbar{background:var(--mist);border-bottom:1px solid var(--line);padding:.55rem .9rem;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cms__prevbody{padding:1.3rem}
.cms h2{margin:0 0 .3rem;font-size:1.18rem;color:var(--navy)}
.cms .hint{color:var(--muted);font-size:.87rem;margin:0 0 1.2rem;line-height:1.55}
.cms label.fl{display:block;font-size:.78rem;font-weight:800;color:var(--muted);margin:.95rem 0 .35rem}
.cms input[type=text],.cms input[type=email],.cms input[type=tel],.cms input[type=number],.cms textarea,.cms select{width:100%;font-family:inherit;font-size:.95rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);-webkit-appearance:none;appearance:none}
.cms textarea{min-height:90px;resize:vertical}
.cms .dirty{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);margin:1.4rem -1.3rem -1.3rem;padding:.9rem 1.3rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;border-radius:0 0 14px 14px}
.cms .dirty__s{font-size:.82rem;font-weight:800;color:var(--muted);flex:1}
.cms .dirty__s.is-dirty{color:#8a4b1e}
.cms .dirty__s.is-ok{color:#0a5566}
.cms .warnbox{background:#FBEFE6;border:1px solid #F1D3BB;color:#8a4b1e;border-radius:10px;padding:.7rem .9rem;font-size:.84rem;margin:0 0 1rem}
.cms .okbox{background:#E5F6F9;border:1px solid #BEE7EE;color:#0a5566;border-radius:10px;padding:.7rem .9rem;font-size:.84rem;margin:.9rem 0 0}
.cms__list{display:grid;gap:.7rem;margin-top:1rem}
.cms__item{border:1px solid var(--line);border-radius:11px;padding:.85rem .95rem;display:flex;gap:.85rem;align-items:flex-start;background:#fff}
.cms__item img{width:72px;height:54px;object-fit:cover;border-radius:7px;flex:none;background:var(--mist)}
.cms__item .g{flex:1;min-width:0}
.cms__item b{display:block;color:var(--navy);font-size:.93rem}
.cms__item span{display:block;color:var(--muted);font-size:.82rem;margin-top:.15rem;overflow-wrap:anywhere}
.cms__item .acts{display:flex;gap:.35rem;flex:none;flex-wrap:wrap}
.cms__item .acts button{font-family:inherit;font-size:.76rem;font-weight:800;padding:.35rem .6rem;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.cms__item .acts button.del{color:#a1291f;border-color:#e8c9c5}
.pillbadge{display:inline-block;font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:.16rem .45rem;border-radius:999px;background:#E5F6F9;color:#0a5566;margin-left:.4rem}
.pillbadge--off{background:#eef1f5;color:#5B6B82}
.cms__empty{color:var(--muted);font-size:.9rem;padding:1rem;text-align:center;border:1px dashed var(--line);border-radius:11px}
@media (max-width:1040px){.cms__wrap{grid-template-columns:1fr}.cms__prevwrap{position:static}}

/* ---- Real-photography presentation (Aug 2026) ---------------------------
   Photos are never rotated. Decorative containers may tilt; images do not. */
.hero__cap,.shot figcaption{display:block;margin-top:.6rem;font-size:.78rem;color:var(--muted);line-height:1.5}
.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border-radius:clamp(14px,1.8vw,20px);box-shadow:0 24px 56px rgba(14,27,64,.16)}
.shot--dark img{box-shadow:0 24px 56px rgba(0,0,0,.35)}
.section--navy .shot figcaption{color:var(--on-dark-mut)}
.protect__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.6rem}
.protect__grid .protect{padding:1.1rem 1.15rem}
.protect__grid .protect h3{margin:0 0 .3rem;font-size:.98rem}
.protect__grid .protect p{font-size:.88rem}
/* Official LLumar SelectPro mark: supplied black artwork, shown on white so it
   is never recoloured. Generous clear space, fixed proportions. */
.selectpro__badge{background:#fff;border-radius:14px;padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1.1rem,2vw,1.5rem);display:flex;align-items:center;justify-content:center}
.selectpro__badge img{width:100%;max-width:320px;height:auto;display:block;object-fit:contain;aspect-ratio:1726/438}
.selectpro__note{display:none}
.center{text-align:center}
@media (max-width:720px){.protect__grid{grid-template-columns:1fr}}


/* The supplied LLumar SelectPro artwork must never be stretched. These win over
   any generic image sizing so the mark keeps its exact 1726:438 proportions. */
.selectpro__badge img,
.shot img[src*="llumar-selectpro"]{height:auto!important;aspect-ratio:1726/438;object-fit:contain}


/* Trademark symbols should sit as small superscripts, not full-size glyphs. */
h1 sup,h2 sup,h3 sup,.trustbar sup,.logo sup{font-size:.42em;top:-.7em;line-height:0;font-weight:700}
.selectpro__inner{grid-template-columns:300px 1fr}
@media (max-width:900px){.selectpro__inner{grid-template-columns:1fr}}

/* ---- Window Inserts page: image slots until authorised assets arrive ---- */
.imgslot{margin:0}
.imgslot__box{aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:clamp(14px,1.8vw,20px);background:repeating-linear-gradient(135deg,#f6f8fa 0 14px,#eef1f5 14px 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:var(--muted);font-size:.86rem;text-align:center;padding:1rem}
.imgslot__k{font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-ink)}
.imgslot--dark .imgslot__box{border-color:rgba(255,255,255,.25);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,rgba(255,255,255,.02) 14px 28px);color:var(--on-dark-mut)}
.imgslot--dark .imgslot__k{color:var(--cyan-2)}
.imgslot img{width:100%;height:auto;display:block;border-radius:clamp(14px,1.8vw,20px);box-shadow:0 24px 56px rgba(14,27,64,.16)}
.card--link{display:block;text-decoration:none;color:inherit}
.card--link h3{color:var(--navy)}
.card__go{display:inline-block;margin-top:.9rem;font-weight:800;font-size:.9rem;color:var(--cyan-ink)}
.card--link:hover .card__go{text-decoration:underline}

/* Filled insert-project photos: real photography, shown level and captioned. */
.imgslot--filled img{width:100%;height:auto;display:block;border-radius:clamp(14px,1.8vw,20px);box-shadow:0 24px 56px rgba(14,27,64,.16)}
.imgslot--filled figcaption{display:block;margin-top:.6rem;font-size:.78rem;color:var(--muted);line-height:1.5}
.imgslot--dark.imgslot--filled figcaption{color:var(--on-dark-mut)}
.imgslot--dark.imgslot--filled img{box-shadow:0 24px 56px rgba(0,0,0,.35)}

/* ==========================================================================
   MANUFACTURER-SUPPLIED IMAGERY GATE  (/window-inserts/)
   --------------------------------------------------------------------------
   Six images on the Window Inserts page are manufacturer / product marketing
   material, not Pellikal photography. They must not be published until
   Pellikal has documented permission.

   FAIL-SAFE BY DESIGN: the default is hidden. The assets appear only when
   `WINDOW_INSERT_ASSETS_APPROVED: true` in js/config.js, which adds
   .mfr-assets-approved to <html>. With JavaScript disabled the class is never
   added, so the assets stay hidden — the safe direction.

   Tagged elements are whole figures, one media column, and one entire section,
   chosen so that nothing is left as an empty box or an orphaned heading.
   ========================================================================== */
html:not(.mfr-assets-approved) [data-asset-source="manufacturer"]{display:none}

/* The "why Pellikal handles it" row is a two-column grid whose right-hand
   column holds only manufacturer photographs. With them hidden, the text
   column takes the full width instead of sitting beside an empty half. */
html:not(.mfr-assets-approved) .grid--2[data-mfr-grid]{grid-template-columns:1fr}

/* ---- Paired example installations on the Window Inserts page ----
   NOT a before/after. Both photographs show inserts already fitted, in two
   different openings. The modifiers are --one/--two for exactly that reason:
   do not relabel them Before/After. ---- */
.ba-pair{gap:clamp(1rem,2.4vw,1.8rem)}
.ba-shot{position:relative}
.ba-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:.34rem .7rem;border-radius:999px;color:#fff}
.ba-tag--one{background:rgba(14,27,64,.88)}
.ba-tag--two{background:var(--cyan-ink)}

/* ==========================================================================
   16. CONSENT BANNER  —  Google Consent Mode v2 (see docs/CONSENT-MODE.md)
   ==========================================================================

   Deliberately built from the tokens already in :root — the navy plate of
   the footer and .callbox, the cyan of the primary button, Mulish, the
   pill button geometry. It should read as the site's own footer speaking,
   not as a third-party cookie widget dropped on top.

   EQUAL PROMINENCE IS A REQUIREMENT, NOT A STYLE CHOICE.
   Both buttons inherit .btn, so their padding, font size, weight and hit
   area are identical by construction. One is cyan and one is white; they
   differ in hue only. Do not make "Necessary Only" a faint outline, do
   not shrink it, and do not add a close X to the first-run banner — a
   dismissal that silently means "accept" is the dark pattern this whole
   file exists to avoid.

   STACKING: above the sticky mobile call bar (800) and the back-to-top
   button (790), below the lightbox (2500) and the skip link (2000).
   ========================================================================== */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--navy);border-top:1px solid var(--cyan);box-shadow:0 -18px 44px rgba(14,27,64,.22)}

.consent__inner{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:1rem}

.consent__copy{flex:1 1 auto;min-width:0}

/* Under 80 characters a line, per the site's body-copy convention. */
.consent__text{margin:0;color:var(--on-dark);font-size:.9rem;line-height:1.6;max-width:68ch}

.consent__now{margin:.4rem 0 0;color:var(--cyan);font-size:.82rem;font-weight:700}

.consent__link{display:inline-block;margin-top:.35rem;color:var(--on-dark-mut);font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.consent__link:hover{color:#fff}

.consent__actions{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}

/* min-height keeps both targets at the 44px minimum on touch screens. */
.consent__btn{font-size:.9rem;padding:.7rem 1.35rem;min-height:44px}

.consent__btn--alt{--bg:#fff;--fg:var(--navy)}

.consent__btn--alt:hover{background:var(--mist)}

.consent__close{flex:0 0 auto;background:none;border:none;color:var(--on-dark-mut);font-family:var(--f);font-size:.82rem;font-weight:700;padding:.6rem;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.consent__close:hover{color:#fff}

/* One short entrance, and only on the element that just appeared. */
.consent{animation:consent-in .18s var(--ease) both}

@keyframes consent-in{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ---- Keeping the page clear of it ----
   --consent-h is measured and set by js/consent.js, because the height
   depends on how the copy wraps at the current width. */
html.consent-open body{padding-bottom:var(--consent-h,0px)}

html.consent-open .to-top{bottom:calc(74px + var(--consent-h,0px))}

@media (min-width:861px){html.consent-open .to-top{bottom:calc(22px + var(--consent-h,0px))}}

/* ---- Reopen controls ----
   Hidden until js/consent.js is alive, so nobody is ever shown a
   preferences button that does nothing. Same fail-safe direction as the
   manufacturer-imagery gate above. */
html:not(.consent-ready) [data-consent-open]{display:none}

.footer__prefs{background:none;border:none;padding:0;color:var(--on-dark-mut);font-family:var(--f);font-size:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.footer__prefs:hover{color:#fff}

/* ---- Responsive ----
   861px and below the sticky call bar owns the bottom 56px, so the
   banner sits on top of it rather than over it. */
@media (max-width:860px){
  .consent{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  html.consent-open body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + var(--consent-h,0px))}
}

@media (max-width:767px){
  .consent__inner{flex-direction:column;align-items:stretch;gap:.85rem;padding-block:.9rem}
  .consent__text{font-size:.86rem}
  .consent__actions{flex-direction:column;align-items:stretch;gap:.55rem}
  .consent__btn{width:100%}
  .consent__close{align-self:center}
}

@media (prefers-reduced-motion:reduce){.consent{animation:none}}

/* ==========================================================================
   17. LEAD FORM ON LANDING PAGES + THANK-YOU PAGE
   ==========================================================================
   The embedded form reuses .quote-wrap (so it inherits the existing
   two-column-to-one-column behaviour) and .form. Only the supporting
   column and the confirmation page need anything new.
   ========================================================================== */
.leadform__aside{align-self:start}

.leadform__aside .checks{margin-bottom:1.4rem}

.leadform__call{border-top:1px solid var(--line);padding-top:1.2rem}

.leadform__or{font-size:.9rem;color:var(--muted);margin:0 0 .7rem}

/* The legal line under the submit button, previously an inline style. */
.form__legal{font-size:.86rem;color:var(--muted);margin:.9rem 0 0;text-align:center}

/* ---- /thankyou/ ---- */
.thanks__inner{max-width:640px;text-align:center;padding-block:clamp(2rem,6vw,4rem)}

.thanks__mark{width:64px;height:64px;color:var(--cyan);margin-bottom:1.2rem}

.thanks__note{color:var(--muted);font-size:.95rem}

.thanks__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

@media (max-width:520px){.thanks__actions .btn{width:100%}}

/* An inline control that reads as a link — used in the privacy policy to
   reopen the tracking-preferences banner mid-sentence. */
.link-btn{background:none;border:none;padding:0;font:inherit;color:var(--cyan-ink);text-decoration:underline;cursor:pointer}
.link-btn:hover{color:var(--navy)}

/* ==========================================================================
   18. WINDOW INSERTS — IMAGE SCALE
   ==========================================================================
   Owner feedback, 14 Sep 2026: the photographs were dominating the page.
   On this page the copy sells and the images corroborate, so every image
   block is capped and centred in its column rather than filling it.

   .imgslot--filled img is width:100% by design — these caps constrain the
   FIGURE, which keeps the images responsive and avoids fighting that rule.
   ========================================================================== */
.imgslot--thumb{max-width:230px;margin-inline:auto}

/* Transparent artwork (hero cutaway, the two diagrams): no card. A shadow or
   radius would draw a rectangle around invisible pixels. */
.imgslot--flat.imgslot--filled img{box-shadow:none;border-radius:0}

.imgslot--sm{max-width:380px;margin-inline:auto}

.imgslot--md{max-width:420px;margin-inline:auto}

/* Softer than the page default: a small image under a 56px shadow reads as
   a sticker rather than a photograph. */
.imgslot--filled img{box-shadow:0 12px 30px rgba(14,27,64,.13)}

.imgslot--dark.imgslot--filled img{box-shadow:0 12px 30px rgba(0,0,0,.3)}

/* Hero: the headline, sub and CTA lead; the cutaway sits beside them as a
   supporting thumbnail — ON THE RIGHT AT EVERY WIDTH. It never collapses
   under the buttons; on small screens the image column shrinks instead.
   (An earlier version collapsed to one column under 860px, which put the
   cutaway as a full-width row beneath the CTAs. Owner feedback 14 Sep.) */
.inserthero{grid-template-columns:minmax(0,1.7fr) minmax(150px,.75fr);align-items:center;gap:clamp(1.4rem,4vw,3.4rem)}

.insert-fitrow{max-width:880px;margin-inline:auto}

/* The two example installations are meant to be compared, so cap the ROW
   and let each fill its column rather than floating apart in wide ones. */
.ba-pair{max-width:900px;margin-inline:auto}

.ba-pair .imgslot--md{max-width:none}

/* Below 860 every grid here collapses to one column, so an uncapped figure
   stretches to the full container — 707px on a tablet, which is the exact
   thing the caps above exist to prevent. min() keeps them full-bleed on a
   phone and capped on a tablet. */
@media (max-width:860px){
  /* Two columns still. The image column is a fixed clamp, so the text keeps
     the rest; the gap drops to ~10-16px so the paragraph is not starved. */
  .inserthero{grid-template-columns:minmax(0,1fr) clamp(95px,24vw,160px);gap:clamp(.65rem,2.5vw,1rem)}
  .inserthero .imgslot--thumb{width:100%;max-width:100%;margin:0;justify-self:end}
  .imgslot--sm,.imgslot--md{max-width:min(100%,420px)}
  .ba-pair .imgslot--md{max-width:min(100%,420px)}
  .insert-fitrow .imgslot{max-width:min(100%,420px);margin-inline:auto}
}

/* ==========================================================================
   19. CONSENT v2 — three-choice banner, preferences dialog, switches
   ==========================================================================
   Accept and Reject share .consent__btn geometry (same padding, weight and
   44px minimum) and differ in hue only. Manage Preferences is a navigation
   action, not a consent decision, so it may sit lighter — but it is the
   same size and the same hit area.
   ========================================================================== */
.consent__btn--manage{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.8)}

.consent__btn--manage:hover{background:rgba(255,255,255,.12);border-color:#fff}

@media (max-width:1100px) and (min-width:768px){
  .consent__inner{flex-direction:column;align-items:stretch}
  .consent__actions{justify-content:flex-start;flex-wrap:wrap}
}

/* ---- Dialog ---- */
.consent-overlay{position:fixed;inset:0;z-index:2600;background:rgba(10,20,48,.6);display:flex;align-items:center;justify-content:center;padding:1rem}

.consent-dialog{background:var(--paper);color:var(--text);border-radius:var(--radius);width:min(560px,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:clamp(1.2rem,3vw,1.8rem);box-shadow:var(--shadow-md)}

.consent-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem}

.consent-dialog__title{margin:0;font-size:1.35rem}

.consent-dialog__title:focus{outline:none}

.consent-dialog__close{background:none;border:none;font-size:1.8rem;line-height:1;width:44px;height:44px;border-radius:50%;color:var(--muted);cursor:pointer}

.consent-dialog__close:hover{background:var(--mist);color:var(--ink)}

.consent-dialog__intro{font-size:.92rem;color:var(--muted);margin:0 0 1.1rem}

.consent__cat{border-top:1px solid var(--line);padding:.95rem 0}

.consent__cat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.consent__cat-desc{margin:.4rem 0 0;font-size:.86rem;color:var(--muted);line-height:1.55}

.consent__always{font-size:.78rem;font-weight:800;letter-spacing:.04em;color:var(--cyan-ink)}

/* Switch: a native checkbox, visually hidden but still focusable, with a
   drawn track. The label is the click/tap target: 44px tall. */
.consent__switch{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;min-height:44px;font-weight:800;color:var(--ink);position:relative}

.consent__switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

.consent__track{width:46px;height:26px;border-radius:999px;background:var(--gray);position:relative;flex:0 0 auto;transition:background .15s var(--ease)}

.consent__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s var(--ease)}

.consent__switch input:checked+.consent__track{background:var(--cyan-ink)}

.consent__switch input:checked+.consent__track::after{transform:translateX(20px)}

.consent__switch input:focus-visible+.consent__track{outline:3px solid var(--cyan);outline-offset:2px}

.consent__switch input:disabled+.consent__track{background:var(--cyan-ink);opacity:.55;cursor:default}

.consent__cat--locked .consent__switch{cursor:default}

.consent-dialog .consent__link{color:var(--cyan-ink);margin:.4rem 0 1rem;display:inline-block}

/* Sticky, so Reject is never scrolled out of view while Accept is not:
   on a phone the category text scrolls, the three choices do not. */
.consent-dialog__actions{position:sticky;bottom:calc(-1 * clamp(1.2rem,3vw,1.8rem));background:var(--paper);display:flex;gap:.6rem;flex-wrap:wrap;border-top:1px solid var(--line);padding:1rem 0 clamp(1.2rem,3vw,1.8rem);margin-bottom:calc(-1 * clamp(1.2rem,3vw,1.8rem))}

.consent-dialog__actions .btn{font-size:.9rem;padding:.7rem 1.2rem;min-height:44px;white-space:normal;line-height:1.2}

html.consent-dialog-open{overflow:hidden}

@media (max-width:520px){
  .consent-dialog__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .consent-dialog__actions .btn:first-child{grid-column:1 / -1}
  .consent-dialog__intro,.consent__cat-desc{font-size:.84rem}
}

@media (prefers-reduced-motion:reduce){.consent__track,.consent__track::after{transition:none}}

/* Phones: the headline shares the row with the image column, so it gets a
   little less room than a full-width H1. Scale it with the viewport and let
   the browser hyphenate as a last resort rather than overflow. At 375px
   "Comfortable" fit the column with 0px to spare — that is too close. */
@media (max-width:430px){
  .inserthero h1{font-size:clamp(1.6rem,8vw,2.1rem);hyphens:auto;-webkit-hyphens:auto}
  /* The CTAs are nowrap pills sized for a full-width column. Here they share
     the row with the image, so let them wrap and fill the text column. */
  .inserthero .page-hero__actions{flex-direction:column;align-items:stretch}
  .inserthero .page-hero__actions .btn{white-space:normal;text-align:center;line-height:1.25;padding-inline:1rem}
}

/* 320-359px: the image column narrows to 84px so the headline keeps ~200px. */
@media (max-width:359px){
  .inserthero{grid-template-columns:minmax(0,1fr) 84px;gap:.6rem}
}

/* ---- Gallery tile button (keyboard-operable lightbox) ---- */
.tile__open{display:block;width:100%;padding:0;margin:0;border:none;background:none;cursor:zoom-in;border-radius:inherit}

.tile__open img{display:block;width:100%;height:100%;object-fit:cover}

.tile__open:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}


/* ==========================================================================
   20. WINDOW INSERTS — QUIETER ROOMS (primary selling point, on navy)
   ==========================================================================
   Copy left, street-noise visual right. The visual <figure> ships EMPTY and
   is hidden until the owner's image is added, at which point the row becomes
   two columns automatically. No :has() needed — flex does it.
   ========================================================================== */
.noise__row{display:flex;align-items:center;gap:clamp(1.4rem,4vw,3rem);margin-top:.4rem}

/* Three across while the visual slot is empty; stacked beside the image once
   .noise__row--visual is added along with the <img>. */
.noise__points{flex:1 1 0;display:grid;gap:.9rem;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr))}

.noise__row--visual .noise__points{grid-template-columns:1fr}

.noise__points .card{padding:1.1rem 1.25rem}

.noise__points .card h3{margin-bottom:.3rem}

.noise__points .card p{margin:0}

/* The illustration is a transparent PNG drawn for a dark background: it sits
   straight on the section navy, no plate, no shadow. */
.noise__visual{flex:0 0 clamp(240px,34%,400px);max-width:400px}

.noise__visual img{border-radius:0}

.noise__visual:empty{display:none}

.noise__callout{max-width:68ch;margin:1.6rem auto 0;padding:.95rem 1.2rem;border-left:3px solid var(--cyan);background:rgba(21,188,212,.08);border-radius:0 12px 12px 0;color:var(--on-dark);line-height:1.6}

.noise__callout strong{color:#fff}

@media (max-width:860px){
  .noise__row{flex-direction:column;align-items:stretch}
  .noise__points{grid-template-columns:1fr}
  .noise__visual{flex:0 0 auto;max-width:min(100%,340px);margin-inline:auto}
}


/* "Get a Free Quote" in the hero jumps here; clear the sticky header. */
#quote{scroll-margin-top:90px}


/* ==========================================================================
   21. PAID-TRAFFIC CONVERSION — trust strip, short form, steps, mobile bar
   ========================================================================== */
/* Hero trust strip reuses the existing .trustbar component (see §7). */

/* Short form */
.form--short .form__hint{margin:-.3rem 0 .9rem;font-size:.84rem;color:var(--muted)}

.form--short .opt{font-weight:600;color:var(--muted);font-size:.85em}

.form--short .field--zip input{max-width:12rem}

.form--short [aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.15)}

.leadform__or a{color:var(--cyan-ink);font-weight:800}

/* Three steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;counter-reset:step}

.steps li{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.4rem 1.3rem;position:relative}

.steps__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;margin-bottom:.8rem}

.steps h3{margin:0 0 .4rem;font-size:1.08rem}

.steps p{margin:0;color:var(--muted);font-size:.95rem}

@media (max-width:860px){
  .steps{grid-template-columns:1fr}
}

@media (max-width:430px){
  .mobile-bar a{padding:.85rem .4rem;font-size:.92rem;gap:.35rem}
}

/* ==========================================================================
   17. GOOGLE REVIEWS (synced from Google Business Profile via Supabase)
   Every element here ships hidden and is revealed by js/reviews.js: before
   the first successful sync with the verified temporary snapshot and cards,
   after it with live synced data (which replaces the fallback completely).
   See docs/GOOGLE-REVIEWS.md.
   ========================================================================== */
:root{--star:#F2A516}

/* `hidden` must win over component display rules (e.g. .btn is inline-flex):
   the "Read all reviews" button is hidden when no verified Google URL exists. */
.greviews [hidden],.gproof [hidden],.greviews__google[hidden]{display:none!important}

/* stars */
.gstars{display:inline-block;color:var(--star);letter-spacing:.06em;font-size:1rem;line-height:1;white-space:nowrap}
.gstars--lg{font-size:1.45rem}

/* hero proof line - compact, sits under the CTAs, above the trust strip */
.gproof{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;margin:1.1rem 0 0;font-size:.9rem;font-weight:800;color:var(--navy);line-height:1.35}
.gproof__google{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.45rem .55rem}
.gproof__link{color:var(--cyan-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:800}
.gproof__link:hover{color:var(--navy)}
.gproof__link--static,.gproof__link--static:hover{color:var(--navy);text-decoration:none;cursor:default}
.gproof__sep{color:var(--muted);font-weight:400}
.gproof__item{font-weight:700;color:var(--text)}

/* review section */
.greviews__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin-bottom:clamp(1.4rem,3vw,2rem)}
.greviews__head .section-head{margin-bottom:0}
.greviews__summary{display:grid;gap:.15rem;justify-items:start}
.greviews__rating{margin:0;font-size:1.05rem;font-weight:800;color:var(--navy)}
.greviews__count{margin:0;font-size:.9rem;color:var(--muted);font-weight:700}
.greviews__label{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink)}
.greviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.5rem)}
.greviews__cta{margin:clamp(1.4rem,3vw,2rem) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.greviews__note{margin:0;font-size:.82rem;color:var(--muted)}

/* one review */
.greview{display:flex;flex-direction:column;gap:.8rem;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);min-width:0}
.greview__top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.greview__src{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.greview__text{margin:0;color:var(--text);font-style:italic;overflow-wrap:anywhere}
.greview__text p{margin:0}
.greview__text.is-clamped p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.greview__more{align-self:flex-start;background:none;border:0;padding:.35rem 0;min-height:44px;font:inherit;font-size:.86rem;font-weight:800;color:var(--cyan-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.greview__by{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.9rem;color:var(--navy)}
.greview__name{font-weight:800}
.greview__dot{color:var(--muted)}
.greview__when{color:var(--muted)}

/* commercial: compact trust strip variant */
.greviews--compact .greviews__grid{grid-template-columns:repeat(3,1fr)}

@media (max-width:900px){.greviews__grid,.greviews--compact .greviews__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .greviews__grid,.greviews--compact .greviews__grid{grid-template-columns:1fr}
  .greviews__head{align-items:flex-start}
  .greview{padding:1.25rem}
  /* phones: one fact per line, no dangling separators; the Google line stays together */
  .gproof{font-size:.9rem;flex-direction:column;align-items:flex-start;gap:.45rem}
  .gproof__sep{display:none}
  .gproof__google{gap:.35rem .5rem}
}