/* Hawaiian Tubs — hitubs.com — shared stylesheet */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --sand:#FCF8F4; --shell:#F5ECDF; --mist:#EAF1F6;
  --deep:#0C2B43; --deep-700:#123c5c; --ocean:#1C6FA6;
  --sun:#FB6B4B; --sun-600:#E8542F; --gold:#FFB24C;
  --ink:#142230; --muted:#54636B; --line:#ECE3D6; --line-d:rgba(255,255,255,.16);
  --maxw:1160px; --shadow:0 26px 60px -34px rgba(12,43,67,.5);
  --shadow-sm:0 10px 30px -18px rgba(12,43,67,.35);
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--sand); color:var(--ink);
  font-family:"Figtree",system-ui,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:"Newsreader",Georgia,serif; font-weight:500; line-height:1.08; letter-spacing:-.01em; margin:0; text-wrap:balance; }
h1 em,h2 em{ font-style:italic; font-weight:500; color:var(--sun-600); }
p{ margin:0; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--deep); color:#fff; padding:10px 16px; border-radius:8px; z-index:300; }
.skip:focus{ left:16px; top:16px; }
:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; border-radius:6px; }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--deep); }
.eyebrow::before{ content:""; width:11px; height:11px; flex:none; border-radius:50%; background:var(--sun);
  box-shadow:0 0 0 4px rgba(251,107,75,.18); }
section .eyebrow{ margin-bottom:18px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:1rem; line-height:1; padding:15px 26px; border-radius:999px;
  border:2px solid transparent; text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--deep); color:#fff; border-color:var(--deep); box-shadow:0 12px 24px -14px rgba(12,43,67,.7); }
