/* ============================================================ Humans + Machines — Apple-grade glass edition ------------------------------------------------------------ Concept: "the convergence." Warm champagne light (human) and cool steel light (machine) meet at a point of light. Every surface is frosted glass floating over a living aurora, with a fine gradient border + top-edge highlight (the real Apple tell, not just backdrop-blur). Brand palette — bronze / cream / deep warm ink — keeps the glass off the generic blue-purple default. Type foundation kept: Geist / Newsreader / Geist Mono. ============================================================ */ /* Fonts are loaded via in index.html (avoids the @import request waterfall: HTML -> site.css -> fonts). */ :root { /* --- canvas --- */ --ink: #0B0A08; --ink-2: #100E0A; --ink-3: #17140E; --cream: #F2EEE4; /* bright section bg */ --cream-ink: #14120C; /* text on bright */ /* --- foreground --- */ --fg: #F3EFE6; --fg-muted: #A7A296; --fg-faint: #8C877B; /* ~5.7:1 on --ink — clears WCAG AA for small text */ --fg-ghost: #3C3A34; /* --- warm (human) light --- */ --bronze: #C89B63; --bronze-soft:#DDB47F; --champagne: #E7C79A; --gold: #E0BC72; /* --- cool (machine) light, used sparingly --- */ --steel: #8FB3C9; --steel-soft: #B4D0E0; /* --- glass system --- */ --glass-fill: linear-gradient(180deg, rgba(255,252,245,0.065), rgba(255,252,245,0.022)); --glass-fill-2: linear-gradient(180deg, rgba(255,252,245,0.095), rgba(255,252,245,0.035)); --glass-border: rgba(255,255,255,0.10); --glass-hi: inset 0 1px 0 0 rgba(255,255,255,0.16); --glass-shadow: 0 26px 60px -28px rgba(0,0,0,0.72), 0 8px 24px -18px rgba(0,0,0,0.6); --blur: 22px; --line: rgba(243,239,230,0.10); --line-soft: rgba(243,239,230,0.06); --line-strong: rgba(243,239,230,0.20); --serif: "Newsreader", Georgia, serif; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 1300px; --pad: clamp(20px, 4vw, 56px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 108px; } body { margin: 0; background: var(--ink); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: var(--bronze); color: #0A0A0B; } .skip-link { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -140%); z-index: 200; background: var(--fg); color: var(--ink); padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; transition: transform 200ms var(--ease); } .skip-link:focus { transform: translate(-50%, 0); outline: 2px solid var(--bronze); outline-offset: 2px; } /* ============================================================ AMBIENT BACKGROUND */ .bg-field { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); pointer-events: none; } .aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.85; will-change: transform; } .aurora-warm { width: 62vw; height: 62vw; left: -14vw; top: -12vw; background: radial-gradient(circle at 50% 50%, rgba(224,188,114,0.34), rgba(200,155,99,0.14) 42%, transparent 68%); animation: driftWarm 26s ease-in-out infinite alternate; } .aurora-cool { width: 58vw; height: 58vw; right: -16vw; top: 4vw; background: radial-gradient(circle at 50% 50%, rgba(143,179,201,0.22), rgba(143,179,201,0.08) 44%, transparent 70%); animation: driftCool 30s ease-in-out infinite alternate; } .aurora-core { width: 48vw; height: 48vw; left: 50%; top: 24vw; transform: translateX(-50%); background: radial-gradient(circle at 50% 50%, rgba(255,244,224,0.16), rgba(221,180,127,0.08) 40%, transparent 66%); animation: driftCore 34s ease-in-out infinite alternate; } @keyframes driftWarm { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, 5vw) scale(1.12); } } @keyframes driftCool { from { transform: translate(0,0) scale(1); } to { transform: translate(-5vw, 7vw) scale(1.1); } } @keyframes driftCore { from { transform: translateX(-50%) translateY(0) scale(1); opacity: .8; } to { transform: translateX(-50%) translateY(6vw) scale(1.14); opacity: 1; } } .grain { position: absolute; inset: -50%; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ GLASS UTILITY */ .glass { background: var(--glass-fill); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5); box-shadow: var(--glass-hi), var(--glass-shadow); } .glass-strong { background: var(--glass-fill-2); border: 1px solid rgba(255,255,255,0.13); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.20), var(--glass-shadow); } /* ============================================================ TYPE */ .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 9px; } .eyebrow .pn { color: var(--bronze); } .serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; } .amp { color: var(--bronze); font-family: var(--serif); font-style: italic; font-weight: 400; } .display { font-family: var(--sans); font-weight: 600; font-size: clamp(40px, 7vw, 100px); line-height: 0.98; letter-spacing: -0.035em; } .h-lg { font-family: var(--sans); font-weight: 600; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -0.025em; } .statement { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 3.1vw, 46px); line-height: 1.18; letter-spacing: -0.02em; } /* ============================================================ LAYOUT */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } section { position: relative; } .section-pad { padding-block: clamp(72px, 10vw, 148px); } .section-tight { padding-top: 0; } /* ============================================================ BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; padding: 14px 26px; border-radius: var(--r-pill); transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease); border: 1px solid transparent; white-space: nowrap; position: relative; overflow: hidden; } .btn .arrow { transition: transform 240ms var(--ease); display: inline-block; } .btn:hover .arrow { transform: translateX(4px); } .btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; } .btn-primary { background: linear-gradient(135deg, var(--champagne), var(--bronze) 62%, #B0854E); color: #1B1206; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 30px -12px rgba(200,155,99,0.55); } .btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 18px 40px -12px rgba(200,155,99,0.65); } /* moving sheen on the primary button */ .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.5) 48%, transparent 62%); transform: translateX(-120%); transition: transform 700ms var(--ease); } .btn-primary:hover::after { transform: translateX(120%); } .btn-glass { background: var(--glass-fill); color: var(--fg); border-color: var(--glass-border); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--glass-hi); } .btn-glass:hover { border-color: rgba(255,255,255,0.24); background: var(--glass-fill-2); transform: translateY(-2px); } .btn-ink { background: var(--cream-ink); color: var(--cream); } .btn-ink:hover { background: #000; transform: translateY(-2px); } .btn-lg { padding: 17px 32px; font-size: 16px; } .btn-sm { padding: 11px 20px; font-size: 14px; } /* ============================================================ HEADER (floating glass pill) */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px var(--pad) 0; transition: padding 300ms var(--ease); } .nav-shell { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 12px 0 22px; border-radius: var(--r-pill); transition: background 360ms var(--ease), box-shadow 360ms var(--ease), border-color 360ms var(--ease); } .site-header.scrolled { padding-top: 10px; } .site-header.scrolled .nav-shell { background: linear-gradient(180deg, rgba(20,18,13,0.72), rgba(11,10,8,0.6)); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.14), 0 18px 40px -22px rgba(0,0,0,0.85); } .logo { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 1px; } .logo .plus { color: var(--bronze); margin-inline: 3px; } .logo .reg { font-size: 0.55em; vertical-align: super; color: var(--fg-muted); margin-left: 1px; } .nav-center { position: absolute; left: 50%; transform: translateX(-50%); } .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 14px; color: var(--fg-muted); padding: 9px 15px; border-radius: var(--r-pill); transition: color 180ms, background 180ms; } .nav-links a:hover { color: var(--fg); background: rgba(243,239,230,0.07); } .nav-right { display: flex; align-items: center; gap: 10px; } .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--glass-border); border-radius: var(--r-pill); align-items: center; justify-content: center; color: var(--fg); background: rgba(255,255,255,0.03); } .ico { width: 20px; height: 20px; display: block; } /* mobile drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 130; padding: var(--pad); display: flex; align-items: stretch; justify-content: stretch; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 320ms var(--ease), visibility 0s linear 320ms; } .mobile-drawer::before { content: ""; position: absolute; inset: 0; background: rgba(6,5,4,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .drawer-panel { position: relative; width: 100%; max-height: 100%; overflow-y: auto; border-radius: var(--r-xl); display: flex; flex-direction: column; justify-content: safe center; gap: 2px; padding: clamp(28px, 7vw, 56px); transform: translateY(-16px) scale(0.98); transition: transform 360ms var(--ease-out); -webkit-overflow-scrolling: touch; } .mobile-drawer.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 320ms var(--ease), visibility 0s; } .mobile-drawer.open .drawer-panel { transform: none; } .drawer-panel > a:not(.btn) { font-family: var(--sans); font-weight: 600; font-size: clamp(30px, 8vw, 44px); letter-spacing: -0.03em; padding: 12px 0; border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; } .drawer-panel > a .mn { font-family: var(--mono); font-size: 13px; color: var(--bronze); font-weight: 400; margin-right: 16px; } .drawer-cta { margin-top: 30px; align-self: flex-start; } .drawer-close { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border: 1px solid var(--glass-border); border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); } /* ============================================================ HERO */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: clamp(60px, 9vw, 120px); overflow: hidden; } /* hero photograph — human hand reaching to the machine hand, meeting at a point of light */ .hero-media { position: absolute; inset: 0; z-index: 0; background: #0B0A08 url("assets/hero-hands.jpg") no-repeat center right / cover; transform: scale(1.04); transform-origin: 60% 45%; } .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11,10,8,0.97) 0%, rgba(11,10,8,0.9) 22%, rgba(11,10,8,0.58) 50%, rgba(11,10,8,0.16) 100%), linear-gradient(0deg, rgba(11,10,8,0.92) 0%, rgba(11,10,8,0.32) 30%, transparent 58%), linear-gradient(180deg, rgba(11,10,8,0.62) 0%, transparent 20%); } /* Portrait phones: the wide image can't show its full width, so recenter the crop on the convergence (both fingertips + the spark) and use a top-and-bottom scrim that reveals the hands in the middle while keeping text legible. */ @media (max-width: 760px) { .hero-media { background-position: 48% center; } .hero-scrim { background: linear-gradient(180deg, rgba(11,10,8,0.82) 0%, rgba(11,10,8,0.34) 20%, rgba(11,10,8,0.30) 44%, rgba(11,10,8,0.72) 68%, rgba(11,10,8,0.95) 86%, var(--ink) 100%); } } .seam-node { position: absolute; top: 22%; left: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, #fff, var(--champagne) 55%, transparent 72%); box-shadow: 0 0 24px 6px rgba(255,244,224,0.7), 0 0 60px 18px rgba(224,188,114,0.35); animation: nodePulse 3.6s ease-in-out infinite; } @keyframes nodePulse { 0%,100% { opacity: 0.85; transform: translate(-50%,-50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } } .hero-inner { position: relative; z-index: 3; width: 100%; } .hero-type { font-family: var(--mono); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: 0.05em; color: var(--bronze-soft); margin: 0 0 clamp(22px, 4vw, 40px); min-height: 1.5em; line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,0.55); } .ht-badge { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 11px; vertical-align: middle; box-shadow: 0 0 10px 2px rgba(224,188,114,0.7); animation: badgePulse 2.4s ease-in-out infinite; } @keyframes badgePulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } .ht-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; background: var(--bronze-soft); vertical-align: -0.16em; animation: caretBlink 1.05s steps(1) infinite; } @keyframes caretBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } } .hero h1 { margin: 0; max-width: 20ch; text-shadow: 0 2px 30px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.55); } .hero-sub { margin: clamp(20px,3vw,30px) 0 0; max-width: 56ch; font-size: clamp(16px,1.4vw,19px); color: var(--fg-muted); font-weight: 400; text-shadow: 0 1px 20px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.6); } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 40px); } .hero-chips { list-style: none; margin: clamp(30px,4vw,44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--fg); padding: 8px 15px; border-radius: var(--r-pill); } .scroll-cue { position: absolute; right: var(--pad); bottom: clamp(48px,7vw,80px); z-index: 3; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; } .scroll-cue .ln { width: 1px; height: 40px; background: linear-gradient(var(--bronze), transparent); display: inline-block; } @media (max-width: 760px) { .scroll-cue { display: none; } } /* ============================================================ MARQUEE */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding-block: 24px; background: rgba(11,10,8,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .marquee-track { display: flex; width: max-content; animation: scrollX 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: clamp(28px,5vw,64px); padding-right: clamp(28px,5vw,64px); font-family: var(--sans); font-weight: 600; font-size: clamp(28px,4vw,54px); letter-spacing: -0.03em; white-space: nowrap; color: var(--fg); } .marquee-item .sep { color: var(--bronze); font-weight: 400; } @keyframes scrollX { to { transform: translateX(-50%); } } /* ============================================================ STATEMENT */ .statement-sec .eyebrow { margin-bottom: clamp(28px,4vw,44px); } .statement-sec .statement { max-width: 22ch; } .statement-sec .statement .dim { color: var(--fg-faint); } .statement-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px,5vw,72px); align-items: end; } .statement-aside { padding: clamp(26px,3vw,36px); border-radius: var(--r-lg); } .statement-aside p { color: var(--fg-muted); font-size: 16px; line-height: 1.6; margin: 0 0 18px; } .statement-aside p:last-child { margin-bottom: 0; } /* ============================================================ SERVICES */ .svc-list { margin-top: clamp(36px,5vw,64px); border-top: 1px solid var(--line); } .svc-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 24px; padding: clamp(22px,3vw,34px) clamp(16px,2vw,26px); border-bottom: 1px solid var(--line); position: relative; border-radius: var(--r-md); transition: transform 360ms var(--ease), background 360ms var(--ease); overflow: hidden; } .svc-row .svc-no { font-family: var(--mono); font-size: 13px; color: var(--fg-faint); } .svc-row .svc-main { display: flex; flex-direction: column; gap: 8px; } .svc-row .svc-name { font-family: var(--sans); font-weight: 600; font-size: clamp(24px,3vw,42px); letter-spacing: -0.025em; line-height: 1; transition: color 240ms; } .svc-row .svc-name .j { color: var(--fg-faint); transition: color 240ms; } .svc-row .svc-desc { color: var(--fg-muted); font-size: 15px; max-width: 56ch; line-height: 1.5; } .svc-row .svc-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glass-border); display: grid; place-items: center; color: var(--fg-muted); transition: all 300ms var(--ease); background: rgba(255,255,255,0.02); } .svc-row .svc-arrow .ico { width: 18px; height: 18px; transition: transform 300ms var(--ease); } .svc-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(200,155,99,0.12), transparent 60%); opacity: 0; transition: opacity 360ms var(--ease); pointer-events: none; } .svc-row:hover { background: rgba(255,255,255,0.02); transform: translateX(8px); } .svc-row:hover::before { opacity: 1; } .svc-row:hover .svc-name { color: var(--fg); } .svc-row:hover .svc-name .j { color: var(--bronze); } .svc-row:hover .svc-arrow { background: linear-gradient(135deg, var(--champagne), var(--bronze)); border-color: transparent; color: #1B1206; } .svc-row:hover .svc-arrow .ico { transform: translate(2px,-2px); } /* ============================================================ OFFERS */ .offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: clamp(36px,5vw,60px); } .offer { padding: clamp(28px,3.5vw,42px); border-radius: var(--r-lg); display: flex; flex-direction: column; transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease); } .offer:hover { transform: translateY(-6px); border-color: rgba(221,180,127,0.4); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.2), 0 34px 70px -30px rgba(0,0,0,0.8), 0 0 46px -20px rgba(200,155,99,0.4); } .offer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .offer .ltr { font-family: var(--mono); font-size: 13px; color: var(--bronze); } .offer .tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); } .offer h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(23px,2.5vw,32px); letter-spacing: -0.022em; margin: 22px 0 14px; } .offer .desc { color: var(--fg-muted); font-size: 15.5px; line-height: 1.55; margin: 0 0 26px; } .offer .deliv { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); margin-bottom: 14px; } .offer ul { list-style: none; margin: 0 auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .offer li { font-size: 13px; color: var(--fg); border: 1px solid var(--line-strong); padding: 6px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,0.02); } /* ============================================================ WORK (bright) */ .invert { color: var(--cream-ink); border-radius: clamp(24px, 4vw, 44px); margin-inline: clamp(0px, 2vw, 24px); overflow: hidden; position: relative; } .invert::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #F6F2E9, #EAE4D6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 40px 90px -50px rgba(0,0,0,0.9); } .invert .eyebrow { color: rgba(20,18,12,0.72); } .invert .eyebrow .pn { color: #825526; } .invert .h-lg { color: var(--cream-ink); } .work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .work-list { margin-top: clamp(32px,4vw,56px); border-top: 1px solid rgba(20,18,12,0.15); } .work-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px; padding: clamp(20px,2.6vw,30px) clamp(10px,1.6vw,20px); border-bottom: 1px solid rgba(20,18,12,0.15); transition: transform 340ms var(--ease), background 340ms var(--ease); position: relative; border-radius: var(--r-md); } .work-row .wn { font-family: var(--mono); font-size: 12px; color: rgba(20,18,12,0.68); } .work-row .wname { font-family: var(--sans); font-weight: 600; font-size: clamp(20px,2.4vw,32px); letter-spacing: -0.022em; } .work-row .wtags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .work-row .wtag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(20,18,12,0.74); border: 1px solid rgba(20,18,12,0.24); padding: 5px 11px; border-radius: var(--r-pill); } .work-row:hover { transform: translateX(8px); background: rgba(20,18,12,0.04); } .work-note { margin-top: 28px; font-family: var(--mono); font-size: 12px; color: rgba(20,18,12,0.72); text-transform: uppercase; letter-spacing: 0.05em; } /* ============================================================ ABOUT + STATS */ .about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px,5vw,80px); align-items: center; } .about-title { margin-top: 20px; } .about-copy p { color: var(--fg-muted); font-size: 17px; line-height: 1.6; margin: 24px 0 0; max-width: 46ch; } .about-copy .btn { margin-top: 32px; } .stats { display: grid; gap: 0; border-radius: var(--r-lg); padding: clamp(6px,1.4vw,18px) clamp(24px,3vw,34px); } .stat { padding: clamp(22px,3vw,28px) 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .stat:last-child { border-bottom: none; } .stat .sval { font-family: var(--sans); font-weight: 600; font-size: clamp(40px,5vw,68px); letter-spacing: -0.03em; line-height: 1; color: var(--fg); } .stat .sval .u { color: var(--bronze); } .stat .slabel { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); max-width: 16ch; text-align: right; } /* ============================================================ RESOURCES */ .res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .res-title { margin-top: 18px; max-width: 16ch; } .res-lede { color: var(--fg-muted); max-width: 34ch; font-size: 16px; } .res-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px,4vw,40px); } .res-tab { font-size: 13.5px; font-weight: 500; padding: 9px 17px; border-radius: var(--r-pill); border: 1px solid var(--glass-border); color: var(--fg-muted); white-space: nowrap; transition: all 200ms var(--ease); background: rgba(255,255,255,0.02); } .res-tab:hover { color: var(--fg); border-color: var(--line-strong); } .res-tab.active { background: linear-gradient(135deg, var(--champagne), var(--bronze)); color: #1B1206; border-color: transparent; box-shadow: 0 10px 24px -12px rgba(200,155,99,0.6); } .res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; } .res-card { border-radius: var(--r-md); padding: 26px 24px 24px; display: flex; flex-direction: column; min-height: 250px; transition: transform 300ms var(--ease), border-color 300ms var(--ease); } .res-card:hover { transform: translateY(-5px); border-color: rgba(221,180,127,0.36); } .res-cat { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bronze-soft); } .res-card h3 { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; line-height: 1.15; margin: 16px 0 12px; } .res-card p { margin: 0 auto 0 0; color: var(--fg-muted); font-size: 14px; line-height: 1.5; } .res-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--fg); } .res-link .ico { width: 15px; height: 15px; transition: transform 220ms var(--ease); } .res-card:hover .res-link .ico { transform: translate(3px,-3px); } .res-card.hide { display: none; } /* ============================================================ NEWSLETTER */ .letter-wrap { max-width: 920px; } .letter { border-radius: var(--r-xl); padding: clamp(36px,5vw,72px); text-align: center; position: relative; overflow: hidden; } .letter::before { content: ""; position: absolute; top: -40%; left: 50%; width: 80%; height: 80%; transform: translateX(-50%); background: radial-gradient(circle, rgba(224,188,114,0.16), transparent 62%); pointer-events: none; } .letter > * { position: relative; } .letter-eyebrow { justify-content: center; } .letter .h-lg { margin: 16px 0 0; } .letter .sub { margin: 18px auto 0; max-width: 52ch; color: var(--fg-muted); font-size: 16px; } .letter .promise { margin: 20px auto 0; max-width: 46ch; font-family: var(--serif); font-style: italic; font-size: clamp(18px,2vw,24px); color: var(--fg); } .subscribe { display: flex; gap: 10px; max-width: 480px; margin: 30px auto 0; } .subscribe input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 15px; padding: 15px 20px; border-radius: var(--r-pill); border: 1px solid var(--glass-border); background: rgba(243,239,230,0.04); color: var(--fg); transition: border-color 180ms, background 180ms; } .subscribe input::placeholder { color: var(--fg-faint); } .subscribe input:focus { outline: none; border-color: var(--bronze); background: rgba(243,239,230,0.07); } .subscribe input.invalid { border-color: #C8584E; } .subscribe-msg { font-size: 13.5px; margin-top: 14px; min-height: 20px; color: var(--fg-muted); } .subscribe-msg.ok { color: var(--bronze-soft); } .subscribe-msg.err { color: #E08A82; } .letter-trust { margin-top: 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); } /* ============================================================ PROCESS */ .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: clamp(36px,5vw,56px); } .step { border-radius: var(--r-md); padding: clamp(24px,3vw,32px) clamp(18px,2vw,24px); min-height: 200px; display: flex; flex-direction: column; transition: transform 300ms var(--ease), border-color 300ms var(--ease); } .step:hover { transform: translateY(-5px); border-color: rgba(221,180,127,0.34); } .step .sno { font-family: var(--mono); font-size: 13px; color: var(--bronze); } .step h3 { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: clamp(36px,5vw,60px) 0 10px; } .step p { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.5; } /* ============================================================ PRINCIPLES */ .principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(36px,5vw,56px); } .principle { border-radius: var(--r-md); padding: clamp(26px,3vw,32px) clamp(20px,2vw,24px); min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 300ms var(--ease), border-color 300ms var(--ease); } .principle:hover { transform: translateY(-5px); border-color: rgba(221,180,127,0.34); } .principle .prn { font-family: var(--mono); font-size: 12px; color: var(--bronze); } .principle h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(18px,1.8vw,23px); letter-spacing: -0.02em; line-height: 1.18; margin: 26px 0 0; } /* ============================================================ BIG CTA */ .cta { position: relative; overflow: hidden; min-height: 74vh; display: flex; align-items: center; } .cta-seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255,244,224,0.4) 42%, rgba(143,179,201,0.28) 60%, transparent); pointer-events: none; opacity: 0.6; } .cta-seam .seam-node { top: 30%; } .cta-inner { position: relative; z-index: 1; width: 100%; text-align: center; padding-block: clamp(60px,9vw,120px); } .cta-eyebrow { justify-content: center; color: var(--bronze-soft); } .cta-inner .display { margin: 20px auto 0; max-width: 17ch; } .cta-inner .display .dim { color: var(--fg-faint); } .cta-lede { margin: 24px auto 0; max-width: 44ch; color: var(--fg-muted); font-size: clamp(16px,1.5vw,19px); } .cta-inner .hero-cta { justify-content: center; margin-top: 36px; } /* ---- contact form ---- */ .contact-form { max-width: 660px; margin: 40px auto 0; padding: clamp(20px,3vw,30px); border-radius: var(--r-lg); text-align: left; display: flex; flex-direction: column; gap: 12px; } .cf-row { display: flex; gap: 12px; } .contact-form input, .contact-form textarea { width: 100%; font-family: var(--sans); font-size: 15px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--glass-border); background: rgba(243,239,230,0.04); color: var(--fg); transition: border-color 180ms, background 180ms; } .contact-form textarea { resize: vertical; min-height: 88px; line-height: 1.5; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--fg-faint); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--bronze); background: rgba(243,239,230,0.07); } .contact-form input.invalid, .contact-form textarea.invalid { border-color: #C8584E; } .cf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .cf-msg { font-size: 13.5px; min-height: 20px; margin-top: 2px; color: var(--fg-muted); } .cf-msg.ok { color: var(--bronze-soft); } .cf-msg.err { color: #E08A82; } @media (max-width: 560px) { .cf-row { flex-direction: column; } .cf-actions .btn { width: 100%; } } /* ---- Calendly embed + collapsible message form ---- */ .calendly-embed { max-width: 740px; margin: 38px auto 0; padding: 8px; border-radius: var(--r-lg); overflow: hidden; } .calendly-embed iframe { display: block; width: 100%; height: 700px; border: 0; border-radius: calc(var(--r-lg) - 6px); background: var(--ink-2); color-scheme: dark; } .contact-alt { max-width: 660px; margin: 22px auto 0; } .contact-alt summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); padding: 10px 18px; border: 1px solid var(--glass-border); border-radius: var(--r-pill); background: rgba(255,255,255,0.02); transition: color 180ms var(--ease), border-color 180ms var(--ease); } .contact-alt summary::-webkit-details-marker { display: none; } .contact-alt summary::marker { content: ""; } .contact-alt summary:hover { color: var(--fg); border-color: var(--line-strong); } .contact-alt[open] summary { margin-bottom: 18px; color: var(--fg); } .contact-alt .contact-form { margin: 0 auto; text-align: left; } .cta-secondary { margin-top: 30px; } @media (max-width: 620px) { .calendly-embed iframe { height: 980px; } } /* reserve two lines for the typewriter where the tagline wraps (avoids layout shift) */ @media (max-width: 680px) { .hero-type { min-height: 3em; } } /* ============================================================ FOOTER */ .site-footer { padding-top: clamp(56px,7vw,90px); padding-bottom: 36px; border-top: 1px solid var(--line); } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } .footer-brand .logo { font-size: 24px; } .footer-brand p { margin: 18px 0 0; color: var(--fg-muted); font-size: 14.5px; max-width: 30ch; line-height: 1.55; } .footer-col h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .footer-col a { font-size: 14.5px; color: var(--fg-muted); transition: color 160ms; } .footer-col a:hover { color: var(--bronze); } .footer-big { font-family: var(--sans); font-weight: 600; font-size: clamp(32px,9vw,134px); letter-spacing: -0.04em; line-height: 0.9; margin: clamp(48px,7vw,90px) 0 0; color: var(--fg); white-space: nowrap; background: linear-gradient(180deg, var(--fg) 20%, rgba(243,239,230,0.35)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .footer-big .plus { color: var(--bronze); -webkit-text-fill-color: var(--bronze); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); } .footer-bottom .sig { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--fg-muted); } .footer-bottom .meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-faint); } /* ============================================================ REVEAL */ /* Content is visible by default. Only when JS has armed the animation (root .reveal-armed set by the inline head script) do un-revealed elements start hidden — so with JS disabled/blocked nothing vanishes. */ .reveal { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); } .reveal-armed .reveal:not(.in) { opacity: 0; transform: translateY(26px); } .reveal[data-d="1"] { transition-delay: 90ms; } .reveal[data-d="2"] { transition-delay: 180ms; } .reveal[data-d="3"] { transition-delay: 270ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-armed .reveal:not(.in) { opacity: 1 !important; transform: none !important; } .aurora { animation: none !important; } } /* ============================================================ RESPONSIVE */ @media (max-width: 1080px) { .res-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .principles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { html { scroll-padding-top: 92px; } .nav-center { display: none; } .nav-right .btn-desktop { display: none; } .menu-toggle { display: flex; } .nav-shell { height: 58px; } .statement-grid, .about-grid { grid-template-columns: 1fr; gap: 40px; } .offers { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .hero-seam::before { top: 16%; } } @media (max-width: 600px) { body { font-size: 16px; } .res-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .principles { grid-template-columns: 1fr; } .svc-row { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 12px; } .svc-row .svc-arrow { display: none; } .svc-row:hover { transform: none; } .work-row { grid-template-columns: 1fr; gap: 10px; } .work-row .wtags { justify-content: flex-start; } .work-row .wn { display: none; } .work-row:hover { transform: none; } .stat .sval { font-size: 46px; } .subscribe { flex-direction: column; } .subscribe .btn { width: 100%; } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .hero-chips { gap: 7px; } .chip { font-size: 12px; padding: 7px 13px; } }