@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700;800&family=Barlow:wght@400;600;700&display=swap');
:root{
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --brand: #003048;
  --brand-deep: #001824;
  --brand-mid: #004860;
  --brand-wash: #e4eef2;
  --brand-soft: #bbd0d8;
  --brand-line: rgba(255, 255, 255, 0.18);
  --accent: #0e7fa8;
  --accent-deep: #0c6d90;
  --accent2: #0a5976;
  --accent3: #439bbb;
  --accent-ink: #0c6d90;
  --accent-ink2: #87bfd4;
  --accent-ink3: #ffffff;
  --tint1: #e4eef2;
  --tint2: #d6e4e9;
  --tint3: #eff5f7;
  --tint4: #cddde3;
  --paper: #f4f8fa;
  --paper2: #eaf2f5;
  --paper3: #dbe7ec;
  --surface: #f4f8fa;
  --card: #ffffff;
  --field: #f4f8fa;
  --ink: #12242c;
  --ink2: #46545a;
  --ink3: #606c72;
  --ink4: #768085;
  --line: #cddbe2;
  --on-dark: #ffffff;
  --on-dark2: #c7d7dc;
  --on-dark3: #94b2bc;
  --focus: #87bfd4;
  --num1: #003048;
  --num2: #0e7fa8;
  --num3: #87bfd4;
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-ui: Barlow, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fw-display: 800;
  --fs-mega: clamp(56px, 9vw, 112px);
  --fs-hero: clamp(36px, 6.2vw, 74px);
  --fs-h1: clamp(34px, 5.4vw, 62px);
  --fs-h2: clamp(26px, 3.6vw, 42px);
  --fs-h3: clamp(19px, 2vw, 24px);
  --fs-lead: clamp(18px, 1.9vw, 20px);
  --fs-body: 17px;
  --fs-sm: 16px;
  --fs-xs: 13px;
  --lh-tight: 1.08;
  --lh-body: 1.65;
  --ls-display: -0.01em;
  --ls-eyebrow: 0.12em;
  --ls-mono: 0.06em;
  --s-section: clamp(52px, 8vw, 104px);
  --pad-x: clamp(20px, 4vw, 48px);
  --indent: 0px;
  --rail: 0px;
  --measure: 1200px;
  --measure-text: 68ch;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh1: 0 1px 2px rgba(0, 24, 48, 0.08), 0 4px 12px rgba(0, 24, 48, 0.06);
  --sh2: 0 2px 6px rgba(0, 24, 48, 0.10), 0 18px 40px -12px rgba(0, 24, 48, 0.30);
  --sh-btn: 0 6px 16px -6px rgba(14, 127, 168, 0.55);
  --rule: 1px solid var(--line);
  --rule-strong: 1px solid var(--brand);
  --on-accent: #ffffff;
  --on-brand: #ffffff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--s8) + var(--s5))}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--accent-ink);text-underline-offset:3px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--focus)}
summary::-webkit-details-marker{display:none}
details[open] .fq{transform:rotate(45deg)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);padding:var(--s3) var(--s4)}
.skip:focus{left:0}
.wrap{max-width:var(--measure);margin:0 auto;padding:var(--s-section) var(--pad-x)}
.wrap-narrow{max-width:calc(var(--s9) * 9.17);margin:0 auto;padding:var(--s-section) var(--pad-x)}

