/*
 * Gaga brand shell v13
 * Copy this versioned file into each independently deployed Gaga property.
 * Local navigation and footer links remain owned by the property.
 */

:root {
  --gaga-shell-paper: #f8f8f8;
  --gaga-shell-white: #f8f8f8;
  --gaga-shell-ink: #1d1814;
  --gaga-shell-muted: #6d6965;
  --gaga-shell-mint: #58cbbb;
  --gaga-shell-mint-dark: #148f80;
  --gaga-shell-clay: #d98563;
  --gaga-shell-line: rgba(29, 24, 20, 0.13);
  --gaga-shell-gutter: clamp(20px, 3.28125vw, 63px);
  --gaga-shell-mobile-gutter: 20px;
  --gaga-font-sans: "Poppins", Montserrat, Arial, sans-serif;
  --gaga-font-serif: "Caudex", Georgia, "Times New Roman", serif;
  --gaga-shell-font: var(--gaga-font-sans);
  --gaga-weight-light: 300;
  --gaga-weight-regular: 400;
  --gaga-weight-medium: 500;
  --gaga-weight-semibold: 600;
  --gaga-weight-bold: 700;
  --gaga-weight-black: 900;
  --gaga-type-display: clamp(52px, 4.21875vw, 81px);
  --gaga-type-section: clamp(36px, 3.333vw, 48px);
  --gaga-type-component: clamp(24px, 2.5vw, 36px);
  --gaga-type-lead: 18px;
  --gaga-type-body: 16px;
  --gaga-type-small: 14px;
  --gaga-type-micro: 12px;
  --gaga-leading-display: 1.1;
  --gaga-leading-heading: 1.2;
  --gaga-leading-body: 1.6;
  --gaga-page-gutter: clamp(20px, 3.28125vw, 63px);
  --gaga-section-space: clamp(88px, 8vw, 128px);
  --gaga-block-space: clamp(32px, 4vw, 64px);
  --gaga-content-wide: 1200px;
  --gaga-content-reading: 820px;
  --gaga-content-inset: max(
    var(--gaga-page-gutter),
    calc((100vw - var(--gaga-content-wide)) / 2)
  );
  --gaga-neumorph-radius: 42px;
  --gaga-neumorph-white-shadow:
    7px 7px 14px #e2e2e2,
    -7px -7px 14px #ffffff;
  --gaga-neumorph-white-down-shadow:
    inset 5px 5px 10px #e2e2e2,
    inset -5px -5px 10px #ffffff;
  --gaga-neumorph-brown-shadow:
    -5px 5px 10px #13100d,
    5px -5px 10px #211b17;
  --gaga-neumorph-brown-down-shadow:
    inset -5px 5px 10px #211b17,
    inset 5px -5px 10px #13100d;

  /* Stable aliases used by independently built Gaga properties. */
  --paper: var(--gaga-shell-paper);
  --white: var(--gaga-shell-white);
  --surface: var(--gaga-shell-paper);
  --ink: var(--gaga-shell-ink);
  --muted: var(--gaga-shell-muted);
  --mint: var(--gaga-shell-mint);
  --mint-dark: var(--gaga-shell-mint-dark);
  --warm: var(--gaga-shell-clay);
  --clay: var(--gaga-shell-clay);
  --line: var(--gaga-shell-line);
  --page-gutter: var(--gaga-page-gutter);
  --gutter: var(--gaga-page-gutter);
  --section-space: var(--gaga-section-space);
  --section: var(--gaga-section-space);
  --block-space: var(--gaga-block-space);
  --content-wide: var(--gaga-content-wide);
  --content-inset: var(--gaga-content-inset);
  --sans: var(--gaga-font-sans);
  --serif: var(--gaga-font-serif);
}

html {
  scroll-behavior: smooth;
}

.gaga-site {
  margin: 0;
  overflow-x: clip;
  color: var(--gaga-shell-ink);
  background: var(--gaga-shell-paper);
  font-family: var(--gaga-font-sans);
  font-size: var(--gaga-type-body);
  font-weight: var(--gaga-weight-regular);
  line-height: var(--gaga-leading-body);
  -webkit-font-smoothing: antialiased;
}

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

.gaga-site img {
  display: block;
  max-width: 100%;
}

.gaga-site a {
  color: inherit;
}

.gaga-site :where(button, input, textarea, select) {
  color: inherit;
  font: inherit;
}

.gaga-site :where(h1, h2, h3, p) {
  margin-top: 0;
}

