/* ==========================================================================
   KÜCHEN — Design System
   Precedence when rules collide: accessibility → clarity → brand → aesthetics
   Every colour value below was computed against WCAG 2.2. Do not substitute a
   hex without re-running the contrast check.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIER 1 — PRIMITIVES.  Never referenced by a component. Ever.
   -------------------------------------------------------------------------- */
:root{
  /* Brass gold — hue 46° */
  --kc-gold-50:#FBF6E6; --kc-gold-100:#F6EBC4; --kc-gold-200:#EEDA95;
  --kc-gold-300:#E2C55F; --kc-gold-400:#D5B23C; --kc-gold-500:#C9A227;
  --kc-gold-600:#A8850F; --kc-gold-700:#856A0C; --kc-gold-800:#6B540A;
  --kc-gold-900:#4A3A07;

  /* Warm neutrals */
  --kc-white:#FFFFFF;  --kc-ivory:#F7F5EF;  --kc-n-100:#EFEDE6;
  --kc-n-200:#DEDBD1;  --kc-n-300:#C4C0B4;  --kc-n-400:#9B978A;
  --kc-n-500:#6B6B6B;  --kc-n-600:#4F4F4F;  --kc-n-700:#333333;
  --kc-charcoal:#242424; --kc-ink:#111111;

  /* Semantic primitives */
  --kc-success:#146B3F; --kc-success-wash:#E7F4ED; --kc-success-dk:#5CD98F;
  --kc-warning:#9A4A0B; --kc-warning-wash:#FCF0E4; --kc-warning-dk:#FFA657;
  --kc-error:#B3261E;   --kc-error-wash:#FBEAE8;   --kc-error-dk:#FF7B72;
  --kc-info:#1B5FA8;    --kc-info-wash:#E8F1FA;    --kc-info-dk:#79B8FF;

  /* Type */
  --kc-font-display:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --kc-font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --kc-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Space — 4px base, 8px rhythm */
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* Radius */
  --r-none:0; --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --r-2xl:20px; --r-pill:999px;

  /* Elevation — neutral only. Never a gold shadow. */
  --sh-sm:0 1px 2px rgba(17,17,17,.06);
  --sh-md:0 2px 4px rgba(17,17,17,.06),0 8px 16px rgba(17,17,17,.06);
  --sh-lg:0 4px 8px rgba(17,17,17,.08),0 16px 32px rgba(17,17,17,.08);

  /* Motion — nothing exceeds 320ms */
  --d-instant:100ms; --d-fast:160ms; --d-base:240ms; --d-slow:320ms;
  --e-standard:cubic-bezier(.2,0,0,1);
  --e-enter:cubic-bezier(0,0,0,1);
  --e-exit:cubic-bezier(.3,0,1,1);

  /* Layout */
  --w-prose:72ch; --w-content:1200px; --w-wide:1320px;
  --header-h:72px; --bottombar-h:0px;

  /* z-index */
  --z-sticky:100; --z-dropdown:200; --z-actionbar:300;
  --z-drawer:400; --z-modal:500; --z-toast:600; --z-skip:9999;
}

/* --------------------------------------------------------------------------
   TIER 2 — SEMANTIC ROLES.  The only layer components may reference.
   -------------------------------------------------------------------------- */
:root,[data-theme="light"]{
  color-scheme:light;
  --surface-canvas:var(--kc-white);
  --surface-brand-section:var(--kc-ivory);
  --surface-raised:var(--kc-white);
  --surface-sunken:var(--kc-n-100);
  --surface-inverse:var(--kc-ink);
  --surface-accent:var(--kc-gold-500);
  --surface-accent-subtle:var(--kc-gold-50);

  --text-primary:var(--kc-ink);
  --text-secondary:var(--kc-n-500);
  --text-tertiary:var(--kc-n-600);
  --text-disabled:var(--kc-n-400);
  --text-on-accent:var(--kc-ink);          /* 7.81 : 1 */
  --text-on-inverse:var(--kc-white);
  --text-accent:var(--kc-gold-700);        /* 5.17 : 1 — only gold text on light */
  --text-link:var(--kc-ink);
  --text-link-hover:var(--kc-gold-800);

  --divider:var(--kc-n-200);               /* decorative — no minimum */
  --border-control:var(--kc-n-700);        /* functional — 12.63 : 1 */
  --border-accent:var(--kc-gold-600);      /* 3.48 : 1 */
  --focus-inner:var(--kc-ink);
  --focus-outer:var(--kc-gold-500);

  --action-primary-bg:var(--kc-gold-500);
  --action-primary-bg-hover:var(--kc-gold-400);
  --action-primary-bg-active:var(--kc-gold-600);
  --action-primary-fg:var(--kc-ink);
  --action-secondary-bg:var(--kc-ink);
  --action-secondary-fg:var(--kc-white);

  --selected-bg:var(--kc-gold-50);
  --selected-border:var(--kc-gold-600);
  --rating-filled:var(--kc-gold-600);      /* 3.48 — NOT gold-500 */
  --rating-empty:var(--kc-n-300);

  --status-success:var(--kc-success); --status-success-wash:var(--kc-success-wash);
  --status-warning:var(--kc-warning); --status-warning-wash:var(--kc-warning-wash);
  --status-error:var(--kc-error);     --status-error-wash:var(--kc-error-wash);
  --status-info:var(--kc-info);       --status-info-wash:var(--kc-info-wash);

  --scrim:rgba(17,17,17,.62);
  --img-tint:transparent;
}

[data-theme="dark"]{
  color-scheme:dark;
  --surface-canvas:#111111;
  --surface-brand-section:#181818;
  --surface-raised:#181818;
  --surface-sunken:#0C0C0C;
  --surface-inverse:#F7F5EF;
  --surface-accent:var(--kc-gold-400);     /* ink on it 9.23 : 1 */
  --surface-accent-subtle:#2A2415;

  --text-primary:#FFFFFF;                   /* 17.76 on raised */
  --text-secondary:#D2D2D2;                 /* 11.74 */
  --text-tertiary:#B4B0A4;
  --text-disabled:#7E7A70;
  --text-on-accent:#111111;
  --text-on-inverse:#111111;
  --text-accent:var(--kc-gold-300);         /* 10.47 */
  --text-link:#FFFFFF;
  --text-link-hover:var(--kc-gold-300);

  --divider:#333333;                        /* decorative only */
  --border-control:#6E6E6E;                 /* functional — 3.48 : 1 */
  --border-accent:var(--kc-gold-400);
  --focus-inner:#FFFFFF;
  --focus-outer:var(--kc-gold-400);

  --action-primary-bg:var(--kc-gold-400);
  --action-primary-bg-hover:var(--kc-gold-300);
  --action-primary-bg-active:var(--kc-gold-500);
  --action-primary-fg:#111111;
  --action-secondary-bg:#F7F5EF;
  --action-secondary-fg:#111111;

  --selected-bg:#2A2415;
  --selected-border:var(--kc-gold-400);
  --rating-filled:var(--kc-gold-300);
  --rating-empty:#4A4A46;

  --status-success:var(--kc-success-dk); --status-success-wash:#12281D;
  --status-warning:var(--kc-warning-dk); --status-warning-wash:#2B1C0D;
  --status-error:var(--kc-error-dk);     --status-error-wash:#2C1512;
  --status-info:var(--kc-info-dk);       --status-info-wash:#12212F;

  --scrim:rgba(0,0,0,.72);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 2px 4px rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.4);
  --sh-lg:0 4px 8px rgba(0,0,0,.5),0 16px 32px rgba(0,0,0,.45);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* SC 2.4.11 — focused elements must never sit under the sticky header/bar */
  scroll-padding-block:calc(var(--header-h) + 16px) calc(var(--bottombar-h) + 96px);
  scroll-behavior:smooth;
  padding-top:env(safe-area-inset-top,0px);
}
body{
  margin:0;
  font-family:var(--kc-font-body);
  font-size:1rem;              /* 16px floor — never lower */
  line-height:1.6;
  color:var(--text-primary);
  background:var(--surface-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-4);font-family:var(--kc-font-display);font-weight:600;line-height:1.2}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4);padding-inline-start:1.25em}
