/* ==========================================================================
   KASA — the one stylesheet.

   Idea: heat is the light source. The page is a dark room; anything that
   glows is hot. Light mode is the same room in daylight — glow off, weight
   and colour carry the hierarchy instead.

   Rules this file keeps (see remodel/REDO-V2.md §2, §7, §13):
   - Components only ever use the SEMANTIC tokens below. Light mode is a
     token swap, never a per-component override.
   - Ember is the only loud colour. Gold is a whisper: price, hairlines.
   - Glow only on display type 3rem and up. Never on body, labels, forms.
   - One easing family. 180ms state, 320ms reveal, 700ms ceiling.
   - Every contrast pair here was measured; numbers are in docs/REVIEW-NOTES.md.
   ========================================================================== */

/* ---------- fonts: two families, self-hosted, swap ---------- */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/anton-latin-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/anton-latin-ext-400.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/geist-normal-300-600.woff2) format("woff2")}

/* ---------- tokens ----------
   Dark is the default. .k-invert flips a block to the opposite theme —
   that is how the bright slabs inside the dark page are made, and how the
   one dark slab inside the light page is made. Same tokens, no overrides. */
:root,
[data-theme="light"] .k-invert{
  color-scheme:dark;
  --surface:#0A090C;          /* page */
  --surface-sunk:#060508;     /* wells, footer, newsletter slab */
  --surface-raised:#121115;   /* cards, inputs, nav surface */
  --surface-lifted:#1A191E;   /* hover of raised, menus, dialogs */
  --on-surface:#FBF7F0;       /* 18.6:1 on surface */
  --on-surface-dim:#A39E95;   /* 7.45:1 on surface, 6.56:1 on lifted */
  --on-surface-faint:#8C877F; /* 4.90:1 on lifted — the floor for any text */
  --action:#FF4D14;           /* ember: 5.98:1 on surface */
  --action-hot:#FF8A3D;
  --action-on:#0A090C;        /* text on ember: 5.98:1 (light text fails at 3.1) */
  --accent:#C8A45C;           /* gold: 8.44:1 on surface */
  --border:rgba(251,247,240,.08);
  --border-strong:#6E6A63;    /* inputs and UI edges: 3.69:1 */
  --border-hot:rgba(255,77,20,.28);
  --well:#FFFFFF;             /* product photo plinth — photos are shot on white */
  --scrim:rgba(10,9,12,.72);
  --glow:0 0 1px rgba(251,247,240,.40),0 0 14px rgba(251,247,240,.20),0 0 52px rgba(255,110,40,.13);
  --glow-ember:0 0 0 1px rgba(255,138,61,.55),0 10px 30px -10px rgba(255,77,20,.55);
  --shadow-lift:0 30px 60px -30px rgba(0,0,0,.8);
  --ok:#7FD18A;
  --err:#FF8A7A;              /* 8.1:1 on surface */
}
[data-theme="light"],
:root:not([data-theme="light"]) .k-invert{
  /* REDO-V2 §16: cool neutral, not cream. Ember, gold and faint are darker
     than §16 lists because §16's values measure 4.17 / 4.33 / 3.03 on this
     surface and §18 forbids any text under 4.5:1. */
  color-scheme:light;
  --surface:#F1F1F4;
  --surface-sunk:#E6E6EB;
  --surface-raised:#FFFFFF;   /* cards only — the one documented place pure white lives */
  --surface-lifted:#FFFFFF;
  --on-surface:#0D0D11;       /* 17.2:1 */
  --on-surface-dim:#52525C;   /* 6.21:1 on sunk */
  --on-surface-faint:#62626C; /* 4.85:1 on sunk */
  --action:#B8340A;           /* 5.27:1 on surface, 4.78:1 on sunk */
  --action-hot:#D63A08;
  --action-on:#F1F1F4;        /* 5.27:1 on action */
  --accent:#7D6224;           /* 5.11:1 on surface */
  --border:rgba(13,13,17,.10);
  --border-strong:#84848E;    /* 3.28:1 — UI edges need 3:1 */
  --border-hot:rgba(184,52,10,.35);
  --well:#FFFFFF;
  --scrim:rgba(241,241,244,.72);
  --glow:none;                /* glow on a light page is a smudge */
  --glow-ember:0 10px 26px -14px rgba(184,52,10,.55);
  --shadow-lift:0 30px 60px -34px rgba(13,13,17,.30);
  --ok:#2F7A3B;
  --err:#A3241A;
}
:root{
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --in:cubic-bezier(.22,1,.36,1);
  --out:cubic-bezier(.4,0,1,1);
  --t-state:180ms;
  --t-reveal:320ms;
  --gut:clamp(16px,4vw,56px);
  --hh:76px;
  --r:2px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 24px)}
body{margin:0;background:var(--surface);color:var(--on-surface);
  font:400 1.0625rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
body.k-locked{overflow:hidden}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:var(--r)}
::selection{background:var(--action);color:var(--action-on)}
[hidden]{display:none!important}
.k-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.k-skip{position:fixed;left:12px;top:-100px;z-index:1000;background:var(--action);color:var(--action-on);
  padding:12px 16px;font-weight:500;transition:top var(--t-state) var(--in)}
.k-skip:focus{top:12px}

/* ---------- type ---------- */
.k-display,.k-h1,.k-h2,.k-h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  hyphens:none;text-wrap:balance;color:var(--on-surface)}
.k-h1{font-size:clamp(4rem,14vw,13rem);line-height:.96;letter-spacing:-.035em}
.k-h2{font-size:clamp(2.6rem,8vw,6.5rem);line-height:.96;letter-spacing:-.03em}
.k-h3{font-size:clamp(1.4rem,3vw,2.2rem);line-height:.98;letter-spacing:-.02em}
.k-glow{text-shadow:var(--glow)}
.k-micro{display:block;font-size:.6875rem;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;
  font-weight:500;color:var(--on-surface-dim)}
.k-lede{font-size:clamp(1.15rem,1.6vw,1.375rem);line-height:1.5;color:var(--on-surface-dim);max-width:44ch;text-wrap:pretty}
.k-body{max-width:60ch;text-wrap:pretty}
.k-body p+p{margin-top:1em}
.k-dim{color:var(--on-surface-dim)}
.k-faint{color:var(--on-surface-faint)}
.k-price{font-size:1.5rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.k-num{font-variant-numeric:tabular-nums}
p,li{text-wrap:pretty}

/* ---------- layout ---------- */
.k-wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.k-narrow{max-width:880px}
.k-sec{padding-block:clamp(96px,14vw,200px)}
.k-sec--tight{padding-block:clamp(64px,9vw,120px)}
.k-sec + .k-sec{padding-top:0}
.k-head{display:grid;gap:clamp(16px,2vw,28px);margin-bottom:clamp(48px,7vw,104px)}
.k-rule{height:1px;background:var(--border);border:0;margin:0}
main{display:block;min-height:60svh}
body:not([data-header="over"]) main{padding-top:var(--hh)}

/* ---------- buttons ----------
   One primary (ember), one secondary (hairline). Hover "warms up": an
   ember bleed, never a scale or a bounce. */
.k-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:52px;padding:0 28px;border-radius:var(--r);font-size:.8125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;
  background:var(--action);color:var(--action-on);border:1px solid var(--action);
  transition:box-shadow var(--t-state) var(--in),background-color var(--t-state) var(--in),color var(--t-state) var(--in),border-color var(--t-state) var(--in)}
.k-btn:hover{box-shadow:var(--glow-ember)}
.k-btn--ghost{background:transparent;color:var(--on-surface);border-color:var(--border-strong)}
.k-btn--ghost:hover{border-color:var(--action);box-shadow:none;color:var(--on-surface)}
.k-btn--block{display:flex;width:100%}
.k-btn[disabled],.k-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
.k-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.k-link{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-size:.8125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-surface);
  background:linear-gradient(var(--action),var(--action)) left calc(50% + .9em)/0 1px no-repeat;
  transition:background-size var(--t-reveal) var(--in)}
.k-link:hover,.k-link:focus-visible{background-size:100% 1px}
.k-text-link{color:var(--on-surface);text-decoration:underline;text-decoration-color:var(--border-strong);
  text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color var(--t-state)}
.k-text-link:hover{text-decoration-color:var(--action)}

/* ============================== HEADER ============================== */
.k-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;pointer-events:none;
  background:var(--action);transform-origin:0 50%;transform:scaleX(0);opacity:.35}
.k-header{position:fixed;inset:0 0 auto 0;z-index:120;height:var(--hh);color:var(--on-surface);
  transition:height 240ms var(--in),background-color 240ms var(--in),backdrop-filter 240ms var(--in),border-color 240ms var(--in),transform 320ms var(--in);
  border-bottom:1px solid transparent}
.k-header.is-scrolled{height:58px;background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border-bottom-color:var(--border)}
body:not([data-header="over"]) .k-header{background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.k-header.is-hidden{transform:translateY(-100%)}
.k-header__in{height:100%;max-width:1600px;margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.k-brand{display:flex;align-items:center;gap:16px;min-width:0}
.k-logo{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:1.5rem;
  letter-spacing:.06em;line-height:1;color:var(--on-surface)}
.k-badge-live{display:none;align-items:center;gap:8px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-surface-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.k-badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
@media (min-width:1360px){.k-badge-live:not(:empty){display:inline-flex}}
.k-nav{display:none;align-items:center;gap:2.5rem}
.k-nav__a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-surface-dim);transition:color var(--t-state) var(--in),text-shadow var(--t-state) var(--in)}
.k-nav__a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--border-hot);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-state) var(--in)}
.k-nav__a:hover,.k-nav__a:focus-visible,.k-nav__a[aria-expanded="true"]{color:var(--on-surface);text-shadow:0 0 18px rgba(255,77,20,.35)}
[data-theme="light"] .k-nav__a:hover,[data-theme="light"] .k-nav__a[aria-expanded="true"]{text-shadow:none}
.k-nav__a:hover::after,.k-nav__a[aria-expanded="true"]::after{transform:scaleX(1)}
.k-nav__a[aria-current="page"]{color:var(--on-surface)}
.k-nav__a[aria-current="page"]::after{background:var(--action);transform:scaleX(1)}
.k-tools{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.k-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--on-surface);
  border-radius:var(--r);transition:color var(--t-state)}
.k-ic:hover{color:var(--action)}
.k-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.k-count{position:absolute;top:4px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--action);color:var(--action-on);font-size:.6875rem;font-weight:600;line-height:18px;text-align:center;
  font-variant-numeric:tabular-nums}
.k-count[data-n="0"]{display:none}
.k-count.is-bump{animation:kBump 320ms var(--in)}
@keyframes kBump{40%{transform:scale(1.35)}100%{transform:scale(1)}}
.k-acct,.k-cur-desk{display:none}
@media (min-width:1200px){
  .k-nav{display:flex}
  .k-menu-btn{display:none}
  .k-acct{display:inline-flex}
  .k-cur-desk{display:block}
}


/* currency picker */
.k-cur{position:relative}
.k-cur>button{min-height:44px;padding:0 10px;font-size:.6875rem;letter-spacing:.16em;font-weight:500;color:var(--on-surface-dim);
  display:inline-flex;align-items:center;gap:6px}
.k-cur>button:hover{color:var(--on-surface)}
.k-cur__list{position:absolute;top:calc(100% + 8px);right:0;min-width:120px;padding:6px;background:var(--surface-lifted);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lift);z-index:5}
.k-cur__list button{display:block;width:100%;text-align:left;min-height:44px;padding:0 12px;font-size:.875rem;
  color:var(--on-surface-dim);font-variant-numeric:tabular-nums}
.k-cur__list button:hover,.k-cur__list button[aria-selected="true"]{color:var(--on-surface);background:var(--surface-raised)}

/* ---------- mega menu ---------- */
.k-mega{position:fixed;left:0;right:0;top:var(--mega-top,76px);z-index:119;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border-block:1px solid var(--border);visibility:hidden;opacity:0;
  transition:opacity var(--t-state) var(--out),visibility 0s linear var(--t-state)}
.k-mega.is-open{visibility:visible;opacity:1;transition:opacity var(--t-reveal) var(--in),visibility 0s}
.k-mega__in{max-width:1440px;margin:0 auto;padding:44px var(--gut) 52px;display:grid;
  grid-template-columns:1.25fr .8fr 1fr;gap:56px;align-items:start}
