/* Concept D — "Faithful": the live blueridgelaw.com look, re-created cleanly.
   Tokens and measurements mined from the live Webflow CSS (reference/live-site/site.css). */
:root {
  --brl-dark-blue: #242b48;   /* page ground + primary buttons (live --brl-dark-blue) */
  --navy-800: #13273a;        /* header strip */
  --slate-blue: #214f7a;      /* secondary button / cta ground */
  --neutral-700: #617281;
  --brl-grey: #8f9491;
  --white: #fff;
  --bg-200: #f9fafc;          /* hero box */
  --bg-300: #d5e0eb;          /* dividers, back link */
  --line: #c1d1df;
  --body: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --display: "Playfair Display", Georgia, serif;
  --marcellus: Marcellus, "Trajan Pro", Georgia, serif;
  --shadow: 0 1px 2px #00000003, 0 2px 4px #00000003, 0 4px 8px #00000003, 0 7px 15px #00000003, 0 14px 29px #00000003, 0 33px 69px #00000005;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--brl-dark-blue); color: var(--white); font-family: var(--body); font-size: 18px; line-height: 1.667em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #c1d1df; outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--brl-dark-blue); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
h1, h2, h3 { margin: 20px 0 10px; font-weight: 700; }
h2 { font-family: var(--display); font-size: 42px; line-height: 1.31em; }
h3 { color: var(--neutral-700); font-size: 26px; line-height: 1.308em; }
p { margin: 0 0 10px; }
.container-default { max-width: 1324px; margin: 0 auto; padding: 0 24px; }
.container-small-557px { max-width: 557px; margin: 0 auto; padding: 0 24px; }
.section { padding: 144px 0; }

/* Buttons (live: uppercase, .06em tracking, 24px/44px) */
.button-primary, .button-secondary { display: inline-block; font-family: var(--marcellus); text-align: center; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 24px 44px; line-height: 1.111em; font-size: 16px; transition: transform .35s, background-color .35s, color .3s; }
.button-primary { background: var(--brl-dark-blue); color: var(--white); border: 1px solid var(--brl-dark-blue); }
.button-primary:hover { background: var(--slate-blue); border-color: var(--slate-blue); transform: translateY(-2px); }
.button-secondary { color: var(--slate-blue); background: transparent; border: 1px solid var(--slate-blue); }
.button-secondary:hover { background: var(--slate-blue); color: var(--white); transform: translateY(-2px); }
.buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.buttons.centered { justify-content: center; }

/* Header */
.header { background: var(--navy-800); border-bottom: 1px solid var(--neutral-700); position: relative; z-index: 5; }
.container-header { max-width: 1324px; margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { margin-right: 29px; }
.header-logo { height: 70px; width: auto; }
.nav-menu { padding-left: 30px; flex: 1; }
.header-navigation { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-item-wrapper { margin-right: 20px; }
.nav-item-wrapper.mobile { display: none; }
.nav-link { color: var(--white); white-space: nowrap; font-family: var(--marcellus); font-size: 18px; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .35s; }
.nav-link:hover, .nav-link.is-current { border-bottom-color: var(--white); }
.header-right { display: flex; align-items: center; }
.header-icon { color: var(--white); border: 1px solid var(--line); border-radius: 1000px; width: 48px; min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: border-color .35s; }
.header-icon:hover { border-color: var(--white); }
.header-icon svg { width: 22px; height: 22px; fill: currentColor; }
.button-primary.header-button { border: 1px solid var(--white); margin-left: 20px; padding: 24px; }
.menu-button { display: none; border: 1px solid var(--white); background: var(--brl-dark-blue); color: #fff; border-radius: 1000px; width: 55px; min-width: 55px; height: 55px; margin-left: 15px; padding: 0; cursor: pointer; position: relative; }
.menu-line { position: absolute; left: 15px; right: 15px; height: 2px; background: #fff; transition: transform .25s, opacity .25s; }
.menu-line:nth-child(1) { top: 18px; } .menu-line:nth-child(2) { top: 26px; } .menu-line:nth-child(3) { top: 34px; }
.menu-button[aria-expanded="true"] .menu-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-line:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Hero: photo right, pale box overlapping from the left (live .home-hero-wrapper) */
.section.home-hero { padding-top: 80px; overflow: hidden; }
.home-hero-wrapper { display: flex; justify-content: flex-end; align-items: center; position: relative; }
.home-hero-box { position: absolute; left: 0; z-index: 1; background: var(--bg-200); color: var(--brl-dark-blue); max-width: 799px; padding: 89px 131px 77px 24px; }
.title.home-hero { color: var(--brl-dark-blue); font-family: var(--marcellus); font-size: 60px; font-weight: 400; line-height: 1.167em; margin: 0 0 10px; }
.paragraph-large { font-size: 22px; line-height: 1.545em; }
.paragraph-large.home-hero { margin-bottom: 30px; max-width: 620px; }
.image-wrapper.home-hero { border: 1px solid var(--white); width: 925px; max-width: 100%; aspect-ratio: 925 / 520; overflow: hidden; }
.image.home-hero { width: 100%; height: 100%; object-fit: cover; }

/* About: photo left, white box overlapping from the right */
.section.home-about-us { padding-top: 0; overflow: hidden; }
.home-about-us-wrapper { display: flex; justify-content: space-between; align-items: center; position: relative; }
.image-wrapper.home-about-us { width: 700px; max-width: 100%; aspect-ratio: 700 / 620; overflow: hidden; }
.image.home-about-us { width: 100%; height: 100%; object-fit: cover; }
.home-about-us-box { position: absolute; right: 0; background: var(--white); color: var(--brl-dark-blue); text-align: center; max-width: 60%; padding: 90px 56px 70px 58px; }
.home-about-us-box h2 { margin-top: 0; }
.paragraph.home-about-us { margin-bottom: 18px; }
.home-about-us-box .buttons { margin-top: 30px; }

/* Practice areas: centred Marcellus heading, 2-col white cards */
.section.home-practice-areas { padding-top: 0; }
.heading { color: var(--white); font-family: var(--marcellus); font-size: 42px; font-weight: 400; line-height: 1.31em; text-align: center; margin: 0 0 40px; }
.collection-list-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: var(--white); box-shadow: var(--shadow); }
.card.practice-area-card { color: var(--neutral-700); width: 100%; height: 100%; padding: 54px 48px 56px 40px; text-decoration: none; display: flex; align-items: flex-start; transition: transform .3s, box-shadow .3s; }
.card.practice-area-card:hover { transform: translateY(-4px); }
.image-wrapper.practice-area-card-icon-wrapper { border: 1px solid var(--brl-dark-blue); border-radius: 1000px; width: 88px; min-width: 88px; height: 88px; margin-right: 19px; padding: 15px; display: flex; align-items: center; justify-content: center; color: var(--brl-dark-blue); }
.glyph { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.heading-4 { color: var(--brl-dark-blue); margin-top: 0; }
.paragraph-3 { color: var(--brl-dark-blue); margin: 0; }

/* About story + team (from the live About page) */
.section.story { padding-top: 0; }
.title.about-story { max-width: 376px; }
.paragraph.story { max-width: 874px; }
.section.about-team { padding-top: 0; }
.title.about-team { margin-bottom: 30px; }
.team-grid { display: grid; grid-template-columns: 1fr; }
.team-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
.team-row:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.title.about-card-team { color: var(--white); font-size: 22px; font-weight: 400; font-family: var(--marcellus); margin: 0; }
.about-card-team-rol { color: var(--white); font-size: 18px; line-height: 1.5em; }
.team-contact-link { margin: 0; }
.contact-link { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.contact-link:hover { border-bottom-color: #fff; }

/* CTA band (live: railroad photo, white box) */
.section.cta { background: var(--slate-blue) url(/assets/img/train-fall.jpg) center / cover no-repeat; padding: 71px 0; overflow: hidden; }
.cta-box { color: var(--brl-dark-blue); background: var(--white); max-width: 558px; padding: 48px 51px 51px 80px; }
.cta-box h2 { margin-top: 0; }
.paragraph.cta { margin-bottom: 26px; }

/* Footer (live .footer.mod: white wash over the vista photo) */
.footer { color: var(--brl-dark-blue); background-image: linear-gradient(#fffc, #fffc), url(/assets/img/blue-ridge-vista.jpg); background-position: 0 0, 50%; background-repeat: repeat, no-repeat; background-size: auto, cover; padding: 80px 0 32px; }
.grid { display: grid; grid-template-columns: 1.5fr .75fr 1.25fr; gap: 40px; }
.footer-logo-container { margin-right: 40px; display: block; }
.footer-logo { height: 200px; width: auto; }
.title.footer-title { margin: 0 0 23px; font-family: var(--marcellus); font-size: 22px; font-weight: 400; line-height: 1em; }
.title.footer-title.mt { margin-top: 36px; }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav-item { margin-bottom: 10px; }
.footer-nav-link { color: var(--brl-dark-blue); font-family: var(--marcellus); font-size: 18px; text-decoration: none; border-bottom: 1px solid transparent; }
.footer-nav-link:hover { border-bottom-color: var(--brl-dark-blue); }
.footer-social-media-grid { display: grid; grid-template-columns: repeat(auto-fit, 38px); grid-auto-columns: 38px; gap: 12px; justify-content: start; }
.footer-social-media-link { color: #70869a; border: 1px solid var(--line); border-radius: 1000px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; transition: border-color .35s, color .35s; }
.footer-social-media-link:hover { color: var(--brl-dark-blue); border-color: var(--brl-dark-blue); }
.footer-social-media-link svg { width: 20px; height: 20px; fill: currentColor; }
.rtb p { margin-bottom: 14px; }
.rtb a { color: var(--brl-dark-blue); }
.copyright { text-align: center; margin-top: 67px; }
.small-print { font-size: 16px; line-height: 1.875em; margin-bottom: 15px; }
.small-print.preview { color: var(--neutral-700); font-size: 14px; }

/* Practice-area inner page (live .section.blog-post) */
.section.blog-post { padding: 51px 0 159px; }
.back-link-wrapper { margin-bottom: 32px; display: flex; }
.back-link { color: var(--bg-300); font-family: var(--marcellus); letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1.25em; }
.back-link:hover { color: var(--white); }
.back-link svg { width: 28px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.blog-post-wrapper { display: flex; flex-direction: column; align-items: center; }
.image-wrapper.blog-post-main-image { border: 1px solid var(--white); width: 100%; aspect-ratio: 1324 / 650; overflow: hidden; }
.image.blog-post-main-image { width: 100%; height: 100%; object-fit: cover; }
.blog-post-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 992px; margin: -250px 60px 0; }
.card.blog-post-top-content { color: var(--brl-dark-blue); margin-bottom: 90px; padding: 49px 51px 5px 64px; width: 100%; }
.title.blog-post { max-width: 771px; margin: 0 0 20px; font-family: var(--display); font-size: 42px; line-height: 1.31em; }
.divider { background: var(--line); width: 100%; height: 1px; }
.divider.card-blog-post-top-content { background: var(--bg-300); margin: 44px 0 32px; }
.card.blog-post-top-content .paragraph-large { margin-bottom: 40px; }
.rich-text { max-width: 874px; width: 100%; }
.rich-text h2 { margin-top: 0; }
.rich-text ul { padding-left: 34px; margin: 0 0 20px; }
.rich-text li { margin-bottom: 6px; }
.rich-text figure { margin: 30px 0; }
.rich-text figure img { margin: 0 auto; }
.rich-text figure .w-richtext-align-center { text-align: center; }
.siblings { max-width: 874px; width: 100%; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.18); }
.siblings-title { font-family: var(--marcellus); font-size: 22px; font-weight: 400; margin: 0 0 14px; }
.siblings ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.siblings a { color: var(--white); font-family: var(--marcellus); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.siblings a:hover { border-bottom-color: #fff; }

/* Responsive (breakpoints mirror the live 991 / 767 / 479) */
@media (max-width: 991px) {
  .section { padding: 115px 0; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--brl-dark-blue); padding: 20px 0 40px; box-shadow: var(--shadow); }
  .nav-menu.is-open { display: block; }
  .header-navigation { flex-direction: column; align-items: stretch; margin: 0 24px; }
  .nav-item-wrapper { margin: 0 0 25px; }
  .nav-item-wrapper.mobile { display: block; }
  .nav-link { font-size: 24px; }
  .button-primary.header-button:not(.mobile) { display: none; }
  .button-primary.header-button.mobile { display: inline-block; margin-left: 0; }
  .menu-button { display: block; }
  .home-hero-wrapper { flex-direction: column; align-items: stretch; }
  .home-hero-box { position: static; max-width: none; margin-right: 100px; padding: 71px 40px 62px 24px; }
  .image-wrapper.home-hero { align-self: flex-end; width: 90%; margin-top: -40px; }
  .home-about-us-wrapper { flex-direction: column-reverse; align-items: stretch; }
  .image-wrapper.home-about-us { width: 100%; }
  .home-about-us-box { position: static; max-width: 100%; text-align: left; padding: 58px 40px 45px; }
  .home-about-us-box .buttons { justify-content: flex-start; }
  .grid { grid-template-columns: 1.5fr .75fr 1.25fr; }
  .team-row { grid-template-columns: 1fr 1.5fr 1fr; }
  .blog-post-content { margin: -155px 20px 0; }
  .card.blog-post-top-content { margin-bottom: 72px; padding: 40px 41px 5px; }
  .title.blog-post { font-size: 34px; }
}
@media (max-width: 767px) {
  .section { padding: 92px 0; }
  .section.cta { padding: 50px 0; }
  .section.home-hero { padding-top: 20px; }
  .paragraph-large { font-size: 20px; }
  .cta-box { padding: 40px 40px 40px 51px; }
  .card.practice-area-card { flex-direction: column; align-items: flex-start; padding: 50px 40px; }
  .image-wrapper.practice-area-card-icon-wrapper { margin: 0 0 25px; }
  .home-hero-box { margin-right: 0; padding: 51px 24px 50px; }
  .image-wrapper.home-hero { width: 100%; margin-top: 0; }
  .grid { grid-template-columns: 1fr; text-align: center; }
  .footer-logo-container { margin: 0 auto 15px; max-width: 320px; }
  .footer-social-media-grid { justify-content: center; }
  .team-row { grid-template-columns: 1fr; gap: 4px; }
  .footer-logo { height: auto; width: 100%; }
}
@media (max-width: 479px) {
  .container-default, .container-small-557px { padding: 0 16px; }
  .container-header { padding: 20px 16px; }
  .header-logo { height: 52px; }
  .header-icon { width: 46px; min-width: 46px; height: 46px; }
  .menu-button { width: 46px; min-width: 46px; height: 46px; margin-left: 10px; }
  .section { padding: 80px 0; }
  .section.home-hero { padding-bottom: 82px; }
  .title.home-hero { font-size: 42px; }
  .paragraph-large { font-size: 18px; }
  .buttons { flex-direction: column; align-items: stretch; gap: 16px; }
  .button-primary, .button-secondary { display: block; letter-spacing: .04em; padding: 20px 35px; }
  .home-hero-box { padding: 41px 16px 40px; }
  .home-about-us-box { padding: 50px 20px; }
  .card.practice-area-card { padding: 40px 20px; }
  .collection-list-3 { grid-template-columns: 1fr; }
  .cta-box { padding: 35px 20px; }
  h2 { font-size: 32px; }
  .heading { font-size: 34px; }
  .title.blog-post { font-size: 27px; }
  .card.blog-post-top-content { padding: 30px 20px 5px; margin-bottom: 46px; }
  .blog-post-content { margin: 0; }
  .section.blog-post { padding: 26px 0 82px; }
  .footer { padding-top: 56px; }
  .footer-logo-container { max-width: 240px; }
}
