/* ===============================================================
   TNMFlow (zurel) — custom theme layer
   ---------------------------------------------------------------
   Loaded AFTER bootstrap.min.css from the CDN. No build step:
   this is the only stylesheet we hand-write, so everything below
   is plain CSS with custom properties.

   HOW THIS FILE IS ORGANISED
   - Tokens first, then base, then shared pieces, then the things
     that use them. Nothing further down redefines something above
     it unless the comment says so.
   - Each block names the template that consumes it, so you can
     jump from a PHP partial to its styles and back.
   - Responsive overrides live DIRECTLY under the rule they change,
     never in a catch-all media query at the bottom. The one
     exception is section 12 (reduced motion), which is a single
     global opt-out.
   - Section surfaces, padding and background colours are owned by
     section 6 and set from the SCF "Design" tab via
     zurel_section_atts() in inc/sections.php. Do not set padding
     or background on a section from a component block.

   CONTENTS
      1. Design tokens
         1.1  Brand, surface and text colours
         1.2  Legacy aliases
         1.3  Type scale
         1.4  Bootstrap variable remap
      2. Base and Bootstrap overrides
         2.1  Body
         2.2  Headings and display scale
         2.3  Container width
         2.4  Spacing utilities (steps 6-8)
         2.5  Brand colour utilities
      3. Buttons
      4. Shared text helpers
      5. Shared components
         5.1  Eyebrow dots
         5.2  Hairline card
         5.3  Media frame
         5.4  Elevated card surface (grid / tile / blog cards)
         5.5  Step markers and the horizontal step row
         5.6  Filter toolbar — search + chips (grid and FAQ)
         5.7  Section head
      6. Section shell — padding, surfaces, decoration
      7. Sections (one block per template-parts/sections/*.php)
         7.1  Hero
         7.2  Page intro
         7.3  Logo strip
         7.4  Credibility / divided grid
         7.5  Flow
         7.6  Testimonial showcase
         7.7  Comparison
         7.8  Feature list
         7.9  Icon cards
         7.10 Icon tiles
         7.11 Icon rows
         7.12 Pricing
         7.13 Callout
         7.14 Prompt line
         7.15 Banner
         7.16 Tool band
         7.17 Rich text
         7.18 Pull quote
         7.19 FAQ
         7.20 Filterable grid + grid cards
         7.21 Resource cards
         7.22 Post cards
         7.23 Blog cards
         7.24 Subscribe
         7.25 Global CTA card
      8. Single post
      9. Site header and navigation
         9.1  Header shell
         9.2  Offcanvas panel (mobile)
         9.3  Desktop — unwind the offcanvas into a nav bar
         9.4  Mega menu
         9.5  Tabbed mega panel (Solutions)
     10. Breadcrumbs
     11. Footer
     12. Reduced motion
   =============================================================== */


/* ===============================================================
   1. DESIGN TOKENS
   ---------------------------------------------------------------
   Names mirror the Figma collection "T&M Website" so a design
   change maps to one line here. Contrast ratios are noted where
   a colour was adjusted away from Figma for accessibility.
   =============================================================== */
:root {

  /* ---- 1.1 Brand, surface and text colours ---- */

  /* Orange has two jobs. The bright one is a FILL only (white text
     on it is 2.3:1); the darker "cta" one is the text/link orange. */
  --z-brand-orange: #ff8a45;       /* brand/orange — button fill, icon label */
  --z-brand-orange-hover: #f5782f; /* not in Figma — one step darker for hover */
  --z-brand-cta: #b84400;          /* 5.4:1 on white, 4.7:1 on sand (Figma had #c2410c) */
  --z-brand-cta-hover: #993900;    /* 7.1:1 on white */

  --z-brand-navy: #1d3557;         /* brand/navy */
  --z-brand-navy-2: #24416a;       /* brand/navy-2 */
  --z-brand-navy-deep: #152a47;    /* brand/navy-deep */
  --z-brand-navy-line: #36567f;    /* brand/navy-line */

  --z-text-ink: #0f1e36;           /* text/ink — headings */
  --z-text-prose: #26324a;         /* text/prose — long-form article copy */
  --z-text-body: #3a4658;          /* text/body — 9.5:1 on white */
  --z-text-muted: #4a5568;         /* text/muted — 7.5:1 on white, 6.5:1 on sand */

  --z-surface-white: #ffffff;
  --z-surface-page: #f2f4f7;       /* page background — white cards read as raised */
  --z-surface-sand: #f3eee6;       /* surface/sand */
  --z-surface-dim: #eef2f7;        /* surface/dim */
  --z-surface-tint: #fdebdd;       /* surface/tint — icon tiles, flow connector */
  --z-surface-blue-tint: #e3eaf4;  /* surface/blue-tint — tags */
  --z-surface-tint-rgb: 253, 235, 221;       /* same two, unpacked for gradients */
  --z-surface-blue-tint-rgb: 227, 234, 244;

  --z-border-default: #d5dce6;
  --z-border-flat: #c3ccd8;
  --z-border-strong: #9aa8bc;

  /* Text and lines that sit ON the navy surfaces */
  --z-on-navy-text: #dce4ef;       /* 9.6:1 on navy */
  --z-on-navy-muted: #c8d3e3;      /* 8.2:1 on navy */
  --z-on-navy-border: #4a6285;
  --z-on-navy-divider: #334c70;

  --z-radius: 1.25rem;             /* the large card radius */

  /* ---- 1.2 Legacy aliases ----
     Pre-Figma names. Still read all over this file, so they stay.
     Point them at the Figma tokens rather than at raw hex, and new
     rules should use the --z-brand-* / --z-text-* names instead. */
  --z-orange: var(--z-brand-cta);
  --z-orange-dark: var(--z-brand-cta-hover);
  --z-navy: var(--z-brand-navy);
  --z-navy-dark: var(--z-brand-navy-deep);
  --z-cream: var(--z-surface-sand);
  --z-ink: var(--z-text-ink);
  --z-ink-muted: var(--z-text-body);
  --z-ink-faint: var(--z-text-muted);  /* was #8b95a5 at 2.9:1 — below AA */
  --z-line: var(--z-border-default);

  /* ---- 1.3 Type scale ----
     Figma text styles, px ÷ 16. H1/H2 run one step under Figma
     (58/42) and at weight 700 rather than 800 — client call. */
  --z-fs-display: 3rem;         --z-lh-display: 1.15;      /* H1 48/55 */
  --z-fs-h2: 2.25rem;           --z-lh-h2: 1.2;            /* H2 36/43 */
  --z-fs-article-h2: 2rem;      --z-lh-article-h2: 1.25;   /* Heading/Article H2 32/40 */
  --z-fs-card-title: 1.5rem;    --z-lh-card-title: 1.3;    /* Card title 24/31 */
  --z-fs-h3: 1.5rem;            --z-lh-h3: 1.292;          /* Heading/H3 24/31 */
  --z-fs-post-title: 1.3125rem; --z-lh-post-title: 1.357;  /* Title/Post 21/28.5 */
  --z-fs-accordion: 1.25rem;    --z-lh-accordion: 1.6;     /* Title/Accordion 20/32 */
  --z-fs-lead: 1.3125rem;       --z-lh-lead: 1.595;        /* Text/Lead 21/33.5 */
  --z-fs-prose: 1.1875rem;      --z-lh-prose: 1.711;       /* Text/Prose 19/32.5 */
  --z-fs-body: 1.125rem;        --z-lh-body: 1.611;        /* Text/Body 18/29 */
  --z-fs-link: 1.0625rem;       --z-lh-link: 1.588;        /* Label/Link + Label/Nav 17/27 */
  --z-fs-small: 1rem;           --z-lh-small: 1.594;       /* Text/Small 16/25.5 */
  --z-fs-caption: .9375rem;     --z-lh-caption: 1.6;       /* Text/Caption + Label/Eyebrow 15/24 */
  --z-fs-tag: .875rem;          --z-lh-tag: 1.607;         /* Label/Tag + Label/Kicker 14/22.5 */

  /* ---- 1.4 Bootstrap variable remap ----
     Re-point Bootstrap's own custom properties so stock components
     (.btn, .form-control, links, .text-body-secondary …) inherit the
     brand without being restyled one by one. Literal hex here because
     Bootstrap also needs the -rgb companions. */
  --bs-primary: #b84400;
  --bs-primary-rgb: 184, 68, 0;
  --bs-link-color: #b84400;
  --bs-link-color-rgb: 184, 68, 0;
  --bs-link-hover-color: #993900;
  --bs-link-hover-color-rgb: 153, 57, 0;
  --bs-body-bg: var(--z-surface-page);
  --bs-body-bg-rgb: 242, 244, 247;
  --bs-body-color: #3a4658;
  --bs-body-color-rgb: 58, 70, 88;
  --bs-emphasis-color: #0f1e36;
  --bs-secondary-color: #4a5568;
  --bs-body-font-size: var(--z-fs-body);
  --bs-body-line-height: var(--z-lh-body);
  --bs-border-color: #d5dce6;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-font-sans-serif: "Figtree", system-ui, -apple-system, sans-serif;
  --bs-body-font-family: "Figtree", system-ui, -apple-system, sans-serif;
}


/* ===============================================================
   2. BASE AND BOOTSTRAP OVERRIDES
   =============================================================== */

