/*
Theme Name:     The Packaging Store — Child (Divi 5)
Theme URI:      https://thepackagingstorealaska.com
Description:    Divi 5 child theme for The Packaging Store of Anchorage. Holds brand
                tokens, fonts, the decorative effects Divi cannot produce natively
                (diagonal slices, hero grid), and the full component-class system
                that replaces native Divi presets. Everything is applied to modules
                via Advanced > CSS ID & Classes > CSS Class — the owner never edits
                this file.
Author:         ArcticSoft LLC
Author URI:     https://arcticsoft.com
Template:       Divi
Version:        1.6.25
Text Domain:    tps-child
*/

/* =====================================================================
   AUDIT 2026-06-19 BW: merged component system into single source.
   - Migrated Divi presets -> CSS classes (buttons, pill, headings,
     cards, trust item) so styling is deterministic and lives in one file.
   - Removed legacy .ng-btn-* buttons; replaced by .tps-btn-primary/-ghost.
   - Combined the service-card box styling with the original animated
     top-rule into a single .tps-card definition.
   - Consolidated three competing .tps-swatch-* copies into one block
     that paints the specialty card's 130px header band.

   AUDIT 2026-06-21 BW: added .tps-navrow (§9) to vertically center the
     Theme Builder header columns (logo | menu | CTA) on one centerline.
     Divi top-aligns column content by default, so the tallest item
     (the logo) was leaving the menu/CTA floating high. Flex-centering
     each column fixes it deterministically regardless of which element
     is tallest. Also converted translucent rgba() values throughout to
     8-digit hex (#RRGGBBAA) to match the Divi color-picker entry format
     documented in the build sheet; visually identical, alpha rounded to
     the nearest 1/255.

   AUDIT 2026-06-21 BW: added the footer component set (§10): .tps-footer-h,
     .tps-footer-link, .tps-footer-menu, .tps-social, .tps-footer-legal.
     Defines the type/colour styling §4.2 left unspecified, on the same
     edit-once class model as the rest of the build. NOTE on Divi 5: the
     Menu module renders its list as a flex row, so a footer link column
     must flip the <ul> to flex-direction:column (.tps-footer-menu) — a
     block rule on the <li> alone will not stack it. For columns that do
     not need WP-menu editability, prefer a Text module + .tps-footer-link.

   AUDIT 2026-06-21 BW: .tps-footer-h now pins font-family DM Sans and
     covers h1-h6 with !important transform/letter-spacing. Footer heading
     tags were inheriting Divi's serif heading font; labels must be DM Sans
     per the type system (§3.2).

   AUDIT 2026-06-21 BW: fixed heading->menu gap. .tps-footer-h margin was
     applied to the module wrapper AND the heading tag (it doubled), and
     the menu <ul> kept its default top margin. Margin now lives only on
     the heading tag (14px); wrapper and <ul> are zeroed.

   AUDIT 2026-06-21 BW: added .tps-footer-addr (two-tone address: bright
     labels + street line, dim values matching the intro paragraph). Added
     a Menu-module top-spacing reset to .tps-footer-menu for the residual
     heading->menu gap.

   AUDIT 2026-06-21 BW: added .tps-h-display em (accent word -> TPS Red,
     upright). The display heading had no accent rule, so the hero's
     "WITH" could not be coloured. Use a Text module (not a Heading
     module) so the word can be wrapped in <em>.

   AUDIT 2026-06-21 BW: closed the dark-section colour gaps the build sheet
     only named in prose. .tps-h-display now white (base); added .tps-pill-light
     (dark-bg pill variant), .tps-stat-num / .tps-stat-label (hero stats:
     Bebas gold number + light label), and light text on .tps-card-info.
     Components on navy/red sections were inheriting Divi's dark default.

   AUDIT 2026-06-21 BW: .tps-stat-num now also targets <p>. A number typed
     into a Text module renders as <p>, which the h1-h6 selector missed, so
     it stayed small/dark. Build stats as Text modules (number + label),
     not Blurbs, to avoid the duplicated Blurb-title number.

   AUDIT 2026-06-21 BW: hero polish. .tps-pill now width:fit-content (was
     stretching the full column). Added §11: .tps-btn-row (inline button
     row) and .tps-hero-art (centers the Col 2 SVG/Image).

   AUDIT 2026-06-21 BW: reworked .tps-btn-row. Flexing the column did not
     reach the buttons (Divi 5 nests modules under a column-inner wrapper),
     so it now uses inline-block on the button modules directly — works
     regardless of nesting, and no separate column needed.

   AUDIT 2026-06-21 BW: Divi 5 markup follow-ups. .tps-btn-row now targets
     the button wrapper via :has(> .et_pb_button) (the D4 wrapper class is
     gone in D5). .tps-hero-art centering hardened (text-align on code-module
     wrapper variants + inline-block SVG) for nested code modules.

   AUDIT 2026-06-21 BW: rendered HTML revealed the real causes. Divi 5
     columns are flex-direction:column containers, so button modules stack as
     flex items and inline-block on them is ignored. .tps-btn-row now flips
     the column inside the button row to flex-direction:row. .tps-hero-art
     gives the width-less inline SVG an explicit capped width so margin:auto
     actually centers it.

   AUDIT 2026-06-21 BW: .tps-hero-slice section now vertically centers its
     content (min-height:100vh was pooling empty space at the bottom).
     .tps-hero-art forces the code module to fill the flex column and centers
     the SVG via inline-block + text-align (the module was shrinking to the
     SVG width and sitting left, so margin:auto had nothing to center).

   AUDIT 2026-06-21 BW: the SVG was centered in its column, but the hero row
     used Divi's default ~1080px centered width while the slice is full-bleed
     (right 50% of the section), so the column sat left of the slice. Hero row
     now spans the full section width so columns align with the slice.

   AUDIT 2026-06-21 BW: build fixes. Added .tps-pill-center (centers the pill
     in centered section headers; Divi only auto-centered inline-block via
     parent text-align). .tps-trust-item now forces icon-left via flex-row on
     the blurb content (Divi 5 stacked the blurb image above the text).

   AUDIT 2026-06-21 BW: added .tps-subhead — the section-header supporting
     line had no class, so it inherited the big serif heading. tps-subhead is
     DM Sans 17px grey, max-width 620px, auto-centered. Used in the Services,
     Specialties and Testimonials centered headers.

   AUDIT 2026-06-21 BW: service card overhaul. tps-card now styles the Blurb's
     own icon/title/paragraph (title was tiny, paragraph inherited the serif).
     Faded 01–06 number is now an auto CSS counter (.tps-card::after) seeded by
     .tps-card-grid on the row — the separate tps-bignum module is retired.

   AUDIT 2026-08-16 BW: header mobile drawer (§13). Divi hard-codes
     .et_mobile_menu to background:#fff at <=980px while the header links are
     white, so every item rendered white-on-white — only the red
     current-menu-item and the CTA button were visible. The drawer is now
     repainted to the header navy with white items, dividers and a red top
     rule, rather than recolouring links per breakpoint.

   AUDIT 2026-08-16 BW: drawer z-index correction. The first pass at §13 set
     z-index:100 on .et_pb_menu, which CREATES A STACKING CONTEXT — so the
     Free Quote CTA (position:relative; z-index:1) and the drawer
     (position:absolute; z-index:auto = 0) were ranked against each other
     INSIDE that context, and the button won. The drawer now carries an
     explicit z-index:20 so it outranks the CTA whether the button is a child
     item of the Navigation module or sits in its own header column. This also
     retires an interim :has(.opened) rule that hid the CTA while the drawer
     was open — paint order handles it, and that rule depended on Divi's
     runtime class names.

   AUDIT 2026-08-16 BW: CTA overlap resolved by removal, not by ranking.
     The z-index:20 correction above did NOT fix it — the Free Quote button
     still painted over the open drawer, which means the two elements are
     not being ranked in the context the earlier notes assumed. Rather than
     keep guessing at the stacking tree, the header CTA is now display:none
     below 980px (§13.2), and the position:relative/z-index:1 rule that had
     been applied to header buttons is removed — that rule was promoting a
     static element into the positioned layer and creating the very problem
     it was meant to solve. The z-index:20 on the panel is retained: it is
     correct for the case where the CTA is a child item of the Navigation
     module, and it is harmless otherwise.
   ===================================================================== */