.k-mega [data-st]{opacity:0;transform:translateY(14px)}
.k-mega.is-open [data-st]{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--in),transform var(--t-reveal) var(--in);
  transition-delay:calc(var(--i,0) * 28ms)}
.k-mega__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.k-mthumb{display:grid;gap:12px}
.k-mthumb__img{aspect-ratio:1;background:var(--well);overflow:hidden;border-radius:var(--r)}
.k-mthumb__img img{width:100%;height:100%;object-fit:cover}
.k-mthumb b{font-weight:500;font-size:.9375rem;line-height:1.3}
.k-mthumb .k-price{font-size:.9375rem}
.k-mthumb:hover b{color:var(--action)}
.k-mega__cats{display:grid;gap:2px}
.k-mega__cats a{display:flex;align-items:center;min-height:44px;font-size:1.0625rem;color:var(--on-surface-dim);transition:color var(--t-state)}
.k-mega__cats a:hover,.k-mega__cats a:focus-visible{color:var(--on-surface)}
.k-mega__ed{display:grid;gap:16px;padding-left:40px;border-left:1px solid var(--border)}
.k-mega__ed p{color:var(--on-surface-dim);font-size:.9375rem;max-width:34ch}
@media (max-width:1199px){.k-mega{display:none}}

/* ============================== DIALOGS ==============================
   One pattern for every overlay: native <dialog>, × top-right (48px),
   Escape closes, backdrop is the page at 72% with a 20px blur, focus is
   held by the browser while open and returned on close. Nothing opens
   on its own. */
dialog:not([open]){display:none!important}
.k-dlg{padding:0;border:0;max-width:none;max-height:none;background:var(--surface-lifted);color:var(--on-surface)}
.k-dlg::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.k-dlg[open]{animation:kDlgIn var(--t-reveal) var(--in)}
@keyframes kDlgIn{from{opacity:0}to{opacity:1}}
.k-x{position:absolute;top:12px;right:12px;z-index:3;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--on-surface);border-radius:var(--r)}
.k-x:hover{color:var(--action)}
.k-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}

/* side panels: mobile menu, cart */
.k-panel{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;width:min(460px,100vw);display:flex;flex-direction:column;
  border-left:1px solid var(--border)}
.k-panel[open]{animation:kPanelIn 420ms var(--in)}
@keyframes kPanelIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.k-panel__head{flex:none;display:flex;align-items:center;min-height:76px;padding:0 72px 0 var(--gut);border-bottom:1px solid var(--border)}
.k-panel__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gut)}
.k-panel__foot{flex:none;padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface-lifted)}

/* mobile menu — full screen, large, thumb-friendly */
.k-sheet{width:100vw;background:color-mix(in srgb,var(--surface) 94%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border-left:0}
.k-sheet::backdrop{background:transparent;backdrop-filter:none}
.k-sheet__links{display:grid;padding:24px 0}
.k-sheet__links a{display:flex;align-items:center;min-height:64px;font-family:var(--display);font-size:clamp(2.2rem,11vw,3.4rem);
  line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--on-surface-dim)}
.k-sheet__links a[aria-current="page"]{color:var(--on-surface)}
.k-sheet__links a[aria-current="page"]::after{content:"";width:10px;height:10px;margin-left:14px;border-radius:50%;background:var(--action)}
.k-sheet[open] .k-sheet__links a{animation:kRise 520ms var(--in) both;animation-delay:calc(80ms + var(--i) * 40ms)}
@keyframes kRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.k-sheet__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.k-sheet__meta a{min-height:44px;display:inline-flex;align-items:center;color:var(--on-surface-dim)}

/* search */
.k-search{position:fixed;inset:0 0 auto 0;margin:0;width:100%;padding:0;background:var(--surface-lifted);border-bottom:1px solid var(--border)}
.k-search__in{max-width:880px;margin:0 auto;padding:88px var(--gut) 48px}
.k-search input{width:100%;height:72px;background:transparent;border:0;border-bottom:1px solid var(--border-strong);border-radius:0;
  color:var(--on-surface);font:400 clamp(1.6rem,4vw,2.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.k-search input::placeholder{color:var(--on-surface-faint)}
.k-search input:focus-visible{outline:none;border-bottom-color:var(--action)}
.k-results{margin-top:12px}
.k-results a{display:grid;gap:2px;padding:16px 0;border-bottom:1px solid var(--border)}
.k-results a:hover b{color:var(--action)}
.k-results b{font-weight:500}
.k-results small{color:var(--on-surface-dim);font-size:.875rem}
.k-results p{padding:18px 0;color:var(--on-surface-dim)}

/* cart */
.k-cart .k-panel__head h2{font-family:var(--display);font-weight:400;font-size:1.75rem;text-transform:uppercase;letter-spacing:-.01em}
.k-line{display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);align-items:start}
.k-line__img{width:84px;height:84px;background:var(--well);border-radius:var(--r);overflow:hidden}
.k-line__img img{width:100%;height:100%;object-fit:cover}
.k-line b{display:block;font-weight:500;line-height:1.35}
.k-line .k-price{font-size:1rem;margin-top:6px}
.k-qty{display:inline-flex;align-items:center;margin-top:12px;border:1px solid var(--border-strong);border-radius:var(--r)}
.k-qty button{width:44px;height:44px;font-size:1.125rem;color:var(--on-surface)}
.k-qty button:hover{color:var(--action)}
.k-qty span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.k-rm{min-height:44px;font-size:.8125rem;color:var(--on-surface-dim);text-decoration:underline;text-underline-offset:3px}
.k-rm:hover{color:var(--on-surface)}
.k-sub{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.k-sub .k-price{font-size:1.5rem}
.k-eta{margin:6px 0 16px;font-size:.875rem;color:var(--on-surface-dim)}
.k-err{margin-top:12px;font-size:.875rem;color:var(--err)}
.k-err:empty{display:none}
.k-empty{position:relative;min-height:62dvh;display:grid;place-items:center;text-align:center;overflow:hidden}
.k-empty canvas{position:absolute;inset:0;width:100%;height:100%}
.k-empty__in{position:relative;display:grid;gap:20px;justify-items:center;padding:24px}
.k-empty__in .k-h3{font-size:2rem}

/* ============================== FOOTER ============================== */
.k-footer{background:var(--surface-sunk);border-top:1px solid var(--border);padding:clamp(72px,10vw,128px) 0 32px}
.k-footer__word{font-family:var(--display);font-size:clamp(4rem,19vw,17rem);line-height:.8;letter-spacing:-.03em;
  color:var(--on-surface);opacity:.06;margin-top:clamp(56px,8vw,96px);user-select:none;white-space:nowrap}
.k-footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.k-footer h2{font-size:.6875rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--on-surface-dim);margin-bottom:16px}
.k-footer li a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;color:var(--on-surface);opacity:.82;transition:opacity var(--t-state),color var(--t-state)}
.k-footer li a:hover{opacity:1;color:var(--action)}
.k-socials{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.k-social{flex:none}
.k-social{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--on-surface-dim)}
.k-social:hover{color:var(--action)}
.k-social svg{width:18px;height:18px}
.k-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin-top:56px;padding-top:24px;
  border-top:1px solid var(--border);font-size:.8125rem;color:var(--on-surface-dim)}
.k-footer__base a{text-decoration:underline;text-underline-offset:3px}
.k-theme{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-surface-dim)}
.k-theme:hover{color:var(--on-surface)}
.k-theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
@media (max-width:860px){.k-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================== FORMS ==============================
   Raised input, hairline that turns ember on focus, a real floating label,
   and errors only after the person has finished with a field. */
.k-field{position:relative;display:block}
.k-field input,.k-field textarea,.k-field select{width:100%;min-height:60px;padding:26px 16px 8px;background:var(--surface-raised);
  color:var(--on-surface);border:1px solid var(--border-strong);border-radius:var(--r);font:inherit;font-size:1rem;
  transition:border-color var(--t-state),box-shadow var(--t-state);appearance:none;-webkit-appearance:none}
.k-field textarea{min-height:140px;resize:vertical;line-height:1.5}
.k-field select{padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.k-field label{position:absolute;left:17px;top:19px;font-size:1rem;color:var(--on-surface-dim);pointer-events:none;transform-origin:0 0;
  transition:transform var(--t-state) var(--in),color var(--t-state)}
.k-field input:focus,.k-field textarea:focus,.k-field select:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 1px var(--action),0 0 0 4px color-mix(in srgb,var(--action) 28%,transparent)}
.k-field input:focus + label,.k-field input:not(:placeholder-shown) + label,
.k-field textarea:focus + label,.k-field textarea:not(:placeholder-shown) + label,
.k-field select + label,.k-field input:-webkit-autofill + label{transform:translateY(-11px) scale(.72);color:var(--on-surface-dim)}
.k-field input:user-invalid,.k-field textarea:user-invalid,.k-field select:user-invalid,.k-field.is-invalid input,.k-field.is-invalid select{border-color:var(--err)}
.k-field__err{display:block;min-height:0;margin-top:6px;font-size:.8125rem;color:var(--err)}
.k-field__err:empty{display:none}
.k-field__help{display:block;margin-top:6px;font-size:.8125rem;color:var(--on-surface-dim)}
.k-field .k-field__btn{position:absolute;right:6px;top:8px;min-height:44px;padding:0 12px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-dim)}
.k-field .k-field__btn:hover{color:var(--on-surface)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 100px var(--surface-raised) inset;-webkit-text-fill-color:var(--on-surface);caret-color:var(--on-surface);
  transition:background-color 9999s ease-out 0s}
.k-form{display:grid;gap:16px}
.k-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.k-form__row{grid-template-columns:minmax(0,1fr)}}
.k-msg{font-size:.9375rem;line-height:1.5}
.k-msg:empty{display:none}
.k-msg.is-ok{color:var(--on-surface)}
.k-msg.is-ok::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--ok);vertical-align:.1em}
.k-msg.is-err{color:var(--err)}
.k-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
/* the single-line inline form (email + button) */
.k-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.k-inline .k-field{flex:1 1 240px}
.k-inline .k-btn{height:60px;min-height:60px;flex:none}
.k-inline .k-field input{height:60px;min-height:60px}

/* ============================== CARDS ==============================
   Thermal rim-light: a soft ember radial follows the pointer, masked so
   only the card's EDGE warms — as if the cursor were heating the metal. */
.k-card{position:relative;display:grid;grid-template-rows:auto 1fr;gap:20px;isolation:isolate;min-width:0;height:100%}
.k-card__img{position:relative;aspect-ratio:4/5;background:var(--well);border-radius:var(--r);overflow:hidden}
.k-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 700ms var(--in)}
.k-card__img img + img{opacity:0}
@media (hover:hover){.k-card:hover .k-card__img img + img{opacity:1}}
.k-card__img.is-dark{background:var(--surface-sunk)}
.k-card__img canvas{position:absolute;inset:0;width:100%;height:100%}
.k-rim{position:absolute;inset:-1px;border-radius:calc(var(--r) + 1px);pointer-events:none;z-index:2;opacity:0;
  padding:1px;background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(255,110,40,.85),rgba(255,77,20,.0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--t-reveal) var(--in)}
.k-card:hover .k-rim{opacity:1}
[data-theme="light"] .k-rim{display:none}
.k-card__tag{position:absolute;top:14px;left:14px;z-index:1;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:#0D0D11;background:rgba(241,241,244,.94);padding:7px 10px;border-radius:var(--r)}
.k-card__body{display:flex;flex-direction:column;gap:8px}
.k-card__row{display:block}
.k-card h3{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1;letter-spacing:-.02em;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2em}
.k-card:hover h3{color:var(--on-surface)}
.k-card__sub{color:var(--on-surface-dim);font-size:.9375rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.k-card .k-price{font-size:1.25rem;white-space:nowrap;margin-top:auto;padding-top:6px}
.k-card__status{margin-top:auto;padding-top:6px;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-dim);font-weight:500}
.k-card a::after{content:"";position:absolute;inset:0;z-index:3}
.k-card a:focus-visible{outline:none}
.k-card:has(a:focus-visible) .k-card__img{outline:2px solid var(--action);outline-offset:3px}

/* ============================== HOME ============================== */
.k-hero{position:relative;min-height:100svh;display:grid;align-content:end;overflow:hidden;isolation:isolate;
  padding:calc(var(--hh) + 32px) 0 clamp(40px,6vw,72px)}
.k-hero__heat{position:absolute;left:0;top:0;width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,77,20,.16),rgba(255,77,20,.05) 45%,transparent 72%);
  transform:translate3d(var(--hx,50vw),var(--hy,60vh),0);will-change:transform;opacity:0;transition:opacity 900ms var(--in)}
.k-hero.is-warm .k-hero__heat{opacity:1}
[data-theme="light"] .k-hero__heat{display:none}
.k-word{position:relative;display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:min(42vw,64svh);line-height:.78;letter-spacing:-.045em;color:var(--on-surface);
  text-shadow:var(--glow);white-space:nowrap;user-select:none}
.k-word::after{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:rgba(255,110,40,.9);filter:blur(18px);opacity:.5;text-shadow:none}
[data-theme="light"] .k-word::after{display:none}
.k-hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:clamp(28px,4vw,48px);
  padding-top:24px;border-top:1px solid var(--border)}
.k-hero__line{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.015em;font-weight:500;max-width:20ch;color:var(--on-surface);text-wrap:balance}
.k-hero__line small{font-weight:400;letter-spacing:.01em;line-height:1.5;max-width:46ch}
.k-hero__line small{display:block;margin-top:12px;font-size:.875rem;color:var(--on-surface-dim);letter-spacing:.02em}
.k-hero__cta{display:flex;align-items:center;gap:24px}
@media (max-width:720px){.k-hero__foot{grid-template-columns:minmax(0,1fr)}.k-hero__cta{flex-wrap:wrap}}

/* the inverted slab — a bright block in a dark page */
.k-slab{background:var(--surface);color:var(--on-surface)}
.k-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:min(100svh,980px)}
.k-feature__img{position:relative;background:var(--well);overflow:hidden}
.k-feature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(24px,5vw,80px);mix-blend-mode:multiply}
.k-feature__txt{display:grid;align-content:center;gap:28px;padding:clamp(56px,8vw,128px) var(--gut)}
.k-feature__txt .k-h2{font-size:clamp(2.6rem,6vw,5.5rem)}
.k-feature__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.k-specline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border)}
.k-specline div{padding:18px 16px 0 0}
.k-specline dt{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-surface-dim);font-weight:500}
.k-specline dd{margin:6px 0 0;font-size:1.0625rem;font-variant-numeric:tabular-nums}
@media (max-width:480px){.k-specline{grid-template-columns:minmax(0,1fr)}.k-specline div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}.k-specline dd{margin:0;text-align:right}}
@media (max-width:900px){.k-feature{grid-template-columns:minmax(0,1fr);min-height:0}.k-feature__img{aspect-ratio:1}}

.k-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
@media (max-width:1000px){.k-range{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.k-range{grid-template-columns:minmax(0,1fr)}}

.k-statement{display:grid;gap:clamp(32px,4vw,56px)}
.k-statement .k-h2{font-size:clamp(3rem,10vw,9rem);line-height:.96;max-width:12ch}
.k-statement__list{display:grid;gap:4px;font-size:clamp(1.1rem,1.6vw,1.375rem);color:var(--on-surface-dim);max-width:52ch}
.k-statement__sign{font-size:.8125rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:500}

.k-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px);border-top:1px solid var(--border);padding-top:40px}
.k-facts h3{font-size:1.0625rem;font-weight:500;margin-bottom:10px}
.k-facts p{color:var(--on-surface-dim);max-width:36ch}
@media (max-width:860px){.k-facts{grid-template-columns:minmax(0,1fr)}}

/* newsletter — full-bleed sunk slab */
.k-news{background:var(--surface-sunk);border-block:1px solid var(--border)}
.k-join{background:var(--surface-raised);color:var(--on-surface);padding-block:clamp(56px,7vw,104px)}
.k-join .k-news__in{align-items:center}
.k-news__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:end}
.k-news .k-h2{font-size:clamp(3rem,9vw,8rem);line-height:.96}
.k-news .k-h2 span{display:block}

.k-news__terms{margin-top:20px;font-size:.8125rem;line-height:1.6;color:var(--on-surface-dim);max-width:52ch}
.k-news__terms a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.k-news__in{grid-template-columns:minmax(0,1fr)}}

.k-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:center}
.k-split__img{aspect-ratio:4/3;background:var(--surface-raised);overflow:hidden;border-radius:var(--r)}
.k-split__img img{width:100%;height:100%;object-fit:cover}
.k-split__img.is-contain img{object-fit:contain;padding:clamp(20px,4vw,48px)}
@media (max-width:860px){.k-split{grid-template-columns:minmax(0,1fr)}}

/* ============================== SHOP ============================== */
.k-pagehead{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(24px,3vw,40px)}
.k-pagehead .k-h1{font-size:clamp(3.2rem,9vw,7.5rem)}
.k-pagehead__row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px}
.k-pagehead .k-lede{font-size:.9375rem;max-width:52ch}
.k-pagehead .k-filters{margin-top:24px}
.k-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,56px)}
.k-filters button{min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:999px;font-size:.8125rem;letter-spacing:.06em;
  color:var(--on-surface-dim);transition:color var(--t-state),border-color var(--t-state),background-color var(--t-state)}
.k-filters button:hover{color:var(--on-surface);border-color:var(--border-strong)}
.k-filters button[aria-pressed="true"]{color:var(--on-surface);border-color:var(--action)}
@media (max-width:640px){
  .k-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut);scroll-padding-inline:var(--gut)}
  .k-filters::-webkit-scrollbar{display:none}
  .k-filters button{flex:none}
  .k-btn{white-space:normal;text-align:center;line-height:1.25;padding:12px 20px}
}
.k-count-line{margin-top:20px;font-size:.875rem;color:var(--on-surface-dim);font-variant-numeric:tabular-nums}
.k-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,6vw,96px) clamp(20px,2.4vw,40px);padding-bottom:clamp(96px,12vw,180px)}
.k-grid .k-card[hidden]{display:none}
@media (max-width:1000px){.k-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.k-grid{grid-template-columns:minmax(0,1fr)}}

/* ============================== PRODUCT ============================== */
.k-crumb{display:flex;gap:10px;padding-top:28px;font-size:.8125rem;color:var(--on-surface-dim)}
.k-crumb a{min-height:44px;display:inline-flex;align-items:center}
.k-crumb a:hover{color:var(--on-surface)}
.k-crumb span[aria-current]{min-height:44px;display:inline-flex;align-items:center;color:var(--on-surface)}
.k-pdp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start;padding-bottom:clamp(96px,12vw,180px)}
.k-gal{display:grid;gap:12px}
.k-gal__main{position:relative;aspect-ratio:1;background:var(--well);border-radius:var(--r);overflow:hidden}
.k-gal__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.k-gal__track::-webkit-scrollbar{display:none}
.k-gal__slide{flex:0 0 100%;scroll-snap-align:center;position:relative;cursor:zoom-in;border:0;padding:0;background:none}
.k-gal__slide img{width:100%;height:100%;object-fit:cover}
.k-gal__rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px}
.k-gal__rail button{aspect-ratio:1;background:var(--well);border-radius:var(--r);overflow:hidden;opacity:.55;outline-offset:2px;transition:opacity var(--t-state)}
.k-gal__rail button[aria-current="true"],.k-gal__rail button:hover{opacity:1}
.k-gal__rail button[aria-current="true"]{box-shadow:0 0 0 1px var(--on-surface)}
.k-gal__rail img{width:100%;height:100%;object-fit:cover}
.k-buy{position:sticky;top:calc(58px + 32px);display:grid;gap:24px}
.k-buy .k-h1{font-size:clamp(3rem,6vw,6.2rem);line-height:.96}
.k-buy__sub{font-size:1.125rem;color:var(--on-surface-dim)}
.k-buy__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.k-buy__price .k-price{font-size:2rem}
.k-save{font-size:.875rem;color:var(--on-surface)}
.k-buy__row{display:flex;gap:12px;align-items:stretch}
.k-buy__row .k-qty{margin:0;flex:none}
.k-buy__row .k-qty button{height:52px}
.k-buy__row .k-btn{flex:1}
.k-status{display:grid;gap:6px;padding:18px 0;border-block:1px solid var(--border);font-size:.9375rem}
.k-status b{display:flex;align-items:center;gap:10px;font-weight:500}
.k-status b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--action)}
.k-status p{color:var(--on-surface-dim)}
.k-status a{text-decoration:underline;text-underline-offset:3px}
.k-incl{display:grid;gap:10px}
.k-incl li{position:relative;padding-left:22px;color:var(--on-surface-dim)}
.k-incl li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent)}
.k-incl b{color:var(--on-surface);font-weight:500}
@media (max-width:1000px){.k-pdp{grid-template-columns:minmax(0,1fr)}.k-buy{position:static}}

.k-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,120px);padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--border)}
.k-block > .k-micro{padding-top:.4em}
.k-block h2.k-micro{font-size:.6875rem}
@media (max-width:860px){.k-block{grid-template-columns:minmax(0,1fr);gap:24px}}
.k-intro{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.45;max-width:36ch;color:var(--on-surface)}
.k-intro p+p{margin-top:1em;font-size:1.0625rem;line-height:1.62;color:var(--on-surface-dim);max-width:60ch}
.k-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.k-feat{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--border)}
.k-feat b{font-weight:500;font-size:1.0625rem}
.k-feat p{color:var(--on-surface-dim)}
@media (max-width:640px){.k-feats{grid-template-columns:minmax(0,1fr)}}
.k-specs{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.k-specs th,.k-specs td{text-align:left;vertical-align:top;padding:16px 0;border-bottom:1px solid var(--border);font-weight:400}
.k-specs th{width:40%;padding-right:24px;color:var(--on-surface-dim)}
.k-list li{padding:14px 0;border-bottom:1px solid var(--border)}
.k-care{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.k-care h3{font-weight:500;font-size:1.0625rem;margin-bottom:10px}
.k-care li{color:var(--on-surface-dim);padding:4px 0}
@media (max-width:640px){.k-care{grid-template-columns:minmax(0,1fr)}}
.k-faq details{border-bottom:1px solid var(--border)}
.k-faq summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;min-height:64px;padding:16px 56px 16px 0;font-size:1.0625rem;font-weight:500}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform var(--t-state) var(--in)}
.k-faq details[open] summary::after{transform:rotate(45deg)}
.k-faq summary:hover{color:var(--action)}
.k-faq details > div{padding:0 0 24px;color:var(--on-surface-dim);max-width:62ch}
.k-faq details > div p+p{margin-top:.8em}
.k-closing{text-align:center;padding-block:clamp(120px,16vw,240px);border-top:1px solid var(--border)}
.k-closing .k-h2{max-width:14ch;margin:0 auto}
.k-closing p{margin:28px auto 0;max-width:46ch;color:var(--on-surface-dim);white-space:pre-line}
.k-closing .k-statement__sign{margin-top:32px}
.k-disc{padding-bottom:64px;font-size:.8125rem;color:var(--on-surface-dim);max-width:72ch}
.k-xsell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
@media (max-width:860px){.k-xsell{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.k-xsell{grid-template-columns:minmax(0,1fr)}}
.k-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-top:1px solid var(--border);transform:translateY(110%);
  transition:transform var(--t-reveal) var(--in)}
.k-sticky.is-on{transform:none;visibility:visible;transition:transform var(--t-reveal) var(--in),visibility 0s}
.k-sticky:not(.is-on){visibility:hidden;transition:transform var(--t-reveal) var(--in),visibility 0s linear var(--t-reveal)}
.k-sticky .k-btn{flex:1;max-width:280px;min-height:48px}
@media (max-width:1000px){.k-sticky{display:flex}}
/* lightbox */
.k-lb{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;background:color-mix(in srgb,var(--surface) 96%,transparent);display:grid;place-items:center}
.k-lb img{max-width:min(92vw,1280px);max-height:84dvh;object-fit:contain}
.k-lb__nav{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface)}
.k-lb__nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
.k-lb__nav.prev{left:12px}.k-lb__nav.next{right:12px}
.k-lb__cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:.8125rem;color:var(--on-surface-dim);font-variant-numeric:tabular-nums}