hr{border:0;border-top:1px solid var(--divider);margin:var(--sp-10) 0}
:target{scroll-margin-block-start:calc(var(--header-h) + 24px)}

/* ---- Focus: two rings, legible on white, ivory, gold and ink -------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-inner);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--focus-outer);
  border-radius:inherit;
}
@media (prefers-contrast:more){
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline-width:3px;box-shadow:0 0 0 6px var(--focus-outer);
  }
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link{
  position:absolute;inset-inline-start:var(--sp-4);inset-block-start:-100px;
  z-index:var(--z-skip);background:var(--surface-inverse);color:var(--text-on-inverse);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);font-weight:600;
  text-decoration:none;transition:inset-block-start var(--d-fast) var(--e-standard);
}
.skip-link:focus{inset-block-start:var(--sp-3)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}

/* ==========================================================================
   TYPOGRAPHY SCALE — fluid, 360px floor
   ========================================================================== */
.t-display-1{font-family:var(--kc-font-display);font-weight:700;font-size:clamp(2.25rem,1.6rem + 3.2vw,4rem);line-height:1.05;letter-spacing:-.02em}
.t-display-2{font-family:var(--kc-font-display);font-weight:700;font-size:clamp(1.875rem,1.4rem + 2.4vw,3rem);line-height:1.1;letter-spacing:-.015em}
h1,.t-h1{font-size:clamp(1.75rem,1.35rem + 2vw,2.5rem);line-height:1.15;letter-spacing:-.01em}
h2,.t-h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2rem);line-height:1.2;letter-spacing:-.01em}
h3,.t-h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.3}
h4,.t-h4{font-family:var(--kc-font-body);font-size:clamp(1.125rem,1.1rem + .2vw,1.25rem);line-height:1.35}
.t-lead{font-size:1.125rem;line-height:1.6;color:var(--text-secondary)}
.t-sm{font-size:.875rem;line-height:1.55}
.t-caption{font-size:.8125rem;line-height:1.5;letter-spacing:.01em;color:var(--text-secondary)}
.t-overline{
  font-size:.75rem;line-height:1.4;letter-spacing:.14em;font-weight:600;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 var(--sp-3);display:block;
}
.t-overline--accent{color:var(--text-accent)}
.num{font-variant-numeric:tabular-nums}
.price{font-weight:600;font-variant-numeric:tabular-nums}
.price-lg{font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);line-height:1.2;letter-spacing:-.01em}
.mono{font-family:var(--kc-font-mono);font-size:.875em;letter-spacing:.01em}
.prose{max-width:var(--w-prose)}
.muted{color:var(--text-secondary)}
.strike{text-decoration:line-through;color:var(--text-secondary);font-weight:400}

a{color:var(--text-link);text-underline-offset:.22em;text-decoration-thickness:1.5px}
a:hover{color:var(--text-link-hover)}
.link-accent{color:var(--text-accent);font-weight:500}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container{width:100%;max-width:var(--w-content);margin-inline:auto;padding-inline:var(--sp-4)}
.container--wide{max-width:var(--w-wide)}
.container--narrow{max-width:860px}
@media (min-width:768px){.container{padding-inline:var(--sp-8)}}
@media (min-width:1024px){.container{padding-inline:var(--sp-10)}}

.section{padding-block:var(--sp-16)}
@media (min-width:1024px){.section{padding-block:120px}}
.section--tight{padding-block:var(--sp-12)}
@media (min-width:1024px){.section--tight{padding-block:var(--sp-20)}}
.section--ivory{background:var(--surface-brand-section)}
.section--sunken{background:var(--surface-sunken)}
.section--ink{background:var(--surface-inverse);color:var(--text-on-inverse)}
.section--ink h1,.section--ink h2,.section--ink h3{color:inherit}
.section--ink .muted,.section--ink .t-lead,.section--ink .t-overline{color:rgba(255,255,255,.76)}
[data-theme="dark"] .section--ink .muted,
[data-theme="dark"] .section--ink .t-lead,
[data-theme="dark"] .section--ink .t-overline{color:rgba(17,17,17,.7)}

.section-head{max-width:64ch;margin-bottom:var(--sp-10)}
.section-head--center{margin-inline:auto;text-align:center}

.grid{display:grid;gap:var(--sp-4)}
@media (min-width:768px){.grid{gap:var(--sp-6)}}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:var(--sp-8);align-items:center}
@media (min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-16)}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
  .split--wide-right{grid-template-columns:.85fr 1.15fr}}
.stack>*+*{margin-block-start:var(--sp-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.cluster--between{justify-content:space-between}
.flow-end{margin-inline-start:auto}
.mt-0{margin-block-start:0}.mb-0{margin-block-end:0}
.mt-6{margin-block-start:var(--sp-6)}.mt-8{margin-block-start:var(--sp-8)}
.mt-10{margin-block-start:var(--sp-10)}
.text-center{text-align:center}

/* ==========================================================================
   LOGO — 3:1 landscape lockup
   ========================================================================== */
.logo{display:inline-flex;align-items:center;color:var(--text-primary);text-decoration:none}
.logo svg{display:block;height:auto;fill:currentColor}
.logo--header svg{width:168px}
@media (min-width:768px){.logo--header svg{width:204px}}
.logo--footer svg{width:210px}
.logo:focus-visible{border-radius:var(--r-sm)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-h:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--btn-h);min-width:var(--btn-h);
  padding-inline:var(--sp-6);
  font-family:var(--kc-font-body);font-size:.9375rem;font-weight:500;letter-spacing:.005em;
  border:1.5px solid transparent;border-radius:var(--r-md);
  background:transparent;color:var(--text-primary);
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color var(--d-fast) var(--e-standard),
             border-color var(--d-fast) var(--e-standard),
             color var(--d-fast) var(--e-standard),
             transform var(--d-instant) var(--e-standard);
}
.btn:active{transform:translateY(1px)}
.btn--sm{--btn-h:36px;padding-inline:var(--sp-4);font-size:.875rem}
.btn--lg{--btn-h:52px;padding-inline:var(--sp-8);font-size:1rem}
.btn--block{display:flex;width:100%}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}

