/* ==========================================================================
   CEEAMA — design system
   --------------------------------------------------------------------------
   Everything visual is driven by the tokens in the first two blocks below.
   To re-skin the site, change the tokens - not the components.

   Light/dark: <html data-bs-theme="light|dark"> (set by /js/site.js, with the
   user's choice remembered; "system" follows the OS). Bootstrap 5.3's own
   dark mode is bridged to these tokens so every Bootstrap component follows.

   Sections:  1 Tokens  2 Bootstrap bridge  3 Base  4 Navbar  5 Buttons
              6 Hero  7 Page header  8 Cards  9 Components  10 Tables/forms
              11 Content (prose)  12 Footer  13 Admin  14 Rich editor
              15 Motion  15b Illustrations  16 Responsive  17 Print
   ========================================================================== */

/* 1 ─ Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* surfaces & text */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eaeff7;
  --ink: #0e1b33;
  --muted: #526079;
  --border: #dbe3ef;

  /* brand blue: --brand for text/links/borders, --brand-fill for buttons (white text) */
  --brand: #0b5fa0;
  --brand-fill: #0b5fa0;
  --brand-strong: #084a80;
  --brand-soft: #e3effa;

  /* accent red (logo bolt): fill carries white text, accent-text is for text on surfaces */
  --accent-fill: #d62a1f;
  --accent-strong: #b3211a;
  --accent-text: #b3211a;
  --accent-soft: #fdeceb;

  --success-soft: #e6f6ec;

  /* navbar / glass */
  --nav-bg: rgba(255, 255, 255, 0.82);
  --nav-border: rgba(14, 27, 51, 0.08);

  /* dark chrome used by hero / footer / admin sidebar in BOTH themes */
  --chrome-1: #07162e;
  --chrome-2: #0b3a6b;
  --chrome-3: #0b5fa0;
  --chrome-text: #c9d6ea;

  --shadow-sm: 0 1px 2px rgba(14, 27, 51, 0.06);
  --shadow: 0 6px 24px rgba(14, 27, 51, 0.07);
  --shadow-lg: 0 18px 48px rgba(14, 27, 51, 0.14);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;

  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-height: 68px;

  /* ---- legacy names, kept so existing views / inline styles keep working ---- */
  --navy: var(--brand);
  --navy-dark: var(--chrome-1);
  --amber: var(--accent-fill);
  --amber-dark: var(--accent-text);
  --card-border: var(--border);
}

[data-bs-theme='dark'] {
  color-scheme: dark;

  --bg: #0a1120;
  --surface: #111b2f;
  --surface-2: #172640;
  --ink: #e6edfa;
  --muted: #9aaccb;
  --border: #243556;

  --brand: #6db3f2;
  --brand-fill: #1b6fc2;
  --brand-strong: #2f86d8;
  --brand-soft: #16304f;

  --accent-fill: #d1342a;
  --accent-strong: #e5574d;
  --accent-text: #ff8f86;
  --accent-soft: #3a1a1d;

  --success-soft: #12301f;

  --nav-bg: rgba(10, 17, 32, 0.78);
  --nav-border: rgba(230, 237, 250, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.5);
}

/* 2 ─ Bootstrap bridge ───────────────────────────────────────────────────── */
:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-emphasis-color: var(--ink);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-strong);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--brand-soft);
  --bs-dropdown-link-active-color: var(--brand);
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-color: var(--ink);
  --bs-list-group-bg: var(--surface);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-color: var(--ink);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-color: var(--brand);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-active-bg: var(--brand-fill);
  --bs-pagination-active-border-color: var(--brand-fill);
  --bs-pagination-disabled-bg: var(--surface-2);
}

/* Hard-coded light utilities used across the views: make them follow the theme. */
.bg-white { background-color: var(--surface) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.border, .border-top, .border-bottom { border-color: var(--border) !important; }
.text-muted { color: var(--muted) !important; }
.text-white { color: #fff !important; }
.table { --bs-table-color: var(--ink); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-bg: var(--surface-2); }

/* 3 ─ Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 12px); -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1, h2, h3, h4, h5, h6,
.section-title, .hero h1, .navbar-brand-custom {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1, h2, .section-title { font-weight: 800; letter-spacing: -0.02em; }
h3, h4, h5 { font-weight: 700; }

a { color: var(--brand); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--brand-strong); }
.text-decoration-none { text-decoration: none !important; }

img, video, iframe { max-width: 100%; }
::selection { background: var(--brand-fill); color: #fff; }
iframe {
    width: 100%;
    height: 400px;
}

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .form-control:focus-visible { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 3000;
  background: var(--brand-fill); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

/* slim themed scrollbars (desktop) */
@media (hover: hover) {
  * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
}

/* 4 ─ Navbar ─────────────────────────────────────────────────────────────── */
.site-navbar {
  /* NOTE: the frosted-glass effect lives on ::before, not here. An element with backdrop-filter
     becomes the containing block for position:fixed descendants, which would trap the mobile
     drawer (a fixed offcanvas) inside the 68px navbar and make the page scroll sideways. */
  background: transparent;
  border-bottom: 1px solid var(--nav-border);
  min-height: var(--nav-height);
  padding-top: env(safe-area-inset-top);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
  z-index: 1030;
}
.site-navbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.site-navbar.scrolled { box-shadow: var(--shadow); }

.navbar-brand-custom {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink) !important; padding: 0;
}
.navbar-brand-custom em { color: var(--accent-text); font-style: normal; }
.brand-mark {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--chrome-3), var(--chrome-2)); color: #fff; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(11, 95, 160, 0.35);
  transition: transform 0.35s var(--ease);
}
.brand-mark i { color: #ffd54a; }
.navbar-brand-custom:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }

.site-navbar .nav-link {
  position: relative; font-weight: 600; font-size: 0.9rem; color: var(--ink);
  padding: 0.55rem 0.7rem !important; border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-navbar .nav-link::after {
  content: ''; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.2rem; height: 2px; border-radius: 2px;
  background: var(--accent-fill); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease);
}
.site-navbar .nav-link:hover { color: var(--brand); }
.site-navbar .nav-link:hover::after, .site-navbar .nav-link.active::after { transform: scaleX(1); }
.site-navbar .nav-link.active { color: var(--brand); }
.site-navbar .dropdown-toggle::after { /* keep Bootstrap's caret, not our underline */
  position: static; width: auto; height: auto; background: none; transform: none; margin-left: 0.4em; border-radius: 0;
}
.site-navbar .dropdown-toggle[aria-expanded='true']::after { transform: rotate(180deg); }
.site-navbar .dropdown-menu {
  border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 0.5rem; margin-top: 0.4rem; animation: menuIn 0.18s var(--ease);
}
.site-navbar .dropdown-item { border-radius: 8px; padding: 0.5rem 0.8rem; font-weight: 500; font-size: 0.92rem; }
.site-navbar .dropdown-item.active { font-weight: 700; }

