/*
Theme Name: EscrowTech Child
Theme URI: https://escrowtech.com
Description: Divi child theme for EscrowTech. Hosts self-contained HTML mockup pages via the "Mockup (Full HTML)" page template, which renders themes/escrowtech-child/mockups/{page-slug}.html exactly as authored.
Author: EscrowTech
Template: Divi
Version: 1.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: escrowtech-child
*/

/* Child theme styles for normal (non-mockup) Divi pages go here.
   Mockup pages ship their own <style> inline and do not use this file. */

/* ---------------------------------------------------------------------------
   V2 brand alignment for Divi's GLOBAL HEADER menu (rendered outside .etmock).
   The V2 design system is strictly white / black / gold (#BF8D00). Divi's
   default menu accent is cyan-blue (#2ea3f2), which reads off-brand on the
   pilot pages. Repaint the menu link states to the brand palette.
   --------------------------------------------------------------------------- */
#main-header #top-menu > li > a { color: #4A4A4A; transition: color .15s ease; }
#main-header #top-menu > li > a:hover { color: #000000; opacity: 1; }
#main-header #top-menu > li > a:focus { opacity: 1; }

/* Active page + its ancestor (e.g. "Services" while on a service sub-page) = gold */
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current-menu-ancestor > a,
#main-header #top-menu > li.current-menu-parent > a,
#main-header #top-menu > li.current_page_item > a,
#main-header #top-menu > li.current_page_ancestor > a,
#main-header #top-menu > li.current_page_parent > a { color: #BF8D00 !important; }

/* Dropdown submenu items */
#main-header #top-menu li li a:hover { color: #BF8D00; }
#main-header #top-menu li li.current-menu-item > a { color: #BF8D00 !important; }

/* Divi's default dropdown top-border + search icon hover pick up the blue too */
#main-header .et-search-icon:hover,
#main-header #et_search_icon:hover { color: #BF8D00; }
#et-top-navigation .et-cart-info span { color: #BF8D00; }

/* ---------------------------------------------------------------------------
   V2 scroll-reactive global header (matches the V2 design engine §3.1).
   Divi already fixes the header and adds `.et-fixed-header` on scroll; we add
   the three states on top of that. The hide/show toggle (`.etnav-hidden`) is
   driven by js/header-scroll.js (scroll-direction, rAF-throttled, passive).
     - Top (not scrolled):     transparent, no border/shadow.
     - Scrolling up (fixed):   frosted white + hairline.
     - Scrolling down:         slides up out of view.
   --------------------------------------------------------------------------- */
#main-header {
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              background-color .4s ease, box-shadow .4s ease, padding .3s ease !important;
  will-change: transform;
}
/* At the very top: transparent. (State classes are driven by js/header-scroll.js,
   decoupled from Divi's own `.et-fixed-header` toggle so it works regardless.) */
#main-header:not(.etnav-solid) {
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
/* Scrolled: frosted glass. The `saturate` keeps the gold logo and CTA from
   going chalky behind the blur; the shadow is a whisper, not a drop shadow. */
#main-header.etnav-solid {
  background-color: rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: none !important;
  box-shadow: 0 10px 30px -22px rgba(20,18,12,.55) !important;
}
/* A gold seam under the scrolled bar — the bookend to the footer's top seam.
   Fades out at both ends so it reads as light on an edge, not a rule. */
#main-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(191,141,0,.28) 18%,
    rgba(191,141,0,.50) 50%,
    rgba(191,141,0,.28) 82%, transparent);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
#main-header.etnav-solid::after { opacity: 1; }

/* Hidden while scrolling down */
#main-header.etnav-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  #main-header { transition: none !important; }
  #main-header.etnav-hidden { transform: none !important; }
}

/* ===========================================================================
   V2 GLOBAL CHROME — refined header (top menu) + footer.
   These run on every page (the Divi shell wraps every mockup fragment), so
   they carry the V2 brand system into the parts of the site the fragments
   don't own. Palette: white / black / gold (#BF8D00). Type: Inter (body),
   Newsreader (serif), IBM Plex Mono (technical labels). Motion is precise and
   restrained — hairlines, gold seams, one-beat reveals.
   Vars are namespaced (--et-*) so they never collide with the fragments' :root.
   =========================================================================== */
:root {
  --et-accent:      #BF8D00;
  --et-accent-lift: #D4A017;
  --et-accent-deep: #805E00;
  --et-ink:         #000000;
  --et-text-2:      #4A4A4A;
  --et-border:      #E8E8E8;
  --et-panel:       #F7F7F5;
  --et-ease:        cubic-bezier(.4, 0, .2, 1);

  /* Header geometry. The measure + gutter are the SAME numbers every V2 page
     uses for its content column (max-width:1280 / padding:0 56), so the logo's
     left edge and the CTA's right edge land exactly on the page's text column.
     Before this, the header ran edge-to-edge at 30px and sat ~95px off-grid. */
  --et-measure:      1280px;
  --et-gutter:       56px;
  --et-bar:          90px;   /* bar height at the top of the page */
  --et-bar-scrolled: 78px;   /* compressed once the page is scrolled */
  /* 2026-08-28: the mark was given more presence — 36 -> 44 at this tier, and a
     proportional step at every other. The mark is 1197x183 = 6.54:1, so each
     extra pixel of height costs 6.54px of width, and that width is reserved out
     of the nav's row by --et-logo-clear. Measured before changing anything: the
     slack between the logo's right edge and the nav's left edge is 100px here
     (constant at and above 1300, since .container caps at the 1280 measure), 74
     at tier B's narrowest and 55 at tier C's. Each tier below takes at most
     ~60% of its own slack, so the row still clears by 35px+ at its tightest.

     2026-08-28 (second pass): 44 -> 52 at THIS tier only, which is the mark at
     its full size. That first pass had already spent the easy room: measured
     again afterwards, the slack here was down to 47px, i.e. as tight as tier C
     already runs at its narrowest (35px). 8 more pixels of height is 52px more
     width, so it could not come out of slack alone — the nav row pays for most
     of it. --et-nav-pad 11 -> 9 (6 links x 4px = 24), --et-nav-gap 3 -> 2 (6),
     --et-cta-pad 26 -> 23 (6): 36px freed, and the remaining 16 comes off the
     slack, which lands at 31px. Nothing shrinks that a reader sees — the link
     labels, their type size and the 34px link height are all untouched; only
     the dead space between them is. Tier B (1120-1299) still steps down to 37,
     so the mark's largest state now needs the full 1280 measure to appear.
     The bar grows 84 -> 90 (and 70 -> 78 scrolled) to hold the taller mark on
     the same ~19px of clearance it had at 44px, rather than crowding it. */
  --et-logo:         52px;
  --et-logo-scrolled:45px;
  --et-logo-clear:   397px;  /* logo width at --et-logo + the gap before the nav */
  --et-nav-fs:       14.5px;
  --et-nav-pad:      9px;
  --et-nav-gap:      2px;
  --et-cta-pad:      23px;
}