/* ---------------------------------------------------------------
   2.1 Body
   padding-right / overflow-x: Bootstrap adds scrollbar
   compensation when a modal or offcanvas opens, which shifts the
   sticky header by a few pixels. We never want that.
   --------------------------------------------------------------- */
body {
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  background-color: #fcfcfa;
  overflow-x: hidden;
  padding-right: 0 !important;
}

/* Same scrollbar compensation, on the fixed/sticky elements */
.site-header,
.fixed-top,
.sticky-top {
  padding-right: 0 !important;
}

/* ---------------------------------------------------------------
   2.2 Headings and display scale
   Semantic h1-h6 and the .display-* classes are mapped onto the
   same Figma text styles, so a designer's ".display-3" and a
   writer's "## heading" come out the same size.
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: "Figtree", "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--z-ink);
}

h1, .h1 { font-size: var(--z-fs-display);    line-height: var(--z-lh-display);    font-weight: 700; letter-spacing: -.02em; }
h2, .h2 { font-size: var(--z-fs-h2);         line-height: var(--z-lh-h2);         font-weight: 700; letter-spacing: -.015em; }
h3, .h3 { font-size: var(--z-fs-h3);         line-height: var(--z-lh-h3); }
h4, .h4 { font-size: var(--z-fs-post-title); line-height: var(--z-lh-post-title); }
h5, .h5 { font-size: var(--z-fs-accordion);  line-height: var(--z-lh-accordion);  font-weight: 600; }
h6, .h6 { font-size: var(--z-fs-body);       line-height: var(--z-lh-body); }

/* display-1 and the page-title h1.display-2 = Display/H1 */
.display-1,
h1.display-2 {
  font-size: var(--z-fs-display);
  line-height: var(--z-lh-display);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* display-2 / display-3 = Heading/H2 */
.display-2,
.display-3 {
  font-size: var(--z-fs-h2);
  line-height: var(--z-lh-h2);
  font-weight: 600;
  letter-spacing: -.015em;
}

.display-4 {
  font-size: var(--z-fs-card-title);
  line-height: var(--z-lh-card-title);
  font-weight: 600;
  letter-spacing: 0;
}

.display-5 {
  font-size: var(--z-fs-h3);
  line-height: var(--z-lh-h3);
  letter-spacing: 0;
}

.display-6 {
  font-size: var(--z-fs-accordion);
  line-height: var(--z-lh-accordion);
  font-weight: 600;
  letter-spacing: 0;
}

/* The two largest steps are too big for a phone */
@media (max-width: 767.98px) {
  h1, .h1,
  .display-1,
  h1.display-2 { font-size: 2.25rem; }

  h2, .h2,
  .display-2,
  .display-3 { font-size: 1.875rem; }
}

/* ---------------------------------------------------------------
   2.3 Container width
   Bootstrap's xxl container is 1320px; the design is 1170px.
   --------------------------------------------------------------- */
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl { max-width: 1170px; }
}

/* ---------------------------------------------------------------
   2.4 Spacing utilities — steps 6-8
   Bootstrap's scale stops at 5 (3rem). These three extra steps are
   what the section rhythm needs, hand-written because there is no
   Sass build to extend the utilities API with.
   --------------------------------------------------------------- */
.p-6 { padding: 4rem !important; }
.p-7 { padding: 6rem !important; }
.p-8 { padding: 9rem !important; }

.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-8 { padding-top: 9rem !important; padding-bottom: 9rem !important; }

.mt-6 { margin-top: 4rem !important; }
.mt-7 { margin-top: 6rem !important; }
.mb-6 { margin-bottom: 4rem !important; }

@media (min-width: 768px) {
  .py-md-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-md-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
  .py-md-8 { padding-top: 9rem !important; padding-bottom: 9rem !important; }
  .mt-md-6 { margin-top: 4rem !important; }
}

/* ---------------------------------------------------------------
   2.5 Brand colour utilities
   Same reason as above — no utilities API without a build step.
   --------------------------------------------------------------- */
.bg-cream     { background-color: var(--z-cream) !important; }
.bg-navy      { background-color: var(--z-navy) !important; }
.bg-navy-dark { background-color: var(--z-navy-dark) !important; }

.text-ink       { color: var(--z-ink) !important; }
.text-ink-muted { color: var(--z-ink-muted) !important; }
.text-ink-faint { color: var(--z-ink-faint) !important; }


/* ===============================================================
   3. BUTTONS
   ---------------------------------------------------------------
   zurel_buttons() in inc/sections.php maps the SCF "style" choice
   onto these classes:
     primary   → .btn.btn-primary
     secondary → .btn.btn-line
     ghost     → .btn.btn-ghost
   Each variant only sets Bootstrap's --bs-btn-* properties, so
   states (hover / active / disabled / focus ring) stay consistent.
   =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.25rem;            /* Figma Button, Default = 52px */
  border-radius: 50rem;           /* pill — client prefers it over Figma's 10px */
  padding: .75rem 1.5rem;
  font-size: var(--z-fs-link);
  line-height: var(--z-lh-link);
  font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn svg { flex: 0 0 auto; }      /* stop the arrow icon from squashing */

/* Primary — bright brand orange. White on it is only 2.3:1, so the
   label is ink (7.1:1), exactly as Figma's "On dark" style does. */
.btn-primary {
  --bs-btn-bg: var(--z-brand-orange);
  --bs-btn-border-color: var(--z-brand-orange);
  --bs-btn-color: var(--z-text-ink);
  --bs-btn-hover-bg: var(--z-brand-orange-hover);
  --bs-btn-hover-border-color: var(--z-brand-orange-hover);
  --bs-btn-hover-color: var(--z-text-ink);
  --bs-btn-active-bg: var(--z-brand-orange-hover);
  --bs-btn-active-border-color: var(--z-brand-orange-hover);
  --bs-btn-active-color: var(--z-text-ink);
  --bs-btn-disabled-bg: var(--z-brand-orange);
  --bs-btn-disabled-border-color: var(--z-brand-orange);
  --bs-btn-disabled-color: var(--z-text-ink);
  --bs-btn-focus-shadow-rgb: 255, 138, 69;
}

/* Secondary — Figma "Secondary": navy outline on white */
.btn-line {
  --bs-btn-border-width: 1.5px;
  --bs-btn-color: var(--z-brand-navy);
  --bs-btn-bg: var(--z-surface-white);
  --bs-btn-border-color: var(--z-brand-navy);
  --bs-btn-hover-color: var(--z-brand-navy);
  --bs-btn-hover-bg: var(--z-surface-dim);
  --bs-btn-hover-border-color: var(--z-brand-navy);
  --bs-btn-active-color: var(--z-brand-navy);
  --bs-btn-active-bg: var(--z-surface-blue-tint);
  --bs-btn-active-border-color: var(--z-brand-navy);
}

/* Ghost — text only */
.btn-ghost {
  --bs-btn-color: var(--z-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--z-orange);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  padding-inline: .5rem;
}

/* On navy — Figma "Ghost light". Must stay after the base variants. */
.section--bg-navy .btn-line,
.cta-card .btn-line {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--z-on-navy-muted);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .1);
  --bs-btn-active-border-color: #fff;
}

.section--bg-navy .btn-ghost,
.cta-card .btn-ghost {
  --bs-btn-color: var(--z-on-navy-text);
  --bs-btn-hover-color: #fff;
}


/* ===============================================================
   4. SHARED TEXT HELPERS
   ---------------------------------------------------------------
   Named type roles used across several section partials, so the
   partials don't carry a pile of utility classes.
   =============================================================== */
.lead-muted {
  font-size: var(--z-fs-lead);
  line-height: var(--z-lh-lead);
  color: var(--z-text-body);
}

.text-small-muted {
  font-size: var(--z-fs-small);
  line-height: var(--z-lh-small);
  color: var(--z-text-muted);
}

.eyebrow-label {
  font-size: var(--z-fs-tag);
  line-height: var(--z-lh-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--z-text-muted);
}

/* Inside a card the eyebrow takes the link orange */
.card-hairline .eyebrow-label,
.grid-card .eyebrow-label,
.blog-card .eyebrow-label { color: var(--z-brand-cta); }

/* Measure limits for headlines — keeps two-/three-line balance */
.headline-tight { max-width: 16ch; }
.headline-wide  { max-width: 22ch; }


/* ===============================================================
   5. SHARED COMPONENTS
   =============================================================== */

/* ---------------------------------------------------------------
   5.1 Eyebrow dots — three-dot kicker above a section heading
   --------------------------------------------------------------- */
.eyebrow-dots {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-bottom: 1.25rem;
}

.eyebrow-dots span {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--z-orange);
}

.eyebrow-dots span:nth-child(2) { background: var(--z-navy); }
.eyebrow-dots span:nth-child(3) { background: rgba(184, 68, 0, .4); }

/* ---------------------------------------------------------------
   5.2 Hairline card — flat sand panel with a 1px border
   --------------------------------------------------------------- */
.card-hairline {
  background: var(--z-surface-sand);
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
}

.card-hairline--featured {
  background: var(--z-surface-sand);
  border-color: var(--z-line);
}

/* ---------------------------------------------------------------
   5.3 Media frame — cream mat behind a screenshot or video
   --------------------------------------------------------------- */
.media-frame {
  background: var(--z-cream);
  border-radius: var(--z-radius);
  padding: 0;
}

.media-frame img,
.media-frame iframe,
.media-frame .ratio > iframe { border-radius: .75rem; }

