/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * ============================================================
 * HEWEB-751 — Human Element Child Theme 2026
 * ============================================================
 *
 * This stylesheet re-skins the Elementor-built site in the 2026 Human Element
 * brand. The notes below explain how it is organised and the cascade rules it
 * relies on, so edits stay consistent and predictable.
 *
 * DEBUGGING A STYLE THAT WON'T APPLY
 * ----------------------------------
 * Inspect the element's computed styles in the browser dev tools and find the
 * rule that is actually winning. If a value won't change no matter what you add
 * here, the winner is almost always an Elementor container custom property
 * (--width, --gap, --flex-direction, --padding-*) set as an inline style or a
 * per-page UUID rule — those beat every author stylesheet. Target the Elementor
 * variable itself (see "Common pitfalls" below) rather than adding more rules.
 *
 * WHEN TO USE UNLAYERED vs @LAYER SECTIONS
 * ----------------------------------------
 *    Unlayered   — Any rule targeting Elementor's own class names
 *                  (.elementor-button, .e-con, .e-con-inner, etc.) because
 *                  Elementor's widget CSS is also unlayered, and unlayered
 *                  CSS beats @layer blocks unconditionally regardless of
 *                  specificity or source order.
 *    @layer sections — Brand kit class names we own and add via CSS Classes
 *                  field (.hero, .services-accordion, .blog-grid, etc.).
 *                  These have zero competing Elementor rules, so @layer works.
 *    @layer tokens — CSS custom properties only. Always safe in a layer.
 *
 * SPECIFICITY CEILING: 0,3,0 maximum.
 *    Common patterns to reach it without exceeding:
 *      [data-elementor-type="header"] .site-nav .elementor-nav-menu--main  = 0,3,0
 *      .contact__card .hbspt-form .hs-input                                = 0,3,0
 *      :where() zeroes any selector inside it — use to stay under ceiling
 *    When a pseudo-class like :hover pushes over 0,3,0, wrap in :where():
 *      .block .element :where(:hover)  not  .block .element:hover
 *    TODO items in this file mark suppressions that need future refactoring.
 *
 * COMMON PITFALLS
 * ---------------
 *    — Elementor --width / --gap vars: always set BOTH the Elementor var
 *      AND the plain property. Elementor reads the var; browsers use the plain.
 *    — HubSpot inline stylesheets: unlayered, injected after our external
 *      stylesheet. Use specificity advantage (0,3,0) rather than source order.
 *    — border: 0 on Elementor buttons: set border: 2px solid transparent in
 *      the base state to pre-reserve space for hover border animation.
 *    — SmartMenus (Elementor Pro nav dropdowns): sets top, left, display as
 *      inline styles at runtime — CSS top/margin-top cannot override inline
 *      styles. Use border-bottom (not box-shadow) for the nav underline so
 *      SmartMenus includes it in its dropdown positioning math.
 *    — widget-nav-menu.min.css loads AFTER our stylesheet in the page head, so
 *      source order does not help us there. Beat it with higher specificity
 *      (0,3,0 vs its 0,2,1 or 0,2,2).
 *
 * CASCADE ARCHITECTURE
 * --------------------
 * All Elementor and parent-theme CSS is unlayered. Per the CSS spec,
 * unlayered CSS has higher implicit priority than any @layer block,
 * regardless of specificity or source order. This shapes the architecture:
 *
 *   1. @layer tokens — CSS custom properties only. Unlayered CSS cannot
 *                      "beat" a variable definition — it just references
 *                      the variable. This layer is always safe.
 *
 *   2. Unlayered base — Body, link, heading element defaults. Written as
 *                       plain CSS, loaded after the parent theme but before
 *                       late-loading Elementor post CSS. Wins over the parent
 *                       theme on source order at equal specificity.
 *
 *   3. Unlayered section rules targeting Elementor class names —
 *                       Rules targeting .elementor-button, .e-con-inner,
 *                       .elementor-nav-menu--main, etc. MUST be unlayered.
 *                       Putting them in @layer sections causes them to lose
 *                       to Elementor's unlayered widget CSS regardless of
 *                       specificity. Scoped tightly under
 *                       [data-elementor-type="header"] (or equivalent
 *                       attribute selectors) to prevent any bleed.
 *
 *   4. @layer layout, components, sections — Reserved for brand kit class
 *                       names we fully own and add to Elementor containers
 *                       via CSS Classes field (.hero, .services-accordion,
 *                       etc.). These have no competing Elementor rules so
 *                       @layer works cleanly.
 *
 * FONT LOADING
 * ------------
 * DM Sans and Fraunces are already enqueued by Elementor's Google Fonts
 * system (elementor-gf-fraunces-css, elementor-gf-dmsans-css). Do NOT
 * add @import or enqueue them again.
 *
 * RULES
 * -----
 * - No !important. Ever. Win through source order and specificity.
 * - Do not target .elementor-element-XXXXXXXX selectors.
 * - BEM class naming on all new classes we introduce.
 * ============================================================
 */

/* Layer declaration — order determines priority (later = higher).
   base and all Elementor-class-targeting section rules are intentionally
   UNLAYERED (see architecture note above). */
@layer tokens, layout, components, sections;

/* Heading accent — the kit's pattern: an <em> inside a section heading is warm
   orange, italic, weight 400 (e.g. "Our Work Speaks for <em>Itself</em>").
   Layered: nothing unlayered styles em. Every heading and the article pull
   quote take it (HEWEB-742); the hero H1 and interstitial quote set a
   lighter weight of their own. */
@layer components {
  :where(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .wp-block-pullquote p, .section-heading) em {
    color: var(--color-warm-orange);
    font-style: italic;
    font-weight: 400;
  }
}

/* ============================================================
   LAYER: tokens
   Exact design tokens from humanelement/human-element-brand-kit-2026
   shared.css. Do not invent values. All values from the spec.
   ============================================================ */
@layer tokens {
  :root {
    /* ── Colors ─────────────────────────────────────────────── */
    --color-midnight-navy: #1d2f38;
    --color-warm-white:    #f2ede2;
    --color-warm-orange:   #f9b046;
    --color-deep-mint:     #33c28a;
    --color-light-blue:    #8fd6e3;
    --color-white:         #fff;

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:       "DM Sans", sans-serif;
    --font-serif:      "Fraunces", serif;

    /*
     * font-variation-settings for Fraunces.
     * CSS deliverable value: opsz 72, SOFT 100 (screen-optimised).
     * Figma authoring note: opsz 9, WONK 1, SOFT 50.
     * Using the CSS deliverable value: it matches the designer's intent; the
     * Figma note only reads differently because of Figma's font rendering
     * (confirmed by Dane, 2026-09-28).
     */
    --font-serif-axes: "opsz" 72, "SOFT" 100;

    /* ── Layout ─────────────────────────────────────────────── */
    --section-px:  150px;
    --section-py:  100px;
    --content-max: 1500px;

    /* ── Body text (HEWEB-738: 18/30 everywhere, as on the current site) ──
       Every body-copy rule reads these; --lead-* is for the Let's chat card. */
    --body-size: 18px;
    --body-leading: 30px;
    --lead-size: 20px;
    --lead-leading: 30px;
    --platforms-cell-px: 44px; /* platforms cell padding; the phone testimonial quote adds it to line up with the cell text */

    /*
     * --canvas-width is the brand kit's static HTML body min-width.
     * NOT applied as min-width on body here (site must be responsive).
     * Kept as a reference token for reproducing fixed-width spec values.
     */
    --canvas-width: 1800px;

    /* ── Row separators ────────────────────────────────────── */

    /*
     * Use as individual properties — CSS custom properties cannot be
     * used directly in border shorthand.
     * e.g. border-top-width: var(--border-row-width);
     *      border-top-style: var(--border-row-style);
     *      border-top-color: var(--border-row-color);
     */

    --border-row-width:      1px;
    --border-row-style:      solid;
    --border-row-color:      rgb(29 47 56 / 14%);
    --border-row-dark-color: rgb(242 237 226 / 18%);
  }
}

/* ============================================================
   BASE (unlayered)
   Element-level defaults on top of Hello Elementor's reset.css
   and theme.css. Written as plain unlayered CSS so source order
   beats the parent theme at equal specificity.
   ============================================================ */
body {
  background-color: var(--color-warm-white);
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:active {
  color: inherit;
}

/* =============================================================
   TEXT FLOW, BULLET LISTS AND LINKS in page content (HEWEB-737 visual pass #3, #4, #7, #19)
   One rule set for text-editor widgets and accordion answers, instead of a
   copy per section. Header and footer keep their own rules.
   ============================================================= */

/* Paragraphs and lists share one rhythm (Hello's p margin, 0.9rem).
   Production lists often wrap each item in <p>; that inner margin is removed. */
:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content) ul,
:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content) ol {
  margin-block: 0 0.9rem;
}

:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content) li > p {
  margin-block: 0;
}

/* List items take the paragraphs' color and leading: the section's muted text
   color (78% navy on light sections, warm white on dark ones), size and leading, so a bullet
   reads like the sentence above it (Emily, HEWEB-738/743, Oct 7). Before this the
   items were full navy at 24px, darker and tighter than the paragraphs. */
:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content) li {
  color: var(--section-fg-muted, rgb(29 47 56 / 78%));
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

/* Default for paragraphs and list items on pages that no section rule styles
   (Privacy Policy, legal and landing pages). Specificity 0, so every unlayered
   section rule still wins. It is itself unlayered, so it beats every rule inside
   @layer sections whatever their specificity: a layered font-size or line-height
   on a p or li does nothing. Put a size that must differ from the body (labels,
   chips) in an unlayered rule, as the contact card paragraph below does. Forms and navigation lists keep their own sizes (HEWEB-738 Q7). */
:where([data-elementor-type="wp-page"]) :where(p, li):where(:not(:where(form, .hbspt-form, .hs-form, nav) *)) {
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content) :is(p, ul, ol):last-child {
  margin-block-end: 0;
}

/* Orange square bullets (brand kit .accordion-item__bullet) for every list in
   page content (visual pass #76), not only the sections that used to list
   them. The square is positioned, not a flex item, so bold lead-ins and links
   stay in the text flow (#72). Embedded templates keep their own lists. */
:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content):where(:not(.elementor-widget-template *)) ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding-left: 0;
}

:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content):where(:not(.elementor-widget-template *)) ul > li {
  padding-left: 21px;
  position: relative;
}

:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content):where(:not(.elementor-widget-template *)) ul > li::before {
  background-color: var(--color-warm-orange);
  border-radius: 2px;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 9px;
  top: calc(0.5lh - 4px);
  width: 8px;
}

/* Bullets match the paragraph beside them, section by section (Emily, HEWEB-738, Oct 15:
   HubSpot "Real Work, Real Results" had full navy paragraphs and 78% navy bullets). The shared
   rule above colors list items with --section-fg-muted. A section whose paragraphs use another
   color sets that token once on its container and its paragraph rule reads the same token, so
   the two cannot drift (alternating-label, grid-4x2-cream, dark-split, services, values grid).
   The featured case section follows the same pattern (see the featured case section). */
:is(.services__grid, .values-grid__row) .elementor-widget-text-editor li {
  color: var(--section-fg-muted, rgb(29 47 56 / 72%));
}

/* Links inside body text: same type as the sentence, thin orange underline.
   Not inside embedded templates (platforms, Let's chat) or a platforms grid on the
   page (/platforms-and-partners/, #185): those style their own links. */
:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content):where(:not(.elementor-widget-template *, .platforms__grid *)) :where(p, li) > a:not(.read-more) {
  color: var(--section-fg, var(--color-midnight-navy));
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-warm-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.2s;
}

:where([data-elementor-type="wp-page"]) :where(.elementor-widget-text-editor, .elementor-tab-content):where(:not(.elementor-widget-template *, .platforms__grid *)) :where(p, li) > a:not(.read-more):hover {
  text-decoration-thickness: 2px;
}

/* Shared Read more link (brand kit .read-more): a standalone link, marked
   with class="read-more" in the content, e.g. <p><a class="read-more" href="…">Read More</a></p> */
:where([data-elementor-type="wp-page"]) .read-more {
  align-items: center;
  border-bottom: 1px solid var(--color-warm-orange);
  color: var(--color-midnight-navy);
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 4px;
  line-height: 15px;
  padding-bottom: 3px;
  text-decoration: none;
  box-shadow: 0 0 0 0 var(--color-warm-orange);
  transition: color 0.25s, box-shadow 0.2s;
}

:where([data-elementor-type="wp-page"]) .read-more:hover {
  box-shadow: 0 1px 0 0 var(--color-warm-orange);
}

