/* ============================================================
   Lil Giggles — base styles + two visual directions
   [data-theme="cocoa"]    Direction A — Cocoa & Rainbow (playful)
   [data-theme="boutique"] Direction B — Soft Boutique (refined)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Direction A — Cocoa & Rainbow (default) ---------- */
:root, [data-theme="cocoa"] {
  --bg:        #f4ead9;
  --bg-2:      #efe2cd;
  --surface:   #fffdf8;
  --surface-2: #fbf4e9;
  --ink:       #3a2417;
  --ink-soft:  #6e5644;
  --ink-faint: #9c8470;
  --line:      #e6d6bf;
  --line-soft: #efe3d0;
  --primary:      #43301f;
  --primary-2:    #5a4230;
  --primary-ink:  #fdf6ea;
  --accent:    #d99a78;
  --c-blue:   #9cc6d6;
  --c-peach:  #ecab8b;
  --c-pink:   #edbccb;
  --c-sage:   #bcd6a0;
  --c-butter: #f0cf8c;

  --radius:    22px;
  --radius-sm: 14px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --shadow:    0 18px 40px -24px rgba(58,36,23,.45);
  --shadow-sm: 0 8px 20px -14px rgba(58,36,23,.4);
  --shadow-lg: 0 40px 80px -40px rgba(58,36,23,.5);

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --display-leading: 1.05;
  --body-weight: 500;
  --label-tracking: 0.14em;
  --label-transform: uppercase;
  --label-weight: 700;
  --btn-radius: 999px;
}

/* ---------- Direction B — Soft Boutique ---------- */
[data-theme="boutique"] {
  --bg:        #f3efe8;
  --bg-2:      #ece6db;
  --surface:   #fbf9f5;
  --surface-2: #f4f0e8;
  --ink:       #2c271f;
  --ink-soft:  #6a6253;
  --ink-faint: #9b9384;
  --line:      #ded7c8;
  --line-soft: #e8e2d6;
  --primary:      #2c271f;
  --primary-2:    #423b30;
  --primary-ink:  #f7f3ec;
  --accent:    #b08c6a;
  --c-blue:   #b9cdd2;
  --c-peach:  #d8b59c;
  --c-pink:   #ddc4c6;
  --c-sage:   #c2cdb0;
  --c-butter: #e3cfa0;

  --radius:    7px;
  --radius-sm: 5px;
  --radius-lg: 10px;
  --radius-pill: 4px;
  --shadow:    0 24px 50px -34px rgba(44,39,31,.4);
  --shadow-sm: 0 10px 26px -20px rgba(44,39,31,.35);
  --shadow-lg: 0 50px 90px -50px rgba(44,39,31,.45);

  --font-display: "Newsreader", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: 0;
  --display-leading: 1.08;
  --body-weight: 400;
  --label-tracking: 0.26em;
  --label-transform: uppercase;
  --label-weight: 600;
  --btn-radius: 4px;
}

/* ---------- Dark mode (applies over either direction) ---------- */
[data-mode="dark"] {
  --bg:        #1c130e;
  --bg-2:      #241a14;
  --surface:   #2b201a;
  --surface-2: #352920;
  --ink:       #f4ead9;
  --ink-soft:  #cdbaa7;
  --ink-faint: #9b897a;
  --line:      #463729;
  --line-soft: #392b22;
  --primary:      #5c4331;
  --primary-2:    #6e5240;
  --primary-ink:  #fbf3e8;
  --accent:    #e3a986;
  --shadow:    0 18px 40px -24px rgba(0,0,0,.72);
  --shadow-sm: 0 8px 20px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 40px 80px -40px rgba(0,0,0,.78);
}
[data-mode="dark"] .nav { background: color-mix(in srgb, var(--bg) 88%, transparent); }
[data-mode="dark"] .card { border-color: var(--line-soft); }
.mode-toggle { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--surface); box-shadow: var(--shadow-sm); flex: none; transition: transform .2s, color .2s; }
[data-theme="boutique"] .mode-toggle { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
.mode-toggle:hover { color: var(--ink); transform: translateY(-1px); }
.mode-toggle svg { width: 16px; height: 16px; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 12px; place-items: center; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); flex: none; }
.nav-drawer { display: none; }
@media (max-width: 860px) {
  .nav-burger { display: grid; }
  .nav-book-btn, .nav-account, .nav-device-btn { display: none !important; }
  .nav-drawer { display: flex; flex-direction: column; gap: 2px; padding: 10px clamp(16px,4vw,28px) 18px; border-top: 1px solid var(--line-soft); background: var(--bg); }
  .nav-drawer a { padding: 13px 6px; font-size: 16px; font-weight: 700; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
  .nav-drawer a.active { color: var(--ink); }
  .nav-drawer-actions { display: flex; gap: 10px; margin-top: 14px; }
  .nav-drawer-actions .btn { flex: 1; }
}
.nav-account { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: var(--btn-radius); font-size: 14px; font-weight: 700; color: var(--ink); border: 1.5px solid var(--line); background: var(--surface); transition: border-color .2s, background .2s; white-space: nowrap; }
[data-theme="boutique"] .nav-account { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; border-width: 1px; }
.nav-account:hover { border-color: var(--ink); }
@media (max-width: 860px) { .nav-account { display: none; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  margin: 0;
  color: var(--ink);
}

/* ---------- shared layout ---------- */
.wrap { width: min(1180px, 92vw); margin: 0 auto; }
.section { padding: clamp(56px, 8vw, 110px) 0; }
.eyebrow {
  font-family: var(--font-body);
  text-transform: var(--label-transform);
  letter-spacing: var(--label-tracking);
  font-weight: var(--label-weight);
  font-size: 12.5px;
  color: var(--accent);
  margin: 0 0 14px;
}
[data-theme="boutique"] .eyebrow { color: var(--ink-faint); }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); max-width: 56ch; }

