/* KONTRAST AUDIO — home page. Shared pieces live in site.css. */

/* =====================================================================
   HERO — SAME = BOOOOORING over the KONTRAST motion trace
   ===================================================================== */
.k-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(640px,calc(100vh - var(--hdr)),1040px);min-height:clamp(640px,calc(100svh - var(--hdr)),1040px);overflow:hidden;border-bottom:1px solid var(--k-line)}
.k-hero__visual{position:absolute;top:0;right:0;bottom:0;width:68%;z-index:-1}
.k-hero__visual canvas{width:100%;height:100%}
.k-hero__inner{position:relative;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:clamp(36px,5vh,72px);padding:clamp(40px,4.6vw,76px) var(--k-margin) clamp(64px,7vw,104px)}

/* The headline fills about two thirds of the page width and never more; ~7.7em is the width of BOOOOORING once it has stretched. */
.k-hero__title{margin:0;padding-bottom:.34em;font-family:var(--k-display);font-size:clamp(40px,min(12vw,calc((100vw - 2 * var(--k-margin)) * .66 / 7.7)),210px);font-weight:900;font-stretch:100%;line-height:.86;letter-spacing:-.045em;color:var(--k-white)}
.k-hero__same{display:block}
.k-hero__same .eq{color:var(--k-champagne)}

/* BOOOOORING. It lands flat. Then each O hops down one stair and sags a little wider,
   R-I-NG slump onto the landing, and the I winds up, jumps, and stays up in outline:
   the one letter that refuses to be the same. --y is a letter's drop, --w its final width, --d its delay. */
