/* Jackson Legal, LLC — harbor navy + sea-glass, from the JL compass logo */
:root{
  --paper:#fbfcfb; --fog:#e8f1f2; --mist:#f2f7f7;
  --harbor:#0d3a52; --harbor-2:#082a3d; --ink:#12222c; --muted:#4a5f6a;
  --glass:#7fbcc9; --glass-d:#25707f; --line:rgba(13,58,82,.16);
  --disp:'DM Serif Display',Georgia,'Times New Roman',serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:1.05rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;color:var(--harbor);line-height:1.12;letter-spacing:-.005em}
p{margin-bottom:1.1rem}
a{color:var(--glass-d)}
a:hover{color:var(--harbor)}
:focus-visible{outline:3px solid var(--glass-d);outline-offset:3px}
section[id]{scroll-margin-top:64px}

/* ---------- decorative compass rose ---------- */
.rose{position:absolute;pointer-events:none;color:var(--harbor);opacity:.07;width:560px;height:560px;max-width:none}
.rose-hero{right:-140px;top:-90px;width:720px;height:720px}
.rose-services{right:-200px;top:40px}
.rose-about{left:-220px;bottom:-200px;color:#fff;opacity:.06;width:640px;height:640px}
.rose-footer{right:-120px;top:-100px;color:#fff;opacity:.06;width:420px;height:420px}

/* ---------- nav: centered brand stacked above links ---------- */
.site-header{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--line)}
.navbar{padding:0}
.navbar .container{flex-wrap:wrap;align-items:center}
.navbar-brand{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;margin:0;order:1}
.brand-logo{width:48px;height:48px;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--disp);font-size:1.4rem;color:var(--harbor)}
.brand-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.navbar-toggler{order:2;border:1px solid var(--line);padding:.4rem .6rem}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(37,112,127,.35)}
.navbar-collapse{order:3;flex-basis:100%}
.navbar-nav{padding:.5rem 0 1rem;gap:.15rem}
.nav-link{color:var(--ink);font-weight:600;font-size:.95rem;padding:.55rem 0!important}
.nav-link:hover{color:var(--glass-d)}
.btn-call{background:var(--harbor);color:#fff;font-weight:600;border-radius:999px;padding:.5rem 1.1rem;font-size:.92rem;margin-top:.4rem}
.btn-call:hover{background:var(--harbor-2);color:#fff}

@media (min-width:992px){
  /* brand row scrolls away; the link row stays pinned */
  .site-header{top:-76px}
  .navbar .container{justify-content:center}
  .navbar-brand{flex:0 0 100%;justify-content:center;height:76px;padding:0;order:1}
  .navbar-toggler{display:none}
  .navbar-collapse{display:flex!important;justify-content:center;border-top:1px solid var(--line);flex-basis:100%}
  .navbar-nav{flex-direction:row;align-items:center;gap:2.2rem;padding:0}
  .nav-link{padding:.85rem 0!important;font-size:.92rem;letter-spacing:.02em;position:relative}
  .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:2px;background:var(--glass-d);transform:scaleX(0);transition:transform .2s}
  .nav-link:hover::after{transform:scaleX(1)}
  .btn-call{margin:0}
  section[id]{scroll-margin-top:60px}
}

/* ---------- buttons ---------- */
.btn-primary-wf{background:var(--harbor);color:#fff;border:2px solid var(--harbor);border-radius:999px;font-weight:600;padding:.75rem 1.6rem}
.btn-primary-wf:hover{background:var(--harbor-2);border-color:var(--harbor-2);color:#fff}
.btn-ghost-wf{background:transparent;color:var(--harbor);border:2px solid var(--harbor);border-radius:999px;font-weight:600;padding:.75rem 1.6rem}
.btn-ghost-wf:hover{background:var(--harbor);color:#fff}

/* ---------- shared ---------- */
.section{position:relative;padding:6rem 0;overflow:hidden}
.section>.container{position:relative;z-index:1}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--glass-d);margin-bottom:.9rem}
.section-head{max-width:760px;margin-bottom:3rem}
.section-head h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.section-sub{color:var(--muted);margin-top:1rem}

/* arch-cropped photos */
.arch{margin:0;border-radius:999px 999px 14px 14px;overflow:hidden;background:var(--fog);box-shadow:14px 14px 0 var(--glass)}
.arch img{display:block;width:100%;height:100%;object-fit:cover}
.arch-hero{aspect-ratio:4/5;max-width:440px;margin-left:auto;margin-right:14px}
.arch-hero img{object-position:68% center}
.arch-tall{aspect-ratio:4/5;max-width:340px;margin-top:2.5rem;margin-right:14px}
.arch-tall img{object-position:88% center}
.arch-portrait{aspect-ratio:1/1.15;max-width:260px;margin-right:14px;box-shadow:14px 14px 0 var(--harbor)}
.arch-portrait img{object-position:center 25%}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--fog);padding:5rem 0 6rem}
.hero .container{position:relative;z-index:1}
.hero-title{font-size:clamp(2.7rem,7vw,5.6rem);line-height:1.02;color:var(--harbor);margin-bottom:.4rem;letter-spacing:-.01em}
.hero-practical{font-family:var(--disp);font-style:italic;font-size:clamp(1.8rem,4vw,3rem);color:var(--glass-d);margin-bottom:1.6rem;line-height:1.1}
.hero-lede{font-size:1.2rem;max-width:34rem;color:var(--ink);margin-bottom:2rem}

