/* ============================================================
 * Studio OptiMayS — Main Stylesheet
 * Served by webhull (ghcr.io/layer87-labs/webhull)
 * Design System: Eclectic Editorial – "Wild Professionalism"
 * ============================================================ */

/* Self-hosted fonts (downloaded from Google Fonts, served locally for CSP compliance) */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-normal-200800-f3dddd.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-normal-200800-621596.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-normal-200800-adb775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-italic-400-621596.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-italic-400-adb775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-normal-400-621596.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-normal-400-adb775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-italic-100800-5dcdda.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-italic-100800-5a25e7.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-italic-100800-61be53.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-italic-100800-f3dddd.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-italic-100800-621596.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-italic-100800-adb775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-normal-100800-5dcdda.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-normal-100800-5a25e7.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-normal-100800-61be53.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-normal-100800-f3dddd.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-normal-100800-621596.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-normal-100800-adb775.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Colors — Primary (Mint / Brand-Grün) */
  --color-primary:               #3f9a80;
  --color-primary-dark:          #2d7a65;
  --color-primary-darkest:       #1b5246;
  --color-primary-light:         #a8e0d0;
  --color-primary-dim:           #7dc4b2;
  --color-on-primary:            #ffffff;
  --color-primary-container:     #3f9a80;
  --color-on-primary-container:  #f4fffa;

  /* Colors — Secondary (Pink / Brand-Rosa) */
  --color-secondary:             #c4608a;
  --color-secondary-dark:        #e0609a;
  --color-secondary-container:   #ffc3e0;
  --color-on-secondary:          #ffffff;
  --color-on-secondary-container: #7b3a5c;
  --color-secondary-fixed:       #ffd8e8;
  --color-secondary-fixed-dim:   #ffc3e0;

  /* Colors — Surface / Background */
  --color-bg:                    #fdf9f0;
  --color-paper:                 #FAF7EF;
  --color-surface-low:           #f7f3ea;
  --color-surface-container:     #f1eee5;
  --color-surface-high:          #ece8df;
  --color-surface-highest:       #e6e2d9;
  --color-surface-variant:       #e6e2d9;
  --color-surface-dim:           #dddad1;
  --color-inverse-surface:       #31302b;
  --color-inverse-on-surface:    #f4f0e7;

  /* Colors — Text / Ink */
  --color-text:                  #1c1c16;
  --color-text-soft:             #3A4250;
  --color-text-muted:            #3d4945;

  /* Colors — Outline / Rule */
  --color-outline:               #6d7a75;
  --color-outline-variant:       #bcc9c4;
  --color-rule:                  rgba(21, 25, 30, 0.18);

  /* Colors — Error */
  --color-error:                 #ba1a1a;
  --color-error-container:       #ffdad6;

  /* Typography */
  --font-heading:    'Bricolage Grotesque', sans-serif;
  --font-body:       'Bricolage Grotesque', sans-serif;
  --font-prose:      'Instrument Serif', serif;
  --font-editorial:  'Instrument Serif', serif;
  --font-mono:       'JetBrains Mono', monospace;

  /* Font sizes */
  --fs-display-xl:         140px;
  --fs-display-xl-mobile:  56px;
  --fs-headline-lg:        80px;
  --fs-quote:              48px;
  --fs-editorial:          34px;
  --fs-subhead:            28px;
  --fs-body-lg:            21px;
  --fs-body-sm:            16px;
  --fs-label-mono:         12px;

  /* Font weights */
  --fw-display:   760;
  --fw-headline:  720;
  --fw-bold:      700;
  --fw-medium:    500;
  --fw-regular:   400;

  /* Line heights */
  --lh-tight:    1.1;
  --lh-snug:     1.2;
  --lh-normal:   1.3;
  --lh-relaxed:  1.5;
  --lh-loose:    1.6;
  --lh-body:     1.75;

  /* Letter spacing */
  --ls-tight:    -0.02em;
  --ls-wide:      0.08em;
  --ls-widest:    0.16em;

  /* Spacing (4px base grid) */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;   --sp-6:  24px;
  --sp-8:  32px;   --sp-10: 40px;   --sp-12: 48px;
  --sp-14: 56px;   --sp-16: 64px;   --sp-20: 80px;
  --sp-24: 96px;   --sp-32: 128px;

  /* Layout */
  --container-max:   1440px;
  --section-v-lg:    128px;
  --section-v-sm:     64px;
  --grid-gap-lg:      80px;
  --grid-gap-md:      48px;
  --grid-gap-sm:      24px;
  --margin-page:      56px;
  --margin-mobile:    24px;
  --nav-height:       80px;
  --header-total:     80px;

  /* Border radius */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast:  150ms ease;
  --transition-base:  300ms ease;
  --transition-slow:  500ms ease;
}

