:root {
  color-scheme: light;
  --paper: #f7f3e9;
  --paper-bright: #fffdf7;
  --paper-soft: #efe9dc;
  --ink: #08295f;
  --ink-2: #16457c;
  --blue: #1b61c9;
  --blue-bright: #28a7db;
  --blue-pale: #c9e9f4;
  --indigo: #06376c;
  --indigo-deep: #032652;
  /* Brand narrative thread only; never use these tokens for danger/error states. */
  --thread: #dc3b2f;
  --thread-dark: #a91c1e;
  --yellow: #f6df63;
  --green: #c9e48c;
  --coral: #ef9c87;
  --slate: #b7cad7;
  --line: rgba(8, 41, 95, .18);
  --shadow: 0 18px 55px rgba(14, 48, 83, .16), 0 3px 8px rgba(14, 48, 83, .09);
  --shadow-soft: 0 11px 24px rgba(14, 48, 83, .12), 0 2px 4px rgba(14, 48, 83, .08);
  --radius: 8px;
  --page: min(1180px, calc(100vw - 48px));
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 13%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 62%, rgba(8,41,95,.035) 0 1px, transparent 2px),
    repeating-linear-gradient(18deg, transparent 0 7px, rgba(8,41,95,.017) 8px 9px, transparent 10px 18px);
  background-size: 19px 23px, 31px 29px, auto;
  font-family: var(--font-sans);
  line-height: 1.8;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

img,
canvas {
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.45;
  text-wrap: balance;
  word-break: auto-phrase;
}

p,
li,
summary {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 12px 18px;
  color: #fff;
  background: var(--indigo-deep);
  border-radius: 4px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 3px solid #ffb000;
  outline-offset: 4px;
}

.thread-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 14;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px rgba(65, 5, 8, .2));
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 78px;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper-bright) 90%, transparent);
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(8, 41, 95, .08);
  backdrop-filter: blur(16px) saturate(1.1);
}

.header-inner {
  width: min(1340px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand,
.footer-brand {
  display: grid;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

.brand img {
  display: block;
  width: 144px;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.primary-nav a {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  white-space: nowrap;
}

.primary-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 2px;
  background: var(--thread);
  transition: left .25s ease, right .25s ease;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  left: 0;
  right: 0;
}

.nav-cta {
  padding: 0 18px;
  color: #fff;
  background-color: #1b61c9;
  background-image: linear-gradient(135deg, var(--blue), #0b489c);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px;
  box-shadow: 0 7px 18px rgba(7, 73, 151, .2);
  transition: transform .25s ease, box-shadow .25s ease;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(7, 73, 151, .28);
}

.menu-button {
  display: none;
  width: 52px;
  height: 48px;
  padding: 4px;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.menu-button-lines {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto 7px;
  background: currentColor;
  transition: background .25s ease;
}

.menu-button-lines::before,
.menu-button-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}

.menu-button-lines::before { top: -7px; }
.menu-button-lines::after { top: 7px; }
.menu-button-label { font-size: 10px; font-weight: 700; }

.menu-button[aria-expanded="true"] .menu-button-lines { background: transparent; }
.menu-button[aria-expanded="true"] .menu-button-lines::before { top: 0; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-button-lines::after { top: 0; transform: rotate(-45deg); }

.hero {
  position: relative;
  min-height: 1020px;
  padding: 142px 36px 96px;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(90deg, rgba(255,253,247,.88), rgba(255,253,247,.36) 34%, rgba(255,253,247,.2) 66%, rgba(255,253,247,.88)),
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.86), transparent 62%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -54px;
  width: 130%;
  height: 260px;
  background: var(--paper);
  clip-path: polygon(0 53%, 3% 45%, 7% 57%, 12% 46%, 18% 58%, 24% 48%, 31% 58%, 38% 45%, 45% 55%, 52% 43%, 60% 57%, 68% 46%, 76% 56%, 83% 47%, 91% 58%, 96% 44%, 100% 52%, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.hero-wave-canvas,
.hero-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}

.hero-wave-canvas {
  filter: saturate(1.05) contrast(1.02) drop-shadow(0 15px 30px rgba(0, 77, 136, .12));
}

.hero-grain {
  z-index: -2;
  opacity: .24;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(9deg, transparent 0 4px, rgba(11,52,93,.04) 5px, transparent 6px 10px),
    radial-gradient(circle, rgba(4,55,108,.07) 0 1px, transparent 1.4px);
  background-size: auto, 13px 17px;
}

.hero-grid {
  position: relative;
  z-index: 2;
  width: min(1380px, 100%);
  min-height: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, .92fr) minmax(390px, 1.28fr) minmax(240px, .92fr);
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
}

.hero-side {
  position: relative;
  min-height: 500px;
  padding-top: 24px;
}

.hero-side-learning {
  text-align: right;
}

.eyebrow,
.section-label,
.hero-kicker {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.eyebrow {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: .03em;
}

.hero-side h2 {
  max-width: 310px;
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.9;
}

.hero-side-learning h2 {
  margin-left: auto;
}

.hero-center {
  position: relative;
  z-index: 3;
  isolation: isolate;
  text-align: center;
}

.hero-center::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -42px -76px -34px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,253,247,.94) 0 44%, rgba(255,253,247,.7) 64%, transparent 78%);
  filter: blur(2px);
}

.hero-kicker,
.hero-center h1,
.hero-lead,
.hero-actions {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  color: var(--blue);
}

.hero-center h1 {
  margin: 0 auto 24px;
  font-family: var(--font-serif);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.45;
  text-shadow: 0 2px 0 rgba(255,255,255,.86);
}

.hero-center h1 em {
  position: relative;
  color: var(--ink);
  font-style: normal;
}

.hero-center h1 em::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 5%;
  bottom: -7px;
  height: 7px;
  border-top: 2px solid var(--thread);
  border-radius: 50%;
  transform: rotate(-1deg);
}

.hero-lead {
  max-width: 610px;
  margin: 0 auto 26px;
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 2.1;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.button {
  min-height: 52px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-weight: 800;
  letter-spacing: .03em;
  border-radius: 5px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background-color .25s ease;
}

.button:hover {
  transform: translateY(-3px) rotate(-.35deg);
}

.button-primary {
  color: #fff;
  background-color: #1b61c9;
  background-image: linear-gradient(135deg, var(--blue), #073e87);
  box-shadow: 0 12px 25px rgba(5, 67, 135, .25), inset 0 1px rgba(255,255,255,.3);
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid currentColor;
}

.sticky-cluster {
  position: relative;
  z-index: 3;
  height: 190px;
  margin-top: 28px;
  perspective: 700px;
}

.sticky {
  --x: 0px;
  --y: 0px;
  position: absolute;
  display: grid;
  place-items: center;
  width: 104px;
  min-height: 86px;
  padding: 12px 10px 20px;
  color: #1b2837;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--rotate));
  transform-origin: 50% 7%;
  animation: sticky-float 4.8s ease-in-out var(--delay) infinite;
  transition: filter .2s ease;
  cursor: default;
}

.sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.08), transparent);
  clip-path: polygon(0 0, 100% 25%, 93% 100%, 7% 86%);
}

.sticky:hover {
  filter: saturate(1.16) brightness(1.03);
  animation: sticky-spring .7s cubic-bezier(.3,1.8,.5,1) both;
}

.sticky-blue { background: #b9ddf2; }
.sticky-yellow { background: var(--yellow); }
.sticky-green { background: var(--green); }
.sticky-coral { background: var(--coral); }
.sticky-slate { background: var(--slate); }

.sticky-cluster-left .sticky:nth-child(1) { left: 2%; top: 0; }
.sticky-cluster-left .sticky:nth-child(2) { left: 37%; top: 13px; }
.sticky-cluster-left .sticky:nth-child(3) { left: 15%; top: 98px; }
.sticky-cluster-left .sticky:nth-child(4) { left: 51%; top: 94px; }
.sticky-cluster-right .sticky:nth-child(1) { right: 47%; top: 4px; }
.sticky-cluster-right .sticky:nth-child(2) { right: 5%; top: 17px; }
.sticky-cluster-right .sticky:nth-child(3) { right: 39%; top: 104px; }
.sticky-cluster-right .sticky:nth-child(4) { right: 0; top: 96px; }

@keyframes sticky-float {
  0%, 100% { transform: translate3d(var(--x), var(--y), 0) rotate(var(--rotate)); }
  50% { transform: translate3d(var(--x), calc(var(--y) - 7px), 16px) rotate(calc(var(--rotate) + 1deg)); }
}

@keyframes sticky-spring {
  0% { transform: translate3d(var(--x), var(--y), 0) rotate(var(--rotate)); }
  35% { transform: translate3d(var(--x), calc(var(--y) - 13px), 25px) rotate(calc(var(--rotate) - 4deg)); }
  65% { transform: translate3d(var(--x), calc(var(--y) + 4px), 5px) rotate(calc(var(--rotate) + 2deg)); }
  100% { transform: translate3d(var(--x), var(--y), 0) rotate(var(--rotate)); }
}

.paper-sheet {
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(8,41,95,.11) 19px 20px);
  border: 1px solid rgba(8,41,95,.14);
  box-shadow: var(--shadow-soft);
}

.desk-sketch {
  position: absolute;
  left: -7%;
  bottom: -55px;
  width: 280px;
  height: 145px;
  padding: 15px 20px;
  transform: rotate(-5deg);
}

.sketch-title {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-weight: 800;
}

.desk-sketch i {
  position: absolute;
  width: 54px;
  height: 27px;
  border: 1.5px solid rgba(8,41,95,.5);
}

.desk-sketch i:nth-of-type(1) { left: 27px; top: 66px; }
.desk-sketch i:nth-of-type(2) { left: 108px; top: 53px; }
.desk-sketch i:nth-of-type(3) { right: 25px; top: 70px; }
.desk-sketch i:nth-of-type(4) { left: 66px; bottom: 16px; }
.desk-sketch i:nth-of-type(5) { right: 68px; bottom: 13px; }

.learning-sheets {
  position: absolute;
  right: -5%;
  bottom: -55px;
  width: 300px;
  height: 160px;
}

.learning-sheets .paper-sheet {
  position: absolute;
  width: 225px;
  height: 128px;
  padding: 15px;
  text-align: left;
  font-family: var(--font-serif);
}

.sheet-back { right: 52px; top: 7px; transform: rotate(5deg); }
.sheet-front { right: 0; top: 28px; transform: rotate(-3deg); }
.learning-sheets span { font-size: 18px; font-weight: 800; }
.learning-sheets b { display: block; margin: 22px 0 8px; font-size: 13px; }
.learning-sheets i { display: block; width: 80%; height: 1px; margin-top: 12px; background: rgba(8,41,95,.25); }

.hero-hub {
  position: relative;
  z-index: 8;
  width: min(470px, calc(100% - 40px));
  min-height: 152px;
  margin: 150px auto 0;
  padding: 28px 38px;
  color: #fff;
  text-align: center;
  background-color: #063f7f;
  background-image: linear-gradient(145deg, rgba(5,69,137,.96), rgba(3,38,82,.98));
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 15px;
  box-shadow: 0 28px 50px rgba(0, 37, 82, .3), inset 0 1px 0 rgba(255,255,255,.32);
  transform-style: preserve-3d;
}

.hero-hub p,
.hero-hub span {
  margin: 0;
  font-size: 12px;
  letter-spacing: .07em;
}

.hero-hub strong {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
}

.hub-orbit {
  position: absolute;
  inset: -18px;
  z-index: -1;
  border: 1px solid rgba(220,59,47,.56);
  border-radius: 48% 52% 46% 54%;
  animation: orbit 12s linear infinite;
}

@keyframes orbit { to { transform: rotate(360deg); } }

.scroll-hint {
  position: absolute;
  right: 24px;
  bottom: 120px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
}

.scroll-hint span {
  width: 1px;
  height: 58px;
  background: var(--ink);
  opacity: .62;
}

.thread-pin {
  position: absolute;
  z-index: 16;
  display: block;
  width: 22px;
  height: 22px;
  padding: 5px;
  background: radial-gradient(circle at 35% 27%, #ff9a8e 0 8%, var(--thread) 26%, var(--thread-dark) 72%);
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(87,8,11,.3);
  animation: pin-pulse 3.2s ease-in-out infinite;
}

.thread-pin span {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: inherit;
}

.hero-pin { left: 50%; bottom: -48px; transform: translateX(-50%); }

@keyframes pin-pulse {
  0%,100% { box-shadow: 0 4px 8px rgba(87,8,11,.3), 0 0 0 0 rgba(220,59,47,.2); }
  50% { box-shadow: 0 5px 10px rgba(87,8,11,.35), 0 0 0 9px rgba(220,59,47,0); }
}

.section {
  position: relative;
  width: var(--page);
  margin: 0 auto;
  padding: 112px 0;
}

.section-heading {
  width: min(740px, 100%);
  margin: 0 auto 62px;
  text-align: center;
}

.section-label {
  color: var(--blue);
}

.section-heading h2,
.about h2,
.trust h2,
.contact h2 {
  margin-bottom: 18px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: .04em;
}

.section-heading > p:last-child,
.about p,
.trust-intro > p:last-child {
  font-family: var(--font-serif);
  line-height: 2;
}

.heading-left {
  margin-left: 0;
  text-align: left;
}

.services {
  z-index: 2;
  width: 100%;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  overflow: hidden;
}

.service-river {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 275px;
  width: 125%;
  height: 660px;
  transform: translateX(-50%) rotate(-1deg);
  background:
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 28px, rgba(255,255,255,.16) 29px 31px, transparent 32px 52px),
    linear-gradient(135deg, #35a8da, #087cbf 38%, #034f95 70%, #073467);
  clip-path: polygon(0 33%, 5% 24%, 11% 29%, 17% 17%, 24% 22%, 31% 10%, 39% 19%, 47% 7%, 55% 16%, 63% 9%, 70% 19%, 78% 11%, 85% 21%, 92% 16%, 100% 25%, 100% 78%, 94% 72%, 87% 84%, 80% 76%, 72% 88%, 65% 77%, 57% 90%, 49% 78%, 40% 87%, 31% 77%, 23% 86%, 14% 73%, 7% 82%, 0 73%);
  filter: drop-shadow(0 18px 25px rgba(6,72,132,.18));
}

.service-river span {
  position: absolute;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.service-river span:nth-child(1) { inset: 15% 5%; }
.service-river span:nth-child(2) { inset: 26% 13%; }
.service-river span:nth-child(3) { inset: 38% 22%; }

.service-islands {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  perspective: 1400px;
}

.torn-card {
  position: relative;
  min-height: 490px;
  padding: 52px 42px 46px;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(155deg, var(--paper-bright), #efe9da);
  clip-path: polygon(2% 7%, 8% 3%, 16% 5%, 25% 2%, 35% 5%, 45% 2%, 55% 4%, 66% 1%, 76% 4%, 86% 2%, 97% 6%, 99% 17%, 97% 28%, 100% 40%, 98% 52%, 100% 65%, 97% 76%, 99% 89%, 94% 97%, 82% 99%, 70% 97%, 57% 100%, 45% 97%, 33% 99%, 21% 96%, 10% 98%, 2% 92%, 4% 79%, 1% 68%, 3% 55%, 0 43%, 3% 31%, 1% 18%);
  filter: drop-shadow(0 21px 23px rgba(3,38,82,.22));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, filter .28s ease;
}

.torn-card::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: -1;
  opacity: .32;
  background: repeating-linear-gradient(15deg, transparent 0 9px, rgba(8,41,95,.045) 10px, transparent 11px 18px);
}

.service-card-main {
  margin-top: -34px;
  transform: translateZ(30px);
}

.paper-number {
  position: absolute;
  top: 28px;
  right: 32px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  opacity: .55;
}

.service-tag {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.service-card h3 {
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 600;
}

.service-card > p:not(.service-tag) {
  font-size: 14px;
}

.service-card ul {
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px dashed rgba(8,41,95,.32);
  list-style: none;
  font-size: 13px;
  font-weight: 700;
}

.service-card li::before {
  content: "✓";
  margin-right: 9px;
  color: var(--blue);
}

.service-card .thread-pin { left: 50%; bottom: -5px; transform: translateX(-50%); }

.process {
  padding-top: 140px;
  overflow: clip;
}

.process::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 72px;
  bottom: 72px;
  left: 50%;
  width: 100vw;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.46) 14%, rgba(255,255,255,.46) 86%, transparent);
  transform: translateX(-50%);
}

