/* ----------------------------------------------------------------------------
 * Homepage hero — editorial Scandinavian
 * Scoped to .header.hero-home so other landing-page heroes are unaffected.
 * Vocabulary:
 *   .hero-home              — outer hero element
 *   .hero-home__photo       — full-bleed background photograph + tints
 *   .hero-home__inner       — content container (max-width, side padding)
 *   .hero-home__eyebrow     — small-caps locality kicker with brass rule
 *   .hero-home__headline    — display H1 (Fraunces variable, italic accent)
 *   .hero-home__subhead     — supporting paragraph (Poppins, slate-cream)
 *   .hero-home__ctas        — primary brass + ghost outline CTAs
 *   .hero-home__trust       — three trust chips with brass icons
 * ------------------------------------------------------------------------- */

body.landing .header.hero-home {
  /* override the legacy .header rules cleanly */
  --hero-ink: #0e1014;
  --hero-cream: #f2ebdd;
  --hero-cream-soft: #d8d2c5;
  --hero-slate: #9aa0a8;
  --hero-brass: #b98a4a;
  --hero-brass-bright: #d4a361;
  --hero-brass-brightest: #e3b66f;

  position: relative;
  width: 100%;
  margin-top: 70px;
  min-height: min(86vh, 780px);
  background: var(--hero-ink);
  color: var(--hero-cream);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

/* — Background photograph + dramatic ink gradient ----------------------- */
body.landing .header.hero-home .hero-home__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/assets/goteborg-vasa-c99c9b8c.webp");
  background-size: cover;
  background-position: center 40%;
  /* Lift the photo a touch so the cityscape reads with more colour and
     light, then let the gradient below handle text contrast. */
  filter: saturate(1.02) contrast(1) brightness(1.62);
}

body.landing .header.hero-home .hero-home__photo::after {
  /* Diagonal ink wash that's heavy behind the headline (left) and
     fades out on the right so the photograph can breathe. Subtle
     bottom-only tint keeps the lower trust strip readable without
     darkening the sky. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      102deg,
      rgba(14, 16, 20, 0.62) 0%,
      rgba(14, 16, 20, 0.46) 38%,
      rgba(14, 16, 20, 0.2) 70%,
      rgba(14, 16, 20, 0.02) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(14, 16, 20, 0.12) 0%,
      rgba(14, 16, 20, 0) 45%,
      rgba(14, 16, 20, 0.32) 100%
    );
}

/* Subtle grain for atmosphere — pure CSS data-URI, no extra request */
body.landing .header.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 240px 240px;
}

/* Faint hairline grid that ties to the architectural Scandinavian feel */
body.landing .header.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(242, 235, 221, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 235, 221, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 30%,
    #000 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 30%,
    #000 80%,
    transparent 100%
  );
}

/* — Inner content layout ------------------------------------------------- */
body.landing .header.hero-home .hero-home__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 132px) clamp(24px, 5vw, 80px)
    clamp(120px, 14vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, 64ch) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

body.landing .header.hero-home .hero-home__content {
  max-width: 64ch;
}

/* — Eyebrow: brass rule + small-caps locality kicker -------------------- */
body.landing .header.hero-home .hero-home__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hero-brass-bright);
  opacity: 0;
  animation: heroFade 0.7s ease-out 0.05s forwards;
}

body.landing .header.hero-home .hero-home__eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--hero-brass);
  flex-shrink: 0;
}

/* — Headline: Fraunces variable serif, italic accent on signature word -- */
body.landing .header.hero-home .hero-home__headline {
  margin: 0;
  font-family: "Fraunces", "Lora", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--hero-cream);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 50,
    "WONK" 0;
  text-wrap: balance;
  /* Soft ink halo keeps the cream serif crisp over the brighter photo
     without needing a heavier overlay. */
  text-shadow:
    0 2px 28px rgba(14, 16, 20, 0.5),
    0 1px 3px rgba(14, 16, 20, 0.4);
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s forwards;
}

/* — Subhead -------------------------------------------------------------- */
body.landing .header.hero-home .hero-home__subhead {
  margin: 28px 0 0;
  max-width: 56ch;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--hero-cream-soft);
  text-shadow: 0 1px 14px rgba(14, 16, 20, 0.55);
  opacity: 0;
  transform: translateY(10px);
  animation: heroRise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.34s forwards;
}

/* — CTA pair ------------------------------------------------------------- */
body.landing .header.hero-home .hero-home__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(8px);
  animation: heroRise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s forwards;
}