/* ─── CSS Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }
fieldset { border: none; }
::selection { background-color: var(--color-primary-dark); color: var(--color-paper); }
button, a, [role='button'], [role='listitem'] { touch-action: manipulation; }

/* ─── Layout Utilities ──────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-page);
}
@media (max-width: 768px) {
  .container { padding-inline: var(--margin-mobile); }
}

.prose {
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  max-width: 65ch;
  color: var(--color-text-muted);
}
.prose + .prose { margin-top: 1.25em; }

/* ─── Utilities ─────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Tape effect ───────────────────────────────────────────── */
.tape-effect { position: relative; }
.tape-effect::after {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 120px;
  height: 40px;
  background: rgba(230, 226, 217, 0.6);
  backdrop-filter: blur(2px);
  z-index: 10;
  pointer-events: none;
}

/* ─── webhull: Header Customization ───────────────────────────── */
/* Webhull uses .nav, .nav-container, .logo, .nav-links
   We override these to match optimays design */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: rgba(253, 249, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: none;
  padding: 0;
  height: var(--nav-height);
}
.nav-container {
  height: var(--nav-height);
  padding: 0 var(--margin-page);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* Hide the text site-name — optimays uses a wordmark logo image */
.logo-text { display: none; }
.logo-img { height: 38px; width: auto; display: block; }
.nav-links {
  display: flex;
  list-style: none;
  align-items: center;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-secondary);
}
/* Hide webhull theme-toggle — optimays has no dark mode */
.theme-toggle { display: none; }
/* Mobile menu toggle — hidden on desktop */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  transition: all 0.3s ease;
}
/* Mobile nav */
@media (max-width: 768px) {
  .mobile-menu-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--color-paper);
    flex-direction: column;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    gap: var(--sp-6);
    transition: right 0.3s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  }
  .nav-links.active { right: 0; }
  .nav-links a { font-size: var(--fs-body); padding: 0.5rem 0; }
  .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
}

/* ─── webhull: Footer Customization ───────────────────────────── */
.footer {
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-rule);
  padding-block: var(--section-v-sm);
}
.footer-section h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.footer-section a {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer-section a:hover {
  color: var(--color-secondary);
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  color: rgba(58, 66, 80, 0.4);
  letter-spacing: var(--ls-wide);
}

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  width: 100%;
  margin-top: var(--header-total);
  line-height: 0;
}
.hero__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Purpose ───────────────────────────────────────────────── */
.purpose { background-color: var(--color-paper); padding-block: var(--section-v-lg); }
.purpose__intro { max-width: 48rem; margin-bottom: var(--section-v-sm); }
.purpose__heading { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, var(--fs-headline-lg)); font-weight: var(--fw-headline); color: var(--color-text); line-height: var(--lh-snug); margin-bottom: 2rem; text-transform: uppercase; }
.purpose__divider { width: 8rem; height: 4px; background-color: var(--color-secondary-dark); }
.purpose__grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap-md); }
@media (min-width: 768px) { .purpose__grid { grid-template-columns: repeat(3, 1fr); } }
.purpose__card { position: relative; padding: 2.5rem; overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); cursor: default; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.purpose__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.purpose__card-label { display: block; font-family: var(--font-heading); font-size: clamp(1.75rem, 4.5vw, 3rem); font-weight: var(--fw-display); letter-spacing: var(--ls-tight); text-transform: uppercase; line-height: 1; margin-bottom: 0.5rem; }
.purpose__card-title { font-family: var(--font-prose); font-style: italic; font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-snug); margin-bottom: 1.5rem; text-decoration: none; }
.purpose__card-body { font-family: var(--font-prose); font-size: 1.0625rem; line-height: var(--lh-body); }
.purpose__card-glyph { position: absolute; top: 1rem; right: 1rem; width: 6rem; height: 6rem; opacity: 0.12; pointer-events: none; user-select: none; }
.purpose__card-glyph img { width: 100%; height: 100%; object-fit: contain; }
/* Card variants */
.purpose__card--surface { background-color: var(--color-bg); }
.purpose__card--surface .purpose__card-label { color: var(--color-secondary-dark); }
.purpose__card--surface .purpose__card-title { color: var(--color-text-soft); }
.purpose__card--surface .purpose__card-body { color: var(--color-text-muted); }
.purpose__card--surface .purpose__card-glyph { color: var(--color-secondary-fixed-dim); opacity: 0.4; }
.purpose__card--mint { background-color: var(--color-primary-dark); }
.purpose__card--mint .purpose__card-label { color: var(--color-primary-dim); }
.purpose__card--mint .purpose__card-title { color: var(--color-paper); }
.purpose__card--mint .purpose__card-body { color: rgba(250, 247, 239, 0.8); }
.purpose__card--mint .purpose__card-glyph { color: var(--color-paper); }
.purpose__card--pink { background-color: var(--color-secondary-container); }
.purpose__card--pink .purpose__card-label { color: var(--color-secondary); }
.purpose__card--pink .purpose__card-title { color: var(--color-text-soft); }
.purpose__card--pink .purpose__card-body { color: var(--color-text-muted); }
.purpose__card--pink .purpose__card-glyph { color: var(--color-secondary-dark); opacity: 0.15; }

