/* ============================================================
   Niarika — style.css
   Components & sections (v2)
   ============================================================ */

/* ---------- Shared type bits ---------- */
.eyebrow,
.section-tag {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1;
  padding: 0.95em 1.5em;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  white-space: nowrap;
}
.btn--primary {
  background: var(--deep-tide);
  color: #fff;
}
.btn--primary:hover {
  background: var(--deep-tide-hover);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn--primary { background: var(--deep-tide); color: #fff; }
[data-theme="dark"] .btn--primary:hover { background: #2a667c; }

.btn--text {
  background: transparent;
  color: var(--text);
  padding-inline: 0.25em;
}
.btn--text:hover .arrow { transform: translateX(4px); }

.btn--full { width: 100%; justify-content: center; padding-block: 1.05em; }

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.75rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.link-cta:hover { border-color: var(--accent); }
.link-cta:hover .arrow { transform: translateX(4px); }

/* ============ HEADER ============ */
/* Scroll-position-driven morph.
   --morph-progress is a 0–1 scalar set by JS on every scroll frame (rAF-throttled,
   eased). Every animated property reads it directly, so the morph is continuous:
   hold at 40% scroll and the header sits exactly 40% morphed. Scroll back and it
   eases open. No threshold snap, no fixed end-state animation. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  --morph-progress: 0;
  /* Backdrop/blur/border still cross-fade on a short, gentle transition so the
     surface treatment doesn't flicker pixel-by-pixel. The morph itself does not
     use transitions — it follows --morph-progress directly. */
  transition: background-color 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* 92px at rest → 72px fully scrolled (delta 20px) */
  height: calc(92px - 20px * var(--morph-progress));
}

/* Responsive logo lockup — ONE inline SVG, ONE seamless motion.
   The monogram is fixed at top of viewBox; as we scroll, the viewBox crops away
   the wordmark area (bottom) and the wordmark group fades. The SVG's display
   height shrinks in lockstep, so the monogram stays visually anchored in place
   and the wordmark dissolves while the box collapses around it. */
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 129px;
  /* 60px at rest → 41.2px fully scrolled (delta 18.8px) */
  height: calc(60px - 18.8px * var(--morph-progress));
}
.brand-svg {
  display: block;
  /* Matches .brand height so the monogram stays vertically centred at every step. */
  height: calc(60px - 18.8px * var(--morph-progress));
  width: auto;
  color: var(--text); /* paths use currentColor, so theme follows automatically */
  overflow: visible;
}
.brand-svg__word {
  transform-box: fill-box;
  transform-origin: 50% 100%; /* lift from the baseline so the wordmark rises as it fades */
  /* Continuous: drifts upward and fades in lockstep with progress.
     Opacity uses a slight curve-up so the wordmark holds for the first sliver of
     scroll (so a tiny scroll doesn't immediately ghost the wordmark). */
  opacity: calc(1 - var(--morph-progress));
  transform: translateY(calc(-22px * var(--morph-progress)));
}

/* Footer — static full lockup, theme-aware via class toggle */
.brand-logo--footer {
  height: 40px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
}
.brand-logo--footer.brand-logo--dark { display: none; }
[data-theme="dark"] .brand-logo--footer.brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--footer.brand-logo--dark { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  /* Snap to a binary state for reduced-motion users — ignore continuous --morph-progress. */
  .header-inner { height: 92px; }
  .site-header.scrolled .header-inner { height: 72px; }
  .brand, .brand-svg { height: 60px; }
  .site-header.scrolled .brand, .site-header.scrolled .brand-svg { height: 41.2px; }
  .brand-svg__word { opacity: 1; transform: none; }
  .site-header.scrolled .brand-svg__word { opacity: 0; transform: none; }
}

.nav {
  display: flex;
  gap: 2.25rem;
  margin-inline: auto;
}
.nav a {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding-block: 4px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.25s var(--ease-out);
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.55em 0.8em;
  color: var(--text);
  font-size: var(--text-small);
  font-weight: 500;
  transition: border-color 0.2s var(--ease-out);
}
.theme-toggle:hover { border-color: var(--text-muted); }
.theme-toggle__icon {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
}
[data-theme="dark"] .theme-toggle__icon {
  border-color: currentColor;
  background: radial-gradient(circle at 65% 35%, transparent 48%, currentColor 49%);
  border: 0;
  box-shadow: inset 0 0 0 2px currentColor;
}

.header-cta { font-size: var(--text-small); padding: 0.7em 1.1em; }

/* hamburger - hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.menu-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  margin-inline: auto;
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem var(--container-pad) 1.75rem;
}
.mobile-nav a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
}
.mobile-nav a.btn { border: 1px solid transparent; margin-top: 0.75rem; justify-content: center; }

/* ============ HERO (typographic-led) ============ */
.hero {
  min-height: min(92vh, 920px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 12vh, 9rem);
}
.hero-inner {
  width: 100%;
  max-width: 64rem;
}
.hero-eyebrow {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
}
.hero-rule {
  margin: 1.5rem 0 2.25rem;
  height: 1px;
}
.hero-rule__line {
  display: block;
  height: 1px;
  width: 0;
  background: var(--accent);
  transform-origin: left center;
}
.hero-headline {
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin-bottom: 2rem;
  font-weight: 600;
}
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.hero-word--break { margin-left: 0; }
.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 40rem;
  margin-bottom: 2.75rem;
  opacity: 0;
  transform: translateY(8px);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
}

