/*
Theme Name:   Four Outdoor Rentals Child
Theme URI:    https://fouroutdoorrentals.com/
Description:  Child theme for Four Outdoor Rentals, Many, Louisiana. Carries the approved version 2 design system (navy, cream and brown) and the Theme Builder header and footer styling. Behaviour lives in the Four Outdoor Interactives plugin, not here.
Author:       Grimm Productions
Author URI:   https://grimmproductions.com/
Template:     Divi
Version:      1.1.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  four-outdoor-child
*/

/* ==========================================================================
   THIS FILE IS GENERATED. Do not edit it here.

   It is assembled by production/build_theme.py from:
     theme-src/style-header.txt    this header, and the one place the version lives
     theme-src/_base.css           Divi neutralisers and the scoped document base
     theme-src/_components.css     generated from the approved preview
     theme-src/_header-footer.css  Theme Builder header and footer

   To change the design, change the preview and rebuild. To change the header or
   footer, edit theme-src/_header-footer.css and rebuild. Editing style.css
   directly means the next build silently discards your work.
   ========================================================================== */

/* ==========================================================================
   Base layer: what Divi needs neutralised, and what the design system needs
   re-declared once its markup lives inside Divi modules.

   Two specificity notes that this whole file depends on:

   1. Divi prints its per-module CSS AFTER the theme stylesheet, so equal
      specificity loses. Structural overrides are prefixed with #page-container,
      which is Divi's own content wrapper, giving (1,x,y) and a clean win
      without !important.
   2. Everything that styles our content is under .fo-scope, the class the
      converter puts on every module it generates. Unscoped rules would reach
      the admin bar, the Divi builder UI and any plugin output on the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Structural neutralisers

   The preview lays out with CSS grid inside a single container. That layout is
   kept as-is rather than rebuilt as Divi rows and columns, because rebuilding
   it means redoing the design in module settings and the fine detail does not
   survive the trip. So Divi's own section and row padding is zeroed and our
   grid does the work.
   -------------------------------------------------------------------------- */

#page-container .et_pb_section.fo-section{padding:0;margin:0;}
#page-container .et_pb_row.fo-row{
  padding:0;margin:0 auto;width:100%;max-width:none;
}
#page-container .fo-row .et_pb_column{
  width:100%;margin:0;padding:0;float:none;
}
#page-container .et_pb_module.fo-module{margin-bottom:0;}

/* Divi adds a bottom margin to the last column in a row on some layouts. */
#page-container .fo-row .et_pb_column:last-child{margin-bottom:0;}

/* --------------------------------------------------------------------------
   2. Defences against wpautop

   Divi runs Text module content through wpautop, which turns blank lines into
   empty paragraphs and stray newlines into <br>. Each empty paragraph then
   picks up the paragraph margin. These rules only ever hide things that are
   already empty, so they cannot suppress real content.

   The bigger wpautop failure, anchors containing block elements being split
   apart, is not fixable in CSS. That is handled by putting such markup in Code
   modules, and verify_layout.py fails the build if any slips into a Text
   module.
   -------------------------------------------------------------------------- */

#page-container .fo-scope p:empty{display:none;}
#page-container .fo-scope figure > br,
#page-container .fo-scope img + br{display:none;}

/* --------------------------------------------------------------------------
   3. The document base, re-declared on the scope

   The preview set these on <body>. On a WordPress site Divi owns <body>, so
   they move onto .fo-scope instead. Values are identical to the preview.
   -------------------------------------------------------------------------- */

