/* ============================================================================
   Wonderboy Creative — home page.
   Loaded only on the front page (see the is_front_page() gate in functions.php).

   Shared design-system components — .wb-container, .wb-btn*, .wb-eyebrow,
   .wb-reveal, the nav and the footer — are NOT redefined here. They live in
   assets/css/wonderboy.css and are used as-is, so there is one definition of
   each component. Design tokens come from tokens.css; the Google Fonts import
   lives there too.

   Only the home page's own sections are below: hero, logo marquee, services,
   work, blog, process, testimonial, CTA and the quote modal.
   ============================================================================ */

/* One deliberate override: the design spaces eyebrows off their heading more
   than the shared component does. Scoped here so other pages are unaffected. */
.wb-eyebrow { margin-bottom: 16px; }

/* Wonderboy Creative — tokens + site styles (from Claude Design export) */
/* ============================================================================
   WONDERBOY CREATIVE — Colors & Type
   Foundational design tokens for the Wonderboy Creative brand.
   Superhero-inspired: deep midnight navy, heroic royal blue, electric sky.
   "Wonderboy is here to save the day."
   ============================================================================ */

/* ---- Webfonts (loaded from Google Fonts CDN) ----------------------------- *
 * SUBSTITUTION NOTE: No original font files were provided. The WONDERBOY
 * wordmark itself is a custom/lettered logotype — always reproduce it with the
 * provided SVG logo lockups in /assets, never by typesetting the word.
 * For headings we use ARCHIVO (heavy, squared grotesque) as the closest working
 * match to the wordmark's bold, beveled-corner geometry. Body is HANKEN
 * GROTESK; technical/code accents use JETBRAINS MONO. Swap freely if the brand
 * later supplies licensed fonts.
 * -------------------------------------------------------------------------- */

/* The .wbc-* semantic type scale that shipped in the Claude Design export sat
   here: eleven classes, .wbc-display through .wbc-code. Nothing on the site
   ever used one - a crawl of all 53 pages on the sitemap found none of them in
   any class attribute, and none appears in any PHP or JS in the theme. The
   site sets its type per component instead. Removed rather than left as a
   second, unused way to size text.
   ============================================================================ */

/* ============================================================================
   Wonderboy Creative — Website UI Kit styles
   ============================================================================ */

/* ---------- Buttons ---------- */

.wb-btn.is-press { transform: scale(.96); }

.wb-btn-secondary { background: var(--midnight-900); color: #fff; }
.wb-btn-secondary:hover { background: var(--midnight-800); transform: translateY(-2px); }

/* ---------- Eyebrow / Badge ---------- */

.wb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.wb-badge-brand { background: var(--hero-500); color: #fff; }
.wb-badge-ghost { background: var(--hero-50); color: var(--hero-700); }

/* ---------- Reveal ---------- */

/* ---------- Section primitives ---------- */
.wb-section { padding: 96px 0; }
.wb-section.wb-subtle { background: var(--gray-50); }
.wb-section.wb-dark { background: var(--midnight-900); }
.wb-section-title {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl);
  line-height: 1.05; letter-spacing: -.02em; color: var(--midnight-900); margin: 0 0 14px;
}
.wb-section-title.wb-on-dark, .wb-on-dark { color: #fff; }
.wb-section-lead { font-size: var(--text-lg); line-height: 1.6; color: var(--fg-secondary); max-width: 560px; margin: 0 0 44px; }

/* ============================================================================
   NAV
   ============================================================================ */

/* At top (over dark hero): show white logo. Scrolled (white bg): show navy logo. */

/* ============================================================================
   HERO
   ============================================================================ */
.wb-hero {
  position: relative; overflow: hidden; background: var(--midnight-900);
  padding: 150px 0 90px;
}
.wb-hero-photo { position: absolute; inset: 0; z-index: 0; }
.wb-hero-photo image-slot { width: 100%; height: 100%; display: block; opacity: .30; filter: grayscale(.15); }
.wb-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--midnight-900) 30%, rgba(22,33,58,.78) 58%, rgba(22,33,58,.45) 100%),
    linear-gradient(0deg, var(--midnight-900), transparent 40%);
}
.wb-hero-glow {
  position: absolute; top: -10%; right: -5%; width: 720px; height: 720px; z-index: 2;
  background: radial-gradient(circle, rgba(56,189,248,.30), transparent 62%);
  pointer-events: none;
}
.wb-hero-bolt {
  position: absolute; right: 4%; bottom: -40px; width: 360px; opacity: .05;
  pointer-events: none; transform: rotate(-8deg);
}
.wb-hero-inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.wb-hero-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(40px, 6vw, 72px); line-height: .98; letter-spacing: -.02em;
  color: #fff; margin: 0 0 22px;
}
.wb-hero-title .wb-accent { color: var(--electric-400); }
.wb-hero-lead { font-size: var(--text-lg); line-height: 1.6; color: #aeb9cf; max-width: 520px; margin: 0 0 32px; }
.wb-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.wb-hero-trust { display: flex; gap: 26px; flex-wrap: wrap; }
.wb-hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #8a96b0; }
.wb-hero-trust span svg { color: var(--electric-400); }
.wb-hero-art { position: relative; display: flex; align-items: center; justify-content: center; }
.wb-hero-art img { height: 420px; position: relative; z-index: 2; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); animation: wb-float 5s ease-in-out infinite; }
.wb-hero-art-ring {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,107,246,.35), transparent 65%);
}
@keyframes wb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .wb-hero-art img { animation: none; } }

