/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --teal:      #04484E;
  --teal-mid:  #066068;
  --teal-lite: #0d8a98;
  --gold:      #F7C948;
  --gold-dark: #d4a820;
  --cream:     #FFFCF5;
  --ink:       #0D1117;
  --ink2:      #1a2230;
  --slate:     #4A5568;
  --border:    rgba(4,72,78,0.12);
  --shadow-sm: 0 2px 12px rgba(4,72,78,0.08);
  --shadow-md: 0 8px 32px rgba(4,72,78,0.14);
  --shadow-lg: 0 20px 60px rgba(4,72,78,0.18);
  --r:         14px;
  --r-sm:      8px;
  --r-pill:    100px;
  --nav-h:     72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Instrument Sans', sans-serif;
  background: #fff;
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
}
h1,h2,h3,h4,h5 {
  font-family: 'Bricolage Grotesque', sans-serif;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-pill);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 15px;
  cursor: pointer; border: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg,var(--teal),var(--teal-mid)); color:#fff; box-shadow:0 4px 20px rgba(4,72,78,.35); }
.btn-primary:hover { box-shadow:0 8px 32px rgba(4,72,78,.5); }
.btn-secondary { background:transparent; color:var(--teal); border:2px solid var(--teal); }
.btn-secondary:hover { background:var(--teal); color:#fff; }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--ink); box-shadow:0 4px 20px rgba(247,201,72,.4); }
.btn-gold:hover { box-shadow:0 8px 32px rgba(247,201,72,.6); }
.btn-white { background:#fff; color:var(--teal); box-shadow:0 4px 16px rgba(0,0,0,.12); }
.btn-white:hover { box-shadow:0 8px 32px rgba(0,0,0,.2); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.btn-ghost i { transition: transform .25s; }
.btn-ghost:hover i { transform: translateY(3px); }

/* ══════════════════════════════════════
   CLOUDFLARE TURNSTILE WIDGET
   The widget is a 300×65 iframe — without help it sits flush-left
   inside the form and looks broken. Center it and give it breathing
   room above the submit button. Mobile: allow it to scale.
══════════════════════════════════════ */
.cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 18px 0 16px;
  min-height: 65px; /* reserve space so submit button doesn't jump when widget loads */
}
.cf-turnstile iframe { max-width: 100%; }
@media (max-width: 360px) {
  /* Tiny phones: let Cloudflare's compact mode kick in via attribute (recommended)
     or simply allow horizontal scroll rather than clipping. */
  .cf-turnstile { overflow-x: auto; }
}

/* ══════════════════════════════════════
   SECTION HELPERS
══════════════════════════════════════ */
.section { padding: 90px 0; }
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.section-label::before { content:''; display:block; width:18px; height:2px; background:var(--gold); border-radius:1px; }
.section-title { font-size:clamp(28px,4vw,48px); font-weight:800; color:var(--ink); margin-bottom:18px; }
.section-title .gold { color:var(--gold); }
.section-title .teal { color:var(--teal); }
.section-desc { font-size:17px; color:var(--slate); line-height:1.75; max-width:620px; }
.section-header-center { text-align:center; }
.section-header-center .section-label { justify-content:center; }
.section-header-center .section-desc { margin:0 auto; }

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.reveal   { opacity:0; transform:translateY(30px);  transition:opacity .7s ease,transform .7s ease; }
.reveal-l { opacity:0; transform:translateX(-40px); transition:opacity .7s ease,transform .7s ease; }
.reveal-r { opacity:0; transform:translateX(40px);  transition:opacity .7s ease,transform .7s ease; }
.reveal.active,.reveal-l.active,.reveal-r.active { opacity:1; transform:translate(0); }

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent; transition:background .3s,box-shadow .3s;
}
#navbar.scrolled {
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 24px rgba(4,72,78,.10);
}
#navbar.scrolled .logo { color:var(--teal); }
#navbar.scrolled .nav-links a { color:var(--ink2); }
#navbar.scrolled .nav-cta { background:var(--teal); color:#fff; }

