/* ============================================================
   BUSINESS . Family Offices (individual-family-offices.html) . 2026-10-20
   Ground truth: otabek 20.10/Business - Family Offices/Spec+Html/digidoe-family-offices.html
                 + digidoe-family-offices-page-spec.md; the PDF is 1440 x 8361 pt (1 pt = 1 px).
   Figma "DD-Website" frame "Business - Family Offices" (1187:16317).

   Same recipe as sept-corp.css / sept-bcur.css: <main> IS the designer's markup (classes fam-*,
   qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes, transcribed by
   qa/oracle/skin_css.py (first page through it):
     .x                 -> [data-skin="fam"] #main .fam-x ; his :root vars -> #main
     photos             -> his two data: jpgs as webp under sept/individual-family-offices/ (md5-matched)
     body min-width     -> gone (D1): his numbers hold from 1300 up; the block at the end relaxes them below.
     nav + footer       -> his rules dropped (31 selectors), chrome stays live (D2): dd-nav.css + sept-footer.css
   Scope is data-skin (dd-shell.css keys 21 rules on [data-sept]). data-followup="biz" is OFF this page
   (followup.css !important rules inside main); its two chrome blocks are repeated below, keyed on data-skin.

   Deviations from his HTML, each on record (Yuval 2026-10-20 "all ok"):
     hero       live hero chips dropped (03.10); neither side has a line under the card on this page.
     onboarding the live "1. Map the structure." steps become his three numeral cards: the number is his
                01/02/03 device, the title keeps the live wording and period (V7).
     copy       live text wins: the periods on six row titles, the five pill arrows ("Speak to our team →" on
                the onboarding pill, the CTA button stays plain as live).
     reveals    kept (D3): scroll-driven, same timing family as alt-home.css, defined at the end.
   ============================================================ */

