/* =========================================================
   SONALIKA — ABOUT US (cinematic)
   Built on home.css + site.css + redesign.css + premium.css.
   Navy · white · gold · Archivo. Reuses .section / .fx / .why2-card.
   Namespace: .a*  ·  .vmo / .svc / .branch / .tm
   ========================================================= */

/* ---------- HERO (navy band under fixed nav) ---------- */
.ahero{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(130% 110% at 76% -10%, #24356f 0%, #16224d 46%, #0d1530 100%);
  padding:clamp(140px,16vh,196px) 0 clamp(58px,7vw,100px); }
.ahero .grain{ position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ahero-glow{ position:absolute; right:-8%; top:-30%; width:55%; height:120%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, rgba(64,110,220,.34), transparent 60%); filter:blur(46px); }
.ahero .wrap{ position:relative; z-index:2; max-width:920px; }
.ahero .wrap.ahero-split{ max-width:var(--maxw); display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,76px); align-items:center; }
.ahero-copy{ min-width:0; }
/* framed photo on the right */
.ahero-media{ position:relative; }
.ahero-media-frame{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/3.4;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 50px 90px -42px rgba(0,0,0,.7);
  background:radial-gradient(120% 90% at 50% 10%,#24356f,#0d1530); }
.ahero-media-frame image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.ahero-media-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(13,21,48,.55) 100%); }
/* floating gold stat badge */
.ahero-media-badge{ position:absolute; left:-18px; bottom:-22px; z-index:3; display:flex; align-items:center; gap:14px;
  background:linear-gradient(155deg,#ffd968,#f4b400); color:#16224d; border-radius:18px; padding:16px 22px;
  box-shadow:0 28px 50px -18px rgba(244,180,0,.6); }
.ahero-media-badge .b{ font-family:var(--display); font-weight:900; font-size:38px; line-height:1; }
.ahero-media-badge .l{ font-family:var(--display); font-weight:700; font-size:12.5px; line-height:1.25; letter-spacing:.01em; }
@media (max-width:860px){
  .ahero .wrap.ahero-split{ grid-template-columns:1fr; gap:clamp(40px,7vw,60px); }
  .ahero-media{ max-width:480px; }
  .ahero-media-badge{ left:0; }
}
.ahero .eyebrow{ color:var(--gold-2); }
.ahero .eyebrow::before{ background:var(--gold); }
.ahero h1{ color:#fff; font-size:clamp(44px,7vw,100px); letter-spacing:-.035em; line-height:.94; margin:18px 0 0; font-weight:900; }
.ahero h1 .serif-i{ color:var(--gold-2); font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; }
.ahero-lead{ color:rgba(255,255,255,.74); font-size:clamp(16px,1.65vw,21px); max-width:60ch; margin-top:22px; }
.ahero-stats{ display:flex; gap:0; flex-wrap:wrap; margin-top:46px; border-top:1px solid rgba(255,255,255,.16); padding-top:28px; }
.ahero-stats > div{ padding-right:42px; margin-right:42px; border-right:1px solid rgba(255,255,255,.16); }
.ahero-stats > div:last-child{ border-right:none; margin-right:0; padding-right:0; }
.ahero-stats .n{ font-family:var(--display); font-weight:900; font-size:clamp(30px,3.6vw,46px); color:#fff; line-height:1; }
.ahero-stats .n span{ color:var(--gold-2); }
.ahero-stats .l{ color:rgba(255,255,255,.6); font-size:13px; margin-top:7px; letter-spacing:.01em; }

/* =====================================================================
   ABOUT HERO — MOBILE FULL-BLEED (matches reference style)
   Image becomes full-screen background, content pinned to bottom
   ===================================================================== */
@media (max-width:560px){
  /* Section: full viewport height */
  .ahero{
    padding:0; min-height:100svh;
    display:flex; flex-direction:column; position:relative;
  }

  /* Suppress the glow blob + badge */
  .ahero-glow{ display:none; }
  .ahero-media-badge{ display:none; }
  .ahero .grain{ opacity:.1; }

  /* Section: stacking context */
  .ahero{ position:relative; }

  /* Content wrapper: full height, pinned to bottom, ON TOP */
  .ahero .wrap.ahero-split{
    display:flex; flex-direction:column; justify-content:flex-end;
    min-height:100svh; padding-bottom:clamp(24px,5vh,38px);
    padding-top:72px; position:relative; z-index:2;
    gap:0; grid-template-columns:unset !important;
  }

  /* Move media behind section content — absolute so it stays within .ahero */
  .ahero-media{
    position:absolute !important;
    inset:0 !important; max-width:none !important;
    z-index:0 !important;
    pointer-events:none;
  }
  .ahero-media-frame{
    border-radius:0 !important; border:none !important;
    box-shadow:none !important; aspect-ratio:auto !important;
    width:100%; height:100%; background:none !important; overflow:hidden;
  }
  .ahero-media-frame image-slot{ position:absolute; inset:0; width:100%; height:100%; }
  /* Overlay on the frame */
  .ahero-media-frame::after{
    content:"" !important; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(180deg,
      rgba(6,9,26,.90) 0%,
      rgba(6,9,26,.22) 26%,
      rgba(6,9,26,.18) 52%,
      rgba(6,9,26,.82) 70%,
      rgba(6,9,26,.97) 100%
    ) !important;
  }

  /* Copy text above the overlay */
  .ahero-copy{ max-width:100%; position:relative; z-index:3; }
  .ahero-copy .eyebrow{ font-size:11px; letter-spacing:.22em; margin-bottom:8px; }
  .ahero h1{ font-size:clamp(36px,11vw,52px); margin-top:8px; }
  .ahero-lead{ font-size:14px; margin-top:10px; max-width:38ch; line-height:1.5; }

  /* CTAs after lead text (from ahero-split styles) */
  .sp-hero-ctas, .ahero-copy .sp-hero-ctas{ margin-top:18px; flex-direction:column; gap:10px; }
  .ahero-copy .btn{ width:100%; justify-content:center; }

  /* Stats: 4-col or 2×2 dark glass cards */
  .ahero-stats{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:8px; border-top:none; padding-top:0; margin-top:18px;
  }
  .ahero-stats > div{
    padding:13px 10px !important; margin:0 !important;
    background:rgba(0,0,0,.50); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.13) !important; border-radius:14px;
    text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .ahero-stats .n{
    font-size:clamp(22px,6vw,32px); line-height:1; color:var(--gold-2) !important;
  }
  .ahero-stats .n span{ color:rgba(255,255,255,.65); font-size:.65em; }
  .ahero-stats .l{ font-size:11px; color:rgba(255,255,255,.6); line-height:1.3; margin-top:2px; }
}

/* ---------- STORY SPLIT ---------- */
.story-split{ display:grid; grid-template-columns:1.04fr 1fr; gap:clamp(30px,4.5vw,70px); align-items:center; position:relative; z-index:2; }
.story-media{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/3.3;
  background:radial-gradient(120% 90% at 50% 10%,#2c3c7a,#16224d); box-shadow:var(--ring); border:1px solid var(--panel-bd); }
.story-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.story-media .badge2{ position:absolute; left:20px; bottom:20px; z-index:3; background:rgba(13,21,48,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:14px 18px; }
.story-media .badge2 b{ display:block; font-family:var(--display); font-weight:900; font-size:30px; color:#fff; line-height:.9; }
.story-media .badge2 b i{ font-style:normal; font-size:.4em; color:var(--gold-2); margin-left:3px; }
.story-media .badge2 span{ display:block; margin-top:5px; color:var(--gold-2); font-family:var(--display); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:11px; }
.story-copy .eyebrow{ color:var(--gold-d); }
.story-copy h2{ font-family:var(--display); font-weight:900; font-size:clamp(30px,4vw,54px); letter-spacing:-.025em; color:var(--soil); margin:14px 0 0; line-height:1.02; }
.story-copy h2 .serif-g{ color:var(--blue); font-family:var(--serif); font-style:italic; font-weight:400; }
.story-copy p{ color:var(--ink-2); font-size:clamp(15px,1.5vw,17px); margin-top:18px; }
.story-copy p + p{ margin-top:14px; }
.story-points{ display:grid; gap:12px; margin-top:24px; }
.story-points li{ display:flex; align-items:flex-start; gap:12px; list-style:none; font-size:15px; color:var(--soil); }
.story-points .tick{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:rgba(27,63,156,.12); color:var(--blue); margin-top:1px; }
.story-points .tick svg{ width:13px; height:13px; }
@media (max-width:880px){ .story-split{ grid-template-columns:1fr; } .story-media{ order:-1; } }

/* ---------- VISION · MISSION · OBJECTIVE (why2-card on navy) ---------- */
.vmo{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); position:relative; z-index:2; }
.vmo .why2-card{ display:flex; flex-direction:column; }
.why2-card .kicker{ font-family:var(--display); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:11px;
  color:var(--gold-d); margin-top:18px; display:block; }
.why2-card .kicker + h3{ margin-top:6px; }
@media (max-width:880px){ .vmo{ grid-template-columns:1fr; } }

/* ---------- SERVICE (why2-card on light) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px); position:relative; z-index:2; }
.section.cream .why2-card, .section.white .why2-card{ border:1px solid var(--panel-bd); box-shadow:var(--ring); background:#fff; }
.section.cream .why2-card h3, .section.white .why2-card h3{ color:var(--soil); }
.section.cream .why2-card p, .section.white .why2-card p{ color:var(--ink-2); }
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- BRANCH / DEALER NETWORK ---------- */
.branches{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); position:relative; z-index:2; }
.branch{ position:relative; background:#fff; border:1px solid var(--panel-bd); border-radius:var(--pr-radius); padding:26px;
  box-shadow:var(--pr-shadow); overflow:hidden; transition:transform .5s var(--pr-ease), box-shadow .5s, border-color .4s; }
.branch:hover{ transform:translateY(-5px); box-shadow:var(--pr-shadow-hov); border-color:var(--gold-bd); }
.branch::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--blue),var(--gold)); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--pr-ease); }
.branch:hover::before{ transform:scaleX(1); }
.branch .pin{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,#1d2c63,#16224d); color:var(--gold-2); }
.branch .pin svg{ width:23px; height:23px; }
.branch .hq{ position:absolute; right:18px; top:18px; font-family:var(--display); font-weight:800; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--soil-2); background:var(--gold); padding:5px 10px; border-radius:100px; }
.branch h3{ font-family:var(--display); font-weight:800; font-size:20px; color:var(--soil); margin:18px 0 0; letter-spacing:-.01em; }
.branch .addr{ color:var(--ink-2); font-size:14px; margin-top:8px; line-height:1.5; }
.branch .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.branch .tag{ font-family:var(--display); font-weight:700; font-size:11.5px; color:var(--blue); background:rgba(27,63,156,.09);
  border:1px solid rgba(27,63,156,.16); padding:5px 11px; border-radius:100px; }
.branch .phone{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--panel-bd);
  font-family:var(--display); font-weight:800; font-size:15px; color:var(--soil); width:100%; }