:where([data-elementor-type="wp-page"]) .read-more::after {
  /* Drawn arrow (visual pass #74, decision B): a medium stroke between the
     text weights, mitered rather than rounded, always the link color. */
  background-color: currentcolor;
  content: "";
  height: 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

/* Card Read more buttons (services, grid-4x2-cream) carry the same drawn arrow
   as .read-more (#189). On the content wrapper: the button's own ::after is the
   phone hit area. */
.services__grid .elementor-widget-button .elementor-button-content-wrapper,
.grid-4x2-cream__grid .elementor-widget-button .elementor-button-content-wrapper {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.services__grid :where(.elementor-widget-button) .elementor-button-content-wrapper::after,
.grid-4x2-cream__grid :where(.elementor-widget-button) .elementor-button-content-wrapper::after {
  background-color: currentcolor;
  content: "";
  height: 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}

/* headings: serif brand font with variation settings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-variation-settings: var(--font-serif-axes);
}

img {
  display: block;
  max-width: 100%;
}

/*
 * Wide screens (HEWEB-741): above the kit's 1800px canvas the content column
 * stays 1500px (--content-max) and centers, like the kit's .inner
 * (margin: 0 auto), so the side gutter grows with the viewport. Sections,
 * the header and the footer all read --section-px, so they line up.
 * 100% of the root is the viewport without the scrollbar only in container
 * units, so 100vw is used: the column sits up to half a scrollbar (~8px) left
 * of true center on systems with classic scrollbars.
 */
@media (width > 1800px) {
  :root {
    --section-px: round(calc((100vw - var(--content-max)) / 2), 1px);
  }
}

/*
 * Fluid section padding — brand kit pattern.
 * As the viewport narrows from 1800px to 1024px, --section-px scales
 * continuously from 150px to 50px via clamp(). All sections and the header
 * that use var(--section-px) for horizontal padding follow automatically.
 * Formula from humanelement/human-element-brand-kit-2026/brand-kit.css.
 */
@media (width <= 1800px) {
  /* round(…, 1px) keeps the padding on whole pixels. Without it, 1800px gives
     149.966px and the header logo lands on a fractional x, which Safari on
     macOS renders slightly soft (HEWEB-741 QA). */
  :root {
    --section-px: clamp(50px, round(calc(12.887vw - 82px), 1px), 150px);
  }

  /* No minimum width (Phase 3): below 1024px the responsive rules at the end
     of this file take over. clip, not hidden, so nothing becomes a scroll
     container and full-bleed photos are still trimmed at the viewport edge. */
  body {
    overflow-x: clip;
  }
}

/* ============================================================
   HEADER / NAV (unlayered — targets Elementor class names)

   Rules targeting Elementor's own class names (.elementor-button,
   .e-con-inner, .elementor-nav-menu--main, etc.) are unlayered because
   Elementor's widget CSS is unlayered, and unlayered CSS beats @layer
   blocks unconditionally. These rules win on source order: this file
   loads at line 102, after Elementor's frontend.min.css (line 77).

   All rules are scoped under [data-elementor-type="header"] or
   :where([data-elementor-type="header"]) to prevent any bleed outside
   the header template. No !important used anywhere.

   Spec: humanelement/human-element-brand-kit-2026/shared.css
   ============================================================ */

/* ── Outer header shell ─────────────────────────────────── */
[data-elementor-type="header"] {
  background: var(--color-white);
  border-bottom: 1px solid #ebeced;
  height: 100px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}

/*
 * Layout direction for the header flex container.
 * Elementor's .e-con.e-flex sets --flex-direction:column by default.
 * .e-con.e-flex>.e-con-inner reads its flex-direction from that variable
 * (specificity 0,2,0). We use a 0,2,1 selector to set --flex-direction:row
 * — feeding Elementor's own CSS variable mechanism rather than declaring
 * a competing flex-direction property.
 */
[data-elementor-type="header"].elementor-location-header .e-con,
[data-elementor-type="header"].elementor-location-header .e-con-boxed {
  max-width: 100%;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
  width: 100%;
}

/* ── Inner content row (logo | nav | actions) ───────────── */
[data-elementor-type="header"].elementor-location-header .e-con-inner {
  --flex-direction: row;

  align-items: center;
  display: flex;
  flex-direction: row;
  height: 99px;
  justify-content: space-between;
  margin: 0;
  max-width: var(--content-max);

  /* 26 + 46px logo + 27 = 99px: the logo sits on a whole-pixel y (26px)
     instead of being centred to 26.5px. */
  padding: 26px 0 27px;
  width: 100%;
}

/* ── Logo ───────────────────────────────────────────────── */
[data-elementor-type="header"] .elementor-widget-theme-site-logo {
  align-items: center;
  display: flex;
  flex: none;
  height: 46px;
}

[data-elementor-type="header"] .elementor-widget-theme-site-logo img {
  height: 46px;
}

/*
 * Elementor's widget-image.min.css sets:
 *   .elementor-widget-image a img[src$=".svg"] { width: 48px }  (0,2,2)
 * This forces the SVG to 48px wide regardless of its natural proportions.
 * At height:46px the logo's natural proportional width is ~97px
 * (SVG viewBox 394×187: 46 × 394/187 ≈ 97px).
 *
 * Specificity breakdown of Elementor's rule: 0,2,2
 *   .elementor-widget-image (0,1,0) + a (0,0,1) + img[src$=] (0,1,1)
 *
 * Our selector must be 0,3,0 to win (stylelint ceiling):
 *   [data-elementor-type="header"] (0,1,0)
 *   .elementor-widget-theme-site-logo (0,1,0)
 *   .elementor-widget-container (0,1,0)
 *   :where(img[src$=".svg"]) zeroed to (0,0,0)
 *   Total: 0,3,0 — beats 0,2,2
 */
[data-elementor-type="header"] .elementor-widget-theme-site-logo .elementor-widget-container :where(img[src$=".svg"]) {
  width: auto;
}

/*
/*
 * Hide the HTML widget [5a7e8abc] (class: header-search--desktop-hidden).
 * The widget is visually empty (content commented out) but was still
 * occupying ~20px of flex space in the header row, making the right
 * margin 20px wider than the left. Same pattern as the hamburger hide.
 */
[data-elementor-type="header"].elementor-location-header .header-search--desktop-hidden {
  --display: none;

  display: none;
}

/*
 * Hide the hamburger/toggle at desktop.
 * CSS class header-nav-toggle--desktop-hidden applied via Elementor CSS
 * Classes field. The class landed on widget [79014c81] (an icon widget
 * rendering e-fas-bars). Elementor's post CSS sets --display:flex on this
 * element at 0,3,0 specificity. We set both --display:none (Elementor's
 * variable) and display:none at 0,3,0 to match and win on source order.
 */
[data-elementor-type="header"].elementor-location-header .header-nav-toggle--desktop-hidden {
  --display: none;

  display: none;
}

/* ── Nav menu ───────────────────────────────────────────── */

/* Widget wrapper: flex:1 fills remaining space between logo and actions */
[data-elementor-type="header"] .elementor-widget-nav-menu {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

/* Main nav container */
[data-elementor-type="header"] .elementor-nav-menu--main {
  justify-content: center;
  width: 100%;
}

/* Nav item list: single row, no wrap, fluid spacing.
 * gap scales from 40px at 1800px down to ~0px at narrow viewports.
 * clamp formula: 40px at 1800px (2.5×18-5=40), 0px floor.
 * Brand kit spec: .site-nav { gap: 40px } at 1800px reference canvas.
 */
:where([data-elementor-type="header"]) .elementor-nav-menu--main > .elementor-nav-menu {
  flex-wrap: nowrap;
  gap: clamp(0px, calc(2.5vw - 5px), 40px);
  justify-content: center;
}

/*
 * Elementor's widget-nav-menu.min.css sets padding:10-13px 20px on nav links.
 * .site-nav is on the nav-menu widget [1fadf57f] (Advanced > CSS Classes).
 * 3 selectors = 0,3,0 beats Elementor's 0,2,1 on source order.
 */

/* Lock padding and transition unconditionally on top-level nav items only.
 * widget-nav-menu.min.css sets padding: 13px 20px on a, a:hover, a:focus, a.highlighted.
 * .elementor-nav-menu > li > a targets only the top-level <a> not sub-menu items.
 * TODO(code-quality): selector-max-specificity suppressed. */
/* stylelint-disable-next-line selector-max-specificity */
[data-elementor-type="header"] .site-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a {
  /* 3px above and below: a 6px text-to-underline gap, matching the site's
     other underline links (.read-more: 3px padding + 1px border). */
  padding: 3px 5px;
  transition: border-bottom-color 0.25s, color 0.25s;
}

:where([data-elementor-type="header"]) .elementor-nav-menu--main .elementor-item {
  /* Reserve 2px for the border-bottom underline in the base state so hover
   * does not cause a layout shift. SmartMenus measures the <li> height including
   * this border when positioning the dropdown — keeps the dropdown below the underline. */
  border-bottom: 2px solid transparent;
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 17px;
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

/* Between the hamburger and the wide layout the search icon takes 43px the
   nav needed, so the links step down a size (HEWEB-759) */
@media (1024px < width < 1280px) {
  [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item {
    font-size: 15px;
  }
}

/* Nav hover/focus/active: warm orange border-bottom underline.
 * e--pointer-none is set in Elementor Site Settings — no ::after animation involved.
 * border-bottom participates in the box model so SmartMenus positions the dropdown below it. */
:where([data-elementor-type="header"]) .elementor-nav-menu--main .elementor-item:hover,
:where([data-elementor-type="header"]) .elementor-nav-menu--main .elementor-item:focus,
:where([data-elementor-type="header"]) .elementor-nav-menu--main .elementor-item.elementor-item-active,
:where([data-elementor-type="header"]) .elementor-nav-menu--main .elementor-item.highlighted {
  border-bottom-color: var(--color-warm-orange);
  color: var(--color-midnight-navy);

  /* Elementor's .elementor-nav-menu a:hover (0,2,1) sets line-height 20px,
     which made items grow 3px and the row jump 1.5px on hover. */
  line-height: 17px;
}

/* Elementor's clearfix on the nav list (content: " "; display: block) becomes
   a sixth flex item and adds one extra gap; at 1100px that pushed the list
   past its container. The list is flex, so the clearfix isn't needed. */
:where([data-elementor-type="header"]) .elementor-nav-menu--main > .elementor-nav-menu::after {
  content: none;
}

/* Lock padding on hover — widget-nav-menu.min.css restores 13px 20px on a:hover at 0,2,1.
 * Our selector at 0,3,0 beats it. */

/* Zero Elementor's dropdown item hover background.
 * widget-nav-menu.min.css sets background: rgb(63,68,75) on .elementor-sub-item.highlighted (class on the <a> itself).
 * .highlighted is added to the <a> when its child submenu is open. */
[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-sub-item:where(:hover),
[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-sub-item:where(.highlighted),
[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-sub-item:where(:focus),
[data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-sub-item:where(.elementor-item-active) {
  background-color: transparent;
}

/* ── Desktop dropdown ───────────────────────────────────── */

/* Using real [data-elementor-type] (0,1,0) to reach 0,3,0 and beat Elementor's per-page UUID rules */
[data-elementor-type="header"] .elementor-nav-menu--main .sub-menu {
  border-color: rgb(29 47 56 / 8%);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 8px 24px rgb(29 47 56 / 12%);
  min-width: 200px;
  padding: 6px 0;
}

[data-elementor-type="header"] .elementor-nav-menu--main .elementor-sub-item {
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px;
  transition: background 0.15s, color 0.15s;
}

[data-elementor-type="header"] .elementor-nav-menu--main .elementor-sub-item:where(:hover) {
  background: rgb(29 47 56 / 6%);
  color: var(--color-midnight-navy);
}

/* Active/current page item in dropdown: warm orange text */
[data-elementor-type="header"] .elementor-nav-menu--main :where(.elementor-item-active).elementor-sub-item,
[data-elementor-type="header"] .elementor-nav-menu--main :where(.current-menu-item) > .elementor-sub-item,
[data-elementor-type="header"] .elementor-nav-menu--main :where(.current-page-item) > .elementor-sub-item {
  color: var(--color-warm-orange);
}

/* ── Header icon widgets (search icon, etc.) ────────────── */
[data-elementor-type="header"] .elementor-widget-icon {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: none;
  height: 23px;
  justify-content: center;
  width: 23px;
}

[data-elementor-type="header"] .elementor-widget-icon svg {
  height: 23px;
  width: 23px;
}

/*
 * Search icon (HEWEB-759): the icon widget [6fc0a5f5], class
 * .header-icon--search-mobile (a name from before it showed at every width),
 * links to the search page. It sits after the nav and before Contact Us.
 */
[data-elementor-type="header"] .header-icon--search-mobile {
  order: 1;
}

[data-elementor-type="header"] .elementor-widget-button {
  order: 2;
}

/*
 * Hide the inline search bar widget at desktop.
 * .elementor-widget-search is the Elementor widget-type class —
 * unique within the header (only one search widget exists there).
 * Widget [3e797c8a] did not receive a custom CSS class, so we use
 * the widget-type class scoped to the header instead.
 */
[data-elementor-type="header"] .elementor-widget-search {
  display: none;
}

/* ── CTA button ─────────────────────────────────────────── */

/* Spec: DM Sans 17px 600, warm orange bg, midnight navy text,
   8px radius, 47px height, 140px width.
   Unlayered so it wins over Elementor's frontend.min.css default
   .elementor-button { background-color: #69727d } at 0,1,0. */
[data-elementor-type="header"] .elementor-button {
  align-items: center;
  background-color: var(--color-warm-orange);
  border-color: transparent;
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  color: var(--color-midnight-navy);
  display: flex;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  height: 47px;
  justify-content: center;
  line-height: 17px;
  padding: 15px 30px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
  width: 140px;
}

[data-elementor-type="header"] .elementor-button:hover {
  background-color: var(--color-midnight-navy);
  border-color: transparent;
  color: var(--color-warm-orange);
}

/* Elementor's per-page scoped rule sets color on .elementor-button at 0,3,0
 * which beats our hover rule at 0,2,1. Target .elementor-button-text directly
 * to reach 0,3,1 and win. */
[data-elementor-type="header"] .elementor-button:where(:hover) .elementor-button-text {
  color: var(--color-warm-orange);
}

/* ============================================================
   LAYER: layout
   Structural helpers — brand kit class names we add to Elementor
   containers via CSS Classes field. No competing Elementor rules.
   ============================================================ */

/* ============================================================
   LAYER: components
   Reusable UI pieces — brand kit class names (.read-more, etc.).
   No competing Elementor rules.
   ============================================================ */

/* ============================================================
   LAYER: sections
   Brand kit section classes added to Elementor containers via CSS
   Classes field (.hero, .services-accordion, .client-logos, etc.).
   @layer is appropriate here because these are class names we own —
   Elementor has no competing rules for them.
   Do NOT put rules targeting Elementor's own class names here.
   ============================================================ */

/* ============================================================
   FOOTER (unlayered — targets Elementor class names and brand kit
   CSS classes added to containers)

   Spec: humanelement/human-element-brand-kit-2026/shared.css

   Elementor structure on staging (Elementor template 22281):
     <footer [data-elementor-type="footer"]>
       .e-con-boxed.footer-columns  (data-id TBD) — 4-col flex row
         .e-con-full × 4            — column children
       .e-con-boxed.footer-social-row — social icons row
       .e-con-boxed.footer-bottom   — copyright | legal
         .e-con-full × 2

   Note: brand kit uses position:absolute columns on a 1500px canvas.
   We keep the existing flex 25%-column layout and apply brand kit
   visual design on top.

   HOW TO APPLY IN ELEMENTOR (template 22281):
     Footer outer container    -> CSS Class: "footer-columns"
     Social icons container    -> CSS Class: "footer-social-row"
     Bottom bar container      -> CSS Class: "footer-bottom"
     Col headings (H3 widgets) -> No custom class (styled via .elementor-heading-title)
     Nav menu widgets          -> No custom class (styled via .elementor-nav-menu--main)
     Newsletter HubSpot widget -> CSS Class: "footer-newsletter" (widget CSS Classes field)
     Verify ".footer-columns" in the browser dev tools after changes.

   Cascade note: nav padding fight — widget-nav-menu.min.css sets
   padding: 13px 20px on .elementor-nav-menu--main a at 0,2,1. Our
   [data-elementor-type="footer"] .footer-columns .elementor-nav-menu--main :where(a)
   reaches 0,3,0 and wins. First-child padding-top zero rule needs 0,3,1 on hover —
   see stylelint-disable comments inline.
   ============================================================ */

/* ── Outer footer shell ─────────────────────────────────── */
[data-elementor-type="footer"] {
  background-color: var(--color-midnight-navy);
}

/* ── Columns container: main upper section ──────────────── */
:where([data-elementor-type="footer"]).elementor-location-footer .footer-columns {
  --flex-direction: row;

  padding: 80px var(--section-px) 0;
  width: 100%;
}

:where([data-elementor-type="footer"]).elementor-location-footer .footer-columns > .e-con-inner {
  --flex-direction: row;

  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--content-max);
  padding-bottom: 44px;
  width: 100%;
}

/* ── Column headings (orange label, uppercase, tracked) ─── */
:where([data-elementor-type="footer"]) .footer-columns .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.1px;
  line-height: 15px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* ── Column body text ───────────────────────────────────── */
:where([data-elementor-type="footer"]) .footer-columns .elementor-widget-text-editor :where(p, a) {
  color: rgb(242 237 226 / 74%);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
}

/* ── Column nav links (HE links / Services columns) ─────── */

/*
 * Elementor's widget-nav-menu.min.css:
 *   .elementor-nav-menu--main .elementor-nav-menu a { padding: 13px 20px } (0,2,1)
 * Fix: [data-elementor-type="footer"] .footer-columns .elementor-nav-menu--main :where(a)
 * = 0,3,0 > 0,2,1. Sets padding-left/right to 0, keeps vertical padding.
 * Using [data-elementor-type] unscoped (not :where()) to contribute 0,1,0.
 */
[data-elementor-type="footer"] .footer-columns .elementor-nav-menu--main :where(a) {
  color: rgb(242 237 226 / 74%);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  padding-left: 0;
  padding-right: 0;
  transition: box-shadow 0.25s;
}

:where([data-elementor-type="footer"]) .footer-columns .elementor-nav-menu :where(.elementor-item:hover) {
  box-shadow: 0 2px 0 var(--color-warm-orange);
  color: var(--color-warm-white);
}

/* Zero Elementor's pointer animation on footer nav — causes layout shift */
:where([data-elementor-type="footer"]) .footer-columns .elementor-nav-menu :where(.elementor-item)::before,
:where([data-elementor-type="footer"]) .footer-columns .elementor-nav-menu :where(.elementor-item)::after {
  display: none;
}

/* Zero top padding on the FIRST link only so the first visible character
 * aligns with text columns (Contacts/Newsletter use <p> with no top padding).
 * Subsequent links keep their 13px top padding for inter-item spacing.
 */
[data-elementor-type="footer"] .footer-columns .elementor-nav-menu--main :where(.menu-item:first-child a) {
  padding-top: 0;
}

/* Zero left/right padding on hover — Elementor's widget-nav-menu.min.css a:hover adds 20px after our stylesheet.
 * Needs 0,3,1 to beat it. padding-top intentionally NOT zeroed — only first-child needs that. */

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity, no-descending-specificity */
[data-elementor-type="footer"] .footer-columns .elementor-nav-menu--main a:hover {
  padding-left: 0;
  padding-right: 0;
}

/* First item only: also zero padding-top on hover — Elementor's a:hover restores 13px */

/* TODO(code-quality): selector-max-specificity suppressed — actual specificity is 0,4,2
 * ([data-elementor-type] 0,1,0 + .footer-columns 0,1,0 + .elementor-nav-menu--main 0,1,0
 * + .menu-item:first-child 0,2,0 + a 0,0,1 + :hover 0,1,0 = 0,6,1 — but :first-child
 * counts as 0,1,0 so total is 0,4,2). Needed to beat Elementor's a:hover at 0,2,1.
 * Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity */
[data-elementor-type="footer"] .footer-columns .elementor-nav-menu--main .menu-item:first-child a:hover {
  padding-top: 0;
}

:where([data-elementor-type="footer"]) .footer-columns .elementor-nav-menu--main {
  width: 100%;
}

:where([data-elementor-type="footer"]) .footer-columns .elementor-nav-menu--main > .elementor-nav-menu {
  flex-direction: column;
  gap: 14px;
}

/* Shrink list items to text width so the link box doesn't stretch
   full column width, keeping left alignment with the heading.
   align-self:flex-start alone isn't sufficient for display:block children —
   width:fit-content constrains the block to its text width. */
:where([data-elementor-type="footer"]) .footer-columns .elementor-nav-menu--main :where(.menu-item) {
  align-self: flex-start;
  width: fit-content;
}

/* ── Newsletter form layout (HubSpot widget [68b0e33e]) ──── */

/*
 * Brand kit spec: first name + last name on one flex row (gap 12px),
 * email on its own full-width row below (margin-top 12px),
 * submit button on its own row (margin-top 12px).
 *
 * HubSpot field-group classes (hs_firstname, hs_email etc.) use underscores
 * which fail the BEM lint rule. Wrapped in :where() to zero their specificity
 * and satisfy the selector-class-pattern check.
 */

/* email input full width — declared first to avoid descending specificity */

/* HubSpot renders all 3 fields (firstname, lastname, email) in a single
 * form-columns-3 fieldset. We restyle it as a 2-row flex layout:
 *   Row 1: firstname + lastname (flex:1 each, ~50% width)
 *   Row 2: email (full width)
 * The fieldset already fills the column (279px). We override the
 * 32.7% width HubSpot sets on .hs-form-field inside form-columns-3.
 */

/* Make the fieldset a flex row with wrap */
:where([data-elementor-type="footer"]) .footer-columns :where(fieldset) {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}

/* firstname and lastname: share row 1, equal flex */
:where([data-elementor-type="footer"]) .footer-columns :where([class*="hs_firstname"]) {
  flex: 1 1 0;
  max-width: none;
  padding-right: 6px;
  width: auto;
}

:where([data-elementor-type="footer"]) .footer-columns :where([class*="hs_lastname"]) {
  flex: 1 1 0;
  max-width: none;
  padding-left: 6px;
  width: auto;
}

/* email: own full-width row below */
:where([data-elementor-type="footer"]) .footer-columns :where([class*="hs_email"]) {
  flex: 0 0 100%;
  margin-top: 12px;
  max-width: none;
  width: 100%;
}

/* All inputs fill their field group */
:where([data-elementor-type="footer"]) .footer-columns :where(fieldset) .hs-input {
  width: 100%;
}

/* Submit row gap */
:where([data-elementor-type="footer"]) .footer-columns :where([class*="hs_submit"]) {
  margin-top: 12px;
  width: 100%;
}

/* Hide labels — brand kit spec shows placeholder text inside inputs only */
:where([data-elementor-type="footer"]) .footer-columns .hs-form-field label {
  display: none;
}

/* ── Newsletter form styles (HubSpot widget [68b0e33e]) ──── */

/*
 * HubSpot injects its own stylesheet setting:
 *   .hs-input { background: white; border: 1px solid #666; border-radius: 3px }
 *   .hs-button { background: transparent; border: 1px solid orange; border-radius: 3px }
 * Spec: transparent inputs with warm white 25% border, 6px radius;
 *       warm white filled button, midnight navy text, 8px radius, weight 600.
 * Selectors at 0,2,0 beat HubSpot's 0,1,0.
 */
:where([data-elementor-type="footer"]) .footer-columns .hs-input {
  background: transparent;
  border-color: rgb(242 237 226 / 25%);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  color: #757575;
  font-family: var(--font-sans);
  font-size: 15px;
  height: 48px;
  padding: 13px 15px;
}

:where([data-elementor-type="footer"]) .footer-columns .hs-input::placeholder {
  color: #757575;
}

:where([data-elementor-type="footer"]) .footer-columns .hs-button {
  background-color: var(--color-warm-white);
  border-color: transparent;
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  color: var(--color-midnight-navy);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  line-height: 16px;
  padding: 14px 32px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

:where([data-elementor-type="footer"]) .footer-columns .hs-button:hover {
  background-color: transparent;
  border-color: var(--color-warm-white);
  color: var(--color-warm-white);
}

:where([data-elementor-type="footer"]).elementor-location-footer .footer-social-row {
  padding: 0 var(--section-px);
}

:where([data-elementor-type="footer"]) .footer-social-row .elementor-social-icon {
  background-color: transparent;
  height: 40px;
  margin-inline: 4px;
  width: 40px;
}

:where([data-elementor-type="footer"]) .footer-social-row .elementor-social-icon :where(svg) {
  fill: rgb(242 237 226 / 74%);
}

:where([data-elementor-type="footer"]) .footer-social-row :where(.elementor-social-icon:hover svg) {
  fill: var(--color-warm-white);
}

/* ── Bottom bar ─────────────────────────────────────────── */
:where([data-elementor-type="footer"]).elementor-location-footer .footer-bottom {
  --flex-direction: row;

  padding: 0 var(--section-px);
}

:where([data-elementor-type="footer"]).elementor-location-footer .footer-bottom > .e-con-inner {
  --flex-direction: row;

  align-items: center;
  border-top: 1px solid rgb(242 237 226 / 15%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--content-max);
  padding-bottom: 30px;
  padding-top: 30px;
  width: 100%;
}

/* ── Bottom bar text (copyright + legal links) ──────────── */
:where([data-elementor-type="footer"]) .footer-bottom .elementor-widget-text-editor :where(p, a) {
  color: rgb(242 237 226 / 50%);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

:where([data-elementor-type="footer"]) .footer-bottom .elementor-widget-text-editor :where(a):hover {
  border-bottom: 1px solid var(--color-warm-orange);
  color: rgb(242 237 226 / 80%);
}


/* =============================================================
   DESIGN SYSTEM GUIDE -- How to apply CSS classes in Elementor
   =============================================================

   Every section uses CSS class names added via Elementor
   Advanced > CSS Classes field.

   SHARED CLASSES (any section)
   ─────────────────────────────
   .overline
     Widget: any eyebrow/label Heading or Text Editor
     Styles: DM Sans 15px/600/2.7px tracking/uppercase/warm-orange
     Exception: client-logos uses .client-logos__eyebrow (62% navy)

   .section-heading
     Widget: primary H2 Heading widget on light-bg sections
     Styles: Fraunces 46px/52px/600/midnight-navy
     Dark section override: add .testimonial to section container

   .btn-secondary  (filled dark button)
     Styles: midnight-navy bg, warm-white text, 8px radius,
             50px height, 17px 34px padding, weight 600

   .btn-border  (outline button)
     Styles: transparent bg, 2px solid midnight-navy border,
             8px radius, midnight-navy text, 50px height, 16px 32px

   .interstitial-quote  (pull-quote section)
     Styles: midnight-navy bg, 120px padding, centered Fraunces
             60px warm-white. <em> inside heading = orange/300/italic

   SECTION-SPECIFIC CLASSES -- see each section block below
   ============================================================= */

/* =============================================================
   HERO — Phase 3, step 1: brand kit .hero (50/50 split)
   Source of truth: computed values from brand-kit.html rendered
   live at 1800 / 1600 / 1400 / 1200 / 1024px viewports.

   Elementor structure on staging:
     .hero (20fee9d6)            outer e-con-boxed e-parent
       .e-con-inner              Elementor boxed inner (no custom class)
         .hero__text (3c49d2bc)  left column, e-con-boxed e-child
           .e-con-inner
             .hero__eyebrow      text-editor widget, renders a <p>
             .hero__h1           heading widget, renders <h1>
         .hero__image (37be5d2b) right column, e-con-boxed e-child
           .e-con-inner          empty; bg image set in Elementor editor

   What each rule targets and why:

   .hero
     flex row, align-items flex-start, bg midnight-navy.
     No fixed height -- section sizes to content (820px in brand kit).

   .hero__text
     Left 50vw column. flex column, justify-content center (vertically
     centers content). Padding drives the visual spacing:
       top/bottom: clamp(123px, 12.03vw, 217px) -- equal, produces center
       right:      clamp(51px,  5vw,    90px)
       left:       var(--section-px) -- tracks logo alignment token

   .hero__image
     Right column. flex: 1 0 0 takes all remaining width.
     position: relative for gradient pseudo-element.
     bg-size: cover / bg-position: center for the Elementor bg image.

   .hero__image::after
     Gradient overlay replicating brand kit hero__image-gradient div:
     90deg, navy 45% opacity at 0% fading to transparent at 40%.

   .hero__eyebrow p
     text-editor widget renders a <p>. orange, 15px, 600, 2.7px tracking,
     uppercase, 15px line-height.

   .hero__h1 h1
     warm-white, Fraunces, 60px/64px, weight 600, variation-settings token.
     Width is NOT constrained -- flows naturally inside the padded column.

   Cascade note:
     Rules competing with Elementor's unlayered .e-con / .e-con-inner rules
     (display, flex, width, padding) are written as unlayered CSS so they
     win on source order at equal specificity.
     Visual-only rules (color, typography, bg gradient) live in @layer sections
     where they have no competing unlayered rules.
   ============================================================= 
   HOW TO APPLY IN ELEMENTOR:
     Outer section container  -> CSS Class: "hero"
     Left column container    -> CSS Class: "hero__text"
     Eyebrow text widget      -> CSS Class: "hero__eyebrow"
     H1 heading widget        -> CSS Class: "hero__h1"
     Right col (interior)     -> CSS Class: "hero__image"
     Right col (homepage)     -> CSS Class: "hero__image--homepage"
   */

/* ── Unlayered layout (beats Elementor's .e-con / .e-con-inner rules) ──── */

.hero.e-con {
  --column-gap: 0px;
  --row-gap: 0px;

  background-color: var(--color-midnight-navy);
  flex-direction: row;
  gap: 0;
  padding: 0;
}

.hero.e-con > .e-con-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 0;
  height: auto;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

.hero__text.e-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 900px;
  padding: 0;
  width: 50vw;
}

.hero__text.e-con > .e-con-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  max-width: 100%;
  padding: clamp(123px, 12.03vw, 217px) clamp(51px, 5vw, 90px) clamp(123px, 12.03vw, 217px) var(--section-px);
  width: 100%;
}

/* e-con-full variant: no .e-con-inner wrapper — apply padding directly to the column */
.hero__text.e-con-full.e-con {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  padding: clamp(123px, 12.03vw, 217px) clamp(51px, 5vw, 90px) clamp(123px, 12.03vw, 217px) var(--section-px);
  width: 50vw;
}

.hero__image.e-con {
  --width: 0px;

  align-self: stretch;
  background-position: center;
  background-size: cover;
  flex: 1 0 0;
  max-width: none;
  padding: 0;
  position: relative;
  width: 0;
}

.hero__image.e-con > .e-con-inner {
  height: 100%;
  padding: 0;
}

/* e-con-full variant: no .e-con-inner wrapper */
.hero__image.e-con-full.e-con {
  height: 100%;
  padding: 0;
}

/* ── Homepage hero right-column spacer ─────────────────────────────────── */

/* .hero__image--homepage is the right half of the homepage hero.           */

/* Unlike .hero__image (interior pages), it has no bg image or gradient     */

/* overlay — the full-bleed bg and gradient live on .hero--homepage itself. */
.hero__image--homepage.e-con {
  align-self: stretch;
  flex: none;
  max-width: none;
  padding: 0;
  width: auto;
}

.hero__image--homepage.e-con > .e-con-inner {
  height: 100%;
  padding: 0;
}

/* ── Unlayered typography (beats base h1 + parent theme rules) ─────────── */

.hero__h1 h1 {
  color: var(--color-warm-white);
  font-size: 60px;
  font-weight: 600;
  line-height: 64px;
}

/* <em> in the H1 = serif-accent style: warm orange, weight 300, italic */
.hero__h1 h1 em {
  color: var(--color-warm-orange);
  font-style: italic;
  font-weight: 400;
}

@layer sections {
  /* ── Gradient overlay on image side ──────────────────────── */

  /* Replicates brand kit hero__image-gradient div via pseudo-element.
     Gradient: navy 45% opacity fading to transparent at 40% from left. */
  .hero__image.e-con::after {
    background: linear-gradient(
      90deg,
      rgb(29 47 56 / 45%) 0%,
      rgb(29 47 56 / 0%) 40%
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  /* font-family and variation-settings layered here; color/size unlayered above */
  .hero__h1 h1 {
    font-family: var(--font-serif);
    font-variation-settings: var(--font-serif-axes);
  }
}

/* ── Eyebrow — unlayered to beat body { color: midnight-navy } ─ */

/* text-editor widget renders a bare <p>; heading widget renders .elementor-heading-title */
.hero__eyebrow p,
.hero__eyebrow .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.7px;
  line-height: 15px;
  text-transform: uppercase;
}

/* Body paragraph text — spec .hero__body: 82% warm-white, 16/26, and a
   560px measure at 1800px that scales with the viewport (brand-kit.css:
   clamp(319px, 31.11vw, 560px)), so the paragraph sits under the H1 rather
   than running to the column edge. Unlayered to beat body { color }.
   :where(:not(.hero__eyebrow)) — the eyebrow is also a text-editor widget; without
   the exclusion this rule (later in source) overrode its orange 15px style. */
:where(.hero__text) .elementor-widget-text-editor:where(:not(.hero__eyebrow)) p {
  color: rgb(242 237 226 / 82%);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  max-width: clamp(319px, 31.11vw, 560px);
}

/* =============================================================
   HERO — Buttons (.hero__buttons)
   Container holding two Elementor button widgets:
     .btn-mint       deep-mint filled button (primary CTA; btn-secondary
                     renders the same inside the hero)
     .btn-border     40% warm-white outline button (secondary CTA)

   The container sits inside .hero__text after the body text widget.
   Must be type Full (e-con-full) so it doesn't get the boxed 1140px
   content-width constraint.

   HOW TO APPLY IN ELEMENTOR:
     Buttons container    -> CSS Class: "hero__buttons"
     Primary button       -> CSS Class: "btn-mint" ("btn-secondary" also renders as primary)
     Secondary button     -> CSS Class: "btn-border"
   ============================================================= */

/* Row layout, auto width so buttons don't stretch to fill the column */
.hero__buttons.e-con {
  --flex-direction: row;
  --gap: 16px;
  --column-gap: 16px;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;

  align-items: center;
  flex-direction: row;
  gap: 16px;
  padding: 0;
  width: auto;
}

/* Primary — spec .hero__btn--primary (website-development.css): deep-mint fill,
   midnight-navy text. The hero sits on midnight navy, so a navy-filled button
   would disappear; .btn-secondary inside the hero renders as this primary too,
   because earlier guidance told editors to use btn-secondary here. */
.hero__buttons .btn-secondary .elementor-button,
.hero__buttons .btn-mint .elementor-button {
  background-color: var(--color-deep-mint);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--color-midnight-navy);
  font-size: 16px;
  font-weight: 600;
  height: 52px;
  line-height: 16px;
  padding: 17.5px 34px 18.5px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}

/* Spec hover: navy fill, mint text, mint border (visible on the dark hero).
   TODO(code-quality): selector-max-specificity suppressed — hover rules exceed 0,3,0. */
/* stylelint-disable selector-max-specificity */
.hero__buttons .btn-secondary .elementor-button:hover,
.hero__buttons .btn-mint .elementor-button:hover {
  background-color: var(--color-midnight-navy);
  border-color: var(--color-deep-mint);
  color: var(--color-deep-mint);
}
/* stylelint-enable selector-max-specificity */

/* Secondary — spec .hero__btn--secondary: transparent, 40% warm-white border */
/* stylelint-disable-next-line no-descending-specificity */
.hero__buttons .btn-border .elementor-button {
  background-color: transparent;
  border: 2px solid rgb(242 237 226 / 40%);
  border-radius: 8px;
  color: var(--color-warm-white);
  font-size: 16px;
  font-weight: 600;
  height: 52px;
  line-height: 16px;
  padding: 16.5px 34px 17.5px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
}

/* Spec hover: stays transparent, border goes to full warm-white.
   TODO(code-quality): selector-max-specificity suppressed — hover rules exceed 0,3,0. */
/* stylelint-disable-next-line selector-max-specificity */
.hero__buttons .btn-border .elementor-button:hover {
  background-color: transparent;
  border-color: var(--color-warm-white);
  color: var(--color-warm-white);
}

/* =============================================================
   HERO — Homepage variant (.hero--homepage)
   Extends the standard .hero with full-bleed background image
   and a heavy left-side gradient overlay.

   The outer container holds the bg image spanning the full width.
   .hero__text sits over it on the left (same 50vw column).
   .hero__image is a transparent spacer — no bg of its own.

   Rules applied (from all-sections.html description + brand kit):
   .hero--homepage
     background-size: cover / background-position: center
     isolation: isolate (for ::before stacking)

   .hero--homepage::before
     Full-width gradient overlay, left-heavy:
     navy at 92% opacity → navy 66% → navy 28% → transparent
     Ensures text on left is legible, image visible on right.
     z-index: 1, pointer-events: none.

   .hero--homepage .hero__text > .e-con-inner
     z-index: 2 so text sits above the gradient.

   .hero__image--homepage
     Transparent spacer — no bg image or gradient.
     Full-bleed bg and gradient live on .hero--homepage itself.
   ============================================================= 
   HOW TO APPLY IN ELEMENTOR:
     Outer section container  -> CSS Classes: "hero hero--homepage"
     Background image         -> Set on outer container in Elementor
     Right col (spacer)       -> CSS Class: "hero__image--homepage"
   */

/* ── Unlayered (beats Elementor's unlayered background rules) ── */

.hero--homepage.e-con {
  background-position: center;
  background-size: cover;
  isolation: isolate;
}


/* content:"" must be unlayered — Elementor sets content:none on ::before unlayered */
.hero--homepage.e-con::before {
  content: "";
}

@layer sections {
  /* ── Left-heavy gradient overlay ─────────────────────────── */
  .hero--homepage.e-con::before {
    background: linear-gradient(
      90deg,
      rgb(29 47 56 / 92%) 0%,
      rgb(29 47 56 / 66%) 46%,
      rgb(29 47 56 / 28%) 100%
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  /* ── Text column above gradient ───────────────────────────── */
  .hero--homepage .hero__text > .e-con-inner {
    /* width is set unlayered on .hero__text.e-con { width: 50vw } —
     * a @layer rule cannot override it. position/z-index are safe here. */
    position: relative;
    z-index: 2;
  }
}

/* =============================================================
   SERVICES ACCORDION — Phase 3
   Source of truth: computed values from brand-kit.html at
   1800 / 1400 / 1200 / 1024px.

   Elementor structure on staging:
     .services-accordion (7fb2cb80)    outer e-con-boxed e-parent
       .e-con-inner
         .services-accordion__inner (b7153a9)  e-con-full e-child
           .overline widget (563a41e5)
           .services-accordion__h2 (482b8d38)  h2 heading widget
           .home-page-accordion (8cdf049)       accordion widget
         .services-accordion__photo (2b3e0d91)  e-child, bg image

   Structural note: staging has no __columns wrapper — __inner and
   __photo are direct siblings inside .e-con-inner. The two-column
   layout is achieved by making .services-accordion .e-con-inner a
   flex row. __inner takes its natural width (710px left col + gap),
   __photo flexes to fill the rest.

   Rules applied (verified brand-kit.html computed values):

   .services-accordion
     white bg, padding: 100px var(--section-px) on all sides
     (brand-kit.css overrides left to var(--section-px))

   .services-accordion .e-con-inner  (Elementor boxed inner)
     flex row, align-items: stretch, gap: 80px
     (replaces Elementor's default column layout)

   .services-accordion__inner  (left column)
     flex column, gap: 30px (eyebrow→h2→accordion spacing)
     width: 710px fixed at all breakpoints

   .services-accordion__h2  (h2 widget)
     Fraunces 46px/52px, midnight navy, weight 600

   .overline eyebrow inside accordion section
     DM Sans 15px, 600, 2.7px tracking, uppercase, orange

   .services-accordion__photo  (right column)
     flex: 1 0 0, align-self: stretch
     background-size: cover, background-position: center
     border-radius: 8px, overflow: hidden, position: relative
     min-height: 480px

   Cascade note: layout rules (display, flex, width, padding)
   are unlayered to beat Elementor's .e-con rules. Visual rules
   (color, typography) live in @layer sections.
   ============================================================= 
   HOW TO APPLY IN ELEMENTOR:
     Section container        -> CSS Class: "services-accordion"
     Left column              -> CSS Class: "services-accordion__inner"
     Overline eyebrow widget  -> CSS Class: "overline"
     H2 heading widget        -> CSS Classes: "services-accordion__h2 section-heading"
     Accordion widget         -> CSS Classes: "home-page-accordion services-accordion__list"
     Right photo container    -> CSS Class: "services-accordion__photo"
     View All button          -> CSS Class: "btn-secondary"
   */

/* ── Unlayered layout ──────────────────────────────────────── */

.services-accordion.e-con {
  --column-gap: 0px;
  --row-gap: 0px;

  background-color: var(--section-bg, var(--color-white));
  padding: var(--section-py) 150px var(--section-py) var(--section-px);
}

/* Make the Elementor boxed inner a flex row to create two columns */
.services-accordion.e-con > .e-con-inner {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 80px;
  height: auto;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Left column — fixed 710px, flex column */
.services-accordion__inner.e-con {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 30px;
  max-width: 710px;
  padding: 0;
  width: 710px;
}

/* Right photo column — spec (homepage.css .services-accordion__photo): fixed
   710px, never shrinks. Below 1800px it bleeds off the right edge, clipped by
   body { overflow-x: hidden }. Do not make it flex-shrink: at 1024px that
   collapses the photo to a sliver. */
.services-accordion__photo.e-con {
  align-self: stretch;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  flex: none;
  min-height: 480px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 710px;
}

.services-accordion__photo.e-con > .e-con-inner {
  height: 100%;
  padding: 0;
}

/* e-con-full variant: no .e-con-inner wrapper */
.services-accordion__photo.e-con-full.e-con {
  height: 100%;
  padding: 0;
}

/* Photo first (/ai-consulting-services-tools/): the photo takes the width the
   710px text column leaves, instead of pushing the text past the right edge
   (#135). It stays inside the section's side padding (#170). */
@media (width >= 1024px) {
  .services-accordion:where(:has(> .e-con-inner > .services-accordion__photo:first-child)).e-con {
    padding-inline: var(--section-px);
  }

  .services-accordion__photo.e-con:first-child {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
}

/* =============================================================
   SECTION BACKGROUND MODIFIERS (HEWEB-737 visual pass)
   Add "on-white" or "on-cream" next to a section class in Elementor >
   Advanced > CSS Classes to swap its background without a per-element
   override, e.g. "faq on-cream". Sections read --section-bg (their own
   default as the fallback); card grids read --section-card-bg so cards
   stay a different color from the section; alternating-label rows read
   --section-bg and --section-alt-bg, so "on-cream" starts the rows on cream.
   on-navy (dark) is supported on split-light, services and values-grid only.
   Supported: faq, services-accordion, split-light, services, values-grid,
   grid-4x2-cream, alternating-label, platforms, featured-case, blog-grid.
   ============================================================= */
.on-white {
  --section-bg: var(--color-white);
  --section-alt-bg: var(--color-warm-white);
  --section-card-bg: var(--color-warm-white);
}

.on-cream {
  --section-bg: var(--color-warm-white);
  --section-alt-bg: var(--color-white);
  --section-card-bg: var(--color-white);
}

/* Dark variant (visual pass #86: a dark band in long runs of light
   sections). Supported: split-light, services, values-grid. Text colors
   read --section-fg / --section-fg-muted; card grids use a translucent
   warm-white card and tile. */
.on-navy {
  --section-bg: var(--color-midnight-navy);
  --section-card-bg: rgb(242 237 226 / 6%);
  --section-tile-bg: rgb(242 237 226 / 10%);
  --section-fg: var(--color-warm-white);
  --section-fg-muted: rgb(242 237 226 / 75%);
}

/* Sections that are always dark set the same text tokens, so list items and
   inline links inside them read light (#112, #124, #142, #149) */
.hero,
.dark-split,
.numbered-2col-dark {
  --section-fg: var(--color-warm-white);
  --section-fg-muted: rgb(242 237 226 / 75%);
}

.numbered-2col-dark {
  --section-fg-muted: rgb(242 237 226 / 65%);
}

/* Light hero: "hero on-cream" for a page whose only section is the hero, so
   it doesn't run into the navy footer (/thank-you/, 739 review) */
.hero.on-cream {
  --section-fg: var(--color-midnight-navy);
  --section-fg-muted: rgb(29 47 56 / 78%);
}

.hero.on-cream.e-con {
  background-color: var(--section-bg);
}

.on-cream .hero__h1 h1 {
  color: var(--section-fg);
}

.on-cream :where(.hero__text .elementor-widget-text-editor) p {
  color: var(--section-fg-muted);
}

/* =============================================================
   SHARED COMPONENTS -- eyebrow, section H2
   These apply across all homepage sections via shared class names.
   ============================================================= 
   HOW TO APPLY IN ELEMENTOR:
     .overline        -> Any eyebrow Heading or Text Editor widget
     .section-heading -> Primary H2 heading widget on light-bg sections
   */

/* Shared eyebrow -- all .overline widgets, 0,2,0 unlayered */
.overline .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.7px;
  line-height: 15px;
  text-transform: uppercase;
}

/* Shared section H2 -- unlayered to beat base h2 + parent theme */

/* Color: midnight-navy by default; dark sections override below  */
.section-heading h2 {
  color: var(--section-fg, var(--color-midnight-navy));
  font-size: 46px;
  font-weight: 600;
  line-height: 52px;
}

/* A services heading that is an H3 in the outline (a topic under a section, HEWEB-762) keeps the
   section H2 look: the look keys on the tag, so it is repeated here for h3. */
.services__heading .section-heading h3 {
  color: var(--section-fg, var(--color-midnight-navy));
  font-family: var(--font-serif);
  font-size: 46px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 52px;
}

/* Section subtitle: a short tagline under the section H2 (visual pass #27,
   e.g. "The Right Partner for Your Hosting Infrastructure"). Heading widget,
   h3 or p tag -> CSS Class: "section-subtitle". */
.section-subtitle {
  padding-top: 12px;
}

.section-subtitle .elementor-heading-title {
  color: rgb(29 47 56 / 82%);
  font-family: var(--font-serif);
  font-size: 26px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 400;
  line-height: 34px;
}


@layer sections {
  /* Shared section H2 -- font-family and variation settings */
  .section-heading h2 {
    font-family: var(--font-serif);
    font-variation-settings: var(--font-serif-axes);
  }

  /* Dark section H2 override — unlayered copy below (line ~2038) is the
   * active rule. This @layer copy is permanently dead (unlayered beats @layer
   * unconditionally). Kept as a marker only — see unlayered rule below. */
}

/* ── Accordion row borders — unlayered to beat widget-accordion.min.css ──── */

/* widget-accordion.min.css sets border:1px on .elementor-accordion-item.     */

/* Our file loads after it (line 102 vs ~80), so unlayered rules win here.    */
.home-page-accordion .elementor-accordion-item {
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-top: var(--border-row-width) var(--border-row-style) var(--border-row-color);
}

/* Elementor removes border-block-start on adjacent siblings — restore it */
.home-page-accordion .elementor-accordion-item + .elementor-accordion-item {
  border-block-start: var(--border-row-width) var(--border-row-style) var(--border-row-color);
}

.home-page-accordion .elementor-accordion-item:last-child {
  border-bottom: var(--border-row-width) var(--border-row-style) var(--border-row-color);
}

/* ── Accordion tab title padding — matches brand kit .accordion-item__button ── */

/* widget-accordion.min.css sets padding:15px 20px; we override to 24px 0.        */
.home-page-accordion .elementor-accordion .elementor-tab-title {
  padding: 24px 0;
}

/* ── Accordion item typography ───────────────────────────── */
.home-page-accordion .elementor-accordion-title {
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.home-page-accordion .elementor-tab-content {
  border-block-start: 0;
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  padding: 0 0 28px;
}

/* List items match the accordion's own paragraphs: 16/24, full navy (Emily, HEWEB-738,
   Oct 7: the bullets were lighter and larger than the sentence above them). Bullets
   themselves come from the shared bullet-list rule (SHARED COMPONENTS). */
.home-page-accordion .elementor-tab-content li {
  color: inherit;
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

/* Services accordion copy takes the same muted body color as the FAQ accordion and the other light
   sections: darker heading, lighter text and bullets (Emily, HEWEB-738, Oct 23: AI Consulting,
   Integrations, Karmak, Webscale, Digital Marketing, Platform Selection, Adobe Commerce,
   Shopify, Custom Software, B2B SEO). The section sets the token once; the intro paragraph, the
   answers and their bullets (which inherit) all read it. */
.services-accordion {
  --section-fg-muted: rgb(29 47 56 / 75%);
}

.services-accordion .elementor-tab-content {
  color: var(--section-fg-muted);
}

/* Gap between list and read-more link */

/* Kit: 14px between accordion list items (other lists use 10px) and 21.5px before the Read more link */
.home-page-accordion .elementor-tab-content ul {
  gap: 14px;
  margin-bottom: 21.5px;
}

/* Read more link: see the shared .read-more component (SHARED COMPONENTS).
   Links inside accordion answers are body links unless they carry .read-more. */

/* =============================================================
   SERVICES ACCORDION — "View All Services" button
   Brand kit spec: .accordion-item__view-all (homepage.css)
   On staging: Elementor button widget [154f30e2] with .btn-secondary
   Selector 0,2,0 — beats Elementor's .elementor-button at 0,1,0.
   ============================================================= */

/* TODO(code-quality): no-descending-specificity suppressed — hero__buttons hover rule precedes this. Refactor when button rules are consolidated. */
/* stylelint-disable-next-line no-descending-specificity */
.services-accordion__inner .btn-secondary .elementor-button {
  background-color: var(--color-midnight-navy);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--color-warm-white);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 17px 34px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover/HubSpot cascade patterns are revisited. */
/* stylelint-disable-next-line selector-max-specificity */
.services-accordion__inner .btn-secondary .elementor-button:hover {
  background-color: transparent;
  border-color: var(--color-midnight-navy);
  border-style: solid;
  border-width: 2px;
  color: var(--color-midnight-navy);
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover/HubSpot cascade patterns are revisited. */
/* stylelint-disable-next-line selector-max-specificity */
.services-accordion__inner .btn-secondary .elementor-button:where(:hover) .elementor-button-text {
  color: var(--color-midnight-navy);
}

/* =============================================================
   INTERSTITIAL QUOTE sections (.interstitial-quote)
   Brand kit: .pull-quote in all-sections.html
   Three instances on homepage: "We don't just build websites",
   "Your platform. Our expertise", "Smart enough to build".

   Spec (from computed values on brand-kit all-sections.html):
   Section: midnight-navy bg, padding 120px var(--section-px), text-align center
   Heading: Fraunces 60px/64px, warm-white, weight 600, centered
   <em> accent: warm-orange, weight 300, italic (serif-accent--light)

   Cascade: bg/padding/text-align are unlayered to beat Elementor's
   .e-con defaults. Typography in @layer sections — no competing rules.
   ============================================================= 
   HOW TO APPLY IN ELEMENTOR:
     Section container  -> CSS Class: "interstitial-quote"
     Heading widget     -> No custom class needed
     Accent word        -> Wrap in <em> tag in heading content
     Current instances: data-id 1400e01, 1b32add8, 1b7df22c
   */

/* ── Unlayered layout ──────────────────────────────────────── */
.interstitial-quote.e-con {
  background-color: var(--color-midnight-navy);
  padding: 120px var(--section-px);
  text-align: center;
}

/* ── Unlayered typography — beats base h2/h3 + parent theme ── */
.interstitial-quote .elementor-heading-title {
  color: var(--color-warm-white);
  font-size: 60px;
  font-weight: 600;
  line-height: 64px;
  text-align: center;

  /* Even line lengths without manual <br> (visual pass #28) */
  text-wrap: balance;
}

/* <em> = serif-accent--light: warm-orange, weight 300, italic */
.interstitial-quote .elementor-heading-title em {
  color: var(--color-warm-orange);
  font-style: italic;
  font-weight: 300;
}

/* Blog cards (the archive, related posts, the homepage band and search results)
   keep titles plain: the accent belongs on the post itself (Dane, 2026-10-05,
   after Emily's note that it is too much on the blog landing page).
   Unlayered, so it beats the layered accent rule above. */
.archive-grid .elementor-post__title em,
.post-related__grid .elementor-post__title em,
.blog-grid .elementor-post__title em {
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
}

@layer sections {
  .interstitial-quote .elementor-heading-title {
    font-family: var(--font-serif);
    font-variation-settings: var(--font-serif-axes);
  }
}

/* =============================================================
   ALLIANCE section (.interstitial-quote--alliance)
   Brand kit: .alliance in homepage.css

   Reuses the interstitial-quote visual language (midnight navy, centered,
   symmetric padding) but differs in structure: badge image + label text
   instead of a large serif heading. Implemented as a BEM modifier of
   .interstitial-quote since the visual pattern is the same base structure.

   Note: brand kit source class is .alliance. We use .interstitial-quote--alliance
   for Elementor compatibility. See discrepancy note in Part C stubs below.

   Elementor structure on staging:
     Section container (1b7df22c)  -> CSS Class: "interstitial-quote--alliance"
     Image widget      (d7f138e)   -> no custom class (styled via img descendant)
     Text Editor widget (4e8dfd1)  -> no custom class (styled via p descendant)

   Spec (from homepage.css .alliance):
   Section: midnight navy bg, padding 88px var(--section-px), flex column, center-aligned
   Badge: 161px wide, 240px tall, object-fit contain
   Label: DM Sans 16px/600/3.2px letter-spacing/uppercase/warm-white/centered

   HOW TO APPLY IN ELEMENTOR:
     Section container  -> CSS Class: "interstitial-quote--alliance"
     Image widget       -> No custom class needed
     Label text widget  -> No custom class needed (Text Editor, p tag)
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */
.interstitial-quote--alliance.e-con {
  align-items: center;
  background-color: var(--color-midnight-navy);
  flex-direction: column;
  padding: calc(var(--section-py) * 0.88) var(--section-px);
  text-align: center;
}

/* Badge image — constrain to brand kit dimensions */
.interstitial-quote--alliance .elementor-widget-image img {
  display: block;
  height: 240px;
  object-fit: contain;
  width: 161px;
}

/* Label — DM Sans 16px/600/3.2px/uppercase/warm-white */
.interstitial-quote--alliance p {
  color: var(--color-warm-white);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3.2px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
}

/* =============================================================
   CLIENT LOGOS section (.client-logos)
   Brand kit: .client-logos in all-sections.html

   Spec (computed from brand-kit all-sections.html at 1800px):
   Section: warm-white bg, padding 64px top/bottom, right fixed 150px
   Inner: flex column, align-items center, gap 32px
   Eyebrow: DM Sans 15px/600/2.7px/uppercase/centered, 62% opacity navy
   Gallery: mix-blend-mode multiply on logo images
   Button (.btn-border): transparent, 2px solid navy border, 8px radius

   Elementor structure on staging:
     Section container  (data-id TBD) -> CSS Class: "client-logos"
     Text Editor eyebrow widget       -> CSS Class: "client-logos__eyebrow"
     Logo gallery widget              -> no custom class (styled via descendants)
     Button widget                    -> CSS Class: "btn-border"

   Cascade note: right padding is intentionally fixed at 150px (not
   var(--section-px)) per the brand kit spec. The logo gallery bleeds
   slightly closer to the right edge than the left — this is correct.
   Do not change to var(--section-px) without designer confirmation.

   HOW TO APPLY IN ELEMENTOR:
     Section container  -> CSS Class: "client-logos"
     Eyebrow widget     -> CSS Class: "client-logos__eyebrow" (Text Editor, not Heading)
                           NOTE: 62% opacity navy — do NOT use .overline here
     Logo gallery       -> No custom class needed
     View Our Clients   -> CSS Class: "btn-border"
   ============================================================= */

/* =============================================================
   PLATFORMS WE WORK WITH section (.platforms)
   Brand kit: .platforms in shared.css (shared component)

   Responsive 3x3 CSS Grid — replaces the brand kit's absolute-position
   approach which was static desktop-only. CSS Grid scales automatically
   with --section-px and --content-max at all breakpoints.

   Elementor structure:
     Section container (7af60537)    -> CSS Class: "platforms platforms--on-white"
     Heading container (d3bc668)     -> CSS Class: "platforms__heading"
       H2 widget inside              -> CSS Class: "section-heading"
     Grid container (7aad01f)        -> CSS Class: "platforms__grid"
       9 child containers (cells)    -> no custom class needed
         Image widget    -> logo
         Text Editor     -> description <p>
         Button widget   -> "Read More" link

   Spec (from shared.css, measured from all-sections.html):
   Section: white bg, padding 100px var(--section-px)
   Inner: flex column, gap 52px, max-width --content-max (1500px)
   H2: Fraunces 46px/600/centered (shared .section-heading rule handles this)
   Grid: white bg, 1px solid 10%-navy border, 8px radius
   Cells: CSS Grid 3 cols x 3 rows, padding 44px each
   Inner borders: right border on cols 1+2, bottom border on rows 1+2
   Logo: 68px tall, max-width 235px, contain, left-aligned, margin-bottom 24px
   Desc: DM Sans 16px/400/26px, 72% navy, margin-bottom 18px, max-width 410px
   Link: DM Sans 15px/600, midnight-navy, orange underline, inline-flex
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */
.platforms.e-con {
  background-color: var(--section-bg, var(--color-white));
  padding: var(--section-py) var(--section-px);
}

.platforms--on-cream.e-con {
  background-color: var(--color-warm-white);
}

/* Break boxed constraint. Capped at the content width and left-anchored like the header inner, so on
   screens wider than 1800px the grid's right edge stays under the header's
   Contact Us button (HEWEB-741 QA). No change at 1800px and below. */
.platforms.e-con > .e-con-inner {
  --gap: 52px;
  --row-gap: 52px;

  display: flex;
  flex-direction: column;
  gap: 52px;
  margin-inline: 0;
  max-width: var(--content-max);
  padding: 0;
  width: 100%;
}

/* Heading container — centered */
.platforms__heading.e-con {
  align-items: center;
  margin-bottom: 52px;
  padding: 0;
}

.platforms__heading.e-con > .e-con-inner {
  align-items: center;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Grid container — white bg, border, radius */
.platforms__grid.e-con {
  background-color: var(--color-white);
  border: 1px solid rgb(29 47 56 / 10%);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

/* Break grid's boxed inner — CSS Grid on the inner */
.platforms__grid.e-con > .e-con-inner {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Each platform cell. The lines between cells are 1px shadows on each
   cell's right and bottom edges (two shadows, so the bottom line starts at
   the cell's left edge, #183); the grid's overflow: hidden clips them at its
   outer edge (where its own border is), so they're right at any column count
   (3 on desktop, 2 on tablet, 4 for platforms--4col) and a short last row
   leaves white space, not a line. */
.platforms__grid.e-con > :where(.e-con-inner) > .e-con {
  box-shadow: 0 1px 0 0 rgb(29 47 56 / 10%), 1px 0 0 0 rgb(29 47 56 / 10%);
  flex-direction: column;
  padding: var(--platforms-cell-px);
}

/* Four across (/platforms-and-partners/, 20 partners) */
:where(.platforms--4col) .platforms__grid.e-con > .e-con-inner {
  grid-template-columns: repeat(4, 1fr);
}

.platforms__grid.e-con > :where(.e-con-inner) > :where(.e-con) > .e-con-inner {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

/* Left-align cell content — Elementor Image Box sets text-align:center unlayered;
 * must be unlayered to win. 0,3,0 to beat widget stylesheet. */
.platforms__grid .elementor-widget-image-box .elementor-image-box-wrapper {
  text-align: left;
}

/* Image Box widget grows to fill cell height, pushing read more link to bottom */
.platforms__grid .elementor-widget-image-box {
  flex: 1;
}

/* The logo sits in an inline <a> inside Elementor's inline-block figure, which
   is only as wide as the image; make both full-width blocks so the logo can
   be centered in the cell. */
.platforms__grid .elementor-image-box-wrapper .elementor-image-box-img {
  display: block;
  width: 100%;
}

.platforms__grid .elementor-image-box-img > :where(a) {
  display: block;
}

/* Logo image — 68px tall, centered in the cell (HEWEB-741 QA decision; the kit
   left-aligns). height must be unlayered to beat natural image sizing. */
.platforms__grid .elementor-image-box-wrapper img {
  display: block;
  height: 68px;
  margin: 0 auto 24px;
  max-width: min(235px, 100%); /* no wider than the cell, so wide logos stay centered in 4 columns (#184) */
  object-fit: contain;
  object-position: center;
  width: auto;
}

@layer sections {
  /* Description */
  .platforms__grid .elementor-image-box-description {
    color: rgb(29 47 56 / 72%);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
    margin-bottom: 18px;
    max-width: 410px;
    text-align: left;
  }

  /* Read More link — Text Editor widget, same pattern as accordion */
  .platforms__grid .elementor-widget-text-editor a {
    align-items: center;
    border-bottom: 1px solid var(--color-warm-orange);
    color: var(--color-midnight-navy);
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 4px;
    line-height: 15px;
    padding-bottom: 3px;
    text-decoration: none;
    box-shadow: 0 0 0 0 var(--color-warm-orange);
    transition: color 0.25s, box-shadow 0.2s;
  }

  .platforms__grid .elementor-widget-text-editor :where(a):hover {
    box-shadow: 0 1px 0 0 var(--color-warm-orange);
  }

  .platforms__grid .elementor-widget-text-editor a::after {
    content: "\2192";
  }
}

/* Platforms read more hover — unlayered to beat base border-bottom: 1px */
.platforms__grid .elementor-widget-text-editor :where(a):hover {
  box-shadow: 0 1px 0 0 var(--color-warm-orange);
}

.platforms__grid .elementor-widget-text-editor :where(a):where(:hover)::after {
  color: var(--color-warm-orange);
  font-weight: 900;
}

/* =============================================================
   BLOG GRID section (.blog-grid)
   Brand kit: .blog-grid in homepage.css

   White bg, centered heading, 3-column card grid (Elementor Posts widget),
   outline CTA button. Cards are cream bg, 477px wide, 395px tall.

   Elementor structure:
     Section container (7e077e2e)   -> CSS Class: "blog-grid"
     Overline widget   (5d2a895b)   -> CSS Class: "overline"
     Heading widget    (4e3e0cce)   -> CSS Class: "section-heading" (already set)
     Posts widget      (5f453210)   -> no custom class (styled via Elementor classes)
     CTA button widget (245b9a3c)   -> CSS Class: "btn-border"

   Elementor posts widget classes:
     .elementor-posts-container  = card grid
     .elementor-post             = individual card (.blog-card)
     .elementor-post__thumbnail  = card photo top (.blog-card__photo)
     .elementor-post__text       = card body (.blog-card__body)
     .elementor-post__title      = H4 card title (.blog-card__title)
     .elementor-post__read-more  = read more link (.blog-card__link)

   Spec (from homepage.css):
   Section: white bg, padding 100px 150px
   Inner: flex column, gap 52px, max-width --content-max (1500px)
   H2: centered (section-heading shared rule handles font/color/size)
   Cards: warm-white bg, 477px wide, 395px tall, 8px radius, overflow hidden
   Card photo: 800 / 550, cover bg
   Card body: padding 32px, flex column
   Card title: Fraunces 24px/600/31px, midnight navy
   Card link: orange underline, 15px/600, midnight navy
   CTA: btn-border shared class handles outline button styling
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */
.blog-grid.e-con {
  background-color: var(--section-bg, var(--color-white));
  padding: var(--section-py) var(--section-px);
}

/* Break boxed constraint — expand to --content-max width */
.blog-grid.e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: 52px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Center the section heading */
.blog-grid .section-heading {
  text-align: center;
}

.blog-grid .section-heading h2 {
  text-align: center;
}

/* Posts grid — 3 columns, 34px gap, cards at ~477px each */
.blog-grid .elementor-posts-container {
  display: flex;
  flex-direction: row;
  gap: 34px;
  justify-content: center;
  width: 100%;
}

/* Each card */
.blog-grid .elementor-post {
  background-color: var(--color-warm-white);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  isolation: isolate;
  max-width: 477px;
  overflow: hidden;
}

/* Card photo — the whole featured image, at its own 800 / 550 shape, in every card
 * grid that shows featured images: the homepage news band (.blog-grid), search and
 * archive (.archive-grid) and related posts (.post-related__grid). Emily, HEWEB-741,
 * Oct 6 and HEWEB-759, Oct 7: a fixed 230px box clipped the images on desktop and
 * phones cropped the logo off the top. One rule set, so the grids cannot drift apart;
 * the no-image panel (below, near the search section) and the podcast badge's
 * container units use the same shape.
 * Elementor wraps the thumbnail in an <a class="elementor-post__thumbnail__link">
 * which has a double-underscore that violates BEM lint; target via attribute.
 * Scoped to these grids to prevent clipping any other Elementor Posts widget. */
.blog-grid [class="elementor-post__thumbnail__link"],
.archive-grid [class="elementor-post__thumbnail__link"],
.post-related__grid [class="elementor-post__thumbnail__link"] {
  aspect-ratio: 800 / 550;
  display: block;
  height: auto;
  overflow: hidden;
}

.blog-grid .elementor-post__thumbnail,
.archive-grid .elementor-post__thumbnail,
.post-related__grid .elementor-post__thumbnail {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.blog-grid .elementor-post__thumbnail img,
.archive-grid .elementor-post__thumbnail img,
.post-related__grid .elementor-post__thumbnail img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Card body */
.blog-grid .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: 32px 32px 34px;
}

/* Card title — Fraunces 24px/600/31px */
.blog-grid .elementor-post__title {
  color: var(--color-midnight-navy);
  flex: 1;
  font-size: 24px;
  font-weight: 600;
  line-height: 31px;
  margin-bottom: 18px;
}

/* Read more link — orange underline, 15px/600 */
.blog-grid .elementor-post__read-more {
  border-bottom: 1px solid var(--color-warm-orange);
  color: var(--color-midnight-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  padding-bottom: 3px;
  text-decoration: none;
  box-shadow: 0 0 0 0 var(--color-warm-orange);
  transition: color 0.25s, box-shadow 0.2s;
}

.blog-grid .elementor-post__read-more:hover {
  box-shadow: 0 1px 0 0 var(--color-warm-orange);
}

.blog-grid .elementor-post__read-more:where(:hover)::after {
  color: var(--color-warm-orange);
  font-weight: 900;
}

/* Hide excerpt — not in brand kit spec */
.blog-grid .elementor-post__excerpt {
  display: none;
}

/* CTA button — centered wrapper + outline button style.
 * .btn-border .elementor-button shared rule is scoped to .client-logos;
 * blog grid needs its own rule to beat Elementor's default grey button. */
.blog-grid .btn-border {
  text-align: center;
}

/* TODO(code-quality): no-descending-specificity suppressed — hover rules cause descending specificity. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line no-descending-specificity */
.blog-grid .btn-border .elementor-button {
  background-color: transparent;
  border: 2px solid var(--color-midnight-navy);
  border-radius: 8px;
  color: var(--color-midnight-navy);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 16px 32px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity */
.blog-grid .btn-border .elementor-button:hover {
  background-color: var(--color-midnight-navy);
  color: var(--color-warm-white);
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity */
.blog-grid .btn-border .elementor-button:where(:hover) .elementor-button-text {
  color: var(--color-warm-white);
}

@layer sections {
  /* Card title font-family — Fraunces with variation settings */
  .blog-grid .elementor-post__title a {
    font-family: var(--font-serif);
    font-variation-settings: var(--font-serif-axes);
  }
}

/* Dark section H2 — warm white, unlayered to beat shared unlayered .section-heading h2 navy rule */
.testimonial .section-heading h2 {
  color: var(--color-warm-white);
}

/* =============================================================
   TESTIMONIAL section (.testimonial)
   Brand kit: .testimonial in homepage.css

   50/50 split: photo left, quote content right.
   Same cascade pattern as .services-accordion and .featured-case:
   break the boxed e-con-inner constraint, set flex row on inner,
   each child takes 50% (900px at 1800px).

   Elementor structure:
     Section container (4c498d95)  -> CSS Class: "testimonial"
     Left container   (17ac2bab)  -> CSS Class: "testimonial__photo"
       (background image set in Elementor editor)
     Right container  (4bc885bf)  -> CSS Class: "testimonial__content"
       Overline widget (6028c695) -> CSS Class: "overline"
       Heading widget  (12d74320) -> CSS Class: "section-heading"
       Testimonial widget (42a42d9e) -> no custom class

   Spec (from homepage.css .testimonial):
   Section: midnight navy bg, 760px tall, flex row, isolation:isolate, overflow:hidden
   Photo (left): 900px, cover bg, overflow:hidden
   Content (right): 900px, padding 100px 150px 100px 96px, flex column, justify:center
   H2: warm white (already in @layer sections)
   Quote: 22px/400/34px, warm white 90% opacity
   Author name: 17px/700, warm white
   Author title: 16px/400, warm white 60% opacity
   Carousel dots: warm orange (active), warm white 28% (inactive)
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */
.testimonial.e-con {
  background-color: var(--color-midnight-navy);
  isolation: isolate;
  overflow: hidden;
  padding: 0;
}

/* Break boxed constraint — same pattern as accordion/featured-case */
.testimonial.e-con > .e-con-inner {
  display: flex;
  flex-direction: row;
  gap: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Photo column — 50%, cover bg, clip */
.testimonial__photo.e-con {
  background-position: center;
  background-size: cover;
  flex: 1 1 50%;
  min-height: 760px;
  overflow: hidden;
  padding: 0;
  width: 50%;
}

.testimonial__photo.e-con > .e-con-inner {
  display: none;
}

/* Content column — 50%, 96px left / 150px right padding */
.testimonial__content.e-con {
  flex: 1 1 50%;
  justify-content: center;

  /* 150px up to 1800px; above that it follows the centered column (HEWEB-741) */
  padding: var(--section-py) max(150px, var(--section-px)) var(--section-py) 96px;
  width: 50%;
}

.testimonial__content.e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Narrower desktops: the photo gives up width before the quote does, so
   lines stay long and the section stays shorter (visual pass #89, decision B). */
@media (width < 1400px) {
  .testimonial__photo.e-con {
    flex-basis: 34%;
    min-height: 560px;
    width: 34%;
  }

  .testimonial__content.e-con {
    flex-basis: 66%;
    padding-right: var(--section-px);
    width: 66%;
  }
}

/* ── Testimonial widget typography ──────────────────────────── */

/* Quote text: 22px/400/34px, warm white 90% */
.testimonial .elementor-testimonial__text {
  color: rgb(242 237 226 / 90%);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px;
}

/* Author name: 17px/700, warm white */
.testimonial .elementor-testimonial__name {
  color: var(--color-warm-white);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

/* Author title: 16px/400, warm white 60% */
.testimonial .elementor-testimonial__title {
  color: rgb(242 237 226 / 60%);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

/* ── Carousel dots ───────────────────────────────────────────── */
.testimonial .swiper-pagination-lock {
  display: block;
}

.testimonial .swiper-pagination-bullet {
  background: rgb(242 237 226 / 28%);
  border-radius: 5.5px;
  height: 11px;
  opacity: 1;
  width: 11px;
}

.testimonial .swiper-pagination-bullet-active {
  background: var(--color-warm-orange);
}

/* Quote lines up with the heading: Elementor's swiper is width 95% with auto
   margins, and each slide has 20px side padding (36px offset in total). */
.testimonial .elementor-main-swiper {
  margin-inline: 0;
  width: 100%;
}

/* Swiper stretches every slide to the tallest quote; center each quote in
   that height so short ones sit level with the arrows (visual pass #10). */
.testimonial .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 0;
}

/* Arrows sit outside the text, in the gutters (as on the current site) */
.testimonial .swiper .elementor-swiper-button-prev {
  left: -56px;
}

.testimonial .swiper .elementor-swiper-button-next {
  right: -56px;
}

/* Outer wrapper for template-widget delivery of client-logos section.
   Breaks boxed constraint so the template fills full width. */
.client-logos-wrapper.e-con {
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;

  padding: 0;
}

.client-logos-wrapper.e-con > .e-con-inner {
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Even side padding, so the eyebrow, logo row and button center on the page
   at every width (#98, #176) */
.client-logos.e-con {
  background-color: var(--color-warm-white);
  padding: 64px var(--section-px);
}

.client-logos.e-con > .e-con-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Eyebrow label -- 62% opacity navy (not orange -- unique to this section) */
.client-logos__eyebrow p {
  color: rgb(29 47 56 / 62%);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.7px;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase;
}

/* TODO(code-quality): no-descending-specificity suppressed — hover rules cause descending specificity. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line no-descending-specificity */
.client-logos .btn-border .elementor-button {
  background-color: transparent;
  border: 2px solid var(--color-midnight-navy);
  border-radius: 8px;
  color: var(--color-midnight-navy);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 16px 32px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity */
.client-logos .btn-border .elementor-button:hover {
  background-color: var(--color-midnight-navy);
  color: var(--color-warm-white);
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity */
.client-logos .btn-border .elementor-button:where(:hover) .elementor-button-text {
  color: var(--color-warm-white);
}

@layer sections {
  /* Logo gallery -- multiply blend removes white bg from logos */
  .client-logos .e-gallery-image {
    mix-blend-mode: multiply;
  }
}

/* =============================================================
   CASE GRID section (.case-grid)
   Brand kit: .case-grid in all-sections.html

   Elementor structure on staging:
     Section container (12cfbbdf) -> CSS Class: "case-grid"
     CTA widget 1      (42bd6027) -> no custom class (styled via .case-grid selectors)
     CTA widget 2      (67bbfc8)  -> no custom class
     CTA widget 3      (66570226) -> no custom class
     CTA widget 4      (45046ad9) -> no custom class

   HOW TO APPLY IN ELEMENTOR:
     Section container (12cfbbdf) -> CSS Class: "case-grid"
     No custom classes needed on CTA widgets — all rules are scoped
     via .case-grid .elementor-widget-call-to-action descendants.

   Spec (computed from brand-kit all-sections.html at 1800px):
   Section: no padding
   Grid: 2x2 flex-wrap, each panel 50vw wide x 580px tall
   Panel: position relative, overflow hidden, full-bleed bg image
   Title (.elementor-cta__title): Fraunces 34px/40px/600/white
   Tags (.elementor-cta__description): DM Sans 16px/24px/500/white
   Button (.elementor-cta__button): deep-mint bg, navy text, 15px/600, 13px 26px
   Hover (kit website-development.css .case-study-panel__btn:hover): navy
   background, deep-mint border and text

   Cascade note: CTA widget has its own stylesheet (widget-call-to-action.min.css)
   which sets background-color, padding, and content positioning. All overrides
   here are unlayered so they compete on source order (our file loads after
   widget stylesheets in the page head).
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */
.case-grid.e-con {
  padding: 0;
}

.case-grid.e-con > .e-con-inner {
  display: flex;
  flex-flow: row wrap;
  gap: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* e-con-full variant has no .e-con-inner — apply flex row directly to the container */
.case-grid.e-con-full.e-con {
  flex-flow: row wrap;
  gap: 0;
  padding: 0;
}

/* No zoom on the background photo either (Dane, HEWEB-743): the widget's
   hover transform (.elementor-bg-transform-zoom-in:hover .elementor-bg,
   0,3,0) is cancelled for every transform option */
.case-grid .elementor-bg-transform .elementor-bg {
  transform: none;
}

/* Each CTA widget fills exactly 50% width, 580px tall */
.case-grid .elementor-widget-call-to-action {
  flex: 0 0 50%;
  max-width: 50%;
}

/* A page with one case study (e.g. /content-marketing-lead-gen-development/)
   spans the row instead of leaving an empty half. */
.case-grid .elementor-widget-call-to-action:only-child {
  flex-basis: 100%;
  max-width: 100%;
}

.case-grid .elementor-cta {
  height: 580px;
  overflow: hidden;
  position: relative;
}

/* No zoom on hover (visual pass #51). The CTA widget's default content
   animation (transitions.min.css, 0,3,0) scales the title, tags and button
   1.1x inside .elementor-cta__content { overflow: hidden }, clipping their
   left edges. Same specificity, later in the cascade. */
.case-grid .elementor-cta__content .elementor-animated-item--grow {
  transform: none;
}

/* ── Unlayered typography — beats parent theme + Elementor defaults ── */
.case-grid .elementor-cta__title {
  color: var(--color-white);
  font-size: 34px;
  font-weight: 600;
  line-height: 40px;
}

.case-grid .elementor-cta__description {
  color: var(--color-white);
  font-weight: 500;
}

/* Deep-mint button
 * widget-call-to-action.min.css sets color:white and border:2px solid white on
 * .elementor-cta--skin-cover .elementor-cta__button.elementor-button at 0,2,2.
 * Our rule needs 0,3,2 to beat it on specificity. (Our file actually loads
 * after the widget stylesheets, so source order alone would win at 0,2,2; the
 * extra class stays for safety.) Adding .elementor-cta--skin-cover pushes
 * us to 0,3,2. Suppressing selector-max-specificity as with the hover rules. */
/* stylelint-disable-next-line selector-max-specificity */
.case-grid .elementor-cta--skin-cover .elementor-cta__button.elementor-button {
  align-self: flex-start;
  background-color: var(--color-deep-mint);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--color-midnight-navy);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity */
.case-grid .elementor-cta--skin-cover .elementor-cta__button.elementor-button:hover {
  background-color: var(--color-midnight-navy);
  border-color: var(--color-deep-mint);
  border-style: solid;
  border-width: 2px;
  color: var(--color-deep-mint);
}

/* Remove Elementor classic-skin grey content box, position at panel bottom */
.case-grid .elementor-cta__content {
  background-color: transparent;
  bottom: 0;
  left: 0;
  padding: 40px 56px;
  position: absolute;
  right: 0;
  text-align: left;
}

/* Above 1800px the outer side's padding grows with the gutter, so the text
   keeps its 1800px place (94px outside the content column) instead of
   staying 56px from the screen edge (HEWEB-741). max() leaves 56px below. */
.case-grid :where(.elementor-widget-call-to-action:nth-child(odd)) .elementor-cta__content {
  padding-left: max(56px, calc(var(--section-px) - 94px));
}

.case-grid :where(.elementor-widget-call-to-action:nth-child(even)) .elementor-cta__content {
  padding-right: max(56px, calc(var(--section-px) - 94px));
}

/* Elementor writes .elementor-10376 .elementor-element.elementor-element-XXXX
   .elementor-cta__content { text-align: center } (0,4,0) into the page CSS
   with no saved setting behind it. text-align inherits, so setting it on the
   children wins without matching that specificity (HEWEB-741 QA). */
.case-grid .elementor-cta__content-item {
  text-align: left;
}

/* Dark gradient overlay over the image (replicates case-study-panel__gradient) */
.case-grid .elementor-cta__bg-overlay {
  background: linear-gradient(
    0deg,
    rgb(29 47 56 / 90%) 0%,
    rgb(29 47 56 / 30%) 60%,
    rgb(29 47 56 / 0%) 100%
  );
}

@layer sections {
  .case-grid .elementor-cta__title {
    font-family: var(--font-serif);
    font-variation-settings: var(--font-serif-axes);
  }
}

/* =============================================================
   FEATURED CASE STUDY section (.featured-case)
   Brand kit: .featured-case in all-sections.html

   HOW TO APPLY IN ELEMENTOR:
     Section container  1ce664aa -> CSS Class: "featured-case"
     Left text column   34e1f704 -> CSS Class: "featured-case__text"
     Overline widget    57f59ebf -> CSS Class: "overline" (shared)
     H2 title widget    4e0ce490 -> CSS Class: "section-heading" (shared)
     Tags text widget   3b1040a7 -> no custom class (styled via descendant)
     Stats card         46201d3e -> CSS Class: "featured-case__stats-card"
     Right photo col    76a8d744 -> CSS Class: "featured-case__photo"

   Spec (computed from brand-kit all-sections.html at 1800px):
   Section: white bg, padding 100px var(--section-px)
   Layout: 50/50 flex row, left text col and right photo col
   Title: Fraunces 42px (overrides shared 46px), midnight-navy, 600
   Tags: DM Sans 13px, 55% opacity navy, weight 600
   Stats card: deep-mint bg, padding 48px 52px
   Stat number: 56px/600, midnight-navy
   Stat label: 15px/600, 72% opacity navy
   Right photo: bg image cover
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */
.featured-case.e-con {
  --padding-top: var(--section-py);
  --padding-bottom: var(--section-py);
  --padding-left: var(--section-px);
  --padding-right: var(--section-px);

  background-color: var(--section-bg, var(--color-white));
  flex-direction: row;
  padding: var(--section-py) var(--section-px);
}

/* Inner row: two columns of up to 710px with an 80px gap (710 + 80 + 710 =
   1500 = --content-max). Unlike the services accordion, the kit shrinks the
   featured-case photo below 1800px instead of letting it run off the edge
   (brand-kit.html: 349px at 1400). Both columns shrink equally here; the
   kit's own text column collapses to 107px at 1024, which isn't usable
   (HEWEB-741 QA: the photo and, on /ai-consulting-services-tools/, a text
   column were cut off at 1400 and 1024). align-items:stretch lets the photo
   match the text column height. */
.featured-case.e-con > .e-con-inner {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 80px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Left column — up to 710px, shrinks with the photo */
.featured-case__text.e-con {
  --width: auto;

  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  max-width: 710px;
  min-width: 0;
  padding: 56px 0;
  width: auto;
}

/* Without a stats card the text column needs no inset of its own (#136) */
.featured-case__text.e-con:not(:has(.featured-case__stats-card)) {
  padding-block: 0;
}

/* A story that continues in a second featured-case section (/ai-consulting-services-tools/,
   Implus) reads as one section: no top padding on the second */
.featured-case + .featured-case.e-con {
  padding-top: 0;
}

/* Right photo column — up to 710px, cover bg, clipped 8px radius */
.featured-case__photo.e-con {
  --width: auto;

  align-self: stretch;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  flex: 1 1 0;
  max-width: 710px;
  min-height: 480px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: auto;
}

/* Stats card */
.featured-case__stats-card.e-con {
  background-color: var(--color-deep-mint);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

.featured-case__stats-card.e-con > .e-con-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 27.5px;
  padding: 48px 52px;
  width: 100%;
}

/* Row group — both stat rows side by side; wraps onto two lines when the
   column is too narrow for both */
.featured-case__stats-row-group.e-con {
  flex-flow: row wrap;
  gap: 24px 64px;
  padding: 0;
  width: 100%;
}

.featured-case__stats-row-group.e-con > .e-con-inner {
  display: flex;
  flex-flow: row wrap;
  gap: 24px 64px;
  padding: 0;
  width: 100%;
}

/* Each stat wrapper — shrinks to its content width.
   --width:fit-content feeds Elementor's width:var(--width) mechanism.
   With arrow+value now grouped in .featured-case__stat-number (a separate
   container), there is no percentage-basis child inflating this wrapper. */
.featured-case__stats-row.e-con {
  --width: fit-content;

  flex: 0 0 auto;
  flex-direction: column;
  padding: 0;
  width: fit-content;
}

/* Column: number row above label, 8px gap between them */
.featured-case__stats-row.e-con > .e-con-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: fit-content;
}

/* .featured-case__stat-number — inner container grouping arrow + value.
   Row layout, baseline aligned, 6px gap. --row-gap and --column-gap set
   here on the outer container so they inherit into .e-con-inner which
   reads them via Elementor's var(--row-gap) / var(--column-gap) mechanism. */
.featured-case__stat-number.e-con {
  --column-gap: 6px;
  --flex-direction: row;
  --gap: 6px;
  --row-gap: 6px;

  flex-direction: row;
  gap: 6px;
  padding: 0;
}

.featured-case__stat-number.e-con > .e-con-inner {
  --column-gap: 6px;
  --row-gap: 6px;

  align-items: baseline;
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 0;
}

/* Stat wrappers (class featured-case__stat, added in Elementor on the two
   stat containers): drop Elementor's default 10px padding and 20px gap so
   the number and label sit 8px apart, as in the kit (HEWEB-741 QA). */
.featured-case__stat.e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 8px;
  --row-gap: 8px;
  --column-gap: 8px;

  gap: 8px;
  padding: 0;
}

/* reset.css adds p { margin-block-end: .9rem } under every stat paragraph */
.featured-case__stats-card p {
  margin-block-end: 0;
}

/* Label sits naturally below the number container as a column sibling.
   No flex-basis tricks needed — the structural separation handles the layout. */
.featured-case__stats-row .featured-case__stat-label {
  flex-basis: auto;
}

/* Title override -- brand kit uses 42px, not the shared 46px */
.featured-case .section-heading h2 {
  font-size: 42px;
  line-height: 48px;
}

/* Tags -- scoped to .featured-case__tags (CSS class added via Elementor on widget 3b1040a7) */
.featured-case__tags p {
  color: rgb(29 47 56 / 55%);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  line-height: 22px;
  text-transform: uppercase;
}

/* Stat arrow -- 24px/700/DM Sans/midnight-navy */
.featured-case__stat-arrow p {
  color: var(--color-midnight-navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 56px;
}

/* Stat number (value heading) -- 56px, midnight-navy */
.featured-case__stat-value .elementor-heading-title {
  color: var(--color-midnight-navy);
  font-size: 56px;
  font-weight: 600;
  line-height: 56px;
}

/* Stat label -- 15px/600/72% opacity navy */
.featured-case__stat-label p {
  color: rgb(29 47 56 / 72%);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

/* Quote text -- scoped to .featured-case__quote (CSS class already on widget 74a6cf65 in Elementor) */
.featured-case__quote p {
  color: rgb(29 47 56 / 82%);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
}

/* Read more link */

/* The link's wrapper paragraph keeps the base 16/24 line box (the link itself is 15px);
   the body default would make the stats card 6px taller (HEWEB-738). */
.featured-case .featured-case__link p {
  font-size: 16px;
  line-height: 24px;
}

/* TODO(code-quality): no-descending-specificity suppressed — hover rules cause descending specificity. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line no-descending-specificity */
.featured-case .featured-case__link a {
  border-bottom: 1px solid var(--color-midnight-navy);
  color: var(--color-midnight-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  padding-bottom: 3px;
  text-decoration: none;
  box-shadow: 0 0 0 0 var(--color-midnight-navy);
  transition: box-shadow 0.2s;
}

/* TODO(code-quality): selector-max-specificity + no-descending-specificity suppressed. Refactor when hover patterns are consolidated. */
/* stylelint-disable-next-line selector-max-specificity, no-descending-specificity */
.featured-case .featured-case__link a:hover {
  box-shadow: 0 1px 0 0 var(--color-midnight-navy);
}

/* Featured case copy takes the muted body color like the other light sections: darker
   heading, lighter body text (Emily, HEWEB-738, Oct 22: HubSpot "Real Work, Real Results").
   The section sets the token once; the paragraph rule and the shared list rule both read it.
   Tags, the link and the quote keep their own colors; the stats card is its own box. */
.featured-case__text {
  --section-fg-muted: rgb(29 47 56 / 78%);
}

.featured-case__text .elementor-widget-text-editor:not(:where(.featured-case__tags, .featured-case__link, .featured-case__quote, .featured-case__stats-card *)) p {
  color: var(--section-fg-muted);
}


/* =============================================================
   CONTACT / "LET'S CHAT!" SECTION (.contact)
   Brand kit spec: shared.css .contact
   Source of truth: computed values from brand-kit.html at
   1800 / 1600 / 1400 / 1200 / 1024px.

   Elementor structure on staging:
     .contact (a31c5cc)            outer e-con-boxed e-parent
       .e-con-inner                Elementor boxed inner (no custom class)
         .contact__card (65d382e)  left col — card content, e-con e-child
           .e-con-inner
             eyebrow heading widget (5c3b29ed)
             h2 heading widget     (4b5e7807) — .section-heading
             text-editor widget    (7c3fe137)
             hubspot-form widget   (772facc4)
         .contact__bg-photo (7217f9b8) right col spacer, e-con e-child

   Design:
   - Full-bleed bg photo (set in Elementor editor on outer container)
   - Left-heavy gradient overlay via ::before pseudo-element
   - Deep-mint card on the left (600px fixed, 647px tall)
   - Card: heading, subtitle, HubSpot contact form, submit button

   Cascade approach:
   - Outer .contact.e-con: unlayered — sets bg-size/position, isolation,
     flex row layout, height, padding. Breaks boxed inner constraint.
   - ::before gradient: content:"" unlayered (Elementor resets content:none),
     visual rules in @layer sections.
   - .contact__card.e-con: unlayered — width, height, padding, bg-color, z-index.
   - .contact__bg-photo.e-con: unlayered — flex:1 spacer.
   - Typography inside card: @layer sections (no competing rules).

   Emulates: hero--homepage pattern (full-bleed bg + ::before gradient +
   card col / spacer col two-column layout).
   ============================================================= 
   HOW TO APPLY IN ELEMENTOR:
     Outer section             -> CSS Class: "contact" (already applied)
     Background image          -> Set on outer container in Elementor editor
     Left content container    -> CSS Class: "contact__card"
     Right spacer container    -> CSS Class: "contact__bg-photo"
     H2 heading widget         -> CSS Class: "section-heading" (already applied)
   */

/* ── Unlayered layout (beats Elementor's e-con-boxed + flex vars) ── */

/*
 * Outer shell: midnight navy bg, fixed 839px height, section padding.
 * background-size/position: unlayered to beat Elementor's background rules
 * (same pattern as .hero--homepage).
 * isolation: isolate creates a stacking context for the ::before gradient.
 * --flex-direction:row / --padding-*:0 feed Elementor's own CSS var mechanism.
 * content:"" must be unlayered — Elementor sets content:none on ::before
 * in unlayered CSS, which would beat a layered rule unconditionally.
 */
.contact.e-con {
  --column-gap: 0px;
  --flex-direction: row;
  --gap: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 0px;

  background-color: var(--color-midnight-navy);
  background-position: 0 0; /* Elementor's container setting is "top left" (HEWEB-759) */

  /*
   * Aurora's head is centered 56% across the photo, the 600px card covers the
   * left of the section, and plain "cover" hid her face at most widths. Scale
   * the photo so her head is centered in the space right of the card
   * (--section-px + 600px to the section's right edge), never smaller than
   * "cover" (HEWEB-759).
   */
  background-size: max(100%, calc((100% + var(--section-px) + 600px) / 1.13)) auto;
  flex-direction: row;
  height: 839px;
  isolation: isolate;
  padding: 96px var(--section-px);
}

.contact.e-con::before {
  content: "";
}

/*
 * Break the e-con-boxed constraint.
 * Elementor's .e-con-boxed > .e-con-inner has:
 *   max-width: var(--content-width) = min(100%, 1140px)
 *   margin: 0 auto
 * We override --content-width and force margin:0 so the inner
 * fills the full outer width.
 * --flex-direction:row switches children from stacked to side-by-side.
 * --gap:0 / --padding-*:0 zero Elementor's defaults.
 */
.contact.e-con > .e-con-inner {
  --column-gap: 0px;
  --content-width: 100%;
  --flex-direction: row;
  --gap: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 0px;

  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 0;
  height: 100%;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* ── Card (left column) ─────────────────────────────────── */

/*
 * 600px fixed width, deep-mint background, 647px height.
 * Padding: 52px all sides except bottom 56px (matches brand kit).
 * z-index:2 sits above the ::before gradient overlay (z-index:1).
 * --gap:10px feeds Elementor's gap var for child widget spacing.
 */
.contact__card.e-con {
  --column-gap: 0px;
  --flex-direction: column;
  --gap: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 0px;

  background-color: var(--color-deep-mint);
  border-radius: 8px;
  display: flex;
  flex: none;
  flex-direction: column;
  height: auto;
  min-height: 647px; /* grows for a longer form (webinar pages) */
  padding: 52px 52px 56px;
  position: relative;
  width: 600px;
  z-index: 2;
}

.contact__card.e-con > .e-con-inner {
  --column-gap: 0px;
  --content-width: 100%;
  --flex-direction: column;
  --gap: 10px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* ── Right spacer column ────────────────────────────────── */

/*
 * Transparent spacer — takes all remaining width to the right of the card.
 * Same role as .hero__image--homepage. No bg of its own; the full-bleed
 * bg image and gradient live on .contact.e-con itself.
 */
.contact__bg-photo.e-con {
  --column-gap: 0px;
  --flex-direction: column;
  --gap: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 0px;

  flex: 1 0 0;
  padding: 0;
}

/* ── Gradient overlay ───────────────────────────────────── */

@layer sections {
  /*
   * Left-heavy gradient replicating brand kit .contact__gradient:
   * linear-gradient(90deg, navy 82% opacity at 0%, navy 50% at 100%).
   * z-index:1 — sits above the bg image (z-index:0) but below the card (z-index:2).
   */
  .contact.e-con::before {
    background: linear-gradient(
      90deg,
      rgb(29 47 56 / 82%) 0%,
      rgb(29 47 56 / 50%) 100%
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
}

/* ── Card typography ────────────────────────────────────── */

@layer sections {
  /* Eyebrow — warm orange, 15px/600/2.7px/uppercase (shared .overline pattern) */
  .contact .overline .elementor-heading-title {
    color: var(--color-warm-orange);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2.7px;
    line-height: 15px;
    text-transform: uppercase;
  }

  /* H2 — font-family and variation-settings covered by shared .section-heading h2 rule.
     font-size/line-height are unlayered below. */

  /* Subtitle — DM Sans 20px/400/30px/82% navy.
     Widget [7c3fe137] renders bare text in .elementor-widget-container (no <p> wrapper). */
  .contact__card .elementor-widget-text-editor .elementor-widget-container {
    color: rgb(29 47 56 / 82%);
    font-family: var(--font-sans);
    font-size: var(--lead-size);
    font-weight: 400;
    line-height: var(--lead-leading);
  }

  /* ── HubSpot form inside contact card ──────────────────────
   * HubSpot injects per-form-instance inline stylesheets that load
   * after our external stylesheet. @layer sections rules lose to
   * any unlayered CSS unconditionally. These form rules are placed
   * outside any @layer (unlayered) so they compete on source order
   * and specificity with HubSpot's inline rules.
   * HubSpot's inline rules are ~0,1,1 to 0,2,1.
   * Our selectors use .contact__card (0,1,0) + .hbspt-form (0,1,0)
   * + :where(.hs-input) (0,0,0) = 0,2,0. That loses to 0,2,1.
   * Solution: move these rules to unlayered CSS below this block.
   */
}

/* The subtitle can arrive as a paragraph; it stays lead text, not body text.
   Unlayered on purpose: the body default (SHARED COMPONENTS) is unlayered and so
   beats any @layer rule, whatever the specificity. */
.contact__card .elementor-widget-text-editor p {
  font-size: inherit;
  line-height: inherit;
}

/*
 * HubSpot contact form styles — unlayered so they beat HubSpot's
 * inline per-instance stylesheets (which are also unlayered but
 * load after our external stylesheet). At equal specificity,
 * source order decides: our file loads in <head> at line ~102,
 * HubSpot's inline <style> loads after page paint. But inline
 * styles are parsed as part of the document, not deferred —
 * so they actually appear later in source order than our stylesheet.
 *
 * Strategy: use specificity advantage instead.
 * .contact__card (0,1,0) + .hbspt-form (0,1,0) + .hs-input (0,1,0) = 0,3,0
 * This exceeds HubSpot's inline 0,2,1 rules. Stylelint ceiling is 0,3,0 — exact match.
 *
 * Labels: .contact__card (0,1,0) + .hbspt-form (0,1,0) + label (0,0,1) = 0,2,1 — enough.
 * Textarea modifier: use :where() to keep at 0,3,0 ceiling.
 * Hover: .contact__card .hbspt-form .hs-button = 0,3,0; :hover is pseudo-class 0,1,0 → 0,4,0 — exceeds ceiling.
 *        Use :where(.hs-button):hover to stay at 0,2,1.
 */

/* Fieldset row gaps — 16px between each paired-input row and before the textarea.
 * Brand kit spec: absolute-positioned top offsets produce a 16px gap (67px row
 * spacing minus 51px input height). HubSpot renders fieldsets in normal flow
 * with margin-bottom: 0 by default; we restore the spacing here. */
.contact__card .hbspt-form .form-columns-2 {
  margin-bottom: 16px;
}

/* First fieldset top offset — 20px gap between subtitle and first input row.
 * Brand kit: inputs start at top: 20px inside the form container (absolute layout).
 * In HubSpot flow layout there is no equivalent offset; add it as margin-top. */
.contact__card .hbspt-form .form-columns-2:where(:first-child) {
  margin-top: 20px;
}

/* Textarea row — 16px gap before submit button. */
.contact__card .hbspt-form .form-columns-1 {
  margin-bottom: 16px;
}

/* Hide labels */
.contact__card .hbspt-form label {
  display: none;
}

/* Inputs */
.contact__card .hbspt-form .hs-input {
  background-color: var(--color-white);
  border-color: rgb(29 47 56 / 22%);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  color: #757575;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  height: 51px;
  padding: 14px 16px;
}

.contact__card .hbspt-form :where(.hs-input)::placeholder {
  color: #757575;
}

/* Textarea */
.contact__card .hbspt-form :where(.hs-fieldtype-textarea).hs-input {
  height: 122px;
  overflow: hidden;
  padding-bottom: 83px;
  resize: none;
}

/* Textarea width — beats HubSpot's per-instance .hs-form-[uuid] fieldset.form-columns-1 .hs-input { width: 95% }
 * which has specificity 0,3,1. Using .contact__form-widget as extra scope gives 0,4,0 > 0,3,1.
 * .contact__form-widget is a CSS class added to the HubSpot widget in Elementor Advanced > CSS Classes. */

/* TODO(code-quality): selector-max-specificity suppressed — exceeds 0,3,0 ceiling. Refactor when hover/HubSpot cascade patterns are revisited. */
/* stylelint-disable-next-line selector-max-specificity */
.contact__form-widget .hbspt-form .form-columns-1 .hs-input {
  width: 100%;
}

/* Forms with no fieldset wrappers (the webinar pages) stack their fields with
   no space between them; space them like the homepage form (Emily, 739, very
   low priority) */
.contact__card .hbspt-form form:not(:has(fieldset)) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Submit button */
.contact__card .hbspt-form .hs-button {
  background-color: var(--color-midnight-navy);
  border-color: transparent;
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  color: var(--color-warm-white);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  line-height: 16px;
  padding: 17px 38px;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.contact__card .hbspt-form :where(.hs-button):hover {
  background-color: transparent;
  border-color: var(--color-midnight-navy);
  color: var(--color-midnight-navy);
}

/*
 * H2 — Fraunces 38px/44px/600/midnight-navy.
 * Overrides the shared .section-heading h2 { font-size: 46px } rule which is
 * unlayered. This rule must also be unlayered to win on source order.
 */
.contact .section-heading h2 {
  font-size: 38px;
  line-height: 44px;
}

/* =============================================================
   PHASE 4 STUBS — Unimplemented sections
   These stubs document what each section should look like and
   what CSS class to apply in Elementor. No visual rules yet.
   Implement in Phase 4 continuation or follow-on tickets.
   ============================================================= */

/* =============================================================
   DISCREPANCY NOTES
   Brand kit class names that differ from our Elementor implementation.
   ============================================================= */

/*
 * Brand kit .pull-quote -> our .interstitial-quote
 * The brand kit source class is .pull-quote (all-sections.html).
 * We use .interstitial-quote for Elementor compatibility since
 * "pull-quote" conflicts with WordPress editor terminology.
 * All three homepage instances use .interstitial-quote.
 * The alliance variant uses .interstitial-quote--alliance.
 * If the brand kit ever refers to .pull-quote in other contexts,
 * map it to .interstitial-quote in our implementation.
 */

/*
 * Brand kit .alliance -> our .interstitial-quote--alliance
 * Brand kit defines .alliance as a standalone section class (homepage.css).
 * We implemented it as a BEM modifier of .interstitial-quote since the
 * visual structure is the same base container pattern.
 * If a page ever needs .alliance as a standalone section without
 * the interstitial-quote visual language, it will need its own rule.
 */

/* =============================================================
   CASE GRID — outer wrapper
   Page-level container wrapping the .case-grid template.
   Zeros Elementor's default 10px padding so the grid bleeds edge-to-edge.
   ============================================================= */
.case-grid-wrapper.e-con {
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;

  padding: 0;
}

/* =============================================================
   SERVICES GRID (.services) — service pages
   Brand kit: .services in website-development.css
   Cream bg, centered heading, 3×2 CSS Grid of service cards.
   Each card: amber number, H3 title, description, CTA button.
   Outer shell mirrors .platforms exactly. Inner cell rules differ
   (no image-box widget — number + heading + text + button instead).

   Elementor structure on staging:
     .services (rgjwsuiy)              outer e-con-boxed e-parent
       .e-con-inner
         .services__heading (zzysul4t) heading container, e-con-boxed
           overline widget             -> CSS Class: "overline"
           H2 widget                   -> CSS Class: "section-heading"
         .services__grid (wlwyd2uu)    grid container, e-con-boxed
           6 child card containers     -> no custom class (styled via descendants)
             number heading widget
             H3 title heading widget
             description text widget
             button widget

   HOW TO APPLY IN ELEMENTOR:
     Section container        -> CSS Class: "services"
     Heading container        -> CSS Class: "services__heading"
     Overline widget          -> CSS Class: "overline"
     H2 widget                -> CSS Class: "section-heading"
     Grid container           -> CSS Class: "services__grid"
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */

.services.e-con {
  background-color: var(--section-bg, var(--color-warm-white));
  padding: var(--section-py) var(--section-px);
}

/* Break boxed constraint — expand to full width */
.services.e-con > .e-con-inner {
  --gap: 56px;
  --row-gap: 56px;

  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Heading container — centered */
.services__heading.e-con {
  align-items: center;
  padding: 0;
}

.services__heading.e-con > .e-con-inner {
  align-items: center;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Optional intro paragraph under the H2 (e.g. /strategy-design/). Not in the
   services spec; uses the brand kit's centered subhead pattern
   (.process__subhead: 18/30, 72% navy, 760px measure). The measure sits on
   the paragraph: Elementor's widget width rules override a max-width on the
   widget. */
.services__heading .elementor-widget-text-editor {
  padding-top: 18px;
}

.services__heading .elementor-widget-text-editor p {
  color: var(--section-fg-muted, rgb(29 47 56 / 72%));
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
}

/* Grid container — no outer border/radius; border lives on each card */
.services__grid.e-con {
  background-color: transparent;
  padding: 0;
}

/* Break boxed inner — CSS Grid 3×2, 28px gaps between cards */
.services__grid.e-con > .e-con-inner {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Each service card — white bg, 8% navy border, 8px radius, 45px padding.
   Spec (website-development.css .service-card): icon box, title, body and
   link sit 18px apart, so the card's widget gap is 18px (Elementor's
   default is 20px) and the widgets carry no margins of their own. */
/* stylelint-disable-next-line no-descending-specificity */
.services__grid.e-con > :where(.e-con-inner) > .e-con {
  background-color: var(--section-card-bg, var(--color-white));
  border: 1px solid rgb(29 47 56 / 8%);
  border-radius: 8px;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  padding: 45px;
  row-gap: 0;
}

.services__grid.e-con > :where(.e-con-inner) > :where(.e-con) > .e-con-inner {
  --gap: 18px;
  --row-gap: 18px;
  --widgets-spacing: 18px;
  --widgets-spacing-row: 18px;

  gap: 18px;
  padding: 0;
  width: 100%;
}

/* Full-width cards (e.g. /strategy-design/) have no inner wrapper, so the
   18px widget gap goes on the card itself. */
.services__grid.e-con > :where(.e-con-inner) > .e-con-full {
  --gap: 18px;
  --row-gap: 18px;
  --widgets-spacing: 18px;
  --widgets-spacing-row: 18px;

  gap: 18px;
}

/* Cards share their rows through subgrid (number, title, body, Read more), so
   bodies and links line up across a row when titles wrap to different
   lengths, and the number keeps the same distance to its title (#158, #171).
   Every card is number, title, text and an optional button. */
.services__grid.e-con > :where(.e-con-inner) > :where(.e-con) > .e-con-inner,
.services__grid.e-con > :where(.e-con-inner) > .e-con-full {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 18px;
}

.services__grid :where(.elementor-widget-button) {
  grid-row: 4;
}

/* ── Card content ──────────────────────────────────────────── */

/* Icon box — 56px midnight-navy square wrapping the number widget.
 * The first widget in each card is a heading widget rendering the number.
 * The size goes on the widget itself: Elementor forces its
 * .elementor-widget-container to height: 100% of the widget (0,4,0), so a
 * height set on the container alone is ignored. */
.services__grid :where(.elementor-widget-heading:first-child) {
  --container-widget-width: 56px;

  flex: none;
  height: 56px;
  width: 56px;
}

.services__grid :where(.elementor-widget-heading:first-child) .elementor-widget-container {
  align-items: center;
  background-color: var(--section-tile-bg, var(--color-midnight-navy));
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

/* Number — Fraunces 24px/600, warm-orange, inside icon box. Unlayered:
   Elementor's .elementor-heading-title { line-height: 1 } is unlayered. */
.services__grid :where(.elementor-widget-heading:first-child) .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-serif);
  font-size: 24px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 30px;
}

@layer sections {
  /* H3 service title — color in @layer; font and line-height are unlayered below */
  .services__grid :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title {
    color: var(--section-fg, var(--color-midnight-navy));
  }

  /* Description */
  .services__grid .elementor-widget-text-editor p {
    color: var(--section-fg-muted, rgb(29 47 56 / 72%));
    font-family: var(--font-sans);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
    margin-bottom: 0;
  }
}

/* Description margin — unlayered to beat the base p { margin-block-end } */
.services__grid .elementor-widget-text-editor p {
  margin: 0;
}

/* H3 title — font-family, size, weight and line-height unlayered to beat base h3 */
.services__grid :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

/* Read more button — pinned to bottom of card via margin-top:auto.
 * Targets the button widget, last child in each card's flex column.
 * Styled as an inline link (orange underline) not a filled button. */
.services__grid .elementor-widget-button {
  margin-top: auto;
}

/* stylelint-disable-next-line no-descending-specificity */
.services__grid .elementor-widget-button .elementor-button {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-warm-orange);
  border-radius: 0;
  color: var(--section-fg, var(--color-midnight-navy));
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  height: auto;
  line-height: 15px;
  padding: 0 0 3px;
  box-shadow: 0 0 0 0 var(--color-warm-orange);
  transition: box-shadow 0.2s;
}

.services__grid .elementor-widget-button :where(.elementor-button):hover {
  box-shadow: 0 1px 0 0 var(--color-warm-orange);
  color: var(--color-midnight-navy);
}

/* =============================================================
   DARK SPLIT (.dark-split) — data-reporting-analytics page
   Brand kit: .dark-split in website-development.css

   Midnight navy bg, 680px tall. Flex row: left text col, center
   image, right text col. Each text col: amber label + warm-white body.

   Elementor structure on staging:
     .dark-split (38cfc0f)                outer e-con-boxed
       .dark-split__text--left (a95decc)  e-con-full, flex column
         heading widget                   -> label (orange)
         text-editor widget               -> body (warm-white 82%)
       .dark-split__image (0735584)       e-con-full, bg image
       .dark-split__text--right (f4b884e) e-con-full, flex column
         heading widget                   -> label (orange)
         text-editor widget               -> body (warm-white 82%)

   HOW TO APPLY IN ELEMENTOR:
     Outer section           -> CSS Class: "dark-split"
     Left text container     -> CSS Class: "dark-split__text--left"
     Image container         -> CSS Class: "dark-split__image" + set bg image
     Right text container    -> CSS Class: "dark-split__text--right"
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */

/* Spec height is 680px; min-height keeps that at desktop without clipping
   longer copy (brand kit bugfix: dark-split-responsive-overflow). */
.dark-split.e-con {
  background-color: var(--color-midnight-navy);
  flex-direction: row;
  height: auto;
  min-height: 680px;
  padding: 110px var(--section-px);
}

/* Break boxed constraint — full width flex row, vertically centered.
   Spec (website-development.css .dark-split): 418.18px text | 60px gap |
   543.64px image | 60px gap | 418.18px text inside the 1500px content
   width. The columns keep those proportions at every width. */
.dark-split.e-con > .e-con-inner {
  --gap: 60px;
  --column-gap: 60px;

  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 60px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Image — center column, fixed 460px height */
.dark-split__image.e-con {
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  flex: 543.64 1 0;
  height: 460px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

/* Text columns — 418.18px at 1800px, label and body 18px apart */
.dark-split__text--left.e-con,
.dark-split__text--right.e-con {
  --section-fg-muted: rgb(242 237 226 / 82%);
  --gap: 18px;
  --row-gap: 18px;
  --widgets-spacing: 18px;
  --widgets-spacing-row: 18px;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;

  flex: 418.18 1 0;
  gap: 18px;
  justify-content: center;
  min-width: 0;
  padding: 0;
}

/* ── Typography ────────────────────────────────────────────── */

/* Label — amber, 14px/600/uppercase/tracked
 * :where() drops specificity to 0,1,0 so later heading selectors
 * in grid-4x2-cream and values-grid don't trigger no-descending-specificity.
 * Unlayered so it beats Elementor kit color at equal specificity via source order. */
:where(.dark-split__text--left, .dark-split__text--right) .elementor-widget-heading .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2.52px;
  line-height: 14px;
  text-transform: uppercase;
}

@layer sections {
  /* Body — warm-white 82%, 16px/400 */
  .dark-split__text--left .elementor-widget-text-editor p,
  .dark-split__text--right .elementor-widget-text-editor p {
    color: var(--section-fg-muted);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
  }
}

/* =============================================================
   LIGHT SPLIT (.split-light) — website-development page
   Brand kit: .split-light in website-development.css
   Used for: "Comprehensive eCommerce and Web Development Services"

   Cream bg, 50/50 flex row. Text left (eyebrow + H2 + body + btn),
   photo right with 8px radius. Mirrors .featured-case layout with
   cream bg instead of white and no stats card.

   Elementor structure on staging:
     .split-light (59f4d16)         outer e-con-boxed
       .split-light__text (8623a90) left text column, e-con-boxed
         overline widget            -> CSS Class: "overline"
         H2 widget                  -> CSS Class: "section-heading"
         text editor widget         -> no class (body copy)
         button widget              -> CSS Class: "btn-secondary"
       .split-light__photo (db27155) right photo column, e-con-boxed
                                    -> set background image in Elementor

   HOW TO APPLY IN ELEMENTOR:
     Section container  -> CSS Class: "split-light"
     Left text column   -> CSS Class: "split-light__text"
     Overline widget    -> CSS Class: "overline"
     H2 widget          -> CSS Class: "section-heading"
     Button widget      -> CSS Class: "btn-secondary"
     Right photo col    -> CSS Class: "split-light__photo" + set bg image
   ============================================================= */

.split-light.e-con {
  background-color: var(--section-bg, var(--color-warm-white));
  flex-direction: row;
  padding: var(--section-py) var(--section-px);
}

/* Spec (website-development.css .split-light): 745.5px text | 80.5px gap |
   675px photo inside the 1500px content width, 520px tall. The columns keep
   those proportions at every width. */
.split-light.e-con > .e-con-inner {
  --gap: 80.5px;
  --column-gap: 80.5px;

  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 80.5px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Left text column — 745.5px at 1800px, content centered with 73px padding */
.split-light__text.e-con {
  --width: auto;
  --padding-top: 73px;
  --padding-bottom: 73px;
  --padding-left: 0px;
  --padding-right: 0px;

  flex: 745.5 1 0;
  justify-content: center;
  min-width: 0;
  padding: 73px 0;
  width: auto;
}

.split-light__text.e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Right photo column — 675px at 1800px, at least 520px tall; cover bg */
.split-light__photo.e-con {
  align-self: stretch;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  flex: 675 1 0;
  min-height: 520px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

/* Photo left, text right (#188). Stacked below 768px the text still comes first. */
.split-light--photo-left.e-con > .e-con-inner {
  flex-direction: row-reverse;
}

/* Footage in place of the photo (case studies): centered, its own 16:9 height */
.split-light__photo--video.e-con {
  align-self: center;
  min-height: 0;
}

/* Short text (landing pages decision l4): the photo takes the text column's
   height instead of the 520px minimum. The generator adds the class. */
.split-light--short .split-light__photo.e-con {
  min-height: 0;
}

/* One text measure for the two-column text blocks: split-light and the
   featured case study copy were 541px and 516px wide (Emily, 738/739: right
   margins the same, and tighter for easier scanning). Not inside the stats card:
   its text sets the card's height. */
.split-light__text .elementor-widget-text-editor :is(p, ul, ol),
.featured-case__text .elementor-widget-text-editor:not(:where(.featured-case__stats-card *)) :is(p, ul, ol),
.alternating-label__right .elementor-widget-text-editor :is(p, ul, ol) {
  max-width: 480px;
}

/* Body text paragraph spacing */
@layer sections {
  /* Overline — bottom spacing before H2 */
  .split-light__text .overline .elementor-widget-container {
    margin-bottom: 20px;
  }

  /* H2 — bottom spacing before body */
  .split-light__text .section-heading .elementor-widget-container {
    margin-bottom: 26px;
  }

  /* Body paragraph styles */
  .split-light__text .elementor-widget-text-editor p {
    color: var(--section-fg-muted, rgb(29 47 56 / 78%));
    font-family: var(--font-sans);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
  }

  /* Body — bottom spacing before button */
  .split-light__text .elementor-widget-text-editor .elementor-widget-container {
    margin-bottom: 34px;
  }
}

/* The eyebrow uses the shared orange .overline, like every other section
   (visual pass #118, #130; the kit's quieter 55% navy split eyebrow read as
   body text and disappeared on navy). H2 — spec .split-light__h2 is 44/50,
   not the shared 46/52. Unlayered to beat the shared unlayered rules;
   :where() keeps specificity at the shared rules' level. */
:where(.split-light__text) .section-heading .elementor-heading-title {
  font-size: 44px;
  line-height: 50px;
}

/* Button — scoped to split-light; same spec as other btn-secondary instances */
/* stylelint-disable-next-line no-descending-specificity */
.split-light__text .btn-secondary .elementor-button {
  background-color: var(--color-midnight-navy);
  border: 2px solid var(--color-midnight-navy);
  border-radius: 8px;
  color: var(--color-warm-white);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 17px 34px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* TODO(code-quality): selector-max-specificity suppressed */
/* stylelint-disable-next-line selector-max-specificity */
.split-light__text .btn-secondary .elementor-button:hover {
  background-color: transparent;
  border-color: var(--color-midnight-navy);
  color: var(--color-midnight-navy);
}

/* =============================================================
   STUB: CASE STUDIES PANELS (.case-study-panel) — website-development page
   Brand kit: .case-studies / .case-study-panel in website-development.css

   NOTE: different from .case-grid (homepage). This is the website-dev
   page variant: eyebrow + client logo row + 2-panel full-bleed row.
   .case-study-panel: 580px tall, bg image, gradient overlay, title + tags + button.

   HOW TO APPLY IN ELEMENTOR:
     Outer section     -> CSS Class: "case-studies"
     Each panel        -> CSS Class: "case-study-panel"
     (Elementor structure TBD — needs investigation when built)

   TODO(phase-4): implement
   ============================================================= */

/* .case-study-panel.e-con { } */

/* =============================================================
   PROCESS (.process) — website-development page
   Brand kit: .process in website-development.css
   Used for: "How We Do It" 4-step section

   White bg, centered H2 + subhead, then 4 steps in a horizontal row.
   Each step: colored circle with SVG icon, step number, serif title,
   body description. A dashed divider line runs horizontally behind
   the circles via a positioned element.

   IMPLEMENTATION: Custom HTML widget inside the .process container.
   Drop the HTML from HEWEB-753/website-development.html SECTION 6
   into a single HTML widget — no child containers needed.

   HOW TO APPLY IN ELEMENTOR:
     Section container -> CSS Class: "process"
     Add one HTML widget inside containing the process HTML

   Circle color classes (on .process-step__circle):
     --green  -> deep-mint bg
     --amber  -> warm-orange bg
     --blue   -> light-blue bg
     --dark   -> midnight-navy bg (icon SVG paths use warm-white fill)
   ============================================================= */

.process.e-con {
  background-color: var(--section-bg, var(--color-white));
  padding: 110px var(--section-px);
}

.process.e-con > .e-con-inner {
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Inner layout — matches brand kit .process__inner */
.process__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 auto;
  max-width: var(--content-max);
  width: 100%;
}

/* The section is raw HTML in an HTML widget, so its h2/h3/p pick up the
   unlayered base element margins. Spec spacing comes only from the flex
   gaps above and below, so zero them. This block stays unlayered for the
   same reason: layered rules would lose to the base element rules. */
.process__inner :where(h2, h3, p) {
  margin: 0;
}

/* H2 heading */
.process__h2 {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 46px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 52px;
  text-align: center;
}

/* Subhead paragraph */
.process__subhead {
  color: rgb(29 47 56 / 72%);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  max-width: 760px;
  text-align: center;
}

/* Steps container — relative so the dashed divider can be positioned */
.process__steps-container {
  isolation: isolate;
  padding-top: 46px;
  position: relative;
  width: 100%;
}

/* Dashed divider line behind circles */
.process__divider {
  border-top: 2px dashed rgb(29 47 56 / 25%);
  left: 12.5%;
  position: absolute;
  right: 12.5%;
  top: 126px;
  z-index: 0;
}

/* Steps row */
.process__steps {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 28px;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* Individual step */
.process-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: 22px;
  min-width: 0;
}

/* Colored circle */
.process-step__circle {
  align-items: center;
  border-radius: 80px;
  display: flex;
  flex: none;
  height: 160px;
  justify-content: center;
  width: 160px;
}

.process-step__circle--green { background: var(--color-deep-mint); }
.process-step__circle--amber { background: var(--color-warm-orange); }
.process-step__circle--blue  { background: var(--color-light-blue); }
.process-step__circle--dark  { background: var(--color-midnight-navy); }

/* SVG icon inside circle */
.process-step__icon {
  align-items: center;
  display: flex;
  height: 77px;
  justify-content: center;
  width: 80px;
}

/* stylelint-disable-next-line no-descending-specificity */
.process-step__icon svg {
  height: 77px;
  width: 80px;
}

/* A year in the circle instead of an icon (timelines: Gem Shopping Network) */
.process-step__year {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 34px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 40px;
}

.process-step__circle--dark .process-step__year {
  color: var(--color-warm-white);
}

/* Step number */
.process-step__number {
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

/* Step title — Fraunces serif */
.process-step__title {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 27px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 34px;
  max-width: 279px;
  text-align: center;
}

/* Step description */
.process-step__desc {
  color: rgb(29 47 56 / 72%);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  max-width: 300px;
  text-align: center;
}

/* =============================================================
   FAQ (.faq) — service pages
   Brand kit: .faq in website-development.css
   Image left + accordion right. White bg.
   Mirror of .services-accordion with columns swapped:
     services-accordion: content left (710px fixed), photo right (flex:1)
     faq:                image left (710px fixed), content right (flex:1)

   Elementor structure on staging:
     .faq (6ijq3je2)              outer e-con-boxed e-parent
       .e-con-inner               Elementor boxed inner (no custom class)
         .faq__image (2yjr1apm)   left column, bg image
         .faq__accordion (8tmaxzdr) right column, accordion widget

   HOW TO APPLY IN ELEMENTOR:
     Section container   -> CSS Class: "faq"
     Image container     -> CSS Class: "faq__image"
     Accordion container -> CSS Class: "faq__accordion"
     Accordion widget    -> CSS Classes: "home-page-accordion faq__accordion-list"
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */

.faq.e-con {
  --column-gap: 0px;
  --row-gap: 0px;
  --padding-top: var(--section-py);
  --padding-bottom: var(--section-py);
  --padding-left: var(--section-px);
  --padding-right: var(--section-px);

  background-color: var(--section-bg, var(--color-white));
  padding: var(--section-py) var(--section-px);
}

/* Break boxed constraint, make flex row */
.faq.e-con > .e-con-inner {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 80px;
  height: auto;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Columns scale in the spec ratio (website-development.css .faq): 639px image,
   80px gap, 781px content inside the 1500px content width. Exact at 1800px,
   proportional below. The image is at least the spec's 560px tall. */
.faq__image.e-con {
  align-self: stretch;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  flex: 639 1 0;
  min-height: 560px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.faq__image.e-con > .e-con-inner {
  height: 100%;
  padding: 0;
}

/* e-con-full variant: no .e-con-inner wrapper */
.faq__image.e-con-full.e-con {
  height: 100%;
  padding: 0;
}

/* Right content column — 781px at 1800px, scales with the image column.
   Spacing is per widget (below), so the column gap is 0. */
.faq__accordion.e-con {
  --width: auto;
  --gap: 0px;
  --row-gap: 0px;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;

  display: flex;
  flex: 781 1 0;
  flex-direction: column;
  gap: 0;
  max-width: 781px;
  min-width: 0;
  padding: 0;
  width: auto;
}

.faq__accordion.e-con > .e-con-inner {
  --gap: 0px;
  --row-gap: 0px;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;

  gap: 0;
}

/* Spec (website-development.css .faq): H2 44/50 with 44px below it before
   the list. Staging adds an overline above the H2, spaced 20px like the
   other section eyebrows. Padding, not margin: Elementor zeroes widget
   margins with .e-con .elementor-widget.elementor-widget (0,3,0). */
.faq__accordion .overline {
  padding-bottom: 20px;
}

.faq__accordion .section-heading {
  padding-bottom: 44px;
}

:where(.faq__accordion) .section-heading .elementor-heading-title {
  font-size: 44px;
  line-height: 50px;
}

/* Answer text — spec .faq-item__answer p: 16/26, 75% navy, 40px right inset */
.faq__accordion .elementor-tab-content p {
  color: rgb(29 47 56 / 75%);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  max-width: 741px;
}

/* An answer typed straight into the tab (Strategy & Design FAQ: no paragraph tag) took the 16px
   full navy tab default; it gets the same type as the paragraphs above (Emily, HEWEB-738, Oct 23) */
.faq__accordion .elementor-tab-content {
  color: rgb(29 47 56 / 75%);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

/* =============================================================
   STUB: 3×2 CARD GRID ON CREAM (.grid-3x2-cream)
   Brand kit: .grid-3x2-cream in section-layouts.css

   3×2 white cards on cream bg. Amber (warm-orange) top border per card.
   Fraunces H5 titles, DM Sans body. 28px grid gap.

   HOW TO APPLY IN ELEMENTOR:
     Section container -> CSS Class: "grid-3x2-cream"
     (Elementor structure TBD)

   TODO(phase-4): implement
   ============================================================= */

/* .grid-3x2-cream.e-con { } */

/* =============================================================
   STUB: 3×2 CARD GRID ON DARK (.grid-3x2-dark)
   Brand kit: .grid-3x2-dark in section-layouts.css

   Dark variant of .grid-3x2-cream. Midnight navy bg.
   Card tint: 4% warm-white. Same grid dimensions and typography.

   HOW TO APPLY IN ELEMENTOR:
     Section container -> CSS Class: "grid-3x2-dark"
     (Elementor structure TBD)

   TODO(phase-4): implement
   ============================================================= */

/* .grid-3x2-dark.e-con { } */

/* =============================================================
   4×2 MINIMAL GRID ON CREAM (.grid-4x2-cream)
   Brand kit: .grid-4x2-cream in section-layouts.css

   Cream bg, centered heading, 4×2 CSS Grid of service cards.
   White card bg, no border, no radius. Amber bare number
   (no navy icon box), DM Sans 18px title, DM Sans 15px body.
   Has --2col modifier for 2-column variant.

   Elementor structure on staging:
     .grid-4x2-cream (cuh75auz)              outer e-con-boxed
       .e-con-inner
         .grid-4x2-cream__heading (kk14ld0a) heading container, e-con-boxed
           overline widget                   -> CSS Class: "overline"
           H2 widget                         -> CSS Class: "section-heading"
         .grid-4x2-cream__grid (f8fbopj6)    grid container, e-con-boxed
           8 child card containers           -> no custom class (styled via descendants)
             number heading widget
             H3 title heading widget
             description text widget
             button widget

   HOW TO APPLY IN ELEMENTOR:
     Section container     -> CSS Class: "grid-4x2-cream"
     Heading container     -> CSS Class: "grid-4x2-cream__heading"
     Overline widget       -> CSS Class: "overline"
     H2 widget             -> CSS Class: "section-heading"
     Grid container        -> CSS Class: "grid-4x2-cream__grid" (must be Boxed)
   ============================================================= */

/* ── Unlayered layout ──────────────────────────────────────── */

.grid-4x2-cream.e-con {
  background-color: var(--section-bg, var(--color-warm-white));
  padding: var(--section-py) var(--section-px);
}

/* Break boxed constraint — expand to full width */
.grid-4x2-cream.e-con > .e-con-inner {
  --gap: 56px;
  --row-gap: 56px;

  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Heading container — centered (Emily, 737, Oct 2: "center the section") */
.grid-4x2-cream__heading.e-con {
  align-items: center;
  padding: 0;
  text-align: center;
}

.grid-4x2-cream__heading.e-con > .e-con-inner {
  align-items: center;
  max-width: 100%;
  padding: 0;
  text-align: center;
  width: 100%;
}

/* Optional intro paragraph under the H2 (e.g. /b2b-ecommerce/). Centered
   like the heading, 760px measure, the body type (18/30, 72% navy).
   The measure sits on the paragraph because Elementor's widget width rules
   override a max-width on the widget. Production content sometimes carries
   an inline text-align; the rule's specificity doesn't beat inline styles,
   so recipes strip them. */
.grid-4x2-cream__heading .elementor-widget-text-editor p,
.values-grid__heading .elementor-widget-text-editor p {
  color: var(--section-fg-muted, rgb(29 47 56 / 72%));
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
}

.grid-4x2-cream__heading .elementor-heading-title,
.values-grid__heading .elementor-heading-title {
  text-align: center;
}

/* Grid container */
.grid-4x2-cream__grid.e-con {
  --section-fg-muted: rgb(29 47 56 / 65%);

  background-color: transparent;
  padding: 0;
}

/* Break boxed inner — CSS Grid 4×2, 28px gaps (spec section-layouts.css) */
.grid-4x2-cream__grid.e-con > .e-con-inner {
  --display: grid;

  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Each card — white bg, no border, no radius, 28px/32px padding */
/* stylelint-disable-next-line no-descending-specificity */
.grid-4x2-cream__grid.e-con > :where(.e-con-inner) > .e-con {
  background-color: var(--section-card-bg, var(--color-white));
  border: 0;
  border-radius: 0;
  flex-direction: column;
  padding: 28px 28px 32px;
}

.grid-4x2-cream__grid.e-con > :where(.e-con-inner) > :where(.e-con) > .e-con-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 0;
  width: 100%;
}

/* e-con-full cards (the staging setup: Boxed grid, Full cards). Cards sit in
   the grid's .e-con-inner and have no inner wrapper of their own, so the
   widget gap is set on the card itself. */
.grid-4x2-cream__grid.e-con > :where(.e-con-inner) > .e-con-full {
  --gap: 12px;
  --row-gap: 12px;
  --column-gap: 12px;
  --widgets-spacing: 12px;
  --widgets-spacing-row: 12px;

  /* the card token, so on-white sections get cream cards (#163, #168) */
  background-color: var(--section-card-bg, var(--color-white));
  border: 0;
  border-radius: 0;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 32px;
}

/* Cards with bodies share their rows through subgrid (number, title, body,
   Read more), so bodies line up across a row when titles wrap to different
   lengths (#158, #182). Title-only grids keep plain cards (no empty rows). */
.grid-4x2-cream__grid:where(:has(.elementor-widget-text-editor)).e-con > :where(.e-con-inner) > .e-con-full {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 12px;
}

.grid-4x2-cream__grid :where(.elementor-widget-button) {
  grid-row: 4;
}

/* 2-column variant — override column count only.
 * :where() reduces specificity to 0,2,0 to avoid descending-specificity
 * complaints from later sections (values-grid, contact-cta). */
:where(.grid-4x2-cream--2col) .grid-4x2-cream__grid.e-con > .e-con-inner {
  grid-template-columns: repeat(2, 1fr);
}

/* 3-column variant: title-only card counts that fill rows of three, not four
   (e.g. 9 items; #172). The generator adds the class. */
:where(.grid-4x2-cream--3col) .grid-4x2-cream__grid.e-con > .e-con-inner {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Card content ──────────────────────────────────────────── */

/* Number — 56px navy badge with the amber Fraunces number, the same as
   .services__grid (Emily, 737, Oct 2: first tile sets use the comp's badge).
   The size goes on the widget itself: Elementor forces the widget container
   to height: 100% of the widget, so a height on the container is ignored. */
.grid-4x2-cream__grid :where(.elementor-widget-heading:first-child) {
  --container-widget-width: 56px;

  flex: none;
  height: 56px;
  width: 56px;
}

.grid-4x2-cream__grid :where(.elementor-widget-heading:first-child) .elementor-widget-container {
  align-items: center;
  background-color: var(--section-tile-bg, var(--color-midnight-navy));
  border-radius: 8px;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}

@layer sections {
  /* H3 title */
  .grid-4x2-cream__grid :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title {
    color: var(--color-midnight-navy);
  }

  /* Description — spec .grid-4x2-cream__body: 15/22, 65% navy */
  .grid-4x2-cream__grid .elementor-widget-text-editor p {
    color: var(--section-fg-muted);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
    margin-bottom: 0;
  }
}

/* Number — Fraunces 24px/600 amber inside the badge (as .services__grid).
   Unlayered: the widget renders a heading element, and base heading rules
   (unlayered) would otherwise win font and line-height. */
.grid-4x2-cream__grid :where(.elementor-widget-heading:first-child) .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-serif);
  font-size: 24px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 30px;
}

/* Description margin — unlayered to beat the base p { margin-block-end } */
.grid-4x2-cream__grid .elementor-widget-text-editor p {
  margin: 0;
}

/* H3 title — unlayered to beat base h3 */
.grid-4x2-cream__grid :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

/* Button — inline orange-underline link, pinned to card bottom */
.grid-4x2-cream__grid .elementor-widget-button {
  margin-top: auto;
}

/* stylelint-disable-next-line no-descending-specificity */
.grid-4x2-cream__grid .elementor-widget-button .elementor-button {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-warm-orange);
  border-radius: 0;
  color: var(--color-midnight-navy);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  height: auto;
  line-height: 15px;
  padding: 0 0 3px;
  box-shadow: 0 0 0 0 var(--color-warm-orange);
  transition: box-shadow 0.2s;
}

.grid-4x2-cream__grid .elementor-widget-button :where(.elementor-button):hover {
  box-shadow: 0 1px 0 0 var(--color-warm-orange);
  color: var(--color-midnight-navy);
}

/* =============================================================
   NUMBERED 2-COL ON DARK (.numbered-2col-dark)
   Brand kit: .numbered-2col-dark in section-layouts.css (LAYOUT 2).
   Numbered items in two columns on midnight navy, row and column
   dividers, amber eyebrow-style numbers, Fraunces titles, DM Sans body.
   Used on: /adobe-commerce-code-audits/ (What You Get),
   /algolia-search/ (Why Human Element?).

   HOW TO APPLY IN ELEMENTOR:
     Section container (Boxed)        -> "numbered-2col-dark"
       H2 heading widget              -> "numbered-2col-dark__heading"
       Text editor (optional subhead) -> "numbered-2col-dark__subhead"
       Grid container (Full Width)    -> "numbered-2col-dark__grid"
         Item container (Full Width)  -> "numbered-2col-dark__item", one per item
           Heading widget "01"        -> "numbered-2col-dark__number"
           Heading widget (title, h3) -> "numbered-2col-dark__title"
           Text editor (optional)     -> "numbered-2col-dark__body"
   Background options: navy only (it's the dark layout).
   ============================================================= */

.numbered-2col-dark.e-con {
  background-color: var(--section-bg, var(--color-midnight-navy));
  padding: var(--section-py) var(--section-px);
}

.numbered-2col-dark.e-con > .e-con-inner {
  --gap: 0px;
  --row-gap: 0px;

  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

.numbered-2col-dark__heading {
  padding-bottom: 48px;
}

.numbered-2col-dark__heading:has(+ .numbered-2col-dark__subhead) {
  padding-bottom: 8px;
}

.numbered-2col-dark__heading .elementor-heading-title {
  color: var(--section-fg);
  font-family: var(--font-serif);
  font-size: 46px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 52px;
}

.numbered-2col-dark__subhead {
  padding-bottom: 48px;
}

.numbered-2col-dark .numbered-2col-dark__subhead p {
  color: var(--section-fg-muted);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  margin: 0;
}

/* Table-style grid: top border, then row and column dividers on the items */
.numbered-2col-dark__grid.e-con {
  border-top: var(--border-row-width) var(--border-row-style) var(--border-row-dark-color);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  width: 100%;
}

.numbered-2col-dark__item.e-con {
  align-content: start;
  border-bottom: var(--border-row-width) var(--border-row-style) var(--border-row-dark-color);
  display: grid;
  gap: 12px 24px;
  grid-template-columns: 36px 1fr;
  padding: 28px 48px 28px 0;
  width: auto;
}

/* Right-column items: left border as the column divider, inset from it */
.numbered-2col-dark__item.e-con:nth-child(even) {
  border-left: var(--border-row-width) var(--border-row-style) var(--border-row-dark-color);
  padding-left: 48px;
  padding-right: 0;
}

/* Odd count: the last item sits in the left column at the width of the item above
   it (Emily, 737/738, Oct 2: "in line with #3 above it"). It used to span both
   columns (visual pass #68, decision A); Emily is asked to confirm the new look. */

.numbered-2col-dark__number {
  grid-row: 1 / span 2;
}

.numbered-2col-dark__number .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.1px;
  line-height: 20px;
  padding-top: 4px;
  text-transform: uppercase;
}

.numbered-2col-dark__title,
.numbered-2col-dark__body {
  grid-column: 2;
}

.numbered-2col-dark__title .elementor-heading-title {
  color: var(--section-fg);
  font-family: var(--font-serif);
  font-size: 20px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 28px;
}

.numbered-2col-dark .numbered-2col-dark__body p {
  color: var(--section-fg-muted);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-leading);
  margin: 0;
}

.numbered-2col-dark .numbered-2col-dark__body li {
  color: var(--section-fg-muted);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: 400;
}

/* Light variant (#151, /about-us/ core values): the same table in navy on
   cream or white; on-cream / on-white set the background token */
.numbered-2col-dark.on-cream.e-con,
.numbered-2col-dark.on-white.e-con {
  --border-row-dark-color: var(--border-row-color);
  --section-fg: var(--color-midnight-navy);
  --section-fg-muted: rgb(29 47 56 / 72%);
}

/* Short names as tags instead of bullets (landing pages decision l3) */
.numbered-2col-dark__body ul.tag-list {
  flex-flow: row wrap;
  gap: 8px;
}

.numbered-2col-dark__body .tag-list > li {
  border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  padding: 4px 10px;
}

.numbered-2col-dark__body .tag-list > li::before {
  content: none;
}

/* =============================================================
   ALTERNATING LABEL (.alternating-label)
   Brand kit: .alternating-label in section-layouts.css

   Stacked rows, alternating white/cream bg. Left: amber left-border
   label (DM Sans 600 20px uppercase tracked). Right: Fraunces H2 + body.

   Elementor structure on staging:
     .alternating-label (6747972)           outer e-con-boxed
       .alternating-label__row (6cc9ea3)    row 1, e-con-boxed
         .alternating-label__label (23fa9c0) left col, e-con-full
           heading or text-editor widget
         .alternating-label__right (52bb93d) right col, e-con-full
           .alternating-label__title widget -> CSS Class: "alternating-label__title"
           text-editor widget               -> body copy
       .alternating-label__row (d9c9ba6)    row 2, e-con-boxed

   HOW TO APPLY IN ELEMENTOR:
     Outer section              -> CSS Class: "alternating-label"
     Each row                   -> CSS Class: "alternating-label__row"
     Left label container       -> CSS Class: "alternating-label__label"
     Right content container    -> CSS Class: "alternating-label__right"
     H2 heading widget          -> CSS Class: "alternating-label__title"
   ============================================================= */

/* Outer — no padding; rows are full width and carry their own padding */
.alternating-label.e-con {
  --gap: 0px;
  --row-gap: 0px;

  padding: 0;
}

.alternating-label.e-con > .e-con-inner {
  --gap: 0px;
  --row-gap: 0px;

  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Each row — full width, alternating bg, section padding */
.alternating-label__row.e-con,
.case-feature.e-con,
.case-duo.e-con {
  padding: calc(var(--section-py) * 0.88) var(--section-px);
  width: 100%;
}

.alternating-label__row.e-con:nth-child(odd),
.case-feature.e-con:nth-child(odd),
.case-duo.e-con:nth-child(odd) {
  background-color: var(--section-bg, var(--color-white));
}

.alternating-label__row.e-con:nth-child(even),
.case-feature.e-con:nth-child(even),
.case-duo.e-con:nth-child(even) {
  background-color: var(--section-alt-bg, var(--color-warm-white));
}

/* Break boxed inner — CSS Grid 260px label + 1fr right */
.alternating-label__row.e-con > .e-con-inner {
  display: grid;
  gap: 0 80px;
  grid-template-columns: 260px 1fr;
  max-width: var(--content-max);
  padding: 0;
  width: 100%;
}

/* Label column — amber left border, DM Sans 600 20px uppercase */
.alternating-label__label.e-con,
.alternating-label__label.e-con > .e-con-inner {
  padding: 0;
}

/* Right column — flex column, 22px gap */
.alternating-label__right.e-con {
  --section-fg-muted: rgb(29 47 56 / 75%);
  --gap: 22px;
  --row-gap: 22px;

  gap: 22px;
  padding: 0;
}

/* ── Typography ────────────────────────────────────────────── */

/* Label text — amber border, DM Sans 600 20px uppercase tracked */
.alternating-label__label .elementor-heading-title,
.alternating-label__label .elementor-widget-text-editor p {
  border-left: 3px solid var(--color-warm-orange);
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2.1px;
  line-height: 28px;
  padding-left: 20px;
  padding-top: 4px;
  text-transform: uppercase;
}

@layer sections {
  /* H2 title — Fraunces 35px/600 */
  .alternating-label__title .elementor-heading-title {
    color: var(--color-midnight-navy);
    font-family: var(--font-serif);
    font-size: 35px;
    font-variation-settings: var(--font-serif-axes);
    font-weight: 600;
    line-height: 42px;
  }

  /* Body — DM Sans 17px/400, 75% navy */
  .alternating-label__right .elementor-widget-text-editor p {
    color: var(--section-fg-muted);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
    max-width: 760px;
  }

  /* lists keep the paragraphs' measure (/privacy-policy/, HEWEB-743) */
  .alternating-label__right .elementor-widget-text-editor :is(ul, ol) {
    max-width: 760px;
  }
}

/* At ≤1024px narrow the label column (220px keeps long labels, e.g. on
   /b2b-seo-25/, over the 200px minimum text width) */
@media (width <= 1024px) {
  .alternating-label__row.e-con > .e-con-inner {
    grid-template-columns: 220px 1fr;
    gap: 0 48px;
  }
}

/* =============================================================
   CASE STUDY (HEWEB-762)
   The nine case study pages under Our Work. Built from the catalog:
   .hero, .case-stats, a Meet the Client .split-light (photo or footage),
   the story as .alternating-label rows plus .case-feature rows (screenshot beside its explanation),
   .case-quote, then Let's chat. Every image is the client's own and is
   shown whole (image widgets, never a cropped background).

   HOW TO APPLY IN ELEMENTOR:
     Hero (device mockup or screenshot as its image) -> "hero hero--case"
     Hero meta text (Deliverables, Platform) -> CSS Class: "case-hero__meta"
     Result numbers (Full, inside the hero text column, after the intro)
                               -> "case-stats"; each item (Full) "case-stats__item"
                                   value heading "case-stats__value", label text "case-stats__label"
     Meet the Client (Full)    -> "split-light": text column, and a photo column with the main
                                   image as its background (Gem Shopping Network: the banner
                                   photo anchored left, with a "hero hero--text-only" hero).
                                   Footage: the photo column is "split-light__photo
                                   split-light__photo--video" holding a Video widget
                                   (self-hosted mp4, autoplay muted loop)
     Story container (Full)    -> "alternating-label"
       label rows              -> as .alternating-label (label + right column)
       feature rows (Boxed)    -> "case-feature", holding an image widget
                                   "case-feature__image" and a Full container
                                   "case-feature__text alternating-label__right"
                                   (title heading "case-feature__title")
     Image group in a row      -> Full container "case-gallery" in the right column
                                   ("case-gallery--small" for a lone diagram or logo graphic)
     Two short features        -> "case-duo" holding two "case-duo__item alternating-label__right"
                                   containers (image, title, text)
     Screenshot with its own frame (PNG with transparent edges)
                               -> add "case-feature__image--bare" to the image widget
     Screenshot with a white matte around a rounded frame
                               -> "case-feature__image--matte" (white matte baked in): same frame as the default
     Quote section (Full)      -> "case-quote" with one text editor: quote paragraph, then
                                   a paragraph with the attribution in <strong>
   ============================================================= */

/* Hero: Deliverables and Platform under the intro */
.case-hero__meta.elementor-widget p {
  color: rgb(242 237 226 / 82%);
  font-size: 16px;
  line-height: 30px;
  max-width: clamp(319px, 31.11vw, 560px);
}

/* Deliverables links: quieter than the orange underline used in body text (Emily, HEWEB-762:
   "feels really busy", text small, Judson's lines run together). A faint underline, more line
   height so the underlines stay apart, orange only on hover. */
/* stylelint-disable-next-line no-descending-specificity */
.case-hero__meta p a {
  color: inherit;
  text-decoration-color: rgb(242 237 226 / 35%);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* stylelint-disable-next-line no-descending-specificity */
.case-hero__meta p a:hover {
  text-decoration-color: var(--color-warm-orange);
}

.case-hero__meta.elementor-widget p strong {
  color: var(--color-warm-orange);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Hero with a device mockup or screenshot (.hero--case): show the whole image
   on the navy instead of cropping it to fill the column */
.hero--case .hero__image.e-con {
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 40px;
}

/* Result numbers, inside the hero text column under the intro */
.case-stats.e-con {
  --gap: 20px 44px;

  flex-flow: row wrap;
  padding: 8px 0;
}

.case-stats__item.e-con {
  --gap: 6px;

  flex: 0 1 auto;
  padding: 0;
  width: auto;
}

.case-stats__value .elementor-heading-title {
  color: var(--color-warm-white);
  font-family: var(--font-serif);
  font-size: 44px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 48px;
}

.case-stats__arrow {
  color: var(--color-warm-orange);
}

.case-stats__label.elementor-widget p {
  color: rgb(242 237 226 / 70%);
  font-size: 13px;
  letter-spacing: 1.6px;
  line-height: 18px;
  max-width: 200px;
  text-transform: uppercase;
}

/* Group of images inside a row: one to three side by side */
.case-gallery.e-con {
  --gap: 24px;

  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 0;
}

/* a lone image lines up with the text above it, not centered in the column */
.case-gallery .elementor-widget-image {
  text-align: left;
}

.case-gallery .elementor-widget-image img {
  border-radius: 8px;
  height: auto;
  max-width: 100%;
  width: auto;
}

/* Two cards instead of three (Duallane results) */
:where(.services--2col) .services__grid.e-con > .e-con-inner {
  grid-template-columns: repeat(2, 1fr);
}

/* A diagram or logo graphic on its own is shown small, not stretched to the column */
.case-gallery--small.e-con {
  max-width: 560px;
}

/* Sub-headings in a row's text */
.alternating-label__right .elementor-widget-text-editor h3 {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 24px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 30px;
  margin: 0 0 8px;
}

/* Feature row: screenshot left, explanation right; even rows flip */
.case-feature.e-con > .e-con-inner {
  align-items: center;
  display: grid;
  gap: 0 80px;
  grid-template-columns: var(--feature-columns, minmax(0, 1.25fr) minmax(0, 1fr));
  max-width: var(--content-max);
  padding: 0;
  width: 100%;
}

.case-feature:nth-child(even) .case-feature__image {
  order: 2;
}

/* The wider column belongs to the screenshot on both sides. With one template the flipped rows
   put the screenshot in the narrow 1fr column, so every right-hand image was about 20% smaller
   than the left-hand ones (Emily, HEWEB-762, Oct 22: "lop-sided"). */
.case-feature:nth-child(even) {
  --feature-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.case-feature__image.elementor-widget-image img {
  border-radius: 8px;
  box-shadow: 0 12px 40px rgb(29 47 56 / 14%);
  height: auto;
  max-width: 100%;
  width: auto;
}

/* A screenshot Emily asked to see larger, to match the images in the rows around it (HEWEB-762:
   ChemPoint Seamless Systems Integration, EOTECH, Industrial Supplier, Judson, NoIR). It fills
   its column, which enlarges a small file; every other image stays at its own size. Add the class
   on the image widget in Elementor. */
.case-feature__image--fill.elementor-widget-image img {
  width: 100%;
}

/* A PNG whose edges are transparent carries its own frame and shadow; adding
   ours would draw a second frame around it. Its baked-in shadow is faint where the
   screenshot is mostly white on a cream row (Duallane, Electro-Matic; Emily, HEWEB-762),
   so a hairline and a tight shadow follow the picture's own shape (filter uses the alpha
   channel, so the transparent margin gets no box). A box-shadow, border or backdrop would
   outline that margin instead. Kept this small: a larger blur darkens the gray margins
   some images carry (EOTECH). */
.case-feature__image--bare.elementor-widget-image img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 1px rgb(29 47 56 / 30%)) drop-shadow(0 2px 6px rgb(29 47 56 / 10%));
}

/* `case-feature__image--matte` (a white matte baked around the screenshot) takes the standard
   frame above: a white card with the shadow. It used to multiply into the row, which turned
   the screenshot's whites cream and left it with no edge (Duallane "Custom integration",
   Electro-Matic, Roush mega menu; Emily, HEWEB-762). The class stays on the images and does
   nothing now. */

/* Two short features side by side (Roush: Homepage and Podcast) */
.case-duo.e-con > .e-con-inner {
  align-items: start;
  display: grid;
  gap: 0 64px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--content-max);
  padding: 0;
  width: 100%;
}

/* The two items share rows (image, title, text) so the titles line up
   whatever the screenshots' heights; each screenshot sits on the title */
.case-duo__item.e-con {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  padding: 0;
  row-gap: 22px;
}

.case-duo__item.e-con > .case-feature__image {
  align-self: end;
}

.case-feature__text.e-con {
  padding: 0;
}

.case-feature__title .elementor-heading-title {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 32px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 38px;
}

/* A label row with nothing under it (Solution, What We Delivered) is not built.
   Its label heads the first feature row as a centered section heading,
   spanning both columns. Spaced with padding, not margin: Elementor zeroes
   widget margins (0,3,0) */
.case-feature__label {
  grid-column: 1 / -1;
  padding-bottom: 88px;
}

.case-feature__label .elementor-heading-title {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 44px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 50px;
  text-align: center;
}

/* A short list shown as chips (services provided, future enhancements) */
.case-tags .elementor-widget-container ul {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-tags .elementor-widget-container li {
  background-color: var(--color-white);
  border: 1px solid rgb(29 47 56 / 14%);
  border-radius: 999px;
  color: var(--color-midnight-navy);
  font-size: 15px;
  line-height: 22px;
  padding: 8px 18px;
}

/* the theme's orange square bullet (li::before) is not wanted on a chip */
.case-tags .elementor-widget-container li::before {
  content: none;
}

/* Card text: a list under a paragraph gets air above it; the theme's list
   already spaces its own items */
.services__grid .elementor-widget-text-editor p + ul {
  margin-top: 14px;
}

/* Client quote */
.case-quote.e-con {
  background-color: var(--color-midnight-navy);
  padding: 110px var(--section-px);
}

/* The 760px measure sits on the paragraphs: Elementor's widget width rule (0,3,0) beats a
   max-width on the widget. */
.case-quote .elementor-widget-text-editor {
  text-align: center;
}

.case-quote .elementor-widget-text-editor p {
  color: var(--color-warm-white);
  font-family: var(--font-serif);
  font-size: 30px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 400;
  line-height: 40px;
  margin: 0 auto 24px;
  max-width: 760px;
}

.case-quote :where(.elementor-widget-text-editor) p:last-child {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.1px;
  line-height: 24px;
  margin: 0 auto;
  text-transform: uppercase;
}

/* =============================================================
   STUB: NUMBERED LIST CTA (.numbered-list-cta)
   Brand kit: .numbered-list-cta in section-layouts.css

   Full-row clickable list with eyebrow + H2 header.
   Each row: amber number · title + body · arrow →.
   Background tint on hover.

   HOW TO APPLY IN ELEMENTOR:
     Section container -> CSS Class: "numbered-list-cta"
     Each list row     -> CSS Class: "numbered-list-cta__row"
     (Elementor structure TBD)

   TODO(phase-4): implement
   ============================================================= */

/* .numbered-list-cta.e-con { } */

/* =============================================================
   VALUES GRID (.values-grid)
   Source: Adapted from .services (same cream bg + card pattern)
   Used on: /website-development/ — "What Makes Us Different"

   Structure differs from .services: instead of a flat 3×2 CSS grid,
   Elementor uses 3 row containers each holding 2 icon-box widgets
   with a divider widget between each row.

   Elementor structure on staging:
     .values-grid (hr53j8u6)              outer e-con-boxed
       .e-con-inner
         .values-grid__heading (zan0rs0o) heading container, e-con-boxed
           H2 widget                     -> CSS Class: "section-heading"
         .values-grid__rows (zdgr8yia)   inner column container
           .values-grid__row (qxa7wdme)  row 1 — flex row of 2 icon-box widgets + divider
           .values-grid__row (kwm6b8b8)  row 2
           .values-grid__row (2vyv7wg3)  row 3

   HOW TO APPLY IN ELEMENTOR:
     Section container        -> CSS Class: "values-grid"
     Heading container        -> CSS Class: "values-grid__heading"
     H2 widget                -> CSS Class: "section-heading"
     Inner column container   -> CSS Class: "values-grid__rows"
     Each row container (×3)  -> CSS Class: "values-grid__row"
   ============================================================= */

/* ── Outer shell — cream bg, same padding as .services ─────── */

.values-grid.e-con {
  background-color: var(--section-bg, var(--color-warm-white));
  padding: var(--section-py) var(--section-px);
}

/* Break boxed constraint — expand to full width */
.values-grid.e-con > .e-con-inner {
  --gap: 56px;
  --row-gap: 56px;

  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* ── Heading container — centered (Emily, 737, Oct 2; Dane's decision for every values-grid) */

.values-grid__heading.e-con {
  align-items: center;
  padding: 0;
  text-align: center;
}

.values-grid__heading.e-con > .e-con-inner {
  align-items: center;
  max-width: 100%;
  padding: 0;
  text-align: center;
  width: 100%;
}

/* ── Rows container — column stack of 3 row containers ──────── */

.values-grid__rows.e-con {
  background-color: transparent;
  padding: 0;
}

/* 28px between rows, the same as between cards (spec .values-grid__cards gap) */
.values-grid__rows.e-con > .e-con-inner {
  --gap: 28px;
  --row-gap: 28px;

  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* ── Each row — force horizontal flex, 2 cards side by side */
.values-grid__row.e-con {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;

  padding: 0;
}

/* Force the inner to lay out horizontally with equal-width columns */
.values-grid__row.e-con > .e-con-inner {
  --align-items: stretch;
  --flex-direction: row;
  --gap: 28px;
  --column-gap: 28px;
  --content-width: 100%;

  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 28px;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* Divider widgets — hide them; the rows container gap provides the spacing */
.values-grid__row.e-con .elementor-widget-divider {
  display: none;
}

/* ── Each card — plain e-con container, white card, same style as .services ──
 * Structure per card (3 child widgets, no classes needed):
 *   1. Heading widget, HTML Tag: span  — number (01, 02, etc.)
 *   2. Heading widget, HTML Tag: h5    — card title
 *   3. Text Editor widget              — body paragraph */

/* stylelint-disable-next-line no-descending-specificity */
.values-grid__row.e-con > :where(.e-con-inner) > .e-con {
  background-color: var(--section-card-bg, var(--color-white));
  border: 1px solid rgb(29 47 56 / 8%);
  border-radius: 8px;
  flex: 1 1 0;
  min-width: 0;
  padding: 40px 45px;
}

.values-grid__row.e-con > :where(.e-con-inner) > :where(.e-con) > .e-con-inner {
  padding: 0;
  width: 100%;
}

/* A row with a single card (odd card count, e.g. 3 tiles) keeps the width of the
   card above it instead of stretching across the section (Emily, 737: "third
   tile margins need to be corrected to line up with the one above"). */
@media (width >= 768px) {
  .values-grid__row > :where(.e-con-inner) > .e-con:only-child {
    flex: 0 1 calc(50% - 14px);
  }
}

/* Card widgets carry their own spacing (below), so no Elementor widget gap.
   Cards are Full containers on staging, so this sits on the card itself. */
.values-grid__row.e-con > :where(.e-con-inner) > .e-con-full {
  --gap: 0px;
  --row-gap: 0px;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;

  gap: 0;
}

/* ── Card content ──────────────────────────────────────────── */

/* A card's text fills the card, so a closing Read more link sits at the
   bottom and lines up across the row (#144) */
.values-grid__row .elementor-widget-text-editor:last-child {
  flex-grow: 1;
}

.values-grid__row .elementor-widget-text-editor > .elementor-widget-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Spacing on the widgets themselves (spec: 16px under the number, 12px under
   the title). Padding, not margin: Elementor zeroes widget margins with
   .e-con .elementor-widget.elementor-widget { margin-block-end: 0 } (0,3,0). */
.values-grid__row :where(.elementor-widget-heading:first-child) {
  --container-widget-width: 56px;

  flex: none;
  height: 56px;
  width: 56px;
}

/* The badge is 56px tall, so the 16px under the number moves to the title */
.values-grid__row :where(.elementor-widget-heading:nth-child(2)) {
  padding-bottom: 12px;
  padding-top: 16px;
}

/* Number — 56px navy badge with the amber Fraunces number, as .services__grid
   (Dane's decision, 2026-10-05: every values-grid takes the badge). */
/* stylelint-disable-next-line no-descending-specificity */
.values-grid__row :where(.elementor-widget-heading:first-child) .elementor-widget-container {
  align-items: center;
  background-color: var(--section-tile-bg, var(--color-midnight-navy));
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.values-grid__row :where(.elementor-widget-heading:first-child) .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-serif);
  font-size: 24px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 30px;
}

@layer sections {
  /* H5 title — color in @layer; font and line-height unlayered below */
  .values-grid__row :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title {
    color: var(--section-fg, var(--color-midnight-navy));
  }

  /* Body */
  .values-grid__row .elementor-widget-text-editor p {
    color: var(--section-fg-muted, rgb(29 47 56 / 72%));
    font-size: var(--body-size);
    font-weight: 400;
    line-height: var(--body-leading);
  }
}

/* Body margin — unlayered to beat the base p { margin-block-end } */
.values-grid__row .elementor-widget-text-editor p {
  margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.values-grid__row .elementor-widget-text-editor p:where(:has(> .read-more):last-child) {
  margin-top: auto;
}

/* H5 title font — unlayered to beat base h5 rule */
.values-grid__row :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

/* =============================================================
   STUB: SHARED BUTTON RULES (.btn-secondary, .btn-border, .btn-mint)
   The three button classes are defined separately in each section that
   uses them, with inconsistent borders and hover states:
     .btn-secondary  .hero__buttons (renders as mint primary),
                     .services-accordion__inner (transparent border),
                     .split-light__text (navy border),
                     .contact-cta (transparent border)
     .btn-border     .hero__buttons (40% warm-white), .blog-grid,
                     .client-logos, .contact-cta
     .btn-mint       .hero__buttons only
   These duplicates cause most of the no-descending-specificity
   suppressions in this file.

   TODO(HEWEB-737 phase 3b): consolidate into shared rules with light and
   dark variants, remove the section-scoped copies, and verify hover on
   every section (specificity parity check).
   ============================================================= */

/* =============================================================
   CONTACT CTA (.contact-cta) — service pages
   Exact replica of .contact — same outer shell, same card, same
   bg-photo spacer, same gradient overlay, same card typography.
   Only the outer selector differs (.contact-cta vs .contact).
   The card and bg-photo classes are shared with .contact.

   Differences from .contact addressed in follow-on rules below:
   - Card height: fixed 647px will be removed (content is shorter)
   - Button row: buttons stacked, 16px gap (replaces form)

   Elementor structure (template: lets-chat-2-button-2026):
     Outer section         -> CSS Class: "contact-cta"
     Left card             -> CSS Class: "contact__card" (shared)
     Right spacer          -> CSS Class: "contact__bg-photo" (shared)
     H2 heading widget     -> CSS Class: "section-heading"
     Subtitle text widget  -> no class (inherits .contact__card typography)
     Button row container  -> CSS Class: "contact-cta__buttons"
     Button 1 widget       -> CSS Class: "btn-secondary"
     Button 2 widget       -> CSS Class: "btn-border"
   ============================================================= */

/* ── Outer shell — exact copy of .contact.e-con ─────────── */
.contact-cta.e-con {
  --column-gap: 0px;
  --flex-direction: row;
  --gap: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 0px;

  background-color: var(--color-midnight-navy);
  background-position: 0 0;

  /* Same scaling as .contact: Aurora's head centered in the space right of the
     600px card, never smaller than "cover". "cover" at center cut her head off
     at the top and tucked her behind the card on /services/ (Emily, 759). */
  background-size: max(100%, calc((100% + var(--section-px) + 600px) / 1.13)) auto;
  flex-direction: row;
  height: auto;
  isolation: isolate;
  padding: 96px var(--section-px);
}

/* Unlayered on purpose: Elementor sets content: none on container ::before,
   and a layered content: "" loses to it. Same pattern as .contact and
   .hero--homepage. The rest of the overlay lives in @layer sections. */
.contact-cta.e-con::before {
  content: "";
}

/* ── Inner — exact copy of .contact.e-con > .e-con-inner ── */
.contact-cta.e-con > .e-con-inner {
  --column-gap: 0px;
  --content-width: 100%;
  --flex-direction: row;
  --gap: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;
  --row-gap: 0px;

  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 0;
  height: 100%;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

/* ── Gradient overlay — exact copy of .contact.e-con::before ── */
@layer sections {
  .contact-cta.e-con::before {
    background: linear-gradient(
      90deg,
      rgb(29 47 56 / 82%) 0%,
      rgb(29 47 56 / 50%) 100%
    );
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
}

/* ── Card height override ───────────────────────────────── */

/* .contact__card.e-con sets height:647px for the form variant.
 * contact-cta has no form so the card should size to its content.
 * min-height ensures the card doesn't collapse too short with only
 * heading + subtitle + two buttons. Scoped to avoid regressing .contact. */
.contact-cta .contact__card.e-con {
  align-self: flex-start;
  height: auto;
  min-height: 400px;
}

/* Push button row to bottom of card by making the card's inner a
 * space-between column. The button row gets margin-top:auto to absorb
 * all remaining space above it. */
/* stylelint-disable-next-line selector-max-specificity */
.contact-cta .contact__card.e-con > .e-con-inner {
  justify-content: space-between;
}

.contact-cta .contact-cta__buttons.e-con {
  margin-top: auto;
}

/* ── Outer page-level wrapper ───────────────────────────── */

/* Zeros Elementor's default 10px padding — no white space outside the dark section.
 * Vertical breathing room is handled by padding on .contact-cta itself. */
.contact-cta-wrapper.e-con {
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;

  padding: 0;
}

/* ── Button row container ───────────────────────────────── */

/* Overrides Elementor's default flex-column and padding. The row wraps and
 * each button widget is 100% wide (below), so the buttons stack vertically
 * with a 16px gap. */
/* stylelint-disable-next-line no-descending-specificity */
.contact-cta__buttons.e-con {
  --flex-direction: row;
  --gap: 16px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;

  flex-flow: row wrap;
  gap: 16px;
  padding: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.contact-cta__buttons.e-con > .e-con-inner {
  --flex-direction: row;
  --gap: 16px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --padding-top: 0px;

  flex-flow: row wrap;
  gap: 16px;
  padding: 0;
}

/* Each button widget takes full row width so they stack vertically */
.contact-cta__buttons .elementor-widget-button {
  width: 100%;
}

/* ── .btn-secondary: midnight-navy filled ───────────────── */

/* Elementor's default .elementor-button is grey at 0,1,0.
 * .contact-cta .btn-secondary .elementor-button = 0,2,1 — beats it. */
/* stylelint-disable-next-line no-descending-specificity */
.contact-cta .btn-secondary .elementor-button {
  background-color: var(--color-midnight-navy);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--color-warm-white);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 17px 34px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* stylelint-disable-next-line selector-max-specificity */
.contact-cta .btn-secondary .elementor-button:hover {
  background-color: transparent;
  border-color: var(--color-midnight-navy);
  color: var(--color-midnight-navy);
}

/* stylelint-disable-next-line selector-max-specificity */
.contact-cta .btn-secondary .elementor-button:where(:hover) .elementor-button-text {
  color: var(--color-midnight-navy);
}

/* ── .btn-border: midnight-navy outline ─────────────────── */

/* stylelint-disable-next-line no-descending-specificity */
.contact-cta .btn-border .elementor-button {
  background-color: transparent;
  border: 2px solid var(--color-midnight-navy);
  border-radius: 8px;
  color: var(--color-midnight-navy);
  font-size: 16px;
  font-weight: 600;
  height: 50px;
  padding: 16px 32px;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* stylelint-disable-next-line selector-max-specificity */
.contact-cta .btn-border .elementor-button:hover {
  background-color: var(--color-midnight-navy);
  border-color: var(--color-midnight-navy);
  color: var(--color-warm-white);
}

/* stylelint-disable-next-line selector-max-specificity */
.contact-cta .btn-border .elementor-button:where(:hover) .elementor-button-text {
  color: var(--color-warm-white);
}

/* =============================================================
   VIDEO BAND (.video-band) and statement quotes
   =============================================================
   HOW TO APPLY IN ELEMENTOR:
     Section container -> CSS Class: "video-band"; one Video widget inside
     Statement quote   -> .interstitial-quote with an .overline heading above
                          the statement ("Our Mission Statement" on /about-us/)
   */
.video-band.e-con {
  background-color: var(--section-bg, var(--color-white));
  padding: var(--section-py) var(--section-px);
}

.video-band .elementor-widget-video {
  margin-inline: auto;
  max-width: 1100px;
  width: 100%;
}

/* The overline keeps its eyebrow style inside the quote (0,3,0 beats the quote heading's 0,2,0) */
.interstitial-quote .overline .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.7px;
  line-height: 15px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* =============================================================
   RESPONSIVE: TABLET (768-1023px) AND PHONE (<768px)
   HEWEB-737 Phase 3, rules approved by Dane on 2026-09-24.
   Desktop, 1024px and up, is unchanged.

   Tokens: --section-px (side padding) and --section-py (vertical padding)
   step down here, so every section that uses them follows. Photo splits
   stack with the text first (--stack-photo-order: 1); set it to -1 to put
   photos first (decision r3, which Dane may revisit).
   ============================================================= */

@media (width < 1024px) {
  :root {
    --section-px: clamp(20px, round(calc(4.902vw + 2.35px), 1px), 40px);
    --section-py: 72px;
    --stack-photo-order: 1;
  }

  /* Type scale (clamp from 360px to 1023px) */
  .hero__h1 h1 {
    font-size: clamp(36px, calc(1.207vw + 31.66px), 44px);
    line-height: 1.1;
  }

  .section-heading h2,
  .services__heading .section-heading h3,
  .featured-case .section-heading h2,
  .contact .section-heading h2,
  :where(.split-light__text) .section-heading .elementor-heading-title,
  :where(.faq__accordion) .section-heading .elementor-heading-title,
  .numbered-2col-dark__heading .elementor-heading-title,
  .process__h2 {
    font-size: clamp(30px, calc(0.905vw + 26.74px), 36px);
    line-height: 1.15;
  }

  .interstitial-quote .elementor-heading-title {
    font-size: clamp(30px, calc(1.508vw + 24.57px), 40px);
    line-height: 1.2;
  }

  /* Header: Elementor's nav dropdown is the mobile menu (decision r1: a panel
     under the header bar; the Contact button stays in the bar, compact). */
  [data-elementor-type="header"] .elementor-menu-toggle {
    background-color: transparent;
    border-radius: 6px;
    color: var(--color-midnight-navy);
    font-size: 24px;
    height: 44px;
    justify-content: center;
    width: 44px;
  }

  /* The panel hangs off the sticky <header> itself (top: 100% of the bar), so
     it opens directly under the bar at any bar height or scroll position. A
     fixed `top: 100px` assumed a 100px bar and opened over the logo and
     Contact Us on phones where the bar is shorter (HEWEB-759). The containers
     between the header and the panel must not be positioned, or the panel
     would anchor to them instead; only the containers that hold the nav
     widget are changed, so a new positioned element elsewhere in the header
     (a cart badge, say) keeps its positioning. */
  [data-elementor-type="header"] .e-con:has(.elementor-widget-nav-menu),
  [data-elementor-type="header"] .elementor-widget-nav-menu {
    position: static;
  }

  [data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background-color: var(--color-white);
    box-shadow: 0 12px 24px rgb(29 47 56 / 12%);
    left: 0;
    margin-top: 0;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
  }

  [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-item {
    border-bottom: 1px solid rgb(29 47 56 / 8%);
    color: var(--color-midnight-navy);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 500;
    min-height: 48px;
    padding: 14px var(--section-px);
  }

  [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-sub-item {
    font-size: 16px;
    min-height: 44px;
    padding: 12px var(--section-px) 12px calc(var(--section-px) + 16px);
  }

  /* Open, hovered and current items: navy text on cream. Elementor's default
     is a #3f444b fill with white text, which left navy on dark for the open
     item and white on white for hovered subitems (#178). */
  [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-item:where(:hover, :focus-visible, .highlighted, .elementor-item-active),
  [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-sub-item:where(:hover, :focus-visible, .highlighted, .elementor-item-active) {
    background-color: var(--color-warm-white);
    color: var(--color-midnight-navy);
  }

  [data-elementor-type="header"] .elementor-button {
    min-height: 44px;
    width: auto;
  }

  /* Logo left; the search icon centered in the space between the logo and
     Contact Us; Contact button and menu toggle together on the right
     (HEWEB-759) */
  [data-elementor-type="header"] .header-icon--search-mobile {
    margin-inline: auto;
  }

  [data-elementor-type="header"] .elementor-widget-button {
    margin-left: 0;
  }

  [data-elementor-type="header"] .elementor-widget-nav-menu {
    flex: 0 0 auto;
    order: 3;
  }

  /* Hero: tablet keeps two columns, text 55% / photo 45% */
  .hero__text.e-con,
  .hero__text.e-con-full.e-con {
    width: 55vw;
  }

  .hero__text.e-con > .e-con-inner,
  .hero__text.e-con-full.e-con {
    padding: 96px 32px 96px var(--section-px);
  }

  /* services-accordion: accordion full width, photo below as a band */
  .services-accordion.e-con {
    padding: var(--section-py) var(--section-px);
  }

  .services-accordion.e-con > .e-con-inner {
    flex-direction: column;
    gap: 40px;
  }

  .services-accordion__inner.e-con {
    max-width: none;
    width: 100%;
  }

  .services-accordion__photo.e-con {
    min-height: 320px;
    width: 100%;
  }

  /* Photo splits that stack on tablet: dark-split, featured-case */
  .dark-split.e-con,
  .dark-split.e-con > .e-con-inner,
  .featured-case.e-con,
  .featured-case.e-con > .e-con-inner {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .dark-split__text--left.e-con,
  .dark-split__text--right.e-con,
  .featured-case__text.e-con,
  .featured-case__photo.e-con {
    max-width: none;
    width: 100%;
  }

  .dark-split__image.e-con,
  .featured-case__photo.e-con {
    min-height: 320px;
    width: 100%;
  }

  /* The dark split keeps its desktop order when it stacks (text, photo,
     text; #107); the featured case puts its text first (r3) */
  .featured-case__photo.e-con {
    order: var(--stack-photo-order);
  }

  .featured-case.e-con {
    padding-right: var(--section-px);
  }

  /* Stacked featured case: no desktop centering inset on the text, and the
     same 32px gap as a stacked split between the text and the photo (#177) */
  .featured-case__text.e-con {
    padding-block: 0;
  }

  .featured-case.e-con > .e-con-inner {
    gap: 32px;
  }

  /* split-light and faq stay side by side, photo narrowed to 40% */
  .split-light__photo.e-con,
  .faq__image.e-con {
    flex: 0 0 40%;
    max-width: 40%;
    min-height: 360px;
  }

  .faq__accordion.e-con {
    max-width: none;
  }

  /* Card grids */
  .services__grid.e-con > .e-con-inner,
  .platforms__grid.e-con > .e-con-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4x2-cream__grid.e-con > .e-con-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Case grid: 2 per row, shorter panels */
  .case-grid .elementor-cta {
    height: 420px;
  }

  /* Blog grid: 2 cards */
  .blog-grid .elementor-posts-container {
    flex-wrap: wrap;
  }

  .blog-grid .elementor-post {
    flex: 1 1 calc(50% - 17px);
    max-width: none;
  }

  /* Process: 4 steps as 2 x 2, no dashed connector */
  .process__steps {
    display: grid;
    gap: 48px 32px;
    grid-template-columns: repeat(2, 1fr);
  }

  .process__divider {
    display: none;
  }

  /* Contact / Let's chat: card and form stack over the photo */
  .contact.e-con,
  .contact.e-con > .e-con-inner,
  .contact-cta.e-con,
  .contact-cta.e-con > .e-con-inner {
    flex-direction: column;
    height: auto;
  }

  .contact__card.e-con {
    height: auto;
    max-width: 600px;
    width: 100%;
  }

  /* Let's chat (two buttons): the card sizes to its content, so the buttons
     follow the text instead of sitting at the bottom of a 400px card (#179) */
  .contact-cta .contact__card.e-con {
    min-height: 0;
  }

  .contact-cta .contact-cta__buttons.e-con {
    margin-top: 32px;
  }

  /* Touch targets: 44px minimum */
  .elementor-tab-title,
  .elementor-widget-button .elementor-button {
    min-height: 44px;
  }

  /* Carousel dots keep their size; an invisible 44px hit area goes around them */
  .swiper-pagination-bullet {
    position: relative;
  }

  .swiper-pagination-bullet::after {
    content: "";
    inset: -18px -6px;
    position: absolute;
  }

  :where([data-elementor-type="wp-page"]) .read-more {
    padding-block: 14px 3px;
  }

  /* Read more buttons in card grids are links: their underline stays under
     the text, and an invisible hit area gives the 44px target (#102, #106) */
  .services__grid .elementor-widget-button .elementor-button,
  .grid-4x2-cream__grid .elementor-widget-button .elementor-button {
    min-height: 0;
    position: relative;
  }

  .services__grid :where(.elementor-widget-button) .elementor-button::after,
  .grid-4x2-cream__grid :where(.elementor-widget-button) .elementor-button::after {
    content: "";
    inset: -14px 0;
    position: absolute;
  }

  /* Interstitial quote: vertical padding follows the section token (#100) */
  .interstitial-quote.e-con {
    padding-block: var(--section-py);
  }

  /* Footer: two columns on tablet, one on phones (#134), each column after
     the first set off by a line above it (#101). The per-device widths and
     borders were removed from the footer template (22281). */
  :where([data-elementor-type="footer"]).elementor-location-footer .footer-columns {
    padding-top: var(--section-py);
  }

  :where([data-elementor-type="footer"]).elementor-location-footer .footer-columns > .e-con-inner {
    gap: 40px 32px;
    padding-top: 0;
  }

  :where([data-elementor-type="footer"]) .footer-columns > .e-con-inner > .e-con {
    --width: calc(50% - 16px);

    width: calc(50% - 16px);
  }
}

@media (width < 768px) {
  :root {
    --section-py: 56px;
  }

  /* Header (decision r1): logo, compact Contact button and menu toggle on one row */
  [data-elementor-type="header"].elementor-location-header .e-con-inner {
    flex-wrap: nowrap;
    gap: 8px;
  }

  [data-elementor-type="header"] .elementor-widget-theme-site-logo img {
    max-width: 140px;
  }

  [data-elementor-type="header"] .elementor-button {
    font-size: 14px;
    padding: 12px 14px;
  }

  /* Hero (decision r2): the photo sits behind the text under a navy overlay */
  .hero.e-con > .e-con-inner {
    position: relative;
  }

  .hero__text.e-con,
  .hero__text.e-con-full.e-con {
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .hero__text.e-con > .e-con-inner,
  .hero__text.e-con-full.e-con {
    padding: 72px var(--section-px);
  }

  .hero__image.e-con,
  .hero__image.e-con-full.e-con {
    inset: 0;
    position: absolute;
    width: 100%;
  }

  .hero__image.e-con::after {
    background: linear-gradient(90deg, rgb(29 47 56 / 92%) 0%, rgb(29 47 56 / 72%) 100%);
    content: "";
    inset: 0;
    position: absolute;
  }

  /* Services accordion (decision r4): photo hidden on phones */
  .services-accordion__photo.e-con {
    display: none;
  }

  /* All photo splits stack, text first (decision r3) */
  .split-light.e-con,
  .split-light.e-con > .e-con-inner,
  .faq.e-con > .e-con-inner {
    flex-direction: column;
  }

  .split-light__text.e-con,
  .faq__accordion.e-con {
    max-width: none;
    width: 100%;
  }

  .split-light__photo.e-con,
  .faq__image.e-con {
    flex: 0 0 auto;
    max-width: none;
    min-height: 240px;
    order: var(--stack-photo-order);
    width: 100%;
  }

  .dark-split__image.e-con,
  .featured-case__photo.e-con {
    min-height: 240px;
  }

  /* Short-text splits let the photo take the text column's height on desktop;
     stacked there is no text beside it, so it collapsed to a 20px strip on
     /shopify-development-michigan/ (Emily, 739) */
  .split-light--short .split-light__photo.e-con {
    min-height: 240px;
  }

  /* One column for every card grid (decision r5 for grid-4x2-cream) */
  .services__grid.e-con > .e-con-inner,
  .platforms__grid.e-con > .e-con-inner,
  .grid-4x2-cream__grid.e-con > .e-con-inner,
  :where(.grid-4x2-cream--2col) .grid-4x2-cream__grid.e-con > .e-con-inner {
    grid-template-columns: 1fr;
  }

  .values-grid__row.e-con > .e-con-inner {
    flex-direction: column;
  }

  /* Stacked photo splits: no desktop centering inset, and a normal gap
     between the text and the photo (#99, #103, #109, #132) */
  .split-light__text.e-con {
    padding-block: 0;
  }

  .split-light.e-con > .e-con-inner {
    gap: 32px;
  }

  /* Let's chat: a tighter card on phones (#104) */
  .contact__card.e-con {
    padding: 36px 24px 40px;
  }

  /* Footer: one column, a line above each column after the first */
  :where([data-elementor-type="footer"]) .footer-columns > .e-con-inner > .e-con {
    --width: 100%;

    width: 100%;
  }

  :where([data-elementor-type="footer"]) .footer-columns > :where(.e-con-inner) > .e-con + .e-con {
    border-top: 1px solid rgb(242 237 226 / 16%);
    padding-top: 32px;
  }

  /* numbered-2col-dark: one column, row dividers only */
  .numbered-2col-dark__grid.e-con {
    grid-template-columns: 1fr;
  }

  .numbered-2col-dark__item.e-con,
  .numbered-2col-dark__item.e-con:nth-child(even) {
    border-left: 0;
    padding: 24px 0;
  }

  /* alternating-label: the label sits above the text */
  .alternating-label__row.e-con > .e-con-inner,
  .case-feature.e-con > .e-con-inner {
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .case-duo.e-con > .e-con-inner {
    gap: 48px;
    grid-template-columns: 1fr;
  }

  .case-feature__label {
    padding-bottom: 32px;
  }

  .case-feature__label .elementor-heading-title {
    font-size: 32px;
    line-height: 38px;
  }

  .case-feature:nth-child(even) .case-feature__image {
    order: 0;
  }

  .hero--case .hero__image.e-con {
    height: 320px;
    inset: auto;
    position: relative;
  }

  .hero--case .hero__image::after {
    content: none;
  }

  .case-stats__value .elementor-heading-title {
    font-size: 36px;
    line-height: 40px;
  }

  .case-quote .elementor-widget-text-editor p {
    font-size: 24px;
    line-height: 32px;
  }

  /* Case grid: one panel per row */
  .case-grid .elementor-widget-call-to-action {
    flex-basis: 100%;
    max-width: 100%;
  }

  .case-grid .elementor-cta {
    height: 360px;
  }

  /* Blog grid: one card */
  .blog-grid .elementor-post {
    flex-basis: 100%;
  }

  /* Process: a vertical list */
  .process__steps {
    grid-template-columns: 1fr;
  }

  /* Testimonial (decision r6): quote only, swipe and dots instead of arrows */
  .testimonial__photo.e-con {
    display: none;
  }

  .testimonial.e-con > .e-con-inner {
    flex-direction: column;
  }

  /* The quote lines up with the text inside the white platforms box above it,
     not with the box's edge: the box's own 44px cell padding is added to the side
     padding, and the quote drops from 22px to 20px to keep lines reasonable at that
     width (Emily, HEWEB-741, Oct 1: "they might look better with the same margins of
     that text ... maybe the font size will need to come down a little") */
  .testimonial__content.e-con {
    padding: var(--section-py) calc(var(--section-px) + var(--platforms-cell-px));
    width: 100%;
  }

  .testimonial .elementor-testimonial__text {
    font-size: 20px;
    line-height: 30px;
  }

  .testimonial .elementor-swiper-button {
    display: none;
  }

  /* Card titles 18px */
  .services__grid :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title,
  .values-grid__row :where(.elementor-widget-heading:nth-child(2)) .elementor-heading-title,
  .numbered-2col-dark__title .elementor-heading-title {
    font-size: 18px;
    line-height: 26px;
  }

  /* A light hero (on-cream, /thank-you/) has navy text, so it stacks instead of
     sitting on the photo: text first, photo band below (Emily, 739) */
  .on-cream.hero > .e-con-inner {
    flex-direction: column;
  }

  .on-cream .hero__image.e-con,
  .on-cream .hero__image.e-con-full {
    inset: auto;
    min-height: 260px;
    position: relative;
  }

  .on-cream .hero__image::after {
    display: none;
  }
}

/* The article and archive selectors below end in the same elements as header
   and section selectors earlier in the file (a, img, p, heading titles) but
   never match the same elements, so source order between them is moot. */
/* stylelint-disable no-descending-specificity */

/* =============================================================
   ARTICLE LAYOUT (HEWEB-742): blog posts, single-post template 22278
   Long-form and content first, after The Verge's features: one ~680px
   reading column, plain inline images, and three callouts (big centered
   pull quote, side quote in the margin, aside box).
   functions.php splits the content at each H2 into .article-section bands
   that rotate white, cream, navy. The header is navy; after the content
   come the author block (white), related posts (cream) and the navy footer,
   so the first band is white and the last is never white. Callouts take
   their colors from the band they sit in.

   Template structure (Advanced > CSS Classes):
     .post-hero > .post-hero__text (.post-hero__meta, .post-hero__title)
                + .post-hero__image (.post-hero__photo)
     .post-body > .post-content (Post Content widget)
     .post-author > .post-closing__author (author box, .post-closing__share)
     .post-related (.post-related__h2, .post-related__grid)
   ============================================================= */

.article-section--white,
.article-section--cream,
.post-author,
.post-related {
  --article-bg: var(--color-white);
  --article-fg: var(--color-midnight-navy);
  --article-muted: rgb(29 47 56 / 72%);
  --article-card: var(--color-warm-white);
  --article-rule: rgb(29 47 56 / 16%);
}

.article-section--cream,
.post-related {
  --article-bg: var(--color-warm-white);
  --article-card: var(--color-white);
}

.article-section--navy,
.post-hero {
  --article-bg: var(--color-midnight-navy);
  --article-fg: var(--color-warm-white);
  --article-muted: rgb(242 237 226 / 75%);
  --article-card: rgb(242 237 226 / 7%);
  --article-rule: rgb(242 237 226 / 22%);
}

/* ── Header (navy): topic, date, author, title | featured image ── */
.post-hero.e-con {
  background-color: var(--article-bg);
  flex-direction: row;
  gap: 0;
  padding: 0;
}

.post-hero__text.e-con {
  gap: 24px;
  justify-content: center;
  padding: var(--section-py) 64px var(--section-py) var(--section-px);
  width: 50%;
}

/* Featured images are often graphics with text, so they show whole, not
   cropped to fill the column */
.post-hero__image.e-con {
  justify-content: center;
  padding: var(--section-py) var(--section-px) var(--section-py) 0;
  width: 50%;
}

.post-hero__photo img {
  border-radius: 8px;
  height: auto;
  width: 100%;
}

/* Featured images that already contain the title (the generated title cards,
   HEWEB-760) are turned off per post with "Show featured image in the article
   header" in the post editor. A Code Snippet adds body.post-hero-no-image; the
   header text then takes the full width, held to a ~900px reading measure and
   left-aligned. The right padding does the holding: it is the header width
   minus the measure minus the left padding, never less than the normal edge. */
.post-hero-no-image .post-hero__image {
  display: none;
}

.post-hero-no-image .post-hero__text.e-con {
  padding-inline-end: max(var(--section-px), calc(100% - 900px - var(--section-px)));
  width: 100%;
}

.post-hero__meta .elementor-icon-list-text,
.post-hero__meta .elementor-icon-list-item a {
  color: var(--article-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0.4px;
}

/* below the title: "Filed under [topic chip]", "By author", "Published date".
   Elementor's post-info CSS forces every a and span under .elementor-icon-list-text to display:
   inline (specificity 0,3,1, above what this file allows), so the chips cannot be made blocks.
   The wrapper is the one element it does not touch: it becomes a wrapping flex row, the chips
   stay inline and never break inside a chip (nowrap), the 40px line height spaces the rows, and
   the zero font size on the list drops the commas Elementor prints between chips. */
.post-hero__meta .elementor-post-info__item--type-terms {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  line-height: 40px;
}

.post-hero__meta .elementor-post-info__terms-list {
  flex: 1 1 14rem;
  font-size: 0;
  min-width: 0;
}

.post-hero__meta .elementor-post-info__terms-list-item {
  border: 1px solid rgb(242 237 226 / 35%);
  border-radius: 999px;
  color: var(--article-fg);
  display: inline-block;
  font-weight: 500;
  line-height: 1;
  margin-inline-end: 6px;
  padding: 7px 14px;
  white-space: nowrap;
}

.post-hero__meta .elementor-post-info__terms-list-item:hover {
  background-color: var(--color-warm-white);
  color: var(--color-midnight-navy);
}

/* stacked at every width: author, date, category */
.post-hero__meta .elementor-icon-list-items {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}

/* the byline reads as a name, the rest as details */
.post-hero__meta .elementor-post-info__item--type-author {
  color: var(--article-fg);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}

.post-hero__title .elementor-heading-title {
  color: var(--article-fg);
  font-family: var(--font-serif);
  font-size: 48px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

/* Subhead (HEWEB-761): a Paragraph block with the "Subhead" style as the first thing in a post
   shows under the title in the header ([heweb_subhead] in the header template) and is left out of
   the body. A post without one shows nothing and leaves no gap: the widget hides itself when the
   shortcode returns nothing. A subhead anywhere else in the body reads as a lead-in line. */
.post-hero__subhead p {
  color: var(--article-fg);
  font-family: var(--font-sans);
  font-size: var(--lead-size);
  line-height: var(--lead-leading);
  margin: 0;
  max-width: 680px;
  opacity: 0.82;
}

.post-hero__subhead:not(:has(p)) {
  display: none;
}

/* ── Bands ── */
.post-body.e-con {
  gap: 0;
  padding: 0;
}

.article-section {
  background-color: var(--article-bg);
  color: var(--article-fg);
  padding: calc(var(--section-py) / 2) var(--section-px);
}


.article-section__inner {
  /* a side quote or aside box floats into the margin; the section must contain it, or a float at
     the end of a section hangs into the next band (Emily, HEWEB-761) */
  display: flow-root;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  margin-inline: auto;
  max-width: 680px;
}

.article-section__inner > :first-child {
  margin-block-start: 0;
}

.article-section__inner > :last-child {
  margin-block-end: 0;
}

.post-content .article-section__inner :is(p, ul, ol) {
  color: var(--article-fg);
  font-size: 18px;
  line-height: 1.55;
  margin-block: 0 0.9em;
}

.post-content .article-section__inner li {
  margin-block-end: 0.3em;
}

/* Orange square bullets, as in page content (brand kit .accordion-item__bullet) */
.article-section__inner ul {
  list-style: none;
  padding-left: 0;
}

.article-section__inner ul > li {
  padding-left: 24px;
  position: relative;
}

.article-section__inner ul > li::before {
  background-color: var(--color-warm-orange);
  border-radius: 2px;
  content: "";
  height: 8px;
  left: 2px;
  position: absolute;
  top: calc(0.5lh - 4px);
  width: 8px;
}

/* Numbered lists: the same 28px of text indent the bullets have, with the number
   drawn by the browser so start, reversed and value on the list still work and
   the list stays a list for screen readers (HEWEB-761 QA: ordered lists were
   indented 40px, further than bulleted ones) */
.article-section__inner ol {
  padding-left: 28px;
}

.article-section__inner ol > li::marker {
  font-weight: 600;
}

.post-content .article-section__inner h2 {
  color: var(--article-fg);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  margin-block: 0 24px;
  text-wrap: pretty;
}

.post-content .article-section__inner :is(h3, h4) {
  color: var(--article-fg);
  font-family: var(--font-sans);
  font-size: 23px;
  font-variation-settings: normal;
  font-weight: 600;
  line-height: 1.3;
  margin-block: 1.8em 0.6em;
}

.post-content .article-section__inner a {
  color: var(--article-fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-warm-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:where(.post-content) .article-section__inner a:hover {
  text-decoration-thickness: 2px;
}

/* drop cap on the opening paragraph */
:where(.article-section:first-child) .article-section__inner > p:first-child::first-letter {
  color: var(--article-fg);
  float: left;
  font-family: var(--font-serif);
  font-size: 5.4em;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 0.82;
  margin: 0.06em 0.1em 0 0;
}

/* Images are reference, not decoration: in the column, plain, small caption */
.article-section__inner :where(figure, .wp-block-image) {
  margin: 40px 0;
}

.article-section__inner img {
  height: auto;
}

.post-content .article-section__inner figcaption {
  color: var(--article-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-block-start: 10px;
}

.post-content .article-section__inner hr {
  border: 0;
  border-top: 1px solid var(--article-rule);
  margin: 48px 0;
}

/* ── Callout 1: big centered pull quote (Pullquote block) ── */
.article-section__inner .wp-block-pullquote {
  border: 0;
  margin: 48px calc(50% - min(460px, 50vw - var(--section-px)));
  padding: 0;
  text-align: center;
}

.article-section__inner .wp-block-pullquote::before {
  background-color: var(--color-warm-orange);
  content: "";
  display: block;
  height: 8px;
  margin: 0 auto 28px;
  width: 64px;
}

.article-section__inner .wp-block-pullquote::after {
  background-color: var(--color-warm-orange);
  content: "";
  display: block;
  height: 8px;
  margin: 28px auto 0;
  width: 64px;
}

.article-section__inner .wp-block-pullquote blockquote {
  border: 0;
  margin: 0;
  padding: 0;
}

:where(.post-content) .article-section__inner .wp-block-pullquote p {
  font-family: var(--font-serif);
  font-size: 40px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.article-section__inner :is(.wp-block-pullquote, .wp-block-quote) cite {
  color: var(--article-muted);
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-block-start: 20px;
  text-transform: uppercase;
}

/* ── Callout 2: side quote (Quote block, style "Side quote") ──
   Hangs into the left margin with ruled lines, text wraps beside it */
.article-section__inner .wp-block-quote {
  border-left: 3px solid var(--color-warm-orange);
  margin: 40px 0;
  padding: 0 0 0 24px;
}

.article-section__inner .wp-block-quote:is(.is-style-side, .is-style-side-right) {
  border: 0;
  padding: 0;
}

.article-section__inner :is(.is-style-side, .is-style-side-right)::before {
  background-color: var(--color-warm-orange);
  content: "";
  display: block;
  height: 16px;
  margin-block-end: 18px;
  width: 64px;
}

/* a rule under each line that stops at its last character */
:where(.post-content) .article-section__inner :is(.is-style-side, .is-style-side-right) p {
  text-decoration: underline 1px var(--article-rule);
  text-underline-offset: 9px;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  margin: 0;
}

/* ── Callout 3: aside box (Group block, style "Aside box") ── */
.article-section__inner .wp-block-group:is(.is-style-aside, .is-style-aside-left) {
  background-color: var(--article-card);
  border-radius: 8px;
  margin: 40px 0;
  padding: 28px 30px;
}

:where(.post-content) .article-section__inner :is(.is-style-aside, .is-style-aside-left) :is(p, ul, ol, li) {
  font-size: 16px;
  line-height: 1.65;
}

:where(.post-content .article-section__inner) :is(.is-style-aside, .is-style-aside-left) :is(h2, h3, h4):first-child {
  color: var(--article-fg);
  font-family: var(--font-sans);
  font-size: 20px;
  font-variation-settings: normal;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 14px;
}

/* A subhead that is not the first block stays in the body as a lead-in line (see Subhead above) */
.article-section__inner p.is-style-subhead {
  font-size: var(--lead-size);
  font-weight: 500;
  line-height: var(--lead-leading);
  margin-block: 0 24px;
}

/* ── After the content: author block (white), related posts (cream) ── */
.post-author.e-con,
.post-related.e-con {
  background-color: var(--article-bg);
  padding: calc(var(--section-py) / 2) var(--section-px);
}

.post-closing__author.e-con {
  gap: 24px;
  margin-inline: auto;
  max-width: 680px;
  padding: 0;
}

/* Author photos share one frame, a rounded square (HEWEB-759). A circle cut
   the corners off the Human Element mark, which is itself a rounded square;
   22% is close to the mark's own corner radius (11 of 44). Elementor's
   `.elementor-posts .elementor-post__avatar img` sets 50%. */
:root {
  --avatar-radius: 22%;
}

.archive-grid .elementor-post__avatar img,
.post-author .elementor-author-box__avatar img {
  background-color: var(--color-white);
  border-radius: var(--avatar-radius);
}

.post-author .elementor-author-box__avatar img {
  height: 88px;
  width: 88px;
}

.post-author .elementor-author-box__name {
  color: var(--article-fg);
  font-family: var(--font-serif);
  font-size: 24px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
}

.post-author .elementor-author-box__bio {
  color: var(--article-muted);
  font-size: 16px;
  line-height: 1.65;
}

.post-author .elementor-author-box__button.elementor-button {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--article-fg);
  font-size: 15px;
  font-weight: 600;
  margin-block-start: 12px;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-warm-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.post-author .elementor-author-box__button:where(.elementor-button:hover) {
  text-decoration-thickness: 2px;
}

.post-closing__share.e-con {
  align-items: center;
  border-top: 1px solid var(--article-rule);
  flex-direction: row;
  gap: 16px;
  padding: 24px 0 0;
}

.post-closing__share-label .elementor-heading-title {
  color: var(--article-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.post-author .elementor-share-btn {
  color: var(--article-fg);
}

.post-related.e-con {
  gap: 40px;
}

.post-related__h2 .elementor-heading-title {
  color: var(--article-fg);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
}

.post-related__grid .elementor-posts-container {
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.post-related__grid .elementor-post {
  background-color: var(--article-card);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.post-related__grid .elementor-post__text {
  display: grid;
  flex: 1;
  grid-template-rows: auto 1fr auto;
  padding: 24px 28px 28px;
  row-gap: 12px;
}

.post-related__grid .elementor-post__title a {
  color: var(--article-fg);
  font-family: var(--font-serif);
  font-size: 20px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 1.3;
}

.post-related__grid .elementor-post__meta-data {
  color: var(--article-muted);
  font-size: 14px;
  margin-block-start: 12px;
}

/* =============================================================
   ARCHIVE HEADER (HEWEB-742): archive template 22275, used by /blog/,
   categories, tags and authors. Navy band of Elementor widgets:
     .archive-hero                       section (Full Width)
       .archive-hero__overline           Heading (p)
       .archive-hero__title              Archive Title (h1): the posts page's
                                         title on /blog/, the term or author
       .archive-hero__label              Heading (p): "Browse by topic"
       .archive-topics                   container (Full)
         .archive-topics__all            Heading (span), linked to /blog/
         .archive-topics__list           WordPress Categories widget
   ============================================================= */
.archive-hero.e-con {
  background-color: var(--color-midnight-navy);
  gap: 20px;
  padding: 88px var(--section-px) 64px;
}

/* Blog archive: the title on the left, the topic chips on the right, stacked
   below 1024px (HEWEB-759) */
.archive-hero__split.e-con {
  align-items: center;
  flex-direction: row;
  gap: 64px;
  justify-content: space-between;
  padding: 0;
}

.archive-hero__intro.e-con {
  flex: 1 1 0;
  gap: 20px;
  padding: 0;
}

.archive-hero__filters.e-con {
  --chip-font: 14px;
  --chip-px: 15px;
  --chip-py: 9px;

  border-inline-start: 1px solid rgb(242 237 226 / 20%);
  flex: 1 1 0;
  gap: 16px;
  padding: 0 0 0 48px;
}

.archive-hero__split .archive-hero__label.elementor-widget {
  padding-block-start: 0;
}

.archive-hero__overline .elementor-heading-title {
  color: var(--color-warm-orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: 2.7px;
  line-height: 1.5; /* was 15px: a wrapped overline had no leading (HEWEB-759) */
  text-transform: uppercase;
}

.archive-hero__title .elementor-heading-title {
  color: var(--color-warm-white);
  font-family: var(--font-serif);
  font-size: 64px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 1.05;
}

.archive-hero__label.elementor-widget {
  padding-block-start: 16px;
}

.archive-hero__label .elementor-heading-title {
  color: var(--label-ink, rgb(242 237 226 / 70%));
  font-family: var(--font-sans);
  font-size: 13px;
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}

.archive-topics.e-con {
  flex-flow: row wrap;
  gap: 10px;
  padding: 0;
}

/* The Categories widget's wrappers step aside so its chips wrap in one row
   with "All"; its default "Categories" title is hidden (the label above
   names the chips) */
.archive-topics__list,
.archive-topics__list :is(.elementor-widget-container, nav, ul) {
  display: contents;
}

.archive-topics__list h5 {
  display: none;
}

.archive-topics__list li {
  list-style: none;
}

.archive-topics__all .elementor-heading-title {
  color: var(--chip-ink, var(--color-warm-white));
}

/* Elementor's heading link rule (0,3,1) makes the link inherit, so the
   active "All" color is set on the heading itself */
:where(body.blog) .archive-topics__all .elementor-heading-title {
  color: var(--color-midnight-navy);
}

.archive-topics__all .elementor-heading-title a,
.archive-topics__list li a {
  border: 1px solid var(--chip-line, rgb(242 237 226 / 30%));
  border-radius: 999px;
  color: var(--chip-ink, var(--color-warm-white));
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--chip-font, 15px);
  font-variation-settings: normal;
  font-weight: 500;
  line-height: 1;
  padding: var(--chip-py, 11px) var(--chip-px, 18px);
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.archive-topics__all :where(.elementor-heading-title) a:is(:hover, :focus-visible),
.archive-topics__list li a:is(:hover, :focus-visible) {
  background-color: var(--chip-ink, var(--color-warm-white));
  color: var(--chip-hover-ink, var(--color-midnight-navy));
}

/* Elementor's heading link rule makes the "All" link inherit the heading's
   color, so on hover its text stayed the chip color on a chip-colored fill
   (navy on navy on the cream band, cream on cream in the blog header) */
.archive-topics__all :where(.elementor-heading-title):has(> a:is(:hover, :focus-visible)) {
  color: var(--chip-hover-ink, var(--color-midnight-navy));
}

/* current topic: "All" on /blog/ (body.blog), the category's chip elsewhere */
:where(body.blog) .archive-topics__all .elementor-heading-title a,
.archive-topics__list li:where(.current-cat) a {
  background-color: var(--color-warm-orange);
  border-color: var(--color-warm-orange);
  color: var(--color-midnight-navy);
}

/* Text-only hero (HEWEB-759, the search pages): no photo, so the navy is the
   whole band and the text column takes the width */
.hero--text-only.e-con {
  height: auto;
  min-height: 0;
  padding: 88px var(--section-px) 72px;
}

.hero--text-only .hero__text.e-con {
  flex: 1 1 auto;
  max-width: 900px;
  padding: 0;
}

/* the column's own padding (sized for the photo layout) would double the
   hero's */
:where(.hero--text-only) .hero__text.e-con > .e-con-inner {
  padding: 0;
}

/* Search box in the archive-style headers (the /site-search/ page and the
   results template, HEWEB-759): a SearchWP form. The row draws the pill; the
   input sits inside it. */
.hero__text .searchwp-form {
  max-width: 640px;
}

.hero__text .searchwp-form .swp-flex--row {
  background-color: var(--color-warm-white);
  border: 2px solid transparent;
  border-radius: 999px;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* hover: the outline hints; focus inside: the orange ring the site's other
   fields use, so keyboard focus is unmistakable */
.hero__text .searchwp-form .swp-flex--row:where(:hover) {
  border-color: rgb(249 176 70 / 50%);
}

.hero__text .searchwp-form .swp-flex--row:where(:focus-within) {
  border-color: var(--color-warm-orange);
  box-shadow: 0 0 0 4px rgb(249 176 70 / 25%);
}

.hero__text .searchwp-form .searchwp-form-input-container {
  flex: 1 1 auto;
  min-width: 0;
}

.hero__text .searchwp-form .swp-input--search {
  background-image: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-midnight-navy);
  font-family: var(--font-sans);
  font-size: 17px;
  height: 46px;
  outline: 0;
  padding: 0 20px;
  width: 100%;
}

/* SearchWP draws its own light magnifier inside the field (removed above) and
   Chrome and Safari add a blue clear X; the button is the search control, and
   the X (worth keeping) is drawn in the theme's navy (HEWEB-759) */
.searchwp-form .swp-input--search::-webkit-search-cancel-button {
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231D2F38' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  height: 14px;
  margin-inline-end: 4px;
  opacity: 0.7;
  width: 14px;
}

/* A saved-search suggestion or autofill paints a pale blue box that ignores
   the pill; repaint it in the pill's own color */
.searchwp-form .swp-input--search:-webkit-autofill,
.searchwp-form .swp-input--search:where(:-webkit-autofill:hover, :-webkit-autofill:focus) {
  border-radius: 999px;
  box-shadow: 0 0 0 100px var(--color-warm-white) inset;
  caret-color: var(--color-midnight-navy);
  -webkit-text-fill-color: var(--color-midnight-navy);
}

.searchwp-form .swp-input--search::placeholder {
  color: rgb(29 47 56 / 60%);
  opacity: 1;
}

.hero__text .searchwp-form .swp-button {
  background-color: var(--color-warm-orange);
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--color-midnight-navy);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  height: 46px;
  padding: 0 28px;
  transition: background-color 0.25s, color 0.25s;
}

/* the header's Contact Us hover: navy fill, orange text */
.hero__text .searchwp-form .swp-button:where(:hover, :focus-visible) {
  background-color: var(--color-midnight-navy);
  color: var(--color-warm-orange);
}

.searchwp-form .swp-button:focus-visible {
  outline: 2px solid var(--color-midnight-navy);
  outline-offset: 2px;
}

/* Page results (no author, no photo) have no avatar to show */
.archive-grid .type-page .elementor-post__avatar {
  display: none;
}

/* Podcast (HEWEB-759): the Podcast category. Its chip leads the topic list,
   right after All, with a microphone; its cards carry a badge on the photo,
   top-right (the featured images carry the logo top-left).
   Nothing here is set per post: tagging an episode with the Podcast category
   is all it takes. */
.archive-topics__all {
  order: -2;
}

.archive-topics__list :where(li:has(> a[href*="/category/podcast"])) {
  order: -1;
}

.archive-topics__list :where(li:has(> a[href*="/category/podcast"])) > a::before {
  background-color: currentcolor;
  content: "";
  display: inline-block;
  height: 14px;
  margin-inline-end: 8px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -2px;
  width: 14px;
}

/* The generated featured images carry the logo top-left: 20% of the image wide,
   inset 7.25% from the top and left, 6.06% of the width tall. The badge sits on
   the same line on the right: mirrored side inset, no taller than the logo, and
   centered on the logo's middle line, 10cqw down. Two logo placements exist: the images
   on staging today (generated earlier) have the logo's middle at 9.72 of the card width
   (ink 6.7 to 12.8), and a fresh render from featured-image-generator has it at 10.25
   (ink 7.25 to 13.25; logo at top 58px, 160px wide on the 800 x 550 canvas). 10 stays
   within about 1px of both on cards 300 to 480px wide, so the badge looks centered
   before and after the images are regenerated. The badge moves up by
   half its own height (translateY -50%), so the clamped height can't push it off
   center (Emily, 742/759/760, Oct 5 and 6; 742 again on Oct 7). Container units keep
   it in step with the logo at every card width. */
:where(.archive-grid, .post-related__grid) [class~="category-podcast"] [class="elementor-post__thumbnail__link"] {
  container-type: inline-size;
  position: relative;
}

:where(.archive-grid, .post-related__grid) [class~="category-podcast"] [class="elementor-post__thumbnail__link"]::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231D2F38' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") no-repeat 12px 50% / 14px 14px, var(--color-warm-orange);
  border-radius: 999px;
  color: var(--color-midnight-navy);
  content: "Podcast";
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  inset: 10cqw 7.25cqw auto auto;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 0 12px 0 32px;
  position: absolute;
  text-transform: uppercase;
  transform: translateY(-50%);
  z-index: 2;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 6.06cqw;
  max-height: 22px;
  min-height: 18px;
}

/* Topics band (HEWEB-759, /site-search/): the blog's topic chips on a cream
   band under the hero, in the navy-on-cream colors */
.topics-band.e-con {
  --chip-hover-ink: var(--color-warm-white);
  --chip-ink: var(--color-midnight-navy);
  --chip-line: rgb(29 47 56 / 25%);
  --label-ink: rgb(29 47 56 / 70%);

  background-color: var(--color-warm-white);
  gap: 20px;
  padding: var(--section-py) var(--section-px);
}

/* Cards with no featured image, or whose image file is missing (HEWEB-759):
   mostly pages in search results.
   A navy panel the size of a photo (the cards skin's 100 / 66, 2 / 1 on
   phones, and the 25px under a photo), with the brand mark and the kind of
   result, so the card doesn't read as broken. The mark is the last five paths
   of the brand kit's nav-logo.svg (the icon, unchanged), with the navy strokes
   swapped to warm white, the kit's reversed colors. Any card in these grids gets
   it; nothing is set per post. */
:where(.archive-grid, .post-related__grid) .elementor-post__card:not(:has(.elementor-post__thumbnail))::before {
  aspect-ratio: 800 / 550;
  background: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.5597 6.32055C42.5597 4.79374 42.2403 4.13354 41.9198 3.81588C41.5994 3.49822 40.9334 3.1815 39.3931 3.1815H30.7491C29.2088 3.18151 28.5428 3.49822 28.2224 3.81588C27.902 4.13353 27.5825 4.79371 27.5824 6.32055V14.8894C27.5824 16.4163 27.902 17.0765 28.2224 17.3942C28.5429 17.7118 29.2089 18.0285 30.7491 18.0285H39.3931C40.9334 18.0285 41.5994 17.7119 41.9198 17.3942C42.2403 17.0765 42.5597 16.4163 42.5597 14.8894V6.32055ZM45.7691 14.8894C45.7691 16.735 45.4039 18.4397 44.1892 19.6439C42.9745 20.848 41.2548 21.21 39.3931 21.21H30.7491C28.8874 21.21 27.1677 20.848 25.953 19.6439C24.7383 18.4397 24.373 16.735 24.373 14.8894V6.32055C24.373 4.47505 24.7383 2.77036 25.953 1.56621C27.1677 0.362052 28.8874 2.53951e-06 30.7491 0H39.3931C41.2548 0 42.9745 0.362048 44.1892 1.56621C45.4039 2.77036 45.7691 4.47507 45.7691 6.32055V14.8894Z' fill='%23F2EDE2'/%3E%3Cpath d='M18.0285 5.7961C18.0285 4.50422 17.7333 4.00285 17.4624 3.76194C17.1435 3.47836 16.4514 3.18466 14.8894 3.18466H6.32055C4.75857 3.18466 4.06644 3.47836 3.74759 3.76194C3.47671 4.00285 3.1815 4.50422 3.1815 5.7961V15.4137C3.1815 16.7195 3.47826 17.2172 3.74529 17.4538C4.06235 17.7347 4.75293 18.0252 6.32055 18.0252H14.8894L14.8995 18.0252C16.4606 18.035 17.1493 17.7438 17.4647 17.4644C17.7327 17.2269 18.0285 16.728 18.0285 15.435V5.7961ZM21.21 15.435C21.21 17.1355 20.827 18.7385 19.5733 19.8492C18.3691 20.916 16.6968 21.22 14.8894 21.2097L6.32055 21.2098C4.51586 21.2098 2.8415 20.9058 1.63674 19.8385C0.381963 18.727 0 17.1228 0 15.4137V5.7961C0 4.09435 0.383509 2.49385 1.63444 1.38128C2.8374 0.311387 4.51019 2.3378e-06 6.32055 0H14.8894C16.6998 0 18.3726 0.311383 19.5756 1.38128C20.8265 2.49385 21.21 4.09435 21.21 5.7961V15.435Z' fill='%23F2EDE2'/%3E%3Cpath d='M18.0285 30.7479C18.0285 29.2077 17.7118 28.5417 17.3942 28.2212C17.0765 27.9008 16.4163 27.5813 14.8894 27.5813H6.32055C4.79371 27.5813 4.13353 27.9008 3.81588 28.2212C3.49822 28.5417 3.18151 29.2076 3.1815 30.7479V39.3919C3.1815 40.9322 3.49822 41.5982 3.81588 41.9186C4.13354 42.2391 4.79374 42.5585 6.32055 42.5585H14.8894C16.4163 42.5585 17.0765 42.2391 17.3942 41.9186C17.7119 41.5982 18.0285 40.9322 18.0285 39.3919V30.7479ZM21.21 39.3919C21.21 41.2536 20.848 42.9733 19.6439 44.188C18.4397 45.4028 16.735 45.7679 14.8894 45.7679H6.32055C4.47507 45.7679 2.77036 45.4028 1.56621 44.188C0.362048 42.9733 0 41.2536 0 39.3919V30.7479C2.53964e-06 28.8862 0.362052 27.1665 1.56621 25.9518C2.77036 24.7371 4.47505 24.3719 6.32055 24.3719H14.8894C16.735 24.3719 18.4397 24.7371 19.6439 25.9518C20.848 27.1665 21.21 28.8862 21.21 30.7479V39.3919Z' fill='%23F2EDE2'/%3E%3Cpath d='M41.0059 32.9326C41.8896 32.9326 42.606 33.6407 42.606 34.5141C42.606 35.3875 41.8896 36.0955 41.0059 36.0955H28.2055C27.3218 36.0955 26.6055 35.3875 26.6055 34.5141C26.6055 33.6407 27.3218 32.9326 28.2055 32.9326H41.0059Z' fill='%23F9B046'/%3E%3Cpath d='M32.9314 41.009V28.2085C32.9314 27.3248 33.6394 26.6085 34.5128 26.6085C35.3862 26.6085 36.0943 27.3248 36.0943 28.2085V41.009C36.0943 41.8926 35.3862 42.609 34.5128 42.609C33.6394 42.609 32.9314 41.8926 32.9314 41.009Z' fill='%23F9B046'/%3E%3C/svg%3E") no-repeat center 42% / 22% auto, var(--color-midnight-navy);
  box-sizing: border-box;
  content: "";
  display: flex;
  flex: none;
  margin-bottom: 25px;
  width: 100%;
}

/* The panel carries no label: Emily asked to turn the page type off (759, Oct 5) */

/* Author archive (template 24196, HEWEB-747): photo beside the overline,
   name and bio */
.archive-author.e-con {
  align-items: center;
  flex-direction: row;
  gap: 40px;
  padding: 0;
}

.archive-author__text.e-con {
  gap: 20px;
  padding: 0;
}

.archive-author__photo {
  flex: none;
}

.archive-author__photo img {
  aspect-ratio: 1;
  border-radius: var(--avatar-radius);
  height: 128px;
  object-fit: cover;
  width: 128px;
}

/* the Author Info tag outputs bare text, not a paragraph */
.archive-author__bio .elementor-widget-container,
.archive-author__bio p {
  color: rgb(242 237 226 / 82%);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

/* The grid lines up with the header's gutters (the widget's own 50px
   padding and cream fill are cleared in the template recipe) */
.archive-grid.e-con {
  background-color: var(--color-warm-white);
  padding: 56px var(--section-px) var(--section-py);
}

/* Cards: title at the top, excerpt at the bottom, ending in "… Read more"
   on the same line. The card-excerpt script (an HTML widget in the archive
   and single-post templates) moves Read more into the excerpt and drops
   whole words until the text fits in three lines; without it the card shows
   the widget's 30-word excerpt with Read more after it. */
.archive-grid .elementor-post__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.archive-grid .elementor-post__text {
  display: grid;
  flex: 1;
  grid-template-rows: 1fr auto auto;
  row-gap: 20px;
}

.archive-grid .elementor-post__title,
.post-related__grid .elementor-post__title {
  align-self: start;
  margin: 0;
}

.archive-grid .elementor-post__excerpt p,
.post-related__grid .elementor-post__excerpt p {
  color: rgb(29 47 56 / 78%);
  display: inline;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.archive-grid .elementor-post__excerpt p::after,
.post-related__grid .elementor-post__excerpt p::after {
  content: "… ";
}

.archive-grid .elementor-post .elementor-post__read-more,
.post-related__grid .elementor-post .elementor-post__read-more {
  color: var(--color-midnight-navy);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-color: var(--color-warm-orange);
  text-decoration-thickness: 1px;
  text-transform: none;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.archive-grid :where(.elementor-post) .elementor-post__read-more:hover,
.post-related__grid :where(.elementor-post) .elementor-post__read-more:hover {
  text-decoration-thickness: 2px;
}

.archive-grid .elementor-post__text.is-fitted {
  grid-template-rows: 1fr auto;
}

/* the script's container takes no space */
.card-excerpt-script.e-con {
  display: none;
}

/* Pagination sits halfway between the last row of cards and the footer */
.archive-grid .elementor-pagination {
  margin-block-start: var(--section-py);
}

/* Wide screens: side quotes and aside boxes hang 120px into the margin,
   on the side the author picked in the Styles panel */
@media (width >= 1280px) {
  /* Only when real content follows it in its section. With no text after it there is nothing to
     sit beside, so it would hang alone in the margin and leave an empty gap (Emily, HEWEB-761).
     It stays in the text column, like on narrower screens. :empty only sees elements with no
     content at all; blank paragraphs (&nbsp;) and empty quotes left at the end of a section are
     removed in PHP (heweb_trim_trailing_empty_blocks), so they do not count either. */
  .article-section__inner :is(.wp-block-quote.is-style-side, .wp-block-group.is-style-aside-left):where(:has(~ :not(:empty))) {
    float: left;
    margin: 8px 40px 24px -120px;
    width: 320px;
  }

  .article-section__inner :is(.wp-block-quote.is-style-side-right, .wp-block-group.is-style-aside):where(:has(~ :not(:empty))) {
    float: right;
    margin: 8px -120px 24px 40px;
    width: 320px;
  }
}

@media (width < 1024px) {
  .post-hero.e-con {
    flex-direction: column;
  }

  .post-hero__text.e-con,
  .post-hero__image.e-con {
    width: 100%;
  }

  .post-hero__text.e-con {
    padding: var(--section-py) var(--section-px) 40px;
  }

  .post-hero__image.e-con {
    padding: 0 var(--section-px) var(--section-py);
  }

  .post-hero__title .elementor-heading-title {
    font-size: 44px;
  }

  .post-content .article-section__inner h2 {
    font-size: 32px;
  }

  :where(.post-content) .article-section__inner .wp-block-pullquote p {
    font-size: 30px;
  }

  .post-related__grid .elementor-posts-container {
    grid-template-columns: 1fr;
  }

  .archive-hero__title .elementor-heading-title {
    font-size: 44px;
  }

  .archive-hero__split.e-con {
    align-items: stretch;
    flex-direction: column;
    gap: 32px;
  }

  .archive-hero__filters.e-con {
    border-block-start: 1px solid rgb(242 237 226 / 20%);
    border-inline-start: 0;
    padding: 32px 0 0;
  }

  /* Topic chips: one swipeable row instead of a ten-row wall. The row runs to
     the screen edge so a cut-off chip shows there is more. */
  .archive-hero__filters .archive-topics.e-con,
  .topics-band .archive-topics.e-con {
    flex-wrap: nowrap;
    margin-inline: calc(var(--section-px) * -1);
    overflow-x: auto;
    padding: 4px var(--section-px);
    scrollbar-width: none;
    width: calc(100% + var(--section-px) * 2);
  }

  .archive-hero__filters .archive-topics.e-con > *,
  .archive-hero__filters .archive-topics__list li,
  .topics-band .archive-topics.e-con > *,
  .topics-band .archive-topics__list li {
    flex: none;
  }

  .archive-topics.e-con::-webkit-scrollbar {
    display: none;
  }

  .archive-author.e-con {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
}

@media (width < 768px) {
  .post-hero__title .elementor-heading-title {
    font-size: 36px;
  }

  .post-content .article-section__inner :is(p, ul, ol) {
    font-size: 18px;
  }

  :where(.article-section:first-child) .article-section__inner > p:first-child::first-letter {
    font-size: 4.2em;
  }
}

/* =============================================================
   SOCIAL ICONS (HEWEB-742): the brand kit's glyphs (brand-kit.html
   .footer-social) in a 40px outlined circle, for the footer's Social Icons
   widget and the post's Share Buttons. Each widget's own SVG is hidden and
   the kit glyph is drawn as a mask in the text color, so hover and the
   light/dark context only change colors. The kit has no X glyph; X uses
   the standard mark at the same size.
   ============================================================= */
:where([data-elementor-type="footer"]) .footer-social-row .elementor-social-icon,
.post-closing__share .elementor-share-btn__icon {
  align-items: center;
  border: 1px solid var(--social-ring, rgb(242 237 226 / 30%));
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
}

:where([data-elementor-type="footer"]) .footer-social-row .elementor-social-icon svg,
.post-closing__share .elementor-share-btn__icon svg {
  display: none;
}

:where([data-elementor-type="footer"]) .footer-social-row .elementor-social-icon::before,
.post-closing__share .elementor-share-btn__icon::before {
  background-color: var(--social-glyph, rgb(242 237 226 / 74%));
  content: "";
  height: 18px;
  mask: var(--social-mask) center / contain no-repeat;
  transition: background-color 0.2s;
  width: 18px;
}

:where([data-elementor-type="footer"]) .footer-social-row :where(.elementor-social-icon:hover)::before {
  background-color: var(--color-warm-white);
}

.elementor-social-icon-linkedin,
[class~="elementor-share-btn_linkedin"] {
  --social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11 11 18 18'%3E%3Cpath d='M14.735 13.625C14.735 14.66 13.9025 15.5 12.875 15.5C11.8475 15.5 11 14.66 11 13.625C11 12.59 11.84 11.75 12.875 11.75C13.91 11.75 14.735 12.59 14.735 13.625ZM11.1875 17H14.5625V27.125H11.1875V17ZM16.4375 17H19.67V18.3875H19.715C20.165 17.5325 21.2675 16.6325 22.91 16.6325C26.33 16.6325 26.96 18.8825 26.96 21.8075V27.125H23.585V22.415C23.585 21.29 23.5625 19.85 22.025 19.85C20.4575 19.85 20.2175 21.0725 20.2175 22.3325V27.125H16.8425V17H16.4375Z'/%3E%3C/svg%3E");
}

.elementor-social-icon-facebook,
.elementor-social-icon-facebook-f,
[class~="elementor-share-btn_facebook"] {
  --social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11 11 18 18'%3E%3Cpath d='M29 20.0525C29 15.05 24.9725 11 20 11C15.0275 11 11 15.05 11 20.0525C11 24.575 14.2925 28.325 18.5975 29V22.67H16.31V20.0525H18.5975V18.0575C18.5975 15.7925 19.94 14.54 21.995 14.54C22.9775 14.54 24.005 14.72 24.005 14.72V16.9475H22.88C21.7625 16.9475 21.41 17.645 21.41 18.365V20.0525H23.9L23.5025 22.67H21.41V29C25.7075 28.325 29 24.575 29 20.0525Z'/%3E%3C/svg%3E");
}

.elementor-social-icon-instagram {
  --social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11 11 18 18'%3E%3Cpath d='M20.0001 12.6201C22.4001 12.6201 22.6851 12.6276 23.6376 12.6726C24.5151 12.7101 24.9876 12.8601 25.3101 12.9801C25.7301 13.1451 26.0301 13.3401 26.3451 13.6551C26.6601 13.9701 26.8551 14.2701 27.0201 14.6901C27.1401 15.0051 27.2901 15.4851 27.3276 16.3626C27.3726 17.3151 27.3801 17.6001 27.3801 20.0001C27.3801 22.4001 27.3726 22.6851 27.3276 23.6376C27.2901 24.5151 27.1401 24.9876 27.0201 25.3101C26.8551 25.7301 26.6601 26.0301 26.3451 26.3451C26.0301 26.6601 25.7301 26.8551 25.3101 27.0201C24.9951 27.1401 24.5151 27.2901 23.6376 27.3276C22.6851 27.3726 22.4001 27.3801 20.0001 27.3801C17.6001 27.3801 17.3151 27.3726 16.3626 27.3276C15.4851 27.2901 15.0126 27.1401 14.6901 27.0201C14.2701 26.8551 13.9701 26.6601 13.6551 26.3451C13.3401 26.0301 13.1451 25.7301 12.9801 25.3101C12.8601 24.9951 12.7101 24.5151 12.6726 23.6376C12.6276 22.6851 12.6201 22.4001 12.6201 20.0001C12.6201 17.6001 12.6276 17.3151 12.6726 16.3626C12.7101 15.4851 12.8601 15.0126 12.9801 14.6901C13.1451 14.2701 13.3401 13.9701 13.6551 13.6551C13.9701 13.3401 14.2701 13.1451 14.6901 12.9801C15.0051 12.8601 15.4851 12.7101 16.3626 12.6726C17.3151 12.6276 17.6001 12.6201 20.0001 12.6201ZM20.0001 15.3801C19.0864 15.3801 18.1931 15.6511 17.4334 16.1587C16.6736 16.6664 16.0815 17.3879 15.7318 18.2321C15.3821 19.0763 15.2906 20.0052 15.4689 20.9014C15.6472 21.7976 16.0872 22.6208 16.7333 23.267C17.3794 23.9131 18.2026 24.3531 19.0988 24.5313C19.995 24.7096 20.9239 24.6181 21.7681 24.2684C22.6123 23.9188 23.3339 23.3266 23.8415 22.5669C24.3492 21.8071 24.6201 20.9139 24.6201 20.0001C24.6201 18.7748 24.1334 17.5997 23.267 16.7333C22.4005 15.8669 21.2254 15.3801 20.0001 15.3801ZM20.0001 23.0001C19.4068 23.0001 18.8268 22.8242 18.3334 22.4945C17.8401 22.1649 17.4555 21.6963 17.2285 21.1482C17.0014 20.6 16.942 19.9968 17.0578 19.4148C17.1735 18.8329 17.4592 18.2984 17.8788 17.8788C18.2984 17.4592 18.8329 17.1735 19.4148 17.0578C19.9968 16.942 20.6 17.0014 21.1482 17.2285C21.6963 17.4555 22.1649 17.8401 22.4945 18.3334C22.8242 18.8268 23.0001 19.4068 23.0001 20.0001C23.0001 20.7958 22.684 21.5588 22.1214 22.1214C21.5588 22.684 20.7958 23.0001 20.0001 23.0001ZM24.8001 15.2001C24.8001 15.4137 24.7368 15.6225 24.6181 15.8001C24.4994 15.9777 24.3308 16.1162 24.1334 16.1979C23.9361 16.2796 23.7189 16.301 23.5094 16.2594C23.2999 16.2177 23.1075 16.1148 22.9564 15.9638C22.8054 15.8128 22.7025 15.6203 22.6609 15.4108C22.6192 15.2013 22.6406 14.9842 22.7223 14.7868C22.8041 14.5895 22.9425 14.4208 23.1201 14.3021C23.2977 14.1835 23.5065 14.1201 23.7201 14.1201C24.0066 14.1201 24.2813 14.2339 24.4838 14.4364C24.6863 14.639 24.8001 14.9137 24.8001 15.2001Z'/%3E%3C/svg%3E");
}

[class~="elementor-share-btn_twitter"],
[class~="elementor-share-btn_x-twitter"] {
  --social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* on the white author block; the Share Buttons skin paints the icon with
   its own color variables, so those are cleared */
.post-closing__share {
  --e-share-buttons-primary-color: transparent;
  --e-share-buttons-secondary-color: var(--color-midnight-navy);
  --social-ring: rgb(29 47 56 / 25%);
  --social-glyph: rgb(29 47 56 / 80%);
}

.post-closing__share .elementor-share-btn {
  background-color: transparent;
  cursor: pointer;
  height: 40px;
  width: 40px;
}

.post-closing__share .elementor-share-btn__icon {
  background-color: transparent;
  flex: none;
  height: 40px;
  width: 40px;
}

.post-closing__share :where(.elementor-share-btn:hover) .elementor-share-btn__icon::before {
  background-color: var(--color-midnight-navy);
}

/* Browsers without CSS round() (before Chrome 125, Safari 15.4,
   Firefox 118): a custom property that uses an unsupported function computes
   to invalid, and every var(--section-px) would fall back to 0. The same
   gutters without the whole-pixel rounding (PR #18 review). */
@supports not (width: round(1.5px, 1px)) {
  @media (width > 1800px) {
    :root {
      --section-px: calc((100vw - var(--content-max)) / 2);
    }
  }

  @media (width <= 1800px) {
    :root {
      --section-px: clamp(50px, calc(12.887vw - 82px), 150px);
    }
  }

  @media (width < 1024px) {
    :root {
      --section-px: clamp(20px, calc(4.902vw + 2.35px), 40px);
    }
  }
}

/* stylelint-enable no-descending-specificity */

/* Centered sections (Emily, HEWEB-762): short text reads better centered over its images, as on
   the current site. Add the class in Elementor: `split-light--centered` on a split-light (Meet the
   Client), `alternating-label__row--centered` on a label row (Understanding the Problem, Results,
   Future Enhancements). The text sits in a 760px column, the images below it at full width. */
/* stylelint-disable-next-line no-descending-specificity */
.split-light--centered.e-con > .e-con-inner {
  align-items: center;
  flex-direction: column;
  gap: 56px;
}

.split-light--centered .split-light__text.e-con {
  flex: 0 0 auto;
  padding: 0;
  width: 100%;
}

.split-light--centered .split-light__text :is(p, ul, ol) {
  margin-inline: auto;
  max-width: 760px;
}

.split-light--centered .split-light__text p {
  text-align: center;
}

.split-light--centered .split-light__text :where(.elementor-heading-title) {
  text-align: center;
}

.split-light--centered .split-light__photo.e-con {
  align-self: stretch;
  flex: 0 0 auto;
  min-height: clamp(240px, 38vw, 560px);
  width: 100%;
}

.split-light--centered .split-light__photo--video.e-con {
  min-height: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.alternating-label__row--centered.e-con > .e-con-inner {
  gap: 48px 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.alternating-label__row--centered .alternating-label__label .elementor-heading-title {
  border-left: 0;
  font-family: var(--font-serif);
  font-size: 44px;
  font-variation-settings: var(--font-serif-axes);
  letter-spacing: normal;
  line-height: 50px;
  padding-left: 0;
  text-align: center;
  text-transform: none;
}

.alternating-label__row--centered .alternating-label__right.e-con {
  --gap: 48px;
  --row-gap: 48px;

  align-items: center;
  gap: 48px;
  width: 100%;
}

.alternating-label__row--centered .alternating-label__right :is(p, ul, ol) {
  margin-inline: auto;
  max-width: 760px;
}

.alternating-label__row--centered .alternating-label__right p {
  text-align: center;
}

/* A sub-heading inside a centered row (Solution: ChemPoint, Judson, NoIR, Roush) centers
   with the paragraph under it (Emily, HEWEB-762, Oct 22) */
.alternating-label__row--centered .alternating-label__right :is(h3, h4) {
  text-align: center;
}

.alternating-label__row--centered .case-gallery .elementor-widget-image {
  text-align: center;
}


@media (width <= 767px) {
  .alternating-label__row--centered .alternating-label__label .elementor-heading-title {
    font-size: 32px;
    line-height: 38px;
  }

  .alternating-label__row--centered .alternating-label__right.e-con {
    --gap: 32px;
    --row-gap: 32px;

    gap: 32px;
  }

  .split-light--centered.e-con > .e-con-inner {
    gap: 32px;
  }
}

/* Result cards in a centered Results row (Roush: five before and after numbers). Replaces a bulleted
   list under centered text, which read lopsided (Emily, HEWEB-762, Oct 22). Cards wrap and center,
   so an odd count (3 and 2) keeps its middle. Built in Elementor as a Full container "case-results"
   holding "case-results__item" containers, each with a heading "case-results__value" and a text
   widget "case-results__label". */
.case-results.e-con {
  --gap: 24px;

  align-items: stretch;
  flex-flow: row wrap;
  gap: 24px;
  justify-content: center;
  max-width: 1120px;
  padding: 0;
  width: 100%;
}

.case-results__item.e-con {
  --gap: 8px;

  align-items: center;
  background-color: var(--color-white);
  border: 1px solid rgb(29 47 56 / 10%);
  border-radius: 8px;
  flex: 0 1 calc((100% - 48px) / 3);
  gap: 8px;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
.case-results__value .elementor-heading-title {
  color: var(--color-midnight-navy);
  font-family: var(--font-serif);
  font-size: 44px;
  font-variation-settings: var(--font-serif-axes);
  font-weight: 600;
  line-height: 50px;
}

.case-results__arrow {
  color: var(--color-warm-orange);
}

.case-results__label.elementor-widget p {
  color: var(--section-fg-muted, rgb(29 47 56 / 78%));
  margin: 0;
  max-width: none;
  text-align: center;
}

@media (width <= 1023px) {
  .case-results__item.e-con {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (width <= 767px) {
  .case-results__item.e-con {
    flex-basis: 100%;
    padding: 24px;
  }

  .case-results__value .elementor-heading-title {
    font-size: 36px;
    line-height: 42px;
  }
}

/* Services accordion intro paragraph: the muted color its section sets (see the accordion rules) */
.services-accordion__inner .elementor-widget-text-editor p {
  color: var(--section-fg-muted);
}