/* self-hosted fonts (restored after polish strip) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-italic-latin-ext.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: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-italic-latin.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: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-italic-latin-ext.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: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-italic-latin.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: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-normal-latin-ext.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: 400;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-400-normal-latin.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: 500;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-500-normal-latin-ext.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: 500;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-500-normal-latin.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: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-normal-latin-ext.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: 600;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-600-normal-latin.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: 700;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-700-normal-latin-ext.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: 700;
  font-display: optional;
  src: url(../fonts/JetBrainsMono-700-normal-latin.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: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-400-italic-latin-ext.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: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-400-italic-latin.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: 'Karla';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-600-italic-latin-ext.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: 'Karla';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-600-italic-latin.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: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-400-normal-latin-ext.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: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/Karla-400-normal-latin.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: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Karla-500-normal-latin-ext.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: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/Karla-500-normal-latin.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: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-600-normal-latin-ext.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: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/Karla-600-normal-latin.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: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Karla-700-normal-latin-ext.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: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/Karla-700-normal-latin.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-italic-latin-ext.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-italic-latin.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: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-italic-latin-ext.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: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-italic-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-normal-latin-ext.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-400-normal-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-500-normal-latin-ext.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-500-normal-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-normal-latin-ext.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-600-normal-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-700-normal-latin-ext.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(../fonts/PlayfairDisplay-700-normal-latin.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;
}

/* ==========================================================================
   Katman Kolaj Atölyesi — el işi büyük duvar kolajları
   Dünya: karanlık galeri · yırtık kağıt katmanları · fotoğraf-öncelikli
   ========================================================================== */

:root {
  interpolate-size: allow-keywords;

  --bg: #0E0B10;
  --surface: #1C1720;
  --surface-2: #241d29;
  --ink: #F3ECE4;
  --ink-soft: #c9beb4;
  --ink-faint: #9a8f88;
  --accent: #E9556D;        /* dolgu / ramke / dekor */
  --accent-text: #f0778a;   /* koyu zeminde küçük metin için hafif açık */
  --accent-2: #F2B84B;      /* amber vurgu */
  --accent-2-text: #f4c76c;
  --line: rgba(243, 236, 228, 0.14);
  --line-strong: rgba(243, 236, 228, 0.28);

  --serif: "Playfair Display", "Cambria", "Palatino Linotype", Georgia, serif;
  --sans: "Karla", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  --max: 1400px;
  --pad: clamp(20px, 5vw, 72px);
  --header-h: 74px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-2: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------ reset ---------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; max-width: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
figure, figcaption, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.14;
  margin: 0;
}
p { margin: 0 0 1rem; overflow-wrap: anywhere; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 2000;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

.eyebrow {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--accent-2-text);
  margin: 0 0 14px;
  display: inline-block;
}

.lead { color: var(--ink-soft); font-size: 1.08rem; }
.mono { font-family: "JetBrains Mono", "Consolas", monospace; }

/* torn-paper section divider — yırtım hattı (0 SVG, saf CSS clip-path) */
.torn-edge { position: relative; }
.torn-edge::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 26px;
  background: var(--bg);
  clip-path: polygon(
    0 0, 4% 60%, 8% 20%, 13% 75%, 18% 30%, 23% 80%, 28% 25%, 33% 70%,
    38% 35%, 43% 85%, 48% 28%, 53% 72%, 58% 22%, 63% 78%, 68% 32%,
    73% 68%, 78% 24%, 83% 82%, 88% 30%, 93% 74%, 97% 40%, 100% 0
  );
  z-index: 3;
  pointer-events: none;
}
.torn-edge.on-surface::before { background: var(--surface); }

/* ------------------------------ header --------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1080;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(14, 11, 16, 0.92);
  border-bottom: 1px solid transparent;
  transition: background 240ms var(--ease), height 240ms var(--ease),
              box-shadow 240ms var(--ease), border-color 240ms var(--ease);
}
.site-header.is-scrolled {
  background: rgba(14, 11, 16, 0.985);
  height: 62px;
  box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.9);
  border-bottom-color: var(--line);
}
.header-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.26rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { color: var(--accent-text); font-style: normal; font-weight: 700; }
.brand .brand-sub {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-desktop a {
  position: relative;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 6px 2px;
  transition: color 200ms var(--ease);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transition: right 240ms var(--ease);
}
.nav-desktop a:hover,
.nav-desktop a:focus-visible,
.nav-desktop a.is-active { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after,
.nav-desktop a.is-active::after { right: 0; }

.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 40px;
  font-weight: 700 !important;
}
.nav-desktop .nav-cta::after { display: none; }
.nav-desktop .nav-cta:hover,
.nav-desktop .nav-cta:focus-visible {
  background: var(--accent-2);
  color: #241d29 !important;
}

/* hamburger toggle */
.nav-toggle {
  position: relative;
  z-index: 1100;
  width: 46px; height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 260ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  padding: calc(var(--header-h) + 26px) 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.32rem;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-text); }
