:root{color-scheme:light;--navy:#142b3d;--ink:#172b38;--muted:#506471;--gold:#f3cc72;--accent:#795210;--line:#d8ddd9;--surface:#fffdf8;font-family:system-ui,sans-serif;background:#f0f4f3;color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 85% 0,#dae8e5 0,transparent 42rem),#f0f4f3}
header,main{width:min(100% - clamp(1.25rem,4vw,4rem),96rem);margin-inline:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 0}
.brand{flex:0 1 55%;min-width:0}
.brand img{display:block;width:100%;height:auto}
.offer-language{display:inline-flex;align-items:center;gap:.55rem;min-width:0}
select{max-width:min(28vw,14rem);min-height:44px;border:0;background:transparent;color:var(--ink);padding:.35rem 0;font:inherit}
a{color:#245964;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,summary:focus-visible,.traffic-table:focus-visible{outline:2px solid #2f6870;outline-offset:4px}
select:focus-visible{outline:2px solid #2f6870;outline-offset:4px}
main{padding-block:1.35rem 4rem}
article{margin-top:1.5rem;border:1px solid var(--line);border-radius:1.3rem;background:var(--surface);padding:clamp(1.1rem,4vw,3.75rem);font-size:clamp(1.125rem,calc(1rem + .4vw),1.375rem);overflow-wrap:anywhere}
.hero{max-width:64rem}
.eyebrow{color:var(--accent);letter-spacing:.09em;font-size:.88rem;font-weight:700}
h1,h2,h3{font-family:Georgia,serif;line-height:1.1;margin:.25em 0 .5em}
h1{font-size:clamp(2.1rem,4.5vw,4.25rem);text-wrap:balance}
.hero-subtitle{display:block;margin-top:.25em;font-size:.78em;color:#325460}
.hero-tagline{margin:0 0 1.5rem;color:#325460;--step:clamp(.2rem,1.2vw,.9rem)}
.hero-tagline:not([hidden]){display:grid;grid-template-columns:max-content minmax(0,1fr);line-height:1.6}
.hero-tagline>span{grid-column:2}
.hero-tagline>:nth-child(2){grid-row:2}
.hero-tagline>:nth-child(3){grid-row:3;margin-inline-start:var(--step)}
.hero-tagline>:nth-child(4){grid-row:4;margin-inline-start:calc(2 * var(--step))}
h2{font-size:clamp(1.55rem,3vw,2.5rem)}
h3{font-size:1.4rem}
p,li{line-height:1.6}
p{margin:.55em 0}
.story,.closing{max-width:78ch}
.story p{margin-block:0 .9em}
.story h2{margin-block:1.15em .5em}
.closing address{font-style:normal;line-height:1.65}
.intro{font-size:clamp(1.35rem,2.45vw,1.8rem);color:var(--navy)}
.story-brand{white-space:nowrap;font-weight:750}
.story-history .story-brand:last-of-type{margin-inline-start:.15em}
.terms,.locale-note{padding:1rem 1.3rem;border:1px solid var(--line);border-radius:.85rem;background:#f3f7f6}
.terms strong{display:block;margin-top:.3em;color:var(--navy);font-size:clamp(2.3rem,5vw,4rem);line-height:1.05}
.locale-note{margin-top:1.25rem}
.terms{max-width:76ch;border-color:#e6c980;border-inline-start:5px solid #b9822c;background:linear-gradient(110deg,#fff1cb,#fff9ed);padding:clamp(1rem,3vw,1.8rem)}
#dates{margin-top:0;color:var(--accent);font-weight:800;font-size:clamp(1.1rem,2.3vw,1.55rem);line-height:1.3}
.traffic{max-width:68rem;border-block:1px solid var(--line);padding-block:clamp(1.1rem,3vw,2rem)}
.traffic h2{margin-top:0}
#traffic-period{color:var(--muted);font-size:.93em}
.traffic-table{max-width:100%;overflow-x:auto;margin-top:1rem}
.traffic table{width:100%;min-width:38rem;border-collapse:collapse;font-size:.82em}
.traffic th,.traffic td{padding:.7em .65em;border-bottom:1px solid var(--line)}
.traffic thead th{vertical-align:bottom}
.traffic th{text-align:start}
.traffic thead th:not(:first-child){text-align:end}
.traffic tbody th{font-weight:400}
.traffic td{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.traffic tfoot{font-weight:700;background:#edf4f1}
article>section:not(.hero){margin-top:2.25rem}
.hero+.locale-note[hidden]+.story{margin-top:1.5rem}
.features{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:0}
.features li{padding:1rem;background:#edf5f1;border:1px solid var(--line);border-radius:.65rem}
.features li:nth-child(3n+2){background:#edf2f8}
.features li:nth-child(3n+3){background:#fcf2e3}
.example{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);max-width:68rem;overflow:hidden;background:#fbf1e1;border:1px solid var(--line);border-radius:.85rem}
.example-photo{margin:0;align-self:center}
.example-photo img{display:block;width:100%;height:auto}
.example-detail-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;margin-top:.35rem}
.example-photo figcaption{padding:.5rem 1rem;font-size:.9rem;color:var(--muted)}
.example-copy{padding:clamp(1rem,3vw,1.6rem)}
.example-services{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0}
.example-services li{border:1px solid var(--line);border-radius:1.25rem;padding:.15em .65em;font-size:.9rem}
.business-examples{display:grid;gap:1.25rem;max-width:68rem}
.business-example{margin:0;padding:clamp(1rem,2vw,1.5rem);background:#faf1e4;border:1px solid var(--line);border-radius:.85rem}
#barber-example{background:#edf5f1}
#auto-example{background:#edf2f8}
.business-example h3{font-size:1.25em}
.gallery-description{max-width:72ch}
.business-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.8rem}
.barber-photos{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
.business-photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:.25rem}
.business-photos img.diptych-left,.business-photos img.diptych-right{aspect-ratio:3/4}
.diptych-left{object-position:left center}
.diptych-right{object-position:right center}
#examples,.business-example{scroll-margin-top:1rem}
.business-example:target,#examples:target .example{border-color:var(--gold)}
@media(max-width:680px){
  .business-photos,.barber-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .business-photos img:first-child{grid-column:1/-1}
}
.examples-note{font-size:.9rem;color:var(--muted)}
.poi-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1rem}
.poi-controls button,.poi-plan button{font:inherit;cursor:pointer}
.poi-controls button{padding:.35em .7em;color:var(--ink);background:#edf5f1;border:1px solid var(--line);border-radius:.4rem}
.poi-controls button:hover,.poi-plan button:hover span{background:#d9e8e2}
.poi-plan button:hover span{color:var(--navy)}
.poi-controls button[aria-pressed=true]{color:#102231;background:var(--gold)}
.poi-demo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1rem;max-width:68rem}
.poi-map{min-height:22rem;overflow:hidden;position:relative;border-radius:.7rem;border:1px solid var(--line);background:#e7edda}
.poi-plan{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 25%,#bcd8a8 0 15%,transparent 16%),radial-gradient(ellipse at 80% 70%,#c5deb2 0 21%,transparent 22%),#e9ebdd;transition:transform .25s;transform-origin:var(--map-origin,50% 50%)}
.poi-map[data-zoom=true] .poi-plan{transform:scale(1.13)}
.poi-map[data-map-style=osm] .poi-plan{background:radial-gradient(ellipse at 15% 25%,#bed9ac 0 15%,transparent 16%),radial-gradient(ellipse at 80% 70%,#cfe5bc 0 21%,transparent 22%),#f0e8d5}
.poi-water{position:absolute;inset:-35% auto -35% 47%;width:12%;transform:rotate(25deg);border-radius:40%;background:#9bcadb}
.poi-streets{position:absolute;inset:0;background:linear-gradient(14deg,transparent 38%,#fff8e7 38% 42%,transparent 42%),linear-gradient(101deg,transparent 58%,#fff8e7 58% 61%,transparent 61%),repeating-linear-gradient(5deg,transparent 0 49px,#fff9ed 49px 54px,transparent 54px 78px),repeating-linear-gradient(95deg,transparent 0 68px,#fff9ed 68px 72px,transparent 72px 102px);opacity:.92}
.poi-plan button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.2rem;background:none;border:0;color:#142637;font-size:.76rem;text-align:center}
.poi-plan button span{display:grid;place-items:center;width:2.2rem;height:2.2rem;background:#263c4d;color:white;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #20304245;font-weight:700}
.poi-plan button[aria-pressed=true] span{background:var(--gold);color:#172a39}
.poi-plan button b{background:#fffef3;padding:.16rem .3rem;border-radius:.3rem;max-width:7.25rem;line-height:1.15}
.poi-pin-photo{width:clamp(3.2rem,7vw,5.4rem);height:clamp(1.6rem,3.5vw,2.7rem);object-fit:cover;border:2px solid white;border-radius:.35rem;box-shadow:0 1px 4px #20304250}
.poi-plan button[aria-pressed=true] .poi-pin-photo{border-color:var(--gold)}
.poi-profile{align-self:start;border:1px solid var(--line);border-radius:.7rem;overflow:hidden;background:#edf5f1}
.poi-profile img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.poi-profile div{padding:1rem}
.poi-profile h3{font-size:1.3em}
.poi-profile p{font-size:.93em}
@media(prefers-reduced-motion:reduce){.poi-plan{transition:none}}
@media(max-width:680px){.poi-demo{grid-template-columns:1fr}.poi-map{min-height:18rem}}
.application-guide{padding-inline-start:1.4em}
.application-guide li{margin-block:.65em}
#application-note{color:var(--muted)}
.story hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}
.sponsor{border-top:1px solid var(--line);padding-top:1.25rem}
.sponsor{margin-top:1.75rem}
.button{display:inline-block;padding:.7rem 1rem;border-radius:.5rem;background:var(--gold);color:#102231;font-weight:700;text-decoration:none;margin-top:.5rem;transition:background-color .18s}
.button:hover{background:#eab85b}
[hidden]{display:none!important}
@media(max-width:680px){.features,.example{grid-template-columns:1fr}article{margin-top:1rem}}