/*
Theme Name: DECIYA Living Decor
Theme URI: https://deciya.in
Author: DECIYA Living Decor
Author URI: https://deciya.in
Description: Premium launch landing site for DECIYA — quiet luxury wall organizers in solid wood and matte black metal. Single-page theme designed for the launch of KeyDock V2, AirShelf V2 and Grid V3.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deciya
Tags: one-page, e-commerce, minimal, custom-colors, custom-menu, footer-widgets, full-width-template
*/

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

  :root {
    --beige:        #EDE8DF;
    --off-white:    #F5F1EC;
    --walnut:       #251409;
    --wood:         #3B1F0F;
    --brass:        #7A6438;
    --taupe:        #B8AFA2;
    --black:        #0A0908;

    --ink:          #251409;            /* primary text   */
    --ink-soft:     rgba(37,20,9,.66);  /* secondary text */
    --ink-mute:     rgba(37,20,9,.46);  /* tertiary text  */
    --line:         rgba(37,20,9,.16);
    --line-soft:    rgba(37,20,9,.10);

    --serif:        'Cormorant Garamond', 'Times New Roman', serif;
    --sans:         'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;

    --container:    1280px;
    --gutter:       clamp(20px, 4vw, 56px);
  }

  html { background: var(--beige); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body {
    font-family: var(--sans);
    font-weight: 300;
    color: var(--ink);
    background: var(--beige);
    line-height: 1.6;
    text-wrap: pretty;
    overflow-x: hidden;
  }
  body.lock { overflow: hidden; }

  img { max-width: 100%; display: block; }
  a   { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  ::selection { background: var(--walnut); color: var(--beige); }

  /* ── LAYOUT PRIMITIVES ─────────────────────────────────── */
  .wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .rule { height: 1px; background: var(--line); width: 100%; }

  .serif      { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; }
  .eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: var(--brass);
    flex-shrink: 0;
  }

  h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em; line-height: 1.02; color: var(--ink); }

  .h-display { font-size: clamp(48px, 7.2vw, 112px); line-height: .96; letter-spacing: -.025em; }
  .h-section { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
  .h-card    { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }

  .lede   { color: var(--ink-soft); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; max-width: 52ch; }
  .muted  { color: var(--ink-soft); }
  .small  { font-size: 12px; color: var(--ink-mute); letter-spacing: .04em; }
  .label  { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }

  /* ── BUTTONS ───────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px;
    font-family: var(--sans); font-size: 11.5px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
    cursor: pointer;
  }
  .btn-primary {
    background: var(--walnut); color: var(--off-white);
    border-color: var(--walnut);
  }
  .btn-primary:hover { background: var(--black); border-color: var(--black); transform: translateY(-1px); }

  .btn-ghost {
    background: transparent; color: var(--ink);
    border-color: var(--walnut);
  }
  .btn-ghost:hover { background: var(--walnut); color: var(--off-white); transform: translateY(-1px); }

  .btn .arrow {
    display: inline-block; width: 14px; height: 1px; background: currentColor; position: relative;
    transition: width .25s ease;
  }
  .btn .arrow::after {
    content: ''; position: absolute; right: 0; top: 50%;
    width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }
  .btn:hover .arrow { width: 22px; }

  .link-inline {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
    padding-bottom: 4px; border-bottom: 1px solid var(--line);
    transition: border-color .25s ease, color .25s ease;
  }
  .link-inline:hover { border-color: var(--walnut); color: var(--wood); }

  /* ── ANNOUNCEMENT BAR ──────────────────────────────────── */
  .announce {
    background: var(--walnut); color: var(--off-white);
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    text-align: center; padding: 11px var(--gutter);
    font-weight: 400;
  }
  .announce .dot { display: inline-block; width: 3px; height: 3px; background: var(--brass); border-radius: 50%; vertical-align: middle; margin: 0 14px; }

  /* ── HEADER ────────────────────────────────────────────── */
  header.site {
    position: sticky; top: 0; z-index: 50;
    background: rgba(237,232,223,.88);
    backdrop-filter: saturate(1.3) blur(14px);
    -webkit-backdrop-filter: saturate(1.3) blur(14px);
    border-bottom: 1px solid var(--line-soft);
    transition: background .3s ease, border-color .3s ease;
  }
  header.site.scrolled { background: rgba(237,232,223,.96); border-bottom-color: var(--line); }
  .nav-row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 24px;
    min-height: 84px;
  }
  .brand {
    font-family: var(--serif);
    font-size: 22px; font-weight: 400;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--walnut);
    display: inline-flex; align-items: baseline; gap: 6px;
  }
  .brand .dot-brass { color: var(--brass); }

  nav.primary {
    display: flex; gap: 36px; justify-content: center;
  }
  nav.primary a {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft); padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  nav.primary a:hover, nav.primary a.active { color: var(--ink); border-bottom-color: var(--brass); }

  .header-cta { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
  .shop-soon {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--off-white); background: var(--walnut);
    padding: 12px 20px;
    transition: background .25s ease;
  }
  .shop-soon:hover { background: var(--black); }
  .shop-soon::before { content: ''; width: 6px; height: 6px; background: var(--brass); border-radius: 50%; }

  .menu-toggle { display: none; width: 44px; height: 44px; place-items: center; margin-left: 8px; }
  .menu-toggle span {
    display: block; width: 22px; height: 1px; background: var(--ink); position: relative;
    transition: transform .3s ease, background .3s ease;
  }
  .menu-toggle span::before, .menu-toggle span::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 1px; background: var(--ink);
    transition: transform .3s ease, top .3s ease;
  }
  .menu-toggle span::before { top: -7px; }
  .menu-toggle span::after  { top:  7px; }
  .menu-toggle.open span { background: transparent; }
  .menu-toggle.open span::before { top: 0; transform: rotate(45deg); }
  .menu-toggle.open span::after  { top: 0; transform: rotate(-45deg); }

  .mobile-panel {
    display: none;
    position: fixed; inset: 84px 0 auto 0;
    background: var(--beige);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform .35s ease;
    z-index: 49;
  }
  .mobile-panel.open { transform: translateY(0); }
  .mobile-panel a {
    display: block; padding: 22px var(--gutter);
    font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
  }
  .mobile-panel .shop-soon { margin: 22px var(--gutter); display: inline-flex; }

  /* ── HERO ──────────────────────────────────────────────── */
  .hero {
    padding: clamp(60px, 9vw, 130px) 0 clamp(70px, 9vw, 120px);
    position: relative;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
  }
  .hero-text .eyebrow { margin-bottom: 28px; }
  .hero-text h1 { margin-bottom: 32px; }
  .hero-text h1 em { font-style: italic; color: var(--wood); font-weight: 300; }
  .hero-text .lede { margin-bottom: 42px; font-size: clamp(16px, 1.2vw, 19px); max-width: 46ch; }

  .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 56px; }

  .trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .trust-row > div {
    padding: 18px 14px 0 0;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
    display: flex; align-items: center; gap: 10px;
  }
  .trust-row > div::before {
    content: ''; width: 5px; height: 5px; background: var(--brass); border-radius: 50%; flex-shrink: 0;
  }

  .hero-visual { position: relative; }
  .hero-visual .frame {
    position: relative;
    background: var(--off-white);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line-soft);
  }
  .hero-visual .frame img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 55%;
    transition: transform 1.4s ease;
  }
  .hero-visual:hover .frame img { transform: scale(1.03); }

  .hero-caption {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
  }
  .hero-caption .name {
    font-family: var(--serif);
    font-size: clamp(22px, 1.8vw, 26px);
    line-height: 1.1;
    color: var(--ink);
  }
  .hero-caption .desc {
    font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; letter-spacing: .02em;
  }
  .hero-caption .index {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-mute);
    white-space: nowrap;
  }

  /* ── MARQUEE LINE ──────────────────────────────────────── */
  .strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: transparent;
  }
  .strip-track {
    display: flex; gap: 0; width: max-content;
    animation: glide 60s linear infinite;
  }
  .strip-track span {
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 38px);
    color: var(--ink);
    padding: 22px 36px;
    display: inline-flex; align-items: center; gap: 36px;
    white-space: nowrap;
  }
  .strip-track span em { font-style: italic; color: var(--brass); }
  .strip-track span::after {
    content: '·'; color: var(--brass); margin-left: 36px;
  }
  @keyframes glide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ── SECTION SHELL ─────────────────────────────────────── */
  section.block {
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
  }
  section.block.tight { padding: clamp(60px, 7vw, 100px) 0; }
  section.alt { background: var(--off-white); }

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 72px);
    margin-bottom: clamp(50px, 6vw, 90px);
    align-items: end;
  }
  .section-head .lede { margin-top: 10px; }
  .section-head .eyebrow { margin-bottom: 22px; }
  .section-head h2 em { font-style: italic; color: var(--wood); font-weight: 300; }

  /* ── KEYDOCK FEATURE ───────────────────────────────────── */
  .keydock-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
  }
  .keydock-photo {
    background: var(--off-white);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    position: relative;
  }
  .keydock-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
  .keydock-photo .index {
    position: absolute; top: 22px; left: 22px;
    font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--off-white);
    background: rgba(37,20,9,.5);
    padding: 6px 10px;
    backdrop-filter: blur(4px);
  }

  .keydock-body .eyebrow { margin-bottom: 26px; }
  .keydock-body h2 { margin-bottom: 24px; }
  .keydock-body h2 em { font-style: italic; color: var(--wood); }
  .keydock-body .lede { margin-bottom: 44px; }

  .specs {
    border-top: 1px solid var(--line);
    margin-bottom: 44px;
  }
  .specs dl { display: grid; grid-template-columns: 200px 1fr; }
  .specs > div {
    display: contents;
  }
  .specs .row {
    display: grid; grid-template-columns: 200px 1fr;
    border-bottom: 1px solid var(--line-soft);
  }
  .specs .row:last-child { border-bottom: 1px solid var(--line); }
  .specs dt {
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--brass);
    padding: 18px 16px 18px 0;
  }
  .specs dd {
    font-family: var(--serif);
    font-size: clamp(17px, 1.3vw, 19px);
    color: var(--ink);
    padding: 18px 0;
  }

  /* ── PRODUCT TRIO ──────────────────────────────────────── */
  .trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 36px);
  }
  .product-card {
    display: flex; flex-direction: column;
    background: var(--off-white);
    border: 1px solid var(--line-soft);
    transition: border-color .35s ease, transform .35s ease;
  }
  .product-card:hover { border-color: var(--line); transform: translateY(-4px); }
  .product-card .photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--off-white);
  }
  .product-card .photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s ease;
  }
  .product-card:hover .photo img { transform: scale(1.05); }

  .product-card .info {
    padding: clamp(22px, 2vw, 30px);
    display: flex; flex-direction: column; gap: 14px;
    flex-grow: 1;
    border-top: 1px solid var(--line-soft);
  }
  .product-card .number {
    font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-mute);
  }
  .product-card .name { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; }
  .product-card .desc { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
  .product-card .meta {
    margin-top: auto; padding-top: 22px;
    display: flex; justify-content: space-between; align-items: end;
    border-top: 1px solid var(--line-soft);
    gap: 14px;
  }
  .product-card .price {
    display: flex; flex-direction: column;
  }
  .product-card .price .lbl { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
  .product-card .price .val { font-family: var(--serif); font-size: 24px; color: var(--ink); }
  .product-card .meta .link-inline { font-size: 11px; }

  /* ── MATERIAL STORY ────────────────────────────────────── */
  .materials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    margin-top: clamp(40px, 5vw, 60px);
  }
  .material .swatch {
    aspect-ratio: 3 / 4;
    border: 1px solid var(--line-soft);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
  }
  /* Material swatches drawn with CSS so they read as calm, true brand textures, not stock photos */
  .swatch-pine {
    background:
      repeating-linear-gradient(
        90deg,
        rgba(122, 100, 56, .00)  0px,
        rgba(122, 100, 56, .05)  3px,
        rgba(122, 100, 56, .00)  9px,
        rgba(122, 100, 56, .07) 14px,
        rgba(122, 100, 56, .00) 22px
      ),
      linear-gradient(180deg, #d6c19a 0%, #c1a574 55%, #a98756 100%);
  }
  .swatch-walnut {
    background:
      repeating-linear-gradient(
        90deg,
        rgba(0,0,0,.00) 0px,
        rgba(0,0,0,.08) 3px,
        rgba(0,0,0,.00) 9px,
        rgba(0,0,0,.10) 14px,
        rgba(0,0,0,.00) 22px
      ),
      linear-gradient(180deg, #4a2814 0%, #3b1f0f 60%, #2b1509 100%);
  }
  .swatch-black {
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.04), transparent 50%),
      linear-gradient(180deg, #1a1817 0%, #0a0908 100%);
  }
  .swatch-tag {
    position: absolute; left: 18px; bottom: 18px;
    font-family: var(--serif); font-size: 14px;
    color: var(--off-white);
    background: rgba(10,9,8,.55);
    backdrop-filter: blur(6px);
    padding: 6px 12px;
    letter-spacing: .04em;
  }
  .swatch-pine .swatch-tag { background: rgba(37,20,9,.55); }
  .material h3 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 8px; }
  .material p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; max-width: 36ch; }
  .material .label { display: block; margin-bottom: 10px; }

  /* ── HOW IT WORKS ──────────────────────────────────────── */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: clamp(40px, 5vw, 60px);
  }
  .step {
    padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
    border-right: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 18px;
    position: relative;
  }
  .step:last-child { border-right: none; }
  .step-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(40px, 4vw, 56px);
    color: var(--brass);
    line-height: 1;
  }
  .step h3 { font-size: clamp(22px, 1.8vw, 28px); }
  .step p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; max-width: 36ch; }
  .step .glyph {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--wood);
    margin-bottom: 10px;
  }
  .step .glyph svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1; fill: none; }

  /* ── LIFESTYLE / ROOMS ────────────────────────────────── */
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(180px, 18vw, 240px);
    gap: clamp(14px, 1.4vw, 20px);
    margin-top: clamp(40px, 5vw, 60px);
  }
  .room {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--off-white);
  }
  .room img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s ease;
  }
  .room:hover img { transform: scale(1.04); }
  .room .room-tag {
    position: absolute; left: 18px; bottom: 18px;
    background: var(--beige);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;
    padding: 8px 14px;
    border: 1px solid var(--line-soft);
  }
  .room.r-1 { grid-column: span 7; grid-row: span 2; }
  .room.r-2 { grid-column: span 5; grid-row: span 1; }
  .room.r-3 { grid-column: span 5; grid-row: span 1; }
  .room.r-4 { grid-column: span 4; grid-row: span 1; }
  .room.r-5 { grid-column: span 4; grid-row: span 1; }
  .room.r-6 { grid-column: span 4; grid-row: span 1; }

  .room-list {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 32px;
  }
  .room-list span {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    border: 1px solid var(--line);
    padding: 8px 14px;
    color: var(--ink-soft);
  }

  /* ── WHY DECIYA ───────────────────────────────────────── */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    margin-top: clamp(40px, 5vw, 60px);
  }
  .why-col {
    padding: clamp(36px, 3.6vw, 52px) clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 30px) 0;
    border-right: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 18px;
  }
  .why-col:last-child { border-right: none; padding-right: 0; }
  .why-col .num {
    font-family: var(--serif); font-style: italic; color: var(--brass);
    font-size: 18px; letter-spacing: .02em;
  }
  .why-col h3 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.1; }
  .why-col p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

  /* ── WAITLIST ─────────────────────────────────────────── */
  .waitlist {
    background: var(--walnut);
    color: var(--off-white);
    padding: clamp(80px, 10vw, 140px) 0;
    position: relative;
    overflow: hidden;
  }
  .waitlist::before {
    /* gentle warm vignette, not a gradient bg */
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 80% 100%, rgba(122,100,56,.18), transparent 55%),
      radial-gradient(ellipse at 0% 0%, rgba(59,31,15,.5), transparent 55%);
    pointer-events: none;
  }
  .waitlist > .wrap { position: relative; z-index: 1; }

  .waitlist .eyebrow { color: rgba(245,241,236,.7); margin-bottom: 28px; }
  .waitlist .eyebrow::before { background: rgba(122,100,56,.9); }
  .waitlist h2 { color: var(--off-white); margin-bottom: 22px; max-width: 16ch; }
  .waitlist h2 em { color: var(--taupe); font-style: italic; }
  .waitlist .lede { color: rgba(245,241,236,.7); max-width: 42ch; margin-bottom: 48px; font-size: 17px; }
  .waitlist-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }

  form.waitlist-form {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(245,241,236,.18);
  }
  .field {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    border-bottom: 1px solid rgba(245,241,236,.18);
  }
  .field label {
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(245,241,236,.55);
    padding: 22px 0;
  }
  .field input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--off-white);
    font-family: var(--serif);
    font-size: 22px;
    padding: 22px 0;
    width: 100%;
    letter-spacing: -.005em;
  }
  .field input::placeholder { color: rgba(245,241,236,.34); font-style: italic; }
  .field:hover { border-bottom-color: rgba(184,175,162,.7); }

  .waitlist-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 36px; gap: 20px; flex-wrap: wrap;
  }
  .waitlist .btn-light {
    background: var(--off-white); color: var(--walnut); border-color: var(--off-white);
  }
  .waitlist .btn-light:hover { background: var(--beige); border-color: var(--beige); color: var(--walnut); }
  .waitlist .privacy { font-size: 11px; color: rgba(245,241,236,.55); letter-spacing: .04em; max-width: 30ch; }

  .waitlist-aside {
    display: flex; flex-direction: column; gap: 24px;
    border-left: 1px solid rgba(245,241,236,.16);
    padding-left: clamp(24px, 3vw, 44px);
  }
  .waitlist-aside .perk {
    display: grid; grid-template-columns: 32px 1fr;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(245,241,236,.12);
  }
  .waitlist-aside .perk:last-child { border-bottom: none; }
  .waitlist-aside .perk .ico {
    color: var(--taupe);
    font-family: var(--serif); font-style: italic;
    font-size: 18px;
  }
  .waitlist-aside .perk h4 { color: var(--off-white); font-size: 18px; font-family: var(--serif); margin-bottom: 4px; }
  .waitlist-aside .perk p { color: rgba(245,241,236,.6); font-size: 13px; line-height: 1.6; }

  .form-success {
    display: none;
    padding: 28px 0;
    color: var(--taupe);
    font-family: var(--serif); font-size: 22px;
    font-style: italic;
  }
  form.waitlist-form.done .field, form.waitlist-form.done .waitlist-actions { display: none; }
  form.waitlist-form.done .form-success { display: block; }

  /* ── FOOTER ───────────────────────────────────────────── */
  footer.site {
    background: var(--beige);
    padding: clamp(70px, 8vw, 110px) 0 30px;
    border-top: 1px solid var(--line);
  }
  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 4vw, 60px);
    margin-bottom: clamp(50px, 6vw, 80px);
  }
  .footer-brand .wordmark {
    font-family: var(--serif);
    font-size: 36px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--walnut);
    margin-bottom: 14px;
  }
  .footer-brand .tagline {
    font-family: var(--serif); font-style: italic;
    font-size: 18px; color: var(--ink-soft);
    margin-bottom: 26px;
  }
  .footer-brand .contact-line {
    font-size: 13px; color: var(--ink-soft); line-height: 1.9;
  }
  .footer-brand .contact-line a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
  .footer-brand .contact-line a:hover { border-bottom-color: var(--brass); color: var(--wood); }

  .footer-col h5 {
    font-family: var(--sans);
    font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 22px;
    font-weight: 500;
  }
  .footer-col a, .footer-col p {
    display: block;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 6px 0;
    transition: color .2s ease;
  }
  .footer-col a:hover { color: var(--ink); }

  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    gap: 20px; flex-wrap: wrap;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-mute);
  }

  /* ── REVEAL ───────────────────────────────────────────── */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-2 { transition-delay: .12s; }
  .reveal-3 { transition-delay: .24s; }

  /* ── RESPONSIVE ───────────────────────────────────────── */
  @media (max-width: 1024px) {
    nav.primary { display: none; }
    .header-cta .shop-soon { display: none; }
    .menu-toggle { display: grid; }
    .mobile-panel { display: block; }
    .hero-grid, .keydock-grid, .section-head, .waitlist-grid {
      grid-template-columns: 1fr; gap: 50px;
    }
    .trust-row { grid-template-columns: repeat(2, 1fr); }
    .trust-row > div:nth-child(n+3) { padding-top: 12px; }
    .trio { grid-template-columns: 1fr 1fr; }
    .trio .product-card:last-child { grid-column: span 2; }
    .materials { grid-template-columns: 1fr 1fr; }
    .material:last-child { grid-column: span 2; }
    .steps { grid-template-columns: 1fr; border-bottom: none; }
    .step { border-right: none; border-bottom: 1px solid var(--line-soft); }
    .step:last-child { border-bottom: 1px solid var(--line); }
    .rooms-grid { grid-template-columns: repeat(6, 1fr); }
    .room.r-1 { grid-column: span 6; grid-row: span 2; }
    .room.r-2, .room.r-3 { grid-column: span 3; grid-row: span 1; }
    .room.r-4, .room.r-5, .room.r-6 { grid-column: span 2; grid-row: span 1; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .why-col:nth-child(2) { border-right: none; }
    .why-col:nth-child(odd) { border-right: 1px solid var(--line-soft); }
    .why-col:nth-child(1), .why-col:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
    .specs .row { grid-template-columns: 140px 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .waitlist-aside { border-left: none; padding-left: 0; border-top: 1px solid rgba(245,241,236,.16); padding-top: 28px; }
  }

  @media (max-width: 640px) {
    :root { --gutter: 20px; }
    .nav-row { min-height: 70px; }
    .mobile-panel { inset: 70px 0 auto 0; }
    .brand { font-size: 18px; letter-spacing: .28em; }
    .hero { padding-top: 40px; }
    .hero-text h1 { font-size: clamp(44px, 11vw, 64px); }
    .h-section { font-size: clamp(34px, 9vw, 48px); }
    .trust-row { grid-template-columns: 1fr 1fr; }
    .trio { grid-template-columns: 1fr; }
    .trio .product-card:last-child { grid-column: span 1; }
    .materials { grid-template-columns: 1fr; }
    .material:last-child { grid-column: span 1; }
    .rooms-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .room.r-1 { grid-column: span 2; grid-row: span 2; }
    .room.r-2, .room.r-3, .room.r-4, .room.r-5, .room.r-6 { grid-column: span 1; grid-row: span 1; }
    .why-grid { grid-template-columns: 1fr; }
    .why-col { border-right: none !important; border-bottom: 1px solid var(--line-soft); padding: 30px 0; }
    .why-col:last-child { border-bottom: none; }
    .specs .row { grid-template-columns: 110px 1fr; }
    .specs dt { font-size: 9.5px; padding: 14px 12px 14px 0; }
    .specs dd { font-size: 16px; padding: 14px 0; }
    .field { grid-template-columns: 1fr; }
    .field label { padding-bottom: 0; padding-top: 18px; }
    .field input { padding-top: 8px; padding-bottom: 18px; font-size: 18px; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    .announce { font-size: 9px; letter-spacing: .2em; padding: 9px 14px; }
    .announce .dot { margin: 0 8px; }
    .strip-track span { font-size: 22px; padding: 16px 24px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .strip-track { animation: none !important; }
  }