/* =========================================================
   SOREKAU LP — Global Styles
   - 朝焼けグラデーション × 明朝 × ゴールド
   ========================================================= */

:root {
  --ink: #0b1733;
  --ink-2: #1a2547;
  --ink-3: #28204a;
  --gold: #c9a14a;
  --gold-2: #e7c97a;
  --gold-3: #fff5d6;
  --cream: #f6efe2;
  --cream-2: #efe6d2;
  --paper: #faf6ec;
  --rose: #ff8a5b;

  --maxw: 1200px;
  --maxw-narrow: 880px;
  --pad-x: clamp(20px, 4vw, 56px);
  --section-py: clamp(80px, 11vw, 140px);

  --serif-jp: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --serif-en: "Cormorant Garamond", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  font-family: var(--serif-jp);
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.7;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== Common containers ===== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container.narrow { max-width: var(--maxw-narrow); }

/* ===== Section base ===== */
.section {
  padding: var(--section-py) 0;
  position: relative;
}
.section-eyebrow {
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.55em;
  color: var(--gold-2);
  text-align: center;
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--serif-jp);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: clamp(48px, 7vw, 80px);
  color: inherit;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
}

.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(1300px 800px at 76% 72%, rgba(255,225,160,0.85), transparent 62%),
    radial-gradient(1000px 700px at 76% 78%, rgba(255,165,110,0.7), transparent 58%),
    linear-gradient(180deg,
      #3a3f73 0%,
      #6a4d86 16%,
      #9a5786 30%,
      #c66478 44%,
      #e87a64 58%,
      #f59868 70%,
      #ffb87a 82%,
      #ffd9a3 92%,
      #fff0cf 100%);
  z-index: -3;
}

.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 10%, #fff7e6 99%, transparent 100%),
    radial-gradient(1px 1px at 32% 6%, #fff7e6 99%, transparent 100%),
    radial-gradient(1px 1px at 52% 8%, #fff7e6 99%, transparent 100%);
  opacity: 0.5;
  z-index: -2;
  mask-image: linear-gradient(180deg, #000 0%, #000 18%, transparent 32%);
}

.sun {
  position: absolute;
  right: -2%;
  bottom: 10%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fffbea 0%, #ffe6b0 22%, #ffc080 45%, #ff9a66 60%, rgba(255,140,90,0) 75%);
  filter: blur(0.5px);
  z-index: -1;
}
.sun::after {
  content: "";
  position: absolute; inset: -140px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 220, 150, 0.45) 0%,
    rgba(255, 175, 110, 0.22) 35%,
    transparent 65%);
}

.skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(40,20,60,0.0) 30%, rgba(40,20,60,0.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='none'><path fill='%231d1638' d='M0,360 L0,260 L40,260 L40,220 L80,220 L80,200 L120,200 L120,240 L160,240 L160,180 L200,180 L200,150 L240,150 L240,210 L280,210 L280,170 L320,170 L320,230 L360,230 L360,200 L400,200 L400,140 L420,140 L420,90 L440,90 L440,140 L480,140 L480,200 L520,200 L520,170 L560,170 L560,230 L600,230 L600,180 L640,180 L640,210 L680,210 L680,150 L720,150 L720,200 L760,200 L760,170 L800,170 L800,120 L820,120 L820,70 L840,70 L840,120 L880,120 L880,180 L920,180 L920,210 L960,210 L960,160 L1000,160 L1000,220 L1040,220 L1040,190 L1080,190 L1080,150 L1120,150 L1120,200 L1160,200 L1160,170 L1200,170 L1200,230 L1240,230 L1240,200 L1280,200 L1280,160 L1320,160 L1320,210 L1360,210 L1360,180 L1400,180 L1400,220 L1440,220 L1440,190 L1480,190 L1480,230 L1520,230 L1520,200 L1560,200 L1560,240 L1600,240 L1600,360 Z'/></svg>") center bottom / cover no-repeat;
  z-index: -1;
  opacity: 0.95;
}

.hero .frame {
  position: relative;
  width: min(1280px, 92vw);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 0 32px;
}