.nav-container {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); gap:20px;
}
.logo {
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:900; font-size:24px; letter-spacing:-.03em;
  color:#fff; transition:color .3s; z-index:1002; position:relative;
}
.logo span { color:var(--gold); }

.nav-links { display:flex; list-style:none; gap:4px; align-items:center; }
.nav-links a {
  padding:8px 14px; font-size:14px; font-weight:600;
  border-radius:8px; color:rgba(255,255,255,.9);
  transition:background .15s,color .15s;
}
.nav-links a:hover { background:rgba(255,255,255,.12); color:#fff; }
#navbar.scrolled .nav-links a:hover { background:rgba(4,72,78,.08); color:var(--teal); }

.nav-cta {
  background:var(--gold); color:var(--ink);
  padding:10px 22px; border-radius:var(--r-pill);
  font-size:14px; font-weight:700; transition:all .2s; white-space:nowrap;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(247,201,72,.4); }

/* ══════════════════════════════════════
   HAMBURGER BUTTON
══════════════════════════════════════ */
.menu-toggle {
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px;
  background:rgba(255,255,255,.13);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:10px; cursor:pointer; padding:0;
  z-index:1002; position:relative; flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.menu-toggle:hover { background:rgba(255,255,255,.22); }
#navbar.scrolled .menu-toggle { background:rgba(4,72,78,.08); border-color:rgba(4,72,78,.2); }
#navbar.scrolled .menu-toggle .hline { background:var(--ink); }

.hline {
  width:22px; height:2px; background:#fff; border-radius:2px; display:block;
  transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .25s;
  transform-origin:center;
}
/* animated X */
.menu-toggle.is-open .hline:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open .hline:nth-child(2) { opacity:0; width:0; }
.menu-toggle.is-open .hline:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════
   MOBILE DRAWER — slides LEFT → RIGHT
══════════════════════════════════════ */

/* dim overlay */
.drawer-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0);
  z-index:1000; pointer-events:none;
  transition:background .4s ease;
}
.drawer-backdrop.is-open { background:rgba(0,0,0,.62); pointer-events:all; }

/* the panel */
.mobile-drawer {
  position:fixed; top:0; left:0; bottom:0;
  width:min(300px,84vw);
  z-index:1001;
  display:flex; flex-direction:column;
  background:#111827;
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  overflow:hidden;
  /* subtle right-edge gradient stripe */
  box-shadow:6px 0 40px rgba(0,0,0,.45);
}
.mobile-drawer.is-open { transform:translateX(0); }

/* decorative right border stripe */
.mobile-drawer::before {
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:2px;
  background:linear-gradient(to bottom,
    transparent 0%, var(--gold) 35%,
    var(--teal-lite) 70%, transparent 100%);
  opacity:.55; z-index:10;
}

/* ── drawer top bar ── */
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; height:var(--nav-h);
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.drawer-logo {
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:900; font-size:21px; letter-spacing:-.03em; color:#fff;
}
.drawer-logo span { color:var(--gold); }

.drawer-close {
  width:38px; height:38px; border-radius:9px;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
  font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s,color .2s,transform .28s;
  flex-shrink:0;
}
.drawer-close:hover { background:rgba(255,255,255,.14); color:#fff; transform:rotate(90deg) scale(1.08); }

/* ── nav links ── */
.drawer-nav { list-style:none; padding:8px 0; flex:1; overflow-y:auto; }

.drawer-nav li {
  opacity:0;
  transform:translateX(-16px);
  transition:opacity .3s ease, transform .3s ease;
}
/* stagger entrance */
/* Generic stagger — works for any number of nav items, not just 5.
   nth-child(n) applies to ALL <li>, transition-delay scales with index. */
.mobile-drawer.is-open .drawer-nav li { opacity:1; transform:none; }
.mobile-drawer.is-open .drawer-nav li:nth-child(1) { transition-delay:.07s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(2) { transition-delay:.13s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(3) { transition-delay:.19s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(4) { transition-delay:.25s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(5) { transition-delay:.31s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(6) { transition-delay:.37s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(7) { transition-delay:.43s; }
.mobile-drawer.is-open .drawer-nav li:nth-child(8) { transition-delay:.49s; }

.drawer-nav a {
  display:flex; align-items:center; gap:13px;
  padding:14px 18px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:17px; font-weight:700;
  color:rgba(255,255,255,.68);
  border-left:3px solid transparent;
  transition:color .18s, background .18s, border-color .18s, padding-left .22s;
}
.drawer-nav a:hover {
  color:#fff;
  background:rgba(255,255,255,.06);
  border-left-color:var(--gold);
  padding-left:26px;
}
.drawer-nav a .nav-icon {
  width:36px; height:36px; border-radius:9px;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:rgba(255,255,255,.4);
  transition:background .18s,color .18s; flex-shrink:0;
}
.drawer-nav a:hover .nav-icon { background:rgba(247,201,72,.16); color:var(--gold); }

.drawer-divider { height:1px; background:rgba(255,255,255,.06); margin:6px 18px; }

/* ── footer CTA ── */
.drawer-footer {
  padding:16px 18px 22px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:10px; flex-shrink:0;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s ease .36s, transform .3s ease .36s;
}
.mobile-drawer.is-open .drawer-footer { opacity:1; transform:translateY(0); }

.drawer-cta {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 18px; border-radius:var(--r-pill);
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; border:none;
  transition:transform .2s,box-shadow .2s;
}
.drawer-cta:hover { transform:translateY(-2px); }
.drawer-cta-primary {
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--ink); box-shadow:0 4px 16px rgba(247,201,72,.28);
}
.drawer-cta-primary:hover { box-shadow:0 8px 24px rgba(247,201,72,.48); }
.drawer-cta-wa {
  background:rgba(37,211,102,.1);
  border:1.5px solid rgba(37,211,102,.3) !important;
  color:#42d97a;
}
.drawer-cta-wa:hover { background:rgba(37,211,102,.18); }

.drawer-hint {
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:12px; color:rgba(255,255,255,.28); padding-top:2px;
}


/* ══════════════════════════════════════
   LANGUAGE SWITCHER
══════════════════════════════════════ */
.lang-switcher { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:rgba(255,255,255,.85); margin-right:6px; }
.lang-link { padding:4px 6px; border-radius:6px; transition:color .15s, background .15s; }
.lang-link:hover { color: var(--gold); }
.lang-link.active { color: var(--gold); }
.lang-sep { opacity:.4; }
#navbar.scrolled .lang-switcher { color: var(--ink); }
#navbar.scrolled .lang-link { color: var(--ink); }
#navbar.scrolled .lang-link.active { color: var(--teal); }
.drawer-lang { display:flex; justify-content:center; gap:10px; padding:10px 0; margin:10px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); font-size:13px; font-weight:700; }
.drawer-lang .lang-link { color:rgba(255,255,255,.6); }
.drawer-lang .lang-link.active { color: var(--gold); }

/* ══════════════════════════════════════
   FORM FEEDBACK (shared)
══════════════════════════════════════ */
.form-loading { text-align:center; padding:16px; color: var(--teal); }
.form-message { padding: 14px 18px; border-radius: 10px; margin-top: 14px; font-weight: 600; }
.form-message.success { background: rgba(4,72,78,.08); border: 1px solid rgba(4,72,78,.2); color: var(--teal); }
.form-message.error   { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); color: #dc2626; }
.form-message i { margin-right: 6px; }
[hidden] { display: none !important; }

/* Active focus ring (a11y) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ══════════════════════════════════════
   UTILITIES & COMPONENTS (cleanup pass)
══════════════════════════════════════ */

/* — Honeypot input: visually & semantically hidden but submitted — */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

/* — Centered button row (cta banners, page headers) — */
.btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* — Inline icon colors — */
.icon-gold      { color: var(--gold); }
.icon-gold-dk   { color: var(--gold-dark); }
.icon-teal      { color: var(--teal); }
.icon-wa        { color: #25D366; }

/* — Contact-style links (tel:, mailto:) — */
.contact-link {
  color: var(--teal);
  font-weight: 600;
  transition: color .15s;
}
.contact-link:hover { color: var(--gold-dark); }

/* — Footer "zone" label/text helpers (replaces inline styles in footer.php) — */
.footer-zone     { margin-top: 20px; }
.footer-zone-lbl {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.footer-zone-txt { font-size: 13px; line-height: 1.7; }

/* — Hero card meta icon — */
.hero-card-meta i { color: var(--gold); font-size: 11px; }

/* — Floating award card — */
.floating-card.card-2 i { color: var(--gold-dark); }

/* — Placeholder client logo — */
.client-logo--placeholder { border-style: dashed !important; }
.client-logo--placeholder span {
  font-size: 13px;
  color: var(--slate);
  font-weight: 600;
}

/* — Section spacing utilities — */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

/* — Team avatar gradient variants (replaces per-element inline gradients) — */
.team-avatar--green {
  background: linear-gradient(135deg, #0a4a2a 0%, #1a8040 50%, #F7C948 100%);
}
.team-avatar--magenta {
  background: linear-gradient(135deg, #C33764 0%, #1D2671 100%);
}
.team-avatar--purple {
  background: linear-gradient(135deg, #2d1a5e 0%, #5a3db5 50%, #F7C948 100%);
}

/* — Typography rhythm (improves heading hierarchy across pages) — */
.section-title + .section-desc { margin-top: 14px; }
p + .section-desc { margin-top: 14px; }

/* Hero / section gradient text helpers — used by raw t() output */
.hero-title .gold,
.hero-title .teal,
.section-title .gold,
.section-title .teal {
  display: inline; /* never break onto its own line */
}

/* — Better focus on form controls — */
.form-control:focus-visible {
  outline: none; /* element already has its own focus ring */
}

/* — Fix link reset for raw HTML inside translations — */
.section-title a,
.hero-title a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════
   TYPOGRAPHY HARDENING (cleanup pass)
══════════════════════════════════════ */

/* Wrap-balancing for headings — modern browsers; harmless fallback elsewhere */
h1, h2, h3 { text-wrap: balance; }

/* Section title rhythm: stop random gaps between section-title and what follows */
.section-title { margin-bottom: 18px; line-height: 1.15; }
.section-title:last-child { margin-bottom: 0; }

/* Paragraph rhythm inside sections — more breathing room */
.section-desc { color: var(--slate); line-height: 1.7; }
.section-desc + .section-desc { margin-top: 12px; }

/* Hero title — never let a single word overflow */
.hero-title { word-break: normal; overflow-wrap: anywhere; }

/* Section header centering — guard against stray inline styles */
.section-header-center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-header-center .section-desc { margin-left: auto; margin-right: auto; }

/* Card heading consistency */
.service-card h3,
.value-card h3,
.faq-question h3 { line-height: 1.25; }

/* Smooth focus on every interactive surface */
.btn:focus-visible,
.nav-cta:focus-visible,
.contact-link:focus-visible,
.service-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Mobile / responsive hardening ── */
@media (max-width: 720px) {
  /* Tighter section padding on small screens */
  .section { padding: 60px 0; }
  /* Ensure hero img doesn't overflow on narrow screens */
  .hero-card-img { width: 100%; height: auto; }
  /* CTA buttons stack with less gap on small screens */
  .cta-buttons, .btn-row { gap: 10px; }
  .cta-buttons .btn, .btn-row .btn { padding: 12px 20px; font-size: 14px; }
}
@media (max-width: 480px) {
  /* Headings get tighter line-height, never line-height < 1.1 */
  .hero-title  { font-size: clamp(28px, 9vw, 36px); line-height: 1.18; }
  .section-title { font-size: clamp(24px, 7vw, 32px); }
  /* Container padding shrinks gracefully */
  .container { padding-left: 18px; padding-right: 18px; }
}

/* ══════════════════════════════════════
   PHASE 2 — NEW UI
══════════════════════════════════════ */

/* Skip-to-content link (a11y) */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--ink); color: #fff;
  padding: 10px 18px; z-index: 9999;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* Drawer secondary separator + muted entries */
.drawer-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 12px 18px 6px;
  list-style: none;
}
.drawer-link--muted {
  opacity: .65;
}
.drawer-link--muted:hover { opacity: 1; }

/* Hero secondary CTA — sits next to the gold button as a ghost-button pair.
   Older variant was a plain text link; promoted to a real .btn .btn-ghost so
   it reads as a clickable secondary action on dark backgrounds. */
.hero-secondary-link i { font-size: 13px; }

/* Floating mini-review card */
.floating-card.card-2 {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 18px;
  min-width: 220px;
}
.floating-stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; line-height: 1; }
.floating-card.card-2 h4 { font-size: 14px; font-weight: 800; color: var(--ink); margin: 4px 0 0; line-height: 1.4; }
.floating-card.card-2 p  { font-size: 12px; color: var(--slate); margin: 0; }

/* Form intro + alt link (micro-form) */
.form-intro {
  color: var(--slate); font-size: 14px;
  margin: -6px 0 18px;
}
.form-alt {
  text-align: center; font-size: 13px;
  color: var(--slate); margin-top: 14px;
}
.form-alt .contact-link { white-space: nowrap; }

/* Home testimonials section */
.home-tst-section { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.home-tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 50px;
}
.home-tst-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s, box-shadow .25s;
}
.home-tst-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.home-tst-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.home-tst-quote {
  font-size: 15px; line-height: 1.7; color: var(--ink);
  font-style: italic; flex: 1;
}
.home-tst-meta { display: flex; align-items: center; gap: 12px; }
.home-tst-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-mid));
  color: #fff; font-weight: 900; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-tst-name { font-weight: 800; font-size: 14px; color: var(--ink); }
.home-tst-role { font-size: 12px; color: var(--slate); }
@media (max-width: 980px) { .home-tst-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } }

/* WhatsApp float — push it up on small screens so it doesn't collide with
   page-level sticky CTAs (e.g., on /offres mobile). */
@media (max-width: 720px) {
  .wa-float { bottom: 100px; }
}

/* Real-time validation field states */
.form-control.is-invalid {
  border-color: #dc2626 !important;
  background-color: rgba(220,38,38,.04) !important;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important;
}
.form-control.is-valid {
  border-color: rgba(4,72,78,.4) !important;
}

/* ══════════════════════════════════════
   PHASE 3 — system polish
══════════════════════════════════════ */

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

/* ── GDPR-style cookie banner (minimal, non-tracking notice) ── */
.cookie-banner {
  position: fixed;
  bottom: 14px; left: 14px; right: 14px;
  z-index: 9000;
  background: var(--ink);
  color: rgba(255,255,255,.92);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
  font-size: 13px; line-height: 1.55;
  max-width: 820px;
  margin-inline: auto;
}
.cookie-banner p { margin: 0; flex: 1 1 280px; min-width: 200px; }
.cookie-banner button {
  background: var(--gold); color: var(--ink);
  border: none; border-radius: var(--r-pill);
  padding: 9px 22px; font-weight: 800; font-size: 13px;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}
.cookie-banner button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(247,201,72,.4); }

/* Carousel a11y polish */
.services-carousel { position: relative; }
.carousel-dot { border: none; outline-offset: 3px; }
.carousel-dot[aria-selected="true"] { background: var(--gold); }

/* Form field-required / optional indicators (shared with /offres) */
.req { color: #dc2626; font-weight: 700; margin-inline-start: 2px; }
.opt { color: var(--slate); font-weight: 500; font-size: 12px; margin-inline-start: 4px; }