/* Direction B, "Clear": modern, direct, photographic.
   Tokens only (plus the font file). Same token names as the other two. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font-heading: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body-size: 1.0625rem;
  --strong-weight: 700;
  --heading-weight: 800;
  --heading-case: none;
  --heading-tracking: -.02em;
  --heading-line: 1.1;
  --display-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.6rem);
  --display-size-home: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  --display-tracking: -.025em;
  --display-weight: 800;
  --ui-case: uppercase;
  --ui-tracking: .1em;
  --ui-weight: 700;
  --ui-size: .75rem;
  --nav-weight: 600;
  --nav-size: .95rem;
  --nav-case: none;
  --nav-tracking: 0;
  --button-weight: 700;
  --button-case: none;
  --button-tracking: 0;
  --button-size: .95rem;
  --quote-style: normal;

  --color-brand: #0b2a44;
  --color-brand-deep: #061a2c;
  --color-accent: #2b7bbf;
  --color-accent-on-dark: #5aa2dd; /* the accent as text on the navy bands: 6.4:1 on the footer, 5.3:1 on the brand blue (#2b7bbf gave 3.9:1) */
  --color-accent-ink: #1f5f96;
  --color-ink: #16212c;
  --color-muted: #55636f;
  --color-paper: #ffffff;
  --color-surface: #ffffff;
  --color-tint: #f1f5f9;
  --color-line: #dfe6ec;
  --color-line-strong: #9aa7b2;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, .72);
  --color-link: #1f5f96;
  --color-cta: #2770ae; /* 5.2:1 with white; #2b7bbf gave 4.48:1, a hair under WCAG AA */
  --color-cta-ink: #ffffff;
  --color-cta-hover: #1f5f96;
  --color-required: #c0392b;
  --color-focus-soft: rgba(43, 123, 191, .25);
  --rule-color: #dfe6ec;
  --focus: #0b2a44;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 4px 14px rgba(11, 42, 68, .08);
  --shadow-lg: 0 16px 40px rgba(11, 42, 68, .16);
  --button-radius: 999px;
  --card-bg: #ffffff;
  --card-border: 1px solid #e6ecf1;
  --card-radius: 14px;
  --card-shadow: 0 4px 14px rgba(11, 42, 68, .08);
  --card-image-ratio: 3 / 2;
  --section-pad: clamp(3rem, 7vw, 6rem);
  --max-width: 76rem;

  --header-bg: #0b2a44;
  --header-ink: #ffffff;
  --header-border: rgba(255, 255, 255, .12);
  --header-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  --header-height: 4.5rem;
  --logo-height: 2.5rem;
  --nav-active: #b9a48d;
  --submenu-bg: #ffffff;
  --submenu-ink: #16212c;
  --hero-bg: #0b2a44;
  --hero-ink: #ffffff;
  --hero-overlay: linear-gradient(90deg, rgba(6, 26, 44, .92) 0%, rgba(6, 26, 44, .7) 55%, rgba(6, 26, 44, .35) 100%);
  --hero-band-bg: #0b2a44;
  --hero-band-image: linear-gradient(90deg, rgba(6, 26, 44, .94), rgba(6, 26, 44, .72)), url("/wp-content/uploads/2021/02/Horsetooth-Res-3-scaled.jpg");
  --hero-align: left;
  --hero-actions-align: flex-start;
  --hero-max: 76rem;
  --hero-margin: auto;
  --hero-min-height: min(60vh, 40rem);
  --kicker-color: #b9a48d;
  --cta-bg: #0b2a44;
  --footer-bg: #061a2c;
}
/* Direction-specific layout: the hero text is a left column so the photograph stays visible. (The practice tiles once carried their title over the photo; since 2026-10-15 every direction sets the words under it, where a second line fits.) */
[data-design="clear"] .hero--photo .hero__title, [data-design="clear"] .hero--photo .hero__lede { max-width: 38rem; }
[data-design="clear"] .sidebar-card, [data-design="clear"] .contact__form { border-top: 0; }