/*
Theme Name:        Layerly Base
Theme URI:         https://layerly.io
Author:            Layerly
Author URI:        https://layerly.io
Description:       Layerly Base Theme — the v1.0 reference implementation of the Layerly Conventions Framework. Fork this theme per client; do not edit in place. Requires the Layerly Bridge plugin for runtime helpers and admin chat.
Version: 1.0.0-r39-923999f6
Requires at least: 6.0
Requires PHP:      8.0
Layerly Bridge:    >=4.7.0
Layerly Conventions: v1.0
Text Domain:       layerly-base
License:           Proprietary
Tags:              layerly, layerly-v1
*/

/* ════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — numbered (variable per site) + functional aliases.
   Override values per site. Add --color-N or --font-N as the design needs.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --color-success: #059669;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --color-highlight: var(--color-7);
  --font-3: system-ui, -apple-system, sans-serif;
  --font-subheading: var(--font-3);
  --text-xl: 28px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.08);
  --sh-md: 0 4px 12px rgba(0,0,0,.12);
  --sh-lg: 0 12px 32px rgba(0,0,0,.18);
  --container-max: 1200px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --color-1: #FFFFFF;
  --color-2: #005176;
  --color-3: #0B1F29;
  --color-4: #E3E9ED;
  --color-5: #2789C1;
  --color-6: #00344A;
  --color-7: #2789C180;
  --color-8: #00344A73;
  --color-text: #0B1F29;
  --color-text-muted: #4A5D68;
  --color-bg: #FFFFFF;
  --color-surface: #E3E9ED;
  --color-primary: #005176;
  --color-accent: #2789C1;
  --color-deep: #00344A;
  --color-border: #D2DBE1;
  --font-1: 'Source Sans 3', sans-serif;
  --font-2: 'Poppins', sans-serif;
  --font-display: var(--font-2);
  --font-body: var(--font-1);
  --font-utility: var(--font-1);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 80px;
  --space-xxl: 120px;
  --text-xs: 15px;
  --text-sm: 15px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-h3: 25px;
  --text-h2: 48px;
  --text-h1: 48px;
  --text-ghost: 120px;
  --weight-reg: 400;
  --weight-med: 500;
  --weight-bold: 600;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --measure: 1200px;
  --color-accent-on-dark: #5CB2E6;
  --dot-pattern: url("/wp-content/uploads/2026/09/2d25c949ec5cef61bfb15ded865a615b.webp");
  /* 180px = 360 * 0.5 — dots 50% smaller than the first pass. */
  --dot-pattern-size: 180px;
  --dot-scrim-dark: linear-gradient(rgba(0, 52, 74, 0.93), rgba(0, 52, 74, 0.93));
  /* Light grounds: the dot asset is opaque, so a 0.8 scrim leaves the dots
     reading at 0.2 — the scrim alpha is the inverse of the dot opacity. */
  --dot-scrim-light: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
  --dot-scrim-surface: linear-gradient(rgba(227, 233, 237, 0.8), rgba(227, 233, 237, 0.8));
}

/* ════════════════════════════════════════════════════════════════════
   2. RESET + ROOT
   ════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg);
  background-image: var(--dot-scrim-light), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}

img, picture, svg, video, canvas {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--weight-med); }
h6 { font-size: var(--text-md); font-weight: var(--weight-med); text-transform: uppercase; letter-spacing: .05em; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* (Responsive type is now handled fluidly by the clamp() heading tokens in :root —
   no hard 768px breakpoint needed.) */

/* ════════════════════════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════════ */
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .wrap { padding-inline: var(--space-lg); }
}

/* Base section — every page section uses this anatomy.
   Sets up the position, background, overlay, decoration, divider hooks. */
.section {
    position: relative;
    /* --section-pad-y: the ONE vertical-rhythm knob, on every section. It replaces six
       per-component `--*-pad-y` knobs that were declared in manifests and wired to nothing:
       vertical padding is section anatomy, not a property of the component inside it. */
    padding-block: var(--section-pad-y, var(--space-xxl));
    /* `clip` contains decorations/dividers exactly like `hidden`, but does NOT create a
       scroll container — so `position: sticky` descendants (e.g. the sticky-stack section)
       can pin against the viewport instead of against this box. `overflow: hidden` silently
       broke sticky for EVERY section (Aveya, 2026-07-24). The `hidden` line is the fallback
       for engines without `clip`; both contain the decorations. */
    overflow: hidden;
    overflow: clip;
}

/* Section background variants — emitted by layerly_section_classes() */
.section--bg-color {
    background-color: var(--section-bg-color, transparent);
}
.section--bg-image {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: center;
}
.section--bg-gradient {
    background-image: var(--section-bg-gradient);
}

/* Color overlay on backgrounds (for legibility over images) */
.section--with-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--section-overlay-color, transparent);
    opacity: var(--section-overlay-opacity, 0);
    pointer-events: none;
    z-index: 1;
}
.section--with-overlay > * { position: relative; z-index: 2; }

/* Decoration slot — pseudo-element for background design accents */
.section--decorated::before {
    content: '';
    position: absolute;
    pointer-events: none;
    background-color: var(--decoration-color, var(--color-1));
    opacity: var(--decoration-opacity, .15);
    z-index: 0;
}
/* Default decoration: a circle */
.section--decorated::before {
    width: 240px;
    height: 240px;
    border-radius: 50%;
}
.section--decorated[style*="--decoration-size: sm"]::before { width: 120px; height: 120px; }
.section--decorated[style*="--decoration-size: md"]::before { width: 240px; height: 240px; }
.section--decorated[style*="--decoration-size: lg"]::before { width: 360px; height: 360px; }
.section--decorated[style*="--decoration-size: xl"]::before { width: 480px; height: 480px; }

.section--decorated[style*="--decoration-position: top-left"]::before     { top: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: top-right"]::before    { top: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: bottom-left"]::before  { bottom: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: bottom-right"]::before { bottom: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: center"]::before {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ── Sticky-stack — a REGISTERED behavioural primitive (v1.0, 2026-07-24) ─────────────
   Any section can opt a direct child list into a scroll-driven stacked-card effect: each
   card pins to the vertical centre as it scrolls up, the next card slides over it leaving a
   small "peek" of the one beneath, and covered cards tilt slightly. This is composed, never
   hand-built (rulebook: behaviours come from the library). It is why the Aveya request
   failed as bespoke CSS — the list was flex (no sticky runway) and `.section{overflow:hidden}`
   killed sticky outright (now `overflow:clip`, above).

   Compose:  add class `sticky-stack` to the SECTION, and `sticky-stack__list` / `sticky-stack__item`
             to the repeating list + cards. Knobs via inline style on the section:
               --stack-peek   (px between pinned cards; default 16)
               --stack-card-h (approx card height, to centre the pin; default 480px)
               --stack-tilt   (max rotation of a covered card; default 2.5deg)
   Below --stack-bp (default 900px) it degrades to normal flow — a pinned 480px card is worse
   than a simple stack on a phone. Motion is OFF under prefers-reduced-motion (a11y floor). */
.sticky-stack { --stack-peek: 16px; --stack-card-h: 480px; --stack-tilt: 2.5deg; --stack-bp: 900px; }

@media (min-width: 900px) {
  .sticky-stack .sticky-stack__list {
    display: block;                              /* out of flex → normal flow gives sticky its runway */
    max-width: 560px; margin-inline: auto; padding: 0; list-style: none;
  }
  .sticky-stack .sticky-stack__item {
    position: sticky;
    top: max(96px, calc(50vh - var(--stack-card-h) / 2));   /* pin to centre, never under the nav */
    margin-bottom: 26vh;                                     /* the scroll distance between pins */
    transform-origin: 50% 0%;
    box-shadow: var(--sh-lg);
  }
  .sticky-stack .sticky-stack__item:last-child { margin-bottom: 0; }
  /* each card pins one --stack-peek lower than the previous, so a sliver stays visible */
  .sticky-stack .sticky-stack__item:nth-child(1) { z-index: 1; }
  .sticky-stack .sticky-stack__item:nth-child(2) { z-index: 2; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 1)); }
  .sticky-stack .sticky-stack__item:nth-child(3) { z-index: 3; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 2)); }
  .sticky-stack .sticky-stack__item:nth-child(4) { z-index: 4; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 3)); }
  .sticky-stack .sticky-stack__item:nth-child(5) { z-index: 5; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 4)); }
  .sticky-stack .sticky-stack__item:nth-child(6) { z-index: 6; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 5)); }

  /* Scroll-driven tilt via native CSS scroll timelines — no JS to enqueue or break. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .sticky-stack .sticky-stack__item {
        animation: layerly-stack-tilt linear both;
        animation-timeline: view();
        animation-range: contain 35% exit 100%;
      }
      @keyframes layerly-stack-tilt {
        from { transform: rotate(0deg) scale(1); }
        to   { transform: rotate(calc(-1 * var(--stack-tilt))) scale(.94); }
      }
    }
  }
  /* No scroll-timeline support → a static alternating tilt still reads as a hand-placed stack. */
  @supports not (animation-timeline: view()) {
    .sticky-stack .sticky-stack__item:nth-child(odd)  { transform: rotate(calc(-0.5 * var(--stack-tilt))); }
    .sticky-stack .sticky-stack__item:nth-child(even) { transform: rotate(calc(0.5 * var(--stack-tilt))); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-stack .sticky-stack__list { display: flex; flex-direction: column; gap: var(--space-lg); }
  .sticky-stack .sticky-stack__item { position: static; transform: none; animation: none; margin-bottom: 0; }
}

/* Section dividers — emitted on the section element. SVGs live in assets/dividers/. */
.section[class*="section--divider-top-"] {
    /* Top divider rendered via ::before override below — sections with both
       a decoration AND a divider need careful ordering. v1 keeps it simple. */
}

/* Section header — used by every section that has a heading area */
.section-head {
    margin-bottom: var(--space-xl);
}
.section-head--center { text-align: center; }
.section-head--center .section-head__inner { max-width: 720px; margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-surface);
}
.btn--primary:hover { filter: brightness(.92); }

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-text); }

.btn--link {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    border: none;
}

/* ════════════════════════════════════════════════════════════════════
   6. SHAPE UTILITIES (used by layerly_image's `shape` arg)
   Each emits a `.shape-*` class.
   ════════════════════════════════════════════════════════════════════ */
.shape-square      { border-radius: 0; }
.shape-rounded-sm  { border-radius: var(--radius-sm); }
.shape-rounded-md  { border-radius: var(--radius-md); }
.shape-rounded-lg  { border-radius: var(--radius-lg); }
.shape-circle      { border-radius: 9999px; aspect-ratio: 1; object-fit: cover; }
.shape-arch        { border-radius: 9999px 9999px 0 0; }
.shape-tilt        { transform: rotate(-3deg); }
/* Custom shapes (e.g. blob, squiggle) — drop SVG into assets/shapes/ and
   add .shape-<name> using mask-image: url(/wp-content/themes/<slug>/assets/shapes/<name>.svg) */

/* ════════════════════════════════════════════════════════════════════
   7. ICONS
   ════════════════════════════════════════════════════════════════════ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    color: currentColor;
}
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon--sm { font-size: var(--text-sm); }
.icon--md { font-size: var(--text-md); }
.icon--lg { font-size: var(--text-lg); }
.icon--xl { font-size: var(--text-xl); }
.icon--missing {
    width: 1em; height: 1em;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-text);
    color: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    z-index: 999999;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   9. COMPONENT STYLES — each component owns its own block, scoped by BEM.
   New families append below as the catalog grows.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section header (used inside other sections) ── */
.section-head__heading {
  margin-bottom: var(--space-md);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
}
.section-head__sub {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 720px;
    margin: 0;
}
.section-head--center .section-head__sub { margin-inline: auto; }

/* ── Site header (template-parts/headers/standard.php) ── */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sh-sm);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
}
.site-header__logo img { max-height: 48px; width: auto; }
.site-header__logo-text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-header__nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; gap: var(--space-lg);
}
.site-header__nav-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-med);
}
.site-header__nav-list a:hover { color: var(--color-primary); }
.site-header__menu-toggle {
    display: none;
    background: transparent; border: none; padding: var(--space-sm); cursor: pointer; color: var(--color-text);
}

@media (max-width: 767px) {
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__nav {
        position: fixed;
        inset: 60px 0 0 0;
        background: var(--color-surface);
        padding: var(--space-lg);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        transform: translateX(100%);
        transition: transform .25s ease-out;
        z-index: 99;
    }
    .site-header__nav.is-open { transform: translateX(0); }
    .site-header__nav-list { flex-direction: column; gap: var(--space-md); }
}

/* ── Site footer (template-parts/footers/multi-column.php) ── */
.site-footer {
    background: var(--color-2);
    color: var(--color-surface);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { opacity: .85; }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-xxl);
}
.site-footer__tagline { color: rgba(255,255,255,.7); margin-top: var(--space-md); }
.site-footer__social { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.site-footer__social a { display: inline-flex; }
.site-footer__nav-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.site-footer__column-heading { font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--color-surface); }
.site-footer__contact p { margin-bottom: var(--space-sm); }
.site-footer__bar {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--space-md);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.7);
}
.site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.site-footer__legal-list { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin: 0; }

@media (max-width: 767px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* ── Hero (template-parts/heroes/centered.php) ── */
.hero { padding-block: var(--space-xxl); }
.hero__inner { text-align: center; max-width: 800px; margin-inline: auto; }
.hero__eyebrow { margin-bottom: var(--space-sm); }
.hero__title { margin-bottom: var(--space-md); font-size: var(--hero-title-size, var(--text-h1)); }
.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.hero__ctas {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}
.hero__ctas:not(:last-child) { margin-bottom: var(--space-xl); }
.hero__media { margin-top: var(--space-xl); }
.hero__media img { display: block; margin-inline: auto; }

/* ── Intro split (template-parts/intro-splits/image-left.php) ── */
.intro-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--intro-gap, var(--space-xxl));
    align-items: center;
}
/* If there's no media slot rendered, collapse to one column */
.intro-split__inner:has(> .intro-split__content:only-child) {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}
.intro-split--image-right .intro-split__inner > .intro-split__media:first-child { order: 2; }
.intro-split__media img { width: 100%; height: auto; }
.intro-split__title { margin-bottom: var(--space-md); }
.intro-split__cta { margin-top: var(--space-lg); }

@media (max-width: 767px) {
    .intro-split__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ── Service grid — cards ── */
.service-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--services-cols, auto-fill), minmax(280px, 1fr));
    gap: var(--services-gap, var(--space-lg));
}
.service-card {
    background: var(--services-card-bg, var(--color-surface));
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .15s, box-shadow .15s;
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.service-card__link { display: block; text-decoration: none; color: inherit; }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__image { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-lg); }
.service-card__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.service-card__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.service-card__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Generic CPT loop (cpt-loop/grid) — any custom post type ── */
/* Consumes --section-bg-color first (F17/B18) — a bg_type:color prop on this
   section must win over the component's own default, not lose to it. */
