/* ============================================================
   BlueTech Design System / Utilities
   Single stylesheet version
   ============================================================ */

/* Fonts are loaded via <link> in the layout <head> (faster than @import). */

:root {
  /* ── BlueTech brand palette ──
     Taken from the logo: the mark is navy #0B3259 with a cyan highlight.
     Every colour in the site resolves through these tokens, so the whole
     scheme is re-skinned from this block alone.

     How they are used, so pages do not drift apart:
       navy  = structure — headings, labels, body copy, primary button
               fills, the footer.
       cyan  = the highlight — accent borders, icons, hover fills, small
               chips, and the link line on a card (Learn More / Read
               Article / Download PDF), which hovers to navy.
       black = controls — slider arrows, numbered dots, pagination, filter
               chips. Outlined at rest, solid fill when it is the one you
               are on, white icon or number inside. Keeping them off navy
               is what stops the page reading as blue on blue on blue.
       sky   = decoration only — section glows and the reversed-out half of
               a heading sitting on the blue gradient. */
  --color-primary: #0B3259;        /* brand navy — headings, CTAs, footer   */
  --color-primary-deep: #124579;   /* outlined-button border / hover navy   */
  --color-primary-soft: #E7EEF5;   /* pale navy wash                        */
  --color-primary-rgb: 11 50 89;
  --color-link-hover: var(--color-primary);
  --color-accent: #31C0F9;         /* bright cyan — links, rules, accents   */
  --color-accent-hover: #68B9D8;   /* soft sky — hover / heading highlight  */
  --color-accent-soft: #E8F6FD;    /* pale cyan wash                        */
  --color-accent-rgb: 49 192 249;
  --color-sky: #68B9D8;            /* heading highlight ("Actually Trust")  */
  --color-sky-rgb: 104 185 216;
  --color-card-hover: #EFEFEF;     /* card hover wash                       */
  --color-dark: #000000;
  --color-dark-soft: #111111;
  --color-white: #FFFFFF;
  --color-dark-rgb: 0 0 0;
  --color-dark-soft-rgb: 17 17 17;
  --color-white-rgb: 255 255 255;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #C9C9C9;
  --color-gray-400: #8D8D8D;
  --color-gray-500: #6B6B6B;
  --color-gray-600: #444444;
  --color-border: #C9C9C9;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 23px;
  --text-3xl: 25px;
  --text-4xl: 32px;
  --text-5xl: 40px;
  --text-6xl: 50px;

  --h1-size: 50px;
  --h2-size: 50px;
  --h3-size: 25px;
  --h4-size: 20px;
  --h5-size: 16px;
  --h6-size: 18px;

  /* Glyph sizes. An icon is a symbol, not running text, so it gets its own
     scale instead of borrowing a --text- step. */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 36px;

  /* Oversized marks: the quote glyph, the review numeral, step numbers. */
  --display-sm: 56px;
  --display-md: 72px;
  --display-lg: 110px;

  /* Fluid sizes: these scale with the viewport, so the curve lives here
     once instead of being written out at each component. */
  --fluid-hero: clamp(32px, 4.4vw, 60px);
  --fluid-hero-sub: clamp(28px, 4vw, 54px);
  --fluid-h2: clamp(38px, 4.1vw, 56px);
  --fluid-card-h2: clamp(23px, 2.5vw, 32px);
  --fluid-stat: clamp(34px, 4vw, 52px);
  --fluid-stat-sm: clamp(30px, 3.2vw, 42px);
  /* Process-card numerals — Figma's "02" is ~190px of Roboto Condensed. */
  --fluid-step-number: clamp(110px, 13vw, 190px);

  /* Coverage map labels sit inside the state shapes, so they are sized to
     fit the artwork rather than following the icon scale. */
  --map-label: 12px;
  --map-label-sm: 9px;
  --map-label-xs: 7px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 120%;
  --lh-snug: 130%;
  --lh-normal: 150%;
  --lh-relaxed: 180%;

  --ls-tight: -0.5px;
  --ls-normal: 0px;

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* The logo is the tallest thing in the bar, so the header's height is just
     the logo plus its vertical padding. --header-height is derived from those
     two so the hero's negative margin always matches the real header height —
     override --header-logo-size per breakpoint and everything stays in sync. */
  --header-logo-size: 78px;
  --header-pad-y: 14px;
  --header-height: calc(var(--header-logo-size) + (var(--header-pad-y) * 2));

  --container-max: 1440px;
  --container-padding: 90px;
  --container-padding-mobile: 20px;
  /* Applied as padding-top AND padding-bottom on every .section-py. */
  --section-space: 75px;
  --section-frame-radius: 20px;

  --radius-md: 8px;
  --radius-lg: 15px;
  --radius-xl: 17px;
  --radius-2xl: 25px;
  --radius-pill: 9999px;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .14);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, .16);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* clip (not hidden) so position:sticky keeps working */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  /* clip, never hidden: hidden makes the body a scroll container and breaks
     position:sticky for descendants (the reading bar, the article TOC). */
  overflow-x: clip;
}
.rich-text a, p a{
    text-decoration: underline;
    color: var(--color-primary);
}

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

/* Smooth fade-in for lazy images that load on scroll (no abrupt "pop").
   The .img-fade class is added by JS only to images that aren't loaded yet,
   so already-loaded / above-the-fold images never flicker, and images are
   never left hidden if JS doesn't run. */
.img-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.img-fade.is-loaded {
  opacity: 1;
}

/* Editor / rich-text content — preserve paragraph spacing from the editor while
   inheriting the surrounding container's typography (use on any element that
   outputs admin editor HTML, e.g. <div class="... rich-text">{!! ... !!}</div>). */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }

.rich-text p {
  font: inherit;
  color: inherit;
  margin: 0 0 1em;
}

.rich-text p:last-child {
  margin-bottom: 0;
}

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

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--lh-snug);
}

h4 {
  font-size: var(--h4-size);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h5 {
  font-size: var(--h5-size);
  line-height: var(--lh-normal);
}

h6 {
  font-size: var(--h6-size);
  line-height: var(--lh-normal);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-600);
}

.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;
}

.text-center {
  text-align: center;
}

.primary {
  color: var(--color-primary);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section-frame1 {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--section-frame-radius);
  padding: 70px 45px;
}

.section-frame2 {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--section-frame-radius);
  padding: 30px 45px;
}

/* Every section carries its own equal top/bottom padding, so the rhythm is the
   same everywhere and nothing needs a margin on top of it. */
.section-py {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Outlined pill, as in the design. */
.section-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-primary);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-10);
}

.section-header__intro {
  margin-bottom: 0;
}

.section-header__title {
  max-width: 800px;
}

.section-header__cta {
  align-self: center;
  justify-self: start;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.grid {
  display: grid;
}

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

.w-full {
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  padding: 15px var(--space-8);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary-rgb) / 35%);
  outline-offset: 3px;
}

.btn-accent {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  color: var(--color-white);
}

.btn-arrow::after {
  content: '\f061';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  font-family: 'Font Awesome 6 Free';
  font-size: var(--icon-sm);
  font-weight: 900;
  line-height: 1;
  transform: translateX(-4px);
  transition:
    width var(--transition-base),
    opacity var(--transition-base),
    margin-left var(--transition-base),
    transform var(--transition-base);
}

.btn-arrow:hover::after,
.btn-arrow:focus-visible::after {
  width: 16px;
  opacity: 1;
  margin-left: var(--space-2);
  transform: translateX(0);
}

/* Arrow shown at rest rather than only on hover; it nudges on hover instead. */
.btn-arrow--static::after {
  width: 16px;
  opacity: 1;
  margin-left: var(--space-2);
  transform: translateX(0);
}

.btn-arrow--static:hover::after,
.btn-arrow--static:focus-visible::after {
  transform: translateX(3px);
}

.btn-sm {
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-5);
}

/* Outlined cyan pill. Reads on both the navy panels (CTA band, dark cards)
   and on plain light sections, so it is the default "secondary" button. */
/* Secondary button on light surfaces: cyan border marks it, navy carries the
   label. .btn-light is the same button under its older name. */
.btn-outline,
.btn-light {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible,
.btn-light:hover,
.btn-light:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* Same button on navy panels, where navy text would disappear. */
.btn-outline-light {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

@media (max-width: 1240px) {
  :root {
    --h1-size: 28px;
    --h2-size: 28px;
  }
}

/* Tablet and below share the tighter section rhythm. */
@media (max-width: 992px) {
  :root {
    --section-space: 50px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }

  :root {
    --section-space: 50px;
    --h1-size: 23px;
    --h2-size: 23px;
    --h3-size: 17px;
    --h4-size: 16px;
    --h5-size: 16px;
  }

  .section-badge {
    font-size: var(--text-base);
  }

  h6 {
    font-size: var(--text-base);
  }

  .btn {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6);
  }

  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 40px;
  }
}

/* ============================================================
   BlueTech Header / Footer / Hero Preview
   ============================================================ */

.site-header {
  position: relative;
  z-index: 30;
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
  /* ── Opened-menu position (desktop) ──
     Both the simple dropdown and the mega menu open from the header's bottom
     line. To move BOTH up/down together, change --header-flyout-gap (gap below
     the header line). --header-dropdown-lift is the fixed distance from a nav
     item's bottom down to that line — only fine-tune it if the dropdown sits a
     little higher/lower than the mega. */
  --header-flyout-gap: 14px;
  --header-dropdown-lift: 26px;
}

.site-header__shell {
  position: relative;
}

/* The bar is transparent by design — it reads over the hero card behind it,
   so the logo sits left and the nav runs to the right edge. */
.site-header__bar {
  min-height: var(--header-logo-size);
  justify-content: space-between;
}

.site-header__brand img {
  width: var(--header-logo-size);
  height: auto;
}

.site-header__nav {
  margin-left: auto;
}

.site-header__nav-list {
  gap: var(--space-5);
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}

.site-header__nav-link:hover,
.site-header__nav-link[aria-expanded='true'] {
  color: var(--color-primary);
}

.site-header__nav-link.active {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.site-header__chevron {
  font-size: var(--icon-xs);
  line-height: 1;
  transition: transform var(--transition-base);
}

.site-header__nav-link[aria-expanded='true'] .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__actions {
  margin-left: var(--space-5);
}

.site-header__mobile-toggle,
.mobile-menu__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.site-header__mobile-toggle img {
  width: 28px;
  height: auto;
}

.mobile-menu__icon-button i {
  font-size: var(--icon-xl);
  line-height: 1;
  color: var(--color-primary);
}

/* ── Mega menu ── */
.site-header__mega {
  position: absolute;
  top: calc(100% + var(--header-flyout-gap));
  left: 0;
  width: 100%;
  overflow: hidden;
  padding: var(--space-9);
  background: var(--color-white);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-2xl);
  box-shadow: 0 28px 70px rgb(var(--color-primary-rgb) / 16%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

/* Cyan hairline across the top edge — the panel's one piece of brand colour. */
.site-header__mega::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
}

.site-header__mega.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Links on the left, a standing promo panel on the right. */
.site-header__mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: var(--space-9);
  align-items: start;
}

.site-header__mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-8);
}

/* Hairline between columns instead of a bare gap. */
.site-header__mega-column + .site-header__mega-column {
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-primary-soft);
}

/* Column heading: a small uppercase label over a short cyan bar, so it reads
   as a section label rather than an underlined link. */
.site-header__mega-title {
  position: relative;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.site-header__mega-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.site-header__mega-title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.site-header__mega-title a:hover,
.site-header__mega-title a.active {
  color: var(--color-accent);
}

.site-header__mega-links {
  display: grid;
  gap: 2px;
}

/* Each link is a row with a cyan marker, so a title-less column still has
   structure. The marker grows from a dot into a dash on hover. */
.site-header__mega-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-primary);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.site-header__mega-marker {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: rgb(var(--color-primary-rgb) / 28%);
  border-radius: var(--radius-pill);
  transition:
    width var(--transition-fast),
    background-color var(--transition-fast);
}

.site-header__mega-link:hover,
.site-header__mega-link.active {
  background: var(--color-accent-soft);
}

.site-header__mega-link:hover .site-header__mega-marker,
.site-header__mega-link.active .site-header__mega-marker {
  width: 16px;
  background: var(--color-accent);
}

.site-header__mega-link.active {
  font-weight: var(--fw-semibold);
}

.site-header__mega-link--featured {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ── Promo panel ── */
.site-header__mega-promo {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-7);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-xl);
}

.site-header__mega-promo-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-white);
}

.site-header__mega-promo-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: rgb(var(--color-white-rgb) / 84%);
}

.site-header__mega-promo .btn {
  margin-top: var(--space-2);
}

.site-header__mega-promo-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.site-header__mega-promo-phone i {
  font-size: var(--icon-xs);
  color: var(--color-accent);
}

.site-header__mega-promo-phone:hover {
  color: var(--color-accent);
}

/* Below ~1100px the promo would squeeze the link columns, so it steps aside. */
@media (max-width: 1200px) {
  .site-header__mega-inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .site-header__mega-promo {
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    gap: var(--space-5);
  }
}
/* ── Desktop simple dropdown (non-mega children) ── */
.site-header__dropdown {
  position: absolute;
  top: calc(100% + var(--header-dropdown-lift) + var(--header-flyout-gap));
  left: 0;
  min-width: 290px;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-primary-soft);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgb(var(--color-primary-rgb) / 14%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 50;
}

/* Invisible bridge spanning the gap between the nav item and the dropdown so
   moving the mouse down doesn't drop the :hover and close the menu. */
.site-header__dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--header-dropdown-lift) + var(--header-flyout-gap)));
  height: calc(var(--header-dropdown-lift) + var(--header-flyout-gap));
}

/* 2nd-level flyout submenu (a dropdown child that has its own children) */
.site-header__dropdown-item {
  position: relative;
}

