/* ============================================================
   SMARTMODE — THEME ENGINE
   Whole-site restyle switcher. Each [data-theme] overrides the
   design tokens in style.css's :root, so every component that
   reads a token re-skins at once. A handful of hardcoded
   components (navbar/hero/services/bms backgrounds) are rewired
   to tokens below so they theme too. Each theme also supplies a
   hero photo via --hero-img.

   Themes: default · business · modern · water · nature · travel ·
           architecture · creative
   ============================================================ */

/* ── New semantic tokens (defaults = current SmartMode look) ──── */
:root,
[data-theme="default"] {
  --section-bg:        #FFFFFF;
  --nav-bg:            rgba(15, 26, 69, 0.88);
  --nav-bg-scrolled:   rgba(10, 18, 51, 0.97);

  --accent:            var(--gold);
  --accent-2:          var(--gold-light);
  --accent-contrast:   var(--royal-deeper);

  --font-display:      var(--font-heading);

  --hero-img:          url(../Images/themes/default/hero.jpg);
  --hero-filter:       none;

  --hero-grad:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(26, 43, 109, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 700px 420px at -10% 110%, rgba(201, 168, 76, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #F2F5FC 0%, var(--bg-light) 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(221, 192, 110, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, var(--royal-deeper) 0%, var(--royal-deep) 60%, var(--primary-dark) 100%);
  --footer-grad:       linear-gradient(180deg, var(--royal-deep) 0%, var(--royal-deeper) 100%);

  --orb-1: #1a2b6d; --orb-2: #c9a84c; --orb-3: #1a2b6d; --orb-opacity: 0.18;
}

/* ── Rewire hardcoded components to tokens (all themes) ───────── */
.navbar              { background: var(--nav-bg); }
.navbar--scrolled    { background: var(--nav-bg-scrolled); }
.hero                { background: var(--hero-grad); }
.services            { background: var(--section-bg); }
.bms-section         { background: var(--section-bg); }
.footer              { background: var(--footer-grad); }
.cta-section         { background: var(--cta-grad); }
.btn--gold           { color: var(--accent-contrast); }

h1, h2, h3,
.hero__heading, .section__title, .cta-content__title { font-family: var(--font-display); }

.hero-orb     { opacity: var(--orb-opacity); }
.hero-orb--1  { background: var(--orb-1); }
.hero-orb--2  { background: var(--orb-2); }
.hero-orb--3  { background: var(--orb-3); }

/* Hardcoded gold/white hero accents → follow the active accent */
.hero__badge {
  background: var(--bg-card);
  border-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text-dark);
}
.feature-tag { background: var(--bg-card); color: var(--text-dark); }
.hero__heading .highlight::after {
  background: var(--accent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 38%, transparent),
    color-mix(in srgb, var(--accent) 62%, transparent));
}

/* ════════════════════════════════════════════════════════════
   BUSINESS — near-black + electric orange  (Bussiness_*.png)
   ════════════════════════════════════════════════════════════ */