/* header */
.site-head{position:sticky;top:0;z-index:60;background:var(--brand-deep);border-bottom:1px solid var(--brand-line)}
.head-in{max-width:var(--measure);margin:0 auto;padding:var(--s2) var(--pad-x);min-height:var(--s8);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
.brand{display:flex;align-items:center;gap:var(--s3);min-height:var(--s7);text-decoration:none;color:var(--on-dark);margin-right:auto;min-width:0;flex:1 1 0}
.brand:hover{color:var(--on-dark)}
.brand img{height:var(--s7);width:auto;display:block}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead);line-height:var(--lh-tight)}
.brand-name small{display:block;font-family:var(--font-ui);font-weight:600;font-size:var(--fs-xs);color:var(--on-dark2)}
.desk-nav{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.desk-nav a{display:inline-flex;align-items:center;min-height:var(--s7);padding:0 var(--s1);font-size:var(--fs-sm);font-weight:700;text-decoration:none;color:var(--on-dark)}
.desk-nav a:hover,.foot a:hover{color:var(--accent-ink2)}
.desk-nav a[aria-current]{color:var(--accent-ink2)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--s7);min-width:var(--s7);padding:0 var(--s3);border:1px solid var(--brand-line);border-radius:var(--r-sm);color:var(--on-dark);font-weight:700;font-size:var(--fs-sm)}
.mnav-ico{display:inline-block;transition:transform .2s;font-size:var(--fs-body);line-height:var(--lh-tight)}
.mnav[open] .mnav-ico{transform:rotate(90deg)}
.mnav nav{position:absolute;right:0;top:calc(100% + var(--s2));z-index:90;width:min(86vw, calc(var(--s9) * 3.33));background:var(--brand-deep);border:1px solid var(--brand-line);border-radius:var(--r-md);box-shadow:var(--sh2);padding:var(--s2) var(--s4) var(--s4)}
.mnav nav a{display:flex;align-items:center;min-height:var(--s7);border-bottom:1px solid var(--brand-line);color:var(--on-dark);font-weight:700;font-size:var(--fs-body);text-decoration:none}
.mnav nav a.mcall{justify-content:center;margin-top:var(--s4);background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);border:0}
.head-phone{display:flex;align-items:center;min-height:var(--s7);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-lead);color:var(--on-dark);text-decoration:none;white-space:nowrap}
.head-phone:hover{color:var(--accent-ink2)}

/* shared type */
.dark{background:var(--brand);color:var(--on-dark)}
.eyebrow{margin:0 0 var(--s4);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-ink)}
.dark .eyebrow,.band-deep .eyebrow,.band-mid .eyebrow,.guide .eyebrow{color:var(--accent-ink2)}
.h2{margin:0 0 var(--s4);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight);color:var(--brand);text-wrap:balance}
.dark .h2,.band-deep .h2,.band-mid .h2{color:var(--on-dark)}
.lead{margin:0 0 var(--s4);font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink);max-width:var(--measure-text)}
.body{margin:0 0 var(--s4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);max-width:var(--measure-text)}
.dark .body,.band-deep .body,.band-mid .body{color:var(--on-dark2)}
.h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--brand)}
.h3 a{color:inherit;text-decoration:none}
.h3 a:hover{color:var(--accent-ink)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.btn{display:inline-flex;align-items:center;min-height:var(--s7);background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-body);padding:var(--s3) var(--s5);border-radius:var(--r-sm);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--accent-deep);color:var(--on-accent)}
.btn-brand{background:var(--brand);color:var(--on-brand)}
.btn-brand:hover{background:var(--brand-deep);color:var(--on-brand)}
.btn-line{background:transparent;border:var(--rule-strong);color:var(--brand)}
.btn-line:hover{background:var(--brand-wash);color:var(--brand)}
.btn-ghost{background:transparent;border:1px solid var(--on-dark2);color:var(--on-dark)}
.btn-ghost:hover{background:var(--brand-mid);color:var(--on-dark)}