.site-header__dropdown-caret {
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-gray-400);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-header__dropdown-item.has-children:hover > .site-header__dropdown-link .site-header__dropdown-caret,
.site-header__dropdown-item.has-children:focus-within > .site-header__dropdown-link .site-header__dropdown-caret {
  color: var(--color-primary);
  transform: translateX(2px);
}

.site-header__submenu {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 100%;
  min-width: 270px;
  padding: var(--space-3);
  margin-left: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-primary-soft);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgb(var(--color-primary-rgb) / 14%);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: 60;
}

.site-header__dropdown-item.has-children:hover > .site-header__submenu,
.site-header__dropdown-item.has-children:focus-within > .site-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.site-header__nav-item--dropdown:hover .site-header__dropdown,
.site-header__nav-item--dropdown:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Same row treatment as the mega links: a cyan bar slides in on the left
   rather than the text just changing colour. */
.site-header__dropdown-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.site-header__dropdown-link::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  width: 3px;
  height: 0;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  transition: height var(--transition-fast);
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link.active {
  background: var(--color-accent-soft);
  color: var(--color-primary);
}

.site-header__dropdown-link:hover::before,
.site-header__dropdown-link.active::before {
  height: 18px;
}

.site-header__dropdown-link.active {
  font-weight: var(--fw-semibold);
}

.site-header__overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: rgb(var(--color-dark-soft-rgb) / 18%);
  backdrop-filter: blur(3px);
  transition: opacity var(--transition-base);
  z-index: 48;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(100vw, 390px);
  height: 100vh;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 49;
  overflow: hidden;
}

.mobile-menu__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.mobile-menu__panel {
  width: 100%;
  height: 100%;
  padding: var(--space-8) var(--space-8) var(--space-9);
  overflow-y: auto;
}

/* Sub-panels stack above root and slide in from the right */
.mobile-menu__panel--sub {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 2;
}

.mobile-menu__panel--sub.is-active {
  transform: translateX(0);
}

.mobile-menu__top {
  min-height: 47px;
  margin-bottom: 34px;
}

.mobile-menu__list {
  border-top: 1px solid var(--color-gray-200);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--color-dark-soft);
  border-bottom: 1px solid var(--color-gray-200);
}

.mobile-menu__link--button {
  text-align: left;
}

.mobile-menu__link:hover,
.mobile-menu__link.active {
  color: var(--color-link-hover);
}

.mobile-menu__arrow {
  font-size: var(--icon-sm);
  line-height: 1;
  flex: 0 0 auto;
}

.mobile-menu__footer {
  padding-top: 28px;
}

.mobile-menu__subheader {
  padding-bottom: 20px;
  margin-bottom: 12px;
}

.mobile-menu__text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  color: var(--color-dark-soft);
}

.mobile-menu__text-button i {
  font-size: var(--icon-lg);
  line-height: 1;
}

.mobile-menu__panel-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-primary);
}

.mobile-menu__services {
  display: grid;
  gap: 22px;
}

.mobile-menu__service-title {
  padding-bottom: 14px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
}

.mobile-menu__service-links {
  display: grid;
  gap: 14px;
}

.mobile-menu__service-link {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-dark-soft);
  transition: color var(--transition-fast);
}

.mobile-menu__service-link:hover,
.mobile-menu__service-link.active {
  color: var(--color-link-hover);
}

/* Nested (grandchild) links under a mobile dropdown child */
.mobile-menu__service-sublinks {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--color-gray-200);
}

