:root {
  --ink: #1a1a2e;
  --muted: #62627a;
  --brand: #3730a3;
  --brand-light: #6d5bd0;
  --brand-bg: #eef2ff;
  --bg: #fafafb;
  --border: #e5e5ef;
  --success: #0f9d58;
  --danger: #d33;
  --radius: 12px;
  --font-display: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Design tokens (premium-pass redesign) ----------
     Centralized so desktop/mobile scale together predictably instead of via one-off
     pixel values scattered per breakpoint — the pattern that caused the earlier "mobile
     sizing wasn't tuned" bugs (hero/logo relationship, section-heading mismatch). */
  --content-width: 1220px;
  --page-pad: clamp(16px, 4vw, 24px);
  --section-pad-y: clamp(64px, 9vw, 140px);

  /* Typography scale — clamp(min, preferred, max), min tuned to real mobile widths
     (375-430px), max tuned to desktop (1280px+). Preferred uses a vw-based ramp so the
     size scales smoothly through tablet widths instead of jumping at a breakpoint. */
  --fs-hero-home: clamp(2.25rem, 1.05rem + 4.6vw, 4rem);     /* 36px -> 64px (see .hero-home h1 max-width note — a 72px cap forced the 3rd intended line to wrap into 4) */
  --fs-hero-lg:   clamp(2.25rem, 1.3rem + 3.7vw, 4rem);      /* 36px -> 64px */
  --fs-section-h2: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);     /* 28px -> 48px */
  --fs-feature-h2: clamp(1.75rem, 0.85rem + 3.4vw, 3.125rem);/* 28px -> 50px */
  --fs-card-title: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem); /* 19px -> 22px */
  --fs-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);        /* 16px -> 18px */
  --fs-body-lg: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); /* 17px -> 20px */
  --fs-eyebrow: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem); /* 11px -> 13px */
  --fs-nav: clamp(0.875rem, 0.86rem + 0.1vw, 1rem);          /* 14px -> 16px */

  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20,16,50,0.04), 0 1px 1px rgba(20,16,50,0.03);
  --shadow-md: 0 8px 24px rgba(20,16,50,0.08);
  --shadow-lg: 0 24px 56px rgba(20,16,50,0.14);
  --glow-primary: 0 0 24px rgba(124,111,240,0.28);
  --glow-primary-strong: 0 0 40px rgba(124,111,240,0.5);
  --ease: 200ms cubic-bezier(.2,.7,.3,1);
}

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

