/* Daylight: light page, ink navy type, and an iridescent wash lifted from the chrome of the logo mark. */
/* Onest is served from this site (no third-party font request). One file covers weights 400 to 700. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/onest-symbols.woff2") format("woff2"); unicode-range: U+2190, U+2192, U+25A0-27BF; }
:root {
  /* --ink-3 is the lightest text colour: 5.5:1 on white and 5:1 on --mist, so small print passes WCAG AA */
  --paper: #FFFFFF; --mist: #F3F5FB; --ink: #0A1633; --ink-2: #44506B; --ink-3: #5E6984;
  --violet: #5B4BF5; --peach: #FFBE96; --pink: #FF9CC2; --lilac: #BFA4FF; --sky: #96C6FF;
  --line: rgba(10, 22, 51, 0.10); --gutter: clamp(16px, 5vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Onest", system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; } /* height: auto lets the width/height attributes reserve space without fixing the size */
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1; white-space: nowrap; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.btn:hover { background: var(--violet); transform: translateY(-1px); }
.btn-lg { padding: 16px 26px; font-size: 16.5px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--violet); }
.more { font-weight: 600; color: var(--violet); }
.more:hover { color: var(--ink); }

/* hero */
.top { position: relative; isolation: isolate; overflow: hidden; }
.mesh { position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  background:
    radial-gradient(46% 60% at 88% 8%, var(--sky) 0%, transparent 62%),
    radial-gradient(40% 55% at 58% 0%, var(--lilac) 0%, transparent 62%),
    radial-gradient(44% 60% at 100% 62%, var(--pink) 0%, transparent 64%),
    radial-gradient(42% 56% at 64% 92%, var(--peach) 0%, transparent 62%),
    linear-gradient(#F6F7FD, #F6F7FD); }
/* header: fixed to the top of every page; clear over the wash, frosted once the page scrolls */
.skip { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; transition: top 200ms var(--ease); }
.skip:focus { top: 12px; }
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 40; transition: background 250ms var(--ease), box-shadow 250ms var(--ease); }
.site-head.stuck, .site-head.open { background: rgba(255, 255, 255, 0.84); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: 0 1px 0 rgba(10, 22, 51, 0.07), 0 12px 30px -20px rgba(10, 22, 51, 0.3); }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 17px; transition: padding 250ms var(--ease); }
.site-head.stuck .nav { padding-block: 11px; }
.top { padding-top: 78px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: -0.035em; }
.wordmark img { width: 35px; height: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); font-size: 15.5px; font-weight: 500; }
.nav-links a:not(.btn) { transition: color 200ms var(--ease); }
.nav-links a:not(.btn):hover, .nav-links a[aria-current] { color: var(--violet); }
.nav-links a.tel { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
/* between the phone menu and a roomy desktop bar there is no space for the number, so it waits in the footer and closing band */
@media (min-width: 861px) and (max-width: 1000px) { .nav-links a.tel { display: none; } }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.75); color: var(--ink); cursor: pointer; }
  .nav-links { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -24px rgba(10, 22, 51, 0.45), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms; }
  .site-head.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a:not(.btn) { padding: 14px 16px; border-radius: 12px; font-size: 17px; }
  .nav-links a:not(.btn):hover { background: var(--mist); }
  .nav-links .btn { justify-content: center; margin-top: 6px; padding: 17px; font-size: 16.5px; }
}

/* phones: a call and quote bar within thumb reach. site.js adds it and shows it once the first screen has been scrolled past;
   it steps aside near the closing band (which offers the same two actions) and while someone is typing in a form */
.callbar { display: none; }
@media (max-width: 860px) {
  .callbar { position: fixed; inset: auto 0 0 0; z-index: 35; display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 -1px 0 rgba(10, 22, 51, 0.07), 0 -12px 30px -20px rgba(10, 22, 51, 0.3);
    transform: translateY(110%); visibility: hidden; transition: transform 300ms var(--ease), visibility 300ms; }
  .callbar.show { transform: none; visibility: visible; }
  .callbar .btn { flex: 1; justify-content: center; padding: 16px 10px; font-size: 16px; }
  .callbar .call { background: var(--mist); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 22, 51, 0.1); }
  .callbar .call:hover { background: var(--mist); color: var(--violet); }
}

