/* ============================================================================
   Kinetic Repair Marketplace — stylesheet

   Two parts:
     1. DESIGN TOKENS — the Kinetic brand values, copied from the design
        system (_reference/tokens/*.css). Colours, type, spacing and shape all
        come from here. Use a --k-* token rather than a literal value.
     2. PAGE STYLES — the classes this page is built from. The design system
        used to ship these as React components that wrote inline styles; the
        rules below reproduce exactly what those components rendered, plus the
        real :hover and @media rules the runtime used to synthesise.

   Breakpoints, matching the original page: 479px, 767px, 1023px.
   ========================================================================= */


/* ===========================================================================
   1. DESIGN TOKENS
   ========================================================================= */

/* --- Denim, the only Kinetic brand typeface. Static weights. ------------- */
@font-face{font-family:"Denim";src:url("fonts/Denim-Light.woff") format("woff");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Medium.woff") format("woff");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-SemiBold.woff") format("woff");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Bold.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Heavy.woff") format("woff");font-style:normal;font-weight:800;font-display:swap}

:root{
  /* Primitive palette — the only legal colours */
  --k-color-violet:#6f41e1;
  --k-color-lavender:#c5aeff;
  --k-color-paper:#f1f1eb;
  --k-color-steel:#d6dcdf;
  --k-color-ink:#262626;
  --k-color-slate:#6c6f70;
  /* Slate darkened to clear 4.5:1 on Paper and Steel. The #6C6F70 primitive
     above is production-site heritage and is legal only for large text,
     rules, and graphics. */
  --k-color-slate-text:#575a5b;
  --k-color-white:#ffffff;
  --k-color-black:#000000;

  /* Semantic — light (default) */
  --k-bg-canvas:var(--k-color-paper);
  --k-bg-surface:var(--k-color-white);
  --k-bg-subtle:var(--k-color-steel);
  --k-bg-inverse:var(--k-color-ink);
  --k-text-primary:var(--k-color-ink);
  --k-text-accent:var(--k-color-violet);
  --k-text-inverse:var(--k-color-paper);
  --k-text-muted:var(--k-color-slate-text);
  --k-border-default:rgb(38 38 38 / 26%);
  --k-border-hairline:rgb(38 38 38 / 14%);
  --k-border-strong:var(--k-color-ink);
  --k-action-primary:var(--k-color-violet);
  --k-action-primary-text:var(--k-color-white);
  --k-action-primary-hover:var(--k-color-ink);
  --k-action-primary-hover-text:var(--k-color-paper);
  --k-focus-ring:var(--k-color-violet);

  /* Media overlay — flat Ink, never a gradient */
  --k-overlay-media:rgb(38 38 38 / 46%);
  --k-overlay-media-min:rgb(38 38 38 / 28%);
  --k-overlay-media-max:rgb(38 38 38 / 58%);

  /* Typography */
  --k-font-sans:"Denim",Arial,Helvetica,sans-serif;
  --k-weight-light:300;
  --k-weight-regular:400;
  --k-weight-medium:500;
  --k-weight-semibold:600;
  --k-weight-bold:700;
  --k-weight-heavy:800;

  /* Fluid roles — tuned to the live site's 102 / 53 / 27 px hierarchy at 1363px */
  --k-type-display-xl:clamp(4rem,7.5vw,7rem);
  --k-leading-display-xl:0.95;
  --k-type-display-lg:clamp(3.25rem,5.7vw,5.125rem);
  --k-leading-display-lg:0.94;
  --k-type-h1:clamp(2.625rem,4.5vw,4rem);
  --k-leading-h1:1.02;
  --k-type-h2:clamp(2.25rem,3.7vw,3.3125rem);
  --k-leading-h2:1.1;
  --k-type-h3:clamp(1.5rem,2vw,1.75rem);
  --k-leading-h3:1.2;
  --k-type-h4:clamp(1.25rem,1.55vw,1.375rem);
  --k-leading-h4:1.3;
  --k-type-body-lg:clamp(1.125rem,1.45vw,1.375rem);
  --k-leading-body-lg:1.45;
  --k-type-body:clamp(1rem,1.2vw,1.125rem);
  --k-leading-body:1.5;
  --k-type-body-sm:0.875rem;
  --k-leading-body-sm:1.5;
  --k-type-label:0.8125rem;
  --k-leading-label:1.3;
  --k-tracking-display:-0.01em;
  --k-tracking-label:0.07em;
  --k-measure-copy:68ch;

  /* Spacing */
  --k-space-0:0;
  --k-space-1:0.25rem;
  --k-space-2:0.5rem;
  --k-space-3:0.75rem;
  --k-space-4:1rem;
  --k-space-5:1.25rem;
  --k-space-6:1.5rem;
  --k-space-8:2rem;
  --k-space-10:2.5rem;
  --k-space-12:3rem;
  --k-space-15:3.75rem;
  --k-space-18:4.5rem;
  --k-space-22:5.5rem;
  --k-space-30:7.5rem;
  --k-space-40:10rem;
  --k-space-50:12.5rem;
  --k-space-60:15rem;

  /* Layout */
  --k-container-max:90rem;
  --k-page-gutter:clamp(1.25rem,2.6vw,2.5rem);
  --k-grid-gap:clamp(1rem,1.9vw,1.875rem);
  --k-section-compact:clamp(4rem,6.8vw,6rem);
  --k-section-default:clamp(6rem,9.5vw,10rem);
  --k-section-spacious:clamp(10rem,13vw,15rem);

  /* Breakpoints (reference values; media queries are authored literally) */
  --k-bp-sm:640px;
  --k-bp-md:768px;
  --k-bp-lg:1024px;
  --k-bp-xl:1280px;

  /* Shape */
  --k-radius-none:0;
  --k-radius-control:0.125rem;
  --k-radius-card:0.25rem;
  --k-border-thin:1px;
  --k-border-emphasis:2px;
  --k-shadow-none:none;
  --k-shadow-overlay:0 0.75rem 2.5rem rgb(38 38 38 / 12%);

  /* Component dimensions */
  --k-header-announcement-height:2.625rem;
  --k-header-height:4.5rem;
  --k-header-height-mobile:4rem;
  --k-control-height:3rem;
  --k-control-height-lg:3.5rem;
  --k-control-min-width:8.5rem;
  --k-input-height:3.25rem;
  --k-textarea-min-height:9rem;
  --k-touch-min:2.75rem;
  --k-icon-sm:1.25rem;
  --k-icon-md:1.5rem;
  --k-icon-brand:3rem;

  /* Motion */
  --k-duration-fast:150ms;
  --k-duration-base:250ms;
  --k-duration-reveal:650ms;
  --k-ease-standard:cubic-bezier(0.4,0,0.2,1);
  --k-ease-out:cubic-bezier(0.22,1,0.36,1);
  --k-arrow-travel:6px;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --k-duration-fast:0ms;
    --k-duration-base:0ms;
    --k-duration-reveal:0ms;
    --k-arrow-travel:0px;
  }
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--k-color-paper);
  color:var(--k-text-primary);
  font-family:var(--k-font-sans);
  font-size:var(--k-type-body);
  line-height:var(--k-leading-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  /* The how-it-works clip is deliberately wider than its column (100vw with a
     negative margin), so the page must not grow a horizontal scrollbar. */
  overflow-x:hidden;
}

