:root {
  --ink: #070a1c;
  --ink-soft: #101638;
  --ink-mid: #171d47;
  --paper: #f7f7fb;
  --mist: #b7bfd8;
  --muted: #7e89ad;
  --line: rgba(90, 220, 255, 0.34);
  --cerulean: #42d9ff;
  --magenta: #ff2ba7;
  --magenta-dark: #c80d79;
  --magenta-light: #ff80c8;
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Manrope", Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --shell: min(1440px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 86% 8%, rgba(71, 36, 130, .35), transparent 27rem),
    radial-gradient(circle at 8% 48%, rgba(8, 81, 141, .22), transparent 32rem),
    var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
}
body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: .48;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 78% 13%, rgba(66,217,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 64% 67%, rgba(255,43,167,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 28% 80%, rgba(255,255,255,.65) 0 1px, transparent 1.5px);
  background-size: 220px 240px, 320px 300px, 410px 360px, 280px 260px;
  pointer-events: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--cerulean); outline-offset: 4px; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: .96; }
.section-shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 20; left: 1rem; top: -4rem; padding: .65rem .9rem; background: var(--cerulean); color: var(--ink); font-weight: 800; transition: top .2s ease; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--shell);
  margin-inline: auto;
  min-height: 108px;
  border-bottom: 1px solid rgba(101, 203, 255, .22);
}
.brand { display: block; width: min(255px, 31vw); }
.brand img, .footer-brand img { width: 100%; mix-blend-mode: screen; filter: contrast(1.14) brightness(1.2); }
.site-header nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.5rem); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-header nav > a:not(.nav-cta) { color: var(--mist); transition: color .2s ease; }
.site-header nav > a:not(.nav-cta):hover { color: var(--cerulean); }
.nav-cta { border: 1px solid var(--magenta); padding: .7rem .95rem; color: var(--paper); transition: background .2s ease, color .2s ease; }
.nav-cta:hover { background: var(--magenta); color: var(--ink); }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--paper); }