/* hero-loaded reveal states (set by JS) */
.hero-ready .hero-eyebrow,
.hero-ready .hero-sub,
.hero-ready .hero-actions {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-golden), transform 0.6s var(--ease-golden);
}
.hero-ready .hero-eyebrow { transition-delay: 0.05s; }
.hero-ready .hero-rule__line {
  width: 100%;
  transition: width 0.5s var(--ease-out) 0.15s;
}
.hero-ready .hero-word {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s var(--ease-golden), transform 0.55s var(--ease-golden);
}
.hero-ready .hero-sub { transition-delay: 1.15s; }
.hero-ready .hero-actions { transition-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-sub, .hero-actions, .hero-word { opacity: 1; transform: none; transition: none; }
  .hero-rule__line { width: 100%; }
}

/* ============ MANIFESTO ============ */
.manifesto-grid {
  display: grid;
  grid-template-columns: 0.28fr 0.72fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.manifesto-label { padding-top: 0.6rem; }
.manifesto-body {
  max-width: 44rem;
  hanging-punctuation: first last;
}
.manifesto-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
  color: var(--text);
}
.manifesto-text {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.manifesto-sign {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2.25rem;
}

/* ============ WE RUN BOTH SIDES ============ */
.both-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}
.both-panel {
  display: flex;
  align-items: center;
  padding-block: var(--section-pad);
}
.both-panel--brands {
  background: var(--bg);
  justify-content: flex-end;
}
/* Creator side: a 2% darker tint for micro-distinction */
.both-panel--creators {
  background: var(--bg-mist);
  justify-content: flex-start;
}
[data-theme="dark"] .both-panel--brands { background: var(--bg); }
[data-theme="dark"] .both-panel--creators { background: var(--bg-mist); }
.both-panel__inner {
  max-width: 32rem;
  padding-inline: clamp(20px, 5vw, 64px);
  /* Mirroring: each half tells its story with subtly opposed alignment */
  display: flex;
  flex-direction: column;
}
.both-panel--brands .both-panel__inner { padding-right: clamp(2rem, 4vw, 4rem); }
.both-panel--creators .both-panel__inner { padding-left: clamp(2rem, 4vw, 4rem); }
/* Brand: heading top-left, body pushed to the bottom-right */
.both-panel--brands .both-panel__inner { text-align: left; }
.both-panel--brands .both-panel__inner p { align-self: flex-end; text-align: right; }
.both-panel--brands .both-panel__inner .link-cta { align-self: flex-end; }
/* Creator: heading top-right, body pushed to the bottom-left */
.both-panel--creators .both-panel__inner { text-align: right; align-items: flex-end; }
.both-panel--creators .both-panel__inner p { align-self: flex-start; text-align: left; }
.both-panel--creators .both-panel__inner .link-cta { align-self: flex-start; }
.both-panel .section-tag { display: block; margin-bottom: 1.25rem; }
.both-title {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.both-panel p {
  font-size: var(--text-body-l);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- Centre hinge: monogram draws itself, hairline extends outward ---------- */
.both-hinge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
}
/* Vertical hairlines extend outward (top + bottom) from the monogram */
.both-hinge__line {
  display: block;
  width: 1px;
  flex: 1;
  background: var(--accent);
  opacity: 0.5;
  transform: scaleY(0);
}
.both-hinge__line--lead { transform-origin: bottom; }   /* grows up toward the top edge */
.both-hinge__line--trail { transform-origin: top; }      /* grows down toward the bottom edge */
.both-hinge.is-visible .both-hinge__line {
  transform: scaleY(1);
  transition: transform 1.1s var(--ease-out) 0.15s;
}
.both-hinge__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin-block: 1rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  flex-shrink: 0;
}
.hinge-monogram { display: block; width: 56px; height: 56px; flex: 0 0 56px; overflow: visible; }
.hinge-monogram__ring {
  /* ring fades in with the mark */
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.2s;
}
.hinge-monogram__wave {
  stroke-dasharray: var(--draw-len, 120);
  stroke-dashoffset: var(--draw-len, 120);
}
.both-hinge.is-visible .hinge-monogram__ring { opacity: 0.32; }
.both-hinge.is-visible .hinge-monogram__wave {
  animation: drawWave 1.2s var(--ease-out) 0.25s forwards;
}
.both-hinge.is-visible .hinge-monogram__wave--2 { animation-delay: 0.45s; }
@keyframes drawWave {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .both-hinge__line { transform: scaleY(1); transition: none; }
  .hinge-monogram__ring { opacity: 0.32; transition: none; }
  .hinge-monogram__wave { stroke-dashoffset: 0; animation: none; }
}

/* ============ METHOD — large-number editorial ============ */
.method-head { max-width: 42rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.method-head .section-tag { display: block; margin-bottom: 1rem; }
.method-head h2 { font-size: var(--text-h2); margin-bottom: 1rem; }
.method-intro { font-size: var(--text-body-l); color: var(--text-muted); }

.method-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.method-step {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.method-step--alt { grid-template-columns: 1fr minmax(7rem, 11rem); }
.method-step--alt .step-num { order: 2; text-align: right; }
.method-step--alt .step-body { order: 1; margin-left: auto; }
.step-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(3.5rem, 9vw, 10rem);
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.step-body { max-width: 38rem; }
.step-body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}
.step-body p { font-size: var(--text-body-l); color: var(--text-muted); line-height: 1.6; }

/* ============ WHAT WE BELIEVE ============ */
.beliefs-head { max-width: 42rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.beliefs-head .section-tag { display: block; margin-bottom: 1rem; }
.beliefs-head h2 { font-size: var(--text-h2); }
.beliefs-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}
.belief {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.belief:last-child { border-bottom: 0; padding-bottom: 0; }
.belief-num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.65rem;
  letter-spacing: 0.04em;
}
.belief-statement { grid-column: 2; grid-row: 1; }
.belief-elab { grid-column: 2; grid-row: 2; }
.belief-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
  color: var(--text);
}
.belief-elab {
  font-size: var(--text-body-l);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44rem;
}

/* ============ SELECTED WORK — designed empty state ============ */
.section--work { background: var(--bg); }
.work-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work-head .section-tag { display: block; margin-bottom: 1rem; }
.work-head h2 { font-size: var(--text-h2); margin-bottom: 1.25rem; }
.work-intro { font-size: var(--text-body-l); color: var(--text-muted); line-height: 1.6; }