.mobile-menu__service-link--sub {
  font-size: var(--text-base);
  color: var(--color-gray-500);
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header__overlay {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .mobile-menu {
  transform: translateX(0);
}

/* (legacy 2-panel slide removed — sub-panels now slide individually) */

/* ============================================================
   BlueTech Hero
   ============================================================ */

/* The gradient card runs the full viewport width and is pulled up behind the
   transparent site header, so the nav sits on it exactly as in the design.
   The header keeps z-index 30, so it still paints above this background. */
/* No bottom margin — the hero card's own padding closes it off, and the next
   section's padding-top supplies the gap. */
/* Shared page-banner wash — the home hero and every inner page banner. It runs
   the full height of the band, behind the transparent header included, and
   only resolves to white right at the bottom. The white half of the home
   headline depends on it, so keep the upper stops saturated. Both supply their
   own padding, so they must NOT also carry .section-py. */
.hero,
.page-banner,
.doc-banner {
  position: relative;
  margin-top: calc(-1 * var(--header-height));
  padding-top: calc(var(--header-height) + 53px);
  padding-bottom: clamp(56px, 8vw, 110px);
  /* No opaque fill: the body is already white, and a solid colour here would
     paint over the next section's glow as it bleeds up, leaving a hard edge. */
  background-color: transparent;
  background-image: linear-gradient(180deg,
      rgba(104, 185, 216, 0.92) 0%,
      rgba(110, 189, 218, 0.90) 38%,
      rgba(134, 202, 228, 0.82) 60%,
      rgba(172, 218, 238, 0.62) 76%,
      rgba(214, 236, 247, 0.34) 89%,
      rgba(255, 255, 255, 0) 100%);
}

/* Soft variant (single service page): mostly white, with a light sky wash
   that fades in from the top-right corner and clears before the copy. */
.page-banner--soft {
  /* Figma: linear #98D2E8 @ 80% → #FFFFFF. */
  /* "to bottom left" keeps the fade lines parallel to the band's diagonal, so
     the wash hugs the top-right corner and is white before the bottom. */
  background-image: linear-gradient(to bottom left,
      rgba(152, 210, 232, 0.8) 0%,
      rgba(152, 210, 232, 0.45) 22%,
      rgba(152, 210, 232, 0.12) 38%,
      rgba(255, 255, 255, 0) 48%);
}

/* ── Shared inner-page banner (about, services, trades, samples, contact) ── */
/* Copy starts at the top of its column rather than sitting centred against
   the image. */
.page-banner__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.page-banner__heading {
  margin-top: var(--space-8);
  color: var(--color-primary);
}

.page-banner__heading-accent {
  color: var(--color-white);
}

.page-banner__text {
  max-width: 650px;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.page-banner__cta {
  margin-top: var(--space-8);
}

/* Capped, not fixed: the image still scales with its column, and when that
   would make it taller than the cap it is cropped from the centre rather than
   squashed. */
.page-banner__media {
  overflow: hidden;
  max-height: 500px;
  border-radius: var(--radius-xl);
}

.page-banner__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
}

/* Still side by side on a tablet, just evened out — the copy column no
   longer needs the extra share it has on a desktop. */
@media (max-width: 992px) {
  .page-banner__layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .page-banner__layout {
    grid-template-columns: 1fr;
  }

  .page-banner__media {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ── Document banner (privacy, terms & conditions, FAQ) ──────────────────
   Those pages carry a title and little else, so the two-column .page-banner
   left a dead field of gradient next to a stock photo. This one is centred,
   image-free and only as tall as its own copy, with a drawing-style dimension
   line under the heading. */
.doc-banner {
  padding-top: calc(var(--header-height) + 44px);
  padding-bottom: clamp(48px, 6vw, 78px);
}

.doc-banner__inner {
  max-width: 780px;
}

/* The breadcrumb rides inside the badge pill, so the eyebrow carries context
   instead of repeating the heading below it. Shared by both banners. */
.crumb-pill {
  gap: var(--space-2);
}

.crumb-pill a {
  color: rgb(var(--color-primary-rgb) / 62%);
  transition: color var(--transition-fast);
}

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

.crumb-pill__sep {
  color: rgb(var(--color-primary-rgb) / 38%);
}

.doc-banner__heading {
  margin-top: var(--space-6);
  color: var(--color-primary);
}

/* Dimension line: end ticks and a centre node, the way a measurement is
   marked up on a drawing. */
.doc-banner__rule {
  position: relative;
  width: 148px;
  height: 1px;
  margin-top: var(--space-7);
  background: rgb(var(--color-primary-rgb) / 30%);
}

.doc-banner__rule::before,
.doc-banner__rule::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: rgb(var(--color-primary-rgb) / 30%);
}

.doc-banner__rule::before {
  left: 0;
}

.doc-banner__rule::after {
  right: 0;
}

.doc-banner__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.doc-banner__text {
  max-width: 640px;
  margin-top: var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .doc-banner {
    padding-top: calc(var(--header-height) + 30px);
    padding-bottom: 44px;
  }

  .doc-banner__rule {
    width: 112px;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 81px);
  align-items: center;
}

.hero__content {
  max-width: 650px;
}

/* Sized independently of --h1-size: the global h1 scale drops to 28px below
   1240px, which is far too small for the hero headline. */
.hero__title {
  font-weight: var(--fw-semibold);
  line-height: 1.06;
  color: var(--color-primary);
}

.hero__title-lead {
  /* display: block; */
  font-size: var(--fluid-hero);
}

/* Second half of the headline reverses out to white, per the design. */
.hero__title-sub {
  /* display: block; */
  font-size: var(--fluid-hero-sub);
  color: var(--color-white);
}

.hero__title-lead + .hero__title-sub {
  margin-top: 0.12em;
}

.hero__lead {
  /* max-width: 529px; */
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: 1.333;
  color: var(--color-primary);
}

.hero__cta {
  margin-top: var(--space-8);
}

.hero__media {
  justify-self: end;
  width: 100%;
  max-width: 463px;
}

/* The exported asset already contains the offset glass-card frame, so it is
   placed as one image — no extra decoration needed. */
.hero__media img {
  width: 100%;
  height: auto;
}

.appointment-card {
  position: relative;
  height: 100%;
  min-height: 452px;
  padding: 37px 63px;
  color: var(--color-white);
  /* Match parent border-radius so corners stay visually clean */
  border-radius: var(--radius-lg);
}

.appointment-card>* {
  position: relative;
  z-index: 1;
}

/* Fields container sits above submit button so dropdown overlays it correctly */
.appointment-card__fields {
  position: relative;
  z-index: 3;
}

/* Phone field elevates within its stacking context */
.appointment-card__field:has(.appointment-card__phone) {
  z-index: 4;
}

.appointment-card__header {
  margin-bottom: 24px;
}

.appointment-card__header .heading {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.appointment-card__header .text {
  margin-top: var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 24.3px;
  color: var(--color-white);
}

.appointment-card__fields {
  display: grid;
  gap: 13px;
}

.appointment-card__field {
  display: grid;
  gap: 0;
}

.appointment-card__field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

.appointment-card__field-row .appointment-card__field {
  min-width: 0;
  width: 100%;
}

.appointment-card .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: rgb(var(--color-white-rgb) / 92%);
}

.appointment-card .form-input {
  display: block;
  width: 100%;
  min-height: 49px;
  padding: 12px var(--space-4);
  font-size: var(--text-base);
  border-color: transparent;
  border-radius: 5px;
  outline: none !important;
  box-shadow: none !important;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Focus: the border turns cyan and picks up a soft ring — the same feedback on
   the navy card, the white card and the popup. It replaces a rule that forced
   border-color:transparent here, which erased the outlined variants' borders
   the moment a field was focused. */
.appointment-card .form-input:focus,
.appointment-card .form-input:focus-visible,
.appointment-card .appointment-card__phone:focus-within,
.appointment-card .appointment-card__upload:focus-within,
.appointment-card .appointment-card__upload:hover {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / 25%) !important;
}

.appointment-card__upload {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 49px;
  padding: 12px var(--space-4);
  font-size: var(--text-base);
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--color-primary);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.appointment-card__upload-text {
  min-width: 0;
  overflow: hidden;
  color: var(--color-gray-400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-card__upload i {
  flex: 0 0 auto;
  font-size: var(--icon-md);
}

/* ── Phone wrapper ── */
.appointment-card__phone {
  display: block;
  position: relative;
  /* iti positions dropdown relative to this */
  min-height: 49px;
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: 5px;
  overflow: visible;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.appointment-card__phone .iti {
  display: block;
  width: 100%;
  position: relative;
}

.appointment-card__phone .iti input,
.appointment-card__phone .form-input {
  width: 100%;
  min-height: 49px;
  border: 0 !important;
  border-radius: 5px !important;
  font-size: var(--text-base);
  color: var(--color-dark-soft);
  background: transparent;
}

/* allow-dropdown default is a fixed 52px — use % so it adjusts with width */
.appointment-card__phone .iti--allow-dropdown input[type="tel"] {
  padding-left: 2% !important;
}

/* separateDialCode=true — iti adds its own padding for flag+code */
.appointment-card__phone .iti--separate-dial-code input {
  padding-left: 94px !important;
}

.appointment-card__phone .iti__selected-flag {
  background: transparent !important;
}

.appointment-card__phone .iti__selected-dial-code {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/*
  Phone dropdown positioning trick:
  - .iti__flag-container default is position:relative → dropdown is as narrow as the flag
  - Setting it to position:static means the dropdown finds .iti as its positioned ancestor
  - .iti is position:relative + full width → dropdown gets full input width
*/
.appointment-card__phone .iti {
  position: relative;
  display: flex;
  width: 100%;
  z-index: 5;
}

#hero-quote-form-phone {
  padding-left: 10px !important;
}

.appointment-card__phone .iti__flag-container {
  position: static !important;
}

/* Dropdown list — positioned relative to .iti (full width) */
.appointment-card__phone .iti__country-list {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-size: var(--text-base) !important;
  padding: 4px 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

.appointment-card__phone .iti__country-list.iti__hide {
  display: none !important;
}

/* List items */
.appointment-card__phone .iti__country {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: background .12s;
  white-space: nowrap;
}

.appointment-card__phone .iti__country:hover,
.appointment-card__phone .iti__country.iti__highlight {
  background: var(--color-gray-100) !important;
}

.appointment-card__phone .iti__flag-box {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

.appointment-card__phone .iti__country-name {
  font-size: var(--text-base) !important;
  color: var(--color-dark-soft) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appointment-card__phone .iti__dial-code {
  font-size: var(--text-sm) !important;
  color: var(--color-gray-400) !important;
  margin-left: auto !important;
}

.appointment-card__phone .iti__divider {
  border-color: var(--color-gray-200) !important;
  margin: 4px 0 !important;
}

/* ── Field errors ── */
.field-error {
  font-size: var(--text-sm);
  margin-top: 6px;
  line-height: 1.35;
  /* Reserve space even when empty to avoid layout shifts. */
  /* min-height: 18px; */
}

/* Only style as a chip when there is an actual message — keeps it readable on
   ANY background (blue hero card or white contact page) without an empty bar. */
.field-error:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 600;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #fecdca;
  border-radius: 6px;
}

.field-error:not(:empty)::before {
  content: "\f071";
  /* triangle-exclamation */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--icon-xs);
  line-height: 1;
}

.form-input.is-invalid {
  outline: 2px solid #f04438;
  outline-offset: 1px;
}

/* ── Form status message (success / error) ── */
.form-messages {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-messages::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--icon-md);
  line-height: 1.4;
  flex-shrink: 0;
}

.form-messages.msg-success {
  color: #027a48;
  background: #ecfdf3;
  border-color: #a6f4c5;
}

.form-messages.msg-success::before {
  content: "\f058";
  /* circle-check */
}

.form-messages.msg-error {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.form-messages.msg-error::before {
  content: "\f06a";
  /* circle-exclamation */
}

/* ── Submit button ── */
.appointment-card__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--space-5);
  border-color: transparent;
  position: relative;
  z-index: 1;
  /* explicitly lower than fields (z-index:3) and dropdown (z-index:9999) */
}

.appointment-card__submit:hover,
.appointment-card__submit:focus-visible {
  border-color: transparent;
}

/* ============================================================
   BlueTech Home - Who We Are Section
   ============================================================ */
.home-who-section__shell {
  display: grid;
  grid-template-columns: minmax(280px, 480px) minmax(300px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.home-who-section__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 40px;
}

.home-who-section__content .section-badge {
  display: inline-flex;
}

.home-who-section__content h2 {
  margin-top: var(--space-3);
}

.home-who-section__content>p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.home-who-section__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.home-who-section__point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.home-who-section__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  background: var(--color-primary);
  border-radius: 50%;
  color: var(--color-white);
  font-size: var(--icon-xs);
  line-height: 1;
}

.home-who-section__cta {
  display: inline-flex;
  margin-top: var(--space-6);
}

/* ============================================================
   BlueTech About Section
   ============================================================ */

.about-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* The "Learn More About Us" link sits over the top of the photo. */
.about-section__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.about-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-section__media-link {
  position: absolute;
  top: var(--space-6);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.about-section__media-link:hover {
  color: var(--color-accent);
}

/* Small solid triangle after the label, as in the design. */
.about-section__media-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.about-section__title-accent {
  display: block;
  color: var(--color-sky);
}

.about-section__body {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.about-section__body p {
  color: var(--color-dark);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
}

/* ============================================================
   BlueTech Core Services
   ============================================================ */

.services-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-10);
}

.services-section__nav {
  display: flex;
  gap: var(--space-3);
}

/* Too narrow to sit beside the heading, so they drop to a row of their own. */
@media (max-width: 768px) {
  .services-section__head {
    grid-template-columns: 1fr;
  }

  .services-section__nav {
    justify-content: end;
  }
}

/* Outlined black circle, with the "next" arrow filled solid black. */
.services-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-dark);
  background: transparent;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    opacity var(--transition-fast);
}

.services-slider__arrow i {
  font-size: var(--icon-sm);
  line-height: 1;
}

.services-slider__arrow--next {
  color: var(--color-white);
  background: var(--color-dark);
}

.services-slider__arrow:hover:not(:disabled) {
  color: var(--color-white);
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.services-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.services-slider__viewport {
  --slider-bleed: var(--space-5);
  --slider-bleed-x: calc(var(--space-6) / 2);
  margin: calc(-1 * var(--slider-bleed)) calc(-1 * var(--slider-bleed-x));
  padding: var(--slider-bleed) var(--slider-bleed-x);
  overflow: hidden;
}

.services-slider__track {
  display: flex;
  gap: var(--space-6);
  align-items: stretch;
  transition: transform var(--transition-slow);
}

/* Three across, then two, then one — the same steps the testimonials use. */
.services-slider .service-card {
  flex: 0 0 calc((100% - (var(--space-6) * 2)) / 3);
  min-width: 0;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.service-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
}

/* Cards showing the service's banner image (home slider, services/trades
   index): Figma's image is 334 x 223 with a 10px radius. Width-driven, so the
   height scales with the card on every screen. */
.service-card__media--banner {
  aspect-ratio: 334 / 223;
  border-radius: 10px;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .service-card__media img {
  transform: scale(1.04);
}

.service-card__title {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.service-card__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.service-card__title a:hover {
  color: var(--color-accent);
}

.service-card__text {
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.service-card__link {
  align-self: flex-end;
  margin-top: auto;
}

/* ── Sample page filter tabs (white background) ── */
/* Soft chips rather than filled navy pills — the active one is a pale cyan
   wash with a hairline ring and a small dot, so the filter reads as a filter
   and stays clearly in the brand palette. */
/* ── Section head ────────────────────────────────────────────────────────
   One object. The badge, the heading and the standfirst sit on the left,
   flush with whatever the section puts below them — except the four listed
   under "Centred" below, which are statements rather than collections.
   Pages used to each set their own (720 / 840 / 880 / 900px, centred or left,
   space-10 or space-12), which is what made the site look assembled from
   different templates. */
.trades-section__head,
.faq-section__head,
.process-section__head,
.excellence__head,
.about-commitment__head,
.about-why__head,
.blog-listing__head,
.contact-cta__head,
.contact-form-section__head,
.contact-details__head,
.page-highlights__header,
.services-index__head,
.samples-index__head,
.samples-section__head,
.blog-section__head,
.services-section__intro,
.section-header__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

/* The services head already carries its slider arrows in a second column, so
   its intro column owns the rhythm instead. */
.services-section__intro {
  margin-bottom: 0;
}

/* Centred */
.process-section__head,
.faq-section__head,
.contact-form-section__head,
.contact-details__head {
  justify-items: center;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.trades-section__head p,
.faq-section__head p,
.process-section__head p,
.excellence__head p,
.about-commitment__head p,
.about-why__head p,
.blog-listing__head p,
.contact-cta__text,
.contact-form-section__head p,
.contact-details__head p,
.services-index__head p,
.samples-index__head p,
.samples-section__head p,
.blog-section__head p,
.page-highlights__header p,
.services-section__intro p,
.section-header__intro p {
  max-width: 640px;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .trades-section__head,
  .faq-section__head,
  .process-section__head,
  .excellence__head,
  .about-commitment__head,
  .about-why__head,
  .blog-listing__head,
  .contact-cta__head,
  .contact-form-section__head,
  .contact-details__head,
  .page-highlights__header,
  .services-index__head,
  .samples-index__head,
  .samples-section__head,
  .blog-section__head,
  .services-section__intro,
  .section-header__intro {
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .services-section__intro {
    margin-bottom: 0;
  }
}
/* ── What's included ─────────────────────────────────────────────────────
   A badge (the admin's icon, or the item's number) beside the title, with
   the copy beneath it across the full card. */
.service-included__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}

.service-included-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-white);
  background-image: linear-gradient(150deg,
      rgb(var(--color-sky-rgb) / 14%) 0%,
      rgb(var(--color-sky-rgb) / 0%) 55%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.service-included-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-primary);
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base);
}

.service-included-card:hover .service-included-card__badge {
  background: var(--color-accent);
}

.service-included-card__badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.service-included-card__title {
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.service-included-card__text {
  grid-column: 1 / -1;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

@media (max-width: 1024px) {
  .service-included__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .service-included__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ── Who we work with ────────────────────────────────────────────────────
   A navy banner laid over the blueprint photograph, then the audience
   cards beneath it. The overlay is the design's flat 89% navy — one solid
   tint, not a gradient — so the photo reads as texture rather than art. */
.work-with__banner {
  padding: clamp(28px, 4vw, 48px);
  color: var(--color-white);
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgb(var(--color-primary-rgb) / 89%), rgb(var(--color-primary-rgb) / 89%)),
    url('../img/bg_who-serve.png');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-2xl);
}

.work-with__title {
  color: var(--color-white);
}

.work-with__text {
  max-width: 720px;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: rgb(var(--color-white-rgb) / 88%);
}

.work-with__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  margin-top: clamp(20px, 2.6vw, 30px);
}

.work-with-card {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.work-with-card__title {
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.work-with-card__text {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* Two across until the column would be too narrow to read — phones only. */
@media (max-width: 768px) {
  .work-with__grid {
    grid-template-columns: 1fr;
  }
}
/* ── Content card hover ──────────────────────────────────────────────────
   Every bordered card on the site lifts, takes the accent on its border and
   drops a soft navy shadow. They used to do four different things: this,
   a grey wash, a navy fill, or nothing at all. The trades card keeps the
   grey wash its design calls for, on top of the same motion. */
.service-card,
.sample-card,
.trades-card,
.service-included-card,
.service-feature-card,
.work-with-card,
.about-commitment__card,
.about-why__card,
.page-highlights__item,
.contact-details__card,
.contact-cta__detail,
.excellence__item,
.blog-feature,
.blog-grid .blog-card {
  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.service-card:hover,
.sample-card:hover,
.trades-card:hover,
.service-included-card:hover,
.service-feature-card:hover,
.work-with-card:hover,
.about-commitment__card:hover,
.about-why__card:hover,
.page-highlights__item:hover,
.contact-details__card:hover,
.contact-cta__detail:hover,
.excellence__item:hover,
.blog-feature:hover,
.blog-grid .blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 18px 40px rgb(var(--color-primary-rgb) / 14%);
}
/* ── Filter chips ────────────────────────────────────────────────────────
   Shared by the samples grid and the blog listing. They used to differ in
   radius (rounded square vs pill), in the active dot, and in alignment. */
.sample-filter,
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.sample-filter__tab,
.blog-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-gray-500);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Dot marker — invisible until the chip is active. */
.sample-filter__tab::before,
.blog-filter-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.sample-filter__tab:hover,
.blog-filter-tag:hover {
  color: var(--color-dark);
  background: var(--color-gray-100);
}

.sample-filter__tab.is-active,
.blog-filter-tag.active {
  color: var(--color-white);
  background: var(--color-dark);
}

.sample-filter__tab.is-active::before,
.blog-filter-tag.active::before {
  opacity: 1;
}

/* ============================================================
   BlueTech Contact Section (homepage)
   Copy on the left, the shared quote form (navy variant) on the right.
   ============================================================ */

.contact-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 80px);
  /* The same space every other section leaves under its head. */
  row-gap: var(--space-10);
  align-items: start;
}

/* A row of its own across the section; the grid's row gap gives it the
   spacing its own margin used to. */
.contact-cta__head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* With copy beside the form, the heading drops into the left column above
   that copy and the form stands alongside both. */
.contact-cta--split .contact-cta__layout {
  /* Row one is the heading's own height — otherwise the taller form beside it
     stretches that row and pushes the copy down. Row two takes the rest. */
  grid-template-rows: auto 1fr;
  /* Heading and copy read as one block, so they sit closer than the row
     spacing the section uses elsewhere. */
  row-gap: var(--space-5);
}

.contact-cta--split .contact-cta__head {
  grid-column: 1;
  grid-row: 1;
}

.contact-cta--split .contact-cta__intro {
  grid-column: 1;
  grid-row: 2;
}

.contact-cta--split .contact-cta__form {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Too narrow for two columns: everything stacks, so the form gives up the
   row it spans on a desktop. */
@media (max-width: 768px) {
  .contact-cta__layout {
    grid-template-columns: 1fr;
  }

  .contact-cta--split .contact-cta__layout {
    grid-template-rows: none;
  }

  .contact-cta--split .contact-cta__head,
  .contact-cta--split .contact-cta__intro,
  .contact-cta--split .contact-cta__form {
    grid-column: auto;
    grid-row: auto;
  }

  /* Stacked, the form needs more air than the heading-to-copy gap gives it. */
  .contact-cta--split .contact-cta__form {
    margin-top: var(--space-5);
  }
}

.contact-cta__title-accent {
  /* display: block; */
  color: var(--color-sky);
}

/* ── Contact details ──
   The same card as the contact page's details, stacked to sit in the narrow
   intro column beside the form. Icon, label, value — one row each. */
.contact-cta__details {
  display: grid;
  gap: var(--space-4);
}

.contact-cta__detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-white);
  background-image: linear-gradient(150deg,
      rgb(var(--color-sky-rgb) / 14%) 0%,
      rgb(var(--color-sky-rgb) / 0%) 55%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.contact-cta__detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: var(--icon-md);
  line-height: 1;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.contact-cta__detail:hover .contact-cta__detail-icon {
  color: var(--color-primary);
  background: var(--color-accent);
}

.contact-cta__detail-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact-cta__detail-value {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  /* <address> is italic by default. */
  font-style: normal;
  line-height: var(--lh-normal);
  color: var(--color-primary);
  /* A long address or email has to wrap inside the card, not past it. */
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

a.contact-cta__detail-value:hover {
  color: var(--color-accent);
}

/* ── Navy form card ── */
.appointment-card--contact {
  min-height: 0;
  padding: var(--space-10);
  background: var(--color-primary);
  border-radius: var(--radius-2xl);
}

.appointment-card--contact .form-label {
  color: rgb(var(--color-white-rgb) / 85%);
}

/* Outlined fields on the navy card rather than solid white ones. */
.appointment-card--contact .form-input,
.appointment-card--contact .appointment-card__upload,
.appointment-card--contact .appointment-card__phone {
  color: var(--color-white);
  background: transparent;
  border: 1px solid rgb(var(--color-accent-rgb) / 42%) !important;
  border-radius: var(--radius-md);
}

.appointment-card--contact .form-input::placeholder {
  color: rgb(var(--color-white-rgb) / 55%);
}

.appointment-card--contact .appointment-card__phone .iti input,
.appointment-card--contact .appointment-card__phone .form-input {
  color: var(--color-white);
  background: transparent;
  border: 0 !important;
}

.appointment-card--contact .appointment-card__phone .iti__selected-dial-code,
.appointment-card--contact .appointment-card__upload i {
  color: var(--color-white);
}

.appointment-card--contact .appointment-card__upload-text {
  color: rgb(var(--color-white-rgb) / 55%);
}

/* Submit sits at the bottom right of the card, as in the design. It needs to
   stay a block-level flex item for margin-left:auto to push it right, and to
   restate the border that .appointment-card__submit clears. */
.appointment-card--contact .appointment-card__submit {
  display: flex;
  width: fit-content;
  min-width: 150px;
  margin-top: var(--space-6);
  margin-left: auto;
  border-color: var(--color-accent);
}

.appointment-card--contact .appointment-card__submit:hover {
  border-color: var(--color-accent);
}


@media (max-width: 1180px) {
  .services-slider .service-card {
    flex-basis: calc((100% - var(--space-6)) / 2);
  }
}

@media (max-width: 768px) {
  .services-slider .service-card {
    flex-basis: 100%;
  }

  .services-slider__track {
    gap: var(--space-4);
  }
}

.trades-slider {
  /* --slider-bleed is the room a hovered card's lift and shadow need inside
     the clip box; the negative margin cancels it again for the layout. */
  --slider-bleed: var(--space-5);
  /* Sideways it can only be as wide as the slide's own inline padding, or the
     next slide's first card peeks past the clip edge. */
  --slider-bleed-x: calc(var(--space-5) / 2);
  margin: calc(var(--space-12) - var(--slider-bleed)) calc(-1 * var(--slider-bleed-x)) calc(-1 * var(--slider-bleed));
  padding: var(--slider-bleed) var(--slider-bleed-x);
  overflow: hidden;
}

/* flex-start, not the default stretch: each slide keeps its own height, so the
   script below can measure the one on screen and size the track to it. The
   height is animated with the slide, or the pagination would jump. */
.trades-slider__track {
  display: flex;
  align-items: flex-start;
  transition:
    transform var(--transition-slow),
    height var(--transition-slow);
}

/* Drag-to-swipe cursor feedback (all sliders) */
.trades-slider__track,
.reviews-slider__track,
.blog-slider__track {
  cursor: grab;
}

.trades-slider__track.is-grabbing,
.reviews-slider__track.is-grabbing,
.blog-slider__track.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

.trades-slider__slide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 100%;
  gap: var(--space-5);
  /* Pack rows at the top so a slide with fewer cards doesn't stretch them to
     the (taller) track height. */
  align-content: start;
  /* Inset each slide so adjacent slides have a visible gap between them while
     sliding (box-sizing keeps the slide exactly 100% so translateX stays correct). */
  padding-inline: calc(var(--space-5) / 2);
}

/* Icon and title share the top row; the copy and Learn More link span both
   columns underneath. Works with or without an icon — the auto column
   collapses to zero when the image isn't rendered. */
.trades-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "text text"
    "link link";
  align-items: center;
  column-gap: var(--space-3);
  min-height: 268px;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.trades-card:hover {
  background: var(--color-card-hover);
}

.trades-card__icon {
  grid-area: icon;
  width: 40px;
  min-height: 40px;
  font-size: var(--icon-2xl);
  line-height: 1;
  color: var(--color-primary);
}

.trades-card h3 {
  grid-area: title;
  align-self: center;
  font-family: var(--font-body);
  color: var(--color-primary);
  font-size: var(--h4-size);
}

.trades-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.trades-card__title-link:hover,
.trades-card__title-link:focus-visible {
  color: var(--color-accent);
}

.trades-card p {
  grid-area: text;
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* Same treatment as the service cards: a plain underlined link at the bottom
   right, no leading rule. */
/* The accent, not navy: the cards already carry navy titles and navy body
   copy, and this is the colour their border takes on hover. */
.trades-card__link,
.service-card__link {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.trades-card__link {
  grid-area: link;
  justify-self: end;
  margin-top: auto;
}

.trades-card__link:hover,
.trades-card__link:focus-visible,
.service-card__link:hover,
.service-card__link:focus-visible {
  color: var(--color-primary);
}

.trades-slider__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.trades-slider__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-dark);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.trades-slider__dot.active {
  color: var(--color-white);
  background: var(--color-dark);
  border-radius: var(--radius-pill);
}

.service-included .section-header {
  align-items: center;
}

.service-included .section-header__title {
  max-width: 610px;
}

/* Right column of the "What's Included" header: CTA button on top, slider
   arrows underneath it (both right-aligned). */
.service-included__actions {
  display: grid;
  justify-items: end;
  gap: 20px;
  justify-self: end;
}


/* Tablet / small-desktop (above the mobile accordion breakpoint): drop the
   service-page card grids from 3 to 2 columns so the cards don't get squeezed
   narrow and very tall. A lone card left in the last row spans the full width
   instead of sitting half-width. Mobile (<=768px) keeps its own accordion. */
@media (min-width: 769px) and (max-width: 1180px) {
  /* Parent section class is included on purpose: it raises specificity above the
     base 3-column rules (which live LATER in this file) so the 2-column layout
     actually wins in this range. */
  .service-features .service-features__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-features .service-features__cards > .service-feature-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Editor-added inline links inside the dynamic service-page copy stay visible
   and clickable (they used to be stripped as plain text). */
.service-feature-card p a,
.process-section__text a,
.process-step__text a,
.reviews-card p a,
.faq-item__panel p a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: var(--fw-semibold, 600);
}

.service-feature-card p a:hover,
.process-section__text a:hover,
.process-step__text a:hover,
.reviews-card p a:hover,
.faq-item__panel p a:hover {
  text-decoration: none;
}

/* ============================================================
   BlueTech Plans CTA
   ============================================================ */

/* Flat brand navy — the old blueprint photo is gone in the new design. */
.plans-cta__shell {
  display: grid;
  justify-items: center;
  min-height: 270px;
  padding: 64px 45px 56px;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-2xl);
}

.plans-cta__shell h2 {
  color: var(--color-white);
}

.plans-cta__shell p {
  max-width: 820px;
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.plans-cta__button {
  margin-top: var(--space-5);
}

/* ============================================================
   BlueTech Process Section
   ============================================================ */

/* Wide enough that "…Your Plans Into a" stays on one line and the accent half
   drops to its own line, as in the design. */
.process-section__title-accent {
  display: block;
  color: var(--color-sky);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

/* Each card is the shared blueprint photo under a navy wash, with the step
   number ghosted large down the left-hand side. */
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  min-height: 156px;
  /* The numeral's overhang is measured from this, so they stay in step. */
  --step-pad-y: var(--space-6);
  padding: var(--step-pad-y) var(--space-7);
  overflow: hidden;
  color: var(--color-white);
  /* Card 2 keeps the original photo; cards 1, 3 and 4 get their own below.
     The cycle repeats if a service ever has more than four steps. */
  --process-step-bg: url('../img/bg-work-procces.png');
  background-image:
    linear-gradient(rgb(var(--color-primary-rgb) / 88%), rgb(var(--color-primary-rgb) / 88%)),
    var(--process-step-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--radius-lg);
}

.process-step:nth-child(4n + 1) {
  --process-step-bg: url('../img/proccess_bg_1.png');
}

.process-step:nth-child(4n + 3) {
  --process-step-bg: url('../img/proccess_bg_3.png');
}

.process-step:nth-child(4n + 4) {
  --process-step-bg: url('../img/proccess_bg_4.png');
}

.process-step__number {
  align-self: end;
  /* Cancel the card's bottom padding, then push further so roughly the bottom
     fifth of the digits is clipped by the card edge, as in the design.
     --step-number-sink is that extra push. */
  --step-number-sink: 0.20em;
  margin-bottom: calc(-1 * (var(--step-pad-y) + var(--step-number-sink)));
  /* Figma: Roboto Condensed SemiBold (loaded as a digits-only subset). */
  font-family: 'Roboto Condensed', var(--font-body);
  font-size: var(--fluid-step-number);
  font-weight: var(--fw-semibold);
  line-height: 0.8;
  color: rgb(var(--color-white-rgb) / 26%);
  transition: color var(--transition-base);
}

.process-step:hover .process-step__number {
  color: rgb(var(--color-white-rgb) / 40%);
}

.process-step__copy {
  min-width: 0;
}

.process-step__title {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.process-step__text {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: rgb(var(--color-white-rgb) / 85%);
}

.process-section__actions,
.trades-section__actions {
  margin-top: var(--space-10);
  text-align: center;
}

/* ============================================================
   BlueTech Reviews Slider
   ============================================================ */

/* Intro column (quote mark, heading, arrows) beside the card track. */
.reviews-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.reviews-section__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--display-md);
  font-weight: var(--fw-bold);
  line-height: 0.6;
  color: var(--color-primary);
}

/* No font-size here — section headings keep the global h2 scale. */
.reviews-section__title {
  margin-top: var(--space-5);
  color: var(--color-primary);
}

.reviews-section__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Outlined black circle, with the "next" arrow filled solid black. */
.reviews-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-dark);
  background: transparent;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    opacity var(--transition-fast);
}

.reviews-slider__arrow i {
  font-size: var(--icon-sm);
  line-height: 1;
}

.reviews-slider__arrow--next {
  color: var(--color-white);
  background: var(--color-dark);
}

.reviews-slider__arrow:hover:not(:disabled) {
  color: var(--color-white);
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.reviews-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.reviews-slider__arrow[hidden] {
  display: none;
}

/* A grid item defaults to min-width:auto, which lets it push past its track. */
.reviews-slider {
  min-width: 0;
}

.reviews-slider__viewport {
  overflow: hidden;
  min-width: 0;
}

.reviews-slider__track {
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
  transition: transform var(--transition-slow);
}

.reviews-card {
  display: flex;
  flex: 0 0 calc((100% - (var(--space-5) * 2)) / 3);
  flex-direction: column;
  min-width: 0;
}

/* The quote sits in its own bordered panel; the person sits below it. */
.reviews-card__quote {
  position: relative;
  flex: 1;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Speech-bubble tail pointing down at the name below it. The outline triangle
   sits behind a slightly smaller white one, so the card's hairline carries on
   around the point. */
.reviews-card__quote::before,
.reviews-card__quote::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--space-6);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}

.reviews-card__quote::before {
  border-width: 14px 14px 0 0;
  border-top-color: var(--color-border);
}

.reviews-card__quote::after {
  margin-top: -1px;
  margin-left: 1px;
  border-width: 12px 12px 0 0;
  border-top-color: var(--color-white);
}

.reviews-card__quote p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.reviews-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.reviews-card__avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: var(--color-dark);
  border-radius: var(--radius-pill);
}

.reviews-card__meta {
  display: grid;
  min-width: 0;
}

.reviews-card__name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-primary);
}

.reviews-card__role {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.35;
  color: var(--color-gray-500);
}

.reviews-slider__dots {
  display: none;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.reviews-slider__dots[hidden] {
  display: none;
}

.reviews-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), width var(--transition-fast);
}