.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);font-weight:600}
.btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.btn--primary:active{background:var(--action-primary-bg-active)}

.btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg);font-weight:600}
.btn--secondary:hover{background:var(--kc-charcoal);color:var(--action-secondary-fg)}
[data-theme="dark"] .btn--secondary:hover{background:var(--kc-white)}

.btn--tertiary{border-color:var(--border-control);color:var(--text-primary)}
.btn--tertiary:hover{background:var(--surface-sunken);color:var(--text-primary)}

.btn--text{padding-inline:var(--sp-2);color:var(--text-primary);text-decoration:underline;
  text-underline-offset:.25em;text-decoration-thickness:1.5px}
.btn--text:hover{color:var(--text-link-hover)}

.btn--inverse{background:var(--kc-white);color:var(--kc-ink);font-weight:600}
.btn--inverse:hover{background:var(--kc-ivory);color:var(--kc-ink)}

.btn--danger{border-color:var(--status-error);color:var(--status-error)}
.btn--danger:hover{background:var(--status-error-wash);color:var(--status-error)}

.btn[aria-disabled="true"],.btn:disabled{
  background:var(--kc-n-100);color:var(--text-disabled);border-color:transparent;
  cursor:not-allowed;pointer-events:none;
}
[data-theme="dark"] .btn[aria-disabled="true"]{background:#2A2A28}
.btn[data-loading="true"]{pointer-events:none}
.btn[data-loading="true"] .btn__spinner{display:inline-block}
.btn__spinner{display:none;width:16px;height:16px;border:2px solid currentColor;
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:transparent;border-radius:var(--r-md);
  color:var(--text-primary);cursor:pointer;
  transition:background-color var(--d-fast) var(--e-standard);
}
.icon-btn:hover{background:var(--surface-sunken)}
.icon-btn svg{width:22px;height:22px;fill:currentColor}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--surface-canvas);
  border-bottom:1px solid var(--divider);
  padding-top:env(safe-area-inset-top,0px);
}
.header-inner{
  display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--header-h);
}
.nav-primary{display:none}
@media (min-width:1024px){
  .nav-primary{display:block;margin-inline-start:var(--sp-8)}
  .nav-primary ul{display:flex;gap:var(--sp-1);list-style:none;margin:0;padding:0}
  .nav-primary a{
    display:block;padding:var(--sp-3) var(--sp-4);min-height:44px;
    font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--text-primary);
    border-radius:var(--r-sm);border-bottom:2px solid transparent;
  }
  .nav-primary a:hover{background:var(--surface-sunken)}
  /* current page carries TWO signals: aria-current + underline */
  .nav-primary a[aria-current="page"]{border-bottom-color:var(--text-primary);font-weight:600}
}
.header-actions{display:flex;align-items:center;gap:var(--sp-1);margin-inline-start:auto}
.header-phone{
  display:none;align-items:center;gap:var(--sp-2);min-height:44px;padding-inline:var(--sp-3);
  font-size:.9375rem;font-weight:600;text-decoration:none;color:var(--text-primary);
  border-radius:var(--r-md);white-space:nowrap;
}
.header-phone:hover{background:var(--surface-sunken);color:var(--text-primary)}
@media (min-width:1280px){.header-phone{display:inline-flex}}
.header-cta{display:none}
@media (min-width:768px){.header-cta{display:inline-flex}}

.cart-btn{position:relative}
.cart-count{
  position:absolute;top:3px;inset-inline-end:3px;min-width:20px;height:20px;
  display:grid;place-items:center;padding-inline:5px;
  background:var(--surface-accent);color:var(--text-on-accent);
  font-size:.6875rem;font-weight:700;border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
.cart-count[hidden]{display:none}

.menu-toggle{display:inline-flex}
@media (min-width:1024px){.menu-toggle{display:none}}

/* ---- Mobile drawer ------------------------------------------------------- */
.drawer-scrim{
  position:fixed;inset:0;background:var(--scrim);z-index:var(--z-drawer);
  opacity:0;pointer-events:none;transition:opacity var(--d-base) var(--e-standard);
}
.drawer-scrim[data-open="true"]{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(88vw,380px);
  z-index:calc(var(--z-drawer) + 1);
  background:var(--surface-canvas);border-inline-start:1px solid var(--divider);
  transform:translateX(100%);transition:transform var(--d-slow) var(--e-standard);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-y:auto;
}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4);border-bottom:1px solid var(--divider)}
.drawer__body{padding:var(--sp-4);flex:1}
.drawer nav ul{list-style:none;margin:0;padding:0}
.drawer nav a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:52px;padding:var(--sp-3) var(--sp-2);
  text-decoration:none;color:var(--text-primary);font-weight:500;
  border-bottom:1px solid var(--divider);
}
.drawer nav a[aria-current="page"]{font-weight:700;box-shadow:inset 3px 0 0 var(--text-primary);padding-inline-start:var(--sp-4)}
.drawer__foot{padding:var(--sp-4);border-top:1px solid var(--divider);display:grid;gap:var(--sp-3)}

/* ---- Mobile bottom tab bar ----------------------------------------------- */
@media (max-width:1023px){:root{--bottombar-h:60px}}
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:var(--z-actionbar);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface-canvas);border-top:1px solid var(--divider);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:1024px){.tabbar{display:none}}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:60px;padding:var(--sp-2) var(--sp-1);
  font-size:.6875rem;font-weight:500;text-decoration:none;color:var(--text-secondary);
  border-top:2px solid transparent;
}
.tabbar a svg{width:22px;height:22px;fill:currentColor}
.tabbar a[aria-current="page"]{color:var(--text-primary);font-weight:700;border-top-color:var(--text-primary)}

/* ---- Sticky action bar (product / service pages) ------------------------- */
.action-bar{
  position:fixed;inset-inline:0;bottom:var(--bottombar-h);z-index:calc(var(--z-actionbar) - 1);
  background:var(--surface-canvas);border-top:1px solid var(--divider);
  box-shadow:var(--sh-lg);
  padding:var(--sp-3) var(--sp-4);padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:var(--sp-4);
}
.action-bar__price{flex:1;min-width:0}
.action-bar .btn{flex:none}
@media (min-width:1024px){.action-bar{display:none}}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  background:var(--surface-raised);
  border:1px solid var(--divider);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--d-fast) var(--e-standard),
             box-shadow var(--d-fast) var(--e-standard);
}
.card--interactive:hover{border-color:var(--border-control);box-shadow:var(--sh-sm)}
.card__media{position:relative;aspect-ratio:4/3;background:var(--surface-sunken);background-size:cover;background-position:center}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1;gap:var(--sp-2)}
.card__body>*{margin:0}
.card__title{font-family:var(--kc-font-body);font-size:1.0625rem;font-weight:600;line-height:1.35}
.card__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center;
  font-size:.875rem;color:var(--text-secondary)}
