/* Window Wallaby. Palette taken from the client's own logo SVGs (BRIEF.md "Brand"):
   navy #0D1B2A, blue #2E7CC1, orange #DF8F3B, rust #AA4B36, cream #FBEDD3 / #F6D7B0.
   Text-on-color pairs are chosen for WCAG AA: navy on orange ~6.8:1, white on navy ~17:1,
   link blue #1B5E9E on white ~6.5:1 (the logo blue #2E7CC1 is ~4.3:1, so it is used for
   decoration and large marks only, never body text). */
:root {
  --navy: #0D1B2A;
  --navy-2: #16293D;
  --blue: #2E7CC1;
  --blue-ink: #1B5E9E;
  --sun: #DF8F3B;
  --sun-2: #E9A45E;
  --rust: #AA4B36;
  --cream: #FBF3E4;
  --cream-2: #F6E6C8;
  --paper: #FFFFFF;
  --ink: #1B2733;
  --muted: #4E5B68;
  --line: #E6DCC8;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(13,27,42,.06), 0 8px 28px rgba(13,27,42,.08);
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font: 17px/1.65 var(--sans); color: var(--ink); background: var(--paper); }
img, svg { max-width: 100%; }
a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1em; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { max-width: 780px; }
.wrap.narrow { width: min(780px, 100% - 32px); }
.center { text-align: center; margin-inline: auto; }
.lead { font-size: 1.14rem; color: var(--muted); }
.mt { margin-top: 1.6em; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .7em 1.25em; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1rem; line-height: 1.2; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--sun { background: var(--sun); color: var(--navy); }
.btn--sun:hover { background: var(--sun-2); color: var(--navy); }
.btn--ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.btn--lg { padding: .9em 1.5em; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-lockup { height: 58px; width: auto; }
.brand-mark { display: none; height: 44px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: .96rem; }
.nav a:hover { color: var(--blue-ink); text-decoration: underline; }
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-phone { color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mnav { display: none; position: relative; }
.mnav__btn { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); color: var(--navy); }
.mnav__btn::-webkit-details-marker { display: none; }
.mnav__close, .mnav[open] .mnav__open { display: none; }
.mnav[open] .mnav__close { display: block; }
.mnav__panel { position: absolute; right: 0; top: 54px; width: min(300px, 88vw); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.mnav__panel nav a, .mnav__phone { display: block; padding: 12px 14px; color: var(--navy); text-decoration: none; font-weight: 600; border-radius: 8px; }
.mnav__panel nav a:hover { background: var(--cream); }
.mnav__phone { background: var(--cream); margin-top: 6px; }
@media (max-width: 1060px) { .nav { display: none; } .mnav { display: block; } .header-cta { margin-left: auto; } }
@media (max-width: 640px) { .header-phone { display: none; } }
@media (max-width: 460px) { .brand-lockup { display: none; } .brand-mark { display: block; } .bar { min-height: 64px; } }

/* ---------- hero */
.hero { position: relative; padding: 56px 0 64px; background:
  linear-gradient(180deg, var(--cream) 0%, #FFF9EF 100%); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(46,124,193,.07) 2px, transparent 2px), linear-gradient(90deg, rgba(46,124,193,.07) 2px, transparent 2px);
  background-size: 120px 120px; mask-image: linear-gradient(90deg, transparent 0, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%); }
.hero--home { padding: 72px 0 84px; }
.hero--plain { padding: 44px 0 40px; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.hero__copy { padding-top: 8px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--rust); margin-bottom: .8em; }
.hero__sub { font-size: 1.16rem; color: var(--muted); max-width: 40em; }
.trust { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 9px; }
.trust li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tick circle { fill: var(--blue); }
.tick path { stroke: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__rating { margin-top: 18px; font-size: .95rem; }
.hero__rating a { color: var(--navy); text-decoration: none; font-weight: 600; }
.stars { color: var(--sun); letter-spacing: 2px; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero, .hero--home { padding: 36px 0 48px; } }

/* ---------- breadcrumb */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .88rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #9AA5B0; }
.crumbs a { color: var(--muted); }

/* ---------- quote form */
.quote-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 26px; border-top: 5px solid var(--sun); }
.quote-card__h { font-size: 1.6rem; margin-bottom: .2em; }
.quote-card__sub { color: var(--muted); margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px; color: var(--navy); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; padding: 11px 12px; border: 1.5px solid #CBD2D9; border-radius: 10px; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(46,124,193,.2); outline-offset: 0; }
.field .err { display: none; color: #B42318; font-size: .85rem; margin-top: 4px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B42318; }
.field.invalid .err { display: block; }
.consent-note, .form-foot { font-size: .86rem; color: var(--muted); }
.form-foot { margin: 12px 0 0; text-align: center; }
.form-success { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: #E8F4EA; color: #1E5A2B; font-weight: 600; }
.form-success.error { background: #FDECEA; color: #8A1C12; }

/* ---------- sections */
.section { padding: 72px 0; }
.section--white { background: #fff; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: #E6EDF4; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .lead { color: #C3D0DD; }
.section .wrap.narrow > h2:not(:first-child) { margin-top: 1.4em; }
@media (max-width: 700px) { .section { padding: 52px 0; } }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 34px; }
.card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--sun); color: var(--ink); }
.card h3 { margin: 12px 0 6px; font-size: 1.22rem; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }
.card__ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--cream); color: var(--blue-ink); }
.cards--small { margin-top: 18px; }
.cards--small .card { padding: 16px 18px; }

.feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 28px; } }
.more { font-weight: 700; }

.review { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.review blockquote { margin: 8px 0 12px; }
.review blockquote p { margin: 0; font-size: 1.02rem; }
.review figcaption { font-size: .9rem; color: var(--muted); font-weight: 600; }
.review--big { border-left: 5px solid var(--sun); box-shadow: var(--shadow); }
.review--big blockquote p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; color: var(--navy); }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.wrap.narrow .review { margin-top: 18px; }

.guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 640px) { .guarantees { grid-template-columns: 1fr; } }
.guarantee { background: var(--cream); border-radius: var(--radius); padding: 20px 22px; border: 1px solid var(--line); }
.section--cream .guarantee { background: #fff; }
.guarantee h3 { font-size: 1.15rem; }
.guarantee p { margin: 0; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } }
.tier { border-radius: var(--radius); padding: 24px; text-align: center; background: var(--cream); border: 1px solid var(--line); }
.section--navy .tier { background: var(--navy-2); border-color: #2A4058; }
.tier h3 { margin: 4px 0; }
.tier p { margin: 0; color: var(--muted); }
.section--navy .tier p { color: #B8C6D4; }
.tier .tier__off { font-family: var(--serif); font-size: 2.3rem; color: var(--rust); line-height: 1.1; }
.section--navy .tier .tier__off { color: var(--sun); }

.ticks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .tick { flex-shrink: 0; margin-top: 3px; }
.steps { padding-left: 1.3em; display: grid; gap: 10px; margin-bottom: 1.6em; }
.plain { padding-left: 1.2em; display: grid; gap: 8px; }
.callout { background: var(--cream); border-left: 4px solid var(--blue); padding: 14px 18px; border-radius: 0 10px 10px 0; margin-top: 1.2em; }
.section--cream .callout { background: #fff; }
.fact { font-size: 1.08rem; }
.source { font-size: .84rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chips a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); text-decoration: none; font-weight: 600; font-size: .95rem; }
.section--white .chips a { background: var(--cream); }
.chips a:hover { border-color: var(--sun); color: var(--navy); }

.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 24px; }
.area { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: #fff; }
.area:hover { border-color: var(--sun); box-shadow: var(--shadow); }
.area h3 { margin: 0 0 2px; font-size: 1.15rem; }
.area p { margin: 0; color: var(--muted); font-size: .9rem; }
.others dt { font-weight: 700; color: var(--navy); margin-top: 14px; }
.others dd { margin: 2px 0 0; }

.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--blue-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq__q { font-family: var(--sans); font-weight: 700; font-size: 1.04rem; margin: 0; color: var(--navy); }
.faq__a { padding: 0 20px 6px; }

.cta-band { background: var(--navy); color: #DCE5EE; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #C3D0DD; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.contact-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 24px 0; }
.contact-list dt { font-weight: 700; color: var(--navy); }
.contact-list dd { margin: 0; }
@media (max-width: 520px) { .contact-list { grid-template-columns: 1fr; gap: 2px; } .contact-list dd { margin-bottom: 10px; } }

/* ---------- footer */
.site-footer { background: #08121C; color: #B8C6D4; padding: 56px 0 28px; font-size: .95rem; }
.site-footer a { color: #E6EDF4; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand img { height: 64px; width: auto; margin-bottom: 8px; }
.foot-tag { font-family: var(--serif); font-size: 1.2rem; color: var(--sun); }
.foot-phone { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.foot-h { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; margin-bottom: 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid #1E2E40; margin-top: 36px; padding-top: 20px; font-size: .86rem; }
.foot-bottom p { margin: 0; }

/* =================================================================== direction A (2026-09-29)
   Cream "Clear Day" hero with a giant window frame, a squeegee wipe across the view, the
   mascot peeking over the quote card, and direction C's window-framed tier cards. Everything decorative is
   aria-hidden or has empty alt; every word stays in HTML. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hero--home { padding: 64px 0 120px; }
.hero--home .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
.hero--home h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; }
/* Desktop hero = the first-screen stage for the wallaby's hero scene (ChatGPT/Porter,
   2026-09-29): it fills the screen below the sticky header, the copy sits close under the
   header, the window sits 40 px above the stage floor, and the quote form starts after the
   stage instead of overlapping it. The stage floor is his ground line (js/wallaby.js). */
@media (min-width: 901px) {
  .hero--home { min-height: calc(100vh - 77px); min-height: calc(100svh - 77px); padding: 36px 0 0; display: flex; flex-direction: column; }
  .hero--home .hero__grid { flex: 1; align-items: start; padding-bottom: 40px; }
  .hero--home .pane { align-self: end; }
  .hero--home + .dock { margin-top: 0; padding-top: 32px; }
}
/* Height-responsive hero composition (ChatGPT/Porter). Short desktops (up to ~830 px tall):
   compress so the whole hero, rating and window bottom included, fits above the stage floor.
   Same copy, smaller headline (~10%), tighter gaps, window capped by the stage height. */
@media (min-width: 901px) and (max-height: 830px) {
  .hero--home { padding-top: 24px; }
  .hero--home .hero__grid { padding-bottom: 30px; }
  .hero--home h1 { font-size: clamp(2.2rem, 4.5vw, 3.95rem); margin-bottom: .28em; }
  .hero--home .eyebrow { margin-bottom: .5em; }
  .hero--home .hero__sub { line-height: 1.5; margin: 0; }
  .hero--home .trust { margin: 14px 0 16px; gap: 6px; }
  .hero--home .hero__rating { margin: 12px 0 0; }
  .hero--home .pane { max-width: min(560px, calc((100svh - 77px - 24px - 30px - 20px) * 5 / 5.4)); }
}
/* Tall desktops (1000 px and up): the window grows ~18% and rises to line up with the copy
   block, leaving the lower right as the wallaby's lane. It grows into the page margin on the
   right, so the copy column keeps its width; wide screens only, so it never overflows. */
@media (min-width: 1600px) and (min-height: 1000px) {
  .hero--home .pane { align-self: start; justify-self: start; width: 118%; max-width: 660px; }
}

.pane { position: relative; aspect-ratio: 5 / 5.4; max-width: 560px; justify-self: end; width: 100%; }
.pane__glass { position: absolute; inset: 0; border: 16px solid var(--navy); border-radius: 14px; overflow: hidden; background: #DCEBF7; box-shadow: 0 30px 60px rgba(13,27,42,.18); }
.pane__view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pane__view--sky { background:
  linear-gradient(180deg, #BFD9EF 0%, #E6F0F8 48%, transparent 48%),
  linear-gradient(170deg, transparent 52%, #7E98AE 52%, #7E98AE 60%, transparent 60%),
  linear-gradient(190deg, transparent 50%, #5F7B93 50%, #5F7B93 64%, transparent 64%),
  linear-gradient(180deg, transparent 62%, #F6E6C8 62%); }
.pane__bars::before, .pane__bars::after { content: ""; position: absolute; background: var(--navy); }
.pane__bars::before { left: calc(50% - 8px); top: 0; bottom: 0; width: 16px; }
.pane__bars::after { top: calc(50% - 8px); left: 0; right: 0; height: 16px; }
/* The haze: frosted, streaky film over the view. The wipe animates its clip-path so the
   clean band travels left to right, like a squeegee pass. */
.pane__haze { position: absolute; inset: 0; background:
  repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 14px, rgba(255,255,255,.05) 14px 30px),
  rgba(246,238,224,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation: haze-wipe 2.6s cubic-bezier(.55,.05,.25,1) .5s both; }
.pane__streak { position: absolute; top: -10%; bottom: -10%; width: 10%; left: -12%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-12deg); opacity: 0; animation: streak 2.6s cubic-bezier(.55,.05,.25,1) .5s both; }
@keyframes haze-wipe {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(112% 0, 100% 0, 100% 100%, 100% 100%); }
}
/* transform, not left: animating left is a layout shift (CLS) on every frame. The streak is
   10% of the glass wide, so 1220% of its own width = the old -12% to 110% travel. */
@keyframes streak { 0% { transform: translateX(0); opacity: .9; } 90% { opacity: .9; } 100% { transform: translateX(1220%); opacity: 0; } }
.pane__mascot { position: absolute; right: -8%; bottom: -8%; width: 72%; height: auto; filter: drop-shadow(0 18px 24px rgba(13,27,42,.25));
  animation: mascot-in .9s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes mascot-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pane__haze, .pane__streak { display: none; }
  .pane__mascot { animation: none; }
}
@media (max-width: 900px) { .hero--home .hero__grid { grid-template-columns: 1fr; } .pane { justify-self: center; max-width: 440px; margin-top: 12px; } .hero--home { padding-bottom: 90px; } }

/* Quote card with the wallaby peeking over its top edge. */
.quote-wrap { position: relative; }
.quote-wrap.has-peek { padding-top: 96px; }
.peek { position: absolute; top: 0; right: 28px; width: 190px; height: auto; z-index: 0; pointer-events: none; }
.quote-wrap .quote-card { position: relative; z-index: 1; }
.dock { position: relative; margin-top: -86px; padding-bottom: 20px; }
.dock .quote-wrap.has-peek { margin-top: -96px; }
.quote-card--wide form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.quote-card--wide .field-row { display: contents; }
.quote-card--wide #wrap-details textarea { min-height: 50px; height: 50px; }
.quote-card--wide .consent-note { grid-column: 1 / 3; align-self: center; margin: 0; }
.quote-card--wide #submitBtn { grid-column: 3; }
.quote-card--wide .form-foot { grid-column: 1 / -1; }
@media (max-width: 900px) { .quote-card--wide form { grid-template-columns: 1fr; } .quote-card--wide .consent-note, .quote-card--wide #submitBtn { grid-column: auto; } .quote-card--wide .consent-note { margin-bottom: 12px; } .dock { margin-top: -60px; } }

/* Service cards carrying a scene illustration. */
/* Scene cards: the illustration stands on a cream "stage" across the top of the card, feet on
   its bottom edge, text below. Side-by-side squeezed the copy into a narrow column. */
.card--art { padding: 0; overflow: hidden; }
.card--art .card__art { display: block; width: 100%; height: 170px; object-fit: contain; object-position: 50% 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%); padding: 14px 18px 0; box-sizing: border-box;
  border-bottom: 1px solid var(--line); transition: transform .25s ease; }
.card--art:hover .card__art { transform: translateY(-3px); }
.card--art h3, .card--art p { padding: 0 22px; }
.card--art h3 { margin: 16px 0 6px; }
.card--art p { padding-bottom: 20px; }
.cards--small .card--art .card__art { height: 130px; }


/* Scene placements on inner pages. */
.intro--art { display: grid; grid-template-columns: 1fr 240px; gap: 32px; align-items: center; }
.intro--art .intro__art { order: 2; width: 240px; height: auto; }
@media (max-width: 700px) { .intro--art { grid-template-columns: 1fr; } .intro--art .intro__art { order: 0; width: 60%; justify-self: center; } }
.float-art { float: right; width: 220px; height: auto; margin: 0 0 12px 24px; }
@media (max-width: 600px) { .float-art { float: none; display: block; margin: 0 auto 16px; width: 60%; } }
.owners__art { width: 200px; height: auto; margin-top: 8px; }
.hero--pic { position: relative; }
.plain-hero__art { position: absolute; right: max(16px, calc((100vw - 1160px) / 2)); bottom: 0; width: 230px; height: auto; }
@media (max-width: 900px) { .plain-hero__art { display: none; } }

/* Direction C tier cards: each discount framed as a window in the logo blue. */
.tiers { gap: 22px; }
.tier { background: #fff; border: 12px solid var(--blue); border-radius: 18px; text-align: left; padding: 28px 28px 24px; position: relative; overflow: hidden; }
.tier::before, .tier::after { content: ""; position: absolute; background: rgba(46,124,193,.07); pointer-events: none; }
.tier::before { left: 50%; top: 0; bottom: 0; width: 8px; transform: translateX(-50%); }
.tier::after { top: 50%; left: 0; right: 0; height: 8px; transform: translateY(-50%); }
.tier .tier__off { font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 4.2rem); color: var(--rust); line-height: 1; margin-bottom: 8px; }
.tier h3 { font-family: var(--sans); font-weight: 800; font-size: 1.3rem; margin: 0 0 2px; }
.tier .tier__rain { margin-top: 12px; font-size: .9rem; font-weight: 700; color: var(--blue-ink); }
.section--navy .tier { background: #fff; border-color: var(--blue); }
.section--navy .tier p { color: var(--muted); }
.section--navy .tier .tier__off { color: var(--rust); }
.plans__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.plans__head .lead { margin-bottom: 0; max-width: 34em; }

/* =================================================================== the living mascot
   js/wallaby.js. A fixed "floor" along the bottom of the viewport. He is always drawn on top of the page (no occlusion since 2026-09-29): he walks past content, never behind it.
   painted above it, so he passes behind cards and can never cover a form or a button. */
.wb-stage { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--wb-h) * 2.6); z-index: 40;
  pointer-events: none; overflow-x: clip; overflow-y: visible; visibility: hidden; }
/* no fade: he walks in from off-screen, so the stage just switches on */
.wb-stage.is-on { visibility: visible; }
.wb { position: absolute; left: 0; bottom: 0; width: var(--wb-w); height: var(--wb-h); margin-left: calc(var(--wb-w) / -2); will-change: transform; }
.wb__body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.wb__sprite { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; will-change: transform, background-position;
  filter: drop-shadow(0 3px 6px rgba(13,27,42,.16)); }
.wb__shadow { position: absolute; left: 12%; right: 12%; bottom: -4px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13,27,42,.35), rgba(13,27,42,0)); opacity: .35; }
/* The patch of "glass" he cleans: a soft film with a few beads, level with the blade and
   just in front of him. The wipe clip-path reveals it clearing from the bottom up, matching
   the upward stroke in the clean clip. Low opacity by design: it sells the joke, it never
   hides content. */
.wb__smudge { position: absolute; bottom: 38%; left: calc(50% + var(--wb-side, 1) * 38%); width: 46%; height: 62%;
  transform: translateX(-50%); opacity: 0; border-radius: 30% 30% 40% 40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.7) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 64% 52%, rgba(255,255,255,.6) 0 1.2px, transparent 2px),
    radial-gradient(circle at 42% 74%, rgba(255,255,255,.6) 0 1.5px, transparent 2.3px),
    linear-gradient(100deg, rgba(234,226,212,0) 0%, rgba(234,226,212,.38) 30%, rgba(234,226,212,.38) 70%, rgba(234,226,212,0) 100%);
  filter: blur(.3px);
  /* feathered, so it reads as fog on glass, not a pale box */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.wb__btn { position: absolute; left: 18%; right: 18%; top: 18%; bottom: 0; pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0; border-radius: 40% 40% 12px 12px; }
.wb__btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.wb:has(.wb__btn:hover) .wb__body { transform: translateY(-3px); transition: transform .15s ease; }
.wb-stage.is-chat { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .wb-stage { display: none; } }

/* Scaler: wraps everything he is and scales about his feet (scene-level size). */
.wb__scaler { position: absolute; inset: 0; transform-origin: 50% 100%; }
/* Speech bubble (placement engine in js/wallaby.js): fixed, positioned by transform every
   frame, never wider than 320px on desktop or the screen minus 32px on phones. */
.wb-bubble { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; max-width: min(320px, calc(100vw - 32px));
  background: #FFFFFF; color: #0D1B2A; border: 3px solid #0D1B2A; border-radius: 18px; padding: 10px 16px;
  font: 800 1.05rem/1.25 var(--sans); box-shadow: 0 5px 0 rgba(13,27,42,.9); will-change: transform; }
.wb-bubble__text { position: relative; z-index: 1; display: block; }
.wb-bubble__tail { position: absolute; width: 16px; height: 16px; background: #FFFFFF; z-index: 0; }
.wb-bubble__tail[data-side="bottom"] { bottom: -10px; transform: translateX(-50%) rotate(45deg); border-right: 3px solid #0D1B2A; border-bottom: 3px solid #0D1B2A; }
.wb-bubble__tail[data-side="top"] { top: -10px; transform: translateX(-50%) rotate(45deg); border-left: 3px solid #0D1B2A; border-top: 3px solid #0D1B2A; }
.wb-bubble__tail[data-side="left"] { left: -10px; transform: translateY(-50%) rotate(45deg); border-left: 3px solid #0D1B2A; border-bottom: 3px solid #0D1B2A; }
.wb-bubble__tail[data-side="right"] { right: -10px; transform: translateY(-50%) rotate(45deg); border-right: 3px solid #0D1B2A; border-top: 3px solid #0D1B2A; }
@media (max-width: 700px) { .wb-bubble { font-size: .95rem; } }

/* Page layer (document coordinates) for set pieces attached to the page. */
/* Water beads on the hero window's glass, sprayed by the wallaby and wiped off. */
.pane__dirt { position: absolute; z-index: 2; pointer-events: none; border-radius: 26px; opacity: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.85) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 38% 58%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 70%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 84%, rgba(255,255,255,.75) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 50%, rgba(235,240,245,.55), rgba(235,240,245,.25) 60%, transparent 75%);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }

/* Wallaby scene gates (js/wallaby.js): while a scene plays the page is locked in place.
   The gutter stays reserved so hiding the scrollbar never shifts the page sideways. */
html { scrollbar-gutter: stable; }
html.wb-locked { overflow: hidden; }
.wb-bubble--compact { max-width: min(220px, calc(100vw - 32px)); font-size: .88em; padding: 8px 12px; }
/* Hero walk-up-and-wipe (js/wallaby.js): a faint, soft film on the hero glass that his
   squeegee clears (ChatGPT: ~8-10%, broad irregular streaks, not a stripe pattern). */
.pane__film { position: absolute; inset: -6px; z-index: 2; pointer-events: none; filter: blur(5px);
  background:
    linear-gradient(112deg, transparent 8%, rgba(255,255,255,.13) 20%, transparent 34%),
    linear-gradient(104deg, transparent 44%, rgba(255,255,255,.10) 55%, transparent 70%),
    linear-gradient(120deg, transparent 72%, rgba(255,255,255,.09) 82%, transparent 92%),
    radial-gradient(ellipse 60% 40% at 30% 75%, rgba(255,255,255,.10), transparent 70%),
    rgba(236, 240, 243, .07); }
@media (prefers-reduced-motion: reduce) { .pane__film { display: none; } }
.wb-mist { position: fixed; z-index: 44; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 14%, rgba(214,232,247,.7) 34%, rgba(214,232,247,.25) 55%, transparent 72%); }
.pane__wet { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.85) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 48% 60%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 66%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 70%, rgba(255,255,255,.85) 0 2.5px, transparent 3.5px),
    radial-gradient(circle, rgba(225,238,248,.55), transparent 70%); }

/* =====================================================================================
   Layout normalization pass (ChatGPT/Porter, 2026-09-29). Layout, spacing, proportion and
   type scale only: no copy, URL, SEO or hero-behaviour changes. Spacing scale used here:
   8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Homepage-only rules are scoped with
   main:has(.hero--home); everything else applies sitewide so inner pages match.
   ===================================================================================== */
:root { --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px; }
[id] { scroll-margin-top: 96px; }                     /* the sticky header never covers a heading */

/* type: one heading scale (section H2 ~38-48 px on desktop), card titles ~20-22 px */
h2 { font-size: clamp(1.85rem, 1.1rem + 1.7vw, 3rem); line-height: 1.12; margin-bottom: .45em; }
.lead { font-size: clamp(1.05rem, .98rem + .25vw, 1.18rem); line-height: 1.6; }
.card h3 { font-size: 1.3rem; }
.guarantee h3 { font-size: 1.25rem; }
.review figcaption { font-size: .92rem; }

/* section rhythm: sitewide 48-96 px, homepage major sections 56-128 px */
.section { padding: clamp(48px, 6.5vw, 96px) 0; }
main:has(.hero--home) .section { padding: clamp(56px, 8.5vw, 128px) 0; }
main:has(.hero--home) .cta-band { padding: clamp(72px, 9vw, 136px) 0; }

/* quote form: connected to the hero, same grid, more room, one control height */
main:has(.hero--home) .dock { padding: var(--s6) 0 0; }
.quote-card { padding: var(--s5); }
.quote-card--wide { padding: var(--s5) clamp(24px, 3vw, 44px); }
.quote-card--wide form { column-gap: var(--s4); }
.field { margin-bottom: var(--s3); }
.field input, .field select { height: 48px; }
.quote-card--wide #wrap-details textarea { height: 48px; min-height: 48px; }
.quote-card--wide #submitBtn { min-height: 52px; }

/* What we clean (home): an 8-column grid, 4 cards across, the 3-card second row centred;
   equal card heights, one heading baseline, text pinned in the same place in every card */
@media (min-width: 1000px) {
  main:has(.hero--home) #services .cards { grid-template-columns: repeat(8, 1fr); gap: var(--s4); margin-top: var(--s6); }
  main:has(.hero--home) #services .cards > * { grid-column: span 2; }
  main:has(.hero--home) #services .cards > :nth-child(5):nth-last-child(3) { grid-column: 2 / span 2; }
}
main:has(.hero--home) #services .card--art { display: flex; flex-direction: column; }
main:has(.hero--home) #services .card--art .card__art { height: 180px; padding: 16px 20px 0; }

/* Owners: two columns centred against each other */
.feature { gap: clamp(32px, 5vw, 72px); }

/* Guarantees and FAQ (home): aligned to the global grid instead of a narrow centred column;
   heading left, a readable max width, and the right side left open */
main:has(.hero--home) [data-wallaby-chapter="guarantees"] .wrap.narrow,
main:has(.hero--home) [data-wallaby-chapter="faq"] .wrap.narrow { width: min(1160px, 100% - 32px); max-width: none; }
main:has(.hero--home) .guarantees { max-width: 1000px; gap: var(--s4); margin-top: var(--s5); }
main:has(.hero--home) .guarantee { padding: var(--s5) 36px; }
main:has(.hero--home) .guarantee h3 { margin-bottom: .5em; }
main:has(.hero--home) .faq { max-width: 860px; margin-top: var(--s4); }
.faq details { margin-bottom: var(--s2); }
.faq summary { padding: 18px 52px 18px 22px; }
.faq__a { padding: 0 22px 10px; }

/* Plans: same grid, heading block and tiers spaced to the scale */
.plans__head { margin-bottom: var(--s2); }
.tiers { gap: var(--s4); margin: var(--s5) 0 0; }

/* Reviews: each card is as tall as its review, aligned to the top, so a one-line review
   reads as a compact testimonial rather than an empty box (ChatGPT) */
.reviews { gap: var(--s4); margin-top: var(--s5); align-items: start; }

/* Service areas (home): a balanced grid of city links instead of a loose cloud */
main:has(.hero--home) [data-wallaby-chapter="areas"] .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s2); max-width: 980px; margin-top: var(--s4); }
main:has(.hero--home) [data-wallaby-chapter="areas"] .chips a { text-align: center; padding: 11px 16px; }

/* Final CTA: a clear ending, one hierarchy */
.cta-band .lead { margin: 0 auto var(--s5); max-width: 36em; }
.cta-actions { gap: var(--s3); }

/* mobile hero: closer to one screen. The window drops to ~74% of its height (a 5:4 pane
   instead of 5:5.4) and the gaps around it tighten; all copy stays (ChatGPT) */
@media (max-width: 900px) {
  .hero--home .hero__grid { gap: var(--s4); }
  .hero--home .pane { aspect-ratio: 5 / 4; margin-top: 0; }
  .hero--home { padding-bottom: var(--s6); }
}
/* mobile: 16 px gutters (from .wrap), single-column cards, proportional spacing */
@media (max-width: 700px) {
  main:has(.hero--home) .dock { padding-top: var(--s5); }
  .quote-card--wide { padding: var(--s4) var(--s3); }
  .feature { gap: var(--s5); }
}

/* Mobile Wallaby widget (js/wallaby.js mobileWidget): bottom-right, like a chat button;
   tapping opens Text us / Call / Get a free quote. Phones only. */
.wbw { display: none; }
@media (max-width: 700px) {
  .wbw { display: block; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; transition: opacity .2s ease, transform .2s ease; }
  .wbw.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
  .wbw__btn { position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 0; cursor: pointer;
    background: radial-gradient(circle at 50% 30%, #FFFFFF 0, var(--cream) 70%); border: 3px solid var(--navy);
    box-shadow: 0 6px 18px rgba(13,27,42,.28); }
  .wbw__btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
  .wbw__face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
  .wbw__sprite { position: absolute; inset: 3px 3px 0; background: no-repeat 50% 100% / contain; pointer-events: none; }
  .wbw__btn { transition: transform .2s ease; }
  .wbw.is-open .wbw__btn { transform: scale(.94); }
  .wbw__badge { position: absolute; right: -2px; top: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sun); color: var(--navy); border: 2px solid #fff; }
  .wbw__panel { position: absolute; right: 0; bottom: 76px; width: min(260px, calc(100vw - 28px)); background: #fff; border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow); padding: 12px; }
  .wbw__panel[hidden] { display: none; }
  .wbw__title { margin: 2px 4px 10px; font-weight: 700; color: var(--navy); }
  .wbw__item { display: block; padding: 12px 14px; margin-top: 6px; border-radius: 12px; border: 1px solid var(--line); color: var(--navy); font-weight: 700; text-decoration: none; }
  .wbw__item--quote { background: var(--sun); border-color: var(--sun); }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .wbw { transition: none; } }

/* Decorative background photos (ChatGPT plan): Services on home under a cream tint (~89%,
   ~94% on phones); the final quote band sitewide under a navy tint (~84%). */
.has-bg { position: relative; isolation: isolate; overflow: hidden; }
.has-bg > .bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bg--light::before { background: rgba(255, 253, 248, .89); }
.cta-band.has-bg::before { background: rgba(13, 27, 42, .84); }
@media (max-width: 700px) { .bg--light::before { background: rgba(255, 253, 248, .94); } }

/* Service/city hero stories (ChatGPT plan): copy left (~52%), an illustrated stage right
   (~48%), the quote form in a band right below. The stage is shorter than the home hero so
   the form starts near the fold. The stage art blends into the hero (soft edge mask). */
.stage { position: relative; justify-self: end; width: 100%; max-width: 620px; aspect-ratio: 4 / 3; }
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;   /* the art brings its own transparent edges; */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);                     /* only its bottom crop is faded */
          mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
@media (min-width: 901px) { .hero--stage .hero__grid { grid-template-columns: 1.08fr .92fr; align-items: center; } .hero--stage { min-height: min(760px, calc(100svh - 77px)); display: flex; align-items: center; } .hero--stage > .wrap { width: min(1160px, 100% - 32px); } }
.hero--stage + .dock { padding: var(--s5) 0 0; }
@media (max-width: 900px) { .stage { justify-self: center; max-width: 560px; } .hero--stage + .dock { margin-top: 0; } }
/* The Wallaby in a service hero story (js/wallaby.js stageScene). Lives inside .stage. */
.stage .sw { position: absolute; left: 0; z-index: 2; width: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.stage .sw.is-on { opacity: 1; }
.sw__body { position: absolute; left: 0; top: 0; height: 100%; transform-origin: 0 50%; }
.sw__sprite { position: absolute; left: 0; top: 0; background-repeat: no-repeat; filter: drop-shadow(0 6px 10px rgba(13,27,42,.18)); }
.hero--stage { overflow-x: clip; }