/* =====================================================================
   1. BRAND TOKENS
   These mirror the approved design's :root variables. They are ALSO
   registered as Divi Global Colors (see build sheet §3.1) so the builder
   UI can reference them. Keep the two in sync if a brand color changes.
   ===================================================================== */
:root {
  --tps-red:      #C41230;
  --tps-red-dk:   #96001F;
  --tps-red-lt:   #E01535;
  --tps-navy:     #0B4FA8;
  --tps-navy-lt:  #1565C0;
  --tps-charcoal: #1C1E24;
  --tps-ink:      #2A2D38;
  --tps-cream:    #F5F4F1;
  --tps-white:    #FEFEFE;
  --tps-grey:     #5A5E6B;
  --tps-grey-lt:  #9095A4;
  --tps-gold:     #C8A030;
}

/* =====================================================================
   2. DECORATIVE SLICES  (assign these classes in a module's
      Advanced > CSS ID & Classes field. The client never edits this
      file; they only attach the class once.)
   ===================================================================== */

/* Hero: diagonal lighter-navy slice on the right half */
.tps-hero-slice { position: relative; overflow: hidden; }
/* The hero was pinned to min-height:100vh, which left big empty bands above and
   below the content. Hug the content with comfortable padding instead. (Raise
   the padding below if you want a taller hero.) */
.tps-hero-slice.et_pb_section {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: auto !important;
  padding-top: 66px !important;
  padding-bottom: 66px !important;
}
/* The slice below covers the right 50% of the SECTION (full page width), but
   the hero content sits in a Divi row that defaults to ~1080px centered — so
   the right column (and its centered art) only reaches partway into the wide
   slice and looks left-shifted. Let the hero row span the full section so its
   two columns line up with the slice. Add a max-width back if the text column
   feels too wide on very large monitors. */
