/* ==========================================================================
   Dushi Rentals Curaçao — Willemstad

   REVISION 2026-09-23. The owner asked for two things: "poppier, and
   simpler". Read as more colour and more weight, with FEWER things on the
   page — so every change below either turns the volume up on something that
   was already there, or deletes something that was not helping a traveller
   pick a class and send a dated request. Nothing factual was removed: every
   rate, term, FAQ answer and add-on that was on the page is still on it.

   What went: the sticky utility bar (its number and hours are in the header,
   the hero, the contact list and the footer), six section eyebrows, the
   second photo strip and its heading, four footer columns, the boxes around
   the fee grid, the FAQ and the cards. Ceremony, in the sense of ../CLAUDE.md.

   TYPE SYSTEM — two faces, two jobs. No third one, ever.

     Archivo       Headings, the rate figures, buttons, nav. Signage. Weight
                   800 now carries the headings and the rates; 700 does the
                   rest. That is the "bolder", and it costs no new face.
     Public Sans   All running text, every label, every form control. Tabular
                   numerals, so the rate column and the dates line up without
                   a third face — the mistake that cost the TDS build its
                   review.

   COLOUR comes off their own material. The two hues that carry the page were
   SAMPLED out of files in img/originals/ with sharp, region by region, not
   picked by eye; the rest are derived from them and say so:

     ink        the black of the wordmark
     brand      SAMPLED #398EDC — the blue of the mural behind their own
                Chevrolet Sonic — darkened until white type holds 4.5:1
     hot        SAMPLED #F52948 — the red of the "10% OFF" badge on their own
                banner — darkened for the same reason
     accent-bg  the tan of "RENTALS" in the wordmark, #C9AC7C. It fills and
                underlines; it never carries text, because at text size on
                the sand band it comes out at 4.27:1
     deep       derived: the brand hue taken right down, so the waiver block
                and the call box are one fixed colour in both themes
     tints      derived: pale sky, sand and sea grounds behind the class
                cut-outs, so the fleet is not six white boxes in a row

   THE PHOTOGRAPHS SUPPLY THE COLOUR. The previous hero put a 93% black scrim
   over the most colourful thing this business owns. The scrim is now a deep
   teal and it lets go of the right-hand third of the frame entirely. The
   headline's contrast is still computed rather than trusted: against pure
   white under the scrim, which is the brightest the photograph could ever
   be beneath the type.

   LIGHT IS THE DESIGN. Dark is a choice the visitor makes with the toggle,
   which writes data-theme and is remembered. prefers-color-scheme is not
   consulted here — house rule.

   THE RESERVATION PANEL IS THE HERO, because a dated reservation is the
   entire product. Their own published line about paying online now sits in
   it, one line above the button, which is where the decision is made.

   Anything that sits on a PERMANENTLY dark ground — the hero, the waiver
   band, the photo band, the footer — uses a FIXED colour, never a token. A
   token flips in dark mode and the element disappears; that is the recurring
   bug in this folder.
   ========================================================================== */

:root {
  --ground:    #FFFCF6;
  --surface:   #FFFFFF;
  --surface-2: #F6ECDA;
  --ink:       #15110D;
  --ink-2:     #463D34;
  --muted:     #6B6156;
  --line:      #E7DCC9;
  --line-soft: #F2E9DA;

  --brand:      #0B6CB0;   /* their mural blue — every action */
  --brand-ink:  #08558C;
  --brand-on:   #FFFFFF;
  --hot:        #C4102F;   /* their own 10% OFF badge red */
  --hot-bg:     #FCEBEE;
  --hot-on:     #FFFFFF;
  --accent-bg:  #C9AC7C;   /* the wordmark tan itself, for fills */
  --accent-on:  #221A0C;
  --good:       #1E7A4C;
  --warn:       #A6410F;

  /* Fixed, theme-independent. For type on a photograph or on any other
     permanently dark ground. */
  --on-photo:      #FFFFFF;
  --on-photo-soft: #E8E0D4;
  --on-photo-warm: #F0CB8E;
  --deep:          #06364F;
  --on-deep:       #FFFFFF;
  --on-deep-soft:  #C7DEEC;
  --night:         #14100C;
  --on-night:      #FFFFFF;
  --on-night-soft: #D6CBBB;

  /* Grounds for the class cut-outs. Fixed in both themes: the cars are dark
     press cut-outs and they are read against these, not against the page. */
  --tint-sky:  #D8EAF7;
  --tint-sand: #F6E6C9;
  --tint-sea:  #D2E9E8;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --f-100: .75rem;    /* 12 */
  --f-200: .8125rem;  /* 13 — labels */
  --f-300: .875rem;   /* 14 */
  --f-400: .9375rem;  /* 15 */
  --f-500: 1rem;      /* 16 */
  --f-600: 1.125rem;  /* 18 — body */
  --f-700: 1.25rem;   /* 20 */
  --f-800: 1.5rem;    /* 24 */
  --f-900: 1.875rem;  /* 30 */

  --ls-label: .1em;
  --ls-caps:  .04em;
  --ls-tight: -.028em;

  --pad: clamp(1.15rem, 4vw, 2rem);
  --gap: clamp(3rem, 7.5vw, 5.5rem);

  --r-sm: 8px;
  --r:    18px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgb(35 26 12 / .06), 0 2px 6px rgb(35 26 12 / .05);
  --sh-2: 0 1px 2px rgb(35 26 12 / .07), 0 6px 16px rgb(35 26 12 / .08), 0 18px 40px rgb(35 26 12 / .10);

  color-scheme: light;
  accent-color: var(--brand);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sh-1: 0 1px 2px rgb(0 0 0 / .4), 0 2px 6px rgb(0 0 0 / .3);
  --sh-2: 0 1px 2px rgb(0 0 0 / .5), 0 6px 16px rgb(0 0 0 / .35), 0 18px 40px rgb(0 0 0 / .4);
  --ground:    #12100C;
  --surface:   #1C1813;
  --surface-2: #2A241B;
  --ink:       #F6F0E5;
  --ink-2:     #D3C9BA;
  --muted:     #A1968A;
  --line:      #3A322A;
  --line-soft: #272019;
  --brand:      #3BA4DF;
  --brand-ink:  #6FC2EE;
  --brand-on:   #04202F;
  --hot:        #FF8095;
  --hot-bg:     #3C141B;
  --hot-on:     #2B0209;
  --accent-bg:  #C9AC7C;
  --accent-on:  #221A0C;
  --good:       #5CC08F;
  --warn:       #E89463;
}

:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

/* With the boxes gone, hairlines are the only thing separating one fact from
   the next, and --line at #E7DCC9 on the sand band is 1.1:1 — there, but not
   really. Every divider is mixed from the ink instead, so it holds on both
   grounds and in both themes. */
:root {
  --divider: color-mix(in srgb, var(--ink) 24%, transparent);
  /* The edge of anything you can type in or press. WCAG 1.4.11 asks 3:1 for
     that boundary and --line is 1.1:1 on white; 46% of the ink computes to
     3.05:1 on the lightest ground and 4.2:1 on the darkest. */
  --edge: color-mix(in srgb, var(--ink) 46%, transparent);
}

@view-transition { navigation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--f-600);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
::selection { background: var(--accent-bg); color: var(--accent-on); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* On the four permanently dark blocks the brand blue is not a 3:1 indicator
   against the ground it would sit on, so the ring goes white — fixed, like
   everything else over those grounds. */
.hero :focus-visible, .band :focus-visible, .band-cdw :focus-visible,
.callbox :focus-visible, .ftr :focus-visible { outline-color: #FFFFFF; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-bg); color: var(--accent-on);
  padding: .7rem 1.1rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- the one label treatment ----------
   Every small-caps label on the page is this rule, and there are six kinds of
   element using it. Counting them is how a design avoids growing a fourth
   type treatment by accident. */

.fact dt, .rule__tag, .more-classes__hd, .notfound .code, .quote__when, .field label {
  font-family: var(--body);
  font-size: var(--f-200);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- shared ---------- */

.wrap { width: min(80rem, 100%); margin-inline: auto; padding-inline: var(--pad); }

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; font-weight: 800; }
.h-xl { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.02; letter-spacing: var(--ls-tight); }
.h-lg { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.06; letter-spacing: var(--ls-tight); }

p { margin: 0 0 1rem; text-wrap: pretty; }
.lede { font-size: var(--f-700); line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.prose { max-width: 62ch; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 700; }
a { color: var(--brand-ink); }

/* Spacing lives here, not in an inline style attribute — an inline margin
   beats the stylesheet and that is how the "CTA touches the picture" bug
   happened on Chillout. */
.mt-1 { margin-top: .6rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.2rem; }
.mb-0 { margin-bottom: 0; }
.u-push { margin-left: auto; }

/* ---------- buttons ----------
   Bigger, rounder, and only two of them: the action, and the outline. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 800; font-size: var(--f-500);
  letter-spacing: -.01em;
  padding: .9rem 1.6rem; border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s cubic-bezier(.2,.7,.3,1), border-color .18s ease,
              color .18s ease, translate .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.btn--primary { background: var(--brand); color: var(--brand-on); box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--brand-ink); translate: 0 -2px; box-shadow: var(--sh-2); }
.btn--primary:active { translate: 0 0; box-shadow: var(--sh-1); }
.btn--ghost { border-color: var(--edge); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn--sm { padding: .55rem 1.1rem; font-size: var(--f-400); }
.btn--wide { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ---------- header ----------
   No utility bar above it any more. The number that lived up there is now the
   header's own button, which says the number rather than the word "call".

   Breakpoint measured, not guessed:
     wordmark 90 + nav 441 + lang 62 + toggle 36 + phone 174
     + gaps (4 x 18) 72 + padding 64  =  939px
   so the single row is given until 1000 and wraps below it. */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 1.1rem; padding-block: .6rem; }
.brand { display: block; text-decoration: none; flex: none; line-height: 0; }
.brand__mark { background: #FFFFFF; border-radius: var(--r-sm); padding: .3rem .5rem; display: block; }
.brand img { height: 32px; width: auto; }

.nav { display: flex; gap: 1.15rem; margin-left: auto; }
.nav a {
  font-family: var(--body); font-weight: 700; font-size: var(--f-400);
  color: var(--ink-2); text-decoration: none; padding: .35rem .1rem;
  white-space: nowrap; position: relative; transition: color .18s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px;
  background: var(--hot); border-radius: 3px;
  transition: left .2s cubic-bezier(.2,.7,.3,1), right .2s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { left: 0; right: 0; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }

.lang { display: flex; align-items: center; gap: .1rem; flex: none; }
.lang a {
  font-size: var(--f-200); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--muted); text-decoration: none; padding: .3rem .4rem; border-radius: var(--r-sm);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.lang span { color: var(--line); }

.theme-btn {
  background: transparent; border: 2px solid var(--edge); color: var(--ink-2);
  width: 38px; height: 38px; border-radius: var(--r-pill); cursor: pointer; flex: none;
  display: grid; place-items: center;
  transition: color .18s ease, border-color .18s ease, rotate .3s cubic-bezier(.2,.7,.3,1);
}
.theme-btn:hover { rotate: -18deg; color: var(--brand-ink); border-color: var(--brand); }
.theme-btn svg { width: 16px; height: 16px; }
.hdr .btn { font-variant-numeric: tabular-nums; }
.only-sm { display: none; }

@media (max-width: 1000px) {
  .hdr .wrap { flex-wrap: wrap; row-gap: 0; gap: .7rem; }
  .nav {
    order: 3; width: 100%; margin-left: 0; gap: 1.3rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    padding-bottom: .5rem; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .lang { margin-left: auto; }
}
@media (max-width: 560px) { .only-sm { display: inline; } .only-lg { display: none; } }

/* ---------- hero ----------
   Sized to one screen so the reservation panel never falls below the fold.
   --chrome is measured in JS from the real header, which wraps at narrow
   widths, so a hard-coded number is wrong at exactly the sizes that matter.
   svh, not vh: vh is the LARGEST mobile viewport, so a 100vh hero starts the
   page partly under the browser's own toolbar. */

.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--chrome, 68px));
  display: flex; align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: #06222F;
  color: var(--on-photo);
  overflow: hidden;
}
@supports not (height: 100svh) { .hero { min-height: calc(100vh - var(--chrome, 68px)); } }

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* A deep teal rather than black, and it lets go of the right-hand third of
   the frame entirely — the mural is the most colourful thing this business
   owns and the old scrim buried it. Fixed colours: this ground is always
   dark, in both themes. The headline's contrast is computed against white
   showing through at the weakest alpha any text sits over. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg, rgb(4 26 38 / .95) 0%, rgb(4 26 38 / .90) 34%, rgb(4 26 38 / .52) 62%, rgb(4 26 38 / .10) 100%),
    linear-gradient(0deg, rgb(4 26 38 / .6) 0%, rgb(4 26 38 / 0) 42%);
}

