.cat-covers, .cat-markets, .cat-steps, .cat-faq { padding: 72px 0; }
.cat-head { max-width: 720px; margin-bottom: 32px; }
.cat-head h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; color: var(--text); }
.cat-head p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cat-card { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--control-surface); }
.cat-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.cat-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.cat-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cat-route { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .2s; }
.cat-route-media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }   /* owner, 2026-09-16: every market card carries its market image */
.cat-route-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-route-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 24px; flex: 1; }
.cat-route:hover { border-color: var(--line-strong); }
.cat-route:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.cat-route h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.cat-route p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.cat-route .cat-route-cta { margin-top: auto; padding-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.cat-route .cat-route-cta svg { width: 16px; height: 16px; }
.cat-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cat-step { padding-top: 16px; border-top: 1px solid var(--line-strong); }
.cat-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.cat-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cat-covers, .cat-markets, .cat-steps, .cat-faq { padding: 56px 0; } .cat-grid, .cat-routes, .cat-steps-list { grid-template-columns: 1fr; } }


.family-services,.family-consider{padding:72px 0}
.family-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.family-service-grid.solo{grid-template-columns:1fr}
.family-service-grid.solo .family-service{grid-row:auto;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto}
.family-service-grid.solo .family-card-media{grid-column:1;grid-row:1/3}
.family-service-grid.solo .family-card-body,.family-service-grid.solo .family-links{grid-column:2}
.family-service-grid.solo .family-card-media{aspect-ratio:auto;min-height:320px;height:100%}
.cat-routes.family-markets.solo{grid-template-columns:1fr}
.family-markets.solo .cat-route{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.family-markets.solo .cat-route-media{aspect-ratio:auto;min-height:300px;height:100%}
.family-service{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface)}   /* 2026-09-19: media / copy / chips are three SUBGRID rows shared by every card in a grid row, so the chip block starts and ends at the same height on neighbouring cards whatever the copy length or chip count */
.family-card-media{margin:0;aspect-ratio:16/8;overflow:hidden;background:var(--surface-2)}
.family-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.family-card-body{padding:28px;display:flex;flex-direction:column;flex:1}
.family-service .family-links{margin:0;padding:0 28px 28px;align-self:start}
.family-service h3{font-size:23px;line-height:1.3;letter-spacing:-.015em;font-weight:500;margin:0 0 12px}
.family-service p,.family-consider p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 18px;max-width:65ch}
.family-links{display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:center;gap:8px;margin-top:18px}   /* the ONE chip-layout rule: left-aligned, 8px gap both ways, wraps to the left, never centred or stretched */
.is-link{position:relative;transition:border-color 140ms ease,box-shadow 140ms ease}
.is-link:hover{border-color:var(--line-strong)}
.is-link .card-link{color:inherit;text-decoration:none}
.is-link .card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.is-link .card-link:focus-visible{outline:none}
.is-link .card-link:focus-visible::after{outline:2px solid var(--focus-ring,var(--text));outline-offset:-3px}
.is-link .family-links{position:relative;z-index:2;pointer-events:none}
.is-link .family-chip{pointer-events:auto}
.is-link .family-card-media img{transition:transform 320ms ease}
.is-link:hover .family-card-media img{transform:scale(1.015)}
@media(prefers-reduced-motion:reduce){.is-link,.is-link .family-card-media img{transition:none}.is-link:hover .family-card-media img{transform:none}}
.family-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:13.5px;line-height:1.3;font-weight:500;color:var(--text);text-decoration:none;background:transparent;transition:border-color 140ms ease,color 140ms ease}
.family-chip svg{width:13px;height:13px;color:var(--muted)}
.family-chip .mkt-flag--inline{display:inline-flex;margin:0}
.family-chip:hover{border-color:var(--mineral);color:var(--mineral)}
.family-chip:hover svg{color:currentColor}
.family-chip:focus-visible{outline:2px solid var(--focus-ring,var(--text));outline-offset:3px}
.family-offers{margin:0;padding:0;list-style:none;color:var(--muted);font-size:15px;line-height:1.6}
.family-offers li{padding:4px 0}
.family-consider{border-block:1px solid var(--line)}
.family-guidance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.family-guidance article{border-top:1px solid var(--line-strong);padding-top:22px}
.family-guidance h3{font-size:19px;font-weight:500;line-height:1.35;margin:0 0 14px}
.family-guidance article.has-media{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);padding:0}
.family-guidance article.has-media .family-card-media{aspect-ratio:4/3}
.family-guidance article.has-media .family-card-body{padding:24px}
.family-guidance article.has-media p{margin-bottom:0}
.cat-route.family-market{padding-bottom:0}
.cat-route-media-link{display:block;width:100%;height:100%}
.cat-route-media-link:focus-visible{outline:2px solid var(--focus-ring,var(--text));outline-offset:-3px}
.family-market h3{display:flex;align-items:center;gap:10px}   /* 2026-09-18 (owner): the country card heading carries its flag */
.family-market h3 .mkt-flag--inline{display:inline-flex;margin:0}
.family-market .family-offers{margin:4px 0 8px}
.family-market .cat-route-cta{color:var(--text);text-decoration:none}
.cat-routes.family-markets{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.family-process .cat-step{padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.family-process .family-card-body{padding:24px}
.family-process .family-card-media{aspect-ratio:4/3}
/* ===== layout "editorial" (2026-09-19, corporate.html only — the canary for the service-family pages). Four section ROLES with
   four silhouettes: catalogue grid · editorial rows · country directory · connected sequence. Every rule hangs off a
   --v2 modifier the renderer adds only when the page declares `"layout": "editorial"`; siblings render exactly as before.
   A sibling opts in by declaring the same key — nothing here is keyed to a page name. ===== */
.family-services--v2 .family-card-media{aspect-ratio:2/1}
.family-services--v2 .family-card-body{padding:24px 24px 8px}
.family-services--v2 .family-service .family-links{padding:0 24px 24px}
.family-services--v2 .family-service h3{margin-bottom:10px}
.family-services--v2 .family-service p{margin-bottom:14px}
.family-consider--v2 .fam-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(32px,5vw,72px);align-items:start}
.family-consider--v2 .cat-head{margin-bottom:0}
.family-consider--v2 .fam-editorial{align-items:stretch}
.family-consider--v2 .fam-editorial-side{display:flex;flex-direction:column}
/* owner 2026-09-19: the first row starts level with the TOP of the photograph (not with the heading) — the side wrapper
   dissolves into the grid: heading in row 1, photograph + rows share row 2, so the rows set the photograph's height */
@media(min-width:901px){.family-consider--v2 .fam-editorial{grid-template-rows:auto auto;row-gap:24px}
.family-consider--v2 .fam-editorial-side{display:contents}
.family-consider--v2 .fam-editorial-side > .cat-head{grid-column:1;grid-row:1}
.family-consider--v2 .fam-editorial .fam-editorial-side > .fam-editorial-media{grid-column:1;grid-row:2;margin:0}
.family-consider--v2 .fam-rows{grid-column:2;grid-row:2}}
/* owner 2026-09-19: the photograph runs from under the heading to the bottom of the last row — its height comes from the rows, never the image */
.family-consider--v2 .fam-editorial-media{position:relative;flex:1 1 0;min-height:240px;margin:24px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.family-consider--v2 .fam-editorial-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.family-consider--v2 .fam-editorial-media{flex:none;min-height:0;aspect-ratio:16/9;margin-top:20px}}
.family-consider--v2 .fam-rows{display:grid}
.family-consider--v2 .fam-rows article{padding:26px 0;border-top:1px solid var(--line)}
.family-consider--v2 .fam-rows article:first-child{padding-top:0;border-top:0}
.family-consider--v2 .fam-rows article:last-child{padding-bottom:0}
.family-consider--v2 .fam-rows h3{font-size:19px;font-weight:500;line-height:1.35;margin:0 0 10px;color:var(--text)}
.family-consider--v2 .fam-rows p{margin:0;max-width:62ch}
.family-consider--v2 .fam-rows .family-links{margin-top:16px}
/* owner 2026-09-19: these chips take the service icons and the country list's type (15px, regular) */
.family-consider--v2 .family-chip{font-size:15px;font-weight:400;gap:8px;padding:6px 0;border:0;background:transparent;box-shadow:none;border-radius:0}
.family-consider--v2 .family-links{column-gap:26px}
.family-consider--v2 .family-chip:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.family-chip-ico{display:inline-flex;flex:none;width:18px;height:18px;color:var(--muted)}
.family-chip-ico svg{width:100%;height:100%}
.family-chip:hover .family-chip-ico{color:currentColor}
.cat-markets--v2 .fam-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-markets--v2 .fam-country{display:flex;flex-direction:column;padding:4px clamp(24px,4vw,56px) 4px 0}
.cat-markets--v2 .fam-country + .fam-country{padding-left:clamp(24px,4vw,56px);padding-right:0;border-left:1px solid var(--line)}
.cat-markets--v2 .fam-country h3{margin:0 0 12px;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.015em;color:var(--text)}
.cat-markets--v2 .fam-country h3 .mkt-flag--inline{display:inline-flex;margin:0}
.cat-markets--v2 .fam-country p{margin:0 0 18px;font-size:16px;line-height:1.65;color:var(--muted);max-width:60ch}
.cat-markets--v2 .fam-linklist{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.cat-markets--v2 .fam-linklist li{border-bottom:1px solid var(--line)}
.cat-markets--v2 .fam-linklist a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:15px;line-height:1.4;color:var(--text);text-decoration:none}
.cat-markets--v2 .fam-related-h{margin:20px 0 6px;font-size:14px;font-weight:500;line-height:1.4;color:var(--muted)}
.cat-markets--v2 .fam-linklist--related a{font-size:14.5px;padding:10px 0}
.cat-markets--v2 .fam-li-lab{display:inline-flex;align-items:center;gap:12px;min-width:0}
.cat-markets--v2 .fam-li-ico{display:inline-flex;flex:none;width:20px;height:20px;color:var(--muted)}
.cat-markets--v2 .fam-li-ico svg{width:100%;height:100%}
.cat-markets--v2 .fam-linklist a:hover .fam-li-ico{color:currentColor}
.cat-markets--v2 .fam-linklist a > svg{width:13px;height:13px;flex:none;color:var(--muted)}
.cat-markets--v2 .fam-linklist a:hover{color:var(--mineral)}
.cat-markets--v2 .fam-linklist a:hover svg{color:currentColor}
.cat-markets--v2 .fam-linklist a:focus-visible,.cat-markets--v2 .fam-country-link:focus-visible{outline:2px solid var(--focus-ring,var(--text));outline-offset:3px}
.cat-markets--v2 .fam-country-media{margin:0 0 22px;aspect-ratio:5/2;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.cat-markets--v2 .fam-country-media a{display:block;width:100%;height:100%}
.cat-markets--v2 .fam-country-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cat-markets--v2 .fam-country-media a:hover img{transform:scale(1.02)}
@media(prefers-reduced-motion:reduce){.cat-markets--v2 .fam-country-media img{transition:none}.cat-markets--v2 .fam-country-media a:hover img{transform:none}}
.cat-markets--v2 .fam-country-link{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;border-radius:4px}
.cat-markets--v2 .fam-country-link svg{width:15px;height:15px;flex:none;color:var(--muted);transition:transform .15s ease}
.cat-markets--v2 .fam-country-link:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.cat-markets--v2 .fam-country-link:hover svg{color:currentColor;transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.cat-markets--v2 .fam-country-link svg{transition:none}.cat-markets--v2 .fam-country-link:hover svg{transform:none}}
.cat-markets--v2 .fam-linklist{margin-bottom:0}
/* Client experiences — open editorial quotation, no cards, no carousel. Renders ONLY from approved records (see experiences()). */
.family-people{padding:64px 0;border-top:1px solid var(--line)}
.family-people .fam-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.fam-person{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:start}
.fam-person img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.fam-person h3{margin:0;font-size:18px;font-weight:500}.fam-person h3 a{color:var(--text);text-decoration:none}.fam-person h3 a:hover{text-decoration:underline}
.fam-person .fam-person-role{margin:2px 0 6px;font-size:14.5px;font-weight:500;color:var(--text)}
.fam-person p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.family-voices{padding:64px 0;border-top:1px solid var(--line)}
.family-voices .fam-voices{display:grid;gap:40px}
.family-voices .fam-voices.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px)}
.family-voices figure{margin:0;max-width:820px;padding-left:24px;border-left:2px solid var(--line-strong)}
.family-voices blockquote{margin:0;font-size:clamp(20px,2.1vw,26px);line-height:1.45;letter-spacing:-.01em;color:var(--text)}
.family-voices .fam-voices.two blockquote{font-size:19px}
.family-voices blockquote p{margin:0}
.family-voices figcaption{margin-top:18px;font-size:15px;line-height:1.5;color:var(--muted)}
.family-voices figcaption strong{display:block;font-weight:600;color:var(--text)}
@media(max-width:720px){.family-voices{padding:48px 0}.family-voices .fam-voices.two{grid-template-columns:1fr}.family-voices figure{padding-left:18px}}
.family-why{padding:64px 0;border-block:1px solid var(--line);background:var(--bg-2)}
.family-why .cat-head{margin-bottom:28px}
.family-why .fam-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.family-why h3{font-size:18px;font-weight:500;line-height:1.35;margin:0 0 8px;color:var(--text)}
.family-why p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.family-process--v2 .fam-proc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(32px,5vw,72px);align-items:stretch}
/* left column = one stretched flex column: heading, the photograph taking whatever height the steps leave, the CTA at the bottom */
.family-process--v2 .fam-proc-side{display:flex;flex-direction:column;min-width:0}
.family-process--v2 .fam-proc-head .cat-head{margin-bottom:24px}
.family-process--v2 .fam-proc-cta{margin-top:auto}   /* owner: the button's bottom meets the last line of step 03 */
/* owner 2026-09-19: an image in the gap between heading and CTA — sized by the row the steps create, never adding height */
.family-process--v2 .fam-proc-media{position:relative;flex:1 1 0;min-height:0;margin:0 0 24px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.family-process--v2 .fam-proc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.family-process--v2 .fam-steps{list-style:none;margin:0;padding:0}
/* the referral stepper's geometry, copied from referral.html's .vstep rules (the page-carried half of the component; the
   token/connector/hover half is theme.css › .vstep). Last step has no bottom padding so the CTA meets its last line. */
.family-process--v2 .vstep{list-style:none;padding:0;margin:0;display:grid;gap:0;position:relative}
.family-process--v2 .vstep-item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;padding:18px 0 28px 0}
.family-process--v2 .vstep-item:first-child{padding-top:0}
.family-process--v2 .vstep-item:first-child:not(:last-child)::before{top:28px;bottom:-46px}
.family-process--v2 .vstep-item:last-child{padding-bottom:0}
.family-process--v2 .vstep-n{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid;font-size:20px;font-weight:500;letter-spacing:.01em}
.family-process--v2 .vstep-body h3{margin:12px 0 8px;font-size:22px;font-weight:500;line-height:1.3;color:var(--text)}
.family-process--v2 .vstep-body p{color:var(--muted);font-size:15.5px;line-height:1.55;margin:0}
.family-process--v2 .fam-proc-cta .btn svg{width:16px;height:16px}
/* Why — dark band: the section sets its own foreground pairing (theme.css: "a surface variant always sets its own foreground") */
.family-why--dark{--text:var(--text-on-dark);--muted:var(--muted-on-dark);--faint:var(--faint-on-dark);--line:var(--line-on-dark);--line-soft:var(--line-soft-on-dark);--line-strong:var(--line-strong-on-dark);background:var(--surface-dark);color:var(--text);border-block:0;padding:72px 0}
.family-why--dark .cat-head h2{color:var(--text)}
.family-why--dark .fam-why-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:40px}
.family-why--dark .fam-why-top .cat-head{margin-bottom:0}
.family-why--dark .fam-why-grid{gap:0}
.family-why--dark .fam-why-grid > article{padding:0 clamp(20px,3vw,40px)}
.family-why--dark .fam-why-grid > article:first-child{padding-left:0}
.family-why--dark .fam-why-grid > article:last-child{padding-right:0}
.family-why--dark .fam-why-grid > article + article{border-left:1px solid var(--line-on-dark)}
.family-why--dark .fam-why-grid > article{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-content:start}
.family-why--dark .fam-why-ico{grid-column:1;grid-row:1;width:24px;height:24px;margin-top:2px;color:var(--muted-on-dark)}
.family-why--dark .fam-why-ico svg{display:block;width:100%;height:100%}
.family-why--dark h3{grid-column:2;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--text);margin:0 0 10px}
.family-why--dark p{grid-column:2;color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
:root .family-why--dark .fam-why-cta{grid-column:2;justify-self:start;margin-top:22px;color:var(--text-on-dark);border-color:var(--line-strong-on-dark)}   /* owner 2026-09-26: the shared .btn.btn-ghost geometry; only the on-dark colours are set here */   /* 22px: the theme has no spacing tokens; midpoint of the brief's 20–24px */
:root .family-why--dark .fam-why-cta:hover{border-color:var(--text-on-dark)}
.family-why--dark .fam-why-cta:focus-visible{outline:2px solid var(--text-on-dark);outline-offset:3px}
/* owner 2026-09-26 (SON-4767): on desktop the services panel's detail card reaches as low as the service list — the card
   stretches to the list's height and the photograph takes the extra room (tabs mode only; the accordion is unchanged) */
.family-services--panel .ssp-panel[data-mode="tabs"]{align-items:stretch}
.family-services--panel .ssp-panel[data-mode="tabs"] .ssp-panel-list{align-self:start}   /* the list sets the height; it never stretches */
.family-services--panel .ssp-panel[data-mode="tabs"] .ssp-pane{display:flex;flex-direction:column}
.family-services--panel .ssp-panel[data-mode="tabs"] .ssp-media{position:relative;flex:1 1 0;aspect-ratio:auto;min-height:160px}
.family-services--panel .ssp-panel[data-mode="tabs"] .ssp-media-link{position:absolute;inset:0}   /* the photograph fills the room, never sizes it */
@media(max-width:900px){.family-process--v2 .fam-proc{grid-template-columns:1fr;row-gap:0}.family-process--v2 .fam-proc-side{display:contents}.family-process--v2 .fam-proc-head{order:1}.family-process--v2 .fam-steps{order:2}.family-process--v2 .fam-proc-cta{order:3;margin-top:32px}.family-process--v2 .fam-proc-media{display:none}}
@media(max-width:900px){.family-consider--v2 .fam-editorial{grid-template-columns:1fr;row-gap:24px}}
@media(max-width:720px){.cat-markets--v2 .fam-directory{grid-template-columns:1fr}.cat-markets--v2 .fam-country{padding:0 0 28px}.cat-markets--v2 .fam-country + .fam-country{padding:28px 0 0;border-left:0;border-top:1px solid var(--line)}.family-why{padding:48px 0}.family-why .fam-why-grid{grid-template-columns:1fr;gap:24px}.family-why--dark .fam-why-grid{gap:0}.family-why--dark .fam-why-grid > article{padding:22px 0}.family-why--dark h3{font-size:19px}.family-why--dark .fam-why-grid > article:first-child{padding-top:0}.family-why--dark .fam-why-grid > article + article{border-left:0;border-top:1px solid var(--line-on-dark)}.family-why--dark{padding:56px 0}}
@media(max-width:720px){.family-services,.family-consider{padding:48px 0}.family-service-grid,.family-guidance{grid-template-columns:1fr;gap:20px}.family-service-grid.solo .family-service,.family-markets.solo .cat-route{grid-template-columns:1fr;grid-template-rows:none}.family-service-grid.solo .family-card-media,.family-service-grid.solo .family-card-body,.family-service-grid.solo .family-links{grid-column:1;grid-row:auto}.family-service-grid.solo .family-card-media,.family-markets.solo .cat-route-media{aspect-ratio:16/9;min-height:0;height:auto}.family-card-body{padding:22px}.family-links{gap:8px}}

/* Service opening system — SINGLE SOURCE. tools/build-service-spine.py writes this file into <head> of every consumer
   and each component into its host section (service-spine.json). One family of quiet, data-numbered primitives for
   sections 2 and 3 of the compliance service pages (2026-09-08, owner brief via advisor), replacing the generic dot-led
   core-list those sections shared:
     .ssp-rail       ComplianceSequence / RenewalControlRail — one continuous vertical line, small two-digit markers
     .ssp-rail--cadence  CadenceTimeline — the same rail; the period label (small uppercase mono) is the entry heading, a
                     small tick marks the line
     .ssp-register   NumberedRiskRegister — small index, title / body, quiet horizontal rules, no cards, no alarm colour
     .ssp-sheet      RequirementSheet — one framed two-column reference sheet; trigger left, explanation right
     .ssp-panel      ConditionPanel — every condition listed with an index on the left, the selected condition's approved
                     copy on a warm paper surface on the right (tabs: hover previews on fine pointers, click/keyboard commits)
     .ssp-panel--media  VisualConditionPanel — the same panel, with a supporting image: each item carries an approved
                     project image (declared in service-spine.json with alt + per-viewport focal positions), rendered
                     as a shallow strip across the top of the active detail panel only — tabs stay text-only (number +
                     title). The selected number, title and copy are the panel's subject; the strip is a 4:1 band on
                     desktop (16:7, capped, when the panel stacks) so the text block carries the visual weight and the
                     panel height follows content (owner brief 2026-09-09: the 16:9 band outweighed the copy). The
                     tabpanel image carries the alt. Focal points ride --op-d / --op-m custom props.
   Numbers come from order. No route-specific rules, no nth-child, no per-page overrides. Tokens only.
   Dark is the base; light hangs off :root[data-theme="light"] through the theme tokens. */
.ssp { --ssp-marker: 26px; --ssp-gap: 18px; }
.ssp-idx { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; line-height: 1; color: var(--muted); }

/* rail */
.ssp-rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; max-width: 860px; }
.ssp-rail::before { content: ""; position: absolute; left: calc(var(--ssp-marker) / 2); top: 13px; bottom: 13px; width: 1px; background: color-mix(in srgb, var(--text) 24%, transparent); }
.ssp-rail > li { position: relative; display: grid; grid-template-columns: var(--ssp-marker) minmax(0, 1fr); column-gap: var(--ssp-gap); align-items: start; padding: 0 0 26px; }
.ssp-rail > li:last-child { padding-bottom: 0; }
.ssp-node { position: relative; z-index: 1; box-sizing: border-box; width: var(--ssp-marker); height: var(--ssp-marker); border-radius: 50%; border: 1px solid var(--text); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; line-height: 1; color: var(--text); }
.ssp-rail h3 { margin: 0; padding-top: 4px; font-size: 15.5px; line-height: 1.35; letter-spacing: -.005em; font-weight: 500; color: var(--text); }
.ssp-rail p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 62ch; }
.ssp-rail--cadence .ssp-node { width: 9px; height: 9px; margin: 9px 0 0 calc((var(--ssp-marker) - 9px) / 2); border: 0; background: var(--text); }
.ssp-rail--cadence h3 { padding-top: 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--text); }
.ssp-rail--cadence p { margin-top: 6px; font-size: 14.5px; color: var(--text); }

