/* ============================================================ EMERGING CLARITY — design system Dark & cinematic (depth) · modern grotesque · turquoise accent black-and-white imagery · dynamic motion ============================================================ */ /* Fonts are loaded via a single in each page — no @import (which would block rendering). */ :root { --bg: #07090a; --bg-2: #0a0e0f; --panel: #0d1213; --card: #0f1516; --card-2: #121a1b; --line: rgba(255,255,255,0.10); --line-soft: rgba(255,255,255,0.06); --text: #eceae3; --dim: #9aa3a2; --faint: #7d8887; /* ≥4.5:1 on --bg for small labels */ --aqua: #84c2c6; /* signature turquoise */ --aqua-br: #a6dde0; --aqua-deep: #3f777a; --ember: #d98a5b; /* sparing warm accent */ --maxw: 1200px; --maxw-wide: 1340px; --radius: 16px; --radius-lg: 22px; --ease: cubic-bezier(.22,.61,.36,1); --font: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-serif: "Newsreader", Georgia, serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1,h2,h3,h4 { margin: 0; font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; } p { margin: 0 0 1.1em; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: var(--aqua); color: #06181a; } a:focus-visible, button:focus-visible { outline: 2px solid var(--aqua-br); outline-offset: 3px; border-radius: 4px; } /* Skip-to-content — visible only on focus */ .skiplink { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--aqua); color: #06181a; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; transform: translateY(-200%); transition: transform 0.25s var(--ease); } .skiplink:focus { transform: translateY(0); outline: 2px solid var(--aqua-br); outline-offset: 3px; } /* Visually hidden — content for screen readers only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .wrap-wide { max-width: var(--maxw-wide); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--dim); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 8px 15px 8px 13px; background: rgba(255,255,255,0.02); } .eyebrow::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); flex:none; box-shadow: 0 0 10px -1px var(--aqua); animation: eyebrowPulse 3.2s ease-in-out infinite; } @keyframes eyebrowPulse { 0%, 100% { opacity: 0.55; box-shadow: 0 0 8px -2px var(--aqua); transform: scale(1); } 50% { opacity: 1; box-shadow: 0 0 16px 1px var(--aqua); transform: scale(1.15); } } @media (prefers-reduced-motion: reduce){ .eyebrow::before { animation: none; } } .eyebrow .hot { color: var(--aqua); } .eyebrow.center { justify-content: center; } .aqua { color: var(--aqua); } .ember { color: var(--ember); } .serif-emph { font-style: italic; } /* label layer — IBM Plex Mono */ .lbl, .cap, .lc, .tcard__lc, .cf, .qsoon, .qrow .qn, .pricing, .idx, .portrait-tag, .approach__media .tag, .hero__scroll, .footer__col h4, .footer__legal, .cal__host { font-family: var(--font-mono); } /* accent phrase — Newsreader serif italic, brand teal (family rule) */ .mark { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--aqua); letter-spacing: -0.01em; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; } .reveal[data-d="5"]{ transition-delay:.40s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .mark::after{ transform: scaleX(1) !important; transition:none !important; } } /* ============================================================ NAV ============ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 36px; transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(7,9,10,0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); padding: 13px 36px; } .nav__brand { display:flex; flex-direction: column; line-height: 1.05; } .nav__brand .a { font-weight: 800; font-size: 27px; letter-spacing: 0.0em; color: #fff; } .nav__brand .a b { color: var(--aqua); font-weight: 800; } .nav__brand .b { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-top: 5px; white-space: nowrap; } .nav__links { display: flex; align-items: center; gap: 39px; } .nav__links a { font-family: var(--font-mono); font-weight: 500; font-size: 12.8px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); position: relative; transition: color .25s var(--ease); white-space: nowrap; } .nav__links a::after { content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; background: var(--aqua); transition: width .3s var(--ease); } .nav__links a:hover, .nav__links a.active { color: #fff; } .nav__links a.active::after, .nav__links a:hover::after { width: 100%; } .nav__cta { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #06181a; background: var(--aqua); padding: 12px 20px; border-radius: 999px; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s; white-space: nowrap; } .nav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(132,194,198,.55); background: var(--aqua-br); } .nav__burger { display:none; background:none; border:0; cursor:pointer; padding:8px; } .nav__burger span { display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.3s var(--ease); border-radius:2px; } .nav.open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav.open .nav__burger span:nth-child(2){ opacity:0; } .nav.open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* ============================================================ BUTTONS ============ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:11px; font-weight:700; font-size:14.5px; letter-spacing:0.02em; cursor:pointer; border:0; padding:17px 32px; border-radius:999px; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s; } .btn svg { transition: transform .3s var(--ease); } .btn--aqua { background: var(--aqua); color:#06181a; } .btn--aqua:hover { transform: translateY(-3px); background: var(--aqua-br); box-shadow: 0 18px 40px -14px rgba(132,194,198,.6); } .btn--aqua:hover svg { transform: translateX(4px); } .btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); } .btn--ghost:hover { border-color: var(--aqua); color: var(--aqua-br); transform: translateY(-3px); } .tlink { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:14px; letter-spacing:0.04em; color: var(--text); transition: gap .25s var(--ease), color .25s; white-space: nowrap; } .tlink svg { transition: transform .25s var(--ease); } .tlink:hover { color: var(--aqua-br); gap: 16px; } /* ============================================================ SECTIONS ============ */ .section { padding: clamp(88px, 11vw, 150px) 0; position: relative; } .section--panel { background: var(--bg-2); } .section__head { max-width: 760px; margin: 0 0 60px; } .section__head.center { margin-left: auto; margin-right: auto; text-align: center; } .section__title { font-size: clamp(34px, 4.6vw, 60px); margin-top: 22px; } .section__intro { font-size: clamp(17px,1.5vw,20px); color: var(--dim); margin-top: 20px; } .lede { font-size: clamp(18px,1.7vw,22px); line-height: 1.6; color: var(--dim); } .lede b { color: var(--text); font-weight: 700; } /* ============================================================ CARDS ============ */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s; } .card:hover { transform: translateY(-6px); border-color: rgba(132,194,198,.4); box-shadow: 0 30px 70px -40px rgba(132,194,198,.45); background: var(--card-2); } /* ============================================================ FOOTER ============ */ .footer { background: var(--bg); border-top: 1px solid var(--line); padding: 80px 0 48px; } .footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } .footer__brand .a { font-weight:800; font-size:22px; } .footer__brand .a b { color: var(--aqua); } .footer__brand p { color: var(--dim); font-size:16px; margin-top:14px; max-width: 34ch; } .footer__practice { display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); transition:color .2s; } .footer__practice:hover { color: var(--aqua-br); } .footer__col h4 { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color: var(--faint); font-weight:700; margin-bottom:18px; } .footer__col a, .footer__col span { display:block; color: var(--dim); font-size:16px; margin-bottom:12px; transition: color .2s; } .footer__col a:hover { color: var(--aqua-br); } .footer__social { display:flex; gap:12px; margin-top:6px; } .footer__social a { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--dim); transition:.25s var(--ease); } .footer__social a:hover { color:#06181a; background:var(--aqua); border-color:var(--aqua); transform:translateY(-3px); } .footer__legal { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line-soft); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color: var(--faint); font-size: 13.5px; } /* ============================================================ NEWSLETTER ============ */ .news { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(34px,5vw,56px); background: radial-gradient(120% 140% at 100% 0%, rgba(132,194,198,.10), transparent 55%), var(--card); } .news h3 { font-size: clamp(26px,3vw,40px); } .news p { color: var(--dim); margin-top: 14px; max-width: 52ch; } .news form { display:flex; gap:12px; margin-top: 28px; max-width: 520px; flex-wrap:wrap; } .news input { flex:1 1 220px; background: var(--bg); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:15px 22px; font-family:inherit; font-size:16px; } .news input::placeholder { color: var(--faint); } .news input:focus { outline:none; border-color: var(--aqua); } .news .ok { color: var(--aqua); font-weight:600; margin-top:16px; display:none; } .news.sent .ok { display:block; } /* ---------- grain / glow utility ---------- */ .glow { position:absolute; inset:0; pointer-events:none; overflow:hidden; } .glow::before { content:""; position:absolute; left:50%; bottom:-30%; width:120%; height:80%; transform: translateX(-50%); background: radial-gradient(60% 60% at 50% 50%, rgba(132,194,198,.20), transparent 70%); animation: breathe 9s ease-in-out infinite; } @keyframes breathe { 0%,100%{ opacity:.55; transform:translateX(-50%) scale(1);} 50%{ opacity:.9; transform:translateX(-50%) scale(1.08);} } @media (prefers-reduced-motion: reduce){ .glow::before{ animation:none; } } /* ============================================================ RESPONSIVE ============ */ @media (max-width: 940px){ .nav__links { display:none; } .nav.open .nav__links { display:flex; flex-direction:column; align-items:flex-start; gap:22px; position:absolute; top:100%; left:0; right:0; background: rgba(7,9,10,.98); padding: 28px 36px 34px; border-bottom: 1px solid var(--line); } .nav__burger { display:block; } .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 640px){ /* the "Begin a conversation" pill cannot fit beside the brand on small screens — the same action lives in every page hero and CTA band */ .nav__cta { display: none; } } @media (max-width: 600px){ body { font-size: 17px; } .wrap { padding: 0 22px; } .nav { padding: 16px 22px; } .nav.scrolled { padding: 12px 22px; } .nav__brand .a { font-size: 22px; } .nav__brand .b { font-size: 12px; } .footer__top { grid-template-columns: 1fr; } .card { padding: 26px; } }