.navbar-toggler { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; color: var(--ink); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--brand-soft); }
.navbar-toggler-icon { background-image: none; display: inline-block; width: 1.25rem; height: 1rem; position: relative; }
.navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon i {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px;
}
.navbar-toggler-icon::before { top: 1px; }
.navbar-toggler-icon::after { bottom: 1px; }
.navbar-toggler-icon i { top: calc(50% - 1px); }

.offcanvas { border-left: 1px solid var(--border); }
.offcanvas-header { border-bottom: 1px solid var(--border); }

/* theme toggle */
.theme-toggle {
  width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--brand); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle i { transition: transform 0.5s var(--ease); }
.theme-toggle[aria-expanded='true'] i { transform: rotate(40deg); }
.theme-menu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; }
.theme-menu .dropdown-item .check { margin-left: auto; opacity: 0; color: var(--brand); }
.theme-menu .dropdown-item[aria-checked='true'] { font-weight: 700; }
.theme-menu .dropdown-item[aria-checked='true'] .check { opacity: 1; }

/* 5 ─ Buttons ────────────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden; font-weight: 600; border-radius: var(--radius-sm);
  padding: 0.55rem 1.25rem; letter-spacing: 0.005em; border-width: 1.5px;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-sm { padding: 0.35rem 0.85rem; font-size: 0.85rem; border-radius: 8px; }
.btn-lg { padding: 0.8rem 1.75rem; font-size: 1.05rem; border-radius: 12px; }
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-ceeama { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.btn-ceeama:hover, .btn-ceeama:focus { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11, 95, 160, 0.3); }

.btn-amber { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.btn-amber:hover, .btn-amber:focus { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(214, 42, 31, 0.32); }
/* light sweep on hover */
.btn-amber::before, .btn-ceeama::before {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-20deg);
}
.btn-amber:hover::before, .btn-ceeama:hover::before { animation: sweep 0.75s var(--ease); }

.btn-outline-ceeama { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline-ceeama:hover, .btn-outline-ceeama:focus { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; transform: translateY(-1px); }

.btn-outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--chrome-1); border-color: #fff; }
.btn-outline-danger { color: var(--accent-text); border-color: var(--accent-text); }
.btn-outline-danger:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.btn-outline-secondary { color: var(--muted); border-color: var(--border); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border); }

/* 6 ─ Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(135deg, var(--chrome-1) 0%, var(--chrome-2) 58%, var(--chrome-3) 100%);
  background-size: 52px 52px, 52px 52px, 100% 100%;
  /* Deliberately NOT animating the gradient itself: that repaints the whole hero every frame
     (CPU/battery on phones). Only the soft glows below move, via compositor-only transforms. */
}
.hero::before, .hero::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.hero::before { width: 460px; height: 460px; left: -140px; bottom: -200px; background: radial-gradient(circle, rgba(70, 150, 230, 0.55), transparent 68%); animation: floatA 16s ease-in-out infinite; }
.hero::after { width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(226, 35, 26, 0.38), transparent 68%); animation: floatB 19s ease-in-out infinite; }
.hero .container { position: relative; }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.1; font-weight: 800; color: #fff; }
.hero p.lead { color: var(--chrome-text); max-width: 640px; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 0.35rem 0.95rem; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em;
}
.hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ffd54a; box-shadow: 0 0 0 0 rgba(255, 213, 74, 0.7); animation: pulse 2.2s infinite; }
.text-gradient { background: linear-gradient(90deg, #8fc8ff, #ffd54a 60%, #ff9a8f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding: 0; margin: 2.5rem 0 0; }
.hero-facts li { display: flex; align-items: center; gap: 0.6rem; color: var(--chrome-text); font-weight: 500; font-size: 0.95rem; }
.hero-facts i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #ffd54a; }
/* hero entrance (staggered) */
.hero .hero-enter { opacity: 0; animation: fadeUp 0.8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.hero.hero-lg { padding-top: clamp(3.5rem, 9vw, 7rem); padding-bottom: clamp(4rem, 10vw, 8rem); }

/* 7 ─ Page header band (every inner page's title strip) ──────────────────── */
main > section.bg-white.border-bottom {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-top: clamp(1.5rem, 4vw, 2.5rem) !important; padding-bottom: clamp(1.25rem, 3vw, 2rem) !important;
}
main > section.bg-white.border-bottom::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent-fill), var(--brand-fill));
}
main > section.bg-white.border-bottom .container { animation: fadeUp 0.6s var(--ease) both; }
main > section.bg-white.border-bottom h1 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); margin-bottom: 0.4rem; }

/* 8 ─ Cards ──────────────────────────────────────────────────────────────── */
.card-ceeama {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card-ceeama::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-fill), var(--brand-fill)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.card-ceeama:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.card-ceeama:hover::after { transform: scaleX(1); }
.card-ceeama .card-img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; background: var(--surface-2); transition: transform 0.6s var(--ease); }
.card-ceeama:hover .card-img { transform: scale(1.05); }
.card-ceeama .card-body { padding: 1.25rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.card-ceeama .card-body > a:last-child { margin-top: auto; }
.card-ceeama.p-4, .card-ceeama.p-3 { display: block; height: auto; }
/* form-style cards shouldn't jump on hover */
form.card-ceeama:hover, .card-ceeama.p-4:hover { transform: none; }

/* 9 ─ Components ─────────────────────────────────────────────────────────── */
.section-title { color: var(--ink); }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-text);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; margin-bottom: 0.25rem;
}
.section-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

