/* Family Diagnostics site — page-level styles on top of the design system tokens. */
*{box-sizing:border-box}
body{margin:0;background:#fff}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
img{object-position:50% 0%}
img[style*="aspect-ratio"]{height:auto!important;align-self:start}
.slide{object-position:50% 0%}
a{color:var(--color-brand-navy)}
a:hover{color:var(--color-brand-red)}
header img[alt="Family Diagnostics"]{width:auto!important;height:60px!important;max-width:none;max-height:none;transition:height 200ms cubic-bezier(.2,.6,.2,1)}
@media (max-width:700px){header img[alt="Family Diagnostics"]{height:46px!important}}
header nav a,header nav button,header nav span{font-size:17px!important;white-space:nowrap}
header nav{flex-wrap:nowrap}
header a[href],header button{white-space:nowrap}
@media (max-width:1080px){header nav a,header nav button,header nav span{font-size:14px!important}}
@media (max-width:1180px){header nav a,header nav button,header nav span{font-size:15px!important}header img[alt="Family Diagnostics"]{height:50px!important}}
@media (max-width:1024px){header img[alt="Family Diagnostics"]{height:44px!important}}
.h2{margin:0;font:700 clamp(28px,3.3vw,48px)/1.12 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:var(--color-brand-navy)}
.h3{margin:0;font:700 clamp(22px,2.1vw,30px)/1.22 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:var(--text-heading)}
.body{margin:0;font:400 19px/1.65 'Source Sans 3',sans-serif;color:var(--text-body);max-width:66ch}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,4vw,48px)}
.wrapany{overflow-wrap:anywhere}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.faq-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,64px);align-items:start}
/* design-system SplitFeature ships a fixed 2-column grid — collapse it on small screens */
@media (max-width:860px){
  [style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns: 7fr 5fr"],[style*="grid-template-columns: 5fr 7fr"]{grid-template-columns:minmax(0,1fr)!important}
  footer [style*="grid-template-columns: 1.5fr 1fr 1fr 1.4fr"]{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
}
@media (max-width:700px){
  header>div>div:first-child{height:auto!important;min-height:38px;flex-wrap:wrap!important;justify-content:center!important;gap:4px 16px!important;padding:8px 16px!important;font-size:12px!important;text-align:center}
  header>div>div:first-child>*:nth-child(3){display:none!important}
  footer #mrwd{margin:0 auto;text-align:center}
  footer span:has(#mrwd),footer div:has(>#mrwd){justify-content:center!important;text-align:center}
  footer span:has(#mrwd)>div{flex-direction:column;justify-content:center!important;align-items:center;text-align:center;gap:8px}
}
@media (max-width:820px){.faq-two{grid-template-columns:1fr}}
.how-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
.how-aside{position:sticky;top:140px;display:flex;flex-direction:column;gap:24px}
.steplist{display:grid;grid-template-columns:auto 1fr;gap:0 24px;list-style:none;margin:0;padding:0}
.stepcol{display:flex;flex-direction:column;align-items:center;height:100%}
.stepcol .rule{flex:1;width:2px;background:var(--border-default);margin:8px 0}
.stepnum{width:48px;height:48px;flex:0 0 auto;border-radius:999px;display:flex;align-items:center;justify-content:center;font:800 18px/1 'Plus Jakarta Sans',sans-serif;color:#fff;background:var(--color-brand-red)}
@media (max-width:860px){.how-wrap{grid-template-columns:1fr}.how-aside{position:static}}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.pillars{grid-template-columns:1fr}}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px 24px;align-items:stretch}
.form-grid>*{display:flex;flex-direction:column;height:100%}
.form-grid>*>*:last-child{margin-top:auto}
.form-legend{margin:0;font:700 20px/1.35 'Plus Jakarta Sans',sans-serif;color:var(--color-brand-navy)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px 24px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
@media (max-width:900px){.contact-layout{grid-template-columns:1fr}}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr!important}
  .checks{grid-template-columns:1fr!important}
  form input,form select,form textarea{width:100%;min-width:0;font-size:16px}
  .contact-layout,.contact-layout *{min-width:0}
  .contact-layout iframe{height:200px}
  form button,form a[href^="/contact"],.contact-layout button{white-space:normal!important;height:auto!important;min-height:52px;padding:12px 16px!important;line-height:1.3;width:100%;text-align:center}
  form>div>div[style*="padding"]{padding:20px 16px!important}
}
.slide{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms cubic-bezier(.2,.6,.2,1)}
picture.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}

.slide.on{opacity:1}
.dot{width:34px;height:3px;border:0;padding:0;border-radius:999px;background:rgba(255,255,255,.34);cursor:pointer;transition:background 200ms}
.dot.on{background:#FF8650}
.dot:focus-visible{outline:3px solid #fff;outline-offset:3px}
#mrwd{text-align:center;font-size:12px;color:#fff}
footer #mrwd{margin-left:auto;width:max-content}
footer span:has(#mrwd){flex:1 1 auto;width:100%}
#mrwd img{display:inline}
#mrwd a,#mrwd a strong{color:#fff}
#mrwd:hover,#mrwd:hover a,#mrwd:hover a *{color:orange!important}
#mrwd a,#mrwd a:hover{text-decoration:none}
footer a{transition:color 200ms cubic-bezier(.2,.6,.2,1)}
footer a:hover{color:#FF8650!important;text-decoration:none!important}
@media only screen and (max-width:900px){#mrwd{text-align:center}}
@media (max-width:600px){.hero-area{margin-left:0!important}}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
.bio{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.bio.flip{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.portrait{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:24px}
.namebar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding-bottom:16px;border-bottom:1px solid var(--border-default)}
@media (max-width:860px){.bio,.bio.flip{grid-template-columns:1fr}.bio.flip .portrait{order:-1}}
.cm-dark{background:var(--color-brand-navy);border-radius:24px;padding:clamp(32px,4vw,56px);position:relative;overflow:hidden}
.cm-dark::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-hairline)}
.cm-dark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
@media (max-width:900px){.cm-dark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cm-dark-grid{grid-template-columns:1fr}}

/* --- mobile / tablet navigation --- */
.mob-toggle{display:none;position:fixed;right:16px;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border-default);background:#fff;color:var(--color-brand-navy);cursor:pointer;z-index:120}
.mob-toggle:hover{border-color:var(--color-brand-navy)}
.mob-drawer{display:none;position:fixed;inset:0;z-index:110;background:#fff;padding:96px 16px 32px;overflow-y:auto;flex-direction:column;gap:24px}
.mob-nav{display:flex;flex-direction:column}
.mob-item{border-bottom:1px solid var(--border-default)}
.mob-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 0;background:none;border:0;text-align:left;font:700 19px/1.35 'Plus Jakarta Sans',sans-serif;color:var(--color-brand-navy);text-decoration:none;cursor:pointer}
.mob-sub{display:flex;flex-direction:column;gap:2px;padding:0 0 16px 12px}
.mob-sub a{padding:10px 0;font:600 17px/1.4 'Source Sans 3',sans-serif;color:var(--text-body);text-decoration:none}
.mob-sub a:hover{color:var(--color-brand-red)}
.mob-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.mob-cta{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:10px;background:var(--color-brand-red);color:#fff;font:700 15px/1.2 'Source Sans 3',sans-serif;text-align:center;text-decoration:none}
.mob-cta:hover{background:var(--action-primary-hover);color:#fff}
.mob-tel{min-height:44px;display:flex;align-items:center;font:600 17px/1.4 'Source Sans 3',sans-serif;color:var(--color-brand-navy);text-decoration:none;overflow-wrap:anywhere}
@media (max-width:1023px){
  header nav{display:none!important}
  header button{display:none!important}
  .mob-toggle{display:flex}
  .mob-drawer{display:flex}
}
@media (max-width:560px){
  header img[alt="Family Diagnostics"]{height:40px!important}
  header [class],header{overflow-wrap:anywhere}
}
/* --- 320px floor --- */
@media (max-width:400px){
  .grid-2,.grid-3,.form-grid,.checks,.pillars,.faq-two,.cm-dark-grid,.duo,.bio,.bio.flip,.how-wrap,.contact-layout{grid-template-columns:1fr!important}
  .cm-dark{padding:24px 16px}
  .stepnum{width:40px;height:40px;font-size:16px}
  /* contact form at 320px */
  form input,form select,form textarea{max-width:100%;width:100%;min-width:0;font-size:16px}
  .form-grid{gap:16px!important}
  .checks label,.checks>*{min-width:0;overflow-wrap:anywhere}
  form button,.mob-cta{width:100%;white-space:normal;height:auto!important;min-height:52px;padding:12px 16px;line-height:1.3}
  form [style*="padding: 40px"],form [style*="padding:40px"]{padding:20px 16px!important}
}
.fd-social{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font:600 15px/1.4 'Source Sans 3',sans-serif;color:#fff;text-decoration:none}
.fd-social i,.fd-social svg{color:#FF8650;stroke:#FF8650}
.fd-social:hover,.fd-social:hover svg{color:#FF8650!important;stroke:#FF8650}

/* Mobile hero: keep the full-bleed slideshow, but shift the crop so the person stays in frame */
@media (max-width:760px){
  .hero .slide,.hero picture.slide img{object-position:78% 22%!important}
  .hero .slide:nth-of-type(1),.hero .slide:nth-of-type(1) img{object-position:100% 18%!important}
  .hero .slide:nth-of-type(2),.hero .slide:nth-of-type(2) img{object-position:100% 18%!important}
  .hero .slide:nth-of-type(3),.hero .slide:nth-of-type(3) img{object-position:64% 22%!important}
  .hero .slide:nth-of-type(5),.hero .slide:nth-of-type(5) img{object-position:80% 22%!important}
}