/* Split-screen balance theme: Dawn Shadow & Peak Light — single global stylesheet */

:root {
  --color-activity-base: #4e5b71;
  --color-rest-base: #dbcbb0;
  --color-pivot-accent: #b2ac88;
  --color-glass-veil: rgba(255, 255, 255, 0.08);
  --color-ink-strong: #1c2129;
  --color-ink-muted: #3d4450;
  --font-slab: "Zilla Slab", serif;
  --font-air: "Outfit", sans-serif;
  --space-xs: 0.35rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --radius-md: 0.5rem;
  --radius-lg: 1.25rem;
  --shadow-soft: 0 0.5rem 2rem rgba(28, 33, 41, 0.12);
  --shadow-glow: 0 0 1.5rem rgba(178, 172, 136, 0.35);
  --transition-fast: 0.3s ease;
  --transition-slow: 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  --header-z: 800;
  --meter-z: 950;
  --overlay-z: 900;
  --dock-z: 850;
  --max-readable: 72rem;
  --border-waver: 1px solid rgba(178, 172, 136, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: auto;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-air);
  font-weight: 300;
  color: var(--color-ink-strong);
  background: linear-gradient(
    105deg,
    var(--color-rest-base) 0%,
    #e8dfd2 42%,
    #c5ccd6 58%,
    var(--color-activity-base) 100%
  );
  background-attachment: fixed;
  line-height: 1.6;
  overflow-x: hidden;
}

@media (min-width: 64rem) {
  body {
    padding-bottom: 5.5rem;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-activity-base);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--color-ink-strong);
}

h1,
h2,
h3 {
  font-family: var(--font-slab);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-md);
}

p {
  margin: 0 0 var(--space-md);
}

ul {
  margin: 0;
  padding: 0;
}

/* Equilibrium meter */
.equilibrium-meter-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  z-index: var(--meter-z);
  background: rgba(28, 33, 41, 0.12);
  pointer-events: none;
}

.equilibrium-meter-fill {
  display: block;
  height: 100%;
  width: 50%;
  margin-left: 25%;
  background: linear-gradient(
    90deg,
    var(--color-rest-base),
    var(--color-pivot-accent),
    var(--color-activity-base)
  );
  box-shadow: var(--shadow-glow);
  transition: margin-left 0.45s ease, width 0.45s ease;
}

/* Parallax depth layers (silk panels) */
.parallax-root-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.parallax-silk-panel {
  position: absolute;
  inset: -8%;
  opacity: 0.18;
  mix-blend-mode: multiply;
  transition: transform 0.2s ease-out;
  border-radius: 40% 60% 55% 45% / 45% 55% 50% 50%;
}

.parallax-silk-panel.layer-one {
  background: radial-gradient(circle at 30% 30%, var(--color-pivot-accent), transparent 60%);
}

.parallax-silk-panel.layer-two {
  background: radial-gradient(circle at 70% 60%, var(--color-activity-base), transparent 55%);
}

.parallax-silk-panel.layer-three {
  background: radial-gradient(circle at 50% 80%, var(--color-rest-base), transparent 50%);
}

main {
  position: relative;
  z-index: 1;
}

/* Site header — non-sticky, creative split */
.site-header-primary {
  position: relative;
  z-index: var(--header-z);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  transform-origin: top center;
  transition: transform var(--transition-slow), opacity var(--transition-fast);
}

.site-header-primary.header-concealed-mode {
  transform: translateY(-120%);
  opacity: 0.65;
}

.header-inner-wrap {
  max-width: var(--max-readable);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-glass-veil);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-waver);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.site-title-link {
  font-family: var(--font-slab);
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 600;
  color: var(--color-ink-strong);
  text-decoration: none;
}

.site-title-link:hover {
  color: var(--color-activity-base);
}

/* Nav: desktop inline before burger; burger last */
.site-nav-primary {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

.nav-link-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm) var(--space-md);
}

.nav-anchor-item {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--color-ink-muted);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
}

.nav-anchor-item:hover,
.nav-anchor-item:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  color: var(--color-ink-strong);
  outline: none;
}

