/* Front-end style manifest. Add one @import per new block/component. */

/* Base */
/* Self-hosted fonts — Manrope (display) + Inter (body). woff2 in assets/fonts/. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/manrope-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
/* Design tokens — ported 1:1 from the static site's tokens/*.css. */

:root {
  /* --- Colors --- */
  --petrol:            #234D58;
  --petrol-deep:       #1B3A43;
  --ink:               #1B2A2E;
  --sand:              #F5EFE6;
  --sand-light:        #EDE4D6;
  --sand-deep:         #E3D7C4;
  --terracotta:        #C2673F;
  --terracotta-hover:  #A85636;
  --sage:              #8A9B8E;
  --sage-soft:         #B6C0B6;
  --white:             #FFFFFF;

  --text-strong:   var(--ink);
  --text-body:     #2C3B3F;
  --text-muted:    #5E6F6F;
  --text-faint:    #8A9690;

  --text-on-dark:        #F5EFE6;
  --text-on-dark-muted:  #B7C3C0;

  --surface-page:    var(--sand);
  --surface-alt:     var(--sand-light);
  --surface-dark:    var(--petrol);
  --surface-card:    #FBF7F0;

  --line:          var(--sand-deep);
  --line-strong:   #D2C4AD;
  --line-on-dark:  rgba(245, 239, 230, .18);
  --accent:        var(--terracotta);
  --accent-hover:  var(--terracotta-hover);
  --focus-ring:    var(--terracotta);

  --positive:  #5C7C63;
  --notice:    var(--terracotta);

  /* --- Typography --- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --text-display:  clamp(3rem, 6vw, 5.5rem);
  --text-h1:       clamp(2.5rem, 4.5vw, 4rem);
  --text-h2:       clamp(2rem, 3vw, 2.75rem);
  --text-h3:       1.625rem;
  --text-h4:       1.25rem;

  --text-lead:     1.375rem;
  --text-base:     1.0625rem;
  --text-sm:       0.9375rem;
  --text-xs:       0.8125rem;
  --text-eyebrow:  0.75rem;

  --lh-display: 1.02;
  --lh-heading: 1.08;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-relaxed: 1.75;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0;
  --ls-eyebrow:  0.18em;

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  --section-y:       clamp(96px, 12vw, 160px);
  --section-y-tight: clamp(64px, 8vw, 96px);

  /* Centralized section rhythm — every block section uses these (playbook §5). */
  --sj-pad:          clamp(72px, 9vw, 120px);   /* section padding-block */
  --sj-pad-tight:    clamp(56px, 7vw, 96px);
  --sj-maxw:         1750px;                      /* content width (matches static WRAP) */
  --sj-gutter:       clamp(20px, 4vw, 72px);      /* horizontal gutter */
  --sj-header-h:     74px;                        /* solid header height, for scroll offsets */

  --container:       1750px;
  --container-text:  720px;
  --gutter:          clamp(20px, 5vw, 64px);
  --grid-columns:    12;
  --grid-gap:        clamp(20px, 2.5vw, 40px);

  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-pill: 999px;

  --shadow-none:    none;
  --shadow-whisper: 0 1px 2px rgba(27, 42, 46, 0.06);
  --shadow-card:    0 8px 26px rgba(27, 42, 46, .12);

  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}
/* Global resets + shared layout primitives. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Chrome width wrapper (header/footer), matches static .sj-wrap. */
.sj-wrap {
  max-width: var(--sj-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 72px);
}

/* --- Centralized section shell for blocks (playbook §5) --- */
.sx { padding-block: var(--sj-pad); }
.sx--tight { padding-block: var(--sj-pad-tight); }
.sx--flush { padding-block: 0; }              /* full-bleed split/hero sections */
.sx--sand { background: var(--sand); }
.sx--sand-light { background: var(--sand-light); }
.sx--petrol { background: var(--petrol); color: var(--text-on-dark); }

.sx-wrap {
  max-width: var(--sj-maxw);
  margin: 0 auto;
  padding: 0 var(--sj-gutter);
}

/* Shared section head (eyebrow / heading / lead). */
.sx-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.sx-eyebrow--light { color: rgba(245, 239, 230, .82); }

/* Terracotta accent for emphasized words in headings (RichText "Fremhæv" format). */
.sj-tc { color: var(--terracotta); }

/* Shared section heading (used across content blocks). */
.sj-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

/* Components (global chrome) */
/* .sj-btn — the shared ripple-fill button (ported 1:1 from static header). */

.sj-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: border-color 300ms;
  padding: 16px 32px;
  font-size: 1rem;
}
.sj-btn .sj-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  transition: color 320ms;
}
.sj-btn .sj-fill {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  width: 300px;
  height: 300px;
  margin-left: -150px;
  margin-top: -150px;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms;
  pointer-events: none;
}
.sj-btn.is-hover .sj-fill { transform: scale(4); opacity: 1; }