.fo-scope{
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* Divi sets a default paragraph bottom padding that fights our spacing scale. */
#page-container .fo-scope p{padding-bottom:0;}

/* Divi's link colour is a theme option, applied as `#page-container a`. An id
   beats any number of classes, so our own `.fo-scope a` rule loses to it and
   this override has to carry an id too.

   Scoped to links with NO class, which is the whole of the point.

   The preview sets `a{color:var(--accent)}` at the lowest specificity there
   is, so every component that colours its own links simply wins. Beating
   Divi needs an id here, and an id beats any number of classes, so this rule
   originally carried `:not(.btn):not(.card):not(.tile)` and quietly repainted
   everything those three exclusions did not happen to name. It was wrong in
   three places at once: white quickpick links and white breadcrumbs both came
   out brown, on six pages, and so did the navy telephone link on the contact
   page. Each fix would have been one more exclusion and one more thing to
   miss.

   A link the design gives a class to now keeps the colour the design gave it,
   without this rule having to know the class exists. harness/check_links.py
   compares every link on every page against the approved preview. */
#page-container .fo-scope a:not([class]){color:var(--accent);}
#page-container .fo-scope a:not([class]):hover{color:var(--accent-hover);}
#page-container .fo-scope .sec--navy a:not([class]),
#page-container .fo-scope .band a:not([class]){color:var(--accent-tint);}

/* Breadcrumbs are the one unclassed link the design colours itself, so it
   needs saying here: the rule above would otherwise paint them brown on the
   navy page head. */
#page-container .fo-scope .crumbs a{color:#fff;}
#page-container .fo-scope .crumbs a:hover{color:var(--accent-tint);}

/* Divi normalises heading margins in ways that break the scale. */
#page-container .fo-scope h1,
#page-container .fo-scope h2,
#page-container .fo-scope h3,
#page-container .fo-scope h4,
#page-container .fo-scope h5{padding-bottom:0;}

/* Divi's image module and content images get a max-width of 100% already, but
   its `.et_pb_code img{display:inline}` rule undoes our block display. */
#page-container .fo-scope img{display:block;}

/* --------------------------------------------------------------------------
   4. Full bleed

   Sections that carry their own background need to reach the viewport edge
   even though Divi's row is width constrained. The section is the full bleed
   element; the .wrap inside it re-establishes the content measure.
   -------------------------------------------------------------------------- */

#page-container .fo-section.fo-bleed > .et_pb_row{max-width:none;width:100%;}

/* --------------------------------------------------------------------------
   Ink utilities

   The only colours an editor can choose, exposed as an ACF select rather than
   a colour picker. Each maps to a token already in the design system, so a
   choice cannot introduce an off-brand colour, and the two that would fail
   contrast are labelled for the section type they belong on: cream on dark,
   brown on light. Brown on navy measures 2.07:1.

   No default class exists on purpose. An untouched field adds nothing and the
   section renders exactly as designed.
   -------------------------------------------------------------------------- */

#page-container .fo-scope .fo-ink--navy{color:var(--navy);}
#page-container .fo-scope .fo-ink--ink{color:var(--ink);}
#page-container .fo-scope .fo-ink--muted{color:var(--ink-muted);}
#page-container .fo-scope .fo-ink--cream{color:var(--brand-cream);}
#page-container .fo-scope .fo-ink--accent{color:var(--accent);}

/* ==========================================================================
   Four Outdoor Rentals child theme: design system
   GENERATED by production/build_theme_css.py from preview-v2/assets/css/site.css
   Do not edit this file. Edit the preview and re-run the generator.
   ========================================================================== */

/* ==========================================================================
   Four Outdoor Rentals - preview design system
   Every colour, font and spacing value the site uses is declared here.
   These :root variables map onto Divi 5 global variables in Phase 3.
   ========================================================================== */
:root{/* --- Brand, sampled from FOUR OUTDOOR-Final-1.svg --- */
  --navy:        #0A2756;
  --navy-deep:   #061B3C;
  --navy-line:   #1B3C6E;

  /* --- Accent, proposed (no accent exists in the logo) --- */
  --brand-cream: #F2E7D3;   /* the light accent. Only ever sits on navy */
  --brand-brown: #7A4F2A;   /* the dark accent. Only ever sits on a light surface */
  --accent:      #7A4F2A;   /* interactive: button fills, links on light */
  --accent-hover:#5E3D21;
  --accent-tint: #D4AC80;   /* accent text on navy surfaces */
  --btn-face:    #E8CDAA;   /* primary button face. A lighter step off --accent-tint */
  --btn-face-ink:#0A2756;   /* navy, what sits on the button face */

  /* --- Surfaces --- */
  --paper:       #FFFFFF;
  --sand:        #F6F1E7;
  --cream-deep:  #EFE3CC;
  --steel:       #E6DFD2;
  --steel-deep:  #CFC5B2;

  /* --- Ink --- */
  --ink:         #16233A;
  --ink-muted:   #5F5A51;
  --ink-onnavy:  #FFFFFF;
  --ink-onnavy-muted:#D8D2C6;

  /* --- Type --- */
  --f-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.25rem;
  --t-lg:   1.75rem;
  --t-xl:   2.375rem;
  --t-2xl:  3.25rem;
  --t-3xl:  4.25rem;

  /* --- Space --- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;

  /* --- Other tokens --- */
  --radius: 3px;
  --radius-lg: 5px;
  --border: 1px solid var(--steel);
  --shadow-sm: 0 1px 2px rgba(45,33,20,.09), 0 2px 8px rgba(45,33,20,.07);
  --shadow-md: 0 4px 12px rgba(45,33,20,.11), 0 12px 32px rgba(45,33,20,.10);
  --shadow-lg: 0 18px 50px rgba(45,33,20,.18);
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --notch: 14px;               /* corner cut, echoes the logo frame */
  --header-h: 78px;}
/* ==========================================================================
   Reset and base
   ========================================================================== */
.fo-scope *,
.fo-scope *::before,
.fo-scope *::after{box-sizing:border-box;}
.fo-scope img,
.fo-scope svg,
.fo-scope video{max-width:100%;display:block;}
.fo-scope img{height:auto;}
.fo-scope a{color:var(--accent);text-decoration:none;}
.fo-scope a:hover{color:var(--accent-hover);text-decoration:underline;}
.fo-scope h1,
.fo-scope h2,
.fo-scope h3,
.fo-scope h4,
.fo-scope h5{font-family:var(--f-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:.005em;
  color:var(--navy);
  margin:0 0 var(--s-4);
  text-transform:uppercase;}
.fo-scope h1{font-size:var(--t-2xl);}
.fo-scope h2{font-size:var(--t-xl);}
.fo-scope h3{font-size:var(--t-lg);}
.fo-scope h4{font-size:var(--t-md);letter-spacing:.02em;}
.fo-scope p{margin:0 0 var(--s-4);}
.fo-scope ul,
.fo-scope ol{margin:0 0 var(--s-4);padding-left:1.15rem;}
.fo-scope li{margin-bottom:.35rem;}
.fo-scope hr{border:0;border-top:var(--border);margin:var(--s-6) 0;}
.fo-scope :focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
/* ==========================================================================
   Layout helpers
   ========================================================================== */
.fo-scope .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5);}
.fo-scope .wrap--narrow{max-width:var(--wrap-narrow);}
.fo-scope .sec{padding:var(--s-8) 0;}
.fo-scope .sec--tight{padding:var(--s-7) 0;}
.fo-scope .sec--paper{background:var(--paper);}
.fo-scope .sec--sand{background:var(--sand);}
.fo-scope .sec--navy{background:var(--navy);color:var(--ink-onnavy);}
.fo-scope .sec--navy h2,
.fo-scope .sec--navy h3,
.fo-scope .sec--navy h4{color:#fff;}
.fo-scope .sec--navy p{color:var(--ink-onnavy-muted);}
.fo-scope .sec--navy a{color:var(--accent-tint);}
.fo-scope .sec--deep{background:var(--navy-deep);color:var(--ink-onnavy);}
.fo-scope .sec--deep h2,
.fo-scope .sec--deep h3,
.fo-scope .sec--deep h4{color:#fff;}
.fo-scope .sec--deep p{color:var(--ink-onnavy-muted);}
.fo-scope .grid{display:grid;gap:var(--s-5);}
.fo-scope .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.fo-scope .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.fo-scope .grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.fo-scope .split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center;}
.fo-scope .stack-sm > * + *{margin-top:var(--s-3);}
.fo-scope .sec-head{max-width:720px;margin-bottom:var(--s-6);}
.fo-scope .sec-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.fo-scope .eyebrow{font-family:var(--f-display);
  font-size:var(--t-sm);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s-2);
  display:flex;align-items:center;gap:.6rem;}
.fo-scope .sec-head--center .eyebrow{justify-content:center;}
.fo-scope .eyebrow::before{content:"";width:26px;height:3px;background:var(--brand-brown);flex:none;}
.fo-scope .sec--navy .eyebrow,
.fo-scope .sec--deep .eyebrow{color:var(--accent-tint);}
.fo-scope .hero .eyebrow{color:var(--accent-tint);}
.fo-scope .sec--navy .eyebrow::before,
.fo-scope .sec--deep .eyebrow::before,
.fo-scope .band .eyebrow::before,
.fo-scope .hero .eyebrow::before{background:var(--brand-cream);}
.fo-scope .lede{font-size:var(--t-md);color:var(--ink-muted);line-height:1.5;}
.fo-scope .sec--navy .lede,
.fo-scope .sec--deep .lede{color:var(--ink-onnavy-muted);}
.fo-scope .lorem--{color:var(--ink-muted);}
.fo-scope .sec--navy .lorem--,
.fo-scope .sec--deep .lorem--{color:var(--ink-onnavy-muted);}
/* ==========================================================================
   Buttons
   ========================================================================== */
