/* ============================================================
   DALTONMURRAY - PROTOTYPE STYLESHEET
   Brand: Navy #1A3D7C · Teal #2BAA9F
   Remove .demo-banner styles (and the banner HTML) before launch
   ============================================================ */

/* ---- Variables ---- */
:root {
  --navy:        #1A3D7C;
  --navy-dark:   #0F2550;
  --navy-mid:    #1E4A8F;
  --navy-light:  #DBE5F3;
  --teal:        #2BAA9F;
  --teal-dark:   #229089;
  --teal-light:  #E6F7F6;
  --teal-btn:      #21847C;
  --teal-btn-dark: #1A706B;
  --gold:        #C9A84C;
  --brass:       #C9A96E;
  /* Brass is a LIGHT colour, so it only has enough contrast when it sits on the
     dark hero as a background (.article-tag). As TEXT on that same dark hero it
     measured 4.01-4.48 against the required 4.5. This lighter variant is for
     brass TEXT on a dark surface only. Do not use it as a background, and do not
     merge it back into --brass: --brass is also used as a light background with
     navy text (.article-tag) and as decorative rules, which are all fine as-is. */
  --brass-on-dark: #D6BC84;
  --text-dark:   #1A1A2E;
  --text-med:    #4A4A6A;
  --text-light:  #5F5F78;
  /* --text was used 23 times across style.css and 6 tool pages but never defined,
     which makes every one of those declarations invalid at computed-value time.
     It went unnoticed because `color` then falls back to INHERIT, and body is
     already var(--text-dark), so the accidental value matched the intended one
     nearly everywhere. Where it genuinely broke was the hover rules
     (.btn-reset:hover, .btn-retake:hover, .q-btn…:hover), which silently did
     nothing at all. Defined as the primary text colour, which is what every one
     of the 23 call sites means. */
  --text:        var(--text-dark);
  --white:       #FFFFFF;
  --gray-50:     #E9EFF8;
  /* Aug 17 2026: the section bands were invisible, --gray-50 measuring 1.05
     against white and --navy-light 1.12, so every section ran into the next.
     Now #E9EFF8 and #DBE5F3. The NAMES are historical: --gray-50
     carries a blue on purpose. Both are background-only, nowhere else.
     These are as dark as the site allows while every text colour the audit
     observes on them stays at 4.6 to 1 or better. Getting this far also
     required darkening two weak foregrounds that were only passing because
     the old backgrounds were nearly white: the article-disclaimer grey and
     a green used in two comparison tables. Do not lighten those back. */
  --gray-100:    #F3F4F6;
  --gray-200:    #E5E7EB;
  --border:      #DDE1EA;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow-sm:   0 1px 4px rgba(26,61,124,0.08);
  --shadow-md:   0 4px 20px rgba(26,61,124,0.12);
  --shadow-lg:   0 8px 40px rgba(26,61,124,0.16);
  --radius:      8px;
  --radius-lg:   14px;
  --max-width:   1140px;
  --transition:  all 0.22s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 156px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Cormorant Garamond ships OLD-STYLE figures by default: numerals set at
   lowercase height, where 3 4 5 7 9 hang below the baseline. In a serif heading
   next to capitals that reads as a typo. lining-nums selects the font's
   full-height figures instead.
   Set here on body because font-variant-numeric INHERITS, so one rule covers
   every serif heading, card title and pull-quote, including any added later.
   Verified safe for body text: Inter's digits are lining already and measure
   identically with and without this, so it is a no-op outside the serif.
   Added Aug 27 2026 alongside the same fix on the firm's other site - both load
   the same two faces, so both had the same defect. */
body { font-family: var(--font-sans); font-size: 16px; color: var(--text-dark); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; transition: var(--transition); }
ul   { list-style: none; }
button { font-family: var(--font-sans); }

/* ---- Accessibility: skip link + focus visibility ---- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 2000;
  background: var(--navy-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--teal-btn);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal-btn);
  outline-offset: 2px;
}

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.45rem); }
h4 { font-size: 1rem; }
p  { margin-bottom: 0.75rem; color: var(--text-med); line-height: 1.75; }
p:last-child { margin-bottom: 0; }
strong { color: var(--text-dark); }

/* ---- Layout ---- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section    { padding: 80px 0; }

.section-header { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.section-header h2 { margin-bottom: 14px; }
.section-header h2::after {
  content: '';
  display: block;
  width: 48px; height: 2px;
  background: var(--brass);
  border-radius: 2px;
  margin: 12px auto 0;
}
.section-header p  { font-size: 1.05rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: var(--transition); border: 2px solid transparent;
  white-space: nowrap; font-family: var(--font-sans);
}
.btn-primary        { background: var(--teal-btn);  color: var(--white); border-color: var(--teal-btn); }
.btn-primary:hover  { background: var(--teal-btn-dark); border-color: var(--teal-btn-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-white          { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-white:hover    { background: var(--gray-100); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline        { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover  { background: var(--navy); color: var(--white); }
.btn-ghost-white    { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-nav            { background: var(--teal-btn); color: var(--white); border-color: var(--teal-btn); padding: 10px 20px; font-size: 0.88rem; }
.btn-nav:hover      { background: var(--teal-btn-dark); }
.btn-block          { width: 100%; justify-content: center; }

/* ---- Demo Banner ---- */
.demo-banner {
  background: #F5C518; color: #111; text-align: center;
  padding: 9px 16px; font-size: 0.82rem; font-weight: 600;
  position: sticky; top: 0; z-index: 1200;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.demo-banner span { opacity: 0.65; font-weight: 400; margin-left: 8px; }

/* ---- Navigation ---- */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--navy-dark);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 16px rgba(0,0,0,0.28);
}
.nav-inner,
.nav-container {
  display: flex; align-items: center; gap: 4px; height: 140px;
  max-width: 1280px;
}
.nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; margin-right: auto; }
.nav-logo-icon { color: var(--navy); flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-name {
  font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700;
  color: var(--navy); letter-spacing: 0.06em;
}
.nav-logo-tagline {
  font-size: 0.62rem; color: var(--teal); letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 3px;
}
.nav-links { display: flex; align-items: center; }
.nav-links li a {
  display: block; padding: 8px 14px; font-size: 0.88rem; font-weight: 500;
  color: rgba(255,255,255,0.78); border-radius: var(--radius);
  white-space: nowrap;
}
.nav-links li a:hover  { color: var(--white); background: rgba(255,255,255,0.10); }
.nav-links li a.active { color: var(--white); font-weight: 600; }
.nav-cta { margin-left: 12px; }
.nav-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 16px;
}
.nav-phone {
  display: flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.82); font-size: 0.86rem; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.25);
  white-space: nowrap; transition: var(--transition);
}
.nav-phone:hover { color: var(--white); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px; margin-left: 8px;
}
.hamburger span { display: block; width: 23px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); }

