@charset "UTF-8";

/* Fonts — loaded here so they work even if JS is blocked or slow */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ═══════════════════════════════════════════════════════
   OUTBOX ORIGIN — styles.css
   Modern SaaS UI Kit — Indigo/Cyan, Inter, light surfaces
════════════════════════════════════════════════════════ */

/* CUSTOM PROPERTIES */
:root {
  --primary:       #4F46E5;
  --primary-dark:  #3730A3;
  --primary-hover: #818CF8;
  --accent:        #06B6D4;
  --accent-soft:   #67E8F9;
  --bg:            #F7F8FB;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F3F4F6;
  --border:        #E5E7EB;
  --text:          #111827;
  --text-muted:    #374151;
  --text-dim:      #6B7280;
  --success:       #10B981;
  --warning:       #F59E0B;
  --error:         #EF4444;
  --shadow-light:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-medium: 0 4px 16px rgba(0,0,0,0.08);
  /* Site-wide graph-paper grid — every page wraps its content in
     .v2-main, which repaints an opaque --bg over body, so the grid is
     defined once here and applied on that wrapper (and the other
     full-bleed section backgrounds) rather than on body alone. */
  --grid-bg: linear-gradient(to right, rgba(17, 24, 39, 0.07) 1px, transparent 1px),
             linear-gradient(to bottom, rgba(17, 24, 39, 0.07) 1px, transparent 1px);
  --grid-size: 40px 40px;
  --font-heading:  'Inter', sans-serif;
  /* Outbox Origin brand palette (Oct 2026).
     Core brand colours — Primary Blue is the logo / key brand colour,
     --primary stays the CTA / interactive indigo. */
  --brand-blue:    #0E34E4;
  /* Solution accent colours — base, mid, light. Use for icons,
     highlights, illustrations and category tags. */
  --acc-brand:             #0D1B5E;
  --acc-brand-mid:         #2A3F98;
  --acc-brand-light:       #AFC1FF;
  --acc-ux-ui:             #00B4D8;
  --acc-ux-ui-mid:         #48D1E3;
  --acc-ux-ui-light:       #BEEEF5;
  /* Cyan is too light for small text on white (≈2.3:1), so text uses
     a darkened shade of it; fills and icons use the base cyan. */
  --acc-ux-ui-text:        #00809B;
  --acc-performance:       #7C3AED;
  --acc-performance-mid:   #A78BFA;
  --acc-performance-light: #E9D5FF;
  --acc-data:              #0284C7;
  --acc-data-mid:          #38BDF8;
  --acc-data-light:        #BAE6FD;
  --acc-multimedia:        #A855F7;
  --acc-multimedia-mid:    #D8B4FE;
  --acc-multimedia-light:  #F3E8FF;
}

/* NAV ROOT — no stickiness; only the pill is fixed */
#nav-root {
  position: relative;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  background-image: var(--grid-bg);
  background-size: var(--grid-size);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}
/* Headings and body text site-wide use Inter. The class list covers title
   elements that are styled as headings but aren't h1–h6 tags. */
h1, h2, h3, h4, h5, h6,
.info-card-title, .article-cta-title, .side-block-title,
.side-service-title, .side-insight-title, .related-card-title,
.article-card-title-v2, .bp-feature-title, .bp-insight-title,
.bp-cta-title, .bp-ai-title, .cv2-together-title, .cv2-step-title,
.cv2-map-card-title, .cv2-cta-title, .nav-insight-title,
.glossary-popular-title {
  font-family: var(--font-heading) !important;
}
::selection { background: var(--primary); color: #fff; }

/* CUSTOM CURSOR — blue dot with a white ring site-wide; over clickable
   elements it flips to a larger white dot with a blue ring. SVG data URIs
   keep it lag-free (no JS). Hotspot sits at the dot's centre. Text fields
   keep the native I-beam so typing and selecting stay precise. */
:root {
  --cursor-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='%230E34E4' stroke='%23ffffff' stroke-width='2.5'/%3E%3C/svg%3E") 10 10, auto;
  --cursor-dot-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='11' fill='%23ffffff' stroke='%230E34E4' stroke-width='3'/%3E%3Ccircle cx='15' cy='15' r='3.5' fill='%230E34E4'/%3E%3C/svg%3E") 15 15, pointer;
}
html, body { cursor: var(--cursor-dot); }
a, button, summary, label[for], select,
[role="button"], [onclick], .btn,
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
  cursor: var(--cursor-dot-hover) !important;
}
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea, [contenteditable="true"] {
  cursor: text !important;
}
@media (pointer: coarse) {
  html, body, a, button { cursor: auto !important; }
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { cursor: var(--cursor-dot-hover); background: none; border: none; font-family: inherit; }

/* ─────────────────────────────────
   NAVIGATION
───────────────────────────────── */
.nav-header {
  background: transparent;
  padding: 10px 14px;
  min-height: 78px;
}

.nav-inner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1280px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-medium);
  border-radius: 14px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}

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

.nav-desktop {
  display: none;
  align-items: center;
  gap: 4px;
}

.nav-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-radius: 8px;
  transition: opacity 0.15s;
  display: inline-block;
}
.nav-btn:hover { opacity: 0.6; }

.nav-dropdown-wrap { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  padding-top: 8px;
  left: 0;
  min-width: 210px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-medium);
  padding: 8px 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}
.nav-dropdown-wrap.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: opacity 0.15s;
}
.nav-dropdown a:hover { opacity: 0.6; }

/* Sub-nav bar (Solutions) — active tab gets a solid fill, full-bleed
   solid strip drops below with a single row of flat links */
.nav-dropdown-wrap:hover .nav-btn,
.nav-dropdown-wrap.is-open .nav-btn{
  background: var(--primary);
  color: #fff;
  opacity: 1;
}
.nav-dropdown.nav-subbar{
  position: fixed;
  top: 58px;
  left: 0;
  width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: none;
  border-radius: 0 0 14px 14px;
  box-shadow: var(--shadow-medium);
  padding: 18px 6vw;
}
.nav-subbar-row{ display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.nav-subbar-row a{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Flyout dropdown (Solutions / Work / Approach / Resources) — a full-
   width strip below the whole nav bar (like the old .nav-subbar), with
   a centered menu box inside it: a vertical sidebar of pillar/vertical/
   item names on the left, and a panel of services + related insights
   that swaps based on which sidebar item is hovered or focused. */
.nav-dropdown.nav-flyout{
  position: fixed;
  top: 58px;
  left: 0;
  right: auto;
  width: 100%;
  min-width: 0;
  padding: 8px 0 0;
  display: flex;
  justify-content: center;
  /* this element is just a full-width positioning strip — .nav-flyout-inner
     below is the only thing that should look like a visible box. Note:
     no `transform` here — .nav-dropdown-wrap.is-open .nav-dropdown already
     animates this element's `transform` (translateY) for the open/close
     fade, and a second transform declaration would just replace it. */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* All four flyouts (Solutions/Work/Approach/Resources) go edge-to-edge
   with the viewport — square top corners since they sit flush against
   the screen edges — for a consistent full-width mega menu look. */
.nav-flyout-inner{ width: 100%; max-width: none; border-radius: 0 0 14px 14px; }
.nav-flyout-inner{
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-medium);
  overflow: hidden;
}
.nav-flyout-sidebar{
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 10px;
}
.nav-flyout-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.nav-flyout-item:hover,
.nav-flyout-item.is-active{
  background: var(--bg-card-hover);
  color: var(--primary);
}
.nav-flyout-panels{ flex: 1; min-width: 0; padding: 16px 20px; }
.nav-flyout-panel{
  display: none;
  align-items: flex-start;
  gap: 24px;
}
.nav-flyout-panel.is-active{ display: flex; }
.nav-flyout-services{
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 20px;
}
.nav-flyout-service{
  display: block;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
}
.nav-flyout-service:hover{ color: var(--text); }

/* Related-insights column, shown alongside services (Solutions/Work)
   or on its own (Approach/Resources) */
.nav-flyout-insights{
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-flyout-panel .nav-flyout-services + .nav-flyout-insights{
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.nav-insight-card{ display: block; border-radius: 10px; overflow: hidden; }
.nav-insight-thumb{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: 74px;
  padding: 8px;
  border-radius: 10px;
}
.nav-insight-tag{
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  padding: 3px 7px;
  border-radius: 4px;
}
.nav-insight-title{
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.nav-insight-card:hover .nav-insight-title{ color: var(--primary); }
.nav-megamenu-badge{
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--acc-data);
  color: #fff;
  vertical-align: middle;
}

/* ─────────────────────────────────
   PILLAR ACCENT SYSTEM (Solutions)
   Section 2 of the Aug 2026 dev handoff doc — 5 pillar accent colours,
   applied via a body-level class so hero/CTA/breadcrumb/card styles below
   can read var(--pillar-accent) without any per-page inline colour math.
───────────────────────────────── */
.pillar-brand  { --pillar-accent: var(--acc-brand);       --pillar-text: #FFFFFF; }
.pillar-ux-ui  { --pillar-accent: var(--acc-ux-ui);       --pillar-text: #111827; }
.pillar-growth { --pillar-accent: var(--acc-performance); --pillar-text: #FFFFFF; }
.pillar-data   { --pillar-accent: var(--acc-data);        --pillar-text: #FFFFFF; }
.pillar-media  { --pillar-accent: var(--acc-multimedia);  --pillar-text: #FFFFFF; }

.bp-crumb-active.pillar-accent{ color: var(--pillar-accent, var(--primary)) !important; }
.bp-hero.pillar-accent-rule{ border-left: 6px solid var(--pillar-accent, var(--primary)); padding-left: 24px; }
.btn-pillar{ background: var(--pillar-accent, var(--primary)); color: var(--pillar-text, #FFFFFF); }
.btn-pillar:hover{ opacity: .88; }

/* Section 3 of Decision 3 — Launching Soon (Data & Analytics) waitlist
   CTA unit: pillar accent at 20% opacity rather than full strength */
.waitlist-cta{
  background: color-mix(in srgb, var(--pillar-accent, var(--primary)) 20%, transparent);
  border: 1px solid var(--pillar-accent, var(--primary));
  border-radius: 16px;
  padding: 32px;
  margin: 32px 0;
}
.waitlist-cta h3{ margin-bottom: 8px; }
.waitlist-cta p{ color: var(--text-dim); margin-bottom: 20px; }

/* Scaffolding note shown on stub pages awaiting their approved content
   file (see Section 10 of the dev handoff doc) — remove once populated */
.bp-placeholder-note{
  margin-top: 28px;
  padding: 16px 20px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.nav-cta-btn {
  display: none;
  align-items: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  transition: opacity 0.15s, transform 0.2s, box-shadow 0.2s;
}
.nav-cta-btn:hover { opacity: 0.9; transform: scale(1.02); box-shadow: var(--shadow-light); }

.nav-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1280px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: var(--shadow-medium);
  padding: 8px 20px 20px;
  border-radius: 0 0 14px 14px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 16px 0 4px;
}
.mobile-nav a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-nav-subsection{
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  padding: 10px 0 2px;
}
.mobile-nav a.mobile-nav-sublink{
  padding: 7px 0 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  border-bottom: none;
}
.mobile-nav-cta {
  display: block;
  margin-top: 16px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--primary);
  color: #fff !important;
  text-align: center;
  border-bottom: none !important;
}

/* Logo image */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-wordmark {
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
}
.nav-wordmark-dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  background: var(--primary);
  border-radius: 2px;
  margin: 0 0.14em -0.03em;
}

/* Star between logo and links */
.nav-star {
  font-size: 16px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 6px;
}

/* ─────────────────────────────────
   FOOTER — built from the site's own
   design tokens (blue grid canvas +
   dark rounded card, same language as
   .v2-dark / .v2-pillars)
───────────────────────────────── */
footer.outbox-footer{
  background-color: var(--bg);
  background-image: var(--grid-bg);
  background-size: var(--grid-size);
  padding-top: 16px;
}
.ofoot-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  margin: 0 16px 16px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

/* Masthead: wordmark + CTA */
.ofoot-mast{
  padding: 64px 40px 40px;
  border-bottom: 1px solid var(--border);
}
.ofoot-logo{
  width: clamp(220px, 26vw, 440px);
  height: auto;
  display: block;
}
.ofoot-mast-top{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
}
.ofoot-tagline-big{
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
  margin: 0 0 6px;
}
.ofoot-cta-row{ margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.ofoot-btn-ghost{
  display: inline-flex; align-items: center;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px; font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.ofoot-btn-ghost:hover{ border-color: var(--primary); background: var(--bg-card-hover); }

/* Departures: the 3 sister products */
.ofoot-departures{
  padding: 40px 40px;
  border-bottom: 1px solid var(--border);
}
.ofoot-departures-head{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.ofoot-departures-note{ font-size: 13px; color: var(--text-dim); }

.ofoot-ticket-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ofoot-ticket{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ofoot-ticket:hover{ border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-light); }
.ofoot-ticket-row{ display: flex; justify-content: space-between; align-items: flex-start; }
.ofoot-ticket-code{
  font-size: 12px; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.ofoot-ticket-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.ofoot-ticket-name{ font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.ofoot-ticket-desc{ font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.ofoot-ticket-perf{
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.ofoot-ticket-link{
  font-size: 14px; font-weight: 600; color: var(--primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.ofoot-ticket-link svg{ width: 14px; height: 14px; transition: transform 0.15s; }
.ofoot-ticket-link:hover svg{ transform: translate(2px,-2px); }
.ofoot-ticket-status{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }

/* Link columns */
.ofoot-links{
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  border-bottom: 1px solid var(--border);
}
.ofoot-col h4{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.ofoot-col ul{ display: flex; flex-direction: column; gap: 12px; }
.ofoot-col a{
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.ofoot-col a:hover{ color: var(--text); }
.ofoot-col a.btn-blue, .ofoot-col a.btn-blue:hover{ color: #fff; }
.ofoot-col-cta p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Strategic partners */
.ofoot-partners{ padding: 40px 40px 44px; border-bottom: 1px solid var(--border); }
.ofoot-eyebrow{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.ofoot-partner-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.ofoot-partner-cell{
  background: var(--bg-card);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 20px;
  transition: background 0.2s;
}
.ofoot-partner-cell:hover{ background: var(--bg-card-hover); }
.ofoot-partner-cell .mark{ font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.ofoot-partner-cell .sub{ display: block; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; text-align: center; }

/* Strategic partners — single-row horizontal marquee (homepage) */
.partner-marquee{
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.partner-marquee-track{
  display: flex;
  flex-direction: row;
  width: max-content;
  animation: partner-marquee-scroll 24s linear infinite;
}
.partner-marquee:hover .partner-marquee-track{ animation-play-state: paused; }
.partner-marquee-item{
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 160px;
  padding: 22px 28px;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.partner-marquee-item:hover{ background: var(--bg-card-hover); }
.partner-marquee-item .mark{ font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.partner-marquee-item .sub{ font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
@keyframes partner-marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Bottom bar */
.ofoot-bottom{
  padding: 22px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim);
}
.ofoot-bottom a{ color: inherit; }
.ofoot-bottom-links{ display: flex; gap: 20px; flex-wrap: wrap; }
.ofoot-bottom-links a{ text-decoration: none; transition: color 0.2s; }
.ofoot-bottom-links a:hover{ color: var(--text); }
.ofoot-made{ color: var(--text-dim); }

@media (max-width: 980px){
  .ofoot-links{ grid-template-columns: repeat(3, 1fr); }
  .ofoot-partner-grid{ grid-template-columns: repeat(3, 1fr); }
  .ofoot-ticket-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .ofoot-mast-top{ flex-direction: column; align-items: flex-start; }
  .ofoot-tagline-big{ text-align: left; }
  .ofoot-links{ grid-template-columns: 1fr 1fr; padding: 40px 20px; }
  .ofoot-mast{ padding: 40px 20px 32px; }
  .ofoot-departures{ padding: 32px 20px; }
  .ofoot-partners{ padding: 32px 20px 36px; }
  .ofoot-bottom{ padding: 20px; }
  .ofoot-partner-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────
   SHARED COMPONENTS
───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  cursor: var(--cursor-dot-hover);
  transition: opacity 0.15s, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-blue {
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border: none;
}
.btn-blue:hover { opacity: 0.95; transform: scale(1.02); box-shadow: var(--shadow-light); }
.btn-blue-lg { padding: 16px 32px; }
.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 12px 20px;
}
.btn-outline:hover { color: var(--text); transform: scale(1.02); box-shadow: var(--shadow-light); }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.dot-md   { width: 6px; height: 6px; }
.dot-lg   { width: 8px; height: 8px; }
.dot-hover { background: var(--primary-hover); }

/* Shared "light shadow" for all card-style surfaces site-wide */
.solution-card, .audience-card, .insights-header-card, .insights-type-card,
.cluster-card, .cluster-full-card, .work-card, .article-card, .related-card,
.service-audience-note, .service-link-card, .info-card, .side-block,
.glossary-card, .about-stats, .legal-contact-box, .form-input, .form-textarea,
.gd-example-card {
  box-shadow: var(--shadow-light);
}

/* ─────────────────────────────────
   HOME — HERO
───────────────────────────────── */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}
.hero-inner { max-width: 896px; }
.hero-logo { margin-bottom: 40px; }
.hero-logo img { width: 280px; height: auto; }
.hero h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.hero h1 .blue { color: var(--primary); }
.hero-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: 40px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ─────────────────────────────────
   HOME — SECTIONS
───────────────────────────────── */
.home-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.home-section-last { padding-bottom: 96px; }
.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 32px;
}

/* Solutions Grid */
.solutions-grid { display: grid; gap: 20px; }
.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.solution-card-header { margin-bottom: 16px; }
.solution-card-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  transition: opacity 0.15s;
  display: block;
}
.solution-card-name:hover { opacity: 0.8; }
.solution-card-href { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.card-divider-primary { border: none; border-top: 1px solid var(--primary); margin: 0 0 16px; }
.solution-services { display: flex; flex-direction: column; gap: 10px; }
.solution-service { display: flex; align-items: center; gap: 10px; }
.solution-service a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.solution-service a:hover { color: var(--text); }

/* Audiences Grid */
.audiences-grid { display: grid; gap: 20px; }
.audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.audience-card-name {
  font-weight: 600;
  font-size: 16px;
  transition: opacity 0.15s;
  display: block;
}
.audience-card-name:hover { opacity: 0.8; }
.audience-card-href { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.audience-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 12px 0 16px;
}
.audience-services { display: flex; flex-direction: column; gap: 10px; }
.audience-service { display: flex; align-items: center; justify-content: space-between; }
.audience-service-left { display: flex; align-items: center; gap: 10px; }
.audience-service-left a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.audience-service-left a:hover { color: var(--text); }
.audience-service-href { font-size: 12px; color: var(--text-dim); flex-shrink: 0; margin-left: 8px; }

/* Insights Box */
.insights-box {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 96px;
}
.insights-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
}
.insights-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.insights-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.insights-subtitle { font-size: 14px; color: var(--text-muted); }
.insights-count-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  text-align: right;
}
.insights-count-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-align: right;
}
.insights-types { display: grid; gap: 16px; }
.insights-type-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.insights-type-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.insights-type-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.insights-clusters { display: grid; gap: 20px; }
.cluster-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}
.cluster-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cluster-card-name {
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.cluster-card-name:hover { opacity: 0.8; }
.cluster-card-count { font-size: 12px; font-weight: 600; color: var(--primary); }
.cluster-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 12px; }
.cluster-articles { display: flex; flex-direction: column; gap: 10px; }
.cluster-article { font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.cluster-more {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-hover);
  transition: opacity 0.15s;
}
.cluster-more:hover { opacity: 0.8; }

/* CTA Banner */
.cta-banner { border-top: 1px solid var(--border); }
.cta-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}
.cta-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 16px;
}
.cta-heading { font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.cta-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 512px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* ─────────────────────────────────
   ABOUT PAGE
───────────────────────────────── */
.about-page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 64px 24px;
}
.page-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 24px;
}
.about-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 48px;
}
.about-heading .blue { color: var(--primary); }
.about-body { display: grid; gap: 48px; margin-bottom: 64px; }
.about-body p { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 64px;
  text-align: center;
}
.about-stat-num {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  line-height: 1;
}
.about-stat-label { font-size: 14px; color: var(--text-muted); }
.about-belief {
  background: var(--primary);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
  color: #fff;
}
.about-belief-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: 16px;
}
.about-belief-quote { font-size: 24px; font-weight: 700; line-height: 1.3; }

/* ─────────────────────────────────
   WORK PAGE
───────────────────────────────── */
.work-page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 64px 24px;
}
.page-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}
.page-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 48px;
}
.work-grid { display: grid; gap: 20px; margin-bottom: 64px; }
.work-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}
a.work-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.work-card-category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 8px;
}
.work-card-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.work-card-desc { font-size: 14px; line-height: 1.65; color: var(--text-muted); }

/* ─────────────────────────────────
   CONTACT PAGE
───────────────────────────────── */
.contact-page {
  max-width: 672px;
  margin: 0 auto;
  padding: 64px 24px;
}
.form-space { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; gap: 20px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-input, .form-textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.form-textarea { resize: none; }
.form-submit {
  width: 100%;
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: var(--cursor-dot-hover);
  font-family: inherit;
  transition: opacity 0.15s, transform 0.2s, box-shadow 0.2s;
}
.form-submit:hover { opacity: 0.95; transform: scale(1.01); box-shadow: var(--shadow-light); }

/* ─────────────────────────────────
   CONTACT PAGE V2 — split hero + form,
   "let's work together" band, get-in-touch + map, CTA banner
───────────────────────────────── */
.cv2-page { max-width: 1280px; margin: 0 auto; padding: 56px 40px 64px; }

.cv2-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 40px; }
.cv2-crumb a { transition: color 0.15s; }
.cv2-crumb a:hover { color: var(--text); }
.cv2-crumb span[aria-current] { color: var(--text-muted); font-weight: 600; }

.cv2-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }

.cv2-h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; }
.cv2-lead { font-size: 14px; line-height: 1.65; color: var(--text-muted); max-width: 460px; margin-bottom: 40px; }

.cv2-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.cv2-step { display: flex; align-items: flex-start; gap: 14px; }
.cv2-step-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(79,70,229,.08); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv2-step-icon svg { width: 18px; height: 18px; }
.cv2-step-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.cv2-step-desc { font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.cv2-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-light); }
.cv2-form-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 24px; }
.cv2-form { display: flex; flex-direction: column; gap: 20px; }
.cv2-row-2 { grid-template-columns: 1fr; }
.cv2-req { color: var(--error); }
.cv2-select { appearance: none; cursor: var(--cursor-dot-hover); }
.cv2-form-footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.cv2-submit { width: auto; padding: 14px 28px; flex-shrink: 0; }
.cv2-privacy { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.cv2-privacy svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.cv2-form-error { margin: 4px 0 0; padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); font-size: 13px; line-height: 1.5; }
.cv2-form-error[hidden] { display: none; }

.cv2-together { background: var(--bg-card-hover); padding: 72px 0; }
.cv2-together-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; text-align: center; }
.cv2-together-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--text); margin-bottom: 12px; }
.cv2-together-sub { font-size: 14px; line-height: 1.65; color: var(--text-muted); max-width: 560px; margin: 0 auto 48px; }
.cv2-together-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cv2-together-card { padding: 0 24px; border-left: 1px solid var(--border); }
.cv2-together-card:first-child { border-left: none; }
.cv2-together-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.cv2-together-icon svg { width: 20px; height: 20px; }
.cv2-together-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cv2-together-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.cv2-touch-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; margin-bottom: 56px; }
.cv2-touch-h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--text); margin-bottom: 12px; }
.cv2-touch-sub { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin-bottom: 32px; }
.cv2-touch-list { display: flex; flex-direction: column; gap: 24px; }
.cv2-touch-list li { display: flex; align-items: flex-start; gap: 14px; }
.cv2-touch-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(79,70,229,.08); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv2-touch-icon svg { width: 16px; height: 16px; }
.cv2-touch-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 4px; }
.cv2-touch-value { font-size: 14px; line-height: 1.55; color: var(--text); font-weight: 500; }
a.cv2-touch-value:hover { color: var(--primary); }

