/* =====================================================
  LEGAL — LAW FIRM
===================================================== */

:root {
 --black: #191815;
 --black-soft: #24211d;
 --espresso: #302820;

 --cream: #f7f3ed;
 --cream-light: #fcfaf6;
 --stone: #e9e0d5;

 --gold: #a9875d;
 --gold-light: #c6a77e;
 --gold-dark: #80633f;

 --text: #59534d;
 --muted: #8c8378;
 --white: #ffffff;

 --line-dark: rgba(255,255,255,0.14);
 --line-light: rgba(74,61,49,0.14);

 --shadow:
   0 32px 80px rgba(32,26,21,0.13);
}


/* =====================================================
  RESET
===================================================== */

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

html {
 scroll-behavior: smooth;
}

body {
 font-family: "Inter", sans-serif;
 background: var(--cream);
 color: var(--text);
 overflow-x: hidden;
}

img {
 width: 100%;
 display: block;
 object-fit: cover;
}

a {
 color: inherit;
 text-decoration: none;
}

h1,
h2,
h3 {
 font-family: "Cormorant Garamond", serif;
 font-weight: 500;
}


/* =====================================================
  HEADER
===================================================== */

.header {
 height: 90px;

 position: absolute;
 top: 0;
 left: 0;
 right: 0;

 z-index: 100;

 padding: 0 6%;

 display: flex;
 align-items: center;
 justify-content: space-between;

 color: white;

 border-bottom: 1px solid var(--line-dark);

 background:
   linear-gradient(
     90deg,
     rgba(20,19,17,0.96) 0%,
     rgba(20,19,17,0.88) 58%,
     rgba(20,19,17,0.15) 100%
   );
}


.logo,
.footer-logo {
 display: flex;
 flex-direction: column;
 align-items: center;
}


.logo strong,
.footer-logo strong {
 font-family: "Cormorant Garamond", serif;

 font-size: 31px;
 font-weight: 500;

 letter-spacing: 0.16em;

 line-height: 0.9;
}


.logo span,
.footer-logo span {
 margin-top: 8px;

 font-size: 7px;

 letter-spacing: 0.45em;
}


.desktop-nav {
 display: flex;

 align-items: center;

 gap: 34px;
}


.desktop-nav a {
 font-size: 10px;
 font-weight: 400;

 letter-spacing: 0.03em;
}


.desktop-nav a:hover {
 color: var(--gold-light);
}


.header-btn,
.primary-btn {
 min-height: 49px;

 padding: 0 29px;

 display: inline-flex;
 align-items: center;
 justify-content: center;

 gap: 17px;

 background: var(--gold);
 color: white;

 border: 1px solid var(--gold);

 font-size: 9px;
 font-weight: 600;

 letter-spacing: 0.14em;

 transition: 0.3s ease;
}


.header-btn:hover,
.primary-btn:hover {
 background: var(--gold-dark);

 border-color: var(--gold-dark);

 transform: translateY(-2px);
}


.menu-toggle {
 display: none;

 width: 42px;
 height: 42px;

 border: 0;

 background: transparent;
}


.menu-toggle span {
 width: 24px;
 height: 1px;

 display: block;

 margin: 6px auto;

 background: white;
}


.mobile-menu {
 display: none;
}


/* =====================================================
  GENERAL
===================================================== */

.eyebrow,
.section-label {
 margin-bottom: 20px;

 color: var(--gold);

 font-size: 9px;
 font-weight: 600;

 letter-spacing: 0.36em;
}


h1 em,
h2 em {
 font-style: italic;
 font-weight: 400;

 color: var(--gold-light);
}


.text-btn {
 display: inline-flex;

 align-items: center;

 gap: 12px;

 color: var(--gold-light);

 padding-bottom: 5px;

 border-bottom: 1px solid var(--gold);

 font-size: 9px;

 letter-spacing: 0.13em;
}


/* =====================================================
  HERO
===================================================== */

.hero {
 min-height: 780px;

 display: grid;

 grid-template-columns: 54% 46%;

 background: var(--black);
}


.hero-copy {
 padding: 170px 9% 60px 12%;

 display: flex;

 flex-direction: column;

 justify-content: center;

 color: rgba(255,255,255,0.79);
}


.hero h1 {
 max-width: 700px;

 color: white;

 font-size: clamp(68px, 6vw, 102px);

 line-height: 0.84;

 letter-spacing: -0.035em;
}


.hero-text {
 max-width: 560px;

 margin-top: 34px;

 font-size: 14px;

 line-height: 1.8;
}