.card__foot{margin-top:auto;padding-top:var(--sp-4);display:flex;gap:var(--sp-2);align-items:center}
.card__foot .btn{flex:1}
.card--flat{border:0;background:var(--surface-sunken)}
.card--accent{background:var(--surface-accent-subtle);border-color:var(--border-accent)}

/* Photo blocks — decorative background, labelled where informative */
.photo{background-size:cover;background-position:center;background-repeat:no-repeat;
  border-radius:var(--r-lg);overflow:hidden}
.ratio-43{aspect-ratio:4/3}
.ratio-32{aspect-ratio:3/2}
.ratio-11{aspect-ratio:1/1}
.ratio-169{aspect-ratio:16/9}

/* ==========================================================================
   BADGES · CHIPS · RATING · PILLS
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:4px var(--sp-3);border-radius:var(--r-sm);
  font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  border:1px solid var(--border-control);color:var(--text-primary);background:transparent;
}
.badge svg{width:14px;height:14px;fill:currentColor}
.badge--accent{background:var(--surface-accent-subtle);border-color:var(--border-accent);color:var(--text-accent)}
.badge--solid{background:var(--surface-inverse);color:var(--text-on-inverse);border-color:transparent}
.badge--success{background:var(--status-success-wash);border-color:var(--status-success);color:var(--status-success)}
.badge--warning{background:var(--status-warning-wash);border-color:var(--status-warning);color:var(--status-warning)}
.badge--info{background:var(--status-info-wash);border-color:var(--status-info);color:var(--status-info)}

.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding-inline:var(--sp-4);
  border:1.5px solid var(--border-control);border-radius:var(--r-pill);
  background:transparent;color:var(--text-primary);
  font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background-color var(--d-fast) var(--e-standard),border-color var(--d-fast) var(--e-standard);
}
.chip:hover{background:var(--surface-sunken)}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{
  background:var(--selected-bg);border-color:var(--selected-border);font-weight:600;
}
.chip[aria-pressed="true"]::before,.chip[aria-selected="true"]::before{content:"✓";font-weight:700}
.chip-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip-row--scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-2);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}

.rating{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.875rem}
.rating__stars{display:inline-flex;gap:2px}
.rating__stars svg{width:15px;height:15px;fill:var(--rating-empty)}
.rating__stars svg.is-on{fill:var(--rating-filled)}
.rating__value{font-weight:600;font-variant-numeric:tabular-nums}
.rating__count{color:var(--text-secondary)}

/* Price rule — the four rules must read differently */
.pricerule{display:flex;flex-direction:column;gap:2px}
.pricerule__label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--text-secondary)}
.pricerule__value{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.pricerule__note{font-size:.8125rem;color:var(--text-secondary)}

/* ==========================================================================
   FORMS
   ========================================================================== */
.field{display:block;margin-bottom:var(--sp-5)}
.field__label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--sp-2);color:var(--text-primary)}
.field__req{color:var(--text-secondary);font-weight:400}
.field__hint{display:block;font-size:.8125rem;color:var(--text-secondary);margin-top:var(--sp-2)}
.field__error{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  font-size:.8125rem;font-weight:500;color:var(--status-error);margin-top:var(--sp-2);
}
.field__error svg{width:16px;height:16px;flex:none;margin-top:2px;fill:currentColor}
.field__error[hidden]{display:none}

.input,.select,.textarea{
  display:block;width:100%;min-height:48px;
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface-canvas);color:var(--text-primary);
  border:1.5px solid var(--border-control);   /* functional boundary — 12.63:1 */
  border-radius:var(--r-sm);
  font-size:1rem;line-height:1.5;
  transition:border-color var(--d-fast) var(--e-standard);
}
.textarea{min-height:110px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-disabled)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-primary)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--status-error);border-width:2px;
}
.select{
  appearance:none;padding-inline-end:var(--sp-10);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 21px,calc(100% - 15px) 21px;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;
}
.input-group{display:flex;gap:var(--sp-2)}
.input-group .input{flex:1}
.input-prefix{
  display:inline-flex;align-items:center;padding-inline:var(--sp-4);
  border:1.5px solid var(--border-control);border-inline-end:0;
  border-start-start-radius:var(--r-sm);border-end-start-radius:var(--r-sm);
  background:var(--surface-sunken);font-weight:500;
}
.input-prefix + .input{border-start-start-radius:0;border-end-start-radius:0}

/* Choice tiles — radio / checkbox rendered as selectable cards */
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice__box{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  min-height:56px;padding:var(--sp-4);
  border:1.5px solid var(--border-control);border-radius:var(--r-md);
  background:var(--surface-canvas);cursor:pointer;height:100%;
  transition:background-color var(--d-fast) var(--e-standard),border-color var(--d-fast) var(--e-standard);
}
.choice__box:hover{background:var(--surface-sunken)}
.choice input:checked + .choice__box{
  background:var(--selected-bg);border-color:var(--selected-border);border-width:2px;padding:calc(var(--sp-4) - .5px);
}
.choice input:focus-visible + .choice__box{
  outline:2px solid var(--focus-inner);outline-offset:2px;box-shadow:0 0 0 4px var(--focus-outer);
}
/* Selection is never signalled by colour alone — a mark + text appear */
.choice__mark{
  flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border-control);display:grid;place-items:center;margin-top:2px;
}
.choice--check .choice__mark{border-radius:var(--r-sm)}
.choice input:checked + .choice__box .choice__mark{
  border-color:var(--text-primary);background:var(--text-primary);color:var(--surface-canvas);
}
.choice input:checked + .choice__box .choice__mark::after{content:"✓";font-size:13px;font-weight:700;line-height:1}
.choice__text{flex:1;min-width:0}
.choice__title{display:block;font-weight:600;font-size:.9375rem;line-height:1.35}
.choice__desc{display:block;font-size:.8125rem;color:var(--text-secondary);margin-top:2px}
.choice__aside{margin-inline-start:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.choice__media{aspect-ratio:3/2;border-radius:var(--r-sm);background:var(--surface-sunken);
  margin-bottom:var(--sp-3);background-size:cover;background-position:center}
.choice--tile .choice__box{flex-direction:column;gap:var(--sp-2)}
.choice--tile .choice__mark{position:absolute;top:var(--sp-3);inset-inline-end:var(--sp-3);
  background:var(--surface-canvas);margin:0}

fieldset{border:0;padding:0;margin:0 0 var(--sp-6)}
legend{padding:0;font-family:var(--kc-font-display);font-weight:600;font-size:1.125rem;margin-bottom:var(--sp-4)}

/* Error summary at top of form */
.error-summary{
  border:2px solid var(--status-error);background:var(--status-error-wash);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6);
}
.error-summary[hidden]{display:none}
.error-summary h2{font-size:1.0625rem;margin-bottom:var(--sp-2);color:var(--status-error)}
.error-summary ul{margin:0;padding-inline-start:1.1em}
.error-summary a{color:var(--status-error);font-weight:600}

