/* ============================================================
   TONY K INVESTMENT LTD — Design System
   Palette: warm charcoal ground + muted brass-gold + warm ivory
   Type: Fraunces (display serif, sparing) + Manrope (workhorse sans)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ground */
  --ink:        #0A0908;
  --charcoal:   #14120E;
  --charcoal-2: #1B1812;
  --line:       #2E2A22;
  --line-soft:  #232019;

  /* accents */
  --gold:       #B78A4F;
  --gold-bright:#D8B27C;
  --gold-dim:   #8C6B3E;

  /* light surfaces */
  --ivory:      #F4EFE4;
  --ivory-2:    #EAE2D0;
  --paper:      #FBF9F4;

  /* text on dark */
  --text-hi:    #F4EFE4;
  --text-mid:   #C9C1B1;
  --text-low:   #8C8574;

  /* text on light */
  --text-dark-hi: #1C1912;
  --text-dark-mid:#5B5544;
  --text-dark-low:#8A8371;

  /* business accent tints */
  --plaza-tint:   #EFE9DA;
  --fabric-tint:  #E7DECB;
  --lounge-tint:  #171310;

  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 22px;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--text-hi);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow{
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width: 22px; height:1px;
  background: var(--gold);
  display:inline-block;
}

h1,h2,h3{ font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }

.h-display{
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.04;
  font-weight: 500;
}
.h-section{
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
}
.h-card{ font-size: 1.5rem; line-height:1.2; }

.lede{
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--text-mid);
  max-width: 46ch;
  line-height:1.7;
}
.on-light .lede{ color: var(--text-dark-mid); }

.section-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-low);
  font-weight: 700;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 26px;
  border-radius: 3px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn svg{ width:15px; height:15px; flex-shrink:0; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }
.btn:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--gold-bright); }

.btn-line{ background: transparent; color: var(--text-hi); border-color: var(--line); }
.btn-line:hover{ border-color: var(--gold); color: var(--gold-bright); }