/* Divi centres the logo with an inline-block strut (`.logo_helper`), so the
   whitespace between it and the <img> pushes the mark ~3.5px right of the
   container edge. Pull it back so the logo's left edge sits exactly on the
   grid line the headlines below it use. */
#main-header #logo { margin-left: -3.5px !important; }

/* Divi's `.logo_container` is `position:absolute; width:100%`, and an absolutely
   positioned box resolves 100% against its containing block's PADDING box — so it
   comes out a full gutter wider than the content column and starts a gutter in from
   the left, overhanging the container's right edge by exactly one gutter. Above 980px
   the bar is inset from the viewport, so the overhang lands in that margin and is
   invisible (measured: it does not intercept the nav links at any width). At 980px and
   below `.container` is flush to the viewport, so the overhang becomes 24px of
   horizontal page scroll on EVERY page of the site. Pin both edges to the gutter and
   let the width follow, which is right at every tier rather than only the broken one. */
#main-header .logo_container {
  left: var(--et-gutter);
  right: var(--et-gutter);
  width: auto !important;
}

/* ---------------------------------------------------------------------------
   TOP MENU — grid, vertical rhythm, hairline underline, dropdowns, CTA.

   Divi builds the left-style header out of floats and paddings rather than a
   height: `.logo_container` is absolutely positioned and centres the logo with
   a `.logo_helper` strut, while `#et-top-navigation` floats right and sets the
   bar's height from its own padding-top. That math left the nav row 8px below
   the logo's centre line and put the CTA pill flush against the bar's bottom
   edge. We replace it with an explicit bar height and one flex centre line, so
   the logo, the links and the pill all share it.
   --------------------------------------------------------------------------- */

@media only screen and (min-width: 981px) {
  /* --- the grid ------------------------------------------------------- */
  #main-header .container {
    max-width: var(--et-measure) !important;
    width: 100% !important;
    padding-left: var(--et-gutter) !important;
    padding-right: var(--et-gutter) !important;
    min-height: var(--et-bar);
    transition: min-height .28s var(--et-ease);
  }

  /* --- one centre line ------------------------------------------------ */
  #main-header .logo_container {
    height: var(--et-bar) !important;
    transition: height .28s var(--et-ease);
  }
  #main-header .logo_helper { height: 100% !important; }
  #main-header #logo {
    max-height: var(--et-logo) !important;
    width: auto !important;
    transition: max-height .28s var(--et-ease);
  }

  #main-header #et-top-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--et-bar);
    /* Reserve the logo's width. Divi sets this inline from the rendered logo,
       which is why it has to be forced. */
    padding: 0 0 0 var(--et-logo-clear) !important;
    transition: height .28s var(--et-ease);
  }

  /* --- the link row --------------------------------------------------- */
  /* The flex item here is Divi's <nav>, not the <ul>. Stretching the whole
     chain to the bar height is what lets each <li> own its full slice of the
     bar — which both removes the hover dead zone above the dropdowns and makes
     `top:100%` panels land exactly on the bar's bottom edge. */
  #main-header #et-top-navigation > nav#top-menu-nav {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    float: none;
  }
  #main-header #et-top-navigation #top-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: var(--et-nav-gap);
    margin: 0;
    padding: 0;
    float: none;
  }
  /* `flex: 0 0 auto` + `nowrap` are the collision fix: without them the links
     shrink and their labels wrap onto two lines, which is what made the nav
     overlap the logo between 1024px and 1280px. Now they hold their width and
     the size tiers below guarantee the row actually fits. */
  #main-header #top-menu > li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    align-self: stretch;      /* full bar height → no dropdown hover dead zone */
    margin: 0;
    padding: 0 !important;
  }
  #main-header #top-menu > li > a {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 var(--et-nav-pad) !important;
    white-space: nowrap;
  }

  /* --- scrolled: the bar compresses ----------------------------------- */
  #main-header.etnav-solid .container    { min-height: var(--et-bar-scrolled); }
  #main-header.etnav-solid .logo_container { height: var(--et-bar-scrolled) !important; }
  #main-header.etnav-solid #et-top-navigation { height: var(--et-bar-scrolled); }
  #main-header.etnav-solid #logo { max-height: var(--et-logo-scrolled) !important; }
}

/* --- size tiers ------------------------------------------------------------
   Six top-level items, a 6.5:1 two-line logo lockup, a CTA and a search
   affordance is a lot of bar. Rather than let it collide, the row steps down
   in three deliberate stages. Each tier is sized so the nav block still clears
   the logo by 40px+ at that tier's narrowest viewport.
   --------------------------------------------------------------------------- */

/* Tier B — 1120-1299px: type and logo step down, search folds away. Freeing
   that ~50px is what lets the gutter stay on the page's 56px grid here. */
@media only screen and (min-width: 1120px) and (max-width: 1299px) {
  :root {
    --et-bar: 78px;  --et-bar-scrolled: 66px;
    --et-logo: 37px; --et-logo-scrolled: 34px;
    --et-logo-clear: 298px;
    --et-nav-fs: 13.5px; --et-nav-pad: 9px; --et-nav-gap: 2px;
    --et-cta-pad: 22px;
  }
  #main-header #et_top_search { display: none !important; }
}

/* Tier C — 981-1119px: the densest desktop state before the drawer takes over.
   The gutter drops one step off the page grid (56 -> 40) to buy the last of
   the room the row needs; at this width that 16px is imperceptible. */
@media only screen and (min-width: 981px) and (max-width: 1119px) {
  :root {
    --et-gutter: 40px;
    --et-bar: 70px;  --et-bar-scrolled: 62px;
    --et-logo: 31px; --et-logo-scrolled: 29px;
    --et-logo-clear: 243px;
    --et-nav-fs: 13px; --et-nav-pad: 7px; --et-nav-gap: 0px;
    --et-cta-pad: 18px;
  }
  #main-header #et_top_search { display: none !important; }
}

