@layer reset, tokens, base;

    /* =====================================================================
   TOKENS
   ===================================================================== */
@layer tokens {

/*
FIGMA

DEEP FOREST #1F3A32
OCEAN TEAL #447B74
SAND DUNE #C8B69A
SUN GOLD #D4A441
CORAL WHITE #F5EFE8

HARMONY ADJUSTED

DEEP FOREST #1F3A32
OCEAN TEAL #6E8082
SAND DUNE #C2A57E
SUN GOLD #C99A4A
BRAND CANVAS #F4EFE2
*/


    :root {
      /* Brand palette */
      --brand-deep-forest: #1F3A32;
      --brand-ocean-teal: #447B74;
      --brand-sand-dune: #C8B69A;
      --brand-sun-gold: #D4A441;
      --brand-coral-white: #F5EFE8;

      --brand-sun-gold-deep: color-mix(in srgb, var(--brand-sun-gold) 78%, black); /* #A77E33; */
      --brand-sun-gold-soft: color-mix(in srgb, var(--brand-sun-gold) 60%, white); /* #E5C58F */
      --brand-deep-forest-2: color-mix(in srgb, var(--brand-deep-forest) 90%, white); /* #2E4E47 */
      --brand-deep-forest-3: color-mix(in srgb, var(--brand-deep-forest) 81.5%, white); /* #3E5E57 */

      --brand-canvas: #F5EFE8;
      --brand-canvas-2: color-mix(in srgb, var(--brand-canvas) 45.5%, #FFFCF4); /* #FBF6EF */

      --brand-stone: #ABA9A3;

      /* Surface */
      --surface-base: var(--brand-canvas);
      --surface-elevated: var(--brand-canvas-2);
      --surface-white: #FFFFFF;
      --surface-neutral: var(--brand-stone);
      --surface-inverse: var(--brand-deep-forest);
      --surface-inverse-elevated: var(--brand-deep-forest-2);

      /* Text */
      --text-primary: var(--brand-deep-forest);
      --text-secondary: #4A6660;
      --text-muted: #5E7470;
      --text-inverse: var(--brand-canvas);
      --text-inverse-soft: rgba(244, 239, 226, 0.78);
      --text-gold: var(--brand-sun-gold-deep);

      /* Border */
      --border-subtle: #E2DBC9;
      --border-strong: #C7BEA8;
      --border-gold: var(--brand-sun-gold);
      --border-inverse: var(--brand-deep-forest-3);

      /* Interactive */
      --interactive: var(--brand-deep-forest);
      --interactive-hover: var(--brand-deep-forest-2);
      --interactive-active: #122A24;
      --focus-ring: 0 0 0 0.1875rem rgba(201, 154, 74, 0.4);
      --focus-ring-error: 0 0 0 0.1875rem rgba(182, 89, 73, 0.35);

      /* State */
      --state-info: var(--brand-ocean-teal);
      --state-success: #4F7D5E;
      --state-warning: var(--brand-sun-gold-deep);
      --state-error: #B65949;

      /* Radii */
      --radius-sm: 0.125rem;
      --radius-md: 0.25rem;
      --radius-lg: 0.5rem;
      --radius-pill: 624.9375rem;

      /* Gradients */
      --gradient-forest-teal: linear-gradient(135deg, var(--brand-deep-forest) 0%, var(--brand-ocean-teal) 100%);
      --gradient-teal-forest: linear-gradient(135deg, var(--brand-ocean-teal) 0%, var(--brand-deep-forest) 100%);
      --gradient-sand-gold: linear-gradient(135deg, var(--brand-sand-dune) 0%, var(--brand-sun-gold) 100%);
      --gradient-gold-forest: linear-gradient(135deg, var(--brand-sun-gold) 0%, var(--brand-deep-forest) 100%);
      --gradient-reef: linear-gradient(135deg, var(--brand-deep-forest) 0%, var(--brand-ocean-teal) 60%, var(--brand-sand-dune) 100%);
      --gradient-scrim: linear-gradient(180deg, rgb(31 58 52 / 0) 0%, rgb(31 58 52 / 0.85) 100%);
      --gradient-forest-depth: linear-gradient(150deg, var(--brand-deep-forest-2) 0%, var(--brand-deep-forest) 65%);
      --gradient-gold-glow: radial-gradient(circle at 50% -20%, rgb(201 154 74 / 0.22) 0%, transparent 60%);

      /* Spacing scale */
      --sp-1: 0.25rem;
      --sp-2: 0.5rem;
      --sp-3: 0.75rem;
      --sp-4: 1rem;
      --sp-5: 1.5rem;
      --sp-6: 2rem;
      --sp-7: 3rem;
      --sp-8: 4rem;
      --sp-9: 6rem;
      --sp-10: 8rem;

      /* Typography */
      --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
      --font-body: 'Montserrat', -apple-system, 'Avenir Next', Avenir, sans-serif;

      --text-display-1: clamp(2.75rem, 1.5rem + 5vw, 5rem);
      --text-display-2: clamp(2.25rem, 1.25rem + 3.5vw, 3.5rem);
      --text-h1: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
      --text-h2: clamp(1.35rem, 1rem + 1.6vw, 1.75rem);
      --text-h3: 1.25rem;
      --text-h4: 1.15rem;
      --text-body-lg: 1.125rem;
      --text-body: 1rem;
      --text-body-sm: 0.875rem;
      --text-caption: 0.6875rem;
      --text-tagline: 0.75rem;

      /* Layout */
      --container-max: 75rem;
      --sidebar-width: 16rem;
    }
}

    /* =====================================================================
   RESET
   ===================================================================== */
@layer reset {
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      font-size: 100%;
    }

    body {
      margin: 0;
      padding: 0;
    }

    h1, h2, h3, h4, h5, h6,
    p, figure, blockquote,
    ul, ol, dl, dd,
    fieldset, legend {
      margin: 0;
    }

    img,
    svg,
    video {
      max-width: 100%;
      display: block;grid6
    }
}

    /* =====================================================================
   BASE
   ===================================================================== */
@layer base {
    body {
      font-family: var(--font-body);
      color: var(--text-primary);
      background: var(--surface-base);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    ::selection {
      background: var(--brand-sun-gold);
      color: var(--text-primary);
    }

    input,
    button,
    textarea,
    select {
      font: inherit;
    }
}

    /* =====================================================================
   TYPOGRAPHY UTILITIES (canonical)
   ===================================================================== */
    .lz-display-1 {
      font-family: var(--font-display);
      font-size: var(--text-display-1);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .lz-display-2 {
      font-family: var(--font-display);
      font-size: var(--text-display-2);
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .lz-h1 {
      font-family: var(--font-display);
      font-size: var(--text-h1);
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: 0.05em;
      color: var(--text-primary);
    }

    .lz-h2 {
      font-family: var(--font-display);
      font-size: var(--text-h2);
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .lz-h3 {
      font-family: var(--font-display);
      font-size: var(--text-h3);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .lz-h4 {
      font-family: var(--font-body);
      font-size: var(--text-h4);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.01em;
      color: var(--text-primary);
    }

    .lz-body-lg {
      font-family: var(--font-body);
      font-size: var(--text-body-lg);
      font-weight: 400;
      line-height: 1.7;
      color: var(--text-primary);
    }

    .lz-body {
      font-family: var(--font-body);
      font-size: var(--text-body);
      font-weight: 400;
      line-height: 1.7;
      color: var(--text-primary);
    }

    .lz-body-sm {
      font-family: var(--font-body);
      font-size: var(--text-body-sm);
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-primary);
    }

    .lz-caption {
      font-family: var(--font-body);
      font-size: var(--text-caption);
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .lz-overline {
      font-family: var(--font-body);
      font-size: var(--text-caption);
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-gold);
    }

    .lz-tagline {
      font-family: var(--font-body);
      font-size: var(--text-tagline);
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-gold);
    }

    .lz-text-secondary {
      color: var(--text-secondary);
    }

    .lz-text-muted {
      color: var(--text-muted);
    }

    .lz-text-inverse {
      color: var(--text-inverse);
    }

    /* Cultivate-over-Preserve vertical stack */
    .lz-cp {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 1;
    }

    .lz-cp>.rule {
      display: block;
      width: 1.25em;
      height: 1px;
      background: currentColor;
      opacity: 0.6;
      margin: 0.35em 0;
    }

    .lz-cp-lg>.rule {
      width: 80%;
      height: 2px;
      opacity: 0.85;
      margin: 0.45rem 0;
    }

    .lz-tag-sep {
      color: var(--brand-sand-dune);
      margin: 0 0.4em;
    }

    /* =====================================================================
   DOC SHELL
   ===================================================================== */
    .shell {
      display: grid;
      grid-template-columns: 1fr;
      min-height: 100vh;
    }

    .sidebar {
      display: none;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      background: var(--surface-base);
      border-right: 1px solid var(--border-subtle);
      padding: var(--sp-6) var(--sp-5);
    }

    /* lg+ (1024px): reveal the sidebar and switch the shell to its
       two-column layout. One breakpoint controls both so they cannot desync. */
    @media (min-width: 1024px) {
      .shell {
        grid-template-columns: var(--sidebar-width) 1fr;
      }

      .sidebar {
        display: block;
      }
    }

    .sidebar-brand {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 0.875rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-primary);
      margin-bottom: var(--sp-6);
      line-height: 1.3;
    }

    .sidebar-brand small {
      display: block;
      font-family: var(--font-body);
      font-size: 0.625rem;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      font-weight: 500;
      margin-top: 0.25rem;
      text-transform: uppercase;
    }

    .sidebar-group {
      margin-bottom: var(--sp-5);
    }

    .sidebar-group-label {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: var(--sp-2);
    }

    .sidebar-link {
      display: block;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      padding: 0.25rem 0 0.25rem 0.625rem;
      border-left: 0.125rem solid transparent;
      line-height: 1.45;
    }

    .sidebar-link:hover {
      color: var(--text-primary);
    }

    .sidebar-link.active {
      color: var(--text-primary);
      border-left-color: var(--border-gold);
      font-weight: 600;
    }

    .sidebar-link.standalone {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: var(--sp-5);
      padding-bottom: var(--sp-3);
      border-bottom: 1px solid var(--border-subtle);
    }

    main.content {
      min-width: 0;
      padding: 0;
    }

    /* Group dividers — elevated surface, rule under text */
    .group-divider {
      margin-top: var(--sp-7);
      padding: var(--sp-5) var(--sp-7);
      text-align: center;
      background: var(--surface-elevated);
      color: var(--text-primary);
      border-top: 1px solid var(--border-strong);
    }

    .group-divider .group-name {
      font-family: var(--font-display);
      font-size: var(--text-display-2);
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin: 0;
      color: var(--text-primary);
    }

    .group-divider .rule {
      width: 4rem;
      height: 2px;
      background: var(--border-gold);
      margin: 0 auto;
    }

    section.spec {
      padding: var(--sp-7) var(--sp-4);
      border-top: 1px solid var(--border-strong);
      scroll-margin-top: var(--sp-3);
    }

    section.spec>.spec-title {
      font-family: var(--font-display);
      font-size: var(--text-h2);
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin: 0 0 var(--sp-5);
      color: var(--text-primary);
    }

    .stage {
      background: var(--surface-elevated);
      border-radius: var(--radius-md);
      padding: var(--sp-5);
      margin: var(--sp-3) 0;
      border: 1px solid var(--border-subtle);
    }

    .stage.dark {
      background: var(--surface-inverse);
      color: var(--text-inverse);
      border-color: var(--border-inverse);
    }

    .stage.plain {
      background: transparent;
      border: none;
      padding: 0;
    }

    .row {
      display: flex;
      gap: var(--sp-3);
      flex-wrap: wrap;
      align-items: center;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-5);
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-4);
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-4);
    }

    .grid-6 {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--sp-4);
    }

    h4.sub {
      font-family: var(--font-body);
      font-size: var(--text-caption);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      font-weight: 600;
      margin: var(--sp-6) 0 var(--sp-3);
    }

    /* =====================================================================
   LINKS
   ===================================================================== */
    .lz-link {
      color: var(--text-gold);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.1875rem;
    }

    .lz-link-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-primary);
      text-decoration: none;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border-bottom: 1px solid var(--border-gold);
      padding-bottom: 0.125rem;
    }

    .lz-link-cta::after {
      content: "→";
      color: var(--text-gold);
    }

    /* =====================================================================
   BUTTONS
   ===================================================================== */
    .lz-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      font-family: var(--font-body);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s;
      text-decoration: none;
      white-space: nowrap;
      border-radius: var(--radius-sm);
    }

    .lz-btn:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    .lz-btn-primary {
      background: var(--interactive);
      color: var(--text-inverse);
    }

    .lz-btn-primary:hover {
      background: var(--interactive-hover);
    }

    .lz-btn-primary:active {
      background: var(--interactive-active);
    }

    .lz-btn-gold {
      background: var(--brand-sun-gold);
      color: var(--text-primary);
    }

    .lz-btn-gold:hover {
      background: var(--brand-sun-gold-deep);
      color: var(--text-inverse);
    }

    .lz-btn-outline {
      background: transparent;
      color: var(--text-primary);
      border-color: var(--text-primary);
    }

    .lz-btn-outline:hover {
      background: var(--text-primary);
      color: var(--text-inverse);
    }

    .lz-btn-ghost {
      background: transparent;
      color: var(--text-primary);
    }

    .lz-btn-ghost:hover {
      color: var(--text-gold);
      border-color: var(--border-gold);
    }

    .lz-btn-onlight {
      background: rgba(244, 239, 226, 0.12);
      color: var(--text-inverse);
      backdrop-filter: blur(0.5rem);
      border-color: rgba(244, 239, 226, 0.5);
    }

    .lz-btn-onlight:hover {
      background: rgba(244, 239, 226, 0.22);
    }

    .lz-btn-sm {
      font-size: 0.6875rem;
      padding: 0.5rem 1.125rem;
    }

    .lz-btn-md {
      font-size: 0.75rem;
      padding: 0.75rem 1.75rem;
    }

    .lz-btn-lg {
      font-size: 0.8125rem;
      padding: 1rem 2.25rem;
    }

    .lz-btn:disabled,
    .lz-btn[aria-disabled="true"] {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    .lz-btn-loading {
      position: relative;
      color: transparent !important;
    }

    .lz-btn-loading::after {
      content: "";
      position: absolute;
      width: 0.875rem;
      height: 0.875rem;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: lz-spin .8s linear infinite;
      color: var(--text-inverse);
    }

    @keyframes lz-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* =====================================================================
   BADGES
   ===================================================================== */
    .lz-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3125rem;
      font-family: var(--font-body);
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.3125rem 0.75rem;
      border-radius: var(--radius-pill);
      background: var(--surface-elevated);
      color: var(--text-secondary);
      border: 1px solid var(--border-subtle);
    }

    .lz-badge-forest {
      background: var(--surface-inverse);
      color: var(--text-inverse);
      border-color: transparent;
    }

    .lz-badge-gold {
      background: var(--brand-sun-gold-soft);
      color: var(--text-gold);
      border-color: var(--border-gold);
    }

    .lz-badge-teal {
      background: #DEE5E6;
      color: #41585A;
      border-color: var(--brand-ocean-teal);
    }

    .lz-badge-sand {
      background: rgba(194, 165, 126, 0.18);
      color: #6E5634;
      border-color: var(--brand-sand-dune);
    }

    .lz-badge-outline {
      background: transparent;
    }

    .lz-badge-dot::before {
      content: "";
      width: 0.375rem;
      height: 0.375rem;
      border-radius: 50%;
      background: currentColor;
    }

    /* =====================================================================
   INPUTS
   ===================================================================== */
    .lz-field {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .lz-field-label {
      font-family: var(--font-body);
      font-size: 0.625rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .lz-input,
    .lz-select,
    .lz-textarea {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--text-primary);
      padding: 0.875rem 1rem;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      background: var(--surface-elevated);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
      width: 100%;
    }

    .lz-input::placeholder,
    .lz-textarea::placeholder {
      color: var(--text-muted);
      font-style: italic;
    }

    .lz-input:focus,
    .lz-select:focus,
    .lz-textarea:focus {
      border-color: var(--brand-sun-gold);
      box-shadow: var(--focus-ring);
      background: #fff;
    }

    .lz-input:disabled {
      background: var(--surface-base);
      color: var(--text-muted);
      cursor: not-allowed;
    }

    .lz-field-hint {
      font-family: var(--font-body);
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .lz-field.has-error .lz-input,
    .lz-field.has-error .lz-select,
    .lz-field.has-error .lz-textarea {
      border-color: var(--state-error);
    }

    .lz-field.has-error .lz-input:focus,
    .lz-field.has-error .lz-select:focus,
    .lz-field.has-error .lz-textarea:focus {
      border-color: var(--state-error);
      box-shadow: var(--focus-ring-error);
    }

    .lz-field.has-error .lz-field-hint {
      color: var(--state-error);
    }

    .lz-input-with-icon {
      position: relative;
    }

    .lz-input-with-icon .icon {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      pointer-events: none;
    }

    .lz-input-with-icon .lz-input {
      padding-left: 2.75rem;
    }

    .lz-checkbox,
    .lz-radio {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.875rem;
      color: var(--text-primary);
      cursor: pointer;
    }

    .lz-checkbox input,
    .lz-radio input {
      width: 1.125rem;
      height: 1.125rem;
      accent-color: var(--brand-sun-gold);
      cursor: pointer;
    }

    /* =====================================================================
   CARDS — square media, no hover, no shadow
   ===================================================================== */
    .lz-card {
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: block;
      text-decoration: none;
      color: inherit;
    }

    .lz-card-media {
      position: relative;
      aspect-ratio: 1 / 1;
      background: var(--surface-base) center/cover no-repeat;
      border-bottom: 1px solid var(--border-subtle);
    }

    .lz-card-badge {
      position: absolute;
      bottom: var(--sp-3);
      right: var(--sp-3);
    }

    .lz-card-buy {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--sp-4);
    }

    .lz-card-buy .lz-card-price {
      margin-top: 0;
    }

    /* Team — round photos, not cards */
    .lz-people {
      display: flex;
      gap: var(--sp-7);
      flex-wrap: wrap;
    }

    .lz-person {
      margin: 0;
      text-align: center;
      width: 8rem;
    }

    .lz-person-photo {
      width: 7rem;
      height: 7rem;
      border-radius: var(--radius-pill);
      background: center/cover no-repeat;
      margin: 0 auto var(--sp-3);
    }

    .lz-person-name {
      white-space: nowrap;
    }

    .lz-person-role {
      margin-top: 0.25rem;
      white-space: nowrap;
    }

    .lz-card-body {
      padding: var(--sp-5);
    }

    .lz-card-title {
      margin: 0 0 var(--sp-2);
    }

    .lz-card-overline {
      margin-bottom: 0.5rem;
    }

    .lz-card-desc {
      color: var(--text-secondary);
    }

    .lz-card-meta {
      color: var(--text-muted);
      margin-top: var(--sp-3);
      display: flex;
      gap: var(--sp-3);
    }

    .lz-card-price {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      margin-top: var(--sp-3);
      color: var(--text-primary);
    }

    .lz-card-footer {
      padding: var(--sp-3) var(--sp-5);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* =====================================================================
   ALERTS — solid state background, large icon, sans title
   ===================================================================== */
    .lz-alert {
      display: flex;
      gap: var(--sp-4);
      align-items: flex-start;
      padding: var(--sp-4) var(--sp-5);
      border-radius: var(--radius-md);
      color: #fff;
    }

    .lz-alert-icon {
      width: 2.75rem;
      height: 2.75rem;
      flex-shrink: 0;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.18);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      font-weight: 700;
    }

    .lz-alert-body-wrap {
      flex: 1;
      padding-top: 0.125rem;
    }

    .lz-alert-title {
      font-family: var(--font-body);
      font-weight: 700;
      margin: 0 0 0.25rem;
      font-size: 0.9375rem;
      letter-spacing: 0.01em;
    }

    .lz-alert-text {
      line-height: 1.6;
      font-size: 0.875rem;
      opacity: 0.95;
    }

    .lz-alert-info {
      background: var(--state-info);
    }

    .lz-alert-success {
      background: var(--state-success);
    }

    .lz-alert-warning {
      background: var(--state-warning);
    }

    .lz-alert-error {
      background: var(--state-error);
    }

    /* =====================================================================
   SECTION HEADER
   ===================================================================== */
    .lz-section-header {
      margin: 0 auto var(--sp-6);
      text-align: center;
    }

    .lz-section-header.left {
      text-align: left;
      margin-left: 0;
    }

    .lz-section-header .overline {
      margin-bottom: var(--sp-2);
    }

    .lz-section-ornament {
      width: 2.25rem;
      height: 2.25rem;
      margin: var(--sp-3) auto;
    }

    .lz-section-header .title {
      margin: 0 0 var(--sp-3);
    }

    .lz-section-header.left .title {
      margin-bottom: var(--sp-4);
    }

    .lz-section-header .intro {
      color: var(--text-secondary);
      margin: 0;
    }

    /* =====================================================================
   TESTIMONIAL — dark feature, gold quote mark
   ===================================================================== */
    .lz-testimonial {
      background: var(--gradient-forest-depth);
      color: var(--text-inverse);
      border-radius: var(--radius-md);
      padding: var(--sp-8) var(--sp-7);
    }

    .lz-testimonial-mark {
      font-family: var(--font-display);
      font-size: clamp(3.5rem, 2rem + 7vw, 8rem);
      line-height: 1;
      height: 1.75rem;
      color: var(--brand-sun-gold);
      margin: 0 0 var(--sp-3);
      display: block;
    }

    .lz-testimonial-body {
      font-family: var(--font-body);
      font-size: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
      line-height: 1.5;
      font-weight: 400;
      color: var(--text-inverse);
      margin: 0 0 var(--sp-6);
      max-width: 60ch;
    }

    .lz-testimonial-cite {
      display: flex;
      gap: var(--sp-3);
      align-items: center;
    }

    .lz-avatar {
      width: 3rem;
      height: 3rem;
      border-radius: var(--radius-pill);
      background: var(--surface-inverse-elevated) center/cover no-repeat;
      flex-shrink: 0;
    }

    .lz-cite-name {
      font-weight: 700;
      font-size: 0.875rem;
      color: var(--text-inverse);
    }

    .lz-cite-role {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      color: var(--text-inverse-soft);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* Pull quote — centered, coral mark above, no border */
    .lz-pullquote {
      text-align: center;
      max-width: 44rem;
      margin: var(--sp-7) auto;
    }

    .lz-pullquote img {
      width: 2.5rem;
      height: 2.5rem;
      margin: 0 auto var(--sp-4);
      opacity: 0.9;
    }

    .lz-pullquote-text {
      line-height: 1.45;
      font-weight: 400;
      color: var(--text-primary);
      margin: 0;
    }

    /* =====================================================================
   ACCORDION
   ===================================================================== */
    .lz-accordion {
      border-top: 1px solid var(--border-subtle);
    }

    .lz-accordion-item {
      border-bottom: 1px solid var(--border-subtle);
    }

    .lz-accordion-header {
      width: 100%;
      background: transparent;
      border: 0;
      padding: var(--sp-4) 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-family: var(--font-display);
      font-size: var(--text-h4);
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-primary);
      text-align: left;
    }

    .lz-accordion-header::after {
      content: "+";
      font-size: 1.375rem;
      font-weight: 300;
      color: var(--text-gold);
      transition: transform .2s;
    }

    .lz-accordion-item[open] .lz-accordion-header::after {
      content: "−";
    }

    .lz-accordion-body {
      padding: 0 0 var(--sp-4);
      color: var(--text-secondary);
      line-height: 1.7;
      font-size: 0.9375rem;
    }

    /* =====================================================================
   TABS
   ===================================================================== */
    .lz-tabs {
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      gap: var(--sp-5);
    }

    .lz-tab {
      background: transparent;
      border: 0;
      padding: var(--sp-3) 0;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
    }

    .lz-tab[aria-selected="true"] {
      color: var(--text-primary);
      border-bottom-color: var(--border-gold);
    }

    /* =====================================================================
   BREADCRUMBS
   ===================================================================== */
    .lz-breadcrumbs {
      display: flex;
      gap: 0.5rem;
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }

    .lz-breadcrumbs a {
      color: var(--text-secondary);
      text-decoration: none;
    }

    .lz-breadcrumbs span.sep {
      color: var(--brand-sand-dune);
    }

    .lz-breadcrumbs span.current {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* =====================================================================
   PAGINATION
   ===================================================================== */
    .lz-pagination {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .lz-page {
      width: 2.5rem;
      height: 2.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-subtle);
      background: var(--surface-elevated);
      color: var(--text-primary);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
    }

    .lz-page[aria-current="page"] {
      background: var(--text-primary);
      color: var(--text-inverse);
      border-color: var(--text-primary);
    }

    /* =====================================================================
   PROGRESS
   ===================================================================== */
    .lz-progress {
      width: 100%;
      height: 0.375rem;
      background: var(--border-subtle);
      border-radius: var(--radius-pill);
      overflow: hidden;
    }

    .lz-progress-bar {
      height: 100%;
      background: var(--brand-sun-gold);
      border-radius: var(--radius-pill);
      transition: width .3s;
    }

    .lz-progress-forest .lz-progress-bar {
      background: var(--text-primary);
    }

    .lz-goal {
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: var(--sp-6);
    }

    .lz-goal-overline {
      margin-bottom: var(--sp-4);
    }

    .lz-goal-stat {
      display: flex;
      align-items: baseline;
      gap: var(--sp-3);
      margin-bottom: var(--sp-4);
    }

    .lz-goal-foot {
      display: flex;
      justify-content: space-between;
      margin-top: var(--sp-3);
    }

    /* =====================================================================
   STEPS
   ===================================================================== */
    .lz-steps {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }

    .lz-step {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }

    .lz-step-circle {
      width: 2rem;
      height: 2rem;
      border-radius: var(--radius-pill);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--text-muted);
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 0.875rem;
      border: 1px solid var(--border-subtle);
    }

    .lz-step.done .lz-step-circle {
      background: var(--brand-sun-gold);
      color: var(--text-primary);
      border-color: var(--brand-sun-gold);
    }

    .lz-step.active .lz-step-circle {
      background: var(--text-primary);
      color: var(--text-inverse);
      border-color: var(--text-primary);
    }

    .lz-step.active .lz-step-label {
      color: var(--text-primary);
      font-weight: 700;
    }

    .lz-step-line {
      flex: 1;
      height: 1px;
      background: var(--border-subtle);
      min-width: 1.5rem;
    }

    .lz-step-line.done {
      background: var(--brand-sun-gold);
    }

    /* =====================================================================
   TABLE
   ===================================================================== */
    .scroll-x {
      overflow-x: auto;
    }

    .lz-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }

    .lz-table th,
    .lz-table td {
      text-align: left;
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 1px solid var(--border-subtle);
    }

    .lz-table th {
      font-family: var(--font-body);
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      background: var(--surface-elevated);
    }

    .lz-table tr:hover td {
      background: var(--surface-elevated);
    }

    /* =====================================================================
   MODAL
   ===================================================================== */
    .lz-modal {
      background: var(--surface-elevated);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      padding: var(--sp-7);
      max-width: 30rem;
      margin: 0 auto;
      position: relative;
    }

    .lz-modal-close {
      position: absolute;
      top: var(--sp-3);
      right: var(--sp-3);
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--radius-pill);
      background: transparent;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      font-size: 1.125rem;
      color: var(--text-secondary);
    }

    /* =====================================================================
   TOAST
   ===================================================================== */
    .lz-toast {
      display: flex;
      gap: var(--sp-3);
      align-items: center;
      padding: var(--sp-3) var(--sp-4);
      background: var(--surface-inverse);
      color: var(--text-inverse);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-inverse);
      max-width: 23.75rem;
      font-size: 0.875rem;
    }

    .lz-toast-icon {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: var(--radius-pill);
      background: var(--brand-sun-gold);
      color: var(--text-primary);
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8125rem;
      font-weight: 700;
    }

    .lz-toast-msg {
      flex: 1;
    }

    .lz-toast-close {
      background: transparent;
      border: 0;
      color: var(--text-inverse-soft);
      cursor: pointer;
      font-size: 1rem;
    }

    /* =====================================================================
   MASTHEAD (top of document — reflects design comp)
   ===================================================================== */
    .masthead {
      background: var(--surface-base);
      text-align: center;
      padding: var(--sp-9) var(--sp-7);
      border-bottom: 1px solid var(--border-subtle);
    }

    .masthead-mark {
      width: 80%;
      max-width: 40rem;
      height: auto;
      margin: 0 auto var(--sp-5);
    }

    .masthead-wordmark {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 4rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-primary);
      line-height: 1.1;
      margin-bottom: var(--sp-5);
    }

    .masthead-slogan {
      margin-bottom: var(--sp-5);
    }

    .masthead .lz-cp {
      font-size: 1.5rem;
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .masthead-tag {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 1.25rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-gold);
      margin-bottom: var(--sp-6);
    }

    .masthead-essence {
      font-family: var(--font-body);
      font-size: 1.125rem;
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 52ch;
      margin: 0 auto;
    }

    /* =====================================================================
   SCREEN FRAME — frames a section as a page demo, not the real page
   ===================================================================== */
    .lz-screen {
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--surface-white);
      box-shadow: 4px 4px 20px rgb(0 0 0 / 0.3);
    }

    .lz-screen-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: var(--surface-neutral);
      border-bottom: 1px solid var(--border-subtle);
    }

    .lz-screen-bar .dot {
      width: 0.75rem;
      height: 0.75rem;
      border-radius: var(--radius-pill);
      background: var(--border-strong);
    }

    .lz-screen-url {
      margin-left: 0.75rem;
      flex: 1;
      font-family: ui-monospace, monospace;
      font-size: 0.75rem;
      color: var(--text-muted);
      background: var(--surface-white);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-pill);
      padding: 0.25rem 0.875rem;
    }

    .lz-screen-body {
      display: block;
    }

    /* =====================================================================
   HERO — full-bleed photo, frosted forest text panel
   ===================================================================== */
    .lz-hero {
      background: url('assets/island-hero-wide-2x.webp') center/cover;
      padding: var(--sp-8) var(--sp-7);
      min-height: 30rem;
      display: flex;
      align-items: center;
    }

    .lz-hero-panel {
      background: rgb(244 239 226 / 0.85);
      backdrop-filter: blur(0.875rem);
      -webkit-backdrop-filter: blur(0.875rem);
      border: 1px solid rgb(31 58 52 / 0.12);
      border-radius: var(--radius-md);
      padding: var(--sp-7);
      max-width: 34rem;
      color: var(--text-primary);
      text-align: center;
    }

    .lz-hero-overline {
      color: var(--text-gold);
      margin-bottom: var(--sp-3);
    }

    .lz-hero-headline {
      font-family: var(--font-display);
      font-size: var(--text-display-2);
      font-weight: 500;
      line-height: 1.05;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 0 0 var(--sp-4);
      color: var(--text-primary);
    }

    .lz-hero-sub {
      font-family: var(--font-body);
      font-size: var(--text-body-lg);
      line-height: 1.7;
      margin: 0 0 var(--sp-5);
      color: var(--text-primary);
    }

    .lz-hero-ctas {
      display: flex;
      gap: var(--sp-3);
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;;
    }

    /* =====================================================================
   NAVIGATION + dropdown
   ===================================================================== */
    .lz-nav-shell {
      position: relative;
    }

    .lz-nav {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--sp-4) var(--sp-5);
      background: var(--surface-inverse);
      border-bottom: 1px solid var(--border-inverse);
      color: var(--text-inverse);
    }

    /* Wrapper is transparent to layout on desktop; becomes the dropdown
       panel on mobile. */
    .lz-nav-menu {
      display: contents;
    }

    .lz-nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 0.3rem;
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
    }

    .lz-nav-toggle span {
      display: block;
      width: 1.5rem;
      height: 2px;
      background: currentColor;
    }

    .lz-nav.lz-nav-light {
      background: var(--surface-elevated);
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-subtle);
    }

    .lz-nav-logo {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-h4);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: inherit;
      text-decoration: none;
    }

    .lz-nav-links {
      display: flex;
      gap: var(--sp-6);
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .lz-nav-links>li {
      position: relative;
    }

    .lz-nav-links a,
    .lz-nav-links button {
      color: inherit;
      text-decoration: none;
      background: transparent;
      border: 0;
      padding: 0;
      letter-spacing: inherit;
      text-transform: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .lz-nav-links .caret {
      font-size: 0.5rem;
    }

    .lz-dropdown {
      position: absolute;
      top: calc(100% + 0.875rem);
      left: 50%;
      transform: translateX(-50%);
      width: 48rem;
      background: var(--surface-white);
      color: var(--text-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: var(--sp-6);
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s;
    }

    .lz-dropdown::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -0.875rem;
      height: 0.875rem;
    }

    .lz-nav-has-dropdown:hover>.lz-dropdown,
    .lz-nav-has-dropdown:focus-within>.lz-dropdown {
      opacity: 1;
      pointer-events: auto;
    }

    .lz-dropdown-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr 1fr;
      gap: var(--sp-5);
    }

    .lz-dropdown-feature {
      border-right: 1px solid var(--border-subtle);
      padding-right: var(--sp-5);
    }

    .lz-dropdown-feature .feature-img {
      aspect-ratio: 4 / 3;
      background: var(--gradient-forest-teal);
      border-radius: var(--radius-sm);
      margin-bottom: var(--sp-3);
    }

    .lz-dropdown h6 {
      font-family: var(--font-body);
      font-size: 0.625rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
      color: var(--text-muted);
      margin: 0 0 var(--sp-3);
    }

    .lz-dropdown ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .lz-dropdown li {
      margin-bottom: var(--sp-2);
    }

    .lz-dropdown li a {
      font-family: var(--font-body);
      font-size: 0.875rem;
      color: var(--text-primary);
      text-decoration: none;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 500;
      display: block;
      opacity: 1;
    }

    .lz-dropdown li a .meta {
      display: block;
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 400;
      margin-top: 0.125rem;
    }

    /* =====================================================================
   EDITORIAL SPREAD — variants
   ===================================================================== */
    .lz-spread {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-5);
      align-items: center;
    }

    .lz-spread.reversed {
      direction: rtl;
    }

    .lz-spread.reversed>* {
      direction: ltr;
    }

    .lz-spread-media {
      position: relative;
      aspect-ratio: 3 / 2;
      border-radius: var(--radius-md);
      background: var(--gradient-forest-teal);
    }

    .lz-spread-badge {
      position: absolute;
      bottom: var(--sp-3);
      right: var(--sp-3);
    }

    .lz-spread-caption {
      font-family: var(--font-body);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-top: var(--sp-2);
      font-style: italic;
    }

    .lz-spread-text>*+* {
      margin-top: var(--sp-4);
    }

    .lz-spread-wide {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      min-height: 26rem;
      display: flex;
      align-items: flex-end;
      background: var(--gradient-scrim), var(--gradient-reef);
      padding: var(--sp-7);
      color: var(--text-inverse);
    }

    .lz-spread-wide-text>*+* {
      margin-top: var(--sp-4);
    }

    .lz-spread-wide .lz-overline {
      color: var(--brand-sun-gold);
    }

    /* =====================================================================
   DONATION
   ===================================================================== */
    .lz-donation {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-3);
    }

    .lz-donation-amount {
      padding: var(--sp-4);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      background: var(--surface-elevated);
      cursor: pointer;
      text-align: center;
      transition: border-color .2s, background .2s;
    }

    .lz-donation-amount:hover {
      border-color: var(--border-gold);
    }

    .lz-donation-amount[aria-pressed="true"] {
      border-color: var(--border-gold);
      background: var(--brand-sun-gold-soft);
      border-width: 2px;
      padding: calc(var(--sp-4) - 1px);
    }

    .lz-donation-amount .amt {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 500;
      color: var(--text-primary);
      letter-spacing: 0.03em;
    }

    .lz-donation-amount .desc {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      color: var(--text-primary);
      margin-top: 0.25rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 600;
    }

    /* =====================================================================
   CTA BANNER
   ===================================================================== */
    .lz-cta-banner {
      background: var(--surface-inverse);
      color: var(--text-inverse);
      padding: var(--sp-8) var(--sp-7);
      border-radius: var(--radius-md);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .lz-cta-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--gradient-gold-glow);
      pointer-events: none;
    }

    .lz-cta-banner-overline {
      color: var(--brand-sun-gold);
      margin-bottom: var(--sp-5);
      position: relative;
      display: inline-block;
      font-size: 0.8125rem;
    }

    .lz-cta-banner-title {
      font-family: var(--font-display);
      font-size: var(--text-h1);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 0 0 var(--sp-3);
      line-height: 1.15;
      position: relative;
      color: var(--text-inverse);
    }

    .lz-cta-banner-body {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      opacity: 0.88;
      max-width: 50ch;
      margin: 0 auto var(--sp-5);
      line-height: 1.7;
      position: relative;
      color: var(--text-inverse);
    }

    .lz-cta-banner .row {
      position: relative;
      justify-content: center;
    }

    /* =====================================================================
   FOOTER
   ===================================================================== */
    .lz-footer {
      background: var(--surface-inverse);
      color: var(--text-inverse);
      padding: var(--sp-8) var(--sp-7) var(--sp-6);
    }

    .lz-footer-cols {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: var(--sp-6);
    }

    .lz-footer h5 {
      font-family: var(--font-body);
      font-size: 0.625rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
      margin: 0 0 var(--sp-4);
      color: var(--brand-sun-gold);
    }

    .lz-footer ul {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.875rem;
    }

    .lz-footer li {
      margin-bottom: var(--sp-2);
    }

    .lz-footer li a {
      color: var(--text-inverse-soft);
      text-decoration: none;
    }

    .lz-footer-brand {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.25rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: var(--sp-3);
    }

    .lz-footer-blurb {
      font-family: var(--font-body);
      font-size: 0.875rem;
      color: var(--text-inverse-soft);
      line-height: 1.6;
      max-width: 32ch;
      margin: 0;
    }

    .lz-footer-social {
      display: flex;
      gap: 0.875rem;
      margin-top: var(--sp-5);
      font-size: 0.6875rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lz-footer-social a {
      color: var(--text-inverse-soft);
      text-decoration: none;
    }

    .lz-footer-legal {
      margin-top: var(--sp-6);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--border-inverse);
      font-size: 0.6875rem;
      opacity: 0.55;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-inverse);
    }

    /* =====================================================================
   BRAND — palette, essence, iconography
   ===================================================================== */
    .brand-palette {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: var(--sp-4);
      background: var(--surface-neutral);
      padding: var(--sp-5);
      border-radius: var(--radius-md);
    }

    .brand-palette-tile {
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid var(--border-subtle);
      background: var(--surface-white);
    }

    .brand-palette-tile .swatch {
      height: 8rem;
      display: flex;
      align-items: flex-end;
      padding: var(--sp-3);
    }

    /* Brand swatch fills + hex label color (inherited by .hex).
       Two brand fg tokens cover four swatches; teal uses white (~4.1:1,
       accepted — never carries body text in product). */
    .brand-swatch-deep-forest { background: var(--brand-deep-forest); color: var(--text-inverse); }
    .brand-swatch-ocean-teal  { background: var(--brand-ocean-teal);  color: var(--surface-white); }
    .brand-swatch-sand-dune   { background: var(--brand-sand-dune);   color: var(--text-primary); }
    .brand-swatch-sun-gold    { background: var(--brand-sun-gold);    color: var(--text-primary); }
    .brand-swatch-canvas      { background: var(--brand-canvas);      color: var(--text-primary); }

    .brand-palette-tile .swatch .hex {
      font-family: ui-monospace, monospace;
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
    }

    .brand-palette-tile .name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 0.875rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-primary);
      padding: var(--sp-3) var(--sp-3) 0;
    }

    /* Contrast badge — rendered on the white tile rather than the swatch,
       so it stays readable regardless of the swatch color. */
    .brand-palette-tile .wcag {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-family: ui-monospace, monospace;
      font-size: 0.625rem;
      letter-spacing: 0.03em;
      color: var(--text-muted);
      padding: 0 var(--sp-3) var(--sp-3);
    }

    .icon-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-5);
    }

    .icon-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-pill);
      border: 2px solid var(--text-primary);
    }

    .icon-circle img {
      width: 60%;
      height: 60%;
    }

    /* Icon size scale — applied to an icon img or an .icon-circle */
    .icon-lg { width: 4.5rem; height: 4.5rem; }
    .icon-md { width: 3rem; height: 3rem; }
    .icon-sm { width: 2rem; height: 2rem; }
    .icon-inline { width: 1.1rem; height: 1.1rem; }

    .icon-tile {
      padding: var(--sp-6) var(--sp-5);
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      text-align: center;
    }

    .icon-size-row {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: var(--sp-3);
      margin-bottom: var(--sp-5);
    }

    .icon-size-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-2);
    }

    .icon-size-item .lbl {
      font-family: ui-monospace, monospace;
      font-size: 0.5625rem;
      color: var(--text-muted);
    }

    .icon-tile .icon-name {
      font-family: var(--font-display);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
    }

    .icon-tile .icon-meaning {
      font-family: var(--font-body);
      font-size: 0.75rem;
      color: var(--text-muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* =====================================================================
   TOKENS — color
   ===================================================================== */
    #color {
      background: var(--surface-neutral);
    }

    .token-color-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      gap: var(--sp-4);
    }

    .token-color {
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--surface-white);
    }

    .token-color .swatch {
      height: 5.5rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 0.125rem;
      padding: var(--sp-2) var(--sp-3);
    }

    .token-color .swatch .hex {
      font-family: ui-monospace, monospace;
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    .token-color .swatch .vname {
      font-family: ui-monospace, monospace;
      font-size: 0.625rem;
      letter-spacing: 0.02em;
      opacity: 0.8;
    }

    .token-color .body {
      padding: var(--sp-3);
    }

    .token-color .name {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.8125rem;
      color: var(--text-primary);
      margin-bottom: 0.125rem;
    }

    .token-color .usage {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* TOKENS — typography */
    .type-group {
      margin-bottom: var(--sp-6);
    }

    .type-item {
      padding: var(--sp-4) 0;
      border-bottom: 1px dashed var(--border-subtle);
    }

    .type-item:last-child {
      border-bottom: 0;
    }

    .type-item .specimen {
      margin-bottom: var(--sp-3);
    }

    .type-meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-4);
      font-family: ui-monospace, monospace;
      font-size: 0.6875rem;
      color: var(--text-muted);
    }

    .type-meta .cls {
      color: var(--text-primary);
      font-weight: 600;
    }

    .type-meta .var {
      color: var(--text-gold);
    }

    /* TOKENS — radii */
    .radii-grid {
      display: flex;
      gap: var(--sp-6);
      flex-wrap: wrap;
    }

    .radii-item {
      text-align: center;
    }

    .radii-item .shape {
      width: 5rem;
      height: 5rem;
      background: var(--text-primary);
      margin: 0 auto var(--sp-3);
    }

    .radii-item .radii-value {
      font-family: ui-monospace, monospace;
      font-size: 0.75rem;
      color: var(--text-primary);
      font-weight: 600;
    }

    .radii-item .radii-var {
      font-family: ui-monospace, monospace;
      font-size: 0.6875rem;
      color: var(--text-gold);
      margin-top: 0.125rem;
    }

    .radii-item .radii-usage {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
      max-width: 9rem;
    }

    /* VARIABLES reference table */
    .var-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8125rem;
    }

    .var-table th,
    .var-table td {
      text-align: left;
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--border-subtle);
      vertical-align: top;
    }

    .var-table th {
      font-family: var(--font-body);
      font-size: 0.625rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      font-weight: 600;
    }

    .var-table td.token {
      font-family: ui-monospace, monospace;
      color: var(--text-primary);
      font-weight: 600;
      white-space: nowrap;
    }

    .var-table td.value {
      font-family: ui-monospace, monospace;
      color: var(--text-gold);
      white-space: nowrap;
    }

    .var-table td.usage {
      color: var(--text-secondary);
    }

    .var-table .group-row td {
      background: var(--surface-elevated);
      font-family: var(--font-body);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.6875rem;
      color: var(--text-primary);
    }

    .vs-chip {
      display: inline-block;
      width: 1.5rem;
      height: 1.1rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgb(0 0 0 / 0.12);
      vertical-align: middle;
      margin-right: 0.5rem;
    }

    .vs-shape {
      display: inline-block;
      width: 1.1rem;
      height: 1.1rem;
      background: var(--text-primary);
      vertical-align: middle;
      margin-right: 0.5rem;
    }

    .vs-bar {
      display: inline-block;
      height: 0.6875rem;
      background: var(--brand-sun-gold);
      border-radius: 1px;
      vertical-align: middle;
      min-width: 1px;
      margin-right: 0.5rem;
    }

    .vs-font {
      color: var(--text-primary);
      margin-right: 0.5rem;
    }

    /* Lorem 2-col */
    .col-2 {
      column-count: 2;
      column-gap: var(--sp-6);
      color: var(--text-secondary);
      line-height: 1.7;
      font-size: 0.9375rem;
    }

    .col-2 p {
      margin: 0 0 var(--sp-3);
      break-inside: avoid;
    }

    /* =====================================================================
   ACTIVITY GRID — "what we do"
   ===================================================================== */
    .lz-activity-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }

    .lz-activity {
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: var(--sp-6);
    }

    .lz-activity-icon {
      width: 3rem;
      height: 3rem;
      margin-bottom: var(--sp-4);
    }

    .lz-activity-overline {
      margin-bottom: var(--sp-2);
    }

    .lz-activity-title {
      margin-bottom: var(--sp-3);
    }

    .lz-activity-desc {
      color: var(--text-secondary);
      margin-bottom: var(--sp-4);
    }

    /* =====================================================================
   IMPACT STATS BAND
   ===================================================================== */
    .lz-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
      gap: var(--sp-6);
      background: var(--surface-inverse);
      border-radius: var(--radius-md);
      padding: var(--sp-7);
      text-align: center;
    }

    .lz-stat {
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
    }

    .lz-stat-label {
      color: var(--text-inverse-soft);
    }

    /* =====================================================================
   PROCESS — how it works
   ===================================================================== */
    .lz-process {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      gap: var(--sp-6);
    }

    .lz-process-step {
      text-align: center;
    }

    .lz-process-num {
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 auto var(--sp-4);
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-gold);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-gold);
    }

    /* Inverse: filled gold circle, number knocked out to the page background */
    .lz-process-num-filled {
      background: var(--border-gold);
      border-color: var(--border-gold);
      color: var(--surface-base);
    }

    .lz-process-title {
      margin-bottom: var(--sp-2);
    }

    .lz-process-desc {
      color: var(--text-secondary);
    }

    /* =====================================================================
   TIMELINE — history
   ===================================================================== */
    .lz-timeline {
      border-left: 1px solid var(--border-strong);
      margin-left: var(--sp-3);
    }

    .lz-timeline-year {
      margin-bottom: var(--sp-2);
    }

    .lz-timeline-item {
      position: relative;
      padding-left: var(--sp-5);
      display: flex;
      flex-direction: column;
    }

    .lz-timeline-item + .lz-timeline-item {
      margin-top: var(--sp-5);
    }

    .lz-timeline-item::before {
      content: "";
      position: absolute;
      left: -0.4375rem;
      top: 0.25rem;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: var(--radius-pill);
      background: var(--brand-sun-gold);
      border: 2px solid var(--surface-elevated);
    }

    .lz-timeline-desc {
      color: var(--text-secondary);
    }

    /* =====================================================================
   EVENTS / PROGRAMS FEED
   ===================================================================== */
    .lz-events {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
    }

    .lz-event {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: var(--sp-5);
      align-items: center;
      padding: var(--sp-4) var(--sp-5);
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
    }

    .lz-event-date {
      width: 3.5rem;
      text-align: center;
      flex-shrink: 0;
    }

    .lz-event-day {
      line-height: 1;
    }

    .lz-event-meta {
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    /* =====================================================================
   MEMBERSHIP / PRICING TIERS
   ===================================================================== */
    .lz-tiers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
    }

    .lz-tier {
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: var(--sp-6);
      display: flex;
      flex-direction: column;
    }

    .lz-tier.featured {
      border: 2px solid var(--border-gold);
      padding: calc(var(--sp-6) - 1px);
    }

    .lz-tier-name {
      margin: var(--sp-2) 0 var(--sp-3);
    }

    .lz-tier-price {
      display: flex;
      align-items: baseline;
      gap: 0.375rem;
      margin-bottom: var(--sp-5);
    }

    .lz-tier-features {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--sp-5);
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
    }

    .lz-tier-features li {
      display: flex;
      gap: var(--sp-3);
      align-items: flex-start;
      color: var(--text-secondary);
      font-size: 0.875rem;
      line-height: 1.5;
    }

    .lz-tier-features li::before {
      content: "✓";
      color: var(--text-gold);
      font-weight: 700;
    }

    .lz-tier .lz-btn {
      margin-top: auto;
    }

    /* =====================================================================
   CHECKLIST — gold check badge, hairline-divided rows
   ===================================================================== */
    .lz-checklist {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .lz-checklist li {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      padding: var(--sp-4) 0;
      border-bottom: 1px solid var(--border-subtle);
      font-family: var(--font-body);
      font-size: var(--text-body-lg);
      color: var(--text-primary);
      line-height: 1.5;
    }

    .lz-checklist li:last-child {
      border-bottom: 0;
    }

    /* Incomplete: open gold ring */
    .lz-checklist li::before {
      content: "";
      flex-shrink: 0;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: var(--radius-pill);
      border: 2px solid var(--brand-sun-gold);
      color: var(--brand-deep-forest);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: 700;
    }

    /* Completed: forest check badge, dimmed + struck-through label */
    .lz-checklist li.done {
      color: var(--text-muted);
    }

    .lz-checklist li.done span {
      text-decoration: line-through;
    }

    .lz-checklist li.done::before {
      content: "✓";
      background: var(--surface-inverse);
      border-color: var(--surface-inverse);
      color: var(--text-inverse);
    }

    /* =====================================================================
   TRUST / TRANSPARENCY BADGES
   ===================================================================== */
    .lz-trust {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
      gap: var(--sp-5);
    }

    .lz-trust-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-3);
      text-align: center;
    }

    .lz-trust-seal {
      width: 4rem;
      height: 4rem;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-gold);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface-elevated);
    }

    .lz-trust-label {
      color: var(--text-secondary);
    }

    /* =====================================================================
   BLOG INDEX — featured + grid
   ===================================================================== */
    .lz-blog-featured {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: var(--sp-6);
      align-items: center;
      margin-bottom: var(--sp-7);
    }

    .lz-blog-featured-media {
      aspect-ratio: 3 / 2;
      border-radius: var(--radius-md);
      background: var(--gradient-forest-teal);
    }

    .lz-blog-featured-overline {
      margin-bottom: var(--sp-2);
    }

    .lz-blog-featured-title {
      margin-bottom: var(--sp-3);
    }

    .lz-blog-featured-desc {
      color: var(--text-secondary);
      margin-bottom: var(--sp-4);
    }

    /* =====================================================================
   COLLECTION GRID — filter bar + products
   ===================================================================== */
    .lz-collection-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--sp-4);
      flex-wrap: wrap;
      padding-bottom: var(--sp-4);
      margin-bottom: var(--sp-5);
      border-bottom: 1px solid var(--border-subtle);
    }

    .lz-collection-filters {
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap;
    }

    .lz-filter-chip {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.4rem 0.9rem;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-subtle);
      background: var(--surface-elevated);
      color: var(--text-secondary);
      cursor: pointer;
    }

    .lz-filter-chip[aria-pressed="true"] {
      background: var(--text-primary);
      color: var(--text-inverse);
      border-color: var(--text-primary);
    }

    .lz-collection-sort {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }

    .lz-collection-sort .lz-select {
      width: auto;
    }

    /* =====================================================================
   PRODUCT DETAIL — gallery + buy box
   ===================================================================== */
    .lz-product {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-7);
      align-items: start;
    }

    .lz-product-main {
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-md);
      background: var(--gradient-forest-teal);
    }

    .lz-product-thumbs {
      display: flex;
      gap: var(--sp-3);
      margin-top: var(--sp-3);
    }

    .lz-product-thumb {
      width: 4.5rem;
      height: 4.5rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
    }

    .lz-product-thumb[aria-current="true"] {
      border-color: var(--border-gold);
      border-width: 2px;
    }

    .lz-product-overline {
      margin-bottom: var(--sp-2);
    }

    .lz-product-title {
      margin-bottom: var(--sp-3);
    }

    .lz-product-price {
      margin-bottom: var(--sp-5);
    }

    .lz-product-desc {
      color: var(--text-secondary);
      margin-bottom: var(--sp-5);
    }

    .lz-size-label {
      margin-bottom: var(--sp-2);
    }

    .lz-size-options {
      display: flex;
      gap: var(--sp-2);
      flex-wrap: wrap;
      margin-bottom: var(--sp-5);
    }

    .lz-size {
      min-width: 3rem;
      padding: 0.625rem 0.875rem;
      text-align: center;
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .lz-size[aria-pressed="true"] {
      border-color: var(--border-gold);
      background: var(--brand-sun-gold-soft);
    }

    /* =====================================================================
   CONTACT — form + info
   ===================================================================== */
    .lz-contact {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--sp-7);
      align-items: start;
    }

    .lz-contact-form {
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
    }

    .lz-contact-info {
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
    }

    .lz-contact-item-label {
      margin-bottom: 0.25rem;
    }

    .lz-contact-item-value {
      color: var(--text-secondary);
    }

    /* =====================================================================
   NEWSLETTER BAND
   ===================================================================== */
    .lz-newsletter {
      background: var(--surface-inverse);
      color: var(--text-inverse);
      border-radius: var(--radius-md);
      padding: var(--sp-8) var(--sp-7);
      text-align: center;
    }

    .lz-newsletter-overline {
      color: var(--brand-sun-gold);
      margin-bottom: var(--sp-3);
    }

    .lz-newsletter-title {
      color: var(--text-inverse);
      margin-bottom: var(--sp-3);
    }

    .lz-newsletter-sub {
      color: var(--text-inverse-soft);
      max-width: 44ch;
      margin: 0 auto var(--sp-5);
    }

    .lz-newsletter-form {
      display: flex;
      gap: var(--sp-3);
      max-width: 30rem;
      margin: 0 auto;
    }

    .lz-newsletter-form .lz-input {
      background: rgb(244 239 226 / 0.08);
      color: var(--text-inverse);
      border-color: rgb(244 239 226 / 0.2);
    }

    /* =====================================================================
   PAGE LAYOUT — container + vertical rhythm for real pages
   ===================================================================== */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: clamp(var(--sp-4), 5vw, var(--sp-8));
    }

    .page {
      display: flex;
      flex-direction: column;
      gap: var(--sp-9);
      padding-block: var(--sp-9);
    }

    /* Full-width section bands — flush, alternating backgrounds */
    .band {
      width: 100%;
      padding-block: var(--sp-9);
    }

    .band-elevated {
      background: var(--surface-elevated);
    }

    .band-inverse {
      background: var(--surface-inverse);
      color: var(--text-inverse);
    }

    /* Opt-in divider between same-surface bands */
    .band-divider {
      border-top: 1px solid var(--border-strong);
    }

    /* Home hero — capped height so it does not balloon on tall screens */
    .lz-hero-full {
      min-height: 42rem;
    }

    /* Full-bleed photographic section, type over the image */
    .photo-band {
      position: relative;
      display: flex;
      align-items: flex-end;
      min-height: 30rem;
      padding: var(--sp-9) var(--sp-7);
      color: var(--text-inverse);
      background: center / cover no-repeat;
    }

    .photo-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--gradient-scrim);
      pointer-events: none;
    }

    .photo-band-inner {
      position: relative;
      max-width: 44rem;
    }

    .photo-band-tall {
      min-height: 42rem;
    }

    .photo-band-center {
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .photo-band-center::before {
      background: rgb(31 58 52 / 0.5);
    }

    .photo-band-center .photo-band-inner {
      margin-inline: auto;
    }

    /* Image tile — photo with a label over it */
    .lz-tile {
      position: relative;
      display: flex;
      align-items: flex-end;
      min-height: 20rem;
      padding: var(--sp-5);
      border-radius: var(--radius-md);
      overflow: hidden;
      color: var(--text-inverse);
      background: center / cover no-repeat;
      text-decoration: none;
    }

    .lz-tile::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--gradient-scrim);
    }

    .lz-tile-body {
      position: relative;
    }

    .lz-tile-title {
      color: var(--text-inverse);
      margin-bottom: var(--sp-2);
    }

    .lz-tile-text {
      color: var(--text-inverse-soft);
    }

    /* Support columns — gold rule, text only */
    .lz-support-item {
      border-top: 2px solid var(--border-gold);
      padding-top: var(--sp-4);
    }

    /* =====================================================================
   RESPONSIVE — collapse multi-column layouts on small screens
   ===================================================================== */
    @media (max-width: 767px) {

      .grid-2,
      .grid-3,
      .grid-4,
      .icon-grid,
      .lz-spread,
      .lz-activity-grid,
      .lz-tiers,
      .lz-footer-cols,
      .lz-product,
      .lz-contact,
      .lz-where,
      .lz-blog-featured {
        grid-template-columns: 1fr;
      }

      .lz-spread.reversed {
        direction: ltr;
      }

      .lz-nav-toggle {
        display: flex;
      }

      .lz-nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
        padding: var(--sp-4) var(--sp-5);
        background: var(--surface-inverse);
        border-bottom: 1px solid var(--border-inverse);
        z-index: 30;
      }

      .lz-nav-light .lz-nav-menu {
        background: var(--surface-elevated);
        border-bottom-color: var(--border-subtle);
      }

      .lz-nav.is-open .lz-nav-menu {
        display: flex;
      }

      .lz-nav-links {
        flex-direction: column;
        gap: var(--sp-3);
      }

      .col-2 {
        column-count: 1;
      }

      .lz-spread-wide {
        padding: var(--sp-5);
      }

      .lz-hero,
      .lz-hero-full,
      .photo-band,
      .photo-band-tall {
        min-height: 26rem;
      }

      .lz-hero-headline {
        font-size: var(--text-h1);
      }

      .lz-dropdown {
        width: 100%;
        left: 0;
        transform: none;
      }
    }

    /* sm (640px) — phone layouts */
    @media (max-width: 639px) {

      .lz-modal {
        padding: var(--sp-5);
      }

      .lz-steps-fit .lz-step-label {
        display: none;
      }

      .lz-steps-fit .lz-step.active .lz-step-label {
        display: inline;
      }

      .lz-event {
        grid-template-columns: auto 1fr;
        gap: var(--sp-4);
      }

      .lz-event>div {
        min-width: 0;
      }

      .lz-event>button {
        grid-column: 1 / -1;
      }
    }

    /* Footer doubling as the closing CTA */
    .lz-footer-cta {
      max-width: 50rem;
      margin: 0 auto var(--sp-7);
      padding-bottom: var(--sp-7);
      border-bottom: 1px solid var(--border-inverse);
      text-align: center;
    }

    .lz-footer-cta-overline {
      color: var(--brand-sun-gold);
      display: inline-block;
      margin-bottom: var(--sp-4);
    }

    .lz-footer-cta-title {
      color: var(--text-inverse);
      margin-bottom: var(--sp-3);
    }

    .lz-footer-cta-body {
      color: var(--text-inverse-soft);
      max-width: 46ch;
      margin: 0 auto var(--sp-5);
    }

    /* =====================================================================
   HERO — centered, embedded logo lockup
   ===================================================================== */
    .lz-hero-centered {
      position: relative;
      min-height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
      background: url('assets/island-hero-wide-2x.webp') center / cover no-repeat;
    }

    .lz-hero-centered::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(rgb(31 58 52 / 0.35), rgb(31 58 52 / 0.55));
    }

    .lz-hero-centered-inner {
      position: relative;
      max-width: 56rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-4);
    }

    .lz-hero-centered-logo {
      width: clamp(24rem, 50vw, 40rem);
      height: auto;
      display: block;
    }

    .lz-hero-centered-tagline {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--sp-3);
      font-family: var(--font-body);
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--brand-sun-gold);
      margin: 0;
      font-size: clamp(0.9rem, 3vw, 1.1rem);
    }

    .lz-hero-centered-tag {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .lz-hero-centered-tag svg {
      height: clamp(1.1rem, 3.5vw, 1.5rem);
      width: auto;
    }

    .lz-hero-centered-sub {
      font-family: var(--font-body);
      font-size: clamp(1.15rem, 3.5vw, 1.35rem);
      line-height: 1.5;
      color: var(--text-inverse);
      max-width: 44rem;
      margin: 0;
    }

    .lz-hero-centered-ctas {
      display: flex;
      gap: var(--sp-3);
      flex-wrap: wrap;
      justify-content: center;
    }

    .lz-border-b-gold {
      border-bottom: 2px solid var(--border-gold);
    }