/* ---------- resets his page relied on, scoped to main (skin_css.py standard block) ---------- */
html[data-skin="fam"] body{background:#fff}
[data-skin="fam"] main{
  width:100%;overflow-x:clip;color:#121212;font-size:16px;line-height:normal;letter-spacing:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
}
[data-skin="fam"] #main *,[data-skin="fam"] #main *::before,[data-skin="fam"] #main *::after{box-sizing:border-box}
[data-skin="fam"] #main *{margin:0;padding:0}
[data-skin="fam"] #main ul{list-style:none}
[data-skin="fam"] #main a{color:inherit;text-decoration:none}
[data-skin="fam"] #main img,[data-skin="fam"] #main svg{display:block}
[data-skin="fam"] #main h1,[data-skin="fam"] #main h2,[data-skin="fam"] #main h3,[data-skin="fam"] #main p{max-width:none;letter-spacing:0;text-wrap:initial}

/* ---------- his page, transcribed (skin_css.py) ---------- */
[data-skin="fam"] #main{--black:#121212;--body:#5C5750;--body2:#555049;--muted:#7B756D;--navon:#2B2926;--num:#A8A299;--orange:#F37F00;--link1:#B75F00;--link2:#AC5900;--cream:#F4F3F0;--border:#D6D2C7;--rule:#CCC8BC;--white:#FFFFFF;}
[data-skin="fam"] #main .fam-band{width:100%}
[data-skin="fam"] #main .fam-inner{width:1440px;margin:0 auto;position:relative}
[data-skin="fam"] #main .fam-divided>.fam-inner::before{content:"";position:absolute;top:0;left:140px;width:1160px;height:1px;background:var(--border)}
[data-skin="fam"] #main .fam-icon40{width:40px;height:40px;flex-shrink:0}
[data-skin="fam"] #main .fam-icon50{width:50px;height:50px;flex-shrink:0}
[data-skin="fam"] #main .fam-icon40 svg,[data-skin="fam"] #main .fam-icon50 svg{width:100%;height:100%}
[data-skin="fam"] #main /* buttons */
.fam-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border-radius:100px;font-size:16px;line-height:19px;white-space:nowrap;text-align:center;flex-shrink:0}
[data-skin="fam"] #main .fam-btn-dark{background:var(--black);color:#fff;font-weight:700}
[data-skin="fam"] #main .fam-btn-light{background:#fff;color:var(--black);font-weight:700}
[data-skin="fam"] #main .fam-btn-sec{background:var(--cream);color:var(--body2);font-weight:500}
[data-skin="fam"] #main .fam-btn-sec.fam-on-cream{background:#fff}
[data-skin="fam"] #main /* type */
.fam-h2{font-weight:500;font-size:44px;line-height:53px;color:var(--black)}
[data-skin="fam"] #main .fam-p16{font-weight:400;font-size:16px;line-height:24px}
[data-skin="fam"] #main .fam-head-c{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
[data-skin="fam"] #main .fam-card-title{font-weight:500;font-size:24px;line-height:29px;color:var(--black);width:100%}
[data-skin="fam"] #main .fam-card-desc{font-weight:400;font-size:16px;line-height:1.35;color:var(--body);width:100%}
[data-skin="fam"] #main .fam-card-text{display:flex;flex-direction:column;gap:12px;width:100%}
[data-skin="fam"] #main /* cards */
.fam-row3{width:1200px;display:flex;align-items:stretch}
[data-skin="fam"] #main .fam-ocard{flex:1 0 0;min-width:0;border:1px solid var(--border);border-radius:24px;padding:30px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:30px;position:relative}
[data-skin="fam"] #main .fam-ccol{width:520px;display:flex;flex-direction:column;gap:30px}
[data-skin="fam"] #main .fam-ccard{width:520px;background:var(--cream);border-radius:24px;padding:40px 50px;display:flex;align-items:center;gap:40px;overflow:hidden}
[data-skin="fam"] #main .fam-ccard .fam-card-text{flex:1 0 0;min-width:0}
[data-skin="fam"] #main .fam-ccard .fam-card-desc{color:var(--body2)}
[data-skin="fam"] #main /* navbar */
.fam-nav .fam-inner{height:87px;display:flex;align-items:center;justify-content:space-between;padding:20px 80px}
[data-skin="fam"] #main /* hero */
.fam-hero .fam-inner{height:640px;padding:0 80px;display:flex;justify-content:center}
[data-skin="fam"] #main .fam-hero-card{width:1280px;height:640px;border-radius:48px;overflow:hidden;position:relative;padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px}
[data-skin="fam"] #main .fam-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
[data-skin="fam"] #main .fam-hero-veil{position:absolute;inset:0;border-radius:48px;background-size:100% 100%;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 640' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-98.75 -29.1 58.2 -197.5 987.5 291)'><stop stop-color='rgba(44,38,32,0)' offset='0'/><stop stop-color='rgba(44,38,32,0)' offset='0.12559'/><stop stop-color='rgba(44,38,32,1)' offset='1'/></radialGradient></defs></svg>")}
[data-skin="fam"] #main .fam-hero-text{position:relative;width:500px;display:flex;flex-direction:column;gap:20px;color:#fff}
[data-skin="fam"] #main .fam-hero-text h1{font-weight:500;font-size:52px;line-height:63px}
[data-skin="fam"] #main .fam-hero-text p{font-weight:400;font-size:16px;line-height:24px;opacity:.8}
[data-skin="fam"] #main .fam-hero-card .fam-btn{position:relative}
[data-skin="fam"] #main /* centred sections */
.fam-sec-c .fam-inner{display:flex;flex-direction:column;align-items:center;gap:80px}
[data-skin="fam"] #main .fam-s3 .fam-inner{padding:120px 80px 160px;height:824px}
[data-skin="fam"] #main .fam-s6 .fam-inner{padding:140px 80px 160px;height:973px}
[data-skin="fam"] #main .fam-s7 .fam-inner{padding:160px 80px;height:938px}
[data-skin="fam"] #main .fam-s9 .fam-inner{padding:140px 80px 160px;height:1023px}
[data-skin="fam"] #main .fam-s3 .fam-row3,[data-skin="fam"] #main .fam-s7 .fam-row3,[data-skin="fam"] #main .fam-s9 .fam-row3{gap:30px}
[data-skin="fam"] #main /* two-col sections */
.fam-sec-2 .fam-inner{padding:160px;display:flex;justify-content:center;align-items:flex-start;gap:120px}
[data-skin="fam"] #main .fam-s5 .fam-inner{height:948px}
[data-skin="fam"] #main .fam-s8 .fam-inner{height:875px}
[data-skin="fam"] #main .fam-lcol{width:480px;display:flex;flex-direction:column;align-items:flex-start;gap:60px}
[data-skin="fam"] #main .fam-lcol .fam-txt{display:flex;flex-direction:column;gap:20px;width:100%}
[data-skin="fam"] #main /* section 6 */
.fam-s6{background:var(--cream)}
[data-skin="fam"] #main .fam-s6 .fam-head-c{gap:30px}
[data-skin="fam"] #main .fam-s6 .fam-row3{gap:40px}
[data-skin="fam"] #main .fam-scard{flex:1 0 0;min-width:0;background:#fff;border-radius:24px;padding:30px;box-shadow:0 12px 28px 0 rgba(0,0,0,.06);display:flex;flex-direction:column;gap:45px;overflow:hidden}
[data-skin="fam"] #main .fam-scard .fam-card-desc{line-height:24px}
[data-skin="fam"] #main /* section 9 */
.fam-s9 .fam-mid{display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="fam"] #main .fam-num{position:absolute;top:29px;right:29px;font-weight:500;font-size:24px;line-height:29px;color:var(--num);text-align:right;white-space:nowrap}
[data-skin="fam"] #main .fam-footnote{width:860px;text-align:center;font-weight:400;font-size:14px;line-height:21px;color:var(--muted)}
[data-skin="fam"] #main /* section 10 */
.fam-s10 .fam-inner{height:800px;padding:160px 80px;display:flex;justify-content:center;align-items:center}
[data-skin="fam"] #main .fam-s10 .fam-row{display:flex;align-items:center;gap:120px}
[data-skin="fam"] #main .fam-team{width:480px;height:480px;border-radius:48px;overflow:hidden;position:relative;flex-shrink:0}
[data-skin="fam"] #main .fam-team img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-skin="fam"] #main .fam-s10 .fam-tcol{width:520px;display:flex;flex-direction:column;gap:40px}
[data-skin="fam"] #main .fam-s10 .fam-tgroup{display:flex;flex-direction:column;gap:60px;align-items:flex-start}
[data-skin="fam"] #main .fam-small{width:350px;font-weight:400;font-size:14px;line-height:21px;color:var(--muted)}
[data-skin="fam"] #main .fam-small a{color:var(--link1)}
[data-skin="fam"] #main /* section 11 */
.fam-s11 .fam-inner{height:571px;padding:0 80px 80px;display:flex;flex-direction:column;align-items:center}
[data-skin="fam"] #main .fam-cta{width:1280px;height:491px;background:var(--cream);border-radius:48px;padding:100px 80px;display:flex;align-items:center;justify-content:center;overflow:hidden}
[data-skin="fam"] #main .fam-cta .fam-col{display:flex;flex-direction:column;align-items:center;gap:60px}
[data-skin="fam"] #main .fam-cta .fam-head-c{width:720px;gap:30px}
[data-skin="fam"] #main /* footer */
.fam-footer{background:var(--cream)}