/* ---------- services ---------- */
.services{background:var(--paper)}
.service-grid{border-top:1px solid var(--line)}
.service{padding:2.2rem 2rem 2.4rem 0;border-bottom:1px solid var(--line);height:100%}
@media (min-width:768px){
  .service-grid>.col-md-6:nth-child(odd) .service{border-right:1px solid var(--line)}
  .service-grid>.col-md-6:nth-child(even) .service{padding-left:2rem;padding-right:0}
}
.num{display:block;font-family:var(--disp);font-size:4rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--glass-d);margin-bottom:.8rem}
.service h3{font-size:1.55rem;margin-bottom:.7rem}
.service p{color:var(--muted);margin:0}

/* ---------- quote band ---------- */
.quote-band{background:var(--harbor);color:#fff;padding:5rem 0;text-align:center}
.quote-band blockquote{margin:0 auto;max-width:880px}
.quote-band p{font-family:var(--disp);font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.25;margin:0;color:#fff}
.quote-band p::before{content:"\201C";display:block;color:var(--glass);font-size:4rem;line-height:.8;margin-bottom:.6rem}

/* ---------- approach ---------- */
.approach{background:var(--mist)}
.approach h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.approach-sticky{position:sticky;top:90px}
.prose p{max-width:40rem}
.prose h3{font-size:1.9rem;margin-bottom:1rem}

/* ---------- about ---------- */
.about{background:var(--harbor);color:#e6eef1}
.about h2,.about h3{color:#fff}
.about .eyebrow{color:var(--glass)}
.about a{color:var(--glass)}
.about-name{font-size:2rem}
.lead-p{font-family:var(--disp);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.3;color:#fff}
.about-cols{margin-top:4.5rem;padding-top:3rem;border-top:1px solid rgba(255,255,255,.2)}
.about-cols h3{font-size:1.5rem;margin-bottom:1rem}
.about-cols p{font-size:.98rem;color:#d4e1e6}

/* ---------- experience ---------- */
.experience{background:var(--paper)}
.exp-pills{gap:.6rem;margin-bottom:2.5rem}
.exp-pills .nav-link{border:2px solid var(--harbor);color:var(--harbor);border-radius:999px;padding:.55rem 1.2rem!important;font-weight:600;font-size:.92rem;background:transparent}
.exp-pills .nav-link::after{display:none}
.exp-pills .nav-link.active{background:var(--harbor);color:#fff}
.matters{border-top:1px solid var(--line)}
.matter{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem 3rem;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.matter h4{font-size:1.3rem;margin:0}
.matter p{margin:0;color:var(--muted);font-size:.98rem}
@media (min-width:992px){.matter{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.fine-print{margin-top:2.5rem;font-size:.85rem;color:var(--muted);max-width:50rem}

/* ---------- guidance ---------- */
.guidance{background:var(--fog)}
.guidance h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.2rem}
.note-card{background:#fff;border-left:6px solid var(--glass);padding:2rem 2rem 1.6rem;border-radius:0 14px 14px 0;box-shadow:0 10px 30px rgba(13,58,82,.08)}

/* ---------- contact ---------- */
.contact{background:var(--paper)}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.contact-list li:first-child{padding-top:0}
.contact-list i{font-size:1.4rem;color:var(--glass-d);line-height:1.5}
.contact-list a{font-weight:600}
.contact-form{background:var(--mist);padding:2rem;border-radius:14px;border:1px solid var(--line)}
.contact-form h3{font-size:1.5rem;margin-bottom:1.2rem}
.form-label{font-weight:600;font-size:.9rem}
.form-control{border-color:rgba(13,58,82,.3);border-radius:8px;padding:.65rem .85rem}
.form-control:focus{border-color:var(--glass-d);box-shadow:0 0 0 3px rgba(37,112,127,.25)}
.map-wrap{margin-top:3.5rem;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:21/8;min-height:300px}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--harbor-2);color:#c9d8de;padding:4rem 0 1.6rem}
.site-footer .container{position:relative;z-index:1}
.footer-name{font-family:var(--disp);font-size:1.9rem;color:#fff;margin-bottom:.2rem}
.footer-sub{color:var(--glass);margin-bottom:1rem}
.footer-addr{font-size:.95rem;margin:0}
.site-footer a{color:#fff}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:flex-start}
@media (min-width:992px){.footer-links{justify-content:flex-end}}
.footer-links a{text-decoration:none;font-weight:600;font-size:.95rem}
.footer-links a:hover{color:var(--glass)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.5rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem}
.powered{text-decoration:none;border:1px solid rgba(127,188,201,.5);border-radius:999px;padding:.35rem .95rem;color:#fff}
.powered i{color:var(--glass)}
.powered:hover{background:var(--glass);color:var(--harbor-2)}
.powered:hover i{color:var(--harbor-2)}

/* ---------- small screens ---------- */
@media (max-width:991.98px){
  .section{padding:4.5rem 0}
  .hero{padding:3rem 0 4.5rem}
  .arch-hero{margin:0 auto;max-width:360px}
  .approach-sticky{position:static}
  .arch-tall{max-width:300px}
  .rose-hero{width:480px;height:480px;right:-180px}
}
@media (max-width:575.98px){
  .brand-name{font-size:1.2rem}
  .brand-sub{font-size:.6rem;letter-spacing:.1em}
  .hero-title{font-size:2.6rem}
  .service{padding-right:0}
  .contact-form{padding:1.4rem}
  .map-wrap{aspect-ratio:4/3}
  .quote-band{padding:3.5rem 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nav-link::after{transition:none}}