.fo-scope .btn{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1;
  /* No border, anywhere.
     The bevel is a clip-path, which cuts the corner off whatever it is
     applied to, border included. A 2px border therefore stopped dead at the
     diagonal and read as a broken outline rather than a cut corner. Padding
     carries the 2px the border used to occupy, so every button is exactly the
     size it always was. The fill alone now describes the shape, and the cut
     corner is a clean edge of that fill. */
  padding:calc(.95rem + 2px) calc(1.6rem + 2px);
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);}
.fo-scope .btn:hover{text-decoration:none;transform:translateY(-1px);}
.fo-scope .btn--primary{background:var(--btn-face);color:var(--btn-face-ink);}
.fo-scope .btn--primary:hover,
.fo-scope .btn--primary:focus-visible{background:var(--accent);color:#fff;}
.fo-scope .btn--navy{background:var(--navy);color:#fff;}
.fo-scope .btn--navy:hover,
.fo-scope .btn--navy:focus-visible{background:var(--navy-deep);color:#fff;}
.fo-scope .btn--ghost{background:rgba(10,39,86,.12);color:var(--navy);}
.fo-scope .btn--ghost:hover,
.fo-scope .btn--ghost:focus-visible{background:var(--navy);color:#fff;}
.fo-scope .btn--onnavy{background:rgba(255,255,255,.20);color:#fff;}
.fo-scope .btn--onnavy:hover,
.fo-scope .btn--onnavy:focus-visible{background:#fff;color:var(--navy);}
.fo-scope .btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 5px var(--navy);}
.fo-scope .btn--navy:focus-visible,
.fo-scope .btn--onnavy:focus-visible{box-shadow:inset 0 0 0 2px var(--navy), inset 0 0 0 5px #fff;}
.fo-scope .btn--sm{font-size:var(--t-sm);padding:calc(.6rem + 2px) calc(1.05rem + 2px);letter-spacing:.07em;}
.fo-scope .btn--lg{font-size:1.1875rem;padding:calc(1.1rem + 2px) calc(2rem + 2px);}
.fo-scope .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);}
.fo-scope .btn .ic{width:18px;height:18px;flex:none;}
.fo-scope .arrow-link{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:var(--t-sm);
  display:inline-flex;align-items:center;gap:.4rem;}
.fo-scope .arrow-link::after{content:"\2192";transition:transform .15s ease;}
.fo-scope .arrow-link:hover{text-decoration:none;}
.fo-scope .arrow-link:hover::after{transform:translateX(4px);}
/* ==========================================================================
   Hazard rule - the one decorative motif, taken from hi-vis site markings
   ========================================================================== */
.fo-scope .hazard{height:6px;
  background:repeating-linear-gradient(
    -45deg,var(--brand-cream) 0 14px,var(--navy) 14px 28px);}
.fo-scope .hazard--thin{height:4px;}
/* ==========================================================================
   Header
   ========================================================================== */
/* ==========================================================================
   Hero
   ========================================================================== */
.fo-scope .hero{position:relative;overflow:hidden;background:var(--navy-deep);}
.fo-scope .hero-media{position:absolute;inset:0;}
.fo-scope .hero-media img,
.fo-scope .hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fo-scope .hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,27,60,.94) 0%,rgba(6,27,60,.80) 46%,rgba(6,27,60,.42) 100%),
    linear-gradient(180deg,rgba(6,27,60,.55) 0%,rgba(6,27,60,0) 40%);}
.fo-scope .hero--scrim-light .hero-media::after{background:
    linear-gradient(90deg,rgba(6,27,60,.80) 0%,rgba(6,27,60,.64) 46%,rgba(6,27,60,.30) 100%),
    linear-gradient(180deg,rgba(6,27,60,.42) 0%,rgba(6,27,60,0) 40%);}
.fo-scope .hero--scrim-strong .hero-media::after{background:
    linear-gradient(90deg,rgba(6,27,60,.985) 0%,rgba(6,27,60,.92) 46%,rgba(6,27,60,.62) 100%),
    linear-gradient(180deg,rgba(6,27,60,.68) 0%,rgba(6,27,60,0) 40%);}
.fo-scope .hero-body{position:relative;padding:var(--s-9) 0 var(--s-8);max-width:680px;}
.fo-scope .hero h1{color:#fff;font-size:var(--t-3xl);margin-bottom:var(--s-4);}
.fo-scope .hero h1 em{font-style:normal;color:var(--accent-tint);}
.fo-scope .hero .lede{color:#E8E1D3;font-size:1.3125rem;max-width:560px;}
.fo-scope .hero .btn-row{margin-top:var(--s-6);}
.fo-scope .hero-badges{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-7);
  padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.18);}
.fo-scope .hero-badge{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:var(--t-sm);font-weight:500;}
.fo-scope .hero-badge .ic{width:22px;height:22px;color:var(--accent-tint);flex:none;}
.fo-scope .pagehead{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:var(--s-8) 0 var(--s-7);}
.fo-scope .pagehead::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.5) 48% 50%,transparent 50%);
  background-size:34px 34px;}
.fo-scope .pagehead .wrap{position:relative;}
.fo-scope .pagehead h1{color:#fff;margin-bottom:var(--s-3);}
.fo-scope .pagehead .lede{color:var(--ink-onnavy-muted);max-width:640px;}
.fo-scope .crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s-4);padding:0;
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--f-display);font-weight:600;color:var(--ink-onnavy-muted);}
.fo-scope .crumbs li{margin:0;display:flex;gap:.5rem;align-items:center;}
.fo-scope .crumbs li+li::before{content:"/";color:rgba(255,255,255,.35);}
.fo-scope .crumbs a{color:#fff;}
/* ==========================================================================
   Quick pick strip
   ========================================================================== */
.fo-scope .quickpick{background:var(--navy);border-top:1px solid var(--navy-line);}
.fo-scope .quickpick-inner{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:stretch;}
.fo-scope .quickpick-label{display:flex;align-items:center;padding:var(--s-5) var(--s-5) var(--s-5) 0;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:#fff;font-size:var(--t-sm);max-width:190px;line-height:1.2;}
.fo-scope .quickpick-item{display:flex;align-items:center;gap:.75rem;padding:var(--s-5) var(--s-4);
  border-left:1px solid var(--navy-line);color:#fff;font-weight:600;font-size:var(--t-sm);
  transition:background .15s ease;}
.fo-scope .quickpick-item:hover{background:var(--navy-deep);text-decoration:none;color:#fff;}
.fo-scope .quickpick-item .ic{width:30px;height:30px;color:var(--accent-tint);flex:none;}
/* ==========================================================================
   Cards
   ========================================================================== */
.fo-scope .card{background:#fff;border:var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.fo-scope .card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--steel-deep);}
.fo-scope .card-media{position:relative;aspect-ratio:4/3;background:var(--navy);overflow:hidden;}
.fo-scope .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.fo-scope .card:hover .card-media img{transform:scale(1.045);}
.fo-scope .card-body{padding:var(--s-5);display:flex;flex-direction:column;flex:1;}
.fo-scope .card-body h3{font-size:1.5rem;margin-bottom:.5rem;}
.fo-scope .card-body p{font-size:var(--t-sm);color:var(--ink-muted);margin-bottom:var(--s-4);}
.fo-scope .card-body .arrow-link{margin-top:auto;}
.fo-scope .card-tag{position:absolute;left:0;bottom:0;z-index:2;
  background:var(--navy);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.11em;text-transform:uppercase;padding:.4rem .85rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.fo-scope .card-tag--accent{background:var(--accent);}
.fo-scope a.card{color:inherit;}
.fo-scope a.card:hover{text-decoration:none;}
.fo-scope .cat-card .card-media{aspect-ratio:5/4;}
.fo-scope .cat-card .card-body{padding:var(--s-4) var(--s-5) var(--s-5);}
.fo-scope .cat-card h3{font-size:1.4375rem;}
.fo-scope .cat-card .count{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600;}
/* ==========================================================================
   Themed image placeholder
   Used wherever a category or unit has no photograph yet. It reserves the
   exact box the real photo will occupy. The shot brief lives in data-shot.
   ========================================================================== */
.fo-scope .ph{position:relative;width:100%;height:100%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;}
.fo-scope .ph::before{/* faint diagonal site-marking texture */
  content:"";position:absolute;inset:0;opacity:.10;
  background-image:repeating-linear-gradient(
    -45deg,#fff 0 2px,transparent 2px 16px);}
.fo-scope .ph::after{/* hi-vis corner flash, echoes the logo notch */
  content:"";position:absolute;right:-1px;bottom:-1px;
  width:64px;height:64px;background:var(--brand-cream);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.9;}
.fo-scope .ph-mark{position:relative;z-index:1;width:52%;max-width:190px;color:var(--brand-cream);opacity:.85;}
.fo-scope .ph--sand{background:var(--cream-deep);}
.fo-scope .ph--sand::before{opacity:.5;background-image:repeating-linear-gradient(-45deg,var(--steel) 0 2px,transparent 2px 16px);}
.fo-scope .ph--sand .ph-mark{color:var(--navy);opacity:.5;}
.fo-scope .ph--sand::after{background:var(--brand-brown);opacity:.55;}
/* ==========================================================================
   Value / feature tiles
   ========================================================================== */
.fo-scope .tile{background:#fff;border:var(--border);border-radius:var(--radius);
  padding:var(--s-5);position:relative;
  border-top:4px solid var(--navy);}
.fo-scope .tile--accent{border-top-color:var(--brand-brown);}
.fo-scope .tile .ic{width:34px;height:34px;color:var(--accent);margin-bottom:var(--s-3);}
.fo-scope .tile h3{font-size:1.375rem;margin-bottom:.4rem;}
.fo-scope .tile p{font-size:var(--t-sm);color:var(--ink-muted);margin:0;}
.fo-scope .sec--navy .tile,
.fo-scope .sec--deep .tile{background:rgba(255,255,255,.05);border-color:var(--navy-line);border-top-color:var(--brand-cream);}
.fo-scope .sec--navy .tile .ic,
.fo-scope .sec--deep .tile .ic{color:var(--accent-tint);}
.fo-scope .sec--navy .tile p,
.fo-scope .sec--deep .tile p{color:var(--ink-onnavy-muted);}
.fo-scope .steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--s-5);}
.fo-scope .steps li{margin:0;counter-increment:step;padding-left:4.25rem;position:relative;min-height:3rem;}
.fo-scope .steps li::before{content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:-.15rem;
  font-family:var(--f-display);font-size:2.25rem;font-weight:700;line-height:1;
  color:var(--brand-brown);}
.fo-scope .sec--navy .steps li::before,
.fo-scope .sec--deep .steps li::before,
.fo-scope .band .steps li::before{color:var(--accent-tint);}
.fo-scope .steps--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.fo-scope .steps h3{font-size:1.3125rem;margin-bottom:.25rem;}
.fo-scope .steps p{font-size:var(--t-sm);color:var(--ink-muted);margin:0;}
.fo-scope .sec--navy .steps p{color:var(--ink-onnavy-muted);}
/* ==========================================================================
   Product / unit listing
   ========================================================================== */
.fo-scope .unit{background:#fff;border:var(--border);border-radius:var(--radius);
  display:grid;grid-template-columns:280px 1fr auto;gap:0;overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease;}
.fo-scope .unit:hover{box-shadow:var(--shadow-md);border-color:var(--steel-deep);}
.fo-scope .unit-media{position:relative;background:var(--sand);aspect-ratio:4/3;}
.fo-scope .unit-media img{width:100%;height:100%;object-fit:cover;}
.fo-scope .unit-main{padding:var(--s-5);min-width:0;}
.fo-scope .unit-main h3{font-size:1.625rem;margin-bottom:.15rem;}
.fo-scope .unit-sku{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600;margin-bottom:var(--s-3);}
.fo-scope .unit-main p{font-size:var(--t-sm);color:var(--ink-muted);}
.fo-scope .spec-inline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;}
.fo-scope .spec-inline li{margin:0;background:var(--sand);border:1px solid var(--steel);
  font-size:var(--t-xs);padding:.28rem .6rem;border-radius:2px;color:var(--ink);}
.fo-scope .spec-inline strong{font-weight:600;}
.fo-scope .unit-rates{border-left:var(--border);background:var(--sand);
  padding:var(--s-5);min-width:250px;display:flex;flex-direction:column;justify-content:center;}
.fo-scope .rate-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:.3rem 0;}
.fo-scope .rate-row + .rate-row{border-top:1px dashed var(--steel-deep);}
.fo-scope .rate-label{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--ink-muted);}
.fo-scope .rate-value{font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--navy);line-height:1;}
.fo-scope .unit-rates .btn{margin-top:var(--s-4);justify-content:center;}
.fo-scope .rate-note{font-size:var(--t-xs);color:var(--ink-muted);margin:.6rem 0 0;line-height:1.4;}
/* ==========================================================================
   Tables
   ========================================================================== */
.fo-scope .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fo-scope table.data{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:520px;background:#fff;}
.fo-scope table.data caption{text-align:left;font-size:var(--t-xs);color:var(--ink-muted);padding-bottom:.5rem;}
.fo-scope table.data th,
.fo-scope table.data td{padding:.8rem 1rem;text-align:left;border-bottom:var(--border);}
.fo-scope table.data thead th{background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;font-size:var(--t-xs);border-bottom:0;}
.fo-scope table.data tbody tr:nth-child(even){background:var(--sand);}
.fo-scope table.data td:first-child{font-weight:600;color:var(--navy);}
/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.fo-scope .acc{border-top:var(--border);}
.fo-scope .acc-item{border-bottom:var(--border);}
.fo-scope .acc-btn{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:1.15rem 0;
  font-family:var(--f-display);font-size:1.3125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--navy);}
.fo-scope .acc-btn:hover{color:var(--accent);}
.fo-scope .acc-btn .sign{flex:none;width:26px;height:26px;border:2px solid var(--steel-deep);border-radius:50%;
  position:relative;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.fo-scope .acc-btn .sign::before,
.fo-scope .acc-btn .sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--navy);
  transform:translate(-50%,-50%);transition:opacity .2s ease,background .2s ease;}
