.elementor-kit-19{--e-global-color-primary:#183F5E;--e-global-color-secondary:#0071B7;--e-global-color-text:#183F5E;--e-global-color-accent:#F1AE45;--e-global-color-63af1b4:#009DB0;--e-global-color-0c26593:#FFFFFF;--e-global-color-893ac00:#F3E7CE;--e-global-color-ffff00a:#EAE8E4;--e-global-color-191f302:#583A22;--e-global-typography-primary-font-family:"Special Gothic Expanded One";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Special Gothic Expanded One";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Lato 500";--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Lato 800";--e-global-typography-accent-font-weight:800;color:var( --e-global-color-primary );font-family:"Lato 500", Sans-serif;font-size:16px;font-weight:500;line-height:1.75em;}.elementor-kit-19 button,.elementor-kit-19 input[type="button"],.elementor-kit-19 input[type="submit"],.elementor-kit-19 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Lato 800", Sans-serif;font-size:16px;font-weight:800;text-transform:uppercase;color:var( --e-global-color-primary );border-radius:70px 70px 70px 70px;padding:14px 28px 14px 28px;}.elementor-kit-19 button:hover,.elementor-kit-19 button:focus,.elementor-kit-19 input[type="button"]:hover,.elementor-kit-19 input[type="button"]:focus,.elementor-kit-19 input[type="submit"]:hover,.elementor-kit-19 input[type="submit"]:focus,.elementor-kit-19 .elementor-button:hover,.elementor-kit-19 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-accent );}.elementor-kit-19 e-page-transition{background-color:#FFBC7D;}.elementor-kit-19 a{color:var( --e-global-color-secondary );text-decoration:none;}.elementor-kit-19 a:hover{color:var( --e-global-color-primary );}.elementor-kit-19 h1{color:var( --e-global-color-primary );font-family:"Special Gothic Expanded One", Sans-serif;font-size:100px;font-weight:400;text-transform:uppercase;line-height:0.92em;}.elementor-kit-19 h2{color:var( --e-global-color-primary );font-family:"Special Gothic Expanded One", Sans-serif;font-size:60px;font-weight:400;text-transform:uppercase;}.elementor-kit-19 h3{color:var( --e-global-color-primary );font-family:"Special Gothic Expanded One", Sans-serif;font-size:40px;font-weight:400;text-transform:uppercase;line-height:1.05em;}.elementor-kit-19 h4{color:var( --e-global-color-primary );font-family:"Special Gothic Expanded One", Sans-serif;font-size:30px;font-weight:400;text-transform:uppercase;}.elementor-kit-19 h5{color:var( --e-global-color-primary );font-family:"Special Gothic Expanded One", Sans-serif;font-size:24px;font-weight:400;text-transform:uppercase;}.elementor-kit-19 h6{color:var( --e-global-color-primary );font-family:"Special Gothic Expanded One", Sans-serif;font-size:20px;font-weight:400;text-transform:uppercase;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-19 h1{font-size:64px;line-height:0.92em;}.elementor-kit-19 h2{font-size:48px;line-height:0.97em;}.elementor-kit-19 h3{font-size:34px;line-height:1.05em;}.elementor-kit-19 h4{font-size:27px;line-height:1.1em;}.elementor-kit-19 h5{font-size:22px;line-height:1.15em;}.elementor-kit-19 h6{font-size:18px;line-height:1.2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-19 h1{font-size:40px;line-height:0.92em;}.elementor-kit-19 h2{font-size:38px;line-height:0.97em;}.elementor-kit-19 h3{font-size:30px;line-height:1.05em;}.elementor-kit-19 h4{font-size:24px;line-height:1.1em;}.elementor-kit-19 h5{font-size:20px;line-height:1.15em;}.elementor-kit-19 h6{font-size:17px;line-height:1.2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================
   ALL POWER MARINE — site custom CSS
   Elementor → Site Settings → Custom CSS. Paste the whole file.

   Organized: tokens → foundations → header/footer → shared bands → plugin
   one-offs → one group per page. Late fixes live with the section they fix,
   never at the end.

   CONVENTIONS
   · Color is always a global var, never a hex, except inside an rgba() scrim.
   · !important means Elementor emits the same property per element (0,3,0)
     from a later stylesheet — not a preference.
   · Breakpoints: 1366 hamburger band ends · 1024 tablet · 767 phone.
   · The long rationale behind these rules is archived in APM-CSS-Rationale.md.
============================================================================ */


/* ===========================================================================
   01. TOKENS, FONTS AND KIT DEFAULTS
=========================================================================== */
/* FONT FORCE-LOAD — all four custom families Elementor only auto-enqueues a Custom Font on the FRONT END when a widget… */
@font-face{
  font-family:"Lato 300";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("/wp-content/uploads/2026/07/Lato-Light.woff2") format("woff2"),
      url("/wp-content/uploads/2026/07/Lato-Light.woff")  format("woff"),
      url("/wp-content/uploads/2026/07/Lato-Light.ttf")   format("truetype");
}
@font-face{
  font-family:"Lato 500";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/wp-content/uploads/2026/07/Lato-Medium.woff2") format("woff2"),
      url("/wp-content/uploads/2026/07/Lato-Medium.woff")  format("woff"),
      url("/wp-content/uploads/2026/07/Lato-Medium.ttf")   format("truetype");
}
@font-face{
  font-family:"Lato 800";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("/wp-content/uploads/2026/07/Lato-Heavy.woff2") format("woff2"),
      url("/wp-content/uploads/2026/07/Lato-Heavy.woff")  format("woff"),
      url("/wp-content/uploads/2026/07/Lato-Heavy.ttf")   format("truetype");
}
/* NOTE the filenames differ by format for this one — woff2/woff are special-gothic-expanded-one-400, the ttf is… */
@font-face{
  font-family:"Special Gothic Expanded One";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/wp-content/uploads/2026/07/special-gothic-expanded-one-400.woff2") format("woff2"),
      url("/wp-content/uploads/2026/07/special-gothic-expanded-one-400.woff")  format("woff"),
      url("/wp-content/uploads/2026/07/SpecialGothicExpandedOne-Regular.ttf")  format("truetype");
}

/* ---- Header height. Measured: 74 above 1366, 79 inside the hamburger band. ---- */
:root{ --apm-header:74px; }
@media (min-width:1025px) and (max-width:1366px){
  :root{ --apm-header:79px; }
}

/* ===========================================================================
   02. FOUNDATIONS — TYPE
=========================================================================== */

/* ---- H2 line-height safety net ---- */
.elementor-widget-heading h2.elementor-heading-title{ line-height:.97em; }

/* Sentence-case override for mixed-case headlines (Theme Style forces uppercase) */
.tt-none .elementor-heading-title{ text-transform:none; }

/* ---- Display heading (interior section titles) ---- */
.h2-display .elementor-heading-title{ font-size:100px !important; line-height:.92em !important; }
@media (max-width:1024px){ .h2-display .elementor-heading-title{ font-size:64px !important; } }
@media (max-width:767px){  .h2-display .elementor-heading-title{ font-size:44px !important; } }
/* Line breaks come from <span class="nl"> in the title — see the Type group. */

/* ---- Two-tone headline word: <span class="hl"> ---- */
.hl{ color:var(--e-global-color-accent); }

/* Line break inside a heading without <br> */
.nl{ display:block; }

/* Keep a phrase on one line (stops WHITE-GLOVE splitting at the hyphen) */
.nb{ white-space:nowrap; }
@media (max-width:767px){ .nb{ white-space:normal; } }

/* ---- Eyebrow / kicker ---- */
.eyebrow{
  font-family:"Lato 800",sans-serif;
  font-weight:800;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--e-global-color-accent);        /* Sunshine — dark/blue sections */
}
/* The comp draws every eyebrow in a 31px line box (31/16 = 1.9375) */
.eyebrow .elementor-heading-title{ line-height:1.9375; }

.eyebrow.is-navy{ color:var(--e-global-color-primary); }   /* light sections   */
.eyebrow.is-blue{ color:var(--e-global-color-secondary); } /* Mid Ship Blue    */
.eyebrow.is-teal{ color:var(--e-global-color-63af1b4); }   /* Sandy Lagoon     */

/* Inline text link styled like an eyebrow (e.g. "View Our Brand Video") */
.txt-link{ text-decoration:underline; text-underline-offset:3px; }

/* ---- Inline links on a dark ground ---- */
.link-on-dark a,
.link-on-dark a:visited,
a.link-on-dark,
a.link-on-dark:visited{
  color:var(--e-global-color-63af1b4);              /* Sandy Lagoon */
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--e-global-color-accent);
  transition:color .2s ease, text-decoration-color .2s ease;
}
.link-on-dark a:hover,
.link-on-dark a:focus-visible,
a.link-on-dark:hover,
a.link-on-dark:focus-visible{
  color:var(--e-global-color-accent);               /* Sunshine */
  text-decoration-color:var(--e-global-color-accent);
}
/* Keyboard users get a visible ring — the color change alone is not enough. */
.link-on-dark a:focus-visible,
a.link-on-dark:focus-visible{
  outline:2px solid var(--e-global-color-accent);
  outline-offset:2px; border-radius:2px;
}