.gaga-site :where(h1, h2, h3) {
  letter-spacing: -0.04em;
}

.gaga-site h1 {
  font-weight: var(--gaga-weight-black);
  line-height: var(--gaga-leading-display);
}

.gaga-site h2 {
  font-weight: var(--gaga-weight-bold);
  line-height: var(--gaga-leading-heading);
}

.gaga-site h3 {
  font-weight: var(--gaga-weight-semibold);
  line-height: var(--gaga-leading-heading);
}

.gaga-site em {
  color: var(--gaga-shell-mint);
  font-style: normal;
}

.gaga-site ::selection {
  color: var(--gaga-shell-paper);
  background: var(--gaga-shell-ink);
}

/*
 * Two surfaces, two depths:
 * raised elements sit above the page; -down elements enter the surface.
 */
body .neumorph_white {
  border-color: transparent;
  border-radius: var(--gaga-neumorph-radius);
  background: var(--gaga-shell-paper);
  box-shadow: var(--gaga-neumorph-white-shadow);
}

body .neumorph_white-down {
  border-radius: var(--gaga-neumorph-radius);
  background: var(--gaga-shell-paper);
  box-shadow: var(--gaga-neumorph-white-down-shadow);
}

body .neumorph_brown {
  border-color: transparent;
  border-radius: var(--gaga-neumorph-radius);
  background: var(--gaga-shell-ink);
  box-shadow: var(--gaga-neumorph-brown-shadow);
}

body .neumorph_brown-down {
  border-radius: var(--gaga-neumorph-radius);
  background: var(--gaga-shell-ink);
  box-shadow: var(--gaga-neumorph-brown-down-shadow);
}