/* ==========================================================================
   BEFORE / AFTER TRANSFORMATION
   Pointer drag + keyboard + click + a side-by-side fallback (SC 2.5.7)
   ========================================================================== */
.ba{
  --pos:50%;
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-sunken);border:1px solid var(--divider);
  touch-action:pan-y;
}
.ba__frame{position:relative;aspect-ratio:3/2;isolation:isolate}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba__img--after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__tag{
  position:absolute;top:var(--sp-3);z-index:3;
  padding:5px var(--sp-3);border-radius:var(--r-sm);
  background:var(--kc-ink);color:#fff;
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  pointer-events:none;
}
.ba__tag--before{inset-inline-start:var(--sp-3)}
.ba__tag--after{inset-inline-end:var(--sp-3);background:var(--kc-gold-500);color:var(--kc-ink)}
.ba__line{
  position:absolute;top:0;bottom:0;inset-inline-start:var(--pos);
  width:3px;margin-inline-start:-1.5px;background:#fff;z-index:4;pointer-events:none;
  box-shadow:0 0 0 1px rgba(17,17,17,.35);
}
.ba__handle{
  position:absolute;top:50%;inset-inline-start:var(--pos);
  transform:translate(-50%,-50%);z-index:5;pointer-events:none;
  width:52px;height:52px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(17,17,17,.35);
  display:grid;place-items:center;color:var(--kc-ink);
}
.ba__handle svg{width:26px;height:26px;fill:currentColor}
/* the real control: a range input covering the frame */
.ba__range{
  position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;
  appearance:none;background:transparent;cursor:ew-resize;
}
.ba__range::-webkit-slider-thumb{appearance:none;width:54px;height:100%;background:transparent;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:54px;height:100%;background:transparent;border:0;cursor:ew-resize}
.ba__range::-moz-range-track{background:transparent}
.ba__range:focus-visible{outline:3px solid var(--focus-inner);outline-offset:-3px;
  box-shadow:inset 0 0 0 7px var(--focus-outer)}
.ba__bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--divider);background:var(--surface-raised)}
.ba__readout{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
/* Side-by-side fallback — no dragging required at all */
.ba[data-view="split"] .ba__frame{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:auto}
.ba[data-view="split"] .ba__pane{position:relative;aspect-ratio:3/2}
.ba[data-view="split"] .ba__img{position:absolute}
.ba[data-view="split"] .ba__img--after{clip-path:none}
.ba[data-view="split"] .ba__line,
.ba[data-view="split"] .ba__handle,
.ba[data-view="split"] .ba__range{display:none}
.ba[data-view="slider"] .ba__pane{position:absolute;inset:0}
.ba[data-view="slider"] .ba__pane--after{z-index:2}
@media (max-width:479px){
  .ba[data-view="split"] .ba__frame{grid-template-columns:1fr}
}

/* ==========================================================================
   STEPPER / PROGRESS / STATUS TRACKER
   ========================================================================== */
.steps{display:flex;gap:var(--sp-2);list-style:none;margin:0 0 var(--sp-8);padding:0;
  overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.steps li{flex:1;min-width:110px}
.steps__item{
  display:block;padding-top:var(--sp-3);border-top:3px solid var(--divider);
  font-size:.8125rem;color:var(--text-secondary);
}
.steps__item strong{display:block;font-size:.875rem;color:var(--text-primary);font-weight:600}
.steps li[data-state="done"] .steps__item{border-top-color:var(--text-primary)}
.steps li[data-state="current"] .steps__item{border-top-color:var(--border-accent);border-top-width:4px}
.steps li[data-state="current"] .steps__item strong::after{content:" — current";font-weight:400;color:var(--text-secondary);font-size:.8125rem}
.steps li[data-state="done"] .steps__item strong::after{content:" ✓";color:var(--status-success)}

.progress{display:block;margin-bottom:var(--sp-6)}
.progress__track{height:6px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden}
.progress__fill{height:100%;background:var(--border-accent);border-radius:inherit;
  transition:width var(--d-base) var(--e-standard)}
.progress__label{display:flex;justify-content:space-between;font-size:.8125rem;
  color:var(--text-secondary);margin-bottom:var(--sp-2);font-variant-numeric:tabular-nums}

.tracker{list-style:none;margin:0;padding:0}
.tracker li{position:relative;padding:0 0 var(--sp-6) var(--sp-8);border-inline-start:2px solid var(--divider);margin-inline-start:10px}
.tracker li:last-child{border-inline-start-color:transparent;padding-bottom:0}
.tracker__dot{
  position:absolute;inset-inline-start:-11px;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--surface-canvas);border:2px solid var(--divider);display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;color:var(--text-secondary);
}
.tracker li[data-state="done"]{border-inline-start-color:var(--status-success)}
.tracker li[data-state="done"] .tracker__dot{background:var(--status-success);border-color:var(--status-success);color:#fff}
.tracker li[data-state="current"] .tracker__dot{border-color:var(--border-accent);border-width:3px;color:var(--text-primary)}
.tracker__title{font-weight:600;display:block}
.tracker__meta{font-size:.8125rem;color:var(--text-secondary);display:block}

/* ==========================================================================
   TABLES · SPEC · INCLUSION LIST
   ========================================================================== */
.table-wrap{overflow-x:auto;border:1px solid var(--divider);border-radius:var(--r-lg)}
table.spec{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:520px}
table.spec caption{text-align:start;padding:var(--sp-4) var(--sp-5);font-weight:600;
  border-bottom:1px solid var(--divider);background:var(--surface-sunken)}
table.spec th,table.spec td{padding:var(--sp-3) var(--sp-5);text-align:start;
  border-bottom:1px solid var(--divider);vertical-align:top}
table.spec thead th{background:var(--surface-sunken);font-weight:600;font-size:.8125rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:0}
table.spec th[scope="row"]{font-weight:600;white-space:nowrap}
table.spec td.num,table.spec th.num{text-align:end;font-variant-numeric:tabular-nums}

/* Inclusions and exclusions at EQUAL visual weight */
.inex{display:grid;gap:var(--sp-6)}
@media (min-width:768px){.inex{grid-template-columns:1fr 1fr}}
.inex__col h3{font-size:1.0625rem;font-family:var(--kc-font-body);margin-bottom:var(--sp-3)}
.inex ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.inex li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.9375rem;line-height:1.5}
.inex li::before{flex:none;width:20px;font-weight:700;line-height:1.5}
.inex--in li::before{content:"✓";color:var(--status-success)}
.inex--ex li::before{content:"✗";color:var(--status-error)}

/* ==========================================================================
   ACCORDION · TABS · CALLOUT · TOAST
   ========================================================================== */
.accordion{border:1px solid var(--divider);border-radius:var(--r-lg);overflow:hidden}
.accordion details+details{border-top:1px solid var(--divider)}
.accordion summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:56px;padding:var(--sp-4) var(--sp-5);cursor:pointer;
  font-weight:600;list-style:none;background:var(--surface-raised);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:1.5rem;font-weight:400;line-height:1;flex:none}
