/* KARAKTER design system: core.
   Spec: docs/DESIGN.md. How pages adopt it: docs/DESIGN-SYSTEM.md.

   The server links this file on every public page (server-lib/inject-design-system.js),
   so it may hold only three things:
     1. Tokens. Every custom property is prefixed --ds- so it can never clobber the
        --gold / --black / --border variables that legacy page stylesheets define.
     2. The theme scopes. data-theme="light" | "dark" on any element re-resolves the
        semantic tokens inside it, so a dark panel can sit in a light page.
     3. Site chrome every page shares: the top nav, the theme toggle and the footer.
   No element selectors outside those components, so a legacy page that has not
   moved to the design system renders exactly as it did. */

/* ── 1. PALETTE AND SCALES ── */
:root {
  /* Neutrals */
  --ds-ink: #121110;
  --ds-charcoal: #1C1A18;
  --ds-graphite: #2A2724;
  --ds-iron: #36322D;
  --ds-stone: #6B655D;
  --ds-ash: #A8A196;
  --ds-linen: #D9D4CA;
  --ds-parchment: #EDE9E1;
  --ds-bone: #F6F4EF;
  --ds-paper: #FDFCFA;

  /* Gold, the mark of distinction. Never text on a light ground (2.2:1). */
  --ds-gold: #C9A24E;
  --ds-gold-hover: #D6B46C;
  --ds-gold-deep: #8A6A22;
  --ds-gold-mist: #EFE6D2;
  --ds-gold-shadow: #2E2716;

  /* Text values. The site holds every text token to 7:1 (WCAG AAA) on every
     surface of its theme, a step past the spec's AA, for a 55+ audience. Each is
     the spec colour moved the least distance that clears 7:1 on bg, surface,
     surface-alt and accent-subtle. docs/DESIGN.md lists the originals. */
  --ds-stone-text: #4F4A44;
  --ds-ash-text: #B8B2A9;
  --ds-gold-text: #5E4817;
  --ds-gold-text-dark: #D2B068;
  --ds-moss: #315239;
  --ds-moss-light: #93BD9E;
  --ds-brick: #7F3126;
  --ds-brick-light: #E7A294;

  /* Photo scrim: ink at three strengths, for copy laid over a photograph. At
     --ds-scrim-text the theme's full ink clears 7:1 even over a white sky. */
  --ds-scrim-text: rgba(18, 17, 16, 0.8);
  --ds-scrim-soft: rgba(18, 17, 16, 0.35);
  --ds-scrim-faint: rgba(18, 17, 16, 0.08);

  /* The mark behind the home hero on a phone, where it stands in for the
     photo: a step more present than a section watermark. */
  --ds-watermark-opacity-hero: 0.06;

  /* Form-control edge. 3:1 against every surface in both themes (WCAG 1.4.11);
     linen and iron are hairlines for dividers, too faint to find a field by. */
  --ds-control: #857E74;

  /* Type */
  --ds-font-display: 'Zuume Rough', 'Anton', Impact, sans-serif;
  --ds-font-sans: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
  --ds-font-serif: 'EB Garamond', Georgia, serif;

  /* Spacing, base unit 4px */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 96px;
  --ds-space-10: 128px;

  /* Shape */
  --ds-radius-sm: 2px;
  --ds-radius-md: 4px;
  --ds-radius-full: 9999px;

  /* Layout */
  --ds-max: 1200px;
  --ds-gutter: 24px;
  --ds-bar: 64px;
  --ds-target: 48px;

  /* Motion. No bounce, no parallax. */
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
  --ds-fast: 120ms;
  --ds-base: 200ms;
  --ds-slow: 360ms;
}