[data-theme="business"] {
  --primary:#F2701D; --primary-light:#FF8C42; --primary-dark:#C9540F;
  --royal-deep:#0A0B0E; --royal-deeper:#000000;
  --gold:#F2701D; --gold-light:#FF8C42; --gold-dark:#C9540F; --gold-glow:rgba(242,112,29,0.45);
  --bg-light:#0E0F13; --bg-card:#181A20; --section-bg:#121319;
  --text-dark:#F5F5F6; --text-body:#B3B4BC; --text-muted:#83848D;
  --border:rgba(255,255,255,0.10); --border-light:rgba(255,255,255,0.07);
  --accent:#F2701D; --accent-2:#FF8C42; --accent-contrast:#0E0F13;
  --nav-bg:rgba(10,11,15,0.82); --nav-bg-scrolled:rgba(6,7,10,0.96);
  --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.55); --shadow-xl:0 26px 60px rgba(0,0,0,.65);
  --hero-img:url(../Images/themes/business/hero.jpg);
  --hero-grad:
    radial-gradient(ellipse 820px 480px at 82% -12%, rgba(242,112,29,0.16) 0%, transparent 60%),
    linear-gradient(180deg,#15161C 0%,#0E0F13 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(242,112,29,0.22) 0%, transparent 60%),
    linear-gradient(160deg,#000 0%,#0A0B0E 70%,#15161C 100%);
  --footer-grad:linear-gradient(180deg,#0A0B0E 0%,#000 100%);
  --orb-1:#F2701D; --orb-2:#7A2D06; --orb-3:#F2701D; --orb-opacity:0.16;
}

/* ════════════════════════════════════════════════════════════
   MODERN — concrete grey + signal red, grotesk  (Modern&Clean_*)
   ════════════════════════════════════════════════════════════ */
[data-theme="modern"] {
  --primary:#141414; --primary-light:#3A3A3A; --primary-dark:#000;
  --royal-deep:#1A1A1A; --royal-deeper:#0A0A0A;
  --gold:#E5322B; --gold-light:#FF463B; --gold-dark:#B81D17; --gold-glow:rgba(229,50,43,0.40);
  --bg-light:#EAEAE7; --bg-card:#FFFFFF; --section-bg:#EAEAE7;
  --text-dark:#111; --text-body:#3A3A38; --text-muted:#6B6B66;
  --border:rgba(0,0,0,0.12); --border-light:rgba(0,0,0,0.08);
  --accent:#E5322B; --accent-2:#FF463B; --accent-contrast:#FFFFFF;
  --font-display:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --radius-sm:2px; --radius-md:3px; --radius-lg:4px; --radius-xl:6px;
  --nav-bg:rgba(17,17,17,0.92); --nav-bg-scrolled:rgba(10,10,10,0.98);
  --hero-img:url(../Images/themes/modern/hero.jpg);
  --hero-filter:grayscale(1) contrast(1.05);
  --hero-grad:
    radial-gradient(ellipse 760px 460px at 86% -10%, rgba(229,50,43,0.10) 0%, transparent 58%),
    linear-gradient(180deg,#EFEFEC 0%,#EAEAE7 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(229,50,43,0.20) 0%, transparent 60%),
    linear-gradient(160deg,#0A0A0A 0%,#1A1A1A 100%);
  --footer-grad:linear-gradient(180deg,#1A1A1A 0%,#0A0A0A 100%);
  --orb-1:#E5322B; --orb-2:#141414; --orb-3:#E5322B; --orb-opacity:0.10;
}

/* ════════════════════════════════════════════════════════════
   WATER — teal + cyan, fluid  (Water_*.png)
   ════════════════════════════════════════════════════════════ */
[data-theme="water"] {
  --primary:#0E7C9B; --primary-light:#16A6C9; --primary-dark:#0A5E76;
  --royal-deep:#073B49; --royal-deeper:#04222B;
  --gold:#14C0D4; --gold-light:#5BE0EC; --gold-dark:#0FA0B0; --gold-glow:rgba(20,192,212,0.45);
  --bg-light:#EAF6F8; --bg-card:#FFFFFF; --section-bg:#F4FBFC;
  --text-dark:#06303A; --text-body:#2B5963; --text-muted:#5A8089;
  --border:rgba(14,124,155,0.16); --border-light:rgba(14,124,155,0.10);
  --accent:#14C0D4; --accent-2:#5BE0EC; --accent-contrast:#06303A;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --nav-bg:rgba(7,59,73,0.85); --nav-bg-scrolled:rgba(4,34,43,0.96);
  --hero-img:url(../Images/themes/water/hero.jpg);
  --hero-grad:
    radial-gradient(ellipse 880px 520px at 84% -12%, rgba(20,192,212,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 720px 460px at -10% 112%, rgba(14,124,155,0.16) 0%, transparent 60%),
    linear-gradient(180deg,#DCF2F6 0%,#EAF6F8 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(20,192,212,0.22) 0%, transparent 60%),
    linear-gradient(160deg,#04222B 0%,#073B49 55%,#0A5E76 100%);
  --footer-grad:linear-gradient(180deg,#073B49 0%,#04222B 100%);
  --orb-1:#16A6C9; --orb-2:#14C0D4; --orb-3:#0E7C9B; --orb-opacity:0.22;
}

/* ════════════════════════════════════════════════════════════
   NATURE — forest greens + honey, organic  (Nature_*)
   ════════════════════════════════════════════════════════════ */
[data-theme="nature"] {
  --primary:#2E6B43; --primary-light:#3F8A57; --primary-dark:#20502F;
  --royal-deep:#1C3B25; --royal-deeper:#122618;
  --gold:#D39A3A; --gold-light:#E6B765; --gold-dark:#A9772A; --gold-glow:rgba(211,154,58,0.42);
  --bg-light:#EEF3E7; --bg-card:#FBFCF7; --section-bg:#F3F7EC;
  --text-dark:#1B2A1A; --text-body:#41513E; --text-muted:#6B7A66;
  --border:rgba(46,107,67,0.16); --border-light:rgba(46,107,67,0.10);
  --accent:#D39A3A; --accent-2:#7FB069; --accent-contrast:#1B2A1A;
  --radius-sm:8px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px;
  --nav-bg:rgba(28,59,37,0.86); --nav-bg-scrolled:rgba(18,38,24,0.96);
  --hero-img:url(../Images/themes/nature/hero.jpg);
  --hero-grad:
    radial-gradient(ellipse 860px 500px at 84% -12%, rgba(211,154,58,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 700px 460px at -10% 112%, rgba(46,107,67,0.14) 0%, transparent 60%),
    linear-gradient(180deg,#E7F0DD 0%,#EEF3E7 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(211,154,58,0.18) 0%, transparent 60%),
    linear-gradient(160deg,#122618 0%,#1C3B25 60%,#20502F 100%);
  --footer-grad:linear-gradient(180deg,#1C3B25 0%,#122618 100%);
  --orb-1:#3F8A57; --orb-2:#D39A3A; --orb-3:#2E6B43; --orb-opacity:0.18;
}

/* ════════════════════════════════════════════════════════════
   TRAVEL — sky blue + sunny yellow + tropical green, light  (Travel_*)
   ════════════════════════════════════════════════════════════ */
[data-theme="travel"] {
  --primary:#1559A6; --primary-light:#1E9FD4; --primary-dark:#0E6E8C;
  --royal-deep:#0C4A63; --royal-deeper:#08303F;
  --gold:#F5B83D; --gold-light:#FFD06B; --gold-dark:#D49520; --gold-glow:rgba(245,184,61,0.45);
  --bg-light:#EEF8FD; --bg-card:#FFFFFF; --section-bg:#F4FBFE;
  --text-dark:#0B3A52; --text-body:#2E5C70; --text-muted:#5E8294;
  --border:rgba(21,90,166,0.16); --border-light:rgba(21,90,166,0.10);
  --accent:#F5B83D; --accent-2:#2BB673; --accent-contrast:#0B3A52;
  --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px;
  --nav-bg:rgba(12,74,99,0.84); --nav-bg-scrolled:rgba(8,48,63,0.96);
  --hero-img:url(../Images/themes/travel/hero.jpg);
  --hero-grad:
    radial-gradient(ellipse 880px 520px at 84% -12%, rgba(245,184,61,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 720px 460px at -8% 112%, rgba(43,182,115,0.16) 0%, transparent 60%),
    linear-gradient(180deg,#E2F4FC 0%,#EEF8FD 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(245,184,61,0.22) 0%, transparent 60%),
    linear-gradient(160deg,#08303F 0%,#0C4A63 55%,#0E6E8C 100%);
  --footer-grad:linear-gradient(180deg,#0C4A63 0%,#08303F 100%);
  --orb-1:#1E9FD4; --orb-2:#F5B83D; --orb-3:#2BB673; --orb-opacity:0.20;
}

/* ════════════════════════════════════════════════════════════
   ARCHITECTURE — warm concrete + brass, serif  (Architectural_1)
   ════════════════════════════════════════════════════════════ */
[data-theme="architecture"] {
  --primary:#2B2824; --primary-light:#4A463F; --primary-dark:#1A1714;
  --royal-deep:#2B2824; --royal-deeper:#1A1714;
  --gold:#B08A4F; --gold-light:#C9A86B; --gold-dark:#8E6E3C; --gold-glow:rgba(176,138,79,0.40);
  --bg-light:#E7E4DD; --bg-card:#F2F0EA; --section-bg:#EDEAE3;
  --text-dark:#211F1B; --text-body:#4A4742; --text-muted:#736F67;
  --border:rgba(33,31,27,0.14); --border-light:rgba(33,31,27,0.09);
  --accent:#B08A4F; --accent-2:#C9A86B; --accent-contrast:#211F1B;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --radius-sm:0; --radius-md:0; --radius-lg:2px; --radius-xl:2px;
  --nav-bg:rgba(33,31,27,0.90); --nav-bg-scrolled:rgba(26,23,20,0.97);
  --hero-img:url(../Images/themes/architecture/hero.jpg);
  --hero-grad:
    radial-gradient(ellipse 820px 480px at 85% -10%, rgba(176,138,79,0.14) 0%, transparent 58%),
    linear-gradient(180deg,#EDEAE3 0%,#E7E4DD 100%);
  --cta-grad:
    radial-gradient(ellipse 700px 380px at 50% 120%, rgba(176,138,79,0.16) 0%, transparent 60%),
    linear-gradient(160deg,#1A1714 0%,#2B2824 100%);
  --footer-grad:linear-gradient(180deg,#2B2824 0%,#1A1714 100%);
  --orb-1:#B08A4F; --orb-2:#8E6E3C; --orb-3:#2B2824; --orb-opacity:0.16;
}

/* ════════════════════════════════════════════════════════════
   CREATIVE — dark aurora violet→magenta→cyan  (Creative_*)
   ════════════════════════════════════════════════════════════ */
[data-theme="creative"] {
  --primary:#7C3AED; --primary-light:#A855F7; --primary-dark:#5B21B6;
  --royal-deep:#120F1C; --royal-deeper:#08060F;
  --gold:#E11D8F; --gold-light:#F65FB5; --gold-dark:#B0156F; --gold-glow:rgba(225,29,143,0.45);
  --bg-light:#0B0A12; --bg-card:#17131F; --section-bg:#0E0C16;
  --text-dark:#F5F3FF; --text-body:#BCB7CE; --text-muted:#8A85A0;
  --border:rgba(255,255,255,0.11); --border-light:rgba(255,255,255,0.07);
  --accent:#E11D8F; --accent-2:#22D3EE; --accent-contrast:#FFFFFF;
  --font-display:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:26px;
  --shadow-md:0 6px 22px rgba(0,0,0,.5); --shadow-lg:0 18px 46px rgba(0,0,0,.6); --shadow-xl:0 28px 64px rgba(124,58,237,.35);
  --nav-bg:rgba(12,10,20,0.72); --nav-bg-scrolled:rgba(8,6,15,0.92);
  --hero-img:url(../Images/themes/creative/hero.jpg);
  --hero-grad:
    radial-gradient(ellipse 760px 460px at 80% -12%, rgba(124,58,237,0.30) 0%, transparent 58%),
    radial-gradient(ellipse 680px 440px at 12% 110%, rgba(225,29,143,0.22) 0%, transparent 58%),
    radial-gradient(ellipse 520px 360px at 50% 50%, rgba(34,211,238,0.10) 0%, transparent 60%),
    linear-gradient(180deg,#0E0C16 0%,#0B0A12 100%);
  --cta-grad:
    radial-gradient(ellipse 760px 400px at 50% 120%, rgba(225,29,143,0.30) 0%, transparent 60%),
    linear-gradient(135deg,#1A1030 0%,#120F1C 55%,#08060F 100%);
  --footer-grad:linear-gradient(180deg,#120F1C 0%,#08060F 100%);
  --orb-1:#7C3AED; --orb-2:#E11D8F; --orb-3:#22D3EE; --orb-opacity:0.30;
}

[data-theme="creative"] .service-card,
[data-theme="creative"] .why-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

/* ════════════════════════════════════════════════════════════
   HERO IMAGE PANEL — replaces the faint SVG, fills the space.
   Real photo + Ken-Burns drift + solid (un-blurred) info chips.
   ════════════════════════════════════════════════════════════ */
.hero-media {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 4 / 3.05;
  border-radius: calc(var(--radius-xl) + 8px);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  isolation: isolate;
}
.hero-media__img {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: var(--hero-filter, none);
  transform: scale(1.06);
  animation: hero-kenburns 20s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2.5%, -2%, 0); }
}
.hero-media__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg, transparent 38%, color-mix(in srgb, var(--royal-deeper) 62%, transparent) 100%);
}
.hero-media__chrome {
  position: absolute;
  top: 14px; left: 16px;
  display: flex; gap: 6px; z-index: 2;
}
.hero-media__chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.65); }
/* solid, crisp info chips — no blur */
.hero-media__tag {
  position: absolute;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.hero-media__tag--live {
  left: 16px; bottom: 16px;
  background: var(--bg-card);
  color: var(--text-dark);
}
.hero-media__tag--live .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-media__tag--price {
  right: 16px; top: 44px;
  background: var(--accent);
  color: var(--accent-contrast);
}
@media (prefers-reduced-motion: reduce) {
  .hero-media__img { animation: none; }
  .hero-media__tag--live .dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   THEME SWITCHER — navbar dropdown (replaces the floating button)
   ════════════════════════════════════════════════════════════ */
.theme-select { position: relative; }
.theme-select__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.theme-select__btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.theme-select__dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(from 180deg, #c9a84c, #F2701D, #E5322B, #14C0D4, #2E6B43, #1E9FD4, #B08A4F, #E11D8F, #c9a84c);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6);
  flex: none;
}
.theme-select__chev { transition: transform 0.25s ease; }
.theme-select__btn[aria-expanded="true"] .theme-select__chev { transform: rotate(180deg); }

.theme-select__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 264px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text-dark);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.30);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.22s var(--ease-spring), visibility 0.22s;
  z-index: 1500;
}
.theme-select__menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.theme-select__head {
  padding: 6px 10px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.theme-option {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--text-dark); text-align: left;
  transition: background 0.16s ease;
}
.theme-option:hover { background: var(--bg-light); }
.theme-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.theme-option__chip { width: 22px; height: 22px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.theme-option__tag { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
.theme-option__check { margin-left: auto; color: var(--accent); opacity: 0; }
.theme-option[aria-selected="true"] .theme-option__check { opacity: 1; }

/* theme swatch chips (base 50% / accent 50%) */
.chip--default      { background: linear-gradient(135deg,#1a2b6d 50%,#c9a84c 50%); }
.chip--business     { background: linear-gradient(135deg,#0E0F13 50%,#F2701D 50%); }
.chip--modern       { background: linear-gradient(135deg,#EAEAE7 50%,#E5322B 50%); }
.chip--water        { background: linear-gradient(135deg,#0E7C9B 50%,#14C0D4 50%); }
.chip--nature       { background: linear-gradient(135deg,#2E6B43 50%,#D39A3A 50%); }
.chip--travel       { background: linear-gradient(135deg,#1E9FD4 50%,#F5B83D 50%); }
.chip--architecture { background: linear-gradient(135deg,#2B2824 50%,#B08A4F 50%); }
.chip--creative     { background: linear-gradient(135deg,#7C3AED 50%,#E11D8F 50%); }

/* ════════════════════════════════════════════════════════════
   "CHOOSE YOUR STYLE" — real-photo theme cards (no skeleton/blur)
   ════════════════════════════════════════════════════════════ */
.theme-demo { padding: var(--spacing-xl) 0; background: var(--bg-light); }
.theme-demo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
  margin-top: var(--spacing-lg);
}
.theme-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-align: left;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.3s ease;
}
.theme-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--accent); }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }

.theme-card__shot {
  position: relative;
  height: 150px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.theme-card__shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35));
}
.theme-card:hover .theme-card__shot { } /* zoom handled on inner img if added */
.theme-card__chrome { position: absolute; top: 10px; left: 12px; display: flex; gap: 5px; z-index: 1; }
.theme-card__chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.7); }
.theme-card__live {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 50px;
  background: var(--accent); color: var(--accent-contrast);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.theme-card[aria-pressed="true"] .theme-card__live { opacity: 1; transform: translateY(0); }
.theme-card__body { padding: 14px 16px 16px; }
.theme-card__name {
  font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--text-dark);
  display: flex; align-items: center; gap: 8px;
}
.theme-card__chip { width: 18px; height: 18px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.theme-card__tag { font-size: 13px; color: var(--text-body); margin-top: 5px; line-height: 1.45; }

/* ── View-transition cross-fade on theme change ──────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01s; }
}

/* Dropdown trims to a compact pill on small screens */
@media (max-width: 600px) {
  .theme-select__label { display: none; }
  .theme-select__btn { padding: 8px; }
  .theme-select { margin-left: auto; }
}

/* ════════════════════════════════════════════════════════════
   SECTION IMAGERY — a different themed photo for the Services
   banner and the SmartFlow visual (kept to 2 sections, on-brand).
   ════════════════════════════════════════════════════════════ */
:root, [data-theme="default"] { --services-img: url(../Images/themes/default/services.jpg); --flow-img: url(../Images/themes/default/flow.jpg); }
[data-theme="business"]     { --services-img: url(../Images/themes/business/services.jpg);     --flow-img: url(../Images/themes/business/flow.jpg); }
[data-theme="modern"]       { --services-img: url(../Images/themes/modern/services.jpg);       --flow-img: url(../Images/themes/modern/flow.jpg); }
[data-theme="water"]        { --services-img: url(../Images/themes/water/services.jpg);        --flow-img: url(../Images/themes/water/flow.jpg); }
[data-theme="nature"]       { --services-img: url(../Images/themes/nature/services.jpg);       --flow-img: url(../Images/themes/nature/flow.jpg); }
[data-theme="travel"]       { --services-img: url(../Images/themes/travel/services.jpg);       --flow-img: url(../Images/themes/travel/flow.jpg); }
[data-theme="architecture"] { --services-img: url(../Images/themes/architecture/services.jpg); --flow-img: url(../Images/themes/architecture/flow.jpg); }
[data-theme="creative"]     { --services-img: url(../Images/themes/creative/services.jpg);     --flow-img: url(../Images/themes/creative/flow.jpg); }

/* Services — cinematic themed banner under the section header */
.services__banner {
  position: relative;
  margin-top: var(--spacing-lg);
  height: 230px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.services__banner-img {
  position: absolute; inset: 0;
  background-image: var(--services-img);
  background-size: cover; background-position: center;
  filter: var(--hero-filter, none);
  transform: scale(1.04);
  transition: transform 0.7s var(--ease-out);
}
.services__banner:hover .services__banner-img { transform: scale(1.09); }
.services__banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--royal-deeper) 74%, transparent) 0%,
    color-mix(in srgb, var(--royal-deeper) 14%, transparent) 72%);
}
.services__banner-cap {
  position: absolute; left: 26px; bottom: 22px; z-index: 1; max-width: 68%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 27px);
  line-height: 1.18;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

/* SmartFlow — themed photo replaces the dashboard SVG */
.bms-media {
  position: relative;
  width: 100%; height: 100%;
  min-height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.bms-media__img {
  position: absolute; inset: 0;
  background-image: var(--flow-img);
  background-size: cover; background-position: center;
  filter: var(--hero-filter, none);
  transform: scale(1.05);
  animation: hero-kenburns 24s ease-in-out infinite alternate;
}
.bms-media__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 46%, color-mix(in srgb, var(--royal-deeper) 48%, transparent));
}
@media (prefers-reduced-motion: reduce) { .bms-media__img { animation: none; } }

/* ════════════════════════════════════════════════════════════
   CARD & SURFACE BACKGROUNDS — follow the theme so headings/text
   stay readable on dark themes (style.css hardcodes these white,
   which made white-on-white titles in Business/Creative).
   ════════════════════════════════════════════════════════════ */
.service-card,
.why-card,
.pricing-card,
.portfolio-card,
.founder-card,
.contact-info-card,
.contact-form { background: var(--bg-card); }

.pricing { background: var(--section-bg); }