.h-xl { font-size: clamp(38px, 6.4vw, 76px); }
.h-lg { font-size: clamp(30px, 4.4vw, 50px); }
.h-md { font-size: clamp(22px, 2.6vw, 30px); }

/* rainbow divider — Direction A flourish, hidden in boutique */
.rainbow {
  display: flex; gap: 5px; align-items: flex-end; height: 16px;
}
.rainbow i { width: 34px; height: 16px; border-top-left-radius: 34px; border-top-right-radius: 34px; display: block; }
.rainbow i:nth-child(1){ background: var(--c-blue); height: 16px; }
.rainbow i:nth-child(2){ background: var(--c-peach); height: 13px; }
.rainbow i:nth-child(3){ background: var(--c-pink); height: 10px; }
.rainbow i:nth-child(4){ background: var(--c-sage); height: 7px; }
[data-theme="boutique"] .rainbow { display: none; }
.no-flourish .rainbow { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--btn-radius);
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px;
  letter-spacing: .01em; transition: transform .18s ease, background .2s ease, box-shadow .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
[data-theme="boutique"] .btn { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; padding: 16px 30px; }
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); background: var(--primary-2); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
[data-theme="boutique"] .btn-ghost { border-color: var(--ink); border-width: 1px; }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn-soft { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-soft:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-lg { padding: 18px 38px; font-size: 16.5px; }
[data-theme="boutique"] .btn-lg { font-size: 13px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; }
.brand-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 21px; letter-spacing: var(--display-tracking); white-space: nowrap; }
[data-theme="boutique"] .brand-name { letter-spacing: .02em; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 15px; font-weight: 600; color: var(--ink-soft); transition: color .2s; }
[data-theme="boutique"] .nav-links a { font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 860px){ .nav-links { display: none; } }

