/* ==========================================================================
   Access Law — Advocates & Legal Consultants, Bangalore
   Design system: IBM Plex family · navy / copper palette · light + dark
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#ffffff; --bg-alt:#f4f4f4; --bg-band:#eef1f5;
  --fg:#0a1b3d; --fg-body:#31394a; --fg-muted:#454e5c; --fg-soft:#626b7a;
  --border:#e2e5ea; --border-strong:#cdd3da;
  --navy:#0a1b3d; --navy-2:#122a52; --navy-soft:#2a3a5c;
  --on-navy:#eef2f8; --on-navy-soft:#9aa7c4;
  --accent:#a8623a; --accent-2:#c98a5e;
  --field:#f4f4f4; --card:#ffffff;

  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --serif:'IBM Plex Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --pad-x:clamp(20px,5vw,72px);
  --header-h:66px;
}

[data-theme="dark"]{
  --bg:#0b0f17; --bg-alt:#121722; --bg-band:#0f1420;
  --fg:#eef2f8; --fg-body:#c3cad6; --fg-muted:#aab3c1; --fg-soft:#838da0;
  --border:#232a37; --border-strong:#323a49;
  --navy:#0a1424; --navy-2:#0d1830; --navy-soft:#2a3a5c;
  --on-navy:#eef2f8; --on-navy-soft:#9aa7c4;
  --accent:#d3946a; --accent-2:#e2a67d;
  --field:#141a26; --card:#121722;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg-body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
::selection{background:#0a1b3d; color:#fff}
[data-theme="dark"] ::selection{background:#d3946a; color:#0b0f17}

h1,h2,h3,h4{font-family:var(--serif); font-weight:400; color:var(--fg); margin:0; text-wrap:balance}
p{margin:0}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* Skip link */
.skip-link{
  position:absolute; left:16px; top:-48px; z-index:100;
  background:var(--navy); color:var(--on-navy);
  padding:10px 18px; font:500 14px var(--sans); transition:top .15s;
}
.skip-link:focus{top:12px; color:var(--on-navy)}

/* Page fade */
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
main{animation:fade .3s ease both}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:var(--bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:clamp(20px,3vw,52px);
  padding:0 clamp(20px,4vw,52px);
}
.brand{font:600 clamp(24px,2.6vw,30px)/1 var(--serif); color:var(--fg); letter-spacing:-.01em; flex-shrink:0}
.brand:hover{color:var(--fg)}

.site-nav{display:flex; gap:clamp(16px,2.2vw,34px)}
.site-nav a{
  font:400 15px var(--sans); color:var(--fg-muted);
  padding:4px 0; border-bottom:2px solid transparent; transition:color .15s;
}
.site-nav a:hover{color:var(--fg)}
.site-nav a[aria-current="page"]{color:var(--fg); border-bottom-color:var(--accent)}

.header-actions{margin-left:auto; display:flex; align-items:center; gap:14px}

.theme-toggle{
  cursor:pointer; font:400 13px var(--mono); color:var(--fg-muted);
  background:none; border:1px solid var(--border-strong);
  padding:8px 12px; display:inline-flex; align-items:center; gap:7px;
}
.theme-toggle:hover{color:var(--fg)}

.btn{
  display:inline-block; font:400 14px var(--sans); padding:11px 20px;
  background:var(--navy); color:var(--on-navy); border:none; cursor:pointer;
  transition:background .15s, transform .05s;
}
.btn:hover{background:var(--navy-2); color:var(--on-navy)}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:16px; padding:16px 34px}
.btn-ghost{background:none; color:var(--fg); border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--bg-alt); color:var(--fg)}

