/* GoldLeaf Homecare Network — site styles.
   Written for this site; sizes and colors match the former Squarespace site
   (measured from the live pages, Nov 2026). Section colors live in themes.css. */

:root {
  --pagePadding: 4vw;
  --maxPageWidth: 1400px;
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: 1400px;
  --heading-font: 'Manrope', system-ui, sans-serif;
  --body-font: 'Poppins', system-ui, sans-serif;
  /* type scale (Squarespace "size values": 1 = 16px base) */
  --h1v: 4; --h2v: 2.8; --h3v: 2.2; --h4v: 1.6; --largev: 1.4; --smallv: .9;
  --announce-h: 0px;
}

/* Fluid font size, same curve as the old site: grows with the window up to a cap.
   Set on every element so it uses that element's own --v. */
*, *::before, *::after { --fs: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * .012 * var(--maxPageWidth) + 1rem), calc(var(--v) * 1rem))); }
@media screen and (max-width: 767px) {
  *, *::before, *::after { --fs: calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body { overflow-wrap: break-word; margin: 0; font-family: var(--body-font); font-weight: 400; font-size: 1rem; line-height: 1.5em; color: var(--paragraphMediumColor); background: hsla(var(--white-hsl), 1); overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- headings and text ---------- */
h1, h2, h3, h4 { font-family: var(--heading-font); font-weight: 500; letter-spacing: -.02em; margin: 2rem 0; white-space: pre-wrap; }
h1 { --v: var(--h1v); font-size: var(--fs); line-height: calc(1.2em * (1 + (1 - var(--h1v)) / 25)); color: var(--headingExtraLargeColor); }
h2 { --v: var(--h2v); font-size: var(--fs); line-height: calc(1.2em * (1 + (1 - var(--h2v)) / 25)); color: var(--headingLargeColor); }
h3 { --v: var(--h3v); font-size: var(--fs); line-height: calc(1.2em * (1 + (1 - var(--h3v)) / 25)); color: var(--headingMediumColor); }
h4 { --v: var(--h4v); font-size: var(--fs); line-height: calc(1.2em * (1 + (1 - var(--h4v)) / 25)); color: var(--headingSmallColor); }
p { margin: 1rem 0; line-height: 1.5em; color: var(--paragraphMediumColor); }
.sqsrte-large { --v: var(--largev); font-size: var(--fs); color: var(--paragraphLargeColor); }
.sqsrte-small { --v: var(--smallv); font-size: var(--fs); color: var(--paragraphSmallColor); }
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt a { color: var(--paragraphLinkColor); text-decoration: underline; text-underline-offset: .2em; }
.rt h1 a, .rt h2 a, .rt h3 a, .rt h4 a { color: var(--headingLinkColor); }
.rt ul, .rt ol { margin: 1rem 0; padding-left: 40px; }
.rt li > p { margin: .5rem 0; }
.rt strong { font-weight: 700; }
.sqsrte-text-color--white { color: hsla(var(--white-hsl), 1); }
.sqsrte-text-color--black { color: hsla(var(--black-hsl), 1); }
.sqsrte-text-color--accent { color: hsla(var(--accent-hsl), 1); }
.sqsrte-text-color--lightAccent { color: hsla(var(--lightAccent-hsl), 1); }
.sqsrte-text-color--darkAccent { color: hsla(var(--darkAccent-hsl), 1); }
/* the old site showed its one highlighted phrase underlined */
.sqsrte-text-highlight { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--body-font); font-size: 1rem; font-weight: 400; line-height: normal; padding: 1rem 1.3rem; border-radius: 300px; text-decoration: none; cursor: pointer; transition: opacity .1s linear; }
.btn:hover { opacity: .8; }
.btn-primary { background: var(--primaryButtonBackgroundColor); color: var(--primaryButtonTextColor); border: 2px solid var(--primaryButtonTextColor); }
.btn-secondary { background: transparent; color: var(--secondaryButtonBackgroundColor); border: 1px solid var(--secondaryButtonBackgroundColor); }
.btn-tertiary { background: transparent; color: var(--tertiaryButtonBackgroundColor); border: 0; border-bottom: 3px solid var(--tertiaryButtonBackgroundColor); border-radius: 0; padding: 2rem 3rem; }
.btnw { display: flex; align-items: center; width: 100%; height: 100%; }
.btnw.al-left { justify-content: flex-start; }
.btnw.al-center { justify-content: center; }
.btnw.al-right { justify-content: flex-end; }
.btnw.stretch .btn { width: 100%; height: 100%; padding-top: 0; padding-bottom: 0; }

/* ---------- sections ---------- */
main { display: block; }
/* Like the old site, the header sits on top of the first section: the section starts at the top of
   the page (its photo runs behind the header) and its content starts below the header.
   --hdr-h is measured by site.js; these are the usual values. */
:root { --hdr-h: 250px; }
@media (max-width: 767px) { :root { --hdr-h: 190px; } }
main > .sec:first-child { margin-top: calc(-1 * var(--hdr-h)); padding-top: var(--hdr-h); }
.sec { position: relative; display: flex; align-items: center; box-sizing: border-box; color: var(--paragraphMediumColor); }
.sec-bg { position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--pdo, 0px)); overflow: hidden; pointer-events: none; background: var(--siteBackgroundColor); }
.sec-bg.has-img { background: transparent; }
.sec-bg img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.sec-ov { position: absolute; inset: 0; background: var(--backgroundOverlayColor); }
.cw { position: relative; width: 100%; display: flex; justify-content: center; box-sizing: content-box; }
.h-small { min-height: 33vh; }
.h-medium { min-height: 66vh; }
.h-large { min-height: 100vh; }
.h-custom { min-height: var(--ch, 0); }
.v-middle.h-small > .cw { padding: 3.3vmax 0; }
.v-middle.h-medium > .cw { padding: 6.6vmax 0; }
.v-middle.h-large > .cw { padding: 10vmax 0; }
.v-top:not(.h-custom) { align-items: flex-start; }
.v-top:not(.h-custom) > .cw { padding-top: var(--pagePadding); }
.v-top.h-small > .cw { padding-bottom: 6.6vmax; }
.v-top.h-medium > .cw { padding-bottom: 13.2vmax; }
.v-top.h-large > .cw { padding-bottom: 20vmax; }
.v-bottom:not(.h-custom) { align-items: flex-end; }
.v-bottom:not(.h-custom) > .cw { padding-bottom: var(--pagePadding); }
.v-bottom.h-small > .cw { padding-top: 6.6vmax; }
.v-bottom.h-medium > .cw { padding-top: 13.2vmax; }
.v-bottom.h-large > .cw { padding-top: 20vmax; }
.h-custom > .cw { align-self: stretch; padding: var(--cp, 0) 0; }

