/* ============================================================
   Sherman Group — Shared responsive layer
   Loads AFTER each page's inline <style> so it overrides cleanly.
   Covers: tablet breakpoint, hamburger nav, touch targets,
   typography, grid normalization, table/img safety.
   ============================================================ */

/* —— Page-hero text card (sub-pages) — compact so background image stays visible —— */
.page-hero .hero-text{
  max-width:480px !important;
  padding:32px 36px !important;
  background:rgba(10,21,36,.78) !important;
}
.page-hero h1{
  font-size:clamp(1.8rem,3vw,2.6rem) !important;
  margin-bottom:18px !important;
  line-height:1.18 !important;
}
.page-hero .lead{
  font-size:.96rem !important;
  line-height:1.7 !important;
  margin-bottom:24px !important;
}
@media (max-width:900px){
  .page-hero .hero-text{max-width:none !important;padding:26px 24px !important}
  .page-hero h1{font-size:clamp(1.5rem,5vw,2.1rem) !important}
}

/* —— Navbar dropdowns (shared across all pages) —— */
.nav-dropdown{position:relative}
.nav-dropdown > a.nav-dd-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2,#3a4658);font-size:.88rem;font-weight:500;letter-spacing:.01em;padding:4px 0;text-decoration:none;transition:color .2s}
.nav-dropdown > a.nav-dd-trigger:hover{color:var(--brand,#1a3a5c)}
.nav-dropdown > a.nav-dd-trigger::after{display:none !important}
.nav-dropdown > a.nav-dd-trigger .chev{width:10px;height:10px;flex-shrink:0;transition:transform .2s;opacity:.55}
.nav-dropdown:hover > a.nav-dd-trigger .chev,
.nav-dropdown:focus-within > a.nav-dd-trigger .chev{transform:rotate(180deg);opacity:1}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 16px);right:-16px;
  min-width:260px;background:#fff;
  border:1px solid var(--line,#e8e6df);
  box-shadow:0 20px 48px rgba(15,29,46,.14);
  padding:8px;border-radius:6px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s,visibility .18s,transform .18s;
  list-style:none;margin:0;
  display:flex;flex-direction:column;gap:0;
  z-index:120;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dropdown-menu li{margin:0}
.nav-dropdown-menu li a{
  display:block;padding:11px 14px;
  font-size:.86rem;font-weight:500;
  color:var(--ink-2,#3a4658);
  border-radius:4px;text-decoration:none;
  transition:background .15s,color .15s;
  letter-spacing:0;white-space:nowrap;
}
.nav-dropdown-menu li a:hover{background:var(--off,#f7f6f3);color:var(--brand,#1a3a5c)}
.nav-dropdown-menu li a::after{display:none !important}

/* — global safety — */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%;height:auto}
table{max-width:100%}
* {min-width:0}                       /* lets flex children shrink */

/* —— Stats row on mobile — single row of 4, compact and aligned —— */
@media (max-width:760px){
  #stats{padding:32px 12px !important}
  .stats-grid{
    grid-template-columns:repeat(4,1fr) !important;
    gap:0 !important;
    max-width:none;
  }
  .stat,.stat:nth-child(odd),.stat:nth-child(even){
    padding:6px 4px !important;
    border-right:1px solid rgba(255,255,255,.1) !important;
    border-bottom:none !important;
    text-align:center;
  }
  .stat:last-child{border-right:none !important}
  .stat-num{
    font-size:1.4rem !important;
    gap:1px !important;
    font-weight:400 !important;
    white-space:nowrap;
  }
  .stat-num .plus{font-size:.8em}
  .stat-label{
    margin-top:6px !important;
    font-size:.56rem !important;
    letter-spacing:.04em !important;
    text-transform:none !important;
    line-height:1.25;
    color:rgba(255,255,255,.55) !important;
  }
}
@media (max-width:380px){
  .stat-num{font-size:1.2rem !important}
  .stat-label{font-size:.52rem !important}
}

/* —— Service cards on mobile — image-led, squared, compact, subtle glass —— */
@media (max-width:760px){
  .services-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .svc{
    position:relative !important;
    border-radius:0 !important;          /* squared — matches site language */
    overflow:hidden !important;
    padding:0 0 16px !important;
    border:1px solid var(--line,#e8e6df) !important;
    background:#fff !important;
    box-shadow:0 4px 14px rgba(15,29,46,.06) !important;
    transform:none !important;
  }
  .svc:hover{transform:none !important}
  /* full image on top — taller than before, never clipped */
  .svc-thumb{
    position:relative !important;inset:auto !important;
    width:100% !important;height:200px !important;
    border-radius:0 !important;
  }
  .svc-thumb img{
    width:100%;height:100%;object-fit:cover;
  }
  .svc:hover .svc-thumb img{transform:none !important}
  .svc-thumb::after{
    background:linear-gradient(180deg,transparent 65%,rgba(15,29,46,.12) 100%) !important;
  }

  /* subtle glass body — squared, tight padding */
  .svc-body{
    position:relative !important;
    padding:16px 20px 0 !important;
    background:
      linear-gradient(180deg,rgba(247,246,243,.6) 0%,rgba(255,255,255,1) 100%) !important;
    backdrop-filter:none;
  }
  .svc-icon{display:none !important}
  .svc-body h3{
    font-size:1.05rem !important;
    font-weight:600 !important;
    margin-bottom:6px !important;
    line-height:1.25 !important;
  }
  .svc-body p{
    font-size:.86rem !important;
    line-height:1.55 !important;
    margin-bottom:12px !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:var(--ink-3,#3a4658) !important;
  }
  .svc-body a,.svc-link,.svc-cta{
    color:var(--brand,#1a3a5c) !important;
    font-size:.82rem !important;
    font-weight:600 !important;
    letter-spacing:.02em;
    border-bottom:1px solid currentColor;
    padding-bottom:1px;
  }

  /* subtle gold corner accent (top-right in RTL) — modern touch without rounding */
  .svc::before{
    content:"";position:absolute;top:0;right:0;
    width:36px;height:2px;background:var(--accent,#c69a4d);
    z-index:3;opacity:.85;
  }
}

/* —— "Differences" 01–06 cards on mobile: horizontal compact list —— */
@media (max-width:760px){
  .diff-grid{
    grid-template-columns:1fr !important;
    gap:0 !important;
    border:none !important;
    background:#fff;
  }
  .diff{
    display:grid !important;
    grid-template-columns:48px 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:14px;row-gap:2px;align-items:start;
    padding:18px 14px !important;
    border-left:none !important;
    border-right:none !important;
    border-top:none !important;
    border-bottom:1px solid var(--line,#e8e6df) !important;
    background:transparent !important;
  }
  .diff:last-child{border-bottom:none !important}
  .diff:hover{background:transparent !important}
  .diff-num{
    grid-column:1 !important;grid-row:1 / span 2 !important;
    font-size:1.7rem !important;
    margin-bottom:0 !important;
    color:var(--accent,#c69a4d) !important;
    line-height:1 !important;
    padding-top:2px;
  }
  .diff h3{
    grid-column:2 !important;grid-row:1 !important;
    font-size:.98rem !important;
    margin-bottom:4px !important;
    line-height:1.25 !important;
  }
  .diff p{
    grid-column:2 !important;grid-row:2 !important;
    font-size:.86rem !important;
    line-height:1.55 !important;
    color:var(--ink-3,#3a4658) !important;
  }
  #difference{padding:36px 12px !important}
}

/* —— Testimonials on mobile — horizontal scroll carousel (snap) —— */
@media (max-width:760px){
  #trust{padding:36px 0 36px !important}
  #trust .section-head{padding:0 16px;margin-bottom:24px !important}
  .trust-grid{
    display:flex !important;
    grid-template-columns:none !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    gap:12px !important;
    padding:4px 16px 14px !important;
    margin:0 !important;max-width:none !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:rgba(15,29,46,.18) transparent;
  }
  .trust-grid::-webkit-scrollbar{height:4px}
  .trust-grid::-webkit-scrollbar-thumb{background:rgba(15,29,46,.18);border-radius:2px}
  .tc{
    flex:0 0 84% !important;
    max-width:320px;min-width:240px;
    scroll-snap-align:start;
    padding:22px 22px !important;
    margin:0 !important;
    box-shadow:0 4px 14px rgba(15,29,46,.06);
  }
  .tc-stars{font-size:.82rem !important;margin-bottom:12px !important}
  .tc p{
    font-size:.88rem !important;
    line-height:1.65 !important;
    /* truncate to keep cards uniform */
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .tc-sig{margin-top:16px !important;padding-top:14px !important;gap:10px !important}
  .tc-avatar{width:38px !important;height:38px !important;font-size:.78rem !important}
  .tc-sig strong{font-size:.86rem !important}
  .tc-sig span{font-size:.72rem !important}
}

/* subtle gradient fade hint on the right edge of trust-grid (RTL: more cards there) */
@media (max-width:760px){
  #trust{position:relative}
  #trust::after{
    content:"";position:absolute;top:90px;bottom:30px;left:0;
    width:32px;
    background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
    pointer-events:none;z-index:1;
  }
}

/* —— Team on mobile — always 2 per row, compact —— */
@media (max-width:760px){
  #team{padding:36px 14px !important}
  .team-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px 10px !important;
  }
  .tm-photo{aspect-ratio:1/1.05 !important}
  .tm-photo img{height:100% !important;width:auto !important;max-width:100% !important;object-fit:cover}
  .tm-num{font-size:.58rem !important;top:8px !important;right:10px !important;letter-spacing:.16em !important;gap:5px !important}
  .tm-num::after{width:14px !important}
  .tm-body{padding:12px 2px 0 !important}
  .tm-body h4{font-size:.95rem !important;margin-bottom:2px !important;line-height:1.2 !important}
  .tm-body span{font-size:.74rem !important;line-height:1.35 !important}
}

/* —— Hero title polish — shimmer on accent, gradient + entry animation —— */
.hero-title .accent{
  background:linear-gradient(135deg,#e9bd6d 0%,var(--accent,#c69a4d) 35%,#fff2d0 55%,var(--accent,#c69a4d) 75%,#a8823b 100%);
  background-size:200% 100%;background-position:100% 50%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  position:relative;display:inline-block;
  /* breathing room for italic slant — first/last letter of RTL Hebrew italic
     can overhang the inline-block; padding fixes the visible clip */
  padding-inline:.12em;margin-inline:-.12em;
  animation:accent-shimmer 5s ease-in-out 1.2s infinite;
}
@keyframes accent-shimmer{
  0%,70%,100%{background-position:100% 50%}
  35%{background-position:0% 50%}
}
.hero-title .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:linear-gradient(90deg,transparent,var(--accent,#c69a4d) 30%,#e9bd6d 50%,var(--accent,#c69a4d) 70%,transparent);
  opacity:.55;transform:scaleX(0);transform-origin:center;
  animation:underline-grow 1.3s cubic-bezier(.6,.05,.3,1) .9s forwards;
}
@keyframes underline-grow{to{transform:scaleX(1)}}

/* fade-in / slide-up on hero text */
.hero-eyebrow{opacity:0;transform:translateY(8px);animation:hero-rise .7s cubic-bezier(.32,.72,.18,1) .15s forwards}
.hero-title  {opacity:0;transform:translateY(12px);animation:hero-rise .8s cubic-bezier(.32,.72,.18,1) .35s forwards}
.hero-sub    {opacity:0;transform:translateY(10px);animation:hero-rise .7s cubic-bezier(.32,.72,.18,1) .6s forwards}
.hero-actions{opacity:0;transform:translateY(10px);animation:hero-rise .7s cubic-bezier(.32,.72,.18,1) .85s forwards}
@keyframes hero-rise{
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .hero-eyebrow,.hero-title,.hero-sub,.hero-actions{animation:none;opacity:1;transform:none}
  .hero-title .accent{animation:none;background-position:50% 50%}
  .hero-title .accent::after{animation:none;transform:scaleX(1)}
}

/* —— Hamburger button (hidden by default, shown on small screens) —— */
.mobile-nav-toggle{
  display:none;
  background:transparent;border:0;cursor:pointer;
  width:44px;height:44px;padding:0;
  align-items:center;justify-content:center;
  color:var(--ink,#0f1d2e);position:relative;z-index:201;
}
.mobile-nav-toggle span{
  display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  position:relative;transition:background .15s;
}
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;
}
.mobile-nav-toggle span::before{top:-7px}
.mobile-nav-toggle span::after{top:7px}
/* the in-nav hamburger never morphs — there is a dedicated close button inside the drawer */
.mobile-nav-toggle[aria-expanded="true"]{visibility:hidden}

/* —— Backdrop —— */
.mobile-drawer-backdrop{
  position:fixed;inset:0;background:rgba(10,21,36,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .28s ease, visibility .28s ease;
  z-index:199;
}
.mobile-drawer-backdrop[data-open="true"]{opacity:1;visibility:visible}

/* —— Mobile drawer —— */
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(360px, 88vw);
  background:linear-gradient(180deg,#142943 0%, #0f1d2e 60%, #0a1524 100%);
  color:#fff;
  z-index:200;
  display:flex;flex-direction:column;
  transform:translateX(105%);             /* RTL: slide in from the right edge */
  transition:transform .34s cubic-bezier(.32,.72,.18,1);
  overflow:hidden;
  visibility:hidden;
  box-shadow:-24px 0 60px rgba(0,0,0,.25);
}
.mobile-drawer[data-open="true"]{transform:translateX(0);visibility:visible}

/* gold accent strip on the left edge of the drawer */
.mobile-drawer::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
  background:linear-gradient(180deg,var(--accent,#c69a4d),transparent 70%);
  opacity:.7;
}

/* Drawer header — logo + close */
.md-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(22px, calc(14px + env(safe-area-inset-top))) 22px 14px;border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.md-brand{display:flex;flex-direction:column;line-height:1.2}
.md-brand strong{font-family:var(--display,'Manrope',sans-serif);font-size:.92rem;font-weight:700;color:#fff;letter-spacing:.01em}
.md-brand span{font-size:.66rem;color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
.md-close{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .18s, border-color .18s, transform .18s;
  flex-shrink:0;
}
.md-close:hover,.md-close:focus-visible{background:var(--accent,#c69a4d);border-color:var(--accent,#c69a4d);transform:rotate(90deg)}
.md-close svg{width:18px;height:18px;stroke-width:2}

/* scrollable body */
.md-body{flex:1;overflow-y:auto;padding:14px 22px 28px;-webkit-overflow-scrolling:touch}

.mobile-drawer ul{list-style:none;margin:0;padding:8px 0 0;display:flex;flex-direction:column;gap:0}
.mobile-drawer li{position:relative}
.mobile-drawer a{
  display:flex;align-items:center;justify-content:space-between;color:#fff;text-decoration:none;
  font-size:1.02rem;font-weight:500;letter-spacing:.01em;
  padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .18s,padding .18s,border-color .18s;
  position:relative;
}
/* small chevron on each link (RTL — points left into page flow) */
.mobile-drawer ul a::before{
  content:"";display:inline-block;width:8px;height:8px;
  border-left:1.5px solid rgba(255,255,255,.55);
  border-bottom:1.5px solid rgba(255,255,255,.55);
  transform:rotate(45deg);flex-shrink:0;
  order:2;margin-right:0;margin-left:0;
  transition:border-color .18s, transform .2s;
}
.mobile-drawer ul a:hover,.mobile-drawer ul a:focus-visible{color:var(--accent,#c69a4d);padding-right:10px}
.mobile-drawer ul a:hover::before,.mobile-drawer ul a:focus-visible::before{border-color:var(--accent,#c69a4d);transform:rotate(45deg) translate(-2px,2px)}

/* —— mobile drawer: dropdown groups (Services / Areas / Guides) —— */
.mobile-drawer .md-group{padding:0}
.mobile-drawer .md-group > details{border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-drawer .md-group > details > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 4px;
  color:#fff;font-size:1.02rem;font-weight:500;letter-spacing:.01em;
  transition:color .18s;
}
.mobile-drawer .md-group > details > summary::-webkit-details-marker{display:none}
.mobile-drawer .md-group > details > summary::marker{content:""}
.mobile-drawer .md-group > details > summary::before{display:none !important}
.mobile-drawer .md-group > details > summary > span:first-child{flex:1}
.mobile-drawer .md-group-chev{
  display:inline-block;width:8px;height:8px;flex-shrink:0;
  border-left:1.5px solid rgba(255,255,255,.55);
  border-bottom:1.5px solid rgba(255,255,255,.55);
  transform:rotate(-45deg);
  transition:transform .22s ease, border-color .18s;
}
.mobile-drawer .md-group > details[open] > summary{color:var(--accent,#c69a4d)}
.mobile-drawer .md-group > details[open] > summary .md-group-chev{
  transform:rotate(135deg);border-color:var(--accent,#c69a4d);
}
.mobile-drawer .md-group > details > summary:hover{color:var(--accent,#c69a4d)}
.mobile-drawer .md-group > details > summary:hover .md-group-chev{border-color:var(--accent,#c69a4d)}
.mobile-drawer .md-group ul.md-sub{
  list-style:none;margin:0 0 6px;padding:4px 0 10px 14px;
  display:flex;flex-direction:column;gap:0;
  background:rgba(255,255,255,.02);
  border-right:2px solid rgba(198,154,77,.25);
  margin-right:8px;
}
.mobile-drawer .md-group ul.md-sub li{margin:0}
.mobile-drawer .md-group ul.md-sub a{
  display:flex;align-items:center;justify-content:flex-start;
  padding:11px 6px 11px 6px;
  font-size:.92rem;font-weight:400;color:rgba(255,255,255,.78);
  border-bottom:none;letter-spacing:0;
}
.mobile-drawer .md-group ul.md-sub a::before{
  width:5px;height:5px;
  border-color:rgba(255,255,255,.3);
  margin-left:0;
}
.mobile-drawer .md-group ul.md-sub a:hover,
.mobile-drawer .md-group ul.md-sub a:focus-visible{color:var(--accent,#c69a4d);padding-right:14px}

.mobile-drawer .md-cta{
  margin-top:24px;background:var(--accent,#c69a4d);color:#fff;text-align:center;
  padding:16px 22px;font-weight:600;letter-spacing:.04em;font-size:.92rem;
  justify-content:center;
  border-radius:var(--r,2px);border-bottom:none;display:block;
  box-shadow:0 8px 20px rgba(198,154,77,.25);
}
.mobile-drawer .md-cta::before{display:none}
.mobile-drawer .md-cta:hover{background:#fff;color:var(--ink,#0f1d2e);padding-right:22px}

.mobile-drawer .md-contact{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:4px;
}
.mobile-drawer .md-contact-label{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:6px;font-weight:600;
}
.mobile-drawer .md-contact a{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;
  padding:11px 4px;border-bottom:none;
  font-size:.92rem;color:rgba(255,255,255,.88);font-weight:500;
}
.mobile-drawer .md-contact a::before{display:none}
.mobile-drawer .md-contact a:hover{color:var(--accent,#c69a4d);padding-right:6px}
.mobile-drawer .md-contact .md-icon{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;color:rgba(255,255,255,.7);
}
.mobile-drawer .md-contact a:hover .md-icon{background:var(--accent,#c69a4d);color:#fff}
.mobile-drawer .md-contact .md-icon svg{width:15px;height:15px;stroke-width:2}

body.nav-open{overflow:hidden}

/* show the toggle on smaller screens — true mobile only (≤ 760px) */
@media (max-width:760px){
  .mobile-nav-toggle{display:inline-flex}
  .nav-links{display:none !important}
}

/* —— Compact desktop nav (761–1180px) — fits the full menu without going mobile —— */
@media (min-width:761px) and (max-width:1180px){
  nav{padding:14px 28px !important}
  nav.scrolled{padding:10px 28px !important}
  .nav-logo img{height:38px !important}
  .nav-logo-text{display:none !important}
  .nav-links{display:flex !important;gap:30px !important;flex-wrap:nowrap}
  .nav-links a{font-size:.84rem !important;letter-spacing:0 !important;white-space:nowrap;font-weight:500}
  .nav-cta{padding:11px 20px !important;font-size:.78rem !important;letter-spacing:.02em !important;white-space:nowrap;margin-right:8px}
  .nav-dd-trigger{gap:5px}
  .nav-dropdown-menu{min-width:240px !important;top:calc(100% + 14px) !important;padding:10px !important}
  .nav-dropdown-menu li a{font-size:.84rem !important;padding:10px 14px !important}
  .mobile-nav-toggle{display:none !important}
}

/* —— Mid-desktop (1181–1320px) — slightly tighter than full —— */
@media (min-width:1181px) and (max-width:1320px){
  .nav-links{gap:36px}
  .nav-logo-text strong{font-size:.92rem}
  .nav-logo-text span{font-size:.66rem}
}

/* —— Tablet refinements (768–1100px) — fills the gap that wasn't covered —— */
@media (min-width:761px) and (max-width:1100px){
  /* nav */
  nav{padding:12px 24px}
  .nav-cta{padding:10px 16px;font-size:.78rem}

  /* hero — tighten the diagonal so text panel has breathing room */
  #hero{min-height:70vh}
  .hero-inner{padding:120px 32px 70px}
  .hero-panel{clip-path:polygon(35% 0,100% 0,100% 100%,55% 100%)}
  .hero-seam{clip-path:polygon(34.7% 0,35.3% 0,55.3% 100%,54.7% 100%)}
  .hero-title{font-size:clamp(2rem,3.6vw,3rem) !important;max-width:480px}
  .hero-sub{max-width:440px;font-size:.98rem}

  /* sections */
  section,.banner{padding:72px 32px}
  h2.title{font-size:clamp(1.8rem,3vw,2.4rem)}

  /* grids that need a middle column count */
  .services-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .diff-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid,.trust-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(4,1fr)}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .contact-grid{grid-template-columns:1fr 1fr;gap:40px}

  /* topbar — keep but trimmer */
  .topbar{padding:0 24px;font-size:.7rem}
  .topbar-item{padding:0 12px}
}

/* —— Wider mobile (480–760px) — most phones in landscape and big phones —— */
@media (min-width:481px) and (max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
}

/* —— Hero on ALL mobile sizes (≤760px) — clean structural split:
   Image area on top with fixed height, dark panel below in normal flow.
   No clip-path math gotchas — text stays on the navy panel reliably. —— */
@media (max-width:760px){
  #hero{
    display:flex;flex-direction:column;
    min-height:auto;background:var(--ink,#0f1d2e);
  }
  .hero-media{
    position:relative;inset:auto;
    height:280px;flex-shrink:0;
    width:100%;overflow:hidden;
  }
  .hero-media img{
    width:100%;height:100%;object-fit:cover;
    object-position:0% 60%;        /* anchor far-left — Bauhaus + street */
    transform:scale(1.2);
    transform-origin:8% center;    /* zoom in 20%, pivoting on the left */
  }
  /* hide desktop layers, replace seam with a gold line between image and panel */
  .hero-panel,.hero-veil,.hero-floor{display:none !important}
  .hero-seam{
    position:absolute;left:0;right:0;top:auto;bottom:0;
    height:2px;clip-path:none !important;
    background:linear-gradient(90deg,var(--accent,#c69a4d),#a8823b);
    opacity:.9;display:block !important;
    box-shadow:0 0 12px rgba(198,154,77,.35);
    z-index:5;inset:auto;
  }
  .hero-inner{
    position:relative;z-index:1;
    padding:26px 22px 26px;
    background:rgba(10,21,36,.96);
    max-width:none;flex:1;
  }
  .hero-eyebrow{margin-bottom:12px;font-size:.66rem;letter-spacing:.18em}
  .hero-title{
    font-size:clamp(1.6rem,6vw,2.1rem) !important;
    line-height:1.18;max-width:none;text-shadow:none;
  }
  .hero-sub{margin-top:12px;font-size:.94rem;line-height:1.6;max-width:none}
  .hero-actions{margin-top:22px}

  /* ─── subtle variant differences (only the seam/transition style differs) ─── */
  body[data-hero="b"] .hero-seam{display:none !important}
  body[data-hero="b"] .hero-inner{
    background:linear-gradient(180deg,
      rgba(10,21,36,.85) 0%,rgba(10,21,36,.97) 24px,
      rgba(10,21,36,.97) 100%);
  }
  body[data-hero="c"] .hero-seam{height:3px;box-shadow:0 0 20px rgba(198,154,77,.55)}
  body[data-hero="d"] .hero-media{height:300px}
  body[data-hero="d"] .hero-seam{display:none !important}
  body[data-hero="d"] .hero-inner{
    margin-top:-32px;border-radius:18px 18px 0 0;
    box-shadow:0 -14px 30px rgba(0,0,0,.35);
  }
}

/* —— Small phones —— */
@media (max-width:480px){
  /* topbar — removed entirely on mobile. Phone is in the hamburger drawer
     and the floating WhatsApp/phone button keeps tap-to-call accessible. */
  .topbar{display:none}

  /* navbar — hide the inline CTA (it lives in the drawer), give logo room */
  .nav-cta{display:none}
  .nav-logo{flex:1;min-width:0;gap:0}
  .nav-logo img{height:40px;width:auto;flex-shrink:0}
  .nav-logo-text{display:none}

  /* hamburger keeps space on the left */
  .mobile-nav-toggle{flex-shrink:0;margin-right:auto}

  /* keep tap targets at 44px+ */
  .btn,button,a.btn{min-height:44px}

  /* small phones: shorter image, tighter spacing */
  .hero-media{height:250px}
  body[data-hero="d"] .hero-media{height:300px}
  .hero-inner{padding:22px 18px 24px}
  .hero-title{font-size:clamp(1.5rem,7vw,1.95rem) !important}
  .hero-sub{font-size:.92rem;line-height:1.6;margin-top:14px}
  .hero-actions{margin-top:22px;flex-direction:column;align-items:stretch;width:100%}
  .hero-actions .btn{width:100%;justify-content:center}

  /* whatsapp float — make sure it doesn't cover footer CTAs */
  .whatsapp-float,#whatsapp-float,a[href*="wa.me"].float{bottom:18px !important;right:18px !important}
}

/* hide live indicator on tablet + desktop (it's mobile-only — but we hid the
   whole topbar on phones anyway, so this is just safety). */
.topbar-live{display:none}

/* —— iPad Pro / large tablet —— */
@media (min-width:1101px) and (max-width:1280px){
  nav{padding:14px 32px}
  section,.banner{padding:84px 40px}
  .hero-inner{padding:140px 40px 80px}
}

/* —— Prevent horizontal scroll caused by any rogue element —— */
@media (max-width:1200px){
  body{overflow-x:hidden}
  .hero-title,h1,h2,h3{overflow-wrap:break-word;word-break:break-word}
}