.fo-scope .acc-btn .sign::before{width:10px;height:2px;}
.fo-scope .acc-btn .sign::after{width:2px;height:10px;}
.fo-scope .acc-btn[aria-expanded="true"] .sign{background:var(--accent);border-color:var(--accent);transform:rotate(180deg);}
.fo-scope .acc-btn[aria-expanded="true"] .sign::before{background:#fff;}
.fo-scope .acc-btn[aria-expanded="true"] .sign::after{opacity:0;}
.fo-scope .acc-panel{padding:0 0 1.25rem;max-width:70ch;}
.fo-scope .acc-panel p{color:var(--ink-muted);font-size:var(--t-sm);margin-bottom:.75rem;}
.fo-scope .acc-panel :last-child{margin-bottom:0;}
/* ==========================================================================
   Filter bar (equipment index)
   ========================================================================== */
.fo-scope .filterbar{background:#fff;border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:var(--s-4);
  display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:center;
  margin-top:calc(var(--s-7) * -1);position:relative;z-index:3;}
.fo-scope .filter-field{position:relative;display:flex;align-items:center;}
.fo-scope .filter-field .ic{position:absolute;left:.9rem;width:20px;height:20px;color:var(--ink-muted);}
.fo-scope .filter-field input{width:100%;font-family:var(--f-body);font-size:var(--t-base);
  padding:.85rem 1rem .85rem 2.9rem;border:var(--border);border-radius:var(--radius);
  background:var(--sand);color:var(--ink);}
.fo-scope .filter-field input:focus{background:#fff;border-color:var(--navy);outline:none;}
.fo-scope .chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--s-4);}
.fo-scope .chip{font-family:var(--f-display);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.07em;text-transform:uppercase;
  padding:.45rem .85rem;border:1px solid var(--steel-deep);border-radius:2px;
  background:#fff;color:var(--navy);cursor:pointer;transition:all .15s ease;}
.fo-scope .chip:hover{border-color:var(--navy);}
.fo-scope .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.fo-scope .filter-empty{padding:var(--s-7);text-align:center;border:2px dashed var(--steel-deep);
  border-radius:var(--radius);color:var(--ink-muted);}
/* ==========================================================================
   Forms
   ========================================================================== */
.fo-scope .form{display:grid;gap:var(--s-4);}
.fo-scope .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);}
.fo-scope .field label{display:block;font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:.35rem;}
.fo-scope .field .req{color:var(--accent);}
.fo-scope .field input,
.fo-scope .field select,
.fo-scope .field textarea{width:100%;font-family:var(--f-body);font-size:var(--t-base);color:var(--ink);
  padding:.8rem .95rem;border:1px solid var(--steel-deep);border-radius:var(--radius);
  background:#fff;}
.fo-scope .field textarea{min-height:130px;resize:vertical;}
.fo-scope .field input:focus,
.fo-scope .field select:focus,
.fo-scope .field textarea:focus{border-color:var(--navy);outline:2px solid rgba(122,79,42,.22);}
.fo-scope .field-note{font-size:var(--t-xs);color:var(--ink-muted);margin:.35rem 0 0;}
.fo-scope .form-note{font-size:var(--t-xs);color:var(--ink-muted);}
/* ==========================================================================
   Contact blocks
   ========================================================================== */
.fo-scope .contact-card{background:#fff;border:var(--border);border-radius:var(--radius);padding:var(--s-5);
  border-left:4px solid var(--brand-brown);}
.fo-scope .contact-card .ic{width:28px;height:28px;color:var(--accent);margin-bottom:var(--s-3);}
.fo-scope .contact-card h3{font-size:1.25rem;margin-bottom:.3rem;}
.fo-scope .contact-card p{font-size:var(--t-sm);color:var(--ink-muted);margin:0;}
.fo-scope .contact-card a.big{font-family:var(--f-display);font-size:1.75rem;font-weight:700;color:var(--navy);
  display:block;line-height:1.1;}
.fo-scope .contact-card a.big:hover{color:var(--accent);text-decoration:none;}
.fo-scope .mapblock{position:relative;aspect-ratio:16/10;border:var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--sand);}
.fo-scope .mapblock-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(var(--steel) 1px,transparent 1px),
    linear-gradient(90deg,var(--steel) 1px,transparent 1px);
  background-size:44px 44px;opacity:.85;}
.fo-scope .mapblock-road{position:absolute;background:var(--steel-deep);}
.fo-scope .mapblock-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;}
.fo-scope .mapblock-pin .ic{width:42px;height:42px;color:var(--accent);filter:drop-shadow(0 3px 6px rgba(45,33,20,.35));}
.fo-scope .mapblock-pin span{background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;padding:.35rem .7rem;}
/* ==========================================================================
   Callout band
   ========================================================================== */