.cv2-map { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); min-height: 340px; background: var(--bg-card-hover); }
.cv2-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.cv2-map-card { position: absolute; right: 20px; bottom: 20px; max-width: 260px; background: var(--bg-card); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-medium); }
.cv2-map-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cv2-map-card-desc { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-bottom: 10px; }
.cv2-map-card-link { font-size: 13px; font-weight: 600; color: var(--primary); }
.cv2-map-card-link:hover { color: var(--primary-dark); }

.cv2-cta-banner { display: flex; align-items: center; gap: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; flex-wrap: wrap; }
.cv2-cta-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-card-hover); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv2-cta-icon svg { width: 22px; height: 22px; }
.cv2-cta-text { flex: 1; min-width: 240px; }
.cv2-cta-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.cv2-cta-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.cv2-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (min-width: 640px) { .cv2-row-2 { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 900px) {
  .cv2-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cv2-lead { max-width: none; }
  .cv2-touch-grid { grid-template-columns: 1fr; gap: 32px; }
  .cv2-map, .cv2-map iframe { min-height: 280px; }
}

@media (max-width: 767px) {
  .cv2-page { padding: 40px 20px 48px; }
  .cv2-together { padding: 56px 0; }
  .cv2-together-inner { padding: 0 20px; }
  .cv2-together-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .cv2-together-card { border-left: none; padding: 0; }
  .cv2-cta-banner { text-align: center; justify-content: center; }
  .cv2-cta-actions { justify-content: center; width: 100%; }
}

@media (max-width: 480px) {
  .cv2-steps { grid-template-columns: 1fr; }
  .cv2-together-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────
   INSIGHTS HUB PAGE
───────────────────────────────── */
.insights-page {
  max-width: 1152px;
  margin: 0 auto;
  padding: 64px 24px;
}
.clusters-list { display: flex; flex-direction: column; gap: 20px; }
.cluster-full-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.cluster-full-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cluster-full-name {
  font-weight: 600;
  font-size: 16px;
  transition: opacity 0.15s;
}
.cluster-full-name:hover { opacity: 0.8; }
.cluster-full-count { font-size: 14px; font-weight: 600; color: var(--primary); }
.cluster-full-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; }
.cluster-full-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 16px; }
.cluster-samples { display: grid; gap: 8px; }
.cluster-sample-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
}
.cluster-sample-item .dot { margin-top: 3px; }
.cluster-sample-text { font-size: 14px; line-height: 1.6; color: var(--text-muted); transition: color 0.15s; }
a.cluster-sample-item { transition: background 0.15s; }
a.cluster-sample-item:hover { background: rgba(0,0,0,0.06); }
a.cluster-sample-item:hover .cluster-sample-text { color: var(--text); }
.cluster-more-count { margin-top: 12px; font-size: 12px; color: var(--text-dim); }

/* ─────────────────────────────────
   SERVICE PAGE TEMPLATE
───────────────────────────────── */
.service-page {
  max-width: 896px;
  margin: 0 auto;
  padding: 64px 24px;
}
.service-back { margin-bottom: 24px; }
.service-back a {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  transition: color 0.15s;
}
.service-back a:hover { color: var(--text); }
.service-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-hover);
  margin-bottom: 16px;
}
.service-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}
.service-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 40px;
}
.service-audience-note {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}
.service-divider {
  border: none;
  border-top: 1px solid var(--primary);
  margin-bottom: 40px;
}
.service-links { display: grid; gap: 16px; }
.service-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background 0.15s;
}
.service-link-card:hover { background: var(--bg-card-hover); }
.service-link-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s;
}
.service-link-card:hover .service-link-text { color: var(--text); }
.service-cta { margin-top: 64px; text-align: center; }

/* ─────────────────────────────────
   INSIGHTS CATEGORY PAGE
───────────────────────────────── */
.insights-cat-page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 64px 24px;
}
.insights-cat-back { margin-bottom: 16px; }
.insights-cat-back a {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  transition: color 0.15s;
}
.insights-cat-back a:hover { color: var(--text); }
.insights-cat-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.insights-cat-heading-row h1 { font-size: 30px; font-weight: 700; }
.insights-cat-count { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--primary); }
.insights-cat-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
.insights-cat-divider { border: none; border-top: 1px solid var(--primary); margin-bottom: 32px; }
.articles-grid { display: grid; gap: 16px; }
.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.article-title { font-size: 14px; font-weight: 500; line-height: 1.45; margin-bottom: 12px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 500;
}
.tag-explainer  { background: #3b7fe822; color: #3b7fe8; border: 1px solid #3b7fe844; }
.tag-seo        { background: #2dce8922; color: #2dce89; border: 1px solid #2dce8944; }
.tag-geo        { background: #8b5cf622; color: #8b5cf6; border: 1px solid #8b5cf644; }
.tag-guide      { background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b44; }
.tag-case-study { background: #ec489922; color: #ec4899; border: 1px solid #ec489944; }
.articles-more  { margin-top: 24px; font-size: 12px; color: var(--text-muted); }

/* ─────────────────────────────────
   PLACEHOLDER PAGES
───────────────────────────────── */
.placeholder-page {
  max-width: 896px;
  margin: 0 auto;
  padding: 64px 24px;
}
.placeholder-center {
  text-align: center;
  padding: 64px 0;
  color: var(--text-muted);
}
.placeholder-center p { font-size: 14px; margin-bottom: 16px; }
.placeholder-center a { font-size: 14px; font-weight: 600; color: var(--primary); }

/* ─────────────────────────────────
   RESPONSIVE
───────────────────────────────── */
@media (min-width: 768px) {
  .nav-desktop  { display: flex; }
  .nav-cta-btn  { display: flex; }
  .nav-burger   { display: none; }

  .hero h1      { font-size: 60px; }

  .solutions-grid   { grid-template-columns: repeat(3, 1fr); }
  .audiences-grid   { grid-template-columns: repeat(2, 1fr); }
  .insights-types   { grid-template-columns: repeat(3, 1fr); }
  .insights-clusters { grid-template-columns: repeat(3, 1fr); }
  .work-grid        { grid-template-columns: repeat(2, 1fr); }
  .work-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .about-body       { grid-template-columns: repeat(2, 1fr); }
  .articles-grid    { grid-template-columns: repeat(2, 1fr); }
  .cluster-samples  { grid-template-columns: repeat(2, 1fr); }
  .service-links    { grid-template-columns: repeat(2, 1fr); }

  .form-row { grid-template-columns: repeat(2, 1fr); }

  .service-title  { font-size: 48px; }
  .page-title     { font-size: 48px; }
  .about-heading  { font-size: 60px; }
  .cta-heading    { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════
   V2 HOME PAGE SECTIONS
════════════════════════════════════════════════════════ */

/* Homepage main */
.v2-main {
  background-color: var(--bg);
  background-image: var(--grid-bg);
  background-size: var(--grid-size);
  overflow: hidden;
}

/* V2 page wrapper */
.v2-page {
  background-color: var(--bg);
  background-image: var(--grid-bg);
  background-size: var(--grid-size);
}

/* NAV — text logo (legacy, kept for other pages) */
.nav-logo-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
}

/* ─────────────────────────────────
   V2 HERO
───────────────────────────────── */
.v2-hero {
  background: transparent;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding-bottom: 32px;
}

.v2-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.v2-hero-text {
  flex: 1;
  min-width: 0;
}

.v2-hero-h1 {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 20px;
}

.v2-hero-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.v2-hero-visual {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.v2-hero-circle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Hero image */
.v2-hero-img {
  width: 420px;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ─────────────────────────────────
   CSS 3D RUBIK'S CUBE
───────────────────────────────── */
.v2-cube-wrap {
  perspective: 700px;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v2-cube {
  width: 160px;
  height: 160px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(38deg);
  animation: cube-float 5s ease-in-out infinite;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.45));
}

@keyframes cube-float {
  0%, 100% { transform: rotateX(-22deg) rotateY(38deg) translateY(0); }
  50%       { transform: rotateX(-22deg) rotateY(38deg) translateY(-14px); }
}

.v2-cube-face {
  position: absolute;
  width: 160px;
  height: 160px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #111;
  padding: 4px;
  border: 1px solid rgba(0,0,0,0.6);
}

.v2-cube-top   { transform: rotateX(90deg)  translateZ(80px); }
.v2-cube-front { transform:                 translateZ(80px); }
.v2-cube-right { transform: rotateY(90deg)  translateZ(80px); }

.v2-tile { border-radius: 3px; }

/* ─────────────────────────────────
   V2 DARK MANIFESTO
───────────────────────────────── */
.v2-dark {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  border-radius: 24px;
  margin: 0 16px 16px;
}

.v2-dark-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.v2-dark-left {
  flex: 0 0 46%;
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-height: 60vh;
}

.v2-dark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  z-index: 2;
}

.v2-blue-circle {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.85;
  top: 8%;
  left: 4%;
  z-index: 1;
}

.v2-collage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding-bottom: 0;
  z-index: 2;
}

.v2-collage-fig {
  border-radius: 8px 8px 0 0;
  background: #2a2a2a;
}

.v2-fig-a {
  width: 90px;
  height: 260px;
  background: linear-gradient(to top, #1e1e2e 0%, #2d2d42 100%);
  transform: translateY(10px);
}

.v2-fig-b {
  width: 100px;
  height: 300px;
  background: linear-gradient(to top, #1a1a2a 0%, #252535 100%);
}

.v2-fig-c {
  width: 88px;
  height: 260px;
  background: linear-gradient(to top, #1e1e2e 0%, #2d2d42 100%);
  transform: translateY(20px);
}

.v2-dark-right {
  flex: 1.1;
}

.v2-dark-h2 {
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 28px;
}

.v2-dark-p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-align: left;
}

/* ─────────────────────────────────
   V2 THREE PILLARS
───────────────────────────────── */
.v2-pillars {
  background-color: var(--bg);
  background-image: var(--grid-bg);
  background-size: var(--grid-size);
}

.v2-pillars-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px 120px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.v2-pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--shadow-light);
}

.v2-pillar-h {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.v2-pillar-p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  text-align: left;
}

/* ─────────────────────────────────
   V2 RESPONSIVE
───────────────────────────────── */
@media (min-width: 768px) {
  .v2-pillars-inner { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .v2-hero-inner    { flex-direction: column; padding: 60px 24px; }
  .v2-hero-visual   { display: none; }
  .v2-dark-inner    { flex-direction: column; padding: 60px 24px; }
  .v2-dark-left     { flex: 0 0 auto; width: 100%; min-height: 60vh; }
  .v2-pillars-inner { padding: 60px 24px; gap: 36px; }
}

/* ═══════════════════════════════════════════════════════
   V2 INNER PAGE LAYOUT
════════════════════════════════════════════════════════ */

/* Page header rendered on the blue grid */
.v2-inner-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 40px 48px;
}

.v2-inner-back {
  margin-bottom: 20px;
}
.v2-inner-back a {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  transition: color 0.15s;
}
.v2-inner-back a:hover { color: var(--text); }

.v2-inner-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 20px;
}

.v2-inner-h1 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.v2-inner-heading-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.v2-inner-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}

.v2-inner-lead {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 600px;
}

/* Content surface — a shade off the page background so nested white
   cards (which use --bg-card) read as elevated surfaces above it */
.v2-inner-card {
  background: var(--bg);
  border-radius: 24px;
  margin: 0 16px 16px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .v2-inner-hero { padding: 40px 24px 32px; }
  .v2-inner-card { margin: 0 8px 8px; border-radius: 16px; }
}

/* ═══════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE
════════════════════════════════════════════════════════ */

/* ── Tablet: 768px – 1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Nav */
  .nav-inner       { padding: 0 16px; }

  /* Hero */
  .v2-hero-inner   { padding: 60px 32px; gap: 24px; }
  .v2-hero-img     { width: 300px; }

  /* Dark section */
  .v2-dark-inner   { padding: 60px 32px; gap: 32px; }
  .v2-dark-left    { flex: 0 0 44%; min-height: 50vh; }

  /* Pillars */
  .v2-pillars-inner { padding: 60px 32px 80px; gap: 24px; }
  .v2-pillar        { padding: 28px 24px; }

  /* Inner pages */
  .v2-inner-hero   { padding: 48px 32px 36px; }
  .about-page, .work-page, .contact-page, .service-page,
  .insights-page, .insights-cat-page, .placeholder-page { padding: 48px 32px; }
}

/* ── Mobile: up to 767px ── */
@media (max-width: 767px) {
  /* Typography */
  .v2-dark-h2      { font-size: clamp(22px, 6vw, 32px); }
  .v2-inner-h1     { font-size: clamp(26px, 8vw, 40px); }
  .page-title      { font-size: 26px; }
  .service-title   { font-size: 26px; }
  .about-heading   { font-size: 32px; }

  /* Hero */
  .v2-hero         { min-height: 50vh; }
  .v2-hero-text    { text-align: left; }

  /* Dark section */
  .v2-dark         { margin: 0 8px 8px; }
  .v2-dark-left    { min-height: 45vh; }

  /* Pillars */
  .v2-pillar       { padding: 28px 24px; }

  /* Inner card padding */
  .about-page, .work-page, .contact-page, .service-page,
  .insights-page, .insights-cat-page, .placeholder-page { padding: 40px 20px; }

  /* Grids → single column on mobile */
  .work-grid       { grid-template-columns: 1fr; }
  .service-links   { grid-template-columns: 1fr; }
  .articles-grid   { grid-template-columns: 1fr; }
  .cluster-samples { grid-template-columns: 1fr; }
  .insights-types  { grid-template-columns: 1fr; }
  .about-body      { grid-template-columns: 1fr; gap: 20px; }

  /* About stats */
  .about-stats     { grid-template-columns: repeat(3, 1fr); padding: 20px 16px; gap: 12px; }
  .about-stat-num  { font-size: 36px; }

  /* Form */
  .form-row        { grid-template-columns: 1fr; }

  /* Insights header */
  .insights-header-top { flex-direction: column; gap: 12px; }
  .insights-count-num  { text-align: left; }
  .insights-count-label { text-align: left; }
}

/* ── Small mobile: up to 480px ── */
@media (max-width: 480px) {
  /* Nav pill */
  .nav-inner       { padding: 0 14px; height: 52px; }
  .nav-wordmark    { font-size: 16px; }
  .mobile-nav      { top: 72px; }

  /* Hero */
  .v2-hero-inner   { padding: 40px 16px; }
  .v2-hero         { min-height: 40vh; }

  /* Dark section */
  .v2-dark         { margin: 0 8px 8px; }
  .v2-dark-inner   { padding: 40px 16px; }
  .v2-dark-left    { min-height: 40vh; }
  .v2-blue-circle  { width: 120px; height: 120px; }

  /* Pillars */
  .v2-pillars-inner { padding: 40px 16px 60px; gap: 16px; }
  .v2-pillar        { padding: 24px 18px; }

  /* Inner page */
  .v2-inner-hero   { padding: 32px 16px 24px; }
  .v2-inner-card   { margin: 0 8px 8px; border-radius: 14px; }
  .about-page, .work-page, .contact-page, .service-page,
  .insights-page, .insights-cat-page, .placeholder-page { padding: 32px 16px; }

  /* About stats — stack on tiny screens */
  .about-stats     { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .about-stat-num  { font-size: 40px; }

  /* Cluster cards */
  .cluster-full-top { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Insights heading row */
  .v2-inner-heading-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════
   ARTICLE PAGE
════════════════════════════════════════════════════════ */

.article-page {
  max-width: 752px;
  margin: 0 auto;
  padding: 64px 24px 40px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

/* Prose body */
.article-body h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 40px 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.article-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 28px 0 10px;
}
.article-body p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
}
.article-body strong { color: var(--text); font-weight: 600; }
.article-callout {
  background: var(--bg);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 28px 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  font-style: italic;
}

/* Clickable article card */
a.article-card { display: block; transition: background 0.15s; }
a.article-card:hover { background: var(--bg-card-hover); }
a.article-card:hover .article-title { color: var(--text); }
.article-title { transition: color 0.15s; }

/* Related articles section */
.related-section {
  max-width: 752px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  border-top: 1px solid var(--border);
}
.related-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 8px;
}
.related-heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
}
.related-grid { display: grid; gap: 12px; }
@media (min-width: 768px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}
.related-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: block;
  transition: background 0.15s;
}
.related-card:hover { background: var(--bg-card-hover); }
.related-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 8px;
}
.related-card-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  transition: color 0.15s;
}
.related-card:hover .related-card-title { color: var(--text); }

@media (max-width: 767px) {
  .article-page     { padding: 40px 20px 32px; }
  .article-body h2  { font-size: 18px; }
  .related-section  { padding: 32px 20px 48px; }
}

/* ═══════════════════════════════════════════════════════
   ARTICLE LAYOUT + SIDEBAR
════════════════════════════════════════════════════════ */

.article-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 40px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px 48px;
  align-items: start;
}
.article-layout .article-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.side-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.side-block-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.side-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.side-cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 100px;
}

.side-service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}
.side-service-link:first-child { border-top: none; padding-top: 0; }
.side-service-link .side-arrow {
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}
.side-service-link:hover { color: var(--text); }
.side-service-link:hover .side-arrow { opacity: 1; }

.side-insight-link {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.side-insight-link:first-child { border-top: none; padding-top: 0; }
.side-insight-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.side-insight-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  transition: opacity 0.15s;
}
.side-insight-link:hover .side-insight-title { opacity: 0.7; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; padding: 56px 20px 32px; }
  .article-sidebar { position: static; }
}
@media (max-width: 767px) {
  .article-layout { padding: 40px 16px 24px; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════
   ARTICLE DETAIL — breadcrumb, hero, share, CTA, sidebar v2
════════════════════════════════════════════════════════ */

.article-crumb-wrap { max-width: 1120px; margin: 0 auto; padding: 20px 24px 0; }
.article-breadcrumb {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-dim);
}
.article-breadcrumb a { color: var(--text-dim); transition: color 0.15s; }
.article-breadcrumb a:hover { color: var(--text); }
/* No whitespace between .crumb-sep and the crumb it precedes in the markup —
   that glues them into one unbreakable unit, so a line wrap can only happen
   after a crumb's own text, never leaving a lone "›" orphaned at line end. */
.crumb-sep { color: var(--border); margin-right: 6px; }
.crumb-current { color: var(--text-muted); }

.article-hero-top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.article-hero-top-left { flex: 1 1 420px; min-width: 0; }
.article-hero-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.article-hero-h1 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}
.article-hero-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 24px;
  max-width: 480px;
}
.article-author-row { display: flex; align-items: center; gap: 12px; }
.article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.article-author-name { font-size: 13px; font-weight: 600; color: var(--text); }
.article-author-sub { font-size: 12px; color: var(--text-dim); }

.article-hero-img-wrap {
  flex: 1 1 460px;
  max-width: 520px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}
.article-hero-img { width: 100%; height: 100%; aspect-ratio: 16/9.2; object-fit: cover; display: block; }

