/* Homepage (index.html, sv/index.html). DESIGN.md: Softjoy is the gallery, the products are the exhibits.
   Everything is visible without JavaScript; assets/js/home-motion.js only adds motion on top.
   The homepage does not load Bootstrap (260 KB render-blocking CSS); this small reset replaces its reboot. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.sp-public-home {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sp-public-home img,
.sp-public-home svg {
  vertical-align: middle;
}

:where(.sp-public-home) p {
  margin: 0 0 1rem;
}

.sp-public-home input,
.sp-public-home label {
  font: inherit;
}

.sp-public-home {
  --sj-black: #090A0B;
  --sj-black-soft: #111315;
  --sj-paper: #F3F1EC;
  --sj-silver: #C9CDD0;
  --sj-line-dark: #282C2F;

  /* Dark only (owner, 2026-10-17). */
  --sj-bg: var(--sj-black);
  --sj-surface: var(--sj-black-soft);
  --sj-ink: var(--sj-paper);
  --sj-muted: var(--sj-silver);
  --sj-line: var(--sj-line-dark);
  --sj-hero-fade: 9, 10, 11;

  --sj-content-max: 1280px;
  --sj-copy-max: 620px;
  --sj-gutter: clamp(1rem, 4vw, 3rem);
  --sj-section-space: clamp(4rem, 7vw, 6rem);

  --sj-display: clamp(2.6rem, 6.4vw, 6.5rem);
  --sj-heading-1: clamp(2.2rem, 4vw, 4.5rem);
  --sj-heading-2: clamp(1.8rem, 3vw, 3rem);
  --sj-body-lg: clamp(1.1rem, 1.4vw, 1.25rem);
  --sj-small: .82rem;

}

/* Above custom.css "body.sp-public" in specificity. */
html[data-bs-theme] body.sp-public-home {
  background: var(--sj-bg);
  color: var(--sj-ink);
}

html:has(> body.sp-public-home) {
  background: #090A0B;
}

body.sp-public-home .page {
  padding-top: 0;
}

/* System grotesk (Segoe UI, SF Pro, Roboto): no web font to download before the first paint, and DESIGN.md 7
   advises against overly geometric faces such as Montserrat. */
body.sp-public-home {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Above custom.css "body.sp-public h2" in specificity. */
html[data-bs-theme] body.sp-public-home :is(h1, h2, h3, h4) {
  font-family: inherit;
  color: inherit;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

:where(.sp-public-home) p {
  line-height: 1.6;
}

html[data-bs-theme] body.sp-public-home a.sj-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  padding: .75rem 1rem;
  background: var(--sj-ink);
  color: var(--sj-bg);
  border-radius: 3px;
}

html[data-bs-theme] body.sp-public-home a.sj-skip:focus {
  top: 1rem;
  color: var(--sj-bg);
}

.sj-wrap {
  width: min(var(--sj-content-max), 100% - 2 * var(--sj-gutter));
  margin-inline: auto;
}

.sj-eyebrow {
  display: block;
  font-size: var(--sj-small);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sj-muted);
  margin: 0 0 1.25rem;
}

/* Buttons: rectangular, small radius, inversion on hover (DESIGN.md 25). */
html[data-bs-theme] body.sp-public-home a.sj-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: inherit;
  font-weight: 600;
  transition: background-color .16s ease, color .16s ease;
}

html[data-bs-theme] body.sp-public-home a.sj-btn-primary {
  background: var(--sj-ink);
  border-color: var(--sj-ink);
  color: var(--sj-bg);
}

html[data-bs-theme] body.sp-public-home a.sj-btn:hover,
html[data-bs-theme] body.sp-public-home a.sj-btn:focus-visible {
  background: var(--sj-ink);
  color: var(--sj-bg);
}

html[data-bs-theme] body.sp-public-home a.sj-btn-primary:hover,
html[data-bs-theme] body.sp-public-home a.sj-btn-primary:focus-visible {
  background: transparent;
  color: var(--sj-ink);
}

.sj-arrow {
  display: inline-block;
  transition: transform .16s ease;
}

.sj-btn:hover .sj-arrow,
.sj-link:hover .sj-arrow {
  transform: translateX(3px);
}

html[data-bs-theme] body.sp-public-home a.sj-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}

html[data-bs-theme] body.sp-public-home a.sj-link:hover,
html[data-bs-theme] body.sp-public-home a.sj-link:focus-visible {
  color: inherit;
  text-decoration-thickness: 2px;
}

.sp-public-home a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* 1. Hero: photograph with a gradient that protects the headline on the left. */
.sj-hero {
  position: relative;
  overflow: hidden;
}

.sj-hero-media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.sj-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* The winter photograph has a person at the far left; keep them in frame in the cropped mobile band. */
.sj-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--sj-hero-fade), 0) 45%, rgba(var(--sj-hero-fade), 1) 100%);
}

.sj-hero-copy {
  position: relative;
  padding: 0 var(--sj-gutter) var(--sj-section-space);
  margin-top: -3rem;
}

.sj-hero h1 {
  font-size: var(--sj-display);
  max-width: 14ch;
  font-weight: 700;
}

.sj-hero-domains {
  margin: 1.5rem 0 0;
  font-size: var(--sj-body-lg);
  font-weight: 600;
}

.sj-hero-lede {
  max-width: 34rem;
  margin: 1rem 0 2rem;
  color: var(--sj-muted);
  font-size: var(--sj-body-lg);
}

.sj-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}

@media (min-width: 900px) {
  .sj-hero {
    display: grid;
    min-height: min(92vh, 56.25vw);
    align-items: center;
  }

  .sj-hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .sj-hero-media::after {
    background: linear-gradient(90deg,
      rgba(var(--sj-hero-fade), .96) 0%,
      rgba(var(--sj-hero-fade), .92) 40%,
      rgba(var(--sj-hero-fade), .45) 62%,
      rgba(var(--sj-hero-fade), 0) 82%),
      linear-gradient(to bottom, rgba(var(--sj-hero-fade), 0) 75%, rgba(var(--sj-hero-fade), 1) 100%);
  }

  .sj-hero-copy {
    width: min(var(--sj-content-max), 100% - 2 * var(--sj-gutter));
    margin: 0 auto;
    padding: 6rem 0;
  }

  .sj-hero-copy > * {
    max-width: min(40rem, 42vw);
  }
}

/* 2. Products: each product sets its own world; with motion the whole section shifts between worlds. */
.sj-products-intro {
  padding: var(--sj-section-space) 0 calc(var(--sj-section-space) / 2);
}

.sj-products-intro h2 {
  font-size: var(--sj-heading-1);
  max-width: 16ch;
}

.sj-products-intro p {
  max-width: var(--sj-copy-max);
  margin: 1.5rem 0 0;
  color: var(--sj-muted);
  font-size: var(--sj-body-lg);
}

.sj-world-ls { --w-bg: #071013; --w-accent: #83D2DD; }
.sj-world-dr { --w-bg: #06080C; --w-accent: #A7B5FF; }
.sj-world-sp { --w-bg: #0C1115; --w-accent: #D7E3EA; }
.sj-world-tk { --w-bg: #0D1715; --w-accent: #9FC8BB; }
.sj-world-sj { --w-bg: var(--sj-bg); --w-accent: var(--sj-muted); }

/* Beats the generic "article" card style in custom.css (background, border, radius, shadow, padding). */
body.sp-public-home .sj-products > article.sj-product {
  background: var(--w-bg);
  color: inherit;
  padding: var(--sj-section-space) 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--sj-line);
  border-radius: 0;
  box-shadow: none;
}

/* home-motion.js adds .is-live: the section carries the colour and fades between worlds. */
.sj-products.is-live {
  background: var(--w-bg);
  transition: background-color .7s cubic-bezier(.33, 1, .68, 1);
}

body.sp-public-home .sj-products.is-live > article.sj-product {
  background: transparent;
}

.sj-product-grid {
  display: grid;
  gap: 2.5rem;
}

.sj-product-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sj-product-meta .sj-eyebrow {
  margin: 0;
  color: var(--w-accent);
  transition: color .4s ease;
}

.sj-product-rule {
  flex: 0 0 3.5rem;
  height: 1px;
  background: var(--w-accent);
  transform-origin: left center;
}

.sj-product h3 {
  font-size: var(--sj-heading-1);
  font-weight: 700;
}

.sj-product-logo img {
  width: min(240px, 70%);
  height: auto;
}

.sj-proposition {
  margin: 1.5rem 0 0;
  font-size: var(--sj-heading-2);
  line-height: 1.1;
  font-weight: 600;
  max-width: 18ch;
}

.sj-product-copy > p:not(.sj-proposition) {
  max-width: 34rem;
  color: var(--sj-muted);
  margin: 1.25rem 0 0;
}

.sj-product-copy .sj-link {
  margin-top: 1.5rem;
}

.sj-product-visual {
  margin: 0;
  overflow: hidden;
  max-width: 34rem;
}

/* Soft edges: the photographs fade into the section instead of ending in a hard line. Two gradients,
   intersected, fade all four sides. The Let's Secure screenshots keep their crisp frame (product UI). */
.sj-product-visual {
  --sj-edge: 9%;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--sj-edge), #000 calc(100% - var(--sj-edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--sj-edge), #000 calc(100% - var(--sj-edge)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--sj-edge), #000 calc(100% - var(--sj-edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--sj-edge), #000 calc(100% - var(--sj-edge)), transparent);
  mask-composite: intersect;
}

.sj-product-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* Reserve space while the selected image is hydrated from its inert template. */
.sj-product-visual { width: 100%; aspect-ratio: 1122 / 1402; }
.sj-product-photo { aspect-ratio: 526 / 505; }

/* Neutral gallery chrome across the homepage and the two editorial pages. */
html[data-bs-theme] body.sp-public-home .sp-topbar-row,
html[data-bs-theme] body.sp-public-home .sp-public-footer-inner {
  background: var(--sj-surface);
  border-color: var(--sj-line);
  box-shadow: none;
}

body.sp-public-home .sp-public-topbar { background: transparent; }

/* Header and footer share the content column (.sj-wrap), so their edges line up with the copy. */
body.sp-public-home .sp-public-topbar,
body.sp-public-home .sp-public-footer {
  width: min(var(--sj-content-max), 100% - 2 * var(--sj-gutter));
}

body.sp-public-home .sp-public-nav {
  --sp-text: var(--sj-ink);
  --sp-primary: var(--sj-muted);
}

html[data-bs-theme] body.sp-public-home .sp-public-footer-links a {
  color: var(--sj-ink);
}

body.sp-public-home .sp-public-logo img { filter: none; }
body.sp-public-home .sp-public-logo { display: inline-flex; width: 132px; min-height: 44px; align-items: center; }

@media (min-width: 900px) {
  body.sp-public-home .sj-products > article.sj-product {
    display: flex;
    align-items: center;
  }

  .sj-product-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 8rem);
  }

  .sj-product-visual {
    justify-self: end;
  }

  .sj-product-flip .sj-product-copy {
    order: 2;
  }

  .sj-product-flip .sj-product-visual {
    justify-self: start;
  }
}

