/* ==========================================================================
   RESPONSIVE VIEWS
   Phone   : up to 640px         (one column, hamburger menu, large tap targets)
   Tablet  : 641px - 1024px      (two columns where it helps, hamburger menu)
   Desktop : 1025px and above    (full layout)
   The browser picks the view from the screen width, so a phone always gets the
   phone view and a tablet the tablet view. Loaded last on every page.
   ========================================================================== */

/* ---------- all views ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,video,iframe,svg{max-width:100%}
.site-header{top:max(14px,env(safe-area-inset-top))}
.hero-bg-wrap picture{display:block;width:100%;height:100%}

/* touch devices: a tapped dropdown opens instead of navigating (see js/responsive.js) */
.nav-links .has-sub.open .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* About page: CEO profile (replaces the inline <style> that was cut off in about.html) */
.ceo-profile .ceo-grid{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:clamp(3rem,8vw,8rem);align-items:stretch}
.ceo-profile .ceo-photo{position:relative;min-height:320px;margin-block:1rem}   /* equal space above and below = centred on the text; the gold frame then ends level with the text */
.ceo-profile .ceo-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:var(--radius-s);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.ceo-profile .ceo-photo::after{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;border:2px solid var(--copper);border-radius:var(--radius-s);z-index:-1}
.ceo-profile .ceo-text{align-self:center}
.ceo-profile .ceo-role{color:var(--copper);font-weight:500;letter-spacing:.04em;margin:-.4rem 0 1.2rem}
.ceo-profile .ceo-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}

/* ---------- small desktop / large tablet: keep the header on one line ---------- */
@media(max-width:1279px){
  .site-header .nav{padding-left:1.2rem;gap:.8rem}
  .site-header .brand-logo{height:38px}
  .site-header .brand{gap:.6rem}
  .site-header .brand-name{font-size:1.05rem}
  .site-header .nav-links>li>a{font-size:.8rem;padding:.55rem .6rem;letter-spacing:.02em}
  .site-header .nav-cta{font-size:.8rem;padding:.65rem 1.1rem;margin-left:.6rem}
  .site-header .nav-cta::before{left:-.6rem}
}

/* ==========================  TABLET  (641px - 1024px)  ========================== */
@media(min-width:641px) and (max-width:1024px){
  .reviews-grid .review-card:last-child:nth-child(odd){grid-column:1/-1}
  .hero-inner,.page-header .container{max-width:640px}
}

/* ===========================  PHONE  (up to 640px)  =========================== */
@media(max-width:640px){
  :root{--gutter:1.25rem}
  section{scroll-margin-top:5rem}

  /* hero: the 19 MB animated wallpaper is swapped for a light image on phones (see index.html) */
  .hero{min-height:auto}

  /* layouts set inline or by wider rules collapse to a clean single column */
  .panel-grid{grid-template-columns:1fr!important}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.5rem 1.2rem}
  .stat-num{font-size:1.9rem}
  .stat-label{font-size:.82rem}
  .fact-grid,.footer-grid,.mv-grid,.loc-grid,.reviews-grid,.pillars,.office-strip .container{grid-template-columns:1fr}
  .pillar{padding:1.4rem 1.2rem}

  /* About: CEO profile stacks, photo on top */
  .ceo-profile .ceo-grid{grid-template-columns:1fr;gap:2rem}
  .ceo-profile .ceo-photo{min-height:0;aspect-ratio:4/5;max-width:340px;margin-block:0}
  .ceo-profile .ceo-photo::after{inset:auto -10px -10px auto}

  /* buttons are easy to hit and fill the width when they stand alone */
  .btn,.btn-row a,.loc-actions a{min-height:46px}
  .hero .btn-row,.cta-band .btn-row,.btn-row{gap:.7rem}
  .loc-actions a{flex:1 1 100%;justify-content:center}
  .reviews-cta .btn{width:100%;justify-content:center}

  /* forms: 16px inputs stop iPhones zooming in when a field is tapped */
  .field input,.field select,.field textarea{font-size:16px}
  .contact-section .form-panel{padding:1.6rem 1.2rem;border-radius:20px}
  .contact-list li{padding:.85rem .9rem}
  .map-card{min-height:300px}

  /* footer links: bigger tap area */
  .site-footer a{display:inline-block;padding:.3rem 0}
  .footer-bottom a{padding:.3rem .2rem}

  /* floating WhatsApp button clear of content */
  body{padding-bottom:0}
}

/* very small phones */
@media(max-width:360px){
  :root{--gutter:1rem}
  .site-header .nav{padding-left:1rem}
  .site-header .brand-name{font-size:.95rem}
  .site-header .brand-logo{height:34px}
  .stat-num{font-size:1.7rem}
}

/* ---------- Footer social buttons (links are set in js/social-links.js) ---------- */
.footer-social{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.site-footer .social-link{
  width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;
  color:var(--navy);background:var(--white);border:1.5px solid var(--navy-12);
  box-shadow:0 4px 12px rgba(18,48,74,.07);text-decoration:none;
  transition:transform .25s ease,color .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-footer .social-link svg{width:20px;height:20px}
.site-footer .social-link:hover,.site-footer .social-link:focus-visible{transform:translateY(-3px);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(18,48,74,.22)}
.site-footer .social-link[data-network="facebook"]:hover,.site-footer .social-link[data-network="facebook"]:focus-visible{background:#1877F2}
.site-footer .social-link[data-network="instagram"]:hover,.site-footer .social-link[data-network="instagram"]:focus-visible{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.site-footer .social-link[data-network="linkedin"]:hover,.site-footer .social-link[data-network="linkedin"]:focus-visible{background:#0A66C2}
.site-footer .social-link:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
@media(max-width:640px){.site-footer .social-link{width:48px;height:48px;padding:0}}

/* narrowest phones (320px): keep logo + name + menu button comfortably inside the header */
@media(max-width:340px){
  .site-header .nav{padding-left:.8rem}
  .site-header .brand{gap:.5rem}
  .site-header .brand-logo{height:30px;padding:2px 5px}
  .site-header .brand-name{font-size:.86rem}
}

/* large desktop: slightly tighter link spacing so logo + name + 6 links + button always fit the pill */
@media(min-width:1280px){
  .site-header .nav-links>li>a{padding:.55rem .68rem}
  .site-header .brand-name{font-size:1.1rem}
  .site-header .nav-cta{margin-left:.7rem}
}

/* ---------- About page: "About Sudhanshu And Associates" section ---------- */
.firm-about{background:var(--white);border-top:1px solid var(--navy-12)}
.firm-about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.firm-about-head{position:sticky;top:7.5rem}
.firm-about-head::before{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--copper);margin-bottom:1.3rem}
.firm-about-head h2{margin:0}
.firm-about-body p{margin:0 0 1.35rem;font-size:1.04rem;line-height:1.85}
.firm-about-body p:first-child{font-size:1.2rem;line-height:1.7;color:var(--navy)}
.firm-about-body p:last-child{margin-bottom:0}
@media(max-width:900px){
  .firm-about-grid{grid-template-columns:1fr;gap:1.5rem}
  .firm-about-head{position:static}
}

/* CEO profile on tablets and small laptops: the bio is long, so the photo keeps a normal 4:5 portrait,
   lines up with the top of the text and stays in view while the text is read (overrides the 820px rule in styles.css) */
@media(min-width:641px) and (max-width:1099px){
  .ceo-profile .ceo-grid{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);align-items:start}
  .ceo-profile .ceo-photo{align-self:start;min-height:0;aspect-ratio:4/5;max-width:none;margin-block:0;position:sticky;top:7rem}
}