/* Mobile nav */
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--border-strong);
  padding:9px 12px; cursor:pointer; color:var(--fg);
}
.nav-toggle .bars{display:block; width:20px; height:2px; background:currentColor; position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:currentColor; transition:transform .2s;
}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:820px){
  .nav-toggle{display:block}
  .header-actions .btn{display:none}
  .site-nav{
    position:fixed; inset:var(--header-h) 0 auto 0; z-index:49;
    flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    padding:8px 0 16px;
    transform:translateY(-110%); visibility:hidden; transition:transform .22s ease, visibility .22s;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .site-nav.open{transform:none; visibility:visible}
  .site-nav a{
    font-size:17px; padding:14px clamp(20px,5vw,52px); border-bottom:none;
  }
  .site-nav a[aria-current="page"]{
    color:var(--accent); border-left:3px solid var(--accent); padding-left:calc(clamp(20px,5vw,52px) - 3px);
  }
  .site-nav .nav-cta{margin:12px clamp(20px,5vw,52px) 0}
}
@media (min-width:821px){ .site-nav .nav-cta{display:none} }

/* ---------- Section primitives ---------- */
.kicker{
  font:400 13px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:22px;
}
.page-hero{
  padding:clamp(56px,7vw,96px) var(--pad-x) clamp(36px,4vw,52px);
  border-bottom:1px solid var(--border);
}
.page-hero h1{font-size:clamp(34px,5vw,56px); line-height:1.08; letter-spacing:-.01em; max-width:1000px}
.page-hero .lede{font-size:clamp(17px,1.6vw,19px); color:var(--fg-muted); margin-top:20px; max-width:600px}

/* ---------- Home hero ---------- */
.hero{
  padding:clamp(60px,9vw,104px) var(--pad-x) clamp(48px,6vw,80px);
  text-align:center; border-bottom:1px solid var(--border);
}
.hero .kicker{letter-spacing:.16em; margin-bottom:28px}
.hero h1{font-size:clamp(46px,7vw,80px); line-height:1.02; letter-spacing:-.01em}
.hero .tagline{
  font:600 clamp(19px,2vw,26px)/1.3 var(--serif); color:var(--fg); margin-top:14px;
}
.hero .lede{
  font-size:clamp(17px,1.6vw,20px); color:var(--fg-muted);
  max-width:600px; margin:26px auto 0;
}
.hero-cta{display:flex; gap:14px; justify-content:center; margin-top:40px; flex-wrap:wrap}

/* ---------- Principal feature ---------- */
.feature{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  background:var(--navy); color:var(--on-navy);
}
.feature-media{
  position:relative; min-height:clamp(360px,46vw,520px);
  background:repeating-linear-gradient(135deg,#0f2246 0 2px,#122a52 2px 18px);
  display:flex; align-items:flex-end; justify-content:center; padding:26px;
}
.feature-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.feature-media .badge{
  position:absolute; top:26px; left:26px; z-index:1;
  background:var(--accent); color:#fff;
  font:400 12px var(--mono); letter-spacing:.04em; padding:9px 14px;
}
.feature-media .placeholder-note{font:400 12px var(--mono); color:#7f8db0; margin-bottom:14px}
.feature-body{
  padding:clamp(44px,5vw,76px) clamp(28px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
.feature-body .kicker{color:var(--accent-2)}
.feature-body h2{font-size:clamp(30px,3.6vw,44px); line-height:1.12; letter-spacing:-.01em; color:var(--on-navy)}
.feature-body .role{font:400 16px var(--sans); color:var(--on-navy-soft); margin-top:10px}
.feature-body blockquote{
  margin:26px 0 0; font:400 clamp(16px,1.4vw,18px)/1.7 var(--sans);
  color:#d5ddec; max-width:520px;
}
.feature-stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,3vw,44px); margin-top:40px;
}
.feature-stats .num{font:300 38px/1.1 var(--sans); color:#fff}
.feature-stats .lbl{font:400 13px var(--sans); color:var(--on-navy-soft); margin-top:4px}
.feature-link{
  color:var(--accent-2); font:400 16px var(--sans); margin-top:36px;
  border-bottom:1px solid var(--accent-2); padding-bottom:2px; align-self:flex-start;
}
.feature-link:hover{color:#fff; border-color:#fff}
@media (max-width:820px){
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:320px}
}

/* ---------- Card grids ---------- */
.section{padding:clamp(52px,6vw,84px) var(--pad-x)}
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:40px; flex-wrap:wrap; gap:12px;
}
.section-head h2{font-size:clamp(26px,3vw,34px)}
.section-head a{font:400 15px var(--sans)}

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--border); border-left:1px solid var(--border);
}
.card-grid.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (max-width:480px){
  .card-grid,.card-grid.wide{grid-template-columns:1fr}
}
.card{
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:30px 26px; background:var(--card);
  min-height:170px; display:flex; flex-direction:column;
}
.card .num{font:500 13px var(--mono); color:var(--accent)}
.card h3{font-size:21px; margin-top:auto; padding-top:16px}
.card p{font:400 14px/1.5 var(--sans); color:var(--fg-muted); margin-top:8px}

.card-lg{padding:clamp(32px,3.5vw,48px); min-height:240px}
.card-lg h3{font-size:26px; margin-top:20px; padding-top:0}
.card-lg p{font-size:15px; line-height:1.65; margin-top:12px}
.card-lg .tags{font:400 13px var(--mono); color:var(--fg-soft); margin-top:auto; padding-top:20px}

/* ---------- Stats band ---------- */
.stats-band{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:var(--navy); color:var(--on-navy);
}
.stats-band>div{padding:36px 30px; border-right:1px solid var(--navy-soft)}
.stats-band>div:last-child{border-right:none}
.stats-band .num{font:300 42px/1.1 var(--sans); color:#fff}
.stats-band .lbl{font:400 14px var(--sans); color:var(--on-navy-soft); margin-top:6px}
@media (max-width:480px){
  .stats-band>div{border-right:none; border-bottom:1px solid var(--navy-soft)}
  .stats-band>div:last-child{border-bottom:none}
}

/* ---------- About ---------- */
.about-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,5vw,72px);
  padding:clamp(44px,5vw,72px) var(--pad-x); max-width:1200px;
}
.about-cols .body-text p{font-size:17px; line-height:1.75}
.about-cols .body-text p+p{margin-top:22px}
.motto-label{
  font:500 12px var(--mono); color:var(--accent);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px;
}
.motto-list{list-style:none; margin:0; padding:0}
.motto-list li{
  border-top:1px solid var(--border); padding:20px 0;
  font:400 20px var(--serif); color:var(--fg);
}
.motto-list li:last-child{border-bottom:1px solid var(--border)}

