/* GNB Shade & Security: site styles ("Home Refresh" look, B2).
   Lora for headings, Barlow for everything else. Colours from the GNB logo plus a warm sand. */

:root {
  --ink: #2a2622;
  --ink-2: #5b544d;
  --muted: #6e665e;
  --line: #e6ddd1;
  --sand: #f7f2eb;
  --sand-2: #efe7dc;
  --white: #ffffff;
  --blue: #0a75a8;
  --blue-hover: #08628d;
  --blue-soft: #e8f3f9;
  --sky: #12a2df;
  --green: #5fbc23;
  --orange: #f8a952;
  --orange-hover: #f39b38;
  --star: #f2a71b;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --shadow: 0 24px 48px -26px rgba(42, 38, 34, .35);
  --wrap: 1220px;
  --gutter: clamp(18px, 4vw, 28px);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Barlow", Arial, sans-serif;
  --bar-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font: 400 18px/1.6 var(--sans); color: var(--ink-2); background: var(--white); -webkit-font-smoothing: antialiased; padding-bottom: var(--bar-h); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* A phone number never breaks across two lines. */
a[href^="tel:"] { white-space: nowrap; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { padding-left: 1.2em; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 4.6vw, 4rem); }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
h3 { font-size: 1.45rem; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0;
  background: var(--blue); color: #fff; font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .2s; white-space: nowrap;
}
.btn:hover { background: var(--blue-hover); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--call, .btn--dark { background: var(--ink); }
.btn--call:hover, .btn--dark:hover { background: #000; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sand); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.link-arrow { color: var(--blue); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .35em; }
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(3px); }
.kick, .eyebrow { display: block; font: 700 1rem/1.3 var(--sans); color: var(--blue); margin-bottom: 10px; letter-spacing: .01em; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 700 .82rem/1 var(--sans); padding: 7px 12px; border-radius: 999px; background: var(--sand); color: var(--ink); }
.pill svg { width: 15px; height: 15px; }
.pill--green { background: #eaf6e1; color: #2f6b12; }
.pill--orange { background: #fff0dc; color: #8a4f0d; }
.pill--blue { background: var(--blue-soft); color: var(--blue-hover); }
.stars { color: var(--star); letter-spacing: 1px; }
.fine { font-size: .85rem; color: var(--muted); }

/* ---------- offer strip + header ---------- */
.offer-strip { background: var(--orange); color: var(--ink); font: 600 .95rem/1.4 var(--sans); }
.offer-strip .wrap { display: flex; justify-content: center; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; text-align: center; }
.offer-strip a { color: var(--ink); }
.offer-strip .extra { opacity: .9; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 10px 24px -20px rgba(42, 38, 34, .45); }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; min-height: 84px; }
.brand img { height: 44px; width: auto; }
.main-nav { display: flex; justify-content: center; gap: 4px 24px; flex-wrap: wrap; }
.main-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .98rem; padding: 6px 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--ink); }
.main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sky); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.header-actions .phone { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sand); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 22px; height: 22px; }

.menu-sheet { position: fixed; inset: 0; z-index: 70; background: #fff; padding: 20px var(--gutter) 120px; overflow-y: auto; transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.menu-sheet.is-open { transform: none; }
.menu-sheet__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.menu-sheet__top img { height: 38px; width: auto; }
.menu-close { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sand); font-size: 1.5rem; cursor: pointer; color: var(--ink); }
.menu-sheet nav a { display: flex; justify-content: space-between; padding: 17px 2px; border-bottom: 1px solid var(--line); font: 600 1.3rem var(--serif); color: var(--ink); text-decoration: none; }
.menu-sheet nav a::after { content: "→"; color: var(--muted); font-family: var(--sans); }
.menu-contact { margin-top: 22px; padding: 18px; background: var(--sand); border-radius: var(--r); font-size: .98rem; }
.menu-contact b { color: var(--ink); }

.mobile-bar { display: none; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 8vw, 110px) 0; }
.section--tight { padding: clamp(44px, 6vw, 72px) 0; }
.section--sand { background: var(--sand); }
.section-head { max-width: 760px; margin-bottom: clamp(26px, 4vw, 40px); }
.section-head p { font-size: 1.1rem; }
.section-head--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; }

/* ---------- hero: photo with a panel over it ---------- */
/* The photo and panel share one grid cell. The white panel starts the same distance down on every page,
   and the photo ends 64px above the panel's bottom edge, so the panel always overlaps it the same way
   and never climbs up under the menu on a short window. */
.hero { position: relative; display: grid; --hero-top: clamp(150px, 26vh, 280px); }
.hero > .hero__img, .hero > .hero__panel { grid-area: 1 / 1; min-width: 0; }
.hero__img { position: relative; }
.hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__panel { position: relative; align-self: start; justify-self: start; margin: var(--hero-top) 0 -64px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); width: min(720px, calc(100vw - 2 * var(--gutter))); background: #fff; border-top: 6px solid var(--sky); padding: 42px 48px 40px; box-shadow: var(--shadow); z-index: 2; }
.hero__panel h1 { margin-bottom: 18px; }
.hero__panel > p { font-size: 1.1rem; margin-bottom: 26px; }
.hero--page h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); }
.after-hero { padding-top: clamp(110px, 12vw, 150px); }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-weight: 600; font-size: .95rem; color: var(--ink); }
.trust li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 6px; }
.page-top { padding: clamp(40px, 6vw, 72px) 0 clamp(26px, 4vw, 40px); background: var(--sand); }
.page-top h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); }
.page-top .lede { font-size: 1.15rem; max-width: 720px; margin: 0; }

