/* Bio-mimetic minimal · moss & mineral · single global sheet */
:root {
  --color-primary: #243027;
  --color-secondary: #cbd2c1;
  --color-accent: #c68e49;
  --color-mist: #e8eae3;
  --color-glass: rgba(232, 234, 227, 0.55);
  --font-organic-serif: 'Cormorant Garamond', serif;
  --font-air-sans: 'Montserrat', sans-serif;
  --space-unit: 0.5rem;
  --space-sm: calc(var(--space-unit) * 1);
  --space-md: calc(var(--space-unit) * 2);
  --space-lg: calc(var(--space-unit) * 4);
  --space-xl: calc(var(--space-unit) * 6);
  --radius-soft: 0.65rem;
  --radius-blob: 38% 62% 63% 37% / 41% 44% 56% 59%;
  --shadow-soft: 0 0.4rem 1.8rem rgba(36, 48, 39, 0.12);
  --shadow-deep: 0 1rem 3rem rgba(36, 48, 39, 0.18);
  --transition-fast: 0.3s ease;
  --transition-page: 1.2s ease;
  --header-offset: clamp(5rem, 12vw, 8rem);
  --readable-line: clamp(32rem, 88%, 52rem);
  --fib-a: 1fr;
  --fib-b: 1.618fr;
}

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

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

body {
  margin: 0;
  font-family: var(--font-air-sans);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background-color: var(--color-mist);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

body.sheet-open-drawer::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(36, 48, 39, 0.35);
  z-index: 14;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: block;
  object-fit: cover;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: 0.125rem;
}

h1,
h2,
h3 {
  font-family: var(--font-organic-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}

p {
  line-height: 1.62;
}

.dappled-canopy-overlay {
  pointer-events: none;
  position: fixed;
  inset: -20%;
  z-index: 1;
  background: radial-gradient(ellipse at 28% 20%, rgba(198, 142, 73, 0.14), transparent 45%),
    radial-gradient(ellipse at 74% 64%, rgba(203, 210, 193, 0.35), transparent 50%);
  opacity: 0.55;
  animation: foliageDriftShift 52s linear infinite alternate;
}

@keyframes foliageDriftShift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(4%, -3%) scale(1.08);
  }
}

@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;
  }

  .dappled-canopy-overlay {
    animation: none;
  }

}

.layout-flow-root > * {
  position: relative;
  z-index: 2;
}

.layout-flow-root {
  position: relative;
}

.viewport-banner-shell {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  min-height: clamp(18rem, 42vw, 28rem);
  overflow: hidden;
  border-radius: 0;
}

.viewport-banner-photo-layer {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
}

.viewport-banner-cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewport-banner-softmask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 48, 39, 0.74) 12%, rgba(36, 48, 39, 0.22) 55%, rgba(36, 48, 39, 0.45));
}

.viewport-banner-writing {
  position: relative;
  z-index: 2;
  max-width: var(--readable-line);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}

.viewport-banner-writing h1,
.viewport-banner-writing p {
  color: var(--color-mist);
}

.viewport-banner-writing p.lead-accent-line {
  font-size: clamp(1rem, 2.9vw, 1.125rem);
  max-width: 38rem;
}

.page-transition-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(232, 234, 227, 0.85);
  backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-page);
}

.page-transition-veil.is-active-glaze {
  opacity: 1;
  pointer-events: all;
}

.ivy-progress-vine-root {
  position: fixed;
  left: var(--space-sm);
  top: 35%;
  bottom: 10%;
  width: 0.35rem;
  z-index: 12;
  background: transparent;
}

.ivy-progress-vine-fill {
  width: 100%;
  height: 0%;
  border-radius: var(--radius-soft);
  background: linear-gradient(180deg, var(--color-accent), var(--color-secondary));
  box-shadow: 0 0 0 0.12rem rgba(36, 48, 39, 0.08);
  transition: height 0.08s linear;
}

.top-mast-shell {
  position: relative;
  z-index: 15;
}

.top-mast-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  background: rgba(232, 234, 227, 0.42);
  backdrop-filter: blur(16px);
  border-radius: 0 0 var(--radius-soft) var(--radius-soft);
}

.brand-text-anchor {
  font-family: var(--font-organic-serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.desk-route-bar {
  display: none;
  flex-grow: 1;
  justify-content: center;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .desk-route-bar {
    display: flex;
  }
}

.route-minimal-link {
  font-size: clamp(0.75rem, 1.65vw, 0.8125rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-sm) var(--space-sm);
}

.route-minimal-link:hover {
  color: var(--color-accent);
}

.orbit-route-toggle-tail {
  margin-left: auto;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .orbit-route-toggle-tail {
    display: none;
  }
}

.hamburger-plane-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--radius-blob);
  border: none;
  background: rgba(36, 48, 39, 0.88);
  color: var(--color-mist);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-soft);
}

