:root {
  /* Space the sticky header occupies: 16px top offset + 60px tall + 16px
     margin. Full-height sections that centre their content must subtract this,
     or they centre behind the header and look bottom-heavy. */
  --header-space: 92px;
  --bg: #fafaf8;
  --white: #ffffff;
  --ink: #0f1923;
  --muted: #6b7280;
  --line: rgba(15, 25, 35, 0.08);
  --line-hover: rgba(15, 25, 35, 0.18);
  --yellow: #fbbf24;
  --yellow-hover: #f59e0b;
  --tab-bg: #f0eeea;
  --radius: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --yes-script-font: "Caveat", "Brush Script MT", cursive;
  --yes-coral: #f05235;
  /* Optical spacing for the condensed Bogdan display face. Large headings
     need a touch of air so adjacent words and letters remain readable. */
  --display-letter-spacing: 0.006em;
  --display-word-spacing: 0.12em;
  --display-line-height: 0.9;
  --display-letter-spacing-massive: -0.015em;
  --display-letter-spacing-compact: 0;
  --display-word-spacing-compact: 0.085em;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
body { min-width: 320px; background: var(--bg); color: var(--ink); font-family: "Sora", system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.lamp-dot { display: inline-block; width: 10px; height: 10px; background: var(--yellow); border-radius: 50%; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 8px var(--yellow), 0 0 20px rgba(251,191,36,0.35); animation: lampPulse 3s ease-in-out infinite; }
@keyframes lampPulse { 0%,100% { box-shadow: 0 0 8px var(--yellow), 0 0 20px rgba(251,191,36,0.35); } 50% { box-shadow: 0 0 14px var(--yellow), 0 0 32px rgba(251,191,36,0.55); } }

.label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ── Header ─────────────────────────────────────────── */
.site-header { position: sticky; top: 16px; z-index: 30; display: flex; align-items: center; width: min(1080px, calc(100% - 32px)); height: 60px; margin: 16px auto 0; padding: 0 20px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(15,25,35,0.5); box-shadow: 0 4px 32px rgba(0,0,0,0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.brand { display: flex; align-items: center; font-size: 18px; font-weight: 800; color: var(--white); letter-spacing: -0.04em; white-space: nowrap; flex-shrink: 0; }
.brand span { font-weight: 500; color: rgba(255,255,255,0.45); }
.desktop-nav { display: none; }
.header-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; margin-left: auto; border: 1.5px solid rgba(255,255,255,0.15); border-radius: 999px; background: transparent; color: var(--white); font-size: 13px; font-weight: 600; white-space: nowrap; transition: all 0.25s ease; }
.header-cta:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.menu-button { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; margin-left: 12px; padding: 8px; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; }
.menu-button span { display: block; height: 1.5px; background: var(--white); border-radius: 2px; width: 100%; transition: all 0.3s var(--ease-out); }
.menu-button span:nth-child(2) { width: 60%; }
body.nav-open .menu-button span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
body.nav-open .menu-button span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
body.nav-open .menu-button span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.site-header.scrolled { background: rgba(255,255,255,0.92); border-color: var(--line); box-shadow: 0 4px 24px rgba(15,25,35,0.06); }
.site-header.scrolled .brand { color: var(--ink); }
.site-header.scrolled .brand span { color: var(--muted); }
.site-header.scrolled .header-cta { border-color: var(--ink); color: var(--ink); }
.site-header.scrolled .header-cta:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.site-header.scrolled .menu-button span { background: var(--ink); }

/* light-hero pages: header reads dark over cream from the top */
body.light-hero .site-header { background: rgba(250,250,248,0.55); border-color: var(--line); box-shadow: none; }
body.light-hero .site-header .brand { color: var(--ink); }
body.light-hero .site-header .brand span { color: var(--muted); }
body.light-hero .site-header .header-cta { border-color: var(--ink); color: var(--ink); }
body.light-hero .site-header .header-cta:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
body.light-hero .site-header .menu-button span { background: var(--ink); }
body.light-hero .site-header.scrolled { background: rgba(255,255,255,0.9); box-shadow: 0 4px 24px rgba(15,25,35,0.06); }

/* ── Mobile Nav ─────────────────────────────────────── */
.mobile-nav { position: fixed; top: 88px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 40; display: flex; flex-direction: column; width: min(340px, calc(100% - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.96); box-shadow: 0 16px 48px rgba(15,25,35,0.12); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s var(--ease-out); }
body.nav-open .mobile-nav { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
body.nav-open { overflow: hidden; }
.mobile-nav a { padding: 14px 16px; font-size: 15px; font-weight: 600; border-radius: 10px; transition: background 0.15s ease; }
.mobile-nav a:hover { background: var(--bg); }

/* ── Hero (forge · editorial) ───────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 132px 40px 40px; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, #faf8f4 0%, #faf6ee 40%, #fbe6cb 70%, #f6bd84 100%); }

/* defined molten forge-spark, layered behind the type */
.hero-subject { position: absolute; z-index: 1; right: 4%; bottom: 2%; width: min(500px, 46vw); height: auto; pointer-events: none; user-select: none; opacity: 0; animation: subjectIn 1s ease 0.2s both, subjectFloat 7s ease-in-out 1.2s infinite; }
@keyframes subjectIn { to { opacity: 1; } }
@keyframes subjectFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes emberFloat { 0% { opacity: 0; transform: translateY(20px) scale(0.6); } 25% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-90px) scale(1.1); } }

/* sparks that float IN FRONT of the type for real depth */
.ember-front { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ember-front span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffb15c; box-shadow: 0 0 14px 3px rgba(255,150,70,0.8); opacity: 0; animation: emberFloat 7s ease-in-out infinite; }
.ember-front span:nth-child(1) { left: 40%; bottom: 30%; animation-delay: 0.6s; }
.ember-front span:nth-child(2) { left: 58%; bottom: 22%; width: 4px; height: 4px; animation-delay: 2.6s; }
.ember-front span:nth-child(3) { left: 50%; bottom: 40%; width: 5px; height: 5px; animation-delay: 4.6s; }

/* giant condensed headline */
.hero-head { position: relative; z-index: 2; width: min(1280px, 100%); margin: 0 auto; }
.hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.hero-title { font-family: "Anton", "Sora", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.005em; font-size: clamp(54px, 12.5vw, 184px); color: var(--ink); }
.ht-line { display: block; }

/* handwritten script accent */
.hl-word { font-family: var(--yes-script-font); text-transform: none; color: var(--yes-coral); font-weight: 700; font-size: 1.18em; letter-spacing: -0.01em; padding: 0 0.08em; display: inline-block; transform: rotate(-4deg); transition: transform 0.4s var(--ease-out), color 0.3s ease; }
.hero-title:hover .hl-word { transform: rotate(-4deg) scale(1.06); color: #ff6a2f; }

/* footer row: subhead left, scroll cue right */
.hero-foot { position: relative; z-index: 2; width: min(1280px, 100%); margin: 48px auto 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero-foot-left { max-width: 440px; }
.hero-sub { font-size: 16px; line-height: 1.6; color: #4a3f37; margin-bottom: 22px; }
.hero-scroll { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b5848; white-space: nowrap; transition: color 0.25s ease; }
.hero-scroll:hover { color: var(--ink); }

/* hero entrance */
.hero-anim { opacity: 0; transform: translateY(24px); animation: heroRise 0.9s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

/* ── Page Hero ──────────────────────────────────────── */
.page-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--ink); color: var(--white); margin-top: -92px; padding: 180px 48px 80px; overflow: hidden; }
.page-hero .hero-glow { top: 30%; width: 500px; height: 350px; }
.page-hero .label { color: var(--yellow); }
.page-hero h1 { font-size: clamp(34px, 5.5vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.1; max-width: 700px; }
.page-hero .hero-sub { margin-top: 16px; color: rgba(255,255,255,0.45); font-size: 17px; }

/* ── Buttons ────────────────────────────────────────── */
.btn-primary { display: inline-flex; align-items: center; height: 54px; padding: 0 32px; background: var(--yellow); color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 600; border-radius: 14px; border: none; transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, background 0.2s ease; }
.btn-primary:hover { background: var(--yellow-hover); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(251,191,36,0.3); }
.btn-primary.btn-lg { height: 58px; padding: 0 36px; font-size: 16px; border-radius: 16px; margin-bottom: 40px; }

/* ── Sections ───────────────────────────────────────── */
.section { max-width: 1100px; margin: 0 auto; padding: 100px 32px 0; }
.section > .label, .section-title { text-align: center; }
.section-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.1; margin-bottom: 48px; }

/* ── Services List ──────────────────────────────────── */
.services-list { border-top: 1px solid var(--line); }
.service-row { display: flex; align-items: flex-start; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.service-row:hover .service-info { transform: translateX(12px); }
.service-num { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 8px; min-width: 28px; flex-shrink: 0; transition: color 0.3s ease; }
.service-row:hover .service-num { color: var(--yellow); }
.service-info { flex: 1; transition: transform 0.35s var(--ease-out); }
.service-info h3 { font-size: clamp(22px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.service-info p { font-size: 15px; color: var(--muted); line-height: 1.6; margin-top: 10px; opacity: 0.82; transition: opacity 0.3s ease; }
.service-row:hover .service-info p { opacity: 1; }
.service-arrow { margin-left: auto; font-size: 18px; color: var(--muted); padding-top: 10px; flex-shrink: 0; transition: transform 0.3s var(--ease-out), color 0.3s ease; }
.service-row:hover .service-arrow { transform: translateX(8px); color: var(--yellow); }

/* ── Portfolio ──────────────────────────────────────── */
.portfolio { display: flex; flex-direction: column; gap: 56px; }
.portfolio-item { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.portfolio-item:nth-child(even) { grid-template-columns: 1fr 1.3fr; }
.portfolio-item:nth-child(even) .portfolio-img { order: 2; }
.portfolio-item:nth-child(even) .portfolio-detail { order: 1; text-align: right; }
.portfolio-img { border-radius: var(--radius); overflow: hidden; height: 340px; background: var(--tab-bg); }
.portfolio-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.7s var(--ease-out); }
.portfolio-item:hover img { transform: scale(1.05); }
.portfolio-detail h3 { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; letter-spacing: -0.04em; margin: 8px 0 12px; }
.portfolio-detail p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.portfolio-link { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--yellow); transition: transform 0.3s ease; }
.portfolio-item:hover .portfolio-link { transform: translateX(4px); }

/* ── Statement ──────────────────────────────────────── */
.statement-section { max-width: 1100px; margin: 0 auto; padding: 100px 32px; }
.statement { text-align: center; }
.statement h2 { font-size: clamp(26px, 4.5vw, 54px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.15; max-width: 780px; margin: 0 auto; }
.statement h2 em { font-style: normal; color: var(--yellow); }
.statement-sub { margin-top: 28px; font-size: 14px; color: var(--muted); letter-spacing: 0.01em; }

/* ── Contact ────────────────────────────────────────── */
.contact-section { text-align: center; padding-bottom: 100px; }
.contact-sub { color: var(--muted); font-size: 16px; margin-top: -32px; margin-bottom: 28px; }
.contact-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 700px; margin: 0 auto; }
.contact-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color 0.25s ease, box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.contact-card:hover { border-color: var(--yellow); box-shadow: 0 8px 28px rgba(251,191,36,0.08); transform: translateY(-3px); }
.contact-card span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.contact-card strong { font-size: 14px; font-weight: 700; }

/* ── About Page ─────────────────────────────────────── */
.about-story { padding-top: 80px; }
.story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.story-text .label { margin-bottom: 20px; }
.story-text h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 20px; }
.story-text p { font-size: 15px; color: var(--muted); line-height: 1.75; margin-top: 14px; }
.story-stats { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.story-stat { padding: 28px 32px; border-bottom: 1px solid var(--line); }
.story-stat:last-child { border-bottom: none; }
.story-stat-num { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.story-stat p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.value-card { padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color 0.3s ease, transform 0.4s var(--ease-out); }
.value-card:hover { border-color: var(--line-hover); transform: translateY(-3px); }
.value-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700; }
.value-card h3 { margin: 18px 0 8px; font-size: 17px; font-weight: 700; }
.value-card p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.founder-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 48px; }
.founder-info h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.04em; }
.founder-role { font-size: 14px; font-weight: 600; color: var(--yellow-hover); margin-top: 4px; margin-bottom: 20px; }
.founder-info > p:last-of-type { font-size: 15px; color: var(--muted); line-height: 1.75; }
.founder-links { display: flex; gap: 24px; margin-top: 24px; }
.founder-links a { font-size: 14px; font-weight: 600; transition: color 0.2s ease; }
.founder-links a:hover { color: var(--yellow-hover); }
.about-cta-section { padding-bottom: 100px; }
.about-cta { text-align: center; padding: 64px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.about-cta h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 12px; }
.about-cta > p { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.about-cta .btn-primary { margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 56px 32px 40px; }
.footer-brand-col .brand { color: var(--ink); display: inline-flex; margin-bottom: 12px; }
.footer-brand-col .brand span { color: var(--muted); }
.footer-brand-col > p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 12px; }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--muted); padding: 3px 0; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { text-align: center; padding: 16px 32px 32px; border-top: 1px solid var(--line); max-width: 1100px; margin: 0 auto; }
.footer-bottom p { font-size: 13px; color: var(--muted); }

/* ── Scroll Animations ──────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }
.slide-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.slide-left.visible { opacity: 1; transform: translateX(0); }
.slide-right { opacity: 0; transform: translateX(50px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.slide-right.visible { opacity: 1; transform: translateX(0); }
.reveal-zoom { opacity: 0; transform: scale(0.95); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-zoom.visible { opacity: 1; transform: scale(1); }
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }

/* ── Desktop ────────────────────────────────────────── */
@media (min-width: 981px) {
  .site-header { padding: 0 24px; }
  .desktop-nav { display: flex; margin: 0 auto; gap: 4px; }
  .desktop-nav a { padding: 8px 16px; color: rgba(255,255,255,0.45); font-size: 14px; font-weight: 500; border-radius: 8px; transition: color 0.2s ease; }
  .desktop-nav a:hover { color: var(--white); }
  body.light-hero .desktop-nav a { color: var(--muted); }
  body.light-hero .desktop-nav a:hover { color: var(--ink); }
  .site-header.scrolled .desktop-nav a { color: var(--muted); }
  .site-header.scrolled .desktop-nav a:hover { color: var(--ink); }
  .menu-button { display: none; }
  .header-cta { margin-left: 0; }
}

/* ── Tablet ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 36px; }
  .forge-core { width: min(620px, 100vw); }
  .portfolio-item, .portfolio-item:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .portfolio-item:nth-child(even) .portfolio-img { order: 0; }
  .portfolio-item:nth-child(even) .portfolio-detail { order: 0; text-align: left; }
  .contact-links { grid-template-columns: 1fr; max-width: 340px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .values-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 104px 20px 40px; }
  .hero-eyebrow { margin-bottom: 14px; }
  .hero-title { font-size: clamp(46px, 15vw, 88px); }
  .hero-sub { font-size: 15px; margin-bottom: 20px; }
  .hero-foot { margin-top: 32px; }
  .page-hero { margin-top: -72px; padding: 130px 20px 56px; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 42px); }
  .section { padding: 64px 16px 0; }
  .section-title { margin-bottom: 28px; }
  .service-info h3 { font-size: 22px; }
  .portfolio { gap: 40px; }
  .portfolio-img { height: 220px; }
  .portfolio-detail h3 { font-size: 26px; }
  .statement-section { padding: 64px 16px; }
  .statement h2 { font-size: 26px; }
  .btn-primary.btn-lg { height: 52px; padding: 0 24px; font-size: 14px; margin-bottom: 32px; }
  .site-header { width: calc(100% - 20px); height: 52px; border-radius: 12px; padding: 0 14px; }
  .brand { font-size: 16px; }
  .lamp-dot { width: 8px; height: 8px; margin-right: 6px; }
  .header-cta { height: 34px; padding: 0 12px; font-size: 12px; }
  .contact-section { padding-bottom: 64px; }
  .founder-card { padding: 28px 20px; }
  .about-cta { padding: 40px 20px; }
  .footer-grid { padding: 36px 16px 28px; }
}

@font-face {
  font-family: "Bogdan Montreal";
  src: url("assets/bogdan-neue-montreal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bogdan Lektorat";
  src: url("assets/bogdan-lektorat.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Bogdan-style hero clone */
body.light-hero {
  --bg: #eae6dd;
  --ink: #000000;
  --muted: #1b1a18;
  --yellow: #f05235;
  --yellow-hover: #d8432b;
  background: var(--bg);
  color: var(--ink);
  font-family: "Bogdan Montreal", Arial, sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
}

body.light-hero .site-header,
body.light-hero .site-header.scrolled {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 86px;
  margin: 0 auto;
  padding: 16px 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.light-hero .brand-mark {
  grid-column: span 2;
  justify-self: start;
  width: auto;
  height: auto;
  color: #000;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

body.light-hero .brand-mark span,
body.light-hero .brand-mark .lamp-dot {
  display: none;
}

body.light-hero .desktop-nav {
  grid-column: 4 / 10;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
}

body.light-hero .desktop-nav a,
body.light-hero .site-header.scrolled .desktop-nav a {
  position: relative;
  padding: 0;
  border-radius: 0;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
/* underline-wipe hover + current-page indicator */
body.light-hero .desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1);
}
body.light-hero .desktop-nav a:hover::after,
body.light-hero .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
body.light-hero .desktop-nav a[aria-current="page"] { font-weight: 500; }
/* flip to light when the header sits over a dark section */
body.light-hero.nav-on-dark .desktop-nav a { color: rgba(255, 255, 255, 0.72); }
body.light-hero.nav-on-dark .desktop-nav a:hover,
body.light-hero.nav-on-dark .desktop-nav a[aria-current="page"] { color: #fff; }

body.light-hero .site-header .header-cta,
body.light-hero .header-cta,
body.light-hero .site-header.scrolled .header-cta {
  grid-column: 10 / 13;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 54px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: #1b1a18;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

body.light-hero .site-header .header-cta:hover,
body.light-hero .header-cta:hover,
body.light-hero .site-header.scrolled .header-cta:hover {
  background: #000;
  color: #fff;
  border: 0;
}

.header-cta-thumb {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
    url("assets/ved-about.webp") center 28% / 96px auto no-repeat;
  color: transparent;
  filter: grayscale(1);
}

body.light-hero .menu-button span,
body.light-hero .site-header.scrolled .menu-button span {
  background: #000;
}

body.light-hero .hero {
  position: relative;
  min-height: 100svh;
  padding: 86px 0 0;
  overflow: hidden;
  background: #eae6dd;
  color: #000;
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: calc(100svh - 86px);
  min-height: 620px;
  margin: 0 auto;
  padding: 0 32px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.light-hero .hero-title-wrapper {
  position: relative;
  z-index: 5;
  width: 100%;
}

body.light-hero .hero-title {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 11.6vw, 13rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero-title-line {
  display: flex;
  width: 100%;
}

.hero-title-line-1,
.hero-title-line-2,
.hero-title-line-3 {
  justify-content: flex-start;
  align-items: center;
  gap: 0.26em;
}

.hero-title-say {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
}

body.light-hero .hl-word {
  position: relative;
  top: 0.05em;
  display: inline-block;
  padding: 0;
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: 0.76em;
  font-weight: 700;
  line-height: 0.75;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

body.light-hero .hero-title:hover .hl-word {
  color: #f05235;
  transform: rotate(-2deg);
}

body.light-hero .hl-word[data-trigger-confetti] {
  cursor: pointer;
  pointer-events: auto;
}

body.light-hero .hero-subject {
  position: absolute;
  z-index: 10;
  left: 50%;
  right: auto;
  bottom: 0;
  width: auto;
  height: 90%;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  transform: translateX(-60%);
  animation: none;
  filter: grayscale(1);
}

/* ── HERO "YES WALL" ──────────────────────────────────────────────
   A slowly-drifting multilingual wall of "yes" behind the headline; the
   word nearest the cursor pops up + lights coral. Driven by hero-wow.js.
   REVERT to original: delete this CSS block, the .wow-wall <div> in
   index.html, the hero-wow.js <script> tag + the file, and remove the
   `no-yes-trail` class from <body> (re-enables the old cursor trail). */
.wow-wall {
  position: absolute; inset: 0; z-index: 3;
  overflow: hidden; pointer-events: none;
}
.wow-wall .kw {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  will-change: transform, color; transform-origin: center;
  font-family: "Bogdan Lektorat", Impact, sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
}

.hero-gradient {
  position: absolute;
  z-index: 20;
  inset: auto 0 0;
  width: 100%;
  height: 54%;
  background: linear-gradient(0deg,
    rgba(240, 82, 53, 0.96) 0%,
    rgba(240, 82, 53, 0.88) 24%,
    rgba(240, 82, 53, 0.6) 50%,
    rgba(240, 82, 53, 0.26) 74%,
    rgba(240, 82, 53, 0) 100%);
  pointer-events: none;
}

.yes-stamp {
  position: absolute;
  z-index: 18;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.01em;
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: clamp(52px, 7vw, 112px);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  will-change: transform, opacity;
  animation: yesStampFall 1.9s ease-in forwards;
}

.yes-stamp-letter {
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  animation: yesStampPop 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 0.05s);
}

@keyframes yesStampPop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes yesStampFall {
  0% {
    opacity: 1;
    transform: translate(var(--stamp-x), var(--stamp-y)) scale(var(--stamp-scale)) rotate(var(--stamp-rotate));
  }
  45% {
    opacity: 1;
    transform: translate(var(--stamp-x), var(--stamp-y)) scale(var(--stamp-scale)) rotate(var(--stamp-rotate));
  }
  100% {
    opacity: 0;
    transform: translate(var(--stamp-x), calc(var(--stamp-y) + 200px)) scale(var(--stamp-scale)) rotate(var(--stamp-rotate));
  }
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.confetti-fallback {
  position: fixed;
  inset: 0;
  z-index: 4000;
  overflow: hidden;
  pointer-events: none;
}

.confetti-fallback span {
  position: absolute;
  left: 50%;
  top: 58%;
  width: var(--size);
  height: calc(var(--size) * 1.45);
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
}

.confetti-fallback.is-active span {
  animation: confettiFallbackPop 1.8s cubic-bezier(0.16, 0.8, 0.24, 1) var(--delay) forwards;
}

@keyframes confettiFallbackPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x) + var(--drift)), calc(-50% + var(--y))) scale(1) rotate(var(--r));
  }
}

body.light-hero .hero-foot {
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

body.light-hero .hero-sub {
  grid-column: span 5;
  max-width: 480px;
  margin: 0;
  color: #000;
  font-size: 22px;
  line-height: 1.3;
}

body.light-hero .hero-scroll {
  grid-column: 10 / 13;
  justify-self: end;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

body.light-hero .hero-scroll:hover {
  color: #000;
}

/* pure-type hero: proof strip replaces the portrait as the hero's credibility */
body.light-hero .hero-foot-left {
  grid-column: 1 / 8;
  align-self: end;
}
body.light-hero .hero-proof {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b5848;
}
body.light-hero .hero-proof span { color: var(--yes-coral); font-weight: 700; }

/* Centered hero variant: remove the `hero-centered` class from <body> to
   restore the left-aligned editorial layout. */
/* center the whole block on both axes, and size the type so it fits with
   breathing room instead of edge-to-edge */
body.hero-centered .hero-content {
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 4.6vh, 58px);
  /* balance the fixed header's top reservation so the block sits at true centre,
     then nudge it ~20px below centre (extra top padding) per request */
  padding-top: clamp(34px, 5vh, 46px);
  padding-bottom: clamp(40px, 9vh, 86px);
}
/* higher specificity so it also overrides the responsive .hero-title sizes */
body.light-hero.hero-centered .hero-title { font-size: clamp(3rem, 8.8vw, 10rem); }
/* centre each line; allow it to wrap at WORD boundaries on narrow screens
   (so phrases never break mid-word) */
body.hero-centered .hero-title-line-1,
body.hero-centered .hero-title-line-2,
body.hero-centered .hero-title-line-3 { justify-content: center; flex-wrap: wrap; }
body.hero-centered .hero-title-wrapper .hero-sub {
  margin: clamp(18px, 2.8vh, 28px) auto 0;
  text-align: center;
}
body.hero-centered .hero-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
body.hero-centered .hero-foot-left { max-width: 620px; align-self: center; text-align: center; }
body.hero-centered .hero-sub { margin-left: auto; margin-right: auto; }
body.hero-centered .hero-proof { justify-content: center; }

body.light-hero .what-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  /* One statement filling a viewport, so it centres rather than sitting under
     a top padding. Padding stays symmetric here: offsetting by --header-space
     the way the pinned stage does pushes this ~46px low, and nothing collides
     with the floating header at this size. */
  display: grid;
  place-items: center;
  padding: 96px 32px;
  background: #eae6dd;
  color: #000;
  border-top: 0;
  scroll-margin-top: 0;
}

body.light-hero .what-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(234, 230, 221, 1) 0%, rgba(234, 230, 221, 0) 22%, rgba(240, 82, 53, 0.04) 100%);
  pointer-events: none;
}

body.light-hero .what-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

body.light-hero .what-label {
  margin: 0 0 40px;
  color: #000;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

body.light-hero .what-title {
  max-width: 1500px;
  margin: 0 auto;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.4rem, 6.1vw, 7.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.005em;
  word-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

body.light-hero .what-title-line {
  display: block;
  color: #000;
}

body.light-hero .what-script {
  display: inline-block;
  margin-right: 0.14em;
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: 0.92em;
  line-height: 0.78;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

body.light-hero .what-proof {
  display: grid;
  grid-template-columns: 0.86fr 1.28fr 0.86fr;
  gap: 32px;
  align-items: end;
  margin-top: clamp(72px, 10svh, 130px);
}

body.light-hero .what-copy {
  align-self: end;
  max-width: 360px;
}

body.light-hero .what-copy p {
  color: #000;
  font-size: 18px;
  line-height: 1.35;
}

body.light-hero .what-copy p + p {
  margin-top: 22px;
  color: rgba(0, 0, 0, 0.62);
}

body.light-hero .what-board {
  position: relative;
  min-height: 560px;
  isolation: isolate;
}

body.light-hero .what-board::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 42%;
  background: linear-gradient(0deg, rgba(240, 82, 53, 0.92), rgba(240, 82, 53, 0));
  z-index: -1;
}

body.light-hero .what-shot {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 5px solid #000;
  border-radius: 4px;
  background: #f7f3ea;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
  object-fit: cover;
  object-position: top left;
  transition: transform 0.7s var(--ease-out), filter 0.5s ease;
}

body.light-hero .what-shot-one {
  z-index: 2;
  top: 9%;
  left: 0;
  width: 58%;
  height: 56%;
  transform: rotate(-6deg);
}

body.light-hero .what-shot-two {
  z-index: 3;
  top: 0;
  right: 4%;
  width: 56%;
  height: 62%;
  transform: rotate(5deg);
}

body.light-hero .what-shot-three {
  z-index: 4;
  left: 22%;
  bottom: 3%;
  width: 62%;
  height: 46%;
  transform: rotate(-1deg);
}

body.light-hero .what-board:hover .what-shot-one {
  transform: translate(-12px, -8px) rotate(-8deg);
}

body.light-hero .what-board:hover .what-shot-two {
  transform: translate(12px, -10px) rotate(7deg);
}

body.light-hero .what-board:hover .what-shot-three {
  transform: translateY(-16px) rotate(1deg);
}

body.light-hero .what-board-tag {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 18px;
  background: #f05235;
  color: #fff;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 32px;
  line-height: 0.9;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-3deg);
  white-space: nowrap;
}

body.light-hero .what-points {
  align-self: end;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}

body.light-hero .what-points div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

body.light-hero .what-points span {
  color: #f05235;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 26px;
  line-height: 0.9;
}

body.light-hero .what-points p {
  color: #000;
  font-size: 17px;
  line-height: 1.25;
}

@media (min-width: 1440px) {
  body.light-hero .what-title {
    font-size: clamp(5.8rem, 5vw, 6.8rem);
  }
}

@media (max-width: 1200px) {
  body.light-hero .what-title {
    font-size: 5.2rem;
  }

  body.light-hero .what-proof {
    grid-template-columns: 1fr 1.25fr;
  }

  body.light-hero .what-points {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.light-hero .what-points div {
    padding-right: 18px;
  }
}

@media (max-width: 980px) {
  body.light-hero .site-header,
  body.light-hero .site-header.scrolled {
    display: flex;
    height: 76px;
    padding: 14px 20px;
  }

  body.light-hero .brand-mark {
    flex: 0 0 auto;
    font-size: 42px;
  }

  body.light-hero .desktop-nav {
    display: none;
  }

  body.light-hero .site-header .header-cta,
  body.light-hero .header-cta {
    display: none;
  }

  body.light-hero .menu-button {
    margin-left: auto;
  }

  body.light-hero .mobile-nav {
    top: 78px;
  }

  body.light-hero .hero {
    padding-top: 76px;
  }

  .hero-content {
    height: calc(100svh - 76px);
    min-height: 620px;
    padding: 0 20px 30px;
  }

  body.light-hero .hero-title {
    font-size: clamp(6rem, 17vw, 10rem);
  }

  body.light-hero .hero-subject {
    height: 80%;
    transform: translateX(-55%);
  }

  body.light-hero .hero-foot {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.light-hero .hero-sub {
    grid-column: span 3;
  }

  body.light-hero .hero-scroll {
    grid-column: 4 / 7;
  }

  body.light-hero .what-section {
    padding: 92px 20px;
  }

  body.light-hero .what-title {
    font-size: 4.2rem;
  }

  body.light-hero .what-proof {
    grid-template-columns: 1fr;
    margin-top: 72px;
  }

  body.light-hero .what-copy {
    max-width: 640px;
  }

  body.light-hero .what-board {
    min-height: 480px;
  }

  body.light-hero .what-points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.light-hero .site-header,
  body.light-hero .site-header.scrolled {
    width: 100%;
    height: 72px;
    padding: 14px 16px;
    border-radius: 0;
  }

  body.light-hero .brand-mark {
    font-size: 38px;
  }

  body.light-hero .header-cta {
    height: 42px;
    padding: 6px 10px 6px 6px;
    font-size: 12px;
  }

  .header-cta-thumb {
    width: 30px;
    height: 30px;
    background-size: 76px auto;
  }

  body.light-hero .menu-button {
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 7px;
  }

  body.light-hero .hero {
    padding: 72px 0 0;
  }

  .hero-content {
    height: calc(100svh - 72px);
    min-height: 620px;
    padding: 0 16px 28px;
  }

  body.light-hero .hero-title {
    display: block;
    font-size: clamp(5rem, 23vw, 6rem);
    line-height: 0.92;
  }

  .hero-title-line,
  .hero-title-say {
    display: contents;
  }

  body.light-hero .hl-word {
    font-size: 0.88em;
  }

  body.light-hero .hero-subject {
    height: 60%;
    left: 50%;
    transform: translateX(-22%);
  }

  .hero-gradient {
    height: 52%;
    background: linear-gradient(0deg,
      rgba(240, 82, 53, 0.96) 0%,
      rgba(240, 82, 53, 0.82) 28%,
      rgba(240, 82, 53, 0.5) 58%,
      rgba(240, 82, 53, 0) 100%);
  }

  body.light-hero .hero-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  body.light-hero .hero-sub {
    max-width: 270px;
    font-size: 16px;
  }

  body.light-hero .hero-scroll {
    justify-self: start;
    font-size: 14px;
  }

  body.light-hero .what-section {
    min-height: auto;
    padding: 104px 16px 72px;
  }

  body.light-hero .what-label {
    text-align: center;
    font-size: 14px;
    margin-bottom: 36px;
  }

  body.light-hero .what-title {
    font-size: 2.9rem;
    line-height: 1.14;
    text-align: center;
  }

  body.light-hero .what-proof {
    gap: 30px;
    margin-top: 58px;
  }

  body.light-hero .what-copy p {
    font-size: 16px;
  }

  body.light-hero .what-board {
    min-height: 370px;
  }

  body.light-hero .what-shot {
    border-width: 3px;
  }

  body.light-hero .what-shot-one {
    width: 64%;
    height: 48%;
  }

  body.light-hero .what-shot-two {
    right: 0;
    width: 60%;
    height: 54%;
  }

  body.light-hero .what-shot-three {
    left: 12%;
    width: 76%;
    height: 43%;
  }

  body.light-hero .what-board-tag {
    min-height: 42px;
    padding: 0 12px;
    font-size: 24px;
  }

  body.light-hero .what-points div {
    grid-template-columns: 38px 1fr;
    padding: 16px 0;
  }

  body.light-hero .what-points span {
    font-size: 22px;
  }

  body.light-hero .what-points p {
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════
   First-load intro + hero → what-we-do scroll transition
   ════════════════════════════════════════════════════ */

/* Hero pins like a card; the next section scrolls up and over it.
   --p (0→1) tracks scroll through the hero so the card eases back as
   it gets covered. Defaults keep it safe with no JS. */
body.light-hero .hero-stack {
  position: relative;
  background: #d6d1c8;
}

body.light-hero .hero-stack .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  z-index: 1;
  background: #d6d1c8;
}

body.light-hero .hero-content {
  overflow: hidden;
  border-radius: calc(var(--p, 0) * 34px);
  box-shadow:
    0 calc(var(--p, 0) * 30px) calc(var(--p, 0) * 88px)
    rgba(0, 0, 0, calc(var(--p, 0) * 0.16));
  transform:
    translateY(calc(var(--p, 0) * -28px))
    scale(calc(1 - var(--p, 0) * 0.055));
  transform-origin: 50% 42%;
  will-change: transform, border-radius, box-shadow;
}

/* Hero recedes like a card; the next section stays square so no cream
   rounded lip appears over the orange hero footer. */
body.light-hero .hero-stack .what-section {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  transform:
    translateY(calc((1 - var(--wp, 1)) * 38px))
    scale(calc(0.992 + var(--wp, 1) * 0.008));
  transform-origin: top center;
  will-change: transform;
}

/* projects slide up and over the pinned "what we do" card */
body.light-hero .hero-stack .yes-work-section {
  position: relative;
  z-index: 3;
}

body.light-hero .what-section { --wp: 1; }
body.light-hero .what-inner {
  transform: translateY(calc((1 - var(--wp, 1)) * 44px));
  opacity: var(--wp, 1);
  will-change: transform, opacity;
}

@media (max-width: 980px) {
  body.light-hero .hero-stack .what-section {
    margin-top: 0;
    border-radius: 0;
  }
}

@media (max-width: 640px) {
  body.light-hero .hero-content {
    border-radius: calc(var(--p, 0) * 22px);
    transform:
      translateY(calc(var(--p, 0) * -16px))
      scale(calc(1 - var(--p, 0) * 0.035));
  }

  body.light-hero .hero-stack .what-section {
    margin-top: 0;
    border-radius: 0;
    transform:
      translateY(calc((1 - var(--wp, 1)) * 28px))
      scale(calc(0.995 + var(--wp, 1) * 0.005));
  }
}

/* intro curtain: hidden unless motion is allowed */
.intro-curtain { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .intro-curtain {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1a18;
    pointer-events: none;
    animation: curtainLift 0.5s 0.18s var(--ease-out) forwards;
  }
  .intro-curtain span {
    color: #eae6dd;
    font-family: "Bogdan Lektorat", Impact, "Arial Black", sans-serif;
    font-size: clamp(44px, 8vw, 72px);
    letter-spacing: -0.06em;
    line-height: 0.8;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(14px);
    animation: curtainMark 0.28s 0.03s var(--ease-out) forwards;
  }
  @keyframes curtainMark { to { opacity: 1; transform: none; } }
  @keyframes curtainLift { to { transform: translateY(-101%); } }

  /* fallback (no JS): words slide up, staggered left → right */
  body.light-hero .hero-title:not(.is-split) .hero-title-line > span {
    opacity: 0;
    transform: translateY(0.62em);
    animation: heroWordIn 0.85s var(--ease-out) both;
  }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-1 > span:nth-child(1) { animation-delay: 0.42s; }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-1 > span:nth-child(2) { animation-delay: 0.50s; }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-2 > span:nth-child(1) { animation-delay: 0.58s; }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-2 > span:nth-child(2) { animation-delay: 0.66s; }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-2 > span:nth-child(3) { animation-delay: 0.74s; }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-3 > span:nth-child(1) { animation-delay: 0.82s; }
  body.light-hero .hero-title:not(.is-split) .hero-title-line-3 > span:nth-child(2) { animation-delay: 0.90s; }
  @keyframes heroWordIn { to { opacity: 1; transform: none; } }

  /* enhanced (JS-split): each character flows up, left → right */
  body.light-hero .hero-title.is-split .hero-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.72em);
    animation: heroCharIn 0.58s var(--ease-out) both;
    animation-delay: var(--cd, 0s);
  }
  body.light-hero .hero-title.is-split .hl-word {
    opacity: 0;
    animation: heroSayIn 0.6s var(--ease-out) both;
    animation-delay: var(--cd, 0s);
  }
  @keyframes heroCharIn { to { opacity: 1; transform: none; } }
  @keyframes heroSayIn {
    from { opacity: 0; transform: translateY(0.72em) rotate(-2deg); }
    to   { opacity: 1; transform: translateY(0) rotate(-2deg); }
  }

  /* portrait clips up from the bottom */
  body.light-hero .hero-subject {
    animation: heroPhotoIn 0.85s 0.5s var(--ease-out) both;
  }
  @keyframes heroPhotoIn {
    from { opacity: 0; clip-path: inset(100% 0 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }

  /* gradient, foot, and header fade in last */
  .hero-gradient { animation: introFade 0.65s 0.56s ease both; }
  body.light-hero .hero-foot { animation: introFade 0.65s 0.8s ease both; }
  body.light-hero .site-header { animation: introFade 0.65s 0.68s ease both; }
  @keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
}

/* ── HERO-FX (revertible) ─────────────────────────────────
   Toggle by adding/removing the `hero-fx` class on <body>.
   In fx mode: the WebGL canvas shows, and the portrait + the
   photo-gradient are hidden. To fully remove: delete this block,
   the #hero-fx canvas, the hero-fx.js <script>, and the body class. */
.hero-fx-canvas {
  display: none;        /* modes opt-in below */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;           /* behind headline (z5) */
  pointer-events: none;
}

body.hero-fx .hero-subject { display: none; }   /* portrait removed in fx mode */
body[data-hero-mode="yes-play"] .hero-fx-canvas { display: block; }
/* ── end HERO-FX ─────────────────────────────────────────── */

/* ── HERO MODES (revertible experiment) ──────────────────── */
.hero-mode-switch {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(20, 18, 16, 0.86);
  color: #fff;
  font: 600 12px/1 "Sora", system-ui, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-mode-switch select {
  font: inherit;
  color: #111;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
}

/* MODE 1: flow-filled type: headline letters carry a flowing warm gradient */
body[data-hero-mode="flow-type"] .hero-title span {
  color: #d8432b;
  text-shadow: 0 0.08em 0 rgba(246, 189, 132, 0.42);
  animation: flowType 8s ease-in-out infinite;
}
@keyframes flowType {
  0%, 100% { color: #d8432b; text-shadow: 0 0.08em 0 rgba(246, 189, 132, 0.38); }
  50% { color: #f05235; text-shadow: 0 0.1em 0 rgba(216, 67, 43, 0.18); }
}

/* MODE 3: floating product UI fragments */
.hero-fragments { display: none; }
body[data-hero-mode="ui-fragments"] .hero-fragments {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.frag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.12);
  font: 600 14px/1.2 "Sora", system-ui, sans-serif;
  color: #14110f;
  white-space: nowrap;
  animation: fragFloat 6s ease-in-out infinite;
}
.frag span { color: rgba(0, 0, 0, 0.45); font-weight: 500; }
.frag-stat { left: 13%; top: 50%; }
.frag-stat strong { font-size: 22px; color: #f05235; }
.frag-chat { right: 15%; top: 44%; animation-delay: 1.4s; }
.frag-toggle { left: 26%; top: 70%; animation-delay: 2.2s; }
.frag-toggle i { width: 30px; height: 18px; border-radius: 999px; background: #f05235; position: relative; }
.frag-toggle i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.frag-btn { right: 22%; bottom: 22%; background: #14110f; color: #fff; animation-delay: 0.7s; }
.frag-bars { left: 60%; top: 30%; gap: 5px; align-items: flex-end; height: 54px; padding: 12px; animation-delay: 3s; }
.frag-bars i { width: 9px; background: #f6bd84; border-radius: 3px; }
.frag-bars i:nth-child(1) { height: 40%; }
.frag-bars i:nth-child(2) { height: 70%; }
.frag-bars i:nth-child(3) { height: 52%; }
.frag-bars i:nth-child(4) { height: 92%; background: #f05235; }
@keyframes fragFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* MODE 4: word swap flip */
body[data-hero-mode="word-swap"] .hl-word { transition: opacity 0.24s ease, transform 0.24s var(--ease-out); }
body[data-hero-mode="word-swap"] .hl-word.swapping { opacity: 0; transform: rotate(-2deg) translateY(-0.18em); }

@media (max-width: 640px) {
  .frag { font-size: 12px; padding: 9px 12px; }
  .hero-mode-switch { font-size: 11px; padding: 6px 9px; }
}
/* ── end HERO MODES ──────────────────────────────────────── */

/* ── SELECTED WORK: Bogdan-style sticky project reveal ─── */
.yes-work-section {
  position: relative;
  min-height: 100svh;
  background: #1b1a18;
  color: #fff;
  isolation: isolate;
}

.yes-work-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  height: 100svh;
  /* The sticky header covers the top 92px of this viewport (16px offset +
     60px tall + 16px margin). Centring in the full 100svh therefore lands the
     composition above the optical centre and leaves a bigger gap at the
     bottom. Padding the box by the header height re-centres it in the space
     the reader can actually see. */
  padding-top: var(--header-space);
  overflow: hidden;
  pointer-events: none;
}

.yes-work-content {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  text-align: center;
}

.yes-work-kicker {
  margin: 0 0 clamp(54px, 10svh, 96px);
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1;
  text-transform: uppercase;
}

/* These are my own products and several are still in progress. The note makes
   that the point rather than a gap, now that the status badges have gone. It
   takes over the kicker's bottom margin so the pinned stage below keeps the
   same vertical rhythm. */
.yes-work-kicker:has(+ .yes-work-note) {
  margin-bottom: clamp(14px, 2svh, 20px);
}
.yes-work-note {
  /* auto side margins: the stage centres its content, so a max-width block
     without them hangs left while its own text centres, which reads as broken */
  max-width: 72ch;
  margin: 0 auto clamp(40px, 8svh, 76px);
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.5;
  text-transform: none;
}

.text-style-accent.is-yes {
  display: inline-block;
  margin-right: 0.14em;
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}

.yes-work-stage {
  position: relative;
  min-height: clamp(330px, 42svh, 430px);
}

.yes-work-project {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centre each project inside the stage box. Without this the children stack
     from the top, so shorter projects leave dead space underneath and the
     whole pinned composition reads as sitting high in the viewport. */
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
  pointer-events: none;
}

.yes-work-project.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.16s ease, visibility 0s linear 0s;
}

.yes-work-project h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.4rem, 10.8vw, 10.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: min(96vw, 1540px);
}

.project-heading-text {
  display: inline-block;
  color: rgba(255, 255, 255, 0.45);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(0.62em);
  transition:
    clip-path 1.05s var(--ease-out),
    color 0.55s ease,
    opacity 0.75s ease,
    transform 1.05s var(--ease-out);
}

.yes-work-project.is-active .project-heading-text,
.yes-work-project.is-active.is-revealed .project-heading-text {
  color: #fff;
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
  transition:
    clip-path 1.05s var(--ease-out),
    opacity 0.75s ease,
    color 0.55s ease,
    transform 1.05s var(--ease-out);
}

.project-heading-count {
  position: absolute;
  top: -0.42em;
  right: -0.54em;
  z-index: 2;
  display: block;
  padding: 0.01em 0.12em 0.06em;
  border-radius: 999px;
  background: #1b1a18;
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 0.02em #1b1a18,
    0 0.03em 0 #1b1a18;
  transform: translate(0.06em, 0.2em) rotate(5deg);
  transition:
    opacity 0.72s ease 0.22s,
    transform 0.92s var(--ease-out) 0.22s;
  white-space: nowrap;
}

.yes-work-project.is-active .project-heading-count,
.yes-work-project.is-active.is-revealed .project-heading-count {
  opacity: 1;
  transform: translate(0, 0) rotate(5deg);
  transition:
    opacity 0.72s ease 0.22s,
    transform 0.92s var(--ease-out) 0.22s;
}

.yes-work-project p {
  max-width: 720px;
  margin: clamp(26px, 5svh, 42px) auto 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(13px, 1.12vw, 17px);
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(1.3em);
  transition:
    clip-path 0.86s var(--ease-out) 0.5s,
    opacity 0.7s ease 0.5s,
    transform 0.86s var(--ease-out) 0.5s;
}

.yes-work-project.is-active p,
.yes-work-project.is-active.is-revealed p {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
  transition:
    clip-path 0.86s var(--ease-out) 0.5s,
    opacity 0.7s ease 0.5s,
    transform 0.86s var(--ease-out) 0.5s;
}

.yes-work-project a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: clamp(24px, 4svh, 34px);
  padding: 0 24px;
  border-radius: 5px;
  background: #eae6dd;
  color: #1b1a18;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(1.3em);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    clip-path 0.84s var(--ease-out) 0.74s,
    opacity 0.68s ease 0.74s,
    transform 0.84s var(--ease-out) 0.74s;
  pointer-events: auto;
}

.yes-work-project.is-active a,
.yes-work-project.is-active.is-revealed a {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    clip-path 0.84s var(--ease-out) 0.74s,
    opacity 0.68s ease 0.74s,
    transform 0.84s var(--ease-out) 0.74s;
}

.yes-work-project a:hover {
  background: #f05235;
  color: #fff;
}

@keyframes selectedProjectTitleIn {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(0.62em);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes selectedProjectCountIn {
  from {
    opacity: 0;
    transform: translate(0.06em, 0.2em) rotate(5deg);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(5deg);
  }
}

@keyframes selectedProjectLineIn {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(1.3em);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes selectedProjectButtonIn {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(1.45em) scale(0.97);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.yes-work-panels {
  position: relative;
  z-index: 8;
  margin-top: -100svh;
  padding-top: 100svh;
  pointer-events: none;
}

.yes-work-panel {
  position: relative;
  height: 430svh;
  min-height: 2700px;
}

.yes-work-photo {
  position: absolute;
  z-index: 8;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  transform: translate3d(var(--base-x, 0px), var(--fall-y, 0px), 0);
  will-change: transform;
}

.yes-work-photo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 10px);
  height: clamp(132px, 24svh, 280px);
  opacity: var(--line-opacity, 0.78);
  background:
    linear-gradient(currentColor, currentColor) 6% 0 / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 33% 58% / 2px 42% no-repeat,
    linear-gradient(currentColor, currentColor) 59% 28% / 2px 72% no-repeat,
    linear-gradient(currentColor, currentColor) 91% 42% / 2px 58% no-repeat;
  transform: translate3d(0, var(--line-y, 0px), 0);
  will-change: transform, opacity;
  pointer-events: none;
}

.yes-work-photo.is-inverted::before {
  background:
    linear-gradient(currentColor, currentColor) 5% 0 / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 31% 50% / 2px 50% no-repeat,
    linear-gradient(currentColor, currentColor) 61% 16% / 2px 84% no-repeat,
    linear-gradient(currentColor, currentColor) 90% 36% / 2px 64% no-repeat;
}

.yes-work-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  object-fit: cover;
  object-position: top left;
  filter: saturate(0.9) contrast(0.98);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
}

.yes-work-photo.is-portrait {
  width: min(17vw, 220px);
  aspect-ratio: 3 / 4;
}

.yes-work-photo.is-landscape {
  width: min(23vw, 325px);
  aspect-ratio: 16 / 9;
}

.yes-work-photo-a,
.yes-work-photo-e,
.yes-work-photo-g {
  top: 16%;
  left: clamp(20px, 5.8vw, 108px);
}

.yes-work-photo-b,
.yes-work-photo-d,
.yes-work-photo-h {
  top: 47%;
  right: clamp(20px, 5.8vw, 108px);
}

.yes-work-photo-c,
.yes-work-photo-f,
.yes-work-photo-i {
  --base-x: -50%;
  top: 75%;
  left: 50%;
}

.yes-work-photo-d { top: 14%; }
.yes-work-photo-e { top: 45%; }
.yes-work-photo-f { top: 76%; }
.yes-work-photo-g { top: 14%; }
.yes-work-photo-h { top: 46%; }

/* contained card stack: see-all → services → process → about → FAQ → CTA */
.flow-stack {
  position: relative;
  isolation: isolate;
}

.flow-stack > section > * {
  opacity: var(--section-card-p, 1);
  transform: translateY(calc((1 - var(--section-card-p, 1)) * 44px));
  will-change: transform, opacity;
}

.flow-stack > section {
  background-clip: border-box;
  contain: paint;
}

.flow-stack > .said-yes-section {
  contain: none;
  overflow: visible;
}

.flow-stack > .said-yes-section > .said-yes-stack {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.yes-work-see-all {
  --section-card-p: 1;
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 64px);
  min-height: 100svh;
  /* Extra top padding for the sticky header, same reason as .yes-work-sticky. */
  padding: calc(64px + var(--header-space)) 24px 64px;
  background: #1b1a18;
  overflow: hidden;
}

.yes-work-see-all-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(72vw, 880px);
  min-height: clamp(150px, 28svh, 240px);
  border-radius: clamp(22px, 3.4vw, 44px);
  overflow: hidden;
  border: 0;
  background: #fff;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.1rem, 9.5vw, 7.2rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-radius 0.55s var(--ease-out), transform 0.55s var(--ease-out), background 0.3s ease;
}

.yes-work-see-all-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f05235;
  transform: translateY(102%);
  transition: transform 0.55s var(--ease-out);
}

.yes-work-see-all-trigger:hover {
  border-radius: clamp(16px, 2vw, 28px);
  transform: translateY(-6px);
}

.yes-work-see-all-trigger:hover::before,
.yes-work-see-all-trigger[aria-expanded="true"]::before {
  transform: translateY(0);
}

.yes-work-see-all-trigger:focus-visible {
  outline: 3px solid #f05235;
  outline-offset: 6px;
}

.see-all-word {
  position: relative;
  z-index: 1;
  display: inline-flex;
  overflow: hidden;
  color: #000;
}

.see-all-word > span {
  position: relative;
  display: inline-block;
  transition: transform 0.55s var(--ease-out), color 0.3s ease;
  transition-delay: calc(var(--i) * 0.025s);
}

.see-all-word > span::after {
  content: attr(data-char);
  position: absolute;
  top: 100%;
  left: 0;
  color: #fff;
}

.see-all-word > .is-space {
  width: 0.12em;
}

.yes-work-see-all-trigger:hover .see-all-word > span,
.yes-work-see-all-trigger[aria-expanded="true"] .see-all-word > span {
  color: #fff;
  transform: translateY(-100%);
}

.yes-work-see-all em {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: clamp(48px, 11svh, 92px);
  margin-left: 0.08em;
  padding: 0.01em 0.08em 0.05em;
  border-radius: 999px;
  background: #fff;
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 0.26em;
  font-style: normal;
  line-height: 1;
  text-shadow:
    0 0 0.02em #fff,
    0 0.03em 0 #fff;
  transform: rotate(5deg) translateY(-0.05em);
  transition: background 0.3s ease, color 0.3s ease, transform 0.55s var(--ease-out);
}

.yes-work-see-all-trigger:hover em,
.yes-work-see-all-trigger[aria-expanded="true"] em {
  background: #f05235;
  color: #fff;
  transform: rotate(5deg) translate(0.06em, -0.08em);
}

.yes-work-see-all.is-open {
  min-height: auto;
  padding-block: clamp(72px, 9vw, 128px);
}

.yes-work-more {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.38s var(--ease-out), transform 0.38s var(--ease-out);
}

.yes-work-more[hidden] {
  display: none;
}

/* The See All reveal renders full projects in the showcase format by reusing
   .yes-work-project. Those are absolutely positioned inside the pinned stage
   and their heading, copy and button start hidden behind
   .is-active.is-revealed, which only scroll can apply. This modifier returns
   them to normal flow and to a visible resting state, so the format is shared
   rather than duplicated. */
/* Each revealed project gets its own viewport, like the pinned three, and
   plays the same entrance animation. It cannot join the pinned stage itself:
   that is driven by scroll position over the .yes-work-panel image stacks, so
   adding to it after load would mean recomputing those. Instead these keep the
   base hidden state and an observer applies .is-active.is-revealed as each
   scrolls in, which is the exact pair of classes the stage uses. */
.yes-work-project.is-static {
  position: relative;
  inset: auto;
  min-height: 100svh;
  padding: var(--header-space) 24px 0;
  visibility: visible;
  pointer-events: auto;
  text-align: center;
}

.yes-work-more.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.yes-work-more-card {
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(20px, 2.2vw, 30px);
  background: #201d1a;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.26), 0 6px 18px rgba(0, 0, 0, 0.2);
}

.yes-work-more-card > a {
  display: block;
  height: 100%;
  color: #f5f1e8;
}

.yes-work-more-card > a:focus-visible {
  outline: 3px solid #f05235;
  outline-offset: -4px;
}

.yes-work-more-media {
  height: clamp(300px, 38vw, 480px);
  overflow: hidden;
  background: #14110f;
}

.yes-work-more-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.38s var(--ease-out);
}

.yes-work-more-card > a:hover .yes-work-more-media img {
  transform: scale(1.025);
}

.yes-work-more-copy {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 3vw, 38px);
}

.yes-work-more-copy h3 {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 5vw, 5.3rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}

.yes-work-more-copy p {
  max-width: 48ch;
  color: rgba(245, 241, 232, 0.6);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}

.yes-work-more-copy span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #f05235;
  font-weight: 700;
}

.yes-work-more-copy i {
  font-style: normal;
  transition: transform 0.3s var(--ease-out);
}

.yes-work-more-card > a:hover .yes-work-more-copy i {
  transform: translate(3px, -3px);
}

@media (max-width: 980px) {
  .yes-work-content {
    width: min(100% - 40px, 760px);
  }

  .yes-work-project h2 {
    font-size: clamp(4rem, 14vw, 7.8rem);
  }

  .project-heading-count {
    top: -0.4em;
    right: -0.32em;
  }

  .yes-work-photo.is-portrait {
    width: min(30vw, 218px);
  }

  .yes-work-photo.is-landscape {
    width: min(40vw, 320px);
  }

  .yes-work-panel {
    height: 360svh;
    min-height: 2200px;
  }
}

@media (max-width: 640px) {
  .yes-work-content {
    width: calc(100% - 32px);
  }

  .yes-work-kicker {
    margin-bottom: 42px;
    font-size: 13px;
  }

  .yes-work-kicker:has(+ .yes-work-note) {
    margin-bottom: 12px;
  }

  .yes-work-note {
    margin-bottom: 32px;
    font-size: 13px;
  }

  .yes-work-stage {
    min-height: 430px;
  }

  .yes-work-project {
    justify-content: center;
  }

  .yes-work-project h2 {
    max-width: 100%;
    font-size: clamp(3.2rem, 18vw, 5.2rem);
    line-height: 0.88;
    overflow-wrap: anywhere;
  }

  .project-heading-count {
    top: -0.34em;
    right: -0.12em;
    font-size: 0.28em;
  }

  .yes-work-project p {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.45;
  }

  .yes-work-project a {
    min-height: 48px;
    padding: 0 22px;
    font-size: 14px;
  }

  .yes-work-panel {
    height: 300svh;
    min-height: 1900px;
  }

  .yes-work-photo.is-portrait,
  .yes-work-photo.is-landscape {
    width: min(56vw, 220px);
  }

  .yes-work-photo-a,
  .yes-work-photo-e,
  .yes-work-photo-g { left: -8%; right: auto; }
  .yes-work-photo-b,
  .yes-work-photo-d,
  .yes-work-photo-h { right: -8%; left: auto; }
  .yes-work-photo-c,
  .yes-work-photo-f,
  .yes-work-photo-i { left: 50%; right: auto; }

  .yes-work-see-all-trigger {
    width: min(100%, 560px);
    min-height: 250px;
    font-size: clamp(3.8rem, 21vw, 6.4rem);
  }

  .yes-work-see-all em {
    margin-top: 58px;
  }

  .yes-work-more {
    width: min(100%, 560px);
    grid-template-columns: 1fr;
  }

  .yes-work-more-media {
    height: min(112vw, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yes-work-more,
  .yes-work-more-media img,
  .yes-work-more-copy i {
    transition: none;
  }
}

/* ── MOBILE HERO COMPOSITION ───────────────────────────────
   Keep the desktop's editorial layout unchanged. On phones, the opening
   message reads as one focused sequence: headline → proof → supporting copy
   → down-arrow. */
@media (max-width: 640px) {
  body.light-hero.hero-centered .hero-title {
    text-align: center;
  }

  body.hero-centered .hero-foot {
    position: static;
    align-items: center;
    margin-top: 0;
    text-align: center;
  }

  body.light-hero .hero-sub {
    max-width: 300px;
    text-align: center;
  }

  body.light-hero .hero-scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #000;
    transform: translateX(-50%);
  }

  body.light-hero .hero-scroll-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.light-hero .hero-scroll-icon {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 50%;
    place-items: center;
    animation: heroScrollNudge 1.6s ease-in-out infinite;
  }

  body.light-hero .hero-scroll-icon::before {
    position: absolute;
    top: 10px;
    left: 21px;
    width: 2px;
    height: 14px;
    background: currentColor;
    content: "";
  }

  body.light-hero .hero-scroll-icon::after {
    position: absolute;
    bottom: 10px;
    left: 17px;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
  }

  @keyframes heroScrollNudge {
    0%,
    100% { transform: translateY(-2px); }
    50% { transform: translateY(4px); }
  }
}

/* ── Hero scroll cue (refined arrow, all viewports) + entrance timing ── */
/* foot must not be a positioning context, so the cue pins to the hero bottom */
body.light-hero .hero-foot { position: static; }
body.light-hero .hero-scroll {
  position: absolute;
  bottom: clamp(16px, 3.4vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  color: #1b1208;
  opacity: 0;
  animation: fadeIn 0.7s ease 2s both;
  z-index: 31;
}
body.light-hero .hero-scroll-label {
  display: block;
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
body.light-hero .hero-scroll-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 18, 8, 0.28);
  background: transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
body.light-hero .hero-scroll-icon::before,
body.light-hero .hero-scroll-icon::after { content: none; }
body.light-hero .hero-scroll-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  animation: heroScrollNudge 1.8s ease-in-out infinite;
}
body.light-hero .hero-scroll:hover { color: var(--yes-coral); }
body.light-hero .hero-scroll:hover .hero-scroll-icon {
  border-color: var(--yes-coral);
  background: rgba(240, 82, 53, 0.1);
}

/* sub: responsive size + rises in once the headline has drawn */
body.light-hero .hero-sub {
  font-size: clamp(15px, 1.35vw, 19px);
  color: rgba(27, 18, 8, 0.72);
  opacity: 0;
  transform: translateY(18px);
  animation: heroRise 0.8s var(--ease-out) 1.65s both;
}

@media (prefers-reduced-motion: reduce) {
  body.light-hero .hero-sub { opacity: 1; transform: none; animation: none; }
  body.light-hero .hero-scroll { opacity: 1; animation: none; }
  body.light-hero .hero-scroll-icon svg { animation: none; }
  .hero-scroll-icon {
    animation: none;
  }

  .yes-work-sticky {
    position: relative;
  }

  .yes-work-panels {
    margin-top: 0;
    padding-top: 0;
  }

  .yes-work-panel {
    height: auto;
    min-height: 0;
    display: grid;
    gap: 24px;
    padding: 48px 24px;
  }

  .yes-work-photo {
    position: relative;
    inset: auto;
    justify-self: center;
    transform: none;
  }

  .yes-work-project {
    opacity: 1;
    transform: none;
  }
}
/* ── end SELECTED WORK ──────────────────────────────────── */

/* ── SERVICES - editorial service catalog ───────────────── */
.services-section {
  --services-edge: clamp(24px, 2.15vw, 48px);
  --section-card-p: 1;
  position: relative;
  z-index: 5;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(76px, 11svh, 132px) 0 clamp(84px, 13svh, 150px);
  border-radius: 0;
  background: #eae6dd;
  color: #000;
  box-shadow: none;
}

.services-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
}

.services-inner {
  width: calc(100% - (var(--services-edge) * 2));
  max-width: none;
  margin: 0 auto;
}

.services-title-wrap {
  position: relative;
  min-height: clamp(300px, 41vw, 610px);
  display: grid;
  align-items: start;
  isolation: isolate;
}

.services-mega {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 0;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(7.2rem, 25.3vw, 34rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.048em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%) scaleX(1.045);
  transform-origin: center;
}

.services-lede-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
  margin-top: clamp(-52px, -4vw, -18px);
}

.services-lede,
.services-note {
  margin: 0;
  color: #000;
}

.services-lede {
  grid-column: 1 / span 4;
  max-width: 390px;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.035em;
}

.services-note {
  grid-column: 9 / span 4;
  justify-self: end;
  max-width: 285px;
  color: rgba(0, 0, 0, 0.66);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}

.services-catalog {
  margin-top: clamp(58px, 9svh, 104px);
  border-top: 1px solid rgba(0, 0, 0, 0.55);
}

.services-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(58px, 7vw) minmax(0, 1fr) minmax(150px, 270px);
  gap: clamp(14px, 2.1vw, 30px);
  align-items: center;
  min-height: clamp(112px, 16svh, 164px);
  padding: clamp(18px, 2.3vw, 28px) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  overflow: hidden;
  color: #000;
  cursor: default;
  isolation: isolate;
  transition:
    color 0.36s ease,
    padding-left 0.68s var(--ease-out),
    border-color 0.36s ease;
  transition-delay: calc(var(--i) * 0.025s);
}

.services-card::before {
  content: "";
  position: absolute;
  inset: 0 -1px;
  z-index: -1;
  background: #1b1a18;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.14s ease;
}

.services-card.is-current,
.services-card:hover {
  color: #fff;
  padding-left: clamp(12px, 1.4vw, 24px);
  border-color: rgba(234, 230, 221, 0.28);
}

.services-card.is-current::before,
.services-card:hover::before {
  transform: scaleY(1);
  transform-origin: top;
  transition-duration: 0.58s;
}

.services-card:hover::before { transition-duration: 0.32s; }

.services-card-num {
  display: inline-block;
  width: max-content;
  padding: 0.02em 0.08em 0.05em;
  border-radius: 999px;
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1;
  text-shadow:
    0 0 0.02em currentColor,
    0 0.03em 0 rgba(0, 0, 0, 0.08);
  transform: rotate(-5deg);
  transition: transform 0.58s var(--ease-out), color 0.28s ease;
}

.services-card.is-current .services-card-num {
  color: #f05235;
  transform: translateX(5px) rotate(4deg);
}

.services-card-main {
  display: block;
  min-width: 0;
}

.services-card-main strong {
  display: block;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.3rem, 8.4vw, 8.9rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: transform 0.66s var(--ease-out), letter-spacing 0.66s var(--ease-out);
}

.services-card.is-current .services-card-main strong {
  letter-spacing: -0.02em;
  transform: translateX(0.04em);
}

.services-card-main em {
  display: block;
  max-width: 610px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14px, 1.22vw, 17px);
  font-style: normal;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.58s var(--ease-out),
    margin-top 0.58s var(--ease-out),
    opacity 0.44s ease,
    transform 0.58s var(--ease-out);
}

.services-card.is-current .services-card-main em {
  max-height: 82px;
  margin-top: 14px;
  opacity: 1;
  transform: translateY(0);
}

.services-card-meta {
  justify-self: end;
  max-width: 260px;
  color: rgba(0, 0, 0, 0.58);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
  transition: color 0.32s ease, transform 0.58s var(--ease-out), opacity 0.32s ease;
}

.services-card.is-current .services-card-meta {
  color: rgba(255, 255, 255, 0.68);
  opacity: 0.92;
  transform: translateX(-8px);
}

@media (max-width: 980px) {
  .services-section {
    --services-edge: 24px;
  }

  .services-title-wrap {
    min-height: clamp(186px, 30vw, 286px);
  }

  .services-mega {
    font-size: clamp(5.4rem, 24vw, 15rem);
  }

  /* centre the lede + note (match hero / what-we-do) */
  .services-lede-grid {
    display: block;
    margin-top: 0;
    text-align: center;
  }
  .services-lede,
  .services-note {
    grid-column: auto;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }
  .services-note {
    margin-top: 20px;
  }

  /* cards: number top-aligned (no overlap), no indent shift on focus */
  .services-card {
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
  }
  .services-card.is-current,
  .services-card:hover {
    padding-left: 0;
  }
  .services-card-num {
    margin-top: 0.08em;
  }
  .services-card-meta {
    grid-column: 2 / span 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }
  /* in focus: show the description only, hide the short label */
  .services-card.is-current .services-card-meta,
  .services-card:hover .services-card-meta {
    display: none;
  }
}

@media (max-width: 640px) {
  .services-section {
    --services-edge: 16px;
    padding: 64px 0 76px;
  }

  .services-title-wrap {
    min-height: 156px;
  }

  .services-mega {
    left: 0;
    width: 100%;
    font-size: clamp(3.8rem, 21.5vw, 6.6rem);
    line-height: 0.86;
    transform: none;
  }

  .services-lede-grid {
    display: block;
    margin-top: 0;
  }

  .services-lede,
  .services-note {
    max-width: 100%;
    text-align: center;
  }

  .services-note {
    margin-top: 16px;
  }

  .services-catalog {
    margin-top: 80px;
  }

  .services-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    min-height: 118px;
    padding: 18px 0;
  }

  .services-card-main strong {
    font-size: clamp(2.6rem, 15vw, 4.6rem);
    line-height: 0.86;
    overflow-wrap: anywhere;
  }

  .services-card-main em {
    font-size: 13px;
  }

  .services-card-meta {
    font-size: 11px;
  }
}
/* ── end SERVICES ───────────────────────────────────────── */

/* ── PROCESS - lean build flow ───────────────────────────── */
.process-section {
  --process-edge: clamp(24px, 2.15vw, 48px);
  --section-card-p: 1;
  position: relative;
  z-index: 6;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(72px, 11svh, 132px) 0 clamp(84px, 13svh, 150px);
  border-radius: 0;
  background: #1b1a18;
  color: #fff;
  box-shadow: none;
}

.process-inner {
  width: calc(100% - (var(--process-edge) * 2));
  max-width: none;
  margin: 0 auto;
}

.process-head {
  position: relative;
  min-height: clamp(300px, 40vw, 590px);
  display: grid;
  align-items: start;
  isolation: isolate;
}

.process-kicker {
  position: absolute;
  z-index: 2;
  top: clamp(22px, 4.8vw, 80px);
  left: 50%;
  margin: 0;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.process-mega {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 0;
  color: #fff;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(7rem, 23.6vw, 32rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.048em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%) scaleX(1.045);
  transform-origin: center;
}

.process-mega span {
  position: absolute;
  top: 0.02em;
  right: clamp(18px, 5vw, 96px);
  padding: 0.01em 0.12em 0.06em;
  border-radius: 999px;
  background: #1b1a18;
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 0.2em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0 0.02em #1b1a18,
    0 0.03em 0 #1b1a18;
  transform: rotate(6deg);
}

.process-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin-top: clamp(20px, 2.4vw, 44px);
}

.process-copy {
  position: sticky;
  top: 96px;
  grid-column: 1 / span 4;
  max-width: 380px;
}

.process-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.26;
  letter-spacing: -0.035em;
}

.process-timeline {
  display: grid;
  gap: 11px;
  margin-top: 24px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.process-timeline span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.1;
}

.process-timeline b,
.process-timeline strong {
  font-weight: 500;
}

.process-timeline b {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.process-timeline strong {
  flex: 0 0 auto;
  color: #fff;
  text-align: right;
}

.process-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  margin-top: 30px;
  padding: 8px 10px 8px 18px;
  border-radius: 5px;
  background: #eae6dd;
  color: #000;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.28s ease, color 0.28s ease, transform 0.48s var(--ease-out);
}

.process-cta i {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #1b1a18;
  color: #fff;
  font-style: normal;
  transition: background 0.28s ease, color 0.28s ease, transform 0.48s var(--ease-out);
}

.process-cta:hover {
  background: #f05235;
  color: #fff;
  transform: translateY(-4px);
}

.process-cta:hover i {
  background: #fff;
  color: #000;
  transform: rotate(45deg);
}

.process-steps {
  grid-column: 5 / span 8;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 0.18fr) minmax(0, 1fr) minmax(96px, 0.2fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  min-height: clamp(150px, 22svh, 220px);
  padding: clamp(26px, 4vw, 46px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  overflow: hidden;
  isolation: isolate;
  transition:
    padding-left 0.7s var(--ease-out),
    border-color 0.36s ease,
    color 0.36s ease;
}

.process-step::before {
  content: "";
  position: absolute;
  inset: 0 -1px;
  z-index: -1;
  background: #eae6dd;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.14s ease;
}

.process-step.is-current {
  color: #000;
  padding-left: clamp(12px, 1.4vw, 24px);
  border-color: rgba(234, 230, 221, 0.2);
}

.process-step.is-current::before {
  transform: scaleY(1);
  transform-origin: top;
  transition-duration: 0.62s;
}

.process-step-num {
  display: inline-block;
  width: max-content;
  padding: 0.02em 0.08em 0.05em;
  border-radius: 999px;
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(34px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1;
  text-shadow:
    0 0 0.02em currentColor,
    0 0.03em 0 rgba(0, 0, 0, 0.08);
  transform: rotate(-5deg);
  transition: transform 0.58s var(--ease-out);
}

.process-step.is-current .process-step-num {
  transform: translateX(5px) rotate(4deg);
}

.process-step-main h3 {
  margin: 0;
  color: currentColor;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 9vw, 10rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: transform 0.66s var(--ease-out), letter-spacing 0.66s var(--ease-out);
}

.process-step.is-current .process-step-main h3 {
  letter-spacing: -0.02em;
  transform: translateX(0.04em);
}

.process-step-main p {
  max-width: 560px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(14px, 1.22vw, 17px);
  line-height: 1.4;
  transition: color 0.3s ease, transform 0.58s var(--ease-out);
}

.process-step.is-current .process-step-main p {
  color: rgba(0, 0, 0, 0.68);
  transform: translateX(0.18em);
}

.process-step em {
  justify-self: end;
  margin-top: 0.42em;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(12px, 1vw, 15px);
  font-style: normal;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  transition: color 0.3s ease, transform 0.58s var(--ease-out);
}

.process-step.is-current em {
  color: rgba(0, 0, 0, 0.58);
  transform: translateX(-8px);
}

.process-timeframe-label,
.process-timeframe-value {
  display: none;
}

/* client-centric rows inside each step: You provide / You get / You decide.
   Coral labels read on both the dark and the cream (is-current) states. */
.process-detail {
  display: grid;
  gap: clamp(7px, 0.9vw, 11px);
  max-width: 560px;
  margin-top: clamp(16px, 1.8vw, 24px);
}
.pd-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.22fr) 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: baseline;
}
.pd-label {
  color: #f05235;
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pd-text {
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.35;
  transition: color 0.3s ease;
}
.process-step.is-current .pd-text { color: rgba(0, 0, 0, 0.66); }

@media (max-width: 980px) {
  .process-section {
    --process-edge: 24px;
  }

  .process-head {
    min-height: clamp(186px, 30vw, 286px);
  }

  .process-mega {
    font-size: clamp(5rem, 22vw, 14rem);
  }

  .process-layout {
    margin-top: 0;
  }

  .process-copy {
    position: relative;
    top: auto;
    grid-column: 1 / -1;
    max-width: 620px;
  }

  .process-steps {
    grid-column: 1 / -1;
    margin-top: 66px;
  }

  /* The active step is nudged right by padding-left so it reads as "current".
     From tablet down the cream sweep already says that, and the nudge only
     breaks the shared left edge with the steps above and below it. */
  .process-step.is-current {
    padding-left: 0;
  }

  .process-detail {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      max-height 0.46s var(--ease-out),
      margin-top 0.46s var(--ease-out),
      opacity 0.26s ease,
      transform 0.46s var(--ease-out);
  }

  .process-step.is-current .process-detail {
    max-height: 300px;
    margin-top: clamp(16px, 1.8vw, 24px);
    opacity: 1;
    transform: translateY(0);
  }

  .process-step em {
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    text-align: left;
    transform: none;
    transition:
      max-height 0.4s var(--ease-out),
      margin-top 0.4s var(--ease-out),
      padding-top 0.4s var(--ease-out),
      opacity 0.22s ease;
  }

  .process-step.is-current em {
    max-height: 40px;
    margin-top: 18px;
    padding-top: 12px;
    opacity: 1;
    visibility: visible;
  }

  .process-step em .process-timeframe-desktop {
    display: none;
  }

  .process-step em .process-timeframe-label,
  .process-step em .process-timeframe-value {
    display: inline;
    white-space: nowrap;
  }

  .process-step em .process-timeframe-label {
    color: rgba(0, 0, 0, 0.52);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .process-step em .process-timeframe-value {
    color: rgba(0, 0, 0, 0.82);
    font-size: 0.96em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

@media (max-width: 640px) {
  .process-section {
    --process-edge: 16px;
    padding: 64px 0 76px;
  }

  .process-head {
    min-height: 156px;
  }

  .process-kicker {
    top: 6px;
    font-size: 13px;
  }

  .process-mega {
    left: 0;
    width: 100%;
    font-size: clamp(3.45rem, 18.5vw, 5.9rem);
    line-height: 0.88;
    transform: none;
  }

  .process-mega span {
    top: -0.08em;
    right: 0;
    font-size: 0.26em;
  }

  .process-layout {
    margin-top: 0;
  }

  .process-copy {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .process-steps {
    margin-top: 78px;
  }

  .process-step {
    grid-template-columns: minmax(74px, max-content) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    min-height: 0;
    padding: 24px 0;
  }

  .process-step.is-current {
    padding-left: 0;
  }

  .process-step-num {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .process-step.is-current .process-step-num {
    transform: rotate(4deg);
  }

  .process-step-main {
    display: contents;
  }

  .process-step-main h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(3rem, 16vw, 4.9rem);
    line-height: 0.86;
  }

  .process-step.is-current .process-step-main h3,
  .process-step.is-current .process-step-main p {
    transform: none;
  }

  .process-step-main p {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% - 86px);
    max-width: none;
    margin-right: 0;
    margin-left: 86px;
    margin-top: 12px;
    font-size: 13px;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .process-detail {
    grid-column: 1 / -1;
    grid-row: 3;
    width: calc(100% - 86px);
    margin-right: 0;
    margin-left: 86px;
    box-sizing: border-box;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      max-height 0.46s var(--ease-out),
      margin-top 0.46s var(--ease-out),
      opacity 0.26s ease,
      transform 0.46s var(--ease-out);
  }

  .process-step.is-current .process-detail {
    max-height: 260px;
    margin-top: 16px;
    opacity: 1;
    transform: translateY(0);
  }

  .process-step em {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    width: calc(100% - 86px);
    margin-right: 0;
    margin-left: 86px;
    gap: 12px;
  }

  .process-step.is-current em {
    max-height: 40px;
    margin-top: 16px;
    padding-top: 10px;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .process-step.is-current .process-detail {
    max-height: 260px;
    margin-top: 16px;
    opacity: 1;
    transform: none;
  }

  .process-step.is-current em {
    max-height: 40px;
    margin-top: 16px;
    padding-top: 10px;
    opacity: 1;
  }
}
/* ── end PROCESS ────────────────────────────────────────── */

/* ── ABOUT / FAQ: reference polaroid stage ─────────────── */
.about-faq-section {
  --about-edge: clamp(24px, 2.15vw, 48px);
  --section-card-p: 1;
  position: relative;
  z-index: 7;
  overflow: hidden;
  min-height: 100svh;
  border-radius: 0;
  background: #eae6dd;
  color: #000;
  box-shadow: none;
}

.about-faq-inner {
  width: calc(100% - (var(--about-edge) * 2));
  max-width: none;
  margin: 0 auto;
}

.about-mega-wrap {
  position: relative;
  min-height: clamp(1240px, 146svh, 1410px);
  padding-top: clamp(36px, 7svh, 70px);
  perspective: 1100px;
  isolation: isolate;
}

.about-mega {
  position: relative;
  z-index: 1;
  left: 50%;
  width: 100vw;
  margin: 0;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(11rem, 39.5vw, 50rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%) scaleX(1.06);
  transform-origin: center center;
}

.about-polaroid-stage {
  position: absolute;
  z-index: 3;
  top: clamp(315px, 44svh, 500px);
  left: 48.5%;
  width: min(33vw, 470px);
  min-width: 350px;
  perspective: 900px;
  pointer-events: auto;
  transform: translateX(-50%);
}

.about-polaroid {
  --about-drift-x: 0px;
  --about-drift-y: 0px;
  --about-tilt-x: 0deg;
  --about-tilt-y: 0deg;
  --about-tilt-z: -1.5deg;
  --about-scale: 1;
  --about-glare-x: 50%;
  --about-glare-y: 30%;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: clamp(22px, 2.1vw, 34px) clamp(22px, 2.1vw, 34px) clamp(78px, 8vw, 118px);
  background: #fff;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.18);
  transform:
    translate3d(var(--about-drift-x), var(--about-drift-y), 0)
    rotateX(var(--about-tilt-x))
    rotateY(var(--about-tilt-y))
    rotateZ(var(--about-tilt-z))
    scale(var(--about-scale));
  transform-origin: 50% 48%;
  transform-style: preserve-3d;
  will-change: transform;
}

.about-polaroid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at var(--about-glare-x) var(--about-glare-y), rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%);
  opacity: 0.64;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateZ(28px);
}

.about-polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.16);
  filter: blur(32px);
  transform: translate3d(18px, 36px, -70px) scale(0.88);
}

.about-polaroid-photo {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 0.84;
  overflow: hidden;
  background: #d8d2c7;
  transform: translateZ(34px);
}

.about-polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%; /* frame the face/upper body */
  filter: grayscale(1) brightness(1.12) contrast(1.04); /* match mono theme + lift the dark shot */
  transform: scale(1.03);
}

.about-lede,
.about-story-copy {
  position: absolute;
  z-index: 4;
  top: clamp(720px, 80svh, 900px);
  bottom: auto;
  width: min(27vw, 420px);
  margin: 0;
}

.about-lede {
  left: 0;
}

.about-story-copy {
  right: 0;
  top: clamp(690px, 76svh, 850px);
  width: min(30vw, 470px);
  padding-top: clamp(16px, 1.35vw, 22px);
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.about-lede,
.about-story-copy p {
  color: #000;
  font-size: clamp(16px, 1.38vw, 20px);
  line-height: 1.38;
  letter-spacing: -0.025em;
}

.about-copy-title {
  max-width: 8.9em;
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 4.9vw, 6.15rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.about-copy-title span {
  display: inline-block;
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: 1.18em;
  line-height: 0.78;
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-4deg) translateY(0.02em);
}

.about-lede p {
  margin: 0;
}

.about-story-copy p {
  margin: 0;
}

.about-story-copy p + p {
  margin-top: clamp(10px, 1vw, 15px);
}

.about-no-layers {
  font-weight: 700;
}

.about-proof-strip {
  display: grid;
  gap: clamp(10px, 1vw, 14px);
  width: 100%;
  margin-top: clamp(24px, 2.3vw, 34px);
  padding-top: 0;
  border-top: 0;
}

.about-proof-strip::before {
  content: none;
}

.about-proof-strip p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(10px, 0.85vw, 14px);
  gap: clamp(5px, 0.45vw, 8px);
  min-height: auto;
  margin: 0;
  padding: 0;
}

.about-proof-strip p + p {
  border-left: 0;
}

.about-proof-strip span {
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: clamp(18px, 1.28vw, 25px);
  font-weight: 700;
  line-height: 0.9;
  transform: rotate(-5deg);
  transform-origin: left center;
}

.about-proof-strip strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.55rem, 1.55vw, 2.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.about-learn-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-top: 28px;
  padding: 8px 18px 8px 8px;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.45s var(--ease-out), background 0.25s ease, color 0.25s ease;
}

.about-learn-link:hover {
  background: #f05235;
  color: #fff;
  transform: translateY(-4px);
}

.about-link-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #eae6dd;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 14px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.about-linkedin {
  margin-top: clamp(22px, 2vw, 30px);
}

.about-proof-points {
  display: grid;
  gap: clamp(7px, 0.72vw, 12px);
  margin-top: clamp(15px, 1.8vw, 24px);
  padding-top: clamp(12px, 1.3vw, 20px);
  border-top: 1px solid rgba(0, 0, 0, 0.24);
}

.about-proof-points article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}

.about-proof-points span {
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(21px, 1.7vw, 28px);
  font-weight: 700;
  line-height: 0.9;
  transform: rotate(-5deg);
}

.about-proof-points strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.9rem, 2.35vw, 3.35rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.about-proof-points p {
  display: none;
}

.about-faq-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  width: min(1216px, 100%);
  margin: 0 auto;
  padding: clamp(68px, 11svh, 120px) 0 clamp(82px, 12svh, 130px);
}

.about-faq-title {
  grid-column: 1 / span 4;
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.5rem, 10vw, 9rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.about-faq-list {
  grid-column: 5 / span 8;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.about-faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.about-faq-item summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  list-style: none;
  cursor: pointer;
}

.about-faq-item summary::-webkit-details-marker {
  display: none;
}

.about-faq-item summary span {
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-4deg);
}

.about-faq-item summary strong {
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.about-faq-item summary i {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  transition: transform 0.35s var(--ease-out), background 0.25s ease, border-color 0.25s ease;
}

.about-faq-item summary i::before,
.about-faq-item summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: #000;
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, transform 0.35s var(--ease-out);
}

.about-faq-item summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.about-faq-item[open] summary i {
  background: #f05235;
  border-color: #f05235;
  transform: rotate(90deg);
}

.about-faq-item[open] summary i::before,
.about-faq-item[open] summary i::after {
  background: #fff;
}

.about-faq-item[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.about-faq-answer {
  padding: 0 56px 30px 90px;
}

.about-faq-answer p {
  max-width: 670px;
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .about-faq-section {
    --about-edge: 24px;
  }

  .about-faq-inner {
    width: calc(100% - (var(--about-edge) * 2));
  }

  .about-mega-wrap {
    min-height: auto;
    padding-top: 84px;
    padding-bottom: 92px;
  }

  .about-mega {
    font-size: clamp(8.2rem, 38vw, 18rem);
  }

  .about-polaroid-stage {
    position: relative;
    top: auto;
    left: auto;
    width: min(58vw, 390px);
    min-width: 280px;
    margin: 76px auto 0;
    transform: none;
  }

  .about-lede,
  .about-story-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(100%, 660px);
    margin-right: auto;
    margin-left: auto;
    margin-top: 76px;
    text-align: center;
  }

  .about-story-copy {
    border-top: 1px solid rgba(0, 0, 0, 0.18);
  }

  /* Centre the strip as one block, not each line on its own. Centring the
     rows individually made every (0N) marker start at a different x, so the
     list read as ragged indentation instead of a numbered column. */
  .about-proof-strip {
    width: fit-content;
    max-width: 100%;
    margin-top: 44px;
    margin-inline: auto;
    text-align: left;
  }

  .about-proof-strip p {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    text-align: left;
  }

  .about-faq-title,
  .about-faq-list {
    grid-column: 1 / -1;
  }

  .about-faq-grid {
    padding-top: 72px;
  }
}

@media (max-width: 640px) {
  .about-faq-section {
    --about-edge: 16px;
  }

  .about-faq-inner {
    width: calc(100% - (var(--about-edge) * 2));
  }

  .about-mega-wrap {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 72px;
  }

  .about-mega {
    font-size: clamp(6.2rem, 37vw, 9.2rem);
    line-height: 0.82;
  }

  .about-polaroid-stage {
    top: auto;
    width: min(82vw, 330px);
    min-width: 0;
    margin-top: 68px;
  }

  .about-polaroid {
    padding: 20px 20px 82px;
  }

  .about-lede,
  .about-story-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: min(100%, 350px);
    text-align: center;
  }

  .about-lede {
    bottom: auto;
    margin-top: 68px;
  }

  .about-story-copy {
    bottom: auto;
    margin-top: 68px;
  }

  .about-proof-strip {
    width: 100%;
    gap: 12px;
    margin-top: 44px;
  }

  .about-proof-strip p {
    min-height: auto;
    padding: 0;
  }

  .about-proof-strip p + p {
    border-left: 0;
    border-top: 0;
  }

  .about-copy-title {
    font-size: clamp(2.7rem, 15vw, 4.6rem);
  }

  .about-faq-grid {
    gap: 20px;
    padding: 58px 0 80px;
  }

  .about-faq-title {
    font-size: clamp(3.4rem, 20vw, 5.8rem);
  }

  .about-faq-item summary {
    grid-template-columns: 54px minmax(0, 1fr) 26px;
    gap: 12px;
    min-height: 82px;
  }

  .about-faq-item summary span {
    font-size: 24px;
  }

  .about-faq-item summary strong {
    font-size: clamp(22px, 8vw, 30px);
  }

  .about-faq-answer {
    padding: 0 0 26px 66px;
  }
}
/* ── end ABOUT / FAQ ───────────────────────────────────── */

/* ── TESTIMONIALS "They said yes" (sticky stacking cards) ─ */
.said-yes-section {
  --section-card-p: 1;
  position: relative;
  z-index: 8;
  overflow: visible;
  min-height: 100svh;
  border-radius: 0;
  background: #1b1a18;
  color: #fff;
  padding: clamp(64px, 9svh, 110px) 0 clamp(60px, 9svh, 120px);
  box-shadow: none;
}
.said-yes-mega { margin: 0 0 clamp(36px, 6svh, 72px); font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(3rem, 9vw, 9rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; text-align: center; }
.said-yes-script { font-family: var(--yes-script-font); color: var(--yes-coral); text-transform: uppercase; font-size: 0.92em; }
.said-yes-stack { position: relative; padding-bottom: clamp(30px, 6vh, 80px); }
.said-yes-card {
  position: sticky;
  top: calc(clamp(96px, 15vh, 158px) + var(--i, 0) * 16px);
  z-index: calc(3 + var(--i, 0));
  width: min(640px, 90%);
  margin: 0 auto clamp(40px, 7vh, 84px);
  padding: clamp(30px, 3.4vw, 52px);
  background: #fff;
  color: #14110f;
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  rotate: var(--rot, 0deg);
}
.said-yes-quote { margin: 0 0 18px; font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(24px, 2.7vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
.said-yes-body { margin: 0 0 26px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: #3a3530; }
.said-yes-author { display: flex; align-items: center; gap: 13px; }
.said-yes-avatar { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: #14110f; display: grid; place-items: center; padding: 7px; }
.said-yes-avatar svg { width: 100%; height: 100%; }
.said-yes-meta { display: flex; flex-direction: column; }
.said-yes-meta strong { font-size: 16px; font-weight: 700; }
.said-yes-meta em { font-style: normal; font-size: 14px; color: rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .said-yes-card { position: relative; top: auto; rotate: 0deg; }
}

/* ── FAQ "Got questions?" ───────────────────────────────── */
.faq-section {
  position: relative;
  z-index: 9;
  --section-card-p: 1;
  overflow: hidden;
  min-height: 100svh;
  border-radius: 0;
  background: #eae6dd;
  color: #000;
  padding: clamp(80px, 12svh, 150px) 0;
  box-shadow: none;
}
.faq-inner { width: calc(100% - clamp(40px, 4vw, 88px)); max-width: 1080px; margin: 0 auto; }
.faq-mega { margin: 0 0 clamp(44px, 7svh, 84px); font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(3.2rem, 11vw, 11rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.03em; text-transform: uppercase; text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border-radius: 14px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2vw, 30px); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { flex-shrink: 0; font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; color: rgba(0, 0, 0, 0.5); }
.faq-item summary strong { flex: 1; font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.faq-chev { position: relative; flex-shrink: 0; width: clamp(40px, 3.2vw, 52px); height: clamp(40px, 3.2vw, 52px); border-radius: 8px; background: #14110f; transition: background 0.25s ease; }
.faq-chev::before { content: ""; position: absolute; left: 50%; top: 44%; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg); transition: transform 0.3s var(--ease-out); }
.faq-item[open] .faq-chev::before { transform: translate(-50%, -10%) rotate(225deg); }
.faq-item summary:hover .faq-chev { background: #f05235; }
.faq-answer { padding: 0 clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 28px); }
.faq-answer p { margin: 0; max-width: 800px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: #3a3530; }

/* ── FOOTER (cream → coral, giant wordmark) ─────────────── */
.site-footer { background: linear-gradient(180deg, #eae6dd 0%, #f4c4ad 30%, #f0895f 56%, #ea5e33 80%, #e24a20 100%); color: #000; border-top: 0; overflow: hidden; }
.footer-inner { width: calc(100% - clamp(48px, 5vw, 96px)); max-width: 1920px; margin: 0 auto; padding: clamp(28px, 4svh, 48px) 0 clamp(8px, 1.4svh, 16px); }
.footer-links { display: flex; flex-direction: column; }
.footer-links-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 56px);
  padding-top: clamp(20px, 3.5svh, 44px);
  border-top: 1px solid rgba(0, 0, 0, 0.38);
}
.footer-label {
  display: block;
  margin-bottom: clamp(12px, 1.5vw, 20px);
  font-size: clamp(13px, 1.1vw, 16px);
  color: rgba(0, 0, 0, 0.62);
}
.footer-col-social { text-align: right; }
.footer-col-say { text-align: right; }
/* socials shown as brand icons (consistent with the compact footer) */
.footer-social-icons { display: inline-flex; align-items: center; gap: clamp(10px, 1vw, 16px); }
.footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #14110f; transition: color 0.2s ease, transform 0.14s var(--ease-out); }
.footer-social-icon svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.footer-social-icon:hover { color: #f05235; }
.footer-social-icon:active { transform: scale(0.9); }
.footer-social-icon:focus-visible { outline: 2px solid #14110f; outline-offset: 2px; border-radius: 8px; }

/* link hover: the label slides up and out while a coral copy slides in */
.footer-links a, .footer-email {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #000;
  font-size: clamp(18px, 1.7vw, 27px);
  line-height: 1.34;
}
.footer-links a { padding: 2px 0; }
.footer-links a > span, .footer-email > span { display: inline-block; transition: transform 0.42s var(--ease-out); }
.footer-links a::after, .footer-email::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 2px;
  color: #f05235;
  transform: translateY(110%);
  transition: transform 0.42s var(--ease-out);
}
.footer-links a:hover > span, .footer-email:hover > span { transform: translateY(-110%); }
.footer-links a:hover::after, .footer-email:hover::after { transform: translateY(0); }

/* giant wordmark: full-bleed, reveals char-by-char like the hero */
.footer-wordmark {
  width: 100vw;
  margin: clamp(24px, 5svh, 64px) calc(50% - 50vw) clamp(2px, 0.6svh, 10px);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 16vw, 28rem); /* JS resizes to fill the width exactly */
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #0a0806;
}
.footer-wordmark .fw-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.62em);
  color: #140d09;
  transition: transform 0.8s var(--ease-out), opacity 0.55s ease;
  transition-delay: calc(var(--i) * 0.045s);
}
.footer-wordmark.is-revealed .fw-char { opacity: 1; transform: translateY(0); }
/* ── merged homepage footer (one gradient block, hero-shaded) ── */
.ifl-footer { background: linear-gradient(180deg, #eae6dd 0%, #f6cbb4 26%, #f3a07e 48%, #ef7e54 66%, #ee5f37 82%, #f05235 100%); color: #14110f; border-top: 0; overflow: hidden; padding: clamp(40px, 5vw, 76px) 0 0; }
.ifl-footer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.4vw, 36px); width: min(100% - clamp(36px, 6vw, 96px), 1320px); margin: 0 auto clamp(48px, 7vw, 110px); }
.ifl-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.2vw, 38px); margin-right: auto; }
.ifl-footer-nav .btn-animate-chars { color: #14110f; font-family: "Sora", system-ui, sans-serif; font-size: clamp(13px, 0.95vw, 15px); font-weight: 600; letter-spacing: 0.02em; }
.ifl-footer-nav .btn-animate-chars[aria-current="page"] { color: #f05235; }
.ifl-footer-socials { display: flex; align-items: center; gap: clamp(6px, 0.8vw, 12px); }
.ifl-social { display: inline-flex; width: 40px; height: 40px; overflow: hidden; color: #14110f; border-radius: 8px; }
.ifl-social:focus-visible { outline: 2px solid #14110f; outline-offset: 2px; }
.ifl-social-roll { display: flex; flex-direction: column; transition: transform 0.55s cubic-bezier(0.625, 0.05, 0, 1); }
.ifl-social-roll > span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; }
.ifl-social-roll svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.ifl-social-roll > span:nth-child(2) { color: #f05235; }
.ifl-social:hover .ifl-social-roll { transform: translateY(-40px); }
.ifl-footer .footer-wordmark .fw-char { background: linear-gradient(180deg, rgba(20, 13, 9, 0.28) 0%, rgba(20, 13, 9, 0.6) 44%, #140d09 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ifl-footer .footer-wordmark {
  height: 0.47em;
  margin-top: 0;
  margin-bottom: 0;
  overflow: visible;
  transform: translateY(-0.055em);
}
.ifl-footer-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(8px, 1.4vw, 24px); text-align: center; width: min(100% - clamp(36px, 6vw, 96px), 1320px); margin: 0 auto clamp(24px, 3.4vw, 54px); font-size: clamp(12px, 1vw, 15px); color: rgba(20, 17, 15, 0.78); }

.footer-bottom { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 0; border: 0; max-width: none; }
.footer-bottom p { margin: 0; font-size: clamp(12px, 1vw, 15px); color: rgba(0, 0, 0, 0.72); }
.footer-bottom span { color: #f05235; }

/* ── HEADER MENU + FULL-SCREEN OVERLAY ──────────────────── */
/* persistent floating header so the Menu button is always reachable */
body.light-hero .site-header,
body.light-hero .site-header.scrolled {
  position: fixed;
  z-index: 1002;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: none;
  transition:
    opacity 0.28s ease,
    transform 0.34s var(--ease-out);
}

body.light-hero.nav-hidden:not(.nav-open) .site-header,
body.light-hero.nav-scroll-hidden:not(.nav-open) .site-header {
  opacity: 0;
  transform: translateY(-112%);
  pointer-events: none;
}

/* header items invert with the section behind them (toggled by JS):
   light section → black pill / white text · dark section → white pill / black text */
body.light-hero { --nav-bg: #000; --nav-fg: #fff; }
body.light-hero.nav-on-dark { --nav-bg: #fff; --nav-fg: #000; }
body.light-hero.nav-open { --nav-bg: #fff; --nav-fg: #000; overflow: hidden; }

body.light-hero .brand-mark {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 54px;
  padding: 7px 10px;
  background: var(--nav-bg);
  border-radius: 4px;
  color: var(--nav-fg);
  font-size: clamp(24px, 2.1vw, 34px);
  letter-spacing: -0.04em;
  line-height: 0.8;
  transition: background 0.3s ease, color 0.3s ease;
}

body.light-hero .site-header .brand-mark,
body.light-hero .site-header.scrolled .brand-mark {
  color: var(--nav-fg);
}
body.light-hero .desktop-nav { display: none; }

/* Menu pill (replaces the desktop nav, centered) */
body.light-hero .menu-button {
  grid-column: 5 / 9;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 142px;
  width: auto;
  height: 54px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 4px;
  background: var(--nav-bg);
  color: var(--nav-fg);
  font: 500 clamp(14px, 1.05vw, 17px)/1 "Sora", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
body.light-hero .menu-button:hover { background: var(--yes-coral); color: #fff; }
body.light-hero .menu-button:focus { outline: none; }
body.light-hero .menu-button:focus-visible { outline: 2px solid #f05235; outline-offset: 3px; }
/* per-character hover wave on the MENU label */
body.light-hero .menu-button .mb-text {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
  height: auto;
  background: transparent !important;
  color: currentColor !important;
  font: inherit;
  line-height: 1;
}
body.light-hero .site-header .menu-button .mb-text {
  width: auto;
  height: auto;
  background: transparent !important;
  color: currentColor !important;
}
body.light-hero .menu-button .mb-text span {
  display: inline-block;
  width: auto;
  height: auto;
  background: transparent !important;
  color: currentColor !important;
  font: inherit;
  line-height: 1;
  transition: transform 0.34s var(--ease-out);
  transition-delay: calc(var(--i) * 0.035s);
}
body.light-hero .site-header .menu-button .mb-text span {
  width: auto;
  height: auto;
  background: none;
  color: currentColor;
}
body.light-hero .menu-button:hover .mb-text span { transform: translateY(-18%); }
body.light-hero.nav-open .menu-button .mb-text,
body.light-hero.nav-open .menu-button .mb-text span {
  width: auto;
  height: auto;
  background: none;
  opacity: 1;
  transform: none;
}

/* three-bar icon that follows the text colour and folds into an X */
.mb-icon {
  position: relative;
  display: grid;
  gap: 5px;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}
.mb-icon span {
  display: block;
  width: 100%;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform 0.42s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.2s ease;
}
body.light-hero .menu-button .mb-icon span {
  width: 100%;
  background: currentColor;
}
body.light-hero .site-header .menu-button .mb-icon span {
  width: 100%;
  height: 1.6px;
  background: currentColor;
}
body.nav-open .mb-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .mb-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .mb-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.light-hero.nav-open .site-header .menu-button .mb-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.light-hero.nav-open .site-header .menu-button .mb-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.light-hero.nav-open .site-header .menu-button .mb-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.light-hero .site-header .menu-button.is-open .mb-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.light-hero .site-header .menu-button.is-open .mb-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.light-hero .site-header .menu-button.is-open .mb-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Let's-talk pill inverts the same way */
body.light-hero .site-header .header-cta,
body.light-hero .header-cta {
  grid-row: 1;
  background: var(--nav-bg);
  color: var(--nav-fg);
  transition: background 0.3s ease, color 0.3s ease;
}
/* Unified header-pill hover: coral accent + a slight lift, matching the MENU
   pill. The brand mark and CTA have no per-letter wave, so the lift gives them
   the motion. !important keeps it winning over the hero-centered scroll-state
   colours regardless of source order. */
body.light-hero .site-header .brand-mark,
body.light-hero .site-header .header-cta,
body.light-hero .site-header .menu-button {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}
body.light-hero .site-header .brand-mark:hover,
body.light-hero .header-cta:hover,
body.light-hero .site-header .header-cta:hover,
body.light-hero .site-header .menu-button:hover {
  background: var(--yes-coral) !important;
  color: #fff !important;
}
body.light-hero .site-header .brand-mark:hover,
body.light-hero .site-header .header-cta:hover {
  transform: translateY(-3px);
}

/* the old small dropdown is replaced by the full-screen overlay */
body.light-hero .mobile-nav { display: none; }

/* full-screen overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 980; /* below the header (1000) so the close X stays clickable */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  background: #f05235;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
  transition:
    transform 0.72s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 0.72s;
  will-change: transform;
}
body.nav-open .menu-overlay {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.82s cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s;
}
body.light-hero.nav-open .menu-overlay {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.menu-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.menu-overlay-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.52svh, 9px);
  padding-top: clamp(28px, 4.2svh, 56px);
}
.menu-link {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.05rem, 5.45vw, 7.2rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(0.74em) rotate(5deg);
  transform-origin: 50% 100%;
  transition:
    color 0.12s ease,
    opacity 0.42s ease,
    transform 0.86s cubic-bezier(0.22, 1, 0.36, 1);
}
body.nav-open .menu-link,
body.light-hero.nav-open .menu-link,
.menu-overlay.is-open .menu-link {
  color: #000;
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
@media (min-width: 981px) and (hover: hover) {
  /* Make the desktop menu's active choice unmistakable without relying on
     touch-only hover behaviour. */
  body.nav-open .menu-overlay-nav:hover .menu-link,
  body.light-hero.nav-open .menu-overlay-nav:hover .menu-link,
  .menu-overlay.is-open .menu-overlay-nav:hover .menu-link {
    color: rgba(0, 0, 0, 0.28);
  }

  body.nav-open .menu-overlay-nav .menu-link:hover,
  body.light-hero.nav-open .menu-overlay-nav .menu-link:hover,
  .menu-overlay.is-open .menu-overlay-nav .menu-link:hover {
    color: #000;
    transform: translateX(0.08em) rotate(-1deg);
  }

  body.nav-open .menu-overlay-nav:hover .menu-link,
  body.nav-open .menu-overlay-nav .menu-link:hover {
    transition-delay: 0s !important;
  }
}
.menu-overlay-foot {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 3.4vw, 64px);
  color: #000;
  font-size: clamp(13px, 1.1vw, 16px);
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.42s ease,
    transform 0.62s var(--ease-out);
}
body.nav-open .menu-overlay-foot {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}
body.light-hero.nav-open .menu-overlay-foot {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay.is-open .menu-overlay-foot {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay-foot p { margin: 0; }
.menu-overlay-foot a:hover { color: #fff; }

@media (max-width: 980px) {
  body.light-hero .menu-button { grid-column: auto; justify-self: auto; margin-left: auto; }
}

/* The full-screen menu needs a scrollable fallback for short phone and
   landscape viewports. Without it, its final links and contact details can
   sit behind the viewport edge. */
@media (max-width: 640px) {
  .menu-overlay {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .menu-overlay-foot {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  }

  .menu-overlay-foot a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .footer-links a,
  .footer-email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Touch devices do not have a reliable hover state. Keep the footer links
     to a single label instead of exposing the desktop hover-copy animation. */
  .footer-links a::after {
    content: none;
  }

  .footer-links a > span,
  .footer-links a:hover > span {
    transform: none;
  }

  .footer-email {
    max-width: 100%;
    font-size: 14px;
  }

  .footer-email > span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 980px) and (max-height: 620px) {
  .menu-overlay {
    justify-content: flex-start;
    padding: 88px 16px 32px;
  }

  .menu-overlay-nav {
    padding-top: 0;
  }

  .menu-overlay-foot {
    position: static;
    margin-top: 32px;
  }
}
/* ── end HEADER MENU ────────────────────────────────────── */

@media (max-width: 760px) {
  .footer-inner { width: calc(100% - 32px); }
  .footer-links-row {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .footer-cols { flex-direction: column; gap: 26px; }
  .footer-col-social { text-align: left; }
  .footer-col-say { text-align: left; }
  .footer-wordmark { white-space: normal; font-size: clamp(2.6rem, 17vw, 6rem); line-height: 0.9; }
  .footer-bottom { flex-direction: column; justify-content: center; gap: 4px; }
}
/* ── end TESTIMONIALS / FAQ / FOOTER ────────────────────── */

/* ── WORK WITH ME (reference dark CTA card) ─────────────── */
.work-with-me {
  --section-card-p: 1;
  position: relative;
  z-index: 10;
  overflow: hidden;
  min-height: 100svh;
  border-radius: 0;
  background: #eae6dd;
  padding: 0 clamp(24px, 2.5vw, 32px);
  box-shadow: none;
}
.wwm-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: clamp(680px, 107svh, 880px);
  border-radius: clamp(14px, 1.35vw, 18px);
  background: #1b1a18;
  color: #fff;
  padding: clamp(82px, 10vw, 128px);
}
.wwm-kicker {
  margin: 0;
  font-size: clamp(13px, 1.34vw, 17.2px);
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}
.wwm-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 2.5vw, 32px);
  margin-top: auto;
  margin-bottom: auto;
}
.wwm-title {
  width: min(100%, 9.75em);
  margin: 0;
  color: #fff;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.6rem, 6.85vw, 8.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
}
.wwm-script {
  display: inline-block;
  margin-left: 0.06em;
  margin-right: 0.18em;
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: 0.86em;
  font-weight: 700;
  line-height: 0.78;
  text-transform: uppercase;
  transform: rotate(-2deg) translateY(-0.02em);
}
.wwm-q {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-left: 0.18em;
}

.btn-animate-chars {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: visible;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-animate-chars__bg {
  position: absolute;
  inset: 0;
  border-radius: 0.25em;
  background: #fff;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
.btn-animate-chars:hover .btn-animate-chars__bg,
.btn-animate-chars.is-hovered .btn-animate-chars__bg { inset: 0.125em; }
.btn-animate-chars [data-button-animate-chars] {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.btn-animate-chars [data-button-animate-chars] span {
  position: relative;
  display: inline-block;
  text-shadow: currentColor 0 1.3em;
  transform: translateY(0) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
.btn-animate-chars:hover [data-button-animate-chars] span,
.btn-animate-chars.is-hovered [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}
.wwm-cta {
  width: auto;
  max-width: 80%;
  height: auto;
  padding: 0.5em 2em;
  border-radius: 0.25em;
  color: #000;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.75rem, 2.74vw, 2.35rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0;
}
.big-btn-title-wrapper {
  position: relative;
  display: block;
  line-height: 1.2;
}
.wwm-cta .btn-animate-chars__text {
  color: #000;
  font-size: inherit;
  line-height: 1.4;
}
.wwm-email {
  min-height: 54px;
  padding: 16px 12px;
  color: #fff;
  font-size: clamp(15px, 1.34vw, 17.2px);
  line-height: 1;
  text-transform: none;
}
.wwm-email .btn-animate-chars__text {
  color: #fff;
  line-height: 1.4;
  text-transform: none;
}

@media (max-width: 980px) {
  .wwm-inner {
    min-height: clamp(620px, 96svh, 780px);
    padding: clamp(64px, 10vw, 96px) clamp(24px, 5vw, 48px);
  }

  .wwm-title {
    font-size: clamp(4rem, 11vw, 6.6rem);
  }
}

@media (max-width: 640px) {
  .work-with-me {
    padding: 0 16px;
  }

  .wwm-inner {
    min-height: 86svh;
    padding: 48px 18px 44px;
  }

  .wwm-title {
    width: min(100%, 7.2em);
    font-size: clamp(3.2rem, 16vw, 5.4rem);
    line-height: 0.98;
  }

  .wwm-mid {
    gap: 24px;
  }

  .wwm-cta {
    max-width: 100%;
    font-size: clamp(1.55rem, 8vw, 2.1rem);
    padding: 0.5em 1.6em;
  }

  .wwm-email {
    max-width: 100%;
    font-size: 14px;
  }
}


/* ── PAGE TRANSITION (Hell yes → Contact) ───────────────── */
/* ── CONTACT PAGE ───────────────────────────────────────── */
.contact-page {
  background: #eae6dd;
  color: #14110f;
  font-family: "Bogdan Montreal", "Sora", system-ui, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  animation: contactEnter 0.7s var(--ease-out, ease) both;
}
@keyframes contactEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.contact-nav {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(14px, 2.2vw, 32px) clamp(24px, 3.2vw, 48px);
}
.contact-brand {
  justify-self: start;
  color: #000;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(34px, 2.9vw, 54px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.contact-top-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.45vw, 28px);
}
.contact-top-links a {
  color: #14110f;
  font-size: clamp(13px, 0.98vw, 18px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.22s ease;
}
/* contact top nav uses the same letter roll-up hover as the footer nav (btn-animate-chars) */
.contact-top-links .btn-animate-chars { color: #14110f; }
.contact-talk {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: clamp(52px, 4.1vw, 76px);
  padding: 8px 20px;
  border-radius: 4px;
  background: #1b1a18;
  color: #fff;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.22s ease, transform 0.22s var(--ease-out);
}
.contact-talk:hover { background: #000; transform: translateY(-1px); }
.contact-main {
  width: min(620px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(50px, 6.2svh, 90px) 0 clamp(116px, 18svh, 238px);
}
.contact-mega {
  width: max-content;
  margin: 0 50% clamp(54px, 7.6svh, 98px);
  transform: translateX(-50%);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(8rem, 18.9vw, 24rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.5vw, 36px);
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-field > span,
.cf-choice-group > legend {
  margin: 0 0 14px;
  color: #14110f;
  font-size: clamp(16px, 1.08vw, 22px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.cf-field > span i,
.cf-choice-group > legend i {
  color: var(--yes-coral);
  font-style: normal;
}
.cf-field input,
.cf-field textarea {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: #14110f;
  font: inherit;
  font-size: clamp(20px, 1.48vw, 30px);
  line-height: 1.15;
  padding: clamp(22px, 2vw, 32px) clamp(26px, 2.1vw, 34px);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: rgba(20, 17, 15, 0.28); }
.cf-field textarea {
  min-height: clamp(200px, 15vw, 250px);
  resize: vertical;
}
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(240, 82, 53, 0.42);
}
.cf-choice-group {
  display: flex;
  flex-direction: column;
  gap: 17px;
  border: 0;
  padding: 0;
  margin: 0;
}
.cf-choice-group label {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #14110f;
  font-size: clamp(21px, 1.48vw, 30px);
  line-height: 1.05;
  cursor: pointer;
}
.cf-choice-group input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 clamp(30px, 1.9vw, 39px);
  width: clamp(30px, 1.9vw, 39px);
  height: clamp(30px, 1.9vw, 39px);
  border: 2px solid rgba(20, 17, 15, 0.88);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cf-choice-group input:checked {
  border-color: #14110f;
  background:
    radial-gradient(circle at 50% 50%, #14110f 0 38%, transparent 40%);
}
.cf-choice-group input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(240, 82, 53, 0.18);
}
.cf-divider {
  width: 100%;
  height: 1px;
  margin: clamp(2px, 1vw, 10px) 0 0;
  background: rgba(20, 17, 15, 0.18);
}
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.cf-submit {
  width: 100%;
  min-height: clamp(72px, 5.8vw, 90px);
  margin: 0;
  padding: 18px 28px;
  border: 0;
  border-radius: 7px;
  background: #14110f;
  color: #fff;
  font: inherit;
  font-size: clamp(22px, 1.55vw, 31px);
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.24s ease, transform 0.24s var(--ease-out);
}
.cf-submit:hover { background: #000; transform: translateY(-2px); }
.cf-submit:disabled,
.premium-waitlist-form button:disabled {
  cursor: wait;
  opacity: 0.64;
  transform: none;
}
.cf-status { margin: -12px 0 0; min-height: 1.2em; font-size: clamp(14px, 1vw, 17px); }
.cf-status.is-error { color: #b3311f; }
.cf-status.is-ok { color: #1f7a3a; }
.cf-privacy {
  max-width: 68ch;
  margin: -12px 0 0;
  color: rgba(20, 17, 15, 0.62);
  font-size: 13px;
  line-height: 1.6;
}
.cf-privacy a,
.cf-status a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #f05235;
  text-underline-offset: 3px;
}
.contact-footer {
  background: #eae6dd;
  color: #000;
}
.contact-footer .footer-inner {
  padding-top: 0;
}
@media (max-width: 820px) {
  .contact-nav {
    grid-template-columns: auto minmax(52px, auto);
    padding-inline: 18px;
    overflow: clip;
  }
  .contact-top-links {
    order: 3;
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
  }
  .contact-top-links a { font-size: clamp(12px, 3.3vw, 14px); }
  .contact-mega {
    font-size: clamp(5.8rem, 25vw, 10rem);
  }
}
@media (max-width: 560px) {
  /* .contact-talk holds a single span — its label. Hiding :last-child emptied
     the button, leaving a bare 8px-padded box that rendered as a black bar in
     the top-right corner. The label shrinks instead of disappearing. */
  .contact-talk {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
  .contact-main { width: min(100% - 34px, 620px); padding-top: 34px; }
  .contact-mega { margin-bottom: 44px; }
  .cf-choice-group label { min-height: 44px; gap: 14px; }
}
/* ── end WORK WITH ME / CONTACT ─────────────────────────── */

/* ── ABOUT PAGE (reference-style editorial collage) ─────── */
.about-page {
  --about-coral: #f05235;
  --about-ink: #050403;
  --about-cream: #eae6dd;
  min-width: 320px;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--about-coral);
  color: var(--about-ink);
  font-family: "Bogdan Montreal", "Sora", system-ui, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

.about-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1005;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  height: 86px;
  padding: 16px 32px;
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.34s var(--ease-out);
}

.about-brand,
.about-nav-links,
.about-talk {
  pointer-events: auto;
}

.about-brand {
  justify-self: start;
  color: #000;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.about-nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.4vw, 42px);
}

.about-nav-links a {
  color: #000;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.16s ease, transform 0.24s var(--ease-out);
}

.about-nav-links a[aria-current="page"] {
  color: #000;
}

.about-nav-links a:hover {
  color: #fff;
  transform: translateY(-1px);
}

.about-page.about-nav-muted .about-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
}

.about-talk {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 16px 8px 8px;
  border-radius: 4px;
  background: #1b1a18;
  color: #fff;
  font-size: clamp(15px, 1.12vw, 20px);
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.18s ease, transform 0.24s var(--ease-out);
}

.about-talk:hover {
  background: #000;
  transform: translateY(-1px);
}

.about-page-hero {
  position: relative;
  min-height: 184svh;
  padding-top: 86px;
  overflow: hidden;
  background: var(--about-coral);
  perspective: 1200px;
}

.about-arc {
  position: absolute;
  top: 32px;
  left: -10vw;
  width: 120vw;
  height: clamp(240px, 24vw, 420px);
  border-bottom: 2px solid #000;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}

.about-page-card,
.about-page-proof-card {
  --ap-scroll-x: 0px;
  --ap-scroll-y: 0px;
  --ap-extra-rot: 0deg;
  --ap-rx: 0deg;
  --ap-ry: 0deg;
  --ap-scale: 1;
  position: absolute;
  z-index: 2;
  width: clamp(300px, 27vw, 470px);
  padding: clamp(20px, 2.1vw, 34px) clamp(18px, 1.9vw, 30px) clamp(74px, 7vw, 120px);
  background: #fff;
  transform:
    translate3d(var(--ap-origin-x, 0), 0, 0)
    translate3d(
      calc(var(--ap-x, 0px) + var(--ap-scroll-x, 0px)),
      calc(var(--ap-y, 0px) + var(--ap-scroll-y, 0px)),
      0
    )
    rotateZ(calc(var(--ap-rot, 0deg) + var(--ap-extra-rot, 0deg)))
    rotateX(var(--ap-rx, 0deg))
    rotateY(var(--ap-ry, 0deg))
    scale(var(--ap-scale, 1));
  transform-style: preserve-3d;
  transform-origin: 50% 18%;
  will-change: transform;
}

.about-page-card::after,
.about-page-proof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--ap-glare-x, 50%) var(--ap-glare-y, 24%), rgba(255,255,255,0.24), transparent 34%),
    linear-gradient(135deg, rgba(0,0,0,0.08), transparent 28%, transparent 72%, rgba(0,0,0,0.08));
  mix-blend-mode: soft-light;
  opacity: 0.56;
}

.about-page-photo {
  display: block;
  aspect-ratio: 1 / 1.12;
  overflow: hidden;
  background: #ddd;
}

.about-page-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}

.about-page-card-left .about-page-photo,
.about-page-card-right .about-page-photo {
  aspect-ratio: 1 / 1;
}

.about-page-tape {
  position: absolute;
  top: -22px;
  left: 50%;
  z-index: 3;
  width: clamp(70px, 6.4vw, 96px);
  height: clamp(82px, 7.8vw, 120px);
  background: #ffdb85;
  opacity: 0.98;
  transform: translateX(-50%) rotate(var(--tape-rot, -4deg));
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.about-page-card figcaption {
  position: absolute;
  right: -22px;
  bottom: 34px;
  max-width: 160px;
  color: #fff;
  font-family: var(--yes-script-font);
  font-size: clamp(18px, 1.35vw, 25px);
  font-weight: 700;
  line-height: 0.95;
  text-align: center;
  transform: rotate(-6deg);
}

.about-page-card-left {
  top: 0;
  left: -4vw;
  --tape-rot: 12deg;
}

.about-page-card-center {
  top: 0;
  left: 50%;
  --ap-origin-x: -50%;
  --tape-rot: -2deg;
}

.about-page-card-right {
  top: 0;
  right: -4vw;
  --tape-rot: -13deg;
}

.about-page-note {
  position: absolute;
  z-index: 4;
  color: #fff;
  font-family: var(--yes-script-font);
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 0.95;
  pointer-events: none;
}

.about-page-note span {
  display: block;
  width: 86px;
  height: 48px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 0 80px 0 0;
  transform: rotate(-18deg);
}

.about-page-note-left {
  top: clamp(610px, 66svh, 740px);
  left: 28%;
}

.about-page-note-right {
  top: clamp(560px, 59svh, 680px);
  right: 25%;
}

.about-page-note-right span {
  transform: scaleX(-1) rotate(-12deg);
}

.about-page-title-wrap {
  position: absolute;
  top: clamp(850px, 104svh, 1030px);
  left: 50%;
  z-index: 3;
  width: min(100%, 980px);
  text-align: center;
  transform: translateX(-50%);
}

.about-page-title-wrap h1 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(8.4rem, 20vw, 18.5rem);
  font-weight: 800;
  line-height: 0.75;
  letter-spacing: 0;
  text-transform: uppercase;
}

.about-page-title-wrap p {
  width: min(620px, calc(100% - 48px));
  margin: clamp(22px, 2vw, 34px) auto 0;
  font-size: clamp(18px, 1.42vw, 26px);
  line-height: 1.25;
}

.about-page-proof {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1fr);
  min-height: 108svh;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(52px, 6vw, 104px) 32px clamp(100px, 10vw, 160px);
  background: var(--about-coral);
  overflow: hidden;
}

.about-page-proof-left {
  align-self: end;
  display: grid;
  gap: clamp(32px, 4.2vw, 66px);
  width: min(420px, 100%);
}

.about-page-stat strong {
  display: block;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.4rem, 8vw, 9.5rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: 0;
  text-transform: uppercase;
}

.about-page-stat p,
.about-page-proof-copy p {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.35vw, 25px);
  line-height: 1.28;
}

.about-page-proof-card {
  top: clamp(28px, 4vw, 74px);
  right: clamp(-48px, -2vw, -18px);
  width: clamp(340px, 37vw, 650px);
  padding-bottom: clamp(82px, 7vw, 128px);
  --tape-rot: 8deg;
}

.about-page-proof-card .about-page-photo {
  aspect-ratio: 1.12 / 0.76;
}

.about-page-proof-copy {
  align-self: end;
  justify-self: end;
  width: min(430px, 100%);
}

.about-think {
  position: relative;
  z-index: 1;
  min-height: 104svh;
  padding: clamp(58px, 6vw, 104px) clamp(32px, 9.3vw, 150px) clamp(110px, 12vw, 180px);
  background: var(--about-coral);
}

.about-think h2 {
  margin: 0 auto clamp(70px, 9vw, 130px);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(5.2rem, 12.5vw, 17rem);
  font-weight: 800;
  line-height: 0.82;
  text-align: center;
  text-transform: uppercase;
}

.about-think h2 span {
  display: block;
  color: #fff;
  font-family: var(--yes-script-font);
  font-size: 0.52em;
  line-height: 0.86;
  text-transform: none;
  transform: rotate(-2deg);
}

.about-think-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(72px, 8vw, 140px) clamp(70px, 9vw, 160px);
}

.about-think article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.about-think article span {
  color: #000;
  font-family: var(--yes-script-font);
  font-size: clamp(22px, 1.7vw, 31px);
  font-weight: 700;
  line-height: 1;
}

.about-think h3 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 4.2vw, 5.75rem);
  font-weight: 800;
  line-height: 0.93;
  text-transform: uppercase;
}

.about-think p {
  grid-column: 2;
  margin: 18px 0 0;
  max-width: 470px;
  font-size: clamp(17px, 1.25vw, 23px);
  line-height: 1.36;
}

.about-page .work-with-me {
  background: var(--about-coral);
  padding: 0 clamp(24px, 2.5vw, 32px);
}

.about-page .wwm-inner {
  min-height: clamp(660px, 96svh, 840px);
  border-radius: clamp(18px, 1.55vw, 24px) clamp(18px, 1.55vw, 24px) 0 0;
}

.about-page .site-footer {
  margin-top: 0;
}

@media (max-width: 980px) {
  .about-nav {
    grid-template-columns: auto 1fr auto;
    height: 76px;
    padding: 14px 20px;
  }

  .about-nav-links {
    gap: 18px;
  }

  .about-page-hero {
    min-height: 168svh;
    padding-top: 76px;
  }

  .about-page-card {
    width: clamp(240px, 37vw, 360px);
  }

  .about-page-card-left {
    left: -12vw;
  }

  .about-page-card-right {
    right: -14vw;
  }

  .about-page-title-wrap {
    top: clamp(670px, 88svh, 840px);
  }

  .about-page-proof {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 96px;
  }

  .about-page-proof-card {
    position: relative;
    top: auto;
    right: auto;
    justify-self: center;
    width: min(620px, 100%);
    order: -1;
  }

  .about-page-proof-copy {
    justify-self: start;
  }

  .about-think-grid {
    gap: 64px 40px;
  }
}

/* ── Premium waitlist ───────────────────────────────────── */
body.library-v2 .market-price.is-waitlist,
body.library-page .market-price.is-waitlist {
  background: #f05235;
  color: #fff;
  border-color: transparent;
}

.market-card.is-waitlist .market-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 17, 15, 0.02), rgba(20, 17, 15, 0.2));
  pointer-events: none;
}

body.library-page.premium-waitlist-page:not(.item-page) .premium-waitlist-main {
  background: #14110f;
  color: #f5f1e8;
}

.premium-waitlist-hero {
  padding: clamp(122px, 14svh, 172px) 0 clamp(82px, 9vw, 128px);
}

.premium-waitlist-shell {
  width: min(calc(100% - clamp(36px, 7vw, 120px)), 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.72fr);
  grid-template-areas:
    "back back"
    "intro card"
    "details card";
  column-gap: clamp(58px, 8vw, 126px);
  row-gap: clamp(46px, 5vw, 72px);
  align-items: start;
}

.premium-waitlist-intro {
  grid-area: intro;
}

.premium-waitlist-back {
  grid-area: back;
  color: rgba(245, 241, 232, 0.58);
}

.premium-waitlist-back:hover {
  color: #f5f1e8;
}

.premium-waitlist-kicker {
  margin: 0 0 16px;
  color: #f05235;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.premium-waitlist-intro h1 {
  max-width: 100%;
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 6vw, 6rem);
  font-weight: 800;
  /* These titles wrap to 3 lines of condensed caps, where 0.86 leaves the
     lines touching: cap height nearly fills the em box on this face. The
     tighter values elsewhere are all single-word mega watermarks. */
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.premium-waitlist-lede {
  max-width: 610px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  color: rgba(245, 241, 232, 0.72);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.52;
}

.premium-waitlist-card {
  grid-area: card;
  position: relative;
  align-self: start;
  margin-top: 32px;
}

.premium-waitlist-form-wrap {
  position: relative;
  padding: clamp(30px, 3.4vw, 46px);
  border: 1px solid rgba(245, 241, 232, 0.12);
  border-radius: 18px;
  background: #201d1a;
  color: #f5f1e8;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.3),
    0 20px 44px rgba(0, 0, 0, 0.34),
    0 48px 92px rgba(0, 0, 0, 0.2);
}

.premium-notify-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
}

.premium-notify-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(245, 241, 232, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.premium-notify-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f05235;
}

.premium-notify-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: rgba(245, 241, 232, 0.64);
  text-align: right;
}

.premium-notify-price small {
  font-size: 10px;
  font-weight: 700;
}

.premium-notify-price-line {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}

.premium-notify-price del {
  color: rgba(245, 241, 232, 0.5);
  font-size: 14px;
  font-weight: 600;
  text-decoration-color: #f05235;
  text-decoration-thickness: 2px;
}

.premium-notify-price strong {
  color: #f5f1e8;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.premium-notify-price em {
  color: #f05235;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.premium-waitlist-form-wrap h2 {
  margin: clamp(28px, 3vw, 38px) 0 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.2rem, 4.5vw, 5rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.premium-notify-lede {
  max-width: 42ch;
  margin: 16px 0 0;
  color: rgba(245, 241, 232, 0.64);
  font-size: 14px;
  line-height: 1.55;
}

.premium-waitlist-form {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.premium-waitlist-form[hidden],
.premium-waitlist-success[hidden],
.premium-waitlist-error[hidden] {
  display: none !important;
}

.premium-notify-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.premium-notify-fields label {
  display: grid;
  gap: 8px;
  color: rgba(245, 241, 232, 0.82);
  font-size: 13px;
  font-weight: 600;
}

.premium-waitlist-form input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 8px;
  background: #14110f;
  color: #f5f1e8;
  font: inherit;
  outline: 0;
  transition: border-color 0.2s ease;
}

.premium-waitlist-form input::placeholder {
  color: rgba(245, 241, 232, 0.6);
}

.premium-waitlist-form input:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 2px;
  border-color: #f05235;
}

.premium-waitlist-form button {
  min-height: 58px;
  min-width: 138px;
  border: 0;
  border-radius: 8px;
  background: #f05235;
  color: #14110f;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out);
}

.premium-waitlist-form button:hover {
  transform: translateY(-3px);
}

.premium-waitlist-form button:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 4px;
}

.premium-waitlist-fineprint {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  color: rgba(245, 241, 232, 0.42);
  font-size: 11px;
  line-height: 1.45;
}

.premium-waitlist-fineprint span {
  position: relative;
  color: rgba(245, 241, 232, 0.6);
}

.premium-waitlist-fineprint span + span::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: -11px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f05235;
}

.premium-waitlist-privacy,
.premium-waitlist-error {
  margin: 0;
  color: rgba(245, 241, 232, 0.58);
  font-size: 11px;
  line-height: 1.55;
}

.premium-waitlist-privacy a,
.premium-waitlist-error a {
  color: #f5f1e8;
  text-decoration: underline;
  text-decoration-color: #f05235;
  text-underline-offset: 3px;
}

.premium-waitlist-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #f05235;
  background: #14110f;
  color: #f5f1e8;
}

.premium-waitlist-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.premium-waitlist-success {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 12px;
  background: #14110f;
}

.premium-waitlist-success strong {
  display: block;
  color: #f5f1e8;
  font-size: 24px;
}

.premium-waitlist-success p {
  margin: 8px 0 18px;
  color: rgba(245, 241, 232, 0.64);
  line-height: 1.5;
}

.premium-waitlist-success a {
  color: #f05235;
  font-weight: 700;
}

.premium-waitlist-details {
  grid-area: details;
  max-width: 680px;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.premium-waitlist-details h2 {
  margin: 0 0 22px;
  color: #f5f1e8;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.premium-waitlist-details ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-waitlist-details li {
  position: relative;
  padding-left: 22px;
  color: rgba(245, 241, 232, 0.72);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
}

.premium-waitlist-details li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  background: #f05235;
}

.premium-waitlist-details .item-tags {
  margin-top: 26px;
}

.premium-waitlist-details .item-tags small {
  background: #201d1a;
  border-color: rgba(245, 241, 232, 0.14);
  color: rgba(245, 241, 232, 0.64);
}

.premium-waitlist-trust {
  padding: clamp(78px, 9vw, 126px) 0;
  background: #eae6dd;
  color: #14110f;
}

.premium-waitlist-trust-shell {
  width: min(calc(100% - clamp(36px, 7vw, 120px)), 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  gap: clamp(56px, 9vw, 148px);
  align-items: end;
}

.premium-waitlist-trust h2 {
  max-width: 9ch;
  margin: 0;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.8rem, 8vw, 9rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.premium-waitlist-trust h2 span {
  color: #f05235;
}

.premium-waitlist-trust-copy > p {
  max-width: 36ch;
  margin: 0;
  color: #4a3f37;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.48;
  letter-spacing: -0.02em;
}

.premium-waitlist-trust-copy ul {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid rgba(20, 17, 15, 0.2);
  list-style: none;
}

.premium-waitlist-trust-copy li {
  position: relative;
  min-height: 52px;
  padding: 15px 0 15px 24px;
  border-bottom: 1px solid rgba(20, 17, 15, 0.2);
  color: #14110f;
  font-size: 14px;
  font-weight: 650;
}

.premium-waitlist-trust-copy li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #f05235;
}

@media (max-width: 900px) {
  .premium-waitlist-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "back"
      "intro"
      "card"
      "details";
    row-gap: 48px;
  }

  .premium-waitlist-intro h1 {
    max-width: 12ch;
  }

  .premium-waitlist-card {
    width: min(100%, 620px);
    margin-top: 0;
  }

  .premium-waitlist-details {
    margin-top: 6px;
  }

  .premium-waitlist-trust-shell {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .premium-waitlist-trust-copy > p {
    max-width: 42ch;
  }
}

@media (max-width: 560px) {
  .premium-waitlist-hero {
    padding: 104px 0 76px;
  }

  .premium-waitlist-shell {
    width: calc(100% - 32px);
    row-gap: 42px;
  }

  .premium-waitlist-intro h1 {
    max-width: 100%;
    font-size: clamp(3rem, 13vw, 4rem);
  }

  .premium-waitlist-page .sticky-talk {
    display: none;
  }

  .premium-waitlist-form-wrap {
    padding: 26px 22px;
    border-radius: 14px;
  }

  .premium-waitlist-form-wrap h2 {
    font-size: clamp(3rem, 15vw, 4.1rem);
  }

  .premium-notify-fields {
    grid-template-columns: 1fr;
  }

  .premium-waitlist-form button {
    width: 100%;
  }

  .premium-waitlist-fineprint {
    display: grid;
    gap: 7px;
  }

  .premium-waitlist-fineprint span {
    padding-left: 12px;
  }

  .premium-waitlist-fineprint span::before,
  .premium-waitlist-fineprint span + span::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f05235;
  }

  .premium-waitlist-trust {
    padding: 72px 0 80px;
  }

  .premium-waitlist-trust-shell {
    width: calc(100% - 32px);
    gap: 38px;
  }

  .premium-waitlist-trust h2 {
    font-size: clamp(4rem, 20vw, 5.8rem);
  }
}

@media (max-width: 720px) {
  .about-nav {
    grid-template-columns: auto 1fr;
  }

  .about-nav-links {
    display: none;
  }

  .about-talk {
    min-height: 48px;
    padding-right: 12px;
  }

  .about-talk span:last-child {
    display: none;
  }

  .about-page-hero {
    min-height: 150svh;
  }

  .about-arc {
    top: 80px;
    height: 170px;
  }

  .about-page-card {
    width: clamp(190px, 56vw, 280px);
    padding: 14px 14px 58px;
  }

  .about-page-card-left {
    top: 20px;
    left: -28vw;
  }

  .about-page-card-center {
    top: 90px;
  }

  .about-page-card-right {
    top: 48px;
    right: -34vw;
  }

  .about-page-note {
    display: none;
  }

  .about-page-title-wrap {
    top: clamp(560px, 78svh, 720px);
  }

  .about-page-title-wrap h1 {
    font-size: clamp(6rem, 26vw, 9rem);
  }

  .about-page-proof {
    padding: 76px 20px 120px;
  }

  .about-page-stat strong {
    font-size: clamp(4rem, 18vw, 7rem);
  }

  .about-think {
    padding: 80px 20px 120px;
  }

  .about-think h2 {
    font-size: clamp(4.1rem, 19vw, 7rem);
    margin-bottom: 64px;
  }

  .about-think-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .about-think article {
    grid-template-columns: 40px 1fr;
    gap: 16px;
  }

  .about-think h3 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }
}
/* ── end ABOUT PAGE ─────────────────────────────────────── */

/* ── ABOUT PAGE EXACT REBUILD ───────────────────────────── */
body.about-exact {
  --about-orange: #df5a43;
  --about-cream: #eae6dd;
  --about-ink: #050403;
  --about-script: "Caveat", "Brush Script MT", cursive;
  background: var(--about-orange);
  color: var(--about-ink);
  font-family: "Bogdan Montreal", "Sora", system-ui, sans-serif;
}

body.about-exact.nav-open {
  overflow: hidden;
}

body.about-exact .site-header,
body.about-exact .site-header.scrolled {
  position: fixed;
  top: clamp(20px, 3.8vw, 70px);
  left: 0;
  right: 0;
  z-index: 1002;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: calc(100% - clamp(40px, 3.2vw, 64px));
  max-width: none;
  height: 58px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  opacity: 1;
  animation: none;
}

body.about-exact .desktop-nav {
  display: none;
}

body.about-exact .brand-mark {
  grid-column: 1 / 2;
  justify-self: start;
  min-width: 72px;
  height: 72px;
  padding: 7px 9px;
  border-radius: 5px;
  background: var(--nav-bg);
  color: var(--nav-fg);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 32px;
  line-height: 0.82;
}

body.about-exact .site-header .menu-button {
  grid-column: 6 / 8;
  justify-self: center;
  min-width: 178px;
  height: 72px;
  gap: 18px;
  padding: 0 22px;
  border-radius: 5px;
  font-size: 21px;
  font-weight: 500;
}

body.about-exact .site-header .mb-icon {
  width: 44px;
  height: 25px;
  gap: 7px;
}

body.about-exact .site-header .mb-icon span {
  height: 3px;
}

body.about-exact.nav-open .site-header .menu-button,
body.about-exact .site-header .menu-button.is-open {
  background: #fff;
  color: #000;
}

body.about-exact .site-header .header-cta {
  grid-column: 10 / 13;
  justify-self: end;
  min-width: 214px;
  height: 72px;
  gap: 14px;
  padding: 0 18px;
  border: 0;
  border-radius: 5px;
  background: var(--nav-bg);
  color: var(--nav-fg);
  font-size: 21px;
  font-weight: 500;
  text-transform: uppercase;
}

body.about-exact .header-cta-thumb {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: linear-gradient(135deg, #222, #666);
  color: #fff;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 18px;
}

body.about-exact .site-header .header-cta:hover {
  background: #fff;
  color: #000;
}

body.about-exact .menu-overlay {
  z-index: 1000;
}

body.about-exact .menu-link {
  font-size: clamp(4.8rem, 7.4vw, 10rem);
  line-height: 0.88;
}

.about-exact-main {
  background: var(--about-orange);
  overflow: hidden;
}

.about-exact-collage {
  position: relative;
  min-height: clamp(960px, 137svh, 1380px);
  overflow: hidden;
  background: var(--about-orange);
  perspective: 1600px;
}

.about-exact-string {
  position: absolute;
  top: -78px;
  left: -8vw;
  width: 116vw;
  height: 420px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  border-radius: 0 0 50% 50%;
  transform: rotate(-0.4deg);
  transform-origin: 50% 0;
  pointer-events: none;
}

.about-exact-polaroid,
.about-proof-polaroid {
  --scroll-x: 0px;
  --scroll-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --extra-rot: 0deg;
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(430px, 31vw, 660px);
  padding: clamp(22px, 1.8vw, 34px) clamp(22px, 1.8vw, 34px) clamp(86px, 6vw, 130px);
  background: #fff;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.13);
  transform:
    translate3d(var(--scroll-x), var(--scroll-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    rotate(calc(var(--base-rot) + var(--extra-rot)));
  transform-style: preserve-3d;
  will-change: transform;
}

.about-exact-polaroid::after,
.about-proof-polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.22), transparent 38%, rgba(0, 0, 0, 0.05));
  opacity: 0.46;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.about-exact-polaroid-left {
  top: clamp(215px, 18vw, 330px);
  left: clamp(-185px, -7vw, -78px);
}

.about-exact-polaroid-center {
  top: clamp(345px, 28vw, 530px);
  left: 50%;
  width: clamp(460px, 29vw, 610px);
  transform:
    translate3d(calc(-50% + var(--scroll-x)), var(--scroll-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    rotate(calc(var(--base-rot) + var(--extra-rot)));
}

.about-exact-polaroid-right {
  top: clamp(230px, 19vw, 360px);
  right: clamp(-195px, -7vw, -74px);
}

.about-exact-tape {
  position: absolute;
  z-index: 4;
  top: clamp(-62px, -3.5vw, -36px);
  left: 50%;
  width: clamp(86px, 6.2vw, 122px);
  height: clamp(126px, 8.2vw, 164px);
  background: linear-gradient(180deg, #ffe8a5, #f5d47c);
  transform: translateX(-50%) rotate(5deg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.about-exact-polaroid-left .about-exact-tape {
  left: 63%;
  transform: translateX(-50%) rotate(12deg);
}

.about-exact-polaroid-right .about-exact-tape {
  left: 39%;
  transform: translateX(-50%) rotate(-14deg);
}

.about-exact-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 33%, rgba(255, 255, 255, 0.84) 0 9%, transparent 10%),
    linear-gradient(135deg, #183d3d 0%, #5f9d95 45%, #f1a177 100%);
}

.about-exact-polaroid-left .about-exact-photo {
  aspect-ratio: 1 / 0.86;
}

.about-exact-polaroid-right .about-exact-photo {
  aspect-ratio: 1 / 1.05;
}

.about-exact-photo-a {
  background:
    radial-gradient(circle at 55% 44%, rgba(255, 196, 126, 0.88) 0 16%, transparent 17%),
    radial-gradient(circle at 34% 48%, rgba(85, 45, 31, 0.84) 0 14%, transparent 15%),
    linear-gradient(135deg, #231914 0%, #7f5a44 38%, #1f3146 100%);
}

.about-exact-photo-b {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 214, 170, 0.95) 0 12%, transparent 13%),
    radial-gradient(circle at 37% 50%, rgba(106, 61, 29, 0.88) 0 11%, transparent 12%),
    linear-gradient(135deg, #2e716c 0%, #d8f2ec 45%, #0e1a23 100%);
}

.about-exact-photo-c {
  background:
    radial-gradient(circle at 42% 30%, rgba(255, 222, 207, 0.92) 0 12%, transparent 13%),
    radial-gradient(circle at 58% 36%, rgba(255, 202, 181, 0.92) 0 11%, transparent 12%),
    linear-gradient(135deg, #151515 0%, #355263 36%, #f1d2ab 100%);
}

.about-exact-photo-d {
  background:
    radial-gradient(circle at 54% 38%, rgba(255, 236, 204, 0.9) 0 13%, transparent 14%),
    linear-gradient(135deg, #c5a188 0%, #fff3e6 45%, #e8dac8 100%);
}

.about-exact-polaroid figcaption {
  position: absolute;
  bottom: clamp(20px, 2.2vw, 42px);
  left: clamp(32px, 3.6vw, 72px);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--about-script);
  font-size: clamp(26px, 2.2vw, 42px);
  line-height: 0.9;
  transform: translate3d(0, 84px, 20px) rotate(-8deg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}

.about-exact-polaroid-left figcaption {
  left: clamp(300px, 21vw, 430px);
  bottom: -70px;
}

.about-exact-polaroid-right figcaption {
  left: -110px;
  bottom: 32px;
}

.about-arrow {
  font-size: 1.8em;
  line-height: 0.6;
}

.about-exact-title {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 13vw, 210px) clamp(24px, 5vw, 80px);
  background: var(--about-orange);
  text-align: center;
}

.about-exact-title h1 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(9rem, 29vw, 33rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.about-exact-title p {
  width: min(1160px, 88vw);
  margin: clamp(34px, 5vw, 68px) auto 0;
  font-size: clamp(30px, 4.25vw, 78px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.about-exact-statement {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(130px, 14vw, 210px) clamp(32px, 6vw, 120px);
  background: var(--about-orange);
  text-align: center;
}

.about-exact-statement h2 {
  width: min(1520px, 94vw);
  margin: 0 auto;
}

.statement-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.55vw, 34px);
  min-height: 1.02em;
}

.statement-block {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(58px, 5.8vw, 126px);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.statement-script {
  position: relative;
  display: inline-block;
  color: #fff;
  font-family: var(--about-script);
  font-size: clamp(72px, 6.75vw, 158px);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.statement-script.is-underlined::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 1%;
  bottom: -0.13em;
  height: 5px;
  background: #000;
}

.about-exact-proof {
  position: relative;
  min-height: 108svh;
  padding: clamp(118px, 11vw, 190px) clamp(28px, 2.3vw, 48px) clamp(80px, 8vw, 130px);
  overflow: hidden;
  background: var(--about-orange);
}

.about-proof-polaroid {
  top: -112px;
  right: clamp(76px, 7vw, 170px);
  z-index: 1;
  width: clamp(430px, 34vw, 700px);
  opacity: 0.98;
}

.about-proof-note {
  position: absolute;
  top: clamp(120px, 12vw, 190px);
  left: 47%;
  z-index: 2;
  max-width: 260px;
  color: #fff;
  font-family: var(--about-script);
  font-size: clamp(22px, 1.8vw, 34px);
  line-height: 1.05;
  transform: rotate(9deg);
}

.about-proof-note::before {
  content: "↗";
  display: block;
  font-size: 2.1em;
  line-height: 0.5;
}

.about-proof-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(420px, 0.82fr);
  justify-content: space-between;
  align-items: end;
  gap: clamp(80px, 17vw, 300px);
  min-height: 78svh;
}

.about-proof-stats {
  display: grid;
  gap: clamp(34px, 4.2vw, 68px);
  max-width: 620px;
}

.about-proof-stats article {
  display: grid;
  gap: 14px;
}

.about-proof-stats strong {
  display: block;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(54px, 4.45vw, 94px);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.about-proof-stats p,
.about-proof-copy p {
  margin: 0;
  font-size: clamp(20px, 1.55vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.045em;
}

.about-proof-copy {
  justify-self: end;
  width: min(640px, 100%);
  padding-bottom: clamp(42px, 5vw, 92px);
}

.about-exact-think {
  min-height: 124svh;
  padding: clamp(110px, 10vw, 180px) clamp(54px, 9vw, 180px) clamp(110px, 10vw, 180px);
  background: var(--about-orange);
}

.about-think-heading {
  text-align: center;
  margin: 0 auto clamp(86px, 9vw, 150px);
}

.about-think-heading p {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(70px, 7.3vw, 145px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.about-think-heading h2 {
  margin: 0;
  color: #fff;
  font-family: var(--about-script);
  font-size: clamp(80px, 9vw, 174px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.01em;
}

.about-exact-think-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(82px, 9vw, 150px) clamp(110px, 15vw, 260px);
}

.about-exact-think-grid article {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(20px, 2vw, 42px);
}

.about-exact-think-grid span {
  padding-top: 0.3em;
  font-family: "Bogdan Montreal", "Sora", system-ui, sans-serif;
  font-size: clamp(18px, 1.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.about-exact-think-grid h3 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(52px, 4.1vw, 92px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.about-exact-think-grid p {
  grid-column: 2;
  max-width: 720px;
  margin: 18px 0 0;
  font-size: clamp(20px, 1.55vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.04em;
}

body.about-exact .work-with-me {
  background: var(--about-orange);
  padding-top: clamp(36px, 5vw, 76px);
}

body.about-exact .site-footer {
  background: var(--about-cream);
}

@media (max-width: 1100px) {
  body.about-exact .site-header,
  body.about-exact .site-header.scrolled {
    width: calc(100% - 28px);
    grid-template-columns: auto 1fr auto;
  }

  body.about-exact .brand-mark {
    grid-column: 1;
    min-width: 58px;
    height: 58px;
    font-size: 26px;
  }

  body.about-exact .site-header .menu-button {
    grid-column: 2;
    min-width: 144px;
    height: 58px;
    font-size: 16px;
  }

  body.about-exact .site-header .header-cta {
    grid-column: 3;
    min-width: 158px;
    height: 58px;
    font-size: 15px;
  }

  body.about-exact .header-cta-thumb {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .about-exact-collage {
    min-height: 1120px;
  }

  .about-exact-polaroid {
    width: 430px;
  }

  .about-exact-polaroid-left {
    left: -170px;
  }

  .about-exact-polaroid-center {
    top: 430px;
    width: 450px;
  }

  .about-exact-polaroid-right {
    right: -170px;
  }

  .about-proof-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .about-proof-copy {
    justify-self: start;
    padding-bottom: 0;
  }

  .about-exact-think-grid {
    grid-template-columns: 1fr;
    gap: 72px;
  }
}

@media (max-width: 760px) {
  body.about-exact .site-header,
  body.about-exact .site-header.scrolled {
    top: 14px;
  }

  body.about-exact .brand-mark {
    min-width: 48px;
    height: 48px;
    font-size: 22px;
  }

  body.about-exact .site-header .menu-button {
    min-width: 108px;
    height: 48px;
    gap: 10px;
    padding: 0 12px;
    font-size: 13px;
  }

  body.about-exact .site-header .mb-icon {
    width: 28px;
    height: 18px;
    gap: 5px;
  }

  body.about-exact .site-header .header-cta {
    min-width: 48px;
    width: 48px;
    height: 48px;
    padding: 0;
  }

  body.about-exact .site-header .header-cta span:last-child {
    display: none;
  }

  body.about-exact .header-cta-thumb {
    width: 48px;
    height: 48px;
  }

  .about-exact-collage {
    min-height: 980px;
  }

  .about-exact-string {
    top: 10px;
    height: 210px;
  }

  .about-exact-polaroid,
  .about-proof-polaroid {
    width: min(330px, 78vw);
    padding: 16px 16px 70px;
  }

  .about-exact-polaroid-left {
    top: 180px;
    left: -125px;
  }

  .about-exact-polaroid-center {
    top: 360px;
    width: min(340px, 82vw);
  }

  .about-exact-polaroid-right {
    top: 205px;
    right: -125px;
  }

  .about-exact-polaroid figcaption {
    display: none;
  }

  .about-exact-title {
    min-height: 82svh;
  }

  .statement-line {
    gap: 12px;
  }

  .statement-script {
    white-space: normal;
  }

  .about-exact-proof,
  .about-exact-think {
    padding-left: 24px;
    padding-right: 24px;
  }

  .about-proof-polaroid,
  .about-proof-note {
    display: none;
  }

  .about-exact-think-grid article {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-exact-think-grid p {
    grid-column: 1;
  }
}

/* ── end ABOUT PAGE EXACT REBUILD ───────────────────────── */

/* ── COMPACT NAVIGATION + STICKY TALK CTA ───────────────── */
/* The menu button keeps its accessible label, but the visual label is removed
   so the header stays a simple brand mark + control. */
body.light-hero .site-header .menu-button {
  grid-column: 12 / 13;
  justify-self: end;
  width: 54px;
  min-width: 54px;
  height: 54px;
  margin-left: auto;
  padding: 0;
  gap: 0;
}

body.light-hero .site-header .menu-button .mb-text {
  display: none;
}

body.light-hero .site-header .menu-button .mb-icon {
  width: 30px;
  height: 18px;
}

/* Content and project pages: centered MENU pill with label, matching the
   homepage instead of the default icon-only square. */
@media (min-width: 981px) {
  body.content-page .site-header .menu-button,
  body.project-page .site-header .menu-button {
    grid-column: 5 / 9;
    justify-self: center;
    width: auto;
    min-width: 142px;
    height: 54px;
    margin: 0;
    padding: 0 18px;
    gap: 14px;
  }

  body.content-page .site-header .menu-button .mb-text,
  body.project-page .site-header .menu-button .mb-text {
    display: inline-flex;
  }

  body.content-page .site-header .menu-button .mb-icon,
  body.project-page .site-header .menu-button .mb-icon {
    width: 34px;
    height: 18px;
  }
}

/* The root-level sticky control is used only on tablet and mobile. It lives
   outside the animated header so fixed positioning is viewport-relative. */
.sticky-talk {
  position: fixed;
  z-index: 1003;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 168px;
  height: 56px;
  margin: 0;
  padding: 8px 18px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: #1b1a18;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease,
    transform 0.35s var(--ease-out);
}

.sticky-talk:hover {
  background: #f05235;
  color: #fff;
}

body.nav-open .sticky-talk {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 24px));
}

@media (min-width: 981px) {
  body.light-hero .site-header .header-cta,
  body.light-hero .header-cta,
  body.light-hero .site-header.scrolled .header-cta {
    grid-column: 10 / 12;
  }

  /* These pages center the MENU pill, freeing the far-right slot: let the CTA
     fill to the right edge so its gap matches the brand mark's on the left. */
  body.content-page .site-header .header-cta,
  body.project-page .site-header .header-cta {
    grid-column: 10 / 13;
  }
}

@media (max-width: 980px) {
  .sticky-talk {
    display: inline-flex;
  }

  /* Keep the home-page scroll cue clear of the mobile/tablet CTA. */
  body.light-hero .hero-scroll {
    bottom: clamp(92px, 11svh, 126px);
  }
}

@media (max-width: 640px) {
  body.light-hero .site-header .menu-button {
    grid-column: auto;
    width: 48px;
    min-width: 48px;
    height: 48px;
  }

  .sticky-talk {
    min-width: 154px;
    height: 52px;
    padding: 7px 16px 7px 7px;
    font-size: 13px;
  }

  .sticky-talk .header-cta-thumb {
    width: 38px;
    height: 38px;
  }

  body.light-hero .hero-scroll {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ── PROJECT CASE STUDIES: REFERENCE-ALIGNED REBUILD ────── */
body.project-page {
  background: #eae6dd;
  color: #14110f;
}

body.project-page .project-main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 981px) {
  /* Project pages used to be the one place that showed the inline links and
     hid the MENU pill. Every other page — home, work, blog, library — is the
     pill, so these follow it. The header CTA stays. */
  body.project-page .desktop-nav { display: none; }
  body.project-page .site-header .header-cta { display: inline-flex; }
}

/* ---- HERO (card recedes on scroll; overview slides up over it) ---- */
body.project-page .project-stack {
  position: relative;
}
body.project-page .project-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  min-height: 100svh;
  padding: 0;
  background: #eae6dd;
}
body.project-page .project-hero-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #eae6dd;
  transform-origin: 50% 42%;
  will-change: transform, border-radius, box-shadow;
}
body.project-page .project-hero .project-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: clamp(112px, 13svh, 160px) 0 clamp(72px, 9svh, 112px);
  text-align: center;
}
body.project-page .project-eyebrow { display: none; }

body.project-page .project-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 2.2vw, 34px);
}
body.project-page .project-meta span,
body.project-page .project-meta a {
  padding: 0.5em 0.82em;
  border: 1px solid rgba(20, 17, 15, 0.7);
  border-radius: 5px;
  color: inherit;
  font-size: clamp(13px, 1.05vw, 18px);
  letter-spacing: 0;
  text-transform: uppercase;
}
/* Primary action matches every other button on the site (black), so coral
   isn't spent on a control that already reads as primary by contrast. */
body.project-page .project-meta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-color: #14110f;
  background: #14110f;
  color: #f5f1e8;
  font-weight: 700;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s var(--ease-out);
}
body.project-page .project-meta a:hover {
  background: var(--yes-coral);
  border-color: var(--yes-coral);
  color: #14110f;
  transform: translateY(-2px);
}
body.project-page .project-meta a:focus-visible {
  outline: 3px solid var(--yes-coral);
  outline-offset: 4px;
}

body.project-page .project-title {
  max-width: 96vw;
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 13.4vw, 15rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-transform: uppercase;
}
body.project-page .project-summary {
  position: static;
  width: min(82vw, 920px);
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  font-size: clamp(17px, 1.45vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Hero entrance: CSS fallback only when GSAP is NOT driving it */
body.project-page:not(.gsap-on) .project-hero .project-meta,
body.project-page:not(.gsap-on) .project-hero .project-title,
body.project-page:not(.gsap-on) .project-hero .project-summary {
  opacity: 0;
  transform: translateY(28px);
  animation: projectHeroRise 0.85s var(--ease-out) forwards;
}
body.project-page:not(.gsap-on) .project-hero .project-meta { animation-delay: 0.1s; }
body.project-page:not(.gsap-on) .project-hero .project-title { animation-delay: 0.2s; }
body.project-page:not(.gsap-on) .project-hero .project-summary { animation-delay: 0.38s; }
@keyframes projectHeroRise { to { opacity: 1; transform: translateY(0); } }

/* GSAP char/word rise reveal (no clipping: matches the homepage hero) */
body.project-page .reveal-char,
body.project-page .reveal-word { display: inline-block; will-change: transform; }

/* ---- OVERVIEW / DETAILS (slides up over the receding hero card) ---- */
body.project-page .project-overview {
  position: relative;
  z-index: 2;
  padding: clamp(96px, 16svh, 200px) 0;
  background: #eae6dd;
}
body.project-page .project-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7vw, 130px);
  align-items: center;
  width: min(100% - 96px, 1500px);
  margin: 0 auto;
}
body.project-page .project-overview-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.project-page .ov-kicker {
  margin: 0 0 clamp(10px, 1.2vw, 16px) 0.12em;
  color: rgba(20, 17, 15, 0.55);
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.project-page .ov-big {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 8.6vw, 9.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
body.project-page .ov-script {
  margin-top: clamp(2px, 0.4vw, 8px);
  color: var(--yes-coral);
  font-family: var(--yes-script-font);
  font-size: clamp(4.2rem, 8.6vw, 9.5rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.01em;
  transform: rotate(-3deg);
  transform-origin: left center;
}

body.project-page .project-overview-copy {
  border-top: 1px solid rgba(20, 17, 15, 0.6);
}
body.project-page .project-brief-item {
  padding: clamp(34px, 5svh, 64px) 0;
  border-bottom: 1px solid rgba(20, 17, 15, 0.6);
}
body.project-page .project-brief-item h3 {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.2rem, 3.2vw, 4rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
body.project-page .project-brief-item p {
  max-width: 680px;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 24px);
  line-height: 1.36;
  letter-spacing: -0.02em;
}

/* ---- IMAGE SEQUENCE ---- */
body.project-page .project-images {
  padding: clamp(24px, 4vw, 64px) 0;
  background: #eae6dd;
}
body.project-page .project-images .project-shell {
  width: min(100% - 96px, 1500px);
  margin: 0 auto;
}
body.project-page .pi-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 52px);
  margin-bottom: clamp(24px, 3.2vw, 52px);
}
body.project-page .pi-row:last-child { margin-bottom: 0; }
body.project-page .pi-row.is-full > .pi-media { grid-column: 1 / -1; }
body.project-page .pi-row.is-split > .pi-media:nth-child(1) { grid-column: 1 / 8; }
body.project-page .pi-row.is-split > .pi-media:nth-child(2) { grid-column: 8 / -1; margin-top: clamp(40px, 9vw, 150px); }
body.project-page .pi-row.is-two > .pi-media { grid-column: span 6; }
body.project-page .pi-row.is-left > .pi-media { grid-column: 1 / 10; }
body.project-page .pi-row.is-right > .pi-media { grid-column: 4 / -1; }

body.project-page .pi-media {
  position: relative;
  margin: 0;
  overflow: visible;
  background: transparent;
}
body.project-page .pi-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(20, 17, 15, 0.14);
  border-radius: 3px;
  background: #ffffff;
  box-shadow:
    0 2px 3px rgba(20, 17, 15, 0.04),
    0 18px 44px rgba(20, 17, 15, 0.09),
    0 44px 100px rgba(20, 17, 15, 0.08);
  isolation: isolate;
}
body.project-page .pi-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* Stage backdrops are neutral steps off the surface: the screenshot is the
   colour on these pages, so the stage must not compete with it. */
body.project-page .pi-stage.stage-1::before {
  right: 0;
  bottom: 0;
  width: 34%;
  height: 100%;
  background: rgba(20, 17, 15, 0.07);
}
body.project-page .pi-stage.stage-2::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: #14110f;
}
body.project-page .pi-stage.stage-3::before {
  top: clamp(28px, 5vw, 72px);
  right: clamp(28px, 5vw, 72px);
  width: clamp(110px, 18vw, 280px);
  aspect-ratio: 1;
  border: 1px solid rgba(20, 17, 15, 0.18);
  border-radius: 50%;
}
body.project-page .pi-media.is-mobile .pi-stage {
  min-height: clamp(600px, 59vw, 860px);
  padding: clamp(34px, 5vw, 76px);
}
body.project-page .pi-media.is-desktop .pi-stage {
  min-height: clamp(360px, 46vw, 760px);
  padding: clamp(30px, 5vw, 76px);
}
body.project-page .device-frame {
  position: relative;
  z-index: 1;
  width: min(58%, 390px);
  padding: clamp(7px, 0.72vw, 11px);
  overflow: hidden;
  border: 2px solid #14110f;
  border-radius: clamp(30px, 3.2vw, 46px);
  background: #14110f;
  box-shadow:
    0 18px 28px rgba(20, 17, 15, 0.16),
    0 44px 78px rgba(20, 17, 15, 0.18);
  transform: rotate(-1.2deg);
}
body.project-page .pi-media:nth-child(even) .device-frame {
  transform: rotate(1.2deg);
}
body.project-page .device-frame .frame-viewport {
  overflow: hidden;
  border-radius: clamp(23px, 2.7vw, 37px);
  background: #ffffff;
}
body.project-page .device-frame img {
  display: block;
  width: 100%;
  height: auto;
}
body.project-page .desktop-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  border: 2px solid #14110f;
  border-radius: 3px;
  background: #ffffff;
  box-shadow:
    0 14px 26px rgba(20, 17, 15, 0.12),
    0 38px 72px rgba(20, 17, 15, 0.16);
}
body.project-page .desktop-frame-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: clamp(38px, 3.4vw, 52px);
  padding: 0 clamp(14px, 1.6vw, 22px);
  border-bottom: 2px solid #14110f;
  color: #4a3f37;
  font-size: clamp(11px, 0.82vw, 13px);
}
body.project-page .desktop-frame-bar i {
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--yes-coral);
  border-radius: 50%;
}
body.project-page .desktop-frame-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.project-page .desktop-frame-bar b {
  margin-left: auto;
  color: #14110f;
  font-size: 15px;
}
body.project-page .desktop-frame .frame-viewport {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
}
body.project-page .desktop-frame img {
  display: block;
  width: 100%;
  height: auto;
}
body.project-page .pi-media.is-desktop.is-portrait .desktop-frame {
  width: min(72%, 560px);
}
body.project-page .pi-media figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  color: #4a3f37;
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.4;
}
body.project-page .pi-media figcaption span {
  flex: none;
  color: var(--yes-coral);
  font-weight: 700;
}
body.project-page .pi-media figcaption strong {
  max-width: 42ch;
  color: #14110f;
  font-weight: 500;
  text-align: right;
  text-wrap: pretty;
}

/* ============================================================
   SCREENSHOT PRESENTATION: three switchable styles (design review)
   Driven by body[data-imgstyle]. Shared fixes applied to all three:
     · the stage no longer clips tall screens (was overflow:hidden + min-height)
     · the arbitrary decorative blocks are gone
     · the screenshot is the largest thing in the section
   Once a style is picked, promote it to the default and delete the rest.
   ============================================================ */

/* --- shared: unclip and de-chrome the stage in every switchable style --- */
body.project-page[data-imgstyle] .pi-stage {
  overflow: visible;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.project-page[data-imgstyle] .pi-stage::before { content: none; }
body.project-page[data-imgstyle] .pi-media.is-mobile .pi-stage,
body.project-page[data-imgstyle] .pi-media.is-desktop .pi-stage {
  min-height: 0;
  padding: 0;
}
/* the screenshot itself carries the frame now */
body.project-page[data-imgstyle] .device-frame,
body.project-page[data-imgstyle] .desktop-frame {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: clamp(18px, 2vw, 30px);
  background: transparent;
  box-shadow:
    0 2px 4px rgba(20, 17, 15, 0.06),
    0 22px 50px rgba(20, 17, 15, 0.13),
    0 60px 120px rgba(20, 17, 15, 0.1);
  overflow: hidden;
}
/* the fake browser toolbar is skeuomorphic noise: the screenshot speaks */
body.project-page[data-imgstyle] .desktop-frame-bar { display: none; }
body.project-page[data-imgstyle] .frame-viewport { overflow: visible; }
body.project-page[data-imgstyle] .device-frame img,
body.project-page[data-imgstyle] .desktop-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- A · BARE SCREENS (default): screens sit on the page, nothing competes --- */
body.project-page[data-imgstyle="bare"] .pi-row {
  align-items: start;
  gap: clamp(28px, 5vw, 90px);
}
body.project-page[data-imgstyle="bare"] .pi-media.is-mobile .device-frame {
  width: min(100%, 460px);
  margin-inline: auto;
}
body.project-page[data-imgstyle="bare"] .pi-media.is-desktop .desktop-frame {
  width: 100%;
}

/* --- B · DARK BAND: full-bleed dark section, screens glow against it --- */
body.project-page[data-imgstyle="dark"] .project-images {
  padding: clamp(64px, 9vw, 140px) 0;
  background: #14110f;
}
body.project-page[data-imgstyle="dark"] .pi-row {
  align-items: start;
  gap: clamp(28px, 5vw, 90px);
}
body.project-page[data-imgstyle="dark"] .pi-media.is-mobile .device-frame {
  width: min(100%, 440px);
  margin-inline: auto;
}
body.project-page[data-imgstyle="dark"] .device-frame,
body.project-page[data-imgstyle="dark"] .desktop-frame {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 30px 70px rgba(0, 0, 0, 0.55);
}
body.project-page[data-imgstyle="dark"] .pi-media figcaption strong { color: #f5f1e8; }
body.project-page[data-imgstyle="dark"] .pi-media figcaption span { color: var(--yes-coral); }

/* --- C · OVERLAPPING: one composed cluster instead of separate cards.
   The row is a 12-col grid, so the overlap comes from columns that share
   tracks (1/8 and 6/-1): not margins, which a grid would ignore. --- */
body.project-page[data-imgstyle="stack"] .pi-row.is-two {
  align-items: end;
  gap: 0;
}
body.project-page[data-imgstyle="stack"] .pi-row.is-two > .pi-media:nth-child(1) {
  grid-column: 1 / 8;
  grid-row: 1;
  z-index: 2;
  transform: translateY(clamp(-64px, -4.5vw, -24px));
}
body.project-page[data-imgstyle="stack"] .pi-row.is-two > .pi-media:nth-child(2) {
  grid-column: 6 / -1;
  grid-row: 1;
  z-index: 1;
}
body.project-page[data-imgstyle="stack"] .pi-media.is-mobile .device-frame {
  width: min(100%, 430px);
  margin-inline: auto;
}
/* the front screen needs breathing room so the pair reads as a cluster */
body.project-page[data-imgstyle="stack"] .pi-row.is-two > .pi-media:nth-child(1) .device-frame {
  margin-left: 0;
}
/* the overlapped screen needs an edge to read against its neighbour */
body.project-page[data-imgstyle="stack"] .pi-row.is-two .device-frame,
body.project-page[data-imgstyle="stack"] .pi-row.is-two .desktop-frame {
  outline: 1px solid rgba(234, 230, 221, 0.9);
  outline-offset: 0;
}
@media (max-width: 900px) {
  body.project-page[data-imgstyle="stack"] .pi-row.is-two { align-items: start; gap: 36px; }
  body.project-page[data-imgstyle="stack"] .pi-row.is-two > .pi-media:nth-child(1),
  body.project-page[data-imgstyle="stack"] .pi-row.is-two > .pi-media:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: auto;
    transform: none;
  }
}

/* --- D · SCREEN + STORY: every screen sits beside what it actually does.
   Rows alternate sides so the page has rhythm instead of a flat gallery. --- */
body.project-page[data-imgstyle="story"] .pi-row,
body.project-page[data-imgstyle="story"] .pi-row.is-two,
body.project-page[data-imgstyle="story"] .pi-row.is-full,
body.project-page[data-imgstyle="story"] .pi-row.is-right,
body.project-page[data-imgstyle="story"] .pi-row.is-left {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 9vw, 150px);
  margin-bottom: clamp(72px, 9vw, 150px);
}
body.project-page[data-imgstyle="story"] .pi-row > .pi-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
/* alternate: even screens flip to the right so the eye zig-zags down */
body.project-page[data-imgstyle="story"] .pi-row > .pi-media:nth-child(even) {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}
body.project-page[data-imgstyle="story"] .pi-row > .pi-media:nth-child(even) .pi-stage { order: 2; }
body.project-page[data-imgstyle="story"] .pi-row > .pi-media:nth-child(even) figcaption { order: 1; }
body.project-page[data-imgstyle="story"] .pi-media.is-mobile .device-frame {
  width: min(100%, 400px);
}
body.project-page[data-imgstyle="story"] .pi-media:nth-child(even) .device-frame { margin-left: auto; }
/* the story block: a short claim, then the plain-English what-it-does */
body.project-page[data-imgstyle="story"] .pi-media figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  text-align: left;
}
body.project-page[data-imgstyle="story"] .pi-media figcaption span {
  order: -1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yes-coral);
}
body.project-page[data-imgstyle="story"] .pi-media figcaption strong {
  max-width: 18ch;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: left;
  text-wrap: balance;
}
body.project-page[data-imgstyle="story"] .pi-media figcaption em {
  max-width: 46ch;
  color: #4a3f37;
  font-size: clamp(15px, 1.15vw, 17px);
  font-style: normal;
  line-height: 1.6;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  body.project-page[data-imgstyle="story"] .pi-row > .pi-media,
  body.project-page[data-imgstyle="story"] .pi-row > .pi-media:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body.project-page[data-imgstyle="story"] .pi-row > .pi-media:nth-child(even) .pi-stage { order: 0; }
  body.project-page[data-imgstyle="story"] .pi-row > .pi-media:nth-child(even) figcaption { order: 1; }
  body.project-page[data-imgstyle="story"] .pi-media .device-frame,
  body.project-page[data-imgstyle="story"] .pi-media:nth-child(even) .device-frame {
    margin-inline: auto;
  }
}

/* --- the decisions list: the calls made and why, under Solution --- */
body.project-page .project-decisions {
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
body.project-page .project-decisions li {
  display: grid;
  gap: 5px;
  padding-left: 16px;
  border-left: 2px solid var(--yes-coral);
}
body.project-page .project-decisions strong {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  color: #14110f;
}
body.project-page .project-decisions span {
  color: #4a3f37;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ============================================================
   CARD DECK: screens + decisions as cards that reveal and drift on scroll.
   Replaces the long vertical gallery. Sits after the quote.
   ============================================================ */
body.project-page .project-deck {
  padding: clamp(72px, 12vw, 160px) 0 clamp(60px, 9vw, 130px);
  background: #eae6dd;
}
/* .project-shell is only sized inside .project-hero/.project-images, so the
   deck needs its own gutter or the cards run to the viewport edge. */
body.project-page .project-deck .project-shell {
  width: min(100% - 96px, 1500px);
  margin: 0 auto;
}
@media (max-width: 900px) {
  body.project-page .project-deck .project-shell { width: min(100% - 48px, 820px); }
}
body.project-page .pd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 34px);
  align-items: start;
}
body.project-page .pd-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 2px 3px rgba(20, 17, 15, 0.04),
    0 14px 34px rgba(20, 17, 15, 0.08),
    0 40px 80px rgba(20, 17, 15, 0.06);
  /* reveal state; JS adds .is-in when the card scrolls into view */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
body.project-page .pd-card.is-in { opacity: 1; transform: translateY(0); }
/* screen cards lead the deck and run taller */
body.project-page .pd-card.is-screen { grid-row: span 2; }
body.project-page .pd-shot {
  padding: 0;
  border: 0;
  background: #f2efe8;
  overflow: hidden;
}
body.project-page .pd-shot img {
  display: block;
  width: 100%;
  height: auto;
}
body.project-page .pd-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2vw, 28px);
}
body.project-page .pd-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yes-coral);
}
body.project-page .pd-card h3 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #14110f;
  text-wrap: balance;
}
body.project-page .pd-card p {
  margin: 0;
  color: #4a3f37;
  font-size: clamp(14px, 1.02vw, 15.5px);
  line-height: 1.62;
  text-wrap: pretty;
}
@media (max-width: 1080px) {
  body.project-page .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  body.project-page .pd-grid { grid-template-columns: 1fr; gap: 18px; }
  body.project-page .pd-card.is-screen { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  body.project-page .pd-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   BUILD STORY: one sticky split card at a time.
   Warrantly uses this review direction while the other projects retain the
   existing deck. Each incoming card replaces and gently recedes the last.
   ============================================================ */
body.project-page .project-build-story {
  padding: clamp(88px, 12vw, 168px) 0 clamp(112px, 16vw, 220px);
  background: #eae6dd;
}
body.project-page .project-build-story > .project-shell {
  width: min(100% - 96px, 1380px);
  margin: 0 auto;
}
body.project-page .pbs-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 0 clamp(64px, 9vw, 120px);
  text-align: center;
}
body.project-page .pbs-intro > .pbs-kicker {
  text-align: center;
}
body.project-page .pbs-kicker {
  display: block;
  color: var(--yes-coral);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
body.project-page .pbs-intro h2 {
  max-width: 11ch;
  margin: 14px 0 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.4rem, 7.5vw, 8.2rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
body.project-page .pbs-intro > p {
  max-width: 760px;
  margin: clamp(14px, 1.2vw, 18px) auto 0;
  padding: 0;
  border: 0;
  color: #4a3f37;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.48;
  text-align: center;
  text-wrap: pretty;
}
body.project-page .pbs-stack {
  position: relative;
}
body.project-page .pbs-card {
  /* The card's effective height, and the plate's inset, published as values the
     media inside can be measured against. */
  --pbs-h: max(min(76svh, 780px), 720px);
  --pbs-pad: clamp(26px, 3.2vw, 54px);
  position: sticky;
  top: clamp(82px, 9svh, 112px);
  z-index: calc(2 + var(--pbs-index));
  display: grid;
  grid-template-columns: minmax(350px, 0.86fr) minmax(0, 1.14fr);
  height: min(76svh, 780px);
  min-height: 720px;
  margin: 0 0 clamp(112px, 16svh, 190px);
  overflow: hidden;
  border-radius: clamp(22px, 2.2vw, 32px);
  background: #f5f1e8;
  box-shadow:
    0 2px 4px rgba(20, 17, 15, 0.05),
    0 20px 52px rgba(20, 17, 15, 0.11),
    0 70px 130px rgba(20, 17, 15, 0.09);
  transform-origin: 50% 0%;
  will-change: transform;
}
body.project-page .pbs-card:last-child {
  margin-bottom: 0;
}
/* The plate carries the screenshot's own background tone (--pbs-tint, sampled
   per image into items.json), not a flat black. The image then sits on it with
   room to breathe and a real shadow, so it reads as lifted rather than pasted. */
body.project-page .pbs-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: var(--pbs-pad) clamp(20px, 2.6vw, 44px);
  background: var(--pbs-tint, #14110f);
}
/* The bound has to be absolute. A percentage height resolves against the grid
   row, which is auto-sized to its own content, so the image sized itself from
   its width instead and grew the row past the card — cropping the mockup. */
body.project-page .pbs-visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--pbs-h) - 2 * var(--pbs-pad));
  object-fit: contain;
  border-radius: clamp(10px, 1vw, 16px);
  box-shadow:
    0 2px 6px rgba(20, 17, 15, 0.1),
    0 18px 40px rgba(20, 17, 15, 0.16),
    0 44px 90px rgba(20, 17, 15, 0.14);
}

/* Art that already carries its own device frame sits on transparent corners,
   where a box shadow would trace the bounding box instead of the bezel. */
body.project-page .pbs-visual img.has-frame {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 18px 34px rgba(20, 17, 15, 0.22));
}

/* Bare phone captures get the device drawn around them, so the three mobile
   products read the same whether the bezel is in the art or in CSS. It shrink
   wraps the image, and the image keeps the absolute bound — minus this bezel —
   so the whole device still fits the plate. */
body.project-page .pbs-device {
  --pbs-bezel: clamp(8px, 0.85vw, 13px);
  display: inline-flex;
  padding: var(--pbs-bezel);
  border-radius: clamp(34px, 3.5vw, 54px);
  background: #14110f;
  box-shadow:
    0 0 0 1px rgba(245, 241, 232, 0.08) inset,
    0 2px 6px rgba(20, 17, 15, 0.12),
    0 18px 40px rgba(20, 17, 15, 0.2),
    0 44px 90px rgba(20, 17, 15, 0.16);
}

body.project-page .pbs-device img {
  max-height: calc(var(--pbs-h) - 2 * var(--pbs-pad) - 2 * var(--pbs-bezel));
  border-radius: clamp(26px, 2.7vw, 42px);
  box-shadow: none;
}

/* On a dark plate the bezel, the plate, and a dark UI are three near-blacks,
   so the device gets a rim to read as an object rather than a silhouette. */
body.project-page .pbs-card.is-dark-plate .pbs-device {
  box-shadow:
    0 0 0 1px rgba(245, 241, 232, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 20px 44px rgba(0, 0, 0, 0.46),
    0 48px 96px rgba(0, 0, 0, 0.4);
}
body.project-page .pbs-card.is-landscape {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
}
body.project-page .pbs-card.is-landscape .pbs-visual {
  padding: var(--pbs-pad) clamp(20px, 2.5vw, 44px);
}
body.project-page .pbs-card.is-landscape .pbs-visual img {
  width: min(100%, 720px);
  height: auto;
  max-width: 100%;
  max-height: calc(var(--pbs-h) - 2 * var(--pbs-pad));
}
body.project-page .pbs-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(34px, 4.5vw, 72px);
  background: #f5f1e8;
}
body.project-page .pbs-copy h3 {
  width: 100%;
  max-width: none;
  margin: 13px 0 18px;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.2rem, 3.35vw, 4.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
body.project-page .pbs-note {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #4a3f37;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.58;
  text-wrap: pretty;
}
body.project-page .pbs-problem-solution {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(22px, 2.5vw, 34px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid rgba(20, 17, 15, 0.22);
}
body.project-page .pbs-problem-solution section {
  padding-left: 16px;
  border-left: 3px solid var(--yes-coral);
}
body.project-page .pbs-problem-solution h4 {
  margin: 0;
  color: #14110f;
  font-size: clamp(15px, 1.06vw, 17px);
  font-weight: 700;
  line-height: 1.35;
}
body.project-page .pbs-problem-solution p {
  max-width: 64ch;
  margin: 6px 0 0;
  color: #4a3f37;
  font-size: clamp(13px, 0.9vw, 14.5px);
  line-height: 1.5;
  text-wrap: pretty;
}
body.project-page .pbs-reasoning {
  margin-top: clamp(26px, 3vw, 42px);
  padding-top: clamp(22px, 2.5vw, 34px);
  border-top: 1px solid rgba(20, 17, 15, 0.22);
}
body.project-page .pbs-reasoning ul {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}
body.project-page .pbs-reasoning li {
  padding-left: 15px;
  border-left: 3px solid var(--yes-coral);
}
body.project-page .pbs-reasoning strong {
  display: block;
  color: #14110f;
  font-size: clamp(15px, 1.06vw, 17px);
  line-height: 1.35;
}
body.project-page .pbs-reasoning li p {
  max-width: 60ch;
  margin: 6px 0 0;
  color: #4a3f37;
  font-size: clamp(13px, 0.92vw, 15px);
  line-height: 1.55;
  text-wrap: pretty;
}
@media (max-width: 980px) {
  body.project-page .project-build-story > .project-shell {
    width: min(100% - 48px, 900px);
  }
  body.project-page .pbs-card {
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
  }
  body.project-page .pbs-card.is-landscape {
    grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
  }
  body.project-page .pbs-copy {
    padding: clamp(30px, 4vw, 48px);
  }
}
@media (max-width: 760px) {
  body.project-page .project-build-story {
    padding: 76px 0 104px;
  }
  body.project-page .project-build-story > .project-shell {
    width: min(100% - 32px, 600px);
  }
  body.project-page .pbs-intro {
    display: flex;
    margin-bottom: 48px;
  }
  body.project-page .pbs-intro h2 {
    max-width: 9.5ch;
  }
  body.project-page .pbs-intro > p {
    max-width: 560px;
    margin: 16px 0 0;
    padding-top: 0;
  }
  body.project-page .pbs-card {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    margin-bottom: 28px;
    border-radius: 22px;
    transform: none !important;
  }
  body.project-page .pbs-card.is-landscape {
    grid-template-columns: 1fr;
  }
  body.project-page .pbs-visual {
    min-height: 440px;
    padding: 24px 0;
  }
  body.project-page .pbs-visual img {
    width: min(76%, 270px);
    height: auto;
    max-height: 52svh;
  }
  /* The width rule above is a percentage of the image's parent. Once a bare
     capture is wrapped in a device that shrink-wraps its content, those two
     size off each other and the frame ends up wider than the screen inside it.
     Below this width the device carries the size and the image fills it. */
  body.project-page .pbs-device {
    width: min(76%, 270px);
    max-width: 100%;
  }
  body.project-page .pbs-device img {
    width: 100%;
    max-height: none;
  }
  body.project-page .pbs-card.is-landscape .pbs-visual {
    min-height: 280px;
    padding: 24px 16px;
  }
  body.project-page .pbs-card.is-landscape .pbs-visual img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  body.project-page .pbs-copy {
    padding: 30px 24px 36px;
  }
  body.project-page .pbs-copy h3 {
    font-size: clamp(2.3rem, 11vw, 3.8rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.project-page .pbs-card {
    position: relative;
    top: auto;
    transform: none !important;
  }
}

/* ---- PROJECT CONCLUSION ---- */
body.project-page .project-conclusion {
  display: grid;
  place-items: center;
  min-height: 76svh;
  padding: clamp(96px, 15vw, 200px) 0;
  background: #eae6dd;
  text-align: center;
}
body.project-page .project-conclusion .project-shell {
  width: min(100% - 48px, 1100px);
  margin: 0 auto;
}
body.project-page .project-conclusion h2 {
  max-width: 10ch;
  margin: 0 auto;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.2rem, 10vw, 10.5rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
body.project-page .project-conclusion p {
  max-width: 720px;
  margin: clamp(28px, 3vw, 44px) auto 0;
  color: #4a3f37;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.5;
  text-wrap: pretty;
}
body.project-page .project-conclusion a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: clamp(30px, 3.5vw, 48px);
  padding: 0 24px;
  border-radius: 999px;
  background: #14110f;
  color: #f5f1e8;
  font-size: 15px;
  font-weight: 700;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
body.project-page .project-conclusion a:hover {
  background: var(--yes-coral);
  color: #14110f;
  transform: translateY(-2px);
}
body.project-page .project-conclusion a:focus-visible {
  outline: 3px solid var(--yes-coral);
  outline-offset: 4px;
}
@media (max-width: 640px) {
  body.project-page .project-conclusion {
    min-height: 70svh;
    padding: 92px 0 112px;
  }
  body.project-page .project-conclusion h2 {
    font-size: clamp(3.8rem, 18vw, 6.2rem);
  }
}

/* --- the switcher control itself (delete with the styles above) --- */
.pi-style-switch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #14110f;
  color: #f5f1e8;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(20, 17, 15, 0.3);
}
.pi-style-switch label { letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.pi-style-switch select {
  padding: 6px 10px;
  border: 1px solid rgba(245, 241, 232, 0.3);
  border-radius: 999px;
  background: transparent;
  color: #f5f1e8;
  font: inherit;
  cursor: pointer;
}
.pi-style-switch select option { color: #14110f; }

/* ---- QUOTE ----
   The page's one intentional inverted moment: a dark band, not a coral field.
   Coral stays an accent (the mark below), never a full surface. */
body.project-page .project-quote {
  padding: clamp(120px, 22svh, 280px) 0;
  background: #14110f;
  color: #f5f1e8;
  text-align: center;
}
body.project-page .project-quote blockquote::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  background: var(--yes-coral);
}
body.project-page .project-quote blockquote {
  width: min(90vw, 1300px);
  margin: 0 auto;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.8rem, 6vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ---- NEXT PROJECT (cream gap above, near full-screen image) ---- */
body.project-page .project-next {
  padding: clamp(80px, 16svh, 220px) 0 0;
  background: #eae6dd;
}
body.project-page .project-next-link {
  position: relative;
  display: grid;
  min-height: min(94svh, 1100px);
  overflow: hidden;
  background: #14110f;
  color: #fff;
  isolation: isolate;
}
body.project-page .project-next-link img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: transform 0.8s var(--ease-out), opacity 0.4s ease;
}
body.project-page .project-next-link.is-mobile img {
  object-fit: contain;
  object-position: center;
  padding: clamp(32px, 7vw, 110px);
}
body.project-page .project-next-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 17, 15, 0.58);
}
body.project-page .project-next-link:hover img { opacity: 0.62; transform: scale(1.05); }
body.project-page .project-next-link-content {
  align-self: center;
  justify-self: center;
  padding: clamp(40px, 6vw, 80px);
  text-align: center;
}
body.project-page .project-next-link-content > span:first-child {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.project-page .project-next-link strong {
  display: block;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.4rem, 12vw, 14rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
body.project-page .project-next-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: clamp(26px, 3.4vw, 44px);
  padding: 0 30px;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 600;
  text-transform: uppercase;
}
/* flowing char-roll fill (same gesture as the homepage buttons) */
body.project-page .project-next-action .btn-animate-chars__bg {
  background: #fff;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1), background 0.4s ease;
}
body.project-page .project-next-action .btn-animate-chars__text {
  color: #14110f;
  transition: color 0.4s ease;
}
/* hover anywhere on the card triggers the button's flow + turns it red */
body.project-page .project-next-link:hover .project-next-action .btn-animate-chars__bg {
  inset: 0.125em;
  background: var(--yes-coral);
}
body.project-page .project-next-link:hover .project-next-action .btn-animate-chars__text {
  color: #fff;
}
body.project-page .project-next-link:hover .project-next-action [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

/* ---- GSAP reveal pre-hide (only when JS is driving animation) ---- */
html.gsap-on body.project-page .project-hero .project-meta,
html.gsap-on body.project-page .project-hero .project-title,
html.gsap-on body.project-page .project-hero .project-summary,
html.gsap-on body.project-page .ov-big,
html.gsap-on body.project-page .ov-kicker,
html.gsap-on body.project-page .ov-script,
html.gsap-on body.project-page .project-brief-item,
html.gsap-on body.project-page .pi-media,
html.gsap-on body.project-page .project-quote blockquote,
html.gsap-on body.project-page .project-conclusion h2,
html.gsap-on body.project-page .project-conclusion p,
html.gsap-on body.project-page .project-conclusion a,
html.gsap-on body.project-page .work-with-me .wwm-kicker,
html.gsap-on body.project-page .work-with-me .wwm-title,
html.gsap-on body.project-page .work-with-me .wwm-cta,
html.gsap-on body.project-page .project-next-label,
html.gsap-on body.project-page .project-next-link {
  opacity: 0;
}

/* ---- BARBA page-transition veil ---- */
.barba-veil {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #14110f;
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  body.project-page .project-hero .project-shell { padding: 130px 0 80px; }
  body.project-page .project-title { font-size: clamp(5.4rem, 19vw, 11rem); }
  body.project-page .project-summary { max-width: 84vw; }
  body.project-page .project-overview-grid { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 64px); width: min(100% - 48px, 760px); }
  body.project-page .project-overview-title { position: static; }
  body.project-page .ov-big { font-size: clamp(4rem, 16vw, 7rem); }
  body.project-page .ov-script { font-size: clamp(4.4rem, 17vw, 7.5rem); }
  body.project-page .project-images .project-shell { width: min(100% - 48px, 820px); }
  body.project-page .pi-row { grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; }
  body.project-page .pi-row.is-full > .pi-media,
  body.project-page .pi-row.is-split > .pi-media,
  body.project-page .pi-row.is-two > .pi-media,
  body.project-page .pi-row.is-left > .pi-media,
  body.project-page .pi-row.is-right > .pi-media { grid-column: 1 / -1; margin-top: 0; }
  body.project-page .pi-media.is-mobile .pi-stage { min-height: 680px; }
  body.project-page .pi-media.is-desktop .pi-stage { min-height: 440px; padding: 36px; }
  body.project-page .pi-media.is-desktop.is-portrait .desktop-frame { width: min(68%, 520px); }
  body.project-page .project-quote { padding: 110px 0; }
  body.project-page .project-next-link { min-height: 70svh; }
}

@media (max-width: 640px) {
  body.project-page .project-hero .project-shell { padding: 116px 0 64px; }
  body.project-page .project-title { font-size: clamp(4rem, 22vw, 7rem); }
  body.project-page .project-summary { width: min(88vw, 440px); font-size: 17px; margin-top: 22px; }
  body.project-page .project-overview { padding: 80px 0; }
  body.project-page .ov-big { font-size: clamp(3.4rem, 18vw, 5rem); }
  body.project-page .ov-script { font-size: clamp(3.8rem, 19vw, 5.4rem); }
  body.project-page .project-brief-item h3 { font-size: clamp(2rem, 9vw, 3rem); }
  body.project-page .project-brief-item p { font-size: 17px; }
  body.project-page .project-images { padding: 18px 0; }
  body.project-page .project-images .project-shell { width: min(100% - 32px, 540px); }
  body.project-page .pi-row { gap: 28px; margin-bottom: 28px; }
  body.project-page .pi-media.is-mobile .pi-stage { min-height: 520px; padding: 28px 20px; }
  body.project-page .pi-media.is-desktop .pi-stage { min-height: 280px; padding: 18px; }
  body.project-page .device-frame { width: min(72%, 280px); }
  body.project-page .pi-media.is-desktop.is-portrait .desktop-frame { width: min(76%, 330px); }
  body.project-page .pi-media figcaption { gap: 12px; margin-top: 11px; }
  body.project-page .pi-media figcaption strong { max-width: 26ch; }
  body.project-page .project-quote blockquote { font-size: clamp(2.4rem, 11vw, 4rem); }
  body.project-page .project-next-link strong { font-size: clamp(3.4rem, 18vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html.gsap-on body.project-page .project-hero .project-meta,
  html.gsap-on body.project-page .project-hero .project-title,
  html.gsap-on body.project-page .project-hero .project-summary,
  html.gsap-on body.project-page .ov-big,
  html.gsap-on body.project-page .ov-kicker,
  html.gsap-on body.project-page .ov-script,
  html.gsap-on body.project-page .project-brief-item,
  html.gsap-on body.project-page .pi-media,
  html.gsap-on body.project-page .project-quote blockquote,
  html.gsap-on body.project-page .project-conclusion h2,
  html.gsap-on body.project-page .project-conclusion p,
  html.gsap-on body.project-page .project-conclusion a,
  html.gsap-on body.project-page .work-with-me .wwm-kicker,
  html.gsap-on body.project-page .work-with-me .wwm-title,
  html.gsap-on body.project-page .work-with-me .wwm-cta,
  html.gsap-on body.project-page .project-next-label,
  html.gsap-on body.project-page .project-next-link { opacity: 1; }
  body.project-page:not(.gsap-on) .project-hero .project-meta,
  body.project-page:not(.gsap-on) .project-hero .project-title,
  body.project-page:not(.gsap-on) .project-hero .project-summary { opacity: 1; transform: none; animation: none; }
}

/* ── CONTENT HUB: VEDONAI / BLOG / LIBRARY ───────────────── */
body.content-page {
  background: #eae6dd;
  color: #14110f;
}

@media (min-width: 981px) {
  /* Minimal MENU-pill nav on content pages too (matches the homepage):
     hide the inline links and let the base light-hero MENU pill show. */
  body.content-page .desktop-nav {
    display: none;
  }
}

body.content-page .content-main {
  overflow: hidden;
}

body.content-page .content-shell {
  width: min(100% - clamp(36px, 6vw, 96px), 1500px);
  margin: 0 auto;
}

body.content-page .content-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(130px, 16svh, 190px) 0 clamp(72px, 11svh, 140px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 82, 53, 0.12), transparent 24%),
    linear-gradient(180deg, #eae6dd 0%, #eae6dd 58%, #efb6a0 82%, #f05235 100%);
  text-align: center;
}

body.content-page .content-hero::before {
  content: "AI";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(-3deg);
  color: rgba(20, 17, 15, 0.045);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: min(44vw, 52rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  pointer-events: none;
  user-select: none;
}

body.vedonai-page .content-hero::before { content: "VED"; }
body.blog-page .content-hero::before { content: "BLOG"; font-size: min(34vw, 43rem); }
body.library-page .content-hero::before { content: "LIB"; }

body.content-page .content-hero .content-shell {
  position: relative;
  z-index: 1;
}

body.content-page .content-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 46px);
}

body.content-page .content-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.46em 0.76em;
  border: 1px solid rgba(20, 17, 15, 0.7);
  border-radius: 5px;
  color: #14110f;
  font-size: clamp(12px, 0.95vw, 16px);
  line-height: 1;
  text-transform: uppercase;
}

body.content-page .content-kicker {
  margin: 0 0 clamp(20px, 2.4vw, 34px);
  color: rgba(20, 17, 15, 0.62);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.2;
  text-transform: uppercase;
}

body.content-page .content-title,
body.content-page .article-hero h1,
body.content-page .resource-hero h1 {
  max-width: 1260px;
  margin: 0 auto;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.3rem, 11vw, 13.5rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.055em;
  word-spacing: 0.055em;
  text-transform: uppercase;
  text-wrap: balance;
}

body.content-page .article-hero h1,
body.content-page .resource-hero h1 {
  letter-spacing: -0.04em;
  word-spacing: 0.08em;
}

body.content-page .content-summary,
body.content-page .article-hero > p,
body.content-page .resource-hero > p {
  width: min(100%, 780px);
  margin: clamp(34px, 4vw, 60px) auto 0;
  color: rgba(20, 17, 15, 0.78);
  font-size: clamp(19px, 1.55vw, 27px);
  line-height: 1.34;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

body.content-page .content-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(34px, 4.5vw, 62px);
}

body.content-page .content-btn {
  min-height: 58px;
  padding: 0 28px;
  border-radius: 6px;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1;
  text-transform: uppercase;
}

body.content-page .content-btn-dark {
  color: #fff;
}

body.content-page .content-btn-dark .btn-animate-chars__bg {
  background: #14110f;
}

body.content-page .content-btn-light {
  color: #14110f;
}

body.content-page .content-btn-light .btn-animate-chars__bg {
  background: #fff;
}

body.content-page .content-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 17, 15, 0.45);
  color: #14110f;
  transition: background 0.28s ease, color 0.28s ease, transform 0.28s var(--ease-out);
}

body.content-page .content-btn-ghost:hover {
  background: #14110f;
  color: #fff;
  transform: translateY(-2px);
}

body.content-page .content-section {
  padding: clamp(90px, 14svh, 180px) 0;
  background: #eae6dd;
}

body.content-page .content-section.is-dark {
  background: #14110f;
  color: #fff;
}

body.content-page .content-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
  margin-bottom: clamp(36px, 6vw, 82px);
}

body.content-page .content-section-head h2,
body.content-page .split-cta h2 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.6rem, 7.8vw, 10rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

body.content-page .content-section-head p,
body.content-page .split-copy p {
  max-width: 680px;
  margin: 0;
  color: rgba(20, 17, 15, 0.7);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.42;
  letter-spacing: -0.02em;
}

body.content-page .is-dark .content-section-head p,
body.content-page .is-dark .split-copy p,
body.content-page .is-dark .content-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.hub-grid,
.article-grid,
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 26px);
}

.hub-card,
.article-card,
.resource-card {
  position: relative;
  display: flex;
  min-height: clamp(280px, 23vw, 390px);
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(24px, 2.4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(20, 17, 15, 0.26);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.36);
  color: #14110f;
  transition: transform 0.42s var(--ease-out), background 0.28s ease, border-color 0.28s ease;
}

.hub-card:hover,
.article-card:hover,
.resource-card:hover {
  transform: translateY(-7px);
  border-color: rgba(20, 17, 15, 0.7);
  background: #fff;
}

.hub-card span,
.article-tag,
.resource-badge,
.offer-row span {
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: clamp(2.1rem, 3.1vw, 4rem);
  font-weight: 700;
  line-height: 0.8;
}

.hub-card strong,
.article-card strong,
.resource-card strong,
.offer-row strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.4rem, 4.2vw, 5.7rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hub-card p,
.article-card p,
.resource-card p,
.offer-row p {
  margin: 0;
  color: rgba(20, 17, 15, 0.72);
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.article-card em,
.resource-card em {
  color: rgba(20, 17, 15, 0.55);
  font-size: 14px;
  font-style: normal;
  text-transform: uppercase;
}

.article-card.is-featured {
  grid-column: span 2;
}

.resource-grid .resource-card {
  background: #1d1a17;
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.resource-grid .resource-card:hover {
  background: #000;
  border-color: rgba(255, 255, 255, 0.42);
}

.resource-grid .resource-card p,
.resource-grid .resource-card em {
  color: rgba(255, 255, 255, 0.68);
}

.resource-grid-light .resource-card {
  background: rgba(255, 255, 255, 0.36);
  border-color: rgba(20, 17, 15, 0.26);
  color: #14110f;
}

.resource-grid-light .resource-card:hover {
  background: #fff;
  border-color: rgba(20, 17, 15, 0.7);
}

.resource-grid-light .resource-card p,
.resource-grid-light .resource-card em {
  color: rgba(20, 17, 15, 0.68);
}

.resource-badge {
  width: max-content;
  font-family: "Bogdan Montreal", Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  padding: 8px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-transform: uppercase;
}

.resource-badge.is-soon {
  color: #fff;
  background: #f05235;
  border-color: #f05235;
}

.split-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: clamp(34px, 7vw, 120px);
  align-items: center;
}

.split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.offer-list {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.offer-row {
  display: grid;
  grid-template-columns: 0.16fr 0.52fr minmax(0, 1fr);
  gap: clamp(18px, 3vw, 54px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.offer-row strong {
  color: #fff;
}

.offer-row p {
  color: rgba(255, 255, 255, 0.7);
}

body.article-page,
body.resource-page {
  background: #eae6dd;
}

.article-shell,
.resource-shell {
  width: min(100% - clamp(36px, 6vw, 96px), 1120px);
  margin: 0 auto;
  padding: clamp(150px, 18svh, 220px) 0 clamp(90px, 12svh, 150px);
}

.article-hero,
.resource-hero {
  text-align: center;
}

.back-link {
  display: inline-flex;
  margin-bottom: clamp(24px, 3vw, 42px);
  color: rgba(20, 17, 15, 0.62);
  font-size: 15px;
  text-transform: uppercase;
  transition: color 0.2s ease, transform 0.2s var(--ease-out);
}

.back-link:hover {
  color: #f05235;
  transform: translateX(-4px);
}

.article-content,
.resource-content {
  width: min(100%, 780px);
  margin: clamp(64px, 8vw, 110px) auto 0;
  color: rgba(20, 17, 15, 0.78);
}

.article-content .lead {
  color: #14110f;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 1.34;
  letter-spacing: -0.025em;
}

.article-content h2,
.resource-content h2 {
  margin: clamp(46px, 6vw, 72px) 0 14px;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.3rem, 4.6vw, 5.3rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #14110f;
}

.article-content p,
.resource-content p,
.check-list li,
.prompt-list p {
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.56;
  letter-spacing: -0.015em;
}

.article-callout {
  margin: clamp(48px, 6vw, 78px) 0 0;
  padding: clamp(26px, 3vw, 40px);
  background: #14110f;
  color: #fff;
}

.article-callout strong {
  display: block;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2rem, 3.4vw, 4.4rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}

.article-callout p {
  margin: 18px 0 24px;
  color: rgba(255, 255, 255, 0.72);
}

.article-callout a {
  color: #f05235;
  font-size: 16px;
  text-transform: uppercase;
}

.check-list,
.prompt-list {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.check-list {
  padding-left: 1.15em;
}

.check-list li::marker {
  color: #f05235;
  font-weight: 800;
}

.template-block,
.prompt-list article {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(20, 17, 15, 0.18);
  background: rgba(255, 255, 255, 0.42);
}

.template-block p {
  margin: 0;
}

.template-block p + p {
  margin-top: 12px;
}

.prompt-list article h3 {
  margin: 0 0 12px;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.9rem, 3vw, 3.5rem);
  line-height: 0.9;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  body.content-page .content-section-head,
  .split-cta {
    grid-template-columns: 1fr;
  }

  .hub-grid,
  .article-grid,
  .resource-grid {
    grid-template-columns: 1fr;
  }

  .article-card.is-featured {
    grid-column: auto;
  }

  .offer-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.content-page .content-title,
  body.content-page .article-hero h1,
  body.content-page .resource-hero h1 {
    font-size: clamp(3.8rem, 16vw, 8.5rem);
  }
}

@media (max-width: 640px) {
  body.content-page .content-shell,
  .article-shell,
  .resource-shell {
    width: min(100% - 32px, 1120px);
  }

  body.content-page .content-hero {
    min-height: 92svh;
    padding-top: 124px;
  }

  body.content-page .content-summary,
  body.content-page .article-hero > p,
  body.content-page .resource-hero > p {
    font-size: 18px;
  }

  body.content-page .content-actions {
    flex-direction: column;
  }

  body.content-page .content-btn,
  body.content-page .content-btn-ghost {
    width: 100%;
  }

  .hub-card,
  .article-card,
  .resource-card {
    min-height: 250px;
  }

  .article-shell,
  .resource-shell {
    padding-top: 124px;
  }
}

/* ── CONTENT HUB REFINEMENT: BLOG + MARKETPLACE LIBRARY ───── */
body.blog-page {
  background: #eae6dd;
}

body.blog-page .content-main {
  background: transparent;
  /* override content-page's overflow:hidden, which would disable the sticky
     left rail. clip still contains stray horizontal bleed without creating a
     scroll container. */
  overflow: clip;
}

body.blog-page .content-hero.blog-editorial-hero {
  min-height: 100svh;
  place-items: stretch;
  padding: clamp(132px, 15svh, 178px) 0 clamp(56px, 7svh, 96px);
  background: transparent;
  text-align: left;
}

body.blog-page .content-hero.blog-editorial-hero::before {
  content: none;
}

.blog-hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100% - clamp(36px, 6vw, 96px), 1580px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.42fr);
  gap: clamp(32px, 5.8vw, 96px);
  align-items: center;
}

.blog-hero-copy {
  max-width: 1140px;
}

body.blog-page .content-meta {
  justify-content: flex-start;
  margin-bottom: clamp(22px, 3vw, 42px);
}

body.blog-page .content-title {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(3.1rem, 7.4vw, 8.2rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  word-spacing: 0.04em;
  text-wrap: balance;
}

body.blog-page .content-summary {
  max-width: 780px;
  margin: clamp(26px, 3.1vw, 44px) 0 0;
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.32;
}

.blog-hero-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 24px);
  padding: clamp(22px, 2.4vw, 38px);
  border: 1px solid rgba(20, 17, 15, 0.22);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.blog-hero-note span,
.blog-feature-copy span {
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: clamp(2.1rem, 2.8vw, 3.7rem);
  font-weight: 700;
  line-height: 0.8;
}

.blog-hero-note strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2rem, 2.6vw, 3.7rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.blog-hero-note p {
  margin: 0;
  color: rgba(20, 17, 15, 0.72);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.48;
  letter-spacing: -0.01em;
}

.blog-hero-note a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #14110f;
  border-radius: 4px;
  color: #14110f;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  transition: background 0.24s ease, color 0.24s ease, transform 0.24s var(--ease-out);
}

.blog-hero-note a:hover {
  background: #14110f;
  color: #fff;
  transform: translateY(-2px);
}

/* hero CTA row */
.blog-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(30px, 3.4vw, 48px);
}
.blog-hero-freelink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #14110f;
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(20, 17, 15, 0.4);
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease-out), border-color 0.25s ease;
}
.blog-hero-freelink:hover { gap: 0.75em; border-color: #f05235; color: #f05235; }

/* taped paper notes cluster (reuses the About polaroid drift engine) */
.blog-hero-notes {
  position: relative;
  align-self: center;
  min-height: clamp(360px, 34vw, 520px);
  perspective: 1200px;
}
.blog-note {
  --scroll-x: 0px; --scroll-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; --extra-rot: 0deg;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 1.3vw, 22px) clamp(16px, 1.3vw, 22px) clamp(20px, 1.6vw, 26px);
  background: #fffdf7;
  box-shadow: 0 24px 54px rgba(20, 17, 15, 0.16);
  transform:
    translate3d(var(--scroll-x), var(--scroll-y), 0)
    rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
    rotate(calc(var(--base-rot, 0deg) + var(--extra-rot)));
  transform-style: preserve-3d;
  will-change: transform;
}
.blog-note-lg { width: clamp(220px, 17vw, 280px); top: 24%; left: 18%; z-index: 3; }
.blog-note-sm { width: clamp(176px, 13vw, 214px); z-index: 2; }
.blog-note-sm:first-child { top: 0; left: -4%; }
.blog-note-sm:last-child { top: 50%; right: 0; z-index: 1; }
.blog-note-tape {
  position: absolute;
  top: -13px; left: 50%;
  width: clamp(58px, 4.4vw, 78px); height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(240, 82, 53, 0.34), rgba(240, 82, 53, 0.16));
  box-shadow: 0 2px 8px rgba(20, 17, 15, 0.08);
}
.blog-note-k {
  color: rgba(20, 17, 15, 0.5);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.blog-note strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.5rem, 1.9vw, 2.2rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #14110f;
}
.blog-note-hand {
  margin-top: 2px;
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: clamp(1.15rem, 1.4vw, 1.5rem);
  font-weight: 700;
  line-height: 0.92;
}

.blog-feature-section,
.blog-index-section,
.blog-cluster-section {
  padding: clamp(78px, 11svh, 150px) 0;
  background: #eae6dd;
}

.blog-feature-section {
  padding-top: clamp(34px, 6svh, 84px);
}

.blog-feature-card {
  position: relative;
  display: grid;
  min-height: clamp(430px, 47vw, 760px);
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(30px, 4vw, 72px);
  border-radius: 2px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.16), transparent 22%),
    linear-gradient(135deg, #14110f 0%, #1f1713 48%, #f05235 170%);
  color: #fff;
}

.blog-feature-card::before {
  content: "AEO";
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  color: rgba(255, 255, 255, 0.045);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: min(34vw, 32rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.blog-feature-copy {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 980px;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(38px, 6vw, 96px);
}

.blog-feature-copy h2 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.1rem, 8.6vw, 12rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.048em;
  text-transform: uppercase;
  text-wrap: balance;
}

.blog-feature-copy p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.38;
  letter-spacing: -0.02em;
}

.blog-feature-copy em {
  width: max-content;
  color: #fff;
  font-size: 15px;
  font-style: normal;
  text-transform: uppercase;
}

.blog-feature-proof {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 12px;
}

.blog-feature-proof span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
  text-transform: uppercase;
}

.blog-feature-proof strong {
  display: block;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: clamp(18px, 1.55vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.blog-section-title {
  display: grid;
  max-width: 1120px;
  margin-bottom: clamp(34px, 5vw, 72px);
  gap: clamp(16px, 2vw, 26px);
}

.blog-section-title h2 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.8rem, 8vw, 10rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.blog-section-title p {
  max-width: 720px;
  margin: 0;
  color: rgba(20, 17, 15, 0.7);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.42;
  letter-spacing: -0.02em;
}

.blog-article-list {
  border-top: 1px solid rgba(20, 17, 15, 0.24);
}

.blog-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.18fr) minmax(0, 0.52fr) minmax(260px, 0.3fr) auto;
  gap: clamp(18px, 3vw, 54px);
  align-items: center;
  padding: clamp(30px, 4.4vw, 62px) 0;
  border-bottom: 1px solid rgba(20, 17, 15, 0.24);
  transition: color 0.24s ease, transform 0.28s var(--ease-out);
}

.blog-row:hover {
  color: #f05235;
  transform: translateX(8px);
}

.blog-row span {
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: clamp(2rem, 2.8vw, 3.7rem);
  font-weight: 700;
  line-height: 0.85;
}

.blog-row strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.7rem, 4.6vw, 6.2rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.blog-row p {
  margin: 0;
  color: rgba(20, 17, 15, 0.68);
  font-size: clamp(16px, 1.18vw, 21px);
  line-height: 1.42;
  letter-spacing: -0.015em;
}

.blog-row em {
  color: rgba(20, 17, 15, 0.62);
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.blog-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.blog-topic {
  min-height: clamp(270px, 20vw, 370px);
  padding: clamp(24px, 2.6vw, 42px);
  border: 1px solid rgba(20, 17, 15, 0.24);
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.24s ease, transform 0.28s var(--ease-out), border-color 0.24s ease;
}

.blog-topic:hover {
  transform: translateY(-6px);
  border-color: rgba(20, 17, 15, 0.62);
  background: rgba(255, 255, 255, 0.56);
}

.blog-topic span {
  display: block;
  margin-bottom: clamp(24px, 3vw, 46px);
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: clamp(2.4rem, 3.5vw, 4.8rem);
  font-weight: 700;
  line-height: 0.8;
}

.blog-topic strong {
  display: block;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.2rem, 3.4vw, 4.4rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.blog-topic p {
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: rgba(20, 17, 15, 0.68);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.48;
}

.blog-resource-cta {
  border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0;
}

body.library-page {
  --nav-bg: #f5f1e8;
  --nav-fg: #050507;
  background: #100d0b;
  color: #f5f1e8;
}

body.library-page.nav-open {
  --nav-bg: #fff;
  --nav-fg: #050507;
}

body.library-page .content-main {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(circle at 8% 4%, rgba(240, 82, 53, 0.34), transparent 28%),
    radial-gradient(circle at 72% -12%, rgba(245, 241, 232, 0.16), transparent 36%),
    linear-gradient(180deg, #20120d 0%, #0d0b0a 42%, #050507 100%);
}

body.library-page .content-main::before {
  content: "LIBRARY";
  position: fixed;
  right: -0.12em;
  top: 22svh;
  z-index: 0;
  color: rgba(245, 241, 232, 0.035);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: min(32vw, 35rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.library-market {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: clamp(112px, 13svh, 148px) clamp(18px, 3.2vw, 58px) clamp(64px, 8svh, 110px);
  color: #f5f1e8;
}

.library-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1840px);
  margin: 0 auto;
}

.library-intro {
  display: block;
  margin-bottom: clamp(34px, 5vw, 70px);
}

.library-kicker {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  color: #f49a7d;
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.library-intro h1 {
  margin: 0;
  max-width: 17ch;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 6.6vw, 8.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.library-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(34px, 4.5vw, 60px);
}

.library-filter span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.065);
  color: rgba(245, 241, 232, 0.78);
  font-size: 14px;
}

.library-filter span:first-child {
  background: #f5f1e8;
  color: #050507;
}

/* interactive filter pills (our coral flavour on the dark marketplace) */
.lib-filter-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 15px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.065);
  color: rgba(245, 241, 232, 0.78);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.lib-filter-btn:hover { border-color: rgba(240, 82, 53, 0.7); color: #fff; }
.lib-filter-btn.is-active {
  background: #f05235;
  border-color: #f05235;
  color: #fff;
}
.market-card.is-hidden { display: none; }

.library-scribble {
  display: inline-block;
  margin-left: 0.5em;
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: clamp(1.4rem, 1.7vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  transform: rotate(-5deg);
  vertical-align: middle;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
}

.market-card {
  position: relative;
  display: flex;
  min-height: 280px;
  flex-direction: column;
  gap: 16px;
  color: #f5f1e8;
  text-decoration: none;
  transition: transform 0.34s var(--ease-out);
}

.market-card:not(.market-cta) {
  padding: 0;
}

.market-card.is-active {
  padding: 12px;
  border: 2px solid rgba(245, 241, 232, 0.82);
  border-radius: 22px;
}

.market-visual {
  position: relative;
  display: block;
  min-height: clamp(190px, 16vw, 310px);
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 46%, hsla(var(--hue), 82%, 58%, 0.22), transparent 20%),
    radial-gradient(circle at 80% 80%, hsla(calc(var(--hue) + 24deg), 88%, 62%, 0.16), transparent 34%),
    radial-gradient(circle at 0% 0%, rgba(240, 82, 53, 0.12), transparent 36%),
    linear-gradient(135deg, #070504, #15100f 48%, #070504);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.market-visual::before,
.market-visual::after,
.market-visual i {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid hsla(var(--hue), 92%, 70%, 0.34);
  filter: drop-shadow(0 0 14px hsla(var(--hue), 92%, 66%, 0.34));
  transform: rotate(calc(var(--i) * 13deg)) scaleX(1.55);
}

.market-visual::after {
  inset: 24%;
  opacity: 0.72;
  transform: rotate(calc(var(--i) * -9deg)) scaleX(1.8);
}

.market-visual i {
  inset: 36%;
  opacity: 0.54;
  transform: rotate(calc(var(--i) * 17deg)) scaleX(2.1);
}

.market-card:hover .market-visual {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 18px 50px rgba(0, 0, 0, 0.28);
}

.market-card:hover {
  transform: translateY(-6px);
}

.market-card:focus-visible {
  outline: 2px solid #f5f1e8;
  outline-offset: 6px;
}

.market-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
}

.market-title-row strong {
  font-size: clamp(19px, 1.35vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.market-title-row em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.12);
  color: rgba(245, 241, 232, 0.82);
  font-size: 14px;
  font-style: normal;
  line-height: 1;
}

.market-title-row em.is-premium {
  background: #f5f1e8;
  color: #050507;
}

.market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 10px;
}

.market-tags small {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(245, 241, 232, 0.1);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.055);
  color: rgba(245, 241, 232, 0.54);
  font-size: 14px;
}

.market-cta {
  justify-content: center;
  min-height: 280px;
  padding: clamp(24px, 2.8vw, 44px);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 82, 53, 0.22), transparent 34%),
    #17110f;
  border: 1px solid rgba(245, 241, 232, 0.14);
}

.market-cta span {
  color: #f49a7d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.market-cta strong {
  max-width: 520px;
  font-size: clamp(22px, 1.8vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.market-cta p,
.market-cta em {
  max-width: 520px;
  margin: 0;
  color: rgba(245, 241, 232, 0.58);
  font-size: 17px;
  line-height: 1.45;
  font-style: normal;
}
.market-cta-link {
  align-self: flex-start;
  margin-top: 4px;
  color: #f49a7d;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(244, 154, 125, 0.5);
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease-out), color 0.25s ease, border-color 0.25s ease;
}
.market-cta-link:hover { color: #fff; border-color: #fff; }

/* ── Masonry library (real media tiles) ───────────────────── */
/* structured catalog grid (defined card bodies, no floating fragments) */
.market-grid.is-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 30px);
}
@media (max-width: 1080px) { .market-grid.is-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .market-grid.is-masonry { grid-template-columns: 1fr; } }

.is-masonry .market-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.1);
  border-radius: 16px;
  background: rgba(245, 241, 232, 0.04);
  transition: transform 0.34s var(--ease-out), border-color 0.3s ease, box-shadow 0.34s ease;
}
.is-masonry .market-card:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 82, 53, 0.55);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.34);
}
.market-grid.is-masonry .market-card.is-hidden { display: none; }

.is-masonry .market-visual {
  aspect-ratio: 16 / 10;
  min-height: 0;
  border-radius: 0;
  background: #15100f;
}
.is-masonry .market-visual::before,
.is-masonry .market-visual::after { content: none; }
.is-masonry .market-visual img,
.is-masonry .market-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.is-masonry .market-title-row { padding: clamp(15px, 1.3vw, 19px) clamp(15px, 1.3vw, 19px) 0; }
.is-masonry .market-tags { padding: 10px clamp(15px, 1.3vw, 19px) 0; }
.is-masonry .market-copy { margin: clamp(14px, 1.4vw, 18px) clamp(15px, 1.3vw, 19px) clamp(15px, 1.3vw, 19px); }

.market-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(240, 82, 53, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.market-price {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.market-price.is-free { background: rgba(20, 17, 15, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); }
.market-price.is-premium { background: rgba(240, 82, 53, 0.92); color: #fff; }
.market-price.is-vault { background: rgba(240, 82, 53, 0.92); color: #fff; }

.market-copy {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(245, 241, 232, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #f5f1e8;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.market-copy:hover,
.market-copy.is-copied {
  background: #f05235;
  border-color: #f05235;
  color: #fff;
}
/* CTA tile sits in the grid as a full card */
.is-masonry .market-cta { padding: clamp(24px, 2.4vw, 38px); }

/* dark CTA band bridges the grid into the cream footer */
body.library-page .library-cta {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(120px, 14vw, 200px);
  background: linear-gradient(180deg, #050507 0%, #0c0a09 100%);
}
body.library-page .site-footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(-72px, -6vw, -44px);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
}

body.resource-page {
  --nav-bg: #fff;
  --nav-fg: #050507;
  background: #050507;
  color: #f5f1e8;
}

body.resource-page .content-main {
  background:
    radial-gradient(circle at 8% 8%, rgba(240, 82, 53, 0.11), transparent 26%),
    radial-gradient(circle at 90% 0%, rgba(65, 120, 255, 0.1), transparent 30%),
    #050507;
}

body.resource-page .resource-shell {
  width: min(100% - clamp(32px, 5vw, 76px), 1520px);
  padding: clamp(112px, 13svh, 150px) 0 clamp(56px, 8svh, 100px);
}

body.resource-page .resource-hero {
  display: grid;
  gap: clamp(22px, 3vw, 42px);
  padding: clamp(16px, 1.4vw, 24px);
  border: 1px solid rgba(245, 241, 232, 0.12);
  border-radius: clamp(22px, 2.4vw, 40px);
  background: rgba(12, 12, 16, 0.96);
  text-align: left;
}

body.resource-page .resource-hero::before {
  content: "";
  display: block;
  min-height: clamp(260px, 44vw, 650px);
  border-radius: clamp(16px, 1.8vw, 28px);
  background:
    radial-gradient(circle at 50% 48%, rgba(45, 237, 170, 0.18), transparent 23%),
    repeating-radial-gradient(ellipse at 50% 55%, rgba(49, 255, 192, 0.26) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, #020905, #052014 44%, #030609);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.resource-page .resource-hero .back-link,
body.resource-page .resource-hero .content-meta,
body.resource-page .resource-hero h1,
body.resource-page .resource-hero > p,
body.resource-page .resource-actions {
  width: min(100% - clamp(20px, 5vw, 84px), 1080px);
  margin-left: auto;
  margin-right: auto;
}

  body.resource-page .resource-hero h1 {
  max-width: 1080px;
  color: #fff;
  font-size: clamp(3.6rem, 8vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
}

body.resource-page .resource-hero > p {
  color: rgba(245, 241, 232, 0.68);
}

body.resource-page .resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(2px, 1vw, 8px);
  padding-bottom: clamp(18px, 2vw, 32px);
}

body.resource-page .resource-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.06);
  color: rgba(245, 241, 232, 0.86);
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.24s var(--ease-out), background 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}

body.resource-page .resource-action:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 241, 232, 0.46);
  background: rgba(245, 241, 232, 0.1);
}

body.resource-page .resource-action.is-primary {
  border-color: #f5f1e8;
  background: #f5f1e8;
  color: #050507;
}

body.resource-page .resource-note {
  color: rgba(245, 241, 232, 0.46);
  font-size: 14px;
  line-height: 1.35;
}

body.resource-page .resource-hero .content-meta {
  justify-content: flex-start;
  margin-bottom: 0;
}

body.resource-page .resource-hero .content-meta span {
  border-color: rgba(245, 241, 232, 0.16);
  color: rgba(245, 241, 232, 0.82);
}

body.resource-page .back-link {
  color: rgba(245, 241, 232, 0.58);
}

body.resource-page .resource-content {
  width: min(100% - clamp(20px, 5vw, 84px), 1080px);
  margin-top: clamp(42px, 5vw, 78px);
  color: rgba(245, 241, 232, 0.7);
}

body.resource-page .resource-content h2,
body.resource-page .prompt-list article h3 {
  color: #fff;
}

body.resource-page .resource-content p,
body.resource-page .check-list li,
body.resource-page .prompt-list p {
  color: rgba(245, 241, 232, 0.7);
}

body.resource-page .resource-content strong,
body.resource-page .check-list strong,
body.resource-page .template-block strong {
  color: #f5f1e8;
}

body.resource-page .template-block,
body.resource-page .prompt-list article,
body.resource-page .article-callout {
  border-color: rgba(245, 241, 232, 0.12);
  background: #151519;
}

body.resource-page .resource-shell-profile .resource-hero::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(102, 155, 255, 0.2), transparent 24%),
    repeating-radial-gradient(ellipse at 50% 52%, rgba(112, 165, 255, 0.26) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #040814, #071f39 46%, #030609);
}

body.resource-page .resource-shell-prompts .resource-hero::before {
  background:
    radial-gradient(circle at 48% 50%, rgba(240, 82, 53, 0.2), transparent 24%),
    repeating-radial-gradient(ellipse at 50% 54%, rgba(255, 136, 92, 0.24) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #170503, #33110a 46%, #050507);
}

@media (max-width: 1180px) {
  .blog-hero-shell,
  .blog-feature-card {
    grid-template-columns: 1fr;
  }

  .blog-hero-notes {
    display: none;
  }

  .blog-hero-note {
    max-width: 680px;
  }

  .blog-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-row {
    grid-template-columns: minmax(110px, 0.18fr) minmax(0, 1fr);
    align-items: start;
  }

  .blog-row p,
  .blog-row em {
    grid-column: 2;
  }

  .blog-feature-proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .blog-feature-proof span {
    grid-column: 1 / -1;
  }

  .market-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .library-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.blog-page .content-title {
    font-size: clamp(3.2rem, 16vw, 6.2rem);
  }

  body.blog-page .content-hero.blog-editorial-hero {
    min-height: auto;
    padding: 116px 0 68px;
  }

  .blog-hero-shell,
  body.blog-page .content-shell {
    width: min(100% - 32px, 1580px);
  }

  .blog-hero-note {
    padding: 22px;
  }

  .blog-feature-section,
  .blog-index-section,
  .blog-cluster-section {
    padding: 64px 0;
  }

  .blog-feature-card {
    min-height: auto;
    padding: 24px;
  }

  .blog-feature-copy {
    gap: 38px;
  }

  .blog-feature-copy h2,
  .blog-section-title h2 {
    font-size: clamp(3rem, 14vw, 5.7rem);
  }

  .blog-feature-proof {
    grid-template-columns: 1fr 1fr;
  }

  .blog-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 30px 0;
  }

  .blog-row p,
  .blog-row em {
    grid-column: auto;
  }

  .blog-row:hover {
    transform: none;
  }

  .blog-topic-grid {
    grid-template-columns: 1fr;
  }

  .blog-topic {
    min-height: auto;
  }

  .library-market {
    padding: 100px 16px 76px;
  }

  .library-intro h1 {
    font-size: clamp(3rem, 12.8vw, 5.2rem);
  }

  .market-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .market-visual {
    min-height: 214px;
  }

  body.resource-page .resource-shell {
    width: min(100% - 20px, 1520px);
    padding-top: 96px;
  }

  body.resource-page .resource-hero {
    border-radius: 24px;
  }

body.resource-page .resource-hero h1 {
    font-size: clamp(3rem, 14vw, 5.8rem);
  }

  body.resource-page .resource-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.resource-page .resource-action {
    width: 100%;
  }
}

/* ── HOME HEADER REFERENCE BEHAVIOUR ───────────────────────
   Desktop only:
   - hero: plain logo, centred text nav, right CTA
   - after hero: compact centred Menu pill appears when scrolling up
   Tablet/mobile keep the existing compact header + sticky CTA. */
@media (min-width: 981px) {
  body.hero-centered .site-header,
  body.hero-centered .site-header.scrolled {
    height: 92px;
    padding: 18px 42px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.28s ease,
      transform 0.36s var(--ease-out);
  }

  /* Minimal MENU navbar at the top of the hero too (matches the post-scroll
     state): IFL pill · centered MENU pill · Let's talk. The inline link list is
     hidden in all hero-centered scroll states. */
  body.hero-centered:not(.nav-is-past-hero) .brand-mark {
    grid-column: 1 / 3;
    justify-self: start;
    min-width: 64px;
    height: 54px;
    padding: 7px 10px;
    background: var(--nav-bg);
    color: var(--nav-fg);
    font-family: "Bogdan Lektorat", Impact, sans-serif;
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 0.8;
  }

  body.hero-centered:not(.nav-is-past-hero) .desktop-nav {
    display: none;
  }

  body.hero-centered:not(.nav-is-past-hero) .site-header .menu-button {
    grid-column: 5 / 9;
    justify-self: center;
    display: inline-flex;
    width: auto;
    min-width: 142px;
    height: 54px;
    margin: 0;
    padding: 0 18px;
    gap: 14px;
    border-radius: 4px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.hero-centered:not(.nav-is-past-hero) .site-header .menu-button .mb-text {
    display: inline-flex;
  }

  body.hero-centered:not(.nav-is-past-hero) .site-header .menu-button .mb-icon {
    width: 34px;
    height: 18px;
  }

  body.hero-centered .site-header .header-cta,
  body.hero-centered .header-cta,
  body.hero-centered .site-header.scrolled .header-cta {
    grid-column: 10 / 13;
    justify-self: end;
  }

  body.hero-centered .header-cta span:last-child {
    display: inline-block;
    text-align: left;
    white-space: nowrap;
  }

  body.hero-centered.nav-is-past-hero .desktop-nav {
    display: none;
  }

  body.hero-centered.nav-is-past-hero .brand-mark {
    grid-column: 1 / 3;
    justify-self: start;
    min-width: 64px;
    height: 54px;
    padding: 7px 10px;
    background: var(--nav-bg);
    color: var(--nav-fg);
    font-family: "Bogdan Lektorat", Impact, sans-serif;
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 0.8;
  }

  body.hero-centered.nav-is-past-hero .site-header .menu-button {
    grid-column: 5 / 9;
    justify-self: center;
    display: inline-flex;
    width: auto;
    min-width: 142px;
    height: 54px;
    margin: 0;
    padding: 0 18px;
    gap: 14px;
    border-radius: 4px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.hero-centered.nav-is-past-hero .site-header .menu-button .mb-text {
    display: inline-flex;
  }

  body.hero-centered.nav-is-past-hero .site-header .menu-button .mb-icon {
    width: 34px;
    height: 18px;
  }

  body.hero-centered.nav-is-past-hero:not(.nav-scrolling-up):not(.nav-open) .site-header {
    opacity: 0;
    transform: translateY(-112%);
    pointer-events: none;
  }

  body.hero-centered.nav-is-past-hero.nav-scrolling-up .site-header,
  body.hero-centered.nav-is-past-hero.nav-open .site-header {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ── LIBRARY v2: getlayers-style browsable grid ─────────── */
/* frosted header so nav stays legible over light + dark tiles */
body.library-page .site-header {
  background: rgba(16, 13, 11, 0.66);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}

/* compact header: title block + search, then filter bar */
.library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(22px, 2.6vw, 36px);
}
.library-head-main { max-width: 640px; }
.library-h1 {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.6rem, 4.4vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.library-sub {
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  max-width: 46ch;
  color: rgba(245, 241, 232, 0.66);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.5;
}
.library-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.05);
  transition: border-color 0.22s ease, background 0.22s ease;
}
.library-search:focus-within { border-color: rgba(240, 82, 53, 0.7); background: rgba(245, 241, 232, 0.08); }
.library-search svg { width: 19px; height: 19px; color: rgba(245, 241, 232, 0.55); flex-shrink: 0; }
.library-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f5f1e8;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
.library-search input::placeholder { color: rgba(245, 241, 232, 0.45); }

.lib-filter-btn i { margin-left: 6px; font-style: normal; font-size: 0.84em; opacity: 0.5; }
.lib-filter-btn.is-active i { opacity: 0.85; }

/* true masonry (page is stocked, so no voids) */
.market-grid.is-masonry { display: block; column-count: 4; column-gap: clamp(16px, 1.6vw, 26px); }
@media (max-width: 1180px) { .market-grid.is-masonry { column-count: 3; } }
@media (max-width: 820px) { .market-grid.is-masonry { column-count: 2; } }
@media (max-width: 540px) { .market-grid.is-masonry { column-count: 1; } }
.is-masonry .market-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 0 clamp(16px, 1.6vw, 26px);
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.1);
  border-radius: 16px;
  background: rgba(245, 241, 232, 0.04);
  transition: transform 0.34s var(--ease-out), border-color 0.3s ease, box-shadow 0.34s ease;
}
.is-masonry .market-card:hover { transform: translateY(-5px); border-color: rgba(240, 82, 53, 0.5); box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34); }
.market-grid.is-masonry .market-card.is-hidden { display: none; }
.is-masonry .market-visual { min-height: 0; border-radius: 0; background: #15100f; }
.is-masonry .market-visual::before, .is-masonry .market-visual::after { content: none; }
.is-masonry .market-visual img, .is-masonry .market-media { display: block; width: 100%; height: auto; }
.market-visual.is-gradient {
  aspect-ratio: var(--ar, 1);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 26%, hsla(var(--hue), 85%, 60%, 0.5), transparent 55%),
    radial-gradient(circle at 78% 82%, hsla(calc(var(--hue) + 40deg), 80%, 55%, 0.4), transparent 55%),
    linear-gradient(135deg, #0c0a09, #17110f);
}
.market-gradient-label {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.22);
}
.is-masonry .market-title-row { padding: clamp(14px, 1.2vw, 18px) clamp(14px, 1.2vw, 18px) 0; }
.is-masonry .market-tags { padding: 9px clamp(14px, 1.2vw, 18px) 0; }
.is-masonry .market-copy { margin: clamp(13px, 1.3vw, 17px) clamp(14px, 1.2vw, 18px) clamp(14px, 1.2vw, 18px); }

/* promo tiles inside the grid */
.market-promo { padding: clamp(22px, 2vw, 30px); justify-content: space-between; gap: 16px; }
.market-promo:hover { transform: none; box-shadow: none; border-color: rgba(245, 241, 232, 0.16); }
.market-promo-upgrade { background: linear-gradient(150deg, rgba(240, 82, 53, 0.22), #17110f 70%); }
.market-promo-eyebrow { color: #f49a7d; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.market-promo strong {
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.5rem, 1.9vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #f5f1e8;
}
.market-promo p { margin: 0; color: rgba(245, 241, 232, 0.6); font-size: 15px; line-height: 1.5; }
.market-news-form { display: flex; gap: 8px; }
.market-news-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid rgba(245, 241, 232, 0.2); border-radius: 999px;
  background: rgba(0, 0, 0, 0.25); color: #f5f1e8; font-family: inherit; font-size: 14px;
}
.market-news-form input::placeholder { color: rgba(245, 241, 232, 0.4); }
.market-news-form button {
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: #f05235; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease;
}
.market-news-form button:hover { background: #d94328; }

.library-empty { margin: clamp(48px, 7vw, 96px) 0; text-align: center; color: rgba(245, 241, 232, 0.6); font-size: clamp(16px, 1.3vw, 20px); }

/* dark CTA + simpler dark footer (no cream seam) */
body.library-page .library-cta { padding-bottom: clamp(80px, 9vw, 130px); background: #0a0807; }
body.library-page .site-footer.library-footer {
  margin-top: 0;
  border-radius: 0;
  background: #0a0807;
  padding: clamp(40px, 5vw, 72px) clamp(18px, 3.2vw, 58px);
  border-top: 1px solid rgba(245, 241, 232, 0.1);
}
.library-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 32px); width: min(100%, 1840px); margin: 0 auto; }
.library-footer-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 26px); margin-left: clamp(6px, 1.5vw, 28px); }
.library-footer-nav a { color: rgba(245, 241, 232, 0.66); font-size: 15px; text-transform: uppercase; transition: color 0.2s ease; }
.library-footer-nav a:hover, .library-footer-nav a[aria-current="page"] { color: #fff; }
.library-footer-social { margin-left: auto; color: rgba(245, 241, 232, 0.66); font-size: 15px; text-transform: uppercase; transition: color 0.2s ease; }
.library-footer-social:hover { color: #f05235; }
.library-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  width: min(100%, 1840px); margin: clamp(26px, 3vw, 42px) auto 0;
  padding-top: clamp(18px, 2vw, 28px); border-top: 1px solid rgba(245, 241, 232, 0.08);
  color: rgba(245, 241, 232, 0.42); font-size: 13px;
}

/* give the big CTA heading room to breathe */
body.library-page .content-section h2 { line-height: 1.04; letter-spacing: -0.02em; }

/* ── LIBRARY v3: IdeaForgeLabs dark-section palette ──────── */
body.library-page {
  --lib-bg: #14110f;
  --lib-surface: #1b1a18;
  --lib-text: #f5f1e8;
  --lib-muted: rgba(245, 241, 232, 0.62);
  --lib-line: rgba(245, 241, 232, 0.12);
  background: var(--lib-bg);
  color: var(--lib-text);
}
body.library-page .content-main {
  background:
    radial-gradient(circle at 6% 0%, rgba(240, 82, 53, 0.18), transparent 30%),
    var(--lib-bg);
}
body.library-page .content-main::before { color: rgba(245, 241, 232, 0.04); }
.library-market { color: var(--lib-text); }

/* cream button = the "SEE PROJECT" treatment */
.cream-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 52px; padding: 0 26px; border-radius: 6px;
  background: #eae6dd; color: #14110f;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}
.cream-btn:hover { background: #f05235; color: #fff; transform: translateY(-3px); }
.cream-btn-lg { min-height: 60px; padding: 0 34px; font-size: 16px; }

/* featured banner */
.library-featured {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  margin: clamp(22px, 2.4vw, 38px) 0 clamp(28px, 3vw, 48px);
  overflow: hidden; border: 1px solid var(--lib-line); border-radius: 18px;
  background: var(--lib-surface); text-decoration: none; color: var(--lib-text);
  transition: border-color 0.3s ease, transform 0.34s var(--ease-out);
}
.library-featured:hover { border-color: rgba(240, 82, 53, 0.5); }
.library-featured-media { position: relative; min-height: clamp(240px, 26vw, 360px); }
.library-featured-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.library-featured-copy { display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: clamp(26px, 3vw, 56px); }
.library-featured-tags { display: flex; align-items: center; gap: 12px; }
.library-featured-eyebrow { color: var(--lib-muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.library-featured strong { font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(2.4rem, 3.6vw, 4rem); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.library-featured-desc { max-width: 46ch; color: var(--lib-muted); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; }
@media (max-width: 760px) { .library-featured { grid-template-columns: 1fr; } }

/* sidebar + grid */
.library-body { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: clamp(22px, 2.6vw, 52px); align-items: start; }
.library-sidebar { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 3px; }
.library-sidebar-label { margin: clamp(16px, 1.6vw, 22px) 0 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lib-muted); }
.library-sidebar-label:first-child { margin-top: 0; }
.library-sidebar .lib-filter-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--lib-muted); font-family: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.library-sidebar .lib-filter-btn i { margin: 0; font-size: 13px; opacity: 0.5; }
.library-sidebar .lib-filter-btn:hover { background: rgba(245, 241, 232, 0.06); color: var(--lib-text); }
.library-sidebar .lib-filter-btn.is-active { background: rgba(240, 82, 53, 0.16); color: #fff; }
.library-sidebar .lib-filter-btn.is-active i { color: #f05235; opacity: 1; }

/* masonry sits in the grid column */
.library-body .market-grid.is-masonry { column-count: 3; column-gap: clamp(16px, 1.4vw, 24px); }
@media (max-width: 1280px) { .library-body .market-grid.is-masonry { column-count: 2; } }
@media (max-width: 560px) { .library-body .market-grid.is-masonry { column-count: 1; } }
.is-masonry .market-card { background: var(--lib-surface); border-color: var(--lib-line); }
.market-promo-upgrade { background: linear-gradient(150deg, rgba(240, 82, 53, 0.24), var(--lib-surface) 70%); }

/* sidebar → horizontal scroll on small screens */
@media (max-width: 860px) {
  .library-body { grid-template-columns: 1fr; }
  .library-sidebar { position: static; flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .library-sidebar-label { display: none; }
  .library-sidebar .lib-filter-btn { width: auto; flex: 0 0 auto; border-radius: 999px; background: rgba(245, 241, 232, 0.06); white-space: nowrap; }
  .library-sidebar .lib-filter-btn.is-active { background: #f05235; color: #fff; }
}

/* how it works */
.library-how { padding: clamp(60px, 8vw, 110px) clamp(18px, 3.2vw, 58px); background: var(--lib-bg); }
.library-how .library-shell { width: min(100%, 1840px); margin: 0 auto; }
.library-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px); margin: clamp(26px, 3vw, 44px) 0 0; padding: 0; }
.library-steps li { border-top: 1px solid var(--lib-line); padding-top: 20px; }
.library-steps span { font-family: "Bogdan Lektorat", Impact, sans-serif; color: #f05235; font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 800; }
.library-steps strong { display: block; margin: 10px 0 8px; font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(1.4rem, 1.8vw, 2rem); text-transform: uppercase; letter-spacing: -0.02em; }
.library-steps p { margin: 0; color: var(--lib-muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 760px) { .library-steps { grid-template-columns: 1fr; } }

/* custom CTA + footer flow dark */
body.library-page .library-cta { background: var(--lib-bg); padding-bottom: clamp(72px, 8vw, 120px); }

/* ── LIBRARY: consolidated final (dark #14110f · white · coral) ─── */
body.library-page {
  --lib-bg: #14110f;            /* page = custom-build colour */
  --lib-card: #201d1a;          /* card surface (one step up) */
  --lib-line: rgba(245, 241, 232, 0.12);
  --lib-text: #f5f1e8;          /* content */
  --lib-muted: rgba(245, 241, 232, 0.6);
  --coral: #f05235;             /* the only accent */
  background: var(--lib-bg);
  color: var(--lib-text);
}

/* flat background: no glow gradient, no ghost watermark */
body.library-page .content-main { background: var(--lib-bg); }
body.library-page .content-main::before { content: none; }

/* header = identical to home (transparent, no glass); brand legible on dark */
body.library-page .site-header { background: transparent; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.light-hero.nav-on-dark .brand-mark span { color: #f5f1e8; }

/* ── header band: one bold focal moment, no eyebrow ── */
.library-head { align-items: end; gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(26px, 3vw, 44px); margin-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--lib-line); }
.library-h1 { margin: 0; color: var(--lib-text); font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; }
.lib-dot { color: var(--coral); }
.library-sub { max-width: 40ch; margin: clamp(12px, 1.2vw, 18px) 0 0; color: var(--lib-muted); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }
.library-head-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: min(340px, 100%); }
.library-count { margin: 0; color: var(--lib-muted); font-size: 13px; letter-spacing: 0.02em; }
.library-count strong { color: var(--lib-text); font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: 1.35em; letter-spacing: -0.02em; }

/* search */
.library-search { display: inline-flex; align-items: center; gap: 10px; width: min(340px, 100%); height: 52px; padding: 0 18px; border: 1px solid var(--lib-line); border-radius: 999px; background: var(--lib-card); transition: border-color 0.22s ease; }
.library-search:focus-within { border-color: var(--coral); }
.library-search svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--lib-muted); }
.library-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--lib-text); font-family: inherit; font-size: 15px; outline: none; }
.library-search input::placeholder { color: var(--lib-muted); }

/* ── sidebar ── */
.library-sidebar-label { color: var(--lib-muted); }
.library-sidebar .lib-filter-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--lib-muted); font-family: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.16s ease-out; }
.library-sidebar .lib-filter-btn i { margin: 0; font-size: 13px; opacity: 0.5; font-style: normal; }
.library-sidebar .lib-filter-btn:hover { background: rgba(245, 241, 232, 0.06); color: var(--lib-text); }
.library-sidebar .lib-filter-btn:active { transform: scale(0.97); }
.library-sidebar .lib-filter-btn.is-active { background: rgba(245, 241, 232, 0.06); color: var(--lib-text); box-shadow: inset 3px 0 0 var(--coral); }
.library-sidebar .lib-filter-btn.is-active i { color: var(--coral); opacity: 1; }

/* ── uniform fixed-height grid ── */
.library-body .market-grid.is-masonry { display: grid; column-count: initial; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.4vw, 24px); }
@media (max-width: 1280px) { .library-body .market-grid.is-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .library-body .market-grid.is-masonry { grid-template-columns: 1fr; } }
.market-grid.is-masonry .market-card.is-hidden { display: none; }

/* cards: dark, polaroid frame, diffused shadow, spring */
.is-masonry .market-card { display: flex; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; border: 1px solid var(--lib-line); border-radius: 18px; background: var(--lib-card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 26px rgba(0, 0, 0, 0.4), 0 32px 60px rgba(0, 0, 0, 0.34); transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.42s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease; }
.is-masonry .market-card:hover { transform: translateY(-6px); border-color: rgba(240, 82, 53, 0.55); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5), 0 48px 84px rgba(0, 0, 0, 0.45); }
.is-masonry .market-card:focus-within { border-color: var(--coral); }
.is-masonry .market-visual { position: relative; aspect-ratio: 4 / 3; min-height: 0; border-radius: 12px; overflow: hidden; background: #15120f; }
/* video/scene cards match the clip's 4:3 so the loop fills the card with no crop */
.is-masonry .market-visual:has(video) { aspect-ratio: 4 / 3; }
.is-masonry .market-visual::before, .is-masonry .market-visual::after { content: none; }
.is-masonry .market-visual img, .is-masonry .market-media { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.is-masonry .market-card:hover .market-visual img,
.is-masonry .market-card:hover .market-media { transform: scale(1.05); }
.is-masonry .market-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 6px 0; }
.is-masonry .market-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 0; }
.is-masonry .market-copy { margin: 12px 6px 6px; }

/* gradient placeholder media (on palette: dark + coral wash) */
body.library-page .market-visual.is-gradient { display: grid; place-items: center; aspect-ratio: 4 / 3; background: radial-gradient(circle at 30% 26%, rgba(240, 82, 53, 0.22), transparent 62%), #1a1714; }
.market-gradient-label { font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(1.9rem, 3vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; color: rgba(245, 241, 232, 0.3); }

/* card title (semantic h3) + category */
.market-title-row .market-title, .market-title-row strong { margin: 0; font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(1.4rem, 1.5vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; color: var(--lib-text); }
.market-title-row em { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lib-muted); font-style: normal; }
.market-tags small { padding: 4px 9px; border-radius: 999px; background: rgba(245, 241, 232, 0.06); border: 1px solid var(--lib-line); color: var(--lib-muted); font-size: 11px; letter-spacing: 0.04em; }

/* badges */
.market-badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.market-price { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.market-price.is-premium { background: var(--coral); color: #fff; }
.market-price.is-free { background: rgba(245, 241, 232, 0.08); border: 1px solid var(--lib-line); color: var(--lib-text); }

/* copy-prompt: light chip → coral, press feedback */
.market-copy { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--lib-text); border-radius: 999px; background: var(--lib-text); color: var(--lib-bg); font-family: inherit; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.16s ease-out; }
.market-copy:hover, .market-copy.is-copied { background: var(--coral); border-color: var(--coral); color: #fff; }
.market-copy:active { transform: scale(0.97); }
.market-copy span { transition: filter 0.18s ease, opacity 0.18s ease; }

/* promo tiles */
.market-promo { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: clamp(22px, 2vw, 30px); }
.market-promo strong { font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(1.5rem, 1.9vw, 2.1rem); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--lib-text); }
.market-promo p { margin: 0; color: var(--lib-muted); font-size: 15px; line-height: 1.5; }
.market-promo-upgrade { background: var(--lib-card); }
.market-promo-eyebrow { color: var(--coral); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.market-news-form { display: flex; gap: 8px; }
.market-news-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--lib-line); border-radius: 999px; background: var(--lib-bg); color: var(--lib-text); font-family: inherit; font-size: 14px; }
.market-news-form input::placeholder { color: var(--lib-muted); }
.market-news-form button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--coral); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.16s ease-out; }
.market-news-form button:hover { background: #d94328; }
.market-news-form button:active { transform: scale(0.97); }

/* cream/light button (Upgrade etc. on dark) */
.cream-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 52px; padding: 0 26px; border-radius: 6px; background: #eae6dd; color: #14110f; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.cream-btn:hover { background: var(--coral); color: #fff; transform: translateY(-3px); }
.cream-btn:active { transform: scale(0.97); }
.cream-btn-lg { min-height: 60px; padding: 0 34px; font-size: 16px; }

/* ── custom-build: inverted WHITE band, ink text, coral-on-hover button ── */
body.library-page .library-cta { padding-bottom: clamp(72px, 8vw, 120px); }
body.library-page .library-cta.is-dark { background: #ffffff; color: #14110f; }
body.library-page .library-cta.is-dark h2 { color: #14110f; }
body.library-page .library-cta.is-dark .content-kicker { color: #4a3f37; }
body.library-page .library-cta.is-dark p { color: #4a3f37; }
body.library-page .library-cta.is-dark .cream-btn { background: #14110f; color: #ffffff; }
body.library-page .library-cta.is-dark .cream-btn:hover { background: var(--coral); color: #ffffff; }

/* footer: dark, flat */
body.library-page .site-footer.library-footer { background: var(--lib-bg); border-top-color: rgba(245, 241, 232, 0.12); }

/* ── motion + a11y ── */
body.library-page .fade-up { filter: blur(8px); transition: opacity 0.8s cubic-bezier(0.32, 0.72, 0, 1), transform 0.8s cubic-bezier(0.32, 0.72, 0, 1), filter 0.8s cubic-bezier(0.32, 0.72, 0, 1); }
body.library-page .fade-up.visible { filter: blur(0); }
body.library-page :is(.lib-filter-btn, .market-copy, .cream-btn, .market-cta-link, .library-search input, .market-news-form input, .market-news-form button):focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 6px; }

/* touch: 44px targets on coarse pointers */
@media (pointer: coarse) {
  .library-sidebar .lib-filter-btn { min-height: 44px; }
}
/* no stuck hover after tap */
@media (hover: none) {
  .is-masonry .market-card:hover { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 26px rgba(0,0,0,0.4), 0 32px 60px rgba(0,0,0,0.34); }
  .is-masonry .market-card:hover .market-visual img,
  .is-masonry .market-card:hover .market-media { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.library-page .fade-up { filter: none; transition: opacity 0.2s ease; }
  .is-masonry .market-card, .is-masonry .market-card:hover,
  .is-masonry .market-visual img, .is-masonry .market-media { transition: none; }
}

/* ── ITEM DETAIL PAGE (dark, matches library) ─────────────── */
.item-main { padding-top: clamp(92px, 12svh, 138px); }
.item-shell { width: min(100% - clamp(32px, 5vw, 80px), 1280px); margin: 0 auto; }
.item-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--lib-muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.2s ease, gap 0.3s var(--ease-out); }
.item-back:hover { color: var(--lib-text); gap: 12px; }
.item-back:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.item-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(24px, 3vw, 44px); }
.item-info { display: flex; flex-direction: column; }
.item-badges { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(18px, 2vw, 26px); }
.item-badges .market-price { position: static; }
.item-cat { padding: 3px 10px; border: 1px solid var(--lib-line); border-radius: 999px; color: var(--lib-muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.item-title { margin: 0; font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; }
.item-sub { max-width: 52ch; margin: clamp(16px, 1.6vw, 22px) 0 0; color: var(--lib-muted); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; }
.item-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(18px, 2vw, 26px) 0 0; }
.item-tags small { padding: 4px 11px; border-radius: 999px; background: rgba(245, 241, 232, 0.06); border: 1px solid var(--lib-line); color: var(--lib-muted); font-size: 12px; letter-spacing: 0.04em; }

.item-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; max-width: 100%; margin: clamp(24px, 3vw, 36px) 0 0; }
.item-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 clamp(14px, 1.35vw, 20px); border-radius: 999px; border: 1px solid var(--lib-line); background: transparent; color: var(--lib-text); font-family: inherit; font-size: clamp(12px, 0.82vw, 14px); letter-spacing: 0.03em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.16s ease-out; }
.item-action-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.item-action:active { transform: scale(0.97); }
.item-action.is-primary { background: var(--lib-text); border-color: var(--lib-text); color: var(--lib-bg); }
.item-action.is-primary:hover, .item-action.is-primary.is-done { background: var(--coral); border-color: var(--coral); color: #fff; }
.item-action.is-locked { color: var(--lib-muted); }
.item-action.is-locked:hover { border-color: var(--coral); color: var(--lib-text); }
.item-lock { font-size: 12px; opacity: 0.8; }
.item-action.is-ghost:hover { border-color: rgba(245, 241, 232, 0.4); }
.item-action.is-copy { min-width: min(220px, 42%); }
.item-action.is-save { min-width: 72px; padding-inline: 15px; }
.item-action.is-icon { width: 48px; min-width: 48px; padding: 0; }
.item-action-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.item-action[aria-pressed="true"] { border-color: var(--coral); color: var(--coral); }
.item-note { margin: clamp(14px, 1.4vw, 18px) 0 0; color: var(--lib-muted); font-size: 13px; }

/* trust signals: delivery + support reassurance under the buy button */
.item-trust { list-style: none; margin: clamp(18px, 1.8vw, 24px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.item-trust-line { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--lib-muted); font-size: 14px; line-height: 1.42; }
.item-trust-line svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--yes-coral); }
.item-trust-line a { color: var(--lib-text); text-decoration: underline; text-underline-offset: 2px; }
.item-trust-line a:hover { color: var(--yes-coral); }

/* buyer quotes: rendered only when testimonials exist */
.item-quotes-wrap { padding-top: clamp(24px, 3vw, 44px); }
.item-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 1.8vw, 22px); }
.item-quote { margin: 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--lib-line); border-radius: 16px; background: var(--lib-card, #201d1a); }
.item-quote blockquote { margin: 0; color: var(--lib-text); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; }
.item-quote figcaption { margin: 14px 0 0; color: var(--lib-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }

.item-preview { margin: 0; border: 1px solid var(--lib-line); border-radius: 18px; overflow: hidden; background: #15120f; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 18px 40px rgba(0,0,0,0.4); }
.item-preview img, .item-preview video { display: block; width: 100%; height: auto; }

/* ── KIT DETAIL HERO: structured product card ───────────── */
.kit-detail-page .item-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(56px, 7vw, 112px);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 52px);
}

.kit-detail-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kit-detail-utility .item-badges {
  margin: 0;
}

.kit-detail-page .item-title {
  max-width: 100%;
  font-size: clamp(4rem, 6.5vw, 6rem);
}

.kit-preview-card {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.15);
  border-radius: 18px;
  background: #201d1a;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.32),
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 46px 90px rgba(0, 0, 0, 0.22);
}

.kit-preview-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 48px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  color: rgba(245, 241, 232, 0.58);
  font-family: "Sora", sans-serif;
}

.kit-preview-bar > span {
  display: flex;
  gap: 6px;
}

.kit-preview-bar i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.28);
}

.kit-preview-bar i:first-child {
  background: #f05235;
}

.kit-preview-bar small {
  font-size: 11px;
}

.kit-preview-bar em {
  justify-self: end;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kit-preview-head {
  display: grid;
  grid-template-columns: clamp(78px, 8vw, 104px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 48px);
}

.kit-preview-mark {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #f05235;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
}

.kit-preview-head div {
  min-width: 0;
}

.kit-preview-head small {
  display: block;
  margin-bottom: 7px;
  color: #f05235;
  font-family: "Sora", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.kit-preview-head h2 {
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.1rem, 3.35vw, 3.9rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: var(--display-letter-spacing);
  word-spacing: var(--display-word-spacing);
  text-transform: uppercase;
  text-wrap: balance;
}

.kit-preview-files {
  margin: auto 0 0;
  padding: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  list-style: none;
}

.kit-preview-files li {
  display: grid;
  grid-template-columns: 34px minmax(120px, 0.52fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px clamp(24px, 3.5vw, 44px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.1);
  font-family: "Sora", sans-serif;
}

.kit-preview-files li > span {
  color: #f05235;
  font-size: 11px;
  font-weight: 700;
}

.kit-preview-files strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f5f1e8;
  font-size: 12px;
  line-height: 1.4;
}

.kit-preview-files p {
  margin: 0;
  color: rgba(245, 241, 232, 0.58);
  font-size: 11px;
  line-height: 1.48;
}

.kit-preview-output {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px clamp(24px, 3.5vw, 44px);
  background: #f05235;
  color: #14110f;
  font-family: "Sora", sans-serif;
}

.kit-preview-output span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kit-preview-output strong {
  justify-self: end;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.workflow-preview {
  display: flex;
  min-height: clamp(330px, 29vw, 430px);
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.8vw, 36px);
  background:
    radial-gradient(circle at 20% 0%, rgba(240, 82, 53, 0.18), transparent 38%),
    linear-gradient(135deg, #241914 0%, #15120f 48%, #0f0d0c 100%);
}
.workflow-preview-top,
.workflow-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(245, 241, 232, 0.58);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.workflow-preview-top strong,
.workflow-preview-foot span {
  padding: 5px 10px;
  border: 1px solid rgba(245, 241, 232, 0.12);
  border-radius: 999px;
  color: rgba(245, 241, 232, 0.72);
  font-size: 11px;
}
.workflow-preview-title {
  max-width: 10ch;
  color: rgba(245, 241, 232, 0.84);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.3rem, 4vw, 4.1rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.workflow-preview-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.workflow-preview-lane {
  display: grid;
  gap: 8px;
  min-height: 146px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(245, 241, 232, 0.1);
  border-radius: 14px;
  background: rgba(10, 8, 7, 0.42);
}
.workflow-preview-lane small {
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.workflow-preview-lane span {
  color: rgba(245, 241, 232, 0.68);
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.32;
}
.workflow-preview-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
}
.workflow-preview-arrow svg { width: 20px; height: 20px; }
.workflow-preview-foot { justify-content: flex-start; flex-wrap: wrap; }

.item-body { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 72px); }
/* asset/download items have no prompt: hide the prompt-oriented instructions */
body.item-asset .item-body { display: none; }

/* ── the prompt, shown verbatim + copied exactly ── */
.item-prompt-section { padding: clamp(34px, 5vw, 64px) 0 0; }
.item-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(14px, 1.6vw, 22px); }
.item-prompt-head .item-eyebrow { margin: 0; }
.item-prompt-copy { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--coral, #f05235); color: #fff; font: 600 13px/1 "Sora", system-ui, sans-serif; letter-spacing: 0.01em; cursor: pointer; transition: background 0.2s ease, transform 0.14s var(--ease-out); }
.item-prompt-copy:hover { background: #d8432b; }
.item-prompt-copy:active { transform: scale(0.96); }
.item-prompt-copy.is-done { background: #2e8b57; }
.item-prompt-code { margin: 0; max-height: 60vh; overflow: auto; padding: clamp(18px, 2vw, 28px); background: #0e0c0b; border: 1px solid var(--lib-line, rgba(245, 241, 232, 0.12)); border-radius: 14px; color: rgba(245, 241, 232, 0.86); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; tab-size: 2; -webkit-overflow-scrolling: touch; }
.item-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.item-eyebrow { margin: 0 0 10px; color: var(--coral); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.item-how h2, .item-faq h2 { margin: 0 0 clamp(20px, 2.4vw, 32px); font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(1.9rem, 2.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.95; }
.item-steps { list-style: none; margin: 0; padding: 0; }
.item-steps li { display: flex; gap: clamp(16px, 1.6vw, 24px); padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--lib-line); }
.item-steps li:last-child { border-bottom: 1px solid var(--lib-line); }
.item-steps span { flex-shrink: 0; font-family: "Bogdan Lektorat", Impact, sans-serif; color: var(--coral); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 800; }
.item-steps strong { display: block; margin-bottom: 6px; font-size: clamp(16px, 1.2vw, 19px); }
.item-steps p { margin: 0; color: var(--lib-muted); font-size: 15px; line-height: 1.5; }

.item-faq details { border-top: 1px solid var(--lib-line); }
.item-faq details:last-child { border-bottom: 1px solid var(--lib-line); }
.item-faq summary { list-style: none; cursor: pointer; padding: clamp(16px, 1.8vw, 22px) 0; font-size: clamp(15px, 1.1vw, 18px); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.item-faq summary::-webkit-details-marker { display: none; }
.item-faq summary::after { content: "+"; color: var(--coral); font-size: 1.3em; transition: transform 0.25s ease; }
.item-faq details[open] summary::after { transform: rotate(45deg); }
.item-faq details p { margin: 0 0 clamp(16px, 1.8vw, 22px); color: var(--lib-muted); font-size: 15px; line-height: 1.55; }

.workflow-body { padding: clamp(52px, 7vw, 104px) 0 clamp(44px, 6vw, 76px); }
.workflow-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.workflow-main, .workflow-aside { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 30px); }
.workflow-aside { position: sticky; top: 104px; }
.workflow-section { padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--lib-line); }
.workflow-section:first-child { padding-top: 0; border-top: 0; }
.workflow-section.is-panel {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--lib-line);
  border-radius: 18px;
  background: rgba(245, 241, 232, 0.045);
}
.workflow-section h2 {
  margin: 0 0 clamp(16px, 1.7vw, 24px);
  color: var(--lib-text);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.85rem, 2.8vw, 3.2rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.workflow-section h3 {
  margin: clamp(18px, 2vw, 26px) 0 10px;
  color: var(--lib-text);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.25;
}
.workflow-section p { color: var(--lib-muted); font-size: 15px; line-height: 1.55; }
.workflow-disclosure {
  border-top: 1px solid var(--lib-line);
}
.workflow-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 3vw, 38px) 0;
  list-style: none;
  cursor: pointer;
}
.workflow-disclosure summary::-webkit-details-marker { display: none; }
.workflow-disclosure-title {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.workflow-disclosure-title small {
  color: rgba(245, 241, 232, 0.58);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.workflow-disclosure-title strong {
  color: var(--lib-text);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.85rem, 2.8vw, 3.2rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.workflow-disclosure-side {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  color: rgba(245, 241, 232, 0.56);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workflow-disclosure-side i {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(245, 241, 232, 0.26);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.03);
}
.workflow-disclosure-side i::before,
.workflow-disclosure-side i::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: var(--coral);
  transition: transform 0.24s var(--ease-out);
}
.workflow-disclosure-side i::after {
  transform: rotate(90deg);
}
.workflow-disclosure[open] .workflow-disclosure-side i::after {
  transform: rotate(0deg);
}
.workflow-disclosure-body {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  padding: 0 0 clamp(30px, 4vw, 52px);
}
.workflow-disclosure-body h3 {
  margin: clamp(6px, 1vw, 12px) 0 -4px;
  color: var(--lib-text);
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.2;
}
.workflow-list, .workflow-ordered { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.workflow-list li, .workflow-ordered li {
  position: relative;
  padding-left: 18px;
  color: var(--lib-muted);
  font-size: 15px;
  line-height: 1.5;
}
.workflow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.workflow-ordered { counter-reset: workflow-step; }
.workflow-ordered li { counter-increment: workflow-step; padding-left: 42px; min-height: 28px; }
.workflow-ordered li::before {
  content: counter(workflow-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--coral);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.workflow-code {
  margin: 0;
  padding: clamp(15px, 1.6vw, 20px);
  overflow: auto;
  border: 1px solid var(--lib-line);
  border-radius: 14px;
  background: #0e0c0b;
  color: rgba(245, 241, 232, 0.82);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
/* The zip line sits directly above this list, so the list needs its own top
   rule: without it the first file reads as part of the zip sentence. */
.workflow-files { display: grid; gap: 10px; margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--lib-line); }
.workflow-file {
  padding: 12px 0;
  border-top: 1px solid var(--lib-line);
}
.workflow-file:first-child { border-top: 0; padding-top: 0; }
.workflow-file strong { display: block; color: var(--lib-text); font-size: 13px; word-break: break-word; }
.workflow-file p { margin: 5px 0 0; font-size: 13px; line-height: 1.45; }
.workflow-muted strong { color: var(--lib-text); }
.workflow-panel-cta { width: 100%; justify-content: center; margin-top: 16px; }
/* Free-kit upsell panel: pitch, then what the paid version adds, then one CTA.
   The list carries its own rule and spacing so the three parts read as three
   parts; without it the paragraph, the bullets, and the button collide. */
.workflow-upsell .workflow-muted { margin: 0; }
.workflow-upsell-list {
  display: grid;
  gap: 9px;
  margin: clamp(15px, 1.7vw, 20px) 0 0;
  padding: clamp(15px, 1.7vw, 20px) 0 0;
  border-top: 1px solid var(--lib-line);
  list-style: none;
}
.workflow-upsell-list li {
  position: relative;
  padding-left: 17px;
  color: var(--lib-text);
  font-size: 13px;
  line-height: 1.45;
}
.workflow-upsell-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.42);
}
.workflow-upsell .workflow-panel-cta { margin-top: clamp(18px, 2vw, 24px); }
.workflow-faq details { border-top: 1px solid var(--lib-line); }
.workflow-faq details:first-of-type { border-top: 0; }
/* These read as plain text without a marker, so nothing signals they open.
   Matches the +/x affordance .item-faq already uses. */
.workflow-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 15px 0;
  color: var(--lib-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.workflow-faq summary::-webkit-details-marker { display: none; }
.workflow-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--coral);
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s var(--ease-out);
}
.workflow-faq details[open] summary::after { transform: rotate(45deg); }
.workflow-faq summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.workflow-faq details p { margin: 0 0 15px; font-size: 14px; }

@media (max-width: 980px) {
  .kit-detail-page .item-layout {
    grid-template-columns: 1fr;
  }

  .kit-preview-card {
    width: min(100%, 720px);
  }

  .workflow-layout { grid-template-columns: 1fr; }
  .workflow-aside { position: static; }
  .workflow-disclosure summary { align-items: flex-start; }
  .workflow-disclosure-side span { display: none; }
}

/* card title link → detail page */
.market-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.market-title a:hover { color: var(--coral); }

@media (max-width: 920px) {
  .item-layout { grid-template-columns: 1fr; }
  .item-preview { order: -1; }
  .item-grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 56px); }
}

@media (max-width: 620px) {
  .item-actions { flex-wrap: wrap; }
  /* Grow to fill whatever the row has left, rather than claiming the whole
     row — that was pushing the share icon onto a line of its own. Rows with
     three or four actions still wrap, they just wrap where they need to. */
  .item-action.is-primary,
  .item-action.is-copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The compact chips keep their size so the primary is what absorbs slack. */
  .item-action.is-icon,
  .item-action.is-save {
    flex: 0 0 auto;
  }
  .workflow-preview-lanes {
    grid-template-columns: 1fr;
  }
  .workflow-preview-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .kit-detail-utility {
    align-items: flex-start;
  }

  .kit-detail-page .item-title {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .kit-preview-head {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
    padding: 24px;
  }

  .kit-preview-files li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px 12px;
    padding: 15px 24px;
  }

  .kit-preview-files p {
    grid-column: 2;
  }

  .kit-preview-output {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 24px;
  }

  .kit-preview-output strong {
    justify-self: start;
    text-align: left;
  }
}

/* ── KIT DETAIL CONTENT: three useful sections, no filler ─ */
.kit-detail-body {
  padding: clamp(68px, 8vw, 112px) 0 clamp(72px, 9vw, 124px);
}

.kit-detail-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.kit-detail-info-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 16px;
  background: #201d1a;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.28),
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 38px 72px rgba(0, 0, 0, 0.18);
}

.kit-detail-card-head {
  margin-bottom: clamp(24px, 2.4vw, 34px);
}

.kit-detail-card-head .item-eyebrow {
  margin: 0 0 12px;
}

.kit-detail-info-card h2 {
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.3rem, 3.25vw, 3.8rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--display-letter-spacing);
  word-spacing: var(--display-word-spacing);
  text-transform: uppercase;
  text-wrap: balance;
}

.kit-detail-card-head > p:last-child {
  max-width: 34ch;
  margin: 16px 0 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.kit-detail-info-card .workflow-files,
.kit-detail-info-card .workflow-list,
.kit-detail-info-card .workflow-ordered {
  gap: 0;
  margin: 0;
  padding-top: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.kit-detail-info-card .workflow-file,
.kit-detail-info-card .workflow-list li,
.kit-detail-info-card .workflow-ordered li {
  position: relative;
  min-height: 0;
  padding-top: 17px;
  padding-bottom: 17px;
  border-top: 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.kit-detail-info-card :is(.workflow-file, .workflow-list li, .workflow-ordered li) {
  padding-left: 24px;
}

.kit-detail-info-card :is(.workflow-file, .workflow-list li, .workflow-ordered li)::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: #f05235;
}

.kit-detail-info-card :is(.workflow-file, .workflow-list li, .workflow-ordered li):last-child {
  border-bottom: 0;
}

.kit-detail-info-card .workflow-file strong {
  color: #f5f1e8;
  font-size: 13px;
}

.kit-detail-info-card .workflow-file p {
  margin-top: 6px;
  font-size: 12px;
}

.kit-detail-audience-group + .kit-detail-audience-group {
  margin-top: 24px;
}

.kit-detail-audience-group h3 {
  margin: 0 0 10px;
  color: #f5f1e8;
  font-size: 13px;
  line-height: 1.35;
}

.kit-detail-faq,
.external-skill-faq {
  --ifl-prompt-dark: #14110f;
  --ifl-prompt-cream: #f5f1e8;
  --ifl-prompt-muted: rgba(245, 241, 232, 0.6);
  --ifl-prompt-coral: #f05235;
}

@media (max-width: 980px) {
  .kit-detail-card-grid {
    grid-template-columns: 1fr;
  }

}

/* ── LIBRARY: whole card clickable (stretched link) ──────── */
.is-masonry .market-card { position: relative; }
.is-masonry .market-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.is-masonry .market-copy { position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .is-masonry .market-card:has(.market-title a):hover { cursor: pointer; } }

/* ── LIBRARY WALL: posts.design-style structure, IFL theme ─── */
body.library-page:not(.item-page) {
  --wall-bg: #1b1a18;
  --wall-rail: #1b1a18;
  --wall-card: #141311;
  --wall-line: #37332e;
  --wall-text: #f7f3ea;
  --wall-muted: #bdb7ad;
  --wall-dim: #8d867b;
  --wall-soft: #24211e;
  --wall-cream: #eae6dd;
  --wall-shell-top: clamp(118px, 14svh, 150px);
  --wall-sticky-top: clamp(96px, 13vh, 150px);
  background: var(--wall-bg);
  color: var(--wall-text);
}

body.library-page:not(.item-page) .content-main {
  min-height: 100svh;
  overflow: visible;
  background: var(--wall-bg);
}

body.library-page:not(.item-page) .content-main::before {
  content: none;
}

body.library-page:not(.item-page) .library-market {
  min-height: 100svh;
  padding: var(--wall-shell-top) 0 0;
  color: var(--wall-text);
  background: var(--wall-bg);
}

.library-layout {
  display: grid;
  grid-template-columns: minmax(260px, 288px) minmax(0, 1fr);
  min-height: calc(100svh - var(--wall-shell-top));
}

body.library-page:not(.item-page) .library-sidebar {
  position: sticky;
  top: var(--wall-sticky-top);
  z-index: 4;
  display: flex;
  height: calc(100svh - var(--wall-sticky-top) - 24px);
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  padding: 20px;
  border-right: 1px solid var(--wall-line);
  background: var(--wall-rail);
  scrollbar-width: thin;
}

.library-rail-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.library-rail-brand {
  display: none;
  align-items: center;
  gap: 12px;
  color: var(--wall-text);
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.library-rail-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--wall-line);
  border-radius: 10px;
  color: var(--coral);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 16px;
  line-height: 1;
}

body.library-page:not(.item-page) .library-kicker {
  margin: 4px 0 0;
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.library-page:not(.item-page) .library-h1 {
  margin: 0;
  max-width: 8ch;
  color: var(--wall-text);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.5rem, 4.5vw, 4.4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

body.library-page:not(.item-page) .library-sub {
  max-width: 23ch;
  margin: 0;
  color: var(--wall-muted);
  font-size: 16px;
  line-height: 1.45;
}

body.library-page:not(.item-page) .library-search {
  flex: 0 0 54px;
  width: 100%;
  height: 54px;
  padding: 0 10px 0 18px;
  border: 1px solid var(--wall-line);
  border-radius: 18px;
  background: var(--wall-card);
  box-shadow: none;
}

body.library-page:not(.item-page) .library-search::after {
  content: "";
  width: 38px;
  height: 38px;
  border: 1px solid var(--wall-cream);
  border-radius: 12px;
  background: var(--wall-cream);
}

body.library-page:not(.item-page) .library-search svg {
  order: 2;
  width: 18px;
  height: 18px;
  margin-left: -29px;
  color: var(--wall-card);
}

body.library-page:not(.item-page) .library-search input {
  color: var(--wall-text);
  font-size: 15px;
}

body.library-page:not(.item-page) .library-search input::placeholder {
  color: var(--wall-dim);
}

body.library-page:not(.item-page) .library-count {
  margin: -8px 0 0;
  color: var(--wall-muted);
  font-size: 13px;
}

.library-filter-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.library-page:not(.item-page) .library-sidebar-label {
  margin: 18px 0 8px;
  padding-left: 14px;
  color: var(--wall-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

body.library-page:not(.item-page) .library-sidebar-label:first-child {
  margin-top: 0;
}

body.library-page:not(.item-page) .library-sidebar .lib-filter-btn {
  display: flex;
  min-height: 40px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wall-muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
}

body.library-page:not(.item-page) .library-sidebar .lib-filter-btn:hover,
body.library-page:not(.item-page) .library-sidebar .lib-filter-btn.is-active {
  background: var(--wall-soft);
  color: var(--wall-text);
  box-shadow: none;
}

body.library-page:not(.item-page) .library-sidebar .lib-filter-btn i {
  color: inherit;
  font-size: 14px;
  font-style: normal;
  opacity: 0.55;
}

.library-rail-card {
  margin-top: auto;
  padding: 18px;
  border: 1px solid var(--wall-line);
  border-radius: 22px;
  background: var(--wall-card);
}

.library-rail-card strong {
  display: block;
  color: var(--wall-text);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.library-rail-card p {
  margin: 9px 0 14px;
  color: var(--wall-muted);
  font-size: 13px;
  line-height: 1.45;
}

.library-rail-card a,
.library-rail-foot a {
  color: var(--wall-text);
  text-decoration: none;
}

.library-rail-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--coral);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.library-rail-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--wall-muted);
  font-size: 13px;
  font-weight: 700;
}

.library-rail-foot a {
  color: var(--wall-muted);
}

.library-rail-foot a:hover {
  color: var(--coral);
}

.library-discovery {
  min-width: 0;
  padding: 24px 32px 72px;
  background: var(--wall-bg);
}

body.library-page:not(.item-page) .library-body .market-grid.is-masonry,
body.library-page:not(.item-page) .market-grid.is-masonry {
  display: block;
  column-count: 3;
  column-gap: 20px;
}

@media (min-width: 1680px) {
  body.library-page:not(.item-page) .market-grid.is-masonry {
    column-count: 4;
  }
}

@media (max-width: 1180px) {
  body.library-page:not(.item-page) .market-grid.is-masonry {
    column-count: 2;
  }
}

body.library-page:not(.item-page) .is-masonry .market-card {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0 0 20px;
  overflow: visible;
  break-inside: avoid;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), filter 0.35s ease;
}

body.library-page:not(.item-page) .market-grid.is-masonry .market-card.is-hidden {
  display: none;
}

body.library-page:not(.item-page) .is-masonry .market-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: none;
}

.market-card-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  color: inherit;
  text-decoration: none;
  background: var(--wall-card);
}

body.library-page:not(.item-page) .is-masonry .market-visual {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: #15120f;
}

body.library-page:not(.item-page) .market-card.is-landscape .market-visual { aspect-ratio: 4 / 3; }
body.library-page:not(.item-page) .market-card.is-square .market-visual { aspect-ratio: 1 / 1; }
body.library-page:not(.item-page) .market-card.is-tall .market-visual { aspect-ratio: 4 / 5; }
body.library-page:not(.item-page) .market-card.is-wide .market-visual { aspect-ratio: 16 / 9; }

body.library-page:not(.item-page) .market-visual:not(.is-gradient)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(240, 82, 53, 0.2), transparent 58%),
    linear-gradient(145deg, #221d19, #100f0e 72%);
}

body.library-page:not(.item-page) .is-masonry .market-visual img,
body.library-page:not(.item-page) .is-masonry .market-media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), filter 0.35s ease;
}

body.library-page:not(.item-page) .market-card:hover .market-visual img,
body.library-page:not(.item-page) .market-card:hover .market-media {
  transform: scale(1.035);
}

body.library-page:not(.item-page) .market-visual.is-gradient {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 26% 24%, rgba(240, 82, 53, 0.22), transparent 58%),
    linear-gradient(145deg, #24211e, #141311);
}

body.library-page:not(.item-page) .market-gradient-label {
  color: #5e574f;
  font-size: clamp(2rem, 4vw, 4.4rem);
}


body.library-page:not(.item-page) .market-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 56px 18px 18px;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, transparent, rgba(20, 19, 17, 0.9));
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.24s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

body.library-page:not(.item-page) .market-card:hover .market-overlay,
body.library-page:not(.item-page) .market-card:focus-within .market-overlay,
body.library-page:not(.item-page) .market-card-link:hover .market-overlay,
body.library-page:not(.item-page) .market-card-link:focus-visible .market-overlay {
  opacity: 1;
  transform: translateY(0);
}

body.library-page:not(.item-page) .is-masonry .market-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

body.library-page:not(.item-page) .market-title {
  margin: 0;
  color: var(--wall-text);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

body.library-page:not(.item-page) .market-title-row em {
  color: var(--wall-muted);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.library-page:not(.item-page) .is-masonry .market-tags {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
}

body.library-page:not(.item-page) .market-tags small {
  padding: 4px 8px;
  border: 1px solid var(--wall-line);
  border-radius: 999px;
  background: var(--wall-card);
  color: var(--wall-muted);
  font-size: 11px;
}

body.library-page:not(.item-page) .market-price,
body.library-page:not(.item-page) .market-badge {
  top: 12px;
  z-index: 4;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.library-page:not(.item-page) .market-price {
  right: 12px;
}

body.library-page:not(.item-page) .market-badge {
  left: 12px;
}

body.library-page:not(.item-page) .market-price.is-free {
  background: var(--wall-cream);
  color: var(--wall-card);
}

body.library-page:not(.item-page) .market-price.is-premium,
body.library-page:not(.item-page) .market-price.is-vault,
body.library-page:not(.item-page) .market-badge {
  background: var(--coral);
  color: #fff;
}

body.library-page .market-price.is-premium {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  background: var(--coral);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  letter-spacing: 0;
}

body.library-page .market-premium-icon {
  display: block;
  width: 17px;
  height: 17px;
}

body.library-page:not(.item-page) .library-empty {
  margin: 80px auto;
  color: var(--wall-muted);
  text-align: center;
}

body.library-page:not(.item-page) :is(.lib-filter-btn, .library-search input, .market-card-link, .library-rail-card a, .library-rail-foot a):focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

@media (hover: none) {
  body.library-page:not(.item-page) .market-overlay {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  body.library-page:not(.item-page) .market-overlay {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  body.library-page:not(.item-page) {
    --wall-shell-top: 92px;
    --wall-sticky-top: 74px;
  }

  .library-layout {
    display: block;
  }

  body.library-page:not(.item-page) .library-sidebar {
    position: sticky;
    top: var(--wall-sticky-top);
    height: auto;
    max-height: none;
    gap: 12px;
    padding: 12px 16px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--wall-line);
  }

  .library-rail-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 12px;
  }

  body.library-page:not(.item-page) .library-kicker,
  body.library-page:not(.item-page) .library-sub,
  .library-rail-card,
  .library-rail-foot {
    display: none;
  }

  body.library-page:not(.item-page) .library-h1 {
    max-width: none;
    font-size: 2rem;
    justify-self: end;
  }

  body.library-page:not(.item-page) .library-search {
    flex-basis: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .library-filter-nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  body.library-page:not(.item-page) .library-sidebar-label {
    display: none;
  }

  body.library-page:not(.item-page) .library-sidebar .lib-filter-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    gap: 10px;
    border-radius: 999px;
    background: var(--wall-card);
    white-space: nowrap;
  }

  .library-discovery {
    padding: 16px;
  }

  body.library-page:not(.item-page) .market-grid.is-masonry {
    column-count: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.library-page:not(.item-page) .market-card,
  body.library-page:not(.item-page) .market-visual img,
  body.library-page:not(.item-page) .market-media,
  body.library-page:not(.item-page) .market-overlay {
    transition: none;
  }
}

/* item-page gradient preview (on-palette coral wash, not rainbow) */
.item-preview-grad { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; background: radial-gradient(circle at 30% 26%, rgba(240, 82, 53, 0.2), transparent 62%), #1a1714; }
.item-preview-grad-label { font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; color: rgba(245, 241, 232, 0.28); }

/* ── BLOG: editorial reading-first (content-hub-27) ──────── */
/* hero: single editorial column (taped-notes decoration dropped) */
body.blog-page .blog-hero-shell { grid-template-columns: minmax(0, 1fr); }
body.blog-page .blog-hero-copy { max-width: min(100%, 1180px); }

/* reading progress bar (the one motivated motion: position in a long read) */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: transparent; }
.reading-progress span { display: block; height: 100%; background: #f05235; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.1s linear; }
@media (prefers-reduced-motion: reduce) { .reading-progress span { transition: none; } }

/* article foot: related posts (reuses .blog-row) */
.article-foot { width: min(100% - clamp(36px, 6vw, 96px), 1120px); margin: 0 auto; padding: clamp(56px, 8vw, 104px) 0 clamp(20px, 4vw, 44px); }
.article-foot-title { margin: 0 0 clamp(18px, 2.6vw, 30px); font-family: "Bogdan Lektorat", Impact, sans-serif; font-weight: 800; line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3.6rem); color: #14110f; }
.article-related { display: flex; flex-direction: column; }

/* ── BLOG INDEX: two-column journal ──────── */
.blog-journal { width: 100%; margin: 0; padding: clamp(118px, 12svh, 154px) 0 clamp(70px, 9vw, 126px); background: linear-gradient(to right, #14110f 0 47%, #ffffff 47% 100%); }
.blog-journal-grid { width: min(100% - clamp(36px, 6vw, 120px), 1580px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(42px, 5vw, 96px); align-items: start; }
.blog-journal-side { position: sticky; top: clamp(96px, 13vh, 150px); display: flex; flex-direction: column; align-items: flex-start; }
.blog-journal-side .content-kicker { margin: 0; color: rgba(20, 17, 15, 0.58); font-family: "Bogdan Montreal", "Sora", system-ui, sans-serif; font-size: clamp(1rem, 1.25vw, 1.55rem); line-height: 1; letter-spacing: -0.03em; }
.blog-journal-title { display: flex; flex-direction: column; margin: clamp(2px, 0.5vw, 8px) 0 0; font-family: "Bogdan Lektorat", Impact, sans-serif; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; text-transform: uppercase; font-size: clamp(8rem, 14vw, 16.5rem); color: #14110f; }
.blog-journal-title > span { display: block; }
.blog-journal-intro { margin: clamp(6px, 0.9vw, 14px) 0 clamp(24px, 2.8vw, 38px); max-width: 46ch; color: rgba(20, 17, 15, 0.7); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; letter-spacing: -0.02em; }
.blog-journal-topics { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; margin-bottom: clamp(30px, 3.4vw, 46px); }
.blog-topic-btn { padding: 8px 16px; min-height: 44px; border: 1.5px solid rgba(20, 17, 15, 0.22); border-radius: 999px; background: transparent; color: #14110f; font: inherit; font-size: clamp(13px, 0.9vw, 15px); line-height: 1; cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s ease, border-color 0.2s ease, transform 0.14s var(--ease-out); }
.blog-topic-btn:active { transform: scale(0.96); }
.blog-topic-btn:hover { border-color: #14110f; }
.blog-topic-btn:focus-visible { outline: 2px solid #f05235; outline-offset: 4px; }
.blog-topic-btn.is-active { background: #14110f; color: #fff; border-color: #14110f; }
.blog-journal-free { display: inline-flex; align-items: center; min-height: 44px; color: #f05235; font-size: clamp(16px, 1.12vw, 19px); text-transform: uppercase; letter-spacing: 0.01em; }
.blog-journal-free:hover { text-decoration: underline; }
.blog-journal-free:focus-visible { outline: 2px solid #f05235; outline-offset: 5px; }
.blog-journal-empty { padding: 30px 0; color: rgba(20, 17, 15, 0.6); }

/* readable rows inside the journal */
.blog-journal-list .blog-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
  grid-template-areas:
    "media copy";
  row-gap: 0;
  column-gap: clamp(28px, 3.4vw, 56px);
  align-items: stretch;
  padding: clamp(30px, 3.2vw, 52px) clamp(18px, 1.8vw, 30px);
  border-color: rgba(20, 17, 15, 0.22);
  border-radius: 16px;
  position: relative;
  transition: transform 0.3s var(--ease-out), background 0.3s ease, border-color 0.3s ease;
}
/* card-lift shadow lives on a pseudo-element so only opacity animates (GPU, no paint storm) */
.blog-journal-list .blog-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  box-shadow: 0 30px 60px -28px rgba(20, 17, 15, 0.45), 0 10px 22px -16px rgba(20, 17, 15, 0.25);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.blog-journal-list .blog-row:first-child { padding-top: 0; }
.blog-journal-list .blog-row-media { grid-area: media; position: relative; width: 100%; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(20, 17, 15, 0.2); border-radius: 4px; background: #14110f; }
.blog-journal-list .blog-row-lead .blog-row-media { aspect-ratio: 3 / 4; max-height: none; }
.blog-journal-list .blog-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) contrast(1.04); transition: transform 0.6s var(--ease-out), filter 0.4s ease; }
.blog-journal-list .blog-row-media-fallback { display: grid; place-items: center; }
.blog-journal-list .blog-row-media-fallback span { position: relative; z-index: 1; color: #f5f1e8; font-family: "Bogdan Lektorat", Impact, sans-serif; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.04em; }
.blog-journal-list .blog-row-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; height: 100%; gap: clamp(14px, 1.5vw, 22px); min-width: 0; }
.blog-journal-list .blog-row-head { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 18px; }
.blog-journal-list .blog-row-head span { font-family: "Sora", sans-serif; font-size: 12px; font-weight: 750; letter-spacing: 0.095em; text-transform: uppercase; color: #f05235; line-height: 1.2; }
.blog-journal-list .blog-row-head em { white-space: nowrap; text-align: right; color: rgba(20, 17, 15, 0.58); font-size: clamp(11px, 0.78vw, 12.5px); font-style: normal; }
.blog-journal-list .blog-row-copy strong { max-width: 22ch; font-family: "Sora", system-ui, sans-serif; font-size: clamp(1.75rem, 2.55vw, 3.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; text-transform: none; text-wrap: balance; }
.blog-journal-list .blog-row-cta { display: inline-flex; align-items: center; gap: 0.45em; min-height: 46px; padding: 0 22px; border: 1.5px solid rgba(20, 17, 15, 0.28); border-radius: 999px; color: #14110f; font-family: "Sora", system-ui, sans-serif; font-size: 0.95rem; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out); }
.blog-journal-list .blog-row-cta span { color: inherit; font-family: inherit; font-size: 1em; font-weight: inherit; }
.blog-journal-list .blog-row-copy p { margin-top: auto; max-width: 52ch; color: rgba(20, 17, 15, 0.66); font-size: clamp(0.96rem, 0.98vw, 1.08rem); line-height: 1.5; }
/* 3D card-up hover (replaces the old slide/zoom/pill-fill) */
/* hover gated behind real pointers so it never sticks on touch */
@media (hover: hover) and (pointer: fine) {
  .blog-journal-list .blog-row:hover { transform: translateY(-12px); background: #ffffff; border-color: transparent; z-index: 3; }
  .blog-journal-list .blog-row:hover::after { opacity: 1; }
  .blog-journal-list .blog-row:active { transform: translateY(-12px) scale(0.992); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-journal-list .blog-row { transition: background 0.2s ease, border-color 0.2s ease; }
  .blog-journal-list .blog-row:hover { transform: none; }
}
.blog-journal-list .blog-row:focus-visible { outline: 2px solid #f05235; outline-offset: 8px; }
.blog-journal-list .blog-row-lead { min-height: 0; }
.blog-journal-list .blog-row-lead .blog-row-copy strong { font-size: clamp(1.95rem, 2.85vw, 3.7rem); }
.blog-journal-list .blog-row[hidden] { display: none; }

/* ── split-screen: dark left rail (recolor for #14110f), coral only on BLOG. ── */
/* On the blog index the IFL pill sits over the journal's black left panel, so
   it inverts to stay legible; MENU + LET'S TALK stay dark over the white half.
   Article pages carry .blog-page too but are cream edge to edge — there the
   inversion left a pale pill stranded beside two dark ones. */
body.blog-page:not(.article-page) .site-header .brand-mark { background: #f5f1e8; color: #14110f; }
body.blog-page .blog-journal-side .content-kicker { color: rgba(245, 241, 232, 0.62); }
body.blog-page .blog-journal-side.fade-up { opacity: 1; transform: none; }
/* Child combinator, not descendant: these target the two line spans, and the
   title's characters are now spans inside those lines. */
.blog-journal-title > span:first-child { color: #f5f1e8; }
.blog-journal-title > span:nth-child(2) { color: #f05235; }
.blog-journal-intro { color: rgba(245, 241, 232, 0.64); }
.blog-journal-topics .blog-topic-btn { border-color: rgba(245, 241, 232, 0.24); color: #f5f1e8; }
.blog-journal-topics .blog-topic-btn:hover { border-color: rgba(245, 241, 232, 0.62); }
.blog-journal-topics .blog-topic-btn.is-active { background: #f05235; border-color: #f05235; color: #fff; }
.blog-journal-topics .blog-topic-btn:focus-visible { outline-offset: 4px; }
.blog-journal-free { color: #f05235; }

@media (max-width: 900px) {
  /* stacked: the left/right split becomes top-dark / bottom-white */
  .blog-journal { background: #14110f; }
  .blog-journal-grid { grid-template-columns: 1fr; gap: 0; }
  .blog-journal-list { background: #ffffff; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: clamp(28px, 6vw, 46px); padding: clamp(32px, 7vw, 54px) clamp(20px, 6vw, 40px); }
  .blog-journal-side { position: static; }
  .blog-journal-title { font-size: clamp(5.8rem, 20vw, 10rem); }
  .blog-journal-intro { max-width: 40ch; }
  .blog-journal-topics { max-width: 100%; }
  .blog-journal-list .blog-row { grid-template-columns: minmax(200px, 0.85fr) minmax(0, 1fr); grid-template-areas: "media copy"; }
  .blog-journal-list .blog-row-copy em { justify-self: start; text-align: left; }
  .blog-journal-list .blog-row-copy strong { max-width: 30ch; }
}

@media (max-width: 560px) {
  .blog-journal { width: 100%; padding-top: 96px; padding-bottom: clamp(88px, 18vw, 120px); }
  .blog-journal-title { font-size: clamp(4.7rem, 22vw, 7rem); }
  .blog-journal-intro { font-size: 1.06rem; line-height: 1.46; }
  .blog-topic-btn { min-height: 48px; }
  body.blog-page .sticky-talk { opacity: 0; pointer-events: none; transform: translate(-50%, calc(100% + 24px)); }
  .blog-journal-list .blog-row { grid-template-columns: 1fr; grid-template-areas: "media" "copy"; padding: 26px 0; }
  .blog-journal-list .blog-row-media,
  .blog-journal-list .blog-row-lead .blog-row-media { aspect-ratio: 16 / 9.5; margin-bottom: 4px; max-height: 260px; }
  .blog-journal-list .blog-row-copy { grid-template-columns: 1fr; grid-template-areas: "cat" "meta" "title" "excerpt" "cta"; }
  .blog-journal-list .blog-row-copy em { justify-self: start; text-align: left; }
  .blog-journal-list .blog-row-copy strong,
  .blog-journal-list .blog-row-lead .blog-row-copy strong { max-width: 100%; font-size: clamp(1.45rem, 7.5vw, 2.1rem); line-height: 1.08; }
  .blog-journal-list .blog-row:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  body.blog-page .site-header {
    animation: introFade 0.85s 0.2s ease both;
  }

  body.blog-page .blog-journal-side .content-kicker,
  body.blog-page .blog-journal-intro,
  body.blog-page .blog-journal-free {
    opacity: 0;
    transform: translateY(18px);
    animation: blogHeroRise 0.72s var(--ease-out) both;
  }

  body.blog-page .blog-journal-side .content-kicker { animation-delay: 0.18s; }
  body.blog-page .blog-journal-intro { animation-delay: 0.44s; }
  body.blog-page .blog-journal-free { animation-delay: 0.72s; }

  body.blog-page .blog-journal-title > span {
    opacity: 0;
    transform: translateY(0.62em);
    animation: heroWordIn 0.85s var(--ease-out) both;
  }

  body.blog-page .blog-journal-title > span:first-child { animation-delay: 0.25s; }
  body.blog-page .blog-journal-title > span:nth-child(2) { animation-delay: 0.34s; }

  body.blog-page .blog-topic-btn {
    opacity: 0;
    transform: translateY(18px);
    animation: blogHeroRise 0.58s var(--ease-out) both;
  }

  body.blog-page .blog-topic-btn:nth-child(1) { animation-delay: 0.52s; }
  body.blog-page .blog-topic-btn:nth-child(2) { animation-delay: 0.57s; }
  body.blog-page .blog-topic-btn:nth-child(3) { animation-delay: 0.62s; }
  body.blog-page .blog-topic-btn:nth-child(4) { animation-delay: 0.67s; }
  body.blog-page .blog-topic-btn:nth-child(5) { animation-delay: 0.72s; }
  body.blog-page .blog-topic-btn:nth-child(6) { animation-delay: 0.77s; }
  body.blog-page .blog-topic-btn:nth-child(7) { animation-delay: 0.82s; }

  body.blog-page .blog-journal-list {
    animation: blogListIn 0.8s 0.58s var(--ease-out) both;
  }

  @keyframes blogHeroRise {
    to { opacity: 1; transform: none; }
  }

  @keyframes blogListIn {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }
}


/* ── BLOG: article imagery (cover + inline figures) ──────── */
.article-cover { width: min(100%, 980px); margin: clamp(34px, 5vw, 60px) auto 0; }
.article-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.article-figure { margin: clamp(32px, 4.5vw, 56px) 0; }
.article-figure img { display: block; width: 100%; border-radius: 3px; }
.article-figure figcaption { margin-top: 10px; color: rgba(20, 17, 15, 0.6); font-size: 14px; line-height: 1.4; }

/* ── BLOG ARTICLE: reading-first typography (Substack-calm) ──────── */
/* Tighter shell + left-aligned hero on one reading measure */
body.article-page .article-shell { padding: clamp(112px, 13vh, 152px) 0 clamp(72px, 10vw, 120px); }
body.article-page .article-hero { width: min(100%, 680px); margin: 0 auto; text-align: left; }
body.article-page .article-hero .content-meta { justify-content: flex-start; }
body.article-page .article-hero h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  word-spacing: normal;
}
body.article-page .article-hero > p {
  width: 100%;
  margin: clamp(16px, 2.2vw, 26px) 0 0;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.38rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(20, 17, 15, 0.66);
}

/* Reading column */
body.article-page .article-content {
  width: min(100%, 680px);
  margin: clamp(34px, 4.5vw, 56px) auto 0;
  color: rgba(20, 17, 15, 0.84);
}
body.article-page .article-content .lead {
  font-size: clamp(1.22rem, 1.05rem + 0.7vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  margin: 0 0 1.1em;
  color: #14110f;
}
body.article-page .article-content p {
  font-size: 1.18rem;
  line-height: 1.75;
  letter-spacing: -0.005em;
  margin: 0 0 1.45em;
}
body.article-page .article-content h2 {
  margin: 1.9em 0 0.5em;
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
body.article-page .article-content h3 {
  margin: 1.6em 0 0.35em;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-weight: 800;
  font-size: clamp(1.18rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #14110f;
}
body.article-page .article-content ul { margin: 0 0 1.45em; padding-left: 1.2em; }
body.article-page .article-content li { font-size: 1.18rem; line-height: 1.7; margin: 0 0 0.5em; }
body.article-page .article-content li::marker { color: #f05235; }
body.article-page .article-content strong { color: #14110f; }
body.article-page .article-content a { color: #f05235; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Cover + figures share the reading column's exact left edge */
body.article-page .article-cover { width: min(100%, 680px); margin: clamp(30px, 4vw, 52px) auto 0; }

/* Calmer related-posts heading, same column */
body.article-page .article-foot { width: min(100%, 680px); margin: 0 auto; padding: clamp(56px, 8vw, 104px) 0 clamp(20px, 4vw, 44px); }
body.article-page .article-foot-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); }

/* Compact related rows (the giant editorial row is wrong at this width) */
body.article-page .article-related .blog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "cat meta" "title title";
  row-gap: 8px;
  column-gap: 16px;
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 30px) 0;
}
body.article-page .article-related .blog-row span {
  grid-area: cat;
  font-family: "Sora", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f05235;
  line-height: 1.2;
}
body.article-page .article-related .blog-row em { grid-area: meta; }
body.article-page .article-related .blog-row strong {
  grid-area: title;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
body.article-page .article-related .blog-row p { display: none; }
body.article-page .article-related .blog-row:hover { transform: translateX(6px); }

/* ── BLOG ARTICLE: connected editorial split ──────────────
   One shared system for every generated article: title and portrait operate
   as a single hero, while each chapter keeps its heading beside its prose. */
body.article-page .article-editorial {
  width: min(calc(100% - clamp(36px, 7vw, 112px)), 1320px);
  padding: clamp(112px, 13vh, 152px) 0 clamp(72px, 9vw, 118px);
}

body.article-page .site-header {
  opacity: 1;
  animation: none;
}

body.article-page .article-editorial-hero,
body.article-page .article-chapters {
  width: 100%;
}

body.article-page .article-hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(22px, 2.5vw, 34px);
  border-bottom: 1px solid rgba(20, 17, 15, 0.22);
}

body.article-page .article-hero-topline .back-link {
  margin: 0;
}

body.article-page .article-hero-topline .content-meta {
  justify-content: flex-end;
  margin: 0;
}

body.article-page .article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.92fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: stretch;
  margin-top: clamp(40px, 5vw, 72px);
}

body.article-page .article-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 0 8px;
}

body.article-page .article-hero-copy h1 {
  max-width: 100%;
  margin: 0;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4.2rem, 6.8vw, 6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
  word-spacing: var(--display-word-spacing);
  text-wrap: balance;
  text-transform: uppercase;
}

body.article-page .article-hero-copy h1 em {
  display: inline-block;
  color: #f05235;
  font-family: var(--yes-script-font);
  font-size: 1.02em;
  font-style: normal;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: none;
}

body.article-page .article-hero-copy > p {
  max-width: 52ch;
  margin: clamp(28px, 3vw, 44px) 0 0;
  color: #4a3f37;
  font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  line-height: 1.58;
  text-wrap: pretty;
}

body.article-page .article-hero-copy .content-meta {
  justify-content: flex-start;
  margin: clamp(30px, 3.4vw, 48px) 0 0;
}

/* The frame carries the picture's own average colour, so the space is filled
   from the first paint rather than showing a white rectangle. The photograph
   then settles into it out of a slight overscale - the same move the masked
   reveals make elsewhere, but fired by the image's own load rather than by an
   observer, because this is the largest element on the page. */
body.article-page .article-hero-portrait {
  position: relative;
  min-width: 0;
  min-height: clamp(360px, 36vw, 540px);
  margin: 0;
  overflow: hidden;
  background: var(--cover-tint, #ffffff);
  box-shadow:
    0 2px 4px rgba(20, 17, 15, 0.16),
    0 24px 58px rgba(20, 17, 15, 0.14),
    0 54px 100px rgba(20, 17, 15, 0.09);
}

body.article-page .article-hero-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── The hero enters as one gesture ──────────────────────
   Title and picture start together and travel in opposite directions: the
   words rise, the photograph descends into the tinted frame already holding
   its place. One trigger fires both — the image's own load — so neither is
   queued behind a webfont or a scroll observer. The supporting lines follow
   a beat later so the pair reads as the event and the rest as its wake.
   ───────────────────────────────────────────────────────── */
html.has-js body.article-page .article-hero-copy h1 {
  opacity: 0;
  transform: translateY(54px);
}

html.has-js body.article-page .article-hero-portrait img {
  opacity: 0;
  transform: translateY(-14%);
}

html.has-js body.article-page .article-hero-copy > p,
html.has-js body.article-page .article-hero-copy .content-meta {
  opacity: 0;
  transform: translateY(18px);
}

html.has-js body.article-page .article-editorial-hero.is-ready .article-hero-copy h1,
html.has-js body.article-page .article-editorial-hero.is-ready .article-hero-portrait img {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 1.35s var(--mo-expo),
    opacity 0.8s ease;
}

html.has-js body.article-page .article-editorial-hero.is-ready .article-hero-copy > p,
html.has-js body.article-page .article-editorial-hero.is-ready .article-hero-copy .content-meta {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 1.05s var(--mo-expo) 0.3s,
    opacity 0.6s ease 0.3s;
}

html.has-js body.article-page .article-editorial-hero.is-ready .article-hero-copy .content-meta {
  transition-delay: 0.46s;
}

@media (prefers-reduced-motion: reduce) {
  html.has-js body.article-page .article-hero-copy h1,
  html.has-js body.article-page .article-hero-portrait img,
  html.has-js body.article-page .article-hero-copy > p,
  html.has-js body.article-page .article-hero-copy .content-meta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* The opening runs on the chapters' own grid — contents on the heading rail,
   prose on the reading rail — so the column the reader is following never
   moves between the intro and the first chapter. */
body.article-page .article-opening {
  display: grid;
  grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(48px, 8vw, 132px);
  align-items: start;
  margin: clamp(64px, 8vw, 112px) 0;
  color: #4a3f37;
  text-align: left;
}

body.article-page .article-opening-copy {
  width: min(100%, 62ch);
  min-width: 0;
}

/* Quiet by design: it is a map, not a call to action. It stays with the reader
   on tall screens and scrolls away on short ones. */
body.article-page .article-toc {
  position: sticky;
  top: clamp(96px, 12vh, 132px);
  min-width: 0;
}

@media (max-height: 700px) {
  body.article-page .article-toc { position: static; }
}

body.article-page .article-toc-title {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  color: rgba(20, 17, 15, 0.5);
  font-family: "Sora", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.article-page .article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

body.article-page .article-toc li {
  counter-increment: toc;
  border-top: 1px solid rgba(20, 17, 15, 0.16);
}

body.article-page .article-toc li:last-child {
  border-bottom: 1px solid rgba(20, 17, 15, 0.16);
}

body.article-page .article-toc a {
  display: grid;
  grid-template-columns: 2.1em 1fr;
  gap: 4px;
  padding: 0.72em 0;
  color: #4a3f37;
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(0.92rem, 0.95vw, 1rem);
  line-height: 1.4;
  text-decoration: none;
  text-wrap: pretty;
  transition: color 0.25s ease;
}

body.article-page .article-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: rgba(20, 17, 15, 0.38);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

body.article-page .article-toc a:hover,
body.article-page .article-toc a:focus-visible {
  color: #f05235;
}

body.article-page .article-toc a:hover::before,
body.article-page .article-toc a:focus-visible::before {
  color: #f05235;
}

/* An anchored jump must not tuck the heading under the floating header. */
body.article-page .article-chapter {
  scroll-margin-top: clamp(88px, 11vh, 124px);
}

body.article-page .article-opening:empty {
  display: none;
}

body.article-page .article-opening-copy p {
  margin: 0;
  color: #14110f;
  font-size: clamp(1.12rem, 1.38vw, 1.45rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

body.article-page .article-opening-copy p + p {
  margin-top: 1.1em;
}

body.article-page .article-opening-copy strong {
  color: #f05235;
  font-weight: 700;
}

body.article-page .article-content.article-chapters {
  margin: 0;
  color: #4a3f37;
}

body.article-page .article-chapter {
  display: grid;
  grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(48px, 8vw, 132px);
  align-items: start;
  padding: clamp(46px, 6vw, 82px) 0;
  border-top: 1px solid rgba(20, 17, 15, 0.22);
}

body.article-page .article-chapter:last-child {
  border-bottom: 1px solid rgba(20, 17, 15, 0.22);
}

body.article-page .article-chapter:first-child {
  border-top: 0;
}

body.article-page .article-chapter > h2 {
  max-width: 11ch;
  margin: 0;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.6rem, 4.25vw, 4.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  word-spacing: var(--display-word-spacing-compact);
  text-transform: uppercase;
  text-wrap: balance;
}

body.article-page .article-chapter-copy {
  width: min(100%, 72ch);
  min-width: 0;
}

body.article-page .article-chapter-copy > :first-child {
  margin-top: 0;
}

body.article-page .article-chapter-copy > :last-child {
  margin-bottom: 0;
}

body.article-page .article-chapter-copy p,
body.article-page .article-chapter-copy li {
  color: #4a3f37;
  font-size: clamp(1.02rem, 1.15vw, 1.18rem);
  line-height: 1.75;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

body.article-page .article-chapter-copy p {
  margin: 0 0 1.35em;
}

body.article-page .article-chapter-copy h3 {
  margin: 1.8em 0 0.55em;
  color: #14110f;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-transform: none;
}

body.article-page .article-chapter-copy ul {
  margin: 0 0 1.45em;
  padding-left: 1.25em;
}

body.article-page .article-chapter-copy li {
  margin: 0 0 0.55em;
  padding-left: 0.2em;
}

body.article-page .article-chapter-copy li::marker {
  color: #f05235;
}

body.article-page .article-chapter-copy strong {
  color: #14110f;
}

body.article-page .article-chapter-copy a {
  color: #f05235;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.article-page .article-figure {
  margin: clamp(30px, 4vw, 52px) 0;
}


body.article-page .article-foot {
  width: min(calc(100% - clamp(36px, 7vw, 112px)), 1320px);
  padding: clamp(72px, 9vw, 120px) 0 clamp(34px, 5vw, 64px);
}

body.article-page .article-foot-title {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
}

body.article-page .article-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 72px);
}

body.article-page .article-related .blog-row:hover {
  transform: translateY(-3px);
}

body.article-page .split-cta .content-btn-light {
  border-color: #f05235;
  background: #f05235;
  color: #14110f;
}

@media (max-width: 980px) {
  body.article-page .article-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.66fr);
    gap: clamp(32px, 5vw, 54px);
  }

  body.article-page .article-hero-copy h1 {
    font-size: clamp(3.7rem, 7.6vw, 5rem);
  }

  body.article-page .article-hero-portrait {
    min-height: clamp(300px, 40vw, 420px);
  }

  body.article-page .article-opening,
  body.article-page .article-chapter {
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(34px, 6vw, 72px);
  }
}

@media (max-width: 720px) {
  body.article-page .article-editorial {
    width: calc(100% - 32px);
    padding-top: 104px;
  }

  body.article-page .article-hero-topline {
    align-items: flex-start;
  }

  body.article-page .article-hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  body.article-page .article-hero-copy h1 {
    font-size: clamp(3.25rem, 14vw, 4.4rem);
  }

  body.article-page .article-hero-copy > p {
    margin-top: 28px;
  }

  body.article-page .article-hero-portrait {
    width: min(88%, 390px);
    justify-self: center;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  body.article-page .article-opening {
    grid-template-columns: 1fr;
    gap: 38px;
    margin: 78px 0;
    text-align: left;
  }

  body.article-page .article-toc {
    position: static;
  }

  body.article-page .article-chapter {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  body.article-page .article-chapter {
    padding: 48px 0;
  }

  body.article-page .article-chapter > h2 {
    max-width: 100%;
  }

  body.article-page .article-foot {
    width: calc(100% - 32px);
  }

  body.article-page .article-related {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ── Compact flat footer (blog index + article pages) ──────── */
.site-footer.is-compact { background: #14110f; color: #f5f1e8; border-top: 0; }
.site-footer.is-compact .compact-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 34px); width: min(100% - clamp(36px, 6vw, 96px), 1320px); margin: 0 auto; padding: clamp(40px, 5vw, 66px) 0 clamp(22px, 2.6vw, 32px); }
.site-footer.is-compact .brand-mark { color: #f5f1e8; }
.site-footer.is-compact .compact-footer-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); margin-right: auto; }
.site-footer.is-compact .compact-footer-nav a { color: rgba(245, 241, 232, 0.66); font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; transition: color 0.2s ease; }
.site-footer.is-compact .compact-footer-nav a:hover,
.site-footer.is-compact .compact-footer-nav a[aria-current="page"] { color: #f05235; }
/* contact footer nav matches its top nav: pure letter roll-up, no coral colour flash */
body.contact-page .site-footer.is-compact .compact-footer-nav a:hover:not([aria-current="page"]) { color: rgba(245, 241, 232, 0.66); }
.site-footer.is-compact .compact-footer-socials { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); }
.site-footer.is-compact .compact-footer-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #f5f1e8; transition: color 0.2s ease, transform 0.14s var(--ease-out); }
.site-footer.is-compact .compact-footer-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.site-footer.is-compact .compact-footer-social:hover { color: #f05235; }
.site-footer.is-compact .compact-footer-social:active { transform: scale(0.9); }
.site-footer.is-compact .compact-footer-social:focus-visible { outline: 2px solid #f05235; outline-offset: 2px; border-radius: 8px; }
.site-footer.is-compact .compact-footer-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(8px, 1.4vw, 24px); text-align: center; width: min(100% - clamp(36px, 6vw, 96px), 1320px); margin: 0 auto; padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid rgba(245, 241, 232, 0.14); color: rgba(245, 241, 232, 0.5); font-size: 13px; }
/* Once the row wraps, brand / nav / socials each take their own line. Left
   against a centred bottom bar reads as two different footers stacked, so at
   this width the whole thing centres and the two closing lines stack instead
   of colliding 6px apart. */
@media (max-width: 600px) {
  .site-footer.is-compact .compact-footer-row {
    justify-content: center;
    gap: 20px;
  }

  /* Navigation and social groups take their own lines. The logo stays a
     compact chip instead of inheriting a full-width flex basis. */
  .site-footer.is-compact .compact-footer-row > :is(.compact-footer-nav, .compact-footer-socials) {
    flex: 0 0 100%;
  }

  .site-footer.is-compact .compact-footer-nav {
    justify-content: center;
    /* the auto margin is what pins socials right on desktop; on one line per
       item it just drags the nav back off centre */
    margin-right: 0;
  }

  .site-footer.is-compact .compact-footer-socials { justify-content: center; }

  .site-footer.is-compact .compact-footer-bottom {
    flex-direction: column;
    gap: 6px;
  }
}

/* Library footer uses the exact compact footer shell from Blog. Older Library
   CTA/footer bridge styles used a negative margin and rounded top corners. */
body.library-page .site-footer.is-compact {
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  background: #14110f;
}

/* IFL prompt pages: flat three-colour system, utility-first content */
body.library-page:not(.item-page) .prompt-index-card {
  border: 0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

body.library-page:not(.item-page) .prompt-index-card:hover {
  transform: translateY(-5px);
}

.prompt-index-link {
  display: flex;
  min-height: 470px;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
  border-left: 6px solid #f05235;
  border-radius: 18px;
  background: #ffffff;
  color: #14110f;
  text-decoration: none;
}

.prompt-index-meta,
.prompt-index-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.prompt-index-meta {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20, 17, 15, 0.2);
  color: #4a3f37;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.prompt-index-meta strong {
  color: #f05235;
}

.prompt-index-link h3 {
  max-width: 11ch;
  margin: clamp(34px, 4vw, 56px) 0 0;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.6rem, 4vw, 4.8rem);
  font-weight: 800;
  line-height: 0.87;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.prompt-index-link > p {
  max-width: 48ch;
  margin: 22px 0 0;
  color: #4a3f37;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.52;
}

.prompt-index-result {
  display: grid;
  gap: 4px;
  margin-top: 24px;
}

.prompt-index-result small {
  color: #4a3f37;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.prompt-index-result strong {
  font-size: 14px;
}

.prompt-index-foot {
  margin-top: auto;
  padding-top: 28px;
}

.prompt-index-foot > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-index-foot i {
  padding: 5px 9px;
  border: 1px solid rgba(20, 17, 15, 0.22);
  border-radius: 999px;
  color: #4a3f37;
  font-size: 10px;
  font-style: normal;
}

.prompt-index-foot > strong {
  color: #14110f;
  font-size: 12px;
  text-transform: uppercase;
}

/* Library prompt discovery: contextual subcategories sit directly below the
   always-visible primary chip row when Prompts is selected. */
.library-v2 #lv2-grid[hidden] {
  display: none;
}

.library-v2 .prompt-context-chips {
  flex: 1 0 100%;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 4px 4px clamp(12px, 1.5vw, 24px);
  background: transparent;
  animation: prompt-context-reveal 0.32s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.library-v2 .prompt-context-chips[hidden] {
  display: none;
}

.library-v2 .prompt-context-chips .lv2-chip {
  min-height: 36px;
  padding: 7px 13px;
  background: transparent;
  font-size: 12px;
}

.library-v2 .prompt-context-chips .lv2-chip.is-active {
  border-color: #f05235;
  background: #f05235;
  color: #ffffff;
}

.library-v2 .prompt-context-chips .lv2-chip.is-active i {
  color: #ffffff;
}

.library-v2 .lv2-chip[data-filter="prompts"].is-active {
  border-color: #f05235;
  background: transparent;
  color: #f05235;
}

@keyframes prompt-context-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

.library-v2 .prompt-collection-card {
  border-radius: 18px;
  background: #201d1a;
}

.library-v2 .prompt-collection-link {
  container-type: inline-size;
  display: flex;
  min-height: 0;
  aspect-ratio: 4 / 5;
  flex-direction: column;
  gap: clamp(18px, 5cqw, 30px);
  padding: clamp(22px, 6cqw, 38px);
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 18px;
  background: #201d1a;
  color: #f5f1e8;
  text-decoration: none;
  transition: border-color 0.24s ease, transform 0.24s ease;
}

.library-v2 .prompt-collection-link:hover,
.library-v2 .prompt-collection-link:focus-visible {
  border-color: #f05235;
  transform: translateY(-3px);
}

.library-v2 .prompt-collection-link:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 3px;
}

.prompt-collection-top,
.prompt-collection-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.prompt-collection-top {
  padding-bottom: clamp(14px, 4cqw, 22px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
  color: rgba(245, 241, 232, 0.62);
  font-size: clamp(10px, 3cqw, 12px);
}

.prompt-collection-top strong {
  color: #f05235;
}

.prompt-collection-mark {
  display: block;
  margin-top: auto;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3.4rem, 22cqw, 7rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.prompt-collection-mark span {
  color: #f05235;
}

.prompt-collection-copy {
  max-width: 36ch;
  color: rgba(245, 241, 232, 0.66);
  font-size: clamp(12px, 3.4cqw, 15px);
  line-height: 1.5;
}

.prompt-collection-bottom {
  align-items: end;
  padding-top: clamp(14px, 4cqw, 22px);
  border-top: 1px solid rgba(245, 241, 232, 0.16);
}

.prompt-collection-bottom > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-collection-bottom i {
  padding: 5px 8px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  color: rgba(245, 241, 232, 0.66);
  font-size: 9px;
  font-style: normal;
}

.prompt-collection-bottom > strong {
  flex: none;
  color: #f5f1e8;
  font-size: 11px;
}

.prompt-directory {
  scroll-margin-top: 190px;
  padding: clamp(18px, 2.4vw, 34px) 0 0;
  color: #f5f1e8;
}

.prompt-directory[hidden] {
  display: none;
}

.prompt-directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.55fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: end;
  padding: clamp(32px, 5vw, 70px) 0 clamp(38px, 5vw, 66px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}

.prompt-directory-head > div > p {
  margin: 0 0 20px;
  color: #f05235;
  font-size: 14px;
  font-weight: 700;
}

.prompt-directory-head h2 {
  max-width: 12ch;
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.prompt-directory-head h2 span {
  color: #f05235;
}

.prompt-directory-head > p {
  max-width: 48ch;
  margin: 0;
  color: rgba(245, 241, 232, 0.64);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
}

.prompt-directory-search {
  padding: clamp(34px, 5vw, 64px) 0 clamp(24px, 3vw, 38px);
}

.prompt-directory-search > label {
  display: block;
  margin-bottom: 13px;
  color: rgba(245, 241, 232, 0.64);
  font-size: 12px;
}

.prompt-directory-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
  border-bottom: 2px solid rgba(245, 241, 232, 0.32);
}

.prompt-directory-search input {
  width: 100%;
  min-height: 66px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f5f1e8;
  font: 500 clamp(1.2rem, 2vw, 1.8rem)/1.2 "Sora", system-ui, sans-serif;
}

.prompt-directory-search input::placeholder {
  color: rgba(245, 241, 232, 0.36);
}

.prompt-directory-search > div:focus-within {
  border-color: #f05235;
}

.prompt-directory-search > div > span {
  color: #f05235;
  font-size: 28px;
  text-align: right;
}

.prompt-directory-controls {
  display: grid;
  gap: 22px;
  padding: 0 0 clamp(32px, 4vw, 52px);
}

.prompt-niche-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-niche-filter button,
.prompt-directory-results button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  background: #201d1a;
  color: rgba(245, 241, 232, 0.66);
  font: 600 12px/1 "Sora", system-ui, sans-serif;
  cursor: pointer;
}

.prompt-niche-filter button:hover,
.prompt-niche-filter button.is-active {
  border-color: #f05235;
  background: #f05235;
  color: #ffffff;
}

.prompt-niche-filter button:focus-visible,
.prompt-directory-results button:focus-visible,
.prompt-select-filters select:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 3px;
}

.prompt-select-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.prompt-select-filters label {
  display: grid;
  gap: 8px;
}

.prompt-select-filters label > span {
  color: rgba(245, 241, 232, 0.52);
  font-size: 11px;
}

.prompt-select-filters select {
  width: 100%;
  min-height: 50px;
  padding: 0 40px 0 14px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 10px;
  background: #201d1a;
  color: #f5f1e8;
  font: 500 13px/1.2 "Sora", system-ui, sans-serif;
}

.prompt-directory-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.prompt-directory-results p {
  margin: 0;
  color: rgba(245, 241, 232, 0.58);
  font-size: 13px;
}

.prompt-directory-results p strong {
  color: #f5f1e8;
}

.prompt-directory-results button {
  min-height: 38px;
  background: transparent;
}

.prompt-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
}

.prompt-visual-card[hidden] {
  display: none;
}

.prompt-visual-card {
  min-width: 0;
}

.prompt-visual-card .market-card-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  color: #f5f1e8;
  text-decoration: none;
}

.prompt-card-visual {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 18px;
  background: #201d1a;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

.prompt-card-cover {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: clamp(22px, 6cqw, 36px);
  border-left: 5px solid #f05235;
}

.prompt-card-kicker {
  max-width: calc(100% - 72px);
  color: rgba(245, 241, 232, 0.58);
  font-size: clamp(10px, 2.8cqw, 12px);
  line-height: 1.35;
}

.prompt-card-cover > strong {
  max-width: 10ch;
  margin-top: clamp(26px, 8cqw, 48px);
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.2rem, 12cqw, 4.9rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.prompt-card-sheet {
  display: grid;
  gap: clamp(8px, 2.4cqw, 13px);
  margin-top: auto;
  padding: clamp(16px, 4.8cqw, 28px);
  border-radius: 12px;
  background: #f5f1e8;
  color: #14110f;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 14px 28px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.2deg);
  transition: transform 0.34s cubic-bezier(0.23, 1, 0.32, 1);
}

.prompt-card-sheet small {
  color: #4a3f37;
  font-size: clamp(8px, 2.2cqw, 10px);
  font-weight: 700;
}

.prompt-card-sheet > span {
  position: relative;
  padding: clamp(7px, 1.8cqw, 10px) 0 clamp(7px, 1.8cqw, 10px) 18px;
  border-top: 1px solid rgba(20, 17, 15, 0.18);
  color: #14110f;
  font-size: clamp(9px, 2.5cqw, 12px);
  font-weight: 700;
}

.prompt-card-sheet > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #f05235;
  transform: translateY(-50%) rotate(45deg);
}

.prompt-card-sheet em {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(20, 17, 15, 0.22);
  border-radius: 999px;
  color: #4a3f37;
  font-size: clamp(8px, 2.1cqw, 10px);
  font-style: normal;
}

.prompt-visual-card:hover .prompt-card-sheet,
.prompt-visual-card:focus-within .prompt-card-sheet {
  transform: rotate(0) translateY(-3px);
}

.prompt-visual-card .market-card-link:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 3px;
}

.prompt-directory-card[hidden] {
  display: none;
}

.prompt-directory-card > a {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-left: 5px solid #f05235;
  border-radius: 14px;
  background: #201d1a;
  color: #f5f1e8;
  text-decoration: none;
  transition: border-color 0.24s ease, transform 0.24s ease;
}

.prompt-directory-card > a:hover,
.prompt-directory-card > a:focus-visible {
  border-color: #f05235;
  transform: translateY(-3px);
}

.prompt-directory-card > a:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 3px;
}

.prompt-directory-card-meta,
.prompt-directory-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.prompt-directory-card-meta {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  color: rgba(245, 241, 232, 0.58);
  font-size: 11px;
}

.prompt-directory-card-meta i {
  color: #f05235;
  font-style: normal;
}

.prompt-directory-card-meta strong {
  color: #f05235;
}

.prompt-directory-card h3 {
  max-width: 14ch;
  margin: 34px 0 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.7rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.prompt-directory-card > a > p {
  max-width: 54ch;
  margin: 22px 0 0;
  color: rgba(245, 241, 232, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

.prompt-directory-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
}

.prompt-directory-card dl div {
  padding-top: 12px;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.prompt-directory-card dt {
  color: rgba(245, 241, 232, 0.46);
  font-size: 10px;
}

.prompt-directory-card dd {
  margin: 5px 0 0;
  color: #f5f1e8;
  font-size: 12px;
  font-weight: 700;
}

.prompt-directory-card-foot {
  align-items: end;
  margin-top: auto;
  padding-top: 30px;
}

.prompt-directory-card-foot > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-directory-card-foot i {
  padding: 5px 8px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  color: rgba(245, 241, 232, 0.64);
  font-size: 9px;
  font-style: normal;
}

.prompt-directory-card-foot > strong {
  color: #f5f1e8;
  font-size: 11px;
}

.prompt-directory-empty {
  padding: clamp(58px, 8vw, 100px) 24px;
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 14px;
  text-align: center;
}

.prompt-directory-empty h3 {
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  text-transform: uppercase;
}

.prompt-directory-empty p {
  margin: 12px 0 0;
  color: rgba(245, 241, 232, 0.6);
}

@media (max-width: 860px) {
  .library-v2 .prompt-context-chips {
    width: 100%;
    flex-wrap: nowrap;
    padding-left: 4px;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .library-v2 .prompt-context-chips[hidden] {
    display: none;
  }

  .library-v2 .prompt-context-chips .lv2-chip {
    flex: 0 0 auto;
  }

  .prompt-directory-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .prompt-directory-head h2 {
    max-width: 10ch;
  }

  .prompt-select-filters {
    grid-template-columns: 1fr;
  }

  .prompt-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  .library-v2 .prompt-context-chips .lv2-chip {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .prompt-directory-grid {
    grid-template-columns: 1fr;
  }

  .prompt-directory {
    scroll-margin-top: 245px;
  }

  .prompt-directory-head h2 {
    font-size: clamp(3.45rem, 18vw, 5rem);
  }

  .prompt-directory-search > div {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .prompt-directory-search input {
    min-height: 58px;
    font-size: 1rem;
  }

  .prompt-directory-card > a {
    min-height: 0;
  }

  .prompt-directory-card dl {
    grid-template-columns: 1fr;
  }

  .prompt-directory-card-meta,
  .prompt-directory-card-foot,
  .prompt-collection-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-v2 .prompt-context-chips {
    animation: none;
  }

  .library-v2 .prompt-collection-link,
  .prompt-card-sheet,
  .prompt-directory-card > a {
    transition: none;
  }
}

.ifl-prompt-page {
  --ifl-prompt-dark: #14110f;
  --ifl-prompt-card: #201d1a;
  --ifl-prompt-cream: #f5f1e8;
  --ifl-prompt-muted: rgba(245, 241, 232, 0.6);
  --ifl-prompt-coral: #f05235;
}

.ifl-prompt-main {
  padding-top: 0;
  background: var(--ifl-prompt-dark);
  color: var(--ifl-prompt-cream);
}

.ifl-prompt-shell {
  width: min(100% - clamp(32px, 6vw, 104px), 1380px);
  margin-inline: auto;
}

.ifl-prompt-hero .ifl-prompt-shell {
  width: min(100% - clamp(32px, 5vw, 80px), 1280px);
}

.ifl-prompt-hero {
  padding: clamp(100px, 11svh, 132px) 0 clamp(72px, 8vw, 116px);
  background: var(--ifl-prompt-dark);
}

.ifl-prompt-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.ifl-prompt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
}

.ifl-prompt-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  color: var(--ifl-prompt-muted);
  font-size: 12px;
}

.ifl-prompt-breadcrumb i {
  color: var(--ifl-prompt-coral);
  font-style: normal;
}

.ifl-prompt-breadcrumb.is-chip {
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(245, 241, 232, 0.22);
  border-radius: 999px;
  color: var(--ifl-prompt-paper);
  line-height: 1;
}

.ifl-prompt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(56px, 7vw, 112px);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 52px);
}

.ifl-prompt-label {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid rgba(245, 241, 232, 0.22);
  border-radius: 999px;
  color: var(--ifl-prompt-coral);
  font-size: 12px;
  font-weight: 700;
}

.ifl-prompt-intro h1 {
  max-width: 100%;
  margin: 0;
  color: var(--ifl-prompt-cream);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 6.5vw, 6rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ifl-prompt-dek {
  max-width: 60ch;
  margin: clamp(24px, 3vw, 38px) 0 0;
  color: var(--ifl-prompt-muted);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.55;
}

.ifl-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3.5vw, 44px);
}

.ifl-prompt-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid rgba(245, 241, 232, 0.28);
  border-radius: 999px;
  background: var(--ifl-prompt-card);
  color: var(--ifl-prompt-cream);
  font: 700 12px/1 "Sora", system-ui, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.ifl-prompt-button .item-action-icon {
  width: 17px;
  height: 17px;
}

.ifl-prompt-button.is-primary {
  border-color: var(--ifl-prompt-cream);
  background: var(--ifl-prompt-cream);
  color: var(--ifl-prompt-dark);
}

.ifl-prompt-button:hover,
.ifl-prompt-button.is-done {
  border-color: var(--ifl-prompt-coral);
  background: var(--ifl-prompt-coral);
  color: #ffffff;
}

.ifl-prompt-button:active {
  transform: scale(0.97);
}

.ifl-prompt-tools,
.ifl-prompt-map-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ifl-prompt-muted);
  font-size: 11px;
}

.ifl-prompt-tools {
  margin-top: 22px;
}

.ifl-prompt-map-tools {
  justify-content: flex-end;
  padding: 0;
  font-family: "Sora", sans-serif;
}

.ifl-prompt-tools strong,
.ifl-prompt-map-tools strong {
  padding: 5px 9px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  color: var(--ifl-prompt-cream);
  font-size: 10px;
}

.ifl-prompt-tools .ifl-tool-icon,
.ifl-prompt-map-tools .ifl-tool-icon {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  cursor: default;
  outline: none;
}

.ifl-prompt-tools .ifl-tool-icon::before,
.ifl-prompt-tools .ifl-tool-icon::after,
.ifl-prompt-map-tools .ifl-tool-icon::before,
.ifl-prompt-map-tools .ifl-tool-icon::after {
  position: absolute;
  z-index: 50;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ifl-prompt-tools .ifl-tool-icon::before,
.ifl-prompt-map-tools .ifl-tool-icon::before {
  content: "";
  bottom: calc(100% + 5px);
  border: 5px solid transparent;
  border-top-color: var(--ifl-prompt-cream);
  transform: translate(-50%, 2px);
}

.ifl-prompt-tools .ifl-tool-icon::after,
.ifl-prompt-map-tools .ifl-tool-icon::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 15px);
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--ifl-prompt-cream);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: var(--ifl-prompt-dark);
  font-family: "Sora", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, 4px);
}

.ifl-prompt-tools .ifl-tool-icon:hover::before,
.ifl-prompt-tools .ifl-tool-icon:hover::after,
.ifl-prompt-tools .ifl-tool-icon:focus-visible::before,
.ifl-prompt-tools .ifl-tool-icon:focus-visible::after,
.ifl-prompt-map-tools .ifl-tool-icon:hover::before,
.ifl-prompt-map-tools .ifl-tool-icon:hover::after,
.ifl-prompt-map-tools .ifl-tool-icon:focus-visible::before,
.ifl-prompt-map-tools .ifl-tool-icon:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ifl-prompt-tools .ifl-tool-icon:focus-visible,
.ifl-prompt-map-tools .ifl-tool-icon:focus-visible {
  border-color: var(--ifl-prompt-coral);
  box-shadow: 0 0 0 2px var(--ifl-prompt-dark), 0 0 0 4px var(--ifl-prompt-coral);
}

.ifl-tool-mark {
  display: block;
  width: 18px;
  height: 18px;
}

.ifl-prompt-answer,
.ifl-prompt-panel {
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 18px;
  background: var(--ifl-prompt-card);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 20px 46px rgba(0, 0, 0, 0.3);
}

.ifl-prompt-panel {
  padding: clamp(26px, 3vw, 42px);
}

.ifl-prompt-panel h2 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 3.4vw, 4rem);
}

.ifl-prompt-answer {
  padding: clamp(26px, 3vw, 42px);
  border-top: 5px solid var(--ifl-prompt-coral);
}

.ifl-prompt-answer h2,
.ifl-prompt-section h2 {
  margin: 0;
  color: var(--ifl-prompt-cream);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ifl-prompt-answer p {
  margin: 22px 0 0;
  color: var(--ifl-prompt-muted);
  font-size: 15px;
  line-height: 1.65;
}

.ifl-prompt-answer dl {
  display: grid;
  margin: 28px 0 0;
}

.ifl-prompt-answer dl div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.ifl-prompt-answer dt {
  color: var(--ifl-prompt-muted);
  font-size: 11px;
}

.ifl-prompt-answer dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.ifl-prompt-map {
  display: flex;
  height: 100%;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 18px;
  background: var(--ifl-prompt-card);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 20px 46px rgba(0, 0, 0, 0.3);
}

.ifl-prompt-map-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  color: var(--ifl-prompt-muted);
}

.ifl-prompt-map-dots {
  display: flex;
  gap: 6px;
}

.ifl-prompt-map-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.34);
}

.ifl-prompt-map-dots i:first-child {
  background: var(--ifl-prompt-coral);
}

.ifl-prompt-map-bar small,
.ifl-prompt-map-bar em {
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.ifl-prompt-map-bar em {
  justify-self: end;
  text-transform: uppercase;
}

.ifl-prompt-map-head {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  min-height: 142px;
  padding: clamp(24px, 3vw, 38px);
}

.ifl-prompt-map-mark {
  display: grid;
  flex: 0 0 auto;
  width: clamp(68px, 7vw, 84px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ifl-prompt-coral);
  color: var(--ifl-prompt-cream);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
}

.ifl-prompt-map-head div {
  min-width: 0;
}

.ifl-prompt-map-head small {
  color: var(--ifl-prompt-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.library-page .ifl-prompt-map h2 {
  margin: 7px 0 0;
  color: var(--ifl-prompt-cream);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2rem, 3.2vw, 3.7rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--display-letter-spacing);
  text-transform: uppercase;
  text-wrap: balance;
}

.ifl-prompt-map-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  list-style: none;
}

.ifl-prompt-map-steps li {
  display: grid;
  grid-template-columns: 34px minmax(86px, 0.52fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  align-items: center;
  min-height: 69px;
  padding: 14px clamp(20px, 3vw, 38px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}

.ifl-prompt-map-steps li > span {
  color: var(--ifl-prompt-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ifl-prompt-map-steps strong {
  color: var(--ifl-prompt-cream);
  font-size: 13px;
}

.ifl-prompt-map-steps p {
  margin: 0;
  color: var(--ifl-prompt-muted);
  font-size: 11px;
  line-height: 1.5;
}

.ifl-prompt-map-output {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding: 14px clamp(20px, 3vw, 38px);
  background: var(--ifl-prompt-coral);
  color: var(--ifl-prompt-dark);
}

.ifl-prompt-map-output span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ifl-prompt-map-output strong {
  font-size: 13px;
}

.ifl-prompt-section {
  padding: clamp(72px, 8vw, 118px) 0;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  background: var(--ifl-prompt-dark);
}

.ifl-prompt-overview {
  padding: clamp(56px, 6vw, 88px) 0;
}

.ifl-prompt-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 1.8vw, 26px);
}

.ifl-prompt-overview-card {
  display: flex;
  min-width: 0;
  min-height: 520px;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 38px);
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 18px;
  background: var(--ifl-prompt-card);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 20px 46px rgba(0, 0, 0, 0.3);
}

.ifl-prompt-overview-card h2 {
  max-width: 9.5ch;
  min-height: 2.9em;
  font-size: clamp(2.5rem, 3.2vw, 4.2rem);
}

.ifl-prompt-overview-card ul {
  display: grid;
  margin: auto 0 0;
  padding: clamp(24px, 2.2vw, 34px) 0 0;
  list-style: none;
}

.ifl-prompt-overview-card li {
  position: relative;
  padding: 17px 0 17px 24px;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  color: var(--ifl-prompt-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ifl-prompt-overview-card li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--ifl-prompt-coral);
}

.ifl-prompt-tips ul {
  display: grid;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.ifl-prompt-tips li {
  position: relative;
  padding: 15px 0 15px 22px;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  color: var(--ifl-prompt-muted);
  font-size: 14px;
  line-height: 1.5;
}

.ifl-prompt-tips li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ifl-prompt-coral);
}

.ifl-prompt-workbench {
  background: var(--ifl-prompt-dark);
}

.ifl-prompt-workbench-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.ifl-prompt-editor {
  margin: clamp(38px, 5vw, 64px) 0 0;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.2);
  border-radius: 14px;
  background: var(--ifl-prompt-dark);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.ifl-prompt-editor-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  background: var(--ifl-prompt-card);
  color: var(--ifl-prompt-muted);
  font-size: 12px;
}

.ifl-prompt-editor-dots {
  display: flex;
  gap: 7px;
  margin-right: 16px;
}

.ifl-prompt-editor-dots i {
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ifl-prompt-coral);
  border-radius: 50%;
}

.ifl-prompt-editor-dots i:first-child {
  background: var(--ifl-prompt-coral);
}

.ifl-prompt-editor-file {
  overflow: hidden;
  color: var(--ifl-prompt-cream);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifl-prompt-editor-type {
  margin-left: 18px;
  color: var(--ifl-prompt-muted);
}

.ifl-prompt-editor-body {
  position: relative;
}

.ifl-prompt-code {
  height: min(680px, 68svh);
  margin: 0;
  padding: clamp(24px, 3vw, 42px) clamp(48px, 5vw, 68px) clamp(24px, 3vw, 42px) clamp(24px, 3vw, 42px);
  overflow-x: auto;
  overflow-y: scroll;
  scrollbar-width: none;
  border: 0;
  border-left: 1px solid rgba(240, 82, 53, 0.52);
  border-radius: 0;
  outline: none;
  background: var(--ifl-prompt-dark);
  color: var(--ifl-prompt-cream);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}

.ifl-prompt-code code {
  font: inherit;
}

.ifl-prompt-code::-webkit-scrollbar {
  display: none;
}

.ifl-prompt-code:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ifl-prompt-coral);
}

.ifl-prompt-scrollbar {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 13px;
  bottom: 18px;
  width: 12px;
  padding: 2px;
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 999px;
  background: var(--ifl-prompt-card);
  cursor: pointer;
}

.ifl-prompt-scrollbar i {
  display: block;
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  background: var(--ifl-prompt-coral);
  cursor: grab;
  touch-action: none;
  transition: background-color 180ms ease;
}

.ifl-prompt-scrollbar i:hover {
  background: var(--ifl-prompt-cream);
}

.ifl-prompt-scrollbar i:active {
  cursor: grabbing;
}

.ifl-prompt-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.58fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: start;
}

.ifl-prompt-steps {
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding-left: 1.35em;
}

.ifl-prompt-steps li {
  padding: 20px 0 20px 8px;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.ifl-prompt-steps li::marker {
  color: var(--ifl-prompt-coral);
  font-weight: 800;
}

.ifl-prompt-steps strong {
  color: var(--ifl-prompt-cream);
  font-size: clamp(16px, 1.2vw, 19px);
}

.ifl-prompt-steps p {
  max-width: 60ch;
  margin: 7px 0 0;
  color: var(--ifl-prompt-muted);
  font-size: 14px;
  line-height: 1.55;
}

.ifl-prompt-tips {
  position: sticky;
  top: 104px;
}

.ifl-prompt-faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: start;
}

.ifl-prompt-faq details {
  border-top: 1px solid rgba(245, 241, 232, 0.16);
}

.ifl-prompt-faq details:last-child {
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}

.ifl-prompt-faq summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  color: var(--ifl-prompt-cream);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.ifl-prompt-faq summary::-webkit-details-marker {
  display: none;
}

.ifl-prompt-faq summary::after {
  content: "+";
  color: var(--ifl-prompt-coral);
  font-size: 1.5rem;
  transition: transform 0.24s ease;
}

.ifl-prompt-faq details[open] summary::after {
  transform: rotate(45deg);
}

.ifl-prompt-faq details p {
  max-width: 68ch;
  margin: 0 0 24px;
  color: var(--ifl-prompt-muted);
  font-size: 14px;
  line-height: 1.65;
}

.ifl-prompt-page :is(.prompt-index-link, .ifl-prompt-button, .ifl-prompt-faq summary):focus-visible {
  outline: 2px solid var(--ifl-prompt-coral);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .ifl-prompt-hero-grid,
  .ifl-prompt-guide,
  .ifl-prompt-faq-grid {
    grid-template-columns: 1fr;
  }

  .ifl-prompt-answer {
    max-width: 680px;
  }

  .ifl-prompt-map {
    width: min(100%, 720px);
  }

  .ifl-prompt-hero-grid {
    margin-top: clamp(28px, 4vw, 52px);
  }

  .ifl-prompt-tips {
    position: static;
  }
}

@media (max-width: 480px) {
  .ifl-prompt-map-bar em {
    display: none;
  }

  .ifl-prompt-map-bar {
    grid-template-columns: 1fr auto;
  }

  .ifl-prompt-map-head {
    align-items: flex-start;
    min-height: 0;
    padding: 24px 20px;
  }

  .ifl-prompt-map-mark {
    width: 58px;
    font-size: 1.8rem;
  }

  body.library-page .ifl-prompt-map h2 {
    font-size: clamp(1.85rem, 10vw, 2.4rem);
  }

  .ifl-prompt-map-steps li {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 0;
    padding: 15px 20px;
  }

  .ifl-prompt-map-steps p {
    grid-column: 2;
  }
}

@media (max-width: 700px) {
  .ifl-prompt-topline {
    gap: 16px;
  }

  .ifl-prompt-meta {
    max-width: 62%;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
  }

  .ifl-prompt-breadcrumb {
    justify-content: flex-end;
    font-size: 10px;
    text-align: right;
  }

  .ifl-prompt-breadcrumb.is-chip {
    padding: 6px 10px;
  }

  .ifl-prompt-label {
    padding: 6px 10px;
    font-size: 10px;
  }

  .ifl-prompt-hero-grid {
    margin-top: clamp(28px, 4vw, 52px);
  }

  .prompt-index-link {
    min-height: 430px;
  }

  .prompt-index-link h3 {
    font-size: clamp(2.5rem, 12vw, 4.3rem);
  }

  .ifl-prompt-intro h1 {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .ifl-prompt-overview-grid {
    grid-template-columns: 1fr;
  }

  .ifl-prompt-overview-card {
    min-height: 0;
  }

  .ifl-prompt-overview-card h2 {
    min-height: 0;
  }

  .ifl-prompt-workbench-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ifl-prompt-button.is-primary {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .ifl-prompt-button,
  .ifl-prompt-faq summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifl-prompt-button,
  .ifl-prompt-faq summary::after,
  body.library-page:not(.item-page) .prompt-index-card {
    transition: none;
  }
}

/* ── PROMPT WORKBENCH ─────────────────────────────────────
   One working surface: taskbar, variable entry and live prompt. */
.ifl-prompt-workspace {
  display: grid;
  grid-template-areas:
    "taskbar taskbar"
    "editor variables";
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  grid-template-rows: auto minmax(0, 1fr);
  margin-top: clamp(38px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.2);
  border-radius: 18px;
  background: var(--ifl-prompt-card);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.18);
}

.ifl-prompt-taskbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-area: taskbar;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  min-height: 60px;
  align-items: center;
  padding: 7px 12px 7px 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  background: var(--ifl-prompt-card);
}

.ifl-prompt-taskbar-file,
.ifl-prompt-taskbar-actions,
.ifl-prompt-taskbar-tools {
  display: flex;
  align-items: center;
}

.ifl-prompt-taskbar-file {
  min-width: 0;
}

.ifl-prompt-taskbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ifl-prompt-muted);
  font-size: 10px;
}

.ifl-prompt-taskbar-status > span {
  text-transform: uppercase;
}

.ifl-prompt-taskbar-status > strong {
  padding: 6px 8px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 999px;
  color: var(--ifl-prompt-cream);
  font-size: 10px;
  line-height: 1;
}

.ifl-prompt-taskbar-actions {
  justify-content: flex-end;
  gap: 8px;
}

.ifl-prompt-taskbar-tools {
  gap: 6px;
}

.ifl-prompt-taskbar-tools button,
.ifl-prompt-taskbar-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 241, 232, 0.2);
  background: var(--ifl-prompt-dark);
  color: var(--ifl-prompt-cream);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.ifl-prompt-taskbar-tools button {
  width: 44px;
  padding: 0;
  border-radius: 50%;
}

.ifl-prompt-taskbar-button {
  width: 44px;
  gap: 7px;
  padding: 0;
  border-radius: 9px;
  font: 700 11px/1 "Sora", system-ui, sans-serif;
}

.ifl-prompt-taskbar-button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ifl-prompt-taskbar-tools button:hover,
.ifl-prompt-taskbar-tools button:focus-visible,
.ifl-prompt-taskbar-button:hover,
.ifl-prompt-taskbar-button:focus-visible,
.ifl-prompt-taskbar-button.is-done {
  border-color: var(--ifl-prompt-coral);
  outline: 0;
  background: var(--ifl-prompt-coral);
  color: var(--ifl-prompt-cream);
}

.ifl-prompt-taskbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  background: rgba(245, 241, 232, 0.18);
}

.ifl-prompt-taskbar .item-action-icon {
  width: 16px;
  height: 16px;
}

.ifl-prompt-workspace .ifl-prompt-editor {
  grid-area: editor;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ifl-prompt-workspace .ifl-prompt-code {
  height: min(720px, 72svh);
}

.ifl-prompt-variable-token {
  padding: 2px 4px;
  border: 1px solid rgba(240, 82, 53, 0.42);
  border-radius: 4px;
  background: rgba(240, 82, 53, 0.12);
  color: var(--ifl-prompt-coral);
  font: inherit;
}

.ifl-prompt-variable-panel {
  --ifl-prompt-panel-padding: 24px;
  display: flex;
  grid-area: variables;
  min-width: 0;
  height: min(720px, 72svh);
  flex-direction: column;
  padding: var(--ifl-prompt-panel-padding);
  border-left: 1px solid rgba(245, 241, 232, 0.15);
  background: var(--ifl-prompt-card);
}

.ifl-prompt-variable-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ifl-prompt-variable-head p {
  margin: 0 0 7px;
  color: var(--ifl-prompt-coral);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ifl-prompt-variable-head h3 {
  margin: 0;
  color: var(--ifl-prompt-cream);
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.2;
}

.ifl-prompt-progress {
  height: 3px;
  margin: 20px 0 6px;
  overflow: hidden;
  background: rgba(245, 241, 232, 0.12);
}

.ifl-prompt-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ifl-prompt-coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.ifl-prompt-variable-fields {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  gap: 16px;
  margin: 18px -8px 0 0;
  padding: 0 8px 0 0;
  overflow-y: auto;
  scrollbar-color: var(--ifl-prompt-coral) rgba(245, 241, 232, 0.1);
  scrollbar-width: thin;
}

.ifl-prompt-variable-field {
  display: grid;
  gap: 8px;
}

.ifl-prompt-variable-field > span {
  color: var(--ifl-prompt-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.ifl-prompt-variable-field textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 10px;
  outline: 0;
  background: var(--ifl-prompt-dark);
  color: var(--ifl-prompt-cream);
  font: 500 13px/1.5 "Sora", system-ui, sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ifl-prompt-variable-field textarea::placeholder {
  color: rgba(245, 241, 232, 0.38);
}

.ifl-prompt-variable-field textarea:hover {
  border-color: rgba(245, 241, 232, 0.36);
}

.ifl-prompt-variable-field textarea:focus-visible {
  border-color: var(--ifl-prompt-coral);
  box-shadow: 0 0 0 3px rgba(240, 82, 53, 0.2);
}

.ifl-prompt-variable-field.is-filled > span {
  color: var(--ifl-prompt-cream);
}

.ifl-prompt-reset {
  min-height: 36px;
  align-self: flex-start;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ifl-prompt-coral);
  font: 700 11px/1 "Sora", system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.ifl-prompt-reset:disabled {
  color: var(--ifl-prompt-muted);
  cursor: default;
  opacity: 0.45;
}

.ifl-prompt-empty-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-top: 1px solid rgba(245, 241, 232, 0.16);
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}

.ifl-prompt-empty-state span {
  color: var(--ifl-prompt-coral);
  font-weight: 800;
}

.ifl-prompt-empty-state p {
  margin: 0;
  color: var(--ifl-prompt-muted);
  font-size: 12px;
  line-height: 1.55;
}

.ifl-prompt-share-menu button {
  display: grid;
  min-height: 44px;
  align-items: center;
  border: 1px solid rgba(245, 241, 232, 0.18);
  background: var(--ifl-prompt-dark);
  color: var(--ifl-prompt-cream);
  font: 700 11px/1 "Sora", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.ifl-prompt-share-menu button:hover,
.ifl-prompt-share-menu button:focus-visible {
  border-color: var(--ifl-prompt-coral);
  outline: 0;
  background: var(--ifl-prompt-coral);
  color: var(--ifl-prompt-cream);
}

.ifl-prompt-launch-icon,
.ifl-prompt-launch-icon .ifl-tool-mark,
.ifl-prompt-share-menu svg {
  width: 17px;
  height: 17px;
}

.ifl-prompt-launch-icon {
  display: grid;
  place-items: center;
}

.ifl-prompt-share-menu .item-action-icon {
  opacity: 0.52;
}

.ifl-prompt-launch-status {
  min-height: 4.4em;
  flex: 0 0 auto;
  margin: 16px calc(0px - var(--ifl-prompt-panel-padding)) calc(0px - var(--ifl-prompt-panel-padding));
  padding: 14px var(--ifl-prompt-panel-padding) 16px;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  background: var(--ifl-prompt-dark);
  color: var(--ifl-prompt-muted);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

.ifl-prompt-share {
  position: relative;
}

.ifl-prompt-share-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  display: grid;
  width: min(300px, calc(100vw - 40px));
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(245, 241, 232, 0.2);
  border-radius: 14px;
  background: var(--ifl-prompt-card);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

.ifl-prompt-share-menu[hidden] {
  display: none;
}

.ifl-prompt-share-menu > p {
  margin: 0 0 4px;
  color: var(--ifl-prompt-cream);
  font-size: 12px;
  font-weight: 800;
}

.ifl-prompt-share-menu button {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 12px;
  border-radius: 8px;
  text-align: left;
}

.ifl-prompt-share-menu > small {
  margin-top: 4px;
  color: var(--ifl-prompt-muted);
  font-size: 9px;
  line-height: 1.45;
}

.ifl-prompt-button:hover,
.ifl-prompt-button.is-done {
  color: var(--ifl-prompt-cream);
}

@media (max-width: 980px) {
  .ifl-prompt-workspace {
    grid-template-areas:
      "taskbar"
      "editor"
      "variables";
    grid-template-columns: minmax(0, 1fr);
  }

  .ifl-prompt-variable-panel {
    height: auto;
    max-height: none;
    border-top: 1px solid rgba(245, 241, 232, 0.15);
    border-bottom: 0;
    border-left: 0;
  }

  .ifl-prompt-variable-fields {
    max-height: 430px;
  }

  .ifl-prompt-workspace .ifl-prompt-code {
    height: min(640px, 66svh);
  }
}

@media (max-width: 720px) {
  .ifl-prompt-taskbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 10px 12px;
  }

  .ifl-prompt-taskbar-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(245, 241, 232, 0.12);
  }
}

@media (max-width: 560px) {
  .ifl-prompt-workspace {
    margin-right: -8px;
    margin-left: -8px;
    border-radius: 14px;
  }

  .ifl-prompt-variable-panel {
    --ifl-prompt-panel-padding: 18px;
  }

  .ifl-prompt-workspace .ifl-prompt-code {
    height: min(560px, 64svh);
    padding: 24px 38px 24px 20px;
    font-size: 12px;
  }

}

@media (pointer: coarse) {
  .ifl-prompt-reset,
  .ifl-prompt-taskbar-tools button,
  .ifl-prompt-taskbar-button,
  .ifl-prompt-share-menu button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifl-prompt-progress i,
  .ifl-prompt-variable-field textarea,
  .ifl-prompt-taskbar-tools button,
  .ifl-prompt-taskbar-button,
  .ifl-prompt-share-menu button {
    transition: none;
  }
}

/* The footer is #14110f, so a black mark on it is a hole rather than a logo.
   Inverted here: the cream is the box, the ink is the letters. */
.site-footer.is-compact .brand-mark {
  background: #f5f1e8;
  color: #14110f;
}

body.library-page .library-tailored-cta {
  min-height: 680px;
  padding: clamp(96px, 11vw, 168px) 0 clamp(104px, 12vw, 180px);
  background: #fff;
  color: #14110f;
}

body.library-page .library-tailored-shell {
  grid-template-columns: minmax(0, 0.98fr) minmax(340px, 0.72fr);
  align-items: center;
  gap: clamp(48px, 8vw, 150px);
}

body.library-page .library-tailored-cta .content-kicker {
  margin: 0 0 clamp(34px, 4vw, 62px);
  color: #4a3f37;
  font-size: clamp(1rem, 1.15vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.library-page .library-tailored-cta h2 {
  max-width: 11.2ch;
  color: #050507;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(5.65rem, 8vw, 10.2rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

body.library-page .library-tailored-cta .library-title-accent {
  display: inline-block;
  color: #f05235;
}

body.library-page .library-tailored-cta h2::after {
  content: "";
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.03em;
  border-radius: 50%;
  background: #f05235;
  vertical-align: baseline;
  transform: translateY(-0.04em);
}

body.library-page .library-tailored-cta .split-copy {
  gap: clamp(30px, 3.5vw, 46px);
}

body.library-page .library-tailored-cta .split-copy p {
  max-width: 650px;
  color: #4a3f37;
  font-size: clamp(1.35rem, 1.4vw, 1.85rem);
  line-height: 1.38;
  letter-spacing: -0.03em;
}

body.library-page .library-tailored-cta .cream-btn {
  position: relative;
  overflow: hidden;
  min-width: 282px;
  min-height: 76px;
  justify-content: center;
  border-radius: 8px;
  background: #14110f;
  color: #fff;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.25rem, 1.25vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0;
}

body.library-page .library-tailored-cta .cream-btn .btn-animate-chars__bg {
  border-radius: 8px;
  background: #14110f;
}

body.library-page .library-tailored-cta .cream-btn .btn-animate-chars__text {
  position: relative;
  z-index: 1;
  color: #fff;
  line-height: 1.35;
}

body.library-page .library-tailored-cta .cream-btn:hover {
  background: #14110f;
  color: #fff;
  transform: translateY(-4px);
}

body.library-page .library-tailored-cta .cream-btn:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 5px;
}

@media (max-width: 900px) {
  body.library-page .library-tailored-cta {
    min-height: 0;
    padding: 84px 0 96px;
  }

  body.library-page .library-tailored-shell {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  body.library-page .library-tailored-cta h2 {
    max-width: 9.7ch;
    font-size: clamp(4.35rem, 15.8vw, 6.9rem);
  }

  body.library-page .library-tailored-cta .split-copy p {
    max-width: 34ch;
  }
}

@media (max-width: 560px) {
  body.library-page .library-tailored-cta {
    padding: 72px 0 82px;
  }

  body.library-page .library-tailored-cta .content-kicker {
    margin-bottom: 24px;
    font-size: 0.95rem;
  }

  body.library-page .library-tailored-cta h2 {
    font-size: clamp(3.55rem, 17.8vw, 5.15rem);
  }

  body.library-page .library-tailored-cta .cream-btn {
    width: min(100%, 292px);
    min-height: 68px;
  }
}

/* ── CURATED EXTERNAL SKILL REPOSITORIES ─────────────────── */
.external-skill-main {
  padding-top: 0;
}

.external-skill-hero {
  padding: clamp(112px, 14svh, 156px) 0 clamp(72px, 9vw, 122px);
  background: #14110f;
}

.external-skill-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.external-skill-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.external-skill-meta .item-badges {
  flex: 0 0 auto;
  margin: 0;
}

.external-skill-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(56px, 7vw, 112px);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 52px);
}

.external-skill-intro {
  min-width: 0;
}

.external-skill-intro h1 {
  max-width: 100%;
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(4rem, 6.5vw, 6rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.external-skill-dek {
  max-width: 58ch;
  margin: 24px 0 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: clamp(1rem, 1.18vw, 1.22rem);
  line-height: 1.58;
}

.external-skill-intro .item-note a {
  color: #f5f1e8;
  text-decoration: underline;
  text-decoration-color: #f05235;
  text-underline-offset: 3px;
}

.external-repo-preview {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.15);
  border-radius: 18px;
  background: #201d1a;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.32),
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 46px 90px rgba(0, 0, 0, 0.22);
  transform: none;
}

.external-repo-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}

.external-repo-bar > span {
  display: flex;
  gap: 6px;
}

.external-repo-bar i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.28);
}

.external-repo-bar i:first-child {
  background: #f05235;
}

.external-repo-bar small {
  color: rgba(245, 241, 232, 0.6);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.external-repo-head {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: clamp(18px, 2vw, 26px);
  padding: 24px clamp(26px, 3.5vw, 44px);
}

.external-repo-mark {
  display: grid;
  width: clamp(84px, 7vw, 100px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #f05235;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.external-repo-head div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.external-repo-head small {
  color: #f05235;
  font-size: 12px;
  font-weight: 700;
}

.external-repo-head strong {
  overflow-wrap: anywhere;
  color: #f5f1e8;
  font-size: clamp(1.18rem, 2vw, 1.8rem);
  line-height: 1.14;
}

.external-repo-signal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 clamp(26px, 3.5vw, 44px) 14px;
  color: rgba(245, 241, 232, 0.6);
  font-size: 12px;
}

.external-repo-signal span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f05235;
}

.external-repo-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px clamp(20px, 3vw, 38px);
  padding: 20px clamp(26px, 3.5vw, 44px);
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  font-family: "Sora", sans-serif;
}

.external-repo-outcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 18px clamp(26px, 3.5vw, 44px);
  background: #f05235;
  color: #14110f;
  font-family: "Sora", sans-serif;
}

.external-repo-outcome span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.external-repo-outcome strong {
  justify-self: end;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.external-repo-license {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: center;
  gap: 6px 10px;
  margin: 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: 12px;
  line-height: 1.45;
}

.external-repo-license span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.external-repo-license strong {
  color: #f5f1e8;
  font-size: 13px;
  font-weight: 700;
}

.external-repo-works {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
}

.external-repo-works > span {
  color: rgba(245, 241, 232, 0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.external-repo-works ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.external-repo-tool {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 50%;
  color: #f5f1e8;
  cursor: default;
  outline: none;
}

.external-repo-tool::before,
.external-repo-tool::after {
  position: absolute;
  z-index: 50;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.external-repo-tool::before {
  content: "";
  bottom: calc(100% + 5px);
  border: 5px solid transparent;
  border-top-color: #f5f1e8;
  transform: translate(-50%, 2px);
}

.external-repo-tool::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 15px);
  padding: 7px 10px;
  border-radius: 7px;
  background: #f5f1e8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: #14110f;
  font-family: "Sora", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, 4px);
}

.external-repo-tool:hover::before,
.external-repo-tool:hover::after,
.external-repo-tool:focus-visible::before,
.external-repo-tool:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.external-repo-tool:focus-visible {
  border-color: #f05235;
  box-shadow: 0 0 0 2px #201d1a, 0 0 0 4px #f05235;
}

.external-repo-tool .external-skill-tool-icon {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.external-repo-tool .ifl-tool-mark {
  width: 19px;
  height: 19px;
}

.external-repo-license-note {
  grid-column: 1 / -1;
  max-width: 72ch;
  margin: 0;
  color: rgba(245, 241, 232, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.external-repo-files {
  margin-top: auto;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
}

.external-repo-files > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.38fr) minmax(0, 1fr);
  gap: 18px;
  padding: 17px clamp(26px, 3.5vw, 44px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.1);
}

.external-repo-files > div:last-child {
  border-bottom: 0;
}

.external-repo-files span {
  color: #f5f1e8;
  font-weight: 700;
}

.external-repo-files p {
  margin: 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.45;
}

.external-skill-section {
  padding: clamp(76px, 9vw, 128px) 0;
  background: #14110f;
  color: #f5f1e8;
}

.external-skill-section + .external-skill-section {
  border-top: 1px solid rgba(245, 241, 232, 0.12);
}

.external-skill-section.is-card {
  background: #201d1a;
}

.external-skill-overview-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(32px, 7vw, 112px);
  align-items: start;
}

.external-skill-section h2 {
  margin: 0;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(3rem, 5vw, 5.6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.external-skill-overview-grid > p {
  max-width: 40ch;
  margin: 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.42;
  letter-spacing: -0.02em;
}

.external-skill-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(38px, 5vw, 68px);
}

.external-skill-section-head p {
  max-width: 34ch;
  margin: 0;
  color: rgba(245, 241, 232, 0.6);
  line-height: 1.55;
}

.external-skill-card-section {
  padding-top: clamp(68px, 8vw, 112px);
}

.external-skill-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.external-skill-summary-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 16px;
  background: #201d1a;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.28),
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 38px 72px rgba(0, 0, 0, 0.18);
}

.external-skill-summary-card .external-skill-card-head {
  min-height: 0;
  margin-bottom: clamp(24px, 2.4vw, 34px);
}

.external-skill-summary-card h2 {
  max-width: none;
  font-size: clamp(2.3rem, 3.25vw, 3.8rem);
  line-height: 0.88;
  text-wrap: balance;
}

.external-skill-card-head > p {
  max-width: 33ch;
  margin: 18px 0 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.external-skill-card-points,
.external-skill-card-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(245, 241, 232, 0.14);
  list-style: none;
}

.external-skill-card-points > div,
.external-skill-card-list li {
  position: relative;
  padding: 17px 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
}

.external-skill-card-points > div {
  padding-left: 24px;
}

.external-skill-card-points > div::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 7px;
  height: 7px;
  background: #f05235;
}

.external-skill-card-points > div:last-child,
.external-skill-card-list li:last-child {
  border-bottom: 0;
}

.external-skill-card-points h3 {
  margin: 0 0 6px;
  color: rgba(245, 241, 232, 0.78);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.external-skill-card-points p,
.external-skill-card-list li {
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

.external-skill-card-points p {
  margin: 0;
}

.external-skill-card-list li {
  padding-left: 24px;
}

.external-skill-card-list li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 7px;
  height: 7px;
  background: #f05235;
}

.external-skill-tool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.external-skill-tool-list li {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 241, 232, 0.14);
  color: rgba(245, 241, 232, 0.78);
  font-size: 12px;
  line-height: 1.3;
}

.external-skill-tool-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #f5f1e8;
}

.external-skill-tool-icon .ifl-tool-mark {
  width: 22px;
  height: 22px;
}

.external-skill-license {
  margin-top: auto;
  padding-top: 32px;
}

.external-skill-license h3 {
  margin: 0 0 8px;
  color: rgba(245, 241, 232, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.external-skill-license strong {
  color: #f5f1e8;
  font-size: 1.05rem;
}

.external-skill-license p {
  margin: 12px 0 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.55;
}

.external-skill-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(245, 241, 232, 0.16);
}

.external-skill-highlights section {
  min-height: 210px;
  padding: clamp(26px, 3vw, 42px) clamp(20px, 3vw, 42px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
}

.external-skill-highlights section:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid rgba(245, 241, 232, 0.16);
}

.external-skill-highlights h3 {
  margin: 0 0 16px;
  color: #f5f1e8;
  font-size: clamp(1.25rem, 1.5vw, 1.6rem);
}

.external-skill-highlights p {
  max-width: 48ch;
  margin: 0;
  color: rgba(245, 241, 232, 0.6);
  line-height: 1.58;
}

.external-skill-fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(48px, 9vw, 148px);
}

.external-skill-checklist {
  display: grid;
  gap: 0;
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(245, 241, 232, 0.16);
}

.external-skill-checklist li {
  position: relative;
  min-height: 62px;
  padding: 18px 0 18px 28px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.16);
  color: rgba(245, 241, 232, 0.78);
  line-height: 1.45;
}

.external-skill-checklist li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 9px;
  height: 9px;
  background: #f05235;
}

.external-skill-fit-grid aside {
  padding: clamp(28px, 3.5vw, 44px);
  background: #14110f;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.26),
    0 18px 38px rgba(0, 0, 0, 0.28);
}

.external-skill-fit-grid aside h2 {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
}

.external-skill-fit-grid aside h3 {
  margin: 34px 0 8px;
  color: rgba(245, 241, 232, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.external-skill-fit-grid aside > strong {
  color: #f5f1e8;
  font-size: 1.05rem;
}

.external-skill-fit-grid aside > p {
  margin: 12px 0 0;
  color: rgba(245, 241, 232, 0.6);
  font-size: 13px;
  line-height: 1.55;
}

.external-skill-compatibility {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.external-skill-compatibility span {
  padding: 8px 11px;
  border: 1px solid rgba(245, 241, 232, 0.16);
  color: rgba(245, 241, 232, 0.78);
  font-size: 12px;
}

.external-skill-page .item-action:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .external-repo-preview {
    transition: none;
  }

  .external-repo-preview:hover { transform: none; }
}

@media (max-width: 980px) {
  .external-skill-utility {
    align-items: flex-start;
  }

  .external-skill-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .external-skill-hero-grid,
  .external-skill-overview-grid,
  .external-skill-fit-grid {
    grid-template-columns: 1fr;
  }

  .external-repo-preview {
    width: min(100%, 720px);
  }

  .external-skill-overview-grid > p {
    max-width: 46ch;
  }

}

@media (max-width: 720px) {
  .external-skill-card-row {
    grid-template-columns: 1fr;
  }

  .external-skill-summary-card .external-skill-card-head {
    min-height: 0;
    margin-bottom: 30px;
  }

}

@media (max-width: 640px) {
  .external-skill-hero {
    padding-top: 104px;
  }

  .external-skill-utility {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .external-skill-meta {
    justify-content: flex-start;
  }

  .external-repo-context {
    grid-template-columns: 1fr;
  }

  .external-repo-works {
    align-items: flex-start;
    flex-direction: column;
    justify-self: start;
  }

  .external-repo-license-note {
    grid-column: auto;
  }

  .external-repo-outcome {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 24px;
  }

  .external-repo-outcome strong {
    justify-self: start;
    text-align: left;
  }

  .external-skill-intro h1 {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .external-repo-preview {
    transform: none;
  }

  .external-repo-head {
    align-items: flex-start;
  }

  .external-repo-files > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .external-skill-section-head {
    display: grid;
    align-items: start;
  }

  .external-skill-highlights {
    grid-template-columns: 1fr;
  }

  .external-skill-highlights section,
  .external-skill-highlights section:nth-child(odd) {
    min-height: 0;
    padding: 28px 0;
    border-right: 0;
  }

}

/* ── Launch utility pages: 404 + privacy ─────────────────── */
.not-found-page,
.privacy-page {
  min-height: 100svh;
  background: #eae6dd;
  color: #14110f;
}

.not-found-main {
  position: relative;
  min-height: calc(100svh - 90px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(132px, 15vw, 190px) clamp(24px, 7vw, 110px) 80px;
}

/* The 404 numeral is the page's coral moment. It stays a tint rather than a
   solid fill: at this size a full-strength #f05235 would make coral a surface,
   which the palette never does, and it would drown the headline sitting on it. */
.not-found-code {
  position: absolute;
  inset: 50% auto auto 50%;
  margin: 0;
  color: rgba(240, 82, 53, 0.16);
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(18rem, 48vw, 48rem);
  line-height: 0.7;
  letter-spacing: -0.07em;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.not-found-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 880px);
  text-align: center;
}

.not-found-kicker,
.privacy-hero > p:first-child {
  margin: 0 0 18px;
  color: #f05235;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.not-found-copy h1,
.privacy-hero h1 {
  margin: 0;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(5.4rem, 12vw, 12rem);
  font-weight: 800;
  line-height: 0.77;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.not-found-copy > p:not(.not-found-kicker) {
  max-width: 58ch;
  margin: 30px auto 0;
  color: #4a3f37;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.65;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.not-found-actions a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 2px solid #14110f;
  border-radius: 999px;
  background: #14110f;
  color: #f5f1e8;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}

.not-found-actions a + a {
  background: transparent;
  color: #14110f;
}

.not-found-actions a:hover {
  background: #f05235;
  color: #14110f;
  transform: translateY(-2px);
}

.not-found-footer {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(24px, 5vw, 78px);
  background: #14110f;
  color: rgba(245, 241, 232, 0.64);
  font-size: 12px;
}

.not-found-footer a {
  color: #f5f1e8;
  font-weight: 800;
}

.privacy-nav {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px clamp(22px, 5vw, 76px);
}

.privacy-nav > .brand-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #14110f;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: 22px;
}

.privacy-nav nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px 28px;
}

.privacy-nav nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}

.privacy-main {
  width: min(100% - 42px, 1160px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) 0 clamp(90px, 11vw, 150px);
}

.privacy-hero {
  max-width: 980px;
}

.privacy-hero > p:last-child {
  max-width: 62ch;
  margin: 30px 0 0;
  color: #4a3f37;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.6;
}

.privacy-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: clamp(72px, 8vw, 118px);
  border-top: 1px solid rgba(20, 17, 15, 0.2);
}

.privacy-sections section {
  padding: 36px 0 42px;
  border-bottom: 1px solid rgba(20, 17, 15, 0.2);
}

.privacy-sections h2 {
  margin: 0 0 14px;
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: -0.03em;
}

.privacy-sections p {
  max-width: 62ch;
  margin: 0;
  color: #4a3f37;
  font-size: 15px;
  line-height: 1.75;
}

.privacy-sections p + p {
  margin-top: 12px;
}

.privacy-contact a {
  color: #f05235;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .not-found-main {
    min-height: calc(100svh - 70px);
    padding-top: 120px;
  }

  .not-found-copy h1,
  .privacy-hero h1 {
    font-size: clamp(4.7rem, 22vw, 7rem);
  }

  .not-found-actions {
    display: grid;
  }

  .not-found-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .privacy-nav {
    align-items: flex-start;
  }

  .privacy-nav nav {
    gap: 8px 18px;
  }

  .privacy-sections {
    grid-template-columns: 1fr;
  }
}

/* ── DISPLAY TYPE SPACING SYSTEM ───────────────────────────
   Multi-word Bogdan headings get readable character, word, and line
   separation. Giant single-word labels stay tighter so they retain their
   intended scale without clipping. */
:is(
  body.light-hero .hero-title,
  body.light-hero .what-title,
  body.light-hero .yes-work-project h2,
  body.light-hero .about-copy-title,
  body.light-hero .said-yes-mega,
  body.light-hero .said-yes-quote,
  body.light-hero .faq-mega,
  body.light-hero .wwm-title,
  body.project-page .project-title,
  body.project-page .pbs-intro h2,
  body.project-page .project-quote blockquote,
  body.project-page .project-conclusion h2,
  body.project-page .project-next-link strong,
  body.blog-page .blog-journal-title,
  body.blog-page .article-foot-title,
  body.content-page .content-title,
  body.article-page .article-hero h1,
  body.article-page .article-content h2,
  body.content-page .resource-hero h1,
  body.content-page .split-cta h2,
  body.library-page .item-title,
  body.library-page .workflow-hero h1,
  body.library-page .premium-waitlist-copy h1,
  body.library-page .ifl-prompt-intro h1,
  body.library-page .library-tailored-cta h2,
  body.library-v3 .library-hero h1,
  body.library-v3 .library-empty h2,
  body.library-v3 .library-cta h2,
  body.contact-page .contact-mega
) {
  letter-spacing: var(--display-letter-spacing);
  word-spacing: var(--display-word-spacing);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

:is(
  body.project-page .pbs-intro h2,
  body.project-page .project-quote blockquote,
  body.project-page .project-conclusion h2,
  body.project-page .project-next-link strong,
  body.content-page .split-cta h2,
  body.library-page .library-tailored-cta h2,
  body.library-v3 .library-cta h2
) {
  line-height: var(--display-line-height);
}

:is(
  body.light-hero .services-mega,
  body.light-hero .process-mega,
  body.light-hero .about-mega
) {
  letter-spacing: var(--display-letter-spacing-massive);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

:is(
  body.light-hero .services-card-main strong,
  body.light-hero .process-step-main h3,
  body.light-hero .about-proof-strip strong,
  body.project-page .ov-big,
  body.project-page .project-brief-item h3,
  body.project-page[data-imgstyle="story"] .pi-media figcaption strong,
  body.project-page .pd-card h3,
  body.project-page .pbs-copy h3,
  body.content-page .content-section-head h2,
  body.library-page .item-how h2,
  body.library-page .item-faq h2,
  body.library-page .workflow-body h2,
  body.library-page .premium-includes h2,
  body.library-page .premium-waitlist-card h2,
  body.library-page .ifl-prompt-answer h2,
  body.library-page .ifl-prompt-section h2,
  body.library-page .ifl-prompt-workbench h2
) {
  letter-spacing: var(--display-letter-spacing-compact);
  word-spacing: var(--display-word-spacing-compact);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

body.library-v3 .library-card h3 {
  letter-spacing: -0.01em;
  word-spacing: 0.035em;
}

/* ── MOBILE CTA + FOOTER BALANCE ───────────────────────────
   Phones and tablets use the floating CTA only. Keep the header from
   reintroducing a duplicate after the hero scroll state changes. */
body.sticky-talk-suppressed .sticky-talk {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 24px));
}

@media (max-width: 980px) {
  body.light-hero .site-header .header-cta,
  body.light-hero.nav-is-past-hero .site-header .header-cta,
  body.light-hero .header-cta {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .ifl-footer {
    padding-top: 48px;
  }

  .ifl-footer-bar,
  .ifl-footer-bottom {
    width: calc(100% - 48px);
  }

  .ifl-footer-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 30px;
    margin-bottom: 46px;
  }

  .ifl-footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    width: 100%;
    margin: 0;
  }

  .ifl-footer-nav .btn-animate-chars {
    display: inline-flex;
    justify-self: start;
    min-height: 44px;
    align-items: center;
  }

  .ifl-footer-socials {
    justify-self: start;
    margin-left: -9px;
  }

  .ifl-footer-bottom {
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 30px;
    text-align: left;
  }
}

/* ── LIBRARY DETAIL HEADING RHYTHM ────────────────────────
   Bogdan's caps nearly fill the em box. The older 0.82–0.94 line heights
   made wrapped titles visually touch, especially on phones. Keep the
   condensed character, but give every Library detail template one clear
   baseline rhythm for multi-line display copy. */
body.library-page.item-page :is(
  .item-title,
  .ifl-prompt-intro h1,
  .external-skill-intro h1,
  .item-how h2,
  .item-faq h2,
  .workflow-section h2,
  .workflow-disclosure-title strong,
  .workflow-preview-title,
  .ifl-prompt-answer h2,
  .ifl-prompt-section h2,
  .external-skill-section h2,
  .library-tailored-cta h2
),
body.library-page.premium-waitlist-page :is(
  .premium-waitlist-intro h1,
  .premium-waitlist-form-wrap h2,
  .premium-waitlist-trust h2
) {
  letter-spacing: var(--display-letter-spacing);
  word-spacing: var(--display-word-spacing);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

body.library-page.item-page :is(
  .item-title,
  .ifl-prompt-intro h1,
  .external-skill-intro h1
),
body.library-page.premium-waitlist-page .premium-waitlist-intro h1 {
  line-height: 0.98;
}

body.library-page.item-page :is(
  .item-how h2,
  .item-faq h2,
  .workflow-section h2,
  .workflow-disclosure-title strong,
  .ifl-prompt-answer h2,
  .ifl-prompt-section h2,
  .external-skill-section h2
),
body.library-page.premium-waitlist-page :is(
  .premium-waitlist-form-wrap h2,
  .premium-waitlist-trust h2
) {
  line-height: 1;
}

body.library-page.item-page :is(
  .workflow-preview-title,
  .library-tailored-cta h2
) {
  line-height: 0.96;
}

/* ── LIBRARY DETAIL PREVIEW CARD SYSTEM ───────────────────
   Prompt, skill and kit previews share one visual grammar. */
body.library-page.item-page :is(
  .kit-preview-card,
  .ifl-prompt-map,
  .external-repo-preview
) {
  overflow: hidden;
  border: 1px solid rgba(245, 241, 232, 0.15);
  border-radius: 18px;
  background: #201d1a;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.32),
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 46px 90px rgba(0, 0, 0, 0.22);
}

body.library-page.item-page :is(
  .kit-preview-bar,
  .ifl-prompt-map-bar,
  .external-repo-bar
) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 48px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  color: rgba(245, 241, 232, 0.6);
  font-family: "Sora", sans-serif;
}

body.library-page.item-page :is(
  .kit-preview-bar small,
  .kit-preview-bar em,
  .ifl-prompt-map-bar small,
  .ifl-prompt-map-bar em,
  .external-repo-bar small
) {
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

body.library-page.item-page :is(
  .kit-preview-head,
  .ifl-prompt-map-head,
  .external-repo-head
) {
  display: flex;
  min-height: 156px;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(18px, 2vw, 24px);
  padding: 24px clamp(26px, 3.5vw, 44px);
}

body.library-page.item-page :is(
  .kit-preview-mark,
  .ifl-prompt-map-mark,
  .external-repo-mark
) {
  display: grid;
  width: clamp(84px, 7vw, 100px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #f05235;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

body.library-page.item-page :is(
  .kit-preview-head small,
  .ifl-prompt-map-head small,
  .external-repo-head small
) {
  display: block;
  margin: 0;
  color: #f05235;
  font-family: "Sora", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.library-page.item-page :is(
  .kit-preview-head h2,
  .ifl-prompt-map-head h2,
  .external-repo-head strong
) {
  display: block;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: #f5f1e8;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--display-letter-spacing);
  word-spacing: var(--display-word-spacing);
  text-transform: uppercase;
  text-wrap: balance;
}

body.library-page.item-page :is(
  .kit-preview-files li,
  .ifl-prompt-map-steps li,
  .external-repo-files > div
) {
  min-height: 69px;
  padding: 15px clamp(26px, 3.5vw, 44px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}

body.library-page.item-page :is(
  .kit-preview-files strong,
  .ifl-prompt-map-steps strong,
  .external-repo-files span
) {
  color: #f5f1e8;
  font-size: 13px;
  line-height: 1.4;
}

body.library-page.item-page :is(
  .kit-preview-files p,
  .ifl-prompt-map-steps p,
  .external-repo-files p
) {
  color: rgba(245, 241, 232, 0.6);
  font-size: 11px;
  line-height: 1.48;
}

body.library-page.item-page :is(
  .kit-preview-output,
  .ifl-prompt-map-output,
  .external-repo-outcome
) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  min-height: 70px;
  align-items: center;
  padding: 18px clamp(26px, 3.5vw, 44px);
  background: #f05235;
  color: #14110f;
  font-family: "Sora", sans-serif;
}

body.library-page.item-page :is(
  .kit-preview-output span,
  .ifl-prompt-map-output span,
  .external-repo-outcome span
) {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.library-page.item-page :is(
  .kit-preview-output strong,
  .ifl-prompt-map-output strong,
  .external-repo-outcome strong
) {
  justify-self: end;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

@media (max-width: 620px) {
  body.library-page.item-page :is(
    .kit-preview-head,
    .ifl-prompt-map-head,
    .external-repo-head
  ) {
    min-height: 0;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
  }

  .ifl-prompt-map-tools {
    justify-content: flex-start;
    padding: 12px 24px;
  }

  body.library-page.item-page :is(
    .kit-preview-mark,
    .ifl-prompt-map-mark,
    .external-repo-mark
  ) {
    width: clamp(76px, 22vw, 100px);
  }

  body.library-page.item-page :is(
    .kit-preview-head h2,
    .ifl-prompt-map-head h2,
    .external-repo-head strong
  ) {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  body.library-page.item-page :is(
    .kit-preview-output,
    .ifl-prompt-map-output,
    .external-repo-outcome
  ) {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 24px;
  }

  body.library-page.item-page :is(
    .kit-preview-output strong,
    .ifl-prompt-map-output strong,
    .external-repo-outcome strong
  ) {
    justify-self: start;
    text-align: left;
  }
}

/* On desktop the left hero copy defines the row height. The corresponding
   preview card stretches to that height instead of imposing a fixed size. */
@media (min-width: 981px) {
  body.library-page.item-page :is(
    .kit-preview-card,
    .ifl-prompt-map,
    .external-repo-preview
  ) {
    height: 100%;
    min-height: 0;
  }

  body.library-page.item-page :is(
    .kit-preview-bar,
    .ifl-prompt-map-bar,
    .external-repo-bar
  ) {
    min-height: 36px;
  }

  body.library-page.item-page :is(
    .kit-preview-head,
    .ifl-prompt-map-head,
    .external-repo-head
  ) {
    min-height: 108px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.library-page.item-page :is(
    .kit-preview-mark,
    .ifl-prompt-map-mark,
    .external-repo-mark
  ) {
    width: 84px;
  }

  body.library-page.item-page :is(
    .kit-preview-files,
    .ifl-prompt-map-steps,
    .external-repo-files
  ) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
  }

  body.library-page.item-page :is(
    .kit-preview-files li,
    .ifl-prompt-map-steps li,
    .external-repo-files > div
  ) {
    min-height: 40px;
    flex: 1 1 auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .external-repo-signal {
    margin-bottom: 4px;
  }

  .external-repo-context {
    gap: 8px clamp(18px, 2vw, 28px);
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .ifl-prompt-map-tools {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.library-page.item-page :is(
    .kit-preview-output,
    .ifl-prompt-map-output,
    .external-repo-outcome
  ) {
    min-height: 54px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Prompt footer: one aligned outcome, with tool actions in the workbench. */
body.library-page.item-page .ifl-prompt-map-output {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  margin-top: auto;
}

body.library-page.item-page .ifl-prompt-map-output strong {
  justify-self: end;
  max-width: 40ch;
  text-align: right;
}

@media (max-width: 620px) {
  body.library-page.item-page .ifl-prompt-map-output {
    grid-template-columns: 1fr;
  }

  body.library-page.item-page .ifl-prompt-map-output strong {
    justify-self: start;
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────────
   PORTFOLIO INDEX (work-preview.html)
   The tile is the image. No card, no border, no shadow, no chip or numeral
   sitting on top of the work — just full-bleed media, then one caption row:
   name left, one line right. Each screenshot is composed on a flat field
   toned to the app's own interface so the tile reads as one made image.
   The closing CTA is the site's own .work-with-me section.
   ───────────────────────────────────────────────────────────── */
body.work-page {
  background: #eae6dd;
  color: #14110f;
}

.wk-index {
  width: min(100% - clamp(32px, 4vw, 64px), 1920px);
  margin: 0 auto;
  padding: clamp(96px, 11svh, 140px) 0 clamp(120px, 16vw, 256px);
}

/* ── Masthead: one oversized centred statement ── */
.wk-masthead {
  margin-bottom: clamp(28px, 3vw, 48px);
}

.wk-mega {
  margin: 0;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 16.4vw, 20rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
}

.wk-line {
  display: block;
  white-space: nowrap;
}

/* The count rides the end of the last word, in the site's script accent. */
.wk-count {
  display: inline-block;
  color: #f05235;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 0.42em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: 0.34em;
  transform: translate(-0.3em, 0);
}

.wk-ledes {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgba(20, 17, 15, 0.72);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.4;
}

.wk-ledes span:last-child { text-align: right; }

/* ── The wall of work ── */
.wk-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(48px, 4vw, 72px) clamp(24px, 2vw, 32px);
}

.wk-tile {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
  align-self: start;
  color: inherit;
  text-decoration: none;
}

.wk-tile.is-lead { grid-column: 1 / -1; }

/* Entrance is carried by the parts, not by the tile: the field opens as a
   mask, the screen inside settles out of an overscale, the caption arrives a
   beat later. Fading the whole tile as one block on top of that reads as a
   generic scroll animation and muddies the mask. */
body.motion-on.work-page .wk-tile { --wk-zoom: 1.08; }
body.motion-on.work-page .wk-tile.is-visible { --wk-zoom: 1; }

/* The field is the tile: full bleed, flat, no frame. */
.wk-field {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Per-project, so the two columns stagger instead of ending level. */
.wk-field { aspect-ratio: var(--ratio, 4 / 3); }

.wk-tile.is-light .wk-field { background: #ffffff; }
.wk-tile.is-dark .wk-field { background: #14110f; }

/* Absolute placement, because a percentage height against an aspect-ratio box
   has no definite basis and the image would fall back to intrinsic size. */
.wk-field > img {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
}

.wk-field img {
  display: block;
}

/* Screenshots that already carry their own device frame sit on transparent
   corners. A CSS shadow follows the bounding box, not the bezel, so it would
   draw a pale rectangle past the rounded corners — these get neither. */
.wk-field img.is-flat {
  border-radius: 10px;
}

.wk-tile.is-light .wk-field img.is-flat {
  box-shadow:
    0 10px 24px rgba(20, 17, 15, 0.14),
    0 34px 62px rgba(20, 17, 15, 0.12);
}

.wk-tile.is-dark .wk-field img.is-flat {
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.42),
    0 40px 72px rgba(0, 0, 0, 0.36);
}

/* The wide lead field: a row of real screens, evenly spaced, no rotation. */
.wk-run {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 44px);
}

.wk-run img {
  position: static;
  max-width: 24%;
  max-height: 84%;
}

.wk-field img.is-portrait {
  max-width: 82%;
  max-height: 74%;
}

.wk-tile.is-lead .wk-field img.is-portrait {
  max-height: 80%;
}

.wk-field img.is-landscape {
  max-width: 80%;
  max-height: 82%;
}

/* ── Hover: the cover recedes behind a scrim while the second screen arrives.
   Long expo easing, matching the reference's 1s cubic-bezier(.19,1,.22,1). ── */
.wk-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}

.wk-shot {
  z-index: 3 !important;
  opacity: 0;
  transform: scale(0.86);
}

/* The entrance overscale rides a custom property, so the hover rules below can
   own the transform outright instead of fighting an entrance value. By the
   time a pointer arrives --wk-zoom has already settled to 1. */
.wk-cover,
.wk-run {
  transform: scale(var(--wk-zoom, 1));
}

@media (hover: hover) and (pointer: fine) {
  .wk-cover,
  .wk-run,
  .wk-veil,
  .wk-shot {
    transition:
      transform 1s cubic-bezier(0.19, 1, 0.22, 1),
      opacity 1s cubic-bezier(0.19, 1, 0.22, 1),
      filter 1s cubic-bezier(0.19, 1, 0.22, 1),
      background 1s cubic-bezier(0.19, 1, 0.22, 1),
      backdrop-filter 1s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .wk-tile:hover .wk-cover,
  .wk-tile:hover .wk-run {
    transform: scale(1.05) translateY(-10px);
    filter: blur(10px) brightness(0.4);
  }

  .wk-tile:hover .wk-veil {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
  }

  .wk-tile:hover .wk-shot {
    opacity: 1;
    transform: scale(1);
  }

  /* No second screen to trade up to: the cover must not blur into nothing. */
  .wk-tile:not(:has(.wk-shot)):hover .wk-cover,
  .wk-tile:not(:has(.wk-shot)):hover .wk-run {
    filter: none;
    transform: scale(1.03);
  }

  .wk-tile:not(:has(.wk-shot)):hover .wk-veil {
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
  }
}

/* ── On the media: the new flag, and the three meta badges ── */
.wk-flag {
  position: absolute;
  top: clamp(12px, 1.2vw, 20px);
  left: clamp(12px, 1.2vw, 20px);
  z-index: 2;
  padding: 0.15em 0.55em 0.28em;
  border-radius: 4px;
  background: #f05235;
  color: #14110f;
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.wk-badges {
  position: absolute;
  right: clamp(12px, 1.1vw, 18px);
  bottom: clamp(12px, 1.1vw, 18px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: calc(100% - 24px);
}

.wk-badge {
  padding: 0.62em 0.85em;
  border: 1px solid currentColor;
  border-radius: 0.25em;
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The badge outline has to read against its own field, not a stock white. */
.wk-tile.is-light .wk-badge { color: rgba(20, 17, 15, 0.62); }
.wk-tile.is-dark .wk-badge { color: rgba(245, 241, 232, 0.72); }

/* Hover-revealed where there is a pointer; permanent where there is not. */
@media (hover: hover) and (pointer: fine) {
  .wk-badge {
    opacity: 0;
    transform: translateY(110%);
    transition:
      transform 0.45s var(--ease-out) calc(var(--i) * 55ms),
      opacity 0.3s ease calc(var(--i) * 55ms);
  }

  .wk-tile:hover .wk-badge,
  .wk-tile:focus-visible .wk-badge {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Caption: name left, one line right ── */
.wk-cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
}

.wk-name {
  margin: 0;
  overflow: hidden;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(1.725rem, 1.57rem + 0.775vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* The name rolls: a duplicate sits exactly one line below and takes its place.
   Built from a real second copy rather than the reference's text-shadow, which
   cannot escape the clip on the element carrying the transform. */
.wk-name [data-roll] {
  display: block;
  position: relative;
}

.wk-name [data-roll]::after {
  content: attr(data-roll);
  position: absolute;
  top: 100%;
  left: 0;
}

/* An extra element between the clip and the rolling copy, so the entrance and
   the hover roll each own a transform of their own. */
.wk-rise {
  display: block;
}

.wk-said {
  max-width: 34ch;
  color: rgba(20, 17, 15, 0.72);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.4;
  text-align: right;
}

@media (hover: hover) and (pointer: fine) {
  .wk-name [data-roll] {
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .wk-tile:hover .wk-name [data-roll] {
    transform: translateY(-100%);
  }
}

.wk-tile:focus-visible {
  outline: 2px solid #f05235;
  outline-offset: 8px;
}

/* ─────────────────────────────────────────────────────────────
   ENTRANCE CHOREOGRAPHY
   Order is the point: masthead, then the wall, then the closing CTA — nothing
   animates before the thing above it has established context. Every hidden
   state is scoped to body.motion-on, the shared motion class, so a page
   without JS (or one asking for reduced motion) renders the finished layout
   and nothing is ever stranded invisible.
   ───────────────────────────────────────────────────────────── */
/* The tile: the field opens from its bottom edge while the screen inside
   settles out of the overscale, so the image arrives already in motion rather
   than sliding in as a rectangle. */
body.motion-on.work-page .wk-field {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.05s var(--mo-expo);
}

body.motion-on.work-page .wk-tile.is-visible .wk-field {
  clip-path: inset(0 0 0 0);
}

/* On a pointer device the hover block already transitions these; on touch it
   never applies, and the overscale would snap. */
@media (hover: none), (pointer: coarse) {
  body.motion-on.work-page .wk-cover,
  body.motion-on.work-page .wk-run {
    transition: transform 1.05s var(--mo-expo);
  }
}

/* Caption after the mask, not with it. */
body.motion-on.work-page .wk-rise {
  opacity: 0;
  transform: translateY(102%);
}

body.motion-on.work-page .wk-tile.is-visible .wk-rise {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.85s var(--mo-expo) 0.18s,
    opacity 0.45s ease 0.18s;
}

body.motion-on.work-page .wk-said {
  opacity: 0;
  transform: translateY(12px);
}

body.motion-on.work-page .wk-tile.is-visible .wk-said {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.7s var(--mo-type) 0.3s,
    opacity 0.5s ease 0.3s;
}

body.motion-on.work-page .wk-flag {
  opacity: 0;
  transform: rotate(-3deg) scale(0.72);
}

body.motion-on.work-page .wk-tile.is-visible .wk-flag {
  opacity: 1;
  transform: rotate(-3deg) scale(1);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.52s,
    opacity 0.3s ease 0.52s;
}

/* Where there is a pointer the badges belong to hover and are already handled
   above. Where there is not, they are permanent — so they join the entrance. */
@media (hover: none), (pointer: coarse) {
  body.motion-on.work-page .wk-badge {
    opacity: 0;
    transform: translateY(10px);
  }

  body.motion-on.work-page .wk-tile.is-visible .wk-badge {
    opacity: 1;
    transform: translateY(0);
    transition:
      transform 0.6s var(--mo-type) calc(0.4s + var(--i, 0) * 60ms),
      opacity 0.4s ease calc(0.4s + var(--i, 0) * 60ms);
  }
}

@media (max-width: 991px) {
  .wk-ledes { display: none; }

  .wk-cap {
    flex-direction: column;
    gap: 6px;
  }

  .wk-said {
    max-width: 100%;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .wk-list {
    grid-template-columns: 1fr;
    gap: clamp(44px, 9vw, 64px);
  }

  /* One column: the lead tile is no longer wider than the rest, so it takes
     the same portrait field instead of a letterboxed cinematic one, and shows
     a single screen — three across a phone-width field would be unreadable. */
  .wk-tile.is-lead .wk-field { aspect-ratio: 4 / 5 !important; }
  .wk-tile.is-lead .wk-field img.is-portrait { max-height: 74%; }
  .wk-run img:nth-child(n + 2) { display: none; }
  .wk-run img { max-width: 58%; max-height: 74%; }
  .wk-mega { font-size: clamp(3rem, 17vw, 7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-field img,
  .wk-cover,
  .wk-run,
  .wk-veil,
  .wk-shot,
  .wk-name [data-roll],
  .wk-badge,
  .wk-rise,
  .wk-said,
  .wk-flag,
  body.motion-on.work-page .wk-field {
    transition: none !important;
  }

  /* JS never adds .motion-on under reduced motion; this covers the visitor who
     turns the setting on with the page already open. */
  body.motion-on.work-page .wk-rise,
  body.motion-on.work-page .wk-said,
  body.motion-on.work-page .wk-flag,
  body.motion-on.work-page .wk-badge {
    opacity: 1;
    transform: none;
  }

  body.motion-on.work-page .wk-flag { transform: rotate(-3deg); }
  body.motion-on.work-page .wk-field { clip-path: none; }
  body.motion-on.work-page .wk-tile { --wk-zoom: 1; }

  /* The swap still happens, it just happens instantly and without the blur. */
  .wk-tile:hover .wk-cover,
  .wk-tile:hover .wk-run {
    filter: none !important;
    transform: none !important;
  }

  .wk-tile:hover .wk-veil { backdrop-filter: none !important; }
  .wk-tile:hover .wk-name [data-roll] { transform: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   SHARED MOTION PRIMITIVES
   One implementation of the three moves the site makes, so every route
   speaks the same language instead of each page inventing its own:

     [data-split-chars]  a heading that rises character by character
     [data-reveal]       anything that rises into place on scroll
     [data-reveal="mask"] media that opens from a mask while it settles
                          out of a slight overscale

   Everything is opt-in by attribute and every hidden state is scoped to
   body.motion-on, a class JS adds only when motion is wanted. A page with
   no JS, or a visitor who asked for reduced motion, gets the finished
   layout — nothing here can strand content invisible.
   ═════════════════════════════════════════════════════════════ */
:root {
  --mo-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --mo-type: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- character headings ---- */
.mo-ch {
  display: inline-block;
}

/* The mask is the line, not the glyph: padding buys room for overshoot at
   display sizes and the negative margin hands the space straight back, so
   adding motion never moves the layout. */
body.motion-on .mo-line {
  display: block;
  overflow: hidden;
  padding: 0.1em 0 0.16em;
  margin: -0.1em 0 -0.16em;
}

/* Chars travel the line's own height, measured by JS. An inline accent in a
   smaller face would otherwise shift by its own tiny em and never clear the
   mask. */
body.motion-on [data-split-chars] .mo-ch {
  opacity: 0;
  transform: translateY(var(--mo-rise, 110%));
}

body.motion-on [data-split-chars].is-in .mo-ch {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.9s var(--mo-expo) calc(var(--mo-lead, 0ms) + var(--i, 0) * 26ms),
    opacity 0.5s ease calc(var(--mo-lead, 0ms) + var(--i, 0) * 26ms);
}

/* Finished, but without the journey: content the visitor is manipulating
   directly (a filtered catalogue) settles into place rather than animating
   under their hands. */
body.motion-on .mo-instant,
body.motion-on .mo-instant .mo-ch,
body.motion-on .mo-instant > img {
  transition: none !important;
}

/* ---- rise ---- */
body.motion-on [data-reveal] {
  opacity: 0;
  transform: translateY(var(--mo-y, 22px));
}

body.motion-on [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.85s var(--mo-expo) calc(var(--mo-lead, 0ms) + var(--i, 0) * 80ms),
    opacity 0.55s ease calc(var(--mo-lead, 0ms) + var(--i, 0) * 80ms);
}

/* ---- masked media ---- */
body.motion-on [data-reveal="mask"] {
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1.05s var(--mo-expo) calc(var(--mo-lead, 0ms) + var(--i, 0) * 80ms);
}

/* Restated on .is-in as well: the plain [data-reveal].is-in rule above scores
   higher than [data-reveal="mask"] and would otherwise replace this element's
   transition with the rise one, leaving the mask to snap open. */
body.motion-on [data-reveal="mask"].is-in {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 1.05s var(--mo-expo) calc(var(--mo-lead, 0ms) + var(--i, 0) * 80ms);
}

body.motion-on [data-reveal="mask"] > img,
body.motion-on [data-reveal="mask"] > picture > img,
body.motion-on [data-reveal="mask"] > video {
  transform: scale(var(--mo-zoom, 1.06));
  transition: transform 1.05s var(--mo-expo) calc(var(--mo-lead, 0ms) + var(--i, 0) * 80ms);
}

body.motion-on [data-reveal="mask"].is-in > img,
body.motion-on [data-reveal="mask"].is-in > picture > img,
body.motion-on [data-reveal="mask"].is-in > video {
  --mo-zoom: 1;
}

/* ---- route cover ----
   The same dark panel the project pages use for their Barba transitions,
   built by JS so no page has to carry the markup. It rises over the page,
   then the browser navigates behind it. */
.page-swipe {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #14110f;
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
  will-change: transform;
}

.page-swipe.is-covering {
  transform: scaleY(1);
  transition: transform 0.42s cubic-bezier(0.62, 0.05, 0, 1);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mo-ch,
  .page-swipe,
  body.motion-on [data-reveal],
  body.motion-on [data-reveal="mask"],
  body.motion-on [data-reveal="mask"] > img,
  body.motion-on [data-split-chars] .mo-ch {
    transition: none !important;
  }

  /* JS never adds .motion-on under reduced motion; this covers the visitor
     who turns the setting on with the page already open. */
  body.motion-on [data-reveal],
  body.motion-on [data-split-chars] .mo-ch {
    opacity: 1;
    transform: none;
  }

  body.motion-on [data-reveal="mask"] { clip-path: none; }
  body.motion-on [data-reveal="mask"] > img { --mo-zoom: 1; }
}

/* ── Code samples in an article ──────────────────────────
   A fenced block is an example of a file, not part of the argument: it sits on
   the card surface, monospaced, and nothing inside it is a link. Long lines
   scroll inside the block so the page itself never scrolls sideways.
   ───────────────────────────────────────────────────────── */
body.article-page .article-code {
  margin: clamp(26px, 2.6vw, 38px) 0;
  padding: clamp(20px, 2vw, 28px) clamp(18px, 1.8vw, 26px);
  overflow-x: auto;
  border-left: 3px solid #f05235;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(20, 17, 15, 0.08),
    0 12px 28px rgba(20, 17, 15, 0.07);
}

/* Inline code sits inside running prose, so it stays quiet: a tint of the
   card surface rather than a block of its own. */
body.article-page .article-chapter-copy code,
body.article-page .article-opening-copy code {
  padding: 0.12em 0.38em;
  border: 1px solid rgba(20, 17, 15, 0.14);
  border-radius: 3px;
  background: #ffffff;
  color: #14110f;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

/* A fenced block lives inside .article-chapter-copy, so the inline-code rule
   above matches it too and at equal specificity. Its chip treatment has to be
   undone here, or the block draws a second bordered white box inside the one
   the <pre> already provides — and because the block is `pre` wide, that box
   runs past the scroll edge and its right border never appears. */
body.article-page .article-code code {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #14110f;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: clamp(0.82rem, 0.92vw, 0.94rem);
  line-height: 1.7;
  white-space: pre;
  tab-size: 2;
}

@media (max-width: 720px) {
  body.article-page .article-code {
    padding: 18px 16px;
    font-size: 0.8rem;
  }
}

/* ── The free-resource card ──────────────────────────────
   Coral and shadowed so the offer is unmissable, but held inside the
   article's own margins with cream running down both sides — placed into
   the page rather than cutting across it. Sits between the last chapter
   and Keep reading, ahead of the studio CTA that closes the page.
   ───────────────────────────────────────────────────────── */
body.article-page .article-kit {
  width: min(calc(100% - clamp(36px, 7vw, 112px)), 1320px);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 44px) 0 clamp(44px, 5vw, 68px);
}

body.article-page .article-kit-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
  padding: clamp(32px, 3.6vw, 54px) clamp(28px, 3.2vw, 52px);
  background: #f05235;
  color: #14110f;
  box-shadow:
    0 2px 4px rgba(20, 17, 15, 0.14),
    0 22px 46px rgba(20, 17, 15, 0.16),
    0 48px 92px rgba(20, 17, 15, 0.1);
}

body.article-page .article-kit-kicker {
  margin: 0 0 clamp(10px, 1vw, 16px);
  color: #14110f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.article-page .article-kit-title {
  margin: 0;
  color: #14110f;
  font-family: "Bogdan Lektorat", Impact, sans-serif;
  font-size: clamp(2.6rem, 4.4vw, 4.9rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  word-spacing: var(--display-word-spacing-compact);
  text-transform: uppercase;
}

body.article-page .article-kit-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
}

body.article-page .article-kit-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(20, 17, 15, 0.82);
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  line-height: 1.6;
}

/* The dark button already carries the site's character-roll hover. */
body.article-page .article-kit .content-btn {
  color: #f5f1e8;
}

@media (max-width: 860px) {
  body.article-page .article-kit-card {
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vw, 32px);
    align-items: start;
  }
}

@media (max-width: 720px) {
  body.article-page .article-kit {
    width: calc(100% - 32px);
    padding-bottom: 56px;
  }
}