.hero-actions {
 margin-top: 38px;

 display: flex;

 align-items: center;

 gap: 35px;
}


.hero-values {
 margin-top: 70px;

 display: grid;

 grid-template-columns: repeat(4, 1fr);

 border-top: 1px solid var(--line-dark);
}


.hero-values > div {
 min-height: 115px;

 padding: 27px 13px 5px;

 display: flex;

 flex-direction: column;

 align-items: flex-start;

 gap: 12px;

 border-right: 1px solid var(--line-dark);
}


.hero-values > div:last-child {
 border-right: 0;
}


.hero-values svg {
 width: 29px;
 height: 29px;

 fill: none;

 stroke: var(--gold-light);

 stroke-width: 1.2;
}


.hero-values span {
 color: #e5ddd4;

 font-size: 8px;

 text-transform: uppercase;

 letter-spacing: 0.11em;

 line-height: 1.6;
}


.hero-image {
 position: relative;

 min-height: 780px;

 overflow: hidden;
}


.hero-image img {
 height: 100%;
}


.hero-image::after {
 content: "";

 position: absolute;

 inset: 0;

 background:
   linear-gradient(
     90deg,
     rgba(25,24,21,0.6),
     transparent 50%
   );
}


.hero-statement {
 position: absolute;

 right: 8%;
 top: 32%;

 z-index: 2;

 color: rgba(255,255,255,0.83);

 font-family: "Cormorant Garamond", serif;

 font-size: 30px;

 line-height: 1.5;

 letter-spacing: 0.13em;
}


/* =====================================================
  PRACTICE
===================================================== */

.practice {
 padding: 130px 5%;

 background: var(--cream-light);
}


.practice-heading {
 max-width: 1540px;

 margin: 0 auto 60px;

 display: grid;

 grid-template-columns: 1.2fr 0.65fr;

 gap: 90px;

 align-items: end;
}


.practice-heading h2 {
 max-width: 750px;

 color: var(--black);

 font-size: clamp(53px, 5vw, 78px);

 line-height: 0.92;
}


.practice-heading h2 em {
 color: var(--gold-dark);
}


.practice-intro {
 max-width: 500px;

 padding-bottom: 10px;

 font-size: 13px;

 line-height: 1.8;
}


.practice-grid {
 max-width: 1540px;

 margin: auto;

 display: grid;

 grid-template-columns: repeat(5, 1fr);

 gap: 22px;
}


.card-image {
 height: 250px;

 position: relative;

 overflow: hidden;
}


.card-image img {
 height: 100%;

 filter: saturate(0.75);

 transition: 0.5s ease;
}


.practice-card:hover img {
 transform: scale(1.04);

 filter: saturate(1);
}


.card-image > span {
 position: absolute;

 top: 15px;
 left: 15px;

 color: white;

 font-family: "Cormorant Garamond", serif;

 font-size: 43px;
}


.practice-card h3 {
 margin-top: 19px;

 color: var(--black);

 font-family: "Inter", sans-serif;

 font-size: 14px;

 text-transform: uppercase;

 letter-spacing: 0.04em;
}


.practice-card p {
 min-height: 65px;

 margin-top: 8px;

 font-size: 11px;

 line-height: 1.6;
}


.practice-card a {
 display: inline-block;

 margin-top: 17px;

 color: var(--gold-dark);

 font-size: 8px;
 font-weight: 600;

 letter-spacing: 0.12em;
}


/* =====================================================
  ABOUT
===================================================== */

.about {
 min-height: 690px;

 display: grid;

 grid-template-columns: 42% 38% 20%;

 background: var(--black-soft);

 color: rgba(255,255,255,0.73);
}


.about-image img {
 height: 690px;
}


.about-copy {
 padding: 90px 65px;

 display: flex;

 flex-direction: column;

 justify-content: center;
}


.about-copy h2 {
 color: white;

 font-size: 66px;

 line-height: 0.91;
}


.about-copy > p:not(.section-label) {
 max-width: 540px;

 margin: 30px 0 35px;

 font-size: 13px;

 line-height: 1.8;
}


.about-copy .primary-btn {
 align-self: flex-start;
}


.numbers {
 padding: 90px 50px;

 display: flex;

 flex-direction: column;

 justify-content: center;
}


.numbers > div {
 padding: 30px 0;

 border-bottom: 1px solid rgba(198,167,126,0.45);
}


.numbers strong {
 display: block;

 color: white;

 font-family: "Cormorant Garamond", serif;

 font-size: 54px;

 font-weight: 400;
}