/* ─── Visionary ─────────────────────────────────────────────── */
.visionary { background-color: var(--color-paper); padding-bottom: var(--section-v-lg); }
.visionary__hero { display: flex; flex-direction: column; gap: 1rem; margin-bottom: var(--section-v-sm); }
.visionary__badge { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-label-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; background-color: var(--color-secondary-fixed); color: var(--color-secondary-dark); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); }
.visionary__heading { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, var(--fs-headline-lg)); font-weight: var(--fw-headline); line-height: var(--lh-tight); color: var(--color-text); font-style: normal; text-transform: uppercase; }
.visionary__heading-em { font-family: var(--font-editorial); font-style: italic; color: var(--color-secondary-dark); }
.section-heading-em { font-family: var(--font-editorial); font-style: italic; color: var(--color-secondary-dark); }
.visionary__grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap-lg); align-items: start; }
@media (min-width: 1200px) { .visionary__grid { grid-template-columns: 5fr 7fr; } }
.visionary__portrait-wrap { position: relative; display: flex; justify-content: center; }
.visionary__portrait { position: relative; background-color: var(--color-paper); padding: 1.5rem; transform: rotate(-2deg); box-shadow: var(--shadow-md); width: 100%; max-width: 320px; overflow: hidden; border-radius: var(--radius-sm); }
@media (min-width: 768px) { .visionary__portrait { max-width: 380px; } }
.visionary__portrait-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); border-radius: var(--radius-sm); transition: filter var(--transition-slow); }
.visionary__portrait-img:hover { filter: grayscale(0); }
.visionary__stamp { position: absolute; bottom: 2.5rem; right: 2.5rem; width: 6rem; height: 6rem; border: 4px solid rgba(226, 111, 174, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(12deg); }
.visionary__stamp span { font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-bold); color: var(--color-secondary-dark); text-align: center; line-height: 1.4; text-transform: uppercase; }
.visionary__asterisk { position: absolute; top: -2rem; right: -0.5rem; width: 7rem; height: 7rem; opacity: 0.15; pointer-events: none; user-select: none; }
.visionary__asterisk img { width: 100%; height: 100%; object-fit: contain; }
.visionary__bio { display: flex; flex-direction: column; gap: 2rem; }
.visionary__bio-text { font-family: var(--font-prose); font-size: var(--fs-body-lg); color: var(--color-text-soft); line-height: var(--lh-loose); }
.visionary__facts { display: flex; flex-wrap: wrap; gap: var(--grid-gap-md); margin-top: 1rem; }
.visionary__fact { display: flex; flex-direction: column; gap: 0.25rem; }
.visionary__fact-number { font-family: var(--font-heading); font-size: var(--fs-quote); font-weight: var(--fw-display); color: var(--color-primary-dark); line-height: var(--lh-tight); }
.visionary__fact-number--infinity { font-size: var(--fs-quote); }
.visionary__promise { margin-top: var(--section-v-sm); }
.visionary__fact-label { font-family: var(--font-mono); font-size: var(--fs-label-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-text-muted); }