.btn--primary:hover{ background:var(--deep-700); border-color:var(--deep-700); }
.btn--ghost{ background:transparent; color:var(--deep); border-color:var(--deep); }
.btn--ghost:hover{ background:var(--deep); color:#fff; }
.btn--coral{ background:var(--sun); color:var(--ink); border-color:var(--sun); box-shadow:0 12px 24px -14px rgba(232,84,47,.8); }
.btn--coral:hover{ background:var(--sun-600); border-color:var(--sun-600); color:#fff; }
.btn--lightline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--lightline:hover{ background:#fff; color:var(--deep); border-color:#fff; }
.btn svg{ width:18px; height:18px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

.horizon{ height:2px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--sun) 22%, var(--gold) 50%, var(--sun) 78%, transparent); opacity:.85; }

/* Top strip */
.topbar{ background:var(--deep); color:rgba(255,255,255,.86); font-size:.84rem; }
.topbar .wrap{ display:flex; gap:8px 26px; justify-content:space-between; align-items:center; min-height:38px; flex-wrap:wrap; padding-block:6px; }
.topbar span{ display:inline-flex; align-items:center; gap:8px; }
.topbar span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.topbar a{ color:#fff; font-weight:600; text-decoration:none; }
.topbar .tb-right{ display:flex; gap:22px; }

/* Header */
.site-head{ position:sticky; top:0; z-index:100; background:rgba(252,248,244,.9);
  backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.site-head .wrap{ display:flex; align-items:center; gap:18px; height:74px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  font-family:"Newsreader",serif; font-weight:600; font-size:1.42rem; letter-spacing:-.01em; white-space:nowrap; }
.brand__mark{ width:38px; height:38px; flex:none; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav .navlink{ text-decoration:none; color:var(--muted); font-weight:500; font-size:.95rem; font-family:inherit;
  padding:9px 11px; border-radius:9px; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:color .15s, background-color .15s; }
.nav .navlink:hover,.nav .navlink[aria-current="page"],.nav .has-sub:hover > .navlink{ color:var(--ink); background:var(--shell); }
.nav .navlink .chev{ width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; }
.has-sub{ position:relative; }
.has-sub > .sub{ position:absolute; top:100%; left:-10px; min-width:292px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:10px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:120; }
.sub--wide{ min-width:440px; display:grid; grid-template-columns:1fr 1fr; }
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{ opacity:1; visibility:visible; transform:none; }
.sub a{ display:block; text-decoration:none; padding:10px 13px; border-radius:10px; font-weight:600; font-size:.95rem; color:var(--ink); }
.sub a small{ display:block; font-weight:400; color:var(--muted); font-size:.82rem; margin-top:1px; }
.sub a:hover{ background:var(--shell); }
.sub .sub-all{ grid-column:1/-1; border-top:1px solid var(--line); border-radius:0 0 10px 10px; margin-top:6px; padding-top:13px; color:var(--deep); }
.nav .tel{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--deep); font-weight:700; padding:9px 10px; white-space:nowrap; }
.nav .tel svg{ width:17px; height:17px; }
.nav .btn{ padding:11px 18px; font-size:.94rem; white-space:nowrap; }
.menu-btn{ margin-left:auto; display:none; background:transparent; border:1px solid var(--line);
  border-radius:11px; width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer; }
.menu-btn svg{ width:22px; height:22px; color:var(--ink); }

/* Hero (home) */
.hero{ position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#FFE7C4 0%,#FFD3BB 11%,#FBE3D1 27%,var(--sand) 54%);
  padding:clamp(2.8rem,6vw,5.2rem) 0 clamp(2.6rem,5vw,4.4rem); }
.hero::before,.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 78% at 80% -12%, rgba(255,178,76,.55), rgba(251,107,75,.16) 36%, transparent 62%);
  animation:sun 15s ease-in-out infinite alternate; }
@keyframes sun{ from{ opacity:.7; transform:translateY(0); } to{ opacity:1; transform:translateY(-8px); } }
.hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(2.6rem,6vw,4.4rem); margin:18px 0 0; }
.hero__sub{ margin-top:22px; font-size:clamp(1.06rem,1.6vw,1.22rem); color:var(--muted); max-width:40ch; }
.hero__cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.trust{ margin-top:32px; display:flex; flex-wrap:wrap; gap:11px 14px; }
.trust span{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500; color:var(--ink);
  background:rgba(255,255,255,.66); border:1px solid var(--line); border-radius:999px; padding:8px 14px; }
.trust span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sun); }
.hero__media{ position:relative; }
.arch{ position:relative; border-radius:200px 200px 28px 28px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); background:var(--deep); }
.arch img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.arch::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); pointer-events:none; }
.arch__badge{ position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:10px;
  background:rgba(12,43,67,.72); backdrop-filter:blur(6px); color:#fff; padding:11px 16px; border-radius:14px; }
.arch__badge b{ font-family:"Newsreader",serif; font-size:1.5rem; line-height:1; font-weight:600; }
.arch__badge small{ font-size:.72rem; color:rgba(255,255,255,.82); letter-spacing:.04em; }
.seal{ position:absolute; right:-14px; top:26%; width:118px; height:118px; border-radius:50%; background:var(--sun); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.05;
  box-shadow:0 18px 34px -16px rgba(232,84,47,.9), inset 0 0 0 4px rgba(255,255,255,.35); transform:rotate(8deg); }
.seal b{ font-family:"Newsreader",serif; font-size:2.1rem; font-weight:600; }
.seal small{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

/* Inner page hero */
.page-hero{ position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#FFE7C4 0%,#FFD9C0 14%,#FBE6D6 38%,var(--sand) 78%);
  padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(2.6rem,5vw,4rem); }
.crumbs{ display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none; padding:0; margin:0 0 clamp(1.6rem,3vw,2.6rem); font-size:.86rem; color:var(--muted); }
.crumbs li + li::before{ content:"/"; margin-right:8px; opacity:.5; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--deep); text-decoration:underline; }
.page-hero__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,64px); align-items:center; }
.page-hero--solo .page-hero__grid{ grid-template-columns:1fr; max-width:820px; }
.page-hero h1{ font-size:clamp(2.2rem,4.8vw,3.5rem); margin-top:14px; }
.page-hero .lede{ margin-top:20px; font-size:clamp(1.06rem,1.5vw,1.2rem); color:var(--muted); max-width:58ch; }
.facts{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:26px 26px 22px; box-shadow:var(--shadow); }
.facts .price{ display:flex; align-items:baseline; gap:12px; padding-bottom:16px; border-bottom:1px dashed var(--line); }
.facts .price b{ font-family:"Newsreader",serif; font-weight:600; font-size:3.2rem; line-height:1; color:var(--deep); }
.facts .price span{ color:var(--muted); font-size:.92rem; line-height:1.3; }
.facts ul{ list-style:none; margin:14px 0 0; padding:0; }
.facts li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; font-size:.96rem; border-bottom:1px solid var(--line); }
.facts li:last-child{ border-bottom:0; }
.facts li span{ color:var(--muted); }
.facts li b{ font-weight:600; text-align:right; }
.facts .btn{ width:100%; margin-top:14px; }