.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(560px, 1.42fr) minmax(330px, .95fr) minmax(180px, .54fr); gap: clamp(1rem, 2vw, 2.25rem); align-items: center; min-height: min(860px, 100svh); padding: 144px max(20px, calc((100% - 1500px) / 2)) 74px; overflow: hidden; }
.star-field { position: absolute; z-index: -1; inset: 0; opacity: .92; background: radial-gradient(circle at 54% 39%, rgba(61, 215, 255, .16), transparent 17%), radial-gradient(circle at 87% 66%, rgba(255, 43, 167, .16), transparent 18%); }
.star-field::before, .star-field::after { position: absolute; content: ""; border: 1px solid rgba(66,217,255,.23); border-radius: 50%; }
.star-field::before { width: 690px; height: 690px; left: 38%; top: 6%; transform: rotate(-22deg) scaleY(.37); animation: orbit-drift 18s ease-in-out infinite alternate; }
.star-field::after { width: 930px; height: 930px; left: 28%; top: -5%; border-color: rgba(255,43,167,.15); transform: rotate(44deg) scaleY(.2); animation: orbit-drift 23s ease-in-out infinite alternate-reverse; }
.ecosystem-layer { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.world-grid { position: absolute; inset: -20%; opacity: .22; background-image: linear-gradient(rgba(66,217,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(66,217,255,.18) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse at 66% 44%, black 0%, transparent 66%); transform: perspective(900px) rotateX(66deg) translateY(24%); animation: grid-breathe 15s ease-in-out infinite alternate; }
.world-network { position: absolute; left: -3%; top: clamp(88px, 8vw, 132px); width: 106%; max-width: none; height: auto; opacity: .52; filter: drop-shadow(0 0 18px rgba(66,217,255,.15)) drop-shadow(0 0 36px rgba(255,43,167,.09)); mix-blend-mode: screen; animation: map-drift 18s ease-in-out infinite alternate; }
.flow-route { position: absolute; width: clamp(500px, 63vw, 980px); height: clamp(145px, 22vw, 290px); border: 1px solid rgba(66,217,255,.26); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 8px rgba(66,217,255,.28)); transform: rotate(-16deg); }.flow-route span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px rgba(255,43,167,.14), 0 0 15px var(--magenta); animation: route-pulse 7s linear infinite; }
.route-one { left: 15%; top: 22%; }.route-one span { left: 8%; top: 25%; }
.route-two { right: -13%; bottom: 9%; border-color: rgba(255,43,167,.34); border-right-color: transparent; border-top-color: transparent; transform: rotate(24deg); }.route-two span { right: 12%; bottom: 11%; background: var(--cerulean); box-shadow: 0 0 0 4px rgba(66,217,255,.14), 0 0 15px var(--cerulean); animation-delay: -3s; }
.route-three { left: -18%; bottom: 11%; width: clamp(430px, 50vw, 760px); height: clamp(110px, 13vw, 175px); border-color: rgba(255,43,167,.2); border-right-color: transparent; transform: rotate(9deg); }.route-three span { left: 63%; top: 11%; background: var(--cerulean); box-shadow: 0 0 0 4px rgba(66,217,255,.14), 0 0 15px var(--cerulean); animation-delay: -5s; }
.hero-watermark { position: absolute; z-index: -1; top: 42%; left: 50%; width: 110vw; margin: 0; color: var(--magenta); font-family: var(--display); font-size: clamp(8rem, 23vw, 22rem); font-weight: 800; letter-spacing: -.065em; line-height: .7; text-align: center; white-space: nowrap; opacity: .28; transform: translate(-50%, -50%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; max-width: 720px; padding-top: 1.5rem; }
.eyebrow, .section-index, .contact-index { margin-bottom: 1.2rem; color: var(--cerulean); font-size: .68rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: .55rem; border-radius: 100%; background: #91ffae; box-shadow: 0 0 11px #91ffae; }
.hello { margin-bottom: -.15rem; color: var(--magenta-light); font-family: var(--serif); font-size: clamp(1.6rem, 2.7vw, 2.45rem); font-style: italic; line-height: 1; }
.hero h1 { margin-bottom: .7rem; font-family: var(--display); font-size: clamp(5.8rem, 10.3vw, 10.25rem); font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; }
.hero h1.hero-headline { max-width: none; margin-bottom: 1rem; font-size: clamp(3.15rem, 4vw, 4.35rem); letter-spacing: -.035em; line-height: .97; }
.hero-headline .hero-line { display: block; white-space: nowrap; }
.hero-role { margin-bottom: 1.35rem; color: var(--paper); font-size: .78rem; font-weight: 800; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; }
.hero-role span { padding-inline: .45rem; color: var(--magenta); }
.hero-summary { max-width: 385px; margin-bottom: 1.25rem; color: var(--mist); font-size: clamp(.92rem, 1.2vw, 1.04rem); }
.hero-location { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .11em; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; gap: .6rem; min-height: 46px; padding: .76rem 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--magenta); color: var(--ink); }
.button-primary:hover { background: var(--magenta-light); }
.text-link { display: inline-flex; gap: .45rem; color: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: .25rem; font-size: .74rem; font-weight: 800; letter-spacing: .04em; transition: color .2s ease, border .2s ease; }
.text-link:hover { border-color: var(--magenta); color: var(--magenta-light); }
.hero-social-block { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.45rem; }
.hero-social-block p { margin: 0; color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero-social { display: flex; align-items: center; gap: .45rem; }
.social-link { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(66,217,255,.4); border-radius: 50%; color: var(--paper); transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease; }
.social-link:hover { border-color: var(--magenta); background: var(--magenta); color: var(--ink); transform: translateY(-3px); }
.social-link svg { width: 15px; height: 15px; fill: currentColor; }

.portrait-stage { position: relative; z-index: 2; justify-self: center; width: min(100%, 520px); min-height: 600px; }
.portrait-frame { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: min(430px, 88%); aspect-ratio: 4/5; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); border-radius: 45% 45% 38% 38% / 35% 35% 15% 15%; box-shadow: 0 30px 80px rgba(0,0,0,.38), 0 0 0 10px rgba(8,10,28,.38); transform: translate(-50%, -50%); }
.portrait-frame::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(13,15,37,0) 40%, rgba(7,10,28,.45) 100%); pointer-events: none; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 17%; transform: scale(1.08); }
.orbit { position: absolute; z-index: 1; left: 50%; top: 50%; border: 1px solid rgba(66,217,255,.46); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 105%; height: 59%; transform: translate(-50%, -50%) rotate(-33deg); }
.orbit-two { width: 122%; height: 40%; border-color: rgba(255,43,167,.45); transform: translate(-50%, -50%) rotate(42deg); }
.portrait-caption { position: absolute; z-index: 3; color: var(--paper); font-size: .58rem; font-weight: 800; letter-spacing: .13em; line-height: 1.4; }
.top-caption { top: 5%; right: -3%; writing-mode: vertical-rl; transform: rotate(180deg); }
.bottom-caption { bottom: 5%; left: 3%; color: var(--cerulean); }
.hero-proof { position: relative; z-index: 2; align-self: center; padding-left: clamp(1rem, 2.8vw, 2.8rem); border-left: 1px solid var(--line); }
.proof-intro { max-width: 220px; margin-bottom: 2.5rem; color: var(--mist); font-size: .9rem; line-height: 1.5; }
.hero-proof dl { margin: 0; }
.hero-proof dl > div { padding-block: 1.05rem; border-top: 1px solid rgba(183,191,216,.25); }
.hero-proof dt { color: var(--magenta); font-family: var(--display); font-size: clamp(3.6rem, 5.4vw, 5.3rem); font-weight: 700; letter-spacing: -.05em; line-height: .76; }
.hero-proof dt span { font-size: .45em; vertical-align: top; }
.hero-proof dd { margin: .45rem 0 0; color: var(--paper); font-size: .69rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.hero-proof small { color: var(--muted); font-size: .58rem; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.hero-ticker { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-around; gap: 1rem; min-height: 52px; padding-inline: 2rem; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--mist); font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hero-ticker i { color: var(--magenta); font-size: .8rem; font-style: normal; }

.intro-section { padding-block: clamp(6.5rem, 10vw, 10rem); }
.intro-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.intro-layout h2, .section-heading h2, .lower-grid h2, .writing-inner h2, .faq-heading h2, .contact-section h2 { margin: 0; font-family: var(--display); font-size: clamp(3.75rem, 7vw, 7.5rem); font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.intro-copy { max-width: 620px; padding-top: .65rem; }
.intro-copy p { color: var(--mist); font-size: 1rem; }
.intro-copy p + p { margin-top: 1.2rem; color: var(--paper); font-weight: 600; }
.service-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.service-path { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 390px; padding: clamp(1.7rem, 2.6vw, 2.65rem); overflow: hidden; border: 1px solid rgba(66,217,255,.78); background: linear-gradient(145deg, rgba(34,51,124,.96), rgba(8,13,43,.99)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 20px 50px rgba(0,0,0,.28); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.service-path::after { position: absolute; right: -18%; bottom: -27%; width: 62%; aspect-ratio: 1; border: 1px solid rgba(66,217,255,.26); border-radius: 50%; content: ""; transition: transform .35s ease, border-color .25s ease; }
.service-path-improvement { border-color: rgba(255,43,167,.86); background: linear-gradient(145deg, rgba(78,16,107,.96), rgba(14,16,53,.99)); }
.service-path-improvement::after { border-color: rgba(255,43,167,.35); }
.service-path:hover { border-color: var(--paper); background: linear-gradient(145deg, rgba(45,67,151,.99), rgba(11,18,60,1)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.19), 0 26px 62px rgba(0,0,0,.4); transform: translateY(-7px); }
.service-path-improvement:hover { background: linear-gradient(145deg, rgba(93,15,115,.98), rgba(22,18,67,.99)); }
.service-path:hover::after { border-color: var(--paper); transform: scale(1.18); }
.service-path-label { position: relative; z-index: 1; margin-bottom: 1.15rem; color: var(--cerulean) !important; font-size: .58rem !important; font-weight: 800 !important; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.service-path-improvement .service-path-label { color: var(--magenta-light) !important; }
.service-path h3 { position: relative; z-index: 1; max-width: 320px; margin: 0 0 1.15rem; color: var(--paper); font-family: var(--display); font-size: clamp(2.6rem, 3.4vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: .86; text-transform: uppercase; }
.service-path p:last-of-type { position: relative; z-index: 1; max-width: 290px; margin: 0; color: var(--paper); font-size: .88rem; font-weight: 500; line-height: 1.55; }
.service-path-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding: .9rem 1rem; border: 1px solid var(--cerulean); background: var(--cerulean); color: var(--ink); font-size: .65rem; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.service-path-improvement .service-path-action { border-color: var(--magenta); background: var(--magenta); }
.service-path-action span, .service-path-improvement .service-path-action span { color: var(--ink); font-size: 1.35rem; line-height: .8; transition: transform .2s ease; }
.service-path:hover .service-path-action { border-color: var(--paper); background: var(--paper); transform: translateY(-2px); }
.service-path:hover .service-path-action span { transform: translate(3px, -3px); }
.capability-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.capability-list li, .skill-tags span { border: 1px solid rgba(66,217,255,.45); padding: .36rem .56rem; color: var(--cerulean); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.evidence-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 1.5rem max(32px, calc((100% - 1440px) / 2)); background: var(--cerulean); color: var(--ink); }
.evidence-strip p { max-width: 780px; margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.8rem); font-weight: 700; letter-spacing: -.025em; line-height: .95; text-transform: uppercase; }
.evidence-mark { color: var(--magenta-dark); }
.evidence-strip a { border-bottom: 1px solid rgba(7,10,28,.5); padding-bottom: .2rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }

.work-section { padding-block: clamp(6.5rem, 11vw, 11rem); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 3rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 6rem); }
.section-heading h2 { max-width: 730px; font-size: clamp(3.4rem, 6.3vw, 6.8rem); }
.section-heading > p { margin: 0 0 .55rem; color: var(--mist); font-size: .92rem; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.work-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(.75rem, 1.25vw, 1.3rem); background: linear-gradient(145deg, rgba(27,35,81,.75), rgba(10,14,37,.76)); border: 1px solid rgba(66,217,255,.27); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.work-card:hover { border-color: var(--magenta); box-shadow: 0 18px 52px rgba(0,0,0,.28); transform: translateY(-8px); }
.work-visual { position: relative; min-height: 314px; overflow: hidden; padding: 1rem; background: #0d1230; border: 1px solid rgba(255,255,255,.12); }
.browser-bar { display: flex; gap: .32rem; }
.browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.browser-bar span:nth-child(2) { background: var(--cerulean); }.browser-bar span:nth-child(3) { background: var(--magenta); }
.visual-kicker { margin-top: 2.2rem; color: var(--cerulean); font-size: .55rem; font-weight: 800; letter-spacing: .13em; }
.visual-content { background: linear-gradient(140deg, #1d215d 0%, #0d1230 65%); }
.visual-content::before { position: absolute; right: -13%; bottom: -31%; width: 72%; aspect-ratio: 1; content: ""; border: 1px solid var(--magenta); border-radius: 50%; box-shadow: 0 0 80px rgba(255,43,167,.35); }
.visual-title { position: relative; z-index: 1; margin-top: 1.35rem; color: var(--paper); font-family: var(--display); font-size: clamp(2.5rem, 4vw, 3.9rem); font-weight: 700; line-height: .82; }
.visual-lines { position: absolute; right: 1rem; bottom: 3.6rem; left: 1rem; z-index: 1; }
.visual-lines i { display: block; height: 5px; margin-top: 7px; background: rgba(66,217,255,.38); }.visual-lines i:nth-child(2) { width: 68%; background: rgba(255,255,255,.26); }.visual-lines i:nth-child(3) { width: 40%; background: var(--magenta); }
.visual-tag { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; color: var(--paper); font-size: .55rem; font-weight: 800; letter-spacing: .12em; }
.visual-clickup { background: radial-gradient(circle at 90% 10%, rgba(66,217,255,.35), transparent 32%), #101638; }
.workflow-list { display: grid; gap: .85rem; margin-top: 1.8rem; }.workflow-list div { display: grid; grid-template-columns: 25px 1fr 42px; align-items: center; gap: .6rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.13); color: var(--paper); font-size: .72rem; font-weight: 700; }.workflow-list b { color: var(--magenta); font-family: var(--display); font-size: 1.2rem; }.workflow-list em { height: 4px; background: var(--cerulean); }.workflow-list div:nth-child(2) em { width: 78%; background: var(--magenta); }.workflow-list div:nth-child(3) em { width: 55%; }.workflow-list div:nth-child(4) em { width: 86%; background: rgba(255,255,255,.6); }
.visual-products { background: linear-gradient(135deg, #390a4d, #0c1641 72%); }.product-stack { display: grid; gap: .35rem; margin-top: 1.45rem; transform: rotate(-5deg); }.product-stack div { padding: .7rem .85rem; color: var(--ink); background: var(--paper); font-family: var(--display); font-size: .7rem; line-height: 1.1; }.product-stack div strong { display: block; font-size: 2rem; letter-spacing: .04em; }.product-stack div:nth-child(2) { margin-left: 1rem; background: var(--cerulean); }.product-stack div:nth-child(3) { margin-left: 2rem; background: var(--magenta); }
.work-meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.1rem; color: var(--cerulean); font-size: .58rem; font-weight: 800; letter-spacing: .11em; line-height: 1.3; }.work-meta span:first-child { color: var(--magenta); font-family: var(--display); font-size: 1.35rem; letter-spacing: 0; }
.work-card h3 { max-width: 300px; margin: 1.2rem 0 .85rem; color: var(--paper); font-family: var(--display); font-size: clamp(2rem, 2.6vw, 2.7rem); font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; }.work-card > p { color: var(--mist); font-size: .83rem; }.work-card > a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid rgba(66,217,255,.27); color: var(--paper); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.work-arrow { color: var(--magenta); font-size: 1.25rem; transition: transform .2s ease; }.work-card a:hover .work-arrow { transform: translate(3px, -3px); }

.products-section {
  padding-block: clamp(6rem, 10vw, 9.5rem);
  background: var(--paper);
  color: var(--ink);
  border-block: 1px solid rgba(7,10,28,.18);
}
.products-inner { width: var(--shell); margin-inline: auto; }
.products-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.products-heading .section-index { color: var(--magenta-dark); }
.products-heading h2 { max-width: 780px; margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(3.5rem, 6.5vw, 7rem); font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.products-heading > p { max-width: 360px; margin: 0 0 .55rem; color: #29325f; font-size: .92rem; }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--ink); background: var(--ink); }
.product-card { --product-accent: var(--magenta); display: flex; flex-direction: column; min-height: 535px; padding: clamp(1.35rem, 2.2vw, 2.35rem); background: var(--paper); border-top: 8px solid var(--product-accent); color: var(--ink); transition: background .2s ease; }
.product-card:hover { background: #eefaff; }
.product-card-outreach { --product-accent: var(--magenta); }
.product-card-writers { --product-accent: #019fc6; }
.product-card-free { --product-accent: var(--ink); }
.product-card-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(7,10,28,.24); }
.product-number { color: var(--product-accent); font-family: var(--display); font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: .75; }
.product-card-top p { margin: 0; color: var(--ink); font-size: .58rem; font-weight: 800; letter-spacing: .12em; line-height: 1.35; text-align: right; }
.product-signal { display: flex; flex-direction: column; justify-content: center; min-height: 124px; padding-block: 1.35rem 1rem; }
.product-signal span { color: var(--product-accent); font-size: .62rem; font-weight: 800; letter-spacing: .15em; }
.product-signal strong { color: var(--product-accent); font-family: var(--display); font-size: clamp(4.2rem, 6.4vw, 6.8rem); font-weight: 700; letter-spacing: -.065em; line-height: .74; }
.product-card-writers .product-signal span, .product-card-free .product-signal span { font-family: var(--display); font-size: clamp(4.2rem, 6.4vw, 6.8rem); font-weight: 700; letter-spacing: -.065em; line-height: .74; }
.product-card-writers .product-signal strong, .product-card-free .product-signal strong { margin-top: .35rem; color: var(--ink); font-family: var(--body); font-size: .58rem; font-weight: 800; letter-spacing: .14em; line-height: 1.3; }
.product-status { margin: 0 0 .9rem; color: var(--magenta-dark); font-size: .58rem; font-weight: 800; letter-spacing: .11em; line-height: 1.4; }
.product-card h3 { max-width: 530px; margin: 0 0 1rem; color: var(--ink); font-family: var(--display); font-size: clamp(2.65rem, 3.65vw, 4rem); font-weight: 700; letter-spacing: -.04em; line-height: .82; text-transform: uppercase; }
.product-card h3 strong { color: var(--product-accent); font-weight: 700; }
.product-description { margin: 0; color: #303757; font-size: .86rem; }
.product-note { margin: 1.45rem 0 1.65rem; color: var(--ink); font-size: .56rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.product-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(7,10,28,.3); color: var(--ink); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: color .2s ease; }
.product-link span { color: var(--product-accent); font-size: 1.4rem; transition: transform .2s ease; }
.product-link:hover { color: var(--magenta-dark); }
.product-link:hover span { transform: translate(3px, -3px); }

.lower-section { padding-bottom: clamp(6.5rem, 10vw, 10rem); }.lower-grid { display: grid; grid-template-columns: .9fr 1.2fr .72fr; gap: 1px; background: rgba(66,217,255,.26); border: 1px solid rgba(66,217,255,.26); }.skills-panel, .process-panel, .quote-panel { min-width: 0; padding: clamp(1.5rem, 3vw, 3.25rem); background: rgba(10,14,37,.9); }.lower-grid h2 { margin-bottom: 1.45rem; font-size: clamp(2.8rem, 4.2vw, 4.2rem); }.panel-lead { color: var(--mist); font-size: .85rem; }.credential-list { margin: 2rem 0 1.75rem; }.credential-list > div { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: .9rem 0; border-top: 1px solid rgba(183,191,216,.2); }.credential-list dt { color: var(--paper); font-size: .74rem; font-weight: 700; }.credential-list dd { margin: 0; color: var(--cerulean); font-size: .58rem; font-weight: 800; letter-spacing: .08em; }.skill-tags { display: flex; flex-wrap: wrap; gap: .45rem; }.skill-tags span { color: var(--paper); border-color: rgba(255,255,255,.32); font-size: .55rem; }
.process-panel { background: rgba(14,20,53,.93); }.process-list { display: grid; gap: 0; margin: 1.8rem 0 0; padding: 0; list-style: none; }.process-list li { display: grid; grid-template-columns: 32px 29px 1fr; gap: .85rem; padding: .9rem 0; border-top: 1px solid rgba(183,191,216,.2); }.process-number { color: var(--muted); font-family: var(--display); font-size: 1.1rem; font-weight: 700; }.process-icon { display: grid; place-items: center; width: 25px; height: 25px; color: var(--cerulean); border: 1px solid var(--cerulean); border-radius: 50%; font-size: .68rem; }.process-list h3 { margin: 0 0 .25rem; color: var(--magenta-light); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.process-list p { margin: 0; color: var(--mist); font-size: .73rem; line-height: 1.45; }
.quote-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; background: linear-gradient(160deg, var(--magenta), #8f0758); }.quote-mark { color: rgba(255,255,255,.38); font-family: var(--serif); font-size: 7rem; line-height: .45; }.quote-panel blockquote { margin: 2rem 0; font-family: var(--display); font-size: clamp(2.1rem, 3vw, 3.4rem); font-weight: 600; letter-spacing: -.025em; line-height: .92; text-transform: uppercase; }.signature { margin-top: auto; color: var(--paper); font-family: var(--serif); font-size: 1.8rem; font-style: italic; }.quote-panel a { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.45); font-size: .62rem; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }

.writing-section { position: relative; padding-bottom: clamp(6.5rem, 10vw, 10rem); }.writing-inner { position: relative; overflow: hidden; max-width: 1030px; padding: clamp(3rem, 7vw, 7rem); border: 1px solid var(--line); background: linear-gradient(110deg, rgba(19,25,67,.94), rgba(15,13,47,.78)); }.writing-inner::after { position: absolute; right: 6%; bottom: 0; color: rgba(255,43,167,.16); content: "WRITE"; font-family: var(--display); font-size: clamp(8rem, 19vw, 16rem); font-weight: 800; letter-spacing: -.06em; line-height: .7; pointer-events: none; }.writing-inner h2 { position: relative; z-index: 1; margin-bottom: 1rem; }.writing-inner > p { position: relative; z-index: 1; max-width: 560px; color: var(--mist); font-size: 1rem; }.button-outline { position: relative; z-index: 1; margin-top: 1.1rem; border: 1px solid var(--cerulean); color: var(--cerulean); }.button-outline:hover { background: var(--cerulean); color: var(--ink); }.writing-orbit { position: absolute; right: 3%; top: 4%; width: 36vw; aspect-ratio: 1; border: 1px solid rgba(66,217,255,.23); border-radius: 50%; transform: rotate(50deg) scaleY(.36); }

.faq-section { display: grid; grid-template-columns: minmax(0,.83fr) minmax(420px,1.17fr); gap: clamp(3rem, 9vw, 10rem); padding-bottom: clamp(6.5rem, 10vw, 10rem); }.faq-heading h2 { font-size: clamp(3.3rem, 5vw, 5.4rem); }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid rgba(183,191,216,.27); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; color: var(--paper); cursor: pointer; font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 600; letter-spacing: -.01em; line-height: 1; list-style: none; text-transform: uppercase; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--magenta); font-family: var(--body); font-size: 1.3rem; font-weight: 400; transition: transform .2s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 600px; margin: 0 0 1.35rem; color: var(--mist); font-size: .88rem; }.inline-link { border-bottom: 1px solid var(--cerulean); color: var(--cerulean); font-weight: 800; }.inline-link:hover { border-color: var(--magenta); color: var(--magenta-light); }

.contact-section { padding-block: clamp(4.8rem, 8vw, 8rem); background: var(--magenta); color: var(--ink); }.contact-grid { display: grid; grid-template-columns: .42fr 1.15fr .68fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }.contact-index { margin: 0; color: rgba(7,10,28,.7); }.contact-section h2 { margin-bottom: 1rem; font-size: clamp(3.4rem, 6vw, 6.5rem); }.contact-section p:not(.contact-index) { max-width: 560px; margin-bottom: 0; font-size: .93rem; font-weight: 600; }.contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }.button-light { background: var(--ink); color: var(--paper); }.button-light:hover { background: var(--paper); color: var(--ink); }.light-link { border-color: rgba(7,10,28,.6); color: var(--ink); }.light-link:hover { border-color: var(--paper); color: var(--paper); }

.site-footer { display: grid; grid-template-columns: minmax(240px, .75fr) 1fr auto; gap: 2.5rem; align-items: end; padding-block: 3rem; }.footer-brand { width: min(250px, 100%); }.footer-brand p { margin: 1rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }.footer-links { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }.footer-links a { color: var(--mist); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.footer-links a:hover { color: var(--cerulean); }.copyright { margin: 0; color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }

@keyframes orbit-drift { from { transform: rotate(-22deg) scaleY(.37) translateX(-12px); } to { transform: rotate(-17deg) scaleY(.4) translateX(15px); } }
@keyframes map-drift { from { transform: translate3d(-.8%, -1%, 0) scale(1.01); opacity: .43; } to { transform: translate3d(.8%, 1%, 0) scale(1.035); opacity: .68; } }
@keyframes grid-breathe { from { opacity: .14; } to { opacity: .3; } }
@keyframes route-pulse { 0% { transform: translate(0, 0) scale(.7); opacity: .2; } 22% { opacity: 1; } 55% { transform: translate(260px, -44px) scale(1); opacity: .95; } 100% { transform: translate(480px, -12px) scale(.65); opacity: 0; } }
@media (max-width: 1120px) {
  .hero { grid-template-columns: minmax(440px, 1.22fr) minmax(300px, .85fr) minmax(160px, .45fr); gap: 1rem; }.hero h1.hero-headline { font-size: clamp(2.85rem, 3.4vw, 3.25rem); }.intro-layout { grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr); gap: 2.5rem; }.intro-copy { max-width: none; }.service-path { min-height: 320px; padding: 1.35rem; }.service-path h3 { font-size: clamp(2rem, 3vw, 2.6rem); }.portrait-stage { min-height: 530px; }.work-visual { min-height: 275px; }.lower-grid { grid-template-columns: .85fr 1.1fr .75fr; }.site-footer { grid-template-columns: .8fr 1fr; }.copyright { grid-column: 2; }
}
@media (max-width: 860px) {
  :root { --shell: min(100% - 40px, 680px); }.site-header { min-height: 84px; }.brand { width: 210px; }.menu-toggle { position: relative; z-index: 12; display: grid; gap: 5px; padding: .5rem; }.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 1px; background: var(--paper); transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }.site-header nav { position: absolute; top: 67px; right: 0; display: none; flex-direction: column; align-items: flex-start; width: min(300px, 90vw); gap: 1.2rem; padding: 1.5rem; border: 1px solid var(--line); background: rgba(7,10,28,.97); box-shadow: 0 20px 45px rgba(0,0,0,.32); }.site-header nav[data-open="true"] { display: flex; }.hero { grid-template-columns: 1fr; min-height: auto; gap: 2rem; padding-top: 140px; padding-bottom: 88px; }.hero-copy { padding-top: 0; }.hero h1.hero-headline { font-size: clamp(2.6rem, 9.4vw, 3.45rem); line-height: .98; }.hero-headline .hero-line { white-space: normal; }.hero-watermark { top: 31%; font-size: 33vw; }.portrait-stage { order: 2; width: min(100%, 520px); min-height: 560px; }.hero-proof { order: 3; display: grid; grid-template-columns: .9fr 1.3fr; gap: 1rem; padding: 1.2rem 0 0; border-top: 1px solid var(--line); border-left: 0; }.proof-intro { margin: 0; }.hero-proof dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }.hero-proof dl > div { padding-block: 0; border-top: 0; }.hero-proof dt { font-size: 3.4rem; }.hero-proof dd { font-size: .57rem; }.hero-ticker { justify-content: flex-start; }.hero-social-block { gap: .65rem; }.intro-layout, .section-heading, .products-heading, .faq-section, .contact-grid, .service-paths { grid-template-columns: 1fr; }.section-heading, .products-heading { gap: 1.2rem; }.section-heading > p, .products-heading > p { max-width: 420px; }.work-grid, .products-grid { grid-template-columns: 1fr; }.work-card { padding: 1rem; }.work-visual { min-height: 330px; }.product-card { min-height: 460px; padding: 1.5rem; }.lower-grid { grid-template-columns: 1fr; gap: 1px; }.quote-panel { min-height: 390px; }.writing-inner { padding: 2.5rem 1.6rem; }.faq-section { gap: 2.5rem; }.contact-grid { align-items: start; }.contact-actions { flex-direction: row; flex-wrap: wrap; }.site-footer { grid-template-columns: 1fr; gap: 1.6rem; }.copyright { grid-column: auto; }
}
@media (max-width: 520px) {
  :root { --shell: calc(100% - 32px); }.brand { width: 180px; }.hero { padding-inline: 16px; }.hero h1 { font-size: clamp(5.2rem, 26vw, 7.8rem); }.hero-proof { grid-template-columns: 1fr; }.hero-proof dl { grid-template-columns: repeat(3, 1fr); }.portrait-stage { min-height: 470px; }.portrait-frame { width: 82%; }.top-caption { right: 0; }.world-network { left: -6%; top: 84px; width: 112%; height: auto; opacity: .44; }.world-grid { opacity: .12; }.route-one { left: -45%; top: 22%; }.route-two { right: -55%; bottom: 19%; }.hero-ticker { padding-inline: 1rem; }.evidence-strip { grid-template-columns: 1fr; padding: 1.4rem 16px; gap: .8rem; }.evidence-strip p { font-size: 1.75rem; }.intro-section, .work-section, .products-section { padding-block: 5rem; }.products-section { padding-bottom: 5rem; }.work-visual { min-height: 295px; }.visual-title { font-size: 3rem; }.contact-section h2 { font-size: 3.55rem; }.process-list li { grid-template-columns: 28px 26px 1fr; gap: .55rem; }.quote-panel blockquote { font-size: 2.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.star-field::before, .star-field::after, .world-grid, .world-network, .flow-route span { animation: none; }.work-card, .button, .work-arrow, .menu-toggle span, .social-link { transition: none; }
}