@media (max-width: 960px) {
  .hero { min-height: 0; padding-block: 2rem 2.5rem; }
  /* One column: the type is over the middle of the photograph now, so the
     scrim has to cover the whole frame instead of a wedge. */
  .hero::before { background: linear-gradient(0deg, rgb(4 26 38 / .93) 0%, rgb(4 26 38 / .88) 60%, rgb(4 26 38 / .8) 100%); }
}

/* Short windows. A 1440x800 laptop leaves roughly 730px under the header and
   the panel alone is about 700px, so without this the submit button lands
   just off the bottom on one of the commonest screens there is. */
@media (min-width: 961px) and (max-height: 880px) {
  .hero { padding-block: 1rem; }
  .hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
  .chips { margin-top: .9rem; gap: .4rem; }
  .hero__phone { margin-top: .9rem; }
  .hero__phone .tel { font-size: var(--f-800); }
  .panel { padding: .9rem; }
  .panel h2 { font-size: var(--f-600); }
  .panel .sub { margin-bottom: .6rem; }
  .field { margin-bottom: .45rem; }
  .field input, .field select, .field textarea { min-height: 38px; padding: .45rem .55rem; }
  /* The online-payment line is new height in a panel that was already sized
     to the pixel on a 1440x800 laptop, so it compresses with everything
     else rather than pushing the button off the bottom. */
  .pay { padding: .4rem .6rem; font-size: var(--f-200); margin-bottom: .5rem; }
  .pay__badge { font-size: var(--f-100); padding: .25rem .55rem; }
}

/* No `width: 100%` on this element. It also carries .wrap, and an equal-
   specificity rule later in the file would silently beat .wrap's cap — the
   bug that left 782px of dead space on a previous build. */
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(23rem, 27rem);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  max-width: 72rem; margin-inline: auto;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--on-photo); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--on-photo-warm); }
.hero__tag {
  color: var(--on-photo-warm); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; font-size: var(--f-300); margin-bottom: .8rem;
}

/* The four differentiators, in the hero where they belong, as chips rather
   than a bulleted list: fewer marks on the screen and they read at a glance.
   Fixed colours — this is a photographic ground. */
.chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 40rem; }
.chips li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--f-400); font-weight: 700; line-height: 1.25;
  color: #FFFFFF; background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .34);
  border-radius: var(--r-pill); padding: .45rem .9rem;
  backdrop-filter: blur(4px);
}
.chips svg { width: 15px; height: 15px; flex: none; color: var(--on-photo-warm); }

.hero__phone { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; }
.hero__phone .tel {
  font-family: var(--display); font-weight: 800; font-size: var(--f-900);
  color: var(--on-photo); text-decoration: none; letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.hero__phone .tel:hover { color: var(--on-photo-warm); }
.hero__phone .note { font-size: var(--f-300); color: var(--on-photo-soft); }

/* ---- the reservation panel ---- */

.panel {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); padding: clamp(1.05rem, 2.2vw, 1.5rem);
  border: 0;
  box-shadow: var(--sh-2);
}
.panel h2 { font-size: var(--f-700); margin-bottom: .15rem; letter-spacing: var(--ls-tight); }
.panel .sub { font-size: var(--f-200); color: var(--muted); margin-bottom: .9rem; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.grid3 { display: grid; grid-template-columns: 1.35fr 1fr; gap: .6rem; }
@media (max-width: 520px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .22rem; margin-bottom: .6rem; }
.field label { color: var(--muted); }
.field label .req { color: var(--hot); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: var(--f-400); color: var(--ink);
  background: var(--ground); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: .55rem .65rem; width: 100%; min-height: 42px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.field textarea { resize: vertical; min-height: 4.5rem; field-sizing: content; max-height: 12rem; }
.field input:user-invalid { border-color: var(--warn); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.field .err { font-size: var(--f-100); color: var(--warn); line-height: 1.35; }
/* Reserve no space until there is something to say. Nine fields each holding
   an empty error line cost ~115px of panel height on Everts — the difference
   between the submit button being on screen and just under it. */
.field .err:empty { display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--warn); }

.more { border-top: 1px solid var(--line-soft); margin: .2rem 0 .7rem; }
.more summary {
  cursor: pointer; list-style: none; padding: .55rem 0 .1rem;
  font-size: var(--f-200); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--brand-ink);
  display: flex; align-items: center; gap: .4rem;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-family: var(--display); font-size: 1.05rem; line-height: 1; }
.more[open] summary::after { content: "\2013"; }
.more > div { padding-top: .6rem; }

.status {
  border: 2px solid var(--edge); border-radius: var(--r-sm); padding: .7rem .85rem;
  font-size: var(--f-300); line-height: 1.5; margin-bottom: .7rem;
  display: none; opacity: 0; translate: 0 -6px;
  transition: opacity .22s ease, translate .22s cubic-bezier(.2,.7,.3,1), display .22s allow-discrete;
}
.status.show { display: block; opacity: 1; translate: 0 0; }
@starting-style { .status.show { opacity: 0; translate: 0 -6px; } }
.status--ok { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 8%, transparent); }
.status--bad { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.status a { color: inherit; font-weight: 700; }

/* ---- what they published about paying online ----
   Their own banner, in their own words, at the point where somebody is
   deciding how to pay. The figure is a price claim recovered from an
   archived capture, so it is on the confirm-with-owner list in README.md
   along with every rate, and the assistant is forbidden from applying it. */
.pay {
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 .7rem; padding: .6rem .75rem;
  background: var(--hot-bg); border-radius: var(--r-sm);
  font-size: var(--f-300); line-height: 1.35; color: var(--ink);
}
.pay__badge {
  flex: none; font-family: var(--display); font-weight: 800; font-size: var(--f-300);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  background: var(--hot); color: var(--hot-on);
  border-radius: var(--r-pill); padding: .3rem .65rem;
}

.panel__note { font-size: var(--f-100); color: var(--muted); margin: .6rem 0 0; line-height: 1.45; }

/* ---------- sections ---------- */

.sec { padding-block: var(--gap); }
.sec--alt { background: var(--surface-2); }
.sec__head { margin-bottom: 2.4rem; }
.sec__head .lede { margin-top: 1rem; }

/* ---------- fleet ----------
   Six classes have a photograph in the archive and four do not. Mixing a real
   picture with a drawn placeholder in one grid would say the four are somehow
   lesser, so they are a list underneath instead, with the same rate treatment.

   The column count is stated. An auto-fit grid resolving six items into four
   columns leaves two orphans on the second row.

   No card borders and no card shadows any more: the colour behind each
   cut-out is what separates one card from the next. */

.fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 1000px) { .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fleet { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; gap: .45rem; }
.card__pic {
  aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--r); margin-bottom: .55rem;
  background: var(--tint-sky);
  transition: translate .2s cubic-bezier(.2,.7,.3,1);
}
/* Three grounds, cycled, so no two neighbours in a three-column row match. */
.card:nth-child(3n+2) .card__pic { background: var(--tint-sand); }
.card:nth-child(3n) .card__pic { background: var(--tint-sea); }
.card:hover .card__pic { translate: 0 -4px; }
/* The class shots are cut-outs with an alpha channel. Contained, never
   cropped and never enlarged past the 398px of the smallest of them. */
