/* =======================================================
   SLEEK THEME (Neon Cyan / Dark Gray)
   ======================================================= */

/* --- Default (Light Theme) --- */
:root {
  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg-color: #f1f5f9;
  --text-color: #0f172a;
  --muted-text: color-mix(in srgb, var(--text-color) 96%, transparent);
  --link-color: #0a5568;
  --border-color: #cbd5e1;

  --hero-gradient-from: #083344;
  --hero-gradient-to: #164e63;
  --hero-gradient-text: #ecfeff;

  --hero-bg: #e2e8f0;
  --card-bg: #ffffff;

  --bg-header: #f8fafc;
  --text-header: #0f172a;

  --btn-primary-bg: #0a5568;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #0a5568;
  --btn-secondary-text: #0a5568;

  /* Surface variants (can be overridden for bg images) */
  --bg-color-surface: var(--bg-color);
  --hero-bg-surface: var(--hero-bg);
  --card-bg-surface: var(--card-bg);
  --bg-header-surface: var(--bg-header);
  --hero-gradient-from-surface: var(--hero-gradient-from);
  --hero-gradient-to-surface: var(--hero-gradient-to);
  --accent-bg-surface: var(--btn-primary-bg);
  /* Personality (radius/shadow) — consumed by theme_shared_utils.css */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 0 0 1px rgba(15,23,42,0.08);
  --shadow-md: 0 1px 2px rgba(15,23,42,0.10);
  --shadow-lg: 0 4px 8px rgba(15,23,42,0.12);

}

/* --- Auto Dark Mode (user OS preference) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #020617;
    --text-color: #f8fafc;
    --muted-text: color-mix(in srgb, var(--text-color) 96%, transparent);
    --link-color: #67e8f9;
    --border-color: #1e293b;

    --hero-gradient-from: #147f8f;
    --hero-gradient-to: #051f29;
    --hero-gradient-text: #ffffff;

    --hero-bg: #0f172a;
    --card-bg: #1e293b;

    --bg-header: #020617;
    --text-header: #f8fafc;

    --btn-primary-bg: #22d3ee;
    --btn-primary-text: #083344;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: #22d3ee;
    --btn-secondary-text: #22d3ee;
  }
}


/* --- Manual Light Theme Override --- */
:root[data-theme='light'] {
  --bg-color: #f1f5f9;
  --text-color: #0f172a;
  --muted-text: color-mix(in srgb, var(--text-color) 96%, transparent);
  --link-color: #0a5568;
  --border-color: #cbd5e1;
  --hero-gradient-from: #083344;
  --hero-gradient-to: #164e63;
  --hero-gradient-text: #ecfeff;
  --hero-bg: #e2e8f0;
  --card-bg: #ffffff;
  --bg-header: #f8fafc;
  --text-header: #0f172a;
  --btn-primary-bg: #0a5568;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #0a5568;
  --btn-secondary-text: #0a5568;
}
/* --- Manual Dark Theme Override --- */
:root[data-theme='dark'] {
  --bg-color: #020617;
  --text-color: #f8fafc;
  --muted-text: color-mix(in srgb, var(--text-color) 96%, transparent);
  --link-color: #67e8f9;
  --border-color: #1e293b;

  --hero-gradient-from: #147f8f;
  --hero-gradient-to: #051f29;
  --hero-gradient-text: #ffffff;

  --hero-bg: #0f172a;
  --card-bg: #1e293b;

  --bg-header: #020617;
  --text-header: #f8fafc;

  --btn-primary-bg: #22d3ee;
  --btn-primary-text: #083344;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #22d3ee;
  --btn-secondary-text: #22d3ee;
}


/* inlined: ./theme_shared_utils.css */
/* =======================================================
   BASE ELEMENTS
   ======================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color-surface, var(--bg-color));
  color: var(--text-color);
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

/* Removed problematic body > div for component preview compatibility */
/* body > div {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
} */

/* Some pages render header/main/footer directly under <body> */
body > main[data-layout-section-name='layout_main'],
body > main#content {
  flex: 1 0 auto;
}

body > footer[data-layout-section-name='layout_footer'] {
  margin-top: auto;
}

body > div > main[data-layout-section-name='layout_main'] {
  flex: 1 0 auto;
}

body > div > footer[data-layout-section-name='layout_footer'] {
  margin-top: auto;
}

/* Phones: text keeps its authored size when the device is rotated. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media never outgrows its container. Zero specificity: any component rule
   that sizes its own media still wins. */
:where(img, video, iframe) {
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

/* Controls take the page's typeface instead of the browser's 13px default. */
:where(input, select, textarea, button) {
  font: inherit;
}

/* Touch devices: below 16px iOS Safari zooms the page when a text-entry
   control takes focus. An invariant, not a default: component, shell and
   preset rules that size these controls do not apply on touch. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="file"], [type="hidden"]),
  select,
  textarea {
    font-size: max(1rem, 16px) !important;
  }

  /* Thumb-sized: text-entry controls and selects are at least 44px tall. */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="image"], [type="file"], [type="hidden"]),
  select,
  .form-control {
    min-height: 44px;
  }

  /* Buttons keep the 44px their padding gives them even when a density
     preset trims the padding. */
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
  }

  /* Phone and email links stand on their own line in every component. */
  a[data-slot="contact_phone"],
  a[data-slot="contact_email"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 0.2s;
}

a:hover {
  text-decoration: underline;
}

/* =======================================================
   THEME UTILITY CLASSES (Added)
   ======================================================= */
/* Spacing scale (rem based) */
:root {
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
}

/* Containers & layout */
/* Collapse contract: runtimes toggle only the hidden attribute on
   [data-target-id] panels; this rule outranks any authored inline display
   (e.g. display: grid) so authored styles never need runtime mutation. */
[data-target-id][hidden] { display: none !important; }
/* Overlay layer contract: a content layer stacked over a media slot (a photo
   band, a video, a collage) lets the pointer through its empty area to the
   media below, and keeps every content slot and control in it reachable, for
   visitors and for the editor (audit_authoring_reachability.js, at desktop and
   phone width). Author data-overlay-layer on the layer; never pointer-events
   in a component's own CSS for this. */
[data-overlay-layer] { pointer-events: none; }
[data-overlay-layer] :is([data-slot], a, button, input, select, textarea, label) { pointer-events: auto; }
.section { padding: calc(var(--space-5) * var(--section-density, 1)) var(--space-4); }
.section-narrow { max-width: 1000px; margin: 0 auto; }
.center-text { text-align: center; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: calc(var(--space-1) * var(--section-density, 1)); }
.gap-2 { gap: calc(var(--space-2) * var(--section-density, 1)); }
.gap-3 { gap: calc(var(--space-3) * var(--section-density, 1)); }
.gap-4 { gap: calc(var(--space-4) * var(--section-density, 1)); }

/* Grid helpers */
.grid { display: grid; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space-2) * var(--section-density, 1)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--space-2) * var(--section-density, 1)); }

/* Typography */
.hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; margin-bottom: var(--space-2); }
.hd1 { font-family: var(--font-heading); font-size: 2.5rem; line-height: 1.1; }
.hd2 { font-family: var(--font-heading); font-size: 2rem; line-height: 1.2; }
.hd3 { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.3; }
.lead { font-size: 1.25rem; }
.muted { color: var(--muted-text, var(--text-color)); }
.text-md { font-size: 1.2rem; }
.italic { font-style: italic; }

/* Cards & surfaces */
.card { background: var(--card-bg-surface, var(--card-bg)); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-2); transition: background .3s, border-color .3s; }
.card-ghost { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-2); }

/* Plane emphasis pair (Actor Color Contract rule 7): every top-level actor
   root starts on the base plane, declared on the root itself so a preset that
   remaps --link-color there still flows into the pair. Zero specificity so any
   plane rule ((0,1,0): .bg-accent, a surface preset) wins; nested actor roots
   (widgets, sub-actors) inherit their plane's pair instead of resetting it. */
:where([data-builder-class]:not([data-builder-class] [data-builder-class])) {
  --link: var(--link-color);
  --link-contrast: var(--bg-color);
}

/* Generic surface shape. Declared BEFORE the .bg-* tints so a tint on the same
   element (.surface.bg-accent) wins the (0,1,0) tie and keeps its paired text. */
.surface { background: var(--surface-3); color: var(--content-strong); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); box-shadow: var(--shadow-sm); }
.surface-ghost { background: transparent; color: var(--content-strong); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); }

/* Hero / themed backgrounds */
.bg-hero-gradient { background: linear-gradient(135deg, var(--hero-gradient-from-surface, var(--hero-gradient-from)), var(--hero-gradient-to-surface, var(--hero-gradient-to))); color: var(--hero-gradient-text); }
.bg-hero { background: var(--hero-bg-surface, var(--hero-bg)); --content-muted: color-mix(in srgb, var(--text-color) 80%, var(--hero-bg)); }
.bg-accent { background: var(--accent-bg-surface, var(--btn-primary-bg)); color: var(--btn-primary-text); }
.bg-alt { background: var(--hero-bg-surface, var(--hero-bg)); --content-muted: color-mix(in srgb, var(--text-color) 80%, var(--hero-bg)); }
.bg-base { background: var(--bg-color-surface, var(--bg-color)); }

/* Color helpers */
.text-accent { color: var(--link); }
.text-inverse { color: var(--btn-primary-text); }

