/* NuFresh Clean: one facility cleaning log in the four tones of their wordmark. Archivo only, using its width
   axis: wide bold for display and labels, normal width for text, italic for the slogan's grey and blue words. */
:root {
  --navy: #0e2e54; --blue: #2b6da1; --sky: #3480ba;
  --grey: #5f6b77; --grey-t: #6f7a85; --grey-l: #88929c; --grey-on-navy: #a9b4c0;
  --ink: #0b1626; --text: #2a3644; --paper: #f3f5f7; --white: #fff;
  --rule: #cfd6dd; --rule-navy: rgba(255, 255, 255, .22);
  --line: 1.5px;
  --wrap: min(1240px, 100% - 40px);
  --sec: 64px; --sec-b: 72px;
  --m-dur: .8s; --m-rise: 24px; --m-word: 60ms;
}
@media (min-width: 900px) { :root { --wrap: min(1240px, 100% - 96px); --sec: 140px; --sec-b: 140px; --m-rise: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; font: 400 17px/1.6 "Archivo", system-ui, sans-serif; font-stretch: 100%; color: var(--ink); background: var(--paper); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.label { font-weight: 600; font-size: .75rem; line-height: 1.3; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
/* right-aligned tracked labels end on the rule's edge, not past it */
.rule-top > :last-child, .done-h { margin-right: -.14em; }
.done-h { justify-self: end; }

/* the hero label rule (it draws in with the entrance) */
.rule-top { position: relative; }
.rule-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-c, var(--rule)); transform-origin: 0 50%; }

/* the section index: one flat square per log page, in the wordmark's four steps */
.sq { display: flex; align-items: flex-end; width: 44px; height: 44px; padding: 0 0 6px 7px; font-weight: 700; font-stretch: 112%; font-size: .8125rem; line-height: 1; letter-spacing: .04em; color: var(--white); }
.s1 { background: #0e2e54; } .s2 { background: #1d4f7c; } .s3 { background: #2b6da1; } .s4 { background: #3480ba; }
.log-meta { font-size: .8125rem; }
/* Reviews and About open the same way as the logs: the square and a caps line on its baseline */
.sec-head { display: flex; align-items: baseline; gap: 16px; }
.sec-head .label { font-size: .8125rem; }
.reviews .sec-head .label { color: var(--grey-on-navy); }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--navy); color: var(--white); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 8px; }
.preview { background: var(--ink); color: #c4ccd5; font-size: 14px; line-height: 1.4; padding: 8px 20px; text-align: center; }
.preview b { color: var(--white); font-weight: 600; }

/* ---------- header ---------- */
.site { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: flex; align-items: center; min-height: 48px; }
.logo img { width: 158px; }
.nav { display: none; gap: 32px; font-weight: 500; font-size: 1rem; }
.nav a { text-decoration: none; padding: 10px 0; }
.tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-stretch: 112%; font-size: .95rem; color: var(--navy); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 2px solid var(--navy); border-radius: 4px; background: var(--navy); color: var(--white); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--navy); --m-fill: rgba(14, 46, 84, .08); }
@media (hover: hover) { .btn:hover { border-color: var(--blue); } }

