/* ============================================================================
   KHEAN & CLEAN — SHARED QUOTE FORM  (stylesheet)
   ----------------------------------------------------------------------------
   This file styles the quote form on ALL SIX pages. Edit it once, every page
   changes. Do not copy these rules into a page's own <style> block.

   Class prefix is "kcq" so nothing here can collide with the older ".q" rules
   on index.html or the older ".sq" rules on the service pages.

   Colour and size values fall back to a literal if the page does not define
   the custom property, so this works on the dark homepage and on the service
   pages without either of them needing to change.
   ============================================================================ */

.kcq{
  background:#F7F4EC;
  color:#0A0A0B;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--r-lg, 22px);
  padding:clamp(24px, 3vw, 44px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.45);
  position:relative;
  z-index:1;
  scroll-margin-top:calc(var(--bar-h, 90px) + 24px);
}

.kcq__ttl{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(25px, 2.9vw, 33px);
  font-weight:700; letter-spacing:-.02em; line-height:1.08;
  text-align:center; margin:0;
  /* The card is always light, so the title must be dark regardless of the
     host page. Without this it inherits the page's body colour, which is
     near-white on the dark service pages and renders the title invisible. */
  color:#0A0A0B;
}
.kcq__sub{
  font-family:"Inter", "Archivo Narrow", system-ui, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#1B4FA0; text-align:center; margin:9px 0 28px;
}

/* ---- fields ---------------------------------------------------------- */
.kcq__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
@media (max-width:640px){ .kcq__row{ grid-template-columns:1fr; } }

