/* ============================================================
   HyaPak — styles.css
   Editorial, organic, glassy. Earthy muted palette.
============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* palette: hyacinth (default) */
  --c-cream:        #F2ECDD;
  --c-cream-2:      #EAE2CC;
  --c-ink:          #1A1612;
  --c-ink-2:        #2A2620;
  --c-violet:       #6E5A91;
  --c-violet-deep:  #4A3A6B;
  --c-sage:         #8E9C70;
  --c-sage-deep:    #5E6B47;
  --c-clay:         #B5663F;
  --c-water:        #93A8A0;
  /* HyaPak signature green — brand mark */
  --c-green:        #669933;
  --c-green-deep:   #4F7A26;
  --c-green-bright: #7FB23F;
  --c-line:         rgba(26,22,18,.12);
  --c-line-2:       rgba(26,22,18,.08);

  --bg:             var(--c-cream);
  --fg:             var(--c-ink);
  --fg-mute:        rgba(26,22,18,.65);
  --fg-faint:       rgba(26,22,18,.45);

  /* type */
  --f-serif:        "Instrument Serif", "Times New Roman", Georgia, serif;
  --f-sans:         "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-display:      var(--f-serif);
  --f-body:         var(--f-sans);

  /* scale */
  --maxw:           1440px;
  --pad-x:          clamp(20px, 4vw, 72px);
  --gap:            clamp(20px, 3vw, 40px);
  --radius:         18px;
  --radius-sm:      10px;

  /* shadows */
  --shadow-card:    0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -20px rgba(26,22,18,.25);
  --shadow-soft:    0 30px 60px -30px rgba(26,22,18,.35);
}

/* dark theme */
[data-theme="dark"] {
  --c-cream:        #15120E;
  --c-cream-2:      #1E1A14;
  --c-ink:          #F2ECDD;
  --c-ink-2:        #DCD4BD;
  /* brighten the signature green for dark backgrounds */
  --c-green:        #84BC45;
  --c-green-deep:   #669933;
  --c-green-bright: #9AD158;
  --c-line:         rgba(242,236,221,.14);
  --c-line-2:       rgba(242,236,221,.08);
  --bg:             var(--c-cream);
  --fg:             var(--c-ink);
  --fg-mute:        rgba(242,236,221,.65);
  --fg-faint:       rgba(242,236,221,.45);
  --shadow-card:    0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -20px rgba(0,0,0,.6);
}

/* alt palettes */
[data-palette="lagoon"] {
  --c-violet:       #4FA59A;
  --c-violet-deep:  #2F6F69;
  --c-sage:         #C6BD7E;
  --c-sage-deep:    #7A7945;
  --c-clay:         #D88746;
  --c-water:        #9BC7C0;
}
[data-palette="terracotta"] {
  --c-violet:       #C76A4B;
  --c-violet-deep:  #8A3F23;
  --c-sage:         #8F9466;
  --c-sage-deep:    #5A5E3A;
  --c-clay:         #6E5A91;
  --c-water:        #D8C7A8;
}
[data-palette="ink"] {
  --c-cream:        #F4F1EA;
  --c-cream-2:      #E8E3D5;
  --c-ink:          #0F0E0C;
  --c-violet:       #2A2620;
  --c-violet-deep:  #0F0E0C;
  --c-sage:         #7A7A6E;
  --c-sage-deep:    #4A4A40;
  --c-clay:         #C58A2E;
  --c-water:        #BFB8A7;
}

/* type pairings */
[data-type="grotesk"] {
  --f-display:      var(--f-sans);
  --f-body:         var(--f-sans);
}
[data-type="mono"] {
  --f-display:      var(--f-mono);
  --f-body:         var(--f-sans);
}
[data-type="editorial"] {
  --f-display:      var(--f-serif);
  --f-body:         var(--f-sans);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* selection */
::selection { background: var(--c-violet); color: var(--c-cream); }

/* ---------- LOADING VEIL ---------- */
.veil {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s ease .2s, visibility 0s linear 1s;
}
.veil.hidden { opacity: 0; visibility: hidden; }
.veil-mark {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 40px);
  font-style: italic;
  animation: veilPulse 1.6s ease-in-out infinite;
}
.veil-mark svg { width: 22px; height: 22px; color: var(--c-violet); }
@keyframes veilPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 40px);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--c-line-2);
}
.nav-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--c-violet-deep);
}
.nav-glyph { width: 22px; height: 22px; color: var(--c-violet); }
.nav-links {
  display: flex; gap: clamp(14px, 2vw, 30px);
  color: var(--fg-mute);
}
.nav-links a { position: relative; padding: 6px 2px; transition: color .25s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: currentColor; transition: right .35s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { right: 0; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 18px;
  background: var(--c-ink); color: var(--c-cream);
  border-radius: 999px;
  transition: transform .25s, background .25s;
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-clay);
  box-shadow: 0 0 0 0 var(--c-clay);
  animation: ctaPulse 2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-clay) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* day/night toggle */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--c-line);
  color: var(--fg);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s, border-color .25s, color .25s;
  margin-left: 6px;
  position: relative;
  overflow: hidden;
}
.nav-toggle:hover {
  transform: rotate(-12deg);
  border-color: var(--c-violet);
  color: var(--c-violet-deep);
}
[data-theme="dark"] .nav-toggle:hover { color: var(--c-clay); border-color: var(--c-clay); }
.nav-toggle svg { width: 17px; height: 17px; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s; }
.nav-toggle .icon-sun { position: absolute; }
.nav-toggle .icon-moon { position: absolute; }
[data-theme="light"] .nav-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .nav-toggle .icon-moon { opacity: 0; transform: rotate(60deg) scale(.5); }
[data-theme="dark"] .nav-toggle .icon-sun { opacity: 0; transform: rotate(-60deg) scale(.5); }
[data-theme="dark"] .nav-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--c-line); border-radius: 999px;
  position: relative;
}
.nav-burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--fg);
  transition: transform .3s, top .3s;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-links {
    position: fixed; inset: 64px 12px auto 12px;
    flex-direction: column; gap: 0;
    padding: 12px 18px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--c-line);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .35s, opacity .35s;
  }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--c-line-2); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav[data-open="true"] .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-cta { display: none; }
  .nav-burger { display: block; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(120px, 18vh, 180px) var(--pad-x) 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
.hero-shapes {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: blur(.4px);
}
.leaf { transform-origin: center; mix-blend-mode: multiply; opacity: .85; }
[data-theme="dark"] .leaf { mix-blend-mode: screen; opacity: .55; }
.l1 { animation: drift 22s ease-in-out infinite; }
.l2 { animation: drift 28s ease-in-out -3s infinite reverse; }
.l3 { animation: drift 26s ease-in-out -6s infinite; }
.l4 { animation: drift 24s ease-in-out -9s infinite reverse; }
.l5 { animation: drift 30s ease-in-out -12s infinite; }
.l6 { animation: drift 32s ease-in-out -15s infinite reverse; }
.dot { animation: bob 6s ease-in-out infinite; }
.d2 { animation-delay: -2s; } .d3 { animation-delay: -3.5s; }
.d4 { animation-delay: -1.2s; } .d5 { animation-delay: -4s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) rotate(0); }
  33%     { transform: translate(20px,-26px) rotate(6deg); }
  66%     { transform: translate(-18px,12px) rotate(-4deg); }
}
@keyframes bob {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(0,-10px); }
}

.hero-irid {
  position: absolute; inset: -20% -10% 10% -10%;
  background:
    radial-gradient(60% 50% at 20% 30%, color-mix(in srgb, var(--c-violet) 35%, transparent), transparent 60%),
    radial-gradient(50% 50% at 80% 20%, color-mix(in srgb, var(--c-water) 50%, transparent), transparent 60%),
    radial-gradient(70% 60% at 60% 80%, color-mix(in srgb, var(--c-sage) 35%, transparent), transparent 60%),
    radial-gradient(40% 40% at 30% 90%, color-mix(in srgb, var(--c-clay) 28%, transparent), transparent 60%);
  filter: blur(40px) saturate(115%);
  animation: iridShift 24s ease-in-out infinite;
  opacity: .9;
}
@keyframes iridShift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(2%, -3%) scale(1.08); }
}
.hero-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0, transparent 1px, color-mix(in srgb, var(--c-ink) 4%, transparent) 1px);
  background-size: 3px 3px;
  opacity: .35;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .hero-grain { mix-blend-mode: screen; opacity: .15; }