/* Link type + interaction. Base colors are set higher up; here we refine the
   feel and add a gold underline that wipes in from the left. */
#main-header #top-menu > li > a {
  position: relative;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: var(--et-nav-fs);
  font-weight: 500;
  letter-spacing: .005em;
  padding: 8px 15px;
}
#main-header #top-menu > li > a::after {
  content: "";
  position: absolute;
  left: var(--et-nav-pad);
  right: var(--et-nav-pad);
  bottom: 3px;
  height: 1.5px;
  background: var(--et-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--et-ease);
}
#main-header #top-menu > li > a:hover::after { transform: scaleX(1); }

/* Persistent underline for the current page / its ancestor. */
#main-header #top-menu > li.current-menu-item > a::after,
#main-header #top-menu > li.current-menu-ancestor > a::after,
#main-header #top-menu > li.current-menu-parent > a::after,
#main-header #top-menu > li.current_page_item > a::after,
#main-header #top-menu > li.current_page_ancestor > a::after,
#main-header #top-menu > li.current_page_parent > a::after {
  transform: scaleX(1);
}

/* Parent items carry a small caret so the dropdown affordance reads clearly.
   It flips to point up while the panel is open. */
#main-header #top-menu > li.menu-item-has-children > a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 0 8px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  vertical-align: middle;
  opacity: .45;
  transition: opacity .2s ease, transform .24s var(--et-ease);
  order: 2;              /* caret sits after the label */
}
#main-header #top-menu > li.menu-item-has-children > a { display: flex; align-items: center; }
#main-header #top-menu > li.menu-item-has-children:hover > a::before {
  opacity: 1;
  transform: translateY(2px) rotate(225deg);
}
/* keep the underline under the label, clear of the caret */
#main-header #top-menu > li.menu-item-has-children > a::after {
  right: calc(var(--et-nav-pad) + 15px);
}

/* Dropdown panels — a refined white card instead of Divi's default box. */
#main-header #top-menu ul.sub-menu,
#main-header #top-menu li ul {
  min-width: 284px;   /* fits "Software Escrow Agreements" on one line */
  padding: 8px;
  background: #fff;
  border: 1px solid var(--et-border);
  border-top: none;
  border-radius: 0 0 14px 14px;
  box-shadow:
    0 24px 48px -24px rgba(20, 20, 20, .28),
    0 4px 12px rgba(20, 20, 20, .05);
  transform: translateY(6px);
  transition: transform .26s var(--et-ease), opacity .26s var(--et-ease);
}
#main-header #top-menu li:hover > ul.sub-menu,
#main-header #top-menu li:hover > ul { transform: translateY(0); }

/* Keyboard parity for the panels (2026-09-02 UX audit). Divi reveals a submenu on
   `li:hover` alone, so tabbing the header stepped straight from one top-level item to
   the next: 43 of the site's 46 nav destinations could not be reached without a pointer
   (measured — panel computed visibility:hidden/opacity:0 both before AND after focusing
   its parent). `:focus-within` is the entire fix; every panel style above already
   exists and is unchanged.
   Divi owns the visibility/opacity half of the reveal in the PARENT stylesheet, which
   is why that pair is restated here — matching only the child theme's `transform`
   would move a panel that is still invisible. */
#main-header #top-menu li:focus-within > ul.sub-menu,
#main-header #top-menu li:focus-within > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* First-level panels hang off the bar's bottom edge. The negative offset pulls
   the panel left so its item labels sit on the same x as the trigger's label
   (panel padding 8 + item padding 14 = 22 in from the panel's edge). */
@media only screen and (min-width: 981px) {
  #main-header #top-menu > li > ul.sub-menu {
    top: 100% !important;
    margin-left: calc(var(--et-nav-pad) - 22px);
  }
  /* A short gold tick at the seam — the same mark the footer's column heads use. */
  #main-header #top-menu > li > ul.sub-menu::before {
    content: "";
    position: absolute;
    top: 0; left: 22px;
    width: 26px; height: 2px;
    background: var(--et-accent);
    border-radius: 0 0 2px 2px;
  }
  /* Items settle in one beat behind the panel. */
  #main-header #top-menu > li > ul.sub-menu > li {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .24s var(--et-ease), transform .24s var(--et-ease);
    transition-delay: 0s;
  }
  #main-header #top-menu > li:hover > ul.sub-menu > li { opacity: 1; transform: none; }
  /* Focus gets the settled state with no stagger: the delays below are a flourish for a
     pointer arriving at a whole panel, and a keyboard arrives at one item at a time. */
  #main-header #top-menu > li:focus-within > ul.sub-menu > li { opacity: 1; transform: none; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(1) { transition-delay: .03s; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(2) { transition-delay: .06s; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(3) { transition-delay: .09s; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(4) { transition-delay: .12s; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(5) { transition-delay: .15s; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(6) { transition-delay: .18s; }
  #main-header #top-menu > li:hover > ul.sub-menu > li:nth-child(n+7) { transition-delay: .21s; }
}

/* Divi makes every #top-menu li inline-block and relied on a fixed 200px link
   width to keep dropdown rows apart; with `width:auto` they have to be blocks. */
#main-header #top-menu li ul li { display: block; padding: 0; }
#main-header #top-menu li ul li a {
  display: block;
  width: auto;          /* Divi hard-codes 200px, which wrapped longer labels */
  padding: 11px 14px;
  border-radius: 9px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--et-text-2) !important;
  transition: background-color .16s ease, color .16s ease, padding-left .18s var(--et-ease);
}
#main-header #top-menu li ul li a:hover {
  background: var(--et-panel);
  color: var(--et-ink) !important;
  padding-left: 18px;
}
#main-header #top-menu li ul li.current-menu-item > a {
  color: var(--et-accent) !important;
  background: rgba(191, 141, 0, .07);
}

/* Third-level flyouts. Divi offsets them by a hard-coded 240px, which no longer
   matches the panel width, and by -23px vertically against its old padding. */