.article-share-wrap {
  max-width: 1120px;
  margin: 28px auto 0;
  padding: 0 24px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.article-share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.article-share-icons { display: flex; gap: 8px; }
.share-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.share-icon:hover { color: var(--primary); border-color: var(--primary); }
.share-icon.share-copied { color: #059669; border-color: #059669; }

.article-cta-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 40px;
}
.article-cta-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.article-cta-copy { flex: 1 1 240px; }
.article-cta-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.article-cta-text { font-size: 14px; color: var(--text-dim); }
.article-cta-btn {
  flex-shrink: 0;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.article-cta-btn:hover { opacity: 0.85; }

.article-body blockquote p { margin: 0; font-size: 14px; line-height: 1.6; font-weight: 600; color: var(--text); font-style: italic; }
.article-body blockquote .quote-cite { margin-top: 8px; font-size: 13px; font-weight: 500; font-style: normal; color: var(--text-dim); }

.tag-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.side-cat-pill { border: 1px solid transparent; transition: transform 0.12s; }
.side-cat-pill:hover { transform: translateY(-1px); }

.side-service-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.side-service-card:first-of-type { border-top: none; padding-top: 0; }
.side-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.side-service-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.side-service-title { font-size: 13px; font-weight: 700; color: var(--text); }
.side-service-desc { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.side-service-link-label { font-size: 12px; font-weight: 600; color: var(--primary); margin-top: 2px; }
.side-service-link-label .side-arrow { display: inline-block; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.side-service-card:hover .side-arrow { opacity: 1; transform: translateX(2px); }

.side-view-all {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.side-view-all .side-arrow { display: inline-block; transition: transform 0.15s; }
.side-view-all:hover .side-arrow { transform: translateX(2px); }

.side-insight-link { display: flex; align-items: center; gap: 10px; }
.side-insight-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.side-insight-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.side-insight-date { font-size: 11px; color: var(--text-dim); }

/* References sidebar box */
.side-ref-list { display: flex; flex-direction: column; }
.side-ref-link {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  transition: color 0.15s;
}
.side-ref-link:first-child { border-top: none; padding-top: 0; }
.side-ref-link:hover { color: var(--primary); }
.side-ref-num {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 1px;
  transition: color 0.15s;
}
.side-ref-link:hover .side-ref-num { color: var(--primary); }

@media (max-width: 900px) {
  .article-hero-top { flex-direction: column; }
  .article-hero-img-wrap { max-width: 100%; width: 100%; }
}
@media (max-width: 640px) {
  .article-share-wrap { flex-wrap: wrap; }
  .article-cta-box { flex-direction: column; align-items: flex-start; }
  .article-cta-btn { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════
   INSIGHTS HUB v2
════════════════════════════════════════════════════════ */

.insights-hub-wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 64px 24px 56px;
}

.insights-hub-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.insights-hub-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 14px;
}

.insights-hub-title {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.insights-hub-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 20px;
}

.insights-type-row { display: flex; flex-wrap: wrap; gap: 8px; }

.insights-type-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.insights-hub-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  flex-shrink: 0;
}

.insights-stat-item { text-align: right; }

.insights-stat-num {
  font-size: 52px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.insights-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Cluster grid */
.insights-cluster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) { .insights-cluster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .insights-cluster-grid { grid-template-columns: repeat(3, 1fr); } }

.ins-cluster {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ins-cluster:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }

.ins-cluster-accent { height: 5px; flex-shrink: 0; }

.ins-cluster-inner {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ins-cluster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ins-cluster-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.ins-cluster-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.01em;
  display: block;
  transition: opacity 0.15s;
}
.ins-cluster-name:hover { opacity: 0.65; }

.ins-cluster-total {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

.ins-cluster-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.ins-articles-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  margin-bottom: 18px;
}

.ins-article-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
a.ins-article-row:hover { background: rgba(0,0,0,0.045); }

.ins-article-dot {
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ins-article-dot::before {
  content: '—';
  font-size: 9px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1;
}
.ins-article-live .ins-article-dot {
  background: rgba(79,70,229,0.12);
  border-color: var(--primary);
}
.ins-article-live .ins-article-dot::before {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

.ins-article-title {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  flex: 1;
  transition: color 0.15s;
}
a.ins-article-row:hover .ins-article-title { color: var(--text); }

.ins-article-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ins-badge-live { background: rgba(79,70,229,0.12); color: var(--primary); border: 1px solid rgba(79,70,229,0.4); }
.ins-badge-soon { border: 1px solid var(--border); color: var(--text-dim); }

.ins-cluster-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.ins-more-label { font-size: 11px; color: var(--text-dim); }

.ins-explore-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  transition: letter-spacing 0.2s;
}
.ins-explore-link:hover { letter-spacing: 0.06em; }

@media (max-width: 767px) {
  .insights-hub-intro { flex-direction: column; gap: 28px; }
  .insights-hub-stats { flex-direction: row; align-items: center; }
  .insights-stat-item { text-align: left; }
  .insights-hub-wrap { padding: 40px 20px 48px; }
}

/* ═══════════════════════════════════════════════════════
   CATEGORY PAGE ARTICLE CARDS v2
════════════════════════════════════════════════════════ */

.cat-brand     { --cat-color: var(--acc-brand); }
.cat-digital   { --cat-color: #2dce89; }
.cat-media     { --cat-color: var(--acc-multimedia); }
.cat-b2b       { --cat-color: #f59e0b; }
.cat-startups  { --cat-color: #ef4444; }
.cat-d2c       { --cat-color: #3b82f6; }
.cat-creators  { --cat-color: #ec4899; }
.cat-technical { --cat-color: #6366f1; }
.cat-marketing { --cat-color: #10b981; }
.cat-media-2   { --cat-color: #14b8a6; }

/* Glossary category colours — aligned with insights.html's taxonomy
   (Brand Strategies/UI-UX/Performance/Data/Multimedia), reusing the
   same darkened pillar-accent shades for text-contrast on white. */
.gcat-brand       { --cat-color: var(--acc-brand); }
.gcat-ux-ui       { --cat-color: var(--acc-ux-ui-text); }
.gcat-performance { --cat-color: var(--acc-performance); }
.gcat-data        { --cat-color: var(--acc-data); }
.gcat-multimedia  { --cat-color: var(--acc-multimedia); }

/* Category-specific card hover glow */
.cat-brand     a.article-card-v2:hover { border-color: rgba(13,27,94,0.5);   box-shadow: 0 10px 28px rgba(13,27,94,0.14); }
.cat-digital   a.article-card-v2:hover { border-color: rgba(45,206,137,0.5); box-shadow: 0 10px 28px rgba(45,206,137,0.12); }
.cat-media     a.article-card-v2:hover { border-color: rgba(168,85,247,0.5); box-shadow: 0 10px 28px rgba(168,85,247,0.12); }
.cat-b2b       a.article-card-v2:hover { border-color: rgba(245,158,11,0.5); box-shadow: 0 10px 28px rgba(245,158,11,0.12); }
.cat-startups  a.article-card-v2:hover { border-color: rgba(239,68,68,0.5);  box-shadow: 0 10px 28px rgba(239,68,68,0.12); }
.cat-d2c       a.article-card-v2:hover { border-color: rgba(59,130,246,0.5); box-shadow: 0 10px 28px rgba(59,130,246,0.12); }
.cat-creators  a.article-card-v2:hover { border-color: rgba(236,72,153,0.5); box-shadow: 0 10px 28px rgba(236,72,153,0.12); }
.cat-technical a.article-card-v2:hover { border-color: rgba(99,102,241,0.5); box-shadow: 0 10px 28px rgba(99,102,241,0.12); }
.cat-marketing a.article-card-v2:hover { border-color: rgba(16,185,129,0.5); box-shadow: 0 10px 28px rgba(16,185,129,0.12); }
.cat-media-2   a.article-card-v2:hover { border-color: rgba(20,184,166,0.5); box-shadow: 0 10px 28px rgba(20,184,166,0.12); }

.articles-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 32px;
}
@media (min-width: 640px) { .articles-grid-v2 { grid-template-columns: repeat(2, 1fr); } }

.article-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
a.article-card-v2 { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
a.article-card-v2:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); }

.article-card-bar {
  height: 5px;
  background: var(--cat-color, var(--primary));
  flex-shrink: 0;
}
.article-card-soon .article-card-bar { opacity: 0.2; }

.article-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-card-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cat-color, var(--primary));
}
.article-card-soon .article-card-type { color: var(--text-dim); }

.article-card-title-v2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  flex: 1;
  transition: opacity 0.15s;
}
a.article-card-v2:hover .article-card-title-v2 { opacity: 0.8; }
.article-card-soon .article-card-title-v2 { opacity: 0.45; }

.article-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.article-card-tags-row { display: flex; flex-wrap: wrap; gap: 4px; }

.article-read-arrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cat-color, var(--primary));
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
a.article-card-v2:hover .article-read-arrow { opacity: 1; }

.article-coming-soon {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  flex-shrink: 0;
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
}

/* ─────────────────────────────────
   GLOSSARY PAGE
───────────────────────────────── */
.glossary-page { padding: 40px; }

.glossary-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.glossary-search { flex: 1; min-width: 220px; }
.glossary-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.glossary-filter-btn {
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: var(--cursor-dot-hover);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.glossary-filter-btn:hover { border-color: var(--primary); color: var(--text); }
.glossary-filter-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.glossary-count {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  margin-left: auto;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.glossary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.glossary-card:hover {
  transform: translateY(-3px);
  border-color: var(--cat-color, var(--primary));
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
.glossary-card-term {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.glossary-card-def {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1;
}
.glossary-card-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cat-color, var(--primary));
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 100px;
}

.glossary-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
  color: var(--text-dim);
}

.glossary-popular {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.glossary-popular-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.glossary-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.glossary-chip {
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: var(--cursor-dot-hover);
  transition: border-color 0.15s, color 0.15s;
}
.glossary-chip:hover { border-color: var(--primary); color: var(--text); }

@media (max-width: 1023px) {
  .glossary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .glossary-page { padding: 24px 20px; }
  .glossary-grid { grid-template-columns: 1fr; }
  .glossary-count { margin-left: 0; width: 100%; }
}

/* ─────────────────────────────────
   GLOSSARY TERM DETAIL PAGE
───────────────────────────────── */
/* .cat-* custom colors only resolve inside .v2-inner-card; the eyebrow sits
   on the blue hero above it, so give it fixed, background-safe colors */
.v2-inner-eyebrow.gd-eyebrow.cat-brand    { color: var(--acc-brand); }
.v2-inner-eyebrow.gd-eyebrow.cat-digital  { color: #2dce89; }
.v2-inner-eyebrow.gd-eyebrow.cat-media    { color: var(--acc-multimedia); }
.v2-inner-eyebrow.gd-eyebrow.cat-b2b      { color: #f59e0b; }
.v2-inner-eyebrow.gd-eyebrow.cat-creators { color: #ec4899; }
.v2-inner-eyebrow.gd-eyebrow.cat-startups { color: #ef4444; }
.v2-inner-eyebrow.gd-eyebrow.cat-d2c      { color: #3b82f6; }

.gd-page { padding: 40px; }

.gd-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--border);
}

/* Two-column layout for the term body + sidebar (Categories/Related
   Services/More Terms), reusing .article-sidebar's own card styling. */
.gd-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px 48px;
  align-items: start;
}
.gd-layout .article-sidebar { padding-top: 4px; }
@media (max-width: 1023px) {
  .gd-layout { grid-template-columns: 1fr; }
  .gd-layout .article-sidebar { position: static; }
}

.gd-sections { display: flex; flex-direction: column; }
.gd-section {
  display: flex;
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.gd-section:last-child { border-bottom: none; padding-bottom: 0; }
.gd-section:first-child { padding-top: 0; }

.gd-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.gd-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.gd-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
}

.gd-example-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 640px;
}
.gd-example-brand {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.gd-example-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .gd-page { padding: 24px 20px; }
  .gd-example-card { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─────────────────────────────────
   SOLUTION DETAIL PAGE — What We Offer + Our Approach
   (extends .service-page: .service-back / .service-eyebrow / .service-title / .service-desc)
───────────────────────────────── */
.sol-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pillar-accent, var(--primary-hover));
  margin-bottom: 18px;
}
.sol-block { margin-bottom: 48px; }

/* Related Services strip (Section 5.1, item 9) — pillar-accent hover
   underline, used on individual Solutions service pages */
.related-services-strip { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.related-service-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.related-service-link:hover { border-bottom-color: var(--pillar-accent, var(--primary)); color: var(--pillar-accent, var(--primary)); }

.sol-overview-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
}

.sol-offer-list { display: flex; flex-direction: column; gap: 14px; }
.sol-offer-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.sol-offer-item .dot { margin-top: 7px; }

.sol-approach-intro {
  font-size: 14px;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.sol-steps { display: flex; flex-direction: column; }
.sol-step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 32px;
}
.sol-step:last-child { padding-bottom: 0; }
.sol-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.sol-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.sol-step-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sol-step-desc { font-size: 14px; line-height: 1.65; color: var(--text-muted); }

/* Pillar accent colors, matching the site's existing brand/digital/media/b2b taxonomy */
.v2-inner-card.cat-brand   .sol-label { color: var(--acc-brand); }
.v2-inner-card.cat-digital .sol-label { color: #2dce89; }
.v2-inner-card.cat-media   .sol-label { color: var(--acc-multimedia); }
.v2-inner-card.cat-b2b     .sol-label { color: #f59e0b; }
.v2-inner-card.cat-creators .sol-label { color: #ec4899; }
.v2-inner-card.cat-startups .sol-label { color: #ef4444; }
.v2-inner-card.cat-d2c     .sol-label { color: #3b82f6; }
.v2-inner-card.cat-brand   .sol-step-num { background: var(--acc-brand); }
.v2-inner-card.cat-digital .sol-step-num { background: #2dce89; }
.v2-inner-card.cat-media   .sol-step-num { background: var(--acc-multimedia); }
.v2-inner-card.cat-b2b     .sol-step-num { background: #f59e0b; }
.v2-inner-card.cat-creators .sol-step-num { background: #ec4899; }
.v2-inner-card.cat-startups .sol-step-num { background: #ef4444; }
.v2-inner-card.cat-d2c     .sol-step-num { background: #3b82f6; }
.v2-inner-card.cat-brand   .sol-offer-item .dot { background: var(--acc-brand); }
.v2-inner-card.cat-digital .sol-offer-item .dot { background: #2dce89; }
.v2-inner-card.cat-media   .sol-offer-item .dot { background: var(--acc-multimedia); }
.v2-inner-card.cat-b2b     .sol-offer-item .dot { background: #f59e0b; }
.v2-inner-card.cat-creators .sol-offer-item .dot { background: #ec4899; }
.v2-inner-card.cat-startups .sol-offer-item .dot { background: #ef4444; }
.v2-inner-card.cat-d2c     .sol-offer-item .dot { background: #3b82f6; }
.v2-inner-card.cat-brand   .sol-prof-stars, .v2-inner-card.cat-brand   .sol-outcome-item svg { color: var(--acc-brand); }
.v2-inner-card.cat-digital .sol-prof-stars, .v2-inner-card.cat-digital .sol-outcome-item svg { color: #2dce89; }
.v2-inner-card.cat-media   .sol-prof-stars, .v2-inner-card.cat-media   .sol-outcome-item svg { color: var(--acc-multimedia); }
.v2-inner-card.cat-b2b     .sol-prof-stars, .v2-inner-card.cat-b2b     .sol-outcome-item svg { color: #f59e0b; }
.v2-inner-card.cat-creators .sol-prof-stars, .v2-inner-card.cat-creators .sol-outcome-item svg { color: #ec4899; }
.v2-inner-card.cat-startups .sol-prof-stars, .v2-inner-card.cat-startups .sol-outcome-item svg { color: #ef4444; }
.v2-inner-card.cat-d2c     .sol-prof-stars, .v2-inner-card.cat-d2c     .sol-outcome-item svg { color: #3b82f6; }
.v2-inner-card.cat-brand   .sol-prof-bar-fill { background: var(--acc-brand); }
.v2-inner-card.cat-digital .sol-prof-bar-fill { background: #2dce89; }
.v2-inner-card.cat-media   .sol-prof-bar-fill { background: var(--acc-multimedia); }
.v2-inner-card.cat-b2b     .sol-prof-bar-fill { background: #f59e0b; }
.v2-inner-card.cat-creators .sol-prof-bar-fill { background: #ec4899; }
.v2-inner-card.cat-startups .sol-prof-bar-fill { background: #ef4444; }
.v2-inner-card.cat-d2c     .sol-prof-bar-fill { background: #3b82f6; }

/* ─────────────────────────────────
   SOLUTION DETAIL PAGE v2 — Proficiency, Outcomes, Approach illustration,
   Case Studies, Glossary, Insights, Final CTA
───────────────────────────────── */
.service-page-v2 { max-width: 1100px; }

/* Description + Proficiency sidebar */
.sol-desc-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.sol-proficiency-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.sol-prof-score { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.sol-prof-stars { display: flex; gap: 2px; }
.sol-prof-stars svg { width: 16px; height: 16px; }
.sol-prof-stars svg.filled { fill: currentColor; }
.sol-prof-num { font-size: 13px; font-weight: 700; color: var(--text); }
.sol-prof-bar-row { margin-bottom: 14px; }
.sol-prof-bar-row:last-of-type { margin-bottom: 0; }
.sol-prof-bar-label { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.sol-prof-bar-track { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.sol-prof-bar-fill { height: 100%; border-radius: 3px; background: var(--pillar-accent, var(--primary)); }
.sol-prof-platforms-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin: 22px 0 12px; }
.sol-prof-platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-prof-platform-badge { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; flex-shrink: 0; }

/* Typical Outcomes checklist */
.sol-outcomes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; margin-top: 20px; }
.sol-outcome-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); }
.sol-outcome-item svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Our Approach illustration column */
.sol-approach-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; }

/* Case-study card as a link + missing prev arrow (mirrors .bp-work-next) */
.bp-work-card-link { display: block; color: inherit; text-decoration: none; }
.bp-work-card-cta { font-size: 11.5px; font-weight: 700; color: var(--primary); margin-top: 6px; }
.bp-work-prev {
  position: absolute; left: -14px; top: 64px;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: var(--cursor-dot-hover); box-shadow: var(--shadow-light); transition: border-color .15s;
}
.bp-work-prev:hover { border-color: var(--primary); color: var(--primary); }

/* Glossary carousel (reuses .glossary-card, laid out like .bp-work-row) */
.sol-glossary-row-wrap { position: relative; }
.sol-glossary-row { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.sol-glossary-row::-webkit-scrollbar { display: none; }
.sol-glossary-row .glossary-card { flex: 0 0 240px; text-decoration: none; }
.sol-glossary-quickview { font-size: 11.5px; font-weight: 700; color: var(--primary); }

/* Insights grid */
.bp-insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bp-insight-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.bp-insight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-light); border-color: var(--primary); }
.bp-insight-thumb { height: 110px; display: flex; align-items: center; justify-content: center; }
.bp-insight-body { padding: 16px 18px; }
.bp-insight-date { font-size: 11px; color: var(--text-dim); }
.bp-insight-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 6px 0 10px; line-height: 1.4; }
.bp-insight-link { font-size: 12px; font-weight: 700; color: var(--primary); }

@media (max-width: 900px) {
  .sol-desc-grid, .sol-approach-grid { grid-template-columns: 1fr; }
  .sol-outcomes-row { grid-template-columns: repeat(2, 1fr); }
  .bp-insight-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sol-outcomes-row { grid-template-columns: 1fr; }
  .bp-insight-grid { grid-template-columns: 1fr; }
  .bp-work-prev, .bp-work-next { display: none; }
}

/* ─────────────────────────────────
   HOW WE WORK / METHODOLOGY PAGE
   (extends .about-page + .sol-block / .sol-label / .sol-steps)
───────────────────────────────── */
.v2-inner-hero-actions { margin-top: 8px; }

.about-stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .about-stats-4 { grid-template-columns: repeat(2, 1fr); } }

.text-stack { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }

.info-grid { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .info-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .info-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.info-card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.info-card-desc { font-size: 14px; line-height: 1.65; color: var(--text-muted); }

.step-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.careers-note { margin-top: 24px; }
.careers-note a,
.v2-inner-card .careers-note a { color: var(--primary-hover); font-weight: 700; }

.close-cta { text-align: center; padding-top: 16px; }
.close-cta-context { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.close-cta-heading { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 32px; color: var(--text); }
.close-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   LEGAL CENTER
════════════════════════════════════════════════════════ */

.legal-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 48px 32px;
  align-items: start;
}

.legal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 24px;
}

.legal-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.legal-nav-item:hover { background: var(--bg-card-hover); color: var(--text); }
.legal-nav-item.is-active {
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--primary);
}
.legal-nav-arrow { opacity: 0.35; font-size: 13px; flex-shrink: 0; margin-left: 8px; }

.legal-content { max-width: 720px; }
.legal-content-meta {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 32px;
}
.legal-content h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
}
.legal-content p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.legal-content ul {
  margin: 0 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-content li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  list-style: disc;
}
.legal-content li strong { color: var(--text); }
.legal-content a { color: var(--primary-hover); text-decoration: underline; }

.legal-contact-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 24px;
}
.legal-contact-box p { margin-bottom: 6px; font-size: 14px; }
.legal-contact-box p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .legal-page { grid-template-columns: 1fr; padding: 32px 20px; gap: 24px; }
  .legal-sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .legal-nav-item { border-left: none; border-bottom: 2px solid transparent; padding: 9px 12px; }
  .legal-nav-item.is-active { border-bottom-color: var(--primary); }
  .legal-nav-arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════
   FLOATING CONTACT BUBBLE
════════════════════════════════════════════════════════ */

.contact-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 16px;
  border-radius: 100px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(79, 70, 229, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.contact-bubble:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.45);
}
.contact-bubble-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-bubble-icon svg { width: 100%; height: 100%; }
.contact-bubble-label { white-space: nowrap; }

@media (max-width: 640px) {
  .contact-bubble {
    right: 16px;
    bottom: 16px;
    width: 52px;
    padding: 0;
    justify-content: center;
  }
  .contact-bubble-label { display: none; }
}

/* ═══════════════════════════════════════════════════════
   INSIGHTS V2 — magazine grid (insights.html)
════════════════════════════════════════════════════════ */

.ins2-page { max-width: 1280px; margin: 0 auto; padding: 24px 24px 80px; }

/* Hero */
.ins2-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(135deg, #0c1120 0%, #171d30 100%);
  border-radius: 20px;
  padding: 48px 56px;
  margin-bottom: 32px;
}
.ins2-hero-dots {
  position: absolute;
  top: 26px;
  left: 26px;
  width: 130px;
  height: 96px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
}
.ins2-hero-left { position: relative; z-index: 1; max-width: 480px; }
.ins2-hero-title {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
.ins2-hero-tag {
  font-size: 15px;
  font-weight: 700;
  color: #fb923c;
  margin-bottom: 14px;
}
.ins2-hero-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #9ca3af;
  max-width: 380px;
}
.ins2-hero-right { position: relative; z-index: 1; flex-shrink: 0; width: 340px; }
.ins2-hero-svg { width: 100%; height: auto; display: block; }

/* Category filter row — pills on the left, Filter/Sort toolbar on the right */
.ins2-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.ins2-cat-left { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ins2-cat-label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.ins2-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ins2-pill {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ins2-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-light); }
/* Category colours reuse the site's Solutions pillar accents for
   consistency — Brand/UI-UX/Performance/Data/Multimedia map 1:1 to
   Brand Strategy, UX/UI, Growth & Performance, Data & Analytics and
   Multimedia & Production. Text shades are darkened off the raw accent
   (esp. the lime/orange ones) to keep readable contrast on white. */
.ins2-pill-brand       { border-color: var(--acc-brand-light);       color: var(--acc-brand); }
.ins2-pill-ux-ui       { border-color: var(--acc-ux-ui-mid);         color: var(--acc-ux-ui-text); }
.ins2-pill-performance { border-color: var(--acc-performance-mid);   color: var(--acc-performance); }
.ins2-pill-data        { border-color: var(--acc-data-mid);          color: var(--acc-data); }
.ins2-pill-multimedia  { border-color: var(--acc-multimedia-mid);    color: var(--acc-multimedia); }
.ins2-pill-active,
.ins2-pill-active:hover {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

/* Filter / Sort toolbar */
.ins2-toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; }
.ins2-dropdown { position: relative; }
.ins2-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ins2-toolbar-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-light); }
.ins2-toolbar-chevron { flex-shrink: 0; opacity: 0.6; }
.ins2-filter-badge[hidden] { display: none; }
.ins2-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.ins2-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-medium);
  padding: 16px;
}
.ins2-dropdown-panel.is-open { display: block; }
.ins2-filter-group + .ins2-filter-group { margin-top: 16px; }
.ins2-filter-group h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.ins2-filter-group label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: var(--cursor-dot-hover);
}
.ins2-filter-group input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); cursor: var(--cursor-dot-hover); }
.ins2-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ins2-filter-clear {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.ins2-filter-clear:hover { color: var(--text); }
.ins2-filter-apply {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
}
.ins2-filter-apply:hover { opacity: 0.9; }

.ins2-dropdown-panel-sort { min-width: 190px; padding: 8px; }
.ins2-sort-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-muted);
}
.ins2-sort-option:hover { background: var(--bg-card-hover); }
.ins2-sort-option.is-active { background: var(--bg-card-hover); color: var(--primary); }

@media (max-width: 640px) {
  .ins2-cat-row { justify-content: flex-start; }
  .ins2-toolbar-right { width: 100%; }
  .ins2-toolbar-btn { flex: 1; justify-content: center; }
  .ins2-dropdown { flex: 1; }
  .ins2-dropdown-panel { left: 0; right: 0; }
}

/* Search box */
.ins2-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.15s;
}
.ins2-search-box:focus-within { border-color: var(--primary); }
.ins2-search-box svg { flex-shrink: 0; color: var(--text-dim); }
.ins2-search-input {
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 8px 0;
  width: 160px;
}
.ins2-search-input::placeholder { color: var(--text-dim); }
.ins2-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-dim);
}
.ins2-search-clear[hidden] { display: none; }
.ins2-search-clear:hover { color: var(--text); }
.ins2-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--text);
  background: var(--text);
  color: #fff;
  transition: opacity 0.15s;
}
.ins2-search-btn:hover { opacity: 0.85; }
.ins2-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 20px;
  color: var(--text-dim);
  font-size: 14px;
}

@media (max-width: 640px) {
  .ins2-search-box { flex: 1 1 100%; order: -1; }
  .ins2-search-input { flex: 1; width: auto; }
}

/* Card grid */
.ins2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
@media (min-width: 640px)  { .ins2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ins2-grid { grid-template-columns: repeat(3, 1fr); } }

.ins2-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ins2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); }
.ins2-card-art { aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ins2-card-art svg { width: 100%; height: 100%; display: block; }
.ins2-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins2-card-art-fallback {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  text-align: center;
  padding: 0 20px;
}
/* Experience Cyan is light: white labels on it fall below readable contrast */
.ins2-card[data-category="ux-ui"] .ins2-card-art-fallback { color: #111827; }
.ins2-card-body { padding: 20px 22px 22px; }
.ins2-card-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ins2-cat-brand       { color: var(--acc-brand); }
.ins2-cat-ux-ui       { color: var(--acc-ux-ui-text); }
.ins2-cat-performance { color: var(--acc-performance); }
.ins2-cat-data        { color: var(--acc-data); }
.ins2-cat-multimedia  { color: var(--acc-multimedia); }
.ins2-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 8px;
}
.ins2-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ins2-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ins2-card-arrow {
  color: var(--text);
  font-weight: 600;
  transition: transform 0.15s ease;
}
.ins2-card:hover .ins2-card-arrow { transform: translateX(3px); }

/* Pagination */
.ins2-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ins2-page-nav,
.ins2-page-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: var(--cursor-dot);
}
.ins2-page-active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.ins2-page-nav-disabled { opacity: 0.4; }
.ins2-page-dots { color: var(--text-dim); padding: 0 4px; }

@media (max-width: 767px) {
  .ins2-page { padding: 16px 16px 60px; }
  .ins2-hero { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .ins2-hero-right { width: 100%; max-width: 320px; align-self: center; }
  .ins2-hero-desc { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   BRAND SOLUTIONS LANDING PAGE
════════════════════════════════════════════════════════ */
.bp-page { max-width: 1200px; margin: 0 auto; padding: 0 24px 0; }

.bp-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); padding: 28px 0 0; }
.bp-breadcrumb a { color: var(--text-dim); font-weight: 500; }
.bp-breadcrumb a:hover { color: var(--primary); }
.bp-breadcrumb a.bp-crumb-active { color: var(--primary); font-weight: 600; }
.bp-breadcrumb .bp-crumb-sep { color: var(--border); }
.bp-breadcrumb .bp-crumb-current { color: var(--text-muted); }

/* Hero */
.bp-hero { padding: 24px 0 56px; }
.bp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.bp-hero-h1 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--primary); margin-bottom: 22px; }
.bp-hero-strong { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.5; margin-bottom: 14px; }
.bp-hero-desc { font-size: 14px; line-height: 1.75; color: var(--text-muted); margin-bottom: 30px; max-width: 460px; }
.bp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Decorative brand-book mockup (no photo assets — built from shapes) */
.bp-mockup { position: relative; height: 320px; }
.bp-mockup-sheet {
  position: absolute; right: 0; top: 0; width: 62%; height: 82%;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 36px rgba(17,24,39,.10); padding: 22px 20px; transform: rotate(2deg);
}
.bp-mockup-sheet-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--primary); margin-bottom: 16px; }
.bp-mockup-sheet-line { height: 6px; border-radius: 3px; background: var(--border); margin-bottom: 9px; }
.bp-mockup-sheet-line.short { width: 55%; }
.bp-mockup-book {
  position: absolute; left: 0; top: 8%; width: 50%; height: 86%;
  background: linear-gradient(155deg, var(--primary), var(--primary-dark));
  border-radius: 12px; box-shadow: 0 20px 40px rgba(17,24,39,.18);
  color: #fff; padding: 24px 20px; display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-3deg);
}
.bp-mockup-book-mark { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.9); }
.bp-mockup-book-name { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; }
.bp-mockup-book-tag { font-size: 11px; opacity: .8; line-height: 1.5; margin-top: 6px; }
.bp-mockup-card {
  position: absolute; bottom: 4%; left: 20%; width: 34%; aspect-ratio: 16/10;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(17,24,39,.14); padding: 10px 12px; transform: rotate(4deg);
}
.bp-mockup-card.bp-mockup-card-2 { left: 30%; bottom: -2%; transform: rotate(-6deg); z-index: 2; }
.bp-mockup-card-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--primary); margin-bottom: 8px; }
.bp-mockup-card-line { height: 4px; width: 70%; border-radius: 2px; background: var(--border); }

/* Generic section scaffolding */
.bp-section { padding: 48px 0; }
.bp-section-tint { background: var(--bg-card-hover); border-radius: 20px; }
.bp-eyebrow-center { text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 10px; }
.bp-h2-center { text-align: center; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--text); margin-bottom: 12px; }
.bp-sub-center { text-align: center; font-size: 14px; color: var(--text-muted); max-width: 620px; margin: 0 auto 40px; line-height: 1.6; }

/* What We Do — 6-card feature grid */
.bp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bp-feature-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px 22px; text-align: center; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bp-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-light); border-color: var(--pillar-accent, var(--primary)); }
.bp-feature-icon { width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--pillar-accent, var(--primary)) 8%, transparent); color: var(--pillar-accent, var(--primary)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.bp-feature-icon svg { width: 21px; height: 21px; }
.bp-feature-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.bp-feature-desc { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* Decision 6 (dev handoff doc) — hover-to-reveal service cards on
   Solutions pillar hub "What We Offer" grids. Default state: icon +
   name only; the description stays in the DOM at all times (screen
   readers can always reach it) and is just visually collapsed until
   hover or keyboard focus. On touch devices there's no hover state to
   reveal it, so `(hover: none)` keeps it always visible there instead. */
.bp-feature-card.hover-reveal { text-align: left; cursor: var(--cursor-dot-hover); border-left: 3px solid transparent; }
.bp-feature-card.hover-reveal:hover,
.bp-feature-card.hover-reveal:focus-within {
  border-left-color: var(--pillar-accent, var(--primary));
  background: color-mix(in srgb, var(--pillar-accent, var(--primary)) 6%, var(--bg-card));
}
.bp-feature-card.hover-reveal .bp-feature-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.bp-feature-card.hover-reveal:hover .bp-feature-desc,
.bp-feature-card.hover-reveal:focus-within .bp-feature-desc {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}
@media (hover: none) {
  .bp-feature-card.hover-reveal .bp-feature-desc { max-height: none; opacity: 1; margin-top: 8px; }
}

/* What We Do — editorial bordered grid.
   A single hairline-bordered box split into rows. Row 1 holds the section
   header (2 columns) with service 01 beside it; each later row pairs a
   narrow and a wide cell, alternating sides (child 4n and 4n+5 go wide).
   A last service left without a partner spans the full row. The final
   service is tinted as the "closing" cell. Row dividers come from each
   cell's bottom border; the grid clips the last row's so it never doubles
   up with the outer border. Stacks to one column on small screens. */
.wwd { padding-top: 56px; }
.wwd-grid {
  --wwd-line: #C4C9D2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--wwd-line);
  background: var(--bg);
  overflow: hidden;
}
.wwd-head, .wwd-item {
  border-bottom: 1px solid var(--wwd-line);
  margin-bottom: -1px;
  /* vertical dividers between cells in a row; first-column cells shift
     theirs under the (clipped) outer frame so it never doubles up */
  border-left: 1px solid var(--wwd-line);
  margin-left: -1px;
  padding: 30px 28px 34px;
  min-width: 0;
}
.wwd-head { grid-column: span 2; padding: 34px 34px 40px; }
.wwd-item:nth-child(4n),
.wwd-item:nth-child(4n+5) { grid-column: span 2; }
.wwd-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.wwd-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 30px;
}
.wwd-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 4px;
  border: 1px solid var(--primary); color: var(--primary);
  font-size: 10px; letter-spacing: 0.04em;
}
.wwd-h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 22px;
}
.wwd-h2 em { font-style: italic; color: var(--primary); }
.wwd-intro {
  font-size: 14px; line-height: 1.75; color: var(--text-dim);
  max-width: 440px;
}