/* ── 2. THEMES ──
   :root is light, so a page with no stored choice is light. The bootstrap in
   server-lib/inject-design-system.js sets data-theme on <html> before first paint. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --ds-bg: var(--ds-bone);
  --ds-surface: var(--ds-paper);
  --ds-surface-alt: var(--ds-parchment);
  --ds-fg: var(--ds-ink);
  --ds-fg-muted: var(--ds-stone-text);
  --ds-border: var(--ds-linen);
  --ds-border-strong: var(--ds-ink);
  --ds-control-border: var(--ds-control);
  --ds-accent: var(--ds-gold);
  --ds-accent-hover: var(--ds-gold-hover);
  --ds-accent-fg: var(--ds-gold-text);
  --ds-accent-line: var(--ds-gold-deep);
  --ds-on-accent: var(--ds-ink);
  --ds-accent-subtle: var(--ds-gold-mist);
  --ds-inverse: var(--ds-ink);
  --ds-inverse-hover: var(--ds-iron);
  --ds-on-inverse: var(--ds-bone);
  --ds-success: var(--ds-moss);
  --ds-danger: var(--ds-brick);
  --ds-focus: var(--ds-gold-text);
  --ds-shadow-1: 0 1px 2px rgba(18, 17, 16, 0.08);
  --ds-shadow-2: 0 12px 32px rgba(18, 17, 16, 0.18);
  /* Which logo artwork shows: black marks on light grounds, white on dark. */
  --ds-show-on-light: block;
  --ds-show-on-dark: none;
  /* Select-menu chevron in the theme's ink. A data URI cannot inherit
     currentColor, so each theme carries its own. */
  --ds-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121110' stroke-width='1.5'/%3E%3C/svg%3E");
  /* The section watermark (ds-page.css .ds-watermark): the black mark on light
     grounds, barely there. */
  --ds-watermark: url("/assets/images/logos/karakter/KARAKTER_lockup_black.png");
  --ds-watermark-opacity: 0.03;
  /* Chart series, in this order and never cycled (docs/DESIGN.md, Charts).
     Validated as a set on --ds-surface for colour-blind separation, lightness
     band and 3:1 contrast, in each theme with its own steps. */
  --ds-chart-1: #9A7424;
  --ds-chart-2: #2A78D6;
  --ds-chart-3: #C4473A;
  --ds-chart-4: #6250D6;
  --ds-chart-5: #1A8F6A;
  /* A one-hue magnitude ramp, gold into the surface. Every step holds --ds-fg
     text at 7:1, so a heatmap cell can carry its figure. */
  --ds-heat-1: color-mix(in srgb, var(--ds-gold) 10%, var(--ds-paper));
  --ds-heat-2: color-mix(in srgb, var(--ds-gold) 22%, var(--ds-paper));
  --ds-heat-3: color-mix(in srgb, var(--ds-gold) 34%, var(--ds-paper));
  --ds-heat-4: color-mix(in srgb, var(--ds-gold) 48%, var(--ds-paper));
  --ds-heat-5: color-mix(in srgb, var(--ds-gold) 62%, var(--ds-paper));
  --ds-heat-6: color-mix(in srgb, var(--ds-gold) 80%, var(--ds-paper));
  --ds-heat-7: var(--ds-gold);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg: var(--ds-ink);
  --ds-surface: var(--ds-charcoal);
  --ds-surface-alt: var(--ds-graphite);
  --ds-fg: var(--ds-bone);
  --ds-fg-muted: var(--ds-ash-text);
  --ds-border: var(--ds-iron);
  --ds-border-strong: var(--ds-bone);
  --ds-control-border: var(--ds-control);
  --ds-accent: var(--ds-gold);
  --ds-accent-hover: var(--ds-gold-hover);
  --ds-accent-fg: var(--ds-gold-text-dark);
  --ds-accent-line: var(--ds-gold);
  --ds-on-accent: var(--ds-ink);
  --ds-accent-subtle: var(--ds-gold-shadow);
  --ds-inverse: var(--ds-bone);
  --ds-inverse-hover: var(--ds-linen);
  --ds-on-inverse: var(--ds-ink);
  --ds-success: var(--ds-moss-light);
  --ds-danger: var(--ds-brick-light);
  --ds-focus: var(--ds-gold);
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --ds-show-on-light: none;
  --ds-show-on-dark: block;
  --ds-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F6F4EF' stroke-width='1.5'/%3E%3C/svg%3E");
  --ds-watermark: url("/assets/images/logos/karakter/KARAKTER_lockup_white.png");
  --ds-watermark-opacity: 0.025;
  --ds-chart-1: #B38D3A;
  --ds-chart-2: #3987E5;
  --ds-chart-3: #D65F4E;
  --ds-chart-4: #9085E9;
  --ds-chart-5: #1F9C70;
  /* Bone text holds 7:1 only up to about 40% gold on charcoal, so the dark
     ramp stops there; the printed figure carries the value, the fill the rank. */
  --ds-heat-1: color-mix(in srgb, var(--ds-gold) 4%, var(--ds-charcoal));
  --ds-heat-2: color-mix(in srgb, var(--ds-gold) 10%, var(--ds-charcoal));
  --ds-heat-3: color-mix(in srgb, var(--ds-gold) 16%, var(--ds-charcoal));
  --ds-heat-4: color-mix(in srgb, var(--ds-gold) 22%, var(--ds-charcoal));
  --ds-heat-5: color-mix(in srgb, var(--ds-gold) 28%, var(--ds-charcoal));
  --ds-heat-6: color-mix(in srgb, var(--ds-gold) 34%, var(--ds-charcoal));
  --ds-heat-7: color-mix(in srgb, var(--ds-gold) 40%, var(--ds-charcoal));
}

/* A scoped panel takes its theme's ink, or its text would keep the page's. */
[data-theme] {
  color: var(--ds-fg);
}

/* Artwork swap for a theme: wrap the black and the white version of a mark. */
.ds-on-light { display: var(--ds-show-on-light); }
.ds-on-dark { display: var(--ds-show-on-dark); }

/* ── 3. TOP NAV ──
   includes/public-top-nav.html. Legacy pages carry their own `nav.top-nav { … }`
   and `.nav-links { … }` rules from before the shared nav existed. `:root .top-nav`
   out-ranks `nav.top-nav` (0,2,0 against 0,1,1), so those rules lose without the
   !important flags the nav used to need. On a page that has not adopted the
   design system the server sets data-theme="dark" on the nav, which keeps it the
   black bar those pages were designed around. */
:root .top-nav {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-5);
  height: auto;
  min-height: var(--ds-bar);
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-5);
  background: var(--ds-bg);
  color: var(--ds-fg);
  border: 0;
  border-bottom: 1px solid var(--ds-border);
  box-shadow: none;
  backdrop-filter: none;
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
}

:root .top-nav .nav-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--ds-target);
  font: inherit;
  color: inherit;
}

:root .top-nav .nav-brand img {
  width: auto;
  height: 48px;
  max-width: none;
}

:root .top-nav .nav-brand .ds-on-light,
:root .top-nav .nav-brand .ds-on-dark {
  line-height: 0;
}

:root .top-nav .nav-menu {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

:root .top-nav .nav-links {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}

:root .top-nav .nav-links > li {
  position: relative;
}

/* Nav items: button type, a 48px target, a 2px rule underneath. */
:root .top-nav .nav-links a,
:root .top-nav .nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-height: var(--ds-target);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

:root .top-nav .nav-links a::after,
:root .top-nav .nav-dropdown-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: transparent;
  transition: background-color var(--ds-fast) var(--ds-ease);
}

:root .top-nav .nav-links a:hover::after,
:root .top-nav .nav-dropdown-toggle:hover::after {
  background: var(--ds-border);
}

:root .top-nav .nav-links a.is-active::after,
:root .top-nav .nav-links .nav-dropdown-toggle.is-active::after {
  background: var(--ds-accent-line);
}

/* Items inside a dropdown panel carry no rule. */
:root .top-nav .nav-dropdown-menu a::after {
  display: none;
}

:root .top-nav .nav-caret {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0;
  transition: transform var(--ds-base) var(--ds-ease);
}

:root .top-nav .nav-dropdown.is-open .nav-caret {
  transform: rotate(180deg);
}

:root .top-nav .nav-dropdown {
  position: relative;
}

:root .top-nav .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--ds-space-4));
  z-index: 520;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  margin: 0;
  padding: var(--ds-space-2) 0;
  list-style: none;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-2);
}

:root .top-nav .nav-dropdown:not(.is-open) .nav-dropdown-menu {
  display: none;
}

:root .top-nav .nav-dropdown-menu a,
:root .top-nav .nav-dropdown-menu button {
  display: flex;
  width: 100%;
  min-height: var(--ds-target);
  padding: 0 var(--ds-space-4);
  letter-spacing: 0.12em;
  text-align: left;
}

/* The portal menu sits in .nav-actions, outside .nav-links, so its items take
   the nav type here rather than from the .nav-links rule above. "Sign out" is
   a button among links: the same type and none of the browser's own button
   box. */
:root .top-nav .nav-portal-menu .nav-dropdown-menu a,
:root .top-nav .nav-dropdown-menu button {
  align-items: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

:root .top-nav .nav-dropdown-menu a:hover,
:root .top-nav .nav-dropdown-menu button:hover,
:root .top-nav .nav-dropdown-menu a:focus-visible,
:root .top-nav .nav-dropdown-menu button:focus-visible {
  background: var(--ds-surface-alt);
}

/* Right-hand actions */
:root .top-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-shrink: 0;
}

:root .top-nav .nav-portal-link,
:root .top-nav .nav-portal-menu > .nav-dropdown-toggle,
:root .top-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-target);
  padding: 0 var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}

/* Secondary: outlined */
:root .top-nav .nav-portal-link,
:root .top-nav .nav-portal-menu > .nav-dropdown-toggle {
  border: 1px solid var(--ds-border-strong);
  background: transparent;
  color: var(--ds-fg);
}

