/* Garnspecialisten case: one idea per screen, told by scrolling, in eJoy's warm palette. */
.gs { --gs-paper:#fffdf8; --gs-rust:#a3482d; --gs-lime:#dbe8b5; --gs-dark:#253d32; --gs-soft:#e8ecdf; --gs-ease:cubic-bezier(.2,.7,.2,1); }
.gs .gs-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.gs h1,.gs h2,.gs h3 { color:var(--home-ink); font-weight:800; text-wrap:balance; }
.gs p { text-wrap:pretty; }
.gs h1>span,.gs h2>span { color:var(--gs-rust); }
.gs .gs-eyebrow { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--home-muted); }
.gs .gs-head { max-width:880px; margin:0 auto; text-align:center; }
.gs .gs-head h2,.gs .gs-prompt h2,.gs .gs-cta h2 { font-size:clamp(42px,6.2vw,84px); line-height:1.02; letter-spacing:-.055em; margin-top:18px; }
.gs .gs-sub { font-size:clamp(18px,1.7vw,22px); line-height:1.55; color:var(--home-muted); max-width:680px; margin:28px auto 0; }

/* Scroll reveal. Without JavaScript everything is simply visible. */
.gs.gs-js [data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .9s var(--gs-ease),transform .9s var(--gs-ease); }
.gs.gs-js [data-reveal].is-visible { opacity:1; transform:none; }
.gs.gs-js .gs-tiles>[data-reveal]:nth-child(2),.gs.gs-js .gs-points>[data-reveal]:nth-child(2) { transition-delay:.12s; }
.gs.gs-js .gs-tiles>[data-reveal]:nth-child(3),.gs.gs-js .gs-points>[data-reveal]:nth-child(3) { transition-delay:.24s; }

/* Hero */
.gs .gs-hero { padding:28px 0 40px; text-align:center; overflow-x:clip; }
.gs .gs-back { display:flex; width:fit-content; align-items:center; gap:10px; font-size:13px; color:var(--home-muted); }
.gs .gs-back:hover { color:var(--home-accent); }
.gs .gs-hero-copy { max-width:980px; margin:0 auto; padding-top:10px; }
.gs .gs-client { display:inline-flex; align-items:center; gap:16px; }
.gs .gs-client span { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--home-muted); padding-right:16px; border-right:1px solid var(--home-rule); line-height:2.4; }
.gs .gs-client img { display:block; width:140px; height:auto; }
.gs .gs-hero h1 { font-size:clamp(50px,7.4vw,104px); line-height:.98; letter-spacing:-.06em; margin-top:24px; }
.gs .gs-lead { font-size:clamp(19px,1.9vw,24px); line-height:1.5; max-width:700px; margin:24px auto 0; color:var(--home-muted); }
.gs .gs-lead strong { color:var(--home-ink); font-weight:650; }
.gs .gs-hero .home-button { margin-top:30px; }

/* Three versions of the same mail, fanned out like a product line-up. */
.gs .gs-fan { position:relative; height:37em; margin:52px auto 0; font-size:13px; }
.gs .gs-fan .gs-mail { position:absolute; left:50%; top:0; margin-left:-11em; transition:transform 1.3s var(--gs-ease),opacity 1s var(--gs-ease); }
.gs .gs-fan .gs-mail-dk { z-index:2; }
.gs .gs-fan .gs-mail-se { transform:translate(-66%,2.4em) rotate(-7deg) scale(.9); }
.gs .gs-fan .gs-mail-no { transform:translate(66%,2.4em) rotate(7deg) scale(.9); }
.gs .gs-fan .gs-mail-art[data-banner="source"] { display:none; }
.gs.gs-js .gs-fan:not(.is-visible) .gs-mail { transform:translateY(2em) scale(.94); }
.gs.gs-js .gs-fan.is-visible .gs-mail-se,.gs.gs-js .gs-fan.is-visible .gs-mail-no { transition-delay:.25s; }