.cpt-loop { background: var(--section-bg-color, var(--cpt-loop-bg, var(--color-bg))); }
.cpt-loop__list {
    display: grid;
    grid-template-columns: repeat(var(--cpt-loop-cols, 3), 1fr);
    gap: var(--cpt-loop-gap, var(--space-lg));
}
@media (max-width: 900px) { .cpt-loop__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cpt-loop__list { grid-template-columns: 1fr; } }
.cpt-loop__card {
    background: var(--cpt-loop-card-bg, var(--color-surface));
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .15s, box-shadow .15s;
}
.cpt-loop__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cpt-loop__link { display: block; text-decoration: none; color: inherit; }
.cpt-loop__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cpt-loop__image { width: 100%; height: 100%; object-fit: cover; }
.cpt-loop__body { padding: var(--space-lg); }
.cpt-loop__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.cpt-loop__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.cpt-loop__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Radio group field ── */
.field--radio .field__radios { display: flex; flex-direction: column; gap: var(--space-sm); }
.field--radio .field__radio { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }

/* ── Testimonial — single large ── */
.testimonial-large__figure {
    color: var(--testimonials-fg, inherit);
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
.testimonial-large__rating { font-size: var(--text-xl); color: var(--color-warning); margin-bottom: var(--space-md); letter-spacing: .1em; }
.testimonial-large__quote {
    font-size: var(--testimonials-quote-size, var(--text-xl));
    font-family: var(--font-display);
    line-height: 1.35;
    margin: 0 0 var(--space-xl);
    quotes: '"' '"';
}
.testimonial-large__quote::before { content: open-quote; }
.testimonial-large__quote::after  { content: close-quote; }
.testimonial-large__author { display: inline-flex; align-items: center; gap: var(--space-md); }
.testimonial-large__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial-large__author-text { text-align: left; }
.testimonial-large__name { display: block; font-weight: var(--weight-bold); }
.testimonial-large__role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── CTA banner ── */
/* Consumes --section-bg-color first (F17/B18) — see .cpt-loop above. */
.cta-banner {
    background: var(--section-bg-color, var(--color-primary));
    color: var(--cta-fg, var(--color-surface));
    text-align: var(--cta-align, initial);
}
.cta-banner .cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
    flex-wrap: wrap;
}
.cta-banner__heading { color: var(--color-surface); margin: 0 0 var(--space-sm); }
.cta-banner__body { margin: 0; opacity: .9; max-width: 560px; }
.cta-banner__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cta-banner .btn--primary {
    background: var(--color-surface);
    color: var(--color-primary);
}
.cta-banner .btn--ghost { border-color: var(--color-surface); color: var(--color-surface); }

@media (max-width: 767px) {
    .cta-banner .cta-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Trust bar ── */
.trust-bar { padding-block: var(--trust-pad-y, var(--space-xl)); }
.trust-bar__heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.trust-bar__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--trust-gap, var(--space-xl));
}
.trust-bar__item { opacity: .75; transition: opacity .2s; }
.trust-bar__item:hover { opacity: 1; }
.trust-bar__logo { max-height: 40px; width: auto; filter: grayscale(1); }
.trust-bar__item:hover .trust-bar__logo { filter: grayscale(0); }
.trust-bar__label { color: var(--color-text-muted); font-weight: var(--weight-med); }

/* ── Reveal-on-scroll ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   M4 APPENDIX — new variants, families, dividers, eyebrow-with-lines
   ════════════════════════════════════════════════════════════════════ */

/* ── Section dividers (wave / slant / curve) ──
   Templates add `section--divider-top-<shape>` and/or
   `section--divider-bottom-<shape>` via layerly_section_classes(). The SVG
   is masked using --divider-fill from the section's background so the
   divider blends into whatever sits behind it. */
.section[class*="section--divider-top-"]    { padding-top:    calc(var(--space-xxl) + 60px); }
.section[class*="section--divider-bottom-"] { padding-bottom: calc(var(--space-xxl) + 60px); }

.section[class*="section--divider-top-"]::after,
.section[class*="section--divider-bottom-"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    pointer-events: none;
    background-color: var(--color-surface);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
.section[class*="section--divider-top-"]::after    { top: 0;    transform: scaleY(-1); }
.section[class*="section--divider-bottom-"]::before { bottom: 0; }

/* Note: divider colour defaults to --color-surface; override per-section by
   setting --color-divider on the section element. */
.section[class*="section--divider-"][style*="--color-divider"]::after,
.section[class*="section--divider-"][style*="--color-divider"]::before {
    background-color: var(--color-divider);
}

.section--divider-top-wave::after,    .section--divider-bottom-wave::before    { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg);  mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg); }
.section--divider-top-slant::after,   .section--divider-bottom-slant::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); }
.section--divider-top-curve::after,   .section--divider-bottom-curve::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); }

/* ── Hero — split variant ── */
.hero__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hero-gap, var(--space-xxl));
    align-items: center;
}
.hero--image-left .hero__inner--split > .hero__media   { order: 1; }
.hero--image-left .hero__inner--split > .hero__content { order: 2; }
.hero--split .hero__title    { font-size: var(--text-xxl); line-height: 1.1; margin-bottom: var(--space-md); }
.hero--split .hero__subtitle { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.hero--split .hero__ctas     { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero--split .hero__media img { width: 100%; height: auto; display: block; }

@media (max-width: 880px) {
    .hero__inner--split { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hero--image-left .hero__inner--split > .hero__media,
    .hero--image-left .hero__inner--split > .hero__content { order: initial; }
}

/* ── Section head — left variant + with-line-side eyebrow ── */
.section-head--left              { text-align: left; }
.section-head--left .section-head__inner { max-width: none; margin-inline: 0; }

.eyebrow--with-lines {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    justify-content: center;
}
.eyebrow--with-lines .eyebrow__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    max-width: 80px;
}
.eyebrow--with-lines .eyebrow__label { white-space: nowrap; }

/* ── Testimonials — carousel variant ── */
.testimonial-carousel { padding-block: var(--space-xxl); }
.tcarousel {
    color: var(--testimonials-fg, inherit);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
}
.tcarousel__track {
    grid-column: 2;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.tcarousel__track::-webkit-scrollbar { display: none; }

.tcarousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: var(--space-xl);
    text-align: center;
    box-sizing: border-box;
}
.tcarousel__rating { color: var(--color-accent, var(--color-primary)); letter-spacing: 2px; margin-bottom: var(--space-md); }
.tcarousel__quote {
    font-size: var(--text-lg);
    line-height: 1.5;
    margin: 0 0 var(--space-lg);
    max-width: 720px;
    margin-inline: auto;
}
.tcarousel__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
}
.tcarousel__photo img { width: 56px; height: 56px; }
.tcarousel__author-text { display: flex; flex-direction: column; }
.tcarousel__name { font-weight: var(--weight-bold); }
.tcarousel__role { color: var(--color-text-muted); font-size: var(--text-sm); }

.tcarousel__nav {
    grid-row: 1;
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.tcarousel__nav:hover  { background: var(--color-bg-alt); }
.tcarousel__nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tcarousel__nav--prev { grid-column: 1; }
.tcarousel__nav--next { grid-column: 3; }

.tcarousel__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.tcarousel__dot, .carousel__dot {
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s, transform .15s;
}
.tcarousel__dot.is-active, .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

@media (max-width: 720px) {
    .tcarousel { grid-template-columns: 1fr; }
    .tcarousel__nav { display: none; }
    .tcarousel__track { grid-column: 1; }
}

/* ── Disclosures — accordion ── */
.accordion { border-top: 1px solid var(--accordion-border, var(--color-border)); }
.accordion__item {
    border-bottom: 1px solid var(--accordion-border, var(--color-border));
}
.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--accordion-pad, var(--space-lg)) 0;
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.accordion__question { flex: 1; font-size: var(--accordion-q-size, var(--text-md)); }
.accordion__icon {
    color: var(--color-text-muted);
    transition: transform .25s ease;
    display: inline-flex;
}
.accordion__item[open] > .accordion__summary .accordion__icon { transform: rotate(180deg); }
.accordion__answer {
    padding: 0 0 var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ── Team — grid ── */
.team__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--team-cols, auto-fit), minmax(220px, 1fr));
    gap: var(--team-gap, var(--space-xl));
}
.team__member { text-align: center; }
.team__photo { margin-bottom: var(--space-md); }
.team__photo-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 9999px;
}
.team__name { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.team__role { color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.team__bio  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.team__social {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}
.team__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    color: var(--color-text-muted);
    transition: color .15s, background-color .15s;
}
.team__social a:hover { color: var(--color-primary); background: var(--color-bg-alt); }

/* ── Process steps — numbered ── */
.process-steps__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    counter-reset: layerly-step;
}
.process-steps__item {
    position: relative;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.process-steps__number {
    font-size: var(--text-xxl);
    line-height: 1;
    font-weight: var(--weight-bold);
    color: var(--process-accent, var(--color-primary));
    opacity: .35;
    margin-bottom: var(--space-md);
}
.process-steps__icon { color: var(--color-primary); margin-bottom: var(--space-md); font-size: 32px; }
.process-steps__title { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.process-steps__desc  { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* ── Feature blocks — alternating ── */
.feature-blocks__list {
    display: flex;
    flex-direction: column;
    gap: var(--features-gap, var(--space-xxl));
}
.feature-blocks__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
.feature-blocks__row--image-right > .feature-blocks__media   { order: 2; }
.feature-blocks__row--image-right > .feature-blocks__content { order: 1; }
.feature-blocks__media img { width: 100%; height: auto; display: block; }
.feature-blocks__title { margin: 0 0 var(--space-md); font-size: var(--text-xl); }
.feature-blocks__body  { color: var(--color-text-muted); line-height: 1.65; }
.feature-blocks__body p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
    .feature-blocks__row,
    .feature-blocks__row--image-right { grid-template-columns: 1fr; }
    .feature-blocks__row > *,
    .feature-blocks__row--image-right > * { order: initial; }
}

/* ── Site footer — minimal ── */
.site-footer--minimal { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.site-footer--minimal .site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__minimal-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__copyright { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer--minimal .site-footer__legal-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--space-md);
}
.site-footer--minimal .site-footer__legal-list a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}
.site-footer--minimal .site-footer__legal-list a:hover { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY (P1) — nav · footer · form · fields
   Structure/behavior LOCKED. Per-site look = override the --knobs below.
   ════════════════════════════════════════════════════════════════════ */

/* ── Component: nav/primary ── */
.nav {
    --nav-bg: var(--color-surface);
    --nav-fg: var(--color-text);
    --nav-height: 72px;
    --nav-link-weight: var(--weight-med);
    --nav-link-hover: var(--color-primary);
    --nav-gap: var(--space-lg);
    background: var(--nav-bg);
    color: var(--nav-fg);
}
[data-nav-sticky] { position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s; }
[data-nav-sticky].is-scrolled { box-shadow: var(--sh-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); min-height: var(--nav-height); }
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nav__logo-img { max-height: calc(var(--nav-height) - var(--space-lg)); width: auto; }
.nav__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: inherit; }
.nav__menu { display: flex; align-items: center; gap: var(--nav-gap); }
.nav__list { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.nav__list a { color: inherit; text-decoration: none; font-weight: var(--nav-link-weight); }
.nav__list a:hover { color: var(--nav-link-hover); }
.nav__cta { white-space: nowrap; }

/* ── Chrome behavior — LOCKED, attribute-driven ───────────────────────────
   Works on nav/primary AND any bespoke header/footer that uses the data hooks.
   Design the LOOK on your own classes / the --mobile-menu-* vars; the BEHAVIOR
   (full-screen drawer, hamburger→X, body-lock) comes from here — never rebuilt.
   Hooks: [data-mobile-menu-toggle] (the hamburger button, 3 <span> bars),
   [data-mobile-menu] (the drawer), [data-nav-sticky] (above). */
/* ── The toggle: knob-driven, and the X is DERIVED from the knobs ────────────────────
   The travel used to be a hardcoded translateY(9px), which is only correct for 3px bars
   with a 6px gap. That made the icon impossible to make configurable: any knob touching
   bar height or gap would leave the two arms missing each other, silently, on every site
   that set it. Measured while designing the replacement — the "thin" option was 4px out
   and the two-bar option 1.25px out. calc(bar + gap) is exactly the distance an outer bar
   must travel to reach the centre, so EVERY combination of knobs lands a true X.

   DEFAULT CHANGED 2026-09-08 (Alexander: "the thin look looks the best… let's go with b"):
   30x1.5 square-ended bars, replacing 26x3 rounded. Sites that want the old look set the
   knobs; nobody has to fork the component.

   44x44 is the tap target and is deliberately NOT a knob — it is an accessibility floor
   (COMMAND 07-standards/theme-knobs.md §4). */
[data-mobile-menu-toggle] {
    --nav-toggle-bar-w: 30px;
    --nav-toggle-bar-h: 1.5px;
    --nav-toggle-gap: 6px;
    --nav-toggle-radius: 0;
    --nav-toggle-color: currentColor;
    /* --nav-toggle-align is deliberately NOT declared here. A variant supplies its own DEFAULT
       through the var() fallback below, so a site that sets the knob still wins. Declaring it
       on the base rule is what broke the staggered variant: its attribute selector (0,2,0)
       outranked any class or rule a site would realistically use to override it, so
       --nav-toggle-align:flex-end had no effect and left- and right-aligned rendered
       identically. A variant must default a knob, never set it. */
    /* The tap target. Kept in a variable so the padding maths below can read it — NOT a knob,
       and never below 44px (accessibility floor, theme-knobs.md §4). */
    --nav-toggle-size: 44px;
    display: none; position: relative; z-index: 1002;
    flex-direction: column; justify-content: center; align-items: var(--nav-toggle-align, center);
    gap: var(--nav-toggle-gap);
    width: var(--nav-toggle-size); height: var(--nav-toggle-size);
    /* The content box is exactly ONE BAR wide and centred inside the tap target. That is what
       lets --nav-toggle-align line up the ragged edge of the staggered variant WITHOUT shoving
       the whole icon off-centre: with plain flex-start the bars sat flush against the button's
       left edge, 7px left of every other icon in the header. Measured, not guessed. For the
       default (all bars equal) this changes nothing — the box is the bar width either way. */
    padding-block: 0;
    padding-inline: max(0px, calc((var(--nav-toggle-size) - var(--nav-toggle-bar-w)) / 2));
    background: none; border: 0; color: inherit; cursor: pointer;
}
[data-mobile-menu-toggle] > span {
    display: block;
    width: var(--nav-toggle-bar-w);
    height: var(--nav-toggle-bar-h);
    border-radius: var(--nav-toggle-radius);
    background: var(--nav-toggle-color);
    transition: transform .25s ease, opacity .2s ease, width .25s ease;
}
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(1) { transform: translateY(calc(var(--nav-toggle-bar-h) + var(--nav-toggle-gap))) rotate(45deg); }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(3) { transform: translateY(calc(-1 * (var(--nav-toggle-bar-h) + var(--nav-toggle-gap)))) rotate(-45deg); }

/* Variants, selected by DATA ATTRIBUTE so a bespoke header opts in without new CSS —
   the same contract the drawer itself uses. Both are shapes, not values, which is why
   they are variants rather than knobs (07-standards/theme-knobs.md §2). */

/* two — drops the middle bar; each remaining bar travels HALF the distance. */
[data-mobile-menu-toggle][data-nav-toggle="two"] > span:nth-child(3) { display: none; }
[data-mobile-menu-toggle][data-nav-toggle="two"][aria-expanded="true"] > span:nth-child(1) { transform: translateY(calc((var(--nav-toggle-bar-h) + var(--nav-toggle-gap)) / 2)) rotate(45deg); }
/* the 3-bar rule above hides the middle bar; this variant NEEDS it, so put it back.
   (Caught by eye, not by measurement: both arms measured dead centre while the icon
   still drew a single stroke, because opacity is not position.) */
[data-mobile-menu-toggle][data-nav-toggle="two"][aria-expanded="true"] > span:nth-child(2) { opacity: 1; transform: translateY(calc(-1 * (var(--nav-toggle-bar-h) + var(--nav-toggle-gap)) / 2)) rotate(-45deg); }

/* stagger — uneven bar widths that square up on open. Ragged edge follows
   --nav-toggle-align, so it reads left- or right-aligned rather than centred. */
[data-mobile-menu-toggle][data-nav-toggle="stagger"] { align-items: var(--nav-toggle-align, flex-start); }
[data-mobile-menu-toggle][data-nav-toggle="stagger"] > span:nth-child(2) { width: calc(var(--nav-toggle-bar-w) * .68); }
[data-mobile-menu-toggle][data-nav-toggle="stagger"] > span:nth-child(3) { width: calc(var(--nav-toggle-bar-w) * .84); }
[data-mobile-menu-toggle][data-nav-toggle="stagger"][aria-expanded="true"] > span { width: var(--nav-toggle-bar-w); }

@media (max-width: 768px) {
    [data-mobile-menu-toggle] { display: inline-flex; }
    [data-mobile-menu] {
        position: fixed; inset: 0; z-index: 1001;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: var(--space-lg); padding: var(--space-xxl) var(--space-lg);
        /* Solid brand fallback — NOT --nav-bg, which is often transparent on a
           transparent-over-hero header and would make the whole drawer invisible. */
        background: var(--mobile-menu-bg, var(--color-1));
        color: var(--mobile-menu-fg, var(--color-surface));
        transform: translateX(100%); transition: transform .3s ease; overflow-y: auto;
    }
    [data-mobile-menu].is-open { transform: translateX(0); }
    [data-mobile-menu] ul { flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; margin: 0; padding: 0; list-style: none; }
    [data-mobile-menu] a { font-size: var(--text-lg); color: var(--mobile-menu-fg, var(--color-surface)); }
    body.mobile-menu-open { overflow: hidden; }
    /* When the drawer is open the hamburger→X sits OVER the drawer — force it to the
       drawer's fg so it's always visible even if the header's own color is dark/transparent. */
    [data-mobile-menu-toggle][aria-expanded="true"] { color: var(--mobile-menu-fg, var(--color-surface)); }
}

/* ── WP admin-bar offset — LOCKED (FIX 80: generalized from 3 hardcoded selectors + a
   duplicated 782px override block into ONE custom property, so NEW fixed chrome is
   covered automatically instead of needing to be added to this rule by name every time —
   a pre-header added 2026-07-29 was never added here and slid under the bar). The 32px
   admin bar (46px ≤782px) is fixed to the viewport top and only shown to logged-in users.
   WordPress shifts NORMAL-flow content for it, but NOT position:fixed/sticky/absolute
   chrome — so any top-anchored fixed element (header, pre-header, announcement bar, ...)
   renders UNDER the bar for a logged-in visitor unless its OWN `top` consumes
   --wp-adminbar-offset. The property only EXISTS under body.admin-bar, so
   `var(--wp-adminbar-offset, 0px)` correctly falls back to 0 for the far-more-common
   logged-out visitor — which is exactly why this bug class is invisible without an admin
   session. Any bespoke top-anchored fixed component MUST write its own `top` as
   `calc(<its own stacking offset — 0, or a sibling chrome element's height> +
   var(--wp-adminbar-offset, 0px))` so it stacks additively instead of one fixed element's
   hardcoded top clobbering another's — see admin-rulebook.js "FIXED CHROME". ── */
body.admin-bar { --wp-adminbar-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --wp-adminbar-offset: 46px; }
}
body.admin-bar [data-nav-sticky],
body.admin-bar [data-nav-overlay],
body.admin-bar .site-header--overlay { top: var(--wp-adminbar-offset); }

/* ── Standard copyright line (footer.php, every site — themeable) ── */
.layerly-copyright { background: var(--footer-copyright-bg, var(--color-2)); color: var(--footer-copyright-fg, var(--color-surface)); text-align: center; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); }
.layerly-copyright__line { margin: 0; }
/* Match the other small text in this site's footer (sms-columns.php) —
   legal links / contact pills / hours all use --text-sm; the copyright line
   was rendering at 18px, larger than its siblings. */