a{color:var(--k-color-violet);text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{color:var(--k-color-ink)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}
img,svg,video{max-width:100%}

/* In-page navigation glides rather than jumps — unless the visitor has asked
   their system for less motion, in which case everything stops moving. */
html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0s !important;transition-duration:0s !important}
}


/* ===========================================================================
   2. PAGE STYLES
   ========================================================================= */

/* --- Skip link ----------------------------------------------------------- */
/* Parked off-screen until it takes keyboard focus, so the first Tab on the
   page jumps a screen-reader or keyboard user straight past the header. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:60;
  padding:12px 20px;
  background:var(--k-color-ink);
  color:var(--k-color-paper);
  font-weight:500;
}
.skip-link:focus{left:20px;top:8px}


/* --- Buttons ------------------------------------------------------------- */
/* One class for every call to action on the page, whether it is an <a> or a
   <button>. --sm is the header's compact variant, --full stretches to the
   width of its container (the mobile sticky bar). */
.k-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--k-space-3);
  min-height:var(--k-control-height-lg);
  min-width:var(--k-control-min-width);
  padding:0 var(--k-space-6);
  border:1px solid transparent;
  border-radius:var(--k-radius-control);
  background:var(--k-action-primary);
  color:var(--k-action-primary-text);
  font-family:var(--k-font-sans);
  font-size:16px;
  font-weight:var(--k-weight-medium);
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--k-duration-fast) var(--k-ease-standard),
             color var(--k-duration-fast) var(--k-ease-standard);
}
.k-button:hover{
  background:var(--k-action-primary-hover);
  color:var(--k-action-primary-hover-text);
}
.k-button:disabled{opacity:.6;cursor:progress}

.k-button--sm{
  min-height:2.5rem;
  min-width:0;
  padding:0 var(--k-space-5);
  font-size:15px;
}

.k-button--full{min-width:100%;width:100%}


/* --- Arrow link ---------------------------------------------------------- */
/* An underlined link with an arrow that slides forward on hover. The travel
   distance is a token, and it is 0 under prefers-reduced-motion. */