/* 3. What we believe: typography and thin rules only. */
.sj-belief {
  padding: var(--sj-section-space) 0;
  border-top: 1px solid var(--sj-line);
}

.sj-belief h2 {
  font-size: var(--sj-heading-1);
  max-width: 18ch;
}

.sj-belief-lede {
  max-width: var(--sj-copy-max);
  margin: 1.5rem 0 0;
  color: var(--sj-muted);
  font-size: var(--sj-body-lg);
}

.sj-principles {
  display: grid;
  gap: 2rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}

.sj-principles li {
  position: relative;
  padding-top: 1.5rem;
}

.sj-principles li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--sj-ink);
  transform-origin: left center;
  transform: scaleX(var(--sj-rule, 1));
}

.sj-principles strong {
  display: block;
  font-size: var(--sj-small);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sj-principles span {
  display: block;
  margin-top: .75rem;
  color: var(--sj-muted);
}

@media (min-width: 900px) {
  .sj-principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* How we build: the verification pulse that home-motion.js runs along each rule. Invisible unless the
   script sets --sj-pulse-on, so the page is unchanged without JavaScript or with reduced motion. */
.sj-build .sj-principles li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  /* The bright band sits at --sj-pulse percent along the rule (-20 to 120 runs it off both ends). */
  background: linear-gradient(90deg,
    transparent calc(var(--sj-pulse, -20) * 1% - 18%),
    #83D2DD calc(var(--sj-pulse, -20) * 1% - 3%),
    #F3F1EC calc(var(--sj-pulse, -20) * 1%),
    #83D2DD calc(var(--sj-pulse, -20) * 1% + 3%),
    transparent calc(var(--sj-pulse, -20) * 1% + 18%));
  filter: drop-shadow(0 0 4px rgba(131, 210, 221, 1)) drop-shadow(0 0 12px rgba(131, 210, 221, .8));
  opacity: var(--sj-pulse-on, 0);
  pointer-events: none;
}

/* 4. Independent by design: a large editorial landscape. */
.sj-independent {
  padding: var(--sj-section-space) 0;
  border-top: 1px solid var(--sj-line);
}

.sj-independent-head {
  display: grid;
  gap: 1.5rem;
}

.sj-independent h2 {
  font-size: var(--sj-heading-1);
  max-width: 14ch;
}

.sj-independent-head p {
  max-width: var(--sj-copy-max);
  margin: 0;
  color: var(--sj-muted);
  font-size: var(--sj-body-lg);
}

@media (min-width: 900px) {
  .sj-independent-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* 5. Contact: the birches photograph, quiet type, one clear action. */
.sj-contact {
  position: relative;
  overflow: hidden;
  color: var(--sj-paper);
  background: var(--sj-black);
}

.sj-contact-media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  /* The parallax scales the photograph past the frame; without no-repeat and the clip a 1px sliver shows above it. */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  overflow: hidden;
}

.sj-contact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the towers and the low sun (right) in view when a narrow screen crops the photograph. */
  object-position: 85% 50%;
}

