/* ===========================================================================
   DARK PROTOTYPE — throwaway. Delete this file and the two lines in index.html
   that load it, and the site is exactly as it was. Nothing else is modified.

   Everything is scoped under html.kore-dark, which is set only when the URL
   carries ?dark. So:  localhost:8080/  = light   localhost:8080/?dark = dark
   Both states ship from the same files, which is the point — you can flip
   between them without a rebuild.

   The palette is warm-black, not grey. Every ground has more red than blue in
   it (#12100C is R18 G16 B12), because a neutral #1a1a1a is what makes dark
   mode read as "app chrome" rather than as a material. Four grounds a few
   units apart give the layering that stops it looking like flat paint.

   Two golds, not one: #B99758 for small text and rules, #D9BE86 for highlights,
   #8A6E32 for large fills. A single gold at every size reads as mustard.
   =========================================================================== */

html.kore-dark {
  /* Tells the engine to render native controls, scrollbars and the date
     picker in their dark variants. Without it, unchecked radios and
     checkboxes paint as white blobs and become the brightest thing on
     screen -- the single most common tell of a bolted-on dark mode. */
  color-scheme: dark;

  /* Four levels, ~6-9 L* apart. The previous set was spaced ~3 L* -- below the
     threshold where two dark surfaces read as different at all, which is why
     the whole page collapsed into one value. Measured in L*, not in WCAG
     contrast ratio: the ratio's flare term makes every dark pair score ~1.1
     whether or not the eye can separate them. */
  --d-ground:  #0D0B08;   /* L*  3  the page */
  --d-surface: #211D16;   /* L* 11  cards on the page, and the builder panel */
  --d-raised:  #2E2820;   /* L* 17  things sitting on a surface */
  --d-sel:     #3B3429;   /* L* 22  chosen state */
  --d-line:    #3A332A;   /* structural hairline, visible against L1 and L2 */
  --d-gline:   rgba(185, 151, 88, 0.26);
  --d-text:    #F2EDE3;   /* never pure white */
  --d-text-2:  rgba(242, 237, 227, 0.74);
  --d-text-3:  rgba(242, 237, 227, 0.52);
  --d-gold:    #B99758;
  --d-gold-hi: #D9BE86;
  --d-gold-dp: #8A6E32;
}

/* ---------------------------------------------------------------- grounds */
html.kore-dark,
html.kore-dark body,
html.kore-dark body > main,
html.kore-dark body > main > div,
html.kore-dark body > main > div > div,   /* the Framer root; structural, not a hashed class */
html.kore-dark [data-framer-name="KoreDetail Welcome"],
html.kore-dark [data-framer-name="Add-ons and Service Area"],
html.kore-dark [data-framer-name="Detailing Packages"],
html.kore-dark [data-framer-name="Studio Close"] {
  background-color: var(--d-ground) !important;
}

/* The warm lift used to be painted per-section. The sections are capped at
   1200px and centred, so the gradient drew a BOX -- its top edge and both side
   edges were visible against the full-width ground, which is worse than flat.
   The ground is now painted once, on the full-width wrapper, and the sections
   are transparent. One continuous field, no box to have an edge.

   Studio Close (the contact chapter) was missing from this list, so it kept
   Framer's own rgb(23,23,21) -- a NEUTRAL grey sitting between a warm-black
   ground and a warm surface, which is what made the page tail read as three
   different colours instead of two. */
html.kore-dark [data-framer-name="KoreDetail Welcome"],
html.kore-dark [data-framer-name="Add-ons and Service Area"],
html.kore-dark [data-framer-name="Detailing Packages"],
html.kore-dark [data-framer-name="Studio Close"] {
  background-color: transparent !important;
  background-image: none !important;
}
html.kore-dark body > main > div > div {
  /* full-bleed, so it cannot produce a seam at any width */
  background-image:
    radial-gradient(150% 55% at 50% 0%, rgba(185, 151, 88, 0.055), rgba(185, 151, 88, 0) 60%) !important;
}

/* Framer bakes text colour into inline styles as --framer-text-color. An
   author !important beats a normal inline declaration, and matching on the
   value lets the dark ones flip while the gold and cream ones stay put. */