/* ---------- ideas by room ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.tabs button { appearance: none; border: 0; background: var(--sand); color: var(--ink); font: 600 1.05rem var(--sans); padding: 12px 22px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.tabs button:hover { background: var(--sand-2); }
.tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.room { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.room img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: var(--r); }
.room h3 { font-size: 2.2rem; margin-bottom: 10px; }
.checklist { list-style: none; padding: 0; margin: 22px 0 28px; border-top: 1px solid var(--line); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.checklist li::before { content: "✓"; color: #fff; background: var(--green); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; flex: none; margin-top: 2px; }
.checklist b, .checklist a.name { color: var(--ink); font-weight: 600; }
.checklist a.name { text-decoration: none; }
.checklist a.name:hover { text-decoration: underline; }
.checklist span { display: block; font-size: .96rem; }

/* ---------- split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--r); }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.ticks li::before { content: "✓"; color: #fff; background: var(--green); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; margin-top: 2px; }
.ticks b { color: var(--ink); }

/* ---------- start small ---------- */
.step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.step-cards li { background: #fff; border-radius: var(--r); padding: 28px; }
.step-cards li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; font: 600 1.6rem var(--serif); margin-bottom: 16px; }
.step-cards h3 { font-size: 1.5rem; margin-bottom: 6px; }
.step-cards p { margin: 0; font-size: 1rem; }

