html.ss-no-page-scroll,
html.ss-no-page-scroll body {
  overflow: hidden !important;
  overscroll-behavior: none;
}


.ss-showcase {

  --ss-height: 800px;
  --ss-real-footer-h: 165px;

  --page-pad:
    clamp(
      72px,
      8vw,
      126px
    );

  --ink: #102f33;
  --red: #af5b5b;

  --materials-bg: #e7e8e6;
  --card: #faf9f6;

  position: relative;

  width: 100vw;
  height: var(--ss-height);

  margin-inline:
    calc(50% - 50vw);

  overflow: hidden;

  font-family:
    "Geist",
    sans-serif;
}


.ss-showcase *,
.ss-showcase *::before,
.ss-showcase *::after {
  box-sizing: border-box;
}



/* LOGO */

.ss-brand {

  position: absolute;

  top:
    clamp(
      24px,
      3.4vh,
      38px
    );

  left:
    var(--page-pad);

  z-index: 120;

  width:
    clamp(
      72px,
      5.5vw,
      88px
    );

  margin: 0;
  padding: 0;

  appearance: none;

  border: 0;
  outline: 0;

  background: transparent;

  cursor: pointer;
}


.ss-brand img {

  display: block;

  width: 100%;
  height: auto;

  transition:
    filter .35s ease,
    opacity .35s ease;
}


.ss-showcase[data-ss-header-theme="dark"]
.ss-brand img {

  filter:
    brightness(0)
    invert(1);

  opacity: .88;
}



/* NAVIGATION */

.ss-scene-nav {

  position: absolute;

  top:
    clamp(
      24px,
      3.5vh,
      40px
    );

  left: 50%;

  z-index: 110;

  display: flex;

  align-items: center;

  gap:
    clamp(
      31px,
      3.4vw,
      54px
    );

  transform:
    translateX(-50%);
}


.ss-scene-nav__item {

  position: relative;

  margin: 0;

  padding:
    7px
    0
    10px;

  appearance: none;

  border: 0 !important;
  outline: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    rgba(16,47,51,.58);

  font-family: inherit;

  font-size:
    clamp(
      12px,
      .93vw,
      14px
    );

  font-weight: 520;

  cursor: pointer;

  transition:
    color .28s ease;
}


.ss-scene-nav__item::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 1px;

  background:
    currentColor;

  transform:
    translateX(-50%);

  transition:
    width .32s cubic-bezier(.2,.7,.2,1);
}


.ss-scene-nav__item:hover,
.ss-scene-nav__item.is-active {

  color:
    var(--ink);
}


.ss-scene-nav__item.is-active::after {

  width: 100%;
}


.ss-showcase.is-home
.ss-scene-nav__item {

  color:
    rgba(16,47,51,.78);

  text-shadow:
    0 1px 8px rgba(255,255,255,.65);
}


.ss-showcase.is-home
.ss-scene-nav__item:hover,
.ss-showcase.is-home
.ss-scene-nav__item.is-active {

  color:
    var(--ink);
}


.ss-showcase[data-ss-header-theme="dark"]
.ss-scene-nav__item {

  color:
    rgba(255,255,255,.55);
}


.ss-showcase[data-ss-header-theme="dark"]
.ss-scene-nav__item:hover,
.ss-showcase[data-ss-header-theme="dark"]
.ss-scene-nav__item.is-active {

  color:
    #ffffff;
}



/* ==========================================================
   MENU-KNAP
   ========================================================== */

.ss-menu-button {

  position: absolute;

  top:
    clamp(
      24px,
      3.25vh,
      36px
    );

  right:
    var(--page-pad);

  z-index: 125;

  width: 50px;
  height: 28px;

  display: flex;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;

  margin: 0;
  padding: 0;

  appearance: none;

  border:
    1px solid
    rgba(16,47,51,.30) !important;

  border-radius:
    999px;

  outline:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  cursor: pointer;

  transition:
    border-color .18s ease,
    transform .18s ease;
}


.ss-menu-button[hidden] {
  display: none !important;
}


.ss-menu-button span {

  display: block;

  height: 1.5px;

  border-radius: 999px;

  background:
    #102f33;

  transition:
    width .18s ease;
}


.ss-menu-button span:first-child {
  width: 17px;
}


.ss-menu-button span:last-child {
  width: 11px;
}