@media only screen and (min-width: 981px) {
  #main-header #top-menu li li ul {
    left: calc(100% + 18px);  /* clears the parent panel's padding + border */
    top: -8px;
    border-top: 1px solid var(--et-border);
    border-radius: 14px;
  }
  /* Hover bridge: that 18px gap between the parent item and the flyout is empty
     space — the cursor hovers neither element while crossing it, so `li:hover`
     drops and the whole menu collapses before you can reach the third level.
     This transparent strip (a child of the flyout, so it exists only while the
     flyout is open) fills the gap back to the parent panel edge, keeping the
     cursor over a descendant of the li the entire way across. */
  #main-header #top-menu li li ul::after {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;          /* span the full 18px gap (+ a little overlap each end) */
    width: 22px;
    height: 100%;
    /* left transparent on purpose — purely a hit target, not a visible mark */
  }
  #main-header #top-menu li li ul::before { display: none; }
  /* Divi's own caret glyph on items that open a flyout — sit it in the padding. */
  #main-header #top-menu li .menu-item-has-children > a:first-child:after {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .5;
  }
  #main-header #top-menu li .menu-item-has-children > a:first-child { padding-right: 34px !important; }
}

/* Search — Divi ships this as an 18x0px icon floated past the CTA, which is
   both unhittable and visually orphaned. Make it a real 36px control with a
   44px hit area, sized to the same rhythm as the pill next to it. */
#main-header #et_top_search {
  float: none !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;              /* the visible disc */
  height: 36px;
  margin: 0 0 0 14px !important;
  border-radius: 999px;
  transition: background-color .18s ease;
}
#main-header #et_top_search:hover { background: var(--et-panel); }
/* Divi binds the click to the icon, not the wrapper, so the 44px target has to
   be the icon itself — it overhangs the 36px disc by 4px on every side. */
#main-header #et_search_icon {
  position: absolute !important;
  inset: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  font-size: 17px;
  color: var(--et-text-2);
  cursor: pointer;
  transition: color .18s ease;
}
/* Divi pins the glyph with `position:absolute; left:0; top:-3px`; let it centre. */
#main-header #et_search_icon::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  line-height: 1;
}
#main-header #et_search_icon:hover { color: var(--et-accent); }

/* "Get a quote" CTA pill (appended in functions.php). One primary action in
   the bar; everything else is a link. */
#main-header #top-menu > li.menu-cta { margin-left: 18px; padding-right: 0; }
#main-header #top-menu > li.menu-cta > a {
  display: inline-flex;
  align-items: center;
  padding: 13px var(--et-cta-pad) !important;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--et-accent-lift), var(--et-accent));
  color: #17130A !important;         /* near-black on gold = ~6:1, well above AA */
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: var(--et-nav-fs);
  font-weight: 700;
  letter-spacing: .008em;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .38) inset,
    0 1px 2px rgba(120, 88, 0, .28),
    0 6px 14px -8px rgba(191, 141, 0, .7);
  transition: filter .18s ease, transform .18s var(--et-ease), box-shadow .18s ease;
}
#main-header #top-menu > li.menu-cta > a::before { display: none; }
/* The drawer's arrow (functions.php) — the desktop row has no width to give it. */
#main-header #top-menu > li.menu-cta .menu-cta-ar { display: none; }
/* A single band of light crosses the pill on hover. It is a transform on a clipped
   pseudo-element, so it costs no width and no layout. */
#main-header #top-menu > li.menu-cta > a { position: relative; overflow: hidden; isolation: isolate; }
#main-header #top-menu > li.menu-cta > a::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 60%;
  height: auto;
  border-radius: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-12deg);
  transition: none;
  z-index: -1;
  pointer-events: none;
}
#main-header #top-menu > li.menu-cta > a:hover::after {
  transform: translateX(220%) skewX(-12deg);
  transition: transform .7s var(--et-ease);
}
#main-header #top-menu > li.menu-cta > a:hover {
  filter: brightness(1.06);          /* brightens; the dark label keeps its 6:1 */
  color: #17130A !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .45) inset,
    0 2px 4px rgba(120, 88, 0, .26),
    0 10px 22px -10px rgba(191, 141, 0, .8);
}
#main-header #top-menu > li.menu-cta > a:active { transform: translateY(0); }

/* Focus — Divi strips outlines site-wide; keyboard users need them back. */
#main-header #top-menu a:focus-visible,
#main-header #et_search_icon:focus-visible,
#main-header .mobile_menu_bar:focus-visible,
#main-header .et-sub-toggle:focus-visible {
  outline: 2px solid var(--et-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
#main-header #top-menu > li.menu-cta > a:focus-visible { border-radius: 999px; }

/* ---------------------------------------------------------------------------
   MOBILE HEADER + DRAWER (<= 980px).

   Divi's drawer renders all 53 menu items flat — a 2380px scroll with no
   container and the "Get a quote" CTA stranded at the very bottom. Here the
   bar is put on the page's own 24px gutter, sub-menus collapse
   (js/mobile-nav.js), and — since v1.6.0 — the drawer is a full-height sheet:
   serif section names on a gold mono index, a gold tree line for sub-pages, and
   an action panel (quote CTA, phone, trust line) pinned to the sheet's floor.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
  /* Divi's mobile `.container` is `width:80%; margin:auto`, which floats the bar
     in from both edges and puts the logo 41px off the page's 24px gutter. */
  #main-header .container {
    /* declared as the gutter var, not a literal, so the .logo_container rule above
       lands on the same value here as it does on the three desktop tiers */
    --et-gutter: 24px;
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--et-gutter) !important;
    padding-right: var(--et-gutter) !important;
    min-height: 64px;
  }
  #main-header .logo_container { height: 64px !important; }
  #main-header .logo_helper { height: 100% !important; }
  /* Divi caps the mobile logo at 50% of the container; the height cap should be
     what binds, so the mark stays legible next to the two 44px controls.
     The mobile bar has far less room to give than the desktop tiers: at 360px
     the measured gap between the mark and the search icon is only 24px, so the
     larger mark is only affordable from ~401px up and the narrowest phones keep
     the old 30px. */
  #main-header #logo {
    max-width: none !important;
    max-height: 34px !important;
    width: auto !important;
  }
}

/* Narrow phones keep the old 30px mark. The bar's two controls occupy a fixed
   116px (44 + 44 + the 24px gutter), so a 34px mark — 222px wide off a 24px
   left gutter — leaves `viewport - 362` of clearance: 28px at 390 (iPhone 12-16),
   and nothing at 375 or 360. 390 is the cut. */
@media only screen and (max-width: 389px) {
  #main-header #logo { max-height: 30px !important; }
}

