@font-face{
    font-family:'Ethnocentric';
    src:url('../fonts/ethnocentric_rg.woff') format('woff');
    font-weight:normal; font-style:normal; font-display:swap;
  }

  :root{
    /* ---- PROMAGIC token system (matched to reference brand's palette) ---- */
    --navy:      #16294D;
    --navy-2:    #1E3660;
    --blue:      #1E4C8A;     /* header call button */
    --blue-logo: #2660D6;     /* "PRO" in wordmark */
    --orange:    #E8622C;     /* "MAGIC" in wordmark + eyebrows */
    --orange-2:  #E14B3E;     /* gradient end for CTA buttons */
    --paper:     #FFFFFF;
    --paper-2:   #F7F8FA;
    --tile:      #EEF1F6;
    --ink:       #1A2332;
    --gray-900:  #111827;
    --gray:      #6B7280;
    --green:     #1E8E5A;
    --radius:    10px;
    --font: 'Inter', sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink); line-height:1.6; overflow-x:hidden; background:white;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  a[href], button, input[type="submit"], [role="button"]{ cursor:pointer; touch-action:manipulation; }
  ul{ list-style:none; }
  .wrap{ max-width:1500px; margin:0 auto; padding:0 24px; }
  @media (max-width:560px){ .wrap{ padding:0 18px; } }
  h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.01em; line-height:1.15; }
  h2{ font-weight:700; font-size:3rem; color: var(--gray-900); }
  .eyebrow{
    font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
    color: var(--orange); margin-bottom:10px; display:block;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius: var(--radius);
    font-weight:700; font-size:15px; border:2px solid transparent; cursor:pointer;
  }
  .btn-cta{
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color:#fff;
    box-shadow:0 6px 18px rgba(232,98,44,0.35);
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  }
  .btn-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(232,98,44,0.45);
    filter:brightness(1.08);
  }
  .btn-blue{ background: var(--blue); color:#fff; }
  .btn-call{
    background: linear-gradient(135deg, var(--blue), var(--blue-logo));
    color:#fff; padding:12px 22px;
    box-shadow:0 6px 18px rgba(30,76,138,0.35);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .btn-call:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(30,76,138,0.45);
    filter:brightness(1.08);
  }
  .btn-outline{ border-color:#E5E7EB; color: var(--navy); background:#fff; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
  .btn-outline:hover{ border-color: var(--blue-logo); transform:translateY(-2px); box-shadow:0 10px 26px rgba(30,76,138,0.45); }

  /* ---------- Announcement bar ---------- */
  .announce{ display:block; background:#EEF2F6; text-align:center; font-size:14px; padding:10px 16px; color:var(--ink); text-decoration:none; cursor:pointer; transition:background 0.25s ease; }
  .announce:hover{ background:#fff; }
  .announce strong{ color: var(--orange); }
  .announce-link{ color:var(--orange); font-weight:700; text-decoration:underline; }
  @media (max-width:900px){
    .announce strong{ display:none; }
  }

  /* ---------- Header ---------- */
  header{ position:sticky; top:0; z-index:50; padding-top:env(safe-area-inset-top); }
  header::before{
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,0.5);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid rgba(255,255,255,0.4);
    box-shadow:0 8px 32px rgba(0,0,0,0.08);
  }
  .header-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:12px; }
  @media (max-width:560px){ .header-inner{ padding:12px 18px; } .logo{ font-size:19px; } }
  .logo{ font-size:24px; display:flex; flex-direction:column; line-height:1; }
  .logo .word{ font-family:'Ethnocentric', var(--font); display:flex; }
  .logo .pro{ color: var(--blue-logo); }
  .logo .magic{ color: var(--orange); }
  .logo .tag{ font-family: var(--font); font-size:9px; font-weight:600; letter-spacing:0.16em; color: var(--gray); margin-top:3px; }
  .desktop-nav ul{ display:flex; gap:28px; }
  .desktop-nav a{ font-size:14px; font-weight:600; color:#374151; }
  .desktop-nav a:hover{ color: var(--navy); }

  /* ---------- Mobile nav toggle (hamburger) ---------- */
  .header-actions{ display:flex; align-items:center; gap:10px; }
  .nav-toggle{
    display:none; width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,0.6);
    background:rgba(255,255,255,0.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    -webkit-tap-highlight-color:transparent; transition:border-color 0.2s ease, background 0.2s ease;
  }
  .nav-toggle:hover{ border-color:var(--blue-logo); background:rgba(255,255,255,0.7); }
  .nav-toggle span{ display:block; width:20px; height:2px; background:var(--navy); position:relative; transition:background 0.2s ease; }
  .nav-toggle span::before, .nav-toggle span::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:var(--navy); transition:transform 0.25s ease, top 0.25s ease;
  }
  .nav-toggle span::before{ top:-6px; }
  .nav-toggle span::after{ top:6px; }
  .nav-toggle[aria-expanded="true"]{ background:var(--paper-2); }
  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  /* .mobile-nav is a sibling of <header>, NOT nested inside it — this is
     deliberate: an ancestor with backdrop-filter/transform/filter turns into
     the containing block for position:fixed children, which silently breaks
     an off-canvas drawer if it's nested inside a blurred sticky header. */
  .mobile-nav{ display:none; }
  .nav-backdrop{ display:none; }

  @media (max-width:900px){
    .desktop-nav{ display:none; }
    .nav-toggle{ display:flex; }
    .header-actions .btn-call{ display:none; }

    .mobile-nav{
      display:flex; flex-direction:column;
      position:fixed; top:0; right:0; bottom:0; width:min(340px, 86vw);
      background:rgba(255,255,255,0.68);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
      backdrop-filter:blur(24px) saturate(180%);
      border-left:1px solid rgba(255,255,255,0.5);
      box-shadow:-16px 0 48px rgba(15,27,51,0.2);
      transform:translateX(100%); transition:transform 0.32s cubic-bezier(.4,0,.2,1);
      z-index:1000; overflow-y:auto; -webkit-overflow-scrolling:touch;
      padding-bottom:env(safe-area-inset-bottom);
    }
    .mobile-nav.nav-open{ transform:translateX(0); }

    .nav-drawer-head{
      display:flex; align-items:center; justify-content:space-between;
      padding:calc(18px + env(safe-area-inset-top)) 20px 18px;
      border-bottom:1px solid rgba(255,255,255,0.5); flex-shrink:0;
    }
    .nav-drawer-logo{ font-size:20px; }
    .nav-close{
      display:flex; align-items:center; justify-content:center;
      width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.5);
      font-size:22px; line-height:1; color:var(--gray); cursor:pointer; -webkit-tap-highlight-color:transparent;
      transition:background 0.2s ease, color 0.2s ease;
    }
    .nav-close:hover{ background:#fff; color:var(--orange); }

    .mobile-nav ul{ display:flex; flex-direction:column; gap:0; padding:8px 20px; flex:1; }
    .mobile-nav li{ opacity:0; transform:translateX(14px); transition:opacity 0.3s ease, transform 0.3s ease; }
    .mobile-nav.nav-open li{ opacity:1; transform:translateX(0); }
    .mobile-nav.nav-open li:nth-child(1){ transition-delay:0.05s; }
    .mobile-nav.nav-open li:nth-child(2){ transition-delay:0.09s; }
    .mobile-nav.nav-open li:nth-child(3){ transition-delay:0.13s; }
    .mobile-nav.nav-open li:nth-child(4){ transition-delay:0.17s; }
    .mobile-nav.nav-open li:nth-child(5){ transition-delay:0.21s; }
    .mobile-nav.nav-open li:nth-child(6){ transition-delay:0.25s; }
    .mobile-nav a{
      display:flex; align-items:center; min-height:52px; font-size:16.5px; font-weight:600;
      color:var(--ink); border-bottom:1px solid rgba(255,255,255,0.5);
    }
    .mobile-nav a:hover{ color:var(--blue-logo); }

    .nav-drawer-actions{
      display:flex; flex-direction:column; gap:10px; padding:18px 20px calc(20px + env(safe-area-inset-bottom));
      border-top:1px solid rgba(255,255,255,0.5); flex-shrink:0; background:rgba(255,255,255,0.35);
    }
    .nav-drawer-actions .btn{ width:100%; justify-content:center; }

    .nav-backdrop{
      display:block; position:fixed; inset:0; background:rgba(15,27,51,0.35);
      -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
      z-index:999; opacity:0; pointer-events:none; transition:opacity 0.3s ease;
    }
    .nav-backdrop.nav-open{ opacity:1; pointer-events:auto; }
  }

  @media (max-width:380px){
    .mobile-nav{ width:100%; }
  }

  /* ---------- Hero ---------- */
  .hero{ padding:64px 0 80px; background: linear-gradient(135deg, #E7EEFB 0%, #FFFFFF 55%, #FFE8DC 100%); }
  .hero-dark{ background:#1A3A66; }
  .hero-dark h1{ color:#fff; }
  .hero-dark h1 .accent{ color:#fff; }
  .hero.hero-dark p.lede{ color:#a6c3e8; }
  .hero-dark .badge-pill{ background:rgba(255,255,255,0.12); color:#fff; }
  .hero-dark hr{ border:0; border-top:1px solid rgba(255,255,255,0.15); margin:40px 26px 0; }
  .trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1200px; margin:48px auto 0; padding:28px 0 0 12px; }
  .t-item{ display:flex; align-items:center; gap:14px; text-align:left; }
  .t-item .ico{ width:40px; height:40px; border-radius:10px; background:rgba(49,78,118,0.5); color:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .t-item .ico i{ font-size:18px; }
  .t-num{ font-size:18px; font-weight:800; color:#fff; margin-bottom:4px; display:block; }
  .t-label{ font-size:13.5px; color:rgba(255,255,255,0.65); }
  .hero-dark .hero-img-wrap{ transform:none; transition:none; }
  .hero-dark .hero-img-wrap > img{ box-shadow:none; transition:none; }
  .hero-dark .hero-photo:hover .hero-img-wrap{ transform:none; }
  .hero-dark .hero-photo:hover .hero-img-wrap > img{ box-shadow:none; }
  .hero-dark .hero-img-wrap > img{ max-width:480px; height:auto; object-fit:contain; }
  .hero-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
  @media (max-width:1030px){
    .hero-dark .hero-grid{ grid-template-columns:1fr; }
    .hero-dark .hero-photo{ display:none; }
    .hero-dark .hero-actions{ justify-content:center; }
    .trust-strip{ grid-template-columns:repeat(2,1fr); gap:32px 24px; }
  }
  @media (max-width:560px){
    .hero-dark h1{ font-size:2.25em; text-align:left; }
    .hero-dark p.lede{ font-size:15px; }
    .hero-dark .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-dark .hero-actions .btn{ width:100%; justify-content:center; }
    .trust-strip{ grid-template-columns:1fr; gap:24px; margin:48px 0 0; }
    .t-item{ padding-bottom:0; }
  }
  .badge-pill{
    display:inline-block; background:#E7EEFB; color: var(--blue);
    font-size:13px; font-weight:600; padding:8px 16px; border-radius:999px; margin-bottom:22px;
  }
  @media (max-width:900px){
    .hero{ padding:44px 0 56px; text-align:center; }
    .hero .hero-photo{ display:none; }
    .hero .hero-actions{ justify-content:center; }
    .hero .trust-row{ justify-content:center; }
    .hero p.lede{ max-width:none; margin-left:auto; margin-right:auto; }
    .hero h1, .hero-dark h1{ font-size:2.25em; text-align:left; }
  }
  @media (max-width:560px){
    .hero h1{ font-size:2.25em; text-align:left; }
    .hero p.lede{ font-size:15px; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-actions .btn{ width:100%; justify-content:center; }
    .trust-row{ gap:14px 20px; justify-content:flex-start; text-align:left; }
    .hero-img-wrap > img{ height:320px; }
    .rating-card{ left:8px; bottom:-14px; padding:8px 10px; }
    .g-cell{ width:36px; height:36px; }
    .google-g{ width:22px; height:22px; }
  }
  .hero h1{ font-size:48px; margin-bottom:20px; }
  .hero h1 .accent{ color: var(--blue-logo); }
  .hero p.lede{ font-size:17px; color: var(--gray); max-width:480px; margin-bottom:28px; }
  .hero-actions{ display:flex; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
  .trust-row{ display:flex; gap:28px; flex-wrap:wrap; }
  .trust-row .item{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#374151; }
  .hero-photo{ position:relative; }
  .hero-img-wrap{
    position:relative; transform:rotate(-2deg); transform-origin:center;
    transition:transform 0.4s ease;
  }
  .hero-img-wrap > img{
    border-radius:16px; width:100%; height:520px; object-fit:cover;
    box-shadow:0 16px 40px rgba(0,0,0,0.10);
    transition:box-shadow 0.4s ease;
  }
  .hero-photo:hover .hero-img-wrap{
    transform:rotate(0deg);
  }
  .hero-photo:hover .hero-img-wrap > img{
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
  }
  .rating-card{
    position:absolute; left:-16px; bottom:-16px; background:#fff; border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12); padding:10px 14px;
    display:flex; align-items:center; gap:10px;
  }
  .g-cell{
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px;
  }
  .google-g{ width:28px; height:28px; }
  .rating-info{ display:flex; flex-direction:column; gap:2px; }
  .rating-card .stars{ color:#F5A623; font-size:17px; }
  .stars i{ margin-right:2px; color:#F5A623; }
  .rating-meta{ display:flex; align-items:baseline; gap:4px; font-size:12px; color: var(--ink); }
  .rating-card .num{ font-weight:800; }
  .rating-card .sep{ color: #B0B6BF; }
  .rating-card .count{ font-size:12px; color: var(--ink); }
  .rating-card-fixed{
    position:fixed; left:20px; bottom:20px; z-index:100;
    bottom:calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 12px 32px rgba(0,0,0,0.18); cursor:pointer;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .rating-card-fixed:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 15px 36px rgba(0,0,0,0.22);
  }
  @media (max-width:560px){
    .rating-card-fixed{
      left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:8px 10px;
    }
    .rating-card-fixed .g-cell{ width:34px; height:34px; }
    .rating-card-fixed .google-g{ width:20px; height:20px; }
    .rating-card-fixed .rating-meta{ font-size:11px; }
  }
  @media (max-width:360px){
    .rating-card-fixed .count{ display:none; }
    .rating-card-fixed .sep{ display:none; }
  }

  /* ---------- Section shell ---------- */
  section{ padding:88px 0; }
  .section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
  .section-head h2{ font-size:3rem; margin-bottom:12px; }
  .section-head p{ color: var(--gray); font-size:15px; }
  .head-g{ display:inline-block; width:20px; height:20px; vertical-align:-4px; margin-right:8px; }
  .section-head p strong{ font-weight:700; color:var(--ink); }
  @media (max-width:900px){
    section{ padding:56px 0; }
    h1{ font-size:34px; }
    h2{ font-size:2.1rem; }
    .section-head{ margin-bottom:36px; }
    .section-head h2{ font-size:2.1rem; }
  }
  @media (max-width:560px){
    section{ padding:44px 0; }
    h1{ font-size:26px; }
    h2{ font-size:1.7rem; }
    .section-head h2{ font-size:1.7rem; }
  }

  /* ---------- Services ---------- */
  .service-group-head{ display:flex; align-items:center; gap:10px; margin:36px 0 20px; padding-bottom:12px; border-bottom:1px solid #EEF0F3; }
  .service-group-head h3{ font-size:20px; }
  .service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:900px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .service-grid{ grid-template-columns:1fr; } }
  .service-card{ background:linear-gradient(180deg, #fff 0%, var(--paper-2) 100%); border:1px solid #EEF0F3; border-radius:14px; padding:26px 22px; position:relative; box-shadow:0 6px 18px rgba(20,40,80,0.08); cursor:pointer; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
  a.service-card{ display:block; text-decoration:none; color:inherit; }
  .service-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(20,40,80,0.15); }
  .service-card::before{
    content:""; position:absolute; inset:0; border-radius:14px; padding:2px;
    background:conic-gradient(from var(--angle), transparent 0%, #1a3a66 30%, transparent 55%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity 0.3s ease;
    animation:spin-border 2.5s linear infinite;
  }
  .service-card:hover::before{ opacity:1; }
  .service-icon{ width:48px; height:48px; border-radius:12px; background:transparent; color:var(--blue-logo); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:20px; transition:transform 0.25s ease; }
 .service-icon img{ width:28px; height:28px; object-fit:contain; }
  .service-card:hover .service-icon{ transform:scale(1.08) rotate(-4deg); }
  .service-card h4{ font-size:16px; margin-bottom:6px; }
  .service-card p{ font-size:13.5px; color: var(--gray); }

  /* ---------- Why us ---------- */
  .why-us{ position:relative; background-color:#1A3A66; background-image:radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px); background-size:26px 26px; color:#fff; padding:100px 0 110px; }
  .why-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:80px; pointer-events:none; }
  .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  @media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } }
  .why-us h2{ font-size:34px; margin:8px 0 18px; color:#fff; }
  .why-us .lede{ color:rgba(255,255,255,0.7); margin-bottom:30px; font-size:15px; }
  .why-feature{ display:flex; gap:14px; margin-bottom:22px; }
  .why-feature .ico{ width:40px; height:40px; border-radius:10px; background:rgba(49,78,118,0.5); color:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .why-feature h4{ font-size:16px; margin-bottom:4px; }
  .why-feature p{ font-size:13.5px; color:rgba(255,255,255,0.65); }
  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:900px){
    .why-us{ padding:64px 0 76px; }
    .why-us h2{ font-size:26px; }
  }
  @media (max-width:400px){
    .stat-grid{ grid-template-columns:1fr; }
  }
  .stat-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:24px; text-align:center; transition:background 0.25s ease, border-color 0.25s ease; }
  .stat-card:hover{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); }
  .stat-card .num{ font-size:32px; font-weight:800; color: var(--orange); display:flex; align-items:center; justify-content:center; gap:6px; }
  .stat-card .g-icon{ width:28px; height:28px; }
  .stat-card .num-stars i{ color:#F5A623; font-size:20px; }
  .stat-card .num-stars{ display:flex; justify-content:center; gap:2px; margin-top:6px; }
  .stat-card .label{ font-size:13px; color:rgba(255,255,255,0.65); margin-top:4px; }

  /* ---------- Offers ---------- */
  .offers{ background:#F3F4F6; }
  .offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:900px){ .offer-grid{ grid-template-columns:1fr; } }
  .offer-card{ text-align:center; background: var(--paper-2); border-radius:14px; padding:32px 24px; position:relative; cursor:pointer; box-shadow:0 10px 28px rgba(20,40,80,0.15); transition:transform 0.25s ease, box-shadow 0.25s ease; }
  .offer-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,40,80,0.14); }
  .offer-card::before{
    content:""; position:absolute; inset:0; border-radius:14px; padding:2px; pointer-events:none;
    background:conic-gradient(from var(--angle), transparent 0%, #1a3a66 30%, transparent 55%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity 0.3s ease;
    animation:spin-border 2.5s linear infinite;
  }
  .offer-card:hover::before{ opacity:1; }
  @property --angle{ syntax:"<angle>"; initial-value:0deg; inherits:false; }
  @keyframes spin-border{ to{ --angle:360deg; } }
  .offer-icon{ width:56px; height:56px; border-radius:50%; background:#FDEDE6; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px; color: var(--orange); }
  .offer-card h4{ font-size:18px; margin-bottom:10px; }
  .offer-card p{ font-size:14px; color: var(--gray); margin-bottom:18px; }
  .offer-card strong{ color: var(--orange); }
  .offer-note{ text-align:center; font-size:13px; color:#A9AFB9; margin-top:24px; }

  /* ---------- Testimonials ---------- */
  .testi-slider{ overflow:hidden; }
  .testi-arrow{
    width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #E5E7EB;
    color:#6B7280; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  @media (max-width:560px){ .testi-arrow{ width:44px; height:44px; } }
  .testi-arrow:hover{ background:#F3F4F6; color:var(--orange); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
  .testi-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:24px; }
  .testi-track{ display:flex; gap:20px; transition:transform 0.5s ease; }
  .testi-card{ flex:0 0 calc((100% - 40px) / 3); }
  @media (max-width:900px){ .testi-card{ flex:0 0 100%; } }
  .testi-card{ background:#fff; border:1px solid #EEF0F3; box-shadow:0 4px 14px rgba(20,40,80,0.06); border-radius:14px; padding:24px; }
  .testi-dots{ display:flex; gap:8px; }
  .testi-dot{ width:8px; height:8px; border-radius:999px; background:#D1D5DB; border:0; padding:0; cursor:pointer; transition:width 0.3s ease, background 0.3s ease; }
  .testi-dot.active{ width:24px; background:var(--orange); }
  .testi-card .stars{ color:#F5A623; font-size:14px; margin-bottom:14px; }
  .testi-g{ display:inline-block; width:16px; height:16px; vertical-align:-2px; margin-right:6px; }
  .testi-card p{ font-size:14.5px; color:#374151; margin-bottom:18px; }
  .testi-who{ display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid #E5E7EB; }
  .testi-who .avatar{ width:36px; height:36px; border-radius:50%; background: var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
  .testi-who .name{ font-size:14px; font-weight:700; }
  .testi-who .loc{ font-size:12px; color: var(--gray); }

  /* ---------- Service areas ---------- */
  .areas-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:24px; }
  @media (max-width:900px){ .areas-grid{ grid-template-columns:1fr; } }
  .area-block iframe{ width:100%; height:230px; border:0; border-radius:12px; margin-bottom:14px; }
  @media (max-width:560px){
    .area-block iframe{ height:190px; }
    .area-callout{ flex-direction:column; align-items:flex-start; text-align:left; }
  }
  .area-title{ font-weight:700; margin-bottom:10px; }
  .area-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
  .area-list span{ font-size:13.5px; color:#374151; display:flex; align-items:center; gap:6px; }
  .area-list span::before{ content:"✓"; color: var(--green); font-weight:700; }
  .area-callout{
    display:flex; align-items:center; gap:16px; background:#E7EEFB; border-radius:12px; padding:20px 24px; margin-top:36px;
  }
  .area-callout h4{ font-size:15px; margin-bottom:4px; }
  .area-callout h4 i{ color: var(--blue); margin-right:8px; }
  .area-callout p{ font-size:13.5px; color:#374151; }
  .area-callout .btn{ margin-top:12px; padding:10px 20px; font-size:14px; }

  /* ---------- Gallery / sliders ---------- */
  .gallery-slider{ overflow:hidden; }
  .gallery-track{ display:flex; gap:20px; transition:transform 0.5s ease; }
  .gallery-track img{
    flex:0 0 calc((100% - 40px) / 3); height:300px; object-fit:cover; border-radius:14px;
    filter:blur(3px); opacity:0.55; transform:scale(0.94);
    transition:filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
  }
  .gallery-track img.active{
    filter:none; opacity:1; transform:scale(1);
    box-shadow:0 10px 26px rgba(20,40,80,0.18);
  }
  .gallery-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:24px; }
  .gallery-dots{ display:flex; gap:8px; }
  .gallery-dot{ width:8px; height:8px; border-radius:999px; background:#D1D5DB; border:0; padding:0; cursor:pointer; transition:width 0.3s ease, background 0.3s ease; }
  .gallery-dot.active{ width:24px; background:var(--orange); }
  @media (max-width:900px){ .gallery-track img{ flex:0 0 100%; height:240px; } }
  .action-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:900px){ .action-grid{ grid-template-columns:1fr; } }
  .action-grid video{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; background:#000; box-shadow:0 10px 28px rgba(20,40,80,0.15); }

  /* ---------- Brands ---------- */
  .brands{ background:#F3F4F6; }
  .brand-slider{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .brand-track{ display:flex; gap:48px; width:max-content; align-items:center; animation:brand-scroll 60s linear infinite; }
  .brand-track:hover{ animation-play-state:paused; }
  .brand-card{ display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .brand-card img{ width:170px; height:40px; object-fit:contain; opacity:.85; transition:opacity .3s ease, transform .3s ease; }
  .brand-card img:hover{ opacity:1; transform:scale(1.12); }
  @media (max-width:900px){ .brand-track{ gap:28px; } .brand-card img{ width:120px; height:32px; } }
  @keyframes brand-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- Final CTA + form ---------- */
  .cta-final{
    background-color:#1A3A66;
    background-image:radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
    background-size:26px 26px;
  }
  .cta-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; align-items:stretch; border-radius:18px; overflow:hidden; }
  @media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; border-radius:14px; } }
  .cta-left{ background:#fff; padding:44px; }
  .cta-left h2{ font-size:30px; margin-bottom:16px; }
  .cta-left p{ color: var(--gray); margin-bottom:24px; font-size:15px; }
  .cta-points li{ display:flex; gap:10px; font-size:14.5px; margin-bottom:12px; }
  .cta-points li::before{ content:"✓"; color: var(--green); font-weight:700; }
  .cta-right{ background:#fff; border-left:1px solid #EEF0F3; padding:44px; position:relative; }
  .offer-ribbon{ background:linear-gradient(90deg, var(--orange), var(--orange-2)); color:#fff; text-align:center; font-weight:700; font-size:15px; padding:10px 48px; border-radius:0; position:absolute; top:0; left:0; right:0; z-index:2; }
  @media (max-width:560px){
    .cta-left, .cta-right{ padding:28px 20px; }
    .cta-left h2{ font-size:24px; }
    .cta-right{ border-left:0; border-top:1px solid #EEF0F3; }
    .offer-ribbon{ font-size:13px; padding:10px 20px; }
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  @media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
  .field label{ font-size:13px; font-weight:600; margin-bottom:6px; display:block; }
  .field input, .field select, .field textarea{
    width:100%; padding:13px 14px; border:1px solid #E5E7EB; border-radius:10px; font-family:var(--font); font-size:14px; background: var(--paper-2);
  }
  .field{ margin-bottom:14px; }
  .field .errorlist{ list-style:none; margin:6px 0 0; padding:0; color:#B91C1C; font-size:12.5px; font-weight:600; }
  .field .errorlist li{ margin-bottom:2px; }
  /* iOS Safari zooms the page on focus if an input's font-size is under 16px */
  @media (max-width:900px){
    .field input, .field select, .field textarea{ font-size:16px; padding:12px 14px; }
  }

  /* ---------- Booking Modal ---------- */
  .booking-modal[hidden]{ display:none; }
  .booking-modal{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .modal-overlay{ position:absolute; inset:0; background:rgba(15,27,51,0.55); backdrop-filter:blur(2px); }
  .modal-box{ position:relative; background:var(--paper-2); border-radius:16px; padding:32px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 20px 50px rgba(15,27,51,0.3); }
  .modal-close{ position:absolute; top:10px; right:10px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:none; border:none; font-size:28px; line-height:1; color:var(--gray); cursor:pointer; padding:4px; }
  .modal-close:hover{ color:var(--orange); }
  @media (max-width:560px){ .modal-box{ padding:24px 20px; border-radius:14px; } }

  /* ---------- Footer ---------- */
  footer{ background:#0F1B33; color:rgba(255,255,255,0.65); padding:56px 0 28px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; margin-bottom:40px; }
  @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; } }
  @media (max-width:480px){
    .footer-grid{ grid-template-columns:1fr; gap:28px; }
    .footer-bottom{ flex-direction:column; text-align:center; gap:6px; }
  }
  footer h5{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
  footer ul li{ margin-bottom:10px; font-size:14px; }
  footer ul li a:hover{ color:#fff; }
  .social-row{ display:flex; gap:10px; margin-top:16px; }
  .social-row a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }