:root{font-family:Inter,Arial,sans-serif;color:#fff;background:#303140}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100vh;display:grid;place-items:center;padding:32px;background:#303140}.site-wrapper{width:min(100%,2390px);overflow:hidden;border-radius:54px;background:#3b3d4b;box-shadow:0 30px 80px #15162155;text-align:left}.intro{min-height:1120px;padding:650px 110px 100px;background:linear-gradient(#41445488,#303342aa),url('assets/images/hero.png') center/cover;animation:rise .8s ease both}h1{margin:0 0 54px;font-size:clamp(52px,7vw,142px);font-weight:400;letter-spacing:-.065em;line-height:1}p{max-width:1500px;margin:0;color:#d6d3dc;font-size:clamp(18px,2vw,38px);line-height:1.8}p strong{color:#fff;font-weight:700}.links{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:100px 110px;animation:rise .8s .12s ease both}.socials{display:flex;gap:45px}.socials img{width:100%;height:100%;object-fit:contain;filter:brightness(0) saturate(100%) invert(67%) sepia(31%) saturate(1000%) hue-rotate(286deg) brightness(103%) contrast(88%)}.socials a{display:grid;place-items:center;width:46px;height:46px;color:#f3b4d3;text-decoration:none;font-size:36px;font-weight:600;transition:.2s}.socials a:hover{color:#fff;transform:translateY(-3px)}.contact{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-width:520px;padding:28px 48px;border:0;border-radius:99px;background:linear-gradient(100deg,#c379d7,#e27d90);color:#fff;text-decoration:none;font-size:30px;font-weight:400;transition:.2s}.contact:hover{filter:brightness(1.1);transform:translateY(-2px)}.contact span{font-size:28px}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(max-width:700px){body{padding:12px}.site-wrapper{border-radius:24px}.intro{min-height:620px;padding:340px 28px 40px}.links{align-items:flex-start;flex-direction:column;padding:42px 28px}.socials{gap:18px}.contact{min-width:0;width:100%;font-size:18px;padding:18px}}

/* Keep the complete card inside the visible viewport. */
.site-wrapper { height: min(calc(100vh - 64px), calc((100vw - 64px) / 1.604)); }
.intro { height: 75%; min-height: 0; padding: 38% 4.6% 6%; }
.links { height: 25%; padding: 4% 4.6%; }
@media (max-width: 700px) {
  .site-wrapper { height: calc(100vh - 24px); }
  .intro { height: 72%; min-height: 0; padding: 48% 28px 28px; }
  .links { height: 28%; padding: 28px; }
}

/* Compact presentation: leave roughly 20% breathing room on both sides. */
.site-wrapper {
  width: min(80vw, 2390px);
  height: min(80vh, calc(80vw / 1.604));
}
@media (max-width: 700px) {
  .site-wrapper { width: 92vw; height: 92vh; }
}

/* Keep hero copy contained in the left side of the image. */
.intro h1 {
  max-width: 62%;
  margin-bottom: 3%;
  font-size: clamp(34px, 5vw, 104px);
}
.intro p {
  max-width: 62%;
  font-size: clamp(12px, 1.35vw, 24px);
  line-height: 1.65;
}
@media (max-width: 700px) {
  .intro h1, .intro p { max-width: 92%; }
  .intro h1 { font-size: clamp(30px, 9vw, 54px); }
  .intro p { font-size: 13px; }
}

/* Prevent hero copy from entering the controls section. */
.intro { overflow: hidden; }
.intro h1, .intro p { position: relative; z-index: 1; }
.intro p { max-height: 34%; overflow: hidden; }
.links { position: relative; z-index: 2; }
@media (max-width: 700px) { .intro p { max-height: 38%; } }

/* Anchor both text elements inside the hero instead of letting them flow into the footer. */
.intro { position: relative; }
.intro h1, .intro p { position: absolute; left: 4.6%; right: auto; margin: 0; }
.intro h1 { bottom: 25%; }
.intro p { bottom: 9%; max-height: none; }
@media (max-width: 700px) {
  .intro h1, .intro p { left: 28px; right: 28px; max-width: none; }
  .intro h1 { bottom: 26%; }
  .intro p { bottom: 9%; }
}

/* Wider outer breathing room and the animated lower background grid. */
body { position: relative; overflow-x: hidden; overflow-y: auto; }
body::before {
  content: '';
  position: fixed;
  inset: 52% 0 0;
  z-index: -1;
  opacity: .55;
  background-image:
    linear-gradient(rgba(164,115,186,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164,115,186,.22) 1px, transparent 1px);
  background-size: 100% 42px, 120px 100%;
  transform: perspective(420px) rotateX(58deg) scale(1.35);
  transform-origin: center top;
  animation: grid-drift 7s linear infinite;
}
.site-wrapper { width: min(70vw, 2390px); height: min(80vh, calc(70vw / 1.604)); }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 42px, 120px 0; } }
@media (max-width: 700px) { .site-wrapper { width: 88vw; height: 88vh; } body::before { inset: 58% 0 0; } }