/* ---- Hero ---- */
/* ---- Hero - Antique Map theme ---- */
.hero {
  background-color: var(--navy-dark);
  background-image: url('map-bg.jpg');
  background-image: -webkit-image-set(url('map-bg.webp') type('image/webp'), url('map-bg.jpg') type('image/jpeg'));
  background-image: image-set(url('map-bg.webp') type('image/webp'), url('map-bg.jpg') type('image/jpeg'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--white); padding: 80px 0 0; position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 28, 64, 0.46) 0%,
    rgba(10, 28, 64, 0.44) 30%,
    rgba(10, 28, 64, 0.28) 62%,
    rgba(10, 28, 64, 0.12) 100%
  );
  z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 660px;
  padding-bottom: 8px;
}
.hero-badge {
  display: inline-block; padding: 5px 16px;
  background: rgba(201,169,110,0.15); border: 1px solid rgba(201,169,110,0.55);
  border-radius: 100px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-on-dark); margin-bottom: 20px;
}
/* Frosted readability panel behind hero text (lets the antique map show through) */
.hero-content {
  position: relative;
  display: inline-block;
  padding: 34px 38px 32px;
  border-radius: 18px;
  background: rgba(10, 28, 64, 0.73);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);
  border: 1px solid rgba(201, 169, 110, 0.20);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.hero-content h1 {
  color: var(--white); margin-bottom: 20px; font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.25;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
}
.hero-tagline {
  font-family: var(--font-serif);
  font-size: 1.22rem; font-style: italic; font-weight: 500;
  color: var(--brass); letter-spacing: 0.04em;
  margin-bottom: 20px; line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.hero-sub {
  font-size: 1.1rem; color: rgba(255,255,255,0.92);
  max-width: 540px; margin-bottom: 36px; line-height: 1.75;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero-note { font-size: 0.82rem; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 7px; }
.hero-note i { color: rgba(255,255,255,0.9); }

/* Navy CTA button (for teal hero background) */
.btn-navy {
  background: var(--navy); color: var(--white);
  border: 2px solid var(--navy);
}
.btn-navy:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: var(--white); }

/* Our Legal Strengths strip - bottom of hero */
.hero-strengths {
  position: relative; z-index: 1;
  margin-top: 52px;
  padding-bottom: 72px;
}
.hero-strengths-label {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: 16px;
  font-style: italic;
}
.hero-strengths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-strength-card {
  background: var(--navy);
  border: 1px solid var(--navy-mid);
  border-radius: 6px;
  padding: 13px 16px;
  color: var(--white);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.hero-strength-card:hover {
  background: var(--navy-mid);
  border-color: var(--teal);
  color: var(--white);
  text-decoration: none;
}
.hero-strength-card .strength-arrow {
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Wave separator hero → white */
.hero-wave {
  position: relative; z-index: 1;
  bottom: 0; left: 0;
  width: 100%; line-height: 0;
}
.hero-wave svg {
  display: block; width: 100%; height: 64px;
}

/* ---- Trust Strip ---- */
.trust-strip { background: var(--navy-dark); padding: 18px 0; border-bottom: 3px solid var(--teal); }
.trust-grid  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.trust-item  { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.82); font-size: 0.83rem; }
.trust-item i      { color: var(--teal); font-size: 0.95rem; flex-shrink: 0; }
.trust-item strong { color: var(--white); font-weight: 600; }
.trust-divider     { width: 1px; height: 28px; background: rgba(255,255,255,0.15); flex-shrink: 0; }

/* ---- Practice Area Cards (Homepage - Primary) ---- */
.practice-cards-main {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 20px;
}
/* "Guardianships/Conservatorships" is a 30-character token and browsers do not
   break at a slash, so it set the card's min-content to 356px and a 1fr column is
   floored by min-content. That overflowed the homepage to 380px at 320px wide.
   ⚠️ `overflow-wrap: break-word` alone does NOT fix this: it changes RENDERING
   but not the min-content contribution. min-width:0 is what lets the item shrink.
   ⚠️ min-width:0 alone is only HALF the fix, and leaving it alone caused a second
   bug: the column was then free to shrink narrower than the unbreakable word, so
   the heading spilled 39px out over the next card between roughly 1025px and
   1160px wide. BOTH parts are needed: min-width:0 here so the column can shrink,
   plus a break opportunity in the heading below so the text wraps inside it. */
.practice-cards-main > * { min-width: 0; }
.practice-card-main {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 26px; transition: var(--transition); display: flex; flex-direction: column;
}
.practice-card-main:hover { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.practice-card-main.featured { border-color: var(--navy); border-width: 2px; background: var(--navy-light); }
.practice-icon {
  width: 50px; height: 50px; border-radius: var(--radius);
  background: var(--teal-light); color: var(--teal-btn-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 18px; flex-shrink: 0;
}
.practice-card-main.featured .practice-icon { background: var(--navy); color: var(--white); }
/* The <wbr> after the slash in the markup gives the clean break ("Guardianships/"
   then "Conservatorships"). overflow-wrap here is the safety net for any future
   heading with a long unbreakable token, so it can never spill out of the card. */
.practice-card-main h3 { margin-bottom: 10px; overflow-wrap: break-word; }
.practice-card-main > p { font-size: 0.89rem; margin-bottom: 18px; flex-grow: 1; }
.practice-list { margin-bottom: 24px; }
.practice-list li {
  font-size: 0.83rem; color: var(--text-med); padding: 6px 0;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 8px;
}
.practice-list li:last-child { border-bottom: none; }
.practice-list li::before { content: '✓'; color: var(--teal-btn-dark); font-weight: 700; font-size: 0.78rem; }

/* Homepage - Secondary cards */
.practice-cards-secondary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.practice-card-secondary {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; background: var(--gray-50); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-med); font-size: 0.88rem; font-weight: 500;
  transition: var(--transition);
}
.practice-card-secondary i { color: var(--navy); font-size: 1.05rem; flex-shrink: 0; }
.practice-card-secondary:hover { background: var(--navy-light); color: var(--navy); border-color: var(--navy); }

/* ---- Why Section ---- */
.why-section { background: var(--gray-50); }
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 36px 48px; }
.why-item  { text-align: center; }
.why-icon  {
  width: 64px; height: 64px;
  background: var(--navy-dark);
  color: var(--brass);
  border: 2px solid var(--brass);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin: 0 auto 16px;
}
.why-item h3  { margin-bottom: 8px; font-size: 1.05rem; }
.why-item > p { font-size: 0.9rem; max-width: 260px; margin: 0 auto; line-height: 1.6; }

/* ---- Testimonials ---- */
.testimonials-section { background: var(--white); }
.testimonials-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-bottom: 14px; }
.testimonial-card {
  background: var(--gray-50); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 26px; position: relative;
}
.testimonial-card::before {
  content: '\201C'; font-family: var(--font-serif); font-size: 5.5rem;
  color: var(--teal); opacity: 0.18; position: absolute; top: 4px; left: 16px; line-height: 1;
}
.testimonial-stars    { color: #F5C518; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card > p { font-style: italic; color: var(--text-dark); font-size: 0.93rem; line-height: 1.75; margin-bottom: 18px; }
.testimonial-attr     { font-size: 0.75rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; }
.testimonial-note     { text-align: center; font-size: 0.78rem; color: var(--text-light); }

/* The "Committed to the North Shore Community" band was removed from the home
   page on 17 Aug 2026 at Jua's request, and these rules went with it. Note the
   separate .community-grid, .community-card and .community-note rules further
   down are a DIFFERENT feature, used by communities.html, and must stay. */

/* ---- CTA Banner ---- */
.cta-banner    { background: linear-gradient(135deg, #155A56, var(--teal-btn-dark)); padding: 64px 0; }
.cta-section   { background: linear-gradient(135deg, #155A56, var(--teal-btn-dark)); padding: 64px 0; }
.cta-inner     { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-inner h2  { color: var(--white); margin-bottom: 8px; }
.cta-inner > div > p { color: rgba(255,255,255,0.9); max-width: 500px; font-size: 1rem; margin: 0; }
/* max-width caps this at the container. It already had flex-wrap, but
   `flex-shrink: 0` held it at MAX-content (all three buttons on one line, 839px),
   so it never got the chance to wrap and the document overflowed at 800px under
   the WCAG 1.4.12 text-spacing overrides. No effect at normal spacing, where the
   row is already narrower than its container. */
.cta-buttons   { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; max-width: 100%; }

/* ---- Page Hero (interior pages) ---- */
.page-hero { background: linear-gradient(138deg, var(--navy-dark), var(--navy)); padding: 52px 0 44px; color: var(--white); }
.page-hero h1 { color: var(--white); margin-bottom: 10px; }
.page-hero p  { color: rgba(255,255,255,0.72); font-size: 1.02rem; margin: 0; max-width: 540px; }
.breadcrumb   { font-size: 0.78rem; color: rgba(255,255,255,0.72); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: #8FDCD2; }
.breadcrumb a:hover { color: var(--white); }

/* ---- Practice Areas (Full Page) ---- */
.pa-section       { padding: 64px 0; border-bottom: 1px solid var(--border); }
.pa-section:last-of-type { border-bottom: none; }
.pa-section.alt   { background: var(--gray-50); }
.pa-inner         { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; }
.pa-icon-lg       {
  width: 56px; height: 56px; border-radius: var(--radius);
  background: var(--teal-light); color: var(--teal-btn-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
}
.pa-content h2    { margin-bottom: 14px; }
.pa-content p     { font-size: 0.95rem; line-height: 1.8; margin-bottom: 14px; }
.pa-sidebar {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px; position: sticky; top: 156px;
}
.pa-sidebar-title {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); margin-bottom: 14px;
}
.sidebar-services li {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 0.88rem; color: var(--text-med);
  display: flex; align-items: center; gap: 9px;
}
.sidebar-services li:last-child { border-bottom: none; }
.sidebar-services li::before   { content: '→'; color: var(--teal-btn-dark); font-weight: 700; font-size: 0.82rem; }
.sidebar-cta { margin-top: 22px; }

/* ---- Contact Page ---- */
.contact-section  { padding: 72px 0; }
.contact-grid     { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start; }
.contact-form-wrap > h2 { margin-bottom: 8px; }
.contact-form-wrap > p  { margin-bottom: 30px; }

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--text-dark); margin-bottom: 6px;
}
.form-group label .req { color: var(--teal-btn-dark); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 15px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 0.93rem; color: var(--text-dark);
  background: var(--white); transition: var(--transition); appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--teal-btn);
  box-shadow: 0 0 0 3px rgba(43,170,159,0.13);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A6A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; cursor: pointer;
}
.form-privacy {
  font-size: 0.78rem; color: var(--text-light);
  display: flex; align-items: flex-start; gap: 7px; margin-bottom: 20px; margin-top: -6px;
}
.form-privacy i { color: var(--teal-btn-dark); font-size: 0.85rem; margin-top: 1px; flex-shrink: 0; }
.btn-submit {
  width: 100%; padding: 15px; background: var(--teal-btn); color: var(--white);
  border: none; border-radius: var(--radius); font-size: 0.97rem; font-weight: 600;
  cursor: pointer; transition: var(--transition); font-family: var(--font-sans);
}
.btn-submit:hover { background: var(--teal-btn-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Contact Sidebar */
.contact-info-wrap  { display: flex; flex-direction: column; gap: 20px; }
.contact-card       {
  background: var(--gray-50); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 22px; overflow: hidden;
}
.contact-card-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--teal-btn-dark); margin-bottom: 14px;
}
.contact-detail { display: flex; gap: 11px; align-items: flex-start; font-size: 0.88rem; color: var(--text-med); margin-bottom: 12px; }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail i  { color: var(--navy); font-size: 0.88rem; flex-shrink: 0; margin-top: 2px; }
.contact-detail address { font-style: normal; line-height: 1.6; }
.contact-detail strong  { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dark); margin-bottom: 1px; }
.response-box {
  background: var(--teal-light); border: 1px solid rgba(43,170,159,0.28);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.85rem; color: var(--teal-btn-dark); line-height: 1.6;
}
.response-box i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ---- Intake Steps ---- */
.intake-section   { background: var(--navy); padding: 72px 0; }
.intake-section .section-header h2 { color: var(--white); }
.intake-section .section-header p  { color: rgba(255,255,255,0.65); }
.intake-steps     { display: grid; grid-template-columns: repeat(4,1fr); position: relative; gap: 8px; }
.intake-steps::before {
  content: ''; position: absolute; top: 34px;
  left: calc(12.5% + 8px); right: calc(12.5% + 8px);
  height: 2px; background: rgba(43,170,159,0.35); z-index: 0;
}
.intake-step      { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; position: relative; z-index: 1; }
.step-circle      {
  width: 68px; height: 68px; background: var(--teal-btn); color: var(--white);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 18px; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px rgba(43,170,159,0.15);
}
.step-timing { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8FDCD2; margin-bottom: 7px; }
.intake-step h3   { color: var(--white); font-family: var(--font-sans); font-size: 0.93rem; font-weight: 600; margin-bottom: 8px; }
.intake-step > p  { font-size: 0.82rem; color: rgba(255,255,255,0.58); line-height: 1.6; margin: 0; }

/* ---- Footer ---- */
.footer         { background: var(--navy-dark); padding: 56px 0 30px; }
.footer-grid    { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 28px; }
.footer-logo    { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; color: var(--white); }
.nav-logo-img    { height: 120px; width: auto; filter: invert(1); mix-blend-mode: screen; }
.footer-logo-img { height: 52px; width: auto; filter: invert(1); mix-blend-mode: screen; opacity: 0.9; }
.hero-card-logo  { height: 90px; width: auto; display: block; margin: 0 auto 16px; filter: brightness(0) invert(1); }
.footer-logo-name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; }
.footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 250px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social-link {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; transition: all 0.15s ease; text-decoration: none;
}
.footer-social-link:hover { background: var(--teal-btn); color: var(--white); }
.footer-col h2  {
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--white); margin-bottom: 14px;
}
.footer-col ul  { display: flex; flex-direction: column; gap: 7px; }
.footer-col ul li a { font-size: 0.85rem; color: rgba(255,255,255,0.58); }
.footer-col ul li a:hover { color: var(--teal); }
.footer-loc-name { font-size: 0.85rem; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.footer-loc-addr { font-style: normal; font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.65; margin-bottom: 18px; }
.footer-phone   { display: block; font-size: 1rem; font-weight: 600; color: var(--teal); margin-bottom: 4px; }
.footer-hours   { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-bottom  { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-copy    { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.footer-updated { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.footer-legal   { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.footer-legal a:hover { color: var(--teal); }

/* ---- Team Grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

/* Mobile nav CTAs - hidden on desktop, shown in hamburger menu */
.nav-mobile-cta { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-ship-illustration   { opacity: 0.35; width: 58%; }
  .hero-strengths-grid      { grid-template-columns: 1fr 1fr; }
  .practice-cards-main      { grid-template-columns: 1fr 1fr; }
  .why-grid                 { grid-template-columns: 1fr 1fr; gap: 32px; }
  .testimonials-grid        { grid-template-columns: 1fr 1fr; }
  .pa-inner                 { grid-template-columns: 1fr; }
  .pa-sidebar               { position: static; }
  .contact-grid             { grid-template-columns: 1fr; }
  .intake-steps::before     { display: none; }
  .intake-steps             { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid              { grid-template-columns: 1fr 1fr; gap: 36px; }
}
/* Nav collapses to hamburger well above phone width - logo + 7 links + phone
   pill + CTA button need ~1230px to lay out on one row without overflowing or
   clipping the last button (found July 14 2026: was stuck at the 768px
   breakpoint, which left every laptop-width viewport overflowing). */
@media (max-width: 1300px) {
  /* Reduce navbar height whenever the hamburger is in play */
  .nav-container { height: 68px; }
  .nav-logo-img  { height: 52px; }

  html { scroll-padding-top: 84px; }

  .nav-links {
    display: none; position: fixed; top: 68px; left: 0; right: 0;
    background: var(--navy-dark); flex-direction: column;
    padding: 12px 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 999; gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-cta     { display: none; }
  .nav-actions { display: none; }
  .hamburger   { display: flex; }

  /* Show phone + schedule CTAs inside hamburger menu */
  .nav-mobile-cta { display: block; margin-top: 4px; }
  .nav-mobile-cta:first-of-type { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 12px; }
  /* ⚠️ These two MUST stay qualified as `.nav-links li a.…`. Unqualified,
     `.nav-mobile-*` is specificity (0,1,0) and loses to
     `.nav-links li a { color: rgba(255,255,255,0.78) }` at (0,1,2), so the
     `color: var(--white)` below silently never applied and the buttons rendered
     at 78% white. On the teal Schedule button that measured 3.4 against the
     required 4.5. Qualifying them makes it (0,2,2), which wins. */
  .nav-links li a.nav-mobile-call {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px; border-radius: var(--radius);
    background: rgba(255,255,255,0.08); color: var(--white);
    font-size: 0.9rem; font-weight: 600; width: 100%;
  }
  /* --teal-btn (#21847C) reaches only 4.51 under white: passing by 0.01 is not
     worth shipping, so this uses the existing darker button token for margin. */
  .nav-links li a.nav-mobile-schedule {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px; border-radius: var(--radius);
    background: var(--teal-btn-dark); color: var(--white);
    font-size: 0.9rem; font-weight: 600; width: 100%;
  }
}
@media (max-width: 768px) {
  .section  { padding: 52px 0; }
  .hero     { padding: 44px 0 0; }
  .hero::before { background: rgba(10, 28, 64, 0.42) !important; }
  .hero-content { padding: 22px 20px 20px; display: block; }
  .hero-strengths-grid    { grid-template-columns: 1fr 1fr; }

  .practice-cards-main      { grid-template-columns: 1fr; }
  .why-grid                 { grid-template-columns: 1fr; }
  .testimonials-grid        { grid-template-columns: 1fr; }
  .team-grid                { grid-template-columns: 1fr; }
  .team-featured            { grid-template-columns: 1fr !important; }
  .team-featured img        { min-height: 300px !important; }
  .cta-inner                { flex-direction: column; text-align: center; }
  .cta-buttons              { justify-content: center; }
  .form-row                 { grid-template-columns: 1fr; }
  .intake-steps             { grid-template-columns: 1fr; }
  .footer-grid              { grid-template-columns: 1fr; }
  .footer-bottom            { flex-direction: column; text-align: center; }
  .trust-grid               { flex-direction: column; align-items: flex-start; }
  .trust-divider            { display: none; }
}
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { justify-content: center; }
  .cta-buttons .btn { justify-content: center; width: 100%; }
  .hero-strengths-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG INDEX & ARTICLE PAGES
   ============================================================ */

/* Category badge */
.article-tag {
  display: inline-block;
  background: var(--brass);
  color: var(--navy-dark);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* Article hero */
.article-hero {
  background-color: var(--navy-dark);
  background-image: url('map-bg.jpg');
  background-image: -webkit-image-set(url('map-bg.webp') type('image/webp'), url('map-bg.jpg') type('image/jpeg'));
  background-image: image-set(url('map-bg.webp') type('image/webp'), url('map-bg.jpg') type('image/jpeg'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 80px 0 56px;
  position: relative;
  overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 64, 0.84);
  z-index: 0;
}
.article-hero .container {
  position: relative;
  z-index: 1;
}
.article-hero .article-tag {
  background: rgba(201, 169, 110, 0.18);
  color: var(--brass-on-dark);
  border: 1px solid rgba(201, 169, 110, 0.45);
}
.article-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  max-width: 820px;
  margin-bottom: 20px;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  margin-top: 4px;
}
.article-meta .meta-author {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 600;
}
.article-meta .meta-sep { opacity: 0.35; }

/* Two-column layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 52px;
  padding: 56px 0 80px;
  align-items: start;
}
@media (max-width: 920px) {
  .article-layout { grid-template-columns: 1fr; }
}

/* Article body typography */
.article-body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.82;
  color: #2d2d2d;
}
.article-body p { margin-bottom: 1.4em; }
.article-body h2 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  margin: 2.2em 0 0.6em;
  padding-left: 16px;
  border-left: 4px solid var(--teal);
  line-height: 1.3;
}
.article-body h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-med);
  margin: 1.8em 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.article-body ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.4em;
}
.article-body ul li {
  padding-left: 1.4em;
  position: relative;
  margin-bottom: 0.55em;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
}
.article-body ol {
  padding-left: 1.5em;
  margin-bottom: 1.4em;
}
.article-body ol li { margin-bottom: 0.55em; }
.article-body strong { color: var(--navy); }
.article-body em { font-style: italic; }

/* Callout box */
.article-callout {
  background: rgba(201, 169, 110, 0.08);
  border-left: 4px solid var(--brass);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin: 2em 0;
}
.article-callout p { margin: 0; color: #1a3d7c; font-size: 0.975rem; line-height: 1.6; }

/* Highlight box (dark) */
.article-highlight {
  background: var(--navy);
  color: #fff;
  padding: 28px 32px;
  border-radius: 10px;
  margin: 2.2em 0;
}
.article-highlight h3 {
  color: #8FDCD2;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 12px;
}
.article-highlight p { color: rgba(255,255,255,0.86); margin-bottom: 1em; }
.article-highlight ul li { color: rgba(255,255,255,0.88); }
.article-highlight ul li::before { background: var(--teal); }
.article-highlight strong { color: #fff; }

/* Legal disclaimer */
.article-disclaimer {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  padding: 16px 20px;
  border-radius: 6px;
  margin-top: 3em;
  font-size: 0.8rem;
  color: #4A4A6A;
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Sidebar */
.article-sidebar {
  position: sticky;
  top: 156px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sidebar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sidebar-card-body { padding: 20px 22px; }

/* Author card */
.author-card .author-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.author-card .author-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.author-card .author-title {
  font-size: 0.75rem;
  color: var(--teal-btn-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}
.author-card .author-bio {
  font-size: 0.855rem;
  color: #555;
  line-height: 1.65;
  margin: 0;
}

/* Sidebar CTA */
.sidebar-cta-card {
  background: var(--navy);
  padding: 26px 22px;
  border-radius: 12px;
  text-align: center;
  border: none;
}
.sidebar-cta-card h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px;
}
.sidebar-cta-card p {
  font-size: 0.855rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 18px;
  line-height: 1.55;
}
.sidebar-cta-card .btn {
  display: block;
  width: 100%;
  text-align: center;
}
.sidebar-cta-phone {
  display: block;
  color: rgba(255,255,255,0.8);
  font-size: 0.84rem;
  margin-top: 12px;
  text-decoration: none;
  font-family: var(--font-sans);
}
.sidebar-cta-phone:hover { color: #fff; }

/* Sidebar tool widget */
.sidebar-tool-card {
  background: var(--teal-btn-dark);
  padding: 22px;
  border-radius: 12px;
  text-align: center;
}
.sidebar-tool-card .tool-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
  display: block;
}
.sidebar-tool-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 8px;
}
.sidebar-tool-card p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 16px;
  line-height: 1.5;
}
.sidebar-tool-card .btn-tool {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  color: var(--teal-btn-dark);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: var(--transition);
}
.sidebar-tool-card .btn-tool:hover {
  background: var(--navy);
  color: #fff;
}

/* Related articles */
.related-card .sidebar-card-body h3 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #767676;
  margin-bottom: 14px;
}
.related-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-card ul li {
  border-bottom: 1px solid var(--gray-100);
  padding: 9px 0;
}
.related-card ul li:last-child { border-bottom: none; padding-bottom: 0; }
.related-card ul li a {
  font-size: 0.87rem;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.4;
  font-weight: 500;
  display: block;
}
.related-card ul li a:hover { color: var(--teal-btn-dark); }

/* ---- Blog Index Page ---- */
.blog-hero {
  background: var(--navy);
  color: #fff;
  padding: 80px 0 56px;
  text-align: center;
}
.blog-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: #fff;
  margin-bottom: 12px;
}
.blog-hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  max-width: 540px;
  margin: 0 auto;
}

.blog-section { padding: 64px 0 80px; }
.blog-section-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-btn-dark);
  margin-bottom: 8px;
}
.blog-section h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--navy);
  margin-bottom: 32px;
  font-weight: 600;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.blog-card-icon {
  background: var(--navy);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
.blog-card-icon .article-tag {
  font-size: 0.68rem;
  margin-bottom: 0;
  background: transparent;
  border: none;
  color: #fff;
}
.blog-card-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-body .article-tag { font-size: 0.68rem; }
.blog-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 10px;
}
.blog-card-body p {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 0;
}
.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 22px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.78rem;
  color: #767676;
  font-family: var(--font-sans);
}
.blog-card-footer .read-link {
  color: var(--teal-btn-dark);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.8rem;
}
.blog-card-footer .read-link:hover { color: var(--navy); }

/* ---- What We Handle sidebar card ---- */
.what-we-handle-card .sidebar-card-body { padding: 1.1rem 1.2rem; }
.what-we-handle-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-btn-dark);
  margin: 0 0 0.65rem;
}
.what-we-handle-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.what-we-handle-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--gray-200, #e8e8ee);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--text-med, #4A4A6A);
  line-height: 1.35;
}
.what-we-handle-list li:last-child { border-bottom: none; padding-bottom: 0; }
.what-we-handle-list li::before {
  content: '→';
  color: var(--teal-btn-dark);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ============================================================
   INTAKE FORM SECTION
   ============================================================ */
.intake-form-section { background: var(--gray-50); }
.intake-form-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.intake-form-text h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--navy); margin-bottom: 14px; line-height: 1.25; }
.intake-form-text p { color: var(--text); font-size: 0.95rem; line-height: 1.75; margin-bottom: 24px; }
.intake-assurances { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.intake-assurances li { font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 12px; }
.intake-assurances li i { color: var(--teal-btn-dark); width: 18px; text-align: center; font-size: 0.95rem; }
.intake-form-card { background: var(--white); border-radius: 12px; padding: 36px; box-shadow: var(--shadow); }
.intake-form-card h3 { font-family: var(--font-serif); font-size: 1.35rem; color: var(--navy); margin: 0 0 22px; font-weight: 600; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label { font-size: 0.8rem; font-weight: 600; color: var(--navy); letter-spacing: 0.04em; text-transform: uppercase; }
.form-field input,
.form-field select,
.form-field textarea { border: 1.5px solid var(--border); border-radius: 6px; padding: 10px 13px; font-size: 0.9rem; font-family: var(--font-sans); color: var(--text); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; width: 100%; box-sizing: border-box; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--teal-btn); box-shadow: 0 0 0 3px rgba(43,170,159,0.12); }
.form-field textarea { resize: vertical; min-height: 90px; }
/* This button is width:100%, so it can never grow to fit its label. .btn sets
   white-space: nowrap, which pushed "We'll Call You. No Obligation." 6px out past
   each edge of the button at 320px wide. Let this one button's label wrap; there
   is room for one line at every other width, so nothing else changes. */
.form-submit-btn { width: 100%; margin-top: 6px; padding: 14px; font-size: 0.95rem; justify-content: center; white-space: normal; }
.form-privacy { font-size: 0.75rem; color: var(--text-light); text-align: center; margin: 12px 0 0; line-height: 1.5; }
.form-privacy i { color: var(--teal-btn-dark); margin-right: 4px; }
@media (max-width: 960px) { .intake-form-inner { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 600px) { .form-row-2 { grid-template-columns: 1fr; } .intake-form-card { padding: 24px; } }

/* ============================================================
   COMMUNITIES PAGE
   ============================================================ */
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.community-card {
  display: block;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
}
.community-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.community-card h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.community-card h3 span { color: var(--teal-btn-dark); }
.community-card p {
  font-size: 0.85rem;
  color: var(--text-med);
  margin: 0;
}
.community-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 28px;
}
.community-note a { color: var(--teal-btn-dark); font-weight: 600; }
/* A town with both a family law page and an estate planning page (Sep 14 2026):
   ONE card holding two links. The card itself is not a link, so it does not lift on hover;
   each link does its own hover and focus. Link colour teal-btn-dark on navy-light is 4.6 to 1. */
.community-card-multi:hover { border-color: var(--border); box-shadow: none; transform: none; }
.community-links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.community-links a { color: var(--teal-btn-dark); font-size: 0.9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.community-links a:hover { text-decoration-thickness: 2px; }
/* Regional pages (Sep 14 2026): a region with only TWO town cards uses a centred two-column grid
   so no empty third column shows. The tablet and phone rules further down still take over. */
.community-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
.courthouse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}
.courthouse-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.courthouse-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal-btn-dark);
  margin-bottom: 10px;
}
.courthouse-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}
.courthouse-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .community-grid   { grid-template-columns: 1fr 1fr; }
  .courthouse-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .community-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG CATEGORY FILTER BAR
   ============================================================ */