/* ---------- Logo strip ---------- */
.wb-logostrip { background: var(--white); border-bottom: 1px solid var(--gray-100); padding: 60px 0; overflow: hidden; }
.wb-logostrip { display: flex; flex-direction: column; align-items: center; gap: 38px; }
.wb-logostrip-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.wb-marquee { width: 100%; display: flex; flex-direction: column; gap: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wb-marquee-track { display: flex; align-items: center; gap: 120px; width: max-content; animation: wb-marq 150s linear infinite; }
.wb-marquee-track.is-reverse { animation-direction: reverse; }
.wb-marquee:hover .wb-marquee-track { animation-play-state: paused; }
.wb-marquee-logo { flex: 0 0 auto; height: 96px; display: flex; align-items: center; justify-content: center; }
.wb-marquee-logo img { height: 92px; width: auto; max-width: 320px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter var(--dur-base), opacity var(--dur-base); }
.wb-marquee-logo:hover img { filter: none; opacity: 1; }
@keyframes wb-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wb-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } }

/* ============================================================================
   BUILT TO SAVE THE DAY — cinematic illustrated section
   ============================================================================ */
.wb-saveday {
  position: relative; overflow: hidden; padding: 96px 0;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(99,117,255,.16), transparent 55%),
    linear-gradient(180deg, var(--midnight-950), var(--midnight-900) 60%, var(--midnight-950));
}
.wb-saveday-glow { position: absolute; left: 50%; top: 8%; width: 60px; height: 60px; }
.wb-saveday .wb-container { position: relative; z-index: 2; }

/* top zone */
.wb-saveday-top { display: grid; grid-template-columns: 1fr 1.18fr; gap: 44px; align-items: center; margin-bottom: 54px; }
.wb-eyebrow-bolt { height: 15px; vertical-align: -2px; margin-right: 7px; }
.wb-saveday-intro .wb-eyebrow { display: flex; align-items: center; }
.wb-saveday-title {
  position: relative; z-index: 1; font-family: var(--font-display); font-weight: 900; font-size: clamp(46px, 6vw, 82px);
  line-height: .92; letter-spacing: -.03em; color: #fff; margin: 6px 0 22px; text-transform: none;
}
.wb-saveday-dot { color: var(--hero-400); }
.wb-saveday-accent {
  position: relative; color: var(--hero-400); white-space: nowrap;
  background-image: linear-gradient(transparent 62%, rgba(99,117,255,.28) 62%, rgba(99,117,255,.28) 92%, transparent 92%);
}
.wb-saveday-lead { font-size: var(--text-lg); line-height: 1.6; color: #aeb9cf; max-width: 420px; margin: 26px 0 0; }

/* hero street banner + feature bar */
.wb-saveday-hero { position: relative; }
.wb-saveday-street { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); }
.wb-feature-bar {
  position: absolute; right: 16px; bottom: -26px; display: flex; gap: 6px;
  background: rgba(18,26,43,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 14px 8px;
  box-shadow: var(--shadow-lg);
}
.wb-feature { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 18px; text-align: center; position: relative; }
.wb-feature + .wb-feature::before { content: ''; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.14); }
.wb-feature svg { color: var(--hero-400); }
.wb-feature span { font-family: var(--font-display); font-weight: 700; font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; color: #fff; display: flex; flex-direction: column; }
.wb-feature span strong { font-weight: 700; }

/* card grid — flexible overlay components: art is a background layer,
   ALL text is live editable HTML on top */
.wb-saveday-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wb-sd-card {
  position: relative; overflow: hidden; min-height: 300px; border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--midnight-800);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.wb-sd-card:hover { transform: translateY(-4px); border-color: rgba(99,117,255,.55); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.wb-sd-media {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.wb-sd-card:hover .wb-sd-media { transform: scale(1.05); }
.wb-sd-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,26,43,.15) 0%, rgba(18,26,43,.55) 42%, rgba(18,26,43,.94) 100%);
}
.wb-sd-content { position: relative; z-index: 2; padding: 22px 24px; }
.wb-sd-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 9px;
  background: var(--hero-500); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 13px;
  border-radius: 7px; margin-bottom: 14px; box-shadow: var(--shadow-brand);
}
.wb-sd-content h3 { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.0; color: #fff; margin: 0 0 9px; letter-spacing: -.01em; }
.wb-sd-content p { font-size: 14px; line-height: 1.5; color: #c5cce0; margin: 0 0 16px; }
.wb-sd-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.wb-sd-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 12px; color: #eaeefb; background: rgba(99,117,255,.18); border: 1px solid rgba(99,117,255,.32); padding: 5px 10px; border-radius: var(--radius-pill); }
.wb-sd-tag svg { color: var(--hero-300); flex-shrink: 0; }

/* ============================================================================
   WORK
   ============================================================================ */
.wb-work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.wb-work-head .wb-section-title { margin: 0; }
.wb-work-tabs { display: flex; gap: 6px; background: var(--gray-100); padding: 5px; border-radius: var(--radius-pill); }
.wb-tab {
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px; border: none; cursor: pointer;
  padding: 8px 16px; border-radius: var(--radius-pill); background: transparent; color: var(--fg-secondary);
  transition: background var(--dur-base), color var(--dur-base);
}
.wb-tab.is-active { background: #fff; color: var(--hero-600); box-shadow: var(--shadow-sm); }
.wb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.wb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wb-service-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
  color: var(--hero-600); transition: gap var(--dur-base);
}
.wb-service-link:hover { gap: 10px; }
.wb-work-thumb image-slot { width: 100%; height: 100%; display: block; }
.wb-work-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wb-work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.wb-work-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--gray-100); display: flex; align-items: center; justify-content: center; }
.wb-work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wb-work-card:hover .wb-work-thumb img { transform: scale(1.04); }
.wb-work-thumb.is-dark { background: linear-gradient(135deg, var(--midnight-800), var(--midnight-950)); }
.wb-work-thumb.is-accent { background: linear-gradient(135deg, var(--hero-500), var(--hero-700)); }
.wb-work-thumb.is-accent2 { background: linear-gradient(135deg, var(--electric-500), var(--hero-600)); }
.wb-work-logo { width: auto !important; height: 64px !important; object-fit: contain !important; }
.wb-work-mark { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 30px; color: rgba(255,255,255,.92); letter-spacing: -.01em; }
.wb-work-live {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(14,22,38,.7); backdrop-filter: blur(6px); color: #fff; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-pill);
}
.wb-work-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(31,180,122,.6); animation: wb-pulse 2s infinite; }
@keyframes wb-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,180,122,.5);} 70% { box-shadow: 0 0 0 7px rgba(31,180,122,0);} 100% { box-shadow: 0 0 0 0 rgba(31,180,122,0);} }
.wb-work-body { padding: 22px 24px 24px; }
.wb-work-meta { margin-bottom: 10px; }
.wb-work-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--midnight-900); margin: 0 0 8px; }
.wb-work-body p { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); margin: 0 0 16px; }

