/*
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.4.1
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:not(.btn){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

   THE THREE BUTTON STYLES
   Named by Brant on 3 Oct 2026. Use these names in any future instruction;
   the class is what to type in the markup.

   | Name    | Class          | Resting              | Hover                |
   |---------|----------------|----------------------|----------------------|
   | Style 1 | .btn--primary  | tan face, navy text  | brown face, white    |
   | Style 2 | .btn--onnavy   | translucent, white   | white face, navy     |
   | Style 3 | .btn--navy     | blue face, white     | navy face, white     |

   Canonical examples, all on the home page: Style 1 is the first hero button,
   Style 2 the second, Style 3 the "See all equipment" button under the
   category grid.

   Style 2 only works on a dark background: its resting state is a white wash
   over whatever is behind it. Style 1 and Style 3 work anywhere.

   .btn--ghost is a fourth variant, unnamed and used on light sections only
   (the "Back to all categories" button). It is not one of the three.
   ========================================================================== */
.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;}
/* :not(.fo-skip). The skip link is markup inside the topbar section, so this
   rule (0,2,0) outranked .fo-skip's own colour (0,1,0) and painted it white on
   its tan face: 1.53:1, and invisible to anyone who tabbed to it, which is the
   only person it exists for. Found by check_contrast.py on its first run.
   Fourth time this shape of rule has beaten a component in this stylesheet. */
.fo-topbar a:not(.fo-skip){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;
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
  color:var(--navy);padding:.6rem .52rem;text-decoration:none;opacity:1;
}

/* Font size, deliberately at LOW specificity, and on its own.
 *
 * Everything else about this menu is pinned with #page-container because Divi
 * will otherwise repaint it. Size is different: it is a design decision Brant
 * makes, and he makes it in the Theme Builder's own Menu module, where the
 * control is. Pinned at (1,2,2) the theme beat his setting
 * (.et_pb_menu_0_tb_header.et_pb_menu ul li a, which is (0,2,3)) and the
 * field silently did nothing — he set 18px, Divi emitted it, and the theme
 * overrode it on every page.
 *
 * At (0,2,2) this is the default when the module says nothing, and loses the
 * moment the module says something. Do not add #page-container to this rule
 * without moving the value into the Menu module first.
 */
.fo-header .et-menu > li > a{font-size:1rem;}
#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.
   margin-right:0 clears Divi's own 6px, which left the toggle sitting 30px
   from the screen edge while the logo opposite it sat on the wrap's 24px
   gutter. Nothing else in the header is off the gutter. */
#page-container .fo-header .et_mobile_nav_menu{
  display:none;flex:none;margin-left:auto;margin-right:0;
}
/* Full bleed to the screen edges.
   Divi positions this absolutely inside the header's padded 1240px wrap, so
   it opened as a 318px panel floating 24px in from each edge of a 390px
   phone. left:50% with a -50vw margin pulls it back out to the viewport
   regardless of how much padding its ancestors carry; the inner padding below
   keeps the links off the glass. */
#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;
  left:50%;right:auto;width:100vw;max-width:100vw;margin-left:-50vw;
  box-sizing:border-box;
}
#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;
}
/* !important, and the reason is measured rather than assumed.

   Divi emits its own rule for this glyph from the Menu module's settings. On
   an ordinary page that rule is
     .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar::before   (0,3,0)
   and the #page-container prefix below beats it. On a page rendered by a
   Theme Builder body template -- every equipment category archive -- Divi
   wraps its output in .et-db #et-boc .et-l and prefixes the same rule to match:
     .et-db #et-boc .et-l .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar::before
   which is (1,5,0) and wins. The hamburger came out #2EA3F2 at 32px, Divi's
   default blue, on the nine category pages and nowhere else. Reported as
   "white on navy everywhere except the empty category pages".

   Out-specifying it means hard-coding Divi's wrapper markup into this
   stylesheet and losing the race again the next time that markup changes.
   This is brand chrome that nothing else has any reason to restyle, so it
   wins outright instead. check_contrast.py measures the glyph on both a page
   and an archive, so a future Divi change is caught rather than noticed. */
#page-container .fo-header .mobile_menu_bar::before,
#page-container .fo-header .mobile_nav.opened .mobile_menu_bar::before{
  color:#fff !important;font-size:26px !important;line-height:1;top:auto;position:static;
}

/* Hamburger closed, X open. Divi toggles .opened on .mobile_nav but does not
   change the glyph, so it stayed as three bars with the menu open. "\4d" is
   the close icon in ETmodules, the same font the bars come from. */
#page-container .fo-header .mobile_nav.opened .mobile_menu_bar::before{
  content:"\4d" !important;
}

@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;}
  /* Padding stays pinned; size drops out of the ID rule for the same reason
     as the base rule above, so a size set in the Menu module still wins here
     rather than the menu changing size only above 1240px. */
  #page-container .fo-header .et-menu > li > a{padding:.6rem .4rem;}
  .fo-header .et-menu > li > a{font-size:.9375rem;}
  #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;}

  /* The 1.5rem gap spaces the logo, menu and phone apart on desktop. Once the
     menu collapses there is nothing left to space: the only things in the row
     are the logo and the hamburger, so the gap became 24px of dead air
     holding the toggle in from the right edge on top of the wrap's own 24px
     padding. Desktop keeps it; mobile and tablet do not. */
  #page-container .fo-header .fo-header-row > .et_pb_column{gap:0;}
  #page-container .fo-header .et_pb_menu_inner_container{gap:0;}
}
@media (max-width:680px){
  #page-container .fo-header .et_pb_menu__logo img{width:190px;}
}
/* MENU-CSS-END */