.smsfooter .layerly-copyright__line {
  font-size: var(--text-sm);
}
.layerly-copyright__sep { opacity: .5; margin: 0 .35em; }
/* FIX 47 (Alexander, 2026-07-24) — the "Made by Layerly" credit is NEVER underlined, on
   every site we build. Two selectors on purpose: `.layerly-copyright` covers footer.php's
   fallback strip, `.layerly-copyright__line` covers a BESPOKE footer template-part that calls
   layerly_footer_credit() directly — the case that shipped underlined on Aveya, because the
   theme's other `text-decoration:none` rule is scoped to `.site-footer`, which bespoke
   footers don't have. Underline returns on hover/focus so the link stays discoverable and
   keyboard-visible (a resting state with neither underline nor colour contrast would fail
   WCAG 1.4.1). */
.layerly-copyright a,
.layerly-copyright__line a { color: inherit; text-decoration: none; }
.layerly-copyright a:hover,
.layerly-copyright a:focus-visible,
.layerly-copyright__line a:hover,
.layerly-copyright__line a:focus-visible { text-decoration: underline; }

/* ── Component: footers/columns ── */
.footer {
    --footer-bg: var(--color-2);
    --footer-fg: var(--color-surface);
    --footer-heading: var(--color-surface);
    --footer-link: rgba(255,255,255,.7);
    --footer-link-hover: var(--color-surface);
    --footer-pad-y: var(--space-xxl);
    --footer-cols: 4;
    background: var(--footer-bg);
    color: var(--footer-fg);
}
.footer__inner {
    display: grid; gap: var(--space-xl);
    grid-template-columns: 1.4fr repeat(var(--footer-cols), 1fr);
    padding-block: var(--footer-pad-y);
}
.footer__logo { display: inline-flex; text-decoration: none; color: inherit; }
.footer__logo-img { max-height: 44px; width: auto; }
.footer__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.footer__tagline { color: var(--footer-link); margin-top: var(--space-md); max-width: 32ch; }
.footer__columns { display: contents; }
.footer__col-heading { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--footer-heading); margin-bottom: var(--space-md); }
.footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__col-list a, .footer__legal-list a { color: var(--footer-link); text-decoration: none; }
.footer__col-list a:hover, .footer__legal-list a:hover { color: var(--footer-link-hover); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); }
.footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-lg); }
.footer__copyright { margin: 0; color: var(--footer-link); font-size: var(--text-sm); }
.footer__legal-list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
@media (max-width: 768px) {
    .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer__inner { grid-template-columns: 1fr; }
}

/* ── Field primitives (fields/*) ──
 * The `.form*` rules that used to sit here moved into the bridge plugin as
 * assets/layerly-forms.css (LAYERLY-FORMS-PLAN.md §11, bridge 4.85.0), because the plugin is
 * now what RENDERS the form — including on sites that have no Layerly theme under it. They are
 * not duplicated here.
 *
 * The field primitives stay: they style fields anywhere on a Layerly site, not only inside a
 * form, and they read the `--field-*` knobs the moved `.form` rule declares. A site whose bridge
 * predates 4.85.0 gets the moved rules back from assets/css/forms-fallback.css, enqueued by
 * functions.php under the same function_exists( 'layerly_render_form' ) check the template uses.
 */
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-med); color: var(--label-color); }
.field__req { color: var(--color-error); }
.field__input {
    width: 100%; box-sizing: border-box;
    background: var(--field-bg); color: var(--field-fg);
    border: 1px solid var(--field-border); border-radius: var(--field-radius);
    padding: var(--field-pad); font: inherit; font-size: var(--text-md);
    transition: border-color .15s, box-shadow .15s;
}
.field__input:focus-visible { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 25%, transparent); }
.field__textarea { resize: vertical; min-height: 120px; }
.field--checkbox .field__check { flex-direction: row; align-items: center; gap: var(--space-sm); cursor: pointer; }
.field__checkbox { width: 18px; height: 18px; accent-color: var(--field-focus); }

/* ── Component: heroes/full-bg (knob-driven) ── */
.hero--full-bg {
    --hero-bg: var(--color-1);
    --hero-fg: var(--color-surface);
    --hero-overlay: rgba(0,0,0,.45);
    --hero-min-h: 80vh;
    --hero-pad-y: var(--space-xxl);
    --hero-align: left;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    padding-block: var(--hero-pad-y);
    /* Consumes --section-bg-color first (F17/B18) — hero_bg_type:color must win
       over this component's own default, not silently lose to it. */
    background: var(--section-bg-color, var(--hero-bg));
    color: var(--hero-fg);
    overflow: hidden;
}
.hero--full-bg .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--full-bg .hero__bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero--full-bg .hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); pointer-events: none; }
.hero--full-bg .hero__inner { position: relative; z-index: 2; text-align: var(--hero-align); width: 100%; }
.hero--full-bg .hero__title { color: var(--hero-fg); font-size: var(--text-h1); margin-bottom: var(--space-md); }
.hero--full-bg .hero__subtitle { color: var(--hero-fg); font-size: var(--text-lg); opacity: .92; max-width: 56ch; margin-bottom: var(--space-xl); }
.hero--full-bg .hero__eyebrow { color: var(--hero-fg); }
.hero--full-bg .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Center alignment: set --hero-align:center; the inner is centered + content too. */
.hero--full-bg[style*="--hero-align: center"] .hero__inner { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__subtitle { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__ctas { justify-content: center; }
@media (max-width: 768px) {
    .hero--full-bg { --hero-min-h: 60vh; }
    .hero--full-bg .hero__title { font-size: var(--text-h2); }
}

/* ── chrome/topbar (E2c, 2026-08-11) ──────────────────────────────────────────────
   The utility bar above the site header. Renders only when topbar_enabled='1', so
   these rules are inert on every site that hasn't switched it on.

   TWO MODES, because a top bar means different things depending on the header:
     • default — a solid strip in normal document flow, above the header.
     • .topbar--over-hero — the site's header draws OVER the hero
       (.site-header--overlay / nav_overlay). A solid strip there would push the hero
       down and break the design, so the bar goes transparent and sits over the hero
       with the header. This is the D10/D11 bespoke-chrome failure class, handled once
       here instead of per site.

   The over-hero mode is position:fixed, so per the LOCKED admin-bar block above it
   writes its own `top` additively as calc(0px + var(--wp-adminbar-offset, 0px)) —
   it is the TOPMOST fixed element, hence 0px, and the sticky header below it offsets
   by --topbar-height in turn. */
.topbar {
  --topbar-bg:     var(--color-1);
  --topbar-fg:     var(--color-surface);
  --topbar-height: 36px;
  --topbar-size:   var(--text-sm);
  --topbar-gap:    var(--space-md);

  background: var(--topbar-bg);
  color: var(--topbar-fg);
  font-size: var(--topbar-size);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topbar-gap);
  width: 100%;
  min-height: var(--topbar-height);
}
.topbar__text { margin: 0; margin-right: auto; }
.topbar__phone,
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--topbar-gap) / 3);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__phone:hover,
.topbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__icon { width: 1em; height: 1em; flex: none; }

/* Over-hero: transparent, fixed above the overlay header, stacked above it. */
.topbar--over-hero {
  background: transparent;
  position: fixed;
  top: calc(0px + var(--wp-adminbar-offset, 0px));
  left: 0;
  right: 0;
  z-index: 101;   /* one above the overlay header's own stacking */
}
.topbar--over-hero + .site-header,
.topbar--over-hero ~ [data-nav-sticky] { top: calc(var(--topbar-height) + var(--wp-adminbar-offset, 0px)); }

/* On phones the bar earns its space only if it is short. Text drops first, the
   phone number — the reason most sites want this bar — stays. */
@media (max-width: 640px) {
  .topbar__text { display: none; }
  .topbar__inner { justify-content: center; }
}

/* ── Prose blocks (layerly_prose, E2e) ──
   When body/description copy carries real structure (multi-paragraph, lists),
   layerly_prose wraps it in a div carrying the part's own class + .is-prose;
   these rules give the inner paragraphs and lists their rhythm. Single-
   paragraph copy never enters this path — it renders exactly as before. */
.is-prose > p { margin: 0 0 var(--space-md); }
.is-prose > p:last-child { margin-bottom: 0; }
.is-prose ul,
.is-prose ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
.is-prose ul:last-child,
.is-prose ol:last-child { margin-bottom: 0; }
.is-prose li { margin: 0 0 var(--space-xs); }
.is-prose li > ul,
.is-prose li > ol { margin: var(--space-xs) 0 0; }

/* ── Popup — modal (template-parts/popups/modal.php) ──
   A native <dialog>, so the browser supplies the top layer and ::backdrop. There is no
   z-index here on purpose: the top layer sits above every stacking context on the page,
   which is precisely the bug hand-rolled modals hit behind sticky headers.
   The entrance animation is opt-in via prefers-reduced-motion, never the popup itself. */