.hero-content {
  position: relative; z-index: 1;
  max-width: 1280px;
  padding-bottom: clamp(60px, 8vh, 90px);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(8px);
  margin-bottom: clamp(20px, 3vh, 32px);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-green);
  box-shadow: 0 0 0 0 var(--c-green);
  animation: greenPulse 2.2s ease-in-out infinite;
}
@keyframes greenPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-green) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-eyebrow .loc {
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--c-line);
  color: var(--fg-faint);
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(64px, 13.5vw, 220px);
  line-height: .9;
  letter-spacing: -.03em;
  font-weight: 400;
  margin: 0 0 clamp(20px, 3vh, 36px);
  color: var(--fg);
}
.hero-title .line { display: block; opacity: 0; transform: translateY(40px); }
.hero-title .line:nth-child(1) { animation: heroIn .9s cubic-bezier(.22,1,.36,1) .25s forwards; }
.hero-title .line:nth-child(2) { animation: heroIn .9s cubic-bezier(.22,1,.36,1) .42s forwards; }
.hero-title em {
  font-style: italic;
  background: linear-gradient(110deg, var(--c-green) 14%, var(--c-violet) 52%, var(--c-clay) 88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shine 8s linear infinite;
}
.hero-title .dotend {
  display: inline-block;
  color: var(--c-green);
  animation: bob 4s ease-in-out infinite;
}
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes shine {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

.hero-lede {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 90%, transparent);
  max-width: 640px;
  margin: 0 0 clamp(24px, 4vh, 40px);
  opacity: 0; transform: translateY(20px);
  animation: heroIn .9s cubic-bezier(.22,1,.36,1) .65s forwards;
}
.hero-lede em { color: var(--fg); font-style: italic; font-family: var(--f-display); }

.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: heroIn .9s cubic-bezier(.22,1,.36,1) .8s forwards;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: transform .25s, background .25s, color .25s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--c-ink); color: var(--c-cream);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--c-violet-deep); }
.btn-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--c-line);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--c-ink) 6%, transparent); }

.hero-marquee {
  position: relative;
  margin: 0 calc(-1 * var(--pad-x));
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(4px);
}
.marquee-track {
  display: flex; gap: 32px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  animation: marquee 38s linear infinite;
  width: max-content;
}
.marquee-track > span:nth-child(even) { color: var(--c-clay); }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hero-scroll {
  position: absolute; right: var(--pad-x); bottom: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute);
  animation: bob 3.4s ease-in-out infinite;
}
.hero-scroll svg { width: 14px; height: 22px; }
@media (max-width: 880px) { .hero-scroll { display: none; } }

/* ---------- COMMON SECTION HEAD ---------- */
section { position: relative; padding: clamp(80px, 12vh, 160px) var(--pad-x); }
.section-head { max-width: var(--maxw); margin: 0 auto clamp(48px, 8vh, 96px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: clamp(20px, 3vh, 36px);
}
.eyebrow .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-cream);
  font-size: 11px;
}
.eyebrow-light .num { background: var(--c-cream); color: var(--c-ink); }
.display {
  font-family: var(--f-display);
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 400;
  margin: 0;
}
.display em {
  font-style: italic;
  color: var(--c-violet-deep);
}
[data-theme="dark"] .display em { color: var(--c-clay); }
.section-lede {
  max-width: 620px;
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-mute);
}

/* reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
[data-stagger="1"] { transition-delay: .15s; }
[data-stagger="2"] { transition-delay: .3s; }

/* ---------- PROBLEM ---------- */
.problem { background: var(--bg); }
.display .muted { color: var(--fg-faint); }
.problem-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; } }

.prob-card {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
[data-theme="dark"] .prob-card { background: color-mix(in srgb, var(--bg) 60%, var(--c-ink-2) 40%); }

.prob-tag {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 0%, var(--c-ink) 8%);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg);
}
.prob-tag span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-cream);
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.prob-plastic .prob-tag span { background: var(--c-clay); }
.prob-hyacinth .prob-tag span { background: var(--c-sage-deep); }

.prob-stat {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 4px;
}
.prob-stat .counter {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(56px, 8vw, 120px); line-height: .95;
  color: var(--fg);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.prob-unit {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
}
.prob-desc {
  font-size: 16px; color: var(--fg-mute); max-width: 48ch; margin: 0;
}

.prob-visual {
  margin-top: 10px;
  height: 200px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--c-line);
  position: relative;
  overflow: hidden;
}

/* plastic bricks visual */
.prob-visual-plastic { padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brick {
  border-radius: 4px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-clay) 80%, var(--bg)) 0%, var(--c-clay) 100%);
  animation: brickWobble 6s ease-in-out infinite;
}
.brick:nth-child(odd) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-violet) 70%, var(--bg)) 0%, var(--c-violet-deep) 100%); }
.brick:nth-child(3n)  { background: linear-gradient(135deg, color-mix(in srgb, var(--c-ink) 80%, var(--bg)) 0%, var(--c-ink) 100%); }
.b2 { animation-delay: -.5s; } .b3 { animation-delay: -1s; }
.b4 { animation-delay: -1.5s; } .b5 { animation-delay: -2s; }
.b6 { animation-delay: -2.5s; } .b7 { animation-delay: -3s; }
.b8 { animation-delay: -3.5s; } .b9 { animation-delay: -4s; }
@keyframes brickWobble {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

/* hyacinth visual */
.prob-visual-hyacinth svg { width: 100%; height: 100%; }
.hya-float ellipse { transform-origin: center; }
.hya-float ellipse:nth-child(1) { animation: drift 12s ease-in-out infinite; }
.hya-float ellipse:nth-child(2) { animation: drift 14s ease-in-out -2s infinite reverse; }
.hya-float ellipse:nth-child(3) { animation: drift 10s ease-in-out -4s infinite; }
.hya-float ellipse:nth-child(4) { animation: drift 13s ease-in-out -6s infinite reverse; }
.hya-float ellipse:nth-child(5) { animation: drift 11s ease-in-out -1s infinite; }
.hya-float ellipse:nth-child(6) { animation: drift 15s ease-in-out -3s infinite reverse; }
.hya-float ellipse:nth-child(7) { animation: drift 12s ease-in-out -5s infinite; }

.problem-bridge {
  max-width: var(--maxw); margin: clamp(40px, 6vh, 64px) auto 0;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.3;
  color: var(--fg-mute);
  text-align: center;
}
.problem-bridge .mono {
  display: inline-block;
  font-family: var(--f-mono); font-style: normal;
  font-size: .55em; letter-spacing: .08em;
  margin-right: 16px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--c-line); color: var(--fg);
  vertical-align: middle;
}

/* ---------- MANIFESTO ---------- */
.manifesto {
  position: relative;
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(120px, 22vh, 220px) var(--pad-x);
  overflow: hidden;
  text-align: center;
}
.manifesto-bg { position: absolute; inset: 0; pointer-events: none; }
.m-blob {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  animation: iridShift 30s ease-in-out infinite;
}
.m-blob.b1 { top: -150px; left: -200px; background: var(--c-violet); }
.m-blob.b2 { bottom: -250px; right: -200px; background: var(--c-sage-deep); animation-direction: reverse; }

.manifesto-line {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(48px, 10vw, 160px);
  line-height: .95;
  letter-spacing: -.025em;
  font-weight: 400;
  margin: 0;
  color: var(--c-cream);
}
.manifesto-line em {
  font-style: italic;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c-water) 80%, white) 10%, color-mix(in srgb, var(--c-clay) 90%, white) 50%, color-mix(in srgb, var(--c-violet) 80%, white) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shine 10s linear infinite;
}
.ml-l { display: block; opacity: 0; transform: translateY(40px); }
.manifesto.in .ml-l { animation: heroIn .9s cubic-bezier(.22,1,.36,1) forwards; }
.manifesto.in .ml-l:nth-child(1) { animation-delay: 0s; }
.manifesto.in .ml-l:nth-child(2) { animation-delay: .15s; }
.manifesto.in .ml-l:nth-child(3) { animation-delay: .3s; }

.manifesto-sub {
  max-width: 640px; margin: clamp(24px, 4vh, 40px) auto 0;
  font-family: var(--f-body);
  font-size: clamp(15px, 1.3vw, 18px);
  color: color-mix(in srgb, var(--c-cream) 65%, transparent);
}

/* ---------- PROCESS / SCROLLYTELL ---------- */
.process { background: var(--bg); }
.process-stage {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
}
@media (max-width: 880px) {
  .process-stage { grid-template-columns: 1fr; gap: 32px; }
}

.process-visual {
  position: sticky; top: 100px;
  align-self: start;
}
.pv-frame {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-violet) 12%, var(--bg)) 0%, color-mix(in srgb, var(--c-sage) 12%, var(--bg)) 100%);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.pv-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-orbit { transform-origin: 200px 200px; animation: spin 30s linear infinite; }
.orbit-dot { fill: var(--c-clay); opacity: .35; }
.pv-orbit .orbit-dot.active { opacity: 1; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.pv-stage {
  opacity: 0;
  transform: scale(.88);
  transform-origin: 200px 200px;
  transform-box: fill-box;
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.pv-stage.active { opacity: 1; transform: scale(1); }

.pv-label {
  position: absolute; left: 22px; bottom: 22px;
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
}
.pv-label .pv-num {
  font-family: var(--f-mono); font-style: normal;
  font-size: 12px; letter-spacing: .1em;
  color: var(--c-clay);
}
.pv-progress {
  position: absolute; left: 22px; right: 22px; top: 22px;
  height: 2px; border-radius: 2px; background: var(--c-line);
  overflow: hidden;
}
.pv-progress-bar {
  display: block; height: 100%; width: 25%;
  background: var(--c-green);
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

.process-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: clamp(40px, 8vh, 96px);
}
.step {
  padding: clamp(20px, 3vw, 40px) 0;
  min-height: 50vh;
  display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--c-line);
  opacity: .35;
  transition: opacity .5s ease;
}
.step:first-child { border-top: 0; }
.step.active { opacity: 1; }
.step-num {
  font-size: 13px; letter-spacing: .08em;
  color: var(--c-clay);
  margin-bottom: 12px;
}
.step-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  color: var(--fg);
}
.step.active .step-title { font-style: italic; }
.step-body {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-mute);
  max-width: 50ch;
  margin: 0 0 18px;
}
.step-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- PRODUCTS ---------- */
.products {
  background: var(--c-cream-2);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
[data-theme="dark"] .products { background: var(--c-cream-2); }
.product-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .product-grid { grid-template-columns: 1fr; } }

