.elementor-kit-6{--e-global-color-primary:#24408E;--e-global-color-secondary:#1A1A1A;--e-global-color-text:#1A1A1A;--e-global-color-accent:#F5CB15;--e-global-color-36ed48a:#666666;--e-global-color-c36c4b2:#999999;--e-global-color-b991b18:#F2F2F2;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{letter-spacing:0px;word-spacing:0px;border-style:none;border-radius:5px 5px 5px 5px;padding:20px 20px 20px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --ow-blue:#24408e; --ow-black:#000000; --ow-gold:#f5cb15; --ow-blue-dark:#1a2f68; --ow-gold-dark:#cda80e; --ow-neutral-900:#111827; --ow-neutral-500:#6b7280; --ow-neutral-300:#c9cbd1; --ow-font-primary:Montserrat; }
/* Start custom CSS *//* ==========================================================================
   OLIVIERI & WEST — GLOBAL STYLESHEET
   Source of truth: O&W Brand Guidelines 2026 (colors, logo, typography)
   Layout/spacing conventions: O&W WordPress + Elementor Project Brief, Sec. 10–11
 
   HOW TO USE IN ELEMENTOR
   - Paste this whole file into: WordPress Admin > Elementor > Custom Code
     (or Site Settings > Custom CSS), OR your child theme's style.css.
   - Elementor's own Global Colors / Global Fonts panels should ALSO be set
     to match Section 1 and 2 below — see the companion setup guide,
     "O&W-Elementor-Global-Setup-Guide.md", for exact steps and click paths.
   - This file is safe to load site-wide; it only defines variables and
     base/utility rules, it does not fight Elementor's own output.
   ========================================================================== */
 
/* --------------------------------------------------------------------------
   1. COLOR TOKENS
   Brand-approved colors (O&W Brand Guidelines, Sec. 04) are marked BRAND.
   Everything else is a functional neutral derived to make the brand
   colors usable for body copy, backgrounds, borders, and UI states.
   Neutrals and semantic (success/warning/error) colors are NOT in the
   official brand PDF — flag for O&W approval before final launch:
   [OW-NEEDED: confirm neutral grays and semantic status colors]
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors — BRAND, do not alter */
  --ow-blue: #24408e;       /* O&W Blue — primary brand color */
  --ow-black: #000000;      /* Black — brand color */
  --ow-gold: #f5cb15;       /* O&W Gold — accent brand color */
 
  /* Derived brand tints/shades — for hover, active, and depth states only.
     Never substitute these for the brand hex values above in logos or
     primary brand marks. */
  --ow-blue-dark: #1a2f68;   /* hover/active state for blue buttons & links */
  --ow-blue-light: #e8ecf7;  /* pale blue tint for section backgrounds/badges */
  --ow-gold-dark: #cda80e;   /* hover/active state for gold buttons; also the
                                 minimum-contrast gold safe for small UI use */
 
  /* Functional neutrals (not brand colors — UI scaffolding only) */
  --ow-white: #ffffff;
  --ow-neutral-050: #f7f7f8;  /* page background alternative to white */
  --ow-neutral-100: #ececee;  /* dividers, subtle section backgrounds */
  --ow-neutral-300: #c9cbd1;  /* borders, disabled states */
  --ow-neutral-500: #6b7280;  /* muted/secondary text */
  --ow-neutral-700: #374151;  /* body text alternative to pure black */
  --ow-neutral-900: #111827;  /* near-black, softer than pure #000 for large text blocks */
 
  /* Semantic (pending O&W approval) */
  --ow-success: #1e6b3d;
  --ow-warning: #9a651d;
  --ow-error: #a3242f;
 
  /* Text on brand colors */
  --ow-text-on-blue: var(--ow-white);
  --ow-text-on-gold: var(--ow-black); /* gold fails AA contrast with white text */
  --ow-text-on-black: var(--ow-white);
 
  /* Primary text/background pairing for body content */
  --ow-body-bg: var(--ow-white);
  --ow-body-text: var(--ow-neutral-900);
  --ow-muted-text: var(--ow-neutral-500);
  --ow-border: var(--ow-neutral-300);
}
 
