/* ============================================================
   BEACON HEADLIGHT RESTORATION — LIGHT THEME
   Brand: #95d3fa (beam) / #081019 (navy). White-first design.
   ============================================================ */
:root{
  --white:#ffffff;
  --bg-alt:#f3f7fc;          /* soft light section bg */
  --bg-tint:#eaf3fc;         /* faint blue tint */
  --navy:#081019;            /* primary ink / buttons */
  --navy-soft:#12283d;       /* button hover */
  --ink:#0c1a28;             /* headings */
  --text:#3b4c5c;            /* body */
  --muted:#6a7c8c;           /* secondary */
  --muted-2:#93a3b2;
  --brand:#95d3fa;           /* decorative accent (light) */
  --brand-deep:#136aa3;      /* accessible accent (links, eyebrows, icons) */
  --accent-soft:#e6f3fd;     /* light blue tint fill */
  --line:#e4eaf1;            /* borders */
  --line-strong:#d2dded;
  --ok:#12915a;
  --amber:#b5741f;
  --shadow:0 26px 60px -30px rgba(10,28,50,.30);
  --shadow-sm:0 10px 28px -14px rgba(10,28,50,.20);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1180px;
  --space:clamp(72px,9vw,124px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4{font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:700;line-height:1.03;margin:0;color:var(--ink)}
h1,h2{text-transform:uppercase;letter-spacing:.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.24em;font-weight:600;font-size:.82rem;color:var(--brand-deep)}
.section{padding:var(--space) 0;position:relative}
.lead{color:var(--muted);font-size:1.08rem;max-width:56ch}
:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.02rem;padding:15px 26px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  min-height:52px;white-space:nowrap}
.btn svg{width:19px;height:19px;flex:none}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--navy-soft);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(10,28,50,.4)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-accent{background:var(--brand-deep);color:#fff}
.btn-accent:hover{background:#0f5989;transform:translateY(-2px)}
.btn-block{width:100%}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy);color:#c7d4e0;font-size:.86rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;flex-wrap:wrap}
.topbar strong{color:#fff;font-weight:600}
.topbar .tb-item{display:inline-flex;align-items:center;gap:8px}
.topbar svg{width:15px;height:15px;color:var(--brand);flex:none}
.topbar a:hover{color:#fff}
.btn-tb{background:var(--brand);color:var(--navy);font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;padding:6px 15px;border-radius:100px;line-height:1.4;transition:background .2s,transform .2s}
.btn-tb:hover{background:#bfe6ff;color:var(--navy);transform:translateY(-1px)}
@media (max-width:720px){.topbar .tb-hide{display:none}.btn-tb{display:none}}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px -20px rgba(10,28,50,.35)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 6px 16px -8px rgba(10,28,50,.4)}
.brand .bt{font-family:"Barlow Condensed",sans-serif;line-height:.92}
.brand .bt b{display:block;font-size:1.42rem;font-weight:800;letter-spacing:.05em;color:var(--ink)}
.brand .bt span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.32em;color:var(--brand-deep);text-transform:uppercase}
.menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.menu a{font-weight:600;font-size:.95rem;color:var(--text);position:relative;padding:6px 0;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--brand-deep);transition:right .25s ease}
.menu a:hover{color:var(--ink)}
.menu a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
.hamburger{display:none;background:#fff;border:1px solid var(--line-strong);border-radius:10px;width:48px;height:48px;cursor:pointer;align-items:center;justify-content:center}
.hamburger svg{width:24px;height:24px;color:var(--navy)}
@media (max-width:980px){.menu,.nav-cta{display:none}.hamburger{display:inline-flex}}
/* drawer */
.drawer{position:fixed;inset:0;z-index:70;background:rgba(8,16,25,.4);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,360px);background:#fff;border-left:1px solid var(--line);
  padding:26px 24px;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;gap:6px}
.drawer.open .drawer-panel{transform:none}
.drawer-panel .dclose{align-self:flex-end;background:none;border:none;color:var(--muted);cursor:pointer;width:44px;height:44px}
.drawer-panel .dclose svg{width:26px;height:26px}
.drawer-panel a{padding:14px 6px;font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1.2rem;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer-panel .btn{margin-top:18px}

/* ---------- Hero (full-width photo) ---------- */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(84vh,720px);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(58% 60% at 82% 12%, rgba(149,211,250,.20), transparent 62%),
  linear-gradient(90deg, rgba(8,16,25,.94) 0%, rgba(8,16,25,.78) 42%, rgba(8,16,25,.44) 78%, rgba(8,16,25,.30) 100%),
  linear-gradient(180deg, rgba(8,16,25,.35) 0%, rgba(8,16,25,.15) 45%, rgba(8,16,25,.96) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(64px,9vw,112px)}
.hero-content{max-width:660px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(149,211,250,.34);
  border-radius:100px;padding:8px 16px 8px 12px;font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.82rem;color:#dceefb;margin-bottom:24px;backdrop-filter:blur(4px)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(104,211,145,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(104,211,145,.5)}70%{box-shadow:0 0 0 10px rgba(104,211,145,0)}100%{box-shadow:0 0 0 0 rgba(104,211,145,0)}}
.hero h1{font-size:clamp(3rem,7vw,5.4rem);letter-spacing:.004em;margin-bottom:22px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .hl{color:var(--brand);text-shadow:0 0 40px rgba(149,211,250,.4)}
.hero-sub{font-size:1.18rem;line-height:1.6;color:rgba(233,242,250,.9);max-width:56ch;margin-bottom:32px}
.hero-sub strong{color:#fff;font-weight:700}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero .btn-primary{background:var(--brand);color:var(--navy);box-shadow:0 16px 34px -14px rgba(149,211,250,.5)}
.hero .btn-primary:hover{background:#bfe6ff;color:var(--navy)}
.btn-hero-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.btn-hero-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}
.hero-facts{display:flex;gap:14px 28px;flex-wrap:wrap;color:rgba(233,242,250,.92);font-size:.94rem;font-weight:500}
.hero-facts div{display:flex;align-items:center;gap:9px}
.hero-facts svg{width:19px;height:19px;color:var(--brand);flex:none}
@media (max-width:600px){.hero{min-height:0}.hero-facts{gap:12px 22px;font-size:.88rem}}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:24px;padding-bottom:24px}
.trust-item{display:flex;align-items:center;gap:12px;justify-content:center}
.trust-item svg{width:26px;height:26px;color:var(--brand);flex:none}
.trust-item b{display:block;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:1.12rem;text-transform:uppercase;letter-spacing:.03em}
.trust-item span{font-size:.78rem;color:#9fb2c4}
@media (max-width:760px){.trust .wrap{grid-template-columns:repeat(2,1fr);gap:22px 12px}}

/* ---------- section heads ---------- */
.section-head{max-width:640px;margin-bottom:52px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:14px 0 16px}
.section-head .bar{width:54px;height:4px;background:var(--brand-deep);border-radius:3px;margin:0 0 4px}
.section-head.center .bar{margin-left:auto;margin-right:auto}
.alt{background:var(--bg-alt)}

/* ---------- Hazy vs Clear (framed image) ---------- */
.compare-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#000;position:relative}
.compare-frame img{width:100%;display:block}
.compare-note{display:flex;gap:12px;align-items:flex-start;margin-top:26px;color:var(--text);font-size:.98rem;background:var(--accent-soft);border:1px solid #cfe6f8;border-radius:12px;padding:16px 20px;max-width:820px;margin-left:auto;margin-right:auto}
.compare-note svg{width:22px;height:22px;color:var(--brand-deep);flex:none;margin-top:2px}

/* ---------- Cards / Why ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-deep),var(--brand));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.card:hover::before{transform:scaleX(1)}
.card .ic{width:54px;height:54px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .ic svg{width:27px;height:27px;color:var(--brand-deep)}
.card h3{font-size:1.4rem;margin-bottom:9px;color:var(--ink)}
.card p{color:var(--muted);font-size:.98rem}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:820px){.process{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.process{grid-template-columns:1fr}}
.step{position:relative;padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.step .n{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:2.6rem;color:transparent;-webkit-text-stroke:1.6px var(--brand);line-height:.8;display:block;margin-bottom:12px}
.step h3{font-size:1.25rem;margin-bottom:8px;color:var(--ink)}
.step p{color:var(--muted);font-size:.94rem}

/* ---------- Gallery (horizontal carousel) ---------- */
.gallery-wrap{position:relative}
.gallery{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-track{background:transparent}
.gallery::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.g-arrow{position:absolute;top:calc(50% - 20px);z-index:3;width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);transition:transform .2s,border-color .2s}
.g-arrow:hover{border-color:var(--navy);transform:scale(1.07)}
.g-arrow svg{width:24px;height:24px}
.g-prev{left:-12px}
.g-next{right:-12px}
.g-hint{text-align:center;color:var(--muted-2);font-size:.85rem;margin-top:14px;letter-spacing:.03em}
@media (max-width:980px){.g-arrow{display:none}}
.ba{flex:0 0 min(86%,380px);scroll-snap-align:start;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.ba .imgwrap{position:relative}
.ba img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ba .split{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.7);transform:translateX(-50%)}
.ba .lab{position:absolute;top:12px;padding:5px 11px;border-radius:6px;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;backdrop-filter:blur(4px)}
.ba .lab-b{left:12px;background:rgba(120,70,20,.78);color:#ffe6bf}
.ba .lab-a{right:12px;background:rgba(19,106,163,.82);color:#eaf6ff}
.ba figcaption{padding:15px 18px;font-size:.92rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px}
.ba figcaption b{color:var(--ink);font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ---------- Offer ---------- */
.offer{background:var(--navy);border-radius:24px;padding:clamp(30px,5vw,54px);display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.offer::before{content:"";position:absolute;top:-40%;right:-8%;width:55%;height:180%;background:radial-gradient(circle,rgba(149,211,250,.18),transparent 62%);pointer-events:none}
.offer .eyebrow{color:var(--brand)}
.offer h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);margin:10px 0}
.offer .lead{color:#b7c6d5}
.offer ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.offer li{display:flex;gap:11px;align-items:center;color:#d7e2ec;font-size:1rem}
.offer li svg{width:20px;height:20px;color:var(--brand);flex:none}
.offer-price{text-align:center;background:#fff;border-radius:var(--radius);padding:30px 24px}
.offer-price .from{font-size:.8rem;letter-spacing:.2em;color:var(--brand-deep);text-transform:uppercase;font-weight:600}
.offer-price .big{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:4rem;line-height:.9;color:var(--ink);margin:6px 0}
.offer-price .big sup{font-size:1.5rem;top:-1.3em;color:var(--brand-deep)}
.offer-price .per{color:var(--muted);font-size:.9rem;margin-bottom:20px}
@media (max-width:820px){.offer{grid-template-columns:1fr;gap:26px}}

/* ---------- Reviews ---------- */
.review-note{display:inline-flex;gap:9px;align-items:center;background:var(--accent-soft);border:1px solid #cfe6f8;border-radius:100px;padding:8px 16px;font-size:.84rem;color:var(--brand-deep);margin-bottom:14px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.reviews{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative;box-shadow:var(--shadow-sm)}
.review .stars{color:#f2a93b;letter-spacing:2px;margin-bottom:14px;display:block}
.review p{color:var(--text);font-size:1rem;margin-bottom:18px}
.review .who{display:flex;align-items:center;gap:12px}
.review .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand-deep),#0b3a5a);display:flex;align-items:center;justify-content:center;font-family:"Barlow Condensed",sans-serif;font-weight:700;color:#fff;flex:none}
.review .who b{font-family:"Barlow",sans-serif;font-weight:600;font-size:.96rem;display:block;color:var(--ink)}
.review .who span{font-size:.8rem;color:var(--muted)}
.review .sample{position:absolute;top:14px;right:14px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-strong);border-radius:5px;padding:3px 7px}

/* ---------- Service areas ---------- */
.areas-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media (max-width:820px){.areas-wrap{grid-template-columns:1fr;gap:30px}}
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:10px 16px;font-size:.94rem;color:var(--text);transition:border-color .2s,box-shadow .2s}
.chip svg{width:15px;height:15px;color:var(--brand-deep)}
.chip:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.areas-card{background:var(--navy);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.areas-card .grid-bg{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(149,211,250,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(149,211,250,.18) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%)}
.areas-card .pin{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:18px}
.areas-card .pin .dot{width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 6px rgba(149,211,250,.2),0 0 22px rgba(149,211,250,.7)}
.areas-card h3{color:#fff;font-size:1.5rem}
.areas-card p{position:relative;color:#b7c6d5;font-size:.96rem}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 22px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:26px;height:26px;position:relative;transition:transform .25s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--brand-deep);border-radius:2px}
.faq summary .pm::before{top:12px;left:3px;right:3px;height:2px}
.faq summary .pm::after{left:12px;top:3px;bottom:3px;width:2px}
.faq .ans{color:var(--muted);padding:0 0 20px;font-size:1rem;max-width:70ch}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-info .lead{margin-bottom:26px}
.contact-list{display:grid;gap:14px;margin-bottom:28px}
.contact-list a,.contact-list div{display:flex;align-items:center;gap:14px;color:var(--ink);font-size:1.02rem}
.contact-list .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex:none}
.contact-list .ic svg{width:22px;height:22px;color:var(--brand-deep)}
.contact-list small{display:block;color:var(--muted);font-size:.78rem;font-weight:400}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
form.book{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,34px);box-shadow:var(--shadow)}
form.book h3{font-size:1.6rem;margin-bottom:6px;color:var(--ink)}
form.book .fsub{color:var(--muted);font-size:.92rem;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:7px;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);font-family:inherit;font-size:1rem;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-deep);box-shadow:0 0 0 3px rgba(19,106,163,.14)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23136aa3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:480px){.two{grid-template-columns:1fr}}
.form-note{font-size:.8rem;color:var(--muted-2);margin-top:14px;text-align:center}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#b7c6d5;padding:58px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:28px}}
.footer .brand{margin-bottom:16px}
.footer .brand .bt b{color:#fff}
.footer p{color:#94a6b7;font-size:.94rem;max-width:38ch}
.footer h4{font-family:"Barlow Condensed",sans-serif;font-size:.9rem;letter-spacing:.2em;color:#6f8394;margin-bottom:16px;text-transform:uppercase}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer ul a,.footer ul li{color:#a9bbcb;font-size:.94rem}
.footer ul a:hover{color:var(--brand)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7d8ea0;font-size:.84rem}
.footer-bottom a:hover{color:var(--brand)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* floating mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(10,28,50,.3)}
.callbar .btn{flex:1}
@media (max-width:720px){.callbar{display:flex}body{padding-bottom:74px}}

/* ============================================================
   NEW: BEFORE / AFTER PAIR COMPONENT
   Used by the "Recent work" section on index.html and by the
   full grid on gallery.html. Two images side by side on desktop,
   stacked on mobile, both locked to a 3/4 frame so mismatched
   photos still line up.
   ============================================================ */
.pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:900px){.pairs{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
.pair{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
@media (max-width:560px){.pair-imgs{grid-template-columns:1fr}}
.pair-fig{position:relative;margin:0}
.pair-fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pair-fig .lab{position:absolute;top:12px;padding:5px 11px;border-radius:6px;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;backdrop-filter:blur(4px)}
.pair-fig .lab-b{left:12px;background:rgba(8,16,25,.78);color:#fff}
.pair-fig .lab-a{left:12px;background:var(--brand);color:var(--navy)}
.pair-cap{padding:15px 18px;font-size:.92rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pair-cap b{color:var(--ink);font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   NEW: COMPACT PAGE HERO
   Used at the top of every interior page. No background photo.
   ============================================================ */
.page-hero{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:clamp(48px,7vw,88px) 0}
.page-hero .inner{max-width:720px}
.page-hero .bar{width:54px;height:4px;background:var(--brand-deep);border-radius:3px;margin:0 0 14px}
.page-hero h1{font-size:clamp(2.3rem,5.2vw,3.8rem);margin:12px 0 18px}
.page-hero .lead{font-size:1.12rem;max-width:62ch}

/* ============================================================
   NEW: CTA BAND
   Closes every page that does not carry the booking form.
   ============================================================ */
.cta-band{background:var(--navy);border-radius:24px;padding:clamp(32px,5vw,56px);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta-band::before{content:"";position:absolute;top:-40%;right:-8%;width:55%;height:180%;background:radial-gradient(circle,rgba(149,211,250,.18),transparent 62%);pointer-events:none}
.cta-band h2{position:relative;color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:12px}
.cta-band p{position:relative;color:#b7c6d5;max-width:52ch;margin:0 auto 26px}
.cta-band .btn{position:relative}

/* ============================================================
   NEW: LISTS (checklist and plain bullets)
   ============================================================ */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:760px}
.checklist li{display:flex;gap:13px;align-items:flex-start;color:var(--text);font-size:1.02rem}
.checklist svg{width:22px;height:22px;color:var(--ok);flex:none;margin-top:3px}
.plain-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:13px;max-width:660px}
.plain-list li{display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:1rem}
.plain-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-deep);flex:none;margin-top:10px}

/* ============================================================
   NEW: STANDALONE PRICE CARD (services page, on white)
   ============================================================ */
.price-split{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
@media (max-width:860px){.price-split{grid-template-columns:1fr;gap:30px}}
.price-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow-sm)}
.price-card .from{font-size:.8rem;letter-spacing:.2em;color:var(--brand-deep);text-transform:uppercase;font-weight:600}
.price-card .big{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:4rem;line-height:.9;color:var(--ink);margin:6px 0}
.price-card .big sup{font-size:1.5rem;top:-1.3em;color:var(--brand-deep)}
.price-card .per{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.note-line{margin-top:24px;color:var(--text);font-size:1rem;max-width:660px}
.fog-line{margin-top:14px;background:var(--accent-soft);border:1px solid #cfe6f8;border-radius:12px;padding:14px 18px;color:var(--text);font-size:.98rem;max-width:660px}

/* ============================================================
   NEW: SINGLE COLUMN CARD STACK
   Long form content (warranty terms, about page blocks).
   ============================================================ */
.stack{display:grid;gap:20px;max-width:820px;margin:0 auto}
.stack .card{padding:30px 28px}
.stack .card h3{font-size:1.5rem;margin-bottom:12px}
.stack .card p{font-size:1rem;color:var(--muted)}
.stack .card p + p{margin-top:14px}
.stack .plain-list{margin-top:16px}
.num-list{margin:16px 0 0;padding-left:22px;display:grid;gap:12px;color:var(--muted);font-size:1rem}
.num-list li::marker{color:var(--brand-deep);font-weight:700}
.tint-note{margin-top:18px;background:var(--accent-soft);border:1px solid #cfe6f8;border-radius:12px;padding:14px 18px;color:var(--text);font-size:.98rem}

/* ============================================================
   NEW: CENTERED CARD PAGES (thank you, 404)
   .check is the confirmation badge, reused from the old inline
   success block that the form used before it redirected.
   ============================================================ */
.center-card{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(32px,5vw,52px);box-shadow:var(--shadow)}
.center-card .check{width:72px;height:72px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.center-card .check svg{width:36px;height:36px;color:var(--navy)}
.center-card h1{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:14px}
.center-card .s-lead{color:var(--ink);font-size:1.12rem;font-weight:600;margin-bottom:10px}
.center-card .s-sub{color:var(--muted);font-size:1rem;margin:0 auto 22px;max-width:46ch}
.center-card .s-small{font-size:.9rem;color:var(--muted-2);margin-bottom:26px}
.center-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   NEW: LEGAL PAGE (privacy policy)
   Plain readable document. No cards, no icons.
   ============================================================ */
.legal{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(2.1rem,4.6vw,2.9rem);text-transform:none;letter-spacing:0;margin-bottom:10px}
.legal .updated{color:var(--muted-2);font-size:.92rem;margin-bottom:30px}
.legal h2{font-size:1.3rem;text-transform:none;letter-spacing:0;margin:34px 0 12px}
.legal p{color:var(--text);margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:22px;color:var(--text);display:grid;gap:8px}
.legal a{color:var(--brand-deep);font-weight:600}

/* ============================================================
   FIX: DRAWER BUTTON CONTRAST
   .drawer-panel a (0,1,1) was beating .btn-primary (0,1,0), so the
   mobile Book Now button rendered --ink text on a --navy background,
   effectively invisible. These rules restore the button styling.
   ============================================================ */
.drawer-panel a.btn{border-bottom:none;letter-spacing:.06em;font-size:1.02rem;padding:15px 26px;justify-content:center}
.drawer-panel a.btn-primary{background:var(--navy);color:#fff}
.drawer-panel a.btn-primary:hover{background:var(--navy-soft);color:#fff}
.drawer-panel a.btn-ghost{background:#fff;color:var(--navy)}

/* ============================================================
   NEW: HORIZONTAL BEFORE / AFTER SCROLLER (gallery page)
   Reuses the .gallery track and .g-arrow controls.
   ============================================================ */
.gallery .pair{flex:0 0 min(92%,520px);scroll-snap-align:start}

/* ============================================================
   NEW: COMBINED BEFORE / AFTER CARD
   One photo that already contains before and after side by side.
   BEFORE chip is dark, AFTER chip uses --brand, with a hairline
   divider down the middle. Sits in the .gallery horizontal track.
   ============================================================ */
.combo{flex:0 0 min(92%,540px);scroll-snap-align:start;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.combo .imgwrap{position:relative;line-height:0}
.combo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.combo .split{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.6);transform:translateX(-50%)}
.combo .lab{position:absolute;top:12px;padding:5px 11px;border-radius:6px;font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;backdrop-filter:blur(4px)}
.combo .lab-b{left:12px;background:rgba(8,16,25,.78);color:#fff}
.combo .lab-a{right:12px;background:var(--brand);color:var(--navy)}
.combo-cap{padding:15px 18px;font-size:.92rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;line-height:1.5}
.combo-cap b{color:var(--ink);font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* Pricing disclaimer */
.disclaimer{margin-top:20px;font-size:.85rem;color:var(--muted-2);max-width:660px;line-height:1.6}

/* FIX: mandatory snap blocks programmatic scrollBy, which made the gallery
   arrows do nothing. proximity still snaps on swipe but lets the buttons work.
   Overrides the .gallery rule above without editing it. */
.gallery{scroll-snap-type:x proximity}

/* FIX: the decorative grid overlay in .areas-card is absolutely positioned over
   the whole card with no pointer-events rule, so it sat on top of the static
   "Book your spot" button and swallowed every click. The overlay is aria-hidden
   decoration and must never capture pointer events. The position:relative also
   lifts the button above it in the stacking order. */
.areas-card .grid-bg{pointer-events:none}
.areas-card .btn{position:relative}

/* Inline section call to action */
.section-cta{margin-top:36px}
.section-cta.center{text-align:center}

/* Trust strip spacing. The heading and its line of copy now read as one
   block (tighter leading inside each), with more air between the items. */
.trust .wrap{padding-top:30px;padding-bottom:30px;gap:22px}
.trust-item{align-items:flex-start;gap:14px}
.trust-item svg{margin-top:2px}
.trust-item b{line-height:1.2;margin-bottom:4px}
.trust-item span{display:block;line-height:1.5}
@media (max-width:760px){
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:28px 18px}
}
@media (max-width:540px){
  .trust .wrap{grid-template-columns:1fr;gap:22px}
  .trust-item{justify-content:flex-start}
}