.ss-menu-button:hover {

  background:
    transparent !important;

  border-color:
    rgba(16,47,51,.50) !important;

  box-shadow:
    none !important;

  transform:
    translateY(-1px);
}


.ss-menu-button:hover span:last-child {
  width: 17px;
}


/* Header controls switch to light ink whenever the active scene is dark. */
.ss-showcase[data-ss-header-theme="dark"]
.ss-menu-button {
  border-color: rgba(255,255,255,.45) !important;
}

.ss-showcase[data-ss-header-theme="dark"]
.ss-menu-button span {
  background: rgba(255,255,255,.92);
}

.ss-showcase[data-ss-header-theme="dark"]
.ss-menu-button:hover {
  border-color: rgba(255,255,255,.72) !important;
}





/* SCENER */

.ss-stage {

  position: relative;

  width: 100%;
  height: 100%;
}


.ss-scene {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  transform:
    translate3d(0, 10px, 0)
    scale(.997);

  pointer-events: none;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    opacity .52s cubic-bezier(.22,.61,.36,1),
    transform .58s cubic-bezier(.22,.61,.36,1);

  will-change: opacity, transform;
}


.ss-scene.is-active {

  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  pointer-events: auto;
}


.ss-scene.is-leaving {

  opacity: 0;

  transform:
    translate3d(0, -7px, 0)
    scale(1.001);
}


/* Subtle content entrance: the scene itself fades, while its main content
   settles into place a fraction later. This keeps the transition calm rather
   than making the whole page feel like a slide animation. */

@keyframes ss-scene-content-in {

  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.ss-scene.is-active .ss-home-copy h1,
.ss-scene.is-active .ss-materials-heading,
.ss-scene.is-active .ss-product-card,
.ss-scene.is-active .sprogselskabet-om__intro,
.ss-scene.is-active .sprogselskabet-om__punkt {

  animation:
    ss-scene-content-in
    .56s
    cubic-bezier(.22,.61,.36,1)
    both;

  animation-delay: .05s;
}


.ss-scene.is-active .ss-product-card:nth-child(2) {
  animation-delay: .10s;
}


.ss-scene.is-active .sprogselskabet-om__punkt:nth-child(2) {
  animation-delay: .10s;
}


.ss-scene.is-active .sprogselskabet-om__punkt:nth-child(3) {
  animation-delay: .15s;
}



/* HERO */

.ss-scene--home {

  background-color:
    #ebe7dc;

  background-image:
    url("https://sprogselskabet.dk/wp-content/uploads/ss_hero_desk.avif");

  background-repeat:
    no-repeat;

  background-size:
    cover;

  background-position:
    center center;
}


.ss-scene--home::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(239,236,226,.12) 0%,
      rgba(239,236,226,.04) 31%,
      rgba(239,236,226,0) 52%
    );
}


.ss-home-copy {

  position: absolute;

  left:
    var(--page-pad);

  top: 76%;

  z-index: 10;

  width: 520px;
  max-width: 41vw;

  transform:
    translateY(-36%);
}


.ss-home-copy h1 {

  margin: 0;

  color:
    var(--ink);

  font-family:
    "Geist",
    sans-serif;

  font-size:
    2.7rem;

  font-weight: 700;

  line-height:
    3.3rem;

  letter-spacing:
    .15rem;

  text-transform:
    uppercase;
}


.ss-home-copy h1 span {
  color: var(--red);
}



/* LEGAL BAR */

.ss-legal-bar {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 30;

  display: flex;

  align-items: center;
  justify-content: space-between;

  height: 44px;

  padding:
    0
    var(--page-pad);

  border-top:
    1px solid
    rgba(16,47,51,.09);

  background:
    rgba(239,239,235,.74);

  backdrop-filter:
    blur(13px);

  -webkit-backdrop-filter:
    blur(13px);

  color:
    rgba(16,47,51,.55);

  font-size:
    10px;

  letter-spacing:
    .045em;
}


.ss-legal-links {

  display: flex;

  gap: 26px;
}


.ss-legal-bar a {

  color: inherit;

  text-decoration: none;

  transition:
    color .2s ease;
}


.ss-legal-bar a:hover {
  color: var(--ink);
}



/* MATERIALER */

.ss-scene--materials {
  background: var(--materials-bg);
}


.ss-materials-wrap {

  position: absolute;

  left:
    var(--page-pad);

  right:
    var(--page-pad);

  top: 52%;

  transform:
    translateY(-45%);
}