.hero header {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--cream);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 24px rgba(231,201,122,0.45);
  position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(11,23,51,0.5);
}
.brand-text {
  font-family: var(--serif-jp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: var(--cream);
}

.hero nav ul {
  display: flex; gap: 30px;
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.28em;
  color: rgba(246,239,226,0.85);
}
.hero nav a:hover { color: var(--gold-2); }

.reserve-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border: 1px solid rgba(231,201,122,0.6);
  border-radius: 999px;
  font-family: var(--serif-jp);
  letter-spacing: 0.2em;
  font-size: 13px;
  color: var(--gold-2);
  backdrop-filter: blur(6px);
  transition: background .2s, color .2s;
}
.reserve-pill:hover { background: rgba(231,201,122,0.12); }
.reserve-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px var(--gold-2);
}

.hero main {
  align-self: center;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 56px;
  padding-top: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--serif-jp);
  font-size: 18px;
  letter-spacing: 0.35em;
  color: var(--gold-2);
  font-weight: 600;
  margin-bottom: 18px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

.wordmark {
  font-family: var(--serif-jp);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 124px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #fff8df 0%, var(--gold-2) 45%, var(--gold) 80%, #8a6a2a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  text-shadow: 0 30px 60px rgba(0,0,0,0.35);
  position: relative;
  display: inline-block;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 30%, var(--gold-2) 70%, transparent);
  opacity: 0.7;
}

.tagline {
  margin-top: 18px;
  font-family: var(--serif-jp);
  color: var(--cream);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.14em;
  line-height: 1.6;
  font-weight: 600;
}
.tagline .accent {
  color: transparent;
  background: linear-gradient(180deg, #fff5d6 0%, var(--gold-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  font-weight: 700;
}

.lede {
  margin-top: 10px;
  font-family: var(--serif-jp);
  color: rgba(246,239,226,0.88);
  font-size: 14px;
  line-height: 1.9;
}

.cta-row {
  margin-top: 16px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--ink);
  font-family: var(--serif-jp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(201,161,74,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 16px 48px rgba(201,161,74,0.45); }
.cta .arrow { width: 22px; height: 1px; background: var(--ink); position: relative; }
.cta .arrow::after {
  content: ""; position: absolute; right: 0; top: -4px;
  width: 9px; height: 9px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: rotate(45deg);
}
.cta-ghost {
  color: var(--cream);
  font-family: var(--serif-jp);
  letter-spacing: 0.22em;
  font-size: 13px;
  border-bottom: 1px solid rgba(246,239,226,0.4);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.cta-ghost:hover { color: var(--gold-2); border-color: var(--gold-2); }

.card {
  justify-self: end;
  width: min(380px, 100%);
  padding: 26px 28px 24px;
  border: 1px solid rgba(231,201,122,0.35);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(11,23,51,0.55), rgba(11,23,51,0.25));
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.card .label {
  font-family: var(--serif-jp);
  letter-spacing: 0.32em;
  font-size: 12px;
  color: var(--gold-2);
  font-weight: 600;
}
.card .time {
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 84px;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-top: 10px;
  background: linear-gradient(180deg, #fff5d6, var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.card .time small {
  font-size: 24px;
  color: rgba(246,239,226,0.7);
  background: none; -webkit-text-fill-color: rgba(246,239,226,0.7);
  margin-left: 6px;
  letter-spacing: 0.15em;
}
.card .desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(246,239,226,0.85);
}
.card .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,201,122,0.5), transparent);
  margin: 16px 0 14px;
}
.card .items {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 9px 18px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(246,239,226,0.9);
}
.card .items span::before { content: "—  "; color: var(--gold-2); }

.hero footer.bar {
  align-self: end;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(246,239,226,0.18);
  color: rgba(246,239,226,0.75);
  font-family: var(--serif-jp);
  letter-spacing: 0.32em;
  font-size: 12px;
}
.hero footer .tags { display: flex; gap: 26px; }
.hero footer .tags span::before { content: "◇  "; color: var(--gold-2); margin-right: 2px; }
.hero footer .scroll {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold-2);
  font-family: var(--serif-en);
  letter-spacing: 0.3em;
}
.hero footer .scroll .line {
  width: 60px; height: 1px; background: var(--gold-2); position: relative;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 0.4; transform: scaleX(0.6); transform-origin: left; }
  50%     { opacity: 1;   transform: scaleX(1);   transform-origin: left; }
}

/* =========================================================
   CONCEPT
   ========================================================= */
