/* Site-wide base styles - loaded on every page. The Costa Freediving v2 look (2026-09-10): the "One Floor Down" register. Light display weights, wide mono small-caps kickers, hairline rules, square corners, oversized serene photography, one idea per screen. Our own tokens; nothing here mirrors another brand. Theme: light + dark. Semantic tokens flip under :root.dark (never a prefers-color-scheme query in component CSS). The no-FOUC script in the layout head adds .light/.dark to ; scripts/theme.js wires the toggle. Type: Noto Sans (variable weight) + Noto Sans Mono, self-hosted. --display is the ONE token to swap when trialling a display face on /brand/. */ /* Noto Sans - self-hosted (variable weight 100-900) */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-sans-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans Mono'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-sans-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ DESIGN TOKENS ============================================================ */ /* .light-scope / .dark-scope let one element render in the other theme (the brand page's side-by-side panels); the site itself only ever uses :root. */ :root, .light-scope { /* Palette (raw). Name the color, not the job; the semantic set below does the job. */ --paper: #f7f5f0; /* warm off-white, the page */ --paper-2: #fdfcfa; /* cards, inputs */ --ink: #0d1720; /* the dark brand ink */ --ink-2: #13212c; /* dark-mode cards */ --slate: #56636f; /* secondary text on paper */ --mist: #a9b1b8; /* secondary text on ink */ --bone: #ece9e2; /* text on ink */ --sea: #1f6f77; /* the accent: deep sea teal */ --sea-deep: #185a61; /* accent hover on paper */ --sea-light: #5fb3b8; /* the accent on ink */ --sea-bright: #83cdd1; /* accent hover on ink */ --coral: #d98a4a; /* the rare second accent (the snorkel) */ --hairline-light: #dcd8cf; --hairline-dark: #2a3844; --red: #b9433f; --white: #ffffff; --black: #000000; /* Typography */ --sans: 'Noto Sans', system-ui, -apple-system, sans-serif; --mono: 'Noto Sans Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; --display: var(--sans); /* swap this one token to trial a display face */ --h1: clamp(2.6rem, 6.5vw, 5rem); --h2: clamp(1.9rem, 4vw, 2.8rem); --h3: 1.35rem; --medium: 1.2rem; --body: 1rem; --small: 0.9375rem; --tiny: 0.8rem; --kicker: 0.68rem; --light: 300; --regular: 400; --bold: 500; --tight: 1.05; --compact: 1.3; --relaxed: 1.6; --track: 0.32em; /* kicker letter-spacing */ --track-tight: 0.12em; /* nav + button letter-spacing */ /* Spacing / layout */ --xs: 0.5rem; --sm: 1rem; --md: 1.5rem; --lg: 2rem; --xl: 3rem; --2xl: 4rem; --section: clamp(4rem, 10vw, 8rem); /* vertical rhythm between sections */ --page-inset: var(--md); --narrow: 44rem; --page: 60rem; --wide: 1200px; --full: 1400px; --site-max: 2400px; /* the whole page stops growing here; wider monitors get a backdrop (a media query cannot read a var, so the html rule below repeats this number) */ --header-h: 4rem; --radius: 0; /* the register is square */ --pill: 999px; /* the media players keep their pills */ --fast: 0.2s; --normal: 0.3s; --slow: 0.9s; --vt: 0.6s; /* a page transition (styles/transitions.css) */ --vt-ease: ease; /* Semantic - LIGHT (default) */ --bg: var(--paper); --bg-2: var(--paper-2); --text: var(--ink); --text-2: var(--slate); --accent: var(--sea); --accent-hover: var(--sea-deep); --accent-2: var(--coral); --on-accent: var(--white); --border: var(--hairline-light); --hair: 1px solid var(--border); --backdrop: var(--white); --site-shadow: 0 0 80px rgba(13, 23, 32, 0.14); --shadow: 0 2px 8px rgba(13, 23, 32, 0.08), 0 1px 2px rgba(13, 23, 32, 0.04); --shadow-strong: 0 2px 12px rgba(13, 23, 32, 0.35); --shadow-down: 0 18px 24px -14px rgba(13, 23, 32, 0.35); /* a shadow on the bottom edge only (the open mobile menu) */ --glass-bg: rgba(255, 255, 255, 0.38); --glass-blur: 4px; --buffer: rgba(86, 99, 111, 0.35); --scrim: linear-gradient(to top, rgba(13, 23, 32, 0.72) 0%, rgba(13, 23, 32, 0.25) 45%, rgba(13, 23, 32, 0) 75%); --dim: rgba(13, 23, 32, 0.6); /* the page behind an open dialog, in both themes */ color-scheme: light; } /* Dark mode: the no-FOUC script in the layout head puts .light/.dark on (persisted choice from the header toggle, else the OS preference). The same tokens on .dark-scope let one element render dark inside a light page (the brand page's side-by-side swatches). */ :root.dark, .dark-scope { --bg: var(--ink); --bg-2: var(--ink-2); --text: var(--bone); --text-2: var(--mist); --accent: var(--sea-light); --accent-hover: var(--sea-bright); --on-accent: var(--ink); --border: var(--hairline-dark); --backdrop: #070c11; --site-shadow: 0 0 80px rgba(0, 0, 0, 0.6); --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05); --shadow-strong: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15); --shadow-down: 0 18px 24px -14px rgba(0, 0, 0, 0.6); --glass-bg: rgba(19, 33, 44, 0.8); /* ink-2 glass: a card on the page, a dark bar over video (the players) */ --buffer: rgba(169, 177, 184, 0.35); color-scheme: dark; } /* ============================================================ RESET + BASE ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-width: 320px; } html { scroll-behavior: smooth; } /* The backdrop is only ever visible past --site-max, so only there does it go on . Narrower than that it would still be the document's CANVAS color even though nothing shows it, and a canvas color wins two things we want: the mobile browser chrome (a phone browser paints its bar from the canvas, not from our theme-color meta, so a white canvas gave a white address bar slightly off our warm paper) and the overscroll flash. Left off, 's --bg propagates to the canvas and both match the page exactly. */ @media (min-width: 2400px) { html { background: var(--backdrop); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { max-width: var(--site-max); margin: 0 auto; box-shadow: var(--site-shadow); font-family: var(--sans); font-weight: var(--light); font-size: var(--body); line-height: var(--relaxed); background: var(--bg); color: var(--text); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; } img, picture, svg, video { display: block; max-width: 100%; } /* responsiveImage() sets width/height for layout stability; height: auto so the attribute never overrides a CSS aspect-ratio (the boxes size themselves) */ picture img { height: auto; } svg { flex-shrink: 0; } [hidden] { display: none !important; } /* Links signed-in people never see (Sign In), links visitors never see (Travel Advisors) and links for one role (Vacation Builder, team): the layout's head script puts .signed-in and data-roles on before first paint. One rule per role the nav uses. */ :root.signed-in .signed-out-only { display: none; } :root:not(.signed-in) .signed-in-only { display: none; } :root:not([data-roles~="team"]) .role-team-only { display: none; } ::selection { background: var(--accent); color: var(--on-accent); } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { font-family: var(--display); font-weight: var(--light); line-height: var(--tight); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: normal; } h1 { font-size: var(--h1); margin: 0.9rem 0 1.1rem; } h2 { font-size: var(--h2); line-height: 1.15; margin: 0.7rem 0 1rem; } h3 { font-size: var(--h3); font-weight: var(--regular); line-height: var(--compact); margin: 0 0 0.5rem; } h4 { font-size: var(--body); font-weight: var(--bold); line-height: var(--compact); margin: 0 0 0.4rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; font-weight: var(--regular); transition: color var(--fast); } a:hover { text-decoration: underline; text-underline-offset: 0.2em; } strong, b { font-weight: var(--bold); } small { font-size: var(--small); } hr { border: none; border-top: var(--hair); margin: var(--lg) 0; } ul, ol { padding-left: 1.2em; } li { margin: 0 0 0.35em; } blockquote { margin: 0; } code, pre, kbd { font-family: var(--mono); font-size: 0.9em; } pre { padding: var(--sm); border: var(--hair); background: var(--bg-2); overflow-x: auto; line-height: 1.5; } table { width: 100%; border-collapse: collapse; font-weight: var(--light); } th, td { text-align: left; padding: 0.75rem 0; border-bottom: var(--hair); vertical-align: top; } th { font-family: var(--mono); font-size: var(--kicker); font-weight: var(--bold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); } /* The wide small-caps mono kicker above a heading */ .kicker { font-family: var(--mono); font-size: var(--kicker); font-weight: var(--bold); letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); margin: 0 0 0.4rem; } .kicker:has(+ h1), .kicker.accent { color: var(--accent); } /* The light lead paragraph under a heading */ .lede { font-size: var(--medium); font-weight: var(--light); line-height: var(--relaxed); color: var(--text-2); } /* One accent-colored line, the thing to remember */ .accent-line { margin-top: var(--lg); font-weight: var(--light); font-size: var(--medium); color: var(--accent); } /* A quote that opens a paragraph () hangs its opening mark in the margin, so the words stay flush with the column. Out of flow, shifted left by its own width: works everywhere (hanging-punctuation is Safari only) */ q.hang::before { position: absolute; transform: translateX(-100%); } /* A quiet aside */ .note { font-size: var(--small); color: var(--text-2); line-height: var(--relaxed); margin-top: var(--md); } /* A hairline-underlined text link */ .text-link { display: inline-block; margin-top: var(--md); font-weight: var(--regular); color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 0.15rem; } .text-link:hover { text-decoration: none; color: var(--accent); } /* ============================================================ LAYOUT HELPERS ============================================================ */ .wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-left: var(--page-inset); padding-right: var(--page-inset); } .wrap.narrow, .narrow { max-width: var(--narrow); } .wrap.page { max-width: var(--page); } section { padding: var(--section) 0; scroll-margin-top: var(--header-h); } /* Two columns that stack on phones (text + a 4:5 photograph) */ .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; } .two figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } @media (max-width: 820px) { .two { grid-template-columns: 1fr; } .two figure img { aspect-ratio: 4 / 3; } } /* A letterboxed photograph across the column */ .wide-media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } @media (max-width: 700px) { .wide-media img { aspect-ratio: 4 / 3; } } /* One thing at a time: sections arrive as the reader does (scripts/components/reveal.js adds .in; reduced motion shows everything) */ .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--slow) ease, transform var(--slow) ease; } .reveal.in { opacity: 1; transform: none; } .reveal h2 { transition: opacity 0.7s ease 0.35s; } .reveal:not(.in) h2 { opacity: 0; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .reveal:not(.in) h2 { opacity: 1; } } /* ============================================================ BUTTONS - .button primary|secondary|ghost x sm|md ============================================================ */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.4rem; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-size: 0.8rem; font-weight: var(--regular); letter-spacing: var(--track-tight); text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; transition: background var(--fast), border-color var(--fast), color var(--fast), opacity var(--fast); } .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); text-decoration: none; } .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .button.secondary { background: transparent; border-color: var(--text); color: var(--text); } .button.secondary:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .button.ghost { background: transparent; border-color: transparent; color: var(--text); padding-left: 0.6rem; padding-right: 0.6rem; } .button.ghost:hover { color: var(--accent); background: transparent; border-color: transparent; } .button.coral { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); } .button.coral:hover { filter: brightness(1.06); } .button.sm { padding: 0.55rem 0.95rem; font-size: 0.66rem; } .button.md { padding: 0.85rem 1.4rem; } /* CTAs grow with the screen (Costa, 2026-09-10): laptops from 900px, wide desktops from 1600px */ @media (min-width: 900px) { .button.md { font-size: 0.95rem; padding: 1rem 1.7rem; } } @media (min-width: 1600px) { .button.md { font-size: 1.15rem; padding: 1.15rem 2rem; } } .button[disabled], .button.disabled { opacity: 0.45; pointer-events: none; } .button svg { width: 1em; height: 1em; } /* The Call / Text / Email row (components/contact-row.js) */ .concierge { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--lg); } /* ============================================================ FORMS - .field wraps a label + control ============================================================ */ .field { display: block; margin: 0 0 var(--md); } fieldset { border: none; padding: 0; margin: 0; min-width: 0; } .field-label, legend { display: block; font-family: var(--mono); font-size: 0.65rem; font-weight: var(--bold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); margin-bottom: 0.45rem; } .field-hint { display: block; font-size: var(--small); color: var(--text-2); margin-top: 0.35rem; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="number"], input[type="search"], input[type="password"], textarea, select { width: 100%; padding: 0.85rem 1rem; border: var(--hair); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: inherit; font-weight: var(--light); line-height: 1.4; transition: border-color var(--fast), box-shadow var(--fast); } textarea { min-height: 7rem; resize: vertical; } select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356636f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1rem; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } input::placeholder, textarea::placeholder { color: var(--text-2); opacity: 0.7; } /* A locked field (the sign-in email on /account/ and the application) looks it */ input[readonly] { color: var(--text-2); cursor: default; } input[readonly]:focus-visible { outline: none; } .choice { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.6rem; font-weight: var(--light); cursor: pointer; } .choice input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; } .form-message { padding: 0.85rem 1rem; border: var(--hair); border-left: 2px solid var(--accent); background: var(--bg-2); font-size: var(--small); margin: 0 0 var(--md); } .form-message.error { border-left-color: var(--red); } .form-message.success { border-left-color: var(--accent); } /* The honeypot (never shown, never focused) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ SMALL PIECES ============================================================ */ .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border: var(--hair); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); } .chip.accent { color: var(--accent); border-color: var(--accent); } .chip.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Card images zoom gently on hover (wrap the img in .zoom; any card type) */ .zoom { display: block; overflow: hidden; } .zoom img { transition: transform 1.2s ease; will-change: transform; } a:hover .zoom img, .zoom:hover img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .zoom img { transition: none; } a:hover .zoom img, .zoom:hover img { transform: none; } } /* .two.split: heading | image | copy as three pieces. Desktop keeps two columns (the heading and copy stacked beside the image, vertically centered); phones stack heading, then image, then copy. Add .figure-left to put the image first. */ .two.split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: '. figure' 'head figure' 'byline figure' 'copy figure' '. figure'; align-items: stretch; row-gap: 0; } .two.split.figure-left { grid-template-areas: 'figure .' 'figure head' 'figure byline' 'figure copy' 'figure .'; } .two.split .two-byline { grid-area: byline; } .two.split .two-byline { display: none; } /* phones only (see the media query) */ .byline-desktop .byline { margin: var(--lg) 0 0; } .two.split .two-head { grid-area: head; align-self: end; } .two.split .two-copy { grid-area: copy; align-self: start; } .two.split figure { grid-area: figure; align-self: center; } /* Who is in the photograph: a centered credit line under it (the advisor page's Costa and Martin, the courses page's Costa). The title in : at 0.6rem mono caps the site's 500 does not read, so heavier and in the text color. */ .two.split figcaption { display: block; margin-top: 0.6rem; text-align: center; } .two.split figcaption strong { font-weight: 700; color: var(--text); } .two.split .two-head h2 { margin-bottom: 0.6rem; } @media (max-width: 820px) { .two.split, .two.split.figure-left { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: 'head' 'figure' 'byline' 'copy'; row-gap: var(--md); } .two.split .two-head h2 { margin-bottom: 0; } .two.split .two-byline .byline { margin: 0; } .two.split .two-byline { display: block; } .byline-desktop { display: none; } } /* Keeps a word and its icon on one line */ .nowrap { white-space: nowrap; } /* A native : square, hairline, the page dimmed behind it. It carries one decision: the quiet action on the left, the action on the right. margin: auto centers it (the reset's margin: 0 undoes the browser's own). */ .dialog { margin: auto; border: var(--hair); background: var(--bg); color: var(--text); padding: var(--lg); max-width: 28rem; width: calc(100% - 2rem); } .dialog::backdrop { background: var(--dim); } .dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: var(--md); } /* ============================================================ SHARED PIECES FROM THE HOMEPAGE (also shown on /brand/) ============================================================ */ /* The one-line statement that opens a session page */ .statement { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: var(--light); line-height: 1.3; margin-bottom: var(--lg); } /* Words beside a form: the enquiry on the contact page, the reservation on a session page */ .enquire-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } @media (max-width: 820px) { .enquire-grid { grid-template-columns: 1fr; } } /* A photo credit or source line: tiny mono caps in the secondary color */ .credit { font-family: var(--mono); font-size: 0.6rem; font-weight: var(--regular); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); } /* The trio: three columns of 4:3 photo + heading + accent sub-line + copy, one column on phones */ .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: var(--xl); } .trio-item figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--md); } .trio-item h3 { margin-bottom: 0.2rem; } .trio-sub { font-weight: var(--bold); color: var(--accent); margin: 0 0 0.7rem; } .trio-item p { color: var(--text-2); } .trio-item .credit { display: block; margin-top: 0.6rem; } @media (max-width: 820px) { .trio { grid-template-columns: 1fr; gap: var(--xl); } } /* Martin, by request: one bold line with the award mark in coral (the rare warm moment). No box, no edges (Costa). */ .martin-note { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--md); color: var(--text); font-weight: var(--bold); } .martin-note svg { color: var(--accent-2); } /* The FII link (components/fii-link.js) in the byline's shape: the official mark (blue on light, white on dark) beside two lines */ .fii-link { display: flex; align-items: center; gap: 0.9rem; margin-top: var(--lg); color: var(--text); font-weight: var(--light); } .fii-link:hover { text-decoration: none; } .fii-link img { width: 2.75rem; height: 2.75rem; flex-shrink: 0; } .fii-link .fii-dark { display: none; } :root.dark .fii-link .fii-light { display: none; } :root.dark .fii-link .fii-dark { display: block; } .fii-text { display: flex; flex-direction: column; gap: 0.15rem; line-height: var(--compact); } .fii-text strong { font-weight: var(--bold); } .fii-text span { font-size: var(--small); color: var(--accent); } .fii-text span svg { display: inline; vertical-align: -0.1em; margin-left: 0.2em; } .fii-link:hover .fii-text span { text-decoration: underline; text-underline-offset: 0.2em; } /* Pull quotes three across, centered; stacked with hairlines between on phones */ .quotes-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: var(--lg); } .quotes-row .pull { padding: 0; border-bottom: none; font-size: clamp(1.15rem, 1.8vw, 1.4rem); text-align: center; } @media (max-width: 820px) { .quotes-row { grid-template-columns: 1fr; gap: 0; } .quotes-row .pull { padding: var(--lg) 0; border-bottom: var(--hair); } .quotes-row .pull:last-of-type { border-bottom: none; } } /* The closing block: centered, the price line and the phone line as a mono pair, then the concierge row leading with Text */ .foot-cta { text-align: center; } .foot-cta .lede { text-wrap: balance; } .foot-cta .concierge { justify-content: center; } .foot-cta .concierge a[href^="mailto:"] { order: -1; } .contact-line { font-family: var(--mono); font-size: var(--small); font-weight: var(--bold); letter-spacing: 0.06em; color: var(--text-2); margin-top: var(--md); } /* also under the advisor application */ .foot-cta .contact-line + .contact-line { margin-top: 0.4rem; } /* the price line and the phone line read as a pair */ .from-line { color: var(--accent); text-wrap: balance; }