/* Flush variant — the uploaded image already carries its own card
   chrome, so the mat is dropped and only the shadow remains.
   Used by the flow section. */
.media-frame--flush {
  background: transparent;
  padding: 0;
  border-radius: 1rem;
  overflow: hidden;
  margin-inline: auto;
  box-shadow: 0 20px 25px -5px rgba(231, 229, 228, .6),
              0 8px 10px -6px rgba(231, 229, 228, .6);
}

.media-frame--flush img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* ---------------------------------------------------------------
   5.4 Elevated card surface — Figma "card"
   The shared skin for the three card families. Each family adds its
   own layout further down (7.10, 7.20, 7.23); keep this rule ABOVE
   them so their overrides (e.g. the deeper blog-card shadow) win.
   --------------------------------------------------------------- */
.grid-card,
.icon-tile,
.blog-card {
  background: var(--z-surface-white);
  border: 1px solid var(--z-border-default);
  border-radius: 1rem;                        /* 16px */
  box-shadow: 0 8px 12px rgba(15, 30, 54, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.grid-card:hover,
.icon-tile:hover,
.blog-card:hover {
  border-color: var(--z-border-strong);
  box-shadow: 0 12px 24px rgba(15, 30, 54, .1);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   5.5 Step markers and the horizontal step row
   The numbered circle is shared; the flow section (7.5) recolours
   it to orange. The dashed connector below is for the compact
   left-to-right row, five steps per line.
   --------------------------------------------------------------- */
.step-marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background: var(--z-brand-navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  box-shadow: 0 4px 6px -1px rgba(29, 53, 87, .3),
              0 2px 4px -2px rgba(29, 53, 87, .3);
}

.step-row .step-marker {
  display: flex;
  margin-inline: auto;
}

.step-arrow { display: none; }    /* mobile: no connector at all */

/* Columns are equal width, so the next marker sits exactly one
   column right and the arrow midpoint is this column's right edge. */
@media (min-width: 992px) {
  .step-row .step { position: relative; }

  .step-row .step:not(:last-child)::after,
  .step-row .step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(1.25rem - 1px);               /* marker centre */
    border-top: 2px dashed var(--z-brand-navy);
  }

  .step-row .step:not(:last-child)::after {  /* marker → arrow */
    left: calc(50% + 1.75rem);
    right: .875rem;
  }

  .step-row .step:not(:first-child)::before { /* arrow → marker */
    left: .875rem;
    right: calc(50% + 1.75rem);
  }

  /* Five per row — never draw a connector across a row break */
  .step-row .step:nth-child(5n)::after,
  .step-row .step:nth-child(5n + 1)::before,
  .step-row .step:nth-child(5n) .step-arrow { display: none; }

  .step-arrow {
    position: absolute;
    top: 1.25rem;
    right: 0;
    display: flex;
    transform: translate(50%, -50%);
    color: var(--z-brand-navy);
  }
}

/* ---------------------------------------------------------------
   5.6 Filter toolbar — search + chips
   Shared by the filterable grid (7.20) and the FAQ list (7.19).
   Behaviour lives in assets/js/main.js, driven by the
   data-grid-* / data-faq-* attributes.
   --------------------------------------------------------------- */
.grid-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;                        /* 32px to the grid */
}

@media (min-width: 992px) {
  .grid-controls {
    flex-direction: row;
    align-items: flex-start;                  /* search stays on the first chip row when chips wrap */
    justify-content: space-between;
    gap: 2rem;
  }
}

.grid-search {
  position: relative;
  width: 100%;
}

/* Fixed width in the row layout only. In a column layout (the FAQ)
   flex-basis would be read as a height, so this is scoped. */
@media (min-width: 992px) {
  .grid-controls .grid-search {
    flex: 0 0 23.75rem;                       /* 380px */
    width: 23.75rem;
    margin-left: auto;
  }
}

.grid-search svg {
  position: absolute;
  left: 1.0625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--z-text-muted);
  pointer-events: none;
}

.grid-search input {
  width: 100%;
  padding: .75rem 1rem .75rem 3rem;           /* left pad clears the icon */
  font-size: var(--z-fs-link);
  line-height: var(--z-lh-link);
  color: var(--z-text-ink);
  background: var(--z-surface-white);
  border: 1px solid var(--z-border-strong);
  border-radius: .75rem;                      /* 12px */
}

.grid-search input::placeholder { color: var(--z-text-muted); opacity: 1; }

.grid-search input:focus {
  outline: none;
  border-color: var(--z-brand-navy);
  box-shadow: 0 0 0 3px rgba(29, 53, 87, .15);
}

.grid-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.grid-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .875rem;                   /* compact, so long filter lists stay tidy */
  font-size: var(--z-fs-tag);
  line-height: var(--z-lh-tag);
  font-weight: 600;
  color: var(--z-brand-navy);
  background: var(--z-surface-white);
  border: 1px solid var(--z-border-strong);
  border-radius: 50rem;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.grid-chip:hover { border-color: var(--z-brand-navy); }

.grid-chip.is-active {
  background: var(--z-brand-navy);
  border-color: var(--z-brand-navy);
  color: #fff;
}

.grid-chip__count { color: var(--z-text-muted); }
.grid-chip.is-active .grid-chip__count { color: var(--z-on-navy-muted); }

/* ---------------------------------------------------------------
   5.7 Section head — small title + right-hand link or meta
   --------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.section-head__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--z-ink);
}

.section-head__sub {
  margin: .125rem 0 0;
  font-size: .8125rem;
  color: var(--z-ink-muted);
}

.section-head__meta {
  flex: 0 0 auto;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--z-ink-muted);
}

.section-head__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--z-orange-dark);
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .section-head { flex-direction: column; gap: .5rem; }
}


/* ===============================================================
   6. SECTION SHELL
   ---------------------------------------------------------------
   Every flexible-content row is wrapped in
   <section class="section section--bg-X section--pad-Y">
   printed by zurel_section_atts(). This block owns padding,
   surface colour and background decoration — nothing else should.
   =============================================================== */
.section {
  position: relative;
  overflow: hidden;
}

/* Keeps content above ::before decoration and the image overlay */
.section > .container {
  position: relative;
  z-index: 1;
}

/* ---- Vertical rhythm. SCF "spacing" choice → sm | md | lg ---- */
.section--pad-sm { padding-block: 2rem; }
.section--pad-md { padding-block: 2.75rem; }
.section--pad-lg { padding-block: 3.5rem; }

@media (min-width: 768px) {
  .section--pad-sm { padding-block: 2.75rem; }
  .section--pad-md { padding-block: 3.75rem; }
  .section--pad-lg { padding-block: 5rem; }
}

/* Bands that are always compact regardless of the SCF choice */
.section--tight   { padding-block: .75rem !important; }
.section--prompt,
.section--callout,
.section--banner,
.section--signup  { padding-block: 1.5rem !important; }

/* ---- Surfaces. SCF "background" choice → one of these ---- */
.section--bg-white   { background: var(--z-surface-white); }
.section--bg-cream   { background: var(--z-cream); }
.section--bg-light   { background: var(--z-surface-dim); }
.section--bg-surface { background: var(--z-surface-dim); }   /* Figma "section--surface" */

.section--bg-navy {
  background: var(--z-navy);
  color: var(--z-on-navy-text);
}

.section--bg-navy h1,
.section--bg-navy h2,
.section--bg-navy h3,
.section--bg-navy h4,
.section--bg-navy h5,
.section--bg-navy h6,
.section--bg-navy .display-1,
.section--bg-navy .display-2,
.section--bg-navy .display-3,
.section--bg-navy .display-4 { color: #fff; }

.section--bg-navy .lead-muted,
.section--bg-navy .text-small-muted { color: var(--z-on-navy-text); }

.section--bg-navy .eyebrow-label { color: var(--z-on-navy-muted); }

/* ---- Background image + overlay ----
   The image URL and --overlay opacity come in as an inline style
   from zurel_section_atts(); the overlay div from
   zurel_section_overlay(). */
.section--has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section__overlay {
  position: absolute;
  inset: 0;
  background: var(--z-navy-dark);
  pointer-events: none;
}

/* ---- Faint graph-paper backdrop, masked to a soft ellipse ---- */
.grid-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(20, 33, 58, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 33, 58, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}


/* ===============================================================
   7. SECTIONS
   One block per file in template-parts/sections/.
   =============================================================== */

/* ---------------------------------------------------------------
   7.1 Hero — sections/hero.php
   --------------------------------------------------------------- */

/* Peach glow from the top, pale blue from the bottom corners. Light
   surfaces only; navy, custom-colour and image heroes keep theirs. */
.section--hero.section--bg-white,
.section--hero.section--bg-light,
.section--hero.section--bg-cream {
  background:
    radial-gradient(55% 75% at 62% 0%,   rgba(var(--z-surface-tint-rgb), 1)       0%, rgba(var(--z-surface-tint-rgb), 0) 100%),
    radial-gradient(50% 70% at 0% 100%,  rgba(var(--z-surface-blue-tint-rgb), 1)  0%, rgba(var(--z-surface-blue-tint-rgb), 0) 100%),
    radial-gradient(45% 60% at 100% 100%, rgba(var(--z-surface-blue-tint-rgb), .8) 0%, rgba(var(--z-surface-blue-tint-rgb), 0) 100%),
    var(--z-surface-white);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-size: var(--z-fs-caption);
  line-height: var(--z-lh-caption);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--z-brand-cta);
}