.work-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.work-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  opacity: 0.6;                 /* greyed empty state */
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
/* Even empty, signal it is an interactive object */
@media (hover: hover) {
  .work-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    opacity: 0.78;
  }
}
.work-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  /* subtle Bone→Mist radial placeholder, not a generated image */
  background:
    radial-gradient(120% 120% at 30% 25%, var(--bg) 0%, var(--bg-mist) 55%, var(--mist) 100%);
  border-bottom: 1px solid var(--hairline);
}
[data-theme="dark"] .work-card__media {
  background:
    radial-gradient(120% 120% at 30% 25%, #161619 0%, #121214 60%, #0e0e10 100%);
}
.work-card__flag {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-card__body { padding: 1.4rem 1.4rem 1.6rem; }
.work-card__cat {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.work-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.work-card__desc {
  font-size: var(--text-small);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============ FAQ ============ */
.faq-grid {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.faq-head .section-tag { display: block; margin-bottom: 1rem; }
.faq-head h2 { font-size: var(--text-h2); }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 2.5rem 1.5rem 0;
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  color: var(--text);
  transition: color 0.2s var(--ease-out);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 0.25s var(--ease-out);
}
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list details p {
  padding: 0 2.5rem 1.75rem 0;
  color: var(--text-muted);
  font-size: var(--text-body-l);
  line-height: 1.6;
  max-width: 44rem;
}

/* ============ CONTACT ============ */
.section--contact { background: var(--surface); }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact-copy .section-tag { display: block; margin-bottom: 1rem; }
.contact-copy h2 { font-size: var(--text-h2); margin-bottom: 1.5rem; }
.contact-copy p { font-size: var(--text-body-l); color: var(--text-muted); max-width: 26rem; margin-bottom: 1.25rem; line-height: 1.6; }
.contact-direct { font-size: var(--text-body) !important; }
.contact-direct a { font-weight: 600; }
.contact-direct a:hover .arrow { transform: translateX(4px); }

.contact-form { display: flex; flex-direction: column; gap: 1.35rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label, .field legend {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text);
}
.field input, .field textarea, .field select {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 4px;
  padding: 0.85em 0.95em;
  color: var(--text);
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  width: 100%;
}
/* Hover: border darkens from Mist to Slate */
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--slate); }
/* Focus: Deep Tide 2px ring, 4px offset feel, subtle Bone tint */
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--highlight-flash);
  background: color-mix(in srgb, var(--field-bg) 92%, var(--bone));
}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .field select:focus {
  background: color-mix(in srgb, var(--field-bg) 88%, var(--accent));
}
/* Invalid state when a custom error is shown */
.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid {
  border-color: #b3261e;
}
[data-theme="dark"] .field input.is-invalid,
[data-theme="dark"] .field textarea.is-invalid { border-color: #f2b8b5; }
.field textarea { resize: vertical; min-height: 110px; }
.field--radio { border: 0; padding: 0; margin: 0; }
.field--radio legend { margin-bottom: 0.75rem; padding: 0; }
.radio-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.radio { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: var(--text-body); cursor: pointer; }
.radio input { width: auto; accent-color: var(--deep-tide); }

/* Honeypot: visually and functionally hidden from humans */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-error {
  display: none;
  color: #b3261e;
  font-size: var(--text-small);
  font-weight: 500;
  margin-top: 0.1rem;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.form-error.is-shown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.form-error--global { margin-top: 0.75rem; }
[data-theme="dark"] .form-error { color: #f2b8b5; }

/* Submit pending state */
.btn--primary[disabled],
.btn--primary[aria-disabled="true"] {
  background: var(--slate);
  color: var(--bone);
  cursor: not-allowed;
  transform: none;
}
.btn--primary:active { transform: translateY(1px); background: var(--deep-tide-hover); }

/* Success: a deliberate, quiet centrepiece */
.form-success {
  padding: 2.75rem 0;
  max-width: 30rem;
}
.form-success__rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1.75rem;
}
.form-success p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ============ 404 ============ */
.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.notfound-inner { max-width: 40rem; }
.notfound h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.notfound p { font-size: var(--text-body-l); color: var(--text-muted); margin-bottom: 2rem; max-width: 32rem; }
.notfound .code {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.notfound h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--text-body-l);
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.link-back:hover { border-color: var(--accent); }
.link-back:hover .arrow { transform: translateX(4px); }

/* ============ LEGAL / PRIVACY ============ */
.legal { padding-top: clamp(7rem, 12vh, 10rem); }
.legal-inner { max-width: 44rem; }
.legal .section-tag { display: block; margin-bottom: 1rem; }
.legal h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.legal-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 2.5rem;
}
.legal h2 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  margin: 2.25rem 0 0.65rem;
}
.legal p {
  font-size: var(--text-body-l);
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.legal a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-out); }
.legal p a:hover { border-color: var(--accent); }
.legal-meta {
  font-size: var(--text-small) !important;
  color: var(--text-muted);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.legal-back { margin-top: 2rem; }

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* footer logo height handled in responsive logo block above */
.footer-meta { text-align: right; }
.footer-meta p { font-size: var(--text-small); color: var(--text-muted); }
.footer-meta a { color: var(--text-muted); }
.footer-meta a:hover { color: var(--accent); }
.footer-links { margin-top: 0.4rem; }
.footer-links a { margin-left: 1rem; }

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .arrow, .btn { transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .theme-toggle__label { display: none; }
  .theme-toggle { padding: 0.55em; }

  .manifesto-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .manifesto-label { padding-top: 0; }

  /* both-sides stacks with horizontal hinge; mirroring becomes brand-left / creator-right */
  .both-grid { grid-template-columns: 1fr; }
  .both-panel { padding-block: clamp(3rem, 8vw, 4.5rem); }
  .both-panel--brands, .both-panel--creators { justify-content: flex-start; }
  .both-panel__inner,
  .both-panel--brands .both-panel__inner,
  .both-panel--creators .both-panel__inner {
    max-width: 36rem;
    padding-inline: var(--container-pad);
    margin-inline: auto;
    width: 100%;
  }
  /* mobile mirroring: brand reads left, creator reads right */
  .both-panel--brands .both-panel__inner,
  .both-panel--brands .both-panel__inner p,
  .both-panel--brands .both-panel__inner .link-cta { text-align: left; align-self: stretch; align-items: stretch; }
  .both-panel--creators .both-panel__inner { text-align: right; align-items: flex-end; }
  .both-panel--creators .both-panel__inner p,
  .both-panel--creators .both-panel__inner .link-cta { text-align: right; align-self: flex-end; }
  .both-hinge {
    flex-direction: row;
    width: 100%;
    height: 72px;
    align-items: center;
  }
  .both-hinge__line { width: auto; height: 1px; flex: 1; transform: scaleX(0); }
  .both-hinge__line--lead { transform-origin: right; }
  .both-hinge__line--trail { transform-origin: left; }
  .both-hinge.is-visible .both-hinge__line { transform: scaleX(1); }
  .both-hinge__mark { margin-block: 0; margin-inline: 1rem; }

  /* selected work: single column on mobile */
  .work-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }

  .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* method: number above content, no alternating */
  .method-step,
  .method-step--alt { grid-template-columns: 1fr; gap: 0.75rem; }
  .method-step--alt .step-num { order: 0; text-align: left; }
  .method-step--alt .step-body { order: 0; margin-left: 0; }
  .step-num { font-size: clamp(3rem, 16vw, 5rem); }

  .belief {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 0.5rem;
  }
  .belief-num { grid-column: 1; grid-row: 1; padding-top: 0; margin-bottom: 0.25rem; }
  .belief-statement { grid-column: 1; grid-row: 2; }
  .belief-elab { grid-column: 1; grid-row: 3; }
}