.sj-btn--sm { padding: 13px 26px; font-size: 0.92rem; }
.sj-btn--lg { padding: 19px 40px; font-size: 1.08rem; }
.sj-btn--block { width: 100%; }
@media (max-width: 1000px) {
  .sj-btn--lg { padding: 16px 32px; font-size: 1rem; }
}

.sj-btn--primary { background: var(--terracotta); border-color: var(--terracotta); }
.sj-btn--primary .sj-label { color: #fff; }
.sj-btn--primary .sj-fill { background: var(--terracotta-hover); }
.sj-btn--primary.is-hover { border-color: var(--terracotta-hover); }

.sj-btn--secondary { background: transparent; border-color: rgba(255, 255, 255, .7); }
.sj-btn--secondary .sj-label { color: #fff; }
.sj-btn--secondary .sj-fill { background: #fff; }
.sj-btn--secondary.is-hover { border-color: #fff; }
.sj-btn--secondary.is-hover .sj-label { color: var(--petrol); }

.sj-btn--secondary-dark { background: transparent; border-color: var(--petrol); }
.sj-btn--secondary-dark .sj-label { color: var(--petrol); }
.sj-btn--secondary-dark .sj-fill { background: var(--petrol); }
.sj-btn--secondary-dark.is-hover { color: #fff; }
.sj-btn--secondary-dark.is-hover .sj-label { color: #fff; }
/* Site header (hero + solid variants) + mobile menu. Ported 1:1 from static. */

.hp-navlink { position: relative; text-decoration: none; }
.hp-navlink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1.5px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hp-navlink:hover::after, .hp-navlink.active::after { transform: scaleX(1); }

.hp-iconlink { position: relative; display: flex; }
.hp-iconlink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hp-iconlink:hover::after { transform: scaleX(1); }

.site-header { z-index: 50; font-family: var(--font-body); }
.site-header .sh-inner {
  max-width: 1750px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 72px);
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
}
.site-header nav { display: flex; gap: clamp(22px, 2.4vw, 42px); align-items: center; }
.site-header nav a { font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
.site-header nav a.active { font-weight: 600; }
.sh-actions { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.site-logo { display: flex; flex-shrink: 0; }
.logo-petrol, .logo-white { display: none; }
.site-header--solid .logo-petrol { display: block; }

.sh-burger {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0;
}
.sh-burger span { width: 26px; height: 1.5px; background: currentColor; display: block; }
.site-header--solid .sh-burger { color: var(--petrol); }
.site-header--hero .sh-burger { color: #fff; }
.site-header--hero.scrolled .sh-burger { color: var(--petrol); }

.site-header--solid {
  position: sticky;
  top: 0;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.site-header--solid .sh-inner { height: 74px; }
.site-header--solid .site-logo img { height: 24px; }
.site-header--solid,
.site-header--solid nav a,
.site-header--solid .hp-iconlink { color: var(--petrol); }

.site-header--hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 360ms, border-color 360ms;
}
.site-header--hero .sh-inner { height: 100px; transition: height 360ms; }
.site-header--hero .site-logo img { height: 28px; transition: height 360ms; }
.site-header--hero .logo-white { display: block; }
.site-header--hero,
.site-header--hero nav a,
.site-header--hero .hp-iconlink { color: #fff; transition: color 360ms; }
.site-header--hero.scrolled { background: var(--sand); border-bottom: 1px solid var(--line); }
.site-header--hero.scrolled .sh-inner { height: 74px; }
.site-header--hero.scrolled .site-logo img { height: 24px; }
.site-header--hero.scrolled .logo-white { display: none; }
.site-header--hero.scrolled .logo-petrol { display: block; }
.site-header--hero.scrolled,
.site-header--hero.scrolled nav a,
.site-header--hero.scrolled .hp-iconlink { color: var(--petrol); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--petrol);
  z-index: 60;
  transform: translateY(-100%);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 7vw, 40px);
}
.mobile-menu.open { transform: translateY(0); }
.mm-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu .mm-top img { height: 26px; }
.mm-close {
  background: none;
  border: none;
  color: #F5EFE6;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 16px; margin: auto 0; }
.mobile-menu nav a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 8vw, 2.75rem);
  color: #F5EFE6;
  text-decoration: none;
  line-height: 1.3;
}

@media (max-width: 1000px) {
  .site-header nav, .sh-actions { display: none; }
  .sh-burger { display: flex; }
}
/* Site footer. Ported 1:1 from static header inline CSS + footer markup. */

.site-footer {
  background: var(--petrol);
  color: #F5EFE6;
  font-family: var(--font-body);
}
.site-footer .sj-wrap {
  padding-top: var(--sj-pad);
  padding-bottom: 36px;
}
.ft-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.ft-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ft-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin: 0 0 20px;
  white-space: nowrap;
}
.ft-col a {
  color: #F5EFE6;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: color 240ms;
}
.ft-col a:hover { color: var(--terracotta); }
/* .site-footer prefix keeps these winning over WooCommerce's broad
   `.woocommerce-page img { height:auto }` rule on shop/checkout/account pages. */
.site-footer .ft-logo { height: 30px; margin-bottom: 8px; }
.ft-lead {
  margin: 0 0 26px;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #E6DDCF;
  max-width: 32ch;
}
.ft-meta { font-size: 0.875rem; color: #CBD4D1; }
.ft-trust {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 28px;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}
.site-footer .ft-trust img { width: auto; opacity: .95; }
.site-footer .ft-cert { height: 32px; }
.ft-bottom {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-on-dark-muted);
}
.ft-bottom a {
  color: #F5EFE6;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 239, 230, .4);
}
.ft-bottom-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ft-social a { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1000px) {
  .ft-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
}
@media (max-width: 600px) {
  .ft-grid { grid-template-columns: 1fr; }
  .site-footer .ft-logo { height: 24px; }
  .ft-lead { margin-bottom: 16px; }
}
/* Final CTA band (terracotta stripe + text + dual vertical photo marquees). */

.hp-finalcta-wrap {
  height: clamp(480px, 58vh, 640px);
  background: var(--sand);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hp-finalcta-stripe { height: 8px; background: var(--terracotta); flex: none; }
.hp-finalcta {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 0;
  overflow: hidden;
}

/* Text-only variant (no marquee images selected). */
.hp-finalcta-wrap--noimg { height: auto; }
.hp-finalcta--noimg { grid-template-columns: 1fr; }

.hp-cta-text {
  display: flex;
  align-items: center;
  padding: var(--sj-pad) clamp(24px, 5vw, 80px);
}
.hp-cta-text > div { max-width: 560px; }
.cta-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.cta-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 14ch;
}
.cta-p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-body);
  margin: 22px 0 0;
  max-width: 40ch;
}
.cta-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

.hp-imgwrap { position: relative; overflow: hidden; }
.hp-ctagrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 0 clamp(12px, 1.4vw, 20px) 0 0;
}
.hp-ctacol { overflow: hidden; height: 100%; }
.hp-vmarq { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
.hp-vmarq img {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  display: block;
  flex: none;
}

@keyframes hpVUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hpVDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hp-vmarq.up { animation: hpVUp 38s linear infinite; }
.hp-vmarq.down { animation: hpVDown 44s linear infinite; }

@media (prefers-reduced-motion: reduce) { .hp-vmarq { animation: none; } }

@media (max-width: 1000px) {
  .hp-finalcta-wrap { height: auto !important; }
  .hp-finalcta { grid-template-columns: 1fr !important; }
  .hp-finalcta .hp-imgwrap { display: none !important; }
}
/* Shared horizontal marquee (locations, testimonials). Desktop = auto-scroll CSS
   animation over a duplicated track; mobile = manual horizontal scroll. */

.sj-marq-wrap { overflow: hidden; }
.sj-marq {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: sjMarq 55s linear infinite;
}
.sj-marq--slow { animation-duration: 90s; }
.sj-marq-wrap:hover .sj-marq { animation-play-state: paused; }

@keyframes sjMarq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sj-marq { animation: none; }
}

@media (max-width: 1000px) {
  .sj-marq-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Align the first card with the guttered heading (was touching x=0) and
       leave matching trailing space at the end of the manual scroll. */
    padding-inline: var(--sj-gutter);
    scroll-padding-inline: var(--sj-gutter);
  }
  .sj-marq-wrap::-webkit-scrollbar { display: none; }
  .sj-marq { animation: none; }
}
/* Scroll-reveal fade-up (toggled by reveal.js). */
.sj-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.sj-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sj-reveal,
  .sj-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Blocks — one @import per block */
/* suprejs/hero — full-bleed hero with rotating background image(s). */

.sj-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--petrol);
}
.sj-hero--viewport { height: 100vh; min-height: 660px; }
.sj-hero--tall { min-height: clamp(480px, 66vh, 760px); }

.sj-hero__media { position: absolute; inset: 0; }
.sj-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms ease-in-out;
  overflow: hidden;
}
.sj-hero__slide.is-active { opacity: 1; }
.sj-hero__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

@keyframes sjKen { from { transform: scale(1.04); } to { transform: scale(1.20); } }
/* Applied to every slide (not just the active one) so all images zoom in sync —
   crossfades stay seamless with no snap-back when the active slide changes. */
.sj-hero.is-rotating .sj-hero__img { animation: sjKen 9s ease-in-out infinite alternate; }

.sj-hero__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 42, 46, 0.72) 0%, rgba(27, 42, 46, 0.55) 32%, rgba(35, 77, 88, 0.30) 68%, rgba(35, 77, 88, 0.20) 100%);
}
.sj-hero__grad--bottom {
  background: linear-gradient(to top, rgba(27, 42, 46, 0.45), rgba(27, 42, 46, 0) 38%);
}

.sj-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--sj-maxw);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--sj-gutter);
  padding-bottom: clamp(64px, 11vh, 120px);
}
.sj-hero--tall .sj-hero__inner { padding-bottom: clamp(56px, 8vh, 110px); }

.sj-hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.85);
  margin: 0 0 18px;
}
.sj-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.sj-hero--tall .sj-hero__title {
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 1.1;
  max-width: 16ch;
}
.sj-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  line-height: 1.55;
  color: #F2ECE2;
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 48ch;
}
.sj-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 44px);
}
.sj-hero__btns > a { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sj-hero.is-rotating .sj-hero__img { animation: none; }
  .sj-hero__slide { transition: none; }
}

