/*
 * Scroll film hero (Aerflora-style). hero-scroll.js wraps the Elementor hero in a tall
 * stage with a sticky viewport, paints a WebP frame sequence behind the hero content
 * and drives every beat from scroll position. Without the script, or with reduced
 * motion, none of these classes exist and the static hero is untouched.
 */

/* Closing-card typography: condensed caps with italic serif accents (self-hosted, OFL). */
@font-face {
  font-family: "DSH Oswald";
  src: url(fonts/oswald-var-latin.woff2) format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DSH Cormorant";
  src: url(fonts/cormorant-garamond-italic-var-latin.woff2) format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
.dsh-scroll-stage {
  position: relative;
  /* Height is set by the script from the beat table. */
}
.dsh-scroll-sticky {
  position: sticky;
  top: var(--dsh-stage-top, 0px);
  height: calc(100svh - var(--dsh-stage-top, 0px));
  overflow: hidden;
  isolation: isolate;
}
.dsh-scroll-stage .dsh-home-hero {
  height: 100%;
  min-height: 0 !important;
}

/* The film: same rectangle as the hero's own background image, drawn on a canvas. */
.dsh-scroll-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dsh-scroll-stage .dsh-home-hero > :not(.dsh-scroll-canvas):not(.dsh-scroll-layer) {
  position: relative;
  z-index: 2;
}
.dsh-scroll-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dsh-scroll-light {
  z-index: 1;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, #fffaf2 0%, rgb(255 250 242 / 0) 62%);
  mix-blend-mode: screen;
}
.dsh-scroll-scrim {
  z-index: 1;
  opacity: 0;
  background: linear-gradient(to top, rgb(8 25 45 / .55), rgb(8 25 45 / .18) 32%, transparent 55%);
}
.dsh-scroll-veil {
  z-index: 1;
  opacity: 0;
  background: #0b1d33;
}
/* Full-bleed: the film fills the whole pinned screen and the copy sits over the sky,
   with no wash over the photo. The CSS background matches the film's first crop
   (values set by the script) so the first paint does not jump. */
.dsh-scroll-stage.is-full-bleed .dsh-home-hero,
.dsh-site .dsh-scroll-stage.is-full-bleed .e-con.dsh-home-hero {
  justify-content: flex-start;
  padding: clamp(22px, 5svh, 56px) 18px 0 !important;
  background-color: #8fbdf3 !important;
  background-size: var(--dsh-film-size, cover) !important;
  background-position: var(--dsh-film-pos, 16% 0) !important;
}
.dsh-scroll-stage.is-full-bleed .dsh-home-hero p {
  color: #0f2a44;
}

/* Cloud blend into the white section below (opacity set by the script). */
.dsh-scroll-blend {
  --c: var(--dsh-blend, #fff);
  position: absolute;
  z-index: 3;
  left: -6%;
  right: -6%;
  bottom: -1px;
  height: clamp(130px, 26svh, 300px);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 58% at 6% 70%, var(--c) 0 34%, transparent 72%),
    radial-gradient(26% 50% at 24% 62%, var(--c) 0 30%, transparent 70%),
    radial-gradient(30% 56% at 43% 72%, var(--c) 0 32%, transparent 72%),
    radial-gradient(24% 48% at 61% 60%, var(--c) 0 30%, transparent 70%),
    radial-gradient(30% 56% at 79% 70%, var(--c) 0 32%, transparent 72%),
    radial-gradient(26% 52% at 97% 62%, var(--c) 0 30%, transparent 70%),
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 55%, transparent) 45%, var(--c) 78%);
}
@media (prefers-reduced-motion: no-preference) {
  .dsh-scroll-blend { animation: dsh-cloud-drift 16s ease-in-out infinite alternate; }
}
@keyframes dsh-cloud-drift {
  from { transform: translate3d(-2.5%, 0, 0); }
  to { transform: translate3d(2.5%, 0, 0); }
}