/* Buttons reuse base btn classes from earlier */
.btn { padding: 0.9rem 1.8rem; border-radius: 8px; font-weight: 600; display: inline-block; text-decoration: none; }

/* Radius & media helpers */
.rounded { border-radius: var(--radius-md); }
.rounded-full { border-radius: 50%; }
.img-responsive { max-width: 100%; height: auto; display: block; }

/* Utility spacing overrides */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
/* Additional spacing & layout helpers */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-700 { max-width: 700px; }

/* FAQ specific */
.faq-item { text-align: left; margin-bottom: var(--space-1); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.faq-trigger { width: 100%; padding: var(--space-2); background: var(--hero-bg-surface, var(--hero-bg)); color: var(--text-color); border: none; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; cursor: pointer; font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.faq-trigger:hover { background: var(--card-bg-surface, var(--card-bg)); }
.faq-trigger:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.faq-answer { display: none; padding: var(--space-2); font-size: 0.95rem; color: var(--text-color); background: var(--card-bg-surface, var(--card-bg)); }

/* Ensure FAQ remains readable even when wrapped in inverse/accent sections */
[data-main-section-name="section_faq"] h1,
[data-main-section-name="section_faq"] h2,
[data-main-section-name="section_faq"] h3,
[data-main-section-name="section_faq"] p {
  color: var(--text-color);
}

[data-main-section-name="section_faq"] .faq-trigger,
[data-main-section-name="section_faq"] .faq-answer {
  color: var(--text-color);
}

/* Stats */
.stat-number { font-size: 2rem; color: var(--link); }



/* Responsive tweaks */
.flex-responsive {
  display: flex;
}
@media (max-width: 900px) {
  .flex-responsive { flex-direction: column; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* =======================================================
   BUTTONS
   ======================================================= */
.btn-primary,
.btn-secondary {
  /* 0.8125rem vertical padding keeps the rendered box at or above the 44px
     touch-target minimum with the default line-height. */
  padding: 0.8125rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
a.btn-primary:focus-visible,
a.btn-secondary:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-color) 85%, transparent);
}

/* Secondary button must remain readable on accent backgrounds */
.bg-accent .btn-secondary {
  border-color: color-mix(in srgb, var(--btn-primary-text) 70%, transparent);
  color: var(--btn-primary-text);
}

.bg-accent {
  --btn-secondary-hover-bg: var(--btn-primary-text);
  --btn-secondary-hover-text: var(--btn-primary-bg);
  --link: var(--btn-primary-text);
  --link-contrast: var(--btn-primary-bg);
}

/* Secondary button must remain readable on hero gradient backgrounds */
.bg-hero-gradient .btn-secondary {
  border-color: color-mix(in srgb, var(--hero-gradient-text) 70%, transparent);
  color: var(--hero-gradient-text);
}

.bg-hero-gradient {
  --btn-secondary-hover-bg: var(--hero-gradient-text);
  --btn-secondary-hover-text: var(--hero-gradient-from);
  --link: var(--hero-gradient-text);
  --link-contrast: var(--hero-gradient-from);
}

/* Button hover state. Declared after the surface variants above so it wins the
   equal-specificity tie against .bg-accent / .bg-hero-gradient base rules, and
   carrying an actor-scoped selector (0,3,1) so ambient component rules such as
   [data-builder-class="footer"] a:hover can never repaint a button label into
   its own fill. Surfaces and presets adjust hover colour by remapping the
   --btn-*-hover-* tokens, never by adding a competing selector.
   Hover fills with the primary pair: it is the one pairing every theme is held
   to by the accessibility audit. */
.btn-primary:hover,
[data-builder-class] a.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg, var(--btn-primary-bg));
  color: var(--btn-primary-hover-text, var(--btn-primary-text));
  opacity: 0.9;
}

.btn-secondary:hover,
[data-builder-class] a.btn-secondary:hover {
  background-color: var(--btn-secondary-hover-bg, var(--btn-primary-bg));
  color: var(--btn-secondary-hover-text, var(--btn-primary-text));
}


/* =======================================================
   SEMANTIC TOKENS (Expanded) + UTILITIES
   ======================================================= */
/* These additions extend the existing variables with more roles
   and reusable utilities without breaking current styles. */

/* Roles */
:root {
  /* Surfaces */
  --surface-1: var(--bg-color-surface, var(--bg-color));
  --surface-2: var(--hero-bg-surface, var(--hero-bg));
  --surface-3: var(--card-bg-surface, var(--card-bg));

  /* Content */
  --content-strong: var(--text-color);
  --content-muted: var(--muted-text);

  /* Brand */
  --brand: var(--btn-primary-bg);
  --brand-contrast: var(--btn-primary-text);
  --link: var(--link-color);
  --link-contrast: var(--bg-color);
  --border: var(--border-color);

  /* Radius & shadows come from each theme palette (:root personality tokens). */
}

@media (prefers-color-scheme: dark) {
  :root {
    --content-muted: color-mix(in srgb, var(--text-color) 72%, var(--bg-color));
  }
}

:root[data-theme='dark'] {
  --content-muted: color-mix(in srgb, var(--text-color) 72%, var(--bg-color));
}

:root[data-theme='light'] {
  --content-muted: var(--muted-text);
}


/* Containers */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-2); }
.container-narrow { max-width: 1000px; margin: 0 auto; padding: 0 var(--space-2); }
/* Footer layout helpers */
.footer-container { width: 100%; box-sizing: border-box; }
.footer-grid { display: grid; gap: calc(var(--space-3, 1rem) * var(--section-density, 1)); }
.footer-divider { border-top: 1px solid var(--border-color); }


