/*
 * BP06 — style.css
 * =================
 * Base stylesheet. Uses CSS custom properties from themes.css.
 * All components are theme-agnostic — they just use var(--color-*).
 *
 * Import order in HTML:
 *   1. themes.css  (defines the variables)
 *   2. style.css   (uses the variables)
 *
 * Layout approach:
 *   - Colour themes (t01-t12): use .layout-elegant (default)
 *   - Style themes modify layout via data-theme selectors in themes.css
 */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:    var(--font-body);
  font-size:      var(--font-size-base);
  line-height:    var(--line-height-body);
  color:          var(--color-text);
  background:     var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .founder-name {
  font-family:    var(--font-heading);
  line-height:    1.25;
  color:          var(--color-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; }
h3, .founder-name { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; }

p { color: var(--color-text); }

/* Raw --color-accent fails contrast as text for several colour themes (e.g.
   Ink & Aqua's pale mint on light backgrounds, or Olive & Grape's dark olive
   on Dark style's near-black) — blended 30/70 toward the theme's own text
   colour keeps a tint of brand colour while staying readable for all 12
   colour themes, verified via WCAG contrast ratio (worst case 4.5:1+). */
a { color: color-mix(in srgb, var(--color-accent) 30%, var(--color-text) 70%); text-decoration: none; transition: opacity .15s; }
a:hover { opacity: .8; }

img { max-width: 100%; height: auto; display: block; }

/* ── Container ───────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 16px; }
@media (max-width: 768px) { .container { padding: 0 24px; } }
.container-sm { max-width: 760px; }
.container-xs { max-width: 560px; }

/* ── Template toggle bar ─────────────────────────────────────────────────── */
.tpl-bar {
  background:   var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       8px 0;
  position:      sticky;
  top:           0;
  z-index:       200;
}

.tpl-bar-inner {
  display:        flex;
  align-items:    center;
  gap:            10px;
  flex-wrap:      wrap;
}

.tpl-bar-label {
  font-size:     .68rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:         var(--color-text-muted);
  white-space:   nowrap;
}

/* Colour group and style group containers */
.tpl-group {
  display:     flex;
  align-items: center;
  gap:         7px;
  flex-shrink: 0;
}

/* Vertical divider between groups */
.tpl-sep {
  width:      1px;
  height:     22px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Colour swatches */
.tpl-swatches { display: flex; gap: 4px; flex-wrap: wrap; }

.tpl-swatch {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  border:        2.5px solid transparent;
  cursor:        pointer;
  padding:       0;
  display:       flex;
  overflow:      hidden;
  transition:    transform .15s, border-color .15s;
  flex-shrink:   0;
}

.tpl-swatch span { flex: 1; }
.tpl-swatch:hover { transform: scale(1.15); }
.tpl-swatch.active { border-color: var(--color-text); transform: scale(1.1); }

/* Style template buttons */
.tpl-style-btns { display: flex; gap: 4px; flex-wrap: wrap; }

.tpl-style-btn {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 10px 3px 7px;
  border:        1.5px solid var(--color-border);
  border-radius: 20px;
  font-size:     .72rem;
  font-weight:   600;
  cursor:        pointer;
  background:    var(--color-surface);
  color:         var(--color-text);
  white-space:   nowrap;
  transition:    border-color .15s, background .15s, color .15s;
}

.tpl-style-btn:hover { border-color: var(--color-text-muted); }

.tpl-style-btn.active {
  border-color: var(--color-text);
  background:   var(--color-text);
  color:        var(--color-surface);
}

.tpl-style-dot {
  width:        10px;
  height:       10px;
  border-radius: 50%;
  flex-shrink:  0;
  display:      inline-block;
}

.tpl-dropdown { display: none; }

.tpl-bar-cta {
  margin-left:   auto;
  background:    var(--color-btn-bg);
  color:         var(--color-btn-text) !important;
  padding:       6px 16px;
  border-radius: var(--radius-btn);
  font-size:     .8rem;
  font-weight:   600;
  white-space:   nowrap;
  transition:    background .15s;
}

.tpl-bar-cta:hover {
  background: var(--color-btn-hover);
  opacity:    1;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.site-header {
  background:    var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
  position:      sticky;
  top:           0;
  z-index:       100;
  transition:    box-shadow .2s;
}

.site-header.scrolled { box-shadow: var(--shadow-md); }

.nav-container {
  height:        64px;
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.nav-logo {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-right:  auto;
  text-decoration: none;
}

.nav-logo img { height: 40px; width: auto; }

.nav-logo-text {
  font-family:   var(--font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--color-nav-text);
}

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

.nav-link {
  padding:       8px 12px;
  border-radius: var(--radius-sm);
  font-size:     .875rem;
  font-weight:   500;
  color:         var(--color-nav-text);
  text-decoration: none;
  transition:    background .15s;
}

.nav-link:hover { background: var(--color-surface-alt); opacity: 1; }
.nav-link.active { background: var(--color-surface-alt); font-weight: 600; }

.nav-cta {
  background:    var(--color-btn-bg);
  color:         var(--color-btn-text) !important;
  padding:       8px 18px;
  border-radius: var(--radius-btn);
  font-weight:   600;
  margin-left:   8px;
  transition:    background .15s;
}

.nav-cta:hover { background: var(--color-btn-hover); opacity: 1; }

.nav-hamburger {
  display:       none;
  flex-direction: column;
  gap:           5px;
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       6px;
}

.nav-hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--color-nav-text);
  border-radius: 2px;
  transition:    transform .2s;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        12px 28px;
  border-radius:  var(--radius-btn);
  font-family:    var(--font-body);
  font-size:      .9rem;
  font-weight:    600;
  letter-spacing: .01em;
  cursor:         pointer;
  border:         none;
  transition:     background .15s, transform .1s;
  text-decoration: none;
}

.btn:active { transform: scale(.98); }

.btn-primary {
  background:    var(--color-btn-bg);
  color:         var(--color-btn-text);
}

.btn-primary:hover { background: var(--color-btn-hover); opacity: 1; }

.btn-outline {
  background:    transparent;
  color:         color-mix(in srgb, var(--color-btn-bg) 30%, var(--color-text) 70%);
  border:        2px solid var(--color-btn-bg);
}

.btn-outline:hover { background: var(--color-btn-bg); color: var(--color-btn-text); opacity: 1; }

.btn-ghost {
  background:    rgba(255,255,255,.15);
  color:         var(--color-hero-text);
  border:        1.5px solid rgba(255,255,255,.3);
}

.btn-ghost:hover { background: rgba(255,255,255,.25); opacity: 1; }

.btn-lg { padding: 14px 36px; font-size: 1rem; }
.btn-sm { padding: 8px 18px; font-size: .8rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background:    var(--color-hero-bg);
  color:         var(--color-hero-text);
  padding:       var(--section-py) 0;
  position:      relative;
  overflow:      hidden;
}

.hero::before {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    url('/assets/images/hero-pattern.svg') center/cover no-repeat;
  opacity:       .05;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; max-width: 680px; }

.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     rgba(255,255,255,.12);
  border:         1px solid rgba(255,255,255,.2);
  color:          rgba(255,255,255,.9);
  padding:        5px 14px;
  border-radius:  50px;
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .04em;
  margin-bottom:  20px;
}

.hero h1 {
  color:         var(--color-hero-text);
  margin-bottom: 16px;
}

.hero p {
  color:         rgba(255,255,255,.9);
  font-size:     1.05rem;
  max-width:     560px;
  margin-bottom: 32px;
}

.hero-cta-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: var(--section-py) 0; }
.section-alt { background: var(--color-surface-alt); }