/* Drifting petals and small hearts. */
.dsh-scroll-weather {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Scroll cue: a mouse on desktop, a running line on touch screens. */
.dsh-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(22px, 3.5svh);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  translate: -50% 0;
  pointer-events: none;
  /* White on all sizes (owner request, 29 Oct); a soft dark shadow keeps it legible over the light fade. */
  color: #fff;
  filter: drop-shadow(0 1px 5px rgb(8 25 45 / .55)) drop-shadow(0 0 14px rgb(8 25 45 / .25));
}
.dsh-scroll-cue-label {
  font: 500 11px/1 "DSH Oswald", var(--dsh-body, Inter, sans-serif);
  letter-spacing: .32em;
  text-indent: .32em;
  text-transform: uppercase;
}
.dsh-scroll-cue.is-mouse .dsh-scroll-cue-icon {
  position: relative;
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 14px;
}
.dsh-scroll-cue.is-mouse .dsh-scroll-cue-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: currentColor;
}
.dsh-scroll-cue.is-touch { flex-direction: column; }
.dsh-scroll-cue.is-touch .dsh-scroll-cue-icon {
  position: relative;
  width: 1.5px;
  height: 46px;
  overflow: hidden;
  background: rgb(255 255 255 / .35);
}
.dsh-scroll-cue.is-touch .dsh-scroll-cue-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .dsh-scroll-cue.is-mouse .dsh-scroll-cue-icon::before { animation: dsh-cue-dot 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
  .dsh-scroll-cue.is-touch .dsh-scroll-cue-icon::before { animation: dsh-cue-line 2s cubic-bezier(.7, 0, .3, 1) infinite; }
}
@keyframes dsh-cue-dot {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(13px); opacity: 0; }
}
@keyframes dsh-cue-line {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Headline letters fall out of their words one at a time. */
.dsh-scroll-word {
  display: inline-block;
  overflow: hidden;
  padding: .04em .01em .16em;
  margin-bottom: -.16em;
  vertical-align: top;
  white-space: nowrap;
}
.dsh-scroll-letter {
  display: inline-block;
  will-change: transform;
}

/* Promise beats over the film. */
.dsh-scroll-hud {
  position: absolute;
  z-index: 3;
  left: max(24px, 4vw);
  bottom: max(28px, 5svh);
  pointer-events: none;
  color: #fff;
  text-shadow: 0 2px 18px rgb(8 25 45 / .35);
}
.dsh-site .dsh-scroll-count {
  display: flex;
  color: #fff;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font: 700 11px/1 var(--dsh-body, Inter, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .9;
}
.dsh-scroll-count i {
  position: relative;
  display: block;
  width: 64px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(255 255 255 / .3);
}
.dsh-scroll-count b {
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}
.dsh-scroll-beats {
  position: relative;
  height: 1.1em;
  font: 800 clamp(30px, 4.6vw, 66px)/1.05 var(--dsh-font, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: -.035em;
}
.dsh-scroll-beat {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .26em;
  white-space: nowrap;
  opacity: 0;
}

/* Beat icons: original line art that tells a short story as each beat arrives.
   The resting (non-playing) state is the finished icon. */
.dsh-beat-icon {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
}
.dsh-beat-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dsh-beat-icon svg * { transform-box: fill-box; transform-origin: 50% 50%; }
:where(.dsh-scroll-beat.is-playing) .dsh-beat-icon * { animation-duration: 1.25s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.3, .7, .3, 1); }

/* Icons in colour on every screen size (one hue each) with white details and a matching
   soft shadow: lock light blue (logo), badge green, home teal with a white tick, report
   sky blue (green badge kept). */
.dsh-beat-icon { --ic: #034ae2; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--ic) 45%, transparent)) drop-shadow(0 0 2px rgb(255 255 255 / .6)); }
.dsh-beat-icon.is-lock { --ic: #2ab4f8; }
.dsh-beat-icon.is-badge { --ic: #12b76a; }
.dsh-beat-icon.is-home { --ic: #0fb5a6; }
.dsh-beat-icon.is-report { --ic: #1aa7f2; }
.dsh-beat-icon [fill="#fff"] { fill: var(--ic); }
.dsh-beat-icon [stroke="#fff"]:not(.rp-check):not([fill="#1fc16b"]) { stroke: var(--ic); }
.dsh-beat-icon [fill="#123a5f"] { fill: #fff; }
.dsh-beat-icon [stroke="#123a5f"] { stroke: #fff; }
.dsh-beat-icon g[fill="#123a5f"] { opacity: .92; }
.dsh-beat-icon .rp-fold { fill: #9ad8fb; }

/* Lock: the open shackle swings over, drops and clicks shut; the keyhole appears. */
.dsh-beat-icon .lk-shackle { transform-box: view-box; transform-origin: 15px 20px; }
.is-playing .lk-shackle { animation-name: dsh-lk-shackle; animation-timing-function: ease-in-out; }
.is-playing .lk-body { animation-name: dsh-lk-body; }
.is-playing .lk-hole { animation-name: dsh-pop; animation-delay: .78s; animation-duration: .45s; }
@keyframes dsh-lk-shackle {
  0% { transform: translateY(-9px) scaleX(-1); opacity: 0; }
  10% { opacity: 1; }
  34% { transform: translateY(-9px) scaleX(1); }
  52% { transform: translateY(-9px) scaleX(1); }
  62% { transform: translateY(1.4px); }
  70%, 100% { transform: none; }
}
@keyframes dsh-lk-body {
  0%, 58% { transform: none; }
  64% { transform: translateY(1.6px) scale(1.03, .96); }
  76%, 100% { transform: none; }
}

/* Badge: the seal spins in, a check draws itself, a ring ripples out. */
.is-playing .bd-seal { animation-name: dsh-bd-seal; }
.is-playing .bd-check { animation-name: dsh-draw; animation-delay: .5s; animation-duration: .5s; }
.dsh-beat-icon .bd-check, .dsh-beat-icon .rp-check, .dsh-beat-icon .hm-check { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dsh-beat-icon .bd-ring { opacity: 0; }
.is-playing .bd-ring { animation-name: dsh-ring; animation-delay: .75s; animation-duration: .8s; }
@keyframes dsh-bd-seal {
  0% { transform: scale(0) rotate(-140deg); opacity: 0; }
  55% { transform: scale(1.12) rotate(10deg); opacity: 1; }
  75% { transform: scale(.96) rotate(-3deg); }
  100% { transform: none; }
}
@keyframes dsh-ring {
  0% { transform: scale(.8); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Home: the house pops up, the roof lands, a tick draws itself in. */
.dsh-beat-icon .hm-body { transform-origin: 50% 100%; }
.is-playing .hm-body { animation-name: dsh-hm-body; animation-duration: .6s; }
.is-playing .hm-roof { animation-name: dsh-hm-roof; animation-delay: .22s; animation-duration: .6s; }
.is-playing .hm-check { animation-name: dsh-draw; animation-delay: .62s; animation-duration: .45s; }
@keyframes dsh-hm-body {
  0% { transform: scale(.4); opacity: 0; }
  65% { transform: scale(1.06); opacity: 1; }
  100% { transform: none; }
}
@keyframes dsh-hm-roof {
  0% { transform: translateY(-12px); opacity: 0; }
  55% { transform: translateY(1.5px); opacity: 1; }
  75% { transform: translateY(-1px); }
  100% { transform: none; }
}
/* Report: the page rises, its lines write in, a green check badge pops on. */
.dsh-beat-icon .rp-line { transform-origin: 0 50%; }
.is-playing .rp-doc, .is-playing .rp-fold { animation-name: dsh-rp-doc; animation-duration: .55s; }
.is-playing .rp-line { animation-name: dsh-rp-line; animation-duration: .35s; }
.is-playing .rp-line:nth-child(1) { animation-delay: .3s; }
.is-playing .rp-line:nth-child(2) { animation-delay: .42s; }
.is-playing .rp-line:nth-child(3) { animation-delay: .54s; }
.is-playing .rp-badge { animation-name: dsh-pop; animation-delay: .72s; animation-duration: .5s; }
.is-playing .rp-check { animation-name: dsh-draw; animation-delay: .95s; animation-duration: .4s; }
@keyframes dsh-rp-doc {
  0% { transform: translateY(9px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes dsh-rp-line {
  0% { transform: scaleX(0); }
  100% { transform: none; }
}

/* Shared. */
@keyframes dsh-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: none; }
}
@keyframes dsh-draw {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

/* The closing card rises over the film with the hero copy and actions. */
.dsh-scroll-card {
  position: absolute;
  z-index: 4;
  inset: 6svh max(12px, 2.6vw) max(14px, 6svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3svh, 32px);
  padding: clamp(24px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 28px;
  background: linear-gradient(140deg, rgb(13 37 80 / .9), rgb(7 46 86 / .86) 55%, rgb(9 106 150 / .82));
  box-shadow: 0 -24px 80px rgb(8 25 45 / .35), inset 0 1px 0 rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  color: #fff;
  text-align: center;
  transform: translate3d(0, 106%, 0);
  will-change: transform;
  visibility: hidden;
}
.dsh-scroll-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgb(255 255 255 / .16), transparent 60%);
}
.dsh-site .dsh-scroll-card-label {
  position: relative;
  margin: 0;
  line-height: 1;
}
/* The hero's own white status pill, cloned in by the script. */
.dsh-site .dsh-scroll-card .dsh-pill {
  gap: 9px;
  padding: 8px 16px 8px 13px;
  border: 1px solid rgb(255 255 255 / .7);
  background: #fff;
  color: #13314f;
  font: 600 14px/18px var(--dsh-font, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgb(4 20 40 / .28);
}
.dsh-scroll-card .dsh-pill:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1fc16b;
  box-shadow: 0 0 0 4px #1fc16b33;
}
.dsh-site .dsh-scroll-card-text {
  position: relative;
  max-width: 24ch;
  margin: 0;
  color: #fff;
  font: 500 clamp(30px, 4.7vw, 70px)/1.06 "DSH Oswald", "Arial Narrow", var(--dsh-font, sans-serif);
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
}
.dsh-scroll-card-text > span,
.dsh-scroll-card-text > em { display: inline-block; opacity: .16; will-change: filter, opacity; }
/* Accent words: italic serif in the logo's light blue, set a touch larger than the caps. */
.dsh-site .dsh-scroll-card-text .is-accent {
  padding-inline: .04em;
  color: #2ab4f8;
  font: italic 500 1.16em/.9 "DSH Cormorant", Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
}
.dsh-scroll-card .dsh-hero-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  opacity: 0;
}

/* Tablets and phones: clear the floating bottom tab bar. */
@media (max-width: 1024px) {
  .dsh-scroll-hud { bottom: calc(var(--dsh-bottom, 76px) + 22px); }
  .dsh-scroll-cue { bottom: calc(var(--dsh-bottom, 76px) + 18px); }
  .dsh-scroll-card { inset: 3svh 14px calc(var(--dsh-bottom, 76px) + 10px); border-radius: 24px; }
}
@media (max-width: 767px) {
  .dsh-scroll-hud { left: 18px; }
  /* Phones: the card's copy and buttons fill the card. */
  .dsh-scroll-card { inset-inline: 10px; gap: 30px; padding: 28px 20px; border-radius: 22px; }
  .dsh-site .dsh-scroll-card-text { font-size: clamp(30px, min(10.4vw, 4.9svh), 46px); line-height: 1.04; }
  .dsh-site .dsh-scroll-card .dsh-pill { font-size: 15px; padding: 9px 18px 9px 14px; }
  .dsh-scroll-card .dsh-hero-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 340px; }
  .dsh-scroll-card .dsh-hero-actions .elementor-widget { width: 100%; }
  .dsh-site .dsh-scroll-card .dsh-hero-actions .elementor-button { display: flex; justify-content: center; width: 100%; padding: 18px 22px; font-size: 16px; }
}
/* Portrait tablets: larger copy to fill the taller card. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .dsh-site .dsh-scroll-card-text { font-size: clamp(46px, 7.6vw, 76px); max-width: 18ch; }
  .dsh-site .dsh-scroll-card .dsh-hero-actions .elementor-button { padding: 20px 28px; font-size: 17px; }
  .dsh-site .dsh-scroll-card .dsh-pill { font-size: 16px; padding: 10px 20px 10px 15px; }
}
/* Shorter phones: tighter rhythm so the card's content always fits. */
@media (max-width: 767px) and (max-height: 760px) {
  .dsh-scroll-card { gap: 20px; padding: 22px 18px; }
  .dsh-site .dsh-scroll-card .dsh-pill { font-size: 13px; padding: 7px 15px 7px 12px; }
  .dsh-site .dsh-scroll-card .dsh-hero-actions .elementor-button { padding: 14px 20px; font-size: 15px; }
}
@media print {
  .dsh-scroll-canvas, .dsh-scroll-layer, .dsh-scroll-hud, .dsh-scroll-card, .dsh-scroll-cue, .dsh-scroll-weather, .dsh-scroll-blend { display: none !important; }
}

/* Full-bleed screens: a touch more colour in the sky (phones read the photo smaller and
   brighter); the cue sits over the photo rather than its white fade. */
.dsh-scroll-stage.is-full-bleed .dsh-scroll-canvas { filter: saturate(1.14) contrast(1.04); }
.dsh-scroll-stage.is-full-bleed .dsh-scroll-cue {
  color: #fff;
  filter: drop-shadow(0 1px 6px rgb(8 25 45 / .65));
}
.dsh-scroll-stage.is-full-bleed .dsh-scroll-cue.is-touch .dsh-scroll-cue-icon { background: rgb(255 255 255 / .35); }

/* Phones and portrait tablets: the promise lines sit in the lower middle of the screen
   (clear of the cloud ribbon above), larger, in the headline's deep blue, with the icon
   above the words and a soft light glow behind them for contrast. */
.dsh-scroll-stage.is-full-bleed {
  --dsh-beat-ink: #034ae2;
}
.dsh-scroll-stage.is-full-bleed .dsh-scroll-hud {
  top: 71%;
  right: 16px;
  bottom: auto;
  left: 16px;
  transform: translateY(-50%);
  color: var(--dsh-beat-ink);
  text-align: center;
  text-shadow: 0 0 18px rgb(255 255 255 / .9), 0 0 4px rgb(255 255 255 / .7);
}
.dsh-site .dsh-scroll-stage.is-full-bleed .dsh-scroll-count { justify-content: center; margin-bottom: 18px; color: var(--dsh-beat-ink); font-size: 12px; }
.dsh-scroll-stage.is-full-bleed .dsh-scroll-count i { width: 84px; background: rgb(3 74 226 / .22); }
.dsh-scroll-stage.is-full-bleed .dsh-scroll-count b { background: var(--dsh-beat-ink); }
.dsh-scroll-stage.is-full-bleed .dsh-scroll-beats { height: 2.7em; font-size: clamp(32px, 9.2vw, 64px); }
.dsh-scroll-stage.is-full-bleed .dsh-scroll-beat { top: 0; right: 0; bottom: auto; left: 0; flex-direction: column; justify-content: flex-start; gap: .22em; }
.dsh-scroll-stage.is-full-bleed .dsh-beat-icon { width: 1.35em; height: 1.35em; }
/* A soft light glow behind the lines instead of the dark bottom scrim. */
.dsh-scroll-stage.is-full-bleed .dsh-scroll-scrim {
  background: radial-gradient(ellipse 80% 22% at 50% 71%, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 100%);
}

/* Desktop: hero-scroll.js places the cue over the blue lake (left/top from the film's crop)
   instead of the white fade at the bottom (owner request, 29 Oct). */
.dsh-scroll-cue.is-placed {
  bottom: auto;
  translate: -50% -50%;
  /* The headline's deep blue, lifted off the lake by a soft white glow. */
  color: #034ae2;
  filter: drop-shadow(0 0 2px rgb(255 255 255 / .95)) drop-shadow(0 0 10px rgb(255 255 255 / .8)) drop-shadow(0 4px 14px rgb(3 74 226 / .35));
}
.dsh-scroll-cue.is-placed.is-touch .dsh-scroll-cue-icon { background: rgb(3 74 226 / .25); }