/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Borders & radius */
.border { border: 1px solid var(--border); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Links */
.link { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; }
.link:hover { text-decoration: underline; }

/* Form controls */
.form-control { width: 100%; padding: 0.625rem 0.75rem; background: var(--card-bg-surface, var(--card-bg)); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.form-control:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

/* Buttons - additional variants */
.btn-ghost { background: transparent; color: var(--link); border: 2px solid transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* Focus helper */
.focus-ring:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Alias used by some components */
:root { --accent: var(--brand); --accent-contrast: var(--brand-contrast); }

/* Reveal-on-scroll utilities (used by multiple components) */

[data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] [data-reveal-target] {
  transition:
    opacity var(--reveal-duration, 1.1s) var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--reveal-duration, 1.1s) var(--reveal-easing, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}

[data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] [data-reveal-target]:not(.is-visible) {
  opacity: 0;
  transform: translateY(var(--reveal-offset-y, 40px));
}

[data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] [data-reveal-target].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] .hero-your-vision-title[data-reveal-target] { transition-delay: 0.1s; }
[data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] .hero-your-vision-image[data-reveal-target] { transition-delay: 0.2s; }
[data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] .hero-your-vision-tagline[data-reveal-target] { transition-delay: 0.3s; }

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  
  [data-behavior-host-mode="interactive"] [data-reveal-on-scroll="true"] [data-reveal-target]:not(.is-visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* HEADER NAV SHELL (auto-included) */

/* inlined: ./header_nav_shell.css */
/* Shared header nav-shell styles — loaded via theme bundle */

/* inlined: ./header_megamenu.css */
/* Shared megamenu panel styles (rules used by every panel) — imported via header_nav_shell.css */

[data-builder-class="header_megamenu"] {
    display: block;
}

[data-builder-class="header_megamenu_shell"] {
    box-sizing: border-box;
    margin: 0 auto;
    color: var(--content-strong, var(--text-color));
    border: 1px solid var(--border, var(--border-color));
    background: var(--surface-1, var(--bg-color-surface, var(--bg-color)));
    display: grid;
}

[data-builder-class="header_megamenu_col"],
[data-builder-class="header_megamenu_panel"],
[data-builder-class="header_megamenu_section"],
[data-builder-class="header_megamenu_media_panel"],
[data-builder-class="header_megamenu_links_col"] {
    min-width: 0;
}

/* Variant-unique panel rules live in each megamenu variant's own scoped <style>. */



/* inlined: ./header_submenu.css */
/* Shared nav submenu mechanics (every header_submenu variant) — imported via header_nav_shell.css.

   The server renders each nav parent from the header's submenu variant:
     [data-builder-class="header_submenu"]      wrapper, direct child of nav-main
       > a                                      the parent nav link
       > [data-nav-submenu-slot="toggle"]       accordion toggle (drawer only)
       > [data-nav-submenu-for]                 panel of the parent's child links
   A megamenu parent has no panel of its own: its persisted megamenu root is the
   wrapper's following sibling and carries [data-nav-submenu-for].
   Open state is [data-submenu-open="true"] on the panel, set by the nav runtime.
   Variant <style> owns only the look (surface, spacing, link chrome). */

[data-builder-class="header_submenu"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[data-builder-class="header_submenu"] > [data-nav-submenu-slot="toggle"] {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

[data-builder-class="header_submenu"] > [data-nav-submenu-slot="toggle"] > svg {
    transition: transform 0.2s ease;
}

[data-builder-class="header_submenu"] > [data-nav-submenu-slot="panel"] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-top: 0.35rem;
}

[data-builder-class="header_submenu"] > [data-nav-submenu-slot="panel"],
[data-builder-class="header_submenu"] ~ [data-nav-submenu-for] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

[data-builder-class="header_submenu"] ~ [data-nav-submenu-for] {
    position: absolute;
    top: 100%;
    left: 0;
}

/* Hover bridge across the gap between the parent link and its panel. */
[data-builder-class="header_submenu"] > [data-nav-submenu-slot="panel"]::before,
[data-builder-class="header_submenu"] ~ [data-nav-submenu-for]::before {
    content: "";
    position: absolute;
    top: -0.35rem;
    left: 0;
    right: 0;
    height: 0.35rem;
}

[data-builder-class="header_submenu"] > [data-nav-submenu-slot="panel"][data-submenu-open="true"],
[data-builder-class="header_submenu"] ~ [data-nav-submenu-for][data-submenu-open="true"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

[data-builder-class="header_submenu"] [data-nav-submenu-slot="item"] > a {
    display: block;
    color: inherit;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Drawer (phone width, or a shell promoted to always-toggle): the same markup
   becomes an accordion — the toggle shows, panels flow under their parent.
   The wrapper's second marker outranks each variant's own panel look, and
   phone width alone decides it (every shell is a drawer there). */
@media (max-width: 768px) {
    [data-builder-class="header_submenu"][data-nav-wrapper] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    [data-builder-class="header_submenu"][data-nav-wrapper] > [data-nav-submenu-slot="toggle"] {
        display: inline-flex;
    }

    /* The wrapper is the drawer row: one divider under the link and its toggle
       (the link's own divider would stop short of the toggle). */
    [data-role="nav-shell"] nav[data-role="nav-main"] > [data-builder-class="header_submenu"][data-nav-wrapper] {
        border-bottom: 1px solid var(--mobile-nav-link-border);
    }

    [data-role="nav-shell"] nav[data-role="nav-main"] > [data-builder-class="header_submenu"][data-nav-wrapper] > a {
        border-bottom: 0;
    }

    [data-builder-class="header_submenu"][data-nav-wrapper] > [data-nav-submenu-slot="panel"] {
        position: static;
        grid-column: 1 / -1;
        display: none;
        max-width: none;
        margin: 0;
        padding: 0 0 0 calc(1rem * var(--submenu-density, 1));
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    [data-builder-class="header_submenu"][data-nav-wrapper] > [data-nav-submenu-slot="panel"][data-submenu-open="true"] {
        display: flex;
    }

    [data-builder-class="header_submenu"][data-nav-wrapper] ~ [data-nav-submenu-for] {
        max-height: 0;
        overflow: hidden;
    }

    [data-builder-class="header_submenu"][data-nav-wrapper] ~ [data-nav-submenu-for][data-submenu-open="true"] {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    /* A megamenu shell is sized for the desktop viewport (e.g. min(95vw, …));
       in the drawer it fills the panel, so its auto-fit grids fall to one column. */
    [data-builder-class="header_submenu"][data-nav-wrapper] ~ [data-nav-submenu-for] [data-builder-class="header_megamenu_shell"] {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] > [data-nav-submenu-slot="toggle"] {
    display: inline-flex;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] nav[data-role="nav-main"] > [data-builder-class="header_submenu"][data-nav-wrapper] {
    border-bottom: 1px solid var(--mobile-nav-link-border);
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] nav[data-role="nav-main"] > [data-builder-class="header_submenu"][data-nav-wrapper] > a {
    border-bottom: 0;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] > [data-nav-submenu-slot="panel"] {
    position: static;
    grid-column: 1 / -1;
    display: none;
    max-width: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] > [data-nav-submenu-slot="panel"][data-submenu-open="true"] {
    display: flex;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] ~ [data-nav-submenu-for] {
    max-height: 0;
    overflow: hidden;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] ~ [data-nav-submenu-for][data-submenu-open="true"] {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
}

[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-builder-class="header_submenu"] ~ [data-nav-submenu-for] [data-builder-class="header_megamenu_shell"] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}



/* Base Styles for Header Components. The header is its own plane: it pairs
   --text-header with --bg-header and owns the emphasis pair its actors use;
   a theme whose header plane differs from the page names --link-header. */
[data-builder-class="header"] {
    background: var(--bg-header-surface, var(--bg-header));
    color: var(--text-header);
    border-bottom: 1px solid var(--border-color);
    --link: var(--link-header, var(--link-color));
    --link-contrast: var(--bg-header);
}
[data-builder-class="header"] > * {
    position: relative;
    z-index: 1;
}
[data-role="nav-shell"] {
    position: relative;
    z-index: var(--header-shell-z-index, 1000);
    --mobile-nav-overlay-z-index: 9990;
    --mobile-nav-panel-z-index: 10000;
    --mobile-nav-toggle-z-index: 10001;
    --mobile-nav-open-layer-z-index: 10002;
    --mobile-nav-drawer-active-z-index: 10003;
    --mobile-nav-close-z-index: 10004;
    --mobile-nav-panel-top-closed: 0;
    --mobile-nav-panel-top-open: 0;
    --mobile-nav-panel-right-closed: -100%;
    --mobile-nav-panel-right-open: 0;
    --mobile-nav-panel-left-closed: auto;
    --mobile-nav-panel-left-open: auto;
    --mobile-nav-panel-width: 80%;
    --mobile-nav-panel-max-width: 320px;
    --mobile-nav-panel-height: 100dvh;
    --mobile-nav-panel-max-height: none;
    --mobile-nav-panel-bg: var(--bg-header-surface, var(--bg-header, var(--bg-color)));
    --mobile-nav-panel-text: var(--text-color);
    --mobile-nav-panel-padding: 80px 20px 20px;
    --mobile-nav-panel-radius: 0;
    --mobile-nav-panel-shadow: var(--shadow-lg, -5px 0 15px rgba(0,0,0,0.1));
    --mobile-nav-panel-transform-closed: none;
    --mobile-nav-panel-transform-open: none;
    --mobile-nav-panel-opacity-closed: 1;
    --mobile-nav-panel-opacity-open: 1;
    --mobile-nav-panel-transition: right 0.3s ease, left 0.3s ease, top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    --mobile-nav-link-border: var(--border-color);
    --mobile-nav-link-padding: 15px 0;
    --mobile-nav-link-font-size: 1.1rem;
}
[data-layout-section-name="layout_header"]:has([data-role="nav-shell"] nav[data-role="nav-main"].is-open),
[data-layout-section-name="layout_header"]:has([data-role="nav-shell"] [data-nav-mobile-panel="true"].is-open),
[data-role="nav-shell"]:has(nav[data-role="nav-main"].is-open),
[data-role="nav-shell"]:has([data-nav-mobile-panel="true"].is-open) {
    position: relative;
    z-index: var(--mobile-nav-open-layer-z-index, 10002);
}
/* Elevate the direct shell child that hosts the hamburger so the runtime close
   chip (fixed at --mobile-nav-close-z-index) can paint above an open drawer that
   is a sibling stacking context — e.g. centered-cta grid and split-nav panel,
   where [data-builder-class="header"] > * { z-index: 1 } would otherwise trap it. */
[data-role="nav-shell"]:has(nav[data-role="nav-main"].is-open) > *:has([data-action="toggle-nav"]),
[data-role="nav-shell"]:has([data-nav-mobile-panel="true"].is-open) > *:has([data-action="toggle-nav"]) {
    z-index: var(--mobile-nav-close-z-index, 10004);
}
/* Keep header CTAs in the toggle host from floating over the open drawer. */
[data-role="nav-shell"]:has(nav[data-role="nav-main"].is-open) > *:has([data-action="toggle-nav"]) a[data-slot="cta_href"],
[data-role="nav-shell"]:has([data-nav-mobile-panel="true"].is-open) > *:has([data-action="toggle-nav"]) a[data-slot="cta_href"] {
    visibility: hidden;
    pointer-events: none;
}
[data-role="nav-shell"] nav[data-role="nav-main"] {
    display: flex;
    align-items: center;
}
[data-role="nav-shell"] nav[data-role="nav-main"] a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
    position: relative;
}
[data-role="nav-shell"] nav[data-role="nav-main"] > a::after,
[data-role="nav-shell"] nav[data-role="nav-main"] > [data-nav-wrapper] > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: var(--link);
    transition: width 0.3s ease, left 0.3s ease;
}
[data-role="nav-shell"] nav[data-role="nav-main"] > a:hover::after,
[data-role="nav-shell"] nav[data-role="nav-main"] > [data-nav-wrapper]:hover > a::after {
    width: 100%;
    left: 0;
}
[data-role="nav-shell"] nav[data-role="nav-main"] > a.active::after,
[data-role="nav-shell"] nav[data-role="nav-main"] > [data-nav-wrapper] > a.active::after {
    width: 100%;
    left: 0;
    height: 3px;
}
[data-role="nav-shell"] nav[data-role="nav-main"] a.active {
    font-weight: 700;
}
[data-role="nav-shell"] .nav-layout-drawer-anchor {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    display: flex;
    flex-direction: column;
    gap: calc(0.25rem * var(--nav-density, 1));
    padding: 12px;
    margin: 0;
    z-index: var(--header-shell-z-index, 1000);
}
[data-role="nav-shell"] .nav-layout-inline-gap-md {
    display: flex;
    gap: calc(1.2rem * var(--nav-density, 1));
    transition: max-height 0.3s ease;
}
[data-role="nav-shell"] .nav-layout-inline-center {
    display: flex;
    gap: calc(0.75rem * var(--nav-density, 1));
    flex-wrap: wrap;
    justify-content: center;
}
[data-role="nav-shell"] .nav-layout-self-center {
    justify-self: center;
}
[data-role="nav-shell"] .nav-layout-inline-gap-lg-center {
    display: flex;
    gap: calc(1.5rem * var(--nav-density, 1));
    justify-content: center;
    flex: 1;
}
[data-role="nav-shell"] .nav-layout-inline-end-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5rem * var(--nav-density, 1));
    justify-content: flex-end;
}
[data-role="nav-shell"] .nav-layout-inline-split-left {
    display: flex;
    gap: calc(1.5rem * var(--nav-density, 1));
    flex: 1;
    justify-content: flex-end;
}
[data-role="nav-shell"] .nav-layout-inline-split-right {
    display: flex;
    gap: calc(1.5rem * var(--nav-density, 1));
    flex: 1;
    justify-content: flex-start;
}
[data-role="nav-shell"] .nav-toggle-outline {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    color: inherit;
}
[data-role="nav-shell"] .nav-toggle-pill {
    border-radius: 999px;
    padding: 8px 10px;
}
[data-role="nav-shell"] .nav-toggle-plain {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 5px;
}
[data-role="nav-shell"] .nav-toggle-font-md {
    font-size: 1.6rem;
}
[data-role="nav-shell"] .nav-toggle-font-lg {
    font-size: 1.8rem;
}
[data-role="nav-shell"] .nav-toggle-compact {
    font-size: 1.5rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
}
[data-role="nav-shell"] .nav-toggle-auto {
    margin-left: auto;
}
[data-role="nav-shell"] .nav-toggle-gap-left {
    margin-left: 10px;
}
[data-role="nav-shell"] .nav-toggle-absolute-right {
    position: absolute;
    right: 20px;
}
[data-role="nav-shell"].header-shell-row-wrap,
[data-role="nav-shell"] .header-shell-row-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: calc(0.8rem * var(--section-density, 1));
    padding-bottom: calc(0.8rem * var(--section-density, 1));
    flex-wrap: wrap;
    position: relative;
}
[data-role="nav-shell"].header-shell-grid-centered,
[data-role="nav-shell"] .header-shell-grid-centered {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: calc(0.9rem * var(--section-density, 1));
    padding-bottom: calc(0.9rem * var(--section-density, 1));
}
[data-role="nav-shell"].flex-between,
[data-role="nav-shell"] .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
[data-role="nav-shell"].header-shell-py-compact,
[data-role="nav-shell"] .header-shell-py-compact {
    padding-top: calc(0.8rem * var(--section-density, 1));
    padding-bottom: calc(0.8rem * var(--section-density, 1));
}
/* The header layer is as wide as the viewport and never widens the page. A
   closed megamenu panel stays laid out (the nav runtime measures it before
   opening it) and, once nav-main is its positioned box, can run past the
   viewport edge; an open one is clamped inside the viewport by the runtime. */
[data-layout-section-name="layout_header"] {
    overflow-x: clip;
}
[data-layout-section-name="layout_header"][data-header-sticky="true"],
[data-layout-section-name="layout_header"][data-smart-scroll="true"] {
    position: sticky;
    top: 0;
    z-index: 50;
}
[data-layout-section-name="layout_header"][data-smart-scroll="true"] {
    transition: transform 0.3s ease;
}
[data-layout-section-name="layout_header"].is-compact [data-header-shrink-row] {
    padding-top: calc(0.5rem * var(--section-density, 1));
    padding-bottom: calc(0.5rem * var(--section-density, 1));
    transition: padding 0.3s ease;
}
[data-layout-section-name="layout_header"].is-compact [data-header-shrink-collapse] {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    border-width: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}
[data-layout-section-name="layout_header"].is-compact [data-header-shrink-brand],
[data-layout-section-name="layout_header"].is-compact [data-header-shrink-brand] img {
    max-height: 2rem;
    transition: max-height 0.3s ease;
}
[data-role="nav-shell"].header-shell-sticky,
[data-role="nav-shell"] .header-shell-sticky {
    padding: 1rem 0;
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}
[data-role="nav-shell"].header-shell-full-width,
[data-role="nav-shell"] .header-shell-full-width {
    width: 100%;
}
[data-role="nav-shell"].header-shell-split,
[data-role="nav-shell"] .header-shell-split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: calc(15px * var(--section-density, 1)) 20px;
    position: relative;
}
/* Split shell: center the brand between the two nav halves on desktop
   (source order is navs → brand → actions; the mobile drawer pulls the
   navs out of flow, so ordering only applies at desktop widths). */
@media (min-width: 769px) {
    [data-role="nav-shell"].header-shell-split .nav-layout-inline-split-left,
    [data-role="nav-shell"] .header-shell-split .nav-layout-inline-split-left {
        order: 1;
    }
    [data-role="nav-shell"].header-shell-split > [data-slot="business_name"],
    [data-role="nav-shell"] .header-shell-split > [data-slot="business_name"],
    [data-role="nav-shell"].header-shell-split > [data-feature-mount="brand"],
    [data-role="nav-shell"] .header-shell-split > [data-feature-mount="brand"] {
        order: 2;
    }
    [data-role="nav-shell"].header-shell-split .nav-layout-inline-split-right,
    [data-role="nav-shell"] .header-shell-split .nav-layout-inline-split-right {
        order: 3;
    }
    [data-role="nav-shell"].header-shell-split .header-split-actions,
    [data-role="nav-shell"] .header-shell-split .header-split-actions {
        order: 4;
    }
}
[data-role="nav-shell"] .layout-self-start {
    justify-self: start;
}
[data-role="nav-shell"] .layout-self-end {
    justify-self: end;
}
[data-role="nav-shell"] .header-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
[data-role="nav-shell"] .header-inline-actions-sm {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* The actions cluster keeps its natural size; the brand takes the remaining
   width, so a narrow row wraps the brand between words instead of squeezing
   it down to a character per line. */
[data-role="nav-shell"] .header-inline-actions,
[data-role="nav-shell"] .header-inline-actions-sm {
    flex-shrink: 0;
}
[data-role="nav-shell"] .header-extras-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
[data-role="nav-shell"] .header-nav-relative {
    position: relative;
}
[data-role="nav-shell"] .brand-inline-block {
    display: inline-block;
}
[data-role="nav-shell"] .brand-inline-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
[data-role="nav-shell"] .brand-link-strong {
    font-weight: 800;
    text-decoration: none;
    color: inherit;
    letter-spacing: -0.02em;
}
[data-role="nav-shell"] .brand-link-block {
    font-weight: bold;
    font-size: 1.25rem;
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
[data-role="nav-shell"] .brand-link-inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}
[data-role="nav-shell"] .brand-link-inline-strong {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
    font-weight: 800;
    letter-spacing: -0.02em;
}
/* Contract guard: every brand slot must be shrinkable and wrappable so
   long business names can never overflow under adjacent header actions. */
[data-role="nav-shell"] [data-slot="business_name"] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
[data-role="nav-shell"] .brand-link-sticky {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
}
[data-role="nav-shell"] .brand-link-xl {
    font-weight: 800;
    font-size: 1.4rem;
    text-decoration: none;
    color: inherit;
}
[data-role="nav-shell"] .brand-link-uppercase-xl {
    font-weight: 900;
    font-size: 1.6rem;
    text-decoration: none;
    color: inherit;
    letter-spacing: 1px;
    text-transform: uppercase;
}
[data-role="nav-shell"] .brand-logo-circle-sm {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    max-width: 100%;
}
[data-role="nav-shell"] .brand-logo-square-md {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 4px;
}
[data-role="nav-shell"] .brand-logo-square-lg {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 4px;
}
[data-role="nav-shell"] .text-wrap-anywhere {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
[data-role="nav-shell"] .brand-label-title {
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1.1;
    color: inherit;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Brand mount: hosts exactly one brand widget (brand_logo / brand_label /
   brand_logo_and_label). Variant flavour lives on the mount as brand-mount-*
   modifiers wrapped in :where() so they stay at (0,2,0) and the header brand
   presets (emitted later, same specificity) still win. */
[data-role="nav-shell"] [data-feature-mount="brand"] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
[data-role="nav-shell"] :where(.brand-mount-strong) [data-header-shrink-brand],
[data-role="nav-shell"] :where(.brand-mount-strong) .brand-label-title {
    font-weight: 800;
    letter-spacing: -0.02em;
}
[data-role="nav-shell"] :where(.brand-mount-xl) [data-header-shrink-brand],
[data-role="nav-shell"] :where(.brand-mount-xl) .brand-label-title {
    font-weight: 800;
    font-size: 1.4rem;
}
[data-role="nav-shell"] :where(.brand-mount-uppercase-xl) [data-header-shrink-brand],
[data-role="nav-shell"] :where(.brand-mount-uppercase-xl) .brand-label-title {
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
[data-role="nav-shell"] :where(.brand-mount-logo-lg) [data-slot="business_logo"] {
    width: 2.5rem;
    height: 2.5rem;
}
[data-role="nav-shell"] .nav-link-reset {
    text-decoration: none;
    color: inherit;
}
[data-role="nav-shell"] .nav-link-inline-sm {
    padding: 10px calc(12px * var(--nav-density, 1));
    text-decoration: none;
    color: inherit;
}
[data-role="nav-shell"] .nav-link-inline-md {
    text-decoration: none;
    color: inherit;
    padding: 8px calc(10px * var(--nav-density, 1));
}
[data-role="nav-shell"] .nav-link-medium {
    padding: 10px calc(10px * var(--nav-density, 1));
    text-decoration: none;
    font-weight: 600;
}
[data-role="nav-shell"] .nav-link-active {
    text-decoration: none;
    color: var(--link);
}
[data-role="nav-shell"] .header-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--link) 10%, transparent);
    text-decoration: none;
    color: inherit;
    font-weight: 700;
}
[data-role="nav-shell"] .header-cta-primary {
    padding: 10px 20px;
    border-radius: 6px;
    background: var(--link);
    color: var(--link-contrast);
    text-decoration: none;
    font-weight: 700;
    /* Keep the tap target at the 44px touch-size minimum. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
}
/* Click-to-call widget: phone icon + label; on phones only the icon shows
   (the anchor's aria-label keeps the accessible name). */
[data-role="nav-shell"] .header-click-to-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: 44px;
    box-sizing: border-box;
    white-space: nowrap;
}
/* Spacing between cloned call buttons inside the widget. */
[data-role="nav-shell"] [data-widget-key="click_to_call"] > .header-click-to-call {
    margin-right: 6px;
}
[data-role="nav-shell"] .header-click-to-call-icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}
@media (max-width: 480px) {
    [data-role="nav-shell"] .header-click-to-call {
        width: 44px;
        padding-inline: 0;
    }
    [data-role="nav-shell"] .header-click-to-call-label {
        display: none;
    }
}
[data-role="nav-shell"] .light-dark-icon-md {
    font-size: 1.25rem;
}
[data-role="nav-shell"] .light-dark-toggle,
[data-role="nav-shell"] .light-dark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Surface follows header/utility text color so icons stay visible on
       both light headers and dark-solid / contrast-strip surfaces. */
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    color: inherit;
    min-width: 44px;
    min-height: 44px;
}
[data-role="nav-shell"] .light-dark-toggle-icon {
    display: block;
}
[data-role="nav-shell"] .header-utility-bar {
    /* Derived sub-plane: shows the header plane through and inherits its text. */
    background: transparent;
    font-size: 0.85rem;
    color: inherit;
}
[data-role="nav-shell"] .header-utility-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}
[data-role="nav-shell"] .header-utility-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
[data-role="nav-shell"] .header-utility-links .header-social-link {
    margin: 0;
    padding-inline: 0.15rem;
}
[data-role="nav-shell"] .header-utility-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
[data-role="nav-shell"] .header-utility-actions,
[data-role="nav-shell"] [data-feature-mount="utility_actions"],
[data-role="nav-shell"] [data-feature-mount="extras"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
[data-role="nav-shell"] [data-feature-mount]:empty {
    display: none;
}
[data-role="nav-shell"] .header-split-actions {
    margin-left: auto;
    flex-shrink: 0;
}
/* Mount-scoped feature widgets — shared across layouts that host extras/utility_actions */
[data-role="nav-shell"] .header-language-select {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: inherit;
    font-size: 0.82rem;
    padding: 4px 8px;
    max-width: 9rem;
}
[data-role="nav-shell"] .header-utility-search-form {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
[data-role="nav-shell"] .header-utility-search-input {
    width: min(10rem, 100%);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-color);
    color: inherit;
    font-size: 0.82rem;
    padding: 4px 10px;
    outline: none;
}
[data-role="nav-shell"] .header-utility-search-input:focus {
    border-color: var(--link);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 18%, transparent);
}
[data-role="nav-shell"] .header-utility-search-btn {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color, #111827) 6%, transparent);
    color: inherit;
    font-size: 0.78rem;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}
