/* ============================================================================ Altitude Counselling — main stylesheet ---------------------------------------------------------------------------- Every value comes from docs/design.md. Class names are the contract in docs/section-library.md §2: the built pages and live-edit/sections.js use the same classes, so a section the client inserts looks native. The corporate skin is `body.theme-corporate` — it re-maps tokens, nothing else changes (design.md: never mix purple and navy on one page). ========================================================================== */ /* ---- fonts ------------------------------------------------------------- */ @font-face { font-family: "Matter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Matter-Regular.woff2") format("woff2"), url("/assets/fonts/Matter-Regular.woff") format("woff"); } @font-face { font-family: "Matter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Matter-Medium.woff2") format("woff2"), url("/assets/fonts/Matter-Medium.woff") format("woff"); } @font-face { font-family: "Matter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Matter-SemiBold.woff2") format("woff2"), url("/assets/fonts/Matter-SemiBold.woff") format("woff"); } @font-face { font-family: "Matter"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/Matter-Bold.woff2") format("woff2"), url("/assets/fonts/Matter-Bold.woff") format("woff"); } /* Serif: design.md names Domaine Text 300. We hold only a TRIAL Domaine file, which never ships. Fraunces 300 is the licensed fallback (docs/ia.md §7). When the licensed Domaine Text webfont arrives: add its @font-face as "Domaine Text" and put it first in --font-serif. Nothing else changes. */ @font-face { font-family: "Fraunces"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/fraunces-300.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-weight: 300; font-style: italic; font-display: swap; src: url("/assets/fonts/fraunces-300-italic.woff2") format("woff2"); } /* ---- tokens -------------------------------------------------------------- */ :root { --color-primary: #73246f; --color-primary-hover: #5c1c58; --color-on-primary: #ffffff; --color-surface: #fffcf8; --color-on-surface: #73246f; --color-on-surface-strong: #1d1d1d; --color-on-surface-muted: #525252; --color-surface-card: #ffffff; --color-surface-card-warm: #faf3ed; --color-surface-card-blue: #dbe1ed; --color-surface-card-yellow: #fcef88; --color-surface-card-blush: #f2d6d2; --color-border: #73246f; --color-border-subtle: #d6d6d6; --color-pill: #ebebeb; --color-on-pill: #73246f; --color-accent-blush: #e8c0cd; --color-on-accent: #73246f; --color-ink: #000000; --color-success: #09625e; --color-warning: #f2a04a; --color-error: #c73a15; /* darkened 2026-09-21: #ef562e was 3.48:1 on card white, below AA */ --badge-color: #73246f; --font-sans: "Matter", Arial, sans-serif; --font-serif: "Fraunces", "Domaine Text", Georgia, serif; --r-sm: 5px; --r-md: 10px; --r-lg: 20px; --r-xl: 30px; --r-full: 9999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-15: 60px; --s-20: 80px; --s-24: 96px; --s-30: 120px; --s-38: 150px; --container: 1200px; --gutter: 20px; --column: 380px; --section-gap: clamp(64px, 9vw, 120px); --section-gap-tight: clamp(40px, 5vw, 60px); } /* The audience switch. /corporate/* sets this class on . */ body.theme-corporate { --color-primary: #283248; --color-primary-hover: #1b2233; --color-on-surface: #283248; --color-border: #283248; --color-on-pill: #283248; --color-accent-blush: #adeaaf; --color-on-accent: #283248; --color-success: #09625e; --badge-color: #000000; } /* ---- reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-surface); color: var(--color-on-surface); font-family: var(--font-sans); font-size: 15px; line-height: 1.35; -webkit-font-smoothing: antialiased; } body.nav-open { overflow: hidden; } img, video, svg { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; } ul, ol { padding: 0; } button { font: inherit; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--s-5); top: -100px; z-index: 100; background: var(--color-primary); color: var(--color-on-primary); padding: var(--s-3) var(--s-5); border-radius: var(--r-xl); text-decoration: none; } .skip-link:focus { top: var(--s-5); } /* ---- type styles (design.md typography, 1:1) ------------------------------ */ .duet, .display-sans, .display-serif { font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -2px; font-weight: 500; } .duet-sans { font-family: var(--font-sans); font-weight: 500; } .duet-serif { font-family: var(--font-serif); font-weight: 300; font-style: normal; } .hero-sub .duet { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -1.5px; line-height: 1.02; } .h2-serif { font-family: var(--font-serif); font-weight: 300; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -1px; } .h2-sans { font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -1px; } .h3 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.5px; } .h4 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; } .lead-serif { font-family: var(--font-serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; letter-spacing: -0.2px; } .body-serif { font-family: var(--font-serif); font-weight: 300; font-size: 20px; line-height: 1.4; } .body-lg { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.4; } .body { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.4; } .caption { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.3; } .label { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1; } .text-legal, .text-legal .body, .text-legal .h4 { color: var(--color-on-surface-strong); } .text-center { text-align: center; } .text-muted { color: var(--color-on-surface-muted); } .rich a, [data-cs-rich] a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; } .rich p + p, [data-cs-rich] p + p { margin-top: 1em; } /* Vertical rhythm inside a text block: heading → copy → button */ .h2-serif + .body-lg, .h2-sans + .body-lg, .h2-serif + .grid, .h2-sans + .grid, .h2-serif + .steps, .h2-serif + .logo-row, .h2-serif + .fee-rows { margin-top: var(--s-8); } .h2-serif + .body-lg + .grid, .body-lg + .grid, .body-lg + .logo-row, .body-lg + .fee-rows { margin-top: var(--s-10); } .h3 + .body, .h3 + .body-lg, .h4 + .body, .h4 + .body-lg { margin-top: var(--s-3); } .body + .btn, .body-lg + .btn, .lead-serif + .btn { margin-top: var(--s-6); } .h2-sans + .btn, .h2-serif + .btn { margin-top: var(--s-8); } /* ---- layout -------------------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section-gap); padding-bottom: 0; } .section + .section { padding-top: var(--section-gap); } .section-tight { padding-top: var(--section-gap-tight); } main > .section:last-child, main > [data-cs-sections] > .section:last-child { padding-bottom: var(--section-gap); } .grid { display: grid; gap: var(--gutter); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .measure { max-width: 600px; } .measure-wide { max-width: 760px; } .measure-wide.container, .measure.container { max-width: min(760px, calc(100% - 0px)); } .zig .measure, .zig .measure-wide { display: block; } .zig-right .measure, .zig-right .measure-wide, .zig-right .h2-serif.measure { margin-left: auto; margin-right: 0; } .zig-left .measure, .zig-left .measure-wide { margin-left: 0; margin-right: auto; } .text-center .measure, .text-center .measure-wide, .hero-centered .measure-wide { margin-left: auto; margin-right: auto; } .container.measure-wide, .container.measure { padding-left: var(--gutter); padding-right: var(--gutter); } .container.measure-wide.text-center { text-align: center; } @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } .zig-right .measure, .zig-right .measure-wide { margin-left: 0; } } /* ---- header -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid transparent; transition: border-color .2s; } .site-header.is-scrolled { border-bottom-color: var(--color-border-subtle); } .site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: var(--s-6); } .logo { display: inline-flex; align-items: center; text-decoration: none; } .logo img { height: 34px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--s-2); list-style: none; } .nav-link { display: inline-block; padding: var(--s-2) var(--s-3); font-size: 15px; line-height: 1; color: var(--color-primary); text-decoration: none; border-radius: var(--r-sm); } .nav-link:hover, .nav-link:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; } .nav-link[aria-current="page"] { font-weight: 500; } /* ---- services submenu ------------------------------------------------------ No shadow (design.md: there are none anywhere) — the panel is defined by a 1px primary border and `--r-md`, the radius design.md reserves for exactly this kind of smaller UI. Every colour is a token, so body.theme-corporate re-skins the dropdown to navy without a second rule. */ .nav-item { position: relative; display: flex; align-items: center; } .has-submenu > .nav-link { padding-right: var(--s-1); } .nav-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-left: -2px; appearance: none; background: none; border: 0; border-radius: var(--r-full); color: var(--color-primary); cursor: pointer; } .nav-submenu-toggle svg { width: 10px; height: 6px; transition: transform .15s ease; } .nav-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .nav-submenu-toggle svg { transition: none; } } /* `top: calc(100% + 6px)` left a 6px dead zone between the nav item and the panel: the pointer crossed ground that was neither, mouseleave fired on the

, and the menu closed just as the user reached for it. The panel now starts at the item's edge and carries its own transparent 6px bridge, which IS a descendant, so the pointer never leaves the item. */ .nav-submenu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 264px; margin: 6px 0 0; padding: var(--s-2); list-style: none; display: grid; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-md); } .nav-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 7px; } .nav-submenu[hidden] { display: none; } .nav-submenu a { display: block; padding: 10px 14px; border-radius: var(--r-sm); font-size: 15px; line-height: 1.2; color: var(--color-primary); text-decoration: none; } .nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--color-surface-card-warm); } .nav-submenu a[aria-current="page"] { font-weight: 500; } .nav-toggle { display: none; appearance: none; background: none; border: 1px solid var(--color-border); color: var(--color-primary); border-radius: var(--r-xl); height: 40px; padding: 0 var(--s-4); cursor: pointer; font-size: 14px; font-weight: 500; } .nav-panel { display: none; } @media (max-width: 899px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; align-items: center; gap: var(--s-2); } .nav-panel { display: block; position: fixed; inset: 80px 0 0 0; background: var(--color-surface); z-index: 49; padding: var(--s-8) var(--gutter); overflow-y: auto; } .nav-panel[hidden] { display: none; } .nav-panel ul { list-style: none; display: grid; gap: var(--s-2); } .nav-panel a { display: block; font-family: var(--font-sans); font-size: clamp(28px, 7vw, 40px); font-weight: 500; letter-spacing: -1px; padding: var(--s-3) 0; color: var(--color-primary); text-decoration: none; border-bottom: 1px solid var(--color-border-subtle); } /* The desktop dropdown is a disclosure; on a phone the nine services are just listed under Services — one less thing to tap, and no JS. Declared AFTER `.nav-panel a` and with a class more, because the two rules otherwise have equal specificity and the big top-level size wins on source order. */ .nav-panel .nav-panel-sub { margin: var(--s-1) 0 var(--s-5) var(--s-4); padding-left: var(--s-5); border-left: 1px solid var(--color-border-subtle); gap: 0; } .nav-panel .nav-panel-sub a { font-size: clamp(18px, 4.6vw, 22px); font-weight: 400; letter-spacing: -0.3px; padding: var(--s-2) 0; } .nav-panel .nav-panel-sub li:last-child a { border-bottom: 0; } } /* ---- breadcrumb pills ------------------------------------------------------ */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; margin-bottom: var(--s-6); } .crumbs li { display: inline-flex; } .crumb { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: var(--r-full); font-size: 14px; line-height: 1; text-decoration: none; color: var(--color-on-accent); background: var(--color-accent-blush); } .crumbs li:last-child .crumb { background: transparent; color: var(--color-primary); padding-left: var(--s-1); } .crumb[aria-current="page"] { font-weight: 500; } /* ---- hero ------------------------------------------------------------------ */ .hero { padding-top: clamp(40px, 6vw, 80px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: var(--gutter); } .hero-copy { grid-column: 2; } .hero-copy .duet + .body-lg, .hero-copy .duet + .lead-serif { margin-top: var(--s-6); } .hero-copy .body-lg + .btn, .hero-copy .lead-serif + .btn { margin-top: var(--s-8); } .hero-centered { text-align: center; } .hero-centered .container { max-width: 800px; } .hero-centered .duet + .body-lg { margin-top: var(--s-6); } /* ---- sub-page cover band ---------------------------------------------------- Full-width flat colour, copy on the colour, character small and peeking in from the right edge rather than being the subject. The field is a CSS variable set per page by the build, not the illustration's own background — those rects were stripped 2026-09-21 so the text colour could be CONTRAST-CHECKED against the field at build time (build/build.mjs `inkFor`, which throws rather than ship an illegible headline). Black wins on eight of the nine service fields (5.08–15.32:1) and is already the visual language, since every being's eyes are #000; cream covers the dark purple addiction field at 9.29:1. */ .hero-band-section { margin-bottom: clamp(40px, 6vw, 80px); } .hero-band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: clamp(260px, 25vw, 360px); display: flex; align-items: center; overflow: hidden; background: var(--hero-field); color: var(--hero-ink); } .hero-band-copy { position: relative; z-index: 1; padding-block: clamp(32px, 4vw, 56px); max-width: min(100%, 940px); } .hero-band-copy .duet, .hero-band-copy .body-lg { color: var(--hero-ink); } .hero-band-copy .duet + .body-lg { margin-top: var(--s-5); max-width: 40em; } .hero-band-copy .body-lg + .btn, .hero-band-copy .duet + .btn { margin-top: var(--s-6); } /* The blush breadcrumb pill fights a coral or violet field, so on the band the crumbs are drawn in the band's own ink instead. */ .hero-band-copy .crumb { background: transparent; color: var(--hero-ink); border: 1px solid var(--hero-ink); } .hero-band-copy .crumbs li:last-child .crumb { border-color: transparent; opacity: .75; } .hero-band-copy .btn { border-color: var(--hero-ink); color: var(--hero-ink); background: transparent; } .hero-band-copy .btn:hover, .hero-band-copy .btn:focus-visible { background: var(--hero-ink); color: var(--hero-field); } /* Peeking, not posing: anchored to the bottom edge so the band crops it. */ .hero-band-art { position: absolute; right: clamp(12px, 4vw, 88px); bottom: 0; width: clamp(150px, 19vw, 280px); height: auto; z-index: 0; pointer-events: none; } @media (max-width: 900px) { .hero-band { min-height: clamp(220px, 44vw, 300px); } .hero-band-copy { max-width: 72%; } .hero-band-art { right: 0; width: clamp(110px, 26vw, 170px); } } @media (max-width: 560px) { .hero-band-copy { max-width: 100%; padding-bottom: clamp(88px, 30vw, 130px); } .hero-band-art { right: 8px; width: clamp(104px, 30vw, 150px); } } .video-band { width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(40px, 6vw, 80px); background: var(--color-surface-card-blush); } .video-band { position: relative; } .video-band video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; object-fit: cover; } /* WCAG 2.2.2 — anything that moves for more than five seconds needs a way to stop it. Icon-only on purpose: a text label here would be an untagged text node the Live Edit auditor would rightly fail, and this is a control, not content. */ .video-toggle { position: absolute; right: var(--s-4); bottom: var(--s-4); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--color-primary); border-radius: var(--r-full); background: var(--color-surface-card); color: var(--color-primary); cursor: pointer; } .video-toggle:hover { background: var(--color-primary); color: var(--color-surface-card); } .video-toggle svg { width: 16px; height: 16px; fill: currentColor; pointer-events: none; } .video-toggle .icon-play { display: none; } .video-toggle[aria-pressed="false"] .icon-play { display: block; } .video-toggle[aria-pressed="false"] .icon-pause { display: none; } @media (max-width: 720px) { .hero-grid { grid-template-columns: 1fr; } .hero-copy { grid-column: 1; } } /* ---- buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 14px 28px; border-radius: var(--r-xl); border: 1px solid var(--color-primary); font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-secondary { background: var(--color-surface-card); color: var(--color-primary); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--color-primary); color: var(--color-on-primary); } .btn-on-dark { background: var(--color-on-primary); color: var(--color-primary); border-color: var(--color-on-primary); } .btn-on-dark:hover, .btn-on-dark:focus-visible { background: transparent; color: var(--color-on-primary); } .btn[disabled] { background: var(--color-pill); color: var(--color-on-surface-muted); border-color: var(--color-pill); cursor: default; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .band :focus-visible, .site-footer :focus-visible { outline-color: var(--color-on-primary); } /* ---- pills ------------------------------------------------------------------- */ .pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); } .pill-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: var(--r-full); background: var(--color-pill); color: var(--color-on-pill); font-size: 12px; line-height: 1; } /* ---- cards -------------------------------------------------------------------- */ .card-service { display: block; color: var(--color-on-surface); text-decoration: none; border-radius: var(--r-lg); } .card-service img { width: 100%; aspect-ratio: 360 / 222; object-fit: cover; border-radius: var(--r-lg); background: var(--color-surface-card-warm); } .card-service .h4 { margin-top: var(--s-4); } .card-service .body { margin-top: var(--s-2); } .card-service:hover .h4, .card-service:focus-visible .h4 { text-decoration: underline; text-underline-offset: 0.15em; } .card-benefit { position: relative; background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--s-8); color: var(--color-on-surface); display: flex; flex-direction: column; gap: var(--s-3); } .card-benefit .h4 + .body { margin-top: 0; } .card-benefit .dot, .card-benefit .number-badge { margin-bottom: var(--s-2); } .dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .number-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--badge-color); color: var(--badge-color); font-family: var(--font-serif); font-weight: 300; font-size: 22px; line-height: 1; flex: none; } .card-package { position: relative; overflow: hidden; background: var(--color-surface-card-warm); border-radius: var(--r-lg); padding: var(--s-8); min-height: 340px; display: flex; flex-direction: column; align-items: flex-start; color: var(--color-on-surface); } .card-package .h3 { position: relative; z-index: 1; max-width: 75%; } .card-package .body { position: relative; z-index: 1; margin-top: var(--s-3); max-width: 70%; } /* `margin-top: auto` pushes the button to the bottom of the card; it used to also zero the top padding, which left 0 above the label and 14px below and sat the text visibly high in the pill. Padding stays symmetric. */ .card-package .btn { position: relative; z-index: 1; margin-top: auto; } /* design.md specifies button-secondary as white fill, and that is right on the cream page and on white benefit cards. On a TINTED package card the white fill is the only white object in the card and reads as a sticker stuck on top, so here the button is transparent with the same 1px primary border and inverts to primary fill on hover exactly as elsewhere. Scoped to .card-package on purpose — the documented white secondary is untouched everywhere else. Recorded as a deliberate deviation in docs/design.md. */ .card-package .btn-secondary { background: transparent; } .card-package .btn-secondary:hover, .card-package .btn-secondary:focus-visible { background: var(--color-primary); color: var(--color-on-primary); } .card-package .body + .btn { margin-top: var(--s-6); } .card-package .pill-row { position: relative; z-index: 1; } /* The illustrations are transparent (their opaque artboard rects were stripped 2026-09-21), so the card tint shows through and can never drift from the SVG's own background the way it had on the group and workshop cards. Sized by a BOX plus object-fit rather than by width alone: the tall artboards are 480x600 and the wide ones 540x308.5, so a shared `width: 42%` rendered one at 200px tall and the other at 87px. The box makes both read the same size. */ .card-illus { position: absolute; right: -3%; bottom: -5%; width: 50%; height: 68%; object-fit: contain; object-position: right bottom; z-index: 0; pointer-events: none; } .card-package-wide { min-height: 320px; } .card-package-wide .card-illus { right: -2%; bottom: -6%; width: 46%; height: 86%; } .tint-warm { background: var(--color-surface-card-warm); } .tint-blue { background: var(--color-surface-card-blue); } .tint-yellow { background: var(--color-surface-card-yellow); } .tint-blush { background: var(--color-surface-card-blush); } @media (max-width: 720px) { .card-package .h3, .card-package .body { max-width: 100%; } .card-illus { width: 40%; height: 46%; } } .card-teaser { background: var(--color-surface-card-blue); border-radius: var(--r-lg); padding: clamp(32px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; } .teaser-illus-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .teaser-illus { width: 100%; height: auto; border-radius: var(--r-lg); } .card-teaser .h2-sans + .body-lg { margin-top: var(--s-5); } @media (max-width: 720px) { .card-teaser, .teaser-illus-left { grid-template-columns: 1fr; } } /* ---- quote / people ----------------------------------------------------------- */ .quote-block { padding-top: var(--s-10); padding-bottom: var(--s-10); } .quote-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-10); align-items: start; } .quote-stack { display: grid; gap: var(--s-8); justify-items: center; } .quote-person { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; } .quote-stack .quote-person { align-items: center; text-align: center; } .quote-portrait { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } .quote-person figcaption { display: flex; flex-direction: column; gap: var(--s-1); } .quote-block blockquote { font-family: var(--font-serif); font-weight: 300; font-size: clamp(20px, 2vw, 24px); line-height: 1.4; } .quote-block blockquote p + p { margin-top: 1em; } .quote-block blockquote p:first-child::before { content: "\201C"; } .quote-block blockquote p:last-child::after { content: "\201D"; } @media (max-width: 720px) { .quote-row { grid-template-columns: 1fr; gap: var(--s-6); } } .profile-row { display: grid; grid-template-columns: minmax(0, var(--column)) minmax(0, 1fr); gap: var(--s-10); align-items: start; } .profile-row .h2-serif + .h3 { margin-top: var(--s-8); } .profile-row .h3 + .body-lg { margin-top: var(--s-3); } .profile-stack { display: grid; gap: var(--s-4); max-width: var(--column); } .profile-photo { width: 100%; height: auto; border-radius: var(--r-lg); background: var(--color-surface-card-warm); } @media (max-width: 720px) { .profile-row { grid-template-columns: 1fr; } } /* ---- content blocks ---------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10); align-items: center; } .split-illus { width: 100%; height: auto; border-radius: var(--r-lg); } .split .h2-sans + .body-lg { margin-top: var(--s-5); } .split .body-lg + .body-lg { margin-top: var(--s-4); } .split ul { list-style: disc; padding-left: 1.2em; margin-top: var(--s-4); display: grid; gap: var(--s-2); } @media (max-width: 720px) { .split { grid-template-columns: 1fr; } .split-illus-right .split-illus { order: -1; } } .steps { list-style: none; counter-reset: step; } .step { display: flex; flex-direction: column; gap: var(--s-3); } .step .h4 { margin-top: var(--s-2); } .step .h4 + .body { margin-top: 0; } .steps-list { display: grid; gap: var(--s-8); } .step-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-5); align-items: start; } .step-row .h4 { margin-top: var(--s-2); } .packages-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); list-style: none; } .package-link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--color-border); color: var(--color-primary); text-decoration: none; } .package-link:hover span, .package-link:focus-visible span { text-decoration: underline; text-underline-offset: 0.15em; } .package-link img { width: 32px; height: 32px; flex: none; } @media (max-width: 720px) { .packages-strip { grid-template-columns: 1fr; } } .spec-list { list-style: none; display: grid; gap: var(--s-3); } .spec-list li { position: relative; padding-left: var(--s-6); } .spec-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } /* ---- proof / contact ------------------------------------------------------------ */ .logo-row { display: flex; flex-wrap: wrap; gap: var(--s-10); align-items: center; } .logo-row a { display: inline-flex; border-radius: var(--r-md); } .client-logo { height: 96px; width: auto; border-radius: var(--r-md); filter: grayscale(1); transition: filter .2s; } .logo-row a:hover .client-logo, .logo-row a:focus-visible .client-logo, .client-card:hover .client-logo { filter: none; } .client-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; text-decoration: none; color: var(--color-on-surface); } .contact-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); } .contact-line { text-decoration: none; word-break: break-word; } .contact-line:hover, .contact-line:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; } .contact-stack .h3 { margin-top: var(--s-8); } .contact-stack .h3 + .body-lg { margin-top: 0; } .contact-stack .body-lg + .btn { margin-top: var(--s-2); } .fee-rows { display: block; } .fee-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--color-border-subtle); } .fee-row dt { flex: 1; } .fee-row dd { margin: 0; } .fee-price { font-variant-numeric: tabular-nums; white-space: nowrap; } .fee-rows + .caption { margin-top: var(--s-4); } .card-benefit .caption + .fee-price { margin-top: 0; } /* ---- form --------------------------------------------------------------------- */ .enquiry-form { display: grid; gap: var(--s-5); } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } .field { display: grid; gap: var(--s-2); } .field label { font-size: 18px; line-height: 1.3; color: var(--color-primary); } .field .req { color: var(--color-on-surface-muted); font-size: 14px; } .field input, .field textarea { width: 100%; min-height: 56px; padding: 14px 16px; background: var(--color-surface-card); color: var(--color-on-surface-strong); border: 1px solid var(--color-border); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 18px; line-height: 1.3; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--color-border); } .field.is-error input, .field.is-error textarea { border-color: var(--color-error); } .field .hint { font-size: 14px; color: var(--color-on-surface-muted); } .hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .form-status { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid; font-size: 16px; line-height: 1.4; } .form-status.is-ok { border-color: var(--color-success); color: var(--color-success); background: var(--color-surface-card); } .form-status.is-error { border-color: var(--color-error); color: var(--color-error); background: var(--color-surface-card); } .form-status a { color: inherit; } .form-actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .form-actions .caption { color: var(--color-on-surface-muted); } @media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } } /* ---- band + footer --------------------------------------------------------------- */ .band { width: 100%; } .band-primary { background: var(--color-primary); color: var(--color-on-primary); padding-top: var(--s-20); padding-bottom: var(--s-20); } .band-primary .h2-serif, .band-primary .h2-sans { color: var(--color-on-primary); } .split-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; } .band-primary .h2-serif + .btn { margin-top: var(--s-8); } .split-cta .h2-serif + .btn { margin-top: 0; } .site-footer { background: var(--color-primary); color: var(--color-on-primary); margin-top: var(--section-gap); padding: var(--s-20) 0 var(--s-10); } .footer-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; padding-bottom: var(--s-15); border-bottom: 1px solid rgba(255, 255, 255, .25); } .footer-cta .h2-serif { max-width: 720px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-10); padding-top: var(--s-15); align-items: start; } .footer-nav { list-style: none; display: grid; gap: var(--s-3); } .footer-nav a, .footer-contact a { color: var(--color-on-primary); text-decoration: none; } .footer-nav a:hover, .footer-contact a:hover, .footer-nav a:focus-visible, .footer-contact a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; } .footer-contact { display: grid; gap: var(--s-3); } .footer-contact address { font-style: normal; } .footer-mark img { width: 88px; height: auto; } .footer-legal { display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-15); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .85); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } .footer-mark { order: -1; } } /* ---- 404 ---------------------------------------------------------------------- */ .not-found { min-height: 50vh; display: grid; align-content: center; } /* ---- reveal (JS-gated; sections are visible without it) --------------------------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .3s ease-out, transform .3s ease-out; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* The hero video is never auto-started under reduced motion — assets/js/main.js refuses to attach its s at all, so the poster is what a visitor sees until they press play themselves. That also keeps 630 KB off the request. */ /* ---- print ----------------------------------------------------------------------- */ @media print { .site-header, .nav-toggle, .site-footer .footer-cta, .video-band, .cs-ui { display: none !important; } body { color: #000; } }