.reviews-slider__dot.active {
  width: 22px;
  background: var(--color-dark);
}

/* ============================================================
   BlueTech Samples Grid
   ============================================================ */

.sample-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.sample-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.sample-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sample-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.sample-card:hover .sample-card__media img {
  transform: scale(1.04);
}

.sample-card__eyebrow {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-gray-500);
}

.sample-card__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.sample-card__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.sample-card__title a:hover {
  color: var(--color-accent);
}

/* Thin rule on the left, download link on the right. */
/* Same footer as the blog card: a hairline across the card, then the link
   with its circular icon. It used to be a stub of cyan rule ending wherever
   the link began. */
.sample-card__footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.sample-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.sample-card__link:hover {
  color: var(--color-primary);
}

.sample-card__link i {
  font-size: var(--icon-xs);
}

.samples-section__actions {
  margin-top: var(--space-10);
  text-align: center;
}

@media (max-width: 575px) {
  .sample-card {
    padding: var(--space-4);
  }

  .reviews-section__mark {
    font-size: var(--display-sm);
  }
}

/* ============================================================
   BlueTech Nationwide Coverage
   ============================================================ */

.coverage-section__shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(500px, 1.18fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  overflow: hidden;
  padding: 64px 58px;
  background:
    radial-gradient(circle at 93% 8%, rgb(var(--color-accent-rgb) / 13%), transparent 28%),
    linear-gradient(135deg, #f5faff 0%, #ffffff 50%, #f8fbfe 100%);
  border: 1px solid #b9d3e8;
  border-radius: var(--section-frame-radius);
}

.coverage-section__shell::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -105px;
  bottom: -135px;
  border: 42px solid rgb(var(--color-primary-rgb) / 6%);
  border-radius: 50%;
}

.coverage-section__cta {
  margin-top: var(--space-7);
}

.coverage-map {
  position: relative;
  min-width: 0;
  padding: 26px 26px 22px;
  background: rgb(var(--color-white-rgb) / 88%);
  border: 1px solid rgb(var(--color-primary-rgb) / 18%);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgb(var(--color-primary-rgb) / 13%);
}

.coverage-map__visual {
  position: relative;
  margin: 14px auto 6px;
}

.coverage-map__visual img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 16px rgb(var(--color-primary-rgb) / 16%));
}

@media (max-width: 1180px) {
  .coverage-section__shell {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 54px 46px;
  }

  .coverage-map {
    width: 100%;
    max-width: 780px;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .coverage-section__shell {
    gap: 30px;
    padding: 30px 20px;
    border-radius: var(--section-frame-radius);
  }

  .coverage-section__cta {
    width: 100%;
    margin-top: var(--space-5);
  }

  .coverage-map {
    padding: 18px 14px 16px;
    border-radius: 18px;
  }
}

/* Nationwide coverage: full-width interactive layout */
.coverage-section--modern .coverage-section__shell {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 64px 45px 44px;
  background: var(--color-white);
  border-color: var(--color-border);
}

.coverage-section--modern .coverage-section__shell::before {
  display: none;
}

.coverage-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10);
  align-items: center;
}

