.action-arrow{display:inline-block;vertical-align:middle;flex-shrink:0;margin-left:8px}.button .action-arrow{margin-left:0}
/* V4 — a coastal editorial journey. Stable static layout is the default frame. */
.hero{display:block;min-height:0;padding-bottom:0}
.hero-copy{padding-block:36px 44px}
.hero h1{font-size:clamp(4rem,13.8vw,15rem);line-height:1.02;letter-spacing:-.04em;white-space:nowrap}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:28px}
.hero-description{margin:0;max-width:28ch;font-size:clamp(1.5rem,2.4vw,2.375rem)}
.hero-action{max-width:390px}.hero-action .button{gap:20px}.hero-action .affiliation{margin-top:16px}
.hero-photo{height:clamp(380px,65svh,880px);min-height:0;aspect-ratio:auto;isolation:isolate}
.hero-photo img{object-position:50% 54%}
.hero-photo figcaption{left:var(--gutter);bottom:var(--gutter);right:var(--gutter);padding:16px 20px;max-width:calc(100% - var(--gutter) * 2);font-size:1.125rem}
.hero-photo figcaption span{display:block;font-size:1rem;margin-top:4px}
.about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,8vw,140px)}
.about-image{max-width:520px}.about-image img{aspect-ratio:2/3;object-position:50% 35%}
.about-copy{padding-top:20px}.about-copy h2{font-size:clamp(3rem,5.8vw,6rem)}
.source-note{font-size:1rem;line-height:1.5;color:var(--secondary)}
.asset-gate{font-size:1rem;background:var(--sea);padding:16px 18px;margin-top:28px}
.asset-gate summary{margin-left:20px}.asset-gate p{line-height:1.6}
#approved-welcome{margin-block:32px}video{display:block;width:100%;margin-block:20px;background:var(--ink)}
.areas{padding-block:clamp(64px,7.5vw,120px)}
.areas .section-intro{grid-template-columns:1.2fr .8fr;margin-bottom:64px}
.area-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(36px,6vw,96px)}
.coastal-map{position:relative;min-width:0;isolation:isolate}
.map-illustration{position:absolute;inset:0 0 104px;z-index:-1;overflow:clip}
.map-illustration svg{display:block;width:100%;height:100%}.map-land{fill:var(--paper)}
.map-coastline{fill:none;stroke:var(--secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map-illustration text{font:400 16px Jost,sans-serif;fill:var(--secondary)}
.coastal-map .town-buttons{display:block;position:relative;height:580px}
.coastal-map .town-buttons button{position:absolute;width:auto;max-width:55%;min-height:52px;padding:12px 16px;background:var(--paper);color:var(--ink);display:block;font:500 1.0625rem/1.25 var(--text)}
.coastal-map .town-buttons button span{display:block;font-size:1rem;font-weight:400;margin-top:4px}
.coastal-map .town-buttons button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.coastal-map .town-buttons button[aria-pressed="true"]::after{content:"Selected";display:block;font-size:1rem;font-weight:400;margin-top:4px}
.coastal-map .town-buttons button:is(:hover,:focus-visible):not([aria-pressed="true"]){background:var(--accent)}
.coastal-map .town-buttons button:focus-visible{outline-offset:5px}
.pin-0{left:29%;top:38%}.pin-1{left:24%;top:23%}.pin-2{left:18%;top:8%}
.pin-3{left:35%;top:79%}.pin-4{left:60%;top:61%}.pin-5{left:65%;top:39%}.pin-6{right:0;top:0}.pin-7{left:54%;top:17%}
#map-note{font-size:1rem;color:var(--secondary);line-height:1.5;margin:24px 0 0}
#town-fallback{position:relative;background:var(--sea);padding:20px}
.town-view{top:124px}.town-photo .photo-window{aspect-ratio:4/3}.town-info{padding-top:24px}
.town-info h3{font-size:clamp(2.25rem,3.2vw,3.75rem)}
.town-facts{margin-block:24px}.town-facts div{margin-bottom:16px}
dt{font-weight:500;font-size:1rem;margin-bottom:6px}dd{margin:0;max-width:50ch}
.town-info .source-note{margin-bottom:8px}.town-info .source-note a{display:inline-block;min-height:44px;padding-block:8px}
.comparison-form{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:32px;align-items:end;margin-bottom:32px}
.comparison-form label,.roadmap label{display:block;min-width:0}
.comparison-form select,.roadmap select{margin-top:10px;border-color:var(--ink);font-size:1.0625rem}
.comparison-form button{border:0;background:transparent;color:var(--ink);padding:12px 16px;font-size:1.0625rem;min-height:52px}
.comparison-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:clamp(24px,4vw,64px);background:var(--ink);color:var(--paper);margin-bottom:24px}
.comparison-columns article{min-width:0}.comparison-columns h3{margin-bottom:28px;font-size:clamp(2rem,3vw,3.5rem)}
.comparison-columns dl{margin:0}.comparison-columns dl div{margin-bottom:28px}.comparison-columns dt{color:var(--light-ink)}
.comparison-columns a{display:inline-block;min-height:44px;padding-block:8px;font-size:1rem;color:var(--light-ink)}
.comparison-columns :focus-visible{outline-color:var(--accent)}
.area-reference{margin-top:36px}.area-reference>summary{font-size:1rem}
.reference-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;padding-top:20px}
.reference-grid details{font-size:1rem}.reference-grid a{display:inline-block;margin-left:20px;min-height:44px;padding-block:8px}
.neighborhood-days{background:var(--ink);color:var(--paper);padding-block:var(--section)}
.days-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,112px);align-items:start}
.days-intro{position:sticky;top:124px}.days-intro h2{font-size:clamp(3rem,5.5vw,6rem);margin-bottom:32px}
.days-intro p{color:var(--light-ink);max-width:34ch}.days-intro .text-link{max-width:28ch}
.neighborhood-days :focus-visible{outline-color:var(--accent)}
.day-chapter{margin-bottom:96px}.day-chapter:last-child{margin-bottom:0}.day-chapter:nth-child(2){width:88%;margin-left:auto}
.day-chapter img{width:100%;aspect-ratio:4/3;object-fit:cover}.day-chapter figcaption{color:var(--light-ink)}
.chapter-copy{padding-top:28px}.chapter-copy h3{font-size:clamp(2rem,3.5vw,3.75rem);margin-bottom:20px}.chapter-copy p{max-width:43ch;color:var(--light-ink)}
.moving{background:var(--paper);color:var(--ink);margin-top:0;padding-top:var(--section);padding-bottom:0}
.moving .section-intro>p,.moving figcaption{color:var(--secondary)}.moving :focus-visible{outline-color:var(--ink)}
.roadmap{background:var(--sea);padding-block:clamp(56px,7vw,112px)}
.roadmap-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,112px);align-items:start}
.roadmap-intro{position:sticky;top:124px}.roadmap-intro h2{margin-bottom:32px}.roadmap-intro p{max-width:36ch}
.roadmap .goal-options{display:flex;gap:16px 32px;flex-wrap:wrap}.roadmap .goal-options label{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}
.roadmap input[type=radio]{accent-color:var(--ink)}.roadmap form>label{margin-bottom:24px}
.field-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.roadmap-result{margin-top:44px}.roadmap-result h3{margin-bottom:24px}
.roadmap-result ol{padding-left:1.5em;margin:0 0 32px}.roadmap-result li{padding-left:8px;margin-bottom:20px}
.roadmap-actions{display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.roadmap-actions .button{gap:16px}.roadmap #roadmap-fallback h3{margin-block:28px 20px;font-size:2rem}
.roadmap #roadmap-fallback a{display:inline-block;min-height:44px;padding-block:10px}
.story-gates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,112px)}
.story-gates h3{font-size:clamp(2rem,3vw,3.25rem);margin-bottom:24px}.asset-context{font-size:1rem;color:var(--secondary)}
.property-comparison{position:relative;aspect-ratio:4/3;overflow:clip;margin-bottom:24px}.property-comparison img{width:100%;height:100%;object-fit:cover}
.property-after{position:absolute;inset:0}.proof-stories input[type=range]{width:100%;min-height:48px;accent-color:var(--ink)}
.proof-stories blockquote{font:500 1.75rem/1.4 var(--display);margin:24px 0}.proof-stories figure{margin-bottom:36px}
#approved-welcome h3{font-size:2rem;margin-top:28px}
@media(hover:hover) and (pointer:fine){
 .hero .button .action-arrow,.roadmap .button .action-arrow{display:inline-block;transition:transform 220ms var(--ease)}
 .hero .button:hover .action-arrow,.roadmap .button:hover .action-arrow{transform:translate(3px,-3px)}
 .coastal-map .town-buttons button:hover{transform:translateY(-3px)}
}
@media(max-width:1100px){
 .hero-copy{padding-block:32px}.hero h1{font-size:13.8vw}.hero-photo{height:60svh;min-height:360px}
 .coastal-map .town-buttons{height:520px}.coastal-map .town-buttons button{padding:12px;font-size:1rem;max-width:62%}
 .pin-0{left:16%;top:39%}.pin-1{left:10%;top:25%}.pin-2{left:4%;top:10%}.pin-3{left:20%;top:79%}.pin-4{left:48%;top:62%}.pin-5{left:60%;top:40%}.pin-7{left:42%;top:18%}
 .town-view,.days-intro,.roadmap-intro{top:148px}.field-pair{grid-template-columns:1fr}
 .comparison-form{gap:16px}.comparison-form button{padding-inline:8px}
}
@media(max-width:900px){
 .area-layout{grid-template-columns:1fr}.coastal-map{max-width:720px;width:100%;margin-inline:auto}.coastal-map .town-buttons{height:600px}
 .coastal-map .town-buttons button{font-size:1.125rem;padding:14px 18px}.pin-0{left:29%}.pin-1{left:24%}.pin-2{left:18%}.pin-3{left:35%}.pin-4{left:60%}.pin-5{left:65%}.pin-7{left:54%}
 .town-view{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}.town-info{padding:0}
 .about{gap:40px}.about-copy{padding-top:0}.about-copy h2{font-size:clamp(2.5rem,5.5vw,4rem)}
 .days-layout,.roadmap-layout{gap:40px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .days-intro h2{font-size:clamp(2.75rem,5.5vw,4rem)}
}
@media(max-width:760px){
 .hero-copy{padding-block:24px 32px}.hero h1{font-size:12.8vw;letter-spacing:-.04em}
 .hero-bottom{grid-template-columns:1fr;gap:24px;margin-top:24px}.hero-description{font-size:1.5rem;max-width:28ch}.hero-action{max-width:none}
 .hero-action .affiliation{max-width:36ch}.hero-action .affiliation br{display:none}
 .hero-photo{height:62svh;min-height:380px;max-height:620px;aspect-ratio:auto}.hero-photo img{object-position:57% 50%}
 .hero-photo figcaption{padding:12px 14px;font-size:1rem;bottom:20px;left:20px;right:20px}
 .hero-photo figcaption span{font-size:1rem}
 .about{grid-template-columns:1fr;gap:36px}.about-image{order:0;width:100%;max-width:460px;margin-inline:auto}.about-image img{aspect-ratio:3/4}
 .about-copy h2{font-size:clamp(2.75rem,9vw,4rem)}
 .areas .section-intro{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
 .map-illustration{position:relative;inset:auto;height:240px;margin-bottom:24px}.map-illustration svg{height:100%;width:100%}
 .coastal-map .town-buttons{display:grid;height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .coastal-map .town-buttons button{position:static;max-width:none;width:100%;font-size:1.0625rem;min-height:64px;padding:14px 12px;transform:none;box-shadow:none}
 .coastal-map .town-buttons button:last-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
 .coastal-map .town-buttons button:last-child span{margin:0}.coastal-map .town-buttons button:last-child::after{margin:0}
 #map-note{margin-top:24px}.town-view{display:block}.town-info{padding-top:24px}
 .comparison-form{grid-template-columns:1fr 1fr;gap:16px;align-items:start}.comparison-form button{grid-column:1/-1;grid-row:2;justify-self:start;padding-inline:0}
 .comparison-columns{padding:24px 20px;gap:24px}.comparison-columns h3{font-size:1.625rem;overflow-wrap:anywhere;margin-bottom:24px}
 .comparison-columns dd{font-size:1rem;line-height:1.5}.comparison-columns dt{font-size:1rem}.comparison-columns dl div{margin-bottom:24px}
 .reference-grid{grid-template-columns:1fr;gap:8px}
 .days-layout,.roadmap-layout{grid-template-columns:1fr;gap:40px}.days-intro,.roadmap-intro{position:static}
 .days-intro h2{font-size:clamp(3rem,10vw,4.5rem)}.days-intro p,.roadmap-intro p{max-width:56ch}
 .day-chapter{margin-bottom:64px}.day-chapter:nth-child(2){width:100%;margin-left:0}.chapter-copy{padding-top:24px}
 .chapter-copy h3{font-size:2.5rem}.field-pair{grid-template-columns:1fr}.roadmap-result{margin-top:36px}
 .story-gates{grid-template-columns:1fr;gap:44px}.story-gates h3{font-size:2.5rem}.asset-gate{padding:12px}
}
@media(max-width:380px){
 .hero h1{font-size:12.8vw}.comparison-columns{padding:20px 16px;gap:20px}.comparison-columns h3{font-size:1.5rem}
 .comparison-form{grid-template-columns:1fr}.comparison-form button{grid-row:3}.comparison-form label:last-child{grid-row:2}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.days-intro,.roadmap-intro{position:static}
 .hero .button .action-arrow,.roadmap .button .action-arrow,.coastal-map .town-buttons button:is(:hover,:focus-visible){transform:none}
 *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Focused rendered QA: phone comparisons read in one full-width column. */
.map-ocean-label{position:absolute;left:5%;top:56%;font-size:1.125rem;line-height:1.4;color:var(--secondary);max-width:6ch;margin:0;pointer-events:none}
@media(max-width:600px){
 .comparison-form{grid-template-columns:minmax(0,1fr);gap:16px}
 .comparison-form > *{grid-column:1;grid-row:auto}
 .comparison-form button{grid-column:1;grid-row:auto;justify-self:start}
 .comparison-form label:last-child{grid-column:1;grid-row:auto}
 .comparison-form select{width:100%;min-width:0;font-size:1.0625rem;min-height:54px}
 .comparison-columns{grid-template-columns:minmax(0,1fr);gap:44px;padding:28px 24px}
 .comparison-columns h3{font-size:2.125rem;overflow-wrap:normal;margin-bottom:24px}
 .comparison-columns dd{font-size:1.0625rem;line-height:1.6}
 .map-illustration{height:280px}
}

@media print{
 .hero h1{font-size:5rem}.hero-photo{height:260px;min-height:0}.comparison-columns,.neighborhood-days,.roadmap{background:var(--paper);color:var(--ink)}
 .comparison-columns dt,.comparison-columns a,.days-intro p,.chapter-copy p,.day-chapter figcaption{color:var(--ink)}
 .days-layout,.roadmap-layout,.story-gates{display:block}.days-intro,.roadmap-intro{position:static}.map-illustration{display:none}
 .neighborhood-days,.roadmap{padding-block:32px}.hero-action .affiliation{margin:0}
}