/* =====================================================================
   Pane Purrfect: styles
   Mobile first. A hand drawn feel to match the logo: Amatic SC headings
   (close to the logo lettering), Patrick Hand for buttons and labels,
   DM Sans for reading. Black and white with the logo's window blue,
   sketchy borders with offset shadows, marker highlights, glass glints.
   ===================================================================== */

:root {
  --ink: #15171a;
  --ink-2: #2c3036;
  --muted: #56606b;
  --line: #dde6ee;
  --paper: #ffffff;
  --mist: #eef6fc;
  --sky: #d8eaf6;      /* the pane colour in the logo */
  --sky-2: #b4d8f3;
  --blue: #3d8fd6;
  --blue-2: #6fb3ea;
  --navy: #0f2236;
  --navy-2: #173b5c;
  --sky-ink: #235f8f;  /* blue for small text, passes contrast */
  --star: #f4b400;
  --fd: 'Amatic SC', 'Arial Narrow', sans-serif;
  --fh: 'Patrick Hand', 'Comic Sans MS', system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* slightly uneven corners read as hand drawn */
  --sk: 18px 24px 16px 26px / 24px 16px 26px 18px;
  --sk-sm: 12px 16px 11px 17px / 16px 11px 17px 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: 16px;
  --hd: 66px;
  --glint: linear-gradient(118deg, transparent 0 56%, rgba(255, 255, 255, .75) 56% 58.4%, transparent 58.4% 62%, rgba(255, 255, 255, .55) 62% 63.2%, transparent 63.2%);
  /* hand painted marker stroke and pen underline */
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 13C42 6 118 10 196 5l3 25c-52 5-128 3-197 7z' fill='%23b4d8f3'/%3E%3C/svg%3E");
  --marker-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 13C42 6 118 10 196 5l3 25c-52 5-128 3-197 7z' fill='%233d8fd6' fill-opacity='.55'/%3E%3C/svg%3E");
  --pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12C60 5 130 7 200 8s70-1 97-5M14 16c70-6 150-6 270-8' fill='none' stroke='%23b4d8f3' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --pen-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 2 70 3 118 4' fill='none' stroke='%233d8fd6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --gut: 24px; } }
@media (min-width: 900px) { :root { --gut: 40px; --hd: 78px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 8px); color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--fb); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
@media (min-width: 900px) { body { font-size: 18px; } }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--fd); font-weight: 700; color: var(--ink); line-height: .98; letter-spacing: .015em; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gut); }
@media (min-width: 1600px) { .wrap { max-width: 1320px; } }
.center { text-align: center; }

/* settings from config.js: hide whatever isn't filled in or switched on */
html:not(.has-phone) [data-need~="phone"],
html:not(.has-email) [data-need~="email"],
html:not(.has-contact) [data-need~="contact"],
html:not(.has-greviews) [data-need~="greviews"],
html:not(.has-wa) [data-need~="wa"],
html.has-phone [data-need-not="phone"],
html:not(.f-showReviews) [data-flag="showReviews"],
html:not(.f-showInsurance) [data-flag="showInsurance"],
html:not(.f-showAboutPhoto) [data-flag="showAboutPhoto"],
html.f-showAboutPhoto [data-flag-not="showAboutPhoto"],
html:not(.f-showSocials) [data-flag="showSocials"] { display: none !important; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-family: var(--fh); font-size: 20px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- hand drawn bits ---------- */
.hl { position: relative; z-index: 0; white-space: nowrap; background: var(--marker) no-repeat 0 88% / 0% 52%; transition: background-size 1.1s var(--ease) .3s; padding-inline: .06em; }
.in .hl, .hl.in, .ready .hero .hl { background-size: 100% 52%; }
.sec-navy .hl { background-image: var(--marker-dark); }
.ul { background: var(--pen) no-repeat 0 100% / 0% .22em; padding-bottom: .08em; transition: background-size 1.2s var(--ease) .5s; }
.ready .ul { background-size: 100% .22em; }

/* sketch card: ink outline, uneven corners, offset shadow */
.card { position: relative; background: #fff; border: 2px solid var(--ink); border-radius: var(--sk); box-shadow: 6px 7px 0 var(--sky-2); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) { .card:hover { transform: translate(-3px, -4px); box-shadow: 10px 12px 0 var(--blue-2); } }

/* clean glass glint: a light sweep across photos */
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; inset: -10% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .42) 48%, rgba(255, 255, 255, .1) 52%, transparent 60%); transform: translateX(-75%); pointer-events: none; }
.card:hover .shine::after, .in .shine::after { animation: glint 1.25s var(--ease) both; }
.card:hover .shine::after { animation-name: glint2; }
@keyframes glint { from { transform: translateX(-75%); } to { transform: translateX(75%); } }
@keyframes glint2 { from { transform: translateX(-75%); } to { transform: translateX(75%); } }

/* the cat: every pose shares one scale (--h is its height on the sheet), each spot sets its own size with --k */
.cat-spot { --k: .16; position: absolute; z-index: 5; display: block; height: calc(var(--h) * var(--k) * 1px); aspect-ratio: var(--ar); background: no-repeat 50% 100% / contain; pointer-events: none; }
.cat-walk { --h: 419; --ar: 1.05; background-image: url(img/cat-walk.webp); }
.cat-sit { --h: 399; --ar: .68; background-image: url(img/cat-sit.webp); }
.cat-back { --h: 375; --ar: .56; background-image: url(img/cat-back.webp); }
.cat-loaf { --h: 223; --ar: 1.31; background-image: url(img/cat-loaf.webp); }
.js .cat-spot { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease) .4s, transform .7s var(--ease) .4s; }
.js .in .cat-spot, .js .cat-spot.in { opacity: 1; transform: none; }