.k-arrow-link{
  display:inline-flex;
  align-items:center;
  gap:var(--k-space-3);
  min-height:var(--k-touch-min);
  color:var(--k-text-accent);
  font-size:var(--k-type-body);
  font-weight:var(--k-weight-medium);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:7px;
}
.k-arrow-link__arrow{
  transform:none;
  transition:transform var(--k-duration-base) var(--k-ease-standard);
}
.k-arrow-link:hover .k-arrow-link__arrow{transform:translateX(var(--k-arrow-travel))}


/* --- Uppercase eyebrow label --------------------------------------------- */
/* No line-height here on purpose: a label written straight into the page copy
   inherits the body's 1.5, and only the ones the design system's own Label
   component produced (inside a metric, and in the footer) tighten it to
   --k-leading-label. Setting it here made every eyebrow 3px shorter than the
   original. */
.k-label{
  margin:0;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
}
.metric .k-label,
.site-footer__group .k-label{line-height:var(--k-leading-label)}


/* --- Sections ------------------------------------------------------------ */
/* Every band on the page is a .k-section: full-bleed background, gutters on
   the outside, and an inner wrapper that caps the content at the container
   width and centres it. Theme modifiers set the background and text colour. */
.k-section{
  padding:var(--k-section-default) var(--k-page-gutter);
  background:var(--k-color-paper);
  color:var(--k-color-ink);
}
.k-section--compact{padding-block:var(--k-section-compact)}
.k-section__inner{max-width:var(--k-container-max);margin:0 auto}

.k-section--white{background:var(--k-color-white);color:var(--k-color-ink)}
.k-section--paper{background:var(--k-color-paper);color:var(--k-color-ink)}
.k-section--ink{background:var(--k-color-ink);color:var(--k-color-paper)}

/* The how-it-works band is a shade lighter than Ink so the demo's own black
   letterboxing does not disappear into the page. */
.k-section--charcoal{background:#2b2b2b;color:var(--k-color-paper)}

/* On an Ink or charcoal band the hairline rules have to be light-on-dark. */
.k-section--ink,
.k-section--charcoal{
  --k-border-hairline:rgb(241 241 235 / 28%);
  --k-border-strong:var(--k-color-paper);
}


/* --- Section headings ---------------------------------------------------- */
.k-h2{
  margin:0;
  color:var(--k-color-violet);
  font-size:var(--k-type-h2);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h2);
  letter-spacing:var(--k-tracking-display);
  text-wrap:pretty;
}
/* Violet does not clear contrast on Ink, so dark bands use Lavender. */
.k-section--ink .k-h2,
.k-section--charcoal .k-h2{color:var(--k-color-lavender)}


/* ===========================================================================
   Header
   ========================================================================= */
.site-header{
  position:relative;
  min-height:var(--k-header-height);
  display:flex;
  align-items:center;
  gap:var(--k-grid-gap);
  padding:0 var(--k-page-gutter);
  border-bottom:1px solid var(--k-border-hairline);
  background:rgb(241 241 235 / 96%);
}
.site-header__logo{line-height:0;flex:0 0 auto}
.site-logo{display:block;color:var(--k-color-violet);overflow:visible}

.site-nav{display:flex;align-items:center;gap:clamp(24px,3vw,40px);margin:0 auto}
.site-nav a{
  color:var(--k-color-violet);
  font-size:15px;
  font-weight:var(--k-weight-medium);
  text-decoration-line:none;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--k-color-violet);text-decoration-line:underline}

.site-header__actions{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--k-space-4);
}

/* Below 1024px the nav drops onto its own row under the logo and CTA, and
   scrolls sideways if the four links do not fit. */
/* The original also carried `padding-top:10px;padding-bottom:10px` here, but
   it never took effect: the header's padding was an inline style, which wins
   over a stylesheet rule that is not !important. Reproducing it would make
   the header 20px taller than the live page, so it is deliberately left out. */
@media (max-width:1023px){
  .site-header{flex-wrap:wrap}
  .site-nav{order:3;width:100%;margin:0;gap:20px;overflow-x:auto;padding-bottom:4px}
  .site-nav a{padding:8px 0;min-height:44px;display:flex;align-items:center}
  .site-header__logo .site-logo{width:132px;height:auto}
}


/* ===========================================================================
   Hero
   ========================================================================= */
.hero{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--k-color-paper)}

/* Both columns pad out to the page gutter on their outer edge, and to half
   the leftover space once the viewport is wider than the container — which is
   what keeps the copy aligned with every section below it. */
.hero__copy{
  flex:1 1 460px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--k-color-paper);
  color:var(--k-color-ink);
  padding:clamp(48px,6vw,104px) var(--k-page-gutter) clamp(44px,5vw,88px)
          max(var(--k-page-gutter), calc((100vw - var(--k-container-max)) / 2));
}