/* Icon sits in a light-orange tile, matching the card icon tiles */
.hero-eyebrow__icon {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 1.375rem;                /* 22px icon */
  height: 1.375rem;
  padding: .5rem;                 /* → 38px tile */
  border-radius: .625rem;
  background: var(--z-surface-tint);
  object-fit: contain;
}

/* cta orange is 2.3:1 on navy — use the bright brand orange there */
.section--bg-navy .hero-eyebrow { color: var(--z-brand-orange); }

/* ---------------------------------------------------------------
   7.2 Page intro — page.php, built from the editor content above
   the flexible-content rows
   --------------------------------------------------------------- */
.page-intro__eyebrow {
  margin: 0 0 .75rem;
  font-size: var(--z-fs-body);
  line-height: var(--z-lh-body);
  font-weight: 500;
  color: var(--z-text-muted);
}

.page-intro__title {
  margin: 0;
  font-size: var(--z-fs-h2);
  line-height: var(--z-lh-h2);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--z-brand-navy);
}

.page-intro__body {
  margin: 1.25rem auto 0;
  max-width: 44rem;
  font-size: var(--z-fs-lead);
  line-height: var(--z-lh-lead);
  font-weight: 500;
  color: var(--z-text-body);
}

.page-intro__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   7.3 Logo strip — sections/logos.php (Splide carousel)
   --------------------------------------------------------------- */
.logo-strip .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 100%;
  padding-inline: 1.5rem;
}

.logo-strip .logo-item img {
  max-height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.logo-strip .logo-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

/* Fade the track edges so logos slide in and out, not pop */
.logo-strip.splide .splide__track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* ---------------------------------------------------------------
   7.4 Credibility / divided grid — sections/credibility.php
   Desktop: one row of stats separated by hairlines.
   Phone:   a 2-up grid of bordered tiles, last one full width.
   --------------------------------------------------------------- */
.grid-divided { overflow: hidden; }

.grid-divided > * {
  border-bottom: 1px solid var(--z-line);
  padding-left: 16px;
  padding-right: 16px;
}

.grid-divided > *:last-child { border-bottom: 0; }

@media (min-width: 576px) {
  .grid-divided > * { border-bottom: 0; }
  .grid-divided > *:last-child { border-right: 0; }
}

@media (max-width: 575.98px) {
  .grid-divided {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    border: 0;
    overflow: visible;
  }

  .grid-divided > * {
    border: none;
    border-radius: .75rem;
    width: auto !important;        /* overrides Bootstrap's col flex-basis */
    max-width: none !important;
  }

  .grid-divided > *:last-child { grid-column: 1 / -1; }
}

.credibility-item {
  background-color: var(--bs-white);
  border: 1px solid rgba(230, 226, 219, .3);
  border-radius: 8px;
}

.credibility-item .text-small { font-size: 1.2rem; }

/* ---------------------------------------------------------------
   7.5 Flow — sections/flow.php
   Alternating image / copy steps with an optional dotted connector
   (toggled by the SCF "show connector" field, which adds
   .step-flow-wrapper--connected).
   --------------------------------------------------------------- */
.flow-header { margin-bottom: 3rem; }

@media (min-width: 992px) {
  .flow-header { margin-bottom: 4.5rem; }
}

.flow-header.text-center { max-width: 48rem; }

.flow-subtitle {
  margin: 1rem 0 0;
  max-width: 42rem;
  font-size: var(--z-fs-lead);
  line-height: var(--z-lh-lead);
  color: var(--z-text-body);
}

.flow-header.text-center .flow-subtitle { margin-inline: auto; }

/* ---- Steps ---- */
.flow-steps .flow-step + .flow-step { margin-top: 3.5rem; }

@media (min-width: 992px) {
  .flow-steps .flow-step + .flow-step { margin-top: 6rem; }
  .flow-step__content { max-width: 30rem; }   /* narrower than the half column */
}

.flow-step__title {
  margin: 1rem 0 .5rem;
  font-size: var(--z-fs-h3);
  line-height: var(--z-lh-h3);
  font-weight: 600;
  color: var(--z-text-ink);
}

.flow-step__body {
  margin: 0;
  font-size: var(--z-fs-body);
  line-height: var(--z-lh-body);
  color: var(--z-text-body);
}

/* Orange badge in the vertical flow only — the compact row (5.5)
   stays navy. Ink on the bright orange is 7.1:1; white would be 2.3:1. */
.flow-steps .step-marker {
  background: var(--z-brand-orange);
  color: var(--z-text-ink);
  box-shadow: 0 4px 6px -1px rgba(255, 138, 69, .35),
              0 2px 4px -2px rgba(255, 138, 69, .35);
}

/* ---- Connector: a soft, wide SVG curve, desktop only ---- */
.flow-connector { display: none; }

@media (min-width: 992px) {
  .step-flow-wrapper--connected .flow-step { position: relative; }

  .flow-connector {
    display: block;
    position: absolute;
    left: 20%;
    width: 54%;
    bottom: -7rem;
    height: 16rem;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
  }

  .flow-connector__line { stroke: var(--z-surface-tint); }   /* the lightest peach, barely there */

  /* Mirrored so the curve heads back toward the next image while
     still landing at the top of it. */
  .flow-connector--reverse { transform: scaleX(-1); }

  /* Keep cards and copy above the line */
  .step-flow-wrapper--connected .flow-step > .row {
    position: relative;
    z-index: 1;
  }
}

/* ---------------------------------------------------------------
   7.6 Testimonial showcase — sections/testimonial.php
   Splide slider; arrows are hidden by main.js when there is only
   one slide. The card overlaps the photo on desktop.
   --------------------------------------------------------------- */
.testimonial-showcase { position: relative; }

.testimonial-showcase .splide__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.testimonial-photo { width: 382px; }

.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-card {
  background: var(--z-surface-sand);
  border-radius: .75rem;
  padding: 2.5rem;
  color: var(--z-ink);
}

.testimonial-mark {
  display: block;
  font-family: "Space Grotesk", serif;
  font-size: 6rem;
  line-height: .5;
  color: var(--z-orange);
}

.testimonial-quote {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--z-ink-muted);
  margin-bottom: 1.75rem;
}

.testimonial-author {
  margin-bottom: 0;
  padding-right: 7rem;             /* clears the arrows */
  font-size: .9375rem;
  color: var(--z-ink-muted);
}

.testimonial-author strong { color: var(--z-ink); font-weight: 600; }
.testimonial-sep { color: var(--z-ink-faint); }

@media (min-width: 992px) {
  .testimonial-card--offset {
    margin-left: -3rem;
    margin-top: 5rem;
  }
}

@media (max-width: 991.98px) {
  .testimonial-photo {
    aspect-ratio: 16 / 10;
    margin-bottom: -1.5rem;
  }

  .testimonial-card {
    position: relative;
    padding: 1.75rem;
  }

  .testimonial-author { padding-right: 0; }
}

/* ---- Arrows: pinned inside the card on desktop ---- */
.testimonial-showcase .splide__arrows {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  display: flex;
  gap: .5rem;
  z-index: 2;
}

.testimonial-showcase .splide__arrow {
  position: static;                /* undo Splide's absolute centring */
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--z-line);
  border-radius: .375rem;
  background: #fff;
  color: var(--z-ink);
  opacity: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.testimonial-showcase .splide__arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
}

.testimonial-showcase .splide__arrow:hover {
  border-color: var(--z-orange);
  color: var(--z-orange);
}

@media (max-width: 991.98px) {
  .testimonial-showcase .splide__arrows {
    position: static;
    justify-content: center;
    margin-top: 1.5rem;
  }
}

/* ---------------------------------------------------------------
   7.7 Comparison — sections/comparison.php
   --------------------------------------------------------------- */
.compare-panel {
  border-radius: .75rem;
  padding: 1.75rem;
}

.compare-panel--before {
  background: #fff;
  border: 1px solid var(--z-line);
}

.compare-panel--after {
  background: var(--z-cream);
  border: 1px solid var(--z-orange);
}

.compare-list li {
  display: flex;
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--z-ink-muted);
}

.compare-list li + li { margin-top: .875rem; }

.compare-icon {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1.5;
}

/* The "×" glyph is optically small, so it is sized up and the
   line-height pulled in to keep it on the list baseline. */
.compare-icon--no  { color: var(--bs-danger); font-size: 30px; line-height: .6; }
.compare-icon--yes { color: var(--bs-green); }

/* ---------------------------------------------------------------
   7.8 Feature list — sections/feature_list.php
   Features have no detail page, so a .feature-card is a <div>
   unless zurel_is_linkable() says otherwise — hence a.feature-card
   for the hover state.
   --------------------------------------------------------------- */
.feature-group + .feature-group { margin-top: 2.5rem; }

.feature-group__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--z-ink-muted);
}

.feature-card {
  display: block;
  height: 100%;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--z-line);
  border-radius: .75rem;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

a.feature-card:hover {
  border-color: var(--z-orange);
  box-shadow: 0 8px 20px -8px rgba(20, 33, 58, .12);
}

.feature-card__icon {
  display: block;
  margin-bottom: .75rem;
  opacity: .85;
}

.feature-card__title {
  margin: 0 0 .375rem;
  font-size: var(--z-fs-h3);
  line-height: var(--z-lh-h3);
  font-weight: 700;
  color: var(--z-ink);
}