/* risk register */
.ssp-register { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.ssp-register > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.ssp-register > li:first-child { border-top: 0; padding-top: 0; }
.ssp-register > li:last-child { padding-bottom: 0; }
.ssp-register .ssp-idx { padding-top: 5px; }
.ssp-register h3 { margin: 0; font-size: 15.5px; line-height: 1.35; letter-spacing: -.005em; font-weight: 500; color: var(--text); }
.ssp-register p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 64ch; }

/* requirement sheet */
.ssp-sheet { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 26px; }
.ssp-sheet > div { display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 1fr); gap: 6px 36px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.ssp-sheet > div:first-child { border-top: 0; }
.ssp-sheet dt { margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: -.005em; font-weight: 500; color: var(--text); }
.ssp-sheet dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* condition panel */
.ssp-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.ssp-panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ssp-tab { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.35; letter-spacing: -.005em; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.ssp-tab .ssp-idx { line-height: inherit; }
.ssp-tab:hover { background: var(--control-surface); }
.ssp-tab[aria-selected="true"], .ssp-tab.is-preview { background: var(--surface-tinted); border-color: var(--line-soft); }
.ssp-tab:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 2px; }
/* Stable detail stage (2026-09-10, owner brief: switching tabs must never move the section below).
   Every tabpanel occupies the SAME grid cell, so the stage is always as tall as the tallest panel at the
   current viewport — pure layout, re-evaluated by the browser on font load, resize and reflow. Inactive
   panels keep the `hidden` attribute but stay in layout as visibility:hidden: not painted, not focusable,
   not in the accessibility tree. No measured heights, no min-height reserve, no per-tab spacers. */