.popup {
    max-width: min(var(--popup-max-w, 560px), calc(100vw - 2 * var(--space-lg)));
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--popup-radius, var(--radius-lg));
    background: var(--popup-bg, var(--color-surface));
    color: var(--popup-fg, var(--color-text));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.popup::backdrop { background: var(--popup-backdrop, rgba(0, 0, 0, .55)); }
.popup__inner { position: relative; }
.popup__media { margin: 0; line-height: 0; }
.popup__image { width: 100%; height: auto; display: block; }
.popup__content { padding: var(--popup-pad, var(--space-xl)); }
.popup__heading { margin: 0 0 var(--space-md); }
.popup__body { margin: 0 0 var(--space-lg); }
.popup__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* The close control sits above the media, so it needs its own contrast rather than
   inheriting the surface colour — an X over a photo is invisible often enough to matter. */
.popup__close {
    position: absolute;
    top: var(--space-md);
    inset-inline-end: var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    cursor: pointer;
}
.popup__close:hover { filter: brightness(.94); }
.popup__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .popup[open] { animation: layerly-popup-in .18s ease-out; }
    @keyframes layerly-popup-in {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to   { opacity: 1; transform: none; }
    }
}

/* ── Social — Facebook Page feed (template-parts/social/facebook-page.php) ──
   Two columns: our copy, then Meta's iframe. The embed column is capped at Meta's own
   500px maximum — the plugin will not render wider, so a wider column would only add
   empty space beside it. Below the breakpoint the columns stack and the embed centres. */
/* The embed column MUST be definite. With `auto` it sizes to its content — and its content
   is an iframe whose width main.js sets from the column, so the two size each other and
   settle at the 180px floor. Caught in the harness before this shipped: the column measured
   exactly 180px on a 1280px viewport. minmax() breaks the loop by giving the column a real
   width first, which is then what the script measures. */
.fb-feed__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--fb-feed-embed-max-w, 500px));
    gap: var(--fb-feed-gap, var(--space-xl));
    align-items: start;
}
.fb-feed__body { margin: 0 0 var(--space-lg); }
.fb-feed__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.fb-feed__embed {
    width: 100%;
    max-width: var(--fb-feed-embed-max-w, 500px);
    border-radius: var(--fb-feed-radius, var(--radius-md));
    overflow: hidden;
}
/* The iframe has no src until main.js sets one, so it must not collapse to nothing and
   shift the layout when the embed arrives. The inline height from PHP holds the space. */
.fb-feed__iframe { display: block; width: 100%; border: 0; background: var(--color-border); }
.fb-feed__fallback { margin: 0; }
@media (max-width: 860px) {
    .fb-feed__inner { grid-template-columns: 1fr; }
    .fb-feed__embed { justify-self: center; }
}


/* Layerly — Hero sms-photo — exact geometry from Figma 2093:1508 — 2026-09-15T22:35:55.392Z */
.hero--sms-photo,
.product-archive-hero--sms-photo,
.contact-hero--sms-panel {
  position: relative;
  padding: 0;
  min-height: 840px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--section-bg-color, var(--color-deep));
  isolation: isolate;
}
.product-archive-hero--sms-photo {
  min-height: 500px;
}

.hero--sms-photo .hero__media,
.product-archive-hero--sms-photo .hero__media,
.contact-hero--sms-panel .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.hero--sms-photo .hero__image,
.product-archive-hero--sms-photo .hero__image,
.contact-hero--sms-panel .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero--sms-photo .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-8);
}

.hero--sms-photo .hero__scrim,
.product-archive-hero--sms-photo .hero__scrim,
.contact-hero--sms-panel .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 52, 74, 0) 0%, var(--color-deep) 100%);
  pointer-events: none;
}

.hero--sms-photo .hero__inner,
.product-archive-hero--sms-photo .hero__inner,
.contact-hero--sms-panel .hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  /* No horizontal padding: --measure IS the content measure here, as in every
     other band. Figma 2093:1509 is a 1440 frame with 120 side padding = 1200
     content, so padding inside the 1200 cap would inset the hero 120px from
     the services/solutions/footer measure at viewports above 1280. */
  padding: var(--space-xxl) 0 var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  text-align: left;
  /* Clears the transparent nav overlaying the hero photo — must match the
     nav's actual height (118px), same figure as .smsnav's margin-bottom. */
  padding-top: calc(var(--space-xxl) + 118px);
}

.hero--sms-photo .hero__title-col,
.product-archive-hero--sms-photo .hero__title-col,
.contact-hero--sms-panel .hero__title-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-md);
  max-width: 888px;
  text-align: left;
}

.hero--sms-photo .hero__title,
.product-archive-hero--sms-photo .hero__title,
.contact-hero--sms-panel .hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.hero--sms-photo .hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero--sms-photo .hero__eyebrow,
.contact-hero--sms-panel .hero__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 21px;
  color: var(--color-1);
  white-space: nowrap;
  background: #1A6FA0;
  border-color: #1A6FA0;
}

.hero--sms-photo .hero__rule {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}

.hero--sms-photo .hero__subtitle,
.product-archive-hero--sms-photo .hero__subtitle,
.contact-hero--sms-panel .hero__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-surface);
}

.hero--sms-photo .hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 207px;
  flex: none;
}

.hero--sms-photo .hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--radius-md);
  font-family: var(--font-utility);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.hero--sms-photo .btn--primary {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-1);
  color: var(--color-primary);
  border: 1px solid var(--color-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: 0.3px;
}

.hero--sms-photo .btn--primary:hover {
  background: var(--color-surface);
  border-color: var(--color-surface);
}

.hero--sms-photo .btn--secondary {
  padding: 12px var(--space-lg);
  background: transparent;
  color: var(--color-1);
  border: 1px solid var(--color-accent);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 28px;
}

.hero--sms-photo .btn--secondary:hover {
  background: var(--color-7);
}

.hero--sms-photo .hero__btn:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 3px;
}


/* Layerly — SMS header — top bar + nav chrome from Figma — 2026-09-15T22:38:10.367Z */
.smsbar {
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-accent);
  position: relative;
  z-index: 20;
  color: var(--color-1);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  line-height: 21px;
}

.smsbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin-inline: auto;
  gap: 50px;
  padding: var(--space-xs) 0;
  min-height: 21px;
}

.smsbar__text {
  margin: 0;
}

.smsbar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.smsbar__link {
  color: var(--color-surface);
  text-decoration: none;
}

.smsbar__link:hover {
  color: var(--color-1);
  text-decoration: underline;
}

.smsbar__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.smsnav {
  background: linear-gradient(180deg, rgba(0,52,74,.75) 0%, rgba(0,52,74,.2) 50%, rgba(0,52,74,0) 100%);
  position: relative;
  z-index: 15;
  /* Pulls the hero up to sit directly under the nav. Must equal the nav's
     actual rendered height (118px: 102px logo + 2x8px vertical padding) —
     this was stale at -76px (the pre-logo-resize height), leaving a gap
     that exposed the body's white dot-pattern background beneath the nav. */
  margin-bottom: -118px;
}

.smsnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin-inline: auto;
  gap: var(--space-lg);
  padding: var(--space-xs) 0;
  min-height: 76px;
}

.smsnav__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  color: var(--color-text);
}

.smsnav__logo img, .smsnav__logo-img {
  display: block;
  width: auto;
  object-fit: contain;
  height: 102px;
  max-width: 214px;
}

.smsnav__drawer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  flex: 1 1 auto;
}

.smsnav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.smsnav__menu a {
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: 0.3px;
  color: var(--color-1);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: var(--space-xs);
  /* Transparent, not none: keeps the same box height so nothing shifts when
     the border appears on hover. */
  border-bottom: 1px solid transparent;
}

.smsnav__menu a:hover {
  color: var(--color-primary);
}

.smsnav__menu a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.smsnav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-1);
  color: var(--color-primary);
  border: 1px solid var(--color-1);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
}

.smsnav__cta:hover {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-primary);
}
.smsnav__menu a:hover {
  color: var(--color-surface);
  border-bottom-color: var(--color-surface);
}

.smsnav__cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.smsnav .ly-burger {
  display: none;
  color: var(--color-1);
}
@media (max-width: 880px) {
  .smsnav .ly-burger { display: inline-flex; }
}


/* Layerly — Hero slides under transparent nav; chrome measurements to Figma — 2026-09-15T22:40:54.566Z */
.home .hero--sms-photo {
  margin-top: 0;
}


/* Layerly — Services grid sms-cards — exact geometry from Figma 2058:849 — 2026-09-15T22:42:03.267Z */
.services-grid--sms-cards {
  position: relative;
  background: var(--section-bg-color, var(--color-deep));
  padding: 0;
  overflow: hidden;
}

.services-grid--sms-cards::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-deep) 0%, rgba(0, 52, 74, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.services-grid--sms-cards .services-grid__inner {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.services-grid--sms-cards .services-grid__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.services-grid--sms-cards .services-grid__heading {
  margin: 0;
  max-width: 617px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.services-grid--sms-cards .services-grid__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.services-grid--sms-cards .services-grid__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: var(--space-sm) 0;
  list-style: none;
}

.services-grid--sms-cards .services-grid__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
  min-height: 401px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-3) 0%, rgba(0, 81, 118, 0.5) 100%);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease;
}

.services-grid--sms-cards .services-grid__card:hover {
  transform: translateY(-4px);
}

.services-grid--sms-cards .services-grid__card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.services-grid--sms-cards .services-grid__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xs) 0;
}

.services-grid--sms-cards .services-grid__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-bold);
  line-height: 23px;
  color: var(--color-1);
}

.services-grid--sms-cards .services-grid__link {
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: 0.3px;
  color: var(--color-accent-on-dark);
}

.services-grid--sms-cards .services-grid__titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
}
.services-grid--sms-cards .services-grid__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-1);
}
/* Figma 2068:1034: the arrow points up-right; the icon set ships arrow-right.
   Rotate the SVG, not the badge — rotating the badge swells its bounding box
   to ~40px and pushes it past the card's text measure. */
.services-grid--sms-cards .services-grid__badge svg {
  width: 14px;
  height: 14px;
  display: block;
  transform: rotate(-45deg);
}
/* Image matches the title/link measure above it and sits on the card baseline.
   The 8px side inset mirrors .services-grid__details' own 8px padding, so the
   image edges align with the text edges exactly. Figma 2060:943 runs the image
   16px wider than the text; matching the text measure is a client instruction. */
.services-grid--sms-cards .services-grid__media {
  display: block;
  margin: 0 var(--space-xs) 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

.services-grid--sms-cards .services-grid__image {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.services-grid--sms-cards .services-grid__actions {
  display: flex;
}

.services-grid--sms-cards .services-grid__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-1);
  font-family: var(--font-utility);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 28px;
  text-decoration: none;
}

.services-grid--sms-cards .services-grid__cta:hover {
  background: var(--color-7);
}

.services-grid--sms-cards .services-grid__cta:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 3px;
}


/* Layerly — Solutions split + ghost-number steps — exact geometry from Figma 2065:978 / 2070:1067 — 2026-09-15T22:43:58.815Z */
.solutions--sms-split {
  background: var(--section-bg-color, var(--color-surface));
  /* No borders: the accent hairlines from the Figma's per-section borders have
     been removed across the page — at every seam the upper section's bottom
     border read as the lower section's top border. Client instruction. */
  padding: var(--space-xl) 0;
}

.solutions--sms-split .solutions__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.solutions--sms-split .solutions__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.solutions--sms-split .solutions__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
  white-space: nowrap;
}

.solutions--sms-split .solutions__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.solutions--sms-split .solutions__body {
  margin: 0;
  max-width: 564px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.solutions--sms-split .solutions__row {
  display: grid;
  grid-template-columns: 411fr 331fr 411fr;
  gap: var(--space-md);
  align-items: stretch;
}

.solutions--sms-split .solutions__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-1);
  border-radius: var(--radius-md);
}

.solutions--sms-split .solutions__entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

.solutions--sms-split .solutions__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-primary);
}

.solutions--sms-split .solutions__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.solutions--sms-split .solutions__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.solutions--sms-split .solutions__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 548px;
  object-fit: cover;
}

.ghost-steps--sms {
  background: var(--section-bg-color, var(--color-surface));
  padding: 50px 0;
  background-color: var(--section-bg-color, var(--color-surface));
  background-image: url("/wp-content/uploads/2026/09/2d25c949ec5cef61bfb15ded865a615b.webp");
  background-repeat: repeat;
  background-size: 360px auto;
  background-position: center top;
}

.ghost-steps--sms .ghost-steps__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.ghost-steps--sms .ghost-steps__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.ghost-steps--sms .ghost-steps__heading {
  margin: 0;
  max-width: 587px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.ghost-steps--sms .ghost-steps__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.ghost-steps--sms .ghost-steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin: 0;
  padding: var(--space-sm) 0 0;
  list-style: none;
}

.ghost-steps--sms .ghost-steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-left: 1px solid var(--color-1);
  padding-left: var(--space-md);
}

.ghost-steps--sms .ghost-steps__stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ghost-steps--sms .ghost-steps__number {
  font-family: var(--font-display);
  font-size: var(--text-ghost);
  font-weight: var(--weight-reg);
  line-height: 130px;
  letter-spacing: -1.2px;
  color: var(--color-accent);
  opacity: .45;
}

.ghost-steps--sms .ghost-steps__title {
  margin: -60px 0 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-text);
}

.ghost-steps--sms .ghost-steps__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}


/* Layerly — Trust points sms-grid — exact geometry from Figma 2074:1121 — 2026-09-15T22:51:10.961Z */
.trust-points--sms-grid {
  background: var(--section-bg-color, var(--color-bg));
  /* No borders: the top edge abuts ghost-steps and the bottom edge abuts the
     CTA photo band; in both cases the accent hairline read as a border on the
     neighbouring section. Client instruction. */
  padding: var(--space-xl) 0;
  background-color: var(--section-bg-color, var(--color-bg));
  background-image: var(--dot-scrim-light), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}

.trust-points--sms-grid .trust-points__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.trust-points--sms-grid .trust-points__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.trust-points--sms-grid .trust-points__heading {
  margin: 0;
  max-width: 482px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.trust-points--sms-grid .trust-points__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.trust-points--sms-grid .trust-points__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
  align-items: start;
}

.trust-points--sms-grid .trust-points__col--media {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.trust-points--sms-grid .trust-points__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

/* Bare photo with rounded corners: no white frame, no shadow. overflow:hidden
   stays so the radius actually clips the <img> inside. */
.trust-points--sms-grid .trust-points__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.trust-points--sms-grid .trust-points__image {
  display: block;
  width: 100%;
  height: 366px;
  object-fit: cover;
}

.trust-points--sms-grid .trust-points__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-points--sms-grid .trust-points__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 184px;
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.trust-points--sms-grid .trust-points__tile--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 112px;
}

