/* ============================================================
   CLOUVI STUDIOS — style.css
   Structure:
   1.  Variables
   2.  Reset & Base
   3.  Background Canvas
   4.  Layout
   5.  Header / Nav
   6.  Hero Title
   7.  Bespoke Context Line
   8.  Cycler
   9.  CTA Buttons
   10. Footer
   11. Brand Moment Section
   12. Preloader
   13. Chat Bubble
   14. Animations & Keyframes
   15. Media Queries
   ============================================================ */


/* ------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------ */
:root {
  --bg:      #ece7de;
  --text:    #0a0a0a;
  --muted:   rgba(160,120,20,0.7);
  --gold:    #D4AF37;
  --border:  rgba(10,10,10,0.1);

  --ff-display: 'Cinzel', serif;
  --ff-mono:    'Space Mono', monospace;

  /* Gold gradient — matches hero exactly */
  --gold-gradient: linear-gradient(
    90deg,
    #C8960C 0%,
    #FFE066 35%,
    #FFD700 50%,
    #E8B800 65%,
    #C8960C 100%
  );
}


/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #ece7de;
  height: -webkit-fill-available; /* iOS Safari legacy fix */
}

html, body {
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: clip;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--ff-mono);
  position: relative;
}



/* ============================================================
   WARM OFF-WHITE TEXTURE — grain + vignette (all pages)
   ============================================================ */

/* Grain — premium paper feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* Warm vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 35%,
    rgba(160, 120, 40, 0.04) 60%,
    rgba(100, 70, 20, 0.09) 100%
  );
}

/* ------------------------------------------------------------
   3. BACKGROUND CANVAS
   ------------------------------------------------------------ */
#particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* ------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------ */
.page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;       /* Fallback for older browsers */
  height: 100svh;      /* Small viewport height — fits even with browser address bar visible */
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: transparent; /* grain/vignette shows through */
}

main {
  flex: 1;
  min-height: 0; /* prevent flex overflow — critical architectural fix */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  z-index: 2;
}


/* ------------------------------------------------------------
   5. HEADER / NAV — two-row Hermes style, warm cream
   ------------------------------------------------------------ */
header, .site-header {
  width: 100%;
  background: #f5f4f0;
  z-index: 10;
  opacity: 0;
  animation: fadeIn 1.0s cubic-bezier(0.16,1,0.3,1) 3.8s forwards;
}

/* Row 1 — logo centered */
.header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 56px 10px;
  position: relative;
}

/* Logo — stacked: mark above CLOUVI above SINGAPORE */
.header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
}

.logo-mark {
  height: 26px;
  width: auto;
  display: block;
}

.logo-text {
  font-family: var(--ff-display);
  font-size: 18px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #0a0a0a;
  line-height: 1;
}

.logo-text-wrap {
  display: flex;
  align-items: center;
  flex-direction: column; /* stacked on desktop */
  gap: 1px;
}

.logo-sep { display: none; } /* removed — separator no longer used */

.logo-singapore {
  font-family: var(--ff-display);
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0a0a0a;
  line-height: 1;
}

/* Gold separator between logo row and nav row */
.header-sep {
  height: 1px;
  background: rgba(180,140,20,0.2);
  margin: 0 56px;
}

/* Row 2 — nav links centered */
.header-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 56px;
}

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-link {
  font-size: 10px;
  letter-spacing: 3px;
  color: #3a3228;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
  font-family: var(--ff-mono);
}