@media only screen and (max-width: 980px) {

  /* Bar height lives in one var so the sheet can hang exactly off its bottom edge
     in both states (64 at the top of the page, 58 once scrolled). */
  #main-header { --et-mbar: 64px; --et-dpad: max(24px, calc((100vw - 640px) / 2)); }
  #main-header.etnav-solid { --et-mbar: 58px; }

  #main-header #et-top-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 64px;
    padding: 0 !important;
  }
  #main-header.etnav-solid .container,
  #main-header.etnav-solid .logo_container,
  #main-header.etnav-solid #et-top-navigation { min-height: 58px; height: 58px !important; }

  /* Both bar controls get a full 44px target. */
  #main-header #et_top_search,
  #main-header #et_mobile_nav_menu {
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
  }
  #main-header #et_search_icon,
  #main-header .mobile_menu_bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--et-ink);
  }

  /* --- the toggle: two offset rules that cross into an X ----------------
     Divi draws it as an ETmodules glyph ("a" / "M" when open), which reads as
     a stock icon and snaps between states. Two drawn lines, a long and a short
     one flush right, fold into a cross instead. */
  #main-header .mobile_menu_bar { position: relative; border-radius: 12px; }
  #main-header .mobile_menu_bar::before,
  #main-header .mobile_menu_bar::after {
    content: "" !important;
    position: absolute !important;
    right: 11px;
    left: auto !important;
    height: 2px;
    border-radius: 2px;
    background: var(--et-ink);
    font-size: 0 !important;
    line-height: 0 !important;
    transition: top .3s var(--et-ease), width .3s var(--et-ease),
                transform .3s var(--et-ease), background-color .2s ease;
  }
  #main-header .mobile_menu_bar::before { top: 17px !important; width: 22px; }
  #main-header .mobile_menu_bar::after  { top: 25px; width: 13px; background: var(--et-accent); }
  #main-header .mobile_menu_bar:hover::after { width: 22px; }
  #main-header .mobile_nav.opened .mobile_menu_bar::before,
  #main-header .mobile_nav.opened .mobile_menu_bar::after { top: 21px !important; width: 22px; }
  #main-header .mobile_nav.opened .mobile_menu_bar::before { transform: rotate(45deg); }
  #main-header .mobile_nav.opened .mobile_menu_bar::after  { transform: rotate(-45deg); background: var(--et-ink); }

  /* While the sheet is open the page underneath is out of play: it stops
     scrolling, the bar goes solid (never the transparent top state, which would
     let the hero show through behind the logo) and the quote dock steps aside —
     the sheet carries its own CTA, and two gold pills stacked read as a bug. */
  html.et-nav-open, html.et-nav-open body { overflow: hidden !important; }
  html.et-nav-open #main-header {
    background-color: #fff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none !important;
  }
  html.et-nav-open .et-dock {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }

  /* --- the sheet ------------------------------------------------------------
     Divi opens the drawer with jQuery slideToggle, which writes display / height
     / padding / overflow inline on every frame. The sizing below is !important so
     it wins over those frames, and the motion is ours: a wipe down from the bar on
     open, a quick lift-and-fade on close (Divi keeps the element displayed until
     its own slide ends, which is the window the exit plays in).
     The header is a containing block for fixed children (it carries a transform
     and, once scrolled, a backdrop-filter), so `bottom:0` would resolve against
     the bar — hence the explicit height. */
  #main-header .et_mobile_menu {
    position: fixed !important;
    top: var(--et-mbar) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: calc(100vh - var(--et-mbar)) !important;
    height: calc(100dvh - var(--et-mbar)) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(120% 55% at 100% 100%, rgba(191, 141, 0, .075), transparent 62%),
      #fff;
    border: 0 !important;
    border-top: 1px solid var(--et-border) !important;
    border-radius: 0;
    box-shadow: none;
    counter-reset: etnav;
  }
  /* Displayed (by Divi's inline style) = a flex column, so the action panel can
     sit on the floor of the sheet however few rows are expanded. */
  #main-header .et_mobile_menu[style*="display: block"] {
    display: flex !important;
    flex-direction: column;
  }
  #main-header .mobile_nav.opened .et_mobile_menu {
    animation: et-sheet-in .46s var(--et-ease) both;
  }
  #main-header .mobile_nav.closed .et_mobile_menu {
    animation: et-sheet-out .22s var(--et-ease) both;
    pointer-events: none;
  }
  @keyframes et-sheet-in {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  @keyframes et-sheet-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-10px); }
  }

  /* --- section rows: serif names, gold mono index ------------------------- */
  #main-header .et_mobile_menu li { padding-left: 0 !important; }
  #main-header .et_mobile_menu li a {
    border-bottom: 0 !important;
    background: transparent !important;
  }
  #main-header .et_mobile_menu > li:not(.menu-cta) {
    position: relative;
    flex: 0 0 auto;
    margin: 0 var(--et-dpad);
    border-bottom: 1px solid var(--et-border);
    counter-increment: etnav;
  }
  #main-header .et_mobile_menu > li:not(.menu-cta) > a {
    position: relative;
    display: block;
    padding: 18px 56px 18px 38px !important;
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    letter-spacing: -.012em;
    color: var(--et-ink) !important;
    transition: color .18s ease;
  }
  #main-header .et_mobile_menu > li:not(.menu-cta) > a::before {
    content: counter(etnav, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-40%);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1;
    color: var(--et-accent-deep);
  }
  #main-header .et_mobile_menu > li:not(.menu-cta) > a:active,
  #main-header .et_mobile_menu > li.et-open > a { color: var(--et-accent-deep) !important; }
  #main-header .et_mobile_menu > li.current-menu-item > a,
  #main-header .et_mobile_menu > li.current-menu-ancestor > a,
  #main-header .et_mobile_menu > li.current_page_ancestor > a {
    color: var(--et-accent-deep) !important;
    font-style: italic;
  }

  /* Rows settle in one after another behind the sheet's wipe. */
  #main-header .mobile_nav.opened .et_mobile_menu > li {
    animation: et-row-in .5s var(--et-ease) both;
  }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(1) { animation-delay: .08s; }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(2) { animation-delay: .12s; }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(3) { animation-delay: .16s; }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(4) { animation-delay: .20s; }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(5) { animation-delay: .24s; }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(6) { animation-delay: .28s; }
  #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(n+7) { animation-delay: .32s; }
  @keyframes et-row-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* --- sub-menus: a gold tree line under the section name ----------------- */
  #main-header .et_mobile_menu ul.sub-menu {
    margin: -4px 0 16px 38px !important;
    padding: 0 !important;
    border-left: 1px solid rgba(191, 141, 0, .38);
  }
  #main-header .et_mobile_menu ul.sub-menu a {
    display: block;
    padding: 11px 52px 11px 18px !important;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: var(--et-text-2) !important;
    transition: color .16s ease;
  }
  #main-header .et_mobile_menu ul.sub-menu a:active { color: var(--et-ink) !important; }
  #main-header .et_mobile_menu ul.sub-menu ul.sub-menu {
    margin: 0 0 8px 18px !important;
    border-left-color: var(--et-border);
  }
  #main-header .et_mobile_menu ul.sub-menu ul.sub-menu a {
    padding-left: 16px !important;
    font-size: 14.5px !important;
    line-height: 22px !important;
  }
  /* Current page: gold text and a tick on the tree line. */
  #main-header .et_mobile_menu ul.sub-menu li.current-menu-item > a {
    position: relative;
    color: var(--et-accent-deep) !important;
    font-weight: 600 !important;
  }
  #main-header .et_mobile_menu ul.sub-menu li.current-menu-item > a::before {
    content: "";
    position: absolute;
    left: -1px; top: 10px; bottom: 10px;
    width: 2px;
    background: var(--et-accent);
  }

  /* Collapsed sub-menus + their toggle (markup added by js/mobile-nav.js). */
  #main-header .et_mobile_menu li.menu-item-has-children { position: relative; }
  #main-header .et_mobile_menu li.et-collapsed > ul.sub-menu { display: none !important; }
  #main-header .et_mobile_menu li.et-open > ul.sub-menu { animation: et-sub-in .34s var(--et-ease) both; }
  @keyframes et-sub-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  #main-header .et_mobile_menu .et-sub-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }

  /* A plus that turns into a minus — the vertical stroke rotates flat onto the
     horizontal one. Centred on its row: 68px for sections, 46px for sub-rows. */
  #main-header .et-sub-toggle {
    position: absolute;
    top: 12px; right: -2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    color: var(--et-ink);
    transition: background-color .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #main-header .et_mobile_menu li li > .et-sub-toggle { top: 1px; right: 0; }
  #main-header .et-sub-toggle::before,
  #main-header .et-sub-toggle::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 14px; height: 1.6px;
    margin: -.8px 0 0 -7px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
    opacity: 1;
    transition: transform .3s var(--et-ease);
  }
  #main-header .et-sub-toggle::after { transform: rotate(90deg); }
  #main-header .et_mobile_menu li li > .et-sub-toggle::before,
  #main-header .et_mobile_menu li li > .et-sub-toggle::after { width: 11px; margin-left: -5.5px; }
  #main-header .et_mobile_menu li.et-open > .et-sub-toggle {
    background: rgba(191, 141, 0, .12);
    color: var(--et-accent-deep);
  }
  #main-header .et_mobile_menu li.et-open > .et-sub-toggle::before { transform: rotate(180deg); }
  #main-header .et_mobile_menu li.et-open > .et-sub-toggle::after  { transform: rotate(180deg); }

  /* --- the action panel, pinned to the floor of the sheet ------------------ */
  #main-header .et_mobile_menu > li.menu-cta {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    margin-top: auto;
    display: grid;
    gap: 10px;
    padding: 28px var(--et-dpad) calc(18px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 22px);
  }
  #main-header .et_mobile_menu li.menu-cta > a[data-et-quote] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin: 0;
    padding: 0 8px 0 24px !important;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--et-accent-lift), var(--et-accent)) !important;
    color: #17130A !important;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .005em;
    text-align: left;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .4) inset,
      0 1px 2px rgba(120, 88, 0, .25),
      0 14px 26px -14px rgba(191, 141, 0, .85);
    transition: transform .16s var(--et-ease), filter .16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #main-header .et_mobile_menu li.menu-cta > a[data-et-quote]:active { transform: scale(.985); filter: brightness(.97); }
  #main-header .et_mobile_menu li.menu-cta .menu-cta-ar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #17130A;
    color: var(--et-accent-lift);
  }
  #main-header .et_mobile_menu li.menu-cta .menu-cta-ar svg { display: block; }

  #main-header .et_mobile_menu li.menu-cta .et-drawer-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 20px !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
    border-radius: 16px;
    background: #fff !important;
    color: var(--et-ink) !important;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px !important;
    font-weight: 500 !important;
    -webkit-tap-highlight-color: transparent;
  }
  #main-header .et_mobile_menu li.menu-cta .et-drawer-call:active { background: var(--et-panel) !important; }
  #main-header .et_mobile_menu li.menu-cta .et-drawer-call svg { flex: 0 0 auto; color: var(--et-accent-deep); }
  #main-header .et_mobile_menu .et-drawer-num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 500;
    letter-spacing: .02em;
  }
  #main-header .et_mobile_menu .et-drawer-trust {
    margin: 4px 0 0;
    padding: 0;
    text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #6B6B6B;
  }
}