.blog-filter-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 14px 0; position: sticky; top: 140px; z-index: 100; }
.blog-filter-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.blog-filter-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; }
.blog-filter-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 16px; font-size: 0.82rem; font-weight: 500; color: var(--text); cursor: pointer; transition: all 0.18s; font-family: var(--font-sans); }
.filter-btn:hover { border-color: var(--teal-btn); color: var(--teal-btn-dark); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: white; }
@media (max-width: 600px) { .blog-filter-bar { top: 68px; } .blog-filter-label { display: none; } }

/* ============================================================
   "PREFER TO WRITE" OPTIONAL-FIELDS DISCLOSURE
   Contact + homepage intake forms default to 2 fields (name + phone);
   email / area / message tuck behind this toggle.
   Strategy: fewer visible fields = fewer "meters" the visitor must cross.
   ============================================================ */
.more-fields { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.more-fields > summary { cursor: pointer; color: var(--teal-btn-dark); font-weight: 600; font-size: 0.9rem; list-style: none; display: inline-flex; align-items: center; gap: 9px; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::before { content: "\002B"; font-weight: 700; color: var(--teal-btn-dark); font-size: 1rem; line-height: 1; }
.more-fields[open] > summary::before { content: "\2212"; }
.more-fields[open] > summary { margin-bottom: 6px; }
.more-fields > summary:hover { color: var(--teal-btn-dark); }

/* Quick-answer box on article pages (AEO, July 2026) */
.quick-answer { background: var(--teal-light); border: 1px solid rgba(43,170,159,0.35); border-left: 4px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 0 0 28px; }
.quick-answer .qa-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-btn-dark); margin-bottom: 8px; }
.quick-answer .qa-label i { margin-right: 6px; }
.quick-answer p { margin: 0; color: var(--teal-btn-dark); font-size: 0.97rem; line-height: 1.75; }

