@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  /* Shared type, shape, spacing, and interaction foundations. */
  --font-body: "DM Sans", sans-serif;
  --font-display: "Manrope", sans-serif;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-card: 12px;
  --radius-media: 14px;
  --section-space: clamp(100px, 10vw, 145px);
  --section-space-mobile: 80px;
  --layout-gap: clamp(55px, 8vw, 110px);
  --transition-ui: .18s ease;
  --body-copy-size: 18px;
  --body-copy-leading: 1.72;

  /* Logo colors: change these two values to retheme the brand. */
  --brand-primary: #95a43c;
  --brand-secondary: #5b5348;
  --color-primary: var(--brand-primary);
  --color-primary-dark: var(--brand-primary-dark);

  /* These values recalculate automatically from the two logo colors. */
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 72%, black);
  --brand-primary-dark: color-mix(in srgb, var(--brand-primary) 60%, black);
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 30%, white);
  --brand-primary-faint: color-mix(in srgb, var(--brand-primary) 12%, white);
  --brand-secondary-dark: color-mix(in srgb, var(--brand-secondary) 68%, black);

  /* Airy mesh accents derived from the primary brand color. */
  --mesh-lime: color-mix(in srgb, var(--brand-primary) 72%, #e9f58c);
  --mesh-sage: color-mix(in srgb, var(--brand-primary) 48%, #c9dfce);
  --mesh-gold: color-mix(in srgb, var(--brand-primary) 38%, #f5d99b);

  /* Shared neutral theme. */
  --text: color-mix(in srgb, var(--brand-secondary) 65%, black);
  --text-body: color-mix(in srgb, var(--brand-secondary) 90%, white);
  --text-muted: color-mix(in srgb, var(--brand-secondary) 78%, white);
  --color-text: var(--text);
  --color-muted: var(--text-muted);
  --text-on-dark: #ffffff;
  --surface: #ffffff;
  --surface-soft: color-mix(in srgb, var(--brand-secondary) 6%, white);
  --surface-muted: color-mix(in srgb, var(--brand-secondary) 10%, white);
  --border: color-mix(in srgb, var(--brand-secondary) 22%, white);
  --border-strong: color-mix(in srgb, var(--brand-secondary) 38%, white);
  --color-border: var(--border);
  --color-bg-soft: var(--surface-soft);
  --footer-text: color-mix(in srgb, var(--brand-secondary) 25%, white);
  --footer-muted: color-mix(in srgb, var(--brand-secondary) 48%, white);
  --color-footer: var(--brand-secondary-dark);
  --radius-button: var(--radius-control);
  --container-width: 1180px;

  /* Semantic colors remain separate from the changeable brand theme. */
  --status-open: var(--brand-primary-dark);
  --status-closed: color-mix(in srgb, var(--brand-secondary) 76%, white);
  --status-closed-dot: color-mix(in srgb, var(--brand-secondary) 42%, white);
  --error: #8e2d27;
  --error-surface: #fbe9e7;

  --header-surface: color-mix(in srgb, var(--surface) 97%, transparent);
  --focus-ring: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --brand-outline: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  --search-action-idle: color-mix(in srgb, var(--brand-secondary) 32%, white);
  --shadow: 0 18px 50px color-mix(in srgb, var(--brand-secondary) 12%, transparent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--surface); font: 16px/1.55 var(--font-body); }
p { color: var(--text-body); }
.body-copy { color: var(--text-body); font-size: var(--body-copy-size); font-weight: 400; line-height: var(--body-copy-leading); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icon-fill, .icon-fill path { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-shell { width: min(var(--container-width), calc(100% - 48px)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { display: block; width: 100%; height: auto; }
.brand-header { width: 136px; }
.utility-header { min-height: 88px; padding: 16px 4vw; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; background: var(--header-surface); position: relative; z-index: 5; }
.voice-search { flex: 0 0 38px; width: 38px; height: 38px; padding: 9px 12px; border: 0; border-radius: 50%; color: var(--brand-secondary); background: transparent; }
.voice-search:hover { color: var(--brand-primary-dark); background: var(--brand-primary-faint); }
.voice-search.is-listening { color: var(--text-on-dark); background: var(--brand-primary-dark); box-shadow: 0 0 0 4px var(--focus-ring); }
.voice-search svg { width: 100%; height: 100%; margin: 0; }
.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 30px); white-space: nowrap; }
.nav-menu { display: contents; }
.nav-toggle { display: none; width: 32px; height: 32px; padding: 6px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-control); color: var(--brand-secondary); background: transparent; }
.nav-toggle-lines { width: 17px; height: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.nav-toggle-lines span { width: 100%; height: 2px; display: block; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:last-child { transform: translateY(-4px) rotate(-45deg); }
.main-nav a, .nav-link { position: relative; padding: 8px 0; color: var(--brand-secondary); font-weight: 600; background: none; border: 0; }
.main-nav a:hover, .nav-link:hover { color: var(--brand-primary-dark); }
.main-nav a[aria-current="page"] { color: var(--brand-primary); }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; height: 2px; inset: auto 0 0; background: var(--brand-primary); }
.main-nav .nav-account { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-primary); }
.nav-account-menu { position: relative; }
.main-nav .nav-account-button { gap: 7px; padding: 8px 0; border: 0; background: transparent; color: var(--brand-secondary); font-weight: 800; white-space: nowrap; }
.nav-account-muted-icon { display: inline-flex; align-items: center; color: var(--brand-primary); opacity: .42; }
.nav-account-dropdown { min-width: 156px; padding: 8px; display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: none; }
.nav-account-menu.is-open .nav-account-dropdown { display: grid; }
.nav-account-dropdown a, .nav-account-dropdown button { width: 100%; min-height: 38px; padding: 9px 10px; display: flex; align-items: center; border: 0; border-radius: var(--radius-control); color: var(--brand-secondary); background: transparent; font: inherit; font-size: 14px; font-weight: 700; text-align: left; }
.nav-account-dropdown a:hover, .nav-account-dropdown button:hover { color: var(--brand-primary-dark); background: var(--surface-soft); }
.nav-account-dropdown a::after { display: none; }
.nav-account-dropdown form { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); }
.nav-account svg { width: 23px; height: 23px; display: block; fill: none; stroke: none; }
.nav-account path { fill: currentColor; stroke: none; }
.main-nav .nav-account:hover, .main-nav .nav-account:focus-visible { color: var(--brand-primary-dark); }
.main-nav .nav-account[aria-current="page"] { color: var(--brand-primary); }
.main-nav form { margin: 0; }
.button { min-height: 46px; padding: 11px 20px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-control); font-weight: 700; transition: transform var(--transition-ui), background var(--transition-ui); }
.button:hover { transform: translateY(-1px); }
.button-primary { color: var(--text-on-dark); background: var(--brand-primary-dark); }
.button-primary:hover { background: var(--brand-primary-hover); }
.button-brand { color: var(--text-on-dark); background: var(--brand-primary); }
.button-brand:hover { background: var(--brand-primary-hover); }
.button-outline { border-color: var(--border-strong); color: var(--brand-primary-dark); background: var(--surface); }
.button-outline:hover { border-color: var(--brand-primary); background: var(--brand-primary-faint); }
.button-full { width: 100%; }
.eyebrow { display: block; margin-bottom: 13px; color: var(--brand-primary); font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.site-footer { margin-top: 90px; padding: 50px max(4vw, calc((100vw - 1180px)/2)); display: grid; grid-template-columns: 1fr auto; gap: 32px; color: var(--footer-text); background: var(--brand-secondary-dark); }
.footer-brand-block { max-width: 540px; }
.brand-footer { width: 132px; padding: 0; background: transparent; opacity: .78; }
.brand-footer img { filter: brightness(0) invert(1); }
.brand-footer:hover { opacity: .92; }
.footer-copy { margin-top: 8px; display: grid; gap: 6px; }
.site-footer p { margin: 0; color: var(--footer-muted); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-contact a { color: var(--brand-primary); font-weight: 800; }
.footer-contact a:hover { color: var(--text-on-dark); }
.footer-navs { display: grid; justify-items: end; gap: 14px; align-content: center; }
.site-footer nav { display: flex; gap: 22px; align-items: center; justify-content: flex-end; flex-wrap: wrap; font-weight: 600; }
.footer-subnav { gap: 14px; font-size: 14px; font-weight: 500; }
.footer-legalnav { gap: 14px; font-size: 14px; font-weight: 500; }
.footer-subnav a, .footer-legalnav a { color: color-mix(in srgb, var(--footer-muted) 82%, var(--brand-secondary-dark)); }
.footer-grolocals { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text-on-dark) 6%, transparent); transition: color var(--transition-ui), background var(--transition-ui); }
.footer-grolocals:hover { color: var(--text-on-dark); background: var(--brand-primary); }
.footer-apps { color: color-mix(in srgb, var(--footer-muted) 82%, var(--brand-secondary-dark)); font-size: 14px; font-weight: 500; }
.footer-apps strong { color: var(--footer-text); font-weight: 600; }
.footer-social { gap: 10px; }
.footer-social .social-mark { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--footer-text); background: color-mix(in srgb, var(--text-on-dark) 6%, transparent); transition: color var(--transition-ui), background var(--transition-ui), transform var(--transition-ui); }
.footer-social .social-mark:hover { color: var(--text-on-dark); background: color-mix(in srgb, var(--text-on-dark) 11%, transparent); transform: translateY(-1px); }
.social-mark span { position: relative; display: block; font: 800 15px/1 var(--font-display); }
.social-mark--linkedin span { font-size: 14px; letter-spacing: -.5px; }
.social-mark--twitter span { font-size: 15px; }
.social-mark--facebook span { font-size: 19px; font-family: Arial, sans-serif; font-weight: 800; }
.social-mark--youtube span { width: 18px; height: 12px; border: 2.2px solid currentColor; border-radius: 5px; }
.social-mark--youtube span::after { content: ""; position: absolute; left: 5px; top: 2px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; }
.social-mark--instagram span { width: 17px; height: 17px; border: 2.1px solid currentColor; border-radius: 6px; }
.social-mark--instagram span::before { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: 50%; }
.social-mark--instagram span::after { content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 2.5px; height: 2.5px; border-radius: 50%; background: currentColor; }
.site-footer nav a:hover { color: var(--text-on-dark); }
.footer-bottom { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--brand-secondary); display: flex; justify-content: space-between; gap: 24px; color: var(--footer-muted); }
.footer-bottom small { color: inherit; }
.footer-bottom p { text-align: right; color: inherit; line-height: 1.55; }
.footer-flag { display: inline-block; margin: 0 7px; }
.home-page .site-footer { margin-top: 0; }
@media (max-width: 680px) {
  .body-copy { font-size: 17px; }
  .page-shell { width: min(100% - 28px, 1180px); }
  .utility-header { min-height: 72px; padding: 12px 16px; display: flex; flex-wrap: nowrap; gap: 18px; }
  .utility-header > .brand { width: 122px; margin: 0 auto 0 0; }
  .utility-header .main-nav { flex: 0 0 auto; gap: 4px; overflow: visible; padding: 0; }
  .nav-toggle { display: inline-flex; margin-left: -6px; }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--brand-primary-dark); background: var(--surface-soft); }
  .main-nav .nav-account { width: 42px; height: 42px; padding: 9px; }
  .main-nav .nav-account-button { width: auto; height: 42px; padding: 8px 4px 8px 8px; }
  .nav-account-muted-icon svg { width: 21px; height: 21px; }
  .nav-account-dropdown { top: calc(100% + 6px); }
  .nav-menu { display: none; position: absolute; top: calc(100% - 7px); left: 14px; right: 14px; padding: 10px; border: 0; border-radius: var(--radius-panel); background: var(--surface); box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-secondary) 12%, transparent); }
  .nav-menu.is-open { display: grid; }
  .nav-menu > a, .nav-menu .nav-link { width: 100%; padding: 12px 14px; text-align: left; border-radius: var(--radius-control); transition: color var(--transition-ui), background var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui); }
  .nav-menu > a:hover, .nav-menu .nav-link:hover { color: var(--brand-primary-dark); background: var(--surface-soft); box-shadow: inset 3px 0 0 var(--brand-primary); transform: translateX(3px); }
  .main-nav .nav-menu a[aria-current="page"]::after { display: none; }
  .nav-menu form { width: 100%; }
  .site-footer { grid-template-columns: 1fr; padding: 40px 24px; }
  .footer-navs { justify-items: start; }
  .site-footer nav { justify-content: flex-start; flex-wrap: wrap; gap: 16px 24px; }
  .footer-subnav, .footer-legalnav { gap: 12px 18px; }
  .footer-bottom { grid-column: auto; flex-direction: column; }
  .footer-bottom p { text-align: left; }
}