:root{
    --navy:#0D2C5A;
    --navy-2:#214E8A;
    --gold:#C9A15A;
    --bg-light:#F6F7F9;
    --white:#FFFFFF;
    --text:#2E2E2E;
    --radius-sm:12px;
    --radius-md:20px;
    --shadow-soft:0 8px 25px rgba(13,44,90,0.08);
    --shadow-lift:0 14px 34px rgba(13,44,90,0.14);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Rubik','Assistant',Arial,sans-serif;
    color:var(--text);
    background:var(--bg-light);
    direction:rtl;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;margin:0;padding:0;}
  button{font-family:inherit;cursor:pointer;}
  .container{width:100%;max-width:1280px;margin:0 auto;padding:0 32px;}

  /* ===================== TOP BAR ===================== */
  /* Glass-effect redesign: semi-transparent frosted background, thin gold
     hairline, very soft shadow, reduced height. Content/markup unchanged. */
  .topbar{
    height:34px;
    background:rgba(255,255,255,0.62);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid rgba(201,161,90,0.45);
    box-shadow:0 2px 10px rgba(13,44,90,0.05);
    display:flex;
    align-items:center;
  }
  .topbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:100%;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .topbar .container::-webkit-scrollbar{ display:none; }
  .topbar-social{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .topbar-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    width:22px;height:22px;
    transition:transform .25s ease, color .25s ease;
  }
  .topbar-social a:hover{
    transform:translateY(-3px) scale(1.08);
    color:var(--gold);
  }
  .topbar-social svg{width:100%;height:100%;}
  .topbar-social .tb-phone{
    display:flex;align-items:center;gap:6px;
    width:auto;height:auto;
    font-size:13px;font-weight:600;color:var(--navy);
    letter-spacing:.2px;
  }
  .topbar-social .tb-phone svg{width:16px;height:16px;flex:none;}
  .topbar-social .tb-phone:hover{color:var(--gold);transform:translateY(-3px) scale(1.04);}

  .topbar-info{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:13px;
    color:var(--navy);
  }
  .topbar-info a{
    display:flex;align-items:center;gap:6px;
    transition:transform .25s ease, color .25s ease;
  }
  .topbar-info a:hover{color:var(--navy-2);transform:translateY(-3px) scale(1.05);}
  .topbar-info svg{width:15px;height:15px;flex:none;color:var(--navy);}

  /* ===================== HEADER ===================== */
  .site-header{
    position:sticky;
    top:0;
    z-index:500;
    background:var(--white);
    height:88px;
    box-shadow:var(--shadow-soft);
    transition:box-shadow .3s ease, height .3s ease;
  }
  .site-header.scrolled{ box-shadow:0 12px 30px rgba(13,44,90,0.14); }

  .header-inner{
    max-width:1280px;
    margin:0 auto;
    padding:0 32px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
  }

  .header-start{
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:190px;
  }
  .header-end{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .main-nav{
    display:flex;
    align-items:center;
    gap:4px;
  }

  .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:4px;
    padding:12px 16px;
    font-size:17px;
    font-weight:600;
    color:var(--navy);
    border-radius:10px;
    transition:color .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .nav-link:hover{ color:var(--navy-2); background:#F2F5FA; }
  .nav-link svg.chev{width:12px;height:12px;transition:transform .25s ease;}
  .nav-item.dropdown:hover .nav-link svg.chev{ transform:rotate(180deg); }

  .nav-item.dropdown{ position:relative; }
  .dropdown-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:230px;
    background:var(--white);
    border-radius:12px;
    box-shadow:var(--shadow-lift);
    padding:10px;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:50;
  }
  .nav-item.dropdown:hover .dropdown-menu,
  .nav-item.dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .dropdown-menu a{
    display:block;
    padding:11px 14px;
    font-size:14.5px;
    color:var(--text);
    border-radius:8px;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .dropdown-menu a:hover{
    background:var(--bg-light);
    color:var(--navy);
    transform:translateX(-3px);
  }

  /* Logo, built into the header — the header itself gets a subtle built-in "shelf"
     (::before) sized to the header's own height, so the medallion reads as part of
     the header rather than an element pasted on top of it. The logo image itself is
     untouched (no added border/ring) — only its position gets a small gap (top:8px)
     from the header's top edge so it isn't flush against it. */
  .logo-wrap{
    position:absolute;
    top:8px;
    right:24px;
    width:176px;
    height:176px;
    z-index:60;
  }
  .logo-wrap::before{
    content:"";
    position:absolute;
    top:-8px;
    right:-18px;
    width:calc(100% + 36px);
    height:88px;
    background:linear-gradient(180deg, var(--white) 0%, var(--bg-light) 100%);
    border-radius:0 0 46px 46px;
    box-shadow:0 6px 16px rgba(13,44,90,0.10);
    z-index:1;
  }
  .logo-wrap img{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:50%;
    box-shadow:0 12px 26px rgba(13,44,90,0.22);
  }

  .header-cta{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--navy);
    padding:9px 18px;
    border-radius:14px;
    transition:background .25s ease, transform .25s ease;
  }
  .header-cta:hover{ background:var(--navy-2); transform:translateY(-2px); }
  .header-cta .cta-icon{
    width:38px;height:38px;flex:none;
    background:rgba(255,255,255,0.15);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .header-cta .cta-icon svg{width:18px;height:18px;color:#fff;}
  .header-cta .cta-text{ color:#fff; line-height:1.25; }
  .header-cta .cta-number{ font-size:17px; font-weight:700; display:block; }
  .header-cta .cta-sub{ font-size:12.5px; color:#CFE0F5; display:block; }

  .mobile-toggle{
    display:none;
    width:42px;height:42px;
    border:none;background:var(--bg-light);
    border-radius:10px;
    align-items:center;justify-content:center;
    color:var(--navy);
  }
  .mobile-toggle svg{width:22px;height:22px;}

  /* ===================== MOBILE NAV ===================== */
  .mobile-nav{
    position:fixed;
    inset:0;
    background:rgba(13,44,90,0.35);
    z-index:900;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .mobile-nav.open{ opacity:1; visibility:visible; }
  .mobile-nav-panel{
    position:absolute;
    top:0;right:0;
    width:82%;
    max-width:340px;
    height:100%;
    background:#fff;
    padding:26px 22px;
    transform:translateX(100%);
    transition:transform .35s ease;
    overflow-y:auto;
  }
  .mobile-nav.open .mobile-nav-panel{ transform:translateX(0); }
  .mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
  .mobile-nav-top img{ width:58px; height:58px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px rgba(13,44,90,0.18); }
  .mobile-close{ width:38px;height:38px;border:none;background:var(--bg-light);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--navy); }
  .mobile-close svg{ width:18px;height:18px; }
  .mobile-nav a.nav-link{ width:100%; padding:14px 10px; font-size:16px; border-bottom:1px solid #F0F2F5; border-radius:0; }
  .mobile-services{ padding-inline-start:14px; display:none; }
  .mobile-services.open{ display:block; }
  .mobile-services a{ font-size:14.5px; color:#5b6472; padding:10px; display:block; }
  .mobile-nav-cta{
    margin-top:20px;
    display:flex;align-items:center;gap:12px;
    background:var(--navy);
    padding:14px 16px;border-radius:14px;color:#fff;
  }
  .mobile-nav-cta svg{ width:20px;height:20px; }
  .mobile-nav-cta span{ font-weight:700; font-size:16px; }

  /* ===================== HERO ===================== */
  .hero{
    position:relative;
    padding:56px 0 70px;
    overflow:hidden;
    background:
      radial-gradient(circle at 85% 10%, rgba(201,161,90,0.10), transparent 45%),
      radial-gradient(circle at 8% 90%, rgba(33,78,138,0.08), transparent 40%),
      var(--bg-light);
  }
  .hero .container{
    display:flex;
    align-items:center;
    gap:34px;
  }
  .hero-media{
    flex:0 0 30%;
    max-width:30%;
    position:relative;
    display:flex;
    justify-content:center;
  }
  .hero-photo-frame{
    position:relative;
    width:100%;
    max-width:340px;
    aspect-ratio:1/1;
  }
  .hero-photo-frame .ring{
    position:absolute;
    border-radius:50%;
    border:1.5px solid var(--gold);
    opacity:.55;
  }
  .hero-photo-frame .ring.r1{ inset:-22px; }
  .hero-photo-frame .ring.r2{ inset:-42px; border-color:var(--navy-2); opacity:.25; }
  .hero-photo-frame .dot{
    position:absolute;
    width:10px;height:10px;border-radius:50%;
    background:var(--gold);
  }
  .hero-photo-frame .dot.d1{ top:-8px; right:22%; }
  .hero-photo-frame .dot.d2{ bottom:-2px; left:6%; background:var(--navy-2); }
  .hero-photo-frame .arc{
    position:absolute;
    inset:-70px -70px auto auto;
    width:150px;height:150px;
    border:1.5px dashed rgba(13,44,90,0.25);
    border-radius:50%;
    top:-40px; left:-40px; right:auto;
  }
  .hero-photo{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 22px 50px rgba(13,44,90,0.22);
    border:6px solid #fff;
    position:relative;
    z-index:2;
  }
  .hero-photo img{
    width:100%;height:100%;object-fit:cover;object-position:top center;
  }

  .hero-content{
    flex:0 0 45%;
    max-width:45%;
    text-align:center;
    padding:0 8px;
  }
  .hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #E7EAF1;
    color:var(--navy-2);
    font-size:13px;
    font-weight:600;
    padding:7px 16px;
    border-radius:999px;
    margin-bottom:20px;
  }
  .hero-eyebrow .dot{ width:7px;height:7px;border-radius:50%;background:var(--gold); }
  .hero-title{
    font-size:clamp(30px, 3.4vw, 44px);
    font-weight:800;
    line-height:1.25;
    color:var(--navy);
    margin:0 0 18px;
    letter-spacing:-.3px;
  }
  .hero-title .accent{ color:var(--gold); }
  .hero-sub{
    font-size:16.5px;
    color:#5b6472;
    line-height:1.7;
    max-width:480px;
    margin:0 auto 30px;
  }
  .hero-benefits{
    display:flex;
    flex-direction:column;
    gap:14px;
    text-align:right;
    max-width:460px;
    margin:0 auto;
  }
  .hero-benefits li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#fff;
    padding:14px 16px;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(13,44,90,0.06);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .hero-benefits li:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(13,44,90,0.1); }
  .hero-benefits .check{
    flex:none;
    width:26px;height:26px;
    border-radius:50%;
    background:#E9F7EF;
    color:#2FAE60;
    display:flex;align-items:center;justify-content:center;
    margin-top:1px;
  }
  .hero-benefits .check svg{ width:15px;height:15px; }
  .hero-benefits b{ display:block; color:var(--navy); font-size:15px; margin-bottom:2px; }
  .hero-benefits span{ display:block; font-size:13.5px; color:#697285; line-height:1.5; }

  .hero-form-wrap{
    flex:0 0 25%;
    max-width:25%;
  }
  .lead-form{
    background:linear-gradient(165deg, #EEF5FC 0%, #DEEAF8 100%);
    border:1px solid #D3E4F6;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lift);
    padding:28px 22px;
    position:relative;
    overflow:hidden;
  }
  .lead-form::before{
    content:"";
    position:absolute;
    top:0;right:0;left:0;
    height:5px;
    background:linear-gradient(90deg, var(--navy), var(--gold));
  }
  .lead-form h3{
    margin:6px 0 4px;
    color:var(--navy);
    font-size:20px;
    font-weight:700;
    text-align:center;
  }
  .lead-form .lead-sub{
    text-align:center;
    color:#6E86A8;
    font-size:12.5px;
    margin-bottom:18px;
  }
  .field{ margin-bottom:12px; }
  .field label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    color:var(--navy);
    margin-bottom:5px;
  }
  .field input, .field select{
    width:100%;
    padding:11px 12px;
    border:1.5px solid #CBDFF4;
    border-radius:10px;
    font-family:inherit;
    font-size:14px;
    color:var(--text);
    background:#FFFFFF;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field input::placeholder{ color:#9FB3CC; }
  .field input:focus, .field select:focus{
    outline:none;
    border-color:var(--navy-2);
    box-shadow:0 0 0 3px rgba(33,78,138,0.14);
    background:#fff;
  }
  .submit-btn{
    width:100%;
    margin-top:6px;
    background:var(--navy);
    color:#fff;
    border:none;
    padding:14px 12px;
    border-radius:12px;
    font-size:15.5px;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:background .25s ease, transform .2s ease;
  }
  .submit-btn:hover{ background:var(--navy-2); transform:translateY(-2px); }
  .submit-btn:disabled{ opacity:.7; cursor:not-allowed; transform:none; }
  .submit-btn svg{ width:17px;height:17px; }
  .form-note{
    margin-top:10px;
    font-size:11.5px;
    color:#2FAE60;
    text-align:center;
  }
  .form-note[hidden]{ display:none; }
  .form-note.form-note--error{ color:#C0392B; }
  .form-privacy{
    margin-top:10px;
    font-size:11px;
    color:#8FA5C2;
    text-align:center;
    line-height:1.5;
  }

  /* entrance animations */
  .anim-right{ opacity:0; transform:translateX(60px); animation:slideIn .9s cubic-bezier(.22,.9,.3,1) .15s forwards; }
  .anim-center{ opacity:0; transform:translateY(18px); animation:fadeUp .9s cubic-bezier(.22,.9,.3,1) .35s forwards; }
  .anim-left{ opacity:0; transform:translateX(-60px); animation:slideIn .9s cubic-bezier(.22,.9,.3,1) .5s forwards; }
  @keyframes slideIn{ to{ opacity:1; transform:translateX(0); } }
  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

  /* ===================== PLACEHOLDER SECTIONS ===================== */
  .section{ padding:90px 0; }
  .section-head{ text-align:center; max-width:640px; margin:0 auto 46px; }
  .section-tag{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--gold); font-weight:700; font-size:13px;
    letter-spacing:.5px; margin-bottom:12px;
  }
  .section-tag::before, .section-tag::after{ content:""; width:20px;height:1px;background:var(--gold); }
  .section-head h2{ font-size:clamp(26px,3vw,36px); color:var(--navy); margin:0 0 14px; font-weight:800; }
  .section-head p{ color:#697285; font-size:15.5px; line-height:1.7; margin:0; }

  .about-section{ background:#fff; }
  .about-grid{ display:flex; align-items:center; gap:50px; }
  .about-text{ flex:1; }
  .about-text p{ color:#5b6472; font-size:15.5px; line-height:1.85; margin-bottom:16px; }
  .about-stats{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
  .about-stats .stat{
    background:var(--bg-light);
    border-radius:14px;
    padding:16px 20px;
    flex:1;
    min-width:130px;
    text-align:center;
  }
  .about-stats .stat b{ display:block; color:var(--navy); font-size:22px; }
  .about-stats .stat span{ font-size:12.5px; color:#7b8394; }
  .about-visual{
    flex:0 0 340px;
    max-width:340px;
    aspect-ratio:4/5;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow-lift);
    position:relative;
  }
  .about-visual img{ width:100%;height:100%;object-fit:cover; }

  .services-section{ background:var(--bg-light); }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:22px;
  }
  .service-card{
    background:#fff;
    border-radius:18px;
    padding:30px 24px;
    text-align:center;
    box-shadow:0 6px 20px rgba(13,44,90,0.06);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
  .service-card .icon{
    width:58px;height:58px;
    border-radius:16px;
    background:linear-gradient(135deg, var(--navy), var(--navy-2));
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
  }
  .service-card .icon svg{ width:27px;height:27px;color:#fff; }
  .service-card h3{ font-size:16.5px; color:var(--navy); margin:0 0 10px; font-weight:700; }
  .service-card p{ font-size:13.5px; color:#7b8394; line-height:1.6; margin:0 0 14px; }
  .service-card a{ font-size:13px; font-weight:700; color:var(--gold); }

  .contact-section{ background:#fff; }
  .contact-grid{ display:flex; gap:40px; align-items:stretch; }
  .contact-info{ flex:1; display:flex; flex-direction:column; gap:16px; justify-content:center; }
  .contact-info .row{
    display:flex; align-items:center; gap:14px;
    background:var(--bg-light);
    padding:16px 18px; border-radius:14px;
    transition:transform .2s ease;
  }
  .contact-info .row:hover{ transform:translateX(-4px); }
  .contact-info .row .ic{
    width:44px;height:44px;border-radius:50%;
    background:var(--navy); color:#fff;
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .contact-info .row .ic svg{ width:19px;height:19px; }
  .contact-info .row b{ display:block; font-size:14px; color:var(--navy); }
  .contact-info .row span{ font-size:13px; color:#7b8394; }
  .contact-map{
    flex:1;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    min-height:300px;
  }
  .contact-map iframe{ width:100%;height:100%;min-height:300px;border:0; }

  /* ===================== FOOTER ===================== */
  .site-footer{ background:var(--navy); color:#CFD8E6; padding:60px 0 0; }
  .footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.1); }
  .footer-brand{ flex:1; min-width:240px; }
  .footer-brand .flogo{ width:68px; height:68px; margin-bottom:14px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px rgba(0,0,0,0.25); }
  .footer-brand p{ font-size:13.5px; line-height:1.7; color:#AEBBD1; max-width:280px; }
  .footer-social{ display:flex; gap:12px; margin-top:16px; }
  .footer-social a{
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    transition:all .25s ease;
  }
  .footer-social a:hover{ background:var(--gold); transform:translateY(-3px) scale(1.08); }
  .footer-social svg{ width:16px;height:16px; }
  .footer-col{ min-width:150px; }
  .footer-col h4{ color:#fff; font-size:14.5px; margin:0 0 16px; font-weight:700; }
  .footer-col ul{ display:flex; flex-direction:column; gap:11px; }
  .footer-col a{ font-size:13.5px; color:#AEBBD1; transition:color .2s ease, transform .2s ease; display:inline-block; }
  .footer-col a:hover{ color:var(--gold); transform:translateX(-3px); }
  .footer-bottom{
    text-align:center;
    font-size:12.5px;
    color:#8896AC;
    padding:22px 0;
  }

  /* back to top */
  .to-top{
    position:fixed;
    bottom:26px; left:26px;
    width:46px;height:46px;
    border-radius:50%;
    background:var(--navy);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-lift);
    border:none;
    opacity:0; visibility:hidden;
    transform:translateY(10px);
    transition:all .3s ease;
    z-index:400;
  }
  .to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .to-top:hover{ background:var(--gold); }
  .to-top svg{ width:19px;height:19px; }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 1080px){
    .main-nav{ display:none; }
    .mobile-toggle{ display:flex; }
    .header-cta .cta-text{ display:none; }
    .header-cta{ padding:10px; }
  }

  @media (max-width: 980px){
    .hero .container{ flex-direction:column; }
    .hero-media, .hero-content, .hero-form-wrap{ flex:none; max-width:100%; width:100%; }
    .hero-content{ order:2; padding-top:10px; }
    .hero-media{ order:1; }
    .hero-form-wrap{ order:3; max-width:420px; margin:0 auto; }
    .hero-benefits{ text-align:right; }
    .about-grid{ flex-direction:column; }
    .about-visual{ order:-1; width:100%; max-width:340px; }
    .contact-grid{ flex-direction:column; }
  }

  @media (max-width: 640px){
    .container{ padding:0 18px; }
    .topbar{ height:auto; min-height:34px; padding:4px 0; }
    .topbar-social{ gap:11px; }
    .topbar-social .tb-phone{ font-size:12px; gap:4px; }
    .topbar-social .tb-phone span{ white-space:nowrap; }
    .topbar-info{ gap:10px; }
    .topbar-info .addr-text{ display:none; }
    .topbar-info .mail-text{ display:none; }
    .topbar .container{ padding:0 14px; }
    .site-header{ height:76px; }
    .logo-wrap{ width:125px; height:125px; top:5px; right:16px; }
    .logo-wrap::before{ top:-5px; height:76px; right:-14px; width:calc(100% + 28px); border-radius:0 0 38px 38px; }
    .header-start{ gap:6px; }
    .hero{ padding:36px 0 50px; }
    .hero-title{ font-size:26px; }
    .hero-sub{ font-size:14.5px; }
    .lead-form{ padding:22px 16px; }
    .footer-top{ flex-direction:column; }
    .section{ padding:60px 0; }
  }

/* ===================== NEW: SERVICES GRID — uniform 3+3, whole card clickable (updated) ===================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){
  .services-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
}
.service-card{ position:relative; overflow:hidden; border:1px solid rgba(13,44,90,0.07); }
a.service-card{ display:block; cursor:pointer; }
/* Force all 6 home cards to the exact same height regardless of differing card_desc
   text length: flex column + a shared min-height, with the "קרא עוד" pill pinned to
   the bottom via margin-top:auto so the CTA always lines up across every card. */
.services-grid .service-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:322px;
}
.services-grid .service-card .card-more-btn{ margin-top:auto; }
a.service-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.service-card:hover{ border-color:rgba(201,161,90,0.5); }
.service-card::before{
  content:"";
  position:absolute; top:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg, var(--navy), var(--gold));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s cubic-bezier(.22,.9,.3,1);
}
.service-card:hover::before{ transform:scaleX(1); }
.service-card .card-more-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:var(--navy);
  padding:10px 20px;
  border:1.5px solid #DCE3ED;
  border-radius:999px;
  transition:all .25s ease;
}
.service-card .card-more-btn svg{ width:13px;height:13px; transition:transform .25s ease; }
.service-card:hover .card-more-btn{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.service-card:hover .card-more-btn svg{ transform:translateX(-3px); }
.service-card.wide{ display:flex; align-items:center; gap:26px; text-align:right; padding:28px 30px; }
.service-card.wide .icon{ margin:0; flex:none; }
.service-card.wide .card-body{ flex:1; }
.service-card.wide p{ margin-bottom:16px; }
@media (max-width:640px){
  .service-card.wide{ flex-direction:column; text-align:center; }
  .service-card.wide .card-body{ width:100%; }
}

/* ===================== NEW: GOLD DIVIDER (added, used only in new sections) ===================== */
.gold-divider{
  height:1px;
  border:none;
  margin:0;
  background:linear-gradient(90deg, transparent, rgba(201,161,90,0.4) 50%, transparent);
}

/* ===================== NEW: SERVICE PAGE HERO (updated) =====================
   .service-hero-wrap is the sectioning element; .service-hero is just the visual
   media box (image + gradient overlay) and may safely clip with overflow:hidden.
   .service-hero-card lives OUTSIDE that clipped box, in normal flow, pulled up
   over the image with a negative margin — so its height is never fixed/guessed
   and it can never be cut off, regardless of how long the title/description are. */
.service-hero-wrap{ position:relative; padding-bottom:30px; }
.service-hero{
  position:relative;
  height:clamp(320px, 40vw, 480px);
  overflow:hidden;
  background:var(--navy);
}
.service-hero img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  animation:fadeUp 1s ease forwards;
}
.service-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,44,90,0.18) 0%, rgba(13,44,90,0.62) 100%);
}
.service-hero-card{
  position:relative;
  z-index:5;
  width:min(700px, 100%);
  margin:-70px auto 0;
  background:#fff;
  border:1px solid rgba(201,161,90,0.35);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);
  padding:34px 42px;
  text-align:center;
}
.service-hero-card h1{ color:var(--navy); font-size:clamp(23px,2.6vw,30px); font-weight:800; margin:0 0 12px; line-height:1.3; }
.service-hero-card p{ color:#5b6472; font-size:14.5px; line-height:1.65; margin:0 0 22px; }
/* .cta-btn is a reusable pill-button component (hero cards, cta-band, etc.) — kept
   independent of any single ancestor so it renders consistently wherever it's used. */
.cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff; font-weight:700; font-size:15px;
  padding:14px 32px; border-radius:12px;
  transition:background .25s ease, transform .2s ease;
}
.cta-btn:hover{ background:var(--navy-2); transform:translateY(-2px); }
.cta-btn svg{ width:16px;height:16px; flex:none; }
@media (max-width:640px){
  .service-hero{ height:270px; }
  .service-hero-wrap{ padding-bottom:22px; }
  .service-hero-card{ margin-top:-50px; padding:26px 22px; }
}

/* ===================== NEW: SERVICE PAGE CONTENT + FORM (added) ===================== */
.service-content-section{ background:#fff; padding-top:130px; }
@media (max-width:640px){ .service-content-section{ padding-top:150px; } }
.service-content-grid{
  display:flex;
  gap:50px;
  align-items:flex-start;
}
.service-article{ flex:0 0 58%; max-width:58%; }
.service-article h2{ color:var(--navy); font-size:23px; font-weight:800; margin:0 0 18px; }
.service-article .placeholder-block{
  background:var(--bg-light);
  border:1.5px dashed #D7DEE8;
  border-radius:var(--radius-md);
  padding:40px 34px;
}
.service-article .placeholder-block p{ color:#8a94a6; font-size:14.5px; line-height:1.9; margin:0 0 14px; }
.service-article .placeholder-block p:last-child{ margin-bottom:0; }
.service-form-wrap{ flex:0 0 38%; max-width:38%; }
@media (max-width:980px){
  .service-content-grid{ flex-direction:column; }
  .service-article, .service-form-wrap{ flex:none; max-width:100%; width:100%; }
}

/* ===================== NEW: ADVANTAGES SECTION (restored — reuses .service-card look, unchanged) =====================
   Correction from a later instruction: only the section-head title/subtitle text
   changes (see build.py) — the card grid itself, its icons, spacing and sizing
   stay exactly as they were. padding-top is scoped-overridden below (kept less
   than the base .section 90px/60px) to close the excess gap under the hero card —
   nothing else about .section is touched, so every other section site-wide is
   unaffected. */
.advantages-section{ background:var(--bg-light); padding-top:48px; }
@media (max-width:640px){ .advantages-section{ padding-top:32px; } }
.advantages-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
@media (max-width:980px){ .advantages-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .advantages-grid{ grid-template-columns:1fr; } }

/* ===================== NEW: SUMMARY / ADVISORY PANEL (updated — was a flat-gray plain-text block) ===================== */
.summary-section{ background:var(--bg-light); }
.summary-panel{
  max-width:820px;
  margin:0 auto;
  display:flex;
  gap:26px;
  align-items:flex-start;
  background:linear-gradient(135deg, #fff 0%, #FBF9F4 100%);
  border:1px solid rgba(201,161,90,0.28);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  padding:40px 44px;
}
.summary-icon{
  flex:none;
  width:56px; height:56px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(13,44,90,0.22);
}
.summary-icon svg{ width:26px; height:26px; color:#fff; }
.summary-content p{ color:#5b6472; font-size:15px; line-height:1.85; margin:0 0 14px; }
.summary-content p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .summary-panel{ flex-direction:column; padding:30px 24px; }
}

/* ===================== NEW: FAQ ACCORDION (added) ===================== */
.faq-section{ background:#fff; }
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:#fff;
  border:1px solid #ECEEF2;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(13,44,90,0.05);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.faq-item.open{ box-shadow:0 10px 26px rgba(13,44,90,0.1); border-color:#E1E7F0; }
.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:19px 22px;
  background:none; border:none;
  text-align:right;
  font-size:15.5px; font-weight:700; color:var(--navy);
}
.faq-toggle-icon{
  position:relative;
  flex:none;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--bg-light);
  transition:background .25s ease;
}
.faq-toggle-icon::before,
.faq-toggle-icon::after{
  content:"";
  position:absolute;
  top:50%; right:50%;
  background:var(--navy);
  transition:background .25s ease, transform .3s ease, opacity .3s ease;
}
.faq-toggle-icon::before{ width:12px; height:2px; transform:translate(50%,-50%); border-radius:2px; }
.faq-toggle-icon::after{ width:2px; height:12px; transform:translate(50%,-50%); border-radius:2px; }
.faq-item.open .faq-toggle-icon{ background:var(--navy); }
.faq-item.open .faq-toggle-icon::before{ background:#fff; }
.faq-item.open .faq-toggle-icon::after{ background:#fff; opacity:0; transform:translate(50%,-50%) scaleY(0); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.22,.9,.3,1);
}
.faq-answer-inner{
  padding:0 22px 20px;
  color:#5b6472;
  font-size:14px;
  line-height:1.75;
}

/* ===================== NEW: BREADCRUMB / BACK LINK for service pages (added) ===================== */
.service-back{ background:var(--bg-light); }
.service-back .container{ padding-top:16px; padding-bottom:16px; }
.service-back a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:#5b6472;
  transition:color .2s ease;
}
.service-back a:hover{ color:var(--navy); }
.service-back svg{ width:14px;height:14px; }

/* ===================== NEW: SERVICE ARTICLE REAL CONTENT (added) ===================== */
.service-article h3{ color:var(--navy); font-size:17px; font-weight:700; margin:26px 0 12px; }
.service-article p{ color:#5b6472; font-size:15px; line-height:1.85; margin:0 0 16px; }
.service-article p:last-child{ margin-bottom:0; }
.service-article ul{ display:flex; flex-direction:column; gap:10px; margin:0 0 16px; }
.service-article ul li{ position:relative; padding-right:22px; color:#5b6472; font-size:15px; line-height:1.7; }
.service-article ul li::before{ content:""; position:absolute; right:0; top:9px; width:7px;height:7px;border-radius:50%; background:var(--gold); }

/* ===================== NEW: CLOSING CTA BAND (added, service pages + about page) ===================== */
.cta-band-section{ background:var(--bg-light); }
.cta-band{
  background:linear-gradient(135deg, var(--navy) 0%, #163a70 100%);
  border-radius:var(--radius-md);
  padding:56px 40px;
  text-align:center;
  color:#fff;
  box-shadow:var(--shadow-lift);
}
.cta-band h2{ color:#fff; font-size:clamp(22px,2.6vw,28px); font-weight:800; margin:0 0 12px; }
.cta-band p{ color:#CFE0F5; font-size:15px; line-height:1.7; margin:0 auto 26px; max-width:560px; }
.cta-band .cta-btn{ background:#fff; color:var(--navy); }
.cta-band .cta-btn:hover{ background:var(--gold); color:#fff; }
@media (max-width:640px){ .cta-band{ padding:40px 22px; } }

/* ===================== NEW: ABOUT PAGE (added) ===================== */
.about-page-hero{ background:#fff; }
.about-full-content{ max-width:760px; margin:0 auto; }
.about-full-content p{ color:#5b6472; font-size:15.5px; line-height:1.9; margin:0 0 18px; }
.about-full-content p:last-child{ margin-bottom:0; }
.values-section{ background:var(--bg-light); }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .values-grid{ grid-template-columns:1fr; } }
.about-teaser-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px;
  font-size:13.5px; font-weight:700; color:var(--navy);
  padding:11px 22px;
  border:1.5px solid #DCE3ED;
  border-radius:999px;
  transition:all .25s ease;
}
.about-teaser-more svg{ width:13px;height:13px; transition:transform .25s ease; }
.about-teaser-more:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.about-teaser-more:hover svg{ transform:translateX(-3px); }

/* ===================== NEW: ABOUT PAGE REDESIGN v2 (added — about.html only) =====================
   Scoped entirely to new classes below; nothing here touches an existing selector,
   so no other page/section is affected. Used to redesign about.html's "מי אני",
   "הגישה שלי" and "איך אני מלווה אותך" sections. */
.about-hero-subtitle{ color:var(--gold); font-weight:700; font-size:14.5px; margin-bottom:18px; }

.bio-intro{ max-width:720px; margin:0 auto 50px; text-align:center; position:relative; padding-bottom:26px; }
.bio-intro p{ color:var(--navy); font-size:18px; font-weight:500; line-height:1.85; margin:0 0 10px; }
.bio-intro p:last-child{ margin-bottom:0; }
.bio-intro::after{ content:""; position:absolute; bottom:0; right:50%; transform:translateX(50%); width:56px; height:3px; background:var(--gold); border-radius:2px; }
.bio-chapters{ display:flex; flex-direction:column; gap:18px; max-width:800px; margin:0 auto; }
.bio-chapter{
  background:#fff;
  border-radius:var(--radius-md);
  border:1px solid rgba(201,161,90,0.22);
  border-right:4px solid var(--gold);
  box-shadow:var(--shadow-soft);
  padding:30px 36px;
}
.bio-chapter p{ color:#5b6472; font-size:15.5px; line-height:1.9; margin:0 0 14px; }
.bio-chapter p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .bio-intro p{ font-size:16px; }
  .bio-chapter{ padding:24px 22px; border-right-width:3px; }
}

.approach-section{ background:var(--bg-light); }
.approach-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
@media (max-width:980px){ .approach-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .approach-grid{ grid-template-columns:1fr; } }

.process-section{ background:#fff; }
.process-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:36px 22px; position:relative; counter-reset:step; }
.process-steps::before{
  content:"";
  position:absolute; top:24px; right:12.5%; left:12.5%; height:2px;
  background:repeating-linear-gradient(90deg, rgba(201,161,90,0.5) 0 8px, transparent 8px 18px);
  z-index:1;
}
.process-step{ position:relative; z-index:2; text-align:center; padding:0 10px; }
.process-step .num{
  width:48px; height:48px; margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  color:#fff; font-weight:800; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(13,44,90,0.22);
}
.process-step h3{ color:var(--navy); font-size:15px; font-weight:700; margin:0; line-height:1.55; }
@media (max-width:900px){
  .process-steps{ grid-template-columns:repeat(2,1fr); }
  .process-steps::before{ display:none; }
}
@media (max-width:640px){ .process-steps{ grid-template-columns:1fr; gap:26px; } }

/* ===================== NEW: FLOATING WHATSAPP BUTTON (added) ===================== */
.wa-float{
  position:fixed;
  bottom:26px; right:26px;
  width:58px; height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,0.45);
  z-index:450;
  transition:all .25s ease;
}
.wa-float:hover{ background:#128C7E; transform:translateY(-3px) scale(1.05); box-shadow:0 10px 26px rgba(18,140,126,0.5); }
.wa-float svg{ width:29px; height:29px; }
@media (max-width:640px){
  .wa-float{ bottom:18px; right:16px; width:52px; height:52px; }
  .wa-float svg{ width:26px; height:26px; }
}

/* ===================== NEW: SERVICE ATMOSPHERE IMAGE (added) ===================== */
.atmosphere-img-wrap{
  margin-top:28px;
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  border:1px solid rgba(201,161,90,0.4);
  transition:box-shadow .35s ease;
  opacity:0;
  transform:translateY(22px);
  animation:fadeUp .9s cubic-bezier(.22,.9,.3,1) .2s forwards;
}
.atmosphere-img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 -40px 50px -30px rgba(13,44,90,0.28);
  pointer-events:none;
}
.atmosphere-img-wrap img{
  display:block;
  width:100%;
  height:auto;
  border-radius:inherit;
  transition:transform .6s cubic-bezier(.22,.9,.3,1);
}
.atmosphere-img-wrap:hover{ box-shadow:0 20px 46px rgba(13,44,90,0.22); }
.atmosphere-img-wrap:hover img{ transform:scale(1.035); }
@media (max-width:980px){
  .atmosphere-img-wrap{ margin-top:24px; }
}
@media (prefers-reduced-motion:reduce){
  .atmosphere-img-wrap{ opacity:1; transform:none; animation:none; }
  .atmosphere-img-wrap:hover img{ transform:none; }
}