.accordion details[open] summary::after{content:"–"}
.accordion summary:hover{background:var(--surface-sunken)}
.accordion__panel{padding:0 var(--sp-5) var(--sp-5)}
.accordion__panel>*:last-child{margin-bottom:0}

.tablist{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--divider);
  overflow-x:auto;scrollbar-width:none;margin-bottom:var(--sp-8)}
.tablist::-webkit-scrollbar{display:none}
.tab{
  min-height:48px;padding:var(--sp-3) var(--sp-5);border:0;background:transparent;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  font-size:.9375rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;
}
.tab:hover{color:var(--text-primary)}
.tab[aria-selected="true"]{color:var(--text-primary);font-weight:700;border-bottom-color:var(--text-primary)}

.callout{
  display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  border:1px solid var(--divider);background:var(--surface-sunken);
}
.callout svg{width:22px;height:22px;flex:none;margin-top:2px;fill:currentColor}
.callout>div>*:last-child{margin-bottom:0}
.callout--info{background:var(--status-info-wash);border-color:var(--status-info);color:var(--status-info)}
.callout--success{background:var(--status-success-wash);border-color:var(--status-success);color:var(--status-success)}
.callout--warning{background:var(--status-warning-wash);border-color:var(--status-warning);color:var(--status-warning)}
.callout--accent{background:var(--surface-accent-subtle);border-color:var(--border-accent)}
.callout strong{color:inherit}
.callout p{color:inherit}

.toast-region{
  position:fixed;z-index:var(--z-toast);
  inset-inline:var(--sp-4);bottom:calc(var(--bottombar-h) + var(--sp-4) + env(safe-area-inset-bottom,0px));
  display:grid;gap:var(--sp-2);pointer-events:none;
}
@media (min-width:768px){.toast-region{inset-inline:auto var(--sp-6);width:380px}}
.toast{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  background:var(--surface-inverse);color:var(--text-on-inverse);
  padding:var(--sp-4);border-radius:var(--r-md);box-shadow:var(--sh-lg);
  pointer-events:auto;animation:toast-in var(--d-base) var(--e-enter);
}
.toast svg{width:20px;height:20px;flex:none;fill:currentColor;margin-top:2px}
.toast p{margin:0;font-size:.9375rem}
.toast a{color:inherit;font-weight:600}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:var(--surface-inverse);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.82) 44%,rgba(17,17,17,.42) 100%)}
.hero__inner{position:relative;z-index:2;padding-block:var(--sp-16) var(--sp-16);max-width:720px}
@media (min-width:1024px){.hero__inner{padding-block:132px 132px}}
.hero h1{color:#fff;margin-bottom:var(--sp-5)}
.hero p{color:rgba(255,255,255,.86);font-size:1.0625rem;max-width:56ch}
@media (min-width:768px){.hero p{font-size:1.125rem}}
.hero .t-overline{color:var(--kc-gold-300)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero__proof{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-10);
  padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.2)}
.hero__proof div{min-width:110px}
.hero__proof b{display:block;font-family:var(--kc-font-display);font-size:1.5rem;font-weight:700;
  color:#fff;font-variant-numeric:tabular-nums}
.hero__proof span{font-size:.8125rem;color:rgba(255,255,255,.76)}

.page-head{padding-block:var(--sp-10) var(--sp-8);border-bottom:1px solid var(--divider)}
@media (min-width:1024px){.page-head{padding-block:var(--sp-16) var(--sp-12)}}
.breadcrumb{margin-bottom:var(--sp-4);font-size:.8125rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0;
  color:var(--text-secondary)}
.breadcrumb li+li::before{content:"/";margin-inline-end:var(--sp-2);color:var(--text-disabled)}
.breadcrumb a{color:var(--text-secondary)}

/* ==========================================================================
   PILLARS · TRUST BAR · STAT
   ========================================================================== */
.pillar{
  display:flex;flex-direction:column;gap:var(--sp-3);height:100%;
  padding:var(--sp-6);border:1px solid var(--divider);border-radius:var(--r-lg);
  background:var(--surface-raised);text-decoration:none;color:inherit;
  transition:border-color var(--d-fast) var(--e-standard),transform var(--d-fast) var(--e-standard);
}
.pillar:hover{border-color:var(--border-control);color:inherit;transform:translateY(-2px)}
.pillar__num{font-family:var(--kc-font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--text-accent)}
.pillar h3{margin:0;font-size:1.25rem}
.pillar p{margin:0;font-size:.9375rem;color:var(--text-secondary);flex:1}
.pillar__go{font-weight:600;font-size:.875rem;display:inline-flex;align-items:center;gap:var(--sp-2)}
.pillar__go::after{content:"→"}

.trustbar{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
@media (min-width:768px){.trustbar{grid-template-columns:repeat(4,1fr)}}
.trustbar b{display:block;font-family:var(--kc-font-display);font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.trustbar span{font-size:.8125rem;color:var(--text-secondary);display:block;margin-top:2px}

/* ==========================================================================
   CART · CHECKOUT · SUMMARY
   ========================================================================== */
.checkout-grid{display:grid;gap:var(--sp-8);align-items:start}
@media (min-width:1024px){.checkout-grid{grid-template-columns:1fr 380px;gap:var(--sp-12)}}
.summary{
  border:1px solid var(--divider);border-radius:var(--r-lg);
  background:var(--surface-raised);padding:var(--sp-6);
}
@media (min-width:1024px){.summary{position:sticky;top:calc(var(--header-h) + var(--sp-6))}}
.summary h2{font-size:1.125rem}
.summary__line{display:flex;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-2);font-size:.9375rem}
.summary__line dt{color:var(--text-secondary);margin:0}
.summary__line dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500;text-align:end}
.summary__total{border-top:1px solid var(--divider);margin-top:var(--sp-3);padding-top:var(--sp-4)}
.summary__total dt{font-weight:600;color:var(--text-primary);font-size:1rem}
.summary__total dd{font-size:1.375rem;font-weight:700}

.line-item{display:grid;grid-template-columns:88px 1fr;gap:var(--sp-4);
  padding-block:var(--sp-5);border-bottom:1px solid var(--divider);align-items:start}
@media (min-width:600px){.line-item{grid-template-columns:120px 1fr auto}}
.line-item__media{aspect-ratio:1;border-radius:var(--r-sm);background:var(--surface-sunken);
  background-size:cover;background-position:center}
.line-item__title{font-weight:600;margin:0 0 4px}
.line-item__meta{font-size:.8125rem;color:var(--text-secondary);margin:0}
.line-item__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-3)}
.line-item__price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:600px){.line-item__price{text-align:end}}

