*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} :root{ /* =========================================================== EXISTING PALETTE — locked, unchanged, still in active use throughout the current site. Concept 5 extends this rather than replacing it; nothing below removes or renames these. =========================================================== */ --bg:#F5F2EC; --surface:#EDE9E0; --ink:#1A1A1A; --ink-mid:#5A5A5A; --ink-muted:#8A8A8A; --claret:#5C1F1F; --border:#D8D2C5; --footer-bg:#1A1A1A; --footer-text:#F5F2EC; --footer-muted:#8A8A8A; --serif:'Fraunces',serif; --sans:'Inter',sans-serif; --max:1400px; --content-max:1000px; /* =========================================================== CONCEPT 5 — Section 1 foundation tokens New variable namespace, additive. Existing rules above keep working unchanged; new component work (Sections 2 onward) should use these. =========================================================== */ /* Palette extensions */ --bg-base: #F5F2EC; /* warm off-white, primary background */ --bg-surface: #EDE9E0; /* warm surface, panel backgrounds */ --bg-elevated: #F9F6F0; /* slightly elevated, hover states */ --bg-dark: #1A1A1A; /* footer, dark sections */ --ink-primary: #1A1A1A; /* primary text */ --ink-secondary: #4A4744; /* secondary text, descriptions */ --ink-tertiary: #8A8580; /* metadata, captions */ --ink-inverse: #F5F2EC; /* text on dark backgrounds */ --accent: #5C1F1F; /* claret, primary accent */ --accent-soft: #8C3F3F; /* lighter claret, hover and active states */ --accent-faint: #5C1F1F1A; /* claret at 10% opacity, subtle backgrounds */ --border-faint: #1A1A1A0F; /* very faint borders, hairlines */ --border-soft: #1A1A1A1A; /* soft borders, dividers */ --border-strong: #1A1A1A33; /* stronger borders, emphasis */ --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 4px 12px rgba(26, 26, 26, 0.04); --shadow-elevated: 0 2px 4px rgba(26, 26, 26, 0.06), 0 8px 24px rgba(26, 26, 26, 0.06); /* Typography — face families. Fraunces and Inter preserved (same families as --serif/--sans above); JetBrains Mono introduced new for technical metadata, captions, and small accents. NOTE on Fraunces variable axes (opsz, SOFT): the brief calls for opsz 14-144 and SOFT around 50. The current Google Fonts URL (see in each HTML file) requests ital,opsz,wght and DOES vary opsz correctly via the clamp()-based font-size + the browser's own optical-size-matching behaviour. SOFT is a registered axis on the Fraunces variable font itself, but it is NOT currently requested in the Google Fonts URL, and I could not verify from this sandbox (fonts.googleapis.com isn't reachable here) whether Google's CSS2 API actually exposes SOFT as a controllable axis for this family, or silently serves it pinned at default. This needs a real-browser check: open the live site, inspect a Fraunces heading in devtools, and look for a SOFT entry under font-variation-settings / the variable font axes panel. If SOFT is exposed, add `font-variation-settings: "SOFT" 50;` to .font-serif headings to use it; if not exposed, the URL would need `,SOFT` added to the axis list and `,50` to the value list, retested, and confirmed before relying on it. Flagged for founder verification, not silently assumed working. */ --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Monaco, monospace; /* Type scale */ --text-display: clamp(48px, 5.6vw, 72px); --text-display-line-height: 1.05; --text-display-letter-spacing: -0.02em; --text-h1: clamp(36px, 4vw, 52px); --text-h1-line-height: 1.1; --text-h1-letter-spacing: -0.015em; --text-h2: clamp(28px, 3vw, 40px); --text-h2-line-height: 1.15; --text-h2-letter-spacing: -0.01em; --text-h3: clamp(22px, 2.4vw, 30px); --text-h3-line-height: 1.2; --text-h3-letter-spacing: -0.005em; --text-h4: clamp(18px, 1.8vw, 22px); --text-h4-line-height: 1.3; --text-body-lg: 18px; --text-body-lg-line-height: 1.55; --text-body: 17px; --text-body-line-height: 1.6; --text-body-sm: 15px; --text-body-sm-line-height: 1.55; --text-eyebrow: 12px; --text-eyebrow-line-height: 1.4; --text-eyebrow-letter-spacing: 0.12em; --text-mono: 13px; --text-mono-line-height: 1.5; --text-mono-letter-spacing: 0; /* Spacing — 8px baseline */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 200px; /* Layout */ --layout-max-width: 1280px; --layout-gutter-desktop: 32px; --layout-gutter-mobile: 20px; /* Motion */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-ambient: 4000ms; --duration-draw: 1000ms; } /* =========================================================== CONCEPT 5 — eyebrow utility class Inter weight 500, uppercase, letter-spaced. Distinct from the existing .eyebrow class further down this file (which is also currently in active use); this is the Concept 5 version, named to avoid collision until Sections 2+ migrate callers over. =========================================================== */ .eyebrow-c5{ font-family:var(--font-sans); font-size:var(--text-eyebrow); line-height:var(--text-eyebrow-line-height); letter-spacing:var(--text-eyebrow-letter-spacing); text-transform:uppercase; font-weight:500; color:var(--accent); } /* =========================================================== CONCEPT 5 — mono utility class For technical metadata, timestamps, document IDs, "filed:" style annotations. Used sparingly, never for body content. =========================================================== */ .mono{ font-family:var(--font-mono); font-size:var(--text-mono); line-height:var(--text-mono-line-height); letter-spacing:var(--text-mono-letter-spacing); } /* =========================================================== CONCEPT 5 — button system Two types only, per Section 1: primary (filled) and text CTA with arrow. No outlined or tertiary buttons. =========================================================== */ .btn-primary{ display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--bg-base); font-family:var(--font-sans); font-size:15px; font-weight:500; padding:var(--space-4) var(--space-5); border-radius:6px; border:none; cursor:pointer; text-decoration:none; box-shadow:none; transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-elevated); } @media(prefers-reduced-motion:reduce){ .btn-primary{transition:none} .btn-primary:hover{transform:none} } .cta-arrow{ display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-family:var(--font-sans); font-size:15px; font-weight:500; text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; width:fit-content; } .cta-arrow svg{ width:14px; height:14px; transition:transform var(--duration-fast) var(--ease-out); } .cta-arrow:hover svg{ transform:translateX(4px); } @media(prefers-reduced-motion:reduce){ .cta-arrow svg{transition:none} .cta-arrow:hover svg{transform:none} } /* =========================================================== CONCEPT 5 — card system Used for service blocks, engagement options, the agent panel. =========================================================== */ .card-c5{ background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:12px; padding:var(--space-6); } .card-c5.card-c5-interactive{ transition:transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out); } .card-c5.card-c5-interactive:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft); border-color:var(--border-strong); } @media(prefers-reduced-motion:reduce){ .card-c5.card-c5-interactive{transition:none} .card-c5.card-c5-interactive:hover{transform:none} } /* =========================================================== CONCEPT 5 — dividers Three weights, per Section 1. =========================================================== */ .divider-faint { border-top:1px solid var(--border-faint); } .divider-soft { border-top:1px solid var(--border-soft); } .divider-accent { border-top:1px solid var(--accent); } /* =========================================================== CONCEPT 5 — tags Service metadata: channels, capabilities, typical engagement. =========================================================== */ .tag-c5{ display:inline-block; font-family:var(--font-mono); font-size:var(--text-mono); padding:var(--space-1) var(--space-3); background:var(--bg-surface); border-radius:4px; margin-right:var(--space-2); } /* =========================================================== CONCEPT 5 — scroll-in reveal utility Section content rises 8px and fades in. Applied via a small IntersectionObserver script (see scripts.js, Section 2+), this class defines the two visual states it toggles between. =========================================================== */ .reveal-c5{ opacity:0; transform:translateY(8px); transition:opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal-c5.reveal-c5-visible{ opacity:1; transform:translateY(0); } @media(prefers-reduced-motion:reduce){ .reveal-c5{ opacity:1; transform:none; transition:none; } } body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--max);margin:0 auto;padding:0 64px} /* ── EYEBROW / LABEL ── */ .eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--claret); margin-bottom:20px; } /* ── NAV ── */ header{ position:sticky;top:0;z-index:50; background:var(--bg); border-bottom:1px solid var(--border); } .nav-inner{ max-width:var(--max);margin:0 auto;padding:0 64px; height:88px;display:flex;align-items:center;justify-content:space-between; } .logo{display:flex;align-items:baseline;gap:8px} .logo-main{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.3px} .logo-sub{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ink-muted)} .nav-links{display:flex;align-items:center;gap:40px;list-style:none} .nav-links a{font-size:14px;font-weight:500;color:var(--ink-mid);transition:color .2s} .nav-links a:hover{color:var(--claret)} .nav-cta{ font-size:14px;font-weight:500;color:var(--claret); display:flex;align-items:center;gap:6px; border:1px solid var(--claret); padding:10px 20px;border-radius:2px; transition:all .2s; } .nav-cta:hover{background:var(--claret);color:var(--bg)} .nav-ham{display:none;background:none;border:none;cursor:pointer;width:32px;height:32px;flex-direction:column;justify-content:center;gap:6px;align-items:center} .nav-ham span{width:24px;height:1.5px;background:var(--ink)} /* ── MOBILE NAV ── */ .nav-mobile{ position:fixed;inset:0;z-index:100;background:var(--bg); display:flex;flex-direction:column; transform:translateX(100%);transition:transform .35s ease; } .nav-mobile.open{transform:translateX(0)} .nav-mobile-top{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border)} .nav-mobile-close{background:none;border:none;cursor:pointer;width:32px;height:32px;position:relative} .nav-mobile-close span{position:absolute;top:50%;left:50%;width:22px;height:1.5px;background:var(--ink)} .nav-mobile-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)} .nav-mobile-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)} .nav-mobile-links{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:28px} .nav-mobile-links a{font-family:var(--serif);font-size:32px;font-weight:500;color:var(--ink)} .nav-mobile-cta{ margin:0 32px 48px; text-align:center;font-size:15px;font-weight:500;color:var(--bg); background:var(--claret);padding:18px;border-radius:2px; } @media(max-width:860px){ .nav-links,.nav-cta{display:none} .nav-ham{display:flex} .nav-inner{padding:0 24px} } /* ── HERO ── */ .hero{ background:var(--bg); padding:200px 0 160px; } .hero-line{ width:60px;height:1px;background:var(--claret); margin-bottom:48px; } .hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,4.4vw,72px); line-height:1.08; letter-spacing:-1.5px; color:var(--ink); max-width:1180px; } .hero-sub-row{ display:flex;justify-content:flex-end;margin-top:64px; } .hero-sub{ font-size:18px; font-weight:400; line-height:1.6; color:var(--ink-mid); max-width:560px; text-align:right; } .hero-ctas{ margin-top:56px; display:flex;align-items:center;gap:32px;flex-wrap:wrap; } .cta-primary{ font-size:17px;font-weight:500;color:var(--claret); display:inline-flex;align-items:center;gap:10px; border-bottom:1px solid var(--claret); padding-bottom:4px; } .cta-primary svg{width:16px;height:16px;transition:transform .2s} .cta-primary:hover svg{transform:translateX(4px)} .cta-secondary{ font-size:15px;font-weight:500;color:var(--ink-muted); border-bottom:1px solid transparent; transition:border-color .2s,color .2s; } .cta-secondary:hover{color:var(--ink-mid);border-color:var(--ink-muted)} @media(max-width:860px){ .wrap{padding:0 24px} .hero{padding:120px 0 90px} .hero-sub-row{justify-content:flex-start} .hero-sub{text-align:left;max-width:100%} } /* ── TRUST STATEMENT ── */ .trust{ background:var(--bg); border-top:1px solid var(--border); padding:160px 0; } .trust-statement{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,36px); line-height:1.3; letter-spacing:-.5px; color:var(--ink); max-width:1100px; margin-bottom:28px; } .trust-sub{ font-size:18px; font-weight:400; color:var(--ink-muted); max-width:62ch; line-height:1.6; } @media(max-width:860px){ .trust{padding:90px 0} } /* ── SERVICES ── */ .services{background:var(--bg)} .services-head{ padding:160px 0 0; border-top:1px solid var(--border); } .services-heading{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,40px); letter-spacing:-.5px; color:var(--ink); max-width:700px; } .svc-block{ padding:160px 0; } .svc-block.alt{background:var(--surface)} .svc-block-inner{ max-width:var(--content-max); } .svc-block.right .svc-block-inner{margin-left:28%;max-width:880px} .svc-num{ font-family:var(--serif); font-weight:400; font-size:clamp(48px,5vw,80px); line-height:1; color:var(--claret); margin-bottom:8px; } .svc-name{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,40px); letter-spacing:-1px; color:var(--ink); margin-bottom:32px; } .svc-desc{ font-size:18px; line-height:1.6; color:var(--ink-mid); max-width:62ch; margin-bottom:28px; } .svc-meta{ font-size:15px; color:var(--ink-muted); margin-bottom:10px; } .svc-meta b{color:var(--claret);font-weight:600} .svc-best{ font-style:italic; font-size:15px; color:var(--ink-muted); margin-top:24px; } /* Block 2 - flagship, heavier weight */ .svc-block.flagship{padding:200px 0} .svc-block.flagship .svc-name{font-size:clamp(28px,3.2vw,44px)} .svc-block.flagship .svc-desc{font-size:19px;max-width:66ch} .svc-channels{ font-size:16px;color:var(--ink-mid);margin-bottom:14px; } .svc-channels b{color:var(--claret);font-weight:600;margin-right:6px} .svc-dot{color:var(--ink-muted);margin:0 8px} @media(max-width:860px){ .services-head{padding:90px 0 0} .svc-block,.svc-block.flagship{padding:90px 0} .svc-block.right .svc-block-inner{margin-left:0} .svc-desc{font-size:16px} .svc-block.flagship .svc-desc{font-size:17px} } /* ── HOW WE WORK ── */ .approach{ background:var(--surface); padding:160px 0; border-top:1px solid var(--border); } .approach-head{margin-bottom:96px;max-width:700px} .approach-heading{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,40px); letter-spacing:-.5px; color:var(--ink); } .stages{max-width:800px;position:relative} .stage{ position:relative; padding-left:0; margin-bottom:96px; } .stage:not(:last-child)::after{ content:''; position:absolute; left:34px; top:100%; width:1px; height:96px; background:var(--border); } .stage-num{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,4vw,56px); line-height:1; color:var(--claret); margin-bottom:20px; } .stage-name{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.3px; color:var(--ink); margin-bottom:14px; } .stage-desc{ font-size:17px; line-height:1.6; color:var(--ink-mid); max-width:60ch; } @media(max-width:860px){ .approach{padding:90px 0} .approach-head{margin-bottom:64px} .stage{margin-bottom:64px} .stage:not(:last-child)::after{height:64px;left:24px} } /* ── CASE STUDY / WORK ── */ .work{ background:var(--bg); padding:160px 0; border-top:1px solid var(--border); } .work-head{margin-bottom:96px;max-width:700px} .work-heading{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,40px); letter-spacing:-.5px; color:var(--ink); } .work-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:80px; align-items:start; } .work-statement{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.2vw,24px); line-height:1.4; color:var(--ink); margin-bottom:24px; } .work-sub{ font-size:18px; line-height:1.7; color:var(--ink-mid); max-width:62ch; } .work-stats{display:flex;flex-direction:column;gap:40px} .work-stat-num{ font-family:var(--serif); font-weight:400; font-size:clamp(36px,3.6vw,48px); color:var(--claret); line-height:1; } .work-stat-label{ font-size:14px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-muted); margin-top:8px; } @media(max-width:860px){ .work{padding:90px 0} .work-head{margin-bottom:64px} .work-grid{grid-template-columns:1fr;gap:48px} } /* ── FOUNDER ── */ .founder{ background:var(--bg); padding:160px 0; border-top:1px solid var(--border); } .founder-grid{ display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; } .founder-grid.type-only{display:block;max-width:760px} .founder-photo{ width:100%; aspect-ratio:5/6; background:var(--surface); border:1px solid var(--border); } .founder-photo img{width:100%;height:100%;object-fit:cover;display:block} .founder-bio-col{padding-top:4px} .founder-heading{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.5px; color:var(--ink); margin-bottom:32px; } .founder-bio p{ font-size:18px; line-height:1.8; color:var(--ink-mid); max-width:60ch; margin-bottom:22px; } .founder-link{ font-size:15px;font-weight:500;color:var(--claret); display:inline-flex;align-items:center;gap:8px; border-bottom:1px solid var(--claret); padding-bottom:3px;margin-top:8px; } .founder-link svg{width:14px;height:14px} @media(max-width:860px){ .founder{padding:90px 0} .founder-grid{grid-template-columns:1fr;gap:48px} } /* ── ENGAGEMENT OPTIONS ── */ .engage{ background:var(--surface); padding:160px 0; border-top:1px solid var(--border); } .engage-head{margin-bottom:96px;max-width:700px} .engage-heading{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,40px); letter-spacing:-.5px; color:var(--ink); } .engage-blocks{display:flex;flex-direction:column;gap:120px} .engage-block{max-width:700px} .engage-block.right{margin-left:28%} .engage-title{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.3px; color:var(--ink); margin-bottom:20px; } .engage-desc{ font-size:17px; line-height:1.65; color:var(--ink-mid); max-width:60ch; margin-bottom:14px; } .engage-note{ font-size:15px; color:var(--ink-muted); margin-bottom:28px; } .engage-cta{ font-size:17px;font-weight:500;color:var(--claret); display:inline-flex;align-items:center;gap:10px; border-bottom:1px solid var(--claret); padding-bottom:4px; } .engage-cta svg{width:16px;height:16px} @media(max-width:860px){ .engage{padding:90px 0} .engage-head{margin-bottom:64px} .engage-blocks{gap:64px} .engage-block.right{margin-left:0} } /* ── FOOTER ── */ .site-footer{ background:var(--footer-bg); color:var(--footer-text); padding:96px 0 56px; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:80px; align-items:start; } .footer-col-label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--footer-muted); margin-bottom:24px; } .footer-brand{ font-family:var(--serif); font-weight:600; font-size:24px; letter-spacing:-.3px; color:var(--footer-text); margin-bottom:14px; line-height:1.2; } .footer-tagline{ font-size:15px; color:var(--footer-muted); line-height:1.6; max-width:34ch; margin-bottom:32px; } .footer-social{ display:flex; gap:16px; } .footer-icon-link{ width:36px; height:36px; border:1px solid #2A2A2A; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; color:var(--footer-text); transition:border-color .2s,color .2s; } .footer-icon-link:hover{ border-color:var(--footer-text); color:var(--bg); } .footer-icon-link svg{width:16px;height:16px;display:block} .footer-nav{list-style:none;display:flex;flex-direction:column;gap:14px} .footer-nav a{ font-size:15px; color:var(--footer-text); transition:color .2s; border-bottom:1px solid transparent; padding-bottom:2px; } .footer-nav a:hover{color:var(--bg);border-color:var(--footer-muted)} .footer-legal-line{ font-size:14px; color:var(--footer-muted); line-height:1.7; margin-bottom:2px; } .footer-legal-line:first-of-type{ color:var(--footer-text); margin-bottom:6px; } .footer-legal-links{ font-size:14px; color:var(--footer-muted); margin-top:18px; } .footer-legal-links a{ color:var(--footer-muted); border-bottom:1px solid transparent; padding-bottom:1px; transition:color .2s,border-color .2s; } .footer-legal-links a:hover{color:var(--footer-text);border-color:var(--footer-muted)} .footer-divider{ color:#2A2A2A; margin:0 10px; } .footer-baseline{ margin-top:72px; padding-top:32px; border-top:1px solid #2A2A2A; font-size:13px; color:var(--footer-muted); } @media(max-width:860px){ .site-footer{padding:72px 0 40px} .footer-grid{grid-template-columns:1fr;gap:56px} .footer-baseline{margin-top:48px} } /* ── INNER PAGE HERO (about, contact) ── */ .page-hero{ background:var(--bg); padding:200px 0 160px; border-bottom:1px solid var(--border); } .page-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,3.6vw,52px); line-height:1.12; letter-spacing:-1.2px; color:var(--ink); max-width:980px; margin-top:8px; } .page-hero .page-lead{ font-size:17px; font-weight:400; line-height:1.6; color:var(--ink-mid); max-width:60ch; margin-top:32px; } @media(max-width:860px){ .page-hero{padding:120px 0 90px} .page-hero .page-lead{font-size:16px;margin-top:24px} } /* =========================================================== CONCEPT 5 — grain texture (decision: yes, applied to base surface). Self-contained inline SVG noise filter, no external image request. Opacity kept at the low end of the brief's 2-3% range to stay imperceptible unless looked for. Applied via the .grain-c5 class on (added in Section 2 when the body tag is next touched, or can be added now — see note below). =========================================================== */ .grain-c5{ position:relative; } .grain-c5::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.025; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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"); mix-blend-mode:multiply; } /* =========================================================== CONCEPT 5 — global prefers-reduced-motion safety net Individual components above already guard their own transitions/animations; this is a backstop catching anything that uses transition/animation without an explicit override, so accessibility is never accidentally regressed by future additions to this file. =========================================================== */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* ============================================================================= CONCEPT 5 — Section 2: Site shell (navigation, footer, layout, transitions) ============================================================================= */ /* ── Global page container ── */ .page-container { max-width: var(--layout-max-width); margin: 0 auto; padding: 0 var(--layout-gutter-desktop); } @media (max-width: 860px) { .page-container { padding: 0 var(--layout-gutter-mobile); } } /* ── Navigation (Concept 5) ── */ .nav-c5 { position: sticky; top: 0; z-index: 100; height: 72px; background: var(--bg-base); transition: background var(--duration-base) var(--ease-out), backdrop-filter var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); border-bottom: 1px solid transparent; } .nav-c5.nav-c5-scrolled { background: rgba(245, 242, 236, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-faint); } .nav-c5-inner { max-width: var(--layout-max-width); margin: 0 auto; padding: 0 var(--layout-gutter-desktop); height: 72px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 860px) { .nav-c5, .nav-c5-inner { height: 64px; } .nav-c5-inner { padding: 0 var(--layout-gutter-mobile); } } .nav-c5-logo { display: flex; align-items: baseline; gap: 6px; text-decoration: none; } .nav-c5-logo-main { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--ink-primary); letter-spacing: -0.01em; } .nav-c5-logo-sub { font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: var(--ink-tertiary); } .nav-c5-links { display: flex; align-items: center; gap: var(--space-7); list-style: none; } .nav-c5-links a { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-primary); text-decoration: none; position: relative; padding-bottom: 4px; } .nav-c5-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-out); } .nav-c5-links a:hover::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .nav-c5-links a::after { transition: none; } } .nav-c5-ham { display: none; background: none; border: none; cursor: pointer; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; } .nav-c5-ham span { width: 24px; height: 1.5px; background: var(--ink-primary); } @media (max-width: 860px) { .nav-c5-links, .nav-c5 .btn-primary { display: none; } .nav-c5-ham { display: flex; } } /* Mobile full-screen overlay menu */ .nav-c5-mobile { position: fixed; inset: 0; z-index: 200; background: var(--bg-base); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out); } .nav-c5-mobile.open { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .nav-c5-mobile { transition: none; } } .nav-c5-mobile-top { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--layout-gutter-mobile); border-bottom: 1px solid var(--border-faint); } .nav-c5-mobile-close { background: none; border: none; cursor: pointer; width: 32px; height: 32px; position: relative; } .nav-c5-mobile-close span { position: absolute; top: 50%; left: 50%; width: 22px; height: 1.5px; background: var(--ink-primary); } .nav-c5-mobile-close span:first-child { transform: translate(-50%,-50%) rotate(45deg); } .nav-c5-mobile-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); } .nav-c5-mobile-links { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-7); gap: var(--space-6); } .nav-c5-mobile-links a { font-family: var(--font-serif); font-size: 32px; font-weight: 500; color: var(--ink-primary); text-decoration: none; } .nav-c5-mobile-cta { margin: 0 var(--space-7) var(--space-7); } /* ── Footer (Concept 5, four columns) ── */ .footer-c5 { background: var(--bg-dark); padding: var(--space-10) 0; } @media (max-width: 860px) { .footer-c5 { padding: var(--space-8) 0; } } .footer-c5-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); align-items: start; } @media (max-width: 1023px) { .footer-c5-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); } } @media (max-width: 640px) { .footer-c5-grid { grid-template-columns: 1fr; } } .footer-c5-label { font-family: var(--font-sans); font-size: var(--text-eyebrow); letter-spacing: var(--text-eyebrow-letter-spacing); text-transform: uppercase; font-weight: 500; color: var(--ink-inverse); opacity: 0.85; margin-bottom: var(--space-5); } .footer-c5-brand { font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--ink-inverse); margin-bottom: var(--space-3); } .footer-c5-tagline { font-family: var(--font-sans); font-size: 15px; color: var(--ink-inverse); opacity: 0.85; max-width: 30ch; line-height: 1.5; margin-bottom: var(--space-5); } .footer-c5-contact { font-family: var(--font-sans); font-size: 14px; color: var(--ink-inverse); opacity: 0.85; } .footer-c5-contact a { color: var(--ink-inverse); text-decoration: underline; } .footer-c5-nav { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .footer-c5-nav a { font-family: var(--font-sans); font-size: 15px; color: var(--ink-inverse); opacity: 0.85; text-decoration: none; } .footer-c5-nav a:hover { opacity: 1; } .footer-c5-compliance-line { font-family: var(--font-sans); font-size: 14px; color: var(--ink-inverse); opacity: 0.85; line-height: 1.7; } .footer-c5-compliance-line:first-of-type { opacity: 1; } .footer-c5-bottom { margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--border-strong); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .footer-c5-copyright { font-family: var(--font-sans); font-size: 13px; color: var(--ink-inverse); opacity: 0.85; } .footer-c5-filed { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-inverse); opacity: 0.6; } /* ── Page transitions ── Applied via JS (see scripts.js) toggling these classes on a wrapper element around each page's main content (everything between header and footer). Nav and footer are deliberately outside this wrapper so they stay static during transitions, per the brief. */ .page-transition-wrap { transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .page-transition-leaving { opacity: 0; transform: translateY(-8px); } .page-transition-entering { opacity: 0; transform: translateY(8px); } .page-transition-entered { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .page-transition-wrap { transition: none; } .page-transition-leaving, .page-transition-entering, .page-transition-entered { opacity: 1; transform: none; } } /* ============================================================================= CONCEPT 5 — Section 3: Homepage ============================================================================= */ /* ── Hero (with inline agent panel) ── */ .hero-c5 { padding: var(--space-10) 0 var(--space-11); } @media (max-width: 860px) { .hero-c5 { padding: var(--space-8) 0 var(--space-9); } } .hero-c5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; } @media (max-width: 1023px) { .hero-c5-grid { grid-template-columns: 1fr; } } .hero-c5-eyebrow { margin-bottom: var(--space-5); } .hero-c5-headline { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h1); line-height: var(--text-h1-line-height); letter-spacing: var(--text-h1-letter-spacing); color: var(--ink-primary); max-width: 20ch; } .hero-c5-accent-line { width: 64px; height: 2px; background: var(--accent); margin: var(--space-6) 0; transform: scaleX(0); transform-origin: left; animation: hero-c5-draw var(--duration-draw) var(--ease-out) forwards; animation-delay: 200ms; } @keyframes hero-c5-draw { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .hero-c5-accent-line { animation: none; transform: scaleX(1); } } .hero-c5-sub { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--text-body-lg-line-height); color: var(--ink-secondary); max-width: 440px; margin-bottom: var(--space-7); } .hero-c5-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .hero-c5-agent-slot { width: 100%; min-height: 560px; } @media (max-width: 1023px) { .hero-c5-agent-slot { width: 100%; min-height: 420px; margin-top: var(--space-7); } } /* ── Trust statement (inset panel) ── */ .trust-c5 { background: var(--bg-surface); padding: var(--space-10) 0; } @media (max-width: 860px) { .trust-c5 { padding: var(--space-8) 0; } } .trust-c5-inner { max-width: 920px; margin: 0; text-align: left; } .trust-c5-statement { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); margin-bottom: var(--space-6); } .trust-c5-divider { width: 100%; margin-bottom: var(--space-6); } .trust-c5-compliance { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-secondary); } .trust-c5-compliance .sep { margin: 0 var(--space-3); color: var(--border-strong); } /* ── Services (three-card layout) ── */ .services-c5 { padding: var(--space-10) 0 var(--space-11); } @media (max-width: 860px) { .services-c5 { padding: var(--space-8) 0; } } .services-c5-head { max-width: 920px; margin-bottom: var(--space-8); } .services-c5-heading { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); } .services-c5-cards { display: flex; flex-direction: column; gap: var(--space-7); } .service-c5-card { border-radius: 12px; padding: var(--space-7); background: var(--bg-elevated); border: 1px solid var(--border-soft); } .service-c5-card.service-c5-flagship { background: var(--bg-surface); border-top: 3px solid var(--border-strong); border-left: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); } .service-c5-heading-row { display: flex; align-items: baseline; gap: var(--space-5); margin-bottom: var(--space-5); flex-wrap: wrap; } .service-c5-num { font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: 1; color: var(--accent); } .service-c5-name { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); line-height: var(--text-h3-line-height); color: var(--ink-primary); } .service-c5-flagship-tag { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--accent); background: var(--accent-faint); padding: var(--space-1) var(--space-3); border-radius: 4px; margin-left: auto; } .service-c5-desc { font-family: var(--font-sans); font-size: var(--text-body-lg); color: var(--ink-secondary); max-width: 68ch; margin-bottom: var(--space-5); } .service-c5-meta-row { font-family: var(--font-sans); font-size: 15px; color: var(--ink-secondary); margin-bottom: var(--space-3); } .service-c5-meta-label { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; color: var(--accent); margin-right: var(--space-2); } .service-c5-best { font-style: italic; font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--ink-secondary); margin-top: var(--space-4); } .service-c5-demo { margin-top: var(--space-6); padding: var(--space-5); background: var(--bg-base); border: 1px dashed var(--border-soft); border-radius: 8px; } .service-c5-demo-headline { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--ink-primary); margin-bottom: var(--space-3); } /* ── Process (horizontal row on desktop, vertical on mobile) ── */ .approach-c5 { padding: var(--space-10) 0; background: var(--bg-surface); } @media (max-width: 860px) { .approach-c5 { padding: var(--space-8) 0; } } .approach-c5-head { max-width: 920px; margin-bottom: var(--space-8); } .approach-c5-heading { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); } .approach-c5-row { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; } .approach-c5-stage { padding: var(--space-6); border-left: 1px solid var(--border-faint); } .approach-c5-stage:first-child { border-left: none; padding-left: 0; } .approach-c5-stage-num { font-family: var(--font-serif); font-weight: 500; font-size: 56px; line-height: 1; color: var(--accent); margin-bottom: var(--space-4); } .approach-c5-stage-name { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h4); color: var(--ink-primary); margin-bottom: var(--space-3); } .approach-c5-stage-desc { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--ink-secondary); } .approach-c5-progress { margin-top: var(--space-7); height: 2px; background: var(--border-soft); position: relative; overflow: hidden; } .approach-c5-progress-fill { position: absolute; inset: 0; width: 0%; background: var(--accent); transition: width 100ms linear; } @media (max-width: 860px) { .approach-c5-row { grid-template-columns: 1fr; padding-left: var(--space-5); border-left: 1px solid var(--border-soft); } .approach-c5-stage { border-left: none; padding: 0 0 var(--space-7); } .approach-c5-stage:first-child { padding-left: 0; } .approach-c5-progress { display: none; } } /* ── Work (placeholder case study cards) ── */ .work-c5 { padding: var(--space-10) 0; } @media (max-width: 860px) { .work-c5 { padding: var(--space-8) 0; } } .work-c5-head { max-width: 920px; margin-bottom: var(--space-7); } .work-c5-heading { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); } .work-c5-statement { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h3); color: var(--ink-primary); max-width: 880px; margin-bottom: var(--space-5); } .work-c5-sub { font-family: var(--font-sans); font-size: var(--text-body); color: var(--ink-secondary); max-width: 880px; margin-bottom: var(--space-8); } .work-c5-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } @media (max-width: 860px) { .work-c5-cards { grid-template-columns: 1fr; } } .work-c5-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: var(--space-5); } .work-c5-card-label { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-tertiary); margin-bottom: var(--space-4); } .work-c5-card-heading { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h4); color: var(--ink-primary); margin-bottom: var(--space-4); line-height: 1.3; } .work-c5-card-cta { font-size: 13px; } /* ── Founder (asymmetric two-column) ── */ .founder-c5 { padding: var(--space-10) 0; } @media (max-width: 860px) { .founder-c5 { padding: var(--space-8) 0; } } .founder-c5-head { margin-bottom: var(--space-7); } .founder-c5-grid { display: grid; grid-template-columns: 380px 1fr; gap: var(--space-8); align-items: start; } @media (max-width: 860px) { .founder-c5-grid { grid-template-columns: 1fr; } } .founder-c5-photo-slot { aspect-ratio: 4 / 5; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .founder-c5-photo-mark { width: 64px; height: 64px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0.3; } .founder-c5-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; } .founder-c5-photo-label { position: absolute; bottom: var(--space-4); left: var(--space-4); font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-inverse); padding: 2px var(--space-2); border-radius: 4px; background: rgba(26, 26, 26, 0.45); } .founder-c5-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h2); color: var(--ink-primary); margin-bottom: var(--space-6); } .founder-c5-bio p { font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.7; color: var(--ink-secondary); max-width: 64ch; margin-bottom: var(--space-5); } .founder-c5-credentials { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-faint); } .founder-c5-credentials p { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-tertiary); line-height: 1.7; } /* ── Engagement options (two cards side by side) ── */ .engage-c5 { padding: var(--space-10) 0 var(--space-11); background: var(--bg-surface); } @media (max-width: 860px) { .engage-c5 { padding: var(--space-8) 0; } } .engage-c5-head { max-width: 920px; margin-bottom: var(--space-8); } .engage-c5-heading { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); } .engage-c5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } @media (max-width: 860px) { .engage-c5-grid { grid-template-columns: 1fr; } } .engage-c5-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; padding: var(--space-7); } .engage-c5-card.engage-c5-featured { background: var(--bg-surface); border-top: 2px solid var(--accent); } .engage-c5-card-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--ink-primary); margin-bottom: var(--space-5); } .engage-c5-card-desc { font-family: var(--font-sans); font-size: var(--text-body); color: var(--ink-secondary); margin-bottom: var(--space-4); } .engage-c5-card-note { font-family: var(--font-sans); font-style: italic; font-size: var(--text-body-sm); color: var(--ink-tertiary); margin-bottom: var(--space-6); } /* ============================================================================= CONCEPT 5 — Section 4: About page ============================================================================= */ /* ── Page hero (shared pattern, About + Contact) ── */ .page-hero-c5 { padding: var(--space-10) 0 var(--space-9); } @media (max-width: 860px) { .page-hero-c5 { padding: var(--space-8) 0 var(--space-7); } } .page-hero-c5-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h1); line-height: var(--text-h1-line-height); letter-spacing: var(--text-h1-letter-spacing); color: var(--ink-primary); max-width: 18ch; margin-bottom: var(--space-5); } .page-hero-c5-sub { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--text-body-lg-line-height); color: var(--ink-secondary); max-width: 60ch; } /* ── Founder section (deepened, About page) ── */ .founder-c5-credentials .mono { display: block; font-size: var(--text-mono); color: var(--ink-tertiary); line-height: 1.8; } /* ── How we work (six-principle grid) ── */ .how-we-work-c5 { padding: var(--space-10) 0; background: var(--bg-surface); } @media (max-width: 860px) { .how-we-work-c5 { padding: var(--space-8) 0; } } .how-we-work-c5-head { max-width: 920px; margin-bottom: var(--space-8); } .how-we-work-c5-heading { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); } .how-we-work-c5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border-faint); border-left: 1px solid var(--border-faint); } @media (max-width: 760px) { .how-we-work-c5-grid { grid-template-columns: 1fr; } } .how-we-work-c5-item { padding: var(--space-7); border-right: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); } .how-we-work-c5-num { font-family: var(--font-serif); font-weight: 500; font-size: 48px; line-height: 1; color: var(--accent); margin-bottom: var(--space-4); } .how-we-work-c5-item-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h4); color: var(--ink-primary); margin-bottom: var(--space-3); } .how-we-work-c5-item-body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--ink-secondary); } /* ── What we don't do (scope exclusions) ── */ .scope-c5 { padding: var(--space-10) 0; background: var(--bg-surface); } @media (max-width: 860px) { .scope-c5 { padding: var(--space-8) 0; } } .scope-c5-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--ink-primary); margin-bottom: var(--space-6); } .scope-c5-list { list-style: none; max-width: 680px; margin-bottom: var(--space-6); } .scope-c5-list li { font-family: var(--font-sans); font-size: var(--text-body-lg); color: var(--ink-primary); display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); } .scope-c5-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; transform: translateY(-4px); } .scope-c5-closing { font-family: var(--font-sans); font-size: var(--text-body); color: var(--ink-secondary); max-width: 680px; } /* ── Stack and security callout ── */ .stack-c5 { padding: var(--space-10) 0; } @media (max-width: 860px) { .stack-c5 { padding: var(--space-8) 0; } } .stack-c5-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--ink-primary); margin-bottom: var(--space-5); } .stack-c5-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); } .stack-c5-tags .tag-c5 { font-size: 13px; padding: var(--space-2) var(--space-4); } .stack-c5-note { font-family: var(--font-sans); font-size: var(--text-body); color: var(--ink-secondary); max-width: 60ch; } .stack-c5-divider { margin: var(--space-8) 0; } .security-c5-body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--ink-secondary); max-width: 68ch; } /* ============================================================================= CONCEPT 5 — Section 5: Contact page ============================================================================= */ .contact-engage-c5 { padding: var(--space-9) 0; } .contact-engage-c5:first-of-type { padding-top: 0; } .contact-engage-c5 + .contact-engage-c5 { border-top: 1px solid var(--border-faint); } .contact-engage-c5-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-8); align-items: start; } @media (max-width: 860px) { .contact-engage-c5-grid { grid-template-columns: 1fr; } } .contact-engage-c5-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--ink-primary); margin-bottom: var(--space-5); } .contact-engage-c5-desc { font-family: var(--font-sans); font-size: var(--text-body); color: var(--ink-secondary); margin-bottom: var(--space-5); } .contact-engage-c5-notes { list-style: none; } .contact-engage-c5-notes li { font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--ink-tertiary); margin-bottom: var(--space-2); padding-left: var(--space-4); position: relative; } .contact-engage-c5-notes li::before { content: '–'; position: absolute; left: 0; } .contact-engage-c5-note-single { font-family: var(--font-sans); font-style: italic; font-size: var(--text-body-sm); color: var(--ink-tertiary); } .contact-engage-c5-cal { height: 560px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; position: relative; } .contact-engage-c5-cal iframe { width: 100% !important; height: 100% !important; border: none; display: block; } .contact-engage-c5-cal-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--ink-tertiary); } /* ── Direct email alternative ── */ .contact-email-c5 { padding: var(--space-9) 0 var(--space-10); background: var(--bg-surface); } .contact-email-c5-inner { max-width: 680px; } .contact-email-c5-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); color: var(--ink-primary); margin-bottom: var(--space-4); } .contact-email-c5-desc { font-family: var(--font-sans); font-size: var(--text-body); color: var(--ink-secondary); margin-bottom: var(--space-5); } .contact-email-c5-address { font-family: var(--font-mono); font-size: var(--text-h4); color: var(--accent); text-decoration: underline; text-underline-offset: 4px; display: inline-block; margin-bottom: var(--space-4); } .contact-email-c5-response { font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--ink-tertiary); } /* ============================================================================= CONCEPT 5 — Section 6: Compliance and informational pages (/privacy, /terms, /how-this-works) ============================================================================= */ /* ── Breadcrumb nav ── */ .breadcrumb-c6 { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-tertiary); padding: var(--space-5) 0 0; } .breadcrumb-c6 a { color: var(--ink-tertiary); text-decoration: none; } .breadcrumb-c6 a:hover { color: var(--accent); } .breadcrumb-c6-sep { margin: 0 var(--space-2); opacity: 0.5; } /* ── Page hero (compliance variant — inherits .page-hero-c5 for padding) ── */ .page-hero-c6-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h1); line-height: var(--text-h1-line-height); letter-spacing: var(--text-h1-letter-spacing); color: var(--ink-primary); max-width: 22ch; margin-bottom: var(--space-4); } .page-hero-c6-sub { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--ink-secondary); max-width: 60ch; } .page-hero-c6-meta { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-tertiary); margin-top: var(--space-4); } /* ── Compliance body — single column, max 720px ── */ .compliance-body-c6 { padding: var(--space-9) 0 var(--space-11); } @media (max-width: 860px) { .compliance-body-c6 { padding: var(--space-7) 0 var(--space-9); } } .compliance-body-c6-inner { max-width: 720px; } /* Legal review banner — appears only on scaffolding pages */ .legal-scaffold-notice { background: var(--accent-faint); border: 1px solid var(--accent); border-radius: 6px; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-8); } .legal-scaffold-notice p { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--accent); line-height: 1.6; } /* Section headings within policy body */ .policy-section-c6 { margin-bottom: var(--space-8); } .policy-section-c6-heading { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h3); line-height: var(--text-h3-line-height); color: var(--ink-primary); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-faint); } .policy-section-c6 p { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--ink-secondary); margin-bottom: var(--space-4); } .policy-section-c6 p:last-child { margin-bottom: 0; } /* Policy lists */ .policy-list-c6 { list-style: none; margin-bottom: var(--space-5); } .policy-list-c6 li { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--ink-secondary); display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); } .policy-list-c6 li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; transform: translateY(-3px); } /* Sub-lists (nested items within policy lists) */ .policy-sublist-c6 { list-style: none; margin-top: var(--space-3); margin-left: var(--space-5); } .policy-sublist-c6 li { font-family: var(--font-sans); font-size: var(--text-body-sm); line-height: var(--text-body-sm-line-height); color: var(--ink-secondary); display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); } .policy-sublist-c6 li::before { content: '·'; color: var(--accent); flex-shrink: 0; font-size: 14px; line-height: 1; } /* Processor table (data sharing section) */ .policy-processor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-5); } @media (max-width: 600px) { .policy-processor-grid { grid-template-columns: 1fr; } } .policy-processor-item { background: var(--bg-surface); border: 1px solid var(--border-faint); border-radius: 6px; padding: var(--space-3) var(--space-4); } .policy-processor-item-name { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-primary); font-weight: 500; display: block; margin-bottom: 2px; } .policy-processor-item-role { font-family: var(--font-sans); font-size: var(--text-body-sm); color: var(--ink-tertiary); } /* Contact block at base of policy pages */ .policy-contact-c6 { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-soft); } .policy-contact-c6 p { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-tertiary); line-height: 1.8; } .policy-contact-c6 a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* Skeleton placeholder block — used in /terms for unpopulated sections */ .policy-skeleton-c6 { background: var(--bg-surface); border: 1px dashed var(--border-soft); border-radius: 6px; padding: var(--space-5); margin-bottom: var(--space-4); } .policy-skeleton-c6 p { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--ink-tertiary); font-style: italic; } /* How this works — capability/limitation cards */ .hiw-cards-c6 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); } @media (max-width: 640px) { .hiw-cards-c6 { grid-template-columns: 1fr; } } .hiw-card-c6 { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 10px; padding: var(--space-6); } .hiw-card-c6-label { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); display: block; } .hiw-card-c6 .policy-list-c6 { margin-bottom: 0; } /* ============================================================================= POST-REVIEW FIXES (Change set document, July 2026) ============================================================================= */ /* Change 5 — Fix widget header title truncation The header title "Insightful Minds AI" was truncating with ellipsis because the header padding was consuming too much horizontal space. Fix: reduce padding, allow title to breathe, and ensure no overflow:hidden truncates the text at any supported viewport width. */ .imc-widget-header { padding: 0 var(--imc-sp-3) !important; } .imc-widget-header-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 14px !important; } .imc-widget-header-subtitle { font-size: 11px !important; } .imc-widget-header-link { font-size: 12px !important; white-space: nowrap; } /* Change 3 — Loading skeleton for inline hero agent panel Shows a considered loading state (not raw "Connecting..." text) for up to 3 seconds while the backend responds. */ .imc-hero-agent-loading { display: flex; flex-direction: column; gap: 10px; padding: var(--space-5, 24px); width: 100%; } .imc-hero-skeleton-line { height: 14px; background: linear-gradient(90deg, var(--bg-surface, #EDE9E0) 25%, var(--bg-elevated, #F9F6F0) 50%, var(--bg-surface, #EDE9E0) 75%); background-size: 200% 100%; border-radius: 4px; animation: imc-skeleton-shimmer 1.5s infinite ease-in-out; } .imc-hero-skeleton-line:nth-child(1) { width: 85%; } .imc-hero-skeleton-line:nth-child(2) { width: 70%; } .imc-hero-skeleton-line:nth-child(3) { width: 60%; } @keyframes imc-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .imc-hero-skeleton-line { animation: none; } } /* ============================================================================= SPACING TIGHTENING — post-review (July 2026) Reduces excessive vertical whitespace on the about page and compliance pages. --space-10 (128px) per section was too generous when sections have limited content. Tightened to --space-8 (64px) / --space-7 (48px). ============================================================================= */ /* About page — section padding */ .founder-c5 { padding: var(--space-8) 0 !important; } .how-we-work-c5 { padding: var(--space-8) 0 !important; } .scope-c5 { padding: var(--space-8) 0 !important; } .stack-c5 { padding: var(--space-8) 0 !important; } /* Founder photo slot — cap height so it doesn't create a huge empty box */ .founder-c5-photo-slot { aspect-ratio: unset !important; height: 320px !important; } /* Founder head eyebrow gap */ .founder-c5-head { margin-bottom: var(--space-5) !important; } /* Homepage — tighten sections that felt loose */ .work-c5 { padding: var(--space-8) 0 !important; } .engage-c5 { padding: var(--space-8) 0 var(--space-9) !important; } /* Compliance pages — body padding */ .compliance-body-c6 { padding: var(--space-7) 0 var(--space-9) !important; } /* Page hero on inner pages — reduce bottom gap */ .page-hero-c5 { padding: var(--space-8) 0 var(--space-7) !important; } @media (max-width: 860px) { .founder-c5 { padding: var(--space-7) 0 !important; } .how-we-work-c5 { padding: var(--space-7) 0 !important; } .scope-c5 { padding: var(--space-7) 0 !important; } .stack-c5 { padding: var(--space-7) 0 !important; } .founder-c5-photo-slot { height: 240px !important; } .work-c5 { padding: var(--space-7) 0 !important; } .engage-c5 { padding: var(--space-7) 0 !important; } .compliance-body-c6 { padding: var(--space-6) 0 var(--space-8) !important; } .page-hero-c5 { padding: var(--space-7) 0 var(--space-6) !important; } } /* Fix contact email address size — --text-h4 was too large */ .contact-email-c5-address { font-size: var(--text-body) !important; }