/* ---------- hero: the slogan is the image, each word in its logo tone ---------- */
.hero { padding: 20px 0 0; }
.hero-top { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; padding-bottom: 12px; }
.hero-type { padding-top: 16px; }
.hero h1 { font-weight: 800; font-size: clamp(2.9rem, 12.9vw, 4.6rem); line-height: .94; letter-spacing: -.035em; }
.hero h1 .w { display: block; overflow: hidden; padding: 0 .12em .12em 0; margin: 0 -.12em -.12em 0; }
.hero h1 .w > span { display: inline-block; }
.hero h1 { position: relative; }
.hero h1 .sr { left: 0; top: 0; }
.t1 { color: var(--navy); }
.t2 { color: var(--grey-t); font-style: italic; font-weight: 500; }
.t3 { color: var(--ink); }
.t4 { color: var(--blue); font-style: italic; font-weight: 500; }
.lede { margin-top: 18px; font-size: 1rem; line-height: 1.5; color: var(--text); text-wrap: balance; }
/* phones: the two sentences run on as two lines; desktop sets them one per line */
.actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn:first-child { flex: 1 1 100%; }
.actions .ghost { display: none; }
.hero-photo { margin: 20px -20px 0; aspect-ratio: 390 / 300; }
.hero-photo img { object-position: 50% 85%; }
/* one flat block of the navy field in the first screen, edge to edge on phones, under the photo on desktop */
.strip { margin: 0 -20px; padding: 6px 20px; background: var(--navy); color: var(--grey-on-navy); }
.strip > div { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 12px; padding: 14px 0; }
.strip > div:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-navy); transform-origin: 0 50%; }
.strip dd { font-size: 1rem; letter-spacing: 0; text-transform: none; font-stretch: 100%; font-weight: 600; color: var(--white); }
.strip a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-stretch: 112%; color: var(--white); }
/* The entrance plays from first paint as CSS keyframes (not scroll reveals), so it never waits on a script or
   an observer, and it ends in the plain visible state: header, the rule draws, the slogan rises word by word out
   of its line masks, the line and the button follow, and the photo wipes in and settles. The photo starts fully
   clipped in CSS (no script gates it), so nothing shows before the header; it is whole by 1.15s, and without
   animation (reduced motion) it is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .site { animation: h-fade .3s var(--m-ease-io) both; }
  .hero-top::after { animation: h-draw .6s var(--m-ease-io) .06s both; }
  .hero-top > span { animation: h-fade .5s var(--m-ease-io) .12s both; }
  .hero h1 .w > span { animation: h-word .7s cubic-bezier(.2, .7, .2, 1) .18s both; }
  .hero h1 .t2 > span { animation-delay: .27s; }
  .hero h1 .t3 > span { animation-delay: .36s; }
  .hero h1 .t4 > span { animation-delay: .45s; }
  .hero .lede { animation: h-up .7s var(--m-ease) .65s both; }
  .hero .actions { animation: h-up .7s var(--m-ease) .74s both; }
  .hero-photo { animation: h-wipe-up .65s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .hero-photo img { animation: h-settle 1.4s var(--m-ease) .5s both; }
  .strip { animation: h-fade .4s var(--m-ease-io) .9s both; }
  .strip > div { animation: h-up .4s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
  .strip > div:nth-child(2) { animation-delay: 1.18s; }
  .strip > div:nth-child(3) { animation-delay: 1.26s; }
  .strip > div::after { animation: h-draw .3s var(--m-ease-io) 1.25s both; }
  .strip > div:nth-child(2)::after { animation-delay: 1.33s; }
}
@keyframes h-fade { from { opacity: 0; } }
@keyframes h-draw { from { transform: scaleX(0); } }
@keyframes h-word { from { transform: translateY(112%); } }
@keyframes h-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes h-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes h-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes h-settle { from { transform: scale(1.08); } }
/* the phone action bar waits below the screen edge until the hero has landed (transform, so the kit's own
   translate for hide/show still works on top of it) */
@media (prefers-reduced-motion: no-preference) { .actionbar { animation: ab-in .4s cubic-bezier(.2, .7, .2, 1) 1.1s both; } }
@keyframes ab-in { from { transform: translateY(100%); } }

