/* ==========================================================================
   MORAN FAMILY OF BRANDS — ABOVE-THE-FOLD CSS
   Critical-path styles only: reset/tokens, site header, hero banner.
   Loaded render-blocking in <head>; everything else lives in style.css.

   WORDPRESS-SAFE CLASS STRATEGY (applies to this file and style.css):
   Plain content tags — p, h1–h6, ul, ol, li, blockquote — never carry a
   component class. Every one of them is styled through a class on its
   parent wrapper (e.g. ".brand-card p", ".section-head h2"). This is what
   lets an editor drop unstyled paragraphs/headings into a WP block or the
   content editor and still inherit the right look. Only wrapper elements
   (div, section, article, span, a, button) carry component classes.
   Base font sizes for p/h1–h6 are set ONCE below, not per section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #e3701c;
  --color-primary-dark: #bd5912;
  --color-primary-light: #fdf1e7;
  --color-dark: #202124;
  --color-dark-alt: #17181a;
  --color-white: #ffffff;
  --color-bg-alt: #f6f6f4;
  --color-border: #e6e2dd;
  --color-text: #2b2b2b;
  --color-text-muted: #666461;
  --color-text-on-dark: #f2f1ef;
  --color-text-muted-on-dark: #b6b3ae;

  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --text-base: 1rem;
  --text-sm: 0.9375rem;
  --text-lg: 1.125rem;
  --h1-size: clamp(2.25rem, 4.2vw, 3.5rem);
  --h2-size: clamp(1.75rem, 3vw, 2.375rem);
  --h3-size: 1.3125rem;
  --h4-size: 1.0625rem;

  --container-wide: 1640px;
  --container-main: 1440px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-utility-h: 44px;
  --header-main-h: 92px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + global type (set once)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
	vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Generic content links (inside paragraphs, lists, quotes) are orange by
   default. Low specificity on purpose — nav links, buttons, cards, and
   other components with their own explicit color rules are unaffected. */
p a,
li a,
blockquote a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

p a:hover,
li a:hover,
blockquote a:hover {
  color: var(--color-primary);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-dark);
}

h1 {
  font-size: var(--h1-size);
}
h2 {
  font-size: var(--h2-size);
}
h3 {
  font-size: var(--h3-size);
  font-weight: 600;
}
h4 {
  font-size: var(--h4-size);
  font-weight: 600;
}

p {
  margin: 0 0 1em;
  font-size: var(--text-base);
  line-height: 1.75;
}

p:last-child {
  margin-bottom: 0;
}

blockquote {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

figure {
  margin: 0;
  line-height: 0;
  font-size: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.container-wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-main {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.btn-dark:hover {
  background: #000;
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-dark);
}

.btn-outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn-sm {
  padding: 0.6rem 1.25rem;
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   3. Site header — two tiers, sticky
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1001;
  background: var(--color-white);
  box-shadow: 0 1px 0 var(--color-border);
}

.site-header__utility {
  background: var(--color-white);
}

.site-header__utility-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
  min-height: var(--header-utility-h);
  padding-top: 0.5rem;
}

.site-header__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.site-header__phone i {
  color: var(--color-primary);
}

.site-header__ctas {
  display: flex;
  gap: 0.65rem;
}

.site-header__ctas .btn {
  padding: 0.4rem 1.1rem;
  font-size: 0.8125rem;
}

.site-header__ctas .btn-primary {
  background: var(--color-primary);
}

.site-header__ctas .btn-dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.site-header__ctas .btn-dark:hover {
  background: #000;
  color: var(--color-white);
}

.site-header__main-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: var(--header-main-h);
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  height: 62px;
  width: auto;
}

.main-nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* Everything below targets plain ul > li > a (and a nested ul for the
   dropdown) so this works with an unmodified wp_nav_menu() output — no
   menu-item classes required. Only .main-nav itself needs to be applied
   to the wrapping <nav>. */

.main-nav > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  flex-wrap: nowrap;
}

.main-nav > ul > li {
  position: relative;
}

.main-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 0.5rem 0;
  white-space: nowrap;
  text-decoration: none;
}

/* Chevron only appears on items that actually have a submenu */
.main-nav > ul > li:has(> ul) > a::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.6em;
  color: var(--color-text-muted);
  transition: transform 0.2s var(--ease);
}

.main-nav > ul > li:hover > a,
.main-nav > ul > li > a:focus-visible {
  color: var(--color-primary);
}

.main-nav > ul > li:hover > a::after {
  transform: rotate(180deg);
}

.main-nav > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(20, 18, 15, 0.14);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
    visibility 0.2s;
  z-index: 10;
}

.main-nav > ul > li:hover > ul,
.main-nav > ul > li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav > ul > li > ul li {
  border-radius: 6px;
}

.main-nav > ul > li > ul a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
}