.section-title {
  text-align:    center;
  margin-bottom: 52px;
}

.section-title h2 { margin-bottom: 10px; }

.section-title p {
  font-size:     1.05rem;
  color:         var(--color-text-muted);
  max-width:     560px;
  margin:        0 auto;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       28px;
  transition:    box-shadow .2s, transform .2s;
}

.card:hover {
  box-shadow:    var(--shadow-md);
  transform:     translateY(-2px);
}

/* ── Grid layouts ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ── About section ───────────────────────────────────────────────────────── */
.about-grid {
  display:         grid;
  grid-template-columns: 1fr 1.2fr;
  gap:             60px;
  align-items:     center;
}

.about-image {
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  4/3;
  background:    var(--color-surface-alt);
}

.about-image img {
  width:   100%;
  height:  100%;
  object-fit: cover;
}

.about-content h2 { margin-bottom: 16px; }

.about-content p {
  color:         var(--color-text-muted);
  margin-bottom: 14px;
}

.about-stats {
  display:       flex;
  gap:           32px;
  margin-top:    28px;
  padding-top:   24px;
  border-top:    1px solid var(--color-border);
}

.stat-num {
  display:       block;
  font-family:   var(--font-heading);
  font-size:     2.2rem;
  font-weight:   700;
  color:         color-mix(in srgb, var(--color-accent) 30%, var(--color-text) 70%);
  line-height:   1;
}