/* hero */
.hero-in{max-width:var(--measure);margin:0 auto;padding:var(--s-section) var(--pad-x);display:grid;gap:var(--s7);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 3.96)), 1fr));align-items:center}
.hero h1{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-wrap:balance}
.hero-lede{margin:var(--s5) 0 0;font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--on-dark2);max-width:46ch}
.hero-stats{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--brand-line)}
.stat{margin:0;display:flex;align-items:baseline;gap:var(--s3)}
.stat b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-tight)}
.stat span{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--on-dark2)}
.hero-phone{display:inline-flex;align-items:center;min-height:var(--s7);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);color:var(--on-dark);text-decoration:none}
.hero-phone:hover{color:var(--accent-ink2)}
.hero-split{align-items:start;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"copy form" "photo form";grid-template-rows:auto 1fr;row-gap:var(--s7)}
.hero-split .hero-copy{grid-area:copy;align-self:start;padding-top:var(--s5)}
.hero-split > .est{grid-area:form}
.hero-side-photo{grid-area:photo;margin:0;align-self:stretch}
.hero-side-photo img{width:100%;height:100%;min-height:calc(var(--s9) * 3.2);object-fit:cover;display:block;border-radius:var(--r-lg);box-shadow:var(--sh2);object-position:center top}
@media (max-width:900px){.hero-split{grid-template-columns:1fr;grid-template-areas:"copy" "form" "photo"}.hero-side-photo img{height:auto;min-height:0;aspect-ratio:16/9}}
.hero-photo{max-width:var(--measure);margin:0 auto;padding:0 var(--pad-x) var(--s-section)}
.hero-photo img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;display:block;border-radius:var(--r-lg);box-shadow:var(--sh2);min-height:calc(var(--s9) * 2.29);object-position:center top}
.hero-photo figcaption{margin:var(--s3) 0 0;font-size:var(--fs-sm);color:var(--on-dark2)}
/* Promo badge (2026-10-12, Long Island: "BRAND NEW LOOK!" is how Adam sells tile). hero.badge / services[].badge. */
.hero-side-photo,.hero-photo figure{position:relative}
.q-stars{margin:0 0 var(--s2);color:#F5B301;font-size:22px;letter-spacing:3px;line-height:1}
.q-src{color:var(--ink3);font-weight:400}
.q-all{margin:var(--s6) 0 0;text-align:center}
.promo-badge{position:absolute;top:var(--s4);left:var(--s4);z-index:2;display:inline-block;transform:rotate(-4deg);background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(22px,3.2vw,38px);line-height:1;letter-spacing:.02em;text-transform:uppercase;padding:.45em .7em;border-radius:var(--r-sm);box-shadow:0 10px 24px -8px rgba(0,0,0,.55),0 0 0 4px #fff}
.svc-card{position:relative}
.svc-card .promo-badge{font-size:clamp(17px,1.8vw,22px);top:var(--s3);left:var(--s3)}
.page-in .promo-badge{position:static;display:inline-block;margin:var(--s3) 0 var(--s2);font-size:clamp(26px,4vw,46px)}
.stat a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
figure{margin:0}
figure:not(:has(img)){display:none}

/* estimate form */
.est{background:var(--card);color:var(--ink);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh2);display:grid;gap:var(--s4);border:var(--rule)}
.est h2{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--brand)}
.est-sub{margin:var(--s2) 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink2)}
.est-fields{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 1.77)), 1fr))}
.side .est-fields{grid-template-columns:1fr}
.est-fields .span-all{grid-column:1/-1}
.est fieldset label{color:var(--ink2)}
.est fieldset a{color:var(--accent-ink)}
.est label{display:grid;gap:var(--s1);min-width:0;font-size:var(--fs-xs);font-weight:700;color:var(--ink2)}
.est input,.est select,.est textarea{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:400;min-height:var(--s7);padding:var(--s3);border:var(--rule);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%;min-width:0}
.est button{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-body);min-height:var(--s7);background:var(--accent);color:var(--on-accent);border:0;padding:var(--s3);border-radius:var(--r-sm);cursor:pointer}
.est button:hover{background:var(--accent-deep)}
.est-note{margin:0;font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink3)}
.hp{position:absolute;left:-9999px}

/* offer band */
.offer{background:var(--brand-wash);border-bottom:var(--rule)}
.offer-in{max-width:var(--measure);margin:0 auto;padding:var(--s8) var(--pad-x);display:grid;gap:var(--s5) var(--s7);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 2.92)), 1fr));align-items:center}
.offer-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
/* line-height:1 on the mega price (2026-10-02). At --lh-tight the price's line box is noticeably
   taller than the digits, which have no descenders, so its BOX centre sat below its OPTICAL centre.
   The neighbouring copy and the button centre against the box, which made them read as sitting high.
   Hugging the glyphs lines all three columns up on what the eye actually reads as the middle. */