.concept {
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
  background:
    radial-gradient(900px 500px at 78% 40%, rgba(231,201,122,0.08), transparent 60%),
    linear-gradient(180deg, #0b1733 0%, #1a1640 60%, #0b1733 100%);
  color: var(--cream);
}
.concept .section-eyebrow { color: var(--gold-2); }
.concept-quote {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 12px;
  text-align: center;
  font-family: var(--serif-jp);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 2.2;
  letter-spacing: 0.12em;
  color: rgba(246,239,226,0.92);
}
.concept-quote .q-mark {
  position: absolute;
  font-family: var(--serif-en);
  font-size: 96px;
  line-height: 1;
  color: var(--gold-2);
  opacity: 0.8;
}
.concept-quote .q-mark:first-child { top: -10px; left: -10px; }
.concept-quote .q-end { right: -10px; bottom: 10px; left: auto; }

.badges {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 18px;
  border: 1px solid rgba(231,201,122,0.32);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(231,201,122,0.04), rgba(231,201,122,0));
  text-align: center;
}
.badge .diamond { color: var(--gold-2); font-size: 14px; }
.badge .b-label {
  font-size: 12px; letter-spacing: 0.18em;
  color: rgba(246,239,226,0.7);
}
.badge .b-value {
  font-size: 16px; letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--gold-2);
}

/* =========================================================
   WHY
   ========================================================= */
.why {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
  background: var(--paper);
  color: var(--ink);
}
.why .section-eyebrow { color: var(--gold); }
.why .section-title { color: var(--ink); margin-bottom: clamp(32px, 4vw, 48px); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 24px;
}
.why-card {
  position: relative;
  padding: 28px 22px 24px;
  background: #fff;
  border: 1px solid rgba(201,161,74,0.18);
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(11,23,51,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(11,23,51,0.1);
}
.why-num {
  font-family: var(--serif-en);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 80%, #8a6a2a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: 18px;
}
.why-title {
  font-family: var(--serif-jp);
  font-size: 19px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.6;
}
.why-text {
  font-family: var(--serif-jp);
  font-size: 14.5px;
  line-height: 2;
  color: rgba(11,23,51,0.78);
}

/* =========================================================
   ITEMS
   ========================================================= */
.items {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(231,201,122,0.07), transparent 60%),
    linear-gradient(180deg, #0b1733 0%, #14193a 60%, #0b1733 100%);
  color: var(--cream);
}
.items .section-eyebrow { color: var(--gold-2); }
.items .section-title { color: var(--cream); margin-bottom: clamp(28px, 4vw, 44px); }

.items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.item-card {
  padding: 36px 26px 32px;
  border: 1px solid rgba(231,201,122,0.25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.item-card:hover {
  border-color: rgba(231,201,122,0.55);
  transform: translateY(-2px);
}
.item-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  color: var(--gold-2);
  margin-bottom: 20px;
}
.item-icon svg { width: 100%; height: 100%; }
.item-title {
  font-family: var(--serif-jp);
  font-size: 20px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--cream);
}
.item-list {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(246,239,226,0.85);
}
.item-list li::before {
  content: "—  "; color: var(--gold-2); margin-right: 2px;
}
.items-note {
  text-align: center;
  margin-top: 36px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(246,239,226,0.6);
}

/* =========================================================
   FLOW
   ========================================================= */
.flow {
  background: var(--paper);
  color: var(--ink);
}
.flow .section-eyebrow { color: var(--gold); }
.flow .section-title { color: var(--ink); }

.flow-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: flow;
}
.flow-list::before {
  content: "";
  position: absolute;
  top: 36px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  opacity: 0.5;
}
.flow-item {
  position: relative;
  padding: 0 6px;
  text-align: center;
}
.flow-step {
  position: relative;
  display: inline-block;
  font-family: var(--serif-en);
  font-size: 18px;
  letter-spacing: 0.32em;
  color: var(--gold);
  background: var(--paper);
  padding: 0 14px;
  z-index: 1;
}
.flow-step::before, .flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  display: none;
}
.flow-item .flow-step {
  position: relative;
}
.flow-item::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold);
  z-index: 2;
}
.flow-title {
  margin-top: 36px;
  font-family: var(--serif-jp);
  font-size: 17px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}
.flow-text {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 2;
  color: rgba(11,23,51,0.72);
}