.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border-control);border-radius:var(--r-sm)}
.qty button{width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  font-size:1.125rem;line-height:1;color:var(--text-primary)}
.qty button:hover{background:var(--surface-sunken)}
.qty output{min-width:40px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

/* Slot picker — every state carries text, never colour alone */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--sp-2)}
.slot__box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:var(--sp-2);text-align:center;
  border:1.5px solid var(--border-control);border-radius:var(--r-sm);cursor:pointer;
  font-size:.875rem;font-weight:500;background:var(--surface-canvas);
}
.slot__box:hover{background:var(--surface-sunken)}
.slot__state{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.slot input:checked + .slot__box{background:var(--selected-bg);border-color:var(--selected-border);border-width:2px;font-weight:700}
.slot input:checked + .slot__box .slot__state{color:var(--text-accent)}
.slot input:disabled + .slot__box{background:var(--surface-sunken);color:var(--text-disabled);
  cursor:not-allowed;border-style:dashed;text-decoration:line-through}
.slot input:disabled + .slot__box .slot__state{text-decoration:none}
.slot input:focus-visible + .slot__box{outline:2px solid var(--focus-inner);outline-offset:2px;
  box-shadow:0 0 0 4px var(--focus-outer)}
.slot input{position:absolute;opacity:0;width:1px;height:1px}
.slot{position:relative;display:block}

/* Payment gateway selection */
.pay-group{display:grid;gap:var(--sp-3)}
.pay__box{
  display:flex;align-items:center;gap:var(--sp-4);min-height:64px;padding:var(--sp-4);
  border:1.5px solid var(--border-control);border-radius:var(--r-md);cursor:pointer;
  background:var(--surface-canvas);
}
.pay__box:hover{background:var(--surface-sunken)}
.pay input:checked + .pay__box{background:var(--selected-bg);border-color:var(--selected-border);border-width:2px;padding:calc(var(--sp-4) - .5px)}
.pay input:focus-visible + .pay__box{outline:2px solid var(--focus-inner);outline-offset:2px;box-shadow:0 0 0 4px var(--focus-outer)}
.pay input{position:absolute;opacity:0;width:1px;height:1px}
.pay{position:relative;display:block}
.pay__logo{flex:none;width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface-sunken);font-weight:700;font-size:.75rem;letter-spacing:.02em}
.pay__logo svg{width:24px;height:24px;fill:currentColor}
.pay__text{flex:1;min-width:0}
.pay__text b{display:block;font-size:.9375rem}
.pay__text span{display:block;font-size:.8125rem;color:var(--text-secondary)}
.pay__panel{padding:var(--sp-5);border:1.5px solid var(--selected-border);border-top:0;
  border-end-start-radius:var(--r-md);border-end-end-radius:var(--r-md);background:var(--selected-bg)}
.pay__panel[hidden]{display:none}
.upi-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--sp-2)}

/* Overlays: gateway + processing */
.processing__ring{width:56px;height:56px;margin:0 auto var(--sp-5);border-radius:50%;
  border:4px solid var(--surface-sunken);border-top-color:var(--border-accent);animation:spin 1s linear infinite}

/* ==========================================================================
   ESTIMATOR
   ========================================================================== */
.estimator{border:1px solid var(--divider);border-radius:var(--r-xl);background:var(--surface-raised);
  padding:var(--sp-6)}
@media (min-width:768px){.estimator{padding:var(--sp-10)}}
.est-step[hidden]{display:none}
.est-result__range{font-family:var(--kc-font-display);font-weight:700;
  font-size:clamp(1.75rem,1.2rem + 2.6vw,2.75rem);line-height:1.1;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.est-nav{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap}
.est-nav .btn{flex:1;min-width:140px}
.range-field{display:grid;gap:var(--sp-3)}
.range-field input[type="range"]{width:100%;height:44px;accent-color:var(--kc-gold-600)}
.range-row{display:flex;gap:var(--sp-3);align-items:center}
.range-row .input{max-width:120px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse);
  padding-block:var(--sp-16) var(--sp-10);margin-top:var(--sp-16)}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.9375rem}
.site-footer a:hover{color:#fff;text-decoration:underline}
[data-theme="dark"] .site-footer a{color:rgba(17,17,17,.78)}
[data-theme="dark"] .site-footer a:hover{color:#111}
.footer-grid{display:grid;gap:var(--sp-8)}
@media (min-width:600px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer-grid{grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-10)}}
.footer-grid h2{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:var(--sp-4);font-family:var(--kc-font-body);font-weight:600}
[data-theme="dark"] .footer-grid h2{color:rgba(17,17,17,.6)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.footer-legal{margin-top:var(--sp-12);padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:var(--sp-4);
  justify-content:space-between;font-size:.8125rem;color:rgba(255,255,255,.66)}
[data-theme="dark"] .footer-legal{border-top-color:rgba(17,17,17,.16);color:rgba(17,17,17,.66)}
.site-footer .logo{color:var(--text-on-inverse)}

/* ==========================================================================
   REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .btn:active{transform:none}
  .pillar:hover{transform:none}
}
@media print{
  .site-header,.tabbar,.action-bar,.drawer,.drawer-scrim,.toast-region,.skip-link{display:none!important}
  body{padding:0}
  .section{padding-block:var(--sp-8)}
}

/* ==========================================================================
   UTILITY BAR · LOGO VARIANTS · THEME TOGGLE
   ========================================================================== */
.utility-bar{
  display:none;background:var(--surface-inverse);color:var(--text-on-inverse);
  font-size:.8125rem;
}
@media (min-width:900px){.utility-bar{display:block}}
.utility-bar__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);min-height:40px;flex-wrap:wrap}
.utility-bar p{margin:0;color:rgba(255,255,255,.8)}
[data-theme="dark"] .utility-bar p{color:rgba(17,17,17,.78)}
.utility-bar strong{color:var(--kc-gold-300)}
[data-theme="dark"] .utility-bar strong{color:var(--kc-gold-800)}
.utility-bar__right{display:flex;align-items:center;gap:var(--sp-5)}
.utility-bar a,.utility-loc{display:inline-flex;align-items:center;gap:6px;
  color:var(--text-on-inverse);text-decoration:none;font-weight:500}
.utility-bar a:hover{text-decoration:underline;color:var(--text-on-inverse)}
.utility-bar svg{width:15px;height:15px;fill:currentColor}

/* Logo: full lockup only where the tagline stays legible (≥200px wide) */
.logo__full{display:none;width:224px}
.logo__mark{display:block;width:148px}
@media (min-width:768px){
  .logo--header .logo__full{display:block}
  .logo--header .logo__mark{display:none}
}
.logo--footer .logo__full{display:block;width:230px}
.logo--footer .logo__mark{display:none}
.drawer__head .logo__mark{width:128px}

.theme-ic{display:none;line-height:0}
.theme-ic--moon{display:inline-block}
[data-theme="dark"] .theme-ic--moon{display:none}
[data-theme="dark"] .theme-ic--sun{display:inline-block}