@media only screen and (max-width: 980px) and (prefers-reduced-motion: reduce) {
  #main-header .mobile_nav .et_mobile_menu,
  #main-header .mobile_nav .et_mobile_menu > li,
  #main-header .et_mobile_menu li.et-open > ul.sub-menu { animation: none !important; }
  #main-header .mobile_menu_bar::before,
  #main-header .mobile_menu_bar::after,
  #main-header .et-sub-toggle::before,
  #main-header .et-sub-toggle::after { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   FOOTER — depth, gold seam, mono column headers, animated links.
   The Divi Theme Builder footer (black, 4 columns) wraps every page. Content
   lives in the layout; here we add atmosphere and polish without rebuilding it.
   Many footer values are inline styles, so link/hover overrides use !important.
   --------------------------------------------------------------------------- */
.et-l--footer { position: relative; }

/* A luminous gold hairline welds the footer to the page above it. */
.et-l--footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(191, 141, 0, .55) 22%,
    rgba(191, 141, 0, .95) 50%,
    rgba(191, 141, 0, .55) 78%, transparent);
  z-index: 2;
}

/* Faint warm glow rising from the top edge for depth over the flat black. */
.et-l--footer .et_pb_section_0_tb_footer,
.et-l--footer .et_pb_section {
  background-image:
    radial-gradient(1100px 380px at 50% -12%, rgba(191, 141, 0, .07), transparent 68%);
}

.et-l--footer,
.et-l--footer p { font-family: 'Inter', -apple-system, sans-serif; }

