/* Global palette: quiet morning-shift workspace orientation */
:root {
  --hue-paper-shell: #f6f4ee;
  --hue-ink-soft: #2b2d2f;
  --hue-clay-accent: #c39b82;
  --hue-mist-steel: #7a8b92;
  --hue-cloud-edge: rgba(247, 244, 239, 0.68);
  --hue-shadow-lift: 0 0.62rem 1.95rem rgba(43, 45, 47, 0.12);
  --font-serif-stack: "Lora", serif;
  --font-sans-stack: "Manrope", sans-serif;
  --space-xs: 0.35rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --radius-soft: 0.75rem;
  --radius-chip: 2.5rem;
  --motion-steady: 0.55s ease;
  --layout-max-read: 70rem;
  --burger-break: 1023px;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans-stack);
  color: var(--hue-ink-soft);
  background-color: var(--hue-paper-shell);
  background-image: radial-gradient(circle at 12% -20%, #fff7ec 12%, transparent 62%),
    radial-gradient(circle at 88% 10%, rgba(122, 139, 146, 0.15) 0%, transparent 55%);
  animation: ambient-lattice-shift 40s infinite alternate linear;
  overflow-x: hidden;
}

@keyframes ambient-lattice-shift {
  from {
    background-color: #f6f4ee;
  }

  to {
    background-color: #f4f2eb;
  }
}

h1,
h2,
h3 {
  font-family: var(--font-serif-stack);
  font-weight: 600;
}

p {
  line-height: 1.72;
}

a {
  color: inherit;
}

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

.skip-jump-strip {
  position: absolute;
  left: -999px;
}

.skip-jump-strip:focus {
  left: var(--space-md);
  top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--hue-ink-soft);
  color: var(--hue-paper-shell);
  z-index: 1200;
}

.body-root-stack {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.viewport-wrap-frame {
  width: 100%;
  overflow-x: clip;
}

.band-read-width {
  width: min(100%, var(--layout-max-read));
  margin-inline: auto;
  padding-inline: clamp(4%, var(--space-md), 8%);
}

.floating-pane-header {
  position: relative;
  z-index: 25;
}

/* Non-sticky, floating glass capsule */
.skyline-header-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: clamp(0.95rem, 2vw, 1.65rem);
  backdrop-filter: blur(1rem);
  background-color: rgba(246, 244, 238, 0.46);
}

@media (max-width: 1023px) {
  .skyline-header-chip {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-sm);
  }
}

.header-mark-plain {
  font-family: var(--font-serif-stack);
  font-size: clamp(0.9rem, 2.4vw, 1.4rem);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.inline-nav-shell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-start;
}

.inline-nav-chip {
  text-decoration: none;
  padding: 0.4rem 0.78rem;
  border-radius: var(--radius-chip);
  background: transparent;
  border: 1px solid rgba(122, 139, 146, 0.24);
  font-size: 0.94rem;
  transition: transform var(--motion-steady), background var(--motion-steady);
}

.inline-nav-chip:hover,
.inline-nav-chip:focus-visible {
  background: rgba(195, 155, 130, 0.16);
  transform: translateY(-0.12rem);
  outline-offset: 0.23rem;
}

.inline-nav-slot {
  justify-self: end;
  grid-column: 2;
}

.desktop-nav-plane {
  display: none;
  align-items: center;
}

.burger-toggle-trigger {
  border: none;
  background-color: transparent;
  color: inherit;
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-chip);
  justify-self: end;
  grid-column: 2;
}

.burger-toggle-trigger:focus-visible {
  outline: 0.125rem dashed var(--hue-mist-steel);
  outline-offset: 0.18rem;
}

.burger-lines-stack {
  display: flex;
  flex-direction: column;
  gap: 0.23rem;
}

.burger-lines-stack span {
  width: 1.62rem;
  height: 0.12rem;
  background-color: currentColor;
  border-radius: 0.375rem;
  transition: opacity var(--motion-steady), transform var(--motion-steady);
}