.fo-scope .band{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;}
.fo-scope .band-media{position:absolute;inset:0;}
.fo-scope .band-media img{width:100%;height:100%;object-fit:cover;}
.fo-scope .band-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,27,60,.96) 0%,rgba(6,27,60,.90) 50%,rgba(6,27,60,.78) 100%);}
.fo-scope .band .wrap{position:relative;padding:var(--s-8) var(--s-5);}
.fo-scope .band h2,
.fo-scope .band h3,
.fo-scope .band h4{color:#fff;}
.fo-scope .band p{color:var(--ink-onnavy-muted);}
.fo-scope .band .lede{color:#E8E1D3;}
.fo-scope .band .eyebrow{color:var(--accent-tint);}
.fo-scope .band a:not(.btn){color:var(--accent-tint);}
.fo-scope .callout{background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:var(--s-6);display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;}
.fo-scope .callout h2{color:#fff;margin-bottom:.4rem;font-size:var(--t-lg);}
.fo-scope .callout p{color:var(--ink-onnavy-muted);margin:0;font-size:var(--t-sm);}
/* ==========================================================================
   Blog
   ========================================================================== */
.fo-scope .post-meta{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:600;
  display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem;}
.fo-scope .post-meta .dot{width:4px;height:4px;background:var(--brand-brown);border-radius:50%;}
/* ==========================================================================
   Footer
   ========================================================================== */
/* ==========================================================================
   Utilities
   ========================================================================== */
.fo-scope .mt-0{margin-top:0;}
.fo-scope .mb-0{margin-bottom:0;}
.fo-scope .mt-5{margin-top:var(--s-5);}
.fo-scope .mt-6{margin-top:var(--s-6);}
.fo-scope .mt-7{margin-top:var(--s-7);}
.fo-scope .center{text-align:center;}
.fo-scope .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.fo-scope .frame{/* logo-derived double frame, used on images */
  position:relative;border:8px solid var(--navy);border-radius:2px;}
.fo-scope .frame::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.85);pointer-events:none;}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .fo-scope .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fo-scope .steps--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fo-scope .quickpick-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fo-scope .quickpick-label{grid-column:1/-1;padding-bottom:0;max-width:none;}
  .fo-scope .quickpick-item:nth-child(2),
.fo-scope .quickpick-item:nth-child(4){border-left:0;}
}
@media (max-width:1040px){
  :root{--t-3xl:2.875rem;--t-2xl:2.375rem;--t-xl:1.9375rem;--s-8:2.75rem;--s-9:3.5rem;}
  .fo-scope .split{grid-template-columns:1fr;gap:var(--s-6);}
  .fo-scope .unit{grid-template-columns:220px 1fr;}
  .fo-scope .unit-rates{grid-column:1/-1;border-left:0;border-top:var(--border);}
  .fo-scope .filterbar{grid-template-columns:1fr;margin-top:var(--s-5);}
}
@media (max-width:680px){
  :root{--t-3xl:2.375rem;--t-2xl:2rem;--t-xl:1.6875rem;--t-lg:1.4375rem;}
  .fo-scope .grid--2,
.fo-scope .grid--3,
.fo-scope .grid--4,
.fo-scope .steps--3{grid-template-columns:1fr;}
  .fo-scope .quickpick-inner{grid-template-columns:1fr;}
  .fo-scope .quickpick-item{border-left:0;border-top:1px solid var(--navy-line);}
  .fo-scope .unit{grid-template-columns:1fr;}
  .fo-scope .unit-media{aspect-ratio:16/10;}
  .fo-scope .form-row{grid-template-columns:1fr;}
  .fo-scope .callout{grid-template-columns:1fr;}
  .fo-scope .hero-body{padding:var(--s-8) 0 var(--s-7);}
}
@media (prefers-reduced-motion:reduce){
  .fo-scope *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ==========================================================================
   Theme Builder header and footer

   These target Divi's own markup, not ours, so every selector here is keyed off
   the SECTION class (.fo-topbar, .fo-header, .fo-footer) rather than a module
   class. Divi 5's migration of Divi 4 layout JSON is known to drop module_class
   on the Menu module, and a rule that depends on a class the migration removed
   fails silently.

   These rules also own their own flexbox and grid rather than trusting Divi for
   layout. That is deliberate. A Divi update touching .et_pb_menu__wrap or the
   column float percentages would otherwise stack the menu vertically or collapse
   the footer columns into one, on a live page, with nothing in the console. The
   harness in production/harness renders this markup WITHOUT Divi's stylesheet
   precisely to prove these rules stand on their own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared

   box-sizing is declared here rather than assumed. The preview set it globally
   on *, but in the theme that reset is scoped to .fo-scope, and the header and
   footer sit outside the scope. Divi's own stylesheet does set it site-wide,
   which is precisely why it must not be relied on: the harness runs without
   Divi's CSS and caught this as 48px of horizontal scroll on a phone, from
   width:100% plus side padding on the top bar and footer rows.
   -------------------------------------------------------------------------- */

.fo-topbar,.fo-topbar *,
.fo-header,.fo-header *,
.fo-footer,.fo-footer *,
.fo-callbar,.fo-callbar *{box-sizing:border-box;}

/* --------------------------------------------------------------------------
   The sawtooth rule, the one ornament borrowed from the logo
   -------------------------------------------------------------------------- */

.fo-hazard{
  height:6px;
  background:repeating-linear-gradient(
    -45deg,var(--brand-cream) 0 14px,var(--navy) 14px 28px);
}
.fo-hazard--thin{height:4px;}

/* Divi will otherwise give the section holding it padding and a min height. */
#page-container .et_pb_section.fo-hazard-section{padding:0;min-height:0;}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.fo-skip{
  position:absolute;left:0;top:-120px;z-index:200;
  background:var(--btn-face);color:var(--btn-face-ink);
  padding:.75rem 1.25rem;font-family:var(--f-body);font-weight:700;
  border-bottom:3px solid var(--accent);text-decoration:none;
}
.fo-skip:focus{top:0;}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

#page-container .et_pb_section.fo-topbar{
  background:var(--navy-deep);padding:0;
}
.fo-topbar .fo-topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:38px;
  width:100%;max-width:1240px;margin:0 auto;padding:0 1.5rem;
  font-family:var(--f-body);font-size:var(--t-xs);
  color:var(--ink-onnavy-muted);letter-spacing:.02em;line-height:1.4;
}
.fo-topbar ul{
  display:flex;align-items:center;gap:1.5rem;
  list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.fo-topbar li{margin:0;padding:0;display:flex;align-items:center;gap:.4rem;}
.fo-topbar li::before{content:none;}
.fo-topbar a{color:#fff;text-decoration:none;}
.fo-topbar a:hover{color:var(--accent-tint);}
.fo-topbar .ic{width:14px;height:14px;color:var(--accent-tint);flex:none;display:block;}

@media (max-width:1040px){
  .fo-topbar .hide-sm{display:none;}
}
@media (max-width:680px){
  .fo-topbar .hide-xs{display:none;}
  .fo-topbar ul{gap:1rem;}
  .fo-topbar .fo-topbar-inner{gap:.75rem;}
}

/* --------------------------------------------------------------------------
   Header

   MENU-CSS-START
   Everything between these markers is extracted by package.py into
   dev/menu-for-divi-custom-css.css, so it can be pasted into Divi's custom CSS
   box and tested on the live site before the theme is reinstalled. One source,
   one derived file, regenerated on every build, so the two cannot drift.
   -------------------------------------------------------------------------- */

#page-container .et_pb_section.fo-header{
  background:#fff;padding:0;border-bottom:1px solid var(--steel);
}
.fo-header .fo-header-row{
  width:100%;max-width:1240px;margin:0 auto;padding:0 1.5rem;
}

/* Divi stacks the modules inside a column, so the menu and the phone would sit
   on two lines. The column is made the flex row instead of splitting the header
   into two Divi columns, because a single column survives the client dragging a
   module in or out of the header later without the layout falling apart. */
#page-container .fo-header .fo-header-row > .et_pb_column{
  display:flex;align-items:center;gap:1.5rem;
  width:100%;float:none;margin:0;padding:0;
}
#page-container .fo-header .et_pb_menu{flex:1 1 auto;min-width:0;margin:0;padding:0;}