.trust-points--sms-grid .trust-points__tile-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-primary);
}

.trust-points--sms-grid .trust-points__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-1);
  color: var(--color-primary);
}
/* Figma 2076:1149: each glyph sits inside the 48px white circle at its own
   aspect ratio (24x24, 23x27, 26x21, 22x27, 16x28) — contain, never stretch.
   Explicit width/height: these SVGs carry no intrinsic size, so width:auto
   collapses them to 0x0. object-fit preserves each glyph's own ratio. */
.trust-points--sms-grid .trust-points__icon {
  display: block;
  width: 26px;
  height: 28px;
  object-fit: contain;
}

.trust-points--sms-grid .trust-points__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-deep);
  margin-top: var(--space-xs);
}

.trust-points--sms-grid .trust-points__panel-heading {
  margin: 0;
  max-width: 714px;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-1);
}

.trust-points--sms-grid .trust-points__panel-heading p {
  margin: 0;
}

.trust-points--sms-grid .trust-points__pill {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-1);
  background: #1A6FA0;
  border-color: #1A6FA0;
}

.trust-points--sms-grid .trust-points__panel-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
}

.trust-points--sms-grid .trust-points__panel-body {
  margin: 0;
  max-width: 428px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-1);
}

.trust-points--sms-grid .trust-points__actions {
  display: flex;
  gap: var(--space-sm);
  flex: none;
}

.trust-points--sms-grid .trust-points__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-family: var(--font-utility);
  text-decoration: none;
  white-space: nowrap;
}

.trust-points--sms-grid .trust-points__btn--primary {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-1);
  color: var(--color-primary);
  border: 1px solid var(--color-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: 0.3px;
}

.trust-points--sms-grid .trust-points__btn--secondary {
  padding: 12px var(--space-lg);
  background: transparent;
  color: var(--color-1);
  border: 1px solid var(--color-accent);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 28px;
}

.trust-points--sms-grid .trust-points__btn:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 3px;
}


/* Layerly — CTA photo band + contact quote band — exact geometry from Figma 2102:509 / 2102:545 — 2026-09-15T22:52:03.873Z */
.cta-band--sms {
  position: relative;
  padding: 0;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--section-bg-color, var(--color-deep));
  isolation: isolate;
}

.cta-band--sms .cta-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.cta-band--sms .cta-band__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-band--sms .cta-band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 52, 74, 0) 0%, var(--color-deep) 100%);
  pointer-events: none;
}

.cta-band--sms .cta-band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  text-align: left;
  padding: var(--space-xxl) 0 var(--space-xl);
}

.cta-band--sms .cta-band__heading {
  margin: 0;
  max-width: 724px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.cta-band--sms .cta-band__body {
  margin: 0;
  max-width: 586px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-1);
}

.cta-band--sms .cta-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-1);
  color: var(--color-primary);
  border: 1px solid var(--color-1);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: 0.3px;
  text-decoration: none;
}

.cta-band--sms .cta-band__btn:hover {
  background: var(--color-surface);
  border-color: var(--color-surface);
}

.cta-band--sms .cta-band__btn:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 3px;
}

.contact-band--sms-quote {
  position: relative;
  overflow: hidden;
  background: var(--section-bg-color, var(--color-deep));
  padding: var(--space-md) 0;
  isolation: isolate;
}

.contact-band--sms-quote .contact-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .35;
  margin: 0;
}

.contact-band--sms-quote .contact-band__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-band--sms-quote .contact-band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--color-deep) 0%, rgba(0, 52, 74, 0) 100%);
  pointer-events: none;
}

.contact-band--sms-quote .contact-band__inner {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

.contact-band--sms-quote .contact-band__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.contact-band--sms-quote .contact-band__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
  white-space: nowrap;
}

.contact-band--sms-quote .contact-band__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.contact-band--sms-quote .contact-band__panel {
  display: grid;
  grid-template-columns: 498fr 578fr;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  align-items: stretch;
}

.contact-band--sms-quote .contact-band__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
}

.contact-band--sms-quote .contact-band__lead {
  margin: 0;
  max-width: 438px;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-1);
}

.contact-band--sms-quote .contact-band__lead p {
  margin: 0 0 var(--space-md);
}

.contact-band--sms-quote .contact-band__lead p:last-child {
  margin-bottom: 0;
}

.contact-band--sms-quote .contact-band__body {
  margin: 0;
  max-width: 479px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-1);
}

.contact-band--sms-quote .contact-band__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-1);
  border-radius: var(--radius-md);
  --field-pad: var(--space-sm);
}

.contact-band--sms-quote .contact-band__form-intro {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}


/* Layerly — CTA inner padding, honeypot off keyboard path, ghost-steps dot texture from Figma — 2026-09-15T22:57:47.922Z */
.contact-band--sms-quote .form__hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: none !important;
}

/* ============================================================
   RESPONSIVE — literal @media blocks on purpose.
   write_css strips @media wrappers and promotes the inner rules
   to global, which collapses every desktop grid to one column.
   Any further change to a selector below must also use edit_file.
   ============================================================ */

@media (max-width: 1280px) {
  .smsbar__inner,
  .smsnav__inner,
  .services-grid--sms-cards .services-grid__inner,
  .solutions--sms-split .solutions__inner,
  .ghost-steps--sms .ghost-steps__inner,
  .trust-points--sms-grid .trust-points__inner,
  .cta-band--sms .cta-band__inner,
  .contact-band--sms-quote .contact-band__inner,
  .hero--sms-photo .hero__inner,
  .category-hero--sms-pills .category-hero__inner,
  .category-grid--sms-products .category-grid__inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 880px) {
  .hero--sms-photo { min-height: 640px; }
  .hero--sms-photo .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding-top: 160px;
    padding-bottom: var(--space-lg);
  }
  .hero--sms-photo .hero__title { font-size: 34px; line-height: 40px; }
  .hero--sms-photo .hero__actions { width: 100%; flex-direction: row; }
  .hero--sms-photo .hero__btn { flex: 1 1 0; }

  .services-grid--sms-cards .services-grid__heading,
  .solutions--sms-split .solutions__heading,
  .ghost-steps--sms .ghost-steps__heading,
  .trust-points--sms-grid .trust-points__heading,
  .cta-band--sms .cta-band__heading,
  .contact-band--sms-quote .contact-band__heading {
    font-size: 32px;
    line-height: 38px;
    white-space: normal;
  }

  .services-grid--sms-cards .services-grid__list { grid-template-columns: repeat(2, 1fr); }
  .solutions--sms-split .solutions__row { grid-template-columns: 1fr; }
  .solutions--sms-split .solutions__image { min-height: 320px; }
  .ghost-steps--sms .ghost-steps__list { grid-template-columns: 1fr; gap: var(--space-lg); }
  .trust-points--sms-grid .trust-points__row { grid-template-columns: 1fr; }
  .trust-points--sms-grid .trust-points__panel-row { flex-direction: column; align-items: stretch; }
  .trust-points--sms-grid .trust-points__actions { flex-direction: row; }
  .trust-points--sms-grid .trust-points__btn { flex: 1 1 0; }
  .contact-band--sms-quote .contact-band__panel { grid-template-columns: 1fr; }
  .cta-band--sms { min-height: 520px; }
}

@media (max-width: 600px) {
  .smsbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .smsbar__contact { flex-wrap: wrap; gap: var(--space-sm); }

  .hero--sms-photo .hero__inner { padding-top: 140px; }
  .hero--sms-photo .hero__title { font-size: 29px; line-height: 35px; }
  .hero--sms-photo .hero__actions { flex-direction: column; }

  .services-grid--sms-cards .services-grid__list { grid-template-columns: 1fr; }
  .services-grid--sms-cards .services-grid__card { min-height: 0; }
  .services-grid--sms-cards .services-grid__image { height: 220px; }
  .services-grid--sms-cards .services-grid__actions { display: block; }
  .services-grid--sms-cards .services-grid__cta { width: 100%; }

  .trust-points--sms-grid .trust-points__list { grid-template-columns: 1fr; }
  .trust-points--sms-grid .trust-points__tile { min-height: 0; }
  .trust-points--sms-grid .trust-points__tile--wide { flex-direction: column; align-items: flex-start; }
  .trust-points--sms-grid .trust-points__actions { flex-direction: column; }

  .ghost-steps--sms .ghost-steps__number { font-size: 72px; line-height: 80px; }
  .ghost-steps--sms .ghost-steps__title { margin-top: -30px; font-size: 21px; line-height: 28px; }

  .solutions--sms-split .solutions__card { padding: var(--space-md); }
  .contact-band--sms-quote .contact-band__form { padding: var(--space-md); }
  .contact-band--sms-quote .contact-band__lead { font-size: 21px; line-height: 28px; }

  .services-grid--sms-cards .services-grid__header,
  .solutions--sms-split .solutions__header,
  .ghost-steps--sms .ghost-steps__header,
  .trust-points--sms-grid .trust-points__header,
  .contact-band--sms-quote .contact-band__header {
    gap: var(--space-md);
  }
}

@media (max-width: 880px) {
  .smsfooter__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: var(--space-lg);
  }
  .smsfooter__col { min-width: 0; }
  .smsfooter__col:nth-child(1),
  .smsfooter__col:nth-child(2),
  .smsfooter__col:nth-child(3),
  .smsfooter__col:nth-child(4),
  .smsfooter__col:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }
  .smsfooter__meta,
  .smsfooter__base {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .smsfooter__columns { grid-template-columns: minmax(0, 1fr); }
}

/* Desktop footer grid — a min-width query on purpose. As an unconditional rule it
   sat later in the file than the max-width blocks above and won at every viewport
   by source order, holding four 140px tracks at 375px. */
@media (min-width: 881px) {
  .smsfooter__columns {
    grid-template-columns: 203fr 212fr 235fr 140fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-xl);
    row-gap: var(--space-lg);
  }
  .smsfooter__col:nth-child(1),
  .smsfooter__col:nth-child(2),
  .smsfooter__col:nth-child(3) { grid-row: 1 / span 2; }
  .smsfooter__col:nth-child(4) { grid-column: 4; grid-row: 1; }
  .smsfooter__col:nth-child(5) { grid-column: 4; grid-row: 2; }
}


/* Layerly — SMS footer — exact geometry from Figma 2130:818 — 2026-09-16T15:04:12.469Z */
.smsfooter {
  background: var(--color-deep);
  color: var(--color-1);
  padding: var(--space-lg) 0;
}

.smsfooter__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.smsfooter__columns {
  display: grid;
  padding-bottom: var(--space-sm);
  align-items: start;
}
/* Figma 2130:818 column placement lives in the min-width:881px block below. */

.smsfooter__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.smsfooter__col-heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 25px;
  color: var(--color-accent-on-dark);
}

.smsfooter__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.smsfooter__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 21px;
  color: var(--color-1);
  text-decoration: none;
}

.smsfooter__link:hover {
  text-decoration: underline;
}

.smsfooter__link:focus-visible {
  outline: 2px solid var(--color-accent-on-dark);
  outline-offset: 3px;
}

.smsfooter__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.smsfooter__hours {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.smsfooter__pill {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  background: #1A6FA0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-1);
}

.smsfooter__contact {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.smsfooter__contact-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-1);
}

.smsfooter__rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-primary);
}

.smsfooter__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.smsfooter__logo {
  display: inline-flex;
  flex: none;
}

.smsfooter__logo-img {
  display: block;
  width: auto;
  height: 60px;
  max-width: 126px;
  object-fit: contain;
}

.smsfooter__legal {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.smsfooter__legal-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-1);
  text-decoration: none;
  padding-inline: var(--space-xs);
  border-right: 1px solid var(--color-accent);
}

.smsfooter__legal-link:last-child {
  border-right: 0;
}

.smsfooter__legal-link:hover {
  text-decoration: underline;
}

.smsfooter__legal-link:focus-visible {
  outline: 2px solid var(--color-accent-on-dark);
  outline-offset: 3px;
}

.smsfooter__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-1);
}


/* Layerly — Site-wide Figma dot pattern: direct on light grounds, navy/white scrim over it on dark and white bands to hold the contrast floor — 2026-09-16T15:29:57.024Z */
.solutions--sms-split, .ghost-steps--sms {
  background-color: var(--section-bg-color, var(--color-surface));
  background-image: var(--dot-scrim-surface), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}

.services-grid--sms-cards, .smsfooter {
  background-image: var(--dot-scrim-dark), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}
/* Contact band keeps the dot pattern over its navy ground, but NOT the photo
   or the scrim gradient (both gated on $img in the template, which is empty by
   client instruction). Kept as its own rule so the photo cannot return with it. */
.contact-band--sms-quote {
  background-image: var(--dot-scrim-dark), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}


/* Layerly — Hours items render as plain white text; contact text inherits the pill's padding/background/border while keeping no extra margin — 2026-09-16T16:53:00.728Z */
.smsfooter__hours-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-1);
  padding-right: var(--space-xs);
  border-right: 1px solid var(--color-accent);
}
.smsfooter__hours-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.smsfooter__contact-item.smsfooter__pill {
  margin: 0;
}


/* Layerly — About-hero (sms-panel) CSS — Figma 2093:1299 — 2026-09-16T17:13:17.611Z */
.about-hero--sms-panel {
  background-color: var(--section-bg-color, var(--color-deep));
  background-image: var(--dot-scrim-dark), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
  padding: var(--space-xxl) 0 var(--space-xl);
}

.about-hero__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.about-hero__row {
  display: grid;
  grid-template-columns: 610fr 550fr;
  gap: var(--space-xl);
  align-items: stretch;
}

.about-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-primary);
  border-radius: var(--radius-md);
}

.about-hero__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-1);
  color: var(--color-primary);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.about-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.about-hero__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-surface);
}

.about-hero__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.about-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 880px) {
  .about-hero__row { grid-template-columns: 1fr; }
  .about-hero__media { min-height: 320px; }
}


/* Layerly — Founder story CSS part 1 — Figma 2093:1311 — 2026-09-16T17:13:31.802Z */
.founder--sms-story {
  background-color: var(--section-bg-color, var(--color-surface));
  background-image: var(--dot-scrim-surface), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
  padding: var(--space-xl) 0;
}

.founder__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.founder__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.founder__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.founder__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.founder__row {
  display: grid;
  grid-template-columns: 520fr 640fr;
  gap: var(--space-lg);
}

.founder__row--closing {
  grid-template-columns: 572fr 604fr;
}


/* Layerly — Founder story CSS part 2 — cards, photo, narrative — 2026-09-16T17:13:41.324Z */
.founder__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-radius: var(--radius-md);
}

.founder__card--intro {
  padding: var(--space-md) var(--space-md) 0;
  background: var(--color-primary);
}