.nav-link:hover { color: #0a0a0a; }

/* CRAFT YOURS — gold text, no box */
.nav-btn {
  font-size: 10px;
  letter-spacing: 3px;
  color: #B8960A;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
  font-family: var(--ff-mono);
}

.nav-btn:hover { color: #9A7200; }

/* CART — always visible, greyed when empty */
.nav-cart {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(58,50,40,0.4);
  text-transform: uppercase;
  font-family: var(--ff-mono);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 3px;
  -webkit-appearance: none;
  appearance: none;
}

.nav-cart::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 11px;
  background: rgba(180,140,20,0.3);
  margin-right: 12px;
}

.nav-cart:hover { color: #0a0a0a; }

.nav-cart-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(58,50,40,0.35);
  transition: color 0.3s ease;
}

.nav-cart.has-items { color: #0a0a0a; }
.nav-cart.has-items .nav-cart-count { color: #B8960A; }

/* Cart count pulse — fires when item flies in */
@keyframes cartCountPulse {
  0%   { transform: scale(1); color: rgba(58,50,40,0.35); }
  40%  { transform: scale(1.6); color: #B8960A; }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.cart-count-pulse {
  animation: cartCountPulse 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
  display: inline-block;
}


/* ------------------------------------------------------------
   6. HERO TITLE
   ------------------------------------------------------------ */
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 58px); /* scales with viewport, never wraps in 60% col */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-line-1 {
  display: block;
  min-height: 1.18em;
  color: var(--text);
  font-size: 0.8em;
}

.hero-line-2 {
  display: block;
  min-height: 1.18em;
  padding-bottom: 6px;
  background-image: var(--gold-gradient);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.8s ease;
}

.hero-line-2.underline-active { background-size: 100% 1px; }

/* Unified gradient across THE + STANDARD. — single continuous sweep */
.gold-unified {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* Children inherit — no independent gradient */
#line2-prefix,
.gold {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: inherit;
}

.cursor-blink {
  display: inline-block;
  width: 3px;
  height: 0.75em;
  background: var(--text);
  margin-left: 4px;
  vertical-align: middle;
  -webkit-text-fill-color: var(--text);
  animation: blink 0.7s step-end infinite;
}


/* ------------------------------------------------------------
   7. BESPOKE CONTEXT LINE
   ------------------------------------------------------------ */
.hero-context {
  font-family: var(--ff-mono);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 3px;
  color: rgba(140,100,10,0.75);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.bespoke-word {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.bespoke-word.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------------------
   8. CYCLER
   ------------------------------------------------------------ */
.cycler-wrap {
  font-family: var(--ff-mono);
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 44px;
  min-height: 18px;
  opacity: 0;
  transition: opacity 0.4s ease;
}


/* ------------------------------------------------------------
   9. CTA BUTTONS
   ------------------------------------------------------------ */
.cta-wrapper {
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* UNIFIED CTA — equal weight, white outlined, clean inversion hover */
.btn-cta {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(10,10,10,0.2);
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 3px;
  padding: 18px 52px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-cta:hover {
  background: #B8960A;
  color: #ece7de;
  border-color: #B8960A;
}


/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */
footer, .site-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 56px;
  z-index: 10;
  font-size: 10px;
  color: #3a3228;
  letter-spacing: 2px;
  opacity: 0;
  animation: fadeIn 1.0s cubic-bezier(0.16,1,0.3,1) 4.0s forwards;
  background: #f5f4f0; /* warm cream — consistent with nav */
}

.footer-links {
  display: flex;
  gap: 32px;
}

.footer-links a {
  color: rgba(60,40,10,0.6);
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

.footer-links a:hover { color: #0a0a0a; }


/* ------------------------------------------------------------
   12. PRELOADER
   ------------------------------------------------------------ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ece7de; /* matches page — seamless reveal */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Grain on preloader — matches page surface */
#preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
}

#preloader::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 40%,
    transparent 35%,
    rgba(160,120,40,0.04) 60%,
    rgba(100,70,20,0.09) 100%
  );
}



.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* mark to name gap */
}

/* Cloud mark wrapper — clip-path reveal left to right */
#plMarkWrap {
  width: 72px;
  height: 72px;
  position: relative;
  clip-path: inset(0 100% 0 0);
}

/* Both imgs stacked — white on top, gold below */
.pl-mark-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

/* Gold img hidden initially — black mark shows first */
.pl-mark-gold {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* Name row */
#plNameRow {
  display: flex;
  align-items: flex-end;
  position: relative;
  padding-bottom: 0; /* no gap — prevents bulge on warm white */
}

/* Each letter — starts white, gold gradient revealed on .gold class */
.pl-letter {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  text-transform: uppercase;
  display: inline-block;
  letter-spacing: 10px;
  opacity: 0;
  /* Gold gradient pre-loaded, hidden behind white text fill */
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #0a0a0a; /* dark on warm white preloader bg */
}

/* Gold state — gradient shows through */
.pl-letter.gold,
.pl-letter[style*="transparent"] {
  -webkit-text-fill-color: transparent;
}

/* SINGAPORE — appears after letters, turns gold at same moment */
.pl-singapore {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: -12px 0 0 0; /* pull up close to CLOUVI */
  opacity: 0;
  /* Gold gradient pre-loaded — same as letters */
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(10,8,6,0.6); /* dark initially */
}

/* Gold glow underline — kept minimal, hidden by default */
#plUnderline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0%;
  opacity: 0;
  background: var(--gold-gradient);
  /* box-shadow added by JS when underline draws — prevents glow bleed at opacity:0 */
}


/* ------------------------------------------------------------
   13. CHAT BUBBLE — all pages
   ------------------------------------------------------------ */
#chatWrapper {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-bubble {
  width: 48px;
  height: 48px;
  background: rgba(236,231,222,0.12); /* ghost — almost transparent */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(180,130,20,0.45);
  transform: rotate(45deg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: pulseChatDiamond 3s ease-in-out infinite;
  flex-shrink: 0;
}

.chat-bubble:hover,
.chat-bubble.active {
  border-color: rgba(180,130,20,0.8);
  background: rgba(180,130,20,0.08);
}

.chat-bubble-icon {
  transform: rotate(-45deg);
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: var(--gold);
  line-height: 1;
}

.chat-nudge {
  display: none;
  background: rgba(245,244,240,0.95);
  border: 1px solid rgba(180,130,20,0.25);
  border-left: 2px solid #B8960A;
  padding: 10px 14px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(60,40,10,0.8);
  max-width: 200px;
  white-space: nowrap;
  animation: fadeInUp 0.4s ease forwards;
}

.chat-nudge.visible { display: block; }

.chat-panel {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 320px;
  background: #f5f4f0; /* warm white — matches site */
  border: 1px solid rgba(180,130,20,0.3);
  border-top: 2px solid rgba(180,130,20,0.7);
  display: none;
  flex-direction: column;
  animation: slideUpPanel 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  z-index: 9001;
}

.chat-panel.open { display: flex; }

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(180,130,20,0.12);
}

.chat-panel-title {
  font-family: var(--ff-display);
  font-size: 12px;
  letter-spacing: 3px;
  color: #B8960A;
}

.chat-panel-close {
  background: transparent;
  border: none;
  color: rgba(60,40,10,0.5);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--ff-mono);
}

.chat-panel-close:hover { color: #0a0a0a; }

.chat-screen { padding: 16px 20px 24px; }
.chat-screen.hidden { display: none; }

.chat-message {
  font-family: var(--ff-display);
  font-size: 16px;
  letter-spacing: 1px;
  color: #0a0a0a;
  margin-bottom: 8px;
  line-height: 1.5;
}

.chat-submessage {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: rgba(60,40,10,0.6);
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 16px;
}

.chat-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.chat-opt-btn {
  background: transparent;
  border: 1px solid rgba(180,130,20,0.2);
  color: #0a0a0a;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s;
  text-transform: uppercase;
}

.chat-opt-btn:hover { border-color: #B8960A; background: rgba(180,130,20,0.06); }

.chat-opt-sub {
  font-size: 9px;
  color: rgba(60,40,10,0.55);
  font-style: italic;
  letter-spacing: 1px;
}

.chat-opt-tag {
  background: transparent;
  border: 1px solid rgba(180,130,20,0.2);
  color: rgba(60,40,10,0.6);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 2px;
  padding: 8px 14px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.25s;
  text-align: left;
}

.chat-opt-tag:hover,
.chat-opt-tag.selected {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,175,55,0.06);
}

.chat-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 10px 0;
  outline: none;
  margin: 16px 0 12px;
  letter-spacing: 1px;
  transition: border-color 0.3s;
}

.chat-input:focus { border-color: var(--gold); }
.chat-input::placeholder { color: rgba(122,122,117,0.5); font-size: 10px; }

.chat-submit-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(244,244,240,0.2);
  color: var(--text);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s;
}