/* "Det starter med én sætning." */
.gs .gs-prompt { padding:150px 0 30px; text-align:center; }
.gs .gs-composer { display:flex; align-items:center; gap:18px; max-width:800px; margin:56px auto 0; padding:14px 14px 14px 32px; text-align:left; background:var(--gs-paper); border:1px solid var(--home-rule); border-radius:999px; box-shadow:0 30px 60px -32px #253d3266; }
.gs .gs-composer-text { position:relative; flex:1; font-size:clamp(17px,2vw,24px); line-height:1.4; font-weight:600; letter-spacing:-.02em; color:var(--home-ink); }
.gs .gs-ghost { visibility:hidden; }
.gs .gs-typed { position:absolute; inset:0; }
.gs .gs-typed.is-typing::after { content:''; display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em; background:var(--gs-rust); animation:gs-caret 1s steps(2) infinite; }
.gs .gs-composer-send { flex-shrink:0; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#fff; background:var(--home-ink); transition:background .3s,transform .3s; }
.gs .gs-composer-send svg { width:24px; height:24px; }
.gs.gs-js .gs-composer:not(.is-ready) .gs-composer-send { background:#d5d9cb; transform:scale(.92); }
.gs .gs-prompt .gs-prompt-note { font-size:clamp(17px,1.6vw,20px); color:var(--home-muted); margin-top:40px; }
@keyframes gs-caret { 50% { opacity:0; } }

/* The story: a sticky stage beside five short steps. */
.gs .gs-story { padding:40px 0 60px; }
.gs .gs-story-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); column-gap:64px; }
.gs .gs-stage-wrap { grid-column:2; grid-row:1; }
.gs .gs-steps { grid-column:1; grid-row:1; padding:4vh 0 10vh; }
.gs .gs-step { min-height:82vh; display:flex; flex-direction:column; justify-content:center; max-width:470px; }
.gs.gs-js .gs-step { opacity:.2; transition:opacity .5s; }
.gs.gs-js .gs-step.is-active { opacity:1; }
.gs .gs-step .gs-step-tool { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; color:var(--home-accent); }
.gs .gs-step-tool span { font-size:12px; font-weight:600; color:var(--home-muted); border:1px solid #cfd3c2; border-radius:99px; padding:3px 10px; }
.gs .gs-step h3 { font-size:clamp(32px,3.5vw,50px); line-height:1.05; letter-spacing:-.05em; margin-top:16px; }
.gs .gs-step p:not(.gs-step-tool) { font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--home-muted); margin-top:18px; }

.gs .gs-stage { position:sticky; font-size:min(18px,calc((100vh - 120px) / 38.6),calc((min(100vw,1180px) - 128px) * .512 / 30)); top:max(calc(var(--gs-header,88px) + 16px),calc(var(--gs-header,88px) / 2 + 50vh - 19.3em)); }
.gs .gs-stage-tool { position:relative; height:2.6em; margin-bottom:2em; }
.gs .gs-stage-tool span { position:absolute; left:50%; top:0; display:inline-flex; align-items:center; gap:.7em; padding:.65em 1.2em; white-space:nowrap; font-size:.85em; font-weight:600; color:#f6f3ec; background:var(--home-ink); border-radius:99px; opacity:0; transform:translate(-50%,.5em); transition:opacity .4s,transform .4s; }
.gs .gs-stage-tool span::before { content:''; width:.55em; height:.55em; border-radius:50%; background:var(--gs-lime); animation:gs-pulse 1.8s infinite; }
@keyframes gs-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.gs .gs-stage[data-step="1"] [data-for="1"],.gs .gs-stage[data-step="2"] [data-for="2"],.gs .gs-stage[data-step="3"] [data-for="3"],.gs .gs-stage[data-step="4"] [data-for="4"],.gs .gs-stage[data-step="5"] [data-for="5"] { opacity:1; transform:translate(-50%,0); }
.gs .gs-stage-device { position:relative; width:22em; margin:0 auto; }
.gs .gs-stage-mails { position:relative; height:34em; transition:opacity .6s var(--gs-ease),transform .6s var(--gs-ease); }
.gs .gs-stage[data-step="5"] .gs-stage-mails { opacity:.45; transform:scale(.96); }
.gs .gs-stage-mails .gs-mail { position:absolute; left:0; top:0; opacity:0; transform:translateY(.8em) scale(.985); transition:opacity .6s var(--gs-ease),transform .6s var(--gs-ease); }
.gs .gs-stage[data-market="dk"] .gs-mail-dk,.gs .gs-stage[data-market="se"] .gs-mail-se,.gs .gs-stage[data-market="no"] .gs-mail-no { opacity:1; transform:none; }
/* The banner stays Danish until Canva has made the local versions. */
.gs .gs-stage .gs-mail-art[data-banner="source"],.gs .gs-stage[data-step="4"] .gs-mail-art[data-banner="local"],.gs .gs-stage[data-step="5"] .gs-mail-art[data-banner="local"] { opacity:1; }
.gs .gs-stage .gs-mail-art[data-banner="local"],.gs .gs-stage[data-step="4"] .gs-mail-art[data-banner="source"],.gs .gs-stage[data-step="5"] .gs-mail-art[data-banner="source"] { opacity:0; }
.gs .gs-stage[data-step="2"] .gs-mail-products,.gs .gs-stage[data-step="2"] .gs-mail-button { box-shadow:0 0 0 .3em #fff,0 0 0 .45em var(--home-accent); }

.gs .gs-float { position:absolute; z-index:3; display:flex; flex-direction:column; padding:1em 1.15em .6em; background:var(--gs-paper); border:1px solid var(--home-rule); border-radius:1em; box-shadow:0 1.8em 3.2em -1.4em #253d3266; opacity:0; transform:translateY(1em); transition:opacity .5s var(--gs-ease),transform .5s var(--gs-ease); }
.gs .gs-float strong { font-size:.74em; font-weight:700; color:var(--home-ink); margin-bottom:.5em; }
.gs .gs-float span { display:flex; align-items:center; gap:.7em; padding:.6em 0; font-size:.72em; white-space:nowrap; color:#405247; border-top:1px solid #ecebe3; opacity:0; transform:translateX(-.6em); transition:opacity .4s,transform .4s; }
.gs .gs-float b { flex-shrink:0; font-size:.85em; font-weight:700; padding:.3em .45em; border-radius:.35em; background:#eef0e6; color:var(--home-ink); }
.gs .gs-float em { margin-left:auto; padding:.25em .65em; border-radius:99px; font-size:.9em; font-style:normal; font-weight:600; color:var(--home-accent); background:var(--gs-soft); }
.gs .gs-float em.is-source { color:var(--home-muted); background:#efeee8; }
.gs .gs-links-card { left:14.6em; top:8.2em; }
.gs .gs-links-card small { display:flex; flex-direction:column; font-size:1em; line-height:1.35; color:var(--home-ink); font-weight:600; }
.gs .gs-links-card small i { font-style:normal; font-weight:400; font-size:.88em; color:var(--home-muted); }
.gs .gs-drafts-card { left:50%; bottom:6em; width:20em; font-size:1.1em; transform:translate(-50%,1em); }
.gs .gs-stage[data-step="2"] .gs-links-card { opacity:1; transform:none; }
.gs .gs-stage[data-step="5"] .gs-drafts-card { opacity:1; transform:translate(-50%,0); }
.gs .gs-stage[data-step="2"] .gs-links-card span,.gs .gs-stage[data-step="5"] .gs-drafts-card span { opacity:1; transform:none; }
.gs .gs-float span:nth-of-type(1) { transition-delay:.25s; }
.gs .gs-float span:nth-of-type(2) { transition-delay:.55s; }
.gs .gs-float span:nth-of-type(3) { transition-delay:.85s; }

.gs .gs-canva-frame { position:absolute; z-index:2; left:-.4em; right:-.4em; top:3.8em; height:11.8em; border:.14em solid var(--home-accent); border-radius:.35em; pointer-events:none; opacity:0; transform:scale(1.03); transition:opacity .5s,transform .5s var(--gs-ease); }
.gs .gs-canva-frame b { position:absolute; left:-.14em; top:-2.1em; font-size:.72em; font-weight:700; line-height:1; color:#fff; background:var(--home-accent); padding:.45em .7em; border-radius:.35em; }
.gs .gs-canva-frame i { position:absolute; width:.8em; height:.8em; background:#fff; border:.14em solid var(--home-accent); border-radius:50%; }
.gs .gs-canva-frame i:nth-of-type(1) { left:-.47em; top:-.47em; }
.gs .gs-canva-frame i:nth-of-type(2) { right:-.47em; top:-.47em; }
.gs .gs-canva-frame i:nth-of-type(3) { left:-.47em; bottom:-.47em; }
.gs .gs-canva-frame i:nth-of-type(4) { right:-.47em; bottom:-.47em; }
.gs .gs-stage[data-step="4"] .gs-canva-frame { opacity:1; transform:none; }

/* One big number. */
.gs .gs-time { padding:150px 0 160px; text-align:center; color:#f6f3ec; background:var(--gs-dark); }
.gs .gs-time .gs-eyebrow { color:#a8b5a3; }
.gs .gs-time h2 { margin-top:28px; color:#f6f3ec; }
.gs .gs-time-before { position:relative; display:inline-block; font-size:clamp(26px,3.4vw,44px); line-height:1.2; font-weight:700; letter-spacing:-.035em; color:#9fb09a; }
.gs .gs-time-before::after { content:''; position:absolute; left:-5%; right:-5%; top:54%; height:.08em; border-radius:1em; background:#e6bba0; transform:scaleX(0); transform-origin:left; transition:transform .8s .5s cubic-bezier(.6,0,.2,1); }
.gs .gs-time .is-visible .gs-time-before::after,.gs:not(.gs-js) .gs-time-before::after { transform:none; }
.gs .gs-time-big { display:block; margin-top:8px; white-space:nowrap; font-size:clamp(76px,19vw,250px); line-height:.92; letter-spacing:-.065em; color:var(--gs-lime); }
.gs .gs-time .gs-time-copy { font-size:clamp(18px,1.8vw,22px); line-height:1.55; color:#d5d9cb; max-width:560px; margin:36px auto 0; }

/* The tools. */
.gs .gs-tools { padding:150px 0 140px; }
.gs .gs-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:72px; }
.gs .gs-tile { display:flex; flex-direction:column; min-height:330px; padding:32px 32px 36px; background:var(--gs-paper); border:1px solid var(--home-rule); border-radius:26px; }
.gs .gs-tile-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:auto; }
.gs .gs-icon { display:grid; place-items:center; width:52px; height:52px; flex-shrink:0; border-radius:15px; color:var(--home-accent); background:var(--gs-soft); }
.gs .gs-icon svg { width:26px; height:26px; }
.gs .gs-badge { font-size:12px; font-weight:700; line-height:1; padding:8px 12px; border-radius:99px; color:var(--gs-dark); background:var(--gs-lime); }
.gs .gs-badge-soon { font-weight:600; color:var(--home-muted); background:none; border:1px solid #cfd3c2; }
.gs .gs-tile h3 { font-size:30px; line-height:1.1; letter-spacing:-.045em; margin-top:56px; }
.gs .gs-tile p { font-size:17px; line-height:1.55; color:var(--home-muted); margin-top:12px; }
.gs .gs-tile-main { background:var(--gs-dark); border-color:var(--gs-dark); }
.gs .gs-tile-main h3 { color:#f6f3ec; }
.gs .gs-tile-main p { color:#d5d9cb; }
.gs .gs-tile-main .gs-icon { color:var(--gs-lime); background:#dbe8b521; }
.gs .gs-tools .gs-tools-note { text-align:center; font-size:16px; color:var(--home-muted); margin-top:36px; }

/* Safety. */
.gs .gs-safe { padding:150px 0; background:var(--gs-paper); border-top:1px solid var(--home-rule); border-bottom:1px solid var(--home-rule); }
.gs .gs-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; margin-top:84px; text-align:center; }
.gs .gs-points .gs-icon { margin:0 auto; }
.gs .gs-points h3 { font-size:22px; letter-spacing:-.03em; margin-top:22px; }
.gs .gs-points p { font-size:16px; line-height:1.6; color:var(--home-muted); max-width:300px; margin:10px auto 0; }

/* Call to action. */
.gs .gs-cta { padding:150px 0 120px; text-align:center; }
.gs .gs-cta-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px 32px; margin-top:42px; }
.gs .gs-notes { padding-bottom:30px; }
.gs .gs-notes p { font-size:12px; line-height:1.7; color:#80877b; padding-top:20px; border-top:1px solid var(--home-rule); }

@media(max-width:1000px) {
  .gs .gs-tile { padding:28px 26px 30px; min-height:300px; }
  .gs .gs-tile h3 { font-size:27px; }
  .gs .gs-points { gap:32px; }
}

@media(max-width:879px) {
  .gs .gs-fan { font-size:11px; margin-top:64px; }
  .gs .gs-prompt { padding-top:110px; }
  .gs .gs-composer { border-radius:28px; padding:16px 12px 16px 22px; }
  .gs .gs-story { padding-top:28px; }
  .gs .gs-story-grid { display:block; }
  .gs .gs-stage-wrap { position:sticky; top:var(--gs-header,76px); z-index:2; margin:0 -24px; padding:14px 24px 24px; background:var(--home-bg); }
  .gs .gs-stage .gs-mail { box-shadow:0 1.2em 2.2em -1.2em #253d3247,0 .2em .6em #253d320d; }
  .gs .gs-stage { position:relative; top:auto; font-size:min(13px,calc((100vh - 76px) * .5 / 34),calc((100vw - 48px) / 28)); font-size:min(13px,calc((100svh - 76px) * .5 / 34),calc((100vw - 48px) / 28)); }
  .gs .gs-stage-tool { display:none; }
  .gs .gs-links-card,.gs .gs-drafts-card { font-size:1.08em; }
  .gs .gs-links-card { left:auto; right:-1.6em; top:14.4em; }
  .gs .gs-drafts-card { bottom:4em; width:19em; }
  .gs .gs-steps { position:relative; z-index:1; padding:0 0 22vh; }
  .gs .gs-step { min-height:62vh; min-height:62svh; max-width:560px; margin:0 auto; text-align:center; align-items:center; }
  .gs .gs-step h3 { font-size:clamp(28px,7vw,40px); margin-top:12px; }
  .gs .gs-step p:not(.gs-step-tool) { font-size:16px; margin-top:12px; }
  .gs .gs-time { padding:110px 0 120px; }
  .gs .gs-tools { padding:110px 0 100px; }
  .gs .gs-tiles { grid-template-columns:1fr; gap:14px; margin-top:52px; }
  .gs .gs-tile { min-height:0; }
  .gs .gs-tile h3 { margin-top:36px; }
  .gs .gs-safe { padding:110px 0; }
  .gs .gs-points { grid-template-columns:1fr; gap:44px; margin-top:60px; }
  .gs .gs-cta { padding:110px 0 90px; }
}

@media(max-width:600px) {
  .gs .gs-hero { padding-top:20px; }
  .gs .gs-hero-copy { padding-top:24px; }
  .gs .gs-client img { width:118px; }
  .gs .gs-client span { font-size:11px; padding-right:13px; }
  .gs .gs-hero h1 { font-size:clamp(40px,11.6vw,56px); margin-top:24px; }
  .gs .gs-lead { font-size:17px; margin-top:22px; }
  .gs .gs-hero .home-button { margin-top:28px; }
  .gs .gs-fan { font-size:8.6px; margin-top:52px; }
  .gs .gs-fan .gs-mail-se { transform:translate(-48%,2.4em) rotate(-7deg) scale(.88); }
  .gs .gs-fan .gs-mail-no { transform:translate(48%,2.4em) rotate(7deg) scale(.88); }
  .gs .gs-head h2,.gs .gs-prompt h2,.gs .gs-cta h2 { font-size:clamp(36px,10.4vw,48px); }
  .gs .gs-sub { font-size:17px; margin-top:20px; }
  .gs .gs-prompt { padding-top:90px; }
  .gs .gs-composer { margin-top:40px; gap:12px; }
  .gs .gs-composer-text { font-size:17px; }
  .gs .gs-composer-send { width:44px; height:44px; }
  .gs .gs-composer-send svg { width:20px; height:20px; }
  .gs .gs-prompt .gs-prompt-note { font-size:16px; margin-top:28px; }
  .gs .gs-time { padding:90px 0 100px; }
  .gs .gs-time .gs-time-copy { font-size:17px; }
  .gs .gs-tools,.gs .gs-safe { padding:90px 0; }
  .gs .gs-tile { padding:24px 22px 26px; border-radius:22px; }
  .gs .gs-tile p { font-size:16px; }
  .gs .gs-cta { padding:90px 0 70px; }
  .gs .gs-cta-actions { flex-direction:column; gap:22px; margin-top:32px; }
}

@media(prefers-reduced-motion:reduce) {
  .gs.gs-js [data-reveal] { opacity:1; transform:none; }
  .gs .gs-time-before::after { transform:none; }
}

/* The cue belongs to the story: quiet typography and the same rhythm as the copy. */
.gs .gs-scroll-cue { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; margin-top:32px; padding:18px 0 8px; border-top:1px solid var(--home-rule); color:var(--home-muted); font-size:13px; font-weight:500; text-decoration:none; transition:color .3s var(--gs-ease); }
.gs .gs-scroll-meta { display:flex; align-items:center; gap:20px; }
.gs .gs-scroll-count { font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.gs .gs-scroll-count i { font-style:normal; opacity:.45; margin-left:3px; }
.gs .gs-scroll-cue svg { width:22px; height:22px; transition:transform .4s var(--gs-ease); }
.gs .gs-scroll-cue:hover { color:var(--home-ink); }
.gs .gs-scroll-cue:hover svg { transform:translateY(3px); }
.gs .gs-scroll-cue:focus-visible { outline:2px solid var(--home-accent); outline-offset:6px; }
@media(max-width:879px) {
  .gs .gs-scroll-cue { max-width:320px; margin-top:24px; padding-top:16px; text-align:left; }
  .gs .gs-step { scroll-margin-top:calc(70svh - 31svh); }
}
@media(prefers-reduced-motion:reduce) { .gs .gs-scroll-cue,.gs .gs-scroll-cue svg { transition:none; } }