.offer-price{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-mega);line-height:1;color:var(--brand);display:block}
.offer-head{align-self:center}
.offer-in > div{align-self:center}
.offer-head h2{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight);color:var(--brand)}
.offer p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);max-width:48ch}

/* owner note */
.owner-grid{display:grid;gap:var(--s8);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 3.33)), 1fr));align-items:center}
.owner-grid .photo-slot{width:100%;max-width:calc(var(--s9) * 4.79);margin:0}
.owner-grid .photo-slot .slot-frame{aspect-ratio:4/5}
.owner-grid img{width:100%;max-width:calc(var(--s9) * 4.79);height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;border-radius:var(--r-lg);box-shadow:var(--sh2)}

/* bands */
.band-card{background:var(--card);border-top:var(--rule);border-bottom:var(--rule)}
.band-wash{background:var(--brand-wash)}
.band-deep{background:var(--brand-deep);color:var(--on-dark)}
.band-mid{background:var(--brand-mid);color:var(--on-dark)}
/* auto-fit, not auto-fill (2026-10-02). auto-fill keeps empty tracks, so a client with one or two
   crew photos got a row with two dead columns beside it, which reads as a broken page rather than a
   short one. Found by looking at Gold Standard's deployed homepage. .result-grid below already uses
   auto-fit; these two should not differ. With three or more photos the rendering is identical. */
/*
 * NO-ORPHAN GRIDS, 2026-10-02 (Tim). These used auto-fit/auto-fill against a min track width, so the
 * column count fell out of the viewport rather than out of the content. Four items in a four-wide
 * container is fine; four items in a three-wide container leaves one stranded on its own row, which
 * is what he was seeing on the results, services and guides blocks.
 *
 * The item count is known at build time, so the renderer now sets --cols to a count that divides
 * evenly (see colsFor) and these rules use it at desktop. Below that they step down to two and then
 * one, which keeps the arithmetic honest at every width for the counts we actually ship.
 */
.result-grid,.svc-grid,.guide-grid,.wte-grid{grid-template-columns:1fr}
@media (min-width:620px){.result-grid,.svc-grid,.guide-grid,.wte-grid{grid-template-columns:repeat(var(--cols-mid,2),minmax(0,1fr))}}
@media (min-width:980px){.result-grid,.svc-grid,.guide-grid,.wte-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.wte-grid{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s6) var(--s7);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 2.6)), 1fr))}
.wte-grid > li{display:block}
.wte-grid .wte-n{display:flex;align-items:center;justify-content:center;width:var(--s7);height:var(--s7);margin-bottom:var(--s4);border-radius:var(--r-pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-lead)}
.wte-grid h3{margin:0 0 var(--s3);font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--brand)}
.wte-grid p{margin:0 0 var(--s4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2)}
.wte-grid .dots{margin:0}
.wte-grid .dots li{font-size:var(--fs-sm)}
.crew-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 2.5)), 1fr));margin-top:var(--s6)}
.crew-grid img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--r-lg);box-shadow:var(--sh1)}
.crew-grid figcaption{margin:var(--s3) 0 0;font-weight:700;color:var(--brand)}
.result-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 3.13)), 1fr));margin-top:var(--s6)}
.result-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:var(--r-md)}
.result-grid figcaption{margin:var(--s3) 0 0;font-size:var(--fs-sm);color:var(--on-dark2)}

/* PHOTO SLOTS (2026-09-25). Shown where a client has no photos yet. These must read as a
   DESIGNED element, not as a broken image or an unfinished stub - that distinction is the whole
   reason they are allowed at all, see the long note by crewBlock. So: a real frame with a visible
   dashed edge, a centred icon at low contrast, and a caption in the same style as a real one. No
   grey box, no broken-image glyph, no all-caps instruction. They inherit the grid's aspect ratios
   so the layout is identical whether the photos are present or not, which is the point - the client
   sees the shape of the finished page. */