/* Blog cards reuse the work-card shell */
.wb-blog-link { display: block; color: inherit; text-decoration: none; }
.wb-blog-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(28,37,57,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.wb-blog-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--fg-muted);
}
.wb-blog-meta svg { color: var(--hero-500); }
.wb-blog-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-300); }
.wb-blog-card h3 { line-height: 1.2; text-wrap: balance; }
.wb-blog-card .wb-service-link { margin-top: 2px; }

/* ============================================================================
   THE GAME PLAN — taped posters on a workbench
   ============================================================================ */
.wb-gameplan {
  position: relative; overflow: hidden; padding: 84px 0 70px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(99,117,255,.12), transparent 55%),
    linear-gradient(180deg, var(--midnight-950), #0b1220);
}
.wb-gameplan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.wb-gameplan .wb-container { position: relative; z-index: 2; }
.wb-gameplan-head { text-align: center; position: relative; margin-bottom: 44px; }
.wb-gameplan-head .wb-eyebrow { display: inline-flex; gap: 10px; justify-content: center; color: var(--hero-400); }
.wb-scribble { color: var(--hero-500); font-weight: 700; }
.wb-gameplan-title {
  position: relative; display: inline-block; max-width: 820px; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(38px, 6vw, 76px); line-height: .95; letter-spacing: -.02em; text-transform: uppercase;
  color: #fff; margin: 8px 0 18px;
}
.wb-gameplan-underline { position: absolute; left: 4%; right: 4%; bottom: -6px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--hero-600), var(--hero-400)); transform: rotate(-.4deg); }
.wb-gameplan-lead { font-family: var(--font-mono); font-size: 15px; letter-spacing: .02em; color: #aeb9cf; margin: 0; }
.wb-gameplan-sticky {
  position: absolute; top: -34px; right: -6px; width: 132px; min-height: 116px; padding: 16px 14px;
  background: linear-gradient(180deg, #6f83ff, #5466e6); color: #0f1730; border-radius: 3px;
  transform: rotate(3deg); box-shadow: 0 12px 26px rgba(0,0,0,.4);
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: .04em;
  display: flex; flex-direction: column; gap: 8px;
}
.wb-gameplan-sticky::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 56px; height: 20px; background: rgba(255,255,255,.28); border: 1px dashed rgba(255,255,255,.35); }
.wb-gameplan-sticky img { height: 16px; opacity: .8; }

/* posters row */
.wb-posters { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.wb-poster {
  position: relative;
  background-color: #e9e0cf;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.5), transparent 40%),
    radial-gradient(circle at 82% 88%, rgba(140,120,90,.14), transparent 45%),
    linear-gradient(150deg, #efe7d6, #e3d9c4);
  border-radius: 3px; padding: 30px 22px 22px; box-shadow: 0 16px 34px rgba(0,0,0,.5);
  transform: rotate(0deg); transition: transform var(--dur-base) var(--ease-out);
}
.wb-poster:nth-child(1) { transform: rotate(-.8deg); }
.wb-poster:nth-child(3) { transform: rotate(.7deg); }
.wb-poster:nth-child(5) { transform: rotate(-.5deg); }
.wb-poster:nth-child(7) { transform: rotate(.9deg); }
.wb-poster:hover { transform: rotate(0deg) translateY(-5px); z-index: 3; box-shadow: 0 24px 48px rgba(0,0,0,.6); }
.wb-poster-tape { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 90px; height: 26px; background: rgba(120,135,170,.4); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(1px); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.wb-poster-num {
  width: 40px; height: 40px; border-radius: 50%; background: #11182b; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center; margin: 0 0 8px;
}
.wb-poster-title { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: .9; text-transform: uppercase; letter-spacing: -.02em; color: #14191f; margin: 0 0 6px; }
.wb-poster-sub { font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--hero-700); border-bottom: 1px solid rgba(20,25,31,.25); padding-bottom: 12px; margin-bottom: 12px; }
.wb-poster-sketch { width: 100%; aspect-ratio: 320/224; background-size: cover; background-position: center; mix-blend-mode: multiply; margin-bottom: 14px; }
.wb-poster-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wb-poster-list li { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #1c222c; }
.wb-poster-list svg { color: #1c222c; flex-shrink: 0; }
.wb-poster-note { font-family: var(--font-mono); font-weight: 700; font-size: 13px; line-height: 1.4; text-transform: uppercase; letter-spacing: .01em; color: var(--hero-700); }
.wb-poster-arrow { display: flex; align-items: center; justify-content: center; color: var(--hero-400); align-self: center; }

/* foot strip */
.wb-gameplan-foot {
  margin-top: 38px; background: #11182b; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md);
  padding: 18px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  transform: rotate(-.5deg); box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.wb-gameplan-foot-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.wb-gameplan-foot-label img { height: 18px; }
.wb-gameplan-aud { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wb-gameplan-aud span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #aeb9cf; }
.wb-gameplan-aud svg { color: var(--hero-400); }
.wb-made { color: #7e8aa3 !important; }

/* ============================================================================
   TESTIMONIAL
   ============================================================================ */
.wb-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.wb-quote-mark { color: var(--hero-300); display: flex; justify-content: center; margin-bottom: 12px; }
.wb-quote-text {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.25; letter-spacing: -.01em; color: var(--midnight-900); margin: 0 0 28px; text-wrap: balance;
}
.wb-quote-by { display: inline-flex; align-items: center; gap: 12px; }
.wb-quote-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--hero-100); color: var(--hero-600); display: flex; align-items: center; justify-content: center; }
.wb-quote-by strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--midnight-900); }
.wb-quote-by span { font-size: 13px; color: var(--fg-muted); }

/* ============================================================================
   CTA
   ============================================================================ */
.wb-cta { position: relative; overflow: hidden; background: var(--midnight-950); padding: 76px 0; text-align: center; }
.wb-cta-art { position: absolute; top: 0; bottom: 0; width: 32%; z-index: 0; background-size: cover; background-position: center; opacity: .5; }
.wb-cta-art-left { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.wb-cta-art-right { right: 0; opacity: .62; -webkit-mask-image: linear-gradient(270deg, #000 34%, transparent); mask-image: linear-gradient(270deg, #000 34%, transparent); }
.wb-cta-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(80% 120% at 50% 50%, rgba(18,26,43,.55), rgba(18,26,43,.92) 78%); }
.wb-cta-glow { position: absolute; left: 50%; top: -30%; width: 760px; height: 760px; z-index: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(99,117,255,.32), transparent 60%); pointer-events: none; }
.wb-cta-inner { position: relative; z-index: 2; }
.wb-cta-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--hero-400); margin-bottom: 14px; }
.wb-cta-eyebrow img { height: 15px; }
.wb-cta-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; color: #fff; margin: 0 0 16px; }
.wb-cta-accent { color: var(--hero-400); }
.wb-cta-lead { font-size: var(--text-lg); line-height: 1.6; color: #aeb9cf; max-width: 560px; margin: 0 auto 32px; }
.wb-cta-actions { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.wb-cta-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: #fff; }
.wb-cta-phone:hover { color: var(--electric-400); }
.wb-cta-phone svg { color: var(--hero-400); }

/* ============================================================================
   FOOTER
   ============================================================================ */

/* ============================================================================
   MODAL
   ============================================================================ */
.wb-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(14,22,38,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: wb-fade .2s var(--ease-out); }
@keyframes wb-fade { from { opacity: 0; } to { opacity: 1; } }
.wb-modal { position: relative; background: #fff; border-radius: var(--radius-xl); width: 100%; max-width: 540px; padding: 38px; box-shadow: var(--shadow-lg); animation: wb-pop .28s var(--ease-out); max-height: 92vh; overflow: auto; }
@keyframes wb-pop { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.wb-modal-close { position: absolute; top: 18px; right: 18px; background: var(--gray-100); border: none; border-radius: var(--radius-md); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-secondary); transition: background var(--dur-base); }
.wb-modal-close:hover { background: var(--gray-200); }
.wb-modal-head { margin-bottom: 24px; }
.wb-modal-bolt { height: 40px; margin-bottom: 14px; }
.wb-modal-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--midnight-900); margin: 0 0 8px; }
.wb-modal-head p { font-size: 15px; line-height: 1.55; color: var(--fg-secondary); margin: 0; }
/* The lead form and its success state moved to wonderboy.css. They are shared
   chrome: the quote modal on this page and the contact page both draw them, and
   two copies of a form's styling is exactly the duplication that has to stay
   out of this project. .wb-modal-* below is still home-only - nothing else has
   a modal yet. */

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 920px) {
  .wb-hero-inner { grid-template-columns: 1fr; }
  .wb-hero-art { order: -1; }
  .wb-hero-art img { height: 280px; }
  .wb-grid-3, .wb-grid-2, .wb-grid-4 { grid-template-columns: 1fr 1fr; }
  .wb-powers { grid-template-columns: 1fr 1fr; }
  .wb-powers > .wb-power--feature { grid-column: 1 / -1; grid-row: auto; }
  .wb-posters { grid-template-columns: 1fr 1fr; gap: 22px; }
  .wb-poster-arrow { display: none; }
  .wb-gameplan-sticky { display: none; }
  .wb-saveday-top { grid-template-columns: 1fr; gap: 30px; }
  .wb-feature-bar { position: static; margin-top: 16px; right: auto; bottom: auto; justify-content: space-between; }
  .wb-saveday-grid { grid-template-columns: 1fr 1fr; }
  
  
  
  
  
  
  
  
  
  
}
@media (max-width: 600px) {
  .wb-section { padding: 64px 0; }
  .wb-grid-3, .wb-grid-2, .wb-grid-4 { grid-template-columns: 1fr; }
  .wb-powers, .wb-timeline { grid-template-columns: 1fr; }
  .wb-posters { grid-template-columns: 1fr; }
  .wb-saveday-grid { grid-template-columns: 1fr; }
  .wb-sd-content { max-width: 68%; }
  .wb-work-head { flex-direction: column; align-items: stretch; }
  
  .wb-modal { padding: 28px 22px; }
}

/* The 44px thumb floor, for the controls this page owns. See the same block in
   wonderboy.css for why. The filter pills were 34px, the card title links 22px
   and "View project" 23px, all of them fine under a pointer. */
@media (max-width: 860px) {
  .wb-work-tabs { flex-wrap: wrap; }
  .wb-tab { min-height: 44px; padding: 8px 18px; }
  .wb-service-link { min-height: 44px; }
  .wb-cta-phone { min-height: 44px; }
  /* The title is a heading; the link inside it takes the heading's own box so
     the whole line is tappable rather than just the glyphs. */
  .wb-work-title-link { display: block; padding: 6px 0; }

  /* The logo strip is 92px marks separated by 120px of nothing. On a laptop
     that is a generous rhythm; on a 390px screen it is one and a half logos
     on an empty white band, both of them cut by the frame. The proportions
     scale with the viewport rather than the band being left half empty. */
  .wb-marquee-track { gap: 56px; }
  .wb-marquee-logo { height: 58px; }
  .wb-marquee-logo img { height: 54px; max-width: 150px; }
  .wb-logostrip { padding: 40px 0; gap: 26px; }
}

/* The power cards hold their copy off the photograph behind it by capping the
   text at 68% of the card. Under about 480px that cap is doing the opposite of
   what it was drawn for - it leaves "Look Professional" breaking across three
   lines in a 230px trough with the rest of the card empty. The photograph is
   already dimmed behind a scrim at this size, so the text takes the width. */
@media (max-width: 480px) {
  .wb-sd-content { max-width: none; }
}

/* ============================================================================
   WordPress adaptation layer
   Small additions that replace behaviour the React prototype did in JS/inline
   styles. Nothing here overrides the design — it only fills the gaps.
   ========================================================================== */

/* The `hidden` attribute must win over display:flex/grid. */
[hidden] { display: none !important; }

/* Eyebrow on dark grounds (was an inline style in the prototype). */
.wb-eyebrow-light { color: var(--electric-400); }

/* Inline SVG icons inherit colour and never stretch. */
.wb-icon { flex: 0 0 auto; }

/* Image placeholders — stand-ins for photography not yet supplied. */
/* .wb-slot was the empty thumbnail box on a blog card. A card whose post has
   no featured image now renders no thumbnail area at all rather than a grey
   rectangle, so the rule has no markup left to match. Its replacement is the
   text-only card below. */
.wb-work-thumb.is-textonly {
  aspect-ratio: auto;
  min-height: 0;
  background: none;
  padding: 18px 20px 0;
}
.wb-work-thumb.is-textonly .wb-blog-cat {
  position: static;
  display: inline-flex;
}
.wb-hero-photo .wb-hero-photo-img { width: 100%; height: 100%; object-fit: cover; opacity: .30; filter: grayscale(.15); }

/* Skip link — keyboard users land on content, invisible otherwise. */
.wb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--hero-500); color: #fff; padding: 12px 18px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  border-radius: 0 0 var(--radius-md) 0;
}
.wb-skip:focus { left: 0; }

/* Burger icon swap (prototype re-rendered the icon; CSS does it here). */

/* Scroll lock while the quote modal is open. */
body.wb-modal-open { overflow: hidden; }

/* Honeypot — never shown, never announced. */
.wb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mailto fallback shown when the quote mu-plugin isn't installed. */
.wb-modal-fallback { font-size: 15px; line-height: 1.55; color: var(--fg-secondary); margin: 0 0 18px; }

/* Anchor offset is already handled by `html { scroll-padding-top: 84px }`
   further up — adding scroll-margin here too would double the gap. */

/* Two <img> logo swap needs to out-specify `.wb-nav-logo img { display:block }`.
   (The prototype swapped one img's src in JS; here both ship and CSS picks.) */

/* On phones the header "Get a quote" pill collides with the logo. The mobile
   menu already carries its own quote button, so hide the header one. */

/* Selected work: cards now link to real case studies, and the section ends with
   a route to the full portfolio. */
.wb-work-title-link { color: inherit; text-decoration: none; }
.wb-work-title-link:hover { color: var(--hero-600); }
.wb-work-title-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: 4px; }
.wb-work-all { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 56px); }


