/* Åstveit Hero — only var(--e-global-…) for colors/fonts. */
.as-hero{
  --as-ov:var(--e-global-color-dark); --as-wave:var(--e-global-color-surfacealt);
  position:relative; min-height:clamp(600px, 86vh, 880px); display:flex; align-items:center;
  color:var(--e-global-color-surface); overflow:hidden; isolation:isolate; background:var(--e-global-color-dark);
}
.as-hero .as-hero__media{ position:absolute; inset:auto 0 0 0; width:100%; height:128%; max-width:none; object-fit:cover; object-position:var(--as-hero-px,72%) var(--as-hero-py,100%); z-index:-2; }
.as-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(95deg, color-mix(in srgb, var(--as-ov) 86%, transparent) 0%, color-mix(in srgb, var(--e-global-color-secondary) 62%, transparent) 36%, color-mix(in srgb, var(--e-global-color-primary) 12%, transparent) 70%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--as-ov) 40%, transparent), transparent 45%);
}
.as-hero .as-hero__inner{ padding-block:110px 200px; }
.as-hero .as-hero__place{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 12px; margin-bottom:26px;
  border-radius:999px; background:color-mix(in srgb, var(--e-global-color-surface) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--e-global-color-surface) 30%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); line-height:1.65;
}
.as-hero .as-hero__place svg{ width:20px; height:20px; }
.as-hero .as-hero__title{ color:var(--e-global-color-surface); max-width:15ch; margin:0 0 .4em; text-wrap:balance; }
.as-hero .as-hero__lead{ max-width:40ch; color:var(--e-global-color-surface); margin:0 0 2em; }
.as-hero .as-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.as-hero .as-hero__toggle,.as-hero .as-hero__toggle:focus{
  position:absolute; right:var(--as-side); bottom:clamp(120px, 12vw, 190px); z-index:3; padding:0;
  width:68px; height:68px; border-radius:50%; display:grid; place-items:center;
  border:2px solid color-mix(in srgb, var(--e-global-color-surface) 55%, transparent);
  background:color-mix(in srgb, var(--e-global-color-dark) 40%, transparent); color:var(--e-global-color-surface);
  cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background-color .2s, border-color .2s;
}
.as-hero .as-hero__toggle:hover{ background:var(--e-global-color-primary); border-color:var(--e-global-color-surface); color:var(--e-global-color-surface); }
.as-hero .as-hero__toggle svg{ width:22px; height:22px; }
.as-hero .as-hero__toggle .i-play{ display:none; margin-left:3px; }
.as-hero .as-hero__toggle.is-paused .i-play{ display:block; }
.as-hero .as-hero__toggle.is-paused .i-pause{ display:none; }

.as-hero .as-hero__ridges{ bottom:-1px; z-index:2; }
.as-hero .as-hero__ridges path{ fill:var(--as-wave); }
.as-hero .as-hero__ridges .r-1{ fill-opacity:.28; }
.as-hero .as-hero__ridges .r-2{ fill-opacity:.55; }

@media (max-width:640px){
  .as-hero .as-hero__inner{ padding-block:70px 200px; }
  .as-section.as-hero .as-hero__title{ font-size:clamp(1.85rem, 7.4vw, 2.5rem); hyphens:auto; overflow-wrap:break-word; }
  .as-hero .as-hero__actions .as-btn{ width:100%; justify-content:center; }
  .as-hero .as-hero__toggle{ width:60px; height:60px; bottom:96px; }
}