@media (max-width: 480px) {
  .header-inner { height: 64px; }
  .site-header.scrolled .header-inner { height: 64px; }
  .brand { min-width: 100px; height: 46px; }
  .site-header.scrolled .brand { height: 31.6px; }
  .brand-svg { height: 46px; }
  .site-header.scrolled .brand-svg { height: 31.6px; } /* = 46 * (320/466) — monogram stays locked */
  .brand-logo--footer { height: 36px; }
  .hero-headline { letter-spacing: -0.02em; }
  .manifesto-lead { font-size: 1.4rem; }
  .belief-statement { font-size: 1.5rem; }
  .radio-row { gap: 1rem; }
  .hero-actions { gap: 1.25rem; }
}

/* ============================================================
   === v3.5 DELIGHT PASS ===
   Subtle micro-interactions layered on top of the locked v3
   editorial system. Every effect is opt-in via a JS-applied
   hook class so the static v3 remains the no-JS / reduced-motion
   baseline. No copy, colour, type or structure is changed here.

   Shared premium ease for the delight pass:
     cubic-bezier(0.25, 0.46, 0.45, 0.94)
   ============================================================ */
:root {
  --ease-delight: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- 1 · Cursor-reactive hero ambient light ----------
   A single faint radial gradient layer behind the hero content.
   JS sets --mx / --my (0–100%) and the layer eases toward them via
   rAF lerp. Desktop + hover/pointer-fine only; opacity stays ~4%. */
.hero { position: relative; isolation: isolate; }
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-delight);
  /* Deep Tide tinted in light mode */
  background: radial-gradient(
    34rem 34rem at var(--mx, 50%) var(--my, 38%),
    color-mix(in srgb, var(--accent) 100%, transparent) 0%,
    transparent 60%
  );
}
/* Only paint the ambient light on capable pointers, once activated */
@media (hover: hover) and (pointer: fine) {
  .hero.hero-glow-active .hero-glow { opacity: 0.045; }
}
[data-theme="dark"] .hero-glow {
  /* bone-tinted ambient in dark mode */
  background: radial-gradient(
    34rem 34rem at var(--mx, 50%) var(--my, 38%),
    color-mix(in srgb, var(--bone) 100%, transparent) 0%,
    transparent 60%
  );
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .hero.hero-glow-active .hero-glow { opacity: 0.05; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { display: none; }
}

/* ---------- 2 · Word-by-word headline reveals ----------
   Applied to major section serif headlines (NOT the hero, which has
   its own load reveal). JS splits the heading into .dl-word spans and
   adds .dl-split; IntersectionObserver adds .dl-in to animate once.
   Body copy keeps the existing block .reveal — untouched. */
.dl-split { /* container stays in normal flow; words are inline-block */ }
.dl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
/* preserve the literal spaces between words */
.dl-space { display: inline-block; white-space: pre; }
.dl-split.dl-in .dl-word {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-delight), transform 0.6s var(--ease-delight);
  transition-delay: var(--dl-delay, 0ms);
}
/* once settled, drop will-change (JS also clears it as a belt-and-braces) */
.dl-split.dl-done .dl-word { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .dl-word { opacity: 1; transform: none; transition: none; }
}

