:root {
  color-scheme: dark;
  --header-logo-width: 154px;
  --ink: #0a0a0b; --surface: #0e0e10; --text: #f5f5f4; --body: #d6d3ce; --muted: #a8a29e;
  --ember: #fb923c; --ember-strong: #f97316; --frost: #2dd4bf; --frost-strong: #14b8a6;
  --line: #303033; --display: 'Space Grotesk', sans-serif; --sans: 'Inter', sans-serif;
  --gutter: clamp(24px, 5vw, 80px); --section: clamp(64px, 7vw, 112px);
  --fast: 180ms; --normal: 350ms; --slow: 600ms; --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 105px; background: var(--ink); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
::selection { color: var(--ink); background: var(--frost); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: var(--display); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
p { text-wrap: pretty; }
h2 { font-size: clamp(40px, 4.8vw, 70px); }
h3 { font-size: clamp(26px, 2.5vw, 36px); }
a,button { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible { outline: 2px solid var(--frost); outline-offset: 6px; border-radius: 2px; }
[tabindex='-1']:focus { outline: none; }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.eyebrow,.index { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; }
.eyebrow { color: var(--ember); }
.muted { color: var(--muted); }
.ember { color: var(--ember); }
.frost { color: var(--frost); }
.skip-link { position: fixed; z-index: 100; top: 16px; left: 16px; padding: 12px 20px; background: var(--frost); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(10,10,11,.94); border-bottom: 1px solid var(--line); }
/* A real hero overlay: geometry is stable while only opacity/translation changes on scroll. */
.site-header.has-menu { transition:background-color 220ms ease,border-bottom-color 220ms ease,transform 220ms ease; }
.site-header.header-over-hero { position:fixed; left:0; right:0; background-color:transparent; border-bottom-color:transparent; }
.site-header.is-away:not(:focus-within) { transform:translateY(-100%); }
.site-header.header-over-hero.is-scrolled,
html.menu-open .site-header,html.chat-open .site-header { background-color:var(--ink); border-bottom-color:var(--line); }
html.menu-open .site-header,html.chat-open .site-header,.site-header:focus-within { transform:none; }
@media(prefers-reduced-motion:reduce) { .site-header.has-menu { transition:none; } }
@media(forced-colors:active) { .site-header.header-over-hero { background:Canvas; border-bottom-color:CanvasText; } }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { width: 154px; height: auto; }
.header-wordmark,.menu-wordmark-box { display:block; position:relative; }
.header-logo-motion,.menu-logo-motion { position:absolute; inset:0; pointer-events:none; }
.navigation { display: flex; align-items: center; gap: 36px; font-size: 13px; }
.navigation a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--fast); }
.navigation a:hover { color: var(--ember); }
.navigation .nav-contact { border: 1px solid #5d5147; padding: 7px 20px; border-radius: 2px; gap: 24px; }
.nav-contact span { color: var(--ember); font-size: 20px; }
/* Existing indicator now belongs to page loading, never to scroll position. */
.reading-progress { display:none; height:2px; position:fixed; top:0; left:0; width:100%; z-index:2147483647; overflow:hidden; visibility:visible; pointer-events:none; background:rgba(255,255,255,.12); }
html.page-entering .reading-progress,html.page-leaving .reading-progress { display:block; }
.reading-progress::before { content:''; display:block; width:36%; height:100%; background:linear-gradient(90deg,var(--ember-strong),var(--frost-strong)); animation:page-loading 1.2s ease-in-out infinite; }
.reading-progress.has-progress::before { width:100%; animation:none; transform:scaleX(var(--loaded,0)); transform-origin:left; transition:transform 180ms linear; }
@keyframes page-loading { from { transform:translateX(0); } to { transform:translateX(280%); } }
@media(prefers-reduced-motion:reduce),(forced-colors:active) { html .reading-progress { display:none!important; } }
.hero { position: relative; min-height: min(880px, calc(100svh - 88px)); isolation: isolate; overflow: clip; border-bottom: 1px solid var(--line); }
.hero::after { z-index: -1; content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,var(--ink) 0%,var(--ink) 22%,rgba(10,10,11,.8) 44%,rgba(10,10,11,.65) 65%,rgba(10,10,11,.15) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.75) 30%,rgba(10,10,11,.1) 55%,rgba(10,10,11,.1) 75%,var(--ink) 100%); }
.hero-content { padding-top: 40px; padding-bottom: 80px; }
.hero h1 { max-width: 1050px; font-size: clamp(70px,8.5vw,132px); line-height: .98; letter-spacing: -.065em; }
.hero h1 > span { display: block; }
.hero h1 .intent { color: var(--ember); }
.button { display: inline-flex; gap: 32px; align-items: center; justify-content: space-between; margin-top: 24px; padding: 13px 18px 13px 22px; color: var(--ink); background: var(--ember); min-height: 52px; font-size: 13px; font-weight: 600; border-radius: 2px; transition: transform var(--fast) var(--ease),background-color var(--fast); }
.button:hover { background: #ffb374; }
.button:active { transform: scale(.98); }
.arrow { font-size: 24px; line-height: 1; transition: transform var(--normal) var(--ease); }
.button:hover .arrow { transform: translate(3px,-3px); }
.section-label { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.index { color: var(--muted); }
.sticky-intro { position: sticky; top: 130px; align-self: start; }
.sticky-intro h2 { margin-top: 24px; }
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12%; }
.approach-intro h2 { font-size: clamp(40px,4.4vw,64px); }
.approach-art { display: none; max-width: 450px; margin: 24px 0 0; position: relative; aspect-ratio: 1.75; isolation: isolate; }
.approach-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--normal) var(--ease); }
.approach-art img.is-current { opacity: 1; }
.step-art { width: 100%; max-width: 450px; height: auto; margin-top: 28px; }
@media (min-width: 761px) {
  .has-approach-art .approach-art { display: block; }
  /* Preserve anchor geometry when decoded artwork moves to the sticky plane. */
  .has-approach-art .step-art { visibility: hidden; }
}
.chapter-indicator { display: flex; align-items: center; gap: 16px; font: 12px var(--display); color: var(--muted); max-width: 330px; margin-top: 24px; }
.chapter-current { color: var(--frost); }
.chapter-line { height: 1px; flex: 1; background: var(--line); position: relative; }
.chapter-line::after { content: ''; display: block; width: 100%; height: 1px; background: var(--frost); transform: scaleX(var(--chapter-progress,.25)); transform-origin: left; transition: transform var(--slow) var(--ease); }
.approach-steps { list-style: none; margin: 0; padding: 0; }
.approach-steps li { min-height: 420px; border-top: 1px solid var(--line); padding-block: 40px 64px; display: flex; gap: 26px; align-items: flex-start; }
.approach-steps li > div { flex: 1; min-width: 0; }
.step-number { font: 500 15px var(--display); color: var(--muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
.approach-steps .eyebrow { color: var(--frost); margin-bottom: 24px; }
.approach-steps h3 { font-size: clamp(34px,3.2vw,48px); }
.approach-steps h3 + p { margin-top: 24px; max-width: 350px; font-size: 15px; color: var(--muted); }
.approach-steps li.is-current .step-number { color: var(--frost); }
.email-link { display: flex; gap: 40px; padding-block: 12px; border-bottom: 1px solid var(--muted); font: 400 clamp(21px,2.4vw,36px)/1.4 var(--display); letter-spacing: -.03em; }
.email-link span { color: var(--ember); }
.email-link:hover { color: var(--ember); }
/* Closing composition. All layout and type rules stay inside the footer. */
.site-footer { padding-block: clamp(48px,5vw,80px) max(24px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.site-footer .footer-main { display: grid; grid-template-columns: minmax(240px,1fr) minmax(0,2.3fr); gap: clamp(40px,5vw,80px); }
.site-footer .brand img { width: 154px; }
.site-footer .footer-invitation { margin-top: 28px; color: var(--muted); font-size: 14px; }
.site-footer .footer-contact { display: flex; align-items: center; gap: 24px; width: fit-content; min-height: 56px; font: 500 clamp(32px,3vw,44px)/1.2 var(--display); letter-spacing: -.04em; }
.site-footer .footer-contact span { color: var(--ember); font-size: .75em; }
.site-footer .footer-email { display: flex; align-items: center; width: fit-content; min-height: 44px; color: var(--body); font-size: 14px; }
.site-footer .footer-nav { display: grid; grid-template-columns: .9fr 1.5fr 1fr; gap: clamp(24px,3vw,48px); }
.site-footer .footer-group { min-width: 0; }
.site-footer .footer-group h2 { min-height: 44px; display: flex; align-items: center; margin-bottom: 12px; color: var(--muted); font: 500 11px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase; text-wrap: initial; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-nav a { display: flex; align-items: center; width: fit-content; min-height: 44px; color: var(--body); font-size: 14px; }
.site-footer .footer-explore a { color: var(--text); font-size: 16px; }
.site-footer .footer-product-brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 14px/1.3 var(--display); letter-spacing: -.025em; }
.site-footer .product-suffix { flex: none; padding: 4px 6px; font-size: 13px; letter-spacing: 0; }
.site-footer a { min-width: 44px; transition: color var(--fast); }
.site-footer a:hover { color: var(--ember); }
.site-footer .footer-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 6px; }
.site-footer a:focus-visible { outline: 2px solid var(--frost); outline-offset: 4px; border-radius: 2px; }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(40px,4vw,64px); padding-top: 20px; border-top: 1px solid var(--line); }
.site-footer .footer-bottom p { color: var(--muted); font-size: 12px; }
.site-footer .back-top { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; color: var(--body); font-size: 12px; white-space: nowrap; }
.site-footer .back-top span { color: var(--frost); font-size: 20px; }
@media (max-width: 1100px) {
  .site-footer .footer-main { grid-template-columns: 1fr; }
  .site-footer .footer-nav { grid-template-columns: 1fr 1.4fr 1fr; }
}
@media (max-width: 640px) {
  .site-footer .footer-main { gap: 36px; }
  .site-footer .footer-nav { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .footer-group h2 { margin-bottom: 4px; min-height: 28px; }
  .site-footer .footer-services ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
  .site-footer .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .site-footer a { transition: none; } }
/* Floating back to top: the hero's scroll cue with the arrow turned upwards.
   site.js shows it once the hero has scrolled away; without JS it stays hidden
   and the footer link above does the job. */
.to-top { position: fixed; z-index: 15; right: max(12px,calc((var(--gutter) - 44px) / 2)); bottom: max(20px,env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #67605a; border-radius: 50%; background: rgba(10,10,11,.82); color: var(--text); font-size: 20px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--normal) var(--ease),transform var(--normal) var(--ease),visibility 0s linear var(--normal),border-color var(--fast); }
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { border-color: var(--ember); }
.to-top:hover .scroll-arrow { transform: translateY(-3px); }
@keyframes arrive { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero h1 > span { animation: arrive var(--slow) var(--ease) both; }
  .hero h1 > span:nth-child(2) { animation-delay: 80ms; }
  .hero h1 > span:nth-child(3) { animation-delay: 160ms; }
  [data-reveal].is-revealing { animation: arrive var(--slow) var(--ease) both; }
}
@media (max-width: 1050px) {
  .hero { min-height: 780px; }
  .hero h1 { font-size: clamp(68px,9.5vw,100px); }
  .approach { gap: 0 7%; }
  .sticky-intro { top: 115px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 92px; }
  .site-header:not(.has-menu) { position: relative; }
  .header-inner { min-height: 76px; gap: 20px; flex-wrap: wrap; }
  .brand img { width: 134px; }
  .navigation { width: 100%; gap: 6px; flex-wrap: wrap; padding-bottom: 16px; justify-content: space-between; }
  .navigation a { font-size: 12px; padding: 8px 6px; }
  .navigation .nav-contact { border: 0; padding: 8px 6px; gap: 8px; }
  .hero { min-height: 770px; }
  .hero-content { padding-top: 28px; padding-bottom: 68px; }
  .hero h1 { font-size: clamp(51px,10.9vw,82px); max-width: 650px; line-height: 1.02; }
  .hero h1 .intent { font-size: .89em; }
  .hero::after { background: linear-gradient(180deg,var(--ink) 18%,rgba(10,10,11,.55) 32%,rgba(10,10,11,.3) 42%,rgba(10,10,11,.78) 63%,var(--ink) 94%),linear-gradient(90deg,rgba(10,10,11,.4),transparent 60%); }
  .button { margin-top: 20px; }
  .section-label { margin-bottom: 32px; }
  .section-label .index { display: none; }
  .eyebrow { font-size: 10px; }
  .approach { display: block; }
  .sticky-intro { position: static; }
  .sticky-intro h2 { font-size: clamp(44px,10vw,68px); }
  .approach-art { max-width: 390px; margin: 20px auto; }
  .chapter-indicator { display: none; }
  .approach-steps { margin-top: 32px; }
  .approach-steps li { min-height: 0; padding-block: 32px 48px; gap: 22px; }
  .approach-steps .eyebrow { margin-bottom: 18px; }
  .approach-steps h3 { font-size: 36px; }
  .email-link { margin-top: 32px; width: fit-content; font-size: 24px; gap: 24px; }
}
@media (max-width: 360px) {
  :root { --gutter: 20px; }
  .hero h1 { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  [data-reveal],.arrow,.button,.pill,.pill span,.scroll-arrow { transform: none !important; opacity: 1; }
  .story-word { opacity: 1 !important; }
  .reading-progress { display: none; }
}
@media (prefers-contrast: more) { :root { --muted: #d6d3ce; --line: #777; } }

/* Full logo: the owner's vector as a mask, colour over the badge, white wordmark. */
:root { --brand-peach: #fdba74; --brand-mint: #5eead4; --brand-heading: linear-gradient(100deg,var(--ember) 10%,var(--brand-peach) 42%,var(--brand-mint) 95%); }
.logo-art { display: block; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .logo-art { background: #fff linear-gradient(45deg,var(--ember) 10%,var(--brand-peach) 42%,var(--brand-mint) 95%) no-repeat; background-size: 30.6% 100%; mask: url('../logo/odinside-logo-white.svg') center / 100% 100% no-repeat; -webkit-mask: url('../logo/odinside-logo-white.svg') center / 100% 100% no-repeat; }
  .logo-art img { visibility: hidden; }
}
/* Header wordmark and menu symbol: inline SVG in each page, with the path data
   of assets/logo/odinside-logo.svg (the owner's file) copied unchanged. The
   wordmark keeps the height it has inside the full logo and takes the heading
   gradient; the symbol is the Viking line art alone, at twice the size it has
   inside the full logo. */
.wordmark,.symbol { display: block; flex: none; overflow: visible; forced-color-adjust: none; }
.wordmark { --logo-width: var(--header-logo-width); width: auto; height: calc(var(--logo-width) * 67 / 652); aspect-ratio: 84.368 / 13.595; fill: url(#wordmark-fill) var(--ember); }
.wordmark stop:nth-child(1) { stop-color: var(--ember); }
.wordmark stop:nth-child(2) { stop-color: var(--brand-peach); }
.wordmark stop:nth-child(3) { stop-color: var(--brand-mint); }
.symbol { --logo-width: 128px; width: calc(var(--logo-width) * 199 / 652 * 208 / 287 * 2); height: auto; aspect-ratio: 1; color: #d4d4d8; fill: currentColor; }
/* For the grey badge with the Viking knocked out instead of the line art, add this one line:
.symbol { width: calc(var(--logo-width) * 199 / 652 * 208 / 287 * 2 * 40.85 / 29.488); background: #d4d4d8; -webkit-mask: url('../logo/odinside-badge.svg') center / contain no-repeat; mask: url('../logo/odinside-badge.svg') center / contain no-repeat; fill: none; }
*/
@media (max-width: 760px) { :root { --header-logo-width: 134px; } }
@media (forced-colors: active) { .wordmark,.symbol { color: #fff; fill: #fff; } }
.gradient-text { color: var(--ember); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text { background: var(--brand-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}
.hero h1 .gradient-text { width: fit-content; max-width: 100%; }
@media (forced-colors: active) {
  .gradient-text { color: CanvasText !important; background: none; -webkit-text-fill-color: currentColor; }
  .logo-art { forced-color-adjust: none; background: #fff; }
  .brand,.offering-brand { forced-color-adjust: none; background: #101012; }
  .product-suffix { color: #5eead4; }
  .voyage-media { visibility: hidden; }
  .opening .voyage-stage { min-height: 0; }
}

/* Odinside is the parent brand; each named offering keeps its own context. */
.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; }
.offering-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font: 500 15px/1.3 var(--display); letter-spacing: -.025em; }
.offering-brand .logo-art { flex: none; }
.offering-brand img { width: 128px; }
.product-suffix { color: var(--brand-mint); border: 1px solid #385953; background: #2dd4bf14; padding: 5px 8px; border-radius: 6px; }
.product-context { color: var(--muted); font-size: 11px; letter-spacing: .025em; margin-top: 22px; }
.ai-toolkit { width: 100%; margin-top: 0; padding: 26px 28px; border: 1px solid var(--line); background: var(--ink); border-radius: 6px; }
.ai-toolkit .eyebrow { color: var(--brand-mint); }
.ai-toolkit dl { margin: 22px 0 0; }
.ai-toolkit dl > div { border-top: 1px solid var(--line); padding-block: 16px; }
.ai-toolkit dl > div:last-child { padding-bottom: 0; }
.ai-toolkit dt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; font: 500 17px/1.4 var(--display); }
.ai-toolkit dt span { color: var(--muted); font: 11px/1.5 var(--sans); }
.ai-toolkit dd { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 340px; }
.offering-roadmap { border-left: 2px solid var(--ember); padding-left: 18px; margin-top: 28px; }
.offering-roadmap > p:last-child { font-size: 13px; color: var(--body); margin-top: 8px; max-width: 480px; }
@media (max-width: 1100px) { .navigation { gap: 24px; } }
@media (max-width: 600px) {
 .ai-toolkit { padding: 22px 20px; }
 .ai-toolkit dt { font-size: 16px; }
}
@media (forced-colors: active) { .offering-brand { width: fit-content; } .product-suffix { forced-color-adjust: none; } .ai-toolkit, .offering-roadmap { border-color: CanvasText; } }

/* Static capability illustrations. No live metrics, controls or customer data. */
.capability-visual { margin: 26px 0 8px; padding: 22px 24px 18px; border: 1px solid var(--line); background: var(--ink); border-radius: 6px; }
.capability-visual figcaption { color: var(--muted); font-size: 10px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.replay-relationship { display: grid; grid-template-columns: 1fr 28px 1.4fr; gap: 20px; align-items: center; }
.diagram-label { color: var(--body); font-size: 11px; }
.diagram-bars { height: 48px; display: flex; align-items: flex-end; gap: 7px; margin-top: 12px; }
.diagram-bars i { display: block; width: 14px; height: 45%; background: var(--frost); opacity: .65; }
.diagram-bars i:nth-child(2) { height: 85%; }
.diagram-bars i:nth-child(3) { height: 65%; }
.diagram-bars i:nth-child(4) { height: 100%; opacity: 1; }
.relationship-arrow { color: var(--ember); font-size: 25px; }
.journey-line { display: flex; align-items: center; justify-content: space-between; height: 2px; background: #45635e; margin: 28px 8px 18px; }
.journey-line i { width: 8px; height: 8px; border: 1px solid var(--frost); background: var(--ink); border-radius: 50%; }
.journey-line i:nth-child(2) { background: var(--frost); }
.journey-steps { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 10px; }
.monitoring-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 7px; }
.monitoring-flow > div { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: var(--body); font-size: 11px; line-height: 1.5; }
.monitoring-flow > div:not(:last-child)::after { content: ''; position: absolute; height: 1px; background: #45635e; top: 6px; left: 24px; width: calc(100% - 20px); }
.monitor-node { display: block; width: 13px; height: 13px; border: 1px solid var(--frost); border-radius: 50%; background: #14352f; }
.incident-node { border-color: var(--ember); background: #422611; border-radius: 2px; }
@media (max-width: 600px) { .capability-visual { padding: 20px 16px 16px; } .replay-relationship { grid-template-columns: .8fr 18px 1.2fr; gap: 12px; } .diagram-bars { gap: 5px; } .diagram-bars i { width: 10px; } .capability-visual figcaption { font-size: 10px; } .monitoring-flow { gap: 16px; } }
@media (forced-colors: active) { .diagram-bars i { background: CanvasText; } .journey-line,.monitoring-flow > div:not(:last-child)::after { background: CanvasText; } .journey-line i,.monitor-node { border-color: CanvasText; background: Canvas; } }

/* Homepage: one idea per screen. A scroll-played opening, then full-bleed
   scenes alternating with contained cards. Every card is label, title, one
   sentence, one pill. Static layout is the baseline throughout. */
:root { --radius-card: 20px; --card-edge: rgba(255,255,255,.09); --glow-ember: rgba(251,146,60,.16); --glow-frost: rgba(45,212,191,.14); }
.navigation .nav-contact { border-radius: 999px; }
.pill { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 18px 10px 22px; border-radius: 999px; color: var(--ink); background: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; transition: transform var(--fast) var(--ease),background-color var(--fast); }
.pill span { font-size: 18px; line-height: 1; transition: transform var(--normal) var(--ease); }
.pill:hover { background: var(--ember); }
.pill:hover span { transform: translate(2px,-2px); }
.pill:active { transform: scale(.97); }
.pill-ember { background: var(--ember); }
.pill-ember:hover { background: #ffb374; }

/* Opening. voyage.js owns .video-scroll/.video-ready, the beats and the instruction. */
.opening { --header-height: 89px; position: relative; }
.voyage-stage { min-height: 870px; }
.voyage-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.9),rgba(10,10,11,.78) 28%,rgba(10,10,11,.08) 50%,rgba(10,10,11,.6) 72%,var(--ink) 100%),linear-gradient(90deg,rgba(10,10,11,.6),transparent 65%); }
.voyage-media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.voyage-media img,.voyage-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.voyage-media video { position: absolute; inset: 0; opacity: 0; }
.video-ready .voyage-media video { opacity: 1; }
.voyage-stage .hero-content { min-height: inherit; padding-top: clamp(36px,4.5vw,64px); padding-bottom: 48px; display: flex; flex-direction: column; }
.voyage-stage h1 { font-size: clamp(54px,5.4vw,84px); max-width: 1050px; line-height: 1.02; }
.voyage-stage h1 .intent { font-size: 1em; }
.hero-bottom { display: grid; justify-items: start; gap: 32px; margin-top: auto; padding-top: 160px; }
.voyage-beats { display: flex; gap: 32px; width: 100%; list-style: none; padding: 0; margin: 0; }
.voyage-beats li { flex: 1; }
.voyage-beats .eyebrow { font-size: 11px; }
.voyage-beats p:not(.hero-description) { font: 400 clamp(19px,1.7vw,26px)/1.3 var(--display); letter-spacing: -.025em; margin-top: 10px; }
.hero-cue { display: none; align-items: center; gap: 18px; }
.voyage-instruction { color: var(--body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; text-align: right; }
.scroll-cue { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #67605a; border-radius: 50%; color: var(--text); font-size: 20px; transition: border-color var(--fast); }
.scroll-cue:hover { border-color: var(--ember); }
.scroll-arrow { line-height: 1; transition: transform var(--normal) var(--ease); }
.scroll-cue:hover .scroll-arrow { transform: translateY(3px); }
.voyage-track { display: none; }
.video-scroll { height: 300svh; }
.video-scroll .voyage-stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); min-height: 0; }
.video-scroll .hero-content { height: 100%; }
.video-scroll .hero-bottom { grid-template-columns: 1fr auto 1fr; align-items: end; justify-items: stretch; padding-top: 0; }
.video-scroll .voyage-beats { display: block; position: relative; min-height: 92px; }
.video-scroll .voyage-beats li { position: absolute; left: 0; bottom: 0; opacity: 0; transition: opacity var(--fast) ease-out; }
.video-scroll .voyage-beats li.is-active { opacity: 1; }
.video-scroll .voyage-beats p:not(.hero-description) { font-size: clamp(24px,2.2vw,34px); }
.video-scroll .hero-cue { display: flex; justify-self: end; }
.video-scroll .voyage-track { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--line); }
/* Slides on the opening (.hero-slides, with the film): the headline first, then each beat in its
   place at its size, the label as the eyebrow. The content is a grid: the beats share the
   headline's row (the bottom row joins it through display: contents, so the button and the cue
   keep their corners). voyage.js sets .on-beat while a beat's chapter is current. */
.video-scroll.hero-slides .hero-content { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: end; column-gap: 32px; padding-bottom: min(clamp(48px,5.5vw,88px),4svh); }
.video-scroll.hero-slides .hero-bottom { display: contents; }
.video-scroll.hero-slides .voyage-stage::after { background: radial-gradient(90% 110% at 0% 100%,rgba(10,10,11,.94) 0%,rgba(10,10,11,.85) 50%,rgba(10,10,11,.55) 76%,transparent 100%),linear-gradient(0deg,var(--ink) 0%,transparent 16%); }
.video-scroll.hero-slides h1 { grid-area: 1 / 1 / 2 / 3; align-self: end; font-size: min(clamp(44px,6.2vw,96px),10.5svh); transition: opacity var(--fast) ease-out, visibility 0s; }
.video-scroll.hero-slides.on-beat h1 { opacity: 0; visibility: visible; pointer-events: none; }
.video-scroll.hero-slides .voyage-beats { grid-area: 1 / 1 / 2 / 3; display: grid; align-self: end; min-height: 0; }
.video-scroll.hero-slides .voyage-beats li { position: relative; grid-area: 1 / 1; align-self: end; top: auto; bottom: auto; max-width: 1050px; visibility: hidden; transition: opacity var(--fast) ease-out, visibility 0s linear var(--fast); }
.video-scroll.hero-slides .voyage-beats li.is-active { visibility: visible; transition-delay: 0s; }
.video-scroll.hero-slides .voyage-beats .eyebrow { display: block; }
.video-scroll.hero-slides .voyage-beats p:not(.hero-description) { margin-top: 14px; font-weight: 500; font-size: min(clamp(44px,6.2vw,96px),10.5svh); line-height: 1.02; letter-spacing: -.065em; color: var(--text); }
.video-scroll.hero-slides .hero-bottom > .pill { grid-area: 2 / 1; justify-self: start; margin-top: clamp(26px,2.6vw,36px); }
.video-scroll.hero-slides .hero-cue { display: flex; grid-area: 2 / 2; justify-self: end; }
/* Shared controls stay in the action row, alongside the existing down cue. */
.hero-navigation { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hero-navigation[hidden] { display: none; }
.hero-chevron { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #a49b91; border-radius: 50%; color: var(--text); background: #171719; cursor: pointer; touch-action: manipulation; }
.hero-chevron svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.hero-chevron:hover:not([aria-disabled="true"]) { border-color: var(--ember); background: #30241b; }
.hero-chevron[aria-disabled="true"] { color: #88817a; border-color: #5b554f; cursor: default; }
.hero-chevron:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; }
.hero-playback { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #a49b91; border-radius: 22px; color: var(--text); background: #171719; font: 12px/1.3 var(--sans); cursor: pointer; touch-action: manipulation; }
.hero-playback[hidden] { display: none; }
.hero-playback svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.hero-playback[aria-disabled="true"] { color: #88817a; border-color: #5b554f; cursor: default; }
.hero-playback:hover:not([aria-disabled="true"]) { border-color: var(--ember); background: #30241b; }
.hero-playback:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; }
.video-scroll.hero-slides .voyage-instruction { display: none; }
@media (forced-colors: active) { .hero-chevron { border-color: ButtonText; } }
.voyage-track span { display: block; height: 100%; background: var(--ember); transform: scaleX(var(--voyage-progress,0)); transform-origin: left; }
/* The static opening (no film: reduced motion, Save-Data, a coarse pointer) shows the three beats side by side at the bottom of the
   picture; the right-hand beat's label sits over the brightest part of it, so the lower band is shaded further than with the film. */
@media (min-width: 761px) {
  .opening:not(.video-scroll) .voyage-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.9),rgba(10,10,11,.78) 28%,rgba(10,10,11,.08) 50%,rgba(10,10,11,.82) 72%,var(--ink) 100%),linear-gradient(90deg,rgba(10,10,11,.6),transparent 65%); }
}
@media (max-width: 999px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .opening.video-scroll { height: auto; }
  .opening .voyage-stage { position: relative; top: auto; height: auto; min-height: 0; }
  .opening .voyage-media video { display: none; }
  .opening .voyage-media { height: 680px; }
  .opening .hero-content { height: auto; padding-bottom: 64px; }
  .opening .hero-bottom { grid-template-columns: 1fr; justify-items: start; margin-top: 280px; padding-top: 0; }
  .opening .voyage-beats { display: flex; position: relative; min-height: 0; }
  .opening .voyage-beats li { position: static; opacity: 1; }
  .opening .voyage-beats p:not(.hero-description) { font-size: 20px; }
  .opening .hero-cue,.opening .voyage-track { display: none; }
}
@media (max-width: 760px) {
  .voyage-stage h1 { font-size: clamp(39px,10.6vw,66px); max-width: 600px; }
  .voyage-stage h1 > span:first-child { max-width: 330px; }
  .opening .voyage-media { height: 650px; }
  .voyage-media img { object-position: 40% center; }
  .voyage-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.72) 22%,rgba(10,10,11,.05) 34%,var(--ink) 57%,var(--ink) 100%); }
  .opening .hero-bottom { margin-top: 260px; gap: 24px; }
  .opening .voyage-beats { display: block; }
  .voyage-beats li { border-top: 1px solid var(--line); padding-block: 20px; display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: start; }
  .voyage-beats .eyebrow { font-size: 10px; margin-top: 3px; }
  .opening .voyage-beats p:not(.hero-description) { font-size: 17px; margin: 0; }
}
@media (max-height: 649px) and (min-width: 1000px) {
  .video-scroll { height: auto; }
  .video-scroll .voyage-stage { position: relative; top: auto; height: auto; }
}
@media (forced-colors: active) { .opening .hero-bottom { margin-top: 48px; } }

/* Homepage supporting copy stays with its chapter, below the headline. */
.opening:not(.video-scroll) .voyage-stage::after { background-color: rgba(10,10,11,.56); }
.opening .hero-description { max-width: 52ch; margin-top: 16px; font: 400 clamp(16px,1.4vw,18px)/1.6 var(--sans); letter-spacing: 0; color: var(--text); }
.video-scroll.hero-slides .hero-intro { grid-area: 1 / 1 / 2 / 3; align-self: end; }
.video-scroll.hero-slides .hero-intro > .hero-description { transition: opacity var(--fast) ease-out; }
.video-scroll.hero-slides.on-beat .hero-intro > .hero-description { opacity: 0; visibility: hidden; }
@media (max-width: 760px) {
  .opening .voyage-beats .hero-description,.opening .voyage-beats .static-beat-link { grid-column: 1 / -1; margin-top: 0; }
}

/* Cards. Each is a poster: the artwork fills the card, and the label, title,
   one sentence and pill sit over it on a soft dark gradient. There is no
   outline; a faint glow in the artwork's colour tints the page around it.
   A card is laid out tall (copy along the bottom) or wide (copy low on the
   side where the artwork is calm); each context below picks one. */
/* Anchors land with the title just under the header, cards in view. */
/* A cards screen is one idea: its heading and its cards fit the first screen at 1440x900 and 1280x720, so the top padding, the card heights, the copy block and the heading size are capped by the viewport height as well as the width. */
.cards-section { --cards-pad: min(var(--section),5.5svh); padding-block: var(--cards-pad) var(--section); scroll-margin-top: calc(40px - var(--cards-pad)); }
.section-title { font-size: clamp(34px,4.4vw,72px); margin-bottom: clamp(24px,2.6vw,40px); }
.cards { display: grid; gap: clamp(14px,1.5vw,24px); }
.cards-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.card { --glow: var(--glow-ember); --scrim-tall: linear-gradient(180deg,transparent 18%,rgba(10,10,11,.74) 42%,rgba(10,10,11,.92) 58%,var(--ink) 100%); --scrim-wide: linear-gradient(var(--scrim-side,90deg),rgba(10,10,11,.92) 0%,rgba(10,10,11,.84) var(--scrim-a,22%),rgba(10,10,11,.5) var(--scrim-b,42%),transparent var(--scrim-c,60%)),linear-gradient(0deg,rgba(10,10,11,.8) 0%,transparent 42%);
  --art-position: var(--tall-position,center); --art-scale: 1; --art-inset: var(--tall-inset,0); --scrim: var(--scrim-tall);
  position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: min(clamp(480px,42vw,620px),66svh); border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 0 140px -48px var(--glow); }
/* An edge only where the artwork cannot give one: forced colours, and cards without artwork. */
.card::before { content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid transparent; border-radius: inherit; pointer-events: none; }
.card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.card-art { position: absolute; inset: var(--art-inset); z-index: -2; }
.card-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--art-position); transform: scale(var(--art-scale)); transform-origin: var(--art-position); transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .card:hover .card-art img,.card:focus-within .card-art img { transform: scale(calc(var(--art-scale) * 1.03)); } }
.card-body { display: flex; flex-direction: column; align-items: flex-start; padding: min(clamp(22px,2.1vw,32px),3.4svh); }
.card-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: min(clamp(27px,2.7vw,42px),4.4svh); letter-spacing: -.05em; }
.card-heading .offering-brand img { width: 104px; }
.card-heading .product-suffix { font-size: 13px; }
.card-body > p { margin-block: 12px 22px; max-width: 44ch; color: var(--body); font-size: 15px; line-height: 1.55; }
.card .pill { margin-top: auto; }
.cards-3 .card-body { min-height: min(348px,44svh); }
/* Three up, drawn artwork: the drawing takes the room above the copy rather than a fixed share of the card, so it shrinks with the card on a short screen instead of running under the heading. */
@media (min-width: 1001px) { .cards-3 .card-how .card-art { position: relative; inset: auto; flex: 1 1 0; min-height: 0; margin: 5% 3% 0; } }
/* Drawn artwork is a cut-out with no background of its own, so it cannot fill
   a card: the card is filled by a glow in its colour and the drawing is held whole. */
.card-how { --tall-inset: 5% 3% 47% 3%; --wide-inset: 8% 3% 8% 58%; --scrim-tall: linear-gradient(180deg,transparent 46%,rgba(10,10,11,.7) 66%,var(--ink) 100%); --scrim-wide: none; background: radial-gradient(120% 75% at 50% 24%,rgba(251,146,60,.3),rgba(251,146,60,.08) 58%,transparent 86%),var(--surface); }
.card-how { --glow: var(--glow-frost); background: radial-gradient(120% 75% at 50% 24%,rgba(45,212,191,.26),rgba(45,212,191,.07) 58%,transparent 86%),var(--surface); }
.card-how .card-art img { object-fit: contain; }
.card-hosting { --tall-position: 38% 42%; --wide-position: 0% 32%; --wide-scale: 1.1; --glow: var(--glow-frost); }
.card-wide { --art-position: var(--wide-position,center); --art-scale: var(--wide-scale,1); --art-inset: var(--wide-inset,0); --scrim: var(--scrim-wide); align-items: var(--wide-align,flex-start); min-height: min(clamp(400px,40vw,600px),66svh); }
.card-wide .card-body { width: clamp(400px,46%,640px); max-width: 100%; }
.card-wide .card-heading { font-size: clamp(30px,3.8vw,60px); }
/* The ship is on the left of this picture, so its copy goes to the right. */
.card-ai,.card-about { --tall-position: 62% 40%; --wide-position: 50% 45%; --wide-align: flex-end; --scrim-side: 270deg; }
.card-replayful { --tall-position: 52% 40%; --wide-position: 0% 32%; --wide-scale: 1.1; --glow: var(--glow-frost); }
.card-uptimeful { --tall-position: 48% 34%; --wide-position: 0% 34%; --wide-scale: 1.18; }

/* Story scene. First the artwork alone under its heading, then the paragraph
   on the plain background in large type. That static order is the baseline.
   On a desktop pointer site.js adds .scene-scroll: the scene holds under the
   header while the paragraph rises over it, then the paragraph holds while
   its words light up. The picture may be followed by a <video data-src>,
   which site.js loads over it only where a film is welcome. */
.story { --header-height: 89px; position: relative; scroll-margin-top: -16px; }
.story-stage { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: min(860px,calc(100svh - 88px)); }
.story-image { position: absolute; inset: 0; z-index: -2; }
.story-image img,.story-image video { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.story-image video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--slow); }
.story-image.video-ready video { opacity: 1; }
/* Only the foot of the picture is shaded, under the heading. */
.story-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.8) 16%,rgba(10,10,11,.34) 38%,transparent 58%); }
.story-content { padding-block: clamp(36px,4.6vw,72px); }
.story h2 { font-size: clamp(40px,5.6vw,92px); }
.story-after { position: relative; z-index: 1; background: var(--ink); }
.story-after-copy { padding-block: clamp(48px,9svh,104px); }
.story-text { max-width: 1040px; font: 400 clamp(22px,2.35vw,34px)/1.3 var(--display); letter-spacing: -.03em; color: var(--brand-peach); text-wrap: pretty; }
.story-after .pill { margin-top: clamp(24px,2.4vw,36px); }
.scene-scroll .story-stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); min-height: 0; }
.scene-scroll .story-after { margin-top: 35svh; border-radius: var(--radius-card) var(--radius-card) 0 0; }
/* The hold: room for the paragraph to stay put while the next section comes up beneath it. */
.scene-scroll .story-after::after { content: ''; display: block; height: 60svh; }
.scene-scroll .story-after-pin { position: sticky; top: var(--header-height); }
.scene-scroll .story-word { opacity: .5; }
/* A scene whose picture is a film: the heading sits in the dark upper left of
   the picture. voyage.js plays the film with the scroll once a frame is on
   screen; where it will, .film-on holds the scene longer so the film has room. */
.story-film .story-stage { align-items: flex-start; }
.story-film .story-image img,.story-film .story-image video { object-position: center top; transform-origin: center top; }
.story-film .story-stage::after { background: radial-gradient(74% 68% at 0% 0%,rgba(10,10,11,.8) 0%,rgba(10,10,11,.66) 52%,rgba(10,10,11,.3) 78%,transparent 100%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); }
.scene-scroll.film-on .story-after { margin-top: 140svh; }
/* The homepage scene keeps its paragraph in the picture. Held with the stage
   from the start, it is written onto the film word by word late in the hold,
   while a shade comes up behind it (site.js sets --story-shade from 0 to 1 and
   .story-lit once every word is in). No panel. Without .scene-scroll the
   paragraph simply follows the picture on the page. */
.story-joined .story-after { background: none; }
.story-joined .story-after-copy { padding-top: clamp(16px,3svh,28px); }
.story-joined.scene-scroll { --story-hold: 130svh; --story-pad: clamp(36px,4.6vw,72px); --story-head: clamp(40px,5.6vw,92px); --story-edge: calc(max(0px,(100vw - 1600px) / 2) + var(--gutter) + 1080px); display: grid; grid-template-rows: calc(100svh - var(--header-height) + var(--story-hold)); }
.story-joined.scene-scroll.film-on { --story-hold: 220svh; }
.story-joined.scene-scroll .story-stage,.story-joined.scene-scroll .story-after { grid-area: 1 / 1; align-self: start; }
.story-joined.scene-scroll .story-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(10,10,11,.74) min(100%,var(--story-edge)),rgba(10,10,11,.4) 100%); opacity: var(--story-shade,0); }
.story-joined.scene-scroll .story-after { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); margin-top: 0; border-radius: 0; }
.story-joined.scene-scroll .story-after::after { content: none; }
.story-joined.scene-scroll .story-after-pin { position: static; }
.story-joined.scene-scroll .story-after-copy { padding-block: calc(var(--story-copy-bottom,var(--story-pad) + var(--story-head) * 2.12) + clamp(16px,3svh,32px)) 0; }
.story-joined.scene-scroll .story-text { font-size: min(clamp(22px,2.35vw,34px),4svh); }
.story-joined.scene-scroll .story-word { opacity: 0; }
.story-joined.scene-scroll .pill { margin-top: clamp(16px,3svh,36px); opacity: 0; pointer-events: none; transition: opacity var(--normal),transform var(--fast) var(--ease),background-color var(--fast); }
.story-joined.scene-scroll.story-lit .pill { opacity: 1; pointer-events: auto; }
/* Scenes respond to scroll where the browser can run an animation from the
   scroll position itself: the artwork slowly enlarges, and dims as the
   paragraph comes up over it. No script; elsewhere the scene stays as it is. */
@keyframes scene-zoom { from { scale: 1; } to { scale: 1.12; } }
@keyframes scene-dim { from { opacity: 0; } to { opacity: .72; } }
@supports (animation-timeline: view()) and (timeline-scope: --scene) {
  @media (prefers-reduced-motion: no-preference) {
    .story { view-timeline: --story block; timeline-scope: --story-after; }
    .story-after { view-timeline: --story-after block; }
    .story-image img,.story-image video { animation: scene-zoom linear both; animation-timeline: --story; animation-range: cover 0% cover 100%; }
    .scene-scroll .story-image img,.scene-scroll .story-image video { animation-range: cover 0% cover 60%; }
    .story-film .story-image video { animation: none; }
    .story-joined.scene-scroll .story-image::after { animation: none; }
    .story-image::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; animation: scene-dim linear both; animation-timeline: --story-after; animation-range: entry 0% entry 100%; }
  }
}

/* Approach: the step's illustration large on the left, the step in display
   type beside it, then the way to the full page. */
.approach-intro h2 { margin-top: 24px; }
.approach-steps h3 { font-size: clamp(36px,3.8vw,60px); }
.approach-more { grid-column: 2; padding-top: 32px; border-top: 1px solid var(--line); }
.offering-carousel > .approach-more { margin-top: 36px; text-align: center; }
.approach-art { overflow: clip; border-radius: var(--radius-card); }
.approach-art img { object-fit: cover; }
@media (min-width: 761px) {
  .approach { grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 0 5%; }
  .sticky-intro { top: 112px; }
  .approach-art { max-width: none; width: min(100%,calc((100svh - 370px) * 1.75)); }
  .approach-steps li { min-height: clamp(380px,56svh,520px); padding-block: 40px; }
  .approach-steps h3 { font-size: clamp(34px,4.2vw,64px); }
  .step-art { width: auto; max-width: 100%; max-height: 160px; }
}

/* Contact: the mark, one line, the address. */
.contact { display: flex; flex-direction: column; align-items: center; text-align: center; background: radial-gradient(52% 62% at 50% 42%,rgba(251,146,60,.1),rgba(45,212,191,.05) 55%,transparent 78%); }
.contact-mark { width: clamp(64px,6vw,88px); aspect-ratio: 40.85 / 40; overflow: hidden; }
.contact-mark .logo-art { width: calc(100% * 134 / 40.85); }
.contact-mark img { width: 100%; }
.contact h2 { margin-block: clamp(28px,3vw,44px) clamp(32px,3.4vw,52px); font-size: clamp(44px,7vw,112px); line-height: 1; letter-spacing: -.06em; }
.contact .email-link { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .card[data-reveal].is-revealing:nth-child(2) { animation-delay: 70ms; }
  .card[data-reveal].is-revealing:nth-child(3) { animation-delay: 140ms; }
}
@media (max-width: 1000px) {
  .cards-3 { grid-template-columns: 1fr; }
  .cards-3 .card { --art-position: var(--wide-position,center); --art-scale: var(--wide-scale,1); --art-inset: var(--wide-inset,0); --scrim: var(--scrim-wide); align-items: var(--wide-align,flex-start); min-height: clamp(340px,46vw,460px); }
  /* The copy takes more of a narrower card, so the shading reaches further across. */
  .card { --scrim-a: 36%; --scrim-b: 58%; --scrim-c: 80%; }
  .cards-3 .card-body,.card-wide .card-body { width: 56%; min-height: 0; }
}
@media (max-width: 600px) {
  /* Small screens: every card tall, the copy along the bottom. */
  .cards-3 .card,.card-wide { --art-position: var(--tall-position,center); --art-scale: 1; --art-inset: var(--tall-inset,0); --scrim: var(--scrim-tall); align-items: stretch; min-height: 0; padding-top: 58vw; }
  .cards-3 .card-body,.card-wide .card-body { width: auto; min-height: 0; padding: 22px; }
  .card-heading,.card-wide .card-heading { font-size: 30px; }
  .card-body > p { font-size: 14px; }
  .story-stage { min-height: min(560px,72svh); }
  .story-stage::after { background: linear-gradient(0deg,var(--ink) 0%,rgba(10,10,11,.88) 24%,rgba(10,10,11,.56) 48%,transparent 72%); }
  .story-film .story-stage::after { background: linear-gradient(180deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.6) 26%,transparent 48%),linear-gradient(0deg,var(--ink) 0%,transparent 14%); }
  .story-film .story-image img { object-position: 60% top; }
  .story-image img,.story-image video { object-position: 50% center; }
  .story h2 { font-size: clamp(34px,9.6vw,48px); }
  .story-text { font-size: 21px; line-height: 1.36; }
  .contact h2 { font-size: clamp(40px,11vw,64px); }
  .contact .email-link { font-size: 22px; gap: 18px; }
}
@media (forced-colors: active) { .card::before { border-color: CanvasText; } .card-art,.story-image { visibility: hidden; } .card::after,.story-stage::before,.story-stage::after { background: none; } .pill { border: 1px solid ButtonText; } }

/* Menu. One round toggle at every width opens a full-height panel on the right:
   brand row, the page's links in large type, a second level for the products,
   and the email address at the foot. site.js moves .site-menu into a modal
   <dialog>; until it has, and without JS, the links sit in the header bar. */
.site-header [hidden] { display: none !important; }
div.site-menu,div.site-menu .menu-panel { display: contents; }
/* Native disclosure keeps every service reachable without JS or dialog support. */
.menu-services-fallback > summary { display: list-item; min-height: 44px; align-content: center; cursor: pointer; }
.menu-services-fallback > summary:focus-visible { outline: 2px solid var(--frost); outline-offset: 6px; }
.menu-services-fallback[open] { flex-basis: 100%; }
.header-inner:has(.menu-services-fallback[open]) { flex-wrap: wrap; }
div.site-menu .navigation:has(.menu-services-fallback[open]) { flex-wrap: wrap; width: 100%; }
.menu-services-fallback .menu-product { display: grid; min-height: 0; }
.menu-services-fallback .menu-sub { margin-block: 12px; }
.site-header:has(.menu-services-fallback[open]) { position: relative; }

@keyframes menu-failsafe { to { visibility: visible; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* No flash of the inline links before the script runs; they return if it never does. */
  div.site-menu .navigation { visibility: hidden; animation: menu-failsafe 0s linear 3s forwards; }
}
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-cta { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; padding: 7px 20px; border: 1px solid #5d5147; border-radius: 999px; font-size: 13px; transition: color var(--fast),border-color var(--fast); }
.header-cta span { color: var(--ember); font-size: 20px; }
.header-cta:hover { color: var(--ember); border-color: var(--ember); }
.menu-toggle,.menu-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #67605a; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: border-color var(--fast),background-color var(--fast); }
.menu-toggle:hover,.menu-close:hover { border-color: var(--ember); }
.menu-bars { width: 18px; height: 9px; border-block: 2px solid currentColor; }
.menu-close { margin-left: auto; border-color: transparent; background: #232327; font: 400 26px/1 var(--sans); }
.menu-close:hover { background: #2e2e33; }
dialog.site-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: clip; background: transparent; color: var(--text); }
dialog.site-menu::backdrop { background: rgba(10,10,11,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.site-menu .menu-panel { position: absolute; inset: 0 0 0 auto; display: flex; flex-direction: column; width: clamp(440px,40vw,640px); max-width: 100%; padding: 0 var(--gutter) max(24px,env(safe-area-inset-bottom)) clamp(32px,4.4vw,64px); overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); background: radial-gradient(90% 55% at 100% 0%,rgba(45,212,191,.1),transparent 62%),radial-gradient(90% 50% at 0% 100%,rgba(251,146,60,.1),transparent 62%),var(--surface); }
.menu-head { display: flex; align-items: center; gap: 16px; flex: none; min-height: 88px; }
/* Reserve the approved animation’s outward glyph travel on narrow panels. */
.menu-brand { padding-inline:14px; }
.menu-wordmark { display:block; flex:none; width:138px; height:auto; aspect-ratio:84.368 / 13.595; overflow:visible; fill:url(#menu-wordmark-fill) var(--ember); }
.menu-wordmark stop:nth-child(1) { stop-color:var(--ember); }
.menu-wordmark stop:nth-child(2) { stop-color:var(--brand-peach); }
.menu-wordmark stop:nth-child(3) { stop-color:var(--brand-mint); }
@media(forced-colors:active) { .menu-wordmark { fill:CanvasText; } }
.menu-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: 500 14px/1 var(--sans); cursor: pointer; transition: color var(--fast); }
.menu-back span { font-size: 18px; }
.menu-back:hover { color: var(--ember); }
.menu-crumb { padding-left: 16px; border-left: 1px solid #67605a; color: var(--body); font-size: 14px; line-height: 1.6; }
dialog.site-menu .navigation { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; width: auto; margin-top: clamp(12px,4vh,44px); padding: 0; }
dialog.site-menu .navigation a,.menu-drill { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 0; padding: .13em 0; border: 0; border-radius: 0; background: none; color: var(--text); font: 500 clamp(36px,min(4.4vw,8vh),62px)/1.1 var(--display); letter-spacing: -.05em; text-align: left; cursor: pointer; transition: color var(--fast); }
dialog.site-menu .navigation a:hover,.menu-drill:hover,dialog.site-menu .navigation [aria-current] { color: var(--ember); }
dialog.site-menu .nav-contact span { color: var(--ember); font-size: .62em; }
.menu-chevron { flex: none; width: .26em; height: .26em; margin-right: .14em; border-top: 2px solid var(--body); border-right: 2px solid var(--body); transform: rotate(45deg); transition: transform var(--normal) var(--ease),border-color var(--fast); }
.menu-drill:hover .menu-chevron { border-color: var(--ember); transform: translateX(4px) rotate(45deg); }
.menu-sub { display: grid; gap: 12px; margin-top: clamp(12px,4vh,44px); }
.menu-product { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-content: center; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(245,245,244,.03); transition: border-color var(--fast),background-color var(--fast); }
.menu-product:hover,.menu-product[aria-current] { border-color: #7a4a25; background: rgba(251,146,60,.07); }
.menu-thumb { grid-row: 1 / 3; width: 84px; height: 84px; overflow: hidden; border-radius: 12px; background: var(--ink); }
.menu-thumb img { width: 100%; height: 100%; object-fit: cover; }
#menu-products .menu-product:nth-child(1) .menu-thumb img { object-position: 84% 34%; }
.menu-product-name { align-self: end; font: 500 clamp(19px,1.6vw,23px)/1.2 var(--display); letter-spacing: -.035em; }
.menu-product-brand { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: 18px; }
.menu-product-brand:last-child { grid-row: 1 / -1; align-self: center; }
.menu-product-brand .product-suffix { flex: none; white-space: nowrap; font: 500 13px/1.3 var(--display); letter-spacing: 0; }
.menu-product-line { align-self: start; margin-top: 4px; color: var(--body); font-size: 13px; line-height: 1.4; }
.menu-all { display: inline-flex; align-items: center; gap: 12px; width: fit-content; min-height: 44px; margin-top: 8px; color: var(--body); font-size: 14px; transition: color var(--fast); }
.menu-all span { color: var(--ember); font-size: 18px; }
.menu-all:hover { color: var(--text); }
.menu-foot { margin-top: auto; padding-top: 32px; font-size: 14px; }
.menu-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--body); transition: color var(--fast); }
.menu-foot a:hover { color: var(--ember); }
html.menu-open { overflow: hidden; }
html.menu-open body { padding-right: var(--scrollbar,0px); }
@keyframes menu-panel-in { from { transform: translateX(100%); } }
@keyframes menu-panel-out { to { transform: translateX(100%); } }
@keyframes menu-fade-in { from { opacity: 0; } }
@keyframes menu-fade-out { to { opacity: 0; } }
@keyframes menu-item-in { from { opacity: 0; transform: translateX(28px); } }
@media (prefers-reduced-motion: no-preference) {
  dialog.site-menu[open] .menu-panel { animation: menu-panel-in var(--normal) var(--ease) both; }
  dialog.site-menu[open]::backdrop { animation: menu-fade-in var(--normal) ease both; }
  dialog.site-menu .navigation > *,.menu-sub > * { animation: menu-item-in var(--slow) var(--ease) both; animation-delay: calc(90ms + var(--i,0) * 40ms); }
  dialog.site-menu .navigation > :nth-child(2),.menu-sub > :nth-child(2) { --i: 1; }
  dialog.site-menu .navigation > :nth-child(3),.menu-sub > :nth-child(3) { --i: 2; }
  dialog.site-menu .navigation > :nth-child(4),.menu-sub > :nth-child(4) { --i: 3; }
  dialog.site-menu .navigation > :nth-child(5) { --i: 4; }
  dialog.site-menu .navigation > :nth-child(6) { --i: 5; }
  dialog.site-menu .navigation > :nth-child(7) { --i: 6; }
  dialog.site-menu.is-closing .menu-panel { animation: menu-panel-out 200ms ease-in both; }
  dialog.site-menu.is-closing::backdrop { animation: menu-fade-out 200ms ease both; }
}
@media (max-width: 760px) {
  .header-cta { display: none; }
  dialog.site-menu .menu-panel { width: min(88vw,440px); padding-left: 28px; }
  .menu-head { min-height: 76px; }
  .symbol { --logo-width: 114px; }
  .menu-product { grid-template-columns: 64px 1fr; column-gap: 14px; }
  .menu-thumb { width: 64px; height: 64px; }
}
/* Keep the complete seven brand lockups readable on one row at narrow widths. */
@media (max-width: 480px) {
  dialog.site-menu .menu-panel { width: 100%; padding-inline: 12px; }
  .menu-product { grid-template-columns: 48px minmax(0,1fr); column-gap: 10px; }
  .menu-thumb { width: 48px; height: 48px; }
  .menu-product-brand { font-size: 16px; }
}
@media (forced-colors: active) { dialog.site-menu .menu-panel { background: Canvas; border-left-color: CanvasText; } .menu-toggle,.menu-close,.menu-product { border-color: ButtonText; } .menu-chevron { border-color: CanvasText; } }

/* A fourth existing service shares the established card anatomy. */
.product-qualifier { color: var(--body); font: 500 13px/1.4 var(--sans); letter-spacing: 0; }
.cards-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.cards-4 .card-body { padding: 22px; }
.cards-4 .card-heading { font-size: clamp(25px,2.3vw,34px); }
@media (max-width: 1199px) { .cards-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .cards-4 { grid-template-columns: 1fr; }
  .cards-4 .card { min-height: 0; padding-top: 58vw; }
  .cards-4 .card-body { width: auto; }
}

/* Independent product identities; service badges retain their existing rules. */
.product-identity { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 100%; white-space: nowrap; }
.product-identity .product-name { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: var(--text); font: 700 24px/1.15 var(--display); letter-spacing: -.035em; }
.product-identity .product-credit { color: var(--body); font: 400 11px/1.35 var(--sans); letter-spacing: .02em; }
.product-identity.brand-uptimeful .product-name { color: #00e5b8; }
.product-identity.brand-sovenant .product-name { color: #d4ff00; }
.product-identity .product-name .product-brand-mark { flex: none; width: 30px; height: 30px; object-fit: contain; }
.product-identity .product-name .product-brand-wordmark { width: 164px; height: auto; object-fit: contain; }
.menu-product-brand.product-identity .product-name { font-size: 18px; }
.menu-product-brand.product-identity .product-brand-mark { width: 24px; height: 24px; }
.menu-product-brand.product-identity .product-brand-wordmark { width: 115px; }
.menu-thumb-brand { background: #251a1c; }
.menu-thumb-brand img { object-fit: contain; padding: 5px; }
.site-footer .footer-product-brand.product-identity { gap: 3px; }
.site-footer .product-identity .product-name { font-size: 16px; }
.site-footer .product-identity .product-brand-mark { width: 21px; height: 21px; }
.site-footer .product-identity .product-brand-wordmark { width: 94px; }
.site-footer .product-identity .product-credit { font-size: 10px; }
.card-wepop { --glow: rgba(244,114,89,.17); background: radial-gradient(ellipse at 78% 30%,rgba(244,114,89,.2),transparent 62%),var(--surface); }
.card-wepop { scroll-margin-top: 100px; }
@media (forced-colors: active) { .product-identity .product-name { color: CanvasText; } }
/* The current Wepop wordmark is supplied in black; preserve its original pixels. */
.product-identity .product-brand-wordmark { box-sizing: content-box; padding: 7px 9px; border-radius: 6px; background: #f4f4f2; }
.menu-thumb-brand { background: #f4f4f2; }

/* Confirmed product sites: independent Aidis identity and explicit destinations. */
.product-identity.brand-aidis .product-name { color: #f4c95d; }
.product-identity.brand-aidis .product-name .product-brand-mark { width: 28px; height: 32px; }
.product-external { font: 400 13px/1 var(--sans); color: var(--body); }
.product-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; }
.card .product-links .pill { margin-top: 0; }
.product-learn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--body); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.product-learn:hover { color: var(--text); }
@media (max-width: 600px) {
  .product-site-actions { flex-wrap: wrap; }
  .product-site-actions .pill { order: 1; }
  .product-site-actions .scroll-cue { order: 2; margin-left: auto; }
  .product-site-actions .ai-secondary { order: 3; flex-basis: 100%; }
}

/* Authentic white/lilac Orykl wordmark for the site’s dark surfaces. */
.orykl-wordmark { display:block; width:132px; height:auto; }
.footer-product-brand .orykl-wordmark { width:87px; }
.menu-product .brand-orykl { margin:0; }
.orykl-card-art { background:radial-gradient(ellipse at 60% 55%,#42334e,#07141c 75%); }
.orykl-card-art img { object-fit:contain; }
.catalogue-filters { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 32px; }
.catalogue-filters[hidden],.catalogue-empty[hidden],#catalogue-products article[hidden] { display:none!important; }
.catalogue-filters button { font:inherit; color:var(--text); background:transparent; border:1px solid #777078; border-radius:999px; padding:10px 18px; min-height:44px; cursor:pointer; }
.catalogue-filters button[aria-pressed="true"] { background:#f0e9dc; color:#171719; border-color:#f0e9dc; }
.catalogue-meta { margin:22px 0; }
.catalogue-label { font-size:12px!important; color:var(--muted); margin:14px 0 7px!important; }
.catalogue-tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 20px; }
.catalogue-tags li { font-size:12px; line-height:1.4; border:1px solid #655d68; border-radius:4px; padding:6px 9px; }
.orykl-source-note { color:var(--muted); font-size:14px; line-height:1.65; max-width:72ch; margin:28px 0 0; }
.card-wide .orykl-card-art img { object-position:right center; }
@media (max-width:600px) { .card-wide .orykl-card-art img { object-position:center top; } }

/* Offering cards: one component for products and services (templates/content/cards.html).
   The homepage product card is the design. A context (home track, listing grid, related
   block) only changes the grid around the card; the kind only changes the heading (brand
   mark + name for products, Odinside logo + label for services), the catalogue meta and
   the external link. Inner class names are shared with the older art-behind-copy .card. */
.offering-card { position: relative; min-width: 0; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--card-edge); overflow: hidden; display: flex; flex-direction: column; scroll-snap-align: start; scroll-margin-inline: 4px; }
.offering-card .card-art { position: relative; inset: auto; z-index: 0; flex: none; aspect-ratio: 4/3; overflow: hidden; }
.offering-card .card-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
.offering-card .card-art.orykl-card-art img { object-fit: contain; }
.offering-card .card-body { width: auto; min-height: 0; padding: 22px 20px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.offering-card .card-heading { margin: 0; gap: 10px; font-size: 24px; }
.offering-card .offering-brand { gap: 6px; }
.offering-card .product-name { font-size: 24px; }
/* Service names everywhere (cards, menu, service pages, about/approach cards): the badge alone, set like the
   ODINSIDE wordmark (Exo Black, uppercase, white, no badge chip) so each service reads as a brand. Exo 900 matched the logo's
   outlines closest (docs/offering-cards/REPORT.md). Sizes per context below. */
.service-mark { flex: none; position: relative; white-space: nowrap; font-family: 'Exo', var(--display); font-weight: 900; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; font-kerning: none; }
.product-suffix.service-mark { color: #fff; border: 0; background: none; border-radius: 0; padding: 0; }
.offering-card-service .product-name .service-mark { font-size: 20px; }
.menu-product-brand .product-suffix.service-mark { font: 900 16px/1.1 'Exo', var(--display); letter-spacing: .01em; }
.offering-brand.service-brand { margin-bottom: 4px; }
.offering-brand.service-brand .service-mark { font-size: clamp(20px,1.9vw,28px); }
.card:not(.offering-card) .card-heading .offering-brand .service-mark { font-size: 18px; }
/* The wordmark's motion, borrowed for services: site.js lays an aria-hidden copy of the letters over the
   white text (glyphs drawn from data-l, so the text and accessible name never change). On play, one brand
   gradient spanning the whole word (each letter shows its slice: --x, --w) rises through the letters as a
   wave and the letters hop in turn, then settle back to white. */
.service-mark-wave { position: absolute; inset: 0; padding: inherit; white-space: nowrap; pointer-events: none; visibility: hidden; }
.service-mark-wave > span { display: inline-block; }
.service-mark-wave > span::before { content: attr(data-l); }
.product-suffix.service-mark.is-waving { color: transparent; }
/* inherit, never visible: a wave must not paint through a hidden ancestor (an inactive hero chapter is visibility:hidden). */
.service-mark.is-waving .service-mark-wave { visibility: inherit; }
.service-mark.is-waving .service-mark-wave > span { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(to top,#fff 0 33.4%,#fff0 43% 57%,#fff 66.6%) 0 0 / 100% 300% no-repeat, var(--brand-heading) calc(var(--x,0px) * -1) 0 / var(--w,100%) 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: service-wave 1.5s cubic-bezier(.45,0,.25,1) calc(var(--i) * 70ms) both; }
@keyframes service-wave { 0% { background-position: 0 0, calc(var(--x,0px) * -1) 0; transform: none; } 38% { background-position: 0 50%, calc(var(--x,0px) * -1) 0; transform: none; } 52% { transform: translateY(-.14em); } 66% { background-position: 0 50%, calc(var(--x,0px) * -1) 0; transform: none; } 100% { background-position: 0 100%, calc(var(--x,0px) * -1) 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .service-mark-wave { display: none; } .product-suffix.service-mark.is-waving { color: #fff; } }
@media (forced-colors: active) { .product-suffix.service-mark { color: #fff; } .service-mark-wave { display: none; } }
.offering-card .card-title { font: 500 clamp(21px,1.6vw,26px)/1.15 var(--display); letter-spacing: -.04em; color: var(--text); }
.offering-card .card-body > p { max-width: none; margin: 20px 0 24px; color: var(--body); font-size: 15px; line-height: 1.6; }
.offering-card .catalogue-meta { margin: -8px 0 12px; }
.offering-card .product-links { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.offering-card .product-links .pill { margin-top: 0; max-width: 100%; }
.offering-card .product-learn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.offering-card a:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
/* Grids of offering cards: two abreast from 601px, three only above 1000px. The :has() rules
   outrank products.css's plain .cards-2 { 1fr } at <=1000px; other .cards-2 grids are untouched. */
.cards-2:has(> .offering-card),.cards-3:has(> .offering-card) { gap: 20px; }
.cards-2:has(> .offering-card) { grid-template-columns: repeat(2,minmax(0,1fr)); }
/* Carousel: heading row with the slider controls, and a track that home.js turns into a snap-scrolling slider. */
.offering-carousel-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.offering-carousel-heading .section-title { margin: 0; }
.product-carousel-controls { display: flex; align-items: center; gap: 8px; }
.product-carousel-controls[hidden],.product-carousel-controls [hidden] { display: none; }
.product-position { color: var(--body); font: 12px/1.4 var(--sans); margin-left: 8px; font-variant-numeric: tabular-nums; }
.offering-track { --cards-view: var(--offering-count,4); display: grid; grid-template-columns: repeat(var(--cards-view),minmax(0,1fr)); gap: 20px; }
.carousel-ready .offering-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cards-view) - 1) * 20px)/var(--cards-view)); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px; margin: -4px; }
.carousel-ready .offering-track::-webkit-scrollbar { display: none; }
@media (max-width: 1199px) {
  .offering-track { --cards-view: 2; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .carousel-ready .offering-track { grid-template-columns: none; grid-auto-columns: calc((100% - 20px)/2); }
}
@media (max-width: 1000px) { .cards-2:has(> .offering-card),.cards-3:has(> .offering-card) { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .offering-carousel-heading { gap: 20px; }
  .offering-track { --cards-view: 1; grid-template-columns: minmax(0,1fr); }
  .carousel-ready .offering-track { grid-template-columns: none; grid-auto-columns: 100%; }
  .cards-2:has(> .offering-card),.cards-3:has(> .offering-card) { grid-template-columns: minmax(0,1fr); }
  .offering-card .card-art { aspect-ratio: 16/10; }
  .offering-card .card-body { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .offering-track { scroll-behavior: auto; } }
@media (forced-colors: active) { .offering-card { border-color: CanvasText; } }