.badge { font-weight: 600; letter-spacing: 0.01em; padding: 0.4em 0.75em; border-radius: 999px; }
.badge-member { background: var(--brand-fill); color: #fff; }
.badge-nonmember { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge-locked { background: var(--accent-soft); color: var(--accent-text); }

.feature-card { text-align: left; padding: 1.5rem; }
.feature-card .feature-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 1rem; font-size: 1.3rem;
  background: var(--brand-soft); color: var(--brand); transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.card-ceeama:hover .feature-icon { transform: rotate(-6deg) scale(1.08); background: var(--brand-fill); color: #fff; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.feature-card p { color: var(--muted); font-size: 0.93rem; margin: 0; }

.cta-band {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--chrome-2), var(--chrome-3)); padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-lg);
}
.cta-band::before { content: ''; position: absolute; z-index: -1; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 35, 26, 0.45), transparent 70%); }
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.cta-band p { color: var(--chrome-text); margin-bottom: 0; }

.pricing-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem;
  box-shadow: var(--shadow-sm); height: 100%; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.pricing-card .fee, .fee { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; }

.or-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.locked-panel {
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 2rem; text-align: center;
}

.stall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.stall-tile { border-radius: var(--radius-sm); padding: 1rem; text-align: center; font-weight: 700; border: 2px solid var(--border); background: var(--surface); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.stall-tile.available { border-color: #8fd3a6; background: var(--success-soft); color: #1e7a3d; }
.stall-tile.available:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stall-tile.booked { border-color: var(--border); background: var(--surface-2); color: var(--muted); }
.stall-tile.hold { border-color: #e9c46a; background: color-mix(in srgb, #e9c46a 14%, var(--surface)); color: #8a6d1d; }
[data-bs-theme='dark'] .stall-tile.available { color: #7fd69a; border-color: #2c6b45; }
[data-bs-theme='dark'] .stall-tile.hold { color: #ecc866; border-color: #6d5a1e; }

.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.25rem; }
.role-card {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.role-card.lead { border-top: 4px solid var(--accent-fill); }
.role-card .avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--chrome-3), var(--chrome-2)); color: #fff; font-weight: 800; font-family: var(--font-display); font-size: 1.15rem;
}
.role-card .role-title { display: block; color: var(--accent-text); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; margin-bottom: 0.15rem; }
.role-card h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.role-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* 10 ─ Tables, forms, alerts ─────────────────────────────────────────────── */
.table-responsive { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-responsive > .table { margin-bottom: 0; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: 0.8rem 1rem; background-color: transparent; }
.table thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody tr { transition: background-color 0.15s var(--ease); }
.table tbody tr:hover { background-color: var(--surface-2); }
.table.bg-white { background-color: transparent !important; }

.form-control, .form-select {
  background-color: var(--surface); color: var(--ink); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.form-control-sm, .form-select-sm { padding: 0.4rem 0.65rem; border-radius: 8px; }
.form-control::placeholder { color: var(--muted); opacity: 0.8; }
.form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--ink); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.form-label { font-weight: 600; color: var(--ink); }
.form-text { color: var(--muted); }
.form-check-input { border-color: var(--border); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--brand-fill); border-color: var(--brand-fill); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--brand-soft); border-color: var(--brand); }
.input-group-text { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

.alert { border-radius: var(--radius); border-width: 1px; }
.page-link { border-radius: 8px !important; margin: 0 2px; }
.list-group-item { background: var(--surface); color: var(--ink); border-color: var(--border); }
p a:not(.btn):not(.text-decoration-none), .alert a, .form-text a, .text-muted a:not(.btn), small a, .footer-contact a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
code { color: var(--accent-text); background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 6px; font-size: 0.88em; }

/* 11 ─ Content (user-authored HTML: articles, pages, events, newsletters) ─── */
.prose, .article-body { font-size: 1.05rem; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.prose > :first-child, .article-body > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .article-body h2, .article-body h3 { margin: 2rem 0 0.75rem; line-height: 1.25; }
.prose h2, .article-body h2 { font-size: 1.6rem; }
.prose h3, .article-body h3 { font-size: 1.3rem; }
.prose p, .article-body p { margin-bottom: 1.1rem; }
.prose a, .article-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose img, .article-body img { height: auto; border-radius: var(--radius-sm); margin: 1rem 0; }
.prose ul, .prose ol, .article-body ul, .article-body ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.prose li, .article-body li { margin-bottom: 0.35rem; }
.prose blockquote, .article-body blockquote { margin: 1.5rem 0; padding: 0.75rem 1.25rem; border-left: 4px solid var(--accent-fill); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.prose pre, .article-body pre { background: var(--chrome-1); color: #e6edfa; padding: 1rem 1.25rem; border-radius: var(--radius-sm); overflow-x: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }
/* tables authored in HTML mode: bordered, and horizontally scrollable on phones */
.prose table, .article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.prose th, .prose td, .article-body th, .article-body td { border: 1px solid var(--border); padding: 0.6rem 0.9rem; min-width: 120px; }
.prose th, .article-body th { background: var(--surface-2); font-weight: 700; text-align: left; }
.prose iframe, .article-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); }

/* 12 ─ Footer & back-to-top ──────────────────────────────────────────────── */
.site-footer {
  position: relative; margin-top: 5rem; color: var(--chrome-text); padding: 4rem 0 1.5rem;
  background: linear-gradient(180deg, #08172f, var(--chrome-1));
}
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent-fill), var(--chrome-3), transparent); }
.site-footer h5, .site-footer h6 { color: #fff; font-family: var(--font-display); }
.site-footer h6 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; margin-bottom: 1rem; }
.site-footer a { color: var(--chrome-text); transition: color 0.2s var(--ease), padding-left 0.2s var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-links a:hover { padding-left: 4px; }
.site-footer .footer-links li { margin-bottom: 0.5rem; }
.site-footer .footer-brand .navbar-brand-custom { color: #fff !important; }
.site-footer .footer-brand .navbar-brand-custom em { color: #ff8f86; }
.site-footer hr { border-color: rgba(255, 255, 255, 0.12); opacity: 1; }
.site-footer .footer-bottom { color: #9fb2cf; font-size: 0.85rem; }
.footer-contact i { width: 1.4rem; color: #ffd54a; }

.back-to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1040;
  width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--brand-fill); color: #fff; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.2s var(--ease);
}
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--brand-strong); }

/* 13 ─ Admin ─────────────────────────────────────────────────────────────── */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 260px; flex-shrink: 0; color: var(--chrome-text);
  background: linear-gradient(180deg, #08172f, var(--chrome-1)); --bs-offcanvas-bg: transparent; --bs-offcanvas-color: var(--chrome-text);
}
@media (min-width: 992px) { .admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.admin-sidebar .brand { padding: 1.25rem 1.25rem 1rem; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.2rem; display: flex; align-items: center; gap: 0.6rem; }
.admin-sidebar .brand .brand-mark { width: 32px; height: 32px; font-size: 0.9rem; }
.admin-sidebar .brand small { color: #ff8f86; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; line-height: 1; margin-top: 2px; }
.admin-nav { padding: 0.5rem 0.75rem 1rem; }
.admin-sidebar .admin-link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem; margin-bottom: 2px; border-radius: 10px;
  color: var(--chrome-text); font-weight: 600; font-size: 0.93rem; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.admin-sidebar .admin-link i { width: 1.2rem; text-align: center; opacity: 0.85; }
.admin-sidebar .admin-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; transform: translateX(2px); }
.admin-sidebar .admin-link.active { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 3px 0 0 var(--accent-fill); }
.admin-sidebar hr { border-color: rgba(255, 255, 255, 0.12); opacity: 1; margin: 0.75rem 0; }
.admin-sidebar .theme-seg { display: flex; gap: 4px; padding: 4px; margin: 0.25rem 0 0.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.08); }
.admin-sidebar .theme-seg button { flex: 1; border: 0; background: transparent; color: var(--chrome-text); border-radius: 8px; padding: 0.4rem 0; font-size: 0.85rem; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.admin-sidebar .theme-seg button[aria-checked='true'] { background: rgba(255, 255, 255, 0.18); color: #fff; }
.admin-sidebar .logout-btn { background: none; border: 0; color: var(--chrome-text); font-weight: 600; width: 100%; text-align: left; }
.admin-main { flex: 1 1 auto; min-width: 0; padding: clamp(1rem, 3vw, 2.25rem); background: var(--bg); }
.admin-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nav-border); }

/* 14 ─ Rich editor (Quill) ───────────────────────────────────────────────── */
.ql-toolbar.ql-snow { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-color: var(--border); background: var(--surface-2); }
.ql-container.ql-snow { border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-color: var(--border); min-height: 220px; font-family: var(--font-body); font-size: 1rem; background: var(--surface); color: var(--ink); }
.ql-editor { min-height: 220px; }
.ql-editor.ql-blank::before { color: var(--muted); }
.ql-snow .ql-stroke { stroke: var(--ink); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--ink); }
.ql-snow .ql-picker { color: var(--ink); }
.ql-snow .ql-picker-options { background: var(--surface); border-color: var(--border) !important; box-shadow: var(--shadow); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--brand); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--brand); }
.ql-snow .ql-tooltip { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow); }
.ql-snow .ql-tooltip input[type='text'] { background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.rich-editor-mode-toolbar { display: flex; gap: 6px; margin-bottom: 6px; }
.rich-editor-mode-btn { border-radius: 999px; padding: 0.15rem 0.85rem; font-size: 0.8rem; }
textarea.rich-editor-source { font-family: 'Consolas', 'Monaco', monospace; font-size: 0.85rem; background: #0f1b30; color: #d7e3f0; border-color: var(--border); border-radius: var(--radius-sm); min-height: 220px; }
.rich-editor-link-picker { display: none; position: absolute; z-index: 2000; width: min(320px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1rem; }

/* 15 ─ Motion ────────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sweep { to { left: 130%; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0.7); } 70% { box-shadow: 0 0 0 9px rgba(255, 213, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0); } }
@keyframes floatA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.12); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 50px) scale(1.1); } }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

main { animation: pageIn 0.45s var(--ease) both; }

/* Scroll reveal. Classes are added by /js/site.js, so with no JS everything is simply visible. */
.reveal { opacity: 0; transform: translateY(24px); }
/* transitions are only switched on (by site.js, two frames after load) once the hidden state
   has been painted, so cards that are already on screen don't visibly fade OUT first */
html.reveal-ready .reveal { transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-reveal='zoom'] { transform: scale(0.94); }
.reveal[data-reveal='zoom'].in-view { transform: none; }

/* smooth colour change when the theme is switched (class is removed again after ~350ms) */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero .hero-enter { opacity: 1 !important; }
}

/* 15b ─ Illustrations & page-wide motion ─────────────────────────────────── */
/* Scene palette. Every illustration is inline SVG that paints with these variables,
   so scenes follow the light/dark theme automatically. */
.il {
  --il-sky-a: #dcecfb; --il-sky-b: #f6faff;
  --il-ink: #0b3a6b; --il-line: #3d79b3; --il-soft: #b7d2ec;
  --il-accent: #d62a1f; --il-glow: #f2a900; --il-ground: #c5d9ee;
  display: block; width: 100%; height: auto;
}
[data-bs-theme='dark'] .il {
  --il-sky-a: #0a1f3d; --il-sky-b: #12315b;
  --il-ink: #8fc2f2; --il-line: #5aa0e0; --il-soft: #1f4676;
  --il-accent: #ff6a5e; --il-glow: #ffd54a; --il-ground: #0d2a4e;
}
.il.il-hero { --il-sky-a: #0a1f3d; --il-sky-b: #12315b; --il-ink: #9ccbf5; --il-line: #5aa0e0; --il-soft: #1b4272; --il-accent: #ff6a5e; --il-glow: #ffd54a; --il-ground: #0a2447; }
.s-ink { stroke: var(--il-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-line { stroke: var(--il-line); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-accent { stroke: var(--il-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-glow { stroke: var(--il-glow); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.f-ink { fill: var(--il-ink); } .f-line { fill: var(--il-line); } .f-soft { fill: var(--il-soft); }
.f-accent { fill: var(--il-accent); } .f-glow { fill: var(--il-glow); } .f-ground { fill: var(--il-ground); }
.f-sky-a { fill: var(--il-sky-a); } .f-sky-b { fill: var(--il-sky-b); }

/* animation vocabulary */
@keyframes il-flow { to { stroke-dashoffset: -24; } }
@keyframes il-rotate { to { transform: rotate(360deg); } }
@keyframes il-rotate-rev { to { transform: rotate(-360deg); } }
@keyframes il-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes il-twinkle { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.2; transform: scale(0.6); } }
@keyframes il-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes il-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes il-ripple { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes il-grow { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
@keyframes il-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes il-glint { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }
.il * { transform-box: fill-box; transform-origin: center; }
.a-flow { stroke-dasharray: 6 6; animation: il-flow 1.1s linear infinite; }
.a-flow-slow { stroke-dasharray: 6 6; animation: il-flow 2.4s linear infinite; }
.a-spin { animation: il-rotate 6s linear infinite; }
.a-spin-slow { animation: il-rotate 12s linear infinite; }
.a-spin-rev { animation: il-rotate-rev 9s linear infinite; }
.a-blink { animation: il-blink 1.6s ease-in-out infinite; }
.a-twinkle { animation: il-twinkle 3s ease-in-out infinite; }
.a-pulse { animation: il-pulse 2.4s ease-in-out infinite; }
.a-float { animation: il-float 4.5s ease-in-out infinite; }
.a-ripple { animation: il-ripple 2.6s ease-out infinite; }
.a-grow { transform-origin: 50% 100%; animation: il-grow 1.4s var(--ease) both; }
.a-sway { animation: il-sway 5s ease-in-out infinite; }
.a-glint { animation: il-glint 2.8s ease-in-out infinite; }
.d1 { animation-delay: 0.3s; } .d2 { animation-delay: 0.7s; } .d3 { animation-delay: 1.2s; } .d4 { animation-delay: 1.8s; }
.dp1 { animation-delay: -1s; } .dp2 { animation-delay: -2s; } .dp3 { animation-delay: -3s; }
/* off-screen scenes are paused (site.js adds .il-live while a scene is visible) */
.il-armed .il:not(.il-live) * { animation-play-state: paused; }

/* hero: text + scene side by side from 992px */
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero-art { display: none; }
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .hero-art { display: block; }
}
.hero-art .il { border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); }
.hero-art-wrap { animation: fadeUp 1s var(--ease) 0.4s both; }

/* industry cards */
.card-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.card-art .il { height: 100%; transition: transform 0.7s var(--ease); }
.card-ceeama:hover .card-art .il { transform: scale(1.06); }
.industry-card .card-body h3 { font-size: 1.05rem; font-weight: 700; }

/* subtle page-wide polish */
@media (prefers-reduced-motion: no-preference) {
  main > section.bg-white.border-bottom { position: relative; overflow: hidden; }
  main > section.bg-white.border-bottom::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--brand) 9%, transparent), transparent);
    transform: skewX(-18deg); animation: header-sheen 1.6s var(--ease) 0.3s 1 both;
  }
  .admin-main > * { animation: fadeUp 0.6s var(--ease) both; }
  .admin-main > *:nth-child(2) { animation-delay: 0.06s; } .admin-main > *:nth-child(3) { animation-delay: 0.12s; }
  .admin-main > *:nth-child(4) { animation-delay: 0.18s; } .admin-main > *:nth-child(n+5) { animation-delay: 0.24s; }
  @view-transition { navigation: auto; }
}
@keyframes header-sheen { from { left: -40%; } to { left: 130%; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-navbar::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: 0 50%;
      background: linear-gradient(90deg, var(--brand), var(--accent-fill)); transform: scaleX(0);
      animation: scroll-progress linear both; animation-timeline: scroll(root block);
    }
    @keyframes scroll-progress { to { transform: scaleX(1); } }
  }
}

/* 16 ─ Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  /* below xl the nav lives in the slide-in drawer */
  .site-navbar .offcanvas-body { padding: 1rem 1.25rem 2rem; }
  .site-navbar .navbar-nav { gap: 2px; }
  .site-navbar .nav-link { padding: 0.8rem 0.5rem !important; font-size: 1rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .site-navbar .nav-link:not(.dropdown-toggle)::after { display: none; }
  /* dropdown entries in the drawer: label on the left, caret on the right, caret flips when open */
  .site-navbar .nav-link.dropdown-toggle { display: flex; align-items: center; justify-content: space-between; }
  .site-navbar .nav-link.dropdown-toggle::after { display: inline-block; margin-left: auto; transition: transform 0.25s var(--ease); }
  .site-navbar .nav-link.dropdown-toggle[aria-expanded='true']::after { transform: rotate(180deg); }
  .site-navbar .dropdown-menu { box-shadow: none; border: 0; background: var(--surface-2); margin: 0.25rem 0 0.5rem; animation: none; }
  .site-navbar .dropdown-item { padding: 0.7rem 0.9rem; }
  .site-navbar .auth-cluster { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .site-navbar .auth-cluster .btn { width: 100%; padding: 0.7rem 1rem; }
}
@media (min-width: 1200px) {
  .site-navbar .offcanvas { background: transparent; border: 0; flex-grow: 1; }
  .site-navbar .auth-cluster { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.75rem; }
}
@media (max-width: 991.98px) {
  .admin-shell { display: block; }
  .admin-sidebar { width: min(300px, 86vw); }
}
@media (max-width: 767.98px) {
  .hero-facts { gap: 0.9rem; flex-direction: column; }
  .hero-actions .btn { flex: 1 1 100%; }
  .card-ceeama .card-body { padding: 1.1rem; }
  .site-footer { padding-top: 3rem; margin-top: 3.5rem; }
  .section-title { font-size: 1.55rem; }
  .table > :not(caption) > * > * { padding: 0.65rem 0.75rem; }
  .cta-band { text-align: center; }
  .cta-band .btn { width: 100%; }
}
@media (max-width: 575.98px) {
  /* >=16px inputs stop iOS Safari zooming the page on focus; >=44px tap targets */
  .form-control, .form-select { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .container { padding-left: 1rem; padding-right: 1rem; }
  .pricing-card .fee, .fee { font-size: 1.7rem; }
  .role-card { padding: 1.15rem; }
  .locked-panel { padding: 1.5rem 1rem; }
}

/* 17 ─ Print ─────────────────────────────────────────────────────────────── */
@media print {
  .site-navbar, .site-footer, .back-to-top, .skip-link, .admin-sidebar, .admin-topbar, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card-ceeama, .table-responsive { box-shadow: none !important; }
}

/* buttons */
.w-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    border: 0;
    cursor: pointer;
    transition: transform .2s,box-shadow .2s,filter .2s
}

    .w-btn svg {
        width: 17px;
        height: 17px
    }

.w-btn-primary {
    color: #04101f;
    background: linear-gradient(135deg,var(--cyan),#60a5fa 55%,var(--violet));
    box-shadow: 0 10px 30px -10px rgba(34,211,238,.7)
}

.why a.w-btn-outline {
    color: #fff;
    border: 1px solid rgba(148,197,255,.4);
    background: rgba(255,255,255,.04)
}

.why a.w-btn-line {
    color: var(--blue);
    border: 1px solid rgba(37,99,235,.35);
    background: #fff
}

.w-btn-sm {
    padding: 9px 18px;
    font-size: .88rem
}

.w-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1)
}

/* page header + sub-nav */
.w-page-header {
    position: relative;
    overflow: hidden;
    padding: 84px 0 70px
}

    .w-page-header canvas, .w-hero canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%
    }

    .w-page-header .w-container {
        position: relative
    }

.w-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cyan);
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase
}

    .w-eyebrow::before {
        content: "";
        width: 34px;
        height: 2px;
        background: linear-gradient(90deg,var(--cyan),var(--violet))
    }