/* --------------------------------------------------------------------------
   2. TYPOGRAPHY TOKENS
   Brand Guidelines, Sec. 05: Montserrat is the ONLY approved typeface,
   across five weights. Load via Google Fonts in Elementor > Custom Fonts,
   or enqueue the family below.
   -------------------------------------------------------------------------- */
:root {
  --ow-font-primary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
 
  --ow-weight-thin: 100;
  --ow-weight-regular: 400;
  --ow-weight-semibold: 600;
  --ow-weight-bold: 700;
  --ow-weight-extrabold: 800;
 
  /* Type scale — desktop first, tablet/mobile handled via clamp() */
  --ow-h1-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);   /* ~32px – 52px */
  --ow-h2-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);  /* ~24px – 36px */
  --ow-h3-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem); /* ~20px – 26px */
  --ow-body-size: 1.125rem;      /* 18px desktop, per brief 10.2 */
  --ow-body-size-mobile: 1rem;   /* 16px minimum on mobile */
  --ow-small-size: 0.875rem;     /* 14px, eyebrow/utility text */
 
  --ow-body-line-height: 1.6;    /* within brief's 1.55–1.7 recommendation */
  --ow-heading-line-height: 1.2;
}
 
/* --------------------------------------------------------------------------
   3. SPACING SCALE & LAYOUT TOKENS
   Spacing scale per brief Sec. 11.2: 8, 16, 24, 32, 48, 64, 96, 128.
   -------------------------------------------------------------------------- */
:root {
  --ow-space-1: 8px;
  --ow-space-2: 16px;
  --ow-space-3: 24px;
  --ow-space-4: 32px;
  --ow-space-5: 48px;
  --ow-space-6: 64px;
  --ow-space-7: 96px;
  --ow-space-8: 128px;
 
  --ow-container-max: 1280px;     /* main content container */
  --ow-reading-max: 760px;        /* long-form copy max width */
  --ow-radius-sm: 4px;            /* brief calls for small radii, 0–6px */
  --ow-radius-md: 6px;
 
  /* Horizontal gutter used site-wide, including the header —
     scales smoothly between mobile and desktop instead of snapping
     at breakpoints. This is the token that fixes header edge-to-edge spacing. */
  --ow-gutter-x: clamp(20px, 5vw, 64px);
 
  /* Shared logo size — used by BOTH the header and footer logo images via
     the .ow-logo class below, so the two are guaranteed to match instead of
     relying on two separate widgets being set to the same number by hand.
     Scales down to the brand guidelines' stated minimum digital width
     (120px, Sec. 03 "Clear Space") on small screens, up to 160px on desktop.
     [OW-NEEDED: confirm 160px matches the logo width actually in use on the
     live header; adjust this one variable to update both header and footer.] */
  --ow-logo-width: clamp(120px, 20vw, 160px);
}
 
/* --------------------------------------------------------------------------
   4. BASE ELEMENT STYLES
   -------------------------------------------------------------------------- */
body {
  font-family: var(--ow-font-primary);
  font-weight: var(--ow-weight-regular);
  font-size: var(--ow-body-size-mobile);
  line-height: var(--ow-body-line-height);
  color: var(--ow-body-text);
  background-color: var(--ow-body-bg);
}
 
@media (min-width: 768px) {
  body { font-size: var(--ow-body-size); }
}
 
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ow-font-primary);
  font-weight: var(--ow-weight-bold);
  line-height: var(--ow-heading-line-height);
  color: var(--ow-black);
  margin: 0 0 var(--ow-space-2) 0;
}
 
h1 { font-size: var(--ow-h1-size); font-weight: var(--ow-weight-extrabold); }
h2 { font-size: var(--ow-h2-size); }
h3 { font-size: var(--ow-h3-size); font-weight: var(--ow-weight-semibold); }
 
