/* ═══════════════════════════════════════════
   BATUNER LEGAL v4 — style.css
   Cormorant Garamond + Jost · Navy + Gold
═══════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --navy:    #0c1828;
  --navy-2:  #12213a;
  --navy-3:  #1a2d4a;
  --navy-4:  #223459;
  --gold:    #c09a3a;
  --gold-l:  #d4b460;
  --gold-ll: #e8d08a;
  --gold-dim:rgba(192,154,58,0.15);
  --cream:   #f5f0e8;
  --cream-2: #ede6d6;
  --txt:     #c5bba8;
  --txt-2:   #8a8070;
  --txt-3:   #5a5248;
  --border:  rgba(192,154,58,0.2);
  --border-s:rgba(192,154,58,0.4);
  --serif:   'Cormorant Garamond',Georgia,serif;
  --sans:    'Jost',system-ui,sans-serif;
  --ease:    cubic-bezier(0.22,1,0.36,1);
}

html{scroll-behavior:smooth;}
body{background:var(--navy);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--sans);cursor:pointer;}

[data-lang]{display:none;}
[data-lang].lon{display:inline;}

/* ── PAGE TRANSITIONS ── */
.page{display:none;}
.page.active{display:block;}
@keyframes bl-pageIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.page.active{animation:bl-pageIn 0.5s var(--ease) both;}

/* ── NAV ── */
#navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:68px;
  border-bottom:0.5px solid var(--border);
  background:rgba(12,24,40,0.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:200;
}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0;}
.seal{width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;}
.logo:hover .seal{background:var(--gold-dim);}
.seal span{font-family:var(--serif);color:var(--gold);font-size:12px;font-weight:400;}
.logo-txt{font-family:var(--serif);font-size:17px;color:var(--cream);letter-spacing:0.06em;white-space:nowrap;}
.logo-txt em{color:var(--gold);font-style:normal;}
.nav-c{display:flex;gap:28px;}
.nav-a{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt);background:none;border:none;padding:4px 0;transition:color 0.2s;white-space:nowrap;}
.nav-a:hover,.nav-a.active{color:var(--gold-l);}
.nav-r{display:flex;align-items:center;gap:10px;}
.cta-nav{padding:9px 22px;background:var(--gold);color:var(--navy);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;border:none;font-weight:500;transition:background 0.2s,transform 0.15s;white-space:nowrap;}
.cta-nav:hover{background:var(--gold-l);transform:translateY(-1px);}
.lang-wrap{display:flex;gap:4px;}
.lb{font-size:10px;letter-spacing:0.1em;padding:4px 8px;border:0.5px solid var(--border);color:var(--txt);background:transparent;transition:all 0.2s;text-transform:uppercase;}
.lb.active{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.lb:hover:not(.active){border-color:var(--gold);color:var(--gold-l);}
.mobile-toggle{display:none;background:transparent;border:0.5px solid var(--border);color:var(--txt);padding:6px 10px;font-size:20px;line-height:1;}
.mobile-menu{display:none;flex-direction:column;background:var(--navy-2);border-bottom:0.5px solid var(--border);position:sticky;top:68px;z-index:199;}
.mobile-menu.open{display:flex;}
.mob-a{padding:14px 24px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt);background:none;border:none;border-bottom:0.5px solid var(--border);text-align:left;transition:color 0.2s;}
.mob-a:last-of-type{border-bottom:none;}
.mob-a:hover{color:var(--gold-l);}
.mob-lang{display:flex;gap:8px;padding:14px 24px;}

/* ── HERO ── */
.hero{min-height:88vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:80px 56px 80px 48px;position:relative;z-index:2;}
.hero-right{position:relative;background:var(--navy-2);border-left:0.5px solid var(--border);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;}
.hero-img-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.hero-img-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:60px 60px;opacity:0.5;}
.hero-img-label{text-align:center;position:relative;z-index:1;}
.hero-img-label i{font-size:52px;color:var(--border-s);display:block;margin-bottom:12px;}
.hero-img-label p{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt-3);}
.team-photo{width:100%;height:100%;object-fit:cover;object-position:center top;}