.coverage-section__intro {
  max-width: 810px;
}

.coverage-section__intro h2 {
  max-width: 780px;
  margin-top: 14px;
  font-size: var(--fluid-h2);
  line-height: 1.16;
  letter-spacing: -1px;
}

.coverage-section--modern .coverage-section__cta {
  min-width: 220px;
  margin-top: 0;
}

.coverage-section__summary {
  display: block;
  /* margin-top: 28px; */
  padding-top: 24px;
  /* border-top: 1px solid #e4e9ed; */
}

.coverage-section__summary p {
  max-width: 820px;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--color-gray-600);
}

.coverage-section--modern .coverage-map {
  width: 100%;
  max-width: none;
  margin-top: 15px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.coverage-section--modern .coverage-map__visual {
  position: relative;
  width: min(100%, 800px);
  margin: 0px auto 0;
  /* padding: 12px 0; */
}

.coverage-map__viewport {
  position: relative;
  width: 100%;
  /* padding: 8px 0 16px; */
}

.coverage-map__stage {
  width: 100%;
}

.coverage-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 18px rgb(var(--color-primary-rgb) / 15%));
}

.coverage-map__svg .state path {
  cursor: pointer;
  outline: none;
  transition: fill .18s ease, filter .18s ease, opacity .18s ease;
}

.coverage-map__svg .state path:hover,
.coverage-map__svg .state path:focus,
.coverage-map__svg .state path.is-active {
  fill: var(--color-accent);
  filter: drop-shadow(0 3px 4px rgb(var(--color-accent-rgb) / 32%));
}

.coverage-map__svg .borders,
.coverage-map__svg .separator1,
.coverage-map__svg .state-labels {
  pointer-events: none;
}

.coverage-map__svg .state-label {
  font-family: Arial, sans-serif;
  font-size: var(--icon-xs);
  font-weight: 700;
  fill: var(--color-white);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgb(0 44 81 / 28%);
  stroke-width: 1px;
  stroke-linejoin: round;
}

.coverage-map__svg .state-label--small { font-size: var(--map-label-sm); }
.coverage-map__svg .state-label--tiny { font-size: var(--map-label-xs); }

/* Tooltip follows the brand palette: primary blue panel with an accent rule. */
.coverage-map__tooltip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: grid;
  min-width: 145px;
  padding: 10px 13px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 1px solid rgb(var(--color-white-rgb) / 18%);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgb(var(--color-primary-rgb) / 30%);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}

.coverage-map__tooltip[hidden] { display: none; }

.coverage-map__tooltip strong {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--color-white);
}

.coverage-map__tooltip span {
  margin-top: 2px;
  font-size: var(--text-xs);
  line-height: 1.3;
  color: rgb(var(--color-white-rgb) / 80%);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.coverage-map__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--color-primary);
  transform: translateX(-50%);
}

.coverage-section__mobile-cta {
  width: 100%;
  margin-top: var(--space-5);
}

@media (max-width: 992px) {
  .coverage-section--modern .coverage-section__shell {
    padding: 48px 32px 32px;
  }

  .coverage-section__header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
  }

  .coverage-section__summary {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 768px) {
  .coverage-section--modern .coverage-section__shell {
    padding: 30px 20px 20px;
  }

  .coverage-section__header {
    display: block;
  }

  .coverage-section__intro h2 {
    margin-top: 10px;
    font-size: var(--text-4xl);
    letter-spacing: -.4px;
  }

  .coverage-section--modern .coverage-section__cta {
    display: none;
  }

  .coverage-section__summary {
    /* margin-top: 20px; */
    padding-top: 18px;
  }

  .coverage-section__summary p {
    font-size: var(--text-base);
  }

  .coverage-section--modern .coverage-map {
    margin-top: 24px;
    border-radius: 0;
  }

  .coverage-section--modern .coverage-map__visual {
    width: 100%;
    /* padding: 8px 4px 0; */
    overflow: visible;
  }

  .coverage-map__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #9fc2dc #edf5fa;
  }

  .coverage-map__stage,
  .coverage-map__svg {
    min-width: 620px;
  }

  /* A touch larger where there is room for it. */
  :root {
    --map-label: 13px;
    --map-label-sm: 10px;
    --map-label-xs: 8px;
  }
}

/* ============================================================
   Section glow — the soft brand-blue ellipses that drift down the
   sides of the design. Add `glow` to a section and it gets one at
   the top-left and one at the bottom-right; because every section
   carries it, the glows alternate corner to corner and read as a
   zig-zag down the page.
   ============================================================ */

.glow {
  position: relative;
  /* How far outside the section each glow sits. */
  --glow-inset: 14%;
  /* Clip sideways so the offset below cannot widen the page; overflow-y stays
     visible, so the blur still bleeds into the sections above and below.
     Clipping does not create a stacking context, so the glow below still
     paints behind every section. */
  overflow-x: clip;
}

/* Figma's ellipse is 478px of #68B9D8 with a 200 layer blur, but CSS treats
   the blur value as the Gaussian sigma, so blur(200px) spreads about twice as
   far as Figma's and washes the colour out no matter how high the opacity
   goes. A wider circle with a much smaller blur reproduces what the Figma
   actually looks like. */
/* No isolation on .glow, so z-index:-1 puts these behind the content of EVERY
   section, not just their own. With a stacking context per section the glow
   bleeding up out of section N painted on top of section N-1's cards. */
.glow::before,
.glow::after {
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  background: rgb(var(--color-sky-rgb) / 75%);
  filter: blur(90px);
}

/* One glow per section near its top. The side is set explicitly with
   .glow--left / .glow--right so a new section just picks whichever continues
   the alternation — nothing is inferred from document order, which broke
   whenever a tall section's mid glow landed next to the following section's. */
.glow--left::before,
.glow--right::before {
  content: '';
  top: -6%;
}

.glow--left::before {
  left: calc(-1 * var(--glow-inset));
}

.glow--right::before {
  right: calc(-1 * var(--glow-inset));
}

/* Tall sections (long card grids, the FAQ list) get a second glow partway
   down on the OPPOSITE side, so the run keeps alternating through them. */
.glow--tall::after {
  content: '';
  top: 55%;
}

.glow--left.glow--tall::after {
  right: calc(-1 * var(--glow-inset));
}

.glow--right.glow--tall::after {
  left: calc(-1 * var(--glow-inset));
}

@media (max-width: 768px) {
  .glow::before,
  .glow::after {
    width: 340px;
    height: 340px;
    filter: blur(60px);
  }
}

@media (max-width: 575px) {
  .glow {
    --glow-inset: 26%;
  }

  /* Small enough to stay a corner tint rather than a wash over the copy. */
  .glow::before,
  .glow::after {
    width: 210px;
    height: 210px;
    filter: blur(45px);
  }
}

/* ============================================================
   BlueTech Expert Contact
   ============================================================ */

.expert-contact__eyebrow {
  margin-bottom: var(--space-6);
  text-align: center;
}

.expert-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: center;
}

/* Tinted so the rounded card still reads when the portrait is a cut-out PNG
   on a transparent background. */
.expert-contact__photo {
  overflow: hidden;
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
}

.expert-contact__photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* The navy card runs taller than the photo and laps over its right edge. */
.expert-contact__card {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * var(--space-6));
  padding: var(--space-10);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
}

/* No font-size here — section headings keep the global h2 scale. */
.expert-contact__title {
  color: var(--color-white);
}

.expert-contact__subtitle {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.expert-contact__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.expert-contact__pill {
  padding: 8px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-white);
  background: var(--color-sky);
  border-radius: var(--radius-pill);
}

.expert-contact__bio {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 1.9;
  color: rgb(var(--color-white-rgb) / 88%);
}

.expert-contact__bio p {
  font: inherit;
  color: inherit;
}

.expert-contact__socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.expert-contact__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  border: 1px solid rgb(var(--color-white-rgb) / 30%);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.expert-contact__social:hover {
  color: var(--color-primary);
  background: var(--color-sky);
  border-color: var(--color-sky);
}

/* ============================================================
   BlueTech FAQ Section
   ============================================================ */

.faq-list {
  display: grid;
  gap: var(--space-4);
}

/* The open answer sits in its own bordered panel below the question. */
.faq-item {
  display: grid;
  gap: var(--space-3);
}

.faq-item__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-fast);
}

.faq-item__toggle:hover {
  box-shadow: 0 6px 20px rgb(var(--color-primary-rgb) / 10%);
}

.faq-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: var(--radius-md);
}

.faq-item__question {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--color-primary);
}

/* A plus that drops its vertical stroke to read as a minus once open. */
.faq-item__icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq-item__icon::before {
  width: 14px;
  height: 2px;
}

.faq-item__icon::after {
  width: 2px;
  height: 14px;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.faq-item.is-open .faq-item__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__panel {
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.faq-item__panel p {
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 1.95;
  color: rgb(var(--color-dark-rgb) / 85%);
}

.faq-item__panel a {
  color: var(--color-primary);
  text-decoration: underline;
}

.faq-item__panel a:hover {
  text-decoration: none;
}

.faq-section__actions {
  margin-top: var(--space-10);
  text-align: center;
}

/* ============================================================
   BlueTech Blog Section
   ============================================================ */

/* Wide enough to keep the heading on one line; the standfirst below it stays
   narrow so it wraps like the design. */
/* Flex track (not grid) so the shared slider JS can still scroll it on
   narrow screens; three cards fill the row exactly on desktop. */
.blog-slider__viewport {
  overflow: hidden;
  min-width: 0;
}

.blog-slider__track {
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
  transition: transform var(--transition-slow);
}

.blog-card {
  display: flex;
  flex: 0 0 calc((100% - (var(--space-8) * 2)) / 3);
  flex-direction: column;
  min-width: 0;
}

.blog-card__media {
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.blog-card__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}

.blog-card__content {
  padding-top: var(--space-4);
}

.blog-card__title {
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: 1.8;
  color: var(--color-primary);
}

.blog-card__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.blog-card__title a:hover {
  color: var(--color-accent);
}

.blog-section__actions {
  margin-top: var(--space-10);
  text-align: center;
}

.blog-slider__dots {
  display: none;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.blog-slider__dots[hidden] {
  display: none;
}

.blog-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--color-gray-300);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), width var(--transition-fast);
}

.blog-slider__dot.active {
  width: 22px;
  background: var(--color-dark);
}

/* ============================================================
   BlueTech Page Hero (Inner Pages)
   ============================================================ */

.page-hero__shell {
  text-align: center;
}

.page-hero__inner {
  max-width: 830px;
  margin-inline: auto;
}

.page-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-dark);
}

.page-hero__breadcrumb-sep {
  font-size: var(--text-base);
  color: var(--color-gray-400);
}

.page-hero__breadcrumb-active {
  color: var(--color-primary);
}

.page-hero__heading {
  margin-top: 25px;
}

.page-hero__text {
  margin: 20px auto 0;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--color-dark);
}

.page-hero__cta {
  margin-top: 25px;
}

@media (max-width: 768px) {
  .page-hero__breadcrumb {
    font-size: var(--text-md);
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-hero__heading {
    margin-top: 16px;
  }

  .page-hero__text {
    margin-top: 14px;
    font-size: var(--text-base);
  }

  .page-hero__cta {
    margin-top: 16px;
  }
}

/* ============================================================
   BlueTech Service Detail Page
   ============================================================ */

/* Feature Cards */
.service-features__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.service-feature-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.service-feature-card__icon {
  width: 34px;
  height: 34px;
  padding: 15px;
  box-sizing: content-box;
  margin-bottom: var(--space-5);
  object-fit: contain;
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base);
}

.service-feature-card:hover .service-feature-card__icon {
  background: var(--color-accent);
}

.service-feature-card h3 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-primary);
}

.service-feature-card p {
  margin-bottom: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* Tools */
.service-tools__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  /* Bordered card (Figma: 1px, 25px radius, 50px inset on desktop). */
  padding: 50px;
  border: 1px solid rgb(var(--color-dark-rgb) / 65%);
  border-radius: 25px;
}

@media (max-width: 1199px) {
  .service-tools__shell {
    padding: 40px;
  }
}

@media (max-width: 991px) {
  .service-tools__shell {
    padding: 32px;
    border-radius: 22px;
  }
}

@media (max-width: 576px) {
  .service-tools__shell {
    padding: 24px 20px;
    border-radius: 20px;
  }
}

.service-tools__intro {
  display: grid;
  align-content: center;
}

.service-tools__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-10);
  list-style: none;
  margin-top: var(--space-6);
}

.service-tools__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.service-tools__list li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* Ruled like graph paper behind the logos. The tool image has transparent
   gaps between its tiles, so the ruling reads through them. */
.service-tools__logos {
  order: -1;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 36px);
  background-color: var(--color-white);
  background-image:
    linear-gradient(to right, rgb(var(--color-primary-rgb) / 9%) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--color-primary-rgb) / 9%) 1px, transparent 1px);
  background-size: 58px 58px;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.service-tools__logos img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