.process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1200px;
}

.process-card {
  position: relative;
  min-height: 285px;
  padding: 32px 28px;
  text-align: center;
  background: var(--paper-bright);
  border: 1px solid rgba(8,41,95,.14);
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .25s ease;
}

.process-card:nth-child(odd) { transform: rotate(-1deg); }
.process-card:nth-child(even) { transform: rotate(1deg); }

.process-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 74px;
  height: 24px;
  background: rgba(138,194,218,.56);
  box-shadow: inset 0 0 9px rgba(255,255,255,.5);
  transform: translateX(-50%) rotate(-2deg);
}

.process-no {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15em;
}

.process-mark {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
}

.process-card h3 {
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 26px;
}

.process-card p {
  margin-bottom: 0;
  font-size: 13px;
}

.process-card .thread-pin {
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
}

.process-card:last-child .thread-pin {
  right: 18px;
  top: auto;
  bottom: -12px;
  transform: none;
}

.trust {
  position: relative;
  overflow: hidden;
  padding: 118px 24px;
  color: #fff;
  background-color: #04366d;
  background-image:
    radial-gradient(circle at 75% 10%, rgba(30,151,206,.24), transparent 35%),
    linear-gradient(125deg, var(--indigo-deep), #064c8d 55%, #032b60);
  isolation: isolate;
}

.trust::before,
.trust::after {
  content: "";
  position: absolute;
  width: 520px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 47% 53% 42% 58%;
}

.trust::before { left: -210px; bottom: -320px; }
.trust::after { right: -180px; top: -260px; }

.trust-contours {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background: repeating-radial-gradient(ellipse at 85% 45%, transparent 0 24px, rgba(255,255,255,.38) 25px 26px, transparent 27px 43px);
}

.trust-inner {
  position: relative;
  width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .72fr 1.6fr;
  gap: 60px;
  align-items: center;
}

.section-label-light {
  color: #6dd4f1;
}

.trust-intro h2 {
  font-size: clamp(31px, 4vw, 48px);
  white-space: nowrap;
}

.trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}

.trust-card {
  min-height: 300px;
  padding: 30px 24px;
  background-color: #164f82;
  background-image: linear-gradient(rgba(255,255,255,.075), rgba(255,255,255,.075));
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 5px;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 16px 35px rgba(0,20,50,.2);
  backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  transition: transform .18s ease-out, background .25s ease;
}

.trust-card:hover {
  background-color: #1b5a91;
  background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12));
}

.trust-stamp {
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  color: #a8e9fa;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
  border: 2px solid currentColor;
  border-radius: 50% 48% 52% 46%;
  transform: rotate(-5deg);
}

.trust-card h3 {
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: 21px;
}

.trust-card p {
  margin-bottom: 0;
  color: rgba(255,255,255,.85);
  font-size: 13px;
}

.trust-pin { right: 0; bottom: -64px; }

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: stretch;
  perspective: 1300px;
}

.values-paper,
.company-paper {
  position: relative;
  min-height: 470px;
  padding: clamp(34px, 5vw, 66px);
  background: linear-gradient(135deg, var(--paper-bright), #eee7d8);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
}

.values-paper {
  clip-path: polygon(0 3%, 10% 0, 22% 2%, 34% 0, 47% 3%, 61% 0, 75% 2%, 89% 0, 100% 3%, 98% 22%, 100% 39%, 98% 56%, 100% 75%, 97% 100%, 78% 98%, 62% 100%, 44% 98%, 26% 100%, 0 97%, 2% 78%, 0 59%, 2% 42%, 0 22%);
}

.company-paper {
  transform: rotate(1deg);
  border: 1px solid rgba(8,41,95,.13);
}

.company-paper::after {
  content: "";
  position: absolute;
  top: -14px;
  right: 12%;
  width: 102px;
  height: 32px;
  background: rgba(237, 157, 135, .58);
  transform: rotate(3deg);
}

.about h2 {
  font-size: clamp(30px, 3.7vw, 46px);
}

.value-orbit {
  position: relative;
  width: min(330px, 100%);
  aspect-ratio: 1.4;
  margin: 36px auto 0;
}

.value-orbit::before,
.value-orbit::after {
  content: "";
  position: absolute;
  inset: 20% 10%;
  border: 1px solid rgba(8,41,95,.3);
  border-radius: 50%;
  transform: rotate(8deg);
}

.value-orbit::after { transform: rotate(-23deg); }

.value-orbit span {
  position: absolute;
  z-index: 2;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  background: var(--paper-bright);
  border: 1px solid var(--blue);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}

.value-orbit span:nth-child(1) { left: 50%; top: 0; transform: translateX(-50%); }
.value-orbit span:nth-child(2) { left: 8%; bottom: 0; }
.value-orbit span:nth-child(3) { right: 8%; bottom: 0; }

.company-note {
  margin-top: 38px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  background: rgba(191,226,241,.52);
  border-left: 4px solid var(--blue);
}

.company-note strong {
  font-family: var(--font-serif);
  font-size: 18px;
}

.company-note span { font-size: 13px; }
.about-link {
  min-height: 44px;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid currentColor;
}
.faq {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 78px;
  align-items: center;
}

.faq-visual {
  position: relative;
  min-height: 470px;
}

.notebook {
  position: absolute;
  left: 0;
  top: 30px;
  width: 330px;
  height: 360px;
  padding: 45px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(8,41,95,.13) 32px 33px),
    var(--paper-bright);
  border: 1px solid rgba(8,41,95,.17);
  box-shadow: var(--shadow);
  transform: rotate(-6deg);
}

.notebook::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 0;
  bottom: 0;
  width: 25px;
  background: repeating-linear-gradient(0deg, transparent 0 20px, #234a7a 21px 24px, transparent 25px 31px);
}

.notebook span {
  display: grid;
  place-items: center;
  width: 130px;
  height: 95px;
  margin: 70px auto 0;
  font-family: var(--font-serif);
  font-size: 72px;
  border: 2px solid var(--ink);
  border-radius: 48% 52% 56% 44%;
}

.pencil {
  position: absolute;
  left: 216px;
  bottom: 39px;
  width: 230px;
  height: 17px;
  background: linear-gradient(to bottom, #133d68 0 50%, #071b30 51%);
  border-radius: 3px;
  box-shadow: 0 8px 13px rgba(8,41,95,.22);
  transform: rotate(-24deg);
}

.pencil::before {
  content: "";
  position: absolute;
  left: -30px;
  border-top: 8.5px solid transparent;
  border-bottom: 8.5px solid transparent;
  border-right: 31px solid #d3b583;
}

.faq-content .section-heading { margin-bottom: 30px; }
.faq-list { display: grid; gap: 12px; }

.faq-item {
  position: relative;
  background: var(--paper-bright);
  border: 1px solid rgba(8,41,95,.16);
  box-shadow: 0 5px 14px rgba(8,41,95,.07);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: clip;
}

.faq-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 0 solid rgba(8,41,95,.12);
  border-right: 0 solid var(--paper);
  filter: drop-shadow(-2px -2px 2px rgba(8,41,95,.08));
  transition: border-width .4s cubic-bezier(.3,1.5,.5,1);
}

.faq-item[open] {
  transform: translateY(-2px) rotate(-.25deg);
  box-shadow: var(--shadow-soft);
}

.faq-item[open]::after {
  border-top-width: 33px;
  border-right-width: 33px;
}

.faq-item summary {
  position: relative;
  min-height: 58px;
  padding: 16px 58px 16px 22px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  width: 14px;
  height: 2px;
  background: var(--blue);
  transition: transform .28s ease;
}

.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(180deg); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}

.faq-answer p {
  min-height: 0;
  margin: 0;
  padding: 0 56px 0 22px;
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-2);
  opacity: 0;
  transition: padding .4s ease, opacity .35s ease;
}

.faq-item[open] .faq-answer { grid-template-rows: 1fr; }
.faq-item[open] .faq-answer p { padding-block: 0 24px; opacity: 1; }
.faq-pin { left: 42%; bottom: 70px; }