/* On a LIGHT section, same idea inverted: */
.link-on-light a,
.link-on-light a:visited,
a.link-on-light,
a.link-on-light:visited{
  color:var(--e-global-color-secondary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.link-on-light a:hover,
.link-on-light a:focus-visible,
a.link-on-light:hover,
a.link-on-light:focus-visible{
  color:var(--e-global-color-primary);
}

@media (prefers-reduced-motion: reduce){
  .link-on-dark a, a.link-on-dark,
  .link-on-light a, a.link-on-light{ transition:none; }
}

/* ===========================================================================
   03. FOUNDATIONS — BUTTONS
=========================================================================== */
/* Keep all CTA labels on one line */
.elementor-button{ white-space:nowrap; }

/* CTA chevron/icon inherits the button's text color (was rendering white) */
.elementor-button .elementor-button-icon svg{ fill:currentColor; }

/* Full-width buttons on mobile — add class "btn-block-mobile" to the button */
@media (max-width:767px){
  .btn-block-mobile{ width:100%; }
  .btn-block-mobile .elementor-button{ display:flex; width:100%; justify-content:center; }
}

/* Ghost / outline — Sunshine (use on dark or blue sections). Class: btn-ghost */
.btn-ghost .elementor-button{
  background:transparent;
  border:2px solid var(--e-global-color-accent);
  color:var(--e-global-color-accent);
}
.btn-ghost .elementor-button:hover{
  background:var(--e-global-color-accent);
  color:var(--e-global-color-primary);
}

/* Ghost / outline — Mid Ship Blue (use on light sections). Class: btn-ghost-blue */
.btn-ghost-blue .elementor-button{
  background:transparent;
  border:2px solid var(--e-global-color-secondary);
  color:var(--e-global-color-secondary);
}
.btn-ghost-blue .elementor-button:hover{
  background:var(--e-global-color-secondary);
  color:var(--e-global-color-0c26593);
}

/* Solid Sunshine ON A DARK GROUND */
.btn-on-dark .elementor-button:hover,
.btn-on-dark .elementor-button:focus-visible{
  background:var(--e-global-color-0c26593);
  color:var(--e-global-color-primary);
}

/* Solid Mid Ship Blue (e.g. Learn About 4ocean). Class: btn-blue */
.btn-blue .elementor-button{
  background:var(--e-global-color-secondary);
  color:var(--e-global-color-0c26593);
}
.btn-blue .elementor-button:hover{
  background:var(--e-global-color-primary);
  color:var(--e-global-color-0c26593);
}

/* ===========================================================================
   04. FOUNDATIONS — LAYOUT SAFETY NETS
=========================================================================== */

/* ---- Section padding helpers ---- */
.section-pad{ padding-inline:clamp(24px,8vw,148px); }

/* Horizontal + vertical fluid padding (normal stacked sections). Class: apm-section */
.apm-section{ padding-block:clamp(40px,7vw,100px); padding-inline:clamp(24px,8vw,148px); }

/* ---- Inline rows (spec stats + CTA pairs) ---- */
.spec-row{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:flex-start; }
.cta-row { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center; }

/* Phones: CTAs stack full-width; let the 3-up stats wrap only if genuinely needed. */
@media (max-width:767px){
  .cta-row { flex-direction:column !important; align-items:flex-start; }
  .spec-row{ flex-wrap:wrap !important; }
}

/* ---- Structural fallback — survive a stale post-{page}.css ---- */
.docks-hero, .docks-hero-inner, .hero-partner,
.dock-trust-bar, .dock-trust-copy, .apm-trust-divider,
.dock-sg, .dock-sg-stage, .dock-sg-head, .dock-sg-panels, .dock-panel,
.dock-ourchoice, .oc-copy, .oc-media, .dock-card, .dock-sec-head,
.dock-composite, .type-col, .dock-wood, .wood-callout,
.dock-process, .proc-step, .proc-cta,
.dock-gallery, .coverflow-slot,
.dock-faq, .dock-form-band, .form-copy, .form-fields, .gf-slot{
  display:flex; flex-direction:column;
}
.dock-trust-row, .dock-trust-item, .oc-split, .dock-cards,
.type-cols, .dock-wood-row, .proc-grid, .dock-form-row{
  display:flex; flex-direction:row;
}

/* ===========================================================================
   05. FOUNDATIONS — MOTION
=========================================================================== */
@media (prefers-reduced-motion: reduce){
  .apm-stack{ position: static !important; }
  .apm-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Hidden pre-state is gated on .apm-anim */
.apm-anim .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* Already in the first viewport at boot: */
.reveal.reveal-now{ opacity:1 !important; transform:none !important; transition:none !important; }

/* EDITOR SAFETY: the observer doesn't run in the editor iframe, so .reveal would sit at opacity:0 and be uneditable */
body.elementor-editor-active .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

.reveal.d1{ transition-delay:.07s; }
.reveal.d2{ transition-delay:.14s; }
.reveal.d3{ transition-delay:.21s; }
.reveal.d4{ transition-delay:.28s; }

/* ===========================================================================
   06. FOUNDATIONS — STICKY STACK
=========================================================================== */
/* NEVER CLIP AN ANCESTOR OF A STICKY ELEMENT */
html, body, .elementor, .page-content{ overflow-x: visible !important; }

.apm-stack-wrap{ position: relative; overflow: visible; }

/* A reveal's transform on an ancestor re-parents the sticky containing block AND promotes a layer — same failure class… */
.apm-stack-wrap.reveal, .apm-stack.reveal{
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* Must beat Elementor's base .e-con{position:relative} — equal specificity, so load order could otherwise let… */
.apm-stack{
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;                 /* pin flush to the top; header floats above */
  min-height: 100vh;
  min-height: 100dvh;     /* true viewport on phones (URL-bar-safe) */
  overflow: visible;
  align-self: start;      /* don't let flex align-items:stretch defeat the stick */
}

/* NO PIN BELOW 1025 — every stack, every page */
@media (max-width:1024px){
  .apm-stack{ position: static !important; }
}

/* THE 100vh FLOOR GOES WITH THE PIN */
@media (max-width:1024px){
  .apm-stack{ min-height:60vh; min-height:60dvh; }
}

/* The home page's Post Lifts panel holds two products side by side (~1 screen on desktop) but they stack below 1025px,… */
@media (max-width:1024px){
  /* Two classes, so it beats .apm-stack on specificity, not on source order. */
  .apm-stack.apm-stack-duo{ position: static !important; }
}

/* ---- Boat Lifts opts out of the pin ---- */
.stack-desktop .apm-stack,
.apm-stack.stack-desktop{
  position:static !important;
}

/* Phones and tablets also drop the 100vh floor — short content would otherwise leave big empty sections */
@media (max-width:1024px){
  .stack-desktop .apm-stack,
  .apm-stack.stack-desktop{
    min-height:0 !important;
  }
}

/* To re-pin on very tall displays only, un-comment this */

/* ---- Tablet landscape: no pin (panels are 780-840 against a ~600 window) ---- */
@media (min-width:1025px) and (max-width:1366px){
  .apm-stack.apm-stack.apm-stack{ position:static !important; }
}

/* ---- An unpinned panel must stay a containing block, or its ::before escapes ---- */
@media (max-width:1366px){
  .apm-stack.apm-stack.apm-stack{ position:relative !important; }
}
@media (prefers-reduced-motion: reduce){
  .apm-stack.apm-stack.apm-stack{ position:relative !important; }
}
.stack-desktop .apm-stack.apm-stack,
.apm-stack.stack-desktop.stack-desktop{ position:relative !important; }

/* ===========================================================================
   07. FOUNDATIONS — ANCHOR LANDING OFFSET
=========================================================================== */
/* --apm-header, not the old --sixty-header-m: every anchor at 1024 and below
   depended on a token that left with the 60 Seconds group. */
.e-con[id], .elementor-element[id]{
  scroll-margin-top: calc(var(--apm-header) + 24px);
}
@media (max-width:1024px){
  .e-con[id], .elementor-element[id]{
    scroll-margin-top: var(--apm-header);
  }
}

/* Gravity Forms jumps to #gf_N after a submit, and the error summary links
   to #field_N_N. Neither is an Elementor element, so both need their own
   clearance under the header. */
.gform_anchor, .gform_confirmation_wrapper, .gform_validation_errors,
.gform_wrapper .gfield{
  scroll-margin-top:calc(var(--apm-header) + 24px);
}
/* The logged-in admin bar adds 32px above the header. */
@media (min-width:783px){
  body.admin-bar .gform_anchor,
  body.admin-bar .gform_confirmation_wrapper,
  body.admin-bar .gform_validation_errors,
  body.admin-bar .gform_wrapper .gfield{
    scroll-margin-top:calc(var(--apm-header) + 56px);
  }
}
@media (max-width:1024px){
  .gform_anchor, .gform_confirmation_wrapper, .gform_validation_errors,
  .gform_wrapper .gfield{
    scroll-margin-top:calc(var(--apm-header) + 16px);
  }
}

/* ===========================================================================
   08. HEADER AND NAV
=========================================================================== */

/* ---- Desktop dropdown ---- */
.elementor-nav-menu .sub-menu{
  background-color:var(--e-global-color-primary);
  border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:6px 0;
}
.elementor-nav-menu .sub-menu a.elementor-sub-item{
  color:var(--e-global-color-0c26593); font-family:"Lato 500",sans-serif; font-weight:500; font-size:15px;
  text-transform:none; padding:12px 20px;
}
.elementor-nav-menu .sub-menu a.elementor-sub-item:hover,
.elementor-nav-menu .sub-menu a.elementor-sub-item.elementor-item-active{
  background-color:var(--e-global-color-accent);
  color:var(--e-global-color-primary);
}

/* ---- Header paint on load ----
   The header container fades in (Entrance Animation: Fade In), and an element
   mid-fade is see-through, so the white page showed through before the blue
   arrived. Painting the location wrapper the same blue means the bar is blue
   from the first frame and only its contents fade. Same global as the header. */
.elementor-location-header{ background-color:var(--e-global-color-secondary); }

/* ---- Logo ---- */
.apm-logo .elementor-icon{ display:flex; align-items:center; line-height:0; }
.apm-logo .elementor-icon svg{ display:block; width:auto; height:44px !important; }   /* desktop */
@media (max-width:1024px){ .apm-logo .elementor-icon svg{ height:40px !important; } } /* tablet  */
@media (max-width:767px){  .apm-logo .elementor-icon svg{ height:36px !important; } } /* mobile  */

/* ---- Off-canvas mobile menu ---- */
.apm-offcanvas-menu .elementor-nav-menu a.elementor-item{
  color:var(--e-global-color-0c26593) !important; background:transparent !important;
  font-family:"Lato 800",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:18px; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.apm-offcanvas-menu .elementor-nav-menu a.elementor-item:hover,
.apm-offcanvas-menu .elementor-nav-menu a.elementor-item.elementor-item-active{
  color:var(--e-global-color-accent) !important; background:transparent !important;
}
.apm-offcanvas-menu .sub-menu{
  position:static !important; width:100% !important;
  inset:auto !important; transform:none !important; box-shadow:none !important;
  background:transparent !important; padding:0 0 0 14px !important;
}
.apm-offcanvas-menu .sub-menu a.elementor-sub-item{
  display:block !important; width:100% !important;
  color:rgba(255,255,255,.85) !important; background:transparent !important;
  font-family:"Lato 500",sans-serif; font-weight:500; text-transform:none;
  font-size:16px; padding:12px 0 !important; white-space:normal;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.apm-offcanvas-menu .sub-menu a.elementor-sub-item:hover,
.apm-offcanvas-menu .sub-menu a.elementor-sub-item.elementor-item-active{
  color:var(--e-global-color-accent) !important; background:transparent !important;
}
.e-off-canvas__body,
.e-off-canvas__main{
  max-height:100vh;
  max-height:100dvh;              /* URL-bar-safe, or the last item hides */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.apm-offcanvas-menu .sub-arrow,
.apm-offcanvas-menu .sub-arrow i,
.apm-offcanvas-menu .sub-arrow svg,
.apm-offcanvas-menu .elementor-item-icon{
  color:var(--e-global-color-0c26593) !important;
  fill:var(--e-global-color-0c26593) !important; font-size:18px !important;
}
.apm-offcanvas-menu .menu-item-has-children>.sub-menu{ display:none !important; }
.apm-offcanvas-menu .menu-item-has-children.apm-open>.sub-menu{ display:block !important; }

/* ---- The nav stops pretending it fits: hamburger from 1025 to 1366 ---- */
@media (min-width:1025px) and (max-width:1366px){
  .elementor-location-header .elementor-widget-nav-menu.elementor-hidden-tablet{
    display:none !important;
  }
  .elementor-location-header .elementor-widget-icon.elementor-hidden-desktop{
    display:block !important;
  }
}

/* ---- Tablet landscape sizes for the burger and the off-canvas ---- */
@media (min-width:1025px) and (max-width:1366px){
  .elementor-location-header .elementor-widget-icon.elementor-hidden-desktop .elementor-icon{
    font-size:28px !important;
  }
  .elementor-location-header .elementor-widget-icon.elementor-hidden-desktop .elementor-icon svg{
    width:28px !important; height:28px !important;
  }
  .elementor-location-header .elementor-widget-off-canvas{ --e-off-canvas-width:320px !important; }
  .e-off-canvas .elementor-widget-image img{
    width:min(200px, 28vh) !important; height:auto !important;
  }
}

/* ---- The burger sat 4px high — inline-block left a descender gap ---- */
.elementor-location-header .elementor-widget-icon.elementor-hidden-desktop .elementor-icon-wrapper{
  display:flex; line-height:0;
}

/* ===========================================================================
   09. FOOTER
=========================================================================== */
/* Column heading — Special Gothic 14, white. Class: footer-col-title */
.footer-col-title{
  font-family:"Special Gothic Expanded One",sans-serif; font-weight:400;
  font-size:14px; text-transform:uppercase;
  color:var(--e-global-color-0c26593);
}

/* Link list — Lato 300 16/32, white (one <a> per line). Class: footer-links */
.footer-links a{
  display:block; font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:16px; line-height:32px;
  text-decoration:none; color:var(--e-global-color-0c26593);
}
.footer-links a:hover{ color:var(--e-global-color-accent); }
/* 14px, not the comp's 13 — legibility on a sub-link the client asked to raise. */
.footer-links a.sub{ padding-left:16px; font-size:14px; line-height:24px; }  /* Our Story / Why Us */

/* Description + copyright — Lato 300 16, white */
.footer-muted{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:16px; line-height:24px; color:var(--e-global-color-0c26593);
}

/* ===========================================================================
   10. SHARED — TRUST AND STAT BARS
=========================================================================== */
.apm-trust-divider{
  flex:0 0 1px !important; width:1px !important; min-width:1px !important;
  padding:0 !important; align-self:center;
  background:rgba(24,63,94,.4) !important;   /* = primary @ 40% */
}
@media (max-width:1024px){ .apm-trust-divider{ display:none !important; } }
/* display/margin forced: Elementor's image-widget CSS loads after ours and its img{display:inline-block} +… */
.apm-trust-icon{ text-align:left !important; }
.apm-trust-icon img{ height:26px; width:auto; display:block !important; margin-inline:0 !important; }

/* Dock-page label pair. The Docks bar carries two lines per item where the original carries one, so it needs the two… */
.trust-lead{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:16px; line-height:1.3; text-transform:uppercase;
  color:var(--e-global-color-primary);
}
.trust-sub{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:1.3; text-transform:uppercase;
  color:var(--e-global-color-primary);
}
.dock-trust-copy{ width:auto !important; }

/* DESKTOP PADDING FOR BOTH BARS lives here; both templates set only tablet and mobile, so this applies unopposed (no… */
.apm-trust-bar { padding:34px clamp(24px, 4.6vw, 80px); }
.dock-trust-bar{ padding:20px clamp(24px, 7.2vw, 125px); }

/* BAND HEIGHT IS 97 IN ALL THREE COMPS — Home 4:64, Boat Lifts 441:365, Docks 740:336, every one of them 1728 x 97 */
@media (min-width:1025px){
  .apm-trust-bar, .dock-trust-bar{
    min-height:97px !important;
    justify-content:center !important;
    padding-block:16px !important;
  }
}

/* DOUBLE-WRAPPED BARS. On /boat-lifts/ the class sits on a page container that only holds the Elementor template… */
.apm-trust-bar:has(> .elementor-widget-template),
.dock-trust-bar:has(> .elementor-widget-template){
  min-height:0 !important;
  padding:0 !important;
}

/* THE THREE STATES ---------------------------------------------------- Client call 2026-09-04: */

/* ---- ONE ROW, 1200 AND UP ---- */
@media (min-width:1200px){
  .apm-trust-row, .dock-trust-row{
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    column-gap:clamp(14px, 1.2vw, 20px) !important;
  }
  .apm-trust-row .apm-trust-divider,
  .dock-trust-row .apm-trust-divider{ display:block !important; }
    /* min-width:0 lets a flex item shrink below its content width instead of forcing the row to wrap — without it nowrap… */
  .apm-trust-item, .dock-trust-item{
    width:auto !important; max-width:none !important;
    flex:0 1 auto !important; min-width:0 !important;
  }
}
/* Below the design width the comp's proportional margin is too generous for four items, so it is capped and the type… */
@media (min-width:1200px) and (max-width:1727px){
  .apm-trust-bar { padding:16px clamp(32px, 4.0vw, 80px) !important; }
  .dock-trust-bar{ padding:16px clamp(32px, 4.4vw, 96px) !important; }
  .trust-lead, .trust-sub{
    font-size:clamp(13px, 1.06vw, 16px) !important; line-height:1.25 !important;
  }
  .apm-trust-icon img{ height:clamp(22px, 1.75vw, 28px) !important; max-width:34px; }
}

/* ---- TWO ROWS, TABLET (768-1199) ----------------------------------------- */
/* calc() widths that subtract the gap — % plus a fixed px gap rounds past 100% and drops to one column (gotcha #3) */
@media (min-width:768px) and (max-width:1199px){
  .trust-lead, .trust-sub{ font-size:14px !important; }
  .apm-trust-row, .dock-trust-row{
    flex-wrap:wrap !important; justify-content:flex-start !important;
    column-gap:24px !important; row-gap:28px !important;
  }
  .apm-trust-row .apm-trust-divider,
  .dock-trust-row .apm-trust-divider{ display:none !important; }
  .apm-trust-item, .dock-trust-item{
    flex:0 0 calc((100% - 26px) / 2) !important;
    width:calc((100% - 26px) / 2) !important;
    max-width:calc((100% - 26px) / 2) !important;
        /* the original bar stacked icon ABOVE text and centered it; the Docks bar reads better with the icon beside… */
    flex-direction:row !important;
    text-align:left !important;
  }
  .apm-trust-item .elementor-heading-title{ text-align:left !important; }
}

/* ---- STACKED, PHONE (<=767) ---------------------------------------------- */
/* Two columns squeeze the longer labels to three lines on any phone, so the whole band goes one-up */
@media (max-width:767px){
  .apm-trust-row, .dock-trust-row{
    flex-wrap:wrap !important; justify-content:flex-start !important;
    column-gap:0 !important; row-gap:24px !important;
  }
  .apm-trust-row .apm-trust-divider,
  .dock-trust-row .apm-trust-divider{ display:none !important; }
  .apm-trust-item, .dock-trust-item{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    flex-direction:row !important; text-align:left !important;
  }
  .apm-trust-item .elementor-heading-title{ text-align:left !important; }
}

/* ---- Two-up on a phone when the items are one line ---- */
@media (max-width:767px){
  .apm-trust-row:not(:has(.trust-sub)),
  .dock-trust-row:not(:has(.trust-sub)){
    column-gap:16px !important; row-gap:22px !important;
    align-items:stretch !important;
  }
  .apm-trust-row:not(:has(.trust-sub)) .apm-trust-item,
  .apm-trust-row:not(:has(.trust-sub)) .dock-trust-item,
  .dock-trust-row:not(:has(.trust-sub)) .apm-trust-item,
  .dock-trust-row:not(:has(.trust-sub)) .dock-trust-item{
    flex:0 0 calc((100% - 16px) / 2) !important;
    width:calc((100% - 16px) / 2) !important;
    max-width:calc((100% - 16px) / 2) !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }
}

/* ---- Gold band height on a phone ---- */
@media (max-width:767px){
  .apm-trust-bar{ padding-top:24px !important; padding-bottom:24px !important; }
  .about-statbar{ padding-top:22px !important; padding-bottom:22px !important; }
  .co-stats{ align-items:flex-start !important; row-gap:20px !important; }
}

/* ---- Tablet landscape: one row ---- */
@media (min-width:1025px) and (max-width:1366px){
  .apm-trust-row.apm-trust-row{
    flex-wrap:nowrap !important; justify-content:space-between !important;
    column-gap:clamp(12px, 1.2vw, 16px) !important;
  }
  .apm-trust-row .apm-trust-divider{ display:block !important; }
  .apm-trust-row .apm-trust-item{
    flex:0 1 auto !important; width:auto !important; max-width:none !important;
    min-width:0 !important;
  }
  .apm-trust-bar{ padding:16px clamp(24px, 4vw, 54px) !important; }
  .apm-trust-row .trust-lead{ font-size:13px !important; line-height:1.25 !important; }
}

/* ---- Co-stats bar (interior hero strip, on navy) ---- */
.co-stat-num{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400; font-size:28px; line-height:1;
  color:var(--e-global-color-0c26593);
}
.co-stat-label{
  font-family:"Lato 500",sans-serif;
  font-weight:500; font-size:16px; line-height:1.25;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--e-global-color-0c26593);
}
.co-stat-rule{
  width:1px !important;
  height:47px;
  min-height:0;
  align-self:center;
  padding:0 !important;            /* kill Elementor's default 10px container padding */
  border-radius:0;
  background:rgba(255,255,255,.22);
}

/* Elementor makes nested containers width:100%, which forces each stat onto its own row — pin the cells to content… */
.co-stats{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; }
.co-stats > *{ width:auto !important; }
.co-stats > .co-stat-rule{ width:1px !important; }
@media (max-width:767px){
  .co-stat-rule{ display:none; }
  .co-stats > *:not(.co-stat-rule){ width:44% !important; }  /* 2×2 on phones */
}

/* ---- Tablet landscape: one row ---- */
@media (min-width:1025px) and (max-width:1366px){
  .co-stats:not(.about-statbar *){
    flex-wrap:nowrap !important;
    column-gap:16px !important;
    padding-left:clamp(24px, 4vw, 110px) !important;
    padding-right:clamp(24px, 4vw, 110px) !important;
  }
}

/* ---- Product stat rows ---- */
.stat-num{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:1;
  color:var(--e-global-color-0c26593);       /* Pure White — dark sections */
}
.stat-num.is-blue{ color:var(--e-global-color-secondary); }    /* light sections */

.stat-label{
  font-family:"Lato 500",sans-serif;
  font-weight:500;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.045em;
  color:var(--e-global-color-accent);         /* Sunshine — dark sections */
}
.stat-label.is-navy{ color:var(--e-global-color-primary); }    /* light sections */

/* ---- 4ocean impact stat ---- */
.stat-impact{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:40px;
  line-height:1;
  color:var(--e-global-color-secondary);
}
.stat-impact-label{
  font-family:"Lato 800",sans-serif;
  font-weight:800;
  font-size:13px;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--e-global-color-63af1b4);        /* Sandy Lagoon */
}

/* ---- Tablet landscape: badge | copy | stat on one row ---- */
@media (min-width:1025px) and (max-width:1366px){
  .e-con:has(> .e-con > .stat-impact){
    flex-wrap:nowrap !important;
    padding-left:var(--dock-gut) !important; padding-right:var(--dock-gut) !important;
    column-gap:32px !important;
  }
  .e-con:has(> .e-con > .stat-impact) > .elementor-widget-text-editor{
    flex:1 1 0 !important; width:auto !important; max-width:540px !important;
    min-width:0 !important;
  }
  .e-con:has(> .e-con > .stat-impact) > *{ flex-shrink:0; }
}

/* ===========================================================================
   11. SHARED — PARTNER LOCKUP
=========================================================================== */
/* IN FLOW, NOT ABSOLUTE — corrected 2026-09-03 */
:root{
  --hero-cta-h:48px;                  /* Theme Style button: 14 + 20 + 14 */
    /* Sized against the 4Ocean lockup on the home page, which the client uses as the reference: */
  --hero-logo-h:clamp(72px, 7vw, 128px);
}

.hero-partner{
  position:static !important;
  align-self:flex-end;
  width:auto !important;
  height:var(--hero-logo-h) !important;   /* lock it to the image, see below */
  margin-top:calc(-1 * (var(--hero-cta-h) + var(--hero-logo-h)) / 2) !important;
  z-index:2;
}
/* The height lock is load-bearing, not tidiness */

.hero-partner img,
.hero-partner .elementor-icon svg{
  height:var(--hero-logo-h) !important;
  width:auto !important;
  display:block !important;
  margin-inline:0 !important;
  max-width:100%;
}
.hero-partner .elementor-icon{ line-height:0; }

/* Below desktop the CTAs stack, so the row is no longer one button tall and the negative pull would drag the mark over… */
@media (max-width:1024px){
  .hero-partner{
    align-self:flex-start;
    height:auto !important;
    margin-top:40px !important;
    width:100% !important;
  }
}

/* ===========================================================================
   12. VIDEO LIGHTBOX (ELEMENTOR)
=========================================================================== */

/* Click beside the video to close. The container carries prevent-close across
   the full overlay width, so the strips either side swallow the click. */
.elementor-lightbox .elementor-video-container{ pointer-events:none; }
.elementor-lightbox .elementor-video-wrapper{ pointer-events:auto; }

/* ===========================================================================
   13. FLOATING CONTACT CTA
   Markup: HTML widget in the Footer template (apm-cta-fab.html).
   Behavior: "Floating Contact CTA" snippet, Custom Code, Body End.
   Native dialog, so the browser gives us Esc, focus trapping and top-layer
   stacking — no z-index war with the sticky header, off-canvas, Elfsight or
   the CoverFlow lightbox.
=========================================================================== */
/* TOKENS GO ON body, NOT :root. The kit globals are declared on
   body.elementor-kit-19, so a :root token referencing one resolves to nothing
   and the fill goes transparent. */
body{
  --apm-fab-size:60px;
  --apm-fab-gap:20px;
  --apm-fab-inset:4px;
  /* "Text Kyle" pill: white pill, navy label, Sunshine dot with a navy mark.
     White clears every ground the pill crosses; the hairline and shadow hold
     its edge on the white bands. Navy on white 10.99:1, on Sunshine 5.69:1. */
  --apm-fab-bg:var(--e-global-color-0c26593);
  --apm-fab-ink:var(--e-global-color-primary);
  --apm-fab-dot:var(--e-global-color-accent);
  --apm-fab-dot-ink:var(--e-global-color-primary);
  --apm-fab-label:14px;
}
@media (max-width:767px){
  body{ --apm-fab-size:54px; --apm-fab-gap:16px; --apm-fab-label:13px; }
}

.apm-fab-wrap{ position:static; }

/* Every state is declared because the kit styles `button:hover, button:focus`
   at (0,2,1) — a base rule alone loses the moment the button takes focus. */
.apm-fab.apm-fab{
  position:fixed;
  left:calc(var(--apm-fab-gap) + env(safe-area-inset-left));
  bottom:calc(var(--apm-fab-gap) + env(safe-area-inset-bottom));
  z-index:998;
  width:auto; min-width:0; height:var(--apm-fab-size);
  display:inline-flex; align-items:center; gap:14px;
  padding:0 var(--apm-fab-inset) 0 24px;
  border:1px solid rgba(24,63,94,.12); border-radius:999px;
  background:var(--apm-fab-bg);
  color:var(--apm-fab-ink);
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:var(--apm-fab-label); line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
/* Declared on every state: the kit's button:focus rule owns box-shadow. */
.apm-fab.apm-fab,
.apm-fab.apm-fab:hover,
.apm-fab.apm-fab:focus,
.apm-fab.apm-fab:focus-visible,
.apm-fab.apm-fab:active{
  box-shadow:0 6px 20px rgba(24,63,94,.30);
}
/* Mouse focus looks like rest; keyboard focus gets the hover look plus an outline. */
.apm-fab.apm-fab:focus{
  background:var(--apm-fab-bg);
  color:var(--apm-fab-ink);
}
.apm-fab.apm-fab:hover,
.apm-fab.apm-fab:focus-visible,
.apm-fab.apm-fab:active{
  background:var(--e-global-color-primary);
  color:var(--e-global-color-0c26593);               /* white on navy, 10.99:1 */
}
.apm-fab.apm-fab:hover,
.apm-fab.apm-fab:focus-visible{ border-color:rgba(255,255,255,.55); }   /* edge on the navy bands */
.apm-fab.apm-fab:hover{ transform:translateY(-2px); }
.apm-fab.apm-fab:focus-visible{
  outline:3px solid var(--e-global-color-secondary);
  outline-offset:3px;
}
.apm-fab-label{ display:block; padding-top:1px; }

/* The dot keeps its colors in every state, so the icon never moves or flashes.
   fill is set in CSS: the SVG's fill attribute has zero specificity. */
.apm-fab-icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:calc(var(--apm-fab-size) - var(--apm-fab-inset) * 2);
  height:calc(var(--apm-fab-size) - var(--apm-fab-inset) * 2);
  border-radius:50%;
  background:var(--apm-fab-dot);
  color:var(--apm-fab-dot-ink);
  line-height:0;
}
.apm-fab .apm-fab-icon svg{ fill:currentColor; width:20px; height:25px; }
@media (max-width:767px){
  .apm-fab .apm-fab-icon svg{ width:18px; height:22px; }
}

/* Phones put it under the right thumb and clear of the Android back gesture. */
@media (max-width:767px){
  .apm-fab.apm-fab{
    left:auto;
    right:calc(var(--apm-fab-gap) + env(safe-area-inset-right));
  }
}

/* Space at the foot of the footer so the button stops covering the copyright. */
@media (max-width:767px){
  .elementor-location-footer{
    padding-bottom:calc(var(--apm-fab-size) + var(--apm-fab-gap));
  }
}

.apm-fab-wrap[hidden]{ display:none !important; }

/* Hidden until scrolled past the hero, and while anything the button must not
   cover is in the bottom band of the screen. visibility, not opacity alone —
   an invisible button must leave the tab order too. */
/* The last four cover the off-canvas menu. Not z-index: the dialog opens in
   the top layer, which no z-index can sit above, so the widget has to leave
   rather than go behind. Each .elementor-kit-19 only matches while a menu is open. */
.apm-fab-wrap:not(.is-ready) .apm-fab,
.apm-fab-wrap.is-blocked .apm-fab,
body:has(.e-off-canvas[aria-hidden="false"]) .apm-fab,
body:has(.e-off-canvas--open) .apm-fab,
body:has(.elementor-menu-toggle[aria-expanded="true"]) .apm-fab,
body:has(.elementor-menu-toggle.elementor-active) .apm-fab{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* ---- the dialog: anchored above the button, not centered ------------------
   It belongs to the button, so it opens from it. Centering a panel this small
   makes the eye travel to the middle and back. */
.apm-fab-dialog.apm-fab-dialog{
  position:fixed;
  inset:auto auto
    calc(var(--apm-fab-size) + var(--apm-fab-gap) * 2 + env(safe-area-inset-bottom))
    calc(var(--apm-fab-gap) + env(safe-area-inset-left));
  margin:0;
  width:min(360px, calc(100vw - var(--apm-fab-gap) * 2));
  padding:28px 30px 30px;
  border:0; border-radius:6px;
  background:var(--e-global-color-893ac00);          /* Creamy Foam */
  color:var(--e-global-color-primary);
  box-shadow:0 24px 60px rgba(24,63,94,.35);
  text-align:left;
}
.apm-fab-dialog::backdrop{ background:rgba(24,63,94,.72); }
@media (max-width:767px){
  .apm-fab-dialog.apm-fab-dialog{
    inset:auto
      calc(var(--apm-fab-gap) + env(safe-area-inset-right))
      calc(var(--apm-fab-size) + var(--apm-fab-gap) * 2 + env(safe-area-inset-bottom))
      auto;
  }
}

/* Plain X. No fill, no border, no pill — the kit would give it all three, on
   rest AND on hover/focus. */
.apm-fab-close.apm-fab-close,
.apm-fab-close.apm-fab-close:hover,
.apm-fab-close.apm-fab-close:focus,
.apm-fab-close.apm-fab-close:focus-visible,
.apm-fab-close.apm-fab-close:active{
  position:absolute; top:8px; right:8px;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:0; min-height:0;
  padding:0;
  border:0; border-radius:0; box-shadow:none;
  background:transparent; background-color:transparent;
  line-height:0;
  cursor:pointer;
}
/* Navy at rest, Mid Ship on hover — 8.96:1 and 4.23:1 on Creamy Foam. fill is
   set alongside color because something upstream was painting the X gold. */
.apm-fab-close.apm-fab-close,
.apm-fab-close.apm-fab-close:focus,
.apm-fab-close.apm-fab-close:active{ color:var(--e-global-color-primary); }
.apm-fab-close.apm-fab-close:hover,
.apm-fab-close.apm-fab-close:focus-visible{ color:var(--e-global-color-secondary); }
.apm-fab-close.apm-fab-close svg,
.apm-fab-close.apm-fab-close:hover svg,
.apm-fab-close.apm-fab-close:focus svg,
.apm-fab-close.apm-fab-close:focus-visible svg,
.apm-fab-close.apm-fab-close:active svg{ fill:currentColor; }
.apm-fab-close.apm-fab-close:focus-visible{
  outline:2px solid var(--e-global-color-secondary); outline-offset:-4px;
}

/* Optional wordmark. max-width keeps it clear of the close button. */
/* Sized by WIDTH, not height — the lockup is two lines, so a height that suits
   one wordmark makes another far too wide. 200px ≈ the phone number below. */
.apm-fab-dialog .apm-fab-logo.apm-fab-logo{
  display:block;
  width:200px; height:auto; max-width:calc(100% - 44px);
  margin:0 0 18px;
}
@media (max-width:767px){
  .apm-fab-dialog .apm-fab-logo.apm-fab-logo{ width:175px; }
}

.apm-fab-title{
  font-family:"Special Gothic Expanded One",sans-serif; font-weight:400;
  font-size:20px; line-height:1.2;
  color:var(--e-global-color-primary);
  margin:0 0 10px;
}
/* fit-content shrinks the link to the digits. No flex needed — the dialog is a
   block, and a block box with fit-content is shrink-to-fit by definition. */
.apm-fab-number{
  display:block;
  width:-webkit-fit-content; width:fit-content;
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:24px; line-height:1.1; letter-spacing:.01em;
  color:var(--e-global-color-secondary);
  text-decoration:none;
  margin:0 0 22px;
}
.apm-fab-number:hover{ color:var(--e-global-color-primary); }

.apm-fab-actions{ display:flex; gap:12px; }
.apm-fab-btn{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px;
  border-radius:70px;
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.apm-fab-btn.is-gold{
  background:var(--e-global-color-accent);
  color:var(--e-global-color-primary);
}
.apm-fab-btn.is-gold:hover{
  background:var(--e-global-color-primary);
  color:var(--e-global-color-0c26593);
}
.apm-fab-btn.is-ghost{
  background:transparent;
  border:2px solid var(--e-global-color-secondary);
  color:var(--e-global-color-secondary);
}
.apm-fab-btn.is-ghost:hover{
  background:var(--e-global-color-secondary);
  color:var(--e-global-color-0c26593);
}

/* Dismiss link. Every state declared so the kit cannot pill it. Navy at rest
   (8.96:1 on Creamy Foam) because 13px is small text, not large. */
.apm-fab-hide.apm-fab-hide,
.apm-fab-hide.apm-fab-hide:hover,
.apm-fab-hide.apm-fab-hide:focus,
.apm-fab-hide.apm-fab-hide:focus-visible,
.apm-fab-hide.apm-fab-hide:active{
  display:block;
  width:auto; min-width:0; min-height:0;
  margin:18px 0 0; padding:0;
  border:0; border-radius:0; box-shadow:none;
  background:transparent; background-color:transparent;
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:13px; letter-spacing:0; text-transform:none;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.apm-fab-hide.apm-fab-hide{ color:var(--e-global-color-primary); }
.apm-fab-hide.apm-fab-hide:hover,
.apm-fab-hide.apm-fab-hide:focus-visible{ color:var(--e-global-color-secondary); }
.apm-fab-hide.apm-fab-hide:focus-visible{
  outline:2px solid var(--e-global-color-secondary); outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .apm-fab.apm-fab{ transition:none; }
  .apm-fab.apm-fab:hover{ transform:none; }
  .apm-fab-wrap:not(.is-ready) .apm-fab,
  .apm-fab-wrap.is-blocked .apm-fab,
  body:has(.e-off-canvas[aria-hidden="false"]) .apm-fab,
  body:has(.e-off-canvas--open) .apm-fab,
  body:has(.elementor-menu-toggle[aria-expanded="true"]) .apm-fab,
  body:has(.elementor-menu-toggle.elementor-active) .apm-fab{
    transition:none; transform:none;
  }
}

/* The editor renders the dialog inline; keep it out of the canvas flow. */
body.elementor-editor-active .apm-fab-dialog:not([open]){ display:none; }

@media print{ .apm-fab, .apm-fab-dialog{ display:none !important; } }


/* ===========================================================================
   14. PLUGIN ONE-OFFS
=========================================================================== */

/* ---- Elfsight popup buttons — the kit's global button style paints them gold ----
   The FAB is excluded so it can never be caught if its markup moves out of the footer. */
:where([class*="elfsight"], [class*="eapps"], body > div:not([class*="elementor"]):not(#wpadminbar)) button:not(.elementor-button):not(.gform_button):not([class*="apm-fab"]),
:where([class*="elfsight"], [class*="eapps"], body > div:not([class*="elementor"]):not(#wpadminbar)) button:not(.elementor-button):not(.gform_button):not([class*="apm-fab"]):hover,
:where([class*="elfsight"], [class*="eapps"], body > div:not([class*="elementor"]):not(#wpadminbar)) button:not(.elementor-button):not(.gform_button):not([class*="apm-fab"]):focus{
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* ---- KISS CoverFlow Slider ---- */
.elementor-widget-kiss_coverflow .kiss-coverflow {
  --kiss-accent:           var(--e-global-color-accent);
  --kiss-tab-idle:         var(--e-global-color-63af1b4);
  --kiss-tab-idle-opacity: 1;
  --kiss-tab-active:       var(--e-global-color-accent);
  --kiss-tab-rule-h:       0;              /* comp has no active underline */
  --kiss-tab-gap-x:        88px;
  --kiss-tabs-mb:          91px;
  --kiss-surface:          var(--e-global-color-primary);
  --kiss-radius:           43px;
  --kiss-shadow:           4px 4px 10px 6px rgba(0, 0, 0, .25);
  --kiss-idle-opacity:     1;              /* dimming is the scrim below, not opacity */
  --kiss-focus:            var(--e-global-color-accent);
}

/* Placeholder for the CoverFlow widget on the boat-lift detail page */
.gallery-slot{ min-height:546px; }
@media (max-width:1024px){ .gallery-slot{ min-height:380px; } }
@media (max-width:767px){  .gallery-slot{ min-height:260px; } }

/* Heading block sits on the 140px comp margin; the slider stays full-bleed. */
.gallery-head{ margin-bottom:64px; }
@media (max-width:767px){ .gallery-head{ margin-bottom:40px; } }

/* Tabs align with the heading while the slider stays full-bleed. */
.elementor-widget-kiss_coverflow .kiss-filters {
  padding-inline-start: 8.6vw;             /* 149 / 1728 */
}

/* Text-only tabs per the comp — strip the plugin's default pill */
.elementor-widget-kiss_coverflow .kiss-filter {
  font-family: "Lato 800", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: normal;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--kiss-tab-idle) !important;                 /* teal, inactive */
  transition: color .2s ease;
  cursor: pointer;
}
.elementor-widget-kiss_coverflow .kiss-filter.is-active,
.elementor-widget-kiss_coverflow .kiss-filter[aria-selected="true"],
.elementor-widget-kiss_coverflow .kiss-filter[aria-pressed="true"],
.elementor-widget-kiss_coverflow .kiss-filter:hover {
  color: var(--kiss-tab-active) !important;               /* sunshine, active */
}

/* No white card behind the slide — comp is photo + radius + shadow only. */
.elementor-widget-kiss_coverflow .kiss-frame {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Figma dims neighbours with a 60% #1e1e1e scrim, not lowered opacity. */
.elementor-widget-kiss_coverflow .kiss-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(30, 30, 30, .6);
  pointer-events: none;
  transition: opacity .4s ease;
}
.elementor-widget-kiss_coverflow .swiper-slide-active .kiss-frame::after { opacity: 0; }

@media (max-width: 1024px) {
  .elementor-widget-kiss_coverflow .kiss-coverflow {
    --kiss-tab-gap-x: 40px;
    --kiss-tabs-mb:   56px;
  }
}
@media (max-width: 767px) {
  .elementor-widget-kiss_coverflow .kiss-coverflow {
    --kiss-tab-gap-x: 20px;
    --kiss-tabs-mb:   32px;
    --kiss-radius:    24px;
  }
  .elementor-widget-kiss_coverflow .kiss-filters { padding-inline-start: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-widget-kiss_coverflow .kiss-frame::after { transition: none; }
}

/* ---- KISS 3D viewer section ---- */
.threed-stage{ min-height:min(420px, 50vh); }   /* PRE-LOAD FLOOR ONLY. The widget sets its own height once it renders, so this must not reserve more than the canvas… */
@media (max-width:1024px){ .threed-stage{ min-height:620px; } }
@media (max-width:767px){  .threed-stage{ min-height:420px; } }

/* ===========================================================================
   15. HOME
=========================================================================== */

/* ---- Installed-for-life promise bar ---- */
.promise-lead{
  font-family:"Lato 800",sans-serif;
  font-weight:800;
  font-size:24px;
  line-height:28px;
  text-transform:uppercase;
  color:var(--e-global-color-0c26593);
}
.promise-sub{
  font-family:"Lato 500",sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:28px;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--e-global-color-0c26593);
}
/* BOTH LINES ARE HEADING WIDGETS */
.promise-lead .elementor-heading-title{ line-height:28px; }
.promise-sub  .elementor-heading-title{ line-height:28px; }

@media (max-width:767px){
  .promise-lead{ font-size:19px; line-height:24px; }
  .promise-sub { font-size:14px; line-height:22px; }
  .promise-lead .elementor-heading-title{ line-height:24px; }
  .promise-sub  .elementor-heading-title{ line-height:22px; }
}

/* ---- Installed For Life band ---- */
@media (max-width:1024px){
  .ifl-section::before{
    background-image:linear-gradient(180deg,
      var(--e-global-color-893ac00) 0%, #F3E7CE70 70%) !important;
  }
}

/* The eyebrow is a Heading widget too, so a bare `.ifl-copy .elementor-heading-title` catches it — that is what blew… */
@media (max-width:767px){
  .ifl-copy .elementor-widget-heading:not(.eyebrow) .elementor-heading-title{
    font-size:clamp(28px, 8.4vw, 38px) !important;   /* comp H2 is 60/58 */
    line-height:.97 !important;
  }
}

/* Comp body: Lato Medium 16/28. The Text Editor has no class of its own. */
.ifl-copy .elementor-widget-text-editor p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px; color:var(--e-global-color-text);
}
@media (max-width:767px){
  .ifl-copy .elementor-widget-text-editor p{ line-height:26px; }
}

/* ---- the promise card ---------------------------------------------------- */
/* Comp height only. Padding, gaps and alignment are the editor's. */
@media (min-width:1025px){ .ifl-promise{ min-height:175px; } }
.ifl-promise img, .ifl-promise .elementor-icon svg{ display:block; }

/* THE CLIPPING: the editor switches the card to a column at MOBILE only, but at 768 the row cannot hold icon 38 + copy… */
@media (max-width:1024px){
  .ifl-promise{
    flex-direction:column !important;
    align-items:flex-start !important;
    height:auto !important; min-height:0 !important;
  }
  .ifl-promise-copy{ width:100% !important; }
  .ifl-promise .elementor-widget-button,
  .ifl-promise .elementor-button{ width:100% !important; }
}

/* 320px: the global .elementor-button{white-space:nowrap} makes this 23-character label 310px wide inside a 272px card… */
@media (max-width:374px){
  .ifl-promise .elementor-button{ font-size:14px !important; padding-inline:20px !important; }
}

/* ===========================================================================
   16. BOAT LIFTS
=========================================================================== */

/* ---- Detail page hero (Elevator, 4-Post, 8-Post, Jet Ski) ----------------
   Comp 1728x1028, copy at x148. The photo and the navy-to-Mid-Ship gradient
   are both set on the section in the template, not here. */
:root{ --lift-gut:clamp(24px, 8.57vw, 148px); }   /* 148 at the 1728 comp */

.lift-hero{ padding-inline:var(--lift-gut); }
.lift-hero-copy{ max-width:684px; }
.lift-hero-copy .eyebrow:not(.txt-link){ margin-bottom:13px !important; }
.lift-hero-h1 .elementor-heading-title{ line-height:.92em; }
.lift-hero-h1{ margin-bottom:26px !important; }
/* Lato Regular in the comp; 500 is the closest weight the site loads. */
.lift-hero-spec{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:22px; line-height:31px; text-transform:uppercase;
  margin-bottom:26px !important;
}
.lift-hero-body{ max-width:544px !important; margin-bottom:66px !important; }

@media (max-width:1024px){
  .lift-hero-body{ max-width:none !important; margin-bottom:48px !important; }
}
@media (max-width:767px){
  .lift-hero-spec{ font-size:18px; line-height:26px; }
  .lift-hero-body{ margin-bottom:40px !important; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety
   Nets group. */
.lift-hero, .lift-hero-copy{ display:flex; flex-direction:column; }

/* ---- Lift hero photo and scrim (client photo swaps, 2026-10-15) -----------
   The client's photos carry custom positions and sizes per device, which is
   what left a pale band down the right on tablet. Every hero is cover, no
   repeat, never fixed. The focal point is a percentage, set per page through
   --hero-x / --hero-y (defaults: center), never a pixel offset. */
.lift-hero.lift-hero{
  --hero-x:50%; --hero-y:50%;
  background-size:cover !important;
  background-position:var(--hero-x) var(--hero-y) !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll !important;
}
/* Per-page focal points, measured on the client's photos. Add the page's
   class next to lift-hero. Desktop crops top and bottom, so x only matters
   below 1025; y keeps the boat in frame on wide screens. */
.lift-hero.hero-elevator{ --hero-x:70%; --hero-y:50%; }
.lift-hero.hero-4post{    --hero-x:55%; --hero-y:60%; }
.lift-hero.hero-8post{    --hero-x:53%; --hero-y:50%; }

/* The AD's hero overlay was navy into Mid Ship at 28% (#0071B747), left to
   right. Same idea here, but the navy is held behind the copy column in px,
   not %, so body text (to gut + 544) always sits under 80% navy: 6.1:1 white
   even over a white photo. The photo side keeps a light brand tint instead
   of going bare. Written over Elementor's own overlay layer, so the editor
   setting no longer matters. */
.lift-hero.lift-hero::before,
.lift-hero.lift-hero > .elementor-background-overlay{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  background-color:transparent !important;
  background-image:linear-gradient(90deg,
    rgba(24,63,94,.86) 0,
    rgba(24,63,94,.80) calc(var(--lift-gut) + 560px),
    rgba(0,113,183,.28) calc(var(--lift-gut) + 1100px),
    rgba(0,113,183,.28) 100%) !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  pointer-events:none;
}
/* Below desktop the copy runs the full width, so the scrim turns vertical:
   lighter at the top where the photo shows, darkest behind the body and CTA. */
@media (max-width:1024px){
  .lift-hero.lift-hero::before,
  .lift-hero.lift-hero > .elementor-background-overlay{
    background-image:linear-gradient(180deg,
      rgba(0,113,183,.28) 0%,
      rgba(24,63,94,.72) 38%,
      rgba(24,63,94,.84) 70%,
      rgba(24,63,94,.88) 100%) !important;
  }
}

/* ---- Fleet section media tiles ---- */
.fleet-img{ width:100% !important; align-self:stretch !important; }
.fleet-img img{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  object-fit:cover; object-position:center;
  border-radius:0;
}

/* Brand-reel video tile — navy scrim + gold play disc, opens the Elementor lightbox */
.fleet-video .elementor-wrapper,
.fleet-video .elementor-custom-embed-image-overlay{ border-radius:0; overflow:hidden; }
.fleet-video .elementor-custom-embed-image-overlay{ position:relative; }
.fleet-video .elementor-custom-embed-image-overlay::before{
  content:""; position:absolute; inset:0;
  background:rgba(24,63,94,.5); transition:opacity .3s ease; pointer-events:none;
}
.fleet-video .elementor-custom-embed-image-overlay:hover::before{ opacity:.72; }

/* Play button drawn entirely in CSS — Elementor's cut-SVG import is flaky and gives no size control */
.fleet-video .elementor-custom-embed-play i,
.fleet-video .elementor-custom-embed-play svg{ opacity:0 !important; }
.fleet-video .elementor-custom-embed-play::before{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  background:var(--e-global-color-accent);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.22));
  transition:transform .25s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M26 0A26 26 0 1 0 26 52 26 26 0 0 0 26 0Z M21 17 L37 26 L21 35 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M26 0A26 26 0 1 0 26 52 26 26 0 0 0 26 0Z M21 17 L37 26 L21 35 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fleet-video .elementor-custom-embed-play:hover::before{
  transform:translate(-50%,-50%) scale(1.08);
}

/* ---- Fleet tiles — calc() grid so the 3 tiles never wrap ---- */
.fleet-tiles{ column-gap:24px !important; row-gap:44px !important; }
.fleet-tiles > *{
  flex:0 0 calc((100% - 48px) / 3) !important;
  width:calc((100% - 48px) / 3) !important;
  max-width:calc((100% - 48px) / 3) !important;
}
@media (max-width:767px){
  .fleet-tiles{ row-gap:28px !important; }
  .fleet-tiles > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
  .fleet-tiles .elementor-widget-text-editor p{ margin:0 !important; }
}

/* ---- White-Glove step title + icon ---- */
.step-title .elementor-heading-title{
  font-size:20px !important;
  line-height:1.15 !important;
  text-transform:none !important;
}

/* Step icons as SVG-in-Image — Elementor's Icon-widget SVG mode crashes the editor with cut SVGs */
.wg-icon{ text-align:left !important; }
.wg-icon img{ width:28px; height:auto; display:block !important; margin-inline:0 !important; }

/* ---- White-Glove layout ---- */
.wg-steps{ column-gap:48px !important; row-gap:52px !important; }
.wg-steps > *{                                   /* desktop: 3-across (2 gaps) */
  flex:0 0 calc((100% - 96px) / 3) !important;
  width:calc((100% - 96px) / 3) !important;
  max-width:calc((100% - 96px) / 3) !important;
}
@media (max-width:1024px){                        /* tablet: 2-across, roomy copy */
  .wg-steps{ column-gap:40px !important; row-gap:44px !important; }
  .wg-steps > *{
    flex:0 0 calc((100% - 40px) / 2) !important;
    width:calc((100% - 40px) / 2) !important;
    max-width:calc((100% - 40px) / 2) !important;
  }
}
@media (max-width:767px){                         /* mobile: single column */
  .wg-steps{ row-gap:24px !important; }
  .wg-steps > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    row-gap:8px !important;                       /* icon → title → copy */
  }
  .wg-steps .elementor-widget-text-editor p{ margin:0 !important; }
  /* The bleed photo is dropped below 768px, so the reserved space goes too. */
  .wg-section{ padding-bottom:56px !important; }
}

/* The bottom bleed photo crops to a pixelated vertical slice at phone width and destroys contrast under the copy */
@media (max-width:767px){
  .wg-section{ background-image:none !important; }
  .wg-section > .elementor-background-overlay{
    opacity:1 !important; background:var(--e-global-color-0c26593) !important;
  }
}

/* ---- Tablet landscape: White-Glove 3 across ---- */
@media (min-width:1025px) and (max-width:1366px){
  .wg-section > .e-con:has(> .e-con:nth-child(6):last-child){
    flex-wrap:wrap !important; column-gap:40px !important; row-gap:48px !important;
  }
  .wg-section > .e-con:has(> .e-con:nth-child(6):last-child) > .e-con{
    flex:0 0 calc((100% - 80px) / 3) !important;
    width:calc((100% - 80px) / 3) !important;
    max-width:calc((100% - 80px) / 3) !important;
  }
}

/* ---- Lambo Lift featured project ---- */
.lambo-section{ background-color:var(--e-global-color-primary); }

/* 3-across calc grid, 2 rows of 3. Class: lambo-specs */
.lambo-specs{ column-gap:24px !important; row-gap:26px !important; }
.lambo-specs > *{
  flex:0 0 calc((100% - 48px) / 3) !important;
  width:calc((100% - 48px) / 3) !important;
  max-width:calc((100% - 48px) / 3) !important;
}
@media (max-width:767px){
  .lambo-specs{ column-gap:16px !important; }
  .lambo-specs > *{
    flex:0 0 calc((100% - 16px) / 2) !important;   /* phones: 2-across */
    width:calc((100% - 16px) / 2) !important;
    max-width:calc((100% - 16px) / 2) !important;
  }
}

/* Hairline under the description (semi-transparent rgba is the allowed case). */
.lambo-rule{
  height:1px !important; width:100% !important;
  background:rgba(255,255,255,.22) !important;
  padding:0 !important; margin:6px 0 !important;
}

/* Pull-quote + attribution. Classes: lambo-quote / lambo-cite */
.lambo-quote .elementor-heading-title,
.lambo-quote{
  font-family:"Lato 500",sans-serif; font-weight:500; font-style:italic;
  font-size:20px; line-height:1.4;
  color:var(--e-global-color-0c26593);
}
.lambo-cite{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:16px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--e-global-color-accent);
}

/* ---- Product spec sections ---- */
.prod-media{ min-height:640px; background-size:cover; background-position:center; }

/* THE PANEL CHANGES SHAPE TOO MUCH — that is the "too zoomed in" on tablet */
@media (max-width:1024px){ .prod-media{ min-height:0; aspect-ratio:4/3; } }

.spec-rule{
  flex:1 1 auto !important; height:1px !important;
  background:var(--e-global-color-accent) !important; padding:0 !important;
  margin-left:16px !important;
}

/* No border-top on .spec-table — .spec-line's bottom border draws every rule */
.spec-line{ border-bottom:1px solid var(--e-global-color-secondary); }
.spec-key{ flex:0 0 42% !important; max-width:42% !important; }
.spec-val{ flex:0 0 58% !important; max-width:58% !important; }
.spec-key .elementor-heading-title{
  font-family:"Lato 500",sans-serif; font-weight:500; font-size:16px;
  line-height:1.45; text-transform:uppercase; color:var(--e-global-color-text);
}
.spec-val .elementor-heading-title{
  font-family:"Lato 800",sans-serif; font-weight:800; font-size:16px;
  line-height:1.45; color:var(--e-global-color-text);
}

/* Accent background from Theme Style, white label per the comp. Class: btn-white */
.btn-white .elementor-button,
.btn-white .elementor-button:visited{ color:var(--e-global-color-0c26593) !important; }
.btn-white .elementor-button .elementor-button-icon svg{ fill:var(--e-global-color-0c26593) !important; }
.btn-white .elementor-button .elementor-button-icon i{ color:var(--e-global-color-0c26593) !important; }

/* ---- "Not sure?" CTA band ---- */
.notsure-ctas .elementor-button{
  display:flex; width:280px; justify-content:center;
}
@media (max-width:767px){
  .notsure-ctas .elementor-button{ width:100%; }
}


/* ---- Technical specs table ---- */
.tspec-cols{ gap:102px; }
.tspec-col{ flex:1 1 0; min-width:0; }
.tspec-col > .eyebrow{ margin-bottom:26px; }

.tspec-row{
  border-bottom:1px solid var(--e-global-color-secondary);
  gap:16px;
}
.tspec-row:last-child{ border-bottom:0; }

.tspec-k{ flex:0 0 61% !important; max-width:61% !important; }
.tspec-v{ flex:1 1 auto !important; min-width:0; }

.tspec-k .elementor-heading-title{
  font-family:"Lato 500",sans-serif; font-weight:500; font-size:16px;
  line-height:36px; color:var(--e-global-color-text);
}
.tspec-v .elementor-heading-title{
  font-family:"Lato 800",sans-serif; font-weight:800; font-size:16px;
  line-height:36px; color:var(--e-global-color-text);
}

/* Three narrow columns do not fit a tablet — stack them. */
/* Stacking is set per-breakpoint in the template (flex_direction_tablet), not here — Elementor emits its own… */
@media (max-width:1024px){
  .tspec-cols{ gap:48px; }
  .tspec-col > .eyebrow{ margin-bottom:18px; }
}

/* ---- Features — pinned background, scrolling callouts ---- */
.feat-wrap{ position:relative; }
.feat-stage{
  position:sticky; top:0;
  height:100vh;
  margin-bottom:-100vh;              /* cards ride on top, keep their own height */
  overflow:hidden; z-index:0;
}

/* NOT DOING: background-attachment:fixed to stop the photo moving as the section arrives */

/* THE AD'S SCRIM, in CSS — do not bake it into the export */
.feat-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(270deg, rgb(24,63,94) 0%, rgba(50,131,196,0) 100%);
}

/* Cards scroll normally over the pinned layer */
.feat-cards{ position:relative; z-index:1; }
.feat-card{
    /* display/direction declared here rather than relied on: */
  display:flex; flex-direction:column;
  justify-content:center !important;
  min-height:70vh; padding:80px 95px;
}
.feat-inner{ width:442px; max-width:100%; }
.feat-inner > .elementor-widget-heading + .elementor-widget-heading{ margin-top:26px; }
.feat-body{ margin:24px 0 34px; }
.feat-stats{ gap:24px; }
.feat-stat .stat-num{ margin-bottom:6px; }

/* Tablets keep the desktop column; full width reads too long. 600, not 768,
   so a Pixel Tablet at a larger display size (under 768) is included. */
@media (min-width:600px) and (max-width:1024px){
  .feat-stage::after{
    background:linear-gradient(270deg,
      rgb(24,63,94) 0%,
      rgba(24,63,94,.85) 55%,
      rgba(50,131,196,0) 100%);
  }
  .feat-card.feat-card{ padding:80px 48px; align-items:flex-end !important; }
  .feat-inner.feat-inner{ width:442px !important; max-width:100%; }
  .feat-stats.feat-stats{ flex-wrap:nowrap !important; gap:24px; }
  .feat-stats .feat-stat{ flex:1 1 0 !important; width:auto !important; min-width:0; }
}

/* Phones: the card goes full width, so the ramp turns vertical. */
@media (max-width:599px){
  .feat-stage::after{
    background:linear-gradient(180deg,
      rgba(50,131,196,0) 0%,
      rgba(24,63,94,.55) 45%,
      rgb(24,63,94) 100%);
  }
    /* CARD HEIGHT IS CONTENT-DRIVEN ON MOBILE */
  .feat-cards{ min-height:100vh; }
  .feat-card{ min-height:0; padding:56px 24px; }
  .feat-inner{ width:100%; }
  .feat-stats{ gap:12px; }
}

/* UN-GATED FROM .apm-anim 2026-09-02, matching the Docks group and 40 */

/* Reduced motion and the Elementor editor: nothing pinned, plain stacked cards. */
@media (prefers-reduced-motion: reduce){
  .feat-stage{ position:static !important; height:60vh !important; margin-bottom:0 !important; }
  .feat-card{ min-height:0 !important; padding-top:56px !important; padding-bottom:56px !important; }
}
body.elementor-editor-active .feat-stage{
  position:static !important; height:60vh !important; margin-bottom:0 !important;
}
body.elementor-editor-active .feat-card{
  min-height:0 !important; padding-top:56px !important; padding-bottom:56px !important;
}

/* ---- Mobile Service Fleet ---- */
:root{
  --svc-gut:clamp(24px, 8.1vw, 140px);
    /* Below 1025 only. The height of the photo band and where inside the photograph the window sits horizontally */
  --svc-photo-h:52vh;
  --svc-photo-x:62%;
}

/* A. HERO (spec §3) --------------------------------------------------- Frame-local y in the spec, and the gap each… */
@media (min-width:1025px){
  .svc-hero{ padding:140px var(--svc-gut) 94px; }
}
.svc-hero-copy{ max-width:600px; }
.svc-hero-copy .eyebrow:not(.txt-link){ margin-bottom:0 !important; }
.svc-hero-h2{ max-width:600px !important; margin-bottom:59px !important; }
/* 27, not the 55 this shipped with */
.svc-hero-body{ max-width:374px !important; margin-bottom:27px !important; }

/* ⚠ WIDTH ON A CONTAINER HAS TO BE FOUGHT WITH !important, ALWAYS */

/* The callout row is 515 — the same measure as the rule and the button row, so all three terminate together at 663 */
.svc-callouts{
  width:515px !important;
  max-width:100% !important;
  margin-bottom:24px;
}
.svc-callouts > *{
  flex:1 1 0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
}
/* Comp draws these as caps */
.svc-callout .stat-num,
.svc-callout .stat-num .elementor-heading-title{ text-transform:uppercase; }
.svc-callout .stat-num{ margin-bottom:16px !important; }
.svc-callout .stat-label{ letter-spacing:normal; }

.svc-rule{
  width:515px !important; max-width:100% !important;
  height:1px;
  background:rgba(255,255,255,.32);
  margin-bottom:30px;
}

/* The primary CTA's hover lives in the Buttons group as `btn-on-dark`, not here — it is a missing button variant, not a quirk… */
.svc-ctas{ align-items:center; }

/* B. CREDENTIAL STRIP (spec §4) --------------------------------------- 1728 x 97 on Sunshine: */
@media (min-width:1025px){
  .svc-creds{ padding:33px clamp(24px, 6.5vw, 112px); }
}
.svc-cred-label{
  font-family:"Lato 800",sans-serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
/* Elementor's widget CSS sets .elementor-heading-title{line-height:1} directly on the <p> and loads after ours, so the… */
.svc-cred-label .elementor-heading-title{ line-height:31px; }

/* THE ITEMS HAVE TO BE TOLD TO STOP BEING 100% WIDE */
.svc-creds-row > .svc-cred{
  flex:0 1 auto !important;
  width:auto !important;
  max-width:none !important;
}

.svc-cred-divider{
  flex:0 0 1px !important;
  width:1px !important;
  max-width:1px !important;
  height:21px;
  background:rgba(24,63,94,.35);
}

/* C. COMMON FAILURES (spec §5) ---------------------------------------- eyebrow 60 (31 box) -> headline 100 gap 9… */
@media (min-width:1025px){
  .svc-fixes{ padding:60px var(--svc-gut) 76px; }
}
.svc-fixes-head{ align-items:center !important; text-align:center; }
.svc-fixes-head .eyebrow{ margin-bottom:9px !important; }
.svc-fixes-head{ margin-bottom:69px; }

.svc-cards{
  max-width:1348px;
  margin-inline:auto;
  margin-bottom:40px;
  align-items:stretch !important;
}

/* Section CTA. Sits between the cards and the bridge line so the bridge line stays the last thing said and keeps… */
.svc-fixes-cta{ align-items:center !important; margin-bottom:36px; }
.svc-cards > *{
  flex:0 0 calc((100% - 40px) / 3) !important;
  width:calc((100% - 40px) / 3) !important;
  max-width:calc((100% - 40px) / 3) !important;
}
.svc-card{
  min-height:164px;
  border-radius:24px;
  padding:32px 28px 28px !important;
}
/* Card title is the spec's SGEO 22 */
.svc-card-title .elementor-heading-title{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:26px;
}
.svc-card-title{ margin-bottom:22px !important; }
.svc-card-body, .svc-card-body p{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:16px; line-height:28px;
}
.svc-card-body{ max-width:380px !important; }
.svc-card-body p{ margin:0; }

.svc-bridge{ text-align:center; }

/* ---- 1025-1439: the spec's middle range --------------------------------- */
@media (min-width:1025px) and (max-width:1439px){
  .svc-hero-h2 .elementor-heading-title,
  .svc-fixes-h2 .elementor-heading-title{
    font-size:48px !important; line-height:48px !important;
  }
  .svc-hero-body{ max-width:340px !important; }
  .svc-cards{ max-width:none; }
  .svc-cards > *{
    flex:0 0 calc((100% - 20px) / 2) !important;
    width:calc((100% - 20px) / 2) !important;
    max-width:calc((100% - 20px) / 2) !important;
  }
}

/* TABLET (<=1024) ------------------------------------------------------ The spec wants the photo to become a 16:9… */
@media (max-width:1024px){
    /* ⚠ `cover` + `background-position` CANNOT frame this photo on a phone, and that is worth understanding before anyone… */
  .svc-hero{
    background-color:var(--e-global-color-primary) !important;
    background-size:auto var(--svc-photo-h) !important;
    background-position:var(--svc-photo-x) top !important;
    background-repeat:no-repeat !important;
    padding-top:calc(var(--svc-photo-h) + 40px) !important;
  }
  .svc-hero::before{
    background-image:linear-gradient(180deg,
      rgba(24,63,94,0) 0,
      rgba(24,63,94,.18) calc(var(--svc-photo-h) * .55),
      rgba(24,63,94,.92) calc(var(--svc-photo-h) * .92),
      var(--e-global-color-primary) var(--svc-photo-h)) !important;
  }
  .svc-hero-copy{ max-width:none; }
  .svc-hero-h2{ max-width:none !important; }
  .svc-hero-h2 .elementor-heading-title,
  .svc-fixes-h2 .elementor-heading-title{
    font-size:40px !important; line-height:42px !important;
  }
  .svc-hero-body{ max-width:460px !important; }

    /* Buttons stack and go full width */
  .svc-ctas{ align-items:stretch; }
  .svc-ctas .elementor-widget-button{ width:100% !important; }
  .svc-ctas .elementor-button{ display:flex; width:100%; justify-content:center; }

    /* Credential strip goes 2 x 2 — four items at Lato 800 16 will not hold one row much under 1200 */
  .svc-creds-row{ justify-content:flex-start; }
  .svc-creds-row > .svc-cred{
    flex:0 0 calc(50% - 12px) !important;
    width:calc(50% - 12px) !important;
    max-width:calc(50% - 12px) !important;
  }
  .svc-cred-divider{ display:none !important; }

  .svc-fixes-head{ margin-bottom:48px; }
  .svc-cards > *{
    flex:0 0 calc((100% - 20px) / 2) !important;
    width:calc((100% - 20px) / 2) !important;
    max-width:calc((100% - 20px) / 2) !important;
  }
    /* Card height is a desktop figure */
  .svc-card{ min-height:0; }
  .svc-card-body{ max-width:none !important; }
}

/* PHONES (<=767) ------------------------------------------------------- THE CALLOUT ROW IS CALCULATED, NOT EYEBALLED */
@media (max-width:767px){
  .svc-hero-h2 .elementor-heading-title,
  .svc-fixes-h2 .elementor-heading-title{
    font-size:34px !important; line-height:36px !important;
  }
  .svc-hero-body, .svc-hero-body p{ font-size:15px; line-height:25px; }
  .svc-hero-body{ max-width:none !important; margin-bottom:40px !important; }

  .svc-callouts{ flex-wrap:nowrap !important; }
  .svc-callouts > *{
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
  }
  .svc-callout .stat-num{ margin-bottom:10px !important; }
  .svc-callout .stat-num .elementor-heading-title{
    font-size:clamp(12px, calc((100vw - 72px) / 20.3), 22px);
  }

  .svc-rule{ width:100%; margin-bottom:26px; }

  .svc-creds-row > .svc-cred{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:none !important;
  }

  .svc-fixes-head{ margin-bottom:36px; }
  .svc-cards > *{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:none !important;
  }
  .svc-cards{ margin-bottom:28px; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety Nets group */
.svc-hero, .svc-hero-copy, .svc-creds, .svc-fixes, .svc-fixes-head, .svc-card{
  display:flex; flex-direction:column;
}

/* ===========================================================================
   17. DOCKS
=========================================================================== */

/* ---- Pinned-photo sections (testimonials) ---- */
/* --- the pin ------------------------------------------------------------- */
.dock-pin-wrap{ position:relative; }
/* Un-gated for the same reason as the Docks group — .apm-anim is absent in the template-library preview and the pin… */
.dock-pin-stage{
  position:sticky; top:0;
  height:100vh;
  margin-bottom:-100vh;                    /* copy rides over, keeps its height */
  overflow:hidden; z-index:0;
}
.dock-pin-cards{ position:relative; z-index:1; }
.dock-pin-card{ min-height:100vh; }

/* Scrims live here, never baked into the export — the copy moves with the viewport so the ramp must too, and mobile… */
.dock-overview .dock-pin-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(270deg, rgb(24,63,94) 0%, rgba(0,157,176,.2) 100%);
}
.dock-testimonials .dock-pin-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:rgba(24,63,94,.8);
}
@media (max-width:1024px){
  .dock-overview .dock-pin-stage::after{
    background:linear-gradient(180deg,
      rgba(0,157,176,.2) 0%, rgba(24,63,94,.55) 45%, rgb(24,63,94) 100%);
  }
}

/* --- Built From The Inside Out — copy column, right side ------------------ */
.dock-overview .dock-pin-card{
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 clamp(48px,8.1vw,140px);
}
.dock-overview-inner{ width:442px; max-width:100%; }
.dock-overview-inner .eyebrow:not(.txt-link){ margin-bottom:18px; }
.dock-overview-body{ margin:26px 0 31px; }
.dock-overview-inner .elementor-widget-heading + .elementor-widget-text-editor{ margin-top:26px; }
.dock-stats{ margin-bottom:24px; }
.dock-stats > *{ flex:1 1 0 !important; min-width:0; }
.dock-overview-inner .dock-rule{ margin-bottom:31px; }

@media (max-width:1024px){
  .dock-overview .dock-pin-card{
    align-items:flex-start; padding:96px 48px;
  }
  .dock-overview-inner{ width:100%; }
}
@media (max-width:767px){
  .dock-overview .dock-pin-card{ padding:72px 24px; }
}

/* Hairline. Semi-transparent rgba is the allowed exception to globals-only. */
.dock-rule{
  height:1px !important; width:100% !important;
  padding:0 !important; min-height:0 !important;
  background:rgba(255,255,255,.28) !important;
}

/* ---- Icon feature grid ---- */
.dock-features-blue{  padding:124px clamp(48px,8.1vw,140px) 178px; }
.dock-features-white{ padding:124px clamp(48px,8.1vw,140px) 158px; }

/* Head block. The gap is !important because the template emits it per-element at ID specificity */
.dock-head{ gap:12px !important; margin-bottom:47px; }

.dock-grid{
  --dg:88px;                                   /* comp gutter at 1728 */
  column-gap:var(--dg) !important; row-gap:84px !important;
}
.dock-grid > *{
  flex:0 0 calc((100% - 3 * var(--dg)) / 4) !important;
  width:calc((100% - 3 * var(--dg)) / 4) !important;
  max-width:calc((100% - 3 * var(--dg)) / 4) !important;
}
/* dg always has a value on this element, so no invalid-at-computed-value risk here (unlike the svh trap in the Boat Lifts group… */
@media (min-width:1025px){ .dock-grid{ --dg:clamp(52px,5.09vw,88px); } }
@media (max-width:1024px){
  .dock-head{ margin-bottom:40px; }
  .dock-grid{ column-gap:48px !important; row-gap:56px !important; }
  .dock-grid > *{
    flex:0 0 calc((100% - 48px) / 2) !important;
    width:calc((100% - 48px) / 2) !important;
    max-width:calc((100% - 48px) / 2) !important;
  }
}
@media (max-width:767px){
  .dock-head{ margin-bottom:32px; }
  .dock-grid{ row-gap:32px !important; }
  .dock-grid > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
}

/* CARD INTERNALS — every rule here is !important on purpose */
.dock-card > .dock-icon{
  display:flex !important; align-items:center; justify-content:flex-start;
  height:55px !important; text-align:left !important;
  margin-bottom:13px !important;               /* slot 385 -> title box 398.5 */
}
.dock-icon > .elementor-widget-container{ line-height:0; }
.dock-icon img{
  display:block !important; width:auto; height:auto;
  max-height:55px; max-width:100%; margin-inline:0 !important;
}
.dock-card > .elementor-widget-heading{
  margin-bottom:8px !important;                /* title box 421.5 -> body 430 */
}
.dock-card .elementor-widget-text-editor p{ margin:0; }

/* ---- Testimonial cards over the pinned photo ---- */
.dock-testi-card{ justify-content:flex-start; padding:172px clamp(48px,8.1vw,140px) 0; }

.dock-quotes{ justify-content:center; column-gap:3px !important; }
.dock-quotes > *{
  flex:0 0 calc((100% - 6px) / 3) !important;
  width:calc((100% - 6px) / 3) !important;
  max-width:449px !important;
}
@media (max-width:1024px){
  .dock-quotes{ row-gap:24px !important; }
  .dock-quotes > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
}

.dock-quote-card{
  display:flex; flex-direction:column;
  min-height:330px;
  padding:56px 40px 40px !important;
}
/* Same !important discipline as the Docks group — Elementor's widget CSS loads after ours, so it centres the stars and… */
.dock-quote-card > .dock-stars{ text-align:left !important; margin-bottom:25px !important; }
.dock-stars img{ height:18px; width:auto; display:block !important; margin-inline:0 !important; }
.dock-quote-card > .dock-quote{ margin-bottom:30px !important; }
.dock-quote p{
  font-family:"Lato 300",sans-serif; font-weight:300; font-style:italic;
  font-size:16px; line-height:19px; margin:0;
}
.dock-quote-card > .dock-rule{ margin-top:auto !important; margin-bottom:27px !important; }
.dock-name{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:16px; line-height:17px;
}
.dock-meta{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:17px;
}
@media (max-width:767px){
  .dock-quote-card{ min-height:0; padding:40px 24px 32px !important; }
}

/* Reduced motion + Elementor editor: */
@media (prefers-reduced-motion: reduce){
  .dock-pin-stage{
    position:static !important; height:60vh !important; margin-bottom:0 !important;
  }
  .dock-pin-card{
    min-height:0 !important; padding-top:72px !important; padding-bottom:72px !important;
  }
}
body.elementor-editor-active .dock-pin-stage{
  position:static !important; height:60vh !important; margin-bottom:0 !important;
}
body.elementor-editor-active .dock-pin-card{
  min-height:0 !important; padding-top:72px !important; padding-bottom:72px !important;
}

/* ---- Shared ---- */
:root{
  --apm-field:#D9D9D9;
  --dock-gut:clamp(48px, 8.1vw, 140px);
}

/* Headline steps the comp uses beyond Theme Style (H1 100/.92, H2 60/.97). */
.h2-68 .elementor-heading-title,
.h2-68.elementor-heading-title{ font-size:68px !important; line-height:71px !important; }
.h2-56 .elementor-heading-title,
.h2-56.elementor-heading-title{ font-size:56px !important; line-height:58px !important; }
/* 1025-1279: the head column is capped by the window (942 + 2 gutters needs ~1110), so it lands at 859 and "BUILT TO A… */
@media (min-width:1025px) and (max-width:1279px){
  .h2-68 .elementor-heading-title{
    font-size:clamp(56px, 5.1vw, 68px) !important; line-height:1.045 !important;
  }
}
@media (max-width:1024px){
  .h2-68 .elementor-heading-title{ font-size:48px !important; line-height:52px !important; }
  .h2-56 .elementor-heading-title{ font-size:42px !important; line-height:46px !important; }
}
@media (max-width:767px){
    /* 32, not 38. At 390 the head column is 342 and "NO SHORTCUTS." is 372px at 38px in Special Gothic Expanded — measured… */
  .h2-68 .elementor-heading-title{
    font-size:clamp(26px, 8.2vw, 32px) !important; line-height:1.09 !important;
  }
  .h2-56 .elementor-heading-title{ font-size:34px !important; line-height:37px !important; }
}

/* Section head — eyebrow then H2. Comp gap is 20px on the flat sections. */
.dock-sec-head{ gap:20px !important; }

/* Lede / intro paragraph, 16/28, capped at the comp's 684. */
.dock-lede p{ margin:0 0 28px; max-width:684px; }
.dock-lede p:last-child{ margin-bottom:0; }

/* "Biggest plus" tag — 12px, accent, uppercase (comp 806:85). */
.plus-tag{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--e-global-color-accent);
}

/* Band paddings, from the comp's own section heights. */
.dock-ourchoice { padding:124px var(--dock-gut) 210px; }
.dock-composite { padding:184px var(--dock-gut) 278px; }
.dock-wood      { padding:254px var(--dock-gut) 377px; }
.dock-process   { padding:124px var(--dock-gut) 139px; }
.dock-gallery   { padding:115px var(--dock-gut) 198px; }
.dock-faq       { padding:124px var(--dock-gut) 239px; }
@media (max-width:1024px){
  .dock-ourchoice, .dock-composite, .dock-wood,
  .dock-process, .dock-gallery, .dock-faq{ padding:88px 48px !important; }
}
@media (max-width:767px){
  .dock-ourchoice, .dock-composite, .dock-wood,
  .dock-process, .dock-gallery, .dock-faq{ padding:64px 24px !important; }
}

/* ---- Hero ---- */
.docks-hero{ position:relative; padding:0 var(--dock-gut); }

/* The AD's wash, unchanged */
.docks-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgb(24,63,94) 0%, rgba(1,39,45,0) 100%);
}
.docks-hero > *{ position:relative; z-index:1; }
.docks-hero-inner{ max-width:824px; }
.docks-hero-inner > .eyebrow{ margin-bottom:48px !important; }
.docks-hero-inner > .elementor-widget-heading{ margin-bottom:83px !important; }
.docks-hero-body{ max-width:544px; }
.docks-hero-inner > .docks-hero-body{ margin-bottom:62px !important; }
/* Same custom-property leak as the trust bar */
.hero-ctas{ gap:30px !important; justify-content:flex-start !important; }

@media (max-width:1024px){
  .docks-hero-inner{ max-width:100%; }
    /* The section's own padding is per-element from the template, so it lands at ID specificity and needs !important to move */
  .docks-hero{ padding:72px 48px !important; }
  .docks-hero-inner > .eyebrow{ margin-bottom:18px !important; }
  .docks-hero-inner > .elementor-widget-heading{ margin-bottom:26px !important; }
  .docks-hero-inner > .docks-hero-body{ margin-bottom:32px !important; }
    /* An even wash instead of ramping to flat navy at 78% — that was erasing the bottom half of the photograph entirely */
  .docks-hero::before{
    background:linear-gradient(180deg,
      rgba(24,63,94,.55) 0%, rgba(24,63,94,.90) 100%);
  }
}

/* Phone: the hero ran roughly 940px of content against ~780px of usable screen, so it needed two screenshots */
@media (max-width:767px){
  .docks-hero{ padding:44px 24px !important; }
  .docks-hero .eyebrow .elementor-heading-title{
    font-size:13px !important; line-height:1.4 !important;
    letter-spacing:.01em;                     /* 3 lines -> 2 */
  }
    /* The eyebrow is itself a heading widget, so the generic rule below ties it on specificity (0,2,0) and wins on source… */
  .docks-hero-inner > .eyebrow.eyebrow{ margin-bottom:14px !important; }
  .docks-hero-inner > .elementor-widget-heading{ margin-bottom:20px !important; }
  .docks-hero-body p{ line-height:26px; }
  .docks-hero-inner > .docks-hero-body{ margin-bottom:26px !important; }
  .hero-ctas{ gap:14px !important; }
  .hero-partner{ margin-top:24px !important; }
}

/* ---- Tablet landscape: the hero needs its own air ---- */
@media (min-width:1025px) and (max-width:1366px){
  .docks-hero{ padding-top:72px !important; padding-bottom:72px !important; }
}

/* ---- Trust bar (4 items, lead + sub) ---- */
.dock-trust-bar{ padding:25px clamp(24px, 10.94vw, 189px); }
/* Below desktop the bar has to sit on the same gutter as every other band, or it reads as a misaligned strip */
@media (max-width:1024px){ .dock-trust-bar{ padding:25px 48px !important; } }
@media (max-width:767px) { .dock-trust-bar{ padding:22px 24px !important; } }

/* CUSTOM-PROPERTY LEAK. The row sets justify-content:space-between for the 4-across desktop layout */
.dock-trust-item{ justify-content:flex-start !important; }

/* At the design width the comp's own 10.94vw margin leaves 1350px of track for a 1294px row — 56px of slack — so from… */
@media (min-width:1728px){
  .dock-trust-bar{ padding:16px clamp(24px, 10.94vw, 189px) !important; }
  .dock-trust-row{ column-gap:20px !important; }
}
.dock-trust-item{ gap:10px !important; }

/* THE ICON MUST NEVER TAKE ITS OWN LINE */
.dock-trust-item{ flex-wrap:nowrap !important; }
.dock-trust-item > .elementor-widget-image{ flex:0 0 auto !important; }
.dock-trust-copy{ min-width:0 !important; flex:1 1 auto !important; }
@media (max-width:767px){
    /* the Trust and Stat Bars group steps these to 14 below 1150, but the Docks group restates 16 further down the sheet and wins on source order */
  .trust-lead, .trust-sub{ font-size:13px !important; line-height:18px !important; }
  .apm-trust-icon img{ height:24px; }
}
.trust-lead{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:16px; line-height:20px; text-transform:uppercase;
}
.trust-sub{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:20px; text-transform:uppercase;
}
.apm-trust-icon img{ height:28px; }

/* Long ghost labels ("EXPLORE ALL COMPOSITE OPTIONS") overrun a 390px phone against the global… */
@media (max-width:767px){
  .btn-ghost .elementor-button,
  .btn-ghost-blue .elementor-button{
    white-space:normal !important; text-align:center;
  }
}

/* ---- Pinned scroll groups ---- */
.dock-sg{ position:relative; }

/* THE PHOTO BELONGS TO .dock-sg-stage, NOT TO .dock-sg */
.dock-sg{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* NOT gated on .apm-anim. The gate exists for JS-driven HIDDEN states, where a script failure would leave content… */
.dock-sg-stage{
  position:sticky; top:0;
  height:100vh;
  margin-bottom:-100vh;              /* panels ride over, height still counts */
  overflow:hidden; z-index:0;
}
/* Sticky dies under an ancestor with overflow:hidden */
/* Same scrim family as the home Features stage: */
.dock-sg-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(270deg,
    rgb(24,63,94) 14%, rgba(50,131,196,.39) 100%);
}

/* WHERE THE HEADLINE LIVES IS THE WHOLE MECHANIC */

/* THE COMP'S 942 IS THE TEXT COLUMN, NOT THE BOX */
.dock-sg-head{
  position:relative; z-index:2;
  padding:182px var(--dock-gut) 0;
  max-width:calc(942px + 2 * var(--dock-gut));
}

/* ---- NEW PLACEMENT: headline is the first block of the scrolling column ---- */
/* Desktop keeps the comp exactly: */
@media (min-width:1025px){
  .dock-sg-panels > .dock-sg-head{
    position:absolute; top:182px; left:0; right:auto;
    padding:0 var(--dock-gut);
    width:calc(942px + 2 * var(--dock-gut));
    max-width:100%;
  }
}

.dock-sg-panels{ position:relative; z-index:1; }
.dock-sg-panels > .dock-panel{
  width:clamp(340px, 26.3vw, 454px) !important;
  max-width:calc(100% - 48px) !important;
  margin-left:auto !important;
  margin-right:clamp(24px, 4.8vw, 83px) !important;
}
.dock-sg-a .dock-sg-panels{ padding:303px 0 62px; }
.dock-sg-b .dock-sg-panels{ padding:263px 0 62px; }
.dock-sg-panels > .dock-panel + .dock-panel{ margin-top:248px !important; }

.dock-panel > .eyebrow{ margin-bottom:8px !important; }
.dock-panel > .elementor-widget-heading{ margin-bottom:40px !important; }
.panel-body p{ margin:0; max-width:433px; }
.panel-body p.bs-lbl{
  font-family:"Lato 800",sans-serif; font-weight:800;
  color:var(--e-global-color-accent);
  text-transform:uppercase; margin-top:28px;
}
.panel-body p.bs-lbl:first-child{ margin-top:0; }
/* "The Other Guys" label. A saturated red is under 2:1 on navy, so this is
   a light coral: 5.4:1 on navy, same weight as the gold. The ✕ means it does
   not rely on color alone. Add is-con to that label's <p> in the Text tab;
   is-pro on "The Standard" gives it the matching gold ✓. */
.panel-body p.bs-lbl.is-con,
.panel-body p.bs-lbl.is-pro{
  display:flex; align-items:center; gap:8px;
}
.panel-body p.bs-lbl.is-con{
  --apm-con:#FF9A8B;
  color:var(--apm-con);
}
.panel-body p.bs-lbl.is-pro::before{
  content:""; flex:0 0 13px; width:13px; height:11px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'><path d='M1.5 6.5l3.8 3.8L12.5 1.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'><path d='M1.5 6.5l3.8 3.8L12.5 1.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}
.panel-body p.bs-lbl.is-con::before{
  content:""; flex:0 0 11px; width:11px; height:11px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 1.5l9 9M10.5 1.5l-9 9' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center/contain;
}

/* REVEALS AND THE PIN. A `reveal` puts a transform on the element */
.dock-sg.reveal, .dock-sg-stage.reveal, .dock-sg-panels.reveal{
  opacity:1 !important; transform:none !important; transition:none !important;
}

/* PIN ON DESKTOP. FULL-BLEED PHOTO BAND BELOW 1025 */
@media (max-width:1024px){
    /* THE SCRIM. The client's phone shots showed white and Florida Sunshine sitting on bare sunlit water */
  .dock-sg-stage::after{
    background:linear-gradient(180deg,
      rgba(24,63,94,.80) 0%, rgba(24,63,94,.62) 45%, rgb(24,63,94) 100%);
  }
  .dock-sg-panels > .dock-panel{
    width:100% !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  .dock-sg-panels > .dock-panel + .dock-panel{ margin-top:64px !important; }
  .dock-panel > .elementor-widget-heading{ margin-bottom:24px !important; }
  .panel-body p{ max-width:100%; }

    /* NEW PLACEMENT — the Elevator mechanic */
  .dock-sg-panels > .dock-sg-head{
    position:static; padding:88px 48px 56px; max-width:100%;
  }
  .dock-sg:has(.dock-sg-panels > .dock-sg-head) .dock-sg-panels{
    padding:0 0 88px !important;
  }
  .dock-sg:has(.dock-sg-panels > .dock-sg-head) .dock-sg-panels > .dock-panel{
    padding-left:48px !important; padding-right:48px !important;
  }

    /* OLD PLACEMENT — headline still inside the stage */
  .dock-sg:has(.dock-sg-stage > .dock-sg-head) .dock-sg-stage{
    position:static; height:auto; margin-bottom:0;
    min-height:58vh; display:flex; align-items:flex-end;
  }
  .dock-sg-stage > .dock-sg-head{ padding:88px 48px 56px; max-width:100%; }
  .dock-sg:has(.dock-sg-stage > .dock-sg-head) .dock-sg-panels{
    padding:56px 48px 88px;
  }
}
@media (max-width:767px){
  .dock-sg-head{ padding:64px 24px 48px; }
  .dock-sg-panels > .dock-sg-head{ padding:64px 24px 48px; }
  .dock-sg:has(.dock-sg-panels > .dock-sg-head) .dock-sg-panels > .dock-panel{
    padding-left:24px !important; padding-right:24px !important;
  }
  .dock-sg:has(.dock-sg-stage > .dock-sg-head) .dock-sg-panels{
    padding:40px 24px 64px;
  }
}

/* ---- Tablet landscape: headline no longer runs under the panel column ---- */
@media (min-width:1025px) and (max-width:1366px){
  .dock-sg-panels > .dock-panel{ width:400px !important; margin-right:48px !important; }
  .dock-sg-panels > .dock-panel + .dock-panel{ margin-top:120px !important; }
  .dock-sg-panels > .dock-sg-head{ width:calc(100% - 496px) !important; padding-right:0 !important; }
  .dock-sg-panels > .dock-sg-head h2.elementor-heading-title{
    font-size:clamp(40px, 4.4vw, 52px) !important; line-height:1.02 !important;
  }
}
/* 13-15" laptops (1440/1512/1536 default). "BUILT TO A STANDARD," is ~897px at 68px, so at 1512
   it ended 14px short of the panel. Smaller head + fixed panel keeps 94-300px of air. */
@media (min-width:1367px) and (max-width:1679px){
  .dock-sg-panels > .dock-panel{ width:420px !important; margin-right:56px !important; }
  .dock-sg-panels > .dock-sg-head{ width:calc(100% - 532px) !important; padding-right:0 !important; }
  .dock-sg-panels > .dock-sg-head h2.elementor-heading-title{
    font-size:clamp(52px, 3.8vw, 58px) !important; line-height:1.02 !important;
  }
  .dock-panel > .elementor-widget-heading:not(.eyebrow) .elementor-heading-title{
    font-size:48px !important; line-height:1.02 !important;
  }
}

/* ---- Why it's our choice — 50/50 split ---- */
@media (min-width:1025px){
  .dock-ourchoice{ padding:0 !important; }
}
.oc-split{ gap:0 !important; align-items:stretch !important; }
/* gap:0 and explicit margins, NOT a column gap */
.oc-split > .oc-copy{
  flex:0 0 50%; width:50%; max-width:50%;
  gap:0 !important;
    /* left = the page gutter, right = the comp's 47px column gutter, so the copy keeps the same left margin as every other… */
    /* The comp's 124/210 was drawn for a full-width band */
  padding:124px 47px 124px var(--dock-gut);
}
.dock-ourchoice .dock-sec-head{ margin-bottom:18px; }  /* comp: H2 285 -> lede 303 */
.oc-split > .oc-media{ flex:0 0 50%; width:50%; max-width:50%; min-width:0; }

/* Comp 740:170 puts 10px between the eyebrow and the H2 here, not the 20 the other flat sections use */
.dock-ourchoice .dock-sec-head{ gap:10px !important; }

/* The photograph fills whatever height the copy column ends up being, so the two halves always bottom out together */
.oc-media{ position:relative; }
.oc-media > .oc-shot{ position:absolute; inset:0; }
.oc-media .oc-shot img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; margin-inline:0;
}

/* Second paragraph to the first sub-heading */
.dock-ourchoice .dock-lede{ margin-bottom:78px !important; }

/* TWO ACROSS, TWO DOWN — the grid halves because the column halved */
.dock-ourchoice .dock-cards{
  column-gap:47px !important; row-gap:56px !important;
  margin-bottom:64px !important;             /* comp 105, same reason as above */
}
.dock-ourchoice .dock-cards > *{
  flex:0 0 calc((100% - 47px - 2px) / 2) !important;
  width:calc((100% - 47px - 2px) / 2) !important;
  max-width:calc((100% - 47px - 2px) / 2) !important;
}
.dock-card > .elementor-widget-heading{ margin-bottom:8px !important; }
.dock-card .elementor-widget-text-editor p{ margin:0; }

/* STACKS AT 1280, NOT 1024 */
@media (max-width:1279px){
  .oc-split{ flex-direction:column !important; }
}
/* Only this band restores the section padding — below 1025 the Docks group's own tablet and phone values already apply and… */
@media (min-width:1025px) and (max-width:1279px){
  .dock-ourchoice{ padding:124px var(--dock-gut) 210px !important; }
}
@media (max-width:1279px){
  .oc-split > .oc-copy,
  .oc-split > .oc-media{ flex:0 0 auto; width:100%; max-width:100%; }
  .oc-split > .oc-copy{ padding:0 !important; }
  .oc-media{ position:static; order:-1; margin-bottom:48px; }
  .oc-media > .oc-shot{ position:static; }
  .oc-media .oc-shot img{ aspect-ratio:3/2; height:auto; }
  .dock-ourchoice .dock-lede{ margin-bottom:56px !important; }
  .dock-ourchoice .dock-cards{
    column-gap:40px !important; row-gap:48px !important;
    margin-bottom:56px !important;
  }
  .dock-ourchoice .dock-cards > *{
    flex:0 0 calc((100% - 40px - 2px) / 2) !important;
    width:calc((100% - 40px - 2px) / 2) !important;
    max-width:calc((100% - 40px - 2px) / 2) !important;
  }
}
@media (max-width:767px){
  .oc-media{ margin-bottom:36px; }
  .oc-media .oc-shot img{ aspect-ratio:4/3; }
  .dock-ourchoice .dock-lede{ margin-bottom:40px !important; }
  .dock-ourchoice .dock-cards{ row-gap:36px !important; }
  .dock-ourchoice .dock-cards > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
}

/* ---- Composite + Wood bands ---- */
.dock-composite{ background-color:var(--e-global-color-191f302) !important; }

/* HEAD -> COPY AIR. Measured off the comp, frame tops from each section's top: */
.dock-composite .dock-sec-head,
.dock-wood .dock-sec-head{
  gap:10px !important;
  margin-bottom:22px !important;
}

.dock-composite .dock-lede{ margin-bottom:53px !important; }
.type-cols{ column-gap:47px !important; row-gap:48px !important; }
.type-cols > *{
  flex:0 0 calc((100% - 3 * 47px - 2px) / 4) !important;
  width:calc((100% - 3 * 47px - 2px) / 4) !important;
  max-width:calc((100% - 3 * 47px - 2px) / 4) !important;
  border-top:1px solid var(--e-global-color-0c26593);
  padding-top:18px !important;
}
.type-col > .elementor-widget-heading{ margin-bottom:8px !important; }
.type-col .elementor-widget-text-editor p{ margin:0; }
.type-col .elementor-widget-text-editor p + p{ margin-top:0; }
.dock-composite .type-cols{ margin-bottom:55px !important; }
@media (max-width:1024px){
  .type-cols > *{
    flex:0 0 calc((100% - 40px - 2px) / 2) !important;
    width:calc((100% - 40px - 2px) / 2) !important;
    max-width:calc((100% - 40px - 2px) / 2) !important;
  }
  .type-cols{ column-gap:40px !important; }
}
@media (max-width:767px){
  .type-cols > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
}

/* Wood band — two columns, intro left / marine-grade callout right. */
.dock-wood-row{ column-gap:102px !important; row-gap:44px !important; }
.dock-wood-row > *{
  flex:0 0 calc((100% - 102px - 2px) / 2) !important;
  width:calc((100% - 102px - 2px) / 2) !important;
  max-width:calc((100% - 102px - 2px) / 2) !important;
}
.wood-callout > .elementor-widget-heading{ margin-bottom:8px !important; }
.wood-callout .elementor-widget-text-editor p{ margin:0; }
.dock-wood .dock-wood-row{ margin-bottom:77px !important; }
@media (max-width:1024px){
  .dock-wood-row > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
  .dock-wood .dock-wood-row{ margin-bottom:48px !important; }
}

/* ---- Materials stack (Composite pins, Wood scrolls over it) ---- */
.dock-composite.apm-stack,
.dock-wood.apm-stack{
  justify-content:center;
  padding-block:clamp(64px, 8vh, 184px) !important;
}
/* Both panels need an opaque edge-to-edge ground or the one underneath shows through as the next slides over it */

/* A short desktop window is the same failure as a phone */
@media (min-width:1025px) and (max-height:779px){
  .dock-composite.apm-stack,
  .dock-wood.apm-stack{ position:static !important; }
}

/* Below 1025 the Sticky Stack group has already dropped the pin; these two just give the bands back normal band padding */
@media (max-width:1024px){
  .dock-composite.apm-stack,
  .dock-wood.apm-stack{ min-height:0 !important; padding-block:88px !important; }
}
@media (max-width:767px){
  .dock-composite.apm-stack,
  .dock-wood.apm-stack{ padding-block:64px !important; }
}

/* ---- Your dock. Done right. ---- */
.dock-process .dock-sec-head{ margin-bottom:96px !important; }
.proc-grid{ column-gap:94px !important; row-gap:41px !important; }
.proc-grid > *{
  flex:0 0 calc((100% - 2 * 94px - 2px) / 3) !important;
  width:calc((100% - 2 * 94px - 2px) / 3) !important;
  max-width:calc((100% - 2 * 94px - 2px) / 3) !important;
  border-top:1px solid var(--e-global-color-secondary);
  padding-top:13px !important;
}
.step-num{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-size:40px; line-height:1.15;
}
.proc-step > .step-num{ margin-bottom:8px !important; }
.proc-step > .elementor-widget-heading{ margin-bottom:8px !important; }
.proc-step .elementor-widget-text-editor p{ margin:0; }
.dock-process .proc-grid{ margin-bottom:46px !important; }
.proc-cta{ align-items:center !important; }
@media (max-width:1024px){
  .proc-grid{ column-gap:48px !important; row-gap:36px !important; }
  .proc-grid > *{
    flex:0 0 calc((100% - 48px - 2px) / 2) !important;
    width:calc((100% - 48px - 2px) / 2) !important;
    max-width:calc((100% - 48px - 2px) / 2) !important;
  }
  .dock-process .dock-sec-head{ margin-bottom:56px !important; }
}
@media (max-width:767px){
  .proc-grid > *{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
  .step-num{ font-size:34px; }
}

/* ---- The Work (CoverFlow band) ---- */
.dock-gallery .dock-sec-head{ margin-bottom:88px !important; }
.dock-gallery .coverflow-slot{ width:100% !important; }

/* The blue decking field behind this band is a PHOTO, not a tileable texture */
.dock-gallery{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* ---- FAQ ---- */
.dock-faq .dock-sec-head{ gap:10px !important; margin-bottom:17px !important; }

/* ELEMENTOR ACCORDION. The client edits questions in the builder; we own the look from here */
.faq-acc .elementor-accordion{ max-width:1074px; }

/* Sunshine, and horizontal only — the comp draws no box. */
.faq-acc .elementor-accordion-item{
  border:0 !important;
  border-bottom:1px solid var(--e-global-color-accent) !important;
}

/* Row: 30 + 28 line + 30 = the comp's 88 pitch. */
.faq-acc .elementor-tab-title{
  display:flex !important;
  align-items:flex-start; justify-content:space-between; gap:24px;
  background:transparent !important;
  margin:0 !important;
  padding:28px 0 29px !important;        /* + 28 line + 1 border = the comp's 88 */
  cursor:pointer;
  font-family:"Special Gothic Expanded One",sans-serif !important;
  font-size:24px !important; line-height:28px !important;
  text-transform:none !important;
  color:var(--e-global-color-primary) !important;
}
.faq-acc .elementor-accordion-title{
  flex:1 1 auto; display:block;          /* block kills the inline leading that pushed the row 2px past the pitch */
  font-family:inherit !important; font-size:inherit !important;
  line-height:inherit !important; text-transform:none !important;
  color:inherit !important; text-decoration:none;
}

/* Icons render as inline SVG sized height/width:1em, so font-size drives them */
.faq-acc .elementor-accordion-icon{
  order:2; float:none !important;
  flex:0 0 29px !important; width:29px !important;
  text-align:right;
  color:var(--e-global-color-accent) !important;
  font-size:24px !important; line-height:28px !important;
}
.faq-acc .elementor-accordion-icon svg{ fill:currentColor; }

/* Open row: the comp runs the answer straight on from the question. */
.faq-acc .elementor-tab-title.elementor-active{ padding-bottom:6px !important; }
.faq-acc .elementor-tab-content{
  background:transparent !important;
  border:0 !important;
  padding:6px 35px 16px 0 !important;    /* comp answer 1039 in a 1074 track */
}
.faq-acc .elementor-tab-content p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px; margin:0;
  color:var(--e-global-color-primary);
}
.faq-acc .elementor-tab-title:focus-visible{
  outline:2px solid var(--e-global-color-accent); outline-offset:3px;
}
@media (max-width:767px){
  .faq-acc .elementor-tab-title{
    font-size:19px !important; line-height:24px !important;
    padding:22px 0 !important; gap:16px;
  }
  .faq-acc .elementor-accordion-icon{
    font-size:19px !important; line-height:24px !important;
    flex-basis:22px !important; width:22px !important;
  }
  .faq-acc .elementor-tab-content{ padding-right:0 !important; }
}

/* ---- Form ---- */
.dock-form-band{
  position:relative;
  padding:182px var(--dock-gut) 201px;
}
/* z-order: photo strip (::after) 0, this scrim 1, content 2 */
.dock-form-band::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(270deg,
    rgb(24,63,94) 14%, rgba(50,131,196,.39) 100%);
}
.dock-form-band > *{ position:relative; z-index:2; }
.dock-form-row{ column-gap:147px !important; row-gap:56px !important; }
.form-copy{
  flex:0 0 572px !important; width:572px !important; max-width:572px !important;
  align-self:flex-start;
  position:sticky; top:calc(var(--apm-header) + 24px);
}
.form-copy > .eyebrow{ margin-bottom:38px !important; }
.form-copy > .elementor-widget-heading{ margin-bottom:45px !important; }
.form-fields{ flex:1 1 0 !important; min-width:0; }
@media (max-width:1180px){
  .form-copy{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    position:static;
  }
  .dock-form-row{ column-gap:0 !important; }
}
/* THE PHOTO STOPS BEING A FILL AND BECOMES A HEADER STRIP BELOW 1025 */
/* Doubled class for weight */
@media (max-width:1024px){
  .dock-form-band.dock-form-band{
    --strip:min(62vw, 520px);
        /* The section stops painting its own background here — 0 0 hides it while LEAVING THE URL in the computed value, which… */
    background-size:0 0 !important;
  }
    /* THE STRIP IS ITS OWN LAYER NOW */
  .dock-form-band::after{
    content:""; position:absolute; inset:0 0 auto 0; height:var(--strip);
    background-image:inherit;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:0; pointer-events:none;
  }
}
/* Navy behind the strip — also the lazy-load guard, same as .lambo-section: */
.dock-form-band{ background-color:var(--e-global-color-primary); }

@media (max-width:1024px){
  .dock-form-band{ padding:88px 48px !important; }
  .form-copy > .elementor-widget-heading{ margin-bottom:28px !important; }
    /* Fades out exactly where the photograph stops, so there is no cut line */
  .dock-form-band::before{
    background:linear-gradient(180deg,
      rgba(24,63,94,.28) 0,
      rgba(24,63,94,.44) calc(var(--strip) * .55),
      rgb(24,63,94) var(--strip)) !important;
  }
}
@media (max-width:767px){
  .dock-form-band{ padding:64px 24px !important; }
    /* Blurb to first field. 56 was the desktop two-column row gap carried down; stacked on a phone it read as a hole */
  .dock-form-row{ row-gap:32px !important; }
}

/* GRAVITY FORMS 3.0 ----------------------------------------------------- MEASURED on the live page 2026-09-03, not… */

.dock-form-band .gform_wrapper{ max-width:730px; }

.dock-form-band .gform_fields{
  column-gap:22px !important;
  row-gap:33px !important;
}

/* Field titles are SUNSHINE on this band, not white */
.dock-form-band .gfield_label{
  font-family:"Lato 800",sans-serif !important; font-weight:800 !important;
  font-size:16px !important; line-height:31px !important;
  letter-spacing:.04em; text-transform:uppercase !important;
  color:var(--e-global-color-accent) !important;
  margin:0 !important;                    /* comp: control sits straight under */
}
.dock-form-band .gfield_required{
  color:var(--e-global-color-accent) !important; margin-left:2px;
}
/* GF hides sub-labels by class, not display — keep that working. */
.dock-form-band .screen-reader-text{ position:absolute !important; left:-9999px; }

/* FALLBACKS FOR SUB-LABELS AND DESCRIPTIONS ---------------------------- This form hides them, but the client will… */
.dock-form-band .gform-field-label--type-sub,
.dock-form-band .ginput_complex label{
  font-family:"Lato 500",sans-serif !important; font-weight:500 !important;
  font-size:13px !important; line-height:20px !important;
  letter-spacing:0 !important; text-transform:none !important;
  color:var(--e-global-color-0c26593) !important;
  opacity:.8; margin:6px 0 0 !important;
}
/* Compound fields (name, address) are their own grid inside the field. */
.dock-form-band .ginput_complex{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  column-gap:22px !important; row-gap:12px !important;
}
.dock-form-band .ginput_complex > span{ display:block; min-width:0; }
/* Address puts city/state/zip on their own rows — let it. */
.dock-form-band .ginput_complex.ginput_container_address{
  grid-template-columns:1fr 1fr;
}
.dock-form-band .ginput_complex.ginput_container_address .address_line_1,
.dock-form-band .ginput_complex.ginput_container_address .address_line_2{
  grid-column:1 / -1;
}
.dock-form-band .gfield_description{
  font-family:"Lato 500",sans-serif !important; font-weight:500 !important;
  font-size:14px !important; line-height:22px !important;
  color:var(--e-global-color-0c26593) !important; opacity:.8;
  padding:6px 0 0 !important;
}
/* Checkboxes / radios, same reason — GF's defaults are navy on navy here. */
.dock-form-band .gfield_checkbox label,
.dock-form-band .gfield_radio label{
  font-family:"Lato 500",sans-serif !important; font-weight:500 !important;
  font-size:16px !important; line-height:28px !important;
  text-transform:none !important; letter-spacing:0 !important;
  color:var(--e-global-color-0c26593) !important;
}

.dock-form-band .gfield input[type=text],
.dock-form-band .gfield input[type=tel],
.dock-form-band .gfield input[type=email],
.dock-form-band .gfield select,
.dock-form-band .gfield textarea{
  height:65px !important; min-height:65px !important;
  padding:17px 27px !important;
  background:var(--apm-field) !important;
  border:0 !important; border-radius:4px !important;
  font-family:"Lato 500",sans-serif !important; font-weight:500 !important;
  font-size:16px !important; line-height:31px !important;
  color:var(--e-global-color-primary) !important;
  width:100% !important;
}
.dock-form-band .gfield textarea{
  height:243px !important; min-height:243px !important;
  line-height:28px !important; resize:vertical;
}
/* Placeholder is Mid Ship, as drawn — NOT navy at reduced opacity */
.dock-form-band .gfield ::placeholder{
  color:var(--e-global-color-secondary) !important; opacity:1;
}

/* A <select> HAS NO PLACEHOLDER */
.dock-form-band .gfield select{
  color:var(--e-global-color-secondary) !important;
}
.dock-form-band .gfield select:has(option[value=""]:not(:checked)){
  color:var(--e-global-color-primary) !important;
}
/* The open dropdown is painted by the OS on its own surface — keep it navy. */
.dock-form-band .gfield select option{ color:var(--e-global-color-primary); }
.dock-form-band .gfield :is(input,select,textarea):focus-visible{
  outline:2px solid var(--e-global-color-accent) !important; outline-offset:2px;
}

/* Native select arrow off, the comp's chevron in */
.dock-form-band .gfield select{
  appearance:none !important; -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8'><path d='M1 1l6.5 6L14 1' fill='none' stroke='%230071B7' stroke-width='2'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 35px center !important;   /* comp chevron at 1553 */
  padding-right:70px !important;
}

/* Submit. GF 3.0 renders a <button>, and the spinner now lives inside it, so the padding has to hold both without the… */
.dock-form-band .gform_footer,
.dock-form-band .gform-footer{
  margin:39px 0 0 !important; padding:0 !important;   /* comp: 39 under the textarea */
  display:flex !important; justify-content:flex-start !important;
}
.dock-form-band button.gform_button{
  display:inline-flex !important; align-items:center; gap:12px;
  width:auto !important; min-height:45px;
  padding:14px 28px !important;
  background:transparent !important;
  border:2px solid var(--e-global-color-accent) !important;
  border-radius:70px !important;
  font-family:"Lato 800",sans-serif !important; font-weight:800 !important;
  font-size:16px !important; line-height:1 !important;
  text-transform:uppercase !important;
  color:var(--e-global-color-accent) !important;
  transition:background .2s ease, color .2s ease;
}
.dock-form-band button.gform_button::after{
  content:""; width:8px; height:15px; flex:0 0 8px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='15'><path d='M1 1l6 6.5L1 14' fill='none' stroke='black' stroke-width='2'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='15'><path d='M1 1l6 6.5L1 14' fill='none' stroke='black' stroke-width='2'/></svg>") no-repeat center/contain;
}
.dock-form-band button.gform_button:hover,
.dock-form-band button.gform_button:focus-visible{
  background:var(--e-global-color-accent) !important;
  color:var(--e-global-color-primary) !important;
}
/* The in-button spinner GF 3.0 introduced. GF centers it over the label;
   while submitting it replaces the chevron instead, beside the label. No
   transform here: GF spins the loader with one. */
.dock-form-band button.gform_button .gform-loader{
  border-color:currentColor !important; border-right-color:transparent !important;
}
.dock-form-band button.gform_button:has(.gform-loader){ cursor:progress; }
.dock-form-band button.gform_button:has(.gform-loader)::after{ display:none; }
.dock-form-band button.gform_button .gform-loader{
  position:static !important; inset:auto !important;
  order:2; flex:0 0 18px;
  width:18px !important; height:18px !important;
  margin:0 !important;
  border-width:2px !important; border-style:solid !important;
  border-radius:50% !important;
}

/* ---- Gravity Forms error feedback: one alert card on every form ----------
   Kept out of the globals, like the success card. --kiss-gf-error is the
   KISS Gravity "Errors" color when set. GF red on the tint is 6.2:1. */
.gform_wrapper.gravity-theme{
  --form-alert:var(--kiss-gf-error, #C02B0A);
  --form-alert-bg:#FFF5F4;
}

/* Summary card. GF moves focus here after a failed submit; its outline stays. */
.gform_wrapper.gravity-theme .gform_validation_errors{
  background:var(--form-alert-bg) !important;
  border:1px solid var(--form-alert) !important;
  border-inline-start-width:4px !important;
  border-radius:4px !important;
  box-shadow:none !important;
  padding:14px 18px !important;
  margin:0 0 24px !important;
}
/* Lato 800 to match the field labels. The kit's H2 face would win otherwise. */
.gform_wrapper.gravity-theme .gform_validation_errors > h2{
  display:flex; align-items:center; gap:10px;
  margin:0 !important;
  color:var(--form-alert) !important;
  font-family:"Lato 800",sans-serif !important; font-weight:800 !important;
  font-size:15px !important; line-height:1.35 !important;
  letter-spacing:.02em; text-transform:uppercase;
}
/* Static, so the icon sits beside the heading instead of on top of it. */
.gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon{
  position:static !important;
  inset:auto !important;
  height:auto; flex:none;
  font-size:22px;
  color:var(--form-alert) !important;
}
.gform_wrapper.gravity-theme .gform_validation_errors > ol{
  margin:8px 0 0 !important;
  padding-inline-start:52px !important;
}
.gform_wrapper.gravity-theme .gform_validation_errors > ol li,
.gform_wrapper.gravity-theme .gform_validation_errors > ol a{
  font-family:"Lato 500",sans-serif !important; font-weight:500 !important;
  font-size:15px !important; line-height:1.5 !important;
  color:var(--form-alert) !important;
}
.gform_wrapper.gravity-theme .gform_validation_errors > ol a{
  text-decoration:underline; text-underline-offset:3px;
}

/* Fields in error: tint plus an inset red edge, so nothing shifts. */
.gform_wrapper.gravity-theme .gfield_error input:not([type="checkbox"]):not([type="radio"]),
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea{
  background-color:var(--form-alert-bg) !important;
  box-shadow:inset 0 0 0 1px var(--form-alert) !important;
}
/* A missed Agreement: the whole field becomes the error box, since the
   checkbox is too small to carry it alone. The legend is floated so it
   sits inside the tint instead of straddling the fieldset's top edge. */
.gform_wrapper.gravity-theme .gfield--type-consent.gfield_error{
  background:var(--form-alert-bg) !important;
  box-shadow:inset 0 0 0 1px var(--form-alert);
  border-inline-start:4px solid var(--form-alert) !important;
  border-radius:4px;
  padding:16px 20px 20px !important;
}
.gform_wrapper.gravity-theme .gfield--type-consent.gfield_error > legend{
  float:left; width:100%; padding:0 !important;
  color:var(--e-global-color-primary) !important;
}
.gform_wrapper.gravity-theme .gfield--type-consent.gfield_error > legend + *{ clear:both; }
.gform_wrapper.gravity-theme .gfield--type-consent.gfield_error .gfield_consent_description{
  background:var(--e-global-color-0c26593, #fff) !important;
  opacity:1 !important;
}
/* A missed required checkbox needs more than a thin border. */
.gform_wrapper.gravity-theme .gfield_error input[type="checkbox"][aria-invalid="true"]{
  outline:2px solid var(--form-alert);
  outline-offset:2px;
}

/* .gfield_description is in the .elementor-kit-19 because GF puts it on the message
   too, and the light bands' description color would otherwise win. */
.gform_wrapper.gravity-theme .gfield_description.gfield_validation_message,
.gform_wrapper.gravity-theme .gfield_description.validation_message,
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message{
  opacity:1 !important;
  background:transparent !important; border:0 !important;
  padding:0 !important;
  margin-block:6px !important;
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:14px; line-height:1.5;
  color:var(--form-alert) !important;
}
/* GF red is about 2:1 on navy. Messages and the checkbox ring go gold there. */
.dock-form-band:not(.is-light) .gfield_description.gfield_validation_message,
.dock-form-band:not(.is-light) .gfield_validation_message,
.dock-form-band:not(.is-light) .validation_message{
  color:var(--e-global-color-accent) !important;
}
.dock-form-band:not(.is-light) .gfield_error input[type="checkbox"][aria-invalid="true"]{
  outline-color:var(--e-global-color-accent);
}
/* Success message: one light green card on both the dark and the white
   bands. Navy on the green is 9.7:1; the check is 4.5:1 against it. */
.dock-form-band{
  --apm-success-bg:#E6F4EA;
  --apm-success-line:#B7DEC2;
  --apm-success-mark:#2E7D4F;
}
.dock-form-band .gform_confirmation_message{
  position:relative;
  padding:24px 36px 24px 76px;
  border:1px solid var(--apm-success-line);
  border-radius:32px;
  background:var(--apm-success-bg);
  box-shadow:0 12px 32px rgba(24,63,94,.18);
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:18px; line-height:30px;
  color:var(--e-global-color-primary) !important;
}
.dock-form-band .gform_confirmation_message::before{
  content:""; position:absolute; left:32px; top:25px;
  width:28px; height:28px;
  background:var(--apm-success-mark);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4.3-4.3 1.4-1.4 2.9 2.9 5.9-5.9 1.4 1.4-7.3 7.3Z'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4.3-4.3 1.4-1.4 2.9 2.9 5.9-5.9 1.4 1.4-7.3 7.3Z'/></svg>") no-repeat center/contain;
}
.dock-form-band .gform_confirmation_message a{
  color:var(--e-global-color-primary); text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:767px){
  .dock-form-band .gform_confirmation_message{
    padding:20px 22px 20px 60px; border-radius:24px;
    font-size:16px; line-height:28px;
  }
  .dock-form-band .gform_confirmation_message::before{ left:22px; top:22px; width:24px; height:24px; }
}

@media (max-width:1024px){
  .dock-form-band .gform_wrapper{ max-width:none; }
}
@media (max-width:767px){
  .dock-form-band .gform_fields{ row-gap:24px !important; }
  .dock-form-band .gfield{ grid-column:1 / -1 !important; }
  .dock-form-band .gfield input[type=text],
  .dock-form-band .gfield input[type=tel],
  .dock-form-band .gfield input[type=email],
  .dock-form-band .gfield select{
    height:56px !important; min-height:56px !important; padding:12px 18px !important;
  }
  .dock-form-band .gfield textarea{ height:180px !important; min-height:180px !important; }
  .dock-form-band .gform_footer,
  .dock-form-band .gform-footer{ margin-top:28px !important; }
  .dock-form-band button.gform_button{ width:100% !important; justify-content:center; }
}

/* ---- Form: the copy column was crushing the fields below 1400 ---- */
@media (max-width:1399px){
  .dock-form-row{ flex-wrap:wrap !important; column-gap:0 !important; }
  .form-copy{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    position:static;
  }
  .form-fields{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  }
}
@media (min-width:1025px) and (max-width:1399px){
  .dock-form-band{ padding:120px var(--dock-gut) 140px !important; }
}
/* Above the stack point the gap gives ground back to the form instead of holding 147 all the way down: */
@media (min-width:1400px){
  .dock-form-row{ column-gap:clamp(72px, 8.5vw, 147px) !important; }
}

/* ---- Sticky rail offset ---- */
.form-copy{ top:calc(var(--apm-header) + 24px); }

/* ---- Reduced motion + Elementor editor ---- */
@media (prefers-reduced-motion: reduce){
  .dock-sg-stage{
    position:static !important; height:auto !important;
    min-height:60vh !important; margin-bottom:0 !important;
  }
}
body.elementor-editor-active .dock-sg-stage{
  position:static !important; height:auto !important;
  min-height:60vh !important; margin-bottom:0 !important;
}

/* ===========================================================================
   18. ABOUT
=========================================================================== */
:root{
  --about-gut:clamp(24px, 8.1vw, 140px);   /* comp gutter 140 of 1728 */
}

/* Body copy on this page separates paragraphs by one blank line (the AD's \n\n), which is exactly one 28px line box */
.story-body p + p, .split-body p + p,
.fleet-body p + p, .apart-body p + p{ margin-top:28px; }

/* shared: pull quote + attribution ------------------------------------ Mirrors the home page's .lambo-quote treatment… */
.pull-quote, .pull-quote .elementor-heading-title{
  font-family:"Lato 500",sans-serif; font-weight:500; font-style:italic;
  font-size:27px; line-height:35px;
}
.pull-quote.is-centered{ text-align:center; }
.pull-quote.is-wide p{ max-width:1350px; margin-inline:auto; }

/* Both attribution lines are Heading widgets, and Elementor's widget CSS loads after the kit and sets line-height:1… */
.attrib-name{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:19px; letter-spacing:.02em;
}
.attrib-role{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:13px; letter-spacing:.02em;
}
.attrib-name .elementor-heading-title{ line-height:28px; }
.attrib-role .elementor-heading-title{ line-height:20px; }
.quote-attrib.is-centered{ align-items:center; text-align:center; }

@media (max-width:767px){
  .pull-quote, .pull-quote .elementor-heading-title{ font-size:21px; line-height:29px; }
  .attrib-name .elementor-heading-title{ line-height:25px; }
  .attrib-name{ font-size:17px; }
}

/* HERO (907:271) -------------------------------------------------- Video plate + a FLAT 40% navy overlay — not a… */
@media (min-width:1025px){ .about-hero{ padding-inline:var(--about-gut); } }
.about-hero-copy{ max-width:776px; }
.about-hero-body{ max-width:574px !important; }
/* :not(.txt-link) — the Watch Our Brand Video link is an eyebrow too, and the
   22px bottom margin made its row 57 tall, which dropped the play icon 11px. */
.about-hero-copy .eyebrow:not(.txt-link){ margin-bottom:22px !important; }
.about-hero-copy .about-hero-body{ margin-top:9px !important; }
@media (min-width:1025px){ .about-hero-copy{ margin-bottom:192px; } }

/* 2 + 8. STATS BARS (907:247 gold, 943:46 navy) ---------------------- One class system, two skins */
.about-statbar{ justify-content:center; }
@media (min-width:1025px){ .about-statbar{ padding-inline:var(--about-gut); } }
@media (min-width:1025px){
  .about-statbar.is-gold{ min-height:97px; }
  .about-statbar.is-navy{ min-height:136px; }
}
.about-statbar .co-stat-rule{ height:47px; }
.about-statbar .co-stat-label .elementor-heading-title{ line-height:20px; }

/* Cell widths are content-driven on desktop (the Trust and Stat Bars group), which lets a long label wrap 4-across to 3 and orphan one cell */
@media (max-width:1024px){
  .about-statbar .co-stat-rule{ display:none; }
  .about-statbar .co-stats > .co-stat-cell{
    flex:0 0 calc((100% - 24px - 2px) / 2) !important;
    width:calc((100% - 24px - 2px) / 2) !important;
    max-width:calc((100% - 24px - 2px) / 2) !important;
  }
}

/* GOLD: navy type, Mid Ship trailing character. */
.about-statbar.is-gold .co-stat-num,
.about-statbar.is-gold .co-stat-label{ color:var(--e-global-color-primary); }
.about-statbar.is-gold .hl{ color:var(--e-global-color-secondary); }
.about-statbar.is-gold .co-stat-rule{ background:rgba(24,63,94,.30); }

/* NAVY: white type, gold trailing character */
.about-statbar.is-navy .co-stat-rule{ background:var(--e-global-color-0c26593); }

/* BUILDING THE STANDARD (907:5) ----------------------------------- Solid Mid Ship */
@media (min-width:1025px){ .about-story{ padding:164px var(--about-gut) 184px; } }
.story-grid{ align-items:flex-start !important; }
.story-main{ flex:0 0 615px; max-width:615px; }
.story-aside{
  flex:0 0 724px; max-width:724px;   /* 676 text + 44 pad + 4 rule */
  margin-left:109px; margin-top:74px;
  border-left:4px solid var(--e-global-color-accent);
  padding-left:44px !important; padding-block:62px !important;
}
.about-story .about-sec-head .eyebrow{ margin-bottom:5px !important; }
.about-story .about-sec-head{ margin-bottom:26px; }
.story-aside .eyebrow{ margin-bottom:13px !important; }
.story-aside .pull-quote{ margin-bottom:44px !important; }
.story-aside .quote-attrib{ margin-bottom:26px; }
.story-aside-rule{
  height:1px !important; min-height:0;
  background:rgba(24,63,94,.55);
  margin-bottom:23px;
}
.aside-note, .aside-note p{ font-size:12px; line-height:22px; }

@media (max-width:1279px){
  .story-main{ flex:1 1 auto; max-width:none; }
  .story-aside{
    flex:1 1 auto; max-width:none;
    margin-left:0; margin-top:56px;
    border-left:0; border-top:4px solid var(--e-global-color-accent);
    padding-left:0 !important; padding-block:40px 0 !important;
  }
}

/* 4 + 5 + 7. SPLIT EDITORIAL (907:27 · 932:15 · 943:26) -------------- A 50% photograph against a 50% copy column */
.about-split{ padding:0 !important; }
.split-row{ align-items:stretch !important; }
.split-media{
  flex:0 0 50%; width:50%; max-width:50%;
  min-height:1027px;
}
.split-copy{
  flex:0 0 50%; width:50%; max-width:50%; min-width:0;
  justify-content:flex-start !important;
  padding:164px var(--about-gut) 120px 61px !important;   /* comp top inset */
}
.about-split.is-kyle .split-copy{ padding-top:114px !important; }
.about-split.is-media-right .split-row{ flex-direction:row-reverse !important; }
.about-split.is-media-right .split-copy{
  padding:164px 61px 120px var(--about-gut) !important;
}
.split-copy > *{ max-width:663px !important; }

/* Caption over the photograph — centered on that half, 50px off its bottom. */
.media-caption{ align-items:center !important; margin-bottom:50px; }
.media-name{
  font-family:"Special Gothic Expanded One",sans-serif; font-weight:400;
  font-size:22px; line-height:1; text-transform:uppercase;   /* comp is caps */
}
.media-role{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:11px; line-height:1; letter-spacing:.045em; text-transform:uppercase;
}

/* Caption legibility. The photos are bright (sand, a gym floor), so a navy
   fade rises from the bottom of any photo that carries a caption. Mid Ship
   is under 2:1 on navy, so the name goes white (8:1); the gold role sits
   in the 93% band, 4.6:1 at its worst over white sand. */
.split-media:has(.media-caption){ position:relative; }
.split-media:has(.media-caption)::after{
  content:""; position:absolute; inset:auto 0 0 0; z-index:0;
  height:clamp(220px, 32%, 340px);
  background:linear-gradient(180deg,
    rgba(24,63,94,0) 0,
    rgba(24,63,94,.55) 35%,
    rgba(24,63,94,.93) 62%,
    rgba(24,63,94,.93) 100%);
  pointer-events:none;
}
.split-media > .media-caption{ position:relative; z-index:1; }
.media-caption .media-name,
.media-caption .media-name *{ color:var(--e-global-color-0c26593) !important; }
.media-caption .media-role,
.media-caption .media-role *{ color:var(--e-global-color-accent) !important; }

/* Per-section head gaps — every H2 frame in this comp is a different height. */
.about-split .about-sec-head .eyebrow{ margin-bottom:18px !important; }
.about-split .about-sec-head{ margin-bottom:25px; }
.about-split .pull-quote{ margin-bottom:43px !important; }
.about-split .split-body{ margin-bottom:24px !important; }
.about-split.is-media-right .about-sec-head .eyebrow{ margin-bottom:19px !important; }
.about-split.is-media-right .about-sec-head{ margin-bottom:30px; }

/* Kyle: the tightest head on the page (3.5px) and a Mid Ship hairline. */
.about-split .kyle-rule{
  height:1px !important; min-height:0;
  background:var(--e-global-color-secondary);
  margin:36px 0 22px;
}
.about-creds ul{ list-style:none; margin:0; padding:0; }
.about-creds li{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:13px; line-height:27px !important; text-transform:uppercase;
  padding-left:19.5px; position:relative;                      /* comp indent */
}
.about-creds li::before{
  content:"•"; position:absolute; left:0; top:0;
  color:var(--e-global-color-secondary);
}

@media (max-width:1024px){
  .split-media, .split-copy{
    flex:0 0 100% !important; width:100% !important; max-width:none !important;
  }
  .split-media{ min-height:58vh; }
  .about-split.is-media-right .split-row{ flex-direction:column !important; }
  .split-copy,
  .about-split.is-media-right .split-copy{ padding:64px 48px 72px !important; }
}
@media (max-width:767px){
  .split-copy,
  .about-split.is-media-right .split-copy{ padding:48px 24px 56px !important; }
  .split-media{ min-height:52vh; }
}

/* DO IT RIGHT. DO IT ONCE */
@media (min-width:1025px){ .about-approach{ padding:85px var(--about-gut) 63px; } }
.approach-head{ align-items:center !important; text-align:center; }
.approach-head .eyebrow{ margin-bottom:30px !important; }
.approach-head{ margin-bottom:84px; }

.approach-cards{
  align-items:stretch !important;
  max-width:1349px; margin-inline:auto;          /* comp x189 -> x1538 */
  flex-wrap:nowrap;
}
.approach-cards > *{
  flex:0 0 calc((100% - 12px) / 3) !important;
  width:calc((100% - 12px) / 3) !important;
  max-width:calc((100% - 12px) / 3) !important;
}
.approach-card{
  background:var(--e-global-color-0c26593);
  border-top:4px solid var(--e-global-color-accent);
  min-height:410px;
  padding:36px 36px 40px 28px !important;                      /* comp insets */
}
.card-title .elementor-heading-title{
  font-size:38px !important; line-height:34px !important;
  text-transform:none !important;
}
.card-title{ max-width:382px !important; margin-bottom:27px !important; }
.card-body, .card-body p{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:16px; line-height:33px;
}
.card-body{ max-width:342px !important; }

.approach-close{ margin-top:50px; }
.about-approach .pull-quote{ line-height:41px; margin-bottom:43px !important; }
@media (max-width:1024px){
  .approach-cards > *{
    flex:0 0 100% !important; width:100% !important; max-width:none !important;
  }
  .approach-card{ min-height:0; }
    /* 33px leading on a 342px phone card reads as a gap between every line; dropped to the 28px every other body on this… */
  .card-body, .card-body p{ line-height:28px; }
  .approach-head{ margin-bottom:48px; }
  .card-body, .card-title{ max-width:none !important; }
}

/* 9 + 10. FLEET PANELS (943:271 Barges · 943:308 Trucks) ------------- Full-bleed photograph under the gradient the… */
/* The gradient is an Elementor background OVERLAY set in the template, not a pseudo-element here — Elementor renders… */
.about-fleet{ position:relative; }
@media (min-width:1025px){
  .about-fleet{ padding:120px var(--about-gut) 160px; justify-content:flex-start !important; }
}
.about-fleet > *{ position:relative; z-index:1; }
.fleet-copy{ flex:0 0 442px; width:442px; max-width:442px; }
.about-fleet .about-sec-head .eyebrow{ margin-bottom:32px !important; }
.about-fleet .about-sec-head{ margin-bottom:42px; }
.fleet-body{ margin-bottom:49px !important; }
.fleet-rule{
  height:1px !important; min-height:0;
  background:var(--e-global-color-0c26593);
  margin-bottom:29px;
}
.fleet-stats > *{ width:auto !important; flex:0 0 auto !important; }

/* THE OVERLAY HAS TO CHANGE SHAPE BELOW 1025, not just the layout */
@media (max-width:1024px){
  .about-fleet::before{
    background-image:linear-gradient(0deg,
      rgba(24,63,94,.93) 0%, rgba(24,63,94,.93) 100%) !important;
  }
  .about-fleet{ align-items:flex-start !important; }
  .fleet-copy{ flex:1 1 auto; width:100%; max-width:560px; }
  .about-fleet .about-sec-head .eyebrow{ margin-bottom:18px !important; }
  .about-fleet .about-sec-head{ margin-bottom:28px; }
  .fleet-body{ margin-bottom:32px !important; }
}
@media (max-width:767px){
  .fleet-stats{ flex-wrap:wrap !important; }
  .fleet-stats > *{ flex:0 0 calc((100% - 28px) / 2) !important; }
}

/* 9 + 10 PINNED. Classes: apm-stack-wrap (new parent) + apm-stack ---- These two are the only About sections that can… */
@media (min-width:1025px){
  .about-fleet.apm-stack{
    min-height:100vh !important;
    min-height:100dvh !important;
    justify-content:center !important;
    padding-block:clamp(48px, 7vh, 120px) !important;
  }
}

/* A short desktop window is the same failure as a phone */
@media (min-width:1025px) and (max-height:747px){
  .about-fleet.apm-stack{ position:static !important; }
}

/* Below 1025 the Sticky Stack group has already dropped the pin */
@media (max-width:1024px){
  .about-fleet.apm-stack{ padding-block:88px !important; }
}
@media (max-width:767px){
  .about-fleet.apm-stack{ padding-block:64px !important; }
}

/* WHAT SETS US APART (943:102) ----------------------------------- Warm gray plate */
/* Fog (#EAE8E4), the gray already in the kit */
.about-apart{ background-color:var(--e-global-color-ffff00a); }
@media (min-width:1025px){ .about-apart{ padding:161px var(--about-gut) 120px; } }
.about-apart .about-sec-head .eyebrow{ margin-bottom:38px !important; }
.about-apart .about-sec-head{ margin-bottom:15px; }
.about-apart .about-sec-head{ max-width:663px; }
.apart-lede{ max-width:663px !important; }
.apart-head{ margin-bottom:52px; }

.apart-grid{
  --apart-gap:clamp(32px, 7.6vw, 131px);
  max-width:1327px;
  column-gap:var(--apart-gap) !important;
}
.apart-grid > *{
  flex:0 0 calc((100% - 2 * var(--apart-gap)) / 3) !important;
  width:calc((100% - 2 * var(--apart-gap)) / 3) !important;
  max-width:calc((100% - 2 * var(--apart-gap)) / 3) !important;
}
/* The comp's three icon frames are 22 / 22 / 31 tall with different internal padding */
.apart-icon{ text-align:left !important; margin-bottom:2px !important; }
.apart-icon img{ height:28px !important; width:auto !important;
                 display:block !important; margin-inline:0 !important; }
.apart-item .step-title{ margin-bottom:9px !important; }
.apart-item .step-title .elementor-heading-title{ line-height:1.15 !important; }

@media (max-width:1024px){
  .about-apart{ padding:88px 48px 88px; }
  .apart-grid > *{
    flex:0 0 calc((100% - var(--apart-gap)) / 2) !important;
    width:calc((100% - var(--apart-gap)) / 2) !important;
    max-width:calc((100% - var(--apart-gap)) / 2) !important;
  }
}
@media (max-width:767px){
  .about-apart{ padding:64px 24px 64px; }
  .apart-grid > *{
    flex:0 0 100% !important; width:100% !important; max-width:none !important;
  }
}

/* ---- structural fallback for the About classes (see the Layout Safety Nets group) ---------- */
.about-hero, .about-hero-copy, .about-statbar, .co-stat-cell,
.about-story, .story-main, .story-aside, .about-sec-head,
.about-split, .split-media, .split-copy, .media-caption,
.about-approach, .approach-head, .approach-card, .approach-close,
.about-fleet, .fleet-copy, .fleet-stat,
.about-apart, .apart-head, .apart-item{
  display:flex; flex-direction:column;
}
.story-grid, .split-row, .approach-cards, .fleet-stats, .apart-grid{
  display:flex; flex-direction:row;
}

/* ---- What Sets Us Apart — the ground is a dependency, not a preference ---- */
.about-apart.about-apart{
  background-color:var(--e-global-color-ffff00a) !important;
  background-image:none !important;
}

/* ---- Tablet landscape ---- */
@media (min-width:1025px) and (max-width:1366px){
  .about-hero{ padding-top:72px !important; padding-bottom:72px !important; }

  /* About stat bars: one row. Labels total 893 at 16px. */
  .about-statbar{ padding-left:48px !important; padding-right:48px !important; }
  .about-statbar .co-stats{ flex-wrap:nowrap !important; column-gap:16px !important; }
  .about-statbar .co-stat-label .elementor-heading-title{
    font-size:clamp(14px, 1.37vw, 16px) !important;
  }
}

/* ---- Fleet photo as a header band, and phone spacing ---- */
@media (max-width:1024px){
  .about-fleet.about-fleet{
    --fleet-photo:56.25vw;
    background-color:var(--e-global-color-primary) !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    padding-top:calc(var(--fleet-photo) + 32px) !important;
    padding-bottom:64px !important;
  }
  .about-fleet.about-fleet::before{
    opacity:1 !important;
    background-image:linear-gradient(180deg,
      rgba(24,63,94,0) 0,
      rgba(24,63,94,0) calc(var(--fleet-photo) - 72px),
      rgba(24,63,94,1) calc(var(--fleet-photo) - 1px)) !important;
  }
  .apart-grid{ row-gap:48px !important; }
}
@media (max-width:767px){
  .about-fleet.about-fleet{
    padding-top:calc(var(--fleet-photo) + 24px) !important;
    padding-bottom:56px !important;
  }
  .about-apart.about-apart{ padding:56px 24px !important; }
  .about-apart .apart-head{ margin-bottom:32px !important; }
  .apart-grid{ row-gap:36px !important; }
  .apart-grid > *{ padding-top:0 !important; padding-bottom:0 !important; min-height:0 !important; }
}

/* ===========================================================================
   19. OUR WORK
=========================================================================== */
:root{
  --ow-gut:clamp(24px, 8.1vw, 140px);      /* comp gutter 140 of 1728 */
}

/* HERO (978:735) --------------------------------------------------- Full-bleed photograph under a GRADIENT overlay —… */
@media (min-width:1025px){ .ourwork-hero{ padding-inline:var(--ow-gut); } }
.ourwork-hero-copy{ max-width:861px; }              /* H1 wraps 3-up at 861 */
.ourwork-hero-body{ max-width:574px !important; }
.ourwork-hero-copy .eyebrow:not(.txt-link){ margin-bottom:14.5px !important; }
.ourwork-hero-copy .ourwork-hero-body{ margin-top:43px !important; }
/* Block is 420.5 tall and its centre sits 64.75 above the section's, so it is centered and then pushed up by twice that */
@media (min-width:1025px){ .ourwork-hero-copy{ margin-bottom:129.5px; } }

/* PROJECT GALLERY (978:836) ---------------------------------------- Fog plate, 1447 tall in the comp */
.ourwork-gallery{ background-color:var(--e-global-color-ffff00a); }
@media (min-width:1025px){ .ourwork-gallery{ padding:57px var(--ow-gut) 134px; } }

/* The slot is structurally inert by design — it must not impose a width, a gap or an alignment on the widget it holds */
.ow-grid-slot, .ow-video-slot{ width:100%; max-width:none; }

/* 2b. LOAD MORE (978:1094) -------------------------------------------- Measured in Figma 2026-09-17 */
.ourwork-gallery .kiss-coverflow .kiss-more{
  margin:70px 0 0 !important;
  padding:0 !important;
  display:flex;                /* it already is one — see below */
  justify-content:center;
  text-align:center;
}

/* Grid mode still emits the slider's pagination. The comp has no dots. */
.ourwork-gallery .kiss-coverflow .kiss-dots{ display:none; }

.ourwork-gallery .kiss-coverflow button.kiss-more-btn,
.ourwork-gallery .kiss-coverflow button.kiss-more-btn--link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:25px;
  letter-spacing:normal;
  text-transform:uppercase;
  color:var(--e-global-color-secondary);
  transition:color .2s ease;
}
.ourwork-gallery .kiss-coverflow button.kiss-more-btn:hover,
.ourwork-gallery .kiss-coverflow button.kiss-more-btn:focus-visible{
  color:var(--e-global-color-primary);
}

/* THE CHEVRON — 978:1096, 15x5, the same asset as the nav dropdown */
.ourwork-gallery .kiss-coverflow button.kiss-more-btn::after{
  content:"";
  display:inline-block;        /* survives the button falling back to inline */
  flex:0 0 auto;
  width:15px;
  height:5px;
  background-color:currentColor;
  transform:translateY(-3px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%205'%3E%3Cpath%20d='M1%201l6.5%203L14%201'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%205'%3E%3Cpath%20d='M1%201l6.5%203L14%201'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
  -webkit-mask-size:contain;       mask-size:contain;
}

@media (max-width:1024px){
  .ourwork-gallery .kiss-coverflow .kiss-more{ margin-top:48px !important; }
}
@media (max-width:767px){
  .ourwork-gallery .kiss-coverflow .kiss-more{ margin-top:36px !important; }
}
@media (prefers-reduced-motion: reduce){
  .ourwork-gallery .kiss-coverflow button.kiss-more-btn{ transition:none; }
}

/* VIDEO GALLERY (978:1098) ----------------------------------------- Mid Ship Blue band */
@media (min-width:1025px){ .ourwork-videos{ padding:124px var(--ow-gut) 103px; } }
.ow-sec-head{ max-width:540px; margin-bottom:72px; }
.ow-sec-head .eyebrow{ margin-bottom:12px !important; }
/* TAG-SCOPED, NOT WIDGET-SCOPED */
.ow-sec-head h2.elementor-heading-title{ line-height:58px; }

@media (max-width:1024px){
  .ow-sec-head{ max-width:none; margin-bottom:48px; }
  .ow-sec-head h2.elementor-heading-title{ line-height:1.02; }
}
@media (max-width:767px){
  .ow-sec-head{ margin-bottom:36px; }
}

/* ---- structural fallback for the Our Work classes (see the Layout Safety Nets group) -------- */
.ourwork-hero, .ourwork-hero-copy, .ourwork-gallery, .ourwork-videos,
.ow-sec-head, .ow-grid-slot, .ow-video-slot{
  display:flex; flex-direction:column;
}

/* PHONES — two fixes the harness can only half-see */
.ourwork-videos .eyebrow .elementor-heading-title{ overflow-wrap:break-word; }

@media (max-width:767px){
  .ourwork-hero h1.elementor-heading-title{
    font-size:clamp(28px, 10.8vw, 44px) !important;
  }
}

/* ---- KISS YouTube gallery ---- */
.elementor-widget-kiss_youtube .kiss-youtube{
  /* Palette. The band is #0071B7, so everything goes white. */
  --kiss-yt-title-color:var(--e-global-color-0c26593);
  --kiss-yt-meta-color:var(--e-global-color-0c26593);
  --kiss-yt-meta-opacity:1;
  --kiss-yt-meta-size:.75em;                 /* 12 of the kit's 16 */
  --kiss-yt-accent:var(--e-global-color-accent);
  --kiss-yt-play-fill:var(--e-global-color-accent);
  --kiss-yt-scrollbar-thumb:var(--e-global-color-accent);
  --kiss-yt-divider-color:var(--e-global-color-0c26593);
  --kiss-yt-divider-opacity:.25;

  /* Geometry — comp values, all of which are the plugin's defaults. */
  --kiss-yt-split:62.2%;                     /* 900 / 1448 */
  --kiss-yt-gap:20px;
  --kiss-yt-radius:0px;
  --kiss-yt-row-thumb:50.2%;                 /* 265 / 528 */
  --kiss-yt-row-gap:20px;
  --kiss-yt-row-pad:19px;                    /* 149 + 2*19 + 1 = 188 pitch */
  --kiss-yt-divider:1px;
  --kiss-yt-play-size:92px;
  --kiss-yt-play-size-row:32px;
  --kiss-yt-row-title-lines:2;
  --kiss-yt-desc-lines:3;                    /* 84 / 28 */
  --kiss-yt-list-fade:0px;
}

/* THE KIT'S HEADING RULES ARE WHAT BREAK THE TITLES */
.elementor-widget-kiss_youtube [class*="kiss-yt-title"]{
  text-transform:none;
  font-weight:400;
  word-break:normal;                 /* stops "INSTALLATI / ON OF A" */
  overflow-wrap:break-word;
}

/* Featured and card titles */
.elementor-widget-kiss_youtube [class*="kiss-yt-title"]:not(.kiss-yt-title--row){
  font-size:28px;
  line-height:1.2;
}

/* Up-next titles. 12/18 — two lines is 36 in the comp's 39px box. */
.elementor-widget-kiss_youtube .kiss-yt-title--row{
  font-size:12px;
  line-height:18px;
}

@media (max-width:1024px){
  .elementor-widget-kiss_youtube [class*="kiss-yt-title"]:not(.kiss-yt-title--row){
    font-size:24px;
  }
}
@media (max-width:767px){
  .elementor-widget-kiss_youtube .kiss-youtube{
    --kiss-yt-row-thumb:40%;
    --kiss-yt-row-pad:12px;
  }
  .elementor-widget-kiss_youtube [class*="kiss-yt-title"]:not(.kiss-yt-title--row){
    font-size:20px;
  }
}

/* THE REAL MARKUP, read off the rendered widget 2026-09-16 (v0.2.2): */

/* THE "UP NEXT" LABEL IS GOLD IN THE COMP (978:1123 — Lato 800 16 uppercase, accent, in a 31px line box) */
.elementor-widget-kiss_youtube .kiss-yt-label{
  font-family:"Lato 800",sans-serif;
  font-weight:800;
  font-size:16px;
  line-height:31px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--e-global-color-accent);
}

/* UP-NEXT ROWS CARRY NO DESCRIPTION IN THE COMP */
.elementor-widget-kiss_youtube .kiss-yt-aside .kiss-yt-desc{ display:none; }

/* THE META FACES ARE SPLIT IN THE COMP, AND ONLY THE ROWS WERE BUILT */
.elementor-widget-kiss_youtube .kiss-youtube .kiss-yt-meta{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:12px;
  text-transform:none;
}
.elementor-widget-kiss_youtube .kiss-youtube .kiss-yt-item--row .kiss-yt-meta{
  font-family:"Lato 500",sans-serif;
  line-height:15px;
}

/* Label spacing, measured */
.elementor-widget-kiss_youtube .kiss-youtube{
  --kiss-yt-label-space:33px;
  --kiss-yt-label-gap:2px;
}

/* THREE ROWS VISIBLE, THEN SCROLL — and the likely reason it is showing more */
.elementor-widget-kiss_youtube .kiss-yt-aside,
.elementor-widget-kiss_youtube .kiss-yt-list-wrap{ min-height:0; }

/* FALLBACK, comp-exact at the design width only */

/* COLOR — DECLARE THE PROPERTY, NOT THE VARIABLE */
.elementor-widget-kiss_youtube .kiss-youtube [class*="kiss-yt-title"],
.elementor-widget-kiss_youtube .kiss-youtube .kiss-yt-meta,
.elementor-widget-kiss_youtube .kiss-youtube .kiss-yt-meta *,
.elementor-widget-kiss_youtube .kiss-youtube .kiss-yt-desc,
.elementor-widget-kiss_youtube .kiss-youtube .kiss-yt-desc *{
  color:var(--e-global-color-0c26593);
}

/* FEATURED POSTER SCRIM — comp 978:1127, rgba(0,61,91,.52) over the 900x506 plate with the 92px play mark ON TOP of it */

/* CONTRAST ON THIS BAND — measured, not estimated */

/* ===========================================================================
   20. SERVICE PLANS
=========================================================================== */
:root{ --plans-gut:clamp(24px, 8.1vw, 140px); }

/* HERO (947:161) --------------------------------------------------- Local y: */
@media (min-width:1025px){
  .plans-hero{ padding-inline:var(--plans-gut); }
  .plans-hero-copy{ margin-bottom:183px; }
}
.plans-hero-copy .eyebrow:not(.txt-link){ margin-bottom:9px !important; }
.plans-hero-h1{ max-width:861px !important; margin-bottom:18px !important; }
.plans-hero-body{ max-width:574px !important; }

/* CREDENTIAL BAR (947:437) ----------------------------------------- The whole band is the existing trust bar */
@media (min-width:1025px){
  .plans-creds{ padding-inline:clamp(24px, 13.6vw, 236px); }
}

/* 3 + 5. THE TWO FOUR-COLUMN ROWS (947:481 · 951:673) ----------------- Identical geometry, different grounds, so they… */
@media (min-width:1025px){
  .plans-why{    padding:124px var(--plans-gut) 127px; }
  .plans-signup{ padding:124px var(--plans-gut) 187px; }
}
.plans-sec-head .eyebrow{ margin-bottom:10px !important; }
.plans-why-h2,
.plans-signup-h2{ max-width:822px !important; margin-bottom:20px !important; }
.plans-why-h2{ max-width:540px !important; }
.plans-lede, .plans-lede p{ line-height:28px; }
.plans-lede{ max-width:684px !important; }

.plans-why .plans-sec-head,
.plans-signup .plans-sec-head{ margin-bottom:82px; }

/* ⚠ THESE TWO ROWS ARE NOT THE SAME GRID, AND I FLATTENED THEM ON THE FIRST PASS */
.plans-why-cards,
.plans-signup-cards{
  align-items:stretch !important;
  column-gap:38px !important;
}
.plans-why-cards > *,
.plans-signup-cards > *{
  flex:1 1 0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
}
.plans-signup-cards > *:nth-child(2){ flex-grow:1.07 !important; }
.plans-signup-cards > *:nth-child(3){ flex-grow:1.015 !important; }
/* Column title is Special Gothic 20 in a 46px frame; 26 is the real line box */
.plans-col-title .elementor-heading-title{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:26px;
  text-transform:none;
}
/* A TWO-LINE FLOOR, SO A WRAP IS NOT A BUG */
.plans-col-title .elementor-heading-title{ text-wrap:balance; }
.plans-col-title{
  min-height:52px;
  margin-bottom:10px !important;
}
@media (max-width:767px){
    /* One column, so nothing is aligning with anything — the floor would just leave a gap under a short title */
  .plans-col-title{ min-height:0; }
}
.plans-col-body, .plans-col-body p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
}
.plans-col-body p{ margin:0; }

/* PACKAGES (947:523) ----------------------------------------------- Local y: */
@media (min-width:1025px){
  .plans-packages{ padding:124px var(--plans-gut) 138px; }
}
.plans-packages-h2{ max-width:540px !important; margin-bottom:25px !important; }
.plans-packages .plans-lede{ margin-bottom:66px !important; }

/* THE TOGGLE. Two chips, flush, square, 38 tall: */
.plan-toggle{ margin-bottom:57px; }
.plan-chip{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  padding:0 18px;
  border:1px solid var(--e-global-color-secondary);
  color:var(--e-global-color-secondary);
  background:transparent;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.plan-chip + .plan-chip{ margin-left:-1px; }
.plan-chip .elementor-heading-title{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:36px;            /* 38 box minus the 1px borders */
  text-transform:uppercase;
  color:inherit;
}
.plan-chip.is-active{
  background:var(--e-global-color-secondary);
  color:var(--e-global-color-0c26593);
}
/* The chips are divs with tabindex, so a mouse click leaves Chrome's own focus ring behind */
.plan-chip:focus{ outline:none; }
.plan-chip:focus-visible{
  outline:2px solid var(--e-global-color-accent);
  outline-offset:2px;
}

/* ⚠ PRE-SCRIPT DEFAULT, AND WHY IT IS GATED */
html:not(.plans-ready) #plans-annual{ display:none; }
.plan-grid.is-hidden{ display:none !important; }

.plan-grid > *{
  flex:0 0 calc((100% - 14px) / 3) !important;
  width:calc((100% - 14px) / 3) !important;
  max-width:calc((100% - 14px) / 3) !important;
}

/* CARD. 478x558 white. Insets measured off the 4-Post card: */
.plan-card{
  min-height:558px;
  padding:23px 27px 19px !important;
}
.plan-title .elementor-heading-title{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:28px; line-height:34px;
  text-transform:none;
}
.plan-title{ margin-bottom:18px !important; }

.plan-price .elementor-heading-title{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:69px; line-height:58px;
}
.plan-price{ margin-bottom:10px !important; }

.plan-freq .elementor-heading-title{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:16px; line-height:35px;
  text-transform:uppercase; letter-spacing:.02em;
}
.plan-freq{ margin-bottom:2px !important; }

.plan-billed, .plan-billed p,
.plan-scope,  .plan-scope p,
.plan-note,   .plan-note p{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:12px;
}
.plan-billed, .plan-billed p{ line-height:21px; }
.plan-scope,  .plan-scope p{  line-height:16px; }
.plan-note,   .plan-note p{   line-height:14px; }
.plan-billed{ margin-bottom:22px !important; }
.plan-scope{  margin-bottom:14px !important; }
.plan-note{   margin-bottom:24px !important; }
.plan-billed p, .plan-scope p, .plan-note p{ margin:0; }

.plan-list, .plan-list li{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:16px; line-height:33px;
}
.plan-list{ margin-bottom:24px !important; }
.plan-list ul{ margin:0; padding-left:24px; }

.plan-cta{ margin-top:auto; }

.plans-footnote, .plans-footnote p{ line-height:28px; }
.plans-footnote{ margin-top:41px !important; }

/* FAQ (952:692) ---------------------------------------------------- Nothing to build */
@media (min-width:1025px){
  .plans-faq{ padding:124px var(--plans-gut) 127px; }
}
.plans-faq-h2{ max-width:596px !important; }
.plans-faq .plans-sec-head{ margin-bottom:72px; }

/* ---- TABLET (<=1024) ------------------------------------------------------ */
@media (max-width:1024px){
  .plans-hero-h1{ max-width:none !important; }
  .plans-why-h2, .plans-signup-h2, .plans-packages-h2{
    max-width:none !important;
  }
  .plans-lede, .plans-hero-body{ max-width:none !important; }

  .plans-why .plans-sec-head,
  .plans-signup .plans-sec-head{ margin-bottom:48px; }
  .plans-faq .plans-sec-head{ margin-bottom:40px; }

    /* Two across. The grow ratios come off here — at half width the extra 7% on column 2 buys nothing and leaves the pair… */
  .plans-why-cards > *,
  .plans-signup-cards > *,
  .plans-signup-cards > *:nth-child(2),
  .plans-signup-cards > *:nth-child(3){
    flex:0 0 calc((100% - 38px) / 2) !important;
    width:calc((100% - 38px) / 2) !important;
    max-width:calc((100% - 38px) / 2) !important;
  }

    /* Three 478px cards will not hold one row much below 1500 */
  .plan-grid > *{
    flex:0 0 calc((100% - 7px) / 2) !important;
    width:calc((100% - 7px) / 2) !important;
    max-width:calc((100% - 7px) / 2) !important;
  }
  .plan-card{ min-height:0; }
  .plan-price .elementor-heading-title{ font-size:56px; line-height:48px; }
  .plans-packages .plans-lede{ margin-bottom:48px !important; }
  .plan-toggle{ margin-bottom:40px; }
}

/* ---- PHONES (<=767) ------------------------------------------------------- */
@media (max-width:767px){
  .plans-why-cards > *,
  .plans-signup-cards > *,
  .plans-signup-cards > *:nth-child(2),
  .plans-signup-cards > *:nth-child(3),
  .plan-grid > *{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:none !important;
  }
  .plan-price .elementor-heading-title{ font-size:48px; line-height:44px; }
  .plan-card{ padding:24px !important; }
  .plans-col-body, .plans-col-body p{ line-height:26px; }

    /* The chips have to stay one row — they are a choice between two things, and stacking them reads as two buttons */
  .plan-chip{ padding:0 14px; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety Nets group. */
.plans-hero, .plans-hero-copy, .plans-sec-head, .plans-why, .plans-packages,
.plans-signup, .plans-faq, .plan-card{
  display:flex; flex-direction:column;
}

/* ---- Credential strip — two-up on a phone ---- */
@media (max-width:767px){
  .svc-creds{ padding:22px 24px !important; }
    /* THE ROW IS flex-direction:column HERE — set on the container's Mobile tab in the editor, which is why widths alone… */
  .svc-creds-row{
    flex-direction:row !important; flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    column-gap:16px !important; row-gap:16px !important;
  }
  .svc-creds-row > .svc-cred{
    flex:0 0 calc(50% - 8px) !important;
    width:calc(50% - 8px) !important;
    max-width:calc(50% - 8px) !important;
  }
    /* 3.3vw = 13.6 at 412 and clamps to 13 at 360, where FACTORY-CERTIFIED measures 131 against a 148 column */
  .svc-cred-label{ font-size:clamp(13px, 3.3vw, 15px) !important; }
  .svc-cred-label .elementor-heading-title{ line-height:1.35 !important; }
}

/* ---- Credential strip — two-up through 1399 ---- */
@media (min-width:1025px) and (max-width:1399px){
  .svc-creds{ padding:26px 48px !important; }
  .svc-creds-row{
    justify-content:flex-start !important;
    column-gap:24px !important; row-gap:18px !important;
  }
  .svc-creds-row > .svc-cred{
    flex:0 0 calc(50% - 12px) !important;
    width:calc(50% - 12px) !important;
    max-width:calc(50% - 12px) !important;
  }
  .svc-cred-divider{ display:none !important; }
}

/* ---- Credential strip — one row from 1100 ---- */
@media (min-width:1100px) and (max-width:1399px){
  .svc-creds{ padding:26px 48px !important; }
  .svc-creds-row{
    flex-wrap:nowrap !important; justify-content:space-between !important;
    column-gap:16px !important;
  }
  .svc-creds-row > .svc-cred{
    flex:0 1 auto !important; width:auto !important; max-width:none !important;
  }
  .svc-cred-divider{ display:block !important; }
  .svc-cred-label{ font-size:14px !important; }
}

/* ---- Hero overlay: fix in the editor, not here ---- */
/* SERVICE PLANS HERO — NOT FIXABLE FROM HERE, ON PURPOSE ----------- Flagged, not overridden */

/* ---- H1 has its own line break, so the 861 cap only forced a bad one ---- */
.plans-hero-h1{ max-width:none !important; }

/* ---- H1 and hero padding at tablet landscape ---- */
@media (min-width:1025px) and (max-width:1366px){
  .plans-hero-h1 .elementor-heading-title{
    font-size:clamp(80px, 8.1vw, 100px) !important; line-height:.92 !important;
  }
  .plans-hero{ padding-top:72px !important; padding-bottom:72px !important; }
}

/* ---- Hero crop on a phone ----
   A PERCENTAGE, never px. A pixel offset is right at one viewport width and
   wrong at every other — a -467px value typed on the Mobile tab is what left a
   third of the 800px hero bare. Tune --plans-hero-x, nothing else. */
:root{ --plans-hero-x:70%; }
@media (max-width:767px){
  .plans-hero{ background-position:var(--plans-hero-x) center !important; }
}

/* ---- Salt, heat and time — the photo on a phone ---- */
:root{
  --why-photo-h:38vh;
  --why-photo-x:50%;
}
@media (max-width:1024px){
  .plans-why{
    background-color:var(--e-global-color-primary) !important;
    background-size:auto var(--why-photo-h) !important;
    background-position:var(--why-photo-x) top !important;
    background-repeat:no-repeat !important;
    padding-top:calc(var(--why-photo-h) + 48px) !important;
  }
  .plans-why::before{
    background-color:rgba(24,63,94,.34) !important;
    background-image:none !important;
  }
}

/* ---- Anchor landing for #service-plans ---- */
#service-plans{ scroll-margin-top:calc(var(--apm-header) + 24px); }

/* ---- Checkout + Thank You ---- */
.dock-form-band.is-light{
  background-color:var(--e-global-color-0c26593) !important;
}
/* Kill the navy scrim. It is a ::before on the band, which on a white ground would paint a navy gradient over the… */
.dock-form-band.is-light::before{ content:none !important; }

/* Labels were Sunshine for a navy band — 1.93:1 on white, which is unreadable rather than merely short of AA */
.dock-form-band.is-light .gfield_label,
.dock-form-band.is-light .gfield_required{
  color:var(--e-global-color-primary) !important;
}
/* Sub-labels, descriptions and choice labels were white */
.dock-form-band.is-light .gform-field-label--type-sub,
.dock-form-band.is-light .ginput_complex label,
.dock-form-band.is-light .gfield_description,
.dock-form-band.is-light .gfield_checkbox label,
.dock-form-band.is-light .gfield_radio label{
  color:var(--e-global-color-primary) !important;
}
/* The consent field's terms link has to look like a link on this ground. */
.dock-form-band.is-light .gfield_description a,
.dock-form-band.is-light .gfield_consent_label a{
  color:var(--e-global-color-secondary) !important;
  text-decoration:underline; text-underline-offset:3px;
}

/* CORRECTED 2026-09-19. This first shipped as a solid Mid Ship pill on the strength of "it matches the plan cards'… */
.dock-form-band.is-light button.gform_button{
  background:var(--e-global-color-accent) !important;
  border-color:var(--e-global-color-accent) !important;
  border-radius:70px !important;
  color:var(--e-global-color-primary) !important;
}
.dock-form-band.is-light button.gform_button:hover,
.dock-form-band.is-light button.gform_button:focus-visible{
  background:var(--e-global-color-primary) !important;
  border-color:var(--e-global-color-primary) !important;
  color:var(--e-global-color-0c26593) !important;
}
.dock-form-band.is-light .gfield :is(input,select,textarea):focus-visible{
  outline-color:var(--e-global-color-secondary) !important;
}


/* The Contact comp runs its fields to 866 rather than the Docks form's 730. */
@media (min-width:1025px){
  .dock-form-band.is-light .gform_wrapper{ max-width:866px; }
  .checkout-band{ padding:120px var(--dock-gut) 140px; }
}

/* CHECKOUT RAIL -------------------------------------------------------- Three short reassurances beside the card fields: */
.checkout-h1 .elementor-heading-title{ font-size:60px !important; }
.checkout-h1{ margin-bottom:40px !important; }
.checkout-point{ margin-bottom:28px; }
.checkout-point:last-child{ margin-bottom:0; }
.checkout-point-title .elementor-heading-title{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:20px; line-height:26px;
  text-transform:none;
}
.checkout-point-title{ margin-bottom:8px !important; }
.checkout-point-body, .checkout-point-body p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
}
.checkout-point-body p{ margin:0; }

@media (max-width:1024px){
  .checkout-h1 .elementor-heading-title{ font-size:40px !important; }
  .checkout-h1{ margin-bottom:28px !important; }
}
@media (max-width:767px){
  .checkout-h1 .elementor-heading-title{ font-size:34px !important; }
}

/* THANK YOU ------------------------------------------------------------ Deliberately short */
@media (min-width:1025px){
  .thanks-head{ padding:120px var(--plans-gut) 120px; }
  .thanks-next{ padding:100px var(--plans-gut) 120px; }
}
.thanks-copy{ max-width:760px; }
.thanks-h1 .elementor-heading-title{ font-size:72px !important; line-height:.94em !important; }
.thanks-h1{ margin-bottom:24px !important; }
.thanks-copy .eyebrow:not(.txt-link){ margin-bottom:10px !important; }
.thanks-body{ max-width:620px !important; }

.thanks-next .plans-sec-head{ margin-bottom:56px; }
.thanks-cols{
  max-width:1449px;
  align-items:stretch !important;
  margin-bottom:56px;
}
.thanks-cols > *{
  flex:0 0 calc((100% - 94px) / 3) !important;
  width:calc((100% - 94px) / 3) !important;
  max-width:calc((100% - 94px) / 3) !important;
}
.thanks-ctas{ align-items:center; }

@media (max-width:1024px){
  .thanks-h1 .elementor-heading-title{ font-size:48px !important; }
  .thanks-cols > *{
    flex:0 0 100% !important; width:100% !important; max-width:none !important;
  }
  .thanks-next .plans-sec-head{ margin-bottom:36px; }
}
@media (max-width:767px){
  .thanks-h1 .elementor-heading-title{ font-size:38px !important; }
  .thanks-ctas{ align-items:stretch; }
  .thanks-ctas .elementor-widget-button{ width:100% !important; }
  .thanks-ctas .elementor-button{ display:flex; width:100%; justify-content:center; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety Nets group. */
.checkout-band, .checkout-point, .thanks-head, .thanks-copy, .thanks-next{
  display:flex; flex-direction:column;
}

/* ---- Service plan receipt ---- */
.sp-receipt{
  background:var(--e-global-color-ffff00a);
  max-width:560px;
  padding:30px 36px 34px;
  margin:0 0 56px;
  border-radius:4px;
}
.sp-receipt-title{
  font-family:"Special Gothic Expanded One",sans-serif; font-weight:400;
  font-size:14px; line-height:25px; letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--e-global-color-primary);
  margin:0 0 14px;
}
.sp-receipt-list{ margin:0; padding:0; }
.sp-receipt-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px;
  padding:13px 0;
  border-bottom:1px solid rgba(24,63,94,.15);
}
.sp-receipt-row:last-child{ border-bottom:0; padding-bottom:0; }
.sp-receipt-k{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:15px; line-height:24px;
  color:var(--e-global-color-primary);
  margin:0; flex:0 0 auto;
}
.sp-receipt-v{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:15px; line-height:24px;
  color:var(--e-global-color-primary);
  margin:0; text-align:right;
  min-width:0; overflow-wrap:anywhere;
}

@media (max-width:767px){
  /* A long email will not sit beside its key in half a phone. */
  .sp-receipt{ padding:24px 24px 28px; margin-bottom:40px; }
  .sp-receipt-row{ flex-direction:column; gap:2px; padding:11px 0; }
  .sp-receipt-v{ text-align:left; }
}

/* ===========================================================================
   21. CONTACT
=========================================================================== */
/* BAND 1 · THE FORM BAND ----------------------------------------------- Doubled class: */
.contact-band.contact-band{ padding:0 !important; }
.contact-row{ align-items:stretch !important; }

.contact-rail{
  flex:0 0 662px !important; width:662px !important; max-width:662px !important;
  padding:69px 60px 96px 140px !important;
}
/* Comp sets every rail text box to 333 wide */
.contact-rail > *{ max-width:333px !important; }
/* The 333 cap is the comp's box for the TITLE and BODY, where it sets the wrap */
.contact-rail > .contact-item{ max-width:none !important; }

.contact-rail-title .elementor-heading-title{
  font-size:50px !important; line-height:62px !important;
}
.contact-rail-title{ margin-bottom:45px !important; }

.contact-rail-body, .contact-rail-body p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
}
.contact-rail-body p{ margin:0; }
.contact-rail-body{ margin-bottom:38px !important; }

/* Comp spaces the three blocks 49 then 63 apart */
.contact-item + .contact-item{ margin-top:56px; }
.contact-item-label{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
  letter-spacing:0; text-transform:uppercase;
  margin:0;
}
.contact-item-value{
  font-family:"Lato 900",sans-serif; font-weight:900;
  font-size:25px; line-height:28px;
  margin:0;
    /* info@marineboatlifts.com sets to ~336px in Lato Black 25 against a 333px box */
  overflow-wrap:break-word;
}
.contact-item-value a{
  color:inherit;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:from-font;
}
.contact-item-value a:hover,
.contact-item-value a:focus-visible{
  color:var(--e-global-color-accent);
}

/* ---- BAND 1 · THE FORM COLUMN --------------------------------------------- */
.contact-form{
  flex:1 1 0 !important; width:auto !important; min-width:0;
  padding:99px 140px 75px 60px !important;
}
.contact-form-title .elementor-heading-title{
  font-size:30px !important; line-height:38px !important;
}
.contact-form-title{ max-width:583px; margin-bottom:4px !important; }
.contact-form-sub, .contact-form-sub p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
}
.contact-form-sub p{ margin:0; }
.contact-form-sub{ max-width:854px !important; margin-bottom:11px !important; }

/* Comp runs 26/34 here against the Docks form's 22/33 */
.contact-form .gform_fields{
  column-gap:26px !important;
  row-gap:34px !important;
}
/* Submit is 150 x 45 in the comp; the label plus chevron sets to ~141. */
.contact-band button.gform_button{ min-width:150px; justify-content:center; }

@media (max-width:1180px){
  .contact-rail{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    padding:64px var(--dock-gut) 72px !important;
  }
  .contact-rail > *{ max-width:560px !important; }
  .contact-form{ padding:72px var(--dock-gut) 88px !important; }
}
@media (max-width:767px){
  .contact-rail{ padding:48px 24px 56px !important; }
  .contact-rail-title .elementor-heading-title{
    font-size:34px !important; line-height:42px !important;
  }
  .contact-rail-title{ margin-bottom:28px !important; }
  .contact-item + .contact-item{ margin-top:36px; }
  .contact-item-value{ font-size:22px; }
  .contact-form{ padding:56px 24px 72px !important; }
  .contact-form .gform_fields{ column-gap:0 !important; row-gap:28px !important; }
}

/* ---- BAND 2 · SOUTH FLORIDA WATERWAYS ------------------------------------- */
.contact-map-band{ padding:123px var(--dock-gut) 101px; }
.contact-map-row{ align-items:flex-start !important; }

.contact-geo{
  flex:0 0 582px !important; width:582px !important; max-width:582px !important;
}
.contact-geo-title .elementor-heading-title{
  font-size:54px !important; line-height:58px !important;
}
.contact-geo-title{ margin-bottom:25px !important; }
.contact-geo-body, .contact-geo-body p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
}
.contact-geo-body p{ margin:0; }
.contact-geo-body{ max-width:510px !important; margin-bottom:64px !important; }

.contact-cities{ max-width:358px !important; }
.contact-cities p{
  font-family:"Special Gothic Expanded One",sans-serif; font-weight:400;
  font-size:20px; line-height:58px;
  margin:0;
}

/* The plate sits 6px below the title box in the comp. */
.contact-map-plate{
  flex:1 1 0 !important; width:auto !important; min-width:0;
  margin-top:6px;
}
/* 866 x 1096 at 1728. Held as a ratio so the plate keeps its portrait crop on a wider window, capped at the drawn… */
.apm-map{
  position:relative;
  width:100%;
  aspect-ratio:866 / 1096;
  max-height:1096px;
  background:var(--e-global-color-ffff00a);
  overflow:hidden;
}
/* The plate paints from a static WebP render and only fetches the Maps JS API (~300KB over four requests) when… */
.apm-map-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.apm-map-load{
  position:absolute; left:50%; bottom:24px;
  transform:translateX(-50%);
  z-index:2;
  min-height:45px; padding:12px 26px;
  border:0; border-radius:70px;
  background:var(--e-global-color-accent);
  color:var(--e-global-color-primary);
  font-family:"Lato 900",sans-serif; font-weight:900;
  font-size:16px; line-height:21px; letter-spacing:.04em;
  text-transform:uppercase; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.apm-map-load:hover,
.apm-map-load:focus-visible{
  background:var(--e-global-color-primary);
  color:var(--e-global-color-0c26593);
}
.apm-map-load:focus-visible{
  outline:2px solid var(--e-global-color-accent); outline-offset:3px;
}
.apm-map-load[disabled]{ opacity:.7; cursor:progress; }
.apm-map.is-live .apm-map-load{ display:none; }

@media (max-width:1024px){
  .contact-map-band{ padding:88px var(--dock-gut) 96px; }
  .contact-geo{
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    margin-bottom:48px;
  }
  .contact-geo-title .elementor-heading-title{
    font-size:44px !important; line-height:50px !important;
  }
  .contact-map-plate{
    flex:0 0 100% !important; width:100% !important; margin-top:0;
  }
  .apm-map{ aspect-ratio:4 / 3; max-height:none; }
}
@media (max-width:767px){
  .contact-map-band{ padding:64px 24px 72px; }
  .contact-geo-title .elementor-heading-title{
    font-size:34px !important; line-height:40px !important;
  }
  .contact-geo-body{ margin-bottom:40px !important; }
  .contact-cities p{ line-height:44px; }
  .apm-map{ aspect-ratio:3 / 4; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety Nets group. */
.contact-band, .contact-rail, .contact-item, .contact-form,
.contact-map-band, .contact-geo, .contact-map-plate{
  display:flex; flex-direction:column;
}

/* ===========================================================================
   22. TERMS OF SERVICE AND PRIVACY POLICY
=========================================================================== */
@media (min-width:1025px){
  .legal-head{ padding:96px var(--plans-gut) 88px; }
  .legal-body{ padding:88px var(--plans-gut) 140px; }
}
.legal-h1 .elementor-heading-title{
  font-size:60px !important; line-height:.97em !important;
}
.legal-head-copy .eyebrow{ margin-bottom:10px !important; }
.legal-h1{ margin-bottom:20px !important; max-width:900px !important; }
.legal-updated, .legal-updated p{
  font-family:"Lato 500",sans-serif; font-weight:500;
  font-size:16px; line-height:28px;
}
.legal-updated p{ margin:0; opacity:.82; }

.legal-doc{ max-width:820px; margin-inline:auto; }

/* TABLE OF CONTENTS ---------------------------------------------------- Nine sections of terms and twelve of privacy… */
.legal-toc{
  background:var(--e-global-color-ffff00a);
  border-left:4px solid var(--e-global-color-accent);
  padding:28px 32px !important;
  margin-bottom:64px !important;
}
.legal-toc .legal-toc-title{
  font-family:"Lato 800",sans-serif; font-weight:800;
  font-size:16px; line-height:31px;
  letter-spacing:.02em; text-transform:uppercase;
  margin:0 0 12px !important;
}
.legal-toc-cols{ display:flex; flex-wrap:wrap; gap:8px 48px; }
.legal-toc-cols > ul{
  flex:1 1 300px; min-width:0;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
.legal-toc-cols li{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:15px; line-height:26px;
  margin:0 !important;
}
.legal-toc-cols li strong{ font-family:"Lato 800",sans-serif; font-weight:800; }
/* NAVY, NOT MID SHIP, AND UNDERLINED AT REST */
.legal-toc a{
  color:var(--e-global-color-primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(24,63,94,.35);
}
.legal-toc a:hover,
.legal-toc a:focus-visible{
  color:var(--e-global-color-secondary);
  text-decoration-color:currentColor;
}

/* ---- DOCUMENT TYPE -------------------------------------------------------- */
.legal-h2 .elementor-heading-title{
  font-size:40px !important; line-height:1.08em !important;
}
.legal-h2{
  margin:0 0 28px !important;
  padding-top:28px;
  border-top:1px solid rgba(24,63,94,.18);
  scroll-margin-top:calc(var(--apm-header) + 24px);
}
.legal-doc > .elementor-widget-heading:first-of-type{ padding-top:0; border-top:0; }

.legal-prose, .legal-prose p, .legal-prose li{
  font-family:"Lato 300",sans-serif; font-weight:300;
  font-size:16px; line-height:28px;
}
.legal-prose p{ margin:0 0 20px; }
.legal-prose p:last-child{ margin-bottom:0; }

.legal-prose h3{
  font-family:"Special Gothic Expanded One",sans-serif;
  font-weight:400;
  font-size:20px; line-height:28px;
  text-transform:none;
  color:var(--e-global-color-secondary);
  margin:44px 0 14px;
  scroll-margin-top:calc(var(--apm-header) + 24px);
}
.legal-prose h3:first-child{ margin-top:0; }

.legal-prose ol,
.legal-prose ul{ margin:0 0 20px; padding-left:24px; }
.legal-prose li{ margin:0 0 10px; }
.legal-prose li:last-child{ margin-bottom:0; }
/* Nested lists in section A carry their own counter and need the extra inset plus a lighter marker, or the two levels… */
.legal-prose li > ol,
.legal-prose li > ul{ margin:10px 0 0; padding-left:22px; }
.legal-prose ol{ list-style:decimal; }
.legal-prose li > ol{ list-style:lower-roman; }

.legal-prose strong{ font-family:"Lato 800",sans-serif; font-weight:800; }
.legal-prose em{ font-style:italic; }

.legal-prose a{
  color:var(--e-global-color-secondary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.legal-prose a:hover,
.legal-prose a:focus-visible{ color:var(--e-global-color-primary); }

/* ---- TABLET / PHONE ------------------------------------------------------- */
@media (max-width:1024px){
  .legal-h1 .elementor-heading-title{ font-size:44px !important; }
  .legal-h2 .elementor-heading-title{ font-size:32px !important; }
  .legal-toc{ margin-bottom:48px !important; }
}
@media (max-width:767px){
  .legal-h1 .elementor-heading-title{ font-size:32px !important; }
  .legal-h2 .elementor-heading-title{ font-size:26px !important; }
  .legal-toc{ padding:22px 20px !important; }
  .legal-toc-cols{ gap:4px; }
  .legal-prose h3{ font-size:18px; margin-top:36px; }
  /* Long list markers plus a 24px inset eat a phone's measure. */
  .legal-prose ol, .legal-prose ul{ padding-left:20px; }
  .legal-prose li > ol, .legal-prose li > ul{ padding-left:18px; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety Nets group. */
.legal-head, .legal-head-copy, .legal-body, .legal-doc{
  display:flex; flex-direction:column;
}

/* ===========================================================================
   23. 404
=========================================================================== */
.nf-band{
  justify-content:center !important;
  min-height:calc(100vh - var(--apm-header) - 96px);
  min-height:calc(100svh - var(--apm-header) - 96px);
}
@media (min-width:1025px){
  .nf-band{ padding:120px var(--plans-gut) 120px; }
}
.nf-copy{ max-width:760px; }
.nf-copy .eyebrow:not(.txt-link){ margin-bottom:10px !important; }
.nf-h1 .elementor-heading-title{ font-size:72px !important; line-height:.94em !important; }
.nf-h1{ margin-bottom:24px !important; }
.nf-body{ max-width:620px !important; margin-bottom:40px !important; }
.nf-links{ margin-top:32px !important; }
.nf-links p{ font-size:16px !important; line-height:28px !important; margin:0 !important; }

@media (max-width:1024px){
  .nf-h1 .elementor-heading-title{ font-size:48px !important; }
  .nf-body{ margin-bottom:32px !important; }
}
@media (max-width:767px){
  .nf-h1 .elementor-heading-title{ font-size:38px !important; }
  .nf-links{ margin-top:28px !important; }
}

/* Structural fallback for the new classes — same reason as the Layout Safety Nets group. */
.nf-band, .nf-copy{ display:flex; flex-direction:column; }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Special Gothic Expanded One';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://marineboatlifts.com/wp-content/uploads/2026/07/special-gothic-expanded-one-400.woff2') format('woff2'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/special-gothic-expanded-one-400.woff') format('woff'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/SpecialGothicExpandedOne-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Lato 500';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Medium.eot');
	src: url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Medium.eot?#iefix') format('embedded-opentype'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Medium.woff2') format('woff2'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Medium.woff') format('woff'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Medium.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Lato 800';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Heavy.eot');
	src: url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Heavy.eot?#iefix') format('embedded-opentype'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Heavy.woff2') format('woff2'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Heavy.woff') format('woff'),
		url('https://marineboatlifts.com/wp-content/uploads/2026/07/Lato-Heavy.ttf') format('truetype');
}
/* End Custom Fonts CSS */