@charset "UTF-8";
/* =============================================================================
   Design tokens — vendored from the Claude Design project
   "jason-cypret-design-system-2412fe10".

   These are plain CSS custom properties on purpose: they are the contract the
   new component layer reads from, and they can be consumed by any future
   runtime (Nunjucks today, React/Astro later) without a Sass dependency.

   Do not hand-edit values here — change them in the design project and re-sync.
   ========================================================================== */
/* --- Typeface ------------------------------------------------------------ */
:root {
  --font-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-icon: "jasonicon";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* --- Palette -------------------------------------------------------------
   Base scale first, then semantic aliases. Light is the default theme;
   [data-theme="dark"] re-points the same semantic names. */
:root {
  /* Neutrals */
  --black: #000000;
  --charcoal: #242B42;
  --gray-600: #687887;
  --slate: #C1CDD6;
  --border-light: #E4E8F0;
  --gray-100: #F2F4F7;
  --silver: #F3F7FB;
  --white: #FFFFFF;
  --near-black: #08080a;
  --indigo-black: #0a0527;
  --indigo-card: #231E3D;
  /* Accents */
  --royal: #0400FF;
  --blue-electric: #3300FF;
  --blue-bright: #0082ff;
  --purple: #9E64E9;
  --teal: #00C4D7;
  --green: #1CA05C;
  --green-text: #157F48;
  --green-dk-text: #00CA74;
  --yellow: #F9BB00;
  --orange: #FD804C;
  --red: #DA0014;
  --red-soft: #ff4a50;
  /* Semantic — surfaces */
  --canvas: var(--white);
  --canvas-alt: var(--silver);
  --surface-card: var(--white);
  --surface-sunken: var(--silver);
  --surface-tile: var(--gray-100);
  --surface-inverse: var(--near-black);
  /* Opaque enough that the sticky nav's dark text stays legible when it passes
     over the dark Worlds splash and the brand showcase panels. Matches the
     hero badge's glass. 0.25 looked good over white and failed over dark. */
  --surface-glass: rgba(255, 255, 255, 0.72);
  --scrim: rgba(0, 0, 0, 0.55);
  /* Semantic — text */
  --text-heading: var(--black);
  --text-body: var(--charcoal);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--slate);
  --text-on-dark: var(--white);
  --text-on-dark-secondary: rgba(255, 255, 255, 0.7);
  --text-on-dark-tertiary: rgba(255, 255, 255, 0.4);
  --text-link: var(--royal);
  --text-link-hover: var(--black);
  /* Semantic — lines & action */
  --border: var(--border-light);
  --border-strong: var(--slate);
  --border-glass: rgba(228, 232, 240, 0.3);
  --action-primary: var(--black);
  --action-primary-text: var(--white);
  --action-accent: var(--royal);
  --action-hover-wash: rgba(4, 0, 255, 0.1);
  --focus-ring: var(--royal);
  /* Semantic — status */
  --success: var(--green);
  --success-text: var(--green-text);
  --success-subtle: rgba(28, 160, 92, 0.1);
  --warning: var(--yellow);
  --warning-subtle: rgba(249, 187, 0, 0.1);
  --danger: var(--red);
  --danger-subtle: rgba(218, 0, 20, 0.1);
  --info: var(--teal);
  --info-subtle: rgba(0, 196, 215, 0.1);
}

/* Dark palette. Defined once as a mixin, then emitted three times so all three
   theme states resolve correctly:
     1. OS prefers dark and the visitor has made no explicit choice
     2. the visitor explicitly chose dark   -> [data-theme="dark"]
     3. the visitor explicitly chose light  -> excluded from (1) via :not()
   Any element can also opt into dark locally (the Worlds splash does). */
:root {
  --panel-glass: rgba(255, 255, 255, 0.68);
  --panel-glass-border: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --canvas: var(--near-black);
    --canvas-alt: #0c0c0e;
    --surface-card: #111113;
    --surface-sunken: #0c0c0e;
    --surface-tile: #17171a;
    --surface-inverse: var(--white);
    --surface-glass: rgba(8, 8, 10, 0.6);
    --scrim: rgba(0, 0, 0, 0.7);
    --text-heading: var(--white);
    --text-body: var(--white);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --text-link: var(--blue-bright);
    --text-link-hover: var(--white);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-glass: rgba(255, 255, 255, 0.08);
    --action-primary: var(--white);
    --action-primary-text: var(--black);
    --action-accent: var(--blue-bright);
    --action-hover-wash: rgba(255, 255, 255, 0.1);
    --focus-ring: var(--blue-bright);
    --success-text: var(--green-dk-text);
    --danger: var(--red-soft);
    /* Frosted panels that sit on photography need to invert with the theme. */
    --panel-glass: rgba(18, 18, 22, 0.72);
    --panel-glass-border: rgba(255, 255, 255, 0.14);
    /* Shadows read as ambient light in light mode and as depth in dark mode. */
    --shadow-ambient: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-raised: 0 15px 40px rgba(0, 0, 0, 0.65);
    --shadow-cta: 0 8px 25px rgba(0, 130, 255, 0.35);
  }
}
[data-theme=dark] {
  --canvas: var(--near-black);
  --canvas-alt: #0c0c0e;
  --surface-card: #111113;
  --surface-sunken: #0c0c0e;
  --surface-tile: #17171a;
  --surface-inverse: var(--white);
  --surface-glass: rgba(8, 8, 10, 0.6);
  --scrim: rgba(0, 0, 0, 0.7);
  --text-heading: var(--white);
  --text-body: var(--white);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --text-link: var(--blue-bright);
  --text-link-hover: var(--white);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-glass: rgba(255, 255, 255, 0.08);
  --action-primary: var(--white);
  --action-primary-text: var(--black);
  --action-accent: var(--blue-bright);
  --action-hover-wash: rgba(255, 255, 255, 0.1);
  --focus-ring: var(--blue-bright);
  --success-text: var(--green-dk-text);
  --danger: var(--red-soft);
  /* Frosted panels that sit on photography need to invert with the theme. */
  --panel-glass: rgba(18, 18, 22, 0.72);
  --panel-glass-border: rgba(255, 255, 255, 0.14);
  /* Shadows read as ambient light in light mode and as depth in dark mode. */
  --shadow-ambient: 0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-raised: 0 15px 40px rgba(0, 0, 0, 0.65);
  --shadow-cta: 0 8px 25px rgba(0, 130, 255, 0.35);
}

/* Use for the handful of rules that can't be expressed as a token swap —
   mostly `filter` on logos that need inverting. Emits both the OS-preference
   and the explicit-toggle selector, so a rule can never work in one dark path
   and silently fail in the other.

     .jc-nav__logo img { @include when-dark { filter: brightness(0) invert(1); } }
*/
/* --- Type scale ---------------------------------------------------------- */
:root {
  --text-display: 64px;
  --text-display-sm: 54px;
  --text-jumbo: 48px;
  --text-h1: 46px;
  --text-h2: 36px;
  --text-h3: 34px;
  --text-h4: 32px;
  --text-h5: 28px;
  --text-lead: 24px;
  --text-lg: 21px;
  --text-md: 20px;
  --text-base: 16px;
  --text-sm: 15px;
  --text-body-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 11px;
  --text-stat: 64px;
  --text-stat-sm: 60px;
  --text-stat-xl: 96px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-heading: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;
  --leading-prose: 1.98;
  --tracking-tightest: -0.1em;
  --tracking-tighter: -0.07em;
  --tracking-tight: -0.01em;
  --tracking-display: -0.03em;
  --tracking-display-md: -0.035em;
  --tracking-normal: 0;
  --tracking-loose: 0.03em;
  --tracking-looser: 0.07em;
  --tracking-loosest: 0.1em;
  --reading-width: 700px;
  --measure-wide: 1120px;
  --container-max: 1290px;
}

/* --- Spacing ------------------------------------------------------------- */
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 40px;
  --space-2xl: 50px;
  --space-3xl: 68px;
  --space-4xl: 120px;
  --gutter: var(--space-md);
  --bento-gap: var(--space-sm);
  --section-y: 3.4375rem;
  --section-y-lg: 7.5rem;
}

/* --- Radii --------------------------------------------------------------- */
:root {
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-bento: 14px;
  --radius-3xl: 16px;
  --radius-showcase: 40px;
  --radius-pill: 1000px;
  --radius-circle: 50%;
}

/* --- Elevation ----------------------------------------------------------- */
:root {
  --shadow-ambient: 0 2px 8px rgba(60, 106, 172, 0.2);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-raised: 0 15px 40px rgba(0, 0, 0, 0.15);
  --shadow-cta: 0 8px 25px rgba(4, 0, 255, 0.3);
  --shadow-media: 0 0 20px rgba(0, 0, 0, 0.5);
  --blur-glass: blur(20px) saturate(180%) contrast(120%);
  --blur-glass-heavy: blur(25px) saturate(180%) contrast(120%);
}

/* (dark shadow values live in the dark-palette mixin above) */
/* --- Motion -------------------------------------------------------------- */
:root {
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.3s;
  --dur-slower: 0.4s;
  --dur-reveal: 0.8s;
  --ease-standard: ease;
  --ease-out: ease-out;
  --ease-button: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-swift: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-soft: cubic-bezier(0.39, 0.575, 0.565, 1);
  --lift-sm: translateY(-2px);
  --lift-lg: translateY(-8px);
  --scale-hover: 1.02;
  --scale-press: 0.98;
}

/* --- Brand gradients -----------------------------------------------------
   One per company, never decoration. */
:root {
  --grad-power: linear-gradient(103.44deg, #1a458f 1.5%, #357af1 97.38%);
  --grad-bloomboard: linear-gradient(103.44deg, #6D5AB9 1.5%, #0D33CB 97.38%);
  --grad-brainspace: linear-gradient(103.44deg, #00716E 1.5%, #30B3AD 97.38%);
  --grad-boxboard: linear-gradient(135deg, #6A11CB 0%, #2575FC 99.89%);
  --grad-article: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  --grad-quote: linear-gradient(120deg, #000000 0%, #030c76 100%);
  --grad-resume: linear-gradient(-132deg, #F09819 0%, #FF5858 100%);
  --grad-worlds:
    linear-gradient(100deg, #050508 0%, rgba(5, 5, 8, .94) 20%, rgba(5, 5, 8, .55) 42%, rgba(5, 5, 8, 0) 66%),
    radial-gradient(110% 130% at 76% 18%, #5B3BEA 0%, rgba(91, 59, 234, 0) 60%),
    radial-gradient(70% 100% at 98% 96%, rgba(255, 128, 76, .4) 0%, rgba(255, 128, 76, 0) 58%),
    radial-gradient(120% 130% at 62% 74%, #1B3FD8 0%, rgba(27, 63, 216, 0) 64%),
    #050508;
}

@font-face {
  font-family: "jasonicon";
  src: url("/fonts/jasonicon.eot");
  src: url("/fonts/jasonicon.eot?#iefix") format("embedded-opentype"), url("/fonts/jasonicon.woff") format("woff"), url("/fonts/jasonicon.ttf") format("truetype"), url("/fonts/jasonicon.svg#jasonicon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[data-icon], [class^=icon-], [class*=" icon-"] {
  vertical-align: middle;
}

[data-icon]:before {
  font-family: "jasonicon" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^=icon-]:before,
[class*=" icon-"]:before {
  font-family: "jasonicon" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-angle-left:before {
  content: "a";
}

.icon-dribbble:before {
  content: "c";
}

.icon-pintrest:before {
  content: "e";
}

.icon-github:before {
  content: "b";
}

/* The GitHub glyph was exported with more built-in padding than its
   siblings (LinkedIn, X), so it reads smaller at the same font-size —
   scale it up in place to visually match. */
.icon-github {
  display: inline-block;
  transform: scale(1.3);
}

.icon-arrow-down:before {
  content: "d";
}

.icon-arrow-right:before {
  content: "f";
}

.icon-block-question:before {
  content: "g";
}

.icon-arrow-left:before {
  content: "t";
}

.icon-arrow-up-right-from-square:before {
  content: "u";
}

.icon-book-sparkles:before {
  content: "h";
}

.icon-charging-station:before {
  content: "v";
}

.icon-cloud-arrow-down:before {
  content: "w";
}

.icon-cubes:before {
  content: "x";
}

.icon-display-chart-up:before {
  content: "i";
}

.icon-figma:before {
  content: "j";
}

.icon-handshake-angle:before {
  content: "o";
}

.icon-html-5:before {
  content: "p";
}

.icon-laptop-code:before {
  content: "k";
}

.icon-laptop-mobile:before {
  content: "l";
}

.icon-rails:before {
  content: "s";
}

.icon-react:before {
  content: "r";
}

.icon-swap-arrows:before {
  content: "m";
}

.icon-swift:before {
  content: "q";
}

.icon-wand-magic-sparkles:before {
  content: "n";
}

.icon-calendar-alt:before {
  content: "y";
}

.icon-download:before {
  content: "z";
}

.icon-tag:before {
  content: "A";
}

.icon-jc-logo:before {
  content: "B";
}

.icon-linkedin:before {
  content: "C";
}

.icon-x-twitter:before {
  content: "D";
}

/* =============================================================================
   Element defaults for pages on the design-system layout.

   Scoped-by-bundle, not by selector: this file only ships in ds.css, which is
   loaded by layouts/ds.njk. Legacy pages on layouts/base.njk keep site.css and
   are completely unaffected.
   ========================================================================== */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-body);
  background: var(--canvas);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}

p {
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}

a:hover {
  color: var(--text-link-hover);
}

img, svg, video {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Respect the OS-level reduced-motion preference for every transition and
   transform the component layer introduces. */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Skip link — the design system's nav is sticky, so keyboard users need a way
   past it. Visible only on focus. */
.ds-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: var(--space-sm) var(--space-md);
  background: var(--action-primary);
  color: var(--action-primary-text);
  font-weight: var(--weight-bold);
  border-radius: 0 0 var(--radius-lg) 0;
}

.ds-skip:focus {
  left: 0;
  color: var(--action-primary-text);
}

/* The legacy editorial sections on the company pages bleed past their
   container by design (.photo-content is `width: calc(100% + 100px)` with a
   -50px left margin). Where the container is already full-width that tipped
   the whole page into horizontal scroll. Clip the bleed instead — `clip`
   rather than `hidden` so no scroll container is created and the sticky nav,
   which lives outside <main>, is unaffected. */
main {
  overflow-x: clip;
}

/* =============================================================================
   Component layer — vendored from the Claude Design project.
   Core primitives, layout chrome, then content components.
   Every component reads from tokens only; no hard-coded colour outside brand.
   ========================================================================== */
/* --- Core: button -------------------------------------------------------- */
.jc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-loose);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  appearance: none;
  user-select: none;
  transition: all var(--dur-slow) var(--ease-button);
}

.jc-btn--md {
  padding: var(--space-sm) var(--space-md);
  font-size: 17px;
  line-height: 1em;
}

.jc-btn--sm {
  padding: 9px 15px;
  font-size: var(--text-base);
  line-height: 1em;
}

.jc-btn--lg {
  padding: 18px 32px;
  font-size: 19px;
  line-height: 1em;
}

.jc-btn--rounded {
  border-radius: var(--space-sm);
}

.jc-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
  border-color: var(--action-primary);
}

.jc-btn--primary:hover {
  transform: var(--lift-sm);
  box-shadow: var(--shadow-cta);
  color: var(--action-primary-text);
}

.jc-btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.jc-btn--secondary:hover {
  color: var(--action-accent);
  border-color: var(--action-accent);
  background: var(--action-hover-wash);
}

.jc-btn--inverse {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.jc-btn--inverse:hover {
  transform: var(--lift-sm);
  color: var(--black);
}

.jc-btn--link {
  background: none;
  border: 0;
  color: var(--text-link);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: var(--tracking-loose);
}

.jc-btn--link:hover {
  color: var(--text-link-hover);
}

.jc-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Core: icon button --------------------------------------------------- */
.jc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-body);
  border-radius: var(--radius-circle);
  font-size: var(--text-md);
  transition: all var(--dur-slow) var(--ease-standard);
}

.jc-iconbtn:hover {
  color: var(--action-accent);
  background: var(--action-hover-wash);
  transform: var(--lift-sm);
}

.jc-iconbtn--sm {
  width: 36px;
  height: 36px;
  font-size: var(--text-base);
}

.jc-iconbtn--outline {
  border: 1px solid var(--border);
}

.jc-iconbtn--onDark {
  color: var(--white);
}

.jc-iconbtn--onDark:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

/* --- Core: video mute toggle ---------------------------------------------
   Overlaid on an autoplaying hero video (which has to start muted to
   autoplay at all) — the only way a visitor can actually turn on the sound.
   Positioned by the parent — see .wsplash__shot / .wHero__video. */
.video-mute {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--space-md) + 16px);
  right: calc(var(--space-md) + 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-circle);
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--white);
  cursor: pointer;
  transition: background var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}

.video-mute:hover {
  background: rgba(10, 10, 12, 0.75);
  transform: var(--lift-sm);
}

.video-mute__on {
  display: none;
}

.video-mute.is-unmuted .video-mute__on {
  display: block;
}

.video-mute.is-unmuted .video-mute__off {
  display: none;
}

/* --- Core: badge --------------------------------------------------------- */
.jc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}

.jc-badge--pill {
  border-radius: var(--radius-pill);
  padding: var(--space-xxs) 10px;
}

.jc-badge--accent {
  background: var(--action-hover-wash);
  color: var(--action-accent);
}

.jc-badge--solid {
  background: var(--action-primary);
  color: var(--action-primary-text);
}

a.jc-badge:hover {
  background: var(--border-strong);
  color: var(--text-body);
}

/* --- Core: card ---------------------------------------------------------- */
.jc-card {
  background: var(--surface-card);
  border-radius: var(--radius-bento);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard);
}

.jc-card--flush {
  border: 0;
}

.jc-card--tile {
  background: var(--surface-tile);
  border: 0;
}

.jc-card--interactive {
  cursor: pointer;
}

.jc-card--interactive:hover {
  transform: var(--lift-sm);
  box-shadow: var(--shadow-ambient);
}

.jc-card__media {
  display: block;
  width: 100%;
  object-fit: cover;
}

.jc-card__body {
  padding: var(--space-md);
}

/* --- Core: theme toggle -------------------------------------------------- */
.jc-themetoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: var(--space-xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  transition: all var(--dur-slow) var(--ease-standard);
}

.jc-themetoggle:hover {
  color: var(--action-accent);
  border-color: var(--action-accent);
  background: var(--action-hover-wash);
}

/* Show the icon for the theme you'd switch TO. */
.jc-themetoggle__moon {
  display: inline;
}

.jc-themetoggle__sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .jc-themetoggle__moon {
    display: none;
  }
  :root:not([data-theme=light]) .jc-themetoggle__sun {
    display: inline;
  }
}
[data-theme=dark] .jc-themetoggle__moon {
  display: none;
}

[data-theme=dark] .jc-themetoggle__sun {
  display: inline;
}

[data-theme=light] .jc-themetoggle__moon {
  display: inline;
}

[data-theme=light] .jc-themetoggle__sun {
  display: none;
}

/* --- Layout: site nav ---------------------------------------------------- */
.jc-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
}

.jc-nav__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.jc-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 141px;
  color: var(--text-body);
}

.jc-nav__logo img {
  height: 34px;
  width: auto;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .jc-nav__logo img,
  :root:not([data-theme=light]) .jc-footer__brand img {
    filter: brightness(0) invert(1);
  }
}
[data-theme=dark] .jc-nav__logo img,
[data-theme=dark] .jc-footer__brand img {
  filter: brightness(0) invert(1);
}

.jc-nav__logo:hover {
  color: var(--action-accent);
}

.jc-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.jc-nav__link {
  color: var(--text-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-loose);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--space-xs);
  transition: all var(--dur-slow) var(--ease-standard);
}

.jc-nav__link:hover,
.jc-nav__link[aria-current=page] {
  color: var(--action-accent);
  background: var(--action-hover-wash);
}

.jc-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

@media (max-width: 720px) {
  .jc-nav__menu {
    gap: var(--space-sm);
  }
  .jc-nav__link {
    padding: var(--space-xs);
    font-size: var(--text-body-sm);
  }
  /* Drop the social row, keep the theme toggle — it's a control, not a link. */
  .jc-nav__right .jc-iconbtn {
    display: none;
  }
  .jc-nav__logo {
    width: auto;
  }
}
/* --- Layout: footer ------------------------------------------------------ */
.jc-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}

.jc-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-start;
  justify-content: space-between;
}

.jc-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.jc-footer__brand img {
  height: 32px;
}

.jc-footer__wordmark {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}

.jc-footer__cols {
  display: flex;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.jc-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.jc-footer__heading {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-looser);
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xxs);
}

.jc-footer__link {
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
}

.jc-footer__link:hover {
  color: var(--text-heading);
}

.jc-footer__social {
  display: flex;
  margin-left: -10px;
}

.jc-footer__legal {
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* --- Content: article card ----------------------------------------------- */
.jc-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--space-sm);
  transition: transform var(--dur-base) var(--ease-standard);
}

.jc-article:hover {
  transform: var(--lift-sm);
}

.jc-article__image {
  border-radius: var(--space-sm);
  overflow: hidden;
  background: var(--grad-article);
}

.jc-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--space-sm);
  transition: transform var(--dur-slow) var(--ease-standard);
}

.jc-article:hover .jc-article__image img {
  transform: scale(1.05);
}

.jc-article--featured .jc-article__image {
  height: 240px;
}

.jc-article--grid .jc-article__image {
  height: 180px;
}

.jc-article--compact .jc-article__image {
  height: 140px;
}

.jc-article__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: var(--space-sm);
}

.jc-article__date {
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  margin-bottom: var(--space-xs);
}

.jc-article__title {
  font-weight: var(--weight-bold);
  color: var(--text-body);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.jc-article--featured .jc-article__title {
  font-size: var(--text-h5);
  margin-bottom: var(--space-sm);
}

.jc-article--grid .jc-article__title {
  font-size: var(--text-md);
  margin-bottom: var(--space-xs);
}

.jc-article--compact .jc-article__title {
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

.jc-article__title a {
  color: inherit;
}

.jc-article__title a:hover {
  color: var(--action-accent);
}

.jc-article__summary {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  flex: 1;
}

.jc-article--featured .jc-article__summary {
  font-size: var(--text-base);
  line-height: 1.6;
}

.jc-article--grid .jc-article__summary {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Must not grow: the inherited `flex: 1` stretches the -webkit-box to the
     card's full height, which lets extra lines render and get sliced mid-glyph
     instead of clamping at two. Tags still pin to the bottom via margin-top. */
  flex: none;
}

.jc-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* --- Content: work item -------------------------------------------------- */
.jc-work {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.jc-work__years {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--action-accent);
}

.jc-work__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-body);
  line-height: var(--leading-heading);
}

.jc-work__company {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.jc-work__desc {
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* --- Content: showcase banner -------------------------------------------- */
.jc-showcase {
  display: block;
  margin: var(--space-xl) auto;
  max-width: var(--container-max);
}

.jc-showcase__container {
  position: relative;
  display: flex;
  height: 600px;
  border-radius: var(--radius-showcase);
  overflow: hidden;
  transition: scale var(--dur-base) var(--ease-standard);
}

.jc-showcase:hover .jc-showcase__container {
  scale: 1.01;
}

.jc-showcase--left .jc-showcase__container {
  flex-direction: row-reverse;
}

.jc-showcase--power .jc-showcase__container {
  background: var(--grad-power);
}

.jc-showcase--bloomboard .jc-showcase__container {
  background: var(--grad-bloomboard);
}

.jc-showcase--brainspace .jc-showcase__container {
  background: var(--grad-brainspace);
}

.jc-showcase--boxboard .jc-showcase__container {
  background: var(--grad-boxboard);
}

.jc-showcase--worlds .jc-showcase__container {
  background: var(--grad-worlds);
}

/* Copy column: 25% basis is load-bearing, not cosmetic. The product shot is
   absolutely positioned at 80% width with a -10% overhang, so a wider column
   runs underneath it. At 25% the two clear each other by ~15px. */
.jc-showcase__copy {
  position: relative;
  z-index: 2;
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: var(--space-2xl) var(--space-lg) var(--space-2xl) var(--space-2xl);
  color: var(--white);
}

.jc-showcase--left .jc-showcase__copy {
  margin: var(--space-2xl) var(--space-2xl) var(--space-2xl) var(--space-lg);
}

/* Logo block takes 1 share, copy takes 3 — this is what pulls the wordmark up
   toward the top and keeps the text tight beneath it. */
.jc-showcase__brand {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jc-showcase__body {
  flex: 3;
}

.jc-showcase__logo {
  width: 80%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

.jc-showcase--power .jc-showcase__brand {
  align-items: center;
}

.jc-showcase--power .jc-showcase__logo {
  width: 70%;
}

.jc-showcase--bloomboard .jc-showcase__logo {
  width: 90%;
}

.jc-showcase--worlds .jc-showcase__logo {
  width: 65%;
}

.jc-showcase__name {
  font-size: var(--text-h2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-looser);
  color: var(--white);
  margin-bottom: var(--space-lg);
}

.jc-showcase__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--white);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.jc-showcase__desc {
  font-size: var(--text-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-sm);
}

.jc-showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--white);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}

/* Height-collapsing wrapper around desc+cta — a no-op at full size (always
   expanded); the compact variant below collapses it to 0 and grows it on
   hover, which is what makes the title above it shift up as it grows. */
.jc-showcase__reveal {
  display: grid;
  grid-template-rows: 1fr;
}

.jc-showcase__revealInner {
  overflow: hidden;
  min-height: 0;
}

.jc-showcase__image {
  position: absolute;
  z-index: 1;
  width: 80%;
  top: 90px;
  right: -10%;
  transition: top var(--dur-base) var(--ease-standard);
}

.jc-showcase--left .jc-showcase__image {
  right: auto;
  left: -10%;
}

/* BoxBoard's render is a near-square cluster of phones — it needs to be larger
   and pulled up above the frame so the devices fill the panel and crop at the
   bottom, rather than shrinking to fit and leaving the copy side empty. */
.jc-showcase--boxboard .jc-showcase__image {
  top: -112px;
  width: 90%;
  right: -2%;
}

.jc-showcase--worlds .jc-showcase__image {
  border-radius: var(--radius-2xl);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  top: 70px;
}

/* Narrower desktops: drop the shot so it clears the copy as the column tightens. */
@media (max-width: 1240px) {
  .jc-showcase__image {
    top: 170px;
  }
}
@media (max-width: 1130px) {
  .jc-showcase__container {
    flex-direction: column !important;
    height: auto;
  }
  .jc-showcase__copy {
    flex: 1;
  }
  .jc-showcase__brand {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-xl);
  }
  .jc-showcase__logo,
  .jc-showcase--power .jc-showcase__logo,
  .jc-showcase--bloomboard .jc-showcase__logo {
    width: auto;
    max-width: 260px;
  }
  .jc-showcase__image,
  .jc-showcase--boxboard .jc-showcase__image {
    position: relative;
    top: auto;
    bottom: -20px;
    right: auto;
    left: auto;
    width: 90%;
    margin: 0 auto;
  }
}
@media (max-width: 575px) {
  .jc-showcase--boxboard .jc-showcase__image {
    width: 100%;
  }
}
/* --- Content: showcase banner, compact scale ("Earlier Chapters") --------
   Same brand panel + bleeding product shot as the full banner above, at a
   two-up scale. Differences from full size, all deliberate:
   - logo stays pinned top, years+title group at the bottom (space-between)
   - the cta is a hover reveal, not a permanent fixture, at this size
   - the shot bleeds bigger, tilts a few degrees, and fades at its near edge
     via a mask instead of a hard clip
   - the copy block gets its own soft scrim so text stays legible regardless
     of how light the brand gradient runs at that corner */
.jc-showcase--compact {
  /* The base rule centers a single full-width card with auto margins — inside
     a 2-up grid cell that makes the card hug its own content width and leave
     a huge gap between the two. A grid item needs a real margin to stretch. */
  margin: 0;
  max-width: none;
}

.jc-showcase--compact .jc-showcase__container {
  height: auto;
  min-height: 460px;
  border-radius: var(--radius-showcase);
}

/* Scrim: anchored to the bottom edge, between the image (z 0) and the copy
   (z 2) — a protect-bottom wash, not a diagonal one, since the text itself
   lives at the bottom and grows taller (toward the middle) on hover. */
.jc-showcase--compact .jc-showcase__container::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 75%;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.26) 45%, transparent 100%);
  pointer-events: none;
}

.jc-showcase--compact .jc-showcase__copy {
  flex-basis: 55%;
  justify-content: space-between;
  margin: var(--space-xl);
}

.jc-showcase--compact .jc-showcase__brand {
  flex: 0 0 auto;
}

.jc-showcase--compact .jc-showcase__logo {
  width: auto;
  height: 42px;
  max-width: 85%;
}

.jc-showcase--compact .jc-showcase__body {
  flex: 0 0 auto;
}

.jc-showcase--compact .jc-showcase__years {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-sm);
}

.jc-showcase--compact .jc-showcase__title {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: var(--tracking-display-md);
  margin-bottom: 0;
}

/* Title sits flush at the bottom of the card by default — .jc-showcase__reveal
   is collapsed to 0 height, so nothing is reserved below it. On hover the
   reveal wrapper grows to its content height; because .jc-showcase__body is
   the bottom item in a space-between copy column, growing it pushes its own
   top edge — the title — upward rather than growing the card itself. */
.jc-showcase--compact .jc-showcase__reveal {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slower) var(--ease-standard);
}

.jc-showcase--compact:hover .jc-showcase__reveal {
  grid-template-rows: 1fr;
}

.jc-showcase--compact .jc-showcase__desc {
  max-width: 38ch;
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  margin: var(--space-sm) 0 0;
}

.jc-showcase--compact .jc-showcase__cta {
  margin-top: var(--space-md);
}

.jc-showcase--compact .jc-showcase__image {
  z-index: 0;
  width: 85%;
  top: 7%;
  right: -14%;
  transform: perspective(1200px) rotateY(-16deg) rotateX(2deg) scale(1.04);
  transform-origin: right center;
  mask-image: linear-gradient(100deg, transparent 0%, black 32%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, black 32%);
}

.jc-showcase--compact.jc-showcase--left .jc-showcase__image {
  right: auto;
  left: -14%;
  transform: perspective(1200px) rotateY(16deg) rotateX(2deg) scale(1.04);
  transform-origin: left center;
  mask-image: linear-gradient(-100deg, transparent 0%, black 32%);
  -webkit-mask-image: linear-gradient(-100deg, transparent 0%, black 32%);
}

@media (max-width: 700px) {
  .jc-showcase--compact .jc-showcase__container {
    flex-direction: column !important;
    height: auto;
    min-height: 0;
  }
  .jc-showcase--compact .jc-showcase__container::before {
    display: none;
  }
  .jc-showcase--compact .jc-showcase__copy {
    margin: var(--space-lg);
  }
  .jc-showcase--compact .jc-showcase__reveal {
    grid-template-rows: 1fr;
  }
  .jc-showcase--compact .jc-showcase__image {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    order: -1;
    transform: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
/* --- Content: prose (article body) --------------------------------------- */
.jc-prose {
  max-width: var(--reading-width);
  margin: 0 auto;
  font-size: 18px;
  line-height: var(--leading-prose);
  color: var(--text-body);
}

.jc-prose h2 {
  font-size: 26px;
  line-height: var(--leading-snug);
  margin: 35px 0 25px;
  letter-spacing: var(--tracking-display);
}

.jc-prose h3 {
  font-size: 20px;
  margin: 35px 0 25px;
}

.jc-prose h4 {
  font-size: 18px;
  margin: 30px 0 20px;
}

.jc-prose p,
.jc-prose ul,
.jc-prose ol,
.jc-prose blockquote,
.jc-prose pre,
.jc-prose figure {
  margin: 0 0 25px;
}

.jc-prose ul, .jc-prose ol {
  padding-left: 30px;
  list-style: disc;
}

.jc-prose ol {
  list-style: decimal;
}

.jc-prose li {
  margin-bottom: 8px;
}

.jc-prose a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jc-prose a:hover {
  color: var(--text-heading);
}

.jc-prose strong {
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

.jc-prose blockquote {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 120%;
  border-left: 6px solid var(--action-accent);
  padding-left: 20px;
  margin-left: 0;
}

.jc-prose img,
.jc-prose video {
  width: 100%;
  height: auto;
  border-radius: var(--space-sm);
}

.jc-prose hr {
  display: block;
  width: 20%;
  margin: 32px auto;
  border: 0;
  border-top: 1px solid var(--border);
}

.jc-prose pre {
  background: var(--surface-tile);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  overflow-x: auto;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  font-family: var(--font-mono);
}

.jc-prose :not(pre) > code {
  background: var(--surface-tile);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  font-size: 0.9em;
  font-family: var(--font-mono);
}

.jc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 25px;
  font-size: var(--text-sm);
}

.jc-prose th, .jc-prose td {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}

.jc-prose th {
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

/* --- Content: tag tile --------------------------------------------------- */
.jc-tagtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  padding: var(--space-md);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--dur-slow) var(--ease-standard);
}

.jc-tagtile:hover {
  background: var(--action-accent);
  border-color: var(--action-accent);
  transform: var(--lift-sm);
  box-shadow: var(--shadow-ambient);
}

.jc-tagtile__name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-body);
  margin-bottom: var(--space-xs);
  transition: color var(--dur-slow) var(--ease-standard);
}

.jc-tagtile__count {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: color var(--dur-slow) var(--ease-standard);
}

.jc-tagtile:hover .jc-tagtile__name,
.jc-tagtile:hover .jc-tagtile__count {
  color: var(--white);
}

/* --- Content: pagination ------------------------------------------------- */
.jc-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-bottom: var(--space-4xl);
  flex-wrap: wrap;
}

/* =============================================================================
   Homepage composition.

   Section-level layout for the redesigned home page. Component internals live
   in _components.scss; this file only arranges them and owns the page's
   one-off editorial moments (hero, Worlds splash, statement band).
   ========================================================================== */
/* --- Shared page furniture ----------------------------------------------- */
.eyebrow {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin: 0;
}

.eyebrow--dark {
  color: rgba(255, 255, 255, 0.55);
}

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.wrap-tight {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.sectionTop {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 110px var(--space-md) 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.sectionTop h2 {
  font-size: var(--text-jumbo);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: var(--weight-bold);
  margin: 10px 0 0;
  color: var(--text-heading);
}

.inline-link {
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.inline-link:hover {
  color: var(--action-accent);
}

/* --- Hero ---------------------------------------------------------------- */
.heroA {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px var(--space-md);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

.heroA__h {
  font-size: clamp(48px, 5.2vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin: var(--space-sm) 0 26px;
  text-wrap: balance;
}

.heroA__lede {
  font-size: 22px;
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0 0 36px;
  max-width: 46ch;
}

.heroA__lede strong {
  color: var(--text-body);
  font-weight: var(--weight-bold);
}

.heroA__actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

/* A transparent cutout, not a cropped photo card — no frame, no radius, so
   the page's own background shows straight through around the figure. */
.heroA__media {
  position: relative;
  display: flex;
  justify-content: center;
}

.heroA__img {
  width: 92%;
  max-width: 460px;
  height: auto;
  display: block;
  filter: drop-shadow(0 32px 40px rgba(10, 10, 15, 0.16));
}

.heroA__badge {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--panel-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--panel-glass-border);
  border-radius: var(--radius-pill);
  padding: 9px 18px 9px 14px;
}

/* The badge inverts with the theme, so the black wordmark inside it has to too. */
.heroA__badge img {
  width: 92px;
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .heroA__badge img {
    filter: brightness(0) invert(1);
  }
}
[data-theme=dark] .heroA__badge img {
  filter: brightness(0) invert(1);
}

.heroA__badgeTxt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--text-body);
  white-space: nowrap;
}

/* --- Latest post bar ----------------------------------------------------- */
/* Full-bleed border, edge to edge — the content inside stays contained. */
.latestBand {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.latest {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-heading);
}

.latest:hover {
  color: var(--text-heading);
}

.latest:hover .latest__t {
  color: var(--action-accent);
}

.latest__thumb {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  flex: none;
}

.latest__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.latest__kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.latest__dot {
  color: var(--text-tertiary);
  margin: 0 var(--space-xxs);
}

.latest__t {
  font-size: 19px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.latest__cta {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--action-accent);
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  white-space: nowrap;
}

/* --- Worlds splash ------------------------------------------------------- */
.wsplash {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--grad-worlds);
  padding: var(--space-4xl) 0 0;
  overflow: hidden;
}

.wsplash__in {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md) 80px;
}

.wsplash__eyebrow {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 28px;
}

.wsplash__mark {
  width: 190px;
  display: block;
  margin-bottom: 34px;
}

.wsplash__h {
  font-size: 80px;
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: var(--weight-bold);
  color: var(--white);
  margin: 0 0 var(--space-md);
  max-width: 15ch;
}

.wsplash__lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-md);
  max-width: 56ch;
}

.wsplash__lede:last-of-type {
  margin-bottom: 36px;
}

.wsplash__actions {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.wsplash__link {
  color: var(--white);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

.wsplash__link:hover {
  color: var(--white);
  opacity: 0.75;
}

.wsplash__shot {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
  font-size: 0;
  line-height: 0;
}

.wsplash__shot img,
.wsplash__shot video {
  width: 100%;
  display: block;
  border-radius: var(--radius-bento) var(--radius-bento) 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  box-shadow: 0 -20px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}

.specband {
  background: #050508;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.specband__in {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 34px var(--space-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.specband__k {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 var(--space-xs);
}

.specband__v {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--white);
  margin: 0;
}

/* --- Selected work ------------------------------------------------------- */
.showcase-stack {
  padding: 0 var(--space-md);
}

.quoteline {
  /* Tighter above than below — it needs to read as a caption on the card it
     follows, not something centered ambiguously between two cards. */
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 14px var(--space-md) 64px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-body);
  text-align: center;
}

/* --- Earlier chapters ------------------------------------------------------
   Two `.jc-showcase--compact` cards (see _components.scss) side by side.
   No max-width here, same as .showcase-stack above it — the cards should be
   free to grow with the viewport, not cap out early. */
.chaptersTop {
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.chapters {
  padding: 0 var(--space-md) var(--space-4xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* --- Statement / speaking band ------------------------------------------- */
.speak {
  background: var(--canvas-alt);
  padding: 140px var(--space-md) var(--space-4xl);
  text-align: center;
}

.speak__h {
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: var(--weight-bold);
  margin: 0 auto 22px;
  max-width: 15ch;
  color: var(--text-heading);
}

.speak__p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 auto 56px;
  max-width: 56ch;
}

.speak__strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-sm);
  max-width: var(--measure-wide);
  margin: 0 auto 36px;
}

.speak__strip img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-bento);
  display: block;
}

.speak__link {
  font-weight: var(--weight-semibold);
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

/* --- Approach + experience ----------------------------------------------- */
.twoCol {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 110px var(--space-md);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
}

.twoCol h2 {
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: var(--weight-bold);
  margin: 12px 0 var(--space-md);
  color: var(--text-heading);
}

.twoCol p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 28px;
}

.twoCol__roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Blog grid ----------------------------------------------------------- */
.bloggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-4xl);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .heroA, .twoCol {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .heroA__h {
    font-size: 52px;
  }
  .twoCol {
    padding: 72px var(--space-md);
  }
  .wsplash__h, .speak__h {
    font-size: 44px;
  }
  .specband__in, .bloggrid, .speak__strip, .chapters {
    grid-template-columns: 1fr;
  }
  .speak__strip img {
    height: 220px;
  }
  .speak {
    padding: 80px var(--space-md);
  }
  .sectionTop {
    padding-top: 72px;
  }
  .sectionTop h2 {
    font-size: 36px;
  }
}
@media (max-width: 900px) {
  .latest {
    flex-wrap: wrap;
  }
  .latest__thumb {
    width: 72px;
    height: 52px;
  }
  .wsplash {
    padding-top: 72px;
  }
  .wsplash__h {
    font-size: 40px;
  }
}
/* Phones: the display sizes above still run to 5+ headline lines at 390px. */
@media (max-width: 600px) {
  .heroA {
    padding: 48px var(--space-md);
  }
  .heroA__h {
    font-size: 40px;
  }
  .heroA__lede {
    font-size: 18px;
  }
  .wsplash__h, .speak__h {
    font-size: 34px;
  }
  .speak {
    padding: 64px var(--space-md);
  }
  .sectionTop h2 {
    font-size: 30px;
  }
  .twoCol h2 {
    font-size: 28px;
  }
}
/* =============================================================================
   Page patterns shared by every non-home page on the design-system layout:
   blog listing, tag index, tag pages, calendar, resume and articles.

   One header pattern and one listing grid, so the whole site reads as a set.
   ========================================================================== */
/* --- Page header --------------------------------------------------------- */
.pagehead {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 72px var(--space-md) var(--space-xl);
  display: flex;
  gap: var(--space-xl);
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pagehead__main {
  flex: 1 1 420px;
  min-width: 0;
}

.pagehead__title {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin: 10px 0 0;
  text-wrap: balance;
}

.pagehead__sub {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: var(--space-sm) 0 0;
  max-width: 52ch;
}

.pagehead__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.pagehead__back:hover {
  color: var(--action-accent);
}

/* Browse cards that sit beside the page title on listing pages. */
.browse {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 0 0 auto;
}

.browse__heading {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-looser);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-xxs);
}

.browse__card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 240px;
  padding: 14px var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-bento);
  background: var(--surface-card);
  color: var(--text-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  transition: all var(--dur-slow) var(--ease-standard);
}

.browse__card:hover {
  color: var(--action-accent);
  border-color: var(--action-accent);
  transform: var(--lift-sm);
}

.browse__card i {
  font-size: var(--text-md);
  color: var(--action-accent);
}

.browse__card[aria-current=page] {
  background: var(--surface-tile);
  border-color: var(--border-strong);
}

/* --- Listing grids ------------------------------------------------------- */
.listing {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listing--featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: var(--space-xl);
}

.listing__empty {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-4xl);
  color: var(--text-secondary);
}

/* --- Tag cloud ----------------------------------------------------------- */
.tagcloud {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-4xl);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* --- Article page --------------------------------------------------------
   The header is a full-bleed banner: the article image as background under a
   scrim, title/summary/date centred in white on top. Articles without an image
   fall back to the brand gradient. This is carried over from the legacy
   article layout deliberately — it's the strongest thing about the old page.  */
.posthead {
  position: relative;
  text-align: center;
  color: var(--white);
  background: var(--grad-article);
  overflow: hidden;
}

.posthead__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.posthead__inner {
  position: relative;
  z-index: 2;
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 140px var(--space-md);
}

/* Scrim only when there's a photo behind the type. */
.posthead--image .posthead__inner {
  background: transparent;
}

.posthead--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.55);
}

.posthead__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.posthead__title {
  font-size: clamp(32px, 4.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: var(--weight-bold);
  color: var(--white);
  margin: var(--space-md) 0 0;
  text-wrap: balance;
}

.posthead__sub {
  font-size: 18px;
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.7);
  margin: var(--space-md) auto 0;
  max-width: 60ch;
}

.posthead__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  justify-content: center;
  margin-top: var(--space-md);
}

.posthead__tags .jc-badge {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
}

.posthead__tags a.jc-badge:hover {
  background: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

.post {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
}

/* Media breaks out of the reading column — the legacy layout let videos and
   embeds run to 1120px, and losing that is the main reason the new page felt
   cramped. `.post-embed` is the wrapper the articles already use for YouTube. */
.post video,
.post .post-embed,
.post figure.wide {
  display: block;
  width: 100%;
  max-width: var(--measure-wide);
  height: auto;
  margin: var(--space-xl) auto;
  border-radius: var(--radius-bento);
}

/* Break past the 700px column when the viewport allows it. */
@media (min-width: 780px) {
  .post video,
  .post .post-embed,
  .post figure.wide {
    width: calc(100vw - 2 * var(--space-md));
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .post video.portrait {
    width: 100%;
  }
}
.post video.portrait {
  max-width: 420px;
}

.post .post-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.post .post-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  border: 0;
}

.postfoot {
  max-width: var(--reading-width);
  margin: var(--space-xl) auto 0;
  /* Generous bottom padding — this row used to butt straight into the footer. */
  padding: var(--space-lg) var(--space-md) var(--space-4xl);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* --- Calendar ------------------------------------------------------------ */
.yearlist {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-4xl);
}

.yeargroup {
  border-top: 1px solid var(--border);
  padding: var(--space-lg) 0;
}

.yeargroup__year {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  margin-bottom: var(--space-md);
}

.postrow {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.postrow:last-child {
  border-bottom: 0;
}

.postrow__date {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.postrow__t {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0 0 4px;
}

.postrow:hover .postrow__t {
  color: var(--action-accent);
}

.postrow__s {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
  max-width: 68ch;
}

/* --- Resume -------------------------------------------------------------- */
.resume {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-4xl);
}

/* Header: identity block on the left, portrait on the right — the shape the
   legacy resume used, rebuilt on DS tokens. */
.resume__head {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 64px var(--space-md) var(--space-xl);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xl);
  align-items: center;
}

.resume__avatar {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  margin-bottom: var(--space-md);
}

.resume__name {
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin: 0;
}

.resume__tagline {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: var(--space-sm) 0 0;
  max-width: 46ch;
}

.resume__contact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.resume__email {
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}

.resume__email:hover {
  color: var(--action-accent);
}

.resume__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.resume__portrait {
  width: 100%;
  border-radius: var(--radius-showcase);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.resume__section {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
}

.resume__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-looser);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}

.resume__roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.resume__role {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-lg);
}

.resume__aside {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* True black/white pairs now (see src/media/resume/logos) — one image per
   theme, swapped by visibility rather than filtered, so every mark keeps
   its real linework. Each company gets its own height: the raw marks vary
   wildly in density (a thin dotted swirl vs. a solid wordmark), so a single
   shared box makes some read as tiny and others as oversized. */
.resume__logo {
  /* These are tiny vector files (some with a ~40px native viewBox), so a
     max-height alone never scales them UP to fill the box — only down.
     Setting an explicit height per mark is what actually normalizes them. */
  max-width: 120px;
  width: auto;
  height: 48px;
  object-fit: contain;
  object-position: left top;
  display: block;
}

.resume__logo--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .resume__logo--dark {
    display: block;
  }
}
[data-theme=dark] .resume__logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .resume__logo--light {
    display: none;
  }
}
[data-theme=dark] .resume__logo--light {
  display: none;
}

.resume__logo--worlds {
  height: 66px;
}

.resume__logo--power {
  height: 66px;
}

.resume__logo--boxboard {
  height: 40px;
}

/* The star kicks out past the bracket on the right, so the glyph's own
   optical center sits left of its bounding box — nudge it right to balance. */
.resume__logo--bloomboard {
  height: 66px;
  margin-left: 8px;
}

.resume__logo--brainspace {
  height: 58px;
}

.resume__logo--improving {
  height: 54px;
}

.resume__logo--medfactory {
  height: 58px;
}

.resume__logo--true {
  height: 32px;
}

.resume__logo--hilton {
  height: 28px;
}

.resume__titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 2px;
}

.resume__years {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--action-accent);
  white-space: nowrap;
}

.resume__title {
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0;
}

.resume__title a {
  color: inherit;
}

.resume__company {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--space-xs);
}

/* Grouped roles (e.g. two titles at one company) — one logo/header, each
   position nested below with its own sub-heading, like LinkedIn collapses
   back-to-back roles at the same employer. */
.resume__positions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 2px solid var(--border);
}

.resume__positionrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 2px;
}

.resume__position__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  margin: 0;
}

.resume__position__years {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.resume__desc {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
  max-width: 68ch;
}

@media (max-width: 900px) {
  .resume__head {
    grid-template-columns: 1fr;
    padding-top: 40px;
  }
  .resume__portrait {
    aspect-ratio: 16/10;
  }
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .listing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .pagehead {
    padding-top: 48px;
    gap: var(--space-lg);
  }
  .listing,
  .listing--featured {
    grid-template-columns: 1fr;
  }
  .browse {
    width: 100%;
  }
  .browse__card {
    min-width: 0;
  }
  .postrow {
    grid-template-columns: 1fr;
    gap: var(--space-xxs);
  }
  .resume__role {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .resume__titlerow,
  .resume__positionrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .posthead__inner {
    padding: 80px var(--space-md);
  }
}
/* =============================================================================
   Worlds company page (/companies/worlds/). Deliberately short — a hero with
   the Year in Review video, four micro-interaction highlights, and a close.
   ========================================================================== */
/* --- Hero ------------------------------------------------------------------ */
.wHero {
  background: var(--grad-worlds);
  padding: var(--space-4xl) 0;
}

.wHero__in {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}

.wHero__eyebrow {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-md);
}

.wHero__mark {
  width: 150px;
  display: block;
  margin-bottom: var(--space-md);
}

.wHero__h {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: var(--weight-bold);
  color: var(--white);
  margin: 0 0 var(--space-sm);
  max-width: 18ch;
}

.wHero__lede {
  font-size: var(--text-md);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-md);
  max-width: 56ch;
}

.wHero__lede:last-of-type {
  margin-bottom: 0;
}

.wHero__video {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.wHero__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-bento);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}

/* --- The shift (year-one before/after + quotes) --------------------------- */
.wShift {
  padding-bottom: var(--space-4xl);
}

.wShift__grid {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.wShift__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-md);
}

.wShift__col--now .wShift__label {
  color: var(--action-accent);
}

.wShift__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wShift__list li {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}

.wShift__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.wShift__col--now .wShift__list li {
  color: var(--text-body);
}

.wShift__col--now .wShift__list li::before {
  background: var(--action-accent);
}

.wShift__quotes {
  max-width: var(--measure-wide);
  margin: var(--space-4xl) auto 0;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.wShift__quote {
  margin: 0;
  padding: var(--space-lg);
  background: var(--canvas-alt);
  border-radius: var(--radius-bento);
  border: 1px solid var(--border);
}

.wShift__quote p {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-sm);
}

.wShift__quote cite {
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* --- Highlights grid --------------------------------------------------------- */
.wHighlights {
  padding-bottom: var(--space-4xl);
}

.wGrid {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.wClip video {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--radius-bento);
  background: var(--surface-tile);
}

.wClip__cap {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin: var(--space-sm) 0 0;
}

/* --- Close -------------------------------------------------------------- */
.wClose {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-4xl);
  text-align: center;
  border-top: 1px solid var(--border);
}

.wClose__p {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
}

.wClose__actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.wClose__link {
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

.wClose__link:hover {
  color: var(--action-accent);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .wHero__h {
    font-size: 44px;
  }
}
@media (max-width: 700px) {
  .wGrid {
    grid-template-columns: 1fr;
  }
  .wShift__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .wShift__quotes {
    grid-template-columns: 1fr;
  }
}
/*=====================================
Base colors should not be documented.
Only document color use.

Colors -----------------------------*/
/* Specialty Gradient -----------------*/
/* Interface colors -------------------*/
/* Main colors ------------------------*/
/*=====================================

Background colors ------------------*/
/* Card colors ------------------*/
/* Active colors ----------------------*/
/* Hover colors -----------------------*/
/* Focus colors -----------------------*/
/* Border colors ----------------------*/
/* Shadow colors ----------------------*/
/* Text colors ------------------------*/
/* Data colors ------------------------*/
/* Status colors ----------------------*/
/* Link colors ------------------------*/
/* Product colors ---------------------*/
/* Category colors ---------------------*/
/* CLEAN UP AND REMOVE */
/* Headings */
/* Standard Font Weights */
/* Non_Standard Font Weights */
.caption {
  color: #687887;
  font-size: 20px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}

.company-hero {
  padding: 3.4375rem 0 0;
  overflow: hidden;
  text-align: center;
}
.company-hero.power {
  background: linear-gradient(103.44deg, #1a458f 1.5%, #357af1 97.38%);
}
.company-hero.bloomboard {
  background: linear-gradient(103.44deg, #6D5AB9 1.5%, #0D33CB 97.38%);
}
.company-hero.brain {
  background: linear-gradient(103.44deg, #00716E 1.5%, #30B3AD 97.38%);
}
@media (min-width: 992px) {
  .company-hero {
    padding: 7.5rem 0 0;
  }
}
.company-hero .company-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}
.company-hero .company-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.company-hero .company-content .company-logo {
  height: 64px;
  margin-bottom: 3.25rem;
  vertical-align: middle;
}
.company-hero .company-content .company-title {
  margin-bottom: 1.3rem;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  color: #FFFFFF;
  line-height: 1.2;
}
.company-hero .company-content .company-description {
  margin-bottom: 2rem;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}
.company-hero .company-mockup {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  margin-bottom: -12rem;
}
@media (max-width: 700px) {
  .company-hero .company-mockup {
    margin-bottom: -5rem;
  }
}

.company-highlights {
  width: calc(100% + 100px);
  margin-left: -50px;
  margin-right: -50px;
  padding: 3.4375rem 50px;
  background: var(--bg-6);
}
.company-highlights .company-container {
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 15px;
}
.company-highlights .company-section-header {
  text-align: center;
  margin-bottom: 1.125rem;
}
@media (min-width: 992px) {
  .company-highlights .company-section-header {
    margin-bottom: 1.25rem;
  }
}
.company-highlights .company-section-header .company-section-title {
  margin-bottom: 0.5rem;
}
.company-highlights .company-highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem;
}
@media (min-width: 992px) {
  .company-highlights .company-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}
.company-highlights .company-highlights-grid .company-highlight {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: var(--bg-6);
  border-radius: 8px;
  transition: transform 0.2s ease;
}
.company-highlights .company-highlights-grid .company-highlight:hover {
  transform: translateY(-2px);
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-icon {
  padding: 1.7rem 1.7rem 1.5rem 1.7rem;
  border-radius: 15px;
  margin-right: 2.25rem;
  background: var(--bg-6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-icon--blue {
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-icon--red {
  background: rgba(246, 75, 75, 0.1);
  color: #f64b4b;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-icon--green {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-icon--blackish {
  background: rgba(22, 28, 45, 0.1);
  color: #161c2d;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-icon i {
  font-size: 40px;
  line-height: 40px;
  vertical-align: middle;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-content {
  flex: 1;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-content .company-highlight-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-headings);
  font-weight: 700;
  line-height: 1.2;
}
.company-highlights .company-highlights-grid .company-highlight .company-highlight-content .company-highlight-description {
  font-size: 1rem;
  margin-bottom: 0;
  padding-right: 2.75rem;
  color: var(--color-texts-opacity);
  line-height: 1.5;
}

.photo-content {
  position: relative;
  z-index: 1;
  width: calc(100% + 100px);
  margin-left: -50px;
  margin-right: -50px;
  padding: 3.4375rem 50px;
  --bg-2: #f4f7fa;
  --bg-4: #fdfdff;
  background-image: linear-gradient(to bottom, var(--bg-2) 62%, var(--bg-4) 62%, var(--bg-4) 100%);
}
@media (min-width: 992px) {
  .photo-content {
    padding: 5.5rem 50px;
  }
}
.photo-content .container {
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 15px;
}
.photo-content--two-column .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.photo-content--two-column .content-wrapper .content-primary {
  position: relative;
  width: 100%;
  padding: 0 15px;
  opacity: 1;
}
@media (min-width: 768px) {
  .photo-content--two-column .content-wrapper .content-primary {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 1200px) {
  .photo-content--two-column .content-wrapper .content-primary {
    padding-right: 4rem;
  }
}
@media (max-width: 767px) {
  .photo-content--two-column .content-wrapper .content-primary .gallery-item {
    display: none;
  }
}
.photo-content--two-column .content-wrapper .content-primary .gallery-item {
  margin-top: 1.875rem;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (min-width: 992px) {
  .photo-content--two-column .content-wrapper .content-primary .gallery-item {
    margin-top: 0.625rem;
  }
}
.photo-content--two-column .content-wrapper .content-primary .gallery-item img, .photo-content--two-column .content-wrapper .content-primary .gallery-item video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.photo-content--two-column .content-wrapper .content-secondary {
  position: relative;
  width: 100%;
  padding: 0 15px;
  opacity: 1;
}
@media (min-width: 768px) {
  .photo-content--two-column .content-wrapper .content-secondary {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 1200px) {
  .photo-content--two-column .content-wrapper .content-secondary {
    padding-left: 4rem;
  }
}
.photo-content--two-column .content-wrapper .content-secondary .gallery-item {
  margin-top: 1.875rem;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (min-width: 992px) {
  .photo-content--two-column .content-wrapper .content-secondary .gallery-item {
    margin-top: 0;
  }
}
.photo-content--two-column .content-wrapper .content-secondary .gallery-item img, .photo-content--two-column .content-wrapper .content-secondary .gallery-item video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.photo-content--single-image {
  overflow: visible;
}
.photo-content--single-image .container {
  overflow: visible;
}
.photo-content--single-image .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  position: relative;
  overflow: visible;
}
.photo-content--single-image .content-wrapper .content-primary {
  position: relative;
  width: 100%;
  padding: 0 15px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .photo-content--single-image .content-wrapper .content-primary {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 1200px) {
  .photo-content--single-image .content-wrapper .content-primary {
    padding-right: 4rem;
  }
}
.photo-content--single-image .content-wrapper .content-secondary {
  position: relative;
  width: 100%;
  padding: 0;
  opacity: 1;
}
@media (max-width: 767px) {
  .photo-content--single-image .content-wrapper .content-secondary {
    margin: 0 -15px;
    width: calc(100% + 30px);
  }
}
@media (min-width: 768px) {
  .photo-content--single-image .content-wrapper .content-secondary {
    flex: 0 0 50%;
    max-width: none;
    width: 50%;
  }
}
.photo-content--single-image .content-wrapper .content-secondary .gallery-item {
  margin-top: 1.875rem;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (min-width: 768px) {
  .photo-content--single-image .content-wrapper .content-secondary .gallery-item {
    width: 130%;
    margin-top: 0;
  }
}
.photo-content--single-image .content-wrapper .content-secondary .gallery-item img, .photo-content--single-image .content-wrapper .content-secondary .gallery-item video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.photo-content--centered {
  text-align: center;
}
.photo-content--centered .title {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.photo-content--centered .image-container {
  margin: 3.125rem auto;
  max-width: 1000px;
}
.photo-content--centered .image-container img, .photo-content--centered .image-container video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.photo-content--centered .description-wide {
  margin: 3.125rem auto;
  max-width: 800px;
  columns: 2;
  column-gap: 3rem;
  text-align: left;
}
@media (max-width: 768px) {
  .photo-content--centered .description-wide {
    columns: 1;
  }
}
.photo-content .title {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-headings);
  margin-bottom: 1.75rem;
}
@media (max-width: 768px) {
  .photo-content .title {
    font-size: 1.875rem;
  }
}
.photo-content .description {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-texts-opacity);
  margin-bottom: 3.125rem;
}
@media (min-width: 768px) {
  .photo-content .description {
    margin-bottom: 5.625rem;
  }
}
.photo-content .description p {
  margin-bottom: 1.5rem;
}
.photo-content .description p:last-child {
  margin-bottom: 0;
}
.photo-content .description a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s ease;
}
.photo-content .description a:hover {
  opacity: 0.8;
}
.photo-content .description strong {
  color: var(--color-headings);
  font-weight: 700;
}
.photo-content .description blockquote {
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-primary);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-headings);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .photo-content .description blockquote {
    margin: 3rem 0 0 0;
    padding-left: 0;
    quotes: initial;
    font-style: normal;
    font-size: 34px;
    font-weight: bold;
    line-height: 2.5rem;
  }
}
.photo-content .gallery-item img {
  width: 100%;
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
}
.photo-content .gallery-item:hover img {
  transform: scale(1.02);
}
.photo-content .caption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-texts-opacity);
  line-height: 1.4;
}

[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  will-change: opacity, transform;
}

[data-aos=fade-up] {
  transform: translate3d(0, 100px, 0);
}

[data-aos^=fade][data-aos^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translateZ(0);
}

[data-aos][data-aos][data-aos-duration="1000"] {
  transition-duration: 1s;
  opacity: 1;
}

.stats-masonry-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
.stats-masonry-intro-logo {
  width: auto;
  height: auto;
  margin-bottom: 1rem;
}
.stats-masonry-intro-quote {
  font-size: 32px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #242B42;
}

.stats-masonry {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 30px 10px 0 10px;
}
.stats-masonry__col {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .stats-masonry__col {
    flex: 1 1 100%;
  }
}
.stats-masonry__col:last-child {
  padding: 0;
  flex: 2;
}
.stats-masonry__col:last-child .stats-item {
  padding: 0;
}
.stats-masonry__col:last-child video, .stats-masonry__col:last-child img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.stats-masonry .stats-item {
  background: #F2F4F7;
  margin: 0.5rem 0;
  flex: 1;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px 0;
  height: 100%;
}
.stats-masonry .stats-item--html {
  text-align: left;
  padding: 16px;
}
.stats-masonry .stats-item--image, .stats-masonry .stats-item--video {
  overflow: hidden;
}
.stats-masonry .stats-item__subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stats-masonry .stats-item i {
  color: #FFFFFF;
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 20px;
}
.stats-masonry .stats-item__title {
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
}
.stats-masonry .stats-item__title_sm {
  font-size: 60px;
}
.stats-masonry .stats-item__title_xl {
  font-size: 96px;
}
.stats-masonry .stats-item__description {
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 25px;
}
.stats-masonry .stats-item__description_small {
  font-size: 15px;
}
.stats-masonry .stats-item__icons {
  margin-top: 16px;
}
.stats-masonry .stats-item__icons i {
  position: static;
  margin-top: 16px;
  color: #687887;
  margin: 4px;
}
.stats-masonry .stats-item.black {
  background: #000;
}
.stats-masonry .stats-item.black .stats-item__title, .stats-masonry .stats-item.black .stats-item__title_sm {
  color: #FFFFFF;
}
.stats-masonry .stats-item.black .stats-item__subtitle, .stats-masonry .stats-item.black .stats-item__description_small {
  color: rgba(255, 255, 255, 0.7);
}
.stats-masonry .stats-item.blue {
  background: #3300FF;
}
.stats-masonry .stats-item.blue .stats-item__title, .stats-masonry .stats-item.blue .stats-item__title_sm {
  color: #FFFFFF;
}
.stats-masonry .stats-item.blue .stats-item__subtitle, .stats-masonry .stats-item.blue .stats-item__description {
  color: rgba(255, 255, 255, 0.7);
}
.stats-masonry {
  /* Update media query styles */
}
@media (min-width: 768px) {
  .stats-masonry__col {
    flex: 1 1 0%;
  }
  .stats-masonry__col:last-child {
    flex: 0 0 auto;
  }
}
@media (min-width: 992px) {
  .stats-masonry__col:last-child {
    flex: 2 1 0%;
    max-height: 800px;
  }
}

.stats-masonry-footnote {
  max-width: 1120px;
  padding: 0 10px;
  margin: auto;
  font-size: 14px;
  color: #687887;
}

.stats-masonry-cta {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  flex-direction: column;
  align-items: center;
}
.stats-masonry-cta-title {
  font-size: 36px;
  color: #242B42;
  margin-bottom: 1rem;
}
.stats-masonry-cta-subtitle {
  font-size: 15px;
  color: #687887;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
.stats-masonry-cta-subtitle a {
  color: #0400FF;
  text-decoration: underline;
  font-weight: bold;
}
.stats-masonry-cta-subtitle a:hover {
  color: rgb(3.2, 0, 204);
}

.image-gallery-title {
  margin: 60px auto 20px auto;
  max-width: 1100px;
  text-align: left;
}

.image-gallery {
  --c-max-width: 100%;
  --c-padding: 10px;
}
@media screen and (min-width: 768px) {
  .image-gallery {
    --c-padding: 12px;
  }
}
@media screen and (min-width: 1000px) {
  .image-gallery {
    --c-padding: 24px;
  }
}
@media screen and (min-width: 1200px) {
  .image-gallery {
    --c-max-width: 1180px;
    --c-padding: 40px;
  }
}
.image-gallery {
  --offset-width: calc(
    ((100% - (min(var(--c-max-width), 100%) + (var(--c-padding) * 2))) / 2) + (var(--c-padding) * 2)
  );
  padding-inline: var(--offset-width);
  scroll-padding-inline-start: var(--offset-width);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: var(--c-padding);
  padding-block: 2.5rem;
  border-top: 1px solid #E4E8F0;
  border-bottom: 1px solid #E4E8F0;
}
.image-gallery::-webkit-scrollbar {
  display: none;
}
.image-gallery .gallery-item {
  flex: 0 0 200px;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  scroll-snap-align: start;
  background: #FFFFFF;
}
.image-gallery .gallery-item:hover {
  transform: scale(1.02);
}
.image-gallery .gallery-item .gallery-thumbnail {
  width: 100%;
  height: 250px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-gallery .gallery-item .gallery-thumbnail.lazyloaded {
  opacity: 1;
}
.image-gallery .gallery-item .gallery-item-title {
  margin: 12px 0 4px;
  font-size: 15px;
  font-weight: bold;
  color: #242B42;
}
.image-gallery .gallery-item .gallery-item-description {
  display: none;
  margin: 0 12px 12px;
  font-size: 12px;
  color: #687887;
  line-height: 1.4;
}

.media-showcase {
  margin: 120px auto;
  padding: 0 24px;
  max-width: 1180px;
}
.media-showcase-header {
  margin-bottom: 68px;
  max-width: 800px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.media-showcase-header-title {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: #242B42;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .media-showcase-header-title {
    font-size: 32px;
  }
}
.media-showcase-header-description {
  font-size: 21px;
  line-height: 1.5;
  color: #687887;
}
@media (max-width: 768px) {
  .media-showcase-header-description {
    font-size: 18px;
  }
}
.media-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 1024px) {
  .media-showcase-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 640px) {
  .media-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.media-showcase-grid-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  transition: transform 0.3s ease;
  cursor: pointer;
  aspect-ratio: 1;
}
.media-showcase-grid-item:hover {
  transform: scale(1.02);
}
@media (min-width: 640px) {
  .media-showcase-grid-item.span-2 {
    grid-column: span 2;
    aspect-ratio: 2/1;
  }
}
@media (min-width: 640px) {
  .media-showcase-grid-item.span-2-rows {
    grid-row: span 2;
    aspect-ratio: 1/2;
  }
}
.media-showcase-grid-item .gallery-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.media-showcase-grid-item .gallery-thumbnail.lazyloaded {
  opacity: 1;
}
.media-showcase-grid-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.media-showcase-grid-item .caption-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-align: center;
}
.media-showcase-grid-item .caption-description {
  display: none;
}
.media-showcase-grid-item:hover .caption {
  opacity: 1;
}
.media-showcase-footer {
  max-width: 100%;
  margin: 48px 0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 48px;
}
.media-showcase-footer-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  color: #242B42;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .media-showcase-footer-title {
    font-size: 24px;
  }
}
.media-showcase-footer-description {
  font-size: 18px;
  line-height: 1.5;
  color: #687887;
  display: flex;
  gap: 48px;
  text-align: left;
}
.media-showcase-footer-description p {
  flex: 1;
  margin: 0;
}
@media (max-width: 768px) {
  .media-showcase-footer-description {
    font-size: 16px;
    flex-direction: column;
    gap: 24px;
  }
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.lightbox-content {
  position: relative;
  z-index: 1002;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  cursor: default;
  pointer-events: none;
}
.lightbox-media-container {
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}
.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}
.lightbox-video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  color: white;
  max-width: 600px;
}
.lightbox-caption-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .lightbox-caption-title {
    font-size: 18px;
  }
}
.lightbox-caption-description {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
  .lightbox-caption-description {
    font-size: 14px;
  }
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  appearance: none;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  text-shadow: 0px 1px 11px black;
  font-size: 20px;
  transition: background 0.3s ease;
  pointer-events: all;
  border-radius: 200px;
  z-index: 1003;
}
.lightbox-nav i {
  display: block;
  transition: all 0.3s ease;
}
.lightbox-nav:hover {
  background: rgba(44, 0, 219, 0.3);
}
.lightbox-nav:hover i {
  transform: scale(1.1);
}
.lightbox-nav.prev {
  left: 10px;
}
.lightbox-nav.next {
  right: 10px;
}
.lightbox-close {
  position: absolute;
  top: 10px;
  left: 10px;
  appearance: none;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  text-shadow: 0px 1px 11px black;
  font-size: 20px;
  transition: all 0.3s ease;
  display: block;
  background: transparent;
  padding: 10px;
  border-radius: 200px;
  width: 40px;
  height: 40px;
  text-align: center;
  pointer-events: all;
  z-index: 1003;
}
.lightbox-close:hover {
  background: rgba(44, 0, 219, 0.3);
  transform: scale(1.1);
}

.gallery-thumbnail,
.media-showcase-grid .gallery-thumbnail,
.image-gallery .gallery-thumbnail {
  opacity: 1;
}

.media-showcase-header-title,
.media-showcase-footer-title,
.stats-masonry-intro-quote,
.stats-masonry-cta-title,
.image-gallery .gallery-item .gallery-item-title {
  color: var(--text-body);
}

.media-showcase-header-description,
.media-showcase-footer-description,
.stats-masonry-footnote,
.stats-masonry-cta-subtitle,
.stats-masonry .stats-item__icons i,
.image-gallery .gallery-item .gallery-item-description,
.caption {
  color: var(--text-secondary);
}

.media-showcase-grid-item,
.image-gallery .gallery-item {
  background: var(--surface-card);
}

.stats-masonry .stats-item {
  background: var(--surface-tile);
}

:root {
  --color-headings: var(--text-heading);
  --color-texts-opacity: var(--text-secondary);
  --color-primary: var(--action-accent);
  --bg-6: var(--surface-sunken);
}

.media-showcase,
.image-gallery,
.stats-masonry,
.photo-content {
  background: transparent;
}

/*# sourceMappingURL=ds.css.map */