.w-page-header h1 {
    font-size: clamp(2.4rem,1.4rem + 4vw,4.2rem);
    margin: 14px 0 14px;
    background: linear-gradient(180deg,#fff 35%,#9ecbff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.w-breadcrumb {
    font-size: .88rem;
    color: var(--muted)
}

    .w-breadcrumb a:hover {
        color: var(--cyan)
    }

    .w-breadcrumb span {
        margin: 0 6px;
        opacity: .5
    }

.w-secondary-nav {
    position: relative;
    z-index: 2;
    border-block: 1px solid var(--line);
    background: rgba(5,11,26,.6);
    backdrop-filter: blur(12px)
}

.w-secondary-nav-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 0
}

.w-pill {
    white-space: nowrap;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: #b8c7e3;
    font-size: .9rem;
    font-weight: 500;
    transition: .2s
}

    .w-pill:hover {
        border-color: var(--cyan);
        color: #fff
    }

    .w-pill.w-is-active {
        background: linear-gradient(135deg,var(--cyan),var(--violet));
        color: #04101f;
        font-weight: 700;
        border-color: transparent
    }

/* home hero */
.w-hero {
    position: relative;
    overflow: hidden;
    padding: 96px 0 88px
}

.w-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center
}

.w-hero h1 {
    font-size: clamp(2.5rem,1.3rem + 4.4vw,4.5rem);
    margin: 16px 0 18px;
    background: linear-gradient(180deg,#fff 40%,#9ecbff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

    .w-hero h1 em {
        font-style: normal;
        background: linear-gradient(90deg,var(--cyan),var(--violet));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.w-hero .w-lead {
    max-width: 60ch;
    font-size: 1.12rem
}

.w-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px
}

.w-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.w-stat {
    padding: 26px 24px;
    border-radius: 20px;
    background: var(--glass);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px -16px rgba(0,0,0,.5)
}

    .w-stat b {
        display: block;
        font: 700 2.5rem var(--display);
        color: var(--cyan);
        line-height: 1.1
    }

    .w-stat span {
        font-size: .9rem;
        color: var(--muted)
    }

/* sections */
.w-section {
    padding: 84px 0
}

    .w-section.w-light {
        --head: #0f172a;
        --text: #334155;
        --muted: #64748b;
        --line: rgba(15,23,42,.09);
        --glass: #fff;
        background: linear-gradient(180deg,#fff,#f3f7ff);
        color: var(--text);
        border-block: 1px solid rgba(15,23,42,.06)
    }

.w-section-head {
    max-width: 720px;
    margin-bottom: 44px
}

    .w-section-head h2 {
        font-size: clamp(1.9rem,1.2rem + 2.2vw,2.9rem);
        margin: 12px 0 14px
    }

.w-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: none
}

.w-light .w-eyebrow {
    color: var(--blue)
}

    .w-light .w-eyebrow::before {
        background: linear-gradient(90deg,var(--blue),var(--violet))
    }

.w-lead {
    font-size: 1.1rem
}

.w-two-col {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center
}

.why p a, .why .w-lead a {
    color: var(--cyan);
    font-weight: 600
}

.w-light p a {
    color: var(--blue)
}

.w-para + .w-para {
    margin-top: 14px
}

/* tick / bullet lists */
.w-ticks {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-top: 22px;
    padding: 0
}

    .w-ticks li {
        position: relative;
        padding-left: 40px
    }

        .w-ticks li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 3px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg,var(--cyan),var(--violet));
            box-shadow: 0 0 18px rgba(34,211,238,.45)
        }

        .w-ticks li::after {
            content: "";
            position: absolute;
            left: 8px;
            top: 9px;
            width: 8px;
            height: 4px;
            border-left: 2px solid #04101f;
            border-bottom: 2px solid #04101f;
            transform: rotate(-45deg)
        }

    .w-ticks b {
        color: var(--head);
        font-weight: 600
    }