.btn-line-dark{ background: transparent; color: var(--text-dark-hi); border-color: #D8CFB8; }
.btn-line-dark:hover{ border-color: var(--gold-dim); color: var(--gold-dim); }

.btn-whatsapp{ background:#20402E; color:#EFE9DA; }
.btn-whatsapp:hover{ background:#28503A; }

.btn-block{ width:100%; justify-content:center; }

/* ---------- header / nav ---------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  padding: 22px 0;
  transition: padding .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding: 14px 0;
  background: rgba(10,9,8,.88);
  backdrop-filter: blur(10px);
  border-color: var(--line-soft);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.brandmark{ display:flex; align-items:center; gap:12px; }
.brandmark .mark{ width:34px; height:34px; flex-shrink:0; }
.brandmark .word{ font-family: var(--serif); font-size: 1rem; letter-spacing:.02em; line-height:1.15; }
.brandmark .word b{ display:block; font-weight:600; color: var(--text-hi); }
.brandmark .word span{ display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); font-weight:700; }

.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-links a{
  font-size: 14px; font-weight:600; color: var(--text-mid);
  position:relative; padding: 4px 0;
  transition: color .25s ease;
}
.nav-links a:hover{ color: var(--text-hi); }
.nav-links a.active{ color: var(--gold-bright); }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--gold);
}
.nav-cta{ display:flex; align-items:center; gap:18px; }

.menu-btn{
  display:none;
  width: 40px; height:40px;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:3px;
  color: var(--text-hi); cursor:pointer;
}
.menu-btn svg{ width:18px; height:18px; }

.mobile-menu{
  position: fixed; inset:0; z-index: 600;
  background: var(--ink);
  display:flex; flex-direction:column;
  padding: 22px var(--gutter) 32px;
  overflow-y:auto;
  transform: translateY(-8px);
  opacity:0; visibility:hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.mobile-menu.is-open{
  opacity:1; visibility:visible; transform: translateY(0);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-menu .mm-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 48px; }
.mobile-menu ul{ display:flex; flex-direction:column; gap: 6px; }
.mobile-menu a{
  font-family: var(--serif); font-size: 2rem; font-weight:500; color: var(--text-hi);
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a.active{ color: var(--gold-bright); }
.mobile-menu .mm-foot{ margin-top: 28px; padding-top: 0; }
.mobile-menu .mm-foot .btn{ width: 100%; justify-content:center; }
body.menu-open{ overflow:hidden; }

/* ---------- hero mark motif (shared decorative geometry) ---------- */
.mark-motif{
  position:absolute; pointer-events:none;
  opacity: .5;
}
.mark-motif svg{ width:100%; height:100%; display:block; }

/* ---------- section shell ---------- */
section{ position: relative; }
.pad-xl{ padding: clamp(72px, 11vw, 148px) 0; }
.pad-l{ padding: clamp(56px, 8vw, 108px) 0; }
.pad-m{ padding: clamp(40px, 6vw, 72px) 0; }

.on-light{ background: var(--paper); color: var(--text-dark-hi); }
.on-light h1, .on-light h2, .on-light h3{ color: var(--text-dark-hi); }
.on-light .section-label{ color: var(--text-dark-low); }

.divider{ height:1px; background: var(--line); border:0; margin:0; }
.divider-light{ height:1px; background: #DED3B8; border:0; margin:0; }

/* ---------- hero (generic) ---------- */
.hero{
  padding-top: clamp(150px, 20vw, 220px);
  padding-bottom: clamp(70px, 10vw, 120px);
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 82% 8%, #1E1B14 0%, var(--ink) 55%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items:center;
}
.hero-copy .h-display{ margin: 20px 0 22px; }
.hero-actions{ display:flex; gap:16px; margin-top: 36px; flex-wrap:wrap; }
.hero-visual{
  position:relative;
  border-radius: 2px;
  overflow:hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4/5;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .frame-line{
  position:absolute; inset: 14px;
  border: 1px solid rgba(216,178,124,.35);
  pointer-events:none;
}
.hero-visual .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(6,5,4,.86), transparent);
  font-size: 12px; color: var(--text-mid); letter-spacing:.02em;
}

/* simple page hero (interior pages) */
.page-hero{
  padding-top: clamp(140px, 18vw, 190px);
  padding-bottom: clamp(48px, 7vw, 84px);
}
.page-hero .h-display{ margin-top: 18px; }
.page-hero .lede{ margin-top: 18px; }

/* ---------- intro / about split ---------- */
.split{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,6vw,80px); align-items:start;
}
.split .col-media{ position:relative; }
.split img{ border-radius: 2px; border:1px solid var(--line); }
.split-reverse{ grid-template-columns: 1.1fr .9fr; }
.split-reverse .col-media{ order:2; }
.split .stat-row{ display:flex; gap: 40px; margin-top: 36px; }
.split .stat b{ display:block; font-family: var(--serif); font-size: 1.7rem; color: var(--gold-bright); }
.split .stat span{ font-size:13px; color: var(--text-low); }

/* ---------- business portfolio ---------- */
.portfolio-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: 44px; flex-wrap:wrap; }

.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.biz-card{
  position:relative;
  padding: 40px 32px 36px;
  min-height: 420px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  transition: background-color .4s ease;
}
.biz-card .biz-media{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
}
.biz-card .biz-media::after{
  content:''; position:absolute; inset:0;
}
.biz-card .biz-content{ position:relative; z-index:2; }
.biz-card .biz-cat{ display:block; width:max-content; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; margin-top:7px; padding:4px 8px 3px; background:#090909; color:#fff; border-radius:3px; }
.biz-card .biz-name{ font-family: var(--serif); font-size:1.85rem; margin-bottom:12px; }
.biz-card p{ font-size: 14px; max-width: 32ch; margin-bottom:22px; }
.biz-card .biz-cta{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.02em; }
.biz-card .biz-cta svg{ width:14px; height:14px; transition: transform .35s var(--ease); }
.biz-card:hover .biz-cta svg{ transform: translateX(5px); }

.biz-card.plaza{ background: var(--plaza-tint); color: var(--text-dark-hi); }
.biz-card.plaza .biz-media::after{ background: linear-gradient(0deg, rgba(239,233,218,.97) 10%, rgba(239,233,218,.35) 65%); }
.biz-card.plaza .biz-cat{ color:#fff; }
.biz-card.plaza p{ color: var(--text-dark-mid); }
.biz-card.plaza .biz-cta{ color: var(--text-dark-hi); }

.biz-card.fabric{ background: var(--fabric-tint); color: var(--text-dark-hi); }
.biz-card.fabric .biz-media::after{ background: linear-gradient(0deg, rgba(231,222,203,.97) 10%, rgba(231,222,203,.3) 65%); }
.biz-card.fabric .biz-cat{ color:#fff; }
.biz-card.fabric p{ color: var(--text-dark-mid); }
.biz-card.fabric .biz-cta{ color: var(--text-dark-hi); }

.biz-card.lounge{ background: var(--lounge-tint); color: var(--ivory); }
.biz-card.lounge .biz-media::after{ background: linear-gradient(0deg, rgba(10,9,8,.94) 10%, rgba(10,9,8,.25) 65%); }
.biz-card.lounge .biz-cat{ color:#fff; }
.biz-card.lounge p{ color: var(--text-mid); }
.biz-card.lounge .biz-cta{ color: var(--ivory); }

/* ---------- values ---------- */
.values-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border-top: 1px solid var(--line);
}
.value-item{
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--line);
}
.value-item:last-child{ border-right:0; }
.value-item .vnum{ font-family:var(--serif); color: var(--gold); font-size: 1rem; margin-bottom: 18px; display:block; }
.value-item h3{ font-size: 1.15rem; margin-bottom:10px; }
.value-item p{ font-size: 13.5px; color: var(--text-low); line-height:1.6; }

/* ---------- spotlight ---------- */
.spotlight{
  display:grid; grid-template-columns: 1fr 1fr; min-height: 480px;
}
.spotlight-media{ position:relative; overflow:hidden; }
.spotlight-media img{ width:100%; height:100%; object-fit:cover; }
.spotlight-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(32px,5vw,80px);
  background: var(--charcoal);
}
.spotlight-copy .h-section{ margin: 16px 0 18px; }
.spotlight-copy .lede{ margin-bottom: 30px; }

/* ---------- final CTA ---------- */
.final-cta{
  text-align:center;
  padding: clamp(70px,11vw,130px) 0;
  background: linear-gradient(180deg, var(--ink), #17140F);
  border-top: 1px solid var(--line);
}
.final-cta .h-display{ margin: 18px auto 26px; max-width: 16ch; }
.final-cta .actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: 8px; }

/* ---------- footer ---------- */
footer{ background: var(--ink); border-top: 1px solid var(--line); padding: 64px 0 28px; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 40px; padding-bottom: 48px; }
.foot-brand .brandmark{ margin-bottom: 18px; }
.foot-brand p{ color: var(--text-low); font-size: 13.5px; max-width: 34ch; line-height:1.7; }
.foot-col h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-low); margin-bottom: 18px; font-weight:700; }
.foot-col ul{ display:flex; flex-direction:column; gap: 11px; }
.foot-col a{ font-size: 14px; color: var(--text-mid); transition: color .2s ease; }
.foot-col a:hover{ color: var(--gold-bright); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 12px;
  padding-top: 26px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--text-low);
}
.foot-bottom a{ color: var(--text-low); }
.foot-bottom a:hover{ color: var(--gold-bright); }

