/* G · Contrast, H · Evening and I · Balance — Joe's A + C combinations (25 Oct 2026).
   All three: C's dark petrol, Inter Tight typography and premium feel, with A's compact
   layouts (two-column steps with small photos, split garages section, quiet lists).
   G: C's full-bleed photo hero, alternating dark petrol and warm off-white sections (Joe's option 1).
   H: A's split hero (text, then a clear photo), dark throughout (Joe's option 2: dark green with A's layout).
   I: A's split hero, alternating sections.
   Isolated from designs A–F. */

html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) {
  --bg: #061F23;
  --bg-alt: var(--petrol);
  --fg: var(--ivory);
  --fg-soft: rgba(247, 245, 240, .72);
  --head: var(--ivory);
  --accent: var(--sage);
  --line: rgba(247, 245, 240, .14);
  --band-bg: var(--petrol);
  --band-fg: var(--ivory);
  --band-soft: rgba(247, 245, 240, .72);
  --band-line: rgba(247, 245, 240, .16);
  --btn-bg: var(--ivory);
  --btn-fg: var(--petrol);
  --btn-radius: 999px;
  --radius: 12px;
  --font-head: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --head-weight: 500;
  --head-track: -0.035em;
  --h1: clamp(40px, 6vw, 92px);
  --h2: clamp(30px, 3.6vw, 54px);
  --h3: 21px;
  --body: 16px;
  --pad: clamp(56px, 7vw, 104px);
  --wrap: 1320px;
  --img-filter: saturate(.78) brightness(.94) contrast(1.04);
  --mark-c: var(--ivory);
  --mark-h: var(--sage);
  --eyebrow: var(--sage);
}

/* G and I: warm off-white sections between the dark ones. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) :is(.steps, .garages-teaser, .planned, .story, .form-section, .benefits) {
  --bg: var(--ivory);
  --bg-alt: #EAE6DC;
  --fg: var(--charcoal);
  --fg-soft: #4E5A5B;
  --head: var(--petrol);
  --accent: var(--teal);
  --line: rgba(8, 47, 52, .14);
  --band-bg: #EFECE4;
  --band-fg: var(--petrol);
  --band-soft: #4E5A5B;
  --band-line: rgba(8, 47, 52, .14);
  --btn-bg: var(--petrol);
  --btn-fg: var(--ivory);
  --eyebrow: var(--teal);
  --img-filter: saturate(.84) contrast(1.03);
  background: var(--bg);
  color: var(--fg);
}
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) .garages-teaser { background: var(--band-bg); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) :is(.steps, .garages-teaser, .planned, .story, .form-section, .benefits) :is(.btn-ghost, .btn-outline) { color: var(--head); border-color: currentColor; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) :is(.steps, .garages-teaser, .planned, .story, .form-section, .benefits) :is(.btn-ghost, .btn-outline):hover { background: var(--head); color: var(--bg); border-color: var(--head); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) :is(.form-section, .benefits) .btn-primary:hover { background: var(--teal); border-color: var(--teal); color: var(--ivory); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) .step-cal { background: var(--petrol); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="i"]) .story + .form-section .form-grid { padding-top: var(--pad); }

/* Header, buttons and type shared by all three. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .header-inner { max-width: var(--wrap); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .main-nav a { color: var(--ivory); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .lang-switch a { color: rgba(247, 245, 240, .6); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .lang-switch a[aria-current] { color: var(--ivory); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .brand-tag { color: rgba(247, 245, 240, .65); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .btn { padding: 15px 22px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .btn-small { padding: 11px 17px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .btn-primary:hover { background: var(--sage); border-color: var(--sage); color: var(--petrol); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) :is(.btn-ghost, .btn-outline) { color: var(--ivory); border-color: rgba(247, 245, 240, .5); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) :is(.btn-ghost, .btn-outline):hover { background: var(--ivory); color: var(--petrol); border-color: var(--ivory); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .lead { color: rgba(247, 245, 240, .84); margin-top: 20px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .actions { margin-top: 32px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .ticks { margin-top: 32px; color: rgba(247, 245, 240, .78); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .ticks .icon { color: var(--sage); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .hero h1 { max-width: 11em; }

/* G: C's full-bleed photo hero with the header over it, no taller than needed. */
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .site-header { position: absolute; left: 0; right: 0; top: var(--picker-h); background: transparent; border-bottom: 1px solid rgba(247, 245, 240, .14); }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero { position: relative; display: flex; align-items: flex-end; min-height: min(760px, calc(100vh - var(--picker-h))); }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-page { min-height: min(520px, 70vh); }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media { position: absolute; inset: 0; }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media::before { display: none; }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 31, 35, .55) 0%, rgba(6, 31, 35, .08) 28%, rgba(6, 31, 35, .5) 60%, rgba(6, 31, 35, .96) 100%); }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media figcaption { display: none; }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-text { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 150px var(--gutter) clamp(44px, 5vw, 72px); }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .legal { padding-top: calc(84px + clamp(48px, 6vw, 88px)); }

/* H and I: A's split hero on dark petrol. */
html:is([data-design="h"], [data-design="i"]) .site-header { background: var(--bg); }
html:is([data-design="h"], [data-design="i"]) .hero { min-height: min(72vh, 680px); }
html:is([data-design="h"], [data-design="i"]) .hero-page { min-height: min(56vh, 520px); }
html:is([data-design="h"], [data-design="i"]) .hero-media { border-radius: 0; }
html:is([data-design="h"], [data-design="i"]) .hero-media::before { background: linear-gradient(180deg, rgba(6, 31, 35, 0) 60%, rgba(6, 31, 35, .5) 100%); }
html:is([data-design="h"], [data-design="i"]) .hero-text { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }

/* Search: continues the hero in G; its own petrol band in H and I. */
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .search-band { background: var(--bg); padding: 0 0 clamp(48px, 6vw, 80px); }
html:is([data-design="g"], [data-design="j"], [data-design="k"]) .search-head { border-top: 1px solid var(--line); padding-top: 40px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-head { margin-bottom: 24px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar { background: rgba(247, 245, 240, .06); color: var(--ivory); border: 1px solid rgba(247, 245, 240, .18); border-radius: 999px; padding: 8px 8px 8px 16px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar label { border-right-color: rgba(247, 245, 240, .14); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar input { color: var(--ivory); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar input::placeholder { color: rgba(247, 245, 240, .5); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar .icon { color: var(--sage); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-go { background: var(--ivory); color: var(--petrol); }

/* Steps: A's small photos, in a tighter frame. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .step-media { aspect-ratio: 4 / 5; margin-bottom: 14px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .step-no { margin-bottom: 10px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .cal-day { font-weight: 500; letter-spacing: -.04em; font-size: 64px; }
html[data-design="h"] .step-cal { background: var(--teal); }

/* App preview on petrol. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .app-preview { background: var(--petrol); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .ph-feature strong { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 500; letter-spacing: -.02em; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .phone { background: #000; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(168, 185, 174, .25); }

/* Garages: A's split, shorter. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .garages-teaser { min-height: 480px; }
html[data-design="h"] .garages-teaser { background: var(--bg); border-top: 1px solid var(--line); }

/* Values and planned updates: A's quiet lists. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .values { text-align: left; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .values h2 { margin: 0; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value-grid { margin-top: 48px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value .icon { color: var(--sage); width: 26px; height: 26px; margin-bottom: 16px; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .planned { padding: var(--pad) 0; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .planned-grid { border-top: 0; padding-top: 0; }
html[data-design="h"] .values { background: var(--petrol); }

/* Join: C's photo ending, without the extra height. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .join { min-height: 440px; align-items: flex-end; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .join::before { background: linear-gradient(0deg, rgba(6, 31, 35, .95) 0%, rgba(6, 31, 35, .45) 60%, rgba(6, 31, 35, .6) 100%); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .join-text h2 { font-size: clamp(34px, 5vw, 72px); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .btn-light:hover { color: var(--ivory); border-color: var(--ivory); }

/* Other pages. */
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .process { background: var(--petrol); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .benefit .icon { color: var(--accent); }
html[data-design="h"] .field input:not([type="checkbox"]):not([type="radio"]), html[data-design="h"] .field textarea { background: rgba(247, 245, 240, .04); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .site-footer { background: #030F11; }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .legal a { color: var(--sage); }
html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) :is(.legal-lang-note, .preview-note) { background: rgba(247, 245, 240, .06); border-left-color: var(--sage); }

@media (max-width: 1080px) {
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .menu-open .main-nav { background: var(--petrol); }
}

@media (max-width: 860px) {
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero { min-height: 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media { min-height: 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media img { object-position: 72% 30%; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-media::after { background: linear-gradient(180deg, rgba(6, 31, 35, .5) 0%, rgba(6, 31, 35, .1) 14%, rgba(6, 31, 35, .62) 28%, rgba(6, 31, 35, .9) 50%, rgba(6, 31, 35, .98) 100%); }
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-text { padding: 200px var(--gutter) 36px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .search-head { padding-top: 28px; }
  html:is([data-design="h"], [data-design="i"]) .hero-text { padding: 40px var(--gutter) 36px; }
  html:is([data-design="h"], [data-design="i"]) .hero-media { min-height: 230px; height: clamp(230px, 42vw, 320px); }
  html:is([data-design="h"], [data-design="i"]) .hero-page .hero-media { min-height: 200px; }
  html:is([data-design="h"], [data-design="i"]) .hero-media img { object-position: 70% 35%; }
  html:is([data-design="h"], [data-design="i"]) .hero-media figcaption { display: none; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar { border-radius: var(--radius); padding: 6px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar label { border-bottom-color: rgba(247, 245, 240, .14); }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .app-text { order: -1; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .app-grid { gap: 36px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .plain-list { margin-top: 22px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .plain-list li { padding: 12px 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .teaser-media { min-height: 230px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .teaser-media figcaption { display: none; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value-grid { margin-top: 28px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value { display: grid; grid-template-columns: 26px 1fr; column-gap: 16px; padding: 18px 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value:first-child { padding-top: 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value .icon { grid-row: span 2; margin: 2px 0 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .value p { margin-top: 4px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .planned-list { gap: 20px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .benefit-grid { margin-top: 32px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) :is(.benefit, .benefit:not(:nth-child(3n + 1))) { display: grid; grid-template-columns: 26px 1fr; column-gap: 16px; padding: 18px 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .benefit .icon { grid-row: span 2; width: 24px; height: 24px; margin: 2px 0 0; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .benefit p { margin-top: 4px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .join { min-height: 340px; }
}

@media (max-width: 560px) {
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .hero-text { padding-top: 180px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .hero .ticks { display: none; }
  /* Phone search: one field and the button; location and date come later in the app. */
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-note { display: none; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-head { margin-bottom: 18px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar { grid-template-columns: 1fr auto; border-radius: 999px; padding: 6px 6px 6px 8px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar label { border-bottom: 0; padding: 6px 10px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-bar label:nth-of-type(n+2) { display: none; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .search-go { width: 48px; height: 48px; border-radius: 999px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .phone { zoom: .76; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .step-list { row-gap: 28px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"], [data-design="h"], [data-design="i"]) .step h3 { font-size: 19px; }
  html:is([data-design="g"], [data-design="j"], [data-design="k"]) .legal { padding-top: calc(72px + 40px); }
}