:root {
  --bg: #020b18;
  --bg-2: #061c38;
  --accent: #1e8fff;
  --accent-soft: rgba(30, 143, 255, 0.2);
  --accent-text: #78c4ff;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);
  --faint: rgba(255, 255, 255, 0.48);
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.065);
  --glass-hover: rgba(255, 255, 255, 0.095);
  --page-x: clamp(18px, 2.4vw, 32px);
  --content: 1180px;
  --section-y: clamp(62px, 8vw, 112px);
  --radius: 14px;
  --font-main: clamp(1.06rem, 1.45vw, 1.42rem);
  --font-lead: clamp(0.9rem, 1vw, 1.05rem);
  --font-button: clamp(0.8rem, 0.84vw, 0.94rem);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; color: #fff; font-family: Inter, Arial, Helvetica, sans-serif; font-feature-settings: "kern", "liga", "calt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: radial-gradient(circle at 50% 0%, rgba(30,143,255,.15), rgba(2,11,24,0) 34%), radial-gradient(circle at 50% 100%, rgba(42,132,190,.38), rgba(13,63,104,.16) 32%, rgba(2,11,24,0) 68%), linear-gradient(to bottom, var(--bg), var(--bg-2) 48%, var(--bg)); }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: 1; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 96px 96px; mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.42) 50%, rgba(0,0,0,.12)); }
