/* ==========================================================================
   Mezanur Rahman – personal site
   ========================================================================== */

:root {
  --black: #000;
  --paper: #f4f4f3;
  --ink: #111;
  --muted: #6b6b6b;
  --line: #dadad8;
  --line-dark: #262626;
  --muted-dark: #8a8a8a;
  --cobalt: #0b36a8;      /* signature accent, shared with the CV */
  --cobalt-lit: #4f74ff;  /* cobalt tuned for black backgrounds */

  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(16px, 2vw, 28px);
  --cell: clamp(16px, 1.6vw, 24px);
  --header-h: 72px;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, canvas { display: block; }
sup { font-size: .42em; vertical-align: top; position: relative; top: .25em; margin-left: .2em; font-weight: 400; }

:focus-visible { outline: 2px solid var(--cobalt-lit); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; font-stretch: 90%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; }
.skip:focus { top: 12px; }

.dot {
  display: inline-block;
  width: .32em; height: .32em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin-right: .45em;
  position: relative; top: -.08em;
}
.sec-title .dot, .statement .dot, .foot-cta .dot { background: var(--cobalt); }
.foot-cta .dot { background: var(--cobalt-lit); }

/* --------------------------------------------------------------------------
   Header + menu
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  color: #fff;
  transition: color .3s, background-color .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-light {
  color: var(--ink);
  background: rgba(244, 244, 243, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.site-header.is-dark.is-scrolled { background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.menu-open .site-header { color: var(--ink); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.brand { display: flex; flex-direction: column; font-weight: 650; font-size: 12.5px; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; }
.brand .dot { width: 6px; height: 6px; margin-right: 4px; top: -1px; }

.menu-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
  transition: background-color .25s, border-color .25s, color .25s;
}
.menu-btn:hover { background: rgba(255,255,255,.12); }
.is-light .menu-btn { border-color: var(--line); background: #fff; }
.is-light .menu-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.menu-btn__icon { position: relative; width: 9px; height: 9px; transition: transform .35s var(--ease); }
.menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; background: currentColor; }
.menu-btn__icon::before { left: 0; right: 0; top: 4px; height: 1px; }
.menu-btn__icon::after { top: 0; bottom: 0; left: 4px; width: 1px; }
.menu-open .menu-btn__icon { transform: rotate(45deg); }
.menu-open .menu-btn { background: var(--ink); color: #fff; border-color: var(--ink); }

.menu {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding-top: var(--header-h);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transform: translateY(-102%);
  transition: transform .55s var(--ease), visibility 0s .55s;
  visibility: hidden;
}
.menu-open .menu { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s 0s; }
.menu__grid {
  margin: 0 var(--pad);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.menu__col { padding: var(--cell); border-right: 1px solid var(--line); }
.menu__col--nav { grid-row: span 2; border-right: 0; display: flex; flex-direction: column; gap: 18px; }
.menu__title { font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.menu__nav { display: grid; gap: 6px; font-size: 17px; }
.menu__nav a:hover, .mono-list a:hover { color: var(--cobalt); }
.menu__social { grid-column: 1 / 3; padding: 14px var(--cell); border-top: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; gap: 8px; }
.menu-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .45s;
}
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }

.mono-list { display: grid; gap: 10px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%; color: var(--muted); }

/* Buttons and pills */
.pill, .btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%;
  transition: background-color .25s, color .25s, border-color .25s;
  width: fit-content;
}
.pill:hover, .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--dark, .btn--dark { border-color: #333; color: #fff; }
.pill--dark:hover, .btn--dark:hover { background: #fff; color: #000; border-color: #fff; }

.link-dot {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%;
}
.link-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: background-color .25s, transform .25s var(--ease); }
.link-dot:hover::before { background: var(--cobalt); transform: scale(1.4); }
.link-dot--light:hover::before { background: var(--cobalt-lit); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 260vh; background: var(--black); color: #fff; }
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sphere-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* No z-index here, so each orb can sit in front of or behind the canvas */
.orbit { position: absolute; inset: 0; pointer-events: none; }
.no-webgl .orbit { display: none; }
.orb {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  will-change: transform, opacity;
  opacity: 0;
  z-index: 3;
}
.orb.is-back { z-index: 1; }
.orb__cap {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: rgba(255,255,255,.55);
  white-space: nowrap; font-stretch: 85%;
  transition: color .2s;
}
.orb.is-hover .orb__cap { color: #fff; }

/* Interface fragments that orbit the sphere */
.frag {
  font-size: 11px; line-height: 1.35; color: #e9e9e9;
  background: rgba(22, 22, 24, .82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s, transform .35s var(--ease);
}
.orb.is-hover .frag { border-color: rgba(79,116,255,.7); transform: translateY(-3px); }
.frag__muted { color: #8d8d8d; font-size: 10px; }
.frag__row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.frag__row b { font-weight: 600; color: #fff; }
.frag--confirm { width: 190px; }
.frag__btn { margin-top: 8px; background: var(--cobalt); color: #fff; text-align: center; border-radius: 7px; padding: 5px 0; font-weight: 600; }

.frag--chat { width: 180px; display: grid; gap: 6px; background: transparent; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.frag--chat .bubble { background: #2a2a2d; border-radius: 12px 12px 12px 3px; padding: 7px 10px; width: fit-content; max-width: 160px; }
.frag--chat .bubble--me { background: var(--cobalt); justify-self: end; border-radius: 12px 12px 3px 12px; }
.frag--chat .chip { justify-self: end; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; border: 1px dashed rgba(255,255,255,.4); border-radius: 999px; padding: 3px 8px; }

.frag--cursor { display: flex; align-items: flex-start; background: transparent; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cursor-tag { margin: 16px 0 0 -4px; background: var(--cobalt); color: #fff; font-weight: 600; font-size: 10.5px; padding: 2px 7px; border-radius: 4px 9px 9px 9px; }

.frag--tracks { position: relative; width: 170px; display: grid; gap: 5px; padding: 10px; }
.frag--tracks .track { position: relative; height: 10px; background: rgba(255,255,255,.05); border-radius: 3px; }
.frag--tracks .track i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 3px; background: #d9d9d9; }
.frag--tracks .track i.v { background: var(--cobalt-lit); }
.frag--tracks .track i.a { background: #6a6a70; }
.frag--tracks .playhead { position: absolute; top: 6px; bottom: 6px; left: 58%; width: 1px; background: #fff; }

.frag--quote { width: 150px; }
.quote-price { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #fff; margin: 2px 0 6px; }
.quote-price small { font-size: 10px; color: #8d8d8d; font-weight: 400; margin-left: 2px; }
.quote-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 4px; margin-bottom: 6px; }
.quote-bar i { display: block; width: 72%; height: 100%; background: var(--cobalt-lit); border-radius: 4px; }

.frag--agent { display: flex; align-items: center; gap: 10px; width: 168px; }
.agent-hex { width: 28px; height: 32px; flex: none; background: linear-gradient(160deg, #6f8fff, var(--cobalt)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

.frag--note { width: 124px; background: #f1e27c; color: #1d1a0c; border: 0; border-radius: 4px; font-size: 11.5px; font-weight: 500; padding: 12px; transform: rotate(-4deg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.orb.is-hover .frag--note { transform: rotate(-1deg) translateY(-3px); }

.frag--scan { position: relative; width: 84px; height: 84px; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.scan-corner, .scan-corner::before { position: absolute; inset: 0; }
.scan-corner { background:
    linear-gradient(#fff,#fff) 0 0 / 16px 2px no-repeat, linear-gradient(#fff,#fff) 0 0 / 2px 16px no-repeat,
    linear-gradient(#fff,#fff) 100% 0 / 16px 2px no-repeat, linear-gradient(#fff,#fff) 100% 0 / 2px 16px no-repeat,
    linear-gradient(#fff,#fff) 0 100% / 16px 2px no-repeat, linear-gradient(#fff,#fff) 0 100% / 2px 16px no-repeat,
    linear-gradient(#fff,#fff) 100% 100% / 16px 2px no-repeat, linear-gradient(#fff,#fff) 100% 100% / 2px 16px no-repeat; }
.scan-bars { position: absolute; inset: 24px 16px; background: repeating-linear-gradient(90deg, #ddd 0 2px, transparent 2px 4px, #ddd 4px 5px, transparent 5px 8px, #ddd 8px 11px, transparent 11px 13px); opacity: .85; }
.scan-line { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--cobalt-lit); box-shadow: 0 0 12px 2px rgba(79,116,255,.8); animation: scan 2.4s ease-in-out infinite alternate; }
@keyframes scan { from { top: 18%; } to { top: 82%; } }

.hero__copy {
  position: absolute; left: var(--pad); bottom: clamp(28px, 6vh, 64px); z-index: 4;
  max-width: min(760px, calc(100% - 2 * var(--pad)));
  pointer-events: none;
}
.hero__title {
  font-size: clamp(30px, 3.5vw, 54px);
  line-height: 1.08; font-weight: 450; letter-spacing: -.022em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.is-loaded .hero__title .line > span { transform: none; }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .08s; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: .16s; }
.is-loaded .hero__title .line:nth-child(4) > span { transition-delay: .24s; }
.hero__sig { margin-top: 22px; color: rgba(255,255,255,.62); opacity: 0; transition: opacity .8s .6s; }
.is-loaded .hero__sig { opacity: 1; }

.hero__meta {
  position: absolute; right: var(--pad); bottom: clamp(28px, 6vh, 64px); z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  color: rgba(255,255,255,.62);
  opacity: 0; transition: opacity .8s .7s;
}
.is-loaded .hero__meta { opacity: 1; }
.status { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt-lit); box-shadow: 0 0 0 0 rgba(79,116,255,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(79,116,255,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(79,116,255,0); } }

/* --------------------------------------------------------------------------
   Light sections and the hairline frame
   -------------------------------------------------------------------------- */
.light { position: relative; z-index: 5; background: var(--paper); color: var(--ink); }
.sheet { margin-top: -100vh; margin-top: -100svh; box-shadow: 0 -30px 60px rgba(0,0,0,.35); }
.frame {
  margin: 0 var(--pad);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.light + .light .frame { border-top: 1px solid var(--line); }

.sec-head { padding: calc(var(--cell) * 2.4) var(--cell) var(--cell); border-bottom: 1px solid var(--line); }
.sec-title { font-size: clamp(26px, 2.3vw, 36px); font-weight: 450; letter-spacing: -.02em; line-height: 1.1; }

/* Work grid */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); }
.work { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.work.span-12 { grid-column: 1 / -1; }
.work.span-4 { grid-column: span 4; }
.work-grid > .work:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
.work.span-4 .work__media { aspect-ratio: 4 / 5; }
.work__info .link-dot { justify-self: start; margin-top: 6px; }

/* Last cell: what isn't shown yet */
.work--more { display: flex; }
.more { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; margin: var(--cell); padding: calc(var(--cell) * 1.4); border: 1px dashed #c9c9c6; border-radius: 10px; }
.more__title { font-size: clamp(24px, 2vw, 32px); font-weight: 450; letter-spacing: -.02em; line-height: 1.12; max-width: 14ch; }
.more__note { color: var(--muted); max-width: 36ch; }
.work.span-4 .mock-scc, .work.span-4 .mock-composer { padding: 18% 7% 6%; }
.work.span-4 .mock-policy { padding: 18% 5% 6%; gap: 14px; }
.work.span-4 .q { padding: 10px; }
.work.span-4 .q__p { font-size: 17px; }
.work__media {
  position: relative; display: block; overflow: hidden;
  margin: var(--cell) var(--cell) 0;
  border-radius: 10px;
  aspect-ratio: 16 / 10.5;
  isolation: isolate;
}
.tag-pill {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  height: 28px; display: inline-flex; align-items: center; padding: 0 12px;
  background: #111; color: #fff; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%;
}
.tag-pill--light { background: #fff; color: #111; }
.tag-pill::after { content: "↗"; margin-left: 8px; display: inline-block; max-width: 0; overflow: hidden; transition: max-width .3s var(--ease); }
.work__media:hover .tag-pill::after, .work__media:focus-visible .tag-pill::after { max-width: 14px; }

.work__info { padding: 18px var(--cell) calc(var(--cell) * 1.4); display: grid; gap: 10px; max-width: 64ch; }
.work__role { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%; color: var(--cobalt); }
.work__info h3 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.work__info p { color: #3c3c3c; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tags li { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; font-stretch: 90%; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: #444; }

.bg-mint { background: #dde9e1; }
.bg-cobalt { background: var(--cobalt); }
.bg-black { background: #050505; }
.bg-sky { background: #e2e6f1; }

.mock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform .7s var(--ease); }
.work__media:hover .mock { transform: scale(1.025); }

/* Gonok mock */
.mock-gonok { gap: 4%; padding: 11% 6% 7%; }
.viewfinder { position: relative; width: 42%; aspect-ratio: 3 / 4; background: #1b2420; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 50px -24px rgba(15,40,25,.55); }
.vf-corner { position: absolute; width: 18px; height: 18px; border: 2px solid #fff; z-index: 2; }
.vf-corner.tl { left: 10%; top: 10%; border-right: 0; border-bottom: 0; }
.vf-corner.tr { right: 10%; top: 10%; border-left: 0; border-bottom: 0; }
.vf-corner.bl { left: 10%; bottom: 18%; border-right: 0; border-top: 0; }
.vf-corner.br { right: 10%; bottom: 18%; border-left: 0; border-top: 0; }
.box { position: absolute; border-radius: 4px; background: linear-gradient(160deg, #c9b48d, #9c8257); outline: 1.5px solid #6bd49b; outline-offset: 3px; }
.box.b1 { left: 18%; top: 30%; width: 30%; height: 22%; }
.box.b2 { left: 54%; top: 26%; width: 28%; height: 30%; background: linear-gradient(160deg, #e9e9e9, #b8b8b8); }
.box.b3 { left: 26%; top: 57%; width: 44%; height: 14%; background: linear-gradient(160deg, #4b6b9c, #2c4775); }
.vf-scan { position: absolute; left: 10%; right: 10%; height: 2px; top: 30%; background: #6bd49b; box-shadow: 0 0 14px 3px rgba(107,212,155,.7); animation: scan 2.6s ease-in-out infinite alternate; }
.vf-label { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.review { width: 46%; background: #fff; border-radius: 12px; padding: 14px; font-size: 11.5px; box-shadow: 0 30px 50px -28px rgba(15,40,25,.45); }
.review__head { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.field { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #eee; }
.field span { color: #777; }
.field b { font-weight: 550; text-align: right; }
.field--flag b { color: #a35a00; }
.field--flag { background: #fff6e6; margin: 0 -14px; padding: 7px 14px; border-top-color: #f3dcb4; }
.review__actions { display: flex; gap: 6px; margin-top: 10px; }
.review__actions span { flex: 1; text-align: center; padding: 7px 0; border-radius: 7px; font-weight: 600; }
.review__actions .ghost { border: 1px solid #ddd; }
.review__actions .solid { flex: 2; background: #12704a; color: #fff; }

/* Smart Chat Contract mock */
.mock-scc { flex-direction: column; gap: 14px; padding: 15% 9% 7%; align-items: stretch; }
.mock-scc .chat { display: grid; gap: 6px; font-size: 12px; }
.mock-scc .bubble { background: rgba(255,255,255,.14); color: #fff; padding: 8px 11px; border-radius: 13px 13px 13px 3px; width: fit-content; max-width: 78%; }
.mock-scc .bubble--me { justify-self: end; background: #fff; color: #0b1f5c; border-radius: 13px 13px 3px 13px; }
.mock-scc .bubble.is-picked { outline: 2px dashed #9fb5ff; outline-offset: 3px; }
.clause { background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 11.5px; color: #111; box-shadow: 0 26px 40px -22px rgba(0,0,30,.6); }
.clause__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: #6b7499; margin-bottom: 6px; }
.clause__body { font-weight: 500; }
.clause__foot { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }
.clause .chip { font-family: var(--mono); font-size: 9px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid #ccd3ea; }
.clause .chip--solid { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }

/* Composer mock */
.mock-composer { flex-direction: column; gap: 12px; padding: 14% 8% 7%; align-items: stretch; }
.stage { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; background: #141416; border: 1px solid #242428; border-radius: 10px; padding: 10px; min-height: 42%; }
.stage__video { border-radius: 6px; background: radial-gradient(circle at 30% 40%, #4f74ff 0, #1b2a6b 45%, #0c0f1d 100%); min-height: 80px; }
.stage__text { display: grid; gap: 7px; align-content: center; }
.stage__text i { display: block; height: 7px; border-radius: 4px; background: #3a3a40; }
.stage__text i:first-child { background: #e9e9e9; width: 80%; height: 10px; }
.stage__text i:last-child { width: 60%; }
.live { position: absolute; right: 10px; top: -10px; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; background: #fff; color: #000; padding: 3px 8px; border-radius: 999px; }
.tl { position: relative; display: grid; gap: 5px; }
.tl__row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; font-family: var(--mono); font-size: 8.5px; color: #8a8a8a; text-transform: uppercase; }
.tl__row > div { position: relative; height: 14px; background: #121214; border-radius: 3px; }
.tl__row i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 3px; background: #d9d9d9; }
.tl__row i.v { background: var(--cobalt-lit); }
.tl__row i.k { background: #f1e27c; }
.tl__row i.a { background: repeating-linear-gradient(90deg, #5a5a62 0 2px, #2a2a30 2px 4px); }
.tl__head { position: absolute; top: -4px; bottom: -4px; left: calc(50px + 46%); width: 1.5px; background: #fff; animation: playhead 7s linear infinite; }
@keyframes playhead { from { left: 50px; } to { left: calc(100% - 4px); } }

/* PolicyAdvisor mock */
.mock-policy { flex-direction: column; gap: 18px; padding: 12% 7% 7%; }
.steps { display: flex; gap: 6px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; counter-reset: s; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #fff; color: #888; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #eee; color: #666; font-size: 8px; }
.steps li.done::before { content: "✓"; background: #1d2b57; color: #fff; }
.steps li.now { color: #111; outline: 1.5px solid var(--cobalt); }
.steps li.now::before { background: var(--cobalt); color: #fff; }
.quotes { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 10px; width: 100%; align-items: center; }
.q { position: relative; background: #fff; border-radius: 12px; padding: 14px; display: grid; gap: 3px; font-size: 11px; box-shadow: 0 24px 40px -26px rgba(20,30,70,.5); }
.q__ins { color: #777; }
.q__p { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.q__m { color: #999; font-size: 10px; }
.q--best { padding: 18px 14px; outline: 2px solid var(--cobalt); }
.q__cta { margin-top: 8px; background: var(--cobalt); color: #fff; text-align: center; padding: 6px 0; border-radius: 7px; font-weight: 600; }
.badge { position: absolute; top: -9px; left: 12px; font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; background: var(--cobalt); color: #fff; padding: 2px 8px; border-radius: 999px; }


/* About */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split__a { padding: calc(var(--cell) * 2.4) var(--cell); border-right: 1px solid var(--line); }
.split__b { padding: calc(var(--cell) * 2.4) var(--cell); display: grid; gap: 16px; align-content: start; max-width: 66ch; }
.split__b p { color: #333; }
.split__b .link-dot { margin-top: 8px; }
.statement { font-size: clamp(26px, 2.6vw, 40px); font-weight: 450; letter-spacing: -.022em; line-height: 1.12; max-width: 18ch; }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr; }
.service { border-right: 1px solid var(--line); display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.service:last-child { border-right: 0; }
.service h3 { padding: calc(var(--cell) * 1.2) var(--cell) 10px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.service p { padding: 0 var(--cell) calc(var(--cell) * 1.2); color: #3c3c3c; max-width: 52ch; }
.service__list { border-top: 1px solid var(--line); align-self: start; }
.service__list li { padding: 13px var(--cell); border-bottom: 1px solid var(--line); font-size: 14px; }
.service__list li:last-child { border-bottom: 0; }
.services + * { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   Journey (dark)
   -------------------------------------------------------------------------- */
.journey {
  position: relative; z-index: 5;
  min-height: 100vh; min-height: 100svh;
  background: var(--black); color: #fff;
  overflow: hidden;
  display: flex;
}
.journey .sphere-canvas { z-index: 1; }
.journey__inner {
  position: relative; z-index: 3;
  flex: 1;
  display: flex; justify-content: space-between; align-items: stretch; gap: 40px;
  padding: calc(var(--header-h) + 40px) var(--pad) clamp(32px, 6vh, 64px);
}
.journey__intro { max-width: 380px; display: grid; gap: 16px; align-content: start; }
.journey__kicker { color: var(--muted-dark); }
.journey__intro h2 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 450; letter-spacing: -.02em; line-height: 1.12; }
.journey__intro p:not(.mono) { color: #cfcfcf; }
.glance { align-self: flex-end; width: min(330px, 100%); }
.glance h3 { font-size: 21px; font-weight: 450; margin-bottom: 12px; }
.glance dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid #3a3a3a; }
.glance dt { color: #eaeaea; }
.glance dd { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; font-stretch: 90%; color: #fff; }

/* 3D text ring around the journey sphere */
.ring {
  --r: clamp(150px, 19vw, 280px);
  position: absolute; left: 50%; top: calc(50% - 27px); z-index: 2;
  width: 0; height: 0;
  perspective: 1400px;
}
.ring__band {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  transform: rotateX(-14deg);
  animation: spin 38s linear infinite;
}
.ring__band--low { top: 54px; animation-duration: 52s; animation-direction: reverse; }
.ring__band span {
  position: absolute; left: -.5ch; top: -.6em;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-stretch: 90%;
  color: rgba(255,255,255,.8);
  width: 1ch; text-align: center;
}
.ring__band--low span { color: rgba(79,116,255,.85); }
@keyframes spin { from { transform: rotateX(-14deg) rotateY(0); } to { transform: rotateX(-14deg) rotateY(360deg); } }

/* --------------------------------------------------------------------------
   History timeline
   -------------------------------------------------------------------------- */
.timeline { padding-bottom: calc(var(--cell) * 3); }
.tl-group { padding: calc(var(--cell) * 1.6) var(--cell) 10px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.tl-item { border-bottom: 1px solid var(--line); }
.tl-item__row {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 1.2fr 2fr 2.4fr 1.4fr 24px; gap: 16px; align-items: baseline;
  padding: 20px var(--cell);
  transition: background-color .25s;
}
.tl-item__row:hover { background: #ececea; }
.tl-when { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; color: var(--muted); font-stretch: 90%; }
.tl-org { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.tl-role { color: #333; }
.tl-where { color: var(--muted); font-size: 14px; }
.tl-plus { position: relative; width: 12px; height: 12px; align-self: center; justify-self: end; transition: transform .35s var(--ease); }
.tl-plus::before, .tl-plus::after { content: ""; position: absolute; background: currentColor; }
.tl-plus::before { left: 0; right: 0; top: 5.5px; height: 1px; }
.tl-plus::after { top: 0; bottom: 0; left: 5.5px; width: 1px; }
.tl-item__row[aria-expanded="true"] .tl-plus { transform: rotate(45deg); }
.tl-item__row[aria-expanded="true"] .tl-org { color: var(--cobalt); }
.tl-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.tl-item.is-open .tl-item__body { grid-template-rows: 1fr; }
.tl-item__body > div { overflow: hidden; }
.tl-item__body ul, .tl-item__body p {
  margin-left: calc(var(--cell) + (100% - 2 * var(--cell)) * 1.2 / 7 + 16px);
  margin-right: var(--cell);
  padding-bottom: 22px; max-width: 64ch; color: #333;
}
.tl-item__body ul { display: grid; gap: 6px; }
.tl-item__body li { position: relative; padding-left: 16px; }
.tl-item__body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--cobalt); }
.tl-item__body strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { position: relative; z-index: 5; background: var(--black); color: #fff; }
.frame--dark { border-color: var(--line-dark); border-top: 0; }
.foot-top { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-dark); min-height: 340px; }
.foot-cta {
  padding: calc(var(--cell) * 3) var(--cell);
  border-right: 1px solid var(--line-dark);
  font-size: clamp(28px, 3vw, 46px); font-weight: 450; letter-spacing: -.022em; line-height: 1.08;
}
.foot-cta .nowrap { white-space: nowrap; }
.foot-cta span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease); }
.foot-cta:hover span[aria-hidden] { transform: translateX(8px); }
.foot-contact { padding: calc(var(--cell) * 3) var(--cell); display: grid; gap: 6px; align-content: start; }
.foot-contact > p:first-child { font-size: 18px; }
.foot-muted { color: var(--muted-dark); }
.foot-mail { font-size: 18px; margin-top: 14px; width: fit-content; border-bottom: 1px solid transparent; transition: border-color .25s; }
.foot-mail:hover { border-bottom-color: #fff; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.foot-col { padding: var(--cell); border-right: 1px solid var(--line-dark); }
.foot-col:nth-child(4) { border-right: 0; grid-row: span 2; }
.foot-col h3 { font-size: 17px; font-weight: 450; margin-bottom: 18px; }
.foot-col .mono-list { color: var(--muted-dark); }
.foot-col .mono-list a:hover { color: #fff; }
.foot-nav { display: grid; gap: 8px; font-size: 17px; }
.foot-nav a:hover { color: var(--cobalt-lit); }
.foot-social { grid-column: 1 / 4; display: flex; gap: 8px; padding: 14px var(--cell); border-top: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px var(--pad) 28px;
  font-size: 12.5px; color: var(--muted-dark);
  border-top: 1px solid var(--line-dark);
  margin: 0 var(--pad);
  padding-left: 0; padding-right: 0;
}
.foot-sign { color: #fff; text-transform: uppercase; font-size: 13px; letter-spacing: .01em; }
.foot-sign .dot { background: var(--cobalt-lit); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .tl-item__row { grid-template-columns: 1fr 2fr 24px; row-gap: 4px; }
  .tl-role { grid-column: 2; grid-row: 2; }
  .tl-where { grid-column: 2; grid-row: 3; }
  .tl-plus { grid-column: 3; grid-row: 1; }
  .tl-item__body ul, .tl-item__body p { margin-left: calc(var(--cell) + (100% - 2 * var(--cell) - 40px) / 3 + 16px); }
}

@media (min-width: 901px) and (max-width: 1140px) {
  .work.span-4 { grid-column: span 6; }
  .work-grid > .work:not(:nth-child(3n+1)) { border-left: 0; }
  .work-grid > .work:nth-child(2n) { border-left: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .work.span-4 { grid-column: 1 / -1; }
  .work-grid > .work:not(:nth-child(3n+1)) { border-left: 0; }
  .more { min-height: 220px; }
  .split { grid-template-columns: 1fr; }
  .split__a { border-right: 0; border-bottom: 1px solid var(--line); }
  .services { grid-template-columns: 1fr; }
  .service { border-right: 0; border-bottom: 1px solid var(--line); grid-row: auto; display: flex; flex-direction: column; }
  .services { grid-template-rows: none; }
  .service__list { align-self: stretch; }
  .service:last-child { border-bottom: 0; }
  .menu__grid { grid-template-columns: 1fr 1fr; }
  .menu__col:nth-child(2) { border-right: 0; }
  .menu__col--nav { grid-row: auto; grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .menu__social { grid-column: 1 / -1; border-right: 0; }
  .foot-top { grid-template-columns: 1fr; min-height: 0; }
  .foot-cta { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-col:nth-child(2) { border-right: 0; }
  .foot-col:nth-child(3), .foot-col:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .foot-col:nth-child(4) { grid-row: auto; }
  .foot-social { grid-column: 1 / -1; border-right: 0; }
  .journey__inner { flex-direction: column; justify-content: space-between; }
  .glance { align-self: stretch; width: 100%; background: rgba(0,0,0,.55); }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .hero { height: 210vh; }
  .hero__title { font-size: clamp(27px, 7.6vw, 36px); }
  .hero__title .line > span { display: inline; }
  .hero__title .line { display: inline; overflow: visible; }
  .hero__title .line::after { content: " "; }
  .hero__copy { bottom: 92px; }
  .hero__meta { left: var(--pad); right: auto; bottom: 24px; align-items: flex-start; }
  .orb { transform-origin: center; }
  .frag { font-size: 10px; }
  .mock-gonok { padding: 15% 4% 5%; }
  .work__media { aspect-ratio: 4 / 3.4; }
  .mock-scc { padding: 20% 6% 6%; gap: 10px; }
  .mock-scc .bubble:first-child { display: none; }
  .mock-scc .chat { font-size: 11px; }
  .mock-policy { padding: 20% 5% 6%; gap: 14px; }
  .mock-composer { padding: 20% 6% 6%; }
  .orb[data-small="off"] { display: none; }
  .review { font-size: 10px; padding: 10px; }
  .review__head { font-size: 11px; }
  .field { padding: 5px 0; }
  .field--flag { display: none; }
  .mock-policy .quotes .q:not(.q--best) .q__p { font-size: 16px; }
  .q { padding: 10px; }
  .q__p { font-size: 18px; }
  .tl-item__row { grid-template-columns: 1fr 24px; }
  .tl-when { grid-column: 1; grid-row: 1; }
  .tl-org { grid-column: 1; grid-row: 2; }
  .tl-role { grid-column: 1; grid-row: 3; }
  .tl-where { grid-column: 1; grid-row: 4; }
  .tl-plus { grid-column: 2; grid-row: 1 / 3; }
  .tl-item__body ul, .tl-item__body p { margin-left: var(--cell); }
  .menu__grid { grid-template-columns: 1fr; }
  .menu__col { border-right: 0; border-bottom: 1px solid var(--line); }
  .menu__col:nth-child(2) { display: none; }
  .foot-cols { grid-template-columns: 1fr; }
  .foot-col { border-right: 0; border-top: 1px solid var(--line-dark); }
  .foot-col:first-child { border-top: 0; }
  .ring { --r: 130px; }
}

/* JS-free hero fallback: show the headline even if scripts fail */
.no-js .hero__title .line > span { transform: none; }
.no-js .hero__sig, .no-js .hero__meta { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .ring__band { animation: none; }
}