/* ============================== EDITORIAL ============================== */
.k-ed-hero{padding-top:clamp(72px,12vw,180px);padding-bottom:clamp(72px,10vw,160px)}
.k-ed-hero .k-h1{font-size:clamp(3.4rem,10.5vw,10rem);line-height:.96;max-width:14ch}
.k-ed-hero .k-lede{margin-top:clamp(28px,3vw,44px)}
.k-ed-hero .k-micro{margin-bottom:clamp(20px,2.4vw,32px)}
.k-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(40px,4vw,72px) clamp(24px,3vw,56px)}
.k-cols > *{border-top:1px solid var(--border);padding-top:24px}
.k-cols h3{font-size:1.0625rem;font-weight:500;margin-bottom:10px}
.k-cols p{color:var(--on-surface-dim)}
@media (max-width:960px){.k-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.k-cols{grid-template-columns:minmax(0,1fr)}}
.k-values li{display:flex;align-items:baseline;gap:24px;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--border);
  font-size:clamp(1.1rem,1.6vw,1.375rem);color:var(--on-surface-dim)}
.k-values li b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;color:var(--on-surface);
  font-size:clamp(1.8rem,4vw,3.4rem);line-height:.98;min-width:6.6ch}
@media (max-width:600px){.k-values li{flex-direction:column;gap:8px}}
.k-quote{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5rem);line-height:.98;letter-spacing:-.02em;max-width:18ch}
.k-index{display:grid}
.k-index > article{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,96px);padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--border)}
.k-index__n{display:grid;gap:14px;align-content:start}
.k-index__n .k-num{font-family:var(--display);font-size:clamp(3rem,7vw,6rem);line-height:.8;color:var(--on-surface-faint)}
.k-index h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1;letter-spacing:-.02em;margin-bottom:20px}
.k-index p{color:var(--on-surface-dim);max-width:60ch}
.k-index p+p{margin-top:1em}
.k-index .k-tags{margin-top:24px}
.k-tags{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.8125rem;color:var(--on-surface-dim)}
.k-tags span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;border-radius:50%;background:var(--accent);vertical-align:.2em}
.k-pill{display:inline-flex;align-items:center;gap:8px;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--on-surface-dim)}
.k-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--on-surface-faint)}
.k-pill.is-live::before{background:var(--ok)}
.k-pill.is-hot::before{background:var(--action)}
@media (max-width:860px){.k-index > article{grid-template-columns:minmax(0,1fr);gap:16px}}

/* long-form: legal, support info */
.k-prose{max-width:68ch}
.k-prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:.98;letter-spacing:-.015em;margin:clamp(48px,6vw,80px) 0 18px}
.k-prose h3{font-size:1.125rem;font-weight:500;margin:32px 0 10px}
.k-prose p,.k-prose li{color:var(--on-surface-dim)}
.k-prose p+p,.k-prose p+ul,.k-prose ul+p{margin-top:1em}
.k-prose ul,.k-prose ol{margin-top:12px;display:grid;gap:8px}
.k-prose ul li{position:relative;padding-left:22px}
.k-prose ul li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent)}
.k-prose ol{list-style:decimal;padding-left:1.4em}
.k-prose a{color:var(--on-surface);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.22em}
.k-prose a:hover{text-decoration-color:var(--action)}
.k-prose strong,.k-prose b{color:var(--on-surface);font-weight:500}
.k-toc{position:sticky;top:96px;display:grid;gap:2px;align-content:start}
.k-toc a{display:flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--on-surface-dim)}
.k-toc a:hover{color:var(--on-surface)}
.k-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(40px,6vw,120px);padding-bottom:clamp(96px,12vw,180px)}
@media (max-width:900px){.k-doc{grid-template-columns:minmax(0,1fr)}.k-toc{position:static;display:flex;flex-wrap:wrap;gap:4px 18px}}

.k-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.k-contact > div{border-top:1px solid var(--border);padding-top:20px}
.k-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(1.1rem,1.6vw,1.375rem);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:.22em}
.k-contact a:hover{text-decoration-color:var(--action)}
@media (max-width:860px){.k-contact{grid-template-columns:minmax(0,1fr)}}
.k-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,56px)}
.k-jump a{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid var(--border);border-radius:999px;font-size:.8125rem;color:var(--on-surface-dim)}
.k-jump a:hover{color:var(--on-surface);border-color:var(--border-strong)}
.k-note{padding:20px 22px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r)}
.k-note b{font-weight:500}
.k-note p{color:var(--on-surface-dim)}
.k-note p+p{margin-top:.6em}

/* ============================== ACCOUNT ============================== */
.k-auth{min-height:calc(100svh - var(--hh));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.k-auth__side{position:relative;display:grid;align-content:end;padding:clamp(40px,6vw,96px) var(--gut);border-right:1px solid var(--border);overflow:hidden}
.k-auth__side .k-h1{font-size:clamp(3.4rem,8vw,8rem)}
.k-auth__main{display:grid;align-content:center;padding:clamp(40px,6vw,96px) var(--gut)}
.k-auth__box{width:100%;max-width:440px;display:grid;gap:24px}
.k-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--border)}
.k-tabs button{position:relative;min-height:52px;font-size:.8125rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--on-surface-dim)}
.k-tabs button[aria-selected="true"]{color:var(--on-surface)}
.k-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--action)}
.k-seg{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;background:var(--surface-raised);border:1px solid var(--border);border-radius:999px;justify-self:start}
.k-seg button{min-height:44px;padding:0 16px;border-radius:999px;font-size:.8125rem;color:var(--on-surface-dim)}
.k-seg button[aria-pressed="true"]{background:var(--surface-lifted);color:var(--on-surface);box-shadow:0 0 0 1px var(--border-strong)}
.k-gbtn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border:1px solid var(--border-strong);border-radius:var(--r);
  font-size:.9375rem;font-weight:500;transition:border-color var(--t-state)}
.k-gbtn:hover{border-color:var(--on-surface)}
.k-gbtn svg{width:18px;height:18px}
.k-or{display:flex;align-items:center;gap:16px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-surface-dim)}
.k-or::before,.k-or::after{content:"";flex:1;height:1px;background:var(--border)}
.k-textbtn{min-height:44px;justify-self:start;font-size:.875rem;color:var(--on-surface-dim);text-decoration:underline;text-underline-offset:3px}
.k-textbtn:hover{color:var(--on-surface)}
.k-orders{display:grid;gap:16px}
.k-order{display:grid;gap:14px;padding:24px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r)}
.k-order__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:.875rem;color:var(--on-surface-dim)}
.k-order__items{font-size:1.0625rem}
.k-order__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px}
/* phones: the form is the first thing on screen — the decorative half goes */
@media (max-width:900px){.k-auth{grid-template-columns:minmax(0,1fr);min-height:0}.k-auth__side{display:none}.k-auth__main{align-content:start;padding-top:40px}}

/* ============================== EMBER FIELD / ASCII ============================== */
.k-field-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.k-ember-host{position:relative;isolation:isolate;overflow:hidden}
.k-ember-host > canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.k-stage{position:relative;min-height:100svh;display:grid;align-content:end;overflow:hidden;background:var(--surface)}
.k-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.k-stage__copy{position:relative;z-index:1;padding:0 var(--gut) clamp(40px,8vh,96px);text-align:center;display:grid;gap:20px;justify-items:center;
  background:linear-gradient(0deg,var(--surface) 35%,transparent);pointer-events:none}
.k-stage__copy > *{pointer-events:auto}
.k-stage__copy .k-inline{width:min(520px,100%)}


/* ============================== REVEALS ==============================
   Opacity plus a rise of 16px. Hidden only once JS has said it will reveal,
   so nothing is ever invisible because a script failed. */
.k-js [data-reveal]{opacity:0;transform:translateY(16px);animation:kFailsafe 0s linear 3s forwards}
.k-js [data-words] .w{animation:kFailsafe 0s linear 3s forwards}
@keyframes kFailsafe{to{opacity:1;transform:none}}
.k-js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 600ms var(--in),transform 600ms var(--in);transition-delay:calc(var(--i,0) * 60ms)}
.k-js [data-words] .w{display:inline-block;opacity:0;transform:translateY(.18em)}
.k-js [data-words].is-in .w{opacity:1;transform:none;transition:opacity 600ms var(--in),transform 600ms var(--in);transition-delay:calc(var(--i) * 70ms)}

/* ============================== TOAST / MISC ============================== */
.k-toast{position:fixed;left:50%;bottom:24px;z-index:400;transform:translateX(-50%);max-width:calc(100vw - 32px);
  padding:14px 20px;background:var(--surface-lifted);color:var(--on-surface);border:1px solid var(--border);border-radius:var(--r);
  font-size:.9375rem;box-shadow:var(--shadow-lift)}
.k-done{display:grid;gap:20px;justify-items:center;text-align:center;max-width:30rem;padding:clamp(40px,6vw,64px) var(--gut)}
.k-done__mark{width:72px;height:72px}
.k-done__mark circle{fill:none;stroke:var(--accent);stroke-width:1.5}
.k-done__mark path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-handoff{display:grid;gap:16px;width:min(30rem,calc(100vw - 32px));padding:clamp(28px,5vw,40px)}
.k-handoff ul{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.k-handoff li{display:flex;justify-content:space-between;gap:16px;color:var(--on-surface-dim);font-variant-numeric:tabular-nums}
.k-handoff__tot{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border);font-weight:500}
.k-handoff__rail{height:2px;background:var(--border);overflow:hidden}
.k-handoff__rail i{display:block;height:100%;width:40%;background:var(--action);animation:kRail 1.2s var(--in) infinite}
@keyframes kRail{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .k-js [data-reveal],.k-js [data-words] .w{opacity:1;transform:none}
  .k-hero__heat,.k-rim{display:none}
}


/* ======================== ROUND 2: homepage sections ======================== */

/* hero product: the HeatMug stands in front of the wordmark and the glow comes
   off it. The wordmark is aligned to the viewport edge (4vw), not the grid;
   Anton's K carries a left side-bearing, pulled back optically below. */
.k-hero__stage{position:relative;padding-inline:4vw}
.k-hero__stage .k-word{margin-left:-.035em}
.k-hero__mug{position:absolute;z-index:2;right:max(4vw,calc(50% - 560px));bottom:clamp(16px,3svh,40px);height:min(70svh,92vw);width:auto;pointer-events:none;
  filter:drop-shadow(0 0 28px rgba(255,110,40,.30)) drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.k-hero__mugglow{position:absolute;z-index:1;right:max(4vw,calc(50% - 560px));bottom:4%;width:min(46vw,620px);aspect-ratio:1;transform:translateX(18%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,110,40,.30),rgba(255,77,20,.10) 48%,transparent 72%)}
[data-theme="light"] .k-hero__mug{filter:drop-shadow(0 30px 40px rgba(13,13,17,.25))}
[data-theme="light"] .k-hero__mugglow{background:radial-gradient(closest-side,rgba(184,52,10,.10),transparent 70%)}
.k-hero .k-wrap.k-hero__foot-wrap{position:relative;z-index:3}
/* phones: the mug stands ABOVE the wordmark, in the flow, so the full
   KASA stays readable; the glow sits behind the mug, over the letters.
   Applies up to 900px: at tablet width the desktop mug was screen-height
   and covered half the wordmark. */
@media (max-width:900px){
  .k-hero{align-content:end;padding-top:calc(var(--hh) + 12px)}
  .k-hero__mug{position:relative;right:auto;bottom:auto;top:auto;justify-self:center;height:min(38svh,88vw);margin-bottom:10px}
  .k-hero__mugglow{width:110vw;right:-5vw;bottom:auto;top:calc(var(--hh) - 4svh);transform:none}
}

/* trust band — only true things, each linked to its policy */
.k-trust{border-block:1px solid var(--border);background:var(--surface-sunk)}
.k-trust ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.k-trust li{padding:22px 24px 22px 0;display:grid;gap:4px}
.k-trust li + li{padding-left:24px;border-left:1px solid var(--border)}
.k-trust b{font-weight:500;font-size:.9375rem}
.k-trust a,.k-trust span{font-size:.8125rem;color:var(--on-surface-dim)}
.k-trust a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.k-trust a:hover{color:var(--on-surface);text-decoration-color:var(--action)}
@media (max-width:900px){.k-trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}.k-trust li:nth-child(3){padding-left:0;border-left:0}.k-trust li:nth-child(n+3){border-top:1px solid var(--border)}}
@media (max-width:480px){.k-trust ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.k-trust li,.k-trust li + li{padding:14px 0;border-left:0}.k-trust li:nth-child(n+3){border-top:1px solid var(--border)}.k-trust b{font-size:.875rem;line-height:1.35}.k-trust a{min-height:44px}}
@media (max-width:359px){.k-trust ul{grid-template-columns:minmax(0,1fr)}.k-trust li + li{border-top:1px solid var(--border)}}