/* ─── Studio ────────────────────────────────────────────────── */
.studio { padding-block: var(--section-v-lg); background-color: var(--color-bg); }
.studio__label { display: none; }
.studio__hero { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap-md); align-items: end; margin-bottom: var(--section-v-lg); }
@media (min-width: 768px) { .studio__hero { grid-template-columns: 8fr 4fr; } }
.studio__heading { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, var(--fs-headline-lg)); font-weight: var(--fw-display); color: var(--color-text); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: 2rem; text-transform: uppercase; }
.studio__intro { font-family: var(--font-heading); font-size: var(--fs-subhead); font-weight: var(--fw-bold); color: var(--color-primary-darkest); line-height: var(--lh-snug); max-width: 40rem; }
.studio__hero-image { display: flex; justify-content: center; }
.studio__hero-image-wrap { transform: rotate(3deg); width: 100%; max-width: 300px; margin-inline: auto; }
.studio__hero-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1); border-radius: var(--radius-sm); box-shadow: var(--shadow-xl); transition: filter var(--transition-slow); }
.studio__hero-img:hover { filter: grayscale(0); }
/* Magic block */
.studio__magic {
  background-color: var(--color-primary-dark);
  color: var(--color-paper);
  padding: var(--section-v-lg) var(--margin-page);
  margin-inline: calc(-1 * var(--margin-page));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-lg);
  margin-bottom: var(--section-v-lg);
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) { .studio__magic { margin-inline: calc(-1 * var(--margin-mobile)); padding-inline: var(--margin-mobile); } }
@media (min-width: 768px) { .studio__magic { grid-template-columns: 1fr 1fr; } }
.studio__magic-heading { font-family: var(--font-heading); font-size: clamp(var(--fs-display-xl-mobile), 6vw, var(--fs-headline-lg)); font-weight: var(--fw-display); color: var(--color-secondary-fixed-dim); margin-bottom: 2rem; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.studio__magic .studio__label { color: var(--color-paper); opacity: 0.65; }
.studio__magic-body { font-family: var(--font-prose); font-size: var(--fs-body-lg); line-height: var(--lh-loose); opacity: 0.9; margin-bottom: 1.5rem; }
.studio__magic-list { display: flex; flex-direction: column; gap: 1rem; }
.studio__magic-item { display: flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: var(--fs-label-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; transition: transform var(--transition-base); cursor: default; }
.studio__magic-item:hover { transform: translateX(18px); }
.studio__magic-bullet { color: var(--color-secondary-dark); font-size: 1.25rem; flex-shrink: 0; }
.studio__magic-quote-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg); padding: 3rem; align-self: center; }
.studio__magic-quote { font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-editorial); color: var(--color-secondary-dark); line-height: var(--lh-normal); margin-bottom: 1.5rem; }
.studio__magic-divider { height: 1px; background: rgba(255, 255, 255, 0.2); margin-bottom: 1.5rem; }
.studio__magic-sub { font-family: var(--font-prose); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); opacity: 0.8; }
/* Promise */
.studio__promise { display: flex; flex-direction: column; gap: var(--grid-gap-md); }
.studio__promise-intro { text-align: center; }
.studio__promise-heading { font-family: var(--font-heading); font-size: clamp(var(--fs-display-xl-mobile), 6vw, var(--fs-headline-lg)); font-weight: var(--fw-display); color: var(--color-primary-darkest); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.studio__promise-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap-md); }
@media (min-width: 768px) { .studio__promise-grid { grid-template-columns: repeat(3, 1fr); } }
.studio__promise-card { position: relative; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; cursor: default; border-radius: var(--radius-lg); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.studio__promise-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.studio__promise-card--paper { background-color: var(--color-paper); }
.studio__promise-card--paper:first-child { border-bottom: 4px solid var(--color-primary-dark); }
.studio__promise-card--paper:last-child { border-bottom: 4px solid var(--color-secondary); }
.studio__promise-card--paper .studio__promise-card-title { color: var(--color-primary-dark); }
.studio__promise-card--paper .studio__promise-card-body { color: var(--color-text-muted); }
.studio__promise-card--pink { background-color: var(--color-secondary-dark); }
.studio__promise-card--pink .studio__promise-card-title { color: var(--color-paper); }
.studio__promise-card--pink .studio__promise-card-body { color: rgba(250, 247, 239, 0.9); }
.studio__promise-card--pink .studio__promise-card-tag { color: var(--color-paper); }
.studio__promise-card-title { font-family: var(--font-heading); font-size: var(--fs-subhead); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin-bottom: 1.5rem; }
.studio__promise-card-body { font-family: var(--font-prose); font-size: 1.0625rem; line-height: var(--lh-body); flex-grow: 1; }
.studio__promise-card-tag { margin-top: 3rem; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-primary-dark); display: flex; align-items: center; gap: 0.5rem; }
.studio__promise-card-tag::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary-dark); flex-shrink: 0; }
.studio__promise-card--pink .studio__promise-card-tag::before { background-color: var(--color-paper); }