@media (max-width: 1000px) {
  .sj-hero__grad {
    background: linear-gradient(to top, rgba(27, 42, 46, 0.78) 0%, rgba(27, 42, 46, 0.30) 46%, rgba(27, 42, 46, 0.08) 100%);
  }
  .sj-hero__inner { padding-bottom: 40px; }
}
/* suprejs/hero-split — two-column hero (text on sand-light, image right). */

.sj-hsplit {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--sand-light);
  min-height: clamp(420px, 52vh, 580px);
}
.sj-hsplit--noimg { grid-template-columns: 1fr; }

.sj-hsplit__text {
  display: flex;
  align-items: center;
  padding-left: max(var(--sj-gutter), calc((100vw - var(--sj-maxw)) / 2 + var(--sj-gutter)));
  padding-right: clamp(28px, 3vw, 64px);
  padding-top: clamp(44px, 6vw, 80px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.sj-hsplit__inner { max-width: 560px; }

.sj-hsplit__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 15ch;
}
.sj-hsplit__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-body);
  margin: 22px 0 0;
  max-width: 44ch;
}
.sj-hsplit__btns { margin-top: 30px; }

.sj-hsplit__media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.sj-hsplit__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

@media (max-width: 1000px) {
  .sj-hsplit { grid-template-columns: 1fr; }
  .sj-hsplit__text {
    padding-left: var(--sj-gutter);
    padding-right: var(--sj-gutter);
  }
}
/* suprejs/concept — text + proof (left), image + caption (right). */

.sj-concept__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* Let columns size to their fr track — a bare <img>'s intrinsic width would
   otherwise force min-width:auto and overflow the grid. */
.sj-concept__text,
.sj-concept__media { min-width: 0; }

.sj-concept__title { max-width: 20ch; margin-top: 18px; }
.sj-concept__body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-body);
  margin: 22px 0 0;
  max-width: 46ch;
}

.sj-concept__proof {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 28px);
  margin-top: 22px;
  flex-wrap: wrap;
}
.sj-concept__proofinfo { display: flex; align-items: center; gap: 12px; }
.sj-concept__avatars { height: 38px; width: auto; display: block; }
.sj-concept__proofinfo span {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-body);
  line-height: 1.3;
}

/* Absolute image inside a 4:5 box: no intrinsic width leaks into the grid track. */
.sj-concept__imgwrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sand-deep);
}
.sj-concept__imgwrap .sj-concept__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.sj-concept__caption {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 12px;
}

@media (max-width: 1000px) {
  .sj-concept__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* suprejs/steps — deck (dark horizontal) + alternating (light) layouts. */

.sj-steps { overflow: hidden; }
.sx--petrol .sj-h2 { color: #fff; }

/* Head */
.sj-steps__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.sj-steps--alt .sj-steps__head { margin-bottom: clamp(44px, 5vw, 72px); }
.sj-steps__h2 { margin-top: 16px; max-width: 20ch; }
.sj-steps--deck .sj-steps__h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); max-width: 18ch; }

.sj-steps__ctrl { display: flex; gap: 10px; }
.sj-steps__nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 230, .4);
  background: transparent;
  color: #F5EFE6;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sj-steps__nav:hover { border-color: #F5EFE6; }

/* Shared step meta */
.sj-step__meta { display: flex; align-items: baseline; gap: 14px; }
.sj-step__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.8rem); color: var(--terracotta); line-height: 1; }
.sj-step__num--lg { font-weight: 300; font-size: clamp(2.6rem, 4vw, 3.6rem); }
.sj-step__kicker { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta); }

/* ---------------- Deck ---------------- */
.sj-deck {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sj-deck::-webkit-scrollbar { display: none; }

.sj-deck__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  box-sizing: border-box;
  padding: 0 var(--sj-gutter);
  display: flex;
}
.sj-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: var(--sand);
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
  max-width: var(--sj-maxw);
  margin: 0 auto;
  width: 100%;
}
/* 4/3 on every device (drives the card height on desktop too). */
.sj-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-light); }
.sj-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.sj-card__text { padding: clamp(28px, 3vw, 56px) clamp(28px, 3vw, 56px) clamp(28px, 3vw, 56px) 0; }
.sj-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 0; max-width: 14ch; }
.sj-card__body { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.65; color: var(--text-body); margin: 18px 0 0; max-width: 40ch; }

.sj-deck__progress { display: flex; gap: 8px; margin-top: clamp(28px, 3vw, 44px); }
.sj-deck__bar { height: 4px; flex: 1; border-radius: 999px; border: none; cursor: pointer; background: rgba(245, 239, 230, .28); transition: background 280ms; padding: 0; }
.sj-deck__bar.is-on { background: var(--terracotta); }