/* heat, in real figures — static, never counted up */
.k-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,4vw,56px) clamp(20px,3vw,48px)}
.k-fig{display:grid;gap:10px;align-content:start;border-top:1px solid var(--border);padding-top:22px}
.k-fig b{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,4rem);white-space:nowrap;line-height:.88;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-surface)}
.k-fig span{color:var(--on-surface-dim);font-size:.9375rem;max-width:26ch}
.k-fig small{color:var(--on-surface-faint);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.k-figs__note{margin-top:28px;font-size:.8125rem;color:var(--on-surface-dim);max-width:72ch}
@media (max-width:900px){.k-figs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* materials: what it is actually made of, from the spec sheets */
.k-mats{display:grid;gap:0}
.k-mats div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.k-mats dt{color:var(--on-surface-dim);font-size:.9375rem}
.k-mats dd{margin:0}
.k-mats dd small{display:block;color:var(--on-surface-dim);font-size:.875rem;margin-top:4px}
@media (max-width:480px){.k-mats div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* pre-order, explained honestly */
.k-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.k-steps li{display:grid;gap:12px;align-content:start;border-top:1px solid var(--border);padding-top:24px}
.k-steps .k-num{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.4rem);line-height:.9;color:var(--accent)}
.k-steps h3{font-size:1.125rem;font-weight:500}
.k-steps p{color:var(--on-surface-dim)}
.k-steps a{color:var(--on-surface);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
@media (max-width:860px){.k-steps{grid-template-columns:minmax(0,1fr)}}

/* reviews — renders nothing until real reviews exist */
.k-reviews[hidden]{display:none!important}
.k-reviews__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.k-review{display:grid;gap:14px;align-content:start;padding:28px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r)}
.k-review blockquote{margin:0;font-size:1.0625rem;line-height:1.55}
.k-review footer{font-size:.8125rem;color:var(--on-surface-dim)}
@media (max-width:860px){.k-reviews__list{grid-template-columns:minmax(0,1fr)}}

/* NFC + Business pairing on the homepage */
.k-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.k-duo article{display:grid;grid-template-rows:auto 1fr;gap:24px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.k-duo__img{aspect-ratio:16/10;background:var(--well);position:relative}
.k-duo__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(16px,3vw,32px)}
.k-duo__txt{display:flex;flex-direction:column;gap:14px;padding:0 clamp(20px,3vw,36px) clamp(24px,3vw,36px)}
.k-duo__txt p{color:var(--on-surface-dim)}
.k-duo__txt .k-btn{align-self:flex-start;margin-top:auto}
@media (max-width:860px){.k-duo{grid-template-columns:minmax(0,1fr)}}

/* ======================== Business Connect page ======================== */
.k-industries{display:flex;flex-wrap:wrap;gap:10px}
.k-industries li{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--border-strong);border-radius:999px;font-size:.9375rem}
.k-industries li.is-first{border-color:var(--action);color:var(--on-surface)}
.k-range--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){.k-range--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.k-range--4{grid-template-columns:minmax(0,1fr)}}
.k-hero__foot--left{grid-template-columns:minmax(0,1fr);max-width:min(560px,52vw)}
.k-hero__foot--left .k-hero__cta{flex-wrap:wrap;gap:12px 28px}
@media (max-width:900px){.k-hero__foot--left{max-width:none}}
/* a lifestyle photograph in the feature slab fills it, rather than sitting on the plinth */
.k-feature__img.is-scene img{object-fit:cover;padding:0;mix-blend-mode:normal}
/* equal-height reserve only matters when cards sit side by side; in a single
   phone column it would just be a gap under one-line titles */
@media (max-width:640px){.k-card h3{min-height:0}.k-card__sub{min-height:0}}
@media (max-width:860px){.k-footer__grid > div:last-child{grid-column:1/-1}}
.k-footer li a[href^="mailto:"]{overflow-wrap:normal;word-break:keep-all}
@media (max-width:360px){.k-fig b{white-space:normal;overflow-wrap:anywhere}}
/* desktop: a section heading with an intro uses the width — heading left,
   intro right, aligned to the heading's baseline (as Novashion does) */
@media (min-width:1000px){
  .k-head:has(> .k-lede){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(48px,6vw,120px);align-items:end}
  .k-head:has(> .k-lede) > :not(.k-lede){grid-column:1}
  .k-head:has(> .k-lede) > .k-lede{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;padding-bottom:.4em}
}
/* the open question is marked, so a scanning eye knows where it is */
.k-faq details{border-left:2px solid transparent;transition:border-color var(--t-state),padding var(--t-state)}
.k-faq details[open]{border-left-color:var(--action);padding-left:18px}
/* no number to show (quote / not yet priced): words, not a price tag */
.k-price .k-nop{font-size:1rem;line-height:1.5;color:var(--on-surface-dim);font-variant-numeric:normal;letter-spacing:0}

/* ======================== header row + expanding search (§20.4) ======================== */
/* a row, not a grid: as the search field widens, the nav slides left smoothly */
.k-header__in{display:flex!important;align-items:center;gap:24px;position:relative}
.k-brand{flex:none}
.k-nav{margin-left:auto;flex:none;white-space:nowrap;gap:2.25rem}
.k-tools{flex:none;margin-left:auto}
@media (min-width:1200px){.k-tools{margin-left:clamp(20px,2.4vw,40px)}}
.k-find{position:relative;display:flex;align-items:center}
.k-find__field{display:flex;align-items:center;width:0;opacity:0;overflow:hidden;
  transition:width 240ms var(--in),opacity 240ms var(--in)}
.k-find.is-open .k-find__field{width:clamp(170px,15vw,240px);opacity:1}
.k-find__field input{flex:1;min-width:0;height:40px;padding:0 4px;background:transparent;border:0;border-bottom:1px solid var(--border-strong);
  border-radius:0;color:var(--on-surface);font:inherit;font-size:.9375rem}
.k-find__field input::placeholder{color:var(--on-surface-dim)}
.k-find__field input:focus{outline:none;border-bottom-color:var(--action)}
.k-find__field input::-webkit-search-cancel-button{display:none}
.k-find__x{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface-dim)}
.k-find__x:hover{color:var(--action)}
.k-find__x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.k-find__results{position:absolute;top:calc(100% + 12px);right:0;width:min(420px,calc(100vw - 32px));max-height:min(60vh,520px);overflow-y:auto;
  padding:8px 20px;background:var(--surface-lifted);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lift);z-index:5}
.k-find__results a{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--border);min-height:44px}
.k-find__results a:last-child{border-bottom:0}
.k-find__results a:hover b{color:var(--action)}
.k-find__results b{font-weight:500}
.k-find__results small{color:var(--on-surface-dim);font-size:.875rem}
.k-find__results p{padding:14px 0;color:var(--on-surface-dim)}
/* touch / narrow: the field opens over the header row instead of pushing,
   so nothing moves and nothing wraps */
@media (max-width:1199px){
  .k-find{position:static}
  .k-find.is-open .k-find__field{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-50%);width:auto;height:52px;
    padding:0 0 0 14px;background:var(--surface-lifted);border:1px solid var(--border);border-radius:var(--r);z-index:3}
  .k-find__results{left:var(--gut);right:var(--gut);width:auto;top:calc(100% + 4px)}
}
/* Coming soon: the ASCII art owns the top of the screen and the words sit
   below it, so on short phones the label never lands on the glyphs */
.k-stage--art{min-height:max(100svh,calc(58svh + 380px))}
.k-stage--art canvas{bottom:auto;height:58svh}

/* ======================== §20.6 glow, so the black isn't flat ========================
   Dark only, never on text. Each was checked by removing it again: without
   them the product photos looked pasted onto the page and section changes
   disappeared into one flat black. */
:root:not([data-theme="light"]){
  --halo-btn:0 0 22px -6px rgba(255,77,20,.45);
  --bloom:0 40px 90px -40px rgba(255,110,40,.30),0 0 0 1px rgba(251,247,240,.03);
  --edge:linear-gradient(90deg,rgba(255,138,61,.28),rgba(255,77,20,.08) 35%,transparent 70%);
  --focus-glow:0 0 0 4px rgba(255,77,20,.20),0 0 18px rgba(255,77,20,.35);
}
/* ember buttons: a faint halo at rest, warming on hover */
.k-btn:not(.k-btn--ghost){box-shadow:var(--halo-btn,none)}
.k-btn:not(.k-btn--ghost):hover{box-shadow:var(--glow-ember)}
/* product photographs look lit, not pasted on */
.k-card__img,.k-gal__main,.k-feature__img,.k-duo__img,.k-split__img{box-shadow:var(--bloom,none)}
.k-hero__mug{filter:drop-shadow(0 0 28px rgba(255,110,40,.30)) drop-shadow(0 30px 60px rgba(0,0,0,.6))}
/* section edges catch a warm light from the left */
main > section:not(.k-hero):not(.k-slab):not(.k-join){position:relative}
main > section:not(.k-hero):not(.k-slab):not(.k-join)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--edge,none);pointer-events:none}
/* focus rings glow rather than just outline */
:focus-visible{box-shadow:var(--focus-glow,none)}
@media (prefers-reduced-motion:reduce){.k-btn:not(.k-btn--ghost):hover{box-shadow:var(--halo-btn,none)}}

/* ======================== §20.7 trust marquee ======================== */
.k-marquee{position:relative;display:flex;align-items:center;border-block:1px solid var(--border);background:var(--surface-sunk)}
.k-marquee__view{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.k-marquee__track{display:flex;width:max-content;animation:kMarquee 70s linear infinite}
.k-marquee ul{display:flex;flex:none}
.k-marquee li{display:flex;align-items:center;white-space:nowrap;min-height:56px;padding:0 28px;font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-surface)}
.k-marquee li::after{content:"";width:5px;height:5px;margin-left:56px;border-radius:50%;background:var(--action)}
.k-marquee:hover .k-marquee__track,.k-marquee.is-paused .k-marquee__track{animation-play-state:paused}
.k-marquee__btn{flex:none;width:48px;height:48px;margin-right:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--on-surface-dim)}
.k-marquee__btn:hover{color:var(--on-surface)}
.k-marquee__btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
@keyframes kMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* no motion: a still, wrapped row that is fully readable */
@media (prefers-reduced-motion:reduce){
  .k-marquee__view{-webkit-mask:none;mask:none}
  .k-marquee__track{animation:none;width:auto}
  .k-marquee ul{flex-wrap:wrap;justify-content:center;padding:8px 0}
  .k-marquee ul[aria-hidden]{display:none}
  .k-marquee li{min-height:40px;padding:0 14px}.k-marquee li::after{margin-left:28px}
  .k-marquee__btn{display:none}
}

/* ======================== §20.3 joined email field + button ======================== */
.k-joined{display:flex;align-items:stretch;margin-top:24px;background:transparent;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;
  transition:border-color var(--t-state),box-shadow var(--t-state)}
.k-joined:focus-within{border-color:var(--action);box-shadow:0 0 0 1px var(--action),0 0 0 4px color-mix(in srgb,var(--action) 25%,transparent)}
.k-joined .k-field{flex:1;min-width:0}
.k-joined .k-field input{border:0;background:transparent;height:64px;min-height:64px;padding:26px 24px 8px;font-size:1rem;box-shadow:none!important}
.k-joined .k-field label{left:25px}
.k-joined .k-btn{flex:none;height:auto;min-height:64px;margin:0;border-radius:0;box-shadow:none;padding:0 clamp(24px,3vw,40px)}
.k-joined + .k-msg:empty{display:none}
.k-join .k-news__terms{margin-top:14px}
@media (max-width:360px){.k-joined{flex-direction:column}}