/* Hero stat bar */
.hero-stats{padding:28px 32px;background:rgba(12,24,40,0.75);backdrop-filter:blur(4px);border-top:0.5px solid var(--border);position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);}
.h-stat{padding:12px 20px;border-right:0.5px solid var(--border);}
.h-stat:last-child{border-right:none;}
.h-stat-n{font-family:var(--serif);font-size:28px;font-weight:300;color:var(--gold-l);line-height:1;margin-bottom:4px;}
.h-stat-l{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--txt-2);}

/* Hero text */
.h-ey{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:14px;}
.h-ey::before{content:'';width:0;height:0.5px;background:var(--gold);flex-shrink:0;transition:width 0.8s ease 0.5s;}
.h-tag{font-family:var(--serif);font-size:16px;color:var(--txt);margin-bottom:16px;line-height:1.4;}
.h-h1{font-family:var(--serif);font-size:clamp(36px,4vw,56px);font-weight:300;line-height:1.06;color:var(--cream);margin-bottom:26px;letter-spacing:0.01em;}
.h-h1 em{font-style:italic;color:var(--gold-l);}
.h-body{font-size:14px;line-height:1.85;color:var(--txt);max-width:440px;margin-bottom:38px;}
.h-acts{display:flex;gap:12px;flex-wrap:wrap;}

/* Animated gold bottom line */
.hero-line{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.5;z-index:3;}

/* ── BUTTONS ── */
.btn-p{padding:13px 32px;background:var(--gold);color:var(--navy);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;border:none;font-weight:500;transition:background 0.2s,transform 0.15s;display:inline-block;}
.btn-p:hover{background:var(--gold-l);transform:translateY(-1px);}
.btn-g{padding:13px 32px;background:transparent;color:var(--txt);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;border:0.5px solid var(--border);transition:all 0.2s;display:inline-block;}
.btn-g:hover{border-color:var(--gold);color:var(--gold-l);}

/* ── TRUST BAR ── */
.trust-bar{display:flex;align-items:center;border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);background:var(--navy-2);}
.trust-item{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--txt-2);padding:18px 24px;border-right:0.5px solid var(--border);flex:1;justify-content:center;}
.trust-item:last-child{border-right:none;}
.trust-item i{color:var(--gold);font-size:16px;}

/* ── PILLARS ── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:0.5px solid var(--border);}
.pillar{padding:40px 36px;border-right:0.5px solid var(--border);background:var(--navy-2);transition:background 0.25s;}
.pillar:last-child{border-right:none;}
.pillar:hover{background:var(--navy-3);}
.pillar-icon{font-size:28px;color:var(--gold);margin-bottom:20px;display:block;}
.pillar-title{font-family:var(--serif);font-size:20px;color:var(--cream);margin-bottom:10px;line-height:1.2;}
.pillar-body{font-size:13px;line-height:1.75;color:var(--txt);}

/* ── SECTION BASE ── */
.section{padding:80px 48px;}
.section-label{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:14px;}
.section-label::before{content:'';width:28px;height:0.5px;background:var(--gold);display:block;flex-shrink:0;}
.section-title{font-family:var(--serif);font-size:clamp(28px,3.5vw,40px);font-weight:300;color:var(--cream);margin-bottom:52px;max-width:500px;line-height:1.15;}
.section-title em{font-style:italic;color:var(--gold-l);}

/* ── PRACTICE LIST (homepage) ── */
.prac-list{border:0.5px solid var(--border);}
.prac-item{display:grid;grid-template-columns:60px 1fr 32px;align-items:center;border-bottom:0.5px solid var(--border);padding:26px 36px;background:var(--navy-2);cursor:pointer;transition:background 0.2s,padding-left 0.25s;}
.prac-item:last-child{border-bottom:none;}
.prac-item:hover{background:var(--navy-3);padding-left:44px;}
.prac-n{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:0.06em;}
.prac-title{font-family:var(--serif);font-size:21px;color:var(--cream);margin-bottom:3px;}
.prac-sub{font-size:12px;color:var(--txt);letter-spacing:0.03em;}
.prac-arr{font-size:18px;color:var(--gold);opacity:0;transition:opacity 0.2s,transform 0.2s;}
.prac-item:hover .prac-arr{opacity:1;transform:translateX(4px);}