/* ---------- status chip ---------- */
.tbc{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; letter-spacing:.03em;
  color: var(--gold-dim); background: rgba(183,138,79,.1);
  border: 1px dashed rgba(183,138,79,.45);
  padding: 3px 9px; border-radius: 3px;
  font-weight:700;
}
.on-light .tbc{ color:#8A6A34; background: rgba(138,106,52,.08); }

/* ==============================================================
   PAGE-SPECIFIC — ABOUT
   ============================================================== */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2px; background:var(--line); border:1px solid var(--line); }
.pillar{ background: var(--charcoal); padding: 36px 30px; }
.pillar h3{ font-size:1.3rem; margin: 14px 0 12px; }
.pillar p{ color: var(--text-low); font-size: 14px; }
.pillar .pillar-icon{ width:30px; height:30px; color:var(--gold); }

.timeline-note{
  border-left: 2px solid var(--gold);
  padding: 6px 0 6px 22px;
  color: var(--text-mid); font-size: 14.5px; max-width: 60ch;
}

/* ==============================================================
   PAGE-SPECIFIC — BUSINESSES INDEX
   ============================================================== */
.biz-feature{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px,5vw,64px);
  align-items:center;
  padding: clamp(48px,7vw,88px) 0;
}
.biz-feature:not(:last-child){ border-bottom: 1px solid var(--line); }
.biz-feature .idx{ font-family:var(--serif); font-size:.95rem; color:var(--gold); margin-bottom:14px; display:block; }
.biz-feature img{ border-radius:2px; border:1px solid var(--line); width:100%; aspect-ratio: 5/4; object-fit:cover; }
.biz-feature.rev{ direction: rtl; }
.biz-feature.rev > *{ direction: ltr; }
.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 22px; }
.tag{ font-size:12px; padding:5px 12px; border:1px solid var(--line); border-radius:20px; color:var(--text-mid); }