:focus-visible {
  outline: 2.5px solid #9d8cf5; outline-offset: 2px; border-radius: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #0b0b1f;
  line-height: 1.55;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

h1, h2, h3, .logo, .btn { font-family: var(--font-display); }

.grad-text {
  background: linear-gradient(135deg, var(--brand) 0%, #7c6ff0 55%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--page-pad); }

/* ---------- Nav (dark glass — matches the hero, stays legible over every section) ----------
   Desktop: single row, logo left / nav right, vertically centered, generous height.
   Mobile (<=640px): logo on its own centered row, all three nav items centered in a
   row beneath it — a deliberate two-row layout, not a cramped single row that wraps. */
header.site-nav {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,26,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 10;
}
header.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 124px; padding-top: 16px; padding-bottom: 16px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.logo-icon { object-fit: contain; display: block; }
.nav-brand .logo-icon { width: 34px; height: 34px; flex-shrink: 0; }
header.site-nav .nav-brand { padding-left: 0; }
header.site-nav .nav-brand .logo-icon { width: 41px; height: auto; }
/* Full lockup asset (icon + "Quorum Digital" + tagline baked into one image, exported
   from Marco's actual source file) — used as-is, never re-cropped or resized in a way
   that distorts its aspect ratio (width:auto with a height cap keeps it proportional).
   Sized so the wordmark reads clearly smaller than the home hero headline (--fs-hero-home
   tops out at 72px; the wordmark here is ~35px at this 85px asset height) while still
   being the most prominent brand element in the header itself. */
.logo-lockup-img { height: 85px; width: auto; object-fit: contain; display: block; }
@media (max-width: 640px) {
  /* Mobile-only design tokens (never referenced outside this media query, so nothing
     leaks into desktop). Second refinement pass on the mobile header/nav — the previous
     pass (34-38px pills, 10px logo margin) was still reading as oversized, so these are
     tuned tighter against an explicit px-range spec. */
  :root {
    --mobile-logo-width: clamp(205px, 6.7rem + 32.7vw, 250px);
    --mobile-nav-height: 34px;
    --mobile-nav-font-size: 0.7rem;   /* 11.2px — within the 11-12px target for 390-430 */
    --mobile-nav-gap: 5px;
    --mobile-eyebrow-font-size: 0.5625rem; /* 9px */
    --mobile-eyebrow-padding-x: 8px;
    --mobile-hero-copy-size: clamp(15.5px, 0.6rem + 1.82vw, 17.5px);
  }
  header.site-nav .wrap {
    flex-direction: column; justify-content: center; gap: 9px;
    min-height: 0; padding: 14px 15px 13px;
  }
  header.site-nav .nav-brand { justify-content: center; }
  /* Logo on its own centered row. Previous pass used min(78vw,300px), which actually
     rendered 292-300px across 375-430px — well above the approved-mockup proportions.
     --mobile-logo-width is a clamp tuned to land ~205px at 320px up to ~250px at 430px
     (see the token above), aspect ratio preserved via width:auto. */
  .logo-lockup-img { width: var(--mobile-logo-width); max-width: 100%; height: auto; }
  /* All three nav items centered together in one row beneath the logo, sized to their
     own text (flex: 0 0 auto — no flex:1, no width:100% on the individual pills, no
     forced equal columns) so they stay compact rather than stretching to fill the row. */
  header.site-nav nav.links { width: 100%; justify-content: center; gap: var(--mobile-nav-gap); }
  header.site-nav .nav-links-primary { gap: var(--mobile-nav-gap); }
  nav.links a:not(.btn) {
    font-size: var(--mobile-nav-font-size); font-weight: 580; color: white; letter-spacing: .01em;
    height: var(--mobile-nav-height); padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; white-space: nowrap;
    transition: background var(--ease), border-color var(--ease);
  }
  nav.links a:not(.btn)::after { display: none; }
  nav.links a:not(.btn):hover { background: rgba(255,255,255,0.14); }
  /* Client Login is a flex item inside nav.links (display:flex); flex:0 0 auto plus
     white-space:nowrap keeps it from shrinking below its own text width and wrapping
     the label onto two lines at narrow viewports. */
  header.site-nav .btn.small {
    height: var(--mobile-nav-height); padding: 0 13px; font-size: var(--mobile-nav-font-size);
    white-space: nowrap; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Client Login legibility fix, round 2: at the smaller mobile pill size the previous
     600-weight / 0.02em / 10px-blur treatment was still soft enough that "Client Login"
     could misread. Selector (.btn.small.ghost, 4 classes) stays deliberately more
     specific than the unconditional `header.site-nav .btn.ghost` (3 classes) so these
     mobile-only overrides win regardless of source order — same cascade pattern noted
     elsewhere in this file. Lighter weight, near-zero tracking, no text-shadow, and the
     box-shadow glow (never a text-shadow) trimmed further so it sits outside the pill
     rather than anywhere near the glyphs. */
  header.site-nav .btn.small.ghost {
    font-weight: 580; letter-spacing: .01em; text-shadow: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 6px rgba(124,111,240,0.16);
  }
  /* At the narrowest supported width (320px), trim padding/gap/font a notch further
     rather than shrinking text below the 10.5px legibility floor from the spec. */
  @media (max-width: 340px) {
    :root { --mobile-nav-font-size: 0.6875rem; /* 11px, still within the 10.5-11px 320px target */ --mobile-nav-gap: 4px; }
    nav.links a:not(.btn), header.site-nav .btn.small { padding: 0 10px; }
  }
}
.logo-lockup { display: flex; flex-direction: column; line-height: 1.15; }
.logo { font-weight: 700; font-size: 1.25rem; color: white; letter-spacing: -0.02em; }
.logo span {
  background: linear-gradient(135deg, #b7a6ff 0%, #7dd3fc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-tagline {
  font-size: 0.58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-top: 2px;
}
.card .logo-tagline, .admin-sidebar .logo-tagline { color: var(--muted); }
.admin-sidebar .logo-tagline { color: rgba(255,255,255,0.4); }
nav.links { display: flex; gap: 32px; align-items: center; }
/* Services/Contact are grouped in their own wrapper (kept from an earlier pass) so
   mobile can lay all three nav items out identically via a single gap value — see the
   640px breakpoint above. */
.nav-links-primary { display: flex; align-items: center; gap: 32px; }
nav.links a { color: rgba(255,255,255,0.82); font-weight: 500; font-size: var(--fs-nav); position: relative; padding-bottom: 2px; transition: color var(--ease); }
nav.links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: #b7a6ff; transform: scaleX(0); transform-origin: right; transition: transform var(--ease);
}
nav.links a:hover { color: white; text-decoration: none; }
nav.links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
/* Client Login: a restrained border + glow (not the stronger, more decorative glow
   used on primary CTA buttons) so it reads as a deliberate secondary action in the
   header rather than competing with the hero's primary button. */
header.site-nav .btn.ghost {
  color: white; border-color: rgba(255,255,255,0.4); font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), var(--glow-primary);
  transition: background var(--ease), box-shadow var(--ease);
}
header.site-nav .btn.ghost:hover {
  background: rgba(255,255,255,0.13);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), var(--glow-primary-strong);
}
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: var(--brand); color: white; font-weight: 600; font-size: 0.92rem;
  letter-spacing: .01em;
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  /* A softer version of .btn-glow's effect applied to every button by default, so
     buttons feel distinctive site-wide rather than only the hero/closing CTAs that
     carry the stronger .btn-glow class on top of this. */
  box-shadow: 0 2px 10px rgba(55,48,163,0.2), 0 0 18px rgba(124,111,240,0.16);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(55,48,163,0.3), 0 0 26px rgba(124,111,240,0.3); text-decoration: none; }
.btn.secondary { background: white; color: var(--brand); border: 1.5px solid var(--brand); box-shadow: none; }
.btn.secondary:hover { background: var(--brand-bg); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); box-shadow: none; }
.btn.ghost:hover { background: #f5f5fa; }
.btn.small { padding: 6px 14px; font-size: 0.85rem; }
.btn.danger { background: var(--danger); box-shadow: none; }

/* ---------- Hero (dark, glowing — sets the "techy" tone for the whole site) ----------
   .hero is the shared base (services/contact use it as-is via --fs-hero-lg); .hero-home
   modifier bumps the headline up to --fs-hero-home so the homepage hero reads as the
   most dramatic of the three, per the approved mockups. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0b0b1f 0%, #16163a 100%);
  padding: var(--section-pad-y) 0 clamp(48px, 7vw, 88px);
  color: rgba(255,255,255,0.92);
}
/* Mobile-only top padding, scoped to .hero specifically (not the shared --section-pad-y
   token, which regular .section blocks also use) — --section-pad-y's mobile floor
   (64px) left an oversized empty band between the header and the eyebrow. Tuned to land
   ~38px at 320px up to ~48px at 430px, consistent across all three pages. */
@media (max-width: 640px) {
  .hero { padding-top: clamp(36px, 0.56rem + 9.1vw, 52px); }
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 520px at 12% 8%, rgba(124,111,240,0.4), transparent 62%),
    radial-gradient(560px 500px at 92% -8%, rgba(79,140,255,0.28), transparent 62%),
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.4px) 0 0/26px 26px;
}
.hero .wrap { position: relative; z-index: 1; }
/* Eyebrow label — small, uppercase, visually secondary; kept well clear of the base
   .badge used for the service-category pills on services.html. */