.drawer .nav-cta {
  margin-top: 18px;
  text-align: center;
  font-family: var(--sans);
  font-style: normal;
  font-size: 1rem;
  border-bottom: 0;
  color: #fff !important;
}
.drawer .nav-cta:hover { color: #241d29 !important; }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

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

main { padding-top: var(--header-h); }
:target,
main section[id],
[id].form-anchor { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ------------------------------ buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 44px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 220ms var(--ease), color 220ms var(--ease),
              transform 220ms var(--ease), box-shadow 220ms var(--ease),
              border-color 220ms var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent-2);
  color: #241d29;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -18px rgba(242, 184, 75, 0.8);
}
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--accent-text);
  transform: translateY(-2px);
}
.btn .arw { transition: transform 220ms var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ------------------------------ hero ----------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
  transform: translateY(var(--par, 0));
  animation: heroZoom 18s ease-out both;
}
@keyframes heroZoom {
  from { scale: 1.12; }
  to { scale: 1.02; }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,11,16,0.55) 0%, rgba(14,11,16,0.2) 34%, rgba(14,11,16,0.82) 82%, var(--bg) 100%),
    linear-gradient(90deg, rgba(14,11,16,0.7) 0%, rgba(14,11,16,0.05) 60%);
}
/* düşen kağıt parçaları — ambient */
.falling-piece {
  position: absolute;
  top: -8%;
  width: 46px; height: 58px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 10px 20px -12px rgba(0,0,0,0.6);
  opacity: 0;
  z-index: -1;
  clip-path: polygon(0 6%, 30% 0, 68% 8%, 100% 3%, 94% 44%, 100% 92%, 66% 100%, 24% 96%, 0 100%, 6% 52%);
  animation: fall linear infinite;
}
.falling-piece:nth-child(1) { left: 14%; animation-duration: 15s; animation-delay: 0s; --rot: 220deg; }
.falling-piece:nth-child(2) { left: 42%; width: 34px; height: 42px; animation-duration: 19s; animation-delay: 4s; --rot: -180deg; background: rgba(233,85,109,0.25); }
.falling-piece:nth-child(3) { left: 68%; width: 54px; height: 40px; animation-duration: 17s; animation-delay: 8s; --rot: 300deg; }
.falling-piece:nth-child(4) { left: 86%; width: 28px; height: 38px; animation-duration: 21s; animation-delay: 2s; --rot: -120deg; background: rgba(242,184,75,0.22); }
@keyframes fall {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  8% { opacity: 0.5; }
  92% { opacity: 0.35; }
  100% { opacity: 0; transform: translateY(112vh) rotate(var(--rot)); }
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(46px, 8vh, 96px);
  z-index: 2;
}
.hero-copy { max-width: 760px; }
.hero h1 {
  font-size: clamp(2.7rem, 7.2vw, 4.5rem);
  margin: 0 0 22px;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  animation: wordUp 720ms var(--ease) forwards;
  animation-delay: calc(var(--w, 0) * 90ms + 240ms);
}
@keyframes wordUp { to { opacity: 1; transform: none; } }
.hero h1 em { color: var(--accent-2-text); font-style: italic; }
.hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.24rem);
  color: var(--ink);
  max-width: 560px;
  margin: 0 0 30px;
  opacity: 0;
  animation: wordUp 720ms var(--ease) 700ms forwards;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  animation: wordUp 720ms var(--ease) 860ms forwards;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  opacity: 0;
  animation: wordUp 720ms var(--ease) 1000ms forwards;
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.trust-strip span::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-stats {
  position: absolute;
  right: var(--pad);
  bottom: clamp(46px, 8vh, 96px);
  display: none;
  flex-direction: column;
  gap: 20px;
  text-align: right;
  z-index: 2;
}
.hero-stats .stat b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--accent-2-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}
.hero-stats .stat span { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.06em; }
@media (min-width: 1180px) { .hero-stats { display: flex; } }

/* --------------------------- section shell ----------------------------- */
.section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.section.surface { background: var(--surface); }
.section-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 60px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  margin: 0 0 16px;
}
.section-head h2 em { color: var(--accent-text); }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

/* --------------------------- lookbook galeri --------------------------- */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.frame {
  position: relative;
  grid-column: span 4;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.9);
}
.frame.wide { grid-column: span 8; }
.frame.tall { grid-column: span 4; grid-row: span 2; }
.frame .frame-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.frame.wide .frame-img { aspect-ratio: 16 / 10; }
.frame.tall .frame-img { aspect-ratio: 4 / 7; }
.frame .frame-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
}
.frame:hover .frame-img img { transform: scale(1.05); filter: saturate(1.08); }
/* kağıt sheen — kenar parlaması */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(150px 150px at var(--mx, 50%) var(--my, 50%), rgba(243, 236, 228, 0.16), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.frame:hover::after { opacity: 1; }
.frame-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 18px 18px 16px;
  background: linear-gradient(0deg, rgba(14,11,16,0.94) 8%, rgba(14,11,16,0.55) 55%, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.frame-meta h3 { font-size: 1.16rem; margin: 0 0 3px; }
.frame-meta .dims { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.frame-price {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--accent-2-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.frame-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  background: rgba(14,11,16,0.82);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 40px;
}
.lookbook-note {
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* --------------------------- seri hikayesi (editorial) ----------------- */
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 70px);
  align-items: center;
  margin-bottom: clamp(48px, 7vw, 90px);
}
.story-row:last-child { margin-bottom: 0; }
.story-row.flip .story-media { order: 2; }
.story-media {
  position: relative;
  min-width: 0;
}
.story-media .torn-reveal {
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 4px;
}
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-media .caption {
  position: absolute;
  bottom: -14px; right: -8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  padding: 10px 18px;
  border-radius: 3px;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,0.9);
}
.story-copy { min-width: 0; }
.story-copy .kicker {
  font-family: "JetBrains Mono", Consolas, monospace;
  color: var(--accent-2-text);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}
.story-copy h3 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: 8px 0 16px; }
.story-copy p { color: var(--ink-soft); }
.story-facts {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}
.story-facts li {
  padding-left: 22px;
  position: relative;
  color: var(--ink);
  font-size: 0.96rem;
}
.story-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  background: var(--accent-2);
  transform: rotate(45deg);
}