/* Utility-bar chrome inherits the bar's color token (works for default and contrast strips). */
[data-role="nav-shell"] .header-utility-bar .header-language-select,
[data-role="nav-shell"] .header-utility-bar .header-utility-search-input,
[data-role="nav-shell"] .header-utility-bar .header-utility-search-btn {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    color: inherit;
}
[data-role="nav-shell"] .header-utility-bar .header-utility-search-input::placeholder {
    color: color-mix(in srgb, currentColor 72%, transparent);
}
[data-role="nav-shell"] [data-feature-mount="extras"] .light-dark-toggle,
[data-role="nav-shell"] [data-feature-mount="extras"] .light-dark-btn,
[data-role="nav-shell"] [data-feature-mount="utility_actions"] .light-dark-toggle,
[data-role="nav-shell"] [data-feature-mount="utility_actions"] .light-dark-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 4px;
    border-radius: 999px;
}
@media (max-width: 768px) {
    [data-role="nav-shell"] .header-utility-search-input {
        width: min(8rem, 100%);
    }
}
[data-role="nav-shell"] .utility-link-reset {
    color: inherit;
    text-decoration: none;
}
/* Utility contact items: an inline SVG icon (markup, currentColor) beside the
   hydrated slot text. */
[data-role="nav-shell"] .header-utility-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
[data-role="nav-shell"] .header-utility-icon {
    width: 1em;
    height: 1em;
    flex: none;
}
[data-role="nav-shell"] .header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(15px * var(--section-density, 1)) 20px;
    gap: 1rem;
}
[data-role="nav-shell"][data-nav-toggle-mode="always"] [data-action="toggle-nav"] {
    display: block;
    position: relative;
    z-index: var(--mobile-nav-toggle-z-index);
}
[data-role="nav-shell"][data-nav-toggle-mode="always"] nav[data-role="nav-main"] {
    position: fixed;
    top: var(--mobile-nav-panel-top-closed);
    right: var(--mobile-nav-panel-right-closed);
    left: var(--mobile-nav-panel-left-closed);
    width: var(--mobile-nav-panel-width);
    max-width: var(--mobile-nav-panel-max-width);
    height: var(--mobile-nav-panel-height);
    max-height: var(--mobile-nav-panel-max-height);
    background-color: var(--mobile-nav-panel-bg);
    color: var(--mobile-nav-panel-text);
    --link: var(--mobile-nav-panel-text);
    --link-contrast: var(--mobile-nav-panel-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--mobile-nav-panel-padding);
    border-radius: var(--mobile-nav-panel-radius);
    box-shadow: var(--mobile-nav-panel-shadow);
    transform: var(--mobile-nav-panel-transform-closed);
    opacity: var(--mobile-nav-panel-opacity-closed);
    transition: var(--mobile-nav-panel-transition);
    z-index: var(--mobile-nav-panel-z-index);
    overflow-y: auto;
    display: flex;
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
}
[data-role="nav-shell"][data-nav-toggle-mode="always"] nav[data-role="nav-main"].is-open {
    top: var(--mobile-nav-panel-top-open);
    right: var(--mobile-nav-panel-right-open);
    left: var(--mobile-nav-panel-left-open);
    transform: var(--mobile-nav-panel-transform-open);
    opacity: var(--mobile-nav-panel-opacity-open);
}
[data-role="nav-shell"][data-nav-toggle-mode="always"] nav[data-role="nav-main"] a {
    padding: var(--mobile-nav-link-padding);
    width: 100%;
    font-size: var(--mobile-nav-link-font-size);
    border-bottom: 1px solid var(--mobile-nav-link-border);
    text-align: left;
}
[data-role="nav-shell"][data-nav-toggle-mode="always"] nav[data-role="nav-main"] > a::after {
    display: none;
}