.wwd-item {
  display: block; text-decoration: none; color: inherit;
  transition: background-color .2s ease;
}
.wwd-num {
  display: block; font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--text-dim); margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.wwd-title {
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
  transition: color .2s ease;
}
.wwd-desc {
  font-size: 14px; line-height: 1.7; color: var(--text-dim);
  max-width: 460px;
}
.wwd-item:hover, .wwd-item:focus-visible {
  background: color-mix(in srgb, var(--primary) 4%, var(--bg));
  outline: none;
}
.wwd-item:hover .wwd-title, .wwd-item:focus-visible .wwd-title { color: var(--primary); }

/* closing cell — tinted, with its number picked out in the accent */
.wwd-item:last-child { background: #E9EBEF; }
.wwd-item:last-child .wwd-num { color: var(--primary); }
.wwd-item:last-child:hover { background: color-mix(in srgb, var(--primary) 6%, #E9EBEF); }

.wwd-more {
  display: table; margin: 18px 0 0 auto;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color .2s ease;
}
.wwd-more:hover { color: var(--primary); }

@media (max-width: 900px) {
  .wwd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwd-head { grid-column: 1 / -1; }
  .wwd-item:nth-child(n) { grid-column: auto; }
  .wwd-item:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .wwd-grid { grid-template-columns: minmax(0, 1fr); }
  .wwd-head, .wwd-item { padding: 26px 20px 28px; }
  .wwd-item:last-child:nth-child(n) { grid-column: auto; }
}

/* Our Approach — method / process timeline */
.bp-method-inner { padding: 48px 36px; }
.bp-method-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.bp-method-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 14px; }
.bp-method-heading { font-size: 27px; font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 14px; }
.bp-method-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 22px; }

.bp-tl-track { display: flex; align-items: center; margin-bottom: 20px; }
.bp-tl-num { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--primary); color: var(--primary); background: var(--bg-card); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bp-tl-line { flex: 1; height: 0; border-top: 1.5px dashed var(--border); margin: 0 4px; }
.bp-tl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bp-tl-step { text-align: center; }
.bp-tl-icon { color: var(--primary); width: 22px; height: 22px; margin: 0 auto 10px; }
.bp-tl-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.bp-tl-desc { display: none; font-size: 14px; color: var(--text-muted); line-height: 1.55; padding: 0 4px; }

/* Our Approach — animated Outbox Method (.om, driven by initOutboxMethod
   in site.js). Intro | vertical step rail | stacked card deck. Each card's
   place in the deck comes from data-pos (0 = front, 1-3 = peeking behind,
   "out" = just left the front, "hidden" = waiting at the back). */
.om {
  --om-ease: cubic-bezier(.22, .9, .24, 1);
  --om-card-0: #EEEDFC;
  --om-card-1: #E3E2F8;
  --om-card-2: #DCDBF6;
  --om-card-3: #E6E5FA;
  padding: 0;
  margin: 48px 0;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 24px;
  /* Visible so a card lifting off the top of the stack is not clipped. */
  overflow: visible;
  /* Layout responds to the section's own width, not the viewport, so it
     fits both full-width landing pages and service-page content columns. */
  container: om / inline-size;
}
/* Inside a service page's content block the block already spaces itself. */
.sol-block > .om { margin: 0; }
.om .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.om-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1.4fr);
  align-items: stretch;
  padding: 52px 28px 52px 50px;
}
.om-intro { padding-right: 44px; align-self: center; }
.om-intro .bp-method-heading { font-size: clamp(26px, 2.6vw, 36px); }
.om-intro .bp-method-desc { font-size: 14px; margin-bottom: 36px; }

/* Step rail */
.om-nums {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 0;
}
.om-num {
  font-family: inherit; font-weight: 800; font-size: 44px; line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--primary);
  padding: 0 14px;
  border-radius: 12px;
  background: none;
}
.om-num-val {
  display: inline-block;
  opacity: .22;
  transform: scale(1);
  transition: transform .55s var(--om-ease), opacity .4s ease;
}
.om-num[aria-selected="true"] { margin: 18px 0; }
.om-num[aria-selected="true"] .om-num-val { opacity: 1; transform: scale(1.75); }
.om-num:hover .om-num-val { opacity: .5; }
.om-num[aria-selected="true"]:hover .om-num-val { opacity: 1; }
.om-num:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.om-num { transition: margin .55s var(--om-ease); }

/* Card deck */
.om-stage { padding-left: 28px; display: flex; align-items: stretch; }
.om-deck { position: relative; flex: 1; min-height: 400px; margin-top: 64px; }
.om-card {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 40px 60px;
  border-radius: 18px;
  border: 1px solid rgba(79, 70, 229, 0.10);
  background: var(--om-card-0);
  transform-origin: 50% 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform .75s var(--om-ease), opacity .55s ease, background-color .6s ease, box-shadow .6s ease;
}
.om-card[data-pos="0"] {
  z-index: 5; opacity: 1; pointer-events: auto;
  box-shadow: 0 18px 40px -24px rgba(79, 70, 229, 0.35);
}
.om-card[data-pos="1"] { z-index: 4; opacity: 1; background: var(--om-card-1); transform: translateY(-22px) scale(.955); }
.om-card[data-pos="2"] { z-index: 3; opacity: 1; background: var(--om-card-2); transform: translateY(-42px) scale(.91); }
.om-card[data-pos="3"] { z-index: 2; opacity: 1; background: var(--om-card-3); transform: translateY(-60px) scale(.865); }
.om-card[data-pos="hidden"] { z-index: 1; transform: translateY(-74px) scale(.82); }
/* Shuffle from the top. Forward: the front card lifts straight up off
   the stack, then drops in behind it into the back slot while the next
   card moves to the front. Backward: the rear card rises from behind the
   stack and comes down onto the front. No 100% (or 0%) keyframe on the
   far end, so each shuffle finishes on whatever resting slot data-pos
   gives the card. --om-drag-x/-r let a swipe hand off mid-drag without
   a jump. */
@keyframes om-shuffle-out {
  0%   { transform: translateX(var(--om-drag-x, 0px)) rotate(var(--om-drag-r, 0deg)); opacity: 1; z-index: 7; }
  40%  { transform: translateY(-38%) scale(.97) rotate(-1.5deg); opacity: 1; z-index: 7; }
  42%  { z-index: 0; }
  72%  { transform: translateY(-70px) scale(.86); opacity: .8; z-index: 0; }
}
@keyframes om-shuffle-in {
  0%   { transform: translateY(-74px) scale(.82); opacity: 0; z-index: 0; }
  28%  { transform: translateY(-70px) scale(.86); opacity: .8; z-index: 0; }
  58%  { transform: translateY(-38%) scale(.97) rotate(-1.5deg); opacity: 1; z-index: 0; }
  60%  { z-index: 7; }
}
.om-card.is-shuffle-out { animation: om-shuffle-out .95s ease-in-out; }
.om-card.is-shuffle-in  { animation: om-shuffle-in .95s ease-in-out; }
/* Keep the leaving card's text on it while it slides out. */
.om-card.is-shuffle-out .om-card-body > * { opacity: 1; transform: none; transition: none; }

.om-card-body > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .6s var(--om-ease);
}
.om-card[data-pos="0"] .om-card-body > * { opacity: 1; transform: none; transition-delay: .22s; }
.om-card[data-pos="0"] .om-card-body > * + * { transition-delay: .32s; }
.om-card-title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 14px; }
.om-card-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; max-width: 400px; }
.om-deck-long .om-card-title { font-size: clamp(22px, 2.1vw, 32px); }
.om-deck-long .om-card-desc { font-size: 14px; line-height: 1.65; max-width: 520px; }

/* Autoplay timer along the bottom of the front card */
.om-progress {
  position: absolute; left: 60px; right: 60px; bottom: 26px; z-index: 7;
  height: 2px; border-radius: 2px; background: rgba(79, 70, 229, 0.12); overflow: hidden;
}
.om-progress-bar { display: block; height: 100%; width: 100%; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; }
.om-progress-bar.is-running { transition: transform var(--om-interval, 4000ms) linear; transform: scaleX(1); }
.om.is-paused .om-progress-bar { opacity: .35; }

/* Entrance: reveal once the section scrolls into view */
.om.om-ready .om-intro > *,
.om.om-ready .om-nums,
.om.om-ready .om-deck {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .8s var(--om-ease), margin .55s var(--om-ease);
}
.om.om-ready.is-inview .om-intro > *,
.om.om-ready.is-inview .om-nums,
.om.om-ready.is-inview .om-deck { opacity: 1; transform: none; }
.om.om-ready.is-inview .om-intro > :nth-child(2) { transition-delay: .08s; }
.om.om-ready.is-inview .om-intro > :nth-child(3) { transition-delay: .16s; }
.om.om-ready.is-inview .om-intro > :nth-child(4) { transition-delay: .24s; }
.om.om-ready.is-inview .om-nums { transition-delay: .15s; }
.om.om-ready.is-inview .om-deck { transition-delay: .3s; }

@container om (max-width: 1060px) {
  .om-grid { grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1.25fr); padding: 44px 22px 44px 36px; }
  .om-intro { padding-right: 32px; }
  .om-num { font-size: 36px; }
  .om-card { padding: 32px 38px; }
  .om-progress { left: 38px; right: 38px; }
}
@media (max-width: 900px) {
  .om { margin: 32px 0; }
}
@container om (max-width: 820px) {
  .om-grid { grid-template-columns: minmax(0, 1fr); padding: 32px 22px; row-gap: 26px; }
  .om-intro { padding-right: 0; }
  .om-intro .bp-method-desc { margin-bottom: 24px; }
  .om-nums {
    flex-direction: row; justify-content: space-between;
    border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 14px 0;
  }
  .om-num { font-size: 22px; padding: 0 6px; }
  .om-num[aria-selected="true"] { margin: 0 12px; }
  .om-num[aria-selected="true"] .om-num-val { transform: scale(1.6); }
  .om-stage { padding-left: 0; }
  .om-deck { min-height: 240px; margin-top: 54px; }
  .om-card { padding: 28px 26px 40px; }
  .om-progress { left: 26px; right: 26px; bottom: 20px; }
}

/* Step rail as a rolling reel (added by initOutboxMethod as .is-reel):
   the numbers scroll through a fixed band level with the front card's
   title, so the current step always sits in the same spot and the next
   one rolls up into it. JS clones the six numbers before and after the
   real ones so 06 -> 01 keeps rolling forward instead of rewinding. */
