/* ============================================================
   Lopez & Associates — shared design system
   Same structural schema as the intake form; accent retuned to the
   brand blue (from the logo/mascot) so the artwork feels native.
   To switch back to the pine green, change --accent / --accent-ink /
   --accent-soft below — everything else follows.
   ============================================================ */
:root{
  --bg:        #E9EDF1;
  --paper:     #F8FAFC;
  --field:     #FFFFFF;
  --ink:       #222A30;
  --muted:     #69737C;
  --line:      #E2E7EC;
  --line-strong:#C6D0D8;
  --accent:    #1F4E79;   /* brand blue (from the logo) */
  --accent-ink:#163A5C;
  --accent-soft:#E7EEF6;
  --signal:    #B0792C;
  --radius:    11px;
  --shadow:    0 1px 2px rgba(22,42,60,.05), 0 6px 20px rgba(22,42,60,.07);
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw: min(1600px, 94vw);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent-ink); }
img{ max-width:100%; display:block; }

/* ---------- Header ---------- */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.header-container{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.logo-area{ display:flex; align-items:center; gap:14px; min-width:0; }
.logo-area .logo{ height:42px; width:auto; }
.logo-area .tagline{ font-size:12px; color:var(--muted); max-width:24ch; line-height:1.3; }
.contact-info-inline{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.contact-info-inline a{ color:var(--accent-ink); text-decoration:none; font-weight:600; }
.contact-info-inline a:hover{ text-decoration:underline; }
.contact-icon{ width:16px; height:16px; opacity:.8; }
.sidebar-toggle{
  font-size:20px; line-height:1; cursor:pointer; background:transparent; border:1px solid var(--line-strong);
  border-radius:8px; padding:4px 9px; color:var(--accent-ink);
}
.sidebar-toggle:hover{ background:var(--accent-soft); border-color:var(--accent); }

/* ---------- Primary nav ---------- */
.site-nav{ background:var(--accent); }
.site-nav .nav-links{
  max-width:var(--maxw); margin:0 auto; padding:0 20px; list-style:none;
  display:flex; gap:2px; flex-wrap:wrap;
}
.site-nav .nav-links > li{ position:relative; }
.site-nav .nav-links a{
  color:#fff; text-decoration:none; font-size:14px; font-weight:600;
  padding:12px 14px; display:inline-block; opacity:.92;
}
.site-nav .nav-links a:hover, .site-nav .nav-links a[aria-current="page"]{ opacity:1; background:rgba(255,255,255,.14); }
.dropdown-content{
  display:none; position:absolute; top:100%; left:0; min-width:190px; z-index:50;
  background:var(--paper); border:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow); padding:6px; list-style:none; margin:0;
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content{ display:block; }
/* Must out-rank ".site-nav .nav-links a", which paints nav links white.
   At equal specificity the white won and the submenu read white-on-white. */
.site-nav .nav-links .dropdown-content a{
  color:var(--ink); display:block; padding:9px 12px; border-radius:8px; opacity:1;
  font-weight:600; white-space:nowrap;
}
.site-nav .nav-links .dropdown-content a:hover,
.site-nav .nav-links .dropdown-content a:focus-visible{
  background:var(--accent-soft); color:var(--accent-ink);
}

/* ---------- Off-canvas sidebar ---------- */
.sidebar{
  position:fixed; top:0; left:0; height:100%; width:260px; background:var(--paper);
  border-right:1px solid var(--line); box-shadow:6px 0 24px rgba(22,42,60,.12);
  transform:translateX(-100%); transition:transform .22s ease; z-index:60; padding:18px 14px;
}
.sidebar.open{ transform:translateX(0); }
.sidebar-close{ position:absolute; top:10px; right:12px; font-size:22px; line-height:1; background:none; border:none; cursor:pointer; color:var(--muted); }
.sidebar ul{ list-style:none; margin:30px 0 0; padding:0; }
.sidebar > ul > li > a{ display:block; padding:11px 12px; border-radius:8px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; }
.sidebar > ul > li > a:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.sidebar .sidebar-submenu{ list-style:none; margin:2px 0 4px; padding:0 0 0 12px; max-height:0; overflow:hidden; transition:max-height .2s ease; }
.sidebar-dropdown.open .sidebar-submenu{ max-height:70vh; overflow-y:auto; }
.sidebar-submenu a{ display:block; padding:8px 12px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:13.5px; }
.sidebar-submenu a:hover{ background:var(--accent-soft); color:var(--accent-ink); }
/* Groups inside a submenu. Each set of tools sits in its own bordered
   container so further sets can be added without the list running
   together. Markup: <li class="submenu-group"> + label + its own <ul>. */
.submenu-group{ margin:6px 0; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--field); }
.submenu-group + .submenu-group{ margin-top:8px; }
/* The label is a <span> in the markup; site.js swaps it for this button, so
   with scripts off every group is simply open. A lone group stays open. */
.submenu-group-label,
.submenu-group-head{ display:block; width:100%; padding:4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.submenu-group-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:0; border-radius:6px; cursor:pointer; font-family:inherit; text-align:left; }
.submenu-group-head:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.submenu-group-head .chev{ font-size:10px; transition:transform .18s ease; }
.submenu-group-head[aria-expanded="false"] .chev{ transform:rotate(-90deg); }
.sidebar-submenu .submenu-group ul{ list-style:none; margin:0; padding:0; }
.submenu-group-body{ max-height:60vh; overflow:hidden; transition:max-height .2s ease; }
.submenu-group-body.closed{ max-height:0; }
.sidebar-overlay{ position:fixed; inset:0; background:rgba(22,42,60,.35); opacity:0; visibility:hidden; transition:opacity .22s ease; z-index:55; }
.sidebar-overlay.show{ opacity:1; visibility:visible; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:26px 20px 70px; }

/* ---------- Hero ---------- */
.hero{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:34px; margin-bottom:24px; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center;
}
.hero .eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.hero h1{ font-family:var(--font-display); font-size:32px; line-height:1.1; letter-spacing:-0.02em; margin:8px 0 12px; }
.hero p{ margin:0 0 20px; color:var(--muted); font-size:15.5px; max-width:48ch; }
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-figure{ display:flex; justify-content:center; }
.hero-figure img{ max-height:340px; width:auto; filter:drop-shadow(0 10px 24px rgba(22,42,60,.16)); }

/* Two images stacked in one box, crossfading. The second layer paints its own
   opaque background so the transparent logo never shows the photo through it. */
.hero-rotator{
  position:relative; width:100%; aspect-ratio:300/160; overflow:hidden;
  border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow);
}
.hero-rotator img{
  position:absolute; inset:0; width:100%; height:100%; max-height:none;
  object-fit:cover; opacity:0; filter:none;
  transition:opacity 1.1s ease-in-out;
}
.hero-rotator img.on{ opacity:1; }
.hero-rotator img.mark{ object-fit:contain; background:#fff; padding:9% 11%; }
@media (prefers-reduced-motion:reduce){
  .hero-rotator img{ transition:none; }
}
@media (max-width:760px){ .hero{ grid-template-columns:1fr; } .hero-figure{ order:-1; } .hero-figure img{ max-height:240px; } }

/* ---------- Cards ---------- */
.section-label{ font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:8px 0 12px; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:26px; }
/* A short grid: keep the cards card-sized instead of stretching to fill. */
.card-grid.tight{ grid-template-columns:repeat(auto-fit,minmax(240px,340px)); }
.card{
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 18px 20px; transition:border-color .15s ease, transform .08s ease;
}
.card:hover{ border-color:var(--accent); transform:translateY(-1px); }
.card .eyebrow{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.card h3{ margin:2px 0 0; font-family:var(--font-display); font-size:16px; }
.card p{ margin:0; font-size:13.5px; color:var(--muted); }
.card .go{ margin-top:auto; padding-top:8px; font-size:13px; font-weight:700; color:var(--accent); }

/* ---------- Expandable service cards (home: "What we do") ---------- */
.services{ margin-bottom:26px; }
.services .card-grid{ margin-bottom:0; }

.service-card{
  font:inherit; text-align:left; width:100%; cursor:pointer; align-items:flex-start;
  scroll-margin-top:110px;
}
.service-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.service-card[aria-expanded="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.service-card .go{ display:flex; align-items:center; gap:6px; }
.service-card .chev{ font-size:11px; transition:transform .22s ease; }
.service-card[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Collapsed = a 0fr grid row, so there is no leftover height or gap. */
.service-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.service-panel.open{ grid-template-rows:1fr; }
.service-panel > div{ overflow:hidden; }

.service-body{
  margin-top:16px;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px 24px;
}
.service-body h3{ margin:0; font-family:var(--font-display); font-size:21px; letter-spacing:-0.01em; }
.service-body .lede{ margin:6px 0 16px; color:var(--accent); font-weight:600; font-size:15.5px; max-width:none; }
.service-body p{ margin:0 0 12px; }
.service-cols{ display:grid; grid-template-columns:1.1fr .9fr; gap:0 44px; align-items:start; }
.service-prose p:last-child{ margin-bottom:0; }
.service-includes{ background:var(--accent-soft); border-radius:var(--radius); padding:16px 20px 18px; }
.service-body .list-label{ margin:0 0 4px; font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); }
.service-body .feature-list{ margin:0; }
.service-body .feature-list li{ font-size:14px; padding:4px 0 4px 20px; }
.service-body .closer{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-weight:600; color:var(--accent-ink); }
.service-close{
  margin-top:18px; background:transparent; border:1px solid var(--line-strong); color:var(--accent);
  border-radius:999px; padding:7px 18px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.service-close:hover{ border-color:var(--accent); background:var(--accent-soft); }
@media (max-width:900px){
  .service-cols{ grid-template-columns:1fr; gap:0; }
  .service-includes{ margin-top:14px; }
}
@media (max-width:760px){ .service-body{ padding:20px 18px; } }
@media (prefers-reduced-motion:reduce){
  .service-panel{ transition:none; } .service-card .chev{ transition:none; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-block; font:inherit; font-size:15px; font-weight:700; cursor:pointer; color:#fff; background:var(--accent); border:none; border-radius:999px; padding:12px 26px; text-decoration:none; box-shadow:var(--shadow); transition:opacity .15s ease, transform .05s ease; }
.btn:hover{ opacity:.93; } .btn:active{ transform:translateY(1px); }
.btn.secondary{ background:transparent; color:var(--accent); border:1px solid var(--line-strong); box-shadow:none; }
.btn.secondary:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* ---------- Footer ---------- */
.site-footer{ text-align:center; color:var(--muted); font-size:12.5px; padding:24px; border-top:1px solid var(--line); background:var(--paper); }

/* ---------- Utilities ---------- */
.hidden{ display:none !important; }
/* .card sets display:flex, which out-ranks the browser default for [hidden]. */
[hidden]{ display:none !important; }
.muted{ color:var(--muted); }

/* ---------- Page header band (interior pages) ---------- */
.page-head{ margin:6px 0 20px; }
.page-head .eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.page-head h1{ font-family:var(--font-display); font-size:28px; line-height:1.12; letter-spacing:-0.02em; margin:6px 0 6px; }
.page-head p{ margin:0; color:var(--muted); max-width:60ch; }

/* ---------- Generic content ---------- */
.prose{ max-width:70ch; }
.prose p{ margin:0 0 12px; }
.feature-list{ list-style:none; margin:8px 0 0; padding:0; }
.feature-list li{ position:relative; padding:5px 0 5px 22px; color:var(--ink); }
.feature-list li::before{ content:"›"; position:absolute; left:4px; color:var(--accent); font-weight:700; }

/* ---------- Form fields (contact inquiry, etc.) ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12.5px; color:var(--muted); font-weight:600; }
.field input, .field textarea, .field select{
  font:inherit; font-size:15px; color:var(--ink); background:var(--field);
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:10px 12px; width:100%;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:560px){ .form-2col{ grid-template-columns:1fr; } }

/* ---------- Contact info rows ---------- */
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.info-list li:last-child{ border-bottom:none; }
.info-list .k{ min-width:96px; color:var(--muted); font-weight:600; font-size:13.5px; }
.info-list a{ color:var(--accent-ink); text-decoration:none; font-weight:600; }
.info-list a:hover{ text-decoration:underline; }

/* ---------- Map ---------- */
.map-embed{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.map-embed iframe{ display:block; width:100%; height:320px; border:0; }

/* ---------- Downloads ---------- */
.download-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--field); margin-bottom:10px; }
.download-row .meta h3{ margin:0 0 2px; font-family:var(--font-display); font-size:15px; }
.download-row .meta p{ margin:0; font-size:13px; color:var(--muted); }

/* ---------- About page ---------- */
.page-head p.lede{ font-size:17px; font-weight:600; color:var(--accent); margin:10px 0 0; max-width:60ch; }
.about-body{ max-width:78ch; }
.about-body > section{ margin-top:34px; }
.about-body h2{
  font-family:var(--font-display); font-size:20px; letter-spacing:-0.01em;
  margin:0 0 10px; padding-top:16px; border-top:1px solid var(--line);
}
.about-body p{ margin:0 0 13px; }
.about-body p:last-child{ margin-bottom:0; }
.about-body .pull{
  font-weight:600; color:var(--accent-ink); border-left:3px solid var(--accent);
  padding:2px 0 2px 14px; margin:16px 0;
}
.about-list{
  background:var(--accent-soft); border-radius:var(--radius); padding:16px 20px 18px; margin:16px 0;
}
.about-list .list-label{
  margin:0 0 4px; font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent);
}
.about-list .feature-list{ columns:2; column-gap:34px; margin:0; }
.about-list .feature-list li{ break-inside:avoid; font-size:14px; padding:4px 0 4px 20px; }
@media (max-width:700px){ .about-list .feature-list{ columns:1; } }
.about-figure{
  margin:22px 0 6px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.about-figure img{ width:100%; height:auto; display:block; }
.about-figure figcaption{
  font-size:12.5px; color:var(--muted); padding:10px 15px; border-top:1px solid var(--line);
}
.about-figure.pad img{ padding:14px 18px; }
/* A figure that should not run the full width of the prose column — used for
   the founders photo, which is supporting evidence beside the ownership
   paragraph rather than a banner. */
.about-figure.inset{ max-width:460px; margin-left:auto; margin-right:auto; }

/* Floated beside the prose so the text wraps around it and the figure costs
   almost no page height. Authored near the TOP of its section — a float placed
   late runs out of text to wrap and leaves a hole beside it.
   Threshold is 1000px, not 1200: between 1000 and 1200 the prose column is
   571-693px, which still leaves 285px+ of text beside a 260px figure. Below
   that the measure gets too narrow to read, so it centres instead. */
.about-figure.side figcaption{ font-size:12px; padding:8px 12px; }
@media (min-width:1000px){
  .about-figure.side{ float:right; width:260px; margin:2px 0 16px 26px; }
  /* Contains the float so it cannot spill into the next section and cut
     through the border-top on its h2. */
  .about-body > section{ display:flow-root; }
}
@media (max-width:999px){
  .about-figure.side{ max-width:340px; margin-left:auto; margin-right:auto; }
}

.about-figure.small{ max-width:320px; margin-left:auto; margin-right:auto; }

/* Section-closing call to action: the artwork beside real text, filling the
   column width instead of a small centred image with dead space either side. */
.cta-band{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:26px; align-items:center; margin:28px 0 0;
}
.cta-band .art{
  margin:0; padding:10px 14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.cta-band .art img{ width:100%; height:auto; }
.cta-band .kicker{
  margin:0; font-family:var(--font-display); font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.cta-band h3{
  margin:7px 0 0; font-family:var(--font-display); font-size:22px;
  line-height:1.15; letter-spacing:-0.01em;
}
.cta-band .shout{
  margin:2px 0 16px; font-family:var(--font-display); font-size:30px;
  font-weight:700; line-height:1.05; color:var(--accent);
}
@media (max-width:900px){
  .cta-band{ grid-template-columns:1fr; gap:18px; }
}
.logo-row{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin:18px 0 6px;
  padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
}
.logo-row img{ height:56px; width:auto; }
.logo-row .sep{ width:1px; align-self:stretch; background:var(--line); }
.commitment{
  margin-top:34px; background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px 26px;
}
.commitment h2{ border-top:none; padding-top:0; margin-top:0; }
.commitment .sign{
  margin:16px 0 0; font-family:var(--font-display); font-size:17px;
  font-weight:700; color:var(--accent);
}
.about-aside{ position:sticky; top:118px; display:flex; flex-direction:column; gap:16px; }
.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.fact-list li:last-child{ border-bottom:none; }
.fact-list .k{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:2px; }
@media (max-width:820px){ .about-aside{ position:static; } }

/* ---------- Two-column page layout ---------- */
.cols{ display:grid; grid-template-columns:1.3fr .7fr; gap:22px; align-items:start; }
@media (max-width:820px){ .cols{ grid-template-columns:1fr; } }

/* ---------- Reference lists (compliance page) ---------- */
.ref-group{ margin-top:24px; }
.ref-group h3{
  font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 10px;
}
.ref-list{ list-style:none; margin:0; padding:0; }
.ref-list li{ padding:11px 0; border-bottom:1px solid var(--line); }
.ref-list li:last-child{ border-bottom:none; }
.ref-list a{ font-weight:600; color:var(--accent-ink); text-decoration:none; }
.ref-list a:hover{ text-decoration:underline; }
.ref-list a::after{ content:" \2197"; font-size:11px; color:var(--muted); }
.ref-list span{ display:block; font-size:13px; color:var(--muted); margin-top:3px; }
.ref-list span em{ font-style:normal; font-weight:600; color:var(--ink); }

/* ---------- Compliance topics (collapsible, individually linkable) ---------- */
.topic{ margin-top:30px; }
.topic > h2{ position:relative; }
.topic-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--line); margin-bottom:4px;
}
.topic:first-of-type .topic-head{ border-top:none; padding-top:0; }
.topic-toggle{
  font:inherit; font-family:var(--font-display); font-size:20px; font-weight:600;
  letter-spacing:-0.01em; color:var(--ink); background:none; border:none; padding:0;
  cursor:pointer; text-align:left; display:flex; align-items:center; gap:10px;
}
.topic-toggle:hover{ color:var(--accent); }
.topic-toggle .chev{ font-size:12px; color:var(--accent); transition:transform .22s ease; }
.topic-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.topic-meta{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.topic-link{
  font:inherit; font-size:11.5px; font-weight:600; color:var(--accent); cursor:pointer;
  background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:2px 10px;
}
.topic-link:hover{ border-color:var(--accent); background:var(--accent-soft); }
/* Open is the DEFAULT so the page is readable, printable and archivable with
   scripts off. JS collapses what should start closed. */
.topic-body{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .3s ease; }
.topic-body.closed{ grid-template-rows:0fr; }
.topic-body > div{ overflow:hidden; }
@media print{
  .topic-body{ grid-template-rows:1fr !important; }
  .topic-toggle .chev, .topic-link, .topic-nav, #topicNavCard{ display:none !important; }
  .about-aside{ display:none !important; }
  .cols{ grid-template-columns:1fr !important; }
}
.topic-nav{ list-style:none; margin:6px 0 0; padding:0; }
.topic-nav li{ border-bottom:1px solid var(--line); }
.topic-nav li:last-child{ border-bottom:none; }
.topic-nav a{ display:block; padding:9px 0; font-size:13.5px; font-weight:600;
  color:var(--accent-ink); text-decoration:none; }
.topic-nav a:hover{ color:var(--accent); }
.topic-nav a.on{ color:var(--accent); }
.topic-nav .when{ display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:1px; }
@media (prefers-reduced-motion:reduce){ .topic-body{ transition:none; } }

/* ---------- Forms / downloads list ---------- */
.forms-wrap{ max-width:940px; }
.form-group{ margin-bottom:34px; }
.form-group > h2{
  font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.group-note{ margin:10px 0 0; font-size:13px; color:var(--muted); }

/* Callout box. Ported verbatim 2026-08-26 from the copy inside intake.html,
   which was the only place it was ever defined - compliance.html and
   downloads.html used the markup with no rule behind it. Keep the two in
   sync, or move intake onto site.css and delete its copy. */
.note{
  display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding:11px 13px;
  background:var(--accent-soft); border-radius:var(--radius); font-size:13px; color:var(--ink);
}
.note .dot{ color:var(--accent); font-weight:700; }
.form-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.form-row:last-child{ border-bottom:none; }
.form-row .meta{ flex:1 1 auto; min-width:0; }
.form-row .meta h3{ margin:0 0 5px; font-family:var(--font-display); font-size:15.5px; line-height:1.3; }
.form-row .meta p{ margin:0; font-size:13.5px; color:var(--muted); max-width:64ch; }
.form-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.form-tags .tag{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 9px; border-radius:999px; background:var(--bg); color:var(--muted);
  border:1px solid var(--line);
}
.form-tags .tag.ok  { background:#E3EFE6; color:#2C6B3A; border-color:#CFE3D4; }
.form-tags .tag.warn{ background:#F7EBDC; color:var(--signal); border-color:#EBD9C2; }
.form-actions{ flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:7px; }
.form-actions .btn{ white-space:nowrap; text-align:center; }
.form-actions .mini{ font-size:12px; color:var(--accent); text-decoration:none; text-align:center; }
.form-actions .mini:hover{ text-decoration:underline; }
@media (max-width:680px){
  .form-row{ flex-direction:column; gap:12px; }
  .form-actions{ align-items:flex-start; }
}

/* ---------- Requirement table (compliance page) ---------- */
.req-table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:13.5px; }
.req-table th{
  text-align:left; font-family:var(--font-display); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:#fff; background:var(--accent); padding:9px 12px; font-weight:700;
}
.req-table td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.req-table tr:last-child td{ border-bottom:none; }
.req-table tbody tr:nth-child(odd){ background:var(--paper); }
.req-table td:first-child{ font-weight:600; white-space:normal; min-width:170px; }
.req-table td:first-child span{ display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:2px; }
/* ---------- Contact page ---------- */
/* Replaces the old .contact-mascot rules, which sized a 170px mascot. The
   founders card is a 2:3 portrait: dropped into the .cols right column at full
   width it stands ~900px tall against a ~430px form, which is what left the
   dead block of background between the form and the map. Capping and centring
   it brings the two columns back within ~100px of each other. */
.contact-cols{ align-items:start; }
 
.contact-card{ display:flex; justify-content:center; margin:0; padding:0; }

/* Reuses .about-figure — the site's own captioned-image frame — so the card is
   built from the same parts as the rest of the site instead of importing a
   print piece's styling. Landscape and deliberately modest — the photo is
   supporting material on this page, not its subject. */
.founders-figure{ margin:0; width:100%; max-width:340px; }
.founders-figure img{ width:100%; height:auto; }
.founders-figure .cap-label{
  display:block; margin-bottom:3px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
 
/* Secure-file link, moved out of the right column and parked under the form. */
.form-alt{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
}
.form-alt a{ color:var(--accent); font-weight:700; text-decoration:none; }
.form-alt a:hover{ text-decoration:underline; }
 
/* Below 820px .cols collapses to one column and the card stacks under the
   form. Keep the cap so it does not blow up to full width on a tablet. */
@media (max-width:820px){
  .contact-card{ margin-top:30px; }
  .founders-figure{ max-width:320px; }
}

/* Drops the figure so its top edge lines up with the top of the Name / Firm
   inputs rather than with the "Send an inquiry" heading. 96px = the h2 plus its
   margin (71px) and the field label plus its gap (25px) — measured, so revisit
   it if either is restyled. Desktop only: below 820px the columns stack and
   this would read as a stray gap. */
@media (min-width:821px){
  .contact-card{ padding-top:96px; }
}