/* ===============================
   Base tokens
   =============================== */
:root{
  --navy:#0b214c;
  --navy-2:#0b2a61;
  --text:#0e2439;
  --muted:#6b7280;
  --gold:#caa46b;
  --light:#f4f6f8;
  --white:#ffffff;
  --card:#ffffff;
  --card-bd:#e5e7eb;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --safe-top: env(safe-area-inset-top);
  --reveal-distance: 14px;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Assistant',system-ui,Segoe UI,Arial,sans-serif;color:var(--text);background:#f7f9fb}
a{text-decoration:none;color:inherit}

/* Layout helpers */
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.container.narrow{max-width:850px}

/* ===============================
   Header
   =============================== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,33,76,.92);backdrop-filter:saturate(140%) blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.12)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right))}
.brand img{height:46px;width:auto;display:block}

.main-nav{display:flex;gap:22px;align-items:center}
.main-nav a{color:#fff;opacity:.9}
.main-nav a:hover{opacity:1}

.btn{display:inline-block;padding:.62rem 1.1rem;border-radius:30px;border:1px solid transparent;transition:.25s ease;font-weight:600}
.btn-gold{background:var(--gold);color:#1a1f2b}
.btn-gold:hover{filter:brightness(1.08)}
.btn.wide{width:100%;text-align:center}

/* Call box centered */
.site-header .nav{position:relative}
.site-header .call-box{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:110;
}
.call-box{display:flex;align-items:center;gap:8px}
.call-icon{display:flex;align-items:center;justify-content:center;height:44px;width:44px;border-radius:50%;background:var(--gold);color:#13223b;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.call-icon:hover{filter:brightness(1.06)}
.call-label{color:#fff;font-weight:700;white-space:nowrap;font-size:16px}
.call-label:hover{opacity:.9}

/* Mobile toggle */
.mobile-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;height:42px;width:42px;border-radius:10px}
.mobile-toggle:hover{background:rgba(255,255,255,.08)}

/* Hide desktop nav on small screens, show hamburger */
@media (max-width:860px){
  .main-nav{display:none}
  .mobile-toggle{display:flex;align-items:center;justify-content:center;position:absolute;right:max(14px, env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:121}
  .call-icon{height:46px;width:46px}
}

/* ===============================
   Language switch
   =============================== */
.lang-switch--header{
  display:flex;align-items:center;gap:6px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.15);backdrop-filter:saturate(140%) blur(4px);
  font-weight:700;font-size:14px;
}
.lang-switch--header a{
  display:inline-block;padding:6px 12px;border-radius:999px;color:#fff;opacity:.95;transition:all .2s ease;
}
.lang-switch--header a:hover{background:rgba(255,255,255,.20);opacity:1}
.lang-switch--header a.active{background:#fff;color:#0b214c;opacity:1}
@media (max-width:860px){ .lang-switch--header{display:none} }

.lang-switch--drawer{
  display:flex;align-items:center;gap:6px;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  margin-top:10px;padding:6px;
  font-weight:700;font-size:14px;
}
.lang-switch--drawer a{
  display:inline-block;padding:8px 14px;border-radius:999px;color:#fff;opacity:.95;transition:all .2s ease;
}
.lang-switch--drawer a:hover{background:rgba(255,255,255,.16);opacity:1}
.lang-switch--drawer a.active{background:var(--gold);color:#1a1f2b;opacity:1}

/* Remove desktop location pill; keep optional mobile icon */
.loc-pill{display:none !important}
.loc-mobile{display:none}
@media (max-width:860px){
  .loc-mobile{
    position:absolute;left:max(12px, env(safe-area-inset-left));top:50%;transform:translateY(-50%);
    height:44px;width:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid #e5e7eb;box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:120;
  }
}

/* ===============================
   Mobile drawer (full screen)
   =============================== */
.mobile-menu[hidden]{display:none !important}
.mobile-menu{position:fixed;inset:0;z-index:9999;pointer-events:none}
.mobile-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);opacity:0;transition:opacity .25s ease}
.mobile-sheet{
  border-left:1px solid rgba(255,255,255,.08);position:absolute;top:0;right:0;height:100%;
  width:min(86vw, 420px);background:#0f1f3b;color:#fff;transform:translateX(100%);transition:transform .3s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,.4);display:flex;flex-direction:column;padding:max(8px, var(--safe-top)) 16px 18px
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px}
.sheet-title{font-weight:700}
.sheet-close{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;height:40px;width:40px;border-radius:10px}
.sheet-close:hover{background:rgba(255,255,255,.08)}
.sheet-nav{display:grid;gap:12px;padding:10px 0 12px}
.sheet-link{display:block;padding:14px 10px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
.sheet-link:hover{background:rgba(255,255,255,.18)}
.sheet-ctas{display:grid;gap:10px}

/* When open */
.menu-open .mobile-menu{pointer-events:auto}
.menu-open .mobile-backdrop{opacity:1}
.menu-open .mobile-sheet{transform:translateX(0)}

/* Force sheet to full screen when open */
body.menu-open #mobile-menu{position:fixed !important;inset:0 !important;z-index:999999 !important;pointer-events:auto !important;background:#0f1f3b !important}
body.menu-open #mobile-menu .mobile-backdrop{display:none !important}
body.menu-open #mobile-menu .mobile-sheet{
  position:fixed !important;inset:0 !important;width:100vw !important;height:100vh !important;transform:none !important;background:#0f1f3b !important;opacity:1 !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important
}
html.menu-locked,body.menu-locked{overflow:hidden !important;height:100% !important}
.sheet-link{background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.18) !important}
.sheet-link:hover{background:rgba(255,255,255,.16) !important}

/* ===============================
   Hero
   =============================== */
.hero{
  position:relative;color:#fff;padding:120px 0 80px;
  background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25)), url('/hero-law.png') center/cover no-repeat;
  min-height:64vh;display:flex;align-items:center;overflow:hidden;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;position:relative;z-index:2}
