:root{
  --paper:#EEF3F7; --surface:#FFFFFF; --surface-2:#DCE7F0;
  --ink:#102236; --ink-2:#41546A; --ink-3:#5E7085;
  --line:rgba(16,34,54,.15);
  --field:#13294B; --field-deep:#0C1D36; --field-ink:#E8F1F8; --field-ink-2:#A9C4DE; --field-line:rgba(232,241,248,.17);
  --green:#4B9CD3; --green-text:#1D6599; --sage:#7DA05C; --on-green:#102236; --star:#F2B33D;
  --tint:#D3E6F4; --tint-2:#E8F2F9;
  --hatch:rgba(75,156,211,.14);
  --sans:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --disp:"Instrument Sans",var(--sans);
  --lbl:"Hepta Slab",Georgia,"Times New Roman",serif;
  --wrap:1140px; --gut:22px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A1628; --surface:#11223A; --surface-2:#1A2E48;
    --ink:#E6EEF6; --ink-2:#A3B6CB; --ink-3:#5E7085;
    --line:rgba(230,238,246,.14);
    --field:#0C1D36; --field-deep:#081426; --field-ink:#E6EEF6; --field-ink-2:#9DB6CF; --field-line:rgba(230,238,246,.15);
    --green:#6FB6E6; --green-text:#8CC8EE; --sage:#9BBC7B; --on-green:#0A1628;
    --tint:#112B45; --tint-2:#0E2238;
    --hatch:rgba(111,182,230,.17);
  }
}
:root[data-theme="dark"]{
    --paper:#0A1628; --surface:#11223A; --surface-2:#1A2E48;
    --ink:#E6EEF6; --ink-2:#A3B6CB; --ink-3:#5E7085;
    --line:rgba(230,238,246,.14);
    --field:#0C1D36; --field-deep:#081426; --field-ink:#E6EEF6; --field-ink-2:#9DB6CF; --field-line:rgba(230,238,246,.15);
    --green:#6FB6E6; --green-text:#8CC8EE; --sage:#9BBC7B; --on-green:#0A1628;
    --tint:#112B45; --tint-2:#0E2238;
    --hatch:rgba(111,182,230,.17);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp); font-weight:600; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--green-text)}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.band{padding-block:clamp(48px,6vw,80px)}
.band--surface{background:var(--surface)}
.band--tint{background:linear-gradient(160deg,var(--tint) 0%,var(--tint-2) 100%)}
.band--field{background:var(--field); color:var(--field-ink)}
.band--field h2,.band--field h3{color:var(--field-ink)}
.eyebrow{font-family:var(--lbl); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-text); margin:0 0 14px}
.band--field .eyebrow{color:var(--field-ink-2)}
h2{font-size:clamp(26px,3.2vw,34px); max-width:24ch}
.lede{font-size:17px; color:var(--ink-2); max-width:56ch; margin-top:14px}
.band--field .lede{color:var(--field-ink-2)}
.note{font-size:14.5px; color:var(--ink-3); margin-top:20px; max-width:66ch}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--green); color:var(--on-green); font-weight:600; padding:10px 14px; border-radius:8px; text-decoration:none}
.skip:focus{top:12px}
.form-error{margin:4px 0 0; font-size:13.5px; color:#FFB4A8}
.row input[aria-invalid="true"]{border-color:#FF6F61}
.form-done{background:rgba(255,255,255,.06); border:1px solid var(--field-line); border-radius:12px; padding:22px 24px; max-width:520px; color:var(--field-ink-2)}
.form-done-h{font-family:var(--disp); font-weight:600; font-size:22px; letter-spacing:-.02em; color:#fff; margin:0 0 8px}
.form-done p{margin:0 0 10px}
.form-done a{color:var(--field-ink); font-weight:600; white-space:nowrap}
:where(a,button,summary,input,textarea):focus-visible{outline:3px solid var(--green-text); outline-offset:2px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:-.005em; padding:12px 20px; border-radius:8px; text-decoration:none; border:0; cursor:pointer; background:var(--green); color:var(--on-green); box-shadow:0 1px 0 rgba(0,0,0,.08), 0 6px 18px -8px rgba(20,112,127,.45); transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(0,0,0,.08), 0 10px 22px -8px rgba(20,112,127,.5)}
.btn--lg{font-size:16px; padding:14px 22px}
.btn--sm{font-size:14.5px; padding:9px 16px}
.btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--green-text); box-shadow:none}
.btn--ghost:hover{background:rgba(75,156,211,.10); box-shadow:none}
.band--field .btn--ghost{color:var(--field-ink); border-color:var(--field-line)}
.btn svg{width:18px; height:18px; flex:none}
.num{font-family:var(--sans); font-weight:600; font-variant-numeric:tabular-nums}

/* header: utility bar + main bar */
.hdr{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--field-deep) 86%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--field-line); color:var(--field-ink)}
.hdr .wrap{display:flex; align-items:center; gap:18px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; margin-right:auto}
.mark{flex:none; width:46px; height:46px; display:block; border-radius:50%; box-shadow:0 0 0 2px var(--field-deep), 0 0 0 3.5px rgba(75,156,211,.55)}
.brand-text{display:grid; gap:2px}
.brand-name{font-family:var(--disp); font-weight:600; font-size:16.5px; letter-spacing:-.02em; line-height:1; color:#fff}
.brand-sub{font-family:var(--lbl); font-weight:600; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--field-ink-2)}
.nav{display:flex; gap:4px}
.nav a{color:var(--field-ink-2); text-decoration:none; font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:6px; position:relative}
.nav a:hover{color:#fff; background:rgba(255,255,255,.07)}
.hdr .btn--sm{font-size:14px; padding:9px 15px}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14.5px; padding:9px 12px; border:1px solid var(--field-line); border-radius:8px; color:var(--field-ink)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:rgba(255,255,255,.08)}
.menu-list{position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 40px -18px rgba(16,34,54,.45); padding:8px; display:grid; gap:2px}
.menu-list a{display:block; padding:10px 12px; border-radius:6px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15.5px}
.menu-list a:hover{background:var(--tint-2)}
@media(max-width:900px){.nav{display:none} .menu{display:block} .hdr .btn--sm span{display:none} .hdr .btn--sm{padding:10px 12px}}
@media(max-width:520px){.brand-name{font-size:15px; white-space:nowrap} .brand-sub{display:none} .mark{width:40px; height:40px} .hdr .wrap{gap:12px; min-height:64px}}

/* hero: the dispatch card, on petrol */
.hero{position:relative; overflow:hidden; background:linear-gradient(170deg,var(--field-deep) 0%,var(--field) 55%,#1A3A63 100%); color:var(--field-ink); padding-block:clamp(44px,5.5vw,72px) clamp(84px,9vw,124px)}
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(232,241,248,.10) 1px, transparent 1.2px); background-size:22px 22px; mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%); pointer-events:none}
.hero .eyebrow{color:var(--green); margin-bottom:16px}
.hero::after{content:""; position:absolute; top:-200px; right:-100px; width:680px; height:680px; border-radius:50%; background:radial-gradient(closest-side, rgba(75,156,211,.30), transparent 70%); pointer-events:none}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center}
@media(max-width:840px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{font-size:clamp(34px,4.3vw,50px); letter-spacing:-.035em; line-height:1.05; max-width:14ch; color:#fff}
.hero .lede{margin-top:20px; color:var(--field-ink-2); max-width:44ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; align-items:center}
.hero .btn--ghost{color:var(--field-ink); border-color:rgba(232,241,248,.35)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.07)}
.trust{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none}
.trust li{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--field-ink); background:rgba(255,255,255,.055); border:1px solid var(--field-line); border-radius:8px; padding:8px 12px 8px 10px}
.trust svg{width:18px; height:18px; color:var(--green); flex:none}
.photo-card{position:relative}
.photo-card::before{content:""; position:absolute; inset:8% -6% -10% -6%; border-radius:50%; background:radial-gradient(closest-side, rgba(75,156,211,.22), transparent 72%); filter:blur(14px); pointer-events:none}
.hero-photo{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:8/5; background:var(--field-deep); box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.04)}
.hero-photo img.ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.badge{position:absolute; left:-18px; top:-18px; width:88px; height:88px; border-radius:50%; box-shadow:0 0 0 4px var(--field), 0 14px 30px -12px rgba(0,0,0,.6); z-index:2}
@media(max-width:840px){.badge{left:12px; top:-22px; width:72px; height:72px}}
.float{position:absolute; background:var(--surface); border-radius:12px; padding:12px 16px; box-shadow:0 22px 44px -20px rgba(0,0,0,.55); display:grid; gap:2px; z-index:2}
.float .k{font-family:var(--lbl); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5E7085}
.float .v{font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:-.02em; color:#102236; line-height:1.1}
.float .v .stars{color:var(--star); letter-spacing:1px; font-size:14px; margin-right:6px}
.float--a{right:-14px; bottom:-18px}
@media(max-width:840px){.float--a{right:10px; bottom:-18px}}

/* symptom strip */
.symptoms{position:relative; z-index:2; margin-top:-56px; padding-bottom:8px}
.symptoms .panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px 20px; box-shadow:0 30px 60px -30px rgba(16,34,54,.45), 0 2px 0 rgba(255,255,255,.6) inset}
.symptoms .lbl{display:flex; align-items:center; gap:10px; font-family:var(--lbl); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-text); margin:0 0 14px}
.symptoms .lbl::after{content:""; flex:1; height:1px; background:var(--line)}
.chips{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:0; padding:0; list-style:none}
@media(max-width:1000px){.chips{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.chips{grid-template-columns:repeat(2,1fr)}}
.chips a{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:500; font-size:14px; line-height:1.2; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:var(--paper); transition:border-color .15s, background .15s, transform .15s}
.chips a svg{width:22px; height:22px; flex:none; color:var(--green-text)}
.chips a:hover{border-color:var(--green-text); background:var(--tint-2); transform:translateY(-1px)}
.chips a::after{content:"›"; margin-left:auto; color:var(--ink-3); font-size:18px; line-height:1}

/* icon tile, shared by steps and services */
.ico{width:44px; height:44px; border-radius:10px; background:var(--tint-2); color:var(--green-text); display:grid; place-items:center; flex:none}
.ico svg{width:22px; height:22px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; position:relative}
.steps::before{content:""; position:absolute; left:8%; right:8%; top:46px; border-top:2px dashed var(--line); z-index:0}
@media(max-width:840px){.steps{grid-template-columns:1fr} .steps::before{display:none}}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px 24px 26px; overflow:hidden; z-index:1}
.step::after{content:attr(data-n); position:absolute; right:16px; top:-10px; font-family:var(--lbl); font-weight:600; font-size:84px; line-height:1; letter-spacing:-.04em; color:var(--tint); pointer-events:none}
.step .ico{margin-bottom:18px; position:relative; z-index:1}
.step-n{font-family:var(--lbl); font-weight:600; font-size:11px; letter-spacing:.1em; color:var(--green-text); position:relative}
.step h3{font-size:18px; font-weight:600; margin:6px 0 6px; position:relative}
.step p{color:var(--ink-2); font-size:15px}