/* torn mask-clip reveal */
.torn-reveal {
  --clip: polygon(0 12%, 8% 4%, 22% 14%, 38% 2%, 55% 12%, 72% 3%, 88% 13%, 100% 6%,
                  100% 88%, 90% 98%, 74% 88%, 58% 99%, 42% 89%, 26% 99%, 10% 88%, 0 96%);
  clip-path: var(--clip);
  transition: clip-path 900ms var(--ease);
}
.torn-reveal.is-in {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* manifesto quote */
.manifesto {
  text-align: center;
  max-width: 940px;
  margin: 0 auto;
}
.manifesto blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  line-height: 1.28;
  color: var(--ink);
}
.manifesto blockquote em { color: var(--accent-text); }
.manifesto cite {
  display: block;
  margin-top: 22px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------- calculator tool --------------------------- */
.tool-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
.tool-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(22px, 3vw, 34px);
}
.tool-panel h3 { font-size: 1.5rem; margin: 0 0 6px; }
.tool-panel .hint { color: var(--ink-faint); font-size: 0.86rem; margin: 0 0 22px; }
.tool-group { margin-bottom: 24px; }
.tool-group > label,
.tool-legend {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.opt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  position: relative;
  flex: 1 1 130px;
  min-width: 0;
}
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span {
  display: block;
  text-align: center;
  padding: 13px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 160ms var(--ease);
  background: rgba(243,236,228,0.02);
}
.opt span b { display: block; font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--ink); }
.opt span small { display: block; font-size: 0.74rem; color: var(--ink-faint); margin-top: 2px; }
.opt input:checked + span {
  border-color: var(--accent);
  background: rgba(233,85,109,0.14);
  transform: translateY(-2px);
}
.opt input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.range-row { display: flex; align-items: center; gap: 16px; }
.range-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  height: 30px;
}
.range-val {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--accent-2-text);
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tool-alert {
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-2-text);
  display: none;
  padding: 10px 14px;
  border: 1px solid rgba(242,184,75,0.4);
  border-radius: 8px;
  background: rgba(242,184,75,0.08);
}
.tool-alert.show { display: block; }

