/* Services hub + the six industry-vertical pages (medical, legal, enterprise,
   financial, government, aviation) share this one stylesheet. The hub
   (services/index.html) defines .sv-grid/.sv-industry for its own
   #industries section; #service-types and #modes on the hub reuse the
   existing generic .svc-grid/.svc-static and .modes/.mode classes from
   site.css (the same ones index.html and dedicated/index.html already use)
   rather than forking a second set of near-identical rules. #process and
   #compliance on the hub likewise reuse site.css's .steps/.step and
   .comp-grid/.comp.

   Everything below this point is new: the per-vertical template pieces that
   Tasks 6-11 consume unchanged — .sv-deliver/.sv-card/.sv-why (What We
   Deliver), .sv-steps/.sv-step (the 4-step how-it-works, distinct from the
   3-step .steps/.step on the hub), .sv-compliance + .sv-quote (per-vertical
   credentials + pull quote), .sv-argument (the persuasion block), .sv-faq/
   .sv-faq-item (native <details> accordion), and .sv-cross (sibling-vertical
   links).

   2026-09-25 — THE .sv-* CARDS NO LONGER HAVE FILLS. The lighter-site
   redesign (docs/superpowers/specs/2026-09-24-lighter-site-design.md §2,
   §7) removes panel fills AND card fills from all 99 pages. Its
   implementation only reached site.css's .svc/.mode/.comp/.step, so this
   stylesheet — loaded by 95 of the 99 pages — kept painting
   var(--panel-card)/var(--panel-soft) with 1px borders and 5px radii on
   .sv-industry/.sv-card/.sv-step/.sv-quote/.sv-faq-item/.sv-cross. Those
   sit INSIDE a .panel that now has no fill of its own, so interior pages
   were showing exactly what the redesign set out to delete: boxes floating
   on the photograph with no containing panel to justify them.

   Every one of them now takes the same treatment site.css gave .svc/.comp:
   no background, no box border, no radius — a 1px border-top hairline and
   a wider grid gap (30px 44px, matching .svc-grid/.comp-grid) do the
   separating, so interior and homepage cards read as one system. The two
   accent rules that were never fills stay: .sv-step keeps its 2px
   var(--signal) top rule (as site.css's .step does) and .sv-quote keeps
   its 3px var(--signal) left rule, which is the pull-quote's identity
   rather than a box.

   Constraints carried from the plan: no rule here sets ANY background on
   anything inside <main> — translucent or otherwise — so the fixed
   .page-bg photograph (z-index 0) shows through everywhere. Every grid
   uses minmax(min(N,100%),1fr), never bare minmax(N,1fr) — see the note on
   assets/freight.css's .spec-table/.engage-grid for why the bare form
   overflows on narrow viewports without tripping a document-level check.
   Accent colour is var(--signal)/var(--signal-deep)/var(--pacific) only. */

/* ---------- HUB: #industries ---------- */
.sv-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:30px 44px; margin-top:38px;
}
.sv-industry{
  display:block; background:none; border:0; border-top:1px solid var(--line);
  border-radius:0; padding:22px 0 0; text-decoration:none; color:var(--bone);
  transition:border-color .2s;
}
.sv-industry:hover{ border-top-color:var(--signal) }
.sv-industry h3{ font-size:19px; font-weight:750; letter-spacing:-.01em; font-variation-settings:'wdth' 108 }
.sv-industry p{ margin-top:10px; font-size:14px; color:var(--slate); line-height:1.6 }
.sv-industry ul{ margin-top:16px; list-style:none; display:grid; gap:8px }
.sv-industry li{ font-size:12.5px; color:var(--bone); opacity:.8; display:flex; gap:9px; align-items:flex-start }
.sv-industry li::before{ content:'—'; color:var(--signal); font-weight:700; flex-shrink:0 }

/* ---------- HUB: #modes "Best For" line ----------
   .modes/.mode/.m-tag are the shared site.css classes; this is the one
   addition the hub's copy needs — a second <p> per .mode carrying the
   "Best For:" line from the live-site outline, set off from the mode's own
   description with a hairline rather than just relying on paragraph gap. */
.mode-best{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; color:var(--slate);
}
.mode-best b{ color:var(--pacific); font-weight:600 }

/* ---------- VERTICAL: #deliver ---------- */
.sv-deliver{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:30px 44px; margin-top:38px;
}
.sv-card{
  background:none; border:0; border-top:1px solid var(--line); border-radius:0;
  padding:22px 0 0;
}
.sv-card h3{ font-size:18px; font-weight:750; letter-spacing:-.01em; font-variation-settings:'wdth' 108 }
.sv-card p{ margin-top:10px; font-size:14px; color:var(--slate); line-height:1.6 }
.sv-why{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; color:var(--slate); line-height:1.55;
}
.sv-why b{ color:var(--signal); font-weight:600 }

/* ---------- VERTICAL: #process (4-step) ----------
   Deliberately separate from site.css's .steps/.step, which is the hub's
   3-step "Three Steps. Zero Guesswork." block — the vertical pages run a
   different 4-step sequence, identical across all six verticals. */