.menu-open-root .burger-lines-stack span:nth-child(1) {
  transform: translateY(0.35rem) rotate(43deg);
}

.menu-open-root .burger-lines-stack span:nth-child(2) {
  opacity: 0;
}

.menu-open-root .burger-lines-stack span:nth-child(3) {
  transform: translateY(-0.34rem) rotate(-43deg);
}

.burger-label-text {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Desktop nav visibility above 1023 */
@media (min-width: 1024px) {
  .floating-pane-header .skyline-header-chip {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--space-lg);
  }

  .inline-nav-slot {
    grid-column: 2;
    justify-self: start;
  }

  .desktop-nav-plane {
    display: flex;
  }

  .burger-toggle-trigger {
    display: none;
  }

  /* Ensure burger stays in DOM yet hidden on wide screens via display none */
}

/* Mobile/tablet burger panel overlay */
@media (max-width: 1023px) {
  .inline-nav-plane-handheld {
    position: relative;
    grid-column: 2;
    justify-self: end;
  }

  /* hide desktop nav duplication on handheld */
}

.burger-panel-sheet {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  background: radial-gradient(circle at 82% -10%, rgba(195, 155, 130, 0.18), rgba(246, 244, 238, 0.96));
  backdrop-filter: blur(0.92rem);
  display: grid;
  place-items: center;
  transition: visibility var(--motion-steady), opacity var(--motion-steady);
}

.burger-panel-open {
  visibility: visible;
  opacity: 1;
  z-index: 1100;
}

.burger-vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
}

.handheld-nav-route {
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-chip);
  border: 1px solid rgba(122, 139, 146, 0.24);
}

.main-flow-column {
  flex: 1 0 auto;
  display: block;
}

/* Full-width ribbons */
.fluid-banner-stage {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(22rem, 44vw, 36rem);
  display: grid;
  align-items: end;
  isolation: isolate;
}

/* Light bottom scrim so dark hero copy stays legible on bright photos */
.fluid-banner-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(246, 244, 238, 0.97) 0%,
    rgba(246, 244, 238, 0.88) 22%,
    rgba(246, 244, 238, 0.55) 48%,
    rgba(246, 244, 238, 0.12) 72%,
    transparent 100%
  );
}

.fluid-banner-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.fluid-banner-layers img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

.fluid-banner-mist-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(43, 45, 47, 0.2), transparent 45%);
}

.fluid-banner-words {
  position: relative;
  z-index: 2;
  color: var(--hue-ink-soft);
  padding: clamp(var(--space-lg), 6vw, var(--space-xl));
  padding-top: clamp(6rem, 18vw, 10rem);
  max-width: var(--layout-max-read);
  margin-inline: auto;
  width: 100%;
}

.fluid-banner-words .inline-kicker-chip {
  color: var(--hue-mist-steel);
}

.fluid-banner-words h1 {
  font-size: clamp(2rem, 4.5vw, 3.05rem);
  margin-bottom: var(--space-sm);
}

.banner-subline-text {
  max-width: 34rem;
  font-size: 1rem;
}

/* Section scaffolding */
.mesh-section-plane {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.tile-grid-asymmetric {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.duo-layout-skew {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: center;
}

.frost-pane-card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-soft);
  padding: clamp(1rem, 3vw, 1.6rem);
  box-shadow: var(--hue-shadow-lift);
}

.inline-kicker-chip {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.71rem;
  color: var(--hue-mist-steel);
}

.polar-link-btn {
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.32rem;
  border-radius: var(--radius-chip);
  background: rgba(195, 155, 130, 0.24);
  text-decoration: none;
  transition: transform var(--motion-steady), box-shadow var(--motion-steady),
    background var(--motion-steady);
}

.polar-link-btn:hover,
.polar-link-btn:focus-visible {
  transform: translateY(-0.16rem);
  box-shadow: 0 1.2rem 1.82rem rgba(43, 45, 47, 0.12);
  background: rgba(122, 139, 146, 0.18);
  outline-offset: 0.2rem;
}

.muted-mini-note {
  font-size: 0.92rem;
  color: rgba(43, 45, 47, 0.68);
}

/* Products */
.product-lattice-shell {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.product-lattice-pane {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-soft);
  overflow: clip;
}

.product-cover-thumb {
  max-height: 15rem;
  width: 100%;
  overflow: clip;
}

.product-cover-thumb img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
}

.price-tag-flat {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hue-clay-accent);
}

/* Footer */
.minimal-floor-footer {
  padding: clamp(1.75rem, 4vw, 2.85rem);
  background: rgba(122, 139, 146, 0.12);
  margin-top: var(--space-lg);
}

.floor-grid-double {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
}

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

.floor-nav-ul a {
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-chip);
  border: 1px solid rgba(122, 139, 146, 0.24);
  font-size: 0.9rem;
}

.floor-meta-mini {
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Contact layout */
.mesh-form-grid-split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.form-field-shell label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

.field-line-input {
  width: 90%;
  padding: 0.7rem;
  border-radius: var(--radius-soft);
  border: 1px solid rgba(122, 139, 146, 0.42);
  background: rgba(255, 255, 255, 0.7);
}

.field-zone-textarea {
  min-height: 9rem;
  resize: vertical;
}

.checkbox-row-aligned {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.map-embed-holder {
  position: relative;
  border-radius: var(--radius-soft);
  overflow: clip;
  min-height: 18rem;
  box-shadow: var(--hue-shadow-lift);
}

.map-embed-holder iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Quiet studio immersion */
.quiet-studio-shell {
  display: grid;
}

.quiet-intro-panel {
  display: grid;
  gap: var(--space-md);
}

.quiet-immersed-root .floating-pane-header,
.quiet-immersed-root .minimal-floor-footer,
.quiet-immersed-root #burger-panel-sheet {
  visibility: hidden;
  height: 0;
  margin: 0;
  overflow: clip;
}

.quiet-immersed-root .escape-fabric-trigger {
  display: none;
}

.quiet-immersed-root .quiet-immersed-main {
  min-height: 100vh;
}

.quiet-immersed-root .consent-sheet-layer {
  visibility: hidden;
}

.quiet-immersed-main {
  position: relative;
}

.quiet-studio-immersive-layer {
  display: none;
  min-height: 100vh;
  place-items: center;
}

.quiet-studio-immersed .quiet-studio-intro-layer {
  display: none !important;
}

.quiet-studio-immersed .quiet-studio-immersive-layer {
  display: grid !important;
  background-color: rgba(246, 244, 238, 0.97);
}

.breathing-orb-disk {
  width: clamp(10rem, 28vw, 16rem);
  height: clamp(10rem, 28vw, 16rem);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), transparent 72%),
    rgba(122, 139, 146, 0.28);
  box-shadow: 0 2.4rem 3.62rem rgba(43, 45, 47, 0.16), inset 0 0 0 0.12rem rgba(255, 255, 255, 0.4);
  animation: breathing-lens-pulse 7.9s infinite ease-in-out alternate;
}

@keyframes breathing-lens-pulse {
  0% {
    transform: scale(0.93);
    filter: saturate(94%);
    opacity: 0.94;
  }

  100% {
    transform: scale(1.06);
    filter: saturate(108%);
    opacity: 1;
  }
}

.quiet-microcopy-stack {
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2rem);
}

.quiet-microcopy-stack p {
  max-width: 28rem;
  margin-inline: auto;
}

/* Structural index expandable */
.struct-expand-block {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-steady), opacity var(--motion-steady);
  opacity: 0;
}

.struct-expand-open {
  opacity: 1;
  max-height: 96rem;
}