.hamburger-plane-button:active {
  transform: scale(0.96);
}

.hamburger-plane-button .bar-shape {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.hamburger-plane-button .bar-shape span {
  display: block;
  width: 1.125rem;
  height: 0.12rem;
  background: var(--color-mist);
}

.route-overlay-panel-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 16;
}

.route-overlay-panel-shell.is-open-sheet {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.overlay-panel-sheet-core {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  width: min(22rem, 88vw);
  background: var(--color-glass);
  backdrop-filter: blur(26px);
  border-radius: var(--radius-soft);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-deep);
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.overlay-sheet-close-row {
  display: flex;
  justify-content: flex-end;
}

.overlay-close-icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.overlay-vertical-stack-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.main-page-column {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}

.section-block-leaf-margin {
  display: grid;
  gap: var(--space-lg);
}

.section-heading-prong {
  display: grid;
  gap: var(--space-sm);
}

.section-heading-prong .eyebrow-slab {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(36, 48, 39, 0.65);
}

.vein-fibonacci-asymmetric-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .vein-fibonacci-asymmetric-grid {
    grid-template-columns: var(--fib-a) var(--fib-b);
  }
}

.soft-glass-information-card {
  background: rgba(255, 255, 255, 0.36);
  border-radius: var(--radius-soft);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  display: grid;
  gap: var(--space-sm);
}

.figure-with-caption-tail {
  display: grid;
  gap: var(--space-sm);
}

.figure-with-caption-tail figcaption {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.78;
}

.photo-frame-balanced {
  overflow: hidden;
  border-radius: var(--radius-soft);
  aspect-ratio: 16 / 10;
  background: var(--color-secondary);
}

.two-column-reverse-flex {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 54rem) {
  .two-column-reverse-flex.reverse-wide-order-row {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-lg);
  }

  .two-column-reverse-flex.reverse-wide-order-row > * {
    flex: 1;
  }

  .two-column-reverse-flex.reverse-wide-order-row.reverse-order-swap-desktop .photo-frame-balanced {
    order: 2;
  }
}

.pulse-action-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-blob);
  border: none;
  background: rgba(198, 142, 73, 0.88);
  color: var(--color-primary);
  font-family: var(--font-air-sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.pulse-action-button.secondary-quiet-surface {
  background: transparent;
  color: var(--color-primary);
  border: 0.0875rem solid rgba(36, 48, 39, 0.22);
}

.basalt-footer-minimal-shell {
  background: rgba(36, 48, 39, 0.92);
  color: var(--color-mist);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
}

.basalt-footer-minimal-shell a {
  color: var(--color-mist);
  text-decoration: none;
}

.basalt-footer-minimal-shell a:hover {
  color: var(--color-accent);
}

.footer-grid-balanced {
  display: grid;
  gap: var(--space-md);
}

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

.footer-menu-inline-row-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.footer-menu-inline-row-wrap .tiny-foot-note {
  width: 100%;
  opacity: 0.65;
  font-size: 0.6875rem;
}

.consent-banner-slab {
  position: fixed;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 30;
  max-width: 36rem;
  margin: 0 auto;
  background: rgba(36, 48, 39, 0.94);
  color: var(--color-mist);
  padding: var(--space-md);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-deep);
  display: grid;
  gap: var(--space-sm);
}

.consent-banner-slab.hidden-opt-in-slot {
  display: none !important;
}

.consent-choice-row-duo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.consent-choice-row-duo button {
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-soft);
  cursor: pointer;
  font-family: inherit;
}

.consent-affirm-strong {
  background: var(--color-accent);
  color: var(--color-primary);
}

.consent-decline-soft {
  background: transparent;
  border: 0.0875rem solid rgba(232, 234, 227, 0.45);
  color: var(--color-mist);
}

.contact-shell-grid-balanced {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56rem) {
  .contact-shell-grid-balanced.contact-two-up-wide {
    grid-template-columns: 1.1fr 0.95fr;
  }
}

.contact-form-card-glass-grid {
  display: grid;
  gap: var(--space-md);
}

.field-label-soft-row {
  display: grid;
  gap: var(--space-sm);
}

.field-label-soft-row label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.field-label-soft-row input,
.field-label-soft-row textarea {
  padding: var(--space-sm);
  border-radius: var(--radius-soft);
  border: 0.0875rem solid rgba(36, 48, 39, 0.18);
  font-family: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.55);
}

.consent-checkbox-wrapped-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.consent-checkbox-wrapped-line input {
  margin-top: 0.25rem;
}