.branch .phone svg{ width:16px; height:16px; color:var(--blue); }
@media (max-width:880px){ .branches{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .branches{ grid-template-columns:1fr; } }

/* ---------- TEAM — hierarchy tiers ---------- */
.team-tier{ position:relative; z-index:2; }
.team-tier + .team-tier{ margin-top:clamp(26px,3.4vw,46px); }
.tier-label{ display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:24px; }
.tier-label span{ font-family:var(--display); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--gold-d); }
.tier-label::before, .tier-label::after{ content:""; height:1px; flex:1; max-width:140px; background:var(--panel-bd); }
.tier-grid{ display:grid; gap:clamp(16px,2vw,24px); justify-content:center; }
.tier-1{ grid-template-columns:minmax(280px,360px); }
.tier-2{ grid-template-columns:repeat(3,minmax(0,300px)); }
.tier-3{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tm{ position:relative; background:#fff; border:1px solid var(--panel-bd); border-radius:var(--pr-radius); overflow:hidden;
  box-shadow:var(--pr-shadow); transition:transform .5s var(--pr-ease), box-shadow .5s, border-color .4s; text-align:center; }
.tm:hover{ transform:translateY(-5px); box-shadow:var(--pr-shadow-hov); border-color:var(--gold-bd); }
.tm-photo{ position:relative; aspect-ratio:1/1; overflow:hidden; background:radial-gradient(120% 90% at 50% 6%,#2c3c7a,#16224d); }
.tm-photo image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.tm-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(13,21,48,.5)); }
.tm.lead-card .tm-photo{ aspect-ratio:4/3.4; }
.tm-body{ padding:18px 16px 20px; }
.tm-name{ font-family:var(--display); font-weight:800; font-size:18px; color:var(--soil); letter-spacing:-.01em; }
.tm.lead-card .tm-name{ font-size:22px; }
.tm-role{ font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); margin-top:6px; }
.tm-note{ color:var(--ink-2); font-size:13px; margin-top:9px; }
.tm-socials{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.tm-socials a{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--bg-a); color:var(--ink-2); transition:.25s; }
.tm-socials a:hover{ background:var(--blue); color:#fff; }
.tm-socials svg{ width:15px; height:15px; }
@media (max-width:980px){ .tier-2{ grid-template-columns:repeat(2,minmax(0,300px)); } .tier-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tier-2,.tier-3{ grid-template-columns:1fr; } .tier-1{ grid-template-columns:1fr; } }

/* ---------- VALUES STRIP (cta-ish navy) ---------- */
.about-cta{ position:relative; z-index:2; text-align:center; max-width:720px; margin:0 auto; }
.about-cta h2{ font-family:var(--display); font-weight:900; font-size:clamp(32px,4.6vw,62px); letter-spacing:-.03em; color:#fff; line-height:1; }
.about-cta h2 .serif-y{ color:var(--gold-2); font-family:var(--serif); font-style:italic; font-weight:400; }
.about-cta p{ color:rgba(255,255,255,.72); font-size:clamp(16px,1.6vw,19px); margin:20px auto 0; max-width:54ch; }
.about-cta .acta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }