/* ============================================================
     EXPERT CANALISATIONS — HOME ONE-PAGER
     Anthracite direction · mobile-first · WCAG AA
     ============================================================ */

  :root {
    --header-h: 72px;
  }

  html { scroll-padding-top: var(--header-h); }
  body { padding-bottom: 0; }
  img { max-width: 100%; display: block; }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* Reveal on scroll */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }

  /* ====== HEADER ====== */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
    height: var(--header-h);
  }
  .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--s-4); }
  .brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--fg); }
  .brand img { height: 40px; width: auto; }
  .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; line-height: 1.05; }
  .brand-tag { font-size: 12px; color: var(--fg-soft); letter-spacing: 0.02em; }

  .nav { display: flex; gap: var(--s-5); align-items: center; }
  .nav a { color: var(--fg); text-decoration: none; font-size: 14.5px; font-weight: 500; }
  .nav a:hover { color: var(--accent-urgent); }

  .header-tel {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    background: var(--accent-urgent);
    color: #fff; font-weight: 700; font-size: 14px;
    border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--dur-base);
    box-shadow: var(--shadow-cta);
    white-space: nowrap;
  }
  .header-tel:hover { background: var(--accent-urgent-hover); color: #fff; }
  .header-tel .num { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.01em; }

  .burger {
    display: none;
    width: 40px; height: 40px; border: 1px solid var(--border-strong);
    background: transparent; border-radius: var(--r-md); cursor: pointer;
    align-items: center; justify-content: center; padding: 0;
  }
  .burger svg { color: var(--fg); }

  @media (max-width: 980px) {
    .nav { display: none; }
    .brand-tag { display: none; }
    .burger { display: inline-flex; }
    .header-tel-text { display: none; }
    .header-tel .num { font-size: 14px; }
  }
  @media (max-width: 480px) {
    .brand-name { display: none; }
  }

  /* Mobile menu drawer */
  .mobile-menu {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--bg);
    z-index: 99;
    transform: translateY(-100%);
    transition: transform 280ms var(--ease-out);
    border-top: 1px solid var(--border);
    overflow-y: auto;
  }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu nav { display: flex; flex-direction: column; padding: var(--s-3) var(--s-5); }
  .mobile-menu a {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--border);
    color: var(--fg); text-decoration: none;
    font-size: 18px; font-weight: 600;
  }

  /* ====== HERO ====== */
  .hero {
    background: var(--ec-anthracite);
    color: #fff;
    padding: var(--s-9) 0 var(--s-9);
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    /* subtle gradient texture */
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 80% -10%, rgba(138,34,42,0.12), transparent 50%),
      radial-gradient(circle at 0% 100%, rgba(255,255,255,0.04), transparent 60%);
    pointer-events: none;
  }
  .hero .container { position: relative; }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-8);
    align-items: center;
  }
  @media (max-width: 980px) {
    .hero { padding: var(--s-8) 0 var(--s-8); }
    .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  }

  .hero-eyebrow {
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 var(--s-5);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
    animation: pulse-green-eyebrow 1.8s var(--ease-out) infinite;
  }
  @keyframes pulse-green-eyebrow {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  }

  .hero h1 {
    color: #fff;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-5);
    text-wrap: balance;
    font-weight: 700;
  }
  .hero h1 .accent { color: #F5C84B; }
  .hero-lead {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(255,255,255,0.72);
    max-width: 56ch;
    margin: 0 0 var(--s-6);
  }
  .hero-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }
  .hero-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500;
  }
  .hero-pill svg { color: rgba(255,255,255,0.88); }
  .hero-pill .gold { color: #F5C84B; }

  .hero-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
  .cta-tel-large {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 17px 22px;
    background: var(--accent-urgent); color: #fff;
    border-radius: var(--r-md);
    font-weight: 700; font-size: 16px;
    box-shadow: var(--shadow-cta);
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast);
    text-decoration: none;
  }
  .cta-tel-large:hover { background: var(--accent-urgent-hover); color: #fff; transform: translateY(-2px); }
  .cta-tel-large .num { font-family: var(--font-mono); font-size: 15px; opacity: 0.95; font-weight: 500; margin-left: 6px; }
  .btn-ghost-on-dark {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 17px 22px; font-size: 16px; font-weight: 600;
    border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--dur-base), border-color var(--dur-base);
  }
  .btn-ghost-on-dark:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }

  .cta-whatsapp {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 17px 22px;
    background: #25D366; color: #fff;
    border-radius: var(--r-md);
    font-weight: 700; font-size: 16px;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast);
  }
  .cta-whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); }
  .cta-whatsapp svg { flex-shrink: 0; }

  .hero-reciprocity {
    margin: var(--s-4) 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.65);
    max-width: 56ch;
    font-style: italic;
  }

  /* Hero photo column */
  .hero-photo-wrap {
    position: relative;
  }
  .hero-photo {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: var(--r-xl);
    display: block;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  }
  .availability-badge {
    position: absolute;
    bottom: 20px; left: 20px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: rgba(26, 27, 31, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .availability-badge .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: pulse-green 1.8s var(--ease-out) infinite;
  }
  @keyframes pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
  }

  /* ====== TRUST BAND ====== */
  .trust-band {
    background: var(--ec-anthracite-dark);
    color: #fff;
    padding: var(--s-6) 0;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
  }
  .trust-item {
    display: flex; flex-direction: column; gap: 2px;
  }
  .trust-item .big { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2; }
  .trust-item .small { font-size: 13px; color: rgba(255,255,255,0.6); }
  @media (max-width: 880px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
  }
  @media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
  }

  /* ====== SECTION HEADERS ====== */
  .section { padding-block: var(--s-9); }
  @media (max-width: 880px) { .section { padding-block: var(--s-8); } }
  .section-head { max-width: 740px; margin-bottom: var(--s-8); }
  .section-head .eyebrow { color: var(--ec-anthracite-light); font-weight: 700; letter-spacing: var(--tracking-caps); }
  .section-head h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    margin: 0 0 var(--s-4);
  }
  .section-head .lead { margin: 0; font-size: clamp(16px, 1.4vw, 20px); }
  .section-dark .section-head h2 { color: #fff; }
  .section-dark .section-head .lead { color: rgba(255,255,255,0.7); }

  /* ====== SERVICES ====== */
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } }
  .svc-card {
    background: var(--bg-alt);
    border-radius: var(--r-xl);
    padding: var(--s-7);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    border: 1px solid transparent;
    display: flex; flex-direction: column; gap: var(--s-3);
  }
  .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(42,44,48,0.12);
    border-color: var(--border);
  }
  .svc-icon {
    width: 72px; height: 72px;
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--ec-anthracite-dark);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    margin-bottom: var(--s-3);
    overflow: hidden;
  }
  .svc-icon img { width: 56px; height: 56px; object-fit: contain; }
  .svc-card h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
  .svc-card p { margin: 0; color: var(--fg-soft); font-size: 16px; line-height: 1.55; }

  /* ====== PROCESS ====== */
  .process { background: var(--bg-alt); }
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    counter-reset: step;
  }
  @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
  @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
  .step {
    display: flex; flex-direction: column;
    text-align: center;
    align-items: center;
    position: relative;
  }
  .step-mascot {
    width: 130px; height: 130px;
    border-radius: 50%;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-4);
    position: relative;
    border: 1px solid var(--border);
  }
  .step-mascot img {
    width: 95px; height: 95px;
    object-fit: contain;
  }
  /* Different mascot poses via transform */
  .step:nth-child(1) .step-mascot img { transform: scaleX(-1) rotate(-3deg); }
  .step:nth-child(2) .step-mascot img { transform: rotate(2deg); }
  .step:nth-child(3) .step-mascot img { transform: scaleX(-1) rotate(4deg) scale(1.05); }
  .step:nth-child(4) .step-mascot img { transform: rotate(-2deg) scale(1.02); }

  .step-num {
    position: absolute;
    top: -8px; right: -8px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ec-anthracite-dark);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(42,44,48,0.25);
  }
  .step h3 { font-size: 18px; margin: 0 0 var(--s-2); }
  .step p { font-size: 15px; color: var(--fg-soft); margin: 0; line-height: 1.55; max-width: 28ch; }

  /* connecting dotted line on desktop */
  @media (min-width: 981px) {
    .steps { position: relative; }
    .steps::before {
      content: '';
      position: absolute;
      top: 65px; left: 12.5%; right: 12.5%;
      border-top: 2px dashed var(--ec-gray-300);
      z-index: 0;
    }
    .step { z-index: 1; }
  }

  /* ====== WHY US ====== */
  .why-us {
    background: #2A2B2F;
    color: #fff;
    padding-block: var(--s-9);
    position: relative;
  }
  .why-us .section-head h2 { color: #fff; }
  .why-us .section-head .lead { color: rgba(255,255,255,0.82); }
  .why-us .section-head .eyebrow { color: rgba(255,255,255,0.7); }
  .why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7);
    margin-top: var(--s-8);
  }
  @media (max-width: 880px) {
    .why-us-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  }
  @media (max-width: 560px) {
    .why-us-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  }
  .why-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .why-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(217, 130, 75, 0.16);
    border: 1px solid rgba(217, 130, 75, 0.42);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-warm);
    margin-bottom: var(--s-2);
  }
  .why-card h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
  }
  .why-card p {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    margin: 0;
  }

  /* ====== FAMILY ====== */
  .family { background: #fff; }
  .family-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    max-width: 760px;
    margin: var(--s-7) auto 0;
  }
  @media (max-width: 720px) {
    .family-trio { grid-template-columns: 1fr; gap: var(--s-3); }
  }
  .family-card {
    background: var(--ec-gray-50);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6) var(--s-5);
    text-align: center;
    transition: transform var(--dur-base), box-shadow var(--dur-base);
  }
  .family-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  }
  .family-photo {
    width: 160px; height: 160px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    overflow: hidden;
    background: var(--ec-gray-100);
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(42,44,48,0.10);
  }
  .family-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    display: block;
  }
  .family-name {
    font-size: 19px;
    font-weight: 700;
    color: var(--fg);
  }
  .family-role {
    font-size: 14px;
    color: var(--fg-soft);
    margin-top: 4px;
  }
  .family-quote {
    margin: var(--s-3) 0 0;
    font-size: 14.5px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ec-anthracite);
    text-wrap: balance;
  }
  @media (max-width: 720px) {
    .family-photo { width: 140px; height: 140px; }
  }

  /* ====== REVIEWS (DARK) ====== */
  .reviews { background: var(--ec-anthracite); color: #fff; padding-block: var(--s-9); }
  .reviews .section-head h2 { color: #fff; }
  .reviews .section-head .lead { color: rgba(255,255,255,0.7); }
  .reviews-head-row {
    display: flex; justify-content: space-between; align-items: end; gap: var(--s-5);
    flex-wrap: wrap; margin-bottom: var(--s-7);
  }
  .reviews-summary {
    display: flex; align-items: center; gap: var(--s-3);
    font-size: 14px; color: rgba(255,255,255,0.7);
  }
  .reviews-summary .stars { color: #F5C84B; font-size: 18px; letter-spacing: 1px; }
  .reviews-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  }
  @media (max-width: 1024px) { .reviews-grid { grid-template-columns: 1fr; } }
  .review-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-4);
    position: relative;
  }
  .review-stars { color: #F5C84B; font-size: 20px; letter-spacing: 2px; }
  .review-quote {
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    min-height: calc(1.6em * 4);
  }
  .review-meta { display: flex; align-items: center; gap: var(--s-3); }
  .review-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    border: 1px solid rgba(255,255,255,0.18);
  }
  .review-name { font-weight: 600; color: #fff; font-size: 15px; }
  .review-date { font-size: 13px; color: rgba(255,255,255,0.55); }
  .google-mark {
    position: absolute; bottom: 24px; right: 24px;
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500;
  }
  .reviews-cta-row { margin-top: var(--s-7); display: flex; justify-content: center; }

  /* ====== PARTNERS ====== */
  .partners { padding-block: var(--s-8); }
  .partners-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--s-4);
    align-items: center;
    margin-top: var(--s-6);
  }
  @media (max-width: 1100px) { .partners-strip { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
  @media (max-width: 720px) { .partners-strip { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
  @media (max-width: 480px) { .partners-strip { grid-template-columns: repeat(2, 1fr); } }
  .partner-logo {
    height: 48px;
    display: flex; align-items: center; justify-content: center;
    color: #9CA3AF;
    filter: grayscale(100%);
    opacity: 0.7;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    transition: opacity var(--dur-base);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    padding: 0 var(--s-4);
    background: var(--bg-alt);
  }
  .partner-logo:hover { opacity: 1; }
  .partner-logo svg { color: currentColor; }

  /* ====== REFERENCES (logos clients) ====== */
  .references { padding-block: var(--s-8); background: var(--bg-alt); }
  .references-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-7);
    align-items: center;
    margin-top: var(--s-6);
  }
  @media (max-width: 880px) { .references-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
  .reference-logo {
    height: 72px;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-4) var(--s-5);
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter var(--dur-base), opacity var(--dur-base);
  }
  .reference-logo:hover { filter: grayscale(0); opacity: 1; }
  .reference-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

  /* ====== ZONES ====== */
  .zones { background: var(--bg-alt); }
  .zones-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
    align-items: center;
  }
  @media (max-width: 880px) { .zones-grid { grid-template-columns: 1fr; } }
  .zones-map {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    aspect-ratio: 16/10;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .zones-map svg { width: 100%; height: 100%; }
  .zones-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .zone-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .zone-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--fg);
    border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500;
    text-decoration: none;
    transition: all var(--dur-base);
  }
  .zone-chip:hover {
    background: var(--ec-anthracite-dark);
    color: #fff;
    border-color: var(--ec-anthracite-dark);
    transform: translateY(-1px);
  }
  .zone-chip.primary {
    background: var(--ec-anthracite-dark);
    color: #fff;
    border-color: var(--ec-anthracite-dark);
  }
  .zone-chip.primary:hover { background: #000; border-color: #000; }
  .zones-aside h3 { font-size: 22px; margin: 0 0 var(--s-3); }
  .zones-aside p { color: var(--fg-soft); margin: 0 0 var(--s-5); }

  /* ====== FAQ ====== */
  .faq-layout {
    display: grid; grid-template-columns: 1fr; gap: var(--s-5);
    max-width: 880px; margin-inline: auto;
  }
  .faq-item {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
  }
  .faq-item.open { border-color: var(--ec-anthracite-light); box-shadow: var(--shadow-card); }
  .faq-q-btn {
    width: 100%; background: none; border: 0; padding: var(--s-5) var(--s-6);
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
    text-align: left; cursor: pointer;
    font: inherit; color: var(--fg);
    font-size: 17px; font-weight: 600;
  }
  .faq-q-left { display: flex; align-items: center; gap: var(--s-4); flex: 1; }
  .faq-mascot {
    width: 36px; height: 36px;
    flex: none;
    object-fit: contain;
    opacity: 0.75;
  }
  .faq-q-text { flex: 1; }
  .faq-plus {
    flex: none;
    width: 32px; height: 32px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-base), background var(--dur-base), color var(--dur-base);
    color: var(--fg);
  }
  .faq-item.open .faq-plus {
    background: var(--ec-anthracite-dark);
    border-color: var(--ec-anthracite-dark);
    color: #fff;
    transform: rotate(45deg);
  }
  .faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height 320ms var(--ease-out);
  }
  .faq-item.open .faq-a { max-height: 1200px; }
  .faq-a-inner {
    padding: 0 var(--s-6) var(--s-5) calc(var(--s-6) + 36px + var(--s-4));
    color: var(--fg-soft);
    line-height: 1.65;
    font-size: 16px;
  }
  @media (max-width: 600px) {
    .faq-q-btn { padding: var(--s-4) var(--s-5); font-size: 16px; }
    .faq-mascot { width: 28px; height: 28px; }
    .faq-a-inner { padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 28px + var(--s-3)); font-size: 15px; }
  }

  /* ====== FINAL CTA ====== */
  .final-cta {
    background: #2A2B2F;
    color: #fff;
    padding-block: var(--s-9);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .final-cta .container { position: relative; }
  .final-mascot {
    width: 100%;
    max-width: 760px;
    height: auto;
    object-fit: contain;
    margin: 0 auto var(--s-5);
    display: block;
  }
  .final-cta h2 {
    color: #fff;
    font-size: clamp(28px, 3.6vw, 44px);
    margin: 0 0 var(--s-4);
    text-wrap: balance;
  }
  .final-cta p {
    color: rgba(255,255,255,0.72);
    font-size: clamp(16px, 1.4vw, 20px);
    max-width: 50ch; margin: 0 auto var(--s-7);
  }
  .final-tel {
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding: 22px 36px;
    background: var(--accent-urgent); color: #fff;
    border-radius: var(--r-md);
    font-weight: 700; font-size: 22px;
    box-shadow: 0 10px 30px rgba(138,34,42,0.35);
    transition: background var(--dur-base), transform var(--dur-fast);
    text-decoration: none;
  }
  .final-tel:hover { background: var(--accent-urgent-hover); color: #fff; transform: translateY(-2px); }
  .final-tel .num { font-family: var(--font-mono); letter-spacing: 0.01em; }
  @media (max-width: 480px) {
    .final-tel { font-size: 18px; padding: 18px 24px; gap: var(--s-2); }
  }
  .final-mini { margin-top: var(--s-6); display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap; color: rgba(255,255,255,0.65); font-size: 14px; }
  .final-mini span { display: inline-flex; align-items: center; gap: 6px; }
  .final-mini span::before {
    content: '';
    width: 16px; height: 16px;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 10px; background-position: center; background-repeat: no-repeat;
  }

  /* ====== CTA FINAL — PAGES VILLES ====== */
  .cta-final {
    background: #2A2B2F;
    padding-block: var(--s-9);
  }
  .cta-final-inner {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    max-width: 900px;
    margin: 0 auto;
  }
  .cta-final-inner .final-mascot {
    width: 320px;
    min-width: 220px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
  }
  .cta-final-text { flex: 1; }
  .cta-final-text h2 {
    color: #fff;
    font-size: clamp(24px, 3vw, 38px);
    margin: 0 0 var(--s-4);
    text-wrap: balance;
  }
  .cta-final-text > p {
    color: rgba(255,255,255,0.72);
    font-size: clamp(15px, 1.3vw, 18px);
    margin: 0 0 var(--s-6);
  }
  @media (max-width: 680px) {
    .cta-final-inner {
      flex-direction: column;
      text-align: center;
    }
    .cta-final-inner .final-mascot { width: 240px; }
    .cta-final-text .hero-cta-row { justify-content: center; }
  }

  /* ====== FOOTER ====== */
  .site-footer {
    background: #1A1B1F;
    color: rgba(255,255,255,0.65);
    padding: var(--s-8) 0 var(--s-5);
    font-size: 14px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s-7);
    margin-bottom: var(--s-7);
  }
  @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
  @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
  .footer-col h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--s-4); font-weight: 600; }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color var(--dur-base); }
  .footer-col a:hover { color: #fff; }
  .footer-brand img { height: 56px; width: auto; margin-bottom: var(--s-3); }
  .footer-brand p { margin: 0; line-height: 1.7; }
  .footer-bottom {
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
  }
  .footer-bottom a { color: rgba(255,255,255,0.5); }
  .footer-bottom a:hover { color: #fff; }

  /* ====== STICKY MOBILE BAR ====== */
  .sticky-mobile {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 200;
    height: 64px;
  }
  .sticky-mobile a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 100%;
    color: #fff;
    text-decoration: none;
    font-weight: 700; font-size: 16px;
  }
  .sticky-mobile a.tel { background: var(--accent-urgent); }
  .sticky-mobile a.wa { background: #25D366; }
  .sticky-mobile a .num { font-family: var(--font-mono); font-size: 15px; }
  @media (max-width: 720px) {
    .sticky-mobile { display: grid; grid-template-columns: 1fr 1fr; }
    body { padding-bottom: 64px; }
  }

  /* small util */
  .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;
  }

  /* Internal link with arrow (used on service pages cross-linking) */
  .link-arrow {
    color: var(--ec-anthracite-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1px;
    transition: border-color var(--dur-base);
  }
  .link-arrow:hover { border-bottom-color: var(--ec-anthracite-dark); }