/* --------------------------------------------------------------------------
   A Divi section acting as one of the design's bands

   Where a band is split into real Divi columns, the background moves off the
   section markup and onto the Divi section, because a colour painted by
   content sitting in a 50% column stops halfway across the page. The content
   columns get the palette back from .sec--navy inside .fo-scope, so the only
   thing left to style here is a Divi module the client adds themselves, which
   is outside the scope entirely and would otherwise render dark text on navy.

   Deliberately only colour and rhythm. Anything a Person or Text module
   brings with it is Brant's to set in the Builder; this is just the floor so
   the first thing typed into a new module is readable.
   -------------------------------------------------------------------------- */

/* The band itself. .fo-section zeroes Divi's section padding and .fo-row
   forces every column to 100% width, both correct for the one-column design
   where our own grid does the work inside a single module. This band is the
   exception: the columns are real Divi columns, so the row has to behave like
   a row and the section has to carry the vertical rhythm the .wrap used to.

   Widths are flex ratios rather than percentages so the gap comes out of the
   total instead of pushing it to 102%. 2:1:1 is the 50/25/25 Brant asked for.
   Stacks at 1040px, the same breakpoint .split uses, so the band behaves like
   the two-column section it replaced. */
#page-container .et_pb_section.fo-band-navy{padding:var(--s-8) 0;}
#page-container .fo-band-navy > .et_pb_row.fo-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8);
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.5rem;
}
#page-container .fo-band-navy > .fo-row > .et_pb_column{
  float:none;margin:0;padding:0;width:auto;min-width:0;flex:1 1 0;
}
#page-container .fo-band-navy > .fo-row > .et_pb_column:first-child{flex:2 1 0;}

@media (max-width:1040px){
  #page-container .fo-band-navy > .et_pb_row.fo-row{gap:var(--s-6);}
  #page-container .fo-band-navy > .fo-row > .et_pb_column,
  #page-container .fo-band-navy > .fo-row > .et_pb_column:first-child{flex:1 1 100%;}
}

.fo-band-navy .fo-band-text,
.fo-band-navy .fo-band-text p,
.fo-band-navy .fo-band-text li{
  color:var(--ink-onnavy-muted);font-family:var(--f-body);line-height:1.65;
}
.fo-band-navy .fo-band-text h1,
.fo-band-navy .fo-band-text h2,
.fo-band-navy .fo-band-text h3,
.fo-band-navy .fo-band-text h4{
  color:#fff;font-family:var(--f-display);font-weight:700;
  letter-spacing:.01em;margin:0 0 .5rem;padding:0;
}
.fo-band-navy .fo-band-text h3{font-size:1.125rem;}
.fo-band-navy .fo-band-text p{margin:0 0 .4rem;padding:0;}
.fo-band-navy .fo-band-text a{color:var(--accent-tint);}
.fo-band-navy .fo-band-text a:hover{color:#fff;}
.fo-band-navy .fo-band-text ul{list-style:none;margin:0;padding:0;}
.fo-band-navy .fo-band-text li::before{content:none;}

/* --------------------------------------------------------------------------
   Divi's Person module, given the design's colours

   Staff on the About page are Divi Person modules, so Brant manages the
   photographs and job titles in the Builder rather than through a field.
   They are chrome, outside .fo-scope, so none of the design system reaches
   them and they arrived in Divi's own greys: the job title at #AAAAAA on
   white is 2.32:1 and could not be read at all. Found by check_contrast.py
   the run after they were added.

   The name takes the heading face and navy, the title becomes an eyebrow in
   the design's own idiom, and the body text takes the muted ink every other
   card on the site uses. Nothing here sets size or spacing beyond what the
   greys needed, so the module's own settings still win in the Builder.
   -------------------------------------------------------------------------- */

#page-container .et_pb_team_member .et_pb_module_header{
  font-family:var(--f-display);font-weight:700;color:var(--navy);
  letter-spacing:.01em;
}
#page-container .et_pb_team_member .et_pb_member_position{
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);
}
#page-container .et_pb_team_member,
#page-container .et_pb_team_member p{
  color:var(--ink-muted);font-family:var(--f-body);line-height:1.65;
}
#page-container .et_pb_team_member a{color:var(--accent);}
#page-container .et_pb_team_member a:hover{color:var(--navy);}

/* The same module dropped into a navy band. */
.fo-band-navy .et_pb_team_member .et_pb_module_header{color:#fff;}
.fo-band-navy .et_pb_team_member .et_pb_member_position{color:var(--accent-tint);}
.fo-band-navy .et_pb_team_member,
.fo-band-navy .et_pb_team_member p{color:var(--ink-onnavy-muted);}

/* --------------------------------------------------------------------------
   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;}
}