/* Chesapeake Painting LLC: the site is one paint fan deck in the logo's own blues.
   Hero = the deck fanning open from its rivet, each strip a way into its room; Rooms = an index where the room's
   colour floods in on tap; Call = one navy strip pulled from the deck; footer = the swatch rule on paper.
   Each room keeps one colour everywhere. */
:root {
  --navy: #002052; --blue: #026CC5; --paper: #F5F3EE; --card: #FFFFFF; --ink: #0B1A33; --soft: #46505F; --line: #D8D3C8;
  --c1: #002052; --c2: #0B3C83; --c3: #026CC5; --c4: #4A93D6; --c5: #9DC3E8; --c6: #DCE8F5;
  --display: "Fraunces", Georgia, serif; --text: "Hanken Grotesk", system-ui, sans-serif;
  --m: 24px; --max: 1280px;
  --paper-shadow: 0 1px 1px rgba(0, 22, 58, .14), 0 3px 6px -3px rgba(0, 22, 58, .24);
  --m-ease: cubic-bezier(.22, .8, .24, 1); --m-dur: .85s; --m-rise: 18px; --ease-deck: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 900px) { :root { --m: clamp(40px, 5vw, 80px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 32px; }
body { margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); }
@media (min-width: 900px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ol, ul { margin: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dark :focus-visible, .actionbar :focus-visible { outline-color: #fff; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m); }

/* type roles: display, heading, body, label */
.label { font-family: var(--text); font-weight: 600; font-size: 13px; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.h2 { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 30; font-weight: 500; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; color: var(--navy); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: #fff; color: var(--ink); font-weight: 600; }
.skip:focus { top: 12px; }
.preview { background: var(--ink); color: #C9D2DE; font-size: 14px; line-height: 1.4; padding: 8px var(--m); text-align: center; }
.preview b { color: #fff; font-weight: 600; }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.top.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: block; padding-block: 8px; }
.brand img { width: 156px; }
.nav { display: flex; align-items: center; gap: 32px; font-weight: 600; font-size: 16px; }
.nav .m-link { display: none; }
.tel { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 -2px 0 var(--blue); transition: color .3s ease; }
.tel:hover { color: var(--blue); }
@media (min-width: 900px) {
  .top .wrap { min-height: 96px; }
  .brand img { width: 224px; }
  .nav .m-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; background: var(--navy); color: #fff; font-weight: 600; font-size: 18px; text-decoration: none; font-variant-numeric: tabular-nums; --m-fill: rgba(255, 255, 255, .14); }
.btn:focus-visible { outline-offset: 4px; }

/* ---------- hero: the fan deck opens from one rivet ---------- */
.hero { overflow: hidden; padding-bottom: 48px; }
/* --x: how far a strip is pulled out along its own length (hover, tap, the phone cue) */
@property --x { syntax: "<length>"; inherits: false; initial-value: 0px; }
.deck { --sh: 48px; --sb: 16px; --pv: calc(var(--sh) / 2); position: relative; display: block; height: 276px; margin: 4px 0 0 12px; }
/* each strip pivots on the centre of its round end, so the end stays hidden under the cover's square end */
.strip { position: absolute; left: 0; bottom: var(--sb); width: 100%; height: var(--sh); transform-origin: var(--pv) 50%; rotate: var(--a); transform: translateX(var(--x));
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; padding: 7px 14px 0 56px; background: var(--bg); color: var(--fg); text-decoration: none;
  border-radius: calc(var(--sh) / 2) 4px 4px calc(var(--sh) / 2);
  box-shadow: 0 0 0 1px var(--paper), var(--paper-shadow); -webkit-tap-highlight-color: transparent;
  transition: --x .45s var(--m-ease); }
.strip.is-pulled { --x: 24px; transition-duration: .2s; }
.strip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .deck a.strip:hover { --x: 14px; } }
.deck a.strip:focus-visible { --x: 14px; }
/* the entrance, timed in CSS from first paint: the cover rises, the strips fan out from the eyelet Kitchens first,
   each label shows as its strip settles, then the name line by line, the line and the call. Static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .deck { animation: deck-in .25s var(--m-ease) both; }
  .strip:not(.cover) { animation: deck-fan .75s var(--ease-deck) calc(160ms + var(--i) * 90ms) both; }
  .strip:not(.cover) > span { animation: deck-label .2s ease calc(760ms + var(--i) * 90ms) both; }
  .hero h1 .w > span { animation: hero-line .45s var(--ease-deck) 100ms both; }
  .hero h1 .w + .w > span { animation-delay: 180ms; }
  .hero .line { animation: hero-rise .5s var(--m-ease) 350ms both; }
  .hero-call { animation: hero-rise .5s var(--m-ease) 500ms both; }
}
/* phones: once open, Kitchens pulls out and back once to show the strips can be tapped */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .strip.s2 { animation: deck-fan .75s var(--ease-deck) 250ms both, deck-cue .4s ease-in-out 1.6s; }
}
@keyframes deck-in { from { opacity: 0; translate: 0 12px; } }
@keyframes deck-fan { from { rotate: 0deg; } }
@keyframes deck-label { from { opacity: 0; } }
@keyframes deck-cue { 50% { --x: 10px; } }
@keyframes hero-line { from { opacity: 0; transform: translateY(20px); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } }
.strip .nm { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.strip .no { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: .78; white-space: nowrap; }
/* the cover: the deck's name and its code line, both ends cut square */
/* a paper patch under the cover's eyelet end hides the shadows of the strip ends tucked beneath it;
   the cover sits above the patch, so its own shadow still shows */
.deck::after { content: ""; position: absolute; z-index: 1; left: -12px; bottom: calc(var(--sb) - 12px); width: calc(12px + var(--sh) * 1.6); height: calc(var(--sh) + 12px); background: var(--paper); }
.strip.cover { z-index: 2; border-radius: 4px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; padding: 0 12px 0 52px; }
.strip.cover .nm { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 30; font-size: 15px; font-weight: 450; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.strip.cover .no { font-size: 12px; letter-spacing: .05em; opacity: .82; }
.strip.cover i { font-style: normal; }
.s1 { --a: 0deg; --i: 0; --bg: var(--c1); --fg: #fff; }
.s2 { --a: -10deg; --i: 1; --bg: var(--c2); --fg: #fff; }
.s3 { --a: -20deg; --i: 2; --bg: var(--c3); --fg: #fff; }
.s4 { --a: -30deg; --i: 3; --bg: var(--c4); --fg: var(--ink); }
.s5 { --a: -40deg; --i: 4; --bg: var(--c5); --fg: var(--ink); }
.s6 { --a: -50deg; --i: 5; --bg: var(--c6); --fg: var(--ink); }
/* the palest strip gets a hairline inner edge so it doesn't melt into the paper */
.strip.s6 { box-shadow: 0 0 0 1px var(--paper), inset 0 0 0 1px #C9D2DE, var(--paper-shadow); }
/* the rivet: a flat metal eyelet, the same in the hero and the call strip */
.rivet { --r: 28px; --hole: 5px; position: absolute; z-index: 2; width: var(--r); height: var(--r); border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 var(--hole), #8A93A0 calc(var(--hole) + .5px) calc(var(--hole) + 1px), #C9CED6 calc(var(--hole) + 1.5px));
  box-shadow: 0 0 0 1px #8A93A0; }
.deck .rivet { left: calc(var(--pv) - var(--r) / 2); bottom: calc(var(--sb) + var(--sh) / 2 - var(--r) / 2); }

.copy { padding-top: 16px; }
/* phones: a slightly shorter deck so the name, the line and the call all sit in the first screen */
.strip { width: 92%; }
.hero h1 { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 50; font-weight: 600; font-size: clamp(46px, 12.6vw, 64px); line-height: .98; letter-spacing: -.03em; color: var(--navy); }
.hero h1 { font-weight: 400; }
.hero h1 .w { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.hero h1 .w > span { display: block; }
.hero .line { margin-top: 16px; font-size: 19px; line-height: 1.45; color: var(--soft); text-wrap: balance; }
.hero-call { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.hero-call .btn { width: 100%; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }

@media (min-width: 600px) { .hero-call .btn { width: auto; } }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; min-height: calc(100svh - 96px - 37px); max-height: 940px; padding-bottom: 0; }
  /* the call button's bottom edge runs level with the cover's bottom edge: one cut line across the hero */
  .copy { grid-column: 1 / 7; grid-row: 1; align-self: end; position: relative; z-index: 3; padding-block: 64px 56px; }
  .hero h1 { font-size: clamp(64px, 9.6vw, 148px); line-height: .92; }
  .hero .line { font-size: 20px; margin-top: 28px; }
  .hero-call { margin-top: 32px; }
  .deck { --sh: 84px; --sb: 56px; grid-column: 6 / 13; grid-row: 1; align-self: stretch; height: auto; min-height: 560px; margin: 0; }
  .strip { width: min(100%, 760px); align-items: center; padding: 0 28px 0 84px; gap: 16px; }
  .s2 { --a: -9deg; } .s3 { --a: -18deg; } .s4 { --a: -27deg; } .s5 { --a: -36deg; } .s6 { --a: -45deg; }
  .strip .nm { font-size: 14px; }
  .strip.cover { padding-left: 84px; gap: 4px; }
  .strip.cover .nm { font-size: 22px; }
  .strip.cover .no { letter-spacing: .1em; }
  .deck .rivet { --r: 36px; --hole: 6px; }
}

/* ---------- rooms: an index on paper; the room's colour floods across its row on tap or hover ---------- */
.rooms { padding-block: 64px 56px; overflow-x: clip; }
/* phones: heading, list, then the footnote; the colour chip is a desktop piece */
.rooms-grid { display: flex; flex-direction: column; }
.rooms-head { display: contents; }
.rooms-head > p:not(.fn) { margin-top: 12px; color: var(--soft); }
.chip { display: none; }
.index { order: 1; }
.fn { order: 2; }
.index { list-style: none; padding: 0; margin-top: 40px; border-top: 1px solid var(--line); }
.room { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); color: var(--ink); }
.room button, .note { transition: color .35s ease; }
.room::before { content: ""; position: absolute; z-index: -1; inset: -1px calc(-1 * var(--m)); background: var(--bg);
  clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--m-ease); }
.room.is-open { color: var(--fg); }
.room.is-open::before { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (min-width: 900px) {
  .room:hover { color: var(--fg); }
  .room:hover::before { clip-path: inset(0 0 0 0); }
}
.k1 { --bg: var(--c2); --fg: #fff; }
.k2 { --bg: var(--c3); --fg: #fff; }
.k3 { --bg: var(--c4); --fg: var(--ink); }
.k4 { --bg: var(--c5); --fg: var(--ink); }
.k5 { --bg: var(--c6); --fg: var(--ink); }
.room button { font: inherit; color: inherit; background: none; border: 0; margin: 0; width: 100%; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; padding: 28px 0; -webkit-tap-highlight-color: transparent; }
/* the open control: a plain plus that turns to a cross when the row is open */
.room button::after { content: "+"; width: 16px; text-align: center; font-size: 24px; font-weight: 400; line-height: 1; color: var(--soft); transition: rotate .35s var(--m-ease), color .35s ease; }
.room.is-open button::after { rotate: 45deg; color: currentColor; }
.room.is-hint button::after { color: currentColor; }
@media (hover: hover) and (min-width: 900px) { .room:hover button::after { color: currentColor; } }
/* once the rows are in, Kitchens floods and drains once to show the rows open */
.room.is-hint { color: var(--fg); }
.room.is-hint::before { clip-path: inset(0 0 0 0); }
.room button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sw { width: 24px; height: 24px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(11, 26, 51, .14); transition: box-shadow .35s ease; }
.room.is-open .sw { box-shadow: inset 0 0 0 1px currentColor; }
@media (hover: hover) and (min-width: 900px) { .room:hover .sw { box-shadow: inset 0 0 0 1px currentColor; } }
.room .nm { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 30; font-weight: 450; font-size: clamp(36px, 10.4vw, 64px); line-height: 1.02; letter-spacing: -.015em; }
.room .no { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; opacity: .78; }
/* phones: the code sits above the name, as a colour card prints it; desktop: right-aligned with a 16px rule leading in */
@media (max-width: 899px) {
  .room button { grid-template-columns: 24px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 2px; padding-block: 16px 17px; }
  .room button .no { grid-column: 2; grid-row: 1; }
  .room button .sw, .room button .nm, .room button::after { grid-row: 2; }
}
@media (min-width: 900px) {
  .room .no { gap: 12px; font-size: 14px; letter-spacing: .14em; color: #3C4A60; opacity: 1; }
  .room .no::before { content: ""; width: 24px; height: 1px; background: currentColor; }
  .room.is-open .no, .room.is-hint .no { color: inherit; }
}
@media (hover: hover) and (min-width: 900px) { .room:hover .no { color: inherit; } }
.fn sup, .room sup { font-family: var(--text); font-size: .4em; font-weight: 600; vertical-align: super; line-height: 0; margin-left: 3px; }
.fn sup { font-size: .7em; margin: 0 2px 0 0; }
.note { display: grid; grid-template-rows: 1fr; }
.note > p { overflow: hidden; padding-left: 40px; font-size: 17px; }
.note a { font-weight: 600; white-space: nowrap; display: inline-block; min-height: 44px; line-height: 44px; margin-bottom: 16px; }
html.m-on .note { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--m-ease), visibility 0s linear .45s; }
html.m-on .room.is-open .note { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--m-ease), visibility 0s; }
.room.is-open .note > p { margin-top: -12px; }
.fn { margin-top: 20px; font-size: 16px; line-height: 1.45; color: var(--soft); max-width: 32ch; }
/* the paint chip for the room in view (Kitchens until another row is hovered or tapped): the colour on top with
   the room's name printed in it, a white foot with the code and the room's note */
.chip { --bg: var(--c2); position: relative; width: min(100%, 280px); margin-top: 48px;
  flex-direction: column; border-radius: 4px; overflow: hidden; background: var(--card); box-shadow: var(--paper-shadow); }
.chip[data-room="2"] { --bg: var(--c3); }
.chip[data-room="3"] { --bg: var(--c4); }
.chip[data-room="4"] { --bg: var(--c5); }
.chip[data-room="5"] { --bg: var(--c6); }
.chip-c { flex: 0 0 260px; display: flex; align-items: flex-end; padding: 0 18px 16px; background: var(--bg); color: var(--fg, #fff); transition: background-color .3s ease, color .3s ease; }
.chip[data-room="3"], .chip[data-room="4"], .chip[data-room="5"] { --fg: var(--ink); }
.chip[data-room="5"] .chip-c { box-shadow: inset 0 -1px 0 #C9D2DE; }
.chip-foot { display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-top: 1px solid var(--line); }
.chip-no { font-size: 13px; color: var(--soft); }
.chip-nm { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 30; font-weight: 450; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; }
.chip-note { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.chip-say { font-size: 15px; line-height: 1.4; color: var(--soft); }
.chip-tel { font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--ink); white-space: nowrap; }

@media (min-width: 900px) {
  .rooms { padding-block: 144px; }
  .rooms-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .rooms-head { display: block; position: sticky; top: 120px; grid-column: 1 / 5; grid-row: 1; padding-top: 22px; }
  .chip { display: flex; }
  .rooms .h2 { font-size: clamp(72px, 7vw, 96px); }
  .rooms-head > p:not(.fn) { margin-top: 16px; font-size: 20px; }
  .index { grid-column: 5 / 13; grid-row: 1; margin-top: 0; }
  .room::before { left: 0; right: calc((100vw - min(100vw, var(--max) + 2 * var(--m))) / -2 - var(--m)); }
  .room button { grid-template-columns: 28px minmax(0, 1fr) auto 16px; gap: 28px; padding: 30px 0; }
  .sw { width: 28px; height: 28px; }
  .note > p { padding-left: 56px; font-size: 18px; }
  .fn { margin-top: 32px; }
}

/* ---------- the standard: the logo blue as one big colour card that carries its own name ---------- */
.standard { background: var(--blue); color: #fff; padding-block: 88px 64px; }
.slogan { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 50; font-weight: 400; font-size: clamp(46px, 14.4vw, 116px); line-height: .95; letter-spacing: -.03em; max-width: 12ch; }
.slogan b { font-weight: 700; }
.std-text { margin-top: 40px; max-width: 32ch; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
/* the card's label, as a colour card prints it: eyelet, name, code */
.std-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .3); }
.std-card .rivet { position: relative; grid-row: 1 / 3; }
/* phones: the label sits on the right margin, eyelet last, against the left-set slogan */
@media (max-width: 899px) {
  .std-card { grid-template-columns: minmax(0, 1fr) 28px; text-align: right; }
  .std-card .rivet { grid-column: 2; grid-row: 1 / 3; }
  .std-name, .std-code { grid-column: 1; }
}
.std-name { font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 30; font-weight: 450; font-size: 22px; line-height: 1.2; }
.std-code { color: #EEF4FB; }
@media (min-width: 900px) {
  .standard { padding-block: 100px 88px; }
  .slogan { line-height: 1; }
  .std-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
  .slogan { grid-column: 1 / 8; grid-row: 1 / 3; }
  /* the paragraph starts level with the slogan's second line */
  .std-text { grid-column: 8 / 13; grid-row: 1; margin: 0; padding-top: calc(min(12vw, 116px) + 8px); max-width: 34ch; font-size: 22px; line-height: 1.5; text-wrap: pretty; }
  /* pinned bottom right, its code line on the baseline of "every time." */
  .std-card { grid-column: 8 / 13; grid-row: 2; align-self: end; grid-template-columns: 36px minmax(0, 1fr); column-gap: 20px;
    margin: 12px 0 calc(min(12vw, 116px) * .14 + 1px); padding-top: 16px; }
  .std-card .rivet { --r: 36px; --hole: 6px; }
  .std-name { font-size: 28px; line-height: 1.1; }
}

/* ---------- call: one navy strip pulled from the deck, edge to edge; the whole strip calls ---------- */
/* the strip butts onto the blue band, parted by the same 1px paper edge the fan strips have */
.call { overflow: hidden; }
.call-strip { position: relative; background: var(--navy); color: #fff; border-top: 1px solid var(--paper); }
.call-strip .rivet { left: 24px; top: 62px; margin-top: calc(var(--r) / -2); }
.call-in { display: grid; padding-block: 32px 0; padding-left: 68px; padding-right: var(--m); }
.call-h { font-weight: inherit; }
.big-tel { display: inline-block; justify-self: start; font-family: var(--display); font-optical-sizing: auto; font-variation-settings: "SOFT" 50; font-weight: 400; font-size: clamp(40px, 11.2vw, 132px); line-height: 1.05; letter-spacing: -.01em; text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; transition: translate .45s var(--m-ease); }
.big-tel::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.call-strip:hover .big-tel, .big-tel:focus-visible { translate: 6px 0; }
.big-tel:focus-visible { outline: none; }
.call-strip:has(.big-tel:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
/* a two-line timetable at every size */
.times { margin-top: 12px; color: #9DC3E8; }
@media (max-width: 899px) {
  .call-h, .times { text-align: right; }
}
.times span { display: block; }
.call-edge { position: relative; z-index: 2; display: flex; align-items: center;
  margin-top: 24px; padding-block: 8px 12px; border-top: 1px solid rgba(255, 255, 255, .15); }
.call-edge a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: #fff; }
@media (min-width: 900px) {
  /* eyelet on the grid's left edge, the number 24px after it; the hairline and link start under the number */
  .call-strip .rivet { --r: 36px; --hole: 6px; left: calc((100% - min(100%, var(--max) + 2 * var(--m))) / 2 + var(--m)); top: 50%; margin-top: -48px; }
  .call-in { grid-template-columns: minmax(0, 1fr) auto; align-items: last baseline; column-gap: 32px; padding-block: 48px 0; padding-inline: calc(var(--m) + 60px) var(--m); }
  .times { margin: 0; align-self: last baseline; text-align: right; font-size: 16px; letter-spacing: .14em; line-height: 1.6; }
  .call-edge { grid-column: 1 / -1; margin-top: 40px; padding-block: 14px 18px; }
}

/* ---------- footer: paper, the swatch rule as the cut line under the call strip ---------- */
.foot { background: var(--paper); color: var(--soft); padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom)); }
.swatch { display: grid; grid-template-columns: repeat(6, 1fr); height: 8px; }
.swatch i:nth-child(1) { background: var(--c1); }
.swatch i:nth-child(2) { background: var(--c2); }
.swatch i:nth-child(3) { background: var(--c3); }
.swatch i:nth-child(4) { background: var(--c4); }
.swatch i:nth-child(5) { background: var(--c5); }
.swatch i:nth-child(6) { background: var(--c6); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-block: 56px 40px; }
.foot-logo { grid-column: 1 / -1; justify-self: start; display: block; }
.foot-logo img { width: 196px; }
.fh { color: var(--navy); margin-bottom: 4px; }
.fcol p:not(.fh) { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.fcol a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; }
.f-links { grid-column: 1 / -1; }
.f-links p:not(.fh) { column-gap: 28px; }
/* phones: the legal lines as tight 44px rows */
.fine { display: grid; border-top: 1px solid var(--line); padding-top: 32px; font-size: 15px; }
.fine > span { display: flex; align-items: center; gap: 0 6px; min-height: 44px; }
.fine a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.fine .legal { gap: 0 28px; }
@media (min-width: 900px) {
  .foot { padding-bottom: 0; }
  .foot-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 80px 64px; }
  .foot-logo { grid-column: 1 / 5; align-self: start; }
  .foot-logo img { width: 236px; }
  .f-contact { grid-column: 6 / 8; }
  .f-hours { grid-column: 8 / 10; }
  .f-links { grid-column: 10 / 13; }
  .fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 24px 32px; }
}

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.3fr 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--navy); }
.actionbar a { display: grid; place-items: center; min-height: 56px; color: #fff; font-weight: 600; text-decoration: none; --m-fill: rgba(255, 255, 255, .14); touch-action: manipulation; }
.actionbar a:first-child { background: var(--blue); }
.actionbar a + a { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16); }
@media (min-width: 900px) { .actionbar { display: none; } }

/* ---------- 404 ---------- */
.lost .copy p.line { max-width: 34ch; }

@media (prefers-reduced-motion: reduce) {
  .strip, .room button, .room::before, .sw, .note, .big-tel, .chip { transition: none !important; }
}