body::after { z-index: 2; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.45'/%3E%3C/svg%3E"); }
a { color: inherit; }
button, select, input, textarea { font: inherit; }
.skip-link, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { z-index: 100; width: auto; height: auto; clip: auto; top: 12px; left: 12px; padding: 10px 14px; border-radius: 999px; background: #fff; color: #020b18; }
.site-shell { position: relative; z-index: 10; }
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px var(--page-x); pointer-events: none; background: linear-gradient(to bottom, rgba(2,11,24,.82), rgba(2,11,24,0)); }
.brand-mini, .top-actions, .main-nav { pointer-events: auto; }
.brand-mini { display: inline-flex; align-items: center; text-decoration: none; opacity: .9; }
.brand-mini img { width: 118px; max-height: 34px; object-fit: contain; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.language-selector { position: relative; }
.language-selector::before { content: "🌐"; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); font-size: 12px; opacity: .62; pointer-events: none; }
.language-selector select, .button, .nav-toggle { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background-color: var(--glass); font: 500 var(--font-button)/1 Inter, Arial, sans-serif; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 16px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.09); transition: transform .18s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.language-selector select { appearance: none; -webkit-appearance: none; min-width: 176px; padding: 10px 38px 10px 36px; outline: none; cursor: pointer; font-size: 12px; letter-spacing: -.01em; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.language-selector select option { background: #fff; color: var(--bg); }
.button:hover, .language-selector select:hover, .nav-toggle:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.42); background-color: var(--glass-hover); }
.nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 16px; height: 1px; background: rgba(255,255,255,.84); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(5px); }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(1px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(0) rotate(-45deg); }
.main-nav { position: fixed; top: 20px; left: 50%; z-index: 45; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(2,11,24,.42); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.main-nav a { padding: 9px 13px; color: rgba(255,255,255,.66); font-size: 12px; text-decoration: none; white-space: nowrap; border-radius: 999px; transition: color .2s ease, background .2s ease; }
.main-nav a:hover, .main-nav a.is-active { color: rgba(255,255,255,.96); background: rgba(255,255,255,.08); }
.hero { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: clamp(96px,12vh,132px) 20px clamp(56px,8vh,90px); text-align: center; }
.hero-inner { width: min(100%, var(--content)); }
.logo { display: block; width: clamp(340px, 38vw, 660px); max-width: min(84vw, 660px); height: auto; margin: 0 auto clamp(28px,4vh,46px); object-fit: contain; filter: brightness(1.08) contrast(1.02) drop-shadow(0 22px 48px rgba(0,0,0,.18)); user-select: none; }
.eyebrow { margin-bottom: 14px; color: #62b8ff; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.main-message { max-width: 980px; margin: 0 auto; color: var(--text); font-size: var(--font-main); font-weight: 500; line-height: 1.42; letter-spacing: -.028em; text-wrap: balance; text-shadow: 0 12px 28px rgba(0,0,0,.16); }
.hero-submessage { max-width: 760px; margin: 20px auto 0; color: var(--muted); font-size: var(--font-lead); line-height: 1.6; letter-spacing: -.018em; text-wrap: balance; }
.contact-actions { position: relative; z-index: 40; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: min(100%, 980px); margin: clamp(52px,6vh,72px) auto 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 12px 20px; color: rgba(255,255,255,.9); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.button-primary { border-color: rgba(30,143,255,.52); background: linear-gradient(135deg, rgba(30,143,255,.74), rgba(13,63,104,.88)); box-shadow: 0 18px 48px rgba(30,143,255,.18), inset 0 1px 0 rgba(255,255,255,.18); }
.button-primary:hover { border-color: rgba(120,190,255,.72); background: linear-gradient(135deg, rgba(48,155,255,.86), rgba(15,80,138,.95)); }
.button-note { color: rgba(255,255,255,.5); font-weight: 400; }
.section { position: relative; padding: var(--section-y) var(--page-x); border-top: 1px solid rgba(255,255,255,.1); }
.section-inner { width: min(100%, var(--content)); margin: 0 auto; }
.section-label { margin-bottom: 16px; color: #62b8ff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section-title { max-width: 760px; color: var(--text); font-size: clamp(1.7rem,3.1vw,3rem); font-weight: 500; line-height: 1.08; letter-spacing: -.055em; text-wrap: balance; }
.section-copy { max-width: 640px; margin-top: 20px; color: var(--muted); font-size: var(--font-lead); line-height: 1.68; letter-spacing: -.018em; }
.families-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.families-note { max-width: 880px; margin: -10px 0 30px; color: var(--faint); font-size: .86rem; line-height: 1.65; letter-spacing: -.012em; }
.families-explorer { position: relative; }
.families-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.family-card { position: relative; isolation: isolate; overflow: hidden; min-height: 230px; display: grid; grid-template-rows: 42px 2.7em minmax(4.35em, 1fr) 24px; align-items: start; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); color: rgba(255,255,255,.78); background: radial-gradient(circle at 14% 0%, rgba(30,143,255,.1), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.032)); box-shadow: 0 22px 70px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.075); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.family-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; opacity: 0; background: radial-gradient(circle at 20% 0%, rgba(120,196,255,.46), transparent 48%), radial-gradient(circle at 95% 100%, rgba(30,143,255,.28), transparent 45%); transition: opacity .26s ease; }
.family-card::after { content: ""; position: absolute; inset: auto 18px 0; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(120,196,255,.72), transparent); transition: opacity .26s ease; }
.family-card:hover, .family-card:focus-visible, .family-card.is-rotating { transform: translateY(-4px); border-color: rgba(120,196,255,.66); color: #fff; background: radial-gradient(circle at 16% 0%, rgba(30,143,255,.24), transparent 48%), linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: 0 26px 80px rgba(0,0,0,.18), 0 0 42px rgba(30,143,255,.18), inset 0 1px 0 rgba(255,255,255,.14); outline: none; }
.family-card:hover::before, .family-card:focus-visible::before, .family-card.is-rotating::before, .family-card:hover::after, .family-card:focus-visible::after, .family-card.is-rotating::after { opacity: 1; }
.family-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; margin-bottom: 0; }
.family-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #8fd0ff; border: 1px solid rgba(98,184,255,.28); border-radius: 10px; background: rgba(30,143,255,.075); font-size: 0; transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.family-icon svg { width: 18px; height: 18px; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.family-card:hover .family-icon, .family-card:focus-visible .family-icon, .family-card.is-rotating .family-icon { color: #fff; border-color: rgba(120,196,255,.56); background: rgba(30,143,255,.16); box-shadow: 0 0 28px rgba(30,143,255,.2); }
.family-card-title { display: flex; align-items: flex-start; min-height: 2.7em; color: var(--text); font-size: clamp(1rem, 1.15vw, 1.18rem); font-weight: 700; line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; }
.family-card-copy { display: block; align-self: start; color: var(--muted); font-size: .82rem; line-height: 1.48; letter-spacing: -.014em; }
.family-panel[hidden] { display: none !important; }
.family-panel { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--page-x); }
.family-modal-backdrop { position: absolute; inset: 0; background: rgba(2,11,24,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.family-modal-card { position: relative; width: min(100%, 1040px); max-height: min(86vh, 820px); overflow: auto; padding: clamp(24px,3vw,38px); border: 1px solid rgba(120,196,255,.22); border-radius: calc(var(--radius) + 8px); background: radial-gradient(circle at 0% 0%, rgba(30,143,255,.2), transparent 38%), radial-gradient(circle at 92% 96%, rgba(98,184,255,.11), transparent 34%), linear-gradient(180deg, rgba(11,29,56,.96), rgba(4,16,33,.96)); box-shadow: 0 42px 120px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.11); }
.family-modal-card::after { content: ""; position: absolute; inset: auto 28px 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(98,184,255,.34), transparent); pointer-events: none; }
.family-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(255,255,255,.86); background: rgba(255,255,255,.06); cursor: pointer; font-size: 1.4rem; line-height: 1; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.family-modal-close:hover, .family-modal-close:focus-visible { transform: translateY(-1px); border-color: rgba(120,196,255,.6); background: rgba(30,143,255,.16); outline: none; }
.family-modal-open { overflow: hidden; }
.family-panel-head { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 18px; align-items: start; margin-bottom: 28px; padding-right: 52px; }
.family-panel-head .family-icon { width: 54px; height: 54px; border-radius: 16px; box-shadow: 0 0 54px rgba(30,143,255,.14); }
.family-panel-head .family-icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
.family-kicker { margin-bottom: 9px; color: #62b8ff; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.family-panel-title { color: var(--text); font-size: clamp(1.38rem,2.15vw,2.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.05em; }
.family-panel-copy { max-width: 760px; margin-top: 13px; color: var(--muted); font-size: var(--font-lead); line-height: 1.64; letter-spacing: -.018em; }
.family-panel-grid { display: grid; grid-template-columns: minmax(230px,.82fr) minmax(0,1.25fr); gap: clamp(24px,3vw,42px); align-items: start; }
.family-panel h4 { margin-bottom: 14px; color: #62b8ff; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.subfamily-list { display: grid; gap: 9px; color: var(--muted); font-size: .9rem; line-height: 1.48; list-style: none; }
.subfamily-list li { position: relative; padding-left: 18px; }
.subfamily-list li::before { content: ""; position: absolute; top: .72em; left: 0; width: 8px; height: 1px; background: var(--accent-text); }
.brand-links { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.045); font-size: .78rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.brand-links a:hover, .brand-links a:focus-visible { transform: translateY(-1px); border-color: rgba(98,184,255,.48); background: rgba(30,143,255,.13); color: rgba(255,255,255,.96); outline: none; }
.family-heading-count { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(98,184,255,.24); border-radius: 999px; color: rgba(185,224,255,.82); background: rgba(30,143,255,.075); white-space: nowrap; font-size: .74rem; font-weight: 700; letter-spacing: -.01em; }
.family-panel-grid .family-heading-count { margin-top: 28px; }
.family-panel-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.family-quote-link { min-height: 40px; padding: 11px 16px; border: 1px solid rgba(30,143,255,.42); border-radius: 999px; color: rgba(255,255,255,.92); background: rgba(30,143,255,.14); font-size: .84rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.family-quote-link:hover { transform: translateY(-1px); border-color: rgba(120,190,255,.72); background: rgba(30,143,255,.22); }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 46px; counter-reset: steps; }
.step { position: relative; text-align: center; counter-increment: steps; }
.step::before { content: counter(steps); width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid rgba(98,184,255,.5); border-radius: 50%; background: var(--accent-soft); color: #fff; font-size: 1.28rem; font-weight: 600; box-shadow: 0 0 64px rgba(30,143,255,.18); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 36px; left: calc(50% + 54px); width: calc(100% - 108px); height: 1px; background: linear-gradient(90deg, rgba(98,184,255,.5), rgba(98,184,255,.08)); }
.step h3 { color: var(--text); font-size: 1rem; font-weight: 700; letter-spacing: -.025em; }
.step p { max-width: 240px; margin: 12px auto 0; color: var(--muted); font-size: .84rem; line-height: 1.58; }
.quote-card { display: grid; grid-template-columns: 176px minmax(0,1fr) 280px; gap: 30px; align-items: center; overflow: hidden; padding: clamp(26px,4.2vw,46px); border: 1px solid rgba(255,255,255,.16); border-radius: 32px; background: radial-gradient(circle at 12% 50%, rgba(30,143,255,.28), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.074), rgba(255,255,255,.035)); box-shadow: 0 22px 70px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.075); }
.quote-icon { width: clamp(104px,9vw,124px); height: clamp(104px,9vw,124px); min-width: clamp(104px,9vw,124px); margin: 0 auto; display: grid; place-items: center; border: 1px solid rgba(98,184,255,.58); border-radius: 50%; background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.2), transparent 30%), linear-gradient(135deg, rgba(30,143,255,.28), rgba(13,63,104,.18)); color: #b7e2ff; box-shadow: 0 0 92px rgba(30,143,255,.26), inset 0 1px 0 rgba(255,255,255,.18); }
.quote-icon svg { width: clamp(58px,5vw,70px); height: clamp(58px,5vw,70px); display: block; }
.quote-card h2 { color: var(--text); font-size: clamp(1.35rem,2vw,2rem); font-weight: 500; letter-spacing: -.045em; }
.quote-card p { max-width: 580px; margin-top: 10px; color: var(--muted); font-size: var(--font-lead); line-height: 1.58; }
.quote-actions { display: grid; gap: 10px; }
.footer { position: relative; z-index: 10; padding: 26px var(--page-x) 32px; border-top: 1px solid rgba(255,255,255,.1); color: var(--faint); font-size: 12px; }
.footer-inner { width: min(100%, var(--content)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.footer-logo { width: 118px; max-height: 34px; object-fit: contain; opacity: .78; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.footer-nav a { color: var(--faint); text-decoration: none; }
.footer-nav a:hover { color: rgba(255,255,255,.86); }
.soft-glow { position: fixed; left: 50%; bottom: -270px; z-index: 3; width: 780px; height: 780px; transform: translateX(-50%); border-radius: 50%; background: rgba(255,255,255,.052); filter: blur(108px); pointer-events: none; }
@media (max-width: 1040px) { .main-nav { display: none; top: 68px; left: auto; right: var(--page-x); transform: none; width: min(320px, calc(100vw - 36px)); padding: 10px; border-radius: 22px; flex-direction: column; align-items: stretch; background: rgba(2,11,24,.82); } .main-nav.is-open { display: flex; } .main-nav a { padding: 13px 15px; } .nav-toggle { display: inline-flex; } .families-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } .family-panel-grid { grid-template-columns: 1fr; } .quote-card { grid-template-columns: 1fr; text-align: center; } .quote-card p { margin-left: auto; margin-right: auto; } .quote-actions { width: min(100%,420px); margin: 0 auto; } }
@media (max-width: 760px) { :root { --page-x: 16px; --section-y: 58px; --font-main: clamp(1rem,5vw,1.38rem); --font-lead: .92rem; } .topbar { padding-top: 14px; } .brand-mini img { width: 92px; } .language-selector::before { left: 12px; font-size: 10px; } .language-selector select { min-width: 96px; padding: 9px 30px; font-size: 11px; } .hero { padding: 102px 16px 72px; } .logo { width: clamp(270px,78vw,430px); max-width: 84vw; margin-bottom: 28px; } .contact-actions { width: min(100%,360px); margin-top: 48px; } .button { width: 100%; } .main-message { line-height: 1.3; } .hero-submessage { line-height: 1.55; } .families-header { display: block; } .families-header .section-copy { margin-bottom: 28px; } .families-tabs, .steps { grid-template-columns: 1fr; } .family-card { min-height: 205px; grid-template-rows: 42px 2.9em minmax(4.35em, 1fr) 24px; } .family-panel { padding: 16px; } .family-modal-card { max-height: 88vh; padding: 24px 18px; } .family-panel-head { grid-template-columns: 44px minmax(0,1fr); gap: 14px; } .family-panel-head .family-icon { width: 44px; height: 44px; border-radius: 14px; } .step:not(:last-child)::after { display: none; } .quote-card { padding: 28px 18px; } .footer-inner { flex-direction: column; text-align: center; } }
@media (max-height: 620px) and (min-width: 901px) { .hero { padding-top: 82px; padding-bottom: 52px; } .logo { width: clamp(260px,28vw,460px); margin-bottom: 28px; } .hero-submessage { margin-top: 12px; } .contact-actions { margin-top: 42px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }


/* PRO update: richer technical panels, legal footer panels and prepared contact hooks */
.legal-modal-card { max-width: 760px; }
.legal-panel-kicker { margin-bottom: 10px; color: var(--accent); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.legal-panel-copy { margin: 14px 0 0; color: var(--muted); line-height: 1.75; font-size: 15px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.footer-legal button { appearance: none; border: 0; background: transparent; padding: 0; color: var(--faint); font: inherit; cursor: pointer; text-decoration: none; }
.footer-legal button:hover, .footer-legal button:focus-visible { color: rgba(255,255,255,.9); outline: none; text-decoration: underline; text-underline-offset: 4px; }
.quick-contact-prepared[hidden] { display: none !important; }
@media (max-width: 760px) { .footer-legal { gap: 10px 18px; } }
.family-modal-card:focus { outline: 2px solid rgba(120,196,255,.72); outline-offset: 4px; }
.family-modal-close:focus-visible, .family-quote-link:focus-visible, .legal-footer-button:focus-visible { outline: 2px solid rgba(120,196,255,.82); outline-offset: 3px; }


/* SEARCH update: header search, hero search box and search results modal */
.main-nav .nav-search-button { appearance: none; border: 0; padding: 9px 13px; color: rgba(255,255,255,.66); background: transparent; font-size: 13px; line-height: 1; text-decoration: none; white-space: nowrap; border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease, transform .18s ease; }
.main-nav .nav-search-button:hover, .main-nav .nav-search-button:focus-visible, .main-nav .nav-search-button.is-active { color: rgba(255,255,255,.96); background: rgba(255,255,255,.08); outline: none; }
.main-nav .nav-search-button .nav-search-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; transform: translateY(1px); }
.main-nav .nav-search-button .nav-search-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hero-search { width: min(100%, 760px); margin: 0 auto; }
.text-block { margin: 0 auto clamp(30px, 4vh, 46px); }
.hero-search[hidden] { display: none !important; }
.hero-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.hero-search-input { width: 100%; min-height: 52px; padding: 13px 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.94); background: rgba(255,255,255,.075); box-shadow: 0 18px 52px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.09); outline: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.hero-search-input::placeholder { color: rgba(255,255,255,.45); }
.hero-search-input:focus { border-color: rgba(120,196,255,.72); background: rgba(255,255,255,.095); box-shadow: 0 20px 58px rgba(30,143,255,.12), inset 0 1px 0 rgba(255,255,255,.12); }
.hero-search-submit { min-height: 52px; padding: 13px 22px; border: 1px solid rgba(30,143,255,.52); border-radius: 999px; color: rgba(255,255,255,.94); background: linear-gradient(135deg, rgba(30,143,255,.74), rgba(13,63,104,.88)); font-weight: 700; cursor: pointer; box-shadow: 0 18px 48px rgba(30,143,255,.16), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .18s ease, border-color .2s ease, background .2s ease; }
.hero-search-submit:hover, .hero-search-submit:focus-visible { transform: translateY(-1px); border-color: rgba(120,190,255,.72); background: linear-gradient(135deg, rgba(48,155,255,.86), rgba(15,80,138,.95)); outline: none; }
.search-panel .family-modal-card { max-width: 900px; }
.search-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-right: 36px; }
.search-panel-title { margin: 0; color: var(--text); font-size: clamp(1.35rem,2vw,2rem); font-weight: 500; letter-spacing: -.04em; }
.search-panel-query { margin-top: 8px; color: var(--accent-text); font-size: .9rem; font-weight: 700; }
.search-results-list { display: grid; gap: 10px; margin-top: 24px; }
.search-result-button { width: 100%; text-align: left; padding: 15px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: inherit; background: rgba(255,255,255,.045); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.search-result-button:hover, .search-result-button:focus-visible { transform: translateY(-1px); border-color: rgba(98,184,255,.42); background: rgba(30,143,255,.1); outline: none; }
.search-result-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 7px; color: var(--accent-text); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.search-result-title { color: rgba(255,255,255,.92); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.search-result-copy { margin-top: 6px; color: var(--muted); font-size: .84rem; line-height: 1.52; }
.search-result-action { display: inline-flex; margin-top: 10px; color: rgba(185,224,255,.88); font-size: .78rem; font-weight: 800; }
.search-empty-state { margin-top: 24px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: var(--muted); background: rgba(255,255,255,.045); line-height: 1.6; }
@media (max-width: 1040px) { .main-nav .nav-search-button { padding: 13px 15px; text-align: left; } .main-nav .nav-search-button .nav-search-icon { justify-content: flex-start; } }
@media (max-width: 760px) { .text-block { margin: 0 auto 30px; } .hero-search-form { grid-template-columns: 1fr; } .hero-search-input, .hero-search-submit { width: 100%; } .search-panel-head { display: block; padding-right: 28px; } }


.search-brand-groups { display: grid; gap: 16px; margin-top: 24px; }
.search-brand-group { padding: 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.search-brand-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.search-brand-group h4 { margin: 4px 0 5px; color: rgba(255,255,255,.94); font-size: 1.02rem; font-weight: 700; letter-spacing: -.025em; }
.search-brand-group p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.search-open-family { appearance: none; flex: 0 0 auto; padding: 10px 13px; border: 1px solid rgba(98,184,255,.28); border-radius: 999px; color: rgba(190,228,255,.94); background: rgba(30,143,255,.08); cursor: pointer; font-size: .78rem; font-weight: 800; white-space: nowrap; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.search-open-family:hover, .search-open-family:focus-visible { transform: translateY(-1px); border-color: rgba(98,184,255,.52); background: rgba(30,143,255,.14); outline: none; }
.search-brand-links { margin-top: 0; }
@media (max-width: 760px) { .search-brand-group-head { display: block; } .search-open-family { margin-top: 12px; } }

/* Footer: logo, social profiles, legal links and company data in one balanced row */
.footer-inner {
  display: grid;
  grid-template-columns: auto auto minmax(260px, 1fr) auto;
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
}
.footer-logo {
  justify-self: start;
  width: 118px;
  height: auto;
  max-height: 34px;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  justify-self: start;
  line-height: 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, transform .18s ease;
}
.footer-social svg {
  display: block;
  width: 17px !important;
  height: 17px !important;
  max-width: 17px;
  max-height: 17px;
  flex: none;
  fill: currentColor;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: rgba(255,255,255,.96);
  outline: none;
  transform: translateY(-1px);
}
.footer-legal {
  justify-self: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.footer-copyright {
  justify-self: end;
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 1040px) {
  .footer-inner {
    grid-template-columns: auto auto 1fr;
    column-gap: 24px;
    row-gap: 18px;
  }
  .footer-legal { justify-self: end; }
  .footer-copyright {
    grid-column: 1 / -1;
    justify-self: end;
  }
}
@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 18px;
    text-align: center;
  }
  .footer-logo,
  .footer-social,
  .footer-legal,
  .footer-copyright {
    grid-column: auto;
    justify-self: center;
  }
  .footer-legal { flex-wrap: wrap; white-space: normal; }
  .footer-copyright { white-space: normal; text-align: center; }
}




/* Single search control below the complete families grid */
.families-search-button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 34px auto 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .18s ease;
}
.families-search-icon,
.families-search-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}
.families-search-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.families-search-button:hover,
.families-search-button:focus-visible {
  color: rgba(255,255,255,.98);
  border-color: rgba(98,184,255,.5);
  background: rgba(30,143,255,.1);
  transform: translateY(-2px);
  outline: none;
}
@media (max-width: 760px) {
  .families-search-button { margin-top: 26px; }
}

/* Footer spacing refinement: social icons occupy the proportional centre between logo and legal links */
.footer-inner {
  grid-template-columns: minmax(118px, 1fr) minmax(84px, 1fr) minmax(max-content, 1fr) auto;
  column-gap: clamp(20px, 3vw, 56px);
}
.footer-social { justify-self: center; }
.footer-legal { justify-self: center; }

/* Families search: one left-aligned control beneath the complete card grid */
.families-search-button {
  width: auto;
  height: auto;
  margin: 36px 0 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  gap: 13px;
  color: rgba(255,255,255,.66);
  background: transparent;
  text-align: left;
}
.families-search-icon,
.families-search-icon svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.families-search-text {
  display: block;
  font-size: clamp(.84rem, 1.2vw, .95rem);
  line-height: 1.45;
  letter-spacing: .01em;
}
.families-search-button:hover,
.families-search-button:focus-visible {
  color: rgba(255,255,255,.98);
  border-color: transparent;
  background: transparent;
  transform: translateX(3px);
}
@media (max-width: 1040px) {
  .footer-inner {
    grid-template-columns: minmax(118px, 1fr) minmax(84px, 1fr) minmax(max-content, 1fr);
  }
  .footer-social { justify-self: center; }
  .footer-legal { justify-self: end; }
}
@media (max-width: 760px) {
  .families-search-button {
    margin-top: 28px;
    padding-right: 8px;
  }
  .footer-inner { grid-template-columns: 1fr; }
}

/* 2026-07-23: final footer centring and larger families search icon */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 48px);
}
.footer-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.footer-social {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}
.footer-legal {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
.footer-copyright {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.families-search-button {
  gap: 16px;
  padding: 14px 0;
}
.families-search-icon,
.families-search-icon svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.families-search-icon svg {
  stroke-width: 1.8;
}

@media (max-width: 1040px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .footer-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .footer-social { grid-column: 1; grid-row: 1; justify-self: center; }
  .footer-legal { grid-column: 2; grid-row: 1; justify-self: center; }
  .footer-copyright { grid-column: 3; grid-row: 1; justify-self: end; }
}

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 18px;
  }
  .footer-logo,
  .footer-social,
  .footer-legal,
  .footer-copyright {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }
  .families-search-icon,
  .families-search-icon svg {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}