.nav-toggle-burger {
  order: 999;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-waver);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav-toggle-burger span {
  display: block;
  height: 2px;
  width: 1.25rem;
  margin: 0 auto;
  background: var(--color-ink-strong);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.nav-toggle-burger:hover {
  background: rgba(255, 255, 255, 0.45);
}

@media (max-width: 63.9375rem) {
  .nav-toggle-burger {
    display: flex;
  }

  .site-nav-primary {
    position: fixed;
    inset: 0;
    top: 4.5rem;
    background: rgba(28, 33, 41, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    align-items: flex-start;
    justify-content: center;
  }

  .site-nav-primary.nav-drawer-open {
    opacity: 1;
    visibility: visible;
  }

  .nav-link-list {
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
    background: rgba(255, 255, 255, 0.92);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }

  .nav-anchor-item {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 64rem) {
  .site-nav-primary {
    display: flex;
    position: static;
    opacity: 1;
    visibility: visible;
    background: none;
    padding: 0;
    flex: 1 1 auto;
  }
}

/* Pendulum dock — desktop/tablet only */
.pendulum-dock-shell {
  display: none;
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--dock-z);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.55);
  border: var(--border-waver);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-slow);
}

@media (min-width: 64rem) {
  .pendulum-dock-shell {
    display: block;
  }

  .pendulum-dock-shell:hover {
    transform: translateX(-50%) rotate(-1.2deg);
  }

  .pendulum-dock-shell .dock-nav-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .pendulum-dock-shell .dock-nav-link {
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-ink-muted);
  }

  .pendulum-dock-shell .dock-nav-link:hover {
    color: var(--color-ink-strong);
  }
}

/* Full-width banners — image beneath text */
.banner-hero-fullwidth {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(22rem, 58vh, 38rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: var(--border-waver);
}

.banner-media-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banner-photo-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner-text-layer {
  position: relative;
  z-index: 1;
  max-width: var(--max-readable);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.glass-panel-hero {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 40rem;
  box-shadow: var(--shadow-soft);
}

.glass-panel-hero h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
}

.wave-divider-edge {
  display: block;
  height: 2.5rem;
  margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48'%3E%3Cpath fill='%23ffffff22' d='M0 24 Q360 0 720 24 T1440 24 V48H0Z'/%3E%3C/svg%3E")
    center top / 100% 100% no-repeat;
  pointer-events: none;
}

/* Content sections */
.content-section-block {
  padding: var(--space-xl) var(--space-md);
}

.content-inner-max {
  max-width: var(--max-readable);
  margin: 0 auto;
}

.split-bilateral-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 48rem) {
  .split-bilateral-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.split-panel-activity {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(78, 91, 113, 0.35);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-soft);
}

.split-panel-rest {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(219, 203, 176, 0.6);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow-soft);
}

.section-heading-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-sm);
}

.media-text-pair {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 48rem) {
  .media-text-pair.pair-media-right {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .media-text-pair.pair-media-left {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.figure-contained {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-waver);
  box-shadow: var(--shadow-soft);
}

.figure-contained img {
  width: 100%;
  height: clamp(12rem, 32vw, 20rem);
  object-fit: cover;
  object-position: center;
}

.cta-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.btn-pivot-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  font-family: var(--font-air);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-ink-strong);
  background: linear-gradient(
    120deg,
    var(--color-pivot-accent),
    var(--color-rest-base)
  );
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-pivot-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-outline-muted {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  color: var(--color-ink-strong);
  border: 1px solid var(--color-activity-base);
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.3);
}

/* Blueprint page — sine wave */
.blueprint-stage-shell {
  padding: var(--space-lg) 0;
}

.sine-board-wrap {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  aspect-ratio: 16 / 7;
  background: rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-lg);
  border: var(--border-waver);
  overflow: hidden;
}

.sine-svg-layer {
  width: 100%;
  height: 100%;
  display: block;
}

.sine-svg-layer rect {
  pointer-events: none;
}

.balance-score-readout {
  margin-top: var(--space-md);
  font-family: var(--font-slab);
  font-size: 1.35rem;
  text-align: center;
}