.om-nums.is-reel { display: block; position: relative; padding: 0; min-height: 420px; }
.om-reel-view {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.om-reel {
  --om-item: 84px;
  position: absolute; left: 0; right: 0;
  /* Current number sits in the vertical centre of the column. */
  top: 50%;
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(calc((var(--om-v, 0) + 0.5) * -1 * var(--om-item)));
  transition: transform .8s var(--om-ease);
  will-change: transform;
}
.om-reel.no-anim, .om-reel.no-anim .om-num-val { transition: none !important; }
.om-reel .om-num { height: var(--om-item); margin: 0; display: flex; align-items: center; justify-content: center; }
.om-reel .om-num .om-num-val { opacity: .22; transform: scale(1); }
.om-reel .om-num.is-near .om-num-val { opacity: .32; }
.om-reel .om-num.is-current .om-num-val { opacity: 1; transform: scale(1.75); }
.om-reel .om-num:hover .om-num-val { opacity: .55; }
.om-reel .om-num.is-current:hover .om-num-val { opacity: 1; }

@container om (max-width: 1060px) {
  .om-reel { --om-item: 70px; }
}
@container om (max-width: 820px) {
  .om-nums.is-reel { min-height: 64px; padding: 0; }
  .om-reel-view {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  }
  .om-reel {
    --om-item: 64px;
    top: 50%; left: 50%; right: auto;
    flex-direction: row;
    transform: translate(calc((var(--om-v, 0) + 0.5) * -1 * var(--om-item)), -50%);
  }
  .om-reel .om-num { width: var(--om-item); height: auto; padding: 0; }
  .om-reel .om-num.is-current .om-num-val { transform: scale(1.6); }
}

/* Swipe: the front card can be dragged sideways (mouse or touch). */
.om-deck { touch-action: pan-y; cursor: grab; }
.om-deck.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* After the entrance finishes, drop the stagger so step changes are instant. */
.om.om-settled .om-intro > *, .om.om-settled .om-nums, .om.om-settled .om-deck { transition-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
  .om *, .om.om-ready * { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .om-card.is-shuffle-out, .om-card.is-shuffle-in { animation: none; }
  .om-progress { display: none; }
}

/* What We Offer — dark numbered list (.wwo, service pages).
   Intro on the left; on the right a numbered row per service with the
   matching outcome after a divider. Rows reveal one by one on scroll
   (initOfferLists in site.js). Layout follows the section's own width. */
.wwo {
  --wwo-bg: #0B0B0F;
  --wwo-line: rgba(255, 255, 255, 0.12);
  --wwo-text: #F5F6F8;
  --wwo-dim: #A3A8B4;
  --wwo-blue: #3D63FF;
  background: var(--wwo-bg);
  color: var(--wwo-text);
  /* Full-bleed band: the black extends edge to edge of the viewport while
     the content stays in the page column. The shadow paints the sides and
     clip-path trims it to the section's own height, so there is no layout
     change and no horizontal scroll (unlike a 100vw width). */
  box-shadow: 0 0 0 100vmax var(--wwo-bg);
  clip-path: inset(0 -100vmax);
  container: wwo / inline-size;
}
.wwo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  padding: 40px 0;
}
.wwo-intro {
  padding-right: 40px;
  border-right: 1px solid var(--wwo-line);
  display: flex; flex-direction: column; justify-content: center;
}
.wwo-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: #D6D9E0; margin-bottom: 28px;
}
.wwo-heading {
  /* sized to the section width (cqi) so long service names fit the column */
  font-size: clamp(30px, 4.2cqi, 56px); font-weight: 700; line-height: 1.05;
  overflow-wrap: break-word;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 26px;
}
.wwo-heading em { font-style: italic; color: var(--wwo-blue); }
.wwo-desc { font-size: 14px; line-height: 1.65; color: var(--wwo-dim); max-width: 380px; }

.wwo-list { list-style: none; margin: 0; padding: 0 0 0 28px; }
.wwo-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  padding: 20px 0 20px 26px;
  border-bottom: 1px solid var(--wwo-line);
}
.wwo-row:last-child { border-bottom: 0; }
.wwo-num {
  font-size: clamp(34px, 3.2vw, 50px); font-weight: 300; line-height: 1;
  color: #E6E8EE; font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.wwo-main { padding-right: 28px; }
.wwo-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: #fff; }
.wwo-detail { font-size: 14px; line-height: 1.6; color: var(--wwo-dim); margin-top: 6px; }
.wwo-outcome {
  align-self: stretch; display: flex; align-items: center;
  border-left: 1px solid var(--wwo-line);
  padding: 4px 0 4px 32px;
  font-size: 14px; line-height: 1.6; color: var(--wwo-dim);
}
.wwo-row:hover .wwo-num { color: var(--wwo-blue); }

/* Scroll reveal, only once the script has run. */
.wwo.wwo-ready .wwo-intro > *,
.wwo.wwo-ready .wwo-row {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22, .9, .24, 1);
  transition-delay: calc(var(--wwo-i, 0) * 70ms);
}
.wwo.wwo-ready.is-inview .wwo-intro > *,
.wwo.wwo-ready.is-inview .wwo-row { opacity: 1; transform: none; }

@container wwo (max-width: 980px) {
  .wwo-grid { grid-template-columns: minmax(0, 1fr); padding: 36px 0; }
  .wwo-intro { padding: 0 0 32px; border-right: 0; border-bottom: 1px solid var(--wwo-line); }
  .wwo-list { padding: 8px 0 0; }
  .wwo-row { grid-template-columns: 88px minmax(0, 1.2fr) minmax(0, 1fr); padding-left: 0; }
}
@container wwo (max-width: 620px) {
  .wwo-grid { padding: 32px 0; }
  .wwo-row { grid-template-columns: 58px minmax(0, 1fr); align-items: start; row-gap: 8px; padding: 18px 0; }
  .wwo-num { font-size: 30px; }
  .wwo-main { padding-right: 0; }
  .wwo-outcome { grid-column: 2; border-left: 0; padding: 0; font-size: 14px; }
  .wwo-outcome:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wwo.wwo-ready .wwo-intro > *, .wwo.wwo-ready .wwo-row { opacity: 1; transform: none; transition: none; }
}

/* Stats row */
.bp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; }
.bp-stat-icon { color: var(--primary); width: 24px; height: 24px; margin: 0 auto 10px; }
.bp-stat-num { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; }
.bp-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

/* Our Work Speaks — case study carousel */
.bp-work-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.bp-work-head h2 { font-size: 22px; font-weight: 800; color: var(--text); }
.bp-work-viewall { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.bp-work-row-wrap { position: relative; }
.bp-work-row { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.bp-work-row::-webkit-scrollbar { display: none; }
.bp-work-card { flex: 0 0 232px; }
.bp-work-thumb { height: 148px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; }
.bp-work-name { font-size: 14px; font-weight: 700; color: var(--text); }
.bp-work-cat { font-size: 12px; color: var(--text-dim); margin: 2px 0 8px; }
.bp-work-stat { font-size: 12px; color: var(--text-dim); }
.bp-work-stat b { color: var(--primary); font-weight: 800; }
.bp-work-next {
  position: absolute; right: -14px; top: 64px;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: var(--cursor-dot-hover); box-shadow: var(--shadow-light); transition: border-color .15s;
}
.bp-work-next:hover { border-color: var(--primary); color: var(--primary); }

/* Closing CTA banner */
.bp-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 20px; padding: 32px 36px; flex-wrap: wrap; }
.bp-cta-left { display: flex; gap: 16px; align-items: center; }
.bp-cta-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bp-cta-icon svg { width: 22px; height: 22px; }
.bp-cta-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.bp-cta-sub { font-size: 14px; color: var(--text-muted); }
.bp-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Legacy sub-service directory, kept discoverable below the fold */
.bp-services-row { padding-top: 8px; }
.bp-services-row .bp-eyebrow-center { margin-bottom: 24px; }

@media (max-width: 900px) {
  .bp-hero-grid { grid-template-columns: 1fr; }
  .bp-mockup { width: 100%; max-width: 420px; margin: 0 auto; }
  .bp-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-method-wrap { grid-template-columns: 1fr; }
  .bp-tl-grid { grid-template-columns: repeat(5, 1fr); }
  .bp-stats { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
}
@media (max-width: 640px) {
  .bp-mockup { width: 100%; height: 200px; max-width: 300px; }
  .bp-mockup-book { width: 58%; }
  .bp-mockup-sheet { width: 68%; }
  .bp-feature-grid { grid-template-columns: 1fr; }
  .bp-tl-track, .bp-tl-grid { grid-template-columns: 1fr; }
  .bp-tl-track { flex-direction: column; gap: 10px; }
  .bp-tl-line { display: none; }
  .bp-tl-grid { display: flex; flex-direction: column; gap: 22px; }
  .bp-stats { grid-template-columns: repeat(2, 1fr); }
  .bp-cta { flex-direction: column; align-items: flex-start; }
  .bp-method-inner { padding: 32px 22px; }
}

/* Wide 6-item variants (Media / Digital solutions pages) — auto-fit
   collapses column count on its own as the container narrows, so a single
   compact override below handles small screens instead of per-breakpoint rules. */
.bp-feature-grid.bp-cols-6,
.bp-stats.bp-cols-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bp-tl-grid.bp-cols-6 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
@media (max-width: 640px) {
  .bp-stats.bp-cols-6 { grid-template-columns: repeat(2, 1fr); }
  .bp-tl-grid.bp-cols-6 { display: flex; flex-direction: column; gap: 22px; }
}

/* 4-item variant (Platforms page — "Why Platform Expertise Matters") */
.bp-feature-grid.bp-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .bp-feature-grid.bp-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bp-feature-grid.bp-cols-4 { grid-template-columns: 1fr; }
}

/* Hero placeholder image (no photo asset for this page yet) */
.bp-img-placeholder {
  height: 320px; border-radius: 16px; background: var(--bg-card-hover);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.bp-img-placeholder svg { width: 64px; height: 64px; color: var(--text-dim); opacity: .6; }

/* "AI is Our Advantage" panel */
.bp-ai-panel { display: flex; align-items: center; gap: 32px; padding: 32px 36px; flex-wrap: wrap; }
.bp-ai-icon {
  width: 64px; height: 64px; border-radius: 16px; background: var(--bg-card);
  border: 1px solid var(--border); color: var(--primary); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.bp-ai-icon svg { width: 30px; height: 30px; }
.bp-ai-copy { flex: 1 1 340px; min-width: 260px; }
.bp-ai-title { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.bp-ai-desc { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 12px; }
.bp-ai-tagline { font-size: 13px; font-weight: 700; color: var(--text); }
.bp-ai-checklist { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
.bp-ai-check-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.bp-ai-check-item svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
@media (max-width: 900px) {
  .bp-ai-panel { padding: 28px 24px; }
}

/* Platforms We Work With — platform card grid */
.bp-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bp-platform-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 20px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bp-platform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-light); border-color: var(--primary); }
.bp-platform-mark {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border-radius: 8px; font-weight: 800; font-size: 13px; letter-spacing: 0.01em; margin-bottom: 14px;
}
.bp-platform-name { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.bp-platform-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 3px; }
.bp-platform-text { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-bottom: 12px; }
.bp-platform-text:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .bp-platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bp-platform-grid { grid-template-columns: 1fr; }
}

/* Certified. Trusted. Proven. — certification badge row */
.bp-cert-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.bp-cert-badge {
  display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px;
  border: 1px solid var(--border); border-radius: 10px; color: var(--text-dim); font-weight: 700;
  font-size: 14px; background: var(--bg-card);
}
.bp-cert-note { text-align: center; font-size: 11.5px; color: var(--text-dim); margin-top: 18px; }

/* Work card thumbnails — video play-button overlay (Media page) */
.bp-work-thumb { position: relative; }
.bp-work-play {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.28); color: var(--primary);
}
.bp-work-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 2px 0 8px; }