/* Split-nav panel: children participate in shell layout on desktop */
[data-role="nav-shell"] [data-nav-mobile-panel="true"] {
    display: contents;
}

/* XL brand faces step down on mobile so multi-word names wrap on word
   boundaries next to the in-flow actions cluster instead of mid-word. */
@media (max-width: 768px) {
    /* Extra [data-slot] compound outranks brand-size presets (injected as a
       later inline style node at (0,2,0)) so the mobile cap always holds. */
    [data-role="nav-shell"] .brand-link-xl[data-slot],
    [data-role="nav-shell"] .brand-link-uppercase-xl[data-slot],
    [data-role="nav-shell"] :where(.brand-mount-xl, .brand-mount-uppercase-xl) [data-header-shrink-brand][data-slot],
    [data-role="nav-shell"] :where(.brand-mount-xl, .brand-mount-uppercase-xl) .brand-label-title {
        font-size: 1.15rem;
    }
}

/* Mobile Drawer Styles */
@media (max-width: 768px) {
    [data-role="nav-shell"] [data-action="toggle-nav"] {
        display: block;
        position: relative;
        z-index: var(--mobile-nav-toggle-z-index);
    }
    [data-role="nav-shell"] nav[data-role="nav-main"] {
        position: fixed;
        top: var(--mobile-nav-panel-top-closed);
        right: var(--mobile-nav-panel-right-closed);
        left: var(--mobile-nav-panel-left-closed);
        width: var(--mobile-nav-panel-width);
        max-width: var(--mobile-nav-panel-max-width);
        height: var(--mobile-nav-panel-height);
        max-height: var(--mobile-nav-panel-max-height);
        background-color: var(--mobile-nav-panel-bg);
        color: var(--mobile-nav-panel-text);
        --link: var(--mobile-nav-panel-text);
        --link-contrast: var(--mobile-nav-panel-bg);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: var(--mobile-nav-panel-padding);
        border-radius: var(--mobile-nav-panel-radius);
        box-shadow: var(--mobile-nav-panel-shadow);
        transform: var(--mobile-nav-panel-transform-closed);
        opacity: var(--mobile-nav-panel-opacity-closed);
        transition: var(--mobile-nav-panel-transition);
        z-index: var(--mobile-nav-panel-z-index);
        overflow-y: auto;
        flex-wrap: nowrap;
        display: flex;
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        isolation: isolate;
    }
    [data-role="nav-shell"] nav[data-role="nav-main"].is-open {
        top: var(--mobile-nav-panel-top-open);
        right: var(--mobile-nav-panel-right-open);
        left: var(--mobile-nav-panel-left-open);
        transform: var(--mobile-nav-panel-transform-open);
        opacity: var(--mobile-nav-panel-opacity-open);
    }
    [data-role="nav-shell"] nav[data-role="nav-main"] a {
        padding: var(--mobile-nav-link-padding);
        width: 100%;
        font-size: var(--mobile-nav-link-font-size);
        border-bottom: 1px solid var(--mobile-nav-link-border);
        text-align: left;
    }
    [data-role="nav-shell"] nav[data-role="nav-main"] > a::after {
        display: none;
    }

    /* Split-nav: one drawer panel owns both menus; nested navs stay in-flow */
    [data-role="nav-shell"] [data-nav-mobile-panel="true"] {
        position: fixed;
        top: var(--mobile-nav-panel-top-closed);
        right: var(--mobile-nav-panel-right-closed);
        left: var(--mobile-nav-panel-left-closed);
        width: var(--mobile-nav-panel-width);
        max-width: var(--mobile-nav-panel-max-width);
        height: var(--mobile-nav-panel-height);
        max-height: var(--mobile-nav-panel-max-height);
        background-color: var(--mobile-nav-panel-bg);
        color: var(--mobile-nav-panel-text);
        --link: var(--mobile-nav-panel-text);
        --link-contrast: var(--mobile-nav-panel-bg);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: var(--mobile-nav-panel-padding);
        border-radius: var(--mobile-nav-panel-radius);
        box-shadow: var(--mobile-nav-panel-shadow);
        transform: var(--mobile-nav-panel-transform-closed);
        opacity: var(--mobile-nav-panel-opacity-closed);
        transition: var(--mobile-nav-panel-transition);
        z-index: var(--mobile-nav-panel-z-index);
        overflow-y: auto;
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        isolation: isolate;
    }
    [data-role="nav-shell"] [data-nav-mobile-panel="true"].is-open {
        top: var(--mobile-nav-panel-top-open);
        right: var(--mobile-nav-panel-right-open);
        left: var(--mobile-nav-panel-left-open);
        transform: var(--mobile-nav-panel-transform-open);
        opacity: var(--mobile-nav-panel-opacity-open);
    }
    [data-role="nav-shell"] [data-nav-mobile-panel="true"] nav[data-role="nav-main"] {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: auto;
        background: transparent;
        color: inherit;
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
        box-shadow: none;
        display: flex;
        overflow: visible;
        transform: none;
        opacity: 1;
        transition: none;
        z-index: auto;
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        isolation: auto;
    }
}
@media (min-width: 769px) {
    [data-role="nav-shell"] [data-action="toggle-nav"] {
        display: none;
    }
    [data-role="nav-shell"] [data-nav-mobile-panel="true"] {
        display: contents;
    }
}