/* ============================================================
   STICKY-OFFSET OVERRIDES FOR THE SHORT (HAMBURGER) NAVBAR
   Must stay at the END of this file: the base .blog-filter-bar /
   .article-sidebar / .pa-sidebar rules appear above and would
   otherwise win the cascade at equal specificity. (July 14 2026)
   ============================================================ */
@media (max-width: 1300px) {
  .blog-filter-bar { top: 68px; }
  .article-sidebar, .pa-sidebar { top: 84px; }
}

/* ---- Inline links in body copy ---- */
/* Added 2026-07-28. The global `a` rule sets color:inherit + no underline, so an
   unclassed link inside a paragraph is invisible. WCAG 2.2 SC 1.4.1 (Use of Color):
   an inline link must carry a non-colour cue, hence the underline. */
.inline-link { color: var(--teal-btn-dark); text-decoration: underline; }
.inline-link:hover { color: var(--navy); }

/* IN-TEXT LINKS (Sep 15 2026). The base rule `a { color: inherit; text-decoration: none }` made a
   plain <a> inside a sentence look exactly like the words around it (WCAG 1.4.1): 51 links on 21
   pages, found by dev-files/audit/inline-link-sweep.mjs. Same look as .inline-link. :not([class])
   leaves buttons, tool cards and any link that already has its own styling alone. Links inside the
   dark .article-highlight panel get the light teal its headings use, since teal on navy is unreadable. */