.photo-slot{margin:0}
.photo-slot .slot-frame{display:grid;place-items:center;width:100%;border-radius:var(--r-lg, 12px);
  border:2px dashed color-mix(in oklab, currentColor 28%, transparent);
  background:color-mix(in oklab, currentColor 5%, transparent)}
.photo-slot .slot-ico{width:clamp(28px, 14%, 52px);height:auto;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.42}
.photo-slot figcaption{opacity:.72}
@media (prefers-reduced-motion: no-preference){.photo-slot .slot-frame{transition:border-color .2s}}

/* Crew's own container aspect ratios. The shared module deliberately sets no ratio, because the
   container is what makes a slot occupy exactly the space a real photo would. */
.crew-grid .photo-slot .slot-frame{aspect-ratio:4/5}
.result-grid .photo-slot .slot-frame{aspect-ratio:1/1;border-radius:var(--r-md)}
.crew-grid .photo-slot figcaption{font-weight:600}

/* service cards */
.svc-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--s9) * 2.81)), 1fr));margin-top:var(--s6)}
.svc-card{display:flex;flex-direction:column;background:var(--card);border:var(--rule);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh1)}
.svc-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.svc-ico{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--brand-wash);color:var(--brand)}
.svc-ico svg{width:calc(var(--s8) * 0.9);height:calc(var(--s8) * 0.9)}
.svc-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.svc-body p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink2)}
.svc-body p.svc-where{margin:auto 0 0;padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5;color:var(--ink2)}
.svc-body p.svc-where a{color:var(--ink);font-weight:600}
.more{margin:var(--s6) 0 0}

/* testimonials */
.quote-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 2.71)), 1fr));margin-top:var(--s6)}
.quote{margin:0;background:var(--card);border:var(--rule);border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--sh1);display:flex;flex-direction:column;gap:var(--s4)}
.quote blockquote{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.quote figcaption{margin-top:auto;font-weight:700;color:var(--brand)}
.quote figcaption span{font-weight:600;color:var(--ink3)}

/* guides */
.guides-top{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:end;justify-content:space-between;margin-bottom:var(--s6)}
.guides-top a{display:inline-flex;align-items:center;min-height:var(--s7);color:var(--on-dark);font-weight:700}
.guide-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--s9) * 2.71)), 1fr))}
.guide{display:flex;flex-direction:column;gap:var(--s3);background:var(--brand);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:var(--s5);min-height:calc(var(--s9) * 2.08)}
.guide .eyebrow{margin:0}
.guide h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--on-dark)}
.guide h3 a{color:inherit;text-decoration:none}
.guide h3 a:hover{text-decoration:underline;color:inherit}
.guide p.g-sum{margin:auto 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--on-dark2)}
.guide-light{background:var(--card);border:var(--rule);box-shadow:var(--sh1)}
.guide-light h3{color:var(--brand)}
.guide-light .eyebrow{color:var(--accent-ink)}
.guide-light p.g-sum{color:var(--ink2)}

/* areas */
.area-split{display:grid;gap:var(--s8);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 3.13)), 1fr));align-items:start}
.town-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--s9) * 1.88)), 1fr))}
.town-list a,.link-list a{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:var(--s7);background:var(--card);border:var(--rule);border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-weight:700;text-decoration:none;color:var(--brand)}
.town-list a:hover,.link-list a:hover{border-color:var(--accent)}
.town-list small{font-size:var(--fs-xs);font-weight:700;color:var(--ink3)}
.link-list{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--s9) * 2.5)), 1fr))}
.area-card{display:flex;flex-direction:column;gap:var(--s3);background:var(--card);border:var(--rule);border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--sh1);text-decoration:none;color:var(--ink)}
.area-card:hover{border-color:var(--accent);color:var(--ink)}
.area-card p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink2)}
.area-card .tag{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-ink)}

/* faq */
.faq details{border-top:var(--rule)}
.faq details:last-child{border-bottom:var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);align-items:center;min-height:var(--s7);padding:var(--s4) 0;font-weight:700;font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--brand)}
.faq summary h3{margin:0;font:inherit;color:inherit}
.fq{transition:transform .2s;color:var(--accent);font-size:var(--fs-h3);line-height:var(--lh-tight)}
.faq details p{margin:0 0 var(--s5);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);max-width:64ch}

/* closing cta */
.cta-in{max-width:var(--measure);margin:0 auto;padding:var(--s-section) var(--pad-x);display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between}
.cta-in > div:first-child{max-width:50ch}
.cta-in h2{margin:0 0 var(--s3);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight)}
.cta-in p{margin:0;font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--on-dark2)}
.cta-in .btns{margin:0}

/* inner page head */
.crumbs{max-width:var(--measure);margin:0 auto;padding:var(--s3) var(--pad-x) 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);margin:0;padding:0;font-size:var(--fs-sm);font-weight:600;color:var(--on-dark2)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--s7);color:var(--on-dark)}
.crumbs a:hover{color:var(--accent-ink2)}
.page-in{max-width:var(--measure);margin:0 auto;padding:var(--s8) var(--pad-x)}
.page-in h1{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);max-width:20ch;text-wrap:balance}
.page-lede{margin:var(--s5) 0 0;font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--on-dark2);max-width:56ch}
.page-in .btns{margin-top:var(--s6)}

/* content + sidebar */
.content-grid{max-width:var(--measure);margin:0 auto;padding:var(--s-section) var(--pad-x);display:grid;gap:var(--s8);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 3.13)), 1fr));align-items:start}
.content-grid.solo{grid-template-columns:minmax(0, 1fr);max-width:calc(var(--s9) * 9.38)}
.span2{grid-column:span 2;min-width:0}
.solo .span2{grid-column:auto}
.prose > h2{margin:var(--s7) 0 var(--s3);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight);color:var(--brand);text-wrap:balance}
.prose > h2:first-child,.prose > figure + h2{margin-top:0}
.prose > p{margin:0 0 var(--s4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);max-width:var(--measure-text)}
.prose > p.first{font-size:var(--fs-lead);color:var(--ink)}
.prose > figure{margin:0 0 var(--s6)}
.prose > figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-lg);box-shadow:var(--sh2)}
.prose figcaption{margin:var(--s3) 0 0;font-size:var(--fs-sm);color:var(--ink3)}
.steps{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s4);max-width:var(--measure-text)}
.steps li{display:grid;grid-template-columns:var(--s7) 1fr;gap:var(--s4);align-items:start}
.steps li > span{display:flex;align-items:center;justify-content:center;width:var(--s7);height:var(--s7);border-radius:var(--r-pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-lead)}
.steps h3{margin:var(--s2) 0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--brand)}
.steps p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2)}
.dots{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3);max-width:var(--measure-text)}
.dots li{display:grid;grid-template-columns:var(--s4) 1fr;gap:var(--s3);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.dots li::before{content:"";width:var(--s2);height:var(--s2);margin-top:var(--s3);border-radius:var(--r-pill);background:var(--accent)}
.pills{list-style:none;margin:0 0 var(--s5);padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.pills a,.pills span{display:inline-flex;align-items:center;min-height:var(--s7);background:var(--brand-wash);border-radius:var(--r-pill);padding:0 var(--s4);font-weight:700;text-decoration:none;color:var(--brand)}
.pills a:hover{background:var(--brand-soft)}
.side{display:grid;gap:var(--s4);min-width:0;position:sticky;top:calc(var(--s8) + var(--s5))}
.side-offer{background:var(--brand-wash);border:var(--rule);border-radius:var(--r-lg);padding:var(--s5)}
.side-offer .p1{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-tight);color:var(--brand)}
.side-offer .p2{margin:var(--s2) 0 var(--s3);font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead);color:var(--brand)}
.side-offer .p3{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink2)}
.contact-card{background:var(--card);border:var(--rule);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh1)}
.contact-card h2{margin:0 0 var(--s3);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);color:var(--brand)}
.contact-card p{margin:0 0 var(--s3);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink2)}
.contact-card .big{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight)}
.contact-card .big a{color:var(--brand);text-decoration:none}