/* Service cards — icon-led, no photography. */
.wb-svc-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%;
  padding: 26px 24px 24px; border-radius: var(--radius-lg); text-decoration: none;
  background: linear-gradient(180deg, #1b2440, #161e36);
  border: 1px solid rgba(255,255,255,.11);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
.wb-svc-card:hover { transform: translateY(-4px); border-color: rgba(99,117,255,.55); background: linear-gradient(180deg, #232f57, #18213c); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.wb-svc-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 12px; color: var(--hero-300); background: rgba(99,117,255,.16); border: 1px solid rgba(99,117,255,.35);
}
.wb-svc-card:hover .wb-svc-icon { color: #fff; background: var(--hero-500); border-color: transparent; box-shadow: var(--shadow-brand); }
.wb-svc-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.08; color: #fff; margin: 0 0 9px; letter-spacing: -.01em; }
.wb-svc-card p { font-size: 14px; line-height: 1.55; color: #c5cce0; margin: 0 0 16px; }
.wb-svc-card .wb-sd-tags { margin-top: auto; }
.wb-svc-card .wb-sd-tag { padding: 5px 10px; }
.wb-svc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--hero-300); }
.wb-svc-card:hover .wb-svc-more { color: #fff; }

/* Section fabric behind the service cards — blueprint grid + faint bolt watermark. */
.wb-saveday-fabric {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(90% 70% at 12% 88%, rgba(99,117,255,.14), transparent 60%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(130% 90% at 50% 40%, #000 25%, transparent 78%);
}
.wb-saveday-bolt { position: absolute; left: -110px; bottom: -90px; z-index: 0; opacity: .045; pointer-events: none; transform: rotate(-12deg); }
.wb-saveday-bolt img { display: block; width: 520px; height: auto; }

/* Testimonial rotator */
.wb-quote-stage { display: grid; }
.wb-quote-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.wb-quote-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.wb-quote-text { font-size: clamp(19px, 2.1vw, 26px); line-height: 1.4; text-wrap: pretty; }
.wb-quote-avatar { overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.wb-quote-avatar img { width: 34px; height: 34px; object-fit: contain; }
.wb-quote-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.wb-quote-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff; color: var(--midnight-900); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.wb-quote-arrow:hover { background: var(--hero-500); border-color: transparent; color: #fff; }
.wb-quote-dots { display: flex; align-items: center; gap: 8px; }
.wb-quote-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--hero-200, #c9d0ff); cursor: pointer; transition: width var(--dur-fast), background var(--dur-fast); }
.wb-quote-dot.is-active { width: 24px; border-radius: 5px; background: var(--hero-500); }
@media (prefers-reduced-motion: reduce) { .wb-quote-slide { transition: none; } }

/* Equal-height cards in the 3-up rows. */
.wb-grid-3 > * { display: flex; }
.wb-grid-3 .wb-work-card { display: flex; flex-direction: column; width: 100%; }
.wb-blog-card .wb-blog-link { display: flex; flex-direction: column; height: 100%; }
.wb-blog-card .wb-work-body { display: flex; flex-direction: column; flex: 1; }
.wb-blog-card .wb-work-body p { margin-bottom: 0; }

/* Plain service boxes — lighter blue panel, no texture behind them. */
.wb-saveday-fabric, .wb-saveday-bolt { display: none; }
.wb-svc-card { background: #212c4e; border-color: rgba(255,255,255,.14); }
.wb-svc-card:hover { background: #2a3760; }
.wb-svc-card p { color: #ccd3e8; }
.wb-svc-card .wb-sd-tag { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: #eef1fb; }

/* Save-the-day section — Wonderboy signal over main street as the section backdrop. */
.wb-saveday { background: var(--midnight-950); }
.wb-saveday-fabric {
  display: block; inset: 0; opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(11,16,30,.86) 0%, rgba(11,16,30,.9) 46%, rgba(11,16,30,.97) 100%),
    url('../img/art/hero-street.webp');
  background-size: auto, cover;
  background-position: center, center 22%;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image: none; mask-image: none;
}
/* the street art now lives in the background, so the top zone runs full width */
.wb-saveday-top { grid-template-columns: 1fr; }
.wb-saveday-street { display: none; }
.wb-saveday-hero { position: static; }
.wb-feature-bar { position: static; right: auto; bottom: auto; margin-top: 26px; justify-content: flex-start; flex-wrap: wrap; }
.wb-saveday-intro { max-width: 760px; }
/* keep every card fully legible on top of the photo */
.wb-svc-card { background: rgba(28,38,66,.94); backdrop-filter: blur(2px); }
.wb-svc-card:hover { background: rgba(42,55,96,.96); }

/* --- signal art readable, copy protected ------------------------------- */
.wb-saveday-fabric {
  background-image:
    linear-gradient(180deg, rgba(11,16,30,.15) 0%, rgba(11,16,30,.55) 52%, rgba(11,16,30,.95) 92%),
    linear-gradient(90deg, rgba(11,16,30,.92) 0%, rgba(11,16,30,.66) 38%, rgba(11,16,30,.18) 72%, rgba(11,16,30,.35) 100%),
    url('../img/art/hero-street.webp');
  background-size: auto, auto, 1180px auto;
  background-position: center, center, right -60px top -20px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
/* top zone: copy left, feature grid right — no empty half */
.wb-saveday-top { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; gap: 48px; }
.wb-saveday-intro { max-width: 560px; }
.wb-saveday-hero { display: block; }
.wb-feature-bar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0;
  padding: 20px; border-radius: var(--radius-lg);
  background: rgba(17,24,44,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px);
}
.wb-feature { margin: 0; }
@media (max-width: 900px) {
  .wb-saveday-top { grid-template-columns: 1fr; gap: 28px; }
  .wb-saveday-fabric { background-position: center, center, right -140px top 0; background-size: auto, auto, 900px auto; }
}

/* --- art centered and full-height; service boxes see-through -------------- */
.wb-saveday-fabric {
  background-image:
    linear-gradient(180deg, rgba(11,16,30,.32) 0%, rgba(11,16,30,.42) 50%, rgba(11,16,30,.62) 100%),
    linear-gradient(90deg, rgba(11,16,30,.72) 0%, rgba(11,16,30,.34) 42%, rgba(11,16,30,.24) 100%),
    url('../img/art/hero-street.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center center;
}
.wb-svc-card {
  background: rgba(18,26,46,.5); border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.wb-svc-card:hover {
  background: rgba(37,50,92,.68); border-color: rgba(129,145,255,.7);
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}
.wb-svc-card p { color: #dbe1f2; }
.wb-svc-card h3 { text-shadow: 0 1px 12px rgba(8,12,24,.5); }
@media (max-width: 900px) { .wb-saveday-fabric { background-size: auto, auto, cover; background-position: center, center, center center; } }

/* --- art sized to section width, centered in its height ------------------- */
.wb-saveday-fabric {
  background-image:
    radial-gradient(70% 55% at 22% 18%, rgba(11,16,30,.72), transparent 70%),
    linear-gradient(180deg, rgba(11,16,30,.4) 0%, rgba(11,16,30,.34) 50%, rgba(11,16,30,.5) 100%),
    url('../img/art/hero-street.webp');
  background-size: auto, auto, 100% auto;
  background-position: center, center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
/* soften the top and bottom edges of the art band into the section */
.wb-saveday::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--midnight-950) 0%, rgba(11,16,30,0) 22%, rgba(11,16,30,0) 78%, var(--midnight-950) 100%);
}
.wb-svc-card { background: rgba(18,26,46,.66); }
.wb-svc-card:hover { background: rgba(37,50,92,.78); }
@media (max-width: 900px) { .wb-saveday-fabric { background-size: auto, auto, 140% auto; } }

/* --- art as a soft, section-tall layer; scrim moved above it -------------- */
.wb-saveday-fabric {
  background-image: url('../img/art/hero-street.webp');
  background-size: 165% auto;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  opacity: 1;
}
.wb-saveday::after {
  z-index: 1;
  background:
    radial-gradient(70% 55% at 22% 16%, rgba(11,16,30,.7), transparent 72%),
    linear-gradient(180deg, rgba(11,16,30,.5) 0%, rgba(11,16,30,.34) 45%, rgba(11,16,30,.55) 100%);
}
@media (max-width: 900px) { .wb-saveday-fabric { background-size: 260% auto; } }

/* --- portfolio cards: full-bleed photo, white logo, service breadcrumbs --- */
.wb-pf-card { position: relative; display: flex; width: 100%; min-height: 430px; border-radius: var(--radius-lg); overflow: hidden; background: var(--midnight-900); }
.wb-pf-link { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 26px 24px 22px; text-decoration: none; color: #fff; }
.wb-pf-media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease-out); }
.wb-pf-card:hover .wb-pf-media { transform: scale(1.06); }
.wb-pf-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,16,30,.42) 0%, rgba(11,16,30,.5) 45%, rgba(11,16,30,.78) 100%); transition: background var(--dur-base); }
.wb-pf-card:hover .wb-pf-scrim { background: linear-gradient(180deg, rgba(11,16,30,.5) 0%, rgba(11,16,30,.6) 45%, rgba(11,16,30,.86) 100%); }
.wb-pf-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wb-pf-logo { max-width: 190px; max-height: 62px; width: auto; height: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.45)); opacity: .96; }
.wb-pf-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(8,12,24,.55); }
.wb-pf-services { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono, var(--font-body)); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.86); }
.wb-pf-services span { display: inline-flex; align-items: center; }
.wb-pf-services span + span::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.45); }
.wb-pf-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding-top: 14px; width: 100%; border-top: 1px solid rgba(255,255,255,.22); font-family: var(--font-body); font-weight: 700; font-size: 13px; color: #fff; }
.wb-pf-more svg { transition: transform var(--dur-fast) var(--ease-out); }
.wb-pf-card:hover .wb-pf-more svg { transform: translate(2px, -2px); }
.wb-pf-link:focus-visible { outline: 2px solid var(--hero-300); outline-offset: -4px; }

