/**
 * @file
 * HABD redesign foundation: fonts, tokens, the scoped reset, grounds and
 * button primitives. Library beauty/habd, theme group, weight 41, so it loads
 * after style.css, custom.css, homestyles.css and business-profile-revamp.css.
 *
 * Rules:
 * - Sizes are px (or clamp() of px): style.css sets html{font-size:10px}.
 * - Everything below :root is scoped to .habd. Legacy pages are untouched.
 * - Components read the semantic role tokens (--habd-heading, --habd-text,
 *   ...) that .habd[data-tone] sets, never a primitive colour directly, so a
 *   component is legible on every ground.
 */

/* ==========================================================================
   Fonts (self-hosted, SIL OFL 1.1, latin subset, variable weight axis).
   See fonts/habd/OFL.txt.
   ========================================================================== */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/habd/jost-latin-wght-normal.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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../../fonts/habd/cormorant-garamond-latin-wght-normal.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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../../fonts/habd/cormorant-garamond-latin-wght-italic.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;
}

/* ==========================================================================
   Primitive tokens. On :root so fixed overlays (the nav panel) can read
   them; no legacy rule uses the --habd- prefix.

   Naming against the brief: brief "Champagne gold" (#E5C88C) is --habd-gold,
   brief "Gold" (#C9A24A) is --habd-gold-deep.

   Contrast substitutions (owner sign-off pending, AA by default):
   - --habd-gold-ink #7A611E replaces #9A7B2E for ALL small gold text on
     light grounds (5.64:1 on #FDFAEC). #9A7B2E stays for 24px+ text and
     borders only (--habd-gold-display).
   - --habd-meta-dark #8FA396 replaces #6E8377 for meta text on dark
     (6.43:1 on #0A1F15; #6E8377 is 4.24:1).
   ========================================================================== */
:root {
  /* Greens */
  --habd-forest: #0D2A1D;
  --habd-forest-deep: #07160F;
  --habd-forest-mid: #143A28;
  --habd-forest-hover: #153A28;
  --habd-forest-line: #21402F;
  --habd-forest-line-2: #1B3A2A;
  --habd-darkest: #050F0A;
  --habd-footer: #0A1F15;

  /* Golds */
  --habd-gold: #E5C88C;
  --habd-gold-light: #E8CE94;
  --habd-gold-deep: #C9A24A;
  --habd-gold-ink: #7A611E;
  --habd-gold-display: #9A7B2E;

  /* Creams */
  --habd-cream: #FDFAEC;
  --habd-cream-flat: #F5F1E6;
  --habd-paper: #FFFDF8;
  --habd-cream-line: #E4D9BC;

  /* Ink on light */
  --habd-ink: #12100C;
  --habd-ink-body: #4A463D;
  --habd-ink-meta: #6B6555;

  /* Ink on dark */
  --habd-ink-light: #F5F1E6;
  --habd-ink-light-soft: #C3D0C6;
  --habd-ink-light-quiet: #A9B7AD;
  --habd-meta-dark: #8FA396;
  --habd-nav-active: #EFEBDF;

  /* Type */
  --habd-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --habd-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --habd-fs-h1: clamp(40px, calc(4.4vw + 23px), 86px);
  --habd-fs-h2: clamp(34px, calc(3vw + 22px), 62px);
  --habd-fs-h2-xl: clamp(44px, calc(4.2vw + 27px), 88px);
  --habd-fs-lead: 20px;
  --habd-fs-body: 17px;
  --habd-fs-label: 13px;

  /* Layout */
  --habd-gutter: 56px;
  --habd-max: 1440px;
  --habd-radius-s: 8px;
  --habd-radius-m: 12px;
  --habd-radius-l: 14px;
  --habd-radius-xl: 16px;
  --habd-radius-pill: 999px;
  --habd-shadow-1: 0 6px 16px rgba(4, 14, 9, 0.4);
  --habd-shadow-2: 0 10px 26px rgba(229, 200, 140, 0.28);
  --habd-shadow-3: 0 26px 54px rgba(4, 14, 9, 0.55);

  /* Shell. --habd-header-h is overwritten at runtime by js/habd/habd-nav.js
     (inline on <html>); these are the per-breakpoint fallbacks.
     --habd-offset-top, --habd-offset-left, --habd-preview-h and
     --habd-panel-top are only ever set by the JS, so CSS fallbacks apply
     until it runs. */
  --habd-z-header: 490;
  --habd-header-h: 139px;
}
@media (max-width: 1279px) {
  :root { --habd-header-h: 109px; }
}
@media (max-width: 1024px) {
  :root { --habd-gutter: 32px; }
}
@media (max-width: 640px) {
  :root {
    --habd-header-h: 89px;
    --habd-gutter: 20px;
    --habd-fs-lead: 18px;
  }
}