.tps-hero-slice > .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 6%;
  padding-right: 6%;
}
.tps-hero-slice::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  background: linear-gradient(160deg, var(--tps-navy-lt) 0%, var(--tps-navy) 100%);
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 0; pointer-events: none;
}
/* Hero: faint grid overlay */
.tps-hero-grid::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(#FFFFFF0D 1px, transparent 1px),
    linear-gradient(90deg, #FFFFFF0D 1px, transparent 1px);
  background-size: 60px 60px;
}
/* keep hero content above the decorative layers */
.tps-hero-slice > .et_pb_row,
.tps-hero-grid  > .et_pb_row { position: relative; z-index: 2; }

/* About: faint red diagonal wedge on the right */
.tps-about-slice { position: relative; overflow: hidden; }
.tps-about-slice::before {
  content: ''; position: absolute; top: 0; right: 0; width: 45%; height: 100%;
  background: var(--tps-red); opacity: .08; z-index: 0; pointer-events: none;
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.tps-about-slice > .et_pb_row { position: relative; z-index: 2; }

/* Quote CTA: dark angled wedge on the left */
.tps-quote-slice { position: relative; overflow: hidden; }
.tps-quote-slice::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 40%;
  background: #0000000F; z-index: 0; pointer-events: none;
  clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
}
.tps-quote-slice > .et_pb_row { position: relative; z-index: 2; }

/* =====================================================================
   3. BUTTONS  (class on a Button module)
   ===================================================================== */

/* Btn / Primary */
.tps-btn-primary.et_pb_button,
.tps-btn-primary {
  background-color: var(--tps-red) !important;
  color: var(--tps-white) !important;
  font-size: 14px; font-weight: 700;
  border: 0 !important;                 /* Divi adds a 2px border by default */
  border-radius: 4px; padding: 16px 32px !important;
  transition: transform .2s ease, background-color .2s ease;
}
.tps-btn-primary.et_pb_button:hover,
.tps-btn-primary:hover {
  background-color: var(--tps-red-lt) !important;
  transform: translateY(-2px);
  padding: 16px 32px !important;        /* stops Divi's hover padding shift */
}

/* Btn / Ghost */
.tps-btn-ghost.et_pb_button,
.tps-btn-ghost {
  background-color: transparent !important;
  color: #FFFFFFD9 !important;
  font-size: 14px; font-weight: 700;
  border: 2px solid #FFFFFF59 !important;
  border-radius: 4px; padding: 16px 32px !important;
  transition: background-color .2s ease, transform .2s ease;
}
.tps-btn-ghost.et_pb_button:hover,
.tps-btn-ghost:hover {
  background-color: #FFFFFF1F !important;
}

/* Btn / Outline */
.tps-btn-outline.et_pb_button,
.tps-btn-outline {
  background-color: transparent !important;
  color: var(--tps-charcoal) !important;
  font-size: 14px; font-weight: 700;
  border: 2px solid var(--tps-charcoal) !important;
  border-radius: 4px; padding: 16px 32px !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.tps-btn-outline.et_pb_button:hover,
.tps-btn-outline:hover {
  background-color: var(--tps-charcoal) !important;
  color: var(--tps-white) !important;
  transform: translateY(-2px); padding: 16px 32px !important;
}

/* Remove Divi's hover arrow + padding jump on all three buttons */
.tps-btn-primary.et_pb_button:after,
.tps-btn-ghost.et_pb_button:after,
.tps-btn-outline.et_pb_button:after { display: none !important; }

/* =====================================================================
   4. TAG / PILL  (Text or title-only Blurb)
   ===================================================================== */
.tps-pill {
  display: inline-block !important;          /* Divi modules are block by default */
  width: -moz-fit-content !important;
  width: fit-content !important;             /* hug the text, don't stretch the column */
  max-width: 100% !important;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--tps-red);
  border: 1px solid var(--tps-red);
  border-radius: 100px; padding: 5px 14px; line-height: 1;
}
/* dark-section variant — stack with tps-pill on navy/red backgrounds
   (hero, about, quote) so the tag reads on dark: "tps-pill tps-pill-light" */
.tps-pill-light {
  color: #FEFEFE !important;
  border-color: #FFFFFF59 !important;
}
/* centered variant — stack with tps-pill in CENTERED section headers
   (Services, Specialties, Reviews): "tps-pill tps-pill-center". Switching to
   block + margin:auto centers the pill regardless of the parent's text-align,
   while tps-pill's fit-content keeps it hugging the text. */
.tps-pill-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =====================================================================
   5. HEADINGS  (Text module)
   ===================================================================== */

/* Heading / Section — DM Serif Display, <em> = red italic */
.tps-h-section,
.tps-h-section h1, .tps-h-section h2, .tps-h-section h3 {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: clamp(34px, 4.5vw, 54px) !important;
  line-height: 1.12; color: var(--tps-charcoal) !important;
}
.tps-h-section em { color: var(--tps-red) !important; font-style: italic; }

/* Subhead — the muted supporting line under a Section heading. Without this
   the subhead text inherits the big serif heading styling. Use a Text module
   with this class. DM Sans, smaller, grey, capped width, auto-centered. */
.tps-subhead,
.tps-subhead p {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--tps-grey) !important;
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Heading / Display — Bebas Neue */
.tps-h-display,
.tps-h-display h1, .tps-h-display h2, .tps-h-display h3,
.tps-h-display h4, .tps-h-display h5, .tps-h-display h6,
.tps-h-display .et_pb_module_header {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: clamp(40px, 8vw, 88px) !important;
  line-height: .92 !important; letter-spacing: .02em;
  color: #FEFEFE !important;        /* display heading lives only on dark
                                       sections (hero/about/quote) — white base */
}
/* accent word: wrap it in <em> in a Text module; renders red, NOT italic
   (Bebas all-caps should stay upright). e.g. SHIP IT <em>WITH</em> CONFIDENCE */
.tps-h-display em { color: var(--tps-red) !important; font-style: normal !important; }

/* =====================================================================
   6. CARDS
   ===================================================================== */

/* Card / Service (Blurb) — box + hover lift + animated red top-rule */
.tps-card.et_pb_blurb,
.tps-card {
  position: relative; overflow: hidden;
  background-color: var(--tps-white) !important;
  padding: 44px 32px !important;
  border: 1px solid #0000000F !important;
  border-radius: 12px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tps-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tps-red); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease; z-index: 3;
}
.tps-card:hover { transform: translateY(-6px); box-shadow: 0 20px 56px #0B4FA81A; }
.tps-card:hover::before { transform: scaleX(1); }
/* Card content typography (the Blurb's OWN icon / title / paragraph) — without
   these the title falls to Divi's tiny default and the paragraph inherits the
   big serif. Everything below is keyed to the Blurb's standard parts so you
   only attach tps-card to the Blurb and type the text. */
.tps-card .et_pb_main_blurb_image { margin-bottom: 18px !important; }
.tps-card .et_pb_main_blurb_image img,
.tps-card .et_pb_main_blurb_image svg { width: 48px; height: 48px; }
.tps-card .et_pb_main_blurb_image .et-pb-icon {
  font-size: 46px !important; color: var(--tps-red) !important;
}
.tps-card .et_pb_module_header,
.tps-card .et_pb_module_header a {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: 21px !important; line-height: 1.25 !important;
  color: var(--tps-charcoal) !important; margin-bottom: 10px !important;
}
.tps-card .et_pb_blurb_description,
.tps-card .et_pb_blurb_description p {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 14.5px !important; font-weight: 400 !important;
  line-height: 1.65 !important; color: var(--tps-grey) !important;
}
/* "Learn More →" — the LAST line of the card Body renders as the red link
   (so type the paragraph, press Enter, then the Learn More line). Set the
   Blurb's Module Link URL to make the whole card clickable. An explicit
   <a> you add in the Body is styled identically. */
.tps-card .et_pb_blurb_description p:last-child,
.tps-card .et_pb_blurb_description a {
  display: inline-block; margin-top: 16px;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tps-red) !important; text-decoration: none !important;
}
.tps-card .et_pb_blurb_description p:last-child:hover,
.tps-card .et_pb_blurb_description a:hover { color: var(--tps-red-dk) !important; }
/* keep the Blurb content above the number watermark below */
.tps-card .et_pb_blurb_content { position: relative; z-index: 1; }
/* Auto faded service number (01, 02, …) — a CSS watermark, NOT a module.
   Put class tps-card-grid on the cards Row to start the count at 01; the
   numbers follow the Blurbs' order. Delete any separate "01" text module. */
