:root {
  color-scheme: light;
  --ink: #0c1f38;
  --muted: #52647a;
  --blue: #0b5cad;
  --blue-deep: #073d79;
  --blue-soft: #eaf3fb;
  --line: #d8e2ec;
  --surface: #f6f9fc;
  --white: #fbfdff;
  --radius: 14px;
  --shadow: 0 20px 55px rgba(14, 52, 89, 0.13);
  --content: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Segoe UI Variable", "Aptos", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (pointer: fine) {
  html,
  body,
  input,
  select,
  textarea {
    cursor: url("./assets/icons/cursor-black.svg?v=5") 5 4, auto;
  }

  a,
  button,
  .menu-button,
  select,
  [role="button"] {
    cursor: url("./assets/icons/cursor-black.svg?v=5") 5 4, pointer;
  }
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid #58a9f4; outline-offset: 4px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.no-break { white-space: nowrap; }

.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;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 20;
  padding: 12px 18px;
  color: var(--white);
  background: var(--blue-deep);
  border-radius: 8px;
}

.skip-link:focus { top: 12px; }

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 92px;
  pointer-events: none;
}

.nav-hover-zone {
  display: none;
}

.nav-shell {
  position: relative;
  width: 100%;
  min-height: 92px;
  margin: 0 auto;
  padding: 0 clamp(30px, 4vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 0;
  background: transparent;
  transform: none;
  pointer-events: auto;
}

.site-header.inner-page .nav-shell {
  background: transparent;
  backdrop-filter: none;
}

.site-header.inner-page .primary-nav a,
.site-header.inner-page .primary-nav .nav-cta { color: var(--white); text-shadow: 0 1px 3px rgba(4, 18, 33, 0.92), 0 3px 16px rgba(4, 18, 33, 0.72); }

.site-header.inner-page .brand-logo { filter: drop-shadow(0 2px 9px rgba(4, 18, 33, 0.48)); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.brand-logo { width: 58px; height: 58px; flex: 0 0 auto; }

.header-brand-word {
  color: var(--white);
  font-family: "Baskerville", "Times New Roman", Georgia, serif;
  font-size: clamp(22px, 1.65vw, 31px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  text-shadow: 0 2px 14px rgba(3, 18, 34, 0.72);
}

.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { color: var(--white); font-size: 16px; letter-spacing: -0.02em; }
.brand-copy small { margin-top: 4px; color: #a8cdeb; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }

.primary-nav {
  position: absolute;
  left: 409px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 80px;
  white-space: nowrap;
}

.primary-nav a { position: relative; padding: 34px 0; color: var(--white); font-size: clamp(14px, 0.9vw, 17px); font-weight: 450; text-shadow: 0 1px 10px rgba(4,18,33,0.65); transition: font-weight 140ms ease, opacity 140ms ease; }
.primary-nav a[data-route] { display: grid; }
.primary-nav .nav-label { position: relative; display: inline-block; }
.primary-nav .nav-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(111, 211, 255, 0.88) 18%, #b9ecff 50%, rgba(111, 211, 255, 0.88) 82%, transparent 100%);
  box-shadow: 0 0 5px rgba(78, 190, 255, 0.92), 0 0 14px rgba(61, 174, 255, 0.62);
  transform: translateX(-50%);
  opacity: 0;
  transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
}
.primary-nav a[data-route] .nav-label,
.primary-nav a[data-route]::after { grid-area: 1 / 1; }
.primary-nav a[data-route]::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 800;
  pointer-events: none;
  user-select: none;
}
.primary-nav a:hover, .primary-nav a.active { color: var(--white); font-weight: 800; }
.primary-nav a:hover .nav-label::after,
.primary-nav a.active .nav-label::after {
  width: calc(100% + 10px);
  opacity: 1;
}
.mobile-menu-brand { display: none; }

.primary-nav .nav-cta {
  padding: 34px 0;
  color: var(--white);
  background: transparent;
  border-radius: 0;
}
.primary-nav .nav-cta:hover, .primary-nav .nav-cta.active { color: var(--white); background: transparent; font-weight: 800; }

.menu-button { display: none; align-items: center; gap: 12px; border: 0; color: var(--white); background: none; padding: 10px; cursor: pointer; }
.menu-label { font-size: 12px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
.menu-lines { display: block; width: 24px; }
.menu-lines span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--white); transition: transform 180ms ease, opacity 180ms ease; }
.menu-button[aria-expanded="true"] .menu-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: var(--white);
  background: #07111f;
}

.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 15, 28, 0.92) 0%, rgba(5, 20, 39, 0.63) 43%, rgba(5, 15, 28, 0.18) 72%), linear-gradient(0deg, rgba(5, 15, 28, 0.72), transparent 50%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(1640px, calc(100% - 96px));
  margin: 0 auto;
  padding: clamp(250px, 27vh, 310px) 0 64px;
}