/* Wavy bottom edge ("section divider"): the section's own bottom strip is cut to the
   wave shape, and the next section's background reaches up underneath it. */
.sec.dv { padding-bottom: var(--dh); }
.sec.dv > .sec-bg { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--dh) + 1px) no-repeat, var(--wave) bottom / 100% var(--dh) no-repeat;
                            mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--dh) + 1px) no-repeat, var(--wave) bottom / 100% var(--dh) no-repeat; }

/* ---------- layout grid (positions per page in /css/pages/*.css) ---------- */
.fe { position: relative; width: 100%; }
.b { position: relative; min-width: 0; }
.blk { display: flex; flex-direction: column; height: 100%; width: 100%; }
.aw { display: flex; flex-direction: column; height: 100%; width: 100%; }
:where(.b.text, .b.accordion, .b.social, .b.code, .b.form) .aw { height: auto; }
:where(.b.text) .blk { justify-content: flex-start; }

/* images fill their grid area */
.b.image .aw, .b.image .img, .b.image .img > a { height: 100%; width: 100%; }
/* a photo fills its grid area but never makes the area bigger (same as the old site) */
.b.image .blk { position: relative; }
.b.image .aw { position: absolute; inset: 0; }
.img { margin: 0; position: relative; overflow: hidden; }
.img img { display: block; width: 100%; height: 100%; object-fit: var(--image-component-object-fit, cover); object-position: var(--image-component-focal-point, 50% 50%); }
.img > a { display: block; }