.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(36px, 6vw, 84px) clamp(110px, 15vw, 210px); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; }
.pill b { padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; }
.hero h1 { margin-top: 20px; font-weight: 700; font-size: clamp(40px, 5.8vw, 82px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.hero .lede { margin-top: 22px; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.hero .lede b { color: var(--ink); font-weight: 600; }
.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

/* hero collage: a real client site, plus two illustrations of what the site is for */
.collage { position: relative; min-height: 440px; }
.browser { position: absolute; left: 6%; top: 0; width: 128%; border-radius: 14px; background: #fff; box-shadow: 0 40px 90px -30px rgba(10, 22, 51, 0.45), 0 0 0 1px rgba(10, 22, 51, 0.06); overflow: hidden; }
.bar { display: flex; gap: 6px; padding: 11px 14px; background: #fff; }
.bar i { width: 9px; height: 9px; border-radius: 50%; background: #DADFEA; }
.phone { position: absolute; left: -6%; bottom: -60px; width: 232px; }
.toast { position: absolute; right: -2%; top: 58%; display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 13px; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -18px rgba(10, 22, 51, 0.4); font-size: 14px; }
.toast i { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--peach), var(--pink) 55%, var(--lilac)); }
.toast b { display: block; font-weight: 600; }
.toast span { color: var(--ink-3); font-size: 13px; }
@media (max-width: 900px) { .browser { left: 12%; width: 100%; } .phone { left: 0; width: 200px; } .toast { right: 0; } .collage { min-height: 380px; } }

/* the alert the owner gets, drawn like a phone notification; it sits in front of the phone wherever the two meet */
.notif { top: 88%; right: -4%; z-index: 2; align-items: flex-start; width: min(334px, 80%); padding: 13px 16px 14px 13px; border-radius: 22px; background: rgba(248, 248, 250, 0.88); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 18px 44px -14px rgba(10, 22, 51, 0.5), 0 0 0 0.5px rgba(10, 22, 51, 0.14); color: #111; font: 400 13.5px/1.32 -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em; }
.notif .ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-top: 1px; border-radius: 9px; background: linear-gradient(180deg, #5AB8FF, #1E7BF2); color: #fff; }
.notif p { margin: 0; }
.notif .n-head { display: flex; justify-content: space-between; gap: 14px; }
.notif .n-head b { font-weight: 600; }
.notif time { color: #8A8A8E; font-size: 12.5px; }
.notif .who { font-weight: 500; }
.notif .msg { color: #3C3C43; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* one column: there is no room beside the phone, so the alert lands across its bottom corner instead of behind it */
@media (max-width: 900px) { .notif { top: auto; bottom: -92px; right: -4px; width: min(300px, 84%); } }
/* clients */
.clients { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 34px; padding-block: 8px clamp(56px, 7vw, 96px); font-weight: 600; font-size: clamp(16px, 1.5vw, 19px); letter-spacing: -0.02em; color: var(--ink-3); }
.clients small { flex-basis: 100%; font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-2); }
.clients small b { color: #C2620C; letter-spacing: 2px; }
/* client logos, each redrawn in one ink so four very different brands read as a single row.
   --h (set per logo in the HTML) is its height; the values balance how heavy each one looks, not how tall it is */
.logos { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 22px clamp(30px, 4.6vw, 64px); margin-top: 10px; }
.logos img { height: var(--h, 40px); width: auto; opacity: 0.8; transition: opacity 250ms var(--ease); }
.logos li:hover img { opacity: 1; }
@media (max-width: 560px) { .logos { gap: 20px 32px; } .logos img { height: calc(var(--h, 40px) * 0.84); } }

/* homepage quote questions: the /quote form (js/quote.js) in a card, with what happens next beside it. Styles mirror quote.css */
.qhome { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-bottom: clamp(72px, 9vw, 130px); }
.qhome .h2 { margin-top: 0; }
.qhome .next { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 4px; max-width: 420px; }
.qhome .next li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-block: 14px; border-top: 1px solid var(--line); }
.qhome .next i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-weight: 600; font-size: 14.5px; }
.qhome .next b { display: block; font-weight: 600; }
.qhome .next span { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .qhome { grid-template-columns: 1fr; } .qhome .next { display: none; } }
.qhome + .block { padding-top: 0; }
.qcard { border-radius: 28px; background: var(--paper); padding: clamp(22px, 3.4vw, 44px); box-shadow: 0 40px 90px -40px rgba(10, 22, 51, 0.45), 0 0 0 1px rgba(10, 22, 51, 0.05); }
.qcard fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.qcard .prog { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-3); }
.qcard .prog .bar { flex: 1; height: 6px; padding: 0; gap: 0; border-radius: 6px; background: var(--mist); overflow: hidden; }
.qcard .prog .bar i { display: block; width: auto; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sky), var(--lilac), var(--pink)); transition: width 400ms var(--ease); }
.qcard h2 { margin-top: 26px; font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.qcard h2:focus { outline: none; }
.qcard .hint { margin-top: 8px; color: var(--ink-2); }
.qcard .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.qcard .opts.chips { display: flex; flex-wrap: wrap; }
.qcard .opt { position: relative; display: block; }
.qcard .opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.qcard .opt span { display: block; padding: 16px 18px; border-radius: 16px; background: var(--mist); font-weight: 500; transition: background 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease); }
.qcard .opt small { display: block; margin-top: 2px; font-weight: 400; font-size: 14.5px; color: var(--ink-3); }
.qcard .chips .opt span { padding: 11px 18px; border-radius: 999px; }
.qcard .opt:hover span { box-shadow: inset 0 0 0 1.5px rgba(10, 22, 51, 0.25); }
.qcard .opt input:checked + span { background: var(--ink); color: #fff; }
.qcard .opt input:checked + span small { color: #B9C3DD; }
.qcard .opt input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 3px; }
.qcard .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.qcard .fields label { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.qcard .fields input { display: block; width: 100%; margin-top: 6px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--mist); color: var(--ink); font: inherit; font-size: 17px; }
.qcard .fields input:focus { outline: 2px solid var(--violet); outline-offset: 0; background: #fff; }
@media (max-width: 560px) { .qcard .opts, .qcard .fields { grid-template-columns: 1fr; } }
.qcard .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* until quote.js has drawn the first question, the buttons wait out of sight, so nothing jumps when it appears */
.qcard:not(.ready) .prog, .qcard:not(.ready) .acts, .qcard:not(.ready) .trust { visibility: hidden; }
.qcard .captcha { margin-top: 22px; min-height: 65px; }
.qcard .err { min-height: 24px; margin-top: 14px; color: #B3261E; font-size: 15px; }
.qcard .acts { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.qcard button { border: 0; cursor: pointer; font-family: inherit; }
.qcard .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.qcard .back { background: none; padding: 10px 4px; font-weight: 600; font-size: 16px; color: var(--ink-2); }
.qcard .back:hover { color: var(--ink); } .qcard .back[hidden] { display: block; visibility: hidden; }
.qcard .trust { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-3); }
.qcard .done .tick { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--peach), var(--pink) 55%, var(--lilac)); color: var(--ink); }
.qcard .done p { margin-top: 12px; color: var(--ink-2); max-width: 48ch; }
.qcard .done .btn { margin-top: 26px; }
.qcard .done p a, .qcard .noscript a { font-weight: 600; color: var(--violet); }
.qcard .noscript { margin-top: 26px; color: var(--ink-2); }
.qcard .mock { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }
.qcard .mock a { text-decoration: underline; }
@media (max-width: 380px) { .qcard { padding-inline: 14px; } }

/* section heads */
.h2 { margin-top: 10px; font-weight: 700; font-size: clamp(30px, 4vw, 54px); line-height: 1.06; letter-spacing: -0.04em; max-width: 18ch; text-wrap: balance; }
.sub { margin-top: 16px; max-width: 54ch; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }

/* bento: four panels, four different pictures */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.tile { position: relative; overflow: hidden; border-radius: 24px; background: var(--mist); padding: clamp(22px, 2.6vw, 36px); min-height: 330px; display: flex; flex-direction: column; }
.tile h3 { font-weight: 700; font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.03em; line-height: 1.15; }
.tile p { margin-top: 8px; color: var(--ink-2); max-width: 40ch; }
.tile .art { margin-top: auto; padding-top: 26px; }
.t7 { grid-column: span 7; } .t5 { grid-column: span 5; }
.tile.dark { background: var(--ink); color: #fff; } .tile.dark p { color: #B9C3DD; }
.tile.glow { background: linear-gradient(140deg, #FFE6D6, #FFD9E8 48%, #E6DCFF); }
@media (max-width: 860px) { .t7, .t5 { grid-column: 1 / -1; } .tile { min-height: 0; } }

.map { display: grid; gap: 8px; }
.map li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 15px; }
.map li:first-child { box-shadow: 0 14px 30px -16px rgba(10, 22, 51, 0.4); font-weight: 600; }
.map li:not(:first-child) { opacity: 0.55; }
.map i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-style: normal; font-size: 13px; font-weight: 700; }
.map li:not(:first-child) i { background: #CBD2E2; }
.map span { margin-left: auto; color: #E0862F; font-size: 13px; letter-spacing: 1px; }
.status li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 15.5px; }
.status b { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: #9DF0C4; }
.status b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9DF0C4; }
.own { padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.72); font-size: 15.5px; }
.own div { display: flex; justify-content: space-between; gap: 16px; padding-block: 7px; }
.own div + div { border-top: 1px solid var(--line); }
.own span { color: var(--ink-2); } .own b { font-weight: 600; }
.track { position: relative; height: 8px; border-radius: 8px; background: #DDE2EF; margin-top: 8px; }
.track::before { content: ""; position: absolute; inset: 0 30% 0 0; border-radius: 8px; background: linear-gradient(90deg, var(--sky), var(--lilac), var(--pink)); }
.days { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.days b { display: block; font-size: 17px; color: var(--ink); }

/* work */
.work { padding-block: clamp(72px, 9vw, 130px); }
.stagger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); margin-top: clamp(32px, 4vw, 56px); }
.stagger figure:nth-child(even) { margin-top: clamp(0px, 7vw, 96px); }
.stagger .shot > a > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(10, 22, 51, 0.45); }
.stagger figcaption { margin-top: 30px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.stagger figcaption span { display: block; font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 700px) { .stagger { grid-template-columns: 1fr; } .stagger figure:nth-child(even) { margin-top: 0; } }

.stagger .shot { position: relative; }
.stagger .shot .phone { position: absolute; left: auto; right: -5%; bottom: -6%; width: 23%; }
.stagger .pl .shot .phone { right: auto; left: -5%; }
@media (max-width: 700px) { .stagger .shot .phone { right: -2%; width: 26%; } .stagger .pl .shot .phone { left: -2%; } }
.getprice { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.getprice .h2 { margin-top: 0; }
.peek { display: block; padding: 26px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); transform: rotate(1.5deg); transition: transform 300ms var(--ease); }
.peek:hover { transform: rotate(0deg) translateY(-3px); }
.peek-bar { display: block; height: 6px; border-radius: 6px; background: var(--mist); overflow: hidden; }
.peek-bar i { display: block; width: 14%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sky), var(--lilac), var(--pink)); }
.peek b { display: block; margin: 20px 0 16px; font-weight: 700; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.035em; line-height: 1.1; }
.peek-opt { display: block; margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--mist); font-weight: 500; font-size: 16px; }
.peek-opt.on { background: var(--ink); color: #fff; }
.peek-go { display: inline-block; margin-top: 18px; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15.5px; }
@media (max-width: 800px) { .getprice { grid-template-columns: 1fr; } .peek { transform: none; } }
/* price call on a slanted navy band */
.navy { position: relative; isolation: isolate; color: #fff; padding-block: clamp(110px, 13vw, 190px); }
.navy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%); }
.navy .sub { color: #B9C3DD; }
.navy .foot-note { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; color: #B9C3DD; }

/* reviews */
.voices { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); padding-block: clamp(64px, 8vw, 120px); align-items: end; }
.voices .big p { font-weight: 600; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.14; letter-spacing: -0.035em; text-wrap: pretty; }
.voices footer { margin-top: 14px; font-size: 15px; color: var(--ink-3); } .voices footer b { color: var(--ink); }
.voices .small blockquote + blockquote { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.voices .small p { font-size: 18px; color: var(--ink-2); }
@media (max-width: 800px) { .voices { grid-template-columns: 1fr; } }

/* close */
.close { position: relative; isolation: isolate; margin: 0 var(--gutter) 28px; border-radius: 32px; overflow: hidden; padding: clamp(48px, 8vw, 110px) clamp(24px, 6vw, 90px); }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(50% 80% at 0% 0%, var(--sky), transparent 60%), radial-gradient(50% 80% at 50% 100%, var(--lilac), transparent 60%),
    radial-gradient(50% 90% at 100% 10%, var(--pink), transparent 60%), radial-gradient(40% 80% at 90% 100%, var(--peach), transparent 60%), #F6F7FD; }
.close h2 { font-weight: 700; font-size: clamp(36px, 6vw, 84px); line-height: 1; letter-spacing: -0.05em; max-width: 14ch; }
/* footer: the brand and the quote button, then every page worth finding, then the legal line */
.foot { position: relative; isolation: isolate; margin-top: clamp(24px, 4vw, 48px); padding-top: clamp(48px, 6vw, 80px); color: var(--ink-2); font-size: 15px; }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 70% at 0% 100%, rgba(150, 198, 255, 0.28), transparent 70%), radial-gradient(40% 70% at 100% 100%, rgba(255, 156, 194, 0.22), transparent 70%), var(--mist); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 40px clamp(20px, 3vw, 44px); }
.foot-brand .wordmark { color: var(--ink); }
.foot-brand p { margin-top: 16px; max-width: 34ch; }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.foot-rating { font-size: 14px; color: var(--ink-3); } .foot-rating b { color: #C2620C; letter-spacing: 1px; font-weight: 400; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h2 { margin-bottom: 4px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.foot-col a { transition: color 200ms var(--ease); }
.foot-col a[href^="mailto"] { overflow-wrap: anywhere; }
.foot-col span { color: var(--ink-3); }
.foot-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: clamp(40px, 5vw, 64px); padding-block: 22px 32px; color: var(--ink-3); font-size: 14px; }
.foot-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.foot-base nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > .foot-col:last-child { grid-column: 1 / -1; } }
/* phones: room under the footer for the call bar */
@media (max-width: 860px) { .foot-base { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
/* moving between pages: the old page fades into the new one and the header holds still (browsers without this just load the page) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } .site-head { view-transition-name: site-head; } }
/* touch screens: text links get a finger-sized tap area without anything moving */
@media (pointer: coarse) {
  .more, .wordmark, .ways a, .faq details p a { position: relative; } /* a.reach is already positioned */
  .more::after, .wordmark::after, .ways a::after, .faq details p a::after, a.reach::after { content: ""; position: absolute; inset: -11px -6px; }
  .foot-col { gap: 0; } .foot-col a { padding-block: 9px; } .foot-col span { padding-block: 4px; }
  .foot-base nav { gap: 0 10px; margin-inline: -6px; } .foot-base nav a { padding: 11px 6px; }
}

/* ---------- inner pages ---------- */
.top--page .mesh { clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); }
.pagehero { padding-block: clamp(44px, 7vw, 96px) clamp(84px, 11vw, 150px); }
.pagehero h1 { max-width: 15ch; font-weight: 700; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.pagehero .lede { margin-top: 20px; max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.pagehero .actions { margin-top: 28px; }
.block { padding-block: clamp(32px, 4.4vw, 60px); }
/* consecutive sections are split by a hairline, so the gap between them reads as a break, not a hole */
.block + .block { padding-top: 0; }
.block + .block::before { content: ""; display: block; height: 1px; margin-bottom: clamp(32px, 4.4vw, 60px); background: var(--line); }

/* about */
.letter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.letter .say { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.34; letter-spacing: -0.02em; }
.letter .say + .say { margin-top: 0.9em; }
.letter .sign { margin-top: 28px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.letter .sign span { display: block; font-weight: 400; font-size: 15.5px; letter-spacing: 0; color: var(--ink-3); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.facts li { padding: 10px 18px; border-radius: 999px; background: var(--mist); font-weight: 500; font-size: 15.5px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); counter-reset: step; }
.steps li { position: relative; padding: 28px; border-radius: 24px; background: var(--mist); counter-increment: step; }
.steps li:last-child { background: linear-gradient(140deg, #FFE6D6, #FFD9E8 48%, #E6DCFF); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; }
.steps h3 { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; }
.steps p { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 860px) { .letter, .steps { grid-template-columns: 1fr; } }

/* work */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 84px); }
.case + .case { border-top: 1px solid var(--line); }
.case:nth-of-type(even) .case-text { order: 2; }
.case h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.04em; }
.case .kind { margin-top: 10px; font-weight: 600; color: var(--violet); }
.case .about { margin-top: 16px; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); max-width: 44ch; }
.case .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.case .tags li { padding: 7px 14px; border-radius: 999px; background: var(--mist); font-size: 14.5px; font-weight: 500; }
.case .more { display: inline-block; margin-top: 24px; }
.case .shot { position: relative; }
.case .shot > a > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 18px; box-shadow: 0 36px 70px -34px rgba(10, 22, 51, 0.5); transition: transform 500ms var(--ease); }
.case .shot:hover > a > img { transform: translateY(-6px); }
.case .shot .phone { position: absolute; left: auto; right: -4%; bottom: -8%; width: 23%; }
.case:nth-of-type(even) .shot .phone { right: auto; left: -4%; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } .case:nth-of-type(even) .case-text { order: 0; } .case .shot .phone { right: -1%; width: 26%; } .case:nth-of-type(even) .shot .phone { left: -1%; } }
.demos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.demos > div { padding: 24px; border-radius: 24px; background: var(--mist); }
.demos b { display: block; font-weight: 700; font-size: 20px; letter-spacing: -0.03em; line-height: 1.15; }
.demos b a:hover { color: var(--violet); }
.demos span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 960px) { .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .demos { grid-template-columns: 1fr; } }

