/* self-hosted by fetch_fonts.py; licences beside the files in /static/fonts */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/static/fonts/plusjakartasans-var-latin-153fc85b70.woff2) format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600 900; font-display: swap;
  src: url(/static/fonts/unbounded-var-latin-22f9b928aa.woff2) format('woff2'); }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/lilitaone-v17-400-latin-d2575d4fa3.woff2) format('woff2'); }
/* CR Plumbing & Drains. System: peliplumbing (type roles and ratios, 3px pill buttons, 12px cards, wave band edges,
   300 to 400ms hovers), faces mapped to Lilita One (display), Unbounded (wide black face, eyebrows and h3), Plus Jakarta Sans (body).
   Colours are the logo's: near-black, sky blue, white, greys, a warm off-white light break. Layout is our own. */
:root {
  --ink: #07090B; --char: #14181C; --steel: #262C31; --mist: #A3ABB2; --slate: #565E65; --line: #D6D1C6;
  --paper: #F4F1EA; --white: #fff; --sky: #48D0FC; --sky-deep: #08688F; --sky-ice: #BDEBFD;
  --f-display: 'Lilita One', sans-serif; --f-wide: 'Unbounded', sans-serif; --f-body: 'Plus Jakarta Sans', sans-serif;
  --w: 1320px; --gut: 20px; --pad-t: 50px; --pad-b: 75px; --r: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1); --focus: var(--ink);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12C26 2 54 2 80 12s54 10 80 0V24Z'/%3E%3C/svg%3E");
}
@media (min-width: 900px) { :root { --gut: 32px; --pad-t: 75px; --pad-b: 90px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.5 var(--f-body); color: var(--ink); background: var(--paper); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: var(--sky-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .3s; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.hdr, .hero, .phead, .band--ink, .band--char, .ftr { --focus: var(--sky); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 12px 18px; font: 700 16px var(--f-body); }
.skip:focus { left: 16px; }
.container { width: min(var(--w), 100%); margin-inline: auto; padding-inline: var(--gut); }

/* type: display 70/34, h2 40/29, h3 19 wide, eyebrow wide, body 16/1.5 */
.h1, .h2 { font: 400 clamp(34px, 1.6rem + 2.9vw, 70px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.h2 { font-size: clamp(29px, 1.5rem + 1.1vw, 42px); }
.h3 { font: 800 17px/1.25 var(--f-wide); letter-spacing: 0; }
@media (min-width: 900px) { .h3 { font-size: 19px; } }
.eyebrow { font: 800 12.5px/1.2 var(--f-wide); text-transform: uppercase; letter-spacing: .14em; color: var(--sky); margin-bottom: 20px; }
.eyebrow--deep { color: var(--sky-deep); }
.lead { font-size: clamp(17px, 1rem + .35vw, 20px); line-height: 1.5; max-width: 40em; margin-top: 20px; }
h2 + p, .h2 + p { margin-top: 20px; }
.more { font: 800 14px/1 var(--f-wide); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--sky); padding-bottom: 6px; white-space: nowrap; transition: border-color .3s, color .3s; }
.more:hover { border-color: var(--ink); color: var(--ink); }

/* buttons: pill, 3px border, colour swap on hover */
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 31px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 53px; padding: 12px 28px; border: 3px solid; border-radius: 999px; font: 400 18px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); text-align: center; }
.btn:active { transform: translateY(1px); }
.btn--sky { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.btn--sky:hover, .btn--sky:focus-visible { background: var(--ink); color: var(--sky); border-color: var(--sky); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--sky); }
.btn--ink:hover, .btn--ink:focus-visible { background: transparent; color: var(--ink); }
.btn--line { background: transparent; border-color: #fff; color: #fff; }
.btn--line:hover, .btn--line:focus-visible { background: #fff; color: var(--ink); }
.band--sky .btn--line { border-color: var(--ink); color: var(--ink); }
.band--sky .btn--line:hover { background: var(--ink); color: #fff; }

/* header: sticky, the phone always in reach */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--ink); border-bottom: 1px solid var(--steel); color: #fff; }
.hdr__in { display: flex; align-items: center; gap: 12px; min-height: 68px; justify-content: space-between; }
.hdr__logo { flex: none; display: block; line-height: 0; }
.hdr__logo img { width: 76px; height: auto; }
.nav { display: none; }
.hdr__call { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.hdr__call .btn { min-height: 44px; padding: 8px 14px; font-size: 15px; white-space: nowrap; }
.hdr__word, .hdr__note { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 2px solid var(--steel); border-radius: 999px; color: #fff; padding: 8px 14px; min-height: 44px; font: 700 14px var(--f-body); cursor: pointer; transition: border-color .3s; }
.menu-btn:hover { border-color: var(--sky); }
.menu-btn__bars, .menu-btn__bars::before { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-btn__bars::before { content: ''; position: absolute; top: 6px; left: 0; }
.menu-btn__bars { margin-bottom: 6px; }
.sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-top: 1px solid var(--steel); padding: 12px var(--gut) 28px; box-shadow: 0 30px 40px rgba(0, 0, 0, .4); }
.sheet__list a { display: block; padding: 14px 0; font: 400 28px/1 var(--f-display); text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid var(--steel); }
.sheet__list a:hover { color: var(--sky); }
.sheet__es { margin-top: 16px; color: var(--mist); font-weight: 600; }
.sheet { max-height: calc(100vh - 68px); overflow-y: auto; overscroll-behavior: contain; }
.sheet__sub { padding: 6px 0 10px 14px; border-bottom: 1px solid var(--steel); }
.sheet__list .sheet__sub a { padding: 9px 0; font: 600 16px/1.3 var(--f-body); text-transform: none; color: #D8DEE2; border-bottom: 0; }
.sheet__list .sheet__sub a:hover, .sheet__list .sheet__sub a:focus-visible { color: var(--sky); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dd__btn, .dd__menu { display: none; }
@media (min-width: 1000px) {
  .hdr__in { min-height: 92px; gap: 28px; }
  .hdr__logo img { width: 108px; }
  .nav { display: block; margin-inline: auto; }
  .nav ul { display: flex; gap: 6px; }
  .nav a { display: block; white-space: nowrap; padding: 10px 12px; font: 600 16px var(--f-body); color: #fff; text-decoration: none; border-radius: 999px; transition: color .3s, background-color .3s; }
  .nav a:hover, .nav a[aria-current] { color: var(--sky); }
  .nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--sky); border-radius: 0; }
  .menu-btn { display: none; }
  .hdr__call { margin-left: 0; }
  .hdr__call .btn { min-height: 53px; padding: 12px 26px; font-size: 18px; }
  .hdr__word { display: inline; white-space: pre; }
  .hdr__note { flex-direction: column; font: 600 12.5px/1.35 var(--f-body); color: var(--mist); text-align: right; }
  /* services dropdown: opens on hover (Peli's own), and by its button for keyboard and touch */
  .nav .dd { position: relative; display: flex; align-items: center; }
  .dd__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 44px; margin-left: -10px; background: none; border: 0; color: #fff; cursor: pointer; transition: color .3s; }
  .dd__btn::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
  .dd:hover .dd__btn, .dd__btn:focus-visible { color: var(--sky); }
  .dd:hover .dd__btn::before, .dd.is-open .dd__btn::before { transform: translateY(2px) rotate(-135deg); }
  .dd__menu { display: block; position: absolute; top: 100%; left: 0; min-width: 270px; background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 18px 30px rgba(7, 9, 11, .35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility .3s; }
  .dd:hover .dd__menu, .dd.is-open .dd__menu { opacity: 1; visibility: visible; transform: none; }
  .nav .dd__menu { display: block; }
  .nav .dd__menu a { padding: 10px 12px; border-radius: 6px; font: 600 15px/1.25 var(--f-body); color: var(--ink); box-shadow: none; }
  .nav .dd__menu a:hover, .nav .dd__menu a:focus-visible, .nav .dd__menu a[aria-current] { background: var(--sky-ice); color: var(--ink); }
  .dd__all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .nav .dd__all a { font: 800 12.5px/1.25 var(--f-wide); text-transform: uppercase; letter-spacing: .08em; color: var(--sky-deep); }
}

/* wave band edges: the next ground rises into this band like a water line */
.hero, .phead, .band--wave { position: relative; }
.hero, .phead { z-index: 2; }
.hero::after, .phead::after, .band--wave::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: var(--next, var(--paper)); -webkit-mask: var(--wave) repeat-x bottom / 160px 22px; mask: var(--wave) repeat-x bottom / 160px 22px; pointer-events: none; }
@media (min-width: 900px) { .hero::after, .phead::after, .band--wave::after { height: 30px; -webkit-mask-size: 220px 30px; mask-size: 220px 30px; } }

/* bands */
.band { padding: var(--pad-t) 0 var(--pad-b); position: relative; }
.band--paper { background: var(--paper); }
.band--white { background: var(--white); }
.band--ink { background: var(--ink); color: #fff; }
.band--char { background: var(--char); color: #fff; }
.band--sky { background: var(--sky); color: var(--ink); }
.band--ink p, .band--char p { color: #D8DEE2; }
.sect-head { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 36px; }
.sect-head .eyebrow { margin-bottom: 14px; }

/* the stage: his own work on display. A photo, a clip or a quote with an offset outline behind it. */
.stage { position: relative; margin: 0 14px 14px 0; z-index: 3; }
.stage__media { position: relative; border-radius: var(--r); overflow: hidden; background: var(--char); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.stage__media img, .stage__media video { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.stage__cap { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); background: var(--ink); color: #fff; font: 600 12.5px/1.3 var(--f-body); padding: 8px 14px; border-radius: 10px; z-index: 2; }
.stage--clip .stage__media video { aspect-ratio: 9 / 16; }

/* hero */
.hero { background: var(--ink); color: #fff; isolation: isolate; --next: var(--paper); }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 11, .95), rgba(7, 9, 11, .82) 48%, rgba(7, 9, 11, .5)), linear-gradient(0deg, rgba(7, 9, 11, .75), transparent 40%); }
.hero__in { display: grid; gap: 28px; padding-top: 44px; padding-bottom: 0; }
.hero__copy { padding-bottom: 36px; }
.hero__copy .h1 { max-width: 11em; }
.hero__copy .lead { max-width: 33em; }
.hero__es, .phead .hero__es { margin-top: 18px; font: 600 14px var(--f-body); color: var(--sky-ice); }
.hero__card { width: min(210px, 52vw); justify-self: end; margin-bottom: -56px; }
.hero__card .stage__cap { font-size: 11.5px; padding: 6px 10px; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4.2fr); gap: 48px; align-items: end; min-height: min(80vh, 800px); padding-top: 72px; }
  .hero__copy { padding-bottom: 130px; }
  .hero__card { width: 100%; max-width: 340px; margin-bottom: -170px; justify-self: center; }
  .hero__card .stage__cap { font-size: 12.5px; padding: 8px 14px; }
}

/* proof strip */
.proof { padding-top: 92px; }
@media (min-width: 900px) { .proof { padding-top: 76px; padding-bottom: 20px; } }
.proof__grid { display: grid; gap: 0; }
.proof__i { padding: 22px 0; border-top: 2px solid var(--ink); }
.proof__i dt { font: 400 clamp(28px, 1.4rem + 1.2vw, 40px)/1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.proof__i dt a { color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--sky); transition: border-color .3s; }
.proof__i dt a:hover { border-color: var(--ink); }
.proof__i dd { color: var(--slate); max-width: 30em; font-size: 15px; }
@media (min-width: 900px) { .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; width: 62%; } .proof__i { padding: 24px 0 28px; } }

/* services bento */
.svc { padding-top: 20px; }
.bento { display: grid; gap: 16px; }
.tile { position: relative; display: grid; align-items: end; min-height: 300px; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; background: var(--char); isolation: isolate; box-shadow: 0 3px 15px rgba(7, 9, 11, .16); }
.tile__img { position: absolute; inset: 0; z-index: -2; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile__body { display: grid; gap: 8px; padding: 24px; }
.tile__t { color: #fff; }
.tile__p { font-size: 15px; color: #E3E8EB; max-width: 30em; }
.tile__go { justify-self: start; font: 800 12px var(--f-wide); text-transform: uppercase; letter-spacing: .1em; color: var(--sky); border-bottom: 3px solid var(--sky); padding-bottom: 5px; margin-top: 6px; transition: padding .3s, color .3s; }
.tile:hover { color: #fff; }
.tile:hover img { transform: scale(1.05); }
.tile:hover .tile__go, .tile:focus-visible .tile__go { color: #fff; padding-right: 14px; }
.tile--a .tile__t { font: 400 clamp(30px, 1.4rem + 1.6vw, 44px)/1 var(--f-display); text-transform: uppercase; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.35fr 1.35fr 1fr; grid-template-areas: "a a b" "a a c" "d e f"; grid-template-rows: 270px 270px 330px; gap: 20px; }
  .tile--a { grid-area: a; } .tile--b { grid-area: b; } .tile--c { grid-area: c; } .tile--d { grid-area: d; } .tile--e { grid-area: e; } .tile--f { grid-area: f; }
  .tile { min-height: 0; }
  .tile--a .tile__body { padding: 36px; }
}

/* how CR Plumbing works: a pipe with joints */
.how { padding-bottom: calc(var(--pad-b) + 30px); }
.how__in { display: grid; gap: 48px; }
.how__copy > p { max-width: 36em; }
.how__stage { position: relative; padding-bottom: 80px; margin-right: 0; }
.how__stage .stage--big { width: 82%; margin-left: auto; }
.how__stage .stage--big .stage__media img { aspect-ratio: 4 / 5; }
.how__stage .stage--small { position: absolute; left: 0; bottom: 6px; width: 44%; z-index: 4; }
.how__stage .stage--small .stage__media img { aspect-ratio: 1; }
@media (min-width: 900px) { .how__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; } .how__stage { padding-bottom: 130px; } }

/* reviews */
.rev__in { display: grid; gap: 44px; }
.rev__num { font: 400 clamp(110px, 20vw, 190px)/.85 var(--f-display); letter-spacing: -.01em; }
.rev__sub { font: 800 14px var(--f-wide); text-transform: uppercase; letter-spacing: .06em; margin-top: 12px; }
.quote { margin: 0; padding: 26px 0; border-top: 2px solid var(--ink); }
.quote blockquote p { font: 700 clamp(20px, 1rem + .75vw, 27px)/1.35 var(--f-body); max-width: 30em; text-wrap: pretty; }
.quote figcaption { margin-top: 14px; font: 700 12.5px/1.4 var(--f-wide); text-transform: uppercase; letter-spacing: .05em; color: var(--slate); }
.quote__about { display: block; margin-top: 8px; font: 400 15px/1.5 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--slate); }
@media (min-width: 900px) { .rev__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 90px; } .rev__list .quote:first-child { border-top: 0; padding-top: 0; } }

/* commercial: a wall of framed photos that hangs over the band's edge */
.band--char { --char: #1B2127; }
.com { padding-bottom: 60px; }
.com__in { display: grid; gap: 40px; }
.com__copy > p { max-width: 34em; }
.com__wall { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; align-items: start; position: relative; z-index: 3; }
.frame { margin: 0; background: #fff; border-radius: var(--r); padding: 7px 7px 0; box-shadow: 0 3px 15px rgba(7, 9, 11, .22); transition: box-shadow .4s; color: var(--ink); }
.frame > div { border-radius: 6px; overflow: hidden; transition: transform .4s var(--ease); }
.frame img { width: 100%; height: auto; }
.frame figcaption { padding: 10px 6px 13px; font: 600 13px/1.35 var(--f-body); color: var(--slate); }
.frame:hover { box-shadow: 0 14px 34px rgba(7, 9, 11, .3); }
.frame:hover > div { transform: translateY(-3px); }
.com .frame img { object-fit: cover; aspect-ratio: 3 / 4; }
.frame--a { grid-column: 1 / 3; }
.com .frame--a img { aspect-ratio: 4 / 4.4; }
@media (min-width: 900px) {
  .com { padding-bottom: 90px; }
  .com__in { grid-template-columns: minmax(0, 4.6fr) minmax(0, 6fr); gap: 70px; align-items: center; }
  .com__wall { display: block; height: 540px; margin-bottom: -110px; }
  .com__wall .frame { position: absolute; }
  .frame--a { right: 0; top: 0; width: 62%; }
  .com .frame--a img { aspect-ratio: 4 / 5; }
  .frame--b { left: 0; top: 200px; width: 40%; z-index: 2; }
  .frame--c { right: 4%; top: 410px; width: 27%; z-index: 4; }
}
.areas { padding-top: var(--pad-t); }
@media (min-width: 900px) { .com + .areas { padding-top: 150px; } }
@media (max-width: 899px) { .com + .areas { padding-top: 70px; } }
.areas__list { font: 400 clamp(26px, 1.2rem + 2vw, 54px)/1.25 var(--f-display); text-transform: uppercase; color: #fff; max-width: 22em; margin-top: 26px; }
.areas__list a { white-space: nowrap; color: #fff; text-decoration: none; transition: color .3s; }
.areas__list a:hover, .areas__list a:focus-visible { color: var(--sky); }
.areas__list span { color: var(--sky); }
.areas { padding-bottom: calc(var(--pad-b) + 20px); }

/* call to action */
.cta__in { display: grid; gap: 28px; align-items: center; }
.cta .eyebrow { color: var(--ink); }
.cta__text { margin-top: 18px; font-size: 18px; max-width: 24em; }
.cta__tel { display: block; font: 400 clamp(46px, 2rem + 4.6vw, 104px)/1 var(--f-display); color: var(--ink); text-decoration: none; letter-spacing: .01em; transition: opacity .3s; }
.cta__tel:hover { opacity: .78; color: var(--ink); }
.cta__es { margin-top: 18px; font-weight: 700; }
.cta .btns { margin-top: 20px; }
@media (min-width: 900px) { .cta__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 60px; } .cta__act { text-align: left; } }

/* inner page heads */
.phead { background: var(--ink); color: #fff; padding: 36px 0 78px; --next: var(--paper); }
.phead .h1 { max-width: 12em; }
.phead .lead { max-width: 36em; color: #D8DEE2; }
.crumbs { margin-bottom: 26px; font: 600 13px var(--f-body); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--mist); }
.crumbs a { color: #fff; }
.crumbs a:hover { color: var(--sky); }
.crumbs [aria-current] { color: var(--mist); }
.phead__in { display: grid; gap: 40px; }
.phead__stage { width: min(300px, 78%); }
.phead--svc { padding-bottom: 20px; }
.phead--svc .phead__stage { margin-bottom: -84px; }
.phead--svc + .band { padding-top: 130px; }
.phead--svc + .work { padding-top: 130px; }
@media (min-width: 900px) {
  .phead { padding: 48px 0 110px; }
  .phead--svc { padding-bottom: 50px; }
  .phead__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 70px; align-items: end; }
  .phead__stage { width: min(340px, 100%); justify-self: center; }
  .phead--svc .phead__stage { margin-bottom: -170px; }
  .phead--svc + .band { padding-top: 220px; }
}
.stage--quote { background: var(--paper); color: var(--ink); border-radius: var(--r); padding: 32px 28px 76px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); width: 100%; }
.stage--quote blockquote p { font: 700 22px/1.35 var(--f-body); color: var(--ink); }
.stage--quote .stage__cap { left: 28px; bottom: 24px; padding: 8px 14px; }
.stage--clip { width: min(240px, 100%); }
@media (min-width: 900px) { .stage--clip { width: min(270px, 100%); } }

/* service pages */
.sign__in { display: grid; gap: 40px; }
.signs li { position: relative; padding: 22px 0 22px 38px; border-top: 1px solid var(--line); font: 600 18px/1.4 var(--f-body); }
.signs li:last-child { border-bottom: 1px solid var(--line); }
.note { margin-top: 32px; padding: 24px 26px; background: var(--ink); color: #fff; border-radius: var(--r); border-left: 8px solid var(--sky); max-width: 32em; }
.note .h3 { color: var(--sky); margin-bottom: 10px; }
.note p { color: #E3E8EB; }
@media (min-width: 900px) { .sign__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 90px; } }
.steps__list { display: grid; gap: 34px; margin-top: 40px; counter-reset: s; }
.steps__i { border-top: 4px solid var(--sky); padding-top: 18px; }
.steps__i .h3 { color: #fff; margin-bottom: 10px; }
.steps__i p { max-width: 26em; }
@media (min-width: 900px) { .steps__list { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 40px; } .steps { padding-bottom: 120px; } }
.steps { padding-bottom: 100px; }
.work__grid { columns: 2 150px; column-gap: 16px; }
.work__grid .frame { break-inside: avoid; margin-bottom: 22px; }
@media (min-width: 900px) { .work__grid { column-gap: 30px; columns: 3; } .work__grid--1 { columns: 1; max-width: 460px; } .work__grid--2 { columns: 2; max-width: 900px; } .work__grid .frame { margin-bottom: 34px; } }
.quoteband { padding: 60px 0; }
.quote--big { border: 0; padding: 0; }
.quote--big blockquote p { font: 400 clamp(28px, 1.3rem + 2.2vw, 52px)/1.1 var(--f-display); text-transform: uppercase; max-width: 22em; }
.quote--big figcaption { color: var(--ink); }
.quote--big a { color: var(--ink); }
.faq__in { display: grid; gap: 30px; }
.faq__q { border-top: 2px solid var(--ink); }
.faq__q:last-child { border-bottom: 2px solid var(--ink); }
.faq__q summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font: 700 19px/1.35 var(--f-body); position: relative; transition: color .3s; }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 400 34px/1 var(--f-display); color: var(--sky-deep); transition: transform .3s var(--ease); }
.faq__q[open] summary::after { transform: rotate(45deg); }
.faq__q summary:hover { color: var(--sky-deep); }
.faq__q p { padding: 0 0 24px; max-width: 38em; color: var(--slate); }
@media (min-width: 900px) { .faq__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 90px; } }
.rel { padding: 50px 0 60px; }
.rel__h { margin-bottom: 22px; }
.rel__list { display: grid; gap: 14px; }
.rel__list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 84px; padding: 18px 22px; border: 3px solid var(--ink); border-radius: var(--r); color: var(--ink); text-decoration: none; font: 400 22px/1.1 var(--f-display); text-transform: uppercase; transition: background-color .3s, color .3s; }
.rel__go { font: 800 11px var(--f-wide); letter-spacing: .12em; text-transform: uppercase; color: var(--sky-deep); transition: color .3s; }
.rel__list a:hover, .rel__list a:focus-visible { background: var(--ink); color: #fff; }
.rel__list a:hover .rel__go { color: var(--sky); }
@media (min-width: 900px) { .rel__list { grid-template-columns: repeat(3, 1fr); } }

/* services hub */
.hub { padding-top: 60px; }
.hub__row { border-top: 2px solid var(--ink); }
.hub__row:last-child { border-bottom: 2px solid var(--ink); }
.hub__a { display: grid; grid-template-columns: 38px 1fr 84px; gap: 6px 18px; align-items: center; padding: 22px 0; color: var(--ink); text-decoration: none; transition: background-color .3s, padding .4s var(--ease); }
.hub__p { display: block; margin-top: 8px; color: var(--slate); max-width: 34em; }
.hub__img { grid-column: 3; grid-row: 1; }
.hub__img img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.hub__go { display: none; }
.hub__a:hover { background: #fff; padding-left: 14px; padding-right: 14px; color: var(--ink); }
.hub__a:hover .hub__name { color: var(--sky-deep); }
@media (min-width: 900px) { .hub__a { grid-template-columns: 70px 1fr 280px 70px; gap: 30px; padding: 30px 0; } .hub__img img { width: 280px; height: 150px; border-radius: var(--r); } .hub__img--none { display: block; } .hub__go { display: block; grid-column: 4; font: 800 11px var(--f-wide); text-transform: uppercase; letter-spacing: .12em; color: var(--sky-deep); } }

/* areas page */
.areasp__in { display: grid; gap: 30px; }
.areasp__nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.areasp__nav a { display: inline-block; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font: 600 14px var(--f-body); transition: background-color .3s, color .3s; }
.areasp__nav a:hover { background: var(--ink); color: var(--sky); }
.city { padding: 30px 0; border-top: 2px solid var(--ink); }
.city__h { margin-bottom: 8px; }
.city__hoods { font: 700 13px/1.5 var(--f-wide); color: var(--sky-deep); margin-bottom: 14px; }
.city p { max-width: 38em; margin-top: 10px; }
.city .more { display: inline-block; margin-top: 6px; }
@media (min-width: 900px) { .areasp__in { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; align-items: start; } .areasp__nav { position: sticky; top: 120px; } .areasp__nav ul { flex-direction: column; align-items: flex-start; } }

/* about */
.prin { margin-top: 36px; display: grid; gap: 0; }
.prin__i { display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px; padding: 26px 0; border-top: 2px solid var(--ink); }
.prin__i:last-child { border-bottom: 2px solid var(--ink); }
.prin__i p { max-width: 38em; color: var(--slate); }
@media (min-width: 900px) { .prin__i { grid-template-columns: 90px 360px 1fr; gap: 30px; align-items: baseline; } .prin__n { grid-row: auto; font-size: 64px; } }
.about2__in { display: grid; gap: 40px; }
.about2 .h3 { color: var(--sky); margin: 22px 0 8px; }
.about2 .h3:first-child { margin-top: 0; }
@media (min-width: 900px) { .about2__in { grid-template-columns: 1fr 1fr; gap: 90px; } }

/* reviews page */
.revhead { display: grid; gap: 28px; }
.revhead__score { display: flex; flex-direction: column; font: 400 clamp(96px, 18vw, 200px)/.85 var(--f-display); color: var(--sky); }
.revhead__sub { font: 800 13px var(--f-wide); text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-top: 14px; }
@media (min-width: 900px) { .revhead { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 70px; } }
.quote--row { padding: 34px 0; }
.revp__more { margin: 56px 0 8px; }
.revp__short { margin-bottom: 20px; }
.revp__short li { padding: 18px 0; border-top: 1px solid var(--line); font: 600 19px/1.4 var(--f-body); }
.revp__short span { display: block; font: 400 14px var(--f-body); color: var(--slate); margin-top: 4px; }
.revp__short q { quotes: '\201C' '\201D'; }

/* contact */
.reach__tel { display: block; white-space: nowrap; margin-top: 8px; font: 400 clamp(36px, 10.4vw, 110px)/1 var(--f-display); color: var(--sky); text-decoration: none; }
.reach__tel:hover { color: #fff; }
.contact__in { display: grid; gap: 50px; }
.contact__info .h3 { margin: 26px 0 8px; }
.contact__info .h3:first-child { margin-top: 0; }
.contact__info p { max-width: 30em; }
.fcard { background: #fff; border-radius: var(--r); padding: 28px 24px 30px; box-shadow: 0 3px 15px rgba(7, 9, 11, .16); }
.fcard::before { z-index: -1; }
.fcard__lead { color: var(--slate); margin: 12px 0 24px; }
@media (min-width: 900px) { .contact__in { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 90px; align-items: start; } .fcard { padding: 40px 40px 42px; } .contact { padding-top: 90px; } }
.form__row { display: grid; gap: 6px; margin-bottom: 16px; }
.form label { font: 700 14px var(--f-body); }
.form input, .form textarea { width: 100%; font: 400 16px/1.4 var(--f-body); padding: 12px 14px; min-height: 50px; border: 2px solid #9B9689; border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .3s, box-shadow .3s; }
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--sky); }
.form__trap { position: absolute; left: -9999px; }
.form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.form__note { font-size: 14px; color: var(--slate); max-width: 22em; }
.form__go .btn { cursor: pointer; }

/* footer */
.ftr { background: var(--ink); color: #fff; padding: 60px 0 0; margin-top: -1px; border-top: 1px solid var(--steel); }
.ftr__in { display: grid; gap: 34px; }
.ftr__logo img { width: 130px; height: auto; margin-bottom: 14px; }
.ftr__brand p, .ftr__col p { color: #D8DEE2; margin-bottom: 6px; }
.ftr__h { font: 800 12px var(--f-wide); text-transform: uppercase; letter-spacing: .14em; color: var(--sky) !important; margin-bottom: 14px !important; }
.ftr a { color: #fff; transition: color .3s; }
.ftr a:hover { color: var(--sky); }
.ftr__phone { font: 400 30px/1.1 var(--f-display); text-decoration: none; }
.ftr__links { display: grid; gap: 8px; align-content: start; }
.ftr__links a { text-decoration: none; font-weight: 600; }
.ftr__base { margin-top: 44px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--steel); color: var(--mist); font-size: 14px; }
@media (min-width: 900px) { .ftr__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }

/* privacy page */
.legal { background: var(--paper); }
.legal .container { display: grid; gap: 24px; }
.legal__card { background: #fff; border-radius: var(--r); box-shadow: 0 3px 15px rgba(7, 9, 11, .12); padding: clamp(22px, 3vw, 40px); }
.legal__toc-k { font: 800 12px var(--f-wide); text-transform: uppercase; letter-spacing: .12em; color: var(--sky-deep); margin-bottom: 10px; }
.legal__toc-list { columns: 2 260px; padding-left: 1.4em; list-style: decimal; }
.legal__toc-list a { font-weight: 700; }
.legal__sec { padding: 22px 0; border-top: 1px solid var(--line); }
.legal__sec:first-child { border-top: 0; padding-top: 0; }
.legal__h { font: 400 clamp(22px, 1rem + .8vw, 30px)/1.1 var(--f-display); text-transform: uppercase; margin-bottom: 12px; }
.legal__sub { font: 800 15px/1.3 var(--f-wide); margin: 18px 0 8px; }
.legal p, .legal li { max-width: 72ch; margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 1.3em; }
.legal__addr { font-style: normal; font-weight: 700; line-height: 1.7; }

/* motion: transform and opacity only, off for reduced motion */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}
@media (min-width: 900px) { .com .frame--a figcaption { text-align: right; padding-right: 30%; } }

@media (min-width: 1200px) { .hdr__note { display: flex; } .nav a { padding: 10px 14px; } }

/* phone numbers: a face whose hyphen reads as a hyphen (Lilita One draws it like a dash) */
.ph { font-family: var(--f-body); font-weight: 800; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: lining-nums; }
.btn .ph { font-size: .92em; letter-spacing: .03em; }
.cta__act { container-type: inline-size; }
.cta__tel { font: 400 clamp(30px, 10.2cqw, 68px)/1 var(--f-display); white-space: nowrap; letter-spacing: 0; }
.cta__tel .ph { font-weight: 800; letter-spacing: -.01em; }
.reach__tel { font-size: clamp(32px, 8.4vw, 104px); }
.reach__tel .ph { letter-spacing: -.01em; }
.ftr__phone { font-size: 26px; }
.ftr__phone .ph { font-weight: 800; }
/* links on dark grounds */
.band--ink a:not(.btn):not(.tile), .band--char a:not(.btn), .note a { color: var(--sky); }
.band--ink a:not(.btn):not(.tile):hover, .band--char a:not(.btn):hover { color: #fff; }
/* hero card: tidy on phone, shorter hang on desktop */
@media (max-width: 899px) {
  .hero__card { width: 100%; justify-self: stretch; margin-bottom: -44px; }
  .hero__card .stage__media img { aspect-ratio: 16 / 9; }
  .proof { padding-top: 70px; }
}
@media (min-width: 900px) { .hero__card { max-width: 310px; margin-bottom: -110px; } .proof { padding-top: 60px; } }
/* home commercial wall */
@media (min-width: 900px) {
  .com__wall { margin-bottom: -70px; }
  .frame--c { top: 380px; }
  .com .frame--a figcaption { text-align: left; padding-right: 6px; }
}
/* cities on the home page: no trailing dots */
.areas__list { display: flex; flex-wrap: wrap; gap: 6px 26px; max-width: 24em; }
/* contact form card */
/* service page bands */
.comwall { padding-bottom: 70px; }
.comwall + .band { padding-top: 130px; }
@media (min-width: 900px) { .comwall + .band { padding-top: 170px; } }
.steps__list--5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.steps__list--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.now__in { display: grid; gap: 36px; }
.now__list { display: grid; gap: 0; counter-reset: n; }
.now__list li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; padding: 20px 0; border-top: 2px solid var(--steel); font: 700 clamp(18px, 1rem + .5vw, 24px)/1.35 var(--f-body); color: #fff; }
.now__list li:last-child { border-bottom: 2px solid var(--steel); }
.now__list span { font: 400 44px/1 var(--f-display); color: var(--sky); }
@media (min-width: 900px) { .now__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 90px; align-items: start; } }
.feature__in { display: grid; gap: 40px; align-items: center; }
.feature__ph { width: min(420px, 88%); }
.feature__ph .stage__media img { aspect-ratio: 4 / 5; }
.feature p { max-width: 32em; }
@media (min-width: 900px) { .feature__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 100px; } .feature { padding-bottom: 120px; } }
/* services hub: type only */
.hub__a { grid-template-columns: 38px 1fr; }
@media (min-width: 900px) { .hub__a { grid-template-columns: 70px 1fr 90px; } .hub__go { grid-column: 3; } }
/* service areas page */
.areasp .container { display: block; }
.city--lead { display: grid; gap: 14px; padding: 8px 0 34px; border-top: 0; }
.city--lead .city__hoods { margin-top: 12px; }
.citygrid { display: grid; gap: 0 36px; border-top: 2px solid var(--ink); }
.citygrid .city { padding: 22px 0; border-top: 1px solid var(--line); }
.citygrid .city:first-child { border-top: 0; }
@media (min-width: 700px) { .citygrid { grid-template-columns: repeat(2, 1fr); } .citygrid .city:nth-child(2) { border-top: 0; } }
@media (min-width: 1000px) { .citygrid { grid-template-columns: repeat(3, 1fr); } .citygrid .city:nth-child(3) { border-top: 0; } .city--lead { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 60px; align-items: start; } }
.citygrid .city p { font-size: 15px; margin-top: 8px; max-width: 26em; }
/* reviews page */
.revp__in { display: grid; gap: 40px; }
.revp__side { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1000px) { .revp__in { grid-template-columns: minmax(0, 7fr) minmax(0, 3.6fr); gap: 80px; } .revp__side { position: sticky; top: 120px; } .revp__side .frame:nth-child(2) { margin-left: 36px; } .revp__side .frame:nth-child(3) { margin-right: 24px; } }
.revp__side .frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.hy { display: inline-block; width: .34em; height: .11em; background: currentColor; overflow: hidden; text-indent: 1em; white-space: nowrap; line-height: 0; vertical-align: .28em; margin: 0 .1em; }

/* the record's card: 12 radius, 12 padding, photo inset at radius 5, soft shadow; no outlines behind anything */
.stage { margin: 0; background: #fff; color: var(--ink); border-radius: 12px; padding: 12px 12px 0; box-shadow: 0 0 10px rgba(7, 9, 11, .5); }
.stage__media { border-radius: 5px; box-shadow: none; }
.stage__cap { position: static; display: block; max-width: none; background: none; color: var(--slate); font: 600 13px/1.35 var(--f-body); padding: 10px 4px 14px; border-radius: 0; }
.hero__card .stage__cap { font-size: 13px; padding: 10px 4px 14px; }
.stage--quote { background: #fff; padding: 26px 22px 0; box-shadow: 0 0 10px rgba(7, 9, 11, .5); }
.stage--quote .stage__cap { padding: 16px 0 18px; }
.frame { padding: 12px 12px 0; box-shadow: 0 0 10px rgba(7, 9, 11, .5); }
.frame > div { border-radius: 5px; }
.frame:hover { box-shadow: 0 0 18px rgba(7, 9, 11, .55); }
/* home service cards: image inset on top, words on the card ground below */
.tile { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 12px; background: #fff; color: var(--ink); overflow: visible; isolation: auto; box-shadow: 0 3px 15px rgba(7, 9, 11, .16); transition: box-shadow .4s; }
.tile__img { position: relative; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 200px; border-radius: 5px; overflow: hidden; }
.tile__img img { position: absolute; inset: 0; }
.tile__body { padding: 18px 10px 12px; }
.tile__t { color: var(--ink); }
.tile__p { color: var(--slate); }
.tile__go { font: 700 15px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--sky-deep); border: 0; padding: 0; margin-top: 4px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tile:hover { color: var(--ink); box-shadow: 0 6px 22px rgba(7, 9, 11, .28); }
.tile:hover .tile__go, .tile:focus-visible .tile__go { color: var(--ink); padding-right: 0; }
.tile--g .tile__body { padding: 24px 14px; }
.tile--g:hover { box-shadow: 0 3px 15px rgba(7, 9, 11, .16); }
.more__list { margin-top: 14px; display: grid; gap: 10px; }
.more__list a { font-weight: 700; color: var(--ink); text-decoration-color: var(--sky); text-decoration-thickness: 3px; }
.more__list a:hover { color: var(--sky-deep); }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; grid-template-rows: none; gap: 24px; }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e, .tile--f { grid-area: auto; }
  .tile--a { grid-column: span 2; }
  .tile--a .tile__img { min-height: 320px; }
  .tile--a .tile__body { padding: 22px 14px 16px; }
  .tile--g { grid-column: span 2; }
  .more__list { columns: 2; display: block; }
  .more__list li { margin-bottom: 10px; }
}
/* how CR Plumbing works: plain headed paragraphs */
.how__list { margin-top: 30px; }
.how__list li { padding: 20px 0; border-top: 1px solid var(--steel); }
.how__list .h3 { color: #fff; margin-bottom: 6px; }
.how__list p { max-width: 30em; }
/* reviews on home: score row, then the quotes in unequal columns */
.rev__top { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 48px; margin-bottom: 36px; }
.rev__list { display: grid; gap: 0 56px; }
@media (min-width: 900px) { .rev__list { grid-template-columns: 1.5fr 1fr 1fr; } .rev__list .quote:first-child { padding-top: 26px; border-top: 2px solid var(--ink); } .rev__list .quote:first-child blockquote p { font-size: clamp(24px, 1rem + 1vw, 32px); } .rev__list .quote:not(:first-child) blockquote p { font-size: 18px; } }
.rev__sub, .revhead__sub, .quote figcaption, .ftr__h, .rel__go, .legal__toc-k { text-transform: none; letter-spacing: 0; }
.rev__sub { font: 800 19px/1.2 var(--f-wide); margin-top: 0; }
.quote figcaption { font: 600 14px/1.4 var(--f-body); }
.more { font: 700 15px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; }
.ftr__h { font: 800 15px var(--f-wide); }
.ftr__h--2 { margin-top: 26px !important; }
/* plain lists in place of numerals, offset squares, side stripes and pills */
.steps__i { border-top: 1px solid var(--steel); }
.now__list li { grid-template-columns: 1fr; }
.prin__i { grid-template-columns: 1fr; }
@media (min-width: 900px) { .prin__i { grid-template-columns: 360px 1fr; } }
.hub__a { grid-template-columns: 1fr; }
@media (min-width: 900px) { .hub__a { grid-template-columns: 1fr 90px; } .hub__go { grid-column: 2; } }
.signs li { padding-left: 30px; }
.signs li::before { content: ''; position: absolute; left: 4px; top: 34px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky-deep); }
.note { border-left: 0; }
.areas__list { gap: 6px 30px; }
.rel__list a { border: 0; background: #fff; box-shadow: 0 3px 15px rgba(7, 9, 11, .16); }
.rel__list a:hover, .rel__list a:focus-visible { background: var(--ink); }
.areasp__nav a { border: 0; border-radius: 0; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; }
.areasp__nav a:hover { background: none; color: var(--sky-deep); }
.faq__in { grid-template-columns: 1fr; }
.faq__list { max-width: 52em; }
/* header: tall, with the logo big at the top of the page; it settles smaller on scroll and stays sticky */
html { scroll-padding-top: 110px; }
.hdr__in { min-height: 100px; padding-block: 8px; }
.hdr__logo img { width: 112px; }
.hdr.is-small .hdr__in { min-height: 68px; padding-block: 4px; }
.hdr.is-small .hdr__logo img { width: 76px; }
@media (max-width: 459px) { .menu-btn { padding: 8px 12px; } .menu-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 1000px) {
  .hdr__in { min-height: 124px; }
  .hdr__logo img { width: 150px; }
  .hdr.is-small .hdr__in { min-height: 84px; }
  .hdr.is-small .hdr__logo img { width: 100px; }
}
/* footer: tall, four columns, a bottom bar */
.ftr { padding: 70px 0 0; }
.ftr__in { gap: 40px; }
.ftr__logo img { width: 190px; margin-bottom: 18px; }
.ftr__brand p { max-width: 22em; }
@media (min-width: 900px) { .ftr { padding-top: 96px; } .ftr__in { grid-template-columns: 1.25fr 1fr 1fr 1.2fr; gap: 56px; } }
.ftr__bar { margin-top: 70px; border-top: 1px solid var(--steel); }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 70px; margin: 0 auto; padding-top: 18px; padding-bottom: 22px; border: 0; color: var(--mist); font-size: 14px; }
.ftr__base p { margin: 0; color: var(--mist); }
.ftr__base a { color: #fff; }
.how__stage { padding-bottom: 190px; }
@media (min-width: 900px) { .how__stage { padding-bottom: 190px; } }
.more__list a { font-size: 19px; }
.more__list { gap: 16px; }
@media (min-width: 900px) { .more__list li { margin-bottom: 18px; } .tile--g .tile__body { padding: 34px 28px; } .tile--g .h3 { font-size: 22px; } }

/* Google and Yelp side by side, the find-online block, footer and contact links (client request, 2026-10-30) */
.rev__top { align-items: flex-start; }
.rev__src { min-width: 0; }
.rev__src .rev__num { font-size: clamp(96px, 14vw, 150px); }
.rev__src .btns { margin-top: 18px; }
.rev__all { align-self: end; }
.revhead__scores { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.revhead__scores .revhead__score { font-size: clamp(72px, 10vw, 104px); }
.revnote { margin-top: 12px; max-width: 38em; font-size: 14px; line-height: 1.5; color: var(--slate); }
.revgrid { display: grid; gap: 0 64px; }
@media (min-width: 900px) { .revgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profiles__list { display: grid; margin-top: 28px; }
.prof { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 22px 0; border-top: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.prof__name { grid-column: 1; font: 400 clamp(28px, 1.4rem + 1.2vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.prof__sub { grid-column: 1; font-size: 15px; color: var(--slate); }
.prof__go { grid-column: 2; grid-row: 1 / span 2; font: 800 11px var(--f-wide); text-transform: uppercase; letter-spacing: .12em; color: var(--sky-deep); border-bottom: 3px solid var(--sky); padding-bottom: 6px; transition: border-color .3s, color .3s; }
.prof:hover .prof__go, .prof:focus-visible .prof__go { border-color: var(--ink); color: var(--ink); }
@media (min-width: 900px) {
  .profiles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
  .prof { grid-template-columns: 1fr; align-content: start; justify-items: start; padding: 26px 0 8px; }
  .prof__go { grid-column: 1; grid-row: auto; margin-top: 18px; }
}
.ftr__icons { display: flex; gap: 12px; }
.ftr__icons a { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; color: #fff; transition: background-color .3s, color .3s, border-color .3s; }
.ftr__icons svg { width: 22px; height: 22px; fill: currentColor; }
.ftr__icons a:hover, .ftr__icons a:focus-visible { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.contact__links { display: grid; gap: 8px; margin-top: 6px; }
.contact__links a { font-weight: 700; }
.rev > .container > .revnote { margin: 0 0 32px; }