/* Water Filtration Sydney install lander v2.
   Visual system measured from vanguardplumbingandgas.com.au (Oct 2026):
   Poetsen One headings, TikTok Sans body, navy/orange/blue palette, 10px gutters,
   pill buttons r60, rounded cards r20-40, curved section waves. Mobile first;
   desktop sizes live in the min-width:1025px block. */

:root {
  --navy: #091c61;
  --navy-deep: #0f183f;
  --orange: #1192d6;
  --orange-dark: #0b72aa;
  --sky: #5cc6ff;
  --blue: #1192d6;
  --blue-text: #0b72aa;
  --ink: #10162f;
  --pale: #e5f3fa;
  --light: #cde8f6;
  --grey: #d5d5d5;
  --white: #fff;
  --muted: #5d6680;
  --head: "Poetsen One", "Arial Black", sans-serif;
  --body: "TikTok Sans", "Segoe UI", Arial, sans-serif;
  --gutter: 16px;
  --top-h: 34px;
  --bar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 500 16px/1.6 var(--body); overflow-x: clip; padding-bottom: var(--bar-h); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; color: var(--navy); text-transform: uppercase; line-height: 1.05; }
.ic { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip:focus { left: 10px; }
.hp { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 16px 30px; border: 0; border-radius: 60px; font: 400 16px/1.1 var(--head); text-transform: uppercase; text-decoration: none; color: #fff; cursor: pointer; white-space: nowrap; transition: transform .15s, filter .15s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn--navy { background: var(--navy); }
.btn--orange { background: var(--orange); color: var(--navy); }
.btn--blue { background: var(--blue); }
.btn--sm { min-height: 48px; padding: 14px 20px; font-size: 14px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row--center { justify-content: center; }
.round { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; color: #fff; cursor: pointer; text-decoration: none; }
.round--orange { background: var(--orange); color: var(--navy); }
.round--navy { background: var(--navy); }
.round .ic { width: 22px; height: 22px; }

.kicker { font: 600 15px/1.6 var(--body); text-transform: uppercase; color: var(--blue-text); margin-bottom: 8px; }
.lead { font-size: 16px; line-height: 1.6; }
.center-head { text-align: center; max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }
.center-head h2 { font-size: 30px; margin-bottom: 14px; }
.center-head--light h2, .center-head--light .lead { color: #fff; }
.center-head--light .kicker { color: #6fc6f2; }
.fine { font-size: 13px; color: var(--muted); max-width: 1000px; margin: 14px auto 0; padding: 0 var(--gutter); text-align: center; }

.wave { position: absolute; left: 0; width: 100%; height: 40px; display: block; }
.wave--bottom { bottom: -1px; fill: #fff; }
.wave--top { top: -1px; fill: #fff; }
.wave--white { fill: #fff; }
.wave--light { fill: var(--light); }

/* 1-2 Header */
.site-header { position: sticky; top: calc(-1 * var(--top-h)); z-index: 50; }
.topbar { height: var(--top-h); background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; font: 400 12px/1 var(--head); text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.topbar__pill { height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 var(--gutter); background: var(--blue); border-radius: 0 60px 60px 0; }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.7); }
.topbar__right { display: none; align-items: center; gap: 14px; padding-right: 10px; }
.topbar__area, .topbar__g { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.topbar__rule { width: 1px; height: 22px; background: rgba(255,255,255,.4); }
.ic--g { width: 22px; height: 22px; }
.mainbar { position: relative; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter); min-height: 72px; }
.brand { margin-right: auto; }
.brand img { width: 168px; }
.mainbar__cta { display: none; }
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 12px 20px rgba(0,0,0,.15); padding: 8px var(--gutter) 16px; }
.nav.is-open { display: block; }
.nav a { display: block; padding: 12px 0; font: 400 18px/1.2 var(--head); text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--pale); }
.nav a:hover { color: var(--orange-dark); }
.nav-toggle { flex-direction: column; gap: 4px; display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle span { width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 3 Hero */
.hero { position: relative; display: grid; background: var(--grey) radial-gradient(circle at 20% 30%, #e2e2e2 0, transparent 40%), radial-gradient(circle at 70% 80%, #cfcfcf 0, transparent 45%); background-color: var(--grey); }
.hero__copy { padding: 18px var(--gutter) 30px; display: contents; }
.hero h1 { order: 1; padding: 6px var(--gutter) 12px; font-size: 25px; line-height: 1.05; color: var(--navy); text-align: center; }
.hero h1 .hl { color: var(--blue); }
.hero__panel { order: 2; position: relative; padding: 0 var(--gutter) 18px; }
.hero__eyebrow, .hero__proof, .hero__ticks, .hero__quote, .stars-rule, .pills, .hero__copy .btn-row { padding: 0 var(--gutter); }
.hero__eyebrow { order: 0; padding-top: 14px; font: 600 13px/1.3 var(--body); text-transform: uppercase; letter-spacing: .02em; color: var(--blue-text); text-align: center; }
.hero__proof { order: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--navy); }
.hero__proof a, .hero__proof > span { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.hero__proof .stars .ic { width: 16px; height: 16px; }
.hero__proof > span .ic { color: var(--blue); }
.hero__proof-sep { display: none; width: 1px; height: 18px; background: rgba(9,28,97,.3); }
.hero__ticks { order: 4; display: grid; gap: 8px; margin-top: 16px; }
.hero__ticks li { position: relative; padding-left: 30px; font-size: 16px; color: var(--ink); }
.hero__ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center; }
.hero__quote { order: 5; margin-top: 18px; color: var(--navy); text-align: center; font-size: 15px; }
.stars-rule { order: 6; display: flex; align-items: center; gap: 4px; color: var(--blue); margin: 14px 0 10px; }
.stars-rule span { flex: 1; height: 1px; background: var(--blue); }
.stars-rule span:first-child { margin-right: 14px; } .stars-rule span:last-child { margin-left: 14px; }
.pills { order: 7; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pills li { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 40px; padding: 8px 14px; font-size: 13px; text-transform: uppercase; color: var(--navy); box-shadow: 3px 3px 0 rgba(0,0,0,.12); }
.pills .ic { color: var(--blue); }
.hero__copy .btn-row { order: 8; justify-content: center; margin: 22px 0 34px; }
.float-pill, .hero__sub { display: none; }
.hero__photo { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 50% 0; border-radius: 18px; margin-bottom: 12px; }
.quote-card { position: relative; z-index: 2; background: var(--light); border-radius: 26px; padding: 18px 16px 16px; box-shadow: 2px 8px 23px 3px rgba(0,0,0,.2); }
.quote-card__live { display: flex; align-items: center; gap: 8px; font: 400 15px/1 var(--head); color: var(--blue-text); text-transform: uppercase; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #1fc94b; box-shadow: 0 0 0 4px rgba(31,201,75,.2); }
.quote-card__title { font-size: 20px; margin: 8px 0 4px; }
.quote-card__lede { color: var(--orange-dark); font-size: 14px; margin-bottom: 10px; }
.quote-card__note, .contact__note { font-size: 13px; text-align: center; margin-top: 10px; color: var(--ink); }
.quote-card__note a { color: var(--navy); font-weight: 700; }

/* Form */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 13px/1.3 var(--body); color: var(--navy); margin-bottom: 4px; }
.opt { font-weight: 500; color: var(--muted); }
.field textarea { width: 100%; height: 58px; min-height: 58px; max-height: 120px; resize: vertical; border: 2px solid transparent; border-radius: 12px; background: #fff; padding: 10px 12px; font: 500 15px/1.3 var(--body); color: var(--ink); }
.field textarea::placeholder { color: #8a92a8; }
.field textarea:focus { outline: none; border-color: var(--blue); }
.field input, .field select { width: 100%; height: 46px; border: 2px solid transparent; border-radius: 12px; background: #fff; padding: 0 12px; font: 500 16px/1 var(--body); color: var(--ink); }
.field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23091c61' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 30px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); }
.field [aria-invalid="true"] { border-color: #d0342c; }
.lead-form .btn--block { min-height: 52px; font-size: 18px; }

/* 4 Navy band */
.band { position: relative; overflow: hidden; background: var(--navy); padding: 40px 0 50px; }
.band__track { position: relative; z-index: 1; }
.band .arrow { display: none; }
.track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--gutter) 10px; }
.track::-webkit-scrollbar { display: none; }
.track > li { position: relative; scroll-snap-align: start; flex: none; }
.rcard { width: 82%; background: #fff; border-radius: 30px; padding: 30px 26px 26px; font-size: 16px; }
.rcard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rcard__name { font: 700 15px/1.2 var(--body); text-transform: uppercase; color: var(--navy); margin-top: 4px; }
.gbadge { width: 54px; height: 54px; border-radius: 50%; background: #e8e8e8; display: grid; place-items: center; flex: none; }
.gbadge svg { width: 34px; height: 34px; }
.stars { display: inline-flex; gap: 3px; color: #fff; }
.stars--orange { color: #ff9100; }
.stars .ic { width: 20px; height: 20px; }
.pcard { width: 82%; border-radius: 30px; overflow: hidden; text-align: center; padding-top: 26px; display: flex; flex-direction: column; }
.pcard img { margin-top: auto; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.pcard__big { font: 400 34px/1 var(--head); text-transform: uppercase; }
.pcard__small { font: 400 15px/1.2 var(--head); text-transform: uppercase; padding: 6px 18px 18px; }
.pcard--blue { background: var(--blue); color: #fff; }
.pcard--pale { background: var(--light); color: var(--navy); }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); box-shadow: 0 6px 16px rgba(0,0,0,.18); display: grid; place-items: center; cursor: pointer; }
.arrow .ic { width: 20px; height: 20px; }
.arrow--prev .ic { transform: rotate(180deg); }
.arrow--prev { left: 4px; } .arrow--next { right: 4px; }
.band__cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 34px var(--gutter) 0; text-align: center; }
.band__cta h2 { width: 100%; color: #fff; font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.band__ghost { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); font: 400 30vw/1 var(--head); color: rgba(255,255,255,.04); white-space: nowrap; pointer-events: none; }

/* 5 Systems */
.systems { position: relative; background: var(--light); padding: 50px 0 90px; }
.systems__head { padding: 0 var(--gutter); max-width: 760px; text-align: center; margin: 0 auto 26px; }
.systems__head h2 { font-size: 30px; margin-bottom: 12px; }
.carousel { position: relative; }
.carousel__nav { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.carousel__nav .arrow { position: static; transform: none; }
.scard { width: 84%; background: #fff; border-radius: 20px; box-shadow: 0 4px 4px rgba(0,0,0,.16); overflow: hidden; margin-bottom: 6px; }
.scard img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 20px; padding: 10px 10px 0; }
.scard__body { padding: 18px 20px 26px; text-align: center; }
.scard h3 { font-size: 22px; margin-bottom: 10px; }
.scard p { font-size: 15px; color: #2a3048; }
.systems .btn-row { margin-top: 26px; padding: 0 var(--gutter); }

/* 6 About */
.about { padding: 50px var(--gutter) 60px; display: grid; gap: 34px; }
.about__media { position: relative; }
.about__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px 20px 20px 0; }
.seal { position: absolute; right: -6px; top: -14px; width: 132px; height: 132px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.seal__big { font: 400 22px/1 var(--head); color: var(--orange-dark); }
.seal__small { font: 400 12px/1.1 var(--head); color: var(--navy); text-transform: uppercase; margin-top: 6px; }
.about__copy h2 { font-size: 30px; margin-bottom: 16px; }
.about__copy > p { margin-bottom: 14px; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 22px 0; }
.tiles li { background: var(--pale); border-radius: 20px; padding: 22px 18px; text-align: center; }
.tiles .ic { width: 38px; height: 38px; color: var(--navy); margin: 0 auto 10px; }
.tiles h3 { font-size: 20px; }
.tiles p { font: 600 13px/1.4 var(--body); text-transform: uppercase; color: var(--navy); margin-top: 8px; }
.about__tag { font: italic 400 17px/1.5 var(--head); color: var(--navy); margin: 0 0 22px; }

/* 7 Tilted cards + ribbon */
.regrets { position: relative; background: var(--light); padding: 70px 0 30px; overflow-x: clip; }
.regrets .center-head { margin-bottom: 30px; }
.tilt { display: grid; gap: 16px; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.tilt__card { position: relative; overflow: hidden; border-radius: 30px; padding: 34px 26px; text-align: center; color: #fff; background: var(--blue); }
.tilt__card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08) 0 28%, transparent 29%); pointer-events: none; }
.tilt__card--c { background: var(--navy); }
.tilt__card h3 { color: #fff; font-size: 22px; margin: 16px 0 10px; }
.tilt__card--c h3 { color: var(--sky); }
.tilt__card p { font-weight: 600; font-size: 15px; }
.tilt__icon { width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; margin: 0 auto; }
.tilt__card--c .tilt__icon { background: var(--orange); color: #fff; }
.tilt__icon .ic { width: 44px; height: 44px; }
.ribbon { position: relative; z-index: 2; width: min(860px, 100%); margin: 30px auto -70px; padding: 0 6px; }
.ribbon svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff); }
.ribbon__tail { fill: #1781cf; stroke: var(--navy); stroke-width: 8; }
.ribbon__fold { fill: var(--navy); }
.ribbon__band { fill: var(--blue); stroke: var(--navy); stroke-width: 9; }
.ribbon span { position: absolute; left: 0; right: 0; top: 22%; text-align: center; color: #fff; font: 400 clamp(14px, 4.2vw, 34px)/1.05 var(--head); text-transform: uppercase; }

/* 9 Offers */
.offers { padding: 24px 0 50px; }
.offers .center-head { margin-bottom: 30px; }
.ogrid { display: grid; gap: 14px; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.ocard { border-radius: 40px; padding: 34px 10px 10px; text-align: center; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.ocard--navy { background: var(--navy); }
.ocard--orange { background: var(--orange); color: var(--navy); }
.ocard .ocard__big { font: 400 46px/1 var(--head); color: var(--orange); text-transform: uppercase; padding: 0; }
.ocard--orange .ocard__big { color: var(--navy); }
.ocard .ocard__tag { align-self: center; background: var(--orange); color: var(--navy); font: 400 13px/1 var(--head); text-transform: uppercase; padding: 8px 14px; border-radius: 40px; margin-bottom: 12px; }
.ocard .ocard__was { font-weight: 600; margin-top: 6px; color: #bfd3ff; }
.ocard h3 { color: #fff; font-size: 24px; margin: 12px 18px 8px; }
.ocard p { padding: 0 18px; font-size: 15px; }
.ocard img { margin-top: 22px; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 30px; }
.ocard--wide { padding: 10px; }
.ocard--wide .ocard__big { margin-top: 18px; }
.ocard--wide img { margin: 0; }
.ocard--wide div { padding: 0 0 22px; }
.choose { max-width: 1100px; margin: 50px auto 0; padding: 0 var(--gutter); }
.choose__title { font-size: 26px; text-align: center; }
.choose__lede { text-align: center; margin: 10px auto 20px; max-width: 800px; }
.choose__table { border-radius: 20px; overflow: hidden; background: var(--pale); }
.choose__row { display: grid; gap: 2px; padding: 14px 18px; border-top: 1px solid #fff; font-size: 15px; }
.choose__row span:first-child { font-weight: 700; color: var(--navy); }
.choose__row span:nth-child(2) { color: var(--blue-text); font-weight: 600; }
.choose__row--head { display: none; }

/* 10 Letter */
.letter { position: relative; padding: 220px var(--gutter) 40px; background: url("../images/garage-install.webp") center top / cover no-repeat; }
.letter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 25%, rgba(255,255,255,.7) 60%, #fff 100%); }
.letter__card { position: relative; background: rgba(253,253,253,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 40px; padding: 34px 22px; }
.letter__card h2 { font-size: 30px; margin-bottom: 18px; }
.checks { display: grid; gap: 10px; margin-bottom: 18px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 20px 0 24px; }
.badges img { height: 62px; width: auto; }
.licence-pill { display: inline-flex; align-items: center; gap: 14px; background: var(--blue); color: #fff; border-radius: 60px; padding: 8px 26px 8px 8px; text-decoration: none; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--navy); }
.licence-pill img { width: 74px; height: 54px; object-fit: contain; background: #fff; border-radius: 40px; padding: 4px; }
.licence-pill strong { display: block; font: 400 19px/1.1 var(--head); text-transform: uppercase; }
.licence-pill small { font: 600 13px/1.3 var(--body); }

/* 11 Area */
.area { position: relative; background: var(--navy); padding: 80px 0 70px; }
.area .center-head { margin-bottom: 34px; }
.area__card { max-width: 1250px; margin: 0 var(--gutter); border: 2px solid var(--blue); border-radius: 30px; overflow: hidden; }
.area__bar { background: var(--blue); color: #fff; font: 400 22px/1 var(--head); text-transform: uppercase; padding: 24px 22px; }
.area__body { background: var(--navy-deep); padding: 24px 22px 0; display: grid; }
.area__list { display: grid; grid-template-columns: 1fr; color: #fff; font-size: 17px; }
.area__list li { padding: 12px 0; border-bottom: 2px dotted rgba(255,255,255,.25); }
.area__list li:last-child { border: 0; color: #9fd7f5; }
.area__list a { color: var(--orange); font-weight: 700; }
.area__blob { width: 78%; justify-self: center; margin-top: 20px; aspect-ratio: 1; object-fit: cover; border-radius: 42% 58% 0 0 / 50% 50% 0 0; }

/* 12 Reviews */
.reviews { position: relative; background: var(--light); padding: 0 0 110px; }
.reviews::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; background: var(--navy); clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%); }
.arch { position: relative; width: 240px; height: 240px; margin: 0 auto 24px; padding-top: 26px; }
.arch::before { content: ""; position: absolute; inset: 0 -14px -10px; background: var(--light); border-radius: 50% 50% 0 0; }
.arch img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 6px solid #fff; }
.reviews .center-head { margin-bottom: 50px; }
.rgrid { display: grid; gap: 52px; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
.gcard { position: relative; border-radius: 30px; padding: 54px 26px 34px; text-align: center; color: #fff; }
.gcard--blue { background: var(--blue); }
.gcard--navy { background: var(--navy); }
.gcard h3 { color: #fff; font: italic 700 21px/1.2 var(--body); text-transform: none; margin-bottom: 12px; }
.gcard p { font-size: 16px; font-weight: 600; }
.gcard .stars { margin-top: 16px; }
.gcard__name { text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.gbadge--top { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); width: 76px; height: 76px; background: #fff; box-shadow: 0 0 0 6px var(--light); }
.gbadge--top svg { width: 46px; height: 46px; }
.brands { max-width: 1100px; margin: 50px auto 0; padding: 0 var(--gutter); text-align: center; }
.brands p { margin-bottom: 16px; }
.brands ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.brands li { background: #fff; border-radius: 18px; padding: 12px 18px; height: 84px; display: grid; place-items: center; }
.brands img { max-height: 58px; width: auto; }

/* 13 FAQ */
.faq { padding: 60px var(--gutter) 80px; display: grid; gap: 40px; max-width: 1440px; margin: 0 auto; }
.faq__main h2 { font-size: 30px; margin-bottom: 14px; }
.acc { display: grid; gap: 10px; margin-top: 24px; }
.acc details { background: var(--pale); border-radius: 10px; }
.acc summary { position: relative; list-style: none; cursor: pointer; padding: 18px 54px 18px 20px; font-size: 17px; color: var(--navy); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 700 26px/1 var(--body); color: var(--navy); }
.acc details[open] summary { color: var(--orange-dark); }
.acc details[open] summary::after { content: "-"; color: var(--orange-dark); }
.acc details p { padding: 0 20px 20px; font-size: 16px; }
.ask { background: var(--navy); border-radius: 40px; padding: 34px 26px 40px; text-align: center; color: #fff; align-self: start; }
.ask img { width: 210px; height: 210px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 6px solid var(--blue); }
.ask h3 { color: #fff; font-size: 26px; margin-bottom: 12px; }
.ask p { font-weight: 600; margin-bottom: 22px; }

/* 14 Installs */
.installs { position: relative; background: var(--light); padding: 90px 0 100px; }
.installs .center-head { margin-bottom: 30px; }
.icard { width: 84%; background: #fff; border-radius: 20px; box-shadow: 0 4px 4px rgba(0,0,0,.16); padding: 0 0 26px; margin-top: 30px; margin-bottom: 6px; }
.icard__img { position: relative; margin: -30px 10px 0; }
.icard__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; }
.tag { position: absolute; top: 14px; padding: 8px 14px; border-radius: 40px; color: #fff; font: 700 12px/1 var(--body); text-transform: uppercase; }
.tag--blue { left: 14px; background: var(--blue); }
.tag--orange { right: 14px; background: var(--orange); color: var(--navy); }
.icard h3 { font-size: 20px; text-align: center; padding: 22px 18px 0; }

/* 15 Contact */
.contact { position: relative; background: var(--navy) radial-gradient(ellipse at 20% 100%, #12307e 0, transparent 60%); padding: 90px var(--gutter) 60px; display: grid; gap: 34px; color: #fff; }
.contact__steps h2 { color: #fff; font-size: 30px; margin-bottom: 22px; }
.contact__steps .kicker { color: #6fc6f2; }
.steps { counter-reset: s; display: grid; gap: 14px; }
.steps li { position: relative; padding: 18px 18px 18px 78px; background: rgba(255,255,255,.06); border-radius: 20px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: var(--navy); font: 400 24px/46px var(--head); text-align: center; }
.steps h3 { color: #fff; font-size: 20px; margin-bottom: 6px; }
.steps p { color: #d6def5; font-size: 15px; }
.contact__card { background: var(--light); color: var(--ink); border-radius: 30px; padding: 30px 18px 26px; }
.contact__card h2 { font-size: 26px; margin-bottom: 10px; }
.contact__card h2 a { color: var(--orange-dark); text-decoration: none; white-space: nowrap; }
.contact__card > p { margin-bottom: 18px; }
.contact__card > p strong { color: var(--orange-dark); }

/* 16 Footer */
.footer { background: var(--navy); color: #fff; padding: 50px var(--gutter) 20px; }
.footer__grid { display: grid; gap: 34px; max-width: 1440px; margin: 0 auto; }
.footer__brand img { width: 240px; margin-bottom: 16px; }
.footer__brand p { color: #d6def5; font-size: 15px; max-width: 360px; }
.footer__h { font-size: 20px; color: var(--sky); margin-bottom: 16px; font-family: var(--head); text-transform: uppercase; font-weight: 400; }
.footer__links { display: grid; gap: 12px; font-size: 16px; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--sky); }
.footer__links--plain { font-size: 15px; color: #d6def5; }
.footer__cta { display: block; max-width: 300px; background: var(--blue); border-radius: 30px; overflow: hidden; text-align: center; text-decoration: none; padding-bottom: 20px; }
.footer__cta img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 14px; }
.footer__cta-small { display: block; font: 400 15px/1.2 var(--head); color: var(--navy); text-transform: uppercase; padding: 0 14px; }
.footer__cta-big { display: block; font: 400 30px/1.2 var(--head); color: #fff; margin-top: 6px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); font-size: 14px; max-width: 1440px; }
.footer__legal a { color: #d6def5; text-decoration: none; }
.footer__legal a:hover { color: var(--sky); }
.footer__copy { text-align: center; font-size: 14px; margin-top: 16px; color: #d6def5; }

/* Mobile sticky bar */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; height: var(--bar-h); background: rgba(9,28,97,.96); }
.sticky-bar .btn { min-height: 48px; padding: 10px; font-size: 16px; }

/* Small phones */
@media (max-width: 400px) {
  .topbar__pill { font-size: 11px; gap: 8px; }
  .brand img { width: 150px; }
}

/* Tablet */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .rcard, .pcard { width: 300px; }
  .scard, .icard { width: 420px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .area__list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ogrid { grid-template-columns: 1fr 1fr; }
  .ocard--c, .ocard--wide { grid-column: span 2; }
  .choose__row { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  .choose__row--head { display: grid; background: var(--navy); color: #fff; font: 400 15px/1.2 var(--head); text-transform: uppercase; }
  .choose__row--head span:first-child, .choose__row--head span:nth-child(2) { color: #fff; font-weight: 400; }
  .hero h1 { font-size: 34px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop (measured at 1440) */
@media (min-width: 1025px) {
  :root { --gutter: 10px; --top-h: 60px; --bar-h: 0px; }
  html { scroll-padding-top: 150px; }
  body { font-size: 18px; line-height: 1.6; }
  .sticky-bar { display: none; }
  .btn { min-height: 60px; padding: 20px 45px; font-size: 18px; }
  .btn--lg { padding: 20px 35px; font-size: 20px; }
  .btn--sm { min-height: 57px; padding: 20px; font-size: 15px; }
  .kicker { font-size: 20px; line-height: 32px; }
  .lead { font-size: 20px; line-height: 32px; }
  .center-head h2, .systems__head h2, .about__copy h2, .faq__main h2, .letter__card h2 { font-size: 56px; line-height: 1; }

  .topbar { font-size: 16px; }
  .topbar__pill { padding: 0 54px 0 10px; gap: 20px; }
  .topbar__right { display: flex; }
  .mainbar { min-height: 0; padding: 14px 10px 14px; align-items: center; flex-wrap: wrap; }
  .brand { margin: 2px auto 0 0; }
  .brand img { width: 260px; }
  .round { display: none; }
  .nav { display: block; position: static; box-shadow: none; padding: 0; background: none; }
  .nav ul { display: flex; }
  .nav a { border: 0; padding: 0 20px; font-size: 20px; line-height: 30px; }
  .mainbar__cta { display: none; }

  .hero { grid-template-columns: 48% 52%; min-height: 780px; align-items: stretch; }
  .hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 60px 30px 60px 10px; }
  .hero__eyebrow, .hero h1, .hero__proof, .hero__ticks, .hero__quote, .stars-rule, .pills, .hero__copy .btn-row { padding: 0; text-align: left; order: 0; }
  .hero__eyebrow { font-size: 20px; line-height: 32px; margin-bottom: 10px; }
  .hero h1 { font-size: 60px; line-height: 1; max-width: 680px; }
  .hero__proof { justify-content: flex-start; font-size: 19px; margin-top: 22px; gap: 10px 18px; }
  .hero__proof-sep { display: block; }
  .hero__proof .stars .ic { width: 20px; height: 20px; }
  .hero__proof .ic--g { width: 24px; height: 24px; }
  .hero__ticks { margin-top: 26px; gap: 12px; }
  .hero__ticks li { font-size: 21px; line-height: 30px; padding-left: 38px; }
  .hero__ticks li::before { width: 26px; height: 26px; top: 2px; }
  .hero__quote { font-size: 19px; line-height: 30px; margin-top: 34px; max-width: 640px; }
  .stars-rule { max-width: 634px; margin: 18px 0 28px; }
  .stars-rule .ic { width: 22px; height: 22px; }
  .pills { justify-content: flex-start; max-width: 640px; gap: 10px; }
  .pills li { font-size: 17px; padding: 8px 22px 8px 12px; }
  .pills .ic { width: 26px; height: 26px; }
  .hero__copy .btn-row { justify-content: flex-start; margin: 34px 0 0; }
  .hero__panel { padding: 40px 10px 70px 90px; background: var(--blue) radial-gradient(circle at 60% 30%, #2aa5e6 0, transparent 55%); display: flex; align-items: flex-start; justify-content: flex-end;
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 3% 100%, 4.5% 94%, 2% 88%, 4% 80%, 1.5% 73%, 4% 66%, 2.5% 58%, 5% 50%, 2% 43%, 4.5% 35%, 2% 27%, 5% 19%, 3% 11%, 6.5% 5%); }
  .hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 48%; width: 70px; background: #f4f4f4; z-index: 0; pointer-events: none;
    clip-path: polygon(30% 0, 100% 0, 85% 5%, 72% 11%, 80% 19%, 58% 27%, 72% 35%, 50% 43%, 75% 50%, 55% 58%, 70% 66%, 50% 73%, 68% 80%, 48% 88%, 62% 94%, 42% 100%, 0 100%, 15% 94%, 0 88%, 18% 80%, 2% 73%, 20% 66%, 6% 58%, 25% 50%, 4% 43%, 22% 35%, 3% 27%, 26% 19%, 8% 11%, 26% 5%); }
  .hero__photo { display: block; position: absolute; left: 4%; top: 60px; transform: rotate(-4deg); width: 31%; height: auto; margin: 0; object-position: 50% 50%; aspect-ratio: 4/5; object-fit: cover; border-radius: 30px; border: 8px solid #fff; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
  .float-pill { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 1; background: #fff; color: var(--navy); border-radius: 40px; padding: 10px 20px; font: 400 18px/1 var(--head); box-shadow: 4px 6px 0 rgba(9,28,97,.2); white-space: nowrap; }
  .float-pill .ic { color: var(--blue); }
  .float-pill--a { left: 6%; top: 52%; transform: rotate(6deg); }
  .float-pill--b { left: 3%; top: 68%; transform: rotate(-12deg); }
  .float-pill--c { right: 4%; bottom: 8%; transform: rotate(-6deg); }
  .quote-card { width: 440px; padding: 26px 26px 20px; border-radius: 30px; }
  .quote-card__title { font-size: 26px; }
  .quote-card__lede { font-size: 16px; }
  .fgrid { gap: 10px 12px; }

  .band { padding: 150px 0 110px; }
  .band .track { padding: 4px 10px 10px; gap: 15px; overflow: visible; }
  .band .track > li { width: calc((100% - 60px) / 5); }
  .band .arrow { display: none; }
  .rcard { padding: 50px 35px 35px; font-size: 20px; line-height: 28px; }
  .pcard__big { font-size: 36px; }
  .pcard__small { font-size: 17px; }
  .band__cta { justify-content: flex-start; align-items: center; padding: 70px 10px 0; text-align: left; max-width: 700px; }
  .band__cta h2 { width: auto; max-width: 400px; font-size: 34px; line-height: 40.8px; margin: 0 20px 0 0; }
  .band__ghost { font-size: 300px; bottom: 6%; left: 0; transform: none; }

  .systems { padding: 140px 0 160px; }
  .systems__head { margin: 0 0 40px; padding: 0 10px; max-width: 720px; text-align: left; }
  .systems .track { padding: 4px 10px 10px; gap: 40px; }
  .scard { width: calc((100% - 80px) / 3); }
  .scard img { padding: 0; border-radius: 20px; aspect-ratio: 13/10; }
  .scard__body { padding: 40px 30px 36px; }
  .scard h3 { font-size: 28px; }
  .scard p { font-size: 20px; line-height: 28px; }
  .systems .carousel__nav { margin-top: 18px; }
  .systems .btn-row { margin-top: 46px; }

  .about { grid-template-columns: 560px minmax(0, 596px); justify-content: space-between; column-gap: 160px; padding: 150px 10px 120px; align-items: center; }
  .about__photo { aspect-ratio: auto; height: 640px; border-radius: 30px 30px 30px 0; }
  .seal { width: 220px; height: 220px; right: -110px; top: 20px; }
  .seal__big { font-size: 40px; }
  .seal__small { font-size: 18px; }
  .about__copy { max-width: 596px; }
  .about__copy > p { font-size: 20px; line-height: 32px; margin-bottom: 30px; }
  .tiles { gap: 20px; margin: 10px 0 40px; }
  .tiles li { padding: 35px 20px 30px; min-height: 281px; }
  .tiles h3 { font-size: 24px; }
  .tiles p { font-size: 16px; }
  .about__tag { font-size: 20px; line-height: 30px; margin-bottom: 40px; }

  .regrets { padding: 180px 0 30px; }
  .regrets .center-head { margin-bottom: 70px; }
  .tilt { grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: center; padding: 0; }
  .tilt__card { padding: 110px 70px; min-height: 514px; display: flex; flex-direction: column; justify-content: center; }
  .tilt__card--l { transform: rotate(-9deg) translateX(-30px); }
  .tilt__card--r { transform: rotate(9deg) translateX(30px); }
  .tilt__card h3 { font-size: 26px; }
  .tilt__card p { font-size: 19px; line-height: 28px; }
  .tilt__icon { width: 106px; height: 106px; }
  .ribbon { margin-top: 140px; margin-bottom: -95px; }

  .offers { padding: 40px 0 100px; }
  .offers .center-head { margin-bottom: 60px; }
  .ogrid { grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0 10px; grid-template-areas: "a b c" "w w c"; }
  .ocard--a { grid-area: a; } .ocard--b { grid-area: b; } .ocard--c { grid-area: c; } .ocard--wide { grid-area: w; }
  .ocard { padding: 45px 10px 10px; }
  .ocard .ocard__big { font-size: 76px; }
  .ocard h3 { font-size: 30px; }
  .ocard p { font-size: 17px; line-height: 25px; }
  .ocard--wide { flex-direction: row; align-items: center; gap: 30px; padding: 10px; text-align: left; }
  .ocard--wide img { width: 40%; aspect-ratio: 16/10; }
  .ocard--wide .ocard__big { margin: 0; font-size: 54px; line-height: .95; flex: none; }
  .ocard--wide div { padding: 0 20px 0 0; }
  .ocard--wide h3 { margin: 0 0 8px; }
  .ocard--wide p { padding: 0; }
  .choose { margin-top: 90px; }
  .choose__title { font-size: 40px; }
  .choose__row { padding: 18px 30px; font-size: 18px; }

  .letter { padding: 160px 10px; background-size: cover; background-position: center 30%; min-height: 1100px; display: flex; justify-content: flex-end; align-items: center; }
  .letter::before { background: linear-gradient(90deg, transparent 0 25%, rgba(255,255,255,.55) 60%, rgba(255,255,255,.9) 100%); }
  .letter__card { width: 816px; padding: 100px; border-radius: 50px; }
  .checks { gap: 14px; font-size: 20px; }
  .checks li { padding-left: 38px; }
  .checks li::before { width: 24px; height: 24px; top: 5px; }
  .letter__card > p { font-size: 20px; }
  .badges img { height: 80px; }

  .area { padding: 200px 0 160px; }
  .area .center-head { margin-bottom: 90px; }
  .area__card { margin: 0 auto; }
  .area__bar { padding: 35px 55px; font-size: 26px; }
  .area__body { grid-template-columns: 1fr 340px; padding: 40px 0 40px 60px; }
  .area__list { grid-template-columns: repeat(3, 1fr); column-gap: 120px; font-size: 20px; align-content: start; }
  .area__blob { width: 340px; margin: 0; align-self: end; }

  .reviews { padding-bottom: 170px; }
  .reviews::before { height: 260px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
  .arch { width: 440px; height: 380px; padding-top: 40px; }
  .arch::before { inset: 0 -20px -20px; }
  .reviews .center-head { margin-bottom: 90px; }
  .rgrid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding: 0 25px; align-items: start; }
  .gcard { padding: 80px 40px 50px; }
  .gcard--navy { margin-top: 70px; }
  .gcard h3 { font-size: 26px; }
  .gcard p { font-size: 19px; line-height: 28px; }
  .brands { margin-top: 90px; }

  .faq { grid-template-columns: 819px 1fr; gap: 90px; padding: 210px 10px 200px; }
  .acc details p { font-size: 20px; line-height: 32px; padding: 0 25px 25px; }
  .acc summary { font-size: 20px; line-height: 32px; padding: 20px 60px 20px 25px; }
  .ask { margin-top: 50px; padding: 35px 35px 70px; }
  .ask img { width: 260px; height: 260px; }
  .ask h3 { font-size: 36px; }
  .ask p { font-size: 19px; line-height: 24px; }

  .installs { padding: 200px 0 160px; }
  .installs .center-head { margin-bottom: 60px; }
  .installs .track { padding: 34px 10px 10px; gap: 40px; }
  .icard { width: calc((100% - 80px) / 3); margin-top: 0; }
  .icard__img { margin: -34px 20px 0; }
  .icard h3 { font-size: 28px; padding: 40px 30px 0; }

  .contact { grid-template-columns: 1fr 752px; gap: 80px; padding: 200px 10px 140px; align-items: center; }
  .contact__steps h2 { font-size: 50px; line-height: 1; }
  .steps li { padding: 24px 24px 24px 96px; }
  .steps li::before { width: 56px; height: 56px; font-size: 28px; line-height: 56px; left: 22px; top: 22px; }
  .steps h3 { font-size: 24px; }
  .steps p { font-size: 18px; }
  .contact__card { padding: 80px 80px 70px; border-radius: 40px; }
  .contact__card h2 { font-size: 40px; line-height: 1.05; }
  .contact__card > p { font-size: 20px; margin-bottom: 34px; }
  .contact .fgrid { gap: 14px; }
  .contact .field input, .contact .field select { height: 58px; }

  .footer { padding: 100px 10px 30px; }
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1.1fr 248px; gap: 40px; }
  .footer__brand img { width: 320px; }
  .footer__h { font-size: 22px; }
  .footer__links { font-size: 19px; }
  .footer__links--plain { font-size: 17px; }
}

/* 1025-1279: tighten the 1440 layout */
@media (min-width: 1025px) and (max-width: 1279px) {
  .nav a { padding: 0 11px; font-size: 17px; }
  .brand img { width: 210px; }
  .mainbar__cta .btn--sm { padding: 18px 16px; font-size: 14px; }
  .hero h1 { font-size: 46px; }
  .hero__ticks li { font-size: 18px; line-height: 27px; }
  .hero__proof { font-size: 17px; }
  .hero__quote { font-size: 17px; line-height: 27px; margin-top: 26px; }
  .pills li { font-size: 14px; }
  .hero__copy .btn-row { margin-top: 34px; }
  .hero__panel { padding-left: 60px; }
  .quote-card { width: 400px; }
  .float-pill { display: none; }
  .band .track { overflow-x: auto; }
  .band .track > li { width: 260px; }
  .about { grid-template-columns: 420px minmax(0, 1fr); column-gap: 120px; }
  .seal { width: 170px; height: 170px; right: -90px; }
  .seal__big { font-size: 30px; }
  .tilt__card { padding: 80px 40px; }
  .ocard .ocard__big { font-size: 58px; }
  .ocard--wide .ocard__big { font-size: 40px; }
  .area__list { column-gap: 50px; }
  .faq { grid-template-columns: 1fr 380px; gap: 50px; }
  .contact { grid-template-columns: 1fr 560px; gap: 50px; }
  .contact__card { padding: 50px; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}


/* Hero v3: full-bleed photo, navy overlay, copy left, quote card right */
@media (min-width: 900px) {
  .hero { grid-template-columns: 54% 46%; min-height: 820px; background: var(--navy-deep); overflow: hidden; }
  .hero::after { display: none; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(9,28,97,.94) 0, rgba(9,28,97,.82) 36%, rgba(9,28,97,.25) 62%, rgba(9,28,97,0) 100%); }
  .hero__panel { position: static; background: none; clip-path: none; padding: 40px 30px 40px 0; align-items: center; z-index: auto; }
  .hero__copy { position: relative; z-index: 2; padding: 60px 20px 60px 40px; }
  .hero .hero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; transform: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 100% 20%; }
  .hero .float-pill, .hero__quote, .stars-rule { display: none; }
  .hero__eyebrow { color: #fff; }
  .hero__eyebrow span { text-decoration: underline; text-decoration-color: #9fe2ff; text-decoration-thickness: 4px; text-underline-offset: 7px; }
  .hero h1 { color: #fff; }
  .hero h1 .hl { color: #9fe2ff; }
  .hero__proof, .hero__proof a, .hero__proof > span { color: #fff; }
  .hero__proof-sep { background: rgba(255,255,255,.4); }
  .hero__proof > span .ic { color: #5cc6ff; }
  .hero__ticks li { color: #fff; }
  .pills { margin-top: 28px; }
  .pills li { background: rgba(9,28,97,.55); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); }
  .quote-card { box-shadow: 0 20px 50px rgba(0,0,0,.4); }
  .hero { grid-template-columns: 50% 50%; min-height: 0; }
  .hero__copy { padding: 44px 20px 44px 40px; }
  .hero__eyebrow { font-size: 26px; line-height: 34px; font-weight: 700; margin-bottom: 8px; }
  .hero h1 { font-size: 50px; max-width: 580px; }
  .hero__proof { font-size: 17px; margin-top: 16px; }
  .hero__ticks { margin-top: 16px; gap: 8px; }
  .hero__ticks li { font-size: 18px; line-height: 26px; padding-left: 34px; }
  .hero__ticks li::before { width: 22px; height: 22px; }
  .pills { margin-top: 20px; max-width: 580px; gap: 8px; }
  .pills li { font-size: 13px; padding: 6px 14px 6px 8px; }
  .pills .ic { width: 20px; height: 20px; }
  .hero__copy .btn-row { margin-top: 22px; }
  .hero__panel { padding: 30px 30px 30px 0; }
  .hero__sub { display: block; max-width: 560px; margin-top: 14px; font-size: 18px; line-height: 27px; color: #fff; }
  .hero__sub strong { color: #fff; }
  .pills { margin-top: 22px; gap: 10px; max-width: 600px; }
  .pills li { font-size: 14px; padding: 8px 16px 8px 10px; }
  .pills .ic { width: 22px; height: 22px; }
  .hero .pill--lic a { color: #5cc6ff; font-weight: 700; text-decoration: underline; margin-left: 4px; }
}
.pill--lic a { color: var(--blue-text); font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* Recent installations: auto-scrolling carousel */
.recent-installs { background: #fff; padding: 40px 0 36px; }
.recent-installs__in { max-width: none; margin: 0 auto; }
.recent-installs .carousel { margin-top: 22px; }
.recent-installs__track { padding-bottom: 14px; }
.recent-install { position: relative; width: 78%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--pale); box-shadow: 0 8px 22px rgba(9,28,97,.12); }
.recent-install img { width: 100%; height: 100%; object-fit: cover; }
.recent-install__chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 40px; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(8,28,48,.18); color: var(--ink); font-size: 13px; line-height: 1.3; }
.recent-install__chip strong { color: var(--navy); }
.recent-install__chip span::before { content: "\2022"; margin-right: 8px; color: var(--blue); }
.recent-install--baulkham-hills img { object-position: 50% 20%; }
.recent-install--rose-bay img { object-position: 50% 35%; }
.recent-install--cronulla img { object-position: 50% 30%; }
.recent-install--sutherland-shire-2 img { object-position: 50% 30%; }
.recent-install--eastern-suburbs img { object-position: 50% 25%; }
@media (min-width: 620px) { .recent-install { width: calc((100% - 28px - 2 * var(--gutter)) / 3); } }
@media (min-width: 980px) {
  .recent-installs { padding: 64px 0 56px; }
  .recent-install { width: calc((100% - 42px - 2 * var(--gutter)) / 4); }
}
@media (max-width: 899px) {
  .hero__eyebrow { font-size: 17px; font-weight: 700; }
  .hero__eyebrow span { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: 5px; }
}