.map-embed-soft-frame iframe {
  width: 100%;
  border: none;
  min-height: 18rem;
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
}

.products-grid-three-spread {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .products-grid-three-spread {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-tile-balanced-glass-card {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
}

.product-image-aspect-balanced {
  border-radius: var(--radius-soft);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--color-secondary);
}

.price-tone-highlight {
  font-family: var(--font-organic-serif);
  font-size: 1.45rem;
  color: var(--color-accent);
}

.library-gallery-split-main {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 60rem) {
  .library-gallery-split-main.library-wide-two-track {
    grid-template-columns: 0.92fr 1.4fr;
  }
}

.library-row-specimen-tap {
  display: grid;
  gap: 0.25rem;
  text-align: left;
  width: 100%;
  padding: var(--space-sm);
  border: 0.0875rem solid rgba(36, 48, 39, 0.12);
  border-radius: var(--radius-soft);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-primary);
}

.library-row-specimen-tap .micro-habitat-chip-line {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
}

.library-row-specimen-tap.is-specimen-row-lit {
  border-color: rgba(198, 142, 73, 0.88);
  background: rgba(255, 255, 255, 0.7);
}

.library-name-column-scroll {
  display: grid;
  gap: var(--space-sm);
  max-height: 22rem;
  overflow-y: auto;
}

.library-chip-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-chip-tiny-soft {
  border: 0.0875rem solid rgba(36, 48, 39, 0.16);
  background: transparent;
  padding: var(--space-sm) var(--space-md);
  border-radius: 999rem;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}

.filter-chip-tiny-soft.is-chip-active-tone {
  background: rgba(36, 48, 39, 0.92);
  color: var(--color-mist);
}

.library-preview-stage-balanced {
  position: relative;
  border-radius: var(--radius-soft);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-secondary);
  display: grid;
  place-items: center;
}

.library-spin-slow-plane {
  max-width: 88%;
  max-height: 88%;
  transform-style: preserve-3d;
  animation: botanicalRotateDrift var(--slow-rotate-variable, 18s) linear infinite paused;
}

.library-preview-stage-balanced.is-scan-hover-active .library-spin-slow-plane {
  animation-play-state: running;
}

@keyframes botanicalRotateDrift {
  from {
    transform: rotateY(-10deg);
  }

  to {
    transform: rotateY(370deg);
  }
}

.sound-topo-map-shell {
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radius-soft);
  background: radial-gradient(circle at 30% 20%, rgba(198, 142, 73, 0.18), transparent 55%), rgba(203, 210, 193, 0.45);
  min-height: 18rem;
  overflow: hidden;
}

.sound-marker-dot-cluster span {
  position: absolute;
  border-radius: 999rem;
  padding: var(--space-sm) var(--space-md);
  background: rgba(36, 48, 39, 0.86);
  color: var(--color-mist);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

.sound-marker-dot-cluster span.marker-creek-plane {
  top: 64%;
  left: 42%;
}

.sound-marker-dot-cluster span.marker-high-meadow-plane {
  top: 32%;
  left: 62%;
}

.sound-marker-dot-cluster span.marker-deep-woods-plane {
  top: 48%;
  left: 26%;
}

.mixer-panel-balanced-card {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.36);
  border-radius: var(--radius-soft);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
}

.audio-layer-checkbox-row-grid {
  display: grid;
  gap: var(--space-sm);
}

.season-vertical-wheel-slot {
  position: relative;
  min-height: 28rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.season-disk-wheel-visual {
  width: clamp(15rem, 44vw, 22rem);
  height: clamp(15rem, 44vw, 22rem);
  border-radius: 50%;
  background: conic-gradient(
    rgba(198, 142, 73, 0.28) 0deg 72deg,
    rgba(203, 210, 193, 0.35) 72deg 180deg,
    rgba(198, 142, 73, 0.18) 180deg 270deg,
    rgba(36, 48, 39, 0.25) 270deg 360deg
  );
  transition: transform 0.08s linear;
  box-shadow: var(--shadow-deep);
}

.cycles-scroll-readout-slot {
  max-width: 30rem;
  margin: var(--space-lg) auto 0;
  text-align: center;
}

.hero-compact-soft-no-banner-main {
  max-width: 44rem;
  margin: var(--space-lg) auto var(--space-md);
  padding: var(--space-md);
  text-align: center;
  display: grid;
  gap: var(--space-sm);
}

.state-page-centered-column {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.legal-plain-body-reading {
  max-width: var(--readable-line);
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-xl);
  display: grid;
  gap: var(--space-md);
}

.legal-plain-body-reading h2 {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

.visually-hide-tool-for-a11y {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .library-spin-slow-plane {
    animation: none !important;
  }

  .season-disk-wheel-visual {
    transition: none !important;
  }
}