/* pricing */
.pricing-split{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,64px); align-items:center}
@media(max-width:900px){.pricing-split{grid-template-columns:1fr}}
.prices{display:grid; grid-template-columns:1.15fr 1fr; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 30px 60px -36px rgba(16,34,54,.4)}
@media(max-width:560px){.prices{grid-template-columns:1fr}}
.price{padding:28px 28px 30px; position:relative}
.price--lead{background:linear-gradient(180deg,var(--tint-2),var(--surface) 70%); border-right:1px solid var(--line)}
@media(max-width:560px){.price--lead{border-right:0; border-bottom:1px solid var(--line)}}
.price--lead::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--green)}
.price .pill{display:table; font-family:var(--lbl); font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-text); background:var(--tint); border-radius:980px; padding:5px 10px; margin-bottom:14px}
.price .amt{font-family:var(--disp); font-weight:600; font-size:48px; letter-spacing:-.04em; line-height:1; margin:10px 0 4px; font-variant-numeric:tabular-nums}
.price--lead .amt{font-size:56px}
.price .per{font-family:var(--sans); font-size:14.5px; color:var(--ink-3)}
.price ul{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px}
.price li{padding-left:22px; position:relative; font-size:15px; color:var(--ink-2)}
.price li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--green-text); font-weight:700; font-size:13px}

/* services */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; scroll-margin-top:96px; transition:transform .15s, box-shadow .15s, border-color .15s}
.card:hover{transform:translateY(-2px); box-shadow:0 20px 40px -28px rgba(16,34,54,.45); border-color:rgba(20,112,127,.35)}
.card .ico{margin-bottom:18px}
.card .tag{font-family:var(--lbl); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-text); display:block; margin-bottom:8px}
.card h3{font-size:18px; font-weight:600; margin-bottom:8px}
.card p{color:var(--ink-2); font-size:15px}
.band--tint .card{background:var(--surface)}

.byline{font-size:13.5px; color:var(--ink-3); margin:28px 0 0; border-top:1px solid var(--line); padding-top:14px; max-width:60ch}
.byline a{color:var(--green-text); font-weight:600}
.band--field .byline{color:var(--field-ink-2); border-color:var(--field-line)}
.band--field .byline a{color:var(--field-ink)}

/* about */
.split{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,54px); align-items:center}
.split>.shot{max-height:420px}
.split .lede+p{margin:14px 0 0; color:var(--ink-2); font-size:15.5px; line-height:1.65}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.slot{position:relative; border:1px solid var(--line); border-radius:14px; min-height:380px; box-shadow:0 30px 60px -36px rgba(16,34,54,.4); background:repeating-linear-gradient(135deg,var(--hatch) 0 9px,transparent 9px 18px),var(--surface); display:flex; align-items:flex-end; padding:16px}
.slot span{font-family:var(--lbl); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:7px 11px}
.cred{display:flex; gap:9px; flex-wrap:wrap; margin-top:20px; padding:0; list-style:none}
.cred li{display:flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:500; font-size:13.5px; border:1px solid var(--line); border-radius:8px; padding:7px 12px; color:var(--ink); background:var(--surface)}
.cred li::before{content:"✓"; color:var(--green-text); font-weight:700; font-size:12px}

/* reviews */
.reviews{columns:3 260px; column-gap:16px; margin-top:32px}
@media(max-width:1100px){.reviews{columns:2 260px}}
@media(max-width:640px){.reviews{columns:1}}
.review{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 22px 20px; margin:0 0 16px; break-inside:avoid; -webkit-column-break-inside:avoid}
.review::before{content:"\201C"; position:absolute; right:18px; top:6px; font-family:var(--lbl); font-weight:600; font-size:72px; line-height:1; color:var(--tint); pointer-events:none}
.review .stars{color:var(--star); letter-spacing:2px; font-size:14px}
.review p{margin:12px 0 18px; font-size:15.5px; color:var(--ink-2); flex:1}
.review cite{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:14px; font-style:normal; color:var(--ink-2); border-top:1px solid var(--line); padding-top:14px}
.review .av{width:30px; height:30px; border-radius:50%; background:var(--field); color:var(--field-ink); display:grid; place-items:center; font-family:var(--lbl); font-size:12px; font-weight:600}

/* area */
.area{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:center}
@media(max-width:840px){.area{grid-template-columns:1fr}}
.areas{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; padding:0; list-style:none}
.areas li{display:flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:500; font-size:14px; border:1px solid var(--line); border-radius:8px; padding:8px 13px; color:var(--ink); background:var(--surface)}
.areas li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--tint)}
.map-card{background:linear-gradient(160deg,var(--field-deep),var(--field)); border-radius:14px; padding:22px; box-shadow:0 30px 60px -36px rgba(0,31,36,.6); position:relative; overflow:hidden}
.map-card::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(232,241,248,.10) 1px, transparent 1.2px); background-size:18px 18px; pointer-events:none}
.map-card{padding:12px}
.gmap{position:relative; display:block; width:100%; height:auto; aspect-ratio:3/2; border:0; border-radius:10px; background:var(--field-deep); filter:saturate(.85)}
.map-note{position:relative; margin:10px 4px 2px; font-size:13px}
.map-note a{color:var(--field-ink)}

/* faq */
.faq-split{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,64px); align-items:start}
@media(max-width:900px){.faq-split{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:16px 40px 16px 0; position:relative; list-style:none; font-family:var(--disp); font-weight:600; font-size:16.5px; letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:16px; font-family:var(--sans); font-size:22px; color:var(--green-text)}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 0 18px; color:var(--ink-2); max-width:70ch; font-size:15.5px}

/* contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:start}
@media(max-width:840px){.contact{grid-template-columns:1fr}}
.specstrip{border-top:1px solid var(--field-line); margin-top:30px; padding-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px 28px}
.spec dt{font-family:var(--lbl); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--field-ink-2)}
.spec dd{margin:5px 0 0; font-size:16px; font-weight:600; color:var(--field-ink)}
.spec a{color:inherit}
.form{display:grid; gap:14px; max-width:520px}
.row{display:grid; gap:6px}
.row label{font-family:var(--lbl); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--field-ink-2)}
.row input,.row textarea{font:inherit; font-size:16px; padding:12px 13px; border-radius:6px; border:1px solid var(--field-line); background:rgba(255,255,255,.06); color:var(--field-ink)}
.row textarea{min-height:110px; resize:vertical}
.form-note{margin:2px 0 0; font-size:14px; color:var(--field-ink-2)}
.form-note a{color:var(--field-ink); font-weight:600; white-space:nowrap}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){.two{grid-template-columns:1fr}}

/* footer */
.ftr{position:relative; overflow:hidden; background:var(--field-deep); color:var(--field-ink-2); padding-block:56px 108px; font-size:15px; border-top:1px solid var(--field-line)}
.ftr::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--green),transparent 60%)}
.ftr .wm{position:absolute; right:24px; top:40px; width:min(260px, 30vw); height:auto; aspect-ratio:1/1; opacity:.08; pointer-events:none}
@media(max-width:900px){.ftr .wm{display:none}}
.ftr .cols{position:relative; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:36px}
@media(max-width:900px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr .cols{grid-template-columns:1fr}}
.ftr h2.ftr-h,.ftr h4{font-family:var(--lbl); font-weight:600; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--field-ink-2); margin:0 0 14px}
.ftr a{color:var(--field-ink); text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr .list{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.ftr .brand{margin:0 0 14px}
.ftr .brand-name{color:var(--field-ink)}
.ftr .brand-sub{color:var(--field-ink-2)}
.ftr .mark{box-shadow:0 0 0 2px var(--field-deep), 0 0 0 3px var(--field-line)}
.ftr .blurb{max-width:38ch; color:var(--field-ink-2); font-size:15px}
.social{display:flex; gap:8px; margin-top:18px; padding:0; list-style:none; flex-wrap:wrap}
.social a{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.02em; border:1px solid var(--field-line); border-radius:6px; padding:7px 11px}
.social a:hover{background:rgba(255,255,255,.05); text-decoration:none}
.social .stars{color:var(--star); letter-spacing:1px}
.ftr-review{margin:14px 0 0; font-size:13px}
.ftr-review a{color:var(--field-ink-2); text-decoration:underline; text-underline-offset:3px}
.ftr-review a:hover{color:var(--field-ink)}
.ftr .phone{font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--field-ink)}
.ftr .contact-list{display:grid; gap:10px; margin:0; padding:0; list-style:none; color:var(--field-ink)}
.ftr .contact-list li{display:flex; gap:10px; align-items:flex-start}
.ftr .contact-list svg{width:16px; height:16px; flex:none; margin-top:4px; color:var(--green)}
.legal{position:relative; border-top:1px solid var(--field-line); margin-top:40px; padding-top:18px; font-size:13px; color:var(--field-ink-2); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* sticky call bar */
.callbar svg{width:20px;height:20px}
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; background:var(--green); color:var(--on-green); text-decoration:none; border-top:1px solid rgba(0,0,0,.12); font-family:var(--sans); font-weight:700; font-size:18px; align-items:center; justify-content:center; gap:10px; padding:15px; padding-bottom:calc(15px + env(safe-area-inset-bottom,0px))}
@media(max-width:900px){.callbar{display:flex}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}

/* inner pages */
/* Faded photo behind an inner-page hero. Set --hero-img on the section.
   Masked so it clears the text on the left and shows on the right. */
.page-hero::after{content:""; position:absolute; inset:0; z-index:0; background-image:var(--hero-img,none); background-size:cover; background-position:center; opacity:.32; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(100deg, transparent 8%, rgba(0,0,0,.55) 48%, #000 100%); mask-image:linear-gradient(100deg, transparent 8%, rgba(0,0,0,.55) 48%, #000 100%); pointer-events:none}
@media(max-width:840px){.page-hero::after{opacity:.22; -webkit-mask-image:linear-gradient(180deg, transparent 10%, #000 100%); mask-image:linear-gradient(180deg, transparent 10%, #000 100%)}}

/* Answer cards: the "before you call" block on Services. */
.qa{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px}
@media(max-width:840px){.qa{grid-template-columns:1fr}}
.qa-item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px 26px}
.qa-item h2{font-size:19px; line-height:1.28; letter-spacing:-.02em; margin:0 0 10px; max-width:none}
.qa-item p{margin:0; color:var(--ink-2); font-size:15px}

/* Links that lead further into the site. These carry weight. */
.lead-link{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:16px; color:var(--green-text); text-decoration:none; border-bottom:2px solid var(--tint); padding-bottom:4px; transition:border-color .15s ease, gap .15s ease}
.lead-link::after{content:"\203A"; font-size:20px; line-height:1; margin-top:-2px}
.lead-link:hover{border-bottom-color:var(--green-text); gap:12px}
p.has-lead-link{margin-top:28px}

/* Links that cite a source and leave the site. These stay quiet. */
.sources{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none}
.sources a{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:980px; padding:9px 15px; background:var(--surface); transition:border-color .15s ease, color .15s ease}
.sources a:hover{border-color:var(--green-text); color:var(--ink)}
.sources svg{width:13px; height:13px; opacity:.55; flex:none}
.sources .stars{color:var(--star); letter-spacing:1px; font-size:12px}

/* About: both photo slots stack in the left column so it does not run dry. */
.about-photos{display:grid; gap:16px; align-content:start}

.page-hero{position:relative; overflow:hidden; background:linear-gradient(170deg,var(--field-deep) 0%,var(--field) 70%); color:var(--field-ink); padding-block:clamp(40px,5vw,64px) clamp(40px,5vw,60px)}
.page-hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(232,241,248,.10) 1px, transparent 1.2px); background-size:22px 22px; mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 80%); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 80%); pointer-events:none}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .eyebrow{color:var(--green)}
.page-hero h1{font-size:clamp(32px,4vw,44px); letter-spacing:-.03em; line-height:1.08; max-width:18ch; color:#fff}
.page-hero .lede{color:var(--field-ink-2); max-width:52ch}
.page-hero .hero-cta{margin-top:22px}
.page-hero .btn--ghost{color:var(--field-ink); border-color:rgba(232,241,248,.35)}
.crumbs{font-size:13px; color:var(--field-ink-2); margin:0 0 18px; display:flex; gap:8px; flex-wrap:wrap}
.crumbs a{color:var(--field-ink)}
.svc{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,56px); padding-block:40px; border-top:1px solid var(--line); scroll-margin-top:96px}
.svc:first-of-type{border-top:0; padding-top:0}
@media(max-width:840px){.svc{grid-template-columns:1fr; gap:20px}}
.svc h2{font-size:clamp(24px,2.8vw,30px); max-width:22ch}
.svc .ico{margin-bottom:16px}
.svc p{color:var(--ink-2); max-width:60ch}
.svc .meta{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; align-self:start}
.svc .meta h3{font-family:var(--lbl); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-text); margin:0 0 10px}
.svc .meta ul{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:7px}
.svc .meta li{padding-left:20px; position:relative; font-size:15px; color:var(--ink-2)}
.svc .meta li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--green-text); font-weight:700; font-size:13px}
.price-strip{background:var(--tint-2); border-bottom:1px solid var(--line)}
.price-strip p{margin:0; padding:14px 0; font-size:15px; color:var(--ink-2)}
.price-strip strong{color:var(--ink); font-weight:600}
.price-strip a{color:var(--green-text); font-weight:600; margin-left:8px; white-space:nowrap}
.svc .meta ul.signs li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); top:.45em; box-shadow:0 0 0 3px var(--tint)}
.svc .meta ul.signs li{color:var(--ink)}
.svc .price-line{font-family:var(--disp); font-weight:600; font-size:17px; letter-spacing:-.02em; color:var(--ink); margin:0 0 4px}
.svc .price-sub{font-size:13.5px; color:var(--ink-3); margin:0}
.quote{border-left:3px solid var(--green); padding:2px 0 2px 16px; margin:20px 0 0; max-width:56ch}
.quote p{margin:0 0 6px; font-size:15.5px; color:var(--ink); font-style:italic}
.quote cite{font-family:var(--sans); font-weight:600; font-size:13.5px; font-style:normal; color:var(--ink-3)}
.prose{max-width:64ch}
.prose h2{margin-top:36px; font-size:clamp(22px,2.6vw,28px)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2); margin:12px 0 0}
.cta-band{background:var(--field); color:var(--field-ink); padding-block:clamp(40px,5vw,60px)}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cta-band h2{color:#fff; font-size:clamp(22px,2.8vw,30px); max-width:22ch}
.cta-band p{color:var(--field-ink-2); margin:6px 0 0; max-width:48ch}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px}
@media(max-width:840px){.contact-cards{grid-template-columns:1fr}}
.ccard{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px}
.ccard .ico{margin-bottom:14px}
.ccard h2{font-size:16px; font-weight:600; margin:0 0 6px}
.ccard p{margin:0; color:var(--ink-2); font-size:15px}
.ccard a.big{font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.split--top{align-items:start}
.shot{position:relative; border:1px dashed rgba(20,112,127,.45); border-radius:12px; aspect-ratio:4/3; background:repeating-linear-gradient(135deg,var(--hatch) 0 9px,transparent 9px 18px),var(--surface); display:flex; align-items:flex-end; padding:12px; overflow:hidden}
.shot span{font-family:var(--lbl); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:6px 9px; line-height:1.35}
.shot--portrait{aspect-ratio:4/5} .shot--wide{aspect-ratio:16/9}
/* A slot with an image in it. The badge shows only while it is a stand-in
   and disappears on its own when content/photos.json flips to "real". */
.shot--filled{display:block; border:0; border-radius:12px; overflow:hidden; background:var(--surface-2); padding:0; position:relative}
.shot--filled img{width:100%; height:100%; object-fit:cover; display:block}
.ph-badge{position:absolute; right:10px; top:10px; z-index:2; font-family:var(--lbl); font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--field-ink); background:rgba(0,31,36,.72); border-radius:980px; padding:5px 10px; backdrop-filter:blur(4px)}
.hero-photo .ph-badge{right:14px; top:14px}
/* Andy's own face and his dog: his logo art stands in, never a stranger. */
.shot--brand{display:grid; place-items:center; gap:14px; align-content:center; padding:24px}
.shot--brand .ph-emblem{width:min(46%,150px); height:auto; opacity:.9; border-radius:50%}
.shot--brand span{position:static}
.band--field .shot{background:repeating-linear-gradient(135deg,rgba(232,241,248,.08) 0 9px,transparent 9px 18px),rgba(255,255,255,.04); border-color:var(--field-line)}
.band--field .shot span{background:var(--field-deep); color:var(--field-ink-2); border-color:var(--field-line)}
.svc .meta .shot{aspect-ratio:1/1; margin:-20px -22px 16px; border-radius:11px 11px 0 0; border:0; border-bottom:1px solid var(--line)}
.prose-split{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:start}
@media(max-width:840px){.prose-split{grid-template-columns:1fr}}
.about-photo{border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -36px rgba(16,34,54,.4)}

