/* Kode Garment: the homepage's 'blank to brand' hero (owner, 2026-10-03). A blank hoodie is stitched over into a decorated one
   as the page scrolls. Progress arrives as --p from hero-swap.js; without JS, or with reduced motion, it rests finished. */
.kgv-hero {
  --p: 1;
  --pf: clamp(0, calc((var(--p) - 0.04) / 0.4), 1);    /* headline fills */
  --pw: clamp(0, calc((var(--p) - 0.18) / 0.58), 1);   /* blank → branded */
  position: relative;
  isolation: isolate;
  background: #141211;
  color: #fff;
}

.kgv-hero__stage { position: relative; overflow: hidden; display: flex; flex-direction: column; }

/* decoration gets its own clipped layer, so the oversized chevron never
   counts as content when blanks-v2.js checks whether the stage fits */
.kgv-hero__deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* twill stitch: diagonal running stitches, drifting as the page scrolls */
.kgv-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M0 22L22 0' stroke='%23F37021' stroke-opacity='.2' stroke-width='2' stroke-dasharray='3.889 3.889'/%3E%3C/svg%3E");
  background-position: calc(var(--p) * -88px) calc(var(--p) * 88px);
  -webkit-mask-image: radial-gradient(120% 95% at 80% 42%, #000 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.1) 100%);
          mask-image: radial-gradient(120% 95% at 80% 42%, #000 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.1) 100%);
}

/* the chevron from the Kode "K", drawn large behind the garment */
.kgv-chevron {
  position: absolute;
  top: 50%;
  right: -4%;
  height: 128%;
  width: auto;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  transform: translate(calc((1 - var(--p)) * 60px), -50%);
}

.kgv-hero__grid {
  position: relative;
  display: grid;
  align-items: center;
  gap: 44px;
  width: 100%;
  flex: 1;
  padding-block: 64px 48px;
}
@media (min-width: 1024px) {
  .kgv-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
}

.kgv-title {
  margin: 22px 0 0;
  font-family: var(--d);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(46px, min(7vw, 11.5vh), 112px);
  line-height: .9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.kgv-title > span { display: block; }

/* "BLANK" starts as an outline — an undecorated garment — and fills in */
.kgv-title__blank {
  position: relative;
  width: fit-content;
  padding-bottom: .06em;
  color: color-mix(in srgb, #F37021 calc(var(--pf) * 100%), transparent);
  -webkit-text-stroke: 2px color-mix(in srgb, #F37021 calc(var(--pf) * 100%), #FFFFFF);
}
.kgv-title__blank::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.03em;
  width: calc(var(--pf) * 100%);
  border-top: 4px dashed #F37021;
}
.kgv-title__brand { color: #fff; }

.kgv-lede { margin-top: 28px; max-width: 42ch; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.86); }
.kgv-aud { display: inline-block; color: #F37021; font-weight: 600; white-space: nowrap; }

/* ---------- the garment ---------- */

.kgv-swap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  perspective: 1600px;
}
.kgv-swap__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #2A2623;
  box-shadow: 0 40px 90px -36px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
  transform-origin: 60% 50%;
  transform: rotateY(calc((1 - var(--p)) * -18deg)) rotateX(calc((1 - var(--p)) * 6deg)) scale(calc(.9 + var(--p) * .1));
  will-change: transform;
}
.kgv-swap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* both photos share one framing, so they must share one position or the wipe misaligns */
.kgv-swap__img--blank { object-position: 50% 28%; }
.kgv-swap__img--brand { object-position: 50% 28%; clip-path: inset(0 calc((1 - var(--pw)) * 100%) 0 0); }

/* the seam where the stitching is happening: a stitch line with a scan beam */
.kgv-swap__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pw) * 100%);
  border-left: 3px dashed #F37021;
  transform: translateX(-1.5px);
  opacity: clamp(0, calc(min(var(--pw), calc(1 - var(--pw))) * 25), 1);
}
.kgv-swap__seam::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -34px;
  width: 68px;
  background: linear-gradient(90deg, transparent, rgba(243,112,33,.28) 42%, rgba(255,196,150,.6) 50%, rgba(243,112,33,.28) 58%, transparent);
  mix-blend-mode: screen;
}
.kgv-swap__seam::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #F37021;
  box-shadow: 0 0 0 5px rgba(243,112,33,.28), 0 0 24px 6px rgba(243,112,33,.55);
}