/* Header nav-shell accessibility (theme global bundle) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
[data-role="nav-shell"] a:focus-visible,
[data-role="nav-shell"] button:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    [data-role="nav-shell"] nav[data-role="nav-main"] > a::after,
    [data-role="nav-shell"] nav[data-role="nav-main"] > [data-nav-wrapper] > a::after,
    [data-role="nav-shell"] nav[data-role="nav-main"] a,
    [data-role="nav-shell"] [data-action="toggle-nav"],
    [data-layout-section-name="layout_header"] {
        transition: none !important;
    }
}

/* Rules shared by the announcement header variants. Variant-unique header
   rules live in each variant's own scoped <style>. */
/* :where() keeps the default paint at (0,1,0) so announcement-surface presets
   ([data-role='announcement-bar'], same specificity, later sheet) own the plane. */
:where([data-component-name="header-layout-announcement-strip"], [data-component-name="header-layout-announcement-utility"]) .header-announcement-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 48px 8px 16px;
    background: color-mix(in srgb, var(--link) 8%, var(--bg-header, transparent));
    font-size: 0.875rem;
    position: relative;
    text-align: center;
}

[data-component-name="header-layout-announcement-strip"] .header-announcement-copy,
[data-component-name="header-layout-announcement-utility"] .header-announcement-copy {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25em 0.75ch;
}

[data-component-name="header-layout-announcement-strip"] .announcement-link,
[data-component-name="header-layout-announcement-utility"] .announcement-link {
    color: var(--link);
    font-weight: 600;
    text-decoration: underline;
}

[data-component-name="header-layout-announcement-strip"] .announcement-dismiss,
[data-component-name="header-layout-announcement-utility"] .announcement-dismiss {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.9rem;
    color: inherit;
    line-height: 1;
    padding: 4px 6px;
}

[data-component-name="header-layout-announcement-strip"] .announcement-dismiss:hover,
[data-component-name="header-layout-announcement-utility"] .announcement-dismiss:hover {
    opacity: 1;
}

[data-component-name="header-layout-announcement-strip"] [data-role="announcement-bar"][hidden],
[data-component-name="header-layout-announcement-utility"] [data-role="announcement-bar"][hidden] {
    display: none;
}

/* Utility-bar rules shared by the utility header variants. */
[data-component-name="header-layout-utility-full"] .header-utility-links,
[data-component-name="header-layout-utility-social"] .header-utility-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

[data-component-name="header-layout-utility-full"] .header-utility-links .header-social-link,
[data-component-name="header-layout-utility-social"] .header-utility-links .header-social-link {
  margin: 0;
  padding-inline: 0.15rem;
}

[data-component-name="header-layout-utility-full"] .header-social-link,
[data-component-name="header-layout-utility-social"] .header-social-link {
  font-weight: 600;
  font-size: 0.82rem;
}

/* Touch screens: header controls are thumb-sized (44px). Pointer devices keep
   the compact utility chrome above. */
@media (pointer: coarse) {
    [data-role="nav-shell"] [data-action="toggle-nav"],
    [data-role="nav-shell"] [data-feature-mount] .light-dark-toggle,
    [data-role="nav-shell"] [data-feature-mount] .light-dark-btn,
    [data-role="nav-shell"] .light-dark-toggle,
    [data-role="nav-shell"] .light-dark-btn,
    [data-role="nav-shell"] [data-action="dismiss-announcement"],
    [data-role="nav-shell"] [data-slot="search_button"] {
        min-width: 44px;
        min-height: 44px;
    }
    [data-role="nav-shell"] [data-slot="search_input"],
    [data-role="nav-shell"] [data-action="change-language"] {
        min-height: 44px;
    }
    /* The brand link (logo or name) has a thumb-height hit area without
       growing the header: the area extends past the link's own box. */
    [data-role="nav-shell"] [data-feature-mount="brand"] a {
        position: relative;
    }
    [data-role="nav-shell"] [data-feature-mount="brand"] a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }
    /* Standalone links in the shell, the inline nav included (a tablet shows
       it beside the brand): thumb-height rows, label centred. */
    [data-role="nav-shell"] nav[data-role="nav-main"] > a,
    [data-role="nav-shell"] nav[data-role="nav-main"] > [data-nav-wrapper] > a,
    [data-role="nav-shell"] .header-deck-cell > a,
    [data-role="nav-shell"] .header-utility-links > a,
    [data-role="nav-shell"] .header-announcement-copy > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Drawer mode: the brand is never squeezed out of its row. The nav is out of
   flow (a fixed panel), so the row holds the brand and the actions. The brand
   keeps its own width; when the actions do not fit beside it they wrap onto a
   second line instead of taking the brand's space. */
@media (max-width: 768px) {
    [data-role="nav-shell"]:has(> [data-feature-mount="brand"]),
    [data-role="nav-shell"] :has(> [data-feature-mount="brand"]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 1rem;
    }
    [data-role="nav-shell"] [data-feature-mount="brand"] {
        flex: 0 1 auto;
        /* Its content's width, or the whole row for a name longer than that. */
        min-width: min(100%, max-content);
        overflow-wrap: anywhere;
    }
    /* The toggle, or the row item that holds it, stays at the row's end when
       it wraps onto the second line. */
    [data-role="nav-shell"] :has(> [data-feature-mount="brand"]) > :is([data-action="toggle-nav"], :has([data-action="toggle-nav"])),
    [data-role="nav-shell"]:has(> [data-feature-mount="brand"]) > :is([data-action="toggle-nav"], :has([data-action="toggle-nav"])) {
        margin-left: auto;
    }
    [data-role="nav-shell"] :has(> [data-feature-mount="brand"]) > :is(.header-inline-actions, .header-inline-actions-sm, .header-split-actions),
    [data-role="nav-shell"]:has(> [data-feature-mount="brand"]) > :is(.header-inline-actions, .header-inline-actions-sm, .header-split-actions) {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
        min-width: 0;
        max-width: 100%;
    }
}

/* Drawer mode: utility bars are one compact row. Contact items show their icon
   only — the address or number stays in the link for assistive technology and
   as the link's target — so a sticky header does not hold a third of a phone
   screen. */