.card__pic img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.card h3 { font-size: var(--f-800); line-height: 1.1; letter-spacing: var(--ls-tight); }

.rate { display: flex; align-items: baseline; gap: .35rem; margin: 0; }
.rate b { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
.rate span { font-size: var(--f-300); color: var(--muted); font-weight: 700; }

.spec { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.spec li { font-size: var(--f-300); color: var(--ink-2); }
.spec li + li::before { content: "·"; margin-right: .5rem; color: var(--accent-bg); font-weight: 700; }

.card__cta {
  margin-top: auto; padding-top: .5rem;
  font-family: var(--display); font-weight: 800; font-size: var(--f-400);
  color: var(--brand-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; align-self: start;
}
.card__cta::after { content: "\2192"; transition: translate .18s cubic-bezier(.2,.7,.3,1); }
.card__cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.card__cta:hover::after { translate: 3px 0; }

.more-classes { margin-top: 2.2rem; border-top: 3px solid var(--ink); }
.more-classes__hd { color: var(--muted); padding-top: 1.2rem; display: block; margin-bottom: .2rem; }
.more-classes ul { list-style: none; margin: 0; padding: 0; }
.more-classes li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--divider);
}
.more-classes li:last-child { border-bottom: none; }
.more-classes .n { font-family: var(--display); font-weight: 800; font-size: var(--f-700); min-width: 14rem; letter-spacing: var(--ls-tight); }
.more-classes .s { font-size: var(--f-300); color: var(--muted); flex: 1 1 12rem; }
.more-classes .p { font-family: var(--display); font-weight: 800; font-size: var(--f-800); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.more-classes .p small { font-family: var(--body); font-weight: 400; font-size: var(--f-300); color: var(--muted); }

/* ---------- what it costs ----------
   Nine published charges. They used to sit in a bordered nine-cell table,
   which was three borders per fact. Now each one is a coloured rule and a
   number: the same nine facts, a third of the marks. */

.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.2rem; }
@media (max-width: 900px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rules { grid-template-columns: 1fr; } }
.rule { border-top: 4px solid var(--brand); padding-top: .9rem; }
.rule:nth-child(3n+2) { border-top-color: var(--accent-bg); }
.rule:nth-child(3n) { border-top-color: var(--hot); }
.rule__tag { color: var(--muted); display: block; margin-bottom: .35rem; }
.rule__val { font-family: var(--display); font-weight: 800; font-size: var(--f-900); line-height: 1.05; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; margin: 0; }
.rule__val small { display: block; font-family: var(--body); font-size: var(--f-300); font-weight: 400; letter-spacing: 0; color: var(--ink-2); margin-top: .5rem; line-height: 1.55; }

/* ---- the waiver band ----
   A fixed deep-sea block in both themes, so the three products a renter is
   choosing between are the loudest thing in this section. Every colour in
   here is fixed for that reason. */

.band-cdw {
  background: var(--deep); color: var(--on-deep);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem);
  margin-top: 3rem;
}
.band-cdw h3 { color: var(--on-deep); }
.band-cdw .prose { color: var(--on-deep-soft); max-width: 62ch; }
.band-cdw .prose strong { color: var(--on-deep); }
.band-cdw a { color: #FFFFFF; }

.cdw { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 760px) { .cdw { grid-template-columns: 1fr; } }
.cdw li { border-top: 3px solid rgb(255 255 255 / .35); padding-top: .9rem; }
.cdw b { display: block; font-family: var(--display); font-weight: 800; font-size: var(--f-600); line-height: 1.2; color: var(--on-deep); }
.cdw .amt { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1.1; color: var(--on-photo-warm); font-variant-numeric: tabular-nums; display: block; margin: .3rem 0 .35rem; letter-spacing: var(--ls-tight); }
.cdw .amt small { font-family: var(--body); font-weight: 400; font-size: var(--f-300); color: var(--on-deep-soft); letter-spacing: 0; }
.cdw p { font-size: var(--f-400); color: var(--on-deep-soft); margin: 0; line-height: 1.55; }

/* The one instruction on this page that somebody may have to follow from the
   side of a road. It is allowed to shout. */
.alert {
  margin-top: 1.8rem; padding: 1rem 1.2rem;
  border-left: 6px solid var(--on-photo-warm);
  background: rgb(255 255 255 / .08);
  font-size: var(--f-500); line-height: 1.55; color: var(--on-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; max-width: 62ch;
}
.alert strong { color: var(--on-photo-warm); }

/* ---------- the photograph band ----------
   One full-bleed picture of their own car instead of a heading and two
   thumbnails. Fixed colours: the ground is a photograph. */

.band {
  position: relative; isolation: isolate;
  min-height: clamp(20rem, 46vw, 30rem);
  display: flex; align-items: end;
  background: #06222F; overflow: hidden;
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(4 26 38 / .92) 0%, rgb(4 26 38 / .55) 45%, rgb(4 26 38 / .05) 100%);
}
.band .wrap { padding-block: clamp(1.8rem, 4vw, 3rem); }
.band h2 { color: var(--on-photo); max-width: 18ch; }
.band p { color: var(--on-photo-soft); max-width: 52ch; margin: 1rem 0 0; font-size: var(--f-600); }

/* ---------- reviews ----------
   Their own homepage carried a Google review widget. These are three of the
   reviews that were on it, word for word, with the names and dates as
   published. Nothing is summarised and no overall score is shown. */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote { margin: 0; }
.quote blockquote { margin: 0; font-size: var(--f-500); line-height: 1.6; color: var(--ink-2); }
.quote blockquote::before { content: "\201C"; font-family: var(--display); font-weight: 800; font-size: 3.4rem; line-height: 0; color: var(--hot); vertical-align: -.5rem; margin-right: .15rem; }
.quote figcaption { margin-top: 1rem; font-size: var(--f-500); font-weight: 700; }
.quote__when { display: block; color: var(--muted); margin-top: .2rem; }

/* ---------- FAQ ----------
   Thirteen published answers, on hairlines rather than in thirteen boxes. */

.faq { max-width: 58rem; border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary {
  cursor: pointer; padding: 1rem .2rem; font-weight: 700; font-size: var(--f-600);
  font-family: var(--display); letter-spacing: -.012em;
  list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  transition: color .18s ease;
}
.faq summary:hover { color: var(--brand-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--hot); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 0; padding: 0 .2rem 1.1rem; color: var(--ink-2); font-size: var(--f-500); max-width: 64ch; }
.faq p + p { padding-top: 0; }

/* ---------- contact ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.facts { margin: 0; }
.fact { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--divider); align-items: baseline; }
.fact:first-child { border-top: 1px solid var(--divider); }
.fact dt { color: var(--muted); }
.fact dd { margin: 0; font-size: var(--f-500); color: var(--ink); line-height: 1.45; }
.fact dd a { color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--accent-bg); }
.fact dd a:hover { color: var(--brand-ink); }
.fact .sml { display: block; font-size: var(--f-300); color: var(--muted); margin-top: .2rem; }
@media (max-width: 520px) { .fact { grid-template-columns: 1fr; gap: .15rem; } }

/* The same fixed deep-sea block as the waiver band, in both themes. Every
   colour inside it is fixed: a token here would flip under the toggle and
   the white button would lose its edge against a pale ground. */
.callbox { border-radius: var(--r-lg); background: var(--deep); color: var(--on-deep); padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.callbox h2 { font-size: var(--f-800); margin-bottom: .3rem; color: var(--on-deep); letter-spacing: var(--ls-tight); }
.callbox .sub { font-size: var(--f-400); color: var(--on-deep-soft); margin-bottom: 1.2rem; }
.callbox .btn--primary { background: #FFFFFF; color: #08558C; box-shadow: none; }
.callbox .btn--primary:hover { background: var(--on-photo-warm); color: #221A0C; }
.callbox .btn--ghost { border-color: rgb(255 255 255 / .55); color: var(--on-deep); }
.callbox .btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.callbox .panel__note { color: var(--on-deep-soft); font-size: var(--f-300); }

.shot { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.shot img { width: 100%; height: auto; }

/* ---------- footer ----------
   One dark block. Four link columns became one row of links: the same
   destinations, a quarter of the furniture. Fixed colours throughout. */

.ftr { background: var(--night); color: var(--on-night); padding-block: 3rem 1.8rem; }
.ftr .blurb { font-family: var(--display); font-weight: 800; font-size: var(--f-800); line-height: 1.15; letter-spacing: var(--ls-tight); color: var(--on-night); max-width: 20ch; margin: 0 0 1.4rem; }
.ftr ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.ftr a { color: var(--on-night-soft); text-decoration: none; font-size: var(--f-400); font-weight: 600; }
.ftr a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.legal {
  border-top: 1px solid rgb(255 255 255 / .18); padding-top: 1.2rem;
  color: var(--on-night-soft); font-size: var(--f-200);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}

/* ---------- motion ----------
   Scroll-driven, so no observer and no JS. Elements start visible-but-low,
   never at opacity 0: if the animation never runs, the page is unchanged. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card, .rule, .faq details, .sec__head, .quote, .cdw li {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
    @keyframes rise-in {
      from { opacity: .55; translate: 0 14px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* ---------- 404 ---------- */

.notfound { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.notfound .code { color: var(--hot); margin-bottom: 1rem; }
.notfound .lede { margin-inline: auto; }
.notfound .btn { margin: .3rem; }

/* ---------- chat ----------
   An assistant that answers from what this business has published, and a
   button that hands the whole conversation over the moment it cannot. Front
   end here; the model, the guard rails and the knowledge base are in
   functions/api/chat.js and functions/_kb.js.

   SHARED COMPONENT. Everything below the map is byte-identical on every site
   in workshop/ — only the map is per-site, and it only ever maps this
   site's own tokens onto the --chat-* names. If a change is needed, change it
   in all of them, or it stops being shared.

   Every --f-* and --ls-* step the block below reads is declared in :root at
   the top of this file. Declaring only some of them is how the Elegance panel
   silently rendered every line at body size: font-size inherits, so an
   undefined var does not fall back to a default, it falls back to the parent.

   The panel is non-modal on purpose: it opens beside the page rather than
   over it, so nothing behind it is blocked and no focus trap is needed.
   Escape closes it, a click outside closes it, and focus returns to the
   launcher. */

:root {
  --chat-accent:    var(--brand);        /* the blue off their own mural: the action colour on this site */
  --chat-accent-on: var(--brand-on);
  --chat-surface:   var(--surface);
  --chat-raise:     var(--surface-2);
  --chat-ink:       var(--ink);
  --chat-ink-2:     var(--ink-2);
  --chat-muted:     var(--muted);
  --chat-line:      var(--line);
  --chat-line-soft: var(--line-soft);
  --chat-warn:      var(--warn);
  --chat-display:   var(--display);
  --chat-body:      var(--body);
  --chat-r: 16px;
  --chat-r-sm: 5px;
  --chat-r-pill: 999px;
}

.chat-launch {
  position: fixed; z-index: 70;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.25rem .8rem 1rem;
  background: var(--chat-accent); color: var(--chat-accent-on);
  border: 0; border-radius: var(--chat-r-pill); cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / .18), 0 18px 44px rgb(0 0 0 / .22);
  font-family: var(--chat-body); font-weight: 600; font-size: var(--f-400);
  letter-spacing: var(--ls-caps, .04em); line-height: 1;
  transition: filter .22s ease, translate .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.chat-launch:hover { filter: brightness(1.08); translate: 0 -2px; box-shadow: 0 6px 16px rgb(0 0 0 / .22), 0 26px 60px rgb(0 0 0 / .28); }
.chat-launch svg { width: 22px; height: 22px; flex: none; }

/* Arrives with one small rise so the eye catches it, then never moves again. */
@media (prefers-reduced-motion: no-preference) {
  .chat-launch { animation: launch-in .5s cubic-bezier(.2,.7,.3,1) 1.1s both; }
  @keyframes launch-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}

.chat-launch[aria-expanded="true"] .chat-launch__open,
.chat-launch[aria-expanded="false"] .chat-launch__close { display: none; }
.chat-launch[aria-expanded="true"] .chat-launch__label { display: none; }
.chat-launch[aria-expanded="true"] { padding: .8rem 1rem; }

@media (max-width: 560px) {
  .chat-launch__label { display: none; }
  .chat-launch { padding: .8rem .95rem; }
}

/* ---- the panel ----
   A conversation, so it needs a fixed frame with the log scrolling inside it.
   Left to grow with its content a chat panel walks off the top of the screen
   after four exchanges.

   Rows: head / log / composer / handoff / status / disclosure. The log is the
   only one that flexes, and minmax(0,1fr) is what actually lets it scroll —
   1fr alone takes its minimum from the content and the panel overflows. */

.chat {
  position: fixed; z-index: 71;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 66px);
  width: min(24rem, calc(100vw - 2rem));
  height: min(34rem, calc(100svh - clamp(1rem, 3vw, 2rem) - 94px));
  background: var(--chat-surface); color: var(--chat-ink);
  border: 1px solid var(--chat-line); border-radius: var(--chat-r);
  box-shadow: 0 8px 22px rgb(0 0 0 / .14), 0 32px 80px rgb(0 0 0 / .22);
  overflow: hidden;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  opacity: 0; translate: 0 12px; scale: .98;
  transform-origin: bottom right;
  transition: opacity .26s ease, translate .26s cubic-bezier(.2,.7,.3,1),
              scale .26s cubic-bezier(.2,.7,.3,1), display .26s allow-discrete;
}
.chat.is-open { display: grid; opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .chat.is-open { opacity: 0; translate: 0 12px; scale: .98; } }

.chat__head { padding: 1rem 1.15rem .8rem; border-bottom: 1px solid var(--chat-line-soft); }
.chat__title { font-family: var(--chat-display); font-size: var(--f-700); line-height: 1.15; margin: 0 0 .25rem; }
.chat__intro { font-size: var(--f-200); color: var(--chat-muted); margin: 0; line-height: 1.5; }

/* ---- the log ---- */

.chat__log {
  overflow-y: auto; overscroll-behavior: contain;
  padding: .95rem 1.15rem;
  display: flex; flex-direction: column; gap: .5rem;
  scrollbar-width: thin; scrollbar-color: var(--chat-line) transparent;
}

.msg {
  max-width: 88%;
  padding: .55rem .8rem;
  border-radius: var(--chat-r);
  font-size: var(--f-400); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg--bot { align-self: flex-start; background: var(--chat-raise); border-bottom-left-radius: var(--chat-r-sm); }
.msg--me  { align-self: flex-end; background: var(--chat-accent); color: var(--chat-accent-on); border-bottom-right-radius: var(--chat-r-sm); }

.msg--note {
  align-self: stretch; max-width: none; text-align: center;
  background: none; padding: .15rem 0;
  font-size: var(--f-100); color: var(--chat-muted); line-height: 1.5;
}

/* Each turn arrives with one small rise. Reduced motion gets it instantly. */
@media (prefers-reduced-motion: no-preference) {
  .msg { animation: msg-in .26s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes msg-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
}

.msg--typing { display: inline-flex; gap: .3rem; align-items: center; padding: .75rem .8rem; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-muted); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .msg--typing i { animation: blip 1.1s ease-in-out infinite; }
  .msg--typing i:nth-child(2) { animation-delay: .16s; }
  .msg--typing i:nth-child(3) { animation-delay: .32s; }
  @keyframes blip { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
}

/* ---- the composer ---- */

.chat__composer {
  display: flex; gap: .55rem; align-items: end;
  padding: .65rem 1.15rem;
  border-top: 1px solid var(--chat-line-soft);
}
.chat__composer textarea {
  flex: 1;
  font-family: var(--chat-body); font-size: var(--f-400); color: var(--chat-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--chat-line);
  border-radius: 0; padding: .45rem 0; resize: none;
  min-height: 2.3rem; max-height: 6.5rem; field-sizing: content;
  transition: border-color .25s ease;
}
.chat__composer textarea:hover { border-bottom-color: var(--chat-muted); }
.chat__composer textarea:focus { outline: none; border-bottom-color: var(--chat-accent); border-bottom-width: 2px; }

.chat__send {
  flex: none; width: 36px; height: 36px; margin-bottom: .15rem;
  display: grid; place-items: center;
  background: var(--chat-accent); color: var(--chat-accent-on);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: filter .2s ease, opacity .2s ease;
}
.chat__send svg { width: 17px; height: 17px; }
.chat__send:hover { filter: brightness(1.08); }
.chat__send:disabled { opacity: .35; cursor: default; }

/* ---- handing over ---- */

.chat__foot {
  display: flex; align-items: center; gap: .4rem .75rem; flex-wrap: wrap;
  padding: 0 1.15rem .8rem;
}
.chat__handoff {
  font-family: var(--chat-body); font-size: var(--f-200); font-weight: 600;
  letter-spacing: .02em;
  background: transparent; color: var(--chat-accent);
  border: 1px solid color-mix(in oklab, var(--chat-accent) 45%, transparent);
  border-radius: var(--chat-r-pill); padding: .38rem .8rem; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.chat__handoff:hover { background: color-mix(in oklab, var(--chat-accent) 12%, transparent); border-color: var(--chat-accent); }
.chat__handoff:disabled { opacity: .45; cursor: default; }
.chat__call { font-size: var(--f-100); color: var(--chat-muted); }
.chat__call:hover { color: var(--chat-ink); }

.chat__ho { padding: 0 1.15rem .8rem; border-top: 1px solid var(--chat-line-soft); }
.chat__ho[hidden] { display: none; }
.chat__ho-note { font-size: var(--f-200); color: var(--chat-ink-2); margin: .8rem 0 .55rem; line-height: 1.5; }

.chat__field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .55rem; }
.chat__field label {
  font-family: var(--chat-body); font-size: var(--f-100); font-weight: 600;
  letter-spacing: var(--ls-label, .1em); text-transform: uppercase; color: var(--chat-muted);
}
.chat__field input, .chat__field textarea {
  font-family: var(--chat-body); font-size: var(--f-400); color: var(--chat-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--chat-line);
  border-radius: 0; padding: .4rem 0; width: 100%; resize: none;
  transition: border-color .25s ease;
}
.chat__field textarea { min-height: 2.6rem; max-height: 6rem; field-sizing: content; }
.chat__field input:focus, .chat__field textarea:focus { outline: none; border-bottom-color: var(--chat-accent); border-bottom-width: 2px; }
.chat__field.invalid input, .chat__field.invalid textarea { border-bottom-color: var(--chat-warn); }
.chat__err { font-size: var(--f-100); color: var(--chat-warn); line-height: 1.4; }
.chat__err:empty { display: none; }

.chat__submit {
  width: 100%; margin-top: .2rem;
  font-family: var(--chat-body); font-size: var(--f-300); font-weight: 600;
  letter-spacing: var(--ls-caps, .04em);
  background: var(--chat-accent); color: var(--chat-accent-on);
  border: 0; border-radius: var(--chat-r-pill); padding: .6rem 1rem; cursor: pointer;
  transition: filter .2s ease;
}
.chat__submit:hover { filter: brightness(1.08); }
.chat__submit:disabled { opacity: .5; cursor: default; }

.chat__status {
  margin: 0 1.15rem .8rem; padding: .45rem 0 .45rem .85rem;
  border-left: 2px solid var(--chat-warn);
  font-size: var(--f-200); line-height: 1.55; color: var(--chat-warn);
  display: none;
}
.chat__status.show { display: block; }
.chat__status a { color: inherit; font-weight: 600; }

/* The one honest thing a chatbot owes anybody. */
.chat__disclosure {
  padding: 0 1.15rem .75rem; margin: 0;
  font-size: var(--f-100); color: var(--chat-muted); line-height: 1.5;
}

/* For labels a screen reader needs and the eye does not. */
.chat-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  .chat {
    left: 1rem; right: 1rem; width: auto;
    bottom: calc(1rem + 62px);
    height: min(30rem, calc(100svh - 1rem - 86px));
  }
}