/* shapes */
.b.shape .aw { height: 100%; }
.shape { width: 100%; height: 100%; background: var(--shape-block-background-color); }

/* horizontal line */
.b.line .aw { justify-content: center; }
.b.line hr { width: 100%; margin: 0; border: 0; border-top: var(--stroke-thickness, 1px) solid var(--tweak-line-block-line-color); }

/* social icons */
.social { display: flex; flex-wrap: wrap; gap: var(--social-icons-gap, 12px); align-items: center; }
.social.al-center { justify-content: center; }
.social.al-right { justify-content: flex-end; }
.social a { display: block; width: var(--social-icons-dimension, 20px); height: var(--social-icons-dimension, 20px); color: var(--social-links-block-main-icon-color); }
.social svg { width: 100%; height: 100%; fill: currentColor; display: block; overflow: visible; transform: scale(var(--si-scale, 1)); }

/* accordion */
.acc details { border-bottom: var(--accordion-divider-thickness, 1px) solid var(--tweak-accordion-block-divider-color); }
.acc details:first-child { border-top: var(--accordion-divider-thickness, 1px) solid var(--tweak-accordion-block-divider-color); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: var(--accordion-item-padding-top, 15px) var(--accordion-item-padding-right, 0) var(--accordion-item-padding-bottom, 15px) var(--accordion-item-padding-left, 0); }
.acc summary::-webkit-details-marker { display: none; }
.acc .acc-t { margin: 0; color: var(--tweak-accordion-block-title-color, var(--headingSmallColor)); }
.acc .plus { position: relative; flex: none; width: var(--accordion-icon-size, 14px); height: var(--accordion-icon-size, 14px); }
.acc .plus::before, .acc .plus::after { content: ''; position: absolute; background: var(--tweak-accordion-block-icon-color, currentColor); }
.acc .plus::before { left: 0; right: 0; top: 50%; height: var(--accordion-icon-thickness, 1px); transform: translateY(-50%); }
.acc .plus::after { top: 0; bottom: 0; left: 50%; width: var(--accordion-icon-thickness, 1px); transform: translateX(-50%); transition: transform .2s; }
.acc details[open] .plus::after { transform: translateX(-50%) rotate(90deg); }
.acc .acc-d { padding: 0 0 var(--accordion-description-padding-bottom, 30px); }

/* code (BBB seal) */
.code img { max-width: 100%; height: auto; display: block; }

/* ---------- header ---------- */
.announce { background: hsla(var(--black-hsl), 1); color: hsla(var(--accent-hsl), 1); text-align: center; position: relative; z-index: 51; }
.announce .in { padding: .8em 3em; --v: var(--smallv); font-size: var(--fs); line-height: 1.5em; }
.announce p { margin: 0; color: inherit; }
.announce p + p { margin-top: 1.5em; }
.announce a { color: inherit; text-decoration: none; display: block; }
.announce .x { position: absolute; top: 12px; right: 1.2vw; background: none; border: 0; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 4px; }
.announce.closed { display: none; }