.article-body p a:not([class]),
.article-body li a:not([class]),
.article-callout p a:not([class]) { color: var(--teal-btn-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body p a:not([class]):hover,
.article-body li a:not([class]):hover,
.article-callout p a:not([class]):hover { color: var(--navy); }
.article-highlight p a:not([class]),
.article-highlight li a:not([class]) { color: #8FDCD2; }
.article-highlight p a:not([class]):hover,
.article-highlight li a:not([class]):hover { color: #fff; }

/* ============================================================================
   MOBILE HORIZONTAL-OVERFLOW FIXES  (added 2026-07-28)
   Found by dev-files/audit/run-audit.mjs, which measures 375/800/1280px. Every
   earlier check only ever looked at 1280px, so these were invisible: 17 pages
   scrolled sideways on a phone, the worst at 546px of content in a 375px window.
   ⚠️ This block must stay LAST in the file. The base rules it overrides sit
   later in the stylesheet, and an equal-specificity override placed earlier
   silently loses the cascade (this bit us on both sites in July 2026).
   ========================================================================== */
@media (max-width: 700px) {
  /* 1. The 12 family-law-*-ma town pages. A 3-column grid whose cards have long
        labels ("Guardianship vs. Conservatorship"): 1fr is floored by min-content,
        so three columns forced 526px. Used ONLY on the town pages, despite the
        base rule's "Homepage" comment. */
  .practice-cards-secondary { grid-template-columns: 1fr; }

  /* 3. Wide tables. A table cannot shrink below its min-content, so one wide
        header cell ("Survivors at Death") dragged the whole article column past
        the viewport. Let the TABLE scroll instead of the page.
        ⚠️ Making the table a scroll container is NOT enough on its own: a grid
        item defaults to `min-width: auto`, so the table's intrinsic width still
        propagated up and forced the 1fr column to 500px. Bisecting the DOM was
        the only way to see this. The `min-width: 0` below is the part that
        actually lets the column shrink. */
  .article-layout, .ref-layout { min-width: 0; }
  .article-layout > *, .ref-layout > * { min-width: 0; }
  main table { display: block; overflow-x: auto; max-width: 100%; }
}
@media (max-width: 480px) {
  /* 4. Service-page hero CTA. `.btn` sets white-space:nowrap and the label
        "Schedule a Confidential Consultation" is 354px wide, 3px over. */
  .pa-hero-cta .btn { white-space: normal; }

  /* 5. Footer legal links. `.footer-legal` was a flex row with NO wrap, so the
        four links (Privacy Policy / Disclaimer / Attorney Advertising /
        Accessibility) held one 307px line and pushed EVERY page to 331px against
        the 320px WCAG 1.4.10 reflow target. `flex-wrap: wrap` is on the base rule;
        this centres the wrapped rows under the already-centred mobile footer. */
  .footer-legal { justify-content: center; }

  /* 6. Long unbreakable compound words. "Guardianships/Conservatorships" is 30
        characters and browsers do NOT break at a slash.
        ⚠️ TWO declarations are needed and they do different jobs:
        `overflow-wrap: break-word` fixes the RENDERING (it is inherited, so one
        declaration on main covers everything) but it does NOT change an element's
        min-content contribution, so on its own it does not let a grid item shrink.
        `min-width: 0` on the grid children is the part that actually removes the
        overflow. Getting this wrong cost a full measure-and-retry cycle. */
  main { overflow-wrap: break-word; }
  .intake-form-inner { min-width: 0; }
  .intake-form-inner > * { min-width: 0; }

  /* 7. A <select> sizes itself to its LONGEST OPTION, so the same 30-character
        practice-area name pushed the intake grid wider than the viewport. */
  select { max-width: 100%; min-width: 0; }
  .form-field, .form-group { min-width: 0; }
}

/* ============================================================
   TOWN / COMMUNITY PAGE BODY LAYOUT
   ============================================================
   This was an INLINE style on all 12 family-law-*-ma pages, and a media query
   cannot override an inline style without !important, so the two-column split
   survived down to 320px and pushed those pages to 324-343px wide. As a class it
   collapses cleanly. It is also a readability win: at 375px the old 1.4fr/1fr
   split with a 48px gap left the prose column about 163px wide, roughly 20
   characters a line. */
.town-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
/* a grid item defaults to min-width:auto and will not shrink below min-content */
.town-layout > * { min-width: 0; }
@media (max-width: 700px) {
  .town-layout { grid-template-columns: 1fr; gap: 28px; }
}


/* ============================================================================
   FINDING OUR OFFICE  (contact.html)
   The arrival diagram, the photographs and the directions links.
   Deliberately built from the existing colour variables so it inherits any
   future palette change. No literal curly braces in these comments, because
   the brace-balance check counts every one it finds in the file.
   ========================================================================= */
.finding-figure { margin: 0 0 30px; text-align: center; }
.finding-figure img { width: 100%; max-width: 900px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.finding-figure figcaption { font-size: 0.82rem; color: var(--text-light); margin-top: 10px; }
.finding-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 30px 0; }
.finding-photos figure { margin: 0; min-width: 0; }
.finding-photos img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.finding-photos figcaption { font-size: 0.86rem; color: var(--text-med); margin-top: 10px; line-height: 1.5; }
.finding-notes { background: var(--navy-light); border-radius: var(--radius-lg); padding: 22px 26px; margin: 0 0 26px; }
.finding-notes ul { margin: 0; padding-left: 22px; }
.finding-notes li { margin-bottom: 9px; color: var(--text-med); }
.finding-directions { display: flex; flex-wrap: wrap; gap: 12px; }
.finding-directions a { min-width: 0; }


/* ============================================================================
   HOMEPAGE FOR THE MERGED FIRM  (index.html, added Sep 11 2026)
   Family law and estate planning share one front page after the merger:
   two labelled rows of hero links, the Where Should I Start chooser, the two
   service groups with the guardianship bridge, and three attorney cards.
   Built only from existing colour variables, so it follows any palette change.
   The phone-width rules for these classes live in THIS block, not in the
   older media queries higher up: those come earlier in the file, so a rule
   here would silently override them.
   No literal curly braces in these comments: the brace-balance check counts
   every one it finds in the file.
   ========================================================================= */
.hero-strengths-group + .hero-strengths-group { margin-top: 22px; }
.hero-strengths-grid.hero-strengths-grid-4 { grid-template-columns: repeat(4, 1fr); }

.start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.start-grid > * { min-width: 0; }
.start-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 22px; display: flex; flex-direction: column;
}
.start-card h3 { font-size: 1.1rem; margin-bottom: 8px; overflow-wrap: break-word; }
.start-card > p { font-size: 0.88rem; margin-bottom: 14px; flex-grow: 1; }
.start-links { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--gray-200); }
.start-links li { padding: 9px 0 0; }
.start-links a { color: var(--navy); font-weight: 600; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; }
.start-links a:hover { color: var(--teal-btn-dark); }

.service-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-groups > * { min-width: 0; }
.service-group {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.service-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.service-group-head .practice-icon { margin-bottom: 0; }
.service-group-head h3 { margin: 0; overflow-wrap: break-word; }
.service-group > p { font-size: 0.92rem; margin-bottom: 16px; }
.service-links { list-style: none; padding: 0; margin: 0; }
.service-links li {
  padding: 11px 0; border-bottom: 1px solid var(--gray-200);
  display: flex; flex-direction: column; gap: 2px;
}
.service-links li:last-child { border-bottom: none; }
.service-links a { color: var(--navy); font-weight: 600; font-size: 0.97rem; text-decoration: underline; text-underline-offset: 3px; }
.service-links a:hover { color: var(--teal-btn-dark); }
.service-links span { font-size: 0.84rem; color: var(--text-med); }
.service-bridge {
  display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px 26px;
  background: var(--navy-light); border: 1px solid var(--navy); border-radius: var(--radius-lg);
  color: var(--text-dark); text-decoration: none; transition: var(--transition);
}
.service-bridge .practice-icon { margin-bottom: 0; background: var(--navy); color: var(--white); }
.service-bridge-text { flex: 1; min-width: 0; font-size: 0.92rem; line-height: 1.6; }
.service-bridge-text strong { display: block; color: var(--navy); font-size: 1.02rem; }
.service-bridge .strength-arrow { color: var(--navy); font-weight: 700; }
.service-bridge:hover { border-color: var(--teal); box-shadow: var(--shadow-md); text-decoration: none; }

.dm-attorney-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; }
.dm-attorney-grid > * { min-width: 0; }
.dm-attorney-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 26px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.dm-attorney-photo {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: center top;
  margin-bottom: 16px; flex-shrink: 0;
}
/* Initials stand in until photographs of Bridget Murray and Heather Dennehy exist. */
.dm-attorney-monogram {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-dark); color: var(--white);
  font-family: var(--font-serif); font-size: 2.1rem; font-weight: 600; letter-spacing: 0.04em;
}
.dm-attorney-card h3 { font-size: 1.35rem; margin-bottom: 4px; }
.dm-attorney-role {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--teal-btn-dark); margin-bottom: 14px;
}
.dm-attorney-card > p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px; }
.dm-attorney-card > p.dm-attorney-cred { font-size: 0.82rem; color: var(--text-med); }
.dm-attorney-link { margin-top: auto; padding-top: 8px; color: var(--teal-btn-dark); font-weight: 600; font-size: 0.9rem; }

