/* Better by Mom design tokens, as CSS custom properties. Generated from tokens/tokens.json by tokens/build.mjs: edit tokens.json and run it again rather than editing this file. */

:root, [data-theme="light"] {
  --deep-green: #2f4f3e;
  --ink: #1c1c1a;
  --ink-soft: #474744;
  --cream: #f8f5ed;
  --sage: #a7b89f;
  --taupe: #d9cbb8;
  --terracotta: #d97b5b;
  --terracotta-text: #943f22;
  --peach: #f9e0c6;
  --peach-light: #fdf0e2;
  --peach-deep: #f5d1af;
  --taupe-soft: #efe6da;
  --sage-soft: #e3e9dd;
  --white: #ffffff;
  --line-control: #857867;
  --error: #9e3a26;
  --focus-ring: var(--terracotta-text);
  --focus-ring-on-dark: var(--peach);
  --cream-line: #f8f5ed33;
  --header: var(--white);
  --divider: #e6e1da;
  --on-accent: var(--ink);
  --shadow-float: 0 10px 30px rgba(47, 79, 62, 0.10);
  --shadow-card-hover: 0 8px 20px rgba(47, 79, 62, 0.12);
}

/* The dark theme: follows the visitor's system setting, or data-theme="dark" on the page. An element with
   data-theme="light" (the hero, the closing band, the footer) keeps the light values inside it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --deep-green: #b5d2bf;
    --ink: #f1ece2;
    --ink-soft: #c3beb3;
    --cream: #141b17;
    --sage: #7f9a72;
    --taupe: #3b463f;
    --terracotta: #d97b5b;
    --terracotta-text: #f0a98a;
    --peach: #2a231c;
    --peach-light: #30281f;
    --peach-deep: #3a3026;
    --taupe-soft: #222c26;
    --sage-soft: #22302a;
    --white: #1a2520;
    --line-control: #86958a;
    --error: #ff9b85;
    --header: #1a2520;
    --divider: #2d3832;
    --on-accent: #1c1c1a;
    --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --deep-green: #b5d2bf;
  --ink: #f1ece2;
  --ink-soft: #c3beb3;
  --cream: #141b17;
  --sage: #7f9a72;
  --taupe: #3b463f;
  --terracotta: #d97b5b;
  --terracotta-text: #f0a98a;
  --peach: #2a231c;
  --peach-light: #30281f;
  --peach-deep: #3a3026;
  --taupe-soft: #222c26;
  --sage-soft: #22302a;
  --white: #1a2520;
  --line-control: #86958a;
  --error: #ff9b85;
  --header: #1a2520;
  --divider: #2d3832;
  --on-accent: #1c1c1a;
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

[data-theme="light"] { color-scheme: light; }

:root {
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: clamp(32px, 2.49vw, 43px);
  --space-10: 40px;
  --space-12: 48px;
  --space-16: clamp(64px, 4.97vw, 85px);
  --space-24: 96px;
  --section-pad: clamp(64px, 7.46vw, 143px);
  --page-gutter: max(var(--space-6), 10.97vw);
  --button-pad-y: 14px;
  --button-pad-x: 28px;
  /* radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  /* size */
  --touch-target: 48px;
  --container: 1200px;
  --measure: clamp(660px, 51vw, 980px);
  --measure-title: 13em;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --border-width: 1px;
  --border-strong: 2px;
  --icon-sm: 20px;
  --icon-md: 32px;
  --icon-disc: 72px;
  --icon-disc-sm: 56px;
  --logo-header: clamp(240px, 24.6cqw, 354px);
  --logo-header-narrow: min(68cqw, 266px);
  --logo-footer: 220px;
  --header-height: clamp(76px, 7.78cqw, 112px);
  --header-height-narrow: 88px;
  --header-pad-start: 4.4cqw;
  --header-pad-end: 2cqw;
  --header-pad-start-narrow: min(8cqw, 40px);
  --header-pad-end-narrow: min(4cqw, 24px);
  --nav-gap: min(3.15cqw, 45px);
  --header-cta-gap: min(3.5cqw, 51px);
  --header-button-height: clamp(48px, 4.17cqw, 60px);
  --header-button-pad-x: min(2.3cqw, 33px);
  --menu-glyph: 32px;
  --home-hero-gutter: 10.97cqw;
  --home-hero-gutter-phone: 11.8cqw;
  --home-hero-pad-top: 6.2cqw;
  --home-hero-pad-top-phone: 41cqw;
  --page-hero-pad-top-phone: 40cqw;
  --page-hero-pad-bottom-phone: 70cqw;
  --page-hero-action-gap-phone: 6cqw;
  --page-hero-words-min: clamp(332px, 35cqw, 420px);
  --page-hero-pad-block: 5cqw;
  --page-hero-eyebrow-gap: 1.2cqw;
  --page-hero-title-measure: 46cqw;
  --page-hero-measure: 34cqw;
  --home-hero-title-hang: -0.12em;
  --home-hero-lead-gap: 2.15cqw;
  --home-hero-lead-gap-phone: 2.6cqw;
  --home-hero-action-gap: 2.0cqw;
  --home-hero-action-gap-phone: 2.6cqw;
  --home-hero-button-height: clamp(48px, 5.76cqw, 147px);
  --home-hero-button-height-phone: clamp(48px, 16.4cqw, 72px);
  --home-hero-button-pad-x: 3.06cqw;
  --home-hero-button-pad-x-phone: 8.7cqw;
  --icon-in-text: 1em;
  --strip-icon: 48px;
  --strip-icon-wide: clamp(48px, 4.6cqw, 118px);
  --strip-pad: 32px;
  --strip-pad-wide: 2.43cqw;
  --strip-icon-gap-wide: 0.6cqw;
  --textarea-min: 144px;
  --step-disc: clamp(48px, 4.4cqw, 85px);
  --underline-offset: 4px;
  --underline-weight: 2px;
  --sr-only-size: 1px;
  /* breakpoint */
  --breakpoint-columns-two: 560px;
  --breakpoint-tablet: 700px;
  --breakpoint-split: 820px;
  --breakpoint-nav: 1200px;
  --breakpoint-columns-wide: 960px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;
  /* viewport */
  --viewport-phone-narrow: 360px;
  --viewport-phone: 375px;
  --viewport-phone-wide: 390px;
  --viewport-desktop: 1440px;
  /* tracking */
  --tracking-heading: -0.02em;
  --tracking-home-title: -0.03em;
  --tracking-ui: 0.025em;
  --tracking-ui-phone: 0.01em;
  --tracking-strip: 0.04em;
  --tracking-eyebrow: 0.14em;
  /* duration */
  --duration-hover: 0.2s;
  /* layer */
  --layer-raised: 1;
  --layer-header: 10;
  /* effect */
  --lift-hover: translateY(-2px);
  --press: translateY(1px);
  --opacity-decor: 0.9;
  /* ratio */
  --ratio-landscape: 4 / 3;
  --ratio-square: 1 / 1;
  --ratio-home-hero: 572 / 220;
  --ratio-page-hero-phone: 1080 / 2500;
  --ratio-home-hero-phone: 182 / 316;
  /* grid */
  --grid-one: minmax(0, 1fr);
  --grid-two: repeat(2, minmax(0, 1fr));
  --grid-three: repeat(3, minmax(0, 1fr));
  --grid-four: repeat(4, minmax(0, 1fr));
  --grid-five: repeat(5, minmax(0, 1fr));
  --grid-split: minmax(0, 5fr) minmax(0, 6fr);
  --grid-split-reverse: minmax(0, 6fr) minmax(0, 5fr);
  --grid-form: minmax(0, 2fr) minmax(0, 3fr);
  --grid-footer: minmax(0, 3fr) repeat(3, minmax(0, 2fr));
  --grid-band: minmax(0, 1fr) auto;
  --grid-icon-row: auto minmax(0, 1fr);
  /* glyph */
  --icon-stroke: 1.7;
  --icon-stroke-strip: 1.15;
  --chevron-size: 8px;
  --chevron-transform: translateY(-70%) rotate(45deg);
  --glyph-stroke: 2px;
  /* font families */
  --font-heading: "DM Serif Display", Georgia, serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;
  /* type styles, for the font shorthand: font: var(--text-body); */
  --text-home-title: 400 clamp(48px, 6.53cqw, 167px)/0.94 var(--font-display);
  --text-page-title: 400 clamp(44px, 4.2cqw, 108px)/1 var(--font-display);
  --text-page-title-phone: 400 clamp(34px, 10.5cqw, 52px)/1.04 var(--font-display);
  --text-home-title-phone: 400 clamp(40px, 13.3cqw, 62px)/1.02 var(--font-display);
  --text-home-lead: 500 clamp(17px, 2.04cqw, 52px)/1.38 var(--font-body);
  --text-home-lead-phone: 500 clamp(17px, 5.0cqw, 24px)/1.43 var(--font-body);
  --text-page-lead: 500 clamp(17px, 1.53cqw, 39px)/1.45 var(--font-body);
  --text-page-lead-phone: 500 clamp(16px, 4.36cqw, 20px)/1.45 var(--font-body);
  --text-eyebrow-wide: 700 clamp(13px, 1cqw, 26px)/1.4 var(--font-body);
  --text-home-button: 600 clamp(16px, 1.8cqw, 46px)/1.2 var(--font-body);
  --text-home-button-phone: 600 clamp(17px, 5.64cqw, 24px)/1.2 var(--font-body);
  --text-header-button: 600 clamp(15px, 1.28cqw, 18px)/1.2 var(--font-body);
  --text-strip-title-wide: 700 clamp(16px, 1.32cqw, 34px)/1.2 var(--font-body);
  --text-strip-label: 500 17px/1.3 var(--font-body);
  --text-strip-label-wide: 500 clamp(16px, 1.32cqw, 34px)/1.3 var(--font-body);
  --text-caption-wide: 400 clamp(13px, 0.97cqw, 25px)/1.4 var(--font-body);
  --text-h2: 400 clamp(48px, 3.73vw, 72px)/1.1 var(--font-heading);
  --text-h2-mobile: 400 34px/1.15 var(--font-heading);
  --text-h3: 400 clamp(26px, 2.02vw, 39px)/1.25 var(--font-heading);
  --text-h3-mobile: 400 22px/1.25 var(--font-heading);
  --text-quote: 400 clamp(30px, 2.33vw, 45px)/1.3 var(--font-heading);
  --text-body: 400 clamp(18px, 1.4vw, 27px)/1.6 var(--font-body);
  --text-body-mobile: 400 16px/1.6 var(--font-body);
  --text-small: 400 clamp(15px, 1.17vw, 22px)/1.5 var(--font-body);
  --text-label: 600 clamp(16px, 1.24vw, 24px)/1.4 var(--font-body);
  --text-nav: 600 clamp(15px, 1.2cqw, 17px)/1.2 var(--font-body);
  --text-nav-mobile: 500 20px/1.2 var(--font-body);
  --text-footer-link: 500 clamp(19px, 1.48vw, 28px)/1.2 var(--font-body);
  --text-button-label-small: 500 clamp(17px, 1.32vw, 25px)/1.2 var(--font-body);
  --text-strip-title: 700 17px/1.2 var(--font-body);
  --text-caption: 400 14px/1.4 var(--font-body);
  --text-eyebrow: 700 clamp(13px, 1.01vw, 19px)/1.4 var(--font-body);
}