.feature-card__body {
  margin: 0;
  font-size: var(--z-fs-body);
  line-height: var(--z-lh-body);
  color: var(--z-ink-muted);
}

.feature-card__subs { margin-top: .75rem; }
.feature-card__subs li + li { margin-top: .375rem; }
.feature-card__sub-title { font-size: .8125rem; font-weight: 600; color: var(--z-ink); }
.feature-card__sub-desc  { font-size: .8125rem; color: var(--z-ink-muted); }

/* ---------------------------------------------------------------
   7.9 Icon cards — sections/icon_cards.php
   The title is shared with the pricing section so both match the
   other section headings (.display-3 / H2).
   --------------------------------------------------------------- */
.icon-cards__title,
.pricing__title {
  margin: 0 0 2.5rem;
  font-size: var(--z-fs-h2);
  line-height: var(--z-lh-h2);
  font-weight: 700;
  letter-spacing: -.015em;
  text-align: center;
}

@media (max-width: 767.98px) {
  .icon-cards__title,
  .pricing__title {
    margin-bottom: 1.75rem;
    font-size: 1.875rem;
  }
}

.icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--z-line);
  border-radius: .75rem;
}

.icon-card--linked { transition: border-color .2s ease, box-shadow .2s ease; }

.icon-card--linked:hover {
  border-color: var(--z-orange);
  box-shadow: 0 8px 20px -8px rgba(20, 33, 58, .12);
}

.icon-card__icon { display: block; margin-bottom: .875rem; opacity: .85; }

.icon-card__title {
  margin: 0 0 .375rem;
  font-size: var(--z-fs-post-title);
  line-height: var(--z-lh-post-title);
  font-weight: 600;
  color: var(--z-ink);
}

.icon-card__body {
  margin: 0;
  font-size: var(--z-fs-small);
  line-height: var(--z-lh-small);
  color: var(--z-ink-muted);
}

.icon-card__link {
  margin-top: auto;                /* pins the link to the card foot */
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--z-orange);
  text-decoration: none;
}

/* ---------------------------------------------------------------
   7.10 Icon tiles — Figma "card trade"
   Base skin comes from 5.4. Linked tiles get a lift; non-linked
   ones render as a <div> and stay flat.
   --------------------------------------------------------------- */
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  padding: 1.5rem;
  text-decoration: none;
  text-align: center;
}

a.icon-tile:hover {
  border-color: var(--z-orange);
  box-shadow: 0 8px 20px -8px rgba(20, 33, 58, .12);
  transform: translateY(-2px);
}

.icon-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .875rem;
  background: var(--z-surface-tint);
}

.icon-tile__icon img { width: 28px; height: 28px; object-fit: contain; }

.icon-tile__label {
  display: block;
  font-size: 1.375rem;             /* 22/35 */
  line-height: 1.59;
  font-weight: 700;
  color: var(--z-text-ink);
}

.icon-tile__sub {
  display: block;
  margin-top: -.875rem;            /* cancels the flex gap, sits tight under the label */
  font-size: var(--z-fs-small);
  line-height: var(--z-lh-small);
  color: var(--z-text-muted);
}

@media (max-width: 575.98px) {
  .icon-tile { padding: 1.25rem .75rem; }
  .icon-tile__label { font-size: var(--z-fs-body); line-height: var(--z-lh-body); }
}

/* ---------------------------------------------------------------
   7.11 Icon rows — icon + title + description card
   --------------------------------------------------------------- */
.icon-row {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: #fff;
  border-radius: .75rem;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

a.icon-row:hover {
  box-shadow: 0 10px 24px -10px rgba(20, 33, 58, .14);
  transform: translateY(-2px);
}

.icon-row__head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: .75rem;
}

.icon-row__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.icon-row__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--z-ink);
}

.icon-row__body {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--z-ink-muted);
}

@media (max-width: 575.98px) {
  .icon-row { padding: 1.25rem; }
}

/* ---------------------------------------------------------------
   7.12 Pricing tiers — sections/pricing.php
   --------------------------------------------------------------- */
.pricing-tier {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--z-line);
  border-radius: .75rem;
}

/* Doubled up as a ring so the featured tier reads as thicker
   without the 1px border changing the box size. */
.pricing-tier--featured {
  border-color: var(--z-orange);
  box-shadow: 0 0 0 1px var(--z-orange);
}

.pricing-tier__name {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--z-ink);
}

.pricing-tier__price {
  margin: 0 0 .5rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--z-ink);
  font-variant-numeric: tabular-nums;   /* prices line up across tiers */
}

.pricing-tier__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--z-ink-muted);
}

.pricing-tier__list { margin: 1rem 0 0; }

.pricing-tier__list li {
  display: flex;
  gap: .5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--z-ink-muted);
}

.pricing-tier__list li + li { margin-top: .5rem; }
.pricing-tier__check { flex: 0 0 auto; color: var(--z-orange); font-weight: 700; }
.pricing-tier__cta { margin-top: auto; padding-top: 1.5rem; }

/* ---------------------------------------------------------------
   7.13 Callout — sections/callout.php
   (band padding is in section 6)
   --------------------------------------------------------------- */
.callout {
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--z-line);
  border-radius: .75rem;
}

.callout__icon { display: block; margin-bottom: .75rem; opacity: .85; }

.callout__title {
  margin: 0 0 .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--z-ink);
}

.callout__body {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--z-ink-muted);
}

/* ---------------------------------------------------------------
   7.14 Prompt line — sections/prompt.php
   One sentence plus a link, centred. (band padding is in section 6)
   --------------------------------------------------------------- */
.prompt-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.25rem;
}

.prompt-line__text { color: var(--z-ink-muted); }

.prompt-line__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  color: var(--z-orange);
  text-decoration: none;
}

.prompt-line__link:hover { color: var(--z-orange-dark); }

/* ---------------------------------------------------------------
   7.15 Banner — sections/banner.php
   (band padding is in section 6)
   --------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem;
  background: #ffdcc3;
  border-radius: .75rem;
}

.banner__inner { display: flex; align-items: flex-start; gap: 1.125rem; }

.banner__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .875rem;
  background: var(--z-orange-dark);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 600;
}

.banner__title {
  margin: 0 0 .25rem;
  font-size: 1.3125rem;
  font-weight: 700;
  color: var(--z-ink);
}

.banner__body {
  margin: 0;
  font-size: .9375rem;
  color: var(--z-ink-muted);
}

.banner__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border-radius: 50rem;
  background: var(--z-orange-dark);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.banner__cta:hover { background: var(--z-orange); color: #fff; }

/* ---------------------------------------------------------------
   7.16 Tool band — sections/tool_band.php
   --------------------------------------------------------------- */
.tool-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.5rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(30, 41, 59, .04);
}

.tool-band__pill {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .25rem .625rem;
  border-radius: .375rem;
  background: #ffdcc3;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #6e3900;
}

.tool-band__title {
  margin: 0 0 .625rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--z-ink);
}

.tool-band__body {
  margin: 0;
  max-width: 40rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--z-ink-muted);
}

@media (max-width: 767.98px) {
  .tool-band { padding: 1.75rem; }
  .tool-band__title { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------
   7.17 Rich text — sections/rich_text.php and single-post content
   .rich-text styles the WYSIWYG output; .rich-text-card is the
   panel it sits in.
   --------------------------------------------------------------- */
.rich-text-card {
  padding: 1.75rem 1.5rem;
  background: var(--z-surface-white);
  border-radius: 1rem;
  box-shadow: 0 8px 12px rgba(15, 30, 54, .06);
}

@media (min-width: 992px) {
  .rich-text-card { padding: 2rem; }
}

/* White card on a white section would vanish — go sand and flat */
.section--bg-white .rich-text-card {
  background: var(--z-surface-sand);
  border-color: transparent;
  box-shadow: none;
}

.rich-text {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--z-ink-muted);
}

.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child  { margin-bottom: 0; }

.rich-text p { margin-bottom: 1.25rem; }

.rich-text h2,
.rich-text h3,
.rich-text h4 {
  margin: 2rem 0 .75rem;
  color: var(--z-ink);
  letter-spacing: -.015em;
}

.rich-text h2 { font-size: 1.5rem; }
.rich-text h3 { font-size: 1.25rem; }
.rich-text h4 { font-size: 1.0625rem; }

.rich-text ul,
.rich-text ol { margin: 0 0 1.25rem 1.25rem; padding: 0; }
.rich-text li { margin-bottom: .5rem; }

.rich-text a {
  color: var(--z-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rich-text a:hover { color: var(--z-orange-dark); }

.rich-text strong { color: var(--z-ink); font-weight: 600; }

.rich-text blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--z-orange);
  font-style: italic;
  color: var(--z-ink);
}

.rich-text img { max-width: 100%; height: auto; border-radius: .75rem; }
.rich-text hr  { margin: 2rem 0; border-color: var(--z-line); }

/* ---------------------------------------------------------------
   7.18 Pull quote — sections/quote.php
   --------------------------------------------------------------- */
.pull-quote {
  margin: 0;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-radius: .75rem;
}

.pull-quote__text {
  margin: 0;
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.65;
  font-weight: 500;
  color: var(--z-ink);
}

.pull-quote__by {
  margin-top: .875rem;
  font-size: .875rem;
  font-style: normal;
  color: var(--z-ink-muted);
}

/* ---------------------------------------------------------------
   7.19 FAQ — sections/faq.php
   Accordion plus the shared filter toolbar (5.6). Open/closed is
   driven by .is-open from main.js, not Bootstrap's collapse.
   --------------------------------------------------------------- */
.faq-controls {
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Full-width search over the list, a touch taller than the grid one */
.faq-controls .grid-search { width: 100%; }

.faq-controls .grid-search input {
  padding-block: .875rem;
  border-radius: .875rem;                     /* 14px, matching the FAQ items */
  box-shadow: 0 4px 8px rgba(15, 30, 54, .04);
}

.faq-controls .grid-chips { justify-content: center; }

.faq-group {
  margin: 2rem 0 .875rem;
  font-size: var(--z-fs-tag);
  line-height: var(--z-lh-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--z-text-muted);
}

.faq-group:first-child { margin-top: 0; }

.faq-item {
  background: var(--z-surface-white);
  border: 1px solid var(--z-border-default);
  border-radius: .875rem;                     /* 14px */
  box-shadow: 0 4px 8px rgba(15, 30, 54, .04);
  margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .2s ease;
}

.faq-item:hover   { border-color: var(--z-border-strong); }
.faq-item.is-open { border-color: var(--z-brand-navy); }

.faq-item__header { margin: 0; }

.faq-item__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.75rem;                   /* 20px 28px */
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--z-fs-accordion);
  line-height: var(--z-lh-accordion);
  font-weight: 600;
  color: var(--z-text-ink);
  cursor: pointer;
}