.balance-score-readout output {
  font-weight: 700;
  color: var(--color-activity-base);
}

/* Climate canvas page */
.climate-board-wrap {
  position: relative;
  min-height: 22rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-waver);
}

.climate-canvas-layer {
  display: block;
  width: 100%;
  height: 22rem;
  background: #e8dfd2;
}

.climate-form-grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  max-width: 28rem;
}

.field-label-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field-label-pair label {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

.field-label-pair select,
.field-label-pair textarea,
.field-label-pair input {
  font-family: var(--font-air);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid rgba(28, 33, 41, 0.18);
  background: rgba(255, 255, 255, 0.85);
}

/* Flip cards — thresholds */
.flip-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .flip-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .flip-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flip-card-unit {
  perspective: 1200px;
  min-height: 14rem;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  transition: transform 0.85s ease;
  transform-style: preserve-3d;
}

.flip-card-unit:focus-within .flip-card-inner,
.flip-card-unit:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-face-side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: var(--border-waver);
  box-shadow: var(--shadow-soft);
}

.flip-face-front {
  background: rgba(255, 255, 255, 0.55);
}

.flip-face-back {
  background: rgba(78, 91, 113, 0.88);
  color: #f4f1ea;
  transform: rotateY(180deg);
}

.flip-face-back p {
  color: #e8e4dc;
}

/* Products */
.product-card-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 48rem) {
  .product-card-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card-pill {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.48);
  border: var(--border-waver);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.product-card-pill figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-card-pill img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
}

.product-price-tag {
  font-family: var(--font-slab);
  font-size: 1.15rem;
  color: var(--color-activity-base);
}

/* Contact */
.contact-form-shell {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56rem) {
  .contact-form-shell {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.contact-field-grid {
  display: grid;
  gap: var(--space-md);
}

.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.9rem;
}

.map-embed-frame {
  width: 100%;
  min-height: 16rem;
  border: 0;
  border-radius: var(--radius-lg);
  filter: grayscale(20%);
}

/* Footer */
.site-footer-minimal {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--space-md);
  margin-top: var(--space-xl);
  border-top: var(--border-waver);
  background: rgba(28, 33, 41, 0.06);
}

.footer-inner-wrap {
  max-width: var(--max-readable);
  margin: 0 auto;
  display: grid;
  gap: var(--space-md);
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: 0;
}

.footer-nav-list a {
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.footer-meta-line {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

/* Privacy / cookie banner */
.consent-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 33, 41, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.consent-popup-overlay.consent-visible-state {
  opacity: 1;
  visibility: visible;
}

.consent-popup-card {
  max-width: 40rem;
  width: 100%;
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: var(--border-waver);
}

.consent-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Legal pages */
.legal-prose-wrap {
  max-width: 48rem;
  margin: 0 auto;
}

.legal-prose-wrap h2 {
  margin-top: var(--space-lg);
  font-size: 1.25rem;
}

.legal-updated-line {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-lg);
}

/* Thank you / 404 */
.notice-panel-centered {
  max-width: 38rem;
  margin: var(--space-xl) auto;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  border: var(--border-waver);
}

/* Hush mode: fade chrome */
body.ui-hush-pause .site-header-primary,
body.ui-hush-pause .pendulum-dock-shell,
body.ui-hush-pause .site-footer-minimal,
body.ui-hush-pause .btn-pivot-primary {
  opacity: 0.3;
  transition: opacity 2s ease;
}

.sine-wave-path {
  pointer-events: none;
}

.wave-node-handle {
  cursor: grab;
  touch-action: none;
  fill: var(--color-pivot-accent);
  stroke: var(--color-ink-strong);
  stroke-width: 1.5;
}

.wave-node-handle:active {
  cursor: grabbing;
}

/* Utility */
.visually-hidden-focusable:focus {
  outline: 2px solid var(--color-pivot-accent);
}

.skip-link-jump {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  padding: var(--space-sm);
  z-index: 2000;
}

.skip-link-jump:focus {
  left: var(--space-md);
}

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

  .flip-card-unit:hover .flip-card-inner {
    transform: none;
  }
}