/* ======================== §20.1 what it means, then the number ======================== */
.k-means{display:grid;gap:0;border-top:1px solid var(--border)}
.k-means li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--border)}
.k-means b{font-weight:500;font-size:1rem;color:var(--on-surface)}
.k-means span{font-size:.8125rem;color:var(--on-surface-dim);font-variant-numeric:tabular-nums}
.k-card__mean{font-size:.875rem;color:var(--on-surface);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
@media (max-width:640px){.k-card__mean{min-height:0}}

/* §20.2 HOMEPAGE CHAPTERS — one per product, all the same size. Photo and
   words side by side, swapping sides each time; stacked on phones. */
.k-chap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:min(88svh,860px);background:var(--surface);color:var(--on-surface)}
.k-chap--sunk{background:var(--surface-sunk);border-block:1px solid var(--border)}
.k-chap.is-flip .k-chap__img{order:2}
.k-chap__img{position:relative;background:var(--well);overflow:hidden;box-shadow:var(--bloom,none)}
.k-chap__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(24px,5vw,72px)}
.k-chap__img.is-scene img{object-fit:cover;padding:0}
.k-chap__txt{display:grid;align-content:center;gap:24px;padding:clamp(48px,7vw,112px) var(--gut);max-width:640px}
.k-chap__txt .k-h2{font-size:clamp(2.4rem,5.4vw,5rem)}
.k-chap__line{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--on-surface-dim);max-width:34ch}
.k-chap__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.k-chap__meta .k-price{font-size:1.75rem}
.k-chap__meta .k-dim{font-size:.875rem}
.k-chap__also{font-size:.9375rem;color:var(--on-surface-dim);border-top:1px solid var(--border);padding-top:20px}
.k-chap__also .k-micro{display:block;margin-bottom:6px}
@media (max-width:900px){.k-chap{grid-template-columns:minmax(0,1fr);min-height:0}.k-chap.is-flip .k-chap__img{order:0}.k-chap__img{aspect-ratio:4/3}}

/* §20.5 THE HERO MOMENT — embers in three depths behind everything, the mug
   turning toward the pointer, the layers parting on scroll. Driven by three
   numbers kasa-boot.js writes: --px/--py (pointer, -.5 to .5) and --s
   (how far the hero has scrolled away, 0 to 1). transform only. */
.k-hero{perspective:1400px}
.k-hero__field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.k-hero__mug{transform:translate3d(calc(var(--px,0) * -26px),calc(var(--py,0) * -16px + var(--s,0) * -14svh),0) rotateY(calc(var(--px,0) * 16deg)) rotateX(calc(var(--py,0) * -9deg));will-change:transform}
.k-hero__stage{transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 6px + var(--s,0) * 9svh),0)}
.k-hero__ctl{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:1200px){.k-hero__foot--left{max-width:min(940px,70vw)}.k-hero__foot--left .k-hero__line{max-width:20ch}}
.k-hero__ctl > *{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;
  font:500 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--on-surface-dim);background:transparent;cursor:pointer;
  transition:color var(--t-state),border-color var(--t-state)}
.k-hero__ctl > *:hover{color:var(--on-surface);border-color:var(--on-surface-dim)}
.k-hero__skip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.k-hero__pause[aria-pressed="true"]{color:var(--on-surface)}
.k-chaps:focus{outline:none}

/* The wordmark is sized by the height left once the hero line and the Shop
   button are placed, so "Shop the range" is always on the first screen. */
.k-hero{--wordsz:min(42vw,64svh)}
.k-hero .k-word{font-size:var(--wordsz)}
@media (min-width:901px){.k-hero{--wordsz:max(220px,min(42vw,64svh,calc((100svh - 500px) * 1.28)))}}
@media (max-width:900px){.k-hero__mug{height:min(30svh,80vw)}}

/* §20.10 THE WORDMARK SWITCH — the glowing KASA is a real button that
   changes the light. One quiet line under it; nothing louder than the
   Shop button. */
.k-wordbtn{display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.k-wordbtn .k-word::after{transition:opacity 400ms var(--in)}
@media (hover:hover){.k-wordbtn:hover .k-word::after{opacity:.8}}
.k-wordbtn:focus-visible{outline:2px solid var(--action);outline-offset:8px}
.k-wordhint{margin-top:calc(var(--wordsz) * .07 + 6px);font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--on-surface-faint);font-weight:500}

/* the theme cross-fade (Kasa.setTheme): a snapshot fade where supported,
   colour transitions otherwise */
::view-transition-old(root),::view-transition-new(root){animation-duration:320ms;animation-timing-function:ease}
html.k-theming,html.k-theming *,html.k-theming *::before,html.k-theming *::after{transition:background-color 320ms ease,color 320ms ease,border-color 320ms ease,fill 320ms ease,stroke 320ms ease!important}

@media (prefers-reduced-motion:reduce){
  .k-hero__mug,.k-hero__stage{transform:none;will-change:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* §21.1 pricing / honest blocks on the NFC product pages: two plain
   columns divided by a hairline. No cards, no fills. */
.k-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border)}
.k-plan{display:grid;align-content:start;gap:16px;padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px) clamp(24px,3vw,40px) 0}
.k-plan + .k-plan{border-left:1px solid var(--border);padding-left:clamp(20px,3vw,40px)}
.k-plan p{color:var(--on-surface-dim);max-width:46ch}
.k-plan .k-plan__price{font-size:1.25rem;font-weight:500;color:var(--on-surface)}
.k-plan .k-btn{justify-self:start}
.k-plan__note{margin-top:24px;font-weight:500}
@media (max-width:720px){.k-plans{grid-template-columns:minmax(0,1fr)}.k-plan{padding-right:0}.k-plan + .k-plan{border-left:0;border-top:1px solid var(--border);padding-left:0}}

/* ======================= §23 NIKE, MEASURED =========================
   Novashion's drama for brand moments; Nike's quiet for everything that
   sells. Three radii only: 0 for cards and images, a pill for buttons,
   8px for inputs. No glow, bloom or shadow on a buying surface. */
:root{--r:0}
.k-btn,.k-qty{border-radius:999px}
.k-field input,.k-field textarea,.k-field select{border-radius:8px}
body[data-page="shop"],body[data-page="product"],body[data-page="account"],.k-dlg{--halo-btn:none;--glow-ember:none;--bloom:none}
.k-card__img,.k-gal__main{box-shadow:none}

/* shop grid card: a square photo, four lines at one size */
.k-grid{gap:clamp(40px,4vw,56px) clamp(12px,1.4vw,20px)}
.k-card{gap:14px}
.k-card__img{aspect-ratio:1}
.k-card__body{gap:0}
.k-card__label{min-height:1.5em;font-size:1rem;line-height:1.5;font-weight:500;color:var(--action)}
.k-card h3{font-family:var(--sans);font-size:1rem;line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none;color:var(--on-surface)}
.k-card__sub{font-size:1rem;line-height:1.5;-webkit-line-clamp:1;min-height:0}
.k-card .k-price{font-size:1rem;line-height:1.5;font-weight:500;padding-top:0;margin-top:0}
.k-card__status{font-size:1rem;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400;padding-top:0;margin-top:0}
.k-card .k-price .k-nop{font-size:1rem}

/* shop heading: a label over the products, not a poster */
body[data-page="shop"] .k-pagehead .k-h1{font-family:var(--sans);font-size:1.5rem;line-height:1.3;font-weight:500;letter-spacing:0;text-transform:none;text-shadow:none}

/* product page: the image is the headline, the words are a caption */
.k-buy{gap:20px}
.k-buy .k-h1{font-family:var(--sans);font-size:1.5rem;line-height:1.3;font-weight:500;letter-spacing:0;text-transform:none;text-shadow:none}
.k-buy__sub{font-size:1rem}
.k-buy__price .k-price{font-size:1rem;line-height:1.5;font-weight:500}
.k-buy .k-btn,.k-sticky .k-btn{min-height:60px;font-size:1rem;letter-spacing:0;text-transform:none;font-weight:500}
.k-buy__row .k-qty button{height:58px}
@media (min-width:1001px){
  .k-pdp{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .k-gal{grid-template-columns:72px minmax(0,1fr);align-items:start}
  .k-gal__main{grid-column:2;grid-row:1}
  .k-gal__rail{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr)}
}

/* product shots on white that are taller than square (the NFC tags) sit whole in the frame, never cropped through */
.k-card__img.is-contain img,.k-gal__slide.is-contain img,.k-gal__rail .is-contain img{object-fit:contain;padding:6%}

/* §21.4 SIGNATURE MOMENTS — one per product page. Line drawings to scale,
   the mug's display, the NFC tap. transform/opacity only; they play once
   when on screen (.is-on) and show their end state under reduced motion. */
