.hero-copy{width:68%}.hero-copy .intro{max-width:450px}.platforms{padding-top:50px;padding-bottom:50px;background:#0c2533}.platform-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 24px;margin-top:38px}.platform{display:flex;align-items:center;gap:15px;min-width:0}.platform img{object-fit:contain;width:36px;height:36px;filter:brightness(0) invert(1);flex:none}.platform strong{display:block;font-size:18px;letter-spacing:-.03em;font-weight:500}.platform span{display:block;font-size:11px;color:var(--muted);line-height:1.5}.platform-note{font-size:12px;color:var(--muted);margin-top:30px}.inline-link{color:var(--gold);text-decoration:underline;text-underline-offset:4px}.pricing{background:#e9edef;color:#071d29}.pricing-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:8vw;align-items:end;margin:65px 0 50px}.pricing-heading h2{font-size:clamp(42px,4.6vw,72px)}.pricing-heading em{color:#607e89}.pricing-heading p{color:#4c6673;max-width:430px}.pricing-layout{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}.rate-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #071d2933;padding:24px 0;gap:24px}.rate-row b{font-weight:500;font-size:20px;letter-spacing:-.03em}.rate-row small{display:block;font-size:12px;color:#536e7b;margin-top:6px}.rate-row>strong{font-weight:400;font-size:64px;letter-spacing:-.065em;line-height:1}.rate-row>strong span{font:italic 40px var(--serif);color:#65828c}.rate-note{font-size:13px;line-height:1.7;color:#536e7b;margin-top:12px}.fee-calculator{background:#f8fafb;border:1px solid #fff;padding:32px;box-shadow:0 1px 0 #b3c4ce,0 8px 22px #14374814}.fee-calculator label{font-size:14px;font-weight:500}.spend-input{display:flex;align-items:center;gap:12px;border-bottom:1px solid #77909b;padding:12px 0 8px;font-size:30px}.spend-input input{font:400 clamp(28px,3vw,43px) Inter,sans-serif;letter-spacing:-.05em;min-width:0;width:100%;background:none;border:0;color:#071d29;padding:4px;outline-offset:3px}.spend-input input:focus-visible{outline:2px solid #396f86}.fee-error{font-size:12px;color:#a82b2b;min-height:20px;margin-top:8px}.spend-presets{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0 25px}.spend-presets button{background:#e7eef1;color:#294957;border:1px solid #bcced6;min-height:44px;padding:8px 15px;font-size:13px;box-shadow:0 1px 0 #a9bfc9}.spend-presets button[aria-pressed=true]{background:#14384a;color:#fff;border-color:#14384a}.spend-presets button:focus-visible{outline:2px solid #396f86}.fee-result{border-top:1px solid #c8d6dc;padding:22px 0}.fee-result>span{font-size:13px;color:#526d79}.fee-result strong{display:block;font-weight:400;font-size:clamp(44px,4.7vw,70px);line-height:1.2;letter-spacing:-.065em;margin-top:8px}.fee-result small{color:#526d79;font:12px var(--mono)}.fee-breakdown p{display:flex;justify-content:space-between;gap:20px;font-size:12px;padding:7px 0;color:#526d79}.fee-breakdown b{font-weight:500;color:#173847;white-space:nowrap}.fee-breakdown .fee-total{border-top:1px solid #c8d6dc;margin-top:10px;padding-top:16px}.included{display:grid;grid-template-columns:1fr 1.2fr;gap:0 7vw;margin-top:65px;padding-top:32px;border-top:1px solid #071d2933}.included h3{grid-row:span 4;font-size:32px;max-width:300px;line-height:1.15}.included p{padding:10px 0;font-size:16px}.included p>span{font:11px var(--mono);color:#718b96;margin-right:15px}.neon-note{font-size:13px;line-height:1.7;margin-top:18px;color:#526d79}.neon-note a{color:#173e50;text-decoration:underline;text-underline-offset:3px}.working-terms{background:#0d2c3c}.terms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw;margin-top:50px}.terms-grid .meta{color:var(--gold)}.terms-grid h3{font-size:31px;margin:18px 0}.terms-grid p{color:var(--muted);font-size:15px}.terms-grid article{min-width:0}.chapter-visual .code-display{font-size:clamp(11px,1.1vw,17px)}
@media(max-width:1000px){.platform-grid{grid-template-columns:repeat(3,1fr)}.pricing-layout{gap:30px}.pricing-heading{gap:35px}.fee-calculator{padding:24px}.terms-grid{gap:25px}.terms-grid h3{font-size:26px}}
@media(max-width:650px){.hero-copy{width:100%}.platform-grid{grid-template-columns:repeat(2,1fr);gap:25px 12px}.platform{gap:10px}.platform img{width:29px;height:29px}.platform strong{font-size:16px}.platform span{font-size:10px}.pricing-heading,.pricing-layout,.included,.terms-grid{display:block}.pricing-heading{margin:40px 0}.pricing-heading h2{font-size:41px}.pricing-heading p{margin-top:25px}.fee-calculator{margin-top:30px;padding:22px}.rate-row>strong{font-size:53px}.rate-row b{font-size:18px}.included{margin-top:40px}.included h3{font-size:29px;margin-bottom:22px}.included p{font-size:14px}.terms-grid{margin-top:35px}.terms-grid article+article{border-top:1px solid #ffffff24;margin-top:27px;padding-top:27px}.terms-grid h3{font-size:28px}.fee-breakdown p{font-size:11px}.chapter-visual .code-display{font-size:11px}}

.platform-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:6px;justify-content:center}.platform-wordmark img{width:125px;height:28px;object-position:left center}.platform-wordmark strong{display:none}@media(max-width:650px){.platform-wordmark img{width:112px;height:24px}}

.platform-newsbreak img{object-fit:cover;object-position:left center}
/* Keep the longest diagram label inside its plane on narrow phones. */
@media(max-width:650px){.flow-diagram b{font-size:clamp(20px,6.2vw,29px)}}

.inline-link{white-space:nowrap}

/* Service breadth, with the same restrained paper depth as the campaign system. */
.services{background:#0a2331}.services-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:7vw;align-items:end;margin:60px 0 48px}.services-heading h2{font-size:clamp(39px,4.7vw,72px)}.services-heading>p{color:var(--muted);max-width:440px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.service-sheet{min-width:0;padding:clamp(24px,3vw,44px);background:linear-gradient(135deg,#173544,#102c3a);border:1px solid #ffffff17;box-shadow:0 1px 0 #5c7681,0 14px 28px #020d1426;display:flex;flex-direction:column;align-items:flex-start}.service-sheet>.meta{color:var(--gold);font-size:10px;line-height:1.7}.service-sheet h3,.studio-partner h3{font-size:clamp(30px,3vw,46px);line-height:1.12;margin:24px 0}.service-sheet>p{color:var(--muted);font-size:15px;margin-bottom:25px}.service-sheet>.tags,.service-sheet>.text-link{margin-top:auto}.studio-partner{display:grid;grid-template-columns:1fr 1fr;gap:7vw;border-top:1px solid #ffffff26;padding-top:48px;margin-top:56px}.studio-partner .meta{color:var(--gold)}.studio-partner p{color:var(--muted);margin-bottom:18px}.studio-partner .tags{flex-wrap:wrap}.studio-partner h3{margin-top:18px}.hero-copy h1{font-size:clamp(60px,7.7vw,118px)}
@media(max-width:650px){.services-heading,.service-grid,.studio-partner{grid-template-columns:1fr}.services-heading{gap:24px;margin-top:36px}.service-grid{gap:20px}.studio-partner{gap:30px;margin-top:40px;padding-top:32px}.service-sheet h3{font-size:34px}.hero-copy h1{font-size:clamp(43px,9.5vw,61px)}}

/* Copper belongs to the creative assembly and consulting, with gold for actions. */
:root{--coral:#d98b78}
.service-sheet:nth-child(3) h3 em{color:var(--coral)}
.craft-layer[data-layer="1"]{background:linear-gradient(135deg,#e5a08a,#c78069);color:#071d29;border-color:#edb49f}
.craft-layer[data-layer="1"] h3 em{color:#293f47}
.hero-copy h1{font-size:clamp(60px,6.6vw,105px)}

/* A contained artwork stage reserves room for controls and the hero footer. */
.hero{isolation:isolate;background:#00121e}
.system{width:46%;height:auto;aspect-ratio:auto;right:1.5%;top:21%;bottom:145px}
.mechanism-poster,#signal{position:absolute;inset:0 0 64px;width:100%;height:calc(100% - 64px);object-fit:contain;mix-blend-mode:normal;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.mechanism-poster{display:block}.frames-ready .mechanism-poster{visibility:hidden}
#signal{opacity:0;cursor:default}.frames-ready #signal{opacity:1}
.system-caption{display:none}
.system-controls{z-index:3;bottom:0;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
.motion-paused .mechanism-poster{visibility:visible}.motion-paused #signal{opacity:0}
@media(min-width:901px) and (min-height:681px){.hero-scroll{height:400svh}.hero-scroll .hero{position:sticky;top:0}.motion-paused .hero-scroll{height:auto}.motion-paused .hero-scroll .hero{position:relative;top:0}}
@media(max-width:1000px){.system{width:48%;top:32%;right:0}}
@media(max-width:650px){.hero-copy h1{font-size:clamp(43px,9.5vw,61px)}.system{width:100%;height:365px;right:0;top:auto;bottom:110px}.hero{min-height:1040px}.hero-scroll{height:calc(1040px + 220svh)}.hero-scroll .hero{position:sticky;top:min(0px,calc(100svh - 1040px))}.motion-paused .hero-scroll{height:auto}.motion-paused .hero-scroll .hero{position:relative;top:0}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto}.hero-scroll .hero{position:relative;top:0}.mechanism-poster{visibility:visible!important}#signal{opacity:0!important}}
@media(min-width:901px) and (min-height:681px){.hero{min-height:0;height:100svh}.hero-copy{padding-top:9vh}}
@media(min-width:901px) and (max-height:820px){.hero-copy{padding-top:45px}.hero-copy h1{font-size:clamp(60px,6vw,86px)}.hero-copy .intro{font-size:15px;line-height:1.6;margin:20px 0}.hero-copy .eyebrow{margin-bottom:18px}}

/* Apply the feather to the square media itself, including close-up shots. */
.mechanism-media{position:absolute;left:50%;top:0;height:calc(100% - 64px);aspect-ratio:1;max-width:100%;transform:translateX(-50%);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.mechanism-media .mechanism-poster,.mechanism-media #signal{inset:0;width:100%;height:100%;mask-image:none}

/* Separate the idle hover from the scroll-driven movement through space. */
.mechanism-float{position:absolute;inset:12px 0 90px;perspective:1100px;transform:translate3d(var(--float-x,0px),var(--float-y,0px),0) rotate(var(--float-turn,0deg));transition:transform .18s ease-out;pointer-events:none}
.mechanism-float .mechanism-media{height:100%;transform:translateX(-50%);animation:mechanism-hover 6s ease-in-out infinite;will-change:transform}
@keyframes mechanism-hover{0%,100%{transform:translateX(-50%) translateY(0) rotateY(var(--float-tilt,0deg))}50%{transform:translateX(-50%) translateY(-12px) rotateY(calc(var(--float-tilt,0deg) + 2deg))}}
.float-sleeping .mechanism-media{animation-play-state:paused}
.motion-paused .mechanism-float{transform:none;transition:none}.motion-paused .mechanism-float .mechanism-media{animation:none;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.mechanism-float{transform:none;transition:none}.mechanism-float .mechanism-media{animation:none;transform:translateX(-50%)}}

/* Real pixel transparency follows the silhouette, not a rectangular feather. */
.mechanism-media{mask-image:none!important}
#mechanism-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mechanism-media #signal{mask-image:none;opacity:0}
.mechanism-poster{mix-blend-mode:lighten}
.cutout-ready .mechanism-poster{visibility:hidden!important}
.cutout-ready .mechanism-media #signal{opacity:1!important}
.system-controls{background:transparent;border:0;box-shadow:none;gap:12px;padding:0}
.system-controls button{border-bottom:1px solid transparent}
.system-controls button.active{background:transparent;color:var(--gold);box-shadow:none;border-bottom-color:var(--gold);transform:none}

/* Keep scroll playback available if the browser releases the graphics context. */
.video-fallback.frames-ready #mechanism-video{inset:0;width:100%;height:100%;opacity:1;object-fit:contain;mix-blend-mode:lighten}
.video-fallback #signal{opacity:0!important}
.motion-paused .video-fallback #mechanism-video{opacity:0}
@media(prefers-reduced-motion:reduce){.video-fallback #mechanism-video{opacity:0!important}}