.hero__heading{
  margin:0;
  max-width:16ch;
  font-size:var(--k-type-h1);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h1);
  letter-spacing:var(--k-tracking-display);
  text-wrap:pretty;
}
.hero__heading em{font-style:normal;color:var(--k-color-violet)}

.hero__lede{
  margin:var(--k-space-8) 0 0;
  max-width:52ch;
  font-size:var(--k-type-body-lg);
  line-height:var(--k-leading-body-lg);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--k-space-6);
  margin-top:var(--k-space-10);
}

/* Google rating badge */
.hero__rating{
  display:inline-flex;
  align-self:flex-start;
  width:fit-content;
  align-items:center;
  gap:var(--k-space-4);
  margin-top:var(--k-space-6);
  min-height:44px;
  color:inherit;
  text-decoration:none;
}
.hero__rating:hover{color:var(--k-text-accent)}
.hero__rating img{display:block;width:24px;height:24px;object-fit:contain}
.hero__rating-stars{font-size:16px;letter-spacing:.08em;color:var(--k-text-accent)}
.hero__rating-score{font-size:15px;font-weight:var(--k-weight-medium)}

/* Press logos */
.hero__press{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--k-space-4) var(--k-space-6);
  margin-top:var(--k-space-8);
  padding-top:var(--k-space-6);
  border-top:1px solid var(--k-border-hairline);
}
.hero__press-label{
  margin:0;
  flex:0 0 auto;
  font-size:14px;
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-text-muted);
}
.hero__press-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-space-4) var(--k-space-6)}
.hero__press-logos a{display:inline-flex;align-items:center;min-height:44px}
/* The original declared a hover of `opacity:1` with no base opacity to return
   from, so it does nothing. Carried over as-is rather than "improved" into a
   fade, which would make the logos lighter than the live page. */
.hero__press-logos a:hover{opacity:1}
.hero__press-logos img{display:block;width:auto;object-fit:contain}

/* Each logo is a different lock-up, so they are matched by optical height
   rather than by a single value. */
.hero__press-logos img[alt="CNBC"]{height:34px}
.hero__press-logos img[alt="Business Insider"]{height:28px}
.hero__press-logos img[alt="Axios"]{height:18px}
.hero__press-logos img[alt="FenderBender"]{height:30px}

/* --- Hero form column ---------------------------------------------------- */
.hero__form{
  flex:1 1 480px;
  display:flex;
  align-items:center;
  border-left:1px solid var(--k-border-hairline);
  background:var(--k-color-white);
  color:var(--k-color-ink);
  padding:clamp(40px,5vw,80px) max(var(--k-page-gutter), calc((100vw - var(--k-container-max)) / 2))
          clamp(40px,5vw,80px) var(--k-page-gutter);
}
.hero__form-panel{width:100%;max-width:480px}

.hero__form-eyebrow{
  margin:0 0 var(--k-space-5);
  font-size:16px;
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-color-violet);
}
.hero__form-heading{
  margin:0 0 var(--k-space-8);
  font-size:var(--k-type-body-lg);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h2);
  letter-spacing:var(--k-tracking-display);
  text-wrap:pretty;
}

/* The confirmation that replaces the panel once a submission lands. */
.hero__form-confirmation{
  width:100%;
  max-width:480px;
  text-align:center;
}
.hero__form-confirmation p{
  margin:0;
  font-size:var(--k-type-body-lg);
  font-weight:var(--k-weight-medium);
  color:var(--k-color-violet);
}

/* --- Hero film ----------------------------------------------------------- */
/* OPTIONAL FEATURE, OFF BY DEFAULT. None of these rules match anything unless
   SITE_CONFIG.heroVideo.enabled is true, in which case app.js builds the
   markup below. They are not dead code -- do not delete them.

   Sits full width under the two hero columns (flex-basis 100% puts it on its
   own row). Nothing loads from Vimeo until the visitor presses Play. */
.hero__media{
  flex:1 1 100%;
  position:relative;
  aspect-ratio:16 / 9;
  max-height:clamp(280px,40vw,560px);
  background:var(--k-color-black);
  overflow:hidden;
}
.hero__media-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}
.hero__media-scrim{
  position:absolute;
  inset:0;
  background:var(--k-color-ink);
  opacity:.34;
  pointer-events:none;
}
.hero__media-playwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero__media-play{
  display:inline-flex;
  align-items:center;
  gap:var(--k-space-4);
  min-height:56px;
  padding:0 var(--k-space-6);
  background:var(--k-color-lavender);
  color:var(--k-color-ink);
  border:0;
  border-radius:var(--k-radius-control);
  font-family:inherit;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--k-duration-fast) var(--k-ease-standard);
}
.hero__media-play:hover{background:var(--k-color-paper)}
/* A CSS triangle, so there is no icon file to load. */
.hero__media-play-glyph{
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid currentColor;
}
.hero__media-frame{position:absolute;inset:0;width:100%;height:100%;border:0}