.founder__intro-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-primary);
  background: var(--color-1);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.founder__photo {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

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

.founder__narrative {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
  padding-left: var(--space-lg);
}

.founder__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-text);
}

.founder__divider {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-accent);
}

.founder__callout {
  padding: var(--space-md);
  background: var(--color-1);
  border-radius: var(--radius-md);
}

.founder__callout-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.founder__callout-text + .founder__callout-text {
  margin-top: var(--space-sm);
}


/* Layerly — Founder story CSS part 3 — media band and closing cards — 2026-09-16T17:13:47.741Z */
.founder__row--media {
  display: block;
}

.founder__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

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

.founder__card--family {
  padding: var(--space-md);
  background: var(--color-primary);
  justify-content: space-between;
}

.founder__family-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 28px;
  color: var(--color-1);
}

.founder__family-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-surface);
}

.founder__card--values {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-deep);
  justify-content: center;
}

.founder__values-body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 28px;
  color: var(--color-1);
}
@media (max-width: 880px) {
  .founder__row,
  .founder__row--closing { grid-template-columns: 1fr; }
  .founder__narrative { padding-left: 0; }
  .founder__divider { display: none; }
}


/* Layerly — About page (page-id-59): testimonials + accordion look scoped to this page, matching Figma 2093:1322/1370 — 2026-09-16T17:14:23.481Z */
.page-id-59 .tcarousel__slide {
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-md);
  text-align: left;
  box-sizing: border-box;
  background: var(--color-1);
  background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.25) 100%);
  color: var(--color-text);
  flex: 0 0 346px;
  width: 346px;
  height: auto;
  min-height: 280px;
}

.page-id-59 .tcarousel__quote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 27px;
  max-width: none;
  margin: 0;
  text-align: left;
  color: var(--color-text);
}

.page-id-59 .tcarousel__name {
  color: var(--color-primary);
}

.page-id-59 .disclosures--accordion {
  background-color: var(--section-bg-color, var(--color-bg));
  background-image: var(--dot-scrim-light), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}

.page-id-59 .accordion__item {
  border: none;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.page-id-59 .accordion__summary {
  padding: var(--space-sm) var(--space-md);
}


/* Layerly — About page testimonials: match Figma 2093:1322 — 5 side-by-side 400x320 cards, left-aligned quoted text, space-between layout — 2026-09-16T17:35:41.069Z */
.page-id-59 .tcarousel__track {
  scroll-snap-type: x mandatory;
  display: flex;
  flex-direction: row;
  gap: var(--space-lg);
  grid-column: 1;
  overflow-x: auto;
  overflow-y: visible;
  flex-wrap: nowrap;
  justify-content: flex-start;
  scrollbar-width: none;
}
.page-id-59 .tcarousel__track::-webkit-scrollbar {
  display: none;
}
.page-id-59 .tcarousel__slide {
  scroll-snap-align: start;
}

.page-id-59 .tcarousel__quote::before {
  content: "\201C";
}

.page-id-59 .tcarousel__quote::after {
  content: "\201D";
}

.page-id-59 .tcarousel__author {
  text-align: left;
}


/* Layerly — Full-width stacked testimonials are no longer a carousel: hide leftover nav arrows/dots and the JS infinite-loop clone slide — 2026-09-16T17:38:59.878Z */





/* Layerly — Testimonials on About page: remove nav arrows, show full cards (no clipping, wrap to new row), add dot pattern matching other sections — 2026-09-16T17:44:04.445Z */
.page-id-59 .tcarousel {
  grid-template-columns: 1fr;
}

.page-id-59 .tcarousel__nav {
  display: none;
}

.page-id-59 .section--testimonials {
  background-color: var(--section-bg-color, var(--color-surface));
  background-image: var(--dot-scrim-surface), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
}


/* Layerly — Hide dot indicators — with arrows removed and cards wrapping into a static grid, the dots no longer control anything" — 2026-09-16T17:45:23.784Z */



/* Layerly — CSS for the new disclosures/sms-panel FAQ component, matching Figma 2093:1370 exactly — 2026-09-16T17:55:56.259Z */
.disclosures-panel {
  background-color: var(--section-bg-color, var(--color-bg));
  padding: var(--space-xxl) 0 var(--space-xl);
}

.disclosures-panel__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.disclosures-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.disclosures-panel__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.disclosures-panel__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.disclosures-panel__row {
  display: grid;
  grid-template-columns: 520fr 600fr;
  gap: var(--space-xl);
  align-items: start;
}

.disclosures-panel__questions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.disclosures-panel__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: transparent;
}

.disclosures-panel__question.is-selected {
  background: var(--color-surface);
}

.disclosures-panel__question-text {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.disclosures-panel__icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
}

.disclosures-panel__icon-line {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}

.disclosures-panel__icon-line--h {
  width: 12px;
  height: 2px;
}

.disclosures-panel__icon-line--v {
  width: 2px;
  height: 12px;
}

.disclosures-panel__question.is-selected .disclosures-panel__icon-line--v {
  display: none;
}

.disclosures-panel__answer {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.disclosures-panel__answer-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 28px;
  color: var(--color-text);
}


/* Layerly — Match testimonials headline alignment/color to FAQ design, scoped to about-page instance only — 2026-09-16T18:15:31.449Z */
.page-id-59 .section--testimonials .section-head {
  text-align: left;
}

.page-id-59 .section--testimonials .section-head__inner {
  max-width: none;
  margin-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.page-id-59 .section--testimonials .section-head__heading {
  color: var(--color-primary);
  text-align: left;
  flex: none;
}


/* Layerly — Add the FAQ-style rule line after the testimonials heading, scoped by .page-id-59 body class to the about page only — 2026-09-16T18:16:07.685Z */
.page-id-59 .section--testimonials .section-head__inner::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-left: var(--space-lg);
}


/* Layerly — Category hero (sms-pills) CSS matching Figma 2110:1363 — 2026-09-16T18:34:02.902Z */
.category-hero--sms-pills {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: var(--section-bg-color, var(--color-deep));
  isolation: isolate;
}

.category-hero--sms-pills .category-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.category-hero--sms-pills .category-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-hero--sms-pills .category-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(182deg, rgba(0, 52, 74, 0.7) 0%, var(--color-deep) 100%);
  pointer-events: none;
}

.category-hero--sms-pills .category-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-xxl) var(--space-md) var(--space-xl);
}

.category-hero--sms-pills .category-hero__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 888px;
}

.category-hero--sms-pills .category-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.category-hero--sms-pills .category-hero__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-surface);
}

.category-hero--sms-pills .category-hero__pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.category-hero--sms-pills .category-hero__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent);
  background: rgba(39, 137, 193, 0.5);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 21px;
  color: var(--color-1);
  white-space: nowrap;
}

.category-hero--sms-pills .category-hero__pill-sep {
  color: var(--color-accent);
  font-size: var(--text-sm);
}


/* Layerly — Category grid (sms-products) CSS matching Figma 2110:1396 — 2026-09-16T18:34:04.549Z */
.category-grid--sms-products {
  background-color: var(--section-bg-color, var(--color-surface));
  background-image: var(--dot-scrim-surface), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
  padding: var(--space-xl) 0;
}

.category-grid--sms-products .category-grid__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.category-grid--sms-products .category-grid__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.category-grid--sms-products .category-grid__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
  white-space: nowrap;
}

.category-grid--sms-products .category-grid__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.category-grid--sms-products .category-grid__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 1024px) {
  .category-grid--sms-products .category-grid__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .category-grid--sms-products .category-grid__row { grid-template-columns: 1fr; }
  .category-hero--sms-pills .category-hero__inner { padding-top: 160px; }
}

.category-grid--sms-products .category-grid__card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  padding: 0;
  transition: transform .18s ease;
}

.category-grid--sms-products .category-grid__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.category-grid--sms-products .category-grid__media {
  padding: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
}

.category-grid--sms-products .category-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-grid--sms-products .category-grid__arrow {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-accent);
}

.category-grid--sms-products .category-grid__body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-1);
  border-radius: 0;
  flex: 1;
}

.category-grid--sms-products .category-grid__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold, 600);
  line-height: 23px;
  color: var(--color-primary);
}

.category-grid--sms-products .category-grid__excerpt {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-text);
}


/* Layerly — Rotate the arrow-right icon glyph to match Figma's diagonal (north-east) stroke arrow — 2026-09-16T18:43:24.031Z */
.category-grid--sms-products .category-grid__arrow .icon {
  width: 13px;
  height: 13px;
  transform: rotate(-45deg);
}


/* Layerly — Remove white-box inset (margin/radius back to flush) and add the same hover lift used by services-grid__card (translateY(-4px) + transition), plus a focus-visible outline for keyboard users — 2026-09-16T18:52:59.956Z */
.category-grid--sms-products .category-grid__card:hover {
  transform: translateY(-4px);
}

.category-grid--sms-products .category-grid__card:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* Layerly — Product hero (sms-title) CSS matching Figma 2110:1804 — 2026-09-16T19:10:59.470Z */
.product-hero--sms-title {
  background: var(--section-bg-color, var(--color-6));
  padding: var(--space-xl) 0;
}

.product-hero--sms-title .product-hero__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.product-hero--sms-title .product-hero__card {
  background: var(--color-6);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.product-hero--sms-title .product-hero__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}

.product-hero--sms-title .product-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
  flex: 1 1 auto;
  min-width: 0;
}

.product-hero--sms-title .product-hero__rule {
  height: 1px;
  background: var(--color-accent);
  flex: 1 1 120px;
  min-width: 60px;
}


/* Layerly — Product intro (sms-split) CSS matching Figma 2110:1825 — 2026-09-16T19:11:00.684Z */
.product-intro--sms-split {
  background: var(--section-bg-color, var(--color-surface));
  padding: var(--space-xl) 0;
}

.product-intro--sms-split .product-intro__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-intro--sms-split .product-intro__title {
  margin: 0;
  max-width: 727px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 43px;
  letter-spacing: -0.19px;
  color: var(--color-primary);
}

.product-intro--sms-split .product-intro__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.product-intro--sms-split .product-intro__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-primary);
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 100%);
  border-radius: var(--radius-md);
}

.product-intro--sms-split .product-intro__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-1);
}

.product-intro--sms-split .product-intro__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-1);
  border-radius: var(--radius-md);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  color: var(--color-1);
  text-decoration: none;
}

.product-intro--sms-split .product-intro__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-intro--sms-split .product-intro__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}


/* Layerly — Product features (sms-ghost-grid) CSS matching Figma 2110:1896 — 2026-09-16T19:11:15.551Z */
.product-features--sms-ghost-grid {
  background: var(--section-bg-color, var(--color-surface));
  padding: var(--space-xl) 0;
}

.product-features--sms-ghost-grid .product-features__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-features--sms-ghost-grid .product-features__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.product-features--sms-ghost-grid .product-features__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.product-features--sms-ghost-grid .product-features__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.product-features--sms-ghost-grid .product-features__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-6);
  border-radius: var(--radius-md);
}

.product-features--sms-ghost-grid .product-features__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-features--sms-ghost-grid .product-features__num-row {
  display: flex;
  flex-direction: column;
}

.product-features--sms-ghost-grid .product-features__num {
  font-family: var(--font-body);
  font-size: 96px;
  font-weight: var(--weight-reg);
  line-height: 77px;
  color: var(--color-primary);
}

.product-features--sms-ghost-grid .product-features__title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-1);
}

.product-features--sms-ghost-grid .product-features__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-1);
}


/* Layerly — Product applications (sms-grid) CSS matching Figma 2115:2417 — 2026-09-16T19:11:16.812Z */
.product-applications--sms-grid {
  background: var(--section-bg-color, var(--color-surface));
  padding: var(--space-xl) 0;
}

.product-applications--sms-grid .product-applications__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-applications--sms-grid .product-applications__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.product-applications--sms-grid .product-applications__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.product-applications--sms-grid .product-applications__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.product-applications--sms-grid .product-applications__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
}

.product-applications--sms-grid .product-applications__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-top: 1px solid var(--color-1);
}

.product-applications--sms-grid .product-applications__num {
  padding-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: var(--weight-reg);
  line-height: 104px;
  letter-spacing: -0.96px;
  color: var(--color-accent);
}

.product-applications--sms-grid .product-applications__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-text);
}

.product-applications--sms-grid .product-applications__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}


/* Layerly — Product benefits (sms-icons) CSS matching Figma 2110:1919 — 2026-09-16T19:11:37.361Z */
.product-benefits--sms-icons {
  background: var(--section-bg-color, var(--color-bg));
  padding: var(--space-xl) 0;
}

.product-benefits--sms-icons .product-benefits__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-benefits--sms-icons .product-benefits__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.product-benefits--sms-icons .product-benefits__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.product-benefits--sms-icons .product-benefits__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.product-benefits--sms-icons .product-benefits__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.product-benefits--sms-icons .product-benefits__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  min-height: 279px;
}

.product-benefits--sms-icons .product-benefits__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
}

.product-benefits--sms-icons .product-benefits__title {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-primary);
}

.product-benefits--sms-icons .product-benefits__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.product-benefits--sms-icons .product-benefits__lead {
  margin: 0;
  max-width: 932px;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-text);
}

.product-benefits--sms-icons .product-benefits__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  color: var(--color-primary);
  text-decoration: none;
}


/* Layerly — Product resources (sms-accordion) CSS matching Figma 2118:2525 — 2026-09-16T19:11:38.628Z */
.product-resources--sms-accordion {
  background: var(--section-bg-color, var(--color-bg));
  padding: var(--space-xl) 0;
}

.product-resources--sms-accordion .product-resources__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-resources--sms-accordion .product-resources__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.product-resources--sms-accordion .product-resources__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.product-resources--sms-accordion .product-resources__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.product-resources--sms-accordion .product-resources__links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

.product-resources--sms-accordion .product-resources__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.product-resources--sms-accordion .product-resources__link-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold, 600);
  line-height: 23px;
  color: var(--color-primary);
}

.product-resources--sms-accordion .product-resources__link-icon {
  align-self: flex-start;
  color: var(--color-accent);
}

.product-resources--sms-accordion .product-resources__articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-resources--sms-accordion .product-resources__article {
  border-top: 1px solid var(--color-primary);
  padding-bottom: var(--space-md);
}

.product-resources--sms-accordion .product-resources__article-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-sm) 0;
  cursor: pointer;
  list-style: none;
}

.product-resources--sms-accordion .product-resources__article-summary::-webkit-details-marker {
  display: none;
}

.product-resources--sms-accordion .product-resources__article-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-primary);
}

.product-resources--sms-accordion .product-resources__article-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
}

.product-resources--sms-accordion .product-resources__article-icon-line {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}