.numbers span {
 color: var(--gold-light);

 font-size: 8px;

 letter-spacing: 0.16em;

 text-transform: uppercase;
}


/* =====================================================
  PHILOSOPHY
===================================================== */

.philosophy {
 min-height: 580px;

 display: grid;

 grid-template-columns: 1fr 1fr 1fr;

 background: var(--cream-light);
}


.quote {
 padding: 80px;

 display: flex;

 flex-direction: column;

 justify-content: center;
}


.quote p {
 color: var(--black);

 font-family: "Cormorant Garamond", serif;

 font-size: 46px;

 line-height: 0.98;
}


.quote p em {
 color: var(--gold-dark);
}


.quote-line {
 width: 60px;
 height: 1px;

 margin: 34px 0;

 background: var(--gold);
}


.quote strong {
 color: var(--black);

 font-size: 9px;

 letter-spacing: 0.18em;
}


.quote > span {
 margin-top: 7px;

 font-size: 11px;

 color: var(--muted);
}


.philosophy-image img {
 height: 580px;

 filter: saturate(0.55);
}


.philosophy-text {
 padding: 80px;

 display: flex;

 flex-direction: column;

 justify-content: center;
}


.philosophy-text h2 {
 color: var(--black);

 font-size: 58px;

 line-height: 0.93;
}


.philosophy-text > p:not(.section-label) {
 margin-top: 30px;

 max-width: 480px;

 line-height: 1.8;
}


/* =====================================================
  EDITORIAL
===================================================== */

.editorial {
 min-height: 500px;

 display: grid;

 grid-template-columns: 1fr 0.7fr 1fr;

 background: var(--espresso);
}


.editorial-image img {
 height: 500px;
}


.editorial-message {
 display: flex;

 flex-direction: column;

 justify-content: center;

 align-items: center;

 text-align: center;

 color: white;
}


.editorial-message > span {
 margin-bottom: 25px;

 color: var(--gold-light);

 font-size: 9px;

 letter-spacing: 0.4em;
}


.editorial-message h2 {
 color: white;

 font-size: 55px;

 line-height: 0.92;
}


/* =====================================================
  VALUES
===================================================== */

.values {
 padding: 110px 7%;

 display: grid;

 grid-template-columns: repeat(4, 1fr);

 background: #fffdf9;
}


.value-card {
 min-height: 260px;

 padding: 20px 38px;

 border-right: 1px solid var(--line-light);
}


.value-card:last-child {
 border-right: 0;
}


.value-card > span {
 color: var(--gold);

 font-family: "Cormorant Garamond", serif;

 font-size: 36px;
}


.value-card h3 {
 margin: 25px 0 15px;

 color: var(--black);

 font-size: 28px;

 line-height: 1;
}


.value-card p {
 font-size: 12px;

 line-height: 1.75;
}


/* =====================================================
  CONTACT
===================================================== */

.contact {
 min-height: 590px;

 display: grid;

 grid-template-columns: 1.1fr 0.9fr;

 background: var(--stone);
}


.contact-image img {
 height: 590px;
}


.contact-copy {
 padding: 80px;

 display: flex;

 flex-direction: column;

 justify-content: center;
}


.contact-copy h2 {
 color: var(--black);

 font-size: 69px;

 line-height: 0.9;
}


.contact-lead {
 max-width: 500px;

 margin-top: 25px;

 font-size: 13px;

 line-height: 1.7;
}


.contact-details {
 margin: 35px 0;

 display: grid;

 gap: 14px;
}


.contact-details p {
 font-size: 12px;

 line-height: 1.6;
}


.contact-details strong {
 min-width: 95px;

 display: inline-block;

 color: var(--black);

 font-size: 8px;

 letter-spacing: 0.14em;

 text-transform: uppercase;
}


.contact-copy .primary-btn {
 align-self: flex-start;
}


/* =====================================================
  FOOTER
===================================================== */

.footer {
 padding: 55px 6% 27px;

 background: var(--black);

 color: rgba(255,255,255,0.64);
}


.footer-logo strong {
 color: white;
}


.footer-top {
 padding-bottom: 37px;

 display: flex;

 align-items: center;

 justify-content: space-between;

 border-bottom: 1px solid var(--line-dark);
}


.footer-top nav,
.socials {
 display: flex;

 gap: 28px;
}


.footer-top nav a,
.socials a {
 font-size: 10px;
}


.footer-top nav a:hover,
.socials a:hover {
 color: var(--gold-light);
}


.socials a {
 color: white;

 font-weight: 600;
}


.footer-bottom {
 padding-top: 25px;

 display: flex;

 justify-content: space-between;

 font-size: 9px;
}