/* preview */
.tool-preview {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(20px, 2.6vw, 30px);
}
.preview-stage {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px),
    var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 22px;
}
.preview-collage {
  display: grid;
  gap: 4px;
  width: var(--pw, 60%);
  aspect-ratio: var(--par-w, 4) / var(--par-h, 5);
  transition: width 400ms var(--ease), aspect-ratio 400ms var(--ease);
  box-shadow: 0 20px 40px -22px rgba(0,0,0,0.9);
}
.preview-collage .cell {
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(14,11,16,0.6);
  min-width: 0;
  min-height: 0;
}
.preview-caption {
  margin-top: 8px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.preview-readout {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.readout-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.readout-line span:last-child {
  font-family: "JetBrains Mono", Consolas, monospace;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.readout-total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.readout-total strong { font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.readout-total .amount {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--accent-2-text);
  font-variant-numeric: tabular-nums;
}
.tool-disclaimer { margin: 14px 0 0; font-size: 0.76rem; color: var(--ink-faint); }
.tool-preview .btn { width: 100%; margin-top: 18px; }

/* --------------------------- material + size --------------------------- */
.material-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.material-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--line);
  isolation: isolate;
}
.material-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 700ms var(--ease);
}
.material-card:hover img { transform: scale(1.06); }
.material-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14,11,16,0.95) 12%, rgba(14,11,16,0.35) 60%, rgba(14,11,16,0.15));
}
.material-card .mc-body { padding: 22px; }
.material-card h4 { font-size: 1.3rem; margin: 0 0 6px; }
.material-card p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* size table */
.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
table th, table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
table thead th {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-2);
}
table td.price {
  font-family: "JetBrains Mono", Consolas, monospace;
  color: var(--accent-2-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table tbody tr:last-child td { border-bottom: 0; }

/* --------------------------- pricing packages -------------------------- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.pkg {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 34px);
  position: relative;
}
.pkg.featured { border-color: var(--accent); box-shadow: 0 30px 60px -40px rgba(233,85,109,0.6); }
.pkg .pkg-flag {
  position: absolute; top: -12px; right: 22px;
  background: var(--accent-2);
  color: #241d29;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 40px;
}
.pkg h3 { font-size: 1.5rem; margin: 0 0 4px; }
.pkg .pkg-for { color: var(--ink-faint); font-size: 0.86rem; margin: 0 0 18px; }
.pkg .pkg-price {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--accent-2-text);
  font-variant-numeric: tabular-nums;
}
.pkg .pkg-price small { display: block; font-size: 0.72rem; font-family: var(--sans); color: var(--ink-faint); font-weight: 400; letter-spacing: 0.02em; }
.pkg ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 11px; }
.pkg ul li { position: relative; padding-left: 24px; font-size: 0.92rem; color: var(--ink-soft); }
.pkg ul li.inc::before { content: "+"; position: absolute; left: 0; top: -1px; color: var(--accent-2-text); font-weight: 700; }
.pkg ul li.exc { color: var(--ink-faint); }
.pkg ul li.exc::before { content: "–"; position: absolute; left: 2px; top: -1px; color: var(--ink-faint); font-weight: 700; }
.pkg .pkg-delivery {
  font-size: 0.82rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-bottom: 18px;
}
.pkg .btn { width: 100%; }
.pkg-disclaimer { margin-top: 22px; font-size: 0.82rem; color: var(--ink-faint); text-align: center; }

/* --------------------------- process rhythm ---------------------------- */
.rhythm {
  display: grid;
  gap: 0;
  position: relative;
  border-left: 2px solid var(--line-strong);
  margin-left: 8px;
}
.rhythm-step {
  position: relative;
  padding: 0 0 clamp(30px, 4vw, 48px) clamp(28px, 4vw, 46px);
}
.rhythm-step:last-child { padding-bottom: 0; }
.rhythm-step::before {
  content: attr(data-num);
  position: absolute;
  left: calc(-1 * clamp(28px, 4vw, 46px) / 2 - 18px);
  top: -4px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  border-radius: 50%;
  border: 4px solid var(--bg);
  font-size: 1rem;
}
.section.surface .rhythm-step::before { border-color: var(--surface); }
.rhythm-step .time {
  font-family: "JetBrains Mono", Consolas, monospace;
  color: var(--accent-2-text);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.rhythm-step h4 { font-size: 1.4rem; margin: 4px 0 8px; }
.rhythm-step p { color: var(--ink-soft); margin: 0; max-width: 640px; }

.cancel-box {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface-2);
}
.cancel-box h4 { font-size: 1.3rem; margin: 0 0 14px; }

/* --------------------------- testimonials ------------------------------ */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.tst {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.tst .quote { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); margin: 0 0 16px; line-height: 1.5; }
.tst .quote::before { content: "“"; color: var(--accent-text); font-size: 1.4em; margin-right: 2px; }
.tst p.body { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 18px; }
.tst .meta { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }
.tst .meta b { font-family: var(--serif); font-style: italic; color: var(--ink); font-weight: 600; }
.tst .meta span { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }

/* --------------------------- FAQ --------------------------------------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 4px;
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.16rem;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-style: normal;
  font-size: 1.5rem;
  color: var(--accent-text);
  transition: transform 300ms var(--ease);
}
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > .answer {
  height: 0;
  padding: 0 4px;
  overflow: hidden;
  color: var(--ink-soft);
  transition: height 360ms var(--ease-2), padding-block-end 360ms var(--ease-2);
}
.faq-item[open] > .answer { height: auto; padding-block-end: 24px; }
@media (prefers-reduced-motion: reduce) { .faq-item > .answer { transition: none; } }

/* --------------------------- atölye notları ---------------------------- */
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.note {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  background: var(--surface);
}
.note time { font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.78rem; color: var(--accent-2-text); }
.note h4 { font-size: 1.16rem; margin: 8px 0 8px; }
.note p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

/* --------------------------- contact ----------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
.channel-list { display: grid; gap: 14px; }
.channel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.channel:hover { transform: translateY(-3px); border-color: var(--accent-text); background: var(--surface-2); }
.channel .ic {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(233,85,109,0.16);
  color: var(--accent-text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  border: 1px solid rgba(233,85,109,0.3);
}
.channel .ch-label { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.channel .ch-val { display: block; font-weight: 700; color: var(--ink); word-break: break-word; }
.channel .ch-sub { display: block; font-size: 0.82rem; color: var(--ink-soft); }

.form-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 36px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.03em; }
.field input, .field select, .field textarea {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.98rem;
  width: 100%;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(233,85,109,0.16);
}
.field.kvkk { flex-direction: row; align-items: flex-start; gap: 10px; }
.field input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 3px 0 0;
  accent-color: var(--accent);
}
.field.kvkk label { font-weight: 400; font-size: 0.86rem; color: var(--ink-soft); }
.form-card .btn { width: 100%; margin-top: 8px; }
@media (min-width: 560px) { .form-card .btn { width: auto; } }

/* --------------------------- CTA band ---------------------------------- */
.cta-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  padding: clamp(26px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.cta-panel h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; }
.cta-panel h3 em { color: var(--accent-text); }
.cta-panel p { color: var(--ink-soft); margin: 0; max-width: 46ch; }
.cta-panel .btn { margin-top: 6px; }

/* --------------------------- footer ------------------------------------ */
.site-footer {
  background: #0a080c;
  border-top: 1px solid var(--line);
  padding: clamp(52px, 7vw, 88px) 0 34px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(26px, 4vw, 54px);
  margin-bottom: 44px;
}
.footer-brand .brand { font-size: 1.5rem; margin-bottom: 14px; }
.footer-brand p { color: var(--ink-soft); font-size: 0.92rem; max-width: 340px; }
.footer-est { margin-top: 16px; font-size: 0.82rem; color: var(--ink-faint); line-height: 1.7; }
.footer-col h5 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92rem;
  padding: 5px 0;
  transition: color 180ms var(--ease);
}
.footer-col a:hover { color: var(--accent-text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.footer-legal a { display: inline; color: var(--ink-faint); }
.footer-legal a:hover { color: var(--accent-text); }
.footer-legal span { margin: 0 6px; opacity: 0.5; }

/* --------------------------- cookie banner ----------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 280ms var(--ease), opacity 240ms var(--ease);
  z-index: 9999;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner h4 { font-size: 1.14rem; margin: 0 0 6px; }
.cookie-banner p { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 16px; }
.cookie-banner p a { color: var(--accent-text); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.cookie-actions button[data-consent="accept"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.cookie-actions button[data-consent="accept"]:hover { background: var(--accent-2); color: #241d29; border-color: var(--accent-2); }
.cookie-actions button[data-consent="reject"]:hover,
.cookie-actions button[data-consent="settings"]:hover { border-color: var(--accent-text); color: var(--accent-text); }
@media (min-width: 640px) {
  .cookie-banner { left: 24px; right: auto; max-width: 420px; }
}

/* --------------------------- reveal ------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .falling-piece, .hero h1 .word, .hero-sub, .hero-actions, .trust-strip {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .torn-reveal { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; }
  .hero-media img { animation: none !important; scale: 1.02; }
}
html.no-js .reveal { opacity: 1; transform: none; }
html.no-js .torn-reveal { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
html.no-js .hero h1 .word, html.no-js .hero-sub, html.no-js .hero-actions, html.no-js .trust-strip { opacity: 1; animation: none; }

/* --------------------------- page hero (inner pages) ------------------- */
.page-hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(30px, 4vw, 50px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(233,85,109,0.14), transparent 55%),
    var(--surface);
}
.page-hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); margin: 0 0 16px; }
.page-hero h1 em { color: var(--accent-2-text); }
.page-hero p { color: var(--ink-soft); max-width: 640px; font-size: 1.08rem; margin: 0; }

.prose { max-width: 760px; line-height: 1.75; }
.prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 40px 0 14px; }
.prose h3 { font-size: 1.3rem; margin: 28px 0 10px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p { margin: 0 0 1.15rem; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent-text); text-decoration: underline; }

/* about / team */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.member { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.member .m-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.member .m-photo img { width: 100%; height: 100%; object-fit: cover; }
.member .m-body { padding: 20px; }
.member h3 { font-size: 1.3rem; margin: 0 0 2px; }
.member .role { color: var(--accent-2-text); font-size: 0.82rem; letter-spacing: 0.06em; margin: 0 0 12px; }
.member p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }

.about-hero-media {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: 12px;
  margin: 40px 0;
  border: 1px solid var(--line);
}
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 40px 0;
}
.stat-row .stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
  background: var(--surface-2);
}
.stat-row .stat b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--accent-2-text);
  font-variant-numeric: tabular-nums;
}
.stat-row .stat span { font-size: 0.86rem; color: var(--ink-soft); }

/* thank you */
.thanks-wrap { text-align: center; max-width: 620px; margin: 0 auto; padding: clamp(60px, 12vw, 140px) 0; }
.thanks-wrap .mark {
  width: 76px; height: 76px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: rgba(233,85,109,0.16);
  border: 1px solid rgba(233,85,109,0.4);
  display: grid;
  place-items: center;
  color: var(--accent-text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
}
.thanks-wrap h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 16px; }
.thanks-wrap p { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 28px; }

/* 404 */
.nf-wrap { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(60px, 12vw, 150px) 0; }
.nf-wrap .code {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(5rem, 18vw, 11rem);
  color: var(--accent-text);
  line-height: 0.9;
  margin: 0;
}
.nf-wrap h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 8px 0 16px; }
.nf-wrap p { color: var(--ink-soft); margin: 0 0 26px; }

/* --------------------------- responsive -------------------------------- */
@media (max-width: 1080px) {
  .tool-wrap { grid-template-columns: 1fr; }
  .tool-preview { position: static; }
}
@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .story-row { grid-template-columns: 1fr; }
  .story-row.flip .story-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .lookbook-grid { grid-template-columns: repeat(6, 1fr); }
  .frame, .frame.wide, .frame.tall { grid-column: span 3; grid-row: auto; }
  .frame.tall .frame-img { aspect-ratio: 4 / 5; }
  .frame.wide .frame-img { aspect-ratio: 4 / 5; }
}
@media (max-width: 720px) {
  .material-band { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: 1fr; }
  .tst-grid { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .lookbook-grid { grid-template-columns: 1fr; }
  .frame, .frame.wide, .frame.tall { grid-column: span 1; }
  .footer-top { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .cookie-actions button { flex: 1 1 100%; }
  .channel .ic { width: 40px; height: 40px; font-size: 1.05rem; }
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}
@media (max-width: 400px) {
  .stat-row { grid-template-columns: 1fr; }
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9998;transition:width 80ms linear;pointer-events:none}

/* ============================================================================
   EPIC WHOLE-PAGE COLLAGE ENGINE — Katman Kolaj Atolyesi
   torn paper - cut-out photos - tape - halftone - registration/crop marks
   Dark gallery palette: coral #E9556D - amber #F2B84B - cream ink
   ============================================================================ */

/* sticky-fix: clip (NOT hidden) so position:sticky pinning survives */
html { overflow-x: clip; overflow-y: visible; }
body { overflow-x: clip; overflow-y: visible; max-width: 100vw; }

:root{
  --coral: var(--accent);
  --amber: var(--accent-2);
  --tape: rgba(242,225,180,.42);
  --tape-coral: rgba(233,85,109,.34);
  --paper-1:#efe6d8; --paper-2:#e6d3bd; --paper-3:#d7c2a6;
  --ink-deep:#0a080c;
}

/* GLOBAL paper-grain + faint registration grid so NO section is flat */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(rgba(243,236,228,.04) 20%, transparent 22%),
    radial-gradient(rgba(233,85,109,.04) 20%, transparent 22%),
    linear-gradient(rgba(243,236,228,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,236,228,.028) 1px, transparent 1px);
  background-size:7px 7px, 7px 7px, 58px 58px, 58px 58px;
  background-position:0 0, 3.5px 3.5px, 0 0, 0 0;
}
.section > .container,
.hero-inner, .mural-wrap { position:relative; z-index:2; }
.section{ overflow:hidden; }          /* clip section-level bleed decor */

/* torn deckle edge at the TOP of every section (paper tear) */
.section::before{
  content:""; position:absolute; top:-2px; left:-2%; right:-2%; height:22px; z-index:3;
  background:var(--bg); pointer-events:none;
  clip-path:polygon(0 0,3% 62%,7% 18%,11% 74%,15% 26%,19% 80%,23% 22%,27% 68%,31% 34%,35% 82%,
    39% 24%,43% 70%,47% 30%,51% 78%,55% 20%,59% 72%,63% 32%,67% 66%,71% 24%,75% 80%,
    79% 28%,83% 74%,87% 22%,91% 70%,95% 36%,98% 60%,100% 0);
}
.section.surface::before{ background:var(--surface); }
/* keep the pretty existing .torn-edge too, layered above */
.torn-edge::before{ z-index:4; }

/* ---------- CMYK-style misregistration accent word (coral/amber offset) --- */
.mis{ position:relative; color:var(--ink); text-shadow:3px -2px 0 var(--coral), -3px 2px 0 var(--amber); }
h1 .mis, h2 .mis{ text-shadow:4px -3px 0 var(--coral), -4px 3px 0 var(--amber); }
@media (max-width:600px){ .mis{ text-shadow:2px -1px 0 var(--coral), -2px 1px 0 var(--amber); } }

/* stencil / taped eyebrow — collage tag */
.eyebrow.stencil, .eyebrow.tag{
  background:var(--ink); color:var(--ink-deep); padding:5px 12px; border-radius:2px;
  transform:rotate(-1.3deg); box-shadow:3px 3px 0 var(--coral); font-style:normal;
}
.eyebrow.tag.amber{ box-shadow:3px 3px 0 var(--amber); }

/* ============================================================================
   PRINTER-MARK / COLLAGE-SCRAP DECOR SYSTEM  (.pm)
   ============================================================================ */
.pm{ position:absolute; pointer-events:none; z-index:0; }
.tc-ink{ color:var(--ink); } .tc-coral{ color:var(--coral); } .tc-amber{ color:var(--amber); }
.o35{opacity:.35}.o5{opacity:.5}.o6{opacity:.6}.o7{opacity:.7}.o85{opacity:.85}

/* registration crosshair */
.pm-reg{ width:38px; height:38px;
  background:radial-gradient(circle, transparent 5px, currentColor 5px, currentColor 6.4px, transparent 7px); }
.pm-reg::before{ content:""; position:absolute; left:50%; top:-6px; bottom:-6px; width:1.5px; background:currentColor; transform:translateX(-50%); }
.pm-reg::after{ content:""; position:absolute; top:50%; left:-6px; right:-6px; height:1.5px; background:currentColor; transform:translateY(-50%); }

/* corner crop mark (L) */
.pm-crop{ width:28px; height:28px; }
.pm-crop::before{ content:""; position:absolute; left:0; top:0; width:28px; height:1.5px; background:currentColor; }
.pm-crop::after{ content:""; position:absolute; left:0; top:0; width:1.5px; height:28px; background:currentColor; }

/* halftone dot patch */
.pm-halo{ width:104px; height:104px;
  background:radial-gradient(currentColor 32%, transparent 34%); background-size:8px 8px;
  -webkit-mask:radial-gradient(circle,#000 60%,transparent 66%); mask:radial-gradient(circle,#000 60%,transparent 66%); }

/* printer star target */
.pm-star{ width:52px; height:52px; border-radius:50%;
  background:repeating-conic-gradient(currentColor 0 15deg, transparent 15deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 68%,transparent 70%); mask:radial-gradient(circle,#000 68%,transparent 70%); }

/* mm ruler tick strip */
.pm-ruler{ width:172px; height:16px; border-bottom:1.5px solid currentColor;
  background:repeating-linear-gradient(90deg, currentColor 0 1.4px, transparent 1.4px 9px);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 55%); mask:linear-gradient(180deg,transparent 0,#000 55%); }

/* ink swatch chips */
.pm-swatch{ width:24px; height:100px; border:1px solid rgba(243,236,228,.25);
  background:linear-gradient(180deg,var(--coral) 0 25%,var(--amber) 25% 50%,#7fb0a0 50% 75%,var(--ink) 75% 100%); }

/* brand calibration bar */
.pm-bar{ width:118px; height:16px; border:1px solid rgba(243,236,228,.22);
  background:linear-gradient(90deg,var(--coral) 0 33.33%,var(--amber) 33.33% 66.66%,var(--ink) 66.66% 100%); }

/* spec stamp */
.pm-stamp{ font-family:"JetBrains Mono",Consolas,monospace; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:currentColor; border:2px solid currentColor; border-radius:3px; padding:5px 9px; opacity:.82; white-space:nowrap; background:rgba(14,11,16,.3); }
.pm-stamp.ring{ box-shadow:0 0 0 2px rgba(243,236,228,.18) inset, 3px 3px 0 -1px currentColor; }

/* masking TAPE strip */
.pm-tape{ width:76px; height:23px; background:var(--tape); transform:rotate(-6deg);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 3px 8px -4px rgba(0,0,0,.6);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.pm-tape.coral{ background:var(--tape-coral); }

/* torn PAPER scrap (blank) */
.pm-scrap{ width:120px; height:86px; background:var(--paper-2);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8), inset 0 0 30px rgba(120,90,60,.28);
  clip-path:polygon(2% 8%,26% 2%,52% 7%,80% 1%,98% 9%,95% 40%,100% 70%,96% 96%,70% 99%,44% 94%,20% 100%,3% 92%,0 60%,4% 30%); }
.pm-scrap.p1{ background:var(--paper-1); } .pm-scrap.p3{ background:var(--paper-3); }
.pm-scrap.coral{ background:var(--coral); opacity:.9; } .pm-scrap.amber{ background:var(--amber); opacity:.9; }

/* torn overprint band across a section edge */
.pm-strip{ height:12px; left:-2%; right:-2%;
  background:repeating-linear-gradient(90deg,var(--coral) 0 24px,var(--amber) 24px 48px); opacity:.7;
  clip-path:polygon(0 42%,4% 12%,9% 56%,15% 16%,22% 60%,30% 14%,38% 58%,46% 18%,54% 60%,62% 14%,70% 58%,78% 16%,86% 60%,93% 18%,100% 52%,100% 100%,0 100%); }

/* cut-out PHOTO fragment (torn edge, uses img src) */
.pm-photo{ background:#fff; padding:6px;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.85);
  clip-path:polygon(2% 5%,24% 1%,52% 4%,80% 0,98% 6%,96% 34%,100% 66%,97% 97%,72% 99%,44% 96%,20% 100%,2% 94%,0 62%,4% 30%); }
.pm-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(1.04); }

/* GILT frame — ornate amber border for cut-out mural pieces */
.gilt{ padding:8px; background:
    linear-gradient(135deg,#f6d488,#b8862f 38%,#f4cf7c 55%,#9a6f28 78%,#f6d488);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.35); }
.gilt img{ display:block; width:100%; height:100%; object-fit:cover; }

/* decor mobile curation */
@media (max-width:900px){ .pm-bleed{ display:none !important; } }
@media (max-width:768px){
  .pm:not(.pm-keep){ display:none !important; }
  .pm-keep.pm-bar{ width:92px; } .pm-keep.pm-ruler{ width:112px; }
  .pm-keep.pm-swatch{ height:74px; } .pm-keep.pm-scrap{ transform:scale(.8); }
}

/* ============================================================================
   PRELOADER + motes
   ============================================================================ */
#pre{ position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pre .pl-mark{ font-family:var(--serif); font-style:italic; font-weight:700; font-size:clamp(30px,7vw,58px);
  letter-spacing:-.02em; color:var(--ink); text-shadow:4px -3px 0 var(--coral), -4px 3px 0 var(--amber); }
#pre .pl-sub{ font-family:"JetBrains Mono",Consolas,monospace; font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:12px; text-align:center; }
#pre .pl-bar{ margin:22px auto 0; width:min(240px,60vw); height:12px;
  border:1px solid var(--line-strong); background:var(--surface); overflow:hidden; position:relative; }
#pre .pl-bar i{ position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--coral) 0 33%,var(--amber) 33% 66%,var(--ink) 66% 100%);
  animation:plFill 1.15s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes plFill{ to{ width:100%; } }
#motes{ position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:.4; }

/* ============================================================================
   CINEMATIC ENGINE — sticky-pin scenes
   ============================================================================ */
.cine-track{ position:relative; }
.cine-pin{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; }

/* ---------- PINNED COLLAGE HERO ---------- */
.hero.cine-track{ min-height:0; display:block; overflow:visible; isolation:auto; }
.hero-cine{ height:120vh; }
.cine-pin.hero-pin{
  background:
    radial-gradient(rgba(243,236,228,.05) 1px, transparent 1.7px) 0 0/7px 7px,
    radial-gradient(130% 100% at 18% 12%, rgba(233,85,109,.16), transparent 52%),
    linear-gradient(180deg, #17121b, var(--bg) 70%);
}
.hero-cine .hero-inner{
  position:relative; z-index:4; width:100%; max-width:var(--max); margin-inline:auto;
  padding:0 var(--pad); display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,48px); align-items:center;
}
@media (min-width:1024px){ .hero-cine .hero-inner{ grid-template-columns:1.02fr .98fr; } }
.hero-copy2{ max-width:680px; position:relative; z-index:5; }
.hero-copy2 h1{ font-size:clamp(2.7rem,7.4vw,5rem); line-height:1.04; margin:16px 0 20px; text-shadow:0 8px 44px rgba(0,0,0,.6); }
.hero-copy2 h1 em{ color:var(--accent-2-text); }
.hero-copy2 .hero-sub{ animation:none; opacity:1; }

/* hero collage cluster (cut-out mural pieces) */
.hero-cluster{ position:relative; height:min(66vh,540px); z-index:3; }
@media (max-width:1023px){ .hero-cluster{ height:clamp(320px,64vw,460px); } }
.hero-cluster .hp{ position:absolute; transform:rotate(var(--r,0)); }
.hero-cluster .hp img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-cluster .hp .tp{ position:absolute; top:-11px; left:26%; width:70px; height:22px; background:var(--tape); transform:rotate(-6deg); border:1px solid rgba(255,255,255,.16);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.hero-cluster .hp .tp.b{ background:var(--tape-coral); left:auto; right:18%; transform:rotate(7deg); }
.hero-cluster .hp1{ width:min(52%,290px); aspect-ratio:3/4; left:30%; top:2%;  --r:-4deg; z-index:7; }
.hero-cluster .hp2{ width:min(40%,210px); aspect-ratio:3/2; left:0;   top:20%; --r:6deg;  z-index:6; }
.hero-cluster .hp3{ width:min(38%,200px); aspect-ratio:3/4; left:52%; top:46%; --r:5deg;  z-index:8; }
.hero-cluster .hp4{ width:min(32%,168px); aspect-ratio:1/1; left:8%;  top:58%; --r:-8deg; z-index:6; }
.hero-cluster .acc{ position:absolute; z-index:2; }
.hero-cluster .acc.slab{ width:min(58%,300px); height:min(60%,320px); left:20%; top:8%; background:var(--coral); opacity:.85; transform:rotate(-6deg);
  clip-path:polygon(4% 8%,34% 1%,68% 6%,98% 2%,95% 40%,100% 80%,66% 97%,34% 100%,5% 92%,0 52%,6% 24%); }
.hero-cluster .acc.slab2{ width:min(42%,190px); height:min(32%,160px); left:0; top:0; background:var(--amber); opacity:.82; transform:rotate(7deg);
  clip-path:polygon(2% 26%,28% 6%,56% 22%,86% 4%,99% 32%,96% 76%,68% 96%,40% 80%,14% 98%,1% 66%); }
.hero-scroll{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:9;
  font-family:"JetBrains Mono",Consolas,monospace; font-weight:700; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-deep); background:var(--amber); padding:6px 13px; animation:cineBob 2s ease-in-out infinite; }
@keyframes cineBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }
.hero-cine .hero-stats{ position:static; display:none; }

/* ---------- SIGNATURE MURAL-ASSEMBLE SCENE ---------- */
.mural-track{ height:300vh; }
.cine-pin.mural-pin{
  background:
    radial-gradient(rgba(243,236,228,.05) 1px, transparent 1.7px) 0 0/7px 7px,
    radial-gradient(120% 92% at 50% 36%, #1b1520, var(--bg) 74%);
}
.mural-wrap{ position:relative; z-index:3; width:100%; max-width:var(--max); margin-inline:auto;
  padding:0 var(--pad); display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,44px); align-items:center; }
@media (min-width:960px){ .mural-wrap{ grid-template-columns:1.1fr .9fr; } }
.mural-stage{ position:relative; width:100%; max-width:640px; aspect-ratio:5/4; margin-inline:auto;
  background:
    repeating-linear-gradient(135deg, rgba(243,236,228,.03) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#141019,#0c0910);
  border:1px solid var(--line-strong); box-shadow:0 40px 80px -40px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.5);
  overflow:hidden; isolation:isolate; }
.mural-stage .mp{ position:absolute; will-change:transform,opacity; }
.mural-stage .mp.ph{ background:#fff; padding:4px; box-shadow:0 18px 30px -18px rgba(0,0,0,.8); }
.mural-stage .mp.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.mural-stage .mp.sc{ box-shadow:0 16px 30px -18px rgba(0,0,0,.7);
  clip-path:polygon(2% 6%,26% 1%,52% 5%,82% 0,98% 8%,96% 38%,100% 70%,96% 96%,70% 99%,42% 95%,18% 100%,2% 92%,0 58%,4% 28%); }
.mural-frame{ position:absolute; inset:12px; z-index:9; pointer-events:none; border:1px dashed rgba(243,236,228,.22); }
.mural-tag{ position:absolute; top:10px; right:10px; z-index:10; font-family:"JetBrains Mono",Consolas,monospace;
  font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--ink-deep); background:var(--amber); padding:4px 9px; border-radius:2px; }
.mural-cap .eyebrow{ margin-bottom:14px; }
.mural-cap h2{ font-size:clamp(2rem,4.6vw,3.4rem); margin:0 0 14px; }
.mural-cap h2 em{ color:var(--accent-text); }
.mural-cap p{ color:var(--ink-soft); max-width:46ch; }
.mural-readout{ margin-top:20px; display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:"JetBrains Mono",Consolas,monospace; border:1px solid var(--line-strong); border-radius:4px;
  padding:12px 18px; background:var(--surface); }
.mural-readout b{ font-size:1.9rem; color:var(--accent-2-text); font-variant-numeric:tabular-nums; line-height:1; }
.mural-readout span{ font-size:.86rem; color:var(--ink-soft); letter-spacing:.04em; }
.mural-progress{ margin-top:16px; height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line); }
.mural-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--coral),var(--amber)); }

/* mural piece final positions (assembled wall) */
.mp1{ left:1%;  top:2%;  width:31%; aspect-ratio:3/2; }
.mp2{ left:34%; top:1%;  width:31%; aspect-ratio:4/3; }
.mp3{ left:67%; top:3%;  width:31%; aspect-ratio:3/4; }
.mp4{ left:1%;  top:33%; width:31%; aspect-ratio:3/4; }
.mp5{ left:34%; top:31%; width:31%; aspect-ratio:1/1; z-index:6; }
.mp6{ left:67%; top:40%; width:31%; aspect-ratio:3/2; }
.mp7{ left:1%;  top:70%; width:31%; aspect-ratio:4/3; }
.mp8{ left:34%; top:64%; width:31%; aspect-ratio:3/2; }
.mp9{ left:67%; top:68%; width:31%; aspect-ratio:1/1; }
.mp10{ left:24%; top:18%; width:17%; aspect-ratio:1/1; z-index:7; }
.mp11{ left:56%; top:20%; width:15%; aspect-ratio:3/4; z-index:7; }
.mp12{ left:12%; top:52%; width:14%; aspect-ratio:4/3; z-index:7; }
.mp13{ left:78%; top:26%; width:14%; aspect-ratio:1/1; z-index:7; }
.mp14{ left:46%; top:78%; width:16%; aspect-ratio:3/2; z-index:7; }

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

/* ---------- collage cards / sections extra flourish ---------- */
.frame{ box-shadow:0 26px 50px -30px rgba(0,0,0,.9), 6px 6px 0 -2px rgba(233,85,109,.25); }
.pkg.featured{ box-shadow:0 30px 60px -40px rgba(233,85,109,.6), 8px 8px 0 -2px rgba(242,184,75,.28); }
.tool-panel, .tool-preview{ box-shadow:8px 8px 0 -3px rgba(233,85,109,.22); }

/* page-hero (subpages) — collage treatment via CSS so legal/inner heads read as collage */
.page-hero{ position:relative; overflow:hidden; }
.page-hero::after{
  content:""; position:absolute; top:-2px; left:-2%; right:-2%; height:20px; z-index:3; background:var(--bg); pointer-events:none;
  clip-path:polygon(0 0,4% 60%,9% 20%,14% 72%,19% 28%,24% 78%,30% 24%,36% 66%,42% 34%,48% 80%,54% 26%,60% 70%,66% 30%,72% 74%,78% 24%,84% 68%,90% 32%,96% 62%,100% 0);
}
.page-hero .pm{ z-index:1; }

/* ---- collage extras (override) ---- */
.hero-cine .hero-stats{ position:static; display:flex; flex-direction:row; flex-wrap:wrap; gap:20px 30px; margin-top:28px; text-align:left; }
.hero-cine .hero-stats .stat b{ font-size:1.9rem; }
.mural-stage .mp{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .mural-stage .mp{ opacity:1 !important; transform:none !important; } }
.site-header{ position:fixed; }
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:8px; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(90deg,var(--accent) 0 22px,var(--accent-2) 22px 44px);
  clip-path:polygon(0 0,3% 70%,7% 10%,12% 76%,17% 18%,22% 72%,28% 12%,34% 70%,40% 22%,46% 74%,52% 14%,58% 70%,64% 24%,70% 72%,76% 12%,82% 70%,88% 22%,94% 74%,98% 30%,100% 0); }
.header-inner{ position:relative; }

/* footer clips its own collage bleed (fix 1440 h-overflow) */
.site-footer{ position:relative; overflow:hidden; }

/* fix: about-page team grid was forced to 2 columns (inline style) even on phones,
   cramming the member cards. Stack to one column on small screens. */
@media (max-width:600px){
  .team-grid[style*="repeat(2"]{ grid-template-columns:1fr !important; max-width:none !important; }
}

/* mobile polish: contact CTA button full-width, centered text */
@media (max-width:600px){
  .cta-panel .btn{ width:100%; }
}

/* mobile hero: smaller headline so words don't hug the edge; keep cluster tidy */
@media (max-width:600px){
  .hero-copy2 h1{ font-size:clamp(2rem,8.4vw,2.7rem); line-height:1.08; overflow-wrap:break-word; }
  .hero-copy2{ max-width:100%; }
  .hero-cluster{ margin-top:8px; }
}

/* mobile: un-pin the hero so it flows (kills the empty 120vh gap + content clipping) */
@media (max-width:1023px){
  .hero-cine{ height:auto; }
  .cine-pin.hero-pin{ position:static; height:auto; min-height:0; overflow:visible; display:block; place-items:stretch; padding:20px 0 36px; }
  .hero-scroll{ display:none; }
  .hero-cluster{ height:clamp(300px,74vw,420px); margin-top:18px; }
}