/* ============================================================ MISSION CONSULTING — Matt Coapman, Fractional CMO Brand system: Panther Blue / Safety Yellow / Ink / Bone Square corners everywhere. Archivo 900 + Space Mono. ============================================================ */ :root{ --blue:#0085CA; --yellow:#FFD500; --ink:#101820; --bone:#F5F3EE; --charcoal:#2A2D32; --steel:#BFC0BF; --font-display:'Archivo',sans-serif; --font-mono:'Space Mono',monospace; --wrap:1180px; --pad:clamp(20px,5vw,64px); } *{margin:0;padding:0;box-sizing:border-box;border-radius:0!important} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ font-family:var(--font-display); font-weight:400; background:var(--ink); color:var(--bone); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} ::selection{background:var(--yellow);color:var(--ink)} .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* ---------- Animation states (progressive enhancement) ---------- Elements are fully visible by default. Only when JS loads does .js-anim on hide them for GSAP reveals. A hard failsafe in app.js forces final state after 2.6s no matter what. */ .js-anim .anim{opacity:0} .js-anim .anim[data-anim="rise"]{transform:translateY(34px)} .js-anim .anim[data-anim="line"]{transform:translateY(44px)} .js-anim.anim-failsafe .anim{opacity:1!important;transform:none!important} /* ======================= NAV ======================= */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(16,24,32,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(191,192,191,.14); } .nav-inner{ max-width:var(--wrap);margin:0 auto; padding:0 var(--pad); height:68px; display:flex;align-items:center;justify-content:space-between;gap:24px; } .nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .nav-mark{width:14px;height:14px;background:var(--yellow);display:inline-block;flex:none} .nav-name{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--bone)} .nav-name b{color:var(--blue);font-weight:700} .nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)} .nav-links a{ font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;color:var(--steel);transition:color .2s; } .nav-links a:hover{color:var(--bone)} .nav-links a.nav-cta{ color:var(--ink);background:var(--yellow); padding:10px 16px;font-weight:700;transition:background .2s; } .nav-links a.nav-cta:hover{background:var(--bone)} .nav-toggle{display:none;background:none;border:1px solid var(--steel);width:44px;height:44px;cursor:pointer;position:relative} .nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--bone);transition:transform .25s,top .25s} .nav-toggle span:first-child{top:16px} .nav-toggle span:last-child{top:26px} .nav-open .nav-toggle span:first-child{top:21px;transform:rotate(45deg)} .nav-open .nav-toggle span:last-child{top:21px;transform:rotate(-45deg)} @media (max-width:800px){ .nav-toggle{display:block} .nav-links{ position:fixed;top:68px;left:0;right:0; background:var(--ink); border-bottom:1px solid rgba(191,192,191,.14); flex-direction:column;align-items:flex-start; padding:24px var(--pad) 32px;gap:20px; transform:translateY(-130%); transition:transform .3s ease; } .nav-open .nav-links{transform:translateY(0)} .nav-links a{font-size:14px} } /* ======================= HERO ======================= */ .hero{ position:relative; min-height:100svh; display:flex;flex-direction:column;justify-content:center; overflow:hidden; padding:120px 0 80px; } #network{position:absolute;inset:0;width:100%;height:100%;opacity:.55} .hero-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%} .eyebrow{ font-family:var(--font-mono);font-size:clamp(11px,1.4vw,13px); letter-spacing:.22em;color:var(--yellow); margin-bottom:22px; } .section-bone .eyebrow{color:var(--blue)} .hero-h1{ font-weight:900; font-size:clamp(2rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.015em; text-transform:uppercase; margin-bottom:28px; } .hero-h1 .line{display:block} .hero-h1 em,.h2 em{font-style:normal} .hl-yellow{color:var(--yellow)} .hl-blue{color:var(--blue)} .line-kicker{margin-top:.35em} .hero-sub{ max-width:640px; font-size:clamp(1rem,1.6vw,1.2rem); color:var(--steel); margin-bottom:36px; } .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .btn{ display:inline-block; font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase; padding:16px 28px;text-decoration:none;border:2px solid transparent;cursor:pointer; transition:transform .15s,background .2s,color .2s,border-color .2s; } .btn:hover{transform:translateY(-2px)} .btn-yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)} .btn-yellow:hover{background:var(--bone);border-color:var(--bone)} .btn-ghost{background:transparent;color:var(--bone);border-color:var(--steel)} .btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)} .hero-scroll{ position:absolute;bottom:26px;left:var(--pad);z-index:2; font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:var(--steel); display:flex;align-items:center;gap:10px; } .hero-scroll span{width:44px;height:1px;background:var(--steel);display:inline-block;position:relative;overflow:hidden} .hero-scroll span::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:translateX(-100%);animation:scrollhint 2.4s ease-in-out infinite} @keyframes scrollhint{50%{transform:translateX(0)}100%{transform:translateX(100%)}} /* ======================= MARQUEE ======================= */ .marquee{ background:var(--yellow);color:var(--ink); overflow:hidden;white-space:nowrap; border-top:1px solid var(--ink);border-bottom:1px solid var(--ink); } .marquee-track{display:inline-flex;animation:marquee 36s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-group{display:inline-flex;align-items:center;padding:16px 0} .marquee-group span{ font-family:var(--font-mono);font-weight:700;font-size:clamp(13px,1.6vw,15px); letter-spacing:.04em;text-transform:uppercase;padding:0 22px; } .marquee-group i{font-style:normal;font-size:9px} @keyframes marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee-track{animation:none}} /* ======================= SECTIONS ======================= */ .section{padding:clamp(84px,11vw,140px) 0} .section-ink{background:var(--ink);color:var(--bone)} .section-bone{background:var(--bone);color:var(--ink)} .h2{ font-weight:900; font-size:clamp(1.7rem,4.4vw,3.1rem); line-height:1.08;letter-spacing:-.01em;text-transform:uppercase; margin-bottom:clamp(36px,5vw,60px); } /* ======================= SERVICES ======================= */ .svc-list{display:flex;flex-direction:column} .svc{ border-top:1px solid rgba(16,24,32,.22); padding:clamp(28px,4vw,44px) 0; display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,4vw,64px); align-items:start; } .svc:last-child{border-bottom:1px solid rgba(16,24,32,.22)} .svc-head{display:flex;flex-direction:column;gap:12px} .svc-tag{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em; color:var(--bone);background:var(--charcoal); padding:5px 10px;width:fit-content; } .svc-tag-flag{background:var(--blue)} .svc h3{ font-weight:900;text-transform:uppercase;letter-spacing:-.005em; font-size:clamp(1.25rem,2.6vw,1.8rem);line-height:1.12; } .svc p{color:var(--charcoal);max-width:56ch} .svc-secondary{opacity:.78} .svc-secondary h3{font-size:clamp(1.05rem,2vw,1.35rem)} .svc-secondary p{font-size:.95rem} @media (max-width:720px){.svc{grid-template-columns:1fr}} /* ======================= CASE STUDIES ======================= */ .case-stack{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)} .case{ border:1px solid rgba(191,192,191,.22); background:var(--charcoal); display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); } .case-media{ border-right:1px solid rgba(191,192,191,.22); padding:clamp(28px,4vw,52px); display:flex;flex-direction:column;justify-content:space-between;gap:36px; background: linear-gradient(rgba(16,24,32,.35),rgba(16,24,32,.35)), repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,133,202,.10) 22px 23px); } .case-logo{width:min(300px,80%);height:auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))} .case-logo-blu{width:min(180px,52%)} .case-role{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--steel)} .case-body{padding:clamp(28px,4vw,52px)} .case-body h3{ font-weight:900;text-transform:uppercase; font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.12; margin-bottom:18px; } .case-body>p{color:var(--steel);max-width:62ch;margin-bottom:32px} .case-stats{ list-style:none; display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px; background:rgba(191,192,191,.22);border:1px solid rgba(191,192,191,.22); } .case-stats li{background:var(--ink);padding:18px 16px} .case-stats strong{ display:block;font-weight:900;font-size:clamp(1.5rem,2.6vw,2rem); color:var(--yellow);letter-spacing:-.01em;line-height:1.1; } .case:nth-child(2) .case-stats strong{color:var(--blue)} .case-stats span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)} @media (max-width:860px){ .case{grid-template-columns:1fr} .case-media{border-right:none;border-bottom:1px solid rgba(191,192,191,.22);flex-direction:row;align-items:center;justify-content:space-between;gap:18px} .case-media .case-logo{width:min(200px,48%)} .case-media .case-logo-blu{width:min(110px,30%)} .case-role{max-width:44%;text-align:right} } /* Brand strip */ .brands{margin-top:clamp(52px,7vw,88px)} .brands-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--steel);margin-bottom:20px} .brands-list{ list-style:none; display:flex;flex-wrap:wrap;gap:14px 34px; align-items:center; } .brands-list li{ font-weight:900;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(1rem,2vw,1.3rem); color:rgba(245,243,238,.55); transition:color .2s; } .brands-list li:hover{color:var(--bone)} /* ======================= ABOUT ======================= */ .about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start} .about-media{position:sticky;top:100px} .about-media img{width:100%;border:1px solid rgba(16,24,32,.25);filter:grayscale(18%)} .about-caption{ font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--charcoal); margin-top:14px;padding-left:14px;border-left:3px solid var(--yellow); } .about-body>p{color:var(--charcoal);max-width:62ch;margin-bottom:18px} .arc{list-style:none;margin-top:36px;border-top:1px solid rgba(16,24,32,.22)} .arc li{ display:flex;gap:20px;align-items:baseline; padding:14px 0;border-bottom:1px solid rgba(16,24,32,.22); font-weight:500; } .arc li span{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em; color:var(--blue);flex:0 0 92px; } @media (max-width:860px){ .about-grid{grid-template-columns:1fr} .about-media{position:static;max-width:440px} } /* ======================= HOW ======================= */ .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(191,192,191,.22);border:1px solid rgba(191,192,191,.22)} .how{background:var(--ink);padding:clamp(24px,3vw,40px)} .how strong{ display:block;font-weight:900;text-transform:uppercase; font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.2;margin-bottom:12px; } .how p{color:var(--steel);font-size:.98rem} @media (max-width:820px){.how-grid{grid-template-columns:1fr}} /* ======================= CONTACT ======================= */ .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);align-items:start} .contact-copy>p{color:var(--charcoal);max-width:48ch;margin-bottom:28px} .contact-direct{display:flex;flex-direction:column;gap:8px} .contact-direct a{ font-family:var(--font-mono);font-weight:700;font-size:clamp(1rem,1.8vw,1.2rem); color:var(--ink);text-decoration:none;width:fit-content; border-bottom:2px solid var(--blue);transition:color .2s,border-color .2s; } .contact-direct a:hover{color:var(--blue)} .contact-form{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid rgba(16,24,32,.2);padding:clamp(24px,3.4vw,40px)} .contact-form label{ font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; display:flex;flex-direction:column;gap:8px;color:var(--charcoal); } .contact-form input,.contact-form textarea{ font-family:var(--font-display);font-size:16px;color:var(--ink); border:1px solid rgba(16,24,32,.3);background:var(--bone); padding:13px 14px;resize:vertical; } .contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)} .contact-form .btn{align-self:flex-start} .form-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--charcoal);min-height:1em} .form-note.ok{color:#177245;font-weight:700} .form-note.err{color:#B3261E;font-weight:700} @media (max-width:860px){.contact-grid{grid-template-columns:1fr}} /* ======================= FOOTER ======================= */ .footer{background:var(--ink);border-top:1px solid rgba(191,192,191,.14);padding:28px 0} .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .footer-brand{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em} .footer-brand b{color:var(--blue)} .footer-meta{font-family:var(--font-mono);font-size:11px;color:var(--steel);letter-spacing:.06em} .footer-top{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--steel);text-decoration:none} .footer-top:hover{color:var(--yellow)} /* Visible keyboard focus */ a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .section-ink a:focus-visible,.nav a:focus-visible{outline-color:var(--yellow)}