/* site-owned tokens — the names the kernel does NOT emit. tokens.css is otherwise EXCLUDED: it mirrors Brand::css_variables(), and a body-side :root lands later than the host's block, so shipping it would cancel the tenant brand while the page still looked correct. */ :root { --pad: clamp(16px, 5vw, 48px); --col: min(1200px, calc(100vw - 2 * var(--pad))); --col-narrow: min(760px, calc(100vw - 2 * var(--pad))); --z-header: 50; --z-mobilenav: 70; } /* base.css — resets + element defaults + typography. Every value is a token. No hex, no raw px. Self-host a brand display font here (NOT in tokens.css) if the design calls for one: @font-face { font-family:"Brand"; src:url("/vendor//fonts/brand.woff2") format("woff2"); font-weight:400; font-display:swap; } ...then set --font-display:"Brand", in tokens.css. The src MUST be absolute. This comment used to read `../assets/fonts/brand.woff2`, and SCV Dental's converter copied it verbatim: the sheet is served at `/vendor/scv.css`, so `../` had already left `/vendor/` and every one of its five faces 404'd at `/assets/fonts/` for the life of the site. `./fonts/` is wrong for the same reason in the other direction — it resolves to `/vendor/fonts/`. The files live at `/vendor//fonts/`, which is what the preloads in `main.rs` already point at, so only the stylesheet was ever wrong. It went unnoticed for months because the platform injects its own @font-face for six families into every published page, one of which (Instrument Serif) is the same face SCV asked for. Chrome kept the working copy and the site looked right. A site whose display face does NOT collide with a platform one gets no such rescue. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: rgb(var(--bg)); color: rgb(var(--fg)); font: var(--weight-base) var(--text-base) / var(--leading-base) var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } h1 { font: var(--weight-xl) clamp(var(--text-xl), 5.4vw, calc(var(--text-xl) * 1.9)) / 1.08 var(--font-display); letter-spacing: var(--tracking-tight); } h2 { font: var(--weight-xl) clamp(var(--text-lg), 3.2vw, var(--text-xl)) / 1.15 var(--font-display); letter-spacing: var(--tracking-tight); } h3 { font: var(--weight-lg) var(--text-lg) / var(--leading-lg) var(--font-display); } h4 { font: var(--weight-lg) var(--text-base) / var(--leading-base) var(--font-sans); } a { color: rgb(var(--color-primary)); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-standard); } a:hover { opacity: .8; } /* Inline links within flowing prose must be distinguishable without relying on color alone (WCAG 1.4.1) — axe-core flagged bare color-only links inside body paragraphs AND inside bullet-list content (e.g. a "further reading" item that's a whole
  • , sitting next to plain-text
  • siblings). Buttons, card titles, and nav/footer/dropdown/breadcrumb lists are already distinguishable by shape/position, so those are explicitly excluded below. */ p a, li a { text-decoration: underline; text-underline-offset: 0.15em; } .primary-nav a, .dropdown a, .mobile-nav a, .site-footer a, .breadcrumbs a, .insurers a, .modalities a, .faq a { text-decoration: none; } img { max-width: 100%; height: auto; display: block; } code, pre { font-family: var(--font-mono); font-size: var(--text-sm); } :focus-visible { outline: var(--focus-ring-width) solid rgb(var(--focus-ring)); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Skip link (accessibility) — visible on focus. */ .skip-link { position: absolute; left: var(--space-2); top: -4rem; background: rgb(var(--color-primary)); color: rgb(var(--on-primary)); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); transition: top var(--dur-fast) var(--ease-standard); z-index: var(--z-toast); } .skip-link:focus { top: var(--space-2); } /* Visually-hidden utility for screen-reader-only labels. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* layout.css — layout primitives only, tokens only. Flexbox/Grid/clamp; no deep nesting. */ /* Centered content column (uses the site-owned --pad/--col structural tokens). */ .container { width: var(--col); margin-inline: auto; } .container--narrow { width: var(--col-narrow); margin-inline: auto; } /* Vertical rhythm between page bands. */ .section { padding-block: clamp(var(--space-10), 8vw, calc(var(--space-10) * 2)); } .section--tight { padding-block: clamp(var(--space-8), 5vw, var(--space-10)); } /* Simple stacks. */ .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack-lg { display: flex; flex-direction: column; gap: var(--space-6); } /* Rows. */ .row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .row--between { justify-content: space-between; } /* Auto-fit responsive grid for homogeneous item lists (R5 in the brief). */ .grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); } .grid--tight { gap: var(--space-4); } /* Two-column split (media + text); collapses to one column on small screens. */ .split { display: grid; gap: clamp(var(--space-6), 5vw, calc(var(--space-10) * 1.4)); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } /* sections.css — per-section + component styles. Tokens only; flat, section-scoped rules. No hex, no token-owned px, no !important. Structural px (hairlines, breakpoints) only. */ /* ───────────────────────── Buttons / CTAs ───────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font: var(--weight-lg) var(--text-sm) / 1 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; min-height: var(--space-10); border: var(--stroke-hairline) solid transparent; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .btn:hover { opacity: .92; } .btn:active { transform: translateY(1px); } .btn--primary { background: rgb(var(--color-primary)); color: rgb(var(--on-primary)); } .btn--ghost { background: transparent; color: rgb(var(--fg)); border-color: var(--line); } .btn--onprimary { background: rgb(var(--on-primary)); color: rgb(var(--color-primary)); } .btn--sm { min-height: auto; padding: var(--space-2) var(--space-4); } /* Text link with arrow — used as card "Learn More" affordances. */ .link-more { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--weight-lg) var(--text-sm) / 1 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgb(var(--color-primary)); } /* ───────────────────────── Header / nav ───────────────────────── */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgb(var(--bg) / .88); backdrop-filter: saturate(1.2) blur(var(--blur-card)); border-bottom: var(--stroke-hairline) solid var(--line); } .site-header__inner { padding-block: var(--space-3); gap: var(--space-5); } .brand-mark { color: rgb(var(--fg)); font: var(--weight-xl) var(--text-lg) / 1 var(--font-display); letter-spacing: var(--tracking-tight); white-space: nowrap; } .brand-mark strong { color: rgb(var(--color-primary)); font-weight: inherit; } .primary-nav { display: none; } @media (min-width: 1040px) { .primary-nav { display: flex; align-items: center; gap: var(--space-5); } } .primary-nav > li { position: relative; list-style: none; } .primary-nav a, .navlink { color: rgb(var(--fg)); font: var(--weight-base) var(--text-sm) / 1 var(--font-sans); padding-block: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); } .navlink[aria-expanded] { background: none; border: 0; cursor: pointer; font-family: inherit; } .navlink svg { width: .7em; height: .7em; transition: transform var(--dur-fast) var(--ease-standard); } .navlink[aria-expanded="true"] svg { transform: rotate(180deg); } /* Dropdown menus — CSS-hover open, JS toggles aria-expanded for keyboard/touch. */ .dropdown { position: absolute; top: 100%; left: 0; min-width: 15rem; background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); margin: 0; list-style: none; z-index: var(--z-dropdown); display: none; } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .dropdown[data-open="true"] { display: block; } .dropdown a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); } .dropdown a:hover { background: rgb(var(--primary-surface)); color: rgb(var(--primary-on-surface)); opacity: 1; } .header-actions { display: flex; align-items: center; gap: var(--space-3); } .header-phone { display: none; font: var(--weight-lg) var(--text-sm) / 1 var(--font-sans); color: rgb(var(--color-primary)); white-space: nowrap; } @media (min-width: 680px) { .header-phone { display: inline-flex; } } /* Mobile nav toggle + panel */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); background: transparent; border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-md); color: rgb(var(--fg)); cursor: pointer; } @media (min-width: 1040px) { .nav-toggle { display: none; } } .mobile-nav { display: none; position: fixed; inset: 0; z-index: var(--z-mobilenav); background: rgb(var(--bg)); padding: var(--space-6) var(--pad); overflow-y: auto; } .mobile-nav[data-open="true"] { display: block; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav > ul > li { border-bottom: var(--stroke-hairline) solid var(--line); } .mobile-nav a, .mobile-nav summary { display: block; padding: var(--space-4) 0; color: rgb(var(--fg)); font: var(--weight-lg) var(--text-lg) / 1.2 var(--font-display); cursor: pointer; } .mobile-nav details ul a { font: var(--weight-base) var(--text-base) / 1.4 var(--font-sans); padding: var(--space-2) 0 var(--space-2) var(--space-4); } .mobile-nav__close { position: absolute; top: var(--space-5); right: var(--pad); } /* ───────────────────────── Breadcrumbs ───────────────────────── */ .breadcrumbs { padding-block: var(--space-4); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: rgb(var(--muted)); } .breadcrumbs li::after { content: "/"; margin-left: var(--space-2); color: rgb(var(--muted) / .6); } .breadcrumbs li:last-child::after { content: ""; } .breadcrumbs a { color: rgb(var(--muted)); } .breadcrumbs [aria-current="page"] { color: rgb(var(--fg)); } /* ───────────────────────── Eyebrow / section head / lede ───────────────────────── */ .eyebrow { color: rgb(var(--color-primary)); text-transform: uppercase; letter-spacing: var(--tracking-wide); font: var(--weight-lg) var(--text-sm) / 1 var(--font-sans); } .sec-head { max-width: 60ch; margin-bottom: var(--space-8); } .sec-head__title { margin-top: var(--space-3); } .sec-head__lede { color: rgb(var(--fg-2)); margin-top: var(--space-4); font-size: var(--text-lg); line-height: var(--leading-lg); } .lede { color: rgb(var(--fg-2)); font-size: var(--text-lg); line-height: var(--leading-lg); } /* ───────────────────────── Hero ───────────────────────── */ .hero { padding-block: clamp(var(--space-10), 9vw, calc(var(--space-10) * 2.4)); position: relative; } .hero__eyebrow { margin-bottom: var(--space-4); } .hero__title { max-width: 18ch; } .hero__subtitle { color: rgb(var(--fg-2)); font-size: var(--text-lg); line-height: var(--leading-lg); max-width: 54ch; margin-top: var(--space-5); } .hero__cta { margin-top: var(--space-8); gap: var(--space-3); } .hero--split .hero__media { display: grid; gap: var(--space-4); } /* ───────────────────────── Placeholder image (ALL source imagery is a placeholder) ───────────────────────── Every live image is a grey SVG data-URI. We render an honest, neutral, on-token block carrying the real alt as an accessible name, and flag it for the client. Nothing invented. */ .ph { display: grid; place-items: center; background: linear-gradient(135deg, rgb(var(--primary-surface)), rgb(var(--bg-3))); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-xl); color: rgb(var(--muted)); aspect-ratio: 4 / 3; width: 100%; overflow: hidden; } .ph::after { content: "Photo pending"; font: var(--weight-base) var(--text-xs) / 1 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .7; } .ph--portrait { aspect-ratio: 3 / 4; } .ph--square { aspect-ratio: 1 / 1; } .ph--wide { aspect-ratio: 16 / 9; } .ph--avatar { aspect-ratio: 1 / 1; border-radius: var(--radius-full); width: var(--space-10); height: var(--space-10); } .ph--avatar::after { content: ""; } .ph--logo { aspect-ratio: 5 / 2; background: rgb(var(--bg-2)); border-radius: var(--radius-md); } .ph--logo::after { content: attr(aria-label); padding: var(--space-2); text-align: center; text-transform: none; letter-spacing: 0; } /* ───────────────────────── Cards ───────────────────────── */ .card { background: rgb(var(--bg-2)); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-2xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .card__eyebrow { color: rgb(var(--muted)); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xs); } .card__title { font: var(--weight-lg) var(--text-lg) / var(--leading-lg) var(--font-display); } .card__body { color: rgb(var(--fg-2)); } .card__media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; } .card__media .ph { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border: 0; } .card > .link-more { margin-top: auto; } /* Program card — numbered, editorial */ .card--program .card__num { font: var(--weight-xl) var(--text-xl) / 1 var(--font-display); color: rgb(var(--color-primary) / .7); } /* Team card */ .card--team { align-items: flex-start; text-align: left; } .card--team .ph { margin-bottom: var(--space-2); } .card--team .card__role { color: rgb(var(--muted)); font-size: var(--text-sm); } /* Post card */ .card--post .card__meta { display: flex; align-items: center; gap: var(--space-3); color: rgb(var(--muted)); font-size: var(--text-sm); margin-top: auto; } .card--post .card__title a { color: rgb(var(--fg)); } .card--post .card__title a:hover { color: rgb(var(--color-primary)); opacity: 1; } /* ───────────────────────── Stats band ───────────────────────── */ .stats { background: rgb(var(--primary-surface)); border-radius: var(--radius-2xl); padding: clamp(var(--space-6), 5vw, var(--space-10)); } .stats__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); text-align: center; } .stat__num { font: var(--weight-xl) clamp(var(--text-xl), 6vw, calc(var(--text-xl) * 1.8)) / 1 var(--font-display); color: rgb(var(--primary-on-surface)); } .stat__label { color: rgb(var(--fg-2)); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: var(--space-2); } /* ───────────────────────── Modalities list ───────────────────────── */ .modalities { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .modalities li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: rgb(var(--bg-2)); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg); } .modalities li::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: rgb(var(--color-primary)); flex: none; } /* ───────────────────────── Insurance logo grid ───────────────────────── */ .insurers { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); } /* ───────────────────────── Forms ───────────────────────── */ .form { display: grid; gap: var(--space-5); } .field { display: grid; gap: var(--space-2); } .field > label { font: var(--weight-lg) var(--text-sm) / 1.2 var(--font-sans); } .field .req { color: rgb(var(--color-negative)); } .field input, .field select, .field textarea { font: var(--weight-base) var(--text-base) / var(--leading-base) var(--font-sans); color: rgb(var(--fg)); background: rgb(var(--bg)); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgb(var(--color-primary)); } .field .hint { color: rgb(var(--muted)); font-size: var(--text-sm); } .field .error { color: rgb(var(--color-negative)); font-size: var(--text-sm); } .field--invalid input, .field--invalid select, .field--invalid textarea { border-color: rgb(var(--color-negative)); } .consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: rgb(var(--fg-2)); } .consent input { width: auto; margin-top: .2em; } .form__status { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); } .form__status[data-kind="error"] { background: rgb(var(--color-negative) / .1); color: rgb(var(--color-negative)); } .form__status[data-kind="ok"] { background: rgb(var(--positive-surface, var(--primary-surface))); color: rgb(var(--primary-on-surface)); } .form-embed-note { color: rgb(var(--muted)); font-size: var(--text-sm); border-left: var(--stroke-thick) solid var(--line); padding-left: var(--space-4); } /* ───────────────────────── CTA bands ───────────────────────── */ .band { background: rgb(var(--bg-2)); border-block: var(--stroke-hairline) solid var(--line); } .bigcta { background: rgb(var(--color-primary)); color: rgb(var(--on-primary)); border-radius: var(--radius-2xl); padding: clamp(var(--space-8), 6vw, calc(var(--space-10) * 1.4)); text-align: center; } .bigcta h2 { color: rgb(var(--on-primary)); } .bigcta p { color: rgb(var(--on-primary) / .85); margin-top: var(--space-3); } .bigcta .btn { margin-top: var(--space-6); } /* ───────────────────────── Prose (R10 subset — articles, legal, bios) ───────────────────────── */ .prose { max-width: 68ch; } .prose > * + * { margin-top: var(--space-5); } .prose h2 { margin-top: var(--space-10); } .prose h3 { margin-top: var(--space-8); } .prose ul, .prose ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); } .prose blockquote { border-left: var(--stroke-heavy) solid rgb(var(--color-primary)); padding-left: var(--space-5); color: rgb(var(--fg-2)); font-style: italic; } .prose figure { margin: 0; } .prose figcaption { color: rgb(var(--muted)); font-size: var(--text-sm); margin-top: var(--space-2); } .callout { background: rgb(var(--primary-surface)); border-radius: var(--radius-lg); padding: var(--space-5); color: rgb(var(--primary-on-surface)); } /* ───────────────────────── FAQ accordion (native
    ) ───────────────────────── */ .faq { display: grid; gap: var(--space-3); } .faq details { border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg); background: rgb(var(--bg-2)); } .faq summary { cursor: pointer; padding: var(--space-4) var(--space-5); font: var(--weight-lg) var(--text-lg) / 1.3 var(--font-display); display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: rgb(var(--color-primary)); font-size: var(--text-xl); flex: none; } .faq details[open] summary::after { content: "\2013"; } .faq__body { padding: 0 var(--space-5) var(--space-5); color: rgb(var(--fg-2)); } /* ───────────────────────── Footer ───────────────────────── */ .site-footer { border-top: var(--stroke-hairline) solid var(--line); background: rgb(var(--bg-2)); color: rgb(var(--fg-2)); } .site-footer__inner { padding-block: clamp(var(--space-8), 6vw, calc(var(--space-10) * 1.4)); display: grid; gap: var(--space-8); grid-template-columns: 1fr; } @media (min-width: 640px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1.4fr; } } .site-footer__inner > div { min-width: 0; } .site-footer h2 { font: var(--weight-lg) var(--text-sm) / 1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgb(var(--muted)); margin-bottom: var(--space-4); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .site-footer a { color: rgb(var(--fg-2)); } .site-footer a:hover { color: rgb(var(--color-primary)); opacity: 1; } .footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); } .footer-hours { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); gap: var(--space-1) var(--space-4); font-size: var(--text-sm); } .footer-legal { border-top: var(--stroke-hairline) solid var(--line); padding-block: var(--space-4); color: rgb(var(--muted)); font-size: var(--text-sm); } /* ───────────────────────── Sticky mobile call bar ───────────────────────── */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header); display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: rgb(var(--bg) / .95); backdrop-filter: blur(var(--blur-card)); border-top: var(--stroke-hairline) solid var(--line); } .callbar .btn { flex: 1; } @media (min-width: 680px) { .callbar { display: none; } } body { padding-bottom: calc(var(--space-10) + var(--space-6)); } @media (min-width: 680px) { body { padding-bottom: 0; } } /* Section tint helper for alternating bands */ .tint { background: rgb(var(--bg-2)); } /* ───────────────────────── Small layout affordances (replace inline styles) ───────────────────────── Named, context-scoped rules — every value is a token; nothing hardcoded to re-skin cleanly. */ .stack > .btn:not(.cta-center), .stack-lg > .btn:not(.cta-center) { align-self: flex-start; } .stack > .btn.cta-center, .stack-lg > .btn.cta-center { align-self: center; } .eyebrow-head h2 { margin-top: var(--space-3); } .sec-head p + p { margin-top: var(--space-4); } .sec-head--split { max-width: none; align-items: flex-end; } .sec-head--split h2 { margin: 0; } .stats h2 { text-align: center; } .rating-band { gap: var(--space-6); } .rating-band__mark { gap: var(--space-4); } .ph--reviews { width: 10rem; aspect-ratio: 164 / 40; } .footer-about { margin-top: var(--space-4); max-width: 42ch; } /* Northeast Wellness Collective — corrections layer. convert.py appends this LAST to nwc.css. Never edit the generated bundle, and never edit ~/Downloads/Northeast Wellness/build: that build is the client's reference and stays as it is. */ /* ── 1. Restored photography ────────────────────────────────────────────────── `repair.py` replaces the rebuild's `
    ` boxes with real ``s. These rules carry each `.ph` modifier's geometry across ONE FOR ONE — same aspect ratio, same radius, same width — so putting the photographs back does not move a single element on the page. The differences are only the ones a replaced element needs: - `object-fit: cover`, because `.ph` was an empty grid box and an is not; - no `::after`, because the "Photo pending" label was the placeholder saying so, and a replaced element cannot render one anyway; - a `--bg-3` fill rather than the `.ph` gradient, so a slow connection shows a neutral plate instead of a teal wash that reads like part of the design. */ .photo { display: block; width: 100%; aspect-ratio: 4 / 3; /* mirrors `.ph` */ object-fit: cover; background: rgb(var(--bg-3)); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-xl); overflow: hidden; } .photo--portrait { aspect-ratio: 3 / 4; } .photo--square { aspect-ratio: 1 / 1; } .photo--wide { aspect-ratio: 16 / 9; } .photo--avatar { aspect-ratio: 1 / 1; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); } /* An insurer's logo is artwork on a plate, not a photograph: contain it, never crop it. */ .photo--logo { aspect-ratio: 5 / 2; object-fit: contain; background: rgb(var(--bg-2)); border-radius: var(--radius-md); padding: var(--space-2); } /* ── 2. Placeholders that survived ──────────────────────────────────────────── A handful of `.ph` boxes have no counterpart on the live site (the contact page's map is an