.product-resources--sms-accordion .product-resources__article-icon-line--h {
  width: 14px;
  height: 2px;
}

.product-resources--sms-accordion .product-resources__article-icon-line--v {
  width: 2px;
  height: 14px;
}

.product-resources--sms-accordion .product-resources__article[open] .product-resources__article-icon-line--v {
  display: none;
}

.product-resources--sms-accordion .product-resources__article-body {
  display: flex;
  gap: var(--space-lg);
  padding-top: var(--space-md);
}

.product-resources--sms-accordion .product-resources__article-text {
  margin: 0;
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.product-resources--sms-accordion .product-resources__article-media {
  flex: none;
  width: 45%;
  border-radius: var(--radius-md);
  overflow: hidden;
  align-self: stretch;
  position: relative;
}

.product-resources--sms-accordion .product-resources__article-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  position: absolute;
  inset: 0;
}


/* Layerly — Product related (sms-cards) CSS matching Figma 2124:2673, using the same card treatment as category-grids/sms-products — 2026-09-16T19:11:50.995Z */
.product-related--sms-cards {
  background: var(--section-bg-color, var(--color-surface));
  padding: var(--space-xl) 0;
}

.product-related--sms-cards .product-related__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-related--sms-cards .product-related__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.product-related--sms-cards .product-related__heading {
  margin: 0;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}

.product-related--sms-cards .product-related__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
}

.product-related--sms-cards .product-related__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.product-related--sms-cards .product-related__card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform .18s ease;
}

.product-related--sms-cards .product-related__card:hover {
  transform: translateY(-4px);
}

.product-related--sms-cards .product-related__card:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.product-related--sms-cards .product-related__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.product-related--sms-cards .product-related__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.product-related--sms-cards .product-related__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-related--sms-cards .product-related__arrow {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-accent);
}

.product-related--sms-cards .product-related__arrow .icon {
  width: 13px;
  height: 13px;
  transform: rotate(-45deg);
}

.product-related--sms-cards .product-related__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-1);
  flex: 1;
}

.product-related--sms-cards .product-related__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold, 600);
  line-height: 23px;
  color: var(--color-primary);
}

.product-related--sms-cards .product-related__excerpt {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-text);
}

.product-related--sms-cards .product-related__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  color: var(--color-primary);
  text-decoration: none;
}


/* Layerly — CSS for the new product-benefit-lists/sms-bullets section, matching this site's established heading+rule pattern, surface/navy card tokens, and type scale used across product-features/applications/benefits sections — 2026-09-16T19:27:52.560Z */
.product-benefit-list--sms-bullets {
  background: var(--section-bg-color, var(--color-surface));
  padding: var(--space-xl) 0;
}

.product-benefit-list--sms-bullets .product-benefit-list__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-benefit-list--sms-bullets .product-benefit-list__intro, .product-benefit-list--sms-bullets .product-benefit-list__closing {
  margin: 0;
  max-width: 840px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.product-benefit-list--sms-bullets .product-benefit-list__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}

.product-benefit-list--sms-bullets .product-benefit-list__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
  flex: 1 1 auto;
  min-width: 0;
}

.product-benefit-list--sms-bullets .product-benefit-list__rule {
  height: 1px;
  background: var(--color-accent);
  flex: 1 1 120px;
  min-width: 60px;
}

.product-benefit-list--sms-bullets .product-benefit-list__list {
  margin: 0;
  padding: var(--space-lg);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-6);
  border-radius: var(--radius-md);
}

.product-benefit-list--sms-bullets .product-benefit-list__item, .product-benefit-list--sms-bullets .product-benefit-list__usage-item, .product-benefit-list--sms-bullets .product-benefit-list__why-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.product-benefit-list--sms-bullets .product-benefit-list__bullet {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.product-benefit-list--sms-bullets .product-benefit-list__item-text, .product-benefit-list--sms-bullets .product-benefit-list__usage-item span, .product-benefit-list--sms-bullets .product-benefit-list__why-item span {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}

.product-benefit-list--sms-bullets .product-benefit-list__usage-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 880px) {
  .product-benefit-list--sms-bullets .product-benefit-list__usage-row {
    grid-template-columns: 1fr;
  }
}

.product-benefit-list--sms-bullets .product-benefit-list__usage-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-benefit-list--sms-bullets .product-benefit-list__usage-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-primary);
}

.product-benefit-list--sms-bullets .product-benefit-list__usage-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.product-benefit-list--sms-bullets .product-benefit-list__why {
  padding: var(--space-lg);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-benefit-list--sms-bullets .product-benefit-list__why-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-1);
}

.product-benefit-list--sms-bullets .product-benefit-list__why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.product-benefit-list--sms-bullets .product-benefit-list__why .product-benefit-list__bullet {
  background: var(--color-1);
}

.product-benefit-list--sms-bullets .product-benefit-list__why-item span {
  color: var(--color-surface);
}


/* Layerly — Fix contrast: benefits list text was dark-on-dark (color-text on color-6 navy card background), now light per accessibility floor — 2026-09-16T19:28:55.299Z */
.product-benefit-list--sms-bullets .product-benefit-list__list .product-benefit-list__item-text {
  color: var(--color-1);
}

.product-benefit-list--sms-bullets .product-benefit-list__list .product-benefit-list__bullet {
  background: var(--color-1);
}


/* Layerly — Fix long section headings (e.g. Roof Insulation's 'Key Features of Our Flat & Tapered Roof Insulation Products') clipping off the right edge — heading was flex:none (never wraps/shrinks) forcing overflow past the container; now heading can wrap and shrink, rule takes remaining space instead of being crushed to zero — 2026-09-16T20:26:49.943Z */
.product-features--sms-ghost-grid .product-features__header, .product-applications--sms-grid .product-applications__header, .product-benefits--sms-icons .product-benefits__header, .product-resources--sms-accordion .product-resources__header, .product-related--sms-cards .product-related__header {
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}

.product-features--sms-ghost-grid .product-features__heading, .product-applications--sms-grid .product-applications__heading, .product-benefits--sms-icons .product-benefits__heading, .product-resources--sms-accordion .product-resources__heading, .product-related--sms-cards .product-related__heading {
  flex: 1 1 auto;
  min-width: 0;
}

.product-features--sms-ghost-grid .product-features__rule, .product-applications--sms-grid .product-applications__rule, .product-benefits--sms-icons .product-benefits__rule, .product-resources--sms-accordion .product-resources__rule, .product-related--sms-cards .product-related__rule {
  flex: 1 1 120px;
  min-width: 60px;
}


/* Layerly — Featured Products band CSS matching Figma 2105:1159 (navy ground, gradient cards, arrow badge) — 2026-09-16T20:39:46.884Z */
.product-archive-hero--sms-photo {
  min-height: 500px;
}

.featured-products--sms-cards {
  background: var(--section-bg-color, var(--color-primary));
  padding: var(--space-xl) 0;
}

.featured-products--sms-cards .featured-products__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.featured-products--sms-cards .featured-products__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.featured-products--sms-cards .featured-products__heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.featured-products--sms-cards .featured-products__rule {
  flex: 1 1 120px;
  min-width: 60px;
  height: 1px;
  background: var(--color-accent);
}

.featured-products--sms-cards .featured-products__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.featured-products--sms-cards .featured-products__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-sm);
  background: linear-gradient(180deg, #0B1F29 0%, rgba(0, 81, 118, 0.5) 100%);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform .18s ease;
}

.featured-products--sms-cards .featured-products__card:hover {
  transform: translateY(-4px);
}

.featured-products--sms-cards .featured-products__card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.featured-products--sms-cards .featured-products__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-lg);
}

.featured-products--sms-cards .featured-products__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}

.featured-products--sms-cards .featured-products__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold, 600);
  line-height: 23px;
  color: var(--color-1);
}

.featured-products--sms-cards .featured-products__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-5, #005176);
  color: var(--color-1);
}

.featured-products--sms-cards .featured-products__link-label {
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  color: var(--color-accent);
}

.featured-products--sms-cards .featured-products__media {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 261 / 280;
}

.featured-products--sms-cards .featured-products__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Layerly — Contact form band CSS matching Figma 2102:727, plus mobile breakpoints for featured-products and all-products grids — 2026-09-16T20:39:55.987Z */
.contact-form-band--sms-form {
  background: var(--section-bg-color, var(--color-deep));
  padding: var(--space-xl) 0;
}

.contact-form-band--sms-form .contact-form-band__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-form-band--sms-form .contact-form-band__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form-band--sms-form .contact-form-band__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-1);
}

.contact-form-band--sms-form .contact-form-band__subheading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-surface);
}

.contact-form-band--sms-form .contact-form-band__form {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  --field-pad: var(--space-sm);
}

/* RESPONSIVE — literal @media block on purpose: write_css flattens @media
   wrappers, which promotes mobile overrides to global rules. */
@media (max-width: 880px) {
  .contact-form-band--sms-form .contact-form-band__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .featured-products--sms-cards .featured-products__row,
  .category-grid--sms-all-products .category-grid__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .featured-products--sms-cards .featured-products__row,
  .category-grid--sms-all-products .category-grid__row {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Mirror the category-grid--sms-products card treatment for the new sms-all-products variant so the full-catalog grid matches the category-page grid exactly — 2026-09-16T20:40:19.282Z */
.category-grid--sms-all-products {
  background-color: var(--section-bg-color, var(--color-surface));
  background-image: var(--dot-scrim-surface), var(--dot-pattern);
  background-repeat: repeat, repeat;
  background-size: auto, var(--dot-pattern-size) auto;
  background-position: center top, center top;
  padding: var(--space-xl) 0;
}

.category-grid--sms-all-products .category-grid__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.category-grid--sms-all-products .category-grid__header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.category-grid--sms-all-products .category-grid__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
  white-space: nowrap;
}

.category-grid--sms-all-products .category-grid__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-accent);
  margin-bottom: 12px;
}

.category-grid--sms-all-products .category-grid__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.category-grid--sms-all-products .category-grid__card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  padding: 0;
  transition: transform .18s ease;
}

.category-grid--sms-all-products .category-grid__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.category-grid--sms-all-products .category-grid__media {
  padding: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
}

.category-grid--sms-all-products .category-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-grid--sms-all-products .category-grid__arrow {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-accent);
}

.category-grid--sms-all-products .category-grid__arrow .icon {
  width: 13px;
  height: 13px;
  transform: rotate(-45deg);
}

.category-grid--sms-all-products .category-grid__body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-1);
  border-radius: 0;
  flex: 1;
}

.category-grid--sms-all-products .category-grid__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-semibold, 600);
  line-height: 23px;
  color: var(--color-primary);
}

.category-grid--sms-all-products .category-grid__excerpt {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 21px;
  color: var(--color-text);
}

.category-grid--sms-all-products .category-grid__card:hover {
  transform: translateY(-4px);
}

.category-grid--sms-all-products .category-grid__card:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.category-grid--sms-all-products .category-grid__inner {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (max-width: 1024px) {
  .category-grid--sms-all-products .category-grid__row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .category-grid--sms-all-products .category-grid__row { grid-template-columns: 1fr; }
}


/* Layerly — Tighten contact form input padding on the quote-band component (used on Home, About, Contact) — smaller --field-pad and tighter label-to-input gap — 2026-09-18T16:38:02.716Z */
.contact-band--sms-quote .contact-band__form .field {
  gap: 6px;
}


/* Layerly — Add desktop hover/focus dropdown styling for nested primary-nav items (product categories now have per-product children) — no existing .sub-menu CSS existed anywhere in the theme; mobile shows the submenu inline/always-open since the drawer is already a full stacked list — 2026-09-18T17:20:49.533Z */
.nav__list li {
  position: relative;
}

.nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  min-width: 260px;
  margin: 0;
  padding: var(--space-sm) 0;
  list-style: none;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu {
  display: flex;
}

.nav__list .sub-menu li {
  width: 100%;
}

.nav__list .sub-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--weight-reg);
  white-space: nowrap;
  color: var(--color-text);
}

.nav__list .sub-menu a:hover {
  background: var(--color-bg);
  color: var(--nav-link-hover);
}

.nav__list .sub-menu {
  position: static;
  display: flex;
  min-width: 0;
  box-shadow: none;
  background: transparent;
  padding-top: var(--space-xs);
}

.nav__list .sub-menu a {
  color: var(--mobile-menu-fg, var(--color-surface));
  font-size: var(--text-md);
  text-align: center;
}


/* Layerly — Add desktop hover/focus dropdown styling for the site's real chrome component (.smsnav__menu, template-parts/nav/sms-header.php) — product category links now have per-product children in the menu; no submenu CSS existed for this selector before — 2026-09-18T17:22:02.935Z */
.smsnav__menu li {
  position: relative;
}

.smsnav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  min-width: 220px;
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.smsnav__menu li:hover > .sub-menu, .smsnav__menu li:focus-within > .sub-menu {
  display: flex;
}

.smsnav__menu .sub-menu li {
  width: 100%;
}

.smsnav__menu .sub-menu a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-utility);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--color-text);
  border-bottom: none;
}

.smsnav__menu .sub-menu a:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .smsnav__menu .sub-menu {
    position: static;
    display: flex;
    min-width: 0;
    box-shadow: none;
    background: transparent;
    padding-top: var(--space-xs);
  }
}

@media (max-width: 768px) {
  .smsnav__menu .sub-menu a {
    color: var(--mobile-menu-fg, var(--color-surface));
    font-size: var(--text-sm);
    text-align: center;
  }
}


/* Layerly — Add missing mobile/tablet breakpoints for the 4 product-single grid sections (features, applications, benefits, resources-links) — these had no responsive override at all, so their 3/4/5-column desktop grids were squeezing into mobile width and clipping card text — 2026-09-18T18:34:39.900Z */
@media (max-width: 1024px) {
  .product-features--sms-ghost-grid .product-features__row,
  .product-applications--sms-grid .product-applications__grid,
  .product-benefits--sms-icons .product-benefits__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .product-resources--sms-accordion .product-resources__links {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .product-features--sms-ghost-grid .product-features__row,
  .product-applications--sms-grid .product-applications__grid,
  .product-benefits--sms-icons .product-benefits__row,
  .product-resources--sms-accordion .product-resources__links {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Add missing mobile/tablet breakpoints for product-related__row (Related Foam Products) — was hardcoded repeat(4,1fr) with no responsive override, squeezing 4 columns into mobile width — 2026-09-18T18:41:00.708Z */
@media (max-width: 1024px) {
  .product-related--sms-cards .product-related__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .product-related--sms-cards .product-related__row {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Add missing mobile breakpoint for product-intro__row (Product Intro split card+image) — was hardcoded 1fr 1fr with no responsive override, squeezing the intro card and image side-by-side on mobile into a cramped narrow column — 2026-09-18T18:52:58.148Z */
@media (max-width: 880px) {
  .product-intro--sms-split .product-intro__row {
    grid-template-columns: 1fr;
  }
}


/* Layerly — CSS for the new Contact page hero (single centered panel, no image) and contact-info card row (phone/address/hours), matching existing about-hero panel treatment and trust-points card style — 2026-09-30T15:55:43.910Z */
.contact-hero--sms-panel .contact-hero__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  align-items: center;
  padding: var(--space-lg);
  background: var(--color-primary);
  border-radius: var(--radius-md);
}

.contact-info--sms-cards {
  background-color: var(--section-bg-color, var(--color-bg));
  padding: var(--space-xl) 0;
}

.contact-info--sms-cards .contact-info__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info--sms-cards .contact-info__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.contact-info--sms-cards .contact-info__heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  color: var(--color-primary);
}

.contact-info--sms-cards .contact-info__rule {
  flex: 1 1 120px;
  min-width: 60px;
  height: 1px;
  background: var(--color-accent);
}

.contact-info--sms-cards .contact-info__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.contact-info--sms-cards .contact-info__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.contact-info--sms-cards .contact-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-1);
}

.contact-info--sms-cards .contact-info__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text);
}

