/* B & D Handyman Services. Young Serif + Red Hat Text; front-door green, trim white, mortar, pine on green only. */
:root {
  --green: #1F4A3E; --green-d: #163830; --pine: #D9B97E; --trim: #F7F5F0; --mortar: #E8E3D8;
  --ink: #1A1D1B; --quiet: #56605B; --rule: #D3CCBE; --rule-m: #BDB5A5; --on-green: #E2ECE7; --on-green-q: #C4D4CD;
  --disp: 'Young Serif', Georgia, 'Times New Roman', serif;
  --text: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g: 20px; --max: 1360px;
  --sec: 88px;
  --m-dur: .8s; --m-ease: cubic-bezier(.2, .8, .2, 1); --m-rise: 22px; --m-word: 50ms;
}
@media (max-width: 719px) { :root { --m-dur: .65s; --m-rise: 16px; --m-word: 34ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--trim); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.label { font: 600 .75rem/1.35 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.sec-label { color: var(--green); margin-bottom: 14px; }
h2 { font: 400 clamp(2.5rem, 9.6vw, 3.5rem)/1.02 var(--disp); letter-spacing: -.012em; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.hero :focus-visible, .top :focus-visible, .eight :focus-visible, .reviews :focus-visible, .foot :focus-visible, .actionbar :focus-visible { outline-color: var(--pine); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--pine); color: var(--ink); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.preview { background: var(--ink); color: #CFC8BB; font-size: .8125rem; line-height: 1.4; text-align: center; padding: 7px 16px; }
.preview b { color: #fff; font-weight: 600; }

/* photo credits: small, quiet, always under the photo on the solid field */
.credit { margin-top: 8px; font: 400 .75rem/1.35 var(--text); color: var(--quiet); }
/* full-bleed photo frames on phones, 4:5 */
.bleed { margin-inline: calc(var(--g) * -1); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--green); color: #fff; }
.top.is-scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px -12px rgba(0, 0, 0, .35); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.mark { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; padding: 8px 0; }
.mark-bd { font: 400 1.875rem/1 var(--disp); white-space: nowrap; }
.mark-bd, .foot-bd, .hname { font-family: 'Young Serif', serif; font-synthesis: none; font-weight: 400; letter-spacing: -.015em; }
.mark-bd em, .hname em, .foot-bd em { color: var(--pine); }
.mark-sub { font: 600 .75rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--on-green); }
.nav { display: none; }
.top-call { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--pine); color: var(--ink); font: 600 1rem/1 var(--text); text-decoration: none; --m-fill: rgba(255, 255, 255, .35); }
.top-call-num { display: none; margin-left: .3em; }

/* ---------- hero: melissa flot's green door (the source of the brand green), full-bleed on phones ---------- */
.hero { background: var(--green); color: #fff; }
.hero-photo { height: min(42svh, 360px); min-height: 280px; }
/* the door is pre-cropped from the full-size original: the six panels, the handle and the sidelight */
/* wider than the frame and pinned right, so the sidelight is a narrow strip and the door leads */
.hero-photo img { width: 125%; max-width: none; height: 100%; margin-left: -25%; object-fit: cover; object-position: 50% 42%; }
/* the photo is never hidden (it's the LCP image); it eases from 1.08 to 1 while the name rises line by line, then the
   lede and the actions. Pure CSS, so it plays from first paint at every width, with or without the motion kit */
.hero-photo { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: hero-settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .hl, .hero .lede, .hero .actions, .hero-credit { animation: hero-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .hl:nth-child(1) { animation-delay: 150ms; }
  .hero .hl:nth-child(2) { animation-delay: 270ms; }
  .hero .hl:nth-child(3) { animation-delay: 390ms; }
  .hero .lede { animation-delay: 460ms; }
  .hero .actions { animation-delay: 580ms; }
  .hero-credit { animation-delay: 700ms; }
  @keyframes hero-settle { from { scale: 1.08; } to { scale: 1; } }
  @keyframes hero-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
}
.hero-credit { margin-top: 18px; font: 400 .75rem/1.35 var(--text); color: var(--on-green-q); }
.htext { padding: 18px var(--g) 56px; }
.runhead { display: flex; justify-content: space-between; gap: 12px; color: var(--pine); padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.hname { font-size: clamp(3rem, 14.2vw, 7rem); line-height: .95; margin: 14px 0 10px; }
.hl { display: block; }
.lede { max-width: 36ch; color: var(--on-green); font-size: 1rem; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; font: 600 1.0625rem/1 var(--text); text-decoration: none; border: 2px solid transparent; }
.btn-pine { background: var(--pine); color: var(--ink); --m-fill: rgba(255, 255, 255, .35); }
.btn-green { background: var(--green); color: #fff; --m-fill: rgba(255, 255, 255, .14); }
.btn-green:hover { background: var(--green-d); }
.btn-line { border-color: var(--green); color: var(--green); --m-fill: rgba(31, 74, 62, .08); }
.hero-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: #fff; }

/* ---------- 8 AM / 8 PM: same green as the hero, one pine hairline at the seam makes it one opening spread ---------- */
.eight { background: var(--green); color: #fff; padding: 0 0 var(--sec); text-align: center; }
.eight > .wrap::before { content: ""; display: block; height: 1px; background: rgba(217, 185, 126, .4); margin-bottom: 72px; }
.eight .sec-label { color: var(--pine); margin-bottom: 20px; }
.eight-h { display: flex; flex-direction: column; align-items: center; font: inherit; letter-spacing: 0; }
.e-num { display: flex; align-items: baseline; justify-content: center; color: #fff; font-family: var(--disp); line-height: .8; transform-origin: 50% 100%; }
.e-8 { font-size: clamp(9rem, 51vw, 15rem); letter-spacing: -.04em; }
.e-unit { font-size: clamp(2.6rem, 12vw, 4.4rem); margin-left: .08em; letter-spacing: 0; color: var(--pine); }
.e-tag { color: var(--on-green-q); padding-top: 12px; }
.e-mid { order: 0; display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; font: 400 clamp(1.75rem, 7.7vw, 2.5rem)/1.2 var(--disp); color: #fff; padding: 30px 0 34px; }
/* a border, not a 1px fill, so the rule snaps to a whole pixel and stays pine at every width */
.e-mid::before, .e-mid::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--pine); max-width: 120px; }
.eight-note { margin: 36px auto 0; max-width: 40ch; color: var(--on-green); }
.eight-note b { font-weight: 600; color: #fff; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 36px; }
.week li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; border: 1px solid var(--pine); background: var(--pine); color: var(--ink); font: 600 .75rem/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.week li span { font: 400 .8125rem/1.2 var(--text); letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.m-on .e-num[data-reveal="scale"]:not(.is-in) { transform: scale(.96); }
  html.m-on .week li[data-reveal] { transition: opacity var(--m-dur) var(--m-ease) var(--d, 0ms), background-color .5s ease var(--d, 0ms), color .5s ease var(--d, 0ms); }
  html.m-on .week li:not(.is-in) { opacity: 1; background: transparent; color: #fff; }
  /* the pine rules draw outward from "costs the same as" */
  html.m-on .e-mid::before, html.m-on .e-mid::after { transition: transform .3s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + 120ms); }
  html.m-on .e-mid::before { transform-origin: 100% 50%; }
  html.m-on .e-mid::after { transform-origin: 0 50%; }
  html.m-on .e-mid:not(.is-in)::before, html.m-on .e-mid:not(.is-in)::after { transform: scaleX(0); }
}

/* ---------- services: the work order ---------- */
.services { background: var(--mortar); padding: var(--sec) 0; }
.svc-intro { margin-top: 18px; max-width: 52ch; color: var(--quiet); }
.svc-intro b { color: var(--ink); font-weight: 600; }
.report { position: relative; margin-top: 56px; border-bottom: 2px solid var(--ink); }
.report-rule { display: block; height: 2px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html.m-on .report-rule { transition-duration: .3s, .3s, .4s, .3s; } }
.report-cols { display: grid; grid-template-columns: 44px 1fr; padding: 14px 0 12px; color: var(--quiet); border-bottom: 1px solid var(--ink); }
.rc-a { display: contents; }
.report-cols > span:not(.rc-a) { display: none; }
.row { position: relative; display: grid; grid-template-columns: 44px 1fr; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-m); }
.row:last-child { border-bottom: 0; }
.row-t { display: contents; font: inherit; }
.row-n { font: 600 .9375rem/1.6 var(--text); color: var(--green); }
.row-s { font: 400 1.375rem/1.2 var(--disp); }
.row-c { grid-column: 2; margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--quiet); }
.row-ok { position: absolute; right: 0; top: 22px; color: var(--green); }
.row-none .row-s { color: var(--green); padding-right: 64px; }
.row-status { position: absolute; right: 0; top: 22px; color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: 2px; }
.row-s { padding-right: 28px; }

/* ---------- inspection repairs ---------- */
.insp { padding: var(--sec) 0; }
.insp-head h2 { font-size: clamp(2.75rem, 12vw, 5.75rem); line-height: .98; }
.insp-photo { margin: 32px calc(var(--g) * -1) 0; }
.insp-photo .m-frame { aspect-ratio: 4 / 5; }
.insp-photo img { object-position: 50% 50%; }
.insp-photo .credit { padding-inline: var(--g); }
.insp-body { margin-top: 32px; }
.insp-lead { font-size: 1.1875rem; line-height: 1.5; max-width: 40ch; }
.insp-quote { margin-top: 32px; padding: 26px 0 0; border-top: 1px solid var(--ink); }
.insp-quote > p:first-child { font: 400 clamp(1.5rem, 6vw, 2rem)/1.28 var(--disp); letter-spacing: -.005em; }
.hl8 { color: var(--green); border-bottom: 2px solid var(--pine); }
.insp-quote .insp-cite { margin-top: 14px; color: var(--quiet); }

/* the one repeated component: small caps label left, serif value right, on hairlines */
.ruled { margin-top: 36px; }
.ruled li { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--rule); }
.ruled li:last-child { border-bottom: 1px solid var(--rule); }
.ruled-mortar li { border-color: var(--rule-m); }
.r-k { color: var(--green); }
.r-v { font: 400 1.125rem/1.38 var(--disp); min-width: 0; overflow-wrap: anywhere; }
.r-v a { text-decoration: none; }
.br-d { display: none; }

/* ---------- reviews ---------- */
.reviews { background: var(--green); color: #fff; padding: var(--sec) 0; }
.rev-label { color: var(--pine); font: 600 .75rem/1.35 var(--text); letter-spacing: .12em; }
.rev-score { display: flex; align-items: flex-end; gap: 18px; margin-top: 14px; }
.rev-num { font: 400 clamp(7rem, 36vw, 13.5rem)/.8 var(--disp); padding-bottom: .16em; letter-spacing: -.04em; }
.rev-4 { position: relative; top: -.13em; }
.rev-of { display: flex; flex-direction: column; gap: 10px; padding-bottom: .4rem; }
.rev-stars svg { display: block; }
.rev-count { font: 600 1rem/1.3 var(--text); color: var(--on-green); max-width: 11ch; }
.rev-link { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; margin-top: 18px; font-weight: 600; color: #fff; }
.quotes { margin-top: 40px; display: grid; gap: 0; }
.q { padding: 24px 0 24px; border-top: 1px solid rgba(255, 255, 255, .24); }
.q + .q { padding-top: 24px; }
.q blockquote p { font-size: 1rem; line-height: 1.55; color: var(--on-green); }
.q-lead { border-top-color: rgba(255, 255, 255, .5); }
.q-lead blockquote p { font: 400 1.3125rem/1.3 var(--disp); color: #fff; letter-spacing: -.005em; }
.q figcaption { margin-top: 14px; color: var(--pine); }

/* ---------- about ---------- */
.about { background: var(--mortar); padding: var(--sec) 0; }
.about-head h2 { font-size: clamp(2.75rem, 12vw, 5.75rem); line-height: .98; }
.about-lead { margin-top: 24px; max-width: 62ch; }
.about-txt { margin-top: 24px; }

/* ---------- contact ---------- */
.contact { padding: var(--sec) 0; }
.big-tel { display: block; margin-top: 24px; font: 400 clamp(2.5rem, 11.5vw, 7.5rem)/1 var(--disp); letter-spacing: -.01em; white-space: nowrap; color: var(--green); text-decoration: none; transition: color .3s ease; }
.big-tel:hover { color: var(--green-d); }
.contact-in { margin-top: 40px; }
.contact-say p { max-width: 44ch; }
/* the clock closes the page on phones: the same seven cells as the 8s band, in green on trim white */
.week-c { margin: 32px 0 8px; }
.week-c li { border-color: var(--green); background: var(--green); color: #fff; }
@media (prefers-reduced-motion: no-preference) { html.m-on .week-c li:not(.is-in) { background: transparent; color: var(--green); } }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.contact-actions .btn { width: 100%; }

/* ---------- footer ---------- */
.foot { background: var(--green); color: #fff; padding: 72px 0 76px; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.foot-mark { grid-column: 1 / -1; }
.foot-bd { font-size: 4rem; line-height: .9; }
.foot-sub { color: var(--on-green); margin-top: 12px; }
.foot-col .foot-k { font: 600 .75rem/1.35 var(--text); letter-spacing: .14em; color: var(--pine); margin-bottom: 12px; }
.foot-col p { font-size: 1rem; line-height: 1.6; color: var(--on-green); }
.foot-col p + p { margin-top: 6px; }
.foot-col a { display: inline-block; padding: 4px 0; color: #fff; }
.foot-mail { overflow-wrap: normal; }
.foot-col:nth-of-type(2) { grid-column: 1 / -1; }
.foot-base { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 48px; padding-top: 22px; }
.foot-base::before { content: ""; position: absolute; top: 0; left: var(--g); right: var(--g); height: 1px; background: rgba(255, 255, 255, .2); }
.foot-base p { font-size: .9375rem; color: var(--on-green-q); }
.foot-base a { display: inline-block; padding: 12px 0; min-width: 44px; text-align: center; color: var(--on-green); }
.foot-base p > a:only-child { text-align: left; }

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--green-d); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .4); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--green); color: #fff; font: 600 1rem/1 var(--text); text-decoration: none; --m-fill: rgba(255, 255, 255, .14); }
.actionbar .ab-call { background: var(--pine); color: var(--ink); --m-fill: rgba(255, 255, 255, .35); }

/* ---------- 404 ---------- */
.lost { background: var(--green); color: #fff; padding: 96px 0 120px; min-height: 70svh; }
.lost h1 { font: 400 clamp(3.4rem, 15vw, 7rem)/.95 var(--disp); letter-spacing: -.02em; margin: 14px 0 20px; }
.lost h1 em { color: var(--pine); }
.lost p { max-width: 40ch; color: var(--on-green); }
.lost .label { color: var(--pine); }

@media (max-width: 419px) {
  .ruled li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- tablet and desktop ---------- */
@media (min-width: 720px) {
  :root { --g: 32px; --sec: 112px; }
  .contact-actions .btn { width: auto; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .insp-photo { margin-inline: 0; max-width: 560px; }
  .insp-photo .credit { padding-inline: 0; }
}

@media (min-width: 900px) {
  :root { --g: 40px; --sec: 128px; --hpad: max(40px, calc((100vw - 1360px) / 2 + 40px)); }
  body { font-size: 1.125rem; }
  .nav { display: flex; gap: 28px; margin-left: auto; font: 600 .9375rem/1 var(--text); }
  .nav a { padding: 12px 0; color: var(--on-green); }
  .nav a:hover { color: #fff; }
  .top-in { min-height: 76px; gap: 36px; }
  .mark-bd { font-size: 2rem; }
  .top-call-num { display: inline; }
  .top-call { min-height: 48px; padding: 0 22px; }
  .actionbar { display: none; }

  /* hero: green column left, porch-brick filling the right 58% to the page edge */
  .hero-in { display: grid; grid-template-columns: 42fr 58fr; min-height: clamp(640px, calc(100svh - 108px), 920px); }
  .hero-photo { grid-column: 2; grid-row: 1; height: auto; min-height: 0; }
  /* wider than the column and pinned right, so the sidelight is about a fifth of the frame */
  .hero-photo img { position: absolute; inset: 0 0 0 auto; width: 130%; margin-left: 0; object-position: 50% 50%; }
  .htext { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; padding: 44px 56px 44px var(--hpad); }
  .hname { font-size: clamp(4.5rem, calc((42vw - var(--hpad) - 56px) / 5.05), 7rem); margin: clamp(40px, 8svh, 96px) 0 0; line-height: .96; }
  .hname { margin-top: auto; }
  .htext > div:last-child { margin: 48px 0 auto; }
  .lede { font-size: 1.1875rem; max-width: 34ch; }
  .hero .hl, .hero .lede, .hero .actions, .hero-credit { animation-duration: 1s; }
  @keyframes hero-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  .actions { margin-top: 26px; }

  /* 8 AM ---- costs the same as ---- 8 PM, one baseline across the page */
  .eight { padding-top: 64px; }
  .eight > .wrap::before { margin-bottom: 96px; }
  .eight .sec-label { margin-bottom: 36px; }
  .eight-h { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "am mid pm" "tam . tpm"; align-items: baseline; column-gap: 32px; }
  .e-am { grid-area: am; transform-origin: 0 100%; }
  .e-pm { grid-area: pm; transform-origin: 100% 100%; }
  .e-tag-am { grid-area: tam; padding: 16px 0 0; text-align: left; }
  .e-tag-pm { grid-area: tpm; padding: 16px 0 0; text-align: right; }
  .e-8 { font-size: clamp(9rem, 15vw, 15rem); }
  .e-unit { font-size: clamp(3rem, 4.6vw, 4.6rem); }
  .e-mid { grid-area: mid; padding: 0; gap: 24px; font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
  .e-mid::before, .e-mid::after { max-width: none; }
  .eight-note { margin-top: 56px; font-size: 1.25rem; max-width: 50ch; }
  .week { margin-top: 56px; }
  .week li { padding: 20px 0; font-size: .8125rem; }
  .week li span { font-size: .9375rem; }
  .week-c { display: none; }

  /* services: heading over the left columns, the work order the full content width */
  .svc-head { max-width: 640px; }
  .report { margin-top: 56px; }
  .report-cols, .row { grid-template-columns: 72px 380px minmax(0, 1fr) 40px; column-gap: 32px; }
  .report-cols > span:not(.rc-a) { display: block; }
  .row { padding: 24px 0; align-items: baseline; }
  .row-s, .row-none .row-s { font-size: 1.375rem; padding-right: 0; }
  .row-c { grid-column: 3; margin-top: 0; font-size: 1.0625rem; }
  .row-ok, .row-status { position: static; grid-column: 4; justify-self: end; align-self: start; margin-top: 5px; }
  /* the underline's box ends on the content edge */

  /* inspection: big heading over the portico, the text column starting level with the photo top */
  .insp-grid { display: grid; grid-template-columns: 600px minmax(0, 1fr); column-gap: 80px; align-items: start; }
  .insp-head { grid-column: 1; grid-row: 1; }
  .insp-photo { grid-column: 1; grid-row: 2; margin-top: 48px; max-width: none; }
  .insp-body { grid-column: 2; grid-row: 2; margin-top: 48px; position: sticky; top: 96px; }
  .insp-quote > p:first-child { font-size: 2.25rem; line-height: 1.25; max-width: 30ch; }
  .insp-lead { font-size: 1.375rem; }

  /* reviews: 4.9 and the lead quote side by side, the other three in a row under them */
  .rev-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .rev-head { grid-column: 1 / 5; }
  .rev-score { flex-direction: column; align-items: flex-start; gap: 22px; }
  .rev-count { max-width: none; }
  .quotes { display: contents; }
  .q blockquote p { font-size: 1.0625rem; line-height: 1.6; }
  .q-lead { grid-column: 6 / 13; grid-row: 1; align-self: start; padding: 40px 0 0; }
  .q-lead blockquote p { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.3; }
  .q:not(.q-lead) { grid-row: 2; margin-top: 72px; padding: 28px 0 0; align-self: start; }
  .q:nth-child(2) { grid-column: 1 / 5; }
  .q:nth-child(3) { grid-column: 5 / 9; }
  .q:nth-child(4) { grid-column: 9 / 13; }

  /* about: type only, the name over the left five columns, the story and rows in the right seven */
  .about-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .about-head { grid-column: 1 / 6; position: sticky; top: 96px; }
  .about-lead { margin-top: 40px; font: 400 1.5rem/1.4 var(--disp); max-width: 26ch; }
  .about-head h2 { font-size: clamp(4rem, 6.6vw, 6rem); }
  /* the rows start level with the heading's cap top */
  .about-txt { grid-column: 7 / 13; margin-top: 0; padding-top: 52px; }
  .about-txt .ruled { margin-top: 0; }
  .ruled li { grid-template-columns: 130px 1fr; padding: 16px 0; }
  .r-v { font-size: 1.25rem; }

  /* contact */
  .big-tel { font-size: clamp(6rem, 10.4vw, 10rem); margin-top: 32px; }
  .big-tel { line-height: .92; letter-spacing: -.03em; }
  /* contact closes the page the way the 8s band opens it: centred, then a four-column strip */
  .contact { text-align: center; }
  .big-tel { display: inline-block; }
  .contact-in { margin-top: 48px; }
  .contact-say p { font: 400 1.5rem/1.4 var(--disp); max-width: 34ch; margin-inline: auto; }
  .contact-actions { justify-content: center; margin-top: 32px; }
  .contact-in .ruled { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; column-gap: 40px; margin-top: 88px; text-align: left; border-top: 2px solid var(--ink); }
  .contact-in .ruled li { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 0; border: 0; }
  .contact-in .r-v { font-size: 1.125rem; }
  .contact-in .br-d { display: inline; }
  .contact-in .c-m { display: none; }
  .contact-in .r-mail { font-size: 1.0625rem; white-space: nowrap; }
  .contact-in .r-mail wbr { display: none; }

  .foot { padding: 96px 0 40px; }
  .foot-bd { font-size: 6rem; }
  .foot-base { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* footer on one row: wordmark, then Contact, Hours, Home base, Elsewhere */
@media (min-width: 1200px) {
  .foot-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .foot-mark { grid-column: 1 / 4; }
  .foot-col:nth-of-type(2) { grid-column: 4 / 7; }
  .foot-mail { font-size: .9375rem; }
  .foot-col:nth-of-type(3) { grid-column: 7 / 9; }
  .foot-col:nth-of-type(4) { grid-column: 9 / 11; }
  .foot-col:nth-of-type(5) { grid-column: 11 / 13; }
}