.ssp-detail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-tinted); padding: 26px 28px; }
.ssp-detail > div { grid-area: 1 / 1; min-width: 0; transition: opacity .2s ease; }
.ssp-detail > div[hidden] { display: block; visibility: hidden; }
.ssp-detail h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 500; color: var(--text); }
.ssp-detail p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 56ch; }

/* visual condition panel — supporting-image variant. Tabs stay text-only (number + title, 2026-09-08
   owner brief): the item's single image lives in the active detail panel and nowhere else, as a shallow
   4:1 strip (2026-09-09) so the selected copy, not the photograph, leads the panel. */
.ssp-media { margin: -26px -28px 20px; aspect-ratio: 4 / 1; overflow: hidden; border-bottom: 1px solid var(--line-soft); border-radius: 13px 13px 0 0; }
.ssp-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op-d, 50% 50%); }
/* SequenceWithSideMedia — one contained editorial figure beside a linear component (2026-09-08).
   The left sequence sets the natural height; the figure is capped and never a background. */
.ssp-sidebody { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr); column-gap: clamp(40px, 5vw, 72px); align-items: stretch; }
.ssp-sidebody__seq { min-width: 0; }
.ssp-sidemedia { position: relative; align-self: stretch; margin: 0; height: auto; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-tinted); }
.ssp-sidemedia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--sm-d, 50% 50%); }
@media (max-width: 1023px) {
  .ssp-sidebody { grid-template-columns: 1fr; row-gap: 28px; }
  .ssp-sidemedia { align-self: auto; width: 100%; aspect-ratio: 16 / 9; height: auto; }
  .ssp-sidemedia img { object-position: var(--sm-m, var(--sm-d, 50% 50%)); }
}
@media (max-width: 900px) {
  .ssp-panel { grid-template-columns: 1fr; gap: 16px; }
  .ssp-sheet { padding: 2px 18px; }
  .ssp-sheet > div { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; }
  .ssp-media img { object-position: var(--op-m, var(--op-d, 50% 50%)); }
  .ssp-media { aspect-ratio: 16 / 7; max-height: 168px; }   /* stacked: never taller than the desktop strip */
}
@media (prefers-reduced-motion: reduce) { .ssp-tab, .ssp-detail > div { transition: none; } }