.main-nav > ul > li > ul a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.nav-toggle {
  display: none;
  border: none;
  background: none;
  padding: 0.5rem;
  font-size: 1.5rem;
  color: var(--color-dark);
  flex-shrink: 0;
}

.main-nav__close {
  display: none;
}

@media (max-width: 1180px) {
  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  /* The exact same .main-nav element becomes the mobile off-canvas panel —
     no separate mobile markup, just a different layout at this width. */
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    z-index: 300;
    padding: 5.5rem 1.5rem 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
  }

  .main-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-size: 1.125rem;
    color: var(--color-dark);
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav > ul {
    display: block;
    flex: 1 1 auto;
  }

  .main-nav > ul > li {
    position: static;
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav > ul > li > a {
    padding: 0.9rem 0.1rem;
    font-size: 1rem;
    justify-content: space-between;
  }

  .main-nav > ul > li:hover > a::after {
    transform: none;
  }

  .main-nav > ul > li.is-expanded > a::after {
    transform: rotate(180deg);
  }

  /* Submenus become collapsible accordions instead of hover flyouts */
  .main-nav > ul > li > ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 1rem;
    display: none;
  }

  .main-nav > ul > li.is-expanded > ul {
    display: block;
  }

  .main-nav > ul > li > ul a {
    padding: 0.75rem 0.1rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
  }

  .main-nav__mobile-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-shrink: 0;
  }
}

@media (min-width: 1181px) {
  .main-nav__mobile-ctas {
    display: none;
  }
}

@media (max-width: 700px) {
  .site-header__utility {
  border-bottom: solid 1px #eee;
      padding-bottom: 7px;
}
  .site-header__ctas .btn:last-child {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header__ctas {
    display: none;
  }

  .site-header__logo img {
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   4. Hero — real photography, full height
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-dark);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* slick-theme.css ships with .slick-dotted.slick-slider{margin-bottom:30px},
   added automatically since dots:true. That's the real source of the gap
   between the hero and the stats bar — it assumes dots render below the
   slider, but ours are absolutely positioned inside it. Neutralize it here
   (loaded after slick-theme.css, same specificity, so this wins on source
   order — !important added anyway for certainty). */
.hero__slider.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}

.hero__slide {
  position: relative;
  /* !important is required here: once Slick initializes, it adds its own
     "slick-slide" class to this same element, and the vendored slick.css
     (loaded after this file, same specificity) sets .slick-slide{height:100%}.
     That 100% resolves against an auto-height ancestor and collapses this
     element down to its in-flow content height (~300px), which is why the
     hero was rendering short despite this rule. !important guarantees our
     fixed height wins regardless of load order. */
  
}

/* Text is centered on its own absolutely-positioned layer rather than via
   flex on .hero__slide itself — Slick also applies float:left (and other
   layout-affecting styles) to that same element once initialized, which is
   an unreliable partner for flex centering. This layer is independent of
   whatever Slick does to .hero__slide, same technique as .hero__slide-media
   below, so centering can't be knocked off by the slider mechanics. */
.hero__slide > .container-wide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
}

/* Give Slick's generated wrapper chain the same fixed height, !important
   because Slick's JS can set inline styles on these elements (e.g. for
   track width during transitions) and inline styles beat plain external
   CSS regardless of source order. */
.hero__slider,
.hero__slider .slick-list,
.hero__slider .slick-track {
 
}

/* Guard against the pre-Slick-init flash: hide every slide but the first
   until Slick has restructured the markup (it re-applies display:block to
   all slick-slide elements once initialized, via slick.css loaded after
   this file, so this rule only governs the brief pre-init moment). */
.hero__slide ~ .hero__slide {
  display: none;
}

.hero__slide-media {
/*  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;*/
}

.hero__slide-media img {
  width: 100%;
 /* height: 100%;
  object-fit: cover;
  object-position: center;*/
}

.hero__slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+1,000000+100&0+60,1+100 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 1%,rgba(103,103,103,0) 60%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


}

.hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 2rem;
  color: var(--color-white);
}

.hero__eyebrow {
display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0;
}

.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-primary);
}

.hero__body h1 {
color: var(--color-white);
  max-width: 16ch;
  line-height: 1;
}

.hero__body h1 em {
  font-style: normal;
  color: var(--color-primary);
}

.hero .slick-dots {
  position: absolute;
  bottom: 1.5rem;
  right: var(--gutter);
  display: flex;
  gap: 0.5rem;
  width: auto;
  list-style: none;
  padding: 0;
  z-index: 2;
}

.hero .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  font-size: 0;
  text-indent: -9999px;
}

.hero .slick-dots li.slick-active button {
  background: var(--color-primary);
}

@media (max-width: 767px) {
  .hero__slide > .container-wide {
  position: relative;
}

  
}