/* Column headers → technical mono micro-labels with a gold tick above. */
.et-l--footer h3 {
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  position: relative;
}
.et-l--footer h3::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--et-accent);
  opacity: .9;
}

/* Link states — base colors come from inline styles; we own the motion. */
.et-l--footer a {
  position: relative;
  text-decoration: none;
  transition: color .18s ease;
}
.et-l--footer p a:hover { color: #ffffff !important; }

/* Column links get a gold underline that wipes in on hover. */
.et-l--footer .et_pb_column .et_pb_column a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--et-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .26s var(--et-ease);
}
.et-l--footer .et_pb_column .et_pb_column a:hover::after { transform: scaleX(1); }

/* Softer, more premium divider than Divi's default #333 rule. */
.et-l--footer .et_pb_row_0_tb_footer {
  border-bottom-color: rgba(255, 255, 255, .1) !important;
}

/* Bottom bar (copyright + legal). */
.et-l--footer .et_pb_row_2_tb_footer a { transition: color .18s ease; }
.et-l--footer .et_pb_row_2_tb_footer a:hover { color: #d8d8d8 !important; }

@media only screen and (max-width: 980px) {
  .et-l--footer h3 { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #main-header .container,
  #main-header .logo_container,
  #main-header #logo,
  #main-header #et-top-navigation,
  #main-header::after,
  #main-header #top-menu > li > a::after,
  #main-header #top-menu > li.menu-item-has-children > a::before,
  #main-header #top-menu ul.sub-menu,
  #main-header #top-menu li ul,
  #main-header .et-sub-toggle::before,
  .et-l--footer .et_pb_column .et_pb_column a::after { transition: none !important; }
  /* Reveal the dropdown items outright rather than staggering them in. */
  #main-header #top-menu > li > ul.sub-menu > li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  #main-header #top-menu > li.menu-cta > a:hover { transform: none; }
}

/* ===========================================================================
   QUOTE DOCK — the site-wide floating CTA + the sales-form dialog it opens.
   Markup: escrowtech_render_quote_dock() in functions.php. Behavior:
   js/quote-dock.js. Vars are the --et-* chrome namespace, so this never
   collides with a fragment's own :root.

   Why it supersedes the fragments' .callbtn: that pill only dialed, only
   existed on the 50 page fragments (never on the 50 blog posts), and sat in
   near-black at 15px — quiet enough to read as a utility rather than an
   invitation. The dock is gold, larger, and its primary action opens the form
   in place. The phone number is not dropped; it is the dock's second button.
   =========================================================================== */

/* The fragments' own floating call pill. Hidden rather than removed from the
   fragments: they are generated from their V2 sources by tools/v2_to_fragment.py
   and are never hand-patched, and this keeps a single owner for the affordance. */
.etmock .callbtn { display: none !important; }

:root {
  --et-dock-gap:  24px;
  --et-dock-z:    99990;   /* over the fragments' own fixed layers (max z 80) */
}

/* --- the dock ------------------------------------------------------------- */
.et-dock {
  position: fixed;
  right: var(--et-dock-gap);
  bottom: var(--et-dock-gap);
  z-index: var(--et-dock-z);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity .32s var(--et-ease), transform .32s var(--et-ease);
  /* The entrance is CSS, not JS, and `both` leaves it at the end state — so
     the dock is present and clickable even if the script never runs. That is
     also why its primary control is an <a href> rather than a <button>: with
     the fragments' .callbtn hidden below, a JS-less visitor would otherwise be
     left with no floating way to reach anyone. */
  animation: et-dock-enter .38s var(--et-ease) .3s both;
}
@keyframes et-dock-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.et-dock[hidden] { display: none; }
/* Folded away while the dialog is open, and while a real lead form is on
   screen — a floating "Get a quote" hovering over the quote form is noise. */
.et-dock.et-dock-out {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  animation: none;   /* the entrance keyframes hold the end state; outrank them */
}

.et-dock-cta,
.et-dock-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, transform .16s var(--et-ease), box-shadow .16s ease;
}

/* Primary: gold, and the largest control on the page's chrome. Near-black on
   gold measures ~6:1; white on gold is ~3:1 and fails AA, so it is never used
   here (the same rule the header CTA follows). */
.et-dock-cta {
  padding: 16px 26px;
  background: var(--et-accent);
  color: #17130A;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .005em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .16);
}
.et-dock-cta:hover,
.et-dock-cta:focus-visible {
  background: var(--et-accent-lift);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18);
}
.et-dock-cta .et-dock-i { color: #17130A; }

/* Secondary: the click-to-call the fragments' pill used to be, kept in the
   near-black it always was so the gold reads as the one primary action. */
.et-dock-call {
  padding: 11px 18px 11px 16px;
  background: var(--et-ink);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.et-dock-call:hover,
.et-dock-call:focus-visible { background: #241F14; transform: translateY(-2px); }
.et-dock-call .et-dock-i { color: var(--et-accent-lift); }
.et-dock-call-t { display: flex; flex-direction: column; line-height: 1.15; }
.et-dock-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--et-accent-lift);
}
.et-dock-num { font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }

.et-dock-cta:focus-visible,
.et-dock-call:focus-visible { outline: 3px solid var(--et-ink); outline-offset: 3px; }
.et-dock-call:focus-visible { outline-color: var(--et-accent-lift); }

/* One attention nudge a few seconds in — enough to be noticed, short enough
   not to become a tic. Suppressed for reduced motion. */
@keyframes et-dock-nudge {
  0%, 100% { transform: none; }
  30%      { transform: translateY(-6px); }
  55%      { transform: translateY(0); }
  70%      { transform: translateY(-3px); }
}
.et-dock-cta.et-dock-nudge { animation: et-dock-nudge 1.1s var(--et-ease) 1; }

/* --- the dialog ----------------------------------------------------------- */
.et-quote {
  position: fixed;
  inset: 0;
  z-index: 99995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.et-quote[hidden] { display: none; }

.et-quote-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 6, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .26s var(--et-ease);
}
.et-quote.et-quote-open .et-quote-scrim { opacity: 1; }

.et-quote-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
  padding: 40px 38px 34px;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity .26s var(--et-ease), transform .3s var(--et-ease);
}
.et-quote.et-quote-open .et-quote-panel { opacity: 1; transform: none; }

