/* ============================================================ Cleo & Company — Editorial system Type: Playfair Display (display) × Inter (body) × JetBrains Mono (eyebrow) ============================================================ */ :root { /* ---- Palette: editorial neutrals ---- */ --ink: #0A0A0A; --ink-soft: #1A1A1A; --ink-mid: #2C2C2C; --ink-60: rgba(10, 10, 10, 0.6); --ink-40: rgba(10, 10, 10, 0.4); --ink-12: rgba(10, 10, 10, 0.12); --ink-06: rgba(10, 10, 10, 0.06); --paper: #FAF7F5; --paper-deep: #F5F0EC; --paper-card: #FFFFFF; /* ---- Accent (default: blush) ---- */ --accent: #C9959B; --accent-deep: #A67278; --accent-pale: #F5E6E8; --accent-light: #E8C8CB; --accent-12: rgba(201, 149, 155, 0.12); /* ---- Type ---- */ --display: 'Playfair Display', 'Iowan Old Style', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Rhythm ---- */ --container: 1240px; --gutter: clamp(20px, 4vw, 40px); /* ---- Shadow ---- */ --shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset, 0 12px 36px rgba(10,10,10,0.06); --shadow-lift: 0 1px 0 rgba(255,255,255,0.8) inset, 0 24px 60px rgba(10,10,10,0.12); } /* Palette variants applied to */ body[data-palette="sage"] { --accent: #8A9A82; --accent-deep: #5F6F58; --accent-pale: #E8EEE5; --accent-light: #C7D2C0; --accent-12: rgba(138, 154, 130, 0.12); } body[data-palette="oxblood"] { --accent: #7A2E2E; --accent-deep: #4F1F1F; --accent-pale: #F1E0E0; --accent-light: #D6A8A8; --accent-12: rgba(122, 46, 46, 0.10); } body[data-palette="ochre"] { --accent: #B88A3E; --accent-deep: #8A6628; --accent-pale: #F2E6CC; --accent-light: #DDBE8A; --accent-12: rgba(184, 138, 62, 0.12); } /* ============================================================ Reset / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; font-weight: 400; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* Eyebrow label */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-60); font-weight: 500; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent-deep); } .eyebrow.center::after { content: ""; width: 24px; height: 1px; background: var(--accent-deep); } .eyebrow.center::before { background: var(--accent-deep); } /* Section headlines */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); margin: 0; } h1 { font-size: clamp(48px, 7.4vw, 116px); line-height: 0.98; letter-spacing: -0.025em; font-weight: 400; } h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.02em; } h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; } h4 { font-size: 18px; line-height: 1.3; } p { margin: 0; } em, .italic { font-style: italic; font-family: var(--display); font-weight: 400; } /* ============================================================ Nav ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 0; background: rgba(250, 247, 245, 0.0); transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(250, 247, 245, 0.85); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); padding: 12px 0; border-bottom-color: var(--ink-06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .brand .mono { width: 44px; height: 26px; display: grid; place-items: center; } .brand svg { width: 100%; height: 100%; } .nav-links { display: flex; align-items: center; gap: 32px; font-size: 13.5px; font-weight: 450; color: var(--ink); } .nav-links a { position: relative; padding: 4px 0; transition: color 0.2s; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-links a:hover::after { transform: scaleX(1); } .nav-cta { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .nav-links a:not(.btn) { display: none; } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-primary:hover { background: var(--ink-soft); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-12); } .btn-ghost:hover { border-color: var(--ink); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-deep); } .btn-sm { padding: 10px 16px; font-size: 12.5px; } .btn .arrow { display: inline-block; transition: transform 0.25s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; padding: 168px 0 100px; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; } .hero-eyebrow-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; } .hero-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-60); display: flex; gap: 24px; flex-wrap: wrap; } .hero-meta .dot { color: var(--accent-deep); } .hero-headline { max-width: 1080px; } .hero-headline .hero-tagline { font-family: var(--display); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; color: var(--ink-mid); margin-top: 28px; max-width: 820px; font-weight: 400; } .hero-headline .hero-tagline strong { font-style: normal; font-weight: 500; color: var(--ink); } .hero-headline h1 .em { font-style: italic; color: var(--accent-deep); font-weight: 400; } .hero-headline h1 .underline { position: relative; display: inline-block; } .hero-headline h1 .underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; background: var(--accent-light); z-index: -1; } .hero-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; margin-top: 24px; } @media (max-width: 900px) { .hero-bottom { grid-template-columns: 1fr; gap: 40px; } } .hero-lede { font-size: 18px; line-height: 1.6; color: var(--ink-mid); max-width: 540px; } .hero-lede em { color: var(--ink); font-style: italic; font-family: var(--display); font-size: 21px; } .hero-cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .hero-side { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-left: 1px solid var(--ink-12); } .hero-side .pull { font-family: var(--display); font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; } .hero-side .pull .accent { color: var(--accent-deep); font-style: italic; } .hero-side .credit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); } /* Hero corner ornament */ .hero-corner { position: absolute; top: 100px; right: var(--gutter); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-40); text-align: right; line-height: 1.8; } @media (max-width: 700px) { .hero-corner { display: none; } } /* ============================================================ Marquee ============================================================ */ .marquee { background: var(--ink); color: var(--paper); padding: 22px 0; overflow: hidden; border-top: 1px solid var(--ink-soft); border-bottom: 1px solid var(--ink-soft); } .marquee-track { display: flex; gap: 56px; white-space: nowrap; animation: marquee 50s linear infinite; font-family: var(--display); font-size: 32px; font-weight: 400; letter-spacing: -0.01em; align-items: center; } .marquee-track > span { display: inline-flex; align-items: center; gap: 56px; } .marquee-track .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .marquee-track .it { font-style: italic; color: var(--accent-light); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ Section wrap ============================================================ */ .section { padding: clamp(80px, 11vw, 160px) 0; position: relative; } .section--paper-deep { background: var(--paper-deep); } .section--ink { background: var(--ink); color: var(--paper); } .section--ink h2, .section--ink h3 { color: var(--paper); } .section--ink .eyebrow { color: rgba(250, 247, 245, 0.65); } .section--ink .eyebrow::before, .section--ink .eyebrow.center::after { background: var(--accent); } .section-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; margin-bottom: 80px; align-items: end; } @media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; } } .section-head .lede { font-size: 18px; color: var(--ink-mid); line-height: 1.6; max-width: 600px; } .section--ink .section-head .lede { color: rgba(250, 247, 245, 0.78); } .section-head .label-col .eyebrow { margin-bottom: 20px; } /* ============================================================ Three Tracks ============================================================ */ .tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); } @media (max-width: 900px) { .tracks { grid-template-columns: 1fr; } } .track { padding: 44px 36px 48px; border-right: 1px solid var(--ink-12); display: flex; flex-direction: column; gap: 22px; position: relative; transition: background 0.3s ease; } .track:last-child { border-right: none; } @media (max-width: 900px) { .track { border-right: none; border-bottom: 1px solid var(--ink-12); } .track:last-child { border-bottom: none; } } .track:hover { background: var(--accent-12); } .track-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent-deep); } .track-name { font-family: var(--display); font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; } .track-name .it { font-style: italic; color: var(--accent-deep); font-weight: 400; } .track-desc { font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 8px; } .track-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ink-06); padding-top: 20px; } .track-list li { font-size: 13.5px; color: var(--ink); display: flex; align-items: baseline; gap: 10px; } .track-list li::before { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } .track-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding-top: 8px; } .track-link:hover { color: var(--accent-deep); } /* ============================================================ Founder / About ============================================================ */ .founder { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } @media (max-width: 900px) { .founder { grid-template-columns: 1fr; gap: 48px; } } .founder-portrait { position: relative; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, var(--accent-pale) 0 12px, var(--paper-deep) 12px 24px); border: 1px solid var(--ink-12); overflow: hidden; } .founder-portrait::after { content: "PORTRAIT · A'NAIYA DAVIS · 4:5"; position: absolute; bottom: 14px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-60); background: var(--paper); padding: 5px 9px; border: 1px solid var(--ink-12); } .founder-quote-mark { position: absolute; top: 24px; left: 24px; font-family: var(--display); font-size: 120px; line-height: 0.6; color: var(--accent); font-style: italic; } .founder-body { padding-top: 12px; } .founder-quote { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 32px; } .founder-quote .it { color: var(--accent-deep); font-style: italic; } .founder-prose p { font-size: 16px; color: var(--ink-mid); line-height: 1.75; margin-bottom: 16px; } .founder-prose p:last-child { margin-bottom: 0; } .founder-creds { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .cred { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 999px; font-size: 12px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .cred .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } .founder-sig { margin-top: 32px; font-family: var(--display); font-style: italic; font-size: 28px; color: var(--ink); } .founder-sig small { display: block; font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); margin-top: 4px; } /* ============================================================ USP grid ============================================================ */ .usp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--ink-12); border: 1px solid var(--ink-12); } @media (max-width: 900px) { .usp-grid { grid-template-columns: 1fr; } } .usp { grid-column: span 4; background: var(--paper); padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: background 0.3s; } .usp:hover { background: var(--accent-pale); } @media (max-width: 900px) { .usp { grid-column: span 1; } } .usp-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent-deep); } .usp h3 { font-size: 22px; line-height: 1.15; } .usp h3 .it { font-style: italic; color: var(--accent-deep); } .usp p { font-size: 14px; color: var(--ink-mid); line-height: 1.6; } /* ============================================================ Process ============================================================ */ .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: step; } @media (max-width: 900px) { .process { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .process { grid-template-columns: 1fr; } } .step { border-top: 1px solid rgba(250,247,245,0.18); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; } .step-meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 247, 245, 0.55); } .step-meta .num { color: var(--accent); } .step h3 { font-size: 26px; line-height: 1.1; } .step h3 .it { font-style: italic; color: var(--accent-light); font-weight: 400; } .step p { font-size: 14px; line-height: 1.6; color: rgba(250, 247, 245, 0.7); } /* ============================================================ Pricing ============================================================ */ .pricing-toggle { display: inline-flex; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 999px; padding: 4px; gap: 4px; } .pricing-toggle button { appearance: none; border: 0; background: transparent; padding: 10px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; cursor: pointer; color: var(--ink-60); transition: all 0.2s; } .pricing-toggle button.active { background: var(--ink); color: var(--paper); } .pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; } @media (max-width: 1100px) { .pricing { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pricing { grid-template-columns: 1fr; } } .price { background: var(--paper-card); border: 1px solid var(--ink-12); padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 16px; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; position: relative; } .price:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .price.featured { background: var(--ink); color: var(--paper); border-color: var(--ink); } .price.featured .price-tier-name, .price.featured .price-amount { color: var(--paper); } .price.featured .price-list li { color: rgba(250,247,245,0.85); } .price.featured .price-list li::before { background: var(--accent); } .price.featured .price-setup { color: rgba(250, 247, 245, 0.55); } .price.featured .price-headline { color: rgba(250, 247, 245, 0.75); } .price.featured .badge { background: var(--accent); color: #fff; border-color: var(--accent); } .price-tier-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); } .price.featured .price-tier-num { color: var(--accent-light); } .price-tier-name { font-family: var(--display); font-size: 30px; line-height: 1.05; letter-spacing: -0.01em; } .price-tier-name .it { font-style: italic; color: var(--accent-deep); } .price.featured .price-tier-name .it { color: var(--accent-light); } .price-headline { font-size: 13.5px; color: var(--ink-mid); line-height: 1.5; min-height: 42px; } .price-divider { height: 1px; background: var(--ink-12); margin: 4px 0; } .price.featured .price-divider { background: rgba(250,247,245,0.18); } .price-amount { font-family: var(--display); font-size: 44px; line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; } .price-amount small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-60); text-transform: uppercase; font-weight: 400; } .price-setup { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); } .price-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-mid); flex: 1; } .price-list li { display: flex; gap: 10px; align-items: baseline; } .price-list li::before { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; margin-top: 7px; } .price-cta { margin-top: auto; width: 100%; justify-content: center; } .badge { position: absolute; top: -10px; right: 20px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); } .pricing-footnote { margin-top: 24px; font-size: 13px; color: var(--ink-60); font-family: var(--mono); letter-spacing: 0.04em; } .pricing-footnote em { color: var(--accent-deep); font-family: var(--display); font-size: 15px; } /* Hide non-active pricing sets */ .pricing[data-set="websites"], .pricing[data-set="govcon"] { display: none; } .pricing[data-set].visible { display: grid; } /* Service rows (websites + govcon) */ .svc-rows { display: flex; flex-direction: column; border-top: 1px solid var(--ink-12); } .svc-row { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--ink-12); align-items: center; } @media (max-width: 800px) { .svc-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; } } .svc-name { font-family: var(--display); font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; } .svc-name .it { font-style: italic; color: var(--accent-deep); } .svc-desc { font-size: 14px; color: var(--ink-mid); line-height: 1.55; } .svc-price { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink); text-align: right; } .svc-price strong { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; } .svc-price small { display: block; font-size: 10px; letter-spacing: 0.16em; color: var(--ink-60); text-transform: uppercase; margin-top: 4px; } @media (max-width: 800px) { .svc-price { text-align: left; } } /* ============================================================ Journal / Insights ============================================================ */ .journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); } @media (max-width: 900px) { .journal { grid-template-columns: 1fr; } } .journal-card { background: var(--paper); transition: background 0.3s ease; position: relative; } .journal-card:hover { background: var(--paper-card); } .journal-link { display: flex; flex-direction: column; gap: 18px; padding: 40px 32px 32px; height: 100%; color: inherit; position: relative; } .journal-link::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 0; height: 2px; background: var(--accent-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .journal-card:hover .journal-link::after { transform: scaleX(1); } .journal-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .journal-meta .journal-num { color: var(--accent-deep); } .journal-meta .journal-tag { padding: 4px 10px; border: 1px solid var(--ink-12); border-radius: 999px; color: var(--ink-60); } .journal-title { font-family: var(--display); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; font-weight: 500; } .journal-title em { font-style: italic; color: var(--accent-deep); font-weight: 400; } .journal-excerpt { font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); flex: 1; } .journal-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--ink-06); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .journal-foot .journal-author { color: var(--ink); font-weight: 500; } .journal-foot .journal-read { color: var(--accent-deep); transition: transform 0.25s ease; display: inline-flex; align-items: center; gap: 6px; } .journal-card:hover .journal-read { transform: translateX(4px); } /* ============================================================ FAQ accordion ============================================================ */ .faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink-12); } .faq-item { border-bottom: 1px solid var(--ink-12); } .faq-item summary { list-style: none; cursor: pointer; padding: 28px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 32px; font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); transition: color 0.2s; } .faq-item summary:hover { color: var(--accent-deep); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .faq-icon { flex-shrink: 0; font-family: var(--mono); font-size: 24px; font-weight: 300; color: var(--accent-deep); transition: transform 0.3s ease; line-height: 1; } .faq-item[open] .faq-icon { transform: rotate(45deg); } .faq-item[open] summary { color: var(--accent-deep); padding-bottom: 8px; } .faq-answer { padding: 0 0 28px; max-width: 820px; } .faq-answer p { font-size: 16px; line-height: 1.7; color: var(--ink-mid); } .audience { border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); padding: 32px 0; background: var(--paper); } .audience-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .audience-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-60); } .audience-list { display: flex; gap: 40px; flex-wrap: wrap; font-family: var(--display); font-size: 18px; font-style: italic; color: var(--ink-mid); } .audience-list span { display: inline-flex; align-items: center; gap: 16px; } .audience-list span::after { content: "·"; color: var(--accent); font-style: normal; } .audience-list span:last-child::after { display: none; } /* ============================================================ Big CTA ============================================================ */ .cta-block { text-align: center; max-width: 920px; margin: 0 auto; } .cta-block .eyebrow { margin-bottom: 28px; } .cta-headline { font-family: var(--display); font-size: clamp(48px, 6.2vw, 96px); line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 28px; } .cta-headline .it { font-style: italic; color: var(--accent); } .cta-lede { font-size: 18px; color: rgba(250, 247, 245, 0.72); max-width: 560px; margin: 0 auto 36px; line-height: 1.6; } .cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .cta-actions .btn-ghost { color: var(--paper); border-color: rgba(250, 247, 245, 0.3); } .cta-actions .btn-ghost:hover { border-color: var(--paper); } /* ============================================================ Contact ============================================================ */ .contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } @media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 48px; } } .contact-meta { display: flex; flex-direction: column; gap: 36px; } .contact-meta h2 { margin-bottom: 16px; } .contact-meta .lede { font-size: 18px; color: var(--ink-mid); line-height: 1.6; max-width: 440px; } .contact-detail-list { display: flex; flex-direction: column; gap: 18px; } .contact-detail { display: flex; gap: 14px; align-items: flex-start; } .contact-detail .key { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-60); min-width: 80px; padding-top: 4px; } .contact-detail .val { font-size: 17px; } .contact-detail .val a:hover { color: var(--accent-deep); } .form { background: var(--paper); border: 1px solid var(--ink-12); padding: 36px; display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); } .field input, .field select, .field textarea { font-family: var(--sans); font-size: 15px; padding: 14px 0; background: transparent; border: none; border-bottom: 1px solid var(--ink-12); color: var(--ink); border-radius: 0; outline: none; transition: border-color 0.2s; resize: none; } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent-deep); } .field textarea { min-height: 100px; padding-top: 12px; } .budget-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip { padding: 9px 14px; border: 1px solid var(--ink-12); background: transparent; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); cursor: pointer; transition: all 0.2s; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .form-submit { margin-top: 8px; align-self: flex-start; } /* ============================================================ Footer ============================================================ */ .footer { background: var(--ink); color: var(--paper); padding: 80px 0 32px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(250,247,245,0.12); } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; } } .footer-brand .brand-text { font-family: var(--display); font-size: 36px; line-height: 1; margin-bottom: 16px; } .footer-brand .brand-text .it { font-style: italic; color: var(--accent); } .footer-brand p { font-size: 14px; color: rgba(250, 247, 245, 0.7); line-height: 1.6; max-width: 320px; } .footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250, 247, 245, 0.55); margin-bottom: 16px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--paper); transition: color 0.2s; } .footer-col a:hover { color: var(--accent-light); } .footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 247, 245, 0.5); } .footer-badges { display: flex; gap: 16px; flex-wrap: wrap; } .footer-badge { padding: 6px 12px; border: 1px solid rgba(250, 247, 245, 0.2); border-radius: 999px; font-size: 10px; } /* ============================================================ Reveal animations ============================================================ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none; } } /* Headline split mask reveal */ .hero h1 .line { display: block; overflow: hidden; } .hero h1 .line > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .hero h1.in .line > span { transform: none; } .hero h1 .line:nth-child(2) > span { transition-delay: 0.08s; } .hero h1 .line:nth-child(3) > span { transition-delay: 0.16s; } /* ============================================================ Hero variant: split ============================================================ */ body[data-hero="split"] .hero-grid { grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; } body[data-hero="split"] .hero-headline { max-width: none; } body[data-hero="split"] .hero-headline h1 { font-size: clamp(44px, 5.4vw, 88px); } body[data-hero="split"] .hero-bottom { grid-template-columns: 1fr; margin-top: 0; } body[data-hero="split"] .hero-side { padding: 32px; background: var(--paper-deep); border: 1px solid var(--ink-12); border-left: 1px solid var(--ink-12); } @media (max-width: 900px) { body[data-hero="split"] .hero-grid { grid-template-columns: 1fr; } }