/* ---------- cards / surfaces ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
[data-theme="boutique"] .card { box-shadow: none; border: 1px solid var(--line); }
.tile { background: #fff; border-radius: var(--radius-sm); }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 13px; font-weight: 600; border: 1px solid var(--line-soft);
}
[data-theme="boutique"] .chip { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; border-radius: 3px; }

.badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
[data-theme="boutique"] .badge { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; border-radius: 3px; }

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* ---------- forms ---------- */
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 0 0 7px; }
[data-theme="boutique"] .field label { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
.input, .textarea, .selectbox {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1.5px solid var(--line); color: var(--ink);
  transition: border-color .2s, box-shadow .2s; font-size: 16px;
}
[data-theme="boutique"] .input, [data-theme="boutique"] .textarea, [data-theme="boutique"] .selectbox { border-width: 1px; border-radius: 5px; }
.input:focus, .textarea:focus, .selectbox:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.textarea { resize: vertical; min-height: 96px; }

/* scrollbar niceties */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* utility */
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.price { font-family: var(--font-display); font-weight: var(--display-weight); }
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ============================================================
   Booking flow
   ============================================================ */
.bk-overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; }
.bk-top { flex: none; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.bk-top-in { width: min(1180px, 94vw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; }
.bk-close { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--surface); box-shadow: var(--shadow-sm); flex: none; transition: transform .15s; }
[data-theme="boutique"] .bk-close { border-radius: 6px; box-shadow: none; border: 1px solid var(--line); }
.bk-close:hover { transform: rotate(90deg); color: var(--ink); }

.bk-steps { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.bk-step { display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: var(--radius-pill); color: var(--ink-faint); }
.bk-step[data-state="now"] { color: var(--ink); }
.bk-step[data-state="done"] { color: var(--ink-soft); cursor: pointer; }
.bk-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-family: var(--font-display);
  background: var(--surface-2); border: 1.5px solid var(--line); color: inherit; flex: none; }
.bk-step[data-state="now"] .bk-dot { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.bk-step[data-state="done"] .bk-dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.bk-step-label { font-size: 13.5px; font-weight: 700; }
[data-theme="boutique"] .bk-step-label { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }

.bk-body { flex: 1; }
.bk-body-in { width: min(1180px, 94vw); margin: 0 auto; padding: 34px 0 40px; }
.bk-grid { display: grid; grid-template-columns: 1fr 330px; gap: 34px; align-items: start; }
.bk-aside { }
.bk-foot { flex: none; border-top: 1px solid var(--line-soft); background: var(--surface); box-shadow: 0 -14px 30px -24px rgba(58,36,23,.4); }
.bk-foot-in { width: min(1180px, 94vw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.bk-foot-total { font-size: 14px; }

@media (max-width: 960px) {
  .bk-grid { grid-template-columns: 1fr; }
  .bk-aside { display: none; }
}
@media (max-width: 720px) {
  .bk-step-label { display: none; }
  .bk-step { padding: 6px; }
}
@media (max-width: 520px) {
  .bk-foot-total { display: none; }
}

/* hide tweaks-driven decorative arcs nicely in print; show content */
@media print {
  .bk-top, .bk-foot, .nav { display: none !important; }
  .bk-overlay { position: static; }
}

/* ============================================================
   Admin console
   ============================================================ */
.adm { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--bg-2); }
.adm-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 18px; background: var(--surface); border-right: 1px solid var(--line); }
.adm-nav { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-align: left; transition: background .15s, color .15s; }
.adm-nav:hover { background: var(--surface-2); color: var(--ink); }
.adm-nav[data-on="true"] { background: var(--primary); color: var(--primary-ink); }
.adm-nav[data-on="true"]:hover { background: var(--primary); color: var(--primary-ink); }
.adm-main { height: 100vh; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: clamp(22px,3vw,34px) clamp(18px,3vw,34px) 22px; }
.adm-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.adm-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.adm-row { background: transparent; transition: background .14s; }
.adm-row:hover { background: var(--surface-2); }
.adm-trow { display: grid; grid-template-columns: 1.1fr 1.3fr 1.2fr .7fr .8fr .8fr 1fr; gap: 12px; align-items: center; padding: 14px 22px; font-size: 14px; }
.adm-thead { font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-faint); padding-top: 16px; padding-bottom: 12px; }
.adm-inv-row { display: grid; grid-template-columns: 2fr .9fr .7fr .7fr 1.6fr; gap: 14px; align-items: center; padding: 13px 22px; font-size: 14px; }

/* ============================================================
   Reviews
   ============================================================ */
.rv-modal-wrap { position: fixed; inset: 0; z-index: 130; background: rgba(40,25,15,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-modal { position: relative; width: min(560px, 96vw); max-height: 92vh; background: var(--bg); border-radius: var(--radius); padding: clamp(26px,4vw,38px); box-shadow: var(--shadow-lg); animation: rvpop .26s ease; }
@keyframes rvpop { from { transform: translateY(16px) scale(.98); opacity: .5; } to { transform: none; opacity: 1; } }
.rv-masonry { column-count: 3; column-gap: 18px; }
@media (max-width: 980px) { .rv-masonry { column-count: 2; } .rv-teaser-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 620px) { .rv-masonry { column-count: 1; } }
@media (max-width: 820px) { .founders-grid { grid-template-columns: 1fr !important; } }

/* Instagram */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,1.4vw,14px); }
.ig-tile { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; display: block; background: var(--surface-2); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig-tile:hover img { transform: scale(1.06); }
.ig-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(58,36,23,.4); opacity: 0; transition: opacity .25s; }
.ig-tile:hover .ig-overlay { opacity: 1; }
@media (max-width: 760px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
.adm-detail-card { background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 16px; }
.adm-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-drawer-wrap { position: fixed; inset: 0; z-index: 120; background: rgba(40,25,15,.45); backdrop-filter: blur(3px); display: flex; justify-content: flex-end; }
.adm-drawer { width: min(540px, 94vw); height: 100vh; background: var(--bg); padding: 26px clamp(20px,3vw,32px) 40px; box-shadow: var(--shadow-lg); animation: admslide .28s ease; }
@keyframes admslide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (max-width: 1100px) { .adm-two { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .adm-grid4 { grid-template-columns: 1fr 1fr; }
  .adm-trow { grid-template-columns: 1fr 1fr auto; }
  .adm-trow > :nth-child(3), .adm-trow > :nth-child(4), .adm-trow > :nth-child(6) { display: none; }
}
@media (max-width: 760px) {
  .adm { grid-template-columns: 1fr; }
  .adm-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .adm-side nav { display: flex !important; flex-wrap: wrap; }
  .adm-side > div:last-child { margin-top: 0 !important; margin-left: auto; flex-direction: row !important; }
  .adm-main { height: auto; }
  .adm-form2 { grid-template-columns: 1fr; }
}

/* ============================================================
   Device preview — phone frame (toggled from the nav)
   ============================================================ */
.device-phone-bg {
  position: fixed; inset: 0; z-index: 200;
  background: repeating-linear-gradient(135deg, #2a1d15, #2a1d15 18px, #31221a 18px, #31221a 36px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px 16px;
}
.device-phone-frame {
  position: relative;
  width: 402px; max-width: calc(100vw - 28px);
  height: 858px; max-height: calc(100vh - 36px);
  background: #1c130e; border-radius: 52px;
  padding: 13px;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.06);
}
.device-phone-screen {
  width: 100%; height: 100%;
  border-radius: 40px; overflow: hidden; background: var(--bg);
  position: relative;
}
.device-phone-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.device-notch {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 128px; height: 30px; background: #1c130e; border-radius: 0 0 18px 18px; z-index: 3;
}
.device-exit {
  position: absolute; top: -2px; right: 8px; transform: translateY(-130%);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-pill); padding: 9px 16px; font-size: 13.5px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 460px) {
  .device-phone-bg { padding: 0; }
  .device-phone-frame { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; padding: 0; }
  .device-phone-screen { border-radius: 0; }
  .device-notch { display: none; }
  .device-exit { display: none; }
}

/* ============================================================
   Mobile formatting — stack inline-styled grids at phone width.
   Attribute selectors catch the React inline grid-template-columns.
   ============================================================ */
@media (max-width: 700px) {
  .wrap { width: min(1180px, 90vw); }
  .section { padding: clamp(40px, 9vw, 64px) 0; }

  /* stack any 3- or 4-column inline grid to a single column */
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }

  /* two-up becomes one-up for the big hero / feature / cashflow splits */
  .hero-grid, [style*="1.05fr"], [style*="1.1fr"], [style*="1.4fr 1fr 1fr 1.2fr"] { grid-template-columns: 1fr !important; }

  /* trust strip + footer columns stack */
  .trust-grid { grid-template-columns: 1fr 1fr !important; }
  .ig-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* hero art + founders side-by-side → stacked */
  .founders-grid { grid-template-columns: 1fr !important; }

  /* size the hero down */
  .h-xl { font-size: clamp(30px, 8.5vw, 46px); }
  .hero-copy .lead { font-size: 15.5px; }
  .hero-art { max-width: 380px; margin: 0 auto; }

  /* book-now & big buttons more compact */
  .btn-lg { padding: 13px 22px; font-size: 15px; }
  .nav-book-btn { padding: 9px 14px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-grid { grid-template-columns: 1fr !important; }
  .h-xl { font-size: clamp(28px, 9vw, 40px); }
  .h-lg { font-size: clamp(24px, 6.5vw, 34px); }
  /* shrink package & gallery photos so cards aren't huge */
  /* tighten section + card padding */
  .section { padding: 36px 0; }
  .card { border-radius: 18px; }
  /* buttons full-feel but compact */
  .btn-lg { padding: 12px 18px; font-size: 14.5px; }
  .hero-copy > div[style*="flex"] .btn-lg { flex: 1; }
}