/* ==========================================================================
Gonzalez Tax Service & Insurance
styles.css — one stylesheet, token-driven, light + dark themes
--------------------------------------------------------------------------
BRAND COLORS (sampled directly from the redone logo artwork)
Blue #0059B8 the arc, and the bar in "Tax Service & | Insurance"
Blue, lit #1F78D6 the sunlit face of the pyramid
Ink #303030 the "González" wordmark
The redone logo has no green in it, and no navy either. Blue is the only
colour in the mark — which means blue cannot be both the page's furniture
and its call to action, because a blue button sitting on a blue band is a
button nobody sees. So the two ingredients the artwork actually has do two
separate jobs:
BLUE marks everything you can act on — buttons, links, the underline
under the current page, the accent line in the hero.
INK carries structure that must not compete — headings, the secondary
button, the quiet chips.
Nothing is invented. Both families are sampled from the artwork, and the
deep blues are darker tints of the arc's own hue. Where the raw blue would
fail contrast (a pale chip on a dark band, a white button label), a
measured step from the same ramp is used instead. Every foreground /
background pair in this file has been checked against WCAG AA in both
themes, measured on the rendered pixels in a real browser rather than
judged by eye — including the text that sits over the photographs.
THEMING
:root -> light theme values
@media (prefers-color-scheme: dark) :root:not([data-theme="light"])
-> dark values when the OS asks for dark
:root[data-theme="dark"] -> dark values when the visitor picks dark
Only the token block changes between themes. No component rule below
section 02 hard-codes a color.
--------------------------------------------------------------------------
TABLE OF CONTENTS
01. Brand constants
02. Theme tokens (light / dark)
03. Scale tokens (type, space, radius, shadow, motion)
04. Reset & base
05. Typography
06. Layout utilities
07. Buttons
08. Header, navigation, language + theme switches
09. Hero
10. Cards & service components
11. Sections
12. Forms
13. Footer
14. Mobile sticky CTA
15. Accordion / FAQ
16. Misc (placeholders, callouts, tables, map)
17. Motion & print
========================================================================== */
/* 01. BRAND CONSTANTS ====================================================== */
:root {
/* Straight from the logo — never altered. */
--brand-blue: #0059B8; /* the arc */
--brand-blue-lit: #1F78D6; /* the lit face of the pyramid */
--brand-ink: #303030; /* the wordmark */
/* Blue ramp — one hue (211°), held from the arc's own colour all the way
down to the near-black used behind photographs. The deep end is page
furniture; the bright end is action. Both ends are the logo. */
--blue-950: #00152C; /* behind the hero photograph */
--blue-900: #001D3C; /* footer, utility bar */
--blue-850: #00254C; /* the favicon tile */
--blue-800: #002D5D;
--blue-700: #00356D; /* the dark bands in the light theme */
--blue-600: #00458E; /* pressed / hovered primary button */
--blue-500: #0059B8; /* BRAND — buttons and links on white */
--blue-400: #1F78D6; /* BRAND — the pyramid, decorative glows */
--blue-300: #3D9BFF; /* the primary button in the dark theme */
--blue-200: #70B6FF; /* chips on a dark band, links on black */
--blue-100: #A9D4FF; /* accent words over a photograph */
--blue-050: #D6E7FA;
--blue-025: #EFF5FD; /* tinted fills in the light theme */
/* Ink ramp — the wordmark's charcoal. This is what stops the page turning
into one flat sheet of blue: headings and the secondary button are
neutral, so the blue is left to mean "this is the thing to click". */
--ink-900: #1B1E24;
--ink-800: #2A2E35; /* headings in the light theme */
--ink-700: #303030; /* BRAND — the wordmark */
--ink-500: #4A515B;
--ink-300: #A8B0BB;
--ink-100: #E2E6EB;
--ink-050: #F2F4F7;
}
/* 02. THEME TOKENS ========================================================= */
:root {
color-scheme: light;
/* Surfaces */
--color-bg: #F5F8FC;
--color-bg-alt: #EAF0F8;
--color-surface: #FFFFFF;
--color-surface-sunk: #F7FAFD;
/* Text */
--color-text: #10192B;
--color-text-soft: #33415A;
--color-muted: #54637E;
/* Headings are the wordmark's charcoal, not blue. With blue headings the
only thing separating a button from a sub-head was its background, and
the eye stopped finding the buttons. */
--color-heading: var(--ink-800);
/* Lines */
--color-line: #CBD9EB;
--color-line-strong: #B3C6E0;
/* Actions — the brand blue at full strength. 6.7:1 against white with a
white label, 6.1:1 against the page grey, so it needs no darkening. */
--color-cta: var(--blue-500);
--color-cta-hover: var(--blue-600);
--color-cta-text: #FFFFFF;
--color-link: var(--blue-500);
--color-link-hover:var(--blue-600);
/* Secondary (outline) button — ink, so it reads as the quieter of the two
rather than as a second, slightly different blue. */
--color-btn2-border: var(--ink-700);
--color-btn2-text: var(--ink-700);
--color-btn2-fill: var(--ink-700);
--color-btn2-fill-text: #FFFFFF;
/* Dark band sections (.section--dark, .page-hero, .cta-band) */
--color-band: var(--blue-700);
--color-band-heading: #FFFFFF;
--color-band-text: #C9D8F2;
--color-band-muted: #A8BEE2;
--color-band-line: rgba(255, 255, 255, 0.17);
--color-band-surface: rgba(255, 255, 255, 0.07);
--color-band-cta: var(--blue-200);
--color-band-cta-hover:var(--blue-100);
--color-band-cta-text: var(--blue-900);
/* Header */
--color-header-bg: rgba(245, 248, 252, 0.93);
--color-utility-bg: var(--blue-900);
--color-utility-text: #B9CBE8;
/* Footer */
--color-footer: var(--blue-900);
--color-footer-head: #FFFFFF;
--color-footer-text: #AFC3E0;
--color-footer-link: #DCE7F8;
--color-footer-line: rgba(255, 255, 255, 0.12);
/* Tinted fills. The two icon chips used to be blue and green; they are now
blue and ink, which keeps them telling apart at a glance. */
--color-blue-soft: var(--blue-025);
--color-accent-soft: var(--blue-025);
--color-icon-bg: var(--blue-025);
--color-icon-fg: var(--blue-500);
--color-icon-alt-bg: var(--ink-050);
--color-icon-alt-fg: var(--ink-700);
/* Feedback */
--color-error: #B3261E;
--color-error-bg: #FCEEEC;
--color-error-line: #F0C8C4;
--color-success: #1E6B47;
--color-success-bg: #E8F4EE;
--color-success-line:#C2E0D0;
/* Editorial placeholder marker */
--color-ph-bg: #FFF6DC;
--color-ph-text: #6B5310;
--color-ph-line: #C79A2E;
--color-star: #E0A82E;
/* Which logo file to show — swapped in dark mode */
--logo-light-display: block;
--logo-dark-display: none;
--shadow-color: 16, 25, 43;
}
/* --- Dark: system preference (unless the visitor explicitly chose light) --- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
/* Page, bands, header and footer are BLACK. Panels that need to lift off
the page — cards, alternating sections, icon chips — are DARK BLUE from
the brand blue family. */
--color-bg: #070A12;
--color-bg-alt: #0B1120;
--color-surface: #101830;
--color-surface-sunk: #080C17;
--color-text: #E9EFF9;
--color-text-soft: #C6D4E8;
--color-muted: #95A9C6;
--color-heading: #FFFFFF;
--color-line: rgba(255, 255, 255, 0.10);
--color-line-strong: rgba(255, 255, 255, 0.20);
--color-cta: var(--blue-300);
--color-cta-hover: var(--blue-200);
--color-cta-text: #06121F;
--color-link: var(--blue-200);
--color-link-hover:var(--blue-100);
--color-btn2-border: var(--ink-300);
--color-btn2-text: #D9DEE5;
--color-btn2-fill: var(--ink-300);
--color-btn2-fill-text: #0B0E13;
--color-band: #070A12;
--color-band-heading: #FFFFFF;
--color-band-text: #C6D4E8;
--color-band-muted: #95A9C6;
--color-band-line: rgba(255, 255, 255, 0.15);
--color-band-surface: #101830;
--color-band-cta: var(--blue-200);
--color-band-cta-hover:var(--blue-100);
--color-band-cta-text: #04101C;
--color-header-bg: rgba(7, 10, 18, 0.78);
--color-utility-bg: #05070E;
--color-utility-text: #AABDD8;
--color-footer: #05070E;
--color-footer-head: #FFFFFF;
--color-footer-text: #AABDD8;
--color-footer-link: #DCE7F8;
--color-footer-line: rgba(255, 255, 255, 0.14);
--color-blue-soft: #16203A;
--color-accent-soft: #0C1D33;
--color-icon-bg: #16203A;
--color-icon-fg: #9FC0F0;
--color-icon-alt-bg:#1B1F27;
--color-icon-alt-fg:#C6CDD7;
--color-error: #FF9A90;
--color-error-bg: #2E1512;
--color-error-line: #5C2620;
--color-success: #7BD3A4;
--color-success-bg: #0D2418;
--color-success-line:#1F4936;
--color-ph-bg: #33290C;
--color-ph-text: #FBE6AE;
--color-ph-line: #8A6F22;
--color-star: #E8B84B;
--logo-light-display: none;
--logo-dark-display: block;
--shadow-color: 0, 0, 0;
--glow-cta: 0 4px 18px -4px rgba(61, 155, 255, 0.40);
--glow-cta-hover: 0 10px 30px -6px rgba(61, 155, 255, 0.55);
--surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%);
--band-glow: radial-gradient(85% 65% at 50% 0%, rgba(31, 120, 214, 0.16), rgba(0, 0, 0, 0) 72%);
}
}
/* --- Dark: explicitly chosen by the visitor -------------------------------- */
:root[data-theme="dark"] {
color-scheme: dark;
/* Same mapping as the media-query block above: black page, dark-blue panels. */
--color-bg: #070A12;
--color-bg-alt: #0B1120;
--color-surface: #101830;
--color-surface-sunk: #080C17;
--color-text: #E9EFF9;
--color-text-soft: #C6D4E8;
--color-muted: #95A9C6;
--color-heading: #FFFFFF;
--color-line: rgba(255, 255, 255, 0.10);
--color-line-strong: rgba(255, 255, 255, 0.20);
--color-cta: var(--blue-300);
--color-cta-hover: var(--blue-200);
--color-cta-text: #06121F;
--color-link: var(--blue-200);
--color-link-hover:var(--blue-100);
--color-btn2-border: var(--ink-300);
--color-btn2-text: #D9DEE5;
--color-btn2-fill: var(--ink-300);
--color-btn2-fill-text: #0B0E13;
--color-band: #070A12;
--color-band-heading: #FFFFFF;
--color-band-text: #C6D4E8;
--color-band-muted: #95A9C6;
--color-band-line: rgba(255, 255, 255, 0.15);
--color-band-surface: #101830;
--color-band-cta: var(--blue-200);
--color-band-cta-hover:var(--blue-100);
--color-band-cta-text: #04101C;
--color-header-bg: rgba(7, 10, 18, 0.78);
--color-utility-bg: #05070E;
--color-utility-text: #AABDD8;
--color-footer: #05070E;
--color-footer-head: #FFFFFF;
--color-footer-text: #AABDD8;
--color-footer-link: #DCE7F8;
--color-footer-line: rgba(255, 255, 255, 0.14);
--color-blue-soft: #16203A;
--color-accent-soft: #0C1D33;
--color-icon-bg: #16203A;
--color-icon-fg: #9FC0F0;
--color-icon-alt-bg:#1B1F27;
--color-icon-alt-fg:#C6CDD7;
--color-error: #FF9A90;
--color-error-bg: #2E1512;
--color-error-line: #5C2620;
--color-success: #7BD3A4;
--color-success-bg: #0D2418;
--color-success-line:#1F4936;
--color-ph-bg: #33290C;
--color-ph-text: #FBE6AE;
--color-ph-line: #8A6F22;
--color-star: #E8B84B;
--logo-light-display: none;
--logo-dark-display: block;
--shadow-color: 0, 0, 0;
--glow-cta: 0 4px 18px -4px rgba(61, 155, 255, 0.40);
--glow-cta-hover: 0 10px 30px -6px rgba(61, 155, 255, 0.55);
--surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%);
--band-glow: radial-gradient(85% 65% at 50% 0%, rgba(31, 120, 214, 0.16), rgba(0, 0, 0, 0) 72%);
}
/* 03. SCALE TOKENS ========================================================= */
:root {
/* Cormorant Garamond carries every heading — a high-contrast old-style serif
that reads as established and considered rather than loud.
Inter keeps body copy, buttons, labels and navigation. That split is
deliberate: Cormorant has a small x-height and hairline thin strokes, so
it is beautiful at 48px and genuinely hard to read at 15px, which is the
size most of this site's words are set at. Both faces include latin-ext,
so Spanish accents render correctly. */
--font-display: "Barlow Condensed", "Oswald", "Arial Narrow",
"Helvetica Neue Condensed", sans-serif;
--font-heading: var(--font-display);
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--fs-xs: 0.8125rem;
--fs-sm: 0.9375rem;
--fs-base: clamp(1.0625rem, 0.99rem + 0.28vw, 1.125rem);
--fs-lg: clamp(1.1875rem, 1.10rem + 0.35vw, 1.3125rem);
--fs-xl: clamp(1.375rem, 1.24rem + 0.55vw, 1.625rem);
--fs-2xl: clamp(1.625rem, 1.42rem + 0.85vw, 2.125rem);
--fs-3xl: clamp(1.9rem, 1.60rem + 1.30vw, 2.625rem);
--fs-4xl: clamp(2.25rem, 1.80rem + 1.95vw, 3.25rem);
--lh-tight: 1.14;
--lh-snug: 1.28;
--lh-normal:1.65;
--ls-tight: -0.02em;
--ls-wide: 0.06em;
--ls-wider: 0.11em;
--fw-normal: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: clamp(3rem, 2rem + 4vw, 4.5rem);
--space-3xl: clamp(4rem, 2.5rem + 6vw, 7rem);
--section-y: clamp(3.5rem, 2.2rem + 5.5vw, 6.5rem);
--container: 1180px;
--container-narrow: 780px;
--container-wide: 1340px;
--gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 999px;
/* Dark surfaces are lit from above with a barely-there sheen, and bands get
a soft colour wash at the top. Both are `none` in light mode — a white card
does not need faking depth, a near-black one does. */
--surface-sheen: none;
--band-glow: none;
--shadow-xs: 0 1px 2px rgba(var(--shadow-color), 0.06);
--shadow-sm: 0 2px 6px rgba(var(--shadow-color), 0.08);
--shadow-md: 0 8px 24px -8px rgba(var(--shadow-color), 0.18);
--shadow-lg: 0 20px 48px -16px rgba(var(--shadow-color), 0.28);
/* The accent's own colour thrown softly underneath it. A grey drop shadow is
invisible on a near-black page; a tinted glow is what reads as depth. */
--glow-cta: 0 4px 14px -4px rgba(0, 89, 184, 0.38);
--glow-cta-hover: 0 8px 24px -6px rgba(0, 89, 184, 0.48);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-fast: 120ms;
--dur: 200ms;
/* Stacking order, and the reason for it.
.site-top is position:sticky WITH a z-index, so it opens a stacking context:
everything inside it — the drawer included — is stacked as one unit at
--z-header, no matter what z-index the drawer itself carries. The scrim is
a sibling of .site-top at body level, so it must sit BELOW --z-header or it
paints over the drawer: the menu greys out and every tap lands on the scrim
instead of the link. --z-nav only orders things inside the header. */
--z-sticky: 60; /* mobile call bar */
--z-scrim: 70; /* dims the page behind the open drawer */
--z-header: 80; /* .site-top, and therefore the drawer */
--z-nav: 90; /* ordering *within* the header only */
}
/* 04. RESET & BASE ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 150px; /* clears the sticky utility bar + header */
}
body {
margin: 0;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.is-locked { overflow: hidden; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a {
color: var(--color-link);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover { color: var(--color-link-hover); }
:focus-visible {
outline: 3px solid var(--color-cta);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-xl) 0; }
.skip-link {
position: absolute;
left: var(--space-sm);
top: -100px;
z-index: 999;
background: var(--blue-700);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-md);
font-weight: var(--fw-semi);
text-decoration: none;
transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-sm); color: #fff; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* 05. TYPOGRAPHY =========================================================== */
h1, h2, h3, h4 {
color: var(--color-heading);
margin: 0 0 var(--space-sm);
text-wrap: balance;
}
/* Cormorant is drawn small on the body — every heading is sized up roughly a
sixth from where a sans would sit, or it reads smaller than it measures. */
h1, h2 {
font-family: var(--font-display);
font-weight: 600; /* 700 turns a condensed heading into a sale sign */
line-height: 1.06;
letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.5rem, 1.95rem + 2.4vw, 4.1rem); }
h2 { font-size: clamp(1.95rem, 1.65rem + 1.35vw, 2.9rem); }
h3, h4 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.008em;
}
h3 { font-size: clamp(1.45rem, 1.33rem + 0.52vw, 1.75rem); }
h4 { font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.45rem); }
/* CAPITALS: the page's H1 only.
Uppercase is the loudest tool in typography and it stops meaning anything
once several things share it. One heading per page carries it — the one that
says what the page is — and every other heading is set in sentence case.
Small UI labels (eyebrows, footer column heads, form labels) are a separate
class: they are signposts rather than headings, they are set in Inter at
13px, and they keep their caps. */
h1 {
text-transform: uppercase;
letter-spacing: 0.015em; /* condensed caps need less air than a serif's */
line-height: 1.02;
max-width: 24ch; /* a condensed face fits more per line */
}
.hero h1 { max-width: 26ch; }
.prose h1, .page-head h1 { max-width: 22ch; }
h2, h3, h4 { text-transform: none; }
p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }
.lead {
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--color-text-soft);
max-width: 62ch;
}
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-link);
margin: 0 0 var(--space-xs);
}
.eyebrow--light { color: var(--blue-200); }
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.section-head { max-width: 62ch; margin-bottom: var(--space-xl); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--color-text-soft); font-size: var(--fs-lg); }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: var(--space-sm); }
.prose li { margin-bottom: var(--space-2xs); }
.checklist {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md);
display: grid;
gap: var(--space-xs);
}
.checklist li { position: relative; padding-left: 2rem; line-height: 1.55; }
/* The tick is drawn inside a data-URI SVG, so its colour is URL-encoded:
%23 is "#". Worth knowing — searching the stylesheet for a hex value will
not find these three, which is exactly how the old green survived here
after it had been removed from everywhere else. */
.checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 1.15rem;
height: 1.15rem;
border-radius: var(--radius-full);
background-color: var(--color-accent-soft);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230059B8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.7'/%3E%3C/svg%3E");
background-position: center;
background-size: 0.75rem;
background-repeat: no-repeat;
}
:root[data-theme="dark"] .checklist li::before,
.checklist--light li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2370B6FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.7'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .checklist li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2370B6FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.7'/%3E%3C/svg%3E");
}
}
.checklist--light li::before { background-color: rgba(255, 255, 255, 0.12); }
/* 06. LAYOUT UTILITIES ===================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.section--cream { background-color: var(--color-bg-alt); background-image: var(--band-glow); }
/* On a black page, two adjacent black bands merge into one another, so the
alternating and dark bands take hairline rules to keep the vertical rhythm. */
:root[data-theme="dark"] .section--cream,
:root[data-theme="dark"] .section--dark,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .page-hero { border-block: 1px solid var(--color-line); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .section--cream,
:root:not([data-theme="light"]) .section--dark,
:root:not([data-theme="light"]) .cta-band,
:root:not([data-theme="light"]) .page-hero { border-block: 1px solid var(--color-line); }
}
.section--white { background-color: var(--color-surface);
background-image: var(--surface-sheen); }
.section--dark { background: var(--color-band); color: var(--color-band-text); }
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--color-band-heading); }
.section--dark p { color: var(--color-band-text); }
.section--dark .lead { color: var(--color-band-text); }
.section--dark .text-muted { color: var(--color-band-muted); }
.section--dark a:not(.btn) { color: var(--blue-100); }
.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split { display: grid; gap: var(--space-2xl); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
.split { grid-template-columns: 1.05fr 0.95fr; }
.split--media-first > :first-child { order: 2; }
.split--media-first > :last-child { order: 1; }
.split--sidebar { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
.stack > * + * { margin-top: var(--space-sm); }
/* "Translated from Spanish" under a testimonial — quiet, but present. A quote
rendered in a language the reviewer did not write it in is no longer verbatim,
and saying so costs one line. */
.review-card__note {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-normal);
color: var(--color-muted);
font-style: italic;
margin-top: 0.15rem;
}
/* A wide photograph reading across the full container, with the copy beneath it
at a comfortable measure. A 2:1 panorama squeezed into one half of a .split
comes out postage-stamp sized and leaves a column of dead space beside it. */
.feature-photo { margin: 0 0 var(--space-xl); }
.feature-photo + .prose { max-width: 68ch; }
.stack-lg > * + * { margin-top: var(--space-lg); }
/* 07. BUTTONS ============================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.95rem 1.6rem;
min-height: 52px;
border: 2px solid transparent;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.012em;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur-fast) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }
.btn--primary {
background: var(--color-cta);
border-color: var(--color-cta);
color: var(--color-cta-text);
box-shadow: var(--glow-cta);
}
.btn--primary:hover {
background: var(--color-cta-hover);
border-color: var(--color-cta-hover);
color: var(--color-cta-text);
box-shadow: var(--glow-cta-hover);
transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }
.btn--secondary {
background: transparent;
border-color: var(--color-btn2-border);
color: var(--color-btn2-text);
}
.btn--secondary:hover {
background: var(--color-btn2-fill);
border-color: var(--color-btn2-fill);
color: var(--color-btn2-fill-text);
}
/* On a dark band the standard green would nearly vanish against the navy, so
the band gets a brighter fill with a dark label — 6.4:1 boundary, 8.2:1 text. */
.section--dark .btn--primary,
.cta-band .btn--primary,
.page-hero .btn--primary {
background: var(--color-band-cta);
border-color: var(--color-band-cta);
color: var(--color-band-cta-text);
}
.section--dark .btn--primary:hover,
.cta-band .btn--primary:hover,
.page-hero .btn--primary:hover {
background: var(--color-band-cta-hover);
border-color: var(--color-band-cta-hover);
color: var(--color-band-cta-text);
}
.btn--light { background: #fff; border-color: #fff; color: var(--blue-700); }
.btn--light:hover { background: var(--blue-025); color: var(--blue-850); }
.btn--outline-light {
background: transparent;
border-color: rgba(255, 255, 255, 0.6);
color: #fff;
}
.btn--outline-light:hover {
background: rgba(255, 255, 255, 0.13);
border-color: #fff;
color: #fff;
}
.btn--block { width: 100%; }
.btn--sm { padding: 0.6rem 1.05rem; min-height: 44px; font-size: var(--fs-xs); }
.btn--lg { padding: 1.1rem 2rem; min-height: 58px; font-size: var(--fs-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.btn-row--center { justify-content: center; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: var(--fw-semi);
font-size: var(--fs-sm);
text-decoration: none;
color: var(--color-link);
}
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
/* 08. HEADER / NAVIGATION ================================================== */
/* The utility bar and the header stick together as one block, so the phone
number, language switch and theme toggle stay reachable at any scroll
position. Both live inside .site-top, which is the single sticky element —
sticking them separately would need a hard-coded offset that breaks the
moment the bar wraps to two rows. */
.site-top {
position: sticky;
top: 0;
z-index: var(--z-header);
}
.utility-bar {
background: var(--color-utility-bg);
color: var(--color-utility-text);
font-size: var(--fs-xs);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.utility-bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2xs) var(--space-md);
padding-block: 0.4rem;
}
.utility-bar a { color: #fff; text-decoration: none; font-weight: var(--fw-medium); }
.utility-bar a:hover { color: var(--blue-100); text-decoration: underline; }
.utility-bar__group { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.utility-bar__item { display: inline-flex; align-items: center; gap: 0.4rem; }
/* --- Language switch + theme toggle --- */
.switches { display: inline-flex; align-items: center; gap: 0.5rem; }
.lang-switch {
display: inline-flex;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
overflow: hidden;
}
.lang-switch__btn {
background: transparent;
border: 0;
color: var(--color-utility-text);
padding: 0.3rem 0.72rem;
min-height: 30px;
display: inline-flex;
align-items: center;
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
cursor: pointer;
text-decoration: none;
line-height: 1;
}
/* The active pill is a LIGHT blue with a near-black label, not the brand blue.
The brand blue on the utility bar behind it is only 2.6:1 — the pill would
stop looking like a pill. #3D9BFF gives 6.5:1 for the label and 6.0:1
against the bar. */
.lang-switch__btn[aria-current="true"] {
background: var(--blue-300);
color: var(--blue-950);
}
.lang-switch__btn:hover:not([aria-current="true"]) {
color: #fff;
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 30px;
min-width: 44px;
padding: 0.3rem 0.6rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
color: var(--color-utility-text);
cursor: pointer;
line-height: 1;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.theme-toggle svg { width: 16px; height: 16px; }
/* Show the icon for the mode the button will switch TO. */
.theme-toggle__moon { display: block; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
:root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
}
/* The blur is painted by a pseudo-element, NOT by .site-header itself.
This looks like a pointless indirection and is not: an element with a
backdrop-filter becomes the containing block for any position:fixed
descendant. The mobile nav drawer is a descendant, so with the filter on
.site-header the drawer's "inset: 0" resolved against the 152px-tall header
instead of the viewport — the panel was header-height, overflow-y clipped it,
and only the first menu item was reachable. Moving the filter to ::before
keeps the frosted-glass effect and gives the drawer the viewport back. */
.site-header {
position: relative;
background: transparent;
border-bottom: 1px solid var(--color-line);
transition: box-shadow var(--dur) var(--ease);
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-header-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color var(--dur) var(--ease);
pointer-events: none;
}
.site-header__inner { position: relative; }
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding-block: 0.6rem;
}
/* --- Logo lockup --- */
.brand {
display: inline-flex;
align-items: center;
min-height: 44px;
text-decoration: none;
flex-shrink: 0;
}
/* Sized by height, so the logo's proportions are its own business. The redone
mark is a wide horizontal lockup (440x140) rather than the taller stacked
one it replaced, which puts the wordmark at a smaller cap height for the
same box — hence a little more height here than the old artwork needed. */
.brand__logo {
width: auto;
height: clamp(46px, 2.7rem + 2.3vw, 80px);
display: block;
}
.brand__logo--on-light { display: var(--logo-light-display); }
.brand__logo--on-dark { display: var(--logo-dark-display); }
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 44px;
min-width: 44px;
background: transparent;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
padding: 0.55rem 0.8rem;
cursor: pointer;
color: var(--color-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
}
.nav-toggle__bars {
display: block;
position: relative;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav__list {
list-style: none;
display: flex;
align-items: center;
gap: 1.35rem;
margin: 0;
padding: 0;
}
/* Navigation is text, not buttons.
Filled chips behind every link give seven competing rectangles across the
top and make the whole header read like a toolbar from 2012. The links carry
themselves; the current page is marked with a short rule underneath, which
is quieter and easier to scan. */
.site-nav__link {
position: relative;
display: block;
padding: 0.5rem 0.1rem;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--color-muted);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur) var(--ease);
}
.site-nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
border-radius: 2px;
background: var(--color-cta);
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms var(--ease);
}
.site-nav__link:hover { color: var(--color-heading); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] {
color: var(--color-heading);
font-weight: var(--fw-semi);
}
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { display: flex; align-items: center; gap: var(--space-2xs); }
@media (max-width: 979px) {
.nav-toggle { display: inline-flex; }
/* The drawer stays anchored inside the viewport even when closed: a fixed
panel parked past the right edge still counts toward page width and lets
the whole page drag sideways on touch. Contents animate, panel fades. */
.site-nav {
position: fixed;
inset: 0 0 0 auto;
width: min(360px, 88vw);
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border-left: 1px solid var(--color-line);
box-shadow: var(--shadow-lg);
padding: 6.5rem var(--space-md) var(--space-xl);
overflow-y: auto;
overflow-x: hidden;
z-index: var(--z-nav);
opacity: 0;
visibility: hidden;
transition: opacity 220ms var(--ease), visibility 220ms var(--ease);
}
.site-nav.is-open { opacity: 1; visibility: visible; }
.site-nav__list,
.site-nav .site-nav__mobile-cta {
transform: translateY(10px);
transition: transform 300ms var(--ease);
}
.site-nav.is-open .site-nav__list,
.site-nav.is-open .site-nav__mobile-cta { transform: translateY(0); }
.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__link {
padding: 0.95rem 0.5rem;
border-bottom: 1px solid var(--color-line);
border-radius: 0;
font-size: var(--fs-base);
}
.site-nav__link::after { display: none; }
.site-nav__link[aria-current="page"] {
color: var(--color-cta);
box-shadow: inset 3px 0 0 var(--color-cta);
padding-left: 0.85rem;
}
.site-nav__mobile-cta { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); }
.header-cta .btn--primary { display: none; }
.nav-scrim {
position: fixed;
inset: 0;
background: rgba(0, 12, 30, 0.55);
z-index: var(--z-scrim);
opacity: 0;
visibility: hidden;
transition: opacity 260ms var(--ease), visibility 260ms;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 980px) {
.nav-toggle { display: none; }
.site-nav__mobile-cta { display: none; }
.nav-scrim { display: none; }
}
@media (max-width: 767px) {
/* Trim the sticky bar to one compact row on phones. The address and the
"Hablamos Español" line both appear elsewhere on every page. */
.utility-bar__group--meta { display: none; }
.utility-bar__inner { justify-content: space-between; }
}
@media (max-width: 430px) {
.brand__logo { height: 42px; }
.nav-toggle { padding: 0.6rem 0.7rem; }
.nav-toggle > span:not(.nav-toggle__bars) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.utility-bar__inner { justify-content: center; }
}
/* 09. HERO ================================================================= */
.hero {
position: relative;
background:
radial-gradient(120% 100% at 88% 0%, rgba(31, 120, 214, 0.10) 0%, rgba(31, 120, 214, 0) 58%),
radial-gradient(90% 90% at 5% 100%, rgba(0, 53, 109, 0.07) 0%, rgba(0, 53, 109, 0) 60%),
var(--color-bg);
padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5rem);
border-bottom: 1px solid var(--color-line);
overflow: hidden;
}
.hero__grid { display: grid; gap: var(--space-2xl); align-items: center; grid-template-columns: 1fr; }
/* --- Photographic hero -----------------------------------------------------
The photograph is an ![]()
, not a CSS background, so the browser's preload
scanner finds it in the markup and starts fetching before the stylesheet has
even parsed. This is the Largest Contentful Paint element on the site; a
background-image would be discovered a full round-trip later.
object-position is pinned LEFT rather than centre. The composition puts the
mountain on the left of the frame, which is where the headline sits — and a
wide photo in a shallow band gets cropped from the sides, so centring it
throws away the exact part of the picture the text needs behind it. */
.hero--photo { background: var(--blue-950); border-bottom: 0; }
.hero--photo .hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% 52%;
}
.hero--photo::after {
content: "";
position: absolute;
inset: 0;
/* Two gradients: one across, to hold the text side; one down, to seat the
header against the sky. Deliberately lighter than a flat wash — the
mountain silhouette has to stay readable, and over-darkening turns an
expensive photograph into a texture nobody can see. */
background:
linear-gradient(90deg,
rgba(0, 16, 44, 0.82) 0%,
rgba(0, 16, 44, 0.70) 38%,
rgba(0, 16, 44, 0.40) 68%,
rgba(0, 16, 44, 0.20) 100%),
linear-gradient(180deg,
rgba(0, 16, 44, 0.42) 0%,
rgba(0, 16, 44, 0.00) 34%);
}
.hero--photo > .container { position: relative; z-index: 2; }
.hero--photo .hero__grid { grid-template-columns: 1fr; }
/* On the photo, everything sits on dark — these are fixed light values rather
than theme tokens, because the picture is the same in both themes. */
.hero--photo h1 { color: #FFFFFF; }
.hero--photo .hero__accent { color: var(--blue-100); }
.hero--photo .lead {
color: #E8EFFA;
/* Held narrower than the usual 62ch measure so the lines end over the
mountain rather than running out onto the city lights, where white text
drops to 2.7:1. Constraining the text is the honest fix; darkening the
whole picture to rescue four words is not. */
max-width: 42ch;
}
.hero--photo .hero__proof { border-top-color: rgba(255, 255, 255, 0.24); color: #DCE7F8; }
.hero--photo .hero__proof span { color: #DCE7F8; }
.hero--photo .badge {
color: #FFFFFF;
background: rgba(0, 16, 44, 0.55);
border-color: rgba(255, 255, 255, 0.38);
backdrop-filter: blur(2px);
}
.hero--photo .badge--accent {
color: var(--blue-900);
background: var(--blue-200);
border-color: transparent;
}
.hero--photo .btn--secondary {
color: #FFFFFF;
background: rgba(0, 16, 44, 0.42);
border-color: rgba(255, 255, 255, 0.62);
}
.hero--photo .btn--secondary:hover {
background: rgba(0, 16, 44, 0.7);
border-color: #FFFFFF;
}
.hero--photo .placeholder { background: rgba(255, 214, 102, 0.22); color: #FFE9A8; }
@media (max-width: 780px) {
/* Narrow screens crop far more off the sides. Nudging right of the edge
keeps a sliver of the skyline in frame instead of showing mountain alone. */
.hero--photo .hero__bg { object-position: 22% 55%; }
.hero--photo::after {
background:
linear-gradient(180deg,
rgba(0, 16, 44, 0.62) 0%,
rgba(0, 16, 44, 0.38) 48%,
rgba(0, 16, 44, 0.66) 100%);
}
}
@media (min-width: 920px) { .hero__grid { grid-template-columns: 1.08fr 0.92fr; } }
.hero h1 { margin-bottom: var(--space-sm); }
.hero__accent { color: var(--color-link); }
.hero .lead { margin-bottom: var(--space-lg); }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: var(--space-md); }
.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.8rem;
border-radius: var(--radius-full);
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
color: var(--color-text-soft);
}
.badge--accent {
background: var(--color-accent-soft);
border-color: var(--blue-100);
color: var(--color-link);
}
:root[data-theme="dark"] .badge--accent { border-color: #17324F; }
.badge--dark {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.24);
color: #fff;
}
.hero__proof {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-line);
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
font-size: var(--fs-sm);
color: var(--color-muted);
}
.hero__media { position: relative; }
.page-hero {
background: var(--color-band);
color: var(--color-band-text);
padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
position: relative;
overflow: hidden;
}
.page-hero::after {
content: "";
position: absolute;
right: -8%;
top: -40%;
width: 46%;
aspect-ratio: 1;
max-width: 100%;
border-radius: 50%;
background: radial-gradient(circle, rgba(31, 120, 214, 0.34) 0%, rgba(31, 120, 214, 0) 68%);
pointer-events: none;
}
/* --- Photographic page banner ----------------------------------------------
Same approach as the homepage hero: a real ![]()
so the preload scanner finds
it, a scrim tuned by measuring white text against the actual pixels, and the
frame pinned to the RIGHT — every one of these photographs puts its subject
on the right of the desk and leaves the left empty, which is exactly where
the breadcrumb, headline and buttons sit. */
.page-hero--photo { background-color: var(--blue-950); }
.page-hero--photo::after { display: none; } /* the green orb fights the photo */
.page-hero--photo .page-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 100% 50%;
}
.page-hero--photo .page-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(0, 16, 44, 0.94) 0%,
rgba(0, 16, 44, 0.88) 38%,
rgba(0, 16, 44, 0.55) 70%,
rgba(0, 16, 44, 0.30) 100%),
linear-gradient(180deg, rgba(0, 16, 44, 0.45) 0%, rgba(0, 16, 44, 0) 40%);
pointer-events: none;
}
@media (max-width: 780px) {
/* Narrow screens crop the sides away, so the copy ends up over the middle of
the photo instead of its empty left third. Flat wash, no horizontal ramp. */
.page-hero--photo .page-hero__bg { object-position: 72% 50%; }
.page-hero--photo .page-hero__scrim {
background: linear-gradient(180deg,
rgba(0, 16, 44, 0.86) 0%, rgba(0, 16, 44, 0.80) 60%, rgba(0, 16, 44, 0.88) 100%);
}
}
.page-hero__inner { position: relative; z-index: 1; max-width: 68ch; }
.page-hero h1 { color: var(--color-band-heading); margin-bottom: var(--space-sm); }
.page-hero p { color: var(--color-band-text); font-size: var(--fs-lg); }
.page-hero .btn-row { margin-top: var(--space-lg); }
/* Breadcrumbs. Every item — link, separator and current page — sits in the
same flex row with the same line-height and the same vertical padding, so
the baselines line up. Padding on the links alone (added earlier for tap
size) was what pushed them out of alignment with the current-page text. */
.breadcrumbs {
font-size: var(--fs-sm);
color: var(--color-band-muted);
margin-bottom: var(--space-md);
}
.breadcrumbs ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.1rem;
margin: 0;
padding: 0;
line-height: 1;
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
line-height: 1;
}
.breadcrumbs li:not(:last-child)::after {
content: "›";
display: inline-flex;
align-items: center;
padding: 0.35rem 0.45rem;
font-size: 1.05em;
line-height: 1;
opacity: 0.55;
}
.breadcrumbs li > a,
.breadcrumbs li > span {
display: inline-flex;
align-items: center;
padding: 0.35rem 0;
line-height: 1;
}
.breadcrumbs a { color: var(--color-band-text); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs li[aria-current="page"] > span { color: #fff; font-weight: var(--fw-medium); }
/* 10. CARDS & SERVICE COMPONENTS =========================================== */
.card {
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-md);
box-shadow: var(--shadow-xs);
}
.service-card {
display: flex;
flex-direction: column;
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-md);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.service-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--color-cta);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.service-card:hover {
border-color: var(--color-line-strong);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
color: inherit;
}
.service-card:hover::before { transform: scaleX(1); }
/* Photo variant of the service card. The image replaces the icon chip rather
than sitting alongside it — two visual anchors in one card flattens the
hierarchy and neither reads as the entry point. */
.service-card--photo { padding: 0; }
.service-card__photo {
display: block;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-line);
}
.service-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 420ms var(--ease);
}
.service-card--photo:hover .service-card__photo img { transform: scale(1.035); }
.service-card--photo > :not(.service-card__photo) {
margin-inline: var(--space-md);
}
.service-card--photo h3 { margin-top: var(--space-md); }
.service-card--photo .service-card__cta { margin-bottom: var(--space-md); }
/* the hover rule sits above the photo, not under it */
.service-card::before { z-index: 2; }
.service-card__icon {
width: 46px;
height: 46px;
border-radius: var(--radius-md);
background: var(--color-icon-bg);
color: var(--color-icon-fg);
display: grid;
place-items: center;
margin-bottom: var(--space-sm);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card h3 { font-size: calc(var(--fs-lg) * 1.12); margin-bottom: 0.4rem; }
.service-card p { font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.6; margin-bottom: var(--space-sm); }
.service-card__list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md);
font-size: var(--fs-sm);
color: var(--color-text-soft);
display: grid;
gap: 0.3rem;
}
.service-card__list li { position: relative; padding-left: 1rem; }
.service-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-cta);
}
.service-card__cta {
margin-top: auto;
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
color: var(--color-link);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.service-card__cta::after { content: "→"; transition: transform var(--dur) var(--ease); }
.service-card:hover .service-card__cta::after { transform: translateX(4px); }
.route-card {
display: flex;
align-items: center;
gap: var(--space-sm);
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-cta);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
min-height: 60px;
text-decoration: none;
color: var(--color-heading);
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.3;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.route-card span { flex: 1; }
.route-card::after {
content: "→";
font-family: var(--font-body);
color: var(--color-link);
font-size: 1.15rem;
transition: transform var(--dur) var(--ease);
}
.route-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: var(--color-heading);
border-left-color: var(--color-cta-hover);
}
.route-card:hover::after { transform: translateX(4px); }
.section--dark .route-card {
background: var(--color-band-surface);
border-color: var(--color-band-line);
border-left-color: var(--blue-200);
color: #fff;
}
.section--dark .route-card::after { color: var(--blue-100); }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.feature__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: grid;
place-items: center;
background: var(--color-icon-alt-bg);
color: var(--color-icon-alt-fg);
flex-shrink: 0;
}
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 {
font-size: 1.2rem;
margin-bottom: 0.25rem;
font-family: var(--font-heading);
font-weight: 600;
}
.feature p { font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.6; }
.section--dark .feature__icon { background: rgba(61, 155, 255, 0.16); color: var(--blue-100); }
.section--dark .feature h3 { color: var(--color-band-heading); }
.section--dark .feature p { color: var(--color-band-muted); }
.trust-bar { background-color: var(--color-surface);
background-image: var(--surface-sheen); border-block: 1px solid var(--color-line); }
.trust-bar__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--space-md);
padding-block: var(--space-lg);
}
.trust-item { text-align: center; position: relative; }
.trust-item__value {
font-family: var(--font-display);
font-size: calc(var(--fs-2xl) * 1.2);
font-weight: 600;
color: var(--color-heading);
line-height: 1.1;
display: block;
}
.trust-item__label { font-size: var(--fs-sm); color: var(--color-muted); margin-top: 0.2rem; }
.trust-item::after {
content: "";
display: block;
width: 26px;
height: 3px;
border-radius: 2px;
background: var(--color-cta);
margin: 0.7rem auto 0;
}
.owner-card { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 780px) {
.owner-card { grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--space-2xl); }
}
.rating-summary {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-radius: var(--radius-full);
padding: 0.6rem 1.25rem;
margin-bottom: var(--space-md);
}
.stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.stars svg { width: 18px; height: 18px; }
.rating-summary__score {
font-family: var(--font-display);
font-weight: 600;
font-size: calc(var(--fs-lg) * 1.1);
color: var(--color-heading);
}
.rating-summary__meta { font-size: var(--fs-sm); color: var(--color-muted); }
.review-card {
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
box-shadow: var(--shadow-xs);
}
.review-card__quote {
font-family: var(--font-body);
font-size: var(--fs-lg);
line-height: 1.5;
color: var(--color-text);
margin: 0;
}
.review-card__author { font-size: var(--fs-sm); color: var(--color-muted); margin-top: auto; }
.review-card__author strong { color: var(--color-text); font-weight: var(--fw-semi); }
/* 11. CTA BAND ============================================================= */
.cta-band {
background: var(--color-band);
color: var(--color-band-heading);
position: relative;
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute;
left: -6%;
bottom: -60%;
width: 46%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(31, 120, 214, 0.38) 0%, rgba(31, 120, 214, 0) 70%);
pointer-events: none;
}
.cta-band__inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 66ch;
margin-inline: auto;
padding-block: var(--section-y);
}
.cta-band h2 { color: var(--color-band-heading); }
.cta-band p { color: var(--color-band-text); font-size: var(--fs-lg); margin-bottom: var(--space-lg); }
.contact-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-band-line);
font-size: var(--fs-sm);
color: var(--color-band-text);
}
.contact-strip a { color: #fff; }
/* 12. FORMS ================================================================ */
.form-card {
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
box-shadow: var(--shadow-md);
}
.form-grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
@media (min-width: 620px) {
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-field--full { grid-column: 1 / -1; }
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text); }
.form-label .req { color: var(--color-link); }
.form-hint { font-size: var(--fs-xs); color: var(--color-muted); }
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 0.8rem 0.9rem;
font-size: 1rem; /* 16px minimum stops iOS zooming on focus */
background: var(--color-surface-sunk);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
color: var(--color-text);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
background-color: var(--color-surface);
background-image: var(--surface-sheen);
/* theme-aware: the deep blue that reads on white is invisible on black */
border-color: var(--color-cta);
box-shadow: 0 0 0 3px rgba(31, 120, 214, 0.30);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2354637E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1.1rem;
padding-right: 2.5rem;
}
:root[data-theme="dark"] .form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2395A8C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2395A8C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
}
}
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"] {
border-color: var(--color-error);
box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}
.field-error { font-size: var(--fs-xs); color: var(--color-error); font-weight: var(--fw-medium); }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.radio-pill span {
display: inline-flex;
align-items: center;
padding: 0.6rem 1rem;
min-height: 44px;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-full);
background: var(--color-surface-sunk);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.radio-pill input:checked + span {
background: var(--color-cta);
border-color: var(--color-cta);
color: var(--color-cta-text);
}
.radio-pill input:focus-visible + span { outline: 3px solid var(--color-cta); outline-offset: 2px; }
.form-consent {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.7rem;
align-items: start;
font-size: var(--fs-sm);
color: var(--color-muted);
line-height: 1.55;
}
.form-consent input {
width: 24px;
height: 24px;
margin: 0.05rem 0 0;
accent-color: var(--color-cta);
flex-shrink: 0;
}
.form-status {
margin-top: var(--space-sm);
padding: var(--space-sm);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
display: none;
}
.form-status.is-visible { display: block; }
.form-status--error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error-line); }
.form-status--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-line); }
/* 13. FOOTER =============================================================== */
.site-footer {
background: var(--color-footer);
color: var(--color-footer-text);
font-size: var(--fs-sm);
padding-top: var(--space-2xl);
}
.site-footer h3 {
color: var(--color-footer-head);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: var(--fw-semi);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.site-footer a { color: var(--color-footer-link); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
display: grid;
gap: var(--space-lg) var(--space-xl);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding-bottom: var(--space-xl);
}
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-brand__logo { height: 66px; width: auto; margin-bottom: var(--space-sm); }
.footer-brand p { max-width: 38ch; color: var(--color-footer-text); }
.footer-hours { display: grid; gap: 0.35rem; margin: 0; }
.footer-hours div { display: flex; justify-content: space-between; gap: var(--space-sm); max-width: 260px; }
.footer-hours dt { color: var(--color-footer-text); opacity: 0.8; }
.footer-hours dd { margin: 0; color: var(--color-footer-link); }
.footer-bottom {
border-top: 1px solid var(--color-footer-line);
padding-block: var(--space-md) var(--space-lg);
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
align-items: center;
justify-content: space-between;
font-size: var(--fs-xs);
color: var(--color-footer-text);
}
.footer-disclaimer {
font-size: var(--fs-xs);
color: var(--color-footer-text);
opacity: 0.92;
line-height: 1.65;
padding-bottom: var(--space-md);
max-width: 90ch;
}
@media (max-width: 767px) { .site-footer { padding-bottom: 76px; } }
/* 14. MOBILE STICKY CTA ==================================================== */
.mobile-cta {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--z-sticky);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--color-line);
border-top: 1px solid var(--color-line);
box-shadow: 0 -6px 20px -8px rgba(var(--shadow-color), 0.3);
transform: translateY(110%);
transition: transform 260ms var(--ease);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.95rem 0.5rem;
min-height: 58px;
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
text-decoration: none;
background-color: var(--color-surface);
background-image: var(--surface-sheen);
color: var(--color-heading);
}
.mobile-cta__btn--primary { background: var(--color-cta); color: var(--color-cta-text); }
.mobile-cta__btn svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .mobile-cta { display: none; } }
/* 15. ACCORDION / FAQ ====================================================== */
.faq { display: grid; gap: 0.6rem; }
.faq__item {
background-color: var(--color-surface);
background-image: var(--surface-sheen);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
overflow: hidden;
}
.faq__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
text-align: left;
padding: var(--space-sm) var(--space-md);
min-height: 56px;
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-semi);
color: var(--color-heading);
}
.faq__question::after {
content: "+";
font-size: 1.4rem;
line-height: 1;
color: var(--color-link);
transition: transform var(--dur) var(--ease);
flex-shrink: 0;
}
.faq__question[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__answer {
padding: 0 var(--space-md) var(--space-md);
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.65;
}
.faq__answer[hidden] { display: none; }
/* 16. MISC ================================================================= */
.img-frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-line);
background: var(--color-bg-alt);
box-shadow: var(--shadow-md);
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame--portrait { aspect-ratio: 4 / 5; }
.img-frame--landscape { aspect-ratio: 4 / 3; }
.img-frame--wide { aspect-ratio: 16 / 10; }
.img-frame--photo { aspect-ratio: 16 / 9; }
.img-frame--pano { aspect-ratio: 2 / 1; } /* wide interior/exterior shots */
.img-note { display: block; margin-top: 0.55rem; font-size: var(--fs-xs); color: var(--color-muted); font-style: italic; }
.placeholder {
background: var(--color-ph-bg);
border-bottom: 2px dotted var(--color-ph-line);
padding: 0 0.15em;
font-style: normal;
color: var(--color-ph-text);
font-weight: var(--fw-semi);
}
.placeholder-note {
background: var(--color-ph-bg);
border: 1px dashed var(--color-ph-line);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
font-size: var(--fs-sm);
color: var(--color-ph-text);
margin-bottom: var(--space-md);
}
.placeholder-note strong { color: var(--color-ph-text); }
.callout {
border-left: 4px solid var(--blue-700);
background: var(--color-blue-soft);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-sm) var(--space-md);
font-size: var(--fs-sm);
color: var(--color-text-soft);
line-height: 1.6;
}
.callout--accent { border-left-color: var(--brand-blue); background: var(--color-accent-soft); }
.callout strong { color: var(--color-heading); }
:root[data-theme="dark"] .callout { border-left-color: #70B6FF; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.contact-list__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.contact-list__icon {
width: 40px; height: 40px;
border-radius: var(--radius-md);
background: var(--color-icon-bg);
color: var(--color-icon-fg);
display: grid; place-items: center;
flex-shrink: 0;
}
.contact-list__icon svg { width: 20px; height: 20px; }
.contact-list__label {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
color: var(--color-muted);
font-weight: var(--fw-semi);
margin-bottom: 0.15rem;
}
.contact-list__value { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.contact-list__value a { text-decoration: none; }
.contact-list__value a:hover { text-decoration: underline; }
.split > .map-frame { align-self: stretch; }
.map-frame {
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
background: var(--color-bg-alt);
min-height: 320px;
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours-table th, .hours-table td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--color-line); }
.hours-table th { font-weight: var(--fw-medium); color: var(--color-muted); }
.hours-table td { text-align: right; font-weight: var(--fw-semi); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.steps li::before {
content: counter(step);
width: 38px; height: 38px;
border-radius: var(--radius-full);
background: var(--brand-blue);
color: #fff;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
flex-shrink: 0;
}
.steps h3 { font-size: 1.2rem; font-family: var(--font-heading); font-weight: 600; margin-bottom: 0.2rem; }
.steps p { font-size: var(--fs-sm); color: var(--color-muted); }
/* Confirmation / not-found mark (thank-you and 404 pages).
The base reset gives every svg height:auto, so an icon with only a viewBox
would scale to its container. These get explicit dimensions. */
.confirm-mark {
display: grid; /* block-level, so the eyebrow below it clears */
place-items: center;
margin-inline: auto;
width: 88px;
height: 88px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: var(--color-accent-soft);
color: var(--color-link);
border: 2px solid var(--color-cta);
}
.confirm-mark > svg {
width: 38px;
height: 38px;
max-width: 38px;
}
.confirm-mark--quiet {
background: var(--color-blue-soft);
color: var(--color-heading);
border-color: var(--color-line-strong);
}
.anchor { scroll-margin-top: 150px; }
/* Touch sizing. Click-to-call links are the highest-value taps on this site,
and the language / theme controls have to be comfortable with a thumb — the
utility bar is compact, so these sit at 40px rather than the 44px used for
full buttons, still well clear of the 24px minimum target size. */
@media (max-width: 767px) {
a[href^="tel:"]:not(.btn):not(.mobile-cta__btn):not(.lang-switch__btn) {
display: inline-block;
padding-block: 0.4rem;
min-height: 40px;
font-weight: var(--fw-semi);
}
.lang-switch__btn { min-height: 40px; padding-inline: 0.95rem; }
.theme-toggle { min-height: 40px; min-width: 48px; }
.theme-toggle svg { width: 18px; height: 18px; }
.utility-bar__inner { padding-block: 0.3rem; }
}
/* 17. MOTION & PRINT ======================================================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
@media print {
.site-header, .utility-bar, .mobile-cta, .cta-band, .nav-scrim { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
.brand__logo--on-dark { display: none !important; }
.brand__logo--on-light { display: block !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}
/* Presentation build: nothing may render as an internal note. */
.placeholder, .placeholder-note { display: none !important; }