/* Excede Finishing: styles for planning.html, visit.html, privacy.html and 404.html. Loaded after css/site.css,
   and uses its tokens, grid, type, buttons and sections. One big type moment per screen (the h1, then one h2
   per section), hairline rules, square controls (2px radius), every block on the 12-column grid: content from
   column 1, secondary content from column 9, halves split at column 7. */

/* ---------- Page head: the h1 is the big moment; the lede under it from column 1, extras from column 9 ---------- */
.pg-head { padding: clamp(48px, 7vw, 120px) 0 clamp(72px, 9vw, 144px); }
.pg-head .grid { row-gap: clamp(40px, 5vw, 72px); align-items: start; }
.pg-head h1 { grid-column: 1 / span 11; }
.pg-head__lede { grid-column: 1 / span 6; }
.pg-head__aside { grid-column: 9 / span 4; }

/* Ruled list of links down the page (planning, privacy) */
.toc { list-style: none; border-top: 1px solid var(--line-2); }
.toc a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--line-2);
  color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 500;
}
.toc svg { width: 14px; height: 14px; flex: none; transform: rotate(90deg); transition: transform 0.35s var(--ease); }
.toc a:hover svg { transform: rotate(90deg) translateX(3px); }

/* Section head: the h2 alone, or with one short line under it (never title left, lede right) */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 22px; }
.sec-head h2 { grid-column: 1 / span 8; }
.sec-head p { grid-column: 1 / span 6; }
.section--dark .sec-head p { color: var(--on-dark-2); }

/* Text links inside running copy */
.prose-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose-link:hover { text-decoration-thickness: 2px; }
.section--dark .prose-link { color: var(--on-dark); }

/* ---------- Planning: what happens after you call ---------- */
.sched { list-style: none; margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line-2); }
.sched > li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 10px;
  align-items: baseline; padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--line-2);
}
.sched h3 { grid-column: 1 / span 6; display: flex; align-items: baseline; font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 300; letter-spacing: -0.022em; line-height: 1.05; }
.sched__n { flex: none; width: var(--colg); color: var(--muted); font-variant-numeric: lining-nums; }
.sched__text { grid-column: 7 / span 5; display: grid; gap: 8px; }
.sched__you { font-size: 15px; color: var(--muted); }
.sched__you a { color: var(--ink); text-underline-offset: 4px; }

/* ---------- Planning: when should we talk? (native radios; :has() swaps the panels) ---------- */
.plan__kind { display: flex; flex-wrap: wrap; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border: 0; min-inline-size: 0; }
.seg { position: relative; display: block; }
.seg input, .ruler input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; min-height: 48px; padding: 0 24px;
  border: 1px solid rgba(243, 236, 225, 0.42); color: var(--on-dark);
  font-size: 15px; font-weight: 600; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.seg:first-of-type span { border-radius: 2px 0 0 2px; }
.seg + .seg span { border-left: 0; border-radius: 0 2px 2px 0; }
.seg:hover input:not(:checked) + span { background: rgba(243, 236, 225, 0.08); }
.seg input:checked + span { background: var(--on-dark); border-color: var(--on-dark); color: var(--walnut); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

/* The stages as a measuring tape: a hairline with quarter ticks, a long tick at each stage */
.ruler {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  margin: clamp(36px, 4.4vw, 56px) 0 0; padding: 0; border: 0; min-inline-size: 0;
}
.ruler::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  border-top: 1px solid rgba(243, 236, 225, 0.6);
  background: repeating-linear-gradient(90deg, rgba(243, 236, 225, 0.32) 0 1px, transparent 1px calc(var(--colg) / 4));
}
.ruler label { grid-column: span 2; position: relative; display: block; min-height: 44px; padding: 28px 10px 12px 0; cursor: pointer; }
.ruler--4 label { grid-column: span 3; }
.ruler label::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 18px; background: var(--on-dark); }
.ruler span {
  display: block; font: 300 clamp(1.25rem, 1.85vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -0.015em;
  color: var(--on-dark-2); transition: color 0.2s;
}
.ruler label:hover span, .ruler input:checked + span { color: var(--on-dark); }
.ruler input:checked + span::before { content: ''; position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 1px; background: var(--on-dark); }
.ruler input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 4px; }