/* Logos front and center — 3/4 of the card width. */
.wb-pf-logo { width: 75%; max-width: none; max-height: 130px; object-fit: contain; object-position: left center; margin-bottom: 4px; }

/* Full-color logos, centered and large, on a light plate so brand colors read. */
.wb-pf-body { align-items: center; text-align: center; gap: 14px; }
.wb-pf-logo {
  filter: none; opacity: 1; align-self: center;
  width: 75%; max-width: none; height: auto; max-height: 150px; object-fit: contain; object-position: center;
  padding: 18px 22px; border-radius: 14px; background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.wb-pf-services { justify-content: center; }
.wb-pf-more { justify-content: center; }

/* Logo floats directly on the photo — no plate. */
.wb-pf-logo { padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 3px 14px rgba(0,0,0,.55)); }

/* Soft light bloom behind each logo so full-color marks pop off the photo. */
.wb-pf-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.wb-pf-logo-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 118%; height: 260%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.66), rgba(255,255,255,.34) 46%, rgba(255,255,255,.12) 70%, transparent 100%);
  filter: blur(6px);
  transition: opacity var(--dur-base);
}
.wb-pf-logo { position: relative; filter: drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 3px 10px rgba(0,0,0,.35)); }
.wb-pf-card:hover .wb-pf-logo-glow { opacity: .85; }