/* The mute control appears only once the Vimeo player is on screen. It drives
   the player through its API rather than the iframe's own volume button, so
   the state stays in sync with the label. */
.hero__media-mute{
  position:absolute;
  right:var(--k-space-4);
  bottom:var(--k-space-4);
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:var(--k-touch-min);
  padding:0 var(--k-space-5);
  background:rgb(38 38 38 / 72%);
  color:var(--k-color-paper);
  border:1px solid rgb(241 241 235 / 42%);
  border-radius:var(--k-radius-control);
  font-family:inherit;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  cursor:pointer;
}
.hero__media-mute:hover{background:var(--k-color-ink)}

/* On a phone the hero headline would otherwise run to four lines, and the
   section headings are dropped a step with it.

   `main h2` is deliberately blunt and carries !important, exactly as the
   original page did: it has to beat both the .k-h2 class and the larger
   --k-type-h1 on the final call to action. It therefore also catches the
   heading above the hero form, which lands at the same size as a section
   heading on a phone. That is what the live page does; do not "fix" it here
   without checking the design against a real phone first. */
@media (max-width:479px){
  .hero__heading{font-size:clamp(2rem,8.6vw,2.6rem);line-height:1.05}
  main h2{font-size:clamp(1.75rem,7.4vw,2.25rem) !important;line-height:1.1 !important}
}


/* ===========================================================================
   Form controls
   ========================================================================= */
.hero-form{display:grid;gap:var(--k-space-5)}

.k-field{display:grid;gap:var(--k-space-2)}
.k-field__label{font-size:14px;font-weight:var(--k-weight-medium);line-height:1.4}
.k-field__required{color:var(--k-text-muted)}

.k-input,
.k-select{
  height:var(--k-input-height);
  width:100%;
  padding:0 var(--k-space-4);
  border:1px solid var(--k-border-strong);
  border-radius:var(--k-radius-control);
  box-shadow:none;
  outline:none;
  background:transparent;
  color:inherit;
}
.k-input:focus-visible,
.k-select:focus-visible{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}

/* A native select with the UA arrow replaced by one drawn in the background,
   so the control matches the text inputs beside it. Used only by the optional
   location dropdown (SITE_CONFIG.form.showLocationField), which is off today. */
.k-select{
  appearance:none;
  padding-right:var(--k-space-10);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

/* The field-level validation message under the phone input. */
.k-field__error{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--k-color-violet);
}

/* SMS consent */
.form-consent{
  display:flex;
  gap:var(--k-space-4);
  align-items:flex-start;
  font-size:13px;
  line-height:1.6;
  cursor:pointer;
}
.form-consent input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--k-color-violet);
}

/* "Already have an estimate?" block */
.form-estimate{
  padding:var(--k-space-6) 0;
  border-top:1px solid var(--k-border-hairline);
  border-bottom:1px solid var(--k-border-hairline);
}
.form-estimate__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--k-space-6);
  margin-bottom:var(--k-space-3);
}
.form-estimate__legend{
  margin:0;
  padding:0;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-color-violet);
}
.form-estimate__choices{display:flex;gap:var(--k-space-6);align-items:center}
.form-radio{
  display:inline-flex;
  align-items:center;
  gap:var(--k-space-3);
  min-height:44px;
  font-size:14px;
  cursor:pointer;
}
.form-radio input{width:18px;height:18px;accent-color:var(--k-color-violet)}
.form-estimate__help{margin:0;font-size:13px;line-height:1.6;color:var(--k-text-muted)}

.form-upload{margin-top:var(--k-space-5)}
/* The real file input is hidden and the label is the control, because a UA
   file button cannot be styled. The label keeps a 44px target. */
.form-upload__button{
  display:inline-flex;
  align-items:center;
  gap:var(--k-space-4);
  min-height:44px;
  padding:0 var(--k-space-6);
  border:1px solid var(--k-color-violet);
  border-radius:var(--k-radius-control);
  color:var(--k-color-violet);
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-medium);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  cursor:pointer;
}
.form-upload__button:hover{background:var(--k-color-violet);color:var(--k-color-white)}
/* Focus has to be drawn on the label: the input it belongs to is invisible. */
.form-upload__button:focus-within{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}
.form-upload__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.form-upload__filename{margin:var(--k-space-4) 0 0;font-size:13px;line-height:1.6;color:var(--k-color-ink)}

/* Whole-form failure message, appended under the submit button. */
.form-error{margin:0;font-size:13px;line-height:1.6;color:var(--k-color-violet)}

[hidden]{display:none !important}


/* ===========================================================================
   How it works
   ========================================================================= */