@media (max-width: 768px) {

  .service-tools__shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .service-tools__logos {
    order: 0;
  }

  .service-tools__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-5);
  }

  .service-tools__list li {
    align-items: flex-start;
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .service-tools__list li::before {
    width: 5px;
    height: 5px;
    margin-top: 6px;
  }

  .service-tools__logos img {
    max-width: 260px;
  }

  /* --- Service page card grids on mobile ---------------------------------
     The service page used to ship a second, mobile-only accordion copy of the
     Benefits / What's Included / Who We Serve items. That duplicated all of
     that copy inside the HTML (Google's crawl showed every heading twice), so
     the accordions are gone and the desktop grids carry mobile too. They drop
     to 2 columns here and to 1 column below 576px. */
  .service-features__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A lone card in the last row spans the full width instead of sitting
     half-width next to empty space. */
  .service-features__cards > .service-feature-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .service-features__cards {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .service-feature-card {
    min-height: auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .service-feature-card__icon {
    width: 28px;
    height: 28px;
    padding: 13px;
    margin-bottom: var(--space-4);
  }

  .service-feature-card h3 {
    font-size: var(--text-base);
  }

}

/* Phones: one card per row for every service-page grid. Sits after the 768px
   block on purpose so it overrides the 2-column rules above. */
@media (max-width: 575px) {
  .service-features__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   BlueTech Page Highlights
   Admin-managed strip that sits under the hero of any page
   (Admin → Content → Highlight Sections).
   ============================================================ */

/* Was one bordered box with vertical dividers inside it. Now each fact is its
   own card, indexed and led by an icon tile, so the strip reads as a set of
   proof points rather than a table. */
.page-highlights__grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
}

.page-highlights__grid--cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

.page-highlights__grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-highlights__grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-highlights__item {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* Ghosted index in the corner — the card's only large type. */
.page-highlights__index {
  display: none;
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: rgb(var(--color-primary-rgb) / 7%);
  transition: color var(--transition-base);
}

.page-highlights__item:hover .page-highlights__index {
  color: rgb(var(--color-accent-rgb) / 22%);
}

.page-highlights__icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-6);
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base);
}

.page-highlights__item:hover .page-highlights__icon-tile {
  background: var(--color-accent);
}

.page-highlights__icon {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.page-highlights__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-primary);
}

/* Grows out from under the title on hover. */
.page-highlights__rule {
  display: block;
  width: 32px;
  height: 3px;
  margin: var(--space-4) 0;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}

.page-highlights__item:hover .page-highlights__rule {
  width: 60px;
}

.page-highlights__text {
  margin-bottom: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* Tablet: three columns get squeezed, so drop to two. */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-highlights__grid--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Nothing to sit beside it, so it spans rather than leaving a gap. */
  .page-highlights__grid--cols-3 > .page-highlights__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

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

  .page-highlights__item {
    padding: var(--space-6);
  }

  .page-highlights__index {
    font-size: var(--text-4xl);
  }

  .page-highlights__icon-tile {
    width: 54px;
    height: 54px;
    margin-bottom: var(--space-4);
  }

  .page-highlights__icon {
    width: 28px;
    height: 28px;
  }

  .page-highlights__title {
    font-size: var(--text-md);
  }

  .page-highlights__text {
    font-size: var(--text-base);
  }
}
/* ============================================================
   BlueTech Services / Trades Index
   ============================================================ */

/* White, not sky — the banner gradient is saturated at the top, so sky-on-sky
   is unreadable. This matches the home hero's second headline half. */

.samples-index__empty {
  grid-column: 1 / -1;
  padding: 3rem 0;
  text-align: center;
}

/* Same card as the home page, just laid out flat instead of in a slider. */
.services-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.services-index__empty {
  grid-column: 1 / -1;
  padding: 3rem 0;
  text-align: center;
}

/* ============================================================
   BlueTech Legal / Editor Pages (privacy, terms, generic)
   ============================================================ */

.prose-content > :first-child {
  margin-top: 0;
}

.prose-content h2,
.prose-content h3,
.prose-content h4 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.prose-content p,
.prose-content li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-600);
}

.prose-content p {
  margin-bottom: var(--space-5);
}

.prose-content ul,
.prose-content ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.prose-content ul {
  list-style: disc;
}

.prose-content ol {
  list-style: decimal;
}

.prose-content li {
  margin-bottom: var(--space-2);
}

.prose-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose-content a:hover {
  color: var(--color-accent);
}

.prose-content strong {
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

/* ============================================================
   BlueTech Contact Page
   ============================================================ */

/* The form keeps its existing fields and light variant — it just sits centred
   in its own column rather than beside a photo. */
.contact-form-section__form {
  max-width: 760px;
  margin: 0 auto;
}

.contact-details__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.contact-details__card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background-color: var(--color-white);
  background-image: linear-gradient(150deg,
      rgb(var(--color-sky-rgb) / 14%) 0%,
      rgb(var(--color-sky-rgb) / 0%) 55%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.contact-details__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: var(--icon-lg);
  line-height: 1;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.contact-details__card:hover .contact-details__icon {
  color: var(--color-primary);
  background: var(--color-accent);
}

.contact-details__label {
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.contact-details__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  font-style: normal;
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
  word-break: break-word;
  transition: color var(--transition-fast);
}

a.contact-details__value:hover {
  color: var(--color-accent);
}

@media (max-width: 992px) {
  .contact-details__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ============================================================
   BlueTech Excellence Section
   ============================================================ */

.excellence__title-accent {
  color: var(--color-sky);
}

.excellence__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

/* Each point is a card with a soft sky wash falling away from the icon
   corner, so the row reads as a set rather than loose text. */
.excellence__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-8) var(--space-7);
  background-color: var(--color-white);
  background-image: linear-gradient(150deg,
      rgb(var(--color-sky-rgb) / 14%) 0%,
      rgb(var(--color-sky-rgb) / 0%) 55%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.excellence__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: var(--icon-xl);
  line-height: 1;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background-color var(--transition-base);
}

.excellence__item:hover .excellence__icon {
  color: var(--color-primary);
  background: var(--color-accent);
}

/* Short accent rule under the title that extends on hover. */
.excellence__item-title {
  position: relative;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.excellence__item-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.excellence__item:hover .excellence__item-title::after {
  width: 64px;
}

.excellence__item-text {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

@media (max-width: 992px) {

  .services-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .excellence__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .services-index__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BlueTech About Page
   ============================================================ */

/* ── Hero: copy top-aligned in its column, image on the right ── */

/* ── Intro: image left, copy right ── */
.about-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-intro__media {
  overflow: hidden;
  background: var(--color-accent-soft);
  border-radius: var(--radius-xl);
}

.about-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro__title-accent {
  display: block;
  color: var(--color-sky);
}

.about-intro__content p {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* ── Commitment cards ── */
/* Circular icon badge shared by the commitment and why-choose cards. */
.about-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-5);
  font-size: var(--icon-lg);
  line-height: 1;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
}

.about-commitment__title-accent,
.about-why__title-accent,
.about-expertise__title-accent {
  color: var(--color-sky);
}

.about-commitment__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.about-commitment__card {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.about-commitment__card-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.about-commitment__card-text {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

/* ── Stats band — full-bleed brand navy ── */
.about-stats {
  padding: var(--space-12) 0;
  background: var(--color-primary);
  color: var(--color-white);
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  text-align: center;
}

.about-stats__value {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fluid-stat);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-white);
}

.about-stats__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: rgb(var(--color-white-rgb) / 82%);
}

/* ── Expertise: copy left, percentage cards right ── */
.about-expertise__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-expertise__title {
  margin-top: var(--space-4);
}

.about-expertise__text {
  max-width: 500px;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.about-expertise__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

/* Soft blue-grey gradient, figures top-left with a rule under them. */
.about-expertise__card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(150deg,
      rgb(var(--color-sky-rgb) / 26%) 0%,
      rgb(var(--color-sky-rgb) / 10%) 45%,
      rgb(var(--color-white-rgb) / 65%) 100%);
  border-radius: var(--radius-xl);
}

.about-expertise__value {
  font-family: var(--font-body);
  font-size: var(--fluid-stat-sm);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-primary);
}

.about-expertise__rule {
  display: block;
  height: 1px;
  background: rgb(var(--color-primary-rgb) / 18%);
}

.about-expertise__label {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-primary);
}

/* ── Why choose ── */
.about-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.about-why__card {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* Even cards drop slightly, giving the staggered row from the design. */
.about-why__card:nth-child(even) {
  margin-top: var(--space-8);
}

.about-why__card-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--h4-size);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
}

.about-why__card-text {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-dark);
}

.about-why__actions {
  margin-top: var(--space-10);
  text-align: center;
}

@media (max-width: 992px) {
  .about-intro__layout,
  .about-expertise__layout {
    grid-template-columns: 1fr;
  }

  .about-intro__media {
    max-width: 420px;
  }

  .about-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The staggered offset only reads on the full four-across row. */
  .about-why__card:nth-child(even) {
    margin-top: 0;
  }

  .about-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .about-commitment__grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 575px) {
  .about-why__grid,
  .about-expertise__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   BlueTech Blog Listing Page
   ============================================================ */

/* ── Mobile filter dropdown ── */
.blog-filter-mobile {
  position: relative;
  /* No top margin: the section head's own spacing sits above it, exactly as it
     does above the desktop chip row. The bottom margin matches that row too. */
  margin-bottom: var(--space-8);
}

.blog-filter-mobile__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.blog-filter-mobile__select[aria-expanded="true"] {
  border-color: var(--color-accent);
}

.blog-filter-mobile__select i {
  color: var(--color-accent);
  transition: transform var(--transition-fast);
}

.blog-filter-mobile__select[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.blog-filter-mobile__options {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  left: 0;
  z-index: 50;
  /* It opens on top of the first card, so it has to read as a floating panel
     rather than merge into it. */
  max-height: 60vh;
  padding: var(--space-2);
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.blog-filter-mobile__option {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  text-align: left;
  color: var(--color-primary);
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.blog-filter-mobile__option:hover,
.blog-filter-mobile__option.active {
  background: var(--color-accent-soft);
}

.blog-filter-mobile__option.active {
  font-weight: var(--fw-semibold);
}

/* ── Card chrome: the feature and the grid cards are one object at two sizes.
      The image runs edge to edge and the card clips it, so the old inner
      padding and separately rounded thumbnail are gone. ── */
.blog-feature,
.blog-grid .blog-card {
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* ── Feature card: newest post, page one only ── */
.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}

.blog-feature__media {
  display: block;
  overflow: hidden;
}

.blog-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-feature:hover .blog-feature__media img {
  transform: scale(1.04);
}

.blog-feature__body {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 44px);
}

.blog-feature__title {
  margin-top: var(--space-5);
}

.blog-feature__title a {
  color: inherit;
  transition: color var(--transition-fast);
}

.blog-feature__title a:hover {
  color: var(--color-accent);
}

.blog-feature__text {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: rgb(var(--color-dark-rgb) / 70%);
}

/* Pinned to the bottom so the button lines up with the image edge. */
.blog-feature__cta {
  margin-top: auto;
  padding-top: var(--space-7);
}

/* ── Meta row, shared by both card sizes ── */
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.blog-meta__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-primary);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
}

.blog-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.blog-meta__date i {
  color: var(--color-accent);
}

/* ── Grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
  margin-top: clamp(16px, 2.2vw, 30px);
}

.blog-grid .blog-card {
  display: flex;
  flex-direction: column;
}

.blog-grid .blog-card__media,
.blog-grid .blog-card__media img {
  border-radius: 0;
}

.blog-grid .blog-card__media img {
  height: 216px;
  object-fit: cover;
}

.blog-grid .blog-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-6);
}

.blog-grid .blog-card__title {
  margin-top: var(--space-4);
}

.blog-grid .blog-card__text {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: rgb(var(--color-dark-rgb) / 70%);
}

/* Footer link with a circular arrow that fills on hover. */
.blog-grid .blog-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--icon-xs);
  color: var(--color-primary);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.blog-grid .blog-card__link:hover {
  color: var(--color-primary);
}

.blog-grid .blog-card__link:hover .card-arrow,
.sample-card__link:hover .card-arrow {
  color: var(--color-primary);
  background: var(--color-accent);
  transform: translateX(3px);
}

.related-posts .blog-grid {
  margin-top: var(--space-10);
}

.blog-grid__empty {
  grid-column: 1 / -1;
  padding: 3rem 0;
  text-align: center;
}

/* ── Blog listing responsive ── */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .blog-feature {
    grid-template-columns: 1fr;
  }

  .blog-feature__media img {
    height: 230px;
    min-height: 0;
  }
}

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

/* ============================================================
   BlueTech Pagination
   ============================================================ */

.bluetech-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-12);
}

/* The numbers sit in one soft rail; Prev/Next hang outside it as pills. */
.bluetech-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.bluetech-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-dark);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.bluetech-pagination__link:hover {
  color: var(--color-white);
  background: var(--color-dark);
}

.bluetech-pagination__link.is-active {
  color: var(--color-white);
  background: var(--color-dark);
  cursor: default;
}

/* Prev/Next read as outlined buttons rather than another number. */
.bluetech-pagination__link--nav {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.bluetech-pagination__link--nav:hover {
  color: var(--color-white);
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.bluetech-pagination__link--nav i {
  font-size: var(--icon-sm);
}

.bluetech-pagination__link.is-disabled {
  color: rgb(var(--color-dark-rgb) / 28%);
  background: transparent;
  border-color: rgb(var(--color-dark-rgb) / 18%);
  cursor: not-allowed;
  pointer-events: none;
}

.bluetech-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 44px;
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  color: rgb(var(--color-primary-rgb) / 45%);
}

.bluetech-pagination__summary {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.bluetech-pagination__summary strong {
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
}

@media (max-width: 575px) {
  .bluetech-pagination__list {
    gap: 6px;
  }

  .bluetech-pagination__link {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-base);
  }

  /* Arrows only — the Prev/Next words do not fit alongside the numbers. */
  .bluetech-pagination__label {
    display: none;
  }

  .bluetech-pagination__link--nav {
    min-width: 40px;
    padding: 0;
  }

  .bluetech-pagination__dots {
    min-width: 20px;
    height: 40px;
  }
}

/* ============================================================
   BlueTech Blog Detail (Individual Post)
   ============================================================ */

/* Hero */

/* ============================================================
   BlueTech Blog Detail
   ============================================================ */

/* Reading progress — a cyan hairline that fills across the top of the
   viewport as the article scrolls past. */
.read-progress {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 25;
  height: 3px;
  background: rgb(var(--color-primary-rgb) / 8%);
}

.read-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
}