.w-light .w-ticks li::before {
    background: linear-gradient(135deg,var(--blue),var(--violet));
    box-shadow: 0 6px 14px -4px rgba(37,99,235,.5)
}

.w-light .w-ticks li::after {
    border-color: #fff
}

.w-card .w-ticks {
    gap: 11px;
    margin-top: 16px
}

    .w-card .w-ticks li {
        font-size: .95rem;
        padding-left: 36px
    }

.w-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px
}

.w-chip {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 500;
    color: #fff;
    background: rgba(34,211,238,.1);
    border: 1px solid rgba(34,211,238,.35)
}

.w-light .w-chip {
    color: var(--blue);
    background: #eff4ff;
    border-color: rgba(37,99,235,.25)
}

/* cards */
.w-grid {
    display: grid;
    gap: 24px
}

.w-grid-4 {
    grid-template-columns: repeat(4,1fr)
}

.w-grid-3 {
    grid-template-columns: repeat(3,1fr)
}

.w-grid-2 {
    grid-template-columns: repeat(2,1fr)
}

.w-card {
    position: relative;
    padding: 32px 28px;
    border-radius: 20px;
    background: var(--glass);
    border: 1px solid var(--line);
    box-shadow: 0 14px 40px -16px rgba(0,0,0,.5);
    transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition: transform .15s ease-out,box-shadow .3s,border-color .3s;
    overflow: hidden
}

    .w-card.w-leave {
        transition: transform .5s cubic-bezier(.2,.8,.2,1)
    }

    .w-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s;
        background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.12),transparent 45%)
    }

    .w-card:hover::before {
        opacity: 1
    }

    .w-card:hover {
        border-color: rgba(37,99,235,.4);
        box-shadow: 0 30px 70px -24px rgba(37,99,235,.4)
    }