.intake-call { font-size: 0.95rem; margin-top: 22px; }
.intake-call a { color: var(--navy); font-weight: 700; }

@media (max-width: 1024px) {
  .hero-strengths-grid.hero-strengths-grid-4 { grid-template-columns: 1fr 1fr; }
  .start-grid { grid-template-columns: 1fr 1fr; }
  .dm-attorney-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .service-groups { grid-template-columns: 1fr; }
  .dm-attorney-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .start-grid { grid-template-columns: 1fr; }
  .service-bridge { flex-wrap: wrap; padding: 18px 20px; }
}
@media (max-width: 480px) {
  .hero-strengths-grid.hero-strengths-grid-4 { grid-template-columns: 1fr; }
}


/* ============================================================================
   RESOURCES DROPDOWN IN THE MAIN MENU  (added Sep 11 2026, all pages)
   Articles, Tools and FAQ sit under one "Resources" button. nav.js toggles
   .open on the li and aria-expanded on the button. On desktop it drops down;
   inside the phone menu it opens inline. Colours copy .nav-links li a exactly,
   so contrast is the same as every other menu item.
   The typeface is set with font-family, NOT the font shorthand: the shorthand
   silently resets the lining numerals set on body.
   No literal curly braces in these comments (the brace check counts them).
   ========================================================================= */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  font-family: inherit; font-size: 0.88rem; font-weight: 500; line-height: inherit;
  color: rgba(255,255,255,0.78); background: none; border: none;
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.nav-dropdown-toggle i { font-size: 0.62rem; transition: transform 0.2s ease; }
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle { color: var(--white); background: rgba(255,255,255,0.10); }
.nav-dropdown-toggle.active { color: var(--white); font-weight: 600; }
.nav-dropdown.open .nav-dropdown-toggle i { transform: rotate(180deg); }
.nav-sub {
  display: none; position: absolute; top: 100%; left: 0; min-width: 190px; z-index: 1001;
  margin-top: 6px; padding: 6px; list-style: none;
  background: var(--navy-dark); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.nav-dropdown.open .nav-sub { display: block; }
.nav-links .nav-sub li a { padding: 9px 14px; }
@media (max-width: 1300px) {
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav-sub {
    position: static; min-width: 0; margin: 2px 0 4px; padding: 0; text-align: center;
    border: none; box-shadow: none; background: transparent;
  }
}


/* ============================================================================
   ATTORNEY BIO PAGES  (attorney-bridget-murray.html, attorney-heather-dennehy.html)
   Brought over from the estate planning team's former stylesheet Sep 11 2026, colours
   mapped by ROLE: the icon inside the frame was dark green TEXT there, so it is
   navy text here; the frame's background stays a background-only tint.
   Initials or an icon stand in until photographs are supplied.
   No literal curly braces in these comments (the brace check counts them).
   ========================================================================= */
.attorney-bio-photo {
  width: 100%; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background: var(--navy-light); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; color: var(--navy); overflow: hidden;
}
.attorney-bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 768px) {
  .attorney-bio-photo { max-width: 220px; margin: 0 auto; }
  /* the at-a-glance card is a two-column grid written INLINE on both bio pages, so only an
     !important rule can collapse it. .team-featured (above) handles the columns; this shrinks
     the tall photo panel once it sits on top. Found Sep 11 2026 in a 375px capture. */
  .attorney-glance-photo { min-height: 0 !important; padding: 28px 24px !important; }
}