/* ==============================================================
   PAGE-SPECIFIC — TONY K PLAZA (light retail theme)
   ============================================================== */
.plaza-theme{ background: var(--paper); color: var(--text-dark-hi); }
.plaza-theme .site-header:not(.is-scrolled){ }
.plaza-hero{
  background: var(--paper);
  padding-top: clamp(150px,20vw,210px);
  padding-bottom: 0;
}
.plaza-hero .eyebrow{ color: var(--gold-dim); }
.plaza-hero .eyebrow::before{ background: var(--gold-dim); }
.plaza-hero .h-display{ color: var(--text-dark-hi); }
.category-strip{
  display:grid; grid-template-columns: repeat(5,1fr); border-top:1px solid #DED3B8; border-bottom:1px solid #DED3B8;
}
.category-item{
  padding: 26px 18px; text-align:center; border-right:1px solid #DED3B8;
}
.category-item:last-child{ border-right:0; }
.category-item svg{ width:26px; height:26px; color: var(--gold-dim); margin: 0 auto 12px; }
.category-item span{ font-size:13px; font-weight:700; color: var(--text-dark-hi); }
.plaza-gallery{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2,220px); gap: 4px; }
.plaza-gallery a, .plaza-gallery .g-item{ position:relative; overflow:hidden; display:block; }
.plaza-gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.plaza-gallery a:hover img{ transform: scale(1.045); }
.g-span2{ grid-row: span 2; }
.info-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border:1px solid #DED3B8; }
.info-item{ padding: 30px 28px; border-right:1px solid #DED3B8; }
.info-item:last-child{ border-right:0; }
.info-item h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dim); margin-bottom:12px; font-weight:800; }
.info-item p{ font-size:14.5px; color: var(--text-dark-mid); line-height:1.7; }

/* ==============================================================
   PAGE-SPECIFIC — KAYE FABRIC (catalogue theme)
   ============================================================== */