.stat-label {
  font-size:     .78rem;
  color:         var(--color-text-muted);
  font-weight:   500;
}

/* ── Services ────────────────────────────────────────────────────────────── */
.service-card {
  padding:          24px;
  background:       var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  border-top:       3px solid var(--color-accent);
  transition:       box-shadow .2s, transform .2s;
}

.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.service-icon {
  font-size:     1.8rem;
  margin-bottom: 12px;
  line-height:   1;
}

.service-card h3 { margin-bottom: 8px; }

.service-card p {
  font-size:     .875rem;
  color:         var(--color-text-muted);
  line-height:   1.65;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   12px;
}

.gallery-item {
  aspect-ratio:  4/3;
  overflow:      hidden;
  border-radius: var(--radius-md);
  cursor:        pointer;
  position:      relative;
  background:    var(--color-surface-alt);
}

.gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .3s;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-overlay {
  position:    absolute;
  inset:       0;
  background:  rgba(0,0,0,.4);
  opacity:     0;
  transition:  opacity .2s;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   1.8rem;
  color:       #fff;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.testimonial-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       28px;
  position:      relative;
}

.testimonial-card::before {
  content:     '"';
  font-family: var(--font-heading);
  font-size:   4rem;
  line-height: 1;
  color:       var(--color-accent);
  opacity:     .3;
  position:    absolute;
  top:         12px;
  left:        20px;
}

.testimonial-text {
  font-size:     .95rem;
  line-height:   1.7;
  color:         var(--color-text);
  margin-bottom: 16px;
  padding-top:   20px;
}

.testimonial-author {
  font-size:     .8rem;
  font-weight:   600;
  color:         var(--color-text-muted);
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing-grid {
  display:     grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:         24px;
  max-width:   700px;
  margin:      0 auto;
}

.pricing-card {
  background:    var(--color-surface);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       32px;
  position:      relative;
  transition:    border-color .2s, box-shadow .2s;
}

.pricing-card.featured {
  border-color:  var(--color-accent);
  box-shadow:    var(--shadow-lg);
}

.pricing-badge {
  position:      absolute;
  top:           -12px;
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--color-accent);
  color:         var(--color-btn-text);
  padding:       3px 14px;
  border-radius: 50px;
  font-size:     .72rem;
  font-weight:   700;
  white-space:   nowrap;
}

.pricing-price {
  font-family:   var(--font-heading);
  font-size:     2.8rem;
  font-weight:   700;
  color:         color-mix(in srgb, var(--color-accent) 30%, var(--color-text) 70%);
  margin:        12px 0 4px;
  line-height:   1;
}

.pricing-price span {
  font-size:     1rem;
  font-weight:   400;
  color:         var(--color-text-muted);
}

.pricing-features {
  list-style:    none;
  margin:        20px 0 24px;
}

