/* OneAxis website v3 (20 October 2026). Loaded on every page after site.css.
   What changes: the real logo; a dark stage header and footer on every page; photographs behind the solution pages;
   the four highlight jobs from the app (focus indigo, good green, watch sun, act heart pink), used only where the
   words earn them and always with the word; bigger, tighter display type; eyebrows in sentence case.
   Everything else in site.css stands. No inline styles: the site's security policy allows none. */

:root {
  --good: #1E7F4F; --good-soft: #E4F2EA; --good-on-dark: #5BC891;
  --watch: #F4B740; --watch-ink: #7A4300; --watch-soft: #FDF3E1;
  --act: #E0445A; --act-ink: #B8233D; --act-soft: #FCECEF; --act-on-dark: #FF7A8C;
  --focus-on-dark: #8F99FF;
  --glass: rgb(11 13 18 / 0.62); --glass-line: rgb(255 255 255 / 0.14);
  --display: clamp(48px, 7.6vw, 112px);
  --stage-3: #1B2030;
  --scrim: linear-gradient(180deg, rgb(11 13 18 / 0.55) 0%, rgb(11 13 18 / 0.1) 30%, rgb(11 13 18 / 0.25) 62%, rgb(11 13 18 / 0.96) 100%);
}
@media (prefers-color-scheme: dark) {
  :root { --good-soft: #12291D; --watch-soft: #2A2112; --act-soft: #2E151A; --act-ink: #FF8C9C; --watch-ink: #F4C468; }
}

/* ---------- Logo: the circle A and the wordmark, drawn from one SVG as a mask so it takes the text colour ---------- */
.logo-word { display: block; width: 124px; height: 22px; background: currentColor; -webkit-mask: url('/assets/img/logo-oneaxis.svg') left center / contain no-repeat; mask: url('/assets/img/logo-oneaxis.svg') left center / contain no-repeat; }
.logo { color: inherit; }

/* ---------- Header: the dark stage on every page ---------- */
.site-header { background: rgb(11 13 18 / 0.86); border-bottom-color: rgb(255 255 255 / 0.08); color: #FFFFFF; }
.site-header .nav-main a, .site-header .sub > summary { color: #B9BFCC; }
.site-header .nav-main a:hover, .site-header .sub > summary:hover { color: #FFFFFF; }
.site-header .btn-primary { background: #FFFFFF; color: #0B0D12; }
.site-header .btn-primary:hover { background: var(--focus-on-dark); color: #0B0D12; }
.site-header .sub-list { background: #141822; border-color: #272C39; }
.site-header .sub-list a { color: #FFFFFF; }
.site-header .sub-list a:hover { background: #1B2030; color: #FFFFFF; }
.site-header .sub-list span { color: #9097A8; }
.site-header :focus-visible { outline-color: var(--focus-on-dark); }
@media (max-width: 900px) {
  .site-header .menu > summary span { background: #FFFFFF; }
  .site-header .menu[open] nav { background: #0B0D12; border-bottom-color: #272C39; }
  .site-header .nav-main > li > a, .site-header .sub > summary { color: #FFFFFF; border-bottom-color: #272C39; }
}
body.v3home .site-header { position: fixed; inset: 0 0 auto 0; background: transparent; border-bottom-color: transparent; transition: background .25s, border-color .25s; }
body.v3home.scrolled .site-header { background: rgb(11 13 18 / 0.86); border-bottom-color: rgb(255 255 255 / 0.08); }

/* ---------- Type ---------- */
.eyebrow { text-transform: none; letter-spacing: 0.01em; font: 500 14px/1.3 var(--sans); }
.band-dark .eyebrow, .v3-dark .eyebrow { color: var(--focus-on-dark); }
h1 { letter-spacing: -0.045em; }
h2 { letter-spacing: -0.035em; }

/* ---------- Footer: dark stage ---------- */
.site-footer { background: #0B0D12; color: #B9BFCC; border-top: 0; }
.site-footer .logo { color: #FFFFFF; }
.site-footer a { color: #B9BFCC; }
.site-footer a:hover { color: #FFFFFF; }
.site-footer .foot-h { color: #FFFFFF; }
.site-footer p, .site-footer .footer-base p { color: #9097A8; }
.site-footer .footer-base { border-top-color: #272C39; }

/* ---------- Highlights: the four jobs, always with a word ---------- */
.tone { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font: 600 12.5px/1.4 var(--sans); white-space: nowrap; }
.tone::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-good { background: var(--good-soft); color: var(--good); }
.tone-watch { background: var(--watch-soft); color: var(--watch-ink); }
.tone-watch::before { border-radius: 1px; transform: rotate(45deg); }
.tone-act { background: var(--act-soft); color: var(--act-ink); }
.tone-act::before { border-radius: 0; width: 0; height: 0; background: none; border: solid transparent; border-width: 0 4.5px 8px; border-bottom-color: currentColor; }
.tone-focus { background: var(--accent-soft); color: var(--accent); }
.v3-dark .tone-good, .v3-glass .tone-good { background: rgb(91 200 145 / 0.14); color: var(--good-on-dark); }
.v3-dark .tone-watch, .v3-glass .tone-watch { background: rgb(244 183 64 / 0.16); color: var(--watch); }
.v3-dark .tone-act, .v3-glass .tone-act { background: rgb(224 68 90 / 0.18); color: var(--act-on-dark); }
.v3-dark .tone-focus, .v3-glass .tone-focus { background: rgb(143 153 255 / 0.16); color: var(--focus-on-dark); }

/* ---------- Shared v3 pieces ---------- */
.v3-dark { background: var(--stage); color: #FFFFFF; }
.v3-dark p { color: #B9BFCC; }
.v3-dark h2, .v3-dark h3 { color: #FFFFFF; }
.v3-dark .soft { opacity: 0.5; }
.v3-dark a:not(.btn) { color: #FFFFFF; }
.v3-dark a:not(.btn):hover { color: var(--focus-on-dark); }
.v3-dark :focus-visible { outline-color: var(--focus-on-dark); }
.v3-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.v3-head h2 { margin: 0; font-size: clamp(34px, 5vw, 64px); }
.v3-head p { margin: 0; color: var(--muted); font-size: 18px; }
.v3-dark .v3-head p { color: #B9BFCC; }
@media (max-width: 860px) { .v3-head { grid-template-columns: 1fr; } }
.v3-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.v3-cap { font-size: 13px; color: var(--quiet); margin-top: 14px; }
.v3-dark .v3-cap { color: #9097A8; }
.v3-glass { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); color: #FFFFFF; border-radius: 16px; }

/* ---------- Home: hero ---------- */
.v3-hero { position: relative; min-height: max(680px, 100svh); display: grid; align-items: end; color: #FFFFFF; background: #0B0D12; overflow: hidden; isolation: isolate; }
.v3-hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; max-width: none; }
.v3-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.v3-hero-inner { padding-block: 140px 40px; width: 100%; }
.v3-hero h1 { font-size: var(--display); line-height: 0.94; max-width: 8.5ch; margin: 0 0 28px; color: #FFFFFF; }
.v3-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.v3-hero .lede { color: #DDE1EA; margin: 0; font-size: clamp(18px, 1.8vw, 22px); max-width: 46ch; }
.v3-hero .actions { margin: 0; }
.v3-hero-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 13px; color: #B9BFCC; }
.v3-hero-foot p { margin: 0; }
@media (max-width: 860px) { .v3-hero-row { grid-template-columns: 1fr; } .v3-hero-inner { padding-top: 120px; } }

/* The two cards over the picture: what a buyer sees, what your team sees. */
.v3-pin { position: absolute; left: 63.4%; top: 44%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgb(30 127 79 / 0.9); z-index: 1; }
.v3-pin::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.8); animation: v3ping 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes v3ping { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.v3-float { position: absolute; z-index: 1; padding: 16px 18px; width: 290px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); }
.v3-float h3 { margin: 6px 0 4px; font-size: 22px; letter-spacing: -0.02em; color: #FFFFFF; }
.v3-float p { margin: 0; font-size: 14px; line-height: 1.45; color: #DDE1EA; }
.v3-float .price { font: 600 22px/1.2 var(--sans); font-variant-numeric: tabular-nums; margin-top: 10px; color: #FFFFFF; }
.v3-float .who { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #B9BFCC; }
.v3-float .call { display: inline-flex; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: #FFFFFF; color: #0B0D12; font: 600 14px/1 var(--sans); }
.v3-float-buyer { left: calc(63.4% - 150px); top: calc(44% - 196px); }
.v3-float-buyer::after { content: ''; position: absolute; left: 150px; bottom: -40px; height: 34px; border-left: 1.5px dashed rgb(255 255 255 / 0.6); }
.v3-float-team { right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); top: calc(44% + 44px); width: 320px; }
@media (max-width: 1180px) { .v3-float-team { display: none; } }
@media (max-width: 860px) { .v3-pin, .v3-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .v3-pin::after { animation: none; opacity: 0; } }

/* The same two cards, stacked under the hero on phones. */
.v3-pair { display: none; }
@media (max-width: 860px) {
  .v3-pair { display: grid; gap: 12px; padding: 0 var(--gutter) 40px; background: #0B0D12; }
  .v3-pair .v3-float { display: block; position: static; width: auto; }
  .v3-pair .v3-float::before { display: none; }
}

/* ---------- Home: the journey ---------- */
.v3-journey { background: var(--bg); }
.v3-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.v3-roles button { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 500 15px/1 var(--sans); cursor: pointer; }
.v3-roles button[aria-selected='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.v3-roles button:hover { border-color: var(--fg); }
.v3-jpanel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.v3-jpanel[hidden] { display: none; }
.v3-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: st; }
.v3-steps li { counter-increment: st; }
.v3-steps button { width: 100%; text-align: left; display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 16px 16px 16px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--fg); cursor: pointer; font: inherit; }
.v3-steps button::before { content: counter(st); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--mono); border: 1px solid var(--line); color: var(--muted); }
.v3-steps strong { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.v3-steps span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.v3-steps button[aria-pressed='true'] { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.v3-steps button[aria-pressed='true']::before { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.v3-steps button:hover { border-color: var(--line); }
.v3-stage { position: relative; border-radius: 22px; background: #0B0D12; padding: clamp(14px, 2.4vw, 28px); min-height: 360px; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.v3-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 70% 0%, rgb(61 75 209 / 0.38), transparent 70%); }
.v3-screen { margin: 0; width: 100%; }
.js .v3-screen:not(.on) { display: none; }
.v3-screen + .v3-screen { margin-top: 24px; }
.js .v3-screen + .v3-screen { margin-top: 0; }
.js .v3-screen.on { animation: v3in .45s cubic-bezier(.2,.7,.3,1); }
@keyframes v3in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3-screen.on { animation: none; } }
.v3-screen img { border-radius: 12px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.7); margin-inline: auto; }
.v3-screen.phone img { max-width: 300px; border-radius: 30px; border: 7px solid #262B37; }
.v3-screen.photo img { border-radius: 14px; }
.v3-screen figcaption { margin-top: 14px; text-align: center; font-size: 13px; color: #9097A8; }
@media (max-width: 860px) { .v3-jpanel { grid-template-columns: 1fr; } .v3-stage { order: -1; min-height: 0; } .v3-screen.phone img { max-width: 240px; } }

/* ---------- Home: demand on the building ---------- */
.v3-demand { position: relative; }
.v3-dgrid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.v3-tower { position: relative; border-radius: 20px; overflow: hidden; min-height: 520px; }
.v3-tower img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
.v3-tower p { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: 12px; color: #DDE1EA; text-shadow: 0 1px 8px rgb(0 0 0 / 0.8); }
.v3-modes { display: inline-flex; padding: 4px; border-radius: 999px; background: #141822; border: 1px solid #272C39; margin-bottom: 18px; }
.v3-modes button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: #B9BFCC; font: 500 14px/1 var(--sans); cursor: pointer; }
.v3-modes button[aria-pressed='true'] { background: #FFFFFF; color: #0B0D12; }
.v3-stack { display: grid; grid-template-columns: 34px repeat(4, minmax(0, 1fr)); gap: 5px; font-variant-numeric: tabular-nums; }
.v3-stack .lv { font: 500 11px/1 var(--mono); color: #9097A8; display: grid; place-items: center start; }
.v3-stack .asp { font: 500 11px/1 var(--mono); color: #9097A8; text-align: center; padding-bottom: 2px; }
.v3-unit { position: relative; min-height: 34px; border-radius: 7px; border: 1px solid transparent; font: 500 12px/1 var(--mono); color: #FFFFFF; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .25s, border-color .25s, color .25s; }
.v3-unit:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.v3-unit[aria-pressed='true'] { outline: 2px solid #FFFFFF; outline-offset: 1px; }
/* What buyers see: availability, with a shape for each state */
.mode-buyer .v3-unit.s-available { background: rgb(30 127 79 / 0.22); border-color: rgb(91 200 145 / 0.6); }
.mode-buyer .v3-unit.s-held { background: rgb(244 183 64 / 0.18); border-color: rgb(244 183 64 / 0.6); }
.mode-buyer .v3-unit.s-sold { background: #141822; color: #5D6475; text-decoration: line-through; }
.mode-buyer .v3-unit.s-later { background: transparent; border: 1px dashed #3A4050; color: #5D6475; }
/* What your team sees: demand from what buyers did, sold recedes */
.mode-team .v3-unit { background: #141822; color: #9097A8; }
.mode-team .v3-unit.h1 { background: #1F2550; color: #DDE1EA; }
.mode-team .v3-unit.h2 { background: #2C3480; color: #FFFFFF; }
.mode-team .v3-unit.h3 { background: #3D4BD1; color: #FFFFFF; }
.mode-team .v3-unit.h4 { background: #8F99FF; color: #0B0D12; }
.mode-team .v3-unit.s-sold { background: transparent; color: #3A4050; text-decoration: line-through; }
.mode-team .v3-unit.s-later { background: transparent; border: 1px dashed #3A4050; color: #5D6475; }
.mode-team .v3-unit.f-act { box-shadow: inset 0 0 0 2px var(--act-on-dark); }
.mode-team .v3-unit.f-act::after { content: ''; position: absolute; top: 3px; right: 3px; border: solid transparent; border-width: 0 4px 7px; border-bottom-color: var(--act-on-dark); }
.mode-team .v3-unit.f-watch { box-shadow: inset 0 0 0 2px var(--watch); }
.mode-team .v3-unit.f-watch::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: var(--watch); transform: rotate(45deg); }
.v3-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 12.5px; color: #B9BFCC; list-style: none; padding: 0; }
.v3-legend li { display: inline-flex; align-items: center; gap: 7px; }
.v3-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.v3-legend [data-for]:not(.on) { display: none; }
.lg-available { background: rgb(30 127 79 / 0.22); border: 1px solid rgb(91 200 145 / 0.6); }
.lg-held { background: rgb(244 183 64 / 0.18); border: 1px solid rgb(244 183 64 / 0.6); }
.lg-sold { background: #141822; border: 1px solid #272C39; }
.lg-later { border: 1px dashed #3A4050; }
.lg-ramp { width: 64px !important; background: linear-gradient(90deg, #141822, #1F2550, #2C3480, #3D4BD1, #8F99FF); }
.lg-act { box-shadow: inset 0 0 0 2px var(--act-on-dark); }
.lg-watch { box-shadow: inset 0 0 0 2px var(--watch); }
.v3-card { background: #141822; border: 1px solid #272C39; border-radius: 20px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.v3-card h3 { margin: 0; font-size: 28px; letter-spacing: -0.025em; }
.v3-card .sub { margin: 0; color: #9097A8; font-size: 14px; }
.v3-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.v3-facts div { background: #0B0D12; border-radius: 12px; padding: 10px 12px; }
.v3-facts dt { font-size: 12px; color: #9097A8; }
.v3-facts dd { margin: 4px 0 0; font: 600 22px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: #FFFFFF; }
.v3-card .price { font: 600 30px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: #FFFFFF; margin: 8px 0 4px; }
.v3-next { border-top: 1px solid #272C39; padding-top: 14px; }
.v3-next p { margin: 6px 0 0; color: #DDE1EA; font-size: 15px; }
.v3-card [data-team] { display: none; }
.mode-team .v3-card [data-team] { display: block; }
.mode-team .v3-card [data-buyer] { display: none; }
@media (max-width: 1060px) { .v3-dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .v3-tower { display: none; } }
@media (max-width: 720px) { .v3-dgrid { grid-template-columns: 1fr; } .v3-unit { min-height: 30px; font-size: 11px; } }

/* ---------- Home: your team, with the highlights ---------- */
.v3-team-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.v3-team-shot img { border-radius: 14px; border: 1px solid #272C39; box-shadow: 0 30px 80px -24px rgb(0 0 0 / 0.8); }
.v3-tones { display: grid; gap: 12px; }
.v3-tone { background: #141822; border: 1px solid #272C39; border-radius: 16px; padding: 18px; border-left: 3px solid #3A4050; }
.v3-tone.t-good { border-left-color: var(--good-on-dark); }
.v3-tone.t-watch { border-left-color: var(--watch); }
.v3-tone.t-act { border-left-color: var(--act-on-dark); background: linear-gradient(90deg, rgb(224 68 90 / 0.12), #141822 60%); }
.v3-tone p { margin: 10px 0 0; color: #DDE1EA; font-size: 15.5px; line-height: 1.45; }
.v3-privacy { margin-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 16px; border: 1px solid #272C39; }
.v3-privacy code { font: 500 13px/1.5 var(--mono); color: var(--focus-on-dark); background: #141822; padding: 8px 10px; border-radius: 8px; white-space: nowrap; }
.v3-privacy p { margin: 0; font-size: 15px; }
@media (max-width: 960px) { .v3-team-grid { grid-template-columns: 1fr; } .v3-privacy { grid-template-columns: 1fr; } .v3-privacy code { white-space: normal; } }

/* ---------- Home: full-bleed photographs with words ---------- */
.v3-bleed { position: relative; min-height: min(86vh, 760px); display: grid; align-items: end; color: #FFFFFF; overflow: hidden; isolation: isolate; background: #0B0D12; }
.v3-bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; max-width: none; }
.v3-bleed::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 13 18 / 0.85) 0%, rgb(11 13 18 / 0.35) 50%, transparent 75%), linear-gradient(0deg, rgb(11 13 18 / 0.7), transparent 40%); }
.v3-bleed .wrap { padding-block: 72px; width: 100%; }
.v3-bleed h2 { color: #FFFFFF; font-size: clamp(36px, 5.6vw, 76px); max-width: 13ch; margin-bottom: 18px; }
.v3-bleed p { color: #DDE1EA; max-width: 44ch; font-size: 18px; }
.v3-bleed .v3-cap { color: #B9BFCC; }
.v3-bleed .v3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; padding: 0; list-style: none; }
.v3-bleed .v3-chips li { padding: 8px 14px; font-size: 14px; border-radius: 999px; }

/* ---------- Home: the suite, split ---------- */
.v3-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.v3-split img { border-radius: 20px; }
.v3-split p { color: var(--muted); font-size: 18px; }
@media (max-width: 860px) { .v3-split { grid-template-columns: 1fr; } }

/* ---------- Home: solutions with photographs ---------- */
.v3-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v3-case { position: relative; display: grid; align-items: end; min-height: 300px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #FFFFFF; isolation: isolate; background: #0B0D12; }
.v3-case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.7,.3,1); max-width: none; }
.v3-case::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(11 13 18 / 0.9), rgb(11 13 18 / 0.1) 60%); }
.v3-case div { padding: 22px; }
.v3-case h3 { margin: 0 0 4px; font-size: 22px; color: #FFFFFF; }
.v3-case p { margin: 0; color: #DDE1EA; font-size: 15px; }
.v3-case:hover { color: #FFFFFF; }
.v3-case:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .v3-case img { transition: none; } .v3-case:hover img { transform: none; } }
@media (max-width: 960px) { .v3-cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v3-cases { grid-template-columns: 1fr; } .v3-case { min-height: 220px; } }
.v3-more { margin-top: 24px; color: var(--muted); }
.v3-more a { color: var(--fg); }

/* ---------- Home: trust ---------- */
.v3-trust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.v3-trust div { padding: 22px 20px 6px 0; }
.v3-trust div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.v3-trust h3 { font-size: 18px; margin-bottom: 8px; }
.v3-trust p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 960px) { .v3-trust { grid-template-columns: 1fr 1fr; } .v3-trust div, .v3-trust div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .v3-trust { grid-template-columns: 1fr; } }

/* ---------- Inner pages: a photograph behind the solution pages ---------- */
.page-hero.v3-photo { position: relative; color: #FFFFFF; background: #0B0D12; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 14vw, 200px) clamp(48px, 6vw, 80px); }
.page-hero.v3-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; max-width: none; }
.page-hero.v3-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 13 18 / 0.9) 0%, rgb(11 13 18 / 0.55) 55%, rgb(11 13 18 / 0.2) 100%), linear-gradient(0deg, rgb(11 13 18 / 0.6), transparent 50%); }
.page-hero.v3-photo h1 { color: #FFFFFF; font-size: clamp(40px, 6vw, 80px); }
.page-hero.v3-photo .lede { color: #DDE1EA; }
.page-hero.v3-photo .question { color: #FFFFFF; border-left-color: var(--focus-on-dark); }
.page-hero.v3-photo .crumbs, .page-hero.v3-photo .crumbs a { color: #B9BFCC; }
.page-hero.v3-photo .btn-primary { background: #FFFFFF; color: #0B0D12; }
.page-hero.v3-photo .btn-primary:hover { background: var(--focus-on-dark); }
.page-hero.v3-photo .btn-secondary { color: #FFFFFF; border-color: rgb(255 255 255 / 0.3); }
.page-hero.v3-photo .btn-secondary:hover { border-color: #FFFFFF; color: #FFFFFF; }
.page-hero.v3-photo .v3-cap { position: absolute; right: var(--gutter); bottom: 14px; margin: 0; font-size: 12px; color: #B9BFCC; }
.page-hero.v3-photo :focus-visible { outline-color: var(--focus-on-dark); }
.page-hero.v3-photo + .shots-row { padding-top: clamp(48px, 6vw, 80px); }

/* Phones: the words sit lower on the picture, so the shade starts higher. */
@media (max-width: 860px) {
  .v3-hero::before { background: linear-gradient(180deg, rgb(11 13 18 / 0.5) 0%, rgb(11 13 18 / 0.05) 20%, rgb(11 13 18 / 0.7) 42%, rgb(11 13 18 / 0.97) 72%); }
}