/* article */
.art-head{max-width:calc(var(--s9) * 9.38);margin:0 auto;padding:var(--s-section) var(--pad-x)}
.art-head h1{margin:0;font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);text-wrap:balance}
.art-by{margin:var(--s5) 0 0;font-size:var(--fs-sm);color:var(--on-dark2)}
.art{max-width:calc(var(--s9) * 9.38);margin:0 auto;padding:0 var(--pad-x) var(--s-section)}
.answer{margin-top:calc(-1 * var(--s7));position:relative;background:var(--card);border:2px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--sh2);padding:var(--s6)}
.answer h2{margin:0 0 var(--s3);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-ink)}
.answer p{margin:0;font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink)}
.toc{margin-top:var(--s6);padding:var(--s5);background:var(--brand-wash);border-radius:var(--r-md)}
.toc h2{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-lead);color:var(--brand)}
.toc ol{margin:0;padding-left:var(--s5);display:grid}
.toc a{display:inline-flex;align-items:center;min-height:var(--s7)}
.art .prose{margin-top:var(--s7)}
.related{margin-top:var(--s7);padding:var(--s5);background:var(--card);border:var(--rule);border-radius:var(--r-md)}
.related h2{margin:0 0 var(--s3);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);color:var(--brand)}
.related .pills{margin:0}
.legal .prose > h2{font-size:var(--fs-h3)}
.legal .prose ul{margin:0 0 var(--s4);padding-left:var(--s5);color:var(--ink2);line-height:var(--lh-body);max-width:var(--measure-text)}

/* footer + call bar */
.foot{background:var(--brand-deep);color:var(--on-dark2)}
.foot-in{max-width:var(--measure);margin:0 auto;padding:var(--s7) var(--pad-x);display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--s9) * 2.29)), 1fr))}
.foot-name{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);color:var(--on-dark)}
.foot-about{margin:0 0 var(--s3);font-size:var(--fs-sm);line-height:var(--lh-body)}
.foot-phone{display:flex;align-items:center;min-height:var(--s7);color:var(--on-dark);font-weight:700;font-size:var(--fs-body);text-decoration:none}
.foot-mail{display:flex;align-items:center;min-height:var(--s7);color:var(--accent-ink2);font-size:var(--fs-sm);overflow-wrap:anywhere}
.foot-h{margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--on-dark3)}
.foot nav a{display:flex;align-items:center;min-height:var(--s7);color:var(--on-dark);font-size:var(--fs-sm);text-decoration:none}
.foot-base{border-top:1px solid var(--brand-line)}
.foot-base p{max-width:var(--measure);margin:0 auto;padding:var(--s4) var(--pad-x);font-size:var(--fs-xs);color:var(--on-dark2)}
.foot-base a{color:var(--on-dark2)}
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--s8);grid-template-columns:1fr 1fr;background:var(--brand-deep);border-top:1px solid var(--brand-line)}
.callbar a{display:flex;align-items:center;justify-content:center;color:var(--on-dark);font-weight:700;font-size:var(--fs-body);text-decoration:none}
.callbar a + a{background:var(--accent);color:var(--on-accent)}

@media (max-width:1100px){.head-phone{display:none}}
@media (max-width:1024px){.desk-nav{display:none}.mnav{display:block}}
@media (max-width:900px){.span2{grid-column:auto}.side{position:static}}
@media (max-width:560px){.brand img + .brand-name{display:none}}
@media (max-width:760px){.site-head{position:static}.callbar{display:grid}body{padding-bottom:var(--s8)}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Adam 2026-10-11: his customers skew older, so make every link obvious */
main a:not(.btn):not(.brand):not(.area-card):not(.guide-card){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;font-weight:700}
.h3 a,.guide h3 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.town-list a,.pills a{text-decoration:none}
.town-list a>*:first-child,.pills a{text-decoration:underline}
.site-foot a,footer a{text-decoration:underline;text-underline-offset:3px}
.area-card h3,.area-card .h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}