/* Sections */
section{ scroll-margin-top:96px; }
.band{ padding:clamp(3.4rem,6.5vw,5.8rem) 0; }
.band--shell{ background:var(--shell); }
.band--mist{ background:var(--mist); }
.band--tight{ padding:clamp(2.4rem,4.5vw,3.6rem) 0; }
.head-2{ max-width:64ch; }
.head-2 h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); margin-top:6px; }
.head-2 p{ margin-top:16px; color:var(--muted); font-size:1.07rem; }
.head-2--center{ margin-inline:auto; text-align:center; }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--sand); border:1px solid var(--line); border-radius:20px; padding:28px 24px; transition:transform .2s ease, box-shadow .2s ease; }
.band--shell .card,.band--mist .card{ background:#fff; }
.card .ico{ width:46px; height:46px; border-radius:13px; background:var(--mist); color:var(--deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.card .ico svg{ width:24px; height:24px; }
.card h3{ font-size:1.28rem; }
.card p{ margin-top:9px; color:var(--muted); font-size:.97rem; }
a.card{ text-decoration:none; display:flex; flex-direction:column; }
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:#e2d5c2; }
a.card .more{ margin-top:auto; padding-top:16px; font-weight:700; font-size:.92rem; color:var(--deep); display:inline-flex; align-items:center; gap:7px; }
a.card .more::after{ content:"→"; color:var(--sun-600); transition:transform .15s; }
a.card:hover .more::after{ transform:translateX(4px); }

.services{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.svc{ display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
a.svc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.svc .ico{ width:48px; height:48px; flex:none; border-radius:13px; background:var(--shell); color:var(--sun-600); display:flex; align-items:center; justify-content:center; }
.svc .ico svg{ width:25px; height:25px; }
.svc h3{ font-size:1.22rem; }
.svc p{ margin-top:7px; color:var(--muted); font-size:.97rem; }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:46px; }
.steps--5{ grid-template-columns:repeat(5,1fr); }
.step{ position:relative; padding-top:24px; border-top:2px solid var(--line); }
.step::before{ content:""; position:absolute; top:-2px; left:0; width:44px; height:2px; background:var(--sun); }
.step .num{ font-family:"Newsreader",serif; font-style:italic; font-weight:500; font-size:1.5rem; color:var(--sun-600); }
.step h3{ font-size:1.2rem; margin-top:8px; }
.step p{ margin-top:9px; color:var(--muted); font-size:.97rem; }
.method-note,.note{ margin-top:36px; padding:22px 26px; background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--sun); border-radius:16px; max-width:76ch; font-size:1.03rem; }
.note b{ color:var(--deep); }
.note--plain{ margin-top:0; }

/* Tub types */
.tubs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.tub{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px 26px; display:flex; flex-direction:column; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
a.tub:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.tub .ico{ width:48px; height:48px; color:var(--deep); margin-bottom:16px; }
.tub h3{ font-size:1.3rem; }
.tub p{ margin-top:9px; color:var(--muted); font-size:.97rem; flex:1; }
.tub .price{ margin-top:18px; font-weight:700; color:var(--deep); font-size:.95rem; letter-spacing:.02em; padding-top:15px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; }
.tub .price i{ font-style:normal; color:var(--sun-600); }
.tubs-foot{ margin-top:26px; color:var(--muted); font-size:.96rem; }
.tubs-foot a{ color:var(--deep); font-weight:600; }

/* Pricing band */
.price-band{ position:relative; isolation:isolate; background:var(--deep); color:#fff; overflow:hidden; }
.price-band::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 70% at 12% -10%, rgba(28,111,166,.55), transparent 60%),
             radial-gradient(80% 70% at 95% 120%, rgba(251,107,75,.3), transparent 55%); }
.price-band .wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(3.2rem,6vw,5.2rem) 24px; }
.price-band .eyebrow{ color:#fff; }
.price-band h2{ color:#fff; font-size:clamp(2rem,4vw,2.9rem); margin-top:6px; }
.price-band p.lede{ margin-top:16px; color:rgba(255,255,255,.8); font-size:1.07rem; }
.price-tag{ display:flex; align-items:baseline; gap:14px; }
.price-tag .big{ font-family:"Newsreader",serif; font-weight:600; font-size:clamp(3.6rem,9vw,5.8rem); line-height:1; }
.price-tag .lbl{ color:rgba(255,255,255,.82); font-size:1.02rem; max-width:18ch; }
.incl{ list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
.incl li{ position:relative; padding-left:30px; color:rgba(255,255,255,.92); font-size:.98rem; }
.incl li svg{ position:absolute; left:0; top:3px; width:19px; height:19px; color:var(--gold); }
.price-band .btn{ margin-top:30px; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:8px; text-align:center; }
.stat{ padding:8px 10px; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat .n{ font-family:"Newsreader",serif; font-weight:600; font-size:clamp(2.4rem,5vw,3.5rem); line-height:1; color:var(--deep); }
.stat .l{ margin-top:10px; color:var(--muted); font-size:.98rem; }
.stat .n em{ font-style:italic; color:var(--sun-600); }

/* FAQ */
.faq{ margin-top:40px; max-width:860px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 46px 22px 2px; position:relative;
  font-family:"Newsreader",serif; font-weight:600; font-size:1.22rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-8px;
  border-right:2px solid var(--sun); border-bottom:2px solid var(--sun); transform:rotate(45deg); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .ans{ padding:0 46px 24px 2px; color:var(--muted); font-size:1.03rem; }
.faq .ans a{ color:var(--deep); font-weight:600; }
.faq-group{ margin-top:54px; }
.faq-group:first-of-type{ margin-top:0; }
.faq-group h2{ font-size:1.7rem; }
.faq-group .faq{ margin-top:18px; }

/* Area */
.area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; margin-top:8px; }
.area-grid h2{ font-size:clamp(2rem,4vw,2.9rem); margin-top:6px; }
.area-grid .lead{ margin-top:16px; color:var(--muted); font-size:1.07rem; max-width:46ch; }
.chips{ display:flex; flex-wrap:wrap; gap:11px; margin-top:22px; }
.chips span,.chips a{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-weight:500; font-size:.95rem; text-decoration:none; }
.chips a{ transition:background-color .15s, color .15s, border-color .15s; }
.chips a::after{ content:" →"; color:var(--sun-600); }
.chips a:hover{ background:var(--deep); color:#fff; border-color:var(--deep); }
.area-call{ margin-top:24px; font-size:1.03rem; }
.area-call a,.tlink{ color:var(--deep); font-weight:700; text-decoration:none; border-bottom:2px solid var(--sun); }
.map{ background:linear-gradient(180deg,#DCEAF3,#EAF1F6); border:1px solid #d5e3ee; border-radius:28px; padding:18px; box-shadow:var(--shadow-sm); }
.map svg{ width:100%; height:auto; }
.map text{ font-family:"Figtree",sans-serif; font-size:11px; font-weight:600; fill:var(--deep); }
.map .pin{ fill:var(--sun); stroke:#fff; stroke-width:2; }
.map a:hover text{ fill:var(--sun-600); }

/* Prose */
.split{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(30px,5vw,68px); align-items:start; }
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:18px; }
.prose h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-top:52px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.32rem; margin-top:34px; }
.prose p,.prose li{ color:#34444f; font-size:1.05rem; }
.prose a{ color:var(--deep); font-weight:600; text-decoration-color:var(--sun); text-underline-offset:3px; }
.prose ul,.prose ol{ padding-left:22px; }
.prose li + li{ margin-top:8px; }
.prose strong{ color:var(--ink); }
.aside{ position:sticky; top:98px; display:grid; gap:18px; }
.aside-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow-sm); }
.aside-card h3{ font-size:1.3rem; }
.aside-card p{ color:var(--muted); font-size:.95rem; margin-top:8px; }
.aside-card .btn{ width:100%; margin-top:14px; }
.aside-card--deep{ background:var(--deep); color:#fff; border-color:var(--deep); }
.aside-card--deep h3{ color:#fff; }
.aside-card--deep p{ color:rgba(255,255,255,.78); }
.aside-links{ list-style:none; margin:12px 0 0; padding:0; }
.aside-links li + li{ border-top:1px solid var(--line); }
.aside-links a{ display:flex; justify-content:space-between; gap:10px; padding:11px 0; text-decoration:none; font-weight:600; font-size:.96rem; }
.aside-links a::after{ content:"→"; color:var(--sun-600); }
.aside-links a:hover{ color:var(--deep); }

/* Check / cross lists */
.checks,.xlist{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.checks--2,.xlist--2{ grid-template-columns:1fr 1fr; gap:12px 28px; }
.checks li,.xlist li{ position:relative; padding-left:34px; font-size:1.02rem; color:#34444f; }
.checks li::before{ content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; background:#DDEEF7; }
.checks li::after{ content:""; position:absolute; left:7px; top:8px; width:8px; height:5px; border-left:2px solid var(--deep); border-bottom:2px solid var(--deep); transform:rotate(-45deg); }
.xlist li::before{ content:"×"; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; background:#FCE4DB; color:#B5411F; font-weight:700; line-height:21px; text-align:center; }
.prose .checks,.prose .xlist{ padding-left:0; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 28px; }
.panel h3{ font-size:1.4rem; }
.panel > p{ color:var(--muted); margin-top:10px; }
.panel--deep{ background:var(--deep); color:#fff; border-color:var(--deep); }
.panel--deep h3{ color:#fff; }
.panel--deep .checks li{ color:rgba(255,255,255,.9); }
.panel--deep .checks li::before{ background:rgba(255,255,255,.14); }
.panel--deep .checks li::after{ border-color:var(--gold); }

/* Table */
.tbl-wrap{ margin-top:40px; overflow-x:auto; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); }
table.tbl{ width:100%; border-collapse:collapse; min-width:620px; font-size:.99rem; }
.tbl th,.tbl td{ text-align:left; padding:16px 20px; vertical-align:top; border-bottom:1px solid var(--line); }
.tbl thead th{ font-family:"Newsreader",serif; font-size:1.15rem; font-weight:600; background:var(--shell); }
.tbl thead th.hl{ background:var(--deep); color:#fff; }
.tbl tbody th{ font-weight:600; color:var(--muted); width:24%; font-size:.92rem; }
.tbl td.hl{ background:#F3F8FB; font-weight:600; color:var(--deep); }
.tbl tr:last-child th,.tbl tr:last-child td{ border-bottom:0; }

/* Coating diagram */
.layers{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px; }
.layer-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; }
.layer-card h3{ font-size:1.3rem; }
.layer-card p{ color:var(--muted); font-size:.96rem; margin-top:8px; }
.layer-card svg{ width:100%; height:auto; margin-bottom:18px; border-radius:14px; }
.layer-card--hl{ border-color:var(--deep); box-shadow:var(--shadow-sm); }

/* Timeline */
.timeline{ margin-top:40px; display:grid; gap:0; max-width:780px; }
.tl{ display:grid; grid-template-columns:120px 1fr; gap:26px; position:relative; padding-bottom:30px; }
.tl:last-child{ padding-bottom:0; }
.tl .when{ font-family:"Newsreader",serif; font-style:italic; font-size:1.25rem; color:var(--sun-600); text-align:right; padding-top:1px; }
.tl .what{ position:relative; padding-left:30px; border-left:2px solid var(--line); padding-bottom:4px; }
.tl .what::before{ content:""; position:absolute; left:-8px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px rgba(251,107,75,.18); }
.tl h3{ font-size:1.2rem; }
.tl p{ color:var(--muted); margin-top:6px; font-size:.99rem; }

/* Contact / forms */
.contact-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,5vw,56px); margin-top:44px; }
.contact-info .row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-info .row:first-child{ padding-top:0; }
.contact-info .ico{ width:44px; height:44px; flex:none; border-radius:13px; background:var(--mist); color:var(--deep); display:flex; align-items:center; justify-content:center; }
.band--mist .contact-info .ico{ background:#fff; }
.contact-info .ico svg{ width:21px; height:21px; }
.contact-info .k{ font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:600; }
.contact-info .v{ font-size:1.16rem; font-weight:600; margin-top:3px; }
.contact-info .v a{ text-decoration:none; color:var(--ink); }
.contact-info .v a:hover{ color:var(--deep); }
.contact-info .sub{ color:var(--muted); font-size:.92rem; margin-top:3px; }
.form{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,36px); box-shadow:var(--shadow); }
.form h3{ font-size:1.5rem; }
.form .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.form .grid2 .field{ margin-top:0; }
.field{ display:flex; flex-direction:column; gap:7px; margin-top:16px; }
.field label{ font-size:.84rem; font-weight:600; color:var(--ink); }
.field input,.field select,.field textarea{ font-family:inherit; font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--sand); width:100%; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--deep); background:#fff; }
.field textarea{ resize:vertical; min-height:104px; }
.form .btn{ width:100%; margin-top:22px; }
.form__note{ margin-top:14px; font-size:.84rem; color:var(--muted); text-align:center; }
.form__note a{ color:var(--deep); font-weight:600; }
.form__msg{ margin-top:16px; padding:13px 16px; border-radius:12px; font-size:.95rem; display:none; }
.form__msg.ok{ display:block; background:#E7F1F8; color:var(--deep); border:1px solid #C7DCEC; }
.form__msg.err{ display:block; background:#FCE9E2; color:#9a3a1c; border:1px solid #F2CBBA; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* CTA band */
.cta-band{ position:relative; isolation:isolate; overflow:hidden; background:var(--deep); color:#fff; }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 90% at 0% 0%, rgba(28,111,166,.6), transparent 60%), radial-gradient(60% 80% at 100% 110%, rgba(251,107,75,.34), transparent 55%); }
.cta-band .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(3.2rem,6vw,5rem); }
.cta-band .eyebrow{ color:#fff; }
.cta-band h2{ color:#fff; font-size:clamp(2rem,4vw,2.9rem); }
.cta-band p.lede{ margin-top:16px; color:rgba(255,255,255,.82); font-size:1.07rem; max-width:46ch; }
.cta-band .how{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; counter-reset:how; }
.cta-band .how li{ counter-increment:how; position:relative; padding-left:46px; color:rgba(255,255,255,.92); }
.cta-band .how li::before{ content:counter(how); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; font-family:"Newsreader",serif; font-style:italic; color:var(--gold); }
.cta-band .how a{ color:#fff; font-weight:700; }
.cta-band .form{ color:var(--ink); }

/* Wave divider */
.wave{ display:block; width:100%; height:44px; margin-bottom:-1px; }

/* Footer */
.site-foot{ position:relative; isolation:isolate; background:#08223a; color:rgba(255,255,255,.74); padding:58px 0 30px; overflow:hidden; }
.site-foot::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(70% 60% at 90% -10%, rgba(255,178,76,.18), transparent 60%); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; }
.site-foot .brand{ color:#fff; }
.site-foot .tagline{ margin-top:14px; max-width:36ch; font-size:.96rem; }
.foot-contact{ display:flex; flex-direction:column; gap:7px; margin-top:20px; }
.foot-contact a{ color:#fff; text-decoration:none; font-weight:600; font-size:1.04rem; }
.foot-contact .meta{ color:rgba(255,255,255,.66); font-weight:400; font-size:.92rem; }
.foot-col h4{ font-family:"Figtree",sans-serif; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700; }
.foot-col ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.foot-col a{ color:rgba(255,255,255,.86); text-decoration:none; font-size:.96rem; }
.foot-col a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--sun); text-underline-offset:4px; }
.site-foot hr{ border:none; border-top:1px solid var(--line-d); margin:38px 0 22px; }
.site-foot .legal{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.6); }
.site-foot .legal a{ color:inherit; }

.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; grid-template-columns:1fr 1fr; box-shadow:0 -8px 24px rgba(12,43,67,.18); }
.callbar a{ text-decoration:none; text-align:center; font-weight:700; padding:15px 8px; font-size:.98rem; }
.callbar a:first-child{ background:var(--sun); color:var(--ink); }
.callbar a:last-child{ background:var(--deep); color:#fff; }
.callbar svg{ display:inline-block; width:17px; height:17px; vertical-align:-3px; margin-right:7px; }

.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in{ opacity:1; transform:none; }

.err-page{ text-align:center; padding:clamp(4rem,10vw,8rem) 0; }
.err-page .big{ font-family:"Newsreader",serif; font-style:italic; font-size:clamp(5rem,16vw,9rem); line-height:1; color:var(--sun-600); }

/* Responsive */
@media (max-width:1180px){
  .nav .tel span{ display:none; }
  .nav .navlink{ padding:9px 8px; font-size:.92rem; }
}
@media (max-width:980px){
  .cards,.cards--3{ grid-template-columns:repeat(2,1fr); }
  .steps,.steps--5{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .aside{ position:static; grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .stat + .stat{ border-left:0; }
  .nav{ display:none; }
  .menu-btn{ display:flex; }
  .nav.open{ display:flex; position:absolute; top:100%; left:0; right:0; height:calc(100vh - 74px); height:calc(100dvh - 74px);
    flex-direction:column; align-items:stretch; gap:2px; overflow-y:auto; overscroll-behavior:contain;
    background:var(--sand); border-top:1px solid var(--line); padding:14px 24px 150px; z-index:99; margin-left:0; }
  .nav.open .has-sub{ width:100%; }
  .nav.open .sub a{ padding:11px 14px; }
  .nav.open .sub a small{ display:none; }
  .nav.open .sub--wide{ grid-template-columns:1fr; }
  .nav.open .navlink{ padding:14px 12px; font-size:1.08rem; justify-content:space-between; width:100%; color:var(--ink); }
  .nav.open .sub{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:var(--shell); min-width:0; display:none; margin:2px 0 8px; }
  .nav.open .has-sub.open .sub{ display:block; }
  .nav.open .has-sub.open .chev{ transform:rotate(-135deg) translateY(-2px); }
  .nav.open .tel{ padding:14px 12px; font-size:1.1rem; }
  .nav.open .tel span{ display:inline; }
  .nav.open .btn{ margin-top:10px; padding:16px; }
  .topbar .tb-left span:nth-child(n+2){ display:none; }
}
@media (max-width:840px){
  .hero__grid,.page-hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:440px; }
  .seal{ right:6px; width:100px; height:100px; }
  .seal b{ font-size:1.8rem; }
  .services,.tubs,.area-grid,.contact-grid,.incl,.two-col,.layers,.cards--2{ grid-template-columns:1fr; }
  .price-band .wrap,.cta-band .wrap{ grid-template-columns:1fr; }
  .checks--2,.xlist--2{ grid-template-columns:1fr; }
  .callbar{ display:grid; }
  body{ padding-bottom:54px; }
  .tl{ grid-template-columns:78px 1fr; gap:16px; }
  .tl .when{ font-size:1.05rem; }
}
@media (max-width:560px){
  .cards,.cards--3,.steps,.steps--5{ grid-template-columns:1fr; }
  .form .grid2{ grid-template-columns:1fr; }
  .aside{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .topbar .tb-right a.tb-mail{ display:none; }
  .brand{ font-size:1.28rem; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* WordPress */
.admin-bar .site-head{ top:32px; }
@media (max-width:782px){ .admin-bar .site-head{ top:46px; } }
@media (max-width:600px){ .admin-bar .site-head{ top:0; } }
.navigation.pagination{ margin-top:36px; }
.navigation.pagination .nav-links{ display:flex; gap:8px; flex-wrap:wrap; }
.navigation.pagination .page-numbers{ padding:9px 15px; border:1px solid var(--line); border-radius:10px; text-decoration:none; background:#fff; }
.navigation.pagination .page-numbers.current{ background:var(--deep); color:#fff; border-color:var(--deep); }
.prose img{ border-radius:16px; height:auto; }
.screen-reader-text{ position:absolute; left:-9999px; }

/* Fluent Forms, styled as the theme's estimate form */
.ht-ff.form .fluentform{ margin-top:4px; }
.ht-ff.form .fluentform fieldset{ border:0; padding:0; margin:0; min-width:0; }
.ht-ff.form .fluentform .ff-el-group{ margin:16px 0 0; }
.ht-ff.form .fluentform .ff-t-container{ display:flex; gap:16px; margin:0; width:100%; }
.ht-ff.form .fluentform .ff-t-cell{ flex:1 1 0; padding:0 !important; min-width:0; }
.ht-ff.form .fluentform .ff-el-input--label{ margin-bottom:7px; display:block; }
.ht-ff.form .fluentform .ff-el-input--label label{ font-family:inherit; font-size:.84rem; font-weight:600; color:var(--ink); }
.ht-ff.form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{ color:var(--sun-600); }
.ht-ff.form .fluentform .ff-el-form-control{ font-family:inherit; font-size:1rem; line-height:1.4; color:var(--ink); height:auto;
  padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--sand); width:100%; box-shadow:none; }
.ht-ff.form .fluentform .ff-el-form-control:focus{ outline:none; border-color:var(--deep); background:#fff; box-shadow:none; }
.ht-ff.form .fluentform textarea.ff-el-form-control{ min-height:104px; resize:vertical; }
.ht-ff.form .fluentform .ff_upload_btn.ff-btn{ display:inline-block; background:#fff !important; color:var(--deep) !important; border:1.5px dashed #cdbfa8 !important;
  border-radius:12px; padding:12px 18px; font-family:inherit; font-weight:600; font-size:.95rem; cursor:pointer; }
.ht-ff.form .fluentform .ff_upload_btn.ff-btn:hover{ border-color:var(--deep) !important; }
.ht-ff.form .fluentform .ff_submit_btn_wrapper{ margin-top:22px; }
.ht-ff.form .fluentform .ff-btn-submit{ width:100%; background:var(--sun) !important; color:var(--ink) !important; border:2px solid var(--sun) !important;
  border-radius:999px; padding:15px 26px; font-family:inherit; font-weight:600; font-size:1rem; line-height:1; cursor:pointer; min-width:0;
  box-shadow:0 12px 24px -14px rgba(232,84,47,.8); transition:background-color .15s, color .15s, transform .15s; }
.ht-ff.form .fluentform .ff-btn-submit:hover{ background:var(--sun-600) !important; border-color:var(--sun-600) !important; color:#fff !important; opacity:1; transform:translateY(-1px); }
.ht-ff.form .fluentform .ff-el-is-error .ff-el-form-control{ border-color:var(--sun-600); }
.ht-ff.form .fluentform .text-danger,.ht-ff.form .fluentform .error{ color:#9a3a1c; font-size:.86rem; margin-top:6px; }
.ht-ff.form .ff-message-success{ margin-top:16px; padding:14px 16px; border-radius:12px; background:#E7F1F8; color:var(--deep); border:1px solid #C7DCEC; box-shadow:none; }
.ht-ff.form .ff-errors-in-stack{ margin-top:14px; }
.cta-band .ht-ff{ color:var(--ink); }
@media (max-width:560px){ .ht-ff.form .fluentform .ff-t-container{ display:block; } }

.brand__logo{ width:auto; height:54px; max-width:min(260px,58vw); object-fit:contain; }
@media (max-width:840px){ .brand__logo{ height:46px; } }
.site-foot .brand__logo{ height:54px; max-width:260px; }

/* Larger, easier-to-read type on phones and small tablets */
@media (max-width:840px){
  html{ font-size:115%; }
  body{ font-size:1rem; line-height:1.6; }
  .card p,.svc p,.step p,.tub p,.tl p,.faq .ans,.prose p,.prose li,.checks li,.xlist li,.head-2 p,.page-hero .lede,.hero__sub,.aside-card p,.tubs-foot{ font-size:1rem; }
  .facts li,.tbl,.form__note,.contact-info .sub,.foot-col a,.site-foot .tagline,.foot-contact .meta{ font-size:.95rem; }
  .eyebrow{ font-size:.72rem; letter-spacing:.14em; }
  .topbar{ font-size:13px; }
  .topbar .wrap{ flex-wrap:nowrap; white-space:nowrap; }
  .facts .price b{ font-size:2.6rem; }
  .hero h1{ font-size:clamp(2.3rem,9.5vw,3.2rem); }
  .page-hero h1{ font-size:clamp(2rem,8vw,2.8rem); }
  .head-2 h2,.area-grid h2,.price-band h2,.cta-band h2{ font-size:clamp(1.75rem,7vw,2.4rem); }
  .card,.tub,.panel{ padding:24px 22px; }
  .brand{ font-size:1.22rem; }
  .field label,.ht-ff.form .fluentform .ff-el-input--label label{ font-size:.9rem; }
  .trust span{ font-size:.86rem; }
  .wrap{ padding-inline:20px; }
}

/* Pop-up estimate form */
.ht-modal[hidden]{ display:none; }
.ht-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(16px,5vh,56px) 16px; background:rgba(8,34,58,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease; }
.ht-modal.is-open{ opacity:1; }
.ht-modal__box{ position:relative; width:100%; max-width:580px; margin:auto; transform:translateY(14px); transition:transform .22s ease; }
.ht-modal.is-open .ht-modal__box{ transform:none; }
.ht-modal .form{ box-shadow:0 40px 90px -30px rgba(0,0,0,.55); }
.ht-modal .form h3{ padding-right:44px; }
.ht-modal .reveal{ opacity:1 !important; transform:none !important; }
.ht-modal__close{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--sand); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 3px; }
.ht-modal__close:hover{ background:var(--shell); }
body.ht-modal-open{ overflow:hidden; }
@media (max-width:560px){
  .ht-modal{ padding:10px 10px 24px; }
  .ht-modal .form{ border-radius:18px; padding:22px 18px; }
}

/* Before / after photos */
.ba-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:44px; }   /* one large pair per row */
.ph-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.ba,.ph{ margin:0; }
.ba__pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.ba__img{ position:relative; background:var(--shell); }
.ph .ba__img{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.ba__img img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ba__tag{ position:absolute; left:12px; top:12px; background:rgba(12,43,67,.78); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px; backdrop-filter:blur(4px); }
.ba__tag--after{ background:var(--sun); color:var(--ink); }
.ba figcaption,.ph figcaption{ margin-top:12px; color:var(--muted); font-size:.95rem; }
.ph figcaption{ font-family:"Newsreader",serif; font-size:1.15rem; color:var(--ink); font-weight:600; }
.ph-missing{ margin-top:24px; padding:14px 18px; border:1.5px dashed #cdbfa8; border-radius:14px; font-size:.9rem; color:var(--muted); background:#fff; }
.ph-missing code{ font-size:.86em; }
/* A lone pair (or the odd one out) takes the full width instead of sitting small in half a row */
.ba-grid > .ba:last-child:nth-child(odd){ grid-column:1/-1; }
.ba-grid > .ba:only-child .ba__pair{ gap:8px; }
.ph-grid:has(> .ph:only-child){ grid-template-columns:minmax(0,820px); }
.ph-grid:has(> .ph:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); }
.ph-grid:has(> .ph:nth-child(3):last-child){ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .ba-grid{ grid-template-columns:1fr; } .ph-grid,.ph-grid:has(> .ph:nth-child(3):last-child){ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ba__pair{ grid-template-columns:1fr; } .ph-grid,.ph-grid:has(> .ph:nth-child(2):last-child),.ph-grid:has(> .ph:nth-child(3):last-child){ grid-template-columns:1fr; } .ba__tag{ font-size:.68rem; } }