.header-call{display:inline-flex}
@media (min-width:900px){.header-call{display:none}}

/* Helper blocks used by page bodies */
.zone-list{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  list-style:none;margin:0;padding:0}
.zone-list li{padding:var(--sp-4);border:1px solid var(--divider);border-radius:var(--r-md);
  background:var(--surface-raised)}
.zone-list b{display:block;font-family:var(--kc-font-display)}
.zone-list span{font-size:.8125rem;color:var(--text-secondary)}

.pkg{display:grid;gap:var(--sp-4)}
@media (min-width:900px){.pkg{grid-template-columns:repeat(3,1fr);align-items:start}}
.pkg__card{border:1px solid var(--divider);border-radius:var(--r-lg);background:var(--surface-raised);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
.pkg__card--featured{border:2px solid var(--border-accent);position:relative}
@media (min-width:900px){.pkg__card--featured{transform:scale(1.02)}}
.pkg__flag{position:absolute;top:-13px;inset-inline-start:var(--sp-6);
  background:var(--surface-accent);color:var(--text-on-accent);
  padding:3px var(--sp-3);border-radius:var(--r-sm);font-size:.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.pkg__price{font-family:var(--kc-font-display);font-size:1.75rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.1}
.pkg__card dl{margin:0;display:grid;gap:var(--sp-3);font-size:.875rem}
.pkg__card dl>div{display:grid;gap:2px;padding-bottom:var(--sp-3);border-bottom:1px solid var(--divider)}
.pkg__card dl>div:last-child{border-bottom:0;padding-bottom:0}
.pkg__card dt{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--text-secondary)}
.pkg__card dd{margin:0;font-weight:500}

.promise{counter-reset:p;display:grid;gap:var(--sp-4);list-style:none;margin:0;padding:0}
@media (min-width:768px){.promise{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}}
.promise li{counter-increment:p;display:flex;gap:var(--sp-4);align-items:flex-start}
.promise li::before{
  content:counter(p,decimal-leading-zero);flex:none;
  font-family:var(--kc-font-mono);font-size:.75rem;font-weight:700;
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--surface-accent);color:var(--text-on-accent);
}
.promise p{margin:0;font-size:.9375rem}

.passport{
  background:var(--surface-inverse);color:var(--text-on-inverse);
  border-radius:var(--r-lg);padding:var(--sp-6);font-family:var(--kc-font-mono);
  font-size:.8125rem;line-height:1.75;overflow-x:auto;
}
.passport dt{color:var(--kc-gold-300);letter-spacing:.08em;font-size:.6875rem;
  text-transform:uppercase;font-weight:700}
[data-theme="dark"] .passport dt{color:var(--kc-gold-800)}
.passport dd{margin:0 0 var(--sp-3);white-space:nowrap}
.passport__id{font-size:1.125rem;font-weight:700;letter-spacing:.04em;
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);
  border-bottom:1px solid rgba(255,255,255,.18)}
[data-theme="dark"] .passport__id{border-bottom-color:rgba(17,17,17,.2)}

.quote{border-inline-start:3px solid var(--border-accent);padding-inline-start:var(--sp-5);
  margin:0;font-size:1.0625rem}
.quote footer{margin-top:var(--sp-3);font-size:.875rem;color:var(--text-secondary)}

.layout-figure{aspect-ratio:3/2;display:grid;place-items:center;background:var(--surface-sunken);
  border-radius:var(--r-sm);margin-bottom:var(--sp-3)}
.layout-figure svg{width:76%;height:auto;stroke:var(--text-primary);fill:none;stroke-width:5;
  stroke-linejoin:round}
.layout-figure svg .fill{fill:var(--surface-accent);stroke:none}

.kpi{display:grid;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--divider);
  border-radius:var(--r-lg);background:var(--surface-raised);height:100%}
.kpi b{font-family:var(--kc-font-display);font-size:1.75rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.kpi span{font-size:.875rem;color:var(--text-secondary)}

.sticky-note{position:sticky;top:calc(var(--header-h) + var(--sp-6))}

/* ==========================================================================
   STOCK PHOTOGRAPHY — every image block fills its frame
   ========================================================================== */
.hero__media img,.card__media img,.photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.photo{position:relative;background-color:var(--surface-sunken)}
.card__media{overflow:hidden}
.choice__media.layout-figure{margin-bottom:var(--sp-3);width:100%}

/* ==========================================================================
   CHECKOUT — review block, disabled method, UPI apps
   ========================================================================== */
.review{border:1px solid var(--divider);border-radius:var(--r-lg);background:var(--surface-raised)}
.review__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5)}
.review__row+.review__row{border-top:1px solid var(--divider)}
.review__value{margin:2px 0 0;font-weight:500}
.steps a.steps__item{text-decoration:none;color:inherit}
.steps a.steps__item:hover strong{text-decoration:underline}

.upi-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--sp-2)}
.upi-apps .chip{justify-content:center}

.pay input:disabled + .pay__box{background:var(--surface-sunken);border-style:dashed;cursor:not-allowed}
.pay input:disabled + .pay__box .pay__text b{color:var(--text-secondary)}

/* ==========================================================================
   OVERLAYS — simulated gateway + processing (role=dialog, focus trapped)
   ========================================================================== */
.overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--scrim);
  display:grid;place-items:center;padding:var(--sp-4);overflow-y:auto}
.overlay__card{background:var(--surface-canvas);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:440px;padding:var(--sp-8);animation:toast-in var(--d-base) var(--e-enter)}
@media (max-width:479px){.overlay__card{padding:var(--sp-6)}}
.gateway__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin:calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0 0}
.gateway__brand{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.8125rem;
  font-weight:600;letter-spacing:.02em;color:var(--text-secondary)}
.gateway__brand svg{width:16px;height:16px;fill:currentColor}
.gateway__actions{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */
.confirm-mark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--status-success);color:#fff}
[data-theme="dark"] .confirm-mark{color:#111}
.confirm-mark svg{width:34px;height:34px;fill:currentColor}
.confirm-head h1:focus{outline:none}
.confirm-head h1:focus-visible{outline:2px solid var(--focus-inner);outline-offset:4px}

.pro-card{display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-5);
  border:1px solid var(--divider);border-radius:var(--r-lg);background:var(--surface-raised)}
.pro-card__body{display:grid;gap:var(--sp-2)}
.avatar{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-inverse);color:var(--kc-gold-300);
  font-family:var(--kc-font-display);font-size:1.5rem;font-weight:700;letter-spacing:.02em}
[data-theme="dark"] .avatar{color:var(--kc-gold-800)}

/* Pages with a sticky booking bar: keep the footer and toasts clear of it (mobile) */
@media (max-width:1023px){
  body:has(.action-bar){padding-bottom:calc(var(--bottombar-h) + 84px + env(safe-area-inset-bottom,0px))}
  body:has(.action-bar) .toast-region{bottom:calc(var(--bottombar-h) + 96px + env(safe-area-inset-bottom,0px))}
}