.site-header { position: relative; z-index: 50; background: hsla(var(--white-hsl), 1); box-shadow: 0 12px 12px rgba(0, 0, 0, .15); }
.site-header::after { content: ""; position: absolute; inset: 0; border: 4px solid hsla(var(--white-hsl), 1); pointer-events: none; }
.hdr { display: flex; align-items: center; padding: .1vw 4vw; min-height: 150px; }
.hdr .logo { flex: none; display: block; margin-right: 24px; }
.hdr .logo img { display: block; height: 155px; width: auto; }
.hdr nav.main { display: flex; flex-wrap: nowrap; gap: 0 11px; flex: none; white-space: nowrap; }
.hdr nav.main a { color: hsla(var(--black-hsl), 1); text-decoration: none; font-size: 1rem; line-height: 1.5em; padding: .1em 0; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; }
.hdr nav.main a[aria-current="page"], .hdr nav.main a:hover { background-size: 100% 1px; }
.hdr .hsocial { display: flex; gap: 0; margin-left: auto; padding-left: 16px; }
.hdr .hsocial a { width: 36px; height: 44px; display: flex; align-items: center; justify-content: center; color: hsla(var(--black-hsl), 1); }
.hdr .hsocial svg { width: 25px; height: 25px; fill: currentColor; }
.hdr .call { margin-left: 8px; flex: none; color: hsla(var(--black-hsl), 1); border: 1px solid hsla(var(--black-hsl), 1); background: transparent; padding: 1rem 1rem; white-space: pre; }
.burger { display: none; background: none; border: 0; width: 50px; height: 37px; cursor: pointer; position: relative; margin-left: auto; }
.burger span { position: absolute; left: 7px; right: 7px; height: 1px; background: hsla(var(--black-hsl), 1); transition: transform .2s; }
.burger span:first-child { top: 14px; } .burger span:last-child { top: 23px; }
.menu-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-open .burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.mobile-menu { display: none; }
/* Sign-in button + menu (Client & family / Caregiver / Office staff); a <details> so it opens without scripts */
.signin { position: relative; flex: none; }
.signin summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--body-font); font-size: 1rem; line-height: normal; padding: 1rem 1.2rem; border-radius: 300px; background: hsla(var(--black-hsl), 1); color: hsla(var(--accent-hsl), 1); white-space: nowrap; }
.signin summary::-webkit-details-marker { display: none; }
.signin summary > svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.signin summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.signin[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.signin summary:hover { opacity: .85; }
.signin summary:focus-visible { outline: 2px solid hsla(var(--black-hsl), 1); outline-offset: 3px; }
.hdr .signin { margin-left: 8px; }
.signin-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; width: 330px; padding: 8px; background: hsla(var(--white-hsl), 1); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); text-align: left; white-space: normal; }
.signin-menu::before { content: ""; position: absolute; top: -7px; right: 44px; width: 14px; height: 14px; background: hsla(var(--white-hsl), 1); transform: rotate(45deg); border-radius: 3px; }
.signin-menu .sm-h { margin: 0; padding: 10px 12px 8px; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: hsla(var(--black-hsl), .55); }
.signin-menu > a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: hsla(var(--black-hsl), 1); text-decoration: none; }
.signin-menu > a:hover, .signin-menu > a:focus-visible { background: hsla(var(--accent-hsl), .16); outline: none; }
.signin-menu b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.signin-menu small { display: block; font-size: 13px; line-height: 1.35; color: hsla(var(--black-hsl), .6); }
.signin-menu .sm-i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: hsla(var(--accent-hsl), 1); display: flex; align-items: center; justify-content: center; }
.signin-menu .sm-i svg { width: 20px; height: 20px; fill: hsla(var(--black-hsl), 1); }
.signin-menu .sm-f { margin: 6px 4px 0; padding: 10px 8px 4px; border-top: 1px solid hsla(var(--black-hsl), .08); font-size: 13px; line-height: 1.5; color: hsla(var(--black-hsl), .65); }
.signin-menu .sm-f a { color: hsla(var(--black-hsl), 1); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Laptops: the full header (with the Sign in button) needs 1600px. Below that the logo gets smaller and the icons tighter;
   below 1400px the social icons leave the header (they stay in the phone menu and the footer). */
@media (min-width: 1250px) and (max-width: 1599px) {
  .hdr .logo { margin-right: 18px; }
  .hdr .logo img { height: 118px; }
  .hdr .hsocial { padding-left: 10px; }
  .hdr .hsocial a { width: 30px; }
  .hdr .hsocial svg { width: 22px; height: 22px; }
  .hdr .call { padding: .9rem .8rem; }
  .signin summary { padding: .9rem 1rem; }
}
@media (min-width: 1250px) and (max-width: 1399px) {
  .hdr .hsocial { display: none; }
  .hdr .signin { margin-left: auto; }
}

@media (max-width: 1249px) {
  .hdr { min-height: 0; padding: 6vw; }
  .hdr .logo img { height: 85px; }
  .hdr nav.main, .hdr .hsocial, .hdr .call, .hdr .signin { display: none; }
  .burger { display: block; }
  .menu-open .mobile-menu { display: flex; }
  .mobile-menu { position: fixed; inset: 0; top: var(--menu-top, 0); z-index: 40; background: hsla(var(--white-hsl), 1); flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.2rem; padding: 2rem 6vw 6rem; overflow-y: auto; }
  .mobile-menu > :first-child { margin-top: auto; } .mobile-menu > :last-child { margin-bottom: auto; }
  .mobile-menu .signin { width: 100%; max-width: 420px; flex: none; }
  .mobile-menu .signin summary { width: 100%; justify-content: center; gap: 10px; padding: 14px; font-size: 1.05rem; }
  .mobile-menu .signin-menu { position: static; width: 100%; margin-top: 10px; border: 1px solid hsla(var(--black-hsl), .08); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
  .mobile-menu .signin-menu::before { display: none; }
  .mobile-menu a.nav { font-family: var(--body-font); font-size: 2rem; line-height: 1.3; color: hsla(var(--black-hsl), 1); text-decoration: none; }
  .mobile-menu .btn { margin-top: 1rem; width: 100%; max-width: 420px; color: hsla(var(--black-hsl), 1); border: 1px solid hsla(var(--black-hsl), 1); }
  .mobile-menu .hsocial { display: flex; }
  .mobile-menu .hsocial a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: hsla(var(--black-hsl), 1); }
  .mobile-menu .hsocial svg { width: 26px; height: 26px; fill: currentColor; }
  .menu-open { overflow: hidden; }
}
@media (max-width: 767px) { .announce .in { padding: 10px 39px; font-size: 13px; } }

/* phone: Email / Call bar at the bottom of the screen */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #222; color: #fff; height: 64px; justify-content: center; gap: 0; }
  .mobile-bar a { width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-decoration: none; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
  .mobile-bar svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.4; }
}