html.kore-dark [style*="--framer-text-color:#1e1e1c"],
html.kore-dark [style*="--framer-text-color:#1E1E1C"],
html.kore-dark [style*="--framer-text-color:#171715"] {
  --framer-text-color: var(--d-text) !important;
}
html.kore-dark [style*="--framer-text-color:rgba(30,30,28,0.7)"],
html.kore-dark [style*="--framer-text-color:rgba(30,30,28,0.68)"] {
  --framer-text-color: var(--d-text-2) !important;
}
html.kore-dark [style*="--framer-text-color:#a78a55"] {
  --framer-text-color: var(--d-gold) !important;
}

/* Framer's section rules (the 2px gold top border on each chapter) */
html.kore-dark [data-border="true"] { --border-color: var(--d-gline) !important; }

/* ------------------------------------------------------------------- hero --
   The desktop left-to-right mask exists for one reason: to fade the video out
   so the CREAM BODY shows through and the dark headline has something to sit
   on. On a dark ground that is backwards -- it dims the best asset on the page
   to build a backdrop nobody needs any more. Drop it, run the video at full
   strength, and put the legibility back with a cinematic left vignette. The
   car gets brighter and the headline gets more contrast, not less. */
/* One veil, at the top, and no side vignette. The left vignette used to buy
   legibility for copy that sat on the left; the copy is a bottom band now, so
   all the vignette did was dim the front of the car. What replaced it at the
   bottom is not a veil at all -- it is the vertical fade on the video itself
   (packages.css), which is why there is no gradient here for the lower half.

   This one darkens the sky enough to seat the brand lockup and the social row.
   Smoothstep sampled at 9 stops: a 2- or 3-stop linear fade Mach-bands across a
   frame this large, the same trap documented on the mask. */
html.kore-dark .kore-hero-scrim {
  background-image:
    linear-gradient(180deg,
      rgba(18, 16, 12, 0.62) 0%, rgba(18, 16, 12, 0.593) 3.25%, rgba(18, 16, 12, 0.523) 6.5%,
      rgba(18, 16, 12, 0.424) 9.75%, rgba(18, 16, 12, 0.31) 13%, rgba(18, 16, 12, 0.196) 16.25%,
      rgba(18, 16, 12, 0.097) 19.5%, rgba(18, 16, 12, 0.027) 22.75%, rgba(18, 16, 12, 0) 26%) !important;
  opacity: 1 !important;
}
/* ...but not on the band layout. There the veil is doing a job that is already done: the video
   carries its own top feather, and the brand lockup sits on plain ink above the band rather
   than on the sky, which is the only reason this veil existed. Stacked on the feather the two
   multiply -- about 24px into the band the mask is at 0.5 and the veil still has 0.48 to give,
   so roughly a quarter of the image survives. It is also mis-scaled there: these stops are
   percentages of the element, and the band is a little over half the height of the hero they
   were tuned against, so the same 0.62 is crammed into half the run and reads twice as steep. */
@media (max-width: 810px), (max-aspect-ratio: 4/5) {
  html.kore-dark .kore-hero-scrim { background-image: none !important; }
}
/* The video was being composited at 0.72 over near-black, which crushed the car
   by about 25% before anything else touched it. Legibility is handled explicitly
   now -- the veil above for the top, the mask for the bottom -- so the image in
   between has no reason to be dimmed and renders at full fidelity. */
html.kore-dark {
  --hero-video-opacity: 1;
  --hero-video-opacity-mobile: 1;
}
/* the headline carries no inline colour -- it inherits, so the value-matched
   rules above never reach it */
html.kore-dark [data-framer-name="Welcome Heading"],
html.kore-dark [data-framer-name="Welcome Heading"] .framer-text {
  --framer-text-color: #F2EDE3 !important;
  color: #F2EDE3 !important;
}
html.kore-dark .kore-brand-name { color: var(--d-text) !important; }
html.kore-dark .kore-social a { color: rgba(242, 237, 227, 0.82) !important; }
html.kore-dark .kore-social a:hover,
html.kore-dark .kore-social a:focus-visible { color: var(--d-gold-hi) !important; }