.hero .badge {
  background: rgba(255,255,255,0.1); color: #d3ccff; border: 1px solid rgba(255,255,255,0.16);
  font-size: var(--fs-eyebrow); padding: 5px 12px; letter-spacing: .08em;
}
/* Mobile eyebrow refinement: at the --fs-eyebrow clamp's mobile end (~11px) the pill was
   still reading as heavy enough to compete with the (unchanged) headline below it. Sized
   down further specifically for ≤640px, kept tight around its own text (inline-block
   already avoids stretching, width:fit-content here is belt-and-suspenders) and left-
   aligned with the hero copy. Desktop --fs-eyebrow / padding above are untouched. */
@media (max-width: 640px) {
  /* Second refinement pass — the first pass's 10px/9px pill was still competing with the
     (unchanged) hero headline. Tightened further, kept strictly to its own text width
     (max-content, not fit-content — same effect here since there's no flex/grid stretch
     context, but max-content is the more explicit statement of intent), and the
     background/border dimmed further so it reads as a small label, not a banner. */
  .hero .badge {
    font-size: var(--mobile-eyebrow-font-size); /* 9px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: .085em;
    padding: 4px var(--mobile-eyebrow-padding-x);
    display: inline-flex; align-items: center;
    width: max-content; max-width: 100%; white-space: nowrap;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
  }
  /* Home's eyebrow ("Local Business Tech. Built Different.") is the longest of the
     three and the one most likely to wrap awkwardly at the narrowest supported width —
     trimmed a notch further there rather than letting it wrap mid-phrase. */
  @media (max-width: 340px) {
    .hero .badge { font-size: 0.5rem; /* 8px */ letter-spacing: .07em; padding: 4px 7px; }
  }
}
.hero h1 {
  font-size: var(--fs-hero-lg); line-height: 1.08; margin: 0 0 22px; letter-spacing: -0.02em;
  /* Wide enough that the Services hero's longest intentional line ("Services built for
     how", ~789px at the 64px max font-size) doesn't wrap into an orphaned 4th line;
     Contact's lines are much shorter so this just gives it a bit more breathing room. */
  max-width: 850px; color: white; font-weight: 800;
}
/* max-width sized so all three intentional <br>-wrapped lines fit without an unwanted
   4th orphan-word line (measured against the actual longest line, "not enterprise
   budgets.", at the token's max font-size). */
.hero-home h1 { font-size: var(--fs-hero-home); max-width: 900px; }
.hero .grad-text {
  background: linear-gradient(135deg, #b7a6ff 0%, #7dd3fc 55%, #f0abfc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead {
  font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(255,255,255,0.72);
  max-width: 46ch; margin-bottom: 34px;
}
/* Home-only mobile paragraph refinement — scoped to .hero-home (index.html's hero
   specifically) so Services/Contact's supporting paragraph, which share the same base
   `.hero p.lead` rule, are left exactly as they were; this task only asked for the Home
   mobile paragraph to come down in size. Color/max-width inherited unchanged. */
@media (max-width: 640px) {
  .hero-home p.lead {
    font-size: var(--mobile-hero-copy-size); line-height: 1.57; margin-bottom: 27px;
  }
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .cta-row .btn { height: 52px; display: inline-flex; align-items: center; padding: 0 26px; }
.hero .btn.secondary { background: rgba(255,255,255,0.06); color: white; border: 1.5px solid rgba(255,255,255,0.35); }
.hero .btn.secondary:hover { background: rgba(255,255,255,0.14); }

/* Location/email row — shared by the home hero and the contact page. Real icons (not
   emoji), a subtle divider on wide screens, and a stacked layout at narrow widths so
   the email address never has to crowd onto one line with the location. */
.contact-row { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.contact-row .contact-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; color: rgba(255,255,255,0.68); }
.contact-row .contact-item a { color: inherit; }
.contact-row .contact-item a:hover { color: white; }
.contact-row .contact-item svg { flex-shrink: 0; opacity: 0.8; }
.contact-row .contact-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.22); }
@media (max-width: 480px) {
  .contact-row { flex-direction: column; align-items: flex-start; gap: 11px; }
  .contact-row .contact-divider { display: none; }
}

/* Home hero location line — replaces the old two-item contact-row (location + email) on
   the homepage only; Contact keeps its own .contact-row with both items untouched. A
   single understated trust signal, deliberately smaller/dimmer than the CTA buttons
   above it so it doesn't read as a third call to action. */
.hero-location {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 24px; font-size: 14px; color: rgba(255,255,255,0.55);
}
.hero-location svg { flex-shrink: 0; opacity: 0.75; }
@media (max-width: 640px) {
  .hero-location { font-size: 12.5px; margin-top: 20px; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero .badge, .hero h1, .hero p.lead, .hero .cta-row { animation: fadeInUp .6s ease both; }
  .hero h1 { animation-delay: .05s; }
  .hero p.lead { animation-delay: .12s; }
  .hero .cta-row { animation-delay: .18s; }
}

/* Divider before "How it works" — a subtle horizontal rule, not another full section. */
.section-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 32px 0 0; }

/* Contact page "how it works" panel — fills what was empty space below the email line
   in the left column, and sets expectations for what happens after someone submits
   the form (reach out -> live mockup -> launch). No backend needed, just content. */
.how-it-works { margin-top: 28px; display: flex; flex-direction: column; gap: 26px; max-width: 460px; }
.how-it-works-eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin: 0 0 2px;
}
.how-it-works .step { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.how-it-works .step-num {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #7c6ff0, #4f8cff);
  color: white; font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(124,111,240,0.5);
}
/* Subtle connector line between steps — positioned to span exactly the gap between
   circles so it never runs through the heading/description text next to it. */
.how-it-works .step:not(:last-child) .step-num::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 2px; height: 26px; background: linear-gradient(180deg, rgba(124,111,240,0.5), rgba(124,111,240,0));
}
.how-it-works h4 { margin: 0 0 4px; font-size: 1rem; color: white; font-family: var(--font-display); }
.how-it-works .step p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.6); }