/* =========================================================
   VOICE
   ========================================================= */
.voice {
  background:
    radial-gradient(900px 500px at 22% 80%, rgba(231,201,122,0.08), transparent 60%),
    linear-gradient(180deg, #0b1733 0%, #1a1640 60%, #0b1733 100%);
  color: var(--cream);
}
.voice .section-eyebrow { color: var(--gold-2); }
.voice .section-title { color: var(--cream); }

.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.voice-card {
  padding: 30px 28px 24px;
  border: 1px solid rgba(231,201,122,0.28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  backdrop-filter: blur(6px);
}
.voice-stars {
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--gold-2);
  margin-bottom: 16px;
}
.voice-text {
  font-family: var(--serif-jp);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(246,239,226,0.92);
  min-height: 5em;
}
.voice-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(231,201,122,0.2);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(246,239,226,0.7);
}
.voice-initial {
  font-family: var(--serif-en);
  font-size: 16px;
  color: var(--gold-2);
  margin-right: 6px;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  background: var(--paper);
  color: var(--ink);
}
.faq .section-eyebrow { color: var(--gold); }
.faq .section-title { color: var(--ink); }

.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-top: 1px solid rgba(11,23,51,0.12);
}
.faq-item:last-child { border-bottom: 1px solid rgba(11,23,51,0.12); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 16px;
  font-family: var(--serif-jp);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--ink);
  position: relative;
  font-weight: 600;
  line-height: 1.6;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q";
  font-family: var(--serif-en);
  font-size: 22px;
  color: var(--gold);
  margin-right: 14px;
  letter-spacing: 0;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif-en);
  font-size: 24px;
  color: var(--gold);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-body {
  padding: 0 16px 26px 50px;
  font-family: var(--serif-jp);
  font-size: 14.5px;
  line-height: 2;
  color: rgba(11,23,51,0.78);
}

/* =========================================================
   RESERVE
   ========================================================= */
.reserve {
  background:
    radial-gradient(1100px 500px at 50% 100%, rgba(231,150,100,0.18), transparent 60%),
    radial-gradient(800px 400px at 50% 0%, rgba(231,201,122,0.1), transparent 60%),
    linear-gradient(180deg, #0b1733 0%, #1f1842 50%, #0b1733 100%);
  color: var(--cream);
}
.reserve .section-eyebrow { color: var(--gold-2); }
.reserve .section-title { color: var(--cream); }

.reserve-lede {
  text-align: center;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  line-height: 2;
  color: rgba(246,239,226,0.8);
  margin: -40px auto 48px;
  max-width: 640px;
}

.reserve-form {
  display: flex; flex-direction: column; gap: 22px;
  padding: 36px clamp(20px, 4vw, 44px);
  border: 1px solid rgba(231,201,122,0.3);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(11,23,51,0.55), rgba(11,23,51,0.3));
  backdrop-filter: blur(10px);
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label,
.form-cats legend {
  font-family: var(--serif-jp);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  color: var(--gold-2);
  font-weight: 600;
}
.req {
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  border: 1px solid rgba(255,138,91,0.6);
  color: var(--rose);
  border-radius: 2px;
  font-weight: 500;
}
.opt {
  display: inline-block;
  margin-left: 8px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 2px 8px;
  border: 1px solid rgba(246,239,226,0.3);
  color: rgba(246,239,226,0.6);
  border-radius: 2px;
  font-weight: 500;
}
.form-row .help {
  font-size: 12px;
  color: rgba(246,239,226,0.55);
  letter-spacing: 0.08em;
}
.form-row .help.inline { display: inline-block; margin-left: 6px; }

.date-time-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.date-time-row input[type="time"] { width: 130px; }

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="time"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--serif-jp);
  font-size: 15px;
  color: var(--cream);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(231,201,122,0.3);
  border-radius: 3px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.form-row input::placeholder,