/* a cartoon window with a sill, beside the services heading; the cat sits inside it, like the logo */
#services > .wrap { position: relative; }
.toon { display: none; }
@media (min-width: 900px) {
  .toon { display: block; position: absolute; right: var(--gut); top: -6px; width: 250px; height: 250px; }
  .toon-win { position: absolute; left: 32px; top: 0; width: 186px; height: 200px; border: 20px solid transparent; border-image: url(img/window-frame.webp) 46 45 46 46 round; background: var(--glint), linear-gradient(180deg, #eef7fe, #c9e4f7); background-size: 230% 100%, auto; background-position: 100% 0, 0 0; transition: background-position 1.4s var(--ease); }
  .toon:hover .toon-win, .toon.in .toon-win { background-position: 0 0, 0 0; }
  .toon-bars::before, .toon-bars::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
  .toon-bars::before { left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; }
  .toon-bars::after { left: 0; right: 0; top: 42%; height: 6px; }
  .toon-spk { position: absolute; right: 18px; top: 16px; width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); animation: twinkle 3s ease-in-out infinite; }
  .toon-sill { position: absolute; left: 10px; top: 186px; width: 230px; height: 34px; background: url(img/sill.svg) no-repeat 0 0 / 100% 100%; }
  /* sat on the bottom of the frame, in the lower right pane */
  .toon-cat { --k: .175; left: 136px; bottom: 70px; }
  #services .sec-head { padding-right: 280px; max-width: 1060px; }
}

/* the before and after window: the cat sits up on top of the drawn frame */
.ba-win .cat-back { --k: .13; right: 9%; bottom: calc(100% + var(--bw) - 3px); }
@media (min-width: 960px) { .ba-win .cat-back { --k: .17; } }

/* a balcony rail along the bottom of the before and after section */
#results { padding-bottom: calc(76px + 64px); }
.balcony { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: url(img/balcony.svg) repeat-x 0 0 / 132px 60px; pointer-events: none; }
.balcony .cat-walk { --k: .15; left: 64%; bottom: calc(100% - 6px); }
@media (min-width: 900px) { #results { padding-bottom: calc(116px + 64px); } .balcony .cat-walk { --k: .2; left: 70%; } }

/* the cat sits on the quote form, as cats do with paperwork */
.qform .cat-sit { --k: .16; right: 26px; bottom: calc(100% - 3px); }
@media (min-width: 960px) { .qform .cat-sit { --k: .21; right: 40px; } }

/* WhatsApp, bottom right, with the cat curled up on top */
.wa-fab { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 45; display: inline-flex; align-items: center; gap: 9px; height: 54px; padding: 0 15px; border: 2px solid var(--ink); border-radius: 18px 22px 16px 23px / 22px 16px 23px 18px; background: #25d366; color: #fff; box-shadow: 3px 4px 0 var(--ink); transform: translateY(140%); opacity: 0; transition: transform .5s var(--ease), opacity .4s, box-shadow .3s var(--ease); }
.wa-fab.on { transform: none; opacity: 1; }
.wa-fab:hover { transform: translate(-2px, -3px); box-shadow: 5px 7px 0 var(--ink); }
.wa-ico { width: 28px; height: 28px; fill: #fff; flex: none; }
.wa-txt { display: none; font-family: var(--fh); font-size: 21px; line-height: 1; color: #fff; }
.wa-cat { --k: .16; left: 50%; bottom: calc(100% - 4px); margin-left: calc(var(--h) * var(--k) * var(--ar) * -.5px); }
.js .wa-fab .wa-cat { opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease) .45s, transform .6s var(--ease) .45s; }
.js .wa-fab.on .wa-cat { opacity: 1; transform: none; }
@media (max-width: 759px) { .wa-fab.away { transform: translateY(140%); opacity: 0; pointer-events: none; } }
@media (min-width: 760px) { .wa-fab { right: 22px; bottom: 22px; padding: 0 20px 0 16px; } .wa-txt { display: inline; } .wa-cat { --k: .19; } }

/* ---------- buttons ---------- */
.btn { --h: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--h); padding: 0 24px; border: 2px solid var(--ink); border-radius: var(--sk-sm); font-family: var(--fh); font-size: 21px; font-weight: 400; line-height: 1; letter-spacing: .01em; white-space: nowrap; cursor: pointer; box-shadow: 3px 4px 0 var(--ink); -webkit-tap-highlight-color: transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s, color .25s; }
.btn .ico { width: 19px; height: 19px; stroke-width: 2.1; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 3px 4px 0 var(--blue-2); }
.btn-ink:hover { background: var(--navy-2); box-shadow: 5px 6px 0 var(--blue-2); }
.btn-ink:active { box-shadow: 1px 1px 0 var(--blue-2); }
.btn-sky { background: var(--sky); color: var(--ink); }
.btn-sky:hover { background: #e9f4fc; }
.btn-line { background: #fff; color: var(--ink); }
.btn-line:hover { background: var(--sky); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; box-shadow: 3px 4px 0 rgba(180, 216, 243, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); box-shadow: 5px 6px 0 rgba(180, 216, 243, .85); }
.btn-sm { --h: 44px; padding: 0 18px; font-size: 19px; }

/* ---------- header ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4C30 2 50 6 80 4s50-3 80 0 50 2 80-1' fill='none' stroke='%2315171a' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 7px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.hd.scrolled::after, .hd.open::after { opacity: .9; }
.hd-in { height: var(--hd); display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; flex: none; border-radius: 8px; transition: transform .4s var(--ease); }
.brand:hover { transform: rotate(-2deg); }
.brand-mark { width: 38px; height: auto; }
.brand-word { width: auto; height: 17px; }
@media (min-width: 900px) { .brand { gap: 12px; } .brand-mark { width: 46px; } .brand-word { height: 21px; } }
.nav { display: none; }
@media (min-width: 1040px) {
  .nav { display: flex; gap: 4px; }
  .nav a { position: relative; padding: 8px 12px 10px; font-family: var(--fh); font-size: 21px; line-height: 1; color: var(--ink-2); transition: color .2s, transform .3s var(--ease); }
  .nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 7px; background: var(--pen-ink) no-repeat 0 0 / 0% 100%; transition: background-size .45s var(--ease); }
  .nav a:hover { color: var(--ink); transform: translateY(-1px); }
  .nav a:hover::after, .nav a.on::after { background-size: 100% 100%; }
  .nav a.on { color: var(--ink); }
}
.hd-cta { display: flex; align-items: center; gap: 12px; }
.hd-cta .btn { display: none; }
@media (min-width: 640px) { .hd-cta .btn { display: inline-flex; } }
.hd-tel { display: none; }
@media (min-width: 1180px) { .hd-tel { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; font-family: var(--fh); font-size: 21px; color: var(--ink); } .hd-tel .ico { width: 19px; height: 19px; color: var(--blue); } .hd-tel:hover { color: var(--sky-ink); } }
.menu-btn { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: var(--sk-sm); background: var(--sky); cursor: pointer; box-shadow: 2px 3px 0 var(--ink); }
.menu-btn .i-shut, .menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-shut { display: block; }
@media (min-width: 1040px) { .menu-btn { display: none; } }
.menu { position: absolute; left: 0; right: 0; top: calc(100% + 3px); background: #fff; border-bottom: 2px solid var(--ink); box-shadow: 0 30px 40px -30px rgba(15, 34, 54, .4); max-height: calc(100vh - var(--hd)); overflow-y: auto; }
.menu nav { padding-block: 4px 22px; }
.m-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 1.5px dashed #c5d4e0; font-family: var(--fd); font-size: 38px; color: var(--ink); line-height: 1.05; }
.m-link .ico { color: var(--blue); }
.m-btns { display: grid; gap: 12px; margin-top: 18px; }

/* ---------- hero: soft sky fading into freshly cleaned windows ---------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #f5faff 0%, #e4f1fb 50%, #c4e1f6 100%); }
.hero-art { position: relative; order: -1; width: 100%; aspect-ratio: 1000 / 800; }
.hero-img { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%); }
.hero-img picture, .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img img { object-fit: cover; }
/* the clean photo is wiped across a dull copy of itself, like a squeegee pass */
.hero-dull img { filter: saturate(.25) brightness(1.08) contrast(.8) blur(.7px); }
.js .hero-clean { animation: wipe 1.9s cubic-bezier(.65, 0, .35, 1) .5s both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.squeegee { position: absolute; top: 8%; bottom: 8%; left: 0; width: 12px; margin-left: -6px; border-radius: 7px; background: linear-gradient(90deg, #17222c, #46576a 50%, #17222c); box-shadow: 6px 0 22px rgba(255, 255, 255, .9), 16px 0 40px rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; }
.js .squeegee { animation: squeegee 1.9s cubic-bezier(.65, 0, .35, 1) .5s both; }
@keyframes squeegee { 0% { left: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* sparkles twinkle on the glass once it's clean */
.hero-spk { position: absolute; left: var(--mx, var(--x)); top: var(--my, var(--y)); width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; }
.hero-spk svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)); opacity: 0; animation: glimmer 3.2s ease-in-out infinite; animation-delay: calc(2.5s + var(--d)); }
.sm-hide { display: none; }
@keyframes glimmer { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(40deg); } 70% { opacity: 0; transform: scale(.5) rotate(70deg); } }
.hero-in { position: relative; z-index: 2; padding-top: 4px; padding-bottom: 82px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; font-family: var(--fh); font-size: 23px; line-height: 1; color: var(--sky-ink); }
/* a little sitting cat in front of the kicker line */
.kick-cat { display: inline-block; flex: none; height: 28px; aspect-ratio: .68; margin-bottom: -2px; background: url(img/cat-sit.webp) no-repeat 50% 100% / contain; }
.hero-kicker { align-items: flex-end; }
@media (min-width: 1100px) { .kick-cat { height: 32px; } }
@keyframes twinkle { 0%, 100% { transform: scale(.85) rotate(0deg); opacity: .8; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
.hero h1 { font-size: clamp(52px, 13.6vw, 100px); line-height: .94; }
.hero .hl { transition-delay: .9s; }
.hero-sub { margin-top: 14px; max-width: 32em; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-btns .btn { flex: 1 1 auto; }
.g-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 9px 15px 9px 11px; border: 2px solid var(--ink); border-radius: var(--sk-sm); background: #fff; color: var(--ink); box-shadow: 3px 4px 0 var(--sky-2); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
a.g-badge[href]:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 5px 6px 0 var(--blue-2); }
.g-logo { width: 22px; height: 22px; flex: none; }
.g-score { font-family: var(--fd); font-size: 32px; line-height: .8; }
.stars { display: inline-flex; gap: 1px; color: var(--star); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.g-txt { font-family: var(--fh); font-size: 19px; color: var(--muted); }
@media (min-width: 420px) { .hero-btns .btn { flex: 0 0 auto; } }
@media (min-width: 640px) and (max-width: 1099px) { .hero-art { width: min(100%, 760px); margin-inline: auto; } }
@media (min-width: 1100px) {
  .hero { display: block; }
  /* the photo sits bottom right and melts into the sky at its top, left and bottom edges */
  .hero-art { position: absolute; right: 0; bottom: 0; order: 0; width: min(52vw, 900px); aspect-ratio: 1500 / 1100; transform: translateY(var(--py, 0px)); }
  .hero-img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 4%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 4%); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero-spk { left: var(--x); top: var(--y); }
  .sm-hide { display: block; }
  .hero-in { padding-top: 72px; padding-bottom: 128px; }
  .hero-txt { width: min(540px, 38vw); }
  .hero-kicker { font-size: 27px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(58px, 4.6vw, 80px); }
  .hero-sub { font-size: 19.5px; margin-top: 20px; }
  .hero-btns { margin-top: 30px; gap: 16px; }
  .hero-btns .btn { --h: 58px; padding: 0 28px; font-size: 23px; }
  .g-badge { margin-top: 26px; }
}

/* ---------- trust: a four pane window ---------- */
.trust { position: relative; z-index: 3; margin-top: -44px; }
.trust-frame { position: relative; padding: 7px; background: #fff; border: 2px solid var(--ink); border-radius: 5px; box-shadow: 6px 8px 0 var(--sky-2), 0 34px 60px -34px rgba(15, 34, 54, .55); }
.trust-panes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.pane { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 132px; padding: 15px 13px 15px; background: var(--glint), var(--sky); background-size: 220% 100%, auto; background-position: 100% 0, 0 0; transition: background-color .35s, background-position 1s var(--ease); }
.pane:hover { background-color: #c8e3f7; background-position: 0 0, 0 0; }
.pane .ico { width: 26px; height: 26px; margin-bottom: 8px; color: var(--ink); transition: transform .4s var(--ease); }
.pane:hover .ico { transform: rotate(-8deg) scale(1.1); }
.pane strong { font-family: var(--fd); font-size: 31px; font-weight: 700; line-height: .95; color: var(--ink); }
.pane > span { font-size: 14px; line-height: 1.3; color: #2d3b48; }
@media (min-width: 760px) {
  .trust { margin-top: -66px; }
  .trust-frame { padding: 9px; }
  .trust-panes { grid-template-columns: repeat(4, 1fr); }
  .pane { min-height: 0; padding: 22px 22px 22px; }
  .pane strong { font-size: 36px; }
  .pane > span { font-size: 15px; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding-block: 76px; }
@media (min-width: 900px) { .sec { padding-block: 116px; } }
.sec-paper { background-color: #fff; background-image: radial-gradient(#e2ebf3 1.1px, transparent 1.4px); background-size: 24px 24px; }
.sec-mist { background: linear-gradient(180deg, #f4f9fd 0%, #e5f1fa 100%); }
.sec-sky { background: linear-gradient(165deg, #eaf5fd 0%, #d7eaf8 55%, #c6e1f5 100%); overflow: hidden; }
.sec-navy { background: radial-gradient(120% 90% at 85% 0%, #22598a 0%, transparent 55%), linear-gradient(155deg, #0e2134 0%, #143654 55%, #1b4c78 100%); color: #c9d6e2; }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; font-family: var(--fh); font-size: 22px; line-height: 1; color: var(--sky-ink); }
.eyebrow svg { width: 18px; height: 18px; fill: var(--blue); transition: transform .6s var(--ease); }
.rv.in .eyebrow svg, .in > .eyebrow svg { animation: pop .8s var(--ease) .2s both; }
@keyframes pop { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
.sec-navy .eyebrow { color: var(--sky); }
.sec-navy .eyebrow svg { fill: var(--sky); }
h2 { font-size: clamp(50px, 12vw, 84px); line-height: .96; }
.lead { margin-top: 16px; max-width: 36em; font-size: 18px; line-height: 1.55; color: var(--muted); }
.sec-navy .lead { color: #b8c8d8; }
.sec-head { max-width: 780px; margin-bottom: 38px; }
.sec-head.center { margin-inline: auto; }
@media (min-width: 900px) { .sec-head { margin-bottom: 60px; } .lead { font-size: 19.5px; } }

/* ---------- services ---------- */
.svc-feature { display: grid; }
.svc-feature-ph { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px 22px 0 0 / 22px 14px 0 0; border-bottom: 2px solid var(--ink); }
.svc-feature-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc-feature:hover .svc-feature-ph img { transform: scale(1.04); }
.svc-feature-bd { padding: 22px 20px 26px; }
.tag { display: inline-block; margin-bottom: 12px; padding: 5px 12px 6px; border: 1.5px solid var(--ink); border-radius: var(--sk-sm); background: var(--sky); color: var(--ink); font-family: var(--fh); font-size: 18px; line-height: 1.1; transform: rotate(-2deg); }
.svc-feature h3 { font-size: clamp(50px, 12vw, 68px); }
.svc-feature p { margin-top: 10px; color: var(--muted); }
.ticks { list-style: none; display: grid; gap: 10px; margin: 18px 0 26px; }
.ticks li { display: flex; align-items: center; gap: 11px; font-weight: 500; color: var(--ink-2); }
.tk { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50% 45% 52% 48%; background: var(--sky); color: var(--ink); }
.tk .ico { width: 15px; height: 15px; stroke-width: 2.6; }
@media (min-width: 640px) and (max-width: 899px) { .svc-feature-ph { aspect-ratio: 16 / 9; } .svc-feature-bd { padding: 30px 32px 34px; } }
@media (min-width: 900px) {
  .svc-feature { grid-template-columns: 1.2fr 1fr; }
  .svc-feature-ph { aspect-ratio: auto; min-height: 440px; border-bottom: 0; border-right: 2px solid var(--ink); border-radius: 16px 0 0 24px / 22px 0 0 16px; }
  .svc-feature-bd { align-self: center; padding: 44px 46px 48px; }
}

.svc-grid { list-style: none; display: grid; gap: 18px; margin-top: 26px; }
.svc { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 10px; }
.svc-img { position: relative; aspect-ratio: 1; overflow: hidden; border: 1.5px solid var(--ink); border-radius: var(--sk-sm); background: var(--mist); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc:hover .svc-img img { transform: scale(1.05); }
.svc-img.split::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.mini { display: none; position: absolute; bottom: 10px; z-index: 2; padding: 3px 9px 4px; border-radius: 7px 9px 6px 10px; font-family: var(--fh); font-size: 17px; line-height: 1.1; }
.mini-b { left: 10px; background: rgba(21, 23, 26, .85); color: #fff; }
.mini-a { right: 10px; background: var(--sky); color: var(--ink); border: 1.5px solid var(--ink); }
/* stacked version: before on top, after below */
.svc-img.split-h::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
.split-h .mini-b { top: 10px; bottom: auto; }
.split-h .mini-a { top: calc(50% + 10px); bottom: auto; left: 10px; right: auto; }
.svc h3 { font-size: 32px; line-height: .95; }
.svc p { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.svc-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 0; border: 0; background: none; font-family: var(--fh); font-size: 19px; line-height: 1; color: var(--ink); cursor: pointer; }
.svc-add .pl { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px 10px 7px 11px; background: var(--ink); color: #fff; transition: transform .4s var(--ease), background-color .2s; }
.svc-add .pl .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.svc-add:hover .pl { transform: rotate(90deg); background: var(--blue); }
@media (min-width: 640px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 30px; }
  .svc { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 0; padding: 0; }
  .svc-img { aspect-ratio: 4 / 3; border: 0; border-bottom: 2px solid var(--ink); border-radius: 16px 22px 0 0 / 22px 14px 0 0; }
  .mini { display: block; }
  .svc-b { display: flex; flex-direction: column; padding: 20px 22px 18px; }
  .svc h3 { font-size: 38px; }
  .svc p { font-size: 15.5px; margin-top: 8px; }
  .svc-add { margin-top: auto; padding-top: 16px; }
}
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; } }
.also { display: flex; align-items: flex-start; gap: 12px; margin-top: 30px; padding: 16px 18px; border: 2px dashed #9fbfd8; border-radius: var(--sk); background: rgba(216, 234, 246, .45); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.also > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: var(--blue); }
.also-btn { padding: 0 0 2px; border: 0; background: var(--pen-ink) no-repeat 0 100% / 100% 6px; font-family: var(--fh); font-size: 19px; line-height: 1.2; color: var(--sky-ink); cursor: pointer; }
.also-btn:hover { color: var(--ink); }
@media (min-width: 900px) { .also { justify-content: center; margin-top: 40px; font-size: 17px; } }

/* ---------- before and after ---------- */
.res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.res > *, .com > *, .areas > *, .about > *, .quote > * { min-width: 0; }
.jobs { display: flex; gap: 10px; margin: 22px calc(var(--gut) * -1) 0; padding: 4px var(--gut) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.jobs::-webkit-scrollbar { display: none; }
.job { flex: none; width: 118px; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 9px; border: 2px solid var(--ink); border-radius: var(--sk-sm); background: #fff; text-align: left; cursor: pointer; scroll-snap-align: start; box-shadow: 3px 4px 0 var(--sky-2); -webkit-tap-highlight-color: transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s; }
.job img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px 9px 6px 10px; }
.job > span { padding-inline: 2px; font-family: var(--fd); font-size: 24px; font-weight: 700; line-height: .95; color: var(--ink); }
.job small { display: block; margin-top: 3px; font-family: var(--fb); font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--muted); }
.job:hover { transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--blue-2); }
.job[aria-selected="true"] { background: var(--sky); box-shadow: 3px 4px 0 var(--ink); }
.job:focus-visible { outline-offset: 3px; }
@media (min-width: 960px) {
  .res { grid-template-columns: minmax(320px, 4fr) 7fr; gap: 60px; align-items: start; }
  .res-side { position: sticky; top: calc(var(--hd) + 32px); }
  .jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0 0; padding: 0 6px 6px 0; overflow: visible; }
  .job { width: auto; }
}

.res-main { --bw: 16px; --maxh: 62vh; display: flex; flex-direction: column; align-items: center; }
/* the before and after sits inside the logo's window frame */
.ba-win { position: relative; width: min(100%, calc(var(--maxh) * var(--ar) + var(--bw) * 2)); border: var(--bw) solid transparent; border-image: url(img/window-frame.webp) 46 45 46 46 round; filter: drop-shadow(6px 8px 0 rgba(180, 216, 243, .95)); }
.ba { --pos: 50%; position: relative; width: 100%; aspect-ratio: var(--ar); overflow: hidden; background: #dfe7ee; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity .3s; }
.ba.loading { opacity: .55; }
.ba picture, .ba img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba img { object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .35); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50% 46% 52% 48%; background: #fff; color: var(--ink); box-shadow: 3px 4px 0 var(--ink); cursor: ew-resize; touch-action: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ba-handle .ico { width: 24px; height: 24px; stroke-width: 2.4; }
.ba.dragging .ba-handle, .ba-handle:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 4px 6px 0 var(--blue); }
.ba-handle:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 50%; }
.ba-lab { position: absolute; top: 12px; padding: 4px 11px 5px; border-radius: 8px 10px 7px 11px; font-family: var(--fh); font-size: 19px; line-height: 1.1; pointer-events: none; transition: opacity .25s; }
.ba-lab-b { left: 12px; background: rgba(21, 23, 26, .85); color: #fff; }
.ba-lab-a { right: 12px; background: var(--sky); color: var(--ink); border: 1.5px solid var(--ink); }
.ba.lb-off .ba-lab-b, .ba.la-off .ba-lab-a { opacity: 0; }
.ba-cap { margin-top: 18px; max-width: 34em; text-align: center; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.ba-cap strong { font-family: var(--fd); font-size: 26px; font-weight: 700; color: var(--ink); margin-right: 4px; }
@media (min-width: 960px) { .res-main { --bw: 24px; --maxh: min(70vh, 640px); } .ba-cap { font-size: 16.5px; }  }

/* ---------- commercial ---------- */
.sec-navy { overflow: visible; }
.sec-navy::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(118deg, transparent 0 140px, rgba(255, 255, 255, .03) 140px 146px, transparent 146px 170px, rgba(255, 255, 255, .02) 170px 172px); pointer-events: none; }
.com { position: relative; display: grid; gap: 30px; }
.com-photo { position: relative; margin: 0; }
.com-photo picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 2px solid #fff; border-radius: var(--sk); box-shadow: 7px 8px 0 var(--blue); }
.com-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.2s var(--ease); }
.com-photo:hover img { transform: scale(1.04); }
.com-photo figcaption { margin-top: 14px; font-family: var(--fh); font-size: 19px; line-height: 1.3; color: var(--sky); }
.com-list { list-style: none; display: grid; gap: 20px; margin-bottom: 32px; }
.com-list li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 4px; border-radius: 14px; transition: background-color .3s; }
.com-list li:hover { background: rgba(255, 255, 255, .05); }
.com-list .ci { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid rgba(216, 234, 246, .55); border-radius: var(--sk-sm); background: rgba(216, 234, 246, .1); color: var(--sky); transition: transform .4s var(--ease), background-color .3s; }
.com-list li:hover .ci { transform: rotate(-6deg); background: rgba(111, 179, 234, .25); }
.com-list strong { display: block; font-family: var(--fd); font-size: 30px; font-weight: 700; color: #fff; line-height: 1; }
.com-list li span:not(.ci) { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: #b0c2d3; }
.sec-navy .btn-sky { box-shadow: 3px 4px 0 var(--blue); }
.sec-navy .btn-sky:hover { box-shadow: 5px 6px 0 var(--blue-2); }
@media (min-width: 900px) {
  .com { grid-template-columns: 6fr 5fr; grid-template-areas: "head photo" "rest photo"; gap: 0 72px; align-items: start; }
  .com-head { grid-area: head; }
  .com-rest { grid-area: rest; padding-top: 34px; }
  .com-photo { grid-area: photo; align-self: center; }
  .com-photo picture { aspect-ratio: 4 / 5; max-width: 460px; }
  .com-photo img { object-position: 50% 30%; }
}

/* ---------- reviews ---------- */
.rev-sum { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 8px 16px 8px 12px; border: 2px solid var(--ink); border-radius: var(--sk-sm); background: #fff; font-family: var(--fh); font-size: 19px; color: var(--muted); box-shadow: 3px 4px 0 var(--sky-2); }
.rev-sum b { font-family: var(--fd); font-size: 32px; line-height: .8; color: var(--ink); }
.rev-grid { list-style: none; display: grid; gap: 22px; }
.rev { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; }
.rev blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.rev .who { margin-top: auto; font-size: 14.5px; color: var(--muted); }
.rev .who b { display: block; font-family: var(--fd); font-size: 26px; color: var(--ink); }
.rev-more { margin-top: 38px; }
@media (min-width: 760px) { .rev-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (min-width: 1040px) { .rev-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- areas and the drawn map ---------- */
.areas { display: grid; gap: 50px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.chips li { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px 0 15px; border: 2px solid var(--ink); border-radius: 22px 26px 21px 27px / 27px 21px 26px 22px; background: #fff; font-family: var(--fd); font-size: 27px; font-weight: 700; line-height: 1; color: var(--ink); box-shadow: 3px 4px 0 var(--sky-2); cursor: default; transition: transform .3s var(--ease), background-color .25s, box-shadow .3s var(--ease); }
.chips .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 0 2px var(--ink); }
.chips li[data-town]:hover, .chips li.hot { transform: translate(-2px, -3px) rotate(-1.5deg); background: var(--sky-2); box-shadow: 5px 6px 0 var(--ink); }
.chips li.more { border-style: dashed; border-color: var(--sky-ink); background: rgba(255, 255, 255, .55); color: var(--sky-ink); box-shadow: none; }
.map { margin: 0; padding: 10px; background: #fbfdff; }
.map-svg { width: 100%; height: auto; max-width: 440px; margin-inline: auto; overflow: visible; }
.m-paper { fill: url(#mapdots); }
#mapdots circle { fill: #d3e3ef; }
.m-zone { fill: var(--sky); }
.m-edge { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.m-edge.e2 { stroke-width: 1.2; opacity: .55; }
.m-far { fill: none; stroke: #6f9bbf; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 9; }
.m-route { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 8; }
.tree path:first-child { fill: #d4ecdc; stroke: #3f7a57; stroke-width: 1.5; }
.tree path:last-child { fill: none; stroke: #3f7a57; stroke-width: 1.6; stroke-linecap: round; }
.spk { fill: var(--blue-2); }
.h-fill { fill: #fff; transition: fill .3s; }
.h-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.h-line.h2 { stroke-width: 1; opacity: .5; }
.h-win { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.town-l { font-family: var(--fd); font-size: 32px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fbfdff; stroke-width: 5px; stroke-linejoin: round; transition: fill .3s; }
.town-mark { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .4s var(--ease); }
.town.hot .h-fill { fill: var(--sky-2); }
.town.hot .town-l { fill: var(--sky-ink); }
.town.hot .town-mark { transform: translateY(-3px) scale(1.25); }
.m-n-a { fill: var(--ink); }
.m-n text, .m-scale text { font-family: var(--fh); font-size: 17px; fill: var(--ink); }
.m-scale path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.m-far-note text { font-family: var(--fh); font-size: 18px; fill: var(--sky-ink); }
.m-arrow { fill: none; stroke: var(--sky-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the map draws itself in */
.js .map .m-edge { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 2s var(--ease) .2s; }
.js .map .m-zone, .js .map .m-far, .js .map .m-route, .js .map .tree, .js .map .spk, .js .map .m-far-note { opacity: 0; transition: opacity 1s ease .9s; }
.js .map .town { opacity: 0; transform: translateY(-14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(1s + var(--i) * .16s); }
.js .map.in .m-edge { stroke-dashoffset: 0; }
.js .map.in .m-zone, .js .map.in .m-far, .js .map.in .m-route, .js .map.in .tree, .js .map.in .spk, .js .map.in .m-far-note { opacity: 1; }
.js .map.in .town { opacity: 1; transform: none; }
@media (min-width: 900px) { .areas { grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .map { padding: 18px 18px 14px; } }

/* ---------- about ---------- */
.about { display: grid; gap: 52px; align-items: center; }
.about-media figure { margin: 0; }
.about-logo { display: grid; place-items: center; padding: 30px 24px; transform: rotate(-1.5deg); }
.about-logo:hover { transform: rotate(0deg) translate(-3px, -4px); }
.about-logo img { width: min(100%, 210px); }
.about-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-body .lead { color: var(--ink-2); }
.about-body .lead + p { margin-top: 14px; max-width: 36em; color: var(--muted); }
.facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 2px; margin: 30px 0 32px; padding: 2px; background: var(--ink); border: 2px solid var(--ink); border-radius: 5px; box-shadow: 5px 6px 0 var(--sky-2); }
.facts li { padding: 14px 12px 13px; background: var(--glint), #fff; background-size: 220% 100%, auto; background-position: 100% 0, 0 0; font-size: 13.5px; line-height: 1.3; color: var(--muted); transition: background-color .3s, background-position 1s var(--ease); }
.facts li:hover { background-color: var(--sky); background-position: 0 0, 0 0; }
.facts strong { display: block; margin-bottom: 4px; font-family: var(--fd); font-size: 40px; font-weight: 700; line-height: .9; color: var(--ink); }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 7fr; gap: 84px; } .about-logo { padding: 52px 40px; } .about-logo img { width: min(100%, 300px); } .facts li { padding: 16px 16px 15px; font-size: 14.5px; } }

/* ---------- quote ---------- */
.quote { display: grid; gap: 34px; }
.contact { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.contact a { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border: 2px solid var(--ink); border-radius: var(--sk-sm); background: #fff; box-shadow: 3px 4px 0 var(--sky-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.contact a:hover { transform: translate(-2px, -3px); box-shadow: 5px 7px 0 var(--blue-2); }
.contact .ci { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px 15px 11px 16px; background: var(--ink); color: #fff; }
.contact small { display: block; font-family: var(--fh); font-size: 17px; line-height: 1.2; color: var(--muted); }
.contact b { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.qform { margin-top: 46px; padding: 26px 18px 22px; }
.qform:hover { transform: none; box-shadow: 6px 7px 0 var(--sky-2); }
.qform h3 { font-size: 44px; margin-bottom: 18px; }
.fld { display: grid; gap: 7px; min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.fld label, .fld legend { padding: 0; font-family: var(--fh); font-size: 19px; line-height: 1.2; color: var(--ink); }
.fld legend { margin-bottom: 9px; }
.opt-l { color: var(--muted); }
.fld input[type="text"], .fld input[type="tel"], .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #b9c9d7; border-radius: 10px 13px 9px 14px; background: #fbfdfe; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.fld textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: #8b96a1; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 3px 4px 0 var(--sky-2); }
.fld [aria-invalid="true"] { border-color: #b42318; box-shadow: 3px 4px 0 rgba(180, 35, 24, .2); }
.row2 { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } .fld-pc { max-width: calc(50% - 7px); } }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px 0 12px; border: 1.5px solid #b9c9d7; border-radius: 10px 13px 9px 14px; background: #fff; font-family: var(--fh); font-size: 19px; line-height: 1.1; color: var(--ink-2); transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease); }
.opt span::before { content: ""; width: 16px; height: 16px; flex: none; border: 1.8px solid #8a99a6; border-radius: 50%; background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.opt-c span::before { border-radius: 4px; }
.opt input:checked + span { background: var(--sky); border-color: var(--ink); color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.opt input:checked + span::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.opt-c input:checked + span::before { box-shadow: none; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.3 4.3L19 7.2'/%3E%3C/svg%3E") center / 12px no-repeat; }
.opt input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.opt:hover span { border-color: var(--ink); transform: translateY(-1px); }
.qerr { margin: -2px 0 14px; padding: 11px 14px; border-radius: 10px; background: #fdecea; font-size: 15px; font-weight: 600; color: #8f1c13; }
.q-send { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 4px; }
.qnote { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.qok { margin-top: 12px; padding: 11px 14px; border-radius: 10px; background: var(--sky); font-size: 15px; font-weight: 600; color: var(--ink); }
@media (min-width: 960px) {
  .quote { grid-template-columns: 5fr 6fr; gap: 76px; align-items: start; }
  .quote-info { position: sticky; top: calc(var(--hd) + 40px); }
  .qform { margin-top: 40px; padding: 34px 32px 28px; }
}

/* ---------- footer ---------- */
.ft { position: relative; padding: 66px 0 calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #0c1c2c 0%, #0a1724 100%); color: #a9b8c6; font-size: 15.5px; }
.ft-grid { display: grid; gap: 34px; }
.brand-inv { margin-right: 0; width: max-content; }
.brand-inv .brand-word { filter: invert(1); }
.ft-brand p { margin-top: 16px; max-width: 30em; line-height: 1.55; }
.ft-g { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px 7px 10px; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: var(--sk-sm); font-family: var(--fh); font-size: 18px; color: #d8e3ec; transition: border-color .2s, transform .3s var(--ease); }
.ft-g b { font-family: var(--fd); font-size: 28px; line-height: .8; color: #fff; }
.ft-g .stars svg { width: 14px; height: 14px; }
a.ft-g[href]:hover { border-color: var(--sky); transform: translateY(-2px); }
.ft-soc { display: flex; gap: 10px; margin-top: 18px; }
.ft-soc a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; transition: transform .4s var(--ease); }
.ft-soc a:hover { transform: translateY(-2px); }
.ft-soc svg { width: 21px; height: 21px; }
.ft-soc .fb { background: #1877f2; }
.ft-soc .fb svg { fill: #fff; }
.ft-soc .ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ft-soc .ig svg { fill: none; stroke: #fff; stroke-width: 1.9; }
.ft-h { margin-bottom: 14px; font-family: var(--fd); font-size: 30px; font-weight: 700; line-height: 1; color: #fff; }
.ft ul { list-style: none; display: grid; gap: 9px; }
.ft-col a { transition: color .2s; }
.ft-col a:hover { color: #fff; }
.ft-base { position: relative; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 48px; padding-top: 22px; font-size: 14px; }
.ft-base::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(255, 255, 255, .12); }
.ft-base .by { margin-left: auto; }
.ft-base a { color: #fff; }
.ft-base a:hover { color: var(--sky); }
@media (max-width: 759px) { .ft-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; } .ft-brand, .ft-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 760px) { .ft-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }

/* ---------- phone dock ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 2px solid var(--ink); transform: translateY(115%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
.dock.on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.dock .btn { --h: 50px; }
.dock .btn-line { padding: 0 20px; }
html:not(.has-phone) .dock { grid-template-columns: 1fr; }
@media (min-width: 760px) { .dock { display: none; } }

/* ---------- reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.in.done { transition: opacity .3s, transform .45s var(--ease), box-shadow .45s var(--ease); transition-delay: 0s; }
@media (hover: hover) { .js .card.rv.in.done:hover { transform: translate(-3px, -4px); } .js .qform.rv.in.done:hover { transform: none; } }

/* ---------- inner pages (privacy, 404) ---------- */
.page { padding-block: 56px 90px; }
.page h1 { font-size: clamp(56px, 12vw, 88px); }
.prose { max-width: 720px; }
.prose h2 { margin-top: 40px; font-size: 44px; }
.prose p, .prose ul { margin-top: 14px; color: var(--ink-2); }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a:not(.btn) { color: var(--sky-ink); font-weight: 600; background: var(--pen-ink) no-repeat 0 100% / 100% 5px; padding-bottom: 2px; }
.prose a:not(.btn):hover { color: var(--ink); }
.page-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* 404: the cat sat on a sill, looking away, wondering where the page went */
.lost { position: relative; width: 260px; height: 130px; margin-top: 46px; }
.lost-sill { position: absolute; left: 0; bottom: 0; width: 260px; height: 30px; background: url(img/sill.svg) no-repeat 0 0 / 100% 100%; }
.lost .cat-back { --k: .26; left: 150px; bottom: 27px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero-bg img { animation: none; }
  .js .rv, .js .cat-spot { opacity: 1; transform: none; }
}