.section { padding: var(--section-pad-y) 0; background: linear-gradient(180deg, #fbfbfc 0%, #f5f4fb 100%); }
.section h2 { font-size: var(--fs-section-h2); margin-bottom: 14px; letter-spacing: -0.015em; font-weight: 800; line-height: 1.15; }
.section p.sub { color: var(--muted); font-size: var(--fs-body); line-height: 1.6; max-width: 60ch; margin-bottom: 48px; }

/* Dark "glow" sections — alternate with the light .section for contrast and depth */
.section.alt {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0e0e26 0%, #16163a 100%);
  color: rgba(255,255,255,0.9);
}
.section.alt::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 420px at 15% 0%, rgba(124,111,240,0.32), transparent 60%),
    radial-gradient(480px 420px at 92% 100%, rgba(79,140,255,0.22), transparent 60%);
}
.section.alt .wrap { position: relative; z-index: 1; }
.section.alt h2 { color: white; }
.section.alt p.sub, .section.alt p { color: rgba(255,255,255,0.68); }
.section.alt strong { color: white; }
.section.alt a:not(.btn) { color: #b9b0ff; }
.section.alt .badge { background: rgba(255,255,255,0.1); color: #d3ccff; border: 1px solid rgba(255,255,255,0.16); }
.section.alt .card:not(.mockup-shell) {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: white;
}
.section.alt .card.glass .quote-text { color: rgba(255,255,255,0.85); margin: 0; font-style: italic; }
.section.alt .card.glass .quote-attrib { color: white; margin: 14px 0 0; font-weight: 600; }
.section.alt .mockup-shell { box-shadow: 0 24px 50px rgba(0,0,0,0.45); }
.section.alt .mockup-shell:hover { box-shadow: 0 0 46px rgba(124,111,240,0.4), 0 24px 50px rgba(0,0,0,0.5); }
.section.alt .mockup-caption { color: rgba(255,255,255,0.55); }
.btn.btn-glow { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 40px rgba(124,111,240,0.55), 0 8px 20px rgba(0,0,0,0.35); }
.btn.btn-glow:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 56px rgba(124,111,240,0.7), 0 10px 26px rgba(0,0,0,0.4); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.3rem; }
  /* Section headings (e.g. services.html's "A real website, without the agency price
     tag.") were staying at the desktop 1.9rem on mobile while the hero heading above
     shrank, so one visibly dominated the other. Brought down close to the hero size so
     they read as the same visual tier. */
  .section h2 { font-size: 1.45rem; }
}

.card {
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  /* Reset text to dark by default so a white card dropped into a dark section (.hero,
     .section.alt) doesn't inherit near-white ambient text and go invisible on the white
     background — this bit the contact form's <label> elements, which had no color of
     their own and picked up .hero's white text. .section.alt .card already overrides
     this back to white at higher specificity for the glass-card treatment, so that
     usage is unaffected. */
  color: var(--ink);
}
/* The site logo defaults to white (for the dark nav/sidebar); reset it to dark when it
   appears inside a white card (e.g. the admin login panel), or it disappears. */
