/* ============================================================
   FSB Law Consult — homepage
   Design language after mlegal-rds.ava-case.com reference:
   grotesque type, chapter numbers, hairline rules, numbered lists.
   Brand: logo blue #1B53A5, accent #0F7FFF, gray #6A6A6A.
   ============================================================ */

:root{
  --blue:      #1B53A5;
  --accent:    #0F7FFF;
  --ink:       #14181F;
  --navy:      #0A1220;
  --navy-2:    #0E1728;
  --gray:      #6A6A6A;
  --line:      #D8DDE4;
  --line-dark: #26314A;
  --bg:        #FFFFFF;
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}

.container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 40px;
}
.section{padding:110px 0;}

/* ---------- chapter lines (reference: label left, number right, hairline above) ---------- */
.chapt-line{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-bottom:48px;
}
.chapt-label{
  font-size:14px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gray);
}
.chapt-num{
  font-size:14px;
  font-weight:400;
  color:var(--blue);
  letter-spacing:.06em;
}
.chapt-line-light{border-top-color:var(--line-dark);}
.chapt-line-light .chapt-label{color:#8A96AC;}
.chapt-line-light .chapt-num{color:#5E8FE8;}

/* ---------- shared bits ---------- */
.cta-arrow{
  display:inline-block;
  margin-left:10px;
  font-style:normal;
  transition:transform .3s ease;
}
.link-arrow{
  display:inline-flex;
  align-items:center;
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--blue);
  border-bottom:1px solid transparent;
  padding-bottom:4px;
  transition:border-color .3s;
}
.link-arrow:hover{border-color:var(--blue);}
.link-arrow:hover .cta-arrow{transform:translate(3px,-3px);}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background .35s ease, box-shadow .35s ease;
}
.header-inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 40px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.header-logo img{
  height:52px;
  width:auto;
  transition:filter .35s ease, height .35s ease;
  /* white logo over the dark hero */
  filter:brightness(0) invert(1);
}
.header-nav{display:flex;gap:34px;}
.header-nav a{
  font-size:15px;
  font-weight:400;
  color:#E8ECF3;
  letter-spacing:.02em;
  position:relative;
  padding-bottom:4px;
  transition:color .3s;
}
.header-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:currentColor;
  transition:width .3s ease;
}
.header-nav a:hover::after{width:100%;}
.header-right{display:flex;align-items:center;gap:26px;}
.header-cta{
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  border-radius:100px;
  padding:11px 22px;
  transition:background .3s, color .3s, border-color .3s;
}
.header-cta:hover{background:#fff;color:var(--navy);border-color:#fff;}
.burger{
  width:34px;height:22px;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
}
.burger span{
  display:block;height:2px;width:100%;
  background:#fff;
  transition:transform .35s ease, background .35s, width .35s;
}
.burger:hover span:nth-child(2){width:70%;}

/* scrolled state — solid white bar, original logo colors */
.header.scrolled{background:#fff;box-shadow:0 1px 0 var(--line);}
.header.scrolled .header-inner{height:72px;}
.header.scrolled .header-logo img{filter:none;height:44px;}
.header.scrolled .header-nav a{color:var(--ink);}
.header.scrolled .header-cta{color:var(--blue);border-color:var(--blue);}
.header.scrolled .header-cta:hover{background:var(--blue);color:#fff;}
.header.scrolled .burger span{background:var(--ink);}

/* menu open state */
body.menu-open .header{background:transparent;box-shadow:none;}
body.menu-open .header-logo img{filter:brightness(0) invert(1);}
body.menu-open .header-nav{opacity:0;pointer-events:none;}
body.menu-open .header-cta{opacity:0;pointer-events:none;}
body.menu-open .burger span{background:#fff;}
body.menu-open .burger span:first-child{transform:translateY(4.5px) rotate(45deg);}
body.menu-open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg);}

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--navy);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility .45s;
  overflow-y:auto;
}
body.menu-open .menu-overlay{opacity:1;visibility:visible;}
body.menu-open{overflow:hidden;}
.menu-overlay-inner{
  max-width:1320px;
  margin:0 auto;
  padding:150px 40px 60px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;
}
.menu-big{display:flex;flex-direction:column;}
.menu-big a{
  font-size:clamp(30px, 4.2vw, 52px);
  font-weight:300;
  color:#fff;
  line-height:1.25;
  padding:14px 0;
  border-top:1px solid var(--line-dark);
  display:flex;
  align-items:baseline;
  gap:22px;
  transition:color .3s, padding-left .3s;
}
.menu-big a:hover{color:var(--accent);padding-left:12px;}
.menu-big em{font-style:normal;font-size:14px;color:#5E8FE8;}
.menu-side{display:flex;flex-direction:column;gap:10px;padding-top:14px;}
.menu-side-h{
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#8A96AC;margin-bottom:8px;
}
.menu-side-gap{margin-top:34px;}
.menu-side a{color:#C9D2E2;font-size:16px;transition:color .3s;}
.menu-side a:hover{color:#fff;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  color:#fff;
}
.hero-bg{position:absolute;inset:0;overflow:hidden;}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  animation:heroZoom 8s ease-out forwards;
}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(200deg, rgba(6,12,24,.42) 0%, rgba(6,12,24,.72) 62%, rgba(6,12,24,.9) 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:150px 40px 54px;
  display:flex;
  flex-direction:column;
}
.hero-top{max-width:460px;margin-left:auto;}
.hero-top .chapt-line{
  border-top-color:rgba(255,255,255,.28);
  margin-bottom:20px;
}
.hero-top .chapt-label{color:rgba(255,255,255,.75);}
.hero-top .chapt-num{color:#7FB2FF;}
.hero-top-text{
  font-size:17px;
  font-weight:300;
  color:rgba(255,255,255,.88);
  line-height:1.6;
}
.hero-h{
  margin-top:auto;
  font-size:clamp(42px, 7vw, 92px);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.015em;
  max-width:1000px;
  padding:70px 0 60px;
}
.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.28);
  padding-top:22px;
  gap:24px;
}
.hero-tag{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.hero-scroll{
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
}
.scroll-line{
  width:52px;height:1px;
  background:rgba(255,255,255,.55);
  position:relative;
  overflow:hidden;
}
.scroll-line::after{
  content:"";
  position:absolute;inset:0;
  background:#fff;
  transform:translateX(-100%);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  40%{transform:translateX(0);}
  80%,100%{transform:translateX(100%);}
}

/* ============================================================
   COMPANY
   ============================================================ */
.company-h{
  font-size:clamp(28px, 3.6vw, 50px);
  font-weight:300;
  line-height:1.2;
  letter-spacing:-.01em;
  max-width:1080px;
  margin-bottom:72px;
}
.company-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:70px;
  align-items:start;
  margin-bottom:96px;
}
.company-img{overflow:hidden;}
.company-img img{
  aspect-ratio:4/3;
  object-fit:cover;
  width:100%;
  transition:transform .8s ease;
}
.company-img:hover img{transform:scale(1.04);}
.company-text p{
  font-size:17px;
  color:#3A414C;
  line-height:1.7;
  margin-bottom:22px;
}
.company-text .link-arrow{margin-top:8px;}

