.hero-scroll{position:relative;height:660vh}
.hero-stage{position:sticky;top:0;height:100vh;background:var(--bg);color:var(--bg);isolation:isolate;overflow:hidden}
.hero-frame{position:absolute;inset:20px;z-index:1;border-radius:var(--r-section);overflow:hidden;isolation:isolate;transform-origin:center}
.hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero-tint{position:absolute;inset:0;z-index:1;background:var(--ink);opacity:.4;pointer-events:none}
.hero-shade{position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:inherit;opacity:0}
/* Copy sits 60px inside the 20px frame, not against the frame edge. */
.hero-content{position:absolute;top:20px;right:calc(20px + var(--gutter));bottom:20px;left:calc(20px + var(--gutter));z-index:2;width:auto;height:auto;padding-top:calc(var(--frame-inner) + 124px);display:grid;grid-template-rows:auto auto auto auto auto 1fr;align-content:start}
.hero-kicker{color:var(--bg);opacity:.85;margin-bottom:18px}
.hero-content .h1{max-width:1000px}
.hero-lead{max-width:400px;margin-top:30px}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:36px}
.hero-actions .btn-accent{background:var(--green);color:var(--cta)}
.hero-actions .btn-accent:hover{color:var(--ink)}
.hero-actions .btn-accent i{background:var(--cta)}
.hero-fine{color:var(--bg);opacity:.8;margin-top:0;display:flex;align-items:center}
/* Proof row and integration marquee are scaled up ~25% so icon+name pairs hold next to the 450px case card. */
.hero-proof{position:absolute;left:0;bottom:124px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:14px;align-items:center}
.hero-proof .avatars{grid-row:1 / -1}
.hero-proof .avatars .avatar{width:38px;height:38px;margin-left:-8px}
.hero-proof .avatars .avatar:first-child{margin-left:0}
.hero-proof .dots{grid-column:2;align-self:start;gap:6px}
.hero-proof .dots i{width:10px;height:10px}
.hero-proof .fine{grid-column:2;align-self:end;color:var(--bg);font-size:15px;font-weight:600}
.hero-logos{position:absolute;left:0;bottom:var(--frame-inner);width:min(720px,54%);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;align-items:center}
.marquee-track li{display:inline-flex;align-items:center;gap:12px}
.marquee-track img{width:34px;height:34px;object-fit:contain}
.marquee-track img.logo-bc{width:36px;height:36px}
.marquee-track span{color:var(--white);font-size:17px;font-weight:600;line-height:1.3;white-space:nowrap}
.hero-case{position:absolute;right:0;bottom:var(--frame-inner);display:grid;grid-template-columns:153px 1fr;gap:12px;width:450px;padding:10px;color:var(--ink);background:var(--card)}
.hero-case img,.hero-case-mark{box-sizing:border-box;width:153px;height:198px;border-radius:20px;background:var(--card);transition:filter .5s var(--ease-out)}
.hero-case-mark{object-fit:cover;object-position:center}
.hero-case>div{display:flex;flex-direction:column;gap:9px;padding:6px 6px 6px 0}
.hero-case .chip{max-width:100%;height:auto;white-space:nowrap}
.hero-case p{font-size:13px;font-weight:600;line-height:1.35}
.hero-case-stat{display:grid;grid-template-columns:auto 1fr 32px;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border-radius:20px;background:var(--bg)}
.hero-case-stat-value{font:600 30px/1 var(--font-body);letter-spacing:-.03em;white-space:nowrap}
.hero-case-stat .fine{margin:0;color:var(--ink);opacity:.75}
.hero-case-arrow{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1;overflow:hidden;isolation:isolate}
.hero-case-arrow::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .45s var(--ease-out)}
.hero-case-arrow .swap{position:relative;z-index:1}
.hero-case .eksempel{left:22px;right:auto;top:22px}

/* Scroll cue: always present. ui.js dims it while the page moves and swaps
   the label at the page end to “Ta meg til toppen”. Lives as a body child so
   later sections cannot paint over it. Below the header (50). */
/* Bounce animates `translate`; dimming uses `scale`/`opacity` so resume never snaps. */
.hero-scroll-cue{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:40;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);font:600 13px/1 var(--font-display);letter-spacing:-.01em;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);translate:-50% 0;scale:1;transition:opacity .6s var(--ease-out),scale .6s var(--ease-out)}
/* The white pill lives on a pseudo-element: Safari 26 samples the fixed element's own
   background for the bottom toolbar tint, and never a pseudo-element. */
.hero-scroll-cue::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--white)}
.hero-scroll-cue svg{width:14px;height:14px;color:var(--green);transition:transform .3s var(--ease-out)}
.hero-scroll-cue.is-scrolling{opacity:.35;scale:.85;transition-duration:.25s;animation-play-state:paused}
.hero-scroll-cue.is-end svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll-cue{animation:hero-scroll-cue-bounce 1.8s ease-in-out infinite}
  @keyframes hero-scroll-cue-bounce{0%,100%{translate:-50% 0}50%{translate:-50% -8px}}
}
.hero-statement{position:absolute;left:0;right:0;top:50%;z-index:3;transform:translateY(-50%);width:min(1000px,calc(100% - var(--gutter) * 2));margin:0 auto;padding:0;text-align:center;font-size:80px;line-height:84px;letter-spacing:-.04em;color:var(--bg);opacity:1;pointer-events:none}
.hero-statement .word{display:inline-block}