@media (max-width: 1000px) {
  .sj-steps__ctrl { display: none; }
  .sj-card { /* image first (DOM order), stacked tight with no gap */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
  }
  .sj-card__text { padding: clamp(26px, 6vw, 36px); }
  .sj-card__title, .sj-card__body { max-width: 100%; }
}

/* ---------------- Alternating ---------------- */
.sj-altrows { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 128px); }
.sj-altrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.sj-altrow__text { order: 1; }
.sj-altrow__media { order: 2; position: relative; }
.sj-altrow__text,
.sj-altrow__media { min-width: 0; }
.sj-altrow.is-imgleft .sj-altrow__text { order: 2; }
.sj-altrow.is-imgleft .sj-altrow__media { order: 1; }

.sj-altrow__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 0; max-width: 16ch; }
.sj-altrow__body { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.65; color: var(--text-body); margin: 18px 0 0; max-width: 42ch; }
/* Aspect on the wrapper + absolutely-filled img → the img's width/height HTML
   attributes can't override the 4/3 box (deterministic, like the deck/story). */
.sj-altrow__img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sand-deep); }
.sj-altrow__img img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }

@media (max-width: 1000px) {
  .sj-altrow { grid-template-columns: 1fr; gap: 28px; }
  /* Text first / image last on ALL rows — must out-specify the .is-imgleft
     desktop rules (0,3,0), so mirror their specificity here. */
  .sj-altrow .sj-altrow__text,
  .sj-altrow.is-imgleft .sj-altrow__text { order: 1; }
  .sj-altrow .sj-altrow__media,
  .sj-altrow.is-imgleft .sj-altrow__media { order: 2; }
}
/* suprejs/locations — place-card marquee. */

.sj-locations { overflow: hidden; }
.sj-locations__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.sj-locations__h2 { margin-top: 18px; max-width: 22ch; }
.sj-locations__meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Spacing via card margin (not flex gap) so the -50% loop is seamless. */
.sj-locations__track { align-items: flex-start; }

.sj-loc-card {
  flex: none;
  width: clamp(240px, 26vw, 380px);
  margin-inline-end: clamp(16px, 1.8vw, 28px);
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
/* Fixed 3:4 box with an absolutely-filled image → every card is the same height. */
.sj-loc-card__img { position: relative; aspect-ratio: 3 / 4; background: var(--sand-deep); }
.sj-loc-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sj-loc-card__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 42, 46, .6), rgba(27, 42, 46, 0) 45%);
}
.sj-loc-card__cap { position: absolute; left: 20px; bottom: 18px; color: #fff; }
.sj-loc-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.sj-loc-card__country {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .85);
  margin-top: 6px;
}
/* suprejs/test-invite — dark question panel + rotating images. */

.sj-testinvite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(520px, 60vh, 720px);
}
.sj-testinvite__panel {
  background: var(--petrol);
  color: #F5EFE6;
  display: flex;
  align-items: center;
  padding: var(--sj-pad) clamp(24px, 5vw, 80px);
}
.sj-testinvite__inner { max-width: 560px; }
.sj-testinvite__inner .sx-eyebrow { display: block; }
.sj-testinvite__h2 { color: #fff; max-width: 18ch; margin-top: 18px; }
.sj-testinvite__qs {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.sj-testinvite__q {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #D9E0DD;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.sj-testinvite__qnum { color: var(--terracotta); font-weight: 600; flex: none; }

.sj-testinvite__media { position: relative; min-height: 320px; overflow: hidden; background: var(--petrol-deep); }
.sj-testinvite__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}
.sj-testinvite__slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sj-testinvite__slide { transition: none; }
}
@media (max-width: 1000px) {
  .sj-testinvite { grid-template-columns: 1fr; }
  .sj-testinvite__qs { grid-template-columns: 1fr; }
}
/* suprejs/testimonials — testimonial-card marquee (CPT-driven). */

.sj-testimonials { overflow: hidden; }
.sj-testimonials__head { margin-bottom: clamp(40px, 5vw, 64px); }
.sj-testimonials__h2 { margin-top: 18px; max-width: 22ch; }

.sj-tm-card {
  flex: none;
  width: clamp(320px, 30vw, 440px);
  margin-inline-end: clamp(20px, 2vw, 32px);
  background: var(--surface-card);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Fixed 16:10 box with an absolutely-filled image → uniform image height,
   so align-items:stretch equalises every card. */
.sj-tm-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--sand-deep); }
.sj-tm-card__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sj-tm-card__body { padding: clamp(24px, 2vw, 34px); display: flex; flex-direction: column; flex: 1; }
.sj-tm-card__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 1.5vw, 1.55rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 24px;
}
.sj-tm-card__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.sj-tm-card__who { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
.sj-tm-card__where {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  white-space: nowrap;
}

.sj-ssr-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  background: var(--sand-light);
  border-radius: 8px;
}
.sj-tm-empty {
  padding: clamp(24px, 4vw, 48px) 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}