.footer-bottom div {
 display: flex;

 gap: 25px;
}


/* =====================================================
  RESPONSIVE
===================================================== */

@media (max-width: 1150px) {

 .header {
   position: absolute;
 }

 .desktop-nav,
 .header-btn {
   display: none;
 }

 .menu-toggle {
   display: block;
 }


 .mobile-menu {
   position: fixed;

   top: 90px;
   left: 0;
   right: 0;

   z-index: 999;

   padding: 32px 6%;

   display: flex;

   flex-direction: column;

   gap: 18px;

   background: var(--black);

   color: white;

   transform: translateY(-150%);

   opacity: 0;

   transition: 0.35s ease;
 }


 .mobile-menu.open {
   transform: translateY(0);

   opacity: 1;
 }


 .mobile-menu a {
   padding-bottom: 15px;

   border-bottom: 1px solid var(--line-dark);

   font-family: "Cormorant Garamond", serif;

   font-size: 25px;
 }


 .hero {
   grid-template-columns: 1fr;
 }


 .hero-image {
   min-height: 620px;
 }


 .practice-grid {
   grid-template-columns: repeat(3, 1fr);
 }


 .about {
   grid-template-columns: 1fr 1fr;
 }


 .numbers {
   grid-column: 1 / -1;

   flex-direction: row;

   justify-content: space-around;

   padding: 50px;
 }


 .numbers > div {
   border-bottom: 0;

   border-right: 1px solid rgba(198,167,126,0.35);

   padding: 10px 45px;
 }


 .numbers > div:last-child {
   border-right: 0;
 }


 .philosophy {
   grid-template-columns: 1fr 1fr;
 }


 .philosophy-text {
   grid-column: 1 / -1;
 }


 .values {
   grid-template-columns: repeat(2, 1fr);
 }

}


@media (max-width: 720px) {

 .header {
   height: 76px;

   padding: 0 22px;
 }


 .mobile-menu {
   top: 76px;
 }


 .logo strong {
   font-size: 26px;
 }


 .hero-copy {
   padding: 145px 25px 55px;
 }


 .hero h1 {
   font-size: 61px;
 }


 .hero-actions {
   flex-direction: column;

   align-items: flex-start;
 }


 .hero-values {
   grid-template-columns: 1fr 1fr;
 }


 .hero-values > div {
   border-bottom: 1px solid var(--line-dark);
 }


 .hero-image {
   min-height: 520px;
 }


 .practice {
   padding: 90px 25px;
 }


 .practice-heading {
   grid-template-columns: 1fr;

   gap: 30px;
 }


 .practice-grid {
   grid-template-columns: 1fr;
 }


 .card-image {
   height: 390px;
 }


 .practice-card p {
   min-height: auto;
 }


 .about {
   grid-template-columns: 1fr;
 }


 .about-image img {
   height: 500px;
 }


 .about-copy {
   padding: 70px 25px;
 }


 .about-copy h2 {
   font-size: 53px;
 }


 .numbers {
   grid-column: auto;

   flex-direction: column;

   padding: 50px 25px;
 }


 .numbers > div {
   border-right: 0;

   border-bottom: 1px solid rgba(198,167,126,0.35);

   padding: 25px 0;
 }


 .philosophy {
   grid-template-columns: 1fr;
 }


 .quote,
 .philosophy-text {
   padding: 70px 25px;
 }


 .philosophy-image img {
   height: 480px;
 }


 .editorial {
   grid-template-columns: 1fr;
 }


 .editorial-image img {
   height: 400px;
 }


 .editorial-message {
   min-height: 350px;
 }


 .values {
   grid-template-columns: 1fr;

   padding: 70px 25px;
 }


 .value-card {
   padding: 35px 0;

   border-right: 0;

   border-bottom: 1px solid var(--line-light);
 }


 .contact {
   grid-template-columns: 1fr;
 }


 .contact-image img {
   height: 460px;
 }


 .contact-copy {
   padding: 70px 25px;
 }


 .contact-copy h2 {
   font-size: 53px;
 }


 .footer-top,
 .footer-bottom {
   align-items: flex-start;

   flex-direction: column;

   gap: 30px;
 }


 .footer-top nav,
 .footer-bottom div {
   flex-wrap: wrap;
 }

}


@media (max-width: 450px) {

 .hero h1 {
   font-size: 53px;
 }

 .hero-values {
   grid-template-columns: 1fr;
 }

 .practice-heading h2,
 .quote p,
 .philosophy-text h2 {
   font-size: 45px;
 }

}