/* ---------- deals (orange block) ---------- */
.deals { display: grid; gap: 22px; }
.band { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); color: #e8e1d8; }
.band__text { padding: clamp(28px, 5vw, 56px); }
.band__media { position: relative; min-height: 340px; }
.band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band h2 { color: #fff; }
.band--offer { background: var(--orange); color: var(--ink); }
.band--offer h2 { color: var(--ink); }
.band--offer .eyebrow { color: var(--ink) !important; text-transform: none; }
.band--offer p { color: var(--ink); }
.band--offer .btn--light, .band--offer .btn { background: var(--ink); color: #fff; }
.band--offer .fine { color: #45362a; opacity: 1; }
.offer-tiers { display: flex; margin: 22px 0 28px; border-top: 1px solid rgba(42, 38, 34, .25); border-bottom: 1px solid rgba(42, 38, 34, .25); }
.offer-tiers div { flex: 1; padding: 16px 0; }
.offer-tiers div + div { border-left: 1px solid rgba(42, 38, 34, .25); padding-left: 18px; }
.offer-tiers b { display: block; font: 600 clamp(2.2rem, 3.4vw, 2.8rem)/1 var(--serif); color: var(--ink); }
.offer-tiers span { font-size: .92rem; }
.deal-card { display: grid; grid-template-columns: 200px 1fr; background: var(--orange); border-radius: var(--r); overflow: hidden; color: var(--ink); }
.deal-card > img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; }
.deal-card > div { padding: 22px; }
.deal-card h3 { margin: 10px 0 6px; }
.deal-badge { display: inline-block; background: var(--ink); color: #fff; font-weight: 700; font-size: .85rem; padding: 5px 12px; border-radius: 999px; }
.deal-card .btn { background: var(--ink); }

/* ---------- gallery + jobs ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.gallery figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--sand); }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { position: absolute; left: 10px; bottom: 10px; background: #fff; color: var(--ink); font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
.job-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.job-filter button { appearance: none; border: 0; background: var(--sand); color: var(--ink); font: 600 .98rem var(--sans); padding: 11px 18px; border-radius: 999px; cursor: pointer; }
.job-filter button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.job-card { background: #fff; }
.job-card__img { position: relative; aspect-ratio: 4 / 3; background: var(--sand); border-radius: var(--r); overflow: hidden; }
.job-card__img img { width: 100%; height: 100%; object-fit: cover; }
.job-count { position: absolute; right: 10px; bottom: 10px; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.job-card__body { padding: 14px 2px 0; }
.job-card__body h3 { margin: 4px 0; font-size: 1.3rem; }
.job-card__body p { color: var(--muted); font-size: .95rem; margin: 0; }
.job-card__body .job-blurb { color: var(--ink-2); margin-top: 6px; }
.job-label { font-size: .85rem; font-weight: 700; color: var(--blue); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; }
.rating-card { background: #fff; border-radius: var(--r); padding: 26px; }
.rating-big { display: flex; align-items: baseline; gap: 10px; }
.rating-big b { font: 700 3.4rem/1 var(--serif); color: var(--ink); }
.rating-sources { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; font-size: .95rem; }
.rating-sources li { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote { background: #fff; border-radius: var(--r); padding: 28px; margin: 0; }
.quote p { font: 500 1.3rem/1.45 var(--sans); color: var(--ink); margin-bottom: 14px; }
.quote footer { font-size: .92rem; color: var(--muted); }

/* ---------- posts ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.post-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--r); }
.post-card > div { padding: 14px 2px 0; }
.post-card h3 { margin: 6px 0; font-size: 1.35rem; }
.post-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.post-card p { color: var(--ink-2); font-size: .98rem; margin: 0; }
.post h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-top: 6px; }
.post-cover { border-radius: var(--r); margin: 18px 0 26px; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.post-body h2 { font-size: 1.7rem; margin-top: 1.3em; }

/* ---------- faq ---------- */
.faq { 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: 20px 44px 20px 0; position: relative; font: 600 1.25rem/1.3 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--sand); color: var(--blue); display: grid; place-items: center; font: 700 1.3rem/1 var(--sans); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 20px; }
.faq details > div p:last-child { margin: 0; }

/* ---------- visit / quick quote ---------- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.visit .big-phone { font: 600 2rem var(--serif); color: var(--ink); text-decoration: none; display: inline-block; margin: 8px 0 14px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quick .full { grid-column: 1 / -1; }
.quick input, .quick select { height: 58px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 0 16px; font: 400 1rem var(--sans); color: var(--ink); width: 100%; }
.quick input:focus, .quick select:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.quick .err { grid-column: 1 / -1; color: #b3261e; font-weight: 600; font-size: .92rem; margin: 0; }
.quick-done { background: var(--sand); border-radius: var(--r); padding: 30px; }
/* Shown above the send button if an enquiry couldn't be sent; the details stay in the form */
.send-error { background: #fbe9e7; color: #8c1d18; border: 1px solid #f0c4be; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-weight: 600; }
.send-error a { color: #8c1d18; white-space: nowrap; }
.quick-done h3 { margin-bottom: 6px; }
.contact-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }

/* ---------- final call to action ---------- */
.cta-final { background: var(--sand); border-radius: var(--r-lg); padding: clamp(36px, 6vw, 64px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
.cta-final h2 { margin-bottom: 10px; }
.cta-final p { margin: 0; font-size: 1.1rem; }
.cta-final .btn-row { justify-content: flex-end; }

/* ---------- footer ---------- */
.site-footer { background: var(--sand); border-top: 1px solid var(--line); color: var(--ink-2); font-size: .97rem; padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer-logo { background: #fff; display: inline-block; padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 14px; }
.footer-logo img { height: 40px; width: auto; }
.site-footer h2 { font: 700 1rem var(--sans); color: var(--ink); margin-bottom: 12px; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .87rem; color: var(--muted); }
.footer-bottom a { color: var(--muted); text-decoration: underline; }

/* ---------- product pages ---------- */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.aside-card { position: sticky; top: 110px; background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--sky); border-radius: 4px 4px var(--r) var(--r); padding: 26px; box-shadow: var(--shadow); }
.aside-card h3, .aside-card h2 { margin: 10px 0 6px; }
.aside-card h2 { font-size: 1.45rem; }
.aside-card p { font-size: .98rem; }
.aside-card .btn { margin-top: 10px; }
.aside-card hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.mini-list { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 7px; font-size: .96rem; }
.mini-list li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 8px; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 1.5em; }
.prose h2:first-child { margin-top: 0; }
.uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 8px; padding: 0; list-style: none; }
.uses li { background: var(--sand); border-radius: var(--r-sm); padding: 14px 16px; font-weight: 700; color: var(--ink); }
.uses li span { display: block; font-weight: 400; color: var(--ink-2); font-size: .92rem; margin-top: 2px; }
.prow { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; margin-bottom: 8px; }
.prow > img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: center 20%; }

/* comparison */
.compare__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.option { display: grid; grid-row: span 9; grid-template-rows: subgrid; gap: 0; background: #fff; border-radius: var(--r); padding: 24px 22px; }
.option__head h3 { margin: 10px 0 12px; font-size: 1.6rem; }
.option .attr { border-top: 1px solid var(--line); padding: 10px 0; }
.option .attr span { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.option .attr p { margin: 0; font-size: .98rem; color: var(--ink); }
.option .attr--choose { background: var(--blue-soft); margin: 4px -10px 14px; padding: 12px 10px; border-radius: var(--r-sm); border-top: 0; }
.option .attr--choose span { color: var(--blue-hover); }
.option > .btn { align-self: end; }
.compare__notes { margin-top: 22px; background: #fff; border-radius: var(--r); padding: 22px 26px; }
.compare__notes h3 { font-size: 1.3rem; }
.compare__notes ul { margin: 6px 0 10px; padding-left: 1.1em; }
.compare__notes li { font-size: .98rem; margin-bottom: 6px; }

/* ---------- quote builder ---------- */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.builder { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--sky); border-radius: 4px 4px var(--r-lg) var(--r-lg); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 42px); }
.progress { display: flex; gap: 8px; margin-bottom: 24px; }
.progress span { flex: 1; height: 6px; border-radius: 6px; background: var(--sand-2); position: relative; overflow: hidden; }
.progress span.is-done::after, .progress span.is-current::after { content: ""; position: absolute; inset: 0; background: var(--blue); }
.step-label { font-size: .9rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.builder fieldset { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.builder legend { font: 600 clamp(1.6rem, 2.8vw, 2.2rem)/1.15 var(--serif); color: var(--ink); margin-bottom: 6px; padding: 0; }
.builder .hint { margin-bottom: 20px; }
.js .builder .step { display: none; }
.js .builder .step.is-active { display: block; animation: fade .35s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile label { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tile label img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.tile label span { padding: 12px 14px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile label span::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.tile input:checked + label { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.tile input:checked + label span::after { content: "✓"; background: var(--blue); border-color: var(--blue); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.tile input:focus-visible + label { outline: 3px solid var(--sky); outline-offset: 2px; }
.tile--plain label { grid-template-rows: 1fr; }
.tile--plain label span { padding: 18px 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip label { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--sand); color: var(--ink); font-weight: 600; cursor: pointer; }
.chip input:checked + label { background: var(--blue); color: #fff; }
.chip input:focus-visible + label { outline: 3px solid var(--sky); outline-offset: 2px; }
.q-group { margin-bottom: 22px; }
.q-group > .q-title { display: block; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 700; color: var(--ink); }
.field label small { font-weight: 500; color: var(--muted); }
.field input, .field textarea, .field select { font: 400 1rem var(--sans); padding: 15px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid var(--blue-soft); }
.field textarea { min-height: 110px; resize: vertical; }
.field .err { color: #b3261e; font-size: .9rem; font-weight: 600; display: none; }
.field.has-error input { border-color: #b3261e; }
.field.has-error .err { display: block; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.builder-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }
.btn-back { appearance: none; border: 0; background: none; font: 700 1rem var(--sans); color: var(--ink-2); cursor: pointer; padding: 12px 4px; }
.upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px dashed var(--line); border-radius: var(--r); padding: 16px; }
.upload-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.upload-previews img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.done { text-align: center; padding: 18px 0 4px; }
.done .tick { width: 76px; height: 76px; border-radius: 50%; background: #eaf6e1; color: var(--green); display: grid; place-items: center; margin: 0 auto 18px; }
.done .tick svg { width: 38px; height: 38px; }
.done ul { text-align: left; max-width: 440px; margin: 18px auto 24px; background: var(--sand); border-radius: var(--r); padding: 16px 20px 16px 36px; }
.done .btn-row { justify-content: center; }
.next-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: ns; }
.next-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: .96rem; }
.next-steps li::before { counter-increment: ns; content: counter(ns); width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; display: grid; place-items: center; }
.next-steps b { color: var(--ink); display: block; }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .with-aside, .quote-layout { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .reviews { grid-template-columns: 1fr; }
  .main-nav { gap: 4px 18px; }
}
@media (max-width: 960px) {
  :root { --bar-h: 76px; }
  body { font-size: 17px; }
  .main-nav, .header-actions { display: none; }
  .header-inner { grid-template-columns: 1fr auto; min-height: 68px; gap: 12px; }
  .brand img { height: 38px; }
  .menu-btn { display: inline-flex; }
  .offer-strip .extra { display: none; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
  .mobile-bar .btn { min-height: 52px; padding: 0 10px; }
  .hero { display: block; }
  .hero__img { min-height: 0; }
  .hero__img img { position: static; height: 36vh; }
  .hero__panel, .hero--page .hero__panel { margin: 0; width: auto; padding: 28px var(--gutter) 34px; box-shadow: none; }
  .after-hero { padding-top: clamp(48px, 8vw, 72px); }
  .room, .split, .visit, .cta-final, .section-head--split, .band { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
  .band__media { min-height: 240px; order: -1; }
  .step-cards, .quotes { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .jobs-grid, .posts { grid-template-columns: 1fr 1fr; }
  .compare__grid { grid-template-columns: 1fr; gap: 14px; }
  .option { grid-row: auto; grid-template-rows: none; }
  .cta-final .btn-row { justify-content: flex-start; }
  .two-col, .quick { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .jobs-grid, .posts, .footer-grid { grid-template-columns: 1fr; }
  .deal-card { grid-template-columns: 1fr; }
  .deal-card > img { min-height: 0; aspect-ratio: 16 / 9; }
  .tabs button { font-size: .95rem; padding: 10px 16px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile label span { font-size: .9rem; padding: 10px 12px; }
  .btn-row .btn { flex: 1 1 auto; }
  .offer-tiers b { font-size: 2rem; }
}
.hero-spacer { height: 70px; }
.page-top .eyebrow { margin-top: 6px; }
@media (max-width: 960px) { .hero-spacer { height: 0; } }

/* quote form: optional extras and the bot check */
.picked { background: var(--sand); border-radius: var(--r-sm); padding: 12px 16px; font-size: .98rem; color: var(--ink); margin-bottom: 18px; }
.picked b { font-weight: 700; }
.picked button { appearance: none; border: 0; background: none; color: var(--blue); font: 700 .95rem var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 0 0 0 6px; }
.more { border: 1.5px solid var(--line); border-radius: var(--r); margin: 6px 0 20px; }
.more summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 8px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; }
.more[open] summary::before { content: "−"; }
.more summary span { color: var(--muted); font-weight: 500; }
.more__body { padding: 4px 18px 6px; }
.turnstile { min-height: 65px; margin: 4px 0 2px; }
.quick .full .turnstile { margin: 0; }

/* blog posts */
.post-cover-wrap img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); margin-bottom: 24px; }
.answer { background: var(--blue-soft); border-left: 5px solid var(--sky); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 20px; margin: 0 0 26px; }
.answer b { color: var(--blue-hover); }
.answer p { margin: 6px 0 0; color: var(--ink); font-size: 1.05rem; }
.post-body h2 { margin-top: 1.4em; }
.post-body h3 { margin-top: 1.2em; font-size: 1.3rem; }
.post-body ul { margin: 0 0 1.1em; }
.post-body li { margin-bottom: 6px; }
.post-body .faq { margin-bottom: 26px; }
.about-gnb { background: var(--sand); border-radius: var(--r); padding: 18px 22px; margin-top: 30px; }
.about-gnb b { color: var(--ink); }
.about-gnb p { margin: 6px 0 0; font-size: .98rem; }

/* builder and property manager pages */
.why-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-grid li { border-top: 4px solid var(--sky); padding-top: 18px; }
.why-grid h3 { font-size: 1.35rem; margin-bottom: 8px; }
.why-grid p { margin: 0; font-size: 1rem; }
.supply { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.supply__item { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--r); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.supply__item:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.supply__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.supply__item > div { padding: 20px 22px 24px; }
.supply__item h3 { font-size: 1.3rem; margin-bottom: 6px; }
.supply__item p { margin: 0; font-size: .98rem; }
.supply__item--cta { grid-template-rows: 1fr; background: var(--blue); color: #fff; align-items: center; }
.supply__item--cta h3, .supply__item--cta p { color: #fff; }
.supply__item--cta .btn { margin-top: 18px; background: #fff; color: var(--blue); }
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.spec-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 1rem; }
.spec-table th, .spec-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table thead th { background: var(--sand); font: 600 1.15rem var(--serif); color: var(--ink); }
.spec-table tbody th { font-weight: 700; color: var(--ink); width: 26%; }
.spec-table td.yes::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 8px; }
.spec-table td.no { color: var(--muted); }
.step-cards--4 { grid-template-columns: repeat(4, 1fr); }
.step-cards--4 h3 { font-size: 1.3rem; }
.trade-card { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--sky); border-radius: 4px 4px var(--r-lg) var(--r-lg); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 36px); }
.trade-card input[type="file"] { padding: 12px; }
@media (max-width: 1100px) { .why-grid, .step-cards--4 { grid-template-columns: 1fr 1fr; } .supply { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why-grid, .step-cards--4, .supply { grid-template-columns: 1fr; } }
#trade { padding-top: 0; }
.trade-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trade-link { display: grid; grid-template-columns: 42% 1fr; background: var(--sand); border-radius: var(--r); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s; }
.trade-link:hover { box-shadow: var(--shadow); }
.trade-link img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.trade-link > div { padding: 24px 26px; align-self: center; }
.trade-link h3 { font-size: 1.5rem; margin-bottom: 6px; }
.trade-link p { font-size: 1rem; margin: 0 0 12px; }
@media (max-width: 960px) { .trade-links { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .trade-link { grid-template-columns: 1fr; } .trade-link img { min-height: 0; aspect-ratio: 16 / 9; } }
.swipe-hint { display: none; }
@media (max-width: 700px) { .swipe-hint { display: block; margin: -10px 0 10px; } }
.hero--verandah .hero__img img { object-position: 50% 22%; }
/* Mirror the photo so its best part sits on the right, clear of the white panel (home page: curtains, not the stone wall). */
.hero--flip .hero__img img { transform: scaleX(-1); }
.tick-opt { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 20px; }
.tick-opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.tick-opt label { font-size: .96rem; color: var(--ink-2); cursor: pointer; }
.w-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.w-card { background: var(--sand); border-radius: var(--r); padding: 26px 28px; }
.w-card h3 { font-size: 1.35rem; margin-bottom: 14px; }
.w-card .ticks { margin-bottom: 0; }
.spec-table--narrow { min-width: 0; }
.spec-table--narrow tbody th { width: auto; }
.care-steps { padding-left: 1.2em; margin: 0 0 22px; }
.care-steps li { margin-bottom: 8px; }
.care-donts { list-style: none; padding: 0; margin: 0 0 18px; }
.care-donts li { padding-left: 28px; position: relative; margin-bottom: 8px; }
.care-donts li::before { content: "×"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: #f3e1df; color: #b3261e; font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
#security-care .spec-wrap { background: #fff; }
@media (max-width: 960px) { .w-cards { grid-template-columns: 1fr; } }

/* frame colour preview (our own photo, colour drawn over the frame) */
.vz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.vz__stage { position: relative; border-radius: var(--r); overflow: hidden; background: var(--sand); max-width: 520px; }
.vz__stage svg { display: block; width: 100%; height: auto; }
.vz__frame { fill: transparent; transition: fill .25s ease; }
.vz__shade { opacity: 0; mix-blend-mode: overlay; transition: opacity .25s ease; pointer-events: none; }
.vz[data-picked] .vz__shade { opacity: .55; }
.vz__label { position: absolute; left: 0; bottom: 0; background: rgba(42, 38, 34, .78); color: #fff; font-weight: 600; font-size: .95rem; padding: 8px 16px; border-top-right-radius: var(--r-sm); }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin: 22px 0 14px; max-width: 460px; }
.swatch { appearance: none; aspect-ratio: 1; width: 100%; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: var(--c); cursor: pointer; padding: 0; transition: transform .15s ease, box-shadow .15s ease; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.swatch:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.vz__name { margin: 0 0 18px; font-size: 1.1rem; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 960px) { .vz { grid-template-columns: 1fr; } .vz__stage { max-width: 420px; margin: 0 auto; width: 100%; } }
@media (max-width: 420px) { .swatches { grid-template-columns: repeat(6, 1fr); } }
.spec-table--fit { min-width: 0; }
@media (max-width: 600px) { .spec-table--fit th, .spec-table--fit td { padding: 12px 10px; font-size: .92rem; } .spec-table--fit thead th { font-size: 1rem; } }

/* before and after: the after photo large, the before tucked in the corner (tap to swap) */
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; align-items: start; }
.ba { margin: 0; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 18px 36px -28px rgba(42, 38, 34, .45); }
.section--sand .ba { background: #fff; }
.ba__stage { position: relative; }
.ba__main img { width: 100%; height: auto; display: block; }
.ba__inset { position: absolute; left: 12px; bottom: 12px; width: 34%; max-width: 170px; padding: 0; border: 3px solid #fff; border-radius: 10px; overflow: visible; background: #fff; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55); transition: transform .2s ease; }
.ba__inset:hover { transform: scale(1.04); }
.ba__inset:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.ba__inset img { width: 100%; height: auto; display: block; border-radius: 7px; }
.ba__tag { position: absolute; left: 8px; top: 8px; background: rgba(42, 38, 34, .82); color: #fff; font: 700 .78rem var(--sans); padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.ba__main .ba__tag { left: 12px; top: 12px; font-size: .85rem; }
.ba__tag--after { background: var(--blue); }
.ba__inset .ba__tag { left: 50%; top: auto; bottom: -11px; transform: translateX(-50%); white-space: nowrap; }
.ba figcaption { padding: 16px 18px 18px; display: grid; gap: 2px; }
.ba figcaption b { font: 600 1.15rem/1.3 var(--serif); color: var(--ink); }
.ba figcaption span { font-size: .92rem; color: var(--muted); margin-bottom: 6px; }
.ba figcaption .link-arrow { font-size: .95rem; }
.ba.is-swapped .ba__main img { animation: fade .3s ease-out; }
.ba--span2 { grid-column: span 2; }
.ba__split { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ba__half { position: relative; }
.ba__half img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; display: block; }
.ba__half .ba__tag { left: 10px; top: 10px; }
@media (max-width: 960px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ba-grid { grid-template-columns: 1fr; } .ba--span2 { grid-column: auto; } }
.h2-size { font-size: clamp(2rem, 3.4vw, 3rem); }
.ba-one .ba-grid, .ba-two .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 34px; }
@media (max-width: 600px) { .ba-one .ba-grid, .ba-two .ba-grid { grid-template-columns: 1fr; } }

/* downloadable guides */
.dl-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dl { display: inline-flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px 18px 14px 14px; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; max-width: 420px; }
.dl:hover { border-color: var(--blue); box-shadow: 0 10px 24px -18px rgba(10, 117, 168, .6); }
.dl svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); flex: none; }
.dl b { display: block; color: var(--ink); font-weight: 700; }
.dl small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.35; }

/* job photos: tap to open the viewer */
.job-card__img, .gallery__open { display: block; width: 100%; border: 0; padding: 0; margin: 0; font: inherit; cursor: zoom-in; text-align: left; }
.gallery__open { height: 100%; background: none; }
.job-card__img img, .gallery__open img { transition: transform .4s ease; }
.job-card__img:hover img, .gallery__open:hover img { transform: scale(1.03); }
.job-card__img:focus-visible, .gallery__open:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.job-count { display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
.job-count::before { content: ""; width: 14px; height: 11px; border: 2px solid currentColor; border-radius: 3px; box-shadow: 3px -3px 0 -1px #fff, 3px -3px 0 1px currentColor; }

.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.lb__backdrop { position: fixed; inset: 0; background: rgba(24, 21, 18, .94); }
.lb__frame { position: relative; width: fit-content; max-width: min(1180px, 100%); max-height: 100%; display: grid; gap: 12px; }
.lb__stage { position: relative; display: grid; place-items: center; }
.lb__img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); animation: fade .25s ease-out; }
.lb__close { position: fixed; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 2; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--ink); font-size: 2.2rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
.lb__prev { left: 10px; } .lb__next { right: 10px; }
.lb--single .lb__nav { display: none; }
.lb__nav:focus-visible, .lb__close:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: #fff; min-width: min(420px, 100%); }
.lb__bar b { display: block; font: 600 1.15rem var(--serif); color: #fff; }
.lb__bar small { color: rgba(255,255,255,.75); font-size: .9rem; }
.lb-open, .lb-open body { overflow: hidden; }
@media (max-width: 600px) {
  .lb { padding: 64px 10px 16px; }
  .lb__img { max-height: calc(100dvh - 210px); }
  .lb__nav { width: 44px; height: 44px; font-size: 1.8rem; }
  .lb__prev { left: 4px; } .lb__next { right: 4px; }
  .lb__bar { flex-direction: column; align-items: flex-start; }
}
.gallery figcaption { pointer-events: none; }
.ba--cta { background: var(--blue); color: #fff; padding: 30px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; align-self: stretch; justify-content: center; }
.ba--cta .eyebrow { color: #fff; }
.ba--cta h3 { color: #fff; font-size: 1.7rem; margin: 0; }
.ba--cta p { color: #fff; margin: 0 0 14px; }
.ba--cta .btn { background: #fff; color: var(--blue); width: 100%; justify-content: center; }
.ba--cta .btn--call { background: var(--ink); color: #fff; margin-top: 4px; }

/* Invisi-Maxx impact speed chart */
.speed { background: var(--sand); border-radius: var(--r); padding: 26px 26px 22px; }
.speed__row { display: grid; gap: 8px; margin-bottom: 18px; }
.speed__label { font-weight: 700; color: var(--ink); }
.speed__label small { display: block; font-weight: 500; color: var(--muted); font-size: .9rem; }
.speed__bar { display: block; height: 42px; width: var(--w); background: var(--blue); border-radius: 10px; position: relative; }
.speed__bar b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #fff; font-size: .98rem; white-space: nowrap; }
.speed__row--req .speed__bar { background: repeating-linear-gradient(135deg, #cfc4b5 0 10px, #d9cfc2 10px 20px); }
.speed__row--req .speed__bar b { color: var(--ink); }
.maxx-note { margin: 14px 0 0; padding: 14px 18px; background: #fff3e3; border-radius: var(--r-sm); color: var(--ink); }
.maxx-note b { margin-right: 6px; }

/* payment plans, commercial, areas */
.pay-card { background: linear-gradient(140deg, var(--blue) 0%, #0b5f88 100%); color: #fff; border-radius: 22px; padding: 34px 34px 30px; box-shadow: var(--shadow); max-width: 420px; justify-self: end; transform: rotate(-2deg); }
.pay-card__brand { display: inline-block; font: 700 1.5rem var(--sans); letter-spacing: -.02em; background: rgba(255,255,255,.16); padding: 4px 14px; border-radius: 999px; margin-bottom: 26px; }
.pay-card__line { margin: 0; color: #d7ecf7; font-size: .98rem; }
.pay-card__big { margin: 6px 0 8px; font: 600 1.9rem/1.15 var(--serif); color: #fff; }
.box-white { background: #fff; border-radius: var(--r); padding: 26px 28px; }
.section:not(.section--sand) .box-white { background: var(--sand); }
.box-white h3 { font-size: 1.35rem; }
.facts { list-style: none; padding: 0; margin: 10px 0 18px; display: grid; gap: 12px; }
.facts li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.facts b { color: var(--ink); }
.facts span { font-size: .98rem; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio figure { margin: 0; border-radius: var(--r); overflow: hidden; }
.trio img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; display: block; }
.suburbs { list-style: none; padding: 0; margin: 0; columns: 4 180px; column-gap: 24px; }
.suburbs li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.suburbs li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 8px; }
.tick-opt a { color: var(--blue); }
@media (max-width: 960px) { .pay-card { justify-self: start; transform: none; } .trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .trio { grid-template-columns: 1fr; } .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* Breadcrumb: a quiet line above the footer on every page except home */
.crumbs-bar { border-top: 1px solid var(--line); background: #fff; padding: 14px 0; }
.crumbs-bar .crumbs { margin: 0; }

/* Smaller laptop windows: keep the menu on one line */
@media (min-width: 961px) and (max-width: 1140px) {
  .header-inner { gap: 16px; }
  .main-nav { gap: 4px 13px; flex-wrap: nowrap; }
  .main-nav a { font-size: .92rem; }
  .header-actions { gap: 14px; }
  .header-actions .btn { padding-left: 18px; padding-right: 18px; }
}

/* Phones: bigger tap areas for small links, without moving anything on the page */
@media (max-width: 960px) {
  .offer-strip a, .crumbs a, .footer-bottom a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
  .link-arrow, .link { padding: 9px 0; margin: -9px 0; }
}

/* About: a clearly marked spot for the team photo until GNB sends one */
.section--sand .quote { background: #fff; }

/* Reviews page: every review, in a column next to the rating */
.quotes--all { grid-template-columns: 1fr; }

/* Privacy page */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.45rem; margin: 30px 0 10px; }
.legal ul { padding-left: 1.2em; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }

/* Page not found: quick links */
.lost-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lost-links a { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.lost-links a:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.lost-links b { display: block; color: var(--ink); font-size: 1.05rem; }
.lost-links span { display: block; color: var(--muted); font-size: .92rem; margin-top: 2px; }
.uses--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .uses--pairs { grid-template-columns: 1fr; } }

/* Page not found: the blinds are closed on this one. Tap to tilt the slats open. */
.lost-top { padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px); }
.lost-home { margin-top: 4px; }
.lost-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.lost-open { margin-top: 8px; }
.lost-note { margin: 14px 0 0; font-weight: 600; color: var(--blue); }
.blind-window { width: min(300px, 100%); justify-self: center; }
.blind-glass { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.05; padding: 0; margin: 0; border: 13px solid #fff; border-radius: 6px; background: #dff2fb; cursor: pointer; overflow: hidden; perspective: 700px; box-shadow: 0 26px 50px -30px rgba(42, 38, 34, .55), 0 0 0 1px var(--line); }
.blind-glass:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.blind-view { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(#8fd0f0, #d4eefa 65%, #f1f9fd); }
.blind-view b { position: relative; font: 700 clamp(3rem, 8vw, 4.8rem)/1 var(--serif); color: var(--blue); letter-spacing: .02em; text-shadow: 0 3px 0 rgba(255, 255, 255, .7); }
.blind-sun { position: absolute; top: 11%; right: 13%; width: 21%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffe48a, #f6c343); box-shadow: 0 0 40px 6px rgba(246, 195, 67, .55); }
.blind-cloud { position: absolute; height: 9%; border-radius: 999px; background: #fff; }
.blind-cloud::before, .blind-cloud::after { content: ""; position: absolute; bottom: 40%; border-radius: 50%; background: #fff; }
.blind-cloud::before { left: 18%; width: 34%; aspect-ratio: 1; }
.blind-cloud::after { left: 44%; width: 42%; aspect-ratio: 1; }
.blind-cloud--a { width: 30%; top: 24%; left: 10%; }
.blind-cloud--b { width: 22%; top: 72%; right: 9%; opacity: .85; }
.blind-slats { position: absolute; inset: 15px 0 0; display: flex; flex-direction: column; }
.blind-slats::before, .blind-slats::after { content: ""; position: absolute; top: -2px; bottom: 0; width: 2px; background: rgba(42, 38, 34, .14); z-index: 1; }
.blind-slats::before { left: 22%; }
.blind-slats::after { right: 22%; }
.blind-slats i { flex: 1; background: linear-gradient(#fffdf9, #f2ece3 65%, #e2d9cc); box-shadow: 0 1px 0 rgba(42, 38, 34, .1); transform-origin: 50% 50%; transition: transform .7s cubic-bezier(.3, .7, .3, 1); }
.blind-glass:hover .blind-slats i { transform: rotateX(22deg); }
.is-open .blind-slats i, .is-open .blind-glass:hover .blind-slats i { transform: rotateX(80deg); }
.blind-rail { position: absolute; top: 0; left: 0; right: 0; height: 16px; background: linear-gradient(#ffffff, #ebe4da); box-shadow: 0 2px 4px rgba(42, 38, 34, .14); z-index: 2; }
.blind-wand { position: absolute; top: 10px; right: 16px; width: 5px; height: 44%; border-radius: 3px; background: linear-gradient(90deg, #f7f3ec, #d6ccbe); box-shadow: 0 1px 2px rgba(42, 38, 34, .2); z-index: 3; transform-origin: top center; transition: transform .7s; }
.is-open .blind-wand { transform: rotate(9deg); }
.blind-sill { position: relative; display: block; height: 15px; margin: 0 -14px; border-radius: 4px; background: linear-gradient(#ffffff, #efe9e0); box-shadow: 0 12px 22px -14px rgba(42, 38, 34, .5); }
.blind-plant { position: absolute; left: 24px; bottom: 100%; width: 44px; margin-bottom: -3px; }
@media (max-width: 860px) {
  /* phones: a small window beside the heading, so the page links show sooner */
  .lost-hero { grid-template-columns: minmax(0, 1fr) 118px; gap: 8px 16px; align-items: start; }
  .lost-hero > div:first-child { display: contents; }
  .lost-hero .eyebrow { grid-column: 1 / -1; }
  .lost-hero h1 { grid-column: 1; grid-row: 2; font-size: clamp(1.7rem, 7vw, 2.2rem); margin: 0; }
  .lost-hero .blind-window { grid-column: 2; grid-row: 2; width: 118px; margin-top: 4px; }
  .lost-hero .lede, .lost-hero .lost-home, .lost-hero .lost-note { grid-column: 1 / -1; }
  .lost-hero .lede { margin: 6px 0 4px; font-size: 1.02rem; }
  .blind-glass { border-width: 8px; }
  .blind-slats { inset: 9px 0 0; }
  .blind-rail { height: 10px; }
  .blind-wand { top: 6px; right: 8px; width: 3px; }
  .blind-view b { font-size: 1.9rem; }
  .blind-sill { height: 9px; margin: 0 -8px; }
  .blind-plant { left: 8px; width: 24px; margin-bottom: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .blind-slats i, .blind-wand { transition: none; }
}
/* short laptop windows: keep the home button and the page links in view */
@media (min-width: 861px) and (max-height: 640px) {
  .lost-top { padding: 18px 0 20px; }
  .lost-hero h1 { font-size: 2.3rem; }
  .lost-hero .lede { margin-bottom: 10px; }
  .blind-window { width: 220px; }
}


/* Home page: room tabs on sand, the jobs row, and the about and trade strips */
.section--sand .tabs button:not([aria-selected="true"]) { background: #fff; }
.section--sand .tabs button:not([aria-selected="true"]):hover { background: var(--sand-2); }
.gallery--row { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; margin-top: 18px; }
.gallery--row figure { grid-row: auto !important; grid-column: auto !important; }
.about-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.about-strip > div { max-width: 720px; }
.about-strip p { margin: 0; font-size: 1.08rem; }
.trade-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; padding: 18px 24px; background: var(--blue-soft); border-radius: var(--r); }
.trade-strip b { color: var(--ink); margin-right: auto; }
/* phones: swipe sideways through recent jobs and tips instead of scrolling past them */
@media (max-width: 600px) {
  .gallery--row, .posts--swipe { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; grid-auto-rows: auto; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .gallery--row::-webkit-scrollbar, .posts--swipe::-webkit-scrollbar { display: none; }
  .gallery--row > *, .posts--swipe > * { scroll-snap-align: start; }
  .gallery--row figure { height: 230px; }
  .trade-strip b { margin-right: 0; width: 100%; }
}
/* phones: the footer's link lists fold away until tapped */
.footer-toggle { all: unset; display: inline; font: inherit; color: inherit; }
@media (max-width: 600px) {
  .footer-fold .footer-toggle { cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 0; }
  .footer-fold .footer-toggle::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--blue); }
  .footer-fold .footer-toggle::after { transition: transform .2s; }
  .footer-fold.is-open .footer-toggle::after { transform: rotate(45deg); }
  .footer-fold h2 { margin: 0; border-top: 1px solid var(--line); }
  .footer-fold:not(.is-open) ul { display: none; }
  .footer-fold ul { padding-bottom: 12px; }
}

/* SEO: each page's main heading (H1) says plainly what the page is, in the small blue label style.
   The catchy line underneath keeps the big heading look. */
h1.eyebrow, h1.kick { font: 700 1rem/1.3 var(--sans); color: var(--blue); margin: 0 0 10px; letter-spacing: .01em; text-wrap: wrap; }
.h1-display { font-family: var(--serif); color: var(--ink); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin: 0 0 .45em; text-wrap: balance; font-size: clamp(2.5rem, 4.6vw, 4rem); }
.hero__panel .h1-display { margin-bottom: 18px; font-size: clamp(2.5rem, 4.6vw, 4rem); }
.hero--page .h1-display, .page-top .h1-display { font-size: clamp(2.3rem, 4vw, 3.4rem); }

/* "At a glance": plain facts near the top of each product page, easy for people and AI tools to read */
.glance-section { padding-top: clamp(20px, 3vw, 32px); padding-bottom: 0; }
.glance { background: var(--sand); border-radius: var(--r); padding: 22px 26px; }
.glance h2 { font-size: 1.35rem; margin: 0 0 12px; }
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 26px; }
.glance li { display: grid; gap: 2px; padding-left: 26px; position: relative; font-size: .98rem; }
.glance li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }
.glance b { color: var(--ink); }
@media (max-width: 960px) { .glance ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .glance ul { grid-template-columns: 1fr; } .glance { padding: 18px 18px; } }

/* A single photo beside text, rounded like the other cards */
.photo-card img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: var(--shadow, 0 18px 40px -24px rgba(0,0,0,.35)); }