.w-light .w-card {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.04),0 14px 34px -16px rgba(15,23,42,.18)
}

.w-card h3 {
    font-size: 1.25rem;
    margin: 14px 0 8px;
    color: var(--head)
}

.w-card p {
    font-size: .97rem
}

.w-card-flush {
    padding: 0
}

    .w-card-flush img {
        display: block;
        width: 100%;
        aspect-ratio: 16/10;
        object-fit: cover
    }

.w-card-body {
    padding: 24px 26px 28px
}

    .w-card-body h3 {
        margin-top: 10px
    }

.w-card-link {
    display: block;
    color: inherit
}

.w-tag {
    display: inline-block;
    margin-top: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #eff4ff;
    color: var(--blue)
}

.w-tag-amber {
    background: #fff7e0;
    color: #b45309
}

.w-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(34,211,238,.25),rgba(139,92,246,.25));
    border: 1px solid rgba(34,211,238,.4);
    color: var(--cyan);
    font-size: 26px;
    box-shadow: 0 0 28px rgba(34,211,238,.3)
}

.w-light .w-icon {
    background: linear-gradient(135deg,#dbeafe,#ede9fe);
    border-color: rgba(37,99,235,.25);
    color: var(--blue);
    box-shadow: 0 10px 24px -12px rgba(37,99,235,.6)
}

.w-card-num {
    position: absolute;
    right: 20px;
    top: 10px;
    font: 700 3.2rem var(--display);
    color: rgba(148,163,184,.14)
}

.w-light .w-card-num {
    color: rgba(15,23,42,.06)
}

.w-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--muted)
}

    .w-meta svg {
        width: 15px;
        height: 15px
    }