.chat-submit-btn:hover {
  border-color: var(--gold);
  background: rgba(212,175,55,0.06);
  color: var(--gold);
}

.chat-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-back-btn {
  background: transparent;
  border: none;
  color: rgba(10,10,10,0.4);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 16px 0 0;
  display: block;
  width: 100%;
  text-align: left;
  transition: color 0.2s;
}

.chat-back-btn:hover {
  color: var(--gold);
}

.chat-restart-link {
  background: transparent;
  border: none;
  color: rgba(10,10,10,0.35);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 20px 0 0;
  display: block;
  transition: color 0.2s;
}

.chat-restart-link:hover {
  color: var(--gold);
}


/* ------------------------------------------------------------
   14. ANIMATIONS & KEYFRAMES
   ------------------------------------------------------------ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes pulseChatDiamond {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%       { box-shadow: 0 0 0 6px rgba(212,175,55,0.1); }
}

@keyframes slideUpPanel {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------------------
   15. MEDIA QUERIES
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   HAMBURGER TRIGGER — hidden on desktop
   ------------------------------------------------------------ */
.menu-trigger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 100;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.menu-line {
  width: 22px;
  height: 1px;
  background: #0a0a0a; /* dark lines on cream nav */
  display: block;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* X state when active */
.menu-trigger.active .menu-line:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-trigger.active .menu-line:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}