/* ── SERVICES GRID (services page) ── */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border:0.5px solid var(--border);}
.svc-card{padding:40px;background:var(--navy-2);transition:background 0.25s;}
.svc-card:hover{background:var(--navy-3);}
.svc-n{font-family:var(--serif);font-size:13px;color:var(--gold);margin-bottom:18px;letter-spacing:0.1em;}
.svc-title{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cream);margin-bottom:14px;line-height:1.25;}
.svc-body{font-size:13px;line-height:1.75;color:var(--txt);margin-bottom:20px;}
.svc-more{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:gap 0.2s;}
.svc-more::after{content:'→';}
.svc-card:hover .svc-more{gap:14px;}

/* ── TESTIMONIALS ── */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);}
.test-card{background:var(--navy-2);padding:36px;transition:background 0.2s;}
.test-card:hover{background:var(--navy-3);}
.test-stars{display:flex;gap:4px;margin-bottom:20px;color:var(--gold);font-size:14px;}
.test-quote{font-family:var(--serif);font-size:17px;font-style:italic;color:var(--cream);line-height:1.6;margin-bottom:20px;}
.test-author{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--txt-2);}
.test-source{font-size:11px;color:var(--txt-3);margin-top:3px;}

/* ── CONTACT EMBED (homepage) ── */
.contact-embed{background:var(--navy-2);border:0.5px solid var(--border);padding:52px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.ce-h{font-family:var(--serif);font-size:32px;font-weight:300;color:var(--cream);margin-bottom:12px;line-height:1.2;}
.ce-h em{font-style:italic;color:var(--gold-l);}
.ce-sub{font-size:14px;line-height:1.8;color:var(--txt);margin-bottom:32px;}
.cd{padding:16px 0;border-bottom:0.5px solid var(--border);}
.cd:first-of-type{border-top:0.5px solid var(--border);}
.cd-l{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt-2);margin-bottom:5px;}
.cd-v{font-family:var(--serif);font-size:16px;color:var(--cream);}

/* ── CONTACT GRID (contact page) ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;}

/* ── FORMS ── */
.fg{margin-bottom:18px;}
.fl{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt-2);display:block;margin-bottom:8px;}
.fi,.fs,.ft{width:100%;background:var(--navy);border:0.5px solid var(--border);color:var(--cream);font-family:var(--sans);font-size:13px;padding:11px 14px;outline:none;transition:border-color 0.2s;font-weight:300;appearance:none;}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--gold);}
.fs option{background:var(--navy);}
.ft{height:110px;resize:vertical;}
.fi::placeholder,.ft::placeholder{color:var(--txt-3);}
.form-ok{display:none;margin-top:14px;padding:14px 20px;border:0.5px solid rgba(192,154,58,0.4);color:var(--gold-l);font-size:13px;text-align:center;}
.form-ok.visible{display:block;}

/* ── TEAM ── */
.team-ph{width:100%;height:280px;background:var(--navy-3);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:52px;position:relative;overflow:hidden;}
.team-ph-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;}
.team-ph-inner{text-align:center;position:relative;z-index:1;}
.team-ph-inner i{font-size:44px;color:var(--border-s);display:block;margin-bottom:12px;}
.team-ph-inner p{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--txt-3);}
.bio-list{display:flex;flex-direction:column;}
.bio{display:grid;grid-template-columns:260px 1fr;border-top:0.5px solid var(--border);padding:44px 0;}
.bio:last-child{border-bottom:0.5px solid var(--border);}
.bio-name{font-family:var(--serif);font-size:26px;color:var(--cream);line-height:1.1;margin-bottom:6px;}
.bio-role{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.bio-tags{display:flex;flex-wrap:wrap;gap:6px;}
.bio-tag{font-size:10px;letter-spacing:0.1em;padding:3px 10px;border:0.5px solid var(--border);color:var(--txt-2);text-transform:uppercase;}
.bio-r{padding-left:44px;border-left:0.5px solid var(--border);}
.bio-txt{font-size:13px;line-height:1.85;color:var(--txt);margin-bottom:20px;}
.bio-creds{display:flex;flex-direction:column;gap:8px;}
.bio-cred{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-2);}
.bio-cred i{color:var(--gold);font-size:13px;flex-shrink:0;}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.about-txt{font-size:14px;line-height:1.9;color:var(--txt);}
.about-txt p{margin-bottom:20px;}
.about-txt p:last-child{margin-bottom:0;}
.about-creds{display:flex;flex-direction:column;}
.cred{padding:22px 0;border-bottom:0.5px solid var(--border);display:flex;gap:18px;align-items:flex-start;transition:padding-left 0.2s;}
.cred:first-child{border-top:0.5px solid var(--border);}
.cred:hover{padding-left:8px;}
.cred-i{color:var(--gold);font-size:18px;margin-top:2px;flex-shrink:0;}
.cred-t{font-family:var(--serif);font-size:17px;color:var(--cream);margin-bottom:3px;}
.cred-s{font-size:12px;color:var(--txt-2);}