.w-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0
}

.w-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: rgba(34,211,238,.12);
    color: var(--cyan);
    border: 1px solid rgba(34,211,238,.3)
}

.w-light .w-badge {
    background: #eff4ff;
    color: var(--blue);
    border-color: rgba(37,99,235,.2)
}

.w-badge-amber {
    background: rgba(251,191,36,.14);
    color: var(--amber);
    border-color: rgba(251,191,36,.35)
}

.w-light .w-badge-amber {
    background: #fff7e0;
    color: #b45309;
    border-color: rgba(180,83,9,.2)
}

.w-badge-red {
    background: rgba(248,113,113,.14);
    color: #fca5a5;
    border-color: rgba(248,113,113,.4)
}

.w-light .w-badge-red {
    background: #fee2e2;
    color: #b91c1c;
    border-color: rgba(185,28,28,.2)
}

.w-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-weight: 700;
    color: var(--cyan)
}

.w-light .w-more {
    color: var(--blue)
}

.w-more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.w-more:hover svg {
    transform: translateX(4px)
}

.w-price {
    font: 700 2.1rem var(--display);
    color: var(--cyan);
    margin: 8px 0 2px
}

.w-light .w-price {
    color: var(--blue)
}

.w-empty {
    padding: 44px 24px;
    border-radius: 20px;
    border: 1px dashed var(--line);
    text-align: center;
    color: var(--muted)
}

/* quotes, notes, CTA */
.w-pull {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    font: 600 clamp(1.5rem,1rem + 2vw,2.5rem)/1.3 var(--display);
    color: #fff
}

    .w-pull::before {
        content: "\201C";
        display: block;
        font-size: 5rem;
        line-height: .6;
        color: var(--cyan);
        opacity: .7
    }

.w-quote {
    margin: 22px 0;
    padding: 6px 0 6px 22px;
    border-left: 3px solid var(--cyan);
    font: 500 1.15rem/1.6 var(--display);
    color: var(--head)
}

.w-note {
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px dashed rgba(37,99,235,.35);
    background: #f5f8ff;
    font-size: .97rem;
    color: #334155
}

    .w-note b {
        color: #0f172a
    }

.w-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 36px 40px;
    border-radius: 26px;
    background: linear-gradient(120deg,rgba(34,211,238,.18),rgba(139,92,246,.24));
    border: 1px solid rgba(34,211,238,.32);
    box-shadow: 0 0 60px rgba(34,211,238,.18)
}

    .w-cta-band h3 {
        font-size: 1.7rem;
        margin-bottom: 6px
    }

.w-light .w-cta-band {
    background: linear-gradient(120deg,#eaf2ff,#f1ecff);
    border-color: rgba(37,99,235,.2);
    box-shadow: none
}

/* numbered steps */
.w-steps {
    list-style: none;
    counter-reset: st;
    display: grid;
    gap: 14px;
    margin-top: 22px;
    padding: 0
}

    .w-steps li {
        counter-increment: st;
        position: relative;
        padding: 16px 20px 16px 66px;
        border-radius: 16px;
        border: 1px solid var(--line);
        background: var(--glass)
    }

        .w-steps li::before {
            content: counter(st);
            position: absolute;
            left: 18px;
            top: 14px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg,var(--cyan),var(--violet));
            color: #04101f;
            display: grid;
            place-items: center;
            font: 700 .95rem var(--display)
        }

.w-light .w-steps li {
    background: #fff
}

    .w-light .w-steps li::before {
        background: linear-gradient(135deg,var(--blue),var(--violet));
        color: #fff
    }

.w-steps-2 {
    grid-template-columns: repeat(2,1fr)
}

.w-flow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    counter-reset: s
}

    .w-flow .w-card {
        counter-increment: s
    }

        .w-flow .w-card::after {
            content: "0" counter(s);
            position: absolute;
            right: 20px;
            top: 8px;
            font: 700 3.4rem var(--display);
            color: rgba(15,23,42,.07)
        }

/* timeline + filters */
.w-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 8px
}

.w-fchip {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: #b8c7e3;
    cursor: pointer;
    font: 500 .9rem 'Inter',sans-serif;
    transition: .2s
}

    .w-fchip:hover {
        border-color: var(--cyan);
        color: #fff
    }

    .w-fchip[aria-pressed="true"] {
        background: linear-gradient(135deg,var(--cyan),var(--violet));
        color: #04101f;
        font-weight: 700;
        border-color: transparent
    }