/* one H1 per page for search engines; it keeps the look of the heading it replaced */
h1.as-h2 { --v: var(--h2v); line-height: calc(1.2em * (1 + (1 - var(--h2v)) / 25)); color: var(--headingLargeColor); }
h1.as-h3 { --v: var(--h3v); line-height: calc(1.2em * (1 + (1 - var(--h3v)) / 25)); color: var(--headingMediumColor); }
h1.as-h4 { --v: var(--h4v); line-height: calc(1.2em * (1 + (1 - var(--h4v)) / 25)); color: var(--headingSmallColor); }

/* ---------- mailing-list pop-up (bottom-right card, like the old site) ---------- */
.popup { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: none; }
.popup.open { display: block; }
.popup .card { position: relative; background: #fff; width: 300px; max-width: calc(100vw - 48px); padding: 34px 28px 22px; box-shadow: 0 4px 30px rgba(0, 0, 0, .25); }
.popup .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 1px solid #000; background: #fff; cursor: pointer; font-size: 16px; line-height: 1; color: #000; }
.popup .popup-title { font-family: var(--heading-font); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .8rem; color: #000; }
.popup p { font-size: 13px; line-height: 1.45; color: #000; margin: 0 0 .8rem; }
.popup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .popup { right: 12px; left: 12px; bottom: 76px; } .popup .card { width: auto; max-width: none; } }
.popup input[type=email] { width: 100%; border: 1px solid #ccc; padding: 12px; font: inherit; font-size: 14px; margin-bottom: 10px; }
.popup button[type=submit] { width: 100%; background: #000; color: #fff; border: 0; padding: 14px; font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.popup .fine { font-size: 12px; text-align: center; margin: 12px 0 0; color: #555; }
.popup .msg { font-size: 14px; margin-top: 10px; }

/* ---------- forms (contact, careers application) ---------- */
.site-form { width: 100%; color: var(--tweak-form-block-title-color, #000); }
.site-form .fields { display: flex; flex-direction: column; gap: 20px; }
.site-form fieldset { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.site-form .lbl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8.768px; padding: 0 0 4px; margin: 0; font-size: 1rem; line-height: 1.5em; color: var(--tweak-form-block-title-color, #000); }
.site-form .lbl.sub { column-gap: 8.176px; margin-top: 4px; padding-bottom: 2px; --v: var(--smallv); font-size: var(--fs); }
.site-form .lbl.sub .req { line-height: 1; }
.site-form .req { --v: var(--smallv); font-size: var(--fs); line-height: 1.5em; color: hsla(var(--black-hsl), .6); }
.site-form .row2 { display: flex; gap: 10px; }
.site-form .row2 > .fld { flex: 1; min-width: 0; }
.site-form input[type=text], .site-form input[type=email], .site-form input[type=tel], .site-form textarea {
  display: block; width: 100%; box-sizing: border-box; height: 35px; margin: 0; padding: 6px 8px; font: inherit; font-size: 1rem;
  color: var(--tweak-form-block-field-input-color, #000); background: var(--tweak-form-block-field-fill-color, transparent);
  border: 0; border-bottom: 1px solid hsla(var(--black-hsl), .55); border-radius: 0; }
.site-form textarea { height: 100px; resize: vertical; }
.site-form input:focus, .site-form textarea:focus { outline: 2px solid hsla(var(--accent-hsl), 1); outline-offset: 1px; }
.site-form .option { margin-top: 6px; --v: var(--smallv); font-size: var(--fs); line-height: 1.5em; }
.site-form .opts:has(input[type=radio]) .option { min-height: 25px; }
@media screen and (max-width: 767px) { .site-form .option { min-height: 23px; } .site-form .opts:has(input[type=radio]) .option { min-height: 25px; } }
.site-form .opt { display: inline-flex; vertical-align: top; align-items: center; gap: 11px; max-width: 100%; box-sizing: border-box; padding-right: 4px; color: var(--tweak-form-block-option-color, #000); cursor: pointer; }
.site-form .opt > span { min-width: 0; }
.site-form .opt input { appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 0; border: 1px solid currentColor; border-radius: 0; background: transparent; cursor: pointer; }
.site-form .opt input:checked { background: currentColor; box-shadow: inset 0 0 0 3px var(--siteBackgroundColor, #fff); }
.site-form .submit { align-self: flex-start; margin: 0; font: inherit; font-size: 1rem; line-height: 25px; padding: 18px 22px 18px 23px; border: 0; border-radius: 300px; cursor: pointer;
  background: var(--tweak-form-block-button-background-color, #000); color: #fff; }
.site-form .submit:hover { opacity: .8; }
.site-form .submit:disabled { opacity: .5; cursor: default; }
.site-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site-form .status { margin: 1rem 0 0; white-space: pre-line; }
.site-form .status:empty { display: none; }
.site-form .status.ok { font-weight: 700; }
.site-form .status.err { color: #b00020; }
.site-form .field-err { color: #b00020; font-size: 13px; margin: 4px 0 0; }

/* text blocks with their own box (background, border, rounded corners) */
.b.text { border-color: var(--tweak-text-block-stroke-color); }
.b.bgon { background-color: var(--tweak-text-block-background-color); }
.b.bgon p, .b.bgon pre, .b.bgon code { color: var(--tweak-paragraph-medium-color-on-background); }
.b.bgon p.sqsrte-large { color: var(--tweak-paragraph-large-color-on-background); }
.b.bgon p.sqsrte-small { color: var(--tweak-paragraph-small-color-on-background); }
.b.bgon h1 { color: var(--tweak-heading-extra-large-color-on-background); }
.b.bgon h2 { color: var(--tweak-heading-large-color-on-background); }
.b.bgon h3 { color: var(--tweak-heading-medium-color-on-background); }
.b.bgon h4 { color: var(--tweak-heading-small-color-on-background); }
.b.bgon a { color: var(--tweak-paragraph-link-color-on-background); }
/* the old editor saved some lines as "code"; they show as normal text */
.rt pre { margin: 1rem 0; white-space: pre-wrap; font: inherit; }
.rt pre code { font: inherit; color: inherit; }
/* empty lines the old editor kept on purpose still take up one line */
.rt p:empty::before, .rt h1:empty::before, .rt h2:empty::before, .rt h3:empty::before, .rt h4:empty::before { content: "\200b"; }
.acc .acc-t { line-height: normal; }

/* ---------- list sections (reviews carousel, service cards) ---------- */
.sec.list { min-height: 0; }
.sec.list > .cw { display: block; padding: 0; }
.ul { padding: 3.3vmax var(--pagePadding); max-width: calc(var(--maxPageWidth) + 2 * var(--pagePadding)); margin: 0 auto; box-sizing: border-box; }
.ul-title { --v: var(--h2v); font-size: var(--fs); line-height: 1.5em; margin: 0 0 40px; color: var(--list-section-carousel-title-color, var(--headingLargeColor)); }
.ul-carousel .ul-title { text-align: center; }
.ul-title strong { font-weight: 700; }
.ul ul { list-style: none; margin: 0; padding: 0; }
.ul-desc p { margin: 0 0 1rem; }
.ul-desc p:last-child { margin-bottom: 0; }
.ul-desc p:empty::before { content: ""; display: inline-block; }
.ul-media { margin: 0; overflow: hidden; }
.ul-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* carousel: 3 cards across, 1 on phones; arrows move one card */
.ul-viewport { overflow: hidden; }
.ul-track { display: flex; gap: 20px; align-items: flex-start; will-change: transform; }
/* card padding is 6% of the card width, so it sits on the children (their % margins use the card width) */
.ul-carousel .ul-card { flex: 0 0 calc((100% - 40px) / 3); padding: 0; background: var(--list-section-carousel-card-color); color: var(--list-section-carousel-card-description-color); }
.ul-carousel .ul-card > * { margin-left: 6%; margin-right: 6%; }
.ul-carousel .ul-card > :first-child { margin-top: 6%; }
.ul-carousel .ul-card > :last-child { margin-bottom: 6%; }
.ul-carousel .ul-media { width: 44%; margin-left: auto; margin-right: auto; aspect-ratio: 2.4 / 1; }
.ul-carousel .ul-media + .ul-desc { margin-top: 4%; }
.ul-arrows { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.ul-arrow { position: relative; width: 60px; height: 60px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; color: #fff; }
.ul-arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--list-section-carousel-arrow-background-color); opacity: .7; transition: opacity .3s; }
.ul-arrow:hover::before { opacity: 1; }
.ul-arrow svg { position: relative; display: block; width: 36px; height: 36px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }

/* service cards: 4 across, 1 on phones */
.ul-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ul-grid .ul-title { text-align: left; color: var(--list-section-simple-title-color, var(--headingLargeColor)); }
.ul-grid .ul-card { display: flex; flex-direction: column; align-items: center; padding: 20px; background: var(--list-section-simple-card-color); color: var(--list-section-simple-card-description-color); }
.ul-grid .ul-card > * { width: 75%; }
.ul-card-title { --v: 1.6; font-size: var(--fs); line-height: 1.1135em; margin: 0; color: var(--list-section-simple-card-title-color); }
.ul-grid .ul-desc { margin: 1% 0 4%; }
.ul-grid .ul-media { margin-top: auto; }
.ul-media.circle { aspect-ratio: 1; border-radius: 50%; }

@media (max-width: 767px) {
  .ul-carousel .ul-card { flex-basis: 100%; }
  .ul-cards { grid-template-columns: 1fr; }
}
/* phones: smaller solid arrow buttons, like the old site */
@media (max-width: 767px) {
  .ul-arrow { width: 48px; height: 48px; }
  .ul-arrow::before { inset: 4px; opacity: 1; }
  .ul-arrow svg { width: 20px; height: 20px; }
}
/* text blocks always span their grid area, so centered/right text lines up */
.aw > .rt, .aw > .acc, .aw > .code, .aw > .site-form { width: 100%; }
/* photos cropped to a circle/oval on the old site */
.img.oval { border-radius: 50%; }

/* ---------- privacy page (plain text, from the policy on the Contact page) ---------- */
.policy { max-width: 800px; margin: 0 auto; padding: 3rem 6vw 6rem; }
.policy h1, .policy h2 { margin: 3rem 0 1.5rem; }
.policy h1 { margin-top: 0; }