.neumorph_simple {
  display: flex;
  min-height: 330px;
  padding: clamp(42px, 5vw, 72px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*
 * Semantic material API for new Gaga properties.
 * Raw neumorph_* utilities remain only as a compatibility layer for the Wix copy.
 */
.gaga-card,
.gaga-field,
.gaga-chip {
  --gaga-material-background: var(--gaga-shell-paper);
  --gaga-material-foreground: var(--gaga-shell-ink);
  --gaga-material-raised-shadow: var(--gaga-neumorph-white-shadow);
  --gaga-material-recessed-shadow: var(--gaga-neumorph-white-down-shadow);
  border-color: transparent;
  border-radius: var(--gaga-neumorph-radius);
  color: var(--gaga-material-foreground);
  background-color: var(--gaga-material-background);
}

.gaga-card--light,
.gaga-field--light,
.gaga-chip--light {
  --gaga-material-background: var(--gaga-shell-paper);
  --gaga-material-foreground: var(--gaga-shell-ink);
  --gaga-material-raised-shadow: var(--gaga-neumorph-white-shadow);
  --gaga-material-recessed-shadow: var(--gaga-neumorph-white-down-shadow);
}

.gaga-card--brown,
.gaga-field--brown,
.gaga-chip--brown {
  --gaga-material-background: var(--gaga-shell-ink);
  --gaga-material-foreground: var(--gaga-shell-white);
  --gaga-material-raised-shadow: var(--gaga-neumorph-brown-shadow);
  --gaga-material-recessed-shadow: var(--gaga-neumorph-brown-down-shadow);
}

.gaga-card--raised {
  box-shadow: var(--gaga-material-raised-shadow);
}

.gaga-card--recessed,
.gaga-field,
.gaga-chip {
  box-shadow: var(--gaga-material-recessed-shadow);
}

.gaga-card--simple {
  display: flex;
  min-height: 330px;
  padding: clamp(42px, 5vw, 72px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.gaga-card--interactive,
.gaga-card--interactive * {
  cursor: pointer;
}

.gaga-card--interactive {
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.gaga-card--interactive:hover {
  transform: translateY(-2px);
}

.gaga-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: var(--gaga-type-micro);
  font-weight: var(--gaga-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gaga-eyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.gaga-eyebrow--ink {
  color: var(--gaga-shell-ink);
}

.gaga-eyebrow--mint {
  color: var(--gaga-shell-mint-dark);
}

.gaga-eyebrow--light {
  color: rgba(255, 255, 255, 0.58);
}

.gaga-eyebrow--light > span {
  color: var(--gaga-shell-mint-dark);
  background: currentColor;
}

.gaga-surface-light {
  color: var(--gaga-shell-ink);
  background: var(--gaga-shell-paper);
}

.gaga-surface-brown {
  color: var(--gaga-shell-white);
  background: var(--gaga-shell-ink);
}

.gaga-content-frame {
  width: min(
    var(--gaga-content-wide),
    calc(100% - (2 * var(--gaga-page-gutter)))
  );
  margin-inline: auto;
}

.gaga-content-inset {
  padding-inline: var(--gaga-content-inset);
}

.gaga-interactive-card,
.gaga-interactive-card * {
  cursor: pointer;
}

.gaga-button {
  --gaga-button-background: var(--gaga-shell-paper);
  --gaga-button-foreground: var(--gaga-shell-ink);
  --gaga-button-raised-shadow: var(--gaga-neumorph-white-shadow);
  --gaga-button-pressed-shadow: var(--gaga-neumorph-white-down-shadow);
  border: 0;
  border-radius: var(--gaga-neumorph-radius);
  color: var(--gaga-button-foreground);
  background-color: var(--gaga-button-background);
  box-shadow: var(--gaga-button-raised-shadow);
  font: inherit;
  cursor: pointer;
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.gaga-button--light {
  --gaga-button-background: var(--gaga-shell-paper);
  --gaga-button-foreground: var(--gaga-shell-ink);
  --gaga-button-raised-shadow: var(--gaga-neumorph-white-shadow);
  --gaga-button-pressed-shadow: var(--gaga-neumorph-white-down-shadow);
}

.gaga-button--brown {
  --gaga-button-background: var(--gaga-shell-ink);
  --gaga-button-foreground: var(--gaga-shell-white);
  --gaga-button-raised-shadow: var(--gaga-neumorph-brown-shadow);
  --gaga-button-pressed-shadow: var(--gaga-neumorph-brown-down-shadow);
}

body .gaga-button,
body .gaga-button:hover,
body .gaga-button:focus-visible,
body .gaga-button:active {
  color: var(--gaga-button-foreground) !important;
  background-color: var(--gaga-button-background) !important;
}

.gaga-button span {
  color: var(--gaga-shell-mint-dark);
}

.gaga-text-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: var(--gaga-type-small);
  font-weight: var(--gaga-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.gaga-text-link span {
  margin-left: 10px;
  color: var(--gaga-shell-mint-dark);
}

.gaga-text-link--underlined {
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-weight: var(--gaga-weight-bold);
}

.gaga-text-link:hover {
  color: var(--gaga-shell-mint-dark);
}

.gaga-text-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--gaga-shell-mint-dark);
  outline-offset: 4px;
}

.gaga-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--gaga-button-raised-shadow) !important;
}

body :where(button, a, summary).gaga-button:active,
body .gaga-button.is-pressed {
  transform: translateY(1px);
  box-shadow: var(--gaga-button-pressed-shadow) !important;
}

:where(.neumorph_white, .neumorph_brown) {
  transition: box-shadow 160ms ease, transform 160ms ease;
}

:where(.gaga-button, .neumorph_white, .neumorph_white-down, .neumorph_brown, .neumorph_brown-down):focus-visible {
  outline: 3px solid var(--gaga-shell-mint-dark);
  outline-offset: 4px;
}

.gaga-page {
  width: 100%;
  overflow-x: clip;
  font-family: var(--gaga-font-sans);
  font-size: var(--gaga-type-body);
  font-weight: var(--gaga-weight-regular);
  line-height: var(--gaga-leading-body);
}

.gaga-section {
  padding: var(--gaga-section-space) var(--gaga-page-gutter);
}

.gaga-section-inner {
  width: min(100%, var(--gaga-content-wide));
  margin-right: auto;
  margin-left: auto;
}

.gaga-reading-width {
  width: min(100%, var(--gaga-content-reading));
}

.gaga-shell-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 0 var(--gaga-shell-gutter);
  border-bottom: 1px solid rgba(29, 24, 20, 0.05);
  background: var(--gaga-shell-paper);
  color: var(--gaga-shell-ink);
  font-family: var(--gaga-shell-font);
}

.gaga-shell-header .brand-lockup,
.gaga-shell-footer .brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 14px;
}

.gaga-shell-header .brand,
.gaga-shell-footer .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.gaga-shell-header .brand img,
.gaga-shell-footer .brand img {
  display: block;
  width: clamp(49px, 5.07vw, 81px);
  height: auto;
}

.gaga-shell-header .property-label,
.gaga-shell-footer .property-label {
  padding-left: 14px;
  border-left: 1px solid var(--gaga-shell-line);
  color: var(--gaga-shell-ink);
  font-size: var(--gaga-type-micro);
  font-weight: var(--gaga-weight-semibold);
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.gaga-shell-header .desktop-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 2.5vw, 40px);
}

.gaga-shell-header .desktop-nav a,
.gaga-shell-header .header-action,
.gaga-shell-footer nav a {
  color: inherit;
  font-size: var(--gaga-type-micro);
  font-weight: var(--gaga-weight-regular);
  text-decoration: none;
}

.gaga-shell-header .desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}

