/* ==========================================================================
   KIT — shared components
   ==========================================================================

   The pieces below did not exist anywhere: a real modal, a gallery viewer, a
   skeleton, an avatar, a progress bar, a breadcrumb, an accordion, a tooltip
   and a stepper. Where something like one did exist it was written inside a
   single page's <style> block — 468 classes across 38 views — so no other page
   could use it, and the next page that needed one wrote its own.

   Everything here is namespaced `kit-`, which nothing else uses. This file is
   purely additive: it overrides no existing class and changes nothing that
   renders today. Pages move onto it one at a time.

   Values come from the existing tokens, so the kit inherits the theme rather
   than starting a second palette.
   ========================================================================== */

:root{
  --kit-line:      var(--line, #E3E7E5);
  --kit-surface:   var(--surface, #fff);
  --kit-ground:    var(--ground, #F7F8F7);
  --kit-text:      var(--text, #18211F);
  --kit-muted:     var(--text-muted, #8A9793);
  --kit-brand:     var(--ink, #0E5C57);
  --kit-radius:    14px;
  --kit-radius-sm: 9px;
  --kit-shadow:    0 10px 40px rgba(16,32,29,.18);
  --kit-z-overlay: 1050;
}

/* ── SEMANTIC TOKENS ───────────────────────────────────────────────────────
   Named by what they are for, not by what colour they happen to be. A border
   is "default" or "focus" or "danger"; when the palette changes, the meaning
   does not. The audit found one idea — the colour of a border — written 47
   different ways, which is what these replace. */
:root{
  --kit-border-default: var(--line, #E3E7E5);
  --kit-border-subtle:  var(--line-soft, #EEF1F0);
  --kit-border-strong:  rgba(11,31,29,.24);
  --kit-border-focus:   var(--ink, #0E5C57);
  --kit-border-danger:  #C2453A;

  --kit-fg-default: var(--text, #18211F);
  --kit-fg-muted:   var(--text-muted, #8A9793);
  --kit-fg-onbrand: #fff;

  --kit-bg-default: var(--surface, #fff);
  --kit-bg-subtle:  var(--ground, #F7F8F7);
  --kit-bg-brand:   var(--ink, #0E5C57);
  --kit-bg-danger:  #C2453A;

  /* One focus ring for everything focusable, so keyboard users get the same
     signal on a button, a link and a field. */
  --kit-focus-ring: 0 0 0 3px rgba(14,92,87,.28);
}

/* ── BUTTONS ───────────────────────────────────────────────────────────────
   This family lives here and nowhere else — it used to be in app.css, and is
   used 645 times in the markup, so the class names are kept exactly as they
   are. Renaming them would be churn with no benefit and real risk.

   What is new is what was missing: a visible focus ring, a disabled state and
   a loading state. Without a focus style a keyboard user cannot see where they
   are, which is an accessibility failure, not a polish item. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border-radius:var(--radius-sm, 10px);font-weight:500;padding:.55rem 1.1rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s
}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow:var(--kit-focus-ring);border-color:var(--kit-border-focus)}

.btn-ink{background:var(--kit-bg-brand);color:var(--kit-fg-onbrand);border-color:var(--kit-bg-brand)}
.btn-ink:hover{background:var(--ink-dark,#0A4642);border-color:var(--ink-dark,#0A4642);color:var(--kit-fg-onbrand)}

.btn-accent{background:var(--accent,#C2703A);color:var(--kit-fg-onbrand);border-color:var(--accent,#C2703A)}
.btn-accent:hover{background:#A85C2C;border-color:#A85C2C;color:var(--kit-fg-onbrand)}

.btn-quiet{background:var(--kit-bg-default);color:var(--kit-fg-default);border-color:var(--kit-border-default)}
.btn-quiet:hover{background:var(--ink-tint,#F1F7F6);border-color:var(--kit-border-focus);color:var(--kit-border-focus)}

/* Destructive actions were being styled inline wherever one was needed. */
.btn-danger{background:var(--kit-bg-danger);color:var(--kit-fg-onbrand);border-color:var(--kit-bg-danger)}
.btn-danger:hover{background:#A5382F;border-color:#A5382F;color:var(--kit-fg-onbrand)}

.btn-ghost{background:transparent;color:var(--kit-fg-muted);border-color:transparent}
.btn-ghost:hover{background:var(--kit-bg-subtle);color:var(--kit-fg-default)}

.btn-sm{padding:.35rem .7rem;font-size:13px}
.btn-lg{padding:.75rem 1.5rem;font-size:15px}
.btn-block{width:100%}

/* Disabled means "not allowed"; it must look it and must not respond. */
.btn[disabled],.btn.is-disabled,.btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none
}

/* Loading keeps the button's width so the layout does not jump, hides the
   label rather than replacing it, and announces itself to assistive tech. */
.btn.is-loading{position:relative;pointer-events:none}
.btn.is-loading,.btn.is-loading *{color:transparent}
.btn.is-loading::after{
  content:'';position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--kit-fg-onbrand);animation:kit-spin .6s linear infinite
}
.btn-quiet.is-loading::after,.btn-ghost.is-loading::after{color:var(--kit-fg-default)}
@keyframes kit-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.is-loading::after{animation-duration:2s}}

/* A button is a tap target before it is anything else. */
/* Measured at 390px in a real browser: the Bootstrap default lands near 38px,
   under what a thumb reliably hits. */
@media(max-width:991px){
  .btn{min-height:44px}
  .btn-sm{min-height:40px;min-width:40px;padding-top:.4rem;padding-bottom:.4rem}
  .btn-icon{min-width:44px}
}

/* ── FORMS ─────────────────────────────────────────────────────────────────
   .form-control appears 550 times in the markup, so like the buttons the class
   names stay and the kit simply becomes their only owner. app.css and
   shell.css each defined them with different sizes, weights and radii, which
   is why a field in the admin never quite matched one on the public site.

   What is new is every state past focus. There was no invalid, no disabled, no
   readonly and no saving — so a field that rejected your input looked exactly
   like one that had not, and a form mid-save looked idle. */
.form-label{
  display:block;font-size:13px;font-weight:500;
  color:var(--text-soft, #5C6B67);margin-bottom:.3rem
}
.form-label .kit-req{color:var(--kit-border-danger);margin-left:2px}

.form-control,.form-select{
  width:100%;border:1px solid var(--kit-border-default);
  border-radius:var(--radius-sm, 10px);background:var(--kit-bg-default);
  color:var(--kit-fg-default);padding:.5rem .75rem;font-size:14px;
  transition:border-color .15s,box-shadow .15s,background .15s
}
.form-control::placeholder{color:var(--kit-fg-muted)}

.form-control:focus,.form-select:focus{
  outline:none;border-color:var(--kit-border-focus);box-shadow:var(--kit-focus-ring)
}

/* Invalid. Colour alone is not enough for anyone who cannot distinguish it,
   so the message below carries the meaning and the border reinforces it. */
.form-control.is-invalid,.form-select.is-invalid,
.form-control[aria-invalid="true"]{
  border-color:var(--kit-border-danger);background:rgba(194,69,58,.03)
}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{
  box-shadow:0 0 0 3px rgba(194,69,58,.22)
}
.form-error{
  display:flex;align-items:flex-start;gap:5px;
  font-size:12.5px;color:var(--kit-border-danger);margin-top:.3rem;line-height:1.5
}

.form-control.is-valid,.form-select.is-valid{border-color:#1B7F4C}
.form-success{font-size:12.5px;color:#1B7F4C;margin-top:.3rem}

/* Disabled and readonly mean different things and must not look the same:
   disabled is "you cannot use this", readonly is "you can read and copy it,
   but not change it". They were previously indistinguishable. */
.form-control:disabled,.form-select:disabled,.form-control.is-disabled{
  background:var(--kit-bg-subtle);color:var(--kit-fg-muted);
  cursor:not-allowed;border-color:var(--kit-border-subtle)
}
.form-control[readonly]{
  background:var(--kit-bg-subtle);border-color:var(--kit-border-subtle);cursor:text
}

/* A form mid-save previously looked identical to an idle one. */
.form-control.is-saving{
  background-image:linear-gradient(90deg,transparent 40%,rgba(14,92,87,.08) 50%,transparent 60%);
  background-size:300% 100%;animation:kit-shimmer 1.1s linear infinite
}

.form-text{font-size:12.5px;color:var(--kit-fg-muted);margin-top:.25rem}

.form-check-input:focus-visible{box-shadow:var(--kit-focus-ring);border-color:var(--kit-border-focus)}

/* A field group, so labels, controls and messages space themselves the same
   way everywhere instead of each form choosing its own margins. */
.form-field{margin-bottom:1rem}
.form-field:last-child{margin-bottom:0}

/* iOS zooms the page when a field's text is under 16px. */
@media(max-width:991px){
  .form-control,.form-select{font-size:16px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.form-control.is-saving{animation:none}}

/* ── CARD SHELL ────────────────────────────────────────────────────────────
   Every card in the system sits in this box: businesses, products, deals,
   jobs, posts, sectors, reviews, members, bookings, payments.

   The shell is shared; the layout inside is NOT. A product is not a business
   and must not be sold like one — each engine keeps its own arrangement and
   its own emphasis. What this ends is four different corner radii, four hover
   behaviours and four names for the same image.

   Before this, .lc used 16px, .pcard 14px, .hp-deal 12px and .ds-card 10px. */
.kit-card,
.lc,
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--kit-bg-default);border:1px solid var(--kit-border-default);
  border-radius:var(--kit-card-radius, 14px);overflow:hidden;
  box-shadow:0 1px 2px rgba(11,31,29,.04);
  transition:box-shadow .18s,transform .18s,border-color .18s,opacity .18s
}
.kit-card:hover,
.lc:hover,
.pcard:hover{
  box-shadow:0 8px 26px rgba(11,31,29,.10);
  transform:translateY(-2px);border-color:var(--kit-border-focus)
}
/* The card is usually a link; keyboard users need to see which one they are on. */
.kit-card:focus-within,
.lc:focus-within,
.pcard:focus-within{box-shadow:var(--kit-focus-ring);border-color:var(--kit-border-focus)}

/* Slots. Every engine gets these two whether or not it uses them. */
.kit-card-flag{
  position:absolute;top:9px;left:9px;z-index:2;border-radius:999px;padding:2px 9px;
  font-size:10.5px;font-weight:700;letter-spacing:.01em
}
.kit-card-flag--featured{background:#7C3AED;color:#fff}
.kit-card-flag--sponsored{background:rgba(255,255,255,.95);color:var(--teal-700, #0A4A46)}
.kit-card-flag--pending{background:#FEF0E4;color:#B45309}
.kit-card-flag--rejected{background:#FDE8E6;color:#C0392B}
.kit-card-flag--closed,.kit-card-flag--expired{background:var(--text-soft, #5C6B67);color:#fff}

.kit-card-act{
  position:absolute;top:9px;right:9px;z-index:2;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:#9CA3AF;font-size:13px;cursor:pointer
}
.kit-card-act:hover{color:var(--kit-border-focus)}
.kit-card-act:focus-visible{box-shadow:var(--kit-focus-ring)}

/* Trust marks beside a name. is_claimed exists in the database and has never
   been shown — an owner running their own listing is a real signal. */
.kit-mark{
  display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  font-size:8px;color:#fff;vertical-align:middle;margin-left:4px
}
.kit-mark--verified{background:#1D4ED8}
.kit-mark--claimed{background:#0E7C5A}

/* ── CARD STATES ───────────────────────────────────────────────────────────
   None of these existed. A shut business looked open; a listing awaiting
   approval looked live in its owner's dashboard; a grid popped in with no
   loading state at all. Written once here, inherited by every card type. */
.kit-card.is-closed,.lc.is-closed,.pcard.is-closed,.kit-card.is-expired,.lc.is-expired,.pcard.is-expired{opacity:.62}
.kit-card.is-closed,.lc.is-closed,.pcard.is-closed img,.kit-card.is-expired,.lc.is-expired,.pcard.is-expired img{filter:grayscale(.6)}
.kit-card.is-closed,.lc.is-closed,.pcard.is-closed:hover,.kit-card.is-expired,.lc.is-expired,.pcard.is-expired:hover{transform:none}

.kit-card.is-pending,.lc.is-pending,.pcard.is-pending{border-color:#FDE68A;background:#FFFDF6}
.kit-card.is-rejected,.lc.is-rejected,.pcard.is-rejected{border-color:#F5B5AE;background:#FFF8F7}
.kit-card.is-disabled,.lc.is-disabled,.pcard.is-disabled{opacity:.55;pointer-events:none}

/* Loading: the same box, so the grid does not jump when the real cards land. */
.kit-card.is-loading,.lc.is-loading,.pcard.is-loading{pointer-events:none}
.kit-card.is-loading,.lc.is-loading,.pcard.is-loading *{visibility:hidden}
.kit-card.is-loading,.lc.is-loading,.pcard.is-loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--kit-bg-subtle) 25%,rgba(0,0,0,.045) 37%,var(--kit-bg-subtle) 63%);
  background-size:400% 100%;animation:kit-shimmer 1.3s ease-in-out infinite
}
@media(prefers-reduced-motion:reduce){.kit-card.is-loading,.lc.is-loading,.pcard.is-loading::after{animation:none}}

/* Rows in a grid must be the same height or the run looks ragged — which is
   exactly what happened the first time these were laid out together. */
.lv > .kit-card,.lv > * > .kit-card,.lv > .lc,.lv > .pcard,.lv > * > .pcard{height:100%}
/* The product card is an <a>, so it needs to be told to behave as a column. */
a.pcard{text-decoration:none;color:inherit}

/* Touch: the card's own link is the tap target, so it must be reachable. */
@media(max-width:991px){
  .kit-card-act{width:40px;height:40px}
}

/* ── DEAL CARD ─────────────────────────────────────────────────────────────
   No photograph: the discount is the content, so it is the largest thing on
   the card. Warm tint so a deal reads as an offer at a glance rather than as
   another business. */
.dcard{background:linear-gradient(160deg,#FFFBF4,#FFF6E9);border-color:rgba(217,119,6,.28)}
.dcard:hover{border-color:#D97706}
.dcard-top{padding:15px 14px 10px;text-align:center;border-bottom:1px dashed rgba(217,119,6,.3)}
.dcard-val{font-size:30px;font-weight:850;color:#B45309;line-height:1;letter-spacing:-1px}
.dcard-val small{font-size:14px;font-weight:750}
.dcard-what{font-size:12px;color:#B45309;margin-top:4px;font-weight:650}
.dcard-b{padding:11px 13px;flex:1}
.dcard-title{font-size:13.5px;font-weight:700;line-height:1.3}
.dcard-biz{font-size:11.5px;color:var(--kit-fg-muted);margin-top:2px}
.dcard-code{
  display:block;margin-top:9px;text-align:center;font-family:ui-monospace,monospace;
  background:#fff;border:1.5px dashed #D97706;color:#B45309;border-radius:8px;padding:5px;
  font-size:12.5px;font-weight:750;letter-spacing:.06em
}
.dcard-foot{
  padding:8px 13px;border-top:1px solid rgba(217,119,6,.2);
  font-size:11px;color:#B45309;display:flex;align-items:center;gap:5px
}

/* ── JOB CARD ──────────────────────────────────────────────────────────────
   No photograph either. People skim jobs rather than look at them, so it
   leads with the title and three scannable facts. */
.jcard{border-left:3px solid #1D4ED8}
.jcard-b{padding:13px;flex:1}
.jcard-type{
  display:inline-block;background:#EEF2FF;color:#1D4ED8;border-radius:999px;
  padding:2px 9px;font-size:10.5px;font-weight:700
}
.jcard-title{font-size:14.5px;font-weight:750;margin:7px 0 3px;line-height:1.3}
.jcard-co{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--kit-fg-muted)}
.jcard-logo{width:18px;height:18px;border-radius:5px;background:var(--kit-bg-subtle);flex:0 0 18px;object-fit:cover}
.jcard-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.jcard-fact{
  font-size:10.5px;font-weight:650;background:var(--kit-bg-subtle);color:var(--kit-fg-muted);
  border-radius:6px;padding:2px 8px;display:inline-flex;align-items:center;gap:3px
}
.jcard-foot{display:flex;align-items:center;padding:9px 13px;border-top:1px solid var(--kit-border-default);font-size:11px}
.jcard-apply{margin-left:auto;color:#1D4ED8;font-weight:700}

/* ── POST CARD ─────────────────────────────────────────────────────────── */
.bcard-img{aspect-ratio:16/9;width:100%;object-fit:cover;display:block;background:var(--kit-bg-subtle)}
.bcard-b{padding:11px 13px;flex:1}
.bcard-cat{font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:#7C3AED}
.bcard-title{font-size:14px;font-weight:750;margin:3px 0;line-height:1.3}
.bcard-x{font-size:12.5px;color:var(--kit-fg-muted);line-height:1.5}
.bcard-foot{display:flex;align-items:center;padding:9px 13px;border-top:1px solid var(--kit-border-default);
  font-size:11.5px;color:var(--kit-fg-muted)}
.bcard-foot .r{margin-left:auto}

/* ── TRANSACTION CARD ──────────────────────────────────────────────────────
   Bookings, payments, applications and boost orders. Each has a status column
   in the database and none of them had a card — every list styled itself,
   which is why the dashboard did not feel like one product. */
.tcard-b{padding:12px 13px;flex:1}
.tcard-title{font-size:14px;font-weight:750;margin:7px 0 2px;line-height:1.3}
.tcard-sub{font-size:12.5px;color:var(--kit-fg-muted)}
.tcard-when{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;font-weight:650}
.tcard-when i{color:var(--kit-brand)}
.tcard-foot{display:flex;align-items:center;gap:9px;padding:9px 13px;
  border-top:1px solid var(--kit-border-default);font-size:11.5px;color:var(--kit-fg-muted)}
.tcard-foot .r{margin-left:auto}

/* Status pills, shared by transaction cards and queue rows. */
.kit-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;
  padding:2px 9px;font-size:10.5px;font-weight:700}
.kit-pill--ok{background:#E3F3EC;color:#0E7C5A}
.kit-pill--wait{background:#FEF0E4;color:#B45309}
.kit-pill--bad{background:#FDE8E6;color:#C0392B}
.kit-pill--info{background:#EEF2FF;color:#1D4ED8}
.kit-pill--mute{background:var(--kit-bg-subtle);color:var(--kit-fg-muted)}

/* ── QUEUE ROW ─────────────────────────────────────────────────────────────
   A grid is for browsing; a list is for working through. Leads, submissions,
   payments and applications are queues — read top to bottom, act, move on. */
.rowcard{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--kit-bg-default);border:1px solid var(--kit-border-default);
  border-radius:12px;box-shadow:0 1px 2px rgba(11,31,29,.04);transition:.15s
}
.rowcard:hover{border-color:var(--kit-border-focus)}
.rowcard + .rowcard{margin-top:8px}
/* The one thing on a dashboard that should feel urgent. */
.rowcard.is-urgent{border-left:3px solid #D97706}
.rowcard-main{flex:1;min-width:0}
.rowcard-t{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowcard-s{font-size:11.5px;color:var(--kit-fg-muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowcard-age{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;flex:0 0 auto}
.rowcard-age--hot{background:#FEF0E4;color:#B45309}
.rowcard-age--cold{background:var(--kit-bg-subtle);color:var(--kit-fg-muted)}

@media(max-width:640px){
  /* A row becomes two lines on a phone rather than squeezing five things
     onto one, which is how these lists become unreadable. */
  .rowcard{flex-wrap:wrap}
  .rowcard-main{flex:1 1 100%;order:2}
  .rowcard-age{order:3}
  .rowcard > .kit-pill{order:4;margin-left:auto}
}

/* ── REVIEW CARD ───────────────────────────────────────────────────────── */
.rcard-head{display:flex;align-items:center;gap:9px;padding:12px 13px 0}
.rcard-who{font-size:13px;font-weight:700}
.rcard-when{font-size:11px;color:var(--kit-fg-muted)}
.rcard-stars{margin-left:auto;color:#D97706;font-size:12px;letter-spacing:1px;flex:0 0 auto}
.rcard-txt{font-size:12.5px;color:var(--kit-fg-muted);line-height:1.55;padding:9px 13px 12px;flex:1}
.rcard-foot{display:flex;align-items:center;gap:9px;padding:9px 13px;
  border-top:1px solid var(--kit-border-default);font-size:11.5px;color:var(--kit-fg-muted)}
/* An owner's reply belongs inside the review, indented, not as a second card. */
.rcard-reply{margin:0 13px 12px;padding:9px 11px;background:var(--kit-bg-subtle);
  border-left:2px solid var(--kit-brand);border-radius:0 8px 8px 0;font-size:12px;line-height:1.5}
.rcard-reply b{display:block;font-size:11px;color:var(--kit-brand);margin-bottom:3px}

/* ── MEMBER CARD ───────────────────────────────────────────────────────── */
.mcard{text-align:center}
.mcard-b{padding:18px 13px;flex:1}
.mcard-n{font-size:14px;font-weight:750;margin-top:10px}
.mcard-r{font-size:11.5px;color:var(--kit-fg-muted);margin-top:2px}
.mcard-stats{display:flex;justify-content:center;gap:16px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--kit-border-default)}
.mcard-stats div b{display:block;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}
.mcard-stats div span{font-size:10.5px;color:var(--kit-fg-muted)}

/* ── SECTOR TILE ───────────────────────────────────────────────────────────
   Styled inside whichever page showed it, which is why the homepage tile never
   matched the one on the sectors page. */
.scard-b{padding:16px 12px;text-align:center;flex:1}
.scard-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:20px;margin:0 auto 9px}
.scard-n{font-size:13px;font-weight:750}
.scard-c{font-size:11.5px;color:var(--kit-fg-muted);margin-top:2px}
/* The sectors page lists a few terms under each tile; the homepage does not. */
.scard-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:9px}
.scard-tags span{font-size:10.5px;background:var(--kit-bg-subtle);color:var(--kit-fg-muted);
  border-radius:999px;padding:2px 8px}

/* ── PACKAGE CARD ──────────────────────────────────────────────────────── */
.kcard-top{padding:15px 14px 12px;text-align:center;border-bottom:1px solid var(--kit-border-default)}
.kcard-n{font-size:13px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--kit-fg-muted)}
.kcard-p{font-size:28px;font-weight:850;letter-spacing:-1px;margin-top:5px}
.kcard-p small{font-size:12px;font-weight:500;color:var(--kit-fg-muted)}
.kcard-l{padding:12px 14px;flex:1}
.kcard-l div{font-size:12.5px;color:var(--kit-fg-muted);display:flex;gap:7px;margin-bottom:6px;align-items:flex-start}
.kcard-l i{color:#0E7C5A;margin-top:2px}
.kcard-l .off{color:var(--kit-fg-muted);opacity:.7}
.kcard-l .off i{color:var(--kit-fg-muted)}
/* The plan the member is on, so the choice is obvious at a glance. */
.kcard.is-current{border-color:var(--kit-brand);box-shadow:0 0 0 3px rgba(14,92,87,.08)}
.kcard.is-current .kcard-n{color:var(--kit-brand)}

/* ── MEDIA ITEM ────────────────────────────────────────────────────────── */
.mediacard-img{aspect-ratio:16/10;width:100%;object-fit:cover;display:block;background:var(--kit-bg-subtle)}
.mediacard-b{padding:9px 11px;flex:1}
.mediacard-n{font-size:12.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mediacard-m{font-size:11px;color:var(--kit-fg-muted);margin-top:2px}
.mediacard-foot{display:flex;align-items:center;gap:6px;padding:8px 11px;
  border-top:1px solid var(--kit-border-default)}
/* A picture with no alt text is invisible to a screen reader and to Google. */
.mediacard.is-noalt{border-color:#FDE68A}

/* ── ALERT ─────────────────────────────────────────────────────────────────
   An inline message that stays on the page — different from the toast, which
   appears and leaves. Neither existed as a kit component.
   Colour never carries the meaning on its own: each has an icon and a heading,
   because roughly one man in twelve cannot separate red from green. */
.kit-alert{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:var(--kit-radius-sm);
  font-size:13px;line-height:1.55;border:1px solid transparent
}
.kit-alert-ico{font-size:15px;line-height:1.3;flex:0 0 auto}
.kit-alert-body{flex:1;min-width:0}
.kit-alert-title{font-weight:750;display:block;margin-bottom:2px}
.kit-alert-close{margin-left:auto;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;
  font-size:13px;padding:0 2px;flex:0 0 auto}
.kit-alert-close:hover{opacity:1}
.kit-alert--info{background:#EEF2FF;border-color:#C7D2FE;color:#1D4ED8}
.kit-alert--ok{background:#E3F3EC;border-color:#A7DCC4;color:#0E7C5A}
.kit-alert--warn{background:#FEF0E4;border-color:#FDE68A;color:#B45309}
.kit-alert--bad{background:#FDE8E6;border-color:#F5B5AE;color:#C0392B}
/* A message the visitor must act on, rather than merely read. */
.kit-alert--solid{color:#fff;border:0}
.kit-alert--solid.kit-alert--bad{background:#C0392B}
.kit-alert--solid.kit-alert--ok{background:#0E7C5A}

/* ── LOADING BAR ───────────────────────────────────────────────────────────
   The thin line across the top of the page during a navigation or a save.
   Indeterminate — it does not pretend to know a percentage it cannot know. */
.kit-loadbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:calc(var(--kit-z-overlay) + 20);
  background:transparent;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .15s}
.kit-loadbar.is-active{opacity:1}
.kit-loadbar::after{
  content:'';position:absolute;top:0;left:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,var(--kit-brand),transparent);
  animation:kit-slide 1.05s ease-in-out infinite
}
@keyframes kit-slide{0%{left:-40%}100%{left:100%}}
/* When the length IS known — an upload, an import — show it honestly. */
.kit-loadbar--known::after{animation:none;background:var(--kit-brand);width:var(--kit-load,0%);transition:width .25s}
@media(prefers-reduced-motion:reduce){.kit-loadbar::after{animation-duration:2.5s}}

/* ── CALENDAR / DATE PICKER ────────────────────────────────────────────────
   Bookings are chosen on a date, so this is the control that matters most in
   that flow, and there was none. Plain markup — no library, because this
   project has no build step. */
.kit-cal{border:1px solid var(--kit-border-default);border-radius:var(--kit-radius-sm);
  background:var(--kit-bg-default);padding:12px;max-width:320px}
.kit-cal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kit-cal-title{font-size:13.5px;font-weight:750;flex:1;text-align:center}
.kit-cal-nav{width:28px;height:28px;border-radius:8px;border:1px solid var(--kit-border-default);
  background:var(--kit-bg-default);color:var(--kit-fg-muted);display:grid;place-items:center;cursor:pointer}
.kit-cal-nav:hover{color:var(--kit-fg-default);border-color:var(--kit-border-focus)}
.kit-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kit-cal-dow{font-size:10.5px;font-weight:700;text-align:center;color:var(--kit-fg-muted);padding:4px 0}
.kit-cal-day{
  aspect-ratio:1;border:0;background:none;border-radius:8px;font:inherit;font-size:12.5px;
  color:var(--kit-fg-default);cursor:pointer;display:grid;place-items:center;position:relative
}
.kit-cal-day:hover{background:var(--kit-bg-subtle)}
.kit-cal-day:focus-visible{box-shadow:var(--kit-focus-ring)}
.kit-cal-day.is-muted{color:var(--kit-fg-muted);opacity:.5}
.kit-cal-day.is-today{font-weight:750;color:var(--kit-brand)}
.kit-cal-day.is-selected{background:var(--kit-brand);color:#fff;font-weight:700}
/* A day with no slots must not merely look pale — it must not respond. */
.kit-cal-day.is-full,.kit-cal-day[disabled]{color:var(--kit-fg-muted);opacity:.35;cursor:not-allowed;text-decoration:line-through}
/* A dot under a day that has availability. */
.kit-cal-day.has-slots::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;
  border-radius:50%;background:var(--kit-brand)}
.kit-cal-day.is-selected.has-slots::after{background:#fff}

/* Times for the chosen day. */
.kit-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kit-slot{border:1px solid var(--kit-border-default);border-radius:8px;background:var(--kit-bg-default);
  padding:6px 11px;font-size:12.5px;font-weight:650;cursor:pointer;font-family:inherit;color:inherit}
.kit-slot:hover{border-color:var(--kit-border-focus);color:var(--kit-border-focus)}
.kit-slot.is-selected{background:var(--kit-brand);border-color:var(--kit-brand);color:#fff}
.kit-slot[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}

/* ── CART ──────────────────────────────────────────────────────────────────
   This project has a quote basket rather than a checkout — items are gathered
   and sent to the owner. The page exists and had no components of its own. */
.kit-cart-line{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--kit-border-subtle)}
.kit-cart-line:last-child{border-bottom:0}
.kit-cart-img{width:52px;height:52px;border-radius:9px;object-fit:cover;background:var(--kit-bg-subtle);flex:0 0 52px}
.kit-cart-main{flex:1;min-width:0}
.kit-cart-n{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-cart-m{font-size:11.5px;color:var(--kit-fg-muted);margin-top:2px}
.kit-cart-p{font-size:13.5px;font-weight:750;color:var(--kit-brand);white-space:nowrap}
.kit-qty{display:inline-flex;align-items:center;border:1px solid var(--kit-border-default);border-radius:8px;overflow:hidden}
.kit-qty button{width:28px;height:28px;border:0;background:var(--kit-bg-default);color:var(--kit-fg-muted);
  cursor:pointer;font-size:13px;font-family:inherit}
.kit-qty button:hover{background:var(--kit-bg-subtle);color:var(--kit-fg-default)}
.kit-qty span{min-width:32px;text-align:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* The summary box — subtotal, notes and the one action. */
.kit-cart-box{border:1px solid var(--kit-border-default);border-radius:var(--kit-radius);
  background:var(--kit-bg-default);padding:15px}
.kit-cart-row{display:flex;justify-content:space-between;font-size:13px;color:var(--kit-fg-muted);margin-bottom:7px}
.kit-cart-total{display:flex;justify-content:space-between;font-size:16px;font-weight:800;
  padding-top:11px;border-top:1px solid var(--kit-border-default);margin-top:4px}

/* The slide-in basket. Anchored right on a desktop, bottom on a phone. */
.kit-drawer,
.kit-cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:calc(var(--kit-z-overlay) + 5);
  background:var(--kit-bg-default);box-shadow:var(--kit-shadow);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s
}
.kit-drawer.is-open,
.kit-cart-drawer.is-open{transform:none}
.kit-drawer-head,
.kit-cart-drawer-head{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--kit-border-default)}
.kit-drawer-body,
.kit-cart-drawer-body{flex:1;overflow:auto;padding:4px 17px}
.kit-drawer-foot,
.kit-cart-drawer-foot{padding:15px 17px;border-top:1px solid var(--kit-border-default)}
@media(max-width:640px){
  .kit-drawer,
  .kit-cart-drawer{top:auto;left:0;width:auto;max-height:86vh;border-radius:18px 18px 0 0;
    transform:translateY(100%)}
  .kit-drawer.is-open,
  .kit-cart-drawer.is-open{transform:none}
}
/* The count on the basket button. */
.kit-cart-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:999px;
  background:#C0392B;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* ── CTA PANEL ─────────────────────────────────────────────────────────────
   The large call-to-action block with a headline, a form and a strip of
   figures beneath it. */
.kit-cta{border-radius:20px;padding:34px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--kit-brand),#2FA89F 55%,#7C3AED)}
.kit-cta-eyebrow{display:inline-block;background:rgba(255,255,255,.18);border-radius:999px;
  padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.kit-cta-h{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.18;margin:14px 0 10px;max-width:18ch}
.kit-cta-p{font-size:14px;line-height:1.6;opacity:.9;max-width:52ch}
.kit-cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.kit-cta-form{background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:16px;padding:18px}
.kit-cta-form .form-control{background:rgba(255,255,255,.9);border-color:transparent}
.kit-cta-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.28)}
.kit-cta-stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kit-cta-stat span{font-size:12px;opacity:.85}
@media(max-width:820px){
  .kit-cta{padding:24px;border-radius:16px}
  .kit-cta-grid{grid-template-columns:1fr;gap:20px}
  .kit-cta-h{font-size:23px;max-width:none}
  .kit-cta-stats{gap:18px}
}

/* ── URDU AND RIGHT-TO-LEFT ────────────────────────────────────────────────
   Urdu reads right to left, so a layout that only mirrors text is not enough:
   the whole flow has to turn. Logical properties do most of it; these are the
   places that still need saying.
   Numbers, prices and code stay left-to-right even inside Urdu text. */
[dir="rtl"] .kit-card-flag{left:auto;right:9px}
[dir="rtl"] .kit-card-act{right:auto;left:9px}
[dir="rtl"] .jcard{border-left:0;border-right:3px solid #1D4ED8}
[dir="rtl"] .rowcard.is-urgent{border-left:0;border-right:3px solid #D97706}
[dir="rtl"] .rcard-reply{border-left:0;border-right:2px solid var(--kit-brand);border-radius:8px 0 0 8px}
[dir="rtl"] .kit-cart-drawer{right:auto;left:0;transform:translateX(-100%)}
[dir="rtl"] .kit-cart-drawer.is-open{transform:none}
[dir="rtl"] .kit-crumbs-sep{transform:scaleX(-1)}
[dir="rtl"] .kit-tip--right::after{left:auto;right:calc(100% + 7px)}
[dir="rtl"] .kit-avatar-stack .kit-avatar{margin-left:0;margin-right:-10px}
[dir="rtl"] .kit-avatar-stack .kit-avatar:first-child{margin-right:0}

/* Urdu needs a taller line and a font that has the script. */
[lang="ur"],.kit-ur{
  font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;
  line-height:2.1;font-size:1.05em
}
/* A price or a phone number is read left to right in any language. */
.kit-ltr,[dir="rtl"] .kit-cart-p,[dir="rtl"] .price,[dir="rtl"] .pcard-price{
  direction:ltr;unicode-bidi:isolate
}

/* ══ SECTION PATTERNS ══════════════════════════════════════════════════════
   The building blocks a page is made of, so the page builder can offer them
   as sections and no page writes its own markup. */

/* Section header — the dash, eyebrow, heading, and something on the right. */
.kit-sec-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.kit-sec-head-l{flex:1;min-width:250px}
.kit-eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:750;
  letter-spacing:.11em;text-transform:uppercase;color:var(--kit-fg-muted)}
.kit-eyebrow::before{content:'';width:26px;height:1.5px;background:var(--kit-brand);display:block;flex:0 0 26px}
.kit-sec-h{font-size:clamp(21px,3vw,29px);font-weight:800;letter-spacing:-.9px;line-height:1.15;
  margin-top:11px;max-width:16ch}
.kit-sec-aside{font-size:13.5px;color:var(--kit-fg-muted);line-height:1.6;max-width:38ch;padding-bottom:4px}
[dir="rtl"] .kit-eyebrow::before{order:2}

/* Feature grid — cells share borders, which is what makes it read as one
   block rather than six floating cards. */
.kit-features{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--kit-border-default);border-radius:16px;overflow:hidden}
.kit-feature{padding:20px;border-right:1px solid var(--kit-border-default);
  border-bottom:1px solid var(--kit-border-default);position:relative}
.kit-features > .kit-feature:nth-child(3n){border-right:0}
.kit-features > .kit-feature:nth-last-child(-n+3){border-bottom:0}
.kit-feature-ico{width:34px;height:34px;border-radius:10px;background:var(--kit-brand);color:#fff;
  display:grid;place-items:center;font-size:15px}
.kit-feature-arrow{position:absolute;top:20px;right:20px;color:var(--kit-brand);font-size:13px;opacity:.75}
.kit-feature-t{font-size:14px;font-weight:750;margin:14px 0 5px}
.kit-feature-p{font-size:12.5px;color:var(--kit-fg-muted);line-height:1.5}
[dir="rtl"] .kit-feature-arrow{right:auto;left:20px;transform:scaleX(-1)}
@media(max-width:860px){
  .kit-features{grid-template-columns:repeat(2,1fr)}
  .kit-features > .kit-feature:nth-child(3n){border-right:1px solid var(--kit-border-default)}
  .kit-features > .kit-feature:nth-child(2n){border-right:0}
}
@media(max-width:520px){.kit-features{grid-template-columns:1fr}.kit-feature{border-right:0}}

/* Split — picture one side, a card floating over it, content the other. */
.kit-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.kit-split-media{position:relative;border-radius:16px;overflow:hidden;background:var(--kit-bg-subtle)}
.kit-split-media img{width:100%;height:100%;object-fit:cover;display:block}
.kit-split-float{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-radius:12px;padding:11px 13px;max-width:74%}
.kit-split-float-t{font-size:13px;font-weight:750}
.kit-split-float-s{font-size:11px;color:var(--kit-fg-muted);margin-top:2px}
.kit-checklist{list-style:none;margin:16px 0 0;padding:0}
.kit-checklist li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
  margin-bottom:9px;color:var(--kit-fg-muted)}
.kit-checklist i{color:var(--kit-brand);margin-top:2px;flex:0 0 auto}
[dir="rtl"] .kit-split-float{left:auto;right:14px}
@media(max-width:860px){.kit-split{grid-template-columns:1fr;gap:20px}}

/* Marquee — decorative, so it is hidden from screen readers and stops moving
   when the visitor has asked for less motion. */
.kit-marquee{overflow:hidden;padding:14px 0;border-block:1px solid var(--kit-border-default);
  background:var(--kit-bg-subtle)}
.kit-marquee-t{display:flex;gap:26px;align-items:center;white-space:nowrap;
  font-size:clamp(28px,5vw,44px);font-weight:850;letter-spacing:-1.5px;
  color:rgba(11,31,29,.06);animation:kit-marquee 18s linear infinite}
@keyframes kit-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.kit-marquee-t{animation:none}}

/* Numbered steps — the "how it works" list. Distinct from .kit-steps, which
   tracks progress through a wizard; this one just explains. */
.kit-steps-num{list-style:none;margin:0;padding:0}
.kit-steps-num li{display:flex;gap:13px;align-items:flex-start;margin-bottom:15px}
.kit-steps-num-n{width:32px;height:32px;border-radius:50%;background:var(--kit-brand);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:750;flex:0 0 32px}
.kit-steps-num-t{font-size:14px;font-weight:750;display:block}
.kit-steps-num-p{font-size:12.5px;color:var(--kit-fg-muted);margin-top:2px;line-height:1.5;display:block}

/* Highlight strip — the coloured band carrying one number that matters. */
.kit-strip{border-radius:14px;padding:17px 20px;color:#fff;
  background:linear-gradient(110deg,var(--kit-brand),#2FA89F 60%,#7C3AED)}
.kit-strip--warm{background:linear-gradient(110deg,#D97706,#E0955F)}
.kit-strip-l{font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.kit-strip-v{font-size:24px;font-weight:850;letter-spacing:-.5px;margin-top:5px}
.kit-strip-s{font-size:12px;opacity:.85;margin-top:3px}

/* Media grid — plain tiles with one accent per row, so the eye has somewhere
   to land. On a directory full of uploaded photographs, more than one accent
   fights the content. */
.kit-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.kit-media-tile{border-radius:14px;overflow:hidden;background:var(--kit-bg-default);
  border:1px solid var(--kit-border-default);display:flex;flex-direction:column}
.kit-media-img{aspect-ratio:16/10;width:100%;object-fit:cover;display:block;background:var(--kit-bg-subtle)}
.kit-media-b{padding:13px;flex:1;display:flex;flex-direction:column}
.kit-media-t{font-size:15px;font-weight:750}
.kit-media-p{font-size:12.5px;color:var(--kit-fg-muted);line-height:1.5;margin-top:5px}
.kit-media-l{font-size:12.5px;font-weight:700;color:var(--kit-brand);margin-top:auto;padding-top:9px;
  display:inline-flex;gap:5px;align-items:center}
.kit-media-tile--accent{border:0;color:#fff;
  background:linear-gradient(150deg,var(--kit-brand),#2FA89F 55%,#7C3AED)}
.kit-media-tile--accent .kit-media-p,.kit-media-tile--accent .kit-media-l{color:rgba(255,255,255,.9)}
.kit-media-tag{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;
  padding:2px 9px;font-size:10.5px;font-weight:700;margin-bottom:9px;align-self:flex-start}
.kit-media-ico{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:15px;margin-bottom:11px}
@media(max-width:860px){.kit-media-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kit-media-grid{grid-template-columns:1fr}}

/* Action pair — a primary action with an icon button beside it. */
.kit-actions{display:flex;gap:7px}
.kit-actions-main{flex:1;height:38px;border-radius:999px;border:0;background:var(--kit-brand);color:#fff;
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;font-family:inherit;text-decoration:none}
.kit-actions-main--soft{background:var(--kit-brand-tint,rgba(14,92,87,.10));color:var(--kit-brand)}
.kit-actions-main[disabled]{opacity:.5;cursor:not-allowed}
.kit-actions-side{width:38px;height:38px;border-radius:50%;border:1px solid var(--kit-border-default);
  background:var(--kit-bg-default);color:var(--kit-fg-muted);display:grid;place-items:center;
  font-size:13px;flex:0 0 38px;cursor:pointer}
.kit-actions-side:hover{color:var(--kit-brand);border-color:var(--kit-brand)}

/* ══ LIBRARY ═══════════════════════════════════════════════════════════════ */

/* Profile card — a person: portrait, role, two facts, the action pair.
   The second fact is optional and its row keeps its height, so a member with
   no reviews yet does not pull the footer out of line with the others. */
.kit-profile-img{aspect-ratio:1;display:grid;place-items:center;position:relative;
  background:linear-gradient(165deg,#DDE7F5,#E8DDF2 55%,#F5E2E4)}
.kit-profile-img img{width:100%;height:100%;object-fit:cover}
.kit-profile-b{padding:12px 13px;flex:1}
.kit-profile-tag{display:inline-block;background:var(--kit-brand-tint,rgba(14,92,87,.09));
  color:var(--kit-brand);border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
.kit-profile-n{font-size:15px;font-weight:800;margin:7px 0 5px}
.kit-profile-meta{display:flex;justify-content:space-between;gap:8px;
  font-size:12.5px;color:var(--kit-fg-muted);min-height:19px}
.kit-profile-foot{padding:0 13px 13px;display:flex;gap:7px;margin-top:auto}

/* Form section — steps and a highlight one side, the form card the other. */
.kit-form-section{background:var(--kit-brand-tint,rgba(14,92,87,.06));border-radius:20px;padding:26px}
.kit-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.kit-form-card{background:var(--kit-bg-default);border-radius:16px;padding:20px;
  box-shadow:0 8px 30px rgba(11,31,29,.09)}
.kit-form-card-h{font-size:17px;font-weight:800;color:var(--kit-brand);margin-bottom:14px}
.kit-form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:860px){
  .kit-form-section{padding:18px;border-radius:16px}
  .kit-form-grid,.kit-form-row{grid-template-columns:1fr}
}

/* Newsletter. */
.kit-newsletter{display:flex;gap:8px;max-width:420px}
.kit-newsletter input{flex:1;min-width:0}
.kit-newsletter .btn{border-radius:999px;white-space:nowrap}
.kit-newsletter--stack{flex-direction:column;max-width:280px}
.kit-newsletter--stack .btn{width:100%;justify-content:center}
.kit-newsletter-note{font-size:11.5px;color:var(--kit-fg-muted);margin-top:7px}

/* Header. */
.kit-header-strip{display:flex;align-items:center;gap:16px;padding:6px 14px;
  background:var(--kit-brand);color:#fff;font-size:11.5px}
.kit-header-strip .kit-r{margin-left:auto;opacity:.85}
.kit-header-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--kit-bg-default)}
.kit-header-brand{font-size:15px;font-weight:800;letter-spacing:-.4px}
.kit-header-nav{display:flex;gap:3px}
.kit-header-nav a{font-size:12.5px;font-weight:600;color:var(--kit-fg-muted);
  padding:6px 10px;border-radius:8px;text-decoration:none}
.kit-header-nav a:hover{background:var(--kit-bg-subtle);color:var(--kit-fg-default)}
.kit-header-nav a.is-on{background:var(--kit-brand-tint,rgba(14,92,87,.09));color:var(--kit-brand)}
.kit-header-search{flex:1;max-width:300px;height:36px;border:1px solid var(--kit-border-default);
  border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 13px;
  font-size:12.5px;color:var(--kit-fg-muted);background:var(--kit-bg-subtle)}
.kit-header-act{margin-left:auto;display:flex;gap:7px;align-items:center}
.kit-mega{border-top:1px solid var(--kit-border-default);background:var(--kit-bg-subtle);
  padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kit-mega-col b{font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  color:var(--kit-fg-muted);display:block;margin-bottom:6px}
.kit-mega-col a{display:block;font-size:12.5px;color:var(--kit-fg-muted);text-decoration:none;padding:3px 0}
@media(max-width:860px){
  .kit-header-nav,.kit-header-search{display:none}
  .kit-mega{grid-template-columns:1fr}
}

/* Footer. */
.kit-footer{background:#0B1F1D;color:rgba(255,255,255,.72)}
.kit-footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:22px;padding:26px 22px}
.kit-footer-brand{font-size:15px;font-weight:800;color:#fff}
.kit-footer h4{font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;margin-bottom:9px}
.kit-footer a{display:block;font-size:12.5px;color:rgba(255,255,255,.72);text-decoration:none;padding:3px 0}
.kit-footer a:hover{color:#fff}
.kit-footer-social{display:flex;gap:7px;margin-top:11px}
.kit-footer-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;color:#fff;font-size:13px;padding:0}
.kit-footer-bot{display:flex;align-items:center;gap:14px;padding:12px 22px;
  border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;flex-wrap:wrap}
.kit-footer-bot .kit-r{margin-left:auto;display:flex;gap:14px}
@media(max-width:860px){.kit-footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.kit-footer-top{grid-template-columns:1fr}}

/* Sheet — an overlay that always comes from the bottom, on any screen. */
.kit-sheet{background:var(--kit-bg-default);border-radius:18px 18px 0 0;padding:14px;
  width:100%;max-height:86vh;overflow:auto;margin-top:auto}
.kit-sheet-grab{width:36px;height:4px;border-radius:99px;background:var(--kit-border-default);margin:0 auto 12px}

/* Popover — anchored to the control that opened it. */
.kit-popover{position:absolute;z-index:calc(var(--kit-z-overlay) - 10);
  background:var(--kit-bg-default);border:1px solid var(--kit-border-default);border-radius:11px;
  box-shadow:0 8px 26px rgba(11,31,29,.14);padding:7px;min-width:170px}
.kit-popover a,.kit-popover button{display:flex;align-items:center;gap:8px;width:100%;
  font-size:12.5px;padding:7px 9px;border-radius:7px;color:var(--kit-fg-default);
  text-decoration:none;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
.kit-popover a:hover,.kit-popover button:hover{background:var(--kit-bg-subtle)}
.kit-popover .is-danger{color:#C0392B}

/* Sticky sidebar. It stops being sticky on a phone, where a pinned box eats
   the content it is meant to support. */
.kit-sticky{position:sticky;top:14px}
@media(max-width:900px){.kit-sticky{position:static}}

/* ── MODAL ─────────────────────────────────────────────────────────────────
   One dialog for confirmations, quick views and forms. Uses the native
   <dialog>-free pattern so it works without Bootstrap's JS. */
.kit-overlay{
  position:fixed;inset:0;z-index:var(--kit-z-overlay);
  background:rgba(11,31,29,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;transition:opacity .16s
}
.kit-overlay.is-open{opacity:1;visibility:visible}
.kit-modal{
  background:var(--kit-surface);border-radius:var(--kit-radius);
  box-shadow:var(--kit-shadow);width:100%;max-width:520px;
  max-height:calc(100vh - 36px);display:flex;flex-direction:column;
  transform:translateY(8px) scale(.99);transition:transform .16s
}
.kit-overlay.is-open .kit-modal{transform:none}
.kit-modal--wide{max-width:820px}
.kit-modal--full{max-width:none;height:calc(100vh - 36px)}
.kit-modal-head{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--kit-line);flex:0 0 auto
}
.kit-modal-title{font-size:15px;font-weight:750;margin:0}
.kit-modal-close{
  margin-left:auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--kit-line);
  background:var(--kit-surface);color:var(--kit-muted);display:grid;place-items:center;cursor:pointer
}
.kit-modal-close:hover{color:var(--kit-text)}
.kit-modal-body{padding:18px;overflow:auto;flex:1 1 auto}
.kit-modal-foot{
  display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;
  border-top:1px solid var(--kit-line);flex:0 0 auto
}
/* On a phone a dialog reads better anchored to the bottom. */
@media(max-width:640px){
  .kit-overlay{padding:0;align-items:flex-end}
  .kit-modal{max-width:none;border-radius:18px 18px 0 0;max-height:88vh}
  .kit-modal-foot{flex-direction:column-reverse}
  .kit-modal-foot > *{width:100%}
}

/* ── GALLERY / LIGHTBOX ────────────────────────────────────────────────── */
.kit-gallery{display:grid;gap:8px;grid-template-columns:repeat(var(--kit-gal-cols,4),minmax(0,1fr))}
.kit-gallery-item{
  position:relative;border-radius:var(--kit-radius-sm);overflow:hidden;
  aspect-ratio:1;background:var(--kit-ground);cursor:zoom-in;border:0;padding:0
}
.kit-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.kit-gallery-item:hover img{transform:scale(1.04)}
.kit-gallery-more{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(11,31,29,.55);color:#fff;font-size:15px;font-weight:750
}
@media(max-width:640px){.kit-gallery{grid-template-columns:repeat(var(--kit-gal-cols-m,3),minmax(0,1fr))}}

.kit-lightbox{
  position:fixed;inset:0;z-index:calc(var(--kit-z-overlay) + 10);background:rgba(6,16,15,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .16s
}
.kit-lightbox.is-open{opacity:1;visibility:visible}
.kit-lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px}
.kit-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:19px;display:grid;place-items:center;cursor:pointer
}
.kit-lightbox-nav:hover{background:rgba(255,255,255,.24)}
.kit-lightbox-nav--prev{left:16px}
.kit-lightbox-nav--next{right:16px}
.kit-lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.kit-lightbox-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.8);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ── SKELETON ──────────────────────────────────────────────────────────────
   Shown while content loads. Shaped like what is coming, so the page does not
   jump when the real thing arrives. */
.kit-skel{background:linear-gradient(90deg,var(--kit-ground) 25%,rgba(0,0,0,.045) 37%,var(--kit-ground) 63%);
  background-size:400% 100%;animation:kit-shimmer 1.3s ease-in-out infinite;border-radius:6px}
@keyframes kit-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.kit-skel-line{height:11px;margin-bottom:7px}
.kit-skel-line:last-child{margin-bottom:0}
.kit-skel-line--60{width:60%}
.kit-skel-line--40{width:40%}
.kit-skel-img{aspect-ratio:16/10;border-radius:var(--kit-radius-sm)}
.lv > .kit-skel-card{height:100%}
.kit-skel-card{border:1px solid var(--kit-line);border-radius:var(--kit-radius-sm);
  overflow:hidden;background:var(--kit-surface)}
.kit-skel-card .kit-skel-body{padding:11px 12px}
.kit-skel-circle{border-radius:50%;width:38px;height:38px}
@media(prefers-reduced-motion:reduce){.kit-skel{animation:none}}

/* ── AVATAR ────────────────────────────────────────────────────────────── */
.kit-avatar{
  width:var(--kit-avatar-size,38px);height:var(--kit-avatar-size,38px);
  border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;background:var(--kit-brand);color:#fff;
  font-size:calc(var(--kit-avatar-size,38px) * .38);font-weight:700;line-height:1;
  text-transform:uppercase;letter-spacing:.02em
}
.kit-avatar img{width:100%;height:100%;object-fit:cover}
.kit-avatar--sm{--kit-avatar-size:28px}
.kit-avatar--lg{--kit-avatar-size:56px}
.kit-avatar--xl{--kit-avatar-size:88px}
.kit-avatar-stack{display:flex}
.kit-avatar-stack .kit-avatar{margin-left:-10px;box-shadow:0 0 0 2px var(--kit-surface)}
.kit-avatar-stack .kit-avatar:first-child{margin-left:0}

/* ── PROGRESS ──────────────────────────────────────────────────────────── */
.kit-progress{height:8px;border-radius:999px;background:var(--kit-ground);overflow:hidden}
.kit-progress-fill{height:100%;border-radius:999px;background:var(--kit-brand);
  width:var(--kit-progress,0%);transition:width .3s}
.kit-progress--lg{height:12px}
.kit-progress-label{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--kit-muted);margin-bottom:5px}
.kit-progress-label b{color:var(--kit-text);font-variant-numeric:tabular-nums}

/* ── BREADCRUMB ────────────────────────────────────────────────────────── */
.kit-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px}
.kit-crumbs a{color:var(--kit-muted);text-decoration:none}
.kit-crumbs a:hover{color:var(--kit-text)}
.kit-crumbs-sep{color:var(--kit-muted);opacity:.55;font-size:11px}
.kit-crumbs [aria-current]{color:var(--kit-text);font-weight:650}

/* ── ACCORDION ─────────────────────────────────────────────────────────── */
.kit-acc{border:1px solid var(--kit-line);border-radius:var(--kit-radius-sm);overflow:hidden;background:var(--kit-surface)}
.kit-acc + .kit-acc{margin-top:7px}
.kit-acc-head{
  display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;
  background:none;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit
}
.kit-acc-title{font-size:13.5px;font-weight:650;flex:1}
.kit-acc-icon{color:var(--kit-muted);transition:transform .18s;flex:0 0 auto}
.kit-acc.is-open .kit-acc-icon{transform:rotate(180deg)}
.kit-acc-body{padding:0 14px 14px;font-size:13px;color:var(--kit-muted);line-height:1.6;display:none}
.kit-acc.is-open .kit-acc-body{display:block}

/* ── TOOLTIP ───────────────────────────────────────────────────────────────
   For icon-only controls, which otherwise give no clue what they do. */
.kit-tip{position:relative;display:inline-flex}
.kit-tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--kit-text);color:#fff;font-size:11.5px;font-weight:600;line-height:1.35;
  padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .13s;z-index:20
}
.kit-tip:hover::after,.kit-tip:focus-visible::after{opacity:1}
.kit-tip--right::after{bottom:auto;top:50%;left:calc(100% + 7px);transform:translateY(-50%)}
@media(hover:none){.kit-tip::after{display:none}}   /* a phone has no hover */

/* ── STEPPER ───────────────────────────────────────────────────────────────
   Already written once inside the page builder, where no other page could
   reach it. This is that component, available everywhere. */
.kit-steps{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;padding:2px 0}
.kit-step{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.kit-step-dot{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;
  border:1.5px solid var(--kit-line);background:var(--kit-surface);
  font-size:12px;font-weight:700;color:var(--kit-muted)
}
.kit-step-label{font-size:12.5px;color:var(--kit-muted);white-space:nowrap}
.kit-step-line{height:2px;background:var(--kit-line);margin:0 8px;border-radius:2px;flex:1 1 14px;min-width:14px}
.kit-step.is-done .kit-step-dot{background:rgba(14,92,87,.12);border-color:var(--kit-brand);color:var(--kit-brand)}
.kit-step.is-done .kit-step-label{color:var(--kit-text)}
.kit-step.is-current .kit-step-dot{background:var(--kit-brand);border-color:var(--kit-brand);color:#fff}
.kit-step.is-current .kit-step-label{color:var(--kit-text);font-weight:650}

/* ── LOAD MORE ─────────────────────────────────────────────────────────── */
.kit-loadmore{display:flex;justify-content:center;padding:18px 0}
.kit-loadmore-btn{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 22px;
  border:1px solid var(--kit-line);border-radius:999px;background:var(--kit-surface);
  font-size:13.5px;font-weight:650;color:var(--kit-text);cursor:pointer
}
.kit-loadmore-btn:hover{border-color:var(--kit-brand);color:var(--kit-brand)}
.kit-loadmore-btn[disabled]{opacity:.55;cursor:default}
.kit-loadmore-done{font-size:12.5px;color:var(--kit-muted)}