/*
 * ConAir Extract Solutions — Custom Theme Stylesheet
 * All hand-crafted CSS extracted from the original static site.
 * Utility classes (max-w-*, grid, flex, etc.) are provided by Tailwind CSS (loaded separately).
 */

/* ────────────────────────────────────────────────────────────────
   1.  RESET & BASE
   ──────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  background: #0c0c0c;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #ffffff;
}

/* No default underline anywhere — buttons, nav, and pill-style contact
   links (.contact-link) stay clean; genuine inline text links get an
   animated underline instead (below). */
a {
  text-decoration: none;
}

/* Animated underline for genuine inline text links only — i.e. links that
   appear as part of a sentence (wp:paragraph → <p>) or inside real post
   content (list items included). Buttons, nav/breadcrumb links, and the
   card-style links generated in inc/seed-content.php are deliberately not
   <p>-wrapped, so they're untouched by this without needing per-component
   exclusion classes. .contact-link (pill-style phone links that sometimes
   sit inline in a sentence) is excluded since it's a button, not prose. */
p a:not(.contact-link),
.wp-block-post-content li a:not(.contact-link) {
  position: relative;
}

p a:not(.contact-link)::after,
.wp-block-post-content li a:not(.contact-link)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

p a:not(.contact-link):hover::after,
.wp-block-post-content li a:not(.contact-link):hover::after {
  transform: scaleX(1);
}

/* ────────────────────────────────────────────────────────────────
   2.  ACCESSIBILITY
   ──────────────────────────────────────────────────────────────── */

/* WCAG 2.4.1 — Skip navigation */
.skip-link {
  position: absolute;
  top: -999px;
  left: 1rem;
  z-index: 10000;
  background: #00b4a2;
  color: #0c0c0c;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* WCAG 2.4.7 / 2.4.11 — Global focus ring */
:focus-visible {
  outline: 3px solid #00b4a2;
  outline-offset: 3px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
  text-decoration: none;
}

/* WCAG 2.4.11 — Scroll margin so sticky nav never obscures focused anchors */
[id] {
  scroll-margin-top: 100px;
}

/* Visually hidden (screen-reader only) */
.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;
}

/* WCAG 2.3.3 — Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   3.  LAYOUT HELPERS
   ──────────────────────────────────────────────────────────────── */

/* Subtle dot-grid on dark sections */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Hero section background. The photo layer reads a CSS custom property so it
   can be swapped from wp-admin (Customizer → Hero Section) without a code
   deploy — see inc/customizer.php, which sets --hero-bg-image on :root via a
   tiny inline <style> in wp_head(). Deliberately NOT declared on .hero-bg
   itself — a var set directly on this element would always win over the
   :root value it's meant to inherit, silently ignoring the Customizer.
   The url() below is only the fallback for the (expected-unreachable) case
   where wp_head's inline style didn't run. Gradient/sizing stay here as the
   single source of truth for the visual design. */