.why [data-tags][hidden] {
    display: none
}

.w-timeline {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    position: relative
}

    .w-timeline::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: linear-gradient(180deg,var(--cyan),var(--violet))
    }

    .w-timeline li {
        position: relative;
        padding: 0 0 30px 52px
    }

        .w-timeline li::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 4px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #050b1a;
            border: 3px solid var(--cyan);
            box-shadow: 0 0 16px rgba(34,211,238,.6)
        }

.w-light .w-timeline li::before {
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 14px rgba(37,99,235,.35)
}

.w-date {
    font: 600 .8rem var(--display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan)
}

.w-light .w-date {
    color: var(--blue)
}

.w-timeline h3 {
    font-size: 1.25rem;
    margin: 6px 0 6px
}

/* table */
.w-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff
}

.w-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    color: var(--text)
}

    .w-table th, .w-table td {
        padding: 15px 18px;
        text-align: left;
        border-bottom: 1px solid var(--line);
        font-size: .95rem
    }

    .w-table th {
        background: #eaf1ff;
        color: var(--head);
        font: 600 .82rem var(--display);
        letter-spacing: .06em;
        text-transform: uppercase
    }

    .w-table tbody tr:last-child td {
        border-bottom: 0
    }

    .w-table tbody tr:hover {
        background: #f6f9ff
    }

    .w-table td:first-child {
        font-weight: 600;
        color: var(--head)
    }

    .w-table .amount {
        font-weight: 700;
        color: var(--blue)
    }

/* people, video, photos */
.w-person {
    display: flex;
    gap: 18px;
    align-items: flex-start
}

.w-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font: 700 1.35rem var(--display);
    color: #fff;
    background: linear-gradient(135deg,var(--blue),var(--violet));
    object-fit: cover
}

.w-role {
    font: 600 .75rem var(--display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue)
}

.w-person h3 {
    margin: 4px 0 4px;
    font-size: 1.2rem
}

.w-person .w-meta-line {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 8px
}

.w-person p {
    font-size: .93rem
}

.w-card.w-lead-card {
    border-color: rgba(37,99,235,.4)
}

.w-ratio {
    position: relative;
    aspect-ratio: 16/9;
    background: #050b1a
}

    .w-ratio iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0
    }

.w-photos {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

    .w-photos figure {
        margin: 0
    }

    .w-photos img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 16px;
        display: block;
        border: 1px solid var(--line)
    }

    .w-photos figcaption {
        font-size: .85rem;
        color: var(--muted);
        margin-top: 6px
    }

/* prose (CMS content) */
.w-prose-card {
    max-width: 880px;
    margin-inline: auto;
    padding: 48px 52px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.07);
    box-shadow: 0 30px 70px -34px rgba(15,23,42,.3)
}

.w-prose {
    color: #334155;
    font-size: 1.04rem
}

    .w-prose h1, .w-prose h2, .w-prose h3, .w-prose h4 {
        color: #0f172a;
        margin: 1.6em 0 .6em
    }

    .w-prose > :first-child {
        margin-top: 0
    }

    .w-prose p {
        margin: 0 0 1em
    }

    .w-prose a {
        color: var(--blue);
        font-weight: 600;
        text-decoration: underline
    }

    .w-prose ul, .w-prose ol {
        margin: 0 0 1.2em;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 10px
    }

        .w-prose ul li {
            position: relative;
            padding-left: 30px
        }

            .w-prose ul li::before {
                content: "";
                position: absolute;
                left: 4px;
                top: .62em;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: linear-gradient(135deg,var(--blue),var(--violet))
            }

    .w-prose ol {
        counter-reset: pl
    }

        .w-prose ol li {
            counter-increment: pl;
            position: relative;
            padding-left: 38px
        }

            .w-prose ol li::before {
                content: counter(pl);
                position: absolute;
                left: 0;
                top: .1em;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background: #eff4ff;
                color: var(--blue);
                display: grid;
                place-items: center;
                font: 700 .8rem var(--display)
            }

    .w-prose img {
        max-width: 100%;
        height: auto;
        border-radius: 14px
    }

    .w-prose blockquote {
        margin: 1.4em 0;
        padding: 4px 0 4px 20px;
        border-left: 3px solid var(--blue);
        color: #0f172a;
        font-weight: 500
    }

    .w-prose table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.2em 0
    }

    .w-prose th, .w-prose td {
        padding: 10px 12px;
        border: 1px solid rgba(15,23,42,.1);
        text-align: left
    }

/* forms */
.w-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px
}

.w-field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px
}

    .w-field.full {
        grid-column: 1/-1
    }

    .w-field label {
        font-weight: 600;
        font-size: .9rem;
        color: var(--head)
    }

    .w-field input, .w-field textarea {
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid rgba(15,23,42,.18);
        background: #fff;
        color: #0f172a;
        font: inherit;
        transition: border-color .2s,box-shadow .2s
    }

        .w-field input:focus, .w-field textarea:focus {
            outline: 0;
            border-color: var(--blue);
            box-shadow: 0 0 0 4px rgba(37,99,235,.15)
        }

.w-social {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

    .w-social a {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid var(--line);
        color: var(--blue);
        font-size: 18px;
        transition: .2s
    }

        .w-social a:hover {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue)
        }

/* motion + responsive */
.w-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)
}

    .w-reveal.w-in {
        opacity: 1;
        transform: none
    }

@media(max-width:980px) {
    .w-two-col, .w-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .w-grid-4, .w-grid-3, .w-grid-2, .w-flow, .w-steps-2 {
        grid-template-columns: 1fr 1fr
    }

    .w-photos {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .w-grid-4, .w-grid-3, .w-grid-2, .w-flow, .w-steps-2, .w-form-grid {
        grid-template-columns: 1fr
    }

    .w-section {
        padding: 60px 0
    }

    .w-cta-band {
        padding: 28px
    }

    .w-prose-card {
        padding: 28px 22px
    }

    .w-hero {
        padding: 64px 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .why * {
        animation: none !important;
        transition: none !important
    }

    .w-reveal {
        opacity: 1;
        transform: none
    }
}