body::before { z-index: 0; pointer-events: none; }
.site-wrapper { position: relative; z-index: 1; }

/* More compact controls. */
.socials { gap: 28px; }
.socials a { width: 34px; height: 34px; }
.contact { min-width: 300px; padding: 16px 30px; gap: 12px; font-size: 18px; }
.contact span { font-size: 18px; }
.contact .email-icon { width: 1.45em; height: 1.45em; flex: 0 0 auto; fill: #ffc7c7; }
@media (max-width: 700px) {
  .socials { gap: 16px; }
  .socials a { width: 30px; height: 30px; }
  .contact { min-width: 0; padding: 14px 22px; font-size: 16px; }
}

/* Match the source button treatment. */
.contact {
  min-width: 0;
  width: min(100%, 520px);
  height: 4rem;
  padding: 0 2rem;
  line-height: 4rem;
  border-radius: 2.5rem;
  background-color: #c086db;
  background-image: linear-gradient(231deg, #de7e7e 0%, rgba(192,134,219,.012) 100%);
  background-size: cover;
  font-size: 1em;
}
.socials img {
  filter: brightness(0) saturate(100%) invert(86%) sepia(18%) saturate(330%) hue-rotate(302deg) brightness(104%) contrast(102%);
}

.contact { width: 70%; max-width: 364px; }
@media (max-width: 700px) { .contact { width: 70%; max-width: 364px; } }

body, .contact { font-family: 'Schibsted Grotesk', Inter, Arial, sans-serif; }
.contact { width: 84%; max-width: 437px; font-size: 1.2em; }
.intro { padding-top: 30%; }
@media (max-width: 700px) {
  .contact { width: 84%; max-width: 437px; font-size: 1.1em; }
  .intro { padding-top: 30%; }
}

.contact { width: 67%; max-width: 350px; }
@media (max-width: 700px) { .contact { width: 67%; max-width: 350px; } }

.contact { position: relative; }
.contact::before {
  content: '';
  position: absolute;
  left: -58px;
  top: 50%;
  width: 1px;
  height: 90%;
  background: rgba(255,255,255,.22);
  transform: translateY(-50%);
}
@media (max-width: 700px) { .contact::before { display: none; } }

.intro h1 { max-width: 70%; }
.intro p { max-width: 72%; bottom: 7%; font-size: clamp(11px, 1.05vw, 20px); line-height: 1.55; }
@media (max-width: 700px) { .intro h1, .intro p { max-width: none; } .intro p { bottom: 5%; font-size: 12px; line-height: 1.45; } }

.intro h1 { bottom: 35%; }
.intro p { bottom: 6%; }
@media (max-width: 700px) {
  .intro h1 { bottom: 38%; }
  .intro p { bottom: 5%; }
}

.intro h1 { font-size: clamp(30px, 4vw, 82px); color: #f1ecef; }
@media (max-width: 700px) { .intro h1 { font-size: clamp(28px, 7vw, 46px); } }

.intro h1 { font-size: clamp(26px, 3vw, 60px); }
.intro p { font-size: clamp(10px, .8vw, 16px); }
@media (max-width: 700px) {
  .intro h1 { font-size: clamp(24px, 5vw, 38px); }
  .intro p { font-size: 11px; }
}

.intro p { font-size: clamp(11px, 1vw, 20px); }
@media (max-width: 700px) { .intro p { font-size: 12px; } }

/* More top breathing room in the card and tighter, faster background grid. */
.intro { padding-top: 34%; }
body::before { background-size: 100% 34px, 96px 100%; animation-duration: 5.6s; }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 34px, 96px 0; } }
@media (max-width: 700px) { .intro { padding-top: 34%; } }

.intro { padding-top: 41%; }
body::before { background-size: 100% 27px, 77px 100%; animation-duration: 4.5s; }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 27px, 77px 0; } }
@media (max-width: 700px) { .intro { padding-top: 41%; } }