.product {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.product-art {
  aspect-ratio: 4/3;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--c-ink) 4%, transparent) 18px 19px),
    color-mix(in srgb, var(--accent, var(--c-violet)) 14%, var(--bg));
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-art .art {
  position: relative;
  width: 62%; height: 62%;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.product:hover .product-art .art { transform: rotate(-3deg) scale(1.04); }

/* product shapes — geometric placeholders only */
.art.tray   { background: var(--accent); border-radius: 8px; box-shadow: inset 0 -14px 0 color-mix(in srgb, var(--accent) 60%, var(--c-ink) 40%); }
.art.clam   { background: var(--accent); border-radius: 999px 999px 8px 8px; box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--accent) 60%, var(--c-ink) 40%); }
.art.bottle { width: 28% !important; background: var(--accent); border-radius: 24px; box-shadow: inset -6px 0 0 color-mix(in srgb, var(--accent) 60%, var(--c-ink) 40%); }
.art.bottle::before { content: ""; position: absolute; top: -14%; left: 30%; width: 40%; height: 18%; background: var(--accent); border-radius: 4px 4px 0 0; }
.art.film   { background: linear-gradient(110deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, white) 50%, var(--accent) 100%); border-radius: 4px; opacity: .9; }
.art.cup    { width: 50% !important; background: var(--accent); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%); }
.art.insert { background:
              linear-gradient(90deg, var(--accent) 0 30%, transparent 30%) ,
              linear-gradient(90deg, transparent 0 35%, var(--accent) 35% 65%, transparent 65%),
              linear-gradient(90deg, transparent 0 70%, var(--accent) 70%);
              background-color: color-mix(in srgb, var(--accent) 30%, white);
              border-radius: 6px; }

.product-meta {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.product-meta .mono { font-size: 11px; letter-spacing: .08em; color: var(--c-clay); }
.product-meta h4 { font-family: var(--f-display); font-size: 26px; font-weight: 400; margin: 0; letter-spacing: -.01em; }
.product-meta p { margin: 0; color: var(--fg-mute); font-size: 14px; }

/* ---------- IMPACT ---------- */
.impact { background: var(--bg); }
.impact-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 980px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .impact-grid { grid-template-columns: 1fr; } }

.impact-stat {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
}
[data-theme="dark"] .impact-stat { background: var(--c-cream-2); }
.impact-num {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--f-display);
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--c-green-deep);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
  font-style: italic;
}
[data-theme="dark"] .impact-num { color: var(--c-green); }
.impact-plus {
  font-size: .55em;
  color: var(--c-clay);
  font-style: normal;
}
.impact-lbl {
  font-size: 14px;
  color: var(--fg-mute);
  max-width: 24ch;
}
.impact-note {
  max-width: var(--maxw); margin: clamp(32px, 5vh, 56px) auto 0;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
}
.impact-note-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-sage-deep);
  animation: ctaPulse 2.4s ease-in-out infinite;
}

/* ---------- ORIGIN STORY ---------- */
.story {
  background: var(--bg);
  border-top: 1px solid var(--c-line-2);
}
.story-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .story-inner { grid-template-columns: 1fr; } }
.story-side { position: sticky; top: 110px; align-self: start; }
@media (max-width: 880px) { .story-side { position: static; } }
.story-h {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 24px;
}
.story-h em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .story-h em { color: var(--c-clay); }
.story-quote-mark {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(120px, 18vw, 220px);
  line-height: .8;
  color: var(--c-clay);
  opacity: .25;
  margin-top: 16px;
  user-select: none;
}
.story-body {
  display: flex; flex-direction: column;
  gap: 24px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--fg);
}
.story-body p { margin: 0; }
.story-body em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .story-body em { color: var(--c-clay); }
.story-sign {
  margin-top: 12px;
  display: flex; flex-direction: column;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.8;
}

/* ---------- LOGOS ---------- */
.logos {
  padding: clamp(40px, 7vh, 80px) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--bg);
  overflow: hidden;
}
.logos-rail {
  display: flex; justify-content: center; padding: 0 var(--pad-x) 20px;
}
.logos-lede {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute);
}
.logos-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.logos-track {
  display: flex; gap: 48px;
  width: max-content;
  animation: marquee 50s linear infinite;
  padding: 12px 0;
}
.logo {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--fg-mute);
  white-space: nowrap;
  letter-spacing: -.01em;
  transition: color .3s;
}
.logo:hover { color: var(--fg); }

/* ---------- FAQ ---------- */
.faq { background: var(--bg); }
.faq-list {
  max-width: var(--maxw); margin: 0 auto;
  list-style: none; padding: 0;
  border-top: 1px solid var(--c-line);
}
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-q {
  display: flex; align-items: center; gap: 20px;
  width: 100%;
  padding: clamp(20px, 3vw, 32px) 0;
  background: transparent; border: 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--fg);
  line-height: 1.2;
}
.faq-q:hover { color: var(--c-violet-deep); }
[data-theme="dark"] .faq-q:hover { color: var(--c-clay); }
.faq-num {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em;
  color: var(--c-clay);
  flex-shrink: 0; width: 36px;
}
.faq-text { flex: 1; }
.faq-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  position: relative;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s, border-color .25s;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.5px; background: var(--fg);
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: var(--c-ink); border-color: var(--c-ink); transform: rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-icon::before,
.faq-q[aria-expanded="true"] .faq-icon::after { background: var(--c-cream); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.faq-a > p {
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 56px;
  font-family: var(--f-body); font-size: 16px;
  color: var(--fg-mute);
  max-width: 70ch;
  font-style: normal;
}
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; }
.faq-item[data-open="true"] .faq-a > p { padding-bottom: clamp(20px, 3vw, 32px); }

@media (max-width: 580px) {
  .faq-q { gap: 12px; }
  .faq-num { width: 28px; font-size: 11px; }
  .faq-a > p { padding-left: 40px; }
}

/* ---------- CTA ---------- */
.cta {
  background: var(--c-ink);
  color: var(--c-cream);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-blob {
  position: absolute; top: -200px; right: -200px;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--c-violet) 0%, var(--c-sage-deep) 40%, transparent 70%);
  filter: blur(60px);
  opacity: .6;
  animation: iridShift 22s ease-in-out infinite;
}
.cta-inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.cta-inner .eyebrow { color: color-mix(in srgb, var(--c-cream) 65%, transparent); }
.cta-title {
  font-family: var(--f-display);
  font-size: clamp(56px, 11vw, 200px);
  line-height: .92;
  letter-spacing: -.025em;
  font-weight: 400;
  margin: 0 0 clamp(20px, 3vh, 36px);
  color: var(--c-cream);
}
.cta-title span { display: block; }
.cta-title em {
  font-style: italic;
  background: linear-gradient(110deg, var(--c-water) 10%, var(--c-clay) 50%, var(--c-violet) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shine 8s linear infinite;
}
.cta-lede {
  max-width: 560px;
  font-size: clamp(16px, 1.3vw, 19px);
  color: color-mix(in srgb, var(--c-cream) 70%, transparent);
  margin: 0 0 clamp(28px, 5vh, 48px);
}
.cta-form {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--c-cream) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-cream) 4%, transparent);
  transition: border-color .25s;
}
.cta-form:focus-within { border-color: color-mix(in srgb, var(--c-cream) 40%, transparent); }
.cta-form input {
  flex: 1; min-width: 0;
  background: transparent; border: 0;
  color: var(--c-cream);
  font: inherit; font-size: 15px;
  padding: 12px 18px;
  outline: 0;
}
.cta-form input::placeholder { color: color-mix(in srgb, var(--c-cream) 40%, transparent); }
.cta-form button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-cream); color: var(--c-ink);
  border: 0; padding: 12px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: background .25s, color .25s, transform .25s;
}
.cta-form button:hover { background: var(--c-clay); color: var(--c-cream); transform: translateY(-1px); }
.cta-form button svg { width: 16px; height: 16px; }
.cta-ok { width: 100%; padding: 8px 18px; color: var(--c-water); }

/* CTA action buttons (lead-up to contact page) */
.cta-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 28px;
}
.cta-primary,
.cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.cta-primary {
  background: var(--c-cream); color: var(--c-ink);
}
.cta-primary:hover { background: var(--c-clay); color: var(--c-cream); transform: translateY(-2px); }
.cta-primary svg { width: 16px; height: 16px; }
.cta-secondary {
  background: transparent; color: var(--c-cream);
  border: 1px solid color-mix(in srgb, var(--c-cream) 30%, transparent);
}
.cta-secondary:hover { border-color: var(--c-clay); color: var(--c-clay); transform: translateY(-2px); }