/* ---------- 3 · Magnetic CTA buttons ----------
   JS sets --magx / --magy (px) on hover within radius; lerped to 0 on
   leave. Translation is layered on top of any existing :hover lift via
   a wrapper transform variable, so the v3 hover translateY(-1px) still
   reads. Desktop hover/pointer-fine only. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary.dl-magnetic {
    transition:
      transform 0.25s var(--ease-delight),
      background-color 0.2s var(--ease-out),
      color 0.2s var(--ease-out),
      border-color 0.2s var(--ease-out);
    transform: translate(var(--magx, 0px), var(--magy, 0px));
  }
  /* keep the tactile press: combine magnet offset with the press nudge */
  .btn--primary.dl-magnetic:active {
    transform: translate(var(--magx, 0px), calc(var(--magy, 0px) + 1px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary.dl-magnetic { transform: none; }
}

/* ---------- 4 · Method numbers entrance ----------
   Numbers start lighter + tighter, settle to their v3 weight (600) and
   natural letter-spacing when scrolled in. Staggered via --num-delay. */
.step-num.dl-num {
  font-weight: 200;
  letter-spacing: -0.075em;
  opacity: 0.55;
}
.step-num.dl-num.dl-num-in {
  font-weight: 600;
  letter-spacing: -0.04em;
  opacity: 1;
  transition:
    font-weight 0.9s var(--ease-delight),
    letter-spacing 0.9s var(--ease-delight),
    opacity 0.9s var(--ease-delight);
  transition-delay: var(--num-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .step-num.dl-num,
  .step-num.dl-num.dl-num-in {
    font-weight: 600;
    letter-spacing: -0.04em;
    opacity: 1;
    transition: none;
  }
}

/* ---------- 5 · Ambient film-grain overlay ----------
   Fixed full-viewport noise, above content but below modals. The noise
   data-URI is generated once in JS and assigned as background-image.
   Slightly lower opacity in dark mode where grain reads stronger. */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.04;
  background-repeat: repeat;
  /* background-image set by JS (SVG feTurbulence data URI) */
  mix-blend-mode: normal;
}
[data-theme="dark"] .film-grain { opacity: 0.028; }
@media print { .film-grain { display: none !important; } }

/* ---------- 6 · Custom cursor ----------
   Two layers: a 4px filled dot (1:1) and a 28px outline ring (lerped).
   Only active when JS adds .dl-cursor-on to <html> (feature-detected:
   hover/pointer-fine, no reduced-motion). Native cursor stays otherwise. */
.dl-cursor-dot,
.dl-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
}
.dl-cursor-dot {
  width: 4px;
  height: 4px;
  background: var(--text);
}
.dl-cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--text) 55%, transparent);
  transition:
    width 0.22s var(--ease-delight),
    height 0.22s var(--ease-delight),
    border-color 0.22s var(--ease-delight),
    opacity 0.3s var(--ease-delight);
}
/* show only when the custom cursor is active */
html.dl-cursor-on .dl-cursor-dot,
html.dl-cursor-on .dl-cursor-ring { opacity: 1; }
/* hide native cursor only while custom cursor is active */
html.dl-cursor-on,
html.dl-cursor-on body,
html.dl-cursor-on a,
html.dl-cursor-on button,
html.dl-cursor-on input,
html.dl-cursor-on textarea,
html.dl-cursor-on select,
html.dl-cursor-on [role="button"],
html.dl-cursor-on summary,
html.dl-cursor-on label { cursor: none; }
/* ring grows + brightens over interactive elements */
html.dl-cursor-on .dl-cursor-ring.dl-cursor-hover {
  width: 40px;
  height: 40px;
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .dl-cursor-dot, .dl-cursor-ring { display: none; }
}
/* never engage on touch / coarse pointers */
@media not all and (hover: hover) and (pointer: fine) {
  .dl-cursor-dot, .dl-cursor-ring { display: none; }
}
/* === end v3.5 DELIGHT PASS === */