/* ─── Magic (Methode) ───────────────────────────────────────── */
.magic { padding-block: var(--section-v-lg); background-color: var(--color-bg); overflow: hidden; }
.magic__grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap-lg); align-items: center; }
@media (min-width: 768px) { .magic__grid { grid-template-columns: 5fr 7fr; } }
.magic__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; }
.magic__blob { position: absolute; inset: -40px; background: radial-gradient(ellipse at 60% 40%, var(--color-secondary-container) 0%, transparent 70%); border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%; z-index: 0; pointer-events: none; }
.magic__photo-wrap { position: relative; z-index: 1; transform: rotate(-1deg); max-width: 320px; width: 100%; }
.magic__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-xl); display: block; }
.magic__badge { position: absolute; bottom: 16px; right: 16px; z-index: 2; width: 100px; height: 100px; border-radius: 50%; background-color: var(--color-primary); color: var(--color-paper); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; gap: 0; box-shadow: 0 4px 20px rgba(0, 104, 87, 0.35); }
.magic__badge-text { font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.4; }
.magic__badge-text--italic { font-family: var(--font-editorial); font-style: italic; font-size: 1rem; }
.magic__label { display: none; }
.magic__heading { font-family: var(--font-heading); font-size: clamp(var(--fs-display-xl-mobile), 7vw, var(--fs-headline-lg)); font-weight: var(--fw-display); color: var(--color-text); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--grid-gap-md); text-transform: uppercase; }
.magic__list { display: flex; flex-direction: column; gap: var(--grid-gap-sm); }
.magic__list-item { display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; align-items: start; transition: transform var(--transition-base); cursor: default; border-bottom: 1px solid var(--color-rule); padding-bottom: var(--grid-gap-sm); }
.magic__list-item:hover { transform: translateX(16px); }
.magic__list-item:last-child { border-bottom: none; padding-bottom: 0; }
.magic__list-marker { font-size: 1rem; color: var(--color-secondary-dark); padding-top: 0.125rem; flex-shrink: 0; }
.magic__list-term { display: block; font-family: var(--font-heading); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin-bottom: 0.5rem; }
.magic__list-desc { font-family: var(--font-prose); font-size: 1.0625rem; line-height: var(--lh-body); color: var(--color-text-muted); }

/* ─── Socials ───────────────────────────────────────────────── */
.socials { padding-block: var(--section-v-lg); background-color: var(--color-secondary-container); }
.socials__header { max-width: 52rem; margin-bottom: var(--section-v-sm); }
.socials__label { display: none; }
.socials__heading { font-family: var(--font-heading); font-size: clamp(var(--fs-display-xl-mobile), 7vw, var(--fs-headline-lg)); font-weight: var(--fw-display); color: var(--color-text); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: 1.5rem; text-transform: uppercase; }
.socials__heading-em { font-family: var(--font-editorial); font-style: italic; color: var(--color-secondary-dark); }
.socials__intro { font-family: var(--font-prose); font-size: 1.0625rem; line-height: var(--lh-body); color: var(--color-text-muted); max-width: 44ch; }