/* ── Byline strip ── */
.blog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.blog-byline__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.blog-byline__avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-accent);
}

.blog-byline__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: var(--color-accent-soft);
}

.blog-byline__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-primary);
}

.blog-byline__role {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.blog-byline__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.blog-byline__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.blog-byline__facts i {
  color: var(--color-accent);
}

/* ── Layout: article left, sticky rail right ── */
.blog-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.blog-detail__main {
  min-width: 0;
}

.blog-detail__rail {
  position: sticky;
  top: 100px;
}

@media (max-width: 992px) {
  .blog-detail__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* A titled block inside the article column (FAQs, and anything like them). */
.blog-detail__block {
  margin-top: var(--space-12);
}

.blog-detail__block-title {
  margin-bottom: var(--space-6);
  font-size: var(--h3-size);
}

/* ── Standfirst ── */
.blog-detail__lead {
  margin-bottom: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--color-primary);
}

/* ── Table of contents: a card in the rail, numbered like a plan index ── */
.blog-toc {
  padding: var(--space-6);
  background: var(--color-primary-soft);
  border-radius: var(--radius-xl);
}

.blog-toc__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid rgb(var(--color-primary-rgb) / 14%);
}

.blog-toc__list {
  display: grid;
  gap: 2px;
}

.blog-toc__link {
  display: flex;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-gray-500);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.blog-toc__num {
  flex: 0 0 auto;
  font-weight: var(--fw-semibold);
  color: rgb(var(--color-primary-rgb) / 40%);
  transition: color var(--transition-fast);
}

.blog-toc__link:hover {
  color: var(--color-primary);
  background: rgb(var(--color-white-rgb) / 70%);
}

.blog-toc__link.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  background: var(--color-white);
}

.blog-toc__link.is-active .blog-toc__num {
  color: var(--color-accent);
}

/* ── Table of contents (mobile tabs) — sticks below the progress bar ── */
.blog-toc__tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 3px;
  z-index: 20;
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding-top: var(--space-3);
  background: var(--color-white);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.blog-toc__tabs::-webkit-scrollbar {
  display: none;
}

.blog-toc__tab {
  flex: 0 0 auto;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-gray-500);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blog-toc__tab.is-active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-color: var(--color-accent);
}

/* ── Share: sits inline in the byline strip, not in the rail ── */
.blog-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.blog-share__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.blog-share__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: var(--text-base);
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.blog-share__btn:hover,
.blog-share__btn.is-copied {
  color: var(--color-primary);
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.blog-share__btn--brand {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}

@media (max-width: 768px) {
  .blog-byline {
    gap: var(--space-5);
  }

  .blog-byline__facts {
    gap: var(--space-4);
  }
}
/* ── Article prose ──────────────────────────────────────────────────────
   Type sizes are unchanged; what is new is the decoration — a cyan marker
   above every H2, a cyan-ruled H3, a proper pull quote instead of a boxed
   one, cyan list bullets and a navy table head. */
.blog-article>*:first-child {
  margin-top: 0;
}

.blog-article p,
.blog-article li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--color-dark);
}

.blog-article p {
  margin-top: var(--space-4);
}

.blog-article h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--color-primary);
  scroll-margin-top: 110px;
}

.blog-article h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: var(--space-4);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.blog-article h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
  scroll-margin-top: 110px;
}

.blog-article ul,
.blog-article ol {
  margin-top: var(--space-4);
  padding-left: var(--space-6);
}

.blog-article ol {
  list-style: decimal;
}

.blog-article li {
  margin-top: var(--space-2);
}

.blog-article ul li {
  position: relative;
  list-style: none;
}

.blog-article ul li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: calc(-1 * var(--space-5));
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 50%;
}

.blog-article ol li::marker {
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}

.blog-article a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.blog-article a:hover {
  color: var(--color-accent);
}

.blog-article img {
  max-width: 100%;
  height: auto;
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* Pull quote: a cyan rule and an oversized quote mark, no surrounding box. */
.blog-article blockquote {
  position: relative;
  margin: var(--space-10) 0;
  padding: 0 0 0 var(--space-10);
  border-left: 3px solid var(--color-accent);
}

.blog-article blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.34em;
  left: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--display-sm);
  line-height: 1;
  color: rgb(var(--color-accent-rgb) / 55%);
}

.blog-article blockquote p {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--color-primary);
}

/* Wrapper added by initRichTables() around every editor table. A table is as
   wide as its columns need to be, so on a narrow screen it is swiped sideways
   rather than clipped. The table's own top margin moves here. */
.table-scroll {
  margin-top: var(--space-6);
  overflow-x: auto;
  /* Thin rail, as the coverage map uses, so the scrollbar reads as part of the
     page rather than a browser chrome bar across the table. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) var(--color-gray-100);
}

.table-scroll table {
  margin-top: 0;
}

.blog-article table,
.prose-content table,
.rich-text table,
.faq-item__panel table {
  width: 100%;
  margin-top: var(--space-6);
  overflow: hidden;
  border-collapse: collapse;
  border-radius: var(--radius-md);
}

.blog-article th,
.blog-article td,
.prose-content th,
.prose-content td,
.rich-text th,
.rich-text td,
.faq-item__panel th,
.faq-item__panel td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: left;
}

.blog-article th,
.prose-content th,
.rich-text th,
.faq-item__panel th {
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.blog-article tbody tr:nth-child(even),
.prose-content tbody tr:nth-child(even),
.rich-text tbody tr:nth-child(even),
.faq-item__panel tbody tr:nth-child(even) {
  background: var(--color-gray-100);
}
/* Post-article CTA box */
.blog-download-card {
  display: grid;
  grid-template-columns: minmax(220px, 40%) 1fr;
  overflow: hidden;
  margin-top: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
}

.blog-download-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 330px;
  padding: var(--space-6);
  background: rgb(var(--color-primary-rgb) / 82%);
}

.blog-download-card__visual img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
}

.blog-download-card__icon {
  font-size: var(--display-lg);
  color: var(--color-dark);
}

.blog-download-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 64px);
}

.blog-download-card__body h2 {
  max-width: 500px;
  font-family: var(--font-heading);
  font-size: var(--fluid-card-h2);
  line-height: 1.2;
  color: var(--color-primary);
}

.blog-download-card__body p {
  max-width: 510px;
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-dark);
}

.blog-download-card__button {
  align-self: flex-start;
  justify-self: start;
  margin-top: var(--space-6);
}

.blog-download-form {
  display: grid;
  gap: 16px;
  max-width: 430px;
  margin-top: var(--space-6);
}

.blog-download-form[hidden] { display: none; }

.blog-download-card [hidden] { display: none !important; }

.blog-download-form .form-input {
  width: 100%;
  min-height: 50px;
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.blog-download-form .form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / 25%);
}

.blog-download-form .iti,
.blog-download-form .iti input {
  display: block;
  width: 100%;
}

.blog-download-form .field-error { display: block; margin-top: 4px; }

/* The same navy CTA panel as the rest of the site, sized to sit inside the
   article column. Its heading is an h3 so it stays on the global type scale. */
.plans-cta__shell--inline {
  min-height: 0;
  margin-top: var(--space-12);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 44px);
  text-align: center;
}

.plans-cta__inline-title {
  max-width: 560px;
  color: var(--color-white);
}

.blog-article--bottom {
  margin-top: var(--space-10);
}

/* ── Author card: avatar beside the copy, on the pale navy wash ── */
.blog-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: var(--space-12);
  padding: clamp(24px, 3.2vw, 40px);
  background: var(--color-primary-soft);
  border-radius: var(--radius-2xl);
}

.blog-author__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-accent);
}

.blog-author__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: var(--color-white);
}

.blog-author__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.blog-author__name {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-primary);
}

.blog-author__role {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
}

.blog-author__bio {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--color-dark);
}

.blog-author__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.blog-author__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast);
}

.blog-author__contact a:hover {
  background: var(--color-accent);
}

.blog-author__contact i {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.blog-author__contact a:hover i {
  color: var(--color-primary);
}

@media (max-width: 575px) {
  .blog-author {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}
@media (max-width: 768px) {
  .blog-download-card { grid-template-columns: 1fr; }
  .blog-download-card__visual { min-height: 220px; max-height: 300px; }
  .blog-download-card__body { padding: 28px 22px; }
  .blog-download-card__body p { font-size: var(--text-md); }

  .blog-detail__lead {
    font-size: var(--text-md);
  }

  .blog-article h2 {
    font-size: var(--text-2xl);
    scroll-margin-top: 88px;
  }

  .blog-article h3 {
    font-size: var(--text-lg);
    scroll-margin-top: 88px;
  }
}

/* ============================================================
   BlueTech Contact Section
   ============================================================ */

/* ── Light form variant (white bordered card — contact page) ── */
.appointment-card--light {
  color: var(--color-dark);
  background: var(--color-white);
}

.appointment-card--light .form-label {
  color: var(--color-dark);
}

.appointment-card--light .form-input,
.appointment-card--light .appointment-card__upload,
.appointment-card--light .appointment-card__phone {
  border: 1px solid var(--color-border) !important;
  background: var(--color-white);
}

.appointment-card--light .appointment-card__upload-text {
  color: var(--color-gray-400);
}

/* Compact left-aligned accent button (not full width) */
.appointment-card--light .appointment-card__submit {
  display: inline-flex;
  width: auto;
  min-width: 160px;
  align-self: flex-start;
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

/* At 991px the form takes the full width and the image is hidden
   (instead of stacking below the form) */
/* ============================================================
   BlueTech Footer
   ============================================================ */

/* Full-bleed brand-navy block — the .container inside keeps the columns
   aligned with the rest of the page while the background runs edge to edge. */
/* No top margin — the last section's padding-bottom already spaces it. */
.site-footer {
  padding: 87px 0 var(--space-12);
  background: var(--color-primary);
  color: var(--color-white);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(140px, 0.9fr) minmax(160px, 0.9fr) minmax(210px, 1fr);
  column-gap: var(--space-16);
  row-gap: var(--space-12);
  align-items: start;
}

.site-footer__brand {
  display: inline-flex;
  margin-bottom: var(--space-5);
}

.site-footer__brand img {
  width: 110px;
  height: auto;
}

.site-footer__about {
  max-width: 340px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 26px;
  color: rgb(var(--color-white-rgb) / 82%);
}

.site-footer__column {
  min-width: 0;
}

.site-footer__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-white);
}

.site-footer__links {
  display: grid;
  gap: var(--space-2);
}

.site-footer__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: 26px;
  color: rgb(var(--color-white-rgb) / 82%);
  word-break: break-word;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.site-footer__link:hover,
.site-footer__link.active {
  color: var(--color-accent);
  transform: translateX(3px);
}

/* ── Contact column ──
   Serif label over an Inter value, repeated per contact method. */
.site-footer__contact {
  display: grid;
  gap: var(--space-4);
}

.site-footer__contact-label {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: 25px;
  color: var(--color-white);
}

.site-footer__contact-value {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 26px;
  color: rgb(var(--color-white-rgb) / 82%);
  word-break: break-word;
}

.site-footer__contact-value--link {
  transition: color var(--transition-fast);
}

.site-footer__contact-value--link:hover {
  color: var(--color-accent);
}

/* ── Bottom bar (copyright + socials) ── */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-14);
  padding-top: var(--space-6);
  border-top: 1px solid rgb(var(--color-white-rgb) / 15%);
}

/* The copyright is editor HTML, so force the colour onto whatever it wraps. */
.site-footer__copyright,
.site-footer__copyright * {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: rgb(var(--color-white-rgb) / 70%);
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--color-white);
  background: transparent;
  border: 1px solid rgb(var(--color-white-rgb) / 30%);
  border-radius: var(--radius-pill);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.site-footer__social i {
  font-size: var(--text-md);
  line-height: 1;
}

.site-footer__social:hover,
.site-footer__social.active {
  color: var(--color-primary);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

@media (max-width: 1180px) {
  .site-header__bar {
    gap: 16px;
  }

  .site-header__nav-list {
    gap: var(--space-2);
  }

  .site-header__nav-link {
    padding-left: 6px;
    padding-right: 6px;
    font-size: var(--text-base);
  }

  .site-header__actions {
    margin-left: 0;
  }

  /* Drive the logo through the token so --header-height follows it. */
  :root {
    --header-logo-size: 72px;
  }

  .hero__grid {
    gap: clamp(24px, 4vw, 52px);
  }

  .hero__lead {
    font-size: var(--text-lg);
  }

  .appointment-card {
    min-height: 400px;
    padding: 30px 45px;
  }

  .appointment-card__header .heading {
    font-size: var(--text-2xl);
  }

  .appointment-card .form-input,
  .appointment-card__upload,
  .appointment-card__phone,
  .appointment-card__phone .form-input {
    min-height: 45px;
  }

  .site-footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
  }

  .site-footer__brand-block {
    grid-column: 1 / -1;
  }

  .trades-slider__slide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    width: 100%;
    justify-self: center;
  }

  /* Same gap the track actually uses, or the pair overflows the viewport. */
  .reviews-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

  .reviews-slider__arrow {
    display: none !important;
  }

  /* The dots take over from here down. */
  .reviews-slider__dots {
    display: flex;
  }

  .expert-contact__layout {
    grid-template-columns: minmax(260px, 300px) minmax(300px, 1fr);
  }

  .blog-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

  .blog-slider__dots {
    display: flex;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-logo-size: 68px;
  }
}