.bore{display:inline-block;white-space:nowrap}
.bore span{display:inline-block;transform-origin:50% 100%}
.bore .st{animation:bore-step .66s linear calc(.9s + var(--d)) both}
.bore .i{position:relative;-webkit-text-stroke:max(1.5px,.011em) var(--k-white);animation:bore-jump 1.8s ease-in-out calc(.9s + var(--d)) both,bore-idle 9s ease-in-out 3.6s infinite}
.js .bore:not(.go) span,.bore.off span{animation-play-state:paused}
@keyframes bore-step{
  0%  {transform:translateY(0);font-stretch:100%;animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  22% {transform:translateY(-.05em);animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  62% {transform:translateY(calc(var(--y) + .025em)) scale(1.07,.9);font-stretch:var(--w,100%);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  80% {transform:translateY(calc(var(--y) - .012em)) scale(.98,1.03);animation-timing-function:ease-in-out}
  100%{transform:translateY(var(--y));font-stretch:var(--w,100%)}
}
@keyframes bore-jump{
  0%  {transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  8%  {transform:translateY(-.05em);animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  22% {transform:translateY(calc(var(--y) + .025em)) scale(1.07,.9);animation-timing-function:ease-out}
  29% {transform:translateY(var(--y))}
  46% {transform:translateY(var(--y));color:var(--k-white);animation-timing-function:cubic-bezier(.4,0,.7,1)}
  57% {transform:translateY(var(--y)) scale(1.16,.7);color:var(--k-white);animation-timing-function:cubic-bezier(.12,.75,.3,1)}
  72% {transform:translateY(-.2em) scale(.9,1.14);color:transparent;animation-timing-function:cubic-bezier(.6,0,.85,.45)}
  85% {transform:translateY(.17em) scale(1.08,.9);animation-timing-function:ease-out}
  93% {transform:translateY(.12em) scale(.98,1.03)}
  100%{transform:translateY(.14em);color:transparent}
}
/* the I rests at .14em, a step above the landing; now and then it hops */
@keyframes bore-idle{
  0%,90%,100%{transform:translateY(.14em)}
  92.5%{transform:translateY(.14em) scale(1.1,.82)}
  96% {transform:translateY(-.02em) scale(.94,1.08)}
  98.5%{transform:translateY(.16em) scale(1.05,.94)}
}
@supports not (-webkit-text-stroke:1px #000){@keyframes bore-jump{to{transform:translateY(.14em)}}}
@media (prefers-reduced-motion:reduce){
  .bore span{animation:none!important;transform:translateY(var(--y,0));font-stretch:var(--w,100%)}
  .bore .i{transform:translateY(.14em);color:transparent}
}

.k-hero__foot{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.k-hero__sub{font-family:var(--k-display);font-size:clamp(12px,.95vw,14px);font-weight:300;line-height:1.95;letter-spacing:var(--k-track-wide);text-transform:uppercase;color:var(--k-gray-1)}
.k-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:8px}

@media (max-width:1100px){
  .k-hero__visual{width:74%}
}
@media (max-width:900px){
  .k-hero{min-height:0}
  .k-hero__visual{position:relative;order:2;width:auto;height:clamp(230px,60vw,440px);margin-bottom:26px;z-index:0}
  .k-hero__inner{order:1;flex:none;gap:30px;padding-bottom:6px}
  .k-hero__title{font-size:clamp(30px,calc((100vw - 2 * var(--k-margin)) / 7.9),140px)}
}

/* =====================================================================
   PRODUCTS — each product is its own machine and brings its own palette.
   ===================================================================== */
.product--chronomorph{--product-accent-1:#5ad3e6;--product-accent-2:#3a7bd5;--product-glow:rgba(90,211,230,.45);--product-muted:#7d98a3;--product-ink:#0b6e80}
.product--transient{--product-accent-1:#ff5b24;--product-accent-2:#ff2a3d;--product-accent-3:#3a78ff;--product-glow:rgba(255,91,36,.45);--product-muted:#8c5a48;--product-ink:#c2410c}
.product--chronoaim{--product-accent-1:#a78bfa;--product-accent-2:#6d5dfc;--product-glow:rgba(167,139,250,.45);--product-muted:#6f6a8a;--product-ink:#6d4fd8}
.product--growl{--product-accent-1:#c8f53c;--product-accent-2:#86b51e;--product-glow:rgba(200,245,60,.35);--product-muted:#6f7a55;--product-ink:#5b7d10}

/* ---------- Featured: CHRONOMORPH as an object on warm light ---------- */
.k-feature{position:relative;padding:0 var(--k-margin);background:var(--k-cream);color:var(--k-ink)}
.k-feature ::selection{background:var(--k-ink);color:var(--k-cream)}
.k-feature .k-meta{color:var(--k-ink-2)}
.k-feature .k-meta b{color:var(--k-ink)}
.k-feature__bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;min-height:58px;padding-block:14px;border-bottom:1px solid var(--k-ink-line)}
.k-feature__bar .k-meta{display:flex;align-items:center}
.k-feature__grid{display:grid;grid-template-columns:var(--k-zone) minmax(0,1fr) clamp(160px,12vw,220px);grid-template-areas:"id fig side"}

.k-feature__id{grid-area:id;container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:clamp(44px,5vw,84px) 24px clamp(44px,5vw,72px) 0;border-right:1px solid var(--k-ink-line)}
.k-name{font-family:var(--k-display);font-size:clamp(26px,2.9vw,52px);font-size:clamp(26px,11cqi,64px);font-weight:300;font-stretch:100%;line-height:1;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
.k-name b{font-weight:900;letter-spacing:0}
.k-feature__type{display:flex;align-items:center;margin-top:16px}
.k-feature__tag{margin-top:clamp(30px,3.4vw,48px);font-size:clamp(24px,2.2vw,36px);font-weight:600;line-height:1.05;letter-spacing:-.025em}
.k-feature__copy{max-width:34ch;margin-top:18px;font-size:15px;line-height:1.6;color:var(--k-ink-2);text-wrap:pretty}
.k-feature__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:auto;padding-top:clamp(34px,4vw,56px)}
.k-feature .k-textlink{color:var(--k-ink)}

/* --out is the length of a side leader outside the screenshot; side labels sit on it, so it is at least a label wide. */
.k-feature__fig{--out:clamp(84px,6.4vw,116px);--out-y:clamp(36px,3.4vw,58px);grid-area:fig;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,3vw,40px);min-width:0;margin:0;padding:calc(var(--out-y) + 44px) calc(var(--out) + 14px);border-right:1px solid var(--k-ink-line)}
.k-device{position:relative}
.k-device__img{position:relative;display:block}
.k-device__img img{width:100%;border:1px solid #020303;box-shadow:0 50px 80px -44px rgba(8,9,10,.66),0 18px 26px -18px rgba(8,9,10,.4)}
/* crop marks around the object */
.k-device__img::before{content:"";position:absolute;inset:-16px;pointer-events:none;--c:rgba(8,9,10,.5);background:
  linear-gradient(var(--c),var(--c)) left top/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 12px no-repeat,
  linear-gradient(var(--c),var(--c)) right top/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 12px no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 12px no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 12px no-repeat}

/* Callouts: a marker on the interface, a leader that is light over the screenshot and ink on the paper, a tiny label. */
.k-callouts{position:absolute;inset:0;pointer-events:none}
.k-callout{position:absolute;color:var(--k-ink-2);transition:color 1.4s var(--k-ease-out)}
.is-live .k-callout{color:var(--product-ink)}
.k-callout::before,.k-callout::after{content:"";position:absolute;transition:transform .8s var(--k-ease-out) calc(var(--i,0) * 110ms + .15s)}
.k-callout::before{background:rgba(236,235,230,.6)}
.k-callout::after{background:currentColor;transition-delay:calc(var(--i,0) * 110ms + .5s)}
.k-callout i{position:absolute;width:11px;height:11px;margin:-5.5px;border:1px solid var(--k-cream);border-radius:50%;background:rgba(8,9,10,.35);transition:border-color 1.4s,box-shadow 1.4s,transform .5s var(--k-ease-out) calc(var(--i,0) * 110ms)}
.is-live .k-callout i{border-color:var(--product-accent-1);box-shadow:0 0 0 3px rgba(90,211,230,.16),0 0 14px var(--product-glow)}
.k-callout__label{position:absolute;display:flex;flex-direction:column;gap:3px;font-family:var(--k-mono);font-size:10px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity .8s var(--k-ease-out) calc(var(--i,0) * 110ms + .8s)}
.k-callout__label b{font-weight:500;color:var(--k-ink)}
.k-callout--l{left:calc(-1 * var(--out));top:var(--y);width:calc(var(--x) + var(--out));height:0}
.k-callout--l::before{right:0;top:0;width:calc(100% - var(--out));height:1px;transform-origin:right}
.k-callout--l::after{left:0;top:0;width:var(--out);height:1px;transform-origin:right}
.k-callout--l i{right:0;top:0}
.k-callout--l .k-callout__label{left:0;bottom:9px}
.k-callout--r{left:var(--x);right:calc(-1 * var(--out));top:var(--y);height:0}
.k-callout--r::before{left:0;top:0;right:var(--out);height:1px;transform-origin:left}
.k-callout--r::after{right:0;top:0;width:var(--out);height:1px;transform-origin:left}
.k-callout--r i{left:0;top:0}
.k-callout--r .k-callout__label{right:0;bottom:9px;align-items:flex-end;text-align:right}
.k-callout--t{left:var(--x);top:calc(-1 * var(--out-y));width:0;height:calc(var(--y) + var(--out-y))}
.k-callout--t::before{left:0;bottom:0;width:1px;height:calc(100% - var(--out-y));transform-origin:bottom}
.k-callout--t::after{left:0;top:0;width:1px;height:var(--out-y);transform-origin:bottom}
.k-callout--t i{left:0;bottom:0}
.k-callout--t .k-callout__label{left:10px;top:-2px}
.k-callout--b{left:var(--x);top:var(--y);bottom:calc(-1 * var(--out-y));width:0}
.k-callout--b::before{left:0;top:0;width:1px;bottom:var(--out-y);transform-origin:top}
.k-callout--b::after{left:0;bottom:0;width:1px;height:var(--out-y);transform-origin:top}
.k-callout--b i{left:0;top:0}
.k-callout--b .k-callout__label{left:10px;bottom:-2px}
/* Lines draw themselves when the product comes into view. */
.k-motion .product:not(.is-live) .k-callout--l::before,.k-motion .product:not(.is-live) .k-callout--l::after,
.k-motion .product:not(.is-live) .k-callout--r::before,.k-motion .product:not(.is-live) .k-callout--r::after{transform:scaleX(0)}
.k-motion .product:not(.is-live) .k-callout--t::before,.k-motion .product:not(.is-live) .k-callout--t::after,
.k-motion .product:not(.is-live) .k-callout--b::before,.k-motion .product:not(.is-live) .k-callout--b::after{transform:scaleY(0)}
.k-motion .product:not(.is-live) .k-callout i{transform:scale(0)}
.k-motion .product:not(.is-live) .k-callout__label{opacity:0}

.k-feature__side{grid-area:side;display:flex;flex-direction:column;gap:clamp(30px,3vw,46px);min-width:0;padding:clamp(44px,5vw,84px) 0 clamp(32px,4vw,56px) clamp(18px,1.8vw,28px)}
.k-wave{width:100%;height:auto;overflow:visible}
.k-wave .axis{stroke:var(--k-ink-line);stroke-width:1;vector-effect:non-scaling-stroke}
.k-wave .curve{fill:none;stroke:var(--k-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke 1.4s}
.k-wave circle{fill:var(--k-ink);transition:fill 1.4s}
.is-live .k-wave .curve{stroke:var(--product-ink)}
.is-live .k-wave circle{fill:var(--product-ink)}
.k-spec{display:grid;gap:12px}
.k-spec>div{display:grid;gap:3px;padding-top:10px;border-top:1px solid var(--k-ink-line)}
.k-spec dt{font-family:var(--k-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--k-ink-2)}
.k-spec dd{font-family:var(--k-mono);font-size:11px;letter-spacing:.06em;color:var(--k-ink)}

/* One cycle of CHRONOMORPH, drawn as a comb: behind, ahead, back on zero. */
.k-cycle{margin:0 calc(-1 * var(--k-margin));border-top:1px solid var(--k-ink-line)}
.k-cycle__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 20px;padding:12px var(--k-margin);border-bottom:1px solid var(--k-ink-line)}
.k-cycle__box{position:relative;height:clamp(130px,12vw,190px);color:var(--k-ink)}
.k-cycle__box canvas{width:100%;height:100%}
.k-cycle__tag{position:absolute;left:var(--at);bottom:14px;transform:translateX(-50%);font-family:var(--k-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--k-ink-2);transition:color .3s}
.k-cycle__tag.on{color:var(--product-ink)}

@media (max-width:1280px){
  .k-feature__grid{grid-template-columns:var(--k-zone) minmax(0,1fr);grid-template-areas:"id fig" "side side"}
  .k-feature__fig{border-right:0}
  .k-feature__side{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:start;gap:24px 56px;padding:30px 0;border-top:1px solid var(--k-ink-line)}
  .k-spec{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
}
@media (max-width:980px){
  .k-feature__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "fig" "side"}
  .k-feature__id{padding:44px 0 36px;border-right:0}
  .k-name{font-size:clamp(26px,9.6vw,64px)}
  .k-feature__fig{padding:36px 0 44px;border-top:1px solid var(--k-ink-line)}
  .k-callouts{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 24px;margin-top:34px}
  .k-callout,.k-callout--l,.k-callout--r,.k-callout--t,.k-callout--b{position:static;width:auto;height:auto;padding-top:10px;border-top:1px solid var(--k-ink-line)}
  .k-callout::before,.k-callout::after,.k-callout i{display:none}
  .k-callout__label,.k-callout .k-callout__label{position:static;align-items:flex-start;text-align:left}
  .k-feature__side{grid-template-columns:150px minmax(0,1fr)}
  .k-feature__side .k-spec{grid-column:1/-1}
}
@media (max-width:560px){
  .k-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-cycle__tag{font-size:9px;letter-spacing:.12em}
}

/* ---------- The lineup: products in development ---------- */
.k-lineup{background:var(--k-ink)}
.k-lineup__head{display:grid;grid-template-columns:var(--k-zone) minmax(0,1fr);align-items:end;gap:20px 0;padding:clamp(64px,7vw,120px) var(--k-margin) clamp(30px,3vw,44px)}
.k-lineup__head>.k-meta:first-child{align-self:start}
.k-lineup__title{font-family:var(--k-display);font-size:var(--k-t-l);font-weight:900;line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.k-lineup__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line)}

.k-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.2vw,34px) clamp(20px,2.4vw,40px) clamp(26px,2.6vw,40px);border-right:1px solid var(--k-line)}
.k-card:first-child{padding-left:var(--k-margin)}
.k-card:last-child{padding-right:var(--k-margin);border-right:0}
/* the product's colour arrives as a short accent line, and runs the full width on hover */
.k-card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--product-accent-1),var(--product-accent-2));transform:scaleX(0);transform-origin:left;transition:transform .9s var(--k-ease-out)}
.k-card.is-live::before{transform:scaleX(.16)}
.k-card:hover::before{transform:scaleX(1)}
.k-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.k-swatch{display:inline-flex;gap:3px}
.k-swatch i{width:14px;height:5px;background:var(--product-accent-1)}
.k-swatch i:nth-child(2){background:var(--product-accent-2)}
.k-swatch i:nth-child(3){background:var(--product-accent-3)}
.k-card__visual{position:relative;height:clamp(170px,15vw,250px);margin:clamp(18px,2vw,30px) 0 clamp(20px,2vw,30px);overflow:hidden}
.k-card__name{font-family:var(--k-display);font-size:clamp(19px,1.65vw,27px);font-weight:300;line-height:1.1;letter-spacing:.16em;text-transform:uppercase}
.k-card__name b{font-weight:800}
.k-card__tag{margin-top:10px}
.k-card .k-dash{width:22px;height:1px;margin:22px 0;background:var(--k-gray-3)}
.k-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.k-card__status{display:flex;align-items:center}
.k-card__cta{display:inline-flex;align-items:center;gap:10px;color:var(--k-white);transition:color .2s}
.k-card__cta:hover{color:var(--product-accent-1)}

/* 002 FUTURE TRANSIENT: an impulse fired into a dark body. */
.v-transient{position:absolute;inset:0}
.v-transient .v-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(58,120,255,.55) 16%,rgba(255,91,36,.9) 46%,rgba(255,42,61,.45) 70%,transparent 94%)}
.v-transient .v-orb{position:absolute;left:64%;top:50%;width:clamp(70px,6.4vw,108px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 70% 50%,#050505 56%,#1d0c07 100%);box-shadow:inset 4px 0 5px -1px rgba(255,196,160,.95),inset 12px 0 24px -8px rgba(255,91,36,.95),-12px 0 38px -8px rgba(255,91,36,.55);transition:box-shadow .5s}
.v-transient .v-spark{position:absolute;left:30%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff4ea;box-shadow:0 0 6px 2px #ff9a5c,0 0 22px 6px rgba(255,91,36,.8),0 0 60px 18px rgba(255,42,61,.3);transform:translate(-50%,-50%)}
.v-transient .v-spark::before{content:"";position:absolute;right:2px;top:50%;width:clamp(60px,8vw,140px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,154,92,.95));transform:translateY(-50%)}
.v-transient .v-ticks{position:absolute;left:0;right:0;bottom:12%;height:5px;background:repeating-linear-gradient(90deg,rgba(236,235,230,.22) 0 1px,transparent 1px 12px)}
.k-card.is-live .v-spark{animation:v-fire 2.4s var(--k-ease) .3s 1 both}
.k-card:hover .v-spark{animation:v-fire 1.9s var(--k-ease) infinite}
.k-card.is-live .v-orb{animation:v-flare 2.4s ease .3s 1}
.k-card:hover .v-orb{animation:v-flare 1.9s ease infinite}
@keyframes v-fire{0%{left:30%;opacity:1}55%{left:57%;opacity:1}58%{left:57%;opacity:0}59%{left:6%;opacity:0}100%{left:30%;opacity:1}}
@keyframes v-flare{0%,50%,100%{box-shadow:inset 4px 0 5px -1px rgba(255,196,160,.95),inset 12px 0 24px -8px rgba(255,91,36,.95),-12px 0 38px -8px rgba(255,91,36,.55)}60%{box-shadow:inset 6px 0 7px -1px #fff1e6,inset 22px 0 30px -8px rgba(255,91,36,1),-20px 0 60px -6px rgba(255,91,36,.85)}}

/* 003 CHRONOAIM: aim, charge, release. */
.v-aim{position:absolute;inset:0}
.v-aim i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.v-aim .v-ring{aspect-ratio:1;border:1px solid rgba(167,139,250,.26);border-radius:50%}
.v-aim .v-r1{height:88%}.v-aim .v-r2{height:58%;border-color:rgba(167,139,250,.4)}.v-aim .v-r3{height:22%;border-color:rgba(167,139,250,.55)}
.v-aim .v-h{width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.55) 26%,rgba(167,139,250,.55) 74%,transparent)}
.v-aim .v-v{width:1px;height:100%;background:linear-gradient(transparent,rgba(167,139,250,.4) 20%,rgba(167,139,250,.4) 80%,transparent)}
.v-aim .v-charge{height:58%;aspect-ratio:1;border:1.5px solid transparent;border-top-color:var(--product-accent-1);border-right-color:var(--product-accent-1);border-radius:50%;filter:drop-shadow(0 0 5px var(--product-glow));transform:translate(-50%,-50%) rotate(-45deg);transition:transform 1.6s var(--k-ease-out)}
.v-aim .v-dot{width:6px;height:6px;border-radius:50%;background:#efe9ff;box-shadow:0 0 10px 3px var(--product-glow),0 0 30px 8px rgba(109,93,252,.35)}
.k-card.is-live .v-charge{transform:translate(-50%,-50%) rotate(225deg)}
.k-card:hover .v-charge{animation:v-charge 1.6s linear infinite}
@keyframes v-charge{from{transform:translate(-50%,-50%) rotate(225deg)}to{transform:translate(-50%,-50%) rotate(585deg)}}

/* 004 GR0WLMACHINE: the signal pushed past its limits and flattened. */
.v-growl{position:absolute;inset:6% 0}
.v-growl svg{width:100%;height:100%}
.v-growl .v-bars{fill:rgba(236,235,230,.32)}
.v-growl .v-clip{fill:rgba(236,235,230,.5);transition:fill 1.4s}
.v-growl .v-thr{fill:none;stroke:rgba(236,235,230,.28);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;transition:stroke 1.4s}
.k-card.is-live .v-growl .v-clip{fill:var(--product-accent-1)}
.k-card.is-live .v-growl .v-thr{stroke:rgba(200,245,60,.5)}
.k-card:hover .v-growl svg{animation:v-growl .18s steps(2) infinite}
@keyframes v-growl{50%{transform:scaleY(1.04) translateX(1px)}}

@media (max-width:980px){
  .k-lineup__head{grid-template-columns:minmax(0,1fr) auto;gap:18px 24px}
  .k-lineup__head>.k-meta:first-child{grid-column:1/-1}
  .k-lineup__grid{grid-template-columns:minmax(0,1fr)}
  .k-card,.k-card:first-child,.k-card:last-child{padding:28px var(--k-margin) 34px;border-right:0;border-bottom:1px solid var(--k-line)}
  .k-card:last-child{border-bottom:0}
}
@media (max-width:560px){
  .k-lineup__head{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .k-card .v-spark,.k-card .v-orb,.k-card:hover .v-growl svg,.k-card:hover .v-charge{animation:none!important}
}

/* =====================================================================
   Sections below are the earlier design, kept until they are redesigned.
   ===================================================================== */
/* ---------- Philosophy (bone) ---------- */
.state{padding:clamp(44px,6.5vw,104px) var(--pad)}
.state-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin-top:clamp(30px,4.4vw,64px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
.state-cols .copy{font-size:clamp(16px,1.3vw,18px)}
.state-sign{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.mantra{font-family:var(--mono);font-size:12px;font-weight:700;line-height:1.9;letter-spacing:.16em}
@media (max-width:900px){.state-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.state-sign{grid-column:1/-1}}
@media (max-width:600px){.state-cols{grid-template-columns:minmax(0,1fr)}}

.identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,4.8vw,72px);border:1px solid var(--ink)}
.id-half{min-width:0;padding:clamp(24px,3.5vw,48px)}
.id-half--ink{background:var(--ink);color:var(--paper)}
.id-half--ink .label{color:rgba(236,235,230,.72)}
.id-half h3{margin:22px 0 16px;font-size:clamp(26px,3.1vw,50px);font-weight:800;line-height:1.04;letter-spacing:-.045em}
.id-half p:not(.label){max-width:40ch;font-size:16px;line-height:1.65;opacity:.84}
.swatches{display:flex;gap:6px;margin-top:28px}
.swatches span{width:36px;height:12px;border:1px solid currentColor}
@media (max-width:760px){.identity{grid-template-columns:minmax(0,1fr)}}

/* ---------- Lab ---------- */
.lab{--cols:140px minmax(0,.95fr) minmax(0,1.5fr) 170px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.lab-head,.lab-row{display:grid;grid-template-columns:var(--cols)}
.lab-head{background:var(--ink-2);border-bottom:1px solid var(--line)}
.lab-head span{padding:13px var(--pad);border-right:1px solid var(--line)}
.lab-head span:last-child{border-right:0}
.lab-row{border-bottom:1px solid var(--line)}
.lab-row:last-child{border-bottom:0}
.lab-row>*{display:flex;align-items:center;min-width:0;padding:clamp(20px,2.3vw,30px) var(--pad);border-right:1px solid var(--line)}
.lab-row>*:last-child{border-right:0}
.lab-date{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-3)}
.lab-title{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.lab-notes{font-size:15px;line-height:1.55;color:var(--text-2)}
.lab-kind{font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.lab-kind--hi{color:var(--paper)}
.lab-row--next .lab-title{color:var(--text-2)}
.lab-row--next .lab-notes{color:var(--text-3)}
@media (max-width:1100px){
  .lab-head{display:none}
  .lab-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date kind" "title title" "notes notes"}
  .lab-date{grid-area:date}.lab-title{grid-area:title}.lab-notes{grid-area:notes}.lab-kind{grid-area:kind}
  .lab-row>*{border-right:0}
  .lab-date,.lab-kind{padding-top:13px;padding-bottom:13px;background:var(--ink-2);border-bottom:1px solid var(--line)}
  .lab-kind{justify-content:flex-end;text-align:right}
  .lab-title{padding-bottom:6px}
  .lab-notes{padding-top:0}
}

/* ---------- Newsletter ---------- */
.join{padding:clamp(44px,6vw,96px) var(--pad)}
.join-title{font-size:clamp(32px,6.2vw,100px);font-weight:800;font-stretch:112%;line-height:.9;letter-spacing:-.05em}
.join .lead{max-width:52ch;margin:20px 0 clamp(30px,3.8vw,52px)}
.join-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(16px,2.2vw,32px);max-width:900px}
.join-field{display:flex;flex:1 1 280px;flex-direction:column;gap:12px;min-width:0}
.join-field input{width:100%;padding:8px 0 16px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;color:var(--text);font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;outline:none;transition:border-color .16s}
.join-field input::placeholder{color:rgba(242,244,245,.32)}
.join-field input:focus{border-bottom-color:var(--paper)}
.join-field input[aria-invalid="true"]{border-bottom-color:var(--amber)}
.join-note{margin-top:20px}
.join-note.is-ok{color:var(--paper)}
.join-note.is-err{color:var(--amber)}

/* ---------- Owners ---------- */
.owners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.owner{display:flex;flex-direction:column;gap:16px;min-width:0;padding:clamp(26px,2.8vw,38px) var(--pad);border-right:1px solid var(--line)}
.owner:last-child{border-right:0}
.owner>.label{padding-bottom:16px;border-bottom:1px solid var(--line);color:var(--paper)}
.owner h3{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.owner-list{display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--text-2)}
.owner-files{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums}
.owner-files li{display:flex;justify-content:space-between;gap:12px}
.owner-files li span:first-child{color:var(--text)}
.owner-link{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.owner-link.pending{font-weight:400}
@media (max-width:900px){.owners{grid-template-columns:minmax(0,1fr)}.owner{border-right:0;border-bottom:1px solid var(--line)}.owner:last-child{border-bottom:0}}