/* Optional helper classes, one per type style. The components use the --text-* properties instead. */
.bbm-text-home-title { font: var(--text-home-title); letter-spacing: -0.03em; }
.bbm-text-page-title { font: var(--text-page-title); letter-spacing: -0.03em; }
.bbm-text-page-title-phone { font: var(--text-page-title-phone); letter-spacing: -0.03em; }
.bbm-text-home-title-phone { font: var(--text-home-title-phone); letter-spacing: -0.03em; }
.bbm-text-home-lead { font: var(--text-home-lead); letter-spacing: 0.025em; }
.bbm-text-home-lead-phone { font: var(--text-home-lead-phone); letter-spacing: 0.025em; }
.bbm-text-page-lead { font: var(--text-page-lead); letter-spacing: 0.025em; }
.bbm-text-page-lead-phone { font: var(--text-page-lead-phone); letter-spacing: 0.01em; }
.bbm-text-eyebrow-wide { font: var(--text-eyebrow-wide); letter-spacing: 0.14em; }
.bbm-text-home-button { font: var(--text-home-button); letter-spacing: 0.025em; }
.bbm-text-home-button-phone { font: var(--text-home-button-phone); letter-spacing: 0.025em; }
.bbm-text-header-button { font: var(--text-header-button); letter-spacing: 0.025em; }
.bbm-text-strip-title-wide { font: var(--text-strip-title-wide); letter-spacing: 0.04em; }
.bbm-text-strip-label { font: var(--text-strip-label); letter-spacing: normal; }
.bbm-text-strip-label-wide { font: var(--text-strip-label-wide); letter-spacing: normal; }
.bbm-text-caption-wide { font: var(--text-caption-wide); letter-spacing: normal; }
.bbm-text-h2 { font: var(--text-h2); letter-spacing: -0.02em; }
.bbm-text-h2-mobile { font: var(--text-h2-mobile); letter-spacing: -0.02em; }
.bbm-text-h3 { font: var(--text-h3); letter-spacing: normal; }
.bbm-text-h3-mobile { font: var(--text-h3-mobile); letter-spacing: normal; }
.bbm-text-quote { font: var(--text-quote); letter-spacing: normal; }
.bbm-text-body { font: var(--text-body); letter-spacing: normal; }
.bbm-text-body-mobile { font: var(--text-body-mobile); letter-spacing: normal; }
.bbm-text-small { font: var(--text-small); letter-spacing: normal; }
.bbm-text-label { font: var(--text-label); letter-spacing: normal; }
.bbm-text-nav { font: var(--text-nav); letter-spacing: 0.025em; }
.bbm-text-nav-mobile { font: var(--text-nav-mobile); letter-spacing: normal; }
.bbm-text-footer-link { font: var(--text-footer-link); letter-spacing: normal; }
.bbm-text-button-label-small { font: var(--text-button-label-small); letter-spacing: 0.025em; }
.bbm-text-strip-title { font: var(--text-strip-title); letter-spacing: 0.04em; }
.bbm-text-caption { font: var(--text-caption); letter-spacing: normal; }
.bbm-text-eyebrow { font: var(--text-eyebrow); letter-spacing: 0.14em; }

/* The fonts, self-hosted from fonts/: WOFF2 and WOFF when present, the TTF masters as a fallback. */
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-Regular.woff2") format("woff2"), url("../fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-Italic.woff2") format("woff2"), url("../fonts/DMSerifDisplay-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-VariableFont_opsz,wght.woff2") format("woff2"), url("../fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Italic-VariableFont_opsz,wght.woff2") format("woff2"), url("../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype"); font-weight: 100 1000; font-style: italic; font-display: swap; }