/* CODEX / 2026-10-14: independent construction-planning family service. */
.family-teaser { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; padding:26px 30px; margin-top:36px; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.family-teaser-tag { font-size:11px; letter-spacing:.12em; color:var(--brass); }
.family-teaser h2 { font-family:var(--sans); font-size:20px; line-height:1.5; margin:0 0 6px; }
.family-teaser p { font-size:14px; line-height:1.8; margin:0; }
.family-teaser a { flex-shrink:0; font-size:14px; border-bottom:1px solid currentColor; padding:8px 0; }
.family-page { --family-accent:#a4dfcb; }
.family-page main { padding-top:var(--header-h); }
.family-page .family-section { padding:76px 0; }
.family-page .family-hero { padding:36px 0 76px; }
.family-breadcrumb { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; margin-bottom:36px; color:#ccd6d6; }
.family-breadcrumb a { border-bottom:1px solid currentColor; }
.family-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:64px; align-items:center; }
.family-page h1 { font-size:clamp(32px,3.2vw,48px); line-height:1.65; margin:18px 0 24px; letter-spacing:.02em; }
.family-page h2 { font-size:clamp(25px,2.5vw,36px); line-height:1.7; }
.family-page h3 { font-size:23px; line-height:1.65; }
.family-page .family-lead { font-size:17px; line-height:2; margin:0 0 22px; }
.family-page .family-intro-note { font-size:14px; color:#c6d6d8; margin:24px 0 0; }
.family-page .family-actions { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; margin-top:28px; }
.family-page .family-actions .btn { border-radius:2px; }
.family-page .family-link { font-size:14px; border-bottom:1px solid currentColor; padding:8px 0; }
.family-page :is(a,button,input):focus-visible, .family-teaser a:focus-visible { outline:3px solid #86d5c0; outline-offset:5px; }
.family-demo { margin:0; padding:25px; background:#e9eee9; color:#173737; border:1px solid #bacac1; }
.family-demo-top { display:flex; gap:16px; justify-content:space-between; align-items:baseline; font-size:11px; letter-spacing:.1em; }
.family-demo-top strong { font-size:13px; letter-spacing:.02em; font-weight:500; }
.family-demo svg { display:block; width:100%; height:auto; margin:18px 0 4px; overflow:visible; }
.family-demo svg text { font-family:var(--sans); font-size:15px; letter-spacing:0; fill:#284b47; }
.family-demo svg .diagram-label { font-size:13px; }
.family-demo figcaption { font-size:13px; line-height:1.85; margin-top:18px; }
.family-demo-controls { border-top:1px solid #b8c9c1; padding-top:20px; }
.family-demo-controls[hidden] { display:none; }
.family-origin-options { border:0; padding:0; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:8px; }
.family-origin-options legend { font-size:12px; margin:0 0 10px; }
.family-origin-options button { padding:9px 15px; border:1px solid #829c92; background:transparent; color:#173737; font:inherit; font-size:13px; cursor:pointer; min-height:44px; }
.family-origin-options button[aria-pressed="true"] { background:#173737; border-color:#173737; color:#fff; }
.family-width-label { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:13px; }
.family-width-label output { font-size:17px; font-variant-numeric:tabular-nums; }
.family-demo input[type="range"] { accent-color:#1c6655; width:100%; min-height:34px; padding:0; margin:8px 0 0; border:0; background:transparent; cursor:ew-resize; }
.family-demo .family-demo-note { font-size:11px; margin:8px 0 0; color:#49635c; line-height:1.7; }
.family-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); padding-top:40px; gap:40px; }
.family-benefits article { min-width:0; }
.family-benefits .family-number { font-family:var(--en); font-size:34px; color:var(--family-accent); display:block; margin-bottom:12px; }
.family-benefits h2 { font-size:25px; margin-bottom:16px; }
.family-benefits p { font-size:15px; line-height:2; margin:0; }
.family-page .family-brief { background:#edf0ea; color:#173331; }
.family-brief .kicker, .family-brief h2, .family-brief h3 { color:#173331; }
.family-brief .kicker::before { background:#527c6a; }
.family-brief-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:start; }
.family-brief-copy > p:not(.kicker) { font-size:16px; line-height:2; margin-top:22px; }
.family-brief-copy > p.family-brief-emphasis { font-family:var(--serif); font-size:22px; color:#2d6352; }
.family-spec { margin:0; border-top:1px solid #afc0b5; }
.family-spec > div { padding:22px 0; border-bottom:1px solid #afc0b5; display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px; }
.family-spec dt { font-size:17px; font-weight:700; grid-column:2; }
.family-spec dt span { float:left; margin-left:-50px; font:17px var(--en); color:#5a7b6b; padding-top:6px; }
.family-spec dd { grid-column:2; margin:8px 0 0; font-size:14px; line-height:1.9; }
.family-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:32px 0 0; margin:44px 0 0; gap:32px; list-style:none; border-top:1px solid #afc0b5; }
.family-steps strong { display:block; font-size:16px; font-weight:700; }
.family-steps strong span { display:block; margin-bottom:10px; font-size:11px; letter-spacing:.12em; color:#4c695d; }
.family-steps p { font-size:14px; line-height:1.9; margin:12px 0 0; }
.family-request { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:60px; }
.family-request p { font-size:15px; line-height:2; margin:20px 0 0; }
.family-request .btn { width:100%; }
.family-request small { display:block; font-size:12px; line-height:1.9; color:#c6d6d8; margin-top:18px; }
.family-page #creation-brief { scroll-margin-top:calc(var(--header-h) + 20px); }
@media(max-width:1000px) {
  .family-hero-grid, .family-brief-grid { gap:36px; }
  .family-page h1 { font-size:34px; }
  .family-demo { padding:18px; }
  .family-teaser { grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; }
  .family-teaser-tag { grid-column:1/-1; }
}
@media(max-width:760px) {
  .family-page .family-section { padding:48px 0; }
  .family-page .family-hero { padding:28px 0 44px; }
  .family-hero-grid, .family-brief-grid, .family-request { grid-template-columns:1fr; gap:32px; }
  .family-page h1 { font-size:clamp(27px,6.9vw,38px); }
  .family-page .family-lead { font-size:16px; }
  .family-benefits, .family-steps { grid-template-columns:1fr; gap:28px; }
  .family-benefits { padding-top:28px; }
  .family-benefits article { display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 18px; }
  .family-benefits .family-number { grid-row:1/3; }
  .family-benefits h2 { font-size:23px; margin-bottom:10px; }
  .family-benefits p { grid-column:2; }
  .family-demo-top { flex-wrap:wrap; gap:4px; }
  .family-demo svg text { font-size:24px; }
  .family-demo svg .diagram-label { font-size:21px; }
  .family-teaser { padding:22px; grid-template-columns:1fr; gap:14px; }
  .family-teaser a { justify-self:start; }
  .family-teaser h2 { font-size:19px; }
}
@media print { .family-demo-controls { display:none; } .family-page .family-section { break-inside:avoid; } }

/* CODEX / 2026-10-14: concise, readable service questions; native HTML works without JS. */
.family-page .family-questions { padding-bottom:0; }
.family-questions h2 { margin-bottom:28px; }
.family-questions-list { border-top:1px solid var(--line); }
.family-questions details { padding:20px 0; border-bottom:1px solid var(--line); }
.family-questions summary { font-size:16px; font-weight:500; line-height:1.9; cursor:pointer; color:var(--white); }
.family-questions summary:focus-visible { outline:3px solid #86d5c0; outline-offset:5px; }
.family-questions details p { font-size:15px; line-height:2; max-width:65em; margin:16px 0 2px; color:#d1ddde; }
@media(max-width:760px) { .family-questions h2 { font-size:24px; } .family-questions summary { font-size:15px; } }