:root .top-nav .nav-portal-link:hover,
:root .top-nav .nav-portal-menu > .nav-dropdown-toggle:hover,
:root .top-nav .nav-portal-menu.is-open > .nav-dropdown-toggle {
  background: var(--ds-surface-alt);
}

:root .top-nav .nav-portal-menu > .nav-dropdown-toggle::after {
  display: none;
}

/* A name is a name, not a nav label: no capitals. */
:root .top-nav .nav-portal-menu > .nav-dropdown-toggle [data-portal-firstname] {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 15px;
}

:root .top-nav .nav-portal-menu .nav-dropdown-menu {
  left: auto;
  right: 0;
}

:root .top-nav .nav-portal-sep {
  display: block;
  height: 1px;
  margin: var(--ds-space-2) 0;
  background: var(--ds-border);
}

/* A dot, not a count. An accurate number would mean polling on every public
   page view; the real count lives on the portal's own notification bell. */
:root .top-nav .nav-portal-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-accent);
  flex-shrink: 0;
}

:root .top-nav .nav-portal-dot[hidden],
:root .top-nav [data-portal-state][hidden] {
  display: none;
}

/* Accent: the one gold action on every screen. */
:root .top-nav .nav-cta {
  border: 1px solid var(--ds-accent);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}

:root .top-nav .nav-cta:hover {
  border-color: var(--ds-accent-hover);
  background: var(--ds-accent-hover);
}

/* Theme toggle: only on pages that have adopted the design system. A legacy
   page cannot follow a theme, so offering one there would be a broken switch. */
:root .top-nav .theme-toggle {
  display: none;
}

html[data-ds] .top-nav .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ds-target);
  height: var(--ds-target);
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-fg);
  cursor: pointer;
  transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

html[data-ds] .top-nav .theme-toggle:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-surface-alt);
}

:root .top-nav .theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

/* The icon shows where the switch goes: a moon in light, a sun in dark. */
:root .top-nav .theme-toggle .theme-toggle-sun { display: var(--ds-show-on-dark); }
:root .top-nav .theme-toggle .theme-toggle-moon { display: var(--ds-show-on-light); }

:root .top-nav .nav-toggle {
  display: none;
}

:root .top-nav :focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

/* Collapsed menu below lg (1200px): the full row of links and actions needs
   about 1,240px, so a laptop at 1,100px gets the menu button rather than a row
   that wraps. */
@media (max-width: 1199px) {
  :root .top-nav {
    flex-wrap: nowrap;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-4);
  }

  :root .top-nav .nav-brand {
    margin-right: auto;
  }

  :root .top-nav .nav-brand img {
    height: 40px;
  }

  :root .top-nav .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: var(--ds-target);
    height: var(--ds-target);
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-fg);
    cursor: pointer;
    flex-shrink: 0;
  }

  :root .top-nav .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform var(--ds-base) var(--ds-ease), opacity var(--ds-base) var(--ds-ease);
  }

  :root .top-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  :root .top-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  :root .top-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  :root .top-nav .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-space-5);
    max-height: calc(100vh - var(--ds-bar));
    overflow-y: auto;
    padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-6);
    background: var(--ds-bg);
    border-bottom: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-2);
  }

  :root .top-nav.is-open .nav-menu {
    display: flex;
  }

  :root .top-nav .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }

  :root .top-nav .nav-links > li > a,
  :root .top-nav .nav-links > li > .nav-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    border-bottom: 1px solid var(--ds-border);
    font-size: 15px;
  }

  :root .top-nav .nav-links a::after,
  :root .top-nav .nav-dropdown-toggle::after {
    bottom: -1px;
  }

  :root .top-nav .nav-dropdown-menu {
    position: static;
    min-width: 0;
    padding: 0 0 var(--ds-space-2);
    border: 0;
    border-bottom: 1px solid var(--ds-border);
    border-radius: 0;
    background: var(--ds-surface-alt);
    box-shadow: none;
  }

  :root .top-nav .nav-dropdown-menu a,
  :root .top-nav .nav-portal-menu .nav-dropdown-menu a,
  :root .top-nav .nav-dropdown-menu button {
    font-size: 14px;
  }

  /* Account first: in the opened menu the client's name (or "Client Portal"
     to sign in) and "Talk to Ryan" sit above the page links, in reach of a
     thumb without scrolling past the whole site map. */
  :root .top-nav .nav-actions {
    order: -1;
    flex-direction: column;
    align-items: stretch;
  }

  :root .top-nav .nav-portal-link,
  :root .top-nav .nav-portal-menu > .nav-dropdown-toggle,
  :root .top-nav .nav-cta {
    width: 100%;
  }

  :root .top-nav .nav-portal-menu .nav-dropdown-menu {
    right: auto;
  }
}