/* suprejs/stats — row of key numbers. */

.sj-stats { padding-block: clamp(48px, 6vw, 80px); }
.sj-stats--light { background: var(--sand-light); }
.sj-stats--dark { background: var(--petrol); }

.sj-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.sj-stat {
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
}
.sj-stats--dark .sj-stat { border-top-color: var(--line-on-dark); }

.sj-stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
  color: var(--ink);
}
.sj-stats--dark .sj-stat__num { color: #fff; }
.sj-stat__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 12px;
  max-width: 22ch;
}
.sj-stats--dark .sj-stat__desc { color: #D9E0DD; }

@media (max-width: 1000px) {
  .sj-stats__grid { grid-template-columns: 1fr 1fr; }
}
/* suprejs/story — image + text, flippable (also serves the "why" section). */

.sj-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.sj-story__text,
.sj-story__media { min-width: 0; }
.sj-story__media { order: 1; }
.sj-story__text { order: 2; }
.sj-story--flip .sj-story__media { order: 2; }
.sj-story--flip .sj-story__text { order: 1; }

.sj-story__imgwrap {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand-deep);
}
.sj-story__imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }

.sj-story__title { margin-top: 18px; max-width: 18ch; }
.sj-story__body { margin-top: 22px; }
.sj-story__body p {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-body);
  max-width: 46ch;
  margin: 0 0 16px;
}
.sj-story__body p:last-child { margin-bottom: 0; }
.sj-story__btns { margin-top: 30px; }

@media (max-width: 1000px) {
  .sj-story__grid { grid-template-columns: 1fr; gap: 28px; }
  .sj-story__text { order: 1; }   /* text first */
  .sj-story__media { order: 2; }  /* image last */
}
/* suprejs/quote — large quote band on petrol. */

.sj-quote__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.sj-quote__q {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.sj-quote__name { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }
.sj-quote__role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E2A07F;
  margin-top: 8px;
}

@media (max-width: 1000px) {
  .sj-quote__grid { grid-template-columns: 1fr; gap: 22px; }
}
/* suprejs/founders — intro + member grid (CPT-driven). */

.sj-founders__intro { max-width: 46ch; margin-bottom: clamp(40px, 5vw, 64px); }
.sj-founders__title { margin-top: 18px; }
.sj-founders__intro-body {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-body);
  margin: 20px 0 0;
}

.sj-founders__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
}
.sj-founder__imgwrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--sand-deep);
}
.sj-founder__imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sj-founder__name { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); margin: 0; }
.sj-founder__role {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 8px;
}

@media (max-width: 600px) {
  .sj-founders__grid { grid-template-columns: 1fr; max-width: 420px; }
}
/* suprejs/examples — interactive trip selector (cards + per-trip detail). */

.sj-examples__head { margin-bottom: clamp(32px, 4vw, 48px); }
.sj-examples__h2 { margin-top: 14px; max-width: 24ch; }

/* Pills */
.sj-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
}
.sj-pill--accent { background: rgba(194, 103, 63, .92); }
.sj-pill--dark { background: rgba(27, 42, 46, .42); }

/* --- Cards --- */
.sj-ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 40px); }

.sj-ex-card {
  text-align: left;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  opacity: 0.92;
  transition: opacity 240ms;
}
.sj-ex-card.is-active { opacity: 1; }
.sj-ex-card__imgwrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 3 / 4;
  background: var(--sand-deep);
}
.sj-ex-card__imgwrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  filter: saturate(0.92);
  transition: transform 600ms var(--ease), filter 300ms;
}
.sj-ex-card.is-active .sj-ex-card__imgwrap img { filter: none; }
.sj-ex-card:hover .sj-ex-card__imgwrap img { transform: scale(1.05); }
.sj-ex-card.is-active .sj-ex-card__imgwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--terracotta);
  border-radius: 12px;
  pointer-events: none;
}
.sj-ex-card__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27, 42, 46, .55), rgba(27, 42, 46, 0) 50%); }
.sj-ex-card__pills { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.sj-ex-card__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--terracotta);
  display: none;
  align-items: center;
  justify-content: center;
}
.sj-ex-card__check svg { width: 14px; height: 14px; }
.sj-ex-card.is-active .sj-ex-card__check { display: flex; }
.sj-ex-card__who { display: flex; align-items: baseline; gap: 10px; }
.sj-ex-card__who h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); margin: 0; }
.sj-ex-card__kind { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.sj-ex-card__teaser { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--text-body); margin: 10px 0 0; max-width: 34ch; }
.sj-ex-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--petrol); }
.sj-ex-card.is-active .sj-ex-card__cta { color: var(--terracotta); }
.sj-ex-card__cta-active { display: none; }
.sj-ex-card.is-active .sj-ex-card__cta-idle { display: none; }
.sj-ex-card.is-active .sj-ex-card__cta-active { display: inline; }
.sj-ex-card__arrow { display: inline-block; transition: transform 240ms; }
.sj-ex-card.is-active .sj-ex-card__arrow { transform: rotate(90deg); }

