@font-face { font-family: "Hubot Display"; src: url("/assets/fonts/hubot-sans-latin-var.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Mona Sans"; src: url("/assets/fonts/mona-sans-latin-var.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } :root { color-scheme: dark; --color-bay: #161512; --color-bay: oklch(17.5% 0.004 85); --color-bay-2: #1d1c18; --color-bay-2: oklch(20.6% 0.006 85); --color-bay-3: #26241f; --color-bay-3: oklch(24.6% 0.008 85); --color-bay-4: #312f28; --color-bay-4: oklch(29% 0.01 85); --color-rule: #3c3931; --color-rule: oklch(33.4% 0.012 85); --color-rule-2: #2b2924; --color-rule-2: oklch(27.4% 0.008 85); --color-ink: #f1ece0; --color-ink: oklch(94.3% 0.016 88); --color-ink-2: #cbc4b4; --color-ink-2: oklch(81.6% 0.02 88); --color-muted: #a39c8c; --color-muted: oklch(69.5% 0.02 88); --color-gold: #d6bf86; --color-gold: oklch(80.5% 0.075 89); --color-gold-hi: #f1e4b3; --color-gold-hi: oklch(91.5% 0.068 95); --color-gold-deep: #a88c4b; --color-gold-deep: oklch(64.5% 0.085 85); --color-gold-wash: #2b2618; --color-gold-wash: oklch(26.5% 0.03 90); --color-on-gold: #1a1711; --color-on-gold: oklch(19.5% 0.012 85); --color-focus: #f3d77e; --color-focus: oklch(88% 0.12 92); --color-light: #fbf7ec; --color-light: oklch(97.6% 0.014 90); --color-glass: #0d0d0b; --color-glass: oklch(13.5% 0.003 90); --color-glass-clear: #4b4a43; --color-glass-clear: oklch(41% 0.01 95); --color-satin: #24231f; --color-satin: oklch(24.5% 0.006 90); --wrap-gloss-black: #0e0e0d; --wrap-gloss-black: oklch(14.5% 0.002 90); --wrap-satin-black: #24231f; --wrap-satin-black: oklch(24.5% 0.006 90); --wrap-matte-gray: #5d5c58; --wrap-matte-gray: oklch(47% 0.006 90); --wrap-gloss-red: #8f1f22; --wrap-gloss-red: oklch(40% 0.14 25); --wrap-satin-blue: #24405f; --wrap-satin-blue: oklch(36% 0.07 250); --wrap-chrome: #b9b8b2; --wrap-chrome: oklch(78% 0.008 95); --color-error: #f08a72; --color-error: oklch(73% 0.13 35); --color-ok: #8fd39f; --color-ok: oklch(81% 0.1 150); --color-scrim: rgb(9 8 6 / 0.66); --color-shadow: rgb(0 0 0 / 0.45); --color-glow: rgb(251 247 236 / 0.55); --gradient-bay: radial-gradient(120% 80% at 70% 0%, var(--color-bay-2) 0%, var(--color-bay) 62%); --gradient-gold: linear-gradient(180deg, var(--color-gold-hi) 0%, var(--color-gold) 46%, var(--color-gold-deep) 78%, var(--color-gold-hi) 100%); --gradient-fade: linear-gradient(180deg, transparent 0%, var(--color-bay) 100%); --gradient-spill: radial-gradient(55% 90% at 50% 10%, rgb(251 247 236 / 0.09) 0%, transparent 72%); --font-display: "Hubot Display", "Mona Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Mona Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; --stretch-display: 114%; --stretch-label: 106%; --text-display: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); --text-3xl: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); --text-2xl: clamp(1.4rem, 1.2rem + 0.75vw, 1.85rem); --text-xl: 1.3rem; --text-lg: 1.15rem; --text-md: 1.0625rem; --text-sm: 0.9375rem; --text-xs: 0.8125rem; --leading-tight: 1.06; --leading-snug: 1.28; --leading-body: 1.62; --measure: 62ch; --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: 4rem; --space-3xl: 6rem; --gutter: clamp(1rem, 4vw, 2.5rem); --page-max: 78rem; --section-y: clamp(4rem, 2.6rem + 5vw, 7rem); --radius-sm: 6px; --radius-md: 12px; --radius-pill: 999px; --rule: 1px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-light: 900ms; --z-raised: 10; --z-bar: 40; --z-header: 50; --z-sheet: 60; --z-menu: 70; } *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; background: var(--color-bay); } body { margin: 0; overflow-x: clip; background: var(--color-bay); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); font-weight: 380; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--color-gold); text-underline-offset: 0.22em; text-decoration-thickness: 1px; } a:hover { color: var(--color-gold-hi); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--color-gold); color: var(--color-on-gold); } [hidden] { display: none !important; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 700; font-style: normal; line-height: var(--leading-tight); letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; color: var(--color-ink); } h1 { font-size: var(--text-display); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: -0.01em; } h4 { font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: 0; } p { margin: 0; } p + p { margin-top: var(--space-sm); } ul, ol { margin: 0; padding: 0; } strong { font-weight: 640; color: var(--color-ink); } .lead { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; } .muted { color: var(--color-muted); } .small { font-size: var(--text-sm); } .num { font-variant-numeric: tabular-nums lining-nums; } .gold { color: var(--color-gold); } .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; } .skip { position: absolute; left: var(--space-sm); top: -4rem; z-index: 100; background: var(--color-gold); color: var(--color-on-gold); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; } .skip:focus { top: var(--space-sm); color: var(--color-on-gold); } .wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); content-visibility: auto; contain-intrinsic-size: auto 60rem; } .section:has([data-quote]) { contain-intrinsic-size: auto 130rem; } .section.stage { content-visibility: visible; } @media (max-width: 60rem) { .section:has([data-quote]) { contain-intrinsic-size: auto 165rem; } } .section--raised { background: var(--color-bay-2); } .section--tight { padding-block: calc(var(--section-y) * 0.6); } .section-head { display: grid; gap: var(--space-sm); max-width: 46rem; margin-bottom: var(--space-xl); } .section-head p { color: var(--color-ink-2); font-size: var(--text-lg); } .label { font-family: var(--font-body); font-stretch: var(--stretch-label); font-size: var(--text-xs); font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); } .prose { max-width: var(--measure); } .prose p { color: var(--color-ink-2); } .prose p:first-child { color: var(--color-ink); font-size: var(--text-lg); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 3rem; padding: 0.75em 1.35em; border: var(--rule) solid transparent; border-radius: var(--radius-sm); font-family: var(--font-body); font-stretch: var(--stretch-label); font-weight: 640; font-size: var(--text-md); line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn--sm { min-height: 2.5rem; padding: 0.5em 1em; font-size: var(--text-sm); } .btn--gold { background: var(--color-gold); color: var(--color-on-gold); } .btn--gold:hover { background: var(--color-gold-hi); color: var(--color-on-gold); } .btn--line { border-color: var(--color-rule); color: var(--color-ink); background: transparent; } .btn--line:hover { border-color: var(--color-gold); color: var(--color-gold-hi); background: var(--color-gold-wash); } .btn .icon { width: 1.2em; height: 1.2em; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; text-decoration: none; white-space: nowrap; } .link-arrow .icon { transition: transform var(--dur-short) var(--ease-out); } .link-arrow:hover .icon { transform: translateX(3px); } .chip { display: inline-flex; align-items: center; gap: 0.45em; min-height: 2.5rem; padding: 0.4em 1em; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-bay-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 560; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } .chip:hover { border-color: var(--color-gold); color: var(--color-ink); } .chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-on { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-on-gold); } .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header); height: 0; } .site-header__bar { position: relative; margin-inline: auto; max-width: calc(var(--page-max) + 2 * var(--gutter)); display: flex; align-items: center; gap: var(--space-md); min-height: 4.5rem; padding-inline: var(--gutter); border: var(--rule) solid transparent; border-radius: 0; transition: max-width var(--dur-long) var(--ease-out), margin-top var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), border-radius var(--dur-long) var(--ease-out), min-height var(--dur-long) var(--ease-out); } .site-header.is-scrolled .site-header__bar { max-width: 68rem; margin-top: var(--space-xs); min-height: 3.75rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-bay-2) 88%, transparent); border-color: var(--color-rule); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); } .site-header__logo { display: block; flex: none; line-height: 0; } .logo { height: 3rem; width: auto; transition: height var(--dur-long) var(--ease-out); } .site-header.is-scrolled .logo { height: 2.5rem; } .site-nav { margin-inline: auto; } .site-nav ul { display: flex; gap: clamp(0.9rem, 1.8vw, 1.9rem); list-style: none; } .site-nav a { position: relative; display: block; padding-block: 0.4rem; color: var(--color-ink-2); font-weight: 520; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-ink); } .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); } .site-header__actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; } .site-nav + .site-header__actions { margin-left: 0; } .tel-link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--color-ink); font-weight: 600; text-decoration: none; font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } .tel-link:hover { color: var(--color-gold-hi); } .lang { display: inline-flex; align-items: center; gap: 0.3em; min-height: 2.5rem; padding-inline: 0.5em; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .lang:hover { color: var(--color-gold-hi); } .menu-btn { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-bay-2); color: var(--color-ink); cursor: pointer; } .menu-btn .icon { width: 1.4rem; height: 1.4rem; } main { padding-top: 4.5rem; } @media (max-width: 68rem) { .site-nav, .tel-link span { display: none; } .menu-btn { display: inline-flex; } .site-nav + .site-header__actions { margin-left: auto; } } @media (max-width: 40rem) { .site-header__bar { gap: var(--space-xs); min-height: 4rem; } .logo { height: 2.5rem; } .site-header .lang, .site-header .tel-link { display: none; } .site-header.is-scrolled .site-header__bar { margin-top: var(--space-2xs); margin-inline: var(--space-2xs); } main { padding-top: 4rem; } } .menu { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; gap: var(--space-lg); padding: calc(env(safe-area-inset-top, 0px) + var(--space-sm)) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--space-lg)); background: var(--color-bay); overflow-y: auto; } .menu__top { display: flex; align-items: center; justify-content: space-between; } .menu__logo .logo { color: var(--color-gold); height: 2.75rem; } .menu nav ul { list-style: none; display: grid; gap: var(--space-2xs); } .menu nav a { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) 0; border-bottom: var(--rule) solid var(--color-rule-2); font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--text-2xl); color: var(--color-ink); text-decoration: none; } .menu nav a[aria-current="page"] { color: var(--color-gold); } .menu__services { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .menu__foot { margin-top: auto; display: grid; gap: var(--space-xs); } .menu__foot .btn { width: 100%; } .field { display: grid; gap: var(--space-3xs); } .field label, .field legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); padding: 0; } .field .hint { font-size: var(--text-xs); color: var(--color-muted); } .input, .select, .textarea { width: 100%; min-height: 3rem; padding: 0.7em 0.9em; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-bay); color: var(--color-ink); outline: 2px solid transparent; outline-offset: 1px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); } .input::placeholder, .textarea::placeholder { color: var(--color-muted); } .input:hover, .select:hover, .textarea:hover { background: var(--color-bay-2); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); } .textarea { min-height: 7rem; resize: vertical; } .field.is-invalid .input, .field.is-invalid .textarea { border-color: var(--color-error); } .field__error { color: var(--color-error); font-size: var(--text-sm); } .choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .choice { position: relative; } .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .choice span { display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem; padding: 0.45em 0.95em; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-bay); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 560; white-space: nowrap; } .choice input:checked + span { border-color: var(--color-gold); color: var(--color-ink); background: var(--color-gold-wash); } .choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; } .honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .faq { display: grid; border-top: var(--rule) solid var(--color-rule); max-width: 52rem; } .faq__item { border-bottom: var(--rule) solid var(--color-rule); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 650; font-size: var(--text-lg); cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary .icon { color: var(--color-gold); transition: transform var(--dur-short) var(--ease-out); } .faq__item[open] summary .icon { transform: rotate(45deg); } .faq__item p { padding-bottom: var(--space-md); color: var(--color-ink-2); max-width: 64ch; } .rail__dots { display: none; } @media (max-width: 60rem) { .rail { display: grid !important; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); grid-template-columns: none !important; gap: var(--space-sm) !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; min-width: 0; } .rail__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-sm); } .rail__dots i { width: 0.5rem; height: 0.5rem; background: var(--color-rule); transform: rotate(45deg); transition: background-color var(--dur-short) var(--ease-out); } .rail__dots i.is-on { background: var(--color-gold); } } .site-footer { border-top: var(--rule) solid var(--color-rule-2); padding-block: var(--space-2xl) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); } .site-footer__statement { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: -0.02em; max-width: 24ch; color: var(--color-ink); text-wrap: balance; } .site-footer__statement span { color: var(--color-gold); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); } .site-footer h2 { font-family: var(--font-body); font-stretch: var(--stretch-label); font-size: var(--text-xs); font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-xs); } .site-footer address { font-style: normal; display: grid; gap: var(--space-3xs); color: var(--color-ink-2); } .site-footer ul { list-style: none; display: grid; gap: var(--space-3xs); } .site-footer a { color: var(--color-ink-2); text-decoration: none; } .site-footer a:hover { color: var(--color-gold-hi); } .site-footer .logo { height: 3.25rem; color: var(--color-gold); } .site-footer__social { display: flex; gap: var(--space-2xs); margin-top: var(--space-sm); } .site-footer__social a { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: var(--rule) solid var(--color-rule); border-radius: var(--radius-sm); } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); } .site-footer__base ul { display: flex; flex-wrap: wrap; gap: var(--space-md); } .hours { display: grid; gap: 0.15rem; font-size: var(--text-sm); } .hours div { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-ink-2); } .hours .is-today { color: var(--color-gold); font-weight: 600; } @media (max-width: 60rem) { .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 40rem) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } } .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: none; gap: var(--space-2xs); padding: var(--space-2xs) var(--gutter) calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px)); background: color-mix(in oklch, var(--color-bay-2) 94%, transparent); border-top: var(--rule) solid var(--color-rule); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(110%); transition: transform var(--dur-long) var(--ease-out); } .action-bar.is-on { transform: none; } .action-bar .btn { flex: 1 1 0; min-width: 0; min-height: 2.9rem; padding-inline: 0.4em; font-size: var(--text-sm); gap: 0.35em; } @media (max-width: 60rem) { .action-bar { display: flex; } .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; } } .hero { --ceiling-top: 4.5rem; --ceiling-h: clamp(8.5rem, 3rem + 13vw, 15rem); margin-top: calc(-1 * var(--ceiling-top)); } .ceiling { position: absolute; inset: var(--ceiling-top) 0 auto 0; height: var(--ceiling-h); overflow: hidden; pointer-events: none; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent, var(--color-bay) 14%, var(--color-bay) 50%, transparent 92%); mask-image: linear-gradient(180deg, transparent, var(--color-bay) 14%, var(--color-bay) 50%, transparent 92%); } .ceiling::before { content: ""; position: absolute; inset: 0; background: var(--gradient-spill); } .hexlights { position: relative; display: block; width: 100%; height: 100%; } .hexlights polygon { fill: var(--color-light); opacity: var(--o, 0.8); } .js .hexlights polygon { animation: tube-on 900ms var(--ease-out) var(--d, 0ms) both; } .js .ceiling::before { animation: spill-on 1600ms var(--ease-out) 200ms both; } @keyframes tube-on { 0% { opacity: 0.03; } 14% { opacity: var(--o, 0.8); } 24% { opacity: 0.1; } 40%, 100% { opacity: var(--o, 0.8); } } @keyframes spill-on { from { opacity: 0; } } @media (max-width: 60rem) { .js .hexlights polygon { animation: none; } .js .ceiling { animation: spill-on 1200ms var(--ease-out) 150ms both; } } @media (prefers-reduced-motion: reduce) { .js .hexlights polygon, .js .ceiling::before, .js .ceiling { animation: none; } } .hero { position: relative; isolation: isolate; padding-block: calc(var(--ceiling-top) + 1.5rem) calc(var(--section-y) * 0.5); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .hero__copy { display: grid; gap: var(--space-md); align-content: center; } .hero h1 { max-width: 15ch; } .hero__lead { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 44ch; } .rating { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; } .rating:hover { color: var(--color-ink); } .rating__stars { display: inline-flex; gap: 2px; color: var(--color-gold); } .rating__stars .icon { width: 1rem; height: 1rem; } .rating strong { font-variant-numeric: tabular-nums; } .dealer { display: flex; width: fit-content; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; } .dealer:hover { color: var(--color-ink); } .dealer__logo { display: inline-flex; padding-right: var(--space-xs); border-right: 1px solid currentColor; color: var(--color-ink); } .dealer__logo svg { width: 4.5rem; height: auto; } .hero__media { position: relative; justify-self: end; width: min(100%, 27rem); } .reel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bay-3); } .reel video, .reel img { width: 100%; height: 100%; object-fit: cover; } .reel video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); } .reel.is-playing video { opacity: 1; } .reel__toggle { position: absolute; right: var(--space-2xs); bottom: var(--space-2xs); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: var(--rule) solid var(--color-rule); border-radius: 50%; background: color-mix(in oklch, var(--color-bay) 70%, transparent); color: var(--color-ink); cursor: pointer; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); } .reel:hover .reel__toggle, .reel__toggle:focus-visible, .reel__toggle[aria-pressed="true"] { opacity: 1; } @media (hover: none) { .reel__toggle { opacity: 0.85; } } .reel__caption { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); display: flex; gap: 0.4em; align-items: flex-start; } .reel__caption .icon { color: var(--color-gold); flex: none; margin-top: 0.15em; } @media (max-width: 60rem) { .hero { padding-top: calc(var(--ceiling-top) + var(--ceiling-h) * 0.62); } .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__media { justify-self: start; width: min(100%, 24rem); } } @media (max-width: 40rem) { .hero { --ceiling-top: 4rem; } .hero__media { width: 100%; } } .car { width: 100%; height: auto; overflow: visible; } .car__shadow { fill: var(--color-glass); opacity: 0.8; } .car__zone { fill: var(--color-gold); fill-opacity: 0; transition: fill-opacity var(--dur-long) var(--ease-out), fill var(--dur-long) var(--ease-out); } .car__glass { fill: var(--color-glass-clear); fill-opacity: 0.38; transition: fill var(--dur-long) var(--ease-out), fill-opacity var(--dur-long) var(--ease-out); } .car__interior path { fill: none; stroke: var(--color-ink-2); stroke-width: 1.6; opacity: 0.45; vector-effect: non-scaling-stroke; transition: opacity var(--dur-long) var(--ease-out), stroke var(--dur-long) var(--ease-out); } .car__line, .car__line path, .car__wheel .car__line { fill: none; stroke: var(--color-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .car__line--fine { stroke-width: 1.4 !important; opacity: 0.75; } .car__wheel .car__zone { fill-opacity: 0; } .car__glint path { fill: none; stroke: var(--color-light); stroke-width: 2.6; stroke-linecap: round; opacity: 0.55; vector-effect: non-scaling-stroke; } .car__fob rect, .car__fob circle { fill: var(--color-bay-3); stroke: var(--color-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .car__signal, .car__exhaust path { fill: none; stroke: var(--color-light); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; } .car__fob, .car__exhaust, .car__swirls, .car__beads { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); } .car__swirls circle { fill: none; stroke: var(--color-light); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .car__beads circle { fill: var(--color-light); fill-opacity: 0.85; } .car__trim { fill: none; stroke: var(--color-ink-2); stroke-width: 3; stroke-linecap: round; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity var(--dur-long) var(--ease-out), stroke var(--dur-long) var(--ease-out); } .car [data-zone="lights"] { fill: var(--color-light); } .car[data-tint="all"] .car__glass:not([data-zone="windshield"]), .car[data-tint="front"] .car__glass[data-zone="glass-front"] { fill: var(--color-glass); fill-opacity: var(--tint, 0.82); } .car[data-tint="all"] .car__interior path { opacity: calc(0.5 - var(--tint, 0.82) * 0.45); } .car[data-strip] .car__glass[data-zone="windshield"] { fill: var(--color-glass); fill-opacity: 0.8; } .car[data-ppf="bumper"] [data-zone="bumper-front"], .car[data-ppf="partial"] [data-zone="front-partial"], .car[data-ppf="partial"] [data-zone="mirrors"], .car[data-ppf="full"] [data-zone="front-full"], .car[data-ppf="full"] [data-zone="mirrors"], .car[data-ppf="whole"] [data-zone="paint"], .car[data-ppf-rear] [data-zone="bumper-rear"] { fill: var(--color-light); fill-opacity: 0.2; } .car[data-ceramic] [data-zone="paint"] { fill: var(--color-gold); fill-opacity: 0.1; } .car[data-ceramic] .car__beads, .car[data-ceramic] .car__glint path { opacity: 1; } .car[data-correction] .car__swirls { opacity: var(--swirls, 0.9); } .car[data-detail] .car__interior path { stroke: var(--color-gold-hi); opacity: 1; } .car[data-detail] .car__glass { fill-opacity: 0.18; } .car[data-wrap] [data-zone="paint"] { fill: var(--wrap, var(--color-satin)); fill-opacity: 0.92; } .car[data-wrap="chrome"] [data-zone="paint"] { fill-opacity: 0.55; } .car[data-trim] .car__trim { opacity: 1; stroke: var(--color-bay); } .car .car__trim { opacity: 0.85; } .car[data-remote] .car__fob, .car[data-remote] .car__exhaust { opacity: 1; } .car[data-remote] [data-zone="lights"] { fill-opacity: 0.85; } .car[data-remote] .car__signal { animation: signal 1.6s var(--ease-out) infinite; } .car[data-remote] .car__signal:nth-of-type(2) { animation-delay: 0.2s; } .car[data-remote] .car__signal:nth-of-type(3) { animation-delay: 0.4s; } @keyframes signal { 0% { opacity: 0; } 30% { opacity: 1; } 70%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .car[data-remote] .car__signal { animation: none; opacity: 1; } } .stage { position: relative; } .stage__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); } .stage__car { position: sticky; top: 18vh; align-self: start; display: grid; gap: var(--space-md); } .stage__now { display: flex; align-items: baseline; gap: var(--space-xs); min-height: 2rem; color: var(--color-ink-2); } .stage__now strong { font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: var(--text-xl); color: var(--color-gold); } .stage__chapters { display: grid; gap: 0; list-style: none; } .chapter { min-height: clamp(20rem, 55vh, 32rem); display: grid; align-content: center; gap: var(--space-sm); padding-block: var(--space-xl); border-top: var(--rule) solid var(--color-rule-2); opacity: 0.78; transition: opacity var(--dur-long) var(--ease-out); } .chapter.is-active { opacity: 1; } .chapter:first-child { border-top: 0; } .chapter h3 { font-size: var(--text-2xl); } .chapter p { color: var(--color-ink-2); max-width: 40ch; } .chapter__price { font-variant-numeric: tabular-nums; color: var(--color-ink); font-weight: 600; } .chapter__price span { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); } .chapter__links { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; } .no-js .chapter { opacity: 1; } @media (max-width: 60rem) { .stage__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .stage__car { position: static; } .stage__chapters.rail { grid-auto-columns: min(82%, 20rem); } .chapter { min-height: 0; padding: var(--space-md); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-bay-2); opacity: 1; align-content: start; } .chapter:first-child { border-top: var(--rule) solid var(--color-rule); } .chapter.is-active { border-color: var(--color-gold-deep); } } .quote { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .quote__vehicles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); } .vehicle { display: grid; justify-items: center; gap: var(--space-3xs); padding: var(--space-xs) var(--space-2xs); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-bay-2); color: var(--color-ink-2); cursor: pointer; font-size: var(--text-sm); font-weight: 560; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .vehicle svg { width: 100%; max-width: 6.5rem; height: auto; aspect-ratio: 162 / 62; } .vehicle svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } .vehicle:hover { border-color: var(--color-gold-deep); color: var(--color-ink); } .vehicle[aria-pressed="true"] { border-color: var(--color-gold); background: var(--color-gold-wash); color: var(--color-gold-hi); } .quote__board { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-lg); align-items: start; } .quote__map { position: relative; } .quote__car { position: relative; } .hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.45em; min-height: 2.75rem; padding: 0.35em 0.85em 0.35em 0.45em; border: var(--rule) solid var(--color-gold-deep); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-bay) 82%, transparent); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } .hotspot__dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-gold); color: var(--color-on-gold); } .hotspot__dot .icon { width: 0.95rem; height: 0.95rem; } .hotspot:hover, .hotspot[aria-expanded="true"] { border-color: var(--color-gold); background: var(--color-gold-wash); } .hotspot.has-picks .hotspot__dot { background: var(--color-ok); } .quote__panel { margin-top: var(--space-sm); border: var(--rule) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-bay-2); padding: var(--space-md); display: grid; gap: var(--space-md); } .quote__panel h3 { font-size: var(--text-xl); } .quote__panel .group { display: grid; gap: var(--space-2xs); border: 0; margin: 0; padding: 0; } .quote__panel legend { font-size: var(--text-xs); font-weight: 640; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3xs); padding: 0; } .opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center; padding: var(--space-xs); border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-bay); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); } .opt:hover { border-color: var(--color-rule); } .opt input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-gold); margin: 0; } .opt__name { font-size: var(--text-sm); font-weight: 560; color: var(--color-ink); } .opt__name small { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); } .opt__price { font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-gold); white-space: nowrap; } .opt:has(input:checked) { border-color: var(--color-gold-deep); background: var(--color-gold-wash); } .shades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3xs); } .shade { display: grid; gap: 0.2rem; justify-items: center; padding: var(--space-2xs) 0; border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-bay); cursor: pointer; font-size: var(--text-xs); color: var(--color-ink-2); } .shade i { width: 100%; max-width: 2.6rem; height: 1.6rem; border-radius: 3px; background: var(--color-glass); opacity: var(--o); outline: var(--rule) solid var(--color-rule); } .shade[aria-pressed="true"] { border-color: var(--color-gold); color: var(--color-ink); } .shade.is-illegal { color: var(--color-muted); } .shade-note { font-size: var(--text-sm); color: var(--color-ink-2); } .shade-note.is-warn { color: var(--color-error); } .summary { border: var(--rule) solid var(--color-gold-deep); border-radius: var(--radius-md); padding: var(--space-md); display: grid; gap: var(--space-sm); background: var(--color-bay-2); } .summary__list { list-style: none; display: grid; gap: var(--space-2xs); } .summary__list li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); } .summary__list li span:last-child { color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding-top: var(--space-xs); border-top: var(--rule) solid var(--color-rule); } .summary__total strong { font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: var(--text-2xl); color: var(--color-gold); font-variant-numeric: tabular-nums; } .summary__empty { color: var(--color-muted); font-size: var(--text-sm); } .summary__note { color: var(--color-muted); font-size: var(--text-xs); } @media (max-width: 60rem) { .quote__vehicles { grid-template-columns: repeat(5, minmax(5.5rem, 1fr)); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; } .quote__board { grid-template-columns: minmax(0, 1fr); } .hotspot { padding-right: 0.45em; } .hotspot__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .request { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .request__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); } .request__grid .field--wide { grid-column: 1 / -1; } .request__status { font-size: var(--text-sm); min-height: 1.5em; } .request__status.is-ok { color: var(--color-ok); } .request__status.is-error { color: var(--color-error); } .request__alt { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; color: var(--color-muted); font-size: var(--text-sm); } .photos-input { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; } .photos-input__list { display: flex; gap: var(--space-2xs); } .photos-input__list img { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: var(--radius-sm); border: var(--rule) solid var(--color-rule); } @media (max-width: 40rem) { .request__grid { grid-template-columns: minmax(0, 1fr); } } .svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm); } .svc { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-bay-2); overflow: hidden; color: inherit; text-decoration: none; grid-column: span 4; transition: border-color var(--dur-short) var(--ease-out); } .svc:hover { border-color: var(--color-gold-deep); } .svc--wide { grid-column: span 8; } .svc__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bay-3); } .svc:not(.svc--wide) .svc__media { aspect-ratio: auto; min-height: 13rem; } .svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); } .svc:hover .svc__media img { transform: scale(1.03); } .svc__body { display: grid; gap: var(--space-2xs); padding: var(--space-md); align-content: start; } .svc__body h3 { font-size: var(--text-xl); } .svc__body p { color: var(--color-ink-2); font-size: var(--text-sm); } .svc__from { margin-top: var(--space-2xs); color: var(--color-gold); font-weight: 600; font-size: var(--text-sm); display: inline-flex; gap: 0.35em; align-items: center; } @media (max-width: 60rem) { .svc, .svc--wide { grid-column: auto; } } .price-nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-xl); } .price-block { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); padding-block: var(--space-xl); border-top: var(--rule) solid var(--color-rule-2); } .price-block__head { display: grid; gap: var(--space-xs); align-content: start; } .price-block__head p { color: var(--color-ink-2); font-size: var(--text-sm); } .prices { list-style: none; display: grid; gap: 0; } .price { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; align-items: baseline; gap: var(--space-xs); padding-block: var(--space-xs); } .price + .price { border-top: var(--rule) solid var(--color-rule-2); } .price__name { font-weight: 560; } .price__name small { display: block; color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); } .price__rule { border-bottom: 1px dotted var(--color-rule); transform: translateY(-0.3em); } .price__value { font-variant-numeric: tabular-nums; color: var(--color-gold); font-weight: 600; white-space: nowrap; } .price__value small { color: var(--color-muted); font-weight: 400; } .pkg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } .pkg { border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-bay-2); padding: var(--space-md); display: grid; gap: var(--space-sm); align-content: start; } .pkg h3 { font-size: var(--text-xl); } .pkg__sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); } .pkg__sizes div { display: flex; justify-content: space-between; gap: var(--space-xs); color: var(--color-ink-2); } .pkg__sizes span:last-child { color: var(--color-gold); font-variant-numeric: tabular-nums; font-weight: 600; } .pkg ul { list-style: none; display: grid; gap: 0.2rem; font-size: var(--text-sm); color: var(--color-ink-2); } .pkg ul li { display: flex; gap: 0.5em; } .pkg ul li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin-top: 0.55em; background: var(--color-gold-deep); transform: rotate(45deg); } .pkg__from { font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: var(--text-2xl); color: var(--color-gold); font-weight: 700; } .pkg__from small { font-family: var(--font-body); font-stretch: 100%; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; } .rs-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .rs-table th, .rs-table td { text-align: left; padding: var(--space-xs) var(--space-2xs); border-bottom: var(--rule) solid var(--color-rule-2); } .rs-table th { color: var(--color-muted); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; } .rs-table td.num { color: var(--color-gold); font-weight: 600; white-space: nowrap; } .table-scroll { overflow-x: auto; } @media (max-width: 60rem) { .price-block { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .pkg-grid { grid-template-columns: minmax(0, 1fr); } } .reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); } .reels figure { margin: 0; } .reviews { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-xl); align-items: start; } .review-lead { margin: 0; display: grid; gap: var(--space-md); } .review-lead blockquote { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 600; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--color-ink); max-width: 30ch; } .review-lead figcaption, .review cite { font-style: normal; color: var(--color-muted); font-size: var(--text-sm); } .review-list { list-style: none; display: grid; gap: var(--space-sm); } .review { margin: 0; padding: var(--space-md); border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-bay-2); display: grid; gap: var(--space-xs); } .review blockquote { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); } .ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0; } .ba figure { margin: 0; position: relative; } .ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } .ba figcaption { position: static; margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); } @media (max-width: 60rem) { .reels { grid-template-columns: none; } .reviews { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } } .visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; } .visit__photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-bay-3); } .visit__photo img { width: 100%; height: 100%; object-fit: cover; } .visit__info { display: grid; gap: var(--space-md); } .visit__info address { font-style: normal; font-size: var(--text-lg); color: var(--color-ink); } .place-card { border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius-md); padding: var(--space-md); background: var(--color-bay-2); display: grid; gap: var(--space-2xs); } .place-card h3 { font-size: var(--text-lg); } .place-card p { color: var(--color-ink-2); font-size: var(--text-sm); } @media (max-width: 60rem) { .visit { grid-template-columns: minmax(0, 1fr); } } .svc-hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--space-2xl); } .svc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .svc-hero__copy { display: grid; gap: var(--space-md); } .svc-hero__copy h1 { font-size: var(--text-3xl); max-width: 18ch; } .facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: var(--space-md) 0; border-block: var(--rule) solid var(--color-rule-2); } .facts-row div { display: grid; gap: 0.15rem; } .facts-row dt { font-size: var(--text-xs); color: var(--color-muted); } .facts-row dd { margin: 0; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; } .svc-hero__car { position: relative; } .svc-hero__car .car { max-width: 40rem; margin-inline: auto; } .svc-hero__lottie { position: absolute; inset: 0; pointer-events: none; } .svc-hero__car.is-playing > .car { visibility: hidden; } .crumbs { padding-top: var(--space-md); font-size: var(--text-sm); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; color: var(--color-muted); } .crumbs li + li::before { content: "/"; margin-right: 0.4em; color: var(--color-rule); } .crumbs a { color: var(--color-muted); text-decoration: none; white-space: nowrap; } .crumbs a:hover, .crumbs a[aria-current="page"] { color: var(--color-ink-2); } .split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .split__media { display: grid; gap: var(--space-sm); } .steps { list-style: none; display: grid; gap: 0; counter-reset: step; max-width: 46rem; } .steps li { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-sm); padding-bottom: var(--space-lg); } .steps li::before { counter-increment: step; content: counter(step); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: var(--rule) solid var(--color-gold-deep); border-radius: 50%; font-weight: 640; color: var(--color-gold); font-variant-numeric: tabular-nums; } .steps li::after { content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: 0; width: 1px; background: var(--color-rule); } .steps li:last-child::after { display: none; } .steps p { padding-top: 0.55rem; color: var(--color-ink-2); } @media (max-width: 60rem) { .svc-hero__grid, .split { grid-template-columns: minmax(0, 1fr); } .facts-row { grid-template-columns: minmax(0, 1fr); } } .gallery-filter { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); } .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); } .gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bay-2); } .gallery img, .gallery video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .gallery figcaption { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); } @media (max-width: 60rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } .photo-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); } @media (max-width: 60rem) { .about-grid { grid-template-columns: minmax(0, 1fr); } } .law-table { width: 100%; border-collapse: collapse; } .law-table th, .law-table td { text-align: left; padding: var(--space-sm) var(--space-xs); border-bottom: var(--rule) solid var(--color-rule-2); vertical-align: top; } .law-table th { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; } .law-table td:last-child { color: var(--color-gold); font-weight: 600; } .simulator { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-lg); align-items: center; } @media (max-width: 60rem) { .simulator { grid-template-columns: minmax(0, 1fr); } } .cta-band { border: var(--rule) solid var(--color-gold-deep); border-radius: var(--radius-md); padding: clamp(1.5rem, 1rem + 3vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; background: var(--gradient-bay); } .cta-band h2 { font-size: var(--text-2xl); max-width: 26ch; } .cta-band p { color: var(--color-ink-2); margin-top: var(--space-2xs); } @media (max-width: 60rem) { .cta-band { grid-template-columns: minmax(0, 1fr); } } .notfound { padding-block: var(--space-3xl); display: grid; gap: var(--space-md); max-width: 40rem; }