/* ============================================================================
   PHONE FIXES FOR THE PAGES BROUGHT OVER FROM THE ESTATE PLANNING SITE
   (added Sep 11 2026). Ported from sections 3 and 8 of that site's
   MOBILE HORIZONTAL-OVERFLOW FIXES block; its other sections already exist
   here in this stylesheet's own earlier fix block, so only these two were missing.
   Found by the harness and mobile-reflow.mjs, then pinned by find-culprit.mjs:
   elder-law 324px, veterans-benefits 326px, estate-tax 349px at 320, and
   young-adult-readiness 505px at 375, every one a button label that could not
   wrap ("Find Out What You Qualify For" measured 302px in a 272px column).
   THE SIZING RULE: when a grid or flex item refuses to shrink, reach for
   min-width 0 FIRST. overflow-wrap changes how text RENDERS, not min-content.
   Keep this block LAST: an equal-specificity override placed earlier loses.
   No literal curly braces in these comments (the brace check counts them).
   ========================================================================= */
@media (max-width: 480px) {
  /* .btn sets white-space nowrap, so a long label held one unbreakable line.
     On a phone a long label wrapping is the wanted behaviour; short ones are unaffected. */
  .btn { white-space: normal; }
  /* A nowrap button also floors its grid column, so release the column too. */
  .pa-inner, .pa-inner > *, .pa-content { min-width: 0; }
  /* for-advisors.html contact block */
  .advisor-contact-split > *, .advisor-contact-card { min-width: 0; }
  .contact-detail, .contact-detail > * { min-width: 0; }
  .contact-detail address { overflow-wrap: anywhere; }
}


/* ============================================================================
   ARTICLE AND TOOL LAYOUT RULES FOR THE PAGES BROUGHT OVER (Sep 11 2026)
   The only rules the estate planning team's former stylesheet applied to
   these 26 pages that this one lacked, found by comparing RULES with their
   screen widths, not class names.
   Keep after the phone fixes above; equal-specificity rules placed earlier lose.
   No literal curly braces in these comments (the brace check counts them).
   ========================================================================= */
.results-card { position: relative; }
@media (max-width: 700px) {
  /* a wide table inside the article column must not drag the page wider */
  .article-layout, .article-layout > * { min-width: 0; }
}
@media (max-width: 480px) {
  .calc-grid, .calc-grid > * { min-width: 0; }
}