/* Own the bar layout. Divi's own flex rules are not depended on. */
#page-container .fo-header .et_pb_menu_inner_container{
  display:flex;align-items:center;gap:1.5rem;min-height:78px;
}
#page-container .fo-header .et_pb_menu__logo-wrap{flex:none;margin:0;}
#page-container .fo-header .et_pb_menu__logo{width:auto;}
#page-container .fo-header .et_pb_menu__logo img{width:236px;max-width:100%;height:auto;display:block;}
#page-container .fo-header .et_pb_menu__wrap{
  display:flex;align-items:center;justify-content:flex-end;
  flex:1 1 auto;min-width:0;
}
#page-container .fo-header .et_pb_menu__menu{display:block;}
#page-container .fo-header .et_pb_menu__menu > nav{display:block;}

#page-container .fo-header .et-menu,
#page-container .fo-header ul.nav{
  display:flex;align-items:center;gap:.15rem;
  list-style:none;margin:0;padding:0;
}
#page-container .fo-header .et-menu > li{margin:0;padding:0;position:relative;}
#page-container .fo-header .et-menu > li::before{content:none;}
#page-container .fo-header .et-menu > li > a{
  display:block;
  font-family:var(--f-display);font-weight:600;font-size:1rem;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
  color:var(--navy);padding:.6rem .52rem;text-decoration:none;opacity:1;
}
#page-container .fo-header .et-menu > li > a:hover{color:var(--navy);opacity:1;}

/* The active/hover underline lives on the LI, and the dropdown caret lives on
   the A. They were both ::after on the anchor once, and an element has only one
   ::after, so the caret's content overwrote the underline's: what rendered was a
   one pixel bar with an invisible arrow inside it, with nothing in the console.
   Two elements, two pseudo-elements, and the harness asserts both. */
#page-container .fo-header .et-menu > li::after{
  content:"";position:absolute;left:.52rem;right:.52rem;bottom:.28rem;height:3px;
  background:var(--brand-brown);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;pointer-events:none;
}
#page-container .fo-header .et-menu > li:hover::after,
#page-container .fo-header .et-menu > li.current-menu-item::after,
#page-container .fo-header .et-menu > li.current-menu-ancestor::after{transform:scaleX(1);}

/* A custom link to /#anchor resolves to the front page and gets stamped
   current-menu-item, which lights two items at once. Exclude custom links. */
#page-container .fo-header .et-menu > li.menu-item-type-custom.current-menu-item::after{transform:scaleX(0);}

/* Divi's caret is an ETmodules glyph positioned absolute at top right with a
   line-height that does not match the link box. Redefine it in place rather
   than adding a second pseudo-element. */
#page-container .fo-header .et-menu li.menu-item-has-children > a:first-child::after{
  font-family:var(--f-display);
  content:"\25BE";
  position:static;
  top:auto;right:auto;
  margin-left:.35em;
  font-size:.85em;
  line-height:inherit;
  opacity:1;
}

/* Dropdowns */
#page-container .fo-header .et-menu li ul.sub-menu{
  position:absolute;left:0;top:100%;z-index:50;
  display:none;min-width:230px;
  list-style:none;margin:0;padding:.35rem 0;
  background:#fff;border:1px solid var(--steel);
  box-shadow:0 4px 12px rgba(45,33,20,.11),0 12px 32px rgba(45,33,20,.10);
}
#page-container .fo-header .et-menu li:hover > ul.sub-menu,
#page-container .fo-header .et-menu li:focus-within > ul.sub-menu{display:block;}
#page-container .fo-header .et-menu ul.sub-menu li{margin:0;padding:0;width:100%;position:relative;}
#page-container .fo-header .et-menu ul.sub-menu li::before,
#page-container .fo-header .et-menu ul.sub-menu li::after{content:none;}
#page-container .fo-header .et-menu ul.sub-menu a{
  display:block;padding:.6rem 1rem;
  font-family:var(--f-body);font-weight:500;font-size:var(--t-sm);
  text-transform:none;letter-spacing:0;color:var(--ink);text-decoration:none;
}
#page-container .fo-header .et-menu ul.sub-menu a:hover{background:var(--sand);color:var(--navy);}

/* Divi's own suppression rules can strip our hover background. Exclude the
   hover state explicitly rather than blanket-clearing the background. */
#page-container .fo-header .et-menu a:not(:hover){background:transparent;}

/* Phone and quote button on the right of the bar */
.fo-header .fo-header-cta{display:flex;align-items:center;gap:1rem;flex:none;margin-left:1rem;}

/* The Get a Quote button.
   The header is Theme Builder chrome and sits outside .fo-scope, so none of
   the .fo-scope .btn rules reached it: it was rendering as Divi's default
   link, blue text on nothing, with the bevel cutting a corner off a piece of
   text. These rules restate the button here rather than widening the scope
   selector, because the header is chrome and the child theme keeps chrome
   styling in this file.

   Navy fill with white text, measured at 14.6:1, and 17.1:1 on hover. The
   border matches the fill so the bevel is a clean cut rather than a gap.
   `display` is deliberately NOT set here: the two media queries above hide
   this button on narrow screens, and setting it would fight them. */
#page-container .fo-header .fo-header-cta .btn{
  /* Safe to set now that both media queries below are prefixed to match this
     selector: equal specificity, and they come later in the file, so their
     display:none still wins on narrow screens. */
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-display);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  /* No border, matching the buttons in the page: the clip-path cuts a border
     off at the diagonal and leaves it looking broken. The 2px it occupied
     moves into the padding so the button keeps its size. */
  font-size:var(--t-sm);padding:calc(.6rem + 2px) calc(1.05rem + 2px);
  background:var(--navy);color:#fff;
  border:0;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
