/* Level Talent Group Palette is taken from their own logo: the purple is sampled at #6A2C87, not approximated. Everything else is built around it with a violet bias so the neutrals read as chosen rather than inherited grey. Type floor is 16px everywhere, including labels and footers. */ :root{ --ink:#16091C; /* near black, violet biased */ --ink-2:#241031; /* raised dark surface */ --ink-3:#32184166; --violet:#6A2C87; /* sampled from their logo */ --violet-deep:#4E1F65; --violet-lift:#A45CC8; /* accent on dark grounds */ --paper:#FBF8FC; --paper-2:#F3EDF6; --white:#fff; --text:#2A1F30; --muted:#6E6275; --muted-dark:#B9A7C4; --line:#E4D9EA; --line-dark:rgba(255,255,255,.14); --display:'Syne',ui-sans-serif,system-ui,sans-serif; --body:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif; --wrap:1220px; --gut:clamp(20px,5vw,64px); --r:14px; } *,*::before,*::after{box-sizing:border-box} html,body{overflow-x:clip} /* both: an off-canvas panel still widens */ html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--text); font:400 17px/1.65 var(--body); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} /* height:auto or the HTML height attribute squashes every image we only set a CSS width on */ a{color:var(--violet);text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05; letter-spacing:-.02em;margin:0;text-wrap:balance} h1{font-size:clamp(38px,4.6vw,62px)} h2{font-size:clamp(30px,4.2vw,52px)} h3{font-size:clamp(21px,2vw,26px);letter-spacing:-.01em} p{margin:0 0 1.1em} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)} .sec{padding:clamp(64px,9vw,120px) 0} .sec-tight{padding:clamp(44px,6vw,76px) 0} .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--muted)} .dark .lede{color:var(--muted-dark)} .eyebrow{ font:600 16px/1 var(--body);letter-spacing:.16em;text-transform:uppercase; color:var(--violet);margin:0 0 18px;display:block; } .dark .eyebrow{color:var(--violet-lift)} .measure{max-width:64ch} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:200;background:var(--white); padding:12px 18px;border-radius:8px;box-shadow:0 8px 30px #0003} :focus-visible{outline:3px solid var(--violet-lift);outline-offset:3px;border-radius:4px} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font:700 17px/1 var(--body);letter-spacing:.01em; padding:16px 26px;border-radius:999px;border:1.5px solid transparent; text-decoration:none;cursor:pointer;transition:transform .18s,background .18s,color .18s,border-color .18s; } .btn:hover{transform:translateY(-2px)} .btn-fill{background:var(--violet);color:#fff} .btn-fill:hover{background:var(--violet-deep)} .btn-ghost{border-color:var(--line);color:var(--text);background:transparent} .btn-ghost:hover{border-color:var(--violet);color:var(--violet)} .dark .btn-ghost{border-color:var(--line-dark);color:#fff} .dark .btn-ghost:hover{border-color:var(--violet-lift);color:var(--violet-lift)} .btn svg{width:18px;height:18px;flex:none} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:60;background:#fffffff2; backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:22px; max-width:var(--wrap);margin:0 auto;padding:14px var(--gut)} .brand{display:flex;align-items:center;text-decoration:none;flex:none} .brand img{height:46px;width:auto} .nav{margin-left:auto;display:flex;align-items:center;gap:28px} .nav a{font:600 17px/1 var(--body);color:var(--text);text-decoration:none; padding:8px 0;border-bottom:2px solid transparent} .nav a:hover,.nav a[aria-current=page]{color:var(--violet);border-color:var(--violet)} .hdr .btn{padding:12px 20px;font-size:16px} .burger{display:none;margin-left:auto;background:none;border:0;padding:10px; cursor:pointer;color:var(--text)} .burger svg{width:26px;height:26px} @media(max-width:940px){ .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px); background:var(--ink);flex-direction:column;align-items:stretch; justify-content:flex-start;gap:4px;padding:92px 26px 26px; transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1); margin-left:0;overflow-y:auto} .nav[data-open=true]{transform:translateX(0)} .nav a{color:#fff;font-size:20px;padding:14px 0;border-bottom:1px solid var(--line-dark)} .nav a:hover,.nav a[aria-current=page]{color:var(--violet-lift);border-color:var(--line-dark)} .nav .btn{margin-top:18px;justify-content:center} .burger{display:block} .scrim{position:fixed;inset:0;background:#000;opacity:0;visibility:hidden; transition:opacity .3s,visibility .3s;z-index:55} .scrim[data-open=true]{opacity:.5;visibility:visible} } /* ---------- hero ---------- */ .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden; padding:clamp(72px,11vw,132px) 0 clamp(64px,8vw,104px)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 82% 15%,#6A2C8733,transparent 62%)} .hero-in{position:relative;z-index:2;display:grid;gap:clamp(40px,5vw,64px); grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center} .hero h1{color:#fff} .hero .lede{color:var(--muted-dark);max-width:52ch;margin-top:22px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} /* The faces are the product, so they are the hero image. Six close headshots in a 3x2 block, with the outer columns nudged out of alignment so it reads as a composition rather than a grid. Static: never a scrolling ticker. */ .mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; align-self:center} .mosaic figure{margin:0;border-radius:12px;overflow:hidden;background:var(--ink-2); aspect-ratio:3/4} .mosaic img{width:100%;height:100%;object-fit:cover} .mosaic figure:nth-child(3n+1){transform:translateY(-22px)} .mosaic figure:nth-child(3n){transform:translateY(22px)} @media(max-width:1040px){ .hero-in{grid-template-columns:1fr} .mosaic{grid-template-columns:repeat(6,1fr);gap:10px} .mosaic figure:nth-child(n){transform:none} } @media(max-width:620px){ .mosaic{grid-template-columns:repeat(3,1fr);gap:8px} } /* ---------- dark / light sections ---------- */ .dark{background:var(--ink);color:#fff} .dark h2,.dark h3{color:#fff} .tint{background:var(--paper-2)} /* ---------- client logo wall ---------- */ .clients-img{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(16px,3vw,34px);margin-top:36px} .clients-img img{width:100%} /* ---------- roster doors ---------- */ .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} .door{position:relative;display:block;text-decoration:none;color:#fff; border-radius:var(--r);overflow:hidden;background:var(--ink-2); aspect-ratio:4/5;transition:transform .3s} .door:hover{transform:translateY(-4px)} .door-grid{position:absolute;inset:0;display:grid; grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr} .door-grid img{width:100%;height:100%;object-fit:cover} .door::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,#16091C14 0%,#16091Ccc 62%,#16091Cf2 100%)} .door-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px} .door-txt h3{font-size:clamp(23px,2.4vw,30px)} .door-txt span{display:inline-flex;align-items:center;gap:8px;margin-top:10px; font:600 16px/1 var(--body);color:var(--violet-lift)} .door-txt svg{width:17px;height:17px} @media(max-width:860px){.doors{grid-template-columns:1fr;gap:16px} .door{aspect-ratio:16/9}} /* ---------- facts ---------- */ .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px} .fact{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:26px} .dark .fact{background:var(--ink-2);border-color:var(--line-dark)} .fact h3{font-size:21px;margin-bottom:8px} .fact p{margin:0;font-size:16px;color:var(--muted)} .dark .fact p{color:var(--muted-dark)} @media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.facts{grid-template-columns:1fr}} /* ---------- roster grid ---------- */ .roster{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:44px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} .card{margin:0;border-radius:12px;overflow:hidden;background:var(--paper-2); aspect-ratio:3/4;position:relative;border:0;padding:0;cursor:zoom-in; display:block;width:100%} .card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card:hover img{transform:scale(1.045)} @media(max-width:600px){ .roster{grid-template-columns:repeat(2,1fr)} } /* count chip */ .count{display:inline-flex;align-items:center;gap:9px;margin-top:18px; font:600 16px/1 var(--body);color:var(--muted); background:var(--white);border:1px solid var(--line); padding:10px 16px;border-radius:999px} .dark .count{background:var(--ink-2);border-color:var(--line-dark);color:var(--muted-dark)} /* ---------- steps ---------- */ .steps{display:grid;gap:18px;margin-top:40px; grid-template-columns:repeat(2,1fr)} .step{background:var(--white);border:1px solid var(--line); border-radius:var(--r);padding:28px} .step h3{font-size:20px;margin-bottom:10px} .step p{margin:0;color:var(--muted);font-size:16px} @media(max-width:760px){.steps{grid-template-columns:1fr}} .chips{display:grid;gap:12px;margin-top:26px;padding:0;list-style:none} .chips li{font:400 17px/1.5 var(--body);background:var(--white); border:1px solid var(--line);border-radius:10px;padding:14px 18px; color:var(--muted)} .chips strong{display:block;font:700 17px/1.4 var(--body);color:var(--text)} /* ---------- split ---------- */ .split{display:grid;gap:clamp(34px,5vw,72px); grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} @media(max-width:900px){.split{grid-template-columns:1fr}} .split-img{border-radius:var(--r);overflow:hidden;background:var(--paper-2)} .split-img img{width:100%} /* ---------- form ---------- */ .form{background:var(--white);border:1px solid var(--line); border-radius:var(--r);padding:clamp(24px,3.4vw,38px)} .dark .form{background:var(--ink-2);border-color:var(--line-dark)} .fld{margin-bottom:18px} .fld label{display:block;font:600 16px/1 var(--body);margin-bottom:8px} .fld input,.fld textarea,.fld select{ width:100%;font:400 17px/1.5 var(--body);color:var(--text); background:var(--paper);border:1px solid var(--line);border-radius:10px; padding:14px 16px} .dark .fld input,.dark .fld textarea,.dark .fld select{ background:var(--ink);border-color:var(--line-dark);color:#fff} .fld input:focus,.fld textarea:focus,.fld select:focus{ outline:2px solid var(--violet-lift);outline-offset:1px;border-color:transparent} .fld textarea{min-height:132px;resize:vertical} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} @media(max-width:600px){.grid2{grid-template-columns:1fr}} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{font-size:16px;color:var(--muted);margin:14px 0 0} .dark .form-note{color:var(--muted-dark)} .msg{margin-top:16px;font:600 17px/1.5 var(--body);display:none} .msg[data-on]{display:block} .msg.ok{color:#1c7a4a} .msg.err{color:#b3261e} .dark .msg.ok{color:#63d19b} .dark .msg.err{color:#ff9b93} /* ---------- contact strip ---------- */ .cstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px} .cstrip a,.cstrip p{font-size:17px;margin:0} .cstrip h3{font-size:18px;margin-bottom:8px;color:var(--violet-lift)} .cstrip .k{font:600 16px/1 var(--body);letter-spacing:.14em; text-transform:uppercase;color:var(--muted-dark);display:block;margin-bottom:10px} .dark .cstrip a{color:#fff;text-decoration:none} .dark .cstrip a:hover{color:var(--violet-lift)} @media(max-width:760px){.cstrip{grid-template-columns:1fr;gap:18px}} /* ---------- footer ---------- */ .foot{background:var(--ink);color:#fff;padding:clamp(56px,7vw,86px) 0 30px} .foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:38px} .foot img{height:52px;width:auto} .foot p{color:var(--muted-dark);font-size:17px} .foot h4{font:600 16px/1 var(--body);letter-spacing:.14em;text-transform:uppercase; color:#fff;margin:0 0 16px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .foot a{color:var(--muted-dark);text-decoration:none;font-size:17px} .foot a:hover{color:var(--violet-lift)} .foot-bottom{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center; margin-top:48px;padding-top:24px;border-top:1px solid var(--line-dark); font-size:16px;color:var(--muted-dark)} @media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:30px}} /* ---------- reveal ---------- Default is VISIBLE. Only a page whose JS has run hides them, so a script that fails can never blank the page. */ .rv{opacity:1} .ready .rv{opacity:0;transform:translateY(22px)} .ready .rv.in{opacity:1;transform:none; transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)} @media(prefers-reduced-motion:reduce){ .ready .rv,.ready .rv.in{opacity:1;transform:none;transition:none} *{animation-duration:.01ms!important;transition-duration:.01ms!important} .card:hover img{transform:none} } /* ---------- lightbox ---------- */ .lb{position:fixed;inset:0;z-index:120;background:#16091Cf2;display:none; align-items:center;justify-content:center;padding:clamp(16px,4vw,54px)} .lb[data-open]{display:flex} .lb img{max-width:min(92vw,720px);max-height:88vh;width:auto; border-radius:12px;box-shadow:0 30px 90px #000000a6} .lb button{position:absolute;background:#ffffff1a;border:1px solid var(--line-dark); color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center} .lb button:hover{background:#ffffff33} .lb svg{width:22px;height:22px} .lb .lb-x{top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px)} .lb .lb-p{left:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%)} .lb .lb-n{right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%)} .lb-count{position:absolute;bottom:clamp(14px,3vw,30px);left:50%; transform:translateX(-50%);font:600 16px/1 var(--body);color:var(--muted-dark)} @media(max-width:600px){ .lb .lb-p{left:8px}.lb .lb-n{right:8px} .lb button{width:44px;height:44px} }