/* Decorative hero mockup — Media Solutions (camera / laptop timeline / clapperboard) */
.bp-media-mockup { position: relative; height: 320px; }
.bp-media-backdrop {
  position: absolute; inset: 6% 4%; border-radius: 18px;
  background: linear-gradient(150deg, #33333d, #17171d);
  box-shadow: 0 20px 40px rgba(17,24,39,.18);
}
.bp-media-clapper {
  position: absolute; right: 2%; top: 0; width: 34%; aspect-ratio: 4/3;
  background: #101014; border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.25);
  overflow: hidden; transform: rotate(4deg); padding: 10px;
}
.bp-media-clapper-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 30%;
  background-image: repeating-linear-gradient(115deg, #fff 0 10px, #101014 10px 20px);
}
.bp-media-clapper-lines { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.bp-media-clapper-lines span { height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.bp-media-clapper-lines span:nth-child(2) { width: 70%; }
.bp-media-clapper-lines span:nth-child(3) { width: 50%; }
.bp-media-laptop {
  position: absolute; left: 6%; bottom: 5%; width: 58%; aspect-ratio: 16/10;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 34px rgba(17,24,39,.16); padding: 12px;
}
.bp-media-laptop-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 4px; height: 14px; }
.bp-media-laptop-bar span { flex: 1; border-radius: 3px; }
.bp-media-laptop-bar span:nth-child(1) { background: var(--primary); }
.bp-media-laptop-bar span:nth-child(2) { background: var(--primary-hover); }
.bp-media-laptop-bar span:nth-child(3) { background: var(--border); }
.bp-media-cam {
  position: absolute; left: 0; top: 20%; width: 28%; aspect-ratio: 1/1;
  background: #1c1c22; border-radius: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center; transform: rotate(-6deg);
}
.bp-media-cam-lens { width: 46%; height: 46%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4b5563, #0b0b0e 70%); border: 3px solid #333; }
@media (max-width: 640px) {
  .bp-media-mockup { width: 100%; height: 220px; max-width: 320px; margin: 0 auto; }
}

/* Decorative hero mockup — Digital Solutions (laptop / tablet / phone UI) */
.bp-digital-mockup { position: relative; height: 320px; }
.bp-dev { position: absolute; background: #16181d; border-radius: 12px; box-shadow: 0 18px 36px rgba(17,24,39,.18); padding: 8px; }
.bp-dev-screen { width: 100%; height: 100%; background: #fff; border-radius: 6px; overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bp-dev-mark { width: 16px; height: 16px; border-radius: 5px; background: var(--primary); margin-bottom: 4px; }
.bp-dev-line { height: 5px; border-radius: 3px; background: var(--border); }
.bp-dev-line.w60 { width: 60%; }
.bp-dev-line.w40 { width: 40%; }
.bp-dev-block { flex: 1; border-radius: 6px; background: var(--bg-card-hover); }
.bp-dev-laptop { left: 2%; bottom: 4%; width: 56%; aspect-ratio: 16/10.5; padding-bottom: 16px; }
.bp-dev-laptop::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 34%; height: 8px; background: #22242b; border-radius: 0 0 4px 4px;
}
.bp-dev-tablet { right: 0; top: 4%; width: 32%; aspect-ratio: 3/4; }
.bp-dev-phone { right: 26%; bottom: 0; width: 16%; aspect-ratio: 9/18.5; z-index: 2; }
@media (max-width: 640px) {
  .bp-digital-mockup { width: 100%; height: 240px; max-width: 340px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════
   AUDIENCE TAGS — B2B / Startups / E-commerce / Creators
   From the Oct 2026 audience palette. Three states:
   default (neutral), hover (light bg + accent text),
   selected (solid accent, white text).
════════════════════════════════════════════════════════ */
:root {
  --aud-b2b-accent:       #0E34E4;
  --aud-b2b-light:        #EEF2FF;
  --aud-b2b-text:         #0E34E4;
  --aud-startups-accent:  #7C3AED;
  --aud-startups-light:   #F3EEFF;
  --aud-startups-text:    #6D28D9;
  --aud-ecommerce-accent: #00B4D8;
  --aud-ecommerce-light:  #EAF9FC;
  --aud-ecommerce-text:   #008EAA;
  --aud-creators-accent:  #A855F7;
  --aud-creators-light:   #F7EEFF;
  --aud-creators-text:    #9333EA;
}
.aud-b2b       { --aud-accent: var(--aud-b2b-accent);       --aud-light: var(--aud-b2b-light);       --aud-text: var(--aud-b2b-text); }
.aud-startups  { --aud-accent: var(--aud-startups-accent);  --aud-light: var(--aud-startups-light);  --aud-text: var(--aud-startups-text); }
.aud-ecommerce { --aud-accent: var(--aud-ecommerce-accent); --aud-light: var(--aud-ecommerce-light); --aud-text: var(--aud-ecommerce-text); }
.aud-creators  { --aud-accent: var(--aud-creators-accent);  --aud-light: var(--aud-creators-light);  --aud-text: var(--aud-creators-text); }

/* Interactive chip — wraps a (visually hidden) checkbox, or use .is-selected */
.aud-chip,
.ins2-filter-group label.aud-chip {
  position: relative;
  display: flex;
  align-items: center;
  padding: 9px 14px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  cursor: var(--cursor-dot-hover);
}
.aud-chip:hover,
.ins2-filter-group label.aud-chip:hover {
  background: var(--aud-light);
  border-color: color-mix(in srgb, var(--aud-accent) 22%, transparent);
  color: var(--aud-text);
}
.aud-chip.is-selected,
.aud-chip:has(input:checked),
.ins2-filter-group label.aud-chip:has(input:checked) {
  background: var(--aud-accent);
  border-color: var(--aud-accent);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--aud-accent) 28%, transparent);
}
.aud-chip input[type="checkbox"],
.ins2-filter-group .aud-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.aud-chip:has(input:focus-visible) {
  outline: 2px solid var(--aud-accent);
  outline-offset: 2px;
}

/* Static display tag (article / case study / glossary sidebars) */
.tag.aud-tag {
  background: var(--aud-light);
  color: var(--aud-text);
  border: 1px solid color-mix(in srgb, var(--aud-accent) 25%, transparent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   OUTBOX METHOD — GLASS CAPSULE STEP REEL
   Restyles the rolling step reel (.om-nums.is-reel, built by
   initOutboxMethod in site.js) as a frosted capsule with a raised
   "lens" band behind the current step. Layers: ::before = capsule,
   ::after = lens band, .om-reel-view = the numbers on top.
════════════════════════════════════════════════════════ */
.om-nums.is-reel {
  --om-item: 56px;           /* row height; .om-reel inherits it */
  --om-cap-w: 112px;         /* capsule width */
  --om-cap-inset: 6px;       /* capsule top/bottom gap inside the column */
  --om-active: var(--brand-blue, #0E34E4);
  border: 0;
  isolation: isolate;
}
.om-nums.is-reel::before,
.om-nums.is-reel::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
}
/* Capsule */
.om-nums.is-reel::before {
  top: var(--om-cap-inset); bottom: var(--om-cap-inset);
  width: var(--om-cap-w);
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.92) 18%, rgba(255,255,255,.92) 82%, rgba(255,255,255,.55) 100%),
    linear-gradient(90deg, rgba(14,52,228,.05), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(14,52,228,.05));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 24px 48px -28px rgba(14,52,228,.35),
    0 2px 6px rgba(17,24,39,.04),
    inset 0 0 0 1px rgba(14,52,228,.06),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -10px 24px -12px rgba(14,52,228,.10);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/* Lens band behind the current number */
.om-nums.is-reel::after {
  top: 50%;
  width: calc(var(--om-cap-w) + 10px);
  height: calc(var(--om-item) + 14px);
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FF 55%, #E8EEFF 100%);
  border: 1px solid rgba(14,52,228,.10);
  box-shadow:
    0 0 0 4px rgba(14,52,228,.04),
    0 10px 28px -6px rgba(14,52,228,.35),
    0 0 36px rgba(14,52,228,.18),
    inset 0 1px 0 #FFFFFF,
    inset 0 -2px 6px rgba(14,52,228,.08);
}
.om-nums.is-reel .om-reel-view {
  z-index: 2;
  left: 50%; right: auto;
  width: var(--om-cap-w);
  top: var(--om-cap-inset); bottom: var(--om-cap-inset);
  transform: translateX(-50%);
  border-radius: 999px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
/* The view is inset, so re-centre the reel on the column's middle. */
.om-nums.is-reel .om-reel { top: 50%; --om-item: inherit; }

.om-nums.is-reel .om-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #A3AAB9;
  padding: 0;
  border-radius: 0;
}
.om-nums.is-reel .om-num .om-num-val { opacity: .9; transform: scale(1); }
.om-nums.is-reel .om-num.is-near .om-num-val { opacity: 1; }
.om-nums.is-reel .om-num.is-current { color: var(--om-active); }
.om-nums.is-reel .om-num.is-current .om-num-val {
  opacity: 1;
  font-weight: 800;
  transform: scale(1.55);
  text-shadow: 0 4px 14px rgba(14,52,228,.25);
}
.om-nums.is-reel .om-num:hover { color: #6B7280; }
.om-nums.is-reel .om-num.is-current:hover { color: var(--om-active); }
.om-nums.is-reel .om-num:focus-visible { outline: 0; }
.om-nums.is-reel .om-num:focus-visible .om-num-val {
  outline: 2px solid var(--om-active); outline-offset: 4px; border-radius: 6px;
}
.om-nums.is-reel .om-num { transition: color .4s ease; }

@container om (max-width: 1060px) {
  .om-nums.is-reel { --om-item: 50px; --om-cap-w: 100px; }
  .om-nums.is-reel .om-num { font-size: 22px; }
}

/* Narrow: the rail runs horizontally, so the capsule lies on its side. */
@container om (max-width: 820px) {
  .om-nums.is-reel { --om-item: 60px; min-height: 76px; border: 0; }
  .om-nums.is-reel::before {
    top: 50%; bottom: auto; left: 0; right: 0;
    width: auto; height: 64px;
    transform: translateY(-50%);
  }
  .om-nums.is-reel::after {
    width: calc(var(--om-item) + 10px);
    height: 76px;
  }
  .om-nums.is-reel .om-reel-view {
    left: 0; right: 0; width: auto;
    top: 50%; bottom: auto; height: 64px;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
  }
  .om-nums.is-reel .om-num { font-size: 20px; }
  .om-nums.is-reel .om-num.is-current .om-num-val { transform: scale(1.45); }
}

/* ═══════════════════════════════════════════════════════
   INSIGHTS CAROUSEL (.ins-car) — built by initInsightCarousel in
   site.js from each page's static .bp-insight-grid. Front card on the
   left, the next two tucked behind it to the right, smaller each step.
════════════════════════════════════════════════════════ */
.has-ins-car { container-type: inline-size; container-name: inscar; }
.ins-car {
  --ins-ease: cubic-bezier(.22, .9, .24, 1);
  --ins-blue: var(--brand-blue, #0E34E4);
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2.2fr);
  align-items: center;
  gap: 0;
  padding: 56px 48px 56px 52px;
  background: linear-gradient(180deg, #F9FAFE 0%, #F4F6FC 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}
.ins-car .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Intro column */
.ins-car-intro {
  padding-right: 40px;
  margin-right: 36px;
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
.ins-car-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ins-blue); margin-bottom: 22px;
}
.ins-car-title {
  font-size: clamp(28px, 2.7vw, 40px); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.025em; color: var(--text); margin-bottom: 20px;
}
.ins-car-desc { font-size: 15px; line-height: 1.7; color: var(--text-dim); margin-bottom: 30px; max-width: 340px; }
.ins-car-all {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 10px;
  background: var(--ins-blue); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(14, 52, 228, .55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ins-car-all:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(14, 52, 228, .6); }
.ins-car-nav { display: flex; gap: 16px; margin-top: 52px; }
.ins-car-btn {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: var(--cursor-dot-hover);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ins-car-prev { background: #E9ECFB; color: var(--ins-blue); }
.ins-car-prev:hover { background: #DDE2FA; }
.ins-car-next { background: var(--ins-blue); color: #fff; box-shadow: 0 10px 22px -8px rgba(14, 52, 228, .55); }
.ins-car-btn:hover { transform: translateY(-2px); }
.ins-car-btn:focus-visible { outline: 2px solid var(--ins-blue); outline-offset: 3px; }

/* Stage: every card shares one grid cell, so the stage is as tall as the
   tallest card; data-pos moves and scales them from the left edge. */
.ins-car-stage {
  position: relative;
  display: grid;
  align-items: center;
  padding: 8px 0;
  touch-action: pan-y;
}
.ins-card {
  grid-area: 1 / 1;
  width: 45%;
  display: flex; flex-direction: column;
  padding: 22px 22px 28px;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(17, 24, 39, .05);
  box-shadow: 0 24px 50px -28px rgba(14, 52, 228, .28), 0 2px 8px rgba(17, 24, 39, .04);
  text-decoration: none; color: inherit;
  transform-origin: 0 50%;
  transition: transform .7s var(--ins-ease), opacity .5s ease, box-shadow .3s ease;
  will-change: transform;
}
.ins-card.no-anim { transition: none !important; }
.ins-card[data-pos="0"] { z-index: 4; transform: none; opacity: 1; }
.ins-card[data-pos="1"] { z-index: 3; transform: translateX(80%) scale(.86); opacity: 1; cursor: var(--cursor-dot-hover); }
.ins-card[data-pos="2"] { z-index: 2; transform: translateX(148%) scale(.74); opacity: 1; cursor: var(--cursor-dot-hover); }
.ins-card[data-pos="out-right"],
.ins-card[data-pos="hidden"] { z-index: 1; transform: translateX(190%) scale(.66); opacity: 0; pointer-events: none; }
.ins-card[data-pos="out-left"] { z-index: 5; transform: translateX(-35%) scale(.94) rotate(-2deg); opacity: 0; pointer-events: none; }
.ins-card[data-pos="0"]:hover { box-shadow: 0 30px 60px -28px rgba(14, 52, 228, .38), 0 2px 8px rgba(17, 24, 39, .05); }
.ins-card[data-pos="1"]:hover { transform: translateX(80%) scale(.87); }
.ins-card[data-pos="2"]:hover { transform: translateX(148%) scale(.75); }
.ins-card:focus-visible { outline: 2px solid var(--ins-blue); outline-offset: 4px; }

.ins-card-media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9.6; border-radius: 14px;
  background: #EEF0F8;
}
.ins-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-card-body { display: flex; flex-direction: column; padding: 22px 6px 0; }
.ins-card-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ins-card-date { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--text-dim); margin-bottom: 10px; }
.ins-card-title { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; color: var(--text); margin-bottom: 12px; }
.ins-card-desc {
  font-size: 15.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 26px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ins-card-link { font-size: 16px; font-weight: 700; color: var(--ins-blue); margin-top: auto; }
.ins-card-link span { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
.ins-card[data-pos="0"]:hover .ins-card-link span { transform: translateX(4px); }

/* Pills — categories use the solution accents, audiences the audience palette */
.ins-pill {
  --pc: var(--text-dim);
  --pt: var(--pc);
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--pt);
  border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background: #fff;
}
.ins-pill.is-solid { background: var(--pc); border-color: var(--pc); color: #fff; }
.ins-c-brand       { --pc: var(--acc-brand); }
.ins-c-ux-ui       { --pc: var(--acc-ux-ui); --pt: var(--acc-ux-ui-text); }
.ins-c-ux-ui.is-solid { color: #0B2530; }
.ins-c-performance { --pc: var(--acc-performance); }
.ins-c-data        { --pc: var(--acc-data); }
.ins-c-multimedia  { --pc: var(--acc-multimedia); }
.ins-pill[class*="aud-"] { --pc: var(--aud-accent); --pt: var(--aud-text); }

/* Generated artwork for articles without a hero image: soft, architectural
   shapes in the article's category shades (three variants). */
.ins-card-art {
  position: absolute; inset: 0; display: block;
  --a: var(--acc-brand); --b: var(--acc-brand-mid); --c: var(--acc-brand-light);
}
.ins-art-ux-ui       { --a: var(--acc-ux-ui);       --b: var(--acc-ux-ui-mid);       --c: var(--acc-ux-ui-light); }
.ins-art-performance { --a: var(--acc-performance); --b: var(--acc-performance-mid); --c: var(--acc-performance-light); }
.ins-art-data        { --a: var(--acc-data);        --b: var(--acc-data-mid);        --c: var(--acc-data-light); }
.ins-art-multimedia  { --a: var(--acc-multimedia);  --b: var(--acc-multimedia-mid);  --c: var(--acc-multimedia-light); }
.ins-art-v0 {
  background:
    radial-gradient(circle at 78% 115%, color-mix(in srgb, var(--b) 85%, #fff) 0 34%, transparent 34.5%),
    radial-gradient(circle at 78% 115%, color-mix(in srgb, var(--a) 70%, #fff) 0 46%, transparent 46.5%),
    linear-gradient(100deg, color-mix(in srgb, var(--c) 70%, #fff) 0 38%, color-mix(in srgb, var(--b) 55%, #fff) 38% 100%);
}
.ins-art-v1 {
  background:
    linear-gradient(160deg, transparent 0 52%, color-mix(in srgb, var(--a) 55%, #fff) 52% 60%, transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--b) 60%, #fff) 0 22px, color-mix(in srgb, var(--b) 75%, #fff) 22px 44px),
    linear-gradient(180deg, var(--c), color-mix(in srgb, var(--b) 60%, #fff));
}
.ins-art-v2 {
  background:
    radial-gradient(ellipse 70% 55% at 30% 100%, #fff 0 60%, transparent 61%),
    radial-gradient(ellipse 90% 70% at 30% 100%, color-mix(in srgb, var(--c) 80%, #fff) 0 60%, transparent 61%),
    repeating-radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--b) 55%, #fff) 0 6px, color-mix(in srgb, var(--a) 45%, #fff) 6px 9px);
}

/* Medium widths: tighter type, smaller arrows */
@container inscar (max-width: 1100px) {
  .ins-car { padding: 44px 32px 44px 38px; grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr); }
  .ins-car-intro { padding-right: 28px; margin-right: 26px; }
  .ins-card { padding: 16px 16px 22px; }
  .ins-card-title { font-size: 21px; }
  .ins-card-desc { font-size: 14px; margin-bottom: 18px; }
  .ins-card-link { font-size: 14px; }
  .ins-card-body { padding-top: 16px; }
  .ins-card-pills { margin-bottom: 14px; }
  .ins-car-nav { margin-top: 36px; }
}

/* Narrow: intro on top, stack below with the front card wider */
@container inscar (max-width: 760px) {
  .ins-car { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; row-gap: 28px; }
  .ins-car-intro { padding-right: 0; margin-right: 0; border-right: 0; }
  .ins-car-desc { margin-bottom: 22px; }
  .ins-car-nav { margin-top: 24px; }
  .ins-car-btn { width: 48px; height: 48px; }
  .ins-card { width: 74%; }
  .ins-card[data-pos="1"] { transform: translateX(30%) scale(.88); }
  .ins-card[data-pos="2"] { transform: translateX(52%) scale(.78); }
  .ins-card[data-pos="1"]:hover { transform: translateX(30%) scale(.88); }
  .ins-card[data-pos="2"]:hover { transform: translateX(52%) scale(.78); }
  .ins-card[data-pos="out-right"], .ins-card[data-pos="hidden"] { transform: translateX(70%) scale(.7); }
  .ins-card-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ins-card { transition: opacity .2s ease; }
}

/* ── INSIGHTS CAROUSEL — DARK THEME (Oct 2026 design) ──
   Overrides the light .ins-car styles above: near-black panel, dark
   cards, light type, periwinkle links and indigo controls. */
.ins-car {
  --ins-ink:     #F4F5FA;
  --ins-muted:   #A1A5B5;
  --ins-dim:     #7C8094;
  --ins-line:    rgba(255, 255, 255, .08);
  --ins-card:    #121319;
  --ins-link:    #7C82FF;
  --ins-indigo:  #5B5CF6;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(91, 92, 246, .07), transparent 55%),
    #0B0C10;
  border: 1px solid var(--ins-line);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6);
  color: var(--ins-ink);
}
.ins-car-intro { border-right: 0; }
.ins-car-eyebrow { color: var(--ins-link); display: inline-flex; align-items: center; gap: 16px; }
.ins-car-eyebrow::after { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.ins-car-title { color: var(--ins-ink); font-weight: 600; letter-spacing: -0.01em; }
.ins-car-dot { color: var(--ins-indigo); }
.ins-car-desc { color: var(--ins-muted); }
.ins-car-all {
  background: var(--ins-indigo); border-radius: 999px; padding: 13px 26px;
  box-shadow: 0 10px 26px -10px rgba(91, 92, 246, .7);
}
.ins-car-all:hover { background: #6B6CF8; box-shadow: 0 14px 30px -10px rgba(91, 92, 246, .8); }
.ins-car-prev { background: transparent; color: var(--ins-ink); border: 1px solid rgba(255, 255, 255, .14); }
.ins-car-prev:hover { background: rgba(255, 255, 255, .06); }
.ins-car-next { background: var(--ins-indigo); color: #fff; box-shadow: 0 10px 26px -8px rgba(91, 92, 246, .75); }
.ins-car-btn:focus-visible, .ins-card:focus-visible { outline-color: var(--ins-link); }

.ins-card {
  background: linear-gradient(180deg, #15161D 0%, var(--ins-card) 100%);
  border: 1px solid var(--ins-line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .03);
  padding: 16px 16px 26px;
  border-radius: 20px;
}
.ins-card[data-pos="0"]:hover {
  border-color: rgba(124, 130, 255, .28);
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(124, 130, 255, .12);
}
.ins-card[data-pos="1"], .ins-card[data-pos="2"] { filter: brightness(.92); }
.ins-card-media { background: #0E0F15; border: 1px solid var(--ins-line); border-radius: 14px; }
.ins-card-body { padding: 18px 8px 0; }
.ins-card-pills { gap: 6px; margin-bottom: 16px; }
.ins-card-date { color: var(--ins-muted); letter-spacing: .2em; font-weight: 500; }
.ins-card-title { color: var(--ins-ink); font-weight: 600; letter-spacing: -0.005em; }
.ins-card-desc { color: var(--ins-muted); }
.ins-card-link { color: var(--ins-link); font-weight: 600; }

/* Pills: small solid chips on dark */
.ins-car .ins-pill {
  padding: 4px 10px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
  border: 0; background: var(--pc); color: #fff;
}
.ins-car .ins-c-brand { --pc: #3A4FC4; }           /* Strategic Navy is too dark on black; use its mid shade */
.ins-car .ins-c-ux-ui,
.ins-car .ins-c-ux-ui.is-solid { color: #06222B; }
.ins-car .ins-pill[class*="aud-"] {
  background: color-mix(in srgb, var(--aud-accent) 22%, transparent);
  color: color-mix(in srgb, var(--aud-accent) 55%, #fff);
}

/* Generated artwork, re-mixed toward black for the dark cards */
.ins-car .ins-art-v0 {
  background:
    radial-gradient(circle at 78% 115%, color-mix(in srgb, var(--b) 55%, #0B0C10) 0 34%, transparent 34.5%),
    radial-gradient(circle at 78% 115%, color-mix(in srgb, var(--a) 45%, #0B0C10) 0 46%, transparent 46.5%),
    linear-gradient(100deg, color-mix(in srgb, var(--a) 22%, #0E0F15) 0 38%, color-mix(in srgb, var(--b) 30%, #0E0F15) 38% 100%);
}
.ins-car .ins-art-v1 {
  background:
    linear-gradient(160deg, transparent 0 50%, color-mix(in srgb, var(--a) 80%, #0B0C10) 50% 56%, transparent 56%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--a) 22%, #0E0F15) 0 22px, color-mix(in srgb, var(--a) 30%, #0E0F15) 22px 44px),
    #0E0F15;
}
.ins-car .ins-art-v2 {
  background:
    radial-gradient(ellipse 70% 55% at 30% 100%, color-mix(in srgb, var(--c) 30%, #0E0F15) 0 60%, transparent 61%),
    radial-gradient(ellipse 90% 70% at 30% 100%, color-mix(in srgb, var(--b) 35%, #0E0F15) 0 60%, transparent 61%),
    repeating-radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--a) 28%, #0E0F15) 0 6px, color-mix(in srgb, var(--a) 16%, #0E0F15) 6px 9px);
}

/* Full-bleed: the black runs edge to edge of the viewport while the
   content stays in the page column (same technique as .wwo — shadow
   paints the sides, clip-path trims it to the band's height, so there
   is no horizontal scroll). */
.ins-car {
  background: #0B0C10;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 100vmax #0B0C10;
  clip-path: inset(0 -100vmax);
  padding: 72px 0;
  margin: 56px 0;
}
@container inscar (max-width: 1100px) {
  .ins-car { padding: 60px 0; }
}
@container inscar (max-width: 760px) {
  .ins-car { padding: 48px 0; margin: 40px 0; }
}

/* ═══════════════════════════════════════════════════════
   DARK HERO (Oct 2026) — every inner-page hero (.bp-hero on solution /
   work / approach pages, .v2-inner-hero everywhere else) sits on a
   full-bleed black band with a blue diagonal glow on the right. White
   heading whose last word is picked out in blue (initHeroAccent in
   site.js), light lead copy, solid blue CTA.
════════════════════════════════════════════════════════ */
:root {
  --hero-bg: #020308;
  --hero-ink: #F5F6FA;
  --hero-sub: #C9CDD8;
  --hero-dim: #8E94A6;
  --hero-accent: #1F4DFF;
}
/* The strip behind the floating nav pill turns black too, so the band
   runs from the very top of the page. */
body:has(.bp-hero, .v2-inner-hero) .nav-header { background: var(--hero-bg); }

.bp-hero,
.v2-inner-hero {
  position: relative;
  isolation: isolate;
  color: var(--hero-ink);
}
.bp-hero::before,
.v2-inner-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px; bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;     /* clipped by .v2-main's overflow, so no h-scroll */
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--hero-bg) 0, transparent 110px),   /* blend into the black strip behind the nav */
    radial-gradient(34% 62% at 84% 26%, rgba(36, 78, 255, .62) 0%, rgba(14, 52, 228, .22) 42%, transparent 70%),
    radial-gradient(26% 44% at 66% 98%, rgba(14, 52, 228, .38) 0%, transparent 72%),
    linear-gradient(118deg, transparent 50%, rgba(28, 66, 255, .20) 63%, rgba(14, 52, 228, .08) 70%, transparent 80%),
    radial-gradient(60% 80% at 100% 0%, rgba(14, 52, 228, .18), transparent 70%),
    var(--hero-bg);
}

/* Spacing */
.bp-hero { padding: 72px 0 112px; }
.bp-hero.pillar-accent-rule { border-left: 0; padding-left: 0; }
.v2-inner-hero { padding: 72px 40px 104px; }

/* Type */
.bp-hero .bp-hero-h1,
.v2-inner-hero .v2-inner-h1 {
  color: var(--hero-ink) !important;   /* beats the per-page inline pillar colour */
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 780px;
}
.bp-hero .bp-hero-h1 { font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 28px; }
.hero-accent,
.bp-hero .bp-hero-h1 em,
.v2-inner-hero .v2-inner-h1 em { color: var(--hero-accent); font-style: normal; }
.bp-hero .bp-hero-strong {
  color: var(--hero-sub); font-size: 17px; font-weight: 400; line-height: 1.6;
  max-width: 540px; margin-bottom: 14px;
}
.bp-hero .bp-hero-desc { color: var(--hero-dim); }
.bp-hero .bp-hero-actions { margin-top: 26px; }
.v2-inner-hero .v2-inner-eyebrow { color: #7C93FF; }
.v2-inner-hero .v2-inner-lead { color: var(--hero-sub); font-size: 16px; line-height: 1.7; }
.v2-inner-hero .v2-inner-count { color: var(--hero-dim); }
.v2-inner-hero .v2-inner-back a { color: var(--hero-dim); }
.v2-inner-hero .v2-inner-back a:hover { color: #fff; }
.v2-inner-hero .v2-inner-hero-actions { margin-top: 30px; }
/* Glossary category eyebrows: navy / dark accents vanish on black */
.v2-inner-hero .gd-eyebrow.cat-brand { color: #7C93FF; }
.v2-inner-hero .gd-eyebrow.cat-media { color: #C9A2FF; }

/* Buttons */
.bp-hero .btn-pillar,
.bp-hero .btn-blue,
.v2-inner-hero .btn-blue {
  background: var(--brand-blue, #0E34E4);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 16px 30px;
  font-weight: 600;
  box-shadow: 0 12px 28px -12px rgba(14, 52, 228, .8);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bp-hero .btn-pillar:hover,
.bp-hero .btn-blue:hover,
.v2-inner-hero .btn-blue:hover {
  background: #2448F0; opacity: 1; transform: translateY(-1px);
  box-shadow: 0 16px 32px -12px rgba(14, 52, 228, .9);
}
.bp-hero .btn-pillar::after { content: "→"; margin-left: 14px; display: inline-block; transition: transform .2s ease; }
.bp-hero .btn-pillar:hover::after { transform: translateX(3px); }
.bp-hero .btn-outline,
.v2-inner-hero .btn-outline {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px;
}
.bp-hero .btn-outline:hover,
.v2-inner-hero .btn-outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }

@media (max-width: 760px) {
  .bp-hero { padding: 48px 0 72px; }
  .v2-inner-hero { padding: 48px 20px 72px; }
  .bp-hero .bp-hero-strong { font-size: 15.5px; }
  .bp-hero::before, .v2-inner-hero::before {
    background:
      linear-gradient(to bottom, var(--hero-bg) 0, transparent 80px),
      radial-gradient(70% 45% at 95% 15%, rgba(36, 78, 255, .5) 0%, transparent 70%),
      radial-gradient(60% 40% at 70% 100%, rgba(14, 52, 228, .3) 0%, transparent 72%),
      var(--hero-bg);
  }
}

/* The nav pill is 85% white; over the black hero that reads grey, so
   make it solid on dark-hero pages. */
body:has(.bp-hero, .v2-inner-hero) .nav-inner { background: rgba(255, 255, 255, .98); border-color: rgba(255, 255, 255, .6); }

/* Article sidebar: categories and tags share one block and are labels,
   not links. */
.side-pill-row-tags { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
span.side-cat-pill { cursor: default; }
span.side-cat-pill:hover { transform: none; }

/* Listing pages (Insights / Case Studies): space between the dark hero and the filter row */
.v2-inner-hero + .ins2-page { padding-top: 44px; }

/* Pillar-page stats row — restyled to match the About page stats card:
   white rounded card, large indigo figures, quiet labels, no icons. */
.bp-stats {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-light);
  padding: 40px 32px;
  gap: 24px;
  align-items: start;
}
.bp-stats .bp-stat-icon { display: none; }
.bp-stats .bp-stat-num {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--primary);
}
.bp-stats .bp-stat-label {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .bp-stats { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
}
@media (max-width: 640px) {
  .bp-stats, .bp-stats.bp-cols-6 { grid-template-columns: repeat(2, 1fr); padding: 30px 20px; }
}

/* Step reel: no pill ends — the capsule is trimmed to exactly seven full
   rows (three above the current step, three below) as a rounded
   rectangle, so no half-cut numbers peek out at the top and bottom. */
.om-nums.is-reel { --om-rows: 7; --om-cap-pad: 10px; }
.om-nums.is-reel::before,
.om-nums.is-reel .om-reel-view {
  top: 50%; bottom: auto;
  height: calc(var(--om-item) * var(--om-rows) + var(--om-cap-pad) * 2);
  transform: translate(-50%, -50%);
  border-radius: 22px;
}
.om-nums.is-reel .om-reel-view {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
@container om (max-width: 820px) {
  .om-nums.is-reel::before,
  .om-nums.is-reel .om-reel-view {
    top: 50%; left: 0; right: 0; width: auto;
    height: 64px;
    transform: translateY(-50%);
    border-radius: 18px;
  }
  .om-nums.is-reel .om-reel-view {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}

/* Step reel: slimmer capsule */
.om-nums.is-reel { --om-cap-w: 96px; }
@container om (max-width: 1060px) {
  .om-nums.is-reel { --om-cap-w: 84px; }
}

/* Outbox Method: shorter section (about 50px less height) */
.om-grid { padding-top: 36px; padding-bottom: 36px; }
.om-deck { min-height: 380px; }
@container om (max-width: 1060px) {
  .om-grid { padding-top: 32px; padding-bottom: 32px; }
}

/* Step reel: capsule runs almost the full height of the section — taller
   rows so the same seven full numbers fill it (no half-cut numbers). */
.om-nums.is-reel { --om-item: 68px; }
.om-nums.is-reel .om-num { font-size: 28px; }
@container om (max-width: 1060px) {
  .om-nums.is-reel { --om-item: 60px; }
  .om-nums.is-reel .om-num { font-size: 24px; }
}
@container om (max-width: 820px) {
  .om-nums.is-reel { --om-item: 60px; }
  .om-nums.is-reel .om-num { font-size: 20px; }
}

/* Proficiency card: the label + badge lists under the bars (Platforms
   Managed, Frameworks Used, Tools Used, …) are hidden site-wide. The
   markup stays in each page so they can be brought back by deleting
   this rule. */
.sol-prof-platforms-label,
.sol-prof-platforms { display: none !important; }

/* Outbox Method cards: title pinned to the top of the card, description
   pinned to the bottom just above the progress bar (was centred). */
.om-card { align-items: stretch; padding: 46px 60px 62px; }
.om-card-body {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; min-height: 100%;
}
.om-card-title { margin-bottom: 24px; }
@container om (max-width: 1060px) {
  .om-card { padding: 36px 38px 56px; }
}
@container om (max-width: 820px) {
  .om-card { padding: 28px 26px 48px; }
}

/* What We Offer: intro sits at the top of its column, level with row 01
   (was vertically centred). */
.wwo-intro { justify-content: flex-start; padding-top: 18px; }
@container wwo (max-width: 980px) {
  .wwo-intro { padding-top: 0; }
}

/* Outbox Method: smaller card stack (shorter and narrower), centred in
   its column next to the step capsule. */
.om-stage { align-items: center; justify-content: center; }
.om-deck { min-height: 310px; max-width: 500px; flex: 1 1 auto; margin-top: 60px; }
.om-card { padding: 36px 44px 54px; }
.om-card-title { font-size: clamp(24px, 2.2vw, 32px); }
.om-progress { left: 44px; right: 44px; bottom: 24px; }
@container om (max-width: 1060px) {
  .om-deck { min-height: 290px; }
  .om-card { padding: 30px 32px 50px; }
  .om-progress { left: 32px; right: 32px; }
}
@container om (max-width: 820px) {
  .om-deck { max-width: none; min-height: 230px; margin-top: 54px; }
  .om-card { padding: 26px 24px 46px; }
  .om-progress { left: 24px; right: 24px; bottom: 20px; }
}

/* Outbox Method: no autoplay progress bar on the card */
.om-progress { display: none !important; }
.om-card { padding-bottom: 38px; }
@container om (max-width: 1060px) { .om-card { padding-bottom: 32px; } }
@container om (max-width: 820px)  { .om-card { padding-bottom: 28px; } }

/* Insights carousel: smaller card date */
.ins-card-date { font-size: 8px; }

/* Insights carousel: light cards on the dark band — #FEFEFE fading to
   #F7F8FB, with dark text so it stays readable. */
.ins-car .ins-card {
  background: linear-gradient(180deg, #FEFEFE 0%, #F7F8FB 100%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .15);
}
.ins-car .ins-card[data-pos="0"]:hover {
  border-color: #fff;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(91, 92, 246, .25);
}
.ins-car .ins-card[data-pos="1"], .ins-car .ins-card[data-pos="2"] { filter: brightness(.9); }
.ins-car .ins-card-media { border-color: rgba(17, 24, 39, .06); }
.ins-car .ins-card-date  { color: #6B7280; }
.ins-car .ins-card-title { color: #111827; }
.ins-car .ins-card-desc  { color: #6B7280; }
.ins-car .ins-card-link  { color: #4F46E5; }

/* Insights carousel: card headings in brand blue */
.ins-car .ins-card-title { color: var(--brand-blue, #0E34E4); }

/* ── Insights carousel: layout & spacing fixes ──
   - Intro gets a fixed column; the card stack fills the rest of the row.
   - Back cards tuck only ~1.5% behind the card in front of them (like the
     dark reference) so their text is never cut mid-word. Geometry, in
     stage widths: front 41%, back cards scaled .82 / .70, right edge of
     the last card lands on 100%.
   - Lighter dimming so white back cards don't turn grey. */
.ins-car {
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  column-gap: 64px;
}
.ins-car-intro { padding-right: 0; margin-right: 0; }
.ins-card { width: 41%; }
.ins-card[data-pos="1"],
.ins-card[data-pos="1"]:hover { transform: translateX(96%) scale(.82); }
.ins-card[data-pos="2"],
.ins-card[data-pos="2"]:hover { transform: translateX(175%) scale(.70); }
.ins-card[data-pos="out-right"],
.ins-card[data-pos="hidden"] { transform: translateX(215%) scale(.62); }
.ins-car .ins-card[data-pos="1"] { filter: brightness(.95); }
.ins-car .ins-card[data-pos="2"] { filter: brightness(.9); }
.ins-card-body { padding: 20px 8px 0; }
.ins-card-pills { margin-bottom: 14px; }
.ins-card-date  { margin-bottom: 8px; }
.ins-card-title { margin-bottom: 10px; }
.ins-card-desc  { margin-bottom: 22px; }

@container inscar (max-width: 1100px) {
  .ins-car { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); column-gap: 44px; }
}
/* Phones: only a sliver of the back cards fits, so fade their text
   rather than show it cut off. */
@container inscar (max-width: 760px) {
  .ins-car { grid-template-columns: minmax(0, 1fr); }
  .ins-card { width: 76%; }
  .ins-card[data-pos="1"], .ins-card[data-pos="1"]:hover { transform: translateX(26%) scale(.86); }
  .ins-card[data-pos="2"], .ins-card[data-pos="2"]:hover { transform: translateX(44%) scale(.74); }
  .ins-card[data-pos="out-right"], .ins-card[data-pos="hidden"] { transform: translateX(60%) scale(.66); }
  .ins-card:not([data-pos="0"]) .ins-card-body { opacity: 0; transition: opacity .3s ease; }
}

/* Carousel: front card 40% so the last back card ends just inside the column */
.ins-card { width: 40%; }
@container inscar (max-width: 760px) { .ins-card { width: 76%; } }

/* Case studies are hidden site-wide for now: any content block or section
   holding case study cards ("Case Studies" / "Our Work Speaks") is not
   shown. Delete this rule to bring them back. */
:is(.sol-block, .bp-section):has(.bp-work-card) { display: none !important; }

/* ═══════════════════════════════════════════════════════
   CAREERS — why-join column + application form with PDF upload
════════════════════════════════════════════════════════ */
.car-page { max-width: 1200px; margin: 0 auto; padding: 64px 24px 88px; }
.car-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }

.car-side { position: sticky; top: 110px; }
.car-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 16px; }
.car-h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; }
.car-h2 em { font-style: normal; color: var(--brand-blue, #0E34E4); }
.car-lead { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin-bottom: 30px; max-width: 460px; }

.car-perks { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.car-perks li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.car-perks strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 2px; }
.car-perk-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.car-perk-icon svg { width: 20px; height: 20px; }

.car-steps { padding-top: 28px; border-top: 1px solid var(--border); }
.car-steps ol { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.car-steps li { display: flex; gap: 14px; align-items: baseline; font-size: 14px; color: var(--text-muted); }
.car-steps li span { font-size: 12px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

.car-form-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px;
  padding: 36px; box-shadow: 0 20px 50px -30px rgba(14, 52, 228, .25), var(--shadow-light);
  scroll-margin-top: 110px;
}
.car-form-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.car-form-sub { font-size: 13.5px; color: var(--text-dim); margin-bottom: 26px; }
.car-row-2 { grid-template-columns: 1fr 1fr; }

/* PDF drop zone */
.car-drop {
  position: relative; display: block;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 14px; background: color-mix(in srgb, var(--primary) 3%, var(--bg-card));
  padding: 26px 20px; text-align: center;
  cursor: var(--cursor-dot-hover);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.car-drop:hover, .car-drop.is-drag {
  border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--bg-card));
}
.car-drop.is-drag { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.car-drop:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
.car-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.car-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.car-drop-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.car-drop-icon svg { width: 22px; height: 22px; }
.car-drop-text { font-size: 14px; color: var(--text-muted); }
.car-drop-text strong { color: var(--text); }
.car-drop-text u { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.car-drop-hint { font-size: 12px; color: var(--text-dim); }
.car-drop.has-file { border-style: solid; padding: 14px 16px; text-align: left; }
.car-drop.has-file .car-file { pointer-events: none; }
.car-drop-file { display: flex; align-items: center; gap: 14px; }
.car-drop-file[hidden], .car-drop-empty[hidden] { display: none; }
.car-pdf-badge {
  flex-shrink: 0; width: 42px; height: 48px; border-radius: 8px;
  display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 7px;
  background: #E5484D; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
}
.car-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.car-file-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-file-size { font-size: 12px; color: var(--text-dim); }
.car-file-remove {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-dim); font-size: 18px; line-height: 1;
  cursor: var(--cursor-dot-hover);
}
.car-file-remove:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--border)); }

.car-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text-muted); cursor: var(--cursor-dot-hover); }
.car-consent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); }

.car-success { text-align: center; padding: 40px 12px 20px; }
.car-success[hidden] { display: none; }
.car-success-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success);
}
.car-success-icon svg { width: 28px; height: 28px; }
.car-success h3 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.car-success p { font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 420px; margin: 0 auto; }

@media (max-width: 960px) {
  .car-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .car-side { position: static; }
}
@media (max-width: 600px) {
  .car-page { padding: 40px 16px 64px; }
  .car-form-card { padding: 24px 18px; border-radius: 18px; }
  .car-row-2 { grid-template-columns: 1fr; }
}

/* Footer — Follow Us (under Let's Talk) */
.ofoot-col h4.ofoot-follow-title { margin-top: 30px; }
.ofoot-social { display: flex; flex-wrap: wrap; gap: 10px; }
.ofoot-col a.ofoot-social-link {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-muted);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.ofoot-col a.ofoot-social-link:hover {
  color: #fff; background: var(--brand-blue, #0E34E4); border-color: var(--brand-blue, #0E34E4);
  transform: translateY(-2px);
}
.ofoot-col a.ofoot-social-link:focus-visible { outline: 2px solid var(--brand-blue, #0E34E4); outline-offset: 2px; }

/* Follow Us: six icons on one row */
.ofoot-social { gap: 7px; }
.ofoot-col a.ofoot-social-link { width: 34px; height: 34px; }
.ofoot-col a.ofoot-social-link svg { width: 15px; height: 15px; }