/* In-copy links (2026-09-26, owner, SON-4767): a cross-link inside a spine section's lede or an item's copy
   ("Usually set up with company formation, …", a source citation) reads as a link — underlined, in the text colour,
   never a button and never colour-only. Scoped to spine sections so no other block's links change. */
.svc-core .sec-head .lede a, .ssp a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent); }
.svc-core .sec-head .lede a:hover, .ssp a:hover { text-decoration-color: var(--text); }

/* SuitabilitySplit on a service page (kind suitability-split, 2026-09-26, owner): the section heading sits flush left like
   every other svc-core section on the page, not centred as on the free-zone, bank and emirate consumers. */
.dub-verdict.ssp-split .dub-verdict-head { text-align: left; max-width: 860px; margin-left: 0; margin-right: 0; }
/* ConditionPanel — RESPONSIVE variant (2026-09-19, owner brief; corporate.html first). Opt-in only: every rule hangs off
   .ssp-panel--responsive / .ssp-panel--plain, which the reference panel never carries, so the compliance pages that use
   _shared/service-spine.css are untouched. Markup and behaviour: tools/_condition_panel.py › panel_responsive().
   The script sets data-mode: "tabs" (> 900px, the reference two-column panel), "accordion" (<= 900px) and leaves
   "static" when JavaScript does not run — every item expanded as a plain list. Tokens only. */