/* ── FOOTER ── */
footer{padding:32px 48px;border-top:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.fc{font-size:11px;color:var(--txt-2);letter-spacing:0.04em;}
.fr{font-size:11px;color:var(--txt-2);}
.fl-links{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--txt-2);}
.fl-links a{transition:color 0.2s;}.fl-links a:hover{color:var(--gold-l);}

/* ══ SCROLL REVEAL ══ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);}
.reveal.visible{opacity:1;transform:none;}
.d1{transition-delay:0.08s;}.d2{transition-delay:0.16s;}.d3{transition-delay:0.24s;}
.d4{transition-delay:0.32s;}.d5{transition-delay:0.40s;}.d6{transition-delay:0.48s;}

/* ══ HERO ANIMATIONS ══ */
@keyframes bl-fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes bl-drawLine{from{width:0;}to{width:100%;}}

.h-ey,.h-tag,.h-h1,.h-body,.h-acts,.h-stats{opacity:0;}
.hero-animate .hero-line{animation:bl-drawLine 1.6s var(--ease) 0.3s both;}
.hero-animate .h-ey{animation:bl-fadeUp 0.6s var(--ease) 0.1s both;}
.hero-animate .h-ey::before{width:32px;}
.hero-animate .h-tag{animation:bl-fadeUp 0.7s var(--ease) 0.22s both;}
.hero-animate .h-h1{animation:bl-fadeUp 0.8s var(--ease) 0.36s both;}
.hero-animate .h-body{animation:bl-fadeUp 0.8s var(--ease) 0.5s both;}
.hero-animate .h-acts{animation:bl-fadeUp 0.7s var(--ease) 0.64s both;}
.hero-animate .h-stats{animation:bl-fadeUp 0.9s var(--ease) 0.76s both;}

/* ══ HOVER MICRO-INTERACTIONS ══ */
.svc-card,.pillar,.prac-item,.test-card{transition:background 0.25s;}
.btn-p,.btn-g,.cta-nav{transition:background 0.2s,transform 0.15s,border-color 0.2s,color 0.2s;}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 960px
══════════════════════════════════════════ */
@media(max-width:960px){
  #navbar{padding:0 24px;}
  .nav-c{display:none;}
  .mobile-toggle{display:block;}

  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-left{padding:60px 24px;}
  .hero-right{display:none;}

  .trust-bar{flex-wrap:wrap;}
  .trust-item{flex:1 1 45%;border-bottom:0.5px solid var(--border);}

  .pillars{grid-template-columns:1fr;}
  .pillar{border-right:none;border-bottom:0.5px solid var(--border);}
  .pillar:last-child{border-bottom:none;}

  .section{padding:60px 24px;}
  .services-grid{grid-template-columns:1fr;}
  .test-grid{grid-template-columns:1fr;}
  .contact-embed{grid-template-columns:1fr;padding:36px 24px;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .about-grid{grid-template-columns:1fr;gap:48px;}
  .bio{grid-template-columns:1fr;gap:0;}
  .bio-r{padding-left:0;border-left:none;border-top:0.5px solid var(--border);padding-top:28px;margin-top:24px;}
  footer{padding:28px 24px;flex-direction:column;align-items:flex-start;}
}

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 480px
══════════════════════════════════════════ */
@media(max-width:480px){
  .h-h1{font-size:32px;}
  .h-acts{flex-direction:column;}
  .btn-p,.btn-g{text-align:center;width:100%;}
  .section-title{font-size:26px;margin-bottom:36px;}
  .prac-item{grid-template-columns:48px 1fr 24px;padding:20px 16px;}
  .prac-title{font-size:18px;}
  .trust-item{flex:1 1 100%;}
}