@media (max-width: 768px) {
    [data-role="nav-shell"] .header-utility-bar-inner {
        flex-wrap: wrap;
        gap: 0 0.5rem;
        padding: 2px 12px;
    }
    [data-role="nav-shell"] .header-utility-links,
    [data-role="nav-shell"] .header-utility-end {
        gap: 0 0.5rem;
    }
    /* The search field takes the width the links and toggles leave on its
       line, instead of a fixed width that pushes them onto more lines. */
    [data-role="nav-shell"] .header-utility-bar :is(.header-utility-end, .header-utility-actions) {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 0 0.35rem;
        min-width: 0;
    }
    [data-role="nav-shell"] .header-utility-bar .header-utility-search-form {
        /* Under ~10rem there is no room to type: the form takes its own line. */
        flex: 1 1 10rem;
        min-width: 0;
    }
    [data-role="nav-shell"] .header-utility-bar .header-utility-search-input {
        flex: 1 1 0;
        width: 0;
        min-width: 5rem;
    }
    [data-role="nav-shell"] :is(.header-utility-item, .header-deck-icon-link) {
        justify-content: center;
        gap: 0;
        min-width: 44px;
        min-height: 44px;
    }
    [data-role="nav-shell"] :is(.header-utility-item, .header-deck-icon-link) > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    [data-role="nav-shell"] :is(.header-utility-item, .header-deck-icon-link) {
        position: relative;
    }
    [data-role="nav-shell"] :is(.header-utility-item, .header-deck-icon-link) > .header-utility-icon {
        width: 20px;
        height: 20px;
    }
}



/* SHARED COMPONENT RULES: identical rules used by variants of several
   families. Family-local shared rules belong in that family's shell. */
[data-component-name="gallery-layout-case-study-index"] h2,
[data-component-name="pricing-layout-tier-columns"] h2,
[data-component-name="pricing-layout-compact-rows"] h2,
[data-component-name="process-layout-timeline-vertical"] h2,
[data-component-name="process-layout-icon-steps-row"] h2,
[data-component-name="stats-layout-split-copy"] h2,
[data-component-name="stats-layout-trust-chips"] h2,
[data-component-name="team-layout-featured-lead"] h2,
[data-component-name="gallery-layout-case-study-index"] p,
[data-component-name="pricing-layout-tier-columns"] p,
[data-component-name="pricing-layout-compact-rows"] p,
[data-component-name="process-layout-timeline-vertical"] p,
[data-component-name="process-layout-icon-steps-row"] p,
[data-component-name="stats-layout-split-copy"] p,
[data-component-name="stats-layout-trust-chips"] p,
[data-component-name="team-layout-featured-lead"] p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* COMPONENT FAMILY SHELLS (auto-included): rules shared by >=2 variants.
   Variant-unique rules stay in the variant's own scoped <style>. */

/* inlined: ./footer_shell.css */
/* =======================================================
   FOOTER SHELL (bundled via theme_shared_utils.css)
   Family-shared base for every footer variant. Rules unique to one
   variant stay in that variant's own scoped <style> (first child of its
   root). Section toggles are bound by interactive_runtime_core.js
   (bindFooterSections), never by a component <script>.
   ======================================================= */
[data-builder-class="footer"] > * {
  min-width: 0;
}

[data-builder-class="footer"] a,
[data-builder-class="footer"] p,
[data-builder-class="footer"] span,
[data-builder-class="footer"] strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ambient link styling must skip button actors: they own their own colour
   (theme_shared_utils.css) and must not be tinted or nudged here. */
[data-builder-class="footer"] a:not([class*="btn-"]) {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

[data-builder-class="footer"] a:not([class*="btn-"]):hover {
  color: var(--link-color, inherit);
  transform: translateX(2px);
}

[data-builder-class="footer"] [data-action="toggle-footer-section"] {
  cursor: pointer;
}

[data-builder-class="footer"] [data-role="footer-section-indicator"] {
  transition: transform 0.2s;
  margin-left: 0.5rem;
}

@media (min-width: 769px) {
  [data-builder-class="footer"] [data-role="footer-section-indicator"] {
    display: none;
  }
}

/* Touch screens: footer links and section toggles are thumb-sized (44px). */
@media (pointer: coarse) {
    [data-builder-class="footer"] [data-action="toggle-footer-section"],
    [data-builder-class="footer"] [data-action="change-language"] {
        min-height: 44px;
    }
    [data-builder-class="footer"] [data-action="toggle-footer-section"] {
        min-width: 44px;
    }
    [data-builder-class="footer"] li > a,
    [data-builder-class="footer"] nav > a,
    [data-builder-class="footer"] [data-slot="social_links"] > a {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }
}

[data-component-name="footer-layout-app-download-social"],
[data-component-name="footer-layout-brand-social-split"],
[data-component-name="footer-layout-trust-strip"] {
  box-sizing: border-box;
  padding: calc(28px * var(--section-density, 1)) 16px;
  width: 100%;
}

[data-component-name="footer-layout-brand-legal-inline"] [data-slot="social_links"],
[data-component-name="footer-layout-compact-inline"] [data-slot="social_links"],
[data-component-name="footer-layout-minimal-legal-split"] [data-slot="social_links"],
[data-component-name="footer-layout-service-hours-grid"] [data-slot="social_links"],
[data-component-name="footer-layout-simple"] [data-slot="social_links"],
[data-component-name="footer-layout-three-column"] [data-slot="social_links"],
[data-component-name="footer-layout-trust-strip"] [data-slot="social_links"],
[data-component-name="footer-layout-two-column-brand-links"] [data-slot="social_links"],
[data-component-name="footer-layout-utility-bar"] [data-slot="social_links"] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10px * var(--section-density, 1));
}

[data-component-name="footer-layout-dark-brand-columns"],
[data-component-name="footer-layout-tech-link-grid"] {
  box-sizing: border-box;
  padding: calc(40px * var(--section-density, 1)) 16px calc(24px * var(--section-density, 1));
  width: 100%;
}

[data-component-name="footer-layout-ecommerce"] [data-slot="social_links"],
[data-component-name="footer-layout-sitemap-four-column"] [data-slot="social_links"],
[data-component-name="footer-layout-split-cta"] [data-slot="social_links"] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--section-density, 1));
}

[data-component-name="footer-layout-multi-column-nav"] [data-slot="language_select"],
[data-component-name="footer-layout-utility-bar"] [data-slot="language_select"] {
  background: transparent;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  color: inherit;
  padding: 4px 8px;
}

[data-component-name="footer-layout-service-hours-grid"],
[data-component-name="footer-layout-support-columns"] {
  box-sizing: border-box;
  width: 100%;
}



/* inlined: ./hero_shell.css */
/* =======================================================
   HERO SHELL (bundled via theme_shared_utils.css)
   Rules shared by >=2 hero variants. Variant-unique rules stay in the
   variant's own scoped <style>.
   ======================================================= */
@media (max-width: 900px) {
  [data-component-name="hero-layout-split-media-right"] .btn-primary,
  [data-component-name="hero-layout-eyebrow-split"] .btn-primary {
    width: 100%;
    text-align: center;
  }
}

[data-component-name="hero-layout-fullscreen-immersive"],
[data-component-name="hero-layout-fullscreen-video"] {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

[data-component-name="hero-layout-split-video-right"],
[data-component-name="hero-layout-split-video-left"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(2rem * var(--section-density, 1));
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(72px * var(--section-density, 1)) 24px;
}

[data-component-name="hero-layout-split-video-right"] .hsv-copy,
[data-component-name="hero-layout-split-video-left"] .hsv-copy,
[data-component-name="hero-layout-split-video-right"] .hsv-media,
[data-component-name="hero-layout-split-video-left"] .hsv-media {
  flex: 1 1 280px;
  min-width: 0;
}

[data-component-name="hero-layout-split-video-right"] .hsv-eyebrow,
[data-component-name="hero-layout-split-video-left"] .hsv-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-text, #6b7280);
  margin: 0 0 14px;
}

[data-component-name="hero-layout-split-video-right"] .hsv-headline,
[data-component-name="hero-layout-split-video-left"] .hsv-headline {
  font-size: clamp(1.875rem, 5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

[data-component-name="hero-layout-split-video-right"] .hsv-body,
[data-component-name="hero-layout-split-video-left"] .hsv-body {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--muted-text, #6b7280);
  margin: 0 0 28px;
  max-width: 36rem;
}

[data-component-name="hero-layout-split-video-right"] .hsv-cta-row,
[data-component-name="hero-layout-split-video-left"] .hsv-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--section-density, 1));
  align-items: center;
}

[data-component-name="hero-layout-split-video-right"] .hsv-btn-primary,
[data-component-name="hero-layout-split-video-left"] .hsv-btn-primary {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--text-color);
  color: var(--bg-color);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid var(--text-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

[data-component-name="hero-layout-split-video-right"] .hsv-btn-primary:hover,
[data-component-name="hero-layout-split-video-left"] .hsv-btn-primary:hover {
  background-color: transparent;
  color: var(--text-color);
}

[data-component-name="hero-layout-split-video-right"] .hsv-btn-ghost,
[data-component-name="hero-layout-split-video-left"] .hsv-btn-ghost {
  display: inline-block;
  padding: 12px 28px;
  background: transparent;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 4px;
}

[data-component-name="hero-layout-split-video-right"] .hsv-frame,
[data-component-name="hero-layout-split-video-left"] .hsv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--text-color);
}

[data-component-name="hero-layout-split-video-right"] .hsv-frame iframe,
[data-component-name="hero-layout-split-video-left"] .hsv-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  [data-component-name="hero-layout-split-video-right"] .hsv-btn-ghost,
  [data-component-name="hero-layout-split-video-left"] .hsv-btn-ghost,
  [data-component-name="hero-layout-split-video-right"] .hsv-btn-primary,
  [data-component-name="hero-layout-split-video-left"] .hsv-btn-primary {
    width: 100%;
    text-align: center;
  }
}