/* Bloom scaled to the logo, not the card — falls off above the title. */
.wb-pf-logo-glow {
  width: 112%; height: 145%;
  background: radial-gradient(closest-side, rgba(255,255,255,.42), rgba(255,255,255,.2) 52%, rgba(255,255,255,.06) 76%, transparent 100%);
  filter: blur(14px);
}
.wb-pf-logo { filter: drop-shadow(0 0 10px rgba(255,255,255,.4)) drop-shadow(0 3px 10px rgba(0,0,0,.4)); }

/* Bigger marks. */
.wb-pf-logo { width: 92%; max-height: 210px; }
.wb-pf-card { min-height: 480px; }

/* Thumb targets for the quote carousel, at the widths this site serves a touch
   layout. The visible arrow stays 36px and the dot stays 9px - the design is
   unchanged - but each control grows a transparent hit area to the 44px WCAG
   2.2 asks for, so a thumb aiming at a 9px dot lands on it. */
@media (max-width: 860px) {
	.wb-quote-arrow { width: 44px; height: 44px; }
	.wb-quote-dots { gap: 0; }
	.wb-quote-dot {
		height: 44px; width: 22px; border-radius: 0; background: none;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.wb-quote-dot::before {
		content: ''; width: 9px; height: 9px; border-radius: 50%;
		background: var(--hero-200, #c9d0ff);
		transition: width var(--dur-fast), background var(--dur-fast);
	}
	.wb-quote-dot.is-active { width: 37px; background: none; }
	.wb-quote-dot.is-active::before { width: 24px; border-radius: 5px; background: var(--hero-500); }
}