/* ===========================================================================
 * site.css — shared presentation for the static marketing pages.
 *
 * Extracted verbatim from the inline <style> block in index.html so the
 * /digital-marketing pages do not each carry a copy. Homepage-only rules
 * (#hero-canvas, #mini-robot-*, #dash-carousel) deliberately stay inline
 * in index.html — they belong to one page.
 *
 * public/assets/tailwind.css is a PREBUILT, PURGED artifact with no npm
 * script that regenerates it, and tailwind.config.js scans only
 * ./public/*.html (one level), so it would never see public/digital-marketing/.
 * Any Tailwind class not already in that file does nothing. The
 * "supplementary utilities" block at the end of this file is the sanctioned
 * escape hatch: plain CSS for the handful of classes the new pages need.
 * =========================================================================== */

body { background-color: #0A1628; color: #E2E8F0; font-family: 'Inter', sans-serif; }
/* Off-canvas mobile menu and full-bleed marquees must never create sideways scroll */
html, body { overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.glass { background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(16px); border: 1px solid rgba(55, 65, 81, 0.5); }
.gradient-text { background: linear-gradient(135deg, #00D4FF 0%, #10B981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.btn-primary { background: linear-gradient(135deg, #00D4FF 0%, #10B981 100%); color: #0A1628; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4); transform: translateY(-2px); }
.btn-outline { border: 1px solid #334155; color: #E2E8F0; transition: all 0.3s ease; }
.btn-outline:hover { border-color: #00D4FF; color: #00D4FF; }
.nav-link { position: relative; padding-bottom: 4px; }
.nav-link.active { color: #00D4FF; }
.nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: linear-gradient(135deg, #00D4FF 0%, #10B981 100%); }
/* Header dropdowns — same glass treatment, pure CSS (opens on hover and keyboard focus) */
.nav-item { position: relative; }
.nav-dd { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; display: none; }
.nav-item:hover .nav-dd, .nav-item:focus-within .nav-dd { display: block; }
.nav-dd-inner { border-radius: 12px; padding: 8px; min-width: 250px; }
/* Separator inside a dropdown, between the sector list and the two entries
   that returned from the retired Resources menu. */
.nav-dd-sep { height: 1px; margin: 6px 10px; background: rgba(255, 255, 255, 0.10); }
.nav-dd-link { display: block; padding: 8px 12px; border-radius: 8px; font-size: 0.8125rem; color: #9CA3AF; white-space: nowrap; transition: all 0.2s ease; }
.nav-dd-link:hover { color: #00D4FF; background: rgba(30, 41, 59, 0.6); }
/* Stack marquee — ticker rows flanking the value pillars, scrolling in opposite directions */
.marquee-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee-set { display: flex; gap: 12px; padding-right: 12px; }
.marquee-left { animation: marquee 70s linear infinite; }
.marquee-right { animation: marquee 70s linear infinite reverse; }
.marquee-chip { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 9999px; border: 1px solid #334155; background: rgba(17, 24, 39, 0.5); color: #94A3B8; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; white-space: nowrap; }
.marquee-chip img { width: 18px; height: 18px; object-fit: contain; }
.marquee-chip img.inv-white { filter: brightness(0) invert(1); opacity: 0.9; }
.marquee-chip img.inv { filter: invert(1); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-left, .marquee-right { animation: none; } }
/* Consistent section eyebrow — reinforces "which section am I on" alongside the nav highlight */
.eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: #00B4D8; margin-bottom: 0.75rem; }
.card-hover { transition: all 0.3s ease; border: 1px solid rgba(55, 65, 81, 0.5); }
.card-hover:hover { border-color: rgba(0, 212, 255, 0.5); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #00D4FF; outline-offset: 2px; border-radius: 4px; }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; transform: none; transition: none; }
}
.white-section { background: #F8FAFC; }
.white-section h2, .white-section h3, .white-section h4 { color: #0A1628; }
.white-section p { color: #475569; }
/* Dark cards that sit inside a white-section (e.g. Problem cards) need their
   headings forced back to white — otherwise the rule above makes them
   dark-on-dark and invisible. Declared after .white-section so it wins the tie. */
.white-section .on-dark h3, .white-section .on-dark h4 { color: #FFFFFF; }
.white-section .on-dark p { color: #9CA3AF; }
.row-hover { transition: all 0.25s ease; }
/* group-hover:text-teal-600 is not in the purged tailwind.css, and teal-400 is
   only 2.4:1 on a white card. */
.group:hover .gh-teal { color: #0E7490; }
.row-hover:hover { border-color: rgba(0, 212, 255, 0.5); background-image: linear-gradient(rgba(0, 212, 255, 0.07), rgba(0, 212, 255, 0.07)); }
.flow-arrow-h { display: none; }
@media (min-width: 768px) { .flow-arrow-h { display: flex; } .flow-arrow-v { display: none; } }

/* Dummy dashboard mockup */
.dash-bar { width: 100%; background: linear-gradient(180deg, #00D4FF 0%, #10B981 100%); border-radius: 4px 4px 0 0; }
.dash-donut { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#00D4FF 0% 68%, #E2E8F0 68% 100%); display: flex; align-items: center; justify-content: center; }
.dash-donut-inner { width: 88px; height: 88px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-direction: column; }
/* Compact lead-capture CTA (dark, used on dark sections) */
.lead-cta input, .lead-cta textarea { width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem; background: #111827; border: 1px solid #334155; color: #fff; font-size: 0.875rem; }
.lead-cta input::placeholder, .lead-cta textarea::placeholder { color: #64748B; }
.lead-cta input:focus, .lead-cta textarea:focus { outline: none; border-color: #00D4FF; }

/* Compact lead-capture CTA (light variant, used on white-section) */
.lead-cta-light h3 { color: #0A1628; }
.lead-cta-light p { color: #64748B; }
.lead-cta-light input, .lead-cta-light textarea { width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem; background: #F8FAFC; border: 1px solid #E2E8F0; color: #0A1628; font-size: 0.875rem; }
.lead-cta-light input::placeholder, .lead-cta-light textarea::placeholder { color: #94A3B8; }
.lead-cta-light input:focus, .lead-cta-light textarea:focus { outline: none; border-color: #00B4D8; }

/* Chat widget */
#chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 100; width: 380px; max-width: calc(100vw - 24px); max-height: min(520px, 80vh); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transition: all 0.3s ease; transform: scale(0.9) translateY(20px); opacity: 0; pointer-events: none; }
@media (max-width: 480px) { #chat-widget { right: 12px; bottom: 12px; } }
#chat-widget.active { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
#chat-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 99; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #00D4FF 0%, #10B981 100%); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4); transition: transform 0.2s; }
#chat-toggle:hover { transform: scale(1.1); }
#chat-toggle.hidden { display: none; }
#chat-messages { flex-grow: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #0f172a; }
.msg-bot { align-self: flex-start; background: #1e293b; padding: 10px 14px; border-radius: 12px 12px 12px 2px; max-width: 85%; font-size: 14px; line-height: 1.4; color: #e2e8f0; }
.msg-user { align-self: flex-end; background: linear-gradient(135deg, #00D4FF 0%, #00B4D8 100%); color: #0A1628; padding: 10px 14px; border-radius: 12px 12px 2px 12px; max-width: 85%; font-size: 14px; font-weight: 500; }

/* ---------------------------------------------------------------------------
 * Lead-journey flow. A grid rather than a flex row so six steps are never more
 * than two rows: 3 columns up to lg, 6 columns from lg. The connector arrow is
 * a pseudo-element on each step and is suppressed at the end of each row, so
 * no separate arrow elements are needed and nothing dangles on the right edge.
 * ------------------------------------------------------------------------ */
.flow-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1024px) { .flow-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.flow-step { position: relative; padding: 16px 14px; border-radius: 12px; border: 1px solid #334155; background-color: #111827; transition: border-color 0.25s ease, transform 0.25s ease; }
.flow-step:hover { border-color: rgba(0, 212, 255, 0.5); transform: translateY(-2px); }
.flow-step .flow-n { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: #00B4D8; letter-spacing: 0.08em; }
.flow-step .flow-t { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #fff; font-size: 0.9375rem; margin-top: 6px; }
.flow-step .flow-m { display: block; font-size: 0.75rem; color: #94A3B8; margin-top: 4px; line-height: 1.45; }
/* The steps past the point where most agencies stop reporting. */
.flow-step.flow-ours { border-color: rgba(16, 185, 129, 0.45); background-color: #0F2A24; }
.flow-step.flow-ours .flow-n { color: #10B981; }
/* Connector: shown between steps, hidden where a row ends. */
.flow-step::after { content: '\2192'; position: absolute; top: 50%; right: -13px; transform: translateY(-50%); color: #00B4D8; font-size: 0.8rem; line-height: 1; }
.flow-step:nth-child(3n)::after, .flow-step:last-child::after { content: none; }
@media (min-width: 1024px) {
    .flow-step:nth-child(3n)::after { content: '\2192'; }
    .flow-step:last-child::after { content: none; }
}

/* Light-band variant, for the flow on a white-section. */
.flow-light .flow-step { border-color: #E2E8F0; background-color: #FFFFFF; box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05); }
.flow-light .flow-step .flow-n { color: #0E7490; }
.flow-light .flow-step .flow-t { color: #0A1628; }
.flow-light .flow-step .flow-m { color: #475569; }
.flow-light .flow-step.flow-ours { border-color: rgba(5, 150, 105, 0.5); background-color: #ECFDF5; }
.flow-light .flow-step.flow-ours .flow-n { color: #047857; }
.flow-light .flow-band.flow-stop { color: #64748B; }
.flow-light .flow-band.flow-go { color: #B45309; }
.flow-light .flow-band.flow-stop .flow-rule { background: linear-gradient(90deg, #CBD5E1, rgba(203, 213, 225, 0)); }
.flow-light .flow-band.flow-go .flow-rule { background: linear-gradient(90deg, rgba(5, 150, 105, 0.55), rgba(5, 150, 105, 0.08)); }

/* The bracket under the flow. A labelled rule rather than a border trick, so it
   survives the column stack. */
.flow-band { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; }
.flow-band .flow-rule { flex: 1 1 auto; height: 1px; }
.flow-band.flow-stop { color: #64748B; }
.flow-band.flow-stop .flow-rule { background: linear-gradient(90deg, #334155, rgba(51, 65, 85, 0)); }
.flow-band.flow-go { color: #FBBF24; }
.flow-band.flow-go .flow-rule { background: linear-gradient(90deg, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.1)); }

/* Delta chip for dashboard KPI tiles. */
.dash-delta { display: inline-flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 600; padding: 1px 6px; border-radius: 9999px; }
.dash-delta.up { color: #047857; background: rgba(16, 185, 129, 0.12); }
.dash-delta.down { color: #B91C1C; background: rgba(244, 63, 94, 0.12); }
.dash-delta.flat { color: #475569; background: rgba(100, 116, 139, 0.12); }

/* ---------------------------------------------------------------------------
 * 90-day ramp, horizontal. Five stages across at lg, three at md, stacked on
 * phones. The rail is a pseudo-element on the grid so it cannot desynchronise
 * from the number of stages.
 * ------------------------------------------------------------------------ */
.ramp-grid { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.ramp-grid > * { scroll-snap-align: start; }
.ramp-grid::-webkit-scrollbar { height: 6px; }
.ramp-grid::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
@media (min-width: 768px) { .ramp-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; scroll-snap-type: none; } }
@media (min-width: 1024px) { .ramp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ramp-step { position: relative; padding: 18px 16px; border-radius: 12px; border: 1px solid #E2E8F0; background-color: #FFFFFF; box-shadow: 0 1px 2px rgba(10, 22, 40, 0.05); transition: border-color 0.25s ease, transform 0.25s ease; }
.ramp-step:hover { border-color: rgba(0, 180, 216, 0.55); transform: translateY(-2px); }
.ramp-step .ramp-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9999px; background: linear-gradient(135deg, #00D4FF 0%, #10B981 100%); color: #0A1628; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; }
.ramp-step .ramp-when { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: #0E7490; margin-top: 12px; }
.ramp-step .ramp-what { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #0A1628; font-size: 0.9375rem; margin-top: 4px; }
.ramp-step .ramp-detail { display: block; font-size: 0.8125rem; color: #475569; margin-top: 8px; line-height: 1.5; }
.ramp-rail { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00D4FF, #10B981, rgba(16, 185, 129, 0.15)); margin-bottom: 18px; }


/* ---------------------------------------------------------------------------
 * Icon chips for service cards on a light band. The purged tailwind.css has
 * -50/-600 only for teal, emerald, cyan and amber, and the bg-<c>-500/10 +
 * text-<c>-400 pair used on dark cards washes out to ~2.8:1 over white. These
 * are explicit so every service colour reads the same on either band.
 * ------------------------------------------------------------------------ */
.ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic svg { width: 20px; height: 20px; }
/* A numeral in an icon chip is text, not a graphic, so it needs 4.5:1 — the
   chip's own colour is tuned for a stroked icon and only reaches ~3.3:1. */
.ic .ic-num { color: #0A1628; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; }
.ic-teal { background: #CCFBF1; color: #0D9488; }
.ic-emerald { background: #D1FAE5; color: #047857; }
.ic-cyan { background: #CFFAFE; color: #0E7490; }
.ic-indigo { background: #E0E7FF; color: #4338CA; }
.ic-amber { background: #FEF3C7; color: #B45309; }
.ic-purple { background: #EDE9FE; color: #6D28D9; }
.ic-rose { background: #FFE4E6; color: #BE123C; }
.ic-orange { background: #FFEDD5; color: #C2410C; }
.ic-yellow { background: #FEF3C7; color: #A16207; }

/* ---------------------------------------------------------------------------
 * Data widgets: the CSS half of the machinery lifted into site.js. These rules
 * were inline in case-studies.html, which is why no other page could use them.
 *
 * .dash-bar gains the transition it never had: the observer sets width from
 * [data-w], and without a transition the bar snapped to its final size.
 * ------------------------------------------------------------------------ */
.dash-bar { transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1), height 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.chart-line { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.8s ease-out 0.2s; }
.chart-line.drawn { stroke-dashoffset: 0; }
.chart-fill { opacity: 0; transition: opacity 0.9s ease 1.2s; }
.chart-fill.drawn { opacity: 1; }
.chart-dot { animation: chart-pulse 2s ease-in-out infinite; }
@keyframes chart-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.dash-tab { padding: 5px 12px; border-radius: 8px; font-size: 12px; color: #6B7280; background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; font-family: 'Inter', sans-serif; }
.dash-tab.active { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; font-weight: 600; }

.dash-dot { width: 7px; height: 7px; border-radius: 9999px; background: #334155; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; }
.dash-dot.active { background: #00D4FF; transform: scale(1.25); }
.white-section .dash-dot { background: #CBD5E1; }
.white-section .dash-dot.active { background: #0E7490; }

/* Horizontal carousel track. */
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; scroll-behavior: smooth; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.carousel-track > * { scroll-snap-align: center; flex: 0 0 auto; }
/* Arrows live inside the carousel, not outside it. */
.carousel-arrow { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1px solid #CBD5E1; background: #FFFFFF; color: #0E7490; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.carousel-arrow:hover { border-color: #0E7490; transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .dash-bar, .chart-line, .chart-fill { transition: none; }
    .chart-line { stroke-dashoffset: 0; }
    .chart-fill { opacity: 1; }
    .chart-dot { animation: none; }
    .carousel-track { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
 * Banner robot (robot.js). Deliberately NOT the homepage's #hero-canvas rules:
 * that one is absolutely positioned over the right half of the hero, while this
 * sits in its own grid column. Hidden below lg, matching the JS guard — so the
 * canvas is never laid out on a phone whether or not the purged Tailwind build
 * happens to carry `hidden lg:block`.
 * ------------------------------------------------------------------------ */
.robot-stage { display: none; position: relative; }
@media (min-width: 1024px) { .robot-stage { display: block; } }
.robot-stage canvas { width: 100%; height: 420px; display: block; }
/* A soft radial behind the robot so it reads as lit rather than floating on flat navy. */
.robot-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(16, 185, 129, 0.16), rgba(0, 212, 255, 0.06) 45%, transparent 70%); pointer-events: none; }
/* The banner's two columns. Plain CSS because the purged tailwind.css has no
   lg:grid-cols-5, lg:col-span-*, or order-* — a grid built from those would
   silently collapse to one column. Robot column first in DOM order, so it is
   on the left without needing order utilities; below lg it is display:none, so
   the content column simply fills the row. */
.hero-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero-split { grid-template-columns: 2fr 3fr; } }
/* Mirrored variant: content first, robot second. Used where the column has to
   start with a breadcrumb, which belongs at the top left of the page. */
.hero-split-rev { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero-split-rev { grid-template-columns: 3fr 2fr; } }
/* The sector ring needs more room than the signal ring, and sits over a
   cooler wash so the icons stay legible. */
.robot-stage-wide canvas { height: 470px; }
.robot-stage-wide::before { background: radial-gradient(circle at 50% 42%, rgba(0, 212, 255, 0.18), rgba(99, 102, 241, 0.07) 48%, transparent 72%); }
/* Dashboard slides in the carousel: wide enough to stay readable, narrow
   enough that the next one peeks in and the line reads as swipeable. */
.dash-slide { width: min(92vw, 420px); }
@media (min-width: 1024px) { .dash-slide { width: 380px; } }

/* ---------------------------------------------------------------------------
 * The two bands under the lead-journey flow. These carry the whole argument of
 * the section and were set at 0.75rem mono — smaller than the body text around
 * them. Raised to a sub-heading scale, with a glyph each: a flat line where
 * reporting stops, rising bars where it carries on.
 * ------------------------------------------------------------------------ */
.flow-band { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.flow-band .flow-glyph { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 3px; width: 34px; height: 22px; }
.flow-band .flow-glyph i { display: block; width: 5px; border-radius: 2px; background: currentColor; opacity: 0.85; }
/* Flat: four bars of the same height, going nowhere. */
.flow-band.flow-stop .flow-glyph i { height: 7px; }
/* Rising: the same four bars, climbing. */
.flow-band.flow-go .flow-glyph i:nth-child(1) { height: 7px; }
.flow-band.flow-go .flow-glyph i:nth-child(2) { height: 12px; }
.flow-band.flow-go .flow-glyph i:nth-child(3) { height: 17px; }
.flow-band.flow-go .flow-glyph i:nth-child(4) { height: 22px; }
.flow-band .flow-sub { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; opacity: 0.8; margin-top: 2px; }

/* ---------------------------------------------------------------------------
 * "What AI-enabled actually means": eight capabilities as a horizontal swipe
 * strip. The motion is the numbers counting up and the bars growing as the
 * strip enters view, not the strip moving on its own.
 * ------------------------------------------------------------------------ */
.ai-strip { display: grid; gap: 16px; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: none; }
.ai-strip::-webkit-scrollbar { height: 6px; }
.ai-strip::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.ai-strip > * { scroll-snap-align: start; }
@media (min-width: 640px) { .ai-strip { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .ai-strip { grid-auto-columns: 25.5%; } }

.ai-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px; border-radius: 14px; border: 1px solid #334155; background-color: #111827; transition: border-color 0.25s ease, transform 0.25s ease; }
.ai-card:hover { border-color: rgba(16, 185, 129, 0.5); transform: translateY(-2px); }
.ai-card .ai-n { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.1em; color: #64748B; }
.ai-card .ai-fig { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1; margin-top: 14px; background: linear-gradient(135deg, #10B981 0%, #00D4FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ai-card .ai-unit { display: block; font-size: 0.75rem; color: #94A3B8; margin-top: 4px; }
.ai-card .ai-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #fff; font-size: 0.9375rem; margin-top: 16px; }
.ai-card .ai-detail { font-size: 0.8125rem; color: #94A3B8; line-height: 1.5; margin-top: 6px; flex: 1 1 auto; }
.ai-card .ai-meter { margin-top: 16px; }
.ai-card .ai-track { height: 6px; border-radius: 3px; background: #1F2937; overflow: hidden; }
.ai-card .ai-fillbar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #10B981, #00D4FF); width: 0; }
.ai-card .ai-meter-label { display: block; font-size: 0.6875rem; font-family: 'JetBrains Mono', monospace; color: #64748B; margin-top: 6px; }

/* ---------------------------------------------------------------------------
 * "What we measure": a cadence tick lane and a baseline-to-now bar per metric,
 * so the section shows measurement rather than listing it.
 * ------------------------------------------------------------------------ */
.meas-row { display: grid; gap: 10px 16px; grid-template-columns: 1fr; padding: 16px 0; border-bottom: 1px solid #1F2937; align-items: center; }
@media (min-width: 768px) { .meas-row { grid-template-columns: 1.4fr 1fr 110px; } }
.meas-metric { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #22D3EE; font-size: 0.9375rem; }
.meas-why { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.8125rem; color: #94A3B8; margin-top: 3px; }
.meas-bar { position: relative; height: 26px; }
.meas-track { position: absolute; inset: 10px 0 auto 0; height: 6px; border-radius: 3px; background: #1F2937; }
.meas-fill { position: absolute; left: 0; top: 10px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #10B981, #00D4FF); width: 0; }
.meas-base { position: absolute; top: 4px; width: 2px; height: 18px; border-radius: 1px; background: #64748B; }
.meas-vals { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: #64748B; margin-top: 2px; }
/* Cadence: how many ticks light up — weekly busiest, quarterly sparsest. */
.meas-cadence { display: flex; align-items: center; gap: 4px; }
.meas-cadence i { display: block; width: 6px; height: 6px; border-radius: 9999px; background: #1F2937; }
.meas-cadence i.on { background: #10B981; }
.meas-cadence span { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94A3B8; margin-left: 6px; }

/* ---------------------------------------------------------------------------
 * Creative strip, second pass: five industry-styled brand frames rather than
 * four channel-format boxes. Each is a real ad layout — different palette,
 * different composition, different typographic weight — built around our own
 * "A" monogram, because a client's brand is not ours to put on a web page and
 * a made-up logo would be exactly the fabricated proof this site avoids.
 * ------------------------------------------------------------------------ */
.brandcard { border-radius: 14px; border: 1px solid #E2E8F0; background-color: #FFFFFF; overflow: hidden; box-shadow: 0 1px 3px rgba(10, 22, 40, 0.07); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.brandcard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 22, 40, 0.12); }
.brandcard .bc-art { aspect-ratio: 4 / 5; display: block; width: 100%; }
.brandcard .bc-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-top: 1px solid #F1F5F9; }
.brandcard .bc-ind { font-family: 'Space Grotesk', sans-serif; font-size: 0.8125rem; font-weight: 600; color: #0A1628; }
.brandcard .bc-fmt { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; color: #64748B; }
.brand-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Dark-band variant of the 90-day/process ramp, so a spoke page can alternate
   bands without the stage cards disappearing into a navy background. */
.ramp-dark .ramp-step { border-color: #334155; background-color: #111827; box-shadow: none; }
.ramp-dark .ramp-step:hover { border-color: rgba(0, 212, 255, 0.5); }
.ramp-dark .ramp-step .ramp-when { color: #22D3EE; }
.ramp-dark .ramp-step .ramp-what { color: #FFFFFF; }
.ramp-dark .ramp-step .ramp-detail { color: #94A3B8; }
.ramp-dark .ramp-grid::-webkit-scrollbar-thumb { background: #334155; }

/* ---------------------------------------------------------------------------
 * MCP connection diagram on the service pages: the tools this service runs in,
 * through one connection layer, into the systems the client already owns. The
 * point of the picture is the middle column — that the channel work and the
 * CRM it lands in are wired together rather than reconciled by hand later.
 * ------------------------------------------------------------------------ */
.mcp { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .mcp { grid-template-columns: 1fr 190px 1fr; } }
.mcp-col { border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; padding: 16px; }
.mcp-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: #B45309; margin-bottom: 10px; }
.mcp-chip { display: inline-block; font-size: 0.75rem; color: #334155; border: 1px solid #E2E8F0; border-radius: 9999px; padding: 4px 10px; margin: 0 4px 6px 0; background: #F8FAFC; }
.mcp-core { border: 1px solid rgba(14, 116, 144, 0.35); border-radius: 12px; background: linear-gradient(160deg, #0A1628 0%, #123047 100%); padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.mcp-core .mcp-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; letter-spacing: 0.1em; color: #5EEAD4; }
.mcp-core .mcp-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 1.0625rem; margin-top: 6px; line-height: 1.25; }
.mcp-core .mcp-note { font-size: 0.75rem; color: #94A3B8; margin-top: 8px; line-height: 1.5; }
.mcp-core .mcp-pulse { position: absolute; inset: -1px; border-radius: 12px; border: 1px solid rgba(94, 234, 212, 0.45); animation: mcp-pulse 2.8s ease-in-out infinite; }
@keyframes mcp-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
/* Flow arrows between the three columns; vertical when stacked. */
.mcp-arrow { display: flex; align-items: center; justify-content: center; color: #0E7490; font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .mcp-core .mcp-pulse { animation: none; opacity: 0.5; } }

/* A service page's scorecard: the metrics it is judged on, named. */
.score-grid { display: grid; gap: 10px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.score-item { border: 1px solid #334155; border-radius: 10px; background: #111827; padding: 12px 14px; }
.score-item .score-n { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; color: #64748B; }
.score-item .score-m { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #22D3EE; font-size: 0.875rem; margin-top: 4px; line-height: 1.3; }
.score-item .score-c { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: #10B981; margin-top: 6px; }

/* Counted stat tiles for a service page hero. */
.stat-tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
.stat-tile { border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; padding: 14px 16px; }
.stat-tile .stat-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.75rem; font-weight: 700; color: #0E7490; line-height: 1; }
.stat-tile .stat-l { display: block; font-size: 0.75rem; color: #475569; margin-top: 6px; line-height: 1.35; }

/* Three figures answering a section headed "made on numbers" — the spoke
   equivalent of the hub's AI strip, on a dark band, three across. */
.fig-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .fig-row { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.fig-cell { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1rem; border-left: 2px solid rgba(255, 255, 255, 0.1); }
.fig-n { font-family: 'JetBrains Mono', monospace; font-size: 2.25rem; font-weight: 700; line-height: 1; color: #22D3EE; }
.fig-l { font-size: 0.9375rem; color: #E2E8F0; line-height: 1.4; }
.fig-track { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 0.25rem; }
.fig-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #0891B2, #22D3EE); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.fig-c { font-size: 0.8125rem; color: #94A3B8; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .fig-fill { transition: none; } }

/* "How it connects" — the MCP connector chart. Below 900px the labels inside a
   1000-unit viewBox would render at ~5px, so the chart is desktop-only and the
   grouped chip lists below it carry the same information at every width. */
.mcp-chart { display: none; }
@media (min-width: 900px) { .mcp-chart { display: block; } }
.mc { width: 100%; height: auto; overflow: visible; }
.mc-node rect { fill: #FFFFFF; stroke: #E2E8F0; stroke-width: 1.5; }
.mc-ours rect { stroke: #CBD5E1; }
.mc-yours rect { stroke: #99F6E4; fill: #F0FDFA; }
.mc-client rect { stroke: #A5B4FC; fill: #EEF2FF; }
.mc-auth rect { stroke: #FCD34D; fill: #FFFBEB; }
.mc-nl { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; fill: #0A1628; }
.mc-ni { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; fill: #475569; }
.mc-link { fill: none; stroke: #94A3B8; stroke-width: 1.5; }
.mc-link-v { stroke: #0E7490; stroke-width: 2; }
.mc-link-auth { stroke: #D97706; stroke-dasharray: 5 4; }
.mc-pip rect { fill: #FFFFFF; stroke: #0E7490; stroke-width: 1.25; }
.mc-pip text { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; fill: #0E7490; text-anchor: middle; }
.mc-centre rect { stroke: rgba(94, 234, 212, 0.45); stroke-width: 1.5; }
.mc-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; fill: #5EEAD4; }
.mc-cname { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; fill: #FFFFFF; }
.mc-cnote { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: #94A3B8; }
.mc-legend text { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; fill: #64748B; }
/* The chip lists are two columns now, not three, so the middle core column is
   gone from this grid. */
@media (min-width: 900px) { .mcp { grid-template-columns: 1fr 1fr; } }
.mcp-gl { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: #0E7490; margin: 12px 0 6px; }
.mcp-col .mcp-gl:first-of-type { margin-top: 4px; }

/* "What's different" as reach along one chain, rather than a two-column table
   of assertions. Two bars share a track: the dim one is where most programmes
   stop, the bright one is where ours goes. */
.reach { display: block; }
.reach-chain { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 1.75rem; }
.reach-stage { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; line-height: 1.3; color: #94A3B8; text-align: center; padding: 8px 2px; border-top: 2px solid rgba(255, 255, 255, 0.12); }
.reach-stage b { display: block; color: #22D3EE; font-size: 0.6875rem; margin-bottom: 3px; }
.reach-row { padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.reach-dim { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #22D3EE; font-size: 1rem; margin-bottom: 0.625rem; }
.reach-lane { display: grid; grid-template-columns: 58px 1fr 46px; align-items: center; gap: 12px; margin-bottom: 7px; }
.reach-lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: #94A3B8; }
.reach-lbl-us { color: #22D3EE; }
.reach-track { position: relative; display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.reach-them, .reach-us { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 5px; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reach-them { background: #475569; }
.reach-us { background: linear-gradient(90deg, #0891B2, #22D3EE); }
.reach-n { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-align: right; }
.reach-them-n { color: #94A3B8; }
.reach-us-n { color: #22D3EE; }
.reach-n i { font-style: normal; opacity: 0.55; }
.reach-detail { font-size: 0.875rem; color: #CBD5E1; margin-top: 0.625rem; line-height: 1.55; }
@media (max-width: 719px) { .reach-chain { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .reach-them, .reach-us { transition: none; } }

/* Raster drop-in for the industry creatives. A file at
   /assets/creative/<slug>.jpg covers the vector; absent, the <img> removes
   itself on error and the vector shows. See scratchpad/README-creative.md. */
.brandcard { position: relative; }
.brandcard .bc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Accent tiers for sub-headings and named points, following fractal.ai's
   two-tone system: a warm tier for the sub-heading that labels a block, a cool
   tier for the named term inside a point. Their body stays neutral; only these
   two roles carry colour.

   Band-aware, because a colour that clears 4.5:1 on white is nowhere near it
   on navy. Specificity is deliberately (0,2,0) so it beats `.white-section h3`
   (0,1,1), which otherwise repaints every heading navy whatever utility class
   it carries — the bug that had "The Eight Marketing Pillars" rendering navy
   despite being marked teal. */
.t-amber { color: #FBBF24; }
.t-azure { color: #22D3EE; }
.white-section .t-amber { color: #B45309; }
.white-section .t-azure { color: #0E7490; }