[data-component-name="hero-layout-contained-video"],
[data-component-name="hero-layout-stacked-video"] {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(80px * var(--section-density, 1)) 24px;
  text-align: center;
}



/* inlined: ./carousel_shell.css */
/* =======================================================
   CAROUSEL SHELL (bundled via theme_shared_utils.css)
   Rules shared by >=2 carousel-role variants (carousel, testimonials
   quote carousel). Variant-unique rules stay in the variant's own
   scoped <style>. Behaviour is interactive_runtime_core.js.
   ======================================================= */
[data-component-name="carousel-layout-basic"],
[data-component-name="carousel-layout-card"] {
  position: relative;
  overflow: hidden;
}

[data-component-name="carousel-layout-basic"] .carousel-track,
[data-component-name="testimonials-layout-quote-carousel"] .carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

[data-component-name="carousel-layout-basic"] .carousel-slide,
[data-component-name="testimonials-layout-quote-carousel"] .carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

[data-component-name="carousel-layout-basic"] .carousel-dot,
[data-component-name="carousel-layout-card"] .carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted-text);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}

[data-component-name="carousel-layout-basic"] .carousel-dot:hover,
[data-component-name="carousel-layout-card"] .carousel-dot:hover {
  background: var(--text-color);
  transform: scale(1.2);
}

[data-component-name="carousel-layout-basic"] .carousel-dot.is-active,
[data-component-name="carousel-layout-card"] .carousel-dot.is-active {
  background: var(--link);
  transform: scale(1.2);
}

[data-component-name="carousel-layout-basic"] .carousel-arrow,
[data-component-name="carousel-layout-card"] .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 2;
  color: var(--text-color);
  font-size: 1.2rem;
}

[data-component-name="carousel-layout-basic"] .carousel-arrow:hover,
[data-component-name="carousel-layout-card"] .carousel-arrow:hover {
  background: var(--brand);
  color: var(--bg-color);
  box-shadow: var(--shadow-md);
}



/* inlined: ./features_shell.css */
/* Features family shell: rules shared by several features variants. */

/* Card grids ([data-builder-grid]) laid out alike by several variants; column presets rearrange them. */
[data-component-name="features-layout-booking-guide"] [data-builder-grid],
[data-component-name="features-layout-offer-card-grid"] [data-builder-grid],
[data-component-name="features-layout-selection-engine-guide"] [data-builder-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: calc(14px * var(--section-density, 1));
}

[data-component-name="features-layout-our-values"] [data-builder-grid],
[data-component-name="features-layout-why-choose-us"] [data-builder-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: calc(30px * var(--section-density, 1));
}

[data-component-name="features-layout-our-values"] [data-slot="content_1"],
[data-component-name="features-layout-why-choose-us"] [data-slot="content_1"] {
  margin: 0 auto;
  max-width: 1000px;
}



/* inlined: ./contact_shell.css */
/* contact family shell: base rules shared by several contact variants. */

[data-component-name="contact-layout-info-form-split"],
[data-component-name="contact-layout-map-info-split"] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(40px * var(--section-density, 1));
  margin: calc(80px * var(--section-density, 1)) auto;
  max-width: 1200px;
  padding: 0 20px;
}



/* inlined: ./content_shell.css */
/* content family shell: base rules shared by several content variants. */

[data-component-name="paragraph-layout-scroll-target-about"],
[data-component-name="paragraph-layout-scroll-target-features"],
[data-component-name="paragraph-layout-scroll-target-learn-more"] {
  min-height: 50vh;
  padding: calc(64px * var(--section-density, 1)) 20px;
}



/* =======================================================
   STAGE LAYER PAINTING (data-site-surface)
   See STAGE_LAYER_ACTOR_CONTRACT.md / THEME_TOKEN_CONTRACT.md
   ======================================================= */
section[data-main-section-name][data-site-surface="base"] {
  background: var(--bg-color-surface, var(--bg-color));
}
section[data-main-section-name][data-site-surface="alt"] {
  background: var(--bg-color-surface, var(--card-bg));
}
section[data-main-section-name][data-site-surface="hero"] {
  background: var(--hero-bg-surface, var(--hero-bg));
  /* Muted text on the hero plane mutes toward the hero surface (rule 7 corollary). */
  --content-muted: color-mix(in srgb, var(--text-color) 80%, var(--hero-bg));
}
section[data-main-section-name][data-site-surface="accent"] {
  background: var(--accent-bg-surface, var(--accent));
  color: var(--btn-primary-text, var(--brand-contrast));
  --link: var(--btn-primary-text, var(--brand-contrast));
  --link-contrast: var(--accent-bg-surface, var(--accent));
}

/* Card grids ([data-builder-grid]) laid out alike by several variants; column presets rearrange them. */
[data-component-name="features-layout-schedule-weekly"] [data-builder-grid],
[data-component-name="testimonials-layout-card-grid"] [data-builder-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: calc(16px * var(--section-density, 1));
}

[data-component-name="about-layout-centered-copy"] [data-builder-grid],
[data-component-name="about-layout-three-feature-cards"] [data-builder-grid],
[data-component-name="services-layout-compact-cards"] [data-builder-grid] {
  gap: calc(14px * var(--section-density, 1));
}

[data-component-name="features-layout-card-grid"] [data-builder-grid],
[data-component-name="gallery-layout-image-grid"] [data-builder-grid],
[data-component-name="services-layout-image-cards"] [data-builder-grid],
[data-component-name="services-layout-text-cards"] [data-builder-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: calc(16px * var(--section-density, 1));
}

[data-component-name="services-layout-card-grid"] [data-builder-grid],
[data-component-name="services-layout-hero-centered"] [data-builder-grid] {
  gap: calc(16px * var(--section-density, 1));
}

[data-component-name="features-layout-how-it-works"] [data-builder-grid],
[data-component-name="services-layout-guided-steps"] [data-builder-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: calc(20px * var(--section-density, 1));
}

[data-component-name="contact-layout-hero-centered"],
[data-component-name="features-layout-our-values"],
[data-component-name="features-layout-why-choose-us"] {
  padding: calc(80px * var(--section-density, 1)) 20px;
  text-align: center;
}

[data-component-name="contact-layout-lead-form-grid"],
[data-component-name="features-layout-booking-guide"],
[data-component-name="features-layout-card-grid"],
[data-component-name="features-layout-schedule-weekly"] {
  margin: calc(70px * var(--section-density, 1)) auto;
  max-width: 1100px;
  padding: 0 20px;
}

[data-component-name="about-layout-split-image-right"] [data-slot="image_1"],
[data-component-name="gallery-layout-masonry-modern"] [data-slot="image_1"],
[data-component-name="hero-layout-split-media-right"] [data-slot="image_1"],
[data-component-name="paragraph-layout-split-image-left"] [data-slot="image_1"] {
  height: auto;
  max-width: 100%;
}

[data-component-name="about-layout-centered-feature-image"] [data-slot="image_2"],
[data-component-name="gallery-layout-masonry-modern"] [data-slot="image_2"],
[data-component-name="paragraph-layout-float-image-left"] [data-slot="image_2"] {
  height: auto;
  max-width: 100%;
}

[data-component-name="about-layout-split-image-left"] [data-slot="image_3"],
[data-component-name="gallery-layout-masonry-modern"] [data-slot="image_3"],
[data-component-name="paragraph-layout-float-image-right"] [data-slot="image_3"] {
  height: auto;
  max-width: 100%;
}

[data-component-name="about-layout-preview-split-cta"] [data-slot="image_4"],
[data-component-name="gallery-layout-masonry-modern"] [data-slot="image_4"],
[data-component-name="paragraph-layout-split-image-right"] [data-slot="image_4"] {
  height: auto;
  max-width: 100%;
}

[data-component-name="about-layout-profile-hero-split"] [data-slot="headline"],
[data-component-name="contact-layout-panel-form-split"] [data-slot="headline"] {
  font-size: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
  text-wrap: balance;
  word-break: break-word;
}

[data-component-name="faq-layout-card-answers"],
[data-component-name="gallery-layout-before-after"],
[data-component-name="gallery-layout-image-grid"],
[data-component-name="services-layout-image-cards"],
[data-component-name="services-layout-text-cards"],
[data-component-name="team-layout-card-grid"],
[data-component-name="team-layout-featured-lead"] {
  margin: calc(70px * var(--section-density, 1)) auto;
  max-width: 1100px;
  padding: 0 20px;
}

[data-component-name="features-layout-catalog-highlights-grid"],
[data-component-name="product-layout-showcase-grid"],
[data-component-name="services-layout-guided-steps"] {
  margin: 0 auto;
  max-width: 1200px;
}

[data-component-name="features-layout-catalog-filter-shelf"],
[data-component-name="product-layout-comparison-cards"],
[data-component-name="selection-layout-result-panels"] {
  margin: 0 auto;
  max-width: 1200px;
  padding-top: calc(32px * var(--section-density, 1));
}

[data-component-name="product-layout-comparison-cards"] [data-slot="content_2"],
[data-component-name="selection-layout-result-panels"] [data-slot="content_2"] {
  display: grid;
  gap: calc(18px * var(--section-density, 1));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}