.pricing-features li {
  padding:       8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size:     .875rem;
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.pricing-features li::before {
  content:       '✓';
  color:         color-mix(in srgb, var(--color-accent) 30%, var(--color-text) 70%);
  font-weight:   700;
  font-size:     .8rem;
  flex-shrink:   0;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid {
  display:       grid;
  grid-template-columns: 1fr 1.5fr;
  gap:           60px;
  align-items:   start;
}

.contact-form-box {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       32px;
}

.map-wrap {
  margin-top:    32px;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  16 / 5;
  min-height:    220px;
}

.map-wrap iframe {
  width:  100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 700px) {
  .map-wrap { aspect-ratio: 4 / 3; }
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display:       block;
  font-size:     .78rem;
  font-weight:   600;
  margin-bottom: 5px;
  color:         var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.form-group input,
.form-group textarea,
.form-group select {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family:   var(--font-body);
  font-size:     .9rem;
  color:         var(--color-text);
  background:    var(--color-bg);
  transition:    border-color .15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline:       none;
  border-color:  var(--color-accent);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-alert {
  padding:       10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size:     .875rem;
}

.form-alert.success { background: #d1fae5; color: #065f46; }
.form-alert.error   { background: #fee2e2; color: #991b1b; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background:    var(--color-hero-bg);
  color:         var(--color-hero-text);
  padding:       48px 0 28px;
}

.footer-inner {
  display:       grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap:           48px;
  margin-bottom: 36px;
}

.footer-brand p {
  color:         rgba(255,255,255,.9);
  font-size:     .875rem;
  margin-top:    12px;
  max-width:     280px;
}

.footer-tagline {
  color:         rgba(255,255,255,.9);
  font-size:     .85rem;
  margin-top:    8px;
}

.footer-nav h4, .footer-contact h4 {
  font-size:     .72rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:         rgba(255,255,255,.9);
  margin-bottom: 14px;
}

.footer-nav a {
  display:       block;
  color:         rgba(255,255,255,.9);
  font-size:     .875rem;
  margin-bottom: 8px;
  text-decoration: none;
  transition:    color .15s;
}

.footer-nav a:hover { color: #fff; opacity: 1; }

.footer-contact p {
  color:         rgba(255,255,255,.9);
  font-size:     .875rem;
  margin-bottom: 6px;
}

.footer-bottom {
  padding-top:   24px;
  border-top:    1px solid rgba(255,255,255,.1);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  font-size:     .78rem;
  color:         rgba(255,255,255,.9);
  flex-wrap:     wrap;
  gap:           10px;
}

.social-links { display: flex; gap: 10px; }

.social-link {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    rgba(255,255,255,.1);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         rgba(255,255,255,.9);
  font-size:     .85rem;
  transition:    background .15s;
  text-decoration: none;
}

.social-link:hover { background: rgba(255,255,255,.2); opacity: 1; }

/* ── WhatsApp button ─────────────────────────────────────────────────────── */
.wa-btn {
  position:      fixed;
  bottom:        88px;
  left:          24px;
  width:         52px;
  height:        52px;
  background:    #25D366;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  box-shadow:    0 4px 16px rgba(37,211,102,.4);
  z-index:       9990;
  transition:    transform .2s;
  text-decoration: none;
}

.wa-btn:hover { transform: scale(1.1); opacity: 1; }

/* Sits directly above the onboarding form's floating "Save progress" pill
   (bottom:22px/16px, left:22px/16px) when both are present on that page. */
@media (max-width: 560px) { .wa-btn { bottom: 74px; left: 16px; } }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  display:        none;
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,.92);
  z-index:        9999;
  align-items:    center;
  justify-content: center;
}

.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-md); }

.lightbox-close {
  position:    absolute;
  top:         16px;
  right:       20px;
  font-size:   2rem;
  color:       #fff;
  cursor:      pointer;
  line-height: 1;
  background:  none;
  border:      none;
}

/* ── Page hero ───────────────────────────────────────────────────────────── */
.page-hero {
  background:  var(--color-hero-bg);
  color:       var(--color-hero-text);
  padding:     60px 0;
}

.page-hero h1 { color: var(--color-hero-text); margin-bottom: 8px; }
.page-hero p  { color: rgba(255,255,255,.9); font-size: 1.05rem; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.mt-auto     { margin-top: auto; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-py: 56px; }

  .tpl-group     { display: none; }
  .tpl-sep       { display: none; }
  .tpl-dropdown  { display: block; flex: 1; min-width: 0; padding: 5px 8px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .78rem; background: var(--color-surface); color: var(--color-text); }
  .tpl-bar-cta   { margin-left: 0; }

  .nav-links     { display: none; position: fixed; top: 113px; left: 0; right: 0; background: var(--color-nav-bg); border-bottom: 1px solid var(--color-border); flex-direction: column; padding: 8px; box-shadow: var(--shadow-lg); z-index: 9999; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-hamburger { display: flex; }
  .nav-cta       { margin-left: 0; margin-top: 4px; text-align: center; }
  /* Company name sits next to the logo now on every screen size — keep a
     long business name from crowding the hamburger button on narrow phones. */
  .nav-logo-text { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }

  .about-grid    { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid  { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner  { grid-template-columns: 1fr; gap: 32px; }
  .grid-2        { grid-template-columns: 1fr; }
  .grid-3        { grid-template-columns: 1fr; }
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .about-stats   { flex-wrap: wrap; gap: 20px; }
}

@media (max-width: 480px) {
  .grid-4        { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; }
  .pricing-grid  { grid-template-columns: 1fr; }
}

/* ── Style theme layout overrides ────────────────────────────────────────── */

/* ── s01 Elegant ─── Serif, centred, airy ──────────────────────────────── */
html[data-style="s01"] .hero-inner          { max-width: 800px; margin: 0 auto; text-align: center; }
html[data-style="s01"] .hero-cta-group      { justify-content: center; }
html[data-style="s01"] .hero p              { margin-left: auto; margin-right: auto; }
html[data-style="s01"] .section-title       { margin-bottom: 64px; }
html[data-style="s01"] h2                   { letter-spacing: -.01em; }
html[data-style="s01"] .nav-link            { letter-spacing: .08em; font-size: .78rem; text-transform: uppercase; }
html[data-style="s01"] .card               { box-shadow: none; border-color: var(--color-border); }
html[data-style="s01"] .service-card       { border-top: 1px solid var(--color-border); border-top-color: var(--color-accent); }
html[data-style="s01"] .pricing-card.featured { box-shadow: 0 0 0 2px var(--color-accent); }

/* ── s02 Bold ─── Block, uppercase, zero-radius ────────────────────────── */
html[data-style="s02"] h1,
html[data-style="s02"] h2,
html[data-style="s02"] h3      { text-transform: uppercase; letter-spacing: .02em; }
html[data-style="s02"] .hero   { padding: 110px 0; }
html[data-style="s02"] .card   { border-radius: 0; border-left: 5px solid var(--color-accent); border-top: none; box-shadow: none; }
html[data-style="s02"] .service-card { border-radius: 0; border-left: 5px solid var(--color-accent); border-top: none; }
html[data-style="s02"] .pricing-card { border-radius: 0; }
html[data-style="s02"] .page-hero   { padding: 80px 0; }
html[data-style="s02"] .section-title h2::after { content: ""; display: block; width: 48px; height: 5px; background: var(--color-accent); margin: 14px auto 0; }
html[data-style="s02"] .section-title { text-align: left; }
html[data-style="s02"] .section-title h2::after { margin-left: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   s03 TECH — Everything monospace, terminal-style, zero decoration
   ══════════════════════════════════════════════════════════════════════════ */
html[data-style="s03"],
html[data-style="s03"] body             { font-family: 'Courier New', 'Consolas', monospace !important; font-size: .88rem; line-height: 1.55; letter-spacing: 0; }
html[data-style="s03"] h1,
html[data-style="s03"] h2,
html[data-style="s03"] h3,
html[data-style="s03"] h4,
html[data-style="s03"] .hero-h,
html[data-style="s03"] .sec-head h2,
html[data-style="s03"] .wh-final h2,
html[data-style="s03"] .founder-body h2 { font-family: 'Courier New', 'Consolas', monospace !important; font-weight: 700 !important; letter-spacing: -.01em; }
html[data-style="s03"] .hero-h          { font-size: clamp(1.8rem,4vw,3rem) !important; }
/* all borders sharp */
html[data-style="s03"] *                { border-radius: 0 !important; }
/* compact sections */
html[data-style="s03"] .section,
html[data-style="s03"] .wh-section      { padding: 48px 0; }
/* dashed dividers on every section */
html[data-style="s03"] .wh-section,
html[data-style="s03"] .section         { border-top: 1px dashed var(--color-border); }
/* cards: left accent stripe, no shadow */
html[data-style="s03"] .card,
html[data-style="s03"] .service-card,
html[data-style="s03"] .pricing-card,
html[data-style="s03"] .inc,
html[data-style="s03"] .pcard,
html[data-style="s03"] .founder-card    { border-left: 3px solid var(--color-accent) !important; box-shadow: none !important; background: transparent !important; }
/* // prefix on all section headings */
html[data-style="s03"] .sec-head h2::before,
html[data-style="s03"] .section-title h2::before { content: "// "; color: color-mix(in srgb, var(--color-accent) 30%, var(--color-text) 70%); }
/* > prefix on FAQ */
html[data-style="s03"] .wh-faq summary::before  { content: "> "; color: color-mix(in srgb, var(--color-accent) 30%, var(--color-text) 70%); font-family: 'Courier New', monospace; }
html[data-style="s03"] .wh-faq summary  { font-family: 'Courier New', monospace !important; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
/* step numbers plain */
html[data-style="s03"] .step .no        { font-family: 'Courier New', monospace !important; opacity: 1 !important; font-size: 2rem; font-weight: 700; }
html[data-style="s03"] .step .tline     { display: none; }
/* square buttons with [ ] look */
html[data-style="s03"] .btn             { font-family: 'Courier New', monospace !important; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem !important; }
/* nav: mono, tiny */
html[data-style="s03"] .nav-link        { font-family: 'Courier New', monospace !important; font-size: .76rem; letter-spacing: .05em; }
html[data-style="s03"] .eyebrow         { font-family: 'Courier New', monospace !important; }
html[data-style="s03"] .hero-badge      { font-family: 'Courier New', monospace !important; font-size: .7rem; }
/* icon boxes: no colour fill */
html[data-style="s03"] .inc .ic         { background: transparent !important; border: 1px dashed var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   s04 WARM — Giant type, pill everything, big shadows, playful rotation
   ══════════════════════════════════════════════════════════════════════════ */
html[data-style="s04"] body             { font-size: 1.1rem; line-height: 2; }
/* massive headings */
html[data-style="s04"] h1,
html[data-style="s04"] .hero-h          { font-size: clamp(3.4rem,8vw,7rem) !important; font-weight: 900 !important; line-height: .92 !important; letter-spacing: -.04em !important; }
html[data-style="s04"] h2,
html[data-style="s04"] .sec-head h2,
html[data-style="s04"] .wh-final h2     { font-size: clamp(2.2rem,5vw,4.2rem) !important; font-weight: 900 !important; line-height: .96 !important; letter-spacing: -.03em !important; }
html[data-style="s04"] h3               { font-size: 1.55rem; font-weight: 800; }
/* generous space */
html[data-style="s04"] .section,
html[data-style="s04"] .wh-section      { padding: 130px 0; }
/* pill everything */
html[data-style="s04"] .btn             { border-radius: 999px !important; padding: 14px 40px !important; font-weight: 800; font-size: 1rem !important; }
html[data-style="s04"] .nav-link.nav-cta,
html[data-style="s04"] a.nav-cta        { border-radius: 999px !important; }
/* rounded blob sections */
html[data-style="s04"] .wh-section-alt,
html[data-style="s04"] .section-alt     { border-radius: 56px !important; margin: 0 24px; }
/* chunky card shadows, big radius */
html[data-style="s04"] .card,
html[data-style="s04"] .service-card,
html[data-style="s04"] .pricing-card    { border-radius: 32px !important; border: none !important; box-shadow: 0 16px 56px rgba(0,0,0,.12) !important; }
html[data-style="s04"] .inc             { border-radius: 28px !important; border: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.09) !important; }
html[data-style="s04"] .pcard           { border-radius: 40px !important; box-shadow: 0 24px 64px rgba(0,0,0,.16) !important; }
html[data-style="s04"] .founder-card    { border-radius: 40px !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,.14) !important; }
/* tilted cards feel alive */
html[data-style="s04"] .inc:nth-child(even) { transform: rotate(-.6deg); }
html[data-style="s04"] .inc:nth-child(odd)  { transform: rotate(.4deg); }
html[data-style="s04"] .inc:hover           { transform: rotate(0) scale(1.02) !important; }
html[data-style="s04"] .step               { transform: rotate(-.3deg); }
/* hero round bottom */
html[data-style="s04"] .wh-hero            { border-radius: 0 0 72px 72px !important; overflow: hidden; }
html[data-style="s04"] .site-header        { border-radius: 0 0 28px 28px; }
/* large eyebrow */
html[data-style="s04"] .eyebrow            { font-size: .95rem !important; letter-spacing: .2em; }
html[data-style="s04"] .step .no           { font-size: 6rem !important; opacity: .15 !important; font-weight: 900 !important; }
/* coloured icon box */
html[data-style="s04"] .inc .ic            { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: var(--color-accent) !important; }
html[data-style="s04"] .inc .ic svg        { stroke: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   s05 DARK — Near-black editor theme: quiet, high-contrast, code-editor calm
   (replaces the old mid-grey "cinematic" Dark — this one is actually dark)
   ══════════════════════════════════════════════════════════════════════════ */
/* Root-level variable overrides — !important beats the colour theme's own
   (non-important) --color-surface-alt/--color-text/etc declarations
   regardless of source order, so ANY element using these variables directly
   (inline styles, admin pages, onboarding chrome — anything not covered by
   the selector-specific rules below) gets a correctly dark/light pairing
   automatically. Without this, elements outside the explicitly-audited
   selector list below were getting light-forced text (from the generic
   p/h1-h3 rules further down) against a background that stayed whatever
   light tone the colour theme's own --color-surface-alt still resolved to —
   e.g. the onboarding form's "before you start" tips box, which sets its
   background via inline style="background:var(--color-surface-alt)". */
html[data-style="s05"] {
  --color-bg:            #050505 !important;
  --color-surface:       #0A0A0A !important;
  --color-surface-alt:   #131313 !important;
  --color-border:        #262626 !important;
  --color-text:          #EDEDED !important;
  --color-text-muted:    #9A9A9A !important;
  --color-hero-bg:       #000000 !important;
  --color-hero-text:     #EDEDED !important;
  --color-nav-bg:        #000000 !important;
  --color-nav-text:      #EDEDED !important;
}
/* force dark regardless of colour theme */
html[data-style="s05"],
html[data-style="s05"] body             { background: #050505 !important; color: #EDEDED !important; }
html[data-style="s05"] .site-header     { background: #000000 !important; border-bottom-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .wh-section,
html[data-style="s05"] .section         { background: #050505 !important; }
html[data-style="s05"] .wh-section-alt,
html[data-style="s05"] .section-alt     { background: #0A0A0A !important; }
html[data-style="s05"] .wh-hero         { background: #000000 !important; overflow: visible !important; }
html[data-style="s05"] .wh-section-dark { background: #000000 !important; }
html[data-style="s05"] .wh-final        { background: #000000 !important; }
/* headings */
html[data-style="s05"] h1,
html[data-style="s05"] h2,
html[data-style="s05"] h3,
html[data-style="s05"] .hero-h,
html[data-style="s05"] .sec-head h2,
html[data-style="s05"] .wh-final h2,
html[data-style="s05"] .founder-body h2 { color: #F5F5F5 !important; font-weight: 600 !important; }
html[data-style="s05"] .founder-body .pull { color: #F5F5F5 !important; border-left-color: var(--color-accent) !important; }
html[data-style="s05"] .hero-h .em,
html[data-style="s05"] h2 .em           { color: color-mix(in srgb, var(--color-accent) 30%, #EDEDED 70%) !important; }
/* body text — reset ALL opacity-dimmed copy to full brightness */
html[data-style="s05"] p,
html[data-style="s05"] .sec-head p,
html[data-style="s05"] .hero-sub,
html[data-style="s05"] .hero-trust,
html[data-style="s05"] .hero-badge,
html[data-style="s05"] .step p,
html[data-style="s05"] .founder-body p,
html[data-style="s05"] .founder-card p,
html[data-style="s05"] .founder-card .role,
html[data-style="s05"] .qa .a,
html[data-style="s05"] .wh-faq .ans,
html[data-style="s05"] .wh-final p      { color: #D4D4D4 !important; opacity: 1 !important; }
/* hairline accent rule after section headings */
html[data-style="s05"] .sec-head h2::after { content: ""; display: block; width: 48px; height: 2px; background: var(--color-accent); margin-top: 16px; }
/* cards */
html[data-style="s05"] .card,
html[data-style="s05"] .service-card,
html[data-style="s05"] .pricing-card    { background: #0A0A0A !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; }
html[data-style="s05"] .inc             { background: #0A0A0A !important; border-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .pcard           { background: #0C0C0C !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,.5) !important; transform: none !important; }
html[data-style="s05"] .founder-card    { background: #0A0A0A !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; }
html[data-style="s05"] .pcard-bar       { background: #000000 !important; border-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .tpl-bar         { background: #000000 !important; border-bottom-color: rgba(255,255,255,.10) !important; }
/* nav */
html[data-style="s05"] .nav-link        { color: #C9C9C9 !important; }
html[data-style="s05"] .nav-link:hover,
html[data-style="s05"] .nav-link.active { color: #fff !important; }
html[data-style="s05"] .nav-logo-text   { color: #fff !important; }
/* hero — same layout as default, no overrides needed */
html[data-style="s05"] .hero-badge      { border-color: rgba(255,255,255,.16) !important; color: #C9C9C9 !important; }
html[data-style="s05"] .dotsep          { background: var(--color-accent) !important; }
/* buttons */
html[data-style="s05"] .btn-ghost       { border-color: rgba(255,255,255,.25) !important; color: #EDEDED !important; }
html[data-style="s05"] .btn-ghost:hover { border-color: #fff !important; color: #fff !important; }
/* eyebrow + step — fixed light colour, not the theme accent: several colour
   themes' accents (e.g. Olive & Grape #40531B, Twilight Blue #26408B,
   Burgundy & Blush #9F2042) are too dark to read against near-black, same
   issue as the old grey Dark style had. #EDEDED passes 4.5:1+ against every
   background this override block uses. */
html[data-style="s05"] .eyebrow,
html[data-style="s05"] [class*="eyebrow"] { color: #EDEDED !important; }
html[data-style="s05"] .step .no        { color: color-mix(in srgb, var(--color-accent) 30%, #EDEDED 70%) !important; opacity: 1 !important; }
html[data-style="s05"] .step h3,
html[data-style="s05"] .inc h3          { color: #fff !important; opacity: 1 !important; }
html[data-style="s05"] .step p,
html[data-style="s05"] .inc p           { color: #fff !important; opacity: 1 !important; font-weight: 400 !important; }
html[data-style="s05"] .step .tline     { background: linear-gradient(90deg, var(--color-accent), transparent) !important; opacity: .5; }
/* FAQ */
html[data-style="s05"] .wh-faq,
html[data-style="s05"] .wh-faq details  { border-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .wh-faq summary  { color: #EDEDED !important; }
html[data-style="s05"] .wh-faq .ans     { color: #C9C9C9 !important; }
html[data-style="s05"] .wh-faq summary .pm::before,
html[data-style="s05"] .wh-faq summary .pm::after { background: var(--color-accent) !important; }
/* base rules with no prior s05 override — without these, dark-accent colour
   themes (Olive & Grape, Twilight Blue, Burgundy & Blush) render links/stats/
   pricing/checkmarks as near-invisible dark text on this near-black bg. */
html[data-style="s05"] a                { color: color-mix(in srgb, var(--color-accent) 30%, #EDEDED 70%) !important; }
html[data-style="s05"] .stat-num,
html[data-style="s05"] .pricing-price,
html[data-style="s05"] .pricing-features li::before { color: color-mix(in srgb, var(--color-accent) 30%, #EDEDED 70%) !important; }
/* footer */
html[data-style="s05"] .site-footer     { background: #000000 !important; border-top-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .footer-bottom   { color: #9A9A9A !important; border-color: rgba(255,255,255,.08) !important; }
/* honest talk / qa */
html[data-style="s05"] .qa .q           { color: #fff !important; }
html[data-style="s05"] .qa .a           { color: #C9C9C9 !important; opacity: 1 !important; }
html[data-style="s05"] .pcard .price .cur,
html[data-style="s05"] .pcard .price .num { color: #fff !important; }
html[data-style="s05"] .pcard .setup b  { color: #fff !important; }
html[data-style="s05"] .pcard-tag       { background: rgba(255,255,255,.08) !important; color: #EDEDED !important; }
html[data-style="s05"] .pcard-list li   { color: #EDEDED !important; }
html[data-style="s05"] .pcard-list      { border-top-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .pcard-bar .url  { color: #E0E0E0 !important; }
html[data-style="s05"] .founder-card .founder-name { color: #fff !important; }
html[data-style="s05"] .founder-card .role { color: #EDEDED !important; }
html[data-style="s05"] .founder-card .sig  { color: color-mix(in srgb, var(--color-accent) 30%, #EDEDED 70%) !important; }
html[data-style="s05"] .compare,
html[data-style="s05"] .pcard-foot      { color: #E0E0E0 !important; }
html[data-style="s05"] .pcard .setup,
html[data-style="s05"] .pcard .price .per { color: #E0E0E0 !important; }
html[data-style="s05"] .pcard-bar i     { background: rgba(255,255,255,.25) !important; }
html[data-style="s05"] .contact-card   { background: #000000 !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; }
html[data-style="s05"] .contact-card h3 { color: #fff !important; }
html[data-style="s05"] .cf-input       { background: #0A0A0A !important; border-color: rgba(255,255,255,.12) !important; color: #EDEDED !important; }
html[data-style="s05"] .cf-input::placeholder { color: #9A9A9A !important; }
html[data-style="s05"] .contact-item strong { color: #fff !important; }
html[data-style="s05"] .contact-item span   { color: #C9C9C9 !important; opacity: 1 !important; }
html[data-style="s05"] .contact-item .ci { background: #0A0A0A !important; border-color: rgba(255,255,255,.10) !important; }
/* Colours & Styles showcase mockup — the mini pricing card's colours are
   hardcoded (#fff/#111/etc, not CSS vars) since it's meant to look like a
   real generated site's own card, not the picker's chrome. Without these,
   it stayed a plain white card no matter which style was selected. */
html[data-style="s05"] .ts-mini-pc        { background: #161616 !important; }
html[data-style="s05"] .ts-mini-pc-bar    { background: #0A0A0A !important; }
html[data-style="s05"] .ts-mini-pc-bar i  { background: rgba(255,255,255,.15) !important; }
html[data-style="s05"] .ts-mini-pc-url    { color: #9A9A9A !important; }
html[data-style="s05"] .ts-mini-price     { color: #EDEDED !important; }
html[data-style="s05"] .ts-mini-per,
html[data-style="s05"] .ts-mini-setup,
html[data-style="s05"] .ts-mini-foot      { color: #9A9A9A !important; }
html[data-style="s05"] .ts-mini-list      { border-top-color: rgba(255,255,255,.10) !important; }
html[data-style="s05"] .ts-mini-list li   { color: #C9C9C9 !important; }