/* viewfinder corners */
.kgv-swap__corners {
  --kgv-c: rgba(255,255,255,.85);
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--kgv-c), var(--kgv-c)) top left / 22px 2px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) top left / 2px 22px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) top right / 22px 2px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) top right / 2px 22px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) bottom left / 2px 22px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--kgv-c), var(--kgv-c)) bottom right / 2px 22px no-repeat;
}

/* live readout */
.kgv-hud {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 11px;
  border-radius: 2px;
  background: rgba(12,11,10,.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.kgv-hud i { display: flex; align-items: center; gap: 8px; font-style: normal; color: rgba(255,255,255,.75); }
.kgv-hud i::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F37021;
  box-shadow: 0 0 0 3px rgba(243,112,33,.3);
  animation: kgv-blink 1.2s steps(2, jump-none) infinite;
}
.kgv-hud b { min-width: 4ch; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: #F37021; }
@keyframes kgv-blink { 50% { opacity: .25; } }

.kgv-swap__label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 6px 10px;
  border-radius: 2px;
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.kgv-swap__label--blank { background: rgba(20,18,17,.8); opacity: calc(1 - var(--pw)); }
.kgv-swap__label--brand { background: #C9550F; opacity: var(--pw); }

/* swing tags, straightening as the garment gets finished */
.kgv-tag {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 158px;
  padding: 13px 16px 12px 32px;
  background: #FBF8F3;
  color: #171514;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  font-family: var(--m);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform-origin: 0 50%;
}
.kgv-tag::before { content: ""; position: absolute; left: 15px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #141211; }
.kgv-tag b { font-family: var(--d); font-weight: 800; font-stretch: 118%; font-size: 19px; letter-spacing: -.01em; text-transform: none; }
.kgv-tag--a { top: 9%; left: -34px; transform: rotate(calc(-3deg - (1 - var(--p)) * 9deg)); }
.kgv-tag--b { bottom: 17%; right: -30px; transform: rotate(calc(2deg + (1 - var(--p)) * 8deg)); }
@media (max-width: 640px) {
  .kgv-tag--a { left: -8px; }
  .kgv-tag--b { right: -8px; }
}


/* ---------- scroll cue ---------- */

.kgv-cue {
  position: absolute;
  left: 50%;
  bottom: 118px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  opacity: clamp(0, calc(1 - var(--p) * 6), 1);
  pointer-events: none;
}
.kgv-cue::after { content: ""; height: 34px; border-left: 2px dashed #F37021; animation: kgv-cue 1.6s ease-in-out infinite; }
@keyframes kgv-cue { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(7px); opacity: 1; } }

/* pinned header (large screens where the whole stage fits; set by blanks-v2.js) */
@media (min-width: 1024px) {
  .kgv-hero.is-scrolly { height: 240vh; }
  .kgv-hero.is-scrolly .kgv-hero__stage { position: sticky; top: calc(var(--hd) + var(--tick)); height: calc(100vh - var(--hd) - var(--tick)); }
  .kgv-hero.is-scrolly .kgv-hero__grid { padding-block: 40px 28px; }
  .kgv-hero.is-scrolly .kgv-swap { width: auto; max-width: none; height: min(620px, calc(100vh - var(--hd) - var(--tick) - 220px)); }
  .kgv-hero.is-scrolly .kgv-cue { display: flex; }
}

/* container, eyebrow and buttons the hero needs on this site (the original page used utility classes for them) */
.kgv-wrap{max-width:1400px;margin-inline:auto;padding-inline:24px}
.kgv-eyebrow{margin:0;font-family:var(--m);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kgv-btns{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.kgv-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border:1px solid transparent;border-radius:2px;
  font-family:var(--d);font-weight:600;font-size:17px;line-height:1;text-decoration:none;transition:background .2s,border-color .2s}
.kgv-btn--primary{background:#F37021;color:#fff}.kgv-btn--primary:hover{background:#DA5F14;color:#fff}
.kgv-btn--ondark{color:#fff;border-color:rgba(255,255,255,.45)}.kgv-btn--ondark:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.kgv-hero .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kgv-hero a:visited{color:inherit}
@media (prefers-reduced-motion:reduce){.kgv-hud i::before,.kgv-cue::after{animation:none}}