.card .logo { color: var(--ink); }
.card .logo span { background: none; -webkit-text-fill-color: unset; color: var(--brand); }
a.card { display: block; color: inherit; text-decoration: none; height: 100%; }
/* Restrained hover: a small lift + shadow increase + border tint — no glossy overlays. */
a.card:hover, .card.hoverable:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d3cef0; text-decoration: none;
}
.card .icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--brand-bg);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 16px;
}
.card h3 { margin: 0 0 10px; font-size: var(--fs-card-title); }
.card p { color: var(--muted); margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.grid-3 .card { display: flex; flex-direction: column; }
.quote-text { margin: 0; font-style: italic; color: var(--muted); font-size: var(--fs-body-lg); line-height: 1.6; }
.quote-attrib { margin: 16px 0 0; font-weight: 600; color: var(--ink); }
.includes-line { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin-top: 22px; }
.includes-line strong { color: var(--ink); }
/* Sequence pills (01 WEBSITES / 02 AI RESERVATIONS / 03 GOOGLE REVIEW CARDS) — reuses
   the base .badge but with monospaced-feeling number spacing for a refined label look. */
.badge .seq-num { opacity: 0.7; margin-right: 6px; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--brand-bg); color: var(--brand); font-size: 0.8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* Numbered service-label pills specifically (the "01 WEBSITES" style badges), scoped via
   :has(.seq-num) so the hero eyebrow badge (which has no .seq-num child) and any other
   plain .badge usage are left completely untouched. Bumps weight/contrast ~10-15% per
   feedback that these read a little too subtle, while staying in the same brand-purple
   family — no blue swap, no new colors. */
.badge:has(.seq-num) {
  font-weight: 800;
  color: #2f2a90;
  border: 1px solid rgba(55,48,163,0.18);
}
.badge:has(.seq-num) .seq-num { opacity: 0.85; }
.section.alt .badge:has(.seq-num) {
  background: rgba(255,255,255,0.15);
  color: #e2ddff;
  border-color: rgba(255,255,255,0.24);
}

footer.site-footer {
  padding: 40px 0; color: rgba(255,255,255,0.55); font-size: 0.9rem;
  background: #0b0b1f; border-top: 1px solid rgba(255,255,255,0.08);
}
footer.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
footer.site-footer a { color: rgba(255,255,255,0.75); }
footer.site-footer a:hover { color: white; }
footer.site-footer .footer-brand { display: flex; align-items: center; gap: 10px; }
footer.site-footer .logo-icon { width: 24px; height: 24px; }
/* Mobile: keep the same logo + copyright text and links (no re-wording, no new
   graphics) but stack them centered with clear separation, since a single row got
   cramped once the copyright text and both links had to share it under ~480px. */
@media (max-width: 480px) {
  footer.site-footer { padding: 30px 0; }
  footer.site-footer .wrap {
    flex-direction: column; justify-content: center; align-items: center;
    text-align: center; gap: 16px;
  }
  footer.site-footer .footer-brand { flex-direction: column; gap: 10px; }
}

/* ---------- Forms ---------- */
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 7px; }
/* Border was the barely-visible --border gray (#e5e5ef) on a plain white card — nearly
   invisible, so it wasn't obvious where to click. Darker border + a faint gray fill
   makes each field read clearly as a distinct clickable box. Padding tuned so
   inputs/selects land at a consistent ~48-50px height and match across the form. */
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid #c6c6d6; border-radius: var(--radius-sm);
  font-size: 0.95rem; font-family: inherit; background: #f8f8fb; color: var(--ink);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--brand-light); background: white;
  box-shadow: 0 0 0 3px rgba(109,91,208,0.15);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.alert { padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 16px; }