/* optional numbering: no index column */
.ssp-panel--plain .ssp-tab { grid-template-columns: minmax(0, 1fr); }
/* owner 2026-09-19: unnumbered service choices read at a size that holds its own beside the detail card */
.ssp-panel--plain .ssp-panel-list { gap: 4px; }
.ssp-panel--plain .ssp-tab { font-size: 20px; line-height: 1.3; letter-spacing: -.012em; font-weight: 500; padding: 16px 18px; }
.ssp-panel--plain .ssp-tab[aria-selected="true"], .ssp-panel--plain .ssp-tab[aria-expanded="true"] { font-weight: 600; }
@media (max-width: 900px) { .ssp-panel--plain .ssp-tab { font-size: 17px; padding: 14px 16px; } }

/* optional leading icon on each tab (owner 2026-09-19: the same service icons the page uses elsewhere) */
.ssp-panel--plain .ssp-tab.ssp-tab--ico { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.ssp-panel--responsive[data-mode="accordion"].ssp-panel--plain .ssp-tab.ssp-tab--ico { grid-template-columns: 24px minmax(0, 1fr) auto; }
.ssp-tab-ico { display: inline-flex; width: 24px; height: 24px; color: var(--muted); }
.ssp-tab-ico svg { width: 100%; height: 100%; }
.ssp-tab[aria-selected="true"] .ssp-tab-ico, .ssp-tab[aria-expanded="true"] .ssp-tab-ico, .ssp-tab:hover .ssp-tab-ico { color: var(--text); }

/* headings wrap the controls; they must not bring heading typography with them */
.ssp-panel--responsive .ssp-item-head { margin: 0; font: inherit; letter-spacing: inherit; }
.ssp-panel--responsive .ssp-pane { min-width: 0; }
.ssp-panel--responsive, .ssp-panel--responsive .ssp-item, .ssp-panel--responsive .ssp-item-head { scroll-margin-top: 96px; }   /* deep links land below the sticky header */
/* the photograph is the item's destination link */
.ssp-panel--responsive .ssp-media-link { display: block; width: 100%; height: 100%; }
.ssp-panel--responsive .ssp-media-link img { transition: transform .35s ease, opacity .2s ease; }
.ssp-panel--responsive .ssp-media-link:hover img { transform: scale(1.02); }
.ssp-panel--responsive .ssp-media-link:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: -3px; }   /* opened from a link elsewhere: land below the sticky header */