.sv-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:30px 44px; margin-top:38px;
}
.sv-step{
  border-top:2px solid var(--signal); background:none;
  padding:22px 0 0; border-radius:0;
}
.sv-step .n{ font-family:var(--mono); font-size:12px; color:var(--signal); letter-spacing:.2em }
.sv-step h3{ margin-top:12px; font-size:17.5px; font-weight:750 }
.sv-step p{ margin-top:10px; font-size:13.5px; color:var(--slate); line-height:1.6 }

/* ---------- VERTICAL: #compliance ---------- */
.sv-compliance{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:30px 44px; margin-top:34px;
}
/* The children here are site.css's own .comp cards — checked in the
   rendered markup, not assumed — so they are already fill-free from the
   redesign and only the gap needed to come up to .comp-grid's 30px 44px.
   The three rules below duplicate .comp h3/.comp p exactly; they set no
   background and are left alone rather than deleted as part of a fill
   change. */
.sv-compliance h3{ font-size:15.5px; font-weight:700; display:flex; gap:10px; align-items:center }
.sv-compliance h3::before{ content:''; width:8px; height:8px; background:var(--signal); border-radius:1px; flex-shrink:0 }
.sv-compliance p{ margin-top:10px; font-size:13.5px; color:var(--slate); line-height:1.6 }
.sv-quote{
  margin-top:30px; padding:2px 0 2px 24px; max-width:70ch;
  background:none; border-left:3px solid var(--signal); border-radius:0;
  font-size:18.5px; font-weight:600; font-style:italic; color:var(--bone); line-height:1.45;
}

/* ---------- VERTICAL: #argument ---------- */
.sv-argument p{ margin-top:18px; font-size:15.5px; color:var(--bone); opacity:.9; max-width:66ch; line-height:1.7 }
.sv-argument .checks{ margin-top:26px; max-width:66ch }

/* ---------- VERTICAL: #faq ----------
   Native <details>/<summary> — accessible, keyboard-operable disclosure
   with no JS. .sv-faq-item is the <details> element itself. */
/* The 1px gap over a var(--line) container was the separator mechanism, so
   the fill could not just be dropped: transparent items would have let that
   line colour wash the entire list. Same rebuild as .spec-strip/.spec-table
   — no container fill, a rule above each item, spacing from padding. */
.sv-faq{
  display:grid; gap:0; background:none; border:0;
  border-radius:0; margin-top:34px;
}
.sv-faq-item{ background:none; border-top:1px solid var(--line); padding:20px 0 }
.sv-faq-item summary{
  cursor:pointer; list-style:none; font-size:15px; font-weight:700; color:var(--bone);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.sv-faq-item summary::-webkit-details-marker{ display:none }
.sv-faq-item summary::after{
  content:'+'; color:var(--signal); font-family:var(--mono); font-size:19px; line-height:1;
  flex-shrink:0; transition:transform .2s;
}
.sv-faq-item[open] summary::after{ transform:rotate(45deg) }
.sv-faq-item p{ margin-top:14px; font-size:14px; color:var(--slate); line-height:1.65; max-width:70ch }

/* ---------- VERTICAL: #cross ---------- */
.sv-cross{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:26px 44px; margin-top:34px;
}
.sv-cross a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; border-top:1px solid var(--line); border-radius:0;
  padding:18px 0 0; text-decoration:none; color:var(--bone); font-weight:600; font-size:14.5px;
  transition:border-color .2s, color .2s;
}
.sv-cross a:hover{ border-top-color:var(--signal); color:var(--signal) }
.sv-cross a::after{ content:'→'; font-family:var(--mono); color:var(--signal); flex-shrink:0 }

@media (max-width:560px){
  .sv-quote{ padding:2px 0 2px 18px; font-size:17px }
}

/* ---------- BREADCRUMBS ----------
   Spec §1.5 asks for the small-label typography already used for section
   eyebrows, so this borrows .eyebrow's mono/uppercase/letter-spacing values
   rather than inventing a second label style — but in --slate, not --signal,
   because a breadcrumb is orientation furniture and must not compete with the
   accent the eyebrows use to open a section. */
.crumbs{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--slate);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:22px;
}
.crumbs a{ color:var(--slate); text-decoration:none; opacity:.85 }
.crumbs a:hover{ color:var(--signal); opacity:1 }
.crumbs span:last-child{ color:var(--bone); opacity:.6 }
.crumb-sep{ opacity:.35 }

/* ---------- CITY LINK GRID ----------
   Spec §0.5: clean, well-spaced text-link grids grouped under region labels,
   never a wall of links. Deliberately reuses the footer .f-grid metrics —
   same column sizing, same 11px mono label, same 13.5px link at .75 opacity
   rising to --signal — so a region page's city list reads as the same
   component family the footer already established.
   minmax(min(...)) per the project's grid rule: a bare minmax overflows narrow
   viewports. */
.city-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:32px; margin-top:28px;
}
.city-grid h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--slate); text-transform:uppercase; margin-bottom:16px;
}
.city-grid ul{ list-style:none; display:grid; gap:9px }
.city-grid a{ color:var(--bone); opacity:.75; text-decoration:none; font-size:13.5px }
.city-grid a:hover{ opacity:1; color:var(--signal) }