.how__heading{
  margin:0 0 clamp(28px,3vw,48px);
  padding-bottom:var(--k-space-8);
  border-bottom:1px solid var(--k-border-strong);
}
/* Full-bleed: the clip breaks out of the section's gutters to the window
   edges. The aspect-ratio is set from JS, because it changes with the cut. */
.how__video{
  display:block;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  height:auto;
  background:var(--k-color-paper);
}


/* ===========================================================================
   Reviews
   ========================================================================= */
.reviews__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--k-space-6);
  padding-bottom:var(--k-space-8);
  border-bottom:1px solid var(--k-border-strong);
}
.reviews__head-title{flex:1 1 420px}
.reviews__aggregate{margin:0;font-size:var(--k-type-body-sm);color:var(--k-text-muted)}
.reviews__aggregate a{
  color:var(--k-color-violet);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.reviews__aggregate a:hover{color:var(--k-color-ink)}

.reviews__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--k-grid-gap);
}
.review{padding-top:var(--k-space-6);border-top:1px solid var(--k-border-hairline)}
.review__head{display:flex;align-items:center;gap:var(--k-space-4)}
.review__avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:50%;
  background:var(--k-color-steel);
  color:var(--k-color-ink);
  font-size:16px;
  font-weight:var(--k-weight-medium);
}
.review__name{margin:0;font-size:var(--k-type-body-sm);font-weight:var(--k-weight-medium)}
.review__meta{display:flex;align-items:center;gap:var(--k-space-3);margin-top:4px}
.review__stars{display:flex;gap:3px}
/* A five-pointed star drawn with a clip-path, so no icon font is needed. */
.review__star{
  width:13px;
  height:13px;
  background:var(--k-color-violet);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.review__source{
  font-size:var(--k-type-label);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-text-muted);
}
.review__quote{
  margin:var(--k-space-5) 0 0;
  max-width:46ch;
  font-size:var(--k-type-body-sm);
  line-height:1.6;
  text-wrap:pretty;
}
/* A long quote is cut to three lines until "Read more" is pressed. */
.review__quote--clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review__toggle{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:var(--k-space-2);
  padding:0;
  background:none;
  border:0;
  color:var(--k-color-violet);
  font-family:inherit;
  font-size:var(--k-type-body-sm);
  font-weight:var(--k-weight-medium);
  text-decoration:underline;
  text-underline-offset:5px;
  cursor:pointer;
}
.review__toggle:hover{color:var(--k-color-ink)}


/* ===========================================================================
   Problem / appraisal packet
   ========================================================================= */
.split{display:flex;flex-wrap:wrap;gap:var(--k-grid-gap) clamp(32px,5vw,96px)}
.split__title{flex:1 1 420px;margin:0}
.split__body{flex:1 1 380px;align-self:end;display:grid;gap:var(--k-space-6)}
.split__body p{margin:0;max-width:var(--k-measure-copy)}

.packet{margin-top:clamp(40px,4vw,64px)}
.packet__label{margin:0 0 var(--k-space-6)}
.packet__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--k-space-5) var(--k-grid-gap);
}
.packet__list li{
  padding-top:var(--k-space-4);
  border-top:1px solid var(--k-border-hairline);
  font-size:var(--k-type-body-sm);
}
.packet__caveat{
  margin:var(--k-space-8) 0 0;
  max-width:var(--k-measure-copy);
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}


/* ===========================================================================
   What it evaluates
   ========================================================================= */
.evaluates__intro{margin-bottom:clamp(48px,6vw,96px)}
.evaluates__intro h2{max-width:24ch}
.evaluates__intro p{margin:var(--k-space-8) 0 0;max-width:var(--k-measure-copy)}

.media-split{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,64px)}
.media-split__media{flex:3 1 420px}
.media-split__media video{width:100%;height:auto;display:block;background:var(--k-color-ink)}
.media-split__copy{flex:2 1 320px}
.media-split__copy .k-label{margin:0 0 var(--k-space-5)}
.media-split__copy h3{
  margin:0;
  font-size:var(--k-type-h3);
  font-weight:var(--k-weight-regular);
  line-height:var(--k-leading-h3);
  text-wrap:pretty;
}
/* :not(.k-label) so the eyebrow above the heading keeps the label type; a
   bare `.media-split__copy p` outranks .k-label and silently resized it. */
.media-split__copy p:not(.k-label){
  margin:var(--k-space-5) 0 0;
  max-width:var(--k-measure-copy);
  font-size:var(--k-type-body-sm);
  line-height:1.6;
}