.eyebrow { margin: 0 0 18px; color: #a8cdeb; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 830px; margin-bottom: 22px; font-size: clamp(42px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.055em; }
.hero-copy { max-width: 590px; margin-bottom: 30px; color: #dce9f5; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline-color: #78bfff; }
.button-primary { color: var(--white); background: var(--blue); }
.button-primary:hover { background: #094f96; }
.button-light { color: var(--ink); background: var(--white); }
.button-outline { color: var(--white); border-color: rgba(255,255,255,0.54); background: rgba(9, 30, 53, 0.22); }
.button-outline:hover { background: rgba(9, 30, 53, 0.65); }

.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }
.section-soft { background: var(--surface); }
.container { width: var(--content); margin: 0 auto; }
.section-heading { max-width: 720px; margin-bottom: 50px; }
.section-heading h2 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.045em; }
.section-heading p { max-width: 650px; margin-bottom: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }

.audience-grid { display: grid; grid-template-columns: 1.14fr 0.86fr; gap: 18px; }
.audience-panel {
  position: relative;
  isolation: isolate;
  min-height: 410px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius);
  overflow: hidden;
}
.audience-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.audience-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.audience-panel .panel-content,
.audience-panel .text-link { position: relative; z-index: 1; }
.audience-panel h3 { max-width: 520px; margin-bottom: 14px; font-size: clamp(27px, 3vw, 40px); letter-spacing: -0.035em; }
.audience-panel p { max-width: 520px; color: inherit; opacity: 0.78; line-height: 1.65; }
.audience-services {
  max-width: 560px;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
}
.audience-services li {
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
.audience-panel.primary .audience-services li { color: rgba(255, 255, 255, 0.9); background: rgba(7, 38, 70, 0.34); border-color: rgba(255, 255, 255, 0.26); }
.audience-panel.secondary .audience-services li { color: #173a5e; background: rgba(255, 255, 255, 0.58); border-color: rgba(45, 99, 151, 0.2); }
.audience-panel.primary { color: var(--white); background: var(--blue-deep); }
.audience-panel.primary::after { background: linear-gradient(90deg, rgba(6, 43, 81, 0.98) 0%, rgba(6, 43, 81, 0.9) 42%, rgba(6, 43, 81, 0.16) 100%); }
.audience-panel.primary .audience-media { object-position: 62% center; }
.audience-panel.secondary { color: var(--ink); background: var(--blue-soft); border: 1px solid #cfe2f3; }
.audience-panel.secondary::after { background: linear-gradient(90deg, rgba(234, 243, 251, 0.99) 0%, rgba(234, 243, 251, 0.94) 44%, rgba(234, 243, 251, 0.22) 100%); }
.audience-panel.secondary .audience-media { object-position: 61% center; }
.text-link { display: inline-flex; width: fit-content; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-weight: 750; }

.capabilities-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.8fr); gap: clamp(40px, 5vw, 76px); align-items: stretch; }
.capabilities-main .section-heading { margin-bottom: 26px; }
.capabilities-main .service-list { column-gap: 36px; }
.capabilities-media { min-height: 540px; margin: -28px 0; overflow: hidden; border-radius: var(--radius); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%); }
.capabilities-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; filter: saturate(0.72) contrast(0.96); }

.service-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; }
.service-item { padding: 30px 0; border-bottom: 1px solid var(--line); }
.service-item:nth-child(-n+2) { border-top: 1px solid var(--line); }
.service-item h3 { margin-bottom: 9px; font-size: 21px; }
.service-item p { margin-bottom: 0; color: var(--muted); line-height: 1.65; }

.process-wrap { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 80px; align-items: start; }
.process-intro {
  position: static;
  align-self: center;
}
.process-intro h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.045em; }
.process-intro p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.process-media { margin: 30px 0 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--blue-soft); }
.process-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.45) contrast(0.92); opacity: 0.86; }
.process-step { padding: 28px 0; border-bottom: 1px solid var(--line); }
.process-step:first-child { border-top: 1px solid var(--line); }
.process-step h3 { margin-bottom: 10px; font-size: 22px; }
.process-step p { margin: 0; color: var(--muted); line-height: 1.6; }

.category-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.category-card {
  position: relative;
  isolation: isolate;
  min-height: 255px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.category-card > h3, .category-card > p { position: relative; z-index: 2; }
.category-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.opportunity-section .category-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.category-card:nth-child(1), .category-card:nth-child(4) { grid-column: span 7; }
.category-card:nth-child(2), .category-card:nth-child(3) { grid-column: span 5; }
.category-card:nth-child(1) { color: var(--white); background: #071f3b; border-color: transparent; }
.opportunity-section .category-card:nth-child(1)::after { background: linear-gradient(0deg, rgba(5, 29, 55, 0.98) 0%, rgba(5, 29, 55, 0.78) 42%, rgba(5, 29, 55, 0.05) 100%); }
.opportunity-section .category-card:nth-child(2)::after { background: linear-gradient(0deg, rgba(251, 253, 255, 0.99) 0%, rgba(251, 253, 255, 0.93) 43%, rgba(251, 253, 255, 0.06) 100%); }
.category-card:nth-child(3) { background: var(--blue-soft); }
.opportunity-section .category-card:nth-child(3)::after { background: linear-gradient(0deg, rgba(234, 243, 251, 0.99) 0%, rgba(234, 243, 251, 0.9) 44%, rgba(234, 243, 251, 0.04) 100%); }
.opportunity-section .category-card:nth-child(4)::after { background: linear-gradient(0deg, rgba(251, 253, 255, 0.99) 0%, rgba(251, 253, 255, 0.94) 46%, rgba(251, 253, 255, 0.08) 100%); }
.category-card h3 { margin-bottom: 9px; font-size: 24px; letter-spacing: -0.02em; }
.category-card p { max-width: 460px; margin-bottom: 0; color: inherit; opacity: 0.72; line-height: 1.55; }

.product-entry-layout { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); column-gap: clamp(54px, 8vw, 112px); }
.product-entry-intro {
  position: static;
  align-self: center;
}
.product-entry-intro h2 { max-width: 420px; margin-bottom: 20px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.045em; }
.product-entry-intro p { max-width: 430px; margin-bottom: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.product-path-list { border-top: 1px solid var(--line); }
.product-path { padding: 31px 0 34px; border-bottom: 1px solid var(--line); }
.product-path-audience { margin-bottom: 12px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.product-path h3 { margin-bottom: 10px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.03em; }
.product-path > p:last-child { max-width: 680px; margin-bottom: 0; color: var(--muted); line-height: 1.68; }
.brief-checks { grid-column: 1 / -1; margin-top: 64px; padding-top: 25px; border-top: 1px solid var(--ink); }
.brief-checks-title { margin-bottom: 20px; color: var(--ink); font-size: 14px; font-weight: 750; }
.brief-checks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.brief-checks-grid span { color: var(--muted); font-size: 15px; line-height: 1.5; }

.statement { position: relative; isolation: isolate; overflow: hidden; padding: 90px 0; color: var(--white); background: var(--blue-deep); }
.statement .container { position: relative; z-index: 2; }
.statement-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; opacity: 0.72; filter: saturate(0.5) contrast(0.88); }
.visual-statement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 61, 121, 1) 0%, rgba(7, 61, 121, 0.97) 48%, rgba(7, 61, 121, 0.56) 100%); }
.statement blockquote { max-width: 920px; margin: 0; font-size: clamp(31px, 4.5vw, 58px); font-weight: 750; line-height: 1.12; letter-spacing: -0.045em; }

.page-hero { padding: 150px 0 72px; background: var(--surface); border-bottom: 1px solid var(--line); }
.page-hero-inner { width: var(--content); margin: 0 auto; }
.page-hero h1 { max-width: 900px; color: var(--ink); font-size: clamp(42px, 6vw, 70px); line-height: 1.07; }
.page-hero p { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 20px; line-height: 1.6; }

/* About page: restrained midnight motion, quiet editorial cards and a soft Canada–China accent. */
.about-hero {
  position: relative;
  isolation: isolate;
  height: 500px;
  overflow: hidden;
  padding: 144px 0 60px;
  border: 0;
  background:
    radial-gradient(circle at 88% 96%, rgba(238, 139, 88, 0.13), transparent 24%),
    radial-gradient(circle at 76% 56%, rgba(29, 116, 181, 0.2), transparent 29%),
    radial-gradient(circle at 58% 8%, rgba(94, 182, 238, 0.1), transparent 24%),
    linear-gradient(120deg, #020a14 0%, #051526 51%, #071d34 100%);
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(143, 203, 241, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 203, 241, 0.08) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, transparent 30%, #000 72%, transparent 100%);
}
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2, 10, 20, 0.76) 0%, rgba(2, 10, 20, 0.25) 52%, rgba(2, 10, 20, 0.1) 100%);
}
.about-hero .page-hero-inner { position: relative; z-index: 2; }
.about-hero h1 { max-width: 840px; margin: 0 0 22px; color: var(--white); font-family: "Baskerville", "Times New Roman", Georgia, serif; font-weight: 400; line-height: 0.98; letter-spacing: -0.035em; }
.about-hero > .page-hero-inner > p:not(.about-eyebrow) { max-width: 650px; color: #c8d8e7; font-size: 18px; line-height: 1.55; }
.about-eyebrow,
.about-section-label { margin: 0 0 18px; color: #55b9f1; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; }
.about-hero-signals { margin-top: 29px; display: flex; align-items: center; gap: 0; color: #d7e7f4; }
.about-hero-signals span { padding: 0 22px; border-left: 1px solid rgba(180, 214, 238, 0.3); font-size: 10px; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; }
.about-hero-signals span:first-child { padding-left: 0; border-left: 0; }
.about-sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.about-sky::after { content: ""; position: absolute; right: 4%; top: 45%; width: min(46vw, 820px); height: 1px; border-radius: 999px; opacity: 0.4; background: linear-gradient(90deg, transparent, rgba(66, 166, 225, 0.2) 42%, rgba(125, 220, 255, 0.88)); box-shadow: 0 0 13px rgba(82, 188, 245, 0.32); transform: rotate(-13deg); transform-origin: right center; }
.about-orbit { position: absolute; right: -6%; top: 4%; width: 52vw; height: 52vw; border: 1px solid rgba(93, 181, 238, 0.16); border-radius: 50%; box-shadow: 0 0 80px rgba(52, 160, 226, 0.07), inset 0 0 80px rgba(52, 160, 226, 0.05); }
.about-streak { position: absolute; height: 2px; border-radius: 999px; transform: rotate(-13deg); transform-origin: right center; filter: drop-shadow(0 0 8px rgba(104, 205, 255, 0.9)); }
.about-streak::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #e8f8ff; box-shadow: 0 0 12px 4px rgba(83, 194, 255, 0.9), 0 0 32px 12px rgba(83, 194, 255, 0.32); transform: translateY(-50%); }
.about-streak-main { right: 7%; top: 38%; width: min(43vw, 760px); background: linear-gradient(90deg, transparent, rgba(44, 154, 225, 0.1) 22%, rgba(112, 211, 255, 0.82)); animation: aboutMeteor 7s cubic-bezier(0.2, 0.7, 0.25, 1) infinite; }
.about-streak-soft { right: 20%; top: 63%; width: min(28vw, 480px); height: 1px; opacity: 0.32; background: linear-gradient(90deg, transparent, rgba(92, 194, 247, 0.72)); animation: aboutMeteorSoft 9s 1.4s ease-in-out infinite; }
@keyframes aboutMeteor { 0%, 20% { opacity: 0; transform: translate(160px, -32px) rotate(-13deg) scaleX(0.65); } 38%, 72% { opacity: 1; transform: translate(0, 0) rotate(-13deg) scaleX(1); } 88%, 100% { opacity: 0; transform: translate(-110px, 22px) rotate(-13deg) scaleX(1.08); } }
@keyframes aboutMeteorSoft { 0%, 34% { opacity: 0; transform: translate(90px, -18px) rotate(-13deg); } 50%, 76% { opacity: 0.34; transform: translate(0, 0) rotate(-13deg); } 100% { opacity: 0; transform: translate(-70px, 14px) rotate(-13deg); } }

.about-content-flow {
  position: relative;
  isolation: isolate;
  display: flow-root;
  background:
    radial-gradient(ellipse at 15% 18%, rgba(238, 139, 88, 0.1) 0%, rgba(238, 139, 88, 0.04) 30%, transparent 58%),
    radial-gradient(ellipse at 82% 84%, rgba(238, 139, 88, 0.09) 0%, rgba(238, 139, 88, 0.035) 32%, transparent 60%),
    linear-gradient(180deg, rgba(251, 252, 253, 0.92) 0%, rgba(250, 252, 253, 0.38) 23%, rgba(248, 250, 252, 0.08) 50%, rgba(249, 249, 248, 0.5) 72%, rgba(250, 248, 246, 0.82) 86%, rgba(248, 250, 252, 0.98) 100%),
    url("./assets/images/about-approach-dragon-maple.webp") center 61% / 100% auto no-repeat,
    #f8fafc;
}
.about-content-flow > .cta-band {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(139, 190, 222, 0.2);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(116, 194, 238, 0.2), transparent 48%),
    radial-gradient(ellipse at 88% 92%, rgba(238, 155, 105, 0.09), transparent 42%),
    linear-gradient(120deg, #173d5d 0%, #1b4b70 54%, #12344f 100%);
  box-shadow: 0 26px 68px rgba(18, 54, 82, 0.14), inset 0 1px rgba(255, 255, 255, 0.1);
}
.about-content-flow > .cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 38%, rgba(174, 220, 247, 0.055) 50%, transparent 62%),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, 190px 100%;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.about-content-flow > .cta-band .button-light {
  color: #153a58;
  background: rgba(250, 253, 255, 0.94);
  box-shadow: 0 10px 28px rgba(3, 26, 45, 0.17);
}
.about-content-flow::before,
.about-content-flow::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: 260px;
  pointer-events: none;
}
.about-content-flow::before {
  top: 0;
  background: linear-gradient(180deg, rgba(251, 252, 253, 0.96), rgba(249, 251, 252, 0));
}
.about-content-flow::after {
  bottom: 0;
  height: 420px;
  background:
    radial-gradient(ellipse at 72% 62%, rgba(238, 139, 88, 0.075), transparent 62%),
    linear-gradient(0deg, rgba(248, 250, 252, 1) 0%, rgba(249, 249, 248, 0.9) 30%, rgba(250, 248, 246, 0.46) 64%, rgba(248, 250, 252, 0) 100%);
}
.about-story-section { position: relative; z-index: 1; background: transparent; }
.about-story-layout { display: grid; grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.72fr) minmax(150px, 0.48fr); gap: clamp(24px, 3vw, 42px); align-items: stretch; }
.about-story-intro { align-self: center; padding-right: 10px; }
.about-story-intro h2 { margin-bottom: 22px; font-family: "Baskerville", "Times New Roman", Georgia, serif; font-size: clamp(36px, 3.6vw, 50px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.about-story-intro > p:last-child { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.about-value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-value-card {
  position: relative;
  isolation: isolate;
  min-height: 218px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(190, 213, 230, 0.78);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(253,254,255,0.96), rgba(246,251,254,0.82));
  box-shadow: 0 12px 30px rgba(29, 70, 107, 0.035), inset 0 1px rgba(255,255,255,0.92);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, box-shadow 260ms ease;
}
.about-value-card:nth-child(2),
.about-value-card:nth-child(3) {
  border-color: rgba(227, 202, 191, 0.48);
  background: linear-gradient(145deg, rgba(255,254,253,0.96), rgba(254,248,245,0.8));
}
.about-value-card > *,
.about-principles-grid article > * { position: relative; z-index: 1; }
.about-value-card:hover,
.about-principles-grid article:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 190, 222, 0.38);
  box-shadow: 0 16px 36px rgba(31, 83, 126, 0.07), inset 0 1px rgba(255,255,255,0.94);
}
.about-value-card:nth-child(2):hover,
.about-value-card:nth-child(3):hover,
.about-principles-grid article:nth-child(2):hover,
.about-principles-grid article:nth-child(4):hover {
  border-color: rgba(224, 164, 143, 0.36);
  box-shadow: 0 16px 36px rgba(122, 73, 54, 0.055), inset 0 1px rgba(255,255,255,0.94);
}
.about-value-card h3 { margin-bottom: 10px; font-family: "Baskerville", "Times New Roman", Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.about-value-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58; }
.about-landscape { position: relative; min-height: 450px; overflow: hidden; border: 1px solid #dfd6ca; border-radius: 13px; background: #eee5d9; box-shadow: 0 14px 34px rgba(84, 71, 55, 0.08); }
.about-landscape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.about-landscape::after { content: ""; position: absolute; inset: 58% 0 0; background: linear-gradient(0deg, rgba(245,239,230,0.96), rgba(245,239,230,0)); }
.about-landscape p { position: absolute; z-index: 1; left: 24px; right: 20px; bottom: 25px; margin: 0; color: #667783; font-size: 9px; line-height: 1.9; letter-spacing: 0.2em; text-transform: uppercase; }
.about-landscape strong { color: #2d5269; font-weight: 800; }

.about-principles-section {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent;
}
.about-principles-section > .container { position: relative; z-index: 1; }
.about-principles-heading { margin-bottom: 48px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 80px; align-items: end; }
.about-principles-heading h2 { margin: 0; font-family: "Baskerville", "Times New Roman", Georgia, serif; font-size: clamp(36px, 4vw, 54px); font-weight: 400; line-height: 1.03; letter-spacing: -0.035em; }
.about-principles-heading > p { margin: 0; color: var(--muted); line-height: 1.72; }
.about-principles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.about-principles-grid article {
  position: relative;
  isolation: isolate;
  min-height: 245px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(199, 216, 228, 0.66);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(253,254,255,0.92), rgba(247,251,254,0.76));
  box-shadow: inset 0 1px rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, box-shadow 260ms ease;
}
.about-principles-grid article:nth-child(2),
.about-principles-grid article:nth-child(4) { border-color: rgba(231, 186, 173, 0.28); background: linear-gradient(145deg, rgba(255,254,253,0.92), rgba(254,249,247,0.74)); }
.about-principles-grid h3 { margin-bottom: 11px; font-family: "Baskerville", "Times New Roman", Georgia, serif; font-size: 20px; line-height: 1.18; }
.about-principles-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.62; }

.request-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 458px;
  padding: 100px 0 24px;
  border-bottom: 0;
  background: #020c18 url("./assets/images/request-hero.webp") center right / cover no-repeat;
}
.request-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(1, 10, 21, 0.38) 0%, rgba(2, 14, 28, 0.12) 55%, rgba(2, 14, 28, 0.06) 100%);
}
.request-hero .page-hero-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - clamp(64px, 9vw, 150px));
}
.request-hero .request-eyebrow {
  margin: 0 0 13px;
  color: #d7e9f8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.request-hero h1 {
  max-width: 540px;
  margin: 0;
  color: var(--white);
  font-family: "Baskerville", "Times New Roman", Georgia, serif;
  font-size: clamp(45px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.36);
}
.request-hero .request-deck {
  margin: 13px 0 0;
  color: #f0f7fd;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.request-hero .request-hero-copy {
  max-width: 470px;
  margin: 10px 0 0;
  color: #c7d9eb;
  font-size: 13px;
  line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.request-hero-points {
  max-width: 500px;
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.request-hero-points > span {
  min-height: 36px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid rgba(175, 215, 243, 0.42);
}
.request-hero-points > span:first-child { padding-left: 0; border-left: 0; }
.request-hero-points svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: #62c5ff; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.request-hero-points strong { color: #dcecf8; font-size: 9px; line-height: 1.45; letter-spacing: 0.16em; text-transform: uppercase; }

.detail-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 80px; }
.side-title {
  position: static;
  align-self: center;
}
.side-title h2 { font-size: clamp(31px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.04em; }
.side-copy { max-width: 430px; margin-top: 24px; color: var(--muted); line-height: 1.65; }
.detail-block { padding: 28px 0; border-bottom: 1px solid var(--line); }
.detail-block:first-child { padding-top: 0; }
.detail-block h3 { margin-bottom: 10px; font-size: 22px; }
.detail-block p { margin-bottom: 0; color: var(--muted); line-height: 1.7; }

.audience-service-section { padding: 74px 0 80px; }
.compact-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(44px, 6vw, 78px);
  align-items: start;
}
.compact-detail-intro {
  position: static;
  align-self: center;
}
.compact-detail-intro h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.compact-detail-intro p {
  max-width: 410px;
  margin: 24px 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.compact-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.compact-services-grid .detail-block {
  min-height: 138px;
  padding: 21px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 253, 0.78));
  box-shadow: 0 12px 28px rgba(18, 58, 94, 0.07);
}
.compact-services-grid .detail-block:first-child { padding-top: 21px; }
.compact-services-grid .detail-block h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.22; }
.compact-services-grid .detail-block p { font-size: 14px; line-height: 1.5; }

.cta-band { margin: 0 auto 104px; width: var(--content); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; color: var(--white); background: var(--blue); border-radius: var(--radius); }
.cta-band h2 { max-width: 650px; margin: 0; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.035em; }

.request-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(74, 180, 255, 0.14), transparent 31%),
    radial-gradient(circle at 12% 84%, rgba(118, 205, 255, 0.1), transparent 26%),
    var(--white);
}
.request-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 70px; align-items: start; }
.request-aside {
  position: static;
  align-self: center;
}
.request-aside h2 { font-size: 36px; letter-spacing: -0.035em; }
.request-aside p { color: var(--muted); line-height: 1.7; }
.request-privacy { margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.request-support { margin-top: 30px; display: grid; gap: 12px; }
.request-support-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid rgba(105, 177, 230, 0.28);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(236, 247, 255, 0.68));
  box-shadow: 0 12px 30px rgba(28, 104, 163, 0.08), inset 0 1px rgba(255, 255, 255, 0.9);
}
.request-support-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0875c9;
  background: linear-gradient(145deg, #edf8ff, #d7efff);
  box-shadow: 0 0 20px rgba(55, 170, 245, 0.2);
}
.request-support-icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.request-support-item strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.25; }
.request-support-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.request-form {
  position: relative;
  padding: 36px;
  border: 1px solid rgba(117, 187, 235, 0.42);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(17, 72, 119, 0.14), 0 0 42px rgba(73, 178, 247, 0.12), inset 0 1px rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}
.form-required { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: grid; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #b9c8d6;
  border-radius: 9px;
  padding: 13px 14px;
  color: var(--ink);
  background: var(--white);
}
.field textarea { min-height: 145px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(11, 92, 173, 0.2); }
.field [aria-invalid="true"] { border-color: #a72727; }
.field small { color: var(--muted); }
.field-error { min-height: 18px; color: #a72727; font-size: 13px; }
.form-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; }
.form-status { margin: 0; color: var(--muted); font-size: 14px; }

.site-footer { padding: 70px 0 24px; color: #d7e5f3; background: #071b31; }
.footer-grid { width: var(--content); margin: 0 auto 60px; display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr; gap: 70px; }
.brand-light .brand-copy strong { color: var(--white); font-size: 22px; letter-spacing: 0.16em; }
.brand-light .brand-copy small { color: #91aac3; font-size: 11px; letter-spacing: 0.12em; }
.footer-note { max-width: 410px; margin: 24px 0 0; color: #9db2c7; line-height: 1.65; }
.footer-heading { margin-bottom: 18px; color: var(--white); font-size: 16px; font-weight: 750; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.footer-grid a:not(.brand) { color: #a9bed1; font-size: 14px; }
.footer-grid .contact-phone-nowrap { white-space: nowrap; }
.footer-grid a:hover { color: var(--white); }
.footer-base { width: var(--content); margin: 0 auto; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,0.13); color: #829bb2; font-size: 13px; }

.fade-in { animation: fadeIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (min-width: 901px) and (max-width: 1860px) {
  .nav-shell { padding: 0 clamp(24px, 3vw, 48px); }
  .brand-logo { width: clamp(44px, 3.2vw, 58px); height: clamp(44px, 3.2vw, 58px); }
  .header-brand-word { font-size: clamp(19px, 1.55vw, 27px); }
  .primary-nav {
    left: clamp(148px, calc(26vw - 86px), 398px);
    gap: 80px;
  }
  .primary-nav a,
  .primary-nav .nav-cta {
    font-size: clamp(10px, 0.78vw, 14px);
  }
}

@media (max-width: 900px) and (any-hover: none) and (any-pointer: coarse) {
  .site-header { height: 82px; }
  .nav-hover-zone { display: none; }
  .nav-shell { width: 100%; min-height: 68px; padding: 8px 14px; transform: none; background: transparent; justify-content: flex-end; }
  .site-header.inner-page .nav-shell { background: transparent; backdrop-filter: none; }
  .nav-shell > .brand { display: none; }
  .menu-button { display: flex; padding: 10px; border-radius: 10px; background: rgba(251,253,255,0.92); box-shadow: 0 8px 22px rgba(4,18,33,0.18); }
  .menu-lines span { background: #101923; }
  .primary-nav {
    position: absolute;
    top: 68px;
    left: auto;
    right: 12px;
    width: min(430px, calc(100% - 24px));
    max-height: calc(100dvh - 82px);
    padding: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(251,253,255,0.98);
    box-shadow: var(--shadow);
  }
  .primary-nav a[data-route="home"] { margin-right: 0; }
  .primary-nav.open { display: flex; animation: menuDrop 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .primary-nav a, .primary-nav .nav-cta { padding: 14px 16px; color: var(--ink); border-radius: 9px; background: transparent; text-shadow: none; font-size: 15px; text-align: left; }
  .primary-nav a:hover, .primary-nav a.active, .primary-nav .nav-cta:hover, .primary-nav .nav-cta.active { color: var(--ink); background: var(--blue-soft); font-weight: 800; }
  .primary-nav .mobile-menu-brand { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 10px 16px; color: var(--ink); font-weight: 800; }
  .mobile-menu-brand img { width: 42px; height: 42px; }
}

@media (pointer: fine) {
  .menu-button { cursor: url("./assets/icons/cursor-black.svg?v=5") 5 4, pointer; }
}

@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
  :root { --content: min(100% - 32px, 1180px); }
  .nav-shell { min-height: 62px; }
  .primary-nav { top: 62px; max-height: calc(100dvh - 74px); }
  .menu-label { display: none; }
  .hero { min-height: 100dvh; }
  .hero-media { object-position: 58% center; }
  .hero::after { background: linear-gradient(0deg, rgba(5, 15, 28, 0.94), rgba(5, 15, 28, 0.48)); }
  .hero-content { width: var(--content); padding: 92px 0 48px; }
  h1 { font-size: clamp(40px, 11.5vw, 52px); }
  .section { padding: 76px 0; }
  .section-tight { padding: 56px 0; }
  .section-heading { margin-bottom: 36px; }
  .audience-grid, .service-list, .process-wrap, .detail-grid, .request-layout, .footer-grid { grid-template-columns: 1fr; }
  .product-entry-layout { grid-template-columns: 1fr; row-gap: 38px; }
  .product-entry-intro { position: static; transform: none; }
  .brief-checks { margin-top: 8px; }
  .brief-checks-grid { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
  .audience-panel { min-height: 330px; padding: 28px; }
  .audience-services { margin-top: 18px; gap: 7px; }
  .audience-services li { padding: 6px 9px; font-size: 11px; }
  .service-list { gap: 0; }
  .service-item:nth-child(2) { border-top: 0; }
  .capabilities-layout { display: flex; flex-direction: column; gap: 34px; }
  .capabilities-main { display: contents; }
  .capabilities-main .section-heading { order: 0; margin-bottom: 0; }
  .capabilities-media { min-height: 320px; margin: 0; order: 1; mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); }
  .capabilities-main .service-list { order: 2; grid-template-columns: 1fr; }
  .process-wrap, .detail-grid, .request-layout { gap: 36px; }
  .audience-service-section { padding: 60px 0 66px; }
  .compact-detail-layout { grid-template-columns: 1fr; gap: 26px; }
  .compact-detail-intro { position: static; transform: none; }
  .compact-detail-intro p { max-width: 620px; margin-top: 16px; }
  .compact-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .compact-services-grid .detail-block { min-height: 0; padding: 18px; }
  .compact-services-grid .detail-block:first-child { padding-top: 18px; }
  .process-intro, .side-title, .request-aside { position: static; transform: none; }
  .category-card, .category-card:nth-child(n) { grid-column: 1 / -1; min-height: 230px; }
  .audience-panel.primary::after { background: linear-gradient(0deg, rgba(6, 43, 81, 0.98) 0%, rgba(6, 43, 81, 0.88) 52%, rgba(6, 43, 81, 0.18) 100%); }
  .audience-panel.secondary::after { background: linear-gradient(0deg, rgba(234, 243, 251, 0.99) 0%, rgba(234, 243, 251, 0.94) 54%, rgba(234, 243, 251, 0.16) 100%); }
  .audience-panel .audience-media { object-position: 64% center; }
  .process-media { aspect-ratio: 16 / 10; }
  .statement { padding: 70px 0; }
  .statement-media { object-position: 74% center; }
  .visual-statement::after { background: linear-gradient(90deg, rgba(7, 61, 121, 0.98), rgba(7, 61, 121, 0.72)); }
  .page-hero { padding: 126px 0 54px; }
  .cta-band { margin-bottom: 76px; padding: 32px 26px; flex-direction: column; align-items: flex-start; }
  .request-form { padding: 24px 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .footer-grid { gap: 36px; }
  .footer-base { flex-direction: column; }
}

/* Keep the full navigation on desktop-class devices, even in a narrow window. */
@media (max-width: 900px) and (any-hover: hover) and (any-pointer: fine) {
  .site-header { height: 82px; }
  .nav-shell {
    width: 100%;
    min-height: 68px;
    padding: 0 8px;
    justify-content: space-between;
  }
  .nav-shell > .brand { display: inline-flex; }
  .brand-logo { width: clamp(30px, 7vw, 42px); height: clamp(30px, 7vw, 42px); }
  .header-brand-word { font-size: clamp(12px, 3vw, 17px); letter-spacing: 0.12em; }
  .menu-button { display: none; }
  .primary-nav {
    position: absolute;
    top: auto;
    left: clamp(150px, 34vw, 190px);
    right: auto;
    width: auto;
    max-height: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(2px, 1vw, 8px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .primary-nav a,
  .primary-nav .nav-cta {
    padding: 30px 0;
    color: var(--white);
    border-radius: 0;
    background: transparent;
    font-size: clamp(4.5px, 1.35vw, 9px);
    text-align: left;
    text-shadow: 0 1px 10px rgba(4,18,33,0.65);
  }
  .primary-nav a:hover,
  .primary-nav a.active,
  .primary-nav .nav-cta:hover,
  .primary-nav .nav-cta.active {
    color: var(--white);
    background: transparent;
  }
  .primary-nav .mobile-menu-brand { display: none; }

}

/* Keep the desktop split layout and sticky titles at every narrow window width. */
@media (max-width: 900px) {
  .product-entry-layout,
  .compact-detail-layout,
  .process-wrap,
  .detail-grid,
  .request-layout {
    display: grid;
    grid-template-columns: minmax(170px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(18px, 3vw, 32px);
  }
  .compact-services-grid { grid-template-columns: 1fr; }
}

/* Home visual layer: soft sky-blue ambient light with restrained VICTORIA blue. */
body[data-route="home"] {
  background: #f7f9fc;
}

body[data-route="home"] .hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: clamp(-180px, -8vw, -70px);
  top: 14%;
  width: clamp(420px, 46vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 205, 255, 0.28) 0%, rgba(65, 176, 235, 0.13) 38%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

body[data-route="home"] .hero::after {
  background:
    linear-gradient(90deg, rgba(5, 15, 28, 0.94) 0%, rgba(5, 20, 39, 0.67) 43%, rgba(5, 15, 28, 0.2) 72%),
    linear-gradient(0deg, rgba(5, 15, 28, 0.76), transparent 52%),
    radial-gradient(circle at 72% 26%, rgba(125, 211, 252, 0.2), transparent 28%);
}

body[data-route="home"] .hero-content {
  text-shadow: 0 2px 28px rgba(3, 12, 24, 0.28);
}

body[data-route="home"] .audience-section,
body[data-route="home"] .capabilities-section,
body[data-route="home"] .process-section,
body[data-route="home"] .opportunity-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body[data-route="home"] .audience-section {
  background:
    radial-gradient(ellipse 46% 42% at 92% 10%, rgba(125, 211, 252, 0.2), transparent 72%),
    radial-gradient(ellipse 34% 24% at 8% 76%, rgba(56, 189, 248, 0.1), transparent 72%),
    linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 76%, #f7f9fc 100%);
}

body[data-route="home"] .audience-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -170px;
  right: -130px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(76, 98, 121, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(78, 103, 128, 0.025), 0 0 0 124px rgba(78, 103, 128, 0.018);
  pointer-events: none;
}

body[data-route="home"] .audience-panel {
  border: 1px solid rgba(183, 201, 218, 0.72);
  box-shadow: 0 26px 68px rgba(22, 55, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-route="home"] .audience-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 82px rgba(22, 55, 87, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body[data-route="home"] .audience-media,
body[data-route="home"] .category-media {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-route="home"] .audience-panel:hover .audience-media,
body[data-route="home"] .category-card:hover .category-media {
  transform: scale(1.035);
}

body[data-route="home"] .capabilities-section {
  background:
    radial-gradient(ellipse 46% 42% at 92% 22%, rgba(125, 211, 252, 0.18), transparent 72%),
    radial-gradient(ellipse 34% 26% at 8% 82%, rgba(56, 189, 248, 0.09), transparent 72%),
    #f7f9fc;
}

body[data-route="home"] .capabilities-section::after {
  content: none;
}

body[data-route="home"] .capabilities-media {
  position: relative;
  box-shadow: 0 32px 78px rgba(34, 57, 80, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

body[data-route="home"] .service-item {
  position: relative;
  transition: padding 360ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease;
}

body[data-route="home"] .service-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  width: 2px;
  height: 50%;
  border-radius: 2px;
  background: var(--blue);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-route="home"] .service-item:hover {
  padding-left: 16px;
  border-color: #afc0d0;
}

body[data-route="home"] .service-item:hover::before {
  opacity: 0.72;
  transform: scaleY(1);
}

body[data-route="home"] .process-section {
  background:
    radial-gradient(ellipse 42% 58% at 18% 50%, rgba(125, 211, 252, 0.2), transparent 68%),
    radial-gradient(ellipse 36% 38% at 88% 88%, rgba(56, 189, 248, 0.1), transparent 72%),
    linear-gradient(180deg, #fafbfd 0%, #f4f7fa 100%);
}

body[data-route="home"] .process-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: max(-220px, calc((100vw - 1180px) / 2 - 310px));
  top: 23%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 0 110px rgba(56, 189, 248, 0.16);
  pointer-events: none;
}

body[data-route="home"] .process-media {
  border: 1px solid rgba(187, 202, 216, 0.72);
  box-shadow: 0 24px 62px rgba(31, 58, 85, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

body[data-route="home"] .process-step {
  position: relative;
  padding-left: 28px;
  border-color: rgba(174, 190, 205, 0.74);
}

body[data-route="home"] .process-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 31px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: #f6f8fb;
  box-shadow: 0 0 0 6px rgba(11, 92, 173, 0.07);
}

body[data-route="home"] .opportunity-section {
  background:
    radial-gradient(ellipse 38% 30% at 94% 4%, rgba(125, 211, 252, 0.2), transparent 72%),
    radial-gradient(ellipse 32% 26% at 8% 92%, rgba(56, 189, 248, 0.1), transparent 72%),
    #f9fbfd;
}

body[data-route="home"] .opportunity-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -160px;
  bottom: -210px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(76, 98, 121, 0.07);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(76, 98, 121, 0.02);
  pointer-events: none;
}

body[data-route="home"] .category-card {
  border-color: rgba(180, 197, 213, 0.76);
  box-shadow: 0 18px 46px rgba(26, 54, 82, 0.095), inset 0 1px 0 rgba(255, 255, 255, 0.44);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-route="home"] .category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 64px rgba(26, 54, 82, 0.145), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body[data-route="home"] .cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 68px;
  background:
    radial-gradient(circle at 82% 22%, rgba(195, 220, 243, 0.25), transparent 28%),
    linear-gradient(118deg, #08437f 0%, #0b5cad 58%, #084985 100%);
  border: 1px solid rgba(7, 61, 121, 0.38);
  box-shadow: 0 34px 86px rgba(12, 63, 111, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body[data-route="home"] .cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -88px;
  top: -180px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(255, 255, 255, 0.035), 0 0 0 88px rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

body[data-route="home"] .cta-band .button-light {
  box-shadow: 0 12px 30px rgba(3, 31, 58, 0.2);
}

body[data-route="home"] .section-heading,
body[data-route="home"] .audience-panel,
body[data-route="home"] .capabilities-media,
body[data-route="home"] .service-item,
body[data-route="home"] .process-step,
body[data-route="home"] .category-card,
body[data-route="home"] .cta-band > * {
  opacity: 0;
  transform: translateY(18px);
  transition-property: opacity, transform;
  transition-duration: 620ms;
  transition-delay: var(--reveal-delay, 0ms);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-route="home"] .is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  body[data-route="home"] .hero::before {
    left: -210px;
    top: 30%;
    width: 520px;
  }

  body[data-route="home"] .audience-section::before,
  body[data-route="home"] .opportunity-section::before {
    opacity: 0.55;
  }

  body[data-route="home"] .service-item:hover {
    padding-left: 0;
  }

  body[data-route="home"] .process-step {
    padding-left: 26px;
  }

  body[data-route="home"] .cta-band {
    margin-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="home"] .section-heading,
  body[data-route="home"] .audience-panel,
  body[data-route="home"] .capabilities-media,
  body[data-route="home"] .service-item,
  body[data-route="home"] .process-step,
  body[data-route="home"] .category-card,
  body[data-route="home"] .cta-band > * {
    opacity: 1;
    transform: none;
  }
}