@media (min-width: 1200px) {
  :root .top-nav .nav-dropdown:hover .nav-dropdown-menu,
  :root .top-nav .nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
  }
}

body.nav-menu-open {
  overflow: hidden;
}

/* ── 4. FOOTER ──
   includes/public-footer.html. Always a dark panel (data-theme="dark" in the
   markup), so both brand marks are the white artwork in either theme. Every
   rule is scoped under .kr-public-footer, so a page sheet's own `footer` or
   `.footer-*` rule cannot reach it. */
.kr-public-footer {
  background: var(--ds-bg);
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
}

.kr-public-footer a {
  color: inherit;
}

.kr-public-footer :focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.kr-public-footer .footer-container,
.kr-public-footer .compliance-inner {
  max-width: var(--ds-max);
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
}

.kr-public-footer .compliance-bar {
  padding: var(--ds-space-5) 0;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}

.kr-public-footer .compliance-inner {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
}

.kr-public-footer .compliance-logo {
  flex-shrink: 0;
}

.kr-public-footer .compliance-logo img {
  display: block;
  width: auto;
  height: 52px;
  filter: none;
}

.kr-public-footer .compliance-text {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ds-fg-muted);
}

.kr-public-footer .compliance-text strong {
  color: var(--ds-fg);
  font-weight: 600;
}

.kr-public-footer .compliance-text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kr-public-footer footer {
  padding: var(--ds-space-8) 0 var(--ds-space-6);
  background: var(--ds-bg);
  border: 0;
}

.kr-public-footer .footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--ds-space-7);
  margin-bottom: var(--ds-space-7);
}

.kr-public-footer .footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

.kr-public-footer .footer-brand-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-4) var(--ds-space-5);
}

/* Never let the flex row shrink the marks: squeezing a fixed-height image
   distorts it. The row wraps instead. */
.kr-public-footer .footer-brand-logos > * {
  flex: 0 0 auto;
}

.kr-public-footer .footer-logo-karakter img {
  display: block;
  width: 150px;
  height: auto;
  filter: none;
}

.kr-public-footer .footer-brand-divider {
  align-self: stretch;
  width: 1px;
  background: var(--ds-border);
}

/* Alberta advertising rules: the brokerage mark stays at least as prominent
   as the REALTOR®'s own. Keep this height >= the KARAKTER lockup's. */
.kr-public-footer .footer-logo-grassroots img {
  display: block;
  width: auto;
  height: 125px;
  filter: none;
}

.kr-public-footer .footer-bio {
  max-width: 300px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-fg-muted);
}

.kr-public-footer .footer-col-title {
  margin: 0 0 var(--ds-space-4);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ds-accent-fg);
}

.kr-public-footer .footer-links,
.kr-public-footer .footer-area-links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kr-public-footer .footer-links a,
.kr-public-footer .footer-area-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-target);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ds-fg);
  text-decoration: none;
}

.kr-public-footer .footer-links a:hover,
.kr-public-footer .footer-area-links a:hover {
  color: var(--ds-accent-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kr-public-footer .footer-areas {
  padding: var(--ds-space-6) 0 var(--ds-space-2);
  border-top: 1px solid var(--ds-border);
}

.kr-public-footer .footer-areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-6);
}

.kr-public-footer .footer-area-group-title {
  margin: 0 0 var(--ds-space-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-fg);
}

.kr-public-footer .footer-area-soon {
  margin: 0;
  font-size: 15px;
  color: var(--ds-fg-muted);
}

.kr-public-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-6);
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

.kr-public-footer .footer-copy {
  max-width: 640px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-fg-muted);
}

.kr-public-footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ds-space-5);
}

.kr-public-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-target);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-fg);
  text-decoration: none;
}

.kr-public-footer .footer-social a:hover {
  color: var(--ds-accent-fg);
}

@media (max-width: 899px) {
  .kr-public-footer .compliance-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-4);
  }

  .kr-public-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
  }

  .kr-public-footer .footer-areas-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-5);
  }
}

@media (max-width: 639px) {
  .kr-public-footer .footer-container,
  .kr-public-footer .compliance-inner {
    padding: 0 var(--ds-space-4);
  }

  .kr-public-footer .footer-logo-karakter img {
    width: 122px;
  }

  .kr-public-footer .footer-logo-grassroots img {
    height: 101px;
  }

  .kr-public-footer .footer-areas-grid {
    gap: var(--ds-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-nav *,
  .kr-public-footer * {
    transition: none !important;
  }
}