.intro { padding-top: 49%; }
body::before { background-size: 100% 22px, 62px 100%; animation-duration: 3.75s; }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 22px, 62px 0; } }
@media (max-width: 700px) { .intro { padding-top: 49%; } }

/* Keep the card padding at the previously chosen level; only the grid received the last two adjustments. */
.intro { padding-top: 34%; }
@media (max-width: 700px) { .intro { padding-top: 34%; } }

/* Shift the hero crop left so the right-side subject sits farther right in the card. */
.intro { background-position: 20% center; }
@media (max-width: 700px) { .intro { background-position: 24% center; } }

.intro { background-size: 125% auto; background-position: left center; }
@media (max-width: 700px) { .intro { background-size: auto 125%; background-position: 42% center; } }

.intro { background-size: cover; background-position: center; }
@media (max-width: 700px) { .intro { background-size: cover; background-position: center; } }

.intro {
  background-image: linear-gradient(90deg, rgba(48, 51, 66, .68) 0%, rgba(48, 51, 66, .42) 48%, rgba(48, 51, 66, .08) 100%), url('assets/images/hero.png');
}

.intro h1 {
  font-family: 'Schibsted Grotesk', sans-serif;
  letter-spacing: -.25rem;
  font-weight: 400;
  background-image: linear-gradient(45deg, #f5e4e8 0%, #fff 53%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 700px) { .intro h1 { letter-spacing: -.1rem; } }

.intro h1 { letter-spacing: -.12rem; }
@media (max-width: 700px) { .intro h1 { letter-spacing: -.04rem; } }

.intro h1 { bottom: 31%; }
@media (max-width: 700px) { .intro h1 { bottom: 34%; } }

.intro h1 { font-size: clamp(28px, 3.3vw, 66px); }
.intro {
  background-image: linear-gradient(90deg, rgba(48,51,66,.18) 0%, rgba(48,51,66,.12) 50%, rgba(48,51,66,.06) 100%), url('assets/images/hero.png');
}
@media (max-width: 700px) { .intro h1 { font-size: clamp(26px, 5.5vw, 42px); } }

.intro h1 { bottom: 27%; }
@media (max-width: 700px) { .intro h1 { bottom: 30%; } }

.contact { font-size: 1.3em; }
.site-wrapper { perspective: 1400px; }
.card-front, .card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front { height: 100%; }
.card-back { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; background: linear-gradient(135deg, #3b3d4b, #282a38); transform: rotateY(180deg); }
.site-wrapper.is-flipped .card-front { transform: rotateY(-180deg); }
.site-wrapper.is-flipped .card-back { transform: rotateY(0); }
.card-front, .card-back { transition: transform .75s cubic-bezier(.2,.75,.25,1); }
.form-wrap { width: min(100%, 620px); }
.form-wrap h2 { margin: 0 0 28px; font-size: clamp(28px, 4vw, 54px); font-weight: 400; color: #f1ecef; }
form { display: grid; gap: 14px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
input, textarea { width: 100%; border: 1px solid #777b87; border-radius: 8px; padding: 15px 18px; background: #ffffff0d; color: #fff; font: inherit; outline: none; }
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: #dca0eb; }
form button, .back-button { border: 0; border-radius: 999px; padding: 14px 24px; background: linear-gradient(231deg,#de7e7e,#c086db); color: #fff; font: inherit; cursor: pointer; }
.form-status { min-height: 1.5em; margin: 2px 0 0; color: #f1ecef; font-size: .9em; text-align: center; }
.form-status.is-success { color: #b9f3d1; }
.form-status.is-error { color: #ffc7c7; }
form button:disabled { cursor: wait; opacity: .8; }
.spinner { display: inline-block; width: .8em; height: .8em; margin-right: .45em; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; vertical-align: -.08em; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.back-button { position: absolute; top: 7%; left: 5%; background: #ffffff18; }

/* Mobile composition: zoom the hero out, keep the subject on the right, and let copy flow naturally. */
@media (max-width: 700px) {
  body { padding: 10px; overflow-x: hidden; }
  .site-wrapper { width: calc(100vw - 20px); height: calc(100vh - 20px); border-radius: 22px; }
  .card-front { height: 100%; }
  .intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 68%;
    min-height: 0;
    padding: 0 24px 8%;
    background-size: 180% auto;
    background-position: 72% center;
  }
  .intro h1, .intro p {
    position: static;
    width: 100%;
    max-width: 100%;
  }
  .intro h1 {
    margin: 0 0 14px;
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;
    letter-spacing: -.04rem;
  }
  .intro p {
    margin: 0;
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.55;
    max-height: 42%;
    overflow: hidden;
  }
  .links {
    height: 32%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
  }
  .socials { justify-content: center; gap: 18px; }
  .socials a { width: 30px; height: 30px; }
  .contact { width: min(100%, 300px); max-width: 300px; height: 3.4rem; padding: 0 20px; font-size: 1em; }
  .contact::before { display: none; }
  .card-back { padding: 24px; }
  .form-wrap h2 { font-size: 32px; }
}

@media (max-width: 700px) {
  .site-wrapper { height: 90vh; }
  .intro { height: 66%; background-size: 220% auto; background-position: 72% center; background-repeat: no-repeat; }
  .links { height: 34%; }
}

@media (max-width: 700px) {
  body { min-height: 100vh; padding: 5vh 5vw; }
  .site-wrapper { width: 90vw; height: 90vh; }
}

@media (max-width: 700px) {
  body { padding: 9vh 5vw; }
  .site-wrapper { width: 90vw; height: 82vh; }
}

@media (max-width: 700px) {
  .intro {
    background-image: linear-gradient(90deg, rgba(48,51,66,.18) 0%, rgba(48,51,66,.12) 50%, rgba(48,51,66,.06) 100%), url('../assets/images/hero-mobile.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Softer framing and a stronger card shadow in both layouts. */
.site-wrapper { box-shadow: 0 28px 70px rgba(10, 11, 20, .48), 0 8px 24px rgba(10, 11, 20, .24); }
@media (max-width: 700px) {
  body { padding: 11vh 7vw; }
  .site-wrapper { width: 86vw; height: 78vh; box-shadow: 0 20px 48px rgba(10, 11, 20, .52), 0 6px 18px rgba(10, 11, 20, .28); }
  .intro { background-size: 100% auto; }
  .description-window { width: 100%; max-height: 40%; overflow: hidden; }
  .description-window p { max-height: none; text-shadow: 0 2px 8px rgba(20, 21, 30, .9), 0 1px 2px rgba(20, 21, 30, .8); animation: description-scroll 18s ease-in-out infinite alternate; }
}

@keyframes description-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--description-overflow, 0px))); }
}

@media (max-width: 700px) {
  body { min-height: 100dvh; padding: max(24px, 7vh) 7vw; }
  .site-wrapper { height: 78vh; max-height: calc(100dvh - 14vh); }
}

.description-window { display: contents; }
@media (max-width: 700px) { .description-window { display: block; } }

@media (min-width: 701px) {
  .description-window {
    display: block;
    position: absolute;
    left: 4.6%;
    bottom: 6%;
    width: 72%;
    max-height: 34%;
    overflow: hidden;
  }
  .description-window p {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: 100%;
    max-height: none;
    text-shadow: 0 2px 8px rgba(20, 21, 30, .9), 0 1px 2px rgba(20, 21, 30, .8);
    animation: description-scroll 24s ease-in-out infinite alternate;
  }
}

.intro h1 { text-shadow: 0 3px 10px rgba(20, 21, 30, .7), 0 1px 3px rgba(20, 21, 30, .65); }

.counter-panel { width: min(70vw, 2390px); margin: 0 auto 24px; display:flex; align-items:end; justify-content:space-between; gap:40px; color:#f1ecef; }
.counter-copy { max-width:700px; }
.counter-copy h2 { margin:0 0 8px; font-size:clamp(18px,2vw,30px); font-weight:400; }
.counter-copy p { margin:4px 0; color:#b9bac5; font-size:clamp(10px,.8vw,14px); line-height:1.4; }
.counter-readout { display:flex; align-items:end; gap:18px; white-space:nowrap; }
#counter-value { font-size:clamp(24px,3vw,52px); letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.counter-readout small { color:#a7a8b5; font-size:9px; line-height:1.4; letter-spacing:.12em; }
.counter-digit { display:inline-block; min-width:.62em; }
.counter-digit.is-changing { animation: digit-roll .45s ease both; }
@keyframes digit-roll { 0%{opacity:0;transform:translateY(-.45em)} 100%{opacity:1;transform:none} }
@media(max-width:700px){.counter-panel{width:86vw;margin-bottom:14px;display:block}.counter-copy h2{font-size:18px}.counter-copy p{font-size:10px}.counter-copy p:last-child{display:none}.counter-readout{margin-top:8px;justify-content:space-between;align-items:center}.counter-readout small{font-size:7px}#counter-value{font-size:25px}}

body { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; }

/* One-way description loop: enter below, exit above, then restart. */
@keyframes description-loop {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}
.description-window p { animation: description-loop 28s linear infinite; }
@media (max-width: 700px) {
  .description-window { height: calc(4 * 1.55em); max-height: none; }
  .description-window p { animation-duration: 24s; }
}

.counter-panel { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.counter-readout { order:0; text-shadow:0 3px 10px rgba(10,11,20,.75); }
.counter-copy { order:1; max-width:850px; }
.counter-copy h2 { display:none; }
@media(max-width:700px){.counter-panel{display:block}.counter-readout{margin-top:0}.counter-copy{margin-top:6px}}

/* Keep the gradient fill intact; cast the shadow outside the glyphs. */
.intro h1 { text-shadow: none; filter: drop-shadow(0 3px 6px rgba(20,21,30,.72)); }

.counter-panel {
  width: min(70vw, 2390px);
  align-items: center;
  text-align: center;
  margin: 0 auto 32px;
  transform: none;
}
.counter-readout {
  justify-content: center;
  align-self: center;
  width: 100%;
}
.counter-copy {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.counter-copy p {
  width: 100%;
  margin: 4px 0;
  text-align: center !important;
}
.counter-copy p { display: inline; margin: 0 .25em; }
@media (max-width: 700px) {
  .counter-copy { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .counter-copy p { font-size: 9px; }
}

.counter-copy { white-space: normal; }
.counter-copy p { display: block; margin: 3px 0; font-style: italic; }
@media (max-width: 700px) {
  .counter-copy { white-space: normal; overflow: visible; }
  .counter-copy p { font-size: 9px; }
}

.description-window {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

@media (max-width: 700px) {
  html { min-height: 100%; }
  body {
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: max(24px, 7vh);
    padding-bottom: max(48px, 9vh);
    overscroll-behavior-y: contain;
  }
  .counter-panel { flex: 0 0 auto; }
  .site-wrapper { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  .counter-copy p:last-child { display: block; }
  .counter-copy { height: auto; max-height: none; overflow: visible; }
  .counter-panel { height: auto; min-height: 0; }
}

.copyright { margin: 18px 0 0; padding-bottom: 14px; color: rgba(241,236,239,.58); font-size: 11px; letter-spacing: .08em; text-align: center; }
@media (max-width: 700px) { .copyright { margin: 14px 0 4px; padding-bottom: 0; font-size: 10px; } }

@media (max-width: 700px) {
  .card-back { display: block; padding: 78px 24px 24px; }
  .back-button { top: 20px; left: 24px; z-index: 2; }
  .form-wrap { width: 100%; }
  .form-wrap h2 { margin: 0 0 22px; text-align: center; font-size: 28px; }
}

@media (max-width: 700px) {
  .card-back {
    display: block;
    padding: 72px 18px 18px;
    align-items: flex-start;
  }

  .back-button {
    top: 16px;
    left: 18px;
    z-index: 2;
  }

  .form-wrap {
    width: 100%;
    padding-top: 10px;
  }

  .form-wrap h2 {
    margin: 0 0 18px;
    font-size: 26px;
    line-height: 1.05;
    text-align: center;
  }

  #contact-form {
    gap: 12px;
  }

  #contact-form input,
  #contact-form textarea {
    padding: 12px 14px;
    font-size: 14px;
  }

  #contact-form button {
    padding: 13px 18px;
    font-size: 15px;
  }

  .form-status {
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .counter-panel {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: min(92vw, 640px);
    margin: 0 auto 28px;
    align-self: center;
    gap: 14px;
    transform: translateX(-8px);
  }

  .counter-readout {
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
  }

  .counter-copy {
    width: 100%;
    flex: 0 0 auto;
    text-align: center;
  }

  .counter-copy p {
    width: min(100%, 40ch);
    margin: 4px auto;
    line-height: 1.42;
    text-wrap: balance;
  }
}