.fabric-theme{ background: #FBF8F2; color: var(--text-dark-hi); }
.fabric-hero{
  padding-top: clamp(150px,20vw,210px);
  background: linear-gradient(180deg,#F1E9D8,#FBF8F2);
}
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 34px; }
.filter-chip{
  font-size: 13px; font-weight:700; padding: 9px 18px; border-radius: 20px;
  border: 1px solid #DED0AE; background: transparent; color: var(--text-dark-mid); cursor:pointer;
  transition: all .2s ease;
}
.filter-chip.is-active, .filter-chip:hover{ background: var(--text-dark-hi); border-color: var(--text-dark-hi); color:#FBF8F2; }

.product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product-card{
  background: #fff; border:1px solid #ECE3CC; border-radius: 6px; overflow:hidden;
  display:flex; flex-direction:column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.product-card:hover{ box-shadow: 0 18px 40px -22px rgba(30,25,10,.35); transform: translateY(-3px); }
.product-media{ aspect-ratio: 4/5; overflow:hidden; background:#EFE7D2; position:relative; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-cat-badge{
  position:absolute; top:12px; left:12px; background: rgba(20,18,14,.82); color:#F4EFE4;
  font-size: 10.5px; letter-spacing:.08em; text-transform:uppercase; padding: 5px 10px; border-radius: 3px; font-weight:700;
}
.product-body{ padding: 20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-body h3{ font-family: var(--serif); font-size:1.2rem; }
.product-body p{ font-size:13.5px; color: var(--text-dark-mid); line-height:1.6; flex:1; }
.product-price{ font-weight:800; font-size:14px; color: var(--gold-dim); }
.product-actions{ display:flex; gap:8px; margin-top:8px; }
.product-actions .btn{ padding: 11px 16px; font-size:12.5px; flex:1; justify-content:center; }
.btn-select{ background:#0A1A2D; color:#fff; }
.btn-select:hover, .btn-select.is-selected{ background:#1E66F5; color:#fff; }

.cart-button{
  position:fixed; top:112px; right:24px; z-index:550;
  width:50px; height:50px; border:1px solid #C9D7E7; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#0A1A2D; color:#fff;
  box-shadow:0 10px 24px rgba(9,30,66,.2); cursor:pointer;
}
.cart-button svg{ width:22px; height:22px; }
.cart-count{ position:absolute; top:-5px; right:-5px; min-width:21px; height:21px; padding:0 5px; border-radius:11px; background:#1E66F5; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.cart-button:not(.has-items) .cart-count{ background:#71849C; }
.cart-button:focus-visible{ outline:2px solid #1E66F5; outline-offset:4px; }
.cart-modal-card{ background:#fff; color:var(--text-dark-hi); border-radius:10px; max-width:680px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; box-shadow:0 20px 60px rgba(9,30,66,.22); }
.cart-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.cart-modal-head h3{ font-size:1.8rem; margin-top:8px; }
.cart-modal-close{ position:static; flex-shrink:0; }
.cart-list{ display:flex; flex-direction:column; gap:10px; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #DCE5F0; }
.cart-item strong, .cart-item span{ display:block; }
.cart-item strong{ font-family:var(--serif); font-size:1.1rem; }
.cart-item span{ color:var(--text-dark-mid); font-size:12.5px; margin-top:3px; }
.cart-item-controls{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.cart-item-controls button{ width:30px; height:30px; border:1px solid #C9D7E7; background:#fff; color:var(--text-dark-hi); border-radius:4px; cursor:pointer; font-size:16px; }
.cart-item-controls .cart-remove{ margin-left:5px; color:#B43D3D; }
.cart-empty{ padding:22px 0; color:var(--text-dark-mid); font-size:14px; }
.cart-empty[hidden]{ display:none; }
.cart-total{ display:flex; justify-content:space-between; gap:20px; padding:18px 0; margin-top:8px; border-top:1px solid #DCE5F0; color:var(--text-dark-mid); font-size:13px; }
.cart-total strong{ color:var(--text-dark-hi); }

body.plaza-theme .site-header:not(.is-scrolled),
body.fabric-theme .site-header:not(.is-scrolled){ background:rgba(255,255,255,.94); border-color:#DCE5F0; }
body.plaza-theme .site-header:not(.is-scrolled) .brandmark .word b,
body.fabric-theme .site-header:not(.is-scrolled) .brandmark .word b{ color:#0A1A2D; }
body.plaza-theme .site-header:not(.is-scrolled) .nav-links a,
body.fabric-theme .site-header:not(.is-scrolled) .nav-links a{ color:#4B6078; }
body.plaza-theme .site-header:not(.is-scrolled) .nav-links a:hover,
body.fabric-theme .site-header:not(.is-scrolled) .nav-links a:hover,
body.plaza-theme .site-header:not(.is-scrolled) .nav-links a.active,
body.fabric-theme .site-header:not(.is-scrolled) .nav-links a.active{ color:#1457B8; }
body.plaza-theme .site-header:not(.is-scrolled) .menu-btn,
body.fabric-theme .site-header:not(.is-scrolled) .menu-btn{ color:#0A1A2D; border-color:#C9D7E7; }

/* product detail modal */
.modal-overlay{
  position: fixed; inset:0; z-index: 900;
  background: rgba(10,9,7,.7);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; transition: opacity .3s ease; }
.modal-card{
  background:#FBF8F2; color: var(--text-dark-hi); border-radius: 8px; max-width: 780px; width:100%;
  max-height: 88vh; overflow-y:auto;
  display:grid; grid-template-columns: 1fr 1fr;
  transform: translateY(14px); transition: transform .3s var(--ease);
}
.modal-overlay.is-open .modal-card{ transform: translateY(0); }
.modal-media{ aspect-ratio: 4/5; }
.modal-media img{ width:100%; height:100%; object-fit:cover; }
.modal-body{ padding: 30px 30px 32px; position:relative; }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1px solid #DED0AE; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close svg{ width:15px; height:15px; }
.modal-body h3{ font-family: var(--serif); font-size:1.6rem; margin-bottom:8px; padding-right:36px; }
.modal-cat{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--gold-dim); font-weight:700; margin-bottom:14px; }
.modal-body p.desc{ font-size:14.5px; color: var(--text-dark-mid); line-height:1.7; margin-bottom: 20px; }
.field-row{ margin-bottom:16px; }
.field-row label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-dark-mid); margin-bottom:7px; }
.qty-row{ display:flex; align-items:center; gap:14px; }
.qty-btn{ width:34px; height:34px; border:1px solid #DED0AE; background:transparent; border-radius:4px; font-size:16px; cursor:pointer; }
.qty-value{ font-weight:800; min-width: 24px; text-align:center; }
.field-note{ width:100%; border:1px solid #DED0AE; border-radius:5px; padding:11px 13px; font-family:inherit; font-size:13.5px; resize:vertical; min-height:64px; background:#fff; }
.field-note:focus, .qty-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.catalogue-note{
  display:flex; gap:14px; align-items:flex-start;
  background:#F1E9D8; border:1px solid #E4D8B8; border-radius:6px; padding:18px 20px; margin-top: 50px;
}
.catalogue-note svg{ width:20px;height:20px; color:var(--gold-dim); flex-shrink:0; margin-top:2px; }
.catalogue-note p{ font-size:13.5px; color: var(--text-dark-mid); line-height:1.6; }

/* ==============================================================
   PAGE-SPECIFIC — SHUTDOWN LOUNGE (atmospheric dark theme)
   ============================================================== */
.lounge-theme{ background: #0C0A08; }
.lounge-hero{
  padding-top: clamp(150px,20vw,220px);
  background:
    linear-gradient(180deg, rgba(10,8,6,.35), rgba(10,8,6,.95) 78%),
    linear-gradient(120deg, #221A10, #0C0A08 60%);
}
.lounge-gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.lounge-gallery .g-item{ aspect-ratio: 3/4; overflow:hidden; position:relative; }
.lounge-gallery .g-item.wide{ grid-column: span 2; aspect-ratio: unset; }
.lounge-gallery img{ width:100%; height:100%; object-fit:cover; filter: saturate(.92) brightness(.92); transition: transform .6s var(--ease); }
.lounge-gallery .g-item:hover img{ transform: scale(1.045); }
.g-caption{ position:absolute; left:0; right:0; bottom:0; padding: 14px 16px; font-size:12px; color: var(--text-mid); background: linear-gradient(0deg, rgba(6,5,4,.85), transparent); }

.offerings-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.offering{ background:#100D0A; padding: 34px 26px; }
.offering svg{ width:26px; height:26px; color: var(--gold); margin-bottom:20px; }
.offering h3{ font-size:1.1rem; margin-bottom:10px; }
.offering p{ font-size:13.5px; color: var(--text-low); line-height:1.6; }

.reservation-shell{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 0; border:1px solid var(--line); }
.reservation-info{ padding: clamp(32px,5vw,56px); background: #151009; }
.reservation-info .h-section{ margin: 16px 0 18px; }
.res-detail{ display:flex; gap:14px; padding: 16px 0; border-top:1px solid var(--line-soft); }
.res-detail:first-of-type{ border-top:1px solid var(--line-soft); margin-top: 30px; }
.res-detail svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; margin-top:2px; }
.res-detail b{ display:block; font-size:13.5px; margin-bottom:3px; }
.res-detail span{ font-size:13px; color: var(--text-low); }

.reservation-form{ padding: clamp(32px,5vw,56px); background: #100D0A; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full{ grid-column: 1 / -1; }
.f-field label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--text-low); margin-bottom:9px; }
.f-field input, .f-field select, .f-field textarea{
  width:100%; background: #17130D; border:1px solid var(--line); border-radius:4px;
  padding: 13px 14px; color: var(--text-hi); font-family:inherit; font-size:14px;
}
.f-field textarea{ resize: vertical; min-height: 88px; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{
  outline:none; border-color: var(--gold);
}
.f-field .err{ display:none; color:#D98A6B; font-size:12px; margin-top:6px; }
.f-field.has-error input, .f-field.has-error select, .f-field.has-error textarea{ border-color:#B4573A; }
.f-field.has-error .err{ display:block; }
.form-foot{ margin-top: 28px; }
.form-note{ font-size:12.5px; color: var(--text-low); margin-top:14px; line-height:1.6; }
.form-success{
  display:none; align-items:flex-start; gap:14px;
  background: rgba(183,138,79,.1); border:1px solid rgba(183,138,79,.4); border-radius:5px;
  padding: 18px 20px; margin-top: 22px;
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:20px; height:20px; color: var(--gold); flex-shrink:0; margin-top:1px; }
.form-success p{ font-size:13.5px; color: var(--text-mid); line-height:1.6; }
.form-success b{ display:block; color: var(--text-hi); margin-bottom:4px; }

/* ==============================================================
   PAGE-SPECIFIC — CONTACT
   ============================================================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); }
.contact-card{ border:1px solid var(--line); padding: 30px 28px; }
.contact-card h3{ font-size:1.05rem; margin: 16px 0 10px; }
.contact-card svg{ width:24px; height:24px; color:var(--gold); }
.contact-card p{ font-size:14px; color: var(--text-low); line-height:1.7; }
.contact-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background: var(--line); border:1px solid var(--line); margin-top: 40px; }
.contact-list .contact-card{ background:#fff; border:0; }
.contact-list .contact-card h3{ color:var(--text-dark-hi); }
.contact-list .contact-card p{ color:var(--text-dark-mid); }
.contact-list .contact-card a{ color:#1457B8; font-weight:700; }

/* ---------- reveal-on-load ---------- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-shown{ opacity:1; transform:none; }

/* ==============================================================
   RESPONSIVE
   ============================================================== */
@media (max-width: 1080px){
  .foot-grid{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .value-item{ border-bottom:1px solid var(--line); padding-bottom:28px; }
  .pillars{ grid-template-columns: 1fr; }
  .offerings-grid{ grid-template-columns: repeat(2,1fr); }
  .category-strip{ grid-template-columns: repeat(3,1fr); }
  .category-item:nth-child(3){ border-right:0; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-cta .btn-line{ display:none; }
  .menu-btn{ display:flex; }
  .hero-grid, .split, .split-reverse, .spotlight, .biz-feature, .reservation-shell, .contact-grid{
    grid-template-columns: 1fr !important; direction: ltr !important;
  }
  .split .col-media{ order:-1 !important; }
  .biz-feature img{ aspect-ratio: 16/10; }
  .portfolio-grid{ grid-template-columns: 1fr; }
  .biz-card{ min-height:320px; }
  .plaza-gallery{ grid-template-columns: repeat(2,1fr); grid-template-rows:repeat(3,180px); }
  .g-span2{ grid-row: span 1; }
  .lounge-gallery{ grid-template-columns: repeat(2,1fr); }
  .lounge-gallery .g-item.wide{ grid-column: span 2; aspect-ratio: 16/9; }
  .info-strip{ grid-template-columns: 1fr; }
  .info-item{ border-right:0; border-bottom:1px solid #DED3B8; }
  .modal-card{ grid-template-columns: 1fr; }
  .modal-media{ aspect-ratio: 16/10; }
  .product-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .product-grid{ grid-template-columns: 1fr; }
  .cart-button{ top:88px; right:16px; }
  .cart-modal-card{ padding:22px 18px; }
  .cart-item{ align-items:flex-start; flex-direction:column; }
  .cart-item-controls{ width:100%; justify-content:flex-end; }
  .category-strip{ grid-template-columns: repeat(2,1fr); }
  .category-item:nth-child(3){ border-right:1px solid #DED3B8; }
  .category-item:nth-child(2n){ border-right:0; }
  .foot-grid{ grid-template-columns: 1fr; }
  .plaza-gallery{ grid-template-columns: 1fr; grid-template-rows:repeat(5,180px); }
  .contact-list{ grid-template-columns: 1fr; }
}

/* ============================================================
   TONY K INVESTMENT — BRAND ALIGNMENT PASS
   Direction: clean corporate blue + white, with restrained gold
   inspired by the supplied Tony K Investment / Tony K Plaza profile.
   Lounge pages retain their atmospheric dark treatment.
   ============================================================ */
body:not(.lounge-theme){
  --ink:#07111F;
  --charcoal:#0D1D33;
  --charcoal-2:#132944;
  --line:#DCE5F0;
  --line-soft:#EAF0F7;
  --gold:#C79A45;
  --gold-bright:#E0B86C;
  --gold-dim:#96702F;
  --ivory:#F5F8FC;
  --ivory-2:#EAF1F8;
  --paper:#FFFFFF;
  --text-hi:#F8FBFF;
  --text-mid:#C1CDDD;
  --text-low:#7F91A8;
  --text-dark-hi:#0A1A2D;
  --text-dark-mid:#4B6078;
  --text-dark-low:#72849A;
  --plaza-tint:#EAF3FF;
  --fabric-tint:#F4F7FB;
  --lounge-tint:#101923;
}
body:not(.lounge-theme) .site-header.is-scrolled{
  background:rgba(7,17,31,.94);
  border-color:rgba(255,255,255,.12);
}
body:not(.lounge-theme) .hero{
  background:
    radial-gradient(85% 100% at 90% 0%, #16365B 0%, transparent 62%),
    linear-gradient(135deg,#07111F 0%,#0D1D33 100%);
}
body:not(.lounge-theme) .hero-visual,
body:not(.lounge-theme) .split img{ border-radius:12px; border-color:rgba(255,255,255,.14); }
body:not(.lounge-theme) .hero-visual .frame-line{ inset:12px; border-color:rgba(224,184,108,.45); border-radius:8px; }
body:not(.lounge-theme) .btn{ border-radius:7px; }
body:not(.lounge-theme) .btn-gold{ background:#1E66F5; color:#fff; box-shadow:0 8px 22px rgba(30,102,245,.18); }
body:not(.lounge-theme) .btn-gold:hover{ background:#1554D6; }
body:not(.lounge-theme) .btn-line{ border-color:#40546D; }
body:not(.lounge-theme) .btn-line:hover{ border-color:#6EA0FF; color:#9FC0FF; }
body:not(.lounge-theme) .portfolio-grid{ gap:16px; background:transparent; border:0; }
body:not(.lounge-theme) .biz-card{ min-height:440px; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 35px rgba(9,30,66,.06); }
body:not(.lounge-theme) .biz-card.plaza .biz-media::after{ background:linear-gradient(0deg,rgba(234,243,255,.98) 8%,rgba(234,243,255,.22) 70%); }
body:not(.lounge-theme) .biz-card.fabric .biz-media::after{ background:linear-gradient(0deg,rgba(244,247,251,.98) 8%,rgba(244,247,251,.20) 70%); }
body:not(.lounge-theme) .biz-card.lounge .biz-media::after{ background:linear-gradient(0deg,rgba(7,17,31,.96) 8%,rgba(7,17,31,.20) 70%); }
body:not(.lounge-theme) .spotlight{ border-radius:14px; overflow:hidden; box-shadow:0 14px 45px rgba(9,30,66,.08); }
body:not(.lounge-theme) .spotlight-copy{ background:linear-gradient(145deg,#0D1D33,#102B4A); }
body:not(.lounge-theme) .value-item{ padding-right:24px; }
body:not(.lounge-theme) .value-item .vnum,
body:not(.lounge-theme) .split .stat b{ color:#1E66F5; }
body:not(.lounge-theme) .final-cta{ background:linear-gradient(135deg,#0A1A2D,#12345A); }
body:not(.lounge-theme) footer{ background:#07111F; }
body:not(.lounge-theme) .on-light{ background:#fff; }
body:not(.lounge-theme) .on-light .btn-line-dark{ border-color:#C9D7E7; }
body:not(.lounge-theme) .tbc{ color:#8A6427; background:rgba(199,154,69,.10); border-color:rgba(199,154,69,.45); }
body:not(.lounge-theme) .section-label{ color:#71849C; }
body:not(.lounge-theme) .eyebrow{ color:#DDB56A; }
body:not(.lounge-theme) .eyebrow::before{ background:#DDB56A; }
@media (max-width:900px){
  body:not(.lounge-theme) .portfolio-grid{ gap:14px; }
  body:not(.lounge-theme) .biz-card{ min-height:360px; }
}