/* ==========================================================================
   Daylight theme: the light twin of the Midnight theme. Same ideas from the
   brand reference (Font reference/ — Matrix Grotesque): tonal sweeps, pill
   labels, a notched hero corner, Bricolage Grotesque display type and the
   one-word "vocovision." wordmark, on light surfaces with deep navy blocks
   for contrast. Layout, content and animations are untouched.
   Screen only, picked by the device setting or the header switch (see the
   <head> script in build.py); printing still uses the plain light styles.
   ========================================================================== */

:root {
  --bg: #eef1fa;
  --line: #dde4f3;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;

  /* Soft tonal sweeps for light panels: white, glowing pale blue in one corner */
  --sweep-br: radial-gradient(120% 130% at 100% 100%, rgba(59, 132, 250, 0.13) 0%, rgba(59, 132, 250, 0) 60%);
  --sweep-bl: radial-gradient(120% 130% at 0% 100%, rgba(47, 206, 255, 0.12) 0%, rgba(47, 206, 255, 0) 60%);
  --g-paper: linear-gradient(160deg, #edf2ff 0%, #f6f8fe 55%, #ffffff 100%);
  /* Deep blocks, as in the reference: near-black navy into bright blue */
  --g-deep: linear-gradient(135deg, #02041a 0%, #0b1240 40%, #18246a 66%, #1e44c8 100%);
  --g-arc: radial-gradient(circle 560px at 100% 112%, rgba(83, 225, 255, 0) 64%, rgba(83, 225, 255, 0.5) 71%, rgba(59, 132, 250, 0.2) 78%, rgba(59, 132, 250, 0) 90%);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1, h2 {
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 14; /* small optical size keeps the ink traps visible */
}
h3, h4 { font-weight: 700; letter-spacing: -0.015em; }

/* Eyebrows become dark pills with a ringed dot, like the reference's pills on light pages */
.eyebrow {
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--navy-800);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}
.eyebrow::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan-300);
  box-shadow: 0 0 0 2.5px #fff;
}
.eyebrow::after { display: none; }
.panel--navy .eyebrow,
.on-dark .eyebrow {
  background: rgba(59, 132, 250, 0.16);
  border: 1px solid rgba(127, 176, 255, 0.25);
  color: #dbe6ff;
}

/* --------------------------------------------------------------------------
   Wordmark: "vocovision." in Unbounded (subset to its letters), coloured like
   the light logo lockup: blue gradient with a green "o" and full stop.
   14.83cqi makes it fill the column; the tagline sits at ~74% of it.
   -------------------------------------------------------------------------- */
.site-header { background: linear-gradient(var(--bg) 70%, rgba(238, 241, 250, 0)); }
.brand-word { display: none; }
.brand-word--text { display: block; }
.brand-text { container-type: inline-size; }
.brand-word--text {
  font-family: "Unbounded", var(--font-display);
  font-size: 14.83cqi;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.brand-word--text span,
.brand-tagline > span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bw-a { background-image: linear-gradient(180deg, #3b8cff 0%, #1e44c8 100%); }
.bw-g { background-image: linear-gradient(180deg, #8edb3f 0%, #1eba77 100%); }
.brand-tagline { --track: 0.2em; gap: 7px; font-size: max(7px, 3.96cqi); font-weight: 700; }
.brand-tagline > span { background-image: linear-gradient(90deg, #1e44c8 0%, #0a7fe0 50%, #1a9e55 100%); }
.brand-tagline::before { background: linear-gradient(90deg, rgba(30, 68, 200, 0), #3b84fa); }
.brand-tagline::after { background: linear-gradient(90deg, #1eba77, rgba(30, 186, 119, 0)); }

/* Footer (navy) keeps the dark lockup colours: light blue into cyan */
.footer-lockup { display: none; }
.footer-brandmark { display: flex; gap: 16px; margin: 0; }
.footer-brand .footer-brandmark .brand-mark { width: 68px; }
.footer-brandmark .brand-text { width: 236px; gap: 8px; }
.footer-brandmark .bw-a { background-image: linear-gradient(180deg, #a9c6ff 0%, #5ce0ff 100%); }
.footer-brandmark .bw-g { background-image: linear-gradient(180deg, #c4f27a 0%, #43db8d 100%); }
.footer-brandmark .brand-tagline > span { background-image: linear-gradient(90deg, #a9c6ff 0%, #7fdcff 50%, #8ee6b0 100%); }
.footer-brandmark .brand-tagline::before { background: linear-gradient(90deg, rgba(156, 194, 255, 0), #9cc2ff); }
.footer-brandmark .brand-tagline::after { background: linear-gradient(90deg, #8ee6b0, rgba(142, 230, 176, 0)); }

/* --------------------------------------------------------------------------
   Panels: soft sweeps on white, alternating corners; deep navy blocks
   -------------------------------------------------------------------------- */
.panel { background: var(--sweep-br), var(--surface); }
main .panel:not(.panel--navy):not(.panel--tight):nth-child(odd) { background: var(--sweep-br), var(--surface); }
main .panel:not(.panel--navy):not(.panel--tight):nth-child(even) { background: var(--sweep-bl), var(--surface); }
.panel--navy { background: var(--g-arc), var(--g-deep); }
.footer-panel { background: var(--g-deep); }

/* Home hero: deeper sweep, and a notch in the top-right corner holding pills */
.hero-overlay {
  background:
    radial-gradient(60% 85% at 0% 100%, rgba(67, 219, 141, 0.28) 0%, rgba(67, 219, 141, 0) 62%),
    linear-gradient(100deg, rgba(2, 4, 26, 0.94) 0%, rgba(11, 18, 64, 0.76) 38%, rgba(30, 68, 200, 0.36) 70%, rgba(47, 206, 255, 0.06) 100%);
}
.hero-notch {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 0 0 12px 12px;
  background: var(--bg);
  border-bottom-left-radius: 26px;
}
.hero-notch::before,
.hero-notch::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 0 100%, transparent 25.5px, var(--bg) 26px);
}
.hero-notch::before { top: 0; left: -26px; }
.hero-notch::after { right: 0; bottom: -26px; }
.hero-notch span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--navy-800);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-notch i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px #fff;
}
.hero--home .hero-stats { top: 84px; }

/* --------------------------------------------------------------------------
   Cards: pale paper on white; testimonials flip to deep navy for contrast
   -------------------------------------------------------------------------- */
.card,
.facts-col,
.intake,
.contact-card { background: var(--g-paper); }
.form-card { background: var(--sweep-br), #fff; }

.quote-card {
  --ink: #fff;
  --text: #c3cdee;
  --muted: #9aa6d3;
  --line: rgba(150, 175, 255, 0.18);
  background: var(--g-deep);
  border-color: transparent;
}
.quote-card blockquote,
.quote-by .who strong { color: #fff; }

@media (max-width: 1080px) {
  .hero--home .hero-stats { top: auto; }
}
@media (max-width: 640px) {
  .hero-notch span:first-child { display: none; }
  .footer-brand .footer-brandmark .brand-mark { width: 56px; }
  .footer-brandmark .brand-text { width: 200px; }
}