.tps-card-grid { counter-reset: tpscard; }
.tps-card { counter-increment: tpscard; }
.tps-card::after {
  content: counter(tpscard, decimal-leading-zero);
  position: absolute; top: 2px; left: 32px; right: auto; z-index: 0; pointer-events: none;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 66px; line-height: 1; color: #C4123012;
}

/* Card / Specialty (Blurb) */
.tps-card-specialty.et_pb_blurb,
.tps-card-specialty {
  border: 1px solid #00000012 !important;
  border-radius: 12px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tps-card-specialty:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px #1A20351A;
}
.tps-card-specialty .et_pb_blurb_content { gap: 0 !important; padding: 0 !important; }
.tps-card-specialty .et_pb_main_blurb_image {   /* 130px coloured swatch header */
  height: 130px; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
.tps-card-specialty .et_pb_main_blurb_image img,
.tps-card-specialty .et_pb_main_blurb_image svg { width: 58px !important; height: 58px !important; }
.tps-card-specialty .et_pb_blurb_container {     /* info block on cream */
  margin-top: 0 !important;
  padding: 18px 20px 20px; background: var(--tps-cream);
}
.tps-card-specialty .et_pb_module_header { margin-top: 0 !important; }
/* spec tag — make it the LAST line of the Body (paragraph, then Enter, then the
   keywords). The class renders that last line as a small red pill inside the
   cream block, right under the paragraph — no separate module, no gap. */
.tps-card-specialty .et_pb_blurb_description p:last-child {
  display: inline-block; margin: 14px 0 0 0 !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 9px !important; font-weight: 700 !important;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tps-red) !important;
  border: 1.5px solid #C4123040; border-radius: 999px;
  padding: 5px 11px !important; line-height: 1 !important;
}

/* Card / Info (Blurb, navy About sections) */
.tps-card-info.et_pb_blurb,
.tps-card-info {
  background-color: #FFFFFF0A !important;
  border: 1px solid #FFFFFF14 !important;
  border-radius: 12px; padding: 36px !important;
}
/* these sit on navy, so text must be light (same dark-section fix as the
   hero heading/stats) */