.et-quote-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--et-text-2);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.et-quote-x:hover { background: var(--et-panel); color: var(--et-ink); }
.et-quote-x:focus-visible { outline: 3px solid var(--et-accent); outline-offset: 2px; }

.et-quote-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* #976F00 on white is the gold that clears AA at small sizes — the same
     value the fragments' form cards step down to. */
  color: #976F00;
  margin-bottom: 10px;
}
.et-quote-h {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--et-ink);
  margin: 0 0 8px;
}
.et-quote-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--et-text-2);
  margin: 0 0 22px;
}

.et-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.et-field { margin-bottom: 14px; }
.et-field label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--et-text-2);
  margin-bottom: 6px;
}
.et-req { color: #976F00; margin-left: 3px; }
.et-opt { text-transform: none; letter-spacing: 0; margin-left: 6px; opacity: .8; }
.et-field input,
.et-field textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  /* 16px: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px;
  color: var(--et-ink);
  background: var(--et-panel);
  border: 1px solid var(--et-border);
  border-radius: 8px;
  padding: 12px 13px;
  transition: border-color .15s ease, background-color .15s ease;
}
.et-field textarea { resize: vertical; min-height: 84px; }
.et-field input:focus,
.et-field textarea:focus { outline: none; border-color: var(--et-accent); background: #fff; }
.et-field input:focus-visible,
.et-field textarea:focus-visible { outline: 2px solid var(--et-accent); outline-offset: 1px; }

.et-field .et-field-err { display: block; font-size: 13px; line-height: 1.45; color: #B3261E; margin-top: 6px; }
.et-field input[aria-invalid="true"],
.et-field textarea[aria-invalid="true"] { border-color: #B3261E; background: #FFF7F7; }
.et-quote-err { font-size: 14px; line-height: 1.5; color: #B3261E; margin-top: 14px; text-align: center; }

/* The honeypot: off-screen and out of the tab order, so its label is invisible
   to people and to screen readers alike. Not a contrast failure — see the
   audit notes; skip it in any colour walker. */
.et-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.et-quote-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 15px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--et-accent);
  color: #17130A;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s var(--et-ease);
}
.et-quote-submit:hover:not([disabled]) { background: var(--et-accent-lift); transform: translateY(-1px); }
.et-quote-submit:focus-visible { outline: 3px solid var(--et-ink); outline-offset: 3px; }
.et-quote-submit[disabled] { opacity: .68; cursor: default; }
.et-quote-submit .et-ar { transition: transform .16s var(--et-ease); }
.et-quote-submit:hover:not([disabled]) .et-ar { transform: translateX(3px); }

.et-quote-resp {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #976F00;
  margin-top: 14px;
  text-align: center;
}
.et-quote-alt { font-size: 13.5px; color: var(--et-text-2); margin-top: 10px; text-align: center; }
.et-quote-alt a { color: var(--et-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.et-quote-alt a:hover { color: #976F00; }

.et-quote-done { text-align: center; padding: 26px 6px 12px; }
.et-quote-done[hidden] { display: none; }
.et-quote-done:focus { outline: none; }
.et-quote-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--et-panel);
  color: #8F6A00;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.et-quote-done h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--et-ink);
  margin: 0 0 8px;
}
.et-quote-done p { font-size: 14.5px; color: var(--et-text-2); margin: 0 0 22px; }
.et-quote-doneclose {
  border: 1px solid var(--et-border);
  background: #fff;
  border-radius: 999px;
  padding: 11px 26px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--et-ink);
  cursor: pointer;
  transition: background-color .15s ease;
}
.et-quote-doneclose:hover { background: var(--et-panel); }
.et-quote-doneclose:focus-visible { outline: 3px solid var(--et-accent); outline-offset: 2px; }

/* Scroll lock. `position:fixed` on <body> would lose the scroll position on
   every open, so the page keeps its flow and only overflow is clipped. */
html.et-quote-lock, html.et-quote-lock body { overflow: hidden !important; }

/* --- mobile: the dock becomes the bottom bar ------------------------------ */
@media only screen and (max-width: 640px) {
  .et-dock {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    padding: 0;
    /* stretch, not centre: the call button is a two-line lockup and the CTA is
       one, so centring leaves a 4px seam of page showing above and below the
       gold. As a bottom bar both halves have to fill the bar. */
    align-items: stretch;
  }
  .et-dock-cta,
  .et-dock-call {
    flex: 1 1 auto;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
    padding-top: 15px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
  .et-dock-call { flex-grow: 0; padding-left: 20px; padding-right: 20px; }
  .et-dock-cta  { flex-grow: 1; font-size: 16.5px; }
  .et-dock { box-shadow: 0 -6px 22px rgba(0, 0, 0, .2); }
  .et-dock-cta:focus-visible,
  .et-dock-call:focus-visible { outline-offset: -4px; }

  /* Keep the bar from covering the last of the footer. The height is measured
     and published by js/quote-dock.js, because it changes with the safe-area
     inset and with the label's own line box. */
  #page-container { padding-bottom: var(--et-dock-h, 68px); }

  .et-quote { padding: 0; align-items: flex-end; }
  .et-quote-panel {
    max-width: none;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    padding: 34px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    transform: translateY(22px);
  }
  .et-frow { grid-template-columns: 1fr; gap: 0; }
  .et-quote-h { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .et-dock,
  .et-dock-cta,
  .et-dock-call,
  .et-quote-scrim,
  .et-quote-panel,
  .et-quote-submit { transition: none !important; }
  .et-dock-cta.et-dock-nudge { animation: none !important; }
  .et-dock { transform: none !important; animation: none !important; opacity: 1; }
  .et-dock.et-dock-out { opacity: 0; }
  .et-quote-panel { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   SKIP LINK (2026-09-02 UX audit)
   Emitted on wp_body_open (functions.php) so it is the first focusable element on
   every page; targets the <main id="et-content"> that template-mockup.php and
   single.php now wrap the fragment in.

   Off-screen rather than display:none — a hidden element is not focusable, which
   would leave the same nine header stops it exists to skip. It uses the header's
   own gold/near-black pair so it reads as part of the chrome when it appears.
   --------------------------------------------------------------------------- */
.et-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--et-accent, #BF8D00);
  color: #17130A;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.et-skip-link:focus {
  left: 0;
  outline: 2px solid #17130A;
  outline-offset: -6px;
}
/* The landmark takes focus from the skip link but must never paint a ring for the
   pointer users who never asked for it. */
#et-content:focus { outline: none; }