.home main.wrap { max-width: none; padding: 0; }
.banner { position: relative; height: 100vh; height: 100svh; min-height: 560px; background: #000; color: #fff; overflow: hidden; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; align-content: center; gap: 20px; padding: 120px 6vw 80px; }
.stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* static film grain (no star dots, no movement) */
.who { position: relative; z-index: 1; }
.who h1 { color: #fff; font-size: clamp(46px, 6.2vw, 92px); letter-spacing: -1.6px; line-height: 1.02; }
.who p { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 21px); color: #e9e6f5; }
.who s { text-decoration-color: #FF5C39; text-decoration-thickness: 2px; }
.who p.grad { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.2px; margin-top: 18px; } /* the real title: bigger than the crossed-out line above */
.who p.hats { font-size: clamp(12.5px, 1vw, 14.5px); letter-spacing: .08em; color: rgba(233,230,245,.68); margin-top: 6px; } /* the hats: small, light, spaced */
.who .grad { background: linear-gradient(90deg, #ffffff 0%, #C7B8FF 32%, #8F9DF0 62%, #5B7FD1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.who .social { color: #fff; margin-top: 30px; } .who .social:hover { color: #FF5C39; }
.stage { position: relative; z-index: 1; width: min(100%, 740px, calc(100svh - 120px)); aspect-ratio: 1; justify-self: center; margin: -9% 0 -6%; }
@media (min-width: 901px) and (max-height: 900px) { .stage { width: min(100%, 740px, calc((100svh - 120px) * .92)); transform: translate(calc(-1 * clamp(0px, (100vw - 1366px) * .25, 40px)), calc((100svh - 120px) * .035)); } } /* laptops: the top stays clear of the menu, the group grows down and right and leans toward the name */
.beams { position: absolute; left: -3%; top: 12%; width: 72%; height: 72%; border-radius: 50%; opacity: 1; filter: none; background: none; box-shadow: none; } /* ring only: no fill (the blue light behind the hero gives the depth) */
.beams::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, rgba(199,184,255,0) 0deg, rgba(199,184,255,.9) 90deg, rgba(143,157,240,.9) 200deg, rgba(91,127,209,.6) 280deg, rgba(91,127,209,0) 330deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* a thin lavender-to-blue ring, fading out at both ends */
html.touchy .beams { opacity: 1; filter: none; }
@keyframes breathe { 0%, 100% { opacity: .65; } 50% { opacity: .9; } }
.dimmer { position: fixed; inset: 0; background: rgba(4,4,7,.8); opacity: 0; pointer-events: none; z-index: 35; transition: opacity .45s ease; }
body.focusing .dimmer { opacity: 1; }
body.focusing .stage { z-index: 45; } /* in front of the menu while enlarged */
body.focusing .beams { opacity: .25 !important; }
.beam { animation: hum 2.8s ease-in-out infinite; } .b2 { animation-delay: -1.4s; }
@keyframes hum { 0%, 100% { opacity: .92; } 50% { opacity: 1; filter: brightness(1.12); } }
.flare { animation: flare 2.8s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes flare { 0%, 100% { opacity: .75; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.frame { container-type: size; position: absolute; left: 19%; top: 19%; width: 62%; height: 62%; border: 0; border-radius: 10px; background: rgba(20,21,46,.72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: none; overflow: hidden; transition: transform .5s cubic-bezier(.22,.9,.3,1), box-shadow .5s ease, background .5s ease; }
body.focusing .frame { border-color: transparent; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(1.5); background: rgba(30,24,56,.95); box-shadow: 0 46px 110px 26px rgba(0,0,0,.97), 0 18px 40px rgba(0,0,0,.9), 0 0 70px rgba(199,184,255,.18), inset 0 0 30px rgba(127,156,200,.15); }
.frame::after { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; opacity: 1; pointer-events: none; background: linear-gradient(90deg, #ffffff 0%, #C7B8FF 32%, #8F9DF0 62%, #5B7FD1 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: padding .45s ease; }
body.focusing .frame::after { padding: 2.5px; }
.crawl { position: absolute; inset: 0; perspective: 300px; perspective-origin: 50% 0%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 84%, transparent 100%); }
.crawl .roll { position: absolute; left: -8%; right: -8%; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: keep-all; top: 12%; transform-origin: 50% 0%; transform: rotateX(18deg) scale(.5); animation: roll 20s linear infinite; }
.crawl .roll p { margin: 0 0 1.3em; font-size: 11cqw; }
.crawl p, .flat p { margin: 0; font: 400 5.5cqw/1.4 Geist, Inter, 'Segoe UI', sans-serif; letter-spacing: -.012em; text-align: center; color: #E4DEF7; } /* Geist, one even colour: no highlights */
.crawl .ln { display: block; white-space: nowrap; } /* one line each, so a line can change weight without rewrapping */
@keyframes roll { from { transform: rotateX(18deg) scale(.5) translateY(0); } to { transform: rotateX(18deg) scale(.5) translateY(-33.3333%); } }
.frame.flatmode .roll { animation-play-state: paused; visibility: hidden; }
.flat { position: absolute; inset: 0; padding: 10% 10% 16%; display: flex; align-items: center; visibility: hidden; }
.flat p { hyphens: none; -webkit-hyphens: none; word-break: keep-all; font: 400 4.4cqw/1.65 Chivo, sans-serif; letter-spacing: .01em; text-align: left; color: #ece9f8; }
.frame.flatmode .flat { visibility: visible; }
.flat .w, .crawl .w { display: inline; }
.morph { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; white-space: pre; transform-origin: 0 0; will-change: transform; }
.toggle { position: absolute; right: 3.5cqw; bottom: 3.5cqw; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: rgba(10,10,14,.75); color: #fff; font: 700 14px/1 Chivo, sans-serif; cursor: pointer; transition: background .25s, transform .25s, border-color .25s; }
.toggle:hover { background: #FF5C39; border-color: #FF5C39; transform: scale(1.1); }
.toggle .tip { position: absolute; right: 50px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; background: #fff; color: #111; font: 600 12px/1 Chivo, sans-serif; letter-spacing: .4px; padding: 8px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toggle:hover .tip, .toggle:focus-visible .tip { opacity: 1; transform: translateY(-50%); }
.xclose { display: none; position: absolute; top: 3cqw; right: 3cqw; z-index: 4; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(10,10,14,.7); color: #fff; font: 400 18px/1 Chivo, sans-serif; }
/* every device: an expand icon instead of the "Aa" button; click or tap the box to enlarge it, the X closes it */
.toggle { display: none; }
body.focusing .xclose { display: grid; place-items: center; cursor: pointer; }
.xclose:hover { background: #FF5C39; border-color: #FF5C39; }
.frame { cursor: zoom-in; }
body.focusing .frame { cursor: default; }
@media (hover: none) { body.focusing .dimmer { pointer-events: auto; } } /* touch: a tap outside closes it too */
  .xpand { display: grid; place-items: center; position: absolute; right: 3.5cqw; bottom: 3.5cqw; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: rgba(10,10,14,.75); color: #fff; pointer-events: none; }
  .xpand svg { width: 17px; height: 17px; }
  body.focusing .xpand { display: none; } /* the X takes over once it is enlarged */
.edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 52px; z-index: 1; pointer-events: none; display: block; }
.down { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 2; color: #fff; text-decoration: none; display: grid; justify-items: center; gap: 4px; font: 400 11px/1 Chivo, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; opacity: .85; }
.down svg { width: 26px; height: 26px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.expertise2 { position: relative; padding: 80px 6vw 40px; text-align: center; background: linear-gradient(180deg, #fff 0%, #f6f4fb 100%); }
.expertise2 h2 { font-size: 30.4px; letter-spacing: -.6px; margin-bottom: 36px; }
.orbit { position: relative; height: 380px; margin: 0 auto; max-width: 1100px; }
.circle { position: absolute; left: 50%; top: 50%; border-radius: 50%; text-decoration: none; display: block; }
.circle .c { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: multiply; }
.circle .g { position: absolute; inset: 0; border-radius: 50%; background: #C9D6F4; opacity: 0; } /* after the split: one even pastel blue */
.circle .lab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74%; font: 800 clamp(11.5px, 1.15vw, 14.5px)/1.4 Chivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #15151f; text-align: center; opacity: 0; pointer-events: none; isolation: isolate; }

.circle { transition: scale .25s cubic-bezier(.2,.8,.2,1); }
.circle .g { transition: background .2s, box-shadow .2s; }
/* hover: the rim deepens to the darkest blue-violet and diffuses inward, the circle lifts and casts a soft lavender shadow */
.circle:hover, .circle:focus-visible { scale: 1.03; } /* hover: the circle turns white with a thin black outline, no shadow */
.circle:hover .g, .circle:focus-visible .g { background: #fff; box-shadow: inset 0 0 0 1.5px #111; }
.circle:hover .lab, .circle:focus-visible .lab { color: #111; }
.circle:focus-visible { outline: 2px solid #E04E39; outline-offset: 6px; }
@media (max-width: 900px) {
  .crawl .roll { left: 2%; right: 2%; } /* phones: a narrower column so the boldest front lines stay inside the box */
  .banner { grid-template-columns: 1fr; text-align: center; padding: 150px 20px 90px; height: auto; min-height: 100svh; }
  .stage { width: min(100%, 460px); transform: translateX(11%); } /* phones: the circle + box group sits centred */
  .orbit { height: 560px; }
}
@media (prefers-reduced-motion: reduce) { .crawl .roll { animation: none; } .beam, .flare, .down svg { animation: none; } }