/* ---------- D3: reveals, the alt-home family (alt-home.css already rises every main section h2) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes fam-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
    @keyframes fam-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}
    @keyframes fam-slide-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
    @keyframes fam-slide-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    [data-skin="fam"] #main .fam-hero-card{animation:fam-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%}
    [data-skin="fam"] #main .fam-row3,[data-skin="fam"] #main .fam-cta{animation:fam-rise both;animation-timeline:view();animation-range:entry 0% entry 48%}
    [data-skin="fam"] #main .fam-lcol,[data-skin="fam"] #main .fam-team{animation:fam-slide-l both;animation-timeline:view();animation-range:entry 0% entry 50%}
    [data-skin="fam"] #main .fam-ccol,[data-skin="fam"] #main .fam-s10 .fam-tcol{animation:fam-slide-r both;animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}

/* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */
@media (max-width:1299.98px){
  [data-skin="fam"] #main .fam-inner{width:100%;max-width:1440px}
  [data-skin="fam"] #main .fam-divided>.fam-inner::before{left:60px;width:auto;right:60px}
  [data-skin="fam"] #main .fam-hero .fam-inner{height:auto;padding:0 40px}
  [data-skin="fam"] #main .fam-hero-card{width:100%;height:auto;min-height:560px;padding:60px}
  [data-skin="fam"] #main .fam-hero-text{width:auto;max-width:500px}
  [data-skin="fam"] #main .fam-s3 .fam-inner,[data-skin="fam"] #main .fam-s6 .fam-inner,[data-skin="fam"] #main .fam-s7 .fam-inner,
  [data-skin="fam"] #main .fam-s9 .fam-inner{height:auto;padding:100px 40px 120px}
  [data-skin="fam"] #main .fam-head-c,[data-skin="fam"] #main .fam-head-c h2,[data-skin="fam"] #main .fam-head-c p{width:auto!important;max-width:750px}
  [data-skin="fam"] #main .fam-row3{width:100%;max-width:1200px;flex-wrap:wrap}
  [data-skin="fam"] #main .fam-ocard,[data-skin="fam"] #main .fam-scard{flex:1 1 260px}
  [data-skin="fam"] #main .fam-sec-2 .fam-inner{height:auto;padding:100px 60px;gap:60px}
  [data-skin="fam"] #main .fam-lcol{width:auto;flex:1 1 0;min-width:0}
  [data-skin="fam"] #main .fam-lcol .fam-txt h2,[data-skin="fam"] #main .fam-lcol .fam-txt p{width:auto!important;max-width:480px}
  [data-skin="fam"] #main .fam-ccol{width:auto;flex:1 1 0;min-width:0;max-width:520px}
  [data-skin="fam"] #main .fam-ccard{width:auto;padding:30px}
  [data-skin="fam"] #main .fam-footnote{width:auto;max-width:860px}
  [data-skin="fam"] #main .fam-s10 .fam-inner{height:auto;padding:100px 60px}
  [data-skin="fam"] #main .fam-s10 .fam-row{gap:60px;width:100%}
  [data-skin="fam"] #main .fam-team{width:38%;height:auto;aspect-ratio:1/1}
  [data-skin="fam"] #main .fam-s10 .fam-tcol{width:auto;flex:1 1 0;min-width:0}
  [data-skin="fam"] #main .fam-small{width:auto;max-width:350px}
  [data-skin="fam"] #main .fam-s11 .fam-inner{height:auto;padding:0 40px 60px}
  [data-skin="fam"] #main .fam-cta{width:100%;height:auto;min-height:400px;padding:60px}
  [data-skin="fam"] #main .fam-cta .fam-head-c{width:auto;max-width:720px}
}

/* ---------- chrome that followup.css carried for this page (its lines 62-66, verbatim, keyed on data-skin) ---------- */
html[data-skin="fam"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="fam"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important}
html[data-skin="fam"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important}
html[data-skin="fam"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important}
html[data-skin="fam"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}