/* ==========================================================================
   Mightyway — site stylesheet
   Colour roles and type scale are declared once here, at the top.
   Everything below refers to these tokens; never hard-code a colour.
   ========================================================================== */

:root {
  /* --- Colour roles (HSL components, used as hsl(var(--token))) --- */
  --background: 38 33% 95%;        /* page cream                       */
  --foreground: 0 0% 4%;           /* near-black text                  */
  --secondary: 40 25% 91%;         /* alternating section band         */
  --muted-foreground: 30 4% 46%;   /* eyebrow labels                   */
  --border: 39 14% 80%;            /* hairlines                        */
  --primary: 39 46% 42%;           /* bronze — buttons, rules, links   */
  --accent: 41 51% 57%;            /* light gold — accents on dark     */
  --mw-dark: 30 7% 17%;            /* dark band background             */
  --mw-on-dark: 30 10% 82%;        /* body text on the dark band       */
  --mw-body: 25 4% 29%;            /* body text on light backgrounds   */
  --danger: 0 55% 42%;             /* failed form submission           */

  /* --- Type --- */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;

  /* --- Layout --- */
  --wide: 80rem;                   /* 1280px — header, footer, wide rows */
  --prose: 48rem;                  /* 768px  — text sections             */
  --narrow: 42rem;                 /* 672px  — legal pages               */
  --gutter: 1.5rem;
  --header-h: 4rem;          /* phones; raised to 5rem from 768px */
  --radius-button: 4px;
}

@media (min-width: 768px) {
  :root { --header-h: 5rem; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

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

/* Visible only to screen readers, until focused (skip link). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--prose { max-width: var(--prose); }
.wrap--narrow { max-width: var(--narrow); }

@media (min-width: 1024px) {
  .wrap { padding-inline: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
}

.site-header__inner {
  display: flex;
  height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__logo img {
  max-height: 2.5rem;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .site-header__logo img { max-height: 4rem; }
}

.nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .nav { display: flex; }
}

.nav a {
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

.nav a:hover { color: hsl(var(--primary)); }

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  transition: opacity 0.2s;
}

.nav__lang:hover { opacity: 0.7; color: inherit; }

/* Mobile menu button + panel */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

.nav-mobile {
  display: none;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 0.5rem 0 1.25rem;
}

.nav-mobile[data-open="true"] { display: block; }

@media (min-width: 768px) {
  .nav-mobile[data-open="true"] { display: none; }
}

.nav-mobile a {
  display: block;
  padding: 0.625rem 0;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: hsl(var(--primary));
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  border-radius: var(--radius-button);
  transition: opacity 0.2s;
}

.btn:hover { opacity: 0.9; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* PHONES: the photograph and the words are stacked, not layered.
   The picture holds the top of the screen, the copy sits underneath it on a
   solid dark ground, and the gradient only blends the seam between the two.
   Nothing important is asked to survive on top of a lit face. */
.hero {
  /* How much of the hero the photograph occupies. The scrim's stops are
     derived from this, so the solid ground always begins exactly where the
     picture ends — change this one value and the blend follows. */
  --hero-photo: 58%;

  position: relative;
  /* svh, not vh: fills the screen exactly with the browser toolbars showing,
     and never overflows when they hide. */
  height: clamp(560px, calc(100svh - var(--header-h)), 900px);
  overflow: hidden;
  margin-top: var(--header-h);
  background: hsl(var(--mw-dark));
}

/* Short screens have the same amount of copy in less height, so the photograph
   yields some of its share rather than letting the headline climb into it.
   The shallower pane crops the frame harder, which pushes her face lower in
   the hero — measured: eyes 20%, mouth 31%, headline 42%. The scrim therefore
   needs its own stops rather than the ones above. */
@media (max-width: 640px) and (max-height: 720px) {
  .hero { --hero-photo: 48%; }
}

.hero__img {
  position: absolute;
  inset: 0 0 auto 0;         /* top-anchored; the lower part is solid ground */
  width: 100%;
  height: var(--hero-photo);
  object-fit: cover;
  object-position: 52% 4%;   /* her face near the top of the frame */
}

/* Her face must stay lit. The stops below are anchored to where she actually
   renders, measured in the browser rather than guessed: with --hero-photo at
   58% her eyes land at 17% of the hero and her mouth at 25%, the photograph
   ends at 58% and the headline begins at 63%.
   Read the percentages from the BOTTOM — the gradient runs "to top". So the
   scrim is clear across the whole face, begins to gather just under her mouth
   (74% from the bottom = 26% from the top) and is fully solid well before the
   white headline. It cannot be expressed as one formula off --hero-photo: the
   face's position depends on how object-fit crops the frame, which changes
   with the pane's shape, so the short-screen case is written out separately. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    hsl(var(--mw-dark)) 0%,
    hsl(var(--mw-dark)) 45%,        /* solid; headline sits at 37% */
    rgba(28, 23, 20, 0.78) 52%,
    rgba(28, 23, 20, 0.45) 60%,
    rgba(28, 23, 20, 0.15) 68%,
    transparent 74%                 /* just below her mouth; face untouched */
  );
}

/* Must come after the rule above to win the cascade, and must be scoped to
   phone widths as well as short heights — a short laptop matches max-height
   on its own and would otherwise get the stacked phone treatment. */
@media (max-width: 640px) and (max-height: 720px) {
  .hero__scrim {
    background: linear-gradient(
      to top,
      hsl(var(--mw-dark)) 0%,
      hsl(var(--mw-dark)) 58%,      /* solid; headline sits at 57% */
      rgba(28, 23, 20, 0.7) 62%,
      rgba(28, 23, 20, 0.3) 65%,
      transparent 69%               /* just below her mouth */
    );
  }
}

.hero__body {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2.25rem;
}

.hero__col { width: 100%; }

.hero__title {
  color: #fff;
  font-size: 1.95rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero__lead {
  font-size: 0.95rem;
  line-height: 1.7;
  color: hsl(var(--mw-on-dark));
  margin-bottom: 1rem;
}

.hero__line {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.4;
  color: hsl(var(--accent));
  margin-bottom: 1.5rem;
}

/* From 641px the layering returns: the photograph fills the whole hero and the
   copy sits in a column over its right-hand side. */
@media (min-width: 641px) {
  .hero {
    height: clamp(520px, 46vw, 760px);
    background: none;
  }

  .hero__img {
    inset: 0;
    height: 100%;
    object-position: 16% 20%;
  }

  .hero__scrim {
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 42%,
      rgba(28, 23, 20, 0.48) 50%,
      rgba(28, 23, 20, 0.7) 62%,
      rgba(28, 23, 20, 0.82) 100%
    );
  }

  .hero__body {
    align-items: center;
    padding-bottom: 0;
  }

  .hero__inner {
    display: flex;
    justify-content: flex-end;
  }

  .hero__col { width: 50%; }

  .hero__title {
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    margin-bottom: 1.25rem;
  }

  .hero__lead {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
  }

  .hero__line {
    font-size: clamp(1.2rem, 1.6vw, 1.35rem);
    margin-bottom: 2rem;
  }
}

@media (min-width: 1025px) {
  .hero__img { object-position: 18% 22%; }

  .hero__scrim {
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 42%,
      rgba(28, 23, 20, 0.5) 50%,
      rgba(28, 23, 20, 0.7) 62%,
      rgba(28, 23, 20, 0.8) 78%,
      rgba(28, 23, 20, 0.8) 100%
    );
  }

  .hero__col { width: 41.6667%; }
}

