/* ==========================================================
   Diwan Saab — Coming Soon
   Palette: Maroon #7A1F2B · Gold #C9A24A · Ivory #F6EFE2 · Ink #120708
   ========================================================== */

:root {
  --maroon: #7A1F2B;
  --ink: #120708;
  --gold: #C9A24A;
  --gold-soft: rgba(201, 162, 74, .35);
  --ivory: #F6EFE2;
  --ivory-80: rgba(246, 239, 226, .82);
  --ivory-65: rgba(246, 239, 226, .65);
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Page ---------- */
.cs {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(122, 31, 43, .85) 0%, transparent 70%),
    radial-gradient(circle at 0 0, var(--gold-soft) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14px 14px, var(--gold-soft) 0 1px, transparent 1.5px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
}

/* ---------- Card ---------- */
.cs__card {
  position: relative;
  width: 100%;
  max-width: 760px;
  text-align: center;
  padding: 40px 24px;
}

.cs__logo { display: block; margin: 0 auto 22px; height: auto; width: min(200px, 70vw); }
.cs__wordmark {
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}
.cs__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.cs__divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 320px; margin: 18px auto; color: var(--gold);
}
.cs__divider::before, .cs__divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.cs__divider::after { background: linear-gradient(270deg, transparent, var(--gold)); }

.cs__heading {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.05;
  color: var(--ivory);
  overflow-wrap: break-word;
}
.cs__heading em { font-style: italic; color: var(--gold); }

.cs__text {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.55;
  color: var(--ivory-80);
  overflow-wrap: break-word;
}

/* ---------- Form ---------- */
.cs__form-title {
  margin: 30px 0 12px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}
.cs__field {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--gold);
}
.cs__input {
  flex: 1; min-width: 0; min-height: 48px;
  border: 0; outline: 0; background: transparent;
  color: var(--ivory);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 14px; letter-spacing: .04em;
}
.cs__input::placeholder { color: rgba(246, 239, 226, .5); }
.cs__field:focus-within { box-shadow: 0 0 0 3px var(--gold-soft); }

.cs__btn {
  min-height: 48px;
  border: 0; cursor: pointer;
  background: var(--gold); color: var(--ink);
  padding: 0 24px;
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  transition: background .25s ease;
}
.cs__btn:hover, .cs__btn:focus-visible { background: var(--ivory); }

.cs__msg { min-height: 1.4em; margin: 12px 0 0; font-size: 13px; color: var(--gold); }
.cs__msg--error { color: #f2b8b8; }

.cs__whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-bottom: 4px;
  color: var(--ivory); text-decoration: none;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid var(--gold-soft);
  transition: color .2s, border-color .2s;
}
.cs__whatsapp:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Footer ---------- */
.cs__footer {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--gold-soft);
  font-size: 12px; line-height: 1.8; letter-spacing: .06em;
  color: var(--ivory-65);
  overflow-wrap: break-word;
}
.cs__footer p { margin: 0; }
.cs__footer a { color: inherit; text-decoration: none; }
.cs__footer a:hover { color: var(--gold); }
.cs__social { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.cs__social a { color: var(--gold); display: inline-flex; }
.cs__social svg { width: 18px; height: 18px; }

/* ---------- Entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cs__card > * { animation: fadeUp .9s ease both; }
  .cs__card > *:nth-child(n+7)  { animation-delay: .15s; }
  .cs__card > *:nth-child(n+10) { animation-delay: .3s; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- Responsive ---------- */
/* Tablet */
@media (max-width: 900px) {
  .cs__card { max-width: 640px; padding: 32px 24px; }
}

/* Mobile */
@media (max-width: 600px) {
  .cs { padding: 20px 14px; align-items: flex-start; }
  .cs__card { padding: 28px 4px 24px; margin: auto 0; }
  .cs__eyebrow { font-size: 10px; letter-spacing: .18em; line-height: 1.6; }
  .cs__wordmark { font-size: 26px; letter-spacing: .14em; }
  .cs__divider { margin: 14px auto; max-width: 220px; }
  .cs__form-title { letter-spacing: .2em; line-height: 1.6; margin-top: 26px; }
  .cs__field { flex-direction: column; }
  .cs__input { font-size: 16px; text-align: center; } /* 16px prevents iPhone auto-zoom */
  .cs__btn { padding: 15px; }
  .cs__footer { font-size: 11px; letter-spacing: .03em; margin-top: 28px; }
  .cs__social a { padding: 12px; margin: -12px 0; }
}

/* Small phones (320–360px) */
@media (max-width: 360px) {
  .cs__card { padding: 24px 0 20px; }
  .cs__heading { font-size: 34px; }
  .cs__text { font-size: 16px; }
  .cs__whatsapp { font-size: 11px; letter-spacing: .14em; }
}

/* Phones in landscape */
@media (max-height: 520px) and (orientation: landscape) {
  .cs { align-items: flex-start; padding: 16px; }
  .cs__card { padding: 20px 28px; }
  .cs__heading { font-size: 36px; }
  .cs__divider { margin: 10px auto; }
}