/* -------------------------------------------------------------- chapters */
html.kore-dark .kore-eyebrow,
html.kore-dark .krv-eyebrow,
html.kore-dark .kqb-eyebrow { color: var(--d-gold); }

/* --------------------------------------------------------------- the map --
   A cream chart on this ground was the brightest object on the page by a wide
   margin, so it now converts properly.

   Land and water need to stay TELLING APART, and dark makes that harder: the
   light map separated #f3eee1 land from rgb(157,174,183) water at 1.87:1, so
   the dark pair is tuned to match rather than to look dramatic -- #1E1A14 land
   against #32465A water is 1.78:1, carried as much by warm-vs-cool as by
   luminance. Push the water darker and the coastline stops reading at all.

   The label casing inverts with everything else: cream glyphs need a DARK halo,
   not the cream one that made them legible over the old light land. */
html.kore-dark .kore-map {
  border: 1px solid var(--d-gline);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.5) 0 18px 50px 0;
}
html.kore-dark .kore-land     { fill: #1E1A14; }
html.kore-dark .kore-water    { fill: #2B3D50; }   /* asked for darker; land/water separation falls 1.78 -> 1.55, held up by the coast stroke */
html.kore-dark .kore-gridline { stroke: rgba(242, 237, 227, 0.045); }
html.kore-dark .kore-coast    { stroke: rgba(150, 186, 214, 0.62); stroke-width: 1.1; }
/* the real shore carries far more small-scale shape than the drawn one, so a
   thinner, brighter line reads better than a thick soft one */
/* the service-area wash reads warmer on dark, so it can carry a little more */
html.kore-dark #regionGlow stop:nth-child(1) { stop-opacity: 0.30; }
html.kore-dark #regionGlow stop:nth-child(2) { stop-opacity: 0.13; }
/* the boundary was authored in #9B7A3F, which is muddy here */
html.kore-dark .kore-map-line { stroke: #B99758; }
html.kore-dark .kore-map-halo { stroke: #B99758; }
html.kore-dark .kore-label {
  fill: #F2EDE3;
  stroke: rgba(18, 16, 12, 0.85);
}
html.kore-dark .kore-label--inner { fill: rgba(242, 237, 227, 0.82); }
html.kore-dark .kore-label--gold  { fill: #D9BE86; }
html.kore-dark .kore-ocean        { fill: rgba(214, 228, 240, 0.72); }

/* ------------------------------------------------------- the enclosure ----
   The builder is the only section on the page that is an OBJECT. It measured
   1.00:1 against the ground before this -- not a quiet panel, no panel at all,
   just content flowing on the page with the same weight as the footer.

   Its prominence is built from four quiet devices agreeing rather than one loud
   one: elevation (it sits at L1 while its contents sit at L2), enclosure
   (border and shadow), scale (more air than any other section gets), and the
   gold rule. It is deliberately NOT brighter than a review card -- being the
   brightest thing on a flat page is what reads as a sore thumb. The heading and
   eyebrow stay outside it, which is the chapter anatomy the rest of the site
   already uses. */
html.kore-dark .quote {
  /* 940px was a prose measure from when the builder was loose content on the
     page. As a bounded panel it has to align with the column everything else
     uses -- the map reaches 1256 and this was stopping at 1124, so the left
     edges agreed and the right edges did not. Scoped to the dark theme because
     ?classic has no panel and the cap still makes sense there. */
  max-width: none;
  background: var(--d-surface);
  border: 1px solid var(--d-gline);
  border-top: 2px solid var(--d-gold);
  border-radius: 8px;
  padding: 32px 34px 36px;
  box-shadow: rgba(0, 0, 0, 0.55) 0 26px 64px -16px;
}
@media (max-width: 810px) {
  html.kore-dark .quote { padding: 22px 18px 26px; border-radius: 6px; }
}
/* the panel supplies the top margin now, so the first step should not add its own */
html.kore-dark .quote > .qs:first-child { padding-top: 0; }

/* ---------------------------------------------------------- quote builder */
html.kore-dark .qs { border-top-color: var(--d-line); }
html.kore-dark .qs-t { color: var(--d-text); }
html.kore-dark .qs-n { color: var(--d-gold); }
html.kore-dark .kqb-lab,
html.kore-dark .qsum-lab { color: var(--d-text-3); }
html.kore-dark .qwhen-note { color: var(--d-text-3); }
/* .kqb-note is NOT .qwhen-note -- I had styled only the latter, so the
   booking-hours warning stayed --kore-feat on a dark card at 1.97:1 */
html.kore-dark .kqb-note {
  background: rgba(185, 151, 88, 0.14);
  color: var(--d-text-2);
}

/* option tiles: size, group, package row, add-on row all share one treatment */
html.kore-dark .qsize-o,
html.kore-dark .qg,
html.kore-dark .kqb-add,
html.kore-dark .kqb-input,
html.kore-dark .qpkgs {
  background: var(--d-raised);
  /* --d-line (#2C2720) is a structural hairline and reads 1.28:1 against the
     ground -- fine for a divider, not for the edge of something you click.
     #776850 is 3.51:1 vs the ground and 3.30:1 vs the fill (WCAG 1.4.11),
     without lifting the surfaces themselves. */
  border-color: #776850;
  color: var(--d-text-2);
}
html.kore-dark .qsize-o:hover,
html.kore-dark .qg:hover,
html.kore-dark .kqb-add:hover { border-color: var(--d-gline); }

html.kore-dark .qg-n { color: var(--d-text); }
html.kore-dark .qg-s { color: var(--d-text-3); }
/* the group cards lifted to L2/L3, and --d-gold is calibrated for the ground;
   the highlight gold keeps this legible on the lighter card */
html.kore-dark .qg-from { color: var(--d-gold-hi); }

/* selected: a raised warm surface plus gold, not a colour swap */
html.kore-dark .qsize-o:has(:checked),
html.kore-dark .qg.is-on {
  background: var(--d-sel) !important;
  border-color: var(--d-gold) !important;
  color: var(--d-text) !important;
}
html.kore-dark .qg.is-on .qg-s { color: var(--d-text-2); }

html.kore-dark .qp { border-bottom-color: var(--d-line); }
html.kore-dark .qp-main { background: var(--d-raised); }
html.kore-dark .qp:not(.is-on) .qp-main:hover { background: var(--d-sel); }
html.kore-dark .qp.is-on { background: var(--d-sel) !important; }
/* The selected ring is an INSET box-shadow on the row. An inset shadow paints
   above the element's own background but BELOW its children's, so giving
   .qp-main an opaque fill covered the ring across the header -- leaving gold
   only around the spec half. The light theme keeps this child transparent on
   purpose; the dark override has to as well. */
html.kore-dark .qp.is-on .qp-main { background: transparent !important; }
html.kore-dark .qp-name { color: var(--d-text); }
/* lifting the rows to L2 cost this 0.4:1 -- text-3 was calibrated against the
   old darker surface and lands at 4.09:1 on this one */
html.kore-dark .qp-sum { color: var(--d-text-2); }
html.kore-dark .qp-price { color: var(--d-text); }
html.kore-dark .qp-feats { color: var(--d-text-2); }
html.kore-dark .qp-feats li { border-bottom-color: var(--d-line); color: var(--d-text-2); }
/* .qp-mark is a custom span, not a native input, so color-scheme does not
   reach it -- its rgb(255,255,255) fill stayed the brightest thing in the
   package list. The inset ring for the selected state still needs a fill
   to sit on, so it becomes the raised ground rather than nothing. */
html.kore-dark .qp-mark {
  background: var(--d-sel);
  /* #776850 was 3.30:1 against the old row and 2.69:1 against the lifted one;
     a control's state has to stay perceivable (WCAG 1.4.11) */
  border-color: #8A8076;
}
html.kore-dark .qp.is-on .qp-mark {
  border-color: var(--d-gold);
  box-shadow: inset 0 0 0 3px var(--d-gold);
}

html.kore-dark .kqb-add { color: var(--d-text-2); }
html.kore-dark .kqb-add-p { color: var(--d-gold); }
html.kore-dark .kqb-add.is-inc {
  background: rgba(242, 237, 227, 0.04);
  color: var(--d-text-3);
}
html.kore-dark .kqb-add:has(:checked) { border-color: var(--d-gold); color: var(--d-text); }
html.kore-dark .kqb-input { color: var(--d-text); }
html.kore-dark .kqb-input::placeholder { color: rgba(242, 237, 227, 0.58); }   /* 0.38 was 3.24:1 */
/* the date picker glyph is handled by color-scheme: dark, not a filter hack */
html.kore-dark .kqb-ac-list {
  background: var(--d-raised);
  border-color: #776850;   /* 0.34 gold was 1.82:1 against the page */
  /* the light shadow is invisible here; the popup needs to detach from the page */
  box-shadow: rgba(0, 0, 0, 0.6) 0 14px 34px 0;
}
/* the rows set their own colour (--kore-ink), so setting it on the <ul> above
   did nothing -- the suggestions stayed near-black on a near-black popup */
html.kore-dark .kqb-ac-list li { color: var(--d-text); }
html.kore-dark .kqb-ac-list li:hover,
html.kore-dark .kqb-ac-list li.is-on { background: rgba(185, 151, 88, 0.26); color: #F7F3EA; }

/* the summary is already ink; retune it to the warm palette */
html.kore-dark .qsum-in {
  background: var(--d-raised);
  border-color: var(--d-gline);
  box-shadow: rgba(0, 0, 0, 0.45) 0 18px 44px 0;
}
html.kore-dark .qsum-in .qnote { background: rgba(242, 237, 227, 0.045); }

/* ---------------------------------------------------------------- reviews */
html.kore-dark .kore-reviews { background: var(--d-ground); }
html.kore-dark .krv-bubble {
  background: var(--d-surface);
  border-color: var(--d-gline);
}
html.kore-dark .krv-bubble::after {
  background: var(--d-surface);
  border-right-color: var(--d-gline);
  border-bottom-color: var(--d-gline);
}
html.kore-dark .krv-title { color: var(--d-text); }
html.kore-dark .krv-name { color: var(--d-text); }
html.kore-dark .krv-bubble blockquote { color: var(--d-text-2); }
html.kore-dark .krv-stars { color: var(--d-gold-hi); }

/* ------------------------------------------------------- sticky bar ------
   It is fixed, starts hidden, and only slides in on scroll-up -- so a surface
   audit taken at the top of the page never sees it. It stayed
   rgba(255,255,255,.82), a white bar carrying cream social icons: 1.22:1. */
html.kore-dark .kore-bar {
  background: rgb(18, 16, 12);
  border-bottom-color: var(--d-line);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  html.kore-dark .kore-bar { background: rgba(18, 16, 12, 0.86); }
}
html.kore-dark .kore-bar-name { color: var(--d-text); }
/* the bar mark ships as the dark variant for the light theme; content:
   url() swaps the rendered image without a second <img> in the markup */
html.kore-dark .kore-bar-logo { content: url("../assets/img/kore-mark-r34-light-41ed700d.png"); }

/* ------------------------------------------------- gated step headings ---
   .qs.is-wait dims the whole heading to .32 and recolours the numeral to
   --kore-veh. On cream that lands fine; on ink it composites to 3.35:1. The
   step is still readable text, so it gets a legible mute instead. */
html.kore-dark .qs.is-wait .qs-h { opacity: .8; }
html.kore-dark .qs.is-wait .qs-t { color: var(--d-text-2); }
html.kore-dark .qs.is-wait .qs-n { color: var(--d-gold); }

/* ---------------------------------------------------------------- footer */
html.kore-dark .kore-footer-info { background: var(--d-surface); }
html.kore-dark [data-framer-name="KoreDetail Footer"] { background-color: var(--d-ground) !important; }

/* --------------------------------------------------------- contact modal */
html.kore-dark .kqb { background: var(--d-surface); color: var(--d-text); }
html.kore-dark .kqb-h { color: var(--d-text); }
html.kore-dark .kqb-foot { background: var(--d-raised); border-top-color: var(--d-line); }
/* The close button carries its own cream disc, so darkening the dialog left
   a cream circle with a cream glyph on it: 1.04:1. */
/* ONE shape, drawn geometrically.
   What was here: a 32px background sitting inside a 46px box-shadow ring, so
   the "disc" was two circles that happened to share a colour. Changing the fill
   on hover revealed them as two. And the glyph was the text character &times;,
   so where it landed depended on Inter's font metrics rather than on the centre
   of the button.
   Now: one 44px circle (also a better pointer target than 32), and the cross is
   two bars in the same grid cell, rotated -- centred by geometry, immune to the
   font. Position compensates for the size change so the visual centre does not
   move: 8+22 = 14+16, 10+22 = 16+16. */
html.kore-dark .kqb-x {
  top: 8px; right: 10px;
  width: 44px; height: 44px;
  background: var(--d-raised);
  box-shadow: none;
  font-size: 0;                     /* retires the &times; glyph; aria-label carries the name */
  transition: background-color .2s ease;
}
/* Absolute, not grid. Grid centring put the cross 11px high: the &times; text
   node is still a child, both pseudos claim cell 1/1, so auto-placement pushed
   the text into a SECOND ROW and "centred" the bars in the top row only.
   Positioning off the button's own box ignores the text node entirely. */
html.kore-dark .kqb-x::before,
html.kore-dark .kqb-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1.5px; border-radius: 1px;
  background: var(--d-text-2);
  transition: background-color .2s ease;
}
html.kore-dark .kqb-x::before { transform: translate(-50%, -50%) rotate(45deg); }
html.kore-dark .kqb-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* hover moves the ONE circle, and brightens the cross with it */
html.kore-dark .kqb-x:hover,
html.kore-dark .kqb-x:focus-visible { background: var(--d-sel); }
html.kore-dark .kqb-x:hover::before, html.kore-dark .kqb-x:hover::after,
html.kore-dark .kqb-x:focus-visible::before, html.kore-dark .kqb-x:focus-visible::after {
  background: var(--d-text);
}
/* keyboard focus rings OUTSIDE the circle rather than adding another fill */
html.kore-dark .kqb-x:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html.kore-dark .kqb-x, html.kore-dark .kqb-x::before, html.kore-dark .kqb-x::after {
    transition: none;
  }
}

/* ------------------------------------------------------------------ gold --
   #9B7A3F was chosen to survive on cream. On these grounds it is muddy, and
   ink-on-#9B7A3F was already 4.49:1. The whole gold family shifts up. */
html.kore-dark {
  --kore-gold: #B99758;
  --kore-gold-text: #D9BE86;
  --kore-gold-line: rgba(185, 151, 88, 0.30);
}
html.kore-dark .kqb-send,
html.kore-dark .kqb-bundle-b { background: var(--d-gold); color: #12100C; }
html.kore-dark .kqb-send[disabled] {
  background: rgba(185, 151, 88, 0.22);
  color: rgba(242, 237, 227, 0.78);   /* 0.62 fell to 4.43:1 on the lifted card */
}

/* --------------------------------------------------- audit fixes, round 1 --
   Found by measuring every text node against its own painted ground, not by
   eye. Four were mine to begin with; two the value-match broke. */

/* inherits its colour, so the value-matched rules never reached it */
html.kore-dark [data-framer-name="Coverage Heading"],
html.kore-dark [data-framer-name="Coverage Heading"] h2,
html.kore-dark [data-framer-name="Coverage Heading"] .framer-text {
  --framer-text-color: var(--d-text) !important;
  color: var(--d-text) !important;
}

/* the price was 1.08:1 -- effectively invisible. I had targeted .qp-price;
   the class is .qp-amt. */
html.kore-dark .qp-amt { color: var(--d-text); }
html.kore-dark .qp-dur { color: var(--d-text-2); }
html.kore-dark .kqb-f legend { color: var(--d-text-2); }

/* --kore-req #B3261E is tuned for cream and reads 2.91:1 here */
html.kore-dark .kqb-req { color: #E8938C; }

/* #171715 marks BOTH body text on a light ground and labels on gold buttons.
   The value match flipped both; gold buttons keep dark labels. */
html.kore-dark [data-framer-name="Button Label"],
html.kore-dark [data-framer-name="Button Label"] p,
html.kore-dark [data-framer-name="Button Label"] .framer-text {
  --framer-text-color: #12100C !important;
  color: #12100C !important;
}