.kcq__field{ margin-bottom:18px; min-width:0; border:0; padding:0; }
.kcq__field > label,
.kcq__field > legend{
  display:block; padding:0;
  font-family:"Inter", "Archivo Narrow", system-ui, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#6B6155; margin-bottom:8px;
}
.kcq__field .opt{ color:#A89C8A; letter-spacing:.1em; }

.kcq__field input[type=text],
.kcq__field input[type=tel],
.kcq__field input[type=email],
.kcq__field select,
.kcq__field textarea{
  width:100%;
  font-family:system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; color:#0A0A0B; background:#fff;
  border:1px solid rgba(0,0,0,.16);
  border-radius:var(--r-sm, 10px);
  padding:13px 14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.kcq__field textarea{ resize:vertical; min-height:96px; line-height:1.55; }
.kcq__field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6560' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.kcq__field :is(input,select,textarea):focus{
  outline:none; border-color:#2E5FB0; box-shadow:0 0 0 3px rgba(46,95,176,.15);
}
.kcq__field :is(input,select,textarea)[aria-invalid="true"]{ border-color:#A6402F; }

.kcq__err{
  display:block; font-family:system-ui, sans-serif;
  font-size:12px; color:#A6402F; margin-top:6px;
}

/* ---- the part that expands ------------------------------------------- */
.kcq__expand{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.kcq__expand.is-open{ grid-template-rows:1fr; opacity:1; }
.kcq__expandInner{ overflow:hidden; min-height:0; }
.kcq__expandInner > *:first-child{ margin-top:4px; }
@media (prefers-reduced-motion:reduce){
  .kcq__expand{ transition:none; }
}

/* ---- summary chips shown after "Summarize" --------------------------- */
/* ---- summary (review panel shown after pressing Summarize) ----
   Services as chips, then a label/value list (address, rooms/areas or the
   estimate), matching the homepage summary. Two columns on desktop,
   stacked on narrow screens. */
/* Tinted box, copied from .qCollapsedSummary in index.html (~line 849).
   display:block is left out on purpose: here it would override [hidden]. */
.kcq__summary{
  margin:-.6rem 0 1.3rem;
  background:rgba(27,79,160,.05);
  border:1px solid var(--line, rgba(0,0,0,.14));
  border-radius:var(--r-md, 16px);
  padding:.9rem 1rem;
}

.kcq__sumRow{
  display:grid; grid-template-columns:112px 1fr; gap:4px 16px;
  padding:9px 0;
  border-top:1px solid rgba(0,0,0,.10);
}
.kcq__sumRow:first-of-type{ border-top:0; padding-top:0; }

.kcq__sumLabel{
  font-family:"Inter", system-ui, sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:#6B6155;
  padding-top:2px;
}
.kcq__sumVal{
  font-size:15px; line-height:1.5; color:#0A0A0B;
  /* long notes and pasted addresses must wrap, not overflow the card */
  overflow-wrap:anywhere; white-space:pre-wrap;
}

@media (max-width:560px){
  .kcq__sumRow{ grid-template-columns:1fr; gap:2px; }
  .kcq__sumLabel{ padding-top:0; }
}

/* Service chips. Mirrors .qCollapsedSummary .chips/.chip in index.html
   (~lines 850-851). The blue tint is jade #1B4FA0 as a literal. The service
   pages do not load Archivo Narrow, so they fall back to Inter. */
.kcq__chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.75rem; }
.kcq__chip{
  background:rgba(27,79,160,.08);
  border:1px solid var(--line, rgba(0,0,0,.14));
  border-radius:999px; padding:.35rem .8rem;
  font-family:"Archivo Narrow", "Inter", system-ui, sans-serif;
  font-size:var(--fs-xs, 12px); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#0A0A0B;
}

/* ---- services checklist ---------------------------------------------- */
.kcq__checks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:460px){ .kcq__checks{ grid-template-columns:1fr; } }
.kcq__check{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; font-family:system-ui, sans-serif; font-size:15px;
  border:1px solid rgba(0,0,0,.16); border-radius:var(--r-sm, 10px);
  background:#fff; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.kcq__check:hover{ border-color:#5A6560; }
.kcq__check input{ width:17px; height:17px; flex:none; accent-color:#2E5FB0; cursor:pointer; }
.kcq__check:has(input:checked){ border-color:#2E5FB0; background:rgba(46,95,176,.06); }

/* ---- buttons ---------------------------------------------------------- */
.kcq__summarize{
  display:block; width:100%; margin:0 0 14px; cursor:pointer;
  font-family:"Inter", system-ui, sans-serif;
  font-size:14px; font-weight:700; letter-spacing:.02em;
  padding:14px 18px; color:#0A0A0B; background:transparent;
  border:1px solid rgba(0,0,0,.28); border-radius:var(--r-sm, 10px);
  transition:border-color .18s ease, background .18s ease;
}
.kcq__summarize:hover{ border-color:#2E5FB0; background:rgba(46,95,176,.05); }

.kcq__submit{
  display:block; width:100%; margin-top:6px; cursor:pointer;
  background:var(--gold-btn, #C9A227); color:var(--btn-ink, #1A1206);
  border:1px solid var(--gold-btn, #C9A227); border-radius:var(--r-sm, 10px);
  font-family:"Inter", system-ui, sans-serif;
  font-size:15px; font-weight:700; letter-spacing:.02em; padding:17px 20px;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.kcq__submit:hover{ background:var(--gold-lite, #DCA85F); border-color:var(--gold-lite, #DCA85F); }
.kcq__submit:active{ transform:translateY(1px); }
.kcq__submit[disabled]{ opacity:.6; cursor:progress; }
.kcq__submit:focus-visible,
.kcq__summarize:focus-visible{ outline:2px solid #2E5FB0; outline-offset:3px; }

/* ---- fine print, status, honeypot ------------------------------------ */
.kcq__fine{
  font-family:system-ui, sans-serif; font-size:12.5px; line-height:1.65;
  color:#6B6155; margin:14px 0 0;
}
.kcq__fine a{ color:inherit; }
.kcq__status{ font-family:system-ui, sans-serif; font-size:14px; margin:12px 0 0; }
.kcq__status.err{ color:#A6402F; }
.kcq__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---- success state ---------------------------------------------------- */
.kcq__done{ text-align:center; padding:26px 0; }
.kcq__doneTick{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:#2E7D5B; color:#fff; display:grid; place-items:center;
}
.kcq__done h3{
  font-family:"Playfair Display", Georgia, serif;
  font-size:24px; margin:0 0 10px;
}
.kcq__done p{
  font-family:system-ui, sans-serif; font-size:15px; color:#6B6155;
  max-width:38ch; margin:0 auto 22px;
}
.kcq__doneCall{
  display:inline-block; text-decoration:none;
  background:#2E7D5B; color:#fff;
  border:1px solid #2E7D5B; border-radius:var(--r-sm, 10px);
  font-family:"Inter", system-ui, sans-serif;
  font-size:15px; font-weight:700; padding:14px 24px;
}
.kcq__doneCall:hover{ background:#26694C; border-color:#26694C; }

/* ---- link across to the full estimator on the homepage --------------- */
.kcq__estLink{
  display:block; text-align:center; margin:18px 0 0;
  font-family:system-ui, sans-serif; font-size:13.5px; color:#6B6155;
}
.kcq__estLink a{ color:#1B4FA0; font-weight:600; }

/* ---- shown only if JavaScript is switched off ------------------------ */
.kcq__noscript{
  background:#F7F4EC; color:#0A0A0B;
  border:1px solid rgba(0,0,0,.08); border-radius:var(--r-lg, 22px);
  padding:clamp(24px, 3vw, 44px); text-align:center;
  font-family:system-ui, sans-serif; font-size:16px; line-height:1.6;
}

/* smooth scrolling when a header button jumps down to the form */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ---- itemised estimator breakdown ------------------------------------
   Mirrors the .qEst rules in index.html (its <style> block, ~lines 790-801)
   so the estimate card renders identically on the service pages. The index
   versions read --ink/--slate/--line/--r-sm/--fs-xs from the homepage's
   :root; the service pages define none of those, so every value here
   carries a literal fallback. */
.kcq__sumRow--full{ grid-template-columns:1fr; gap:6px; }

.qEst{ display:block; white-space:normal; }
.qEst__svc{
  padding:.6rem .85rem; margin-top:.45rem; background:#fff;
  border:1px solid var(--line, rgba(0,0,0,.14));
  border-radius:var(--r-sm, 8px);
}
.qEst__svc:first-child{ margin-top:0; }
.qEst__head{
  display:flex; min-width:0; justify-content:space-between; align-items:baseline; gap:.75rem;
  font-family:"Playfair Display", Georgia, serif; font-size:1rem; font-weight:600;
  color:#0A0A0B;
}
.qEst__head .qEst__price{
  flex:none; font-variant-numeric:lining-nums tabular-nums;
  color:#1b4fa0; white-space:nowrap;
}
.qEst__meta{ font-size:var(--fs-xs, .75rem); color:#6B6155; margin-top:.15rem; }
.qEst__items{
  list-style:none; margin:.45rem 0 0; padding:.45rem 0 0;
  border-top:1px dashed var(--line, rgba(0,0,0,.14));
}
.qEst__items li{
  display:flex; justify-content:space-between; gap:.75rem;
  font-size:var(--fs-xs, .75rem); color:#6B6155; line-height:1.5;
}
.qEst__items li span:last-child{
  flex:none; font-variant-numeric:tabular-nums; white-space:nowrap;
  color:#0A0A0B;
}
.qEst__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:.75rem;
  margin-top:.7rem; padding:.7rem .85rem;
  background:#0F5C3E; color:#F4F1E6; border-radius:var(--r-sm, 8px);
  font-family:"Archivo Narrow", system-ui, sans-serif; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:var(--fs-xs, .75rem);
}
.qEst__total .qEst__price{
  font-family:"Playfair Display", Georgia, serif; font-size:1.35rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:#F0C670;
}
.qEst__foot{ font-size:var(--fs-xs, .75rem); color:#6B6155; margin-top:.45rem; text-align:right; }

/* ---- header icon controls (pencil / clear) ---------------------------
   Absolutely placed in the card's top-right so the centred title keeps its
   own layout. .kcq is already position:relative. Only one is ever visible
   at a time; quote-form.js toggles the hidden attribute. */
.kcq__tools{
  position:absolute; top:14px; right:clamp(24px, 3vw, 44px);
  display:flex; gap:6px; z-index:2;
}
.kcq__tool{
  display:grid; place-items:center;
  width:34px; height:34px; padding:0; cursor:pointer;
  color:#6B6155; background:transparent;
  border:1px solid rgba(0,0,0,.16);
  border-radius:var(--r-sm, 10px);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.kcq__tool[hidden]{ display:none; }
.kcq__tool svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.kcq__tool:hover{ color:#1B4FA0; border-color:#2E5FB0; background:rgba(46,95,176,.06); }
.kcq__tool:focus-visible{ outline:2px solid #2E5FB0; outline-offset:2px; }
#kcq1_Clear:hover, .kcq__tool[id$="Clear"]:hover{
  color:#A6402F; border-color:#A6402F; background:rgba(166,64,47,.06);
}

/* keep the title clear of the buttons on narrow cards */
@media (max-width:420px){
  .kcq__tools{ top:10px; right:clamp(24px, 3vw, 44px); }
  .kcq__ttl{ padding:0 76px; }
}

/* ---- Photo hand-off ------------------------------------------------------
   Ported from the home page's .qform__photos block. The service pages do not
   load index.html's stylesheet, so the jade palette is written here with
   literal fallbacks, matching the convention used above. */
.kcq__photos{ margin:.6rem 0 1.1rem; }
.kcq__photo{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  width:100%; padding:1.15rem 1rem;
  font-family:"Archivo",sans-serif; font-size:var(--fs-sm, .875rem);
  font-weight:700; letter-spacing:.02em; line-height:1.2;
  background:var(--jade, #1B4FA0); color:#fff;
  border:1px solid var(--jade, #1B4FA0); border-radius:var(--r-sm, 10px);
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .12s ease;
}
.kcq__photo:hover{ background:var(--jade-lit, #3E7FD6); border-color:var(--jade-lit, #3E7FD6); }
.kcq__photo:active{ transform:translateY(1px); }
.kcq__photo:focus-visible{ outline:2px solid var(--jade, #1B4FA0); outline-offset:3px; }
.kcq__photo svg{ width:22px; height:22px; flex:none; }
.kcq__photoSub{
  display:block; font-size:var(--fs-2xs, .6875rem); font-weight:400;
  letter-spacing:.06em; opacity:.8; margin-top:.25rem; text-transform:none;
}
/* Phones text, desktops email — a desktop has no messaging app, so sms: is a
   dead tap there. Same 901px switch the home page uses. */
.kcq__photo--mail{ display:none; }
@media (min-width:901px){
  .kcq__photo--sms{ display:none; }
  .kcq__photo--mail{ display:flex; }
}

/* ---- clear confirmation dialog ---------------------------------------
   Ported from index.html's .estClearDlg (used by the quick quote's
   #qClearDlg). The service pages define none of the emerald custom
   properties, and tile-and-grout.html defines --ink as CREAM, so every
   value here is a literal. The .btn base class does not exist on the
   service pages either, so the button sizing/typography is written out
   here rather than inherited. The title requests Playfair with a
   Georgia/serif fallback, so it degrades cleanly if the webfont does not
   load on a given page. */
.kcq__clearDlg{
  border:1px solid rgba(244,241,230,.20); border-radius:16px;
  padding:1.5rem 1.5rem 1.3rem; max-width:26rem; width:calc(100% - 2rem);
  background:#0F5C3E; color:#F4F1E6;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.kcq__clearDlg::backdrop{ background:rgba(10,10,11,.55); }
.kcq__clearDlg__ttl{
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.25rem; font-weight:700; margin:0 0 .3rem; color:#F4F1E6;
}
.kcq__clearDlg__sub{
  font-family:system-ui, sans-serif;
  font-size:var(--fs-xs, .75rem); color:rgba(244,241,230,.74); margin:0 0 1.1rem;
}
.kcq__clearDlg__acts{ display:grid; gap:.5rem; }
.kcq__clearDlg__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%; text-align:center; cursor:pointer;
  font-family:"Archivo", "Inter", system-ui, sans-serif;
  font-size:var(--fs-sm, .875rem); font-weight:700; letter-spacing:.02em;
  padding:1.05rem 1.75rem; border-radius:var(--r-pill, 999px);
  background:#F4F1E6; border:1px solid #F4F1E6; color:#083825;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.kcq__clearDlg__btn:hover{ background:#fff; border-color:#fff; color:#083825; }
.kcq__clearDlg__btn:focus-visible{ outline:2px solid #F4F1E6; outline-offset:3px; }
.kcq__clearDlg__cancel{
  margin-top:.35rem;
  background:transparent; border-color:rgba(244,241,230,.74); color:#F4F1E6;
}
.kcq__clearDlg__cancel:hover{
  background:rgba(244,241,230,.12); border-color:#F4F1E6; color:#F4F1E6;
}


/* ------------------------------------------------------------------
   Section spacing for the shared quick quote.
   The five service pages wrap the quote in <section class="wrap squote">,
   but .squote carried no rule anywhere — it was an unused hook. This
   adds breathing room above the quote so it reads as its own section
   instead of crowding the content directly above it (e.g. the last
   numbered "how it works" step on carpet.html).
   Service pages only: index.html does not load this stylesheet.
   ------------------------------------------------------------------ */
.squote {
  padding-top: 3rem;
}