.ss-materials-heading {

  max-width: 970px;

  margin:
    0 auto
    clamp(
      17px,
      2.5vh,
      25px
    );

  padding-bottom:
    10px;

  border-bottom:
    1px solid
    rgba(16,47,51,.12);
}


.ss-materials-heading h2 {

  margin: 0;

  color:
    var(--ink);

  font-size:
    clamp(
      18px,
      1.35vw,
      21px
    );

  font-weight: 570;

  line-height: 1;

  letter-spacing:
    .015em;
}


.ss-material-grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,470px)
    );

  justify-content:
    center;

  gap:
    clamp(
      24px,
      3vw,
      36px
    );
}


.ss-product-card {

  display: grid;

  grid-template-columns:
    50%
    minmax(0,1fr);

  min-width: 0;

  min-height:
    238px;

  overflow: hidden;

  background:
    var(--card);

  border:
    1px solid
    rgba(16,47,51,.09);

  border-radius:
    17px;

  box-shadow:
    0 15px 38px
    rgba(30,37,34,.065);

  color: inherit;

  text-decoration: none;

  transition:
    transform .38s cubic-bezier(.2,.7,.2,1),
    box-shadow .38s ease,
    border-color .38s ease;
}


.ss-product-card__image {

  width:
    100%;

  height:
    auto;

  min-height:
    0;

  align-self:
    stretch;

  margin:
    0;

  padding:
    0;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    rgba(16,47,51,.025);

  border-radius:
    16px
    0
    0
    16px;
}


.ss-product-card__image img {

  display: block;

  width:
    100%;

  height:
    100%;

  min-height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  border-radius:
    0;
}


/* Desktop: very subtle inset around the product image.
   Mobile keeps its existing 12px inset below. */
@media (min-width: 1025px) {

  .ss-product-card__image {
    width: calc(100% - 12px);
    margin: 6px;
    border-radius: 12px;
  }

  .ss-product-card__image img {
    border-radius: 10px;
  }
}


.ss-product-card__content {

  display: flex;

  min-width: 0;

  flex-direction: column;

  justify-content: center;

  padding:
    20px
    21px
    19px;
}


.ss-product-card__category {

  margin-bottom:
    7px;

  color:
    #737875;

  font-size:
    8.5px;

  font-weight:
    650;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;
}


.ss-product-card h3 {

  margin:
    0
    0
    9px;

  color:
    var(--ink);

  font-size:
    clamp(
      22px,
      1.6vw,
      27px
    );

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    .055em;
}


.ss-product-card p {

  max-width:
    350px;

  margin:
    0
    0
    14px;

  color:
    #626762;

  font-size:
    13.25px;

  line-height:
    1.48;
}


.ss-product-card__cta {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-top:
    auto;

  color:
    var(--ink);

  font-size:
    12.5px;

  font-weight:
    620;
}


.ss-product-card__cta > span {
  transition: transform .25s ease;
}


@media (hover:hover) {

  .ss-product-card:hover {

    transform:
      translateY(-4px);

    border-color:
      rgba(16,47,51,.17);

    box-shadow:
      0 21px 52px
      rgba(29,36,33,.095);
  }


  .ss-product-card:hover
  .ss-product-card__cta > span {

    transform:
      translateX(5px);
  }

}



/* OM */

.ss-scene--about {

  background:
    #474747;

  color:
    #ffffff;
}


.sprogselskabet-om {

  position: absolute;

  left:
    var(--page-pad);

  right:
    var(--page-pad);

  top:
    auto;

  bottom:
    calc(
      var(--ss-real-footer-h)
      + 34px
    );

  width:
    auto;

  max-width:
    none;

  margin: 0;

  transform:
    none;

  color:
    #ffffff;
}


.sprogselskabet-om__intro {

  max-width: 1080px;

  margin:
    0
    0
    clamp(
      37px,
      5.5vh,
      53px
    );

  color:
    #ffffff;

  font-size:
    clamp(
      20px,
      min(1.48vw,2.6vh),
      24px
    );

  line-height: 1.58;

  opacity: .95;
}


.sprogselskabet-om__punkter {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  margin: 0;
  padding: 0;

  list-style: none;
}


.sprogselskabet-om__punkt {

  position: relative;

  min-width: 0;

  padding:
    3px
    clamp(
      27px,
      3vw,
      43px
    );
}


.sprogselskabet-om__punkt:first-child {
  padding-left: 0;
}