.cta-alt {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-cream) 50%, transparent);
}
.cta-alt a { color: var(--c-cream); border-bottom: 1px solid color-mix(in srgb, var(--c-cream) 30%, transparent); }
.cta-alt a:hover { border-bottom-color: var(--c-clay); }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--c-ink);
  color: color-mix(in srgb, var(--c-cream) 70%, transparent);
  padding: clamp(40px, 6vh, 64px) var(--pad-x);
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 10%, transparent);
}
.footer-top {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
  padding-bottom: clamp(30px, 5vh, 56px);
}
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-style: italic;
  font-size: 28px;
  color: var(--c-cream);
}
.footer-brand svg { width: 24px; height: 24px; color: var(--c-clay); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 580px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-cols > div { display: flex; flex-direction: column; gap: 8px; }
.footer-h {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-cream) 50%, transparent);
  margin: 0 0 4px;
}
.footer-cols a { color: var(--c-cream); font-size: 14px; transition: color .25s; }
.footer-cols a:hover { color: var(--c-clay); }
.footer-socials {
  display: flex; gap: 8px; margin-top: 10px;
}
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform .2s ease, opacity .2s ease;
}
.footer-socials a img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* The X mark is a black glyph on transparency — sit it on a light disc so it reads on the dark footer */
.footer-socials a[aria-label="X / Twitter"] { background: #fff; }
.footer-socials a[aria-label="X / Twitter"] img { object-fit: contain; padding: 7px; }
.footer-socials a:hover { transform: translateY(-2px); opacity: .85; }

/* Partner / membership badges */
.footer-partners {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: clamp(24px, 4vh, 36px) 0;
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 10%, transparent);
}
.footer-partner {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 9px;
  padding: 9px 14px; height: 58px; box-sizing: border-box;
}
.footer-partner img { height: 100%; width: auto; display: block; }
.footer-bot {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 10%, transparent);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-cream) 45%, transparent);
}

/* ---------- MOTION GUARDS ---------- */
[data-motion="subtle"] .hero-irid,
[data-motion="subtle"] .leaves,
[data-motion="subtle"] .marquee-track,
[data-motion="subtle"] .logos-track,
[data-motion="subtle"] .m-blob,
[data-motion="subtle"] .cta-blob,
[data-motion="subtle"] .pv-orbit,
[data-motion="subtle"] .hero-title em,
[data-motion="subtle"] .manifesto-line em,
[data-motion="subtle"] .cta-title em,
[data-motion="subtle"] .hya-float ellipse,
[data-motion="subtle"] .brick { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .veil { display: none; }
}

/* low motion class set by JS on mobile small viewports */
.lite .hero-irid,
.lite .m-blob,
.lite .cta-blob { filter: blur(30px); }
.lite .hero-shapes { display: none; }

/* ============================================================
   ADDITIONS — Awards, Press, Founder, Subpages
============================================================ */

/* ---------- AWARDS ---------- */
.awards { background: var(--bg); }
.awards-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  list-style: none; padding: 0;
}
@media (max-width: 1000px) { .awards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .awards-grid { grid-template-columns: 1fr; } }
.award {
  position: relative;
  padding: 22px 20px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s, border-color .3s;
}
[data-theme="dark"] .award { background: var(--c-cream-2); }
.award:hover { transform: translateY(-3px); border-color: var(--c-clay); }
.award::before {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-clay);
}
.award-year {
  font-size: 11px; letter-spacing: .08em; color: var(--c-clay);
}
.award-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.award-org {
  margin: 0;
  font-size: 13px; color: var(--fg-mute); line-height: 1.4;
}

/* ---------- PRESS STRIP ---------- */
.press {
  background: var(--c-cream-2);
  padding: clamp(40px, 6vh, 64px) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.press-rail {
  display: flex; justify-content: center;
  padding: 0 var(--pad-x) 16px;
}
.press-track .logo {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ---------- FOUNDER CALLOUT ---------- */
.founder { background: var(--bg); }
.founder-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(36px, 6vw, 60px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
}
[data-theme="dark"] .founder-inner { background: var(--c-cream-2); }
@media (max-width: 860px) {
  .founder-inner { grid-template-columns: 1fr; padding: 28px 22px; }
}
.founder-portrait {
  position: relative;
  width: 100%; aspect-ratio: 4/5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
}
.founder-portrait-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--c-ink) 5%, transparent) 18px 19px),
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-sage) 35%, var(--bg)), color-mix(in srgb, var(--c-violet) 25%, var(--bg)) 70%);
}
.founder-portrait-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(80px, 12vw, 140px);
  color: var(--fg);
  opacity: .55;
}
.founder-portrait::after {
  content: "";
  display: none;
}
.founder-quote {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 16px 0 24px;
  color: var(--fg);
}
.founder-quote em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .founder-quote em { color: var(--c-clay); }
.founder-name {
  font-family: var(--f-display); font-style: italic;
  font-size: 22px;
  margin: 0;
}
.founder-role {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  margin: 4px 0 0;
}

/* ============================================================
   SUBPAGE LAYOUT (contact, blog, learn)
============================================================ */
.subpage-hero {
  position: relative;
  padding: clamp(140px, 22vh, 200px) var(--pad-x) clamp(50px, 8vh, 80px);
  background: var(--bg);
  isolation: isolate;
  overflow: hidden;
}
.subpage-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 60% at 80% 20%, color-mix(in srgb, var(--c-violet) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, color-mix(in srgb, var(--c-sage) 22%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: .8;
  animation: iridShift 22s ease-in-out infinite;
}
.subpage-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.subpage-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute);
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px);
  margin-bottom: 24px;
}
.subpage-title {
  font-family: var(--f-display);
  font-size: clamp(56px, 10vw, 160px);
  line-height: .92;
  letter-spacing: -.025em;
  font-weight: 400;
  margin: 0 0 24px;
}
.subpage-title em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .subpage-title em { color: var(--c-clay); }
.subpage-lede {
  max-width: 640px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--fg-mute);
  margin: 0;
}

/* ---------- CONTACT PAGE ---------- */
.contact-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 64px);
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form-card {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
}
[data-theme="dark"] .contact-form-card { background: var(--c-cream-2); }
.contact-form-card h3 {
  font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 18px; font-weight: 400; letter-spacing: -.01em;
}
.field {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-mute);
}
.field label .req { color: var(--c-clay); margin-left: 2px; }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: var(--bg);
  color: var(--fg);
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.45; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--c-violet-deep);
  background: color-mix(in srgb, var(--bg) 90%, var(--c-violet) 10%);
}
.field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
.contact-submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--c-ink); color: var(--c-cream);
  border: 0; font-size: 15px; font-weight: 500;
  margin-top: 8px;
  transition: background .25s, transform .25s;
}
.contact-submit:hover { background: var(--c-violet-deep); transform: translateY(-1px); }
.contact-submit svg { width: 16px; height: 16px; }
.contact-success { display: none; margin-top: 14px; font-family: var(--f-mono); font-size: 13px; color: var(--c-sage-deep); }
.contact-success.shown { display: block; }

.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-card {
  padding: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
}
[data-theme="dark"] .contact-card { background: var(--c-cream-2); }
.contact-card h4 {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mute); margin: 0 0 10px;
}
.contact-card p, .contact-card a {
  display: block;
  font-family: var(--f-display); font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  margin: 0; line-height: 1.2;
  color: var(--fg);
}
.contact-card a:hover { color: var(--c-clay); }
.contact-card .sub {
  font-family: var(--f-body); font-size: 14px;
  font-style: normal;
  color: var(--fg-mute);
  margin-top: 6px;
}

.contact-socials {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.contact-socials a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg); font-style: normal;
}
.contact-socials a:hover { border-color: var(--c-clay); color: var(--c-clay); }

.contact-map {
  margin-top: 16px;
  border-radius: calc(var(--radius-sm) - 6px);
  overflow: hidden;
  border: 1px solid var(--c-line);
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--bg) 60%, white 40%);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.25) contrast(0.96);
}
.contact-map-link {
  display: inline-block !important;
  margin-top: 12px !important;
  font-family: var(--f-mono) !important;
  font-style: normal !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-clay) !important;
}
.contact-map-link:hover { opacity: .7; }

/* ---------- BLOG PAGE ---------- */
.blog-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.post {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--bg);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.post-cover {
  aspect-ratio: 16/10;
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, color-mix(in srgb, var(--c-ink) 5%, transparent) 16px 17px),
    linear-gradient(160deg, color-mix(in srgb, var(--cover, var(--c-violet)) 30%, var(--bg)), color-mix(in srgb, var(--cover, var(--c-violet)) 12%, var(--bg)));
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: flex-end; padding: 18px;
}
.post-cover .post-tag {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-ink);
  padding: 5px 10px; border-radius: 999px;
}
.post-body {
  padding: 22px 22px 26px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.post-meta {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-faint);
  display: flex; gap: 10px;
}
.post-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400; line-height: 1.15; letter-spacing: -.01em;
  margin: 0; color: var(--fg);
}
.post-excerpt {
  font-size: 14px; line-height: 1.5;
  color: var(--fg-mute); margin: 0;
}
.post-link {
  margin-top: auto;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-violet-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
[data-theme="dark"] .post-link { color: var(--c-clay); }
.post-link:hover { color: var(--c-clay); }

.post-featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(16px, 2vw, 32px);
  background: var(--c-ink); color: var(--c-cream);
  border-color: transparent;
}
@media (max-width: 860px) { .post-featured { grid-template-columns: 1fr; } }
.post-featured .post-cover {
  aspect-ratio: auto;
  min-height: 320px;
  border-bottom: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--c-cream) 6%, transparent) 18px 19px),
    radial-gradient(70% 70% at 30% 30%, var(--c-violet-deep), var(--c-ink));
}
.post-featured .post-body { padding: 36px; gap: 14px; justify-content: center; }
.post-featured .post-title { font-size: clamp(28px, 3.5vw, 48px); color: var(--c-cream); }
.post-featured .post-excerpt { color: color-mix(in srgb, var(--c-cream) 70%, transparent); font-size: 16px; }
.post-featured .post-meta { color: color-mix(in srgb, var(--c-cream) 50%, transparent); }
.post-featured .post-link { color: var(--c-clay); }