.form-row textarea::placeholder {
  color: rgba(246,239,226,0.35);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--gold-2);
  background: rgba(255,255,255,0.07);
}
.form-row select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-2) 50%),
    linear-gradient(135deg, var(--gold-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form-row select option { background: var(--ink); color: var(--cream); }
.form-row textarea { resize: vertical; min-height: 120px; line-height: 1.8; }
.form-row input[type="file"] {
  padding: 10px 0;
  font-size: 13px;
  color: rgba(246,239,226,0.85);
  background: transparent;
  border: none;
}
.form-row input[type="file"]::file-selector-button {
  padding: 10px 16px;
  margin-right: 12px;
  font-family: var(--serif-jp);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  color: var(--gold-2);
  background: transparent;
  border: 1px solid rgba(231,201,122,0.5);
  border-radius: 3px;
  cursor: pointer;
}

.form-cats { border: none; padding: 0; }
.form-cats .cat-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 14px;
}
.form-cats label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(231,201,122,0.2);
  border-radius: 3px;
  background: rgba(255,255,255,0.02);
  font-family: var(--serif-jp);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(246,239,226,0.92);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.form-cats label:hover { border-color: rgba(231,201,122,0.5); }
.form-cats input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid rgba(231,201,122,0.6);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.form-cats input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border-color: var(--gold);
}
.form-cats input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

.form-row.has-error input,
.form-row.has-error select,
.form-cats.has-error {
  border-color: var(--rose) !important;
}
.form-row .err {
  color: var(--rose);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.form-submit {
  margin-top: 12px;
  align-self: center;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 38px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--ink);
  font-family: var(--serif-jp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  border: none;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(201,161,74,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.form-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 48px rgba(201,161,74,0.45); }
.form-submit .arrow { width: 22px; height: 1px; background: var(--ink); position: relative; }
.form-submit .arrow::after {
  content: ""; position: absolute; right: 0; top: -4px;
  width: 9px; height: 9px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: rotate(45deg);
}

.form-toast {
  margin-top: 32px;
  padding: 30px 26px;
  text-align: center;
  border: 1px solid rgba(231,201,122,0.45);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(231,201,122,0.08), rgba(231,201,122,0.02));
}
.form-toast[hidden] { display: none; }
.toast-mark {
  font-size: 22px; color: var(--gold-2); margin-bottom: 8px;
}
.toast-title {
  font-family: var(--serif-jp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.toast-text {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: rgba(246,239,226,0.78);
  line-height: 1.9;
}

/* =========================================================
   COMPANY
   ========================================================= */
.company {
  background: var(--paper);
  color: var(--ink);
}
.company .section-eyebrow { color: var(--gold); }
.company .section-title { color: var(--ink); }

.company-list {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(11,23,51,0.12);
}
.company-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(11,23,51,0.12);
  font-family: var(--serif-jp);
  font-size: 15px;
  letter-spacing: 0.08em;
}
.company-row dt {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 13.5px;
  align-self: center;
}
.company-row dd { color: var(--ink); line-height: 1.9; }
.company-row dd a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201,161,74,0.4);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.company-row dd a:hover { color: var(--ink); border-color: var(--ink); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #07112a;
  color: rgba(246,239,226,0.7);
  padding: 56px 0 32px;
}
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(246,239,226,0.12);
}
.footer-brand {
  display: flex; align-items: center; gap: 12px;
}
.footer-brand .brand-text { color: var(--cream); }
.footer-links {
  display: flex; gap: 26px;
  font-family: var(--serif-jp);
  font-size: 13px;
  letter-spacing: 0.18em;
}
.footer-links a:hover { color: var(--gold-2); }
.footer-bottom {
  margin-top: 22px;
  text-align: center;
  font-family: var(--serif-jp);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(246,239,226,0.5);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .flow-list { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .flow-list::before { display: none; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .items-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .hero { min-height: 920px; }
  .hero main { grid-template-columns: 1fr; gap: 28px; }
  .hero .card { justify-self: stretch; }
  .hero nav, .hero .reserve-pill { display: none; }
  .wordmark { font-size: clamp(80px, 22vw, 140px); }
  .badges { grid-template-columns: 1fr; }
  .company-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 4px; }
  .company-row dt { font-size: 12px; }
}

@media (max-width: 640px) {
  .section { padding: clamp(64px, 14vw, 100px) 0; }
  .hero header { gap: 8px; }
  .hero .frame { padding: 18px 0 22px; }
  .flow-list { grid-template-columns: 1fr; row-gap: 36px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .items-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .reserve-form { padding: 26px 18px; }
  .voice-text { min-height: auto; }
  .item-card { padding: 24px 18px; }
}

/* Focus-visible accessibility */
:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}