.k-sig__fig{margin:0;display:grid;gap:16px;max-width:520px}
.k-sig__fig figcaption,.k-sig__note{color:var(--on-surface-dim);max-width:52ch}
.k-sig__svg{width:100%;height:auto;overflow:visible}
.k-sig__svg text{font:500 9px var(--sans);letter-spacing:.06em;fill:var(--on-surface-dim)}
.k-sig__ghost{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-dasharray:4 4}
.k-sig__solid{fill:color-mix(in srgb,var(--on-surface) 9%,transparent);stroke:var(--action);stroke-width:1.5}
.k-sig__svg .k-sig__on{fill:var(--on-surface)}
.k-sig__in{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(1.18);transition:opacity 600ms var(--in),transform 900ms var(--out)}
.k-sig.is-on .k-sig__in{opacity:1;transform:none}
.k-sig__mug{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.k-sig__mug p{color:var(--on-surface-dim);max-width:44ch;margin-bottom:20px}
.k-sig__read{display:flex;align-items:flex-start;gap:4px;padding:28px 32px;background:#0A090C;color:#F4F1EA;font-family:var(--display);font-variant-numeric:tabular-nums;line-height:.8;min-width:7.5ch}
.k-sig__read b{font-weight:400;font-size:clamp(4rem,9vw,6.5rem);letter-spacing:.02em}
.k-sig__read span{font-size:1.5rem;padding-top:.3em}
.k-sig__body{display:grid;gap:20px;justify-items:start}
.k-sig__tap{position:relative;width:min(100%,420px);aspect-ratio:1}
.k-sig__card{position:absolute;left:4%;bottom:6%;width:34%;aspect-ratio:3/4;background:var(--well)}
.k-sig__card img{width:100%;height:100%;object-fit:contain;padding:6%}
.k-sig__phone{position:absolute;right:6%;top:0;width:36%;aspect-ratio:9/17;border:1.5px solid var(--on-surface-dim);border-radius:18px;padding:10px;
  transform:translate(18%,-4%);transition:transform 800ms var(--out)}
.k-sig__screen{height:100%;border-radius:10px;background:var(--surface-raised);display:grid;align-content:start;gap:7px;padding:14px 10px}
.k-sig__screen span{font-size:.75rem;color:var(--on-surface);padding:7px 8px;border:1px solid var(--border);opacity:0;transform:translateY(4px);
  transition:opacity 400ms var(--in),transform 400ms var(--out);transition-delay:calc(900ms + var(--i) * 120ms)}
.k-sig.is-on .k-sig__phone{transform:translate(-34%,12%)}
.k-sig.is-on .k-sig__screen span{opacity:1;transform:none}
.k-ask__q{font-size:1.25rem;font-weight:500;color:var(--on-surface);margin-bottom:12px}
.k-ask p:not(.k-ask__q){color:var(--on-surface-dim);max-width:60ch}
@media (max-width:560px){.k-sig__mug{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.k-sig__in,.k-sig__phone,.k-sig__screen span{transition:none}}

/* §21.3 empty cart: three products to start from */
.k-empty{min-height:0;padding-block:32px}
.k-empty__in{gap:24px;width:100%}
.k-empty__h{font-size:1rem;font-weight:500}
.k-empty__picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;text-align:left}
.k-empty__picks a{display:grid;gap:2px;font-size:.875rem;line-height:1.4;color:var(--on-surface)}
.k-empty__picks b{font-weight:500;margin-top:8px}
.k-empty__picks .k-price{font-size:.875rem;font-weight:500}
.k-empty__img{display:block;aspect-ratio:1;background:var(--well);overflow:hidden}
.k-empty__img img{width:100%;height:100%;object-fit:cover}
/* §21.3 account: one photograph in place of a poster headline */
.k-auth__side{align-content:start;gap:16px}
.k-auth__img{aspect-ratio:4/5;overflow:hidden;background:var(--well);margin-bottom:8px}
.k-auth__img img{width:100%;height:100%;object-fit:cover}
.k-auth__cap{font-size:1.5rem;font-weight:500;line-height:1.3;color:var(--on-surface)}
.k-empty__picks a > span:last-child{color:var(--accent);font-weight:500}

/* §20.5 SHOP REEL — opt-in, wide screens only, native horizontal scroll */
.k-viewbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.k-viewbar .k-count-line{margin:0}
.k-view{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:3px}
.k-view button{min-height:44px;min-width:64px;padding:0 16px;border-radius:999px;font-size:.875rem;color:var(--on-surface-dim)}
.k-view button[aria-pressed="true"]{background:var(--on-surface);color:var(--surface)}
.k-view[hidden]{display:none}
.k-reelwrap{position:relative}
.k-grid.is-reel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:32px;cursor:grab}
.k-grid.is-reel.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.k-grid.is-reel .k-card{flex:0 0 clamp(340px,40vw,580px);scroll-snap-align:start;height:auto}
.k-grid.is-reel:focus-visible{outline:2px solid var(--action);outline-offset:6px}
.k-reel__nav{display:flex;justify-content:flex-end;gap:8px;margin:8px 0 clamp(96px,12vw,180px)}
.k-reel__nav[hidden]{display:none}
.k-reel__btn{width:52px;height:52px;border:1px solid var(--border-strong);border-radius:999px;display:grid;place-items:center;color:var(--on-surface)}
.k-reel__btn:hover{border-color:var(--on-surface)}
.k-reel__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Polish (§23 applied consistently): every button a pill; on buying
   surfaces button labels are plain 16px words and headings are captions. */
.k-gbtn{border-radius:999px}
body[data-page="shop"] .k-btn,body[data-page="product"] .k-btn,body[data-page="account"] .k-btn,.k-dlg .k-btn{font-size:1rem;letter-spacing:0;text-transform:none;font-weight:500}
.k-panel__head h2,body[data-page="account"] .k-auth__main .k-h3{font-family:var(--sans);font-size:1.5rem;line-height:1.3;font-weight:500;letter-spacing:0;text-transform:none}
@media (max-width:1000px){.k-gal__rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.k-gal__rail::-webkit-scrollbar{display:none}}

/* ===================== NEWSLETTER — Novashion, measured =====================
   Their values (read off the live site 2026-10-05), our colours: a light band,
   a near-black card (24px radius, 80px/32px padding), 2 columns 80px apart,
   headline 96px / 12vw at .85 line-height and -.025em, each line rising out
   of its own mask; badge pill with a live dot; 18px description at 70%;
   one white pill (8px padding) holding a 64px field (24px padding, 8px
   radius) and a 64px ember pill button; 14px terms at 50%. Fixed colours,
   not theme tokens: the card is the same dark object in both themes. */
.k-nl{background:var(--slab,#FFFFFF);padding-block:128px}
[data-theme="light"] .k-nl{background:#FFFFFF}
.k-nl__wrap{max-width:1440px;margin:0 auto;padding-inline:48px}
.k-nl__card{position:relative;overflow:hidden;border-radius:8px;padding:80px;background:#0A090C;color:#F4F1EA}
.k-nl__glow i{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.k-nl__glow i:first-child{top:-128px;right:-128px;width:400px;height:400px;background:rgba(255,90,31,.22)}
.k-nl__glow i:last-child{bottom:-20%;left:-10%;width:300px;height:300px;background:rgba(244,241,234,.08)}
.k-nl__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:center}
.k-nl__title{display:flex;flex-direction:column;gap:4px;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:128px;line-height:.85;letter-spacing:-.025em}
.k-nl__title span{display:block;overflow:hidden;padding-bottom:4px}
.k-nl__title b{display:block;font-weight:400;color:#F4F1EA}
.k-nl__title .is-hot{color:#FF5A1F}
.k-nl__title .is-dim{color:rgba(244,241,234,.5)}
.k-js .k-nl__title[data-reveal]{opacity:1;transform:none;animation:none}
.k-js .k-nl__title[data-reveal] b{transform:translateY(105%);animation:kFailsafe 0s linear 3s forwards}
.k-js .k-nl__title[data-reveal].is-in b{transform:none;transition:transform 900ms var(--out)}
.k-nl__title.is-in span:nth-child(2) b{transition-delay:90ms}
.k-nl__title.is-in span:nth-child(3) b{transition-delay:180ms}
.k-nl__side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:512px}
.k-nl__badge{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;border-radius:999px;background:rgba(244,241,234,.1);border:1px solid rgba(244,241,234,.2);
  font:700 .875rem/1.43 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#FF5A1F;margin:0 0 32px}
.k-nl__badge i{width:8px;height:8px;border-radius:50%;background:#FF5A1F;box-shadow:0 0 10px rgba(255,90,31,.8)}
.k-nl__desc{font:500 1.125rem/1.625 var(--sans);color:rgba(244,241,234,.7);margin:0 0 40px}
.k-nl__form{display:flex;align-items:center;width:100%;padding:8px;border-radius:999px;background:#FFFFFF;transition:box-shadow var(--t-state)}
.k-nl__form:focus-within{box-shadow:0 0 0 3px #FF5A1F}
.k-nl__form input{flex:1;min-width:0;height:64px;padding:4px 24px;border:0;border-radius:8px;background:transparent;color:#0A090C;font:400 1rem var(--sans);outline:none}
.k-nl__form input::placeholder{color:#5F5D59}
.k-nl__form button{flex:none;display:inline-flex;align-items:center;gap:8px;height:64px;padding:8px 32px;border-radius:999px;background:#FF5A1F;color:#0A090C;
  font:700 1rem/1 var(--sans);letter-spacing:.025em;text-transform:uppercase;transition:background-color var(--t-state)}
.k-nl__form button:hover{background:#FF7A47}
.k-nl__form button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--t-state)}
.k-nl__form button:hover svg{transform:translateX(3px)}
.k-nl__form button:focus-visible{outline:2px solid #F4F1EA;outline-offset:3px}
.k-nl__form[hidden]{display:none}
.k-nl .k-msg{margin-top:12px;color:#F4F1EA}
.k-nl .k-msg:empty{display:none}
.k-nl__terms{margin:24px 0 0;font:500 .875rem/1.43 var(--sans);color:rgba(244,241,234,.6)}
.k-nl__terms a{color:#FF5A1F;text-decoration:none}
.k-nl__terms a:hover{text-decoration:underline}
@media (max-width:1023px){
  .k-nl{padding-block:96px}
  .k-nl__wrap{padding-inline:16px}
  .k-nl__card{padding:32px}
  .k-nl__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .k-nl__title{font-size:15vw;gap:0}
  .k-nl__glow i:first-child{width:240px;height:240px;top:-90px;right:-90px}
}
@media (max-width:420px){
  .k-nl__badge{font-size:.6875rem;letter-spacing:.06em;padding:10px 14px;white-space:nowrap}
  .k-nl__desc{font-size:1rem}
  .k-nl__form input{height:48px;padding-inline:16px;font-size:1rem}
  .k-nl__form button{height:48px;padding:8px 20px;font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){.k-js .k-nl__title[data-reveal] b{transform:none;transition:none}}
.k-nl .k-msg.is-err{color:var(--nl-fg,#0A090C);font-weight:500}
.k-nl__form:has(input[aria-invalid="true"]){box-shadow:0 0 0 3px var(--action)}

/* Novashion, borrowed (owner, 2026-10-05) */
/* 1. the closing call-to-action band above the footer */
.k-marquee--cta{background:var(--surface);border-block:1px solid var(--border)}
.k-marquee--cta .k-marquee__view{display:block;color:var(--on-surface)}
.k-marquee--cta .k-marquee__track{animation-duration:40s}
.k-marquee--cta li{min-height:96px;padding:0 40px;font-family:var(--display);font-size:clamp(2rem,4vw,3.25rem);font-weight:400;letter-spacing:-.01em;color:var(--on-surface);gap:16px}
.k-marquee--cta li::after{display:none}
.k-marquee--cta li svg{width:.7em;height:.7em;padding:.12em;border-radius:50%;background:var(--action);stroke:var(--action-on,#0A090C);stroke-width:2.6;fill:none;flex:none}
.k-marquee--cta .k-marquee__view:hover li{color:var(--action)}
.k-marquee--cta .k-marquee__view:focus-visible{outline:2px solid var(--action);outline-offset:-4px}
/* 2. the open FAQ answer reads as one highlighted block */
.k-faq details[open]{background:color-mix(in srgb,var(--action) 6%,transparent)}
/* 3. a live dot before section labels on brand surfaces */
.k-head > .k-micro::before,.k-statement > .k-micro::before,.k-pagehead .k-micro::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--action);vertical-align:2px}
@media (prefers-reduced-motion:reduce){.k-marquee--cta ul + ul,.k-marquee--cta li:not(:first-child){display:none}.k-marquee--cta li{min-height:96px}}
.k-nl__form input:focus,.k-nl__form input:focus-visible{outline:none;box-shadow:none}

/* Owner, 2026-10-05: a louder logo, and the theme switch where people can
   see it — right next to the logo, quiet, icon only. */
.k-logo{font-size:2.125rem;letter-spacing:.03em;color:#FFFFFF;text-shadow:0 0 1px rgba(255,255,255,.5),0 0 16px rgba(255,140,80,.45),0 0 36px rgba(255,90,31,.25)}
[data-theme="light"] .k-logo{color:#0A090C;text-shadow:none}
.k-brand{gap:6px}
.k-theme--head{justify-content:center;width:44px;height:44px;min-height:44px;gap:0;border-radius:50%;color:var(--on-surface-faint);transition:color var(--t-state),background-color var(--t-state)}
.k-theme--head:hover{color:var(--on-surface);background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.k-theme--head svg{width:18px;height:18px}
.k-wordhint{color:var(--on-surface-dim)}

/* =================== §24 THE HOMEPAGE, PHONE FIRST =================== */
/* the range: one row of five on a wide screen, three-then-two on a tablet,
   a sideways row on a phone (the next card peeks in, so it reads as a row) */
.k-home-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,3vw,40px)}
.k-home-head .k-h2{font-size:clamp(2rem,5vw,3.5rem)}
.k-home-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
@media (max-width:1099px){.k-home-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}}
@media (max-width:639px){
  .k-home-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .k-home-grid::-webkit-scrollbar{display:none}
  .k-home-grid .k-card{flex:0 0 70vw;scroll-snap-align:start}
}
.k-home-range:focus{outline:none}

/* one idea: a full-bleed photograph with five words over it */
.k-idea{position:relative;display:grid;align-items:end;min-height:min(92svh,860px);overflow:hidden;background:#0A090C;color:#F4F1EA}
.k-idea__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-idea::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,12,0) 40%,rgba(10,9,12,.72) 100%);pointer-events:none}
.k-idea__txt{position:relative;z-index:1;display:grid;gap:24px;justify-items:start;padding:clamp(32px,6vw,96px) var(--gut)}
.k-idea__h{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,9vw,7.5rem);line-height:.92;letter-spacing:-.02em;max-width:11ch;color:#F4F1EA}
@media (max-width:639px){.k-idea{min-height:78svh}}

/* Business Connect: one image, one line, one link */
.k-bc__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.k-bc__img{aspect-ratio:4/3;overflow:hidden;background:var(--well)}
.k-bc__img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.k-bc__txt{display:grid;gap:16px;justify-items:start}
.k-bc__txt .k-h2{font-size:clamp(2rem,5vw,3.5rem)}
.k-bc__line{font-size:1.125rem;color:var(--on-surface-dim);max-width:34ch}
@media (max-width:859px){.k-bc__in{grid-template-columns:minmax(0,1fr)}}

/* the first screen on a phone: calm, not loud. Glow at about half the
   desktop strength and reach, a smaller wordmark, room above it. */
@media (max-width:599px){
  .k-hero{--wordsz:min(34vw,46svh);padding-top:calc(var(--hh) + 5svh)}
  .k-hero__mugglow{opacity:.5;width:70vw;right:15vw}
  .k-hero__mug{height:min(28svh,72vw);filter:drop-shadow(0 0 14px rgba(255,110,40,.15)) drop-shadow(0 20px 30px rgba(0,0,0,.5))}
  .k-hero__stage .k-word{text-shadow:0 0 1px rgba(251,247,240,.3),0 0 8px rgba(251,247,240,.12),0 0 26px rgba(255,110,40,.10)}
  .k-hero__stage .k-word::after{opacity:.25;filter:blur(9px)}
  .k-hero__field{opacity:.6}
  .k-logo{text-shadow:0 0 1px rgba(255,255,255,.4),0 0 8px rgba(255,140,80,.22),0 0 18px rgba(255,90,31,.12)}
  [data-theme="light"] .k-logo{text-shadow:none}
}


/* Owner, 2026-10-05: homepage images must not feel massive — Nike's
   proportions. The idea photograph is a wide banner inside the page
   margins, not a full screen; Business Connect is a modest 3:2. */
.k-idea{min-height:0;aspect-ratio:16/7;max-height:640px;width:calc(100% - 2 * var(--gut));max-width:1488px;margin:clamp(24px,4vw,56px) auto}
.k-idea__h{font-size:clamp(2.2rem,5.5vw,4.75rem);line-height:.96;max-width:12ch}
.k-idea__txt{padding:clamp(24px,4vw,56px)}
@media (max-width:639px){.k-idea{aspect-ratio:1;min-height:0}}
.k-bc__img{aspect-ratio:3/2;max-width:560px}
@media (max-width:639px){.k-home-grid{scroll-padding-inline:var(--gut)}}
.k-bc__img{position:relative}
.k-bc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--well) 70%);pointer-events:none}
.k-renew{font-size:.9375rem;color:var(--on-surface);border-left:2px solid var(--accent);padding-left:12px}

/* §25.3 KASA Connect family page: large cards, Nike-quiet text; the grid
   takes a third and fourth product without a redesign */
.k-family{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,4vw,56px) clamp(16px,2vw,24px);padding-bottom:clamp(96px,12vw,180px)}
.k-fam a{display:grid;gap:16px;color:inherit}
.k-fam__img{aspect-ratio:4/3;background:var(--well);overflow:hidden}
.k-fam__img img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--out)}
.k-fam__img.is-contain img{object-fit:contain;padding:6%}
@media (hover:hover){.k-fam a:hover .k-fam__img img{transform:scale(1.02)}}
.k-fam__txt{display:grid;gap:4px;justify-items:start}
.k-fam__txt h2{font-size:1.5rem;font-weight:500;line-height:1.3;margin-top:6px}
.k-fam__txt p{color:var(--on-surface-dim)}
.k-fam__txt .k-price{font-size:1rem;font-weight:500}
.k-fam__txt .k-link{margin-top:10px}
.k-fam a:focus-visible{outline:none}
.k-fam a:focus-visible .k-fam__img{outline:2px solid var(--action);outline-offset:3px}

/* §26.2: the opening is one thing. The product fades up 16px in 700ms and
   rests. Nothing else moves on arrival. */
@keyframes kArrive{from{opacity:0;translate:0 16px}}
@media (prefers-reduced-motion:no-preference){.k-js .k-hero__mug{animation:kArrive 700ms var(--out) both}}

/* §26.4: nothing loops. The trust band holds still: the same true statements,
   one row, wrapping on narrow screens. */
.k-marquee__track{animation:none!important;width:auto}
.k-marquee__view{-webkit-mask:none;mask:none}
.k-marquee ul{flex-wrap:wrap;justify-content:center;padding:8px var(--gut);width:100%}
.k-marquee ul[aria-hidden]{display:none}
.k-marquee li{min-height:40px;padding:0 16px}
.k-marquee li::after{margin-left:32px}
.k-marquee li:last-child::after{display:none}
.k-marquee__btn{display:none}

/* ======================== §27 THE BENTO HERO ========================
   One radius (8px) and one gap (16px), never varied. The light panel is a
   fixed light object and the side panel a fixed dark one, in both themes.
   The wordmark is sized to its own panel (container units) so it runs on
   past the panel edge and is clipped by the dark panel beside it. */
.k-bento{--bgap:16px;--brad:8px;padding:calc(var(--hh) + var(--bgap)) var(--gut) var(--bgap);background:var(--surface)}
.k-bento__grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--bgap);max-width:1600px;margin:0 auto;min-height:calc(100svh - var(--hh) - 2 * var(--bgap))}
.k-bento__main{position:relative;z-index:1;container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:40px;border-radius:var(--brad);background:#F4F1EA;color:#0A090C;min-width:0}
[data-theme="light"] .k-bento__main{background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(10,9,12,.08)}
.k-bento__side{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;padding:40px;border-radius:var(--brad);background:#17161B;color:#F4F1EA;min-width:0}
[data-theme="light"] .k-bento__side{background:#0A090C}
.k-bento .k-wordbtn{margin-top:0}
.k-bento .k-word{font-size:66cqi;line-height:.78;letter-spacing:-.045em;color:#0A090C;text-shadow:none;white-space:nowrap}
.k-bento .k-word::after{display:none}
.k-bento .k-wordhint{margin:0;color:#5F5D59;font-weight:500}
.k-bento__h{font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.15;font-weight:500;letter-spacing:-.015em;max-width:15ch;color:#0A090C}
.k-bento__h em{font-style:italic;font-weight:400}
.k-bento .k-hero__mug{position:absolute;right:6%;bottom:0;height:min(62%,560px);width:auto;z-index:1;filter:none;
  transform:translate3d(calc(var(--px,0) * -18px),calc(var(--py,0) * -10px),0) rotateY(calc(var(--px,0) * 12deg)) rotateX(calc(var(--py,0) * -6deg))}
.k-bento .k-micro{color:rgba(244,241,234,.7)}
.k-bento__copy{font-size:1.25rem;line-height:1.4;color:#F4F1EA;max-width:26ch}
.k-bento__img{flex:1;min-height:200px;border-radius:var(--brad);overflow:hidden;background:#0A090C}
.k-bento__img img{width:100%;height:100%;object-fit:cover}
.k-bento__proof{font-size:.875rem;color:rgba(244,241,234,.72)}
.k-bento .k-btn{box-shadow:none}
@media (max-width:899px){
  .k-bento__grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .k-bento__main{overflow:hidden;padding:24px;padding-bottom:0}
  .k-bento .k-word{font-size:56cqi}
  .k-bento .k-hero__mug{position:relative;right:auto;align-self:center;height:min(34svh,72vw);margin-top:8px}
  .k-bento__side{padding:24px}
  .k-bento__img{flex:none;aspect-ratio:4/3;min-height:0}
}
@media (prefers-reduced-motion:reduce){.k-bento .k-hero__mug{transform:none}}

/* §27.3 numbered section labels: "01 | Shop" — typography only */
.k-num-label{display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}
.k-num-label::before{display:none!important}
.k-idea .k-num-label{color:rgba(244,241,234,.8)}

/* Newsletter, final (owner plan step 5, §26.5): an INVERTED slab — light on
   the dark theme, dark on the light theme — with a one-colour headline.
   Novashion's measured field stays: 64px, 24px padding, button flush in one
   pill. Ember only on the button; the badge dot is gold (a detail). No glow. */
.k-nl{background:var(--surface)}
[data-theme="light"] .k-nl{background:var(--surface)}
.k-nl__card{--nl-bg:#F4F1EA;--nl-fg:#0A090C;--nl-dim:rgba(10,9,12,.68);--nl-line:rgba(10,9,12,.14);background:var(--nl-bg);color:var(--nl-fg);border-radius:8px}
[data-theme="light"] .k-nl__card{--nl-bg:#0A090C;--nl-fg:#F4F1EA;--nl-dim:rgba(244,241,234,.72);--nl-line:rgba(244,241,234,.2)}
.k-nl__glow{display:none}
.k-nl__title b,.k-nl__title .is-hot,.k-nl__title .is-dim{color:var(--nl-fg)}
.k-nl__badge{background:transparent;border-color:var(--nl-line);color:var(--nl-dim)}
.k-nl__badge i{background:var(--accent);box-shadow:none}
.k-nl__desc{color:var(--nl-dim)}
.k-nl__form{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--nl-line)}
.k-nl__form:focus-within{box-shadow:inset 0 0 0 1px var(--nl-line),0 0 0 3px var(--action)}
.k-nl__terms{color:var(--nl-dim)}
.k-nl__terms a{color:var(--nl-fg);text-decoration:underline;text-underline-offset:3px}
.k-nl .k-msg{color:var(--nl-fg)}
.k-idea__h{max-width:15ch}
@media (max-width:639px){.k-marquee ul{gap:0 4px;padding-block:12px}.k-marquee li{min-height:32px;padding:0 10px;font-size:.6875rem;letter-spacing:.14em}.k-marquee li::after{display:none}}

/* §26.5 colour, final: one accent (ember) for actions only; one metal (gold)
   for hairlines, price and small detail; no other hues. Success and error
   are derived from these. §26.6: no shadows — depth from surface value. */
:root,[data-theme="light"]{--ok:var(--accent);--err:var(--action);--shadow-lift:none;--halo-btn:none}
.k-head > .k-micro::before,.k-statement > .k-micro::before,.k-pagehead .k-micro::before{background:var(--accent)}
.k-marquee li::after{background:var(--accent)}
.k-card__label{color:var(--accent)}
/* §26.1: no browser defaults — scrollbars and checkboxes in the palette */
html{scrollbar-color:var(--border-strong) var(--surface);scrollbar-width:thin}
input[type="checkbox"],input[type="radio"]{accent-color:var(--action)}
/* §23 measured: Nike's product name is 20px */
.k-buy .k-h1{font-size:1.25rem;line-height:1.35}
.k-fam__txt h2{font-size:1.25rem}

/* §26.3 pop-up: slow and quiet. Backdrop 320ms; panel 420ms with an 8px rise
   starting 120ms later; exit 220ms fade, no movement. One easing curve. */
.k-pop{margin:auto;padding:0;border:0;background:transparent;max-width:min(520px,calc(100vw - 32px));width:100%;color:var(--on-surface);overflow:visible}
.k-pop::backdrop{background:rgba(10,9,12,.62);animation:kPopFade 320ms cubic-bezier(.22,1,.36,1) both}
.k-pop__panel{position:relative;display:grid;gap:16px;padding:40px;border-radius:8px;background:var(--surface-raised);border:1px solid var(--border);
  animation:kPopIn 420ms cubic-bezier(.22,1,.36,1) 120ms both}
.k-pop.is-out .k-pop__panel,.k-pop.is-out::backdrop{animation:kPopOut 220ms cubic-bezier(.22,1,.36,1) both}
@keyframes kPopFade{from{opacity:0}}
@keyframes kPopIn{from{opacity:0;transform:translateY(8px)}}
@keyframes kPopOut{to{opacity:0}}
.k-pop__x{position:absolute;top:8px;right:8px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:var(--on-surface-dim)}
.k-pop__x:hover{color:var(--on-surface)}
.k-pop__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.k-pop__h{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,7vw,3.25rem);line-height:.96;letter-spacing:-.02em;padding-right:40px}
.k-pop__p{color:var(--on-surface-dim)}
.k-pop__form{--nl-line:var(--border-strong)}
.k-pop__terms{font-size:.8125rem;color:var(--on-surface-dim)}
.k-pop__terms a{color:var(--on-surface);text-decoration:underline;text-underline-offset:3px}
@media (max-width:420px){.k-pop__panel{padding:32px 24px}}
@media (prefers-reduced-motion:reduce){.k-pop::backdrop,.k-pop__panel,.k-pop.is-out .k-pop__panel{animation:none}}
.k-pop__panel{grid-template-columns:minmax(0,1fr)}.k-pop__panel > *{min-width:0}

/* §28 KASA Connect banners: one shape (1672:692) in every context, never
   cropped further, shown whole */
.k-banner{padding-top:16px}
.k-banner img{display:block;width:100%;height:auto;aspect-ratio:1600/662;object-fit:cover;border-radius:8px;background:var(--well)}
.k-fam__img.is-banner,.k-bc__img.is-banner{aspect-ratio:1600/662;max-width:none}
.k-fam__img.is-banner img,.k-bc__img.is-banner img{object-fit:cover;padding:0;object-position:50% 50%}
.k-bc__img.is-banner::after{display:none}
.k-feature__img.is-banner{background:#EFE9E1}.k-feature__img.is-banner img{object-fit:contain;padding:0}
.k-feature:has(.k-feature__img.is-banner){min-height:0;align-items:center}.k-feature__img.is-banner{aspect-ratio:1600/662;background:transparent}
.k-feature__img.is-banner img{mix-blend-mode:normal}