/* Soma Ease hero. Animation is full-width; text sits in a sage band directly below
   (Round 2: the band matches the "No cost · No pressure" card, #e6ede7).
   Nothing overlays the video except a small accessible Pause control in the corner. */
.sky-hero{--night:#2f4132;--night-d:#263529;--cream:#f6f1e7;--gold-l:#f3dca6;
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  padding:0;margin:0;color:var(--cream);background:var(--green-dd)}

/* Video stage (Round 2, bigger on laptops/desktops): close to 16:9 (56.25vw), capped at 75% of the
   screen height and so the top of the text band (110px) still shows on the first screen under the
   84px header, never shorter than 320px. Phones and tablets keep their own rules below. */
.sky-stage{position:relative;width:100%;overflow:hidden;background:var(--night);
  height:max(320px,min(56.25vw,75svh,calc(100svh - 84px - 110px)))}
@media (max-width:599px){
  .sky-stage{height:auto;aspect-ratio:16/9;min-height:200px}
}
@media (min-width:600px) and (max-width:900px){
  .sky-stage{height:clamp(240px,calc(100svh - 84px - 200px),420px)}
}

.sky-bg,.sky-layer,.sky-video,.sky-video video,.sky-still{position:absolute;inset:0;width:100%;height:100%}
.sky-bg{z-index:0;background:radial-gradient(ellipse at 70% 30%,#405944 0,rgba(64,89,68,0) 55%),linear-gradient(180deg,var(--night) 0,var(--night-d) 100%)}
.sky-layer{opacity:0}
.sky-dusk{background:linear-gradient(180deg,#d8bc8e 0,#b39272 55%,#8a6f5a 100%)}
.sky-day{background:linear-gradient(180deg,#eef3ef 0,#e6ede7 100%)}
.sky-video{z-index:1}
.sky-video video,.sky-still{object-fit:cover;object-position:50% 42%;display:block;max-width:none}

/* Pause control lives in the video corner only */
.sky-pause{position:absolute;z-index:2;right:max(16px,2.5%);bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:10px 18px 10px 14px;border:0;border-radius:999px;background:var(--green);color:var(--cream);font:700 .875rem var(--sans);cursor:pointer}
.sky-pause[hidden]{display:none}
.sky-pause:hover{background:var(--night)}
.sky-pause:focus-visible{outline:3px solid var(--cream);outline-offset:2px;box-shadow:0 0 0 7px var(--night-d);border-radius:999px}
.sky-pause-icon{width:13px;height:16px;box-sizing:border-box;border-left:4px solid var(--cream);border-right:4px solid var(--cream)}
.sky-pause.is-paused .sky-pause-icon{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--cream)}

/* Sage text band directly below the animation: same colour and gradient as the Free Consultation card */
.sky-panel{position:relative;z-index:1;box-sizing:border-box;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:36px 24px 44px;border-radius:0;text-align:center;
  color:var(--ink);background-color:var(--sage);background-image:var(--sage-grad)}
.sky-panel>*{margin:0}
.sky-panel .eyebrow{color:var(--gold-t);font-size:.875rem;letter-spacing:.16em}
.sky-panel h1{color:var(--green-d);font-size:clamp(3.2rem,6.4vw,5.4rem);line-height:.95;letter-spacing:-.01em;font-weight:500}
.sky-panel h1 em{color:inherit;font-style:normal}
.sky-panel .lede{color:var(--ink);font:1.25rem/1.5 var(--sans);max-width:640px}
.sky-panel .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.sky-panel .btn.primary{background:var(--brand-green);color:var(--on-green)}
.sky-panel .btn.primary:hover{background:var(--brand-green-h);color:var(--on-green)}
.sky-panel .btn.ghost{border:2px solid var(--brand-green);color:var(--green)}
.sky-panel .btn.ghost:hover{background:rgba(118,193,78,.16)}
.sky-panel .creds{color:var(--gold-t);font-size:.875rem;font-weight:600;letter-spacing:.06em;border:0;padding:0}
.sky-panel :focus-visible{outline-color:var(--gold-t)}

.sky-emblem{margin:0 0 -4px;display:flex;flex-direction:column;align-items:center;gap:8px}
.sky-emblem .emblem{width:auto;height:100px;padding:0;box-sizing:border-box;object-fit:contain;
  background:transparent;filter:none}
.sky-emblem figcaption{margin:0;font:italic 1.05rem var(--serif);letter-spacing:.06em;color:var(--gold-t)}

@media (min-width:901px) and (max-width:1599px){
  .sky-panel{gap:14px;padding:32px 24px 40px}
  .sky-panel h1{font-size:clamp(3rem,5vw,4.6rem)}
  .sky-panel .lede{font-size:1.125rem}
  .sky-emblem .emblem{height:94px}
}
@media (min-width:1600px){
  .sky-panel{padding:40px 24px 52px}
  .sky-emblem .emblem{height:106px}
}
@media (max-width:599px){
  .sky-panel{gap:14px;padding:28px 20px 36px}
  .sky-panel .eyebrow{font-size:.75rem;letter-spacing:.12em}
  .sky-panel h1{font-size:3.1rem}
  .sky-panel .lede{font-size:1rem;max-width:300px}
  .sky-panel .actions{flex-direction:column;align-self:stretch}
  .sky-panel .actions .btn{width:100%;box-sizing:border-box}
  .sky-emblem .emblem{height:86px}
  .sky-emblem figcaption{font-size:.95rem}
  .sky-pause{right:14px;bottom:14px;gap:8px;padding:8px 14px 8px 10px;font-size:.8125rem}
  .sky-pause-icon{width:10px;height:14px;border-left-width:3px;border-right-width:3px}
  .sky-pause.is-paused .sky-pause-icon{border-width:7px 0 7px 11px}
  .sky-pause-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:600px) and (max-width:900px){
  .sky-panel{gap:12px;padding:28px 22px 36px}
  .sky-panel .eyebrow{font-size:.75rem;letter-spacing:.12em}
  .sky-panel h1{font-size:2.85rem}
  .sky-panel .lede{font-size:1rem;max-width:none}
  .sky-panel .actions{flex-direction:column;align-self:stretch;max-width:420px}
  .sky-panel .actions .btn{width:100%;box-sizing:border-box}
  .sky-emblem .emblem{height:90px}
  .sky-emblem figcaption{font-size:.95rem}
  .sky-pause{right:16px;bottom:16px;gap:8px;padding:8px 14px 8px 10px;font-size:.8125rem}
  .sky-pause-icon{width:10px;height:14px;border-left-width:3px;border-right-width:3px}
  .sky-pause.is-paused .sky-pause-icon{border-width:7px 0 7px 11px}
  .sky-pause-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.sky-layer{opacity:0!important}}