a {
  color: var(--ow-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus { color: var(--ow-blue-dark); }
 
/* Visible focus state — required for accessibility (brief Sec. 11.6) */
a:focus-visible,
button:focus-visible,
.ow-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  /* Blue-dark, not gold, meets the 3:1 non-text contrast minimum against
     white/light backgrounds (tested: gold-dark measures ~2.3:1 and fails) */
  outline: 3px solid var(--ow-blue-dark);
  outline-offset: 2px;
}
 
/* Eyebrow / small uppercase label pattern (brief allows restrained uppercase
   only for short labels) */
.ow-eyebrow {
  font-size: var(--ow-small-size);
  font-weight: var(--ow-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ow-blue);
}
 
/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ow-space-1);
  font-family: var(--ow-font-primary);
  font-weight: var(--ow-weight-semibold);
  font-size: 1rem;
  line-height: 1;
  padding: var(--ow-space-2) var(--ow-space-3);
  border-radius: var(--ow-radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  min-height: 44px; /* touch target minimum, brief Sec. 11.6 */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
 
/* Solid accent — primary debtor CTA ("Review Your Options") */
.ow-btn--accent {
  background-color: var(--ow-gold);
  color: var(--ow-text-on-gold);
  border-color: var(--ow-gold);
}
.ow-btn--accent:hover { background-color: var(--ow-gold-dark); border-color: var(--ow-gold-dark); }
 
/* Solid primary — blue fill */
.ow-btn--primary {
  background-color: var(--ow-blue);
  color: var(--ow-text-on-blue);
  border-color: var(--ow-blue);
}
.ow-btn--primary:hover { background-color: var(--ow-blue-dark); border-color: var(--ow-blue-dark); }
 
/* Dark outline — secondary CTA ("Discuss Recovery Services") */
.ow-btn--outline {
  background-color: transparent;
  color: var(--ow-black);
  border-color: var(--ow-black);
}
.ow-btn--outline:hover { background-color: var(--ow-black); color: var(--ow-white); }
 
/* --------------------------------------------------------------------------
   6. CONTAINERS & LAYOUT
   -------------------------------------------------------------------------- */
.ow-container {
  width: 100%;
  max-width: var(--ow-container-max);
  margin-inline: auto;
  padding-inline: var(--ow-gutter-x);
  box-sizing: border-box;
}
 
.ow-container--reading {
  max-width: var(--ow-reading-max);
}
 
/* Shared logo sizing — apply "ow-logo" to the Image widget in BOTH the
   header and the footer so they always render at the identical width. */
.ow-logo {
  width: var(--ow-logo-width);
  height: auto;
  display: block;
}
 
/* --------------------------------------------------------------------------
   7. HEADER
   Apply the "ow-header" class to the header's outer Elementor container
   (both the utility strip and the main header row) to get consistent,
   responsive left/right spacing instead of hardcoded pixel padding.
   -------------------------------------------------------------------------- */
.ow-header {
  width: 100%;
  padding-inline: var(--ow-gutter-x);
  box-sizing: border-box;
}
 
.ow-header .ow-header__inner {
  max-width: var(--ow-container-max);
  margin-inline: auto;
}
 
/* Fallback: if you're using the Hello Elementor theme's default header
   and cannot add a custom class to its root container, this targets the
   theme's built-in header wrapper directly. Confirm the .elementor-kit-6 still
   matches your installed theme version before relying on it. */
.site-header,
header.site-header {
  padding-inline: var(--ow-gutter-x);
  box-sizing: border-box;
}
 
/* --------------------------------------------------------------------------
   8. FOOTER
   Apply "ow-footer" to the footer's outer Elementor container and
   "ow-footer__inner" to the nested container holding the brand row,
   the column grid, the disclosure line, and the bottom bar — same
   pattern as the header in Section 7. Logo image widget gets "ow-logo"
   (Section 6) so it matches the header exactly.
   -------------------------------------------------------------------------- */
.ow-footer {
  width: 100%;
  background-color: var(--ow-blue);
  color: var(--ow-white);
  padding-inline: var(--ow-gutter-x);
  padding-block: var(--ow-space-6) var(--ow-space-4);
  box-sizing: border-box;
}
 
.ow-footer .ow-footer__inner {
  max-width: var(--ow-container-max);
  margin-inline: auto;
}
 
/* Links inside the footer default to white (not the site-wide blue, which
   would be invisible on this navy background) and pick up gold on
   hover/focus for a restrained brand accent. Gold-on-navy passes contrast;
   this is a dark background, so it is not subject to the "no gold body
   text on light backgrounds" rule in Section 1. */
.ow-footer a {
  color: var(--ow-white);
  text-decoration: none;
}
.ow-footer a:hover,
.ow-footer a:focus {
  color: var(--ow-gold);
  text-decoration: underline;
}
 
/* Brand row: logo only, full width, generous space before the column grid */
.ow-footer__brand {
  margin-bottom: var(--ow-space-5);
}
 
/* Column grid: 4 columns desktop -> 2 columns tablet -> 1 column mobile */
.ow-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ow-space-5);
}
@media (max-width: 991px) {
  .ow-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .ow-footer__columns { grid-template-columns: 1fr; gap: var(--ow-space-4); }
}
 