.faq-item__button:focus-visible {
  outline: 2px solid var(--z-brand-cta);
  outline-offset: -2px;
}

.faq-item__chevron {
  flex: 0 0 auto;
  color: var(--z-text-ink);
  transition: transform .2s ease, color .2s ease;
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--z-brand-cta);
}

.faq-item__body {
  padding: 0 1.75rem 1.5rem;
  font-size: var(--z-fs-body);
  line-height: var(--z-lh-body);
  color: var(--z-text-body);
}

.faq-item__body > p:last-of-type { margin-bottom: 0; }

@media (max-width: 575.98px) {
  .faq-item__button { padding: 1rem 1.25rem; font-size: var(--z-fs-body); }
  .faq-item__body   { padding: 0 1.25rem 1.25rem; }
}

/* Feature / use-case tags inside an answer — each links back to
   the feature or use case it came from. */
.faq-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
}

.faq-tag {
  display: inline-block;
  padding: .1875rem .75rem .28rem;
  font-size: var(--z-fs-tag);
  line-height: var(--z-lh-tag);
  font-weight: 700;
  color: var(--z-brand-navy);
  background: var(--z-surface-blue-tint);
  border-radius: 50rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.faq-tag:hover { background: var(--z-brand-navy); color: #fff; }

/* Filter state, set by main.js */
[data-faq-item].is-hidden,
[data-faq-group].is-hidden { display: none; }

/* ---------------------------------------------------------------
   7.20 Filterable grid + grid cards — sections/grid.php and the
   use case / solution / customer / feature archives
   Toolbar is in 5.6; card skin is in 5.4.
   --------------------------------------------------------------- */
.grid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem 1.625rem;                   /* 24px 26px */
}

/* Cards that aren't links (features) must not look clickable.
   Same specificity as .grid-card:hover in 5.4, so it only wins
   because it comes later — keep it below that rule. */
.grid-card--static:hover {
  border-color: var(--z-line);
  box-shadow: none;
}

.grid-card__icon { display: block; margin-bottom: .875rem; opacity: .85; }

.grid-card__tag {
  align-self: flex-start;
  padding: .1875rem .75rem .28rem;
  font-size: var(--z-fs-tag);
  line-height: var(--z-lh-tag);
  font-weight: 700;
  color: var(--z-brand-navy);
  background: var(--z-surface-blue-tint);
  border-radius: 50rem;
}

.grid-card__title {
  margin: 0;
  font-size: var(--z-fs-post-title);
  line-height: var(--z-lh-post-title);
  font-weight: 700;
  color: var(--z-text-ink);
}

.grid-card__body {
  margin: 0;
  font-size: var(--z-fs-small);
  line-height: var(--z-lh-small);
  color: var(--z-text-body);
}

.grid-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--z-fs-link);
  line-height: var(--z-lh-link);
  font-weight: 700;
  color: var(--z-brand-cta);
  text-decoration: none;
}

.grid-empty {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--z-ink-muted);
}

.grid-more { margin-top: 2rem; text-align: center; }

/* Filter state (is-hidden) and Load More paging (is-beyond) */
[data-grid-item].is-hidden,
[data-grid-item].is-beyond { display: none; }

/* ---------------------------------------------------------------
   7.21 Resource cards — sections/resource_grid.php
   --------------------------------------------------------------- */
.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 2px 6px rgba(30, 41, 59, .04);
  transition: box-shadow .2s ease;
}

.res-card:hover { box-shadow: 0 8px 20px -6px rgba(30, 41, 59, .1); }

.res-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.res-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .5rem;
  background: var(--z-cream);
}

.res-card__format {
  padding: .25rem .625rem;
  border-radius: 50rem;
  background: var(--z-cream);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--z-ink-muted);
}

.res-card__title {
  margin: 0 0 .5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--z-ink);
}

.res-card__body {
  margin: 0 0 1.5rem;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--z-ink-muted);
}

.res-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
}

.res-card__note {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: #5a4138;
}

.res-card__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--z-orange-dark);
  text-decoration: none;
}

/* ---------------------------------------------------------------
   7.22 Post cards — compact related-posts list
   --------------------------------------------------------------- */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 2px 6px rgba(30, 41, 59, .04);
  transition: box-shadow .2s ease;
}

.post-card:hover { box-shadow: 0 8px 20px -6px rgba(30, 41, 59, .1); }

.post-card__date {
  display: block;
  margin-bottom: .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--z-ink-muted);
}

.post-card__title {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
  color: var(--z-ink);
}

.post-card__body {
  margin: 0 0 1.5rem;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--z-ink-muted);
}

.post-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
}

.post-card__meta {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--z-ink-muted);
}

.post-card__link { color: var(--z-orange-dark); line-height: 0; }

/* ---------------------------------------------------------------
   7.23 Blog cards — Figma "card post"
   Base skin from 5.4; this block only changes layout and shadow,
   so it must stay below 5.4.
   --------------------------------------------------------------- */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 30, 54, .06);
}

.blog-card__media {
  position: relative;
  aspect-ratio: 2 / 1;                        /* 380 x 190 cover */
  background: var(--z-brand-navy);
  overflow: hidden;
}

.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder tile, centred, when a post has no featured image */
.blog-card__media::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  transform: translate(-50%, -50%);
  border-radius: 1.25rem;
  background: var(--z-brand-navy-2);
}

.blog-card__media:has(img)::after { display: none; }

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .75rem;
  padding: 1.5rem 1.625rem;                   /* 24px 26px */
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}

.blog-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: .1875rem .75rem .28rem;
  border-radius: 50rem;
  background: var(--z-surface-blue-tint);
  font-size: var(--z-fs-tag);
  line-height: var(--z-lh-tag);
  font-weight: 700;
  color: var(--z-brand-navy);
}

.blog-card__date {
  display: block;
  font-size: var(--z-fs-caption);
  line-height: var(--z-lh-caption);
  color: var(--z-text-muted);
}

.blog-card__title {
  margin: 0;
  font-size: var(--z-fs-post-title);
  line-height: var(--z-lh-post-title);
  font-weight: 700;
  color: var(--z-text-ink);
}

.blog-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--z-fs-link);
  line-height: var(--z-lh-link);
  font-weight: 600;
  color: var(--z-brand-cta);
  text-decoration: none;
}

/* Compact variant — sidebar and related-posts rails */
.blog-card--compact .blog-card__media { aspect-ratio: 16 / 9; }
.blog-card--compact .blog-card__media::after { width: 3rem; height: 3rem; border-radius: .75rem; }
.blog-card--compact .blog-card__body { padding: .875rem 1rem; }
.blog-card--compact .blog-card__title { font-size: var(--z-fs-small); line-height: var(--z-lh-small); }

/* ---------------------------------------------------------------
   7.24 Subscribe — sections/subscribe.php and the blog templates
   Our own markup posting to the HubSpot Forms API from main.js.
   Two skins: --band (navy, blog listing) and --inline (light,
   inside a post). The .hs-embed rules at the end are only for the
   fallback HubSpot embed.
   (band padding is in section 6)
   --------------------------------------------------------------- */
.signup-card__note {
  font-size: .8125rem;
  line-height: 1.5;
}

.signup-card__note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Form ---- */
.signup-form {
  display: flex;
  gap: .5rem;
}

.signup-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  border-radius: 50rem;
}

.signup-form__input:focus {
  outline: none;
  border-color: var(--z-orange);
  box-shadow: 0 0 0 3px rgba(254, 118, 42, .2);
}