.hero-bg {
  background:
    linear-gradient(
      135deg,
      rgba(12, 12, 12, 0.96) 0%,
      rgba(20, 20, 20, 0.88) 50%,
      rgba(0, 100, 92, 0.12) 100%
    ),
    var(--hero-bg-image, url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80')) center / cover no-repeat;
}

/* Service page hero — optional per-page Featured Image, styled to match
   .hero-bg above (same gradient) rather than sharing the site-wide
   --hero-bg-image var, since each service page needs its own photo.
   functions.php only adds .has-service-hero-image to <body> and sets
   --service-hero-image when the current service page actually has a
   Featured Image, so pages without one keep the plain #0c0c0c hero
   (inline style on .service-hero) — hence !important here to win over
   that inline background-color. */
.has-service-hero-image .service-hero {
  background:
    linear-gradient(
      135deg,
      rgba(12, 12, 12, 0.96) 0%,
      rgba(20, 20, 20, 0.88) 50%,
      rgba(0, 100, 92, 0.12) 100%
    ),
    var(--service-hero-image) center / cover no-repeat !important;
}

/* Area page hero — identical treatment to .has-service-hero-image above,
   scoped to page-area's .area-hero/--area-hero-image instead so an area
   page's Featured Image never leaks onto a service page or vice versa. */
.has-area-hero-image .area-hero {
  background:
    linear-gradient(
      135deg,
      rgba(12, 12, 12, 0.96) 0%,
      rgba(20, 20, 20, 0.88) 50%,
      rgba(0, 100, 92, 0.12) 100%
    ),
    var(--area-hero-image) center / cover no-repeat !important;
}

/* ────────────────────────────────────────────────────────────────
   4.  DESIGN TOKENS (utility classes)
   ──────────────────────────────────────────────────────────────── */

.sep {
  width: 48px;
  height: 3px;
  background: #00b4a2;
  border-radius: 2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 180, 162, 0.1);
  border: 1px solid rgba(0, 180, 162, 0.35);
  color: #00b4a2;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-num {
  background: linear-gradient(135deg, #ffffff 30%, #00b4a2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ────────────────────────────────────────────────────────────────
   5.  NAVIGATION
   ──────────────────────────────────────────────────────────────── */

/* Logo sizing — stepped down at breakpoints */
.logo-wrap img {
  display: block;
  width: auto;
  max-height: 100px;
  height: auto;
}

@media (max-width: 1024px) {
  .logo-wrap img { max-height: 72px; }
}

@media (max-width: 640px) {
  .logo-wrap img { max-height: 52px; }
}

@media (max-width: 420px) {
  .logo-wrap img { max-height: 44px; }
}

/* Footer logo */
.footer-logo {
  display: block;
  width: auto;
  max-height: 50px;
  height: auto;
}

@media (max-width: 640px) {
  .footer-logo { max-height: 32px; }
}

/* Contact links — uniform pill style for phone/mobile numbers */
.contact-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.6rem;
  background: #1c1c1c !important;
  border: 1px solid #3a3a3a !important;
  color: #d4d4d4 !important;
  font-weight: 600;
  text-decoration: none !important;
}

.contact-link svg {
  color: #00b4a2 !important;
}

/* Mobile menu — animated max-height slide */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu.open {
  max-height: 500px;
}

/* ────────────────────────────────────────────────────────────────
   6.  CARDS
   ──────────────────────────────────────────────────────────────── */

.glow-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.glow-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 180, 162, 0.4);
  border-color: rgba(0, 180, 162, 0.4) !important;
}

/* Check icon inside list items */
.check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 180, 162, 0.15);
}

.check-icon svg {
  width: 11px;
  height: 11px;
  color: #00b4a2;
}

/* ────────────────────────────────────────────────────────────────
   7.  BUTTONS
   ──────────────────────────────────────────────────────────────── */

.btn-teal {
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.btn-teal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-teal:hover::before {
  opacity: 1;
}

.btn-teal:hover {
  box-shadow: 0 0 24px rgba(0, 180, 162, 0.4);
}

/* ────────────────────────────────────────────────────────────────
   8.  FORM FIELDS
   ──────────────────────────────────────────────────────────────── */

/* #626262 border on #141414 bg = 3.02:1 contrast ratio ✓ */
.field {
  width: 100%;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  color: #ffffff;
  background: #1c1c1c;
  border: 1.5px solid #626262;
  outline: none;
  min-height: 44px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field::placeholder {
  color: #7a7a7a;
}

.field:focus-visible {
  outline: none;
  border-color: #00b4a2;
  box-shadow: 0 0 0 3px rgba(0, 180, 162, 0.35);
}

select.field {
  color: #d4d4d4;
}

/* ────────────────────────────────────────────────────────────────
   9.  BEFORE / AFTER SLIDER
   ──────────────────────────────────────────────────────────────── */

.ba-container {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}

.ba-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #00b4a2;
  z-index: 10;
  transform: translateX(-50%);
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: #00b4a2;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 180, 162, 0.25), 0 4px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-handle::before,
.ba-handle::after {
  content: '';
  width: 0;
  height: 0;
}

.ba-handle::before {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #0c0c0c;
  margin-right: 3px;
}

.ba-handle::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #0c0c0c;
  margin-left: 3px;
}

.ba-label {
  position: absolute;
  bottom: 14px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ba-label-before {
  left: 14px;
}

/* #00b4a2 on near-black bg = 7.5:1 contrast ✓ */
.ba-label-after {
  right: 14px;
  color: #00b4a2;
  border-color: rgba(0, 180, 162, 0.5);
}

/* Placeholder images — replace with real Media Library images in WP */
.before-img {
  background:
    linear-gradient(rgba(30, 20, 10, 0.5) 0%, rgba(0, 0, 0, 0.1) 50%),
    url('https://images.unsplash.com/photo-1556909172-54557c7e4fb7?w=900&q=80') center / cover no-repeat;
  width: 100%;
  height: 100%;
}

.after-img {
  background:
    linear-gradient(rgba(0, 30, 28, 0.35) 0%, rgba(0, 0, 0, 0.05) 50%),
    url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=900&q=80') center / cover no-repeat;
  width: 100%;
  height: 100%;
}

/* ────────────────────────────────────────────────────────────────
   10. SCROLL REVEAL ANIMATION
   ──────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ────────────────────────────────────────────────────────────────
   11. FAN LOGO ANIMATION
   ──────────────────────────────────────────────────────────────── */

/* (Above this line: all hand-crafted CSS. Below: WP block overrides.) */

/* ────────────────────────────────────────────────────────────────
   12. WORDPRESS NAVIGATION BLOCK — mobile overlay theming
   ──────────────────────────────────────────────────────────────── */

/* Strip WP's default white nav background */
.wp-block-navigation {
  --nav-foreground-color: #9a9a9a;
}

/* WP core hides the mobile overlay by default until .is-menu-open is added,
   but the Tailwind CDN's Preflight reset (loaded after WP core CSS) overrides
   that default, leaving the overlay permanently visible. Restore it explicitly.
   Scoped to mobile only — the desktop breakpoint below shows the container
   unconditionally, and since :not(.is-menu-open) has higher specificity
   (0,2,0) than a bare class selector (0,1,0), an unscoped version of this
   rule would beat the desktop show rule at every width despite !important
   on both and despite coming first in source order. Splitting by breakpoint
   means the two rules never compete on specificity at all. */
@media (max-width: 767.98px) {
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

.wp-block-navigation .wp-block-navigation-item__content {
  color: #9a9a9a;
  transition: color 0.15s;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
  color: #ffffff;
}

/* Top-level menu items were only 0.1rem apart (a blockGap value set on the
   Navigation block itself when its menu was assigned via the Site Editor —
   that's a per-instance customization stored in the database, not something
   editable in this theme file, so it's overridden here via CSS instead using
   WP core's own stable classnames). Direct-child selector keeps this to
   top-level items only, leaving dropdown item spacing untouched. */
.wp-block-navigation__container > .wp-block-navigation-item {
  margin-right: 1.4rem;
}

.wp-block-navigation__container > .wp-block-navigation-item:last-child {
  margin-right: 0;
}

/* Separate the menu from the phone/quote cluster, and the phone numbers
   from the CTA button, rather than everything reading as one dense strip. */
.conair-nav-group {
  gap: 1.75rem !important;
}

.conair-header-contacts .btn-teal {
  margin-left: 1rem !important;
}

/* Hamburger / close icon button */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: #ffffff !important;
  background: #1c1c1c !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 0.5rem !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* WP core never defines a "show inline on desktop, collapse to hamburger below
   this width" breakpoint itself — that's left entirely to the theme. Without it,
   core CSS unconditionally hides .wp-block-navigation__responsive-container and
   unconditionally shows the hamburger button at every viewport width. Matches the
   md: (768px) breakpoint already used elsewhere in this theme's markup. */
@media (min-width: 768px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    padding: 0 !important;
  }
}

/* Mobile overlay panel */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: #0f0f0f !important;
  padding: 1.5rem 1rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  padding-top: 0.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #9a9a9a !important;
  font-size: 1rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  display: block !important;
  width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Footer nav link styles */
.footer-services-nav .wp-block-navigation-item__content,
.footer-areas-nav .wp-block-navigation-item__content,
.footer-legal-nav .wp-block-navigation-item__content {
  color: #9a9a9a !important;
  font-size: 0.875rem !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.footer-services-nav .wp-block-navigation-item__content:hover,
.footer-areas-nav .wp-block-navigation-item__content:hover,
.footer-legal-nav .wp-block-navigation-item__content:hover {
  color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────────
   13. WORDPRESS SITE LOGO BLOCK
   ──────────────────────────────────────────────────────────────── */

.wp-block-site-logo img {
  display: block;
  width: auto;
  max-height: 100px;
  height: auto;
}

.wp-block-site-logo.footer-logo img {
  max-height: 50px;
}

@media (max-width: 1024px) {
  .wp-block-site-logo img { max-height: 72px; }
}

@media (max-width: 640px) {
  .wp-block-site-logo img { max-height: 52px; }
  .wp-block-site-logo.footer-logo img { max-height: 32px; }
}

@media (max-width: 420px) {
  .wp-block-site-logo img { max-height: 44px; }
}

/* Sticky header override — WP uses position:sticky via block styles.
   Sticky must be applied to WP's auto-generated template-part wrapper
   (header.wp-block-template-part), not the inner .conair-site-header —
   a sticky element can't stick past its immediate parent's box, and that
   wrapper's height exactly matches the header's, leaving no room to stick.
   Kept as its own rule (not combined with .conair-site-header below) —
   an earlier version shared one declaration block across both selectors,
   which applied the same side padding twice (wrapper AND header), each
   inset by the full calc() amount, over-indenting the logo/nav row. */
header.wp-block-template-part:has(.conair-site-header) {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

/* Caps the header's content row (logo + nav) at 1152px, matching max-w-6xl
   used elsewhere on the site, while .conair-site-header's own
   background-color/border-bottom stay full-bleed — only its padding is
   constrained, not its width. The live header markup applies padding
   directly on .conair-site-header (its inner max-w-6xl/mx-auto wrapper
   from parts/header.html isn't actually present in the rendered page —
   this template part has drifted from the repo), so the constraint is
   done as calculated side padding rather than a max-width + margin:auto
   wrapper, and !important is needed to beat that inline padding. */
.conair-site-header {
  width: 100% !important;
  padding-left: max(1.5rem, calc((100% - 1152px) / 2)) !important;
  padding-right: max(1.5rem, calc((100% - 1152px) / 2)) !important;
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.fan-spin {
  animation: spin-slow 8s linear infinite;
  transform-origin: center;
}

.logo-wrap:hover .fan-spin {
  animation-duration: 1.5s;
}

/* ────────────────────────────────────────────────────────────────
   13. SERVICE PAGE TEMPLATE — breadcrumb layout & current-page title
   ──────────────────────────────────────────────────────────────── */

/* The final breadcrumb crumb needs to be the actual page title, which
   requires a real wp:post-title block (a raw wp:html block can't contain
   dynamic post data) — but post-title always renders its own block-level
   heading, with its own margin and (per theme.json's global h3 element
   style) a 1.3 line-height, which throws the crumb out of line with the
   preceding links and › separators. Flexing the nav keeps every crumb —
   links, separators, and the heading — vertically centred on one line
   regardless of the heading's own font metrics, and flex-wrap lets the
   whole line wrap gracefully on narrow viewports. margin stays
   !important because the original inline-flow fix already needed it to
   beat WP's own post-title/global-style CSS (same class-vs-class
   specificity tie, resolved by print order); line-height is kept
   !important alongside it for the same reason rather than relying on
   the same tie going our way. */
nav[aria-label="Breadcrumb"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

nav[aria-label="Breadcrumb"] .breadcrumb-current {
  margin: 0 !important;
  line-height: 1 !important;
}

/* Breadcrumb container bar — the wrapping group carries lopsided inline
   padding (padding-top: 1.25rem / padding-bottom: 0 — set directly in the
   style="" attribute in templates/page-service.html and page-area.html),
   which pushes the breadcrumb text down against the bottom of the bar
   instead of centring it. An inline style attribute always beats an
   external stylesheet rule regardless of selector specificity, so
   !important is required here (not optional) to override it. */
.wp-block-group:has(> nav[aria-label="Breadcrumb"]) {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ────────────────────────────────────────────────────────────────
   14. SERVICE PAGE BODY CONTENT (.conair-* classes)
   ──────────────────────────────────────────────────────────────── */

/* Three of the nine service pages (grease-extract-cleaning,
   pizza-flue-sweeping, access-door-installation) have post_content —
   which lives in the database per page, not in this repo, so there's
   no template file to edit for this — authored against a class naming
   scheme (conair-*) that was never connected to any CSS anywhere in
   this theme, so it rendered as unstyled fallback text (the reported
   "cramped, one-word-per-line" checklist). That content also
   duplicates what page-service.html's own template chrome already
   renders: a second hero title/subtitle/CTA, and a second "Ready to
   Book?" CTA. Those duplicate blocks are hidden outright; the
   checklist and FAQ content (which isn't duplicated anywhere) is
   styled to match the card/badge treatment the other six service
   pages already use. */

.conair-hero-section,
/* Only the plain duplicate "Ready to Book?" CTA is hidden — some pages
   (e.g. About) reuse this same class for a genuinely unique closing
   section with its own blockquote, which has nothing to duplicate. */
.conair-ready-section:not(:has(blockquote)) {
  display: none;
}

.conair-content-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.conair-content-container {
  max-width: 56rem; /* matches max-w-4xl on the other service pages' checklist sections */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.conair-intro-text {
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  color: #9ca3af;
  line-height: 1.8;
  max-width: 700px;
}

.conair-check-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.conair-check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.conair-check-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #00b4a2;
}

.conair-check-item p {
  font-size: 15px;
  color: #d4d4d4;
  line-height: 1.7;
}

.conair-check-item strong {
  color: #ffffff;
}

.conair-freq-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #7a7a7a;
}

.conair-faq-section {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: #0c0c0c;
  border-top: 1px solid #1c1c1c;
  text-align: center;
}

.conair-faq-container {
  max-width: 1100px; /* was 48rem to match max-w-3xl on service pages' FAQ sections — widened per request, no longer matches those */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.conair-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1.25rem;
  background: rgba(0, 180, 162, 0.1);
  border: 1px solid rgba(0, 180, 162, 0.35);
  color: #00b4a2;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.conair-section-h2 {
  font-weight: 900;
  color: #ffffff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 2.5rem;
}

.conair-faq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  text-align: left;
}

.conair-faq-card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: #141414;
  border: 1px solid #2e2e2e;
}

.conair-faq-card h3 {
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.conair-faq-card p {
  font-size: 15px;
  color: #9a9a9a;
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────
   15. ABOUT PAGE BODY CONTENT (.about-* classes)
   ──────────────────────────────────────────────────────────────── */

/* Same situation as section 14 — post_content for /about/ is authored
   against its own class scheme (about-*, alongside some of the same
   conair-* classes reused from the service pages) with no matching CSS
   anywhere in the theme. Styled here rather than in post_content since
   that lives in the database, not this repo. */

.about-stats-bar {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #1c1c1c;
}

.about-stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 6rem;
}

.about-stat-num {
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  color: #00b4a2;
}

.about-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9a9a9a;
  text-align: center;
}

.about-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: #242424;
}

@media (max-width: 640px) {
  .about-stat-divider {
    display: none;
  }
}

.about-section-h2 {
  font-weight: 900;
  color: #ffffff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.about-section-intro {
  font-size: 1rem;
  color: #9a9a9a;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* Our Story — two-column on desktop: story copy + a sectors-served aside card */
.about-story-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 900px) {
  .about-story-container {
    grid-template-columns: 1fr;
  }
}

.about-story-text .about-section-h2 {
  margin-top: 0.5rem;
}

.about-aside-card {
  border-radius: 1rem;
  padding: 1.75rem;
  background: #141414;
  border: 1px solid #2e2e2e;
}

.about-aside-icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.about-aside-card h3 {
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.about-sectors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-sectors-list li {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #858585;
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  border-radius: 0.375rem;
  padding: 0.4rem 0.7rem;
}

/* Accreditations grid — 3 columns desktop, 2 tablet, 1 mobile */
.about-creds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .about-creds-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.about-cred-card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: #141414;
  border: 1px solid #2e2e2e;
  text-align: left;
}

.about-cred-badge {
  display: inline-block;
  margin-bottom: 0.85rem;
  background: rgba(0, 180, 162, 0.1);
  border: 1px solid rgba(0, 180, 162, 0.35);
  color: #00b4a2;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-cred-card h3 {
  font-weight: 700;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.about-cred-card p {
  font-size: 14px;
  color: #9a9a9a;
  line-height: 1.65;
}

/* Health & Safety — 2x2 grid, icon-left check items with a circular badge */
.about-hs-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.about-hs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
  text-align: left;
}

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

.about-hs-grid .conair-check-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 180, 162, 0.15);
  font-size: 1rem;
  margin-top: 0;
}

/* Closing quote CTA — the About page's own version of .conair-ready-section
   has a unique blockquote (see the :not(:has(blockquote)) exception in
   section 14), so unlike the service pages it renders and needs styling. */
.conair-ready-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
  background: #0c0c0c;
  border-top: 1px solid #1c1c1c;
}

.conair-ready-container {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.conair-ready-h2 {
  font-weight: 900;
  color: #ffffff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1.25rem;
}

.conair-ready-quote {
  font-size: 1.15rem;
  font-style: italic;
  color: #00b4a2;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.conair-ready-text {
  font-size: 15px;
  color: #9a9a9a;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.conair-ready-text a {
  color: #00b4a2;
  font-weight: 600;
}

.conair-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.conair-btn-teal,
.conair-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.conair-btn-teal {
  background: #00b4a2;
  color: #0c0c0c;
}

.conair-btn-teal:hover {
  background: #00ccb8;
}

.conair-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid #3a3a3a;
}

.conair-btn-outline:hover {
  border-color: #00b4a2;
  color: #00b4a2;
}

/* ────────────────────────────────────────────────────────────────
   16. TESTIMONIALS CAROUSEL
   ──────────────────────────────────────────────────────────────── */

.testimonial-carousel {
  position: relative;
}

.testimonial-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Real padding reserves scrollable space so scrollLeft can rest at 0
     without a card sitting flush under the buttons; scroll-padding tells
     the (mandatory) snap engine to keep honouring that clearance at every
     snap stop, not just the first/last — plain padding alone gets
     scrolled straight past on snap. The mask fades anything that still
     grazes the edge between snap stops, so it never reads as overlap. */
  padding: 4px 56px 12px;
  scroll-padding-left: 56px;
  scroll-padding-right: 56px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

@media (min-width: 640px) {
  .testimonial-track {
    gap: 1rem;
  }
}

.testimonial-track::-webkit-scrollbar {
  display: none;
}

.testimonial-track:focus-visible {
  outline: 2px solid #00b4a2;
  outline-offset: 4px;
  border-radius: 1rem;
}

.testimonial-card {
  /* Reset: <blockquote>'s UA-stylesheet default is `margin: 1em 40px`,
     which was stacking with the flex `gap` above to make the real gap
     between cards nearly 3x the intended value. */
  margin: 0;
  flex: 0 0 auto;
  width: 88%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .testimonial-card {
    width: calc(50% - 8px);
  }
}

@media (min-width: 1024px) {
  .testimonial-card {
    width: calc(33.333% - 10.667px);
  }
}

.testimonial-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid #2e2e2e;
  color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.testimonial-nav-prev {
  left: 4px;
}

.testimonial-nav-next {
  right: 4px;
}

.testimonial-nav-btn:hover:not(:disabled) {
  border-color: rgba(0, 180, 162, 0.6);
  color: #00b4a2;
}

.testimonial-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.testimonial-nav-btn svg {
  width: 20px;
  height: 20px;
}