/* Social feed strip */
.social-feed {
  max-width: var(--maxw); margin: clamp(48px, 8vh, 96px) auto 0;
  padding-top: clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--c-line);
}
.social-feed-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.social-feed-head h3 {
  font-family: var(--f-display); font-size: clamp(28px, 4vw, 48px);
  font-weight: 400; margin: 0; letter-spacing: -.01em;
}
.social-feed-head h3 em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .social-feed-head h3 em { color: var(--c-clay); }
.social-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
.social-post {
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  display: flex; flex-direction: column;
  gap: 10px;
  transition: transform .25s, border-color .25s;
}
[data-theme="dark"] .social-post { background: var(--c-cream-2); }
.social-post:hover { transform: translateY(-2px); border-color: var(--c-clay); }
.social-post-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-mute);
}
.social-post-head .icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.social-post-body {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
}
.social-post-time {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- LEARN PAGE ---------- */
.learn-toc {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 28px var(--pad-x);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-cream-2);
}
@media (max-width: 800px) { .learn-toc { grid-template-columns: repeat(2, 1fr); } }
.toc-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--c-line);
  transition: border-color .2s, transform .25s;
}
.toc-link:hover { border-color: var(--c-clay); transform: translateY(-2px); }
.toc-link .mono { font-size: 10.5px; letter-spacing: .08em; color: var(--c-clay); }
.toc-link .lbl { font-family: var(--f-display); font-size: 18px; font-style: italic; color: var(--fg); }

.learn-section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(60px, 9vh, 120px) 0;
  border-bottom: 1px solid var(--c-line-2);
  display: grid; grid-template-columns: 320px 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.learn-section:last-child { border-bottom: 0; }
@media (max-width: 880px) { .learn-section { grid-template-columns: 1fr; } }
.learn-section-side {
  position: sticky; top: 110px; align-self: start;
}
@media (max-width: 880px) { .learn-section-side { position: static; } }
.learn-section-side .num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-clay);
  margin-bottom: 8px;
}
.learn-section-side h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1; letter-spacing: -.02em;
  margin: 0;
}
.learn-section-side h2 em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .learn-section-side h2 em { color: var(--c-clay); }

.learn-section-body p {
  font-size: 17px; line-height: 1.65;
  color: var(--fg);
  margin: 0 0 18px;
  max-width: 60ch;
}
.learn-section-body p:last-child { margin-bottom: 0; }
.learn-subhead {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--fg);
  margin: 40px 0 16px;
}
.learn-subhead + p { margin-top: 0; }
.learn-section-body p em { font-family: var(--f-display); font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .learn-section-body p em { color: var(--c-clay); }
.learn-callout {
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 2px solid var(--c-clay);
  background: color-mix(in srgb, var(--c-clay) 6%, var(--bg));
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--fg);
  line-height: 1.4;
}
.learn-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
@media (max-width: 600px) { .learn-stats { grid-template-columns: 1fr; } }
.learn-stat {
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 80%, white 20%);
}
[data-theme="dark"] .learn-stat { background: var(--c-cream-2); }
.learn-stat .num {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1; color: var(--c-violet-deep);
  letter-spacing: -.02em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .learn-stat .num { color: var(--c-clay); }
.learn-stat .lbl {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.4;
}

/* downloadable resources list */
.resources {
  list-style: none; padding: 0; margin: 12px 0 0;
}
.resource {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: var(--bg);
  margin-bottom: 8px;
  transition: border-color .2s, transform .25s;
}
.resource:hover { border-color: var(--c-clay); transform: translateX(4px); }
.resource-meta { display: flex; flex-direction: column; gap: 2px; }
.resource-title { font-family: var(--f-display); font-size: 20px; font-style: italic; color: var(--fg); }
.resource-info { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); }
.resource-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg);
  font-family: var(--f-mono); font-size: 12px;
  flex-shrink: 0;
}

/* mobile-friendly fixed CTA on subpages already covered by nav-cta */

/* ---------- BLOG FILTER CHIPS ---------- */
.filter-chip {
  appearance: none;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border: 1px solid var(--c-line);
  color: var(--fg);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  backdrop-filter: blur(8px);
}
.filter-chip:hover { border-color: var(--c-clay); color: var(--c-clay); }
.filter-chip.active {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}

/* ============================================================
   PHOTOGRAPHY TREATMENTS
============================================================ */

/* Hero photo backdrop — subtle, behind the iridescent gradient */
.hero-photo {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) contrast(.95) brightness(.95);
  mix-blend-mode: multiply;
  opacity: .35;
}
[data-theme="dark"] .hero-photo img {
  mix-blend-mode: screen; opacity: .25;
  filter: saturate(.5) contrast(1.1) brightness(.6);
}
[data-motion="subtle"] .hero-photo img { opacity: .25; }

/* Photos inside problem cards */
.prob-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.55) contrast(.92);
  mix-blend-mode: multiply;
  opacity: .9;
}
[data-theme="dark"] .prob-img { mix-blend-mode: screen; opacity: .65; }
.prob-visual { isolation: isolate; }
.prob-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-cream) 30%, transparent) 0%,
    color-mix(in srgb, var(--c-cream) 0%, transparent) 50%);
  pointer-events: none;
}
.prob-visual-plastic .brick { position: relative; z-index: 2; }
.prob-visual-hyacinth svg { position: relative; z-index: 2; }

/* Story section photo */
.story-photo {
  margin: 28px 0 0;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-sage) 20%, var(--bg)), color-mix(in srgb, var(--c-violet) 15%, var(--bg)));
}
.story-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.7) contrast(.92);
}
.story-photo figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--fg-mute);
  backdrop-filter: blur(8px);
}

/* Product photos */
.product-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.55) contrast(.95);
  mix-blend-mode: multiply;
  z-index: 1;
}
[data-theme="dark"] .product-photo { mix-blend-mode: screen; opacity: .6; }
.product .product-art { isolation: isolate; }
.product .product-art .art { position: relative; z-index: 2; }
.product:hover .product-photo { transform: scale(1.04); transition: transform .6s cubic-bezier(.22,1,.36,1); }

/* ============================================================
   TEAM (replaces former Founder section)
============================================================ */
.team { background: var(--bg); }
.team-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  display: grid; grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
[data-theme="dark"] .team-inner { background: var(--c-cream-2); }
@media (max-width: 880px) { .team-inner { grid-template-columns: 1fr; padding: 24px 22px; } }
.team-h {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 1; letter-spacing: -.02em;
  margin: 16px 0 0;
}
.team-h em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .team-h em { color: var(--c-clay); }
.team-body p {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 22px;
  max-width: 60ch;
}
.team-body p em { font-style: italic; }
.team-pillars {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) { .team-pillars { grid-template-columns: 1fr; } }
.team-pillars li {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.team-pillars .mono {
  font-size: 10.5px; letter-spacing: .08em; color: var(--c-clay);
}
.team-pillars strong {
  font-family: var(--f-display); font-style: italic;
  font-size: 19px; font-weight: 400;
  color: var(--fg);
}
.team-foot {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0;
}
.team-foot a {
  color: var(--c-violet-deep);
  border-bottom: 1px solid currentColor;
}
[data-theme="dark"] .team-foot a { color: var(--c-clay); }

/* ============================================================
   BLOG POST PAGE LAYOUT
============================================================ */
.post-hero {
  position: relative;
  padding: clamp(120px, 16vh, 160px) var(--pad-x) 0;
  background: var(--bg);
}
.post-hero-inner { max-width: 920px; margin: 0 auto; }
.post-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  padding: 6px 14px;
  border: 1px solid var(--c-line); border-radius: 999px;
  margin-bottom: 24px;
}
.post-back:hover { color: var(--c-clay); border-color: var(--c-clay); }
.post-tag-inline {
  display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-clay);
  margin-bottom: 18px;
}
.post-tag-inline::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-clay);
}
.post-headline {
  font-family: var(--f-display);
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1; letter-spacing: -.022em;
  font-weight: 400;
  margin: 0 0 24px;
}
.post-headline em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .post-headline em { color: var(--c-clay); }
.post-byline {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-line);
}
.post-cover-img {
  margin: clamp(32px, 5vh, 56px) calc(-1 * var(--pad-x)) 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.post-cover-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.post-cover-img figcaption {
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-cream);
  background: rgba(26,22,18,.6);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(8px);
}

.post-body-wrap {
  padding: clamp(48px, 8vh, 96px) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr min(720px, 100%) 1fr;
}
.post-body-wrap > * { grid-column: 2; }
.post-body-wrap .full {
  grid-column: 1 / -1;
  margin: clamp(28px, 4vh, 48px) 0;
}
.post-body-wrap p {
  font-size: 18px; line-height: 1.65;
  color: var(--fg);
  margin: 0 0 22px;
}
.post-body-wrap p.lede {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  font-style: italic;
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 32px;
}
/* social posts (clickable) */
a.social-post { text-decoration: none; color: inherit; cursor: pointer; }
a.social-post:hover { transform: translateY(-2px); border-color: var(--c-clay); }
.social-post .social-go {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--c-clay);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s, transform .25s;
}
.social-post:hover .social-go { opacity: 1; transform: translateX(0); }