/* ==========================================================================
   Semantic role tokens, by tone. data-tone is derived from data-ground
   (_beauty_habd_ground()), so editors choose one thing.
   ========================================================================== */
.habd,
.habd[data-tone="dark"] {
  --habd-heading: var(--habd-ink-light);
  --habd-text: var(--habd-ink-light-soft);
  --habd-meta: var(--habd-meta-dark);
  --habd-label: var(--habd-gold);
  --habd-line: var(--habd-forest-line);
  --habd-accent: var(--habd-gold);
  --habd-outline-border: var(--habd-gold);
  --habd-outline-text: var(--habd-gold);
  --habd-outline-hover: rgba(229, 200, 140, 0.1);
  --habd-focus: var(--habd-gold);
}
.habd[data-tone="light"] {
  --habd-heading: var(--habd-ink);
  --habd-text: var(--habd-ink-body);
  --habd-meta: var(--habd-ink-meta);
  --habd-label: var(--habd-gold-ink);
  --habd-line: var(--habd-cream-line);
  --habd-accent: var(--habd-gold-ink);
  --habd-outline-border: var(--habd-gold-display);
  --habd-outline-text: var(--habd-gold-ink);
  --habd-outline-hover: #F3EAD5;
  --habd-focus: var(--habd-gold-ink);
}

/* ==========================================================================
   Grounds.
   ========================================================================== */