/* --- Detail --- */
.sj-ex-details { margin-top: clamp(48px, 6vw, 80px); scroll-margin-top: 90px; }
.sj-ex-detail { display: none; }
.sj-ex-detail.is-active { display: block; }
.sj-ex-detail__head { border-top: 1px solid var(--line-strong); padding-top: clamp(32px, 3.5vw, 48px); margin-bottom: clamp(32px, 4vw, 52px); }
.sj-ex-detail__head .sj-h2 { margin-top: 14px; max-width: 22ch; }

.sj-ex-steps { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.sj-ex-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.sj-ex-step__media, .sj-ex-step__text { min-width: 0; }
.sj-ex-step__media { order: 2; }
.sj-ex-step__text { order: 1; }
.sj-ex-step.is-imgleft .sj-ex-step__media { order: 1; }
.sj-ex-step.is-imgleft .sj-ex-step__text { order: 2; }
.sj-ex-step__imgwrap { position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--sand-deep); }
.sj-ex-step__imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sj-ex-step__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); }
.sj-ex-step__line { width: 22px; height: 1px; background: var(--terracotta); display: inline-block; }
.sj-ex-step__body { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.32; color: var(--ink); margin: 12px 0 0; max-width: 30ch; }

.sj-ex-quote { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: stretch; margin-top: clamp(40px, 5vw, 64px); background: var(--petrol); border-radius: 14px; overflow: hidden; }
.sj-ex-quote__fig, .sj-ex-quote__media { min-width: 0; }
.sj-ex-quote__fig { margin: 0; padding: clamp(32px, 4vw, 64px); align-self: center; }
.sj-ex-quote__q { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.28; color: #fff; margin: 0; }
.sj-ex-quote__by { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #E2A07F; margin-top: 20px; }
.sj-ex-quote__media { position: relative; min-height: 240px; overflow: hidden; }
.sj-ex-quote__media img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }

@media (max-width: 1000px) {
  .sj-ex-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--sj-gutter));
    padding-right: var(--sj-gutter);
  }
  .sj-ex-grid::-webkit-scrollbar { display: none; }
  .sj-ex-card { flex: 0 0 80%; scroll-snap-align: start; }
  .sj-ex-step { grid-template-columns: 1fr; gap: 18px; }
  .sj-ex-step__media, .sj-ex-step__text { order: initial; }
  .sj-ex-quote { grid-template-columns: 1fr; gap: 0; }
  .sj-ex-quote__fig { padding-bottom: 22px; }
}
/* suprejs/contact — info + form + map. */

.sj-contact__split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: start;
}
.sj-contact__info,
.sj-contact__formcard { min-width: 0; }

.sj-contact__title { margin-top: 18px; max-width: 14ch; font-size: clamp(2.4rem, 4.4vw, 4rem); }
.sj-contact__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-body);
  margin: 22px 0 0;
  max-width: 42ch;
}

.sj-contact__rows { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 4px; }
.sj-contact__row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.sj-contact__ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--petrol);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sj-contact__label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.sj-contact__val { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.4; color: var(--ink); }
.sj-contact__val a { color: var(--ink); text-decoration: none; }
.sj-contact__val a:hover { color: var(--terracotta); }
.sj-contact__sub { font-family: var(--font-body); font-size: 0.88rem; color: var(--text-muted); margin-top: 4px; }

.sj-contact__trust { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.sj-contact__cert { height: 36px; width: auto; opacity: .95; }

.sj-contact__formcard { background: #fff; border-radius: 14px; padding: clamp(28px, 3.5vw, 48px); box-shadow: 0 8px 30px rgba(27, 42, 46, .08); }
.sj-contact__formtitle { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); margin: 0 0 22px; }
.sj-contact__formfallback { font-family: var(--font-body); color: var(--text-body); line-height: 1.6; }
.sj-contact__formfallback a { color: var(--terracotta); }

.sj-contact__map iframe { width: 100%; height: clamp(360px, 42vh, 520px); border: 0; display: block; }

@media (max-width: 1000px) {
  .sj-contact__split { grid-template-columns: 1fr; gap: 36px; }
  .sj-contact__map iframe { height: 340px; }
}

/* --- Gravity Forms (gravity-theme) styled with theme tokens (playbook §12) --- */
.sj-contact .gform_wrapper.gravity-theme .gform_title { display: none; }
.sj-contact .gform_wrapper.gravity-theme .gform_required_legend { display: none; }
.sj-contact .gform_wrapper.gravity-theme .gfield_label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sj-contact .gform_wrapper.gravity-theme .gfield_required { color: var(--terracotta); }
.sj-contact .gform_wrapper.gravity-theme input[type="text"],
.sj-contact .gform_wrapper.gravity-theme input[type="email"],
.sj-contact .gform_wrapper.gravity-theme input[type="tel"],
.sj-contact .gform_wrapper.gravity-theme input[type="number"],
.sj-contact .gform_wrapper.gravity-theme select,
.sj-contact .gform_wrapper.gravity-theme textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 200ms;
}
.sj-contact .gform_wrapper.gravity-theme input:focus,
.sj-contact .gform_wrapper.gravity-theme select:focus,
.sj-contact .gform_wrapper.gravity-theme textarea:focus {
  border-color: var(--terracotta);
  outline: none;
}
.sj-contact .gform_wrapper.gravity-theme textarea { min-height: 120px; resize: vertical; }