.post-body-wrap h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.1; letter-spacing: -.01em;
  margin: 40px 0 18px;
}
.post-body-wrap h2 em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .post-body-wrap h2 em { color: var(--c-clay); }
.post-body-wrap h3 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400; font-style: italic;
  margin: 32px 0 14px;
}
.post-body-wrap blockquote {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 2px solid var(--c-clay);
  background: color-mix(in srgb, var(--c-clay) 6%, var(--bg));
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--fg);
}
.post-body-wrap blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono); font-style: normal;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-mute);
}
.post-body-wrap ul {
  padding-left: 22px; margin: 0 0 22px;
}
.post-body-wrap ul li {
  font-size: 17px; line-height: 1.65; color: var(--fg);
  margin-bottom: 10px;
}
.post-body-wrap .post-figure {
  margin: clamp(32px, 5vh, 56px) 0;
}
.post-figure img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius-sm);
}
.post-figure figcaption {
  margin-top: 12px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
}
.post-share {
  display: flex; gap: 8px; align-items: center;
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-mute);
  flex-wrap: wrap;
}
.post-share a {
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--fg);
}
.post-share a:hover { border-color: var(--c-clay); color: var(--c-clay); }

.related-posts {
  background: var(--c-cream-2);
  border-top: 1px solid var(--c-line);
  padding: clamp(60px, 9vh, 120px) var(--pad-x);
}
.related-head {
  max-width: var(--maxw); margin: 0 auto 36px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  flex-wrap: wrap;
}
.related-head h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400; letter-spacing: -.01em;
  margin: 0;
}
.related-head h2 em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .related-head h2 em { color: var(--c-clay); }
.related-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .related-grid { grid-template-columns: 1fr; } }


/* ============================================================
   ADDITIONS — Legal pages, About page, mobile polish, form
============================================================ */

/* Legal pages (privacy / terms) ---------------------------- */
.legal-body { padding-top: clamp(20px, 4vh, 40px); padding-bottom: clamp(80px, 12vh, 160px); }
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px; line-height: 1.65;
  color: var(--fg);
}
.legal-inner h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 44px 0 14px;
  line-height: 1.1;
}
.legal-inner h2:first-of-type { margin-top: 8px; }
.legal-inner p { margin: 0 0 18px; color: var(--fg); }
.legal-inner ul { margin: 0 0 22px; padding-left: 22px; }
.legal-inner li { margin-bottom: 8px; }
.legal-inner a {
  color: var(--c-violet-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--c-violet-deep) 30%, transparent);
}
[data-theme="dark"] .legal-inner a { color: var(--c-clay); border-bottom-color: color-mix(in srgb, var(--c-clay) 40%, transparent); }
.legal-inner a:hover { border-bottom-color: currentColor; }
.legal-inner code {
  font-family: var(--f-mono);
  font-size: .92em;
  background: color-mix(in srgb, var(--c-clay) 10%, transparent);
  padding: 2px 6px; border-radius: 4px;
}
.legal-foot {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--c-line);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
}
.legal-foot a { color: var(--fg); border-bottom: 1px solid var(--c-line); }
.legal-foot a:hover { border-bottom-color: var(--c-clay); color: var(--c-clay); }

/* About page mission + values ------------------------------ */
.about-mission { padding-top: clamp(60px, 8vh, 100px); padding-bottom: clamp(60px, 8vh, 100px); }
.about-mission-inner { max-width: 980px; margin: 0 auto; }
.about-mission-text {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.3;
  letter-spacing: -.005em;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}
.about-mission-text em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .about-mission-text em { color: var(--c-clay); }

.about-how-list {
  list-style: none; padding: 0; margin: 0;
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 780px) { .about-how-list { grid-template-columns: 1fr; } }
.about-how-list li {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  transition: transform .25s, border-color .25s;
}
[data-theme="dark"] .about-how-list li { background: var(--c-cream-2); }
.about-how-list li:hover { transform: translateY(-3px); border-color: var(--c-clay); }
.about-how-list h3 {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400; letter-spacing: -.01em;
  margin: 6px 0 10px;
}
.about-how-list p { margin: 0; color: var(--fg-mute); font-size: 15.5px; line-height: 1.55; }
.about-how-list em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .about-how-list em { color: var(--c-clay); }
.about-how-list .step-num {
  font-size: 12px; letter-spacing: .08em; color: var(--c-clay);
}

.values-grid {
  list-style: none; padding: 0; margin: 0;
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }
.values-grid li {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  display: flex; flex-direction: column; gap: 10px;
}
[data-theme="dark"] .values-grid li { background: var(--c-cream-2); }
.values-grid .mono { font-size: 11px; letter-spacing: .08em; color: var(--c-clay); }
.values-grid h4 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400; letter-spacing: -.01em;
  margin: 0;
}
.values-grid p { margin: 0; color: var(--fg-mute); font-size: 15px; line-height: 1.55; }

.story-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-sm);
}
.story-photo figcaption {
  margin-top: 10px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-mute);
}

/* Contact form error state --------------------------------- */
.contact-error {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-clay) 14%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--c-clay) 40%, transparent);
  color: var(--fg);
  font-size: 14px; line-height: 1.5;
}
.contact-error.shown { display: block; }
.contact-error a { color: var(--c-violet-deep); border-bottom: 1px solid currentColor; }
[data-theme="dark"] .contact-error a { color: var(--c-clay); }
.contact-submit:disabled { opacity: .55; cursor: progress; }

/* Honeypot — hide from humans completely ------------------- */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Mobile: a more prominent Contact in the burger menu ------ */
@media (max-width: 880px) {
  .nav-links a[href="contact.html"],
  .nav-links a[href$="contact.html"] {
    background: var(--c-ink); color: var(--c-cream);
    border-radius: 999px;
    text-align: center;
    margin-top: 8px;
    padding: 14px 18px !important;
    border-bottom: 0 !important;
  }
  [data-theme="dark"] .nav-links a[href="contact.html"],
  [data-theme="dark"] .nav-links a[href$="contact.html"] {
    background: var(--c-clay); color: var(--c-cream);
  }
}

/* Mobile: tame the marquee speed + give body a small bump -- */
@media (max-width: 580px) {
  .marquee-track { animation-duration: 60s; }
  .logos-track   { animation-duration: 70s; }
  .hero { padding-top: clamp(100px, 15vh, 140px); }
  .hero-eyebrow { font-size: 11px; }
  .hero-lede { font-size: 17px; color: color-mix(in srgb, var(--fg) 92%, transparent); }
  .step { min-height: auto; padding: 28px 0; }
  .process-visual { position: relative; top: 0; }
  .pv-frame { max-width: 320px; }
}

/* Footer: a 4th column safely; on small, stack neatly ------ */
@media (min-width: 880px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* Larger select / input touch targets on mobile ------------ */
@media (max-width: 580px) {
  .field input, .field textarea, .field select { font-size: 16px; padding: 14px 14px; }
  .contact-submit { width: 100%; justify-content: center; }
}


/* ============================================================
   PROTECT + MOTION
============================================================ */

/* --- protected-img display ---------------------------------*/
protected-img {
  display: block;
  position: relative;
  background: color-mix(in srgb, var(--c-ink) 6%, var(--bg));
  border-radius: inherit;
  overflow: hidden;
}
protected-img .__pi-bg {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Image gets a tiny resting depth */
  transition: transform .8s cubic-bezier(.22,1,.36,1), filter .8s;
  filter: saturate(1.02);
}
protected-img:hover .__pi-bg { transform: scale(1.04); }
protected-img .__pi-cover {
  position: absolute; inset: 0; z-index: 2;
  /* Subtle vignette baked-in so screenshots feel less "raw" */
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0.10), transparent 60%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.06));
}
/* Loading shimmer until the background actually loads */
protected-img::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: __piShimmer 1.6s linear infinite;
  pointer-events: none;
  opacity: .4;
}
@keyframes __piShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- Motion-engine helpers ---------------------------------*/
.__motion-blob {
  position: fixed; left: 0; top: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-violet) 22%, transparent), transparent 60%);
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: multiply;
  transition: opacity .5s;
}
[data-theme="dark"] .__motion-blob { mix-blend-mode: screen; opacity: .4; }
[data-hue="hue1"] .__motion-blob { background: radial-gradient(circle, color-mix(in srgb, var(--c-violet) 28%, transparent), transparent 60%); }
[data-hue="hue2"] .__motion-blob { background: radial-gradient(circle, color-mix(in srgb, var(--c-sage) 30%, transparent), transparent 60%); }
[data-hue="hue3"] .__motion-blob { background: radial-gradient(circle, color-mix(in srgb, var(--c-clay) 26%, transparent), transparent 60%); }
[data-hue="hue4"] .__motion-blob { background: radial-gradient(circle, color-mix(in srgb, var(--c-water) 36%, transparent), transparent 60%); }

.__motion-dot {
  position: fixed; left: 0; top: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-clay);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width .25s cubic-bezier(.22,1,.36,1), height .25s cubic-bezier(.22,1,.36,1), background .2s;
}
.__motion-dot.big { width: 44px; height: 44px; background: var(--c-water); }
@media (hover: none) { .__motion-dot, .__motion-blob { display: none; } }