/* --------------------------------------------------------------------------
   Content sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: 3.5rem;
  scroll-margin-top: var(--header-h);
}

@media (min-width: 1024px) {
  .section { padding-block: 5rem; }
}

.section--alt { background: hsl(var(--secondary)); }

.section--dark {
  background: hsl(var(--mw-dark));
  color: #fff;
  padding-block: 3.5rem 7rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .section--dark { padding-block: 5rem 9rem; }
}

.eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.section--dark .eyebrow { color: hsl(var(--accent)); }

.rule {
  width: 3rem;
  height: 1px;
  background: hsl(var(--primary));
  margin-bottom: 1.5rem;
  border: 0;
}

.section--dark .rule { margin-inline: auto; }

.section h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
}

.section--dark h2 {
  color: #fff;
  font-size: clamp(1.875rem, 3.5vw, 3.25rem);
  margin-bottom: 1.5rem;
}

.prose > p + p { margin-top: 1.25rem; }

.prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: hsl(var(--mw-body));
}

.section--dark .prose p { color: hsl(var(--mw-on-dark)); }

/* Closing emphasis line under a text block. */
.section__note {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.section__signature {
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.section__lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
  color: hsl(var(--accent));
  margin-bottom: 2rem;
}

.section__cta { margin-top: 2.5rem; }

.section--dark .section__cta { margin-top: 0; }

.section--dark .prose p { margin-bottom: 2.5rem; }

/* Two-column row: portrait beside text. */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
  .split__media { padding-top: 4.5rem; }
}

/* Tall 9:16 portrait. Do not reintroduce max-height here: with `width: 100%`
   a height cap wins over `aspect-ratio`, and the box silently renders at
   whatever shape is left — that is how this ended up at 552x580, very nearly
   square, while claiming to be 4:5. Cap the width instead and let the ratio
   derive the height.

   The 9:16 frame is narrower than the file, so roughly a fifth of the width is
   cropped. Her face sits at about 45% of the frame, left of centre, with dark
   background to the right — so the crop is pulled left. That spends the
   background rather than her hair and brings the face to the middle. */
.split__media img {
  display: block;
  width: 100%;
  max-width: 394px;              /* 9:16 of this is ~700px tall */
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  object-position: 33% top;
}