.hero h1{font-size:44px;line-height:1.25;margin:0}
.hero .sub{opacity:.95;font-size:18px}
.hero h2{margin:0;font-size:20px;opacity:.92;font-weight:600}
.hero .tagline{margin-top:6px;font-size:18px;opacity:.95}
.hero-btn{margin-top:10px}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(6,13,26,.55), rgba(6,13,26,.35) 40%, rgba(6,13,26,.65));
}

/* --- Hero crest capsule --- */
.hero-crest {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  z-index: 3;
  overflow: hidden;
}

.hero-crest-img {
  height: 72px; /* bigger logo */
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

.hero-crest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.3) 25%, transparent 50%);
  transform: translateX(-120%);
  animation: crestShimmer 4s ease-in-out 1.5s infinite;
  pointer-events: none;
}

@keyframes crestShimmer { to { transform: translateX(120%); } }

/* Responsive */
@media (max-width: 640px) {
  .hero-crest { top: 16px; padding: 8px 12px; }
  .hero-crest-img { height: 56px; }
}



/* ===============================
   Stats
   =============================== */
.stats{background:#0e1d39;color:#fff;padding:28px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.stat-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:22px 18px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.stat-line{font-weight:800;font-size:40px;letter-spacing:.5px;display:flex;justify-content:center;align-items:baseline;gap:4px;color:var(--gold)}
.stat-number{display:inline-block;min-width:3ch;text-align:center}
.stat-label{margin-top:6px;font-size:14px;opacity:.9;color:#fff}

/* ===============================
   Sections / cards
   =============================== */
.section{padding:64px 0;background:#fff}
.section.alt{background:#f2f5f9}
.section h2{font-size:30px;margin:0 0 20px;color:#111827}
.section .muted{color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px}
.card p{margin:0;color:#394150}

/* Reviews */
.reviews .review{display:flex;flex-direction:column;gap:10px}
.reviews .stars{color:#f5c052;font-size:20px;letter-spacing:1px}
.reviews .reviewer{color:#374151;font-weight:600;margin-top:6px}

/* Contact block */
.contact .form{display:grid;gap:14px}
.contact label{display:grid;gap:6px;font-weight:600}
.contact input,.contact textarea{border:1px solid var(--card-bd);border-radius:10px;padding:12px 14px;font-family:inherit}
.contact textarea{min-height:130px;resize:vertical}

/* Info cards in contact */
.info-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0 22px}
.info-card{background:#fff;border:1px solid var(--card-bd);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.info-card h3{margin:0 0 10px 0;font-size:18px;color:#111827}
.info-card .list{margin:0;padding:0 18px}
.info-card .list li{margin:6px 0}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.btn.small{padding:.4rem .75rem;border-radius:24px;background:#eef2f7;border:1px solid #e5e7eb}

/* ===============================
   ABOUT
   =============================== */
.about-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.about-text h2{margin:0 0 10px}
.about-text p{margin:0 0 10px}
.about-logo{display:block;margin:6px auto 18px auto;height:90px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.about-logo.small{height:70px;margin:0 0 12px 0}
.about-media{display:flex;justify-content:center;align-items:center}
.about-photo{display:block;max-width:420px;width:100%;height:auto;border-radius:16px;box-shadow:0 16px 32px rgba(0,0,0,.18)}
@media (min-width:960px){
  .about-grid{grid-template-columns:1.1fr .9fr;gap:28px}
  .about-media{justify-content:flex-start}
  .about-text{padding-inline-start:8px}
}

/* ===============================
   Value section
   =============================== */
.value .value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.value .vcard{background:#fff;border:1px solid var(--card-bd);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.value .vcard h3{margin:6px 0 8px 0}
.value .vcard p{margin:0;color:#394150}
.vicon{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;border-radius:12px;background:#f1f5f9;font-weight:800}

/* Process / steps */
.process{margin-top:36px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps li{background:#fff;border:1px solid var(--card-bd);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease}
.steps li:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.step-num{height:34px;width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#1a1f2b;font-weight:800;margin-bottom:8px}

/* CTA strip */
.cta-strip{margin-top:28px;background:#0e1d39;color:#fff;border-radius:14px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cta-actions{display:flex;gap:10px}

/* ===============================
   FAQ (enhanced)
   =============================== */
.faq { margin-top: 36px }
.faq-head {
  display: flex;align-items: center;justify-content: space-between;gap: 12px;
  margin-bottom: 12px;flex-wrap: wrap;
}
#faq-search {
  border: 1px solid var(--card-bd);border-radius: 999px;padding: 10px 14px;outline: none;
  min-width: 220px;background: #fff;
}
#faq-search:focus { box-shadow: 0 0 0 3px rgba(202,164,107,.25) }
.faq-toggles{display:flex;gap:8px}

.faq .faq-item {
  background: #fff;border: 1px solid var(--card-bd);border-radius: 14px;
  margin: 10px 0;overflow: hidden;box-shadow: var(--shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq .faq-item[open]{border-color: #d6d9e0;box-shadow:0 14px 28px rgba(0,0,0,.08)}

.faq .faq-item summary {
  list-style:none;cursor:pointer;font-weight:700;padding:16px 18px;outline:none;
  display:flex;align-items:center;gap:10px;user-select:none;
}
.faq .faq-item summary::-webkit-details-marker{display:none}
.faq .faq-item .q{flex:1;line-height:1.35}

.faq .faq-item .chev {
  width:24px;height:24px;transform:rotate(0);transition:transform .25s var(--reveal-ease);opacity:.75;
}
.faq .faq-item[open] .chev { transform:rotate(180deg);opacity:1 }

.faq .faq-item .answer {
  padding:0 18px 16px 18px;color:#394150;animation:faqReveal .25s var(--reveal-ease);
}
@keyframes faqReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.faq .meta {
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;
  font-size:12.5px;color:#6b7280;flex-wrap:wrap;
}
.faq .chip {
  background:#eef2f7;border:1px solid #e5e7eb;border-radius:999px;
  padding:6px 10px;font-size:12.5px;cursor:pointer;
}
.faq .chip:hover{filter:brightness(1.03)}
.faq-cta {margin-top:12px;color:#374151}
.faq-cta a{color:var(--navy-2);text-decoration:underline}

/* ===============================
   Footer
   =============================== */
.site-footer{background:var(--navy);color:#fff;padding:18px 0;margin-top:40px;text-align:center;font-size:14px;opacity:.95}

/* ===============================
   Floating WhatsApp
   =============================== */
.whatsapp-float{
  position:fixed;left:18px;bottom:18px;z-index:120;display:flex;align-items:center;justify-content:center;
  height:54px;width:54px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;box-shadow:0 10px 20px rgba(0,0,0,.15)
}
.whatsapp-float svg{display:block}
@media (max-width:640px){
  .whatsapp-float{left:12px;bottom:12px;height:52px;width:52px}
}

/* ===============================
   Animations / micro-interactions
   =============================== */
.reveal{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity .7s var(--reveal-ease), transform .7s var(--reveal-ease);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}

.hero .hero-inner > *{opacity:0;transform:translateY(10px);animation:heroRise .8s var(--reveal-ease) forwards}
.hero .hero-inner h1{animation-delay:.10s}
.hero .hero-inner .en{animation-delay:.20s}
.hero .hero-inner .tagline{animation-delay:.30s}
.hero .hero-inner .hero-btn{animation-delay:.45s}
@keyframes heroRise{to{opacity:1;transform:none}}

.card,.info-card,.vcard{transition:transform .25s ease, box-shadow .25s ease}
.card:hover,.info-card:hover,.vcard:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.btn{transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(0,0,0,.12)}

.site-header .call-box{animation:callPop .5s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes callPop{
  0%{transform:translate(-50%,-50%) scale(.92)}
  60%{transform:translate(-50%,-50%) scale(1.03)}
  100%{transform:translate(-50%,-50%) scale(1)}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal,.hero .hero-inner > *,.call-box,.card,.info-card,.vcard,.steps li,.btn{
    animation:none !important;transition:none !important;transform:none !important;opacity:1 !important;
  }
}

/* ===============================
   Responsive
   =============================== */
@media (max-width:960px){
  .value .value-cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:1fr}
  .stat-line{font-size:36px}
}
@media (max-width:640px){
  .hero{padding:90px 0 60px}
  .hero h1{font-size:34px}
  .cards,.value .value-cards,.steps{grid-template-columns:1fr}
  .cta-strip{flex-direction:column;align-items:flex-start}
  .info-cards{grid-template-columns:1fr}
}

/* =========================================================
   NEW: Contact Us section (scoped to avoid global overrides)
   ========================================================= */
.contact-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%);
  padding: clamp(32px, 5vw, 72px) 0;
}

.contact-wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
}
@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
  background: var(--card);
  border: 1px solid var(--card-bd);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11, 33, 76, 0.15);
  padding: clamp(20px, 3vw, 28px);
}

.contact-title {
  color: var(--text);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 6px;
}

.contact-sub {
  color: var(--muted);
  margin: 0 0 18px;
}

/* chips for quick-contact (scoped) */
.contact-chips {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 20px;
}
.contact-chips .chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--light);
  border: 1px solid var(--card-bd);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600; color: var(--text);
  text-decoration: none;
}
.contact-chips .chip:hover { border-color: var(--gold); }

/* form (scoped to contact card) */
.contact-card .form-group { margin-bottom: 14px; }
.contact-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .contact-card .form-row { grid-template-columns: 1fr; } }

.contact-card label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text);
}

.contact-card .input,
.contact-card .textarea,
.contact-card select {
  width: 100%;
  height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--card-bd);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.contact-card .textarea { height: auto; min-height: 120px; resize: vertical; }

.contact-card .input:focus,
.contact-card .textarea:focus,
.contact-card select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(202, 164, 107, 0.25);
}

/* help, error, privacy */
.contact-card .help { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.contact-card .error { color: #b42318; font-size: .9rem; margin-top: 4px; display:none; }
.contact-card .privacy-note { color: var(--muted); font-size: .9rem; margin-top: 10px; }

/* submit */
.btn-primary {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 800;
  cursor: pointer;
  background: var(--gold);
  color: var(--navy);
  transition: transform .05s ease, box-shadow .2s ease, filter .2s;
}
.btn-primary:hover { filter: brightness(0.96); box-shadow: 0 8px 20px rgba(202,164,107,.35); }
.btn-primary:active { transform: translateY(1px); }

/* side panel (address / map) */
.contact-side {
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  backdrop-filter: saturate(140%) blur(2px);
}
.contact-side h3 { margin: 0 0 10px; color: #fff; }
.contact-side p, .contact-side a { color: #e7eef9; }
.contact-side a { text-decoration: none; border-bottom: 1px dashed rgba(231,238,249,.5); }
.contact-side a:hover { border-bottom-color: #fff; }

/* success box (optional) */
.alert-success {
  background: #ecfdf3; border: 1px solid #abefc6; color:#067647;
  border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; display:none;
}

/* Honeypot: invisible, RTL/LTR safe, no label */
.hp-field{
  position: absolute !important;
  inset-inline-start: -9999px; /* works in RTL & LTR */
  width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Blog / Articles ===== */
.blog { background:#fff; }
.blog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr} }

.post-card{ background:#fff; border:1px solid var(--card-bd); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.post-thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; display:block; background:#eef2f7; }
.post-body{ padding:14px 16px; display:grid; gap:8px; }
.post-title{ margin:0; font-size:18px; color:#111827; }
.post-excerpt{ margin:0; color:#394150; font-size:15px; }
.post-meta{ display:flex; gap:10px; color:#6b7280; font-size:13px; }

.post-article{ max-width:850px; margin:0 auto; }
.post-article header{ margin-bottom:14px; }
.post-article h1{ font-size:30px; margin:0 0 8px; }
.post-article .post-hero{ width:100%; height:auto; border-radius:14px; box-shadow:var(--shadow); margin:10px 0 16px; }
.post-article h2{ font-size:22px; margin:18px 0 8px; }
.post-article p, .post-article li{ color:#394150; }
.post-article .cta-note{ background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; margin-top:14px; }
/* ===== Modern About ===== */
.about-pro .about-wrap{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:28px; align-items:center;
}
@media (max-width: 960px){
  .about-pro .about-wrap{ grid-template-columns: 1fr; gap:22px }
}

/* Media: layered frame + badge */
.about-figure{ position:relative; margin:0 }
.about-photo{
  display:block; width:100%; max-width:520px; height:auto;
  border-radius:20px; box-shadow:0 20px 40px rgba(0,0,0,.16);
  border:1px solid var(--card-bd);
}

.about-mark{
  position:absolute; bottom:12px; inset-inline-start:12px;
  height:54px; width:auto; border-radius:12px; background:#fff;
  padding:8px; border:1px solid var(--card-bd); box-shadow:var(--shadow);
}

/* Highlights chips */
.about-highlights{
  list-style:none; margin:12px 0 0; padding:0; display:flex; gap:8px; flex-wrap:wrap;
}
.about-highlights li{
  background:#fff; border:1px solid var(--card-bd); color:var(--text);
  padding:8px 12px; border-radius:999px; font-weight:600; box-shadow:var(--shadow);
}

/* Cards trio */
.about-cards{
  display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin:16px 0 8px;
}
@media (max-width: 900px){ .about-cards{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .about-cards{ grid-template-columns:1fr } }

.about-card{
  background:#fff; border:1px solid var(--card-bd); border-radius:16px;
  padding:14px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.about-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.12); }
.about-card h3{ margin:6px 0 6px; font-size:18px; color:#111827 }
.about-card p{ margin:0; color:#394150 }
.aicon{
  height:40px; width:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:#f1f5f9; font-weight:800;
}

/* CTA row */
.about-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }

/* Mini metrics */
.about-metrics{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:12px;
}
.about-metrics .mini{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--card-bd); border-radius:14px; padding:10px 14px; min-width:130px;
  box-shadow:var(--shadow)
}
.about-metrics .mini strong{ font-size:20px; line-height:1; color:#111827 }
.about-metrics .mini span{ font-size:13px; color:#6b7280; margin-top:4px }
.metrics-note{ color:#6b7280; font-size:12.5px; margin-top:6px }


/* --- A11y: visible focus states on key interactive elements --- */
.btn:focus-visible,
.sheet-link:focus-visible,
.mobile-toggle:focus-visible,
.call-icon:focus-visible,
.contact-chips .chip:focus-visible,
.lang-switch--header a:focus-visible,
.lang-switch--drawer a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(202,164,107,.35);
}

/* --- FAQ chevron: ensure the arrow actually renders (stroke) --- */
.faq .faq-item .chev path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Anchor offset so sticky header doesn't cover section headings --- */
[id] { scroll-margin-top: 86px; }

/* --- Safari: ensure backdrop blur shows up --- */
.site-header,
.lang-switch--header,
.contact-side {
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* --- RTL/LTR safe floating button placement --- */
.whatsapp-float {
  left: auto;                /* reset physical */
  inset-inline-start: 18px;  /* logical start */
}
@media (max-width:640px){
  .whatsapp-float{ inset-inline-start: 12px; }
}

/* --- Blog titles: avoid overflow on very long words (HE/AR) --- */
.post-title,
.post-article h1 {
  overflow-wrap: anywhere; /* safe in HE/AR long strings */
}

/* --- Optional: smoother keyboard scrolling, but respect reduced motion --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}
/* Scope the modern about photo to the new block only */
.about-pro .about-photo{
  display:block; width:100%; max-width:520px; height:auto;
  border-radius:20px; box-shadow:0 20px 40px rgba(0,0,0,.16);
  border:1px solid var(--card-bd);
}

/* Safari backdrop blur: keep header at 8px, contact side at 2px */
.site-header,
.lang-switch--header { -webkit-backdrop-filter: saturate(140%) blur(8px); }

.contact-side { -webkit-backdrop-filter: saturate(140%) blur(2px); }