.contact {
  position: relative;
  min-height: 430px;
  padding: 88px max(24px, calc((100vw - 1180px) / 2));
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background-color: #043d7d;
  background-image: linear-gradient(135deg, #0758a5, #033a78 62%, #022955);
}

.contact-wave {
  position: absolute;
  inset: 0;
  opacity: .28;
  background:
    repeating-radial-gradient(ellipse at 68% 104%, transparent 0 22px, rgba(255,255,255,.32) 23px 24px, transparent 25px 43px),
    radial-gradient(circle at 20% 0, rgba(72,199,239,.42), transparent 43%);
}

.contact-inner {
  position: relative;
  z-index: 3;
  width: min(680px, 60%);
}

.contact h2 {
  margin-bottom: 8px;
  font-size: clamp(34px, 4.7vw, 58px);
}

.contact-inner > p:not(.section-label) {
  margin-bottom: 32px;
  font-family: var(--font-serif);
  font-size: 17px;
}

.button-light {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 13px 25px rgba(0,20,50,.24);
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.button-ghost {
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.72);
}

.privacy-note {
  margin: 16px 0 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  line-height: 1.8;
  color: rgba(255,255,255,.84);
}

.privacy-note a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-pin { right: -64px; top: 50%; }

.contact-desk {
  position: absolute;
  z-index: 2;
  right: max(3%, calc((100vw - 1300px) / 2));
  bottom: -54px;
  width: min(510px, 44vw);
  height: 350px;
  transform: rotate(-5deg);
}

.contact-notebook {
  position: absolute;
  inset: 40px 70px 0 0;
  padding: 48px;
  background: var(--paper-bright);
  box-shadow: 0 24px 60px rgba(0,15,40,.34);
}

.contact-notebook::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #0d3d70 0 13px, transparent 14px 23px);
}

.contact-notebook span,
.contact-notebook i {
  display: block;
  height: 2px;
  margin-bottom: 28px;
  background: rgba(8,41,95,.4);
}

.contact-notebook span { width: 55%; }
.contact-notebook i:nth-child(2) { width: 82%; }
.contact-notebook i:nth-child(3) { width: 72%; }
.contact-notebook i:nth-child(4) { width: 88%; }

.contact-cup {
  position: absolute;
  right: 0;
  top: 0;
  width: 105px;
  height: 115px;
  background: linear-gradient(145deg, #0b4f82, #021f40);
  border-radius: 8px 8px 38px 38px;
  box-shadow: 0 18px 24px rgba(0,15,40,.3);
}

.contact-cup::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 7px;
  height: 17px;
  background: #251208;
  border: 4px solid #0a426d;
  border-radius: 50%;
}

.contact-cup::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 26px;
  width: 45px;
  height: 55px;
  border: 12px solid #06365f;
  border-left: 0;
  border-radius: 0 55% 55% 0;
}

.site-footer {
  padding: 30px 24px;
  color: rgba(255,255,255,.82);
  background: #031e42;
}

.footer-inner {
  width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 30px;
  align-items: center;
}

.footer-brand img {
  width: 155px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .75;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 11px;
}