.signup-form__btn {
  flex: 0 0 auto;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: 50rem;
  background: var(--z-brand-orange);
  color: var(--z-text-ink);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.signup-form__btn:hover    { background: var(--z-orange-dark); }
.signup-form__btn:disabled { opacity: .6; cursor: default; }   /* set while the request is in flight */

.signup-form__msg { margin: 1rem 0 0; font-size: .9375rem; }
.signup-form__msg.is-error { color: #d4380d; }

/* ---- Skin: navy band ---- */
.signup-card--band {
  padding: 2.5rem 1.5rem;
  background: var(--z-navy);
  border-radius: 1rem;
  text-align: center;
}

.signup-card--band .signup-card__title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.signup-card--band .signup-form {
  max-width: 28rem;
  margin-inline: auto;
}

.signup-card--band .signup-form__input {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
}

.signup-card--band .signup-form__input::placeholder { color: rgba(255, 255, 255, .45); }

.signup-card--band .signup-card__note {
  margin: 1rem auto 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, .55);
  font-size: .9375rem;
}

.signup-card--band .signup-card__note a:hover { color: #fff; }
.signup-card--band .signup-card__note a { color: rgba(255, 255, 255, .8); }

.signup-card--band .signup-form__msg { color: rgba(255, 255, 255, .85); }
.signup-card--band .signup-form__msg.is-error { color: #ffb4a2; }

@media (max-width: 575.98px) {
  .signup-card--band { padding: 2rem 1.25rem; }
  .signup-form { flex-wrap: wrap; }
  .signup-form__btn { flex: 1 1 100%; }
}

/* ---- Skin: light inline ---- */
.signup-card--inline {
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-radius: .75rem;
}

.signup-card--inline .signup-card__main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.signup-card--inline .signup-card__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--z-ink);
}

.signup-card--inline .signup-form {
  flex: 0 0 auto;
  width: 24rem;
  max-width: 100%;
}

.signup-card--inline .signup-form__input {
  padding: .625rem 1rem;
  color: var(--z-ink);
  background: var(--z-cream);
  border: 1px solid transparent;
  border-radius: 1.5rem;
}

.signup-card--inline .signup-form__input::placeholder { color: var(--z-ink-faint); }

.signup-card--inline .signup-form__btn {
  padding: .625rem 1.25rem;
  border-radius: 1.5rem;
}

.signup-card--inline .signup-card__note {
  margin: .75rem 0 0;
  color: var(--z-ink-muted);
  font-size: .875rem;
}

.signup-card--inline .signup-card__note a { color: var(--z-ink); }

@media (max-width: 767.98px) {
  .signup-card--inline .signup-card__main { flex-direction: column; align-items: stretch; gap: 1rem; }
  .signup-card--inline .signup-form { width: 100%; }
}

/* ---- HubSpot embed fallback ----
   Only applies when the raw HubSpot embed is used instead of our
   form. HubSpot hides its own label and ships no placeholder, so
   one is faked with a pseudo-element, and the submit label is
   swapped the same way. */
.hs-embed .hs-form-field { position: relative; }

.hs-embed .hs-input:placeholder-shown + .hs-fake-label,
.hs-embed .hs-form-field::before {
  content: "you@email.com";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .45);
  pointer-events: none;
}

.hs-embed .hs-form-field:focus-within::before { display: none; }

.hs-embed input[type="submit"] { font-size: 0; }
.hs-embed input[type="submit"]::after { content: "Subscribe"; font-size: .9375rem; }

/* ---------------------------------------------------------------
   7.25 Global CTA card — zurel_render_cta() in inc/sections.php
   Content comes from Global Blocks; single.php renders a local
   copy instead of the global one.
   --------------------------------------------------------------- */
.section--cta-global {
  background: var(--z-brand-navy);
  color: var(--z-on-navy-text);
  padding: 3rem 0;
}

.cta-card { padding: 0; }

.cta-card__title {
  margin: 0;
  color: #fff;
}

.cta-card__body {
  margin: .875rem 0 0;
  max-width: 37rem;
  font-size: var(--z-fs-post-title);
  line-height: var(--z-lh-accordion);
  color: var(--z-on-navy-text);
}


/* ===============================================================
   8. SINGLE POST — single.php
   =============================================================== */
.post-meta { font-size: .875rem; color: var(--z-ink-muted); }
.post-meta span { margin-inline: .375rem; color: var(--z-ink-faint); }

.post-hero { border-radius: .75rem; overflow: hidden; background: var(--z-navy); }
.post-hero img { width: 100%; height: auto; display: block; }


/* ===============================================================
   9. SITE HEADER AND NAVIGATION — header.php
   ---------------------------------------------------------------
   One markup tree for both breakpoints: a Bootstrap offcanvas on
   mobile, unwound into a normal row nav at >=992px (9.3).
   =============================================================== */

/* ---------------------------------------------------------------
   9.1 Header shell
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--z-line);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.site-header .navbar { min-height: 4.5rem; }

.navbar-brand {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  color: var(--z-ink);
}

.navbar-toggler {
  padding: .5rem;
  color: var(--z-ink);
}

.navbar-toggler:focus { box-shadow: none; }

/* Uploaded logo (Global Blocks → Site logo) */
.site-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 2rem;                                /* 32px in the header */
}

.site-offcanvas .offcanvas-header .site-logo { height: 1.75rem; }

/* No light logo uploaded → knock the main one out to solid white
   so it reads on the dark footer. */
.site-logo--light { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------
   9.2 Offcanvas panel — mobile
   --------------------------------------------------------------- */
.site-offcanvas {
  width: min(21rem, 85vw);
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 0;
}

@supports not (height: 100dvh) {
  .site-offcanvas { height: 100vh; max-height: 100vh; }
}

.site-offcanvas .offcanvas-header {
  flex: 0 0 auto;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--z-line);
  background: #fff;
}

.site-offcanvas .offcanvas-header .fw-bold {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.125rem;
  color: var(--z-ink);
}

.site-offcanvas .btn-close:focus { box-shadow: none; }

.site-offcanvas .offcanvas-body {
  flex: 1 1 auto;
  min-height: 0;                   /* without this, overflow never engages */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;    /* stop the page scrolling behind the panel */
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  background: #fff;
}

.site-offcanvas .mega-nav {
  flex: 0 0 auto;
  justify-content: center;
  padding-left: 6rem;              /* desktop inset; reset on mobile below */
}

@media (max-width: 991.98px) {
  .site-offcanvas .mega-nav { padding-left: 0; }
}

/* Log in + trial button, pushed to the bottom when the nav is short */
.site-offcanvas .offcanvas-body > .d-flex {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--z-line);
}

.site-offcanvas .offcanvas-body .btn {
  width: 100%;
  justify-content: center;
}

.site-offcanvas .offcanvas-body > .d-flex a:not(.btn) {
  padding: .5rem 0;
  font-size: 1rem;
}

/* Admin bar offset, logged-in only */
.admin-bar .site-offcanvas {
  height: calc(100dvh - 46px);
  top: 46px;
}

@media (min-width: 783px) {
  .admin-bar .site-offcanvas {
    height: calc(100dvh - 32px);
    top: 32px;
  }
}

/* ---------------------------------------------------------------
   9.3 Desktop — unwind the offcanvas into a normal nav bar
   Bootstrap's offcanvas JS never runs at this width, so everything
   it would set has to be forced back off.
   --------------------------------------------------------------- */
@media (min-width: 992px) {
  .navbar-toggler { display: none; }

  .site-offcanvas,
  .admin-bar .site-offcanvas {
    position: static !important;
    display: flex !important;
    flex-direction: row;
    width: auto;
    height: auto !important;
    max-height: none !important;
    top: auto;
    transform: none !important;
    visibility: visible !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: auto;
  }

  .site-offcanvas .offcanvas-header { display: none; }

  .site-offcanvas .offcanvas-body {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    padding: 0;
    background: transparent;
  }

  .site-offcanvas .offcanvas-body > .d-flex {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .site-offcanvas .offcanvas-body .btn { width: auto; }

  .site-offcanvas .offcanvas-body > .d-flex a:not(.btn) {
    padding: 0;
    font-size: var(--z-fs-link);
  }

  .navbar-expand-lg .offcanvas .offcanvas-body { width: 100%; }
}

/* ---------------------------------------------------------------
   9.4 Mega menu — template-parts/partials/mega-menu.php
   Open/closed is .is-open from main.js, NOT Bootstrap's dropdown:
   the caret sits inside .mega-head rather than being a direct child
   of .dropdown, which Bootstrap's JS requires.
   --------------------------------------------------------------- */
.mega-nav { gap: .25rem; }

.mega-head {
  display: flex;
  align-items: center;
  gap: .125rem;
}

.mega-label {
  display: inline-block;
  padding: .5rem .5rem .5rem .75rem;
  font-size: var(--z-fs-link);     /* Figma Label/Nav, 17px */
  font-weight: 500;
  color: var(--z-ink-muted);
  text-decoration: none;
  transition: color .15s ease;
  white-space: nowrap;
}

.mega-label:hover,
.mega-label:focus-visible,
.mega-item.is-open .mega-label { color: var(--z-ink); }

.mega-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .5rem .5rem .125rem;
  background: none;
  border: 0;
  line-height: 0;
  color: var(--z-ink-faint);
  cursor: pointer;
}

.mega-caret:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
  border-radius: .25rem;
}

.mega-caret__icon { transition: transform .2s ease; }

.mega-item.is-open .mega-caret { color: var(--z-ink); }
.mega-item.is-open .mega-caret__icon { transform: rotate(180deg); }

.mega-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--z-line);
  border-radius: 1rem;
  padding: 2rem;
  min-width: 22rem;
  box-shadow:
    0 32px 64px -16px rgba(20, 33, 58, .16),
    0 16px 32px -12px rgba(20, 33, 58, .10),
    0  4px 12px  -4px rgba(20, 33, 58, .06);
}