/* pane content: the reference detail typography plus the item's destination link and link chips */
.ssp-panel--responsive .ssp-pane-title { margin: 0 0 10px; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 500; color: var(--text); }
.ssp-panel--responsive .ssp-pane > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 56ch; }
.ssp-panel--responsive .ssp-pane .family-links { margin-top: 18px; }

/* the reference sets .ssp-detail { display: grid }, which beats the [hidden] attribute — the accordion's empty stage must go */
.ssp-panel--responsive .ssp-detail[hidden] { display: none; }

/* tabs (desktop): exactly the reference panel — the list on the left, the moved panes in .ssp-detail on the right */
.ssp-panel--responsive[data-mode="tabs"] .ssp-item-head { display: block; }

/* accordion (narrow): headings stay in the flow, the open pane sits directly beneath its heading */
.ssp-panel--responsive[data-mode="accordion"] .ssp-tab { grid-template-columns: minmax(0, 1fr) auto; }
.ssp-panel--responsive[data-mode="accordion"].ssp-panel--plain .ssp-tab { grid-template-columns: minmax(0, 1fr) auto; }
.ssp-panel--responsive[data-mode="accordion"]:not(.ssp-panel--plain) .ssp-tab { grid-template-columns: 30px minmax(0, 1fr) auto; }
.ssp-panel--responsive[data-mode="accordion"] .ssp-tab::after { content: ""; width: 8px; height: 8px; margin: 0 4px 3px 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; align-self: center; }
.ssp-panel--responsive[data-mode="accordion"] .ssp-tab[aria-expanded="true"] { background: var(--surface-tinted); border-color: var(--line-soft); }
.ssp-panel--responsive[data-mode="accordion"] .ssp-tab[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -3px; }
.ssp-panel--responsive[data-mode="accordion"] .ssp-pane-title { display: none; }   /* the heading above already names it */
.ssp-panel--responsive[data-mode="accordion"] .ssp-item > .ssp-pane,
.ssp-panel--responsive[data-mode="static"] .ssp-item > .ssp-pane { margin: 6px 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-tinted); padding: 20px 20px 22px; }
.ssp-panel--responsive[data-mode="accordion"] .ssp-item > .ssp-pane[hidden] { display: none; }
.ssp-panel--responsive[data-mode="accordion"] .ssp-item > .ssp-pane .ssp-media,
.ssp-panel--responsive[data-mode="static"] .ssp-item > .ssp-pane .ssp-media { margin: -20px -20px 18px; border-radius: 13px 13px 0 0; }

/* static (no JavaScript): a plain list, every item expanded, its heading link as the title; the controls stay out */
.ssp-panel--responsive[data-mode="static"] { display: block; }
.ssp-panel--responsive[data-mode="static"] .ssp-panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.ssp-panel--responsive[data-mode="static"] .ssp-item-head,
.ssp-panel--responsive[data-mode="static"] .ssp-detail { display: none; }
.ssp-panel--responsive[data-mode="static"] .ssp-item > .ssp-pane { margin: 0; height: 100%; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  .ssp-panel--responsive .ssp-media-link img { transition: none; }
  .ssp-panel--responsive .ssp-media-link:hover img { transform: none; }
    .ssp-panel--responsive[data-mode="accordion"] .ssp-tab::after { transition: none; }
  }