/* --- Metrics ------------------------------------------------------------- */
.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--k-grid-gap);
  margin-top:clamp(48px,6vw,88px);
}
.metric{padding-top:var(--k-space-6);border-top:1px solid var(--k-border-hairline)}
.metric .k-label{margin:0 0 var(--k-space-5)}
.metric__value{
  display:flex;
  align-items:baseline;
  gap:.12em;
  margin:0;
  color:var(--k-text-accent);
  font-size:var(--k-type-display-lg);
  font-weight:var(--k-weight-light);
  line-height:.95;
  letter-spacing:-0.02em;
}
.metric__unit{font-size:.4em;font-weight:var(--k-weight-regular);letter-spacing:0}
.metric__definition{
  margin:var(--k-space-4) 0 0;
  max-width:34ch;
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}


/* ===========================================================================
   Why Kinetic
   ========================================================================= */
.why__head{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(32px,5vw,96px);
  margin-bottom:clamp(48px,6vw,88px);
}
.why__head h2{flex:1 1 380px}
.why__head p{
  flex:1 1 420px;
  align-self:end;
  margin:0;
  max-width:var(--k-measure-copy);
  font-size:var(--k-type-body-lg);
  line-height:var(--k-leading-body-lg);
}
.why__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--k-grid-gap);
}
.why__list li{padding-top:var(--k-space-6);border-top:1px solid var(--k-border-hairline)}
.why__list h3{
  margin:0;
  color:var(--k-color-lavender);
  font-size:var(--k-type-h4);
  font-weight:var(--k-weight-medium);
  line-height:var(--k-leading-h4);
}
.why__list p{margin:var(--k-space-3) 0 0;font-size:var(--k-type-body-sm)}
.why__footnote{
  margin:clamp(48px,5vw,80px) 0 0;
  max-width:62ch;
  font-size:var(--k-type-body-sm);
  color:var(--k-color-steel);
}


/* ===========================================================================
   FAQ accordion
   ========================================================================= */
/* Built from <details>/<summary>, so it opens and closes with no JavaScript
   at all and still works if app.js fails to load. The `name` attribute makes
   the group behave as an accordion — opening one closes the rest. */
.faq{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,96px)}
.faq__title{flex:1 1 300px;max-width:34rem}
.faq__items{flex:2 1 440px}

.faq__item{border-top:1px solid var(--k-border-hairline)}
.faq__question{
  width:100%;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--k-space-6);
  padding:var(--k-space-5) 0;
  background:transparent;
  border:0;
  color:inherit;
  font-size:var(--k-type-h4);
  font-weight:var(--k-weight-medium);
  line-height:var(--k-leading-h4);
  text-align:left;
  cursor:pointer;
  /* Suppress the default disclosure triangle in every engine. */
  list-style:none;
}
.faq__question::-webkit-details-marker{display:none}
.faq__question::marker{content:""}
.faq__question:hover{color:var(--k-text-accent)}

/* A plus that loses its upright stroke when the item opens, becoming a minus. */
.faq__icon{
  position:relative;
  flex:0 0 auto;
  width:var(--k-touch-min);
  height:var(--k-touch-min);
}
.faq__icon i{position:absolute;background:currentcolor}
.faq__icon i:first-child{left:11px;top:21px;width:22px;height:1px}
.faq__icon i:last-child{
  left:21px;
  top:11px;
  width:1px;
  height:22px;
  transform:none;
  transition:transform var(--k-duration-fast) var(--k-ease-standard);
}
.faq__item[open] .faq__icon i:last-child{transform:scaleY(0)}

.faq__answer{padding:0 0 var(--k-space-10);max-width:var(--k-measure-copy)}
.faq__answer p{margin:0}


/* ===========================================================================
   Final CTA
   ========================================================================= */
.final{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,96px)}
.final__lead{flex:1 1 380px}
.final__lead h2{
  margin:0;
  color:var(--k-color-lavender);
  font-size:var(--k-type-h1);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h1);
  letter-spacing:var(--k-tracking-display);
}
.final__lead p{
  margin:var(--k-space-8) 0 0;
  max-width:48ch;
  font-size:var(--k-type-body-lg);
  line-height:var(--k-leading-body-lg);
}
.final__aside{flex:1 1 340px;align-self:end}
.final__note{
  margin:var(--k-space-6) 0 0;
  max-width:44ch;
  font-size:var(--k-type-body-sm);
  color:var(--k-color-steel);
}
.final__locations{
  display:grid;
  gap:var(--k-space-5);
  margin-top:var(--k-space-8);
  padding-top:var(--k-space-6);
  border-top:1px solid var(--k-border-hairline);
}
.final__location-city{
  margin:0;
  color:var(--k-color-lavender);
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
}
.final__location-address{
  margin:var(--k-space-2) 0 0;
  font-size:var(--k-type-body-sm);
  line-height:1.6;
  color:var(--k-color-steel);
}
.final__location-link{margin:var(--k-space-2) 0 0}
.final__location-link a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  font-size:var(--k-type-body-sm);
  font-weight:var(--k-weight-medium);
  color:var(--k-color-lavender);
  text-decoration:none;
}
.final__location-link a:hover{color:var(--k-color-paper);text-decoration:underline}