.sj-contact-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 10, 11, .9) 0%, rgba(9, 10, 11, .72) 45%, rgba(9, 10, 11, .25) 100%);
}

.sj-contact-copy {
  position: relative;
  padding: calc(var(--sj-section-space) * 1.4) 0;
}

.sj-contact h2 {
  font-size: var(--sj-display);
  max-width: 10ch;
}

.sj-contact p {
  max-width: 30rem;
  margin: 1.5rem 0 2rem;
  font-size: var(--sj-body-lg);
  color: var(--sj-silver);
}

.sj-contact .sj-eyebrow {
  color: var(--sj-silver);
}

html[data-bs-theme] body.sp-public-home .sj-contact a.sj-btn-primary {
  background: var(--sj-paper);
  border-color: var(--sj-paper);
  color: var(--sj-black);
}

html[data-bs-theme] body.sp-public-home .sj-contact a.sj-btn-primary:hover,
html[data-bs-theme] body.sp-public-home .sj-contact a.sj-btn-primary:focus-visible {
  background: transparent;
  color: var(--sj-paper);
}

/* Products that are not launched yet: a "Coming soon" label and a dimmed image. The copy keeps its
   colours so the contrast stays at WCAG AA. */
.sj-soon {
  display: inline-block;
  margin: 1rem 0 0;
  padding: .3rem .75rem;
  border: 1px solid var(--w-accent);
  border-radius: 999px;
  color: var(--w-accent);
  font-size: var(--sj-small);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sj-product-soon .sj-product-visual img {
  filter: brightness(.55) saturate(.6);
}

.sj-product-soon .sj-proposition {
  color: var(--sj-muted);
}

/* Narrow screens: the copy lies on its photograph (hero, products, Umeå) instead of above or below it.
   Each image fills the block behind the text and a dark gradient keeps the text readable. */
@media (max-width: 899.98px) {
  /* The photograph covers the whole hero, as in the product sections: all of the copy lies on it, the
     city and the river sit behind the headline and a darkening gradient carries the lede and buttons. */
  .sj-hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .sj-hero-media img {
    object-position: 84% 50%;
  }

  .sj-hero-media::after {
    background: linear-gradient(to bottom,
      rgba(var(--sj-hero-fade), .1) 0%,
      rgba(var(--sj-hero-fade), .5) 40%,
      rgba(var(--sj-hero-fade), .78) 75%,
      rgba(var(--sj-hero-fade), 1) 100%);
  }

  .sj-hero-copy {
    margin-top: 0;
    /* A soft shadow keeps the copy legible where it crosses the bright sunset and city lights. */
    text-shadow: 0 1px 14px rgba(var(--sj-hero-fade), .85);
    padding-top: calc(25vw + 3rem);
    padding-bottom: 4rem;
  }

  .sj-hero-copy .sj-btn {
    text-shadow: none;
  }

  body.sp-public-home .sj-products > article.sj-product {
    padding: 0;
  }

  .sj-product-grid {
    position: relative;
    padding: 5rem 0;
  }

  .sj-product-copy {
    position: relative;
    z-index: 1;
  }

  /* The visual bleeds to the screen edges behind the copy and fades out at the top and bottom only. */
  .sj-product-visual,
  .sj-product-photo {
    position: absolute;
    inset: 0 calc(-1 * var(--sj-gutter));
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  }

  .sj-product-visual img {
    height: 100%;
    object-fit: cover;
  }

  .sj-product-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(var(--sj-hero-fade), .55), rgba(var(--sj-hero-fade), .85));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sj-products.is-live,
  .sj-btn,
  .sj-arrow,
  .sj-product-meta .sj-eyebrow {
    transition: none;
  }
}

/* The header is fetched by includes.js; reserve its box so the page does not shift when it arrives
   (sizes measured from .sp-public-topbar in custom.css: logo 44px plus nav row). */
.sp-public-home > [data-include$="header.html"] {
  height: 74.77px;
  margin: 1rem auto 2.5rem;
}

@media (max-width: 991.98px) {
  .sp-public-home > [data-include$="header.html"] {
    height: 85.33px;
    margin: 1rem 1rem 2rem;
  }
}

/* Header links on the paper background: custom.css gives them a blue at 85 % opacity (3.9:1); use the ink colour. */
html[data-bs-theme] body.sp-public-home .sp-public-nav a {
  color: var(--sj-ink);
}