/* --------------------------------------------------------------------------
   Legal / long-form pages
   -------------------------------------------------------------------------- */

.page {
  padding-block: calc(var(--header-h) + 3rem) 6rem;
}

.page h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 3rem;
}

.legal {
  font-size: 1rem;
  line-height: 1.75;
  color: hsl(var(--mw-body));
}

.legal h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  margin: 2rem 0 0.75rem;
}

.legal h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  margin: 1.5rem 0 0.5rem;
}

.legal p,
.legal ul,
.legal ol { margin: 0 0 1rem; }

.legal ul,
.legal ol { padding-left: 1.5rem; }

.legal li { margin-bottom: 0.5rem; }

.legal address {
  font-style: normal;
  line-height: 2;
}

.legal a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal section { margin-top: 2rem; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}

.legal th,
.legal td {
  border: 1px solid hsl(var(--border));
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

/* Wide content must scroll inside its own box, never the page. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--secondary));
  padding-block: 3rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .social { justify-content: flex-start; }
}

.social a { transition: opacity 0.2s; }
.social a:hover { opacity: 0.7; }
.social svg { fill: hsl(var(--accent)); }

.site-footer__logo {
  display: flex;
  justify-content: center;
}

.site-footer__logo img {
  max-height: 2rem;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

@media (min-width: 768px) {
  .footer-nav { justify-content: flex-end; }
}

.footer-nav a {
  font-size: 0.75rem;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover { color: hsl(var(--primary)); }

.site-footer__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
  text-align: center;
  font-size: 0.75rem;
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   Injected by assets/js/consent.js, never present in the HTML.
   Accept and decline carry the same visual weight on purpose: a decline that
   is harder to find than an accept is not freely given consent.
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  background: hsl(var(--mw-dark));
  color: hsl(var(--mw-on-dark));
  border-top: 1px solid hsl(var(--primary));
  box-shadow: 0 -4px 24px rgba(28, 23, 20, 0.25);
}

.consent[hidden] { display: none; }

.consent__inner {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .consent__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding-inline: 2.5rem;
  }
}

.consent__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.5rem;
}

.consent__body {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.65;
  max-width: 62ch;
}

.consent__body a {
  color: hsl(var(--accent));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.consent__btn {
  flex: 1 1 auto;
  padding: 0.7rem 1.75rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: opacity 0.2s;
}

@media (min-width: 900px) {
  .consent__btn { flex: 0 0 auto; }
}

.consent__btn:hover { opacity: 0.85; }

/* Accept and decline are deliberately identical — same fill, same border,
   same size, same weight — so neither is the easier option to reach. Only
   the label distinguishes them. Consent obtained by making refusal harder
   than agreement is not freely given, so do not restyle one of these to
   stand out. */
.consent__btn--primary,
.consent__btn--secondary {
  background: hsl(var(--primary));
  color: #fff;
  border: 1px solid hsl(var(--primary));
}

/* --------------------------------------------------------------------------
   Consent status block on the cookie policy pages
   -------------------------------------------------------------------------- */

.consent-status {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid hsl(var(--border));
}

.consent-status__value {
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;
}

.consent-status__value strong {
  font-weight: 500;
  color: hsl(var(--foreground));
}

/* Section title introducing the policy text proper. */
.legal__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin: 0 0 1.5rem;
}

/* --------------------------------------------------------------------------
   Contact form — site notice / Impressum
   -------------------------------------------------------------------------- */

.form { margin-top: 1.5rem; }

.form__row { margin-bottom: 1.25rem; }

.form__row label,
.form__consent label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
}

.form__row input,
.form__row textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #fff;
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
}

.form__row textarea {
  resize: vertical;
  min-height: 9rem;
}

.form__row input:focus-visible,
.form__row textarea:focus-visible,
.form__consent input:focus-visible,
.form button:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* The agreement sits between the fields and the button. The box and its words
   are one target: the label is bound to the input by `for`, so the sentence
   is clickable and a screen reader announces the two together. */
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.75rem 0;
}

.form__consent input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.45rem;
}

.form__consent label {
  margin-bottom: 0;
  font-weight: 300;
  line-height: 1.6;
  color: hsl(var(--mw-body));
}

/* .btn was written for links. A <button> carries user-agent styling that has
   to be cleared before the same class looks the same on both. */
.form button.btn {
  border: 0;
  cursor: pointer;
  font-size: 0.9375rem;
}

/* Honeypot. Taken out of the layout and the tab order rather than hidden with
   display:none, which the better bots know to skip. Web3Forms discards any
   submission that arrives with this filled in. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The answer the visitor gets after pressing Send. Lives outside the <form>
   so that hiding the form on success does not hide the confirmation with it. */
.form__status {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: hsl(var(--secondary));
  border-left: 3px solid hsl(var(--primary));
  font-size: 0.9375rem;
  line-height: 1.6;
}

.form__status[data-state="fail"] { border-left-color: hsl(var(--danger)); }

.form__status:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}