.hero-panel{position:absolute;inset:0;z-index:4;background:var(--bg);color:var(--ink);transform:none;display:grid;place-items:center;padding:var(--gutter)}
.hero-panel-title{position:absolute;inset:0;height:fit-content;max-width:1000px;margin:auto;text-align:center;padding:0 var(--gutter)}
.hero-panel-title-line{display:block}
.hero-panel-title .accent-text{background:var(--cta);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.04em .18em;border-radius:.18em}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1020px}
.ba-card{display:flex;flex-direction:column;gap:18px;padding:50px;border-radius:var(--r-card);min-height:650px}
.ba-before{background:var(--card)}
.ba-after{background:var(--green);color:var(--white);opacity:0}
.ba-after .fine{color:rgba(255,255,255,.8)}
.ba-before .h3,.ba-before .ba-list{color:var(--muted)}
.ba-card .logo{margin:-8px 0 10px}
.ba-card .h3{font-size:45px;line-height:1.1;letter-spacing:-.04em;margin-bottom:auto}
.ba-list{display:flex;flex-direction:column;gap:20px;font-size:15px;line-height:1.5;font-weight:600;letter-spacing:-.03em}
.ba-list li{display:flex;align-items:center;gap:10px}
/* 25px disc, 4px padding, 3.5/40 stroke – X white on grey, check ink on cream. */
.ba-x,.ba-check{flex:none;width:25px;height:25px;border-radius:50%;background:var(--icon-muted);position:relative}
.ba-x::before,.ba-check::before{content:"";position:absolute;inset:4px;background:center/contain no-repeat}
.ba-x::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M34 5 5 34M34 34 5 5' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.ba-check{background:var(--card)}
.ba-check::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M4 22.167 14.937 33 39 7' fill='none' stroke='%23292929' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

@media (max-width:850px),(prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero-stage{position:relative;height:auto;min-height:100vh;min-height:100lvh}
  .hero-frame{position:relative;inset:auto;min-height:100vh;min-height:100lvh}
  .hero-shade{opacity:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero-content{position:relative;inset:auto;height:auto}
  .hero-statement{position:relative;top:auto;left:auto;right:auto;transform:none;opacity:1;padding:120px var(--gutter);pointer-events:auto}
  .hero-panel{position:relative;transform:none;padding:120px var(--gutter)}
  .hero-panel-title{position:relative;margin-bottom:60px}
  .ba-before,.ba-after{transform:none;opacity:1}
}
@media (max-width:1100px){
  .hero-case{width:420px;grid-template-columns:142px 1fr}
  .hero-case img,.hero-case-mark{width:142px;height:184px}
}
@media (max-width:850px){
  /* Full-bleed photo: a 10px cream inset reads as gray bars on iPhone. */
  .hero-stage{display:grid;grid-template-columns:minmax(0,1fr);background:var(--ink)}
  .hero-frame{grid-area:1/1;inset:auto;margin:0;min-height:0;border-radius:0}
  .hero-content{grid-area:1/1;width:auto;height:auto;margin:0;padding:104px var(--gutter) 48px}
  .hero-statement{grid-area:2/1}
  .hero-panel{grid-area:3/1}
  .hero-content .h1{max-width:none}
  .hero-actions{flex-wrap:wrap;gap:16px}
  /* The avatar row is 158px of fixed-width images that never shrink, so a two-column
     grid squeezed its column and spilled the photos under the text. Stack instead. */
  .hero-proof{position:relative;bottom:auto;margin-top:40px;grid-template-columns:minmax(0,1fr);row-gap:12px}
  .hero-proof .avatars{grid-row:auto}
  .hero-proof .dots,.hero-proof .fine{grid-column:1}
  .hero-logos{position:relative;bottom:auto;width:100%;margin-top:16px}
  .hero-case{position:static;width:auto;grid-template-columns:1fr;margin-top:24px}
  .hero-case img,.hero-case-mark{width:100%;aspect-ratio:4/3;height:auto}
  .hero-case>div{padding:10px}
  .ba{grid-template-columns:1fr}
  .ba-card{min-height:0;padding:28px}
  .ba-card .h3{font-size:32px;margin-bottom:24px}
  /* Sit the title with the før/etter cards, not against the statement above. */
  .hero-panel{padding:72px var(--gutter) 8px;align-content:start;overflow:auto}
  .hero-panel-title{margin-bottom:20px}
  .hero-statement{width:100%;max-width:100%;font-size:clamp(28px,8.5vw,44px);line-height:1.1;overflow-wrap:anywhere;hyphens:auto;text-align:center;padding:96px var(--gutter)}
}

/* No pinned photo on mobile: Safari 26 paints a solid tint over any fixed/sticky element at a
   viewport edge, and only in-flow content shows through its glass toolbars. The mobile hero
   therefore uses the same in-flow layout as reduced motion, above. */

@media (hover:hover) and (pointer:fine){
  .hero-case:hover img,.hero-case:hover .hero-case-mark{filter:blur(8px)}
  .hero-case:hover .hero-case-arrow::before{transform:scale(1)}
  .hero-case:hover .hero-case-arrow .swap{color:var(--green)}
  .hero-case:hover .hero-case-arrow .swap>span{transform:translateY(-110%) rotate(-30deg);opacity:0}
  .hero-case:hover .hero-case-arrow .swap::after{transform:none;opacity:1}
}

@supports not (backdrop-filter:blur(1px)){
  .hero-shade{background:rgba(0,0,0,.6)}
}