/* ============================================================ Catching The Gaps — Foundations Colors + Type + Spacing + Semantic styles ============================================================ */ /* Fonts are preconnected and loaded from in index.html. */ :root { --paper: #FAF7F1; --warm-sand: #ECE4D6; --signal-teal: #2BA1A1; --deep-pine: #14625F; --ink: #0E2E2D; --clarity-amber:#D99A2B; --tint: #DCEFEC; --clay: #C76B5A; --line: rgba(14, 46, 45, 0.16); --line-soft: rgba(14, 46, 45, 0.08); --line-strong: rgba(14, 46, 45, 0.28); --ink-72: rgba(14, 46, 45, 0.72); --ink-56: rgba(14, 46, 45, 0.56); --ink-40: rgba(14, 46, 45, 0.40); --bg: var(--paper); --bg-warm: var(--warm-sand); --bg-quiet: var(--tint); --bg-ink: var(--ink); --fg: var(--ink); --fg-muted: var(--ink-72); --fg-subtle: var(--ink-56); --fg-on-ink: var(--paper); --fg-display: var(--deep-pine); --accent: var(--clarity-amber); --accent-fg: var(--ink); --brand: var(--signal-teal); --brand-deep: var(--deep-pine); --danger: var(--clay); --serif-display: 'Fraunces', Georgia, 'Times New Roman', serif; --sans-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono-detail: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; --fs-display: clamp(3.4rem, 9vw, 7rem); --fs-h1: clamp(2.4rem, 5.4vw, 3.6rem); --fs-h2: clamp(2rem, 4.4vw, 3.1rem); --fs-h3: 1.42rem; --fs-h4: 1.02rem; --fs-lead: 1.2rem; --fs-body: 1.0625rem; --fs-small: 0.92rem; --fs-label: 0.74rem; --fs-micro: 0.66rem; --lh-display: 1.05; --lh-heading: 1.08; --lh-body: 1.62; --lh-tight: 1.3; --tracking-label: 0.18em; --tracking-display: -0.01em; --tracking-tight: -0.02em; --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 30px; --s-7: 44px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(14, 46, 45, 0.06), 0 1px 1px rgba(14, 46, 45, 0.04); --shadow-2: 0 6px 22px rgba(14, 46, 45, 0.08), 0 1px 2px rgba(14, 46, 45, 0.05); --shadow-3: 0 16px 40px rgba(14, 46, 45, 0.12); --inner-line: inset 0 0 0 1px var(--line); --content-max: 1080px; --gutter: 38px; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 520ms; } /* ============================================================ Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img { max-width: 100%; display: block; height: auto; } body.no-scroll { overflow: hidden; } /* Skip link — accessibility */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--deep-pine); color: var(--paper); padding: 10px 14px; font-family: var(--sans-body); font-size: 14px; font-weight: 600; text-decoration: none; z-index: 200; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; outline: 2px solid var(--clarity-amber); outline-offset: 2px; } :focus-visible { outline: 2px solid var(--signal-teal); outline-offset: 2px; } /* Section background utility (replaces inline style="background: var(--warm-sand)") */ .bg-sand { background: var(--warm-sand); } /* Footer logo inversion (replaces inline filter style) */ .footer-logo { filter: brightness(0) invert(1); } body { background: var(--bg); color: var(--fg); font-family: var(--sans-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--brand); color: var(--paper); } h1, h2, h3 { font-family: var(--serif-display); font-weight: 500; color: var(--fg-display); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-family: var(--sans-body); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-tight); } em { font-style: italic; } strong { font-weight: 700; } p { margin: 0 0 1em; } p:last-child { margin: 0; } a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--brand); } code, kbd, samp, .mono { font-family: var(--mono-detail); font-size: 0.94em; } /* ============================================================ Layout primitives ============================================================ */ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 38px; } @media (max-width: 700px) { .wrap { padding: 0 22px; } } section { padding: 96px 0; } @media (max-width: 700px) { section { padding: 64px 0; } } /* ============================================================ Kicker block (mono / teal label) ============================================================ */ .kicker-block { font-family: var(--mono-detail); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-teal); display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .kicker-block::before { content: ""; width: 34px; height: 1px; background: currentColor; } .kicker-block .secnum { color: var(--clarity-amber); letter-spacing: 0.12em; } /* ============================================================ Nav ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 241, 0.86); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-soft); } .nav .inner { max-width: 1120px; margin: 0 auto; padding: 18px 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav .brand { display: flex; align-items: center; gap: 12px; color: var(--deep-pine); text-decoration: none; } .nav .brand .word { font-family: var(--serif-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1; } .nav .links { display: flex; align-items: center; gap: 28px; } .nav .links a { font-family: var(--sans-body); font-size: 14.5px; color: var(--ink); text-decoration: none; font-weight: 500; transition: color var(--dur-fast) var(--ease-out); } .nav .links a:hover { color: var(--deep-pine); } .nav .links a.is-active { color: var(--deep-pine); } @media (max-width: 760px) { .nav .inner { padding: 14px 22px; } .nav .brand img { height: 24px; } .nav .brand .word { font-size: 18px; } .nav .brand { gap: 8px; } .nav .links a:not(.btn) { display: none; } .nav .links .btn { font-size: 12px; padding: 8px 14px; } .nav .links .btn .arr { display: none; } .nav .nav-cta-full { display: none; } .nav .nav-cta-short { display: inline; } } .nav .nav-cta-short { display: none; } /* ============================================================ Buttons ============================================================ */ .btn { font-family: var(--sans-body); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn .arr { font-family: var(--mono-detail); font-size: 13px; transition: transform var(--dur-base) var(--ease-out); } .btn:hover .arr { transform: translateX(3px); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--clarity-amber); color: var(--ink); } .btn-primary:hover { background: #C2861E; } .btn-secondary { background: var(--deep-pine); color: var(--paper); } .btn-secondary:hover { background: var(--ink); } .btn-ghost { background: transparent; color: var(--deep-pine); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--deep-pine); background: var(--tint); } .btn-sm { font-size: 13.5px; padding: 10px 18px; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; padding: 88px 0 110px; background: radial-gradient(120% 80% at 88% 8%, rgba(43,161,161,.16), transparent 60%), radial-gradient(90% 70% at 6% 96%, rgba(217,154,43,.12), transparent 55%), var(--paper); overflow: hidden; } .hero .grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(0deg, transparent, transparent 38px, var(--line-soft) 38px, var(--line-soft) 39px); } .hero .inner { position: relative; max-width: 920px; } .hero h1 { font-family: var(--serif-display); font-size: clamp(3rem, 8vw, 6.2rem); font-weight: 500; color: var(--deep-pine); line-height: 1.04; letter-spacing: -0.015em; margin: 18px 0 22px; } .hero h1 em { font-style: italic; color: var(--signal-teal); } .hero .sub { font-family: var(--sans-body); font-size: 1.22rem; line-height: 1.55; color: var(--ink); max-width: 620px; opacity: .92; margin: 0 0 38px; } .hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-meta { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); } .hero-meta .item .lbl { font-family: var(--mono-detail); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-teal); display: block; margin-bottom: 6px; } .hero-meta .item .val { font-size: 15px; font-weight: 600; color: var(--ink); } .dur-chips { display: flex; gap: 6px; align-items: center; } .dur { font-family: var(--mono-detail); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink); background: var(--paper); line-height: 1; white-space: nowrap; } .dur-plus { background: var(--deep-pine); color: var(--paper); border-color: var(--deep-pine); } /* ============================================================ Section heading ============================================================ */ .section-head { margin-bottom: 42px; } .section-head h2 { font-family: var(--serif-display); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 500; color: var(--deep-pine); letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 .35em; } .section-head h2 em { font-style: italic; color: var(--signal-teal); } .section-head p.lead { font-size: 1.18rem; max-width: 660px; color: var(--ink); opacity: .9; margin: 0; } /* ============================================================ Pillar cards ============================================================ */ .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .pillars { grid-template-columns: 1fr; } } .pillar { background: var(--warm-sand); border-radius: var(--r-lg); padding: 26px 24px 28px; } .pillar .num { font-family: var(--mono-detail); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-teal); } .pillar h3 { font-family: var(--serif-display); font-weight: 500; font-size: 1.32rem; color: var(--deep-pine); letter-spacing: -0.01em; line-height: 1.18; margin: 10px 0 8px; } .pillar p { font-size: 14.5px; line-height: 1.55; color: var(--ink); opacity: .85; margin: 0; } /* ============================================================ Leadership alignment ============================================================ */ .alignment-block { background: var(--ink); border-radius: var(--r-xl); padding: 60px 64px; color: var(--paper); } @media (max-width: 700px) { .alignment-block { padding: 40px 28px; } } .alignment-block .kicker-block { color: var(--clarity-amber); } .alignment-block .kicker-block::before { background: currentColor; } .alignment-block h2 { font-family: var(--serif-display); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 500; color: var(--paper); letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 .35em; } .alignment-block h2 em { font-style: italic; color: var(--signal-teal); } .alignment-block .lead { font-size: 1.12rem; line-height: 1.6; color: var(--paper); opacity: .88; max-width: 640px; margin: 0 0 36px; } .alignment-list { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 800px) { .alignment-list { grid-template-columns: 1fr; gap: 16px; } } .alignment-list li { background: rgba(250, 247, 241, 0.07); border: 1px solid rgba(250, 247, 241, 0.12); border-radius: var(--r-lg); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; } .alignment-list li strong { font-family: var(--sans-body); font-size: 15px; font-weight: 700; color: var(--signal-teal); } .alignment-list li span { font-size: 14px; line-height: 1.55; color: var(--paper); opacity: .78; } /* ============================================================ Two-path split (audiences) ============================================================ */ .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 760px) { .paths { grid-template-columns: 1fr; } } .path { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 30px 26px; display: flex; flex-direction: column; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .path:hover { border-color: var(--deep-pine); transform: translateY(-2px); } .path .pill { font-family: var(--mono-detail); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--deep-pine); align-self: flex-start; } .path h3 { font-family: var(--serif-display); font-weight: 500; font-size: 1.7rem; color: var(--deep-pine); letter-spacing: -0.015em; line-height: 1.15; margin: 14px 0 10px; } .path p { font-size: 15px; line-height: 1.55; color: var(--ink); opacity: .88; margin: 0 0 18px; } .path ul.dash { list-style: none; margin: 0 0 24px; padding: 0; } .path ul.dash li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 14px; color: var(--ink); } .path ul.dash li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 11px; height: 1.5px; background: var(--signal-teal); } .path .cta { margin-top: auto; } /* ============================================================ Brand idea callout ============================================================ */ .callout { background: var(--ink); color: var(--paper); border-radius: var(--r-xl); padding: 56px 60px; } @media (max-width: 700px) { .callout { padding: 38px 28px; } } .callout .kicker-block { color: var(--clarity-amber); margin-bottom: 22px; } .callout .kicker-block::before { background: currentColor; } .callout .quote { font-family: var(--serif-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; color: var(--paper); margin: 0 0 18px; max-width: 820px; } .callout .quote em { font-style: italic; color: var(--signal-teal); } .callout .footnote { font-family: var(--sans-body); font-size: 15px; opacity: .78; margin: 0; max-width: 620px; } /* ============================================================ Testimonial strip ============================================================ */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .testimonials { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .testimonials { grid-template-columns: 1fr; } } .t-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 28px 28px 24px; } .t-card .quotemark { font-family: var(--serif-display); font-size: 56px; line-height: 0.6; color: var(--signal-teal); opacity: .35; margin: 0 0 4px; } .t-card blockquote { margin: 0 0 18px; font-family: var(--sans-body); font-size: 15.5px; line-height: 1.6; color: var(--ink); } .t-card .who { display: flex; flex-direction: column; gap: 2px; } .t-card .who b { font-family: var(--sans-body); font-size: 14px; font-weight: 600; color: var(--deep-pine); } .t-card .who span { font-family: var(--mono-detail); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-56); } /* ============================================================ About ============================================================ */ .about { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; } @media (max-width: 800px) { .about { grid-template-columns: 1fr; gap: 36px; } } .about-photo img { width: 100%; border-radius: var(--r-xl); aspect-ratio: 1; object-fit: cover; } @media (max-width: 800px) { .about-photo { max-width: 280px; } } .about-content h2 { font-family: var(--serif-display); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 500; color: var(--deep-pine); letter-spacing: -0.01em; line-height: 1.08; margin: 0 0 20px; } .about-content p { font-size: 15.5px; line-height: 1.62; color: var(--ink); opacity: .9; max-width: 620px; } .about-creds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .about-creds .cred { font-family: var(--mono-detail); font-size: 11px; letter-spacing: 0.06em; padding: 6px 14px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); color: var(--deep-pine); font-weight: 500; } /* ============================================================ Footer ============================================================ */ .footer { background: var(--ink); color: var(--paper); padding: 64px 0 48px; } .footer .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .footer .brand { display: flex; align-items: center; gap: 12px; } .footer .footer-brand { align-items: flex-start; } .footer .footer-brand .brand-text { display: flex; flex-direction: column; } .footer .footer-brand .word { font-family: var(--serif-display); font-weight: 500; font-size: 34px; color: var(--paper); letter-spacing: -0.02em; line-height: 1.1; } .footer .tagline { font-size: 14px; color: var(--paper); opacity: .7; margin: 6px 0 0; } .footer .links { display: flex; gap: 28px; flex-wrap: wrap; } .footer .links a { font-family: var(--sans-body); font-size: 14px; color: var(--paper); text-decoration: none; opacity: .8; } .footer .links a:hover { opacity: 1; color: var(--signal-teal); } .footer .legal { font-family: var(--mono-detail); font-size: 11px; letter-spacing: 0.1em; color: var(--paper); opacity: .55; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(250,247,241,.12); text-transform: uppercase; } /* ============================================================ Booking modal ============================================================ */ .modal-scrim { position: fixed; inset: 0; background: rgba(14,46,45,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; } .modal-scrim.is-open { display: flex; } .modal { background: var(--paper); border-radius: var(--r-xl); max-width: 520px; width: 100%; padding: 38px; box-shadow: 0 30px 70px rgba(14,46,45,.35); position: relative; } .modal .close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--mono-detail); font-size: 16px; transition: background var(--dur-fast) var(--ease-out); } .modal .close:hover { background: var(--tint); } .modal h3 { font-family: var(--serif-display); font-weight: 500; font-size: 1.7rem; color: var(--deep-pine); margin: 0 0 8px; letter-spacing: -0.01em; } .modal p { font-size: 14.5px; line-height: 1.55; color: var(--ink); opacity: .85; margin: 0 0 22px; } .kicker-modal { margin-bottom: 14px; } .reply-note { font-family: var(--mono-detail); font-size: 11px; color: var(--ink-56); letter-spacing: 0.06em; } .about-cta { margin-top: 24px; } .success-close { margin-top: 6px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label, .field .field-label { font-family: var(--mono-detail); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deep-pine); } .field .input { font-family: var(--sans-body); font-size: 15px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); } .field .input::placeholder { color: var(--ink-40); } .field .input:focus { outline: none; border-color: var(--signal-teal); box-shadow: 0 0 0 3px rgba(43,161,161,.18); } .field textarea.input { min-height: 80px; resize: vertical; } .modal .actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; } .modal .success { display: none; text-align: center; padding: 18px 0 8px; } .modal.is-success .form { display: none; } .modal.is-success .success { display: block; } .modal .success .icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--tint); display: flex; align-items: center; justify-content: center; color: var(--deep-pine); font-family: var(--serif-display); font-size: 32px; } .path-toggle { display: flex; gap: 8px; } .path-toggle .btn { flex: 1; justify-content: center; font-size: 13.5px; padding: 11px 14px; } /* ============================================================ Reveal-on-scroll Only hidden when JS is available AND user has not asked for reduced motion. This way no-JS visitors and reduced-motion users see content immediately. ============================================================ */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } html.js .reveal.in { opacity: 1; transform: none; } }