.contact-info--sms-cards .contact-info__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-info--sms-cards a.contact-info__value {
  text-decoration: none;
  color: var(--color-accent);
}

.contact-info--sms-cards a.contact-info__value:hover {
  text-decoration: underline;
}

@media (max-width: 880px) {
  .contact-info--sms-cards .contact-info__row {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Contact hero shorter min-height (matches product-archive hero pattern, not full 840px homepage hero), new contact-info list styling merged into contact-form-band's left column, and tightened field padding/gap for the contact form on this section — 2026-09-30T17:14:53.149Z */
.contact-hero--sms-panel {
  min-height: 460px;
}

.contact-form-band--sms-form .contact-form-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-form-band--sms-form .contact-form-band__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.contact-form-band--sms-form .contact-form-band__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-1);
}

.contact-form-band--sms-form .contact-form-band__item-value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.contact-form-band--sms-form .contact-form-band__form .field {
  gap: 6px;
}


/* Layerly — Product specification tables (sms-table) and resource card grids — 2026-10-01.
   Same anatomy as the other product sections: section ground, inner measure, display heading + rule. */
.product-specs--sms-table {
  background: var(--section-bg-color, var(--color-bg));
  padding: var(--space-xl) 0;
}
.product-specs--sms-table .product-specs__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.product-specs--sms-table .product-specs__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  row-gap: var(--space-sm);
}
.product-specs--sms-table .product-specs__heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: 52px;
  letter-spacing: -0.48px;
  color: var(--color-primary);
}
.product-specs--sms-table .product-specs__rule {
  flex: 1 1 120px;
  min-width: 60px;
  height: 1px;
  background: var(--color-accent);
}
.product-specs--sms-table .product-specs__intro,
.product-specs--sms-table .product-specs__note {
  margin: 0;
  max-width: 840px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 25px;
  color: var(--color-text);
}
.product-specs--sms-table .product-specs__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.product-specs--sms-table .product-specs__table-block { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.product-specs--sms-table .product-specs__caption {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-med);
  line-height: 33px;
  color: var(--color-text);
}
.product-specs--sms-table .product-specs__scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-1);
  box-shadow: 0 0 0 1px var(--color-border);
}
.product-specs--sms-table .product-specs__scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.product-specs--sms-table .product-specs__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.product-specs--sms-table .product-specs__table thead th {
  background: var(--color-6);
  color: var(--color-1);
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--weight-med);
  font-size: var(--text-sm);
  padding: 14px 16px;
  white-space: nowrap;
}
.product-specs--sms-table .product-specs__table th[scope="row"] {
  text-align: left;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  padding: 12px 16px;
  white-space: nowrap;
}
.product-specs--sms-table .product-specs__table td { padding: 12px 16px; color: var(--color-text); }
.product-specs--sms-table .product-specs__table tbody tr:nth-child(even) { background: var(--color-surface); }
.product-specs--sms-table .product-specs__table tbody tr + tr { border-top: 1px solid var(--color-border); }
.product-specs--sms-table .product-specs__table-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 768px) {
  .product-specs--sms-table { padding: var(--space-lg) 0; }
  .product-specs--sms-table .product-specs__heading { font-size: 32px; line-height: 38px; }
}

/* In-copy links (layerly_prose_linkify) read as links on every product ground. */
.product-intro__body a, .product-benefit-list__intro a, .product-benefit-list__closing a,
.product-specs__intro a, .product-specs__note a, .product-resources__article-text a, .cta-band__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-intro--sms-split .product-intro__card a:not(.product-intro__cta) { color: var(--color-accent-on-dark); }


/* Layerly — About page: real owner video player (replaces the placeholder poster image) — 2026-10-01 */
.founder__media-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1900 / 1000;
  background: var(--color-deep);
  object-fit: cover;
}

.product-features__body a, .product-applications__body a, .product-benefits__body a { color: var(--color-accent-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.product-applications--sms-grid .product-applications__body a { color: var(--color-primary); }
.product-benefits--sms-icons .product-benefits__body a { color: var(--color-primary); }


/* Layerly — Mega menu for the primary navigation (template-parts/nav/sms-header.php + inc/nav-mega.php) — 2026-10-01.
   Desktop: a white panel under the header opens on hover or keyboard focus. Phone: tap-to-expand accordion. */
@media (min-width: 769px) {
  .smsnav__inner { position: relative; }
  .smsnav__menu > li.is-mega { position: static; }
  .smsnav__menu > li.is-mega > .sub-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-lg) var(--space-lg);
    margin: 0;
    padding: var(--space-lg);
    list-style: none;
    background: var(--color-1);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 20, 30, 0.28);
    min-width: 0;
  }
  /* Invisible bridge so the pointer can travel from the menu word to the panel without it closing. */
  .smsnav__menu > li.is-mega > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -56px;
    height: 56px;
  }
  .smsnav__menu > li.is-mega:hover > .sub-menu,
  .smsnav__menu > li.is-mega:focus-within > .sub-menu,
  .smsnav__menu > li.is-mega.is-open > .sub-menu { display: grid; }
  .smsnav__menu > li.is-mega > a { padding-right: 14px; position: relative; }
  .smsnav__menu > li.is-mega > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .smsnav__menu > li.is-mega > .sub-menu > li { width: auto; min-width: 0; }
  .smsnav__menu > li.is-mega > .sub-menu > li.mega-footer {
    grid-column: 1 / -1;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
  }
  /* The column's own list (level 3) is always visible and plain. */
  .smsnav__menu > li.is-mega .sub-menu .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .smsnav__menu > li.is-mega > .sub-menu > li.mega-footer > .sub-menu { flex-direction: row; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
  .smsnav__menu > li.is-mega > .sub-menu > li.mega-footer > .smsmega__heading { display: inline-block; margin: 0 var(--space-md) 0 0; border: 0; padding: 0; }
  .smsnav__menu > li.is-mega > .sub-menu > li.mega-footer { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) 0; }
}
.smsnav__menu .smsmega__heading {
  display: block;
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.smsnav__menu li.is-mega .sub-menu .sub-menu a {
  display: block;
  padding: 9px 10px;
  margin-inline: -10px;
  border-radius: var(--radius-sm);
  border-bottom: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  white-space: normal;
}
.smsnav__menu li.is-mega .sub-menu .sub-menu a:hover,
.smsnav__menu li.is-mega .sub-menu .sub-menu a:focus-visible { background: var(--color-surface); color: var(--color-primary); border-bottom: 0; }
.smsnav__menu .smsmega__desc {
  display: block;
  margin-top: 2px;
  font-weight: var(--weight-reg);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.smsnav__menu > li.is-mega > .sub-menu > li.mega-footer .smsmega__desc { display: none; }

@media (max-width: 768px) {
  .smsnav__menu > li.menu-item-has-children > .sub-menu { display: none; }
  .smsnav__menu > li.menu-item-has-children.is-expanded > .sub-menu { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; }
  .smsnav__menu > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  .smsnav__menu > li.menu-item-has-children.is-expanded > a::after { transform: rotate(-135deg); }
  .smsnav__menu .smsmega__heading { text-align: center; color: var(--color-accent-on-dark); border-bottom-color: rgba(255,255,255,0.2); margin-top: var(--space-sm); }
  .smsnav__menu .smsmega__desc { display: none; }
  .smsnav__menu li.is-mega .sub-menu .sub-menu a { margin-inline: 0; color: var(--mobile-menu-fg, var(--color-surface)); font-size: var(--text-md); text-align: center; }
  .smsnav__menu > li.is-mega > .sub-menu { background: transparent; box-shadow: none; }
}


/* Layerly — Pricing tiers: three columns, one per order size — 2026-10-01 */
.pricing--sms-columns { background: var(--section-bg-color, var(--color-bg)); padding: var(--space-xl) 0; }
.pricing--sms-columns .pricing__inner { max-width: var(--measure); margin-inline: auto; padding-inline: var(--space-md); display: flex; flex-direction: column; gap: var(--space-lg); }
.pricing--sms-columns .pricing__header { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; row-gap: var(--space-sm); }
.pricing--sms-columns .pricing__heading { margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--weight-reg); line-height: 52px; letter-spacing: -0.48px; color: var(--color-primary); }
.pricing--sms-columns .pricing__rule { flex: 1 1 120px; min-width: 60px; height: 1px; background: var(--color-accent); }
.pricing--sms-columns .pricing__intro, .pricing--sms-columns .pricing__note { margin: 0; max-width: 840px; font-size: var(--text-md); line-height: 25px; color: var(--color-text); }
.pricing--sms-columns .pricing__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.pricing--sms-columns .pricing__notice { padding: var(--space-md); border-radius: var(--radius-md); background: #FFF3CD; color: #4D3B00; border: 1px solid #E6C766; max-width: 840px; }
.pricing--sms-columns .pricing__notice-text { margin: 0; font-size: var(--text-sm); line-height: 22px; }
.pricing--sms-columns .pricing__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.pricing--sms-columns .pricing__tier { display: flex; flex-direction: column; background: var(--color-1); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-border); overflow: hidden; min-width: 0; }
.pricing--sms-columns .pricing__tier--featured { box-shadow: 0 0 0 2px var(--color-accent), 0 12px 28px rgba(0, 52, 74, 0.16); }
.pricing--sms-columns .pricing__tier-head { position: relative; padding: var(--space-md); background: var(--color-6); color: var(--color-1); display: flex; flex-direction: column; gap: 4px; }
.pricing--sms-columns .pricing__badge { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-accent-on-dark); color: var(--color-3); font-size: 12px; font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.pricing--sms-columns .pricing__tier-name { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-med); color: var(--color-1); }
.pricing--sms-columns .pricing__tier-range { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent-on-dark); }
.pricing--sms-columns .pricing__tier-blurb { margin: var(--space-xs) 0 0; font-size: var(--text-sm); line-height: 21px; color: var(--color-surface); }
.pricing--sms-columns .pricing__rows { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.pricing--sms-columns .pricing__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); padding: 14px var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.pricing--sms-columns .pricing__row:first-child { border-top: 0; }
.pricing--sms-columns .pricing__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--color-text); }
.pricing--sms-columns .pricing__detail { font-size: 14px; color: var(--color-text-muted); }
.pricing--sms-columns .pricing__price { flex: none; font-family: var(--font-display); font-weight: var(--weight-med); font-variant-numeric: tabular-nums; color: var(--color-primary); white-space: nowrap; }
.pricing--sms-columns .pricing__cta { margin: var(--space-md); padding: 12px var(--space-md); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); text-align: center; font-family: var(--font-utility); font-weight: var(--weight-bold); color: var(--color-primary); text-decoration: none; }
.pricing--sms-columns .pricing__tier--featured .pricing__cta { background: var(--color-primary); color: var(--color-1); }
.pricing--sms-columns .pricing__cta:hover, .pricing--sms-columns .pricing__cta:focus-visible { background: var(--color-deep); color: var(--color-1); }
@media (max-width: 1024px) { .pricing--sms-columns .pricing__columns { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .pricing--sms-columns { padding: var(--space-lg) 0; } .pricing--sms-columns .pricing__heading { font-size: 32px; line-height: 38px; } }

@media (min-width: 769px) {
  .smsnav__menu > li.is-mega > .sub-menu > li.mega-footer > .sub-menu > li { width: auto; }
  .smsnav__menu > li.is-mega > .sub-menu > li.mega-footer > .sub-menu a { margin-inline: 0; padding: 6px 10px; }
}

/* Layerly — The phone menu drawer was white with near-white text (unreadable); give it the site's deep navy ground — 2026-10-01 */
:root {
  --mobile-menu-bg: var(--color-deep);
  --mobile-menu-fg: var(--color-1);
}
@media (max-width: 768px) {
  .smsnav__menu > li > a { font-size: var(--text-lg); color: var(--mobile-menu-fg); }
  .smsnav__menu > li.menu-item-has-children > a { display: inline-flex; align-items: center; }
}
@media (max-width: 768px) {
  [data-mobile-menu] a.smsnav__cta { color: var(--color-primary); }
}
@media (max-width: 768px) {
  /* A tall, expanded menu must scroll from its top edge instead of being centered off-screen. */
  .smsnav__drawer[data-mobile-menu] { justify-content: flex-start; padding-top: 120px; padding-bottom: var(--space-xl); }
  .smsnav__menu > li.menu-item-has-children.is-expanded > .sub-menu { gap: 0; }
  .smsnav__menu li.is-mega .sub-menu .sub-menu { gap: 0; }
  .smsnav__menu li.is-mega .sub-menu .sub-menu a { padding: 10px 0; }
}


/* Layerly — Product intro two-photo collage (client comment cmt_54ghqberihw7ha: "Change Pic?? Collage??") — 2026-10-02 */
.product-intro--sms-split .product-intro__media--collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; gap: var(--space-sm); border-radius: 0; overflow: visible; }
.product-intro--sms-split .product-intro__media--collage .product-intro__image { width: 100%; height: 100%; min-height: 400px; object-fit: cover; object-position: center; border-radius: var(--radius-md); }
@media (max-width: 880px) {
  .product-intro--sms-split .product-intro__media--collage .product-intro__image { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
}

/* Layerly — Pricing: four tiers (client comment cmt_tidlxinlw54qqy) — 4 across on desktop, 2 x 2 on tablet, stacked on phones — 2026-10-02 */
.pricing--sms-columns .pricing__columns--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .pricing--sms-columns .pricing__columns--count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .pricing--sms-columns .pricing__columns--count-4 { grid-template-columns: 1fr; } }