/* =====================================================================
   Fairway, 0.7.1 (2026-10-15). Carolina blue and navy, set like a club
   program: slab headlines, ruled lines, square corners, one scorecard, one
   mowed-stripe band (the reviews), and a navy, white and Carolina trim under
   the header. Checked against Scout's anti-slop playbook: no pills or icon
   tiles for decoration, no glows, no card grids, no gradient over the photo.
   This layer sits on the rules above and only overrides them.
   ===================================================================== */
:root{
  --navy:#13294B; --navy-deep:#0C1D36; --cb:#4B9CD3; --cb-deep:#1D6599; --cb-light:#9FCDEE;
  --lbl:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --slab:"Hepta Slab",Georgia,"Times New Roman",serif;
  --r:4px;
  --stripes:repeating-linear-gradient(118deg,#4B9CD3 0 64px,#56A3D7 64px 128px);
  --trim:linear-gradient(180deg,var(--navy) 0 3px,#fff 3px 5px,var(--cb) 5px 9px);
}

/* type: slab headlines, the way a club program or a varsity letter reads */
h1,h2{font-family:var(--slab); font-weight:600; letter-spacing:-.015em; line-height:1.08}
section h2{font-size:clamp(28px,3.4vw,40px); max-width:22ch}
.eyebrow{font-family:var(--lbl); font-weight:700; font-size:12px; letter-spacing:.16em; color:var(--green-text)}
.lede{font-size:18px}

/* buttons: square-shouldered, flat */
.btn{border-radius:var(--r); box-shadow:none; padding:13px 22px}
.btn:hover{box-shadow:none; background:#3E8DC4}
.btn--lg{padding:15px 26px}
.btn--ghost{border-width:1.5px}
.btn--ghost:hover{background:rgba(75,156,211,.10)}

/* header: white, with the trim under it */
.hdr{background:color-mix(in srgb, var(--surface) 94%, transparent); color:var(--ink); border-bottom:0}
.hdr::after{content:""; position:absolute; left:0; right:0; bottom:-9px; height:9px; background:var(--trim); pointer-events:none}
.hdr .brand-name{color:var(--ink); font-family:var(--slab); letter-spacing:-.005em}
.hdr .brand-sub{color:var(--green-text); font-family:var(--lbl); font-weight:700; letter-spacing:.14em}
.hdr .mark{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--navy)}
.hdr .nav a{color:var(--ink)}
.hdr .nav a:hover{color:var(--green-text); background:none; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.menu summary{color:var(--ink); border-color:var(--line); border-radius:var(--r)}

/* hero: navy panel on the left, Andy's photo to the edge on the right */
.hero{background:var(--navy); padding:0; color:#fff}
.hero::before,.hero::after{display:none}
.hero .wrap{max-width:none; padding:0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:0; align-items:stretch; min-height:min(720px,86vh)}
.hero .wrap>div:first-child{align-self:center; padding:clamp(56px,7vw,104px) clamp(32px,4vw,64px) clamp(56px,7vw,104px) max(var(--gut), calc((100vw - var(--wrap))/2 + var(--gut)))}
.hero .eyebrow{color:var(--cb-light); margin-bottom:22px}
.hero h1{font-size:clamp(40px,5.6vw,72px); line-height:1.02; letter-spacing:-.02em; max-width:13ch}
.swash{color:inherit}
.hero .lede{color:#D2E2F0; font-size:19px; margin-top:24px; max-width:42ch}
.hero .btn--ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.trust{gap:8px 22px; margin-top:30px}
.trust li{background:none; border:0; padding:0; border-radius:0; color:#D2E2F0; font-size:14.5px}
.trust svg{color:var(--cb)}
.photo-card{position:relative; min-height:420px}
.photo-card::before{content:""; position:absolute; z-index:2; left:0; top:0; bottom:0; width:9px; inset-inline-start:0; background:linear-gradient(90deg,var(--cb) 0 5px,#fff 5px 7px,transparent 7px); filter:none; border-radius:0}
.hero .hero-photo{position:absolute; inset:0; aspect-ratio:auto; border-radius:0; box-shadow:none}
.hero .hero-photo img.ph{object-position:58% 50%}
.hero .float--a{left:33px; right:auto; bottom:28px; border-radius:var(--r); box-shadow:0 1px 0 rgba(0,0,0,.08); padding:12px 16px}
@media(max-width:840px){
  .hero .wrap{grid-template-columns:1fr; min-height:0}
  .photo-card{order:-1; min-height:0; aspect-ratio:4/3}
  .photo-card::before{top:auto; right:0; width:auto; height:9px; bottom:0; background:linear-gradient(0deg,var(--cb) 0 5px,#fff 5px 7px,transparent 7px)}
  .hero .wrap>div:first-child{padding:40px var(--gut) 48px}
  .hero .float--a{left:var(--gut); bottom:24px}
}

/* what the cart is doing: a ruled row of plain links */
.symptoms{margin:0; padding:0; background:var(--surface); border-bottom:1px solid var(--line)}
.symptoms .panel{background:none; border:0; border-radius:0; box-shadow:none; padding:22px 0 0}
.symptoms .lbl{color:var(--green-text); font-family:var(--lbl); font-weight:700; letter-spacing:.16em; margin:0 0 8px}
.symptoms .lbl::after{display:none}
.chips{gap:0}
.chips li{border-left:1px solid var(--line)}
.chips li:first-child{border-left:0}
.chips a{border:0; border-radius:0; background:none; padding:14px 16px 22px; font-weight:600; font-size:15.5px}
.chips li:first-child a{padding-left:0}
.chips a svg{display:none}
.chips a::after{content:"\2192"; font-size:16px; color:var(--cb-deep)}
.chips a:hover{background:none; transform:none; color:var(--green-text)}
@media(max-width:1000px){.chips li{border-left:0; border-top:1px solid var(--line)} .chips li:nth-child(-n+3){border-top:0} .chips a,.chips li:first-child a{padding:14px 12px 14px 0}}
@media(max-width:560px){.chips li:nth-child(3){border-top:1px solid var(--line)}}

/* the visit: a dotted route, numbered pins, a flag on the last one */
.steps{gap:28px; margin-top:52px}
.steps::before{top:30px; border-top:2px dashed var(--cb)}
.step{background:none; border:0; border-radius:0; padding:0; overflow:visible; display:flex; flex-direction:column}
.step .ico,.step-n{display:none}
.step::after{content:attr(data-n); position:relative; right:auto; top:auto; order:-1; display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background:var(--paper); border:2px solid var(--cb); font-family:var(--slab); font-size:22px; letter-spacing:0; color:var(--navy); margin-bottom:22px; box-shadow:0 0 0 8px var(--paper)}
.step:last-child::after{background:var(--navy); border-color:var(--navy); color:#fff}
.step:last-child::before{content:""; position:absolute; left:40px; top:-30px; width:28px; height:40px; background:no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 40'%3E%3Cpath d='M2.5 2v38' stroke='%2313294B' stroke-width='2.5'/%3E%3Cpath d='M4 2h20l-5.5 5.5L24 13H4z' fill='%234B9CD3'/%3E%3C/svg%3E")}
.step h3{font-size:22px; margin:0 0 8px}
.step p{font-size:16px; max-width:34ch}
@media(max-width:840px){.steps{gap:30px} .steps::before{display:block; left:29px; right:auto; top:20px; bottom:20px; border-top:0; border-left:2px dashed var(--cb)} .step{padding-left:88px; min-height:60px} .step::after{position:absolute; left:0; top:0; margin:0} .step:last-child::before{left:40px} .step h3{margin-top:2px}}

/* pricing: one scorecard, ruled like the real thing */
.prices{display:block; border:1.5px solid var(--navy); border-radius:var(--r); box-shadow:none; overflow:hidden}
.prices::before{content:"Scorecard"; display:block; background:var(--navy); color:#fff; padding:12px 22px; font:700 12px/1 var(--lbl); letter-spacing:.2em; text-transform:uppercase}
.price{display:grid; grid-template-columns:150px 1fr; grid-template-areas:"lbl lbl" "amt list" "per list"; column-gap:44px; padding:22px 22px 24px; border-top:1px solid rgba(19,41,75,.18); background:var(--surface) linear-gradient(rgba(19,41,75,.18),rgba(19,41,75,.18)) no-repeat 194px 0/1px 100%}
.prices .price:first-child{border-top:0}
.price--lead{border-right:0}
.price--lead::before,.price .pill{display:none}
.price .eyebrow{grid-area:lbl; margin:0 0 6px!important; color:var(--green-text)}
.price .amt{grid-area:amt; font-family:var(--slab); font-size:46px; letter-spacing:-.02em; color:var(--navy); margin:4px 0 2px}
.price--lead .amt{font-size:46px}
.price .per{grid-area:per}
.price ul{grid-area:list; margin:6px 0 0; align-self:start}
@media(max-width:560px){.price{grid-template-columns:1fr; grid-template-areas:"lbl" "amt" "per" "list"; background-image:none}}

/* services: a numbered list, photo beside each, ruled like a scorecard */
#services{background:var(--surface)}
.band--tint{background:var(--surface)}
.grid{counter-reset:hole; grid-template-columns:1fr 1fr; gap:0 56px; margin-top:40px}
.card{counter-increment:hole; display:grid; grid-template-columns:168px 1fr; column-gap:22px; align-content:start; padding:26px 0; background:none; border:0; border-top:1px solid var(--line); border-radius:0}
.card:hover{transform:none; box-shadow:none; border-color:var(--line)}
.card>*{grid-column:2; margin:0}
.card .shot,.card .wp-block-post-featured-image{grid-column:1; grid-row:1/span 5; aspect-ratio:4/3; border:0; border-radius:var(--r); overflow:hidden; padding:0; margin:0}
.card .shot img,.card .wp-block-post-featured-image img{width:100%; height:100%; object-fit:cover; display:block}
.card .ico{display:none}
.card::before{content:counter(hole,decimal-leading-zero); grid-column:2; font-family:var(--slab); font-weight:600; font-size:15px; color:var(--cb-deep); line-height:1; margin-bottom:8px}
.card .tag{margin-bottom:6px}
.card h3{font-size:20px; margin-bottom:6px}
.card p{font-size:15.5px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
@media(max-width:560px){.card{grid-template-columns:112px 1fr; column-gap:16px}}

/* about: square portrait with an offset block behind it */
#about .split>.shot{border-radius:var(--r); overflow:visible; box-shadow:14px 14px 0 var(--tint)}
#about .split>.shot img{border-radius:var(--r)}
.shot--filled,.about-photo{border-radius:var(--r)}

/* reviews: the one mowed-stripe band */
.band--stripes{background:var(--stripes); color:var(--navy-deep)}
.band--stripes .eyebrow,.band--stripes h2{color:var(--navy-deep)}
.band--stripes .reviews{columns:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px 40px}
.band--stripes .review{background:none; border:0; border-top:2px solid var(--navy); border-radius:0; box-shadow:none; padding:18px 0 0; margin:0}
.band--stripes .review::before,.band--stripes .review .av{display:none}
.band--stripes .review .stars{color:var(--navy)}
.band--stripes .review p{color:var(--navy-deep); font-size:16.5px}
.band--stripes .review cite{border-top:0; padding-top:0; color:var(--navy-deep)}
.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review){grid-column:1/-1; border-top:0; padding:0 0 18px}
.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review) p{font-family:var(--slab); font-weight:600; font-size:clamp(23px,3vw,34px); line-height:1.22; letter-spacing:-.01em; max-width:34ch}
.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review) cite{font-family:var(--lbl); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px}
.band--stripes .sources a{background:none; border:0; border-radius:0; padding:0; color:var(--navy-deep); text-decoration:underline; text-underline-offset:4px}
.band--stripes .sources .stars{color:var(--navy-deep)}
.band--stripes .sources{gap:24px}
@media(max-width:640px){.band--stripes .reviews{grid-template-columns:1fr}}

/* service area: a ruled two-column list */
.areas{display:grid; grid-template-columns:1fr 1fr; gap:0 32px}
.areas li{border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; padding:12px 0; font-size:16px; font-weight:600}
.areas li::before{box-shadow:none}
.map-card{background:var(--surface); padding:0; border:1px solid var(--line); border-radius:var(--r); box-shadow:none}
.map-card::before{display:none}
.gmap{border-radius:0}
.map-note{margin:10px 12px}
.map-note a{color:var(--green-text)}

/* questions */
.faq summary{font-family:var(--disp); font-size:18px; padding-block:18px}
.faq summary::after{color:var(--cb-deep)}

/* contact */
.band--field{background:var(--navy)}
.form{border-radius:var(--r)}
.row input,.row textarea{border-radius:var(--r)}

/* footer: trim on top, the seal on the right */
.ftr{border-top:0; background:var(--navy-deep)}
.ftr::before{height:9px; background:linear-gradient(180deg,var(--cb) 0 4px,#fff 4px 6px,var(--navy) 6px 9px)}
.ftr .brand-name{font-family:var(--slab)}
.ftr .brand-sub{font-family:var(--lbl); font-weight:700; letter-spacing:.14em}
.seal{position:absolute; right:clamp(24px,6vw,80px); top:52px; width:150px; height:150px; color:var(--cb); pointer-events:none}
.seal svg{position:absolute; inset:0; width:100%; height:100%}
.seal text{font-family:var(--lbl); font-weight:700; font-size:11px; letter-spacing:.24em; text-transform:uppercase; fill:var(--cb-light)}
.seal img{position:absolute; left:25%; top:25%; width:50%; height:50%; border-radius:50%}
.ftr .cols{padding-right:190px}
.social a{border:0; padding:0; border-radius:0; text-decoration:underline; text-underline-offset:4px}
.social{gap:16px}
@media(max-width:900px){.seal{display:none} .ftr .cols{padding-right:0}}

/* inner pages */
.page-hero{background:var(--navy); box-shadow:inset 0 -9px 0 var(--cb), inset 0 -11px 0 #fff}
.page-hero::before{display:none}
.page-hero .eyebrow{color:var(--cb-light)}
.page-hero h1{font-size:clamp(34px,4.6vw,54px); letter-spacing:-.02em; max-width:20ch}
.page-hero .btn--ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.cta-band{background:var(--cb); color:var(--navy-deep)}
.cta-band h2,.cta-band p{color:var(--navy-deep)}
.cta-band .btn{background:var(--navy); color:#fff}
.cta-band .btn:hover{background:var(--navy-deep)}
.price-strip{background:var(--tint-2)}
.svc .ico,.ccard .ico{display:none}
.svc .meta,.ccard,.qa-item,.review,.step{border-radius:var(--r)}
.svc .meta{box-shadow:none}
.svc h2{font-size:clamp(24px,2.8vw,32px)}
.qa-item h2,.ccard h2{font-family:var(--disp)}
.ccard{border-top:3px solid var(--navy)}
.callbar{background:var(--cb); color:var(--navy-deep)}
/* pass 2 */
.hero h1{font-size:clamp(40px,4.9vw,64px); max-width:15ch}
.chips{grid-template-columns:repeat(3,1fr)}
.chips li{border-left:1px solid var(--line); border-top:1px solid var(--line)}
.chips li:nth-child(3n+1){border-left:0}
.chips li:nth-child(-n+3){border-top:0}
.chips a,.chips li:first-child a{padding:14px 18px}
.chips li:nth-child(3n+1) a{padding-left:0}
.symptoms .panel{padding:24px 0 10px}
@media(max-width:560px){.chips{grid-template-columns:1fr 1fr} .chips li{border-left:0} .chips li:nth-child(3){border-top:1px solid var(--line)} .chips a,.chips li:nth-child(3n+1) a{padding:13px 10px 13px 0}}
.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review) p{font-size:clamp(20px,2.4vw,28px); line-height:1.3}
/* pass 3: reviews read as quotes everywhere, not cards */
.reviews{gap:8px 40px}
.review{background:none; border:0; border-top:2px solid var(--navy); border-radius:0; box-shadow:none; padding:18px 0 22px; margin:0 0 8px}
.review::before,.review .av{display:none}
.review .stars{color:var(--navy)}
.review p{color:var(--ink)}
.review cite{border-top:0; padding-top:0}
.sources a{background:none; border:0; border-radius:0; padding:0; color:var(--ink); text-decoration:underline; text-underline-offset:4px}
.sources .stars{color:var(--ink)}
.sources{gap:24px}
.ftr .btn{color:var(--navy-deep)}
.ftr .btn:hover{text-decoration:none}
.svc h2{margin-bottom:12px}
@media(max-width:520px){.hdr .brand-name{font-size:14.5px} .hdr .wrap{gap:10px} .hdr .mark{width:38px; height:38px}}

/* =====================================================================
   0.7.2: the course details. The problems list previews a real job photo
   as you point at each line, a little cart drives the route to the flag as
   the section scrolls past, towns get flags, and the FAQ toggles are golf
   balls. All of it is CSS; nothing here is needed to read the page.
   ===================================================================== */
.symptoms{padding:clamp(40px,5vw,64px) 0}
.symptoms .panel{padding:0}
.symptoms .lbl{margin-bottom:18px}
.chips{display:block; position:relative; padding-right:calc(42% + 48px); min-height:430px; counter-reset:none}
.chips li{border:0; border-top:1px solid var(--line)}
.chips li:last-child{border-bottom:1px solid var(--line)}
.chips a,.chips li:first-child a,.chips li:nth-child(3n+1) a{display:flex; align-items:baseline; gap:22px; padding:16px 0; font-family:var(--slab); font-weight:600; font-size:clamp(22px,2.4vw,32px); line-height:1.15; letter-spacing:-.015em; color:var(--ink); transition:color .2s ease, padding .25s ease}
.chips .n{flex:none; width:26px; font-family:var(--lbl); font-weight:700; font-size:12.5px; letter-spacing:.1em; color:var(--cb-deep); transform:translateY(-.3em)}
.chips a::after{content:"\2192"; margin-left:auto; font-family:var(--lbl); font-size:22px; color:var(--cb-deep); opacity:.35; transition:opacity .2s ease, transform .25s ease}
.chips a img{position:absolute; right:0; top:0; width:42%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); opacity:0; transform:scale(1.04); transition:opacity .35s ease, transform .6s ease; box-shadow:12px 12px 0 var(--tint)}
.chips li:first-child a img{opacity:1; transform:none}
.chips:has(li:not(:first-child) a:is(:hover,:focus-visible)) li:first-child a img{opacity:0}
.chips a:is(:hover,:focus-visible){color:var(--cb-deep); padding-left:10px}
.chips a:is(:hover,:focus-visible)::after{opacity:1; transform:translateX(4px)}
.chips a:is(:hover,:focus-visible) img{opacity:1; transform:none; z-index:1}
@media(max-width:900px){
  .chips{padding-right:0; min-height:0}
  .chips a,.chips li:first-child a,.chips li:nth-child(3n+1) a{display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:16px; padding:12px 0; font-size:20px}
  .chips a img,.chips li:first-child a img{position:static; width:76px; opacity:1; transform:none; box-shadow:none; grid-row:1; grid-column:1}
  .chips .n{display:none}
  .chips a:is(:hover,:focus-visible){padding-left:0}
}

/* the visit: tee, fairway, green, and a cart that drives it */
.step:nth-of-type(1) h3::before,.step:nth-of-type(2) h3::before,.step:nth-of-type(3) h3::before{display:block; font-family:var(--lbl); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cb-deep); margin-bottom:8px}
.step:nth-of-type(1) h3::before{content:"The tee"}
.step:nth-of-type(2) h3::before{content:"The fairway"}
.step:nth-of-type(3) h3::before{content:"The green"}
.steps .cart{position:absolute; z-index:2; top:-6px; left:calc(60px + 3%); width:58px; height:38px; pointer-events:none; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 38'%3E%3Crect x='9' y='2' width='38' height='4' rx='2' fill='%234B9CD3'/%3E%3Cpath d='M13 6v14M43 6v12' stroke='%2313294B' stroke-width='2.2'/%3E%3Cpath d='M17 14h12v8H17z' fill='%234B9CD3'/%3E%3Cpath d='M5 21h38l7-4h3v10a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3z' fill='%2313294B'/%3E%3Ccircle cx='14' cy='31' r='5.5' fill='%230C1D36' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='44' cy='31' r='5.5' fill='%230C1D36' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E")}
@supports (animation-timeline: view()){
  .steps .cart{animation:drive linear both; animation-timeline:view(); animation-range:entry 30% cover 55%}
  @keyframes drive{from{left:calc(60px + 3%)} to{left:calc(66.6% - 76px)}}
}
@media(max-width:840px){.steps .cart{display:none}}

/* service area: a flag for each town */
.areas li::before{width:12px; height:16px; border-radius:0; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M1.5 1v15' stroke='%2313294B' stroke-width='1.6'/%3E%3Cpath d='M2.4 1H11L8.6 3.6 11 6.2H2.4z' fill='%234B9CD3'/%3E%3C/svg%3E"); box-shadow:none}

/* questions: the toggle is a golf ball */
.faq summary::after{content:"+"; width:28px; height:28px; top:15px; right:0; border-radius:50%; display:grid; place-items:center; font:600 18px/1 var(--lbl); color:var(--navy); background:#fff radial-gradient(circle at 30% 30%,rgba(19,41,75,.10) 1.4px,transparent 1.6px) 0 0/6px 6px; box-shadow:inset -3px -3px 6px rgba(19,41,75,.12), 0 0 0 1px rgba(19,41,75,.18)}
.faq details[open] summary::after{content:"\2013"}

/* scorecard: club header, column heads, numbered holes, scorer and attest lines */
.prices{border:3px double var(--navy); border-radius:6px; background:#fff; counter-reset:hole}
.prices::before{content:none; display:none}
.sc-top{display:flex; align-items:center; gap:12px; background:var(--navy); color:#fff; padding:12px 18px}
.sc-top img{width:36px; height:36px; border-radius:50%; box-shadow:0 0 0 2px #fff}
.sc-club{font:600 17px/1.1 var(--slab)}
.sc-title{margin-left:auto; font:700 11.5px/1 var(--lbl); letter-spacing:.22em; text-transform:uppercase; color:var(--cb-light)}
.sc-cols{display:grid; grid-template-columns:60px 170px 1fr; background:var(--cb); color:var(--navy-deep); font:700 11px/1 var(--lbl); letter-spacing:.16em; text-transform:uppercase}
.sc-cols span{padding:9px 14px; border-left:1px solid rgba(19,41,75,.28)}
.sc-cols span:first-child{border-left:0; text-align:center; padding-inline:0}
.price,.price--lead{counter-increment:hole; display:grid; grid-template-columns:60px 170px 1fr; grid-template-areas:"h lbl lbl" "h amt list" "h per list"; column-gap:0; padding:0; border-top:1px solid rgba(19,41,75,.22); background:#fff}
.prices .price:first-child,.sc-cols+.price{border-top:0}
.price+.price{background:#F4F8FC}
.price::before,.price--lead::before{content:counter(hole); display:grid; position:static; height:auto; grid-area:h; place-items:center; font:600 20px/1 var(--slab); color:var(--navy); border-right:1px solid rgba(19,41,75,.22); background:radial-gradient(circle,transparent 15px,var(--navy) 15.5px 17px,transparent 17.5px)}
.price .eyebrow{grid-area:lbl; padding:16px 14px 0; margin:0!important}
.price .amt{grid-area:amt; padding:6px 14px 0; margin:0; border-right:1px solid rgba(19,41,75,.22); font-size:44px}
.price .per{grid-area:per; padding:4px 14px 18px; border-right:1px solid rgba(19,41,75,.22)}
.price ul{grid-area:list; padding:8px 18px 18px; margin:0}
.sc-foot{display:grid; grid-template-columns:auto 1fr auto 1fr; gap:10px 12px; align-items:end; padding:14px 18px 16px; border-top:1.5px solid var(--navy); font:700 10.5px/1 var(--lbl); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.sc-foot i{display:block; height:16px; border-bottom:1px solid rgba(19,41,75,.45)}
@media(max-width:560px){
  .sc-cols{display:none}
  .price,.price--lead{grid-template-columns:52px 1fr; grid-template-areas:"h lbl" "h amt" "h per" "h list"}
  .price .amt,.price .per{border-right:0}
  .price ul{padding:0 14px 18px}
  .sc-club{font-size:15px}
}

/* services: each one a hole, with the pin and its flag */
.card{position:relative; grid-template-columns:58px 1fr 150px; column-gap:22px}
.card:not(:has(.shot img,.wp-block-post-featured-image img)){grid-template-columns:58px 1fr}
.card .shot,.card .wp-block-post-featured-image{grid-column:3; grid-row:1/span 5}
.card::before{content:counter(hole); grid-column:1; grid-row:1/span 5; align-self:start; display:grid; place-items:center; width:52px; height:52px; margin:0; border-radius:50%; background:var(--navy); color:#fff; font:600 20px/1 var(--slab); transition:background .2s ease}
.card::after{content:""; position:absolute; left:38px; top:12px; width:16px; height:22px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M2 1v21' stroke='%2313294B' stroke-width='2'/%3E%3Cpath d='M3 1h12l-3.4 3.6L15 8.2H3z' fill='%234B9CD3'/%3E%3C/svg%3E")}
.card:hover::before{background:var(--cb); color:var(--navy-deep)}
.card .tag{margin-top:2px}
@media(max-width:560px){.card,.card:not(:has(.shot img,.wp-block-post-featured-image img)){grid-template-columns:48px 1fr; column-gap:16px} .card::before{width:44px; height:44px; font-size:18px} .card::after{left:30px} .card .shot,.card .wp-block-post-featured-image{grid-column:2; grid-row:auto; margin-top:14px; width:100%}}

/* service area: the course map */
.map-card{border:3px double var(--navy); border-radius:6px; overflow:hidden}
.map-card::before{content:"Course map \00B7  Wake County"; display:block; position:static; inset:auto; background:var(--navy); color:#fff; padding:11px 16px; font:700 11.5px/1 var(--lbl); letter-spacing:.2em; text-transform:uppercase}
.areas{counter-reset:town}
.areas li{counter-increment:town; gap:10px}
.areas li::after{content:"No. " counter(town); margin-left:auto; font:700 10.5px/1 var(--lbl); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

/* reviews from Scout Reviews, in the same quote style */
.andys-reviews--scout{--sr-radius:0; --sr-star:var(--navy); --sr-star-empty:rgba(19,41,75,.25); --sr-line:var(--navy); --sr-muted:var(--navy-deep); --sr-faint:var(--navy-deep); --sr-link:var(--navy-deep); margin-top:32px}
.andys-reviews--scout .scout-reviews__list{display:grid; grid-template-columns:1fr 1fr; gap:8px 40px}
.andys-reviews--scout .scout-review{background:none; border:0; border-top:2px solid var(--navy); border-radius:0; box-shadow:none; padding:18px 0 22px; color:var(--navy-deep)}
.andys-reviews--scout .scout-review:first-child{grid-column:1/-1; border-top:0; padding-top:0}
.andys-reviews--scout .scout-review:first-child .scout-review__text{font-family:var(--slab); font-weight:600; font-size:clamp(20px,2.4vw,28px); line-height:1.3}
.andys-reviews--scout .scout-review__avatar{display:none}
.andys-reviews--scout .scout-review__badge{font:700 11px/1 var(--lbl); letter-spacing:.14em; text-transform:uppercase}
.andys-reviews--scout .scout-review__link{text-decoration:underline; text-underline-offset:4px}
@media(max-width:640px){.andys-reviews--scout .scout-reviews__list{grid-template-columns:1fr}}

/* header: phone first */
.hdr .wrap{min-height:76px}
@media(max-width:900px){
  .hdr .wrap{min-height:66px; gap:10px}
  .hdr .btn--sm{width:46px; height:46px; padding:0; margin-left:auto}
  .hdr .btn--sm svg{width:20px; height:20px}
  .menu summary{width:46px; height:46px; padding:0; font-size:0; border:1.5px solid var(--navy); display:grid; place-items:center; background:linear-gradient(var(--navy),var(--navy)) center 15px/20px 2px no-repeat, linear-gradient(var(--navy),var(--navy)) center 22px/20px 2px no-repeat, linear-gradient(var(--navy),var(--navy)) center 29px/20px 2px no-repeat}
  .menu[open] summary{background:var(--navy); color:#fff; font-size:22px}
  .menu[open] summary::before{content:"\00D7"; color:#fff; font:400 28px/1 var(--sans)}
  .menu-list{position:fixed; left:0; right:0; top:75px; min-width:0; border:0; border-radius:0; padding:8px var(--gut) 18px; background:var(--navy); box-shadow:0 30px 40px -20px rgba(0,0,0,.5); border-bottom:9px solid var(--cb)}
  .menu-list a{color:#fff; font:600 22px/1.2 var(--slab); padding:14px 0; border-radius:0; border-bottom:1px solid rgba(255,255,255,.14)}
  .menu-list a:last-child{border-bottom:0; color:var(--cb-light)}
  .menu-list a:hover{background:none; color:var(--cb-light)}
}
@media(max-width:520px){.hdr .brand-sub{display:none} .hdr .brand-name{font-size:16px; white-space:normal; line-height:1.05; max-width:13ch}}

/* footer: the clubhouse band with the seal and the number, then the columns */
.ftr{padding-block:0 108px}
.ftr-top{border-bottom:1px solid var(--field-line); padding:44px 0}
.ftr-top .wrap{display:flex; align-items:center; gap:clamp(24px,4vw,48px)}
.ftr .seal{position:relative; right:auto; top:auto; flex:none; width:140px; height:140px}
.ftr-call{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px}
.ftr-kicker{flex-basis:100%; margin:0; font:700 12px/1 var(--lbl); letter-spacing:.18em; text-transform:uppercase; color:var(--cb-light)}
.ftr-big{font:600 clamp(36px,5.4vw,60px)/1 var(--slab); letter-spacing:-.01em; color:#fff!important; text-decoration:none!important}
.ftr .cols{padding-right:0; padding-top:40px; grid-template-columns:1.4fr 1fr 1fr 1.1fr}
.ftr .brand .mark{display:none}
.ftr .contact-list a,.ftr .ftr-email{overflow-wrap:normal; word-break:normal}
.ftr .phone{display:none}
.ftr .contact-list li:has(.phone){display:none}
@media(max-width:900px){
  .ftr-top{padding:36px 0 32px}
  .ftr-top .wrap{flex-direction:column; text-align:center}
  .ftr .seal{display:block; width:118px; height:118px}
  .ftr-call{justify-content:center}
  .ftr .cols{grid-template-columns:1fr 1fr; gap:28px 24px}
  .ftr .cols>div:first-child{grid-column:1/-1}
  .ftr .cols>div:last-child{grid-column:1/-1}
}
@media(max-width:560px){.ftr .cols{grid-template-columns:1fr 1fr} .ftr-call .btn{width:100%}}
.legal{flex-wrap:wrap}
@media(max-width:560px){.legal{flex-direction:column}}

.chips li,.chips li:nth-child(-n+3){border-top:1px solid var(--line); border-left:0}
.areas li::after{flex:none; white-space:nowrap}
@media(max-width:560px){.areas{grid-template-columns:1fr}}

/* =====================================================================
   0.7.4: Clubhouse. Joy picked hero A from three options. Andy's best photo
   is 1360px wide, so it runs near its real size as a framed print on soft
   mowed stripes instead of stretching edge to edge. The header carries his
   emblem as a club crest hanging over the trim; the footer is ruled like the
   scorecard, with the seal hanging over its top edge.
   ===================================================================== */
.hero{background:repeating-linear-gradient(118deg,#F3F8FC 0 64px,#EAF3FA 64px 128px); color:var(--ink); padding:0}
.hero::before,.hero::after{display:none}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; max-width:var(--wrap); min-height:0; padding:88px var(--gut) 92px}
.hero .wrap>div:first-child{max-width:none; padding:0; background:none; outline:0; box-shadow:none; border-radius:0; align-self:center}
.hero .eyebrow{color:var(--cb-deep); margin-bottom:18px}
.hero h1{color:var(--navy); font-size:clamp(40px,5vw,66px); max-width:none}
.hero .lede{color:var(--ink-2); font-size:18px; margin-top:20px}
.hero .btn--ghost{color:var(--navy); border-color:var(--navy)}
.hero .btn--ghost:hover{background:rgba(19,41,75,.06)}
.trust{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:34px 0 0; border-top:2px solid var(--navy)}
.trust li{display:block; padding:14px 18px 0 0; color:var(--navy); font-size:15px; border:0; background:none}
.trust li+li{padding-left:18px; border-left:1px solid rgba(19,41,75,.25)}
.trust li::before{display:block; margin-bottom:6px; font:700 10.5px/1 var(--lbl); letter-spacing:.2em; text-transform:uppercase; color:var(--cb-deep)}
.trust li:first-child::before{content:"Training"}
.trust li:nth-child(2)::before{content:"Service call"}
.trust svg{display:none}
.hero .photo-card{position:relative; inset:auto; min-height:0; margin:0; background:#fff; padding:14px 14px 0; box-shadow:0 30px 60px -28px rgba(12,29,54,.45); transform:rotate(1.5deg)}
.hero .photo-card::before,.hero .photo-card::after{display:none}
.hero .hero-photo{position:relative; inset:auto; aspect-ratio:4/3; overflow:hidden; border-radius:0; box-shadow:none}
.hero .hero-photo img.ph{object-position:60% 55%}
.hero .photo-card .float--a{position:static; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; box-shadow:none; border:0; border-radius:0; padding:14px 4px 16px; background:none}
.hero .photo-card .float--a .k{color:var(--cb-deep)}
@media(max-width:840px){
  .hero .wrap{display:flex; flex-direction:column; gap:28px; padding:56px var(--gut) 48px}
  .hero .photo-card{order:-1; transform:none}
}

/* header: the crest */
.hdr .wrap{min-height:80px}
.hdr .brand{gap:14px}
.hdr .mark{width:84px; height:84px; margin:0 0 -44px; position:relative; z-index:3; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--navy), 0 14px 24px -10px rgba(12,29,54,.45)}
.hdr .brand-name{font-size:19px}
.hdr .brand-sub{font-size:10.5px; margin-top:3px}
.hdr .nav{gap:2px}
.hdr .nav a{font:700 12.5px/1 var(--lbl); letter-spacing:.14em; text-transform:uppercase; color:var(--navy); padding:10px 12px}
.hdr .nav a:hover{text-decoration:none; color:var(--navy); box-shadow:inset 0 -3px 0 var(--cb)}
@media(max-width:900px){.hdr .mark{width:58px; height:58px; margin-bottom:-24px} .hdr .wrap{min-height:68px}}
@media(max-width:520px){.hdr .mark{width:52px; height:52px; margin-bottom:-22px}}

/* footer: ruled like the scorecard, the seal hanging over the top */
.ftr{overflow:visible; margin-top:70px; padding-block:0 0}
.ftr::before{height:9px}
.ftr-top{border:0; padding:0 0 36px}
.ftr-top .wrap{flex-direction:column; text-align:center; gap:14px}
.ftr .seal{display:block; width:150px; height:150px; margin-top:-75px; border-radius:50%; background:var(--navy-deep); box-shadow:0 0 0 6px var(--navy-deep)}
.ftr-call{flex-direction:column; justify-content:center; gap:12px}
.ftr-kicker{flex-basis:auto}
.ftr .cols{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:0; padding:0; border:1px solid var(--field-line); border-radius:4px}
.ftr .cols>div{padding:0 22px 24px; border-left:1px solid var(--field-line)}
.ftr .cols>div:first-child{border-left:0; padding-top:22px}
.ftr h2.ftr-h{margin:0 -22px 18px; padding:11px 22px; background:var(--cb); color:var(--navy-deep); letter-spacing:.18em}
.ftr .cols>div:first-child .brand{margin-bottom:12px}
.legal{margin-top:36px; padding:14px max(var(--gut), calc((100vw - var(--wrap))/2 + var(--gut))) 18px; margin-inline:calc(50% - 50vw); border-top:0; background:repeating-linear-gradient(118deg,#4B9CD3 0 64px,#56A3D7 64px 128px); color:var(--navy-deep)}
.legal a{color:var(--navy-deep); text-decoration:underline}
.ftr>.wrap{padding-bottom:0}
@media(max-width:900px){
  .ftr .cols{grid-template-columns:1fr 1fr}
  .ftr .cols>div{border-left:0; border-top:1px solid var(--field-line)}
  .ftr .cols>div:nth-child(3){border-left:1px solid var(--field-line)}
  .ftr .cols>div:first-child,.ftr .cols>div:last-child{grid-column:1/-1}
  .ftr .cols>div:first-child{border-top:0}
  .ftr .seal{width:120px; height:120px; margin-top:-60px}
  .legal{padding-bottom:96px}
}
.ftr{margin-top:0}
.ftr h2.ftr-h{display:block}
.hero .photo-card{aspect-ratio:auto}
@media(max-width:840px){.hero .photo-card{aspect-ratio:auto}}
.ftr h2.ftr-h{max-width:none}

/* =====================================================================
   0.7.5: reviews as a leaderboard. Joy: "this section is THE WORST". The
   stripes made long text hard to read and the right half sat empty. Now:
   navy field, a white scoreboard with the 5.0 on the left, and each review
   as a small pinned scorecard on the right. Every quote stays verbatim.
   ===================================================================== */
.band--stripes{background:var(--navy-deep) repeating-linear-gradient(118deg,rgba(75,156,211,.07) 0 64px,transparent 64px 128px); color:#fff}
.band--stripes .eyebrow{color:var(--cb-light)}
.band--stripes .eyebrow::before{border-color:var(--cb-light)}
.band--stripes h2{color:#fff; font-size:clamp(26px,2.8vw,36px)}
.band--stripes>.wrap{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); column-gap:clamp(32px,5vw,72px); align-items:start}
.band--stripes>.wrap>*{grid-column:1}
.band--stripes>.wrap>:is(.reviews,.andys-reviews){grid-column:2; grid-row:1/span 6; margin:0}
.board{display:grid; justify-items:start; gap:6px; margin-top:30px; padding:22px 26px 24px; background:#fff; color:var(--navy); border-radius:4px; outline:2px solid var(--navy); outline-offset:-8px; max-width:320px}
.board-k{font:700 11px/1 var(--lbl); letter-spacing:.22em; text-transform:uppercase; color:var(--cb-deep)}
.board-score{font:600 92px/1 var(--slab); letter-spacing:-.03em}
.board-stars{color:var(--star); font-size:22px; letter-spacing:4px}
.board-sub{font-size:14.5px; color:var(--ink-2)}
.band--stripes .sources{display:grid; gap:12px; margin-top:24px}
.band--stripes .sources a{color:#fff}
.band--stripes .sources .stars{color:var(--star)}
/* each review is a pinned scorecard */
.band--stripes .reviews{display:grid; grid-template-columns:1fr; gap:0; columns:auto}
.band--stripes .review,.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review){display:flex; flex-direction:column; grid-column:auto; background:#fff; color:var(--ink); border:0; border-radius:4px; padding:0 26px 22px; margin:0 0 -6px; box-shadow:0 22px 40px -20px rgba(0,0,0,.6); position:relative}
.band--stripes .reviews>:nth-child(odd) .review,.band--stripes .reviews>.review:nth-child(odd){transform:rotate(-.8deg); margin-right:28px}
.band--stripes .reviews>:nth-child(even) .review,.band--stripes .reviews>.review:nth-child(even){transform:rotate(.7deg); margin-left:28px}
.band--stripes .review+.review,.band--stripes .reviews>li+li{margin-top:18px}
.band--stripes .review cite,.band--stripes .review .cite,.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review) cite{order:-2; display:flex; gap:6px; align-items:center; margin:0 -26px 14px; padding:11px 26px; background:var(--cb); color:var(--navy-deep); font:700 12px/1.2 var(--lbl); letter-spacing:.14em; text-transform:uppercase; border:0; border-radius:4px 4px 0 0}
.band--stripes .review .stars{order:-1; color:var(--star); font-size:16px; letter-spacing:3px; margin-bottom:8px}
.band--stripes .review p,.band--stripes :is(.reviews>.review:first-child,.reviews>li:first-child>.review) p,.band--stripes .review .wp-block-post-content p{margin:0; font:400 16px/28px var(--sans); color:var(--ink); max-width:none; letter-spacing:0; background:repeating-linear-gradient(transparent 0 27px,rgba(19,41,75,.09) 27px 28px)}
.band--stripes .reviews>:first-child .review p,.band--stripes .reviews>.review:first-child p{font:600 19px/30px var(--slab); background:repeating-linear-gradient(transparent 0 29px,rgba(19,41,75,.09) 29px 30px)}
.band--stripes .review .av{display:none}
/* the same scorecards when the reviews come from Scout Reviews */
.band--stripes .andys-reviews--scout .scout-reviews__list{grid-template-columns:1fr; gap:18px}
.band--stripes .andys-reviews--scout .scout-review{background:#fff; color:var(--ink); border:0; border-radius:4px; padding:0 26px 22px; box-shadow:0 22px 40px -20px rgba(0,0,0,.6); grid-column:auto}
.band--stripes .andys-reviews--scout .scout-review:nth-child(odd){transform:rotate(-.8deg); margin-right:28px}
.band--stripes .andys-reviews--scout .scout-review:nth-child(even){transform:rotate(.7deg); margin-left:28px}
.band--stripes .andys-reviews--scout .scout-review__top{margin:0 -26px 14px; padding:11px 26px; background:var(--cb); color:var(--navy-deep)}
.band--stripes .andys-reviews--scout .scout-review__text,.band--stripes .andys-reviews--scout .scout-review:first-child .scout-review__text{font:400 16px/28px var(--sans); color:var(--ink); background:repeating-linear-gradient(transparent 0 27px,rgba(19,41,75,.09) 27px 28px)}
.band--stripes .andys-reviews--scout{--sr-star:var(--star); --sr-link:var(--cb-deep); --sr-muted:var(--ink-2); --sr-faint:var(--ink-3)}
@media(max-width:900px){
  .band--stripes>.wrap{grid-template-columns:1fr}
  .band--stripes>.wrap>:is(.reviews,.andys-reviews){grid-column:1; grid-row:auto; margin-top:32px}
  .board{max-width:none; width:100%; grid-template-columns:auto 1fr; align-items:center; column-gap:18px}
  .board-k{grid-column:1/-1}
  .board-score{grid-row:2/span 2; font-size:72px}
  .band--stripes .reviews>* .review,.band--stripes .reviews>.review,.band--stripes .andys-reviews--scout .scout-review{transform:none!important; margin-left:0!important; margin-right:0!important}
  .band--stripes .sources{order:9}
}

/* 0.7.10: a call line under the services, for the visitor who cannot tell which problem is theirs. */
.svc-call{margin:28px 0 10px; font-size:18px; color:var(--ink)}
.svc-call a{color:var(--green-text); font-weight:700; white-space:nowrap}
/* 0.7.10: a third ledger cell, free advice. Three across on wide screens; on
   phones the third runs full width under a rule, with no stray left border. */
.trust{grid-template-columns:repeat(3,1fr)}
.trust li:nth-child(3)::before{content:"Advice"}
@media(max-width:600px){
  .trust{grid-template-columns:1fr 1fr}
  .trust li:nth-child(3){grid-column:1/-1; padding-left:0; border-left:0; margin-top:14px; border-top:1px solid rgba(19,41,75,.25)}
}
/* 0.7.12: the last headings and numbers still set in Instrument Sans (step and
   service titles, FAQ questions, footer phone, contact cards) move to the
   Hepta Slab the rest of the site uses. One less font file on every page. */
:root{--disp:"Hepta Slab",Georgia,"Times New Roman",serif}
h3,.faq summary{letter-spacing:-.01em}