#page-container .fo-header .fo-header-cta .btn:hover{
  background:var(--navy-deep);color:#fff;
  transform:translateY(-1px);text-decoration:none;
}
#page-container .fo-header .fo-header-cta .btn:focus-visible{
  outline:none;box-shadow:inset 0 0 0 2px var(--navy), inset 0 0 0 5px #fff;
}
.fo-header .fo-header-phone{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--f-display);font-weight:700;font-size:1.375rem;
  color:var(--navy);letter-spacing:.01em;line-height:1;text-decoration:none;
}
.fo-header .fo-header-phone:hover{color:var(--accent);}
.fo-header .fo-header-phone .ic{width:20px;height:20px;color:var(--accent);display:block;}

/* Divi's mobile toggle. Hidden until the menu collapses. */
#page-container .fo-header .et_mobile_nav_menu{display:none;flex:none;margin-left:auto;}
#page-container .fo-header .et_mobile_menu{
  background:#fff;
  border-top:1px solid var(--steel);box-shadow:0 18px 50px rgba(45,33,20,.18);
  padding:.35rem 1.5rem 1.5rem;
}
#page-container .fo-header .et_mobile_menu li a{background:transparent;}
#page-container .fo-header .et_mobile_menu li a{
  font-family:var(--f-display);font-weight:600;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.055em;color:var(--navy);
  padding:.85rem 0;border-bottom:1px solid var(--steel);
}

/* --------------------------------------------------------------------------
   Divi's mobile toggle, drawn as the preview's nav-toggle

   Nothing here existed before: the hamburger inherited Divi's defaults, a grey
   bar with a #2EA3F2 glyph, which is the one colour on the page that belongs
   to no part of this brand. The preview drew a 46x44 navy tile with a white
   icon, so that is what this reproduces against Divi's own markup.
   -------------------------------------------------------------------------- */

#page-container .fo-header .et_mobile_nav_menu{
  display:none;flex:none;margin-left:auto;
}
#page-container .fo-header .et_mobile_nav_menu .mobile_nav{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:44px;border-radius:var(--radius);
  background:var(--navy);
}
#page-container .fo-header .mobile_menu_bar{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0;
}
#page-container .fo-header .mobile_menu_bar::before,
#page-container .fo-header .mobile_nav.opened .mobile_menu_bar::before{
  color:#fff;font-size:26px;line-height:1;top:auto;position:static;
}

@media (max-width:1500px){
  /* Prefixed to match the base rule below. An unprefixed selector here would
     lose to a #page-container one earlier in the file, and the button would
     stay visible at every width. That exact mistake has been made in this
     stylesheet once already. */
  #page-container .fo-header .fo-header-cta .btn{display:none;}
}
@media (max-width:1240px){
  #page-container .fo-header .et_pb_menu__logo img{width:196px;}
  #page-container .fo-header .et-menu > li > a{font-size:.9375rem;padding:.6rem .4rem;}
  #page-container .fo-header .et-menu > li::after{left:.4rem;right:.4rem;}
  .fo-header .fo-header-phone{font-size:1.1875rem;}
}
@media (max-width:1040px){
  #page-container .fo-header .et_pb_menu__menu{display:none;}
  #page-container .fo-header .et_mobile_nav_menu{display:block;}
  #page-container .fo-header .fo-header-cta{display:none;}
  #page-container .fo-header .et_pb_menu_inner_container{min-height:64px;}
}
@media (max-width:680px){
  #page-container .fo-header .et_pb_menu__logo img{width:190px;}
}
/* MENU-CSS-END */

/* --------------------------------------------------------------------------
   Footer

   Four Text modules in a real Divi column row, so the client can edit the link
   lists in the Builder. The grid is ours, so a change to Divi's column floats
   cannot collapse it.
   -------------------------------------------------------------------------- */

#page-container .et_pb_section.fo-footer{
  background:var(--navy-deep);padding:4rem 0 0;
  color:var(--ink-onnavy-muted);font-family:var(--f-body);font-size:var(--t-sm);
}
#page-container .fo-footer .et_pb_row.fo-footer-row{
  display:flex;flex-wrap:wrap;gap:2rem;
  width:100%;max-width:1240px;margin:0 auto;padding:0 1.5rem;
}
#page-container .fo-footer .fo-footer-row .et_pb_column{
  float:none;margin:0;padding:0;
  flex:1 1 200px;min-width:0;width:auto;
}
#page-container .fo-footer .fo-footer-row .et_pb_column.fo-col-brand{flex:1.5 1 280px;}

.fo-footer p{margin:0 0 1rem;color:var(--ink-onnavy-muted);line-height:1.65;padding-bottom:0;}
.fo-footer h4{
  color:#fff;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-sm);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1rem;padding:0 0 .6rem;border-bottom:1px solid var(--navy-line);
}
.fo-footer ul{list-style:none;margin:0;padding:0;}
.fo-footer li{margin:0 0 .5rem;padding:0;}
.fo-footer li::before{content:none;}
.fo-footer a{color:var(--ink-onnavy-muted);text-decoration:none;}
.fo-footer a:hover{color:#fff;}
.fo-footer .fo-footer-logo{width:250px;max-width:100%;height:auto;display:block;margin:0 0 1rem;}

.fo-footer .fo-contact{display:flex;gap:.7rem;margin-bottom:1rem;align-items:flex-start;}
.fo-footer .fo-contact .ic{width:18px;height:18px;color:var(--accent-tint);flex:none;margin-top:.2rem;display:block;}
.fo-footer .fo-contact strong{color:#fff;display:block;font-weight:600;}

#page-container .fo-footer .fo-footer-bottom{
  border-top:1px solid var(--navy-line);margin-top:3rem;
}
.fo-footer .fo-footer-bottom-inner{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  width:100%;max-width:1240px;margin:0 auto;padding:1rem 1.5rem;
  font-size:var(--t-xs);
}
.fo-footer .fo-footer-bottom-inner ul{display:flex;gap:1rem;}
.fo-footer .fo-footer-bottom-inner li{margin:0;}

@media (max-width:1080px){
  #page-container .fo-footer .fo-footer-row .et_pb_column{flex:1 1 45%;}
}
@media (max-width:680px){
  #page-container .fo-footer .fo-footer-row .et_pb_column{flex:1 1 100%;}
  #page-container .et_pb_section.fo-footer{padding-top:2.75rem;}
}

/* --------------------------------------------------------------------------
   Sticky call bar, phones only
   -------------------------------------------------------------------------- */

.fo-callbar{display:none;}
@media (max-width:1040px){
  .fo-callbar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--btn-face);border-top:3px solid var(--accent);
  }
  .fo-callbar a{
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    color:var(--btn-face-ink);padding:.95rem;text-decoration:none;
    font-family:var(--f-display);font-weight:700;font-size:1.1875rem;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .fo-callbar a:hover{background:var(--accent);color:#fff;}
  .fo-callbar .ic{width:20px;height:20px;display:block;}
  #page-container{padding-bottom:56px;}
}