/* Custom select chevron (replaces the native browser arrow). */
.sj-contact .gform_wrapper.gravity-theme select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23234D58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 46px;
  cursor: pointer;
}
.sj-contact .gform_wrapper.gravity-theme select::-ms-expand { display: none; }
.sj-contact .gform_wrapper.gravity-theme .gform_footer { margin-top: 6px; }
.sj-contact .gform_wrapper.gravity-theme .gform_button {
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 34px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 240ms;
}
.sj-contact .gform_wrapper.gravity-theme .gform_button:hover { background: var(--terracotta-hover); }
.sj-contact .gform_wrapper.gravity-theme .gfield_error input,
.sj-contact .gform_wrapper.gravity-theme .gfield_error textarea { border-color: var(--notice); }
.sj-contact .gform_wrapper.gravity-theme .gfield_validation_message,
.sj-contact .gform_wrapper.gravity-theme .validation_message {
  color: var(--notice);
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 4px 0 0;
}
.sj-contact .gform_wrapper.gravity-theme .gform_confirmation_message {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-body);
}

/* Name field (first/last): keep GF's own column spacing so the gap matches the
   E-mail/Telefon row (~10px); just allow shrinking + match sub-label sizing. */
.sj-contact .gform_wrapper.gravity-theme .ginput_complex .gform-grid-col { min-width: 0; }
.sj-contact .gform_wrapper.gravity-theme .ginput_complex label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Tablet + mobile: scale the whole form down (fields, placeholders, labels, button). */
@media (max-width: 1000px) {
  .sj-contact .gform_wrapper.gravity-theme input[type="text"],
  .sj-contact .gform_wrapper.gravity-theme input[type="email"],
  .sj-contact .gform_wrapper.gravity-theme input[type="tel"],
  .sj-contact .gform_wrapper.gravity-theme input[type="number"],
  .sj-contact .gform_wrapper.gravity-theme select,
  .sj-contact .gform_wrapper.gravity-theme textarea {
    font-size: 0.9rem;
    padding: 11px 13px;
  }
  .sj-contact .gform_wrapper.gravity-theme select { padding-right: 40px; background-position: right 13px center; }
  .sj-contact .gform_wrapper.gravity-theme textarea { min-height: 100px; }
  .sj-contact .gform_wrapper.gravity-theme .gfield_label,
  .sj-contact .gform_wrapper.gravity-theme .ginput_complex label { font-size: 0.72rem; }
  .sj-contact .gform_wrapper.gravity-theme .gform_button { font-size: 0.9rem; padding: 12px 26px; }
}
/* suprejs/embed — full-width raw embed (e.g. rejsetest). */

.sj-embed { width: 100%; }
.sj-embed--fill { height: calc(100vh - var(--sj-header-h)); }
.sj-embed--fixed { height: var(--sj-embed-h, 800px); }

.sj-embed__inner { width: 100%; height: 100%; }
.sj-embed__inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Responsive / motion overrides last */
/* Global responsive + motion overrides that aren't scoped to one component. */

/* ============================================================
   Responsive streamlining — tablet & mobile.
   Overriding the shared spacing tokens keeps the section rhythm
   identical across EVERY .sx block (tight == normal here), so the
   page reads consistently; headings + buttons scale down to match.
   ============================================================ */

/* ---- Tablet and below ---- */
@media (max-width: 1000px) {
  :root {
    --sj-pad:       clamp(56px, 8vw, 76px);
    --sj-pad-tight: clamp(56px, 8vw, 76px); /* unify tight + normal */
  }
  /* Stats block carries its own padding — pull it onto the shared rhythm. */
  .sj-stats { padding-block: var(--sj-pad); }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  :root {
    --sj-pad:       40px;
    --sj-pad-tight: 40px;
  }

  /* Buttons — compact, still a comfortable tap target. */
  .sj-btn,
  .sj-btn--lg { padding: 14px 24px; font-size: 0.95rem; }
  .sj-btn--sm { padding: 12px 20px; font-size: 0.88rem; }

  /* Display + section headings dialed down for phones. */
  .sj-hero__title,
  .sj-hero--tall .sj-hero__title { font-size: clamp(2rem, 9.5vw, 2.6rem); line-height: 1.12; }
  .sj-hsplit__title,
  .sj-contact__title { font-size: clamp(2rem, 9vw, 2.5rem); }
  .sj-h2 { font-size: clamp(1.55rem, 7vw, 1.9rem); }

  /* Leads + eyebrows a notch smaller. */
  .sj-hero__lead,
  .sj-hsplit__lead { font-size: 1.02rem; }
  .sx-eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}