/* Awkward Media Group, 2026. Art direction taken from their own mark: the deep indigo of the glasses and the heavy condensed wordmark. Display is Anton, which is the closest public face to the AWKWARD logotype, set very large and flat against solid indigo blocks. Body is Manrope. One accent, electric violet, and nothing else. The reveal rule is deliberate: .rv is VISIBLE by default and only hidden once JS adds .ready to . Hiding unconditionally means one failed script leaves a blank page. */ :root{ --indigo:#1a0c4a; --indigo-deep:#120636; --indigo-soft:#2a1770; --electric:#5b45ff; --paper:#f7f6fc; --paper-2:#eceaf6; --ink:#141020; --ink-dim:#5d5875; --line:#ded9ef; --line-dark:rgba(247,246,252,.18); --fd:'Anton',Impact,'Arial Narrow',sans-serif; --fb:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --max:1280px; --pad:clamp(20px,4.2vw,56px); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} body{ background:var(--paper);color:var(--ink);font-family:var(--fb); font-size:17px;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ::selection{background:var(--electric);color:#fff} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} h1,h2,h3{font-family:var(--fd);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em} h1{font-size:clamp(46px,9.2vw,132px)} h2{font-size:clamp(34px,5.6vw,76px)} h3{font-size:clamp(21px,2.2vw,28px);line-height:1.05} p{max-width:70ch} .lede{font-size:clamp(18px,1.6vw,22px);line-height:1.6} .kicker{display:inline-block;font:700 16px/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--electric)} .muted{color:var(--ink-dim)} .on-dark .muted{color:#b9b2d8} /* reveal ------------------------------------------------------------- */ .rv{opacity:1;transform:none} .ready .rv{opacity:0;transform:translateY(22px)} .ready .rv.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)} /* nav ---------------------------------------------------------------- */ nav.top{position:sticky;top:0;z-index:60;background:var(--indigo);border-bottom:1px solid var(--line-dark)} nav.top .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad);max-width:1560px;margin:0 auto} .brand img{height:34px;width:auto} .navlinks{display:flex;gap:28px;list-style:none;font:700 16px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:#fff} .navlinks a{padding:8px 0;border-bottom:2px solid transparent;transition:border-color .22s,color .22s} .navlinks a:hover{border-bottom-color:var(--electric)} .navlinks a[aria-current]{border-bottom-color:var(--electric)} .burger{display:none;background:none;border:0;padding:10px;cursor:pointer} .burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:.3s} /* hero --------------------------------------------------------------- */ .hero{background:var(--indigo);color:#fff;padding:clamp(56px,7vw,110px) 0 clamp(64px,8vw,130px);position:relative;overflow:hidden} .hero::after{content:"";position:absolute;right:-6%;bottom:-18%;width:min(52vw,760px);height:min(52vw,760px);border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(91,69,255,.5),transparent 62%);pointer-events:none} .hero .wrap{position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4vw,72px);align-items:center} .hero h1{margin:18px 0 0} .hero h1 em{font-style:normal;color:var(--electric)} .hero .lede{margin-top:24px;max-width:46ch;color:#ddd8f2} .hero-mark{width:min(320px,62%);margin-bottom:6px} .stack{display:grid;gap:14px} .stack img{width:100%;height:auto;border:1px solid var(--line-dark)} .stack .a{transform:rotate(-1.4deg)} .stack .b{transform:rotate(1.2deg)} .cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px} .btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;padding:18px 30px;background:var(--electric);color:#fff;border:2px solid var(--electric);transition:transform .22s,background .22s,color .22s} .btn:hover{transform:translateY(-2px)} .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn.ghost:hover{border-color:#fff} .btn.dark{background:var(--indigo);border-color:var(--indigo);color:#fff} .btn.outline{background:transparent;color:var(--indigo);border-color:var(--indigo)} .btn.outline:hover{background:var(--indigo);color:#fff} /* sections ----------------------------------------------------------- */ section{padding:clamp(64px,8vw,130px) 0} .on-dark{background:var(--indigo-deep);color:#fff} .on-soft{background:var(--paper-2)} .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,3.6vw,56px)} .sec-head h2{max-width:17ch} .page-head{background:var(--indigo);color:#fff;padding:clamp(52px,6vw,96px) 0 clamp(52px,6vw,88px)} .page-head h1{margin-top:14px;font-size:clamp(40px,7vw,104px)} .page-head .lede{margin-top:20px;max-width:56ch;color:#ddd8f2} .split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,78px);align-items:center} /* services ----------------------------------------------------------- */ .svc-list{display:grid;gap:0} .svc{display:grid;grid-template-columns:.44fr 1fr auto;gap:clamp(16px,3vw,44px);align-items:center;padding:30px 0;border-top:2px solid var(--line);transition:padding-left .3s} .svc:last-child{border-bottom:2px solid var(--line)} .svc:hover{padding-left:12px} .svc h3{margin-bottom:6px} .svc .meta{font:700 16px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--electric)} .svc p{color:var(--ink-dim);font-size:17px} .svc .go{font:700 16px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--indigo);border-bottom:2px solid var(--electric);padding-bottom:5px} /* team --------------------------------------------------------------- */ .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)} .member{text-align:left} .member img{width:min(230px,80%);height:auto;border-radius:50%;background:var(--paper-2);margin-bottom:20px} .member .role{font:700 16px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--electric);margin:8px 0 12px} .member p{font-size:16px;color:var(--ink-dim)} .on-dark .member p{color:#b9b2d8} .bio{display:grid;grid-template-columns:.34fr 1fr;gap:clamp(22px,4vw,64px);padding:clamp(34px,4vw,60px) 0;border-top:2px solid var(--line)} .bio img{width:100%;max-width:280px;border-radius:50%;background:var(--paper-2)} .bio .role{font:700 16px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--electric);margin:10px 0 16px} .bio p{margin-bottom:16px} /* work --------------------------------------------------------------- */ .work{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,30px)} .work figure{background:#fff;border:1px solid var(--line);overflow:hidden} .work img{width:100%;height:auto;transition:transform .8s cubic-bezier(.22,.7,.3,1)} .work figure:hover img{transform:scale(1.03)} .work figcaption{font:700 16px/1.4 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);padding:16px 20px;border-top:1px solid var(--line)} .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)} .fact{border-top:2px solid var(--line-dark);padding-top:22px} .fact dt{font:700 16px/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--electric);margin-bottom:12px} .fact dd{font-family:var(--fd);font-size:clamp(30px,3.4vw,48px);text-transform:uppercase;line-height:1} .fact dd small{display:block;font-family:var(--fb);font-size:17px;text-transform:none;color:#b9b2d8;margin-top:10px;line-height:1.6} /* detail pages ------------------------------------------------------- */ .detail{display:grid;grid-template-columns:1fr .62fr;gap:clamp(30px,5vw,72px);align-items:start} .panel{background:#fff;border:2px solid var(--line);padding:clamp(24px,3vw,38px)} .on-dark .panel{background:var(--indigo);border-color:var(--line-dark)} .panel dl{display:grid;gap:18px} .panel dt{font:700 16px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--electric);margin-bottom:6px} .panel dd{font-size:17px} .legal h2{font-size:clamp(24px,2.6vw,34px);margin:44px 0 16px} .legal h2:first-child{margin-top:0} .legal p{margin-bottom:14px;color:var(--ink-dim);max-width:76ch} /* forms -------------------------------------------------------------- */ form{display:grid;gap:16px;max-width:640px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} label{display:block;font:700 16px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:9px} .on-dark label{color:#b9b2d8} input,textarea,select{width:100%;font:400 17px/1.5 var(--fb);color:var(--ink);background:#fff;border:2px solid var(--line);padding:14px 16px;transition:border-color .22s} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--electric)} textarea{min-height:150px;resize:vertical} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-msg{font-size:16px;min-height:24px} .form-msg.ok{color:#1d8a52} .form-msg.err{color:#c23b22} .contact-grid{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(32px,5vw,78px)} .info{display:grid;gap:0} .info div{border-top:2px solid var(--line);padding:20px 0} .info dt{font:700 16px/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--electric);margin-bottom:10px} .info dd{font-size:17px} .info a:hover{color:var(--electric)} /* footer ------------------------------------------------------------- */ footer{background:var(--indigo-deep);color:#fff;padding:clamp(52px,6vw,88px) 0 32px} .foot-grid{display:grid;grid-template-columns:1.3fr .9fr .9fr;gap:clamp(28px,4vw,64px)} .foot-grid img{width:190px;height:auto;margin-bottom:22px} footer h4{font:700 16px/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--electric);margin-bottom:18px} footer ul{list-style:none;display:grid;gap:11px;font-size:16px;color:#ddd8f2} footer a:hover{color:#fff} .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(36px,5vw,60px);padding-top:24px;border-top:1px solid var(--line-dark);font-size:16px;color:#b9b2d8} @media(max-width:1000px){ .hero-grid,.split,.detail,.contact-grid,.foot-grid,.bio{grid-template-columns:1fr} .team{grid-template-columns:1fr} .member{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center} .member img{width:150px;margin-bottom:0} .navlinks{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--indigo);flex-direction:column;justify-content:center;gap:26px;padding:40px;transform:translateX(100%);transition:transform .36s cubic-bezier(.22,.7,.3,1);font-size:20px;z-index:65} .navlinks.open{transform:none} .burger{display:block;position:relative;z-index:70} .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:700px){ .work,.row2,.facts{grid-template-columns:1fr} .svc{grid-template-columns:1fr;gap:10px;align-items:start} .member{grid-template-columns:1fr} .member img{width:180px} .stack .a,.stack .b{transform:none} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .ready .rv{opacity:1;transform:none} *{transition-duration:.01ms !important} }