.final__phone{margin:var(--k-space-5) 0 0;font-size:var(--k-type-body-sm)}
.final__phone a{color:var(--k-color-lavender)}

.final__pricing{
  margin-top:var(--k-space-8);
  padding-top:var(--k-space-4);
  border-top:1px solid var(--k-border-hairline);
}
.final__pricing-headline{
  margin:0;
  color:var(--k-color-lavender);
  font-size:var(--k-type-h4);
  font-weight:var(--k-weight-medium);
}
.final__pricing-note{
  margin:var(--k-space-3) 0 0;
  max-width:46ch;
  font-size:var(--k-type-body-sm);
  color:var(--k-color-steel);
}


/* ===========================================================================
   Footer and disclosures
   ========================================================================= */
.site-footer{
  padding:clamp(96px,8vw,120px) var(--k-page-gutter) var(--k-space-8);
  border-top:1px solid var(--k-color-ink);
  background:var(--k-color-paper);
  color:var(--k-color-ink);
}
.site-footer__inner{max-width:var(--k-container-max);margin:0 auto}
.site-footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--k-grid-gap)}
.site-footer__brand{grid-column:1 / span 3}
.site-footer__contact{margin:var(--k-space-6) 0 0;font-size:var(--k-type-body-sm)}
.site-footer__group{grid-column:span 2}
.site-footer__group .k-label{margin:0 0 var(--k-space-5);color:var(--k-text-muted);font-family:var(--k-font-sans)}
.site-footer__group ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-space-3)}
.site-footer__group a{color:var(--k-color-ink);font-size:var(--k-type-body-sm);text-decoration:none}
.site-footer__group a:hover{color:var(--k-color-violet);text-decoration:underline}
.site-footer__closing{
  margin:clamp(64px,7vw,112px) 0 0;
  max-width:22ch;
  color:var(--k-color-violet);
  font-size:var(--k-type-h2);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h2);
  letter-spacing:var(--k-tracking-display);
}
.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:var(--k-space-6);
  margin-top:var(--k-space-18);
  padding-top:var(--k-space-6);
  border-top:1px solid var(--k-border-hairline);
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}
.site-footer__legal a{color:var(--k-text-muted);text-decoration:none}
.site-footer__legal a:hover{color:var(--k-color-ink);text-decoration:underline}

/* Three columns on a tablet, one on a phone. The extra bottom padding on a
   phone clears the sticky CTA bar pinned over the foot of the page. */
@media (min-width:768px) and (max-width:1023px){
  .site-footer__grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:48px}
  .site-footer__grid > *{grid-column:span 3}
}
@media (max-width:767px){
  .site-footer{padding-bottom:96px}
  .site-footer__grid{grid-template-columns:1fr;gap:40px}
  .site-footer__grid > *{grid-column:auto}
}

.disclosures{
  padding:var(--k-space-8) var(--k-page-gutter) var(--k-space-12);
  background:var(--k-color-paper);
  border-top:1px solid var(--k-border-hairline);
}
.disclosures p{
  max-width:var(--k-container-max);
  margin:0 auto;
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}


/* ===========================================================================
   Sticky calls to action
   ========================================================================= */
/* Phone: a bar across the foot of the screen that slides up out of the way.
   Both it and the rail below are driven by data-visible from app.js. */
.cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  padding:12px var(--k-page-gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgb(241 241 235 / 96%);
  border-top:1px solid var(--k-border-hairline);
  transform:translateY(110%);
  transition:transform var(--k-duration-base) var(--k-ease-standard);
}
.cta-bar[data-visible="true"]{transform:none}
@media (min-width:768px){.cta-bar{display:none}}

/* Tablet and up: a single button parked against the right edge instead. */
.cta-rail{
  display:none;
  position:fixed;
  right:20px;
  top:50%;
  transform:translate(24px,-50%);
  opacity:0;
  pointer-events:none;
  z-index:50;
  transition:transform var(--k-duration-base) var(--k-ease-standard),
             opacity var(--k-duration-base) var(--k-ease-standard);
}
.cta-rail[data-visible="true"]{transform:translate(0,-50%);opacity:1;pointer-events:auto}
@media (min-width:768px){.cta-rail{display:block}}


/* ===========================================================================
   In-page anchors
   ========================================================================= */
/* The header is not sticky, but a fragment jump on a long page still reads
   better with a little air above the heading it lands on. The original page
   did this with a hand-rolled scrollTo(-80px); scroll-margin is the same
   thing without the JavaScript. */
:target,
main > section,
.site-footer{scroll-margin-top:80px}