@charset "UTF-8";

:root {
  --ink: #05070b;
  --surface: #0b0f16;
  --surface-2: #111722;
  --glass: rgba(16, 23, 35, .72);
  --line: rgba(255, 255, 255, .11);
  --text: #f7faff;
  --muted: #a8b1c1;
  --blue: #198bd3;
  --blue-light: #4bc3ee;
  --violet: #7357f6;
  --green: #72e8b8;
  --radius: 1.5rem;
  --shadow: 0 30px 80px rgba(0, 0, 0, .34);
  --max: 1240px;
}

html[data-theme="light"] {
  --ink: #f4f7fb;
  --surface: #fff;
  --surface-2: #eaf0f7;
  --glass: rgba(255, 255, 255, .82);
  --line: rgba(10, 24, 45, .12);
  --text: #09101d;
  --muted: #536174;
  --shadow: 0 30px 80px rgba(26, 62, 104, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 82% 4%, rgba(25, 139, 211, .15), transparent 28rem),
    radial-gradient(circle at 8% 55%, rgba(115, 87, 246, .1), transparent 34rem);
}
body.rayo-inner-page::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .97) 0%, rgba(5, 7, 11, .78) 46%, rgba(5, 7, 11, .38) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 11, .45) 42%, rgba(5, 7, 11, .72) 100%),
    url("../assets/images/hero-africa-digital.jpg") center / cover no-repeat;
  opacity: .96;
}
body.rayo-inner-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 82% 16%, rgba(75, 195, 238, .24), transparent 25rem),
    radial-gradient(circle at 10% 78%, rgba(115, 87, 246, .2), transparent 31rem),
    linear-gradient(180deg, transparent 0%, var(--ink) 94%);
}
body.rayo-inner-page.services-page::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .98) 0%, rgba(5, 7, 11, .82) 44%, rgba(5, 7, 11, .42) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 11, .45) 45%, rgba(5, 7, 11, .74) 100%),
    url("../img/portfolio/ambassadors-audience-deck.jpeg") center / cover no-repeat;
}
body.rayo-inner-page.works-page::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .98) 0%, rgba(5, 7, 11, .76) 42%, rgba(5, 7, 11, .32) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 11, .42) 50%, rgba(5, 7, 11, .74) 100%),
    url("../img/portfolio/chaise-marketplace-screens.jpeg") center / cover no-repeat;
}
body.rayo-inner-page.digest-page::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .98) 0%, rgba(5, 7, 11, .8) 46%, rgba(5, 7, 11, .36) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 11, .48) 45%, rgba(5, 7, 11, .72) 100%),
    url("../img/portfolio/chaise-product-flow.jpeg") center / cover no-repeat;
}
body.rayo-inner-page.pricing-page::before {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .98) 0%, rgba(5, 7, 11, .78) 46%, rgba(5, 7, 11, .36) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 11, .44) 44%, rgba(5, 7, 11, .72) 100%),
    url("../img/portfolio/boys-champions-strategy-cover.jpeg") center / cover no-repeat;
}
html[data-theme="light"] body.rayo-inner-page::before {
  opacity: .2;
}
html[data-theme="light"] body.rayo-inner-page::after {
  background:
    radial-gradient(circle at 82% 16%, rgba(25, 139, 211, .14), transparent 25rem),
    radial-gradient(circle at 10% 78%, rgba(115, 87, 246, .12), transparent 31rem),
    linear-gradient(180deg, rgba(244, 247, 251, .54) 0%, var(--ink) 94%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--blue); color: white; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; padding: .8rem 1rem; background: var(--text); color: var(--ink); border-radius: .7rem; }
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.section { padding: 7rem 0; position: relative; }
.section-sm { padding: 4.5rem 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.25rem; color: var(--blue-light); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 750; }
.eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 20px currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: .97; letter-spacing: -.045em; }
h1 { font-size: clamp(3.9rem, 10vw, 9.4rem); margin-bottom: 1.6rem; }
h2 { font-size: clamp(2.7rem, 6vw, 6rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); }
.lead { max-width: 48rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.gradient-text { color: transparent; background: linear-gradient(105deg, #fff 20%, var(--blue-light) 56%, #9c86ff); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .gradient-text { background-image: linear-gradient(105deg, #0b1727, var(--blue), var(--violet)); }
.text-muted { color: var(--muted); }
.text-blue { color: var(--blue-light); }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background .3s, border .3s, transform .3s; }
.site-header.scrolled { background: color-mix(in srgb, var(--ink) 80%, transparent); border-color: var(--line); backdrop-filter: blur(20px); }
body.rayo-inner-page .site-header {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(10, 24, 45, .1);
  backdrop-filter: blur(20px);
}
html[data-theme="dark"] body.rayo-inner-page .site-header {
  background: rgba(5, 7, 11, .64);
  border-color: rgba(255, 255, 255, .08);
}
.nav { height: 5.2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; width: 10.5rem; height: 3rem; position: relative; z-index: 3; overflow: hidden; }
.brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
html[data-theme="dark"] .brand img { filter: brightness(1.45) saturate(.85); }
.nav-links { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; }
.nav-links > a:not(.button) { color: var(--muted); font-size: .92rem; transition: color .2s; }
.nav-links > a:hover, .nav-links > a.active { color: var(--text); }
.nav-links > .button { display: none; }
.nav-actions { display: flex; gap: .6rem; align-items: center; }
.icon-button { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--glass); cursor: pointer; }
.menu-button { display: none; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .55rem; min-height: 3rem; padding: .78rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 700; transition: transform .2s, background .2s, border .2s; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 10px 30px rgba(25, 139, 211, .26); }
.button-ghost { background: var(--glass); }
.button-lg { min-height: 3.75rem; padding-inline: 1.5rem; }
.arrow { transition: transform .2s; }
.button:hover .arrow, a:hover .arrow { transform: translate(3px, -3px); }

.template-site-header {
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(10, 24, 45, .1);
  backdrop-filter: blur(22px);
}
html[data-theme="dark"] .template-site-header {
  background: rgba(5, 7, 11, .82);
  border-bottom-color: rgba(255, 255, 255, .09);
}
.template-nav { height: 5.8rem; }
.template-brand { width: 13.5rem; height: 4rem; z-index: 120; }
.header-cta { min-height: 2.8rem; padding-inline: 1rem; position: relative; z-index: 120; }
.template-menu-button {
  display: grid;
  position: relative;
  z-index: 120;
  overflow: hidden;
}
.template-menu-button span {
  position: absolute;
  width: 1.15rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.template-menu-button span:first-child { transform: translateY(-4px); }
.template-menu-button span:last-child { transform: translateY(4px); }
.menu-open .template-menu-button span:first-child { transform: rotate(45deg); }
.menu-open .template-menu-button span:last-child { transform: rotate(-45deg); }
.template-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  margin-left: 0;
  padding: clamp(7rem, 12vw, 10rem) clamp(1.25rem, 8vw, 8rem) clamp(2rem, 5vw, 4rem);
  background: rgba(22, 22, 22, .98);
  transform: translateY(-105%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
html[data-theme="dark"] .template-menu-panel,
html[data-theme="light"] .template-menu-panel { background: rgba(22, 22, 22, .98); }
.template-menu-panel.open { transform: translateY(0); }
.template-menu-caption {
  display: none;
  color: rgba(255, 255, 255, .58);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  margin-bottom: 1rem;
}
.template-menu-panel > a:not(.button) {
  color: #fff;
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 850;
  line-height: .9;
  letter-spacing: -.065em;
  transition: color .2s ease, transform .2s ease;
}
.template-menu-panel > a:not(.button):hover,
.template-menu-panel > a.active {
  color: #fff;
  opacity: .72;
  transform: translateX(.35rem);
}
html[data-theme="dark"] .template-menu-panel > a:not(.button):hover,
html[data-theme="dark"] .template-menu-panel > a.active { color: #fff; }

.hero { min-height: 100svh; display: grid; align-items: end; padding: 8.5rem 0 4rem; position: relative; overflow: clip; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(transparent, var(--ink)); pointer-events: none; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .9; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,11,.98) 0%, rgba(5,7,11,.78) 39%, rgba(5,7,11,.05) 78%), linear-gradient(0deg, rgba(5,7,11,.75), transparent 45%); }
html[data-theme="light"] .hero-media::after { background: linear-gradient(90deg, rgba(244,247,251,.98) 0%, rgba(244,247,251,.82) 39%, rgba(244,247,251,.12) 78%), linear-gradient(0deg, rgba(244,247,251,.82), transparent 45%); }
.hero-content { position: relative; z-index: 2; max-width: 78rem; }
.hero h1 { max-width: 11ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); align-items: end; gap: 2rem; }
.hero-copy { max-width: 39rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-trust { display: flex; align-items: center; gap: 1rem; padding-top: 2rem; color: var(--muted); font-size: .85rem; }
.avatar-stack { display: flex; }
.avatar { width: 2rem; height: 2rem; margin-left: -.35rem; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .62rem; font-weight: 800; background: linear-gradient(135deg, var(--blue), var(--violet)); }
.avatar:first-child { margin-left: 0; }
.scroll-cue { position: absolute; right: 2rem; bottom: 3.5rem; z-index: 3; writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: var(--muted); }

.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 1.2rem 0; background: rgba(255,255,255,.015); }
.ticker-track { display: flex; width: max-content; animation: marquee 35s linear infinite; }
.ticker-group { display: flex; align-items: center; }
.ticker span { display: inline-flex; align-items: center; gap: 1.5rem; margin-right: 1.5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 750; }
.ticker span::after { content: "✦"; color: var(--blue-light); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3.2rem; }
.section-heading h2 { max-width: 11ch; margin-bottom: 0; }
.section-heading .lead { max-width: 31rem; margin-bottom: .4rem; }
.card-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.glass-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(14px); border-radius: var(--radius); }
.service-card { grid-column: span 4; min-height: 22rem; padding: 1.8rem; display: flex; flex-direction: column; justify-content: space-between; transition: transform .35s, border .35s, background .35s; }
.service-card:hover { transform: translateY(-8px); border-color: rgba(75,195,238,.4); background: linear-gradient(145deg, rgba(25,139,211,.16), rgba(255,255,255,.025)); }
.service-card .index { color: var(--blue-light); font: 700 .75rem/1 monospace; }
.service-card h3 { font-size: clamp(1.75rem, 3vw, 2.6rem); max-width: 8ch; margin-bottom: .8rem; }
.service-card p { color: var(--muted); max-width: 31ch; margin: 0; }
.service-card .service-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 1rem; background: rgba(25,139,211,.12); border: 1px solid rgba(75,195,238,.25); font-size: 1.35rem; }
.service-card.featured { grid-column: span 8; background: radial-gradient(circle at 85% 0, rgba(115,87,246,.28), transparent 18rem), linear-gradient(145deg, rgba(25,139,211,.13), rgba(255,255,255,.02)); }
.service-card.featured h3 { max-width: 12ch; }

.project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; }
.project { position: relative; min-height: 40rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.project:nth-child(2) { min-height: 34rem; margin-top: 6rem; }
.project img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.project:hover img { transform: scale(1.035); }
.project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 36%, rgba(3,6,10,.9)); }
.project-content { position: absolute; inset: auto 1.5rem 1.5rem; z-index: 2; }
.project h3 { font-size: clamp(2rem, 4vw, 3.3rem); margin-bottom: .5rem; color: #fff; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { display: inline-flex; padding: .4rem .68rem; border-radius: 999px; background: rgba(5,7,11,.65); border: 1px solid rgba(255,255,255,.18); color: #dfe7f1; backdrop-filter: blur(8px); font-size: .72rem; }
.project-metric { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; padding: .9rem 1rem; border-radius: 1rem; background: rgba(5,7,11,.68); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); color: #fff; }
.project-metric strong { display: block; font-size: 1.45rem; line-height: 1; }
.project-metric span { font-size: .7rem; color: #bfc8d6; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.metric { padding: 2.8rem 1.5rem; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1; letter-spacing: -.055em; color: var(--text); }
.metric span { display: block; margin-top: .8rem; color: var(--muted); font-size: .82rem; }

.process { display: grid; grid-template-columns: .72fr 1.28fr; gap: 4rem; }
.process-list { border-top: 1px solid var(--line); }
.process-step { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.process-step span { color: var(--blue-light); font: 700 .75rem/1 monospace; padding-top: .35rem; }
.process-step h3 { margin-bottom: .45rem; font-size: 1.5rem; }
.process-step p { margin-bottom: 0; color: var(--muted); }
.sticky { position: sticky; top: 8rem; align-self: start; }

.industry-cloud { display: flex; flex-wrap: wrap; gap: .65rem; }
.industry-cloud span { padding: .85rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); transition: color .2s, border .2s, background .2s; }
.industry-cloud span:hover { color: var(--text); border-color: var(--blue); background: rgba(25,139,211,.09); }
.tech-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.tech { padding: 1.2rem .8rem; border: 1px solid var(--line); border-radius: 1rem; text-align: center; color: var(--muted); font-size: .8rem; background: rgba(255,255,255,.025); }
.tech strong { display: block; margin-bottom: .35rem; color: var(--text); font-size: 1.15rem; }

.quote { padding: clamp(2rem, 5vw, 4rem); background: radial-gradient(circle at 100% 0, rgba(25,139,211,.2), transparent 24rem), var(--surface); }
.quote blockquote { max-width: 42ch; margin: 0 0 2rem; font-size: clamp(1.5rem, 3.2vw, 2.8rem); line-height: 1.18; letter-spacing: -.025em; }
.quote cite { color: var(--muted); font-style: normal; }
.quote cite strong { color: var(--text); }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.post { display: flex; flex-direction: column; padding: 1.5rem; min-height: 21rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .3s, border .3s; }
.post:hover { transform: translateY(-6px); border-color: rgba(75,195,238,.35); }
.post .post-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.post h3 { margin-top: 6rem; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.04; }
.insights-hero { min-height: 68svh; }
.insights-hero h1 { max-width: 10ch; }
.news-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; margin-bottom: 2rem; }
.news-toolbar .filter-bar { margin-bottom: 0; }
.news-updated { display: inline-flex; align-items: center; flex: none; gap: .5rem; margin: .7rem 0 0; color: var(--muted); font-size: .78rem; }
.news-updated span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); }
.news-card { position: relative; min-height: 25rem; overflow: hidden; }
.news-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0, rgba(25,139,211,.14), transparent 15rem); opacity: 0; transition: opacity .3s; }
.news-card:hover::before { opacity: 1; }
.news-card.is-hidden { display: none; }
.news-card .post-body { position: relative; z-index: 1; margin-top: auto; }
.news-card h3 { margin: 4.5rem 0 1rem; }
.news-card h2 { max-width: 15ch; margin: 1rem 0; font-size: clamp(2.4rem, 5vw, 5.2rem); line-height: .96; }
.post-label { margin: 0; color: var(--blue-light); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.post-summary { color: var(--muted); margin-bottom: 0; }
.post-source { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.2rem; margin-top: 1.5rem; border-top: 1px solid var(--line); color: var(--blue-light); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.news-card-featured { grid-column: span 2; min-height: 32rem; background: radial-gradient(circle at 85% 15%, rgba(115,87,246,.28), transparent 23rem), radial-gradient(circle at 10% 100%, rgba(25,139,211,.2), transparent 18rem), var(--surface); }
.news-credit { max-width: 56rem; margin: 1.5rem 0 0; color: var(--muted); font-size: .78rem; }

.article-hero { min-height: 82svh; display: grid; align-items: end; padding: 10rem 0 5rem; }
.article-shell { max-width: 70rem; }
.article-back { display: inline-flex; margin-bottom: 3rem; color: var(--muted); font-size: .86rem; }
.article-back:hover { color: var(--text); }
.article-hero h1 { max-width: 12ch; font-size: clamp(3.5rem, 8vw, 8.3rem); }
.article-meta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.article-meta span { padding: .48rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; }
.article-layout { display: grid; grid-template-columns: minmax(13rem, .34fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); padding-top: 5rem; padding-bottom: 5rem; border-top: 1px solid var(--line); }
.article-aside { position: sticky; top: 8rem; align-self: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.article-aside p { color: var(--blue-light); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.article-aside strong { display: block; margin-bottom: .75rem; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.06em; }
.article-aside span { color: var(--muted); font-size: .84rem; }
.article-content { max-width: 48rem; }
.article-content p, .article-content li { color: var(--muted); font-size: 1.08rem; line-height: 1.78; }
.article-content .article-intro { color: var(--text); font-size: clamp(1.35rem, 2.5vw, 1.8rem); line-height: 1.5; }
.article-content h2 { margin: 4rem 0 1.25rem; font-size: clamp(2.3rem, 5vw, 4.3rem); }
.article-content ul, .article-content ol { display: grid; gap: 1rem; padding-left: 1.3rem; }
.article-content li strong { color: var(--text); }
.article-callout { margin: 3rem 0; padding: clamp(1.5rem, 4vw, 2.5rem); border-left: 3px solid var(--blue-light); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(25,139,211,.08); }
.article-callout span { color: var(--blue-light); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.article-callout p { margin: .8rem 0 0; color: var(--text); font-size: clamp(1.25rem, 2.5vw, 1.65rem); line-height: 1.45; }
.article-source { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.article-source p { font-size: .88rem; }

.single-insight-hero { padding: 10rem 0 4rem; }
.single-insight-topline { display: flex; align-items: center; gap: .6rem; margin-bottom: 4rem; color: var(--muted); font-size: .78rem; }
.single-insight-topline a:hover { color: var(--text); }
.single-insight-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; }
.single-insight-tags span { padding: .45rem .72rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.single-insight-hero h1 { max-width: 12ch; margin-bottom: 2.5rem; font-size: clamp(4rem, 10vw, 10rem); }
.single-insight-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.single-insight-intro .lead { margin-bottom: 0; }
.single-insight-date { display: grid; gap: .2rem; min-width: 10rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.single-insight-date span, .single-insight-byline span { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.single-insight-cover { position: relative; min-height: clamp(24rem, 55vw, 46rem); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; padding: 2rem; border: 1px solid rgba(75,195,238,.24); border-radius: 2rem; background: radial-gradient(circle at 50% 48%, rgba(75,195,238,.34), transparent 13rem), radial-gradient(circle at 85% 15%, rgba(115,87,246,.35), transparent 28rem), linear-gradient(135deg, #071323, #111025 60%, #071d2b); box-shadow: var(--shadow); text-align: center; }
.single-insight-cover::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.single-insight-cover > p, .single-insight-cover > strong, .cover-foot { position: relative; z-index: 2; }
.single-insight-cover > p { margin: 0; color: var(--blue-light); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .16em; }
.single-insight-cover > strong { font-size: clamp(7rem, 20vw, 18rem); line-height: .8; letter-spacing: -.08em; color: transparent; background: linear-gradient(110deg, #fff, var(--blue-light) 52%, #a993ff); -webkit-background-clip: text; background-clip: text; }
.cover-foot { position: absolute; inset: auto 2rem 2rem; display: flex; justify-content: space-between; gap: 1rem; color: #d9e4f0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.cover-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.cover-orbit-one { width: 38rem; height: 38rem; transform: rotate(18deg) scaleY(.42); }
.cover-orbit-two { width: 55rem; height: 55rem; transform: rotate(-24deg) scaleY(.3); border-color: rgba(75,195,238,.22); }
.single-insight-byline { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.single-insight-byline > div { display: grid; gap: .2rem; }
.single-insight-byline > a { align-self: center; justify-self: end; color: var(--blue-light); font-size: .8rem; font-weight: 700; }
.single-insight-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .65fr); gap: clamp(2.5rem, 7vw, 7rem); padding-top: 6rem; padding-bottom: 5rem; }
.single-insight-content { max-width: 49rem; }
.single-insight-content p, .single-insight-content li { color: var(--muted); font-size: 1.08rem; line-height: 1.78; }
.single-insight-content .single-insight-lede { color: var(--text); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.5; }
.single-insight-content h2 { margin: 4rem 0 1.25rem; font-size: clamp(2.5rem, 5vw, 4.7rem); }
.single-insight-content ul, .single-insight-content ol { display: grid; gap: 1rem; padding-left: 1.35rem; }
.single-insight-content li strong { color: var(--text); }
.single-insight-quote { margin: 4rem 0; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); background: radial-gradient(circle at 100% 0, rgba(115,87,246,.3), transparent 18rem), var(--surface); }
.single-insight-quote p { margin-bottom: 1.5rem; color: var(--text); font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.08; letter-spacing: -.04em; }
.single-insight-quote cite { color: var(--blue-light); font-style: normal; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.single-insight-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin: 4rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.single-insight-numbers div { min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; background: var(--surface); }
.single-insight-numbers strong { font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1; }
.single-insight-numbers span { color: var(--muted); font-size: .76rem; }
.single-insight-source-note { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.single-insight-source-note p { font-size: .88rem; }
.single-insight-sidebar { align-self: start; display: grid; gap: 1rem; position: sticky; top: 7rem; }
.insight-widget { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.insight-widget-highlight { background: radial-gradient(circle at 100% 0, rgba(25,139,211,.28), transparent 13rem), var(--surface); }
.insight-widget-title { margin-bottom: 1.5rem; color: var(--blue-light) !important; font-size: .72rem !important; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.insight-widget-highlight > strong { display: block; margin-bottom: .75rem; font-size: clamp(3.6rem, 7vw, 5.8rem); line-height: .85; letter-spacing: -.06em; }
.insight-widget > span, .insight-widget > p:not(.insight-widget-title) { color: var(--muted); font-size: .82rem; }
.insight-topic-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.insight-topic-list span { padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.insight-latest { display: grid; gap: .45rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.insight-latest:first-of-type { border-top: 0; padding-top: 0; }
.insight-latest span { color: var(--blue-light); font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.insight-latest strong { font-size: .9rem; line-height: 1.35; }
.insight-latest:hover strong { color: var(--blue-light); }
.insight-widget > a:last-child { color: var(--blue-light); font-size: .78rem; font-weight: 700; }

.cta { padding: clamp(2.2rem, 6vw, 5rem); border: 1px solid rgba(75,195,238,.27); border-radius: 2rem; background: radial-gradient(circle at 85% 20%, rgba(115,87,246,.32), transparent 24rem), radial-gradient(circle at 10% 100%, rgba(25,139,211,.24), transparent 20rem), var(--surface); overflow: hidden; }
.cta h2 { max-width: 12ch; }
.cta .lead { margin-bottom: 2rem; }

.site-footer { padding: 5rem 0 2rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 2rem; }
.footer-brand img { width: 11rem; }
.footer-brand p { max-width: 28rem; color: var(--muted); margin-top: 1.5rem; }
.footer-col h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--blue-light); }
.footer-col a { display: block; padding: .3rem 0; color: var(--muted); }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 3rem; margin-top: 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }

.page-hero { min-height: 72svh; display: grid; align-items: end; padding: 10rem 0 5rem; }
.page-hero h1 { max-width: 12ch; }
.page-hero .lead { max-width: 42rem; }
body.rayo-inner-page .page-hero,
body.rayo-inner-page .services-hero-rayo,
body.rayo-inner-page .pricing-hero,
body.rayo-inner-page .digest-hero {
  position: relative;
  isolation: isolate;
}
body.rayo-inner-page .page-hero::after,
body.rayo-inner-page .services-hero-rayo::after,
body.rayo-inner-page .pricing-hero::after,
body.rayo-inner-page .digest-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ink));
}
.page-kicker { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 2rem; }
.page-kicker span { border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; color: var(--muted); font-size: .74rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.value-card { padding: 1.6rem; min-height: 14rem; }
.value-card span { color: var(--blue-light); font: 700 .75rem/1 monospace; }
.value-card h3 { margin-top: 3.5rem; }
.timeline { border-left: 1px solid var(--line); margin-left: .45rem; }
.timeline-item { position: relative; padding: 0 0 3rem 2rem; }
.timeline-item::before { content: ""; position: absolute; left: -.42rem; top: .2rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 24px var(--blue); }
.timeline-item span { color: var(--blue-light); font-size: .75rem; }

.service-list { display: grid; gap: .8rem; }
.service-row { display: grid; grid-template-columns: 4rem .75fr 1.25fr 3rem; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.02); transition: background .2s, border .2s; }
.service-row:hover { background: rgba(25,139,211,.08); border-color: rgba(75,195,238,.35); }
.service-row > span:first-child { font: 700 .75rem/1 monospace; color: var(--blue-light); }
.service-row h3 { margin: 0; }
.service-row p { margin: 0; color: var(--muted); }
.service-row .round-arrow { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; list-style: none; padding: 0; }
.detail-list li { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; color: var(--muted); }
.detail-list li::before { content: "↗"; color: var(--blue-light); margin-right: .55rem; }
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.outcome { padding: 1.5rem; }
.outcome strong { display: block; font-size: 2rem; margin-bottom: .5rem; }

.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-button { border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: .65rem 1rem; cursor: pointer; }
.filter-button.active { background: var(--text); color: var(--ink); border-color: var(--text); }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.work-card { min-height: 33rem; }
.work-card.is-hidden { display: none; }
.project-detail-strip { margin-top: -2rem; }
.project-detail-card {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(22rem, 1.14fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: stretch;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(75,195,238,.22);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 100% 0, rgba(75,195,238,.18), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(18px);
}
.project-detail-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 32rem;
  padding: clamp(1rem, 3vw, 2rem);
}
.project-detail-copy h2 {
  max-width: 10ch;
  font-size: clamp(2.9rem, 6vw, 6.5rem);
  line-height: .88;
}
.project-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 2rem 0;
}
.project-detail-meta span {
  display: grid;
  gap: .25rem;
  min-height: 6rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255,255,255,.035);
}
.project-detail-meta small {
  color: var(--blue-light);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.project-detail-meta strong {
  align-self: end;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.25;
}
.project-detail-media {
  min-height: 34rem;
  position: relative;
}
.project-detail-media img {
  position: absolute;
  width: min(76%, 38rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.4rem;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.38);
  object-fit: cover;
}
.project-detail-media img:first-child {
  inset: 2rem auto auto 0;
  aspect-ratio: 1 / 1;
}
.project-detail-media img:last-child {
  right: 0;
  bottom: 1rem;
  width: min(54%, 24rem);
  aspect-ratio: 4 / 5;
  transform: rotate(4deg);
}
.collection-hub { scroll-margin-top: 6rem; }
.collection-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.collection-link { min-height: 8rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,255,255,.02); transition: transform .2s, border-color .2s, background .2s; }
.collection-link:hover { transform: translateY(-3px); border-color: rgba(75,195,238,.45); background: rgba(25,139,211,.08); }
.collection-link span { color: var(--blue-light); font: 700 .75rem/1 monospace; }
.collection-link strong { font-size: 1.15rem; }
.portfolio-stories { padding-top: 2rem; }
.portfolio-story { padding: 5rem 0; border-top: 1px solid var(--line); }
.portfolio-story-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 4rem; align-items: end; margin-bottom: 2rem; }
.portfolio-story-heading .eyebrow { grid-column: 1 / -1; }
.portfolio-story-heading h2, .portfolio-story-heading .lead { margin-bottom: 0; }
.portfolio-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.portfolio-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.portfolio-gallery img:nth-child(3n) { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.portfolio-gallery.two-up img:nth-child(3n) { grid-column: auto; aspect-ratio: 4 / 3; }
.portfolio-gallery.logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portfolio-gallery.logo-wall img,
.portfolio-gallery.logo-wall img:nth-child(3n),
.portfolio-gallery.avatar-wall img,
.portfolio-gallery.avatar-wall img:nth-child(3n) { grid-column: auto; aspect-ratio: 1 / 1; }
.portfolio-gallery.poster-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portfolio-gallery.poster-wall img,
.portfolio-gallery.poster-wall img:nth-child(3n) { grid-column: auto; aspect-ratio: 4 / 5; object-position: top; }
.portfolio-gallery.avatar-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portfolio-gallery.avatar-wall img { object-fit: contain; }
.portfolio-gallery.product-wall img { object-position: center; }
.case-hero-image { border-radius: 2rem; overflow: hidden; max-height: 48rem; }
.case-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.case-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; }
.case-summary > div { background: var(--surface); padding: 1.5rem; }
.case-summary span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: .5rem; }
.before-after { position: relative; min-height: 28rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, #151b28, #07090e); }
.before, .after { position: absolute; inset: 0; display: grid; place-items: center; }
.before { background: #151922; color: #8992a2; }
.after { width: 62%; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(75,195,238,.35), transparent 18rem), #07111c; color: #fff; border-right: 2px solid var(--blue-light); }
.before span, .after span { font-size: clamp(2rem, 6vw, 5rem); font-weight: 800; white-space: nowrap; }
.before-after input { position: absolute; z-index: 3; left: 5%; bottom: 1.5rem; width: 90%; accent-color: var(--blue); }

.faq-list { max-width: 56rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; justify-content: space-between; gap: 1rem; padding: 1.6rem 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: 1.15rem; }
.faq-question span:last-child { color: var(--blue-light); transition: transform .2s; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-answer > div { overflow: hidden; }
.faq-answer p { color: var(--muted); padding: 0 3rem 1.6rem 0; margin: 0; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-question span:last-child { transform: rotate(45deg); }

.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.contact-points { display: grid; gap: 1rem; margin-top: 2rem; }
.contact-point { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; }
.contact-point span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: .25rem; }
.contact-form { padding: clamp(1.5rem, 4vw, 3rem); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .78rem; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; padding: .9rem 1rem; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(75,195,238,.1); }
.field textarea { resize: vertical; min-height: 9rem; }
.form-note { color: var(--muted); font-size: .75rem; margin: 1rem 0; }
.form-status { display: none; margin-top: 1rem; padding: 1rem; border-radius: .8rem; background: rgba(114,232,184,.1); color: var(--green); border: 1px solid rgba(114,232,184,.2); }
.form-status.show { display: block; }

.legal { max-width: 50rem; }
.legal h2 { font-size: 2rem; margin-top: 3rem; }
.legal p, .legal li { color: var(--muted); }
.empty-state { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 6rem 1rem; }
.empty-state strong { display: block; font-size: clamp(7rem, 25vw, 18rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--blue-light); opacity: .5; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
.cursor-glow { position: fixed; left: 0; top: 0; width: 26rem; height: 26rem; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(25,139,211,.08), transparent 68%); pointer-events: none; transform: translate(-50%, -50%); }

@media (max-width: 980px) {
  .nav-links { position: fixed; inset: 0; z-index: 2; padding: 8rem 1.25rem 2rem; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .25rem; background: rgba(5,7,11,.97); transform: translateY(-105%); transition: transform .35s ease; }
  html[data-theme="light"] .nav-links { background: rgba(244,247,251,.98); }
  .nav-links.open { transform: none; }
  .nav-links > a:not(.button) { padding: .7rem 0; font-size: clamp(1.6rem, 7vw, 3rem); color: var(--text); border-bottom: 1px solid var(--line); }
  .nav-links .button { margin-top: 1rem; }
  .nav-links > .button { display: inline-flex; }
  .menu-button { display: grid; position: relative; z-index: 3; }
  .nav-actions > .button { display: none; }
  .hero-grid, .process, .split, .contact-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 33rem; }
  .scroll-cue { display: none; }
  .service-card { grid-column: span 6; }
  .service-card.featured { grid-column: span 12; }
  .project-grid { grid-template-columns: 1fr; }
  .project:nth-child(2) { margin-top: 0; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .tech-row { grid-template-columns: repeat(3, 1fr); }
  .posts { grid-template-columns: 1fr 1fr; }
  .posts .post:last-child { grid-column: span 2; }
  .news-card-featured { grid-column: span 2; }
  .news-toolbar { display: block; }
  .news-updated { margin-top: 1rem; }
  .single-insight-layout { grid-template-columns: 1fr; }
  .single-insight-content { max-width: none; }
  .single-insight-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .service-row { grid-template-columns: 3rem 1fr 3rem; }
  .service-row p { grid-column: 2 / -1; }
  .outcomes { grid-template-columns: 1fr; }
  .template-menu-panel {
    z-index: 110;
    align-items: flex-start;
    justify-content: center;
    gap: .55rem;
    padding: 7rem 1.25rem 2.5rem;
    background: rgba(22, 22, 22, .98);
    transform: translateY(-105%);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  html[data-theme="dark"] .template-menu-panel,
  html[data-theme="light"] .template-menu-panel { background: rgba(22, 22, 22, .98); }
  .template-menu-panel.open { transform: translateY(0); }
  .template-menu-panel > a:not(.button) {
    padding: .15rem 0;
    border-bottom: 0;
    font-size: clamp(2.65rem, 13vw, 5.4rem);
    line-height: .92;
  }
  .template-menu-button { z-index: 120; }
}

@media (max-width: 640px) {
  .section { padding: 5rem 0; }
  .section-sm { padding: 3rem 0; }
  .brand { width: 8.9rem; }
  .template-brand { width: 11.5rem; height: 3.6rem; }
  .header-cta { display: none; }
  .hero { min-height: 92svh; padding-top: 7rem; }
  .hero h1 { font-size: clamp(3.5rem, 20vw, 6rem); }
  .hero-media img { object-position: 67% center; }
  .hero-media::after { background: linear-gradient(90deg, rgba(5,7,11,.98), rgba(5,7,11,.6)), linear-gradient(0deg, rgba(5,7,11,.9), transparent 60%); }
  html[data-theme="light"] .hero-media::after { background: linear-gradient(90deg, rgba(244,247,251,.98), rgba(244,247,251,.68)), linear-gradient(0deg, rgba(244,247,251,.92), transparent 60%); }
  .section-heading { display: block; }
  .section-heading h2 { margin-bottom: 1.25rem; }
  .service-card, .service-card.featured { grid-column: span 12; min-height: 19rem; }
  .project, .project:nth-child(2), .work-card { min-height: 29rem; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 2rem 1rem; }
  .process { gap: 2rem; }
  .sticky { position: static; }
  .tech-row { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: 1fr; }
  .posts .post:last-child { grid-column: auto; }
  .news-card-featured { grid-column: auto; min-height: 29rem; }
  .news-card h2 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .article-hero { min-height: 74svh; padding-top: 8rem; }
  .article-layout { grid-template-columns: 1fr; padding-top: 3rem; }
  .article-aside { position: static; }
  .single-insight-hero { padding-top: 8rem; }
  .single-insight-topline { margin-bottom: 2.5rem; }
  .single-insight-hero h1 { font-size: clamp(3.6rem, 17vw, 6rem); }
  .single-insight-intro { grid-template-columns: 1fr; }
  .single-insight-date { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .single-insight-cover { min-height: 28rem; border-radius: 1.25rem; }
  .single-insight-cover > strong { font-size: clamp(6rem, 27vw, 10rem); }
  .cover-foot { flex-direction: column; align-items: center; inset-inline: 1rem; }
  .single-insight-byline { grid-template-columns: 1fr 1fr; }
  .single-insight-byline > a { grid-column: 1 / -1; justify-self: start; padding-top: 1rem; border-top: 1px solid var(--line); }
  .single-insight-layout { padding-top: 4rem; }
  .single-insight-sidebar { grid-template-columns: 1fr; }
  .single-insight-numbers { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .page-hero { min-height: 65svh; }
  .value-grid, .detail-list, .work-grid, .form-grid, .collection-nav { grid-template-columns: 1fr; }
  .portfolio-story { padding: 3.5rem 0; }
  .portfolio-story-heading, .portfolio-gallery, .portfolio-gallery.logo-wall, .portfolio-gallery.poster-wall, .portfolio-gallery.avatar-wall { grid-template-columns: 1fr; }
  .portfolio-story-heading .eyebrow, .portfolio-gallery img:nth-child(3n) { grid-column: auto; }
  .portfolio-gallery img, .portfolio-gallery img:nth-child(3n) { aspect-ratio: 4 / 3; }
  .portfolio-gallery.logo-wall img, .portfolio-gallery.logo-wall img:nth-child(3n), .portfolio-gallery.avatar-wall img, .portfolio-gallery.avatar-wall img:nth-child(3n) { aspect-ratio: 1 / 1; }
  .portfolio-gallery.poster-wall img, .portfolio-gallery.poster-wall img:nth-child(3n) { aspect-ratio: 4 / 5; }
  .field.full { grid-column: auto; }
  .service-row { grid-template-columns: 2.5rem 1fr 2.5rem; padding: 1.15rem .9rem; }
  .service-row p { grid-column: 1 / -1; padding-left: 2.5rem; }
  .case-summary { grid-template-columns: 1fr 1fr; }
}

/* Pricing */
.pricing-hero {
  min-height: 68svh;
  display: grid;
  align-items: end;
  padding: 10rem 0 5rem;
  background:
    radial-gradient(circle at 84% 18%, rgba(75,195,238,.24), transparent 25rem),
    radial-gradient(circle at 18% 88%, rgba(115,87,246,.22), transparent 30rem);
}
.pricing-hero h1 { max-width: 11ch; font-size: clamp(4rem, 10vw, 9.4rem); line-height: .88; }
.pricing-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.pricing-option { min-height: 38rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.7rem; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.18); backdrop-filter: blur(16px); }
.pricing-option.featured { border-color: rgba(75,195,238,.45); background: radial-gradient(circle at 90% 0, rgba(25,139,211,.22), transparent 18rem), linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); }
.pricing-index { color: var(--blue-light); font: 700 .72rem/1 monospace; }
.pricing-badge { position: absolute; right: 1.3rem; top: 1.2rem; padding: .42rem .7rem; border-radius: 999px; color: #061019; background: var(--blue-light); font-size: .68rem; font-weight: 800; }
.pricing-option h2 { font-size: clamp(2.2rem, 4vw, 3.7rem); max-width: 9ch; margin-bottom: 1rem; }
.pricing-option p { color: var(--muted); }
.pricing-option ul { display: grid; gap: .7rem; margin: 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); }
.pricing-option li { display: flex; gap: .65rem; }
.pricing-option li::before { content: "✦"; color: var(--blue-light); }
.pricing-footer { display: grid; gap: 1rem; margin-top: auto; }
.pricing-footer strong { font-size: .85rem; color: var(--text); }
.pricing-note { text-align: center; }
.pricing-note .container {
  padding: clamp(2.2rem, 6vw, 4.5rem);
  border: 1px solid rgba(75,195,238,.22);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 100% 0, rgba(115,87,246,.22), transparent 22rem),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(16px);
}
.pricing-note h2, .pricing-note .lead { max-width: 54rem; margin-inline: auto; }
.pricing-note .button { margin-top: 1.25rem; }
@media (max-width: 980px) { .pricing-options { grid-template-columns: 1fr; } .pricing-option { min-height: auto; } }
@media (max-width: 640px) { .pricing-hero { min-height: 58svh; padding-top: 9rem; } .pricing-option { padding: 1.35rem; } }

/* Rayo-inspired digital digest */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.digest-page {
  --digest-panel: color-mix(in srgb, var(--surface-2) 74%, var(--ink));
  --digest-panel-strong: color-mix(in srgb, var(--surface) 88%, var(--blue) 12%);
}

.digest-hero {
  padding: clamp(10rem, 16vw, 15rem) 0 clamp(4rem, 7vw, 7rem);
}

.digest-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .28fr);
  gap: 3rem;
  align-items: end;
}

.digest-heading-row h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(4.3rem, 10.8vw, 10.8rem);
  line-height: .86;
  letter-spacing: -.075em;
}

.digest-heading-row > p {
  max-width: 24rem;
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: 1.02rem;
}

.digest-heading-image {
  width: .82em;
  height: .55em;
  display: inline-block;
  overflow: hidden;
  margin: 0 .04em .02em .08em;
  border-radius: .28em;
  vertical-align: middle;
  transform: rotate(-4deg);
  box-shadow: 0 .12em .3em rgba(0, 0, 0, .28);
}

.digest-heading-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.digest-hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.digest-topic-cloud {
  max-width: 56rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.digest-topic {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  padding: .6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

button.digest-topic:hover,
button.digest-topic.active {
  color: var(--ink);
  border-color: var(--text);
  background: var(--text);
  transform: translateY(-2px);
}

.digest-topic-static { cursor: default; }

.digest-breadcrumbs {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--muted);
  font-size: .8rem;
}

.digest-breadcrumbs a::after {
  content: "↗";
  display: inline-block;
  margin-left: .25rem;
  color: var(--blue-light);
}

.digest-breadcrumbs span::before {
  content: "/";
  margin-right: .8rem;
  opacity: .55;
}

.digest-section { padding: 0 0 clamp(6rem, 10vw, 10rem); }

.digest-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.08fr) minmax(19rem, .75fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.digest-page .news-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.digest-page .news-card::before { content: none; }
.digest-page .news-card.is-hidden { display: none; }

.digest-featured {
  padding-bottom: clamp(3.5rem, 6vw, 6rem) !important;
  border-bottom: 1px solid var(--line) !important;
}

.digest-featured-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 14 / 9;
  border-radius: 1.75rem;
  background: var(--surface);
}

.digest-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(3, 7, 12, .78));
}

.digest-featured-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.digest-featured:hover .digest-featured-media > img { transform: scale(1.035); }

.digest-media-tags {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.digest-media-tags span {
  padding: .52rem .82rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(3, 7, 12, .28);
  color: #fff;
  font-size: .72rem;
  backdrop-filter: blur(10px);
}

.digest-featured-copy { padding-top: 2rem; }

.digest-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-size: .73rem;
}

.digest-meta i {
  color: var(--blue-light);
  font-style: normal;
  line-height: 1;
}

.digest-meta time { margin-left: auto; }

.digest-featured h2 {
  max-width: 16ch;
  margin: 1.45rem 0 1.1rem;
  font-size: clamp(2.65rem, 5.5vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.digest-featured h2 a,
.digest-row h3 a { transition: color .2s; }
.digest-featured h2 a:hover,
.digest-row h3 a:hover { color: var(--blue-light); }

.digest-featured-copy > p {
  max-width: 47rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.digest-read-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid currentColor;
  color: var(--blue-light);
  font-size: .78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.digest-read-link span { transition: transform .2s; }
.digest-read-link:hover span { transform: translate(3px, -3px); }

.digest-row {
  display: grid !important;
  grid-template-columns: minmax(14rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.digest-row-media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 17rem;
  border-radius: 1.4rem;
  background: var(--surface);
}

.digest-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s ease;
}

.digest-row:hover .digest-row-media img { transform: scale(1.04); }

.digest-hover-eye {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(5, 7, 11, .74);
  color: #fff;
  font-size: 1.2rem;
  backdrop-filter: blur(10px);
  transform: scale(.75);
  opacity: 0;
  transition: transform .25s, opacity .25s;
}

.digest-row:hover .digest-hover-eye { transform: scale(1); opacity: 1; }

.digest-row-copy {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-right: 4rem;
}

.digest-row h3 {
  margin: auto 0 1rem;
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.digest-row-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.digest-round-link {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.digest-round-link:hover {
  color: var(--ink);
  border-color: var(--text);
  background: var(--text);
  transform: rotate(7deg);
}

.digest-source-note {
  max-width: 45rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: .74rem;
}

.digest-sidebar {
  position: sticky;
  top: 7rem;
  display: grid;
  gap: 1rem;
}

.digest-widget {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: var(--digest-panel);
}

.digest-widget h2 {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.digest-widget > p {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

.digest-search-widget { position: relative; padding: 0; overflow: hidden; }

.digest-search-widget input {
  width: 100%;
  height: 4rem;
  padding: 0 3.8rem 0 1.25rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.digest-search-widget input::placeholder { color: var(--muted); }

.digest-search-widget > span {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  color: var(--blue-light);
  font-size: 1.4rem;
  transform: translateY(-50%);
}

.digest-category-list { display: grid; }

.digest-category-list button {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color .2s, padding .2s;
}

.digest-category-list button:last-child { border-bottom: 0; }
.digest-category-list button:hover,
.digest-category-list button.active { padding-left: .35rem; color: var(--text); }
.digest-category-list button span:last-child { font-size: .68rem; }

.digest-latest-list { display: grid; gap: 1rem; }

.digest-latest-list a {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
}

.digest-latest-list img {
  width: 4.75rem;
  height: 4.75rem;
  object-fit: cover;
  border-radius: .8rem;
}

.digest-latest-list span { min-width: 0; display: grid; gap: .3rem; }
.digest-latest-list small { color: var(--blue-light); font-size: .64rem; }
.digest-latest-list strong { font-size: .78rem; line-height: 1.25; }
.digest-latest-list a:hover strong { color: var(--blue-light); }

.digest-ad {
  position: relative;
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  color: #fff;
}

.digest-ad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 12, .06) 15%, rgba(4, 7, 12, .94));
}

.digest-ad > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s;
}

.digest-ad:hover > img { transform: scale(1.04); }
.digest-ad > span,
.digest-ad > strong,
.digest-ad > i { position: relative; z-index: 2; }
.digest-ad > span { font-size: .65rem; text-transform: uppercase; letter-spacing: .11em; color: #8bdcff; }
.digest-ad > strong { max-width: 8ch; margin: .7rem 0 1rem; font-size: 2.3rem; line-height: .95; letter-spacing: -.04em; }
.digest-ad > i { font-size: .72rem; font-style: normal; }

.digest-ecosystem a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .83rem;
}

.digest-ecosystem p { margin-bottom: 1rem; }
.digest-ecosystem a:last-child { border-bottom: 0; }
.digest-ecosystem a:hover { color: var(--text); }
.digest-ecosystem a span { color: var(--blue-light); }

.digest-promo-section { padding-bottom: clamp(6rem, 10vw, 10rem); overflow: hidden; }

.digest-promo {
  position: relative;
  min-height: clamp(31rem, 58vw, 45rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem);
  border: 1px solid rgba(75, 195, 238, .23);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(75, 195, 238, .36), transparent 12rem),
    radial-gradient(circle at 86% 18%, rgba(115, 87, 246, .43), transparent 25rem),
    radial-gradient(circle at 10% 90%, rgba(25, 139, 211, .25), transparent 22rem),
    #06101d;
  color: #fff;
  text-align: center;
}

.digest-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.digest-promo-copy { position: relative; z-index: 2; display: grid; justify-items: center; }

.digest-promo-icon {
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  padding: .65rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}

.digest-promo-icon img { width: 100%; height: 100%; object-fit: contain; }

.digest-promo h2 {
  max-width: 10ch;
  margin: 0 0 2rem;
  font-size: clamp(3.3rem, 8vw, 7.6rem);
  line-height: .88;
  letter-spacing: -.065em;
}

.digest-promo-orb {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .4);
}

.digest-promo-orb img { width: 100%; height: 100%; object-fit: cover; }
.digest-promo-orb-one { width: clamp(7rem, 15vw, 12rem); height: clamp(7rem, 15vw, 12rem); left: 7%; top: 14%; transform: rotate(-10deg); }
.digest-promo-orb-two { width: clamp(5rem, 11vw, 9rem); height: clamp(5rem, 11vw, 9rem); right: 8%; bottom: 12%; transform: rotate(12deg); }

html[data-theme="light"] .digest-promo {
  background:
    radial-gradient(circle at 50% 45%, rgba(75, 195, 238, .34), transparent 12rem),
    radial-gradient(circle at 86% 18%, rgba(115, 87, 246, .3), transparent 25rem),
    linear-gradient(135deg, #e8f7ff, #f2edff);
  color: #07101d;
}

@media (max-width: 1024px) {
  .digest-heading-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .digest-heading-row > p { max-width: 40rem; }
  .digest-layout { grid-template-columns: 1fr; }
  .digest-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .digest-ad { min-height: 24rem; }
}

@media (max-width: 720px) {
  .digest-hero { padding-top: 9rem; }
  .digest-heading-row h1 { font-size: clamp(4rem, 20vw, 7rem); }
  .digest-heading-image { width: .72em; }
  .digest-hero-meta { grid-template-columns: 1fr; }
  .digest-breadcrumbs { order: -1; }
  .digest-row { grid-template-columns: 1fr; }
  .digest-row-media { min-height: 20rem; }
  .digest-row-copy { min-height: 17rem; }
  .digest-sidebar { grid-template-columns: 1fr; }
  .digest-promo-orb { opacity: .58; }
}

@media (max-width: 480px) {
  .digest-heading-row h1 { font-size: clamp(3.55rem, 18.5vw, 5.4rem); }
  .digest-featured-media { aspect-ratio: 4 / 4.8; border-radius: 1.25rem; }
  .digest-featured h2 { font-size: 2.55rem; }
  .digest-row-media { min-height: 17rem; }
  .digest-row-copy { min-height: 19rem; padding-right: 0; }
  .digest-row h3 { margin-top: auto; }
  .digest-round-link { position: static; margin-top: 1.5rem; }
  .digest-meta time { width: 100%; margin: .35rem 0 0; }
  .digest-promo { min-height: 34rem; border-radius: 1.4rem; }
  .digest-promo h2 { font-size: clamp(3rem, 16vw, 4.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
html[data-theme="light"] .glass-card,
html[data-theme="light"] .pricing-option,
html[data-theme="light"] .digest-page .news-card,
html[data-theme="light"] .digest-widget,
html[data-theme="light"] .digest-ad,
html[data-theme="light"] .project-detail-card,
html[data-theme="light"] .pricing-note .container,
html[data-theme="light"] .collection-link {
  background-color: rgba(255, 255, 255, .78);
  border-color: rgba(10, 24, 45, .12);
  box-shadow: 0 1.25rem 4rem rgba(10, 24, 45, .07);
}
html[data-theme="light"] .works-marquee,
html[data-theme="light"] .ticker {
  background: rgba(255, 255, 255, .54);
}
.services-hero-rayo {
  min-height: 88svh;
  display: grid;
  align-items: end;
  padding: 11rem 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 25%, rgba(115,87,246,.25), transparent 24rem),
    radial-gradient(circle at 18% 85%, rgba(25,139,211,.2), transparent 26rem);
}

.services-kicker {
  display: flex;
  gap: .65rem;
  align-items: center;
  margin-bottom: 2rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
}

.services-kicker span { color: var(--blue-light); }
.services-hero-rayo h1 { max-width: 11ch; font-size: clamp(4rem, 10vw, 9.5rem); line-height: .9; }
.services-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: 3rem; }
.services-hero-foot .lead { max-width: 46rem; margin: 0; }

.services-stat-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 1rem; }
.services-stat-card { min-height: 32rem; position: relative; overflow: hidden; display: flex; align-items: flex-start; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.services-stat-card > div { position: relative; z-index: 2; max-width: 28rem; }
.services-stat-card p { max-width: 28ch; color: #fff; font-size: 1.1rem; }
.services-stat-number { display: block; color: #fff; font-size: clamp(4rem, 8vw, 8rem); line-height: .8; font-weight: 800; letter-spacing: -.08em; }
.services-stat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.56) saturate(.86); transform: scale(1.01); transition: transform .7s ease; }
.services-stat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(5,7,11,.8), rgba(5,7,11,.08) 65%); }
.services-stat-card:hover img { transform: scale(1.05); }

.services-catalog .section-heading { max-width: 58rem; margin-bottom: 4rem; }
.services-spotlight-list { border-top: 1px solid var(--line); }
.services-spotlight { min-height: 12rem; position: relative; display: grid; grid-template-columns: 3.5rem minmax(15rem, .9fr) minmax(17rem, 1.1fr) minmax(12rem, .8fr) 3rem; gap: 1.5rem; align-items: center; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.services-spotlight-index { color: var(--blue-light); font: 700 .72rem/1 monospace; }
.services-spotlight h3 { margin: 0; font-size: clamp(1.8rem, 3vw, 3.1rem); }
.services-spotlight > p { margin: 0; color: var(--muted); }
.services-spotlight-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.services-spotlight-tags span { padding: .38rem .62rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .68rem; }
.services-spotlight > img { width: 13rem; aspect-ratio: 4 / 5; position: absolute; z-index: 4; right: 7rem; top: 50%; object-fit: cover; border-radius: 1rem; box-shadow: 0 2rem 4rem rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translateY(-42%) rotate(4deg) scale(.88); transition: opacity .25s ease, transform .35s ease; }
.services-spotlight:hover > img { opacity: 1; transform: translateY(-50%) rotate(2deg) scale(1); }
.services-spotlight-arrow { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: color .2s, background .2s, transform .2s; }
.services-spotlight:hover .services-spotlight-arrow { color: #061019; background: var(--blue-light); transform: rotate(45deg); }
.services-engagement { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 7rem); }

.works-rayo-hero { min-height: 68svh; background: radial-gradient(circle at 75% 55%, rgba(115,87,246,.22), transparent 25rem); }
.works-rayo-hero h1 { font-size: clamp(4.5rem, 11vw, 10rem); line-height: .82; max-width: 9ch; }
.works-rayo-hero .lead { margin-left: auto; }
.works-rayo-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; }
.works-rayo-grid .work-card { grid-column: span 6; min-height: 39rem; }
.works-rayo-grid .work-card:nth-child(4n + 2),
.works-rayo-grid .work-card:nth-child(4n + 3) { min-height: 30rem; }
.works-rayo-grid .work-card:nth-child(5n) { grid-column: span 7; }
.works-rayo-grid .work-card:nth-child(5n + 1):not(:first-child) { grid-column: span 5; }
.works-marquee { overflow: hidden; padding: 2rem 0; border-block: 1px solid var(--line); }
.works-marquee > div { width: max-content; display: flex; gap: 2rem; align-items: center; padding-left: 2rem; font-size: clamp(2rem, 5vw, 5rem); font-weight: 700; letter-spacing: -.05em; animation: worksMarquee 28s linear infinite; }
.works-marquee i { color: var(--blue-light); font-size: .42em; font-style: normal; }

@keyframes worksMarquee { to { transform: translateX(-50%); } }

@media (max-width: 980px) {
  .project-detail-card { grid-template-columns: 1fr; }
  .project-detail-copy { min-height: auto; }
  .project-detail-media { min-height: 30rem; }
  .services-hero-foot, .services-engagement { grid-template-columns: 1fr; }
  .services-stat-grid { grid-template-columns: 1fr; }
  .services-stat-card { min-height: 27rem; }
  .services-spotlight { grid-template-columns: 3rem 1fr 3rem; }
  .services-spotlight > p, .services-spotlight-tags { grid-column: 2 / 3; }
  .services-spotlight > img { display: none; }
  .services-spotlight-arrow { grid-column: 3; grid-row: 1; }
  .works-rayo-grid .work-card,
  .works-rayo-grid .work-card:nth-child(5n),
  .works-rayo-grid .work-card:nth-child(5n + 1):not(:first-child) { grid-column: span 6; }
}

@media (max-width: 640px) {
  .project-detail-card { border-radius: 1.3rem; }
  .project-detail-meta { grid-template-columns: 1fr; }
  .project-detail-media { min-height: 24rem; }
  .project-detail-media img:first-child { width: 86%; }
  .project-detail-media img:last-child { width: 58%; }
  .services-hero-rayo { min-height: 74svh; padding-top: 9rem; }
  .services-hero-rayo h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .services-stat-card { min-height: 23rem; padding: 1.4rem; }
  .services-spotlight { grid-template-columns: 2.2rem 1fr 2.5rem; gap: .8rem; padding: 1.6rem 0; }
  .services-spotlight > p, .services-spotlight-tags { grid-column: 1 / -1; padding-left: 3rem; }
  .works-rayo-hero h1 { font-size: clamp(4rem, 19vw, 6rem); }
  .works-rayo-grid .work-card,
  .works-rayo-grid .work-card:nth-child(4n + 2),
  .works-rayo-grid .work-card:nth-child(4n + 3),
  .works-rayo-grid .work-card:nth-child(5n),
  .works-rayo-grid .work-card:nth-child(5n + 1):not(:first-child) { grid-column: 1 / -1; min-height: 27rem; }
}