.sprogselskabet-om__punkt:last-child {
  padding-right: 0;
}


.sprogselskabet-om__punkt
+
.sprogselskabet-om__punkt::before {

  content: "";

  position: absolute;

  top: 7px;
  bottom: 7px;
  left: 0;

  width: 1px;

  background:
    rgba(255,255,255,.18);
}


.sprogselskabet-om__punkt h3 {

  margin:
    0
    0
    15px;

  color:
    #ffffff;

  font-family: inherit;

  font-size:
    clamp(
      19px,
      min(1.28vw,2.3vh),
      22px
    );

  font-weight: 550;

  line-height: 1.35;

  letter-spacing:
    .05em;
}


.sprogselskabet-om__punkt p {

  margin: 0;

  color:
    #ffffff;

  font-family: inherit;

  font-size:
    clamp(
      15.5px,
      min(1.05vw,2vh),
      18px
    );

  line-height: 1.65;

  opacity: .84;
}



/* FOOTER */

.ss-real-footer-host {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 40;

  width: 100%;
}


.ss-real-footer-host
.elementor-location-footer,
.ss-real-footer-host
.ss-footer-source {

  width: 100% !important;

  margin: 0 !important;
}


.ss-footer-source {
  display: none !important;
}


.ss-real-footer-host
.ss-footer-source {
  display: block !important;
}



/* SKJULT MENU-KILDE */

.ss-menu-source {

  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  opacity: 0 !important;

  pointer-events: none !important;
}



/* KOMPAKT MØRK MENU */

.ss-menu-drawer {

  position: fixed;

  inset: 0;

  z-index: 99999;

  visibility: hidden;

  opacity: 1;

  pointer-events: none;

  /*
    Hold overlay-laget compositor-klar. Ved lukning venter visibility,
    så panelets eksisterende lukkeanimation stadig kan afsluttes.
  */
  transition:
    visibility 0s linear .28s;
}


.ss-menu-drawer.is-open {

  visibility: visible;

  opacity: 1;

  pointer-events: auto;

  transition:
    none;
}


.ss-menu-drawer__backdrop {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  appearance: none;

  border: 0;

  background:
    rgba(13,15,15,.16);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);

  /*
    Backdroppen er forberedt allerede i lukket state.
    Når menuen åbnes, vises blur derfor i samme frame som klikket
    i stedet for at fade ind sammen med hele menu-wrapperen.
  */
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity, backdrop-filter;
  transition: opacity .12s ease;
}


.ss-menu-drawer.is-open
.ss-menu-drawer__backdrop {

  opacity: 1;

  transition: none;
}


.ss-menu-drawer__panel {

  position: absolute;

  top:
    22px;

  right:
    22px;

  width:
    min(
      370px,
      calc(100vw - 44px)
    );

  max-height:
    calc(100vh - 44px);

  padding:
    20px
    22px
    24px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    16px;

  background:
    rgba(31,31,31,.91);

  backdrop-filter:
    blur(14px)
    saturate(108%);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(108%);

  box-shadow:
    0
    26px
    70px
    rgba(0,0,0,.24);

  opacity:
    0;

  transform:
    translateY(-8px)
    scale(.975);

  transform-origin:
    top right;

  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.22,.75,.22,1);
}


.ss-menu-drawer.is-open
.ss-menu-drawer__panel {

  opacity:
    1;

  transform:
    translateY(0)
    scale(1);
}


.ss-menu-drawer__top {

  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height:
    34px;

  margin-bottom:
    30px;
}