/* Make every cardish element ready for 3D tilt */
.product, .award, .values-grid li, .about-how-list li, .impact-stat, .prob-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Lift cards' inner contents on hover for a "popping" feel */
.product .product-meta,
.values-grid li > *,
.about-how-list li > * {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.product:hover .product-meta,
.values-grid li:hover > *,
.about-how-list li:hover > * {
  transform: translateZ(20px);
}

/* Hero photo gets a "looking down a window" depth */
.hero-photo { perspective: 1200px; }
.hero-photo protected-img,
.hero-photo .__pi-bg {
  transform-style: preserve-3d;
}

/* Replace logo svg with the real logo image — handled inline */
.nav-brand .real-logo,
.footer-brand .real-logo,
.veil-mark .real-logo {
  width: 28px; height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: inline-block;
  flex-shrink: 0;
}
.footer-brand .real-logo { width: 32px; height: 32px; }
.nav-brand .nav-glyph { display: none; }
.footer-brand svg { display: none; }

/* Subtle blur-in for protected hero photo */
.hero-photo protected-img {
  position: absolute; inset: 0; border-radius: 0;
  background: var(--c-cream);
}
.hero-photo protected-img .__pi-bg {
  filter: saturate(1.05) contrast(1.02);
}
[data-theme="dark"] .hero-photo protected-img .__pi-bg {
  filter: saturate(.55) contrast(1.15) brightness(.55);
}

/* Hero photo overlay tints for better text legibility */
.hero-photo protected-img .__pi-cover {
  background:
    radial-gradient(60% 70% at 20% 30%, color-mix(in srgb, var(--bg) 60%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 55%, transparent));
}

/* Product-photo: large protected-img on product cards */
.product .product-art protected-img {
  position: absolute; inset: 0; border-radius: 0;
}
.product .product-art protected-img .__pi-bg { filter: saturate(1.03); }
.product:hover .product-art protected-img .__pi-bg { transform: scale(1.08); }
.product .product-art img { display: none; } /* hide the old <img> if present */

/* Problem-card protected images */
.prob-visual protected-img {
  position: absolute; inset: 0; border-radius: var(--radius-sm);
}
.prob-visual protected-img .__pi-bg { filter: contrast(1.04); }

/* Story figure: image gets a slight 3D lift */
.story-photo protected-img {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-sm);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.story-photo protected-img:hover { transform: translateY(-6px) scale(1.01); }

/* Impact press card */
.impact-press {
  margin: clamp(36px, 6vh, 64px) auto 0;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
}
[data-theme="dark"] .impact-press { background: var(--c-cream-2); }
@media (max-width: 760px) { .impact-press { grid-template-columns: 1fr; } }
.impact-press protected-img {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
}
.impact-press h3 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400; letter-spacing: -.01em; line-height: 1.1;
  margin: 0 0 14px;
}
.impact-press h3 em { font-style: italic; color: var(--c-violet-deep); }
[data-theme="dark"] .impact-press h3 em { color: var(--c-clay); }
.impact-press p { color: var(--fg-mute); margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.impact-press .credit { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }

/* Learn-page concept blocks for new images */
.learn-figure {
  margin: clamp(32px, 5vw, 60px) 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
}
[data-theme="dark"] .learn-figure { background: var(--c-cream-2); }
.learn-figure protected-img {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
}
.learn-figure[data-tall] protected-img { aspect-ratio: 4/3; }
.learn-figure figcaption {
  padding: 16px 22px 20px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.learn-figure figcaption strong { color: var(--fg); text-transform: none; letter-spacing: 0; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 18px; }
.learn-figure figcaption .src { color: var(--c-clay); }

/* Before / after comparison: two figures side by side */
.learn-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  margin: clamp(32px, 5vw, 60px) 0;
  min-width: 0;
}
.learn-compare .learn-figure { margin: 0; min-width: 0; }
@media (max-width: 600px) { .learn-compare { grid-template-columns: 1fr; } }

/* Portrait figure (e.g. tree-planting) — keep it from over-cropping */
.learn-figure[data-portrait] { max-width: 440px; }
.learn-figure[data-portrait] protected-img { aspect-ratio: 4/5; }

/* Flood concept: split-screen rising lake */
.flood-concept {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  margin: clamp(32px, 5vw, 60px) 0;
  border: 1px solid var(--c-line);
}
@media (max-width: 760px) { .flood-concept { grid-template-columns: 1fr; } }
.flood-concept-img protected-img {
  width: 100%; height: 100%;
  min-height: 360px;
  aspect-ratio: 4/3;
}
.flood-concept-text {
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-ink);
  color: var(--c-cream);
  display: flex; flex-direction: column; justify-content: center;
}
.flood-concept-text h3 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 400; letter-spacing: -.015em; line-height: 1.05;
  margin: 0 0 18px;
}
.flood-concept-text h3 em {
  font-style: italic;
  background: linear-gradient(110deg, var(--c-water) 10%, var(--c-clay) 60%, var(--c-violet) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.flood-concept-text p {
  font-size: 16px; line-height: 1.55;
  color: color-mix(in srgb, var(--c-cream) 75%, transparent);
  margin: 0 0 10px;
}
.flood-concept-text .num {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--c-clay);
  margin-bottom: 8px;
  line-height: 1;
}
.flood-concept-text .stat-lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c-cream) 50%, transparent); }

/* Hide the auto-injected motion dot on touch */
@media (hover: none) { .__motion-dot { display: none; } }

/* Avoid the motion blob "blocking" interaction by guaranteeing z-index */
.nav, main, footer { isolation: isolate; }


/* ============================================================
   FIXES — v2: positioning, hero legibility, problem cards,
   how-it-works mobile, process stage underlay images
============================================================ */

/* (1) Default display/position so external CSS can override.  */
protected-img {
  display: block;
  position: relative;
}

/* (2) Hero — much darker overlay so the H1/lede are readable */
.hero-photo { perspective: 1200px; position: absolute; inset: 0; z-index: -1; }
.hero-photo protected-img,
.hero-photo protected-img .__pi-bg { position: absolute; inset: 0; aspect-ratio: auto !important; height: auto !important; }
.hero-photo protected-img .__pi-bg {
  background-size: cover;
  background-position: 50% 40%;
  filter: saturate(1.04) contrast(1.02);
}
[data-theme="dark"] .hero-photo protected-img .__pi-bg {
  filter: saturate(.5) contrast(1.1) brightness(.5);
}

/* The legibility scrim — much stronger now */
.hero-photo protected-img .__pi-cover {
  background:
    /* darkening from top-left where the text sits */
    radial-gradient(80% 90% at 18% 40%, color-mix(in srgb, var(--bg) 85%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 35%, transparent 70%),
    /* base wash */
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, color-mix(in srgb, var(--bg) 28%, transparent) 60%, color-mix(in srgb, var(--bg) 60%, transparent) 100%);
}
[data-theme="dark"] .hero-photo protected-img .__pi-cover {
  background:
    radial-gradient(80% 90% at 18% 40%, color-mix(in srgb, var(--c-ink) 80%, transparent) 0%, color-mix(in srgb, var(--c-ink) 55%, transparent) 35%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 50%, transparent) 0%, color-mix(in srgb, var(--c-ink) 70%, transparent) 100%);
}

/* (3) Make sure the SVG-shapes layer + ripples no longer add noise on top */
.hero-shapes { opacity: .55; }
@media (max-width: 880px) { .hero-shapes { opacity: .25; } }

/* Ensure the hero h1 + lede stay above the photo */
.hero-content { position: relative; z-index: 2; }
.hero-marquee { position: relative; z-index: 2; }

/* (4) Problem cards — drop the brick/SVG decoration, just the photo with vignette */
.prob-visual {
  margin-top: 10px;
  height: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  display: block !important;
  background: var(--c-cream-2);
}
.prob-visual protected-img,
.prob-visual protected-img .__pi-bg { position: absolute; inset: 0; }
.prob-visual protected-img .__pi-bg { background-size: cover; background-position: center; }
.prob-visual protected-img .__pi-cover {
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-ink) 35%, transparent));
}
/* hide the legacy decorative bricks + svg now that we have real photos */
.prob-visual .brick,
.prob-visual > svg { display: none; }

/* small floating label inside each problem photo */
.prob-visual::before {
  content: attr(data-label);
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-cream);
  padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink) 65%, transparent);
  backdrop-filter: blur(6px);
}

/* (5) Process stage underlay images
   ─────────────────────────────────
   A photo per stage sits behind the SVG icon, cross-fades on
   step change. Each .pv-bg shares the same absolute frame. */