/* ---------- the log sheet (services and hours share it) ---------- */
.services { background: var(--white); padding: var(--sec) 0 var(--sec-b); }
.log-side { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "sq meta" "h h"; align-items: baseline; column-gap: 16px; margin-bottom: 28px; }
.log-side .sq { grid-area: sq; }
.log-side .log-meta { grid-area: meta; }
.log-h { grid-area: h; margin-top: 20px; font-weight: 700; font-stretch: 118%; font-size: clamp(2.4rem, 10vw, 3.5rem); line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.sheet-head { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.sheet-head .notes-h { display: none; }
.sheet-head .done-h { text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 52px 1fr 32px; grid-template-areas: "n t c" "n d c"; column-gap: 12px; align-items: start; padding: 20px 0; border-bottom: var(--line) solid var(--rule); }
.rows .n { grid-area: n; font-weight: 700; font-stretch: 118%; font-size: 1.75rem; line-height: 1; color: var(--sky); letter-spacing: -.01em; }
.rows h3 { grid-area: t; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.rows p { grid-area: d; margin-top: 4px; font-size: 1rem; line-height: 1.5; color: var(--text); }
.check { grid-area: c; width: 32px; height: 32px; }
.check circle, .check path { fill: none; stroke: var(--sky); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.check path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.check circle { stroke-dasharray: 92; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.m-on [data-reveal] > .check circle { stroke-dashoffset: 92; transition: stroke-dashoffset .7s var(--m-ease) calc(var(--d, 0ms) + 150ms); }
  html.m-on [data-reveal] > .check path { stroke-dashoffset: 22; transition: stroke-dashoffset .45s var(--m-ease) calc(var(--d, 0ms) + 650ms); }
  html.m-on [data-reveal].is-in > .check circle, html.m-on [data-reveal].is-in > .check path { stroke-dashoffset: 0; }
  /* today's check draws last and slower */
  html.m-on .is-today[data-reveal] > .check circle { transition-duration: .9s; transition-delay: calc(var(--d, 0ms) + 300ms); }
  html.m-on .is-today[data-reveal] > .check path { transition-duration: .6s; transition-delay: calc(var(--d, 0ms) + 950ms); }
}
.rows h3, .rows dt { padding-top: 4px; }
.side-est { display: none; }

/* ---------- reviews: the navy band ---------- */
.reviews { background: var(--navy); color: var(--white); padding: var(--sec) 0 var(--sec-b); }
/* phones: every section opens with one device, the index square and a caps line on its baseline */
.rev-big { margin-top: 28px; }
.rev-big .m-w, .hero h1 .m-w { text-indent: 0; padding-right: .06em; margin-right: -.06em; }
.rev-big p:first-child { font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 7.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; text-indent: -.12em; }
/* one name style for every quote */
.reviews .who { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-style: normal; font-weight: 600; font-size: .8125rem; line-height: 1.3; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-on-navy); }
.reviews .who::before { content: ""; flex: none; width: 16px; height: 0; border-top: 2px solid var(--sky); }
.rev-row { margin-top: 48px; border-top: 1px solid var(--rule-navy); }
.rev { padding: 24px 0; border-bottom: 1px solid var(--rule-navy); }
.rev:last-child { padding-bottom: 0; border-bottom: 0; }
.rev p { font-style: italic; font-size: 1.125rem; line-height: 1.5; color: #e6ecf2; }

/* ---------- about: the work, photo half and their own words ---------- */
.about { background: var(--paper); padding: 40px 0 var(--sec-b); }
/* phones: a full-width 4:3 crop that favours the glass and her arm on the sill, 40px of paper under the reviews */
.about-photo { aspect-ratio: 4 / 3; width: 100%; }
.about-photo img { object-position: 15% 20%; }
.about-text { width: var(--wrap); margin: 0 auto; padding-top: 40px; }
.about-big { margin-top: 28px; font-weight: 500; font-size: clamp(1.625rem, 6.6vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; color: var(--navy); }
.about-body { margin-top: 20px; max-width: 34em; color: var(--text); }

/* ---------- hours: the timetable, then the number ---------- */
.hours { background: var(--white); padding: var(--sec) 0 64px; }
.hours .sheet-head { grid-template-columns: 1fr 1fr auto; }
.times > div { display: grid; grid-template-columns: 1fr 1fr 32px; column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: var(--line) solid var(--rule); }
.times dt { font-weight: 600; padding-top: 0; }
.times dd { font-variant-numeric: tabular-nums; color: var(--text); }
.times .closed dt, .times .closed dd { color: var(--grey); font-weight: 400; }
.times .check { grid-area: auto; visibility: hidden; width: 28px; height: 28px; justify-self: end; }
.times .is-today { background: linear-gradient(var(--paper), var(--paper)) 50% / calc(100% + 24px) 100% no-repeat; }
.times .is-today dt, .times .is-today dd { color: var(--navy); font-weight: 700; }
.times .is-today .check { visibility: visible; }
.sheet-note { padding-top: 24px; font-size: 1rem; line-height: 1.5; color: var(--grey); }
/* the closing band: the number as the hero, the way their own ad graphic ends. On phones the area code in grey
   italic sits over the line; on desktop it is one line at the slogan's scale */
.callband { background: var(--navy); color: var(--white); padding: 56px 0 64px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
/* phones: label on its rule, the number, then the LLC line */
.call-h { position: relative; padding-bottom: 12px; color: var(--grey-on-navy); }
.call-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .2); transform-origin: 0 50%; }
.call .sheet-note { padding-top: 0; color: var(--grey-on-navy); }
.call-num { display: inline-block; margin: 24px 0 20px; font-weight: 800; font-stretch: 112%; font-size: clamp(3.2rem, 16.4vw, 4.5rem); line-height: 1; letter-spacing: -.03em; color: var(--white); text-decoration: none; white-space: nowrap; }
/* the band's entrance, from the motion kit: the label and its rule wipe in left to right, the area code and
   the number rise out of their line masks 120ms apart (the slogan's move, with its easing), the LLC line fades */
.call-num { --m-word: 120ms; --m-dur: .7s; --m-ease: cubic-bezier(.2, .7, .2, 1); }
.call-num > span { display: block; }
.call-num .ac { color: var(--grey-on-navy); font-weight: 500; font-style: italic; font-stretch: 100%; }
@media (hover: hover) { .call-num { transition: color .4s var(--m-ease); } .call-num:hover { color: #8fbde4; } }

/* ---------- footer ---------- */
.foot { background: var(--navy); color: #dfe6ee; padding: 72px 0 calc(88px + env(safe-area-inset-bottom)); }
.foot .label { color: var(--grey-on-navy); }
.foot-brand img { width: 220px; }
.slogan { margin-top: 14px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.slogan .t1, .slogan .t3 { color: var(--white); }
.slogan .t2 { color: var(--grey-on-navy); }
.slogan .t4 { color: #8fbde4; }
.foot-log { margin-top: 40px; border-top: 1px solid var(--rule-navy); }
.foot-log > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule-navy); align-items: baseline; }
.foot-log dd { font-size: 1rem; }
.foot-log a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--white); }
.foot-base { margin-top: 36px; display: grid; gap: 8px; font-size: 1rem; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); }
.foot-copy { color: var(--grey-on-navy); }

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: 1.25fr 1fr 1fr; background: var(--white); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--navy); font-weight: 600; text-decoration: none; border-left: 1px solid var(--rule); --m-fill: rgba(14, 46, 84, .08); }
.actionbar .ab-call { background: var(--navy); color: var(--white); border: 0; --m-fill: rgba(255, 255, 255, .16); }
.actionbar svg { width: 20px; height: 20px; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  body { font-size: 18px; }
  .site-in { height: 80px; }
  .logo img { width: 210px; }
  .nav { display: flex; }
  .tel { font-size: 1.05rem; }

  .hero { padding-top: 32px; padding-bottom: 96px; }
  /* the text column and the photo at exactly its 432px cap; the strip hangs under the photo and the buttons end
     on the strip's bottom edge */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) min(432px, 34vw); grid-template-rows: auto auto auto; column-gap: 64px; }
  .hero-top { grid-column: 1 / -1; font-size: .8125rem; }
  .hero-type { grid-column: 1; grid-row: 2 / 4; padding-top: 64px; display: flex; flex-direction: column; }
  .hero-more { flex: 1; display: flex; flex-direction: column; padding-top: 32px; }
  /* sized to the text column, so "Environments" (the longest word, about 6.4em) always fits its mask */
  .hero h1 { font-stretch: 108%; font-size: min(8rem, calc((min(1240px, 100vw - 96px) - min(432px, 34vw) - 64px) / 6.5)); line-height: .98; }
  .lede { margin-top: 0; font-size: 1.375rem; }
  .lede span { display: block; text-wrap: balance; }
  .actions { margin-top: auto; padding-top: 32px; }
  .actions .btn:first-child { flex: 0 0 auto; }
  .actions .ghost { display: inline-flex; }
  /* the photo hangs from the label rule at the file's own 4:5, the log rows run under it */
  .hero-photo { grid-column: 2; grid-row: 2; margin: 0; width: 100%; align-self: start; aspect-ratio: 4 / 5; }
  .hero-photo img { object-position: 50% 50%; }
  .strip { grid-column: 2; grid-row: 3; margin: 0; padding: 6px 24px; }
  .strip > div { grid-template-columns: 7rem 1fr; }
  .strip a { margin-block: -10px; }

  .log-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  /* the left column is the log's sticky index: the page's square, its name, one fact */
  .log-side { grid-column: 1 / 4; position: sticky; top: 112px; display: block; margin: 0; }
  .sq { width: 64px; height: 64px; padding: 0 0 9px 10px; font-size: .9375rem; }
  .log-h { margin-top: 32px; font-size: clamp(2.5rem, 3.4vw, 3.25rem); }
  .log-meta { margin-top: 18px; font-size: .875rem; }
  .sec-head .label { font-size: .875rem; }
  /* Services and Hours: the side runs the sheet's height and its last block ends on the last row's line */
  .log-side { position: static; align-self: stretch; display: flex; flex-direction: column; }
  .side-est { display: grid; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 2px solid var(--navy); }
  .side-est a, .side-est .side-v { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; font-weight: 700; font-stretch: 112%; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.01em; color: var(--navy); text-decoration: none; white-space: nowrap; }
  .sheet { grid-column: 4 / -1; margin-left: 48px; }
  .sheet-head { grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 24px; padding-bottom: 14px; }
  .rows li { grid-template-columns: 96px minmax(0, 1fr) 52px; column-gap: 24px; padding: 26px 0; align-items: start; }
  .rows .n { font-size: 3rem; margin-top: -4px; }
  .rows h3 { font-weight: 600; font-stretch: 112%; font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; padding-top: 0; }
  .rows p { margin-top: 6px; font-size: 17px; line-height: 1.4; color: #5b6670; }
  .check { width: 40px; height: 40px; }
  .rows .check { justify-self: center; }
  .rows .check circle, .rows .check path { stroke-width: 1.2; }

  .rev-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .reviews .sec-head { grid-column: 1 / -1; }
  .rev-big { grid-column: 1 / -1; margin-top: 48px; }
  .rev-big p:first-child { font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1.08; text-indent: -.28em; }
  .rev-row { grid-column: 5 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 64px; }
  .rev { border-bottom: 0; padding: 28px 0 0; }
  .rev + .rev { margin-left: -24px; padding-left: 24px; border-left: 1px solid var(--rule-navy); }
  .rev p { font-size: 1.1875rem; }

  /* the photo at its own 4:5 and its 432px cap, bleeding off the left edge; one text stack in cols 6-11,
     top-aligned with it */
  .about { position: relative; padding: 120px 0; }
  .about-photo { position: absolute; left: 0; top: 120px; width: min(432px, 36vw); aspect-ratio: 4 / 5; }
  .about-photo img { object-position: 30% 22%; }
  .about-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; min-height: calc(min(432px, 36vw) * 1.25); padding: 0; }
  .about-text > * { grid-column: 6 / 12; }
  .about-text > .about-big { grid-column: 6 / -1; }
  .about-big { margin-top: 40px; max-width: 22ch; font-size: clamp(2.5rem, 3.9vw, 3.5rem); line-height: 1.08; text-wrap: balance; }
  .about-body { margin-top: 24px; max-width: 34em; font-size: 1.25rem; line-height: 1.5; }

  .hours { padding-bottom: 64px; }
  /* the same sheet span as Services: an empty 96px numeral column (so "Monday" lines up with the service
     titles), then Day, Office hours and the 52px check column on the Services checks' axis */
  .hours .sheet-head, .times > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 24px; padding-left: 120px; }
  .times > div { padding: 18px 0 18px 120px; }
  .times dt, .times dd { font-size: 1.125rem; }
  .times .check { width: 32px; height: 32px; justify-self: center; }
  .times .is-today { background-size: calc(100% + 32px) 100%; }
  /* the band: the label on its rule, then the number on one line at the slogan's scale, the LLC line on its
     baseline at the right edge */
  .callband { padding: 72px 0 80px; }
  .call-h { padding-bottom: 14px; font-size: .8125rem; }
  .call-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: last baseline; gap: 8px 32px; margin-top: 32px; }
  .call .sheet-note { font-size: .9375rem; }
  .call-num { margin: 0; font-size: clamp(4.5rem, 9vw, 9.5rem); line-height: .95; }
  .call-num > span { display: inline; }
  .call-num .ac { margin-right: .06em; }

  .foot { padding: 80px 0 56px; }
  .foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .foot-brand { grid-column: 1 / 5; }
  .foot-brand img { width: 260px; }
  .foot-log { grid-column: 5 / -1; margin-top: 0; display: grid; grid-template-columns: repeat(4, auto); border-bottom: 1px solid var(--rule-navy); }
  .foot-log > div { display: block; border-bottom: 0; padding: 16px 20px 18px 0; }
  .foot-log > div + div { padding-left: 20px; border-left: 1px solid var(--rule-navy); }
  .foot-log dd { margin-top: 8px; }
  .foot-log a { margin-block: -10px; }
  .foot-base { grid-column: 1 / -1; margin-top: 72px; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; font-size: .9375rem; padding-top: 20px; border-top: 1px solid var(--rule-navy); }

  .actionbar { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .foot-log { grid-template-columns: 1fr 1fr; }
  .foot-log > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .foot-log > div:nth-child(n + 3) { border-top: 1px solid var(--rule-navy); }
}

/* ---------- 404 ---------- */
.lost { padding: 96px 0 120px; min-height: 70svh; }
.lost .label { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.lost h1 { margin-top: 32px; font-weight: 800; font-stretch: 112%; font-size: clamp(2.9rem, 11vw, 6rem); line-height: .95; letter-spacing: -.035em; color: var(--navy); }
.lost p:not(.label) { margin-top: 24px; max-width: 34em; color: var(--text); }
.lost .actions { align-items: center; gap: 12px 28px; }
.lost .actions .btn:first-child { flex: 0 0 auto; }
.lost .home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--navy); }
@media (max-width: 379px) { .hero-top { letter-spacing: .06em; font-size: .75rem; } }
@media (min-width: 900px) { .hero-photo { animation-name: h-wipe-down; } }