.habd[data-ground="forest"] { --habd-bg: var(--habd-forest); }
.habd[data-ground="forest-deep"] { --habd-bg: var(--habd-forest-deep); }
.habd[data-ground="darkest"] { --habd-bg: var(--habd-darkest); }
.habd[data-ground="forest-gradient"] { --habd-bg: linear-gradient(180deg, var(--habd-forest-mid) 0%, var(--habd-forest-deep) 100%); }
.habd[data-ground="closing-gradient"] { --habd-bg: radial-gradient(110% 90% at 50% 0%, #123322 0%, #071710 58%, #040D08 100%); }
.habd[data-ground="footer"] { --habd-bg: var(--habd-footer); }
.habd[data-ground="cream"] { --habd-bg: var(--habd-cream); }
.habd[data-ground="cream-flat"] { --habd-bg: var(--habd-cream-flat); }
.habd[data-ground="cream-gradient"] { --habd-bg: linear-gradient(180deg, var(--habd-paper) 0%, var(--habd-cream-flat) 55%, #EBE4D2 100%); }
.habd[data-ground="champagne-gradient"] { --habd-bg: linear-gradient(178deg, #F7E7BE 0%, #F2DEB4 45%, var(--habd-gold) 100%); }

/* Decorative glow (data-glow): one radial gold circle behind the content. */
.habd[data-glow] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.habd[data-glow]::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 200, 140, 0.16), rgba(229, 200, 140, 0) 66%);
  pointer-events: none;
}
.habd[data-tone="light"][data-glow]::before { background: radial-gradient(circle, rgba(201, 162, 74, 0.16), rgba(201, 162, 74, 0) 66%); }
.habd[data-glow="none"]::before { display: none; }
.habd[data-glow="top-left"]::before { top: -300px; left: -260px; }
.habd[data-glow="top-right"]::before { top: -300px; right: -260px; }
.habd[data-glow="bottom-left"]::before { bottom: -300px; left: -260px; }
.habd[data-glow="bottom-right"]::before { bottom: -300px; right: -260px; }
.habd[data-glow="centre-left"]::before { top: 50%; left: -300px; transform: translateY(-50%); }

/* ==========================================================================
   Scoped reset. Each rule answers a verified legacy trap; the doubled
   .habd.habd raises specificity above the legacy selectors without IDs.
   ========================================================================== */
.habd,
.habd *,
.habd *::before,
.habd *::after {
  box-sizing: border-box;
}

/* body, .paragraph {Manrope !important} (custom.css:765); body line-height 2
   and Poppins (style.css:7559). */
.habd.habd {
  font-family: var(--habd-sans) !important;
  font-size: var(--habd-fs-body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  color: var(--habd-text);
  background: var(--habd-bg, transparent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* h1-h6 Serotiva !important (custom.css:762, style.css:6174), capitalize
   (custom.css:1203), h2 50px (custom.css:756). */
.habd.habd :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--habd-serif) !important;
  font-weight: 400;
  font-size: inherit;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  color: var(--habd-heading);
}

/* p margins (style.css:7751, 14699). */
.habd.habd :is(p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
}

/* p {Manrope !important; 18px} on every page node (style.css:19136,
   specificity 0,4,2) and p {font-weight:400; line-height:1.5em}
   (style.css:14699). :not(#habd-reset) adds ID weight without matching
   anything, so a paragraph inside .habd takes its type from its parent.
   Components set type on the wrapper (e.g. .habd-lead on a div, which is
   also how WYSIWYG paragraphs arrive), not on the <p>. */
.habd:not(#habd-reset) p {
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.habd.habd :is(ul, ol)[class] {
  list-style: none;
  padding: 0;
}

/* a {#C3A068} and a:hover underline (style.css:7577-7589). :where() keeps
   the hover/focus rule at 0,2,1: it still beats the legacy a:hover/a:focus
   (0,1,1) but loses to every component colour (.habd.habd .habd-btn--*,
   .habd.habd-header .habd-nav__link--lead, 0,3,0), so a mouse-focused button
   keeps its own text colour. */
.habd.habd a {
  color: inherit;
  text-decoration: none;
  background: transparent;
}
.habd.habd a:where(:hover, :focus) {
  color: inherit;
  text-decoration: none;
}

/* a:focus {outline: 5px auto} (style.css:7587). One visible ring, keyboard
   only; the ground's accent is at least 3:1 on every ground. */
.habd.habd :focus-visible {
  outline: 2px solid var(--habd-focus);
  outline-offset: 3px;
}
.habd.habd :focus:not(:focus-visible) {
  outline: none;
}

.habd.habd :is(input, button, select, textarea) {
  font-family: inherit !important;
  letter-spacing: inherit;
}
.habd.habd button {
  text-transform: none;
}

.habd.habd img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

.habd .habd-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   Type helpers.
   ========================================================================== */
.habd .habd-label {
  font-family: var(--habd-sans);
  font-size: var(--habd-fs-label);
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--habd-label);
}
.habd.habd .habd-h1 { font-size: var(--habd-fs-h1); line-height: 0.98; letter-spacing: -0.01em; }
.habd.habd .habd-h2 { font-size: var(--habd-fs-h2); line-height: 1.04; }
.habd.habd .habd-h2--xl { font-size: var(--habd-fs-h2-xl); line-height: 0.96; }
.habd.habd .habd-h1,
.habd.habd .habd-h2 { overflow-wrap: break-word; }
.habd .habd-accent { color: var(--habd-accent); }
.habd[data-tone="dark"] .habd-accent { color: var(--habd-gold-light); }
.habd .habd-lead {
  font-size: var(--habd-fs-lead);
  font-weight: 300;
  line-height: 1.65;
  color: var(--habd-text);
  text-wrap: pretty;
}
.habd .habd-meta { color: var(--habd-meta); }

/* Section header partial (templates/includes/habd/habd-section-header). */
.habd .habd-section-header {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 820px;
}
.habd .habd-section-header--centre {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.habd .habd-section-header__label {
  display: flex;
  align-items: center;
  gap: 14px;
}
.habd .habd-section-header__label::after {
  content: "";
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, var(--habd-gold-deep), rgba(201, 162, 74, 0));
}
.habd .habd-section-header--centre .habd-section-header__label::after { display: none; }

/* ==========================================================================
   Buttons. Never .btn: it forces Poppins 500 (style.css:6162) and
   .btn:hover{border:none!important} (custom.css:1283) kills outline borders.
   ========================================================================== */
/* .habd.habd outranks the reset's .habd.habd button rule. */
.habd.habd .habd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 16px 31px;
  border: 1px solid transparent;
  border-radius: var(--habd-radius-pill);
  background: transparent;
  font-family: var(--habd-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Solid champagne is reserved for Sign up (brief). */
.habd.habd .habd-btn--primary {
  padding: 17px 32px;
  background: var(--habd-gold);
  border-color: var(--habd-gold);
  color: var(--habd-forest);
  box-shadow: var(--habd-shadow-2);
}
.habd.habd .habd-btn--primary:hover,
.habd.habd .habd-btn--primary:focus-visible {
  background: var(--habd-gold-light);
  border-color: var(--habd-gold-light);
  color: var(--habd-forest);
}
.habd.habd .habd-btn--outline {
  border-color: var(--habd-outline-border);
  color: var(--habd-outline-text);
}
.habd.habd .habd-btn--outline:hover,
.habd.habd .habd-btn--outline:focus-visible {
  background: var(--habd-outline-hover);
  border-color: var(--habd-outline-border);
  color: var(--habd-outline-text);
}
.habd.habd .habd-btn--green {
  background: var(--habd-forest);
  border-color: var(--habd-forest);
  color: var(--habd-gold);
}
.habd.habd .habd-btn--green:hover,
.habd.habd .habd-btn--green:focus-visible {
  background: var(--habd-forest-hover);
  border-color: var(--habd-forest-hover);
  color: var(--habd-gold);
}
.habd.habd .habd-btn--link {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--habd-accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@supports (text-decoration-color: color-mix(in srgb, red 50%, transparent)) {
  .habd.habd .habd-btn--link { text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
}
.habd.habd .habd-btn--link:hover { text-decoration-color: currentColor; color: var(--habd-accent); }
/* Tone-aware: gold on dark; on light the border is #9A7B2E and the glyph
   #7A611E, both at least 3:1 on cream (#C9A24A there is about 2.3:1). */
.habd.habd .habd-btn--arrow {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border-color: var(--habd-outline-border);
  border-radius: 50%;
  color: var(--habd-accent);
}
.habd.habd .habd-btn--arrow:hover,
.habd.habd .habd-btn--arrow:focus-visible {
  background: var(--habd-outline-hover);
  border-color: var(--habd-outline-border);
  color: var(--habd-accent);
}
.habd.habd .habd-btn--s {
  padding: 13px 22px;
}
.habd.habd .habd-btn--l {
  padding: 22px 56px;
  font-size: 16px;
}
@media (max-width: 380px) {
  .habd.habd .habd-btn--s { padding: 10px 14px; }
}

/* ==========================================================================
   Motion and forced colours.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .habd,
  .habd *,
  .habd *::before,
  .habd *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .habd.habd .habd-btn {
    border: 1px solid ButtonText;
  }
}