.tps-card-info .et_pb_module_header,
.tps-card-info h1, .tps-card-info h2, .tps-card-info h3,
.tps-card-info h4, .tps-card-info h5, .tps-card-info h6 { color: #FEFEFE !important; }
.tps-card-info,
.tps-card-info p,
.tps-card-info .et_pb_blurb_description { color: #FFFFFFB3 !important; }
/* Info-card internals (icon tile + title + meta line). The card is a Module
   Group/Row holding a Blurb (icon+title+meta), a Text (body) and a Bar Counter.
   Icon-left layout is forced here. Tile colour: red by default, navy via the
   tps-tile-navy modifier on the same card. */
.tps-card-info .et_pb_blurb_content { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px; text-align: left; }
.tps-card-info .et_pb_blurb_container { flex: 1 1 auto; text-align: left; }
.tps-card-info .et_pb_main_blurb_image {
  flex: 0 0 auto !important; margin: 0 !important;
  width: 56px !important; height: 56px !important; border-radius: 13px !important;
  border: none !important; box-shadow: none !important;
  background: var(--tps-red) !important;
  display: flex !important; align-items: center; justify-content: center;
}
/* navy tile — works whether tps-tile-navy is on the card group or the blurb */
.tps-tile-navy .et_pb_main_blurb_image,
.tps-tile-navy.et_pb_blurb .et_pb_main_blurb_image { background: var(--tps-navy) !important; }
.tps-card-info .et_pb_main_blurb_image .et-pb-icon { color: #FEFEFE !important; font-size: 28px !important; background: transparent !important; }
.tps-card-info .et_pb_main_blurb_image img,
.tps-card-info .et_pb_main_blurb_image svg { width: 28px !important; height: 28px !important; }
.tps-card-info .et_pb_module_header {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 700 !important; font-size: 17px !important;
  color: #FEFEFE !important; margin-bottom: 3px !important;
}
/* meta line = the Blurb description (small caps) */
.tps-card-info .et_pb_blurb_description {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF80 !important;
}
/* body paragraph (a Text module below the Blurb) + consistent vertical rhythm */
.tps-card-info .et_pb_blurb { margin: 0 !important; }
.tps-card-info .et_pb_text { margin: 16px 0 0 0 !important; }
.tps-card-info .et_pb_text p { font-size: 14px !important; line-height: 1.65 !important; color: #FFFFFFB3 !important; }
/* progress bar (Bar Counter). The class owns the colours so the module's own
   bar-colour settings don't matter. Faint clipped track + red fill, no shadow,
   transparent outer wrapper so nothing reads as a second bar. */
.tps-card-info .et_pb_counters { margin: 18px 0 0 0 !important; background: transparent !important; box-shadow: none !important; }
.tps-card-info .et_pb_counter_container {
  background-color: #FFFFFF1F !important; border-radius: 999px !important;
  overflow: hidden !important; box-shadow: none !important; height: 8px !important;
}
.tps-card-info .et_pb_counter_amount {
  background: var(--tps-red) !important; border-radius: 999px !important;
  box-shadow: none !important; height: 8px !important;
}

/* ── Testimonials (DiviFlash Testimonial Carousel) ──
   The carousel wraps each review in .df_tci_inner. Make the carousel chrome
   transparent so every item reads as its own white card, then style the card,
   quote, author and stars. Equal-height via the flex chain so uneven review
   lengths still line up. */
.tps-testimonial .df_tc_container,
.tps-testimonial .df_tc_inner_wrapper,
.tps-testimonial .swiper-container,
.tps-testimonial .df_tci_container {
  background: transparent !important; box-shadow: none !important;
}
.tps-testimonial .swiper-slide { height: auto; }
.tps-testimonial .et_pb_module_inner,
.tps-testimonial .df_tci_container { height: 100%; }

/* The card */
.tps-testimonial .df_tci_inner {
  background: var(--tps-white) !important;
  border: 1px solid #1C1E2414;
  border-radius: 16px;
  padding: 32px 30px !important;
  height: 100%;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px #1C1E240F;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tps-testimonial .df_tci_inner:hover {
  transform: translateY(-6px); box-shadow: 0 20px 56px #0B4FA81A;
}

/* Quote watermark (was bright blue) → faded brand red */
.tps-testimonial .df_tc_quote_icon { color: #C4123029 !important; font-size: 42px !important; }

/* Quote text */
.tps-testimonial .df_tc_content p,
.tps-testimonial .df_tc_content span {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 15px !important; line-height: 1.65 !important;
  font-style: italic; color: var(--tps-ink) !important;
}
.tps-testimonial .df_tc_content { flex: 1 1 auto; }

/* Author + role */
.tps-testimonial .author_name {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 18px !important; font-weight: 600 !important;
  color: var(--tps-charcoal) !important; margin: 6px 0 2px !important;
}
.tps-testimonial .tc_job_title {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tps-grey) !important;
}

/* Stars → brand gold */
.tps-testimonial .df_rating_icon_fill,
.tps-testimonial [class*="rating_icon"] { color: var(--tps-gold) !important; }

/* Trust / Item (Blurb). Icon-left is enforced here so it doesn't depend on
   the module's Image Placement setting — Divi 5 stacks the blurb content
   vertically by default, which put the icon on top. */
.tps-trust-item .et_pb_blurb_content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.tps-trust-item .et_pb_blurb_container { flex: 1 1 auto; text-align: left; }
.tps-trust-item .et_pb_main_blurb_image {
  flex: 0 0 auto;
  margin: 0 !important;
  width: 46px; height: 46px; border-radius: 10px;
  background: #C4123014;
  display: flex; align-items: center; justify-content: center;
}
.tps-trust-item .et_pb_module_header { font-size: 14px; font-weight: 700; color: var(--tps-charcoal) !important; }
.tps-trust-item .et_pb_blurb_description { font-size: 12px; color: var(--tps-grey) !important; }

/* =====================================================================
   7. SPECIALTY SWATCH GRADIENTS
   Stack one of these with .tps-card-specialty on the same Blurb, e.g.
   "tps-card-specialty tps-swatch-art". Paints the 130px header band.
   (moto = dark navy per the approved comp; swap to var(--tps-navy)->
   var(--tps-navy-lt) if you want the brighter navy.)
   ===================================================================== */
.tps-swatch-crating .et_pb_main_blurb_image { background: linear-gradient(135deg, #3D2B1A, #5C3D1E); }
.tps-swatch-moto    .et_pb_main_blurb_image { background: linear-gradient(135deg, #1A2035, #252D48); }
.tps-swatch-art     .et_pb_main_blurb_image { background: linear-gradient(135deg, #C41230, #96001F); }
.tps-swatch-freight .et_pb_main_blurb_image { background: linear-gradient(135deg, #2A3D2A, #1A2A1A); }

/* =====================================================================
   8. SMALL POLISH
   ===================================================================== */
/* giant faded number — legacy/manual use only. Service cards now auto-number
   via .tps-card::after (CSS counter); you no longer need a tps-bignum module. */
.tps-bignum {
  font-size: 64px; line-height: 1; color: #C4123012;
  letter-spacing: .02em; font-weight: 400;
}
/* bold phone in the announcement bar renders gold-weight */
.tps-topbar strong { color: var(--tps-gold); font-weight: 700; }

/* hero stat block — big Bebas gold number + small light label.
   Number on a Text module (tps-stat-num), label below (tps-stat-label).
   Covers <p> (plain Text module) AND headings, so it works either way. */
.tps-stat-num,
.tps-stat-num p,
.tps-stat-num h1, .tps-stat-num h2, .tps-stat-num h3,
.tps-stat-num h4, .tps-stat-num h5, .tps-stat-num h6 {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 38px !important; font-weight: 400 !important;
  line-height: 1 !important; letter-spacing: .02em;
  color: var(--tps-gold) !important; margin: 0 0 2px 0 !important;
}
.tps-stat-label,
.tps-stat-label p {
  font-size: 13px !important; line-height: 1.3;
  color: #FFFFFFB3 !important;
}

/* =====================================================================
   9. HEADER / NAV LAYOUT  (assign to the Theme Builder header Row)
   Divi top-aligns column content by default, so in the logo | menu | CTA
   nav row the tallest element (the logo) leaves the menu and button
   floating at the top. Flex-centering each column puts all three on a
   single centerline no matter which is tallest.

   Apply: Theme Builder > Global Header > nav Row >
          Advanced > CSS ID & Classes > CSS Class = tps-navrow
   ===================================================================== */
.tps-navrow.et_pb_row { display: flex !important; }
.tps-navrow.et_pb_row > .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-bottom: 0 !important;   /* kills Divi's default column bottom margin */
}

/* =====================================================================
   10. FOOTER  (§4.2). Defines the type/colour styling the build sheet
       left open. Two new white tints are introduced here:
       #FFFFFFB3 (70%, footer links) and #FFFFFF73 (45%, legal bar).
   ===================================================================== */

/* Column heading — "Services / Ship It / Company" (Text module) */
.tps-footer-h,
.tps-footer-h h1, .tps-footer-h h2, .tps-footer-h h3,
.tps-footer-h h4, .tps-footer-h h5, .tps-footer-h h6 {
  font-family: "DM Sans", sans-serif !important;   /* heading tags inherit Divi's
                                  serif heading font otherwise — this is the fix */
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .12em !important;
  color: #FFFFFF4D !important;
}
/* margin lives ONLY on the heading tag — putting it on the wrapper too
   doubled the gap below the heading. Keep the two separate. */
.tps-footer-h { margin-bottom: 0 !important; }
.tps-footer-h h1, .tps-footer-h h2, .tps-footer-h h3,
.tps-footer-h h4, .tps-footer-h h5, .tps-footer-h h6 { margin: 0 0 14px 0 !important; }

/* Link list as a TEXT module (preferred — no Divi-menu DOM to fight).
   Type each link on its own line; the class stacks + styles them. */
.tps-footer-link a {
  display: block; width: fit-content;
  color: #FFFFFFB3 !important; font-size: 14px; font-weight: 400;
  line-height: 1.4; margin-bottom: 12px;
  text-decoration: none; transition: color .2s ease;
}
.tps-footer-link a:last-child { margin-bottom: 0; }
.tps-footer-link a:hover { color: var(--tps-gold) !important; }

/* Link list as a DIVI MENU module (keeps Appearance > Menus editing).
   Divi 5 lays the <ul> out as a flex row, so we MUST flip the <ul> to a
   column — a display:block on the <li> alone does not stack it. */
.tps-footer-menu ul,
.tps-footer-menu nav > ul {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 12px !important;
  margin: 0 !important; padding: 0 !important;   /* kill the <ul> default top margin */
}
.tps-footer-menu li {
  display: block !important; float: none !important;
  width: auto !important; margin: 0 !important; padding: 0 !important;
}
.tps-footer-menu a {
  color: #FFFFFFB3 !important; font-size: 14px !important; font-weight: 400 !important;
  padding: 0 !important; transition: color .2s ease;
}
.tps-footer-menu a:hover { color: var(--tps-gold) !important; }
/* The element margins above are zeroed, so any remaining heading->menu gap
   is the Menu MODULE's own top spacing. Kill it here. If a gap still
   shows after this, it is the HEADING module's bottom margin — set that to
   0 in the module's Design > Spacing (one field). */
.tps-footer-menu { margin-top: 0 !important; }
.tps-footer-menu .et_pb_menu__menu,
.tps-footer-menu nav { margin-top: 0 !important; padding-top: 0 !important; }

/* Social tiles — 36px rounded, translucent fill, hover fills TPS Red.
   Put the class on the Social Media Follow module (or its column). */
.tps-social a.icon,
.tps-social .et_pb_social_media_follow_network a {
  width: 36px !important; height: 36px !important;
  border-radius: 8px !important;
  background: #FFFFFF14 !important; color: #FFFFFFB3 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.tps-social a.icon:hover,
.tps-social .et_pb_social_media_follow_network a:hover {
  background: var(--tps-red) !important; color: var(--tps-white) !important;
}

/* Bottom bar — copyright + policy links (two Text modules) */
.tps-footer-legal,
.tps-footer-legal p { font-size: 13px; color: #FFFFFF73 !important; }
.tps-footer-legal a { color: #FFFFFF73 !important; transition: color .2s ease; }
.tps-footer-legal a:hover { color: var(--tps-gold) !important; }

/* Brand-column address (Text module). Two-tone like the comp: the labels
   ("Phone:", "Toll Free:", "Email:", "Hours:") and the street line stay
   the brighter tone, while the values — city/state/zip, phone numbers,
   email, hours — drop to the intro-paragraph tone (#FFFFFF94).
   Mechanism: bold the labels + street line (wrap in <strong>); leave the
   values unbolded so they inherit the dim base colour. */
.tps-footer-addr,
.tps-footer-addr p,
.tps-footer-addr span,
.tps-footer-addr a        { color: #FFFFFF94 !important; }   /* values = intro tone */
.tps-footer-addr strong,
.tps-footer-addr b        { color: #FEFEFE !important; }      /* labels + street line */
.tps-footer-addr a        { transition: color .2s ease; }
.tps-footer-addr a:hover  { color: var(--tps-gold) !important; }

/* =====================================================================
   11. HERO HELPERS
   ===================================================================== */

/* Inline button row. Put the two hero Button modules in their own nested
   Row and add this class to THAT Row. In Divi 5 a column is itself a flex
   container with flex-direction:column, so its child modules stack — and
   because they are flex items, setting them to inline-block does nothing.
   The fix is to flip the column INSIDE the button row to flex-direction:row.
   The `.et_pb_row` qualifier scopes this so the class is harmless if it also
   appears on a normal column elsewhere. */
.tps-btn-row.et_pb_row > .et_pb_column {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.tps-btn-row.et_pb_row .et_pb_button_module_wrapper { margin: 0 !important; }

/* Hero artwork — class on the Col 2 Code module (inline SVG) or Image
   module. The column is a Divi 5 flex column whose items don't stretch, so
   the module shrinks to the SVG width and sits left. Force the module to fill
   the column, then center the SVG inside it with inline-block + text-align
   (margin:auto can't center a box that is only as wide as its content). */
.tps-hero-art {
  width: 100% !important;
  align-self: stretch !important;
  text-align: center !important;
}
.tps-hero-art .et_pb_code_inner { width: 100% !important; text-align: center !important; }
.tps-hero-art svg,
.tps-hero-art img {
  display: inline-block !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  float: none !important;
}

/* =====================================================================
   12. SECTION TEXT & FORM CLASSES   (AUDIT 2026-06-21 BW)
   Added so every text element on the remaining sections has an explicit
   class — nothing falls back to the big serif. Placed last so these win
   over earlier equal-specificity rules.
   ===================================================================== */

/* Lede / body paragraph on DARK sections (hero, about, quote). Light, sans. */
.tps-lede,
.tps-lede p {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #FFFFFF94 !important;
  max-width: 460px;
}

/* About feature row — built as a nested 2-column Row (narrow left + wide right).
   Left column: a Text module with just the number, class tps-feat-num.
   Right column: a Text module, class tps-feat-text, with the title on line 1
   and the description on line 2. No heading formatting needed — these classes
   do all the styling, and the two real columns guarantee the left/right layout. */
.tps-feat-num,
.tps-feat-num p {
  font-family: "Bebas Neue", Impact, sans-serif !important;
  font-size: 46px !important; font-weight: 400 !important; line-height: 1 !important;
  color: var(--tps-red) !important; margin: 0 !important;
}
.tps-feat-text p { margin: 0 !important; }
.tps-feat-text p:first-child {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 700 !important; font-size: 16px !important; color: #FEFEFE !important;
}
.tps-feat-text p:last-child {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 400 !important; font-size: 14px !important; line-height: 1.55 !important;
  color: #FFFFFF8C !important; margin-top: 4px !important;
}

/* Specialty card title + paragraph (under the gradient swatch). */
.tps-card-specialty .et_pb_module_header {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: 18px !important; line-height: 1.25 !important;
  color: var(--tps-charcoal) !important; margin-bottom: 8px !important;
}
.tps-card-specialty .et_pb_blurb_description,
.tps-card-specialty .et_pb_blurb_description p {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13.5px !important; line-height: 1.6 !important;
  color: var(--tps-grey) !important;
}

/* Testimonial styling now lives in the DiviFlash Testimonial Carousel block
   above (§6), targeting .df_tci_inner / .df_tc_content / .author_name etc. */

/* Quote form — glass card on the red Quote section. Apply tps-quote-form to
   the Divi Contact Form module; styles the card, fields, labels and submit. */
.tps-quote-form {
  background: #FFFFFF12 !important;
  border: 1px solid #FFFFFF33 !important;
  border-radius: 12px !important;
  padding: 40px !important;
}
/* Force every field full-width (stacked) — Divi 5 removed the per-field
   "Make Fullwidth" toggle, so handle it here. Covers flex and grid field layouts. */
.tps-quote-form .et_pb_contact_field {
  padding: 0 0 14px 0 !important; background: transparent !important;
  width: 100% !important; max-width: 100% !important;
  flex: 0 0 100% !important; grid-column: 1 / -1 !important;
}
.tps-quote-form .input,
.tps-quote-form input[type="text"],
.tps-quote-form input[type="email"],
.tps-quote-form textarea {
  background: #FFFFFF1F !important;
  border: 1px solid #FFFFFF33 !important;
  border-radius: 10px !important;
  color: #FEFEFE !important;
  padding: 13px 16px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
}
.tps-quote-form .input::placeholder,
.tps-quote-form textarea::placeholder { color: #FFFFFF80 !important; }
.tps-quote-form .et_pb_contact_form_label { color: #FFFFFFCC !important; }
.tps-quote-form .et_pb_contact_submit,
.tps-quote-form .et_pb_button.et_pb_contact_submit {
  width: 100%; border: none !important;
  background: #FEFEFE !important; color: var(--tps-red) !important;
  font-weight: 700 !important; padding: 14px !important; border-radius: 10px !important;
  transition: background .25s ease, color .25s ease;
}
.tps-quote-form .et_pb_contact_submit:hover {
  background: var(--tps-navy) !important; color: #FEFEFE !important;
}

/* Contact info list on the red Quote section (left column) — light text,
   bold labels, links inherit white. */
.tps-contact-list,
.tps-contact-list p { color: #FFFFFFCC !important; font-size: 15px !important; line-height: 1.9 !important; }
.tps-contact-list strong { color: #FEFEFE !important; }
.tps-contact-list a { color: #FEFEFE !important; text-decoration: none; }

/* Marquee full-bleed — Divi rows cap at ~1080px, which stops the band mid-page.
   Put tps-marquee on the marquee SECTION so it scrolls the full viewport width. */
.tps-marquee.et_pb_section { padding-left: 0 !important; padding-right: 0 !important; }
.tps-marquee .et_pb_row {
  width: 100% !important; max-width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* Quote-form tagline — the small muted line under the form ("No commitment…").
   Kill the form module's bottom margin and keep the note's top margin tight so
   the tagline sits close under the card. If a big gap remains it's the note's
   row/section padding — drop that row's top padding to 0 (or move the note into
   the form's column). */
.tps-quote-form { margin-bottom: 0 !important; }
.tps-quote-note,
.tps-quote-note p {
  font-size: 12px !important; color: #FFFFFF99 !important;
  text-align: center; margin-top: 6px !important; margin-bottom: 0 !important;
}

/* =====================================================================
   13. MOBILE MENU MODULES  (<=980px)
   Divi's Menu module collapses to a hamburger at 980px and hard-codes
   .et_mobile_menu to background:#fff. Both blocks below exist because the
   site's menu link colour is white, which is invisible on that panel.

   13.1 FOOTER — the hamburger is suppressed entirely and the columns fall
        back to plain stacked lists.
   13.2 HEADER — the hamburger is kept (correct for a header) and the drawer
        is repainted to the header navy.
   ===================================================================== */

/* ── 13.1 Footer: no hamburger, plain stacked lists ── */
@media (max-width: 980px) {
  .et_pb_section_0_tb_footer .tps-footer-menu .et_mobile_nav_menu,
  .et_pb_section_0_tb_footer .tps-footer-menu .et_mobile_menu {
    display: none !important;
  }
  .et_pb_section_0_tb_footer .tps-footer-menu .et_pb_menu__menu,
  .et_pb_section_0_tb_footer .tps-footer-menu .et_pb_menu__menu > nav {
    display: block !important;
  }
  .et_pb_section_0_tb_footer .tps-footer-menu .et_pb_menu__menu > nav > ul {
    display: block !important;
    padding: 0 !important;
  }
  .et_pb_section_0_tb_footer .tps-footer-menu .et_pb_menu__menu > nav > ul > li {
    display: block;
    float: none;
    padding: 0;
    margin: 0 0 10px 0;
  }
  .et_pb_section_0_tb_footer .tps-footer-menu .et_pb_menu__menu > nav > ul > li > a {
    display: block;
    padding: 0;
  }

  /* modules carry et_pb_text_align_right-tablet/-phone; Divi also
     right-aligns .et_pb_menu__wrap under 980px — undo both */
  .et_pb_section_0_tb_footer .tps-footer-menu.et_pb_menu { text-align: left !important; }
  .et_pb_section_0_tb_footer .tps-footer-menu .et_pb_menu__wrap { justify-content: flex-start !important; }
}

/* ── 13.2 Header: keep the hamburger, repaint the drawer navy ──
   Do NOT add position/z-index to .et_pb_menu__wrap, .et_mobile_nav_menu or
   .mobile_nav. Those are the drawer's positioned ancestors, so making one of
   them the containing block re-anchors the panel to the hamburger icon and
   it renders as a narrow strip hanging off the right edge. Only the module
   root (.et_pb_menu) and the panel itself are touched here. */
@media (max-width: 980px) {

  /* Stacking — module root only */
  .et-l--header .et_pb_menu {
    position: relative;
    z-index: 100;
  }

  /* Header CTA is hidden below the menu breakpoint.
     History, so this is not "simplified" back into a z-index rule later:
     the Free Quote button painted over the open drawer through three
     successive stacking fixes (raising the panel, raising the module root,
     ranking the panel inside the module's context). Adding
     position:relative to the button was itself part of the problem — it
     promoted a static element into the positioned layer, where it then had
     to be out-ranked. A display:none element takes part in no stacking
     context at all, so this holds regardless of how Divi nests the CTA.
     The hamburger is the only header control under 980px by design; the
     quote path on mobile is the drawer's own Get a Quote item plus the
     hero CTA. If the client wants a persistent mobile quote button, put it
     in the red announcement bar (.tps-topbar) — that bar is a sibling of
     the nav row and never overlaps the drawer. */
  .et-l--header .tps-btn-primary,
  .et-l--header .tps-btn-primary.et_pb_button {
    display: none !important;
  }

  /* Panel shell.
     z-index is LOAD-BEARING: z-index:100 above makes .et_pb_menu a stacking
     context, so if the Free Quote CTA is a child item of the Navigation
     module it is ranked against the drawer INSIDE that context. Without an
     explicit value the drawer is z-index:auto (0) and the CTA's 1 wins —
     the button then paints on top of the open menu. Do not remove. */
  .et-l--header .et_pb_menu ul.et_mobile_menu,
  .et-l--header .et_pb_menu .et_mobile_menu {
    z-index: 20;
    background-color: #0B4FA8 !important;   /* --tps-navy; literal so it can't
                                               inherit a Divi module override */
    border-top: 3px solid #C41230 !important;
    box-shadow: 0 14px 30px #00000047;
    padding: 6px 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Nested lists inherit the shell — never transparent */
  .et-l--header .et_pb_menu .et_mobile_menu .sub-menu {
    background-color: inherit !important;
  }

  /* Items */
  .et-l--header .et_pb_menu .et_mobile_menu li a {
    color: #FEFEFE !important;
    display: block;
    padding: 14px 22px !important;   /* 44px+ tap target */
    font-size: 16px;
    background-color: transparent !important;
    border-bottom: 1px solid #FFFFFF24 !important;
  }
  .et-l--header .et_pb_menu .et_mobile_menu .sub-menu li a { padding-left: 40px !important; }
  .et-l--header .et_pb_menu .et_mobile_menu > li:last-child > a { border-bottom: 0 !important; }

  /* Active/hover. The current-menu-item override is here and ONLY here —
     Divi paints active items in the accent red, which is unreadable on navy.
     NOTE: while the Blog menu item points at "/" WordPress stamps
     current-menu-item on both Homepage and Blog. That is menu data, not CSS;
     repoint Blog at the Blog page in Appearance > Menus. */
  .et-l--header .et_pb_menu .et_mobile_menu li.current-menu-item > a,
  .et-l--header .et_pb_menu .et_mobile_menu li a:hover {
    color: #FEFEFE !important;
    font-weight: 700;
    background-color: #FFFFFF1A !important;
  }
}