/* ------------------------------------------------------------
   MOBILE NAV OVERLAY
   ------------------------------------------------------------ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(236,231,222,0.98); /* warm cream overlay */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.mobile-nav.open {
  display: flex;
  animation: mobileNavIn 0.3s ease forwards;
}

@keyframes mobileNavIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mobile-nav-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 24px;
}

.mobile-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-nav-mark {
  height: 20px;
  width: auto;
}

.mobile-nav-wordmark {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 5px;
  color: #0a0a0a;
  text-transform: uppercase;
}

.mobile-nav-close {
  background: transparent;
  border: none;
  color: #0a0a0a;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.mobile-nav-close:hover { color: #B8960A; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.mobile-nav-link {
  font-family: 'Cinzel', serif;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 400;
  letter-spacing: 5px;
  color: #0a0a0a;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mobile-nav-link.visible {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-link:hover { opacity: 0.7; }

.mobile-nav-gold { color: #B8960A; }
.mobile-nav-gold:hover { color: #9A7200; opacity: 1; }

.mobile-nav-sub-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  bottom: max(32px, env(safe-area-inset-bottom));
  left: 24px;
  right: 24px;
}

.mobile-nav-sub {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(60,40,10,0.55);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mobile-nav-sub:hover { color: #0a0a0a; }

.mobile-nav-dot {
  color: rgba(180,130,20,0.4);
  font-size: 10px;
}


/* ------------------------------------------------------------
   MOBILE BREAKPOINT
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Mobile nav — no hamburger, full nav visible */
  .menu-trigger  { display: none; }
  .header-bottom { display: flex !important; }
  .header-sep    { display: block; }

  /* Header top — centered on mobile */
  .header-top {
    justify-content: center;
    padding: 14px 20px 8px;
    padding-top: max(14px, env(safe-area-inset-top));
  }

  /* Mobile logo — stacked, centered, bigger */
  .header-logo {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /* Cloud mark bigger on mobile */
  .logo-mark { height: 28px; margin-bottom: 2px; }

  /* CLOUVI / SINGAPORE stacked on mobile — separator removed */
  .logo-text { font-size: 17px; letter-spacing: 5px; }

  .logo-singapore {
    display: block !important;
    font-size: 12px;
    letter-spacing: 2.5px;
  }

  /* Nav links row — compact on mobile */
  .header-bottom {
    padding: 8px 16px 10px;
  }

  .nav-links { gap: 24px; }
  .nav-link, .nav-btn { font-size: 9px !important; letter-spacing: 2px !important; }

  /* Hero title — slightly tighter */
  .hero-title {
    font-size: clamp(24px, 7vw, 36px);
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  /* Subtext */
  .hero-context {
    font-size: 10px;
    letter-spacing: 2px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
    margin-bottom: 12px;
  }

  /* Cycler */
  .cycler-wrap {
    font-size: 10px;
    letter-spacing: 2px;
    padding: 0 16px;
    text-align: center;
    margin-bottom: 28px;
  }

  /* CTA buttons — stack, full width, compact */
  .cta-wrapper {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 0 20px;
  }

  .btn-cta {
    width: 100%;
    text-align: center;
    padding: 15px 20px;
    min-height: 50px;
    font-size: 11px;
    letter-spacing: 2px;
  }

  /* Footer — compact, stacked */
  footer, .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 14px 24px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    font-size: 9px;
    background: #f5f4f0;
    color: #3a3228;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }

  /* Chat — proper safe area bottom */
  .chat-panel {
    width: calc(100vw - 32px);
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  #chatWrapper {
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: 16px;
  }

  /* Preloader smaller on mobile */
  .pl-letter   { font-size: 16px; letter-spacing: 6px; }
  #plMarkWrap  { width: 48px; height: 48px; }
  .pl-mark-img { width: 48px; height: 48px; }

}

/* Extra small phones */
@media (max-width: 390px) {
  .hero-title { font-size: 22px; }
  .mobile-nav-link { font-size: 22px; letter-spacing: 3px; }
  .btn-cta { font-size: 10px; padding: 14px 16px; }
}