/* Instagram grid */
.socials__ig-wrap { display: flex; flex-direction: column; gap: 2rem; }
.socials__ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) { .socials__ig-grid { grid-template-columns: repeat(6, 1fr); gap: 0.75rem; } }
.socials__ig-post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-container);
}
.socials__ig-post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; display: block; }
.socials__ig-post:hover img { transform: scale(1.06); }
.socials__ig-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 25, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.socials__ig-post:hover .socials__ig-overlay,
.socials__ig-post:focus-visible .socials__ig-overlay { opacity: 1; }
.socials__ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: flex-start;
  padding: 0.875rem 1.75rem;
  background-color: var(--color-primary-darkest);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  transition: background-color var(--transition-base), transform var(--transition-base);
}
.socials__ig-follow:hover,
.socials__ig-follow:focus-visible { background-color: var(--color-primary-dark); transform: translateY(-2px); }
.socials__ig-follow-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* Logo bullet images */
.studio__magic-bullet { display: inline-flex; align-items: center; flex-shrink: 0; }
.studio__magic-bullet img { width: 18px; height: 18px; object-fit: contain; }
.magic__list-marker { display: flex; align-items: flex-start; padding-top: 0.125rem; flex-shrink: 0; }
.magic__list-marker img { width: 20px; height: 20px; object-fit: contain; }

/* ─── Contact ───────────────────────────────────────────────── */
.contact { padding-block: var(--section-v-lg); background-color: var(--color-primary-darkest); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap-lg); align-items: start; }
@media (min-width: 768px) { .contact__grid { grid-template-columns: 5fr 7fr; } }
.contact__label { display: none; }
.contact__heading { font-family: var(--font-heading); font-size: clamp(var(--fs-display-xl-mobile), 6vw, var(--fs-headline-lg)); font-weight: var(--fw-display); color: var(--color-paper); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin-bottom: var(--grid-gap-md); text-transform: uppercase; }
.contact__details { display: flex; flex-direction: column; gap: 1rem; }
.contact__detail-link { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-heading); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--color-secondary-dark); text-decoration: none; transition: color var(--transition-base), transform var(--transition-base); }
.contact__detail-link:hover,
.contact__detail-link:focus-visible { color: var(--color-primary-dark); transform: translateX(8px); }
.contact__detail-icon { font-size: 1.25rem; color: var(--color-secondary); flex-shrink: 0; }
.contact__form-wrap { background-color: var(--color-paper); padding: 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.contact__form { display: flex; flex-direction: column; gap: 1.75rem; }
.contact__field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact__field-label { font-family: var(--font-mono); font-size: var(--fs-label-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-text-soft); }
.contact__field-input { appearance: none; background: transparent; border: none; border-bottom: 1px solid var(--color-rule); border-radius: 0; padding: 0.625rem 0; font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--color-primary-darkest); outline: none; transition: border-color var(--transition-base); resize: none; width: 100%; }
.contact__field-input::placeholder { color: rgba(62, 73, 87, 0.5); }
.contact__field-input:focus { border-bottom-color: var(--color-primary-dark); }
.contact__field-input:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 4px; border-radius: 2px; }
.contact__field-input--textarea { line-height: var(--lh-relaxed); }
.contact__field-error { font-family: var(--font-mono); font-size: 10px; color: var(--color-secondary-dark); letter-spacing: var(--ls-wide); display: none; }
.contact__field-error:not([hidden]) { display: block; }
.contact__submit { appearance: none; cursor: pointer; background-color: var(--color-primary-dark); color: var(--color-paper); font-family: var(--font-mono); font-size: var(--fs-label-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-widest); text-transform: uppercase; padding: 1rem 2.5rem; border-radius: var(--radius-full); align-self: flex-start; transition: background-color var(--transition-base), transform var(--transition-base); }
.contact__submit:hover { background-color: var(--color-primary-darkest); transform: translateY(-2px); }
.contact__submit:active { transform: translateY(0); }
.contact__submit:focus-visible { outline: 2px solid var(--color-primary-darkest); outline-offset: 3px; }
.contact__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.contact__status { font-family: var(--font-mono); font-size: var(--fs-label-mono); padding: 1rem; border-radius: var(--radius-md); margin-top: 1rem; }
.contact__status--success { background-color: var(--color-primary-light); color: var(--color-primary-darkest); }
.contact__status--error { background-color: var(--color-error-container); color: var(--color-error); }

/* ─── Main padding adjustment ──────────────────────────────── */
main { padding-top: 0; }

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