.gaga-shell-header .desktop-nav a:hover,
.gaga-shell-header .desktop-nav a[aria-current="page"] {
  color: var(--gaga-shell-mint-dark);
  border-color: currentColor;
}

.gaga-shell-header .header-action {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  padding: 0 18px;
}

.gaga-shell-header .header-action:hover,
.gaga-shell-footer a:hover,
.gaga-shell-header .property-label:hover {
  color: var(--gaga-shell-mint-dark);
}

.gaga-shell-header .header-action span {
  margin-left: 10px;
  color: var(--gaga-shell-mint-dark);
}

.gaga-shell-header a:focus-visible,
.gaga-shell-footer a:focus-visible,
.gaga-shell-header summary:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--gaga-shell-mint-dark);
  outline-offset: 4px;
}

.gaga-shell-header .mobile-menu {
  display: none;
}

.gaga-shell-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: clamp(44px, 8vw, 120px);
  align-items: end;
  padding: 52px var(--gaga-shell-gutter) 56px;
  border-top: 1px solid var(--gaga-shell-line);
  background: var(--gaga-shell-paper);
  color: var(--gaga-shell-ink);
  font-family: var(--gaga-shell-font);
}

.gaga-shell-footer .footer-intro > p {
  max-width: 440px;
  margin: 18px 0 0;
  color: var(--gaga-shell-muted);
  font-size: var(--gaga-type-small);
  font-weight: var(--gaga-weight-light);
  line-height: var(--gaga-leading-body);
}

.gaga-shell-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 26px;
}

.gaga-shell-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (max-width: 980px) {
  .gaga-shell-header {
    grid-template-columns: 1fr auto;
  }

  .gaga-shell-header .desktop-nav,
  .gaga-shell-header .header-action {
    display: none;
  }

  .gaga-shell-header .mobile-menu {
    position: relative;
    display: block;
    justify-self: end;
  }

  .gaga-shell-header .mobile-menu summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    color: var(--gaga-shell-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    list-style: none;
    text-transform: uppercase;
  }

  .gaga-shell-header .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .gaga-shell-header .mobile-menu summary::after {
    margin-left: 9px;
    color: var(--gaga-shell-mint-dark);
    content: "＋";
    font-size: 15px;
    line-height: 1;
  }

  .gaga-shell-header .mobile-menu[open] summary::after {
    content: "−";
  }

  .gaga-shell-header .mobile-menu nav {
    position: absolute;
    top: 51px;
    right: 0;
    display: grid;
    width: min(290px, calc(100vw - (2 * var(--gaga-shell-mobile-gutter))));
    padding: 13px 20px;
    border: 1px solid var(--gaga-shell-line);
    border-radius: 18px;
    background: var(--gaga-shell-paper);
    box-shadow:
      -8px -8px 22px rgba(255, 255, 255, 0.8),
      10px 12px 28px rgba(29, 24, 20, 0.13);
  }

  .gaga-shell-header .mobile-menu nav a {
    min-height: 46px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gaga-shell-line);
    color: var(--gaga-shell-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .gaga-shell-header .mobile-menu nav a:last-child {
    border-bottom: 0;
    color: var(--gaga-shell-mint-dark);
  }

  .gaga-shell-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .gaga-shell-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  :root {
    --gaga-page-gutter: 20px;
    --gaga-section-space: 72px;
    --gaga-block-space: 28px;
  }

  .gaga-shell-header {
    min-height: 64px;
    padding-right: var(--gaga-shell-mobile-gutter);
    padding-left: var(--gaga-shell-mobile-gutter);
  }

  .gaga-shell-header .brand img,
  .gaga-shell-footer .brand img {
    width: 49px;
  }

  .gaga-shell-header .property-label,
  .gaga-shell-footer .property-label {
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .gaga-shell-footer {
    gap: 28px;
    padding: 40px var(--gaga-shell-mobile-gutter) 44px;
  }

  .gaga-shell-footer nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gaga-site *,
  .gaga-site *::before,
  .gaga-site *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}