/* Maren & Hale sample site — one stylesheet. Navy + gold, serif headings. */
:root { --navy: #0F2A44; --navy-2: #173A5C; --gold: #C9A24A; --gold-2: #B38B33; --gold-t: #8A6A1F; --cream: #F7F3EA; --line: #E6DFCF; --ink: #16202C; --muted: #55606E; --white: #fff; --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.65 var(--sans); color: var(--ink); background: #fff; padding-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(32px, 4.6vw, 52px); } h2 { font-size: clamp(24px, 3vw, 34px); } h3 { font-size: 20px; }
p { margin: 0 0 1em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-t); margin: 0 0 12px; }
.lead { font-size: 18px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px; font: 700 15px var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16.5px; }
.btn-gold { background: var(--gold); color: var(--navy); } .btn-gold:hover { background: #D8B25A; }
.btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-2); }
.btn-line { border-color: var(--navy); color: var(--navy); background: transparent; } .btn-line:hover { background: var(--navy); color: #fff; }
.btn-line-w { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; } .btn-line-w:hover { background: #fff; color: var(--navy); }
.btn-block { width: 100%; }

/* demo notice */
.demo-bar { background: #FFF6DE; color: #5C4A12; font-size: 13px; text-align: center; padding: 7px 16px; border-bottom: 1px solid #F0DFA8; }
.demo-bar a { color: #5C4A12; font-weight: 700; }

/* header */
.hd { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.hd-in { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); margin-right: auto; }
.mono { display: flex; align-items: center; justify-content: center; white-space: nowrap; flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--navy); color: var(--gold); font: 700 15px var(--serif); letter-spacing: -.02em; }
.mono i { font-style: normal; color: #fff; margin: 0 1px; }
.brand b { display: block; font: 700 21px/1.1 var(--serif); } .brand small { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav-d ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-d a, .menu a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); } .nav-d a:hover { color: var(--gold-t); }
.nav-d .lang a, .menu .lang a { color: var(--gold-t); }
.menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.hd-call { min-height: 46px; }

/* breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 14px 0; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: #A7A08F; }
.crumbs a { color: var(--muted); }

/* hero */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,28,46,.94) 0%, rgba(10,28,46,.82) 50%, rgba(10,28,46,.55) 100%); }
.hero-in { position: relative; display: grid; grid-template-columns: 1.25fr .85fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
.hero h1 { color: #fff; } .hero .lead { color: #D5DEE8; }
.hero .eyebrow, .sec-navy .eyebrow, .ph .eyebrow { color: var(--gold); }
.ph-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; font-size: 15px; }
.ticks li { display: flex; align-items: center; gap: 8px; } .ticks svg { color: var(--gold); }

/* case form */
.cform { background: #fff; color: var(--ink); border-radius: 14px; padding: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.3); display: grid; gap: 12px; }
.cform h2 { font-size: 24px; margin: 0; } .cform p { margin: 0; color: var(--muted); font-size: 14.5px; }
.cform label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.cform input, .cform select { min-height: 46px; border: 1px solid #CFC8B8; border-radius: 8px; padding: 0 12px; font: 400 16px var(--sans); color: var(--ink); background: #fff; }
.cform small { text-align: center; color: var(--muted); }

/* trust bar */
.trust { background: var(--navy); color: #fff; border-top: 1px solid rgba(255,255,255,.1); }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 26px; padding-bottom: 26px; text-align: center; }
.trust b { display: block; font: 700 28px var(--serif); color: var(--gold); } .trust span { font-size: 14px; color: #C9D3DF; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); vertical-align: middle; }

/* sections */
.sec { padding: 80px 0; } .sec-cream { background: var(--cream); } .sec-navy { background: var(--navy); color: #D5DEE8; } .sec-navy h2 { color: #fff; }
.sec-head { max-width: 720px; margin-bottom: 36px; } .sec-head p { color: var(--muted); }
.more { margin: 26px 0 0; font-weight: 700; } .more a { color: var(--gold-t); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rounded { border-radius: 14px; } .mt { margin-top: 22px; }

/* practice cards */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pcard { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; background: var(--navy); aspect-ratio: 4 / 5; }
.pcard img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .4s, opacity .3s; }
.pcard:hover img { transform: scale(1.05); opacity: .6; }
.pcard span { position: absolute; inset: auto 0 0 0; padding: 18px; background: linear-gradient(transparent, rgba(10,28,46,.95)); color: #fff; }
.pcard b { display: block; font: 700 21px var(--serif); } .pcard em { display: block; font-style: normal; font-size: 13.5px; color: #D5DEE8; line-height: 1.45; margin-top: 4px; }

.why { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 14px; }
.why li { display: flex; gap: 12px; font-size: 16.5px; } .why svg { color: var(--gold); flex: none; margin-top: 4px; } .why b { color: #fff; }

/* results, reviews, attorneys */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.res { border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 24px; background: #fff; }
.res b { display: block; font: 700 34px var(--serif); color: var(--navy); } .res span { display: block; font-weight: 700; color: var(--gold-t); margin: 4px 0 8px; } .res p { margin: 0; color: var(--muted); font-size: 15px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rv { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.rv blockquote { margin: 12px 0; font: 600 17px/1.5 var(--serif); color: var(--navy); } .rv figcaption { font-size: 14px; color: var(--muted); }
.att-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.att { text-decoration: none; color: var(--ink); } .att img { border-radius: 12px; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 12px; }
.att b { display: block; font: 700 19px var(--serif); color: var(--navy); } .att span { font-size: 14px; color: var(--muted); }

.steps { list-style: none; padding: 0; margin: 20px 0 28px; counter-reset: s; display: grid; gap: 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold); font: 700 18px var(--serif); }
.steps span { color: var(--muted); font-size: 15px; }
.cities { display: flex; flex-wrap: wrap; gap: 10px; }
.cities a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; } .cities a:hover { border-color: var(--gold); }
.cities svg { color: var(--gold-t); }

.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; color: var(--gold-t); font-size: 22px; line-height: 1; } .faq details[open] summary::after { content: '–'; }
.faq summary::-webkit-details-marker { display: none; } .faq p { margin: 10px 0 0; color: var(--muted); }
.posts { display: grid; gap: 14px; }
.post { display: block; text-decoration: none; padding: 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); } .post:hover { border-color: var(--gold); }
.post time { font-size: 13px; color: var(--gold-t); font-weight: 700; } .post b { display: block; font: 700 19px var(--serif); color: var(--navy); margin: 4px 0; } .post span { font-size: 14.5px; color: var(--muted); }
.es-band { background: var(--cream); padding: 56px 0; } .es-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .es-in p { margin: 0; color: var(--muted); }

/* inner pages */
.ph { background: var(--navy); color: #D5DEE8; padding: 56px 0 60px; }
.ph h1 { color: #fff; } .ph .lead { color: #D5DEE8; }
.ph-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: center; }
.ph-img { border-radius: 14px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ph-plain { background: var(--cream); color: var(--ink); } .ph-plain h1 { color: var(--navy); } .ph-plain .lead { color: var(--muted); } .ph-plain .eyebrow { color: var(--gold-t); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; padding-top: 56px; padding-bottom: 80px; align-items: start; }
.prose { font-size: 17px; } .prose h2 { margin-top: 1.6em; } .prose p { color: #2B3542; }
.prose a { color: var(--gold-t); font-weight: 600; }
.check { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 1em; }
.check li { position: relative; padding-left: 30px; } .check li::before { content: ''; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A44' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
ol.check { counter-reset: c; } ol.check li { counter-increment: c; } ol.check li::before { content: counter(c); background: var(--navy); color: var(--gold); font: 700 11px/18px var(--sans); text-align: center; }
.rel { display: flex; flex-wrap: wrap; gap: 10px; } .rel a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-size: 15px; } .rel a:hover { border-color: var(--gold); }
.side { position: sticky; top: 100px; display: grid; gap: 18px; }
.cta-box { background: var(--navy); color: #D5DEE8; border-radius: 14px; padding: 24px; display: grid; gap: 10px; }
.cta-box b { color: #fff; font: 700 21px var(--serif); } .cta-box p { margin: 0; font-size: 14.5px; }
.cta-box .btn-line { border-color: rgba(255,255,255,.5); color: #fff; } .cta-box .btn-line:hover { background: #fff; color: var(--navy); }
.side-links { border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.side-links b { font: 700 17px var(--serif); color: var(--navy); } .side-links ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } .side-links a { text-decoration: none; font-size: 15px; } .side-links a:hover { color: var(--gold-t); }
.side-rv { background: var(--cream); border-radius: 14px; padding: 20px; } .side-rv p { font: 600 16px/1.5 var(--serif); color: var(--navy); margin: 8px 0; } .side-rv span { font-size: 13.5px; color: var(--muted); }
.att-hero { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; } .att-photo { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; }
.law-list { display: grid; gap: 12px; } .law-list a { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; } .law-list a:hover { border-color: var(--gold); }
.law-list b { display: block; font: 700 19px var(--serif); color: var(--navy); } .law-list span { color: var(--muted); font-size: 15px; font-weight: 400; }
.gloss { margin: 0; display: grid; gap: 14px; } .gloss div { padding-bottom: 14px; border-bottom: 1px solid var(--line); } .gloss dt { font: 700 18px var(--serif); color: var(--navy); } .gloss dd { margin: 4px 0 0; color: var(--muted); }
.meta { color: var(--muted); font-size: 14px; } .note { font-size: 14px; color: var(--muted); background: var(--cream); padding: 12px 16px; border-radius: 8px; }
.contact-list { display: grid; gap: 14px; margin-bottom: 20px; }
.contact-list a, .contact-list p { display: flex; gap: 12px; margin: 0; text-decoration: none; color: var(--ink); } .contact-list svg { color: var(--gold-t); flex: none; margin-top: 3px; } .contact-list b { display: block; font-size: 17px; color: var(--navy); }
.map { width: 100%; height: 300px; border: 0; border-radius: 14px; background: var(--cream); }
.res-3 { margin-bottom: 1em; }

/* final call + footer */
.final { background: var(--gold); }
.final-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }
.final h2 { margin: 0 0 4px; } .final p { margin: 0; color: #3D3313; font-weight: 600; }
.final-cta { display: flex; gap: 12px; flex-wrap: wrap; } .final .btn-gold { background: var(--navy); color: #fff; } .final .btn-line-w { border-color: var(--navy); color: var(--navy); }
.ft { background: #0A1F33; color: #B9C5D3; padding-top: 56px; font-size: 15px; }
.ft-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.ft h3 { color: #fff; font-size: 17px; } .ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ft a { color: #B9C5D3; text-decoration: none; } .ft a:hover { color: var(--gold); }
.brand-w { color: #fff; margin-bottom: 16px; } .brand-w small { color: #B9C5D3; }
.ft-addr { display: flex; gap: 10px; margin: 0 0 10px; } .ft-addr svg { color: var(--gold); flex: none; margin-top: 3px; }
.ft-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; padding-bottom: 28px; font-size: 13.5px; } .ft-legal a { text-decoration: underline; }
.mbar { display: none; }

@media (max-width: 1020px) {
  .nav-d { display: none; }
  .menu { display: block; position: relative; order: 3; }
  .menu summary { display: grid; gap: 5px; place-content: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; list-style: none; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary span { display: block; width: 20px; height: 2px; background: var(--navy); }
  .menu[open] > ul { display: flex; position: absolute; right: 0; top: 54px; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.15); padding: 8px; min-width: 220px; }
  .menu[open] a { display: block; padding: 10px 12px; }
  .hero-in, .split, .ph-in, .two, .att-hero { grid-template-columns: 1fr; }
  .pgrid, .att-grid { grid-template-columns: repeat(2, 1fr); }
  .res-grid, .rv-grid { grid-template-columns: 1fr 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .side { position: static; }
  .att-hero .att-photo { max-width: 280px; }
}
@media (max-width: 640px) {
  .hd-call span { display: none; } .hd-call { padding: 0 14px; }
  .brand b { font-size: 18px; } .mono { width: 40px; height: 40px; font-size: 13px; }
  .sec { padding: 56px 0; } .hero-in { padding-top: 44px; padding-bottom: 48px; }
  .pgrid, .att-grid, .res-grid, .rv-grid, .ft-grid { grid-template-columns: 1fr; }
  .pcard { aspect-ratio: 16 / 10; }
  .trust-in { grid-template-columns: 1fr 1fr; }
  .mbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--navy); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; color: #fff; font-weight: 700; text-decoration: none; }
  .mbar a + a { background: var(--gold); color: var(--navy); }
  body { padding-bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pcard img { transition: none; } }