/* faq */
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 24px; cursor: pointer; list-style: none; font-weight: 600; font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.03em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1633' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 300ms var(--ease), background-color 300ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: #E6DCFF; }
.faq summary:hover { color: var(--violet); }
.faq details p { padding-bottom: 26px; max-width: 64ch; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }
.faq details p a { color: var(--violet); font-weight: 600; }

/* contact */
.reach-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ways li { padding-block: 20px; border-top: 1px solid var(--line); }
.ways li:last-child { border-bottom: 1px solid var(--line); }
.ways small { display: block; color: var(--ink-3); font-size: 14.5px; }
.ways a, .ways b { font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.03em; }
.ways a:hover { color: var(--violet); }
.formcard { border-radius: 28px; background: #fff; padding: clamp(22px, 3.4vw, 44px); box-shadow: 0 40px 90px -40px rgba(10, 22, 51, 0.45), 0 0 0 1px rgba(10, 22, 51, 0.05); }
.formcard h2 { font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.04em; line-height: 1.08; }
.formcard .hint { margin-top: 8px; color: var(--ink-2); }
.formcard label { display: block; margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.formcard input, .formcard textarea { display: block; width: 100%; margin-top: 6px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--mist); color: var(--ink); font: inherit; font-size: 17px; resize: vertical; }
.formcard input:focus, .formcard textarea:focus { outline: 2px solid var(--violet); background: #fff; }
.formcard button { margin-top: 26px; border: 0; cursor: pointer; font-family: inherit; }
.formcard .note { margin-top: 14px; min-height: 24px; font-size: 15px; color: var(--ink-3); }
.formcard .note.bad { color: #B3261E; }
.formcard .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formcard .captcha { margin-top: 22px; min-height: 65px; }
.formcard .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
/* what replaces the form once it has been sent */
.formcard .done .tick { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--peach), var(--pink) 55%, var(--lilac)); color: var(--ink); }
.formcard .done h2:focus { outline: none; }
.formcard .done p { margin-top: 12px; max-width: 48ch; color: var(--ink-2); }
.formcard .done p a { font-weight: 600; color: var(--violet); }
.formcard .done .btn { margin-top: 26px; }
.formcard .done .mock { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }
.formcard .done .mock a { text-decoration: underline; }
@media (max-width: 380px) { .formcard { padding-inline: 14px; } }
@media (max-width: 860px) { .reach-grid { grid-template-columns: 1fr; } }

/* services */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.ptile { padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px rgba(10, 22, 51, 0.04), inset 0 1px 0 #fff; }
.ptile h3 { font-weight: 700; font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -0.035em; }
.ptile > p { margin-top: 6px; color: var(--ink-3); font-size: 15px; }
.ptile ul { margin-top: 18px; }
.ptile li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--line); }
.ptile li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 13px; height: 7px; border-left: 2.4px solid var(--violet); border-bottom: 2.4px solid var(--violet); transform: rotate(-45deg); }
.ptile.dark { background: var(--ink); color: #fff; box-shadow: none; }
.ptile.dark li { border-top-color: rgba(255, 255, 255, 0.14); } .ptile.dark li::before { border-color: var(--lilac); }
.ptile.glow { background: linear-gradient(140deg, #FFE6D6, #FFD9E8 48%, #E6DCFF); }
.ptile.glow > p { color: var(--ink-2); }
.group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(24px, 4vw, 64px); padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.group:first-of-type { margin-top: clamp(28px, 4vw, 48px); }
.group > h3 { font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.035em; line-height: 1.1; }
.group .facts { margin-top: 0; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 48px); }
.items b { display: block; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.items span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 860px) { .trio, .group { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .items { grid-template-columns: 1fr; } }

/* town pages and other text-led sections */
.h2.wide { max-width: 24ch; }
.text { margin-top: 16px; max-width: 68ch; color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px); }
.text p + p { margin-top: 1em; }
.facts.places a { display: block; margin: -10px -18px; padding: 10px 18px; border-radius: 999px; font-weight: 600; color: var(--violet); transition: color 200ms var(--ease); }
.facts.places a:hover { color: var(--ink); }

/* legal pages: long-form text in a readable column */
.prose { max-width: 760px; color: var(--ink-2); }
.prose .updated { font-size: 15px; color: var(--ink-3); }
.prose h2 { margin-top: 44px; font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); scroll-margin-top: 96px; }
.prose h2 .num { margin-right: 8px; font-size: 0.62em; font-weight: 600; letter-spacing: 0; vertical-align: 0.22em; color: var(--violet); }
.prose h3 { margin-top: 26px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose a { font-weight: 600; color: var(--violet); }
.prose strong { color: var(--ink); }
.prose .toc { margin-top: 26px; padding: 22px 26px; border-radius: 20px; background: var(--mist); }
.prose .toc h2 { margin-top: 0; font-size: 17px; }
.prose .toc ol { columns: 2; column-gap: 32px; margin-top: 10px; }
.prose .toc li { break-inside: avoid; }
.prose .contact-card { margin-top: 18px; padding: 22px 26px; border-radius: 20px; background: var(--mist); }
.prose .contact-card h3 { margin-top: 0; }
.prose .contact-card p { margin-top: 6px; }
@media (max-width: 640px) { .prose .toc ol { columns: 1; } }
@media (pointer: coarse) { .prose .toc li + li { margin-top: 0; } .prose .toc a { display: block; padding-block: 10px; } }

/* website grader */
.grader .formcard { max-width: 760px; }
.grader-form label { margin-top: 0; }
.grader-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.grader-row input { flex: 1 1 260px; margin-top: 0; }
.grader-row .btn { margin-top: 0; border: 0; cursor: pointer; font-family: inherit; }
.grader .facts { margin-top: 22px; }
.grade-wait, .grade-for { margin-top: 18px; color: var(--ink-2); }
.grade-for b { color: var(--ink); word-break: break-all; }
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.grade { display: grid; justify-items: center; gap: 10px; padding: 18px 10px; border-radius: 20px; background: var(--mist); text-align: center; font-weight: 600; font-size: 15px; }
.grade .ring { --c: var(--ink-3); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #DDE2EF 0); }
.grade .ring b { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #fff; font-size: 24px; letter-spacing: -0.03em; color: var(--c); }
.grade.good .ring { --c: #1F8A5C; } .grade.okay .ring { --c: #B45309; } .grade.poor .ring { --c: #B3261E; }
.facts.metrics { margin-top: 16px; } .facts.metrics b { margin-left: 4px; color: var(--ink); }
.grade-next { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.grade-next h3 { font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.grade-next p { margin-top: 6px; color: var(--ink-2); }
.grade-next .btn { margin-top: 16px; }
@media (max-width: 640px) { .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* closing band and footer, shared by every page */
.close { text-wrap: balance; }
.foot a:not(.btn):not(.wordmark):hover { color: var(--violet); }