.plan__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; align-items: start; margin-top: clamp(48px, 6vw, 80px); }
.plan__panels { grid-column: 1 / span 5; }
.pp h3 { margin-bottom: 22px; font-size: clamp(1.9rem, 3vw, 3.1rem); font-weight: 300; letter-spacing: -0.022em; line-height: 1.05; }
.pp p { color: var(--on-dark-2); }
.pp p + p { margin-top: 14px; }
.plan__aside { grid-column: 7 / span 6; }
.plan__aside h3 { margin-bottom: 14px; font: 600 15px/1.35 var(--f-body); letter-spacing: 0; color: var(--on-dark); }
.tell { list-style: none; border-top: 1px solid var(--line-dark); }
.tell li { padding: 13px 0; border-bottom: 1px solid var(--line-dark); font-size: 15.5px; line-height: 1.5; }
.plan__foot { margin-top: clamp(56px, 7vw, 96px); padding-top: 22px; border-top: 1px solid var(--line-dark); }
.plan__foot p { max-width: 40em; }

@supports selector(:has(*)) {
  .plan__path[data-kind='reno'] { display: none; }
  .plan:has(#kindReno:checked) .plan__path[data-kind='new'] { display: none; }
  .plan:has(#kindReno:checked) .plan__path[data-kind='reno'] { display: block; }
  .pp { display: none; }
  .plan:has(#stPlans:checked) #ppPlans,
  .plan:has(#stFraming:checked) #ppFraming,
  .plan:has(#stRough:checked) #ppRough,
  .plan:has(#stDrywall:checked) #ppDrywall,
  .plan:has(#stFloor:checked) #ppFloor,
  .plan:has(#stPaint:checked) #ppPaint,
  .plan:has(#stIdeas:checked) #ppIdeas,
  .plan:has(#stReady:checked) #ppReady,
  .plan:has(#stDate:checked) #ppDate,
  .plan:has(#stStart:checked) #ppStart { display: block; }
  /* the new-build side list follows the stage: what to tell the builder before drywall, then what to check
     before the cabinets go in */
  .plan__aside--late { display: none; }
  .plan:has(#stDrywall:checked, #stFloor:checked, #stPaint:checked) .plan__aside--early { display: none; }
  .plan:has(#stDrywall:checked, #stFloor:checked, #stPaint:checked) .plan__aside--late { display: block; }
}
@supports not selector(:has(*)) {
  /* Without :has() every stage shows, one under the other, and the switches are hidden */
  .plan__kind, .ruler { display: none; }
  .plan__path + .plan__path { margin-top: 72px; }
  .pp + .pp { margin-top: 48px; }
}

/* ---------- Planning: what changes the price (a table whose rows sit on the page grid) ---------- */
.cost { display: block; width: 100%; margin-top: clamp(48px, 6vw, 88px); border-collapse: collapse; }
.cost thead, .cost tbody { display: block; }
.cost tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; border-bottom: 1px solid var(--line-2); }
.cost thead tr { border-bottom-color: var(--ink); }
.cost th, .cost td { display: block; padding: 18px 0; text-align: left; font-weight: 400; }
.cost thead th { padding: 0 0 14px; font: 500 14px/1.3 var(--f-body); color: var(--muted); }
.cost tr > :nth-child(1) { grid-column: 1 / span 4; }
.cost tr > :nth-child(2) { grid-column: 5 / span 4; }
.cost tr > :nth-child(3) { grid-column: 9 / span 4; }
.cost tbody th { font: 300 clamp(1.3rem, 1.8vw, 1.75rem)/1.15 var(--f-display); letter-spacing: -0.012em; color: var(--ink); }
.cost td { padding-right: 12px; color: var(--ink-2); }
.cost td + td { color: var(--ink); }
.cost-note { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 28px; }
.cost-note p { grid-column: 5 / span 7; font-size: 15px; color: var(--muted); }

/* ---------- Planning: what to have ready (a sheet you can tick and print) ---------- */
.ready .grid { align-items: start; row-gap: 56px; }
.ready__text { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; }
.ready__text p { max-width: 30em; }
.ready__text .btn { margin-top: 8px; }
.card {
  grid-column: 7 / span 6; position: relative; padding: clamp(28px, 3.2vw, 48px);
  background: var(--paper); border-radius: 2px; transform: rotate(-0.6deg);
  box-shadow: 0 30px 60px -32px rgba(42, 31, 24, 0.5), 0 2px 6px rgba(42, 31, 24, 0.07);
}
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.card__head h3 { font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; }
.card__head p { font-size: 13.5px; color: var(--muted); }
.check { list-style: none; }
.check li + li { border-top: 1px solid var(--line); }
.check label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; display: grid; place-content: center;
  width: 20px; height: 20px; margin: 3px 0 0; border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; cursor: pointer;
}
.check input::after { content: ''; width: 10px; height: 5px; border-left: 2px solid var(--oxblood); border-bottom: 2px solid var(--oxblood); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 0.2s var(--ease); }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check b { display: block; color: var(--ink); font-weight: 600; }
.check small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Questions: two columns of plain answers ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(48px, 6vw, 88px); }
.faq__q { grid-column: 1 / span 5; padding: 26px 0 44px; border-top: 1px solid var(--line-2); }
.faq__q:nth-child(even) { grid-column: 7 / span 5; }
.faq h3 { margin-bottom: 12px; font-size: clamp(1.4rem, 1.9vw, 1.9rem); font-weight: 350; }
.faq p { max-width: 32em; }
.faq p + p { margin-top: 10px; }

/* ---------- Closing line ---------- */
.pg-close { padding: clamp(96px, 12vw, 184px) 0; }
.pg-close .grid { row-gap: 40px; padding-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line-2); }
/* After a plain plaster section there is no change of ground to mark, only the hairline: the space above the
   rule matches the space under it */
.section:not(.section--linen):not(.section--dark):has(+ .pg-close) { padding-bottom: clamp(24px, 4vw, 56px); }
.section:not(.section--linen):not(.section--dark) + .pg-close { padding-top: 0; }
.pg-close h2 { grid-column: 1 / span 9; font-size: clamp(2.5rem, 5.6vw, 5.8rem); }
.pg-close__ctas { grid-column: 1 / span 8; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Visit ---------- */
.addr { font: 300 clamp(1.7rem, 2.7vw, 2.7rem)/1.12 var(--f-display); letter-spacing: -0.016em; color: var(--ink); }
.addr-mail { margin-top: 16px; font-size: 15.5px; color: var(--muted); }
.visit-act { display: grid; gap: 22px; justify-items: start; }
.visit-act p { max-width: 22em; }
.visit-act__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.getting .grid { align-items: start; row-gap: 56px; }
.getting__text { grid-column: 1 / span 6; }
.getting__text > p { margin-top: 22px; max-width: 30em; }
.routes { list-style: none; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-2); }
.routes li { padding: 22px 0 26px; border-bottom: 1px solid var(--line-2); }
.routes h3 { margin-bottom: 8px; font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 300; letter-spacing: -0.018em; }
.routes p { max-width: 34em; }
.getting__more { margin-top: 32px; }
.getting__map { grid-column: 7 / span 6; position: sticky; top: calc(var(--head-h) + 24px); }
.getting__photo { margin: 0; }
.getting__photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.getting__photo figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* The map: the homepage's line style. Labels, dots and shields hold their size on screen: an inline script
   sets --k to the viewBox width over the drawn width (the defaults below are close without it). */
.vmap { margin: 0; color: var(--ink); }
.vmap__frame { container-type: inline-size; overflow: hidden; border-radius: 2px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.vmap__svg { width: 100%; height: auto; --k: 0.95; }
.vmap .road { stroke: var(--ink); stroke-opacity: 0.26; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vmap .route { stroke-opacity: 0.88; stroke-width: 2.6px; }
.vmap .sh, .vmap .dot, .vmap .pulse { transform: scale(var(--k)); transform-box: fill-box; transform-origin: center; }
.vmap__shields rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.vmap__shields text { font: 600 11px var(--f-body); fill: var(--ink); }
.vmap text { paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.vmap__shields text { stroke: none; }
.vmap__towns .dot { fill: var(--ink); fill-opacity: 0.6; }
.vmap__towns .city .dot { fill-opacity: 0.85; }
.vmap__towns text { font: 500 calc(14px * var(--k)) var(--f-body); fill: var(--ink-2); stroke-width: calc(4px * var(--k)); }
.vmap__towns .city text { font: 400 calc(21px * var(--k)) var(--f-display); fill: var(--ink); }
.vmap__shop .dot { fill: var(--oxblood); }
.vmap__shop .pulse { fill: var(--oxblood); fill-opacity: 0.16; animation: vpulse 2.8s var(--ease) 3; }
@keyframes vpulse { 0% { transform: scale(calc(var(--k) * 0.4)); fill-opacity: 0.4; } 100% { transform: scale(calc(var(--k) * 1.5)); fill-opacity: 0; } }
.vmap__shop .shop { font: 400 calc(24px * var(--k)) var(--f-display); letter-spacing: -0.01em; fill: var(--ink); stroke-width: calc(5px * var(--k)); }
.vmap__shop .shop-sub { font: 600 calc(14px * var(--k)) var(--f-body); fill: var(--oxblood); stroke-width: calc(4px * var(--k)); }
.vmap__north path, .vmap__scale path { fill: none; stroke: var(--ink); stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vmap__north text, .vmap__scale text { font: 600 calc(12px * var(--k)) var(--f-body); fill: var(--ink-2); stroke-width: calc(3px * var(--k)); }
.vmap__north text { font-size: 12px; }
.vmap figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
/* A narrow map (a phone, or six columns on a small laptop): smaller labels, no north arrow (north is up),
   and Coaldale's name above and to the left of its dot so it stays inside the frame */
@container (max-width: 580px) {
  .vmap__north { display: none; }
  .vmap__towns text { font-size: calc(13px * var(--k)); }
  .vmap__towns .city text { font-size: calc(18px * var(--k)); }
  .vmap__shop .shop { font-size: calc(20px * var(--k)); }
  .vmap__shop .shop-sub { font-size: calc(12.5px * var(--k)); }
  .vmap__towns .town--east text { text-anchor: end; transform: translate(-1.5em, -1.6em); }
}

.come .grid { align-items: start; row-gap: 64px; }
.come__see { grid-column: 1 / span 5; display: grid; gap: 22px; }
.come__see h2 { margin-bottom: 6px; }
.come__see p { max-width: 30em; }
.come__call { grid-column: 7 / span 6; }
.come__call h3 { margin-bottom: 24px; font: 600 15px/1.35 var(--f-body); letter-spacing: 0; color: var(--ink); }

/* People: a ruled list with the names in the display face (mirrors .people in css/home.css) */
.people { list-style: none; border-top: 1px solid var(--line-2); }
.people a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 24px;
  padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--line-2); text-decoration: none;
}
.people a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.people a:hover::before { transform: scaleX(1); }
.people__name { font: 300 clamp(1.8rem, 3vw, 3rem)/1 var(--f-display); letter-spacing: -0.025em; color: var(--ink); transition: transform 0.6s var(--ease); }
.people a:hover .people__name { transform: translateX(14px); }
.people__how { font-size: 15.5px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.people svg { width: 18px; height: 18px; color: var(--ink); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.5s var(--ease); }
.people a:hover svg, .people a:focus-visible svg { opacity: 1; transform: none; }

/* ---------- Privacy: the notice from column 1, its contents from column 9 ---------- */
.legal { padding-bottom: clamp(96px, 12vw, 176px); }
.legal .grid { align-items: start; row-gap: 48px; }
.legal__body { grid-column: 1 / span 7; grid-row: 1; }
.legal__toc { grid-column: 9 / span 4; grid-row: 1; position: sticky; top: calc(var(--head-h) + 24px); }
.legal__toc h2 { margin-bottom: 14px; font: 600 15px/1.35 var(--f-body); letter-spacing: 0; color: var(--ink); }
.legal__toc .toc a { min-height: 46px; font-size: 15px; }
.legal__body > section + section { margin-top: clamp(56px, 7vw, 96px); }
.legal__body h2 { margin-bottom: 20px; font-size: clamp(1.9rem, 2.8vw, 2.8rem); }
.legal__body h3 { margin: 28px 0 10px; font-size: clamp(1.3rem, 1.7vw, 1.6rem); }
.legal__body p, .legal__body ul:not([class]) li { max-width: 38em; }
.legal__body p + p, .legal__body p + ul:not([class]), .legal__body ul:not([class]) + p { margin-top: 14px; }
.legal__body ul:not([class]) { padding-left: 1.2em; }
.legal__body ul:not([class]) li + li { margin-top: 8px; }
.legal__body a:not([class]) { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.legal__addr { margin: 24px 0; font-style: normal; }
.legal__addr .prov { margin: 0; }
/* The register and the list of companies: labels take two columns of the page grid, the text starts on the third */
.reg { list-style: none; margin-top: 32px; border-top: 1px solid var(--line-2); }
.reg > li { padding: 26px 0 30px; border-bottom: 1px solid var(--line-2); }
.reg h3 { margin: 0 0 16px; }
.reg dl { display: grid; grid-template-columns: calc(var(--colg) * 2) minmax(0, 1fr); row-gap: 10px; align-items: baseline; margin: 0; }
.reg dt, .prov dt { padding-right: 12px; font-size: 15.5px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.reg dd, .prov dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.prov { display: grid; grid-template-columns: calc(var(--colg) * 2) minmax(0, 1fr); margin: 28px 0 24px; border-bottom: 1px solid var(--line-2); }
.prov dt, .prov dd { padding: 15px 0 16px; border-top: 1px solid var(--line-2); }
/* Links in a row reach 44px tall without making the row taller */
.prov a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- 404: the empty drawer, drawn on grid paper ---------- */
.nf { padding: clamp(32px, 4.5vw, 72px) 0 clamp(96px, 11vw, 168px); }
.nf .grid { row-gap: clamp(32px, 4vw, 56px); align-items: start; }
.nf h1 { grid-column: 1 / span 11; }
.nf__sheet {
  grid-column: 1 / span 7; margin: 0; padding: clamp(24px, 2.8vw, 40px) clamp(20px, 4vw, 56px) 20px;
  border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line);
  background-color: #f5f5f2;
  background-image: linear-gradient(rgba(0, 55, 120, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 55, 120, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.nf__sheet svg { width: min(100%, 440px); height: auto; margin: 0 auto; }
.nf__sheet figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); }
.nf__side { grid-column: 9 / span 4; display: grid; gap: 32px; }
.drawer path { fill: none; stroke: var(--ink); stroke-width: 1.15px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.drawer .f { fill: var(--paper); }
.drawer .f.side { fill: #ede6da; }
.drawer .f.top { fill: #fbf9f5; }
.drawer .f.kick { fill: #d8cebf; }
.drawer .f.inner { fill: #efe8dd; }
.drawer .f.floor { fill: #f7f2ea; }
.drawer .cavity { fill: #4a3d33; }
.drawer .thin { stroke-width: 0.7px; }
.drawer .pull { fill: #e8e0d3; stroke-width: 0.9px; }
.drawer .pull-lip { stroke-width: 0.9px; }

/* Ways on: ruled rows with the place in the display face */
.ways { list-style: none; border-top: 1px solid var(--line-2); }
.ways a {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 4px 16px;
  min-height: 64px; padding: 14px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none;
}
.ways__name { font: 300 clamp(1.45rem, 2vw, 2rem)/1.1 var(--f-display); letter-spacing: -0.016em; transition: transform 0.6s var(--ease); }
.ways__how { grid-column: 1; font-size: 14.5px; color: var(--muted); }
.ways svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.ways a:hover .ways__name { transform: translateX(10px); }
.ways a:hover svg { transform: translateX(3px); }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .pg-head__lede, .pg-head__aside { grid-column: 1 / span 9; }
  .sched h3 { grid-column: 1 / span 5; }
  .sched__text { grid-column: 6 / span 7; }
  .plan__panels { grid-column: 1 / span 6; }
  .plan__aside { grid-column: 7 / span 6; }
  .ready__text { grid-column: 1 / span 8; }
  .card { grid-column: 1 / span 10; }
  .faq__q { grid-column: 1 / span 6; }
  .faq__q:nth-child(even) { grid-column: 7 / span 6; }
  .pg-close h2 { grid-column: 1 / -1; }
  .getting__text { grid-column: 1 / span 10; }
  .getting__map { grid-column: 1 / span 10; position: static; }
  .vmap__svg { --k: 1.05; }
  .come__see { grid-column: 1 / span 10; }
  .come__call { grid-column: 1 / span 10; }
  .legal__toc { grid-column: 1 / span 8; grid-row: 1; position: static; }
  .legal__body { grid-column: 1 / span 10; grid-row: 2; }
  .nf__sheet { grid-column: 1 / span 8; }
  .nf__side { grid-column: 1 / span 8; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .pg-head h1, .pg-head__lede, .pg-head__aside, .sec-head h2, .sec-head p,
  .ready__text, .card, .pg-close__ctas, .getting__text, .getting__map, .come__see, .come__call,
  .legal__toc, .legal__body, .nf h1, .nf__sheet, .nf__side { grid-column: 1 / -1; }
  .sched h3 { grid-column: 1 / -1; }
  .sched__n { width: calc(var(--colg) * 2); }
  .sched__text { grid-column: 1 / -1; padding-left: calc(var(--colg) * 2); }
  .seg { flex: 1 1 0; }
  .seg span { justify-content: center; padding: 0 12px; }
  .ruler { row-gap: 4px; }
  .ruler::before { display: none; }
  .ruler label { grid-column: span 4; padding: 24px 6px 12px 0; border-top: 1px solid rgba(243, 236, 225, 0.6); }
  .ruler--4 label { grid-column: span 6; }
  .ruler span { font-size: 1.2rem; }
  .plan__panels, .plan__aside { grid-column: 1 / -1; }
  .cost thead th:first-child { display: none; }
  .cost thead th:nth-child(2), .cost td:nth-child(2) { grid-column: 1 / span 6; }
  .cost thead th:nth-child(3), .cost td:nth-child(3) { grid-column: 7 / span 6; }
  .cost tbody th { grid-column: 1 / -1; padding-bottom: 8px; }
  .cost td { padding-top: 0; font-size: 15.5px; }
  .cost-note p { grid-column: 1 / -1; }
  .card { transform: none; padding: 24px 20px; }
  .faq__q, .faq__q:nth-child(even) { grid-column: 1 / -1; padding-bottom: 32px; }
  .pg-close__ctas .btn { width: 100%; }
  .vmap__svg { --k: 1.75; }
  .people a { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .people svg { display: none; }
  .people__how { font-size: 14px; }
  .reg dl, .prov { grid-template-columns: minmax(0, 1fr); }
  .reg dl { row-gap: 2px; }
  .reg dd + dt { margin-top: 12px; }
  .prov dt { padding-bottom: 4px; }
  .prov dd { padding-top: 0; border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vmap__shop .pulse { animation: none; }
}

/* ---------- Print: the planner shows every stage in ink; "Print this list" prints the sheet alone ---------- */
@media print {
  body { background: #fff; }
  .pg-head, .section, .pg-close, .nf, .legal { padding-top: 24px !important; padding-bottom: 24px !important; }
  .section--dark, .section--linen { background: none !important; }
  .section--dark, .section--dark :is(h2, h3, p, li, span, legend), .pp p, .tell li { color: var(--ink) !important; }
  .plan__kind, .ruler, .pg-close, .toc svg { display: none !important; }
  .plan__path, .pp, .plan__aside { display: block !important; }
  .pp { margin-bottom: 24px; break-inside: avoid; }
  /* Each step's heading shares a grid row with its text, so the heading's break-after: avoid (site.css) passed
     to the row and chained every step to the next: the whole list jumped to page 2 and left page 1 empty.
     The row already keeps its heading and text together. Price rows stay whole too. */
  .sched > li > h3 { break-after: auto; }
  .cost tr { break-inside: avoid; }
  /* The footnote travels with the last rows instead of printing alone at the top of a page */
  .cost-note { break-before: avoid; break-inside: avoid; }
  /* Chrome does not carry break-after or break-inside: avoid across grid rows, so the measure heading
     printed alone and the card went to the next page. In print the section is a plain stack: the text
     keeps with the card, and the card stays whole. */
  .ready .grid { display: block; break-inside: avoid; }
  .ready__text { display: block; break-after: avoid; }
  .ready__text p { margin-top: 16px; }
  .ready .card { margin-top: 32px; break-inside: avoid; }
  /* Both stage lists print. As grid items the second list took a row of its own below the stages and printed
     alone on a page, and Chrome overlaps grid items that span rows split across pages. In print the stages
     float in the left half (columns 1 to 6) and the lists follow one another in the right half (7 to 12). */
  .plan__body { display: flow-root; }
  .plan__panels { float: left; width: calc((100% - var(--gap)) / 2); }
  .plan__aside { margin-left: calc((100% + var(--gap)) / 2); }
  .plan__aside + .plan__aside { margin-top: 56px; }
  .tell, .tell li, .plan__foot { border-color: var(--line-2) !important; }
  .card { transform: none; box-shadow: none; border: 1px solid var(--line-2); }
  .getting__map { position: static; }
  body.print-sheet main > :not(#ready) { display: none !important; }
  body.print-sheet .ready__text { display: none !important; }
  body.print-sheet .card { grid-column: 1 / -1; margin-top: 0; border: 0; padding: 0; }
}