/* stats */
.adv-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.adv{
  border-top:1px solid var(--line);
  padding-top:24px;
}
.adv-big{
  font-size:clamp(40px, 4.6vw, 64px);
  font-weight:300;
  color:var(--blue);
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:16px;
}
.adv-text{font-size:16px;color:#3A414C;max-width:280px;}

/* ============================================================
   SERVICES (dark)
   ============================================================ */
.section-dark{
  background:var(--navy);
  color:#fff;
}
.services{position:relative;}
.services .container{position:relative;}
.services-head{margin-bottom:80px;}
.services-h{
  font-size:clamp(28px, 3.4vw, 46px);
  font-weight:300;
  line-height:1.22;
  letter-spacing:-.01em;
  max-width:820px;
}
.serv-group{margin-bottom:64px;}
.serv-group:last-of-type{margin-bottom:0;}
.serv-group-h{
  font-size:14px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5E8FE8;
  margin-bottom:10px;
}
.serv-list{display:flex;flex-direction:column;}
.serv-item{
  display:flex;
  align-items:baseline;
  gap:28px;
  border-top:1px solid var(--line-dark);
  padding:26px 0;
  transition:padding-left .35s ease;
  position:relative;
}
.serv-item:last-child{border-bottom:1px solid var(--line-dark);}
.serv-item em{
  font-style:normal;
  font-size:14px;
  color:#8A96AC;
  min-width:28px;
  transition:color .3s;
}
.serv-item span{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:300;
  line-height:1.2;
  transition:color .3s;
}
.serv-arrow{
  font-style:normal;
  margin-left:auto;
  font-size:20px;
  opacity:0;
  transform:translate(-6px,6px);
  transition:opacity .3s, transform .3s;
  color:var(--accent);
}
.serv-item:hover{padding-left:16px;}
.serv-item:hover em{color:var(--accent);}
.serv-item:hover span{color:#7FB2FF;}
.serv-item:hover .serv-arrow{opacity:1;transform:none;}

/* floating hover image */
.serv-float{
  position:absolute;
  top:0;left:0;
  width:300px;
  aspect-ratio:4/3;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transform:scale(.94);
  transition:opacity .35s ease, transform .35s ease;
  z-index:5;
}
.serv-float img{width:100%;height:100%;object-fit:cover;}
.serv-float.show{opacity:1;transform:scale(1);}
@media (hover:none){.serv-float{display:none;}}

/* ============================================================
   VALUES ACCORDION
   ============================================================ */
.values-h{
  font-size:clamp(28px, 3.6vw, 50px);
  font-weight:300;
  letter-spacing:-.01em;
  margin-bottom:64px;
}
.acc-item{border-top:1px solid var(--line);}
.acc-item:last-child{border-bottom:1px solid var(--line);}
.acc-trigger{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:28px;
  padding:26px 0;
  text-align:left;
}
.acc-trigger em{
  font-style:normal;
  font-size:14px;
  color:var(--gray);
  min-width:28px;
  transition:color .3s;
}
.acc-trigger span{
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:300;
  transition:color .3s;
}
.acc-plus{
  margin-left:auto;
  position:relative;
  width:18px;height:18px;
  align-self:center;
  flex:none;
}
.acc-plus::before,.acc-plus::after{
  content:"";
  position:absolute;
  background:var(--blue);
  transition:transform .35s ease;
}
.acc-plus::before{left:0;top:8px;width:18px;height:2px;}
.acc-plus::after{left:8px;top:0;width:2px;height:18px;}
.acc-item.open .acc-plus::after{transform:rotate(90deg);}
.acc-trigger:hover em,
.acc-trigger:hover span{color:var(--blue);}
.acc-item.open .acc-trigger span{color:var(--blue);}
.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s ease;
}
.acc-panel p{
  font-size:18px;
  color:#3A414C;
  line-height:1.7;
  max-width:760px;
  padding:0 0 30px 56px;
}

/* ============================================================
   NEWS
   ============================================================ */
.news-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:56px;
}
.news-h{
  font-size:clamp(28px, 3.6vw, 50px);
  font-weight:300;
  letter-spacing:-.01em;
}
.news-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.news-card{display:block;}
.news-img{overflow:hidden;margin-bottom:20px;}
.news-img img{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.news-card:hover .news-img img{transform:scale(1.05);}
.news-date{
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
}
.news-card h3{
  font-size:20px;
  font-weight:400;
  line-height:1.4;
  margin-top:10px;
  transition:color .3s;
}
.news-card:hover h3{color:var(--blue);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:110px 0 44px;}
.footer-h{
  font-size:clamp(34px, 4.6vw, 64px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.015em;
  margin-bottom:80px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:80px;
  padding-bottom:90px;
}
.footer-form-note{
  font-size:16px;
  color:#8A96AC;
  margin-bottom:34px;
  max-width:420px;
}
.footer-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.f-field{margin-bottom:28px;}
.f-field input,
.f-field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line-dark);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:300;
  padding:12px 0;
  resize:none;
  transition:border-color .3s;
}
.f-field input::placeholder,
.f-field textarea::placeholder{color:#8A96AC;}
.f-field input:focus,
.f-field textarea:focus{outline:none;border-color:var(--accent);}
.f-check{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:#8A96AC;
  cursor:pointer;
  margin:6px 0 34px;
}
.f-check a{color:#C9D2E2;text-decoration:underline;}
.f-check input{position:absolute;opacity:0;pointer-events:none;}
.f-box{
  width:18px;height:18px;
  flex:none;
  border:1px solid var(--line-dark);
  position:relative;
  transition:background .25s, border-color .25s;
}
.f-check input:checked + .f-box{background:var(--accent);border-color:var(--accent);}
.f-check input:checked + .f-box::after{
  content:"";
  position:absolute;
  left:5px;top:1px;
  width:5px;height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.f-submit{
  font-size:14px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  border:1px solid rgba(255,255,255,.45);
  border-radius:100px;
  padding:16px 34px;
  transition:background .3s, color .3s, border-color .3s;
}
.f-submit:hover{background:var(--accent);border-color:var(--accent);}
.f-submit:hover .cta-arrow{transform:translate(3px,-3px);}

.footer-info{
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:48px;
  align-content:start;
}
.footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-col-h{
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8A96AC;
  margin-bottom:8px;
}
.footer-col a{color:#C9D2E2;font-size:15px;transition:color .3s;}
.footer-col a:hover{color:#fff;}
.footer-addr{color:#C9D2E2;font-size:15px;line-height:1.6;}

.footer-bottom{
  border-top:1px solid var(--line-dark);
  padding-top:30px;
  display:flex;
  align-items:center;
  gap:32px;
}
.footer-logo{
  height:44px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.9;
}
.footer-bottom p{
  font-size:14px;
  color:#8A96AC;
  margin-left:auto;
}
.footer-bottom > a{
  font-size:14px;
  color:#8A96AC;
  transition:color .3s;
}
.footer-bottom > a:hover{color:#fff;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .container{padding:0 28px;}
  .header-inner{padding:0 28px;}
  .hero-inner{padding:130px 28px 44px;}
  .header-nav{display:none;}
  .company-grid{grid-template-columns:1fr;gap:44px;}
  .footer-grid{grid-template-columns:1fr;gap:64px;}
  .menu-overlay-inner{grid-template-columns:1fr;padding:130px 28px 60px;}
  .serv-float{display:none;}
}
@media (max-width: 680px){
  .section{padding:72px 0;}
  .container{padding:0 20px;}
  .header-inner{padding:0 20px;height:72px;}
  .header-logo img{height:42px;}
  .header.scrolled .header-logo img{height:38px;}
  .header-cta{display:none;}
  .hero-inner{padding:110px 20px 36px;}
  .hero-top{max-width:100%;margin-left:0;}
  .hero-h{padding:56px 0 44px;}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:18px;}
  .adv-grid{grid-template-columns:1fr;gap:28px;}
  .news-grid{grid-template-columns:1fr;gap:44px;}
  .news-head{flex-direction:column;align-items:flex-start;gap:20px;}
  .footer-form-row{grid-template-columns:1fr;gap:0;}
  .footer-info{grid-template-columns:1fr;gap:40px;}
  .footer-bottom{flex-wrap:wrap;gap:16px;}
  .footer-bottom p{margin-left:0;width:100%;order:3;}
  .acc-panel p{padding-left:0;}
  .serv-item{gap:16px;}
  .acc-trigger{gap:16px;}
}