.site-footer nav a {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-footer p { margin: 0; font-size: 10px; }

.reveal {
  opacity: 1;
  transform: translateY(22px) scale(.99);
  transition: transform .9s cubic-bezier(.2,.75,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(1100px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  will-change: transform;
}

.service-card-main[data-tilt] {
  --lift: -34px;
}

@media (max-width: 1120px) {
  .primary-nav { gap: 13px; font-size: 11px; }
  .hero { min-height: 980px; padding-inline: 24px; }
  .hero-grid { grid-template-columns: 1fr 1.35fr 1fr; gap: 24px; }
  .hero-center h1 { font-size: clamp(40px, 5vw, 61px); }
  .sticky { width: 88px; min-height: 78px; font-size: 13px; }
  .service-islands { gap: 20px; }
  .torn-card { padding-inline: 32px; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-intro { width: min(720px, 100%); }
  .faq { grid-template-columns: .42fr 1.58fr; gap: 40px; }
  .notebook { width: 280px; }
}

@media (max-width: 900px) {
  :root { --page: min(100% - 40px, 720px); }
  .site-header { height: 70px; }
  .menu-button { display: block; position: relative; z-index: 3; }
  .primary-nav {
    position: fixed;
    inset: 0;
    padding: 100px 30px 40px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    color: #fff;
    background:
      repeating-radial-gradient(ellipse at 95% 5%, transparent 0 20px, rgba(255,255,255,.1) 21px 22px, transparent 23px 40px),
      rgba(3,38,82,.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .3s ease, visibility .3s, transform .3s ease;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav a { min-height: 54px; font-family: var(--font-serif); font-size: 18px; }
  .primary-nav .nav-cta { margin-top: 18px; }
  .menu-button[aria-expanded="true"] { color: #fff; }
  .hero { min-height: 1440px; padding: 110px 20px 100px; }
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "business learning";
    gap: 70px 24px;
  }
  .hero-center { grid-area: center; }
  .hero-side-business { grid-area: business; }
  .hero-side-learning { grid-area: learning; }
  .hero-center h1 { font-size: clamp(45px, 9vw, 66px); }
  .hero-side { min-height: 460px; }
  .hero-hub { margin-top: 195px; }
  .service-islands { grid-template-columns: 1fr; width: min(620px, 100%); margin: 0 auto; gap: 68px; }
  .service-card-main[data-tilt] { --lift: 0px; }
  .service-river { top: 340px; height: 1500px; width: 170%; clip-path: polygon(31% 0, 74% 0, 69% 100%, 25% 100%, 31% 80%, 26% 60%, 35% 40%, 29% 20%); }
  .process-list { grid-template-columns: 1fr 1fr; }
  .process-card:nth-child(2) .thread-pin { right: 18px; top: auto; bottom: -15px; }
  .trust-cards { grid-template-columns: 1fr; }
  .trust-card { min-height: 0; }
  .trust-intro h2 { white-space: normal; }
  .about { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq-visual { min-height: 300px; }
  .notebook { width: 300px; height: 275px; }
  .notebook span { margin-top: 30px; }
  .pencil { left: 180px; bottom: 22px; }
  .faq-pin { left: auto; right: 9%; bottom: 50px; }
  .contact-inner { width: min(620px, 100%); }
  .contact-desk { opacity: .22; width: 64vw; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

@media (max-width: 600px) {
  :root { --page: min(100% - 28px, 540px); }
  .header-inner { width: calc(100% - 24px); }
  .brand img { width: 126px; }
  .hero { min-height: 0; padding: 110px 14px 100px; }
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "business"
      "learning";
    gap: 44px;
  }
  .hero-center h1 { font-size: clamp(38px, 11.5vw, 54px); letter-spacing: .02em; }
  .hero-center::before { inset: -28px -16px -24px; }
  .hero-lead { font-size: 14px; }
  .hero-side { min-height: 300px; padding-top: 0; text-align: left; }
  .hero-side-learning h2 { margin-left: 0; }
  .hero-side h2 { max-width: none; font-size: 15px; line-height: 1.85; }
  .eyebrow { font-size: 16px; }
  .sticky-cluster { width: min(310px, 100%); height: 190px; margin: 24px auto 0; }
  .sticky { width: 96px; min-height: 78px; padding: 10px 8px 17px; font-size: 13px; }
  .sticky-cluster-right .sticky { right: auto; }
  .sticky-cluster-left .sticky:nth-child(1),
  .sticky-cluster-right .sticky:nth-child(1) { left: 2%; top: 0; }
  .sticky-cluster-left .sticky:nth-child(2),
  .sticky-cluster-right .sticky:nth-child(2) { left: 40%; top: 12px; }
  .sticky-cluster-left .sticky:nth-child(3),
  .sticky-cluster-right .sticky:nth-child(3) { left: 14%; top: 98px; }
  .sticky-cluster-left .sticky:nth-child(4),
  .sticky-cluster-right .sticky:nth-child(4) { left: 52%; top: 94px; }
  .desk-sketch,
  .learning-sheets { display: none; }
  .hero-hub { margin-top: 30px; padding: 25px 22px; }
  .hero-actions { gap: 13px; }
  .button { width: 100%; }
  .scroll-hint { display: none; }
  .section { padding-block: 82px; }
  .section-heading { margin-bottom: 42px; }
  .section-heading h2,
  .about h2,
  .trust h2,
  .contact h2 { font-size: clamp(29px, 9vw, 42px); }
  .services { padding-inline: 14px; }
  .torn-card { min-height: 0; padding: 45px 32px 40px; }
  .service-river { width: 210%; }
  .process { width: calc(100% - 28px); }
  .process-list { grid-template-columns: 1fr; gap: 38px; }
  .process-card { min-height: 240px; }
  .process-card .thread-pin,
  .process-card:nth-child(2) .thread-pin { right: 18px; top: auto; bottom: -15px; transform: none; }
  .trust { padding: 88px 14px; }
  .trust-inner { width: 100%; }
  .values-paper,
  .company-paper { min-height: 0; padding: 42px 28px; }
  .company-note { grid-template-columns: 1fr; }
  .faq-visual { min-height: 250px; }
  .notebook { left: -12px; width: 245px; height: 220px; padding: 25px; }
  .notebook span { width: 90px; height: 70px; margin-top: 30px; font-size: 50px; }
  .pencil { left: 120px; width: 180px; }
  .faq-item summary { padding-left: 16px; font-size: 13px; }
  .faq-answer p { padding-inline: 16px 48px; }
  .contact { min-height: 520px; padding-inline: 20px; }
  .contact-actions { align-items: stretch; }
  .contact-desk { right: -25%; width: 90vw; opacity: .18; }
  .site-footer nav { gap: 5px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .thread-canvas { display: none; }
}

/* --------------------------------------------------------------------------
   Quality recovery v2: generated washi artwork + editorial motion system
   -------------------------------------------------------------------------- */

body {
  font-size: 16px;
  background-image:
    radial-gradient(circle at 18% 13%, rgba(255,255,255,.62) 0 1px, transparent 1.8px),
    repeating-linear-gradient(17deg, transparent 0 12px, rgba(8,41,95,.012) 13px, transparent 14px 25px);
  background-size: 23px 27px, auto;
}

h1,
h2,
h3 {
  line-height: 1.3;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

p,
li,
summary {
  text-wrap: pretty;
}

.heading-line,
.hero-line {
  display: block;
  white-space: nowrap;
}

.thread-canvas {
  z-index: 10;
  opacity: 0;
  filter: none;
  transition: opacity .32s ease;
}

.js.intro-complete.thread-engaged .thread-canvas {
  opacity: .92;
}

[data-thread-safe] {
  position: relative;
  z-index: 12;
}

.site-header[data-thread-safe] {
  z-index: 50;
}

.thread-pin {
  z-index: 13;
  width: 14px;
  height: 14px;
  padding: 3px;
  opacity: 0;
  background: radial-gradient(circle at 34% 27%, #f98f82 0 8%, #d23b33 30%, #9b2927 78%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 3px 7px rgba(87,8,11,.25);
  animation: none;
  transition: opacity .28s ease;
}

.thread-pin span {
  inset: 3px;
}

.js.intro-complete.thread-engaged .thread-pin {
  opacity: 1;
}

.hero {
  min-height: 930px;
  padding: 124px 32px 78px;
  color: #08295f;
  background: #f7f4ec;
}

.hero::before {
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(255,253,247,.2) 0%, rgba(255,253,247,.04) 42%, rgba(247,243,233,.2) 77%, rgba(247,243,233,.9) 100%),
    radial-gradient(ellipse at 50% 23%, rgba(255,254,250,.7), transparent 45%);
}

.hero::after {
  bottom: -66px;
  height: 180px;
  opacity: .98;
  clip-path: polygon(0 46%, 6% 52%, 13% 47%, 21% 54%, 29% 48%, 38% 53%, 47% 46%, 56% 52%, 65% 47%, 74% 54%, 83% 48%, 92% 53%, 100% 47%, 100% 100%, 0 100%);
}

.hero-wave-canvas,
.hero-grain {
  display: none !important;
}

.hero-art {
  position: absolute;
  inset: -10px;
  z-index: -4;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: opacity .72s ease;
  will-change: opacity;
}

.hero-art picture,
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-art img {
  object-fit: cover;
  object-position: center center;
  filter: saturate(.96) contrast(1.015);
}

.hero-light {
  position: absolute;
  inset: 66px 23% auto;
  z-index: -2;
  height: 560px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,254,249,.74), rgba(255,254,249,.32) 52%, transparent 75%);
}

.hero-grid {
  width: min(1360px, 100%);
  min-height: 520px;
  grid-template-columns: minmax(220px, .84fr) minmax(590px, 1.58fr) minmax(220px, .84fr);
  grid-template-areas: "business center learning";
  gap: clamp(20px, 2.7vw, 44px);
}

.hero-center {
  grid-area: center;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: 3px 20px 0;
}

.hero-side-business { grid-area: business; }
.hero-side-learning { grid-area: learning; }

.hero-center::before {
  inset: -28px -42px -30px;
  background: radial-gradient(ellipse at center, rgba(255,253,247,.7) 0 43%, rgba(255,253,247,.34) 65%, transparent 79%);
  filter: none;
}

.hero-kicker {
  margin-bottom: 15px;
  font-size: 12px;
  letter-spacing: .14em;
}

.hero-center h1 {
  margin-bottom: 21px;
  font-size: clamp(54px, 4.35vw, 62px);
  font-weight: 600;
  line-height: 1.31;
  letter-spacing: .025em;
  text-shadow: 0 2px 0 rgba(255,255,255,.82), 0 10px 30px rgba(8,41,95,.08);
}

.hero-center h1 em::after {
  left: 18%;
  right: 18%;
  bottom: -8px;
  height: 3px;
  border-top-width: 1.5px;
  opacity: .72;
}

.hero-lead {
  max-width: 600px;
  margin-bottom: 25px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .018em;
}

.hero-actions {
  gap: 16px;
}

.hero .button-primary {
  box-shadow: 0 11px 24px rgba(5,67,135,.2), inset 0 1px rgba(255,255,255,.28);
}

.hero-side {
  min-height: 410px;
  padding-top: 12px;
  text-shadow: 0 1px rgba(255,255,255,.8);
}

.hero-side h2 {
  max-width: none;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .01em;
}

.eyebrow {
  margin-bottom: 9px;
  font-size: 19px;
}

.sticky-cluster {
  height: 190px;
  margin-top: 20px;
}

.sticky {
  width: 104px;
  min-height: 82px;
  padding: 15px 9px 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  border: 1px solid rgba(42,51,60,.07);
  box-shadow: 0 12px 28px rgba(28,46,66,.13), 0 2px 5px rgba(28,46,66,.08);
  animation: none;
  transition: transform .36s cubic-bezier(.2,.75,.2,1), filter .25s ease, box-shadow .25s ease;
}

.sticky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 39px;
  height: 13px;
  background: rgba(239,231,206,.64);
  box-shadow: inset 0 0 0 1px rgba(90,74,46,.06);
  transform: translateX(-50%) rotate(-1deg);
}

.sticky::after {
  inset: auto 0 0 auto;
  width: 20px;
  height: 16px;
  background: linear-gradient(135deg, transparent 46%, rgba(60,61,57,.08) 48%, rgba(255,255,255,.42) 100%);
  clip-path: none;
}

.sticky:hover {
  filter: saturate(1.03) brightness(1.015);
  box-shadow: 0 17px 32px rgba(28,46,66,.16), 0 3px 7px rgba(28,46,66,.08);
  animation: none;
}

.sticky-blue { background: #c6deea; }
.sticky-yellow { background: #eee2a1; }
.sticky-green { background: #d7e4b8; }
.sticky-coral { background: #e7b5a8; }
.sticky-slate { background: #c9d4db; }

.hero-hub {
  z-index: 12;
  width: min(430px, calc(100% - 40px));
  min-height: 136px;
  margin-top: 118px;
  padding: 25px 34px;
  background:
    repeating-linear-gradient(18deg, transparent 0 11px, rgba(255,255,255,.02) 12px, transparent 13px 23px),
    #063d78;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  box-shadow: 0 22px 42px rgba(0,37,82,.24), inset 0 1px rgba(255,255,255,.22);
}

.hero-hub strong {
  margin: 3px 0 5px;
  font-size: clamp(22px, 2.2vw, 28px);
}

.hero-hub p,
.hero-hub span {
  line-height: 1.75;
}

.scroll-hint {
  right: 18px;
  bottom: 84px;
  opacity: .56;
}

.hero-pin {
  left: auto;
  right: -24px;
  bottom: -37px;
  transform: none;
}

/* The page itself starts moving immediately; there is no blocking splash. */
.js.intro-pending:not(.intro-running) .site-header {
  opacity: 0;
  transform: none;
}

.js.intro-pending:not(.intro-running) .hero-art {
  opacity: 1;
  transform: none;
}

.js.intro-pending:not(.intro-running) .hero-kicker,
.js.intro-pending:not(.intro-running) .hero-line,
.js.intro-pending:not(.intro-running) .hero-lead,
.js.intro-pending:not(.intro-running) .hero-actions,
.js.intro-pending:not(.intro-running) .hero-side,
.js.intro-pending:not(.intro-running) .hero-hub,
.js.intro-pending:not(.intro-running) .scroll-hint {
  opacity: 0;
  transform: none;
}

.site-header,
.hero-kicker,
.hero-line,
.hero-lead,
.hero-actions,
.hero-side,
.hero-hub,
.scroll-hint {
  transition-property: opacity;
  transition-duration: .56s;
  transition-timing-function: cubic-bezier(.2,.75,.2,1);
}

.js.intro-running .site-header,
.js.intro-running .hero-kicker,
.js.intro-running .hero-line,
.js.intro-running .hero-lead,
.js.intro-running .hero-actions,
.js.intro-running .hero-side,
.js.intro-running .hero-hub,
.js.intro-running .scroll-hint,
.js.intro-complete .site-header,
.js.intro-complete .hero-kicker,
.js.intro-complete .hero-line,
.js.intro-complete .hero-lead,
.js.intro-complete .hero-actions,
.js.intro-complete .hero-side,
.js.intro-complete .hero-hub,
.js.intro-complete .scroll-hint {
  opacity: 1;
  transform: none;
}

.js.intro-running .site-header { transition-delay: 20ms; }
.js.intro-running .hero-kicker { transition-delay: 90ms; }
.js.intro-running .hero-line:nth-child(1) { transition-delay: 180ms; }
.js.intro-running .hero-line:nth-child(2) { transition-delay: 420ms; }
.js.intro-running .hero-line:nth-child(3) { transition-delay: 760ms; }
.js.intro-running .hero-side { transition-delay: 620ms; }
.js.intro-running .hero-lead { transition-delay: 920ms; }
.js.intro-running .hero-actions { transition-delay: 1040ms; }
.js.intro-running .hero-hub { transition-delay: 1100ms; }
.js.intro-running .scroll-hint { transition-delay: 1200ms; }

.reveal {
  --reveal-y: 0px;
  --reveal-delay: 0ms;
  opacity: 1;
  transform: translateY(var(--reveal-y));
  transition: none;
}

.reveal.is-visible {
  animation: editorial-reveal .82s cubic-bezier(.2,.75,.2,1) var(--reveal-delay);
}

@keyframes editorial-reveal {
  from {
    opacity: 0;
    transform: translateY(26px) scale(.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(1200px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  will-change: auto;
}

.reveal[data-tilt] {
  transform: perspective(1200px) translateY(calc(var(--lift) + var(--reveal-y))) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.js.intro-running .hero-hub[data-tilt],
.js.intro-complete .hero-hub[data-tilt] {
  transform: perspective(1200px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

[data-tilt].is-tilting {
  will-change: transform;
}

.service-card-main[data-tilt] {
  --lift: -22px;
}

.section {
  padding-block: 104px;
}

.section-heading {
  margin-bottom: 56px;
}

.section-heading h2,
.about h2,
.trust h2,
.contact h2 {
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: .025em;
}

.section-heading > p:last-child,
.about p,
.trust-intro > p:last-child {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
}

.service-river {
  top: 340px;
  width: min(1120px, 92%);
  height: 410px;
  opacity: .17;
  background:
    radial-gradient(ellipse at 30% 50%, #67bad6, transparent 48%),
    radial-gradient(ellipse at 70% 52%, #1d78aa, transparent 52%);
  clip-path: ellipse(49% 42% at 50% 50%);
  filter: blur(8px) saturate(.82);
}

.service-river span {
  display: none;
}

.service-islands {
  gap: 26px;
}

.torn-card {
  min-height: 470px;
  padding: 48px 38px 42px;
  background:
    repeating-linear-gradient(17deg, transparent 0 13px, rgba(8,41,95,.018) 14px, transparent 15px 27px),
    linear-gradient(155deg, var(--paper-bright), var(--paper-soft));
  border: 1px solid rgba(8,41,95,.1);
  border-radius: 3px;
  clip-path: none;
  filter: none;
  box-shadow: 0 18px 40px rgba(3,38,82,.11), 0 3px 8px rgba(3,38,82,.06);
}

.torn-card::before {
  inset: 0;
  opacity: .18;
}

.service-card-main {
  margin-top: -22px;
}

.service-card h3 {
  margin-bottom: 19px;
  font-size: clamp(23px, 2vw, 28px);
  white-space: nowrap;
}

.service-card > p:not(.service-tag) {
  font-size: 14px;
  line-height: 1.9;
}

.service-card ul {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 13px;
  line-height: 1.9;
}

.section-thread-pin {
  position: absolute;
}

.services-thread-pin {
  right: max(28px, calc((100vw - 1180px) / 2));
  bottom: 42px;
}

.process {
  padding-top: 112px;
}

.process-list {
  gap: 18px;
}

.process-card {
  min-height: 314px;
  padding: 28px 25px 30px;
  background:
    repeating-linear-gradient(17deg, transparent 0 14px, rgba(8,41,95,.016) 15px, transparent 16px 29px),
    color-mix(in srgb, var(--paper-bright) 96%, var(--blue-pale));
  border: 1px solid rgba(8,41,95,.1);
  border-radius: 2px;
  box-shadow: 0 15px 34px rgba(8,41,95,.09), 0 2px 5px rgba(8,41,95,.05);
}

.process-card::before {
  display: block;
  top: -9px;
  width: 62px;
  height: 18px;
  background: rgba(164,207,222,.5);
  box-shadow: inset 0 0 8px rgba(255,255,255,.58);
}

.process-no {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
}

.process-mark {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 15px;
  color: var(--indigo);
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.86), transparent 32%),
    linear-gradient(145deg, rgba(205,232,241,.8), rgba(229,239,237,.42));
  border: 1px solid rgba(8,74,136,.12);
  border-radius: 46% 54% 52% 48% / 52% 43% 57% 48%;
  box-shadow: inset 0 1px rgba(255,255,255,.82), 0 7px 15px rgba(8,41,95,.06);
}

.process-mark svg {
  width: 72px;
  height: 72px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-mark .process-accent {
  color: var(--blue);
  stroke: currentColor;
  stroke-width: 3;
}

.process-card h3 {
  margin-bottom: 11px;
  font-size: 25px;
}

.process-card p {
  font-size: 13px;
  line-height: 1.85;
  text-wrap: balance;
}

.process-thread-pin {
  left: 26px;
  bottom: 34px;
}

.about-thread-pin {
  right: auto;
  left: -24px;
  bottom: -24px;
}

@media (min-width: 601px) and (max-width: 1024px) {
  .about-thread-pin {
    left: -12px;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .hero-center .hero-pin {
    right: calc(50% - 50vw + 2px) !important;
  }
}

@media (min-width: 1025px) {
  .process-list::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 9%;
    right: 9%;
    top: 87px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(27,97,201,.28) 9% 91%, transparent);
    box-shadow: 0 1px rgba(255,255,255,.8);
  }

  .process-card:nth-child(even) {
    margin-top: 14px;
  }
}

.trust {
  padding-block: 104px;
  background-image:
    radial-gradient(circle at 76% 8%, rgba(30,151,206,.18), transparent 32%),
    linear-gradient(125deg, #032953, #06457f 58%, #03264f);
}

.trust-inner {
  grid-template-columns: minmax(360px, .8fr) minmax(720px, 1.7fr);
  gap: 40px;
}

.trust-intro h2 {
  font-size: clamp(31px, 3vw, 42px);
  white-space: normal;
}

.trust-cards {
  gap: 14px;
}

.trust-card {
  min-height: 278px;
  padding: 29px 23px;
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.23);
  box-shadow: 0 13px 28px rgba(0,20,50,.14), inset 0 1px rgba(255,255,255,.1);
  backdrop-filter: none;
}

.trust-stamp {
  width: 59px;
  height: 59px;
  margin-bottom: 19px;
  border-width: 1px;
  border-radius: 50%;
  transform: none;
}

.trust-card h3 {
  font-size: 19px;
  line-height: 1.45;
}

.trust-card p {
  line-height: 1.82;
  text-wrap: pretty;
}

.about {
  gap: 28px;
}

.values-paper,
.company-paper {
  min-height: 450px;
  padding: clamp(34px, 4.3vw, 58px);
  background:
    repeating-linear-gradient(15deg, transparent 0 14px, rgba(8,41,95,.017) 15px, transparent 16px 28px),
    var(--paper-bright);
  border: 1px solid rgba(8,41,95,.1);
  clip-path: none;
  box-shadow: 0 16px 38px rgba(8,41,95,.1);
  transform: none;
}

.company-paper::after {
  top: -9px;
  width: 78px;
  height: 19px;
  background: rgba(221,178,150,.48);
}

.value-orbit {
  width: min(360px, 100%);
  aspect-ratio: auto;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.value-orbit::before,
.value-orbit::after {
  display: none;
}

.value-orbit span,
.value-orbit span:nth-child(n) {
  position: static;
  width: auto;
  height: 72px;
  transform: none;
  border-color: rgba(27,97,201,.38);
  border-radius: 2px;
  box-shadow: none;
}

.company-note {
  margin-top: 30px;
  padding: 19px 21px;
  background: rgba(191,226,241,.35);
}

.company-note span {
  line-height: 1.8;
}

.faq {
  width: min(920px, var(--page));
  grid-template-columns: 1fr;
  gap: 0;
}

.faq-visual {
  display: none;
}

.faq-content .section-heading {
  width: 100%;
}

.faq-item {
  border-color: rgba(8,41,95,.12);
  box-shadow: 0 5px 15px rgba(8,41,95,.045);
}

.faq-item[open] {
  transform: translateY(-1px);
}

.faq-pin {
  left: auto;
  right: -4px;
  bottom: 45px;
}

.contact {
  min-height: 440px;
  justify-content: center;
  text-align: center;
  background-image:
    repeating-radial-gradient(ellipse at 50% 115%, transparent 0 28px, rgba(255,255,255,.09) 29px 30px, transparent 31px 52px),
    linear-gradient(135deg, #07529b, #03366f 62%, #022852);
}

.contact-wave {
  opacity: .16;
}

.contact-inner {
  width: min(760px, 100%);
}

.contact-inner > p:not(.section-label) {
  margin-inline: auto;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
}

.contact-actions {
  justify-content: center;
}

.contact-desk {
  display: none;
}

.contact-pin {
  right: -24px;
  top: 52%;
}

@media (max-width: 1280px) {
  .hero-grid {
    grid-template-columns: minmax(210px, .78fr) minmax(540px, 1.52fr) minmax(210px, .78fr);
    gap: 20px;
  }

  .hero-center h1 {
    font-size: clamp(52px, 4.65vw, 59px);
  }

  .sticky {
    width: 98px;
  }

  .trust-inner {
    grid-template-columns: 1fr;
  }

  .trust-intro {
    width: min(720px, 100%);
  }

  .trust-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .hero {
    min-height: 0;
    padding: 116px 24px 74px;
  }

  .hero-grid {
    width: min(820px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "center center"
      "business learning";
    gap: 54px 34px;
  }

  .hero-center {
    grid-area: center;
  }

  .hero-side-business { grid-area: business; }
  .hero-side-learning { grid-area: learning; }

  .hero-center h1 {
    font-size: clamp(50px, 7vw, 56px);
  }

  .hero-side {
    min-height: 340px;
  }

  .sticky {
    width: 112px;
    min-height: 84px;
  }

  .hero-hub {
    margin-top: 76px;
  }

  .service-islands {
    grid-template-columns: 1fr;
    width: min(650px, 100%);
    margin-inline: auto;
    gap: 30px;
  }

  .service-card-main,
  .service-card-main[data-tilt] {
    --lift: 0px;
    margin-top: 0;
  }

  .torn-card {
    min-height: 0;
  }

  .service-river {
    top: 420px;
    height: 1200px;
    clip-path: ellipse(36% 49% at 50% 50%);
  }

  .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero-art {
    inset: 0;
  }

  .hero-light {
    inset-inline: 8%;
  }

  .primary-nav {
    z-index: 2;
  }

  .thread-canvas {
    opacity: 0;
  }

  .js.intro-complete.thread-engaged .thread-canvas {
    opacity: .78;
  }
}

@media (max-width: 768px) {
  :root {
    --page: min(100% - 36px, 680px);
  }

  .hero-grid {
    gap: 48px 22px;
  }

  .hero-center h1 {
    font-size: clamp(45px, 7.2vw, 52px);
  }

  .hero-side {
    min-height: 350px;
  }

  .sticky-cluster {
    width: min(320px, 100%);
    margin-inline: auto;
  }

  .sticky {
    width: 108px;
    font-size: 12px;
  }

  .trust-cards {
    grid-template-columns: 1fr;
  }

  .trust-card {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  :root {
    --page: min(100% - 52px, 520px);
  }

  body {
    font-size: 15px;
  }

  .heading-line,
  .hero-line {
    white-space: nowrap;
  }

  .hero {
    padding: 96px 26px 64px;
    background: #f7f4ec;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(255,253,247,.12), rgba(255,253,247,.06) 33%, rgba(247,243,233,.72) 50%, #f7f4ec 70%),
      radial-gradient(ellipse at 50% 18%, rgba(255,254,250,.62), transparent 42%);
  }

  .hero-art {
    height: auto;
    inset: 0 0 auto;
    aspect-ratio: 941 / 1672;
    overflow: hidden;
    transform: none;
  }

  .hero-art picture,
  .hero-art img {
    width: 100%;
    height: auto;
  }

  .hero-art img {
    object-fit: contain;
    object-position: center top;
  }

  .hero-light {
    inset: 70px 0 auto;
    height: 500px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "business"
      "learning";
    gap: 54px;
  }

  .hero-center {
    padding-inline: 0;
  }

  .hero-pin {
    right: -6px;
  }

  .hero-center::before {
    inset: -16px -8px -24px;
  }

  .hero-center h1 {
    font-size: clamp(34px, 9.65vw, 39px);
    line-height: 1.34;
    letter-spacing: .015em;
  }

  .hero-kicker {
    font-size: 11px;
  }

  .hero-lead {
    max-width: 35em;
    font-size: 14px;
    line-height: 1.85;
  }

  .hero-actions {
    gap: 11px;
  }

  .hero .button-primary {
    width: 100%;
  }

  .hero-side {
    min-height: 0;
    padding: 28px 12px 20px;
    text-align: left;
    background: rgba(255,253,247,.58);
    border-top: 1px solid rgba(8,41,95,.09);
  }

  .hero-side-learning h2 {
    margin-left: 0;
  }

  .hero-side h2 {
    max-width: none;
    font-size: 14px;
  }

  .eyebrow {
    font-size: 18px;
  }

  .sticky-cluster {
    width: min(334px, 100%);
    height: 198px;
    margin-top: 22px;
  }

  .sticky {
    width: 112px;
    min-height: 80px;
    font-size: 12px;
  }

  .sticky-cluster-left .sticky:nth-child(1),
  .sticky-cluster-right .sticky:nth-child(1) { left: 0; top: 0; }
  .sticky-cluster-left .sticky:nth-child(2),
  .sticky-cluster-right .sticky:nth-child(2) { left: 44%; top: 9px; }
  .sticky-cluster-left .sticky:nth-child(3),
  .sticky-cluster-right .sticky:nth-child(3) { left: 9%; top: 104px; }
  .sticky-cluster-left .sticky:nth-child(4),
  .sticky-cluster-right .sticky:nth-child(4) { left: 53%; top: 100px; }

  .hero-hub {
    width: calc(100% - 12px);
    min-height: 0;
    margin-top: 28px;
    padding: 24px 21px;
  }

  .hero-hub strong {
    font-size: 22px;
  }

  .section {
    padding-block: 78px;
  }

  .section-heading {
    margin-bottom: 40px;
  }

  .section-heading h2,
  .about h2,
  .trust h2,
  .contact h2 {
    font-size: clamp(28px, 8.2vw, 34px);
  }

  #services-title {
    font-size: clamp(28px, 8vw, 32px);
  }

  #services-title .heading-line:last-child {
    font-size: .72em;
    margin-top: 7px;
  }

  .services {
    padding-inline: 26px;
  }

  .services-thread-pin {
    right: 20px;
  }

  .torn-card {
    padding: 42px 28px 36px;
  }

  .service-card h3 {
    font-size: 23px;
  }

  .process {
    width: calc(100% - 52px);
  }

  .process-thread-pin {
    right: -6px;
    left: auto;
  }

  .process-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-card {
    min-height: 0;
  }

  .trust {
    padding: 78px 26px;
  }

  .trust-inner {
    width: 100%;
  }

  .values-paper,
  .company-paper {
    min-height: 0;
    padding: 38px 26px;
  }

  .value-orbit {
    gap: 7px;
  }

  .value-orbit span,
  .value-orbit span:nth-child(n) {
    height: 62px;
    font-size: 16px;
  }

  .company-note {
    grid-template-columns: 1fr;
  }

  .faq-item summary {
    font-size: 13px;
  }

  .contact {
    min-height: 500px;
    padding: 76px 26px;
  }

  .contact-inner > p:not(.section-label) {
    font-size: 14px;
  }

  .contact-actions {
    align-items: stretch;
  }

  .contact-actions .button {
    width: 100%;
  }

  .contact-pin {
    right: -7px;
  }
}

@media (max-width: 360px) {
  .hero-center h1 {
    font-size: 33px;
  }

  #services-title .heading-line:last-child {
    font-size: .67em;
  }

  .sticky {
    width: 105px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #171b22;
    --paper-bright: #242a34;
    --paper-soft: #1d232c;
    --ink: #edf4fb;
    --ink-2: #c6d7e8;
    --line: rgba(225,238,249,.17);
  }

  body {
    background-color: var(--paper);
    background-image: none;
  }

  .hero,
  .hero-side,
  .sticky {
    color: #08295f;
  }

  .site-header.is-scrolled {
    background: rgba(18,23,31,.9);
    color: #edf4fb;
  }

  .site-header.is-scrolled .brand img {
    filter: brightness(0) invert(1);
  }

  .site-header:not(.is-scrolled) {
    color: #08295f;
  }

  .primary-nav.is-open,
  .menu-button[aria-expanded="true"] {
    color: #fff;
  }

  .torn-card,
  .process-card,
  .values-paper,
  .company-paper,
  .faq-item {
    border-color: rgba(225,238,249,.14);
  }

  .company-note {
    background: rgba(35,107,151,.25);
  }
}

/* Card materials also use real depth planes, so the pointer tilt reads as
   layered paper rather than a flat rectangle rotating in space. */
[data-tilt] {
  transform-style: preserve-3d;
}

.hero-hub[data-tilt] > p,
.service-card[data-tilt] .paper-number,
.service-card[data-tilt] .service-tag,
.process-card[data-tilt] .process-no {
  transform: translateZ(13px);
}

.hero-hub[data-tilt] > strong,
.service-card[data-tilt] > h3,
.process-card[data-tilt] > h3,
.trust-card[data-tilt] > h3,
.values-paper[data-tilt] > h2,
.company-paper[data-tilt] > h2 {
  transform: translateZ(21px);
}

.hero-hub[data-tilt] > span,
.service-card[data-tilt] > p:not(.service-tag),
.service-card[data-tilt] > ul,
.process-card[data-tilt] > p,
.trust-card[data-tilt] > p,
.values-paper[data-tilt] > p,
.company-paper[data-tilt] > p {
  transform: translateZ(9px);
}

.hero-hub[data-tilt] > span {
  display: block;
}

.process-card[data-tilt] .process-mark,
.trust-card[data-tilt] .trust-stamp,
.values-paper[data-tilt] .value-orbit,
.company-paper[data-tilt] .company-note {
  transform: translateZ(28px);
}

.process-card[data-tilt]::before {
  transform: translate3d(-50%, 0, 31px) rotate(-2deg);
}

.trust-card[data-tilt] .trust-stamp {
  transform: translateZ(28px) rotate(-5deg);
}

@media (prefers-reduced-motion: reduce) {
  .js.intro-pending .site-header,
  .js.intro-pending .hero-art,
  .js.intro-pending .hero-kicker,
  .js.intro-pending .hero-line,
  .js.intro-pending .hero-lead,
  .js.intro-pending .hero-actions,
  .js.intro-pending .hero-side,
  .js.intro-pending .hero-hub,
  .js.intro-pending .scroll-hint,
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .thread-canvas,
  .thread-pin,
  .scroll-hint {
    display: none !important;
  }

  .hero-art {
    will-change: auto;
  }
}

@media (max-width: 600px) {
  .about-thread-pin {
    left: auto;
    right: -6px;
    bottom: 42%;
  }
}

/* --------------------------------------------------------------------------
   Hero river v7: React Three Fiber layered watercolor scene
   -------------------------------------------------------------------------- */

.hero-art,
.js.intro-pending .hero-art,
.js.intro-running .hero-art,
.js.intro-complete .hero-art {
  transform: none !important;
  transition-property: opacity;
  will-change: opacity;
}

.hero-art picture,
.hero-art img,
.hero-r3f-stage,
.hero-r3f-stage canvas {
  transform: none !important;
}

/* The paper tear at the section boundary stays independent of the river plate. */
.hero::after {
  left: -15%;
  transform: none !important;
}

.hero-art .hero-plate {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-plate img,
.hero-r3f-stage,
.hero-r3f-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-plate img {
  object-fit: cover;
  object-position: center center;
}

.hero-poster {
  z-index: 0;
}

.hero-r3f-stage {
  z-index: 1;
  opacity: 0;
  background: transparent;
  transition: opacity 420ms cubic-bezier(.2,.72,.2,1);
  will-change: opacity;
  pointer-events: none;
}

.hero-r3f-stage canvas {
  pointer-events: none !important;
}

.hero-art.is-r3f-ready .hero-r3f-stage {
  opacity: 1;
}

@media (max-width: 600px) {
  .hero-art,
  .js.intro-pending .hero-art,
  .js.intro-running .hero-art,
  .js.intro-complete .hero-art {
    transform: none !important;
  }

  .hero-plate,
  .hero-plate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }
}

/* The hero uses its portrait plate through tablet width. Poster and motion
   share one rectangle, one mask and one alignment calculation. */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero-art {
    container-type: size;
  }

  .hero-art .hero-plate {
    inset: auto;
    top: 0;
    left: 50%;
    width: min(100cqw, 56.28cqh);
    height: min(100cqh, 177.68cqw);
    transform: translateX(-50%) !important;
  }

  .hero-plate img {
    object-fit: contain;
    object-position: center top;
  }
}

@media (max-width: 1024px) {
  .hero-art .hero-plate {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0 88%, rgba(0, 0, 0, .92) 91%, rgba(0, 0, 0, .48) 96%, transparent 100%),
      linear-gradient(to right, transparent 0, rgba(0, 0, 0, .7) 2%, #000 5% 95%, rgba(0, 0, 0, .7) 98%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, #000 0 88%, rgba(0, 0, 0, .92) 91%, rgba(0, 0, 0, .48) 96%, transparent 100%),
      linear-gradient(to right, transparent 0, rgba(0, 0, 0, .7) 2%, #000 5% 95%, rgba(0, 0, 0, .7) 98%, transparent 100%);
    mask-composite: intersect;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-r3f-stage {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .hero-actions,
  .js.intro-pending .hero-actions,
  .js.intro-running .hero-actions,
  .js.intro-complete .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero-art {
    will-change: auto;
  }
}

/* Keep every reveal in its from-state throughout its delay. Animating the
   registered offset (instead of transform) preserves each card's base lift and
   lets pointer tilt continue to update without an 820ms transform lag. */
@property --reveal-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.js .reveal {
  --reveal-y: 26px;
  opacity: 0;
  animation: none;
  transition:
    opacity .82s cubic-bezier(.2,.75,.2,1) var(--reveal-delay),
    --reveal-y .82s cubic-bezier(.2,.75,.2,1) var(--reveal-delay);
}

.js .reveal.is-visible {
  --reveal-y: 0px;
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    --reveal-y: 0px;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}