.ss-menu-drawer__label {

  color:
    rgba(255,255,255,.38);

  font-family:
    "Geist",
    sans-serif;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.ss-menu-drawer__close {

  position: relative;

  width:
    34px;

  height:
    34px;

  margin:
    0;

  padding:
    0;

  appearance:
    none;

  border:
    0 !important;

  outline:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    rgba(255,255,255,.78);

  cursor:
    pointer;

  transition:
    color .2s ease;
}


.ss-menu-drawer__close:hover {

  color:
    #ffffff;
}


.ss-menu-drawer__close span {

  position: absolute;

  top: 50%;
  left: 50%;

  width:
    20px;

  height:
    1.5px;

  border-radius:
    999px;

  background:
    currentColor;
}


.ss-menu-drawer__close span:first-child {

  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


.ss-menu-drawer__close span:last-child {

  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


.ss-menu-drawer__content {

  max-height:
    calc(100vh - 150px);

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    none;
}


.ss-menu-drawer__content::-webkit-scrollbar {

  display:
    none;
}


.ss-menu-drawer
.ss-nav-column {

  display: flex !important;

  flex-direction: column !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    transparent !important;
}


.ss-menu-drawer
.ss-nav-link {

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap:
    22px;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    12px
    2px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    rgba(255,255,255,.91) !important;

  text-decoration:
    none !important;

  transition:
    color .2s ease,
    transform .2s ease;
}


.ss-menu-drawer
.ss-nav-link:hover {

  color:
    #ffffff !important;

  transform:
    translateX(3px);
}


.ss-menu-drawer
.ss-nav-title {

  color:
    inherit !important;

  font-family:
    "Geist",
    sans-serif !important;

  font-size:
    22px !important;

  font-weight:
    470 !important;

  line-height:
    1.3 !important;

  letter-spacing:
    -.015em !important;
}


.ss-menu-drawer
.ss-nav-arrow {

  display: flex !important;

  align-items: center;
  justify-content: center;

  flex:
    0 0 auto;

  color:
    rgba(255,255,255,.34) !important;

  transition:
    color .2s ease,
    transform .2s ease;
}


.ss-menu-drawer
.ss-nav-link:hover
.ss-nav-arrow {

  color:
    rgba(255,255,255,.78) !important;

  transform:
    translateX(3px);
}


.ss-menu-drawer
.ss-nav-arrow svg {

  width:
    15px !important;

  height:
    15px !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.5 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}


.ss-menu-drawer
.ss-account-wrap {

  margin:
    28px
    0
    0 !important;

  padding:
    22px
    0
    0 !important;

  border-top:
    1px solid
    rgba(255,255,255,.10) !important;
}


.ss-menu-drawer
.ss-account-button {

  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  width:
    auto !important;

  min-height:
    40px;

  margin:
    0 !important;

  padding:
    0
    19px !important;

  border:
    1px solid
    rgba(255,255,255,.28) !important;

  border-radius:
    999px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    rgba(255,255,255,.9) !important;

  font-family:
    "Geist",
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    520 !important;

  text-decoration:
    none !important;

  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;
}


.ss-menu-drawer
.ss-account-button:hover {

  border-color:
    rgba(255,255,255,.62) !important;

  background:
    rgba(255,255,255,.06) !important;

  color:
    #ffffff !important;
}



/* TABLET */

@media
(max-width:1050px)
and (min-width:768px) {

  .ss-showcase {
    --page-pad: 44px;
  }


  .ss-home-copy {

    width:
      430px;

    max-width:
      43vw;
  }


  .ss-home-copy h1 {

    font-size:
      2.25rem;

    line-height:
      2.8rem;

    letter-spacing:
      .12rem;
  }


  .ss-material-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      20px;
  }


  .ss-product-card {

    grid-template-columns:
      50%
      minmax(0,1fr);

    min-height:
      224px;
  }


  .ss-product-card__image {
    min-height: 0;
  }


  .ss-product-card__content {

    padding:
      17px
      17px
      16px;
  }


  .ss-product-card p {
    font-size: 12.5px;
  }

}



/* MOBIL */

@media
(max-width:767px) {

  .ss-showcase {
    --page-pad: 19px;
  }


  .ss-showcase.is-about::after {

    content: "";

    position:
      absolute;

    top: 0;
    left: 0;
    right: 0;

    height:
      118px;

    z-index:
      105;

    pointer-events:
      none;

    background:
      linear-gradient(
        to bottom,
        #474747 0%,
        #474747 76%,
        rgba(71,71,71,.98) 84%,
        rgba(71,71,71,0) 100%
      );
  }


  .ss-brand {

    top: 14px;

    width: 67px;
  }


  .ss-scene-nav {

    top:
      56px;

    left:
      50%;

    width:
      auto;

    justify-content:
      center;

    gap:
      12px;

    transform:
      translateX(-50%);
  }


  .ss-scene-nav__item {

    padding:
      5px
      0
      3px;

    font-size:
      13px;

    font-weight:
      550;

    white-space:
      nowrap;
  }


  .ss-scene-nav__item::after {
    bottom: 0;
  }


  .ss-showcase.is-home
  .ss-scene-nav__item {

    color:
      rgba(16,47,51,.88);

    text-shadow:
      0 1px 8px
      rgba(255,255,255,.85);
  }


  .ss-menu-button {

    top:
      14px;

    width:
      48px;

    height:
      28px;
  }


  .ss-menu-button span:first-child {
    width: 17px;
  }


  .ss-menu-button span:last-child {
    width: 11px;
  }


  .ss-menu-button:hover span:last-child {
    width: 17px;
  }


  .ss-scene--home {

    background-image:
      url("https://sprogselskabet.dk/wp-content/uploads/ss_hero_mobile.avif");

    background-size:
      cover;

    background-position:
      center center;
  }


  .ss-scene--home::before {

    background:
      linear-gradient(
        to bottom,
        rgba(20,30,28,0) 36%,
        rgba(20,30,28,.03) 54%,
        rgba(20,30,28,.50) 100%
      );
  }


  .ss-home-copy {

    left:
      var(--page-pad);

    right:
      var(--page-pad);

    top: auto;

    bottom:
      58px;

    width: auto;
    max-width: none;

    transform: none;
  }


  .ss-home-copy h1 {

    color:
      #f8f6ef;

    font-size:
      1.9rem;

    line-height:
      2.32rem;

    letter-spacing:
      .105rem;

    text-shadow:
      0
      2px
      12px
      rgba(0,0,0,.15);
  }


  .ss-home-copy h1 span {
    color: #dc8585;
  }


  .ss-legal-bar {

    height:
      40px;

    padding:
      0
      var(--page-pad);

    font-size:
      11px;

    letter-spacing:
      .005em;
  }


  .ss-legal-links {

    width: 100%;

    justify-content:
      space-between;

    gap: 8px;
  }


  .ss-legal-bar > span {
    display: none;
  }



  /* PRODUKTER MOBIL */

  .ss-materials-wrap {

    left:
      var(--page-pad);

    right:
      var(--page-pad);

    top:
      104px;

    transform: none;
  }


  .ss-materials-heading {

    margin-bottom:
      14px;

    padding-bottom:
      9px;
  }


  .ss-materials-heading h2 {
    font-size: 19px;
  }


  .ss-material-grid {

    display: flex;

    justify-content:
      flex-start;

    gap:
      13px;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scroll-snap-type:
      x mandatory;

    overscroll-behavior-x:
      contain;

    scrollbar-width:
      none;

    padding:
      0
      1px
      8px;
  }


  .ss-material-grid::-webkit-scrollbar {
    display: none;
  }


  .ss-product-card {

    flex:
      0
      0
      min(
        70vw,
        280px
      );

    scroll-snap-align:
      start;

    display: flex;

    flex-direction:
      column;

    min-height:
      0;

    border-radius:
      15px;
  }


  .ss-product-card__image {

    width:
      calc(100% - 24px);

    height:
      auto;

    min-height:
      0;

    aspect-ratio:
      1 / 1;

    margin:
      12px;

    padding:
      0;

    background:
      transparent;

    border-radius:
      13px;

    overflow:
      hidden;
  }


  .ss-product-card__image img {

    width:
      100%;

    height:
      100%;

    object-fit:
      contain;

    border-radius:
      13px
      13px
      0
      0;
  }


  .ss-product-card__content {

    position:
      relative;

    z-index:
      2;

    margin-top:
      -26px;

    padding:
      40px
      17px
      18px;

    background:
      linear-gradient(
        to bottom,
        rgba(250,249,246,0) 0,
        rgba(250,249,246,.88) 20px,
        var(--card) 36px,
        var(--card) 100%
      );

    border-radius:
      0
      0
      15px
      15px;
  }


  .ss-product-card__category {

    margin-bottom:
      6px;

    font-size:
      8px;
  }


  .ss-product-card h3 {

    margin-bottom:
      7px;

    font-size:
      20px;

    letter-spacing:
      .05em;
  }


  .ss-product-card p {

    display:
      block;

    margin-bottom:
      12px;

    overflow:
      visible;

    font-size:
      13px;

    line-height:
      1.44;

    -webkit-line-clamp:
      unset;
  }


  .ss-product-card__cta {

    margin-top:
      0;

    font-size:
      12.5px;
  }



  /* OM MOBIL */

  .ss-scene--about {

    overflow-y:
      auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scroll-padding-top:
      118px;
  }


  .sprogselskabet-om {

    position:
      relative;

    left:
      auto;

    right:
      auto;

    top:
      auto;

    bottom:
      auto;

    width:
      calc(100% - 38px);

    margin:
      0
      auto;

    padding:
      112px
      0
      34px;

    transform:
      none;
  }


  .sprogselskabet-om__intro {

    margin-bottom:
      30px;

    font-size:
      18px;

    line-height:
      1.58;
  }


  .sprogselskabet-om__punkter {
    grid-template-columns: 1fr;
  }


  .sprogselskabet-om__punkt,
  .sprogselskabet-om__punkt:first-child,
  .sprogselskabet-om__punkt:last-child {

    padding:
      24px
      0;
  }


  .sprogselskabet-om__punkt:first-child {
    padding-top: 0;
  }


  .sprogselskabet-om__punkt:last-child {
    padding-bottom: 0;
  }


  .sprogselskabet-om__punkt
  +
  .sprogselskabet-om__punkt::before {

    top: 0;
    bottom: auto;
    left: 0;

    width: 52px;
    height: 1px;

    background:
      rgba(255,255,255,.24);
  }


  .sprogselskabet-om__punkt h3 {

    margin-bottom:
      10px;

    font-size:
      18px;

    line-height:
      1.35;
  }


  .sprogselskabet-om__punkt p {

    font-size:
      15.5px;

    line-height:
      1.58;
  }


  .ss-scene--about
  .ss-real-footer-host {

    position:
      relative;

    left:
      auto;

    right:
      auto;

    bottom:
      auto;

    margin-top:
      34px;
  }



  /* KOMPAKT MENU MOBIL */

  .ss-menu-drawer__panel {

    top:
      12px;

    left:
      12px;

    right:
      12px;

    width:
      auto;

    max-height:
      calc(100dvh - 24px);

    padding:
      18px
      18px
      21px;

    border-radius:
      15px;

    transform:
      translateY(-6px)
      scale(.98);

    transform-origin:
      top right;
  }


  .ss-menu-drawer.is-open
  .ss-menu-drawer__panel {

    transform:
      translateY(0)
      scale(1);
  }


  .ss-menu-drawer__top {

    margin-bottom:
      24px;
  }


  .ss-menu-drawer
  .ss-nav-link {

    padding:
      11px
      1px !important;
  }


  .ss-menu-drawer
  .ss-nav-title {

    font-size:
      20px !important;
  }


  .ss-menu-drawer
  .ss-account-wrap {

    margin-top:
      24px !important;

    padding-top:
      19px !important;
  }

}



/* LAV DESKTOP */

@media
(max-height:760px)
and (min-width:768px) {

  .ss-home-copy {
    top: 71%;
  }


  .ss-materials-wrap {
    top: 51%;
  }


  .ss-product-card {
    min-height: 215px;
  }


  .ss-product-card__image {
    min-height: 0;
  }


  .ss-product-card__content {

    padding:
      16px
      18px;
  }


  .ss-product-card p {

    font-size:
      12.25px;

    line-height:
      1.42;
  }


  .sprogselskabet-om {

    top:
      auto;

    bottom:
      calc(
        var(--ss-real-footer-h)
        + 24px
      );

    transform:
      none;
  }


  .sprogselskabet-om__intro {

    margin-bottom:
      29px;

    font-size:
      17px;
  }


  .sprogselskabet-om__punkt h3 {

    margin-bottom:
      9px;

    font-size:
      17px;
  }


  .sprogselskabet-om__punkt p {

    font-size:
      14px;

    line-height:
      1.52;
  }

}



/* REDUCERET BEVÆGELSE */

@media
(prefers-reduced-motion:reduce) {

  .ss-scene,
  .ss-scene-nav__item,
  .ss-scene-nav__item::after,
  .ss-product-card,
  .ss-product-card__cta > span,
  .ss-brand img,
  .ss-menu-drawer,
  .ss-menu-drawer__backdrop,
  .ss-menu-drawer__panel,
  .ss-menu-button,
  .ss-menu-button span,
  .ss-menu-drawer__close,
  .ss-menu-drawer .ss-nav-link,
  .ss-menu-drawer .ss-nav-arrow,
  .ss-menu-drawer .ss-account-button {

    transition:
      none !important;
  }


  .ss-scene.is-active .ss-home-copy h1,
  .ss-scene.is-active .ss-materials-heading,
  .ss-scene.is-active .ss-product-card,
  .ss-scene.is-active .sprogselskabet-om__intro,
  .ss-scene.is-active .sprogselskabet-om__punkt {

    animation:
      none !important;
  }

}