/* bestfixit.ae — site styles (extracted from templates for caching & lighter pages) */

p a, li a, .pxl-item--description a { color:#024d87; font-weight:600; } p a:hover, li a:hover { text-decoration:underline; }

x-dc,helmet{display:block;} helmet{display:none;}

.callbtn{ flex:0 0 auto; display:inline-flex; align-items:center; background-color:rgb(44,116,192); transform:skewX(-30deg); padding:7.5px 27px 7.5px 23px; border-radius:13px 10px; box-shadow:0 8px 20px rgba(44,116,192,.35); text-decoration:none; transition:background-color .2s ease; }
.callbtn:hover{ background-color:#245f9e; }
.callbtn__inner{ display:inline-flex; align-items:center; gap:9px; transform:skewX(30deg); white-space:nowrap; font-family:var(--font-heading); }
.callbtn__label{ color:#ffce38; font-weight:800; font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.callbtn__num{ color:#fff; font-weight:800; font-size:20px; letter-spacing:.01em; }

#navToggle{ display:none; }
@media (max-width:900px){
  #hdrRow{ flex-wrap:wrap; }
  #navToggle{ display:flex; }
  .callbtn{ display:none !important; }
  #hdrNav{ display:none !important; order:5; flex-basis:100%; width:100%; margin-left:0; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 0 6px; border-top:1px solid #e6e9f0; }
  #hdrRow.nav-open #hdrNav{ display:flex !important; }
  #hdrNav > a{ padding:11px 4px; width:100%; font-size:15px; }
  .mob-call{ display:block !important; color:#024d87 !important; }
}

/* Unified site button: skewed parallelogram, #2c74c0, white — matches the header call button.
   !important overrides the various inline / component button styles. */
/* skewed parallelogram drawn by a ::before layer so the text stays straight
   AND an outline (border-only) variant is possible over any background. */
.btn-skew{
  position:relative; z-index:0;
  display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
  background:transparent !important; color:#fff !important; border:0 !important;
  padding:13px 24px !important; box-sizing:border-box;
  font-family:var(--font-heading,inherit); font-weight:500 !important; font-size:14px !important;
  letter-spacing:.03em; line-height:1.2; text-decoration:none !important; cursor:pointer;
  border-radius:0 !important; box-shadow:none !important; clip-path:none !important;
  transition:color .18s ease;
}
.btn-skew::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#2c74c0; transform:skewX(-11deg);
  transition:filter .18s ease, background .18s ease;
}
.btn-skew:hover::before{ filter:brightness(1.08); }
/* 2nd button in a pair: no fill and no static border — the border only
   appears on hover via the border-draw animation. */
.btn-skew--outline::before{ background:transparent; border:0; }
.btn-skew--outline:hover::before{ filter:none; }
/* colour variants — identical shape, size, typography and hover animation;
   only the fill changes so every button stays on the same system. */
.btn-skew--navy::before{ background:#024d87; }
.btn-skew--green::before{ background:#1f9d55; }
.btn-skew:focus-visible{ outline:2px solid #024d87; outline-offset:4px; }
.btn-skew svg{ flex:none; }
.btn-skew--arrow::after{ content:"\2192"; font-size:16px; line-height:1; margin-left:1px; }
/* border-draw hover animation (4 lines injected by JS) — the exact reference
   technique: each line is a background bar that grows to 80% on hover, so the
   endpoints don't meet (small corner gaps) and nothing shows at rest (no dots).
   Skewed to follow the button's parallelogram outline. */
.btn-skew .bd-frame{ position:absolute; inset:0; z-index:1; pointer-events:none; transform:skewX(-11deg); }
.btn-skew .bd{ position:absolute; background:#fff; transition:all .5s ease; }
.btn-skew .bd.top{ top:0; right:0; width:0; height:2px; }
.btn-skew .bd.right{ right:0; top:0; width:2px; height:0; }
.btn-skew .bd.bottom{ bottom:0; left:0; width:0; height:2px; }
.btn-skew .bd.left{ left:0; bottom:0; width:2px; height:0; }
.btn-skew:hover .bd.top{ width:80%; }
.btn-skew:hover .bd.right{ height:80%; }
.btn-skew:hover .bd.bottom{ width:80%; }
.btn-skew:hover .bd.left{ height:80%; }
@media (prefers-reduced-motion:reduce){ .btn-skew .bd{ transition:none !important; } }

/* Site-wide content typography: black text at weight 400 / 17px on light
   backgrounds. Text sitting on a coloured / dark background keeps the light
   colour set on that section (those colours are not touched). Every heading
   is rendered in Title Case (first letter of each word capitalised). */
/* Typography — one heading face across the whole site: Poppins (an actually
   loaded webfont), weight 700, #000. "Museo Sans" was dropped from the stack
   because it is not loaded, so it silently rendered as different faces on
   different machines — the source of the "wrong font on the homepage" issue.
   Body & content text: PT Sans, 400, #000, 16px / 24px line-height. Text on
   dark / coloured sections stays white (re-assert list below). */
body{ color:#000; font-family:'PT Sans',system-ui,Arial,sans-serif; }
h1,h2,h3,h4,h5,h6{ font-family:'Poppins','Archivo',system-ui,sans-serif !important;
  color:#000 !important; font-weight:700 !important; text-transform:capitalize !important; }
/* One body-copy standard across the whole site: PT Sans, 400, 15px / 1.6.
   Applies to paragraphs, list items and (via the description rule below)
   the <span>-based section and card descriptions, so every block of running
   text is the same face and size. */
p:not([class*="eyebrow"]):not([class*="badge"]), li{
  font-family:'PT Sans',system-ui,Arial,sans-serif !important;
  color:#000 !important; font-weight:400 !important; font-size:15px !important; line-height:1.6 !important; }
/* description spans used as body copy (they escape the p rule above) —
   same face and size everywhere. Colour is split: text over LIGHT sections
   is the same #000 as paragraphs; text over DARK sections stays light. */
.hero2__sub, .hfeat-card__text, .svc-slide__desc, .hfy-card__desc,
.pwp__desc, .pwp__step-desc, .cta-banner__subtext{
  font-family:'PT Sans',system-ui,Arial,sans-serif !important;
  font-size:15px !important; line-height:1.6 !important; }
/* body copy on light backgrounds — one shared colour (#000) */
.hfeat-card__text, .svc-slide__desc, .hfy-card__desc,
.pwp__desc, .pwp__step-desc{ color:#000 !important; }
/* keep light text on dark / coloured sections (prefixed to out-specify the
   body-copy rule above) */
/* white text only where the background is genuinely a photo/colour block:
   the hero photo, the navy booking-form panel, and other-page heroes.
   The site is otherwise a light theme — topbar, testimonials, CTA and
   footer render dark text on light backgrounds. */
[data-bf-root] #top :is(h1,h2,h3,h4,h5,h6,p,li),
[data-bf-root] .site-footer :is(h1,h2,h3,h4,h5,h6,p,li),
[data-bf-root] .elementor-element-a2ef090 :is(h1,h2,h3,h4,h5,h6,p,li),
[data-bf-root] .pagehero :is(h1,h2,h3,h4,h5,h6,p,li),
[data-bf-root] .blog-cta :is(h1,h2,h3,h4,h5,h6,p,li),
[data-bf-root] #bfc .bfc-form :is(h1,h2,h3,h4,h5,h6,p,li){ color:#fff !important; }
[data-bf-root] .site-footer__legal a{ color:rgba(255,255,255,.6) !important; }
[data-bf-root] .site-footer__legal a:hover{ color:#fff !important; }

.pagehero{ position:relative; overflow:hidden; background:linear-gradient(120deg,#04345f,#024d87); padding:clamp(46px,8vw,88px) 0; }
.pagehero::after{ content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border:2px solid rgba(255,255,255,.09); border-radius:50%; pointer-events:none; }
.pagehero__wrap{ position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,44px); text-align:center; }
.pagehero h1{ font-size:clamp(28px,4vw,46px); margin:0 0 12px; }
.pagehero__crumbs{ font-size:14px; color:rgba(255,255,255,.85); }
.pagehero__crumbs a{ color:#fff; }
.pagehero__crumbs a:hover{ text-decoration:underline; }
.pagewrap{ max-width:1160px; margin:0 auto; padding:clamp(46px,7vw,82px) clamp(20px,5vw,44px); }
.prose{ max-width:840px; margin:0 auto; }
.prose h2{ font-size:22px; margin:34px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin:0 0 16px; line-height:1.85; }
.prose ul{ margin:0 0 18px; padding-left:20px; }
.prose li{ margin:0 0 8px; line-height:1.7; }
.prose a{ color:#024d87; }
/* ── Section eyebrows / taglines are hidden site-wide ──
   Every eyebrow-style label (the small pill above section headings) is
   removed across the whole website; section headings stand on their own. */
[class*="eyebrow"], [class*="tagline"]{ display:none !important; }
.svc-grid{ max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,44px); display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.svc-tile{ display:flex; flex-direction:column; background:#fff; border:1px solid #00000017; border-radius:7px; padding:30px 26px; transition:transform .25s ease; }
.svc-tile:hover{ transform:translateY(-5px); }
.svc-tile__ico{ width:80px; height:80px; border-radius:12px; background:#eaf1fb; color:#2c74c0; display:grid; place-items:center; margin-bottom:18px; }
.svc-tile__ico svg{ width:36px; height:36px; }
.svc-tile h3{ font-size:clamp(16px,1.4vw,18px); margin:0 0 10px; }
.svc-tile p{ margin:0 0 18px; }
.svc-tile .btn-skew{ margin-top:auto; align-self:flex-start; }
.split{ max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,44px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:center; }
.split img{ width:100%; border-radius:10px; display:block; }
.ct-grid{ max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,44px); display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:start; }
.ct-info{ display:grid; gap:16px; }
.ct-card{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid #e6ebf3; border-radius:7px; padding:20px 22px; }
.ct-card__ico{ width:46px; height:46px; border-radius:10px; background:#eaf1fb; color:#2c74c0; display:grid; place-items:center; flex:none; }
.ct-card__ico svg{ width:22px; height:22px; }
.ct-card h3{ font-size:16px; margin:0 0 4px; }
.ct-form{ background:#fff; border:1px solid #e6ebf3; border-radius:7px; padding:28px; box-shadow:0 18px 40px rgba(20,40,80,.07); }
.ct-form label{ display:block; font-weight:600; margin-bottom:6px; color:#303236; font-size:14px; }
.ct-form input,.ct-form textarea,.ct-form select{ width:100%; box-sizing:border-box; padding:12px 14px; margin-bottom:16px; border:1px solid #dce3ee; border-radius:6px; font:inherit; color:#292a2b; background:#f8fafc; outline:none; }
.ct-form input:focus,.ct-form textarea:focus,.ct-form select:focus{ border-color:#2c74c0; }
.ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media(max-width:900px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:820px){ .split,.ct-grid{ grid-template-columns:1fr; } }
@media(max-width:600px){ .svc-grid,.ct-row{ grid-template-columns:1fr; } }

.hdr-item{ position:relative; display:inline-flex; align-items:center; }
.hdr-link{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-heading); font-weight:700;
  font-size:14.5px; letter-spacing:.02em; color:#000; cursor:pointer; background:none; border:0; padding:10px 0;
  text-decoration:none; white-space:nowrap; transition:color .18s ease; }
.hdr-link:hover, .hdr-item:hover > .hdr-link, .hdr-link.is-active{ color:#024d87; }
.hdr-link .chev{ transition:transform .25s ease; }
.hdr-item:hover > .hdr-link .chev, .hdr-item.open > .hdr-link .chev{ transform:rotate(180deg); }
.hdr-item.has-panel::after{ content:""; position:absolute; left:-14px; right:-14px; top:100%; height:20px; }
.hdr-panel{ position:absolute; top:calc(100% + 18px); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:70; background:#fff;
  border:1px solid #eef1f6; border-radius:12px; box-shadow:0 26px 64px rgba(16,32,58,.20); }
.hdr-item:hover > .hdr-panel, .hdr-item.open > .hdr-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.hdr-mega{ left:50%; transform:translateX(-50%) translateY(12px); width:min(780px,92vw); padding:16px; }
.hdr-item:hover > .hdr-mega, .hdr-item.open > .hdr-mega{ transform:translateX(-50%) translateY(0); }
.hdr-drop{ left:0; min-width:236px; padding:10px; }
.mega-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 12px; }
.mega-link{ position:relative; display:flex; gap:14px; align-items:center; padding:13px 16px; border-radius:10px;
  border:1px solid transparent; text-decoration:none;
  transition:background .18s ease, border-color .18s ease; }
.mega-link:hover{ background:#f5f8fc; border-color:#e3ebf6; }
.mega-ic{ width:44px; height:44px; border-radius:10px; background:#eaf1fb; color:#2c74c0; display:grid; place-items:center; flex:none; transition:background .2s ease, color .2s ease; }
.mega-ic svg{ width:23px; height:23px; }
.mega-link:hover .mega-ic{ background:#024d87; color:#fff; }
.mega-link b{ flex:1; color:#303236; font-size:15px; font-weight:700; line-height:1.25; transition:color .18s ease; }
.mega-link:hover b{ color:#024d87; }
.mega-arw{ flex:none; color:#024d87; opacity:0; transform:translateX(-6px); transition:opacity .18s ease, transform .18s ease; }
.mega-link:hover .mega-arw{ opacity:1; transform:translateX(0); }
.mega-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid #eef1f6; }
.mega-foot span{ color:#58595b; font-size:13px; }
.hdr-drop a{ display:block; padding:10px 14px; border-radius:8px; color:#303236; font-weight:600; font-size:14px; text-decoration:none; transition:background .16s ease, color .16s ease; }
.hdr-drop a:hover{ background:#f4f7fb; color:#024d87; }
.hdr-drop-sep{ height:1px; background:#eef1f6; margin:6px 8px; }
@media (max-width:900px){
  .hdr-item{ width:100%; display:block; }
  .hdr-link{ width:100%; justify-content:space-between; padding:12px 4px; border-bottom:1px solid #eef1f6; }
  .hdr-panel{ position:static; opacity:1; visibility:visible; transform:none !important; box-shadow:none; border:0;
    width:auto; padding:4px 0 8px 12px; display:none; }
  .hdr-item.open > .hdr-panel{ display:block; }
  .mega-grid{ grid-template-columns:1fr; }
  .mega-foot{ display:none; }
  .hdr-item.has-panel::after{ display:none; }
}

/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */


:root {
  /* Site standard: the page background is WHITE everywhere. Only specific
     sections opt into a tint via their own background (e.g. .svp-sec--tint,
     .hfeat-row). Sub-service pages stay fully white. */
  --color-bg: #ffffff;
  --color-surface: #eae9e9;
  --color-text: #292a2b;
  --color-accent: #024d87;
  /* coordinated brand palette (navy -> blue -> teal -> green) */
  --pal-1: #024d87;
  --pal-2: #2c74c0;
  --pal-3: #1594ac;
  --pal-4: #1f9d55;
  --color-accent-2: #2f5bb0;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #292a2b;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #eef1f8;
  --color-accent-200: #dce4f3;
  --color-accent-300: #c3d0ec;
  --color-accent-400: #93a9d8;
  --color-accent-500: #3a63bd;
  --color-accent-600: #013a5e;
  --color-accent-700: #122a5c;
  --color-accent-800: #0f2350;
  --color-accent-900: #101f3f;

  --color-accent-2-100: #eef1f8;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #3a63bd;
  --color-accent-2-600: #2f5bb0;
  --color-accent-2-700: #013a5e;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Poppins", "Archivo", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "PT Sans", system-ui, Arial, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.85) var(--space-3);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

:root{ interpolate-size: allow-keywords; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
a{ color:var(--color-accent); text-decoration:none; }
/* darken-on-hover applies to CONTENT links only — never to buttons/UI anchors
   (those are <a> too and were turning dark on hover). */
p a:hover, li a:hover, .prose a:hover, .pxl-item--description a:hover{ color:var(--color-accent-700); }
::selection{ background:color-mix(in srgb, var(--color-accent) 28%, transparent); }
details::details-content{ block-size:0; overflow:hidden; transition:block-size .35s ease, content-visibility .35s allow-discrete; content-visibility:hidden; }
details[open]::details-content{ block-size:auto; content-visibility:visible; }
details[open] .bf-faq-chev{ transform:rotate(180deg); }

.site-footer{
  --sf-overlay:#0f1a2b;
  --sf-heading:#ffffff;
  --sf-text:rgba(255,255,255,.72);
  --sf-muted:rgba(255,255,255,.5);
  --sf-accent:#3a86d6;
  --sf-border:rgba(255,255,255,.15);
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--sf-overlay); color:var(--sf-text);
  font-family:var(--font-body,inherit);
}
.site-footer__bg{
  position:absolute; inset:0; z-index:0;
  background-image:url('/static/img/hero-team.webp');
  background-size:cover; background-position:center right;
}
.site-footer__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--sf-overlay) 30%,
    color-mix(in srgb,var(--sf-overlay) 82%, transparent) 100%);
}
.site-footer__container{
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding-inline:clamp(20px,5vw,60px);
}
.site-footer__top{
  display:grid; grid-template-columns:minmax(0,0.34fr) 1px minmax(0,1fr);
  gap:0 clamp(30px,4vw,60px); align-items:stretch;
  padding:clamp(48px,6vw,72px) 0 clamp(34px,4vw,46px);
}
.site-footer__divider{ width:1px; background:var(--sf-border); }
.site-footer__brand{ align-self:center; justify-self:start; display:inline-flex;
  background:#ffffff; padding:16px 22px; border-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,.28); }
.site-footer__brand img{ width:clamp(138px,13vw,172px); height:auto; display:block; }
.site-footer__cta{
  margin:0; color:var(--sf-heading);
  font-family:var(--font-heading,inherit); font-weight:800;
  font-size:clamp(26px,3vw,36px); line-height:1.22; max-width:740px;
}
.site-footer__cta a{ color:var(--sf-accent); text-decoration:underline; text-underline-offset:5px; }
.site-footer__cta a:hover{ filter:brightness(1.12); }
.site-footer__cols{
  display:grid; grid-template-columns:1.3fr 0.85fr 1.15fr; gap:clamp(28px,3vw,44px);
  margin-top:clamp(34px,4vw,48px);
}
.site-footer__col h3{
  margin:0 0 20px; color:var(--sf-heading);
  font-family:var(--font-heading,inherit); font-weight:800; font-size:19px;
}
.site-footer__col p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--sf-text); max-width:32ch; }
.site-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.site-footer__links a{ display:inline-flex; align-items:center; gap:9px; color:var(--sf-text); text-decoration:none; font-size:14px; transition:color .18s ease, gap .18s ease; }
.site-footer__links a::before{ content:""; width:7px; height:11px; flex:none; background:var(--sf-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center/contain; }
.site-footer__links a:hover{ color:var(--sf-accent); gap:12px; }
.site-footer__info{ display:flex; flex-direction:column; gap:16px; font-size:13.5px; line-height:1.6; }
.site-footer__info-row{ display:flex; align-items:flex-start; gap:11px; color:var(--sf-text); }
.site-footer__info-row svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--sf-accent); }
.site-footer__info a{ color:var(--sf-text); text-decoration:none; }
.site-footer__info a:hover{ color:var(--sf-accent); }
.site-footer__info b{ color:var(--sf-heading); display:block; font-size:14px; margin-bottom:3px; }
.site-footer__bottom{
  position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding:clamp(16px,2vw,20px) clamp(20px,5vw,60px);
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  border-top:1px solid var(--sf-border);
}
.site-footer__copy{ font-size:13px; color:var(--sf-muted); }
.site-footer__social{ display:flex; align-items:center; gap:12px; }
.site-footer__social a{ width:38px; height:38px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sf-accent); color:#fff;
  transition:filter .18s ease, transform .18s ease; }
.site-footer__social a:hover{ filter:brightness(1.14); transform:translateY(-3px); }
.site-footer__social svg{ width:16px; height:16px; }
.site-footer__totop{
  position:absolute; z-index:2; right:clamp(18px,4vw,40px); bottom:clamp(74px,8vw,92px);
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--sf-accent); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35); transition:filter .18s ease, transform .18s ease; text-decoration:none;
}
.site-footer__totop:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.site-footer__totop svg{ width:20px; height:20px; }

@media (max-width:900px){
  .site-footer__top{ grid-template-columns:1fr; gap:34px; }
  .site-footer__divider{ display:none; }
  .site-footer__brand{ justify-content:flex-start; }
  .site-footer__cols{ grid-template-columns:1fr 1fr; }
  .site-footer__col:first-child{ grid-column:1 / -1; }
  .site-footer__bg::after{ background:var(--sf-overlay); opacity:.94; }
  .site-footer__totop{ bottom:96px; }
}
@media (max-width:560px){
  .site-footer__cols{ grid-template-columns:1fr; gap:30px; }
  .site-footer__bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
  .site-footer__totop{ width:42px; height:42px; bottom:120px; }
}

/* ── Hero slider ─────────────────────────────────────────────────── */
.hero-slider{ position:relative; overflow:hidden; }
.hero-slides{ display:flex; transition:transform .7s cubic-bezier(.65,.05,.36,1); will-change:transform; }
.hero-slide{ flex:0 0 100%; position:relative; min-width:0; }
.hero-slide__bg{ position:absolute; inset:0; z-index:0; }
.hero-slide__overlay{ position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(20,31,56,.80) 0%, rgba(20,31,56,.58) 42%, rgba(20,31,56,.85) 100%); }
.hero-slide__content{ position:relative; z-index:2; max-width:940px; margin:0 auto;
    padding:clamp(88px,12vw,150px) clamp(20px,5vw,48px) clamp(150px,17vw,210px);
    text-align:center; color:#fff; }
/* arrows + dots share the services-slider (svc2) circle design */
.hero-arrow{ position:absolute; z-index:4; top:38%; transform:translateY(-50%);
    width:48px; height:48px; border-radius:50%; border:1.6px solid #cdd8e8;
    background:#fff; color:#000; cursor:pointer; padding:0;
    display:grid; place-items:center;
    transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.hero-arrow:hover{ background:#024d87; border-color:#024d87; color:#fff;
    box-shadow:0 12px 26px rgba(2,77,135,.3); }
.hero-arrow svg{ width:20px; height:20px; }
.hero-arrow--prev{ left:clamp(10px,3vw,40px); }
.hero-arrow--next{ right:clamp(10px,3vw,40px); }
.hero-dots{ position:absolute; z-index:4; left:50%; transform:translateX(-50%);
    bottom:clamp(140px,15vw,175px); display:flex; align-items:center; gap:12px; }
.hero-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%;
    background:#c6d0e2; cursor:pointer;
    transition:width .3s ease, height .3s ease, background-color .3s ease, box-shadow .3s ease; }
.hero-dot.is-active{ width:12px; height:12px; background:#2c74c0; box-shadow:0 0 0 4px rgba(44,116,192,.25); }
@media (max-width:560px){
  .hero-arrow{ width:42px; height:42px; }
}
/* hero Google rating trust badge */
.hero-rating{ display:inline-flex; align-items:center; gap:10px; margin-top:26px;
    padding:9px 16px; border-radius:40px; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.hero-rating__g{ display:inline-flex; }
.hero-rating__stars{ color:#fbbc04; font-size:15px; letter-spacing:1.5px; line-height:1; }
.hero-rating__meta{ font-size:13px; color:rgba(255,255,255,.9); white-space:nowrap; }
.hero-rating__meta strong{ color:#fff; font-weight:700; }

/* ── feature strip: full-width light band, 3 columns, linked to the hero ── */
.hfeat{ position:relative; z-index:3; width:100%; margin-top:-64px; }
.hfeat-row{ width:100%; background:#eef3f9;
    display:grid; grid-template-columns:repeat(3,1fr);
    border:0; overflow:hidden; }
.hfeat-card{ box-sizing:border-box; display:flex; flex-direction:row; align-items:center;
    text-align:left; gap:15px; padding:clamp(22px,2.4vw,30px) clamp(18px,2.2vw,28px); }
.hfeat-card + .hfeat-card{ border-left:1px solid #979898; }
.hfeat-card__icon{ width:80px; height:80px; border-radius:50%; display:grid; place-items:center;
    background:var(--pal-1); color:#fff; flex:none; }
/* single brand colour for all feature-card icons (no colour cycling) */
.hfeat-card__icon svg{ width:34px; height:34px; }
.hfeat-card__body{ min-width:0; }
.hfeat-card__title{ margin:0 0 6px; color:#000; font-family:var(--font-heading);
    font-weight:800; font-size:clamp(16px,1.4vw,18px); line-height:1.25; }
.hfeat-card__text{ display:block; margin:0; color:#4a4f57; font-size:12.5px; line-height:1.55; }
@media (max-width:760px){
  .hfeat{ margin-top:-44px; }
  .hfeat-row{ grid-template-columns:1fr; }
  .hfeat-card + .hfeat-card{ border-left:0; border-top:1px solid #979898; }
}

/* ── shared section header: eyebrow + title (left), button (right), rule ── */
.sec-head{ margin:0 auto clamp(32px,4vw,48px); }
.sec-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px;
    padding-bottom:16px; border-bottom:1px solid #979898; }
.sec-head__text{ min-width:0; }
.sec-head__eyebrow{ display:block; margin:0 0 7px; color:#2c74c0;
    font-family:var(--font-heading); font-weight:800; font-size:14px; letter-spacing:.05em; }
.sec-head__title{ margin:0; font-family:var(--font-heading); font-weight:800;
    font-size:clamp(26px,3vw,36px) !important; line-height:1.15 !important; }
.sec-head__btn.btn-skew{ flex:none; align-self:center; }
.sec-head__desc{ margin:18px 0 0; max-width:720px; }
@media (max-width:640px){
  .sec-head__row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .sec-head__btn.btn-skew{ align-self:flex-start; }
}

.svc2{ position:relative; background:#eef3f9; overflow:hidden;
    padding:clamp(56px,7vw,84px) 0 clamp(70px,8vw,96px); }
  .svc2__head{ max-width:1480px; margin:0 auto clamp(30px,3.5vw,44px); padding:0 clamp(16px,3vw,40px); }

  /* ── carousel (reference-style: circular badge overlapping each card) ── */
  .svc2__slider{ max-width:1480px; margin:0 auto; padding:0 clamp(16px,3vw,40px); }
  .svc2__stage{ position:relative;
    --svc-gap:20px; --svc-vp-x:20px; --svc-vp-top:66px; --svc-card-h:200px; }
  /* Horizontal padding equal to the gap gives the edge cards' shadows room
     inside the clip box (so shadows aren't cut) while still hiding the next
     off-screen card. Top padding holds the overlapping badges; only left/right
     overflow is clipped. */
  .svc2__viewport{ overflow-x:clip; overflow-y:visible;
    padding:var(--svc-vp-top) var(--svc-vp-x) 24px; }
  .svc2__track{ position:relative; display:flex; align-items:stretch; gap:var(--svc-gap);
    transition:transform .58s cubic-bezier(.22,1,.36,1); will-change:transform;
    touch-action:pan-y; }
  .svc2__track.is-dragging{ transition:none; cursor:grabbing; user-select:none; }

  /* slide / card — 5 across on wide desktops */
  .svc-slide{ flex:0 0 calc((100% - (var(--svc-gap) * 4)) / 5); box-sizing:border-box;
    position:relative; min-height:var(--svc-card-h);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:60px 18px 22px; background:#fff; border-radius:7px; border:1px solid #00000017;
    text-decoration:none; color:inherit; outline:none;
    transition:transform .25s ease; }
  .svc-slide:hover{ transform:translateY(-5px); }
  .svc-slide:focus-visible{ outline:3px solid #2c74c0; outline-offset:2px; }

  /* circular badge sitting on the card's top edge (half above) */
  .svc-slide__badge{ position:absolute; top:-40px; left:50%; transform:translateX(-50%);
    width:80px; height:80px; border-radius:50%; z-index:3; overflow:hidden;
    background:#fdfdfd; border:0; display:grid; place-items:center;
    transition:transform .25s ease; }
  .svc-slide:hover .svc-slide__badge{ transform:translateX(-50%) scale(1.03); }
  .svc-slide__badge img{ width:75%; height:75%; object-fit:contain; display:block; }

  .svc-slide__title{ margin:0 0 8px; color:#000 !important;
    font-family:var(--font-heading); font-weight:800; font-size:clamp(16px,1.4vw,18px); line-height:1.24;
    min-height:calc(1.24em * 2);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .svc-slide__desc{ margin:0; width:84%; color:#5a616b; font-size:14px; line-height:1.45;
    min-height:calc(1.45em * 2);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* ── navigation arrows (centred on the card bodies, not the whole section) ── */
  .svc2__arrow{ position:absolute; top:calc(var(--svc-vp-top) + var(--svc-card-h) / 2);
    transform:translateY(-50%); z-index:6;
    width:46px; height:46px; border-radius:50%; border:1.6px solid #cdd8e8; background:#fff;
    color:#1c2836; display:grid; place-items:center; cursor:pointer; padding:0;
    transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
  .svc2__arrow--prev{ left:-22px; }
  .svc2__arrow--next{ right:-22px; }
  .svc2__arrow:hover{ background:#024d87; border-color:#024d87; color:#fff;
    box-shadow:0 12px 26px rgba(2,77,135,.3); }
  .svc2__arrow:focus-visible{ outline:3px solid #2c74c0; outline-offset:2px; }
  .svc2__arrow svg{ width:20px; height:20px; }

  /* ── pagination dots ── */
  .svc2__nav{ display:flex; align-items:center; justify-content:center; margin-top:26px; }
  .svc2__dots{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center; }
  .svc2__dot{ width:9px; height:9px; border-radius:50%; background:#c6d0e2; border:none; padding:0;
    cursor:pointer; transition:width .3s ease, background-color .3s ease; }
  .svc2__dot.is-active{ width:26px; border-radius:5px; background:#2c74c0; }
  .svc2__dot:focus-visible{ outline:2px solid #2c74c0; outline-offset:3px; }

  /* ── responsive per-view: 5 / 4 / 3 / 2 / 1 ── */
  @media (max-width:1279px){ .svc-slide{ flex-basis:calc((100% - (var(--svc-gap) * 3)) / 4); } }
  @media (max-width:1039px){ .svc-slide{ flex-basis:calc((100% - (var(--svc-gap) * 2)) / 3); } }
  @media (max-width:759px){
    .svc2__stage{ --svc-gap:18px; --svc-vp-x:18px; --svc-vp-top:64px; --svc-card-h:206px; }
    .svc-slide{ flex-basis:calc((100% - var(--svc-gap)) / 2); }
  }
  @media (max-width:519px){
    .svc2__stage{ --svc-gap:16px; --svc-vp-x:16px; --svc-vp-top:56px; --svc-card-h:206px; }
    .svc-slide{ flex-basis:86%; }
    .svc-slide__badge{ width:80px; height:80px; top:-40px; }
    .svc-slide{ padding-top:60px; }
    .svc2__arrow{ width:40px; height:40px; }
    .svc2__arrow--prev{ left:0; } .svc2__arrow--next{ right:0; }
  }

  @media (prefers-reduced-motion:reduce){
    .svc2__track{ transition:transform .12s ease; }
    .svc-slide, .svc-slide__badge{ transition:none; }
  }

#bfc{
  --accent:#024d87;
  --accent-2:#2c74c0;
  position:relative;
  background:#fff;
  padding:clamp(60px,9vw,100px) 0 clamp(40px,5vw,60px);
  font-family:var(--font-body,inherit);
}
#bfc .bfc-wrap{ max-width:1180px; margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,70px); align-items:start; }

/* ---- LEFT column: intro ---- */
#bfc .bfc-eyebrow{ display:block; margin:0 0 14px; color:var(--accent-2);
  font-family:var(--font-heading,inherit); font-weight:800; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; }
#bfc .bfc-h2{ margin:0 0 20px; font-family:var(--font-heading,inherit);
  font-weight:800; font-size:clamp(26px,3vw,36px); line-height:1.15;
  color:#000; max-width:460px; }
#bfc .bfc-h2 span{ color:var(--accent-2); }
#bfc .bfc-lead{ margin:0; max-width:460px; }
#bfc .bfc-call{ margin-top:30px; }

/* ---- RIGHT column: FAQ accordion ---- */
/* Site-wide FAQ standard (matches the sub-service pages): tinted item
   background kept when open, and a smaller toggle icon. */
#bfc .bfc-faq{ display:flex; flex-direction:column; gap:12px; }
#bfc .faq-item{ background:#f4f7fb; border:1px solid #e4ebf4; border-radius:7px;
  overflow:hidden; transition:border-color .25s ease, background .25s ease; }
#bfc .faq-item.is-open{ background:#eaf1fb; border-color:var(--accent-2); }
#bfc .faq-q{ width:100%; box-sizing:border-box; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:15px 18px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-heading,inherit); font-weight:700; font-size:15.5px;
  line-height:1.35; color:#0f1a2b; }
#bfc .faq-q__icon{ flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--accent);
  transition:transform .35s ease, background .25s ease; }
#bfc .faq-q__icon svg{ width:12px; height:12px; }
#bfc .faq-item.is-open .faq-q__icon{ transform:rotate(180deg); background:var(--accent-2); }
/* when open, a light divider sits just under the question title */
#bfc .faq-item.is-open .faq-q{ border-bottom:1px solid #d5e2f2; }
/* smooth auto-height animation via grid-template-rows */
#bfc .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
#bfc .faq-item.is-open .faq-a{ grid-template-rows:1fr; }
#bfc .faq-a__inner{ overflow:hidden; }
#bfc .faq-a p{ margin:0; padding:15px 22px 20px; font-size:15px; line-height:1.65; }

/* ---- responsive ---- */
@media (max-width:900px){
  #bfc .bfc-wrap{ grid-template-columns:1fr; gap:36px; }
  #bfc .bfc-h2, #bfc .bfc-lead{ max-width:100%; }
}
@media (max-width:640px){
  #bfc{ padding:58px 0; }
  #bfc .faq-q{ font-size:15px; padding:16px 18px; }
  #bfc .faq-a p{ padding:0 18px 18px; }
}
@media (prefers-reduced-motion:reduce){
  #bfc .faq-a, #bfc .faq-q__icon{ transition:none; }
}