:root{
  --navy:#002b49;--dark-blue:#022038;--teal:#08bcb5;--light-teal:#e2f9f8;
  --purple:#6533ed;--light-purple:#f3ecff;--coral:#ff6573;--light-coral:#ffebee;
  --yellow:#ffce38;--light-yellow:#fff8df;
  --bg:#ffffff;--text:#002b49;--muted:#4a5568;--soft:#718096;--line:#edf2f7;
  --card-text:#002b49;--surface:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0b1520;--text:#e6edf3;--muted:#a9b8c7;--soft:#8a9bb0;--line:#1c2b3a;--surface:#132132}
}
:root[data-theme="dark"]{--bg:#0b1520;--text:#e6edf3;--muted:#a9b8c7;--soft:#8a9bb0;--line:#1c2b3a;--surface:#132132}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--bg);font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .4em;line-height:1.15}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 4%}}
.hand{font-family:'Kalam',cursive}
.teal{color:var(--teal)}.purple{color:var(--purple)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--purple);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}

/* NAV */
.site-header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:'Kalam',cursive;font-size:30px;font-weight:700;white-space:nowrap}
.brand-name i{color:var(--teal);font-style:normal}.brand-name b{color:var(--purple)}
.brand small{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--soft);margin-top:3px}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:700}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--purple)}
.menu-btn{display:none;background:none;border:2px solid var(--line);border-radius:10px;padding:6px 10px;font:inherit;font-weight:700;color:var(--text);cursor:pointer}
@media(max-width:860px){
  .menu-btn{display:block}
  .nav .btn.cta{display:none}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .navlinks a{padding:12px 0;border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--purple);color:#fff;border-radius:50px;padding:11px 22px;font-weight:700;font-size:14px;border:2px solid var(--purple);transition:transform .15s,opacity .15s;cursor:pointer}
.btn:hover{opacity:.92;transform:translateY(-1px)}
.btn.white{background:var(--surface);color:var(--text);border-color:#cbd5e0}
.btn.yellow{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* HERO */
.hero{display:grid;grid-template-columns:44% 56%;min-height:520px;background:linear-gradient(135deg,var(--bg) 0%,var(--light-teal) 180%)}
.hero-copy{padding:48px 32px 48px max(16px,calc((100vw - 1200px)/2 + 4%));display:flex;flex-direction:column;justify-content:center}
.hero h1{font-family:'Kalam',cursive;font-size:clamp(44px,5.5vw,68px);line-height:1.02;margin-bottom:14px}
.hero .lead{font-size:18px;font-weight:700;margin-bottom:10px}
.hero-copy p{color:var(--muted);max-width:440px}
.hero-photo{position:relative;min-height:360px;background:url('img/family-celebration.webp') center 35%/cover no-repeat}
.hero-photo .tag{position:absolute;left:24px;bottom:24px;background:var(--yellow);color:var(--navy);font-family:'Kalam',cursive;font-weight:700;font-size:22px;line-height:1.05;padding:12px 18px;border-radius:14px;transform:rotate(-4deg);box-shadow:0 6px 18px rgba(0,0,0,.15)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-copy{padding:36px 16px}.hero-photo{min-height:320px}}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:40px;padding-bottom:40px}
.card{border-radius:16px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;color:var(--navy)}
.card:nth-child(1){background:var(--light-teal)}.card:nth-child(2){background:var(--light-coral)}.card:nth-child(3){background:var(--light-yellow)}.card:nth-child(4){background:var(--light-purple)}
.card .symbol{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;margin-bottom:12px}
.card:nth-child(1) .symbol{background:var(--teal)}.card:nth-child(2) .symbol{background:var(--coral)}.card:nth-child(3) .symbol{background:#e0a800}.card:nth-child(4) .symbol{background:var(--purple)}
.card h3{font-size:18px}.card p{font-size:14px;color:#4a5568;flex:1}
.card a{font-weight:700;color:var(--purple)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}

/* SAM */
.sam{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center;padding-top:40px;padding-bottom:56px}
.sam-photo{position:relative}
.sam-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px;border:6px solid var(--yellow);transform:rotate(-2deg)}
.sam h2{font-family:'Kalam',cursive;font-size:40px}
.sam h3{font-size:18px;color:var(--purple)}
.sam p{color:var(--muted);max-width:620px}
.checks{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(2,max-content);gap:8px 24px;font-weight:700}
.checks li::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;font-size:11px;margin-right:8px}
@media(max-width:760px){.sam{grid-template-columns:1fr;gap:24px}.sam-photo{max-width:220px}.checks{grid-template-columns:1fr}}

/* COLLAGE */
.collage{background:#fefcf6;padding:36px 16px 44px}
.collage-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.polaroid{background:#fff;padding:12px 12px 16px;box-shadow:0 4px 15px rgba(0,0,0,.08);color:var(--navy);margin:0}
.polaroid:nth-child(1){transform:rotate(-2deg)}.polaroid:nth-child(2){transform:rotate(1deg)}.polaroid:nth-child(3){transform:rotate(-1deg)}.polaroid:nth-child(4){transform:rotate(2deg)}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{text-align:center;font-family:'Kalam',cursive;font-size:19px;font-weight:700;line-height:1.15;margin-top:10px}
@media(max-width:900px){.collage-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.collage-grid{grid-template-columns:1fr}}
:root[data-theme="dark"] .collage{background:#0e1a26}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .collage{background:#0e1a26}}

/* CREDENTIAL BAND */
.cred{background:var(--navy);color:#fff;padding:48px 0}
.cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cred h2{font-family:'Kalam',cursive;font-size:36px}
.cred p{color:#cbd5e0}
.cred-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px 24px}
.cred-box h3{font-size:18px}
.cred-box a{color:var(--yellow);font-weight:700}
.badge{background:var(--teal);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:12px;margin-left:6px;vertical-align:middle}
@media(max-width:860px){.cred-grid{grid-template-columns:1fr}}

/* ASK */
.ask{background:linear-gradient(180deg,#f0fdfc,#e6fffa);padding:48px 0;color:var(--navy)}
.ask-grid{display:grid;grid-template-columns:1fr 1.2fr 170px;gap:32px;align-items:center}
.ask h2{font-family:'Kalam',cursive;font-size:36px}
.ask p{color:#4a5568}
.q-pill{display:block;background:#fff;padding:13px 20px;border-radius:30px;font-size:14px;font-weight:700;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,43,73,.06)}
.q-pill:hover{color:var(--purple)}
.ask-tag{text-align:center;font-family:'Kalam',cursive;font-size:22px;font-weight:700;line-height:1.15}
.ask-tag span{display:block;font-size:36px;color:#e0a800}
@media(max-width:860px){.ask-grid{grid-template-columns:1fr}.ask-tag{text-align:left}}

/* BANNER */
.banner{background:var(--dark-blue);color:#fff;padding:36px 0}
.banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.banner h2{font-family:'Kalam',cursive;font-size:34px;margin:0}
.banner p{margin:0;color:#cbd5e0}

/* INNER PAGES */
.pagehero{padding:48px 0 24px;background:linear-gradient(135deg,var(--light-teal),transparent 70%)}
.pagehero h1{font-family:'Kalam',cursive;font-size:clamp(34px,4.5vw,50px);color:var(--text)}
.pagehero p{color:var(--muted);font-size:17px;max-width:680px}
.content{max-width:800px;margin:0 auto;padding:16px 16px 64px}
.content h2{font-size:23px;margin-top:32px}
.content p,.content li{color:var(--muted);font-size:16px;line-height:1.7}
.content a:not(.btn){color:var(--purple);text-decoration:underline}
.content.legal p,.content.legal li{font-size:14.5px}
.portrait{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;max-width:1000px}
.portrait img{border-radius:18px;width:100%;aspect-ratio:1;object-fit:cover;border:5px solid var(--yellow)}
@media(max-width:700px){.portrait{grid-template-columns:1fr}.portrait img{max-width:200px}}
.note{background:var(--light-yellow);color:#4a5568;border-radius:10px;padding:14px 18px;font-size:14px;margin:22px 0}
.faq details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;background:var(--surface)}
.faq summary{font-weight:700;cursor:pointer;font-size:16px}
.faq details p{margin:10px 0 0}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.contact-card{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surface)}
.contact-card h3{font-size:16px;margin-bottom:6px}
.contact-card p{margin:0}
@media(max-width:700px){.contact-grid{grid-template-columns:1fr}}

/* FOOTER */
.footer{border-top:1px solid var(--line);padding:40px 0 24px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.footer small{color:var(--soft)}
.footer p{color:var(--soft);font-size:13px;line-height:1.7;margin-top:12px}
.footer h4{margin:0 0 10px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--soft)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:8px}
.footer li a:hover{color:var(--purple)}
.footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;color:var(--soft);font-size:12px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* TIMESHIFT FAMILY */
.family{padding:56px 0}
.family h2{font-family:'Kalam',cursive;font-size:38px;text-align:center}
.family-sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 28px}
.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fam-card{position:relative;display:block;border:2px solid var(--line);border-top:6px solid var(--c);border-radius:16px;padding:24px;background:var(--surface);transition:transform .15s}
a.fam-card:hover{transform:translateY(-3px)}
.fam-card h3{font-family:'Kalam',cursive;font-size:28px;color:var(--c);margin-bottom:4px}
.fam-card p{color:var(--muted);margin:0}
.fam-status{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:var(--c);color:#fff;margin-bottom:12px}
.fam-card.soon{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 12px,var(--line) 12px,var(--line) 13px)}
.fam-go{display:block;margin-top:12px;font-weight:700;color:var(--purple)}
@media(max-width:860px){.family-grid{grid-template-columns:1fr}}

/* JOIN TEASER */
.join-teaser{background:var(--purple);color:#fff;padding:40px 0}
.join-teaser .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.join-teaser h2{font-family:'Kalam',cursive;font-size:34px;margin:0 0 4px}
.join-teaser p{margin:0;color:#e9e2ff;max-width:600px}

/* FORMS */
.ts-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin:16px 0 8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-bottom:18px}
.form-grid .full{grid-column:1/-1}
.ts-form label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.ts-form input:not([type=checkbox]),.ts-form select,.ts-form textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1.5px solid #cbd5e0;border-radius:10px;background:var(--bg);color:var(--text)}
.ts-form input:focus,.ts-form select:focus,.ts-form textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(101,51,237,.18)}
.ts-form .consent{font-weight:400;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.ts-form .consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--purple)}
.ts-form .hp{position:absolute;left:-9999px}
.ts-form button[disabled]{opacity:.6;cursor:wait}
.form-status{margin:12px 0 0;font-weight:700}
.form-status.ok{color:#0a8a84}.form-status.err{color:#c53040}
.content .form-fine,.form-fine{font-size:12.5px;color:var(--soft);margin:8px 0 0;line-height:1.5}
.content .form-status{font-size:15px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* CREDENTIAL STATES */
.states{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.state{font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px}
.state.ok{background:var(--teal);color:#fff}
.state.pend{background:var(--light-yellow);color:#7a5b00;border:1px dashed #e0a800}
.small-muted{font-size:13px!important;color:var(--soft)!important}

/* JOIN PAGE */
.steps{padding-left:22px}.steps li{margin-bottom:10px}
.video{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;margin:8px 0 24px;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* PARTNERS */
.content.wide{max-width:1000px}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:12px 0 8px}
.partner{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surface)}
.partner.draft{border-style:dashed;opacity:.8}
.partner h3{font-size:18px;margin:6px 0}
.partner p{font-size:14px!important;margin:0 0 10px}
.ptype{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}
@media(max-width:860px){.partner-grid{grid-template-columns:1fr}}