/* ============================================================
   === v3.8 WARMTH PASS — light-mode atmospheric depth ===
   Adds three layers, all light-mode only, all featherweight:
     A · Atmospheric warm radial wash (fixed, behind everything)
     B · Page-wide cursor warmth pool (faint, follows cursor)
     C · Tonal panel separation (driven by bg-mist token swap)
   Layer A is static — safe under reduced-motion.
   Layer B is hover/pointer-fine only and reduced-motion safe.
   All layers disabled in dark mode (which already has its own
   ambient cursor light + dramatic ground).
   ============================================================ */

/* A · ATMOSPHERIC WARM WASH ----------------------------------
   Fixed full-viewport radial gradient. Centre stays --bone, edges
   drift toward --warm-edge at ~30% opacity. Creates the feeling
   of late-afternoon paper without changing the perceived bg. */
.warmth-wash {
  position: fixed;
  inset: 0;
  z-index: -2;            /* behind grain, behind hero glow */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-delight);
  background: radial-gradient(
    120% 90% at 50% 35%,
    transparent 0%,
    transparent 35%,
    color-mix(in srgb, var(--warm-edge) 100%, transparent) 100%
  );
}
:root .warmth-wash,
[data-theme="light"] .warmth-wash { opacity: 0.55; }
[data-theme="dark"]  .warmth-wash { opacity: 0; }

/* B · PAGE-WIDE CURSOR WARMTH POOL ---------------------------
   A faint warm pool that follows the cursor across the entire page,
   sitting behind content. JS sets --cx / --cy (px) on <html>. */
.cursor-warmth {
  position: fixed;
  inset: 0;
  z-index: -1;            /* above warmth-wash, behind page content */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-delight);
  background: radial-gradient(
    28rem 28rem at var(--cx, 50vw) var(--cy, 35vh),
    color-mix(in srgb, var(--cursor-warm) 100%, transparent) 0%,
    transparent 65%
  );
  mix-blend-mode: multiply;
}
@media (hover: hover) and (pointer: fine) {
  html.cursor-warmth-active .cursor-warmth { opacity: 0.18; }
}
[data-theme="dark"] .cursor-warmth { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cursor-warmth { display: none; }
}

/* C · TONAL PANEL SEPARATION ---------------------------------
   --bg-mist now points to --cool-oat in light mode (set in base.css).
   Add a hair more contrast on the creator panel so the duotone reads
   without becoming heavy. */
[data-theme="light"] .both-panel--creators,
:root .both-panel--creators {
  /* a whisper of cool tint layered on top so the panel reads as a
     distinct material from the brand side. Stays well under 5% delta. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cool-oat) 60%, transparent) 0%,
      var(--cool-oat) 100%);
}

/* C² · work-card hover — push the Deep Tide whisper slightly in light
   mode so cards feel like they have a tactile response, not a flat lift. */
@media (hover: hover) and (pointer: fine) {
  :root .work-card:hover,
  [data-theme="light"] .work-card:hover {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 3.5%, var(--surface)) 0%,
        var(--surface) 100%);
  }
}

/* === end v3.8 WARMTH PASS === */