/* ---------- Team ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--border); border-left:1px solid var(--border);
}
@media (max-width:480px){ .team-grid{grid-template-columns:1fr} }
.member{border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--card)}
.member-photo{
  aspect-ratio:4/5; position:relative;
  background:repeating-linear-gradient(135deg,var(--bg-band) 0 2px,var(--bg-alt) 2px 15px);
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
}
.member-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.member-photo .badge{
  position:absolute; top:14px; left:14px; z-index:1;
  font:400 11px var(--mono); padding:6px 10px;
  background:var(--navy); color:var(--on-navy);
}
.member-photo .badge.principal{background:var(--accent); color:#fff}
.member-photo .placeholder-note{font:400 11px var(--mono); color:var(--fg-soft)}
.member-info{padding:22px 24px 28px}
.member-info h3{font-size:22px}
.member-info .role{font:400 14px var(--sans); color:var(--accent); margin-top:6px}
.member-info .focus{font:400 14px/1.55 var(--sans); color:var(--fg-muted); margin-top:12px}

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2px; padding:2px; background:var(--border);
}
@media (max-width:480px){ .gallery-grid{grid-template-columns:1fr} }
.gallery-grid figure{
  margin:0; position:relative; min-height:180px;
  background:repeating-linear-gradient(135deg,var(--bg-band) 0 2px,var(--bg-alt) 2px 16px);
  display:flex; align-items:flex-end; padding:18px;
}
.gallery-grid figure.r43{aspect-ratio:4/3}
.gallery-grid figure.r11{aspect-ratio:1/1}
.gallery-grid figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gallery-grid figcaption{font:400 13px var(--sans); color:var(--fg-muted); position:relative; z-index:1}
.gallery-grid .tag{
  position:absolute; top:16px; right:16px;
  font:400 11px var(--mono); color:var(--fg-soft);
}

/* ---------- CTA band ---------- */
.cta-band{
  padding:clamp(48px,6vw,80px) var(--pad-x);
  background:var(--bg-alt); border-top:1px solid var(--border); text-align:center;
}
.cta-band h2{font-size:clamp(26px,3.2vw,38px); line-height:1.2; max-width:640px; margin:0 auto}
.cta-band .btn{margin-top:32px; padding:16px 40px; font-size:16px}