@media (max-width: 992px) {

 
  .site-header__nav.hide-mobile,
  .site-header__actions .btn.hide-mobile {
    display: none !important;
  }

  .site-header__mobile-toggle.hide-desktop {
    display: inline-flex !important;
  }

  .site-header__overlay.hide-desktop,
  .mobile-menu.hide-desktop {
    display: block !important;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .site-header__mega,
  .site-header__dropdown {
    display: none !important;
  }

  /* Even columns: the headline column gives up the share it has on a desktop. */
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .appointment-card {
    min-height: 452px;
    padding: 37px 63px;
  }

}

@media (max-width: 768px) {
  /* Token-driven so --header-height stays exact on tablet. */
  :root {
    --header-pad-y: 12px;
  }

  .section-frame1,
  .section-frame2 {
    padding: 30px 20px;
  }

  :root {
    --header-logo-size: 68px;
  }

  .site-header__actions {
    gap: 0 !important;
  }

  .hero {
    padding-top: calc(var(--header-height) + var(--space-4));
    padding-bottom: var(--space-12);
  }

  /* Now stack it: copy first, image centred beneath. */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero__media {
    justify-self: center;
  }

  .hero__content {
    max-width: none;
    padding: 0;
  }

  .hero__lead {
    margin-top: var(--space-5);
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
  }

  .about-section__body p {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
  }

  .hero__cta {
    margin-top: var(--space-6);
  }

  .appointment-card {
    min-height: 395px;
    padding: 50px 30px;
  }

  .appointment-card__header {
    margin-bottom: var(--space-5);
  }

  .appointment-card__header .heading {
    font-size: var(--text-lg);
    line-height: var(--lh-snug);
  }

  .appointment-card__header .text,
  .appointment-card .form-label {
    font-size: var(--text-base);
    line-height: 24.3px;
  }

  .appointment-card__fields {
    gap: var(--space-3);
  }

  .appointment-card__field-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .appointment-card .form-input,
  .appointment-card__upload,
  .appointment-card__phone,
  .appointment-card__phone .form-input {
    min-height: 38px;
  }

  .appointment-card .form-input,
  .appointment-card__upload {
    font-size: var(--text-base);
  }

  .appointment-card__submit {
    min-width: 115px;
    margin-top: var(--space-5);
  }

  .section-header {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .section-header__title {
    max-width: none;
  }

  .home-who-section__shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .home-who-section__point {
    font-size: var(--text-base);
  }

  /* Stack the photo above the copy. */
  .about-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-section__media {
    max-width: 420px;
    margin-inline: auto;
  }

  .about-section__body {
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  /* dropdown stays absolutely positioned — don't override to static */

  .trades-slider {
    margin-top: calc(var(--space-6) - var(--slider-bleed));
  }

  /* One trade per row on a phone, like every other card grid. */
  .trades-slider__slide {
    grid-template-columns: minmax(0, 1fr);
  }

  .trades-card {
    min-height: auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .trades-card__icon {
    width: 38px;
    min-height: 38px;
    margin-bottom: var(--space-3);
    font-size: var(--icon-2xl);
  }

  .trades-card p {
    font-size: var(--text-base);
  }

  .trades-card__link {
    font-size: var(--text-base);
  }

  .trades-slider__pagination {
    margin-top: var(--space-6);
  }

  .plans-cta__shell {
    min-height: 217px;
    padding: 28px var(--space-5) 25px;
    background-position: center bottom;
  }

  .plans-cta__shell h2 {
    font-size: var(--text-lg);
    line-height: var(--lh-snug);
  }

  .plans-cta__shell p {
    margin-top: var(--space-3);
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
  }

  .plans-cta__button {
    margin-top: var(--space-3);
  }

  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .process-step {
    min-height: 128px;
    gap: var(--space-4);
    --step-pad-y: var(--space-5);
    padding: var(--step-pad-y) var(--space-6);
  }

  /* The card is far shorter here, so the numeral sits in the middle of it
     rather than hanging off the bottom edge. */
  .process-step__number {
    align-self: center;
    margin-bottom: 0;
    font-size: 120px;
  }

  /* Stack the intro above the cards, one card per view. minmax(0, …), not a
     bare 1fr: 1fr means minmax(auto, 1fr), so the track grows to the slider's
     min-content and pushes it out of the container. */
  .reviews-section__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .reviews-slider__track {
    gap: var(--space-4);
  }

  .reviews-card {
    flex-basis: 100%;
  }

  .sample-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .expert-contact__layout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: none;
    margin-top: var(--space-5);
  }

  .expert-contact__photo {
    width: min(100%, 360px);
    margin: 0 auto;
  }

  .expert-contact__card {
    margin-left: 0;
    padding: 26px 22px 24px;
  }

  .expert-contact__subtitle {
    font-size: var(--text-md);
  }

  .expert-contact__bio {
    margin-top: var(--space-5);
    font-size: var(--text-base);
  }

  .expert-contact__socials {
    margin-top: var(--space-5);
    gap: var(--space-3);
  }

  .expert-contact__social {
    width: 34px;
    height: 34px;
  }

  .blog-slider {
    margin-top: var(--space-5);
  }

  .blog-slider__track {
    gap: var(--space-5);
  }

  .blog-card {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

  .blog-card__content {
    padding-top: var(--space-4);
  }

  .blog-card__title {
    font-size: var(--text-md);
    line-height: 1.6;
  }

  .blog-slider__dots {
    display: flex;
  }

  .faq-list {
    margin-top: var(--space-5);
    gap: 14px;
  }

  .faq-item__toggle {
    padding: 22px 18px;
  }

  .faq-item__question {
    font-size: var(--text-md);
  }

  .faq-item__panel {
    padding: 0 18px 22px;
  }

  .faq-item__panel p {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
  }

  .site-footer {
    padding: var(--space-12) 0 var(--space-8);
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-10);
  }

  .site-footer__brand-block,
  .site-footer__column--contact {
    grid-column: 1 / -1;
  }

  .site-footer__about {
    max-width: none;
  }

  .site-footer__title {
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
  }

  .site-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-5);
    margin-top: var(--space-10);
  }

  .site-footer__social {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 575px) {

  .section-frame1,
  .section-frame2 {
    padding: 0;
    border: none;
  }

  .sample-grid {
    grid-template-columns: 1fr;
  }

  .blog-slider__track {
    gap: 0;
  }

  .blog-card {
    flex-basis: 100%;
  }
}

@media (min-width: 993px) {

  .site-header__mobile-toggle.hide-desktop,
  .site-header__overlay.hide-desktop,
  .mobile-menu.hide-desktop {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .process-steps {
    gap: var(--space-4);
  }

  .process-step {
    min-height: 0;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .process-step__number {
    font-size: 88px;
  }
}

/* ============================================================
   Promotion Popup (dashboard-controlled)
   Managed from Filament → Settings → Promotion Popup.
   Opens via initPromoPopup() in main.js.
   ============================================================ */

.bluetech-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bluetech-modal[hidden] {
  display: none;
}

/* Page scroll is locked while the popup is open */
body.bluetech-modal-open {
  overflow: hidden;
}

.bluetech-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--color-dark-rgb) / 55%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bluetech-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  max-height: min(92vh, 780px);
  overflow: hidden;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  outline: none;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bluetech-modal.is-open .bluetech-modal__overlay {
  opacity: 1;
}

.bluetech-modal.is-open .bluetech-modal__dialog {
  opacity: 1;
  transform: none;
}

/* ── Close button ── */
.bluetech-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--color-white-rgb) / 16%);
  color: var(--color-white);
  font-size: var(--icon-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-base);
}

.bluetech-modal__close:hover,
.bluetech-modal__close:focus-visible {
  background: rgb(var(--color-white-rgb) / 30%);
  transform: rotate(90deg);
}

/* ── Blue hero band ── */
.bluetech-modal__hero {
  position: relative;
  padding: 36px 36px 28px;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgb(255 255 255 / 10%), transparent 55%),
    radial-gradient(ellipse at bottom right, rgb(0 0 0 / 20%), transparent 60%),
    linear-gradient(135deg, #10639f 0%, var(--color-primary) 45%, #073e6b 100%);
}

/* Decorative rings — subtle depth, matching the brand blue */
.bluetech-modal__hero::before {
  content: "";
  position: absolute;
  top: -70px;
  left: -55px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 24px solid rgb(255 255 255 / 7%);
}

.bluetech-modal__hero::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgb(255 255 255 / 6%);
}

.bluetech-modal__hero > * {
  position: relative;
  z-index: 1;
}

.bluetech-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgb(var(--color-accent-rgb) / 40%);
}

.bluetech-modal__badge i {
  font-size: var(--icon-xs);
}

.bluetech-modal__heading {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
}

.bluetech-modal__sub {
  max-width: 380px;
  margin: 8px auto 0;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: rgb(var(--color-white-rgb) / 85%);
}

/* ── White body ── */
.bluetech-modal__body {
  padding: 22px 36px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Price line: "Starts at  ~~$99~~  Now  $49" ── */
.bluetech-modal__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 18px;
  font-family: var(--font-heading);
  line-height: 1;
}

.bluetech-modal__price-label {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-500);
}

.bluetech-modal__price-was {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-gray-400);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent);
}

.bluetech-modal__price-now {
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
}

/* ── Popup form variant (borderless white layout) ── */
.appointment-card--bluetech-modal {
  min-height: 0;
  height: auto;
  padding: 0;
  color: var(--color-dark);
  border-radius: 0;
}

.appointment-card--bluetech-modal .form-label {
  color: var(--color-dark-soft);
}

.appointment-card--bluetech-modal .form-input,
.appointment-card--bluetech-modal .appointment-card__upload,
.appointment-card--bluetech-modal .appointment-card__phone {
  border: 1px solid var(--color-gray-200) !important;
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.appointment-card--bluetech-modal .appointment-card__upload-text {
  color: var(--color-gray-400);
}

.appointment-card--bluetech-modal .appointment-card__submit {
  width: 100%;
  margin-top: var(--space-4);
  box-shadow: 0 10px 24px rgb(var(--color-accent-rgb) / 28%);
}

.appointment-card--bluetech-modal .appointment-card__submit:hover,
.appointment-card--bluetech-modal .appointment-card__submit:focus-visible {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ── Footer note ── */
.bluetech-modal__note {
  margin-top: 14px;
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-gray-500);
}

.bluetech-modal__note a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 600px) {
  .bluetech-modal {
    padding: 0;
    align-items: flex-end;
  }

  .bluetech-modal__dialog {
    max-width: none;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }

  .bluetech-modal.is-open .bluetech-modal__dialog {
    transform: none;
  }

  .bluetech-modal__hero {
    padding: 30px 22px 22px;
  }

  .bluetech-modal__heading {
    font-size: var(--text-3xl);
  }

  .bluetech-modal__sub {
    font-size: var(--text-base);
  }

  .bluetech-modal__body {
    padding: 18px 20px 24px;
  }

  .bluetech-modal__price-now {
    font-size: var(--text-4xl);
  }

  /* Email + Upload stack into one column inside the popup */
  .appointment-card--bluetech-modal .appointment-card__field-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bluetech-modal__overlay,
  .bluetech-modal__dialog,
  .bluetech-modal__close {
    transition: none;
  }
}

/* ============================================================
   Promotion Bar + Countdown Timers (dashboard-controlled)
   Managed from Filament → Settings → Promotion Popup.
   ============================================================ */

.bluetech-bar {
  position: relative;
  z-index: 900;
  color: var(--color-white);
  background:
    radial-gradient(ellipse at top left, rgb(255 255 255 / 8%), transparent 55%),
    linear-gradient(90deg, #073e6b 0%, var(--color-primary) 50%, #073e6b 100%);
}

.bluetech-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 9px 20px;
}

.bluetech-bar__text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--color-white); /* global p color would otherwise win over inheritance */
}

.bluetech-bar__text i {
  color: #FFB84D;
  font-size: var(--icon-sm);
  flex: 0 0 auto;
}

/* ── Countdown (bar) ── */
.bluetech-bar__timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bluetech-bar__timer-label {
  margin-right: 4px;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(var(--color-white-rgb) / 75%);
}

.bluetech-bar__timer-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  padding: 3px 5px 2px;
  background: rgb(var(--color-white-rgb) / 12%);
  border: 1px solid rgb(var(--color-white-rgb) / 18%);
  border-radius: 6px;
  line-height: 1;
}

.bluetech-bar__timer-box b {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.bluetech-bar__timer-box small {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgb(var(--color-white-rgb) / 70%);
}

.bluetech-bar__timer-sep {
  font-weight: var(--fw-bold);
  color: rgb(var(--color-white-rgb) / 55%);
}

/* ── CTA button ── */
.bluetech-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  background: var(--color-accent);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgb(var(--color-accent-rgb) / 35%);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.bluetech-bar__cta:hover,
.bluetech-bar__cta:focus-visible {
  color: var(--color-white);
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.bluetech-bar__cta i {
  font-size: var(--icon-xs);
}

/* ── Countdown (inside popup hero) ── */
.bluetech-modal__timer {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  background: rgb(0 0 0 / 20%);
  border: 1px solid rgb(var(--color-white-rgb) / 14%);
  border-radius: 12px;
}

.bluetech-modal__timer-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(var(--color-white-rgb) / 80%);
}

.bluetech-modal__timer-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 4px 6px 3px;
  background: rgb(var(--color-white-rgb) / 12%);
  border-radius: 7px;
  line-height: 1;
}

.bluetech-modal__timer-box b {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

.bluetech-modal__timer-box small {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgb(var(--color-white-rgb) / 70%);
}

/* Countdown reached zero → hidden by JS */
[data-countdown].is-expired {
  display: none;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .bluetech-bar__inner {
    padding: 8px 14px;
    gap: 6px 12px;
  }

  .bluetech-bar__text {
    font-size: var(--text-base);
  }

  .bluetech-bar__timer-label {
    display: none;
  }

  .bluetech-bar__timer-box {
    min-width: 30px;
  }

  .bluetech-bar__timer-box b {
    font-size: var(--text-base);
  }

  .bluetech-bar__cta {
    padding: 6px 14px;
    font-size: var(--text-sm);
  }
}

@media (max-width: 600px) {
  .bluetech-modal__timer {
    gap: 5px;
    padding: 7px 10px;
  }

  .bluetech-modal__timer-label {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }

  .bluetech-modal__timer-box {
    min-width: 34px;
  }

  .bluetech-modal__timer-box b {
    font-size: var(--text-base);
  }
}