/* Full-screen family tableau: content stays in normal flow for text enlargement. */
.families {
  --family-gold: #e1bc7b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(54px, 7vh, 100px) 7% 30px;
  display: flex;
  flex-direction: column;
  background: #071522;
}
.families-art {
  position: absolute;
  z-index: -3;
  inset: -5% 0;
  background: url('assets/families-palace.jpg') center 56% / cover no-repeat;
  will-change: transform;
}
.families-haze {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #051321b0 0%, transparent 32%, transparent 73%, #051321e8 100%), linear-gradient(90deg, #051321bd, #05132155 29%, transparent 43%, transparent 57%, #05132155 71%, #051321bd);
}
.families-border {position:absolute;inset:22px;border:1px solid #e1bc7b40;z-index:-1;pointer-events:none}
.families-border::before,.families-border::after {content:'✧';position:absolute;left:50%;transform:translateX(-50%);color:var(--family-gold);font-size:24px;line-height:1;background:#0a1926;padding:0 14px}
.families-border::before{top:-12px}.families-border::after{bottom:-12px}
.families .section-heading {text-shadow:0 3px 28px #030d19;margin-bottom:20px}
.families .section-heading>.eyebrow {font-size:12px;letter-spacing:4px;color:var(--family-gold);margin-bottom:17px}
.families h2 {font-size:clamp(60px,6.2vw,108px);line-height:1.05;margin-bottom:0;letter-spacing:-2px}
.families h2 em {font-size:.66em;color:var(--family-gold);padding:0 .15em}
.families .section-heading .ornament {margin:18px auto 0;font-size:20px}
.families .family-grid {width:100%;max-width:1500px;grid-template-columns:minmax(0,1fr) minmax(240px,1.05fr) minmax(0,1fr);gap:3vw;flex:1;margin:20px auto;min-height:360px;align-items:center}
.families .family {text-shadow:0 2px 20px #020c19;position:relative;padding:30px 0}
.families .family .eyebrow {font-size:12px;letter-spacing:4px;color:var(--family-gold);margin-bottom:18px}
.families .family h3 {font-size:clamp(56px,5.2vw,88px);line-height:.98;margin-bottom:20px}
.families .family h3 em {font-size:.7em;color:#eedab6;margin-top:9px}
.families .gold-line {width:48px;background:var(--family-gold);margin:24px auto}
.families .family p:not(.eyebrow) {font-size:16px;line-height:1.8;color:#c5cbd4;margin-bottom:16px}
.families .family p span {color:#fff4e3;font-weight:400}
.family-scene-space {height:100%;min-height:360px}
.families-bottom {position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0 12px}
.families .hashtag {margin:0;font-size:30px;color:#f3d59f;text-shadow:0 2px 15px #020c19}
.family-continue {display:flex;align-items:center;gap:18px;color:#eddbbe;font-size:10px;letter-spacing:3px;padding:10px}
.family-continue span {font-size:19px;transition:transform .3s}.family-continue:hover span{transform:translateY(4px)}
@media(min-width:1600px){.families .family-grid{min-height:470px}}
@media(max-width:800px){
  .families{padding:60px 24px 32px;min-height:100svh}
  .families-border{inset:14px}
  .families-art{inset:0 0 auto;height:650px;background-size:auto 650px;background-position:center top;transform:none!important}
  .families-haze{background:linear-gradient(180deg,#05132166,transparent 170px,transparent 440px,#071522 640px)}
  .families h2{font-size:clamp(42px,9vw,70px);letter-spacing:-1px}
  .families h2 em{padding:0;font-size:.62em}
  .families .section-heading>.eyebrow{font-size:10px;letter-spacing:2.5px}
  .families .section-heading .ornament{margin-top:12px}
  .families .family-grid{grid-template-columns:1fr 1fr;gap:25px 18px;margin:0;min-height:0;align-items:start}
  .family-scene-space{grid-column:1/-1;grid-row:1;min-height:340px}
  .families .family{padding:20px 0 0}
  .families .family h3{font-size:clamp(34px,8vw,54px);line-height:1.05}
  .families .family h3 em{display:block;font-size:.7em}
  .families .family .eyebrow{font-size:10px;letter-spacing:2.5px}
  .families .family p:not(.eyebrow){font-size:14px;line-height:1.65}
  .families .gold-line{margin:20px auto}
  .families-bottom{padding-top:35px}.families .hashtag{font-size:27px}
}
@media(max-width:350px){.families .family-grid{grid-template-columns:1fr}.families .family{padding-top:10px}}
@media(prefers-reduced-motion:reduce){.families-art{transform:none!important}}
.motion-paused .families-art{transform:none!important}

/* Companion celebration action, deliberately without a border. */
.family-continue{gap:22px;min-height:62px;padding:9px 14px 9px 28px;background:linear-gradient(120deg,#102e3cf5,#071b27f5);color:#f2dfb9;border:0;border-radius:3px;box-shadow:0 8px 28px #0006;font-size:12px;font-weight:400;letter-spacing:2.2px;transition:background .3s,transform .3s,box-shadow .3s}
.family-continue .journey-label{font-size:inherit;transform:none}
.family-continue .celebrations-icon{display:grid;place-items:center;width:40px;height:40px;color:#efd09d;font-size:25px;line-height:1;letter-spacing:0;animation:celebrations-glow 3s ease-in-out infinite,celebrations-bounce 1.8s ease-in-out infinite}
.family-continue:hover{transform:translateY(-3px);background:linear-gradient(120deg,#183e4e,#0b2332);box-shadow:0 12px 32px #0007}
.family-continue:hover .journey-label{transform:none}
.family-continue:hover .celebrations-icon{transform:translateY(3px)}
@keyframes celebrations-glow{0%,100%{text-shadow:0 0 5px #c5a77530}50%{text-shadow:0 0 16px #efd09db0}}
@media(max-width:800px){.family-continue{gap:14px;padding:9px 12px 9px 24px;min-height:58px;font-size:11px;letter-spacing:1.6px}.family-continue .celebrations-icon{width:36px;height:36px;font-size:23px}}
@media(prefers-reduced-motion:reduce){.family-continue .celebrations-icon{animation:none}.family-continue{transition:none}}
.motion-paused .family-continue .celebrations-icon{animation:none}

@keyframes celebrations-bounce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}