.pv-bgs {
  position: absolute; inset: 0; z-index: 0;
}
.pv-bg {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1), filter .7s;
  filter: saturate(.85) brightness(.92);
}
.pv-bg.active { opacity: 1; transform: scale(1); }
.pv-bg protected-img,
.pv-bg protected-img .__pi-bg { position: absolute; inset: 0; }
.pv-bg protected-img .__pi-cover {
  background:
    radial-gradient(60% 60% at 50% 50%, transparent 30%, color-mix(in srgb, var(--bg) 35%, transparent) 70%, color-mix(in srgb, var(--bg) 65%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent), color-mix(in srgb, var(--bg) 55%, transparent));
}
[data-theme="dark"] .pv-bg protected-img .__pi-cover {
  background:
    radial-gradient(60% 60% at 50% 50%, transparent 30%, color-mix(in srgb, var(--c-ink) 55%, transparent) 70%, color-mix(in srgb, var(--c-ink) 80%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 30%, transparent), color-mix(in srgb, var(--c-ink) 70%, transparent));
}
/* Make the SVG icons sit above the photos, with a soft white halo */
.pv-svg { position: absolute; inset: 0; z-index: 1; }
.pv-svg .pv-stage rect,
.pv-svg .pv-stage ellipse,
.pv-svg .pv-stage circle {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

/* (6) Product cards — make protected-img actually fill the art frame */
.product .product-art {
  /* Replace the diagonal stripe pattern with a clean accent wash */
  background: color-mix(in srgb, var(--accent, var(--c-violet)) 10%, var(--bg));
  display: block;
}
.product .product-art protected-img,
.product .product-art protected-img .__pi-bg { position: absolute; inset: 0; }

/* (7) How It Works on mobile — stack the visual + steps, fade all in */
@media (max-width: 880px) {
  .process-stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .process-visual {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 8px;
  }
  .pv-frame { max-width: 360px; aspect-ratio: 1; }
  .process-steps { gap: 28px; }
  .step {
    min-height: auto !important;
    padding: 28px 0 24px;
    opacity: 1 !important;
    border-top: 1px solid var(--c-line);
  }
  .step:first-child { border-top: 0; }
  .step-title { font-size: clamp(24px, 6vw, 32px); }
  .step-meta span { font-size: 10.5px; }
}

/* (8) Story photo + about page — guarantee size */
.story-photo protected-img,
.story-photo protected-img .__pi-bg { position: relative; }
.story-photo protected-img { aspect-ratio: 4/5; display: block; }
.story-photo protected-img .__pi-bg { position: absolute; inset: 0; }

/* (9) Impact press card — image fills its column */
.impact-press protected-img,
.impact-press protected-img .__pi-bg { position: absolute; inset: 0; }
.impact-press > protected-img { aspect-ratio: 3/4; position: relative; }
.impact-press > protected-img .__pi-bg { position: absolute; }

/* (10) Learn-page figures + flood concept fill correctly */
.learn-figure protected-img,
.learn-figure protected-img .__pi-bg { position: absolute; inset: 0; }
.learn-figure protected-img { position: relative; }
.flood-concept-img protected-img,
.flood-concept-img protected-img .__pi-bg { position: absolute; inset: 0; }
.flood-concept-img protected-img { position: relative; min-height: 360px; }

/* (11) Prevent grid-track blowout on the learn sections.
   The `1fr` body track defaults to min-width:auto, so a child with an
   intrinsic min-width (e.g. the flood-concept image's min-height + aspect
   ratio) forces the whole column far past the viewport. Pin min-width:0
   so the `1fr` tracks can actually shrink, then keep nested media in-bounds. */
.learn-section-body { min-width: 0; }
.learn-section-body > *,
.learn-stats,
.learn-stat,
.flood-concept,
.flood-concept-img,
.flood-concept-text { min-width: 0; }
.learn-section-body img,
.learn-section-body protected-img,
.learn-section-body pre { max-width: 100%; }
.learn-section-body pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }


/* ============================================================
   PARTNERS — categorized directory (replaces logo marquee)
============================================================ */
.partners {
  background: var(--bg);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.partners-carousel {
  margin-top: clamp(40px, 5vw, 64px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.partners-track {
  display: flex; gap: 20px;
  width: max-content;
  animation: marquee 48s linear infinite;
  padding: 6px 0;
}
.partners-carousel:hover .partners-track { animation-play-state: paused; }
.partner-card {
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  width: clamp(220px, 22vw, 280px);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--bg);
  transition: border-color .3s, transform .3s, background .3s;
}
.partner-card:hover {
  border-color: var(--c-clay);
  transform: translateY(-4px);
}
.partner-card-cat {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-clay);
}
.partner-card-name {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400; letter-spacing: -.01em; line-height: 1.15;
  color: var(--fg);
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }

/* ============================================================
   MOBILE MOTION  —  calmer ambient loops + immersive reveals
   ------------------------------------------------------------
   Phones were running every infinite loop at once (blurred
   iridescent blobs, drifting leaves, floating ellipses, the
   orbit) which thrashed the compositor and made scrolling
   stutter. Pare the expensive perpetual animations back on
   small screens — their painted gradients stay in place — and
   lean on scroll-driven reveals for an immersive-but-smooth feel.
============================================================ */
@media (max-width: 880px) {
  .hero-irid,
  .m-blob,
  .cta-blob,
  .subpage-hero::after,
  .leaf,
  .dot,
  .hya-float ellipse,
  .pv-orbit {
    animation: none !important;
  }
  /* keep any stray transform from spawning a horizontal scrollbar */
  html, body { overflow-x: clip; }
}

/* Scroll-reveal layer (added by motion.js on pages without the
   built-in .reveal engine). Hidden state is applied by JS, so
   content is fully visible if JS never runs. */
.m-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1),
              transform .85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.m-reveal.m-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   BACK-TO-TOP  —  mobile only (injected by motion.js)
============================================================ */
.__to-top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  display: none;            /* desktop: never shown */
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  border: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.__to-top svg { width: 20px; height: 20px; }
.__to-top:active { transform: scale(.94); }
@media (max-width: 880px) {
  .__to-top { display: inline-flex; }
  body:not(.__show-to-top) .__to-top {
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
  }
  body.__show-to-top .__to-top {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .__to-top { transition: opacity .2s ease; }
}


/* ============================================================
   WORDPRESS-ONLY ADDITIONS (not in the static styles.css)
   ============================================================ */

/* ───────── Built-in contact form (plugin-free fallback) ───────── */
.hyapak-contact-form { display: flex; flex-direction: column; gap: 18px; }
.hyapak-field { display: flex; flex-direction: column; gap: 7px; }
.hyapak-field label {
  font-family: var(--f-mono, monospace);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute, #6b6256);
}
.hyapak-contact-form input,
.hyapak-contact-form textarea {
  font: inherit; color: var(--c-ink, #1A1612);
  background: var(--c-cream-2, #fff);
  border: 1px solid var(--c-line, rgba(26,22,18,.16));
  border-radius: 10px;
  padding: 13px 15px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hyapak-contact-form textarea { resize: vertical; min-height: 120px; }
.hyapak-contact-form input:focus,
.hyapak-contact-form textarea:focus {
  outline: none;
  border-color: var(--c-sage-deep, #5E6B47);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sage-deep, #5E6B47) 18%, transparent);
}
.hyapak-contact-form .btn { align-self: flex-start; cursor: pointer; border: none; }
.hyapak-form-note {
  padding: 13px 16px; border-radius: 10px; margin: 0 0 18px;
  font-size: 14px;
}
.hyapak-form-ok  { background: color-mix(in srgb, var(--c-sage, #8E9C70) 22%, transparent); color: var(--c-sage-deep, #5E6B47); }
.hyapak-form-err { background: color-mix(in srgb, var(--c-clay, #B5663F) 16%, transparent); color: var(--c-clay, #B5663F); }
[data-theme="dark"] .hyapak-contact-form input,
[data-theme="dark"] .hyapak-contact-form textarea { background: rgba(255,255,255,.05); color: #F2ECDD; }


/* ============================================================
   PROGRESSIVE ENHANCEMENT / NO-JS SAFETY NET
   The site must look correct even when a caching / optimisation
   plugin (or Jetpack) blocks, defers or breaks the theme's
   JavaScript. The animated "hidden" states only apply once our
   script has booted (html.hyapak-js). With no JS — or if the main
   script fails to boot (html.hyapak-js-failed) — everything is
   shown in its final, readable state.
   ============================================================ */

/* NAV — solid & readable by default; transparent-over-hero only with JS */
.nav {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--c-line-2);
}
.hyapak-js .nav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* REVEAL / ANIMATED ELEMENTS — force-visible without JS or on boot failure */
html:not(.hyapak-js) .reveal,
.hyapak-js-failed .reveal,
html:not(.hyapak-js) .manifesto .ml-l,
.hyapak-js-failed .manifesto .ml-l,
html:not(.hyapak-js) .hero-title .line,
.hyapak-js-failed .hero-title .line,
html:not(.hyapak-js) .hero-lede,
.hyapak-js-failed .hero-lede,
html:not(.hyapak-js) .hero-cta,
.hyapak-js-failed .hero-cta,
html:not(.hyapak-js) .step,
.hyapak-js-failed .step {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* PROCESS visual — show the first stage when JS is unavailable */
html:not(.hyapak-js) .pv-stage[data-stage="0"],
.hyapak-js-failed .pv-stage[data-stage="0"] {
  opacity: 1 !important;
  transform: none !important;
}


/* ============================================================
   WP NAV MENU — make wp_nav_menu output match the design's flat bar
   ============================================================ */
.nav-links ul { list-style: none; margin: 0; padding: 0; }
.nav-links > ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav-links li { list-style: none; margin: 0; padding: 0; position: relative; }
.nav-links .menu-item > a { padding: 6px 2px; display: inline-block; }
/* active page */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a { color: var(--fg); }
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after { right: 0; }
/* dropdown sub-menus (kept subtle; the design is a flat bar) */
.nav-links .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  display: none; flex-direction: column; gap: 2px;
  min-width: 190px; padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--c-line-2); border-radius: 14px;
  box-shadow: var(--shadow-soft); z-index: 60;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu { display: flex; }
.nav-links .sub-menu a { white-space: nowrap; }

@media (max-width: 880px) {
  .nav-links > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-links .menu-item > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--c-line-2); }
  .nav-links .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0 14px; background: none; backdrop-filter: none; }
}