.ow-footer__heading {
  font-size: var(--ow-small-size);
  font-weight: var(--ow-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ow-gold);
  margin: 0 0 var(--ow-space-2) 0;
}
 
.ow-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ow-space-1);
}
 
/* Contact column: real address/phone, not a link list */
.ow-footer__contact address {
  font-style: normal;
  line-height: var(--ow-body-line-height);
}
.ow-footer__contact a {
  font-weight: var(--ow-weight-semibold);
}
 
/* Required compliance disclosure — placement/wording pending counsel
   review per brief Sec. 7.2 and 12.1. Do not remove this rule without
   confirming the disclosure has an approved home elsewhere. */
.ow-footer__disclosure {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: var(--ow-space-5);
  padding-top: var(--ow-space-3);
  font-size: var(--ow-small-size);
  color: rgba(255, 255, 255, 0.85);
}
 
.ow-footer__bottom {
  margin-top: var(--ow-space-3);
  font-size: var(--ow-small-size);
  color: rgba(255, 255, 255, 0.7);
}
 
/* --------------------------------------------------------------------------
   9. ACCESSIBILITY UTILITIES
   -------------------------------------------------------------------------- */
.ow-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ow-black);
  color: var(--ow-white);
  padding: var(--ow-space-1) var(--ow-space-2);
  z-index: 1000;
}
.ow-skip-link:focus {
  left: var(--ow-space-2);
  top: var(--ow-space-2);
}
 
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
 
/* --------------------------------------------------------------------------
   10. PAGE TITLE SUPPRESSION
   Hello Elementor (and most base themes) auto-print the WordPress page
   title in a plain header block above the main content — so it lands
   directly above the Elementor hero section as a redundant, unstyled
   line. O&W hero sections carry their own headline, so this default
   title is hidden site-wide.
 
   Preferred fix per page: Elementor editor > hamburger menu (bottom
   left) > Site Settings > Layout > Page Title, or the page's own
   Layout tab, and toggle "Page Title" off. Use the CSS below as the
   global kill switch so a new page never ships with the stray title
   if that toggle gets missed.
   -------------------------------------------------------------------------- */
.page-header,
.entry-header,
h1.entry-title,
.page-title,
.elementor-widget-theme-page-title,
#page-title {
  display: none;
}
 
/* Opt back in on a specific page/template if a page title is ever wanted:
   add class "ow-show-page-title" to that page's <body> (Elementor > Page
   Settings > Advanced > Custom CSS/Attributes, or the theme's body class
   field) and it overrides the hide above. */
body.ow-show-page-title .page-header,
body.ow-show-page-title .entry-header,
body.ow-show-page-title h1.entry-title,
body.ow-show-page-title .page-title,
body.ow-show-page-title .elementor-widget-theme-page-title,
body.ow-show-page-title #page-title {
  display: block;
}/* End custom CSS */