.alert.error { background: #fdecec; color: #a12; border: 1px solid #f3c6c6; }
.alert.success { background: #eafaf1; color: #0f7a44; border: 1px solid #bfe8cf; }

/* ---------- Admin ---------- */
.admin-shell { display: flex; min-height: 100vh; }
/* Sidebar widened (220px -> 296px) specifically to give the logo enough horizontal
   room to be sized as the dominant element on the page — see .admin-sidebar-brand
   below. */
.admin-sidebar {
  width: 296px; background: var(--ink); color: white; padding: 26px 22px; flex-shrink: 0;
}
.admin-sidebar .nav-brand { margin-bottom: 36px; }
.admin-sidebar .logo { color: white; display: block; }
.admin-sidebar .logo-icon { width: 28px; height: 28px; }
/* Sidebar + login now use the same single full-lockup asset as the main site nav
   (icon+wordmark baked into one image) instead of icon-image + separate HTML "Quorum"
   text — that combo was rendering as a redundant double-Q ("Q" icon stacked above
   "QuorumDigital" text, since .admin-sidebar a's display:block was overriding
   .nav-brand's flex row and stacking the two). One image, no duplication.
   Sized so the wordmark (~42% of this asset's height) clearly beats every other text
   element on the admin pages, including the .admin-header h1 page titles below (which
   were also brought down a notch — see .admin-header h1). */
.admin-sidebar-brand .logo-lockup-img { height: 58px; width: auto; }
/* Sized bigger than the "Admin Login" heading below it (that heading was also toned
   down to a smaller, muted label) so the brand reads as the dominant element on the
   login card, matching the same size relationship used on the public pages. */
.admin-login-logo { height: 56px; width: auto; }
/* The lockup image's "Quorum" text is white (designed for the dark nav bar), which
   went nearly invisible sitting directly on this card's white background. Give it its
   own dark backdrop so the wordmark stays legible in a white-card context. */
.admin-login-logo-wrap {
  display: inline-flex; background: var(--ink); padding: 14px 18px; border-radius: 10px;
}
.admin-sidebar a { display: block; color: #cfcfe6; padding: 10px 12px; border-radius: 8px; margin-bottom: 4px; font-size: 0.92rem; font-weight: 500; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.1); color: white; text-decoration: none; }
.admin-main { flex: 1; padding: 36px 40px; max-width: 1100px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.admin-header h1 { margin: 0; font-size: 1.3rem; }

table.data-table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
table.data-table th { text-align: left; background: #f5f5fa; padding: 12px 16px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
table.data-table td { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 0.92rem; }
table.data-table tr:hover td { background: #fafaff; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20,20,35,0.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: white; border-radius: var(--radius); padding: 28px; width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
.modal h2 { margin-top: 0; }
.status-pill { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.status-pill.lead { background: #fff3e0; color: #b26a00; }
.status-pill.active { background: #eafaf1; color: #0f7a44; }
.status-pill.past { background: #eee; color: #666; }
.status-pill.draft { background: #eee; color: #666; }
.status-pill.sent { background: #e8f0fe; color: #1a56c4; }
.status-pill.paid { background: #eafaf1; color: #0f7a44; }
.status-pill.void { background: #fdecec; color: #a12; }

/* ---------- Demo generator (admin-only tool) ---------- */
.demo-shell { display: grid; grid-template-columns: 360px 1fr; gap: 0; min-height: 560px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 900px) { .demo-shell { grid-template-columns: 1fr; } }
.demo-form-panel { padding: 32px; background: white; border-right: 1px solid var(--border); }
.demo-preview-panel { background: #f0f0f5; padding: 24px; display: flex; flex-direction: column; }
.preview-frame-wrap { flex: 1; background: white; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); min-height: 300px; }
.preview-frame-wrap iframe { width: 100%; height: 100%; border: none; }
.empty-state { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); text-align: center; flex-direction: column; gap: 12px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--brand-bg); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Service visual mockups — pure CSS, no external images, so they render
   identically everywhere and never depend on a network fetch.
   ========================================================================== */

/* Enlarged ~12% from the original 18px padding + a slightly bigger radius, so these
   CSS-drawn product mockups carry more visual weight in the wider service-showcase
   column without touching the mockup markup/graphics themselves. */
.mockup-shell {
  background: white; border: 1px solid var(--border); border-radius: 18px;
  color: var(--ink);
  box-shadow: var(--shadow-md);
  padding: 22px; position: relative;
  transition: transform var(--ease), box-shadow var(--ease);
}
.mockup-shell:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.mockup-caption { text-align: center; font-size: 0.8rem; color: var(--muted); font-style: italic; margin-top: 14px; }

/* ---- Website mockup: little browser window with a wireframed page ---- */
.mockup-browser .browser-chrome {
  display: flex; align-items: center; gap: 6px; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mockup-browser .dot { width: 9px; height: 9px; border-radius: 50%; }
.mockup-browser .dot.red { background: #ff5f57; }
.mockup-browser .dot.yellow { background: #febc2e; }
.mockup-browser .dot.green { background: #28c840; }
.mockup-browser .url-pill {
  margin-left: 10px; flex: 1; height: 20px; border-radius: 999px; background: #f2f2f7;
  color: var(--muted); font-size: 0.7rem; display: flex; align-items: center; padding: 0 10px;
  font-family: ui-monospace, monospace;
}
.mockup-browser .page-hero {
  border-radius: 8px; padding: 10px 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  display: flex; align-items: center; gap: 10px;
}
.mockup-browser.theme-pizza .page-hero { background: linear-gradient(135deg, #c1401f 0%, #f2994a 100%); }
.mockup-browser .hero-emoji { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.mockup-browser .page-hero .bar-stack { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mockup-browser .bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.9); }
.mockup-browser .bar.w70 { width: 70%; }
.mockup-browser .bar.w45 { width: 45%; }
.mockup-browser .bar.dim { background: rgba(255,255,255,0.55); height: 6px; width: 55%; margin-top: 2px; }
.mockup-browser .btn-pill {
  width: fit-content; padding: 0 14px; height: 24px; border-radius: 999px; background: white;
  display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--brand);
  flex-shrink: 0;
}
.mockup-browser.theme-pizza .btn-pill { color: #c1401f; }
.mockup-browser .content-row { display: flex; gap: 10px; }
.mockup-browser .content-card {
  flex: 1; min-height: 50px; border-radius: 8px; background: #f7f2ea;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.68rem; font-weight: 600; color: var(--muted); text-align: center; padding: 6px 4px;
}
.mockup-browser .content-card .emoji { font-size: 1.1rem; }

/* ---- Website mockup: full online-ordering menu (tabs, items+prices, add-to-cart, cart summary) ---- */
.mockup-browser .menu-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.mockup-browser .menu-tab {
  font-size: 0.66rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: #f2f2f7; color: var(--muted);
}
.mockup-browser .menu-tab.active { background: var(--brand); color: white; }
.mockup-browser.theme-pizza .menu-tab.active { background: #c1401f; }
.mockup-browser .menu-list { display: flex; flex-direction: column; }
.mockup-browser .menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.mockup-browser .menu-item:last-child { border-bottom: none; }
.mockup-browser .menu-item .item-info { min-width: 0; }
.mockup-browser .menu-item .item-name { display: block; font-weight: 700; font-size: 0.78rem; color: var(--ink); }
.mockup-browser .menu-item .item-desc { display: block; font-size: 0.64rem; color: var(--muted); margin-top: 1px; }
.mockup-browser .menu-item .item-action { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mockup-browser .menu-item .item-price { font-weight: 700; font-size: 0.78rem; color: var(--ink); }
.mockup-browser .add-btn {
  width: 21px; height: 21px; border-radius: 50%; background: var(--brand); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.mockup-browser.theme-pizza .add-btn { background: #c1401f; }
.mockup-browser .cart-pill {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
  background: #14142e; color: white; padding: 9px 14px; border-radius: 10px;
  font-size: 0.74rem; font-weight: 700;
}
.mockup-browser.theme-pizza .cart-pill { background: linear-gradient(135deg, #c1401f, #f2994a); }

/* ---- Review card mockup: recreates the real NFC tap card (white, blue ribbon, gold stars, Google G) ---- */
/* ---- Shared "media stage" for every service-showcase graphic on the Services page.
   Gives all six visuals a consistent minimum presence and keeps them centered
   (both axes) in their column, with the caption held close via `gap` rather than
   drifting to the bottom of an oversized stage. .mockup-card-wrap already served
   this role for five of the six sections — refined in place rather than adding a
   parallel class, and also applied to the Websites section's wrapper for consistency. */
.mockup-card-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: clamp(300px, 26vw, 400px);
  gap: 18px; padding: 10px 0;
}
@media (max-width: 800px) {
  .mockup-card-wrap { min-height: auto; margin-top: 32px; gap: 14px; }
}

/* ---- Per-service graphic scaling, so every Services-page visual carries comparable
   weight and actually fills the wider graphic column below (see .wrap.service-showcase
   and the .service-showcase column-ratio change further down). Every mockup — including
   the AI Reservations chat shell, previously left to shrink-wrap its content — now gets
   an explicit width (same width:100%+max-width pattern .review-card already used) so
   none of them float small inside the enlarged column; height follows proportionally
   since their internal rows (photo tiles, lead rows, status rows, chat bubbles) reflow
   to fill the wider card. */
.mockup-shell.mockup-browser { width: 100%; max-width: 600px; }
.mockup-shell.mockup-chat:not(.mockup-care) { width: 100%; max-width: 560px; }
.mockup-shell.mockup-gbp { width: 100%; max-width: 560px; }
.mockup-shell.mockup-leads { width: 100%; max-width: 560px; }
.mockup-shell.mockup-care { width: 100%; max-width: 520px; }
@media (max-width: 800px) {
  .mockup-shell.mockup-gbp,
  .mockup-shell.mockup-leads,
  .mockup-shell.mockup-care { max-width: 460px; }
}
.review-card {
  width: 100%; max-width: 420px; aspect-ratio: 1 / 1.02; border-radius: 20px;
  background: white; border: 1px solid var(--border);
  color: var(--ink); padding: 22px 18px 20px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 10px; text-align: center;
  box-shadow: 0 16px 32px rgba(26,26,46,0.14); position: relative; overflow: hidden;
}
.review-card::before {
  content: ''; position: absolute; left: -25%; right: -25%; top: 40%; height: 42%;
  background: linear-gradient(100deg, #1a56c4 0%, #3b7ee8 45%, #8fb8f5 100%);
  transform: rotate(-7deg); opacity: 0.16; z-index: 0;
}
.review-card > * { position: relative; z-index: 1; }
.review-card .card-stars { color: #f5b301; font-size: 1.15rem; letter-spacing: 3px; }
.review-card .card-headline {
  font-weight: 800; font-size: 0.92rem; line-height: 1.35; color: #14224a;
  text-transform: uppercase; letter-spacing: 0.01em; font-family: var(--font-display);
}
.review-card .google-g {
  width: 42px; height: 42px; border-radius: 50%; margin-top: 2px;
  background: conic-gradient(from 45deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.review-card .google-g span {
  width: 28px; height: 28px; border-radius: 50%; background: white;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; color: #4285F4;
}
.review-card .tap-icon-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.review-card .tap-hand { font-size: 1.7rem; line-height: 1; }
.review-card .nfc-arcs { display: inline-flex; gap: 2px; align-items: flex-end; }
.review-card .arc { width: 3px; border-radius: 2px; background: var(--ink); opacity: 0.55; }
.review-card .arc.a1 { height: 6px; } .review-card .arc.a2 { height: 10px; } .review-card .arc.a3 { height: 14px; }
.review-card .tap-caption { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.stars-pop { display: flex; align-items: center; gap: 8px; }
.stars-pop .stars { color: #f5b301; font-size: 1.1rem; letter-spacing: 2px; }
.stars-pop .badge-new {
  background: var(--brand-bg); color: var(--brand); font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}

/* ---- AI reservation mockup: chat bubbles ---- */
.mockup-chat .chat-header {
  display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.mockup-chat .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-light));
  display: flex; align-items: center; justify-content: center; color: white; font-size: 0.85rem; font-weight: 700;
}
.mockup-chat .chat-title { font-weight: 700; font-size: 0.9rem; }
.mockup-chat .online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: inline-block; margin-right: 4px; }
.mockup-chat .online-label { font-size: 0.72rem; color: var(--muted); }
.mockup-chat .bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 0.83rem; line-height: 1.4; margin-bottom: 10px; }
.mockup-chat .bubble.them { background: #f2f2f7; color: var(--ink); border-bottom-left-radius: 4px; }
.mockup-chat .bubble.me { background: var(--brand); color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.mockup-chat .confirm-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.75rem;
  background: #eafaf1; color: #0f7a44; padding: 4px 10px; border-radius: 999px; font-weight: 600;
}

/* ---- Smart Lead Capture mockup: reuses .mockup-chat's header (avatar/title/online-dot),
   adds a list of incoming-lead rows with a status tag instead of chat bubbles ---- */
.mockup-leads .lead-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.mockup-leads .lead-item:last-child { border-bottom: none; }
.mockup-leads .lead-info { min-width: 0; }
.mockup-leads .lead-name { display: block; font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.mockup-leads .lead-detail { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.mockup-leads .lead-tag {
  font-size: 0.66rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; flex-shrink: 0;
}
.mockup-leads .lead-tag.new { background: #eef2ff; color: #4338ca; }
.mockup-leads .lead-tag.quoted { background: #eafaf1; color: #0f7a44; }

/* ---- Google Business Profile mockup: recreates a Maps/Business listing card ---- */
.mockup-gbp .gbp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mockup-gbp .gbp-name { font-weight: 800; font-size: 1rem; color: var(--ink); }
.mockup-gbp .gbp-category { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.mockup-gbp .gbp-stars-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.76rem; color: var(--muted);
}
.mockup-gbp .gbp-stars-row .stars { color: #f5b301; letter-spacing: 1px; }
.mockup-gbp .gbp-status {
  display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #0f7a44; font-weight: 700; margin-bottom: 14px;
}
.mockup-gbp .gbp-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #0f7a44; display: inline-block; }
.mockup-gbp .gbp-photos { display: flex; gap: 6px; margin-bottom: 14px; }
.mockup-gbp .gbp-photo { flex: 1; aspect-ratio: 1; border-radius: 8px; }
.mockup-gbp .gbp-photo.p1 { background: linear-gradient(135deg, #c1401f, #f2994a); }
.mockup-gbp .gbp-photo.p2 { background: linear-gradient(135deg, var(--brand), var(--brand-light)); }
.mockup-gbp .gbp-photo.p3 { background: linear-gradient(135deg, #14224a, #3b5bab); }
.mockup-gbp .gbp-photo.p4 { background: linear-gradient(135deg, #0f7a44, #34d399); }
.mockup-gbp .gbp-actions { display: flex; gap: 8px; }
.mockup-gbp .gbp-btn {
  flex: 1; text-align: center; padding: 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
}
.mockup-gbp .gbp-btn.primary { background: var(--brand); color: white; }
.mockup-gbp .gbp-btn.secondary { background: #f2f2f7; color: var(--ink); }

/* ---- Website Care Plan mockup: reuses .mockup-chat's header, adds a site-health checklist ---- */
.mockup-care .care-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 0.8rem;
}
.mockup-care .care-row:last-child { border-bottom: none; }
.mockup-care .care-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.mockup-care .care-value { font-weight: 700; color: var(--ink); }
.mockup-care .care-check {
  width: 16px; height: 16px; border-radius: 50%; background: #0f7a44; color: white; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700;
}

/* Two-column service showcase layout */
/* ~46/54 split (text/visual) with a generous horizontal gap — enough separation that
   the two columns read as distinct zones rather than crowding each other. */
.service-showcase { display: grid; grid-template-columns: 0.7fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; }
@media (max-width: 800px) { .service-showcase { grid-template-columns: 1fr; gap: 40px; } }
/* Services feature sections use a wider stage (~1280px) than the site's standard
   1220px content width, and a ~41%/59% text/graphic split instead of the old ~46%/54%
   — the graphic column now has real room, which is what lets the enlarged mockups
   above and .review-card actually fill it instead of floating in empty space. Scoped
   to .wrap.service-showcase only (two classes = higher specificity than .wrap alone),
   so the header, footer, hero, and every other .wrap on the site are untouched. */
.wrap.service-showcase { max-width: 1280px; }

/* ---- "Why local businesses choose Quorum" trust section — a plain, fast-scanning
   benefit list inserted directly above the final CTA on both Home and Services pages.
   Deliberately minimal per the brief: no screenshots, no gradients, no heavy graphics —
   reuses the existing --brand/--brand-bg palette and .section rhythm/spacing so it reads
   as part of the same design system rather than a new visual language. */
.trust-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px; max-width: 780px; margin: 12px auto 0; text-align: left;
}
.trust-item {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink);
}
.trust-check {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-bg); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
}
/* The 5th item spans both columns on its lone row and centers itself, instead of
   sitting flush-left against an empty cell. */
.trust-item:last-child { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 680px) {
  .trust-grid { grid-template-columns: 1fr; max-width: 440px; gap: 16px; }
  .trust-item:last-child { grid-column: auto; justify-self: stretch; }
}

/* ---- Compact preview thumbnails (homepage "What we build" cards) ---- */
/* ~15% bigger than the original 108px, plus more margin below to separate the graphic
   from the card title — both requested to give these preview graphics more presence. */
.mini-visual { height: 124px; border-radius: 10px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--border); position: relative; }

.mini-visual.mini-browser { background: white; display: flex; flex-direction: column; }
.mini-visual.mini-browser .mini-chrome { display: flex; gap: 4px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--border); }
.mini-visual.mini-browser .mini-dot { width: 6px; height: 6px; border-radius: 50%; }
.mini-visual.mini-browser .mini-dot.red { background: #ff5f57; }
.mini-visual.mini-browser .mini-dot.yellow { background: #febc2e; }
.mini-visual.mini-browser .mini-dot.green { background: #28c840; }
.mini-visual.mini-browser .mini-body { flex: 1; background: linear-gradient(135deg, var(--brand), #6d5bd0); margin: 8px; border-radius: 6px; padding: 10px; }
.mini-visual.mini-browser.theme-pizza .mini-body { background: linear-gradient(135deg, #c1401f, #f2994a); }
.mini-visual.mini-browser .mini-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.9); margin-bottom: 5px; }
.mini-visual.mini-browser .mini-bar.w60 { width: 60%; }
.mini-visual.mini-browser .mini-bar.w40 { width: 40%; background: rgba(255,255,255,0.6); }
.mini-visual.mini-browser .mini-btn {
  width: fit-content; padding: 0 8px; height: 15px; border-radius: 999px; background: white; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: var(--brand);
}
.mini-visual.mini-browser.theme-pizza .mini-btn { color: #c1401f; }
.mini-visual.mini-browser.theme-care .mini-body { background: linear-gradient(135deg, #0f7a44, #34d399); }
.mini-visual.mini-browser.theme-care .mini-btn { color: #0f7a44; }

.mini-visual.mini-review {
  background: linear-gradient(160deg, #eef4ff 0%, #ffffff 65%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px; text-align: center;
}
.mini-visual.mini-review .mini-stars { color: #f5b301; font-size: 0.95rem; letter-spacing: 2px; }
.mini-visual.mini-review .mini-label { color: #14224a; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.mini-visual.mini-review .mini-google-g {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 3px;
  background: conic-gradient(from 45deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
  display: flex; align-items: center; justify-content: center;
}
.mini-visual.mini-review .mini-google-g span {
  width: 14px; height: 14px; border-radius: 50%; background: white;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: #4285F4;
}

.mini-visual.mini-chat { background: #f7f7fb; padding: 12px; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.mini-visual.mini-chat .mini-bubble { max-width: 78%; padding: 6px 11px; border-radius: 11px; font-size: 0.72rem; line-height: 1.35; }
.mini-visual.mini-chat .mini-bubble.them { background: white; border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 3px; }
.mini-visual.mini-chat .mini-bubble.me { background: var(--brand); color: white; align-self: flex-end; border-bottom-right-radius: 3px; }