.mega-item.is-open > .mega-panel { display: block; }

.mega-panel--narrow { min-width: 17rem; }

.mega-panel__cols { display: grid; gap: 2.5rem; }
.mega-panel__cols--2 { grid-template-columns: repeat(2, minmax(200px, 1fr)); }

.mega-col__heading {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--z-ink);
}

.mega-col__eyebrow {
  margin: .125rem 0 1rem;
  font-size: .8125rem;
  color: var(--z-ink-faint);
}

.mega-col__body {
  margin: 0 0 1rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--z-ink-muted);
}

.mega-links li + li { margin-top: .625rem; }

.mega-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--z-ink);
  transition: color .15s ease;
}

.mega-link:hover,
.mega-link:focus-visible { color: var(--z-orange); }

.mega-link__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: .7;
  object-fit: contain;
}

.mega-link__label { font-size: .9375rem; font-weight: 500; }

.mega-cta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--z-orange);
  text-decoration: none;
}

.mega-cta:hover { color: var(--z-orange-dark); }

.mega-panel__foot {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--z-line);
}

.mega-note {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--z-ink-faint);
}

.mega-note a { color: var(--z-orange); font-weight: 600; text-decoration: none; }
.mega-note a:hover { color: var(--z-orange-dark); }

/* ---- Desktop: float the panel under its label ---- */
@media (min-width: 992px) {
  .mega-item { position: relative; }

  .mega-panel {
    position: absolute;
    top: calc(100% + .625rem);
    left: 0;
    z-index: 1000;
  }

  /* Last item would overflow the viewport — right-align it */
  .mega-nav > .mega-item:last-of-type .mega-panel {
    left: auto;
    right: 0;
  }

  /* Invisible bridge so hover survives the gap between label and
     panel; only clickable once the panel is actually open. */
  .mega-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .875rem;
    pointer-events: none;
  }

  .mega-item.is-open::after { pointer-events: auto; }

  .mega-item.is-open > .mega-panel { animation: megaIn .18s ease-out; }
}

@keyframes megaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Mobile: the panel becomes an inline accordion ---- */
@media (max-width: 991.98px) {
  .mega-nav {
    gap: 0;
    flex-direction: column;
  }

  .mega-head {
    justify-content: space-between;
    width: 100%;
  }

  .mega-label {
    flex: 1 1 auto;
    padding: .875rem 0;
    font-size: 1rem;
    color: var(--z-ink);
  }

  .mega-caret {
    padding: .875rem .5rem;
    color: var(--z-ink-muted);
  }

  .mega-panel {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 1.25rem .25rem;
    min-width: 0;
  }

  .mega-panel__cols,
  .mega-panel__cols--2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .mega-nav > .nav-item + .nav-item { border-top: 1px solid var(--z-line); }

  .mega-panel__foot {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

/* ---------------------------------------------------------------
   9.5 Tabbed mega panel — the Solutions menu
   "By trade" / "By use case" tabs. Tab switching is Bootstrap's
   own .nav-link / tab-pane behaviour; only the skin is ours.
   --------------------------------------------------------------- */
.mega-panel--tabbed {
  min-width: 48rem;
  max-width: min(72rem, calc(100vw - 3rem));
  padding: 0;                      /* the two halves own their padding */
}

.mega-tabbed { display: flex; }

.mega-tabs {
  flex: 0 0 11rem;
  gap: .25rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--z-line);
}

.mega-tab.nav-link {
  padding: .625rem .875rem;
  border: 0;
  border-radius: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  text-align: left;
  color: var(--z-ink-muted);
  background: none;
}

.mega-tab.nav-link:hover { color: var(--z-ink); }

.mega-tab.nav-link.active {
  background: var(--z-cream);
  color: var(--z-ink);
  font-weight: 600;
}

.mega-tab.nav-link:focus-visible { outline: 2px solid var(--z-orange); outline-offset: -2px; }

.mega-tabpanels { flex: 1 1 auto; padding: 1.5rem 1.75rem; min-width: 0; }

/* Trades grid */
.mega-trades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem 1.5rem;
}

/* Use-case cards — one post per category, set in Global Blocks */
.mega-usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.mega-usecase { display: block; text-decoration: none; }

.mega-usecase__eyebrow {
  display: block;
  margin-bottom: .375rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--z-ink-faint);
}

.mega-usecase__title {
  display: block;
  margin-bottom: .25rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--z-ink);
  transition: color .15s ease;
}

.mega-usecase:hover .mega-usecase__title { color: var(--z-orange); }

.mega-usecase__body {
  display: block;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--z-ink-muted);
}

@media (max-width: 991.98px) {
  .mega-panel--tabbed { min-width: 0; }

  .mega-tabbed { flex-direction: column; }

  .mega-tabs {
    flex: 0 0 auto;
    flex-direction: row !important;
    gap: .5rem;
    padding: .5rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--z-line);
  }

  .mega-tabpanels { padding: 1rem 0 0; }

  .mega-trades,
  .mega-usecases { grid-template-columns: 1fr; }
}


/* ===============================================================
   10. BREADCRUMBS — template-parts/partials/breadcrumbs.php
   ---------------------------------------------------------------
   Absolutely positioned over the top of <main>, so it floats on
   the hero rather than pushing it down. <main> is the containing
   block for it.
   =============================================================== */
main { position: relative; }

.custom-breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: .5rem 0;
  background: transparent;
}

.breadcrumb {
  --bs-breadcrumb-divider: none;   /* we draw our own "›" below */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  font-size: var(--z-fs-small);
  line-height: var(--z-lh-small);
  list-style: none;
  overflow: hidden;
}

.breadcrumb-item {
  min-width: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0;
  color: var(--z-ink-faint);
  font-size: 1rem;
  line-height: 1;
}

.breadcrumb-item a {
  color: var(--z-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.breadcrumb-item a:hover { color: var(--z-orange); }

/* Only the current page truncates; the ancestors keep their width */
.breadcrumb-item.active {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--z-ink);
  font-weight: 600;
}

.breadcrumb-item.active::before {
  margin-right: .5rem;
  padding-top: 3px;
}

.breadcrumb-item:not(.active) { flex: 0 0 auto; }

@media (max-width: 991.98px) {
  .breadcrumb {
    font-size: var(--z-fs-tag);
    margin-bottom: 0 !important;
  }
}


/* ===============================================================
   11. FOOTER — footer.php
   Brand / social / app badges column, link columns, legal bar.
   Content comes from Global Blocks.
   =============================================================== */
.site-footer {
  background: var(--z-navy-dark);
  color: var(--z-on-navy-text);
  padding: 2rem 0 2.5rem;
}

.site-footer a {
  color: var(--z-on-navy-text);
  text-decoration: none;
}

.site-footer a:hover { color: #fff; }

.site-footer__inner { color: #fff; }

/* ---- Brand ---- */
.footer-brand {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--z-orange);
}

.footer-brand .site-logo { height: 1.625rem; }   /* 26px */

/* The orange underline is only for the text fallback */
.footer-brand:has(.site-logo) {
  padding-bottom: 0;
  border-bottom: 0;
}

.footer-tagline {
  margin: 1.25rem 0 0;
  max-width: 16rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--z-on-navy-text);
}

/* ---- Social ---- */
.footer-social {
  display: flex;
  gap: .625rem;
  margin-top: 1.5rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--z-on-navy-border);
  border-radius: .5rem;
  color: var(--z-on-navy-text);
  transition: border-color .2s ease, color .2s ease;
}

.footer-social a:hover {
  border-color: var(--z-orange);
  color: var(--z-orange);
}

/* ---- App badges ---- */
.footer-label {
  margin: 1.75rem 0 .75rem;
  font-size: .8125rem;
  color: var(--z-on-navy-muted);
}

.footer-apps {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  align-items: flex-start;
}

.footer-app {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--z-on-navy-border);
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.footer-app:hover {
  border-color: var(--z-on-navy-muted);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

/* ---- Link columns ---- */
.footer-heading {
  margin: 0 0 1.125rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.footer-links li + li { margin-top: .75rem; }

.footer-links a {
  font-size: .9375rem;
  color: var(--z-on-navy-text);
  text-decoration: none;
  transition: color .15s ease;
}

.footer-links a:hover { color: #fff; }

/* ---- Legal bar ---- */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--z-on-navy-divider);
  font-size: .875rem;
  color: var(--z-on-navy-muted);
}

@media (min-width: 576px) {
  .site-footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-legal-links { display: flex; gap: 1.5rem; }

.footer-legal-links a {
  color: var(--z-on-navy-muted);
  text-decoration: none;
}

.footer-legal-links a:hover { color: #fff; }


/* ===============================================================
   12. REDUCED MOTION
   ---------------------------------------------------------------
   Single global opt-out. Every transition or animation added above
   should be switched off here rather than in its own media query.
   =============================================================== */
@media (prefers-reduced-motion: reduce) {

  .btn,
  .logo-strip .logo-item img,
  .grid-card,
  .icon-tile,
  .blog-card,
  .icon-row,
  .mega-caret__icon { transition: none; }

  .grid-card:hover,
  .icon-tile:hover,
  .blog-card:hover,
  a.icon-row:hover { transform: none; }

  .mega-item.is-open > .mega-panel { animation: none; }
}