.struct-expander-toggle {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-radius: var(--radius-soft);
  border: 1px solid rgba(122, 139, 146, 0.24);
  padding: var(--space-md);
  text-align: left;
  transition: transform var(--motion-steady), background var(--motion-steady);
}

.struct-expander-toggle:hover,
.struct-expander-toggle:focus-visible {
  transform: translateY(-0.12rem);
  background-color: rgba(195, 155, 130, 0.12);
  outline-offset: 0.2rem;
}

/* Escape fabric */
.escape-fabric-trigger {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  background: rgba(43, 45, 47, 0.78);
  color: rgba(246, 244, 238, 0.92);
  border: none;
  border-radius: var(--radius-chip);
  padding: 0.6rem 0.94rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(0.4rem);
  transition: opacity var(--motion-steady), transform var(--motion-steady), background var(--motion-steady);
}

.escape-fabric-trigger:focus-visible {
  outline: 0.135rem dashed var(--hue-paper-shell);
  outline-offset: 0.2rem;
}

.escape-fabric-trigger:hover {
  opacity: 0.82;
}

.escape-fabric-plane {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  display: grid;
  place-items: center;
  background: rgb(8, 7, 5);
  color: rgb(239, 199, 130);
  z-index: 1300;
  transition: visibility var(--motion-steady), opacity var(--motion-steady);
}

.escape-fabric-active {
  opacity: 1;
  visibility: visible;
}

.escape-fabric-inner {
  text-align: center;
  padding: var(--space-lg);
  width: min(90%, 32rem);
}

.escape-fabric-inner h2 {
  font-weight: 500;
}

.escape-fabric-inner p {
  line-height: 1.92;
}

.escape-fabric-return {
  margin-top: var(--space-lg);
  border: 1px solid rgba(239, 199, 130, 0.36);
  background: transparent;
  color: rgb(239, 199, 130);
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background var(--motion-steady), transform var(--motion-steady);
}

.escape-fabric-return:hover,
.escape-fabric-return:focus-visible {
  transform: translateY(-0.12rem);
  background-color: rgba(239, 199, 130, 0.12);
  outline-offset: 0.2rem;
}

/* Consent */
.consent-sheet-layer {
  position: fixed;
  left: clamp(4%, var(--space-md));
  right: clamp(4%, var(--space-md));
  bottom: clamp(3%, var(--space-md));
  z-index: 1050;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-soft);
  border: 1px solid rgba(122, 139, 146, 0.24);
  box-shadow: var(--hue-shadow-lift);
  padding: clamp(1rem, 3vw, 1.42rem);
  backdrop-filter: blur(0.6rem);
}

.consent-sheet-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
  justify-content: space-between;
}

.consent-sheet-accept-btn {
  border: none;
  border-radius: var(--radius-chip);
  padding: 0.55rem 1.09rem;
  background: rgba(43, 45, 47, 0.86);
  color: rgba(246, 244, 238, 0.96);
}

.consent-sheet-focus-link {
  font-size: 0.94rem;
  color: inherit;
}

/* Utilities */
.stack-gap-md {
  display: grid;
  gap: var(--space-md);
}

.stack-gap-lg {
  display: grid;
  grid-template-columns: minmax(120px, 1fr);
  gap: var(--space-lg);
}

.inline-icon-gap {
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
}

.blockquote-quiet {
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  border-left: 0.135rem solid rgba(122, 139, 146, 0.36);
}

.legal-intro-heading {
  font-size: 1rem;
}

.legal-bullet-min {
  padding-left: 1.09rem;
  margin-block: var(--space-sm);
}

.visually-soft-break {
  height: clamp(3rem, 8vw, 5rem);
}

.list-plain-lead {
  list-style: decimal;
}

.error-code-label {
  font-size: clamp(3rem, 9vw, 5rem);
  margin: var(--space-sm) 0;
}

.quiet-studio-intro-layer {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .burger-panel-sheet {
    display: none !important;
  }
}