body.landing .header.hero-home .hero-home__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  white-space: nowrap;
}

body.landing .header.hero-home .hero-home__btn--primary {
  background: var(--hero-brass-bright);
  color: var(--hero-ink);
  border: 1px solid var(--hero-brass-bright);
  box-shadow: 0 0 0 0 rgba(185, 138, 74, 0);
}

body.landing .header.hero-home .hero-home__btn--primary:hover {
  background: var(--hero-brass-brightest);
  border-color: var(--hero-brass-brightest);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -16px rgba(185, 138, 74, 0.65);
  color: var(--hero-ink);
}

body.landing .header.hero-home .hero-home__btn--ghost {
  background: transparent;
  color: var(--hero-cream);
  border: 1px solid rgba(242, 235, 221, 0.32);
}

body.landing .header.hero-home .hero-home__btn--ghost:hover {
  background: rgba(242, 235, 221, 0.08);
  border-color: rgba(242, 235, 221, 0.6);
  color: var(--hero-cream);
}

body.landing .header.hero-home .hero-home__btn i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

body.landing .header.hero-home .hero-home__btn:hover i {
  transform: translateX(3px);
}

/* — Trust strip ---------------------------------------------------------- */
body.landing .header.hero-home .hero-home__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(242, 235, 221, 0.14);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--hero-cream-soft);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(14, 16, 20, 0.55);
  opacity: 0;
  animation: heroFade 1s ease-out 0.7s forwards;
}

body.landing .header.hero-home .hero-home__trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

body.landing .header.hero-home .hero-home__trust-chip i {
  color: var(--hero-brass-bright);
  font-size: 14.5px;
  width: 16px;
  text-align: center;
}

/* On larger screens keep all three trust chips on one row. The content
   column is capped at 64ch, so let the strip size to its content and
   extend into the empty right-hand column instead of wrapping. */
@media (min-width: 981px) {
  body.landing .header.hero-home .hero-home__trust {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
  }
  body.landing .header.hero-home .hero-home__trust-chip {
    white-space: nowrap;
  }
}

/* — Wave divider color override (still kept from legacy) ---------------- */
body.landing .header.hero-home svg.wave {
  z-index: 8;
  background: transparent;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100vw;
}

body.landing .header.hero-home svg.wave path {
  /* Match the cream paper bg of the .service-page section below the hero,
     so the wave transitions seamlessly with no white strip in between. */
  fill: #faf7f1;
}

/* — Animations ----------------------------------------------------------- */
@keyframes heroFade {
  to {
    opacity: 1;
  }
}

@keyframes heroRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.landing .header.hero-home .hero-home__eyebrow,
  body.landing .header.hero-home .hero-home__headline,
  body.landing .header.hero-home .hero-home__subhead,
  body.landing .header.hero-home .hero-home__ctas,
  body.landing .header.hero-home .hero-home__trust {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* — Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  body.landing .header.hero-home .hero-home__inner {
    grid-template-columns: 1fr;
    padding: clamp(60px, 12vw, 96px) clamp(20px, 5vw, 40px)
      clamp(100px, 14vw, 140px);
  }
  body.landing .header.hero-home .hero-home__photo {
    background-position: center 30%;
  }
  body.landing .header.hero-home .hero-home__photo::after {
    background: linear-gradient(
      180deg,
      rgba(14, 16, 20, 0.74) 0%,
      rgba(14, 16, 20, 0.66) 60%,
      rgba(14, 16, 20, 0.48) 100%
    );
  }
}

@media (max-width: 640px) {
  body.landing .header.hero-home {
    margin-top: 60px;
    min-height: auto;
  }
  body.landing .header.hero-home .hero-home__inner {
    padding: 64px 22px 110px;
  }
  body.landing .header.hero-home .hero-home__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    gap: 10px;
  }
  body.landing .header.hero-home .hero-home__eyebrow::before {
    width: 24px;
  }
  body.landing .header.hero-home .hero-home__headline {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
    letter-spacing: -0.018em;
  }
  body.landing .header.hero-home .hero-home__subhead {
    font-size: 0.97rem;
    margin-top: 22px;
  }
  body.landing .header.hero-home .hero-home__ctas {
    margin-top: 30px;
    flex-direction: column;
    align-items: stretch;
  }
  body.landing .header.hero-home .hero-home__btn {
    justify-content: center;
    padding: 15px 24px;
  }
  body.landing .header.hero-home .hero-home__trust {
    margin-top: 40px;
    padding-top: 22px;
    flex-direction: column;
    gap: 4px;
  }
}