/* ORSLON homepage design system. Deliberately independent of the legacy pages.
   Breakpoints: 1100 (compact desktop), 900 (navigation), 700 (single column), 380. */
:root {
  --navy: #0b1f3f;
  --night: #091726;
  --orange: #fd5703;
  --orange-ink: #b83c00;
  /* Warm ivory rather than the previous #f8f7f4, whose equal-ish channels read
     as a flat grey cast under warm light. These carry a consistent red>green>blue
     falloff, so every light surface on the site sits in the same warm family. */
  --paper: #faf6f0;      /* base page */
  --paper-warm: #f5eee4; /* alternating band */
  --paper-deep: #ece3d6;  /* deepest light band */
  --card: #fffcf8;        /* raised surfaces */
  --white: #fff;
  --ink: #14253c;
  --muted: #5a6473;
  --line: #e3dbd0;
  --dark-line: #ffffff26;
  --on-dark: #bdc6d0;
  --f-body: 'Inter', sans-serif;
  --f-display: 'Space Grotesk', sans-serif;
  --f-mono: 'Geist Mono', monospace;
  --gutter: clamp(24px, 4.5vw, 80px);
  --section-space: clamp(72px, 8vw, 128px);
  --content-width: 1440px;
  --radius: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --duration: 240ms;
  --letter-delay: 0ms;
  --shadow: 0 20px 60px #09172615;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.7 var(--f-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
svg { vertical-align: middle; flex-shrink: 0; }

/* The supplied lettering is custom vector artwork, not a distributable font.
   The mask keeps those exact letterforms while currentColor preserves the
   colour and font sizing of the sentence around it. The coloured mark then
   replaces the second O, matching the supplied wordmark. */
.brand-token {
  position: relative;
  display: inline-block;
  width: 5.26em;
  height: 1em;
  overflow: hidden;
  color: inherit;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
  text-indent: -999em;
  white-space: nowrap;
  vertical-align: -.12em;
}
.brand-token::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url('assets/logo-wordmark-inline-mask.svg') center / 100% 100% no-repeat;
  mask: url('assets/logo-wordmark-inline-mask.svg') center / 100% 100% no-repeat;
}
.brand-token::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 65.8%;
  width: 19%;
  background: url('assets/logo-mark.svg') center / contain no-repeat;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
::selection { color: var(--white); background: var(--navy); }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 1000; padding: 12px 20px; background: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
#main-content:focus { outline: none; }
#scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; z-index: 500; pointer-events: none; }
.section-eyebrow { display: flex; align-items: center; gap: 12px; font: 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 24px; color: var(--muted); }
.section-eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--orange); }
.section-h2, .fp-h, .cta-h2 { font: 500 clamp(32px, 3.5vw, 52px)/1.1 var(--f-display); letter-spacing: -.045em; }
.section-p { color: var(--muted); line-height: 1.85; }
.grad { color: var(--orange-ink); }
.on-dark .grad, .cta-h2 .grad { color: #ff8248; }
.btn-dk-primary, .btn-dk-outline, .btn-secondary, .nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 50px; padding: 13px 23px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13px; font-weight: 600; transition: background var(--duration), transform var(--duration), border-color var(--duration); }
.btn-dk-primary, .nav-cta { background: var(--orange); color: var(--night); }
.btn-dk-primary:hover, .nav-cta:hover { background: #ff8248; transform: translateY(-2px); }
.btn-dk-outline { color: var(--white); border-color: #ffffff54; }
.btn-dk-outline:hover { border-color: var(--white); background: #ffffff09; }
.btn-secondary { border-color: var(--line); }
.btn-secondary:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.status-dot { display: inline-block; width: 6px; height: 6px; background: #9bceac; border-radius: 50%; flex-shrink: 0; }
/* Navigation: original full wordmark, short entrance, all original destinations. */
#navbar { position: sticky; top: 0; z-index: 100; background: #faf6f0f2; border-bottom: 1px solid var(--line); transition: box-shadow var(--duration); }
#navbar.scrolled { box-shadow: 0 4px 24px #0917260d; backdrop-filter: blur(16px); }
.nav-inner { max-width: var(--content-width); height: 88px; padding-inline: var(--gutter); margin: auto; display: flex; align-items: center; gap: 30px; }
.nav-brand { flex-shrink: 0; margin-right: auto; }
.brand-lockup { width: 164px; height: auto; animation: brand-entrance 900ms var(--ease) both; }
.nav-links { display: flex; list-style: none; padding: 0; margin: 0; gap: 30px; align-items: center; }
.nav-links > li > a, .nav-link-text { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 500; }
.nav-links > li > a:hover, .nav-link-text:hover { color: var(--orange-ink); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-cta { min-height: 44px; padding: 10px 18px; gap: 10px; }
.nav-sep { width: 1px; height: 20px; background: var(--line); }
.nav-dd-menu { position: absolute; top: 100%; left: var(--gutter); right: var(--gutter); padding-top: 1px; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity var(--duration), transform var(--duration), visibility var(--duration); }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { visibility: visible; opacity: 1; transform: translateY(0); }
.nav-dd.dismissed .nav-dd-menu { visibility: hidden; opacity: 0; }
.mega-menu { max-width: 1280px; margin: auto; display: grid; grid-template-columns: .8fr 2fr; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.mega-left { padding: 34px; background: var(--paper-warm); }
.mega-left-eyebrow { font: 10px var(--f-mono); color: var(--orange-ink); text-transform: uppercase; letter-spacing: .12em; }
.mega-left-title { font: 500 26px/1.2 var(--f-display); margin: 15px 0; }
.mega-left-desc, .mega-badge-sub { font-size: 12px; color: var(--muted); }
.mega-left-link { display: inline-block; padding-block: 12px; color: var(--orange-ink); font-size: 13px; }
.mega-left-divider { height: 1px; background: var(--line); margin: 10px 0 18px; }
.mega-left-badges { display: flex; gap: 20px; }
.mega-badge-label { font-weight: 600; font-size: 12px; }
.mega-right { display: grid; grid-template-columns: 1fr 1fr; padding: 20px; gap: 4px; }
.mega-menu-item { display: flex; align-items: center; gap: 14px; padding: 18px 12px; }
.mega-menu-item:hover { background: #f3ece2; }
.mega-menu-title { font-size: 14px; font-weight: 600; }
.mega-menu-text p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.hex-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--orange-ink); }
.hex-shape { display: none; }
.lang-switch { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 10px 0; min-height: 44px; font: 11px var(--f-mono); }
.lang-menu { position: absolute; right: 0; top: 100%; visibility: hidden; background: var(--paper); border: 1px solid var(--line); min-width: 150px; margin: 0; padding: 6px; list-style: none; box-shadow: var(--shadow); }
.lang-switch.open .lang-menu { visibility: visible; }
.lang-menu li { min-height: 44px; padding: 10px 14px; cursor: pointer; font-size: 13px; }
.lang-menu li:hover, .lang-menu li[aria-selected=true] { background: #f1e8dc; color: var(--orange-ink); }
.hamburger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.hamburger span { width: 19px; height: 1px; background: var(--navy); transition: transform var(--duration), opacity var(--duration); }
.hamburger.open span:first-child { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:last-child { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav-contact { display: none; }
/* Hero: photography and precise architectural lines; no simulated live metrics. */
.hero-stage { position:relative; isolation:isolate; background:linear-gradient(112deg,#f2f6f6 0%,#edf2f3 47%,#d3dee2 47.1%,#c5d2d8 100%); color:var(--ink); overflow:hidden; border-bottom:1px solid #aebfc6; }
.hero-stage::before { content:''; position:absolute; inset:0; z-index:-2; background:radial-gradient(ellipse at 16% 16%,#ffffffc9 0,transparent 42%),radial-gradient(ellipse at 73% 45%,#ef8a4938 0,transparent 34%),radial-gradient(ellipse at 98% 8%,#7894a35c 0,transparent 37%); }
.hero-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#17324a0a calc(25% - 1px),#17324a0a 25%); pointer-events: none; }
.hero-topline { display:flex; align-items:center; justify-content:flex-end; padding-top:14px; font:10px var(--f-mono); text-transform:uppercase; letter-spacing:.14em; color:#2e4357; }
.hero-edition { color:#2e4357; padding:8px 12px; border:1px solid #ffffff94; border-radius:999px; background:#ffffff66; box-shadow:inset 0 1px #fff; backdrop-filter:blur(10px); }
.hero-grid { max-width:var(--content-width); margin:auto; padding:28px var(--gutter) 42px; display:grid; grid-template-columns:1.1fr 1fr; align-items:start; gap:36px; }
.hero-h1 { color:#0b2038; font:500 clamp(52px,4.55vw,68px)/1.055 var(--f-display); letter-spacing:-.055em; max-width:620px; text-shadow:0 1px #fff; }
.hero-emphasis, #hero-word-cycle { color:#e94f16; -webkit-text-fill-color:currentColor; text-shadow:0 10px 28px #e85e1922; }
.hero-sub { max-width:540px; color:#2d4357; font-size:14px; font-weight:500; line-height:1.85; margin-top:27px; padding-left:18px; border-left:2px solid #ed672c; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.hero-actions .btn-dk-outline { color:var(--ink); border-color:#17324a55; background:#fffaf380; backdrop-filter:blur(10px); }
.hero-actions .btn-dk-outline:hover { color:var(--navy); border-color:var(--navy); background:#fffdf9; }
.hero-actions .btn-dk-primary { box-shadow:0 14px 30px -13px #c84a18b8,inset 0 1px #ffb17d; }
.hero-actions .btn-dk-primary::after { content:'→'; font-size:15px; transition:transform .3s var(--ease); }
.hero-actions .btn-dk-primary:hover::after { transform:translateX(5px); }
.hero-foundation { display: flex; align-items: center; justify-content: space-between; padding-bottom: 34px; }
.hero-pillars { display:flex; width:87%; padding-top:18px; gap:12px; }
.hero-pillar { flex:1; min-width:0; padding:15px 17px; border:1px solid #ffffff9c; border-top-color:#ffffffd9; border-radius:10px; background:linear-gradient(135deg,#ffffffa6,#f3f7f766); box-shadow:0 12px 28px -24px #16354a,inset 0 1px #fff; backdrop-filter:blur(14px); }
.hero-pillar span { display: block; }
.hero-pillar-label { font: 9px var(--f-mono); text-transform: uppercase; letter-spacing: .15em; color: var(--orange-ink); margin-bottom: 9px; }
.hero-pillar-title { color:#10283d; font-size:12px; font-weight:600; margin-bottom:4px; }
.hero-pillar-sub { font-size:11px; color:#455b6e; }
.hero-scroll { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid #ffffffb5; border-radius:50%; background:#ffffff66; box-shadow:inset 0 1px #fff; font-size:24px; transition:border-color var(--duration),transform var(--duration),background var(--duration); backdrop-filter:blur(12px); }
.hero-scroll:hover { border-color: var(--orange); transform: translateY(3px); }
/* Dark band between the light hero above and the light body below, so the four
   contractual figures read as a deliberate inset rather than more page. Every
   colour inside is restated here: the inherited ones are tuned for the light
   body and would otherwise put navy numerals on a navy field. */
/* The band carries the fill edge to edge; .hero-metrics inside it keeps the
   container width so the figures stay on the same grid as the rest of the page.
   Previously the fill was on the container itself, which left the page colour
   showing down both sides on any viewport wider than --content-width. */
/* Espresso rather than navy. The page around it is warm ivory, so a cool navy
   block sat against it the same way the cream ticker sat against the navy —
   two temperatures meeting with nothing between them. A warm dark shares the
   page's bias, and the brand orange is a warm hue, so it belongs on this
   surface instead of merely contrasting with it. */
.hero-metrics-band { background:#1e1714; border-bottom:1px solid #ffffff1c; box-shadow:inset 0 1px #ffffff14; }
.hero-metrics { position:relative; display:grid; grid-template-columns:repeat(4,1fr); padding-block:38px; }
.hero-metrics .hm-num { color: #ede4dc; }
.hero-metrics .hm-lbl { color: #a2948a; }
.hm { padding-left: 34px; border-left: 1px solid #ffffff1c; display: flex; flex-direction: column; }
.hm:first-child { padding-left: 0; border: 0; }
.hm-num { color: var(--navy); font: 500 clamp(30px,3vw,44px)/1.2 var(--f-display); letter-spacing: -.055em; }
.hm-lbl { font: 10px/1.7 var(--f-mono); margin-top: 9px; color: var(--muted); }
/* Continues the metrics band rather than breaking to cream between it and the
   page: the figures and the stack they run on are one proof block, and a warm
   cream strip directly under a cool navy one read as an accident. Slightly
   lifted off the band above so the two are still distinguishable. */
#trust-bar { background: #261d19; border-block: 1px solid #ffffff1c; }
#trust-bar .trust-label-text { color: #a89a90; }
#trust-bar .trust-pill { color: #e3dad2; }
.trust-inner { max-width: var(--content-width); margin: auto; padding: 25px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.trust-label-text { font: 9px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; max-width: 115px; }
.trust-pill { font: 500 12px var(--f-display); color: var(--muted); }
/* Practices: open editorial rows; description and technical stack always available. */
#services-home { padding-block:var(--section-space); background:radial-gradient(ellipse at 4% 18%,#ffe7d650 0,transparent 36%),radial-gradient(ellipse at 88% 70%,#d9e8ec80 0,transparent 42%),linear-gradient(135deg,#fbfaf6,#f0f4f3); }
#services-home > .container { display: grid; grid-template-columns: .85fr 1.5fr; column-gap: 7%; align-items: start; }
.services-header { position: sticky; top: 128px; }
.services-header .section-h2 { font-size: clamp(34px,3.4vw,48px); }
.services-header .section-h2 .grad { display: block; margin-top: 6px; }
.reveal-word { display:inline-block; white-space:nowrap; }
.reveal-letter { display:inline-block; white-space:pre; will-change:transform,opacity; }
@keyframes reveal-letter-in { from { opacity:0; transform:translateY(.7em) rotateX(-72deg); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
.services-header .section-p { margin-top: 27px; font-size: 14px; }
.practice-index { border-top: 1px solid var(--ink); }
.pr-row { position:relative; display:grid; grid-template-columns:28px 30px 1fr 28px; align-items:start; gap:14px; padding:25px 0; border-bottom:1px solid var(--line); border-radius:11px; overflow:hidden; transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s; }
.pr-row::before { content:''; position:absolute; inset:12px auto 12px 0; width:2px; border-radius:4px; background:linear-gradient(#ff9b5b,#e94f16); transform:scaleY(0); transition:transform .35s var(--ease); }
.pr-idx { font: 10px var(--f-mono); color: var(--muted); padding-top: 7px; }
.pr-ico { color: var(--ink); padding-top: 2px; }
.pr-main { display: flex; flex-direction: column; gap: 7px; }
.pr-title { font: 500 clamp(18px,1.8vw,25px)/1.3 var(--f-display); letter-spacing: -.035em; }
.pr-sub { font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 440px; }
.pr-tags { grid-column: 3; display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 0; font: 9px/1.5 var(--f-mono); color: var(--muted); }
.pr-tags > span:not(:last-child)::after { content: '/'; color: #949da8; margin-left: 12px; }
.pr-arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d9dedd; border-radius: 50%; grid-column: 4; grid-row: 1 / 3; align-self: center; color: var(--muted); transition: transform var(--duration); }
.pr-row:hover, .pr-row:focus-visible, .pr-row.preview-active { background:linear-gradient(110deg,#ffffffd9,#f5f9f8a6); padding-inline:16px; border-color:#c8d6d8; box-shadow:0 18px 38px -28px #17364d80,inset 0 1px #fff; transform:translateX(5px); }
.pr-row:hover::before, .pr-row:focus-visible::before, .pr-row.preview-active::before { transform:scaleY(1); }
.pr-row.preview-active .pr-idx { color: var(--orange-ink); }
.pr-row:hover .pr-title, .pr-row:focus-visible .pr-title, .pr-row:hover .pr-ico { color: var(--orange-ink); }
.pr-row:hover .pr-arrow { transform: rotate(-45deg); color: var(--night); background: #ffbc84; border-color: #ffbc84; }
.services-all { grid-column: 2; margin-top: 28px; }
/* Trust figures: one restrained reveal, all exact contractual copy retained. */
/* Deep petrol rather than navy, and roughly half the height it was: the block
   was 58px of padding on top of generous internal spacing, which left the four
   figures floating in a stripe far taller than the content needed. */
#stats-band { padding-block: 30px; background: radial-gradient(ellipse at 78% 0%, #2c6a7526, transparent 62%), #0f2e35; color: var(--white); }
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { border-left: 1px solid #ffffff1f; padding-inline: 30px; }
.stat-item:first-child { border: 0; padding-left: 0; }
.stat-item:last-child { padding-right: 0; }
.stat-num { font: 400 clamp(29px,2.7vw,40px)/1.05 var(--f-display); letter-spacing: -.05em; margin-bottom: 8px; }
.stat-label { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.stat-sub { color: #a9c2c7; font-size: 11px; line-height: 1.6; max-width: 205px; }
/* Solutions: numbered outcome briefs, technical metadata, no decorative card controls. */
#work { padding-block: var(--section-space); background: #fff; }
.sector-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12%; align-items: end; }
.sector-head .section-p { font-size: 14px; }
.solutions-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 43px 0 30px; border-bottom: 1px solid var(--line); }
.filter-tab { border: 0; border-bottom: 2px solid transparent; padding: 15px 18px; background: transparent; font-size: 12px; color: var(--muted); min-height: 48px; margin-bottom: -1px; }
.filter-tab:hover { color: var(--ink); background: var(--paper); }
.filter-tab.active { color: var(--orange-ink); border-color: var(--orange); }
.filter-count { font: 9px var(--f-mono); margin-left: 5px; vertical-align: top; }
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; counter-reset: solution; }
.case-card { position: relative; isolation: isolate; padding: 34px 28px; border: 1px solid #e7ded2; border-radius: 10px; background: linear-gradient(145deg, var(--card), #f7f1e9); box-shadow: 0 4px 9px #12263e03; overflow: hidden; transition: border-color var(--duration), box-shadow var(--duration), transform var(--duration); display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-content: start; }
.case-card, .case-card > * { min-width: 0; }
.case-card:hover { border-color: #b5c3cf; box-shadow: 0 16px 30px #12263e0c; transform: translateY(-3px); }
/* Cursor-following spotlight plus a light 3D tilt. Both read custom properties
   written by one shared rAF, so hover stays a composited transform. */
.case-card.is-tilting, .engage-card.is-tilting { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px); }
.case-card::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration); background: radial-gradient(340px circle at var(--mx) var(--my), #fd570314, transparent 70%); }
.case-card.is-tilting::before { opacity: 1; }
.case-card[data-category="devops"]::before { background: radial-gradient(340px circle at var(--mx) var(--my), #ffac7326, transparent 70%); }
.case-card[data-category="devops"] { background: radial-gradient(ellipse at 100% 0%, #47637d45, transparent 65%), var(--navy); color: #f3f5f8; border-color: #263a53; }
.case-card[data-category="devops"] :is(.case-sector, .case-body, .cp-l) { color: #c4cedb; }
.case-card[data-category="devops"] .case-ico { color: #ffac73; }
.case-card[data-category="devops"] .case-tag { color: #d4dce5; border-color: #ffffff26; background: #ffffff08; }
.case-card[data-category="ai"] { background: radial-gradient(ellipse at 100% 0%, #ffe2ca99, transparent 70%), #fff8f0; border-color: #ecdfd3; }
.case-card::after { content: ''; position: absolute; z-index: -1; width: 130px; height: 130px; right: -62px; top: -72px; border: 1px solid #889fb21f; border-radius: 22px; transform: rotate(-30deg); box-shadow: 0 0 0 20px #889fb209, 0 0 0 40px #889fb207; }

.case-quote, .case-body { overflow-wrap: anywhere; hyphens: auto; }
.case-ico { color: var(--orange-ink); grid-row: 1 / 3; }
.case-sector { font: 10px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 0 15px; }
.case-quote { font: 500 clamp(23px,2.2vw,30px)/1.2 var(--f-display); letter-spacing: -.035em; max-width: 440px; }
.case-body { grid-column: 2; font-size: 13px; color: var(--muted); line-height: 1.85; margin-top: 19px; }
.case-proof { grid-column: 2; border-left: 2px solid var(--orange); padding-left: 17px; margin: 26px 0 23px; display: flex; align-items: center; gap: 15px; }
.cp-n { font: 500 24px/1.2 var(--f-display); letter-spacing: -.04em; white-space: nowrap; }
.cp-l { font-size: 11px; color: var(--muted); max-width: 170px; line-height: 1.5; }
.case-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.case-tag { font: 9px/1.5 var(--f-mono); padding: 4px 6px; background: var(--paper); color: var(--muted); border: 1px solid #e9eae7; }
.cases-foot { font-size: 12px; color: var(--muted); padding-top: 30px; max-width: 850px; line-height: 1.85; }
.cases-foot a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 4px; }
/* Delivery method: a vertical, progressively connected timeline. */
#process-section { padding-block: var(--section-space); background: var(--paper-deep); }
.engage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; margin-top: 52px; align-items: start; }
.engage-left { position: sticky; top: 130px; }
.engage-quote { font: 400 clamp(24px,2.5vw,36px)/1.45 var(--f-display); letter-spacing: -.025em; }
.engage-quote-mark { display: block; font-size: 72px; height: 52px; line-height: 1; color: var(--orange-ink); }
.engage-author { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.engage-author-avatar { width: 44px; height: 44px; }
.engage-author-text strong { display: block; font-size: 11px; }
.engage-author-text > span { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; }
.engage-cta-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 30px; font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--orange-ink); }
.engage-right { counter-reset: stage; }
.engage-card { position: relative; padding: 0 0 40px 54px; border-left: 1px solid #b7bfbe; margin-left: 16px; counter-increment: stage; }
.engage-card::before { content: '0' counter(stage); position: absolute; top: 0; left: -17px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--paper-deep); border: 1px solid #afb8b8; font: 10px var(--f-mono); transition: background 500ms, color 500ms, border-color 500ms; }
.engage-card.active::before { color: var(--white); background: var(--navy); border-color: var(--navy); }
.engage-card::after { content: ''; position: absolute; left: -1px; top: 34px; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; background: var(--orange); transition: transform 700ms var(--ease); }
.engage-card.active::after { transform: scaleY(1); }
.engage-card:last-child { border-color: transparent; padding-bottom: 0; }
.engage-card:last-child::after { display: none; }
.engage-card > .hex-icon { display: none; }
.engage-card-badge { display: block; font: 10px var(--f-mono); text-transform: uppercase; color: var(--orange-ink); letter-spacing: .1em; padding-top: 2px; margin-bottom: 12px; }
.engage-card-title { font: 500 24px/1.3 var(--f-display); letter-spacing: -.035em; }
.engage-card p { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.8; }
/* Comparison: native table with a clearly distinguished ORSLON column. */
/* The delivery section above already closes on its own 112px of padding, so a
   full --section-space on top of it left roughly 240px of empty page between
   the two. Trimmed at the top only; the bottom keeps the standard rhythm. */
/* A soft sage-stone of its own. This was the one section with no background at
   all, so it fell through to the page ivory and read as a gap between the warm
   sand above and the ivory CTA below. The green-leaning neutral is unused
   elsewhere on the page — #work leans blue, #process-section leans sand — and
   it gives the navy comparison panel a surface to sit on rather than float. */
#why-section { padding-block: clamp(40px, 4vw, 62px) var(--section-space);
  background:
    radial-gradient(ellipse 70% 55% at 88% 6%, #cfe0d64d, transparent 62%),
    radial-gradient(ellipse 55% 50% at 2% 96%, #dcd6c94a, transparent 66%),
    linear-gradient(168deg, #eef2ec 0%, #e5ebe4 58%, #e9ece3 100%);
  border-block: 1px solid #d8dfd6; }
.why-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8%; align-items: start; }
.why-left .section-p { font-size: 13px; margin: 24px 0 30px; }
.why-point { display: flex; gap: 13px; margin-top: 22px; }
.why-check { width: 19px; height: 19px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--orange-ink); flex-shrink: 0; margin-top: 3px; }
.why-point strong { font-size: 12px; font-weight: 600; }
.why-point p { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 5px; }
.why-right { position: sticky; top: 132px; padding-top: 37px; }
.compare-glass { width: 100%; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
th, td { text-align: left; vertical-align: top; padding: 24px 15px; border-bottom: 1px solid var(--line); line-height: 1.65; }
th { font-weight: 500; }
thead th { padding-top: 19px; font: 10px/1.6 var(--f-mono); }
thead th:first-child { width: 25%; }
thead th:nth-child(2) { width: 36%; }
td { color: var(--muted); }
td.us, th.cth-us { background: var(--navy); color: #edf2f7; border-color: #ffffff26; }
th.cth-us { border-top: 3px solid var(--orange); color: #ff8248; letter-spacing: .1em; font-size: 12px; }
/* Company: immersive architecture beside editorial values, not another card grid. */
#mission { padding-block: var(--section-space); color: var(--white); background: var(--night); }
.mission-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: stretch; }
.mission-image { position: relative; min-height: 650px; }
.mission-image > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.35); }
.mission-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #091726d9, #09172622 50%); }
.mission-image figcaption { position: absolute; z-index: 1; bottom: 32px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; font: 500 17px var(--f-display); letter-spacing: .18em; }
.mission-image figcaption span { font: 9px var(--f-mono); letter-spacing: 0; }
.mission-copy { padding-block: 10px; }
.mission-copy .section-eyebrow { color: var(--on-dark); }
.mission-copy > .section-p { margin: 25px 0 32px; color: var(--on-dark); font-size: 13px; }
.values-grid { display: flex; flex-direction: column; }
.value-card { border-top: 1px solid var(--dark-line); padding-block: 22px; display: grid; grid-template-columns: 110px 1fr; gap: 20px; }
.value-card h3 { font: 500 18px var(--f-display); }
.value-card p { font-size: 12px; line-height: 1.8; color: var(--on-dark); }
.team-cta { margin-top: 14px; }
.team-cta a { display: inline-block; padding-block: 12px; color: #ff8248; font-size: 12px; }
/* Final questions and invitation. */
/* Warm blush. The indigo-plum panel sits on it, and warm-against-violet gives
   the card more separation than the page ivory did. Distinct from the sand of
   #process-section and the sage of #why-section. */
#faq-pointer { padding-block: 65px; border-bottom: 1px solid #ecd9cc;
  background:
    radial-gradient(ellipse 62% 70% at 88% 8%, #ffd9c24d, transparent 60%),
    linear-gradient(165deg, #fcf2ea 0%, #f9e9dd 60%, #f7e6d9 100%); }
/* Only the panel goes dark — the section keeps the page colour around it. Deep
   indigo-plum because the espresso, petrol and navy darks are all spoken for
   elsewhere, and orange sits opposite violet, so the accent carries further
   here than on any other surface. Text colours are restated inside the panel;
   the inherited ones are tuned for the light body it sits on. */
#faq-pointer .faq-pointer-card {
  padding: 40px 44px; border-radius: 16px; border: 1px solid #ffffff1a;
  background:
    radial-gradient(ellipse 60% 78% at 6% 10%, #ff7a3522, transparent 58%),
    radial-gradient(ellipse 58% 66% at 94% 90%, #6b5bd224, transparent 62%),
    linear-gradient(140deg, #1d1636 0%, #181231 52%, #140f26 100%);
  box-shadow: 0 26px 60px -32px #1d163699;
  color: #ece9f5;
}
#faq-pointer .section-eyebrow { color: #a79dc4; }
#faq-pointer .fp-h { color: #f3f0fa; }
#faq-pointer .fp-h .grad { color: #ffa06a; }
#faq-pointer .fp-left p { color: #b2a9c9; }
/* A filled button rather than an underlined link, matching the primary CTA
   elsewhere on the page. */
#faq-pointer .fp-cta {
  gap: 14px; padding: 14px 24px; border-radius: var(--radius); border-bottom: 0;
  background: var(--orange); color: var(--night); font-weight: 600;
  transition: background var(--duration), transform var(--duration);
}
#faq-pointer .faq-pointer-card:hover .fp-cta { background: #ff8248; color: var(--night); transform: translateY(-2px); }
.faq-pointer-card { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.fp-left { max-width: 700px; }
.fp-h { font-size: clamp(25px,2.8vw,38px); }
.fp-left .section-eyebrow { margin-bottom: 16px; }
.fp-left p { font-size: 12px; color: var(--muted); margin-top: 16px; max-width: 600px; }
.fp-cta { display: inline-flex; gap: 25px; align-items: center; font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-block: 14px; white-space: nowrap; }
.faq-pointer-card:hover .fp-cta { color: var(--orange-ink); border-color: var(--orange-ink); }
/* Cool lavender mist, deliberately the opposite temperature to the blush above
   so the two sections never read as one wash. It also echoes the violet card it
   holds without competing with it. */
/* A light sky-blue close keeps the final call to action open and welcoming
   while still separating it clearly from the ivory editorial sections. */
#cta-main { padding-block: var(--section-space); background: #dff2f8; }
/* Selector carries the section id deliberately. interactive.js adds .glass to
   this box for the cursor sheen, and .glass sets a translucent white fill from
   a stylesheet that loads after this one — at equal specificity it won, which
   left white headings sitting on a near-white panel. */
#cta-main .cta-box { border: 1px solid #91ccdf; border-radius: 14px; box-shadow: 0 26px 70px -32px #397f9970; position: relative; isolation: isolate; padding: 68px 7%; background: radial-gradient(ellipse at 94% 8%, #ffffffcc, transparent 48%), linear-gradient(108deg, #eefaff 0%, #d9f2fb 52%, #c4e8f5 100%); color: #102d43; overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cta-box::after { content: ''; z-index: -1; position: absolute; width: 480px; height: 480px; border: 1px solid #287a9820; border-radius: 50%; right: -190px; top: -30px; box-shadow: 0 0 0 80px #ffffff28, 0 0 0 160px #287a9808; }
.cta-inner { max-width: 750px; }
.cta-inner > .section-eyebrow { color: #3d6376; }
.cta-h2 { font-size: clamp(34px,4vw,56px); }
.cta-p { color: #405f70; font-size: 14px; margin-top: 24px; max-width: 640px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
#cta-main .btn-dk-outline { color: #17384b; border-color: #6aa9bf; background: #ffffff5c; }
#cta-main .btn-dk-outline:hover { color: #0d2b3e; border-color: #2f7792; background: #ffffffa3; }
.cta-trust { display: flex; flex-wrap: wrap; gap: 9px; color: #476879; font-size: 10px; margin-top: 26px; }
.cta-trust .status-dot { margin-right: 7px; }
/* Footer */
#footer { padding-top: 60px; padding-bottom: 24px; border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: .85fr 2fr; gap: 10%; }
.footer-wordmark { width: 170px; }
.footer-desc { font-size: 12px; color: var(--muted); max-width: 240px; margin-top: 24px; }
.footer-cols { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 30px; }
.footer-col-h { font: 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin: 4px 0 20px; }
.footer-col > a { display: flex; align-items: center; gap: 8px; padding-block: 6px; font-size: 11px; color: var(--muted); line-height: 1.6; }
.footer-col > a:hover { color: var(--orange-ink); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 50px; padding-top: 22px; font: 9px var(--f-mono); color: var(--muted); }
/* Motion never conceals content. Reveals are applied only while entering the viewport. */
@keyframes brand-entrance { from { opacity: .3; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes enter { from { transform: translateY(16px); } to { transform: translateY(0); } }
@keyframes metric-enter { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes card-enter { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hero-light-drift { from { transform:translate3d(-1.2%,0,0) scale(1.025); } to { transform:translate3d(1.2%,-1%,0) scale(1.045); } }
@keyframes hero-pillar-rise { from { opacity:.25; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
  .letter-reveal:not(.letters-in) .reveal-letter { opacity:0; transform:translateY(.7em) rotateX(-72deg); filter:blur(5px); }
  .letter-reveal.letters-in .reveal-letter { animation:reveal-letter-in 560ms var(--ease) both; animation-delay:var(--letter-delay); }
  .hero-stage::before { animation:hero-light-drift 12s ease-in-out infinite alternate; }
  .hero-pillar { animation:hero-pillar-rise 750ms var(--ease) both; transition:transform .35s var(--ease),box-shadow .35s var(--ease); }
  .hero-pillar:nth-child(2) { animation-delay:90ms; }
  .hero-pillar:nth-child(3) { animation-delay:180ms; }
  .hero-pillar:hover { transform:translateY(-5px); box-shadow:0 18px 36px -24px #16354a99,inset 0 1px #fff; }
  .is-entering { animation: enter 650ms var(--ease) both; }
  .hm.is-entering .hm-num, .stat-item.is-entering .stat-num { animation: metric-enter 700ms var(--ease) both; }
  /* Cards arrive in reading order. The delay is capped so a filtered grid never
     leaves the last card waiting behind a long queue. */
  .case-card.is-entering { animation: card-enter 720ms var(--ease) both; animation-delay: calc(min(var(--card-index, 0), 5) * 70ms); }
}
/* Tilt is a pointer affordance only: it must not survive a reduced-motion switch. */
@media (prefers-reduced-motion: reduce) {
  .case-card.is-tilting, .engage-card.is-tilting { transform: none; }
  .case-card.is-tilting::before { opacity: 0; }
}
@media (min-width:1600px) { .hero-grid { padding-block:34px 46px; } .hero-foundation { padding-bottom:38px; } }
@media (max-width: 1100px) {
  .nav-inner { gap: 20px; } .nav-links { gap: 20px; } .nav-right { gap: 18px; } .nav-sep { display: none; }
  .brand-lockup { width: 145px; } .nav-link-text { display: none; }
  .hero-h1 { font-size: 54px; } .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 22px; }
  #services-home > .container { column-gap: 6%; grid-template-columns: .85fr 1.3fr; }
  .pr-row { gap: 10px; grid-template-columns: 24px 24px 1fr 22px; }
  .cases-grid { column-gap: 35px; } .case-card { grid-template-columns: 28px 1fr; gap: 12px; }
  .why-grid { grid-template-columns: 1fr; gap: 42px; } .why-left { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8%; }
  .why-left .section-eyebrow { grid-column: 1 / -1; } .why-left .section-p { grid-column: 1; }
  .why-points { grid-column: 2; grid-row: 2 / 4; } .why-point:first-child { margin-top: 0; }
  .why-right { position: static; padding: 0; } th, td { padding: 23px; }
  .value-card { grid-template-columns: 1fr; gap: 10px; } .mission-image { min-height: 600px; }
  .mission-image figcaption { flex-direction: column; align-items: start; gap: 12px; }
  .footer-inner { gap: 6%; }
}
@media (max-width: 900px) {
  .nav-inner { height: 76px; gap: 18px; }
  .hamburger { display: flex; } .nav-right { margin-left: auto; } .nav-brand { margin-right: 0; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); padding: 22px var(--gutter); border-bottom: 1px solid var(--line); max-height: calc(100dvh - 76px); overflow-y: auto; }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; box-shadow: var(--shadow); }
  .nav-links > li > a { min-height: 54px; font: 500 22px var(--f-display); border-bottom: 1px solid var(--line); }
  .nav-dd-menu, .nav-dd-chev { display: none; }
  .mobile-nav-contact { display: block; }
  .hero-grid { padding-top:32px; padding-bottom:34px; grid-template-columns:1fr; }
  .hero-h1 { font-size: clamp(48px,7.2vw,64px); } .hero-sub { max-width: 620px; }
  .hero-pillars { width:87%; gap:10px; }
  .hero-pillar-sub { font-size: 10px; } .hero-pillar-title { font-size: 11px; }
  .hm { padding-left: 22px; } .hm-lbl { font-size: 9px; } .trust-inner { justify-content: flex-start; }
  #services-home > .container { display: block; } .services-header { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 38px; }
  .services-header .section-h2 { font-size: 38px; } .services-header .section-p { margin: 0; }
  .pr-row { grid-template-columns: 32px 36px 1fr 30px; padding-block: 24px; } .pr-title { font-size: 24px; }
  .stat-item { padding-inline: 22px; } .stat-sub { font-size: 10px; }
  .sector-head { gap: 8%; } .engage-grid { gap: 8%; }
  .mission-layout { gap: 7%; } .footer-inner { grid-template-columns: 1fr; gap: 42px; }
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; } .footer-desc { max-width: 360px; margin-top: 16px; }
}
@media (max-width: 700px) {
  :root { --gutter: 24px; }
  .nav-inner { height: 70px; gap: 15px; } .nav-brand { margin-right: auto; } .brand-lockup { width: 138px; }
  .nav-right { display: none; } .lang-btn { gap: 5px; } .lang-btn > svg:first-child { display: none; }
  .hero-topline { display:none; } .hero-edition { display:none; }
  .hero-stage { background:linear-gradient(155deg,#f2f6f6 0 55%,#d0dce0 55.1% 100%); }
  .hero-stage::before { background:radial-gradient(ellipse at 18% 7%,#fff 0,transparent 43%),radial-gradient(ellipse at 82% 68%,#ef8a4930 0,transparent 42%),radial-gradient(ellipse at 100% 38%,#7d98a657 0,transparent 42%); }
  .hero-grid { display:block; padding-top:32px; padding-bottom:34px; }
  .hero-h1 { font-size: clamp(40px,8.75vw,60px); line-height: 1.09; letter-spacing: -.06em; }
  .hero-sub { font-size:13px; line-height:1.9; margin-top:24px; max-width:520px; padding-left:14px; }
  .hero-actions { margin-top: 28px; gap: 10px; } .hero-actions a { padding: 13px 17px; font-size: 11px; gap: 16px; }
  .hero-scroll { display: none; }
  .hero-foundation { padding-bottom:27px; } .hero-pillars { width:100%; gap:9px; flex-wrap:wrap; padding-top:25px; }
  .hero-pillar { flex-basis:130px; padding:13px; } .hero-pillar-label { font-size:9px; } .hero-pillar-title { font-size:11px; } .hero-pillar-sub { font-size:10px; }
  .hero-metrics { grid-template-columns: 1fr 1fr; row-gap: 28px; padding-block: 30px; }
  .hm:nth-child(3) { border: 0; padding-left: 0; } .hm-num { font-size: 36px; } .hm-lbl { font-size: 9px; }
  .trust-inner { padding-block: 24px; gap: 18px 24px; } .trust-label-text { max-width: none; width: 100%; font-size: 8px; }
  .trust-pill { font-size: 11px; } .services-header { display: block; } .services-header .section-h2 { max-width: 420px; font-size: 38px; }
  .services-header .section-p { margin-top: 24px; } .section-eyebrow { margin-bottom: 20px; }
  .pr-row { grid-template-columns: 22px 1fr 24px; gap: 10px; padding-block: 24px; } .pr-ico { display: none; }
  .pr-main { grid-column: 2; } .pr-tags { grid-column: 2; gap: 5px 10px; font-size: 8px; } .pr-tags > span:not(:last-child)::after { margin-left: 10px; }
  .pr-arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d9dedd; border-radius: 50%; grid-column: 3; } .pr-title { font-size: 23px; } .pr-sub { font-size: 12px; }
  .services-all .btn-secondary { font-size: 12px; } #stats-band { padding-block: 40px; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 30px 0; } .stat-item { padding-inline: 20px; }
  .stat-item:nth-child(3) { border: 0; padding-left: 0; } .stat-num { font-size: 37px; } .stat-label { font-size: 12px; } .stat-sub { font-size: 11px; }
  .sector-head { grid-template-columns: 1fr; gap: 25px; } .sector-head .section-h2 { max-width: 480px; }
  .solutions-filter-bar { gap: 0; margin-top: 28px; } .filter-tab { padding: 13px 12px; font-size: 11px; }
  .cases-grid { grid-template-columns: 1fr; } .case-card { padding: 25px 18px; grid-template-columns: 22px 1fr; }
  .case-quote { font-size: 27px; } .case-body { font-size: 13px; } .cp-n { font-size: 23px; }
  .case-tags { gap: 5px; } .case-tag { font-size: 8px; } .cases-foot { font-size: 11px; }
  .engage-grid { grid-template-columns: 1fr; gap: 47px; margin-top: 30px; } .engage-left { position: static; }
  .engage-quote { font-size: 28px; } .engage-author-text > span { font-size: 9px; } .engage-cta-link { margin-top: 20px; }
  .engage-card { padding-left: 40px; } .engage-card-title { font-size: 23px; }
  .why-left { display: block; } .why-left .section-p { margin-bottom: 25px; } .why-point { margin-top: 23px; }
  .why-grid { gap: 32px; } th, td { padding: 17px 10px; font-size: 10px; overflow-wrap: anywhere; }
  thead th { font-size: 9px; } th.cth-us { font-size: 10px; } thead th:first-child { width: 26%; } thead th:nth-child(2) { width: 35%; }
  .mission-layout { grid-template-columns: 1fr; gap: 38px; } .mission-image { height: 350px; min-height: 0; }
  .mission-image figcaption { flex-direction: row; align-items: center; } .mission-image > img { object-position: 50% 65%; }
  .value-card { grid-template-columns: 85px 1fr; gap: 15px; } .value-card h3 { font-size: 17px; }
  .faq-pointer-card { flex-direction: column; align-items: flex-start; gap: 23px; } #faq-pointer { padding-block: 48px; }
  .cta-box { padding: 38px 25px; } .cta-h2 { font-size: 35px; } .cta-p { font-size: 13px; }
  .cta-actions { gap: 10px; } .cta-actions a { font-size: 12px; padding-inline: 16px; }
  .cta-trust { font-size: 9px; gap: 8px; } .cta-trust > span:first-child { width: 100%; } .cta-trust > span:nth-child(2) { display: none; }
  .footer-cols { grid-template-columns: 1.4fr 1fr; gap: 30px 20px; } .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col > a { min-height: 44px; font-size: 11px; } .footer-bottom { margin-top: 32px; }
}
@media (max-width: 380px) {
  :root { --gutter: 19px; }
  .nav-inner { gap: 11px; } .brand-lockup { width: 122px; }
  .hero-h1 { font-size: 38px; } .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-pillars { gap: 22px; } .hero-pillar { flex-basis: 110px; } .hero-pillar-title { font-size: 10px; }
  .pr-title { font-size: 21px; } .case-proof { flex-wrap: wrap; gap: 6px 12px; }
  .section-h2 { font-size: 32px; } .services-header .section-h2 { font-size: 34px; }
  .cta-box { padding-inline: 20px; } .cta-h2 { font-size: 30px; } .cta-actions { flex-direction: column; }
  .value-card { grid-template-columns: 1fr; } .mission-image figcaption { left: 20px; right: 20px; } .mission-image figcaption span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  #navbar, #scroll-progress, .hero-scroll, .solutions-filter-bar { display: none; }
  .case-card[hidden] { display: grid !important; }
  .services-header, .engage-left, .why-right { position: static; }
}
/* With scripting unavailable, expose native navigation and all solutions. */
html:not(.js-enabled) .hamburger,
html:not(.js-enabled) .lang-switch,
html:not(.js-enabled) .solutions-filter-bar { display: none; }
@media (max-width: 900px) {
  html:not(.js-enabled) #navbar { position: relative; }
  html:not(.js-enabled) .nav-inner { height: auto; flex-wrap: wrap; padding-block: 18px; }
  html:not(.js-enabled) .nav-links { display: flex; position: static; flex-wrap: wrap; gap: 10px 24px; width: 100%; padding: 0; border: 0; }
  html:not(.js-enabled) .nav-links > li > a { font-size: 15px; min-height: 44px; border: 0; }
  html:not(.js-enabled) .nav-right { display: flex; margin-left: auto; }
  html:not(.js-enabled) .nav-cta { font-size: 11px; padding-inline: 12px; }
}