/* ---------- Contact ---------- */
.contact-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.contact-info{
  padding:clamp(48px,6vw,84px) clamp(24px,4vw,64px);
  background:var(--navy); color:var(--on-navy);
}
.contact-info .kicker{color:var(--accent-2)}
.contact-info h1{font-size:clamp(30px,4vw,46px); line-height:1.1; color:var(--on-navy)}
.contact-info .lede{
  font:400 clamp(17px,1.5vw,19px)/1.72 var(--sans);
  color:#cdd6e8; margin-top:20px; max-width:460px;
}
.contact-rows{margin-top:44px}
.contact-row{border-top:1px solid var(--navy-soft); padding:24px 0}
.contact-row:last-child{border-bottom:1px solid var(--navy-soft)}
.contact-row .lbl{
  font:500 12px var(--mono); color:var(--accent-2);
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px;
}
.contact-row address,.contact-row p{
  font:400 17px/1.78 var(--sans); color:#fff; font-style:normal;
}
.contact-row a{color:#fff}
.contact-row a:hover{color:var(--accent-2)}
.contact-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:400px){ .contact-pair{grid-template-columns:1fr} }

/* Form */
.contact-form-wrap{padding:clamp(48px,6vw,84px) clamp(24px,4vw,64px); background:var(--bg)}
.contact-form{display:flex; flex-direction:column; gap:22px; max-width:460px}
.field-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:400px){ .field-pair{grid-template-columns:1fr} }
.field label{
  display:block; font:500 13px var(--sans); color:var(--fg-muted); margin-bottom:6px;
}
.field input,.field select,.field textarea{
  background:var(--field); border:none; border-bottom:1px solid var(--border-strong);
  color:var(--fg); font:400 16px var(--sans); padding:14px 16px; width:100%;
  border-radius:0; transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom:2px solid var(--accent); padding-bottom:13px;
}
.field ::placeholder{color:var(--fg-soft)}
.field textarea{resize:vertical; min-height:120px}
.submit-btn{
  font:400 16px var(--sans); padding:16px 20px; text-align:left;
  position:relative; width:100%;
}
.submit-btn .arrow{position:absolute; right:18px}
.form-note{font:400 12px/1.5 var(--sans); color:var(--fg-soft)}
.form-status{font:400 15px var(--sans); color:var(--accent)}

/* Map */
.map-section{background:var(--bg); border-top:1px solid var(--border)}
.map-head{
  padding:clamp(44px,5vw,68px) clamp(24px,4vw,64px) clamp(20px,2.5vw,28px);
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.map-head h2{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.01em}
.office-switch{display:flex; border:1px solid var(--border-strong)}
.office-switch button{
  cursor:pointer; font:400 15px var(--sans); padding:13px 26px;
  background:transparent; color:var(--fg-muted); border:none; transition:background .15s;
}
.office-switch button+button{border-left:1px solid var(--border-strong)}
.office-switch button[aria-pressed="true"]{background:var(--navy); color:var(--on-navy)}
.map-body{padding:0 clamp(24px,4vw,64px) clamp(52px,6vw,76px)}
.map-body iframe{
  width:100%; height:clamp(340px,42vw,480px);
  border:1px solid var(--border); display:block;
}
.map-address{
  font:400 clamp(15px,1.3vw,17px)/1.65 var(--sans);
  color:var(--fg-muted); margin-top:18px; max-width:640px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy); color:var(--on-navy);
  padding:clamp(44px,5vw,64px) var(--pad-x) 32px;
  border-top:1px solid var(--navy-soft);
}
.footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:36px; padding-bottom:40px; border-bottom:1px solid var(--navy-soft);
}
.footer-brand{max-width:280px}
.footer-brand .name{font:600 22px var(--serif); color:#fff}
.footer-brand p{font:400 15px/1.6 var(--sans); color:var(--on-navy-soft); margin-top:14px}
.footer-col h2{
  font:400 12px var(--mono); color:var(--accent-2);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px;
}
.footer-col a{display:block; font:400 15px var(--sans); color:var(--on-navy); padding:6px 0}
.footer-col a:hover{color:var(--accent-2)}
.